/* ==========================================================================
   Legal pages: privacy-policy.html, terms-and-conditions.html,
   cancellation-refund-policy.html, shipping-delivery-policy.html
   Page-only CSS, loaded after styles.css. Every rule is scoped under
   main.page-legal (or a legal- class). Tokens only: no hex, no rgba,
   no important-flag overrides. System breakpoints: 920 / 520.
   ========================================================================== */

/* ---------- Hero: title, lead, document register ---------- */
.page-legal .legal-hero__lead { max-width: 42ch; }
.page-legal .legal-doc time { font-variant-numeric: tabular-nums; }
/* the email stays on one line; long policy titles in Related may wrap */
.page-legal .legal-doc dd a[href^="mailto:"] { white-space: nowrap; }
@media (max-width: 520px) {
  /* keep the register in two columns on phones: it is five short rows */
  .page-legal .legal-doc > div { grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: var(--space-3); }
}
@media (min-width: 921px) {
  .page-legal .legal-hero .hero__panel { padding-top: 10px; }
}
@media (max-width: 920px) {
  /* stacked: keep the register on the same measure as the text below */
  .page-legal .legal-hero .hero__panel { max-width: 68ch; }
}

/* ---------- Table of contents (desktop, sticky) ----------
   The system draws .toc (and gives it its own scroll when it is taller than
   the viewport); here it gets a hanging number column and a hairline title
   rule (the running head above already carries the ink rule). */
.page-legal .toc__title { border-bottom-color: var(--line-2); }
.page-legal .toc a {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  padding: 7px 0;
}
.page-legal .toc a:focus-visible { outline-offset: -2px; }
.page-legal .legal-n { color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* ---------- Table of contents (below 921px, collapsible) ---------- */
.page-legal .legal-jump {
  max-width: 68ch;
  margin-bottom: var(--space-6);
  border-block: 1px solid var(--line-2);
}
.page-legal .legal-jump summary {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: 10px 0;
  font-size: var(--fs-small); font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.page-legal .legal-jump summary::-webkit-details-marker { display: none; }
.page-legal .legal-jump summary .i { margin-left: auto; transition: transform .18s ease; }
.page-legal .legal-jump details[open] summary .i { transform: rotate(180deg); }
.page-legal .legal-jump ol { padding-bottom: var(--space-2); }
.page-legal .legal-jump li { border-top: 1px solid var(--line); }
.page-legal .legal-jump a {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  padding: 11px 0;
  font-size: var(--fs-small); line-height: 1.4;
  text-decoration: none;
}
.page-legal .legal-jump a:hover { text-decoration: underline; }
.page-legal .legal-jump a:focus-visible { outline-offset: -2px; }
@media (min-width: 921px) {
  .page-legal .legal-jump { display: none; }
}

/* ---------- Policy text ----------
   Each numbered heading opens a hairline-ruled block. On desktop the number
   hangs in the gutter column so the words align with the body text. The
   section you jumped to gets an iris rule and number. */
.page-legal .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-legal .prose h2 {
  position: relative;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.page-legal .prose h2:target { border-top-color: var(--mark); box-shadow: 0 -1px 0 var(--mark); }
.page-legal .prose h2:first-child:target { box-shadow: none; }
.page-legal .prose h2:target .legal-n { color: var(--mark); }
/* In the display grotesk, tabular figures switch to the footed "1" and a
   full-width full stop, which read as a stray monospace face. Headings use
   the proportional figures; the TOC (Plex) keeps tabular alignment. */
.page-legal .prose h2 .legal-n { font-variant-numeric: normal; }
@media (min-width: 921px) {
  .page-legal .prose h2 .legal-n { position: absolute; right: 100%; padding-right: 0.55em; }
}

/* ---------- Closing row under the text ---------- */
.page-legal .legal-foot {
  max-width: 68ch;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.page-legal .legal-foot > * { font-size: var(--fs-small); }
.page-legal .legal-foot p { color: var(--fg-2); max-width: 46ch; }
.page-legal .legal-foot p a { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .page-legal .legal-jump summary .i { transition: none; }
}

/* ---------- Print: the policy text only ---------- */
@media print {
  .page-legal :is(.crumbs, .toc, .legal-jump, .legal-foot) { display: none; }
  .page-legal .split > * { grid-column: 1 / -1; }
  .page-legal .page-hero { padding-bottom: var(--space-6); }
  .page-legal .prose { max-width: none; }
  .page-legal .prose h2 { break-after: avoid; }
  .page-legal .prose h2 .legal-n { position: static; padding-right: 0; }
  .page-legal .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--fg-2); }
}