/** Shopify CDN: Minification failed

Line 614:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════════════════════════════════════
   DN5 · site shell (announcement / header / nav / search / region / cart drawer / Quick View / footer)
   Namespace .dn5s-* (no clash with .dn5h home / .dn5c collection / .dn5p PDP)
   Proto source: design/duniii Home 2c v2.dc.html (Home Desktop 1440×900 / Home Mobile 390×844)
   Breakpoint 990px, same as the other three dn5 pages. Mobile first.

   🔴 This file is live alongside the black skin's theme.css / dn2-pdp.css / dn3-retained-components.css /
      bundle-*.css (the layout is not overridden, see SHELL-CONTRACT.md §0).
      Those files hit ids/classes such as #cart-drawer / .dn2-sheet with "literal colour + !important",
      so every property landing on their selectors needs !important here too — not laziness, same-layer contest.
      Pure dn5 .dn5s-* selectors never use !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · tokens (same values as .dn5h / .dn5c) ─────────────────────────────── */
.dn5s{
  --ink:#3c4a66; --night:#46546e; --nightHov:#3c4a66; --mut:#6a7690; --mut2:#7f8ea8;
  --line:#d4dbe6; --line2:#dde2ea; --oat:#efe9dc; --milk:#f8f4ec; --card:#fdfbf7;
  --star:#e6c64f; --starInk:#3e3a2a; --pale:#e3e9f2; --hov:#e9eef5; --hov2:#dde4ef;
  --sleepy:#8ca2c4; --link:#5f7397; --foot:#d4dbe6; --foot2:#b4c0d4;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* night-blue three-layer terry dots (shared by the proto announcement / marquee / footer) */
  --terry:radial-gradient(circle at 1px 1px,rgba(255,255,255,.11) .9px,transparent 1.4px),
          radial-gradient(circle at 1px 1px,rgba(70,84,110,.12) .9px,transparent 1.4px),
          radial-gradient(circle at 3px 3px,rgba(255,255,255,.06) 1.6px,transparent 2.4px);
  --terry-size:4px 4px,4px 4px,7px 7px;
  --terry-pos:0 0,2px 2px,1px 3px;
  /* night-blue single-layer dots (buttons) */
  --dots1:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) .9px,transparent 1.4px);
  /* light grey dots (close button / tab track / avatar base) */
  --dots2:radial-gradient(circle at 1px 1px,rgba(255,255,255,.75) .9px,transparent 1.4px),
          radial-gradient(circle at 1px 1px,rgba(70,84,110,.10) .9px,transparent 1.4px);
  /* gold dots */
  --dotsG:radial-gradient(circle at 1px 1px,rgba(255,255,255,.3) .9px,transparent 1.4px);
  font-family:Nunito,sans-serif;
  color:var(--night);
  /* 🔴 The whole proto uses line-height normal; the black theme.css sets a global line-height, and without
     a reset every text line box is 2px shorter than the proto (measured at 1440: 11.5px text 13.5 vs 15.5). */
  line-height:normal;
}
.dn5s *,.dn5s *::before,.dn5s *::after{box-sizing:border-box}
/* :where() adds no specificity: component rules below beat it, and it still beats the black skin's bare tag rules */
.dn5s :where(a){color:inherit;text-decoration:none}
.dn5s :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.dn5s :where(img){display:block}
.dn5s :where(p),.dn5s :where(h1),.dn5s :where(h2),.dn5s :where(h3){margin:0}
.dn5s :where(summary){list-style:none;cursor:pointer}
.dn5s :where(summary)::-webkit-details-marker{display:none}
.dn5s :where(input){font-family:inherit}

/* shared parts */
.dn5s-terry{background-color:var(--night);background-image:var(--terry);background-size:var(--terry-size);background-position:var(--terry-pos)}
/* terry edge (night-blue scallop). --dir: 1 = scallops on the bottom edge, 0 = on the top edge */
.dn5s-scallop{height:7px;background:radial-gradient(circle at 6px 0,var(--night) 6px,transparent 6.5px) 0 0/12px 7px repeat-x}
.dn5s-scallop--up{background:radial-gradient(circle at 6px 7px,var(--night) 6px,transparent 6.5px) 0 0/12px 7px repeat-x}
.dn5s-x{width:44px;height:44px;flex:none;border-radius:12px;background-color:var(--hov);background-image:var(--dots2);background-size:4px 4px,4px 4px;background-position:0 0,2px 2px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--night);transition:background-color .15s}
.dn5s-x:hover{background-color:var(--hov2)}
.dn5s-grab{display:flex;justify-content:center;flex:none}
.dn5s-grab i{display:block;width:40px;height:5px;border-radius:3px;background:#c5cedc;font-style:normal}
.dn5s-panel--loc .dn5s-grab{padding-top:12px}
.dn5s-cta{height:54px;border-radius:16px;background-color:var(--night);background-image:var(--dots1);background-size:4px 4px;color:var(--milk);outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;letter-spacing:.08em;transition:transform .12s,background-color .15s}
.dn5s-cta:hover{background-color:var(--nightHov)}
.dn5s-cta:active{transform:scale(.98)}

/* ── 1 · announcement bar ─────────────────────────────────────────────────── */
/* 🔴 The dn5 announcement is not fixed: it scrolls away with the page and only the header is sticky (both proto screens).
   So never attach the black skin's .announcement-bar here (theme.css pins it to position:fixed). */
.dn5s-ann{position:relative;z-index:31}
/* phone (proto line 430): the bar itself carries no type; the copy div does (11px/800/.16em/uppercase) */
.dn5s-ann__bar{position:relative;height:38px;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.dn5s-ann__msg,.dn5s-ann__mqwrap{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--dn5s-ann-ink,var(--milk));text-transform:uppercase}
a.dn5s-ann__bar:hover,.dn5s-ann__bar.is-link:hover{background-color:var(--nightHov)}
.dn5s-ann__bar.is-link{cursor:pointer}
.dn5s-ann__dash{position:absolute;left:10px;right:10px;bottom:4px;border-top:1.5px dashed rgba(248,244,236,.38)}
.dn5s-ann__msg{opacity:1;transition:opacity .35s ease}
.dn5s-ann__arrow{display:none}
.dn5s-ann .dn5s-scallop{position:absolute;left:0;right:0;bottom:-7px}
/* marquee / static styles (editor choice; the proto only draws rotating) */
.dn5s-ann__mqwrap{display:flex;white-space:nowrap;animation:dn5s-mq 16s linear infinite}
.dn5s-ann__mqwrap.dn-motion-paused{animation-play-state:paused}
.dn5s-ann__mqwrap.dn-motion-static{animation:none;transform:none}
.dn5s-ann__mq{padding-right:32px}
@keyframes dn5s-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dn5s-ann__mqwrap{animation:none;transform:none}}

/* ── 2 · header ───────────────────────────────────────────────────────────── */
/* 🔴 sticky must sit on Shopify's section wrapper, not on <header>.
   Shopify wraps {% section 'header' %} in <div id="shopify-section-header">,
   and sticky only sticks inside **the parent's box** — that box is as tall as the header itself (62/77.5px),
   so a sticky header scrolls away with its wrapper after a couple of wheel ticks (measured 2026-10-17 at 390:
   header.top = −562 at scrollY=600). The black skin side-steps this with position:fixed.
   Moving sticky to the wrapper (its parent is <body>, 4449px tall) keeps the look on .dn5s-hd.
   The wrapper exists in the Theme editor as well, so the editor preview matches. */
/* The blank strip above the header (body padding-top:81px/145px) used to be fought here; not any more:
   the dn5 layout does not load dn3-retained-components.css at all (see skins/dn5/layout/theme.liquid).
   Check: desktop body padding-top reads back 0, and **not** because an !important forced it. */
#shopify-section-header{position:sticky;top:0;z-index:30}
/* phone (proto line 433): one sticky grid cell carries bg/blur/dashed line; <header> is only the landmark wrapper */
.dn5s-hd{position:relative;z-index:30}
/* 🔴 In the proto this cell is height:56px + padding-top:4px **without** box-sizing:border-box
   → 60px total (plus the parent's 1.5px dashed line = 61.5). We are border-box globally, so write 60. */
