/* ============================================================
   945 CLUB — Legal / policy document pages
   Shared by refund-policy.html and privacy-policy.html.
   Uses the tokens declared in main.css (--ink-*, --surface-*,
   --hair, --border-*) so these pages track the store's theme.
   ============================================================ */

.legal-page {
  background: var(--surface-primary, #F8EEDB);
  padding: 132px 0 96px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-primary, #1C1D3D);
}

.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.legal-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-secondary, #5E5870);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}
.legal-back:hover { color: var(--ink-primary, #1C1D3D); }

.legal-head { border-bottom: 1px solid var(--hair, #E6D5B5); padding-bottom: 36px; margin-bottom: 40px; }

.legal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary, #86868b);
  margin: 0 0 12px;
}

.legal-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(34px, 5.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 16px;
  color: var(--ink-primary, #1C1D3D);
}

.legal-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-secondary, #5E5870);
  margin: 0 0 18px;
  max-width: 60ch;
}

.legal-meta {
  font-size: 13px;
  color: var(--ink-tertiary, #86868b);
  margin: 0;
}

/* ---------- placeholder notice ---------- */
.legal-callout {
  background: var(--surface-secondary, #F3E6CC);
  border: 1px solid var(--border-regular, rgba(0, 0, 0, 0.12));
  border-left: 3px solid var(--ink-primary, #1C1D3D);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-secondary, #5E5870);
  margin-bottom: 44px;
}
.legal-callout strong { color: var(--ink-primary, #1C1D3D); font-weight: 700; }

/* ---------- table of contents ---------- */
.legal-toc {
  background: var(--surface-secondary, #F3E6CC);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 52px;
}
.legal-toc-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary, #86868b);
  margin: 0 0 14px;
}
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { font-size: 14px; margin-bottom: 9px; break-inside: avoid; color: var(--ink-tertiary, #86868b); }
.legal-toc a { color: var(--ink-secondary, #5E5870); text-decoration: none; transition: color 0.18s ease; }
.legal-toc a:hover { color: var(--ink-primary, #1C1D3D); text-decoration: underline; }

/* ---------- body sections ---------- */
.legal-section { margin-bottom: 48px; scroll-margin-top: 96px; }

.legal-section h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink-primary, #1C1D3D);
}

.legal-section p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-secondary, #5E5870);
  margin: 0 0 16px;
}
.legal-section strong { color: var(--ink-primary, #1C1D3D); font-weight: 650; }

.legal-section ul,
.legal-section ol { margin: 0 0 18px; padding-left: 22px; }
.legal-section li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-secondary, #5E5870);
  margin-bottom: 10px;
}

.legal-steps li { padding-left: 4px; margin-bottom: 13px; }

/* Definition-style lists: a bolded lead-in term followed by its prose.
   Used for the Definition, Information We Collect, Cookies and Disclosure
   sections, where each bullet is "Term: explanation". */
.legal-defs { list-style: none; padding-left: 0 !important; }
.legal-defs li {
  padding-left: 16px;
  border-left: 2px solid var(--hair, #E6D5B5);
  margin-bottom: 16px;
}
.legal-defs strong { color: var(--ink-primary, #1C1D3D); font-weight: 650; }

/* The purpose-of-collection list is lettered (a., b., c.) in the source
   document, so it is lettered here too. */
.legal-alpha { list-style: lower-alpha; }

/* A field the approved legal text still leaves blank - registered entity name,
   Grievance Officer details. Deliberately conspicuous so it cannot ship
   unnoticed. */
.legal-pending {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(191, 128, 0, 0.13);
  color: #7a5200;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}

.legal-note {
  font-size: 13.5px !important;
  color: var(--ink-tertiary, #86868b) !important;
  border-left: 2px solid var(--hair, #E6D5B5);
  padding-left: 14px;
  font-style: italic;
}

.legal-highlight {
  background: var(--surface-secondary, #F3E6CC);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px !important;
  color: var(--ink-primary, #1C1D3D) !important;
  font-weight: 550;
}

.legal-contact { list-style: none; padding-left: 0 !important; }
.legal-contact li { display: flex; gap: 12px; flex-wrap: wrap; }
.legal-contact strong { min-width: 140px; display: inline-block; }
.legal-contact a { color: var(--ink-primary, #1C1D3D); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- tables ---------- */
.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.legal-table th {
  text-align: left;
  padding: 11px 14px;
  background: var(--surface-secondary, #F3E6CC);
  color: var(--ink-primary, #1C1D3D);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair, #E6D5B5);
}
.legal-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  color: var(--ink-secondary, #5E5870);
  vertical-align: top;
}
.legal-table tbody tr:last-child td { border-bottom: none; }

/* ---------- footer crosslink ---------- */
.legal-crosslink {
  border-top: 1px solid var(--hair, #E6D5B5);
  padding-top: 28px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-tertiary, #86868b);
}
.legal-crosslink a { color: var(--ink-primary, #1C1D3D); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .legal-page { padding: 104px 0 72px; }
  .legal-wrap { padding: 0 20px; }
  .legal-toc { padding: 20px 22px; }
  .legal-toc ol { columns: 1; }
  .legal-section { margin-bottom: 40px; }
  .legal-contact strong { min-width: 0; display: block; }
}

/* ---------- product detail page (server-rendered at /product/:id) ---------- */
/* A product page is not a legal document, and it was borrowing one's spacing.
   .legal-page reserves 132px of top padding (104px on a phone) for a long
   document with a big title header; under a 56px navbar that put the first
   thing a visitor sees 160px down an 812px screen -- the top fifth of the
   phone, blank, above the fold on every one of 4,057 pages. */
.legal-page.pdp-page { padding-top: 84px; padding-bottom: 64px; }

/* The nav on these pages carries no burger, because the page ships no
   interactive JS at all -- by design, so it stays a plain crawlable document.
   On the storefront .nlinks hides on a phone and the burger takes over; here
   there is nothing to take over, so the links themselves stay visible and the
   nav is the only way out besides the logo and the breadcrumb. Plain anchors,
   no script needed. */
.pdp-nav .nlinks { display: flex; gap: 18px; }

/* These pages exist so each product has a URL a crawler can index; before them
   everything lived behind `#product-<id>` on the homepage. Same markup for
   everyone -- serving crawlers something visitors do not get is cloaking. */
.pdp-crumbs {
  font-size: 13px;
  color: var(--ink-tertiary, #86868b);
  margin-bottom: 26px;
}
.pdp-crumbs a { color: var(--ink-secondary, #5E5870); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--ink-primary, #1C1D3D); text-decoration: underline; }

.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pdp-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--surface-secondary, #F3E6CC);
  object-fit: contain;
  aspect-ratio: 4 / 3;
}
.pdp-body .legal-title { font-size: 30px; margin: 4px 0 6px; }

.pdp-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-primary, #1C1D3D);
  margin: 18px 0 22px;
}
.pdp-price s { font-size: 16px; font-weight: 500; color: var(--ink-tertiary, #86868b); margin-left: 8px; }
.pdp-stock {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary, #5E5870);
}

.pdp-sizes { list-style: none; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-sizes li {
  min-width: 44px;
  padding: 8px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--hair, #E6D5B5);
  border-radius: 8px;
  margin-bottom: 0;
}

.pdp-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ink-primary, #1C1D3D);
  color: var(--surface-primary, #fff) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}
.pdp-cta:hover { opacity: 0.86; }

@media (max-width: 720px) {
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .pdp-body .legal-title { font-size: 25px; }
  /* Here, not in the .legal-page block further up: this file states the
     desktop .pdp-page padding between the two, and an equally specific rule
     later in the file wins. Declared there, the phone override lost at every
     width. */
  .legal-page.pdp-page { padding: 72px 0 56px; }
  /* Shown, not hidden -- see the note by .pdp-nav above. */
  .pdp-nav .nlinks { display: flex; gap: 14px; }
  .pdp-nav .nlink { font-size: 13px; }
}

/* Numbered clauses in the counsel-drafted policies: 1.1, 1.2, 5.3(a) and so on.
   The source numbers them, so the markup does too rather than flattening them
   into prose. */
.legal-clauses { counter-reset: clause; list-style: none; padding-left: 0 !important; }
.legal-clauses > li {
  counter-increment: clause;
  position: relative;
  padding-left: 42px;
  margin-bottom: 16px;
}
.legal-clauses > li::before {
  content: counter(clause);
  position: absolute;
  left: 0;
  top: 1px;
  min-width: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-tertiary, #86868b);
  font-variant-numeric: tabular-nums;
}
.legal-clauses ul { margin-top: 10px; }