/*
 * Pure Wellness Kits — "Coastal Fresh" (Direction B).
 *
 * Plain CSS with cascade layers and native nesting; no build step. Class names are short and
 * semantic (.card-kit, .panel.lilac, .btn.btn-mint). Tokens live on :root. Tints used on cards
 * are passed inline as --tint so content decides the colour, never the markup.
 */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    --sea: #0E5E6F;        /* teal band (the mockup's "plum" prop) */
    --sea-deep: #0B4654;
    --ink: #0B2A33;
    --deep: #134551;
    --mint: #A8EBD9;
    --sky: #7FD1E8;
    --lilac: #C9DDFF;
    --seafoam: #BDEBE3;
    --sage: #DCEFD8;
    --ice: #E2F6FB;
    --foam: #E6F7F4;
    --mist: #EEF7F8;
    --sand: #E3F3F5;       /* light text on teal */
    --cloud: #CFE5EA;      /* light text on ink */
    --slate: #3E5C66;      /* muted text */
    --line: #D5E3E7;
    --white: #FFFFFF;
    --danger: #B42318;
    --danger-bg: #FEE4E2;

    --display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
    --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --r-pill: 999px;
    --r-xl: 40px;
    --r-lg: 36px;
    --r-md: 28px;
    --r-sm: 24px;
    --r-xs: 20px;

    --wrap: 1320px;
    --gutter: 32px;
    --shadow: 0 24px 60px -30px rgba(11, 42, 51, 0.45);
  }
  @media (max-width: 720px) {
    :root { --gutter: 16px; --r-xl: 28px; --r-lg: 28px; --r-md: 24px; }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; }
  details summary { list-style: none; cursor: pointer; }
  details summary::-webkit-details-marker { display: none; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
}

