:root{
    --navy:#16235C;--navy2:#1E2F73;--teal:#0E8C86;--teal-deep:#0A6E69;--teal-soft:#E2F1F0;
    --cream:#FBF8F2;--sand:#F4EEE2;--ink:#1B2430;--muted:#5C6672;--line:#E8E1D3;
    --gold:#E8B04B;--coral:#E0875A;--green:#2F9E6B;--app:#F3F5FB;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--app);-webkit-font-smoothing:antialiased}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}

  /* promo + nav */
  .promo{background:var(--navy);color:#dfe7ff;text-align:center;font-size:13px;font-weight:500;padding:9px}
  .promo b{color:#7fe3dc}
  .promo a.promocall{color:#7fe3dc;font-weight:700;text-decoration:none;white-space:nowrap}
  @media(max-width:640px){.promoextra{display:none}}

  header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;gap:26px;padding:15px 0}
  .logo{display:flex;align-items:center;gap:11px;flex:none}
  .logo .m{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,var(--navy),var(--navy2));display:grid;place-items:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:19px}
  .logo b{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--navy);line-height:1}
  .logo span{display:block;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
  .navlinks{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--ink)}
  .navlinks a{color:var(--ink);text-decoration:none}
  .navlinks a.active{color:var(--teal-deep)}
  .searchbar{flex:1;display:flex;align-items:center;gap:10px;background:var(--app);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;max-width:380px}
  .searchbar input{border:0;background:transparent;outline:0;font:inherit;font-size:14.5px;width:100%}
  .navicons{display:flex;gap:8px;align-items:center;margin-left:auto}
  /* Between the phone layout (max-width:640px) and about 860px the single-row
     header could not fit logo + links + search + icons. The cart button was
     pushed past the right edge and clipped by html{overflow-x:hidden}, so on a
     tablet the cart was simply unreachable - measured 148px past the edge at
     700px wide. Letting the row wrap keeps every control on screen, and
     min-width:0 lets the links and the search box actually give up space
     instead of forcing the overflow. Above ~860px it all still fits on one
     line, so desktop is unchanged. */
  .nav{flex-wrap:wrap}
  .navlinks{min-width:0}
  .searchbar{min-width:0}
  .searchbar input{min-width:0}
  /* In that same band the search box would otherwise be squeezed to a sliver on
     row one. Sending it to its own full-width row keeps it usable and leaves
     logo, links and the cart icons together on the row above. */
  @media(min-width:641px) and (max-width:900px){
    .searchbar{order:5;flex:1 1 100%;max-width:none}
  }
  .icbtn{width:42px;height:42px;border-radius:11px;background:var(--app);display:grid;place-items:center;position:relative;color:var(--navy)}
  .icbtn .b{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}

  /* hero */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;margin:30px 0}
  @media(max-width:860px){.hero{grid-template-columns:1fr}}
  .hero .ey{font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal-deep)}
  .hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.08;margin:14px 0 0;color:var(--navy);letter-spacing:.2px}
  .hero p{font-size:16.5px;color:var(--muted);line-height:1.6;margin-top:16px;max-width:46ch}
  .hbtns{display:flex;gap:13px;margin-top:24px;flex-wrap:wrap}
  .btn{font-weight:700;font-size:15px;padding:14px 22px;border-radius:12px;border:0;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
  .btn.p{background:var(--teal);color:#fff}
  .btn.s{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
  .trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
  .trust div{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
  .trust svg{color:var(--green)}
  .herocard{text-decoration:none;background:linear-gradient(150deg,var(--teal) 0%,var(--teal-deep) 100%);border-radius:24px;padding:28px;color:#fff;position:relative;overflow:hidden;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
  .herocard::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:#ffffff1a}
  .herocard .bottle{position:absolute;top:26px;left:28px;width:120px;height:170px;background:#ffffff14;border:1.5px solid #ffffff33;border-radius:18px 18px 14px 14px;display:grid;place-items:center}
  .herocard .badge{align-self:flex-start;background:#ffffff26;border:1px solid #ffffff40;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:5px}
  .herocard h3{font-family:'Fraunces',serif;font-size:22px;font-weight:600;line-height:1.15;position:relative}
  .herocard p{font-size:13.5px;color:#dff5f3;margin-top:5px;position:relative}
  /* ---------------------------------------------------------------------
     Featured collection slideshow (replaces the three-tile trio, Oct 2026).
     One product per slide, two halves filling the whole box: photo on a white
     rounded panel, text and actions beside it.

     Height: the hero grid is switched to align-items:stretch so this box is
     exactly as tall as the hero text beside it, and .fs/.fs__viewport flex to
     fill it - no empty area at the bottom. Slides are stacked in ONE grid cell
     (grid-area:1/1) so the box does not resize as slides change.

     Inactive slides use visibility:hidden, not display:none, so their links and
     buttons leave the tab order while the box keeps a stable height.
     --------------------------------------------------------------------- */
  .hero{align-items:stretch}
  .herocard{min-height:0;padding:18px 20px;justify-content:stretch;gap:0}
  .fs{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;position:relative;gap:10px}
  .fs__viewport{position:relative;display:grid;flex:1 1 auto;min-height:0}
  .fs__slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:16px;align-items:stretch;min-height:0;min-width:0;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease}
  .fs__slide.is-on{opacity:1;visibility:visible;pointer-events:auto}
  /* The white panel sets the photo area; the image is contained inside it, so it
     is never cropped and never upscaled past its own 600px source. */
  .fs__photo{background:#fff;border-radius:16px;display:grid;place-items:center;
    min-height:200px;height:100%;padding:12px;overflow:hidden;min-width:0}
  .fs__photo img{max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;display:block}
  .fs__text{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
  .fs__eyebrow{align-self:flex-start;background:#ffffff26;border:1px solid #ffffff40;
    padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;margin:0;
    color:#fff;letter-spacing:.2px}
  .fs__name{font-family:'Fraunces',serif;font-size:19px;font-weight:600;line-height:1.16;
    margin:0;color:#fff}
  .fs__name a{color:inherit;text-decoration:none}
  .fs__name a:hover{text-decoration:underline}
  .fs__name a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
  .fs__line{font-size:13px;color:#dff5f3;line-height:1.45;margin:0}
  .fs__price{font-size:19px;font-weight:700;color:#fff;margin:2px 0 0;line-height:1.1}
  .fs__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
  .fs__add{min-height:44px;padding:0 18px;border:0;border-radius:11px;background:#fff;
    color:var(--teal-deep);font:700 15px Inter,system-ui,sans-serif;cursor:pointer;flex:none}
  .fs__add:hover{background:#eafaf8}
  .fs__add:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .fs__add.ok{background:#eafaf8}
  .fs__add:disabled{background:#ffffff55;color:#ffffffcc;cursor:not-allowed}
  .fs__view{color:#fff;font-size:13.5px;font-weight:700;text-decoration:underline;
    min-height:44px;display:inline-flex;align-items:center}
  .fs__view:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
  /* Arrows sit in the control row beside the dots rather than floating over the
     photo: always a full 44px thumb target, and nothing covers the product. */
  .fs__controls{display:flex;align-items:center;justify-content:center;gap:8px;flex:none}
  .fs__nav{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid #ffffff5c;
    background:#ffffff1f;color:#fff;font:700 22px/1 Inter,system-ui,sans-serif;cursor:pointer;
    display:grid;place-items:center;padding:0}
  .fs__nav:hover{background:#ffffff33}
  .fs__nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .fs__dots{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center}
  .fs__dot{width:36px;height:44px;border:0;background:none;cursor:pointer;padding:0;
    display:grid;place-items:center}
  .fs__dot span{display:block;width:9px;height:9px;border-radius:50%;background:#ffffff73;
    transition:background .25s ease,transform .25s ease}
  .fs__dot[aria-current="true"] span{background:#fff;transform:scale(1.35)}
  .fs__dot:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:9px}
  .fs__ship{font-size:12.5px;color:#dff5f3;margin:0;text-align:center;flex:none}

  /* Phone: photo on top, text beneath, controls still a full thumb target. */
  @media(max-width:560px){
    .herocard{padding:16px}
    .fs__slide{grid-template-columns:1fr;gap:12px;align-content:start}
    .fs__photo{min-height:200px;height:auto;aspect-ratio:1/1;max-height:240px}
    .fs__text{justify-content:flex-start}
    .fs__add{width:100%}
    .fs__actions{gap:8px}
  }

  /* Reduced motion: the slideshow does not move at all. The JS never starts the
     timer; this removes the cross-fade and the dot scaling too. */
  @media(prefers-reduced-motion:reduce){
    .fs__slide{transition:none}
    .fs__dot span{transition:none}
    .fs__dot[aria-current="true"] span{transform:none}
  }

  /* category chips */
  .chips{display:flex;gap:11px;flex-wrap:wrap;margin:6px 0 30px;scroll-margin-top:96px}
  .grid4{scroll-margin-top:96px}
  @media(max-width:640px){.chips,.grid4{scroll-margin-top:14px}}
  .chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
  .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

  /* section */
  .sechead{display:flex;align-items:flex-end;justify-content:space-between;margin:8px 0 18px}
  .sechead h2{font-family:'Fraunces',serif;font-size:24px;font-weight:600;color:var(--navy)}
  .sechead a{font-size:14px;font-weight:600;color:var(--teal-deep);text-decoration:none}

  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}}
  .card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
  /* Image frame. Flexbox (not grid+place-items) so the definite height resolves
     cleanly, padding on the frame, and overflow:hidden as a hard guarantee that
     nothing in here can ever paint over the text below. */
  .card .ph{height:176px;background:#fff;display:flex;align-items:center;justify-content:center;padding:9px;overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
  .card .ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
  .card .lab{position:absolute;top:12px;left:12px;background:#fff;color:var(--teal-deep);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
  .card .lab.soon{background:var(--gold);color:#3a2c00;border:0}
  .card .body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
  .card .cat{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .card .nm{font-size:15.5px;font-weight:600;line-height:1.3;margin-top:5px;color:var(--ink)}
  .card .size{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px}
  .stars{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:12.5px;color:var(--muted)}
  .stars svg{color:var(--gold)}
  .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
  .card .desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:7px}
  .card .price{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--navy)}
  .card .add{background:var(--teal);color:#fff;font-weight:700;font-size:13.5px;padding:10px 15px;border-radius:10px;border:0;display:flex;align-items:center;gap:7px}
  .card .add.dis{background:var(--app);color:var(--muted);border:1.5px solid var(--line)}

  /* value props */
  .values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
  @media(max-width:980px){.values{grid-template-columns:repeat(2,1fr)}}
  .value{display:flex;gap:13px;align-items:flex-start}
  .value .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;flex:none}
  .value b{font-size:14.5px;display:block}
  .value span{font-size:13px;color:var(--muted);line-height:1.5;display:block;margin-top:3px}

  footer{background:var(--navy);color:#aebbe6;margin-top:10px}
  .fin{display:flex;justify-content:space-between;gap:20px;padding:30px 0;flex-wrap:wrap;font-size:15px}
  .fin .logo b{color:#fff}.fin .logo span{color:#7f8cc0}
  .fin p{max-width:34ch;line-height:1.6;margin-top:10px}
  .fcol h5{color:#fff;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:11px}
  .fcol a{display:block;color:#aebbe6;text-decoration:none;font-size:13.5px;margin-bottom:8px}
  .copyr{border-top:1px solid #ffffff1f;text-align:center;padding:16px;font-size:15px;line-height:1.75;color:#aebbe6}
  .copyr a{color:#aebbe6;text-decoration:none}.copyr br{margin-bottom:4px}
  /* --- Phase A interactivity --- */
  [hidden]{display:none!important}
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .navlinks button{font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
  .navlinks button.active{color:var(--teal-deep)}
  .searchbar button.sbtn{background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center}
  .icbtn{border:0;font:inherit;cursor:pointer}
  .chip{cursor:pointer;font:inherit;font-size:14px;font-weight:600}
  .chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
  .sechead button{font:inherit;font-size:14px;font-weight:600;color:var(--teal-deep);background:none;border:0;cursor:pointer}
  .resultbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 18px;flex-wrap:wrap}
  .resultbar b{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--navy)}
  .resultbar button{font:inherit;font-size:14px;font-weight:700;color:var(--teal-deep);background:none;border:0;cursor:pointer;text-decoration:underline}
  .noresults{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 24px;text-align:center}
  .noresults b{font-family:'Fraunces',serif;font-size:19px;color:var(--navy);display:block}
  .noresults p{font-size:15px;color:var(--muted);margin-top:9px;line-height:1.6}
  .noresults a{color:var(--teal-deep);font-weight:700;text-decoration:none}
  .card .add.ok{background:var(--green)}
  .fcol button{display:block;color:#aebbe6;background:none;border:0;padding:0;font:inherit;font-size:13.5px;margin-bottom:8px;cursor:pointer;text-align:left}
  /* cart drawer */
  .cartveil{position:fixed;inset:0;background:#0b122f66;z-index:60}
  .cartpanel{position:fixed;top:0;right:0;height:100%;width:404px;max-width:93vw;background:#fff;z-index:61;display:flex;flex-direction:column;overflow:hidden;box-shadow:-18px 0 50px rgba(10,18,45,.22)}
  .carthead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 22px;border-bottom:1px solid var(--line)}
  .carthead h2{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--navy)}
  .cartclose{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:var(--app);font-size:18px;line-height:1;color:var(--ink);cursor:pointer;flex:none}
  /* the scroller: min-height:0 lets it shrink below content so overflow-y works */
  .cartscroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cartbody{padding:6px 22px}
  .cartline{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
  .cartline:last-child{border-bottom:0}
  .cartline .ci{width:44px;height:44px;border-radius:11px;background:var(--teal-soft);flex:none;display:grid;place-items:center;color:var(--teal-deep);font-family:'Fraunces',serif;font-weight:600;font-size:15px}
  .cartline .cinfo{flex:1;min-width:0}
  .cartline .cinfo b{display:block;font-size:14.5px;line-height:1.32}
  .cartline .cinfo em{display:block;font-size:12.5px;color:var(--muted);font-style:normal;margin-top:3px}
  .qty{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
  .mini{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--app);font-size:19px;font-weight:700;line-height:1;color:var(--navy);cursor:pointer}
  .qty .n{font-size:14.5px;font-weight:700;min-width:22px;text-align:center}
  .qty .rm{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:2px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:0;text-decoration:underline;cursor:pointer}
  .cartline .amt{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--navy);flex:none}
  .cartempty{text-align:center;padding:46px 12px}
  .cartempty b{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);display:block}
  .cartempty p{font-size:14.5px;color:var(--muted);margin-top:9px;line-height:1.65}
  .cartempty a{color:var(--teal-deep);font-weight:700;text-decoration:none}
  .cartfoot{border-top:1px solid var(--line);padding:15px 20px}
  .sumrow{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--muted);margin-bottom:7px;line-height:1.4}
  .sumrow > span:last-child{text-align:right;flex:none;max-width:58%}
  .sumrow.total em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
  .sumrow.total{font-size:15px;color:var(--ink);font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin-top:4px;align-items:baseline}
  .sumrow.total b{font-family:'Fraunces',serif;font-size:21px;color:var(--navy)}
  /* pinned conversion path - always visible, never scrolls away */
  /* The cart drawer is position:fixed, so the body padding that keeps ordinary page
     content clear of the cookie bar does nothing for it. This is the same reserve,
     applied where the drawer actually needs it: the action area holds the
     final-sale notice and the checkout button, and on a phone the bar used to sit
     squarely over both. --bw-consent-h is 0px unless a bar is up, so this adds
     nothing the rest of the time. */
  .cartaction{flex:0 0 auto;border-top:1px solid var(--line);
    padding:14px 20px calc(16px + var(--bw-consent-h, 0px));background:#fff;
    box-shadow:0 -8px 20px rgba(10,18,45,.07)}
  /* ONE COLUMN, NOTHING PINNED.
     On a short screen the pinned action area plus the cookie bar can leave only a
     thin strip for the items - the cart becomes a letterbox you have to scroll a
     list through to reach a button you cannot see. When cart.js measures that it
     has happened it sets .onecol, and the whole drawer becomes one ordinary
     scrolling column: the items, the summary, the address form and the button in
     their natural order, all reachable by scrolling the panel itself.
     The bar reserve moves to the panel here, so it is applied once, not twice. */
  .cartpanel.onecol{overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:var(--bw-consent-h, 0px)}
  .cartpanel.onecol .cartscroll{flex:0 0 auto;overflow:visible}
  .cartpanel.onecol .cartaction{padding-bottom:16px;box-shadow:none}
  .checkoutnote{font-size:13.5px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:10px}
  .checkoutbtn,.callbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:800;font-size:17px;padding:16px;border-radius:12px;text-decoration:none}
  .checkoutbtn{background:var(--navy);color:#fff;border:0;cursor:pointer;font-family:inherit}
  .checkoutbtn[aria-busy="true"]{background:var(--teal-deep);cursor:wait}
  .callbtn{background:var(--teal);color:#fff}
  .checkouterror{font-size:13px;color:#9b2c2c;background:#fff1f1;border:1px solid #efcaca;border-radius:8px;padding:9px 10px;margin-bottom:10px;line-height:1.4}
  .cartalt{font-size:12.5px;color:var(--muted);text-align:center;margin-top:9px}
  .cartalt a{color:var(--teal-deep);font-weight:700;text-decoration:none}
  .refcode{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);text-align:center}
  .refcode b{display:inline;color:var(--ink);font-size:13px;margin:0;font-family:'Fraunces',serif;letter-spacing:.4px}
  /* --- (7) phone layout: nothing may exceed the viewport --- */
  html,body{max-width:100%;overflow-x:hidden}
  /* The header is sticky on desktop; at phone width it wraps to three rows and
     overlays the chip row + product names, and swallows taps meant for the hero.
     Unsticking it at phone width removes the overlay entirely. */
  @media(max-width:640px){
    header{position:static}
    .wrap{padding:0 16px}
    .nav{flex-wrap:wrap;gap:12px;padding:12px 0}
    .logo{order:0}
    .navicons{order:1;margin-left:auto}
    .searchbar{order:2;width:100%;max-width:none}
    .navlinks{order:3;width:100%;gap:16px;overflow-x:auto;padding-bottom:4px}
    .navlinks button{white-space:nowrap}
    .grid4{grid-template-columns:1fr;gap:14px}
    .values{grid-template-columns:1fr;padding:18px;gap:15px}
    .hero{margin:20px 0;gap:20px}
    .card .ph{height:212px}
    .cartpanel{width:100%;max-width:100%}
    .fin{gap:24px}
  }
  @media(max-width:420px){
    .textmode{padding:9px 10px;font-size:12px}
    .icbtn{width:38px;height:38px}
    .navicons{gap:6px}
  }
  /* --- (8) comfort text mode, carried over from the 55+ experience --- */
  .textmode{font:inherit;font-size:13px;font-weight:700;color:var(--navy);background:var(--app);
    border:1.5px solid var(--line);border-radius:11px;padding:10px 13px;cursor:pointer;white-space:nowrap}
  .textmode b{color:var(--teal-deep)}
  html.comfort body{font-size:18px}
  html.comfort .promo{font-size:15px}
  html.comfort .navlinks button{font-size:17px}
  html.comfort .searchbar input{font-size:17px}
  html.comfort .chip{font-size:16px;padding:13px 20px}
  html.comfort .hero p{font-size:19.5px}
  html.comfort .sechead h2{font-size:27px}
  html.comfort .card .cat{font-size:13px}
  html.comfort .card .nm{font-size:18.5px}
  html.comfort .card .size{font-size:14.5px}
  html.comfort .card .desc{font-size:15px}
  html.comfort .card .price{font-size:23px}
  html.comfort .card .add{font-size:16px;padding:13px 19px}
  html.comfort .value b{font-size:17px}
  html.comfort .value span{font-size:15.5px}
  html.comfort .fcol a,html.comfort .fcol button{font-size:15.5px}
  html.comfort .cartline .cinfo b{font-size:16.5px}
  html.comfort .sumrow{font-size:15px}
  html.comfort .callbtn{font-size:19px;padding:18px}
  html.comfort .checkoutnote{font-size:15px}
  html.comfort .textmode{font-size:15px}
  a{cursor:default}a[href]{cursor:pointer}:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* cart: shipping address form + unavailable products */
.shipto{margin:10px 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.shipto fieldset{border:0;margin:0;padding:0;min-width:0}
.shipto legend{padding:0;margin-bottom:10px;font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--navy)}
.sfield{margin-bottom:11px;min-width:0}
.sfield label{display:block;margin-bottom:5px;font-size:13.5px;font-weight:600;color:var(--ink)}
.sfield label small{font-size:12.5px;font-weight:400;color:var(--muted)}
.sfield input,.sfield select{display:block;width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.sfield input:focus,.sfield select:focus{border-color:var(--teal)}
.sfield [aria-invalid="true"]{border-color:#b83232}
.ferr{margin-top:5px;font-size:13px;line-height:1.4;color:#9b2c2c}
.srow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 10px}
.shipprivacy{font-size:12.5px;color:var(--muted);line-height:1.45}
.fhint{margin:-6px 0 11px;font-size:12.5px;color:var(--muted);line-height:1.45}
#shipMethods{margin-bottom:12px}
.shipopt{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.shipopt.on{border-color:var(--teal);background:var(--teal-soft)}
.shipopt input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal)}
.shipopt-main{flex:1 1 auto;min-width:0}
.shipopt-main b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.shipopt-main em{display:block;margin-top:3px;font-size:12.5px;font-style:normal;color:var(--muted);line-height:1.45}
.shipopt-rate{flex:none;font-size:14px;font-weight:700;color:var(--navy)}
html.comfort .fhint{font-size:15px}
html.comfort .shipopt-main b,html.comfort .shipopt-rate{font-size:16.5px}
html.comfort .shipopt-main em{font-size:14px}
.shipnote{font-size:12.5px;color:var(--muted);line-height:1.45;margin:-2px 0 9px}

/* Discount code. Sits above the address form; the input matches .sfield input so
   the two read as one form at every text size.

   NAMED .cartpromo, NOT .promo. It used to be .promo, which is also the class on the
   navy announcement bar at the top of every page - so this block quietly inherited that
   bar's navy background and centred text, and then painted its own dark-ink label on
   top of it. The label was unreadable on a phone. Two unrelated things sharing one
   class name is the whole of that bug; the bar keeps .promo and this has its own. */
.cartpromo{margin:10px 0 2px;padding-top:14px;border-top:1px solid var(--line)}
.cartpromo label{display:block;margin-bottom:5px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cartpromo label small{font-size:12.5px;font-weight:400;color:var(--muted)}
.promorow{display:flex;gap:8px;align-items:stretch}
.promorow input{flex:1 1 auto;min-width:0;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px;text-transform:uppercase}
.promorow input:focus{border-color:var(--teal)}
.promorow input:disabled{background:var(--teal-soft);color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1}
.promorow button{flex:none;min-height:46px;padding:10px 18px;border:1.5px solid var(--navy);border-radius:10px;
  background:var(--navy);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.promorow button:hover{background:var(--navy2);border-color:var(--navy2)}
.promorow button:disabled{opacity:.65;cursor:progress}
.promomsg{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted);min-height:1px}
.promomsg.good{color:#1b6b48;font-weight:600}
.promomsg.bad{color:#9b2c2c}
.sumrow.disc span:last-child{color:#1b6b48;font-weight:600}

html.comfort .promo label{font-size:15.5px}
html.comfort .promorow input{font-size:18px;min-height:52px}
html.comfort .promorow button{font-size:17px;min-height:52px}
html.comfort .promomsg{font-size:15px}
.add:disabled{cursor:not-allowed}
.checkoutbtn:disabled{opacity:.7;cursor:progress}
html.comfort .sfield label{font-size:15.5px}
html.comfort .sfield input,html.comfort .sfield select{font-size:18px;min-height:52px}
html.comfort .ferr,html.comfort .shipprivacy{font-size:15px}
html.comfort .shipto legend{font-size:19px}
html.comfort .shipnote{font-size:14px}
.confirmtotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px;font-size:15px;font-weight:700;color:var(--ink)}
.confirmtotal b{font-family:'Fraunces',serif;font-size:22px;color:var(--navy)}
html.comfort .confirmtotal{font-size:17px}
html.comfort .confirmtotal b{font-size:25px}

/* Final-sale notice. Plain body text, not fine print: body ink colour, 14px floor,
   16px in large-text mode. Florida s.501.142 expects a no-refund policy to be visible
   at the point of sale, so this must never be collapsed, hovered or greyed out. */
.finalsale{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 12px;text-align:left}
.finalsale a{color:var(--teal-deep);font-weight:700;text-decoration:underline}
html.comfort .finalsale{font-size:16px}

/* The whole product card opens its product page. Before this, tapping the photo
   did nothing at all - only the product name was a link. The Add button and the
   name link are lifted above the stretched anchor so they still work. */
.card{position:relative}
.card__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.card__link:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.card .add,.card .lab,.card .nm a{position:relative;z-index:2}
.card:hover{box-shadow:0 8px 26px #16235c1f}