.dn5s-hd__in{position:sticky;top:0;z-index:6;height:61.5px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 8px 0;background:rgba(248,244,236,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1.5px dashed var(--line)}
.dn5s-hd__l{display:flex;align-items:center;gap:2px}
.dn5s-hd__r{display:flex;justify-content:flex-end;align-items:center;gap:4px}
.dn5s-burger{width:44px;height:44px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding-left:12px;transition:background-color .15s}
.dn5s-burger:hover{background:var(--hov)}
.dn5s-burger i{display:block;height:2px;width:20px;background:var(--night);border-radius:2px;font-style:normal}
.dn5s-burger i:last-child{width:14px}
.dn5s-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.dn5s-icon:hover{background:var(--hov)}
.dn5s-loc{height:44px;padding:0 8px;border-radius:12px;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;letter-spacing:.06em;color:var(--night);transition:background-color .15s}
.dn5s-loc:hover{background:var(--hov)}
/* logo = the image uploaded in the editor, in its own colours and aspect ratio (no mask, no bundled file).
   No upload -> .dn5s-logo--text shows the shop name in the same spot. */
.dn5s-logo{display:block;flex:none;width:var(--dn5s-logo-w-m,88px);line-height:0}
.dn5s-logo__img{display:block;width:100%;height:auto}
.dn5s-logo--text{width:auto;max-width:60vw;line-height:1.1;font-family:Nunito,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn5s-bag{height:34px;display:flex;align-items:center;gap:7px;padding:0 5px 0 12px;background-color:var(--night);color:var(--milk);outline:1px dashed rgba(248,244,236,.45);outline-offset:-3px;border-radius:10px;font-size:12px;font-weight:800;transition:background-color .15s}
.dn5s-bag:hover{background-color:var(--nightHov)}
/* 🔴 Item-count badge: the engine writes inline style.display on every render (none at 0 items);
   the proto shows it at 0 too (grey 0) → !important beats the inline style,
   and dn5-shell.js toggles .is-zero from textContent. */
.dn5s-bag__n{display:flex!important;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--star);color:var(--starInk);font-size:11px;font-weight:900}
.dn5s-bag__n.is-zero{padding:0;background:rgba(248,244,236,.18);color:var(--milk)}
.dn5s-hd__nav,.dn5s-hd__acct{display:none}

/* ── 3 · scrim + shared sheet ─────────────────────────────────────────────── */
/* .dn2-sheet-wrap display:none / .is-open{display:block} comes from the black dn2-pdp.css;
   here only dn5 stacking and colours are added; scrim colour per proto rgba(40,48,66,.5). */
/* own display switch, not relying on the black dn2-pdp.css (it has one too; both agree) */
.dn5s-sheet{position:fixed;inset:0;z-index:10000;display:none}
.dn5s-sheet.is-open{display:block}
.dn5s-sheet__bd{position:absolute;inset:0;background:rgba(40,48,66,.5)}
.dn5s-panel{position:absolute;display:flex;flex-direction:column;background:var(--milk);box-shadow:0 -20px 40px rgba(40,48,66,.2)}
/* bottom sheet (phones: everything except nav rises from the bottom) */
.dn5s-panel--bottom{left:0;right:0;bottom:0;max-height:82%;border-radius:28px 28px 0 0;outline:1.5px dashed rgba(70,84,110,.25);outline-offset:-8px;animation:dn5s-up .38s var(--ease) both}
.dn5s-panel--left{top:0;left:0;bottom:0;width:322px;max-width:86vw;border-radius:0 28px 28px 0;outline:1.5px dashed rgba(70,84,110,.22);outline-offset:-8px;box-shadow:20px 0 40px rgba(40,48,66,.2);animation:dn5s-l .38s var(--ease) both}
.dn5s-panel--top{top:0;left:0;right:0;max-height:88%;border-radius:0 0 28px 28px;box-shadow:0 24px 50px rgba(40,48,66,.25);animation:dn5s-t .38s var(--ease) both}
@keyframes dn5s-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes dn5s-l{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes dn5s-t{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes dn5s-r{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes dn5s-pop{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.dn5s-panel{animation:none!important}}
.dn5s-head{flex:none;display:flex;align-items:center;justify-content:space-between}
.dn5s-title{font-family:'Young Serif',serif;font-weight:400;color:var(--ink)}

/* ── 4 · nav drawer (phone) ──────────────────────────────────────────────── */
.dn5s-nav__head{padding:16px 16px 12px 22px}
.dn5s-nav__head .dn5s-logo{width:88px}
.dn5s-nav__head .dn5s-logo--text{width:auto}
.dn5s-nav__scroll{flex:1;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding:0 22px}
.dn5s-nav__scroll::-webkit-scrollbar{display:none}
.dn5s-nav__g{border-bottom:1.5px dashed var(--line2)}
.dn5s-nav__row{min-height:56px;display:flex;align-items:center;justify-content:space-between}
.dn5s-nav__tw{display:flex;align-items:center;gap:8px}
.dn5s-nav__t{font-family:'Young Serif',serif;font-weight:400;font-size:19px;color:var(--ink)}
.dn5s-nav__tag{background:var(--night);color:var(--milk);border-radius:3px;outline:1px dashed rgba(248,244,236,.55);outline-offset:-3px;font-weight:900;padding:3px 6px;font-size:8.5px;letter-spacing:.12em}
.dn5s-nav__chev{color:var(--sleepy);font-size:14px;display:inline-block;transition:transform .25s var(--ease)}
.dn5s-nav__g[open] > .dn5s-nav__row .dn5s-nav__chev{transform:rotate(180deg)}
.dn5s-nav__kids{margin:0 0 12px;padding:6px 14px;border-radius:16px;background-color:var(--hov);background-image:var(--dots2);background-size:4px 4px,4px 4px;background-position:0 0,2px 2px;display:flex;flex-direction:column}
.dn5s-nav__kid{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:800;color:var(--night);border-bottom:1px dashed rgba(70,84,110,.15)}
.dn5s-nav__kid:hover{color:#26304a}
.dn5s-nav__kids > :last-child{border-bottom:0}
.dn5s-nav__kid span:last-child{color:var(--sleepy)}
.dn5s-nav__sub summary.dn5s-nav__kid{cursor:pointer}
.dn5s-nav__gkids{padding-left:12px;display:flex;flex-direction:column}
.dn5s-nav__gkid{min-height:40px;display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--mut);border-bottom:1px dashed rgba(70,84,110,.12)}
.dn5s-nav__quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 0}
.dn5s-nav__qbtn{min-height:44px;border-radius:12px;background:var(--oat);outline:1.5px dashed rgba(140,162,196,.6);outline-offset:-4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.dn5s-nav__foot{flex:none;padding:14px 22px 24px;border-top:1.5px dashed var(--line2);display:flex;align-items:center;justify-content:space-between}
.dn5s-nav__foot a{font-size:13px;font-weight:800;color:var(--night)}
.dn5s-chip{height:36px;padding:0 12px;border-radius:11px;border:1.5px solid var(--line);display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900}

/* ── 5 · search panel ─────────────────────────────────────────────────────── */
/* phone (proto 613-632): panel > [top, body]; the desktop centring box is display:contents here */
.dn5s-srch__in{display:contents}
.dn5s-srch__top{flex:none;padding:14px 14px 12px;display:flex;align-items:center;gap:8px}
.dn5s-srch__box{flex:1;min-width:0;box-sizing:content-box;height:48px;border-radius:14px;border:1.5px solid var(--sleepy);background:var(--card);box-shadow:0 0 0 3px rgba(140,162,196,.2);display:flex;align-items:center;gap:8px;padding:0 12px}
.dn5s-srch__box input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:1px 2px;font-family:Nunito,sans-serif;font-size:16px;font-weight:700;color:var(--ink)}
.dn5s-srch__box input::placeholder{color:#9aa6bb}
.dn5s-srch__body{overflow-y:auto;scrollbar-width:none;padding:0 16px 20px;display:flex;flex-direction:column;gap:14px}
.dn5s-srch__body::-webkit-scrollbar{display:none}
.dn5s-lab{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--mut2);text-transform:uppercase}
.dn5s-srch__trend{display:flex;flex-direction:column;gap:8px}
.dn5s-srch__trend .dn5s-lab{font-size:10px}
.dn5s-srch__tags{display:flex;flex-wrap:wrap;gap:6px}
.dn5s-srch__body > .dn5s-lab{font-size:10px}
.dn5s-tag{flex:none;min-height:34px;padding:0 12px;border-radius:11px;border:1.5px solid var(--line);background:var(--card);display:flex;align-items:center;font-size:12px;font-weight:800;transition:border-color .15s}
.dn5s-tag:hover{border-color:var(--sleepy)}
.dn5s-srch__rows{display:flex;flex-direction:column}
.dn5s-srow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1.5px dashed var(--line2);width:100%}
.dn5s-srow__img{width:46px;height:58px;border-radius:10px;flex:none;background-size:cover;background-position:center;background:var(--oat);box-shadow:inset 0 0 0 1px rgba(70,84,110,.12)}
.dn5s-srow__img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dn5s-srow__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.dn5s-srow__n{font-size:13.5px;font-weight:800;color:var(--ink)}
.dn5s-srow__p{display:flex;gap:6px;align-items:baseline}
.dn5s-srow__p b{font-size:12.5px;font-weight:900;color:var(--ink)}
.dn5s-srow__p s{font-size:10.5px;color:var(--mut2)}
.dn5s-srow__go{width:36px;height:36px;flex:none;border-radius:11px;background-color:var(--night);background-image:var(--dots1);background-size:4px 4px;color:var(--milk);outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-4px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;transition:transform .12s}
.dn5s-srow__go:active{transform:scale(.92)}
.dn5s-srch__none{padding:18px 0;text-align:center;font-family:'Young Serif',serif;font-size:16px;color:var(--link)}
.dn5s-srch__all{padding:0 0 4px}

/* ── 6 · region / currency ────────────────────────────────────────────────── */
.dn5s-loc__head{padding:10px 20px 12px}
.dn5s-loc__head .dn5s-title{font-size:22px}
.dn5s-tabs{flex:none;margin:0 20px;align-self:flex-start;display:flex;gap:3px;padding:3px;border-radius:12px;background-color:var(--hov);background-image:var(--dots2);background-size:4px 4px,4px 4px;background-position:0 0,2px 2px}
.dn5s-tab{height:34px;padding:0 16px;border-radius:9px;display:flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:.06em}
.dn5s-tab.is-on{background-color:var(--night);background-image:var(--dots1);background-size:4px 4px;color:var(--milk);outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-4px;font-weight:900}
.dn5s-loc__list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:12px 20px}
.dn5s-loc__list::-webkit-scrollbar{display:none}
.dn5s-lrow{box-sizing:content-box;min-height:52px;display:flex;align-items:center;gap:12px;border-bottom:1.5px dashed var(--line2);width:100%}
.dn5s-lrow__code{width:34px;height:24px;flex:none;border-radius:6px;background:var(--oat);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--night)}
.dn5s-lrow__mid{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left}
.dn5s-lrow__n{font-size:14px;font-weight:800;color:var(--ink)}
.dn5s-lrow__s{font-size:11px;color:var(--mut)}
.dn5s-lrow__r{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid #c5cedc;display:block}
.dn5s-lrow.is-on .dn5s-lrow__r{border:0;background:var(--night);display:flex;align-items:center;justify-content:center}
.dn5s-lrow__r i{display:none;width:8px;height:8px;border-radius:50%;background:var(--star);font-style:normal}
.dn5s-lrow.is-on .dn5s-lrow__r i{display:block}
.dn5s-loc__foot{flex:none;padding:12px 20px 24px}
.dn5s-loc__foot .dn5s-cta{width:100%}

/* ── 7 · cart drawer (engine DOM skeleton untouched, restyle only) ────────── */
#cart-drawer-backdrop.cart-drawer-backdrop{background:rgba(40,48,66,.5)!important;z-index:9998!important}
#cart-drawer.cart-drawer{
  position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
  width:auto!important;max-width:none!important;height:100%!important;max-height:100%!important;
  background:var(--milk)!important;color:var(--night)!important;
  border:0!important;border-radius:0!important;box-shadow:0 -20px 40px rgba(40,48,66,.2)!important;
  transform:translateY(100%)!important;transition:transform .4s var(--ease)!important;
  display:flex!important;flex-direction:column!important;z-index:9999!important;
  font-family:Nunito,sans-serif!important;
}
#cart-drawer.cart-drawer.is-open{transform:translateY(0)!important;animation:none!important}
#cart-drawer .dn5s-grab{padding-top:14px}
#cart-drawer .cart-drawer__header{flex:none;padding:6px 16px 10px 20px!important;border-bottom:1.5px dashed var(--line2)!important;display:flex;align-items:center;justify-content:space-between;gap:normal!important;background:transparent!important}
#cart-drawer .dn5s-cart__h{display:flex;align-items:baseline;gap:8px}
#cart-drawer .dn5s-cart__h .dn5s-title{font-size:24px}
#cart-drawer .dn5s-cart__n{font-size:13px;font-weight:800;color:var(--mut)}
/* free-shipping progress: engine .shipping-bar / #shipping-text / #shipping-fill restyled in place */
/* phone values = dn4 drawer template (margin 10/16/2, padding 10/12); desktop = Home 2c v2 (12/16/2, 11/14) */
#cart-drawer .shipping-bar{flex:none;margin:10px 16px 2px!important;padding:10px 12px!important;border:0!important;border-radius:14px;background:var(--oat)!important;outline:1.5px dashed rgba(140,162,196,.6);outline-offset:-4px;display:flex;flex-direction:column;gap:8px}
#cart-drawer .shipping-bar > .flex{display:contents!important}
#cart-drawer #shipping-text{margin:0!important;font-family:Nunito,sans-serif!important;font-size:13px!important;font-weight:800!important;color:var(--night)!important;line-height:normal!important}
#cart-drawer #shipping-text strong{font-weight:900}
#cart-drawer .shipping-bar__track{position:relative;height:12px!important;border-radius:6px!important;background:var(--card)!important;box-shadow:inset 0 0 0 1.5px var(--line);overflow:visible!important}
#cart-drawer #shipping-fill.shipping-bar__fill{position:absolute!important;left:0;top:0;bottom:0;height:auto;border-radius:6px!important;background-color:var(--sleepy)!important;background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(248,244,236,.35) 6px 12px)!important;transition:width .5s var(--ease)}
#cart-drawer #shipping-fill.shipping-bar__fill::after{content:"";position:absolute;right:-8px;top:-3px;width:18px;height:18px;border-radius:50%;background:var(--star);box-shadow:0 0 0 3px var(--oat)}
#cart-drawer .dn5s-cart__tier{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1.5px dashed rgba(140,162,196,.5);font-size:12px;font-weight:800;color:var(--night)}
#cart-drawer .dn5s-cart__tier[hidden]{display:none}
#cart-drawer .dn5s-cart__tier i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--star)}
#cart-drawer .dn5s-cart__tier span{flex:1;min-width:0}
#cart-drawer .dn5s-cart__tier a{flex:none;color:var(--link);text-decoration:underline;text-underline-offset:2px}
/* line list */
#cart-drawer .dn5s-cart__scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
#cart-drawer .dn5s-cart__scroll::-webkit-scrollbar{display:none}
#cart-drawer #cart-drawer-items{display:contents!important}
#cart-drawer .cart-item{display:flex;gap:12px!important;align-items:flex-start!important;padding:14px 18px!important;margin:0!important;border-bottom:1.5px dashed var(--line2)!important}
#cart-drawer .cart-item__image{width:64px!important;height:80px!important;flex:none;border-radius:12px!important;overflow:hidden;background:var(--oat);box-shadow:inset 0 0 0 1px rgba(70,84,110,.14)}
#cart-drawer .cart-item__image img{width:100%;height:100%;object-fit:cover;border-radius:0!important}
#cart-drawer .cart-item__name{font-family:Nunito,sans-serif!important;font-size:13.5px!important;font-weight:800!important;line-height:1.25!important;color:var(--ink)!important;letter-spacing:0!important;text-transform:none!important}
#cart-drawer .cart-item__variant{font-size:12px!important;line-height:1.4!important;color:var(--mut)!important;margin-top:5px!important}
#cart-drawer .cart-item__qty{height:32px!important;border:1.5px solid var(--line)!important;border-radius:10px!important;background:var(--card)!important;display:flex;align-items:center}
#cart-drawer .cart-item__qty-btn{width:32px!important;height:100%;display:flex;align-items:center;justify-content:center;color:var(--night)!important;font-weight:900}
#cart-drawer .cart-item__qty-value{min-width:18px;text-align:center;font-size:13px!important;font-weight:900!important;color:var(--ink)!important}
/* the engine emits compare before price → order puts the price on top (proto line 337) */
#cart-drawer .cart-item__prices{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:1px!important}
#cart-drawer .cart-item__price{order:1;font-family:Nunito,sans-serif!important;font-size:14px!important;font-weight:900!important;color:var(--ink)!important;margin:0!important}
#cart-drawer .cart-item__compare{order:2;font-size:12px!important;font-weight:400!important;color:var(--mut2)!important;text-decoration:line-through;margin:0!important}
#cart-drawer .dn2-disc-chip{border-color:rgba(70,84,110,.3)!important;color:var(--night)!important;border-radius:4px!important}
/* empty state */
/* empty state: phone = dn4 (one centred serif line, padding 36/20); desktop = Home 2c v2 (bear + line + KEEP BROWSING) */
#cart-drawer #cart-empty{padding:36px 20px!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;text-align:center}
#cart-drawer #cart-empty .dn5s-empty__img,#cart-drawer #cart-empty .dn5s-empty__b{display:none!important}
#cart-drawer #cart-empty svg{display:none}
#cart-drawer #cart-empty .dn5s-empty__t{font-family:'Young Serif',serif;font-size:18px;color:var(--link);font-style:normal}
#cart-drawer #cart-empty .dn5s-empty__b{height:46px;padding:0 22px;border-radius:14px;border:1.5px solid var(--night);background:transparent;color:var(--night);display:flex;align-items:center;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:none;margin:0;transition:background-color .15s}
#cart-drawer #cart-empty .dn5s-empty__b:hover{background:var(--hov)}
#cart-drawer #cart-empty .dn5s-empty__img{width:96px;height:96px;border-radius:50%;object-fit:cover}
/* recommendations */
#cart-drawer #cart-recs.cart-recs{flex:none;border:0!important;margin:0!important;padding:16px 0 8px!important;flex-direction:column;gap:10px}
#cart-drawer .dn5s-recs__h{padding:0 18px;display:flex;justify-content:space-between;align-items:baseline}
#cart-drawer .dn5s-recs__h .dn5s-title{font-size:17px}
#cart-drawer .dn5s-recs__note{font-size:11px;font-weight:800;color:var(--mut)}
#cart-drawer .cart-recs__title{display:none!important}
#cart-drawer #cart-recs-track.cart-recs__track{display:flex;gap:8px!important;overflow-x:auto!important;overflow-y:auto!important;margin:0!important;padding:2px 18px 6px!important;scrollbar-width:none}
/* recommendation card = dn4 drawer template recs card (templates/product.card.liquid) */
#cart-drawer #cart-recs-track > .dn5s-rc{flex:none!important;width:92px!important;max-width:none!important;display:flex;flex-direction:column;gap:4px;position:static;margin:0;padding:0;background:none;border:0;box-shadow:none;transform:none}
#cart-drawer .dn5s-rc__img{position:relative;height:112px;border-radius:12px;overflow:hidden;background:#efe9dc;cursor:pointer}
#cart-drawer .dn5s-rc__img img{width:100%;height:100%;display:block;object-fit:cover}
#cart-drawer .dn5s-rc__add{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:9px;background-color:#46546e;background-image:var(--dots1);background-size:4px 4px;color:#f8f4ec;outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-3px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;cursor:pointer;transition:transform .12s}
#cart-drawer .dn5s-rc__img:active .dn5s-rc__add{transform:scale(.9)}
#cart-drawer .dn5s-rc__n{font-size:11px;font-weight:800;color:#3c4a66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cart-drawer .dn5s-rc__p{display:flex;gap:5px;align-items:baseline}
#cart-drawer .dn5s-rc__p span:first-child{font-size:11.5px;font-weight:900;color:#3c4a66}
#cart-drawer .dn5s-rc__p span + span{font-size:9.5px;font-weight:400;color:#7f8ea8;text-decoration:line-through}
#cart-drawer #cart-recs-track .product-card__image{height:118px!important;border-radius:12px!important;overflow:hidden;background:var(--oat);margin-bottom:4px!important}
#cart-drawer #cart-recs-track .product-card__image img{height:118px!important;object-fit:cover}
#cart-drawer #cart-recs-track .product-card__name{font-size:11px!important;font-weight:800!important;color:var(--ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cart-drawer #cart-recs-track .product-card__price{font-size:11.5px!important;font-weight:900!important;color:var(--ink)!important}
#cart-drawer #cart-recs-track .product-card__compare{font-size:9.5px!important;color:var(--mut2)!important}
#cart-drawer #cart-recs-track .product-card__quick-btn{border-radius:9px!important;background-color:var(--night)!important;background-image:var(--dots1)!important;background-size:4px 4px!important;color:var(--milk)!important;outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-3px}
/* footer */
/* the engine writes inline display:block / none on the footer; only its "shown" state is turned into the proto's flex column */
#cart-drawer #cart-drawer-footer[style*="block"]{display:flex!important}
#cart-drawer .cart-drawer__footer{flex:none;padding:10px 18px 18px!important;display:flex;flex-direction:column;gap:8px;border-top:1.5px dashed var(--line2)!important;background:var(--milk)!important}
#cart-drawer .dn5s-cart__sumrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
#cart-drawer .dn5s-cart__subtotal-label{font-size:11px;font-weight:800;color:var(--mut);white-space:nowrap}
#cart-drawer .dn5s-cart__shipping{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;color:var(--mut)}
#cart-drawer .dn5s-cart__shipping [hidden]{display:none!important}
#cart-drawer .dn5s-cart__shipping-status{color:var(--night);text-align:right}
#cart-drawer #cart-savings.cart-drawer__savings{display:none;align-items:center;gap:4px;margin:0!important;padding:3px 7px!important;border:0!important;border-radius:4px!important;background-color:var(--star)!important;background-image:var(--dotsG)!important;background-size:4px 4px!important;color:var(--starInk)!important;outline:1px dashed rgba(62,58,42,.4);outline-offset:-3px;font-family:Nunito,sans-serif!important;font-size:10.5px!important;font-weight:900!important;letter-spacing:0!important;text-transform:uppercase}
#cart-drawer #cart-savings.cart-drawer__savings *{color:var(--starInk)!important;font-size:10.5px!important;font-weight:900!important;line-height:normal!important}
#cart-drawer #cart-savings.cart-drawer__savings{line-height:normal!important}
#cart-drawer .dn5s-cart__sub{display:flex;align-items:baseline;gap:6px;flex:none}
#cart-drawer #cart-subtotal{font-family:Nunito,sans-serif!important;font-size:17px!important;font-weight:900!important;color:var(--ink)!important;font-variant-numeric:tabular-nums}
#cart-drawer .dn5s-cart__tax{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;color:var(--mut)}
#cart-drawer .btn-checkout{height:50px!important;padding:0!important;border-radius:15px!important;background-color:var(--night)!important;background-image:var(--dots1)!important;background-size:4px 4px!important;color:var(--milk)!important;outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-5px;border:0!important;display:flex!important;align-items:center;justify-content:center;font-family:Nunito,sans-serif!important;font-size:14px!important;font-weight:900!important;letter-spacing:.06em!important;text-transform:uppercase;box-shadow:0 6px 14px rgba(70,84,110,.2);margin:0!important;transition:transform .12s,background-color .15s}
#cart-drawer .btn-checkout:hover{background-color:var(--nightHov)!important}
#cart-drawer .btn-checkout:active{transform:scale(.98)}
/* Black dn3 desktop-only parts: DOM kept (other JS looks for them; removing them fails silently), only hidden.
   Exception: .dn3-cart-remove is the "Remove" dn3 JS injects into each line — the proto wants exactly that, so it stays, restyled. */
