/** Shopify CDN: Minification failed

Line 502:57 Unexpected "("

**/
/* ==========================================================================
   KOPPĀ BEAUTY — Legal Page Styles
   Used by sections/main-policy, page-accessibility, page-contact,
   page-giveaway-terms, page-privacy-policy, page-shipping-returns and
   page-terms. The templates this line used to name — policy.json and
   page.legal.json — have never existed in this theme.
   ========================================================================== */

/* ── Page hero ── */
.legal-hero {
  background: linear-gradient(135deg, var(--ground-tint) 0%, var(--ground-tint) 100%);
  border-bottom: var(--hairline) solid var(--rule-soft);
  padding: 6rem var(--gutter, 2.4rem) 5rem;
  text-align: center;
}

.legal-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-strong);
  margin-bottom: var(--space-3);
}

.legal-hero__title {
  font-family: var(--font-sans);
  font-size: var(--text-figure);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-display-2);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}

.legal-hero__meta {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* ── Content wrapper ── */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 6rem var(--gutter, 2.4rem) 8rem;
}

/* ── Intro lead paragraph ── */
.legal-content__lead {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--ground-tint);
  border-left: 3px solid var(--rule-active);
  padding: var(--space-6) 28px;
  border-radius: 0;
  margin-bottom: var(--space-12);
}

/* ── Section divider ── */
.legal-section {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: var(--hairline) solid var(--rule-soft);
}

.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Typography within content ── */
.legal-content h2,
.legal-rte h2 {
  font-family: var(--font-sans);
  font-size: var(--text-display-3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-display-2);
  line-height: 1.25;
  color: var(--ink);
  margin: 36px 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--rule-soft);
}

.legal-content h2:first-child,
.legal-rte h2:first-child {
  margin-top: 0;
}

.legal-content h3,
.legal-rte h3 {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin: 28px 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.legal-content p,
.legal-rte p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.legal-content ul,
.legal-rte ul,
.legal-content ol,
.legal-rte ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: 0;
  list-style: none;
}

.legal-content ul li,
.legal-rte ul li {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  position: relative;
}

.legal-content ul li::before,
.legal-rte ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--ground-inverse);
}

.legal-content ol,
.legal-rte ol {
  counter-reset: legal-counter;
}

.legal-content ol li,
.legal-rte ol li {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  padding: var(--space-1) 0 var(--space-1) 28px;
  position: relative;
  counter-increment: legal-counter;
}

.legal-content ol li::before,
.legal-rte ol li::before {
  content: counter(legal-counter) ".";
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-weight: var(--weight-medium);
  color: var(--ink);
  font-size: var(--text-body);
}

.legal-content a,
.legal-rte a {
  color: var(--ink-strong);
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-muted);
  transition: color var(--motion) var(--ease), text-decoration-color var(--motion) var(--ease);
}

.legal-content a:hover,
.legal-rte a:hover {
  color: var(--ink-strong);
  text-decoration-color: var(--ink-strong);
}

/* ── Shipping table ── */
.legal-table-wrapper {
  overflow-x: auto;
  margin: var(--space-5) 0 var(--space-8);
  border-radius: 0;
  border: 0;
  /* Edge fade signals there's more table to swipe to on narrow screens */
  background: linear-gradient(to right, var(--ground) 30%, var(--rule-inverse)) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--ground) 30%, var(--rule-inverse)) right / 40px 100% no-repeat local,
    linear-gradient(to right, var(--ground-tint), var(--ground-tint)) left / 14px 100% no-repeat scroll,
    linear-gradient(to left,  var(--ground-tint), var(--ground-tint)) right / 14px 100% no-repeat scroll;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-body);
}

.legal-table th {
  background: transparent;
  color: var(--ink-muted);
  border-bottom: var(--hairline) solid var(--rule-active);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.legal-table th:first-child { border-radius: 0; }

.legal-table td {
  padding: var(--space-4) var(--space-5);
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.5;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table tr:nth-child(even) td {
  background: transparent;
}

.legal-table__sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-body);
  /* #757575 failed WCAG AA (~2.6:1) at this size; #757575 passes and is
     already the site's meta-text gray. Keep #757575 for borders only. */
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}

