/* Diamond Print Shops: storefront design system v1.0
   Draft 2026-10-20 for owner sign-off. Replaces v0.3 (../Design-System/) once approved.
   Decisions: office/00-Project/DECISIONS.md, 2026-10-20 rows (redesign rounds 1 and 2).
   The :root block pastes into @theme in app/src/app/(frontend)/globals.css when approved.

   World in one line: Lululemon calm (white, big light type, photography first),
   one loud sunset-orange accent, product photos on their light grey studio ground, ink pills.
   Light only. Almost no motion until roadmap 24 (colour changes on hover and press only). */

/* =====================================================================
   TOKENS
   ===================================================================== */
:root{
  /* colour: brand */
  --color-accent:#FF6B1A;         /* sunset orange. Main button, price highlights, New badge, one band per page. Ink text only (6.47:1) */
  --color-accent-hover:#FF8240;   /* ink on it 7.48:1 */
  --color-accent-press:#F0600F;   /* ink on it 5.60:1 */
  --color-accent-text:#B84300;    /* orange as text: 5.47:1 on white, 4.92:1 on band. Never #FF6B1A as text */
  --color-ink:#131416;            /* text, secondary button, footer, focus ring */
  --color-ink-hover:#2A2C30;

  /* colour: grounds and lines (cool, to keep the orange clean) */
  --color-surface:#FFFFFF;        /* page ground */
  --color-band:#F2F3F4;           /* the occasional band, image wells, field fill on hover */
  --color-line:#E3E5E8;           /* decorative hairlines, card edges (never the only sign of state) */
  --color-control-line:#7B808A;   /* resting edge of fields, checkboxes, radios: 3.96:1 on white, 3.57:1 on band */
  --color-text:#131416;           /* 18.43:1 on white, 16.59:1 on band */
  --color-text-2:#4E535B;         /* secondary text: 7.74 white, 6.97 band, 5.92 photo grey */
  --color-text-3:#656A73;         /* meta, placeholders: 5.44 white, 4.89 band. Nudged from #6B7079 (4.48 on band) */
  --color-disabled-bg:#EEF0F2;
  --color-disabled-fg:#9CA0A7;    /* disabled controls only (exempt from contrast) */
  --color-on-ink:#FFFFFF;         /* 18.43:1 on ink */
  --color-on-ink-2:rgb(255 255 255 / .72);
  --color-on-ink-line:rgb(255 255 255 / .16);
  --color-scrim:rgb(19 20 22 / .48);       /* dims the page behind a dialog or sheet (rev 14) */
  --color-scrim-soft:rgb(19 20 22 / .24);  /* dims the page behind an open mega menu (rev 13) */

  /* colour: state (icon + word, never colour alone) */
  --color-success:#13703F;  --color-success-tint:#E5F4EC;  /* 5.41 on tint. Nudged from #17804A (4.38) */
  --color-danger:#C42B1C;   --color-danger-tint:#FCE8E6;   /* 4.81 on tint */
  --color-warning:#8A4510;  --color-warning-tint:#FBEFE6;  /* 6.32 on tint */

  /* colour: badge palette (owner 2026-10-21). Badges, and (rev 11) promo theme grounds (.theme-*,
     not peach); never buttons, text or icons. Staff pick one when they make a badge or a promo in
     /office. Dark grounds take white labels, light grounds ink. New stays on the accent and is not in this list */
  --badge-ink:#131416;     /* white 18.43 */
  --badge-forest:#11704F;  /* white 6.08  · Popular */
  --badge-ocean:#1F5FAD;   /* white 6.37 */
  --badge-cherry:#B02A37;  /* white 6.50  · e.g. Low in stock */
  --badge-plum:#5B2A86;    /* white 9.90 */
  --badge-mint:#C9EBD9;    /* ink 14.37   · e.g. Eco friendly */
  --badge-sky:#BFE3F5;     /* ink 13.62   · Bali only */
  --badge-lilac:#DCD3F5;   /* ink 12.88 */
  --badge-blush:#FAD4DC;   /* ink 13.62 */
  --badge-peach:#FFD9C4;   /* ink 14.02 */

  /* colour: the light grey studio ground product photos are shot on (owner 2026-10-20: no cutouts, no colour tiles).
     Ink on it 14.09:1. White-ground photos multiply onto it so every product sits on the same grey */
  --color-photo:#E1E1E1;

  /* type */
  --font-display:"Anton","Arial Narrow",Impact,sans-serif;   /* headlines only: condensed capitals, one weight (400). Owner pick 2026-10-21 */
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;  /* everything else, H4 included, tabular figures */
  --text-display:clamp(56px,11vw,128px); /* hero only. Anton caps, leading .92 */
  --text-h1:clamp(44px,7vw,84px);       /* page titles. Anton caps */
  --text-h2:clamp(34px,4.6vw,56px);     /* section heads. Anton caps */
  --text-h3:clamp(24px,2.8vw,32px);     /* card group, rail heads. Anton caps */
  --text-h4:20px;                        /* card and step titles. Instrument Sans 600, sentence case (Anton is too loud this small) */
  --text-lead:18px;
  --text-base:16px;
  --text-sm:14px;                        /* UI: buttons, fields, nav, card meta */
  --text-xs:12px;                        /* legal, captions, badges */
  --leading-display:.92; --leading-tight:.95; --leading-snug:1.05; --leading-ui:1.4; --leading-body:1.6;

  /* space: 4px base */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-36:144px;
  --gutter:clamp(16px,4vw,40px);
  --container:1440px;             /* the box; content is 1360 inside the 40px gutter */
  --container-text:720px;         /* content width of reading pages (D3) */
  /* section padding by weight: connective, standard, pivotal (hero, the drop calculator) */
  --section-sm:clamp(48px,6vw,64px);
  --section-md:clamp(64px,8vw,96px);
  --section-lg:clamp(80px,11vw,144px);

  /* shape */
  --radius-sm:8px;      /* fields, small thumbnails, size cells */
  --radius-md:12px;     /* cards, product tiles, images, notices */
  --radius-lg:20px;     /* the floating nav bar, hero media, bands set inside the container */
  --radius-full:999px;  /* every button, badge, tab, swatch, stepper */

  /* depth: flat page, one shadow for what floats */
  --shadow-float:0 18px 40px -12px rgb(19 20 22 / .22), 0 2px 6px rgb(19 20 22 / .06);
  --shadow-bar:0 8px 24px -10px rgb(19 20 22 / .20);

  /* motion: colour only for now (roadmap 24 adds the rest) */
  --dur-fast:120ms;
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* focus: ink ring with a white gap; on ink or orange grounds the ring turns white */
  --focus-ring:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ink);
  --focus-ring-on-dark:0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-on-ink);
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--color-control-line) var(--color-band)}
body{margin:0;background:var(--color-surface);color:var(--color-text);font:400 var(--text-base)/var(--leading-body) var(--font-sans);font-feature-settings:"tnum";-webkit-font-smoothing:antialiased}
::selection{background:var(--color-accent);color:var(--color-ink)}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
input,select,button,textarea{font:inherit;color:inherit;caret-color:var(--color-accent-text)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.band{background:var(--color-band)}
.container-text{max-width:calc(var(--container-text) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* type */
.t-display,.t-h1,.t-h2,.t-h3,.t-h4{font-family:var(--font-display);font-weight:400;text-transform:uppercase;margin:0;text-wrap:balance;color:var(--color-text)}
.t-display{font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:0}
.t-h1{font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:0}
.t-h2{font-size:var(--text-h2);line-height:var(--leading-tight);letter-spacing:.005em}
.t-h3{font-size:var(--text-h3);line-height:var(--leading-snug);letter-spacing:.01em}
.t-h4{font-family:var(--font-sans);font-size:var(--text-h4);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-transform:none}
/* Anton (.t-display, .t-h1 to .t-h3) is for promotion and attention: hero and marketing bands, headings that sell, the Why order with us panel, the credit join pitch.
   Pages people work in (cart, checkout, confirmation, quote, account, dialogs, kit box, FAQ) use these Instrument Sans headings, sentence case. Added rev 25, owner 2026-10-23. */
.t-ui-h1{font:600 clamp(28px,3.2cqw,36px)/1.15 var(--font-sans);letter-spacing:-.02em;text-transform:none;text-wrap:balance;margin:0;color:var(--color-text)}
.t-ui-h2{font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em;text-transform:none;margin:0;color:var(--color-text)}
.t-ui-h3{font:600 20px/1.25 var(--font-sans);letter-spacing:-.01em;text-transform:none;margin:0;color:var(--color-text)}
.t-lead{font-size:var(--text-lead);line-height:1.55;color:var(--color-text-2);max-width:60ch;margin:0}
.t-body{font-size:var(--text-base);max-width:68ch;margin:0}
.t-sm{font-size:var(--text-sm);line-height:var(--leading-ui)}
.t-xs{font-size:var(--text-xs);line-height:var(--leading-ui)}
.t-muted{color:var(--color-text-2)}
.t-meta{color:var(--color-text-3)}
.price{font-family:var(--font-sans);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-mark{background:var(--color-accent);color:var(--color-ink);border-radius:6px;padding:.05em .3em;box-decoration-break:clone}

/* icons: Lucide, 1.75 stroke, 15 / 18 / 22 */
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:15px;height:15px}
.i-lg{width:22px;height:22px}

/* =====================================================================
   BUTTONS: always pills. Primary = orange with ink text. Secondary = ink.
   ===================================================================== */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h);padding:0 calc(var(--h)*.46);border-radius:var(--radius-full);border:1px solid transparent;font:600 var(--text-sm)/1 var(--font-sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn-lg{--h:56px;font-size:var(--text-base)}
.btn-sm{--h:40px}
.btn-primary{background:var(--color-accent);color:var(--color-ink)}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-primary:active{background:var(--color-accent-press)}
.btn-secondary{background:var(--color-ink);color:var(--color-on-ink)}
.btn-secondary:hover{background:var(--color-ink-hover)}
.btn-outline{background:transparent;color:var(--color-ink);border-color:var(--color-ink)}
.btn-outline:hover{background:var(--color-band)}
.btn-on-photo{background:rgb(255 255 255 / .94);color:var(--color-ink)}
.btn-on-photo:hover{background:#fff}
.btn:disabled,.btn[aria-disabled=true]{background:var(--color-disabled-bg);color:var(--color-disabled-fg);border-color:transparent;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true] .spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent}
.btn:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-full)}
.on-dark .btn:focus-visible,.on-accent .btn:focus-visible,.on-photo .btn:focus-visible{box-shadow:var(--focus-ring-on-dark)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line)}
.link-arrow:hover{text-decoration-color:var(--color-ink)}

/* =====================================================================
   BADGES: pills, 12px
   ===================================================================== */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--radius-full);font:600 var(--text-xs)/1 var(--font-sans);white-space:nowrap}
.badge-new{background:var(--color-accent);color:var(--color-ink)}
.badge-ink{background:var(--color-ink);color:var(--color-on-ink)}
.badge-band{background:var(--color-band);color:var(--color-text)}
.badge-outline{background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-control-line)}
.badge-demo{background:var(--color-warning-tint);color:var(--color-warning)}
/* badge palette: one class per colour, chosen per badge in /office */
.badge-ink,.badge-forest,.badge-ocean,.badge-cherry,.badge-plum{color:var(--color-on-ink)}
.badge-mint,.badge-sky,.badge-lilac,.badge-blush,.badge-peach{color:var(--color-ink)}
.badge-forest{background:var(--badge-forest)}.badge-ocean{background:var(--badge-ocean)}.badge-cherry{background:var(--badge-cherry)}.badge-plum{background:var(--badge-plum)}
.badge-mint{background:var(--badge-mint)}.badge-sky{background:var(--badge-sky)}.badge-lilac{background:var(--badge-lilac)}.badge-blush{background:var(--badge-blush)}.badge-peach{background:var(--badge-peach)}
.badge .i{width:13px;height:13px}

/* =====================================================================
   HEADER: full width, sticky, every page (rev 3, 2026-10-21; replaces the floating bar)
   Phone: menu · logo · account · cart, big search underneath; categories live in the menu.
   Desktop (1100+): logo · all categories · big search · WhatsApp · currency · account ·
   favourites · cart · Build your drop; category row below. .is-condensed (scrolled past
   ~120px) hides the category row and shortens the top row, no animation until roadmap 24.
   ===================================================================== */
.site-head{position:sticky;top:0;z-index:40;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.sh-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu logo utils" "search search search";align-items:center;gap:var(--space-3) var(--space-2);padding:var(--space-2) var(--gutter) var(--space-3)}
.sh-menu{grid-area:menu}
.sh-logo{grid-area:logo;justify-self:center;display:flex}
.sh-logo img{height:32px;width:auto}
.sh-search{grid-area:search;display:flex;align-items:center;gap:10px;height:48px;padding:0 18px;border:1px solid var(--color-ink);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-3);cursor:text}
.sh-search:focus-within{box-shadow:inset 0 0 0 1px var(--color-ink)}  /* one thicker ink edge, no second ring */
.sh-search input{flex:1;min-width:0;border:0;background:transparent;font:400 var(--text-base)/1 var(--font-sans);color:var(--color-ink);outline:none}
.sh-search input::placeholder{color:var(--color-text-3)}
.sh-search input:focus-visible{box-shadow:none}  /* the bar shows the ring; no second box on the input */
/* Phone: the search icon opens the bar under the top row (owner, 2026-10-21) */
.sh-search-wrap{grid-area:search;position:relative;min-width:0}  /* the app wraps the bar to hang search suggestions under it */
@media (max-width:1099px){.site-head:not(.is-search-open) :is(.sh-search,.sh-search-wrap){display:none}.site-head:not(.is-search-open) .sh-row{row-gap:0}}
.sh-utils{grid-area:utils;display:flex;align-items:center;gap:2px}
.sh-util{position:relative;min-width:44px;justify-content:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-ink);font:500 var(--text-sm)/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.sh-util:hover{background:var(--color-band)}
.sh-cart .count{top:4px;right:2px}
.sh-wa{display:flex;align-items:center;gap:10px;color:var(--color-ink);text-decoration:none;padding:0 6px}
.sh-wa span{display:grid;gap:2px}
.sh-wa b{font:600 var(--text-sm)/1.1 var(--font-sans)}
.sh-wa small{font-size:var(--text-xs);color:var(--color-text-2)}
.sh-wa:hover b{text-decoration:underline;text-underline-offset:3px}
.sh-div{width:1px;height:26px;background:var(--color-line);margin:0 6px}
.site-head .sh-desk,.sh-cats{display:none}
.sh-cats a{display:flex;align-items:center;height:46px;border-bottom:2px solid transparent;font:500 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2);text-decoration:none;white-space:nowrap}
.sh-cats a:hover{color:var(--color-ink)}
.sh-cats a[aria-current=page]{border-bottom-color:var(--color-ink);color:var(--color-ink);font-weight:600}
@media (min-width:1100px){
  .sh-row{grid-template-columns:auto auto minmax(280px,1fr) auto;grid-template-areas:"logo all search utils";gap:var(--space-5);height:76px;padding:0 clamp(16px,2.4vw,40px)}
  .site-head .sh-mob{display:none}
  .site-head .sh-desk{display:inline-flex}
  .site-head .sh-wa{display:flex}
  .sh-logo{justify-self:start}
  .sh-logo img{height:40px}
  .sh-all{grid-area:all;margin-left:-12px}
  .sh-search{height:52px;max-width:720px}
  .sh-utils .btn{margin-left:8px}
  .sh-cats{display:flex;gap:clamp(14px,1.6vw,28px);padding:0 clamp(16px,2.4vw,40px);overflow-x:auto;scrollbar-width:none}
  .site-head.is-condensed .sh-row{height:60px}
  .site-head.is-condensed .sh-logo img{height:32px}
  .site-head.is-condensed .sh-cats{display:none}
}
.icon-btn{position:relative;display:inline-grid;place-items:center;justify-content:center;align-items:center;width:40px;height:40px;border-radius:var(--radius-full);border:0;background:transparent;cursor:pointer;color:var(--color-ink);transition:background-color var(--dur-fast) var(--ease-out)}
.icon-btn:hover{background:var(--color-band)}
.count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-ink);font:700 11px/18px var(--font-sans);text-align:center}

/* =====================================================================
   FIELDS
   ===================================================================== */
.field{display:grid;gap:6px}
.field>label,.field-label{font:600 var(--text-sm)/1.2 var(--font-sans)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-3)}
.input,.select{height:48px;width:100%;padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-control-line);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);transition:border-color var(--dur-fast) var(--ease-out)}
.input::placeholder{color:var(--color-text-3)}
.input:hover,.select:hover{border-color:var(--color-ink)}
.input:focus-visible,.select:focus-visible{border-color:var(--color-ink);box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23131416' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.field.is-error .input{border-color:var(--color-danger);box-shadow:inset 0 0 0 1px var(--color-danger)}
.field .error{display:flex;gap:6px;align-items:center;font-size:var(--text-sm);color:var(--color-danger)}
.search-field{position:relative}
.search-field .i{position:absolute;left:16px;top:50%;translate:0 -50%;color:var(--color-text-2)}
.search-field .input{height:44px;padding-left:44px;border-radius:var(--radius-full);background:var(--color-band);border-color:transparent}
.search-field .input:hover{border-color:var(--color-control-line)}
.search-field .input:focus-visible{border-radius:var(--radius-full)}
.stepper{display:inline-flex;align-items:center;height:48px;border-radius:var(--radius-full);border:1px solid var(--color-control-line)}
.stepper button{width:44px;height:100%;border:0;background:transparent;border-radius:var(--radius-full);display:grid;place-items:center;cursor:pointer}
.stepper button:hover{background:var(--color-band)}
.stepper input{height:100%;width:56px;border:0;text-align:center;font-weight:600;background:transparent;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);cursor:pointer}
label.check{min-height:44px;align-items:center}
.check input{appearance:none;width:20px;height:20px;margin:0;border:1.5px solid var(--color-control-line);border-radius:6px;display:grid;place-items:center;background:var(--color-surface)}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--color-ink);border-color:var(--color-ink)}
.check input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;rotate:-45deg;translate:0 -1px}
.check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}

/* =====================================================================
   TABS: pill segmented control
   ===================================================================== */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-full);background:var(--color-band);max-width:100%;overflow-x:auto;justify-self:start;align-self:start}
.tabs button{height:36px;padding:0 16px;border:0;border-radius:var(--radius-full);background:transparent;font:500 var(--text-sm)/1 var(--font-sans);cursor:pointer;color:var(--color-text-2);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.tabs button:hover{color:var(--color-ink)}
.tabs button[aria-selected=true]{background:var(--color-surface);color:var(--color-ink);box-shadow:0 1px 3px rgb(19 20 22 / .12)}

/* =====================================================================
   PRODUCT CARD FAMILY (D2, signed off 2026-10-21): one markup for the grid card and
   the slider card. Order: square photo, colours, name, price range, "per item · min N".
   The whole card is one link (the name's ::after covers it); the heart, the badges and
   the colour row sit above that link. Badges: one at a time (Office badge, New or
   Popular) plus Bali only. Second photo on hover-capable screens only.
   <article class="card">
     <div class="tile"><img> <img class="alt"></div>
     <div class="swatches" role="group">dots… <button class="more">+N</button></div>
     <h3 class="name"><a href>Name</a></h3><p class="price">Rp 106.000 – 117.000</p>
     <p class="meta">per item · min 1</p>
     <div class="badges">…</div><button class="fav" aria-pressed>…</button>
     <div class="all-colours" role="dialog" hidden>…</div>
   </article>
   ===================================================================== */
.tile{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--color-photo)}  /* square: the catalogue photos are square (owner 2026-10-21) */
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile>img.knockout{mix-blend-mode:multiply}  /* white-ground photo: its white takes the studio grey */
:is(.mtile,.ftile,.dline,.atc-more,.sg-row,.dr-row,.zm-thumb) img.knockout{filter:brightness(.882)}  /* small thumbs have no grey ground behind them: brightness(225/255) gives the same result as multiply on --color-photo */
.tile>img.alt{display:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}  /* second photo; touch screens never load it (lazy + hidden) */
@media (hover:hover){.tile>img.alt{display:block}.card:hover .tile>img.alt{opacity:1}}
.tile .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-text-3)}  /* no photo yet: the product's outline icon */
.tile .glyph .i{width:36px;height:36px;stroke-width:1.5}
.tile>.badge{position:absolute;top:12px;left:12px;z-index:1}  /* a lone badge on a photo tile (collections, collage) */

.card{position:relative;display:grid;gap:8px;align-content:start;color:inherit;text-decoration:none}
.card .name{margin:4px 0 0;font:600 17px/1.3 var(--font-sans);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .name a{color:inherit;text-decoration:none}
.card .name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius-md)}
.card .name a:focus-visible{box-shadow:none}
.card:has(.name a:focus-visible) .tile{box-shadow:var(--focus-ring)}
.card:hover .name a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.card .price{margin:0;font:600 15px/1.3 var(--font-sans)}
.card .meta{margin:0;font-size:var(--text-sm);line-height:1.3;color:var(--color-text-3)}
.card .badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}

.fav{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--color-ink);cursor:pointer;padding:0}
.fav::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgb(255 255 255 / .9);transition:background-color var(--dur-fast) var(--ease-out)}
.fav:hover::before{background:#fff}
.fav .i{position:relative}
.fav[aria-pressed=true] .i{fill:currentColor}
.fav:focus-visible{border-radius:50%}

/* colours: 4 dots on a phone, 6 from 700px, then "+N" (counted in script). Tapping the row
   opens every colour in a panel over the photo, so the grid never moves */
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.swatch{width:22px;height:22px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(19 20 22 / .18)}
.swatch-lg{width:32px;height:32px;border:0;cursor:pointer;padding:0}
.swatch-lg[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgb(19 20 22 / .18),0 0 0 2px var(--color-surface),0 0 0 4px var(--color-ink)}
/* 44px touch target, look unchanged: the ::after is the hit area */
.swatch-lg,.pp-step,.ed-ibtn,.pp-lk,.lk,.pp-price .link-arrow{position:relative}
:is(.fav,.swatch-lg,.pp-step,.ed-ibtn,.pp-lk,.lk,.pp-price .link-arrow)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}
/* colour name on hover/focus: the ::before sits above the swatch (the ::after above is the hit area); text from data-tip */
.swatch-lg[data-tip]::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;z-index:6;padding:4px 8px;border-radius:var(--radius-sm);background:var(--color-ink);color:#fff;font:500 var(--text-xs)/1.3 var(--font-sans);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.swatch-lg[data-tip]:focus-visible::before{opacity:1}
@media (hover:hover){.swatch-lg[data-tip]:hover::before{opacity:1}}
/* the same for small controls added in rev 26 review: the look stays, the ::after is the 44px hit area.
   :where() keeps position:relative from beating a control that is already positioned (.ac-dz .ac-rm is absolute) */
:where(.cp-pills a,.btn-sm,.icon-btn,.sh-logo,.sh-wa,.swatches .more,.bd-x,.ac-rm,.stepper button,.cp-crumb a,.bd-msg .notice button,.err-sum a,.mgroup h3 a,.mgroup li a,.nf-acts .link-arrow){position:relative}
:is(.cp-pills a,.btn-sm,.icon-btn,.sh-logo,.sh-wa,.swatches .more,.bd-x,.ac-rm,.stepper button,.cp-crumb a,.bd-msg .notice button,.err-sum a,.mgroup h3 a,.mgroup li a,.nf-acts .link-arrow)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}
.card .swatches{min-height:22px;margin-top:4px}
.card .swatches .swatch:nth-of-type(n+5){display:none}
.swatches.has-more{position:relative;z-index:2;cursor:pointer}
.swatches .more{display:none;height:24px;padding:0 4px;border:0;background:none;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2);cursor:pointer;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:3px}
.swatches.has-more .more{display:inline-block}
.swatches .more:hover{color:var(--color-ink);text-decoration-color:var(--color-ink)}
.swatches .more:focus-visible{border-radius:var(--radius-sm)}
.all-colours{position:absolute;top:0;left:0;right:0;aspect-ratio:1;z-index:3;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line),var(--shadow-float);overflow:hidden}
.all-colours[hidden]{display:none}
.ac-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--text-sm)}
.ac-head b{font-weight:600}
.ac-close{display:grid;place-items:center;width:32px;height:32px;margin:-4px -4px 0 0;border:0;border-radius:50%;background:var(--color-band);color:var(--color-ink);cursor:pointer}
.ac-close:hover{background:var(--color-line)}
.ac-close:focus-visible{border-radius:50%}
.ac-dots{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
@media (min-width:700px){
  .card .name{font-size:18px}
  .card .price{font-size:var(--text-base)}
  .card .swatches{min-height:24px}
  .card .swatch,.ac-dots .swatch{width:24px;height:24px}
  .card .swatches .swatch:nth-of-type(n+5){display:block}
  .card .swatches .swatch:nth-of-type(n+7){display:none}
}

/* product grid: 2 across on a phone, 3 on a tablet, 4 on desktop. Each card spans five rows
   (photo, colours, name, price, minimum) so the rows line up whatever the name length */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px var(--space-3)}
.pgrid>.card{grid-row:span 5;grid-template-rows:subgrid;margin-bottom:var(--space-8)}
@media (min-width:700px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-4)}}
@media (min-width:1000px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* loading: the card's shape in band grey, no shimmer (motion comes with roadmap 24) */
.card.is-loading .tile{background:var(--color-band)}
.sk{display:block;height:12px;border-radius:4px;background:var(--color-band)}
.sk.dots{width:60%;height:22px;border-radius:999px}.sk.w80{width:80%;height:16px}.sk.w50{width:55%}.sk.w35{width:35%}

/* =====================================================================
   HERO COLLAGE (rev 3, Home): headline beside six product photos, the first one big.
   PRICE PILL: white pill with a round thumb and a real "From" price, on a photo or tile.
   ===================================================================== */
.hero-collage{display:grid;gap:var(--space-8)}
.hero-collage .copy{display:grid;gap:var(--space-5);align-content:center}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.collage .tile{aspect-ratio:1}
.collage .tile:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}  /* square on its own, so it keeps its shape with fewer than five photos beside it */
.collage .tile .price-pill{position:absolute;left:12px;bottom:12px;z-index:2}
.price-pill{display:inline-flex;align-items:center;gap:10px;justify-self:start;height:48px;padding:0 16px 0 5px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-ink);text-decoration:none;font:600 var(--text-sm)/1 var(--font-sans);box-shadow:var(--shadow-float);transition:background-color var(--dur-fast) var(--ease-out)}
.price-pill img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--color-photo)}
.price-pill:hover{background:var(--color-band)}
/* The price must be on the first screen: below 1000px the pill sits in the copy, from 1000px on the big tile (D0 review) */
.collage .price-pill{display:none}
@media (min-width:1000px){.hero-collage{grid-template-columns:1fr 1.15fr;align-items:center}.hero-collage .copy .price-pill{display:none}.collage .price-pill{display:inline-flex}}

/* =====================================================================
   PRODUCT SLIDER (rev 3): small cards in a row that scrolls sideways.
   ~2 in view on a phone, ~3 on a tablet, 6 on desktop; arrows from 1000px.
   ===================================================================== */