#cart-drawer .dn3-d:not(.dn3-cart-remove),#cart-drawer .dn3-hide-desk-cart,
#cart-drawer .cart-drawer__title,#cart-drawer .cart-note__details{display:none!important}
#cart-drawer .dn3-cart-remove{display:inline!important;align-self:center;margin-left:12px!important;margin-right:auto!important;background:none;border:0;font-family:Nunito,sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:0!important;color:var(--mut2)!important;text-decoration:underline;text-underline-offset:2px}
#cart-drawer .dn3-cart-remove:hover{color:var(--night)!important}
/* The rules below originally neutralised the black-skin layer dn3-retained-components.css put on the cart.
   The dn5 layout no longer loads that CSS, so they are now **idle insurance**, harmless to keep:
   should anyone add that CSS back, the cart does not turn black at once.
   (The two `.dn3-cart-remove` rules are not insurance but needed — that Remove button is injected by
    dn3-retained-cart-shipping-copy-v2.js, which is still loaded.) */
#cart-drawer::before,#cart-drawer::after,#cart-drawer .cart-item::after,
#cart-drawer .btn-checkout::before,#cart-drawer .btn-checkout::after{content:none!important;display:none!important}
#cart-drawer [data-cart-count]{display:flex!important}
#cart-drawer [data-dn2-co-total]{display:inline!important;white-space:pre}
#cart-drawer .cart-item__image img{filter:none!important}
#cart-drawer{overflow:visible!important}
/* with an empty cart the engine's two scripts still show the recommendations; the proto empty state is only image + KEEP BROWSING */


