/* ==========================================================================
   guides.css — size guides (page + drawer), help pages (Delivery, FAQ,
   guides), visible breadcrumbs. Guides / Search / SEO agent.
   Tokens come from base.css :root. Prefix: guide-.
   ========================================================================== */

/* ---------- breadcrumbs (oorhni_breadcrumbs) ---------- */
.guide-crumbs{margin-top:var(--s-5)}
.guide-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2)}
.guide-crumbs li{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0;max-width:100%}
.guide-crumbs li+li::before{content:"/";content:"/" / "";color:var(--muted)}
.guide-crumbs a,.guide-crumbs span{display:inline-flex;align-items:center;min-height:32px}
.guide-crumbs [aria-current="page"]{color:var(--ink);display:block;line-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60ch,70vw)}

/* ---------- guide pages and help pages ---------- */
.guide-page{padding-bottom:var(--sec-pad)}
.guide-page__head{padding-top:var(--s-6)}
.guide-page__more{margin-top:var(--s-7)}
.guide-page__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.guide-page__links .link-u,.guide-more .link-u{display:inline-flex;align-items:flex-end;min-height:44px}

/* ---------- guide body (shared by page, drawer and the collection section) ---------- */
.guide-body{display:grid;gap:var(--s-8)}
.drawer .guide-body,.guide-section .guide-body{gap:var(--s-7)}
.guide-block{display:grid;gap:var(--s-4);min-width:0}
.guide-h{margin:0;font:400 clamp(26px,3vw,34px)/1.15 var(--serif)}
.drawer .guide-h,.guide-section .guide-h{font-size:24px}
.guide-text{margin:0;max-width:62ch;color:var(--muted)}
.guide-soon{color:var(--ink);font:300 clamp(22px,2.4vw,28px)/1.3 var(--serif);max-width:30ch}
.guide-hint,.guide-fine{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.guide-note{margin:0;max-width:62ch;padding-left:var(--s-4);border-left:2px solid var(--sand);font-size:14px}
.guide-more{margin:var(--s-5) 0 0}

/* ---------- chart ---------- */
.guide-chart{display:grid;gap:var(--s-3);min-width:0;container-type:inline-size}

/* inches / centimetres switch (two visually-hidden radios, no JS) */
.guide-units{display:inline-flex;justify-self:start;border:1px solid var(--line-strong)}
.guide-units label{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.guide-units label:hover{color:var(--ink)}
.guide-unit--in:checked~.guide-units .guide-units__in,
.guide-unit--cm:checked~.guide-units .guide-units__cm{background:var(--ink);color:var(--paper)}
.guide-unit--in:focus-visible~.guide-units .guide-units__in,
.guide-unit--cm:focus-visible~.guide-units .guide-units__cm{outline:2px solid var(--ink);outline-offset:2px}
.guide-chart .guide-cm{display:none}
.guide-unit--cm:checked~* .guide-cm{display:inline}
.guide-unit--cm:checked~p.guide-cm{display:block}
.guide-unit--cm:checked~* .guide-in{display:none}

/* the table scrolls inside its own box, never the page */
.guide-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
.guide-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.guide-table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.guide-table caption{caption-side:top;text-align:left;padding:0 0 var(--s-3);font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.guide-table caption span{margin-left:.4em}
.guide-table th,.guide-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.guide-table thead th{font:600 11px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:normal;min-width:5.5em;border-bottom-color:var(--line-strong)}
.guide-table tbody th{font:400 20px/1.1 var(--serif);color:var(--ink)}
.guide-table tbody tr:last-child>*{border-bottom:0}
@container (min-width:520px){.guide-hint{display:none}}

/* hijab chart: becomes one card per size when space is narrow */
@container (max-width:560px){
  .guide-table--stack,.guide-table--stack tbody,.guide-table--stack tr,.guide-table--stack th,.guide-table--stack td{display:block}
  .guide-table--stack caption{display:block}
  .guide-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .guide-table--stack tr{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
  .guide-table--stack tbody th{padding:0 0 var(--s-2);border:0}
  .guide-table--stack td{display:grid;grid-template-columns:minmax(8em,38%) minmax(0,1fr);gap:var(--s-3);padding:4px 0;border:0;white-space:normal}
  .guide-table--stack td::before{content:attr(data-label);font:500 11px/1.7 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
}

/* ---------- how to measure (abaya) ---------- */
.guide-measure{display:grid;gap:var(--s-5);align-items:center}
.guide-measure__fig{margin:0;padding:var(--s-5);background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.guide-measure__svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto;overflow:visible}
.guide-measure__keys{font:500 15px var(--sans);fill:currentColor}
.guide-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.guide-points li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-3);align-items:start;color:var(--muted);font-size:14px;line-height:1.55}
.guide-points strong{font:400 20px/1.25 var(--serif);color:var(--ink)}
.guide-points__k{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink);color:var(--ink);font:500 12px/1 var(--sans)}
@media (min-width:760px){.guide-page .guide-measure{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-7)}}

/* ---------- hijab coverage diagram ---------- */
.guide-cover{margin:0;padding:var(--s-5);background:var(--paper);border:1px solid var(--line);display:grid;gap:var(--s-3)}
.guide-cover__svg{display:block;width:100%;max-width:520px;height:auto;color:var(--ink);overflow:visible}
.guide-cover__svg text{font:400 12px var(--sans);fill:currentColor}
.guide-cover__name{font-weight:600}
.guide-cover__dims{fill:var(--muted)}
.guide-facts{margin:0;display:grid;gap:var(--s-4)}
.guide-facts div{padding-top:var(--s-3);border-top:1px solid var(--line)}
.guide-facts dt{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.guide-facts dd{margin:var(--s-1) 0 0;max-width:62ch;color:var(--muted)}

/* ---------- drawers ---------- */
.guide-drawer .drawer__panel{width:min(520px,100%)}
.guide-drawer .drawer__body{padding-bottom:var(--s-8)}

/* ---------- Delivery page ---------- */
.guide-help{margin-top:var(--s-4);border-top:1px solid var(--line)}
.guide-help__item{display:grid;gap:var(--s-2);padding-block:var(--s-5);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-offset, 60px) + 16px)}
.guide-help__h{margin:0;font:400 24px/1.2 var(--serif)}
.guide-help__body{color:var(--muted)}
.guide-help__body p{margin:0;max-width:56ch}
.guide-help__body strong{color:var(--ink);font-weight:600}
.guide-help__body a{color:var(--ink);text-underline-offset:3px}
@media (min-width:760px){.guide-help__item{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-6);align-items:baseline}}

/* FAQ: linked questions land below the sticky header */
.acc[id]{scroll-margin-top:calc(var(--header-offset, 60px) + 16px)}

@media (prefers-reduced-motion:reduce){.guide-units label{transition:none}}