.pslider{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-3);scrollbar-width:thin}
.pslider .card{flex:0 0 calc((100% - var(--space-4)) / 2.3);min-width:0;scroll-snap-align:start;gap:6px}
.pslider .card .name{font-size:15px;min-height:2.6em}  /* no shared rows in a slider: two lines kept so prices line up */
.pslider .card .price{font-size:var(--text-sm)}
.pslider .card .meta{font-size:var(--text-xs)}
.pslider .card .badges{top:8px;left:8px}
.pslider .fav{top:2px;right:2px}
.pslider .card .swatch{width:20px;height:20px}
.pslider .card .swatches{min-height:20px}
.pslider .card .swatches .swatch:nth-of-type(n+4){display:none}
.arrows{display:none;gap:6px}
.arrows .icon-btn{box-shadow:inset 0 0 0 1px var(--color-control-line)}
.arrows .icon-btn:disabled{color:var(--color-disabled-fg);box-shadow:inset 0 0 0 1px var(--color-line);background:transparent;cursor:default}  /* first arrow at the start, last at the end */
@media (min-width:700px){.pslider .card{flex-basis:calc((100% - 3 * var(--space-4)) / 3.3)}}
@media (min-width:1000px){.pslider .card{flex-basis:calc((100% - 5 * var(--space-4)) / 6)}.arrows{display:inline-flex}}

/* =====================================================================
   CATEGORY BENTO (rev 3): one big tile and six around it, label pill on the photo.
   No prices at this level. Phone 2 columns, desktop 4 x 3.
   ===================================================================== */
.bento{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr);grid-auto-rows:168px;grid-template-areas:"a a" "a a" "b c" "d e" "f g"}
.bento a{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--color-photo);color:var(--color-ink);text-decoration:none}
.bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.bento img.knockout{mix-blend-mode:multiply;object-position:center}
.bento a>span{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 14px;border-radius:var(--radius-full);background:var(--color-surface);font:600 var(--text-sm)/1.15 var(--font-sans);max-width:calc(100% - 20px)}
.bento a:hover>span{background:var(--color-band)}
.bento a:nth-child(1){grid-area:a}.bento a:nth-child(2){grid-area:b}.bento a:nth-child(3){grid-area:c}.bento a:nth-child(4){grid-area:d}.bento a:nth-child(5){grid-area:e}.bento a:nth-child(6){grid-area:f}.bento a:nth-child(7){grid-area:g}
.bento a:nth-child(1)>span{font:600 var(--text-base)/1.15 var(--font-sans);min-height:44px;padding:0 18px}  /* body face like the other labels, a size up (owner 2026-10-21) */
.bento .ph{position:absolute;inset:0;background:var(--color-photo)}  /* photo ground; lets knockout photos multiply */
/* Phone: the six small tiles carry their name under the photo, so long names never wrap inside a pill (D0 review) */
@media (max-width:699px){
  .bento a:not(:first-child){display:flex;flex-direction:column;gap:8px;background:none;overflow:visible;border-radius:0}
  .bento a:not(:first-child) .ph{position:relative;inset:auto;flex:1;min-height:0;border-radius:var(--radius-md);overflow:hidden}
  .bento a:not(:first-child)>span{position:static;min-height:0;padding:0;background:none;white-space:nowrap;max-width:none}
  .bento a:not(:first-child):hover>span{background:none;text-decoration:underline;text-underline-offset:3px}
}
@media (min-width:1000px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-template-areas:"a a b b" "a a c d" "e e f g"}}

/* =====================================================================
   CONFIGURATOR PARTS
   ===================================================================== */
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.size{display:grid;gap:4px;justify-items:center;padding:10px 6px;border-radius:var(--radius-sm);border:1px solid var(--color-control-line);background:var(--color-surface)}
.size b{font:600 var(--text-sm)/1 var(--font-sans)}
.size input{width:100%;height:32px;border:0;border-radius:6px;background:var(--color-band);text-align:center;font-weight:600}
.size.is-filled{background:var(--color-band);border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
.size.is-filled input{background:var(--color-surface)}
.tiers{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
.tiers th{font:600 var(--text-xs)/1 var(--font-sans);color:var(--color-text-2);text-align:left;padding:0 12px 8px}
.tiers td{padding:12px;border-top:1px solid var(--color-line)}
.tiers td:last-child,.tiers th:last-child{text-align:right}
.tiers tr.is-current td{background:var(--color-band);border-top:1px solid var(--color-ink);border-bottom:1px solid var(--color-ink)}
.tiers tr.is-current td:first-child{border-left:1px solid var(--color-ink);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.tiers tr.is-current td:last-child{border-right:1px solid var(--color-ink);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.tiers tr.is-current + tr td{border-top-color:transparent}

/* =====================================================================
   NOTICES: tint + icon + words. No coloured side stripe.
   ===================================================================== */
.notice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.5}
.notice .i{margin-top:1px}
.notice b{display:block;font-weight:600}
.notice-info{background:var(--color-band);color:var(--color-text)}
.notice-success{background:var(--color-success-tint);color:var(--color-success)}
.notice-warning{background:var(--color-warning-tint);color:var(--color-warning)}
.notice-danger{background:var(--color-danger-tint);color:var(--color-danger)}

/* =====================================================================
   TRUST LINE: ticks under a headline
   ===================================================================== */
.trust{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:0;padding:0;list-style:none;font:500 var(--text-sm)/1.3 var(--font-sans)}
.trust li{display:flex;align-items:center;gap:6px}
.trust .i{color:var(--color-accent-text)}
.on-dark .trust .i,.on-photo .trust .i{color:var(--color-accent)}

/* =====================================================================
   ACCENT BAND (one per page at most) + INK SURFACES
   ===================================================================== */
.on-accent{background:var(--color-accent);color:var(--color-ink)}
.on-dark{background:var(--color-ink);color:var(--color-on-ink)}
.on-dark .t-display,.on-dark .t-h1,.on-dark .t-h2,.on-dark .t-h3,.on-dark .t-h4{color:var(--color-on-ink)}
.on-dark .t-muted{color:var(--color-on-ink-2)}

/* =====================================================================
   FOOTER (rev 6, D1 final, 2026-10-21; layout after balidirectstore.com; ink, owner pick B):
   the quiet search text and the monthly sign-up on the left, four link columns (Shop, Help,
   Company, Contact with icons and round social icons), one small row of payment and delivery
   logos, one base bar (globe currency button, legal, copyright). Phone: Help and Company
   fold; Shop and Contact stay open. No logo in the footer (owner).
   ===================================================================== */
.site-foot{padding:var(--space-16) 0 var(--space-8);color:var(--f-fg)}
.site-foot.on-dark{--f-fg:var(--color-on-ink);--f-fg2:var(--color-on-ink-2);--f-line:var(--color-on-ink-line)}
.site-foot.on-dark :focus-visible{box-shadow:var(--focus-ring-on-dark)}
.sf-main{display:grid;gap:var(--space-12)}
.sf-news .sf-seo{margin:var(--space-8) 0 0;font-size:var(--text-xs);line-height:1.6;max-width:46ch}
.sf-news h2{margin:0 0 var(--space-2)}
.sf-news p{margin:0;font-size:var(--text-sm);color:var(--f-fg2);max-width:40ch}
.sf-field{display:flex;gap:var(--space-2);margin-top:var(--space-5);max-width:440px}
.sf-field .input{flex:1;min-width:0;border-color:transparent;border-radius:var(--radius-full);padding:0 20px}
.sf-field .input:focus-visible{border-radius:var(--radius-full)}
.sf-news .sf-fine{margin-top:var(--space-3);font-size:var(--text-xs)}
.sf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-6)}
.sf-links h3{font:600 var(--text-sm)/1 var(--font-sans);color:var(--f-fg);margin:0 0 var(--space-4)}
.sf-links ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:var(--text-sm)}
.sf-links a,.sf-base a{color:var(--f-fg2);text-decoration:none}
.sf-links a:hover,.sf-base a:hover{color:var(--f-fg);text-decoration:underline;text-underline-offset:3px}
.sf-shop,.sf-contact{grid-column:1/-1}
.sf-shop ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}
.sf-contact li{display:flex;gap:10px;align-items:flex-start;color:var(--f-fg2);line-height:1.4}
.sf-contact a{white-space:nowrap}
.sf-contact{border-top:1px solid var(--f-line);padding-top:var(--space-4)}
.sf-contact .i{margin-top:1px;color:var(--f-fg)}
.sf-social{display:flex;gap:8px;margin-top:var(--space-5)}
.sf-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--f-line);color:var(--f-fg);transition:border-color var(--dur-fast) var(--ease-out)}
.sf-social a:hover{border-color:var(--f-fg);text-decoration:none}
.sf-social svg{width:18px;height:18px;fill:currentColor}
.sf-group{grid-column:1/-1;border-top:1px solid var(--f-line);padding-top:var(--space-4)}
.sf-group summary{display:flex;justify-content:space-between;align-items:center;min-height:32px;list-style:none;cursor:pointer}
.sf-group summary::-webkit-details-marker{display:none}
.sf-group summary h3{margin:0}
.sf-group summary::after{content:"+";font:400 22px/1 var(--font-sans);color:var(--f-fg)}
.sf-group[open] summary::after{content:"−"}
.sf-group ul{margin-top:var(--space-4)}
.sf-pay{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-12);padding:var(--space-6) 0}
.sf-label{font:500 var(--text-xs)/1 var(--font-sans);color:var(--f-fg2)}
.sf-logos{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
@media (min-width:700px){.sf-logos + .sf-label{margin-left:var(--space-4)}}
.sf-logos li{display:flex;align-items:center;justify-content:center;height:28px;min-width:40px;padding:0 8px;border-radius:4px;background:var(--color-surface);color:var(--color-ink)}
.sf-logos img{display:block;height:12px;width:auto}
.sf-logos img.tall{height:16px}
.sf-logos .i{width:15px;height:15px}
.sf-base{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--f-line);font-size:var(--text-xs);color:var(--f-fg2)}
.sf-base nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.sf-locale{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-full);border:1px solid var(--f-line);background:transparent;color:var(--f-fg);font:500 var(--text-xs)/1 var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.sf-locale:hover{border-color:var(--f-fg)}
@media (min-width:1000px){
  .sf-main{grid-template-columns:minmax(0,1.35fr) minmax(0,3.65fr);gap:var(--space-16)}
  .sf-links{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:var(--space-8) var(--space-6)}
  .sf-shop,.sf-contact,.sf-group{grid-column:auto}
  .sf-shop ul{grid-template-columns:1fr}
  .sf-group,.sf-contact{border-top:0;padding-top:0}
  .sf-group summary{pointer-events:none;min-height:0}
  .sf-group summary::after,.sf-group[open] summary::after{content:none}
  .sf-group summary h3{margin-bottom:var(--space-4)}
  .sf-group ul{margin-top:0}
  .sf-base .sf-copy{margin-left:auto}
}
/* =====================================================================
   TESTIMONIALS (Home, added 2026-10-21 on the owner's request): up to three published
   quotes in grey cards, three across from 700px. Hidden when none is published.
   ===================================================================== */
.quotes{display:grid;gap:var(--space-4)}
.quote{display:grid;gap:var(--space-5);align-content:space-between;margin:0;padding:var(--space-8);border-radius:var(--radius-lg);background:var(--color-band)}
.quote blockquote{margin:0;font:500 clamp(18px,2vw,22px)/1.45 var(--font-sans);letter-spacing:-.01em;text-wrap:pretty}
.quote figcaption{display:grid;gap:2px;font-size:var(--text-sm);color:var(--color-text-2)}
.quote figcaption b{font-weight:600;color:var(--color-text)}
.stars{display:inline-flex;gap:2px;min-height:15px;color:var(--color-ink)}
.stars .i{fill:currentColor}
@media (min-width:700px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* range slider (the drop calculator) */
.range{appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:rgb(19 20 22 / .22)}
.range::-moz-range-track{height:6px;border-radius:99px;background:rgb(19 20 22 / .22)}
.range::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--color-ink);border:3px solid var(--color-surface)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-ink);border:3px solid var(--color-surface)}
.range:focus-visible{box-shadow:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--color-ink)}

@media (prefers-reduced-motion:reduce){*,::before,::after{transition-duration:0s!important;transition-delay:0s!important}}  /* delay too: the phone menu hides its sub-panel after a 260ms delay */

/* =====================================================================
   HOME SECTIONS (moved here from the Home specimen 2026-10-21, so the app and the
   specimens read one source): drop calculator,
   how it works, proof strip, collections, alternating rows, close
   ===================================================================== */
.hero-collage{padding-bottom:var(--space-6)}
.hero-collage .copy p{margin:0;max-width:44ch}

.calc{border-radius:var(--radius-lg);padding:var(--space-8) var(--space-5);display:grid;gap:var(--space-8)}
.calc .lines{display:grid;gap:var(--space-4);align-content:start}
.calc .line{display:flex;justify-content:space-between;align-items:center;gap:12px}
.calc .line b{display:block;font-weight:600}
.calc .line small{font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.calc .stepper{background:var(--color-surface);border-color:var(--color-ink);height:44px}
.calc .stepper input{width:52px}
.calc .total{display:grid;gap:var(--space-3);align-content:start;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-6)}
.calc .total .sum{font:400 clamp(48px,8vw,88px)/1 var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums}
.calc .total .t-sm{color:var(--color-text-2)}

.steps{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.steps li{display:grid;gap:var(--space-3);align-content:start}
.steps .num{display:flex;align-items:center;gap:var(--space-3)}
.steps .num b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;padding-top:1px;background:var(--color-ink);color:var(--color-on-ink);font:500 var(--text-base)/1 var(--font-display)}
.steps .num i{flex:1;height:1px;background:var(--color-line)}
.steps h3,.steps p{margin:0}
.steps p{color:var(--color-text-2);font-size:var(--text-sm);max-width:36ch}
.stats{display:grid;gap:var(--space-8);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-6);text-align:center;margin-top:var(--space-12)}
.stats b{display:block;font:400 clamp(52px,8vw,96px)/1 var(--font-display);letter-spacing:0}
.stats span{display:block;margin-top:10px;color:var(--color-text-2)}

.occasions{display:grid;gap:var(--space-6) var(--space-4);grid-template-columns:repeat(2,1fr)}
.occ{display:grid;gap:10px;text-decoration:none;color:inherit}
.occ .img{position:relative;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;background:var(--color-band)}
.occ .img img{width:100%;height:100%;object-fit:cover}
.occ .img .badge{position:absolute;top:10px;left:10px}
.occ b{font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em;text-align:center}

.close{border-radius:var(--radius-lg);padding:var(--space-12) var(--space-6);display:grid;gap:var(--space-5);justify-items:start}
.close p{margin:0;color:var(--color-text-2);max-width:44ch}
.row-wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

.zig{display:grid;gap:var(--space-6);align-items:center}
.zig + .zig{margin-top:var(--space-12)}
.zig .media{border-radius:var(--radius-lg);overflow:hidden}
.zig .media .tile{aspect-ratio:5/4;border-radius:0}
.zig .media .tile img{object-position:center 20%}
.zig .copy{display:grid;gap:var(--space-4);max-width:46ch}
.zig .copy h3,.zig .copy p{margin:0}
.zig .copy p{color:var(--color-text-2)}

@media (min-width:700px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .occasions{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .zig{grid-template-columns:1.1fr 1fr;gap:var(--space-16)}
  .zig.flip .media{order:2}
  .calc{grid-template-columns:1.3fr 1fr;padding:var(--space-12)}
}

/* =====================================================================
   SECTION GRID (D3, rev 10, owner sign-off 2026-10-21; specimen
   ../Redesign-2026-10/section-grid.html). Breakpoints 700 (tablet) and 1000 (desktop);
   the header switches at 1100. Widths: .container (box 1440, content 1360) and
   .container-text (720 of content) in BASE.
   ===================================================================== */
/* Page columns: 4 / 6 / 12. Gaps match .pgrid, so cards sit on columns. Children run full
   width under 1000px; .span-N sets the desktop width: 7 + 5 product page and checkout,
   3 + 9 category filters and account. (Not .grid: Tailwind and the spec page use that name.) */
.cols{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--space-8) var(--space-3)}
.cols>*{grid-column:1/-1}
@media (min-width:700px){.cols{--cols:6;column-gap:var(--space-4)}}
@media (min-width:1000px){
  .cols{--cols:12}
  .cols>.span-3{grid-column:span 3}.cols>.span-4{grid-column:span 4}.cols>.span-5{grid-column:span 5}
  .cols>.span-6{grid-column:span 6}.cols>.span-7{grid-column:span 7}.cols>.span-8{grid-column:span 8}
  .cols>.span-9{grid-column:span 9}
}

/* Section spacing (owner pick B): white sections share one gap of --section-lg (80–144);
   next to and inside a full-width band (.sec.band) the gap is --section-md (64–96).
   .sec-sm on a follow-on that belongs to the section above (48–64). The hero keeps its own. */
.sec{padding-block:var(--section-lg)}
.sec:not(.band)+.sec:not(.band){padding-top:0}
.sec.band,.sec:has(+.band){padding-bottom:var(--section-md)}
.sec.band,.band+.sec{padding-top:var(--section-md)}
.sec:has(+.sec-sm){padding-bottom:var(--section-sm)}

/* Section head: title (H2, or H3 inside a page) and an optional one-line .sub on the left;
   anything else (link, arrows, a badge; group several in .act) sits on the right, level with
   the title's last line. Long titles wrap inside their column. */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-6)}
.sec-head>:first-child,.sec-head>.sub{grid-column:1}
.sec-head>:not(:first-child,.sub){grid-column:2;grid-row:1}
.sec-head:has(.sub)>:not(:first-child,.sub){grid-row:1/span 2}
.sec-head .sub{margin:0;color:var(--color-text-2);max-width:56ch}
.sec-head .act{display:inline-flex;align-items:center;gap:var(--space-4)}
.sec-head .link-arrow{min-height:44px}
.on-accent .sec-head .sub{color:var(--color-ink)}
.on-accent .link-arrow{text-decoration-color:var(--color-ink)}
.on-accent .close p,.close.on-accent p{color:var(--color-ink)}
@media (min-width:1000px){.sec-head{margin-bottom:var(--space-8)}}

/* Boxes inside a section (grey .band, one orange .on-accent per page): 20px corners.
   On a phone (owner pick B) every box runs edge to edge, square, with the gutter inside;
   it then counts as a band: two bands or boxes never touch. */
.inset{border-radius:var(--radius-lg);padding:var(--space-8) var(--space-5)}
@media (min-width:1000px){.inset{padding:var(--space-12)}}
@media (max-width:699px){:is(.inset,.calc,.stats,.close){margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}}

/* =====================================================================
   PROMOTIONAL BANNERS (D4, rev 11, owner sign-off 2026-10-21; specimen
   ../Redesign-2026-10/promo-banners.html). Three parts show one promo made in /office
   (kinds: new, order by, collection, badge; never a discount):
   .announce  bar above the header: 2-3 facts (ink) or one promo message (its theme)
   .promo     full-width band (.sec.band.theme): copy beside three product cards
   .ptile     one card slot in a .pgrid
   Each promo picks a .theme-<name> in /office. Rules: one band per page, never the last
   section (no theme band against the ink footer), category pages use the tile, the tile goes
   after an even number of products (default 4th), band and tile never repeat one promo.
   ===================================================================== */
/* Announcement bar: ink, every page, above the header, scrolls away with the page.
   Phone: one fact at a time, swapped every 6s with no animation (pauses while touched,
   hovered or focused; stays on the first under reduced motion). From 1000px: all facts in
   one row, orange dots between. A message from /office replaces the facts everywhere.
   Close (×) hides it until the text changes. */
.announce{background:var(--color-ink);color:var(--color-on-ink);font:500 var(--text-sm)/1.35 var(--font-sans)}
.announce[hidden]{display:none}
.an-in{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;min-height:40px;max-width:var(--container);margin-inline:auto;padding-inline:max(4px,calc(var(--gutter) - 12px))}
.an-msgs{grid-column:2;margin:0;padding:8px 0;list-style:none;text-align:center;text-wrap:balance}
.an-msgs li:not(.is-on){display:none}
.announce a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-on-ink-2);text-underline-offset:3px;white-space:nowrap}
.announce a:hover{text-decoration-color:var(--color-on-ink)}
.announce a .i{vertical-align:-3px;margin-left:2px}
.announce :focus-visible{box-shadow:var(--focus-ring-on-dark)}
.an-close{grid-column:3;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--color-on-ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.an-close:hover{background:var(--color-on-ink-line)}
.an-close:focus-visible{border-radius:50%}
.announce.theme a{text-decoration-color:var(--g-fg2)}
.announce.theme .an-close{color:var(--g-fg)}
.announce.theme .an-close:hover{background:color-mix(in srgb,var(--g-fg) 14%,transparent)}
@media (min-width:1000px){
  .an-msgs{display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px}
  .an-msgs li:not(.is-on){display:block}
  .an-msgs li+li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:20px;border-radius:50%;background:var(--color-accent);vertical-align:2px}
}

/* Promo band: a whole section (.sec.band; add .on-dark for the ink option).
   Phone: heading and line, the three products in a row you swipe, then the button.
   From 700px the products sit 3 across; from 1000px copy takes 4 of 12 columns, products 8. */