/* ── 8 · Quick View (engine hooks untouched; node order = proto, see snippets/dn-quick-shop.liquid) ── */
/* phone = dn4 quick template (dn4-app-v13 line 15): full-height sheet > [handle, scroll column (gap 14), footer with the ATC] */
#dn2-quick-shop .dn2-sheet__backdrop{background:rgba(40,48,66,.5)}
#dn2-quick-shop .dn2-sheet{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  top:0!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;padding:0!important;
  background:#f8f4ec!important;border:0!important;border-radius:0!important;
  outline:1.5px dashed rgba(70,84,110,.25);outline-offset:-8px;
  box-shadow:0 -20px 40px rgba(40,48,66,.2)!important;
  display:flex!important;flex-direction:column!important;overflow:visible!important;
  font-family:Nunito,sans-serif!important;color:var(--night)!important;
  animation:dn5s-up .38s var(--ease) both!important;
}
#dn2-quick-shop .dn2-sheet__handle-row{display:flex;justify-content:center;padding:10px 0 0!important;flex-shrink:1}
#dn2-quick-shop .dn2-sheet__handle{width:40px!important;height:5px!important;border-radius:3px;background:#c5cedc!important}
#dn2-quick-shop .dn5s-qs__main{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:10px 18px 4px;display:flex;flex-direction:column;gap:14px}
#dn2-quick-shop .dn5s-qs__num{display:none}
#dn2-quick-shop .dn5s-qs__main::-webkit-scrollbar{display:none}
#dn2-quick-shop .dn2-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0!important;flex-shrink:1}
#dn2-quick-shop .dn5s-qs__hinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
#dn2-quick-shop .dn5s-qs__shopinfo,#dn2-quick-shop .dn5s-qs__hbtns{display:contents}
#dn2-quick-shop .dn2-sheet__eyebrow{font-family:Nunito,sans-serif!important;font-size:10px!important;font-weight:900!important;letter-spacing:.16em!important;color:#7f8ea8!important;text-transform:uppercase}
#dn2-quick-shop .dn5s-qs__title{margin:0;font-family:'Young Serif',serif;font-size:21px;line-height:1.15;color:#3c4a66}
#dn2-quick-shop .dn5s-qs__price{margin:0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
#dn2-quick-shop [data-qs-price]{font-size:16px;font-weight:900;color:#3c4a66}
#dn2-quick-shop [data-qs-compare]{font-size:14px;color:#7f8ea8;text-decoration:line-through}
#dn2-quick-shop [data-qs-compare]:empty{display:none}
/* not in the proto: the engine still writes them (hooks kept), the skin does not show them */
#dn2-quick-shop [data-qs-about-label],#dn2-quick-shop [data-qs-desc],#dn2-quick-shop [data-qs-desc-toggle],#dn2-quick-shop [data-qs-media-open]{display:none!important}
#dn2-quick-shop .dn2-sheet__close{width:44px!important;height:44px!important;flex:none;padding:0;border:0;border-radius:12px!important;background-color:#e9eef5!important;background-image:var(--dots2)!important;background-size:4px 4px,4px 4px!important;background-position:0 0,2px 2px!important;display:flex;align-items:center;justify-content:center;color:#46546e!important;font-size:15px;font-weight:800;transition:background-color .15s}
#dn2-quick-shop .dn2-sheet__close:hover{background-color:#dde4ef!important}
#dn2-quick-shop .dn2-qs__pnav{width:36px;height:36px;border:0;border-radius:11px;background:var(--hov);display:flex;align-items:center;justify-content:center;transition:background-color .15s}
#dn2-quick-shop .dn2-qs__pnav svg{stroke:var(--night)!important}
#dn2-quick-shop .dn2-sheet__media,#dn2-quick-shop .dn2-sheet__body,#dn2-quick-shop [data-qs-options]{display:contents}
#dn2-quick-shop .dn2-qs__stage{position:relative;width:auto;height:auto;min-height:0;max-height:none;aspect-ratio:4/5;flex:none;border-radius:20px!important;overflow:hidden;background:#f8f4ec!important}
#dn2-quick-shop .dn2-qs__stage::after{content:"";position:absolute;z-index:3;inset:0;border-radius:20px;outline:1.5px dashed rgba(253,251,247,.85);outline-offset:-8px;pointer-events:none}
#dn2-quick-shop .dn2-qs__counter{top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;background:rgba(248,244,236,.94)!important;border-radius:999px!important;padding:4px 10px!important;font-family:Nunito,sans-serif!important;font-size:11px!important;font-weight:900!important;color:#46546e!important;font-variant-numeric:tabular-nums}
#dn2-quick-shop .dn2-qs__arrow{width:40px!important;height:40px!important;top:50%;margin-top:-20px;transform:none;border:0;border-radius:50%!important;background:rgba(248,244,236,.94)!important;box-shadow:0 4px 10px rgba(40,48,70,.15);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#46546e;transition:transform .12s}
#dn2-quick-shop .dn2-qs__arrow:active{transform:scale(.92)}
#dn2-quick-shop .dn2-qs__thumbrow{display:flex;gap:8px;align-items:center;justify-content:normal;margin:0!important;padding:0!important;flex-shrink:1}
#dn2-quick-shop .dn5s-qs__thumbs{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
#dn2-quick-shop .dn5s-qs__thumbs::-webkit-scrollbar{display:none}
#dn2-quick-shop .dn2-qs__thumb{flex:none;display:block!important;position:static!important;width:52px!important;height:64px!important;border-radius:12px!important;padding:2px;background-color:transparent!important;background-clip:content-box!important;background-size:cover!important;background-position:center!important;opacity:.7;box-shadow:none!important;transition:opacity .2s,box-shadow .2s}
#dn2-quick-shop .dn2-qs__thumb.is-on{opacity:1;box-shadow:inset 0 0 0 2px #46546e!important}
#dn2-quick-shop .dn2-qs__thumb > span{display:none}
#dn2-quick-shop .dn2-qs__browse{display:none}
#dn2-quick-shop .dn5s-qs__full{flex:none;white-space:nowrap;margin-left:auto;font-size:12px;font-weight:800;color:#5f7397;text-decoration:underline;text-underline-offset:3px}
/* options: the colour/size rows are engine innerHTML; the title row <span> has engine inline styles, only !important beats it */
#dn2-quick-shop [data-qs-options] > span{font-family:Nunito,sans-serif!important;font-size:11px!important;font-weight:900!important;letter-spacing:.16em!important;color:#46546e!important;margin:0!important}
#dn2-quick-shop [data-qs-options] > span > span{font-weight:600!important;letter-spacing:0!important;color:#6a7690!important}
#dn2-quick-shop [data-qs-options] > div{gap:10px 6px!important;margin:0!important}
#dn2-quick-shop .dn2-qs__dot{width:46px!important;height:46px!important;border-radius:50%!important;border:2px solid transparent!important;background-clip:padding-box!important;padding:3px!important;box-shadow:none!important;transition:border-color .15s}
#dn2-quick-shop .dn2-qs__dot.is-on{border-color:#46546e!important}
#dn2-quick-shop .dn2-qs__chip{min-height:40px!important;min-width:44px!important;height:auto!important;padding:0 12px!important;border-radius:12px!important;border:1.5px solid #d4dbe6!important;background:#fdfbf7!important;color:#46546e!important;font-family:Nunito,sans-serif!important;font-size:13px!important;font-weight:700!important;letter-spacing:0!important;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}
#dn2-quick-shop .dn2-qs__chip:hover{border-color:#8ca2c4!important}
#dn2-quick-shop .dn2-qs__chip.is-on{background:#46546e!important;border:0!important;color:#f8f4ec!important;font-weight:900!important;outline:1px dashed rgba(248,244,236,.5);outline-offset:-4px}
#dn2-quick-shop .dn2-qs__chip[disabled]{position:relative;border:1.5px dashed var(--line)!important;background:transparent!important;color:#aab4c6!important;opacity:1!important;overflow:hidden;cursor:not-allowed}
#dn2-quick-shop .dn2-qs__chip[disabled]::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 45%,var(--line) 45%,var(--line) 55%,transparent 55%);pointer-events:none}
/* Size guide = right end of the SIZE title row (dn4 quick template: flex space-between); dn5-shell.js moves the link into that
   engine row, the parking box stays hidden. The title row's inherited tracking / uppercase are reset on the link. */
