/* Buyer guides inherit the site's fonts, header, footer and colour palette. */
.buyer-guide-page {
  --guide-text: #303536;
  --guide-muted: #596265;
  --guide-link: #326e73;
  --guide-line: #d5dddd;
  --guide-surface: #f4f7f7;
  background: #fff;
  color: var(--guide-text);
}
.buyer-guide-page:lang(ar) { font-family: 'Cairo', sans-serif; }
.buyer-guide-page ::selection { background: #d7eceb; color: #173e40; }
.buyer-guide-page a:focus-visible { outline: 3px solid var(--guide-link); outline-offset: 5px; }
.guide-skip { position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 1100; padding: 12px; font-size: 14px; background: #fff; color: #326e73; }
.guide-skip:focus { inset-block-start: 12px; }
.buyer-guide { width: min(100% - 40px, 76ch); margin: 94px auto 64px; font-size: 16px; line-height: 1.85; }
.buyer-guide span { font-size: inherit; font-weight: inherit; }
.buyer-guide a { color: var(--guide-link); text-decoration: underline; text-underline-offset: 4px; }
.buyer-guide a:hover { text-decoration-thickness: 2px; }
.guide-navigation { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; margin-block-end: 28px; font-size: 14px; }
.guide-navigation nav { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-navigation nav span { color: var(--guide-muted); }
.buyer-guide h1, .buyer-guide h2, .buyer-guide h3 { font-family: 'Urbanist', sans-serif; color: var(--guide-link); text-wrap: balance; line-height: 1.25; }
.buyer-guide:lang(ar) h1, .buyer-guide:lang(ar) h2, .buyer-guide:lang(ar) h3 { font-family: 'Cairo', sans-serif; line-height: 1.6; }
.buyer-guide h1 { font-size: clamp(30px, 4vw, 44px); max-width: 30ch; margin: 0 0 18px; }
.guide-meta { color: var(--guide-muted); font-size: 13px; margin: 0 0 28px; }
.buyer-guide p { margin: 0 0 20px; }
.buyer-guide article ul, .buyer-guide article ol { margin: 0 0 24px; padding-inline-start: 24px; }
.buyer-guide article ul { list-style: disc; }
.buyer-guide article ol { list-style: decimal; }
.buyer-guide article li { margin-block-end: 10px; }
.buyer-guide h2 { font-size: 27px; margin: 44px 0 16px; }
.buyer-guide h3 { font-size: 20px; margin: 28px 0 12px; }
.guide-products { margin: 30px 0; }
.guide-product-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-product-row a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.guide-product-row img { width: 100%; height: 210px; object-fit: contain; background: #fff; border-radius: 12px; }
.guide-products figcaption { font-size: 12px; color: var(--guide-muted); margin-block-start: 14px; }
.guide-certificate { max-width: 520px; margin-inline: auto; }
.guide-certificate img { display: block; width: 100%; height: auto; }
.guide-certificate figcaption { font-size: 14px; }
.buyer-guide table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.buyer-guide th, .buyer-guide td { padding: 16px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--guide-line); }
.buyer-guide th { background: var(--guide-surface); font-weight: 700; }
.buyer-guide th:first-child, .buyer-guide td:first-child { white-space: nowrap; }
.guide-footer-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-block-start: 40px; padding-block-start: 24px; border-top: 1px solid var(--guide-line); }
.buyer-guide-page .site-footer { direction: inherit; }
.buyer-guide-page .footer-grid { text-align: start; }
.buyer-guide-page .footer-info { color: var(--guide-muted); font-size: 12px; }
.buyer-guide-page .site-footer:lang(ar) { font-family: 'Cairo', sans-serif; }
.buyer-guide-page:lang(ar) .site-footer a, .buyer-guide-page:lang(ar) .site-footer h4, .buyer-guide-page:lang(ar) .footer-info { font-family: 'Cairo', sans-serif; }
@media (max-width: 480px) {
  .buyer-guide { width: calc(100% - 32px); font-size: 15px; margin-block-start: 78px; }
  .buyer-guide:lang(ar) { font-size: 16px; }
  .guide-product-row { gap: 10px; }
  .guide-product-row img { height: 130px; }
  .guide-product-row a { font-size: 13px; }
  .buyer-guide table { font-size: 12px; }
  .buyer-guide th, .buyer-guide td { padding: 12px 8px; }
}
@media (prefers-color-scheme: dark) {
  .buyer-guide-page { --guide-text: #e2e7e7; --guide-muted: #b1bcbc; --guide-link: #8adce2; --guide-line: #495455; --guide-surface: #303a3b; background: #262626; }
  .buyer-guide-page ::selection { background: #326e73; color: #fff; }
}