.promo{display:grid;gap:var(--space-6);grid-template-areas:"copy" "row" "cta"}
.promo .copy{grid-area:copy;display:grid;gap:var(--space-3);align-content:start}
.promo .copy p{margin:0;max-width:40ch;color:var(--color-text-2)}
.promo .cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.promo .row{grid-area:row;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--space-3)) / 2.3);gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
.promo .row::-webkit-scrollbar{display:none}
.promo .row>.card{min-width:0;scroll-snap-align:start}
.promo .card .name{min-height:2.6em;font-size:15px}  /* phone: slider card sizes, so the price range fits */
.promo .card .price{font-size:var(--text-sm)}
.promo .card .meta{font-size:var(--text-xs)}
.days{display:inline-flex;align-items:center;gap:6px;font:600 var(--text-sm)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.days[hidden]{display:none}
.days .i{color:var(--color-accent-text)}
.theme .days .i{color:currentColor}
.theme-ink .days .i{color:var(--color-accent)}
@media (min-width:700px){
  .promo .row{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px var(--space-4);margin-inline:0;padding-inline:0;overflow:visible}
  .promo .row>.card{grid-row:span 5;grid-template-rows:subgrid}
  .promo .card .name{min-height:0;font-size:18px}
  .promo .card .price{font-size:var(--text-base)}
  .promo .card .meta{font-size:var(--text-sm)}
}
@media (min-width:1000px){
  .promo{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;grid-template-areas:none;column-gap:var(--space-4);row-gap:var(--space-8)}
  .promo .copy{grid-column:1/span 4;grid-row:1;padding-right:var(--space-6)}
  .promo .cta{grid-column:1/span 4;grid-row:2;align-self:start}  /* the button stays with its words, not down at the card bottoms */
  .promo .row{grid-column:5/-1;grid-row:1/span 2}
}

/* Promo tile: one card slot in a product grid (.pgrid), as tall as the cards beside it.
   The whole tile is one link. Phone: the full row (put it after an even number of products). */
.ptile{grid-column:1/-1;position:relative;display:flex;flex-direction:column;gap:var(--space-5);margin-bottom:var(--space-8);padding:var(--space-5);border-radius:var(--radius-md);text-decoration:none}
.ptile .words{display:grid;gap:var(--space-2);margin-top:auto}
.ptile p{margin:0;font-size:var(--text-sm);line-height:var(--leading-ui);max-width:32ch}
.ptile .link-arrow{margin-top:var(--space-2)}
.ptile:hover .link-arrow{text-decoration-color:currentColor}
.ptile:focus-visible{border-radius:var(--radius-md);box-shadow:var(--focus-ring)}  /* the tile sits on white: the normal ring */
.thumbs{display:flex;padding-left:6px}
.thumbs span{width:52px;height:52px;margin-left:-6px;border-radius:50%;overflow:hidden;background:var(--color-photo);isolation:isolate;box-shadow:0 0 0 3px var(--g)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs img.knockout{mix-blend-mode:multiply}
@media (min-width:700px){.ptile{grid-column:auto;grid-row:span 5}}
@media (min-width:1000px){.ptile{padding:var(--space-6)}}

/* Promo themes (owner 2026-10-21): staff pick the ground per promo in /office, e.g. cherry for
   Christmas, forest for Eco friendly. Ink, grey and eight badge colours (not peach: a soft-orange band); never orange (the page's
   one orange box is the main tool, and Anton never sits on orange). Each theme sets five values:
   --g ground, --g-fg text, --g-fg2 the line and card meta (4.81:1 or better on every ground),
   --g-btn / --g-btn-fg the button: orange on ink, white on the other dark grounds, ink on light ones.
   The bar takes a theme only for a message; the facts stay ink. */
.theme{background:var(--g);color:var(--g-fg)}
.theme-ink,.theme-forest,.theme-ocean,.theme-cherry,.theme-plum{--g-fg:#fff;--g-fg2:rgb(255 255 255 / .84);--g-btn:#fff;--g-btn-fg:var(--color-ink);--g-ring:rgb(255 255 255 / .32)}
.theme-grey,.theme-mint,.theme-sky,.theme-lilac,.theme-blush{--g-fg:var(--color-ink);--g-fg2:rgb(19 20 22 / .78);--g-btn:var(--color-ink);--g-btn-fg:#fff;--g-ring:rgb(19 20 22 / .18)}
.theme-ink{--g:var(--color-ink);--g-btn:var(--color-accent)}
.theme-forest{--g:var(--badge-forest)}.theme-ocean{--g:var(--badge-ocean)}.theme-cherry{--g:var(--badge-cherry)}.theme-plum{--g:var(--badge-plum)}
.theme-grey{--g:var(--color-band)}.theme-mint{--g:var(--badge-mint)}.theme-sky{--g:var(--badge-sky)}.theme-lilac{--g:var(--badge-lilac)}.theme-blush{--g:var(--badge-blush)}
.theme :is(.t-h2,.t-h3){color:var(--g-fg)}
.theme :is(.promo .copy p,.card .meta),.ptile.theme p{color:var(--g-fg2)}
.theme .swatch{box-shadow:inset 0 0 0 1px var(--g-ring)}
.theme .link-arrow{color:var(--g-fg);text-decoration-color:var(--g-fg2)}
.theme .btn-theme{background:var(--g-btn);color:var(--g-btn-fg)}
.theme .btn-theme:hover{background:color-mix(in srgb,var(--g-btn) 88%,var(--g))}
.theme-ink .btn-theme:hover{background:var(--color-accent-hover)}
.theme:is(.theme-ink,.theme-forest,.theme-ocean,.theme-cherry,.theme-plum) :is(.btn,.card .name a,.fav,a):focus-visible,
.theme:is(.theme-ink,.theme-forest,.theme-ocean,.theme-cherry,.theme-plum) .card:has(.name a:focus-visible) .tile{box-shadow:var(--focus-ring-on-dark)}
.theme .card:has(.name a:focus-visible) .tile{box-shadow:var(--focus-ring)}

/* =====================================================================
   NEWSLETTER (D5, rev 12, owner sign-off 2026-10-21; specimen
   ../Redesign-2026-10/newsletter.html). Popup offers 10% off the first order (cap and
   minimum set in /office) for joining Drop notes; the code comes in the email after the
   address is confirmed. Shows on the 2nd page or after 30s; never on cart, checkout,
   account, the editor, phone product pages, or to subscribers, customers who have ordered
   and affiliate-link visitors. × or Esc hides it 30 days. Footer sign-up: same form, no offer.
   .nl-pop    the welcome offer: corner card on desktop (700px+), sheet on a phone
   .nl-form   one email field + button, shared by the popup and the footer
   .nl-done   the "check your inbox" state that replaces the form
   .nl-code   the code box on the confirmed page and in the code email
   ===================================================================== */

/* Popup. Not a modal: no dimmer, nothing locked, the page stays usable behind it.
   Phone: a sheet pinned to the bottom, full width, square bottom corners, about a third of
   the screen. From 700px: a 400px card in the bottom-left corner (the right corner belongs
   to chat), with the product photo strip on top. Appears without motion until roadmap 24. */
.nl-pop{position:fixed;z-index:50;left:0;right:0;bottom:0;background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 32px -12px rgb(19 20 22 / .24),0 -1px 0 var(--color-line);padding-bottom:env(safe-area-inset-bottom)}
.nl-pop[hidden]{display:none}
.nl-pop .strip{display:none}
.nl-body{position:relative;display:grid;gap:var(--space-3);padding:var(--space-6) var(--gutter) var(--space-5)}
.nl-pop .t-h3{padding-right:48px}
.nl-pop .big{display:block;font-size:1.6em;line-height:.9}
.nl-pop .lead{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2);max-width:38ch}
.nl-close{position:absolute;top:var(--space-3);right:max(8px,calc(var(--gutter) - 12px));display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--color-ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.nl-close:hover{background:var(--color-band)}
.nl-close:focus-visible{border-radius:50%}
.nl-fine{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-3)}
.nl-fine[hidden]{display:none}
@media (min-width:700px){
  .nl-pop{left:24px;right:auto;bottom:24px;width:400px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-float),0 0 0 1px rgb(19 20 22 / .06);padding-bottom:0}
  .nl-pop .strip{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:128px;overflow:hidden;background:var(--color-photo)}
  .nl-pop .strip img{width:100%;height:100%;object-fit:cover}
  .nl-pop .strip img.knockout{mix-blend-mode:multiply}
  .nl-body{padding:var(--space-6) var(--space-6) var(--space-5)}
  .nl-close{top:calc(-128px + var(--space-3));right:var(--space-3);background:rgb(255 255 255 / .94)}
  .nl-close:hover{background:#fff}
  .nl-pop .t-h3{padding-right:0}
}
/* short laptop screens (1366×768): no photo strip, so the card stays clear of the header */
@media (min-width:700px) and (max-height:799px){
  .nl-pop .strip{display:none}
  .nl-close{top:var(--space-3);background:transparent}
  .nl-close:hover{background:var(--color-band)}
  .nl-pop .t-h3{padding-right:48px}
}

/* Form: the footer field (.sf-field) shape, used in both places. On white the field takes the
   resting control edge; on ink it has no edge (as the footer has today). */
.nl-form{display:grid;gap:var(--space-2)}
.nl-form[hidden]{display:none}
.nl-row{display:flex;gap:var(--space-2)}
.nl-row .input{flex:1;min-width:0;border-radius:var(--radius-full);padding:0 20px}
.nl-row .input:focus-visible{border-radius:var(--radius-full)}
.nl-row .btn{flex:none}
.nl-form .error{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:var(--text-sm);line-height:1.4;color:var(--color-danger)}
.nl-form .error .i{margin-top:2px}
.nl-form .error[hidden]{display:none}
.nl-form.is-error .input{border-color:var(--color-danger);box-shadow:inset 0 0 0 1px var(--color-danger)}
.nl-form .spinner{display:none}
.nl-form .btn[aria-busy=true] .spinner{display:inline-block}
/* on ink (footer): errors in a light red that reads on ink (9.0:1), field edge the same */
.on-dark .nl-row .input{border-color:transparent}
.on-dark .nl-form .error{color:#FF9A8F}
.on-dark .nl-form.is-error .input{border-color:#FF9A8F;box-shadow:inset 0 0 0 1px #FF9A8F}

/* Done: replaces the form in place, close to its height, so nothing below jumps */
.nl-done{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-3);align-items:start}
.nl-done[hidden]{display:none}
.nl-done .tick{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-success-tint);color:var(--color-success)}
.nl-done b{font-weight:600;font-size:var(--text-base);line-height:1.3;padding-top:2px}
.nl-done p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.nl-done .addr{color:var(--color-text);font-weight:600;overflow-wrap:anywhere}
.nl-done p button{padding:0;border:0;background:none;font:inherit;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em;cursor:pointer}
.nl-done p button:hover{text-decoration-color:var(--color-ink)}
.on-dark .nl-done .tick{background:var(--color-on-ink-line);color:var(--color-on-ink)}
.on-dark .nl-done p{color:var(--color-on-ink-2)}
.on-dark .nl-done .addr{color:var(--color-on-ink)}
.on-dark .nl-done p button{color:var(--color-on-ink);text-decoration-color:var(--color-on-ink-2)}

/* Code box: the code big enough to read off a phone, one copy button */
.nl-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);border-radius:var(--radius-md);background:var(--color-band)}
.nl-code .code{font:600 clamp(26px,4vw,34px)/1 var(--font-sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;user-select:all}
.nl-code small{display:block;margin-bottom:8px;font:500 var(--text-xs)/1 var(--font-sans);color:var(--color-text-2)}

/* Confirmed page: the reading column, one block, two buttons */
.nl-page{padding:var(--section-md) 0}
.nl-page .t-h1{margin-bottom:var(--space-4)}
.nl-page .t-lead{margin-bottom:var(--space-8)}
.terms{list-style:none;margin:var(--space-6) 0 var(--space-8);padding:0;display:grid;gap:10px;font-size:var(--text-sm)}
.terms li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.terms .i{margin-top:2px;color:var(--color-success)}
.nl-page .acts{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.nl-page .after{margin:var(--space-6) 0 0;font-size:var(--text-sm);color:var(--color-text-2)}
/* Footer sign-up (.sf-news is a div now; the form and the sent state sit inside it): the specimen's inline spacing, in a class. */
.sf-news .nl-form,.sf-news .nl-done{margin-top:var(--space-5);max-width:440px}
.nl-page .nl-form{max-width:480px}

/* Emails: 600px, white on the reader's grey, the brand's pill button.
   Gmail drops Anton, so headings fall back to Arial Narrow / Impact there; the rest is system sans. */
.mail{max-width:600px;margin-inline:auto;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 1px 2px rgb(19 20 22 / .06)}
.mail .m-top{padding:var(--space-5) var(--space-8);border-bottom:1px solid var(--color-line)}
.mail .m-top img{height:24px;width:auto}
.mail .m-body{padding:var(--space-8);display:grid;gap:var(--space-4)}
.mail .m-body p{margin:0;font-size:var(--text-base);line-height:1.6;color:var(--color-text-2);max-width:52ch}
.mail .m-body .btn{justify-self:start}
.mail .m-body .small{font-size:var(--text-sm);color:var(--color-text-3)}
.mail .m-foot{padding:var(--space-5) var(--space-8) var(--space-6);background:var(--color-band);font-size:var(--text-xs);line-height:1.6;color:var(--color-text-2)}
.mail .m-foot a{color:var(--color-ink)}
.mail .terms{margin:0}
@media (max-width:599px){.mail .m-top,.mail .m-body,.mail .m-foot{padding-inline:var(--space-5)}}

/* =====================================================================
   MENUS AND SEARCH (D6, rev 13, owner sign-off 2026-10-21; specimen
   ../Redesign-2026-10/menus-search.html). Desktop (1100px+): categories and Collections in
   the grey bar are buttons that open one panel at a time on click (not hover); click again,
   Esc, the dimmed page or a link closes it. The three-line button opens All categories:
   every category as text in three columns (icon + all sub-categories) with three tiles
   beside it. Phone: full-screen menu, one level of drill-down. Search suggests from two
   letters: up to 4 products, 3 categories, 2 collections; Indonesian words map to categories.
   No product counts in menus. Category icons are picked in Office → Categories.
   Motion: the phone menu's drill-down slide (260ms) is the one movement before roadmap 24; it
   shows which way you went. Everything else here changes colour only.
   Build: search is the ARIA combobox pattern: the input is role=combobox (aria-expanded,
   aria-controls, aria-activedescendant), .sugg is the listbox, each .sg-sec a role=group named
   by its .sg-h, each row a role=option; ↑ ↓ move aria-activedescendant, focus stays in the input.
   Recent-search × and Clear sit outside the options (Delete removes the highlighted recent one).
   .mega       a category's panel: .mega-in (sub-categories + two collection tiles .mtile)
   .mhalf      All categories: .mcols of .mgroup, .mfeat of .ftile (.tall, .plain)
   .drawer     phone menu: .dr-top, .dr-view.main / .sub.is-on, .dr-row, .dr-lead .ic
   .sugg       suggestions: .sg-sec, .sg-row (aria-selected), .sg-chips, .sg-none; .sheet on a phone
   ===================================================================== */
/* desktop category row: categories and Collections are buttons (click to open), Our work and About are links */
.sh-cats button{display:flex;align-items:center;gap:2px;height:46px;padding:0;border:0;border-bottom:2px solid transparent;background:none;font:500 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2);white-space:nowrap;cursor:pointer}
.sh-cats button:hover{color:var(--color-ink)}
.sh-cats button[aria-expanded=true]{border-bottom-color:var(--color-ink);color:var(--color-ink);font-weight:600}
.sh-cats button[aria-expanded=true] .i{transform:rotate(180deg)}
.sh-all[aria-expanded=true]{background:var(--color-band)}

/* mega menu: one white sheet under the header, page dimmed below it */
.mega{position:absolute;left:0;right:0;top:100%;z-index:39;background:var(--color-surface);border-top:1px solid var(--color-line);box-shadow:var(--shadow-bar)}
.mega[hidden]{display:none}
.mega-in{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-12);max-width:var(--container);margin-inline:auto;padding:var(--space-8) 40px var(--space-10)}
.mega-h{margin:0 0 var(--space-5);font:400 var(--text-h3)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.mega-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px var(--space-6);margin:0 0 var(--space-6);padding:0;list-style:none}
.mega-list a{display:flex;align-items:center;min-height:40px;font:500 var(--text-base)/1.25 var(--font-sans);color:var(--color-ink);text-decoration:none}
.mega-list a:hover{text-decoration:underline;text-underline-offset:4px}
.mega-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-content:start}
.mtile{display:grid;gap:10px;color:var(--color-ink);text-decoration:none}
.mtile img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);background:var(--color-photo)}
.mtile>span{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 var(--text-sm)/1.3 var(--font-sans)}
.mtile small{display:block;font:500 var(--text-xs)/1 var(--font-sans);color:var(--color-text-3);margin-bottom:4px}
.mtile:hover span b{text-decoration:underline;text-underline-offset:3px}
.ftile-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--color-surface)}
.ftile-ic .i{width:22px;height:22px}
/* All categories (the three-line button): every category as text on the left, a small bento on the right (owner pick B, round 3) */
.mhalf{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-10);max-width:var(--container);margin-inline:auto;padding:var(--space-8) 40px var(--space-10)}
.mcols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.mgroup+.mgroup{margin-top:var(--space-6)}
.mgroup h3{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-2);font:600 var(--text-base)/1.25 var(--font-sans)}
.mgroup h3 a{color:var(--color-ink);text-decoration:none}
.mgroup h3 a:hover,.mgroup li a:hover{text-decoration:underline;text-underline-offset:3px}
.mgroup .ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:999px;background:var(--color-band)}
.mgroup .ic .i{width:18px;height:18px}
.mgroup ul{display:grid;margin:0;padding:0 0 0 44px;list-style:none}
.mgroup li a{display:block;padding:5px 0;font-size:var(--text-sm);color:var(--color-text-2);text-decoration:none}
.mfeat{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:400px}
.ftile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:var(--space-4);overflow:hidden;border-radius:var(--radius-md);background:var(--color-photo);color:var(--color-ink);text-decoration:none}
.ftile.tall{grid-row:span 2}
.ftile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ftile>span:last-child{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--color-surface);font:600 var(--text-sm)/1.2 var(--font-sans)}
.ftile.plain{justify-content:space-between;padding:var(--space-5);background:var(--color-band)}
.ftile.plain:hover{background:var(--color-line)}
.ftile.plain b{font:600 var(--text-base)/1.25 var(--font-sans)}
.ftile.plain small{font-size:var(--text-sm);color:var(--color-text-2);line-height:1.4}
.ftile.plain>span:last-child{all:unset;display:grid;gap:4px}
.mega-dim{position:absolute;left:0;right:0;top:100%;height:100dvh;z-index:38;background:var(--color-scrim-soft)}
.mega-dim[hidden]{display:none}

/* phone menu: full screen, drill-down panels */
.drawer{position:fixed;inset:0;z-index:60;background:var(--color-surface);overflow:hidden}
.dr-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);height:60px;padding:0 8px 0 var(--gutter);border-bottom:1px solid var(--color-line)}
.dr-title{font:600 var(--text-lead)/1 var(--font-sans)}
.dr-back{display:inline-flex;align-items:center;gap:6px;height:44px;margin-left:-10px;padding:0 10px;border:0;border-radius:var(--radius-full);background:none;font:600 var(--text-lead)/1 var(--font-sans);color:var(--color-ink);cursor:pointer}
.dr-back:hover{background:var(--color-band)}
.dr-view{position:absolute;inset:60px 0 0;overflow-y:auto;overscroll-behavior:contain;background:var(--color-surface);transition:transform 260ms var(--ease-out),visibility 0s}
.dr-view.sub{transform:translateX(100%);visibility:hidden;transition:transform 260ms var(--ease-out),visibility 0s 260ms}
.drawer.is-sub .dr-view.main{transform:translateX(-30%)}
.drawer.is-sub .dr-view.sub.is-on{transform:none;visibility:visible;transition:transform 260ms var(--ease-out),visibility 0s}
.dr-list{margin:0;padding:0;list-style:none}
.dr-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:56px;padding:0 var(--gutter);border:0;border-bottom:1px solid var(--color-line);background:none;font:500 var(--text-base)/1.3 var(--font-sans);color:var(--color-ink);text-align:left;text-decoration:none;cursor:pointer}
.dr-row:hover{background:var(--color-band)}
.dr-row.strong{font-weight:600}
.dr-row .i{color:var(--color-text-3)}
.dr-row img{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-photo)}
.dr-row .grow{flex:1}
.dr-lead{display:flex;align-items:center;gap:var(--space-3)}
.dr-lead .ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:999px;background:var(--color-band)}
.dr-lead .ic .i{width:20px;height:20px;color:var(--color-ink)}
.dr-more{display:grid;gap:var(--space-4);padding:var(--space-6) var(--gutter) var(--space-8);background:var(--color-band)}
.dr-more .btn{width:100%}
.dr-links{display:grid;margin:0;padding:0;list-style:none}
.dr-links a{display:flex;align-items:center;gap:10px;min-height:44px;font:500 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);text-decoration:none}
.dr-links small{color:var(--color-text-2);font-size:var(--text-xs)}
.dr-links .dr-loc{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font:500 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);cursor:pointer}  /* currency and language: a button in the link list */
.dr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding:var(--space-6) var(--gutter) var(--space-8)}

/* search suggestions: hangs under the search bar; on a phone it fills the screen under the bar */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:45;max-height:min(70vh,560px);overflow-y:auto;container-type:inline-size;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-float)}
.sugg:not(.sheet){min-width:min(640px,calc(100vw - 32px))}
.sugg.sheet{border:0;border-top:1px solid var(--color-line);border-radius:0;box-shadow:none}
.sg-body{display:grid}
@container (min-width:600px){.sg-body{grid-template-columns:1.35fr 1fr}.sg-body>.sg-sec+.sg-sec{border-top:0;border-left:1px solid var(--color-line)}}
.sg-sec{padding:var(--space-3) 0}
.sg-sec+.sg-sec{border-top:1px solid var(--color-line)}
.sg-h{display:flex;align-items:center;justify-content:space-between;margin:0;padding:var(--space-2) var(--space-4);font:600 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-3)}
.sg-h button{border:0;background:none;padding:10px 8px;margin:-10px -8px;font:inherit;color:var(--color-text-2);text-decoration:underline;cursor:pointer}
.sg-list{margin:0;padding:0;list-style:none}
.sg-row{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:6px var(--space-4);font:500 var(--text-sm)/1.3 var(--font-sans);color:var(--color-ink);text-decoration:none}
.sg-row:hover,.sg-row[aria-selected=true]{background:var(--color-band)}
.sg-row .i{color:var(--color-text-3)}
.sg-row b{font-weight:700}
.sg-row .grow{flex:1;min-width:0}
.sg-row small{display:block;margin-top:2px;font:400 var(--text-xs)/1.3 var(--font-sans);color:var(--color-text-2)}
.sg-row img{width:52px;height:52px;flex:none;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-photo)}
.sg-recent{display:flex;align-items:center;padding-right:var(--space-2)}
.sg-recent .sg-row{flex:1}
.sg-recent .x{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:none;color:var(--color-text-3);cursor:pointer}
.sg-recent .x:hover{background:var(--color-band);color:var(--color-ink)}
.sg-note{margin:0;padding:var(--space-3) var(--space-4) 0;font-size:var(--text-xs);color:var(--color-text-2)}
.sg-note b{color:var(--color-text);font-weight:600}
.sg-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-1) var(--space-4) var(--space-2)}
.sg-chips a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--radius-full);background:var(--color-band);font:500 var(--text-sm)/1 var(--font-sans);color:var(--color-ink);text-decoration:none}
.sg-chips a:hover{background:var(--color-line)}
.sg-all{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--space-4);border-top:1px solid var(--color-line);font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink);text-decoration:none}
.sg-all:hover{background:var(--color-band)}
.sg-none{padding:var(--space-5) var(--space-4) var(--space-2)}
.sg-none h3{margin:0 0 6px;font:600 var(--text-base)/1.3 var(--font-sans)}
.sg-none p{margin:0 0 var(--space-3);font-size:var(--text-sm);color:var(--color-text-2);max-width:52ch}

/* =====================================================================
   MODALS AND SHEETS (D7, rev 14, owner sign-off 2026-10-21; specimen
   ../Redesign-2026-10/modals-sheets.html).
   One family. The layer is the browser's own <dialog> (showModal): Esc closes, focus stays
   inside, the page behind is inert. The layer is a size container, so the same markup is a
   bottom sheet under 700px and a centred box from 700px, in the app and in these frames.
   .dlg-layer  the dialog element, full screen, dims the page (.is-zoom: ink, for the gallery)
   .dlg-pos    places the box: bottom on a phone, centre from 700px
   .dlg        the box: .dlg-head (title + .dlg-x), .dlg-body (scrolls), .dlg-foot (buttons)
               widths from 700px: .sm 440 (confirm), default 560, .wide 760 (tables)
   .dtable     tables inside (size chart, price by quantity, breakdown); tr.is-on = yours
   .lc-pop     currency and language: a small dropdown on desktop, a sheet on a phone
   .zoom       gallery zoom: full screen on every size
   ===================================================================== */
.dlg-layer{position:fixed;inset:0;z-index:70;container:dlg / inline-size;background:var(--color-scrim);overflow:hidden}
dialog.dlg-layer{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit}
dialog.dlg-layer::backdrop{background:transparent}
.dlg-layer.is-zoom{background:var(--color-ink)}
.dlg-pos{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);align-items:end;padding-top:48px}
.dlg{position:relative;display:flex;flex-direction:column;max-height:100%;background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -12px 32px -12px rgb(19 20 22 / .24);padding-bottom:env(safe-area-inset-bottom)}
.dlg::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:var(--color-line)}  /* sheet grip, a cue only: tap the dim area or × to close */
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-6) 12px var(--space-4) var(--gutter)}
.dlg-head h2{margin:0;font:600 22px/1.2 var(--font-sans);text-transform:none;letter-spacing:-.01em;text-wrap:balance}  /* a utility heading: sans (rev 25; was Anton caps) */
.dlg-x{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--color-band);color:var(--color-ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.dlg-x:hover{background:var(--color-line)}
.dlg-x:focus-visible{border-radius:50%}
.dlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--gutter) var(--space-6)}
.dlg-body>p{margin:0 0 var(--space-4);font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2);max-width:60ch}
.dlg-body>p b{color:var(--color-text);font-weight:600}
.dlg-h{margin:var(--space-6) 0 var(--space-3);font:600 var(--text-base)/1.3 var(--font-sans)}
.dlg-ctx{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-5)}
.dlg-foot{display:flex;gap:var(--space-3);padding:var(--space-4) var(--gutter);border-top:1px solid var(--color-line)}
.dlg-foot .btn{flex:1}
.dlg-fine{margin:var(--space-4) 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-3)}
.dlg-body>.dlg-fine{margin:var(--space-4) 0 0}  /* beats .dlg-body>p, which would zero the gap */
@container dlg (min-width:700px){
  .dlg-pos{align-items:center;justify-items:center;padding:32px}
  .dlg{width:min(560px,100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding-bottom:0}
  .dlg.wide{width:min(760px,100%)}
  .dlg.sm{width:min(440px,100%)}
  .dlg::before{content:none}
  .dlg-head{padding:var(--space-6) var(--space-5) var(--space-4) var(--space-8)}
  .dlg-head h2{font-size:26px}
  .dlg-body{padding:0 var(--space-8) var(--space-8)}
  .dlg-foot{justify-content:flex-end;padding:var(--space-4) var(--space-8)}
  .dlg-foot .btn{flex:none}
}

/* tables: size chart, price by quantity, breakdown */
.dtable{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.dtable th{padding:0 12px 10px;text-align:left;font:600 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-3);border-bottom:1px solid var(--color-line);white-space:nowrap}
.dtable td{height:48px;padding:0 12px;border-bottom:1px solid var(--color-line);white-space:nowrap}
.dtable .num{text-align:right}
.dtable td small{display:block;font-size:var(--text-xs);color:var(--color-text-3);font-weight:400}
.dtable tr.is-on td{background:var(--color-band);font-weight:600;border-bottom-color:transparent}
.dtable tr.is-on td:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.dtable tr.is-on td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.dtable th,.dtable td{padding-inline:8px}
.dtable .badge{display:flex;width:max-content;margin:4px 0 0}  /* phone: under the label, so the table fits 390 */
.dtable tr:has(.badge) td{height:64px}
@container dlg (min-width:700px){
  .dtable th,.dtable td{padding-inline:12px}
  .dtable .badge{display:inline-flex;margin:0 0 0 8px;vertical-align:1px}
  .dtable tr:has(.badge) td{height:48px}
}
.dsum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-5) 12px 0}
.dsum span{font-size:var(--text-sm);color:var(--color-text-2)}
.dsum b{font:700 24px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@container dlg (min-width:700px){.dsum b{font-size:32px}}
.dtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.dtop p{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}

/* size chart: how to measure */
.howto{display:grid;gap:var(--space-5);align-items:center;margin-top:var(--space-6);padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-band)}
.howto svg{width:150px;height:auto;justify-self:center}
.howto ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:var(--text-sm);line-height:1.45}
.howto li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.howto .k{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-ink);color:var(--color-on-ink);font:600 var(--text-xs)/1 var(--font-sans)}
.howto li p{margin:0}
.howto li b{display:block;font-weight:600}
.howto li span:not(.k){color:var(--color-text-2)}
@container dlg (min-width:700px){.howto{grid-template-columns:170px 1fr;gap:var(--space-8);padding:var(--space-6) var(--space-8)}}

/* material */
.mat-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);background:var(--color-photo);margin-bottom:var(--space-5)}  /* square, like every catalogue photo (owner round 2) */
.mat-name{margin:0 0 var(--space-2);font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.mat-spec{display:grid;grid-template-columns:auto 1fr;gap:12px var(--space-6);margin:0;font-size:var(--text-sm)}
.mat-spec dt{color:var(--color-text-2)}
.mat-spec dd{margin:0;font-weight:600}
.mat-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4) var(--space-2);margin:0;padding:0;list-style:none}  /* 4 on a phone, 8 from 700px (owner round 2) */
@container dlg (min-width:700px){.mat-cols{grid-template-columns:repeat(8,minmax(0,1fr))}}
.mat-cols li{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;font-size:var(--text-xs);line-height:1.25;color:var(--color-text-2);overflow-wrap:anywhere}
.mat-cols .swatch{width:32px;height:32px}

/* price by quantity: the nudge */
.tier-nudge{display:flex;gap:12px;align-items:flex-start;margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.5}
.tier-nudge .i{margin-top:2px}
.tier-nudge p{margin:0}
.tier-nudge b{font-weight:600}

/* confirm remove: the line being removed */
.dline{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-band)}
.dline img{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-photo)}
.dline b{display:block;font-weight:600;font-size:var(--text-sm)}
.dline span{display:block;font-size:var(--text-xs);color:var(--color-text-2);line-height:1.4}
.dline .price{margin-top:4px;font-size:var(--text-sm);color:var(--color-text)}
.dline + p{margin:var(--space-4) 0 0}

/* ask us: WhatsApp first, then the form */
.wa{display:grid;gap:8px}
.wa .btn{width:100%}
.wa small{font-size:var(--text-xs);color:var(--color-text-3);text-align:center}
.dlg-or{display:flex;align-items:center;gap:12px;margin:var(--space-6) 0 var(--space-5);font:500 var(--text-xs)/1 var(--font-sans);color:var(--color-text-3)}
.dlg-or::before,.dlg-or::after{content:"";flex:1;height:1px;background:var(--color-line)}
.dform{display:grid;gap:var(--space-4)}
.dform .dlg-ctx{margin:0}
.dform .two{display:grid;gap:var(--space-4)}
@container dlg (min-width:700px){.dform .two{grid-template-columns:1fr 1fr}}
.textarea{display:block;width:100%;min-height:120px;padding:12px var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-control-line);background:var(--color-surface);color:var(--color-text);font:400 var(--text-base)/1.5 var(--font-sans);resize:vertical;transition:border-color var(--dur-fast) var(--ease-out)}
.textarea::placeholder{color:var(--color-text-3)}
.textarea:hover{border-color:var(--color-ink)}
.textarea:focus-visible{border-color:var(--color-ink);box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.attach{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.attach .hint{font-size:var(--text-xs);color:var(--color-text-3)}
.dlg .nl-done{padding:var(--space-2) 0}

/* currency and language */
.lc{position:relative}
.lc-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:45;width:320px;padding:var(--space-4) var(--space-5) var(--space-5);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-float)}
.lc-group{margin:0;padding:0;border:0;min-width:0}
.lc-group+.lc-group{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.lc-group legend{padding:0;margin-bottom:4px;font:600 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-3)}
.lc-opt{min-height:44px;gap:12px}
.lc-opt span{flex:1}
.lc-opt small{font:500 var(--text-xs)/1 var(--font-sans);color:var(--color-text-3)}
.lc-note{margin:var(--space-3) 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-3)}