#dn2-quick-shop .dn5s-qs__sizehead{display:none}
#dn2-quick-shop .dn5s-qs__guide{float:right;margin-left:10px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;color:#5f7397;text-decoration:underline;text-underline-offset:3px}
#dn2-quick-shop .dn5s-qs__foot{padding:12px 18px 22px}
#dn2-quick-shop .dn2-qs__atc{width:100%;height:54px!important;margin:0!important;border:0!important;border-radius:16px!important;background-color:#46546e!important;background-image:var(--dots1)!important;background-size:4px 4px!important;color:#f8f4ec!important;outline:1.5px dashed rgba(248,244,236,.45);outline-offset:-6px;display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif!important;font-size:14px!important;font-weight:900!important;letter-spacing:.06em!important;text-transform:uppercase;box-shadow:0 8px 18px rgba(70,84,110,.22);transition:transform .12s,background-color .15s}
#dn2-quick-shop .dn2-qs__atc:hover{background-color:var(--nightHov)!important}
#dn2-quick-shop .dn2-qs__atc:active{transform:scale(.98)}
/* right after adding (dn5-shell.js adds .dn5s-done) = the proto's gold ✓ ADDED TO YOUR BAG */
#dn2-quick-shop .dn2-qs__atc.dn5s-done{background-color:var(--star)!important;background-image:var(--dotsG)!important;color:var(--starInk)!important;outline-color:rgba(62,58,42,.4);box-shadow:none}

/* §8b (pushing back dn2-quick-shop-image-first-*.css trimming of Quick View) was removed as a whole:
   the dn5 layout no longer loads that CSS, the eyebrow/thumbnail row/head layout are normal, nothing to fight.
   The image object-fit:cover comes from the inline style on the snippet's <img>. */