/* ── Contact card ── */
.legal-contact-card {
  background: linear-gradient(135deg, var(--ground-tint) 0%, var(--ground-tint) 100%);
  border: var(--hairline) solid var(--rule);
  border-radius: 0;
  padding: var(--space-8);
  margin-top: var(--space-10);
}

.legal-contact-card__label {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}

.legal-contact-card__name {
  font-family: var(--font-sans);
  font-size: var(--text-display-3);
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.legal-contact-card__address {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.legal-contact-card__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--ink);
  text-decoration: none;
}

.legal-contact-card__email:hover {
  color: var(--ink);
}

/* ── FAQ-style highlighted blocks ── */
.legal-qa {
  background: var(--ground-tint);
  border-radius: 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}

.legal-qa__q {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.legal-qa__a {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* Both classes on purpose. Ordering after .legal-qa__a is necessary but not
   sufficient: `.legal-content p` (line 105) is (0,1,1) and outranks a lone
   `.legal-qa__a--note` (0,1,0), so it won on colour and margin no matter
   where this sat. Doubling the class makes this (0,2,0) and it finally wins.
   Verified on the live shipping page, where the note had been rendering
   pixel-identical to an ordinary answer. */
.legal-qa__a.legal-qa__a--note {
  margin-top: calc(-1 * var(--space-2));
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  /* no italics — site-wide rule */
}

/* ── MOBILE BREAKPOINTS ── */
@media (max-width: 749px) {
  /* Hero padding reduction */
  .legal-hero { padding: 4.8rem var(--gutter, 2.4rem) 4rem; }

  /* Content padding reduction */
  .legal-content { padding: var(--space-10) var(--space-5) var(--space-14); }

  /* Lead paragraph padding */
  .legal-content__lead { padding: var(--space-5) var(--space-4); font-size: var(--text-body); }

  /* Contact card padding */
  .legal-contact-card { padding: var(--space-6); }

  /* Table — allow horizontal scroll; 560px keeps all four international
     columns readable instead of crushing them (the wrapper scrolls) */
  .legal-table { min-width: 560px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE SIZING + ALIGNMENT PASS — ≤ 749px  (Medicube scale, 2026-08)
   Site-wide rules: text LEFT on mobile, page H1s cap 2.4rem,
   eyebrows 1.1rem caps, gutters from --gutter (1.6rem).
   Covers privacy, terms, shipping-returns and accessibility.
══════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
  .legal-hero { text-align: left; padding: 4rem var(--gutter, 1.6rem) 3.2rem; }
  .legal-hero__eyebrow { font-size: var(--text-label); letter-spacing: var(--track-eyebrow); margin-bottom: var(--space-2); }
  .legal-hero__title { font-size: var(--text-display-2); margin-bottom: var(--space-2); }
  .legal-hero__meta { font-size: var(--text-body-sm); }
  .legal-content { padding: 3.2rem var(--gutter, 1.6rem) 4.8rem; }
  .legal-content__lead { font-size: var(--text-body); padding: var(--space-4) var(--space-4); margin-bottom: var(--space-8); }
}

/* ══════════════════════════════════════════════════════════════
   LEGAL DOCUMENT — MOBILE, to the approved mockup (2026-09-06)

   Scoped two ways on purpose: .legal-doc      privacy, terms and accessibility only. This file is
                   also loaded by page-shipping-returns and main-policy,
                   which do not carry the wrapper and are untouched.
   max-width:749px phones only, per the brief. Desktop keeps the page it
                   already had; the contents list and the section
                   numerals are mobile-only elements and are hidden above
                   the breakpoint.

   The copper is new — the theme has no such token, because the restyle
   is achromatic and the only copper on the site is inside the logo
   artwork. It is declared on .legal-doc, so like --gb-pink it cannot
   reach any other page.
   ══════════════════════════════════════════════════════════════ */
.legal-doc { --legal-copper: var(--ink-muted); --legal-panel: var(--ground-tint); }
.legal-toc, .legal-section__num { display: none; }

@media (max-width: 749px) {

  .legal-doc .legal-hero {
    background: var(--ground-tint);
    padding: 3.2rem var(--gutter, 1.6rem) 3.6rem;
    text-align: left;
  }
  .legal-doc .legal-hero__eyebrow { color: var(--legal-copper); }

  /* koppa-type.css pins h1 to the 11px uppercase UI step with
     !important; the mockup's title is a large display line, so it needs the
     same weapon plus an element selector to out-specify it. */
  body .legal-doc .legal-hero__title {
    font-family: var(--font-sans);
    font-size: var(--text-display-1) !important;
    font-weight: var(--weight-regular) !important;
    letter-spacing: var(--track-display-2) !important;
    line-height: 1.08 !important;
    text-transform: none !important;
    margin: var(--space-2) 0 var(--space-3);
  }
  .legal-doc .legal-hero__meta { margin: 0; }

  .legal-doc .legal-content { padding: 0 var(--gutter, 1.6rem) 4rem; }

  .legal-doc .legal-doc__intro {
    background: var(--legal-panel);
    padding: var(--space-6) var(--space-5);
    margin: 0 calc(-1 * var(--gutter, 1.6rem)) 3.2rem;
  }
  .legal-doc .legal-doc__intro p { max-width: none; }
  .legal-doc .legal-doc__intro p + p { margin-top: var(--space-4); }
  /* The intro paragraph is authored as .legal-content__lead, which carries
     its own panel plus a 3px rule. The panel is the wrapper's job here and
     the mockup has no rule, so the inner one stands down. */
  .legal-doc .legal-doc__intro .legal-content__lead {
    background: none; border-left: 0; padding: 0; margin: 0;
  }

  /* ── Contents ── */
  .legal-doc .legal-toc { display: block; margin-bottom: var(--space-8); }
  .legal-toc__label-head {
    font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--ink-muted);
    margin: 0 0 var(--space-3); max-width: none;
  }
  .legal-toc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .legal-toc__item {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 4.4rem;            /* tap target */
    padding: var(--space-2) var(--space-2);
    background: var(--legal-panel);
    border-radius: var(--radius);
    text-decoration: none; color: var(--ink);
  }
  .legal-toc__num { color: var(--legal-copper); flex-shrink: 0; }
  /* koppa-type.css catches [class*="-label"] and sets 11px uppercase with
     !important. That is right for the "In this article" head above, and
     wrong for the entry titles, which the mockup sets sentence case. */
  body .legal-toc__label {
    flex: 1; min-width: 0;
    font-size: var(--text-body-sm) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .legal-toc__chev { flex-shrink: 0; color: var(--ink-muted); line-height: 0; }
  .legal-toc__chev svg { width: 1.4rem; height: 1.4rem; display: block; }

  /* ── Sections ── */
  .legal-doc .legal-section {
    border-top: var(--hairline) solid var(--rule);
    padding-top: 28px; margin-top: 28px;
    scroll-margin-top: 8rem;       /* clears the sticky header on jump */
  }
  .legal-doc .legal-section:first-of-type { border-top: 0; }
  .legal-doc .legal-section__num {
    display: block; color: var(--legal-copper);
    margin: 0 0 var(--space-2); max-width: none;
  }
  body .legal-doc .legal-section h2 {
    font-family: var(--font-sans);
    font-size: var(--text-display-2) !important;
    font-weight: var(--weight-regular) !important;
    letter-spacing: var(--track-display-2) !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    margin: 0 0 var(--space-3);
  }
  .legal-doc .legal-section p { max-width: none; }
  .legal-doc .legal-section p + p { margin-top: var(--space-4); }

}
  /* Copper bullets, drawn rather than inherited from the UA marker */
  .legal-doc .legal-section ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
  .legal-doc .legal-section ul li {
    position: relative; padding-left: var(--space-5); margin-bottom: var(--space-2);
  }
  .legal-doc .legal-section ul li::before {
    content: ""; position: absolute; left: 0.4rem; top: 0.85em;
    width: 5px; height: 5px; border-radius: var(--radius-round);
    background: var(--legal-copper);
  }

   SHIPPING & RETURNS — MOBILE, to the approved mockup (2026-09-06)

   .legal-help scopes this away from .legal-doc (privacy, terms,
   accessibility), which shares this stylesheet. Phone-only; desktop
   keeps the flat document, and <details> is left open there so the
   accordion is a mobile affordance rather than a second version of
   the policy.
   ══════════════════════════════════════════════════════════════ */
.legal-help { --sr-tint: var(--ground-tint); --sr-panel: var(--ground-tint); }
.sr-m-only { display: none; }
.legal-help .sr-stats { display: none; }
/* Desktop keeps the flat document it had: the summary is stripped back to
   the heading it used to be, and the cards stay open. The summary is NOT
   hidden — hiding it would leave a collapsed <details> with no control. */
.legal-help .sr-card { display: block; }
.legal-help .sr-card > .sr-card__head { list-style: none; cursor: default; }
.legal-help .sr-card > .sr-card__head::-webkit-details-marker { display: none; }
.legal-help .sr-card__icon,
.legal-help .sr-card__sub,
.legal-help .sr-card__chev { display: none; }

@media (max-width: 749px) {
  .sr-m-only { display: block; }

  /* ── Hero ── */
  .legal-help .sr-hero {
    display: grid; grid-template-columns: 1fr 38%;
    gap: var(--space-3); align-items: start;
    background: var(--ground-tint);
    padding: 2.8rem var(--gutter, 1.6rem) 2.4rem;
    text-align: left;
  }
  body .legal-help .legal-hero__title {
    font-size: var(--text-display-1) !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: var(--track-display-2) !important;
    line-height: 1.08 !important;
    text-transform: uppercase !important;
    margin: var(--space-2) 0 var(--space-2);
  }
  .legal-help .sr-hero__sub { margin: 0; max-width: 24rem; }
  .legal-help .legal-hero__meta { display: none; }
  .legal-help .sr-hero__media { position: relative; }
  .legal-help .sr-hero__img { width: 100%; height: auto; display: block; }
  .legal-help .sr-hero__cap {
    margin: var(--space-2) 0 0; text-align: right; max-width: none;
    font-size: var(--text-label) !important; color: var(--ink-muted);
  }

  /* ── Promise strip ── */
  .legal-help .sr-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--ground-tint); gap: var(--space-1);
    padding: 0 var(--gutter, 1.6rem) 2.8rem;
  }
  .sr-stat { text-align: center; }
  .sr-stat__icon { display: block; color: var(--ink); margin: 0 auto 0.8rem; }
  .sr-stat__icon svg { width: 2.2rem; height: 2.2rem; display: block; margin: 0 auto; }
  .sr-stat__label { text-align: center; max-width: none; line-height: 1.3; }

  /* ── Cards ── */
  .legal-help .legal-content { padding: 2.4rem var(--gutter, 1.6rem) 4rem; }
  /* The intro is authored with its own panel and a 3px rule; on the card
     layout it reads as one more panel competing with them. */
  .legal-help .sr-intro { margin-bottom: var(--space-5); }
  .legal-help .sr-intro .legal-content__lead {
    background: none; border-left: 0; padding: 0; margin: 0 0 var(--space-4);
  }
  .legal-help .sr-intro h2 { border-bottom: 0; padding-bottom: 0; }

  .legal-help .sr-card {
    display: block; background: var(--sr-panel);
    border: 0; border-radius: var(--radius);
    margin: 0 0 var(--space-2); padding: 0;
    scroll-margin-top: 8rem;
  }
  .legal-help .sr-card > .sr-card__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-4); cursor: pointer;
    list-style: none; min-height: 4.4rem;   /* tap target */
  }
  .sr-card__head::-webkit-details-marker { display: none; }
  .sr-card__icon {
    flex-shrink: 0; width: 4rem; height: 4rem; border-radius: var(--radius-round);
    background: var(--sr-tint); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
  .sr-card__icon svg { width: 2rem; height: 2rem; display: block; }
  .sr-card__text { flex: 1; min-width: 0; }
  /* .legal-content h2 gives every heading a 2px rule and a top margin —
     right for the flat document, wrong inside a card head. */
  body .legal-help .sr-card__title {
    display: block;
    font-size: var(--text-body) !important; font-weight: var(--weight-medium) !important;
    letter-spacing: var(--track-display-2) !important; line-height: 1.25 !important;
    text-transform: uppercase !important; color: var(--ink);
    margin: 0; padding-bottom: 0; border-bottom: 0;
  }
  body .legal-help .sr-card__sub {
    display: block; margin-top: var(--space-1);
    font-size: var(--text-body-sm) !important; font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: var(--ink-muted);
  }
  .sr-card__chev { flex-shrink: 0; color: var(--ink-muted); line-height: 0; transition: transform var(--motion) var(--ease); }
  .sr-card__chev svg { width: 1.8rem; height: 1.8rem; display: block; }
  .legal-help .sr-card[open] .sr-card__chev { transform: rotate(180deg); }
  .legal-help .sr-card__body { padding: 0 var(--space-4) var(--space-4); }
  .legal-help .sr-card__body > *:first-child { margin-top: 0; }
  .legal-help .sr-card__body p { max-width: none; }

  /* ── Still need help ── */
  .sr-help {
    position: relative; overflow: hidden;
    background: var(--sr-tint); border-radius: var(--radius);
    margin-top: var(--space-6); padding: var(--space-6) var(--space-5);
  }
  .sr-help__copy { position: relative; z-index: 1; max-width: 22rem; }
  .sr-help__eyebrow {
    font-size: var(--text-label) !important; font-weight: var(--weight-medium); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--ink); margin: 0 0 var(--space-2); max-width: none;
  }
  body .sr-help__head {
    font-size: var(--text-display-2) !important; font-weight: var(--weight-medium) !important;
    letter-spacing: var(--track-display-2) !important; line-height: 1.1 !important;
    text-transform: none !important; margin: 0 0 var(--space-2); max-width: none;
  }
  .sr-help__sub { margin: 0 0 var(--space-4); max-width: none; }
  .sr-help__btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 4.4rem; padding: var(--space-3) var(--space-5);
    background: var(--ground-inverse); color: var(--ink-inverse); border-radius: var(--radius);
    text-decoration: none;
  }
  .sr-help__media { position: absolute; right: 0; bottom: 0; width: 45%; z-index: 0; }
  .sr-help__img { width: 100%; height: auto; display: block; }

  /* ── Sustainability ── */
  .sr-sustain {
    display: flex; gap: var(--space-4); align-items: flex-start;
    border-top: var(--hairline) solid var(--rule); margin-top: 28px; padding-top: var(--space-6);
  }
  .sr-sustain__icon { flex-shrink: 0; color: var(--ink); line-height: 0; }
  .sr-sustain__icon svg { width: 2.6rem; height: 2.6rem; display: block; }
  .sr-sustain__label {
    font-size: var(--text-label) !important; font-weight: var(--weight-medium); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--ink); margin: 0 0 var(--space-1); max-width: none;
  }
  .sr-sustain__text { margin: 0; max-width: none; }

  /* ── Placeholders, until the photography lands ── */
  .sr-ph {
    background: linear-gradient(145deg, var(--ground-tint) 0%, var(--ground-tint) 100%);
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
  }
  .sr-ph span { font-size: var(--text-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
  .sr-ph--help { aspect-ratio: 4 / 3; }
}


/* ══════════════════════════════════════════════════════════════
   SHIPPING & RETURNS — DESKTOP (≥750px). The same blocks as the phone
   mockup, laid out for the wide screen: split hero, four-up promise strip,
   two-column cards with their icons, a help band and the sustainability
   note. Scoped to .legal-help so the other legal pages keep the document.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 750px) {
  .legal-help .sr-m-only { display: block; }
  .legal-help .sr-hero {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0;
    padding: 0; text-align: left; background: var(--ground-tint);
    border-bottom: var(--hairline) solid var(--rule-soft);
  }
  .legal-help .sr-hero__copy {
    display: flex; flex-direction: column; justify-content: center;
    max-width: 640px; width: 100%; margin-left: auto;
    padding: var(--section-pad) var(--space-12) var(--section-pad) var(--gutter);
  }
  .legal-help .legal-hero__eyebrow { color: var(--ink-muted); margin-bottom: var(--space-3); }
  body .legal-help .legal-hero__title {
    font-size: var(--text-display-1) !important; font-weight: var(--weight-regular) !important;
    letter-spacing: var(--track-display-1) !important; line-height: 1.08 !important;
    text-transform: uppercase !important; margin: 0 0 var(--space-4);
  }
  .legal-help .sr-hero__sub { margin: 0; max-width: 44ch; color: var(--ink-muted); }
  .legal-help .legal-hero__meta { margin-top: var(--space-6); }
  .legal-help .sr-hero__media { position: relative; min-height: 520px; }
  .legal-help .sr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .legal-help .sr-hero__cap { position: absolute; right: var(--space-5); bottom: var(--space-4); margin: 0; color: var(--ink-inverse); max-width: 22rem; text-align: right; }
  .legal-help .sr-ph--hero { position: absolute; inset: 0; aspect-ratio: auto; }

  .legal-help .sr-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
    max-width: var(--container-narrow); margin: 0 auto;
    padding: var(--space-6) var(--gutter);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .legal-help .sr-stat { display: flex; align-items: center; gap: var(--space-3); }
  .legal-help .sr-stat__icon { flex-shrink: 0; color: var(--ink); line-height: 0; }
  .legal-help .sr-stat__icon svg { width: 2.2rem; height: 2.2rem; display: block; }
  .legal-help .sr-stat__label { margin: 0; max-width: none; line-height: 1.3; }

  .legal-help .legal-content {
    max-width: var(--container-narrow);
    padding: var(--section-pad) var(--gutter);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6);
    align-items: stretch;
  }
  .legal-help .sr-intro, .legal-help .sr-help, .legal-help .sr-sustain { grid-column: 1 / -1; }
  .legal-help .sr-intro { max-width: 66ch; margin-bottom: var(--space-4); }
  .legal-help .sr-intro .legal-content__lead { background: none; border-left: 0; padding: 0; margin: 0 0 var(--space-4); }
  .legal-help .sr-intro h2 { border-bottom: 0; padding-bottom: 0; }
  .legal-help .sr-card {
    display: block; background: var(--ground-tint); border: var(--hairline) solid var(--rule-soft);
    padding: var(--space-8); margin: 0;
  }
  .legal-help .sr-card > .sr-card__head { display: flex; align-items: flex-start; gap: var(--space-4); cursor: default; padding: 0 0 var(--space-5); margin-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--rule); }
  .legal-help .sr-card__icon { display: flex; flex-shrink: 0; width: 4.4rem; height: 4.4rem; border-radius: var(--radius-round); background: var(--ground); color: var(--ink); align-items: center; justify-content: center; }
  .legal-help .sr-card__icon svg { width: 2rem; height: 2rem; display: block; }
  .legal-help .sr-card__text { flex: 1; min-width: 0; }
  body .legal-help .sr-card__title {
    display: block; font-size: var(--text-display-3) !important; font-weight: var(--weight-regular) !important;
    letter-spacing: var(--track-display-2) !important; line-height: 1.3 !important; text-transform: uppercase !important;
    margin: 0; padding: 0; border: 0; color: var(--ink);
  }
  body .legal-help .sr-card__sub { display: block; margin-top: var(--space-1); color: var(--ink-muted); }
  .legal-help .sr-card__chev { display: none; }
  .legal-help .sr-card__body { padding: 0; }
  .legal-help .sr-card__body > *:first-child { margin-top: 0; }
  .legal-help .sr-card__body p { max-width: none; }

  /* International Shipping is eight Q&A tiles, one of which carries the
     four-column rate table — far too much for half the grid, and it left
     the other column empty for ~2,000px. It takes the full row and lays
     its tiles out two-up. The third tile (the question that introduces the
     rate table) runs edge to edge so the table gets the full width, which
     flips the pairing after it: an even-numbered last tile would sit alone,
     so it stretches too. Re-editing the copy can at worst leave one
     half-filled row; it cannot break the text. */
  .legal-help .sr-card--wide { grid-column: 1 / -1; }
  .legal-help .sr-card--wide .sr-card__body {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6); align-items: start;
  }
  .legal-help .sr-card--wide .sr-card__body > .legal-table-wrapper,
  .legal-help .sr-card--wide .sr-card__body > p,
  .legal-help .sr-card--wide .sr-card__body > .legal-qa:nth-child(3),
  .legal-help .sr-card--wide .sr-card__body > .legal-qa:nth-child(even):last-child { grid-column: 1 / -1; }
  .legal-help .sr-card--wide .sr-card__body > p { max-width: 72ch; margin: 0; }
  .legal-help .sr-card--wide .legal-qa { margin: 0; height: 100%; }
  .legal-help .sr-card--wide .legal-qa .legal-table-wrapper { margin: var(--space-4) 0; }
  .legal-help .sr-card--wide .legal-qa .legal-table-wrapper + p { max-width: 80ch; }

  /* Q&A tiles and tables sit on a tinted card, so the tile tint vanished and
     the table's swipe-fade painted white bars down its sides. */
  .legal-help .sr-card .legal-qa { background: var(--ground); border: var(--hairline) solid var(--rule-soft); }
  .legal-help .sr-card .legal-table-wrapper { background: none; }
  .legal-help .sr-card .legal-table th,
  .legal-help .sr-card .legal-table td { padding: var(--space-3) var(--space-4); }
  .legal-help .sr-card .legal-table th { white-space: nowrap; }
  .legal-help .sr-card .legal-table td:not(:first-child) { white-space: nowrap; }

  .legal-help .sr-help {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    background: var(--ground-tint); border: var(--hairline) solid var(--rule-soft);
    margin-top: var(--space-6);
  }
  .legal-help .sr-help__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--space-12) var(--space-10); max-width: none; }
  .legal-help .sr-help__eyebrow { color: var(--ink-muted); margin: 0 0 var(--space-3); max-width: none; }
  body .legal-help .sr-help__head { margin: 0 0 var(--space-3); max-width: none; }
  .legal-help .sr-help__sub { margin: 0 0 var(--space-6); max-width: 40ch; color: var(--ink-muted); }
  .legal-help .sr-help__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--control-pad-x); background: var(--ground-inverse); color: var(--ink-inverse); border: var(--hairline) solid var(--rule-active); text-decoration: none; }
  .legal-help .sr-help__btn:hover { background: var(--ground); color: var(--ink-strong); }
  .legal-help .sr-help__media { position: relative; min-height: 360px; }
  .legal-help .sr-help__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .legal-help .sr-ph--help { position: absolute; inset: 0; aspect-ratio: auto; }

  .legal-help .sr-sustain { display: flex; gap: var(--space-4); align-items: flex-start; border-top: var(--hairline) solid var(--rule); margin-top: var(--space-4); padding-top: var(--space-6); }
  .legal-help .sr-sustain__icon { flex-shrink: 0; color: var(--ink); line-height: 0; }
  .legal-help .sr-sustain__icon svg { width: 2.6rem; height: 2.6rem; display: block; }
  .legal-help .sr-sustain__label { margin: 0 0 var(--space-1); max-width: none; color: var(--ink); }
  .legal-help .sr-sustain__text { margin: 0; max-width: 66ch; }
  .legal-help .sr-ph { background: var(--ground-tint); display: flex; align-items: center; justify-content: center; }
  .legal-help .sr-ph span { color: var(--ink-muted); }
}

body .legal-doc .legal-hero__title {
  text-transform: uppercase !important;
}