/* gallery zoom: full screen, ink */
.zoom{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);color:var(--color-on-ink)}
.zoom :focus-visible{box-shadow:var(--focus-ring-on-dark)}
.zm-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px 0 var(--gutter);font:600 var(--text-sm)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.zm-top span{color:var(--color-on-ink-2)}
.zoom .dlg-x{background:var(--color-on-ink-line);color:var(--color-on-ink)}
.zoom .dlg-x:hover{background:rgb(255 255 255 / .28)}
.zm-stage{position:relative;display:grid;place-items:center;min-height:0;container-type:size;padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}
.zm-pic{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;background:var(--color-photo)}  /* the largest square that fits */
.zm-pic>img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.zm-pic{overflow:hidden}.zm-pic.is-2x>img{transform:scale(2);cursor:zoom-out}  /* tap the photo: 2x, tap again: back (no animation) */
.zm-nav{position:absolute;top:50%;translate:0 -50%;display:none;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:rgb(255 255 255 / .94);color:var(--color-ink);cursor:pointer}
.zm-nav:hover{background:var(--color-surface)}
.zm-nav:focus-visible{border-radius:50%}
.zm-prev{left:24px}.zm-next{right:24px}
/* thumbs (dots on a phone) sit on the photo, along its bottom edge (owner round 2) */
.zm-foot{position:absolute;left:0;right:0;bottom:var(--space-4);display:flex;justify-content:center;align-items:center;gap:8px;padding:0 var(--space-4)}
.zm-dot{width:8px;height:8px;border-radius:50%;background:rgb(19 20 22 / .24)}
.zm-dot.is-on{background:var(--color-ink)}
.zm-thumb{display:none;width:56px;height:56px;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-photo);cursor:pointer;box-shadow:0 0 0 1px rgb(19 20 22 / .12),0 6px 14px -6px rgb(19 20 22 / .4)}
.zm-thumb img{width:100%;height:100%;object-fit:cover}
.zm-thumb[aria-current=true]{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-ink)}
.zoom .zm-thumb:focus-visible{box-shadow:var(--focus-ring)}
@container dlg (min-width:700px){
  .zm-top{padding:0 20px 0 32px}
  .zm-stage{padding:0 104px}
  .zm-nav{display:grid}
  .zm-dot{display:none}
  .zm-thumb{display:block}
}

/* =====================================================================
   FEEDBACK STATES (D8, rev 15, owner sign-off 2026-10-22; specimen
   ../Redesign-2026-10/feedback-states.html).
   .page       <main> of every storefront page is a size container, so blocks size to it
   .toasts     the one toast spot: bottom centre on a phone, bottom left from 700px
   .toast      soft state colour (owner pick 2026-10-22): grey neutral, .is-ok green, .is-error red (stays until closed).
               5 s, 8 s when it has a button (View, Undo, Try again). Never while a dialog is open:
               showModal() puts the dialog above every z-index and makes the page inert, so news
               from inside a dialog shows in the dialog as a .notice
   .dlg.side   added to cart: the D7 sheet on a phone, a right-hand panel from 700px
   .empty-state      empty page block: icon, title, one line, buttons (popular products below)
   .sk.*       skeleton parts: h (heading), pill, bar (a button's shape), sq (square photo)
   .err-sum    "N things to fix" box at the top of a form after a failed send
   .nf-*       the 404 page
   ===================================================================== */
.page{container:page / inline-size}

.toasts{position:fixed;left:0;right:0;bottom:0;z-index:60;container:toasts / inline-size;display:grid;justify-items:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom) + var(--toast-lift,0px));pointer-events:none}
.toast{--t-fg:var(--color-text);--t-bg:var(--color-band);--t-line:var(--color-line);pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:440px;min-height:56px;padding:6px 6px 6px 16px;border-radius:var(--radius-md);background:var(--t-bg);color:var(--t-fg);box-shadow:inset 0 0 0 1px var(--t-line),var(--shadow-float);font:500 var(--text-sm)/1.4 var(--font-sans)}
.toast.is-ok{--t-fg:var(--color-success);--t-bg:var(--color-success-tint);--t-line:rgb(19 112 63 / .18)}     /* 5.41:1 */
.toast.is-error{--t-fg:var(--color-danger);--t-bg:var(--color-danger-tint);--t-line:rgb(196 43 28 / .18)}  /* 4.81:1 */
.toast>.i{flex:none}
.toast p{flex:1;min-width:0;margin:0;padding:8px 0;text-wrap:pretty}
.toast p small{display:block;font-size:var(--text-xs);font-weight:400}
.toast-act{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 12px;border:0;border-radius:var(--radius-full);background:transparent;color:inherit;font:600 var(--text-sm)/1 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.toast-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.toast-act:hover,.toast-x:hover{background:rgb(19 20 22 / .08)}
@container toasts (min-width:700px){.toasts{justify-items:start;padding:24px}}
/* the app's region is a child of <body>, and a container query cannot style its own container: same rule on the viewport */
@media (min-width:700px){body>.toasts{justify-items:start;padding:24px}}

.dlg-head h2:has(.ok-tick){display:flex;align-items:center;gap:12px}
.ok-tick{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--color-success-tint);color:var(--color-success)}
.ok-tick .i{width:18px;height:18px;stroke-width:2.5}
.atc-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-line);font-size:var(--text-sm)}
.atc-sum span{display:grid;gap:2px}
.atc-sum small{font-size:var(--text-xs);color:var(--color-text-3)}
.atc-sum b{font:600 var(--text-lead)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlg.side .dline{padding:0;background:none}  /* the item sits on white, so the price-break nudge is the panel's one grey box */
.atc-more{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.atc-more a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 -8px;padding:6px 8px;border-radius:var(--radius-md);color:inherit;text-decoration:none}
.atc-more a:hover{background:var(--color-band)}
.atc-more img{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-photo)}
.atc-more b{display:block;font:600 var(--text-sm)/1.3 var(--font-sans)}
.atc-more small{font-size:var(--text-xs);color:var(--color-text-2)}
.atc-more .i{color:var(--color-text-3)}
@container dlg (min-width:700px){
  .dlg-pos:has(>.dlg.side){justify-items:end;align-items:stretch;padding:0}
  .dlg.side{width:min(440px,100%);height:100%;border-radius:0}
  .dlg.side .dlg-head{padding:var(--space-6) var(--space-4) var(--space-4) var(--space-6)}
  .dlg.side .dlg-body{padding:0 var(--space-6) var(--space-6)}
  .dlg.side .dlg-foot{padding:var(--space-4) var(--space-6) var(--space-6)}
  .dlg.side .dlg-foot .btn{flex:1}
}

.empty-state{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-12) var(--space-5);border-radius:var(--radius-lg);background:var(--color-band);text-align:center}
.empty-ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:var(--space-2);border-radius:50%;background:var(--color-surface);color:var(--color-ink)}
.empty-ic .i{width:26px;height:26px;stroke-width:1.5}
.empty-state p{margin:0;max-width:44ch;color:var(--color-text-2);line-height:1.55;text-wrap:pretty}
.empty-state .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-3);width:100%}
@container page (max-width:599px){.empty-state .acts .btn{flex:1 1 100%}}
@container page (min-width:700px){.empty-state{padding:var(--space-16) var(--space-10)}}

.sk.h{height:40px;border-radius:8px}
.sk.pill{flex:none;width:112px;height:40px;border-radius:999px}
.sk.bar{height:56px;border-radius:999px}
.sk.sq{height:auto;aspect-ratio:1;border-radius:var(--radius-md)}
.band :is(.sk,.card.is-loading .tile){background:var(--color-line)}  /* band-grey skeletons vanish on a band */

.err-sum{display:grid;grid-template-columns:auto 1fr;margin-bottom:var(--space-2)}
.err-sum[hidden]{display:none}
.err-sum ul{margin:6px 0 0;padding-left:1.1em;display:grid;gap:4px}
.err-sum a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.err-sum:focus-visible{box-shadow:var(--focus-ring)}
.field .error[hidden]{display:none}
.field .error .i{flex:none}
.field .opt{font-weight:400;color:var(--color-text-3)}

.nf{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-8) 0 0}
.nf-word{position:relative;isolation:isolate;margin:0;font:400 min(280px,calc((100cqi - 2 * var(--gutter)) / 3.85))/.86 var(--font-display);  /* "MISPRINT." is 3.73em wide in Anton (+ the offset plate): fills the line, never wider */text-transform:uppercase;letter-spacing:0;color:var(--color-ink);white-space:nowrap}
.nf-word::before{content:attr(data-word);position:absolute;inset:0;z-index:-1;translate:.035em .03em;color:var(--color-accent)}  /* the orange plate printed off register */
.nf-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.nf-body h1{margin-bottom:var(--space-3)}
.nf-find{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.nf-find .sh-search{grid-area:auto;height:56px}  /* the header bar's grid-area would misplace it here */
.nf-find .sh-search-wrap{grid-area:auto}  /* the app wraps the bar (suggestions hang under it); same reason */
.nf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.nf-cats{display:flex;flex-wrap:wrap;gap:8px;padding-top:var(--space-6);border-top:1px solid var(--color-line)}
.nf-cats .btn{border-color:var(--color-line)}
.nf-cats .btn:hover{border-color:var(--color-ink);background:transparent}
@container page (max-width:599px){.nf-acts .btn{flex:1 1 100%}.nf-cats{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}}
@container page (min-width:900px){.nf-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--space-16)}.nf{padding-top:var(--space-12)}}

/* =====================================================================
   CATEGORY PAGE (D9, signed off 2026-10-22). Prefix cp-: the old
   storefront.css already has .crumb, .subcats, .catbar, .fgroup, .fchip.
   .cp-band   compact grey title band: .cp-crumb, h1, one line, .cp-pills (under 1000px)
   .cp-photo  optional category photo, desktop only (1000px+): right half of the band, grey gradient on its left
   .cp-layout sidebar + main from 1000px (page container), one column below
   .cp-side   .cp-nav (sub-categories) and .cp-group fieldsets, every group open
   .cp-tools  phone/tablet: Filters and Sort buttons, sticky under the header (build sets --head-h to the header's height; the sticky header covers top:0)
   .cp-bar    count left, Sort right; .cp-chips chosen filters; .cp-more Show more
   ===================================================================== */
.cp-band{padding:var(--space-6) 0 var(--space-8)}
.cp-photo{display:none}
.cp-crumb{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--space-3);padding:0;list-style:none;font-size:var(--text-sm);color:var(--color-text-2)}
.cp-crumb li+li::before{content:"/";margin-right:6px}
.cp-crumb a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.cp-crumb a:hover{color:var(--color-ink);text-decoration-color:var(--color-ink)}
.cp-crumb [aria-current]{color:var(--color-text)}
.cp-band h1{margin:0;overflow-wrap:anywhere}  /* a typed query can be one long word */
.cp-band p{margin:var(--space-3) 0 0;max-width:64ch;color:var(--color-text-2);line-height:1.5;text-wrap:pretty}
.cp-pills{display:flex;gap:8px;margin:calc(var(--space-5) - 4px) calc(var(--gutter) * -1) -4px;padding:4px var(--gutter);overflow-x:auto;scrollbar-width:none}
.cp-pills::-webkit-scrollbar{display:none}
.cp-pills a{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-ink);font:600 var(--text-sm)/1 var(--font-sans);text-decoration:none}
.cp-pills a:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.cp-pills a[aria-current]{background:var(--color-ink);color:var(--color-on-ink)}
.cp-pills a:focus-visible{border-radius:var(--radius-full)}

.cp-layout{padding-top:var(--space-4);padding-bottom:var(--space-16)}  /* air before the footer */
.cp-side,.cp-sort{display:none}
.cp-tools{position:sticky;top:var(--head-h,0px);z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 calc(var(--gutter) * -1) var(--space-4);padding:var(--space-3) var(--gutter);background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.cp-tools .btn{width:100%}
.cp-tools .n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--color-ink);color:var(--color-on-ink);font-size:var(--text-xs)}

.cp-nav{display:grid;padding-bottom:var(--space-6);border-bottom:1px solid var(--color-line)}
.cp-nav h2,.cp-group legend{margin:0 0 var(--space-3);padding:0;font:600 var(--text-base)/1.3 var(--font-sans)}
.cp-nav a{display:flex;align-items:center;min-height:36px;padding:0 12px;margin-inline:-12px;border-radius:var(--radius-sm);color:var(--color-text-2);font-size:var(--text-sm);text-decoration:none}
.cp-nav a:hover{color:var(--color-ink);background:var(--color-band)}
.cp-nav a[aria-current]{color:var(--color-ink);font-weight:600;background:var(--color-band)}
.cp-group{display:grid;gap:4px;margin:0;padding:0 0 var(--space-6);border:0;border-bottom:1px solid var(--color-line)}
.cp-group:last-child{border-bottom:0}
.cp-group .check{min-height:32px}
.cp-group .check:hover input{border-color:var(--color-ink)}
.cp-group .n{margin-left:auto;color:var(--color-text-3);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.cp-group .check:has(input:checked){font-weight:600}

.cp-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:40px;margin-bottom:var(--space-4)}
.cp-count{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}
.cp-count b{color:var(--color-text);font-weight:600}
.cp-sort{align-items:center;gap:10px;font-size:var(--text-sm);color:var(--color-text-2)}
.cp-sort .select{width:auto;height:40px;padding-left:16px;border-radius:var(--radius-full);font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink)}
.cp-sort .select:focus-visible{border-radius:var(--radius-full)}
.cp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:calc(var(--space-2) * -1) 0 var(--space-5)}
.cp-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 14px;border:0;border-radius:var(--radius-full);background:var(--color-band);color:var(--color-ink);font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer}
.cp-chip:hover{background:var(--color-line)}
.cp-chip:focus-visible{border-radius:var(--radius-full)}
.cp-clear{min-height:36px;padding:0 6px;border:0;background:none;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em;cursor:pointer}
.cp-clear:hover{text-decoration-color:var(--color-ink)}

.cp-more{display:grid;justify-items:center;gap:var(--space-3);padding-top:var(--space-2)}
.cp-more p{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}
.cp-prog{width:200px;height:4px;border-radius:999px;background:var(--color-band);overflow:hidden}
.cp-prog i{display:block;height:100%;background:var(--color-ink)}
.cp-help{display:grid;gap:var(--space-4);justify-items:start;margin-top:var(--space-16)}
.cp-help p{margin:var(--space-2) 0 0;max-width:52ch;color:var(--color-text-2);line-height:1.55}
.cp-help .acts{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cp-off{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--space-2)}
.cp-pop{margin-top:var(--space-12)}
.cp-pop .sec-head{margin-bottom:var(--space-5)}
.cp-group+.cp-group{margin-top:var(--space-5)}  /* margin, not padding: a fieldset's top padding lands under its legend */

@container page (min-width:1000px){
  .cp-band{padding:var(--space-8) 0 var(--space-10)}
  .cp-band.has-photo{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center}
  .cp-band.has-photo .container{position:relative;z-index:1;width:100%}
  .cp-band.has-photo .cp-crumb,.cp-band.has-photo h1,.cp-band.has-photo p{max-width:min(64ch,46%)}  /* text ends before the photo starts (52%) */
  .cp-band.has-photo .cp-photo{display:block;position:absolute;inset:0 0 0 52%}
  .cp-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
  .cp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--color-band) 0,var(--color-band) 6%,transparent 75%)}
  .cp-pills,.cp-tools{display:none}
  .cp-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--space-10);padding-top:var(--space-8)}
  .cp-side{display:grid;gap:var(--space-6);align-content:start}
  .cp-sort{display:flex}
  .cp-main .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-help{grid-template-columns:1fr auto;align-items:center}
}

/* =====================================================================
   SEARCH RESULTS (D10, signed off 2026-10-22). Builds on CATEGORY PAGE:
   same .cp-band, .cp-layout, .cp-side (Category group first), .cp-bar, .cp-more.
   .sr-kick    "Search results for" over the query (h1) in the band; .sr-note the
               Indonesian-word line under it. No band on no-results pages.
   .sr-hits    row of matching categories, then collections: small photo tiles
               (.sr-hit, .sr-glyph when there is no photo); scrolls sideways under 1000px
   .sr-dym     "Did you mean" line in the no-results .empty-state
   .sr-browse  popular searches and categories (.nf-cats rows) under it, side by side from 1000px
   .sr-none    wraps the no-results page: space under the header (no band above it)
   ===================================================================== */
.sr-kick{margin:0 0 var(--space-2);font:600 var(--text-sm)/1.3 var(--font-sans);color:var(--color-text-2)}
.cp-band .sr-note{margin-top:var(--space-2);font-size:var(--text-sm)}
.sr-hits{display:flex;gap:8px;margin:calc(var(--space-5) - 4px) calc(var(--gutter) * -1) -4px;padding:4px var(--gutter);overflow-x:auto;scrollbar-width:none}
.sr-hits::-webkit-scrollbar{display:none}
.sr-hit{flex:none;display:grid;grid-template-columns:56px auto;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line);color:var(--color-ink);text-decoration:none}
.sr-hit:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.sr-hit:focus-visible{border-radius:var(--radius-md)}
.sr-hit img{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-photo)}
.sr-glyph{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-sm);background:var(--color-photo);color:var(--color-text-3)}
.sr-hit small{display:block;margin-bottom:2px;font-size:var(--text-xs);color:var(--color-text-2)}
.sr-hit b{font:600 var(--text-sm)/1.3 var(--font-sans);white-space:nowrap}
.sr-none{padding-top:var(--space-8)}
.sr-dym{margin:0;font-size:var(--text-lead)}
.sr-dym a{font-weight:600;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:.2em}
.sr-browse{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-10)}
.sr-browse h2{margin:0 0 var(--space-3);font:600 var(--text-base)/1.3 var(--font-sans)}
.sr-browse .nf-cats{padding-top:0;border-top:0}
@container page (min-width:1000px){.sr-hits{flex-wrap:wrap;overflow:visible;margin:var(--space-8) 0 0;padding:0}.sr-browse{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10)}}

/* =====================================================================
   PRODUCT PAGE (D11, signed off 2026-10-22, rev 20; specimen
   ../Redesign-2026-10/product-page.html). Prefix pp-: the old
   storefront.css owns .pdp, .gal, .buy and friends. Every rule sizes to
   <main class="page"> (container queries), so the frames and the app behave the same.
   .pp-top    gallery (7 of 12) + buy column (5 of 12) from 1000px; one column under
   .pp-gal    big square photo, thumbs on its left; a swipe row with dots on a phone
   .pp-buy    name, price, options, size grid, total, buttons, promise
   .pp-sum    total + Add your design: ends the buy column (on desktop the order bar takes over once it scrolls away)
   .pp-dock   phone bar: fixed to the bottom once the size grid is reached, hidden while
              .pp-sum itself is on screen. Render it OUTSIDE main.page: a size container
              is the containing block for position:fixed, so inside it the bar would sit
              at the end of the page
   .acc       details accordions (native details/summary, content in the page source)
   .rv-*      reviews: summary left, list right
   .pp-drop   the slim orange Build your drop box (the page's one orange box)
   ===================================================================== */
.pp{padding-top:var(--space-4)}
.pp .cp-crumb{margin-bottom:var(--space-4)}
.pp-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}

/* gallery */
.pp-gal{position:relative;min-width:0}
.pp-thumbs{display:none}
.pp-view{position:relative}
.pp-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1)}
.pp-slides::-webkit-scrollbar{display:none}
.pp-slides .tile{flex:0 0 100%;scroll-snap-align:start;border-radius:0}
.pp-slides .tile>.badge{top:auto;bottom:12px;left:12px}
.pp-zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgb(255 255 255 / .94);color:var(--color-ink);cursor:zoom-in}
.pp-zoom:hover{background:var(--color-surface)}
.pp-zoom:focus-visible{border-radius:50%}
.pp-gal .fav{top:8px;right:8px;z-index:2}
.pp-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-3)}
.pp-dots i{width:8px;height:8px;border-radius:50%;background:var(--color-scrim-soft)}
.pp-dots i.is-on{background:var(--color-ink)}
.mock{position:absolute;inset:0;display:grid;place-items:center}
.mock svg{width:72%;height:auto;overflow:visible}

/* buy column: head */
.pp-buy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-content:start;min-width:0}  /* minmax: the sideways steps row must not widen the column */
.pp-head{display:grid;gap:var(--space-3)}
.pp-head .badges{display:flex;flex-wrap:wrap;gap:6px}
.pp-name{margin:0;font:600 26px/1.15 var(--font-sans);letter-spacing:-.015em;text-wrap:balance}
.pp-desc{margin:0;line-height:1.55;max-width:56ch}
.pp-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--text-sm)}
.pp-rate a{color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.pp-rate a:hover{text-decoration-color:var(--color-ink)}
.pp-stars{display:inline-flex;gap:2px;color:var(--color-ink)}
.pp-stars .i{width:16px;height:16px;fill:none}
.pp-stars .i.on{fill:currentColor}

/* price: From Rp X each on the left, See all prices on the right */
.pp-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.pp-from{margin:0;font-size:var(--text-base)}
.pp-from b{font:600 24px/1.2 var(--font-sans);font-variant-numeric:tabular-nums}
.pp-from{position:relative}
.info-btn{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;margin-left:4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--color-text-2);vertical-align:middle;cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.info-btn::before{content:"";position:absolute;inset:-8px}  /* 40 x 40 tap area */
.info-btn:hover{color:var(--color-ink)}
.info-btn:focus-visible{border-radius:50%}
.info-btn .i{width:18px;height:18px}
.pp-lgd .lgd-l{display:inline-flex;align-items:center;color:inherit;text-align:left}
.pop{position:absolute;left:0;top:calc(100% + 8px);z-index:5;box-sizing:border-box;width:max-content;max-width:min(280px,100%);padding:14px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-float),inset 0 0 0 1px var(--color-line);background:var(--color-surface);font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.pop[hidden]{display:none}
.pop b{color:var(--color-text);font-weight:600}
.dlg-body>.mat-spec{margin:0 0 var(--space-2);grid-template-columns:minmax(80px,auto) 1fr}
.dlg-body>.mat-spec dd{font-weight:500;color:var(--color-text)}
.pp-price .link-arrow{min-height:32px}

/* steps bar: outside main.page (a size container traps position:fixed), like the phone bar. Hidden until the options are reached. */
.pp-opt,.pp-qty{scroll-margin-top:calc(var(--head-h,0px) + 96px)}
.pp-steps{position:fixed;top:var(--head-h,0px);left:0;right:0;z-index:35;height:44px;background:var(--color-surface);box-shadow:0 1px 0 var(--color-line)}
.pp-steps[hidden]{display:none}
.pp-steps .container{height:100%}
.pp-steps ol{position:relative;display:flex;align-items:center;height:100%;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.pp-steps ol::-webkit-scrollbar{display:none}
.pp-steps li{flex:none;display:flex;align-items:center;gap:4px}
.ps-chev{flex:none;width:14px;height:14px;color:var(--color-text-3)}
.pp-step{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 10px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-2);font:inherit;white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.pp-step:focus-visible{border-radius:var(--radius-full)}
.pp-step b{font:500 14px/1.2 var(--font-sans)}
.pp-step[aria-current=step]{color:var(--color-ink);background:var(--color-band)}
.pp-step[aria-current=step] b{font-weight:600}
.pp-step:hover{color:var(--color-ink)}
.ps-i{position:relative;display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B9BDC4;transition:background-color var(--dur-fast) var(--ease-out)}
.ps-i .i{width:10px;height:10px;stroke-width:3;color:var(--color-success)}
[data-s=done] .ps-i{background:var(--color-success-tint);box-shadow:none}
[data-s=cur] .ps-i{box-shadow:inset 0 0 0 1.5px var(--color-text-3)}
[data-s=cur] .ps-i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-text-3)}
[data-s=low] .ps-i{background:var(--color-warning-tint);box-shadow:none}
[data-s=low] .ps-i::before,[data-s=low] .ps-i::after{content:"";position:absolute;left:7px;width:2px;border-radius:1px;background:var(--color-warning)}
[data-s=low] .ps-i::before{top:3px;height:6px}
[data-s=low] .ps-i::after{top:11px;height:2px}
.ps-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-line)}
.ps-line i{display:block;width:var(--v,0%);height:100%;background:var(--color-success)}
@media (min-width:1000px){.pp-steps{display:none}}  /* phone only; desktop has the order bar (.pp-bar) */