/* ── 9 · footer ───────────────────────────────────────────────────────────── */
/* phone = proto lines 561-583: the terry box is the flex column itself; desktop-only wrappers are display:contents */
.dn5s-ft{position:relative;margin-top:var(--dn5s-ft-gap,36px)}
.dn5s-ft .dn5s-scallop--up{position:absolute;left:0;right:0;top:-7px;height:7px}
/* phone values = dn4 footer (dn4-app-v13 scroll template, footRef block): two-layer dots, 30px top padding */
.dn5s-ft__box{color:var(--milk);padding:30px 20px 120px;display:flex;flex-direction:column;gap:22px;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.11) .9px,transparent 1.4px),radial-gradient(circle at 3px 3px,rgba(255,255,255,.06) 1.6px,transparent 2.4px);background-size:4px 4px,7px 7px;background-position:0% 0%}
.dn5s-ft__in,.dn5s-ft__top,.dn5s-ft__brandcol,.dn5s-ft__nform{display:contents}
.dn5s-ft__brand{display:flex;flex-direction:column;gap:10px}
.dn5s-ft__brand .dn5s-logo{width:96px}
.dn5s-ft__brand .dn5s-logo--text{width:auto;align-self:flex-start;color:var(--milk)}
.dn5s-ft__tag{font-size:13px;line-height:1.6;color:var(--foot);text-wrap:pretty}
.dn5s-ft__news{display:flex;flex-direction:column;gap:10px}
.dn5s-ft__news .dn5s-ft__lab{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--foot2)}
@media (max-width:989px){body[data-template="index"] .dn5s-ft__news .dn5s-ft__lab{font-size:10.5px}}
.dn5s-ft__form{display:flex;gap:8px}
.dn5s-ft__form input[type=email]{flex:1;min-width:0;box-sizing:content-box;height:50px;border-radius:14px;border:1.5px solid rgba(248,244,236,.3);background:rgba(248,244,236,.08);display:flex;align-items:center;padding:0 14px;font-family:Nunito,sans-serif;font-size:14px;font-weight:400;color:var(--foot2);outline:none}
.dn5s-ft__form input[type=email]::placeholder{color:var(--foot2)}
.dn5s-ft__join{height:50px;padding:0 16px;border-radius:12px;background-color:var(--star);background-image:var(--dotsG);background-size:4px 4px;color:var(--starInk);outline:1.5px dashed rgba(62,58,42,.4);outline-offset:-5px;display:flex;align-items:center;font-size:12px;font-weight:900;letter-spacing:.08em;transition:transform .12s}
.dn5s-ft__join:active{transform:scale(.96)}
.dn5s-ft__ok{min-height:50px;border-radius:14px;background:rgba(248,244,236,.1);outline:1.5px dashed rgba(248,244,236,.35);outline-offset:-5px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px;font-weight:800}
.dn5s-ft__ok b{color:var(--star);font-weight:900}
.dn5s-ft__cols--m{display:flex;flex-direction:column;border-top:1.5px dashed rgba(248,244,236,.25)}
.dn5s-ft__acc{border-bottom:1.5px dashed rgba(248,244,236,.25)}
.dn5s-ft__ch{height:56px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.dn5s-ft__ch .dn5s-ft__lab{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--milk)}
.dn5s-ft__sign{width:28px;height:28px;border-radius:8px;background:rgba(248,244,236,.12);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--star)}
.dn5s-ft__acc[open] .dn5s-ft__sign{font-size:0}
.dn5s-ft__acc[open] .dn5s-ft__sign::after{content:"\2212";font-size:16px}
.dn5s-ft__links{display:flex;flex-direction:column;padding:0 0 12px}
.dn5s-ft__link{min-height:40px;display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--milk)}
.dn5s-ft__link:hover{opacity:.75}
.dn5s-ft__bear{display:flex;align-items:center;gap:10px}
.dn5s-ft__bear img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.dn5s-ft__bear p{font-family:'Young Serif',serif;font-size:16px}
.dn5s-ft__bot{display:flex;flex-direction:column;align-items:center;gap:14px}
.dn5s-ft__soc{display:flex;gap:8px}
.dn5s-ft__soc:empty{display:none}
.dn5s-ft__soc a{width:44px;height:44px;border-radius:12px;background:rgba(248,244,236,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;transition:background-color .15s}
.dn5s-ft__soc a:hover{background-color:rgba(248,244,236,.2)}
.dn5s-ft__payw{display:contents}
.dn5s-ft__pays{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dn5s-ft__pays span{height:26px;padding:0 9px;border-radius:6px;background:rgba(248,244,236,.1);border:1px solid rgba(248,244,236,.22);display:flex;align-items:center;font-size:10px;font-weight:900;color:var(--milk)}
.dn5s-ft__loc{box-sizing:content-box;height:36px;padding:0 14px;border-radius:11px;border:1.5px solid rgba(248,244,236,.3);display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;transition:border-color .15s}
.dn5s-ft__loc:hover{border-color:rgba(248,244,236,.7)}
.dn5s-ft__copy{font-size:11px;color:var(--foot2)}
.dn5s-ft__cols--d,.dn5s-ft__bear--d,.dn5s-ft__bear--m,.dn5s-ft__loc--d{display:none}  /* dn4 phone footer has no sign-off row */

/* ═══════════════════════════════════════════════════════════════════════════
   desktop ≥990px — baseline 1440×900 (proto Home Desktop)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:990px){
  /* announcement: 40px, three cells (arrow-copy-arrow, gap 28), 11.5px text */
  /* desktop (proto line 32): type sits on the bar, gap 28; copy and arrows inherit */
  .dn5s-ann__bar{height:40px;gap:28px;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--dn5s-ann-ink,var(--milk));text-transform:uppercase}
  .dn5s-ann__msg,.dn5s-ann__mqwrap{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;text-align:center}
  .dn5s-ann__dash{left:16px;right:16px}
  .dn5s-ann__arrow{display:block;cursor:pointer;padding:0 8px;font-size:14px;transition:opacity .15s}
  .dn5s-ann__arrow:hover{opacity:.7}
  .dn5s-ann__msg{min-width:360px}

  /* header: 76px, three-column grid, 48px padding, horizontal nav in the middle */
  /* desktop (proto line 40): the sticky layer carries bg/blur/line, the grid inside is plain */
  .dn5s-hd{position:sticky;top:0;background:rgba(248,244,236,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1.5px dashed var(--line)}
  .dn5s-hd__in{position:static;z-index:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;padding:6px 48px 0;height:76px;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;max-width:var(--dn5s-hd-max,none);margin:0 auto}
  .dn5s-hd__l{display:none}
  .dn5s-hd .dn5s-logo{width:var(--dn5s-logo-w,112px)}
  .dn5s-hd .dn5s-logo--text{width:auto;font-size:26px}
  .dn5s-hd__nav{display:flex;align-items:center;justify-content:center;height:100%;min-width:0}
  .dn5s-hd__item{position:relative;height:100%;display:flex;align-items:center}
  .dn5s-hd__link{height:40px;padding:0 10px;border-radius:12px;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--night);white-space:nowrap;transition:background-color .15s}
  .dn5s-hd__item:hover > .dn5s-hd__link,.dn5s-hd__item:focus-within > .dn5s-hd__link{background:var(--hov)}
  .dn5s-hd__tag{background:var(--night);color:var(--milk);border-radius:3px;outline:1px dashed rgba(248,244,236,.55);outline-offset:-3px;font-weight:900;padding:2px 5px;font-size:8px;letter-spacing:.12em}
  .dn5s-hd__caret{font-size:10px;color:var(--sleepy)}
  .dn5s-hd__dd{position:absolute;top:100%;left:0;margin-top:-6px;min-width:220px;max-width:92vw;padding:8px;border-radius:18px;background:var(--card);outline:1.5px dashed #c5cedc;outline-offset:-6px;box-shadow:0 20px 40px rgba(40,48,66,.16);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s,transform .18s,visibility .18s;transition-delay:.3s}
  .dn5s-hd__item:hover > .dn5s-hd__dd,.dn5s-hd__item:focus-within > .dn5s-hd__dd{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
  /* the 6px gap between a nav item and its dropdown on hover: bridged with a transparent strip */
  .dn5s-hd__item.has-kids::after{content:"";position:absolute;top:100%;left:0;width:240px;max-width:92vw;height:12px}
  .dn5s-hd__ddrow{min-height:42px;padding:0 14px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:800;color:var(--night);transition:background-color .15s}
  .dn5s-hd__ddrow:hover{background:var(--hov)}
  .dn5s-hd__ddrow i{color:var(--sleepy);font-style:normal}
  .dn5s-hd__ddsub{display:flex;flex-direction:column;padding-left:12px}
  .dn5s-hd__ddsub .dn5s-hd__ddrow{min-height:36px;font-size:13px;font-weight:700;color:var(--mut)}
  .dn5s-hd__r{gap:4px}
  .dn5s-hd__r .dn5s-icon{width:40px;height:40px;border-radius:12px}
  .dn5s-hd__acct{display:flex}
  .dn5s-hd__r .dn5s-loc{height:40px;padding:0 10px;font-size:12px;gap:6px;white-space:nowrap}
  .dn5s-hd__r [data-dn5s-search-open] svg{width:16px;height:16px}
  .dn5s-bag{height:40px;gap:8px;padding:0 6px 0 14px;border-radius:12px;font-size:13px;background-image:var(--dots1);background-size:4px 4px}
  .dn5s-bag__n,.dn5s-bag__n.is-zero{min-width:26px;height:26px;padding:0 6px;border-radius:8px;font-size:12px}

  /* sheets: region centred modal 520, cart right 460, QV centred 920 two columns, search drops from the top */
  .dn5s-panel--loc{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:520px;max-width:calc(100vw - 48px);max-height:780px;border-radius:28px;outline-offset:-8px;box-shadow:0 30px 60px rgba(40,48,66,.3);animation:dn5s-pop .3s var(--ease) both}
  .dn5s-panel--loc .dn5s-grab{display:none}
  .dn5s-loc__head{padding:24px 26px 12px}
  .dn5s-loc__head .dn5s-title{font-size:26px}
  .dn5s-tabs{margin:0 26px}
  .dn5s-loc__list{padding:12px 26px}
  .dn5s-loc__foot{padding:12px 26px 24px}

  .dn5s-panel--nav{display:none}
  /* desktop (proto 274-293): panel (block) > centred box > [top, trending, label, grid]; .dn5s-srch__body is display:contents */
  .dn5s-panel--srch{display:block;flex-direction:row;max-height:calc(100% - 40px);border-radius:0 0 28px 28px}
  .dn5s-srch__in{max-width:1120px;margin:0 auto;padding:24px 48px 32px;display:flex;flex-direction:column;gap:18px}
  .dn5s-srch__top{padding:0;gap:10px}
  .dn5s-srch__box{height:56px;border-radius:16px;gap:10px;padding:0 16px}
  .dn5s-srch__box input{font-size:17px}
  .dn5s-srch__x{width:52px;height:52px;border-radius:14px}
  .dn5s-srch__body{display:contents}
  .dn5s-srch__body > .dn5s-lab{font-size:10.5px}
  .dn5s-srch__trend{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}
  .dn5s-srch__trend .dn5s-lab{font-size:10.5px;margin-right:4px}
  .dn5s-srch__tags{display:contents}
  .dn5s-tag{min-height:0;height:34px;padding:0 14px}
  .dn5s-srch__rows{display:grid;flex-direction:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .dn5s-srow{padding:10px;border:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);border-radius:16px;background:var(--card)}
  .dn5s-srow__img{width:52px;height:64px}
  .dn5s-srow__n{line-height:1.25}
  .dn5s-srch__none{font-size:18px;color:var(--link)}

  /* cart: right-side 460 drawer */
  #cart-drawer.cart-drawer{
    left:auto!important;right:0!important;top:0!important;bottom:0!important;
    width:460px!important;max-width:92vw!important;height:auto!important;
    border-radius:28px 0 0 28px!important;outline:1.5px dashed rgba(70,84,110,.22);outline-offset:-8px;
    box-shadow:-20px 0 40px rgba(40,48,66,.2)!important;
    transform:translateX(100%)!important;transition:transform .4s var(--ease)!important;
  }
  #cart-drawer.cart-drawer.is-open{transform:translateX(0)!important}
  #cart-drawer .dn5s-grab{display:none}
  #cart-drawer .cart-drawer__header{padding:20px 18px 14px 24px!important}
  #cart-drawer .dn5s-cart__h .dn5s-title{font-size:26px}
  /* desktop = Home 2c v2 lines 315-371 */
  #cart-drawer .shipping-bar{margin:12px 16px 2px!important;padding:11px 14px!important}
  #cart-drawer #cart-empty{padding:34px 24px 20px!important}
  #cart-drawer #cart-empty .dn5s-empty__t{font-size:19px}
  #cart-drawer #cart-empty .dn5s-empty__b{display:flex!important}
  #cart-drawer #cart-empty .dn5s-empty__img:not([hidden]){display:block!important}
  #cart-drawer .cart-drawer__footer{padding:12px 18px 20px!important}
  #cart-drawer .btn-checkout{height:52px!important}

  /* Quick View desktop = proto lines 373-414: centred 920 grid [400px media column | info column (gap 18, padding-top 4)].
     The phone-order nodes re-flow on the grid: media spans the left column; head / options / ATC stack on the right. */
  #dn2-quick-shop .dn2-sheet{
    left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
    width:920px!important;max-width:calc(100vw - 48px)!important;max-height:840px!important;
    border-radius:28px!important;padding:24px!important;box-shadow:0 30px 60px rgba(40,48,70,.3)!important;
    display:grid!important;grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:28px;row-gap:18px;
    flex-direction:row!important;transform:translate(-50%,-50%)!important;animation:dn5s-pop .3s var(--ease) both!important;
  }
  #dn2-quick-shop .dn2-sheet__handle-row{display:none!important}
  #dn2-quick-shop .dn5s-qs__main{display:contents}
  #dn2-quick-shop .dn2-sheet__head{grid-column:2;grid-row:1;padding-top:4px!important}
  #dn2-quick-shop .dn5s-qs__title{font-size:28px}
  #dn2-quick-shop [data-qs-price]{font-size:20px}
  #dn2-quick-shop .dn2-sheet__media{grid-column:1;grid-row:1 / span 4;display:flex;flex-direction:column;gap:10px;overflow:visible}
  #dn2-quick-shop .dn2-qs__stage{height:auto;aspect-ratio:4/5!important;background:#efe9dc!important}
  #dn2-quick-shop .dn2-qs__chip{min-height:42px!important;min-width:48px!important}
  #dn2-quick-shop .dn2-qs__atc{height:56px!important}
  #dn2-quick-shop .dn2-sheet{top:50%!important}
  #dn2-quick-shop .dn2-sheet__body{grid-column:2;grid-row:2 / span 2;display:flex;flex-direction:column;gap:18px}
  #dn2-quick-shop .dn5s-qs__foot{grid-column:2;grid-row:4;align-self:end;padding:0}
  #dn2-quick-shop [data-qs-options] > div{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))}
  #dn2-quick-shop [data-qs-options] > div:has(.dn2-qs__chip){display:flex!important;flex-wrap:wrap}

  /* footer = proto lines 232-260: terry box > padded column > [4-col grid, bottom row] */
  .dn5s-ft{margin-top:var(--dn5s-ft-gap-d,96px)}
  .dn5s-ft__box{padding:0;display:block;flex-direction:row;gap:normal;background-image:var(--terry);background-size:var(--terry-size);background-position:var(--terry-pos)}
  .dn5s-ft__in{padding:64px 48px 40px;display:flex;flex-direction:column;gap:48px}
  .dn5s-ft__top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}
  .dn5s-ft__brandcol{display:flex;flex-direction:column;gap:18px}
  .dn5s-ft__brand,.dn5s-ft__news{display:contents}
  .dn5s-ft__brand .dn5s-logo{width:120px}
  .dn5s-ft__brand .dn5s-logo--text{width:auto}
  .dn5s-ft__tag{font-size:14px;max-width:380px}
  .dn5s-ft__news .dn5s-ft__lab{font-size:11px;margin-top:6px}
  .dn5s-ft__form,.dn5s-ft__ok{max-width:420px}
  .dn5s-ft__form input[type=email]{box-sizing:border-box;display:block;align-items:normal;padding:0 16px;font-size:16px;font-weight:700;color:var(--milk)}
  .dn5s-ft__join{padding:0 20px}
  .dn5s-ft__bear--d{display:flex;gap:12px;margin-top:6px}
  .dn5s-ft__bear--m,.dn5s-ft__cols--m,.dn5s-ft__loc--m{display:none}
  .dn5s-ft__bear img{width:44px;height:44px}
  .dn5s-ft__bear p{font-size:18px}
  .dn5s-ft__cols--d{display:contents}
  .dn5s-ft__col{display:flex;flex-direction:column;gap:6px}
  .dn5s-ft__col .dn5s-ft__lab{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--foot2);margin-bottom:8px}
  .dn5s-ft__col .dn5s-ft__link{min-height:32px;color:inherit}
  .dn5s-ft__bot{flex-direction:row;align-items:center;gap:16px;padding-top:24px;border-top:1.5px dashed rgba(248,244,236,.25)}
  .dn5s-ft__soc a{width:40px;height:40px}
  .dn5s-ft__loc--d{display:flex;box-sizing:border-box;height:40px;font-size:12.5px}
  .dn5s-ft__payw{display:block;margin-left:auto}
  .dn5s-ft__pays{justify-content:normal}
  .dn5s-ft__pays span{height:28px}  /* proto 26px content-box + 1px border each side */
  .dn5s-ft__copy{font-size:12px}
}
}