@layer base {
  body {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { color: var(--ink); }
  .display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .display a { color: inherit; text-decoration: none; }
  .display a:hover { color: var(--sea); }
  .h-hero { font-size: clamp(52px, 7.5vw, 104px); line-height: 0.92; letter-spacing: -0.045em; }
  .h-xl { font-size: clamp(40px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.04em; }
  .h-lg { font-size: clamp(32px, 3.6vw, 46px); line-height: 0.95; letter-spacing: -0.04em; }
  .h-md { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.03em; }
  .h-sm { font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
  .price-hero { font-size: 44px; }
  .price-xl { font-size: clamp(40px, 4.5vw, 60px); letter-spacing: -0.04em; }
  .price-lg { font-size: 26px; }
  .per { font-weight: 500; font-size: 0.5em; letter-spacing: 0; font-family: var(--body); }
  .lead { font-size: 17px; max-width: 60ch; }
  .small { font-size: 14px; }
  .tiny { font-size: 13px; line-height: 1.5; }
  .b { font-weight: 700; }
  .muted { color: var(--slate); }
  .cloud { color: var(--cloud); }
  .mint { color: var(--mint); }
  .mint-ink { color: var(--sea); }
  .center { text-align: center; }
  .eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 18px; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); font-weight: 700; }
  .skip:focus { top: 16px; }
  :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
  .on-dark { color: var(--mint); }
}

@layer layout {
  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .wrap.narrow { max-width: calc(920px + var(--gutter) * 2); }
  .section { padding-block: 96px 48px; }
  .section + .section, .section-tight { padding-block: 48px; }
  .section-tight + .section { padding-top: 48px; }
  .stack { display: flex; flex-direction: column; gap: 28px; }
  .stack-sm { display: flex; flex-direction: column; gap: 14px; }
  .stack-lg { display: flex; flex-direction: column; gap: 36px; }
  .stack-xl { display: flex; flex-direction: column; gap: 48px; }
  .row { display: flex; align-items: center; gap: 12px; }
  .wrap-row { flex-wrap: wrap; }
  .grow { flex-grow: 1; }
  .grid { display: grid; gap: 20px; }
  .grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
  .grid.two.tight { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .grid.cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
  .grid.kits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .grid.supps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
  .grid.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
  .section-head .h-xl { max-width: 640px; }
  .section-head .lead { margin-top: 12px; }
  @media (max-width: 720px) {
    .section { padding-block: 56px 32px; }
    .section + .section, .section-tight { padding-block: 32px; }
    .stack-xl { gap: 32px; }
  }
}

@layer components {
  /* ---- Buttons & chips ---------------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 24px; border-radius: var(--r-pill); border: 0;
    font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    &:hover { transform: translateY(-1px); }
    &:active { transform: translateY(0); }
    &:disabled { opacity: 0.6; cursor: wait; transform: none; }
    &.sm { height: 46px; padding: 0 20px; font-size: 15px; }
    &.lg { height: 58px; padding: 0 30px; font-size: 17px; }
    &.block { width: 100%; }
    &.grow { flex-grow: 1; }
  }
  .btn-mint { background: var(--mint); color: var(--ink); &:hover { background: #93E2CC; color: var(--ink); } }
  .btn-ink { background: var(--ink); color: var(--white); &:hover { background: var(--deep); color: var(--white); } }
  .btn-sea { background: var(--sea); color: var(--white); &:hover { background: var(--sea-deep); color: var(--white); } }
  .btn-sky { background: var(--sky); color: var(--ink); &:hover { background: #62C4E0; color: var(--ink); } }
  .btn-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--white); &:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); } }
  .btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); &:hover { background: var(--ink); color: var(--white); } }
  .text-btn { background: none; border: 0; padding: 0; color: var(--slate); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--danger); } }
  .round-btn {
    width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; display: inline-grid; place-items: center;
    background: var(--mist); color: var(--ink); text-decoration: none; flex-shrink: 0;
    &.ghost { width: 46px; height: 46px; background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); &:hover { background: rgba(255, 255, 255, 0.12); } }
    &.solid { background: var(--ink); color: var(--white); &.sea { background: var(--sea); width: 36px; height: 36px; } }
    &.big { width: 64px; height: 64px; }
  }
  .chip {
    display: inline-flex; align-items: center; align-self: start; padding: 6px 12px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.6); color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1.3; white-space: nowrap;
    &.sky { background: var(--sky); padding: 8px 16px; font-size: 14px; }
    &.ink { background: var(--ink); color: var(--white); padding: 6px 14px; }
    &.white { background: var(--white); font-weight: 500; font-size: 14px; padding: 8px 14px; }
    &.mist { background: var(--mist); }
    &.lilac { background: var(--lilac); }
    &.seafoam { background: var(--seafoam); }
    &.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--slate); font-weight: 600; }
  }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; &.tight { gap: 6px; } }

  /* ---- Top bar ------------------------------------------------------------------------ */
  .topbar { background: var(--sea); color: var(--white); }
  .topbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding-block: 22px; }
  .wordmark { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--white); text-decoration: none; line-height: 1; .dot { color: var(--mint); } &.lg { font-size: 40px; letter-spacing: -0.04em; } }
  .pillnav {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1);
    a { padding: 10px 18px; border-radius: var(--r-pill); color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 1.3; }
    a:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
    a.is-on { background: var(--white); color: var(--sea); font-weight: 700; }
    &.dark { background: rgba(255, 255, 255, 0.1); }
  }
  .band .pillnav a.is-on, .topbar .pillnav a.is-on { color: var(--sea); }
  .topbar-tools { display: flex; align-items: center; gap: 8px; }
  .bag-btn { height: 46px; padding: 0 20px; }
  .searchbar { border-top: 1px solid rgba(255, 255, 255, 0.15); background: var(--sea-deep); }
  .searchbar-form { display: flex; gap: 10px; padding-block: 14px; .input { flex-grow: 1; } }
  @media (max-width: 860px) {
    .topbar-row { padding-block: 16px; }
    .pillnav { order: 3; width: 100%; justify-content: center; }
    .bag-btn span:not([data-bag-count]) { display: inline; }
  }
  @media (max-width: 420px) {
    .wordmark { font-size: 22px; }
    .pillnav a { padding: 9px 13px; font-size: 14px; }
  }
  @media (max-width: 560px) {
    .topbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 12px; }
    .topbar .wordmark { font-size: clamp(16px, 4.7vw, 20px); line-height: 1.15; }
    .topbar .pillnav { grid-column: 1 / -1; }
    .topbar-tools { gap: 6px; }
    .topbar-tools .round-btn { width: 38px; height: 40px; }
    .topbar-tools .bag-btn { height: 40px; padding-inline: 12px; }
    .topbar-tools .bag-btn > span { font-size: 0; }
    .topbar-tools .bag-btn [data-bag-count] { font-size: 14px; }
  }

  .flash-wrap { padding-top: 20px; }
  .flash, .notice { padding: 14px 18px; border-radius: var(--r-xs); background: var(--mist); color: var(--ink); font-size: 15px; }
  .notice.error { background: var(--danger-bg); color: var(--danger); }
  .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; margin: 0; padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-weight: 600; font-size: 15px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

  /* ---- Bands & hero ------------------------------------------------------------------- */
  .band { background: var(--sea); color: var(--white); overflow: hidden; a:not(.btn):not(.hero-card) { color: var(--white); } }
  .band-dark { background: var(--ink); color: var(--white); padding-block: 96px; }
  .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 48px; align-items: center; padding-block: 48px 96px; }
  .hero-copy { display: flex; flex-direction: column; gap: 28px; }
  .hero-lead { font-size: 19px; max-width: 500px; color: var(--sand); }
  .hero.short .wrap { padding-block: 72px 96px; }
  .hero-stack { position: relative; min-height: 580px; }
  .hero-card {
    position: absolute; width: 58%; aspect-ratio: 3 / 4; border-radius: 32px; background: var(--tint, var(--lilac)); color: var(--ink);
    padding: 24px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none;
    .frame-photo { flex-grow: 1; margin: 16px 0; }
    .hero-product-image { position: relative; flex: 1; min-height: 0; margin: 16px 0; overflow: hidden; border-radius: 16px; background: var(--foam); img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } }
    &.tilt-l { left: 4%; top: 0; transform: rotate(-7deg); }
    &.tilt-r { right: 2%; top: 24px; width: 50%; transform: rotate(6deg); }
    &.tilt-s { left: 30%; bottom: 0; width: 46%; aspect-ratio: auto; transform: rotate(-2deg); }
    &.lib-card { aspect-ratio: 4 / 3; justify-content: space-between; gap: 24px; }
    .h-md { font-size: clamp(18px, 1.7vw, 24px); }
  }
  .short-stack { min-height: 380px; }
  .hero-price { position: absolute; left: 30%; bottom: -12px; width: 46%; border-radius: 28px; background: var(--sky); color: var(--ink); padding: 20px 24px; transform: rotate(-2deg); display: flex; flex-direction: column; }
  @media (max-width: 560px) { .hero-stack { min-height: 430px; } .hero-card { padding: 18px; .h-md { font-size: 20px; } } .hero-price .price-hero { font-size: 34px; } }
  .marquee { background: var(--mint); color: var(--ink); padding: 18px var(--gutter); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
  .page-band .wrap { padding-block: 24px 56px; display: flex; flex-direction: column; gap: 24px; }
  .page-band.slim .wrap { padding-block: 20px 24px; }
  .page-band-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
  .page-band-text { display: flex; flex-direction: column; gap: 18px; max-width: 760px; .lead { color: var(--sand); } }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--sand); li + li::before { content: '/'; margin-right: 6px; opacity: 0.6; } a { color: var(--sand); } span { color: var(--white); font-weight: 600; } }

  /* ---- Frames (product visuals) ------------------------------------------------------- */
  .frame {
    position: relative; width: 100%; border-radius: 28px; background: var(--tint, var(--foam)); color: var(--ink); padding: 24px;
    display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
    &.square { aspect-ratio: 1 / 1; }
    &.portrait { aspect-ratio: 3 / 4; }
    &.wide { aspect-ratio: 4 / 3; border-radius: 20px; }
    &.compact { padding: 10px; border-radius: 16px; .frame-photo { margin: 0; border-width: 1.5px; font-size: 11px; } }
    &.thumb { width: 84px; height: 84px; flex-shrink: 0; aspect-ratio: auto; }
    &.has-img { padding: 0; background: var(--foam); img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } }
    &.hero-frame { border-radius: 36px; }
    &.guide-cover { flex-grow: 1; min-height: 120px; aspect-ratio: auto; background: transparent; padding: 0; .frame-photo { border-radius: 24px; min-height: 120px; } }
    &.guide-cover.has-img { min-height: 220px; aspect-ratio: 4 / 3; background: var(--foam); }
  }
  .frame-kicker { font-weight: 700; font-size: 14px; }
  .frame-photo { flex-grow: 1; margin: 16px 0; border-radius: 20px; border: 2px dashed rgba(11, 42, 51, 0.35); display: grid; place-items: center; font-size: 13px; font-weight: 500; min-height: 40px; }
  .frame-name { font-size: 26px; line-height: 1; }
  .card-kit .frame { border-radius: 0; padding: 20px; .frame-photo { margin: 0; } }
  .card-kit .frame.has-img { padding: 0; }
  .card-supp .frame.bare .frame-photo, .card-kit .frame .frame-photo { margin: 0; }
  .card-kit-media, .card-supp > a { text-decoration: none; }

  /* ---- Cards -------------------------------------------------------------------------- */
  .card-cat {
    background: var(--tint, var(--mist)); color: var(--ink); text-decoration: none; border-radius: var(--r-md); padding: 28px; min-height: 260px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px; transition: transform 0.15s ease;
    &:hover { transform: translateY(-3px); color: var(--ink); }
    &.static:hover { transform: none; }
    .card-cat-text { display: flex; flex-direction: column; gap: 10px; .h-md { font-size: 30px; line-height: 1; } }
    .card-cat-foot { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
  }
  .card-kit {
    border: 2px solid var(--ink); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; background: var(--white);
    .card-kit-media { display: block; border-bottom: 2px solid var(--ink); }
    .card-kit-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
    .card-kit-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
  }
  .card-supp {
    background: var(--white); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line);
    .card-supp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .from { font-weight: 700; b { font-size: 24px; margin-left: 4px; } }
  }
  .panel.mint .card-supp { border: 0; }
  .card-plain { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; }
  @media (max-width: 720px) { .card-plain { padding: 20px; } }
  .add-form { display: inline-flex; }
  .inline { display: inline-flex; }

  /* ---- Panels ------------------------------------------------------------------------- */
  .panel {
    border-radius: var(--r-lg); padding: 44px; display: flex; flex-direction: column; gap: 20px; color: var(--ink);
    &.lilac { background: var(--lilac); }
    &.seafoam { background: var(--seafoam); }
    &.mint { background: var(--mint); }
    &.sage { background: var(--sage); }
    &.big { border-radius: var(--r-xl); padding: 48px; }
    .panel-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-top: auto; }
    a:not(.btn) { color: var(--ink); }
  }
  @media (max-width: 720px) { .panel, .panel.big { padding: 28px 22px; } }

  /* ---- Steps -------------------------------------------------------------------------- */
  .step { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--r-md); background: var(--deep); p { color: var(--cloud); } }
  .step-no { width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--tint, var(--mint)); color: var(--ink); display: grid; place-items: center; font-size: 30px; }

  /* ---- FAQ ---------------------------------------------------------------------------- */
  .faq { display: flex; flex-direction: column; gap: 10px; }
  .faq details { background: var(--mist); border-radius: var(--r-sm); }
  .faq summary { padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 17px; }
  .faq details[open] summary .round-btn { transform: rotate(45deg); }
  .faq details p { padding: 0 26px 22px; color: var(--slate); }
  .faq details p a { color: var(--sea); }

  /* ---- Forms -------------------------------------------------------------------------- */
  .input { width: 100%; height: 50px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font-size: 16px; &:focus { border-color: var(--sea); outline: 3px solid rgba(127, 209, 232, 0.4); outline-offset: 0; } }
  textarea.input { height: auto; padding: 14px 18px; resize: vertical; min-height: 120px; &.draft { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; } }
  .field { display: flex; flex-direction: column; gap: 6px; label { font-weight: 600; font-size: 14px; } }
  .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; .span-2 { grid-column: 1 / -1; } }
  .choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; legend { margin-bottom: 12px; } }
  .choice {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; background: var(--white);
    &:has(input:checked) { border-color: var(--sea); background: var(--mist); }
    input { margin-top: 4px; accent-color: var(--sea); flex-shrink: 0; }
    .choice-body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
    .choice-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
    &.small { font-size: 14px; }
  }
  .pay-note { display: flex; gap: 10px; align-items: flex-start; color: var(--slate); svg { flex-shrink: 0; margin-top: 3px; } }

  /* ---- Quantity ----------------------------------------------------------------------- */
  .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); height: 40px; padding: 0 4px; &.tall { height: 58px; padding: 0 6px; } }
  .qty-btn { width: 34px; height: 34px; border-radius: var(--r-pill); border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); &:hover:not(:disabled) { background: var(--mist); } &:disabled { opacity: 0.3; cursor: not-allowed; } .tall & { width: 44px; height: 44px; } }
  .qty-value, .qty-input { min-width: 36px; text-align: center; font-weight: 700; }
  .qty-input { width: 48px; border: 0; background: transparent; appearance: textfield; -moz-appearance: textfield; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { appearance: none; } }

  /* ---- Bag sheet, lines, summary ------------------------------------------------------ */
  .sheet { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; inset: 0; margin: 0; position: fixed; &::backdrop { background: transparent; } }
  .sheet[open] { display: block; }
  .sheet-scrim { position: fixed; inset: 0; background: rgba(11, 42, 51, 0.5); }
  .sheet-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--white); color: var(--ink); display: flex; flex-direction: column; border-radius: 28px 0 0 28px; box-shadow: var(--shadow); }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 16px; }
  .sheet-body { flex-grow: 1; overflow: auto; padding: 0 24px 24px; display: flex; flex-direction: column; gap: 20px; }
  .drawer-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1.5px solid var(--line); }
  .total-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; padding-bottom: 6px; }
  .lines { display: flex; flex-direction: column; gap: 16px; &.roomy { gap: 20px; margin-bottom: 20px; } }
  .line { display: flex; gap: 14px; align-items: flex-start; .line-body { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-width: 0; } .line-top { display: flex; justify-content: space-between; gap: 12px; } .line-name { font-weight: 700; color: var(--ink); text-decoration: none; } .line-total { font-size: 18px; white-space: nowrap; } .line-controls { display: flex; align-items: center; gap: 14px; } }
  .lines.roomy .line { padding-bottom: 20px; border-bottom: 1px solid var(--line); &:last-child { border-bottom: 0; } }
  .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 0; .btn { margin-top: 8px; } }
  .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: start; }
  .cart-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
  @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-side { position: static; } }
  .summary { display: flex; flex-direction: column; gap: 18px; }
  .summary-group { display: flex; flex-direction: column; gap: 8px; }
  .summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
  .summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; border-top: 1.5px solid var(--ink); font-weight: 700; }
  .checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 24px; align-items: start; }
  .checkout-side { position: sticky; top: 16px; }
  @media (max-width: 960px) { .checkout { grid-template-columns: 1fr; } .checkout-side { position: static; } }

  /* ---- Product page ------------------------------------------------------------------- */
  .product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
  .product-media { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
  @media (max-width: 900px) { .product { grid-template-columns: minmax(0, 1fr); gap: 28px; } .product-media { position: static; } }
  .purchase { padding: 24px; border-radius: var(--r-md); background: var(--mist); }
  .purchase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--white); padding: 12px 0; box-shadow: 0 -10px 30px rgba(11, 42, 51, 0.25); }
  .sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; .display { font-size: 22px; } }
  .details { padding-top: 16px; }
  .ticks { display: flex; flex-direction: column; gap: 10px; li { display: flex; gap: 10px; align-items: flex-start; } svg { flex-shrink: 0; margin-top: 4px; color: var(--sea); } }
  .rates { display: flex; flex-direction: column; gap: 8px; li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--mist); } }
  .facts { width: 100%; max-width: 420px; border-radius: 16px; border: 1px solid var(--line); }

  /* ---- Tables ------------------------------------------------------------------------- */
  .compare-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
  .compare { width: 100%; border-collapse: collapse; font-size: 15px; caption { padding: 14px 20px; text-align: left; font-weight: 700; } th, td { padding: 14px 20px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); } thead th { border-top: 0; background: var(--mist); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); } tbody th a { color: var(--ink); font-weight: 700; } td:last-child { text-align: right; } }

  /* ---- Members ------------------------------------------------------------------------ */
  .member-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
  @media (max-width: 860px) { .member-layout { grid-template-columns: 1fr; } }
  .member-nav { display: flex; flex-direction: column; gap: 4px; a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 16px; color: var(--ink); text-decoration: none; font-weight: 600; &:hover { background: var(--mist); } &.is-on { background: var(--ink); color: var(--white); } } }
  .entry { border-left: 6px solid var(--tint, var(--mint)); }
  .steps-list { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
  .dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; dt { color: var(--slate); font-size: 14px; } }

  /* ---- Search, legal, misc --------------------------------------------------------------- */
  .result-list { display: flex; flex-direction: column; gap: 12px; }
  .result { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); .grow { display: flex; flex-direction: column; gap: 6px; } .result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } }
  @media (max-width: 600px) { .result { flex-wrap: wrap; } }
  .legal { display: flex; flex-direction: column; gap: 36px; max-width: 76ch; h2 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; margin-bottom: 12px; } h3 { font-weight: 700; font-size: 17px; margin: 18px 0 8px; } p + p { margin-top: 10px; } ul { list-style: disc; padding-left: 22px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .compare-wrap { margin-top: 16px; } }
  .label-link img { border-radius: 16px; border: 1px solid var(--line); max-width: 420px; }
  .disclaimer { padding: 20px 24px; border-radius: var(--r-xs); background: var(--mist); font-size: 13px; line-height: 1.6; color: var(--slate); b { color: var(--ink); } }
  .band-dark .disclaimer { background: rgba(255, 255, 255, 0.08); color: var(--cloud); }

  /* ---- Footer ------------------------------------------------------------------------- */
  .footer { background: var(--sea); color: var(--sand); a { color: var(--sand); text-decoration: none; &:hover { color: var(--white); text-decoration: underline; } } }
  .footer-inner { padding-block: 72px 36px; display: flex; flex-direction: column; gap: 40px; }
  .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
  .footer-brand { display: flex; flex-direction: column; gap: 14px; .footer-mail { color: var(--mint); } .footer-blurb { font-size: 14px; max-width: 32ch; } }
  .footer-col { display: flex; flex-direction: column; gap: 10px; .footer-head { font-weight: 700; color: var(--white); } }
  .footer-note { padding: 20px 24px; border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.08); font-size: 13px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; b { color: var(--white); } }
  .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; }
  .footer-policies { display: flex; flex-wrap: wrap; gap: 8px 20px; }
}