/* options */
.pp-cfg{display:grid;gap:var(--space-6)}
.pp-opt{margin:0;padding:0;border:0;min-width:0}
.pp-lgd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);width:100%;margin-bottom:10px;padding:0;font-size:var(--text-sm)}
.pp-lgd b{font-weight:600}
.pp-lgd span{color:var(--color-text-2);text-align:right}
/* .lk: a text button that opens a box (Size chart, See breakdown); button.link-arrow is the same look for See all prices */
.lk,button.link-arrow{padding:0;border:0;background:none;cursor:pointer}
.lk{font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.lk:hover{text-decoration-color:var(--color-ink)}
.pp-swatches{display:flex;flex-wrap:wrap;gap:8px}
.pp-cgroup+.pp-cgroup{margin-top:var(--space-4)}
.pp-cgroup>small{display:block;margin-bottom:6px;font-size:var(--text-xs);color:var(--color-text-2)}
.ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.ocard{position:relative;display:grid;gap:2px;align-content:start;min-height:72px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-control-line);background:var(--color-surface);cursor:pointer;font-size:var(--text-sm);line-height:1.35;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ocard input{position:absolute;opacity:0;pointer-events:none}
.ocard b{font-weight:600}
.ocard small{font-size:var(--text-xs);color:var(--color-text-2)}
.ocard .d{margin-top:4px;font-weight:600;font-variant-numeric:tabular-nums}
.ocard .d.inc{font-weight:500;color:var(--color-text-2)}
.ocard:hover{border-color:var(--color-ink)}
.ocard:has(input:checked){background:var(--color-band);border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}  /* "your choice": band + ink edge */
.ocard:has(input:focus-visible){box-shadow:var(--focus-ring)}
.ocard:has(input:checked:focus-visible){box-shadow:inset 0 0 0 1px var(--color-ink),var(--focus-ring)}
.ocard.tick{padding-right:40px}
.ocard.tick::after{content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--color-control-line);background:var(--color-surface)}
.ocard.tick:has(input:checked)::after{background:var(--color-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}

/* quantity: the size grid (or one stepper) */
.pp-qty{display:grid;gap:var(--space-3)}
.pp-qty h2{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.pp-qty>p{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}
.pp-qty>p :is(a,.lk){color:var(--color-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.pp-qty .sizes{grid-template-columns:repeat(4,minmax(0,1fr))}  /* 7 sizes: 4 + 3 on a phone, one row of 7 from 500px */
.pp-qty .size{padding:10px 6px 8px;align-content:start}
.pp-qty .size label{font:600 var(--text-sm)/1 var(--font-sans)}
.pp-qty .size input{height:44px;font-size:var(--text-base);-moz-appearance:textfield;appearance:textfield}
.pp-qty .size input::-webkit-inner-spin-button,.pp-qty .size input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pp-qty .size input::placeholder{color:var(--color-text-3)}
.pp-qty .size input:focus-visible{box-shadow:var(--focus-ring);border-radius:6px}
.pp-qty .size small{min-height:14px;font:500 11px/14px var(--font-sans);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.pp-qty .stepper{justify-self:start}
.pp-qty .stepper input{-moz-appearance:textfield;appearance:textfield}
.pp-qty .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-qty .notice[hidden],.pp-qty .tier-nudge[hidden]{display:none}
.pp-qty .notice p,.pp-qty .tier-nudge p{margin:0}
.pp-qty .tier-nudge{margin-top:var(--space-1)}

/* total + buttons */
.pp-sum{display:grid;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--color-line);background:var(--color-surface)}
.pp-tot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.pp-tot>span{display:grid;gap:4px;font-size:var(--text-sm)}
.pp-tot>span b{font-weight:600}
.pp-tot>span{position:relative}
.pp-tot>span small{font-size:var(--text-xs);color:var(--color-text-2)}
.pp-tot .pop{top:auto;bottom:calc(100% + 8px)}  /* open upwards */
.pp-lk{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em;cursor:pointer}
.pp-lk:hover{text-decoration-color:var(--color-ink)}
.pp-tot>span b.is-low{color:var(--color-warning)}
.pp-tot>div{display:grid;justify-items:end;gap:6px}
.pp-tot strong{font:400 34px/1 var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-tot strong[aria-busy=true],.pp-dock b[aria-busy=true]{opacity:.5}  /* the price on screen is for earlier choices */
.pp-tot>div :is(a,.lk){font:600 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-2);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.pp-tot>div :is(a,.lk):hover{color:var(--color-ink)}
.pp-sum .notice p{margin:0}
.pp-sum .btn-lg{width:100%}
.pp-alt{display:grid;justify-items:center;gap:4px;text-align:center}
.pp-alt p{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2);text-wrap:balance}
.pp-alt p b{color:var(--color-text);font-weight:600}
.pp-promise{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0;padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.5}
.pp-promise .i{margin-top:1px}
.pp-promise b{display:block;font-weight:600}
.pp-promise span{color:var(--color-text-2)}
.pp-facts{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2)}
.pp-facts li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.pp-facts .i{margin-top:1px;color:var(--color-ink)}
.pp-facts b{color:var(--color-text);font-weight:600}
.pp-facts a{color:var(--color-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}
.pp-facts a:hover{text-decoration-color:var(--color-ink)}

/* phone bar */
.pp-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--color-surface);box-shadow:0 -1px 0 var(--color-line),0 -10px 24px -14px rgb(19 20 22 / .28)}
.pp-dock[hidden]{display:none}
.pp-dock>span{display:grid;gap:2px;min-width:0;font-size:var(--text-xs);color:var(--color-text-2)}
.pp-dock>span b{font:600 var(--text-base)/1.2 var(--font-sans);color:var(--color-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-dock .is-low{color:var(--color-warning);font-weight:600}
.pp-dock .btn{flex:none}
@media (min-width:1000px){.pp-dock{display:none}}  /* outside main.page: its container queries do not reach it */

/* desktop order bar: under the header once .pp-sum has scrolled up beneath it (replaces the bottom bar from 1000px). Outside main.page, like the dock. */
.pp-bar{display:none}
@media (min-width:1000px){
  .pp-bar{position:fixed;top:var(--head-h,0px);left:0;right:0;z-index:35;display:block;height:64px;background:var(--color-surface);box-shadow:0 1px 0 var(--color-line)}
  .pp-bar[hidden]{display:none}
  .pp-bar .container{display:flex;align-items:center;gap:var(--space-4);height:100%}
  .pp-bar-img{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-photo)}
  .pp-bar-img img{width:100%;height:100%;object-fit:cover}
  .pp-bar-name{display:grid;gap:2px;min-width:0;margin-right:auto}
  .pp-bar-name b{overflow:hidden;font:600 var(--text-base)/1.2 var(--font-sans);white-space:nowrap;text-overflow:ellipsis}
  .pp-bar-name small{overflow:hidden;font-size:var(--text-xs);color:var(--color-text-2);white-space:nowrap;text-overflow:ellipsis}
  .pp-bar-tot{display:grid;gap:2px;justify-items:end;flex:none;font-size:var(--text-xs)}
  .pp-bar-tot b{font:600 var(--text-base)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pp-bar-tot b[aria-busy=true]{opacity:.5}
  .pp-bar .is-low{color:var(--color-warning);font-weight:600}
  .pp-bar .btn{flex:none}
}

/* details */
.pp-det{display:grid;gap:var(--space-6)}
.pp-det>div:first-child p{margin:var(--space-3) 0 0;color:var(--color-text-2);max-width:40ch}
.acc{border-bottom:1px solid var(--color-line)}
.acc:first-child{border-top:1px solid var(--color-line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;padding:var(--space-3) 0;font:600 var(--text-lead)/1.3 var(--font-sans);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover span{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.acc summary:focus-visible{border-radius:var(--radius-sm)}
.acc summary .i-m,.acc[open] summary .i-p{display:none}
.acc[open] summary .i-m{display:block}
.acc-body{padding:0 0 var(--space-8);font-size:var(--text-sm);line-height:1.6;color:var(--color-text-2)}
.acc-body>p{margin:0 0 var(--space-3);max-width:68ch}
.acc-body>p b{color:var(--color-text);font-weight:600}
.acc-body .mat-img{max-width:280px}
.acc-body .mat-name{margin-top:var(--space-4)}
.acc-body .mat-spec{grid-template-columns:minmax(110px,auto) 1fr}
.acc-body .mat-spec dd{color:var(--color-text)}
.acc-body .dtable{max-width:520px;color:var(--color-text)}
.acc-body .dtable td{height:44px}
.acc-body .link-arrow{margin-top:var(--space-4);min-height:40px}
.qa{display:grid;gap:var(--space-5)}
.qa h3{margin:0 0 4px;font:600 var(--text-base)/1.35 var(--font-sans);color:var(--color-text)}
.qa p{margin:0;max-width:68ch}

/* reviews */
.rv{display:grid;gap:var(--space-10)}
.rv-sum{display:grid;gap:var(--space-4);align-content:start}
.rv-score{display:flex;align-items:flex-end;gap:var(--space-4)}
.rv-score strong{font:400 72px/.86 var(--font-display);letter-spacing:0}
.rv-score>span{display:grid;gap:6px;padding-bottom:2px;font-size:var(--text-sm);color:var(--color-text-2)}
.rv-bars{display:grid;gap:var(--space-3);margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--text-sm)}
.rv-bars li{display:grid;grid-template-columns:1fr auto;gap:6px var(--space-3)}
.rv-bars b{font-weight:600;font-variant-numeric:tabular-nums}
.rv-bars i{grid-column:1/-1;height:6px;border-radius:99px;background:var(--color-band);overflow:hidden}
.rv-bars i::before{content:"";display:block;width:var(--v);height:100%;border-radius:99px;background:var(--color-ink)}
.rv-sum .t-meta{margin:0;font-size:var(--text-xs);line-height:1.5}
.rv-list{display:grid;align-content:start}
.rv-item{display:grid;gap:var(--space-2);padding:var(--space-6) 0;border-top:1px solid var(--color-line)}
.rv-item:first-child{padding-top:0;border-top:0}
.rv-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--text-xs);color:var(--color-text-3)}
.rv-item h3{margin:0;font:600 var(--text-lead)/1.35 var(--font-sans);letter-spacing:-.01em}
.rv-item>p{margin:0;line-height:1.6;max-width:64ch}
.rv-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:var(--space-1);font-size:var(--text-sm);color:var(--color-text-2)}
.rv-who b{color:var(--color-text);font-weight:600}
.rv-ok{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--radius-full);background:var(--color-success-tint);color:var(--color-success);font:600 var(--text-xs)/1 var(--font-sans)}
.rv-ok .i{width:13px;height:13px;stroke-width:2.5}
.rv-list>.btn{justify-self:start;margin-top:var(--space-2)}

/* build your drop: slim orange box */
.pp-drop{display:grid;gap:var(--space-5);align-items:center;margin-top:var(--section-sm)}
.pp-drop h2{margin:0;font:600 24px/1.2 var(--font-sans);letter-spacing:-.015em}
.pp-drop p{margin:6px 0 0;max-width:52ch}
.pp-drop .btn{justify-self:start}

@container page (max-width:699px){.pp .cp-crumb li:not(:nth-last-child(2)){display:none}.pp .cp-crumb li:nth-last-child(2)::before{content:"←";margin-right:6px}}  /* phone: one back link to the sub-category */
@container page (min-width:500px){.pp-qty .sizes{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}}
@container page (min-width:700px){.pp-drop{grid-template-columns:1fr auto}}
@container page (min-width:1000px){
  .pp{padding-top:var(--space-6)}
  .pp-top{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-4);align-items:start}
  .pp-gal{grid-column:span 7;position:sticky;top:calc(var(--head-h,0px) + var(--space-6));display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-3)}
  .pp-thumbs{display:grid;gap:8px;align-content:start;margin:0;padding:0;list-style:none}
  .pp-thumbs button{position:relative;display:block;width:72px;height:72px;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-photo);cursor:pointer}
  .pp-thumbs button img{width:100%;height:100%;object-fit:cover}
  .pp-thumbs button[aria-current=true]{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-ink)}
  .pp-thumbs button:focus-visible{border-radius:var(--radius-sm)}
  .pp-thumbs .mock svg{width:70%}
  .pp-slides{margin:0;overflow:hidden;border-radius:var(--radius-md)}
  .pp-zoom{right:16px;bottom:16px;width:48px;height:48px}
  .pp-gal .fav{top:12px;right:12px}
  .pp-dots{display:none}
  .pp-buy{grid-column:span 5;padding-left:clamp(0px,2.4cqi,40px)}
  .pp-name{font-size:34px}
  .pp-tot strong{font-size:40px}
  .pp-det{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-4)}
  .pp-det>:first-child{grid-column:span 4}
  .pp-det>:last-child{grid-column:span 8}
  .rv{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-4)}
  .rv-sum{grid-column:span 4;padding-right:var(--space-12)}
  .rv-list{grid-column:span 8}
  .rv-score strong{font-size:96px}
  .pp-drop{padding:var(--space-8) var(--space-12)}
}

/* =====================================================================
   ADD YOUR DESIGN (D12, signed off 2026-10-22, rev 21; specimen
   ../Redesign-2026-10/preview-your-design.html). Prefix ed-: the old
   storefront has no .ed-* rules.
   .ed         full screen on every size (the app: fixed, above the header)
   .ed-top     close, product name, Save design
   .ed-rail    desktop tabs Product · Artwork · Sizes, with their value; later design tools join here
   .ed-panel   the chosen tab, scrolls; .pp-sum total + Add to cart at its foot
   .ed-canvas  preview on the studio grey band: tool bar, working area, side picker
   .ed-view    the working area: the whole band, edge to edge; it holds .ed-mock and the eye + zoom pill
   .ed-mock    fills .ed-view and clips zoom and pan; no card, no grey square
   .ed-pan     the largest square that fits the band: the flat blank tinted with the colour (never a photo); .ed-zone printable area
   .ed-art     a placed file: drag, corner handles resize, top handle turns
   .ed-g       snap guides (accent text on light tees, accent hover on dark tees)
   .ed-or/.ed-alt  save box: a guest saves by email link (D7 box)
   phone: .ed.is-m stacks preview, tool row, tabs, panel, then the .pp-dock bar
   ===================================================================== */
.ed{position:fixed;inset:0;z-index:115;display:grid;grid-template-rows:64px minmax(0,1fr);background:var(--color-surface);color:var(--color-text);font-family:var(--font-sans);overflow:hidden}
.ed ::selection{background:var(--color-accent);color:var(--color-ink)}
.ed-top{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4) 0 12px;border-bottom:1px solid var(--color-line);min-width:0}
.ed-title{flex:1;min-width:0;display:grid;gap:2px}
.ed-title b{font:600 var(--text-base)/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-title small{font-size:var(--text-xs);color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-mine{font:500 var(--text-sm)/1.2 var(--font-sans);color:var(--color-text-2);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em;white-space:nowrap}
.ed-mine:hover{color:var(--color-ink);text-decoration-color:var(--color-ink)}
.ed-save.is-saved{border-color:var(--color-line);color:var(--color-success);cursor:default}
.ed-save.is-saved:hover{background:transparent}
.ed-save .i{width:18px;height:18px}

.ed-body{display:grid;grid-template-columns:88px 400px minmax(0,1fr);min-height:0}
.ed-rail{display:grid;align-content:start;gap:4px;padding:12px 8px;border-right:1px solid var(--color-line)}
.ed-rail button{position:relative;display:grid;justify-items:center;gap:4px;min-height:72px;padding:10px 4px 8px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-2);font:500 var(--text-xs)/1.2 var(--font-sans);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ed-rail button:hover{color:var(--color-ink);background:var(--color-band)}
.ed-rail button[aria-selected=true]{background:var(--color-band);color:var(--color-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--color-ink)}
.ed-rail button:focus-visible{border-radius:var(--radius-md)}
.ed-rail .i{width:22px;height:22px;stroke-width:1.75}
.ed-rail small{font:500 11px/1.2 var(--font-sans);color:var(--color-text-3);font-variant-numeric:tabular-nums;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-rail small.is-low{color:var(--color-warning);font-weight:600}

.ed-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;border-right:1px solid var(--color-line)}
.ed-ph{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-3)}
.ed-ph h2{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.ed-ph span{font-size:var(--text-sm);color:var(--color-text-2)}
.ed-scroll{display:grid;gap:var(--space-6);align-content:start;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--space-6) var(--space-6);scrollbar-width:thin;scrollbar-color:var(--color-line) transparent}
.ed-panel>.pp-sum{padding:var(--space-4) var(--space-6) var(--space-5)}
.ed .pp-tot strong{font-size:34px}
.ed-later,.ed-check{margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2);text-align:center}
.ed-check button{display:inline-block;margin:-10px 0;padding:10px 2px;border:0;background:none;font:inherit;font-weight:600;color:var(--color-warning);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* artwork panel */
.ed-drop{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-5);border-radius:var(--radius-md);border:1.5px dashed var(--color-control-line);background:var(--color-surface);text-align:center;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ed-drop:hover,.ed-drop.is-over{border-color:var(--color-ink);background:var(--color-band)}
.ed-drop>.i{width:28px;height:28px;color:var(--color-ink)}
.ed-drop b{font:600 var(--text-base)/1.3 var(--font-sans)}
.ed-drop p{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-2);max-width:34ch}
.ed-drop .btn{margin-top:var(--space-1)}
.ed-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:1.5px dashed var(--color-control-line);border-radius:var(--radius-md);background:transparent;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ed-add:hover{border-color:var(--color-ink);background:var(--color-band)}
.ed-add:focus-visible{border-radius:var(--radius-md)}
.ed-add .i{width:18px;height:18px}
.ed-files{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.ed-file{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line);background:var(--color-surface)}
.ed-file.is-sel{background:var(--color-band);box-shadow:inset 0 0 0 1px var(--color-ink)}
.ed-thumb{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-sm);background:var(--color-band) repeating-conic-gradient(#E9EBED 0 25%,transparent 0 50%) 0 0/12px 12px;overflow:hidden}  /* checks: see-through areas read as see-through */
.ed-thumb svg{width:80%;height:80%}
.ed-thumb .i{width:24px;height:24px;color:var(--color-text-2)}
.ed-fname{display:grid;gap:3px;min-width:0;font-size:var(--text-sm);line-height:1.3;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer}
.ed-fname:focus-visible{border-radius:4px}
.ed-fname b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-fname small{font-size:var(--text-xs);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.ed-fname .on{font-size:var(--text-xs);color:var(--color-text-2)}
.ed-ibtn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--color-text-2);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ed-ibtn:hover{background:var(--color-band);color:var(--color-ink)}
.ed-ibtn:focus-visible{border-radius:50%}
.ed-ibtn .i{width:18px;height:18px}
.ed-ibtn:disabled{color:var(--color-disabled-fg);cursor:default;background:transparent}
.ed-ibtn[aria-pressed=true]{background:var(--color-band);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
.ed-put{grid-column:2/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--color-ink);border-radius:var(--radius-full);background:var(--color-surface);font:600 var(--text-xs)/1 var(--font-sans);color:var(--color-ink);cursor:pointer}
.ed-put:hover{background:var(--color-band)}
.ed-put .i{width:14px;height:14px}
.ed-warn{grid-column:1/-1;display:grid;grid-template-columns:18px 1fr;gap:8px;margin-top:6px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--color-warning-tint);color:var(--color-warning);font-size:var(--text-xs);line-height:1.5}
.ed-warn .i{width:16px;height:16px;margin-top:1px}
.ed-warn b{display:block;font-weight:600;font-size:var(--text-sm)}
.ed-warn.is-err{background:var(--color-danger-tint);color:var(--color-danger)}
.ed-warn button{margin-top:4px;padding:0;border:0;background:none;font:600 var(--text-xs)/1.4 var(--font-sans);color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ed-prog{grid-column:2/-1;height:4px;border-radius:99px;background:var(--color-band);overflow:hidden}
.ed-prog i{display:block;width:var(--v);height:100%;border-radius:99px;background:var(--color-ink)}
.ed-make{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.ed-make b{color:var(--color-text);font-weight:600}
.ed-make a{color:var(--color-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em}

/* save box: a guest saves by email link (D7 box, under Sign in / Create account) */
.ed-or{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-5) 0 var(--space-3);font:500 var(--text-xs)/1 var(--font-sans);color:var(--color-text-3)}
.ed-or::before,.ed-or::after{content:"";flex:1;height:1px;background:var(--color-line)}
.ed-alt{display:block;margin:0 auto;padding:var(--space-2) 0;border:0;background:none;font:600 var(--text-sm)/1.4 var(--font-sans);color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.2em;cursor:pointer}
.ed-alt:hover{text-decoration-color:var(--color-ink)}
.ed-alt:focus-visible{border-radius:4px}
.ed-sent{margin:0}

/* preview */
.ed-canvas{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;background:var(--color-band)}
.ed-tools{display:flex;justify-content:center;align-items:center;min-height:76px;padding:var(--space-4) var(--space-4) 0}
.ed-hint{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}
.ed-bar{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-bar),inset 0 0 0 1px var(--color-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ed-bar::-webkit-scrollbar{display:none}
.ed-pre{display:flex;gap:4px}
.ed-pre button{height:36px;padding:0 14px;border:0;border-radius:var(--radius-full);background:transparent;font:500 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ed-pre button:hover{color:var(--color-ink);background:var(--color-band)}
.ed-pre button[aria-pressed=true]{background:var(--color-band);color:var(--color-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--color-ink)}
.ed-pre button:focus-visible{border-radius:var(--radius-full)}
.ed-sep{flex:none;width:1px;height:24px;background:var(--color-line)}
.ed-size{display:flex;align-items:center;gap:2px;flex:none}
.ed-size output{min-width:64px;text-align:center;font:600 var(--text-sm)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ed-bar .ed-ibtn{width:36px;height:36px;flex:none}
.ed-up{flex:none;height:36px;padding:0 12px;border:0;border-radius:var(--radius-full);background:var(--color-warning-tint);color:var(--color-warning);font:600 var(--text-xs)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.ed-up:hover{background:color-mix(in srgb,var(--color-warning) 10%,var(--color-warning-tint))}
.ed-up:focus-visible{border-radius:var(--radius-full)}

.ed-view{position:relative;min-width:0;min-height:0;container-type:size;--m:var(--space-4);--sz:calc(min(100cqw,100cqh - var(--lift,0px)) - 2 * var(--m))}  /* --sz: the square, resolved on .ed-pan (a container's own cq units do not count) */
.ed-mock{position:absolute;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.ed-mock.is-zoom{cursor:grab}
.ed-pan{position:absolute;inset:0 0 var(--lift,0px);margin:auto;width:var(--sz);height:var(--sz)}  /* zoom + pan: a CSS transform, no transition */
.ed-pan>.blank{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ed-zone{position:absolute;outline:calc(1px / var(--z,1)) dashed rgb(19 20 22 / .5);outline-offset:0}
.ed-zone>.zl{position:absolute;left:0;top:calc(100% + 5px);scale:calc(1 / var(--z,1));transform-origin:0 0;font:500 11px/1 var(--font-sans);color:rgb(19 20 22 / .62);white-space:nowrap}
.ed-mock.no-area:not(.is-drag) .ed-zone{outline:0}  /* printable area hidden; shown again while a file is dragged, resized or turned */
.ed-mock.no-area:not(.is-drag) .ed-zone>.zl{display:none}
.ed-g{position:absolute;display:none;background:var(--color-accent-text);pointer-events:none}
.ed-g.is-on{display:block}
.ed-g.v{left:50%;top:0;width:calc(1px / var(--z,1));height:100%;translate:-50% 0}
.ed-g.h{top:50%;left:0;height:calc(1px / var(--z,1));width:100%;translate:0 -50%}
.is-dark .ed-g{background:var(--color-accent-hover)}
.ed-zoom{position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:2;display:grid;justify-items:center;padding:2px 0;border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-bar),inset 0 0 0 1px var(--color-line)}
.ed-zoom .ed-ibtn{width:40px;height:40px}
.ed-zoom .ed-sep{width:24px;height:1px;margin:2px 0}
.ed-zlv{min-width:40px;height:28px;border:0;border-radius:6px;background:transparent;font:600 var(--text-xs)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--color-text);cursor:pointer}
.ed-zlv:hover{background:var(--color-band)}
.ed-zlv:focus-visible{border-radius:6px}
.is-dark .ed-zone{outline-color:rgb(255 255 255 / .6)}
.is-dark .ed-zone>.zl{color:rgb(255 255 255 / .8)}
.ed-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:8px;text-align:center}
.ed-empty>b{font:600 var(--text-sm)/1.3 var(--font-sans);color:var(--color-text)}
.is-dark .ed-empty>b{color:var(--color-on-ink)}
.is-dark .ed-empty .btn{background:var(--color-surface);color:var(--color-ink)}  /* the ink button vanishes on dark tees */
.ed-empty .btn{--h:40px}
.ed-art{position:absolute;display:block;cursor:grab;touch-action:none}
.ed-art:active{cursor:grabbing}
.ed-art>svg,.ed-art>.card{display:block;width:100%;height:100%}
.ed-art.is-soft>svg{filter:blur(.7px)}
.ed-art>.card{display:grid;place-content:center;justify-items:center;gap:4px;border-radius:6px;background:rgb(255 255 255 / .9);box-shadow:inset 0 0 0 1.5px var(--color-ink);font:600 11px/1.25 var(--font-sans);color:var(--color-ink);text-align:center;padding:6px}
.ed-art>.card .i{width:22px;height:22px}
.ed-art>.card small{font-weight:500;color:var(--color-text-2)}
.ed-art:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px;box-shadow:none;border-radius:2px}
.ed-art.is-sel{outline:calc(1.5px / var(--z,1)) solid var(--color-ink);outline-offset:0}
.is-dark .ed-art.is-sel{outline-color:#fff}
.ed-h{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;touch-action:none;scale:calc(1 / var(--z,1))}  /* 28px hit area, 12px dot; stays this size when zoomed */
.ed-h::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--color-ink),0 1px 3px rgb(19 20 22 / .25)}
.ed-h.nw{left:0;top:0;cursor:nwse-resize}.ed-h.ne{left:100%;top:0;cursor:nesw-resize}.ed-h.sw{left:0;top:100%;cursor:nesw-resize}.ed-h.se{left:100%;top:100%;cursor:nwse-resize}
.ed-h.rot{left:50%;top:-30px;cursor:grab}
.ed-h.rot::after{width:16px;height:16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131416' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center/10px no-repeat}
.ed-h.rot::before{content:"";position:absolute;left:50%;top:22px;width:1.5px;height:16px;margin-left:-.75px;background:var(--color-ink)}
.is-dark .ed-h.rot::before{background:#fff}
.ed-dim{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;rotate:calc(var(--r,0deg) * -1);scale:calc(1 / var(--z,1));transform-origin:50% 0;padding:3px 8px;border-radius:var(--radius-full);background:var(--color-ink);color:var(--color-on-ink);font:600 11px/1.3 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.is-dark .ed-dim{background:#fff;color:var(--color-ink)}

.ed-sides{display:flex;justify-content:center;gap:8px;padding:var(--space-3) var(--space-4) var(--space-5);overflow-x:auto;scrollbar-width:none}
.ed-sides::-webkit-scrollbar{display:none}
.ed-side{flex:none;display:grid;grid-template-columns:44px auto;gap:2px 10px;align-items:center;padding:6px 14px 6px 6px;border:0;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line);text-align:left;cursor:pointer}
.ed-side:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.ed-side[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--color-ink)}
.ed-side:focus-visible{border-radius:var(--radius-md)}
.ed-side svg{grid-row:span 2;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-photo)}
.ed-side b{font:600 var(--text-sm)/1.2 var(--font-sans)}
.ed-side b i{display:none}
.ed-side small{font:500 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ed-side small.has{color:var(--color-text)}

/* phone */
.ed.is-m{grid-template-rows:56px auto auto auto minmax(0,1fr) auto}
.ed.is-m .ed-top{padding:0 12px 0 8px;gap:var(--space-2)}
.ed.is-m .ed-canvas{display:block;height:380px}  /* the band: edge to edge, controls sit on it */
.ed.is-m .ed-view{position:absolute;inset:0;--m:8px;--lift:24px}  /* lift: the square sits a little high, clear of the side pills */
.ed.is-m .ed-zoom{right:8px;bottom:auto;top:50%;translate:0 -50%}
.ed-srow{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;padding-right:var(--space-3);pointer-events:none}
.ed-srow .ed-sides{flex:1;min-width:0;pointer-events:none}
.ed-srow button{pointer-events:auto}
.ed-min{flex:none;background:var(--color-surface);box-shadow:var(--shadow-bar),inset 0 0 0 1px var(--color-line)}
.ed-min .i{width:20px;height:20px}
.ed.is-m .ed-sides{justify-content:flex-start;gap:6px;padding:var(--space-3) var(--space-4)}
.ed.is-m .ed-side{grid-template-columns:auto;padding:8px 14px;border-radius:var(--radius-full);text-align:center}
.ed.is-m .ed-side{box-shadow:var(--shadow-bar),inset 0 0 0 1px var(--color-line)}
.ed.is-m .ed-side:hover{box-shadow:var(--shadow-bar),inset 0 0 0 1px var(--color-ink)}
.ed.is-m .ed-side[aria-pressed=true]{box-shadow:var(--shadow-bar),inset 0 0 0 2px var(--color-ink)}
.ed.is-m .ed-side svg{display:none}
.ed.is-m .ed-side small{display:none}
.ed.is-m .ed-side b{display:inline-flex;align-items:center;gap:6px}
.ed.is-m .ed-side b i{display:block;width:6px;height:6px;border-radius:50%;background:var(--color-ink)}
.ed-mtools{display:flex;align-items:center;min-height:56px;padding:0 var(--space-4);border-bottom:1px solid var(--color-line);background:var(--color-surface);overflow:hidden}
.ed-mtools .ed-bar{box-shadow:none;padding:0 24px 0 0;border-radius:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}  /* the fade says the row scrolls */
.ed-mtools .ed-hint{font-size:var(--text-xs)}
.ed-mtabs{padding:var(--space-3) var(--space-4) 0}
.ed-mtabs .tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.ed-mtabs .tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ed-mtabs .tabs small{font:600 11px/1 var(--font-sans);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.ed-mtabs .tabs small.is-low{color:var(--color-warning)}
.ed.is-m .ed-scroll{padding:var(--space-4) var(--space-4) var(--space-6);gap:var(--space-5)}
.ed.is-m .pp-dock{position:static;display:flex}  /* system.css hides the phone bar from 1000px; the phone editor always has it */
.ed.is-m .ed-later{display:none}
/* phone, options hidden: the band takes the room between the top bar and the tool row */
.ed.is-m.is-min{grid-template-rows:56px minmax(0,1fr) auto auto}
.ed.is-min .ed-mtabs,.ed.is-min .ed-scroll{display:none}
.ed.is-m.is-min .ed-canvas{height:auto;min-height:0}

.ed-toast{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:5;width:max-content;max-width:calc(100% - 32px)}
.ed.is-m .ed-toast{bottom:84px}

/* app additions (the app draws <img> blanks and files, not the specimen's inline SVG; and keeps the editor mounted while hidden) */
.ed[hidden]{display:none}
.ed-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;mask-size:100% 100%;-webkit-mask-size:100% 100%}  /* colour over the flat blank: multiply keeps the folds, the mask keeps it on the garment (background + mask-image are set inline) */
.ed-pan>img.blank{object-fit:contain}
.ed-art>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.ed-art.is-soft>img{filter:blur(.7px)}
.ed-thumb>img{display:block;width:100%;height:100%;object-fit:contain}
.ed-sth{grid-row:span 2;position:relative;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-photo);overflow:hidden}  /* side picker thumb: the tinted blank */
.ed-sth>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ed.is-m .ed-side .ed-sth{display:none}
.ed-nomock{position:absolute;left:0;right:0;bottom:var(--space-3);padding:0 var(--space-4);text-align:center;pointer-events:none}  /* a side with no blank yet */
.ed-mock.is-over{box-shadow:inset 0 0 0 2px var(--color-ink)}  /* a file is dragged over the preview */
.ed-empty.is-over>b{text-decoration:underline;text-underline-offset:.2em}

/* =====================================================================
   BUILD YOUR DROP (D13, signed off 2026-10-23, rev 22; specimen
   ../Redesign-2026-10/build-your-drop.html)
   .bd-head   title, one line, the trust line
   .bd        7/12 builder + 5/12 "Your drop" panel from 1000px; stacked below
   .bd-kits   Start from a collection: pills (one row that scrolls sideways on a phone)
   .bd-setup  grey box: How many people? + Add your logo
   .bd-list   the lines: thumb, name + options, stepper, price, remove; messages; options
   .bd-sum    grey panel: delivery, need-by date, rows, total, buttons (sticky on desktop)
   .bd-picks  the Add products box (D7 .dlg.wide)
   No new colours.
   ===================================================================== */
.bd-head{padding:var(--space-6) 0 var(--space-8)}
.bd-head .t-h1{max-width:14ch}
.bd-head .t-lead{margin-top:var(--space-4)}
.bd-head .trust{margin-top:var(--space-5)}
.bd{display:grid;gap:var(--space-10);padding-bottom:var(--space-16)}
.bd-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-content:start;min-width:0}
.bd-lbl{margin:0 0 var(--space-3);font:600 var(--text-sm)/1.3 var(--font-sans)}
.bd-lbl small{font-weight:400;color:var(--color-text-2)}

.bd-pills{display:flex;gap:8px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
.bd-pills::-webkit-scrollbar{display:none}
.bd-pill{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--color-control-line);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-ink);font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.bd-pill:hover{border-color:var(--color-ink)}
.bd-pill[aria-pressed=true]{background:var(--color-band);border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}  /* "your choice": band + ink edge */
.bd-pill:focus-visible{border-radius:var(--radius-full)}

.bd-setup{display:grid;gap:var(--space-5);padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-band)}
.bd-cell{display:grid;gap:8px;align-content:start;min-width:0}
.bd-cell>label,.bd-cell>.bd-lbl{margin:0;font:600 var(--text-sm)/1.3 var(--font-sans)}
.bd-cell .hint{margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2)}
.bd-cell .stepper{background:var(--color-surface);justify-self:start}
.bd-cell .stepper input{width:72px;font-size:var(--text-base)}
.bd-cell .btn{justify-self:start;background:var(--color-surface)}
.bd-file{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-sm);background:var(--color-surface);min-width:0}
.bd-file img{flex:none;width:48px;height:48px;border-radius:6px;object-fit:contain;background:var(--color-photo);padding:4px}
.bd-file span{display:grid;gap:2px;min-width:0;flex:1;font-size:var(--text-sm)}
.bd-file b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-file small{font-size:var(--text-xs);color:var(--color-success);display:flex;align-items:center;gap:4px}
.bd-file small .i{width:14px;height:14px;stroke-width:2.5}
/* added with the build (2026-10-25): a file with no picture, the upload bar inside the file row, the failed-upload notice */
.bd-file .ic{flex:none;place-items:center;width:48px;height:48px;border-radius:6px;background:var(--color-photo);color:var(--color-text-3)}
.bd-file .ed-prog{grid-column:auto;margin-top:4px}
.bd-cell .notice p{margin:0 0 var(--space-2)}