/* Desktop footer columns are plain blocks (.dn5s-ft__cols--d), phones get the <details> copy (.dn5s-ft__cols--m); no JS forces open state. */

/* ═══ Cart line template #cart-line-tpl + footer breakdown (099 wave-2 m2e, ENGINE-CONTRACT §6.3, SHELL-CONTRACT §1)
   Row = proto Home 2c v2 lines 330-340 (same on phone 663-673); "Change colour / size" = PDP 2c Desktop lines 570-586;
   footer = Home 2c v2 lines 358-370. Every amount is written by the engine. ═══ */
#cart-drawer .dn5s-line__img{position:relative;flex:none}
#cart-drawer .dn5s-line__img .cart-item__image{display:block}
#cart-drawer .dn5s-line__tag{display:none;position:absolute;left:-4px;top:-6px;z-index:1;background-color:#e6c64f;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.3) .9px,transparent 1.4px);background-size:4px 4px;color:#3e3a2a;outline:1px dashed rgba(62,58,42,.4);outline-offset:-3px;border-radius:3px;padding:2px 6px;font-size:8.5px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
#cart-drawer .cart-item[data-cart-gift] .dn5s-line__tag{display:block}
#cart-drawer .dn5s-line__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#cart-drawer .dn5s-line__top{display:flex;justify-content:space-between;gap:8px}
#cart-drawer .dn5s-line__name{text-decoration:none}
#cart-drawer .dn5s-line__rm{flex:none;align-self:flex-start;background:none;border:0;padding:0;font-family:Nunito,sans-serif;font-size:11px;font-weight:700;color:#7f8ea8;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#cart-drawer .dn5s-line .cart-item__variant{margin-top:0!important;font-family:Nunito,sans-serif!important;font-size:12px!important;font-weight:400!important;line-height:normal!important;color:#6a7690!important}
#cart-drawer .dn5s-line__bot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
#cart-drawer .dn5s-line .cart-item__qty-value{min-width:18px;width:auto;padding:0;margin:0;font-family:Nunito,sans-serif!important;font-size:13px!important;font-weight:900!important;line-height:normal!important;color:#46546e!important}
#cart-drawer .dn5s-line .cart-item__price,#cart-drawer .dn5s-line .cart-item__compare{font-family:Nunito,sans-serif!important;line-height:normal!important}
#cart-drawer .dn5s-line__qty{display:flex;align-items:center;height:32px;border:1.5px solid #d4dbe6;border-radius:10px;background:#fdfbf7;box-sizing:border-box}
#cart-drawer .dn5s-line__qbtn{width:32px;height:100%;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;font-family:Nunito,sans-serif;font-weight:900;color:#46546e;cursor:pointer}
#cart-drawer .dn5s-line__note{display:none;font-size:11px;font-weight:800;color:#6a7690}
#cart-drawer .cart-item[data-cart-gift] .dn5s-line__qty{display:none}
#cart-drawer .cart-item[data-cart-gift="spin"] .dn5s-line__note{display:block}
#cart-drawer .dn5s-line .cart-item__prices{margin-left:0!important}
#cart-drawer .dn5s-line__err:empty{display:none}
#cart-drawer .dn5s-line .cart-item__error{margin:8px 0 0;font-size:12px;font-weight:800;color:#a2513f}
#cart-drawer .dn5s-line__edit{display:flex;flex-direction:column}
#cart-drawer .dn5s-line__edit[hidden]{display:none}
#cart-drawer .dn5s-line__editbtn{align-self:flex-start;display:flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1.5px solid #d4dbe6;border-radius:9px;background:#fdfbf7;font-family:Nunito,sans-serif;font-size:11.5px;font-weight:800;color:#46546e;cursor:pointer;box-sizing:border-box}
#cart-drawer .dn5s-line__editbtn:hover{border-color:#8ca2c4}
#cart-drawer .dn5s-line__chev{display:inline-block;transition:transform .2s}
#cart-drawer .dn5s-line__edit.is-open .dn5s-line__chev{transform:rotate(180deg)}
#cart-drawer .dn5s-line__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1)}
#cart-drawer .dn5s-line__edit.is-open .dn5s-line__panel{grid-template-rows:1fr}
#cart-drawer .dn5s-line__panelin{overflow:hidden}
#cart-drawer .dn5s-line__opts{margin-top:4px;padding:10px;border-radius:14px;background-color:#e9eef5;background-image:var(--dots2);background-size:4px 4px,4px 4px;background-position:0 0,2px 2px;display:flex;flex-direction:column;gap:8px}
#cart-drawer .cart-edit__group{display:flex;flex-direction:column;gap:8px}
#cart-drawer .cart-edit__label{font-size:10px;font-weight:900;letter-spacing:.14em;color:#6a7690;text-transform:uppercase}
#cart-drawer .cart-edit__values{display:flex;flex-wrap:wrap;gap:6px}
#cart-drawer .cart-edit__value{min-height:32px;padding:0 10px;border-radius:10px;border:1.5px solid #d4dbe6;background:#fdfbf7;display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;color:#46546e;cursor:pointer;box-sizing:border-box}
#cart-drawer .cart-edit__value:hover:not(:disabled){border-color:#8ca2c4}
#cart-drawer .cart-edit__group+.cart-edit__group .cart-edit__value{min-width:40px}
#cart-drawer .cart-edit__value.is-selected{border:0;background:#46546e;color:#f8f4ec;outline:1px dashed rgba(248,244,236,.5);outline-offset:-4px;font-weight:900;cursor:default}
#cart-drawer .cart-edit__value.is-out{border-style:dashed;background:transparent;color:#aab4c6;text-decoration:line-through;cursor:default}
/* footer: SAVE chip + code label + struck-through original, breakdown toggle and panel */
#cart-drawer [data-cart-sum-if][hidden]{display:none!important}
#cart-drawer .dn5s-cart__chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#cart-drawer .dn5s-cart__code{border:1.5px dashed #b4c0d4;border-radius:4px;padding:2px 6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#46546e}
#cart-drawer .dn5s-cart__was{font-size:12px;color:#7f8ea8;text-decoration:line-through;font-variant-numeric:tabular-nums}
#cart-drawer .dn5s-cart__tax{cursor:pointer}
#cart-drawer .dn5s-cart__bl-o{display:none}
#cart-drawer .dn5s-cart__tax.is-open .dn5s-cart__bl-c{display:none}
#cart-drawer .dn5s-cart__tax.is-open .dn5s-cart__bl-o{display:block}
#cart-drawer .dn5s-cart__breakg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
#cart-drawer .dn5s-cart__breakg.is-open{grid-template-rows:1fr}
#cart-drawer .dn5s-cart__breakin{overflow:hidden}
#cart-drawer .dn5s-cart__breakbox{display:flex;flex-direction:column;gap:4px;padding:6px 10px;border-radius:12px;background-color:#e9eef5;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.75) .9px,transparent 1.4px),radial-gradient(circle at 1px 1px,rgba(70,84,110,.10) .9px,transparent 1.4px);background-size:4px 4px,4px 4px;background-position:0 0,2px 2px;font-size:12px;font-weight:700;color:#46546e;font-variant-numeric:tabular-nums}
#cart-drawer .dn5s-cart__breakbox>div{display:flex;justify-content:space-between}
#cart-drawer .dn5s-cart__youpay{font-weight:900;color:#3c4a66;border-top:1px dashed rgba(70,84,110,.25);padding-top:4px}
#cart-drawer .dn5s-line__body .dn2-disc-chip{align-self:flex-start}