.bd-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.bd-line{display:grid;gap:var(--space-3);padding:var(--space-5) 0;border-bottom:1px solid var(--color-line);scroll-margin-top:calc(var(--head-h,0px) + 16px)}
.bd-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"th info x" "q q price";gap:var(--space-3) var(--space-4);align-items:center}
.bd-th{grid-area:th;align-self:start;width:100%;border-radius:var(--radius-sm)}
.bd-th .glyph .i{width:28px;height:28px}
.bd-th .lg{position:absolute;left:50%;top:38%;width:20%;height:auto;aspect-ratio:1;object-fit:contain;translate:-50% 0;z-index:1;pointer-events:none}  /* the drop's logo on the chest */
.bd-th:has(.glyph) .lg{top:50%;width:46%;translate:-50% -50%}
.bd-th:has(.lg) .glyph{display:none}
.bd-info{grid-area:info;min-width:0;align-self:start}
.bd-info h3{margin:0;font:600 var(--text-base)/1.3 var(--font-sans)}
.bd-sel{margin:2px 0 0;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2)}
.bd-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.bd-tog{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0;border:0;background:none;color:var(--color-ink);font:600 var(--text-xs)/1 var(--font-sans);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.25em;cursor:pointer}
.bd-tog:hover{text-decoration-color:var(--color-ink)}
.bd-tog .i{width:14px;height:14px;transition:rotate var(--dur-fast) var(--ease-out)}
.bd-tog[aria-expanded=true] .i{rotate:180deg}
.bd-pp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--color-control-line);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-2);font:600 var(--text-xs)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.bd-pp .i{width:14px;height:14px}
.bd-tog,.bd-pp{position:relative}  /* 44px hit area, look unchanged (same as system.css .swatch-lg) */
:is(.bd-tog,.bd-pp)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}
.bd-pp:hover{border-color:var(--color-ink);color:var(--color-ink)}
.bd-pp[aria-pressed=true]{background:var(--color-band);border-color:transparent;color:var(--color-ink)}
.bd-pp:focus-visible{border-radius:var(--radius-full)}
.bd-q{grid-area:q;display:flex;align-items:center;gap:10px}
.bd-q .stepper{height:46px}
.bd-q .stepper button{width:44px}
.bd-q .stepper input{width:64px;font-size:var(--text-base)}
.bd-q small{font-size:var(--text-xs);color:var(--color-text-3);white-space:nowrap}
.bd-price{grid-area:price;display:grid;gap:2px;justify-items:end;text-align:right}
.bd-price b{font:600 var(--text-base)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-price small{font-size:var(--text-xs);color:var(--color-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-price b[aria-busy=true],.bd-tot strong[aria-busy=true]{opacity:.5}  /* the figure on screen is for earlier choices */
.bd-x{grid-area:x;align-self:start;justify-self:end;color:var(--color-text-2)}
.bd-x:hover{color:var(--color-ink)}
.bd-msg{display:grid;gap:8px}
.bd-msg:not(:has(>:not([hidden]))){display:none}
.bd-msg>[hidden],.bd-when[hidden]{display:none}  /* .notice and .tier-nudge set display, which beats [hidden] (fixed rev 24) */
.bd-msg .tier-nudge{margin:0;padding:12px 14px}
.bd-msg .notice{padding:12px 14px}
.bd-msg .notice p{margin:0}
.bd-msg .notice b{display:inline}
.bd-msg .notice button{padding:0;border:0;background:none;color:inherit;font:600 var(--text-sm)/1.5 var(--font-sans);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.bd-opts{display:grid;gap:var(--space-5);padding:var(--space-5);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line)}
.bd-opts[hidden]{display:none}
.bd-opts .pp-opt{margin:0;padding:0;border:0;min-width:0}
.bd-opts .swatch-lg{width:28px;height:28px}
.bd-opts .ocards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.bd-later{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-top:var(--space-4);border-top:1px solid var(--color-line);font-size:var(--text-xs);color:var(--color-text-2)}
.bd-later p{margin:0;max-width:44ch}
.bd-add{justify-self:start}
.bd-main .empty-state{padding:var(--space-10) var(--space-5)}
.bd-main .empty-state .empty-ic .i{width:24px;height:24px}

.bd-sum{display:grid;gap:var(--space-5);align-content:start;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-band)}
.bd-sum .t-h3{margin:0}
.bd-f{display:grid;gap:8px}
.bd-f>.bd-lbl,.bd-f>label{margin:0;font:600 var(--text-sm)/1.3 var(--font-sans)}
.bd-f .opt{font-weight:400;color:var(--color-text-3)}
.bd-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:2px;border-radius:var(--radius-full);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line)}
.bd-seg button{height:44px;padding:0 8px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-2);font:600 var(--text-sm)/1.1 var(--font-sans);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-seg button:hover{color:var(--color-ink)}
.bd-seg button[aria-checked=true]{background:var(--color-band);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
.bd-seg button:focus-visible{border-radius:var(--radius-full)}
.bd-f .input{font-variant-numeric:tabular-nums}
.bd-when{padding:12px 14px}
.bd-when p{margin:0}
.bd-when b{display:inline}
.bd-when a{color:inherit;font-weight:600;text-underline-offset:.2em}
.bd-rows{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px var(--space-4);margin:0;padding-top:var(--space-5);border-top:1px solid var(--color-line);font-size:var(--text-sm)}
.bd-rows dt{color:var(--color-text-2)}
.bd-rows dt small{display:block;font-size:var(--text-xs);color:var(--color-text-3)}
.bd-rows dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.bd-tot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-line)}
.bd-tot span{display:grid;gap:4px;font:600 var(--text-sm)/1.2 var(--font-sans)}
.bd-tot small{font-weight:400;font-size:var(--text-xs);color:var(--color-text-2)}
.bd-tot strong{font:700 30px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-none{margin:0;padding:var(--space-5) 0 0;border-top:1px solid var(--color-line);font-size:var(--text-sm);color:var(--color-text-2)}
.bd-none b{display:block;color:var(--color-text);font-weight:600}
.bd-min{display:grid;gap:10px}
.bd-min[hidden]{display:none}
.bd-min p{margin:0}
.bd-meter{height:8px;border-radius:var(--radius-full);background:var(--color-surface);overflow:hidden}
.bd-meter i{display:block;height:100%;width:var(--v);border-radius:inherit;background:var(--color-warning)}
.bd-sum .btn-lg{width:100%}
.bd-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bd-acts .btn{background:var(--color-surface)}
.bd-acts .btn:disabled{background:var(--color-disabled-bg)}
.bd-fine{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-2)}
.bd-fine b{color:var(--color-text);font-weight:600}
div.bd-fine{display:grid;gap:6px}  /* several short messages, one row each */
.bd-fine p{margin:0}
.bd-sum .pp-promise{margin:0}

.bd-why{display:grid;gap:var(--space-8)}
.bd-why h2{margin-bottom:var(--space-3)}
.bd-why p{margin:0 0 var(--space-3);max-width:62ch;color:var(--color-text-2);line-height:1.6}
.bd-why p b{color:var(--color-text);font-weight:600}
.bd-why .t-meta{color:var(--color-text-3)}
.bd-notes{display:grid;gap:var(--space-8)}
.bd-notes h3{margin:0 0 var(--space-3);font:600 var(--text-lead)/1.3 var(--font-sans)}
.bd-notes p{margin:0 0 var(--space-4);color:var(--color-text-2);line-height:1.6}

.bd-ptools{display:grid;gap:var(--space-3);margin-bottom:var(--space-4)}
.bd-ptools .tabs{justify-self:stretch}
.bd-picks{list-style:none;margin:0 -8px;padding:0;display:grid;gap:2px}
.bd-picks li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:var(--radius-md)}
.bd-picks li:hover{background:var(--color-band)}
.bd-picks .tile{width:64px;border-radius:var(--radius-sm)}
.bd-picks .glyph .i{width:24px;height:24px}
.bd-picks span{display:grid;gap:2px;min-width:0}
.bd-picks b{font:600 var(--text-sm)/1.3 var(--font-sans)}
.bd-picks small{font-size:var(--text-xs);color:var(--color-text-2);font-variant-numeric:tabular-nums}
.bd-picks .badge{justify-self:start;height:20px;padding:0 8px;margin-top:2px}
.bd-picks .btn{--h:40px}
.bd-picks .btn[aria-pressed=true]{background:var(--color-band);border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
.bd-pfoot{justify-content:space-between!important;align-items:center}
.bd-pfoot>span{font-size:var(--text-sm);color:var(--color-text-2)}
.bd-pfoot .btn{flex:none!important}
.dlg-foot>.bd-pfoot{display:flex;flex:1;gap:var(--space-3)}  /* the Dialog puts its footer inside .dlg-foot */
.bd-sent{display:grid;gap:var(--space-3)}

@container dlg (min-width:700px){.bd-picks{grid-template-columns:1fr 1fr;column-gap:8px}}
@container page (min-width:700px){
  .bd-setup{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-6)}
  .bd-row{grid-template-columns:88px minmax(0,1fr) auto 128px 40px;grid-template-areas:"th info q price x"}
  .bd-q{flex-direction:column;align-items:flex-start;gap:4px}
  .bd-pills{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  .bd-notes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bd-why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12)}
  .bd-tot strong{font-size:32px}
}
@container page (min-width:1000px){
  .bd{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-12);align-items:start}
  .bd-sum{position:sticky;top:calc(var(--head-h,0px) + var(--space-6));padding:var(--space-8)}
  .bd-head{padding:var(--space-8) 0 var(--space-10)}
}

/* =====================================================================
   COLLECTIONS (D14, signed off 2026-10-23, rev 23; specimen
   ../Redesign-2026-10/collections.html). Prefix co- (class names keep
   "occasion" words from the earlier name). The word is Collections in the shop and in Office,
   addresses /collections and /collections/{slug}.
   .co-hero   split hero: crumb, copy (h1, lead, facts, buttons) beside the photo,
              or the collage of the kit's product photos when there is no photo
   .co-facts  typical order · usually ready · the kit's price for N people
   .co-kitsec why it costs what it costs (left) + the grey kit box (right)
   .co-kit    How many people?, one row per product, total, Build this drop
   .co-ask    What people ask: heading + Worth knowing note, accordions (.acc)
   .co-intro  index title: h1 + lead
   .co-grid   index cards: 1 / 2 / 3 across; .co-card photo 4:3 or .co-mini
   No new colours.
   ===================================================================== */
.co-hero{padding:var(--space-4) 0 var(--space-8)}
.co-hero .cp-crumb{margin-bottom:var(--space-4)}
.co-split{display:grid;gap:var(--space-6)}
.co-copy{display:grid;gap:var(--space-5);align-content:center}
.co-copy h1{margin:0}
.co-copy .t-lead{max-width:44ch}
.co-media{order:-1;margin-inline:calc(var(--gutter) * -1)}  /* phone: the picture first, edge to edge */
.co-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--color-photo)}
.co-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-photo>.badge{position:absolute;top:12px;left:12px;z-index:1}
.co-media .collage{padding-inline:var(--gutter)}
.co-media .collage .tile{border-radius:var(--radius-md)}
.co-media .collage .tile:nth-child(1){aspect-ratio:auto}
.co-facts{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0;padding-top:var(--space-5);border-top:1px solid var(--color-line)}
.co-facts div{min-width:0}
.co-facts dt{font-size:var(--text-xs);color:var(--color-text-3)}
.co-facts dd{margin:4px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.co-facts .price-mark{font-weight:700}

.co-hero+.sec{padding-top:var(--section-sm)}  /* the kit follows the hero: a follow-on gap, not a new section */
.co-kitsec{display:grid;gap:var(--space-8)}
.co-why{display:grid;gap:var(--space-4);align-content:start}
.co-why h2,.co-why p{margin:0}
.co-why p{color:var(--color-text-2);max-width:48ch;line-height:1.55}
.co-date{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin-top:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--color-line);font-size:var(--text-sm)}
.co-date>.i{color:var(--color-accent-text);margin-top:2px}
.co-date p{margin:0;max-width:44ch}
.co-date .link-arrow{grid-column:2;justify-self:start;min-height:44px}
.co-kit{display:grid;gap:var(--space-5);padding:var(--space-8) var(--gutter);margin-inline:calc(var(--gutter) * -1);background:var(--color-band)}
.co-kit-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.co-kit-top h3{margin:0}
.co-kit-top small{font-size:var(--text-sm);color:var(--color-text-2)}
.co-ppl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.co-ppl label{font:600 var(--text-sm)/1.3 var(--font-sans)}
.co-ppl .stepper{background:var(--color-surface);border-color:var(--color-ink)}
.co-ppl .hint{flex:1 1 100%;margin:0;font-size:var(--text-xs);color:var(--color-text-3)}
.co-lines{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.co-lines li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}
.co-th{width:52px;border-radius:var(--radius-sm)}
.co-th .glyph .i{width:22px;height:22px}
.co-th img.knockout{mix-blend-mode:multiply}
.co-lines b{display:block;font-weight:600;font-size:var(--text-sm);line-height:1.3}
.co-lines small{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.co-lines .amt{text-align:right;font-variant-numeric:tabular-nums}
.co-lines .amt b{font-size:var(--text-base)}
.co-total{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.co-total span{font-size:var(--text-sm);color:var(--color-text-2);font-variant-numeric:tabular-nums}
.co-total strong{font:700 32px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-total>div{text-align:right}
.co-total small{display:block;margin-top:6px;font:400 var(--text-sm)/1.3 var(--font-sans);color:var(--color-text-2)}
.co-kit .btn-lg{width:100%}
.co-kit .fine{margin:-8px 0 0;font-size:var(--text-xs);color:var(--color-text-3);text-align:center}

.co-ask{display:grid;gap:var(--space-8)}
.co-ask .side{display:grid;gap:var(--space-5);align-content:start}
.co-ask .side h2{margin:0}
.co-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;margin:0;padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2)}
.co-note b{display:block;margin-bottom:2px;color:var(--color-text);font-weight:600}
.co-note .i{margin-top:2px}

.co-intro{display:grid;gap:var(--space-4);padding:var(--space-4) 0 var(--space-10)}
.co-intro .cp-crumb{margin:0}
.co-intro h1{margin:0}
.co-intro .t-lead{max-width:46ch}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10) var(--space-4)}
.co-card{position:relative;display:grid;gap:6px;align-content:start}
.co-img{position:relative;aspect-ratio:4/3;margin-bottom:var(--space-2);border-radius:var(--radius-md);overflow:hidden;background:var(--color-photo)}
.co-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-img>.badge{position:absolute;top:12px;left:12px;z-index:1}
.co-mini{position:absolute;inset:0;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--color-surface)}  /* no collection photo: three of its products */
.co-mini>span{position:relative;overflow:hidden;background:var(--color-photo)}
.co-mini>span:first-child{grid-row:span 2}
.co-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-mini img.knockout{mix-blend-mode:multiply}
.co-mini .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-text-3)}
.co-mini .glyph .i{width:28px;height:28px;stroke-width:1.5}
.co-card h3{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.co-card h3 a{color:inherit;text-decoration:none}
.co-card h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--radius-md)}
.co-card h3 a:focus-visible{box-shadow:none}
.co-card:has(h3 a:focus-visible) .co-img{box-shadow:var(--focus-ring)}
.co-card:hover h3 a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.co-card p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.co-card .meta{color:var(--color-text-3);font-variant-numeric:tabular-nums}
.co-more .co-grid{gap:var(--space-8) var(--space-4)}
.co-img>.glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-text-3)}  /* a card with no picture at all: the first product's glyph (phase 7) */
.co-img>.glyph .i{width:40px;height:40px;stroke-width:1.5}
.co-split:not(:has(.co-media)){grid-template-columns:minmax(0,1fr)}  /* no photo and no collage: the copy takes the row (phase 7) */
.co-split:not(:has(.co-media)) .co-copy{max-width:60ch}
.co-facts [aria-busy="true"],.co-total [aria-busy="true"]{opacity:.5}  /* the kit box is working out a new total (phase 7) */

@container page (min-width:700px){
  .co-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-kit{margin-inline:0;padding:var(--space-8);border-radius:var(--radius-lg)}
}
@container page (min-width:1000px){
  .co-hero{padding:var(--space-6) 0 var(--space-4)}
  .co-split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-12);align-items:center}
  .co-media{order:0;margin-inline:0}
  .co-photo{aspect-ratio:5/4;border-radius:var(--radius-lg)}
  .co-media .collage{padding-inline:0}
  .co-kitsec{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
  .co-why{padding-top:var(--space-8)}
  .co-kit{padding:var(--space-10)}
  .co-lines li{grid-template-columns:60px minmax(0,1fr) auto;gap:var(--space-4)}
  .co-th{width:60px}
  .co-total strong{font-size:40px}
  .co-ask{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16)}
  .co-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--space-4) var(--space-12);padding:var(--space-6) 0 var(--space-16)}
  .co-intro .cp-crumb{grid-column:1/-1}
  .co-intro .t-lead{padding-bottom:6px}
  .co-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-12)}
}

/* =====================================================================
   CART AND CHECKOUT (D15, signed off 2026-10-23, rev 24; specimen
   ../Redesign-2026-10/checkout.html). Prefix ck-.
   Reuses D13: .bd-list lines, .bd-sum panel, .bd-seg, .bd-rows, .bd-tot.
   .ck-head   the slim checkout header: logo, Secure checkout, WhatsApp
   .ck        page grid: main column 7/12 + summary 5/12 from 1000px
   .ck-sec    a checkout section: open (ink edge), done (folded, green tick, Change), still to come
   .ck-sum    order summary: lines, code, credit, rows, total. Phone: folded behind .ck-bar
   .ck-done   confirmation, payment not finished, quote sent
   No new colours.
   ===================================================================== */
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:64px;padding:0 var(--gutter);border-bottom:1px solid var(--color-line);background:var(--color-surface)}
.ck-head .sh-logo img{height:30px}
.ck-head-r{display:flex;align-items:center;gap:var(--space-2)}
.ck-secure{display:inline-flex;align-items:center;gap:6px;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2)}
.ck-secure .i{width:16px;height:16px;color:var(--color-success)}
.ck-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.25em}
.ck-back .i{width:16px;height:16px}
.ck-title{padding:var(--space-4) 0 var(--space-6)}
.ck-title .t-h1,.ck-title .t-h2{margin:0}
.ck-title p{margin:var(--space-2) 0 0;color:var(--color-text-2)}
.ck{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-bottom:var(--space-16)}
.ck-main{display:grid;gap:var(--space-3);align-content:start;min-width:0}

/* sections */
.ck-sec{border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line);background:var(--color-surface);scroll-margin-top:16px}
.ck-sec.is-open{box-shadow:inset 0 0 0 1px var(--color-ink)}
.ck-sh{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:18px 16px 18px 18px}
.ck-n{grid-row:span 2;align-self:start;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-band);color:var(--color-text-2);font:600 var(--text-sm)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ck-sh:not(:has(.ck-ds)) .ck-n{grid-row:auto;align-self:center}
.is-open .ck-n{background:var(--color-ink);color:var(--color-on-ink)}
.is-done .ck-n{background:var(--color-success-tint);color:var(--color-success)}
.ck-n .i{width:16px;height:16px;stroke-width:2.5}
.ck-sh h2{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.is-todo .ck-sh h2{color:var(--color-text-3)}
.ck-ds{grid-column:2/-1;margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2);overflow-wrap:anywhere}
.ck-chg{position:relative;padding:0;border:0;background:none;color:var(--color-ink);font:600 var(--text-sm)/1 var(--font-sans);text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.25em;cursor:pointer}
.ck-chg::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;translate:-50% -50%}
.ck-chg:hover{text-decoration-color:var(--color-ink)}
.ck-sh .ck-chg,.ck-sh .ck-acc{grid-row:1;grid-column:3}
.ck-acc{font-size:var(--text-sm);color:var(--color-text-2);white-space:nowrap}
.ck-acc a{color:var(--color-ink);font-weight:600;text-underline-offset:.2em}
:is(.ck-acc a,.ck-sum-h .link-arrow){position:relative}
:is(.ck-acc a,.ck-sum-h .link-arrow)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;translate:-50% -50%}
.ck-sb{display:grid;gap:var(--space-5);padding:0 18px 22px}
.ck-two{display:grid;gap:var(--space-5);align-items:start}  /* a hint under one field must not push its neighbour's input down */
.ck-two>.field{align-content:start}
.ck-sb .err-sum{margin:0}
.ck-me{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm)}
.ck-me .i{flex:none}
.ck-me span{display:grid;gap:2px;min-width:0}
.ck-me small{color:var(--color-text-2);overflow-wrap:anywhere}
.ck-sb .bd-seg{background:var(--color-band);box-shadow:none}
.ck-sb .bd-seg button[aria-checked=true]{background:var(--color-surface)}
.ck-ship{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.45}
.ck-ship b{font-weight:600}
.ck-ship small{grid-column:2/-1;font-size:var(--text-xs);color:var(--color-text-2)}
.ck-ship strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* artwork */
.ck-art{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--color-line)}
.ck-art>li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-3) 14px;align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--color-line)}
.ck-art .bd-th{width:56px}
.ck-art h3{margin:0;font:600 var(--text-sm)/1.3 var(--font-sans)}
.ck-art .ck-sp{margin:2px 0 0;font-size:var(--text-xs);color:var(--color-text-2)}
.ck-art .bd-file{grid-column:1/-1;flex-wrap:wrap;background:var(--color-band)}
.ck-art .bd-file .link-arrow{flex:none;font-size:var(--text-xs);min-height:44px}
.ck-art .ocards{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
.ck-art .ocard{min-height:64px}
.ck-drop{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0;padding:14px 16px;border-radius:var(--radius-md);border:1.5px dashed var(--color-control-line);font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2)}
.ck-drop b{display:block;font:600 var(--text-sm)/1.3 var(--font-sans);color:var(--color-text)}
.ck-drop.is-note{border:0;background:var(--color-band)}

/* payment */
.ck-pay{grid-template-columns:repeat(3,minmax(0,1fr))}
.ck-pay .ocard{min-height:96px}
.ck-logos{display:flex;gap:4px;margin-bottom:6px}
.ck-logos img{height:22px;width:auto;padding:3px 5px;border-radius:4px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line)}
.ck-next{margin:-8px 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-2);text-align:center}
.ck-legal{margin:0;font-size:var(--text-xs);line-height:1.55;color:var(--color-text-2)}
.ck-more{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.ck-more details{flex:1 1 100%}
.ck-more details:not([open]){flex:none}
.ck-sb summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer;list-style:none}
.ck-sb summary::-webkit-details-marker{display:none}
.ck-sb summary .i{width:16px;height:16px;transition:rotate var(--dur-fast) var(--ease-out)}
.ck-sb details[open] summary .i{rotate:45deg}
.ck-sb details .field{margin:var(--space-2) 0 var(--space-3)}

/* summary */
.ck-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ck-sum-h .t-h3{margin:0}
.ck-lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ck-lines li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:var(--text-sm)}
.ck-lines .bd-th,.ck-art .bd-th{width:56px;grid-area:auto}  /* .bd-th names a D13 grid area these grids do not have */
.ck-lines b{display:block;font-weight:600;line-height:1.3}
.ck-lines small{display:block;font-size:var(--text-xs);color:var(--color-text-2);line-height:1.4}
.ck-lines strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-code-row{display:flex;gap:8px}
.ck-code-row .input{flex:1;min-width:0;text-transform:uppercase}
.ck-code-row .input::placeholder{text-transform:none}
.ck-code-row .btn{flex:none;background:var(--color-surface)}
.ck-chip{display:flex;align-items:center;gap:10px;padding:6px 4px 6px 12px;border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--text-sm)}
.ck-chip>.i{color:var(--color-success);flex:none}
.ck-chip span{flex:1;min-width:0;display:grid;gap:1px}
.ck-chip small{font-size:var(--text-xs);color:var(--color-text-2)}
.ck-chip .icon-btn{width:44px;height:44px}
.ck-credit{align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);background:var(--color-surface)}
.ck-credit input{flex:none;margin-top:1px}
.ck-credit span{display:grid;gap:2px}
.ck-credit small{font-size:var(--text-xs);color:var(--color-text-2);line-height:1.45}
.bd-rows dd.is-minus{color:var(--color-success)}
.ck-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin:0;padding:0 var(--gutter);border:0;border-bottom:1px solid var(--color-line);background:var(--color-band);color:var(--color-ink);font:600 var(--text-sm)/1.2 var(--font-sans);cursor:pointer}
.ck-bar>span{display:inline-flex;align-items:center;gap:8px}
.ck-bar .i{width:18px;height:18px;transition:rotate var(--dur-fast) var(--ease-out)}
.ck-bar[aria-expanded=true] .i-down{rotate:180deg}
.ck-bar strong{font-size:var(--text-base);font-variant-numeric:tabular-nums}
.ck-bar:focus-visible{box-shadow:inset 0 0 0 2px var(--color-ink)}
.ck-sum-wrap{display:grid;min-width:0}
.ck-sum-wrap[data-folded] .ck-sum{display:none}

/* cart extras on the D13 line */
.ck-q{display:grid!important;gap:2px!important}
.ck-q b{font:600 var(--text-sm)/1.2 var(--font-sans);font-variant-numeric:tabular-nums}
.ck-q small{font-size:var(--text-xs);color:var(--color-text-2);font-variant-numeric:tabular-nums}
.ck-tag{display:inline-flex;align-items:center;gap:4px;font:500 var(--text-xs)/1.2 var(--font-sans);color:var(--color-text-2)}
.ck-tag .i{width:14px;height:14px}
.ck-tag.is-ok{color:var(--color-success)}
.ck-tag.is-ok .i{stroke-width:2.5}
.ck-sum .btn-lg{width:100%}
.ck-sum>.btn-outline{width:100%;background:var(--color-surface)}
.ck-keep{margin-top:var(--space-4);justify-self:start;min-height:44px}

/* confirmation, payment not finished, quote sent */
.ck-done{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10);padding:var(--space-8) 0 var(--space-16)}
.nb{white-space:nowrap}  /* an order number in a heading or bold run never breaks at its hyphen */
.ck-hero{display:grid;gap:var(--space-4);justify-items:center;text-align:center;min-width:0}  /* the tick, heading, text and buttons are centred; lists, boxes and notices below stay left */
.ck-hero>:is(.ck-steps,div:not(.ck-acts)){justify-self:stretch;text-align:left}
.ck-hero>.ck-acts{justify-content:center}
.ck-hero :is(.t-h1,.t-ui-h1){margin:0;max-width:22ch}
.ck-hero>p{margin:0;max-width:52ch;color:var(--color-text-2);line-height:1.6}
.ck-hero>p b{color:var(--color-text);font-weight:600}
.ck-big{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--color-success-tint);color:var(--color-success)}
.ck-big .i{width:28px;height:28px;stroke-width:2.5}
.ck-big.is-warn{background:var(--color-warning-tint);color:var(--color-warning)}
.ck-big.is-warn .i{stroke-width:2}
.ck-steps{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;width:100%;border-top:1px solid var(--color-line)}
.ck-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px 14px;padding:var(--space-5) 0;border-bottom:1px solid var(--color-line)}
.ck-steps li>*:not(.ck-n){grid-column:2}
.ck-steps .ck-n{grid-row:1;align-self:start;background:var(--color-ink);color:var(--color-on-ink)}
.ck-steps h3{margin:5px 0 0;font:600 var(--text-base)/1.3 var(--font-sans)}
.ck-steps p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2);max-width:56ch}
.ck-steps .btn{justify-self:start;margin-top:var(--space-2)}
.ck-steps .notice{margin-top:var(--space-2)}
.ck-steps .notice p{color:inherit}
.ck-acts{display:flex;flex-wrap:wrap;gap:var(--space-3);width:100%}
.ck-side{display:grid;gap:var(--space-5);align-content:start;min-width:0}
.ck-side .bd-sum{gap:var(--space-4)}
.ck-side .bd-sum>p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2)}
.ck-side .ck-me{background:var(--color-surface)}
.ck-recap{display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line)}
.ck-recap h2{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans)}
.ck-recap .link-arrow{justify-self:start;min-height:44px}
.ck-fine{margin:0;font-size:var(--text-sm);color:var(--color-text-2)}

/* quote */
.qt-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qt-items li{display:grid;grid-template-columns:minmax(0,1fr) 88px 44px;gap:10px;align-items:center;padding:8px 4px 8px 14px;border-radius:var(--radius-md);background:var(--color-band)}
.qt-items b{display:block;font:600 var(--text-sm)/1.3 var(--font-sans)}
.qt-items small{display:block;font-size:var(--text-xs);color:var(--color-text-2)}
.qt-items .input{height:44px;padding:0 10px;text-align:right;font-variant-numeric:tabular-nums;background:var(--color-surface)}
.qt-items .input[data-qn]{text-align:left}
.qt-items .icon-btn{width:44px;height:44px}
.qt-add{justify-self:start}
/* Specimen inline styles, made rules (build 8A): the empty cart's space below, the date field's width, the quote form's centred legal line */
.ck-title+.empty-state{margin-bottom:var(--space-16)}
.ck-sb input[type=date]{max-width:240px}
.ck-sb>.ck-legal{text-align:center}
.ck-drop .ed-prog{flex:1 1 120px;min-width:120px}  /* the brief upload's progress bar: .ed-prog is a grid item in the editor */
/* Build 8B: the slim header's WhatsApp is a 44px icon under 700px and the number from 700px */
.ck-head .icon-btn{width:44px;height:44px}
.ck-head .ck-wa-big{display:none}
@media (min-width:700px){.ck-head .ck-wa-big{display:flex}.ck-head .ck-wa-icon{display:none}}
.qt-items li.is-error{box-shadow:inset 0 0 0 1px var(--color-danger)}  /* a row of the quote list the form refused: its message sits under it */
.qt-items li .error{grid-column:1/-1;display:flex;gap:6px;align-items:center;margin:0;padding:0 0 6px;font-size:var(--text-sm);color:var(--color-danger)}
.qt-how{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:qt}
.qt-how li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2);counter-increment:qt}
.qt-how li::before{content:counter(qt);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-surface);color:var(--color-ink);font:600 var(--text-xs)/1 var(--font-sans)}
.qt-how b{display:block;color:var(--color-text);font-weight:600}
.qt-sent{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:10px 20px;margin:0;font-size:var(--text-sm);line-height:1.5}
.qt-sent dt{color:var(--color-text-2)}
.qt-sent dd{margin:0;font-weight:500}

@container page (min-width:700px){
  .ck-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ck-two>.is-wide{grid-column:1/-1}
  .ck-sh{padding:22px 24px}
  .ck-sb{padding:0 24px 28px 70px}
  .ck-art .ocards,.ck-art .bd-file,.ck-art .ck-drop{grid-column:2/-1}
  .ck-acts .btn{flex:none}
}
@container page (max-width:699px){
  .ck-pay{grid-template-columns:minmax(0,1fr)}
  .ck-pay .ocard{min-height:0;grid-template-columns:104px minmax(0,1fr);column-gap:12px;align-items:center}  /* Visa + Mastercard side by side are ~100px */
  .ck-pay .ck-logos{grid-row:span 2;margin:0}
  .ck-art .ocards{grid-template-columns:minmax(0,1fr)}
  .ck-art .ocard{min-height:0}
  .ck-acts .btn{flex:1 1 100%}
  .ck-acc{display:none}
  .ck-hero :is(.t-h1,.t-ui-h1){max-width:none}
}
@container page (min-width:1000px){
  .ck,.ck-done{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-12);align-items:start}
  .ck-sum{position:sticky;top:calc(var(--head-h,0px) + var(--space-6))}
  .ck-bar{display:none}
  .ck-sum-wrap[data-folded] .ck-sum{display:grid}
  .ck-title{padding:var(--space-6) 0 var(--space-8)}
  .ck-done{padding-top:var(--space-12)}
}
@container page (max-width:999px){
  .ck.is-co .ck-sum-wrap{order:-1;margin-inline:calc(var(--gutter) * -1)}
  .ck.is-co .ck-sum{border-radius:0;padding:var(--space-5) var(--gutter) var(--space-6)}
  .ck.is-co .ck-sum-h{display:none}
}

/* =====================================================================
   ACCOUNT (D16, signed off 2026-10-23, rev 25; specimen
   ../Redesign-2026-10/account.html). Prefix ac-.
   .ac        account page: left menu (who, Orders, Designs, Messages, Credit, Settings, Sign out) + main;
              phone: who row + a tab strip that scrolls sideways
   .ac-main   a size container (acm), so blocks lay out by the room they really have
   .ac-need   Waiting on you: orange edge, one row per thing, one button each (.ac-b-ask = soft blue)
   .ac-ord    an order row: photos, number + status chip (.ac-st), what is next, total, View / Reorder
   .ac-th     a Messages row: order, last message, time, unread count
   .ac-tl     order progress, top to bottom: done (ink), now (orange), to come (open ring)
   .ac-items  the order's items; .ac-thread messages + reply box; .ac-dz saved designs
   .ac-cr     credit; .ac-set settings groups
   .ac-split  form pages on desktop: form left, full-height photo right, white info panel on the photo
              (.ac-split-l / -photo / -panel; phone: no photo, the points under the form (.ac-split-m)).
              The default layout for sign in, track an order and any future form page.
   .ac-so     Continue with Google / Apple / Facebook (the only brand colours)
   Headings are the sans .t-ui-h1/h2/h3; Anton only in the split panel and the credit join pitch.
   Uses D13 .bd-sum / .bd-rows / .bd-tot, D15 .ck-back / .ck-tag / .ck-big / .qt-how, D7 .dlg.
   ===================================================================== */
.ac{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-bottom:var(--space-16)}
.ac-main{container:acm / inline-size;display:grid;gap:var(--space-8);align-content:start;min-width:0}
.ac-title{display:grid;gap:var(--space-2)}
.ac-title .t-h1{margin:0}
/* headings inside the account are a working UI: the system's sans .t-ui-h1/h2/h3. Anton stays for the promo panel and the affiliate pitch */
.ac-title p{margin:0;color:var(--color-text-2);max-width:60ch}
.ac-blk{display:grid;gap:var(--space-4);min-width:0}
.ac-blk-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}

/* side: who, menu, sign out. Phone: one row + a tab strip under it, full width */
.ac-side{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who out" "nav nav";align-items:center;gap:var(--space-2) var(--space-4);margin-inline:calc(var(--gutter) * -1);padding:var(--space-4) var(--gutter) 0;border-bottom:1px solid var(--color-line)}
.ac-who{grid-area:who;display:flex;align-items:center;gap:12px;min-width:0}
.ac-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-ink);color:var(--color-on-ink);font:600 var(--text-sm)/1 var(--font-sans);letter-spacing:.02em}
.ac-who>span:last-child{display:grid;gap:2px;min-width:0}
.ac-who b{font:600 var(--text-sm)/1.25 var(--font-sans)}
.ac-who small{display:block;font-size:var(--text-xs);color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-nav{grid-area:nav;display:flex;gap:clamp(20px,5vw,28px);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.ac-nav a,.ac-out{min-width:44px;display:flex;align-items:center;gap:10px;height:48px;border:0;border-bottom:2px solid transparent;background:none;font:500 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ac-nav a:hover,.ac-out:hover{color:var(--color-ink)}
.ac-nav a[aria-current=page]{border-bottom-color:var(--color-ink);color:var(--color-ink);font-weight:600}
.ac-nav .i{display:none}
.ac-nav .count{position:static;margin-left:-2px}
@container page (max-width:699px){.ac-nav{gap:12px}.ac-nav a{gap:6px}}  /* phone: all five tabs fit at 390 (Orders and Messages carry counts) */
.ac-out{grid-area:out;height:44px;padding:0 4px;text-decoration:underline;text-decoration-color:var(--color-control-line);text-underline-offset:.25em;font-weight:600;color:var(--color-ink)}
.ac-out .i{display:none}

/* needs your attention */
.ac-need{display:grid;padding:var(--space-5) var(--space-5) var(--space-1);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 2px var(--color-accent)}
.ac-need>h2{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-2)}
.ac-need>h2 .count{position:static;min-width:24px;height:24px;font-size:var(--text-xs);line-height:24px}
.ac-need ul{list-style:none;margin:0;padding:0}
.ac-need li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 14px;align-items:center;padding:var(--space-4) 0;border-top:1px solid var(--color-line)}
.ac-need li:first-child{border-top:0}
.ac-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-band);color:var(--color-ink)}
.ac-need p{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2)}
.ac-need p b{display:block;color:var(--color-text);font-weight:600}
.ac-need .btn{grid-column:2;justify-self:start}
@container acm (min-width:620px){.ac-need li{grid-template-columns:40px minmax(0,1fr) auto}.ac-need .btn{grid-column:3}}

/* status */
.ac-st{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-control-line);font:600 var(--text-xs)/1 var(--font-sans);letter-spacing:0;white-space:nowrap}
.ac-st .i{width:14px;height:14px;stroke-width:2}
.ac-st.is-ok{background:var(--color-success-tint);color:var(--color-success);box-shadow:none}
.ac-st.is-warn{background:var(--color-warning-tint);color:var(--color-warning);box-shadow:none}
.ac-st.is-off{background:var(--color-band);color:var(--color-text-2);box-shadow:none}

/* orders */
.ac-orders{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ac-ord{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pics pics" "info info" "tot acts";gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line)}
.ac-ord:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.ac-ord:has(.ac-ref:focus-visible){box-shadow:inset 0 0 0 1px var(--color-ink),var(--focus-ring)}
.ac-pics{grid-area:pics;display:flex}
.ac-pics .tile{flex:none;width:64px;grid-area:auto;border-radius:var(--radius-sm);box-shadow:0 0 0 3px var(--color-surface)}
.ac-pics .tile+.tile{margin-left:-12px}
.ac-pics .ac-plus{display:grid;place-items:center;background:var(--color-band);font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-text-2)}
.ac-info{grid-area:info;display:grid;gap:6px;align-content:start;min-width:0}
.ac-info h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.ac-ref{color:inherit;text-decoration:none}
.ac-ref::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.ac-ref:focus-visible{box-shadow:none}
.ac-meta{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2)}
.ac-next{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:var(--text-sm);line-height:1.45}
.ac-next .i{width:16px;height:16px;margin-top:2px;color:var(--color-text-2)}
.ac-tot{grid-area:tot;align-self:center;display:grid;gap:2px}
.ac-tot small{font-size:var(--text-xs);color:var(--color-text-2)}
.ac-tot b{font:600 var(--text-base)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-acts{grid-area:acts;position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}
.ac-older{justify-self:center}
.ac-acts .btn,.ac-need .btn{--h:44px}  /* hit area 44 */
/* Answer and Pay deposit (action needed from you) are soft blue; View stays ink, Reorder an ink outline */
.ac-b-ask{background:var(--badge-sky);color:var(--color-ink)}
.ac-b-ask:hover{background:color-mix(in srgb,var(--badge-sky) 86%,var(--color-ink))}
@container acm (min-width:640px){
  .ac-ord{grid-template-columns:168px minmax(0,1fr) auto;grid-template-areas:"pics info tot" "pics info acts";column-gap:var(--space-6);padding:var(--space-5) var(--space-6)}
  .ac-pics{align-self:start}
  .ac-tot{justify-items:end;align-self:end;text-align:right}
  .ac-acts{align-self:start}
}

/* messages: one row per order thread */
.ac-th-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ac-th{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line)}
.ac-th:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.ac-th:has(.ac-ref:focus-visible){box-shadow:inset 0 0 0 1px var(--color-ink),var(--focus-ring)}
.ac-th h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font:600 var(--text-base)/1.25 var(--font-sans);letter-spacing:-.01em}
.ac-th time{font-size:var(--text-xs);color:var(--color-text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ac-th-snip{grid-column:1;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--color-text-2)}
.ac-th-snip b{font-weight:600;color:var(--color-text)}
.is-unread .ac-th-snip{color:var(--color-text)}
.ac-th .count{position:static;grid-column:2;justify-self:end}

/* order page */
.ac-oh{display:grid;gap:var(--space-3)}
.ac-oh .ck-back{justify-self:start;margin-left:-2px}
.ac-oh-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.ac-oh-top .count{position:static;margin-left:2px}
.ac-oh h1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0}
.ac-oh h1 .ac-st{height:30px;padding:0 12px;font-size:var(--text-sm)}
.ac-oh p{margin:0;color:var(--color-text-2)}
.ac-od{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
.ac-od-main{display:grid;gap:var(--space-10);align-content:start;min-width:0}
.ac-od-side{display:grid;gap:var(--space-4);align-content:start;min-width:0}
@container acm (min-width:820px){.ac-od{grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-10);align-items:start}}

/* progress */
.ac-tl{list-style:none;margin:0;padding:0;display:grid}
.ac-tl li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 14px;padding-bottom:var(--space-6)}
.ac-tl li:last-child{padding-bottom:0}
.ac-tl li::before{content:"";position:absolute;left:13px;top:32px;bottom:4px;width:2px;border-radius:2px;background:var(--color-line)}
.ac-tl li:last-child::before{content:none}
.ac-tl li.is-done::before{background:var(--color-ink)}
.ac-dot{grid-row:1/span 4;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-control-line)}
.is-done .ac-dot{background:var(--color-ink);color:var(--color-on-ink);box-shadow:none}
.is-done .ac-dot .i{width:14px;height:14px;stroke-width:3}
.is-now .ac-dot{background:var(--color-accent);box-shadow:0 0 0 5px var(--badge-peach)}
.is-now .ac-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-ink)}
.ac-tl h3{grid-column:2;margin:4px 0 0;font:600 var(--text-base)/1.3 var(--font-sans)}
.is-todo h3{font-weight:500;color:var(--color-text-3)}
.ac-tl time{grid-column:3;grid-row:1;margin-top:5px;font-size:var(--text-sm);color:var(--color-text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ac-tl p{grid-column:2/-1;margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2);max-width:60ch}
.ac-tl p b{color:var(--color-text);font-weight:600}
.ac-tl .ac-nowbox{grid-column:2/-1;display:grid;gap:10px;justify-items:start;margin-top:var(--space-2);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-band)}
.ac-tl .ac-nowbox p{color:var(--color-text)}

/* items */
.ac-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.ac-items>li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:2px 14px;align-items:start;padding:var(--space-4) 0;border-bottom:1px solid var(--color-line)}
.ac-items .tile{grid-area:auto;grid-row:1/span 3;width:64px;border-radius:var(--radius-sm)}
.ac-items h3{grid-column:2;margin:2px 0 0;font:600 var(--text-sm)/1.3 var(--font-sans)}
.ac-items .ac-sp{grid-column:2/-1;margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2)}
.ac-items strong{grid-column:3;grid-row:1;margin-top:2px;font:600 var(--text-sm)/1.3 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-items .ac-row{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-4);margin-top:2px}
.ac-items .ac-row .link-arrow{min-height:44px;font-size:var(--text-xs)}
.ck-tag.is-warn{color:var(--color-warning)}

/* messages */
.ac-thread{display:grid;gap:var(--space-3)}
.ac-msg{display:grid;gap:4px;justify-self:start;max-width:min(520px,90%);padding:12px 16px;border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.55}
.ac-msg.is-me{justify-self:end;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line)}
.ac-msg>span{font-size:var(--text-xs);color:var(--color-text-2)}
.ac-msg>span b{color:var(--color-text);font-weight:600}
.ac-msg p{margin:0}
.ac-att{display:flex;align-items:center;gap:10px;margin-top:6px;padding:6px 12px 6px 6px;border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--text-xs);line-height:1.35;color:var(--color-text-2)}
.ac-att .tile{width:44px;flex:none;border-radius:6px;grid-area:auto}
.ac-att b{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.ac-reply{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-control-line)}
.ac-reply:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
.ac-reply:focus-within{box-shadow:inset 0 0 0 1px var(--color-ink),var(--focus-ring)}
.ac-reply textarea{width:100%;min-height:72px;padding:6px 0 0;border:0;background:transparent;resize:vertical;font-size:var(--text-base);line-height:1.5;outline:none}
.ac-reply textarea::placeholder{color:var(--color-text-3)}
.ac-reply textarea:focus-visible{box-shadow:none}
.ac-reply-f{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}

/* order page side */
.ac-od-side .bd-sum{gap:var(--space-4)}
.ac-od-side .bd-rows{padding-top:0;border-top:0}
.ac-od-side .bd-sum>.btn{width:100%}
.ac-inv{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ac-inv li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 6px 6px 12px;border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--text-sm)}
.ac-inv li>span{display:grid;gap:1px;min-width:0}
.ac-inv b{font-weight:600;font-variant-numeric:tabular-nums}
.ac-inv b,.ac-inv small{white-space:nowrap}
.ac-inv small{font-size:var(--text-xs);color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis}
.ac-inv .icon-btn{width:44px;height:44px}
.ac-kv{display:grid;gap:var(--space-4);margin:0;padding:var(--space-5);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line);font-size:var(--text-sm);line-height:1.5}
.ac-kv div{display:grid;gap:2px}
.ac-kv dt{font-size:var(--text-xs);color:var(--color-text-2)}
.ac-kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ac-help{display:flex;align-items:center;gap:12px;margin:0;padding:0 var(--space-2);font-size:var(--text-sm);line-height:1.45;color:var(--color-text-2)}
.ac-help a{color:var(--color-ink);font-weight:600}

/* reorder box */
.ac-ro td:first-child{width:36px;padding-right:0}
.ac-ro td b{display:block;font-weight:600}
.ac-ro tr.is-gone td{color:var(--color-text-3)}
.ac-ro .up{color:var(--color-warning);font-weight:600}
.ac-ro tfoot td{border-bottom:0;font-weight:600}
.ac-ro-wrap{overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}

/* saved designs */
.ac-dz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-4)}
.ac-dz li{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;align-content:stretch;min-width:0}  /* the note row takes the slack, so Order this / Edit line up across a row */
.ac-dz li>p{align-self:start}
.ac-dz .tile{grid-area:auto;border-radius:var(--radius-md)}
.ac-dz h3{margin:0;font:600 var(--text-sm)/1.3 var(--font-sans)}
.ac-dz p{margin:-6px 0 0;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-2)}
.ac-dz-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ac-dz-acts .link-arrow{min-height:44px;min-width:44px;justify-content:center}
@container acm (min-width:620px){.ac-dz{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10) var(--space-5)}}
@container acm (min-width:860px){.ac-dz{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* credit */
.ac-cr{display:grid;gap:var(--space-6);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-band)}
.ac-cr-big{display:grid;gap:var(--space-3);align-content:start;justify-items:start}
.ac-cr-big>span{font:600 var(--text-sm)/1.2 var(--font-sans)}
.ac-cr-big strong{font:700 clamp(40px,7cqw,56px)/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ac-cr-big p{margin:0;max-width:44ch;font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2)}
.ac-cr-big p b{color:var(--color-text);font-weight:600}
.ac-cr dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px var(--space-4);align-content:start;margin:0;padding-top:var(--space-5);border-top:1px solid var(--color-line);font-size:var(--text-sm)}
.ac-cr dt{color:var(--color-text-2)}
.ac-cr dt small{display:block;font-size:var(--text-xs);color:var(--color-text-3)}
.ac-cr dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ac-cr-acts{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.ac-cr dd small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--color-text-3)}
@container acm (max-width:479px){.ac-cr-acts .btn{flex:1 1 100%}}  /* two stacked buttons of different widths looked uneven: full width on a phone */
@container acm (min-width:700px){
  .ac-cr{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-10);padding:var(--space-8)}
  .ac-cr dl{padding:0 0 0 var(--space-8);border-top:0;border-left:1px solid var(--color-line)}
}
.ac-share{display:grid;gap:var(--space-4)}
@container acm (min-width:700px){.ac-share{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.ac-copy{display:flex;gap:8px}
.ac-copy .input{flex:1;min-width:0;background:var(--color-band);border-color:transparent;font-variant-numeric:tabular-nums;text-overflow:ellipsis}
.ac-copy .btn{flex:none}
.ac-hist{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.ac-hist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.ac-hist li>span:not(.ac-st){display:grid;gap:2px;min-width:0}  /* was every span, which turned the status chip into a grid and stacked its icon over its text */
.ac-hist b{font-weight:600}
.ac-hist small{font-size:var(--text-xs);color:var(--color-text-2)}
.ac-hist strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ac-hist strong.is-plus{color:var(--color-success)}
.ac-hist .ac-st{justify-self:start}
@container acm (min-width:640px){.ac-hist li{grid-template-columns:72px minmax(0,1fr) auto 170px}.ac-hist time{color:var(--color-text-2)}.ac-hist .ac-st{justify-self:end}}
@container acm (max-width:639px){.ac-hist time{display:none}.ac-hist .ac-st{grid-column:1}}
.ac-fold{border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-line)}
.ac-fold summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;padding:var(--space-3) var(--space-5);font:600 var(--text-base)/1.3 var(--font-sans);cursor:pointer;list-style:none}
.ac-fold summary::-webkit-details-marker{display:none}
.ac-fold summary small{display:block;font-weight:400;font-size:var(--text-sm);color:var(--color-text-2)}
.ac-fold summary .i{transition:rotate var(--dur-fast) var(--ease-out)}
.ac-fold[open] summary .i{rotate:45deg}
.ac-fold summary:focus-visible{border-radius:var(--radius-lg)}
.ac-fold>div{display:grid;gap:var(--space-5);padding:0 var(--space-5) var(--space-6)}
.ac-fine{margin:0;font-size:var(--text-xs);line-height:1.55;color:var(--color-text-2);max-width:72ch}
.ac-fine a{color:var(--color-ink);font-weight:600}
.notice p{margin:0}  /* the system's notices hold a div; here they hold a p, whose browser margin pushed the text 16px below its icon */
.ac-nb{white-space:nowrap}
.ac-join{display:grid;gap:var(--space-6)}
.ac-join .bd-sum{gap:var(--space-5)}
@container acm (min-width:760px){.ac-join{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:start}}

/* settings */
.ac-set{display:grid;gap:var(--space-5);padding-top:var(--space-8);border-top:1px solid var(--color-line)}
.ac-set.is-first{padding-top:0;border-top:0}
.ac-set-h{display:grid;gap:4px}
.ac-set-h p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2);max-width:60ch}
.ac-fields{display:grid;gap:var(--space-5);align-items:start}  /* a field with a hint must not stretch its neighbour's label row */
.ac-fields .field{align-content:start}
@container acm (min-width:640px){.ac-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:720px}.ac-fields .is-wide{grid-column:1/-1}}
.ac-save{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.ac-saved{display:inline-flex;align-items:center;gap:6px;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-success)}
.ac-saved .i{stroke-width:2.5}
.ac-addr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3);max-width:720px}
.ac-addr li{display:grid;gap:6px;align-content:start;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line);font-size:var(--text-sm);line-height:1.5}
.ac-addr li>b{display:flex;align-items:center;gap:8px;font-weight:600}
.ac-addr address{font-style:normal;color:var(--color-text-2)}
.ac-addr li.ac-add-wrap{padding:0;box-shadow:none}
.ac-add{display:grid;place-content:center;justify-items:center;gap:8px;width:100%;min-height:148px;border:0;border-radius:var(--radius-md);background:var(--color-band);font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.ac-add:hover{background:color-mix(in srgb,var(--color-band) 92%,var(--color-ink))}
.ac-add:focus-visible{border-radius:var(--radius-md)}
.ac-danger{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-danger);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgb(196 43 28 / .4);cursor:pointer}
.ac-danger:hover{text-decoration-color:var(--color-danger)}