/* desktop overrides for the line template / recommendation card / footer chip above (Home 2c v2 lines 330-353, 358-361);
   they sit after those rules so equal specificity resolves to the desktop values */
#cart-drawer #cart-savings[style*="flex"]{display:block!important}
@media (min-width:990px){
  #cart-drawer .dn5s-line__body{gap:5px}
  #cart-drawer .dn5s-line .cart-item__variant{line-height:1.4!important}
  #cart-drawer #cart-recs-track > .dn5s-rc{width:96px!important}
  #cart-drawer .dn5s-rc__img{height:118px}
}

/* 099 2f · bundle percentage tokens ({pct_2} …) stay invisible until the engine has filled them (ENGINE-CONTRACT §6.7) */
[data-bd-pct-tpl]:not([data-bd-pct-done]){visibility:hidden}

/* 099 2f · Quick View colour hook (ENGINE-CONTRACT §6.6). The engine clones #qv-color-tpl per colour and writes data-qv-* on the
   sheet; dn5-shell.js places the chip / tag / stock line. Values = dn4 quick template (390) = proto 377-397 (1440). */
#dn2-quick-shop [data-qs-options] > div:has(> [data-qv-colors]){display:block!important}
#dn2-quick-shop [data-qv-colors]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 6px}
#dn2-quick-shop .dn5s-qs__col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
#dn2-quick-shop .dn5s-qs__col[data-qv-out]{cursor:not-allowed}
#dn2-quick-shop .dn5s-qs__colring{width:46px;height:46px;border-radius:50%;box-sizing:border-box;border:2px solid transparent;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
#dn2-quick-shop .dn5s-qs__col.is-on .dn5s-qs__colring{border-color:#46546e}
#dn2-quick-shop .dn5s-qs__col[data-qv-out]:not(.is-on) .dn5s-qs__colring{border-style:dashed;border-color:#d4dbe6}
#dn2-quick-shop .dn5s-qs__coldot{position:relative;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#dn2-quick-shop .dn5s-qs__col[data-qv-out] .dn5s-qs__coldot{opacity:.4}
#dn2-quick-shop .dn5s-qs__col[data-qv-out] .dn5s-qs__coldot::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;background:#7f8ea8;transform:rotate(-45deg)}
#dn2-quick-shop .dn5s-qs__colname{font-size:10px;font-weight:700;color:#6a7690;text-align:center;line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dn2-quick-shop .dn5s-qs__col.is-on .dn5s-qs__colname{font-weight:900;color:#3c4a66}
#dn2-quick-shop .dn5s-qs__col[data-qv-out]:not(.is-on) .dn5s-qs__colname{color:#aab4c6}
#dn2-quick-shop .dn5s-qs__stock{float:right;margin-left:10px;font-family:Nunito,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:#7f8ea8}
#dn2-quick-shop .dn5s-qs__off{font-size:10px;font-weight:900;color:#46546e;background:#e3e9f2;border-radius:5px;padding:1px 5px}
#dn2-quick-shop .dn5s-qs__off[hidden],#dn2-quick-shop .dn5s-qs__cchip[hidden]{display:none}
#dn2-quick-shop .dn5s-qs__cchip{position:absolute;z-index:2;left:14px;top:14px;display:flex;align-items:center;gap:6px;background:rgba(248,244,236,.94);border-radius:999px;padding:4px 10px 4px 5px;font-size:11px;font-weight:900;color:#46546e;pointer-events:none}
#dn2-quick-shop .dn5s-qs__cdot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}