/* password field with show / hide */
.ac-pw{position:relative}
.ac-pw .input{padding-right:56px}
.ac-pw button{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--color-text-2);cursor:pointer}
.ac-pw button:hover{color:var(--color-ink)}

/* sign in, create account, order status */
.ac-form{display:grid;gap:var(--space-5);align-content:start;min-width:0}
.ac-form>.t-ui-h1{margin:0}
.ac-form>p{margin:-8px 0 0;color:var(--color-text-2);line-height:1.55;max-width:46ch}
.ac-form>p b{color:var(--color-text);font-weight:600}
.ac-form .btn-lg{width:100%}
  .ac-form .field>label a{position:relative;font-weight:600;color:var(--color-ink);text-decoration-color:var(--color-control-line)}
.ac-form .field>label a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;translate:-50% -50%}
.ac-switch{margin:0;font-size:var(--text-sm);color:var(--color-text-2);text-align:center}
.ac-switch a{color:var(--color-ink);font-weight:600;text-decoration-color:var(--color-control-line)}
.ac-guest{display:flex;gap:12px;align-items:flex-start;margin:0;padding-top:var(--space-5);border-top:1px solid var(--color-line);font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2)}
.ac-guest>.i{margin-top:2px;color:var(--color-ink)}
.ac-guest b{display:block;color:var(--color-text);font-weight:600}
.ac-guest a{color:var(--color-ink);font-weight:600}
.ac-sent{display:grid;gap:var(--space-4);justify-items:start}
.ac-sent .t-ui-h1{margin:0}
.ac-sent>p{margin:0;max-width:46ch;color:var(--color-text-2);line-height:1.6}
.ac-sent>p b{color:var(--color-text);font-weight:600}
.ac-sent .ck-big .i{stroke-width:2}
.ac-keep{display:grid;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-band)}
.ac-keep p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--color-text-2)}
.ac-keep p b{display:block;color:var(--color-text);font-weight:600;font-size:var(--text-base)}
.ac-keep .input{background:var(--color-surface)}
.ac-keep-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ac-keep-row .ac-pw{flex:1 1 220px}
/* sign in, create account, new password: form left, a photo on the right that runs to the edge of the screen */
.ac-split{display:grid;grid-template-columns:minmax(0,1fr);min-height:744px}  /* 744 = the 820 stage minus the 76 header; the app uses the screen height under its header */
.ac-split-l{display:grid;gap:var(--space-8);align-content:start;padding-block:var(--space-8) var(--space-16);min-width:0}
.ac-so{display:grid;gap:12px}
.ac-so .btn{width:100%;gap:10px}
.ac-so .i{width:20px;height:20px}
/* the three provider buttons use the providers' own colours (owner-approved exception to "no new colours", only here) */
/* The three provider buttons carry the only brand colours in the system (owner-approved exception, 2026-10-23): Google white with its own grey line, Apple black, Facebook blue. */
.ac-so .btn-g{background:#fff;border-color:#747775;color:#1F1F1F}
.ac-so .btn-g:hover{background:color-mix(in srgb,#fff 92%,#1F1F1F)}
.ac-so .btn-a{background:#000;border-color:#000;color:#fff}
.ac-so .btn-a:hover{background:color-mix(in srgb,#000 82%,#fff)}
.ac-so .btn-f{background:#0866FF;border-color:#0866FF;color:#fff}
.ac-so .btn-f:hover{background:color-mix(in srgb,#0866FF 88%,#000)}
.ac-or{display:flex;align-items:center;gap:var(--space-4);margin:0;font-size:var(--text-sm);color:var(--color-text-2)}
.ac-or::before,.ac-or::after{content:"";flex:1;height:1px;background:var(--color-line)}
.ac-chat{display:grid;gap:var(--space-3);justify-items:start;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-band)}
.ac-chat p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.ac-chat .btn{background:var(--color-surface);transition:background-color var(--dur-fast) var(--ease-out)}
.ac-chat .btn:hover{background:color-mix(in srgb,var(--color-surface) 90%,var(--color-ink))}
.ac-chat .btn span{white-space:nowrap}
.ac-pts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.ac-pts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.ac-pts li .i{width:20px;height:20px;margin-top:0;color:var(--color-success);stroke-width:2.25}
.ac-pts li b{display:block;color:var(--color-text);font-weight:600}
.ac-split-m{display:grid;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--color-line)}
.ac-split-photo{display:none;position:relative;overflow:hidden;background:var(--color-photo)}
.ac-split-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 30%}
.ac-split-panel{position:absolute;left:var(--space-8);bottom:var(--space-8);display:grid;gap:var(--space-5);width:min(400px,calc(100% - 64px));padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface)}
.ac-split-panel h2{margin:0}
.ac-split-panel .ac-fine,.ac-split-m .ac-fine{max-width:none}
.ac-guestview{container:acm / inline-size;display:grid;gap:var(--space-8);padding:var(--space-8) 0 var(--space-16)}
@container page (min-width:900px){
  .ac-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ac-split-l{align-content:center;padding-block:var(--space-12);padding-right:var(--space-12);padding-left:max(var(--gutter),calc((100cqw - var(--container)) / 2 + var(--gutter)));max-width:none;margin:0}
  .ac-split-l>*{max-width:440px}
  .ac-split-m{display:none}
  .ac-split-photo{display:block}
}
@container page (min-width:1000px){
  .ac{grid-template-columns:232px minmax(0,1fr);gap:var(--space-12);padding-top:var(--space-10)}
  .ac-side{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "nav" "out";align-items:stretch;align-content:start;gap:0;margin:0;padding:0;border:0;position:sticky;top:calc(var(--head-h,0px) + var(--space-6))}
  .ac-who{padding:0 0 var(--space-5) 14px;margin-bottom:var(--space-3);border-bottom:1px solid var(--color-line)}
  .ac-nav{flex-direction:column;gap:2px;overflow:visible}
  .ac-nav a,.ac-out{height:48px;padding:0 14px;border-bottom:0;border-radius:var(--radius-full)}
  .ac-nav a:hover,.ac-out:hover{background:var(--color-band)}
  .ac-nav a[aria-current=page]{background:var(--color-band)}
  .ac-nav .i,.ac-out .i{display:block}
  .ac-nav .count{margin-left:auto}
  .ac-out{margin-top:var(--space-3);font-weight:500;color:var(--color-text-2);text-decoration:none}
  .ac-main{gap:var(--space-10)}
  .ac-guestview{padding-top:var(--space-10)}
}
.ac-main,.ac-set,.ac-blk,.ac-od-main,.ac-od-side,.ac-form,.ac-guestview,.ac-fold>div{grid-template-columns:minmax(0,1fr)}  /* a grid with no columns grows to its widest child */
.ac-oh h1 .ac-st{text-transform:none;letter-spacing:0}
.ac-due{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--text-sm)}
.ac-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ac-lbl label{font:600 var(--text-sm)/1.2 var(--font-sans)}
.ac-lbl a{position:relative;font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-ink);text-decoration-color:var(--color-control-line)}
.ac-lbl a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;translate:-50% -50%}
.ac-opt{font-weight:400;color:var(--color-text-3)}
.ac-ta{height:auto;padding:12px 16px;line-height:1.5;resize:vertical}
.ac-dz .ac-rm{position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;background:rgb(255 255 255 / .94)}
.ac-dz .ac-rm:hover{background:#fff}
.ac-ro td:nth-child(2){white-space:normal;min-width:140px}
.ac-keep-row{align-items:flex-start}
.ac-keep-row>.btn{margin-top:26px}
.ac-reply .field-label{font:600 var(--text-sm)/1.2 var(--font-sans)}


/* =====================================================================
   CONTENT PAGES (D17a, signed off 2026-10-23, rev 26; specimen
   ../Redesign-2026-10/content-pages.html). Prefix cn-: About, How ordering works,
   Shipping, FAQ, Contact; D17b (rev 27, work-guides.html) adds Our work, work item,
   Guides, guide article and the legal template at the end of this section. Builds on CATEGORY PAGE
   (.cp-crumb, .cp-pills), COLLECTIONS (.co-hero, .co-split, .co-facts), PRODUCT
   PAGE (.acc, .pp-dots), FEEDBACK STATES (.err-sum, .empty-state) and the product card
   (.pgrid). No new colours.
   ===================================================================== */
/* title band: grey, crumb, title, one lead line */
.cn-band{padding:var(--space-5) 0 var(--space-10)}
.cn-band h1{margin:0}
.cn-band .t-lead{margin-top:var(--space-4);max-width:56ch}
.cn-band .cp-pills{margin-top:var(--space-6)}
.cn-band .cp-pills a{gap:8px}
.cn-band .cp-pills small{font-weight:500;color:var(--color-text-3)}

/* reading layout: phone = Jump to + column; from 1000 = contents | 720 column | help box */
.cn-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-block:var(--space-8) var(--section-md)}
.cn-toc,.cn-aside{display:none}
.cn-jump{border:1px solid var(--color-control-line);border-radius:var(--radius-md)}
.cn-jump summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:48px;padding:0 var(--space-4);font:600 var(--text-sm)/1.2 var(--font-sans);cursor:pointer;list-style:none}
.cn-jump summary::-webkit-details-marker{display:none}
.cn-jump summary small{margin-right:auto;font-weight:500;color:var(--color-text-3)}
.cn-jump summary .i{transition:rotate var(--dur-fast) var(--ease-out)}
.cn-jump[open] summary .i{rotate:180deg}
.cn-jump[open] summary{border-bottom:1px solid var(--color-line)}
.cn-jump summary:focus-visible{border-radius:var(--radius-md)}
.cn-jump ol{margin:0;padding:var(--space-2);list-style:none}
.cn-jump a{display:flex;align-items:center;min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);text-decoration:none}
.cn-jump a:hover{background:var(--color-band)}
.cn-toc-h{margin:0 0 var(--space-3);font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-text-3)}
.cn-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--color-line)}
.cn-toc a{display:block;margin-left:-1px;padding:12px 0 12px var(--space-4);border-left:1px solid transparent;font-size:var(--text-sm);line-height:1.35;color:var(--color-text-2);text-decoration:none}
.cn-toc a:hover{color:var(--color-ink)}
.cn-toc a[aria-current]{border-left-color:var(--color-ink);color:var(--color-ink);font-weight:600}
.cn-toc a:focus-visible{border-radius:var(--radius-sm)}
.cn-ask{display:grid;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-band)}
.cn-ask p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.cn-ask .btn{justify-self:start}
.cn-ask .link-arrow{min-height:44px}
@container page (min-width:1000px){
  .cn-layout{grid-template-columns:minmax(200px,1fr) minmax(0,720px) minmax(240px,1fr);column-gap:var(--space-16);align-items:start;padding-top:var(--space-12)}
  .cn-jump{display:none}
  .cn-toc{display:block;grid-column:1;grid-row:1;position:sticky;top:calc(var(--head-h,76px) + var(--space-6))}
  .cn-prose{grid-column:2;grid-row:1}
  .cn-aside{display:block;grid-column:3;grid-row:1;position:sticky;top:calc(var(--head-h,76px) + var(--space-6))}
}

/* prose: sans headings (pages people read to decide, not adverts) */
.cn-prose{min-width:0}
.cn-prose>section{scroll-margin-top:calc(var(--head-h,76px) + var(--space-6))}
.cn-prose>section+section{margin-top:var(--space-16);padding-top:var(--space-16);border-top:1px solid var(--color-line)}
.cn-prose h2{margin:0 0 var(--space-5);font:600 28px/1.2 var(--font-sans);letter-spacing:-.02em;text-wrap:balance}
.cn-prose h3{margin:var(--space-8) 0 var(--space-2);font:600 var(--text-lead)/1.3 var(--font-sans);letter-spacing:-.01em}
.cn-prose h2+h3{margin-top:0}
.cn-prose p{margin:0 0 var(--space-4);max-width:68ch;color:var(--color-text-2);text-wrap:pretty}
.cn-prose p:last-child{margin-bottom:0}
.cn-prose p b{color:var(--color-text);font-weight:600}
.cn-prose .cn-more{margin-top:var(--space-6)}  /* a follow-on line after a box, table or list */
.cn-prose>section>.cn-steps{margin-top:var(--space-2)}
.cn-prose .cn-sub{margin-top:calc(var(--space-3) * -1);font-size:var(--text-lead);color:var(--color-text)}
.cn-prose a:not(.btn,.link-arrow){color:var(--color-ink);text-decoration-color:var(--color-control-line)}
.cn-prose a:not(.btn,.link-arrow):hover{text-decoration-color:var(--color-ink)}

/* two ways to order: two grey boxes, numbered steps (the order is the information) */
.cn-paths{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.cn-path{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-band)}
.cn-path h3{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans)}
.cn-path .fit{margin:0;font-size:var(--text-sm);line-height:1.5}
.cn-path .link-arrow{min-height:44px}
.cn-steps{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none;counter-reset:s}
.cn-steps li{counter-increment:s;position:relative;min-height:28px;padding:3px 0 0 40px;font-size:var(--text-sm);line-height:1.45;color:var(--color-text)}
.cn-steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-surface);font:600 13px/1 var(--font-sans)}
.cn-prose>section>.cn-steps li::before{background:var(--color-band)}
.cn-steps small{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--color-text-3)}
@container page (max-width:699px){.cn-path{margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}.cn-paths{gap:var(--space-6)}}
@container page (min-width:700px){.cn-paths{grid-template-columns:1fr 1fr}}

/* promises: a tick per promise; the short version in a grey box */
.cn-points{display:grid;gap:0;margin:var(--space-2) 0 0;padding:0;list-style:none}
.cn-points li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-3);padding:var(--space-5) 0;border-top:1px solid var(--color-line)}
.cn-points li:first-child{border-top:0;padding-top:var(--space-2)}
.cn-points .i{width:22px;height:22px;margin-top:1px;color:var(--color-accent-text)}
.cn-points.no .i{color:var(--color-text-3)}
.cn-points b{display:block;margin-bottom:4px;font:600 var(--text-base)/1.4 var(--font-sans);color:var(--color-text)}
.cn-points p{margin:0;font-size:var(--text-base)}
.cn-short{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-band)}
.cn-short .i{width:28px;height:28px;color:var(--color-ink)}
.cn-short p{margin:0;max-width:none;font:600 var(--text-h4)/1.4 var(--font-sans);letter-spacing:-.01em;color:var(--color-text)}
.cn-short small{display:block;margin-top:var(--space-3);font:400 var(--text-sm)/1.5 var(--font-sans);letter-spacing:0;color:var(--color-text-2)}
@container page (max-width:699px){.cn-short{margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}}

/* fact rows: label left, value right (files, payment, contact details) */
.cn-kv{display:grid;margin:var(--space-2) 0 0}
.cn-kv>div{display:grid;grid-template-columns:minmax(110px,30%) minmax(0,1fr);gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--color-line)}
.cn-kv>div:last-child{border-bottom:1px solid var(--color-line)}
.cn-kv dt{font-size:var(--text-sm);color:var(--color-text-3);padding-top:2px}
.cn-kv dd{margin:0;color:var(--color-text);font-weight:500}
.cn-kv dd small{display:block;font-weight:400;font-size:var(--text-sm);color:var(--color-text-2)}
.cn-kv .badge{margin-left:6px;vertical-align:2px}
:is(.cn-kv,.cn-prose,.cn-jobinfo) .link-arrow,.cn-back{min-height:44px}

/* shipping: three zone boxes, the band table */
.cn-zones{display:grid;gap:var(--space-3);padding-top:var(--space-8)}
.cn-zone{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-6);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.cn-zone-h{display:flex;align-items:center;gap:var(--space-3)}
.cn-zone-h .i{width:22px;height:22px}
.cn-zone h2{margin:0;font:600 var(--text-h4)/1.25 var(--font-sans);letter-spacing:-.01em}
.cn-zone>p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2)}
.cn-zone .cn-kv{margin:0}
.cn-zone .cn-kv>div{grid-template-columns:96px minmax(0,1fr);padding:var(--space-3) 0}
.cn-zone .cn-kv>div:last-child{border-bottom:0;padding-bottom:0}
.cn-zone .notice{margin-top:auto}
@container page (min-width:1000px){.cn-zones{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);padding-top:var(--space-12)}}
.cn-tablewrap{margin:var(--space-5) calc(var(--gutter) * -1) 0;padding-inline:var(--gutter);overflow-x:auto}
.cn-table{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.cn-table caption{caption-side:bottom;padding-top:var(--space-3);text-align:left;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-3)}
.cn-table th,.cn-table td{height:48px;padding:0 var(--space-3);border-bottom:1px solid var(--color-line);text-align:right;white-space:nowrap}
.cn-table thead th{height:auto;padding-block:0 var(--space-3);vertical-align:bottom;font-weight:600;line-height:1.3;white-space:normal;border-bottom-color:var(--color-ink)}
.cn-table th small{display:block;font-weight:400;color:var(--color-text-3)}
.cn-table :is(th,td):first-child{position:sticky;left:0;padding-left:0;text-align:left;background:var(--color-surface)}
.cn-table tbody th{font-weight:600}
.cn-table td.q{color:var(--color-text-2)}
.cn-table tr.ex td,.cn-table tr.ex th{background:var(--color-band)}
.cn-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3)}
.cn-head h2{margin-bottom:0}
.cn-prose .cn-head+p{margin-top:var(--space-4)}

/* About: the pull line, How we work in two by two, the honest box */
.cn-read{display:grid;gap:var(--space-5)}
.cn-read p{margin:0;max-width:64ch;font-size:var(--text-lead);line-height:1.65;color:var(--color-text-2);text-wrap:pretty}
.cn-read p.cn-pull{max-width:30ch;margin-top:var(--space-4);font:600 clamp(24px,3cqw,32px)/1.25 var(--font-sans);letter-spacing:-.02em;color:var(--color-text);text-wrap:balance}
.cn-four{display:grid;gap:0 var(--space-12);margin:0;padding:0;list-style:none}
.cn-four li{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6) 0 var(--space-8);border-top:1px solid var(--color-ink)}
.cn-four b{font:600 22px/1.25 var(--font-sans);letter-spacing:-.015em}
.cn-four p{margin:0;max-width:46ch;color:var(--color-text-2)}
@container page (min-width:700px){.cn-four{grid-template-columns:1fr 1fr}}
.cn-honest{display:grid;gap:var(--space-10)}
.cn-honest h2{margin:0 0 var(--space-4)}
.cn-honest p{margin:0 0 var(--space-4);max-width:56ch;color:var(--color-text-2)}
.cn-honest p:last-child{margin-bottom:0}
.cn-honest .cn-pull{margin-top:var(--space-6);max-width:26ch;font:600 22px/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--color-text)}
.cn-honest .cn-cap{padding-top:var(--space-8);border-top:1px solid var(--color-control-line)}
@container page (min-width:1000px){.cn-honest{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16)}.cn-honest .cn-cap{padding:0 0 0 var(--space-12);border-top:0;border-left:1px solid var(--color-control-line)}}
.cn-where{display:grid;gap:var(--space-6)}
.cn-where .cn-kv{margin:0}
.cn-where .t-lead{margin:var(--space-4) 0 0}
@container page (min-width:1000px){.cn-where{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}}

/* FAQ: topic groups of accordions */
.cn-faq>section+section{margin-top:var(--space-12);padding-top:0;border-top:0}
.cn-faq h2{margin-bottom:var(--space-3);font-size:var(--text-h4)}
.cn-faq .acc summary{font-size:var(--text-base)}
.cn-faq .acc-body>p{font-size:var(--text-base);color:var(--color-text-2)}

/* Contact: WhatsApp first, details, then the form box */
.cn-contact{display:grid;gap:var(--space-10);padding-block:var(--space-8) var(--section-md)}
.cn-wa{display:grid;gap:var(--space-4);justify-items:start}
.cn-wa h2{margin:0}
.cn-wa .btn{width:100%;max-width:420px}
.cn-wa .t-sm{margin:0;color:var(--color-text-2)}
.cn-tell{margin:var(--space-2) 0 0;padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-band);font-size:var(--text-sm);line-height:1.5;color:var(--color-text-2);width:100%;max-width:420px}
.cn-tell b{display:block;margin-bottom:6px;color:var(--color-text);font-weight:600}
.cn-tell ol{margin:0;padding-left:1.2em;display:grid;gap:2px}
.cn-left{display:grid;gap:var(--space-10);align-content:start}
.cn-form{display:grid;gap:var(--space-5);padding:var(--space-8) var(--gutter);margin-inline:calc(var(--gutter) * -1);background:var(--color-band)}
.cn-form h2{margin:0}
.cn-form>p{margin:-8px 0 0;font-size:var(--text-sm);color:var(--color-text-2)}
.cn-form .two{display:grid;gap:var(--space-5)}
.cn-form .field .hint{margin:0}
.cn-form .opt{font-weight:400;color:var(--color-text-3)}
.cn-form .btn{justify-self:start}
.cn-form .fine{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-3)}
.cn-sent{display:grid;gap:var(--space-4);justify-items:start;padding-block:var(--space-6)}
.cn-sent .ok{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--color-success-tint);color:var(--color-success)}
.cn-sent .ok .i{width:24px;height:24px}
.cn-sent p{margin:0;max-width:44ch;color:var(--color-text-2)}
.cn-sent p b{color:var(--color-text)}
@container page (min-width:700px){.cn-form{margin-inline:0;padding:var(--space-10);border-radius:var(--radius-lg)}.cn-form .two{grid-template-columns:1fr 1fr;align-items:start}}
@container page (min-width:1000px){.cn-contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start;padding-top:var(--space-12)}.cn-form{padding:var(--space-12)}}

/* ---- D17b (signed off 2026-10-23, rev 27; specimen ../Redesign-2026-10/work-guides.html): Our work, work item, Guides, guide article, legal ---- */
/* D17a fix: chips in a content title band also show from 1000px (the category page hides its pills there) */
@container page (min-width:1000px){.cn-band .cp-pills{display:flex;flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible}}

/* Our work: filters in the band, 4:5 photo cards */
.cn-filter{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.cn-filter .cp-pills{margin-top:0}
.cn-filter label{display:grid;gap:6px;font:600 var(--text-sm)/1.2 var(--font-sans)}
.cn-filter .select{height:40px;border-radius:var(--radius-full);font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-ink)}
.cn-filter .select:focus-visible{border-radius:var(--radius-full)}
.cn-grid-wrap{padding-block:var(--space-8) var(--section-md)}
.cn-grid-wrap+.sec{padding-top:0}  /* the close box follows the grid: the grid's bottom gap is the gap */
.cn-grid-wrap .cp-count{margin-bottom:var(--space-5)}
.cn-work .co-img{aspect-ratio:4/5}
.cn-work .co-card p.for{color:var(--color-text)}
.cn-grid-wrap .co-note{margin-top:var(--space-12);max-width:720px}
@container page (min-width:700px){.cn-filter{grid-template-columns:minmax(0,1fr) 220px;align-items:end}.cn-filter .cp-pills{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}

/* Work item: photos left, facts pinned right */
.cn-job{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-top:var(--space-4)}
.cn-shots{display:flex;margin:0 calc(var(--gutter) * -1);padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cn-shots::-webkit-scrollbar{display:none}
.cn-shots li{position:relative;flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:start;background:var(--color-photo);overflow:hidden}
.cn-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cn-shots .badge{position:absolute;top:12px;left:12px;z-index:1}
.cn-job .pp-dots{margin-top:calc(var(--space-6) * -1 + var(--space-3))}
.cn-jobinfo{display:grid;gap:var(--space-5);align-content:start;min-width:0}
.cn-jobinfo h1,.cn-jobinfo .t-lead,.cn-jobinfo .cn-kv{margin:0}
.cn-jobinfo .acts{display:grid;gap:var(--space-2);justify-items:start}
.cn-tricky{display:grid;gap:var(--space-4)}
.cn-tricky h2{margin:0}
.cn-tricky p{margin:0;max-width:60ch;font-size:var(--text-lead);line-height:1.6;color:var(--color-text);text-wrap:pretty}
.cn-back{margin-top:var(--space-10)}
@container page (max-width:699px){.cn-tricky{margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}}
@container page (min-width:1000px){
  .cn-job{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-4);align-items:start;padding-top:var(--space-6)}
  .cn-job>.cp-crumb{grid-column:1/-1;margin:0}
  .cn-shots{grid-column:span 7;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:0;overflow:visible}
  .cn-shots li{border-radius:var(--radius-md)}
  .cn-shots li:first-child{grid-column:1/-1}
  .cn-job .pp-dots{display:none}
  .cn-jobinfo{grid-column:span 5;position:sticky;top:calc(var(--head-h,76px) + var(--space-6));padding-left:clamp(0px,2.4cqi,40px)}
  .cn-tricky{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
}

/* Guides: 3:2 covers; no photo = grey cover with the number and the topic */
.cn-guides .co-img{aspect-ratio:3/2}
.cn-gfall{position:absolute;inset:0;display:grid;align-content:space-between;padding:var(--space-5);background:var(--color-band)}
.cn-gfall b{font:400 64px/.9 var(--font-display);color:var(--color-ink)}
.cn-gfall span{font:600 var(--text-sm)/1.2 var(--font-sans);color:var(--color-text-2)}

/* Guide article and legal */
.cn-cover{position:relative;margin:0 calc(var(--gutter) * -1);aspect-ratio:3/2;overflow:hidden;background:var(--color-photo)}
.cn-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cn-cover .badge{position:absolute;top:12px;left:12px}
.cn-dated{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-2)}
.cn-prose .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-5)}
.cn-short .btn{margin-top:var(--space-4)}
.cn-num{display:inline-block;min-width:1.7em;color:var(--color-text-3);font-variant-numeric:tabular-nums}
.cn-legal .cn-prose p{font-size:var(--text-base)}
.cn-legal .cn-prose>section+section{margin-top:var(--space-8);padding-top:0;border-top:0}
.cn-legal .cn-prose h2{margin:0 0 var(--space-2);font-size:var(--text-lead);letter-spacing:-.01em}
.cn-legal .cn-num{min-width:1.5em}
@container page (min-width:700px){.cn-cover{margin:var(--space-8) 0 0;border-radius:var(--radius-lg);aspect-ratio:21/9}.cn-prose .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}