/* =========================================================
   Moonflash — design system

   Gallery when discovering. Atelier when creating. Ecommerce when buying.

   The artwork carries the emotion; the interface carries the facts.
   So: a near-white gallery ground, high-contrast ink, hairline rules,
   and commerce information presented plainly rather than whispered.

   The theme at the foot of this file ("PETROL") sets the current look:
   one deep petrol for everything you can press, stone panels, soft
   corners, black stars and badges. Change the colour in :root (--accent).
   ========================================================= */

:root{
  /* surfaces */
  --paper:#FBFAF8;
  --paper-2:#F2EFEA;
  --paper-3:#E9E5DE;
  --white:#FFFFFF;
  --night:#121110;
  --night-2:#1E1C1A;

  /* ink */
  --ink:#121110;
  --ink-2:#33302B;
  --muted:#6B6660;
  --muted-2:#8A847C;

  /* lines */
  --line:#E6E2DB;
  --line-2:#C8C2B8;

  /* accents — used sparingly, for labels and state. Petrol: the one colour
     the interface owns; everything else is stone, white and ink, so the
     artwork is always the most colourful thing on the page. */
  --accent:#0B7F8C;
  --accent-d:#07636D;
  --accent-soft:#E6F3F4;
  --ok:#2E6B4E;

  /* Controls are fully rounded (pills); tiles and panels are softly rounded
     with --r-lg. The art inside a tile is never cropped by the corner — it
     sits on a stone ground with room around it. */
  --r:10px;
  --r-lg:14px;

  --gut:20px;
  --max:1480px;
  /* --nav-h is the height of the WHOLE sticky header, because the sticky
     offsets on .gal2, .buy and .summary and the funnel's .stage are measured
     from it. --nav-row / --nav-row2 are the rows inside it. */
  --nav-row:60px;
  --nav-row2:0px;
  --nav-h:var(--nav-row);
  --bar-h:34px;

  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.65,.05,.1,1);
  --shadow:0 1px 2px rgba(18,17,16,.04),0 8px 24px -12px rgba(18,17,16,.16);
}

@media (min-width:720px){ :root{ --gut:32px; --nav-row:68px; } }
/* the links row exists from 940px up, and the header grows by exactly its height */
@media (min-width:940px){ :root{ --nav-row:74px; } }
@media (min-width:1100px){ :root{ --gut:44px; } }
@media (min-width:1440px){ :root{ --gut:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
input,select,textarea{ font:inherit; }

.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:#fff; padding:12px 18px; }
.skip:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- type ---------- */
/* The display scale, brought down a step. It still carries the brand, but a
   section heading is a signpost, not the section. */
.d1{ font-family:var(--f-display); font-size:clamp(38px,6.4vw,88px); line-height:.96; letter-spacing:-.02em; }
.d2{ font-family:var(--f-display); font-size:clamp(27px,3.4vw,46px); line-height:1.05; letter-spacing:-.015em; }
.d3{ font-family:var(--f-display); font-size:clamp(23px,2.4vw,33px); line-height:1.1; letter-spacing:-.01em; }
.d4{ font-family:var(--f-display); font-size:clamp(19px,1.7vw,24px); line-height:1.2; }
.lead{ font-size:clamp(15.5px,1.25vw,18px); line-height:1.5; color:var(--ink-2); }
.small{ font-size:13px; color:var(--muted); line-height:1.5; }
.tiny{ font-size:11.5px; color:var(--muted); }

.eyebrow{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.numeral{ font-family:var(--f-display); font-size:13px; letter-spacing:.08em; color:var(--accent); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }

/* One spine. Every section starts at the gutter; a narrower reading measure is
   a constraint on the CONTENT, never on the container — putting a smaller
   max-width on .wrap itself re-centres the box and walks the text inward,
   which is what gave the site five competing left edges. */
.measure{ max-width:1120px; }
.measure--text{ max-width:78ch; }
/* The rhythm of the page. Tightened so the next section shows its face
   before you have finished the one you are on — you should never scroll
   through emptiness to find out there is more. */
.sec{ padding-block:clamp(30px,3.4vw,52px); }
.sec--tight{ padding-block:clamp(22px,2.4vw,34px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(15px,1.8vw,24px); }
.sec-head p{ max-width:44ch; }
.sec-head__l{ min-width:0; }

/* =========================================================
   announcement + navigation
   ========================================================= */
/* The bar above the menu. One true line, never a discount. */
.pbar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:#FFF6F1;
  font-size:12px; letter-spacing:.02em; text-align:center;
  min-height:var(--bar-h); padding:7px var(--gut);
}
.pbar i{ font-style:normal; border-bottom:1px solid rgba(255,246,241,.5); padding-bottom:1px; white-space:nowrap; }
.pbar:hover i{ border-color:#FFF6F1; }
@media (max-width:620px){ .pbar{ font-size:11.5px; gap:7px; } .pbar i{ display:none; } }

.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:saturate(1.3) blur(16px);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid var(--line);
}
/* Row one: the mark and the icons. Row two: the links, given room.
   --nav-h stays the height of the whole block, because four sticky offsets
   elsewhere (.gal2, .buy, .summary and the funnel's .stage) are measured
   from it and must keep working untouched. */
.nav__in{
  max-width:var(--max); margin:0 auto; padding-inline:var(--gut);
  height:var(--nav-row); display:flex; align-items:center; gap:14px;
}
.nav__brand{ display:flex; align-items:center; gap:9px; }
.nav__mark{ width:12px; height:12px; border-radius:50%; background:var(--ink); box-shadow:inset -4px -1px 0 0 var(--paper); transform:rotate(-20deg); }
.nav__word{ font-family:var(--f-display); font-size:22px; letter-spacing:-.01em; }

/* One row: brand on the left, links beside it, actions on the right — the
   reference has no second row and neither do we now. */
.nav__links{ display:none; align-items:center; justify-content:center; gap:clamp(16px,2vw,32px); font-size:14px; }
.nav__links > a,.nav__item > a{ color:var(--ink-2); position:relative; padding-block:8px; white-space:nowrap; }
.nav__links > a::after,.nav__item > a::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:var(--ink); transition:right .3s var(--ease); }
.nav__links > a:hover::after,.nav__links > a.is-on::after,.nav__item:hover > a::after,.nav__item > a.is-on::after{ right:0; }
.nav__links > a.is-on,.nav__item > a.is-on{ color:var(--ink); }
.nav__item{ position:static; }
.nav__item > a::before{ content:""; position:absolute; left:-10px; right:-10px; top:-8px; bottom:-14px; }
/* the item's hover area reaches all the way down to the panel's top edge */
.nav__item > a::after{ pointer-events:none; }
.nav__item:has(.mdrop:not([hidden])) > a::before{ bottom:-40px; }

/* The panel spans the header, like the reference. */
.mdrop{
  position:absolute; left:0; right:0; top:100%; z-index:5;
  background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(18,17,16,.5);
  padding:clamp(13px,1.5vw,20px) 0;
}
.mdrop[hidden]{ display:none; }
/* The sheet spans the header; its CONTENTS start under the word that opened
   it. --drop-x is set in JS, because the menu is centred: the offset is
   wherever that item lands, not a number CSS can know. The fallback keeps
   the old gutter alignment if the script has not run. */
.mdrop__in{ width:max-content; max-width:calc(100vw - var(--gut) * 2);
  margin:0 0 0 var(--drop-x, var(--gut)); padding-inline:0; }
/* A list on the left, a picture of the thing on the right: the picture is what
   the list is describing, and it changes as you move down. */
.mdrop__in--split{ display:grid; grid-template-columns:auto auto; justify-content:start;
  gap:clamp(26px,2.8vw,46px); align-items:start; }
.mdrop__col{ display:grid; gap:10px; align-content:start; }
.mdrop__h{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* Names only, stacked tight: the list is a way through, not a page of copy. */
.mdrop__list{ display:grid; }
.mdrop__list a{ display:inline-flex; justify-self:start; padding:5px 0; color:var(--ink-2);
  transition:color .2s var(--ease); }
.mdrop__list a > span{ font-family:var(--f-display); font-size:clamp(16px,1.3vw,19px); line-height:1.2; }
.mdrop__list a.is-on,.mdrop__list a:hover{ color:var(--ink); }
.mdrop__list a.is-on > span{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
/* every figure is rendered, so swapping is a class change and never a reload */
.mdrop__prev{ display:grid; }
/* The picture is given a SHAPE, not a height: a fixed height with a stretched
   width is what made it a letterbox. 4:5 like the reference, and its width is
   tied to the window's height as well as its width, so on a short laptop the
   panel shrinks with the screen instead of running off the bottom of it.

   The words sit UNDER the picture now, not beside it. Beside it the block
   ran 787px wide and could not start under the rightmost menu item without
   falling off the page, so it got shoved back left — which is the thing the
   alignment is there to stop. Every figure shares one grid cell, so the row
   is as tall as the tallest and nothing jumps as you move down the list. */
.mdrop__fig{ grid-area:1/1; display:block;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease); }
.mdrop__fig.is-on{ opacity:1; visibility:visible; }
.mdrop__pic{ display:block; overflow:hidden; background:var(--paper-2);
  width:clamp(170px,min(18vw,26vh),240px); aspect-ratio:4/5; }
.mdrop__pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.mdrop__fig figcaption{ width:clamp(170px,min(18vw,26vh),240px);
  padding-top:10px; display:grid; gap:4px; }
.mdrop__fig figcaption b{ font-family:var(--f-display); font-size:clamp(16px,1.25vw,19px); font-weight:400; line-height:1.18; }
.mdrop__fig figcaption p{ font-size:12px; line-height:1.45; color:var(--muted); }
.mdrop__fig figcaption a{ justify-self:start; margin-top:3px; }
/* Stacked, not side by side: laid out in a row it was the widest thing in the
   left column and set its width, leaving the names floating in space. */
.mdrop__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  border-top:1px solid var(--line); padding-top:11px; }
/* wrapped rather than run on: a single long line made the empty panel wider
   than the room to the right of its menu item, and the block had to shift
   left to fit, which is the one thing the alignment is for */
.mdrop__empty{ font-size:13.5px; color:var(--muted); max-width:32ch; }
/* a row of small tiles, not a gallery: the panel has to stay a menu */

.nav__cta{ display:none; margin-left:8px; }

/* The actions on the right are round, like the reference: one shape repeated,
   so the bag and the menu read as a pair rather than as loose icons. */
.rbtn{
  width:40px; height:40px; flex:none; border:0; cursor:pointer; padding:0; position:relative;
  border-radius:50%; background:var(--paper-2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.rbtn:hover{ background:color-mix(in srgb, var(--ink) 11%, var(--paper-2)); }
.rbtn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.rbtn .pill{ position:absolute; top:-2px; right:-2px; }

/* the menu drawer: rows with an icon, a name and a chevron */
.drawer--menu .drawer__panel{ width:min(400px,100%); }
.sheet__head{ display:flex; align-items:center; gap:13px; padding:20px var(--gut);
  border-bottom:1px solid var(--line); background:var(--paper-2); }
.sheet__av{ width:44px; height:44px; flex:none; border-radius:50%; background:var(--paper);
  display:grid; place-items:center; }
.sheet__av svg{ width:22px; height:22px; stroke:var(--muted); fill:none; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; }
.sheet__who{ flex:1; min-width:0; display:grid; gap:2px; }
.sheet__who b{ font-weight:500; font-size:15px; }
.sheet__who span{ font-size:12px; color:var(--muted); }
.sheet__body{ flex:1; overflow-y:auto; padding-bottom:26px; }
.sheet__grp{ border-bottom:1px solid var(--line); padding:12px 0 14px; }
.sheet__grp:last-child{ border-bottom:0; }
.sheet__gt{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:6px var(--gut) 4px; }
.srow{ display:flex; align-items:center; gap:14px; padding:13px var(--gut); color:var(--ink);
  transition:background .18s var(--ease); }
.srow:hover{ background:var(--paper-2); }
.srow__i{ width:20px; height:20px; flex:none; stroke:var(--ink-2); fill:none; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; }
.srow__t{ flex:1; font-size:15px; }
.srow__n{ font-style:normal; font-size:11.5px; color:var(--muted); }
.srow__c{ width:16px; height:16px; flex:none; stroke:var(--muted); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }

.nav__end{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.pill{
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--ink); color:var(--paper); font-size:10.5px; font-weight:500;
  display:grid; place-items:center; transition:transform .3s var(--ease);
}
.pill.is-zero{ background:var(--line-2); color:var(--ink); }
.pill.pop{ transform:scale(1.3); }


@media (min-width:940px){
  /* Three columns of equal weight either side of the links, so the menu is
     centred against the HEADER rather than against whatever room the logo
     leaves — the mark and the actions can change width without moving it. */
  .nav__in{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; }
  .nav__links{ display:flex; }
  .nav__word{ font-size:25px; }
  .nav__cta{ display:inline-flex; }
}
/* below the breakpoint the header is still a flex row: burger, mark, actions */
@media (max-width:1180px){
  .nav__links{ gap:clamp(13px,1.5vw,22px); font-size:13.5px; }
}
/* The checkout has no way out but forward: on the bag, the checkout and the
   payment hand-off the links and the icons go, and the mark stays as the one
   way home. */
.nav.is-bare .nav__links,.nav.is-bare .nav__end{ display:none; }
.nav.is-bare .nav__in{ display:flex; justify-content:center; }


/* On a narrow screen the panel is a list with one picture under it; below the
   breakpoint the four sections live in the drawer instead. */
@media (max-width:1100px){
  /* stacked, and back to the page gutter: there is no item to sit under when
     the panel is as wide as the screen */
  .mdrop__in{ width:auto; max-width:none; margin-inline:0; padding-inline:var(--gut); }
  .mdrop__in--split{ grid-template-columns:1fr; gap:20px; }
  .mdrop__pic{ width:100%; aspect-ratio:16/9; }
  .mdrop__fig figcaption{ width:auto; }
  .mdrop__foot{ flex-direction:row; align-items:center; gap:16px; }
}

/* search panel */
.search{
  position:fixed; inset:0; z-index:190; background:rgba(18,17,16,.32);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.search.on{ opacity:1; pointer-events:auto; }
.search__panel{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:0 var(--gut) 26px; max-height:86vh; overflow-y:auto;
  transform:translateY(-14px); transition:transform .3s var(--ease);
}
.search.on .search__panel{ transform:none; }
.search__bar{ max-width:var(--max); margin:0 auto; display:flex; align-items:center; gap:14px; height:76px; border-bottom:1px solid var(--line); }
.search__bar input{ flex:1; border:0; background:none; font-size:clamp(20px,3vw,30px); font-family:var(--f-display); padding:0; outline:none; color:var(--ink); }
.search__bar input::placeholder{ color:var(--line-2); }
.search__res{ max-width:var(--max); margin:0 auto; padding-top:22px; }
.search__group + .search__group{ margin-top:24px; }
.search__row{ display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.search__row img{ width:52px; height:52px; object-fit:cover; background:var(--paper-2); }
.search__row b{ font-weight:400; font-family:var(--f-display); font-size:18px; }
.search__row .tiny{ display:block; }
.search__row span:last-child{ margin-left:auto; font-size:13.5px; }
.search__empty{ padding:26px 0; color:var(--muted); font-size:14px; }
.search__sugg{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }

/* =========================================================
   buttons, stars, badges
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-size:13.5px; font-weight:500; letter-spacing:.01em; cursor:pointer;
  border-radius:var(--r); text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .2s;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--light{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--light:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover{ border-color:var(--ink); background:transparent; color:var(--ink); }
.btn--wide{ width:100%; }
.btn--lg{ padding:16px 30px; font-size:14.5px; }
.btn--xl{ padding:19px 32px; font-size:15px; }
.btn--sm{ padding:8px 14px; font-size:12.5px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.link-a{ font-size:13.5px; border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .25s; display:inline-block; background:none; border-left:0; border-right:0; border-top:0; cursor:pointer; padding-inline:0; }
.link-a:hover{ border-color:var(--ink); }
.link-arrow::after{ content:"→"; margin-left:8px; display:inline-block; transition:transform .3s var(--ease); }
.link-arrow:hover::after{ transform:translateX(4px); }

.stars{ display:inline-flex; align-items:center; gap:5px; }
.stars__glyphs{ position:relative; display:inline-block; font-size:13px; letter-spacing:1.5px; line-height:1; color:var(--line-2); }
.stars__glyphs i{ font-style:normal; }
.stars__fill{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--ink); }
.stars__n{ font-size:12.5px; color:var(--muted); }
.stars--lg .stars__glyphs{ font-size:17px; }

.badge{
  display:inline-block; font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  padding:4px 8px; border:1px solid var(--ink); color:var(--ink); background:var(--paper);
  font-weight:500;
}
.badge--solid{ background:var(--ink); color:var(--paper); }

/* =========================================================
   product card
   ========================================================= */
.grid{ display:grid; gap:clamp(14px,1.6vw,26px); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:1fr; }
@media (min-width:680px){ .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Three across, and it stays three. Four was tried: at 1440 the cards are
   denser, but no page in this structure shows more than six pieces and
   withFillers() pads to a multiple of THREE, so every page came out ragged —
   three of four, or four then two. The grid and the fill logic are a matched
   pair; density belongs to a shop with a long grid, which this deliberately
   is not. */
.grid--shop{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:920px){ .grid--shop{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pcard{ position:relative; display:flex; flex-direction:column; }
.pcard__media{ position:relative; overflow:hidden; background:var(--paper-2); aspect-ratio:4/5; display:block; }
/* A rendered piece is contained, not cropped — a square tile keeps the band
   above and below it small. A photograph still fills a 4:5 tile. */
.pcard__media--art{ aspect-ratio:1/1; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease), transform 1s var(--slow); }
.pcard__media canvas{ width:100%; height:100%; object-fit:contain; display:block; background:var(--paper-2);
  transition:transform 1s var(--slow); }
.pcard__from{ position:absolute; left:10px; bottom:10px; z-index:2; width:31%; max-width:92px; display:block; }
.pcard__from img{ width:100%; aspect-ratio:1; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 12px rgba(18,17,16,.28); }
/* The collection's number, on the image rather than on a line of its own. */
.pcard__n{ position:absolute; left:10px; top:10px; z-index:2; font-size:11px; letter-spacing:.12em;
  color:var(--ink-2); background:rgba(251,250,248,.9); padding:3px 7px; }
/* Hover is a small zoom and nothing else — no second image, because the tile
   already says what the piece is and what it was made from, and a swap could
   only disagree with one of them.

   It has to be the CANVAS that moves: the piece is rendered, not photographed,
   so the old rule (which named `img`) zoomed the corner inset and left the
   work standing still. The inset is excluded on purpose — it is a fixed label
   in the corner, not part of the picture. */
@media (hover:hover){
  .pcard:hover .pcard__media canvas,
  .pcard:hover .pcard__media > img{ transform:scale(1.04); }
}
.pcard__badges{ position:absolute; left:10px; top:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2; }

/* The way in used to be a button laid over the artwork, revealed on hover and
   removed outright on a touch screen — so a phone had no call to action at all.
   It is a line in the card now: always there, covering nothing. */
.pcard__go{ font-size:12.5px; white-space:nowrap; }
.pcard__body{ padding-top:12px; display:flex; flex-direction:column; gap:3px; }
.pcard__coll{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pcard__name{ font-family:var(--f-display); font-size:20px; line-height:1.12; }
.pcard__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:3px; }
.pcard__price{ font-size:15px; font-weight:500; }
.pcard__price small{ font-weight:400; color:var(--muted); font-size:12px; }

/* =========================================================
   upload — the entry point, made unmissable
   ========================================================= */
.btn__ico{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* five thumbnails will not sit beside the label on a phone — give it its own line */

/* your photo, through every collection */
.yp__bar{
  margin-top:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--white); padding:12px 14px;
}
.yp__bar img{ width:54px; height:54px; object-fit:cover; background:var(--paper-2); flex:none; }
.yp__bar b{ display:block; font-size:13.5px; font-weight:500; }
.yp__bar .tiny{ display:block; }
.yp__bar .btn{ margin-left:auto; }

/* =========================================================
   community examples — the source photograph inset against the result,
   so one tile shows the whole transformation
   ========================================================= */
.exgrid{ display:grid; gap:clamp(11px,1.2vw,17px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .exgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1080px){ .exgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1400px){ .exgrid--wide{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.grow{ display:flex; justify-content:center; margin-top:clamp(22px,3vw,34px); min-height:46px; }
.grow__end{ font-size:13px; color:var(--muted); text-align:center; margin:0; }
.grow__end .link-a{ margin-left:6px; }
/* On a piece the reviews are a column, not a centred grid, so the way to the
   rest sits under them rather than in the middle of the page. */
.grow--left{ justify-content:flex-start; margin-top:clamp(16px,2vw,22px); }
.grow--left .grow__end{ text-align:left; max-width:60ch; }

.ex{ display:flex; flex-direction:column; }
.ex__media{
  position:relative; aspect-ratio:1/1; background:var(--paper-2);
  overflow:hidden; display:block; border:1px solid var(--line);
}
.ex__media canvas{ width:100%; height:100%; object-fit:contain; }
.ex__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(18,17,16,0) 62%,rgba(18,17,16,.06));
}
.ex__skel{ position:absolute; inset:0; background:linear-gradient(100deg,var(--paper-2) 30%,var(--paper-3) 50%,var(--paper-2) 70%); background-size:220% 100%; animation:shim 1.4s linear infinite; }
@keyframes shim{ to{ background-position:-220% 0; } }
.ex__src{
  position:absolute; left:9px; bottom:9px; width:56px; height:56px; z-index:2;
  object-fit:cover; border:2px solid #fff; border-radius:2px;
  box-shadow:0 2px 10px rgba(18,17,16,.28);
}
.ex__srclabel{
  position:absolute; left:9px; bottom:70px; z-index:2;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(251,250,248,.92); padding:2px 6px; color:var(--ink-2);
}
.ex__body{ padding-top:10px; flex:1; display:flex; flex-direction:column; gap:3px; }
.ex__t{ font-size:13.5px; line-height:1.3; }
.ex__by{ font-size:11.5px; color:var(--muted); }
.ex__cta{ margin-top:9px; }

/* ---------- social proof ---------- */
.proof{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.proof b{ color:var(--ink); font-weight:500; }
.proof__dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; }
.proof--buy{ margin-top:10px; padding:9px 0 0; border-top:1px solid var(--line); }


/* homepage review cards — a rail, so they are all the same height */
.rcard{ border:1px solid var(--line); background:var(--white); display:flex; flex-direction:column; }
.rcard img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--paper-2); }
.rcard__b{ padding:15px 16px 17px; flex:1; display:flex; flex-direction:column; gap:8px; }
.rcard__q{ font-size:14px; color:var(--ink-2); flex:1; }
.rcard__n{ font-size:12.5px; color:var(--muted); }
/* Most reviews have no photograph. Rather than an empty picture slot, the
   words get the room: a quote mark, and the quote itself set larger. */
.rcard--plain{ background:var(--paper-2); }
.rcard--plain .rcard__b{ padding-top:20px; }
.rcard--plain .rcard__q{ font-size:15px; line-height:1.55; color:var(--ink); flex:0 1 auto; }
.rcard__say{ display:flex; flex-direction:column; gap:8px; margin-block:auto; }
.rcard__mark{ font-family:var(--f-display); font-size:44px; line-height:.6; color:var(--line-2); display:block; }

/* checkout reassurance + payment marks */
.reassure{ border:1px solid var(--line); background:var(--white); padding:18px; margin-top:14px; }
.reassure__q{ font-family:var(--f-display); font-size:17px; line-height:1.3; }
.reassure__n{ font-size:12.5px; color:var(--muted); margin-top:7px; }
.pay{ display:flex; gap:5px; flex-wrap:wrap; margin-top:12px; }
.pay span{ border:1px solid var(--line); padding:4px 8px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-radius:2px; }

/* =========================================================
   shop — facets + toolbar
   ========================================================= */
.shop{ display:block; }

.facets{ font-size:13.5px; }
.facets__row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fpop{ position:relative; }
.fpop__btn{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-2); border-radius:16px; padding:7px 14px; font-size:12.5px; color:var(--ink-2);
  white-space:nowrap; transition:border-color .2s var(--ease), color .2s var(--ease); }
.fpop__btn::-webkit-details-marker{ display:none; }
.fpop__btn::after{ content:"⌄"; font-size:11px; line-height:1; margin-top:-3px; color:var(--muted-2); }
.fpop__btn:hover{ border-color:var(--ink); color:var(--ink); }
.fpop__btn.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.fpop__btn i{ font-style:normal; font-size:11px; }
.fpop[open] .fpop__btn{ border-color:var(--ink); color:var(--ink); }
.fpop[open] .fpop__btn.is-on{ color:var(--paper); }
.fpop__panel{ position:absolute; z-index:60; top:calc(100% + 8px); left:0; min-width:224px; max-height:340px; overflow-y:auto;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); padding:12px 14px; }
.facets__clearall{ margin-left:4px; }
.facets__done{ display:none; }
@media (max-width:999px){ .facets__done{ display:block; } }
.facet{ display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; color:var(--ink-2); }
.facet:hover{ color:var(--ink); }
.facet input{ appearance:none; -webkit-appearance:none; width:15px; height:15px; border:1px solid var(--line-2); border-radius:1px; display:grid; place-items:center; cursor:pointer; flex:none; background:var(--white); }
.facet input:checked{ background:var(--ink); border-color:var(--ink); }
.facet input:checked::after{ content:"✓"; color:var(--paper); font-size:10px; line-height:1; }
.facet span:last-child{ margin-left:auto; color:var(--muted-2); font-size:12px; }
.facets__clear{ margin-top:14px; }
.facets__toggle{ display:flex; }
@media (min-width:1000px){ .facets__toggle{ display:none; } }
@media (max-width:999px){
  .facets{ position:fixed; inset:0; z-index:180; background:var(--paper); padding:0 var(--gut) 90px; overflow-y:auto; transform:translateY(100%); transition:transform .32s var(--ease); }
  .facets.on{ transform:none; }
  .facets__head{ position:sticky; top:0; background:var(--paper); padding:16px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; z-index:2; }
  .facets__done{ position:fixed; left:var(--gut); right:var(--gut); bottom:18px; }
  /* in the sheet the popovers flatten into plain accordion groups */
  .facets__row{ display:block; }
  .fpop{ border-top:1px solid var(--line); }
  .fpop__btn{ border:0; border-radius:0; width:100%; justify-content:space-between; padding:15px 0; font-size:15px; color:var(--ink); }
  .fpop__btn.is-on{ background:none; color:var(--ink); }
  .fpop__panel{ position:static; border:0; box-shadow:none; padding:0 0 12px; max-height:none; min-width:0; }
  .facets__clearall{ margin:16px 0 0; display:inline-block; }
}
.facets__head{ display:none; }
@media (max-width:999px){ .facets__head{ display:flex; } }

.toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.toolbar__count{ font-size:13.5px; color:var(--muted); }
.toolbar__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.select{
  border:1px solid var(--line-2); background:var(--white); padding:8px 30px 8px 12px; font-size:13px;
  border-radius:var(--r); cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23121110' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line-2); background:var(--white); color:var(--ink-2);
  padding:7px 12px; font-size:12.5px; cursor:pointer; border-radius:var(--r);
  transition:.2s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip--x::after{ content:"×"; margin-left:7px; opacity:.6; }

/* =========================================================
   product detail
   ========================================================= */
.pdp{ display:grid; gap:clamp(20px,3vw,52px); grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){ .pdp{ grid-template-columns:minmax(0,1.32fr) minmax(360px,.68fr); } }

.gal2{ display:grid; gap:8px; align-content:start; }
@media (min-width:1000px){ .gal2{ position:sticky; top:calc(var(--nav-h) + 16px); } }
.gal2__main{ position:relative; background:var(--paper-2); overflow:hidden; aspect-ratio:4/3; cursor:zoom-in; }
/* What you are looking at, and on the material slide what it is made of —
   the line that turns a photograph into information. */
.gal2__cap{ margin:10px 2px 0; font-size:12.5px; color:var(--muted); min-height:1.4em; }
.gal2__note{ display:flex; gap:8px; align-items:flex-start; margin:8px 2px 0; padding:10px 12px; border-radius:10px;
  background:var(--paper-2); font-size:13px; line-height:1.45; color:var(--ink); }
.gal2__note[hidden]{ display:none; }
.gal2__note svg{ width:16px; height:16px; flex:none; margin-top:2px; }
.gal2__main img{ width:100%; height:100%; object-fit:cover; }
.gal2__count{ position:absolute; right:12px; bottom:12px; background:rgba(18,17,16,.72); color:#fff; font-size:11.5px; padding:4px 9px; border-radius:20px; }
.gal2__thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.gal2__thumbs button{ width:72px; height:72px; padding:0; border:1px solid transparent; background:none; cursor:pointer; overflow:hidden; }
.gal2__thumbs button.is-on{ border-color:var(--ink); }
.gal2__thumbs img{ width:100%; height:100%; object-fit:cover; }

.buy{ display:flex; flex-direction:column; gap:0; }
@media (min-width:1000px){ .buy{ position:sticky; top:calc(var(--nav-h) + 16px); } }
/* Where you are, and the way back up. It WRAPS rather than scrolls: "Home /
   Collections / Perspective / Wide Field Panel" does not fit a 390px phone,
   and a page that scrolls sideways is the fault we check every width for. */
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; }
.crumbs li{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-2); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.crumbs [aria-current="page"]{ color:var(--ink-2); }
.crumbs__band{ padding-block:clamp(10px,1.2vw,15px) clamp(8px,1vw,12px); }
.page-head .crumbs{ margin-bottom:clamp(14px,2vw,22px); }
.buy__title{ margin-top:4px; }
.buy__rating{ display:flex; align-items:center; gap:9px; margin-top:10px; }
.buy__rating button{ background:none; border:0; padding:0; font-size:12.5px; color:var(--muted); cursor:pointer; border-bottom:1px solid var(--line-2); }
.buy__rating button:hover{ color:var(--ink); border-color:var(--ink); }


.buy__price{ margin-top:18px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.buy__price b{ font-family:var(--f-display); font-size:30px; font-weight:400; line-height:1; }
.buy__price .tiny{ color:var(--muted); }

.opt-block{ margin-top:22px; }
.opt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.opt-head b{ font-size:12.5px; font-weight:500; }
.opt-head span{ font-size:12.5px; color:var(--muted); }
.opt-grid{ display:grid; gap:7px; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); }
.opt{
  border:1px solid var(--line-2); background:var(--white); padding:10px 12px; cursor:pointer;
  text-align:left; border-radius:var(--r); transition:.18s var(--ease); line-height:1.3;
}
.opt:hover{ border-color:var(--ink); }
.opt.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.opt b{ display:block; font-size:13px; font-weight:500; }
.opt em{ font-style:normal; display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.opt i{ font-style:normal; display:block; font-size:12px; margin-top:4px; }

/* The lettering field. Set in the display face at the size it is typed, so
   what the visitor sees under their fingers is the shape that lands on the
   piece — not 14px of interface type standing in for gold leaf. */
.opt-text{
  width:100%; border:1px solid var(--line-2); background:var(--white);
  padding:11px 12px; border-radius:var(--r); transition:.18s var(--ease);
  font-family:var(--f-display); font-size:21px; line-height:1.25; color:var(--ink);
}
.opt-text:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.opt-text::placeholder{ color:var(--muted); font-size:15px; }
.opt-block .tiny{ display:block; margin-top:7px; color:var(--muted); }

/* Real pieces, photographed. Two up on a phone would shrink a room shot to
   nothing, so it is one; above that, as many as fit at a readable size. */
.made{ display:grid; gap:clamp(10px,1.4vw,18px); grid-template-columns:1fr; margin-top:clamp(16px,2vw,26px); }
.made__i{ margin:0; }
/* The photographs come in whatever shape the camera was held: a 16:9 room
   shot beside a 4:3 one leaves one caption stranded below the rest of the
   row. One ratio, cropped to it, keeps the row level. */
.made__i img{ width:100%; display:block; border-radius:var(--r); background:var(--line);
  aspect-ratio:16/10; object-fit:cover; }
.made__i figcaption{ margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.35; }
@media (min-width:700px){ .made{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .made{ grid-template-columns:repeat(4,1fr); } .made--pair{ grid-template-columns:repeat(2,1fr); } }

.buy__cta{ margin-top:22px; display:grid; gap:8px; }


.assure{ margin-top:16px; border-top:1px solid var(--line); }
.assure__row{ display:grid; grid-template-columns:20px 1fr; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2); align-items:start; }
.assure__row svg{ width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.3; margin-top:1px; }
.assure__row b{ font-weight:500; }
.assure__row a{ border-bottom:1px solid var(--line-2); }
.assure__row a:hover{ border-color:var(--ink); }

/* the delivery date keeps a row of its own; the four promises sit under it */
.assure__date{ margin-top:16px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; font-size:13px; color:var(--ink-2); }
.assure__date svg{ width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.3; margin-top:1px; }
.assure__date b{ font-weight:500; }
.assure__date a{ border-bottom:1px solid var(--line-2); }
.assure__date a:hover{ border-color:var(--ink); }

.usp{ margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; text-align:center; }
.usp li{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.usp svg{ width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.2; }
.usp span{ font-size:11.5px; line-height:1.35; color:var(--ink-2); }

/* a real discount, when one is set — dormant until then */
.pcard__price s{ color:var(--muted-2); margin-right:5px; }
.buy__was{ color:var(--muted-2); margin-right:8px; font-size:.72em; }
@media (max-width:520px){ .usp{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; } }

/* full-bleed rules, spine-aligned text: the cells carry 16px of their own, so
   the row only needs the remainder of the gutter */
.trustrow{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr)); padding-inline:calc(var(--gut) - 16px);
  /* the gap colour is this element's own background, so without clipping it
     also paints the new side padding and leaves grey strips in the gutters */
  background-clip:content-box; }
@media (min-width:900px){ .trustrow{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.trustrow__i{ background:var(--paper); padding:18px 16px; }
.trustrow__i b{ display:block; font-size:13px; font-weight:500; }
.trustrow__i span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }

/* the three promises — given more room than the reassurance strip */
.pillars{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:1fr; }
@media (min-width:760px){ .pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pillar{ border-top:1px solid var(--ink); padding-top:16px; }
.pillar__n{ font-family:var(--f-display); font-size:12px; letter-spacing:.1em; color:var(--accent); }
.pillar__t{ font-family:var(--f-display); font-size:clamp(22px,2.4vw,30px); font-weight:400; margin-top:8px; letter-spacing:-.01em; }
.pillar__d{ margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:34ch; }

/* spec table */
.spec{ border-top:1px solid var(--line); }
.spec__r{ display:grid; grid-template-columns:38% 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.spec__r dt{ color:var(--muted); }

.acc{ border-bottom:1px solid var(--line); }
.acc__btn{ width:100%; background:none; border:0; text-align:left; padding:15px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; font-size:14px; }
.acc__btn::-webkit-details-marker{ display:none; }
.acc__btn span:last-child{ font-size:17px; color:var(--muted); transition:transform .3s var(--ease); }
.acc[open] .acc__btn span:last-child{ transform:rotate(45deg); }
.acc__body{ padding-bottom:16px; font-size:13.5px; color:var(--ink-2); display:grid; gap:8px; }

/* =========================================================
   reviews
   ========================================================= */
.rev-top{ display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .rev-top{ grid-template-columns:280px 1fr; } }
.rev-score{ border:1px solid var(--line); background:var(--white); padding:22px; }
.rev-score__n{ font-family:var(--f-display); font-size:52px; line-height:1; }
.rev-bars{ margin-top:16px; display:grid; gap:6px; }
.rev-bar{ display:grid; grid-template-columns:34px 1fr 28px; gap:9px; align-items:center; font-size:12px; color:var(--muted); }
.rev-bar__t{ height:5px; background:var(--paper-3); overflow:hidden; }
.rev-bar__f{ height:100%; background:var(--ink); }
.rev-list{ display:grid; gap:0; }
.rev{ padding:20px 0; border-bottom:1px solid var(--line); }
.rev:first-child{ padding-top:0; }
.rev__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rev__name{ font-size:13.5px; font-weight:500; }
.rev__ver{ font-size:11px; color:var(--ok); display:inline-flex; align-items:center; gap:4px; }
.rev__date{ font-size:12px; color:var(--muted-2); margin-left:auto; }
.rev__title{ font-family:var(--f-display); font-size:19px; margin-top:9px; }
.rev__body{ margin-top:6px; font-size:14px; color:var(--ink-2); max-width:68ch; }
.rev__img{ margin-top:12px; width:132px; height:132px; object-fit:cover; background:var(--paper-2); cursor:zoom-in; }
.rev-note{ margin-top:16px; padding:12px 14px; border:1px dashed var(--line-2); font-size:12px; color:var(--muted); background:var(--paper-2); }

/* =========================================================
   editorial
   ========================================================= */

/* where will it hang — a plain, consumer-legible way into the shop */
.rooms .chip{ background:var(--white); }


/* Eight of these are the whole Shop page, so each one's height is the page's
   height eight times over. A 4:3 photograph in the wider column made a 562px
   row; a shallower frame in the narrower column keeps them scannable. */
.col-row{ display:grid; gap:clamp(18px,2.2vw,34px); align-items:center; grid-template-columns:1fr; padding-block:clamp(16px,1.8vw,26px); border-top:1px solid var(--line); }
.col-row:first-of-type{ border-top:0; padding-top:0; }
@media (min-width:860px){
  .col-row{ grid-template-columns:1fr 1.05fr; }
  .col-row:nth-child(even) .col-row__media{ order:2; }
}
.col-row__media{ position:relative; overflow:hidden; background:var(--paper-2); }
.col-row__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1s var(--slow); }
.col-row:hover .col-row__media img{ transform:scale(1.03); }
.col-row__body h3{ margin-top:8px; }
.col-row__body .lead{ margin-top:11px; max-width:44ch; }
.col-row__meta{ margin-top:16px; display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.col-row__cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.col-row__strip{ margin-top:14px; display:flex; gap:6px; }
.col-row__strip img{ width:66px; height:66px; object-fit:cover; }

.chero{ position:relative; min-height:min(46vh,380px); display:flex; align-items:flex-end; overflow:hidden; }
.chero__media{ position:absolute; inset:0; }
.chero__media img{ width:100%; height:100%; object-fit:cover; }
.chero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,7,6,.34),rgba(8,7,6,.04) 40%,rgba(8,7,6,.74)); }
.chero__in{ position:relative; width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut) clamp(20px,2.4vw,34px); color:#F8F5F0; }
.chero__num{ font-family:var(--f-display); font-size:13px; letter-spacing:.14em; color:rgba(248,245,240,.72); }
.chero__sub{ margin-top:12px; max-width:40ch; font-size:clamp(15px,1.5vw,18px); color:rgba(248,245,240,.92); }

.dark{ background:var(--night); color:#EDE7DF; }
.dark .eyebrow{ color:rgba(237,231,223,.5); }
.dark .lead{ color:rgba(237,231,223,.66); }
.dark h2,.dark h3{ color:#F4EFE7; }

.xform-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .xform-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }
.xform-step__frame{ aspect-ratio:4/3; background:var(--night-2); overflow:hidden; display:grid; place-items:center; }
.xform-step__frame img{ width:100%; height:100%; object-fit:cover; }
/* the rendered steps are whole artworks — show all of them rather than cropping */
.xform-step__frame canvas{ width:100%; height:100%; object-fit:contain; }
.xform-step__n{ font-family:var(--f-display); font-size:12px; color:var(--accent); letter-spacing:.1em; }
.xform-step__t{ margin-top:8px; font-size:13.5px; }
.xform-step__d{ margin-top:3px; font-size:12.5px; color:rgba(237,231,223,.55); }
.xform-step__head{ margin-top:12px; display:flex; align-items:baseline; gap:9px; }

.steps{ display:grid; gap:clamp(18px,2.5vw,34px); grid-template-columns:1fr; }
@media (min-width:720px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ border-top:1px solid var(--line); padding-top:15px; }
.step__n{ font-family:var(--f-display); font-size:14px; color:var(--accent); }
.step h2{ margin-top:8px; font-family:var(--f-display); font-size:22px; }
.step p{ margin-top:6px; font-size:13.5px; color:var(--ink-2); }

.idea{ display:grid; gap:clamp(18px,3vw,52px); grid-template-columns:1fr; }
@media (min-width:900px){ .idea{ grid-template-columns:.85fr 1.15fr; } }
.idea__list{ display:grid; gap:14px; }
.idea__item{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; border-top:1px solid var(--line); padding-top:12px; }

.ba{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:700px){ .ba{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ba__pair{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ba__box{ position:relative; background:var(--paper-2); aspect-ratio:1/1; overflow:hidden; }
.ba__box img,.ba__box canvas{ width:100%; height:100%; object-fit:cover; }
.ba__tag{ position:absolute; left:7px; top:7px; background:rgba(18,17,16,.74); color:#fff; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 6px; }
.ba__cap{ margin-top:9px; font-size:12.5px; color:var(--muted); }

.mat{ display:grid; gap:clamp(18px,2.4vw,34px); grid-template-columns:1fr; align-items:start; padding-block:clamp(20px,2.4vw,34px); border-top:1px solid var(--line); }
@media (min-width:860px){ .mat{ grid-template-columns:.4fr .6fr; } }
.mat__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2); }

.page-head{ padding-block:clamp(22px,2.8vw,40px) clamp(13px,1.6vw,22px); }
.page-head .lead{ margin-top:14px; max-width:50ch; }

/* gallery masonry */
.gal{ columns:2; column-gap:clamp(12px,1.6vw,22px); }
@media (min-width:900px){ .gal{ columns:3; } }
@media (min-width:1300px){ .gal{ columns:4; } }
.gal__item{ break-inside:avoid; margin-bottom:clamp(12px,1.6vw,22px); position:relative; }
.gal__item img,.gal__item canvas{ width:100%; height:auto; display:block; background:var(--paper-2); }
.gal__over{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,17,16,0) 38%,rgba(18,17,16,.76)); opacity:0; transition:.3s var(--ease); display:flex; align-items:flex-end; padding:14px; }
.gal__item:hover .gal__over,.gal__item:focus-within .gal__over{ opacity:1; }
.gal__over div{ color:#fff; }
.gal__over .small{ color:rgba(255,255,255,.74); }
.gal__over .btn{ margin-top:9px; }
/* Where there is no pointer there is no hover, and this overlay carries the
   gallery's only way in — sixteen tiles with no way to reach any of them. On a
   touch screen it stops being an overlay: the title and the way in sit UNDER
   the tile. A band over it was tried and does not fit — a phone's tile is
   about 127px tall and the words alone need 146px — and covering the work to
   caption the work is the wrong trade anyway. */
@media (hover:none){
  .gal__over{ opacity:1; position:static; background:none; padding:9px 0 0;
    display:block; }
  .gal__over div{ color:var(--ink); }
  .gal__over .small{ color:var(--muted); }
  .gal__over > div > div:first-child{ font-size:15px !important; line-height:1.2; }
  .gal__over .btn{ margin-top:8px; padding:7px 13px; font-size:12.5px;
    background:none; color:var(--ink); border:1px solid var(--line-2); }
}
.gal__tag{ position:absolute; left:11px; top:11px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; background:rgba(251,250,248,.92); padding:4px 7px; }

/* =========================================================
   gifting, the studio film, the newsletter
   ========================================================= */
.gfacts{ margin-top:clamp(26px,3.4vw,44px); display:grid; gap:clamp(14px,2vw,26px); grid-template-columns:1fr; }
@media (min-width:760px){ .gfacts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gfact{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  border-top:1px solid var(--line); padding-top:14px; }
.gfact svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.3; margin-top:2px; }
.gfact b{ display:block; font-size:14px; font-weight:500; }
.gfact span{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* The frame is 16:9 so a film drops into it without a single change of
   layout. Until then it holds the workshop photograph, and the control says
   so rather than pretending to play. */
.film{ margin:0; }
/* Cinematic rather than tall: a 16:9 frame at this width is most of a screen
   on its own. The video fills it and the poster does the same, so nothing
   moves when the film starts. */
.film__frame{ display:block; position:relative; width:100%; aspect-ratio:21/9; max-height:430px; overflow:hidden;
  border:0; padding:0; background:var(--paper-2); }
/* The frame is wider than the footage and the posters, and the piece sits in
   the upper part of both, so the crop is weighted upward rather than centred
   — centred cuts the top off the artwork, which is the one thing here. */
.film__v{ width:100%; height:100%; object-fit:cover; object-position:center 32%;
  display:block; background:var(--paper-2); }
/* The control is the whole frame, so a tap anywhere starts it; it is a real
   button underneath, which is what a keyboard and a screen reader need. */
.film__play{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
  background:none; cursor:pointer; }
.film__play::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(52px,6vw,74px); height:clamp(52px,6vw,74px); border-radius:50%;
  background:rgba(251,250,248,.92); box-shadow:0 6px 24px rgba(18,17,16,.28);
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.film__play::after{ content:""; position:absolute; left:calc(50% + 2px); top:50%; transform:translate(-50%,-50%);
  border-left:clamp(13px,1.5vw,18px) solid var(--ink);
  border-top:clamp(9px,1vw,12px) solid transparent; border-bottom:clamp(9px,1vw,12px) solid transparent;
  transition:opacity .3s var(--ease); }
/* once it is running the control gets out of the way, and comes back on hover
   or focus so there is always a way to stop it */
.film__frame.is-playing .film__play::before,
.film__frame.is-playing .film__play::after{ opacity:0; }
.film__frame.is-playing .film__play:hover::before,
.film__frame.is-playing .film__play:focus-visible::before{ opacity:.92; }
.film__frame.is-playing .film__play:hover::after,
.film__frame.is-playing .film__play:focus-visible::after{ opacity:1; }
/* if the browser refuses to play, the control stays visible rather than
   pretending something happened */
.film__frame.is-stuck .film__play::before,
.film__frame.is-stuck .film__play::after{ opacity:1 !important; }
.film__cap{ margin-top:12px; font-size:12.5px; color:var(--muted); max-width:60ch; }

/* The two states, side by side: the collection's whole argument in one row. */
.states{ display:grid; gap:clamp(12px,1.6vw,22px); grid-template-columns:1fr; }
@media (min-width:720px){ .states{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.states__i{ margin:0; }
.states__m{ position:relative; display:block; }
.states__m > img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2); cursor:zoom-in; display:block; }
/* The photograph both panels were painted from, in the corner of each — the
   same box the product cards use, so "made from this" reads the same wherever
   it appears. */
.states__from{ position:absolute; left:12px; bottom:12px; z-index:2; width:26%; max-width:110px; display:block; }
.states__from img{ width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border:2px solid #fff; box-shadow:0 2px 12px rgba(18,17,16,.28); }
.states__i figcaption{ margin-top:9px; font-size:12.5px; color:var(--muted); }
.states__note{ margin-top:14px; color:var(--muted); }
.filmstrip{ margin-top:clamp(18px,2.4vw,30px); display:grid; gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(4,minmax(0,1fr)); }
.filmstrip__i{ margin:0; }
.filmstrip__i img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--paper-2); cursor:zoom-in; }
.filmstrip__i figcaption{ margin-top:8px; font-size:12.5px; color:var(--muted); }

.news{ text-align:center; max-width:46ch; margin:0 auto; }
.news .small{ margin-top:8px; color:var(--muted); }
.news__f{ margin-top:18px; display:flex; gap:8px; justify-content:center; }
.news__f input{ flex:1; min-width:0; max-width:320px; border:1px solid var(--line-2);
  background:var(--white); padding:12px 14px; font-size:14px; border-radius:var(--r); }

/* =========================================================
   cart / checkout
   ========================================================= */
.cart{ display:grid; gap:clamp(22px,3vw,50px); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .cart{ grid-template-columns:1.4fr .6fr; } }
.line{ display:grid; grid-template-columns:86px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }
@media (min-width:600px){ .line{ grid-template-columns:110px 1fr auto; gap:20px; } }
.line__img{ background:var(--paper-2); aspect-ratio:1/1; overflow:hidden; }
.line__img img{ width:100%; height:100%; object-fit:cover; }
.line__name{ font-family:var(--f-display); font-size:19px; }
.line__meta{ margin-top:4px; font-size:12.5px; color:var(--muted); display:grid; gap:2px; }
.line__acts{ margin-top:10px; display:flex; gap:13px; font-size:12.5px; align-items:center; }
.line__acts button{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted); border-bottom:1px solid var(--line-2); }
.line__acts button:hover{ color:var(--ink); border-color:var(--ink); }
.line__price{ font-size:14.5px; text-align:right; }

.summary{ background:var(--white); border:1px solid var(--line); padding:22px; position:sticky; top:calc(var(--nav-h) + 16px); }
.summary h3{ font-family:var(--f-display); font-size:22px; }
.summary__row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:13.5px; }
.summary__row--total{ border-top:1px solid var(--line); margin-top:8px; padding-top:13px; font-size:15px; }
.summary__row--total b{ font-family:var(--f-display); font-size:22px; font-weight:400; }
.summary .btn{ margin-top:16px; }
.summary__note{ margin-top:12px; font-size:11.5px; color:var(--muted); line-height:1.5; }

.field{ display:grid; gap:5px; margin-bottom:13px; }
.field label{ font-size:12px; color:var(--muted); }
.field input,.field select,.field textarea{ border:1px solid var(--line-2); background:var(--white); padding:11px 12px; font-size:14px; border-radius:var(--r); width:100%; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ink); }
.fields-2{ display:grid; gap:0 13px; grid-template-columns:1fr 1fr; }
.form-block{ margin-bottom:30px; }
.form-block h3{ font-family:var(--f-display); font-size:23px; margin-bottom:5px; }
.form-block .small{ margin-bottom:16px; }
.ship{ display:grid; gap:7px; }
.ship__opt{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; border:1px solid var(--line-2); background:var(--white); padding:13px 15px; cursor:pointer; }
.ship__opt.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.ship__opt b{ font-weight:500; font-size:14px; }
.ship__opt em{ font-style:normal; font-size:12.5px; color:var(--muted); display:block; }

.handoff{ text-align:center; max-width:600px; margin:0 auto; padding:clamp(26px,3.4vw,48px) 0; }
.handoff__seal{ width:62px; height:62px; margin:0 auto 20px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-size:24px; }
.handoff__box{ margin-top:26px; border:1px solid var(--line); background:var(--white); padding:20px; text-align:left; }

.empty{ text-align:center; padding:clamp(32px,4.4vw,60px) 0; }
.empty h2{ font-family:var(--f-display); font-size:clamp(26px,3.5vw,40px); }
.empty p{ margin-top:10px; color:var(--muted); }
.empty .btn{ margin-top:22px; }

/* =========================================================
   lightbox, toast, footer
   ========================================================= */
.lightbox{ position:fixed; inset:0; z-index:250; background:rgba(14,13,12,.9); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.lightbox.on{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(1100px,94vw); max-height:88vh; width:auto; height:auto; object-fit:contain;
  cursor:zoom-in; touch-action:none; will-change:transform; }
.lightbox img.is-zoom{ cursor:grab; }
.lightbox img.is-zoom:active{ cursor:grabbing; }
/* Above the picture: magnified, the image covers the whole overlay, and a
   close button underneath it cannot be pressed. */
.lightbox__x{ position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border:0; background:rgba(20,18,16,.55); color:#fff; font-size:20px; cursor:pointer; border-radius:50%; }
.lightbox__x:hover{ background:rgba(20,18,16,.8); }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px);
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:13.5px;
  z-index:300; opacity:0; transition:.3s var(--ease); border-radius:var(--r);
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 28px); box-shadow:var(--shadow);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }
.toast a{ border-bottom:1px solid rgba(251,250,248,.4); }

.foot{ background:var(--night); color:#D9D2C8; }
.foot__in{ max-width:var(--max); margin:0 auto; padding:clamp(26px,3.2vw,46px) var(--gut) 26px; display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:840px){ .foot__in{ grid-template-columns:1fr 1.5fr; gap:56px; } }
.foot__word{ font-family:var(--f-display); font-size:31px; color:#F2ECE3; }
.foot__tag{ margin-top:6px; font-size:13.5px; color:rgba(217,210,200,.6); }
.foot__cols{ display:grid; gap:28px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:600px){ .foot__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.foot__cols h4{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(217,210,200,.45); margin-bottom:12px; }
.foot__cols li{ margin-bottom:8px; font-size:13.5px; }
.foot__cols a{ color:rgba(217,210,200,.86); }
.foot__cols a:hover{ color:#fff; }
.foot__legal{ max-width:var(--max); margin:0 auto; padding:16px var(--gut) 26px; border-top:1px solid rgba(217,210,200,.14); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11.5px; color:rgba(217,210,200,.5); }

/* ---------- utility ---------- */
.reveal-up{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.in{ opacity:1; transform:none; }
.hide{ display:none !important; }
.center{ text-align:center; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* an editorial tile inside the product grid — a cell, not a band */


/* product information, stacked below the buy box — the reference sites all
   run story → highlights → questions → details → shipping in that order,
   under small all-caps headings */
.pinfo__block{ border-top:1px solid var(--line); padding-block:clamp(20px,2.4vw,32px); }
.pinfo__block:first-child{ border-top:0; padding-top:0; }
.pinfo__h{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  font-weight:500; font-family:var(--f-sans); margin-bottom:20px; }
.pinfo__subs{ margin-top:20px; }
.pinfo__subs dt{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.pinfo__subs dd{ margin:4px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.pinfo__subs dd a{ border-bottom:1px solid var(--line-2); }
.pinfo__subs dd a:hover{ border-color:var(--ink); }


/* express wallets — presentational, and deliberately quieter than Add to cart */
.xpay{ margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.xpay__btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:46px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-size:15px; letter-spacing:.01em; cursor:pointer; border-radius:2px; }
.xpay__btn:hover{ opacity:.88; }
.xpay__mark{ width:17px; height:17px; display:inline-block; background:#fff; color:var(--ink);
  border-radius:50%; font-size:11px; font-weight:600; line-height:17px; text-align:center; }
.xpay__mark::before{ content:""; }
.xpay__btn:not(.xpay__btn--g) .xpay__mark::before{ content:""; }
.xpay__note{ margin-top:8px; }


/* =========================================================
   cart drawer — slides in from the right
   ========================================================= */
.drawer{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(18,17,16,.32); opacity:0; transition:opacity .28s var(--ease); }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--paper); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s var(--ease); }
.drawer.on{ pointer-events:auto; }
.drawer.on .drawer__scrim{ opacity:1; }
.drawer.on .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut); border-bottom:1px solid var(--line); flex:none; }
.drawer__head b{ font-weight:500; }
.drawer__x{ border:0; background:none; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; color:var(--muted); }
.drawer__x:hover{ color:var(--ink); }
.drawer__body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.drawer__lines{ padding:6px var(--gut); flex:1; }
.drawer__foot{ padding:18px var(--gut) 24px; border-top:1px solid var(--line); background:var(--paper); }
.drawer__empty{ padding:40px var(--gut); text-align:center; display:grid; gap:18px; place-items:center; }
.line--sm{ grid-template-columns:64px 1fr auto; gap:12px; padding:14px 0; }
.line--sm .line__img{ width:64px; }
.line--sm .line__name{ font-size:14px; }
@media (prefers-reduced-motion:reduce){
  .drawer__panel{ transition:none; }
  .drawer__scrim{ transition:none; }
}


/* shop by room — four image tiles, one line each, one link each */
.rooms4{ display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1000px){ .rooms4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rtile{ display:block; }
.rtile__media{ display:block; overflow:hidden; background:var(--paper-2); aspect-ratio:4/5; }
.rtile__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--slow); }
.rtile:hover .rtile__media img{ transform:scale(1.04); }
.rtile__b{ display:block; padding-top:14px; }
.rtile__t{ display:block; font-family:var(--f-display); font-size:clamp(19px,1.7vw,24px); line-height:1.1; }
.rtile__d{ display:block; margin-top:6px; font-size:13px; line-height:1.5; color:var(--muted); max-width:26ch; }
.rtile__go{ display:inline-block; margin-top:10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .2s var(--ease); }
.rtile:hover .rtile__go{ border-color:var(--ink); }


/* a typographic breath between image blocks */


/* sibling collections as plain text links, the way both references do it */
.chips--applied{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 22px; }


/* "or pay by card" rule between express wallets and the form */
.codiv{ display:flex; align-items:center; gap:14px; margin-top:20px; color:var(--muted); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; }
.codiv::before,.codiv::after{ content:""; flex:1; height:1px; background:var(--line); }

/* =========================================================
   COLLECTION-FIRST STRUCTURE
   ========================================================= */

/* Editorial band between collection rows on the category page. Full width
   rather than a grid cell, because the rows it separates are full width. */
.cband{ position:relative; display:block; overflow:hidden; background:var(--paper-2);
  margin:clamp(28px,4vw,56px) 0; }
.cband__media{ display:block; aspect-ratio:21/9; }
.cband__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--slow); }
.cband:hover .cband__media img{ transform:scale(1.03); }
.cband__body{ position:absolute; inset:auto 0 0 0; padding:clamp(18px,2.4vw,34px);
  display:flex; flex-direction:column; gap:6px; color:#fff;
  background:linear-gradient(to top, rgba(18,17,16,.62), rgba(18,17,16,0)); }
.cband__t{ font-family:var(--f-display); font-size:clamp(24px,2.8vw,38px); line-height:1.05; }
.cband__d{ font-size:14px; opacity:.85; max-width:44ch; }
.cband__go{ margin-top:6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  align-self:flex-start; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; }
@media (max-width:919px){ .cband__media{ aspect-ratio:4/3; } }

/* Next / previous collection, so the set is traversable from inside one. */
.cpager{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(18px,2.4vw,30px) 0; }
.cpager__side{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cpager__side--n{ text-align:right; align-items:flex-end; }
.cpager__lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cpager__nm{ font-family:var(--f-display); font-size:clamp(16px,1.6vw,22px); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.cpager__side:hover .cpager__nm{ text-decoration:underline; text-underline-offset:3px; }
.cpager__all{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; border:1px solid var(--line); padding:9px 16px; }
.cpager__all:hover{ color:var(--ink); border-color:var(--ink); }
@media (max-width:719px){
  .cpager{ grid-template-columns:1fr 1fr; gap:14px 10px; }
  .cpager__all{ grid-column:1 / -1; order:3; text-align:center; }
}

/* One line above the size/finish controls saying what they actually are. */

/* the studio link under the buy stack, secondary to the three buttons */

/* Row-completing tile on a collection page. Reads as an invitation, not a
   product: no media, no price, and a flat ground so it never competes with
   the pieces beside it. */
.fill{ display:flex; flex-direction:column; justify-content:center; gap:8px;
  background:var(--paper-2); border:1px solid var(--line); padding:clamp(18px,2vw,26px);
  aspect-ratio:4/5; transition:border-color .25s var(--ease), background .25s var(--ease); }
.fill:hover{ border-color:var(--ink); background:var(--paper); }
.fill__t{ font-family:var(--f-display); font-size:clamp(19px,1.9vw,25px); line-height:1.1; }
.fill__d{ font-size:13px; color:var(--muted); max-width:26ch; text-wrap:pretty; }
.fill__go{ margin-top:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  align-self:flex-start; border-bottom:1px solid var(--line-2); padding-bottom:3px; }
.fill:hover .fill__go{ border-color:var(--ink); }

/* =========================================================
   THE VISITOR'S OWN PHOTOGRAPH
   ========================================================= */

/* Hero render. contain, not cover: the whole piece has to be visible — several
   engines compose across the full frame and cropping would cut them. */
.gal2__canvas{ width:100%; height:100%; object-fit:contain; display:block; }
.gal2__mine{ position:absolute; left:12px; top:12px; background:var(--ink); color:var(--paper);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; }
.gal2__thumbs canvas{ width:100%; height:100%; object-fit:contain; background:var(--paper-2); }

/* Card render, in place of the studio photograph. */
.pcard__media canvas{ width:100%; height:100%; object-fit:contain; display:block; background:var(--paper-2); }


/* The header control, once a photo exists. Carries Remove, so the promise that
   the picture is on the visitor's device is something they can act on. */

/* The ask. Same shell as the search, drawer and lightbox overlays. */
.pask{ position:fixed; inset:0; z-index:220; pointer-events:none; }
.pask__scrim{ position:absolute; inset:0; background:rgba(18,17,16,.42);
  opacity:0; transition:opacity .28s var(--ease); }
.pask__panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.985);
  width:min(440px,calc(100vw - 32px)); background:var(--paper); border:1px solid var(--line);
  padding:clamp(26px,3vw,38px); text-align:center; opacity:0;
  transition:opacity .28s var(--ease), transform .28s var(--ease); }
.pask.on{ pointer-events:auto; }
.pask.on .pask__scrim{ opacity:1; }
.pask.on .pask__panel{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.pask__x{ position:absolute; top:10px; right:12px; width:32px; height:32px; border:0; background:none;
  color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.pask__x:hover{ color:var(--ink); }
.pask__eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pask__t{ font-family:var(--f-display); font-size:clamp(23px,2.6vw,30px); line-height:1.1; margin:10px 0 0; }
.pask__d{ font-size:14px; color:var(--ink-2); margin:10px 0 22px; }
.pask__no{ display:block; margin:14px auto 0; font-size:12.5px; }
.pask__fine{ font-size:11.5px; color:var(--muted); margin:18px 0 0; }

/* the chooser's own library: photographs already used, newest first */
.pask__lib{ margin:0 0 20px; }
.pask__libt{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  margin-bottom:10px; }
.pask__grid{ display:grid; grid-template-columns:repeat(var(--pn,4),minmax(0,76px));
  gap:10px; justify-content:center; }
.pask__cell{ position:relative; }
.pask__p{ display:block; width:100%; padding:0; border:1px solid var(--line); background:var(--paper-2);
  aspect-ratio:1; overflow:hidden; cursor:pointer; transition:border-color .2s var(--ease); }
.pask__p img{ width:100%; height:100%; object-fit:cover; display:block; }
.pask__p:hover,.pask__p:focus-visible{ border-color:var(--ink); }
.pask__p.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }
.pask__rm{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:13px;
  line-height:1; cursor:pointer; padding:0; }
.pask__rm:hover{ color:var(--ink); border-color:var(--ink); }
.pask__or{ position:relative; text-align:center; margin:18px 0 16px; }
.pask__or::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--line); }
.pask__or span{ position:relative; background:var(--paper); padding:0 12px;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   YOUR WORK — versions started and not yet bought
   ========================================================= */
.wcard{ display:flex; flex-direction:column; }
.wcard__media{ display:block; position:relative; overflow:hidden; background:var(--paper-2);
  aspect-ratio:4/5; border:1px solid var(--line); }
.wcard__media img{ width:100%; height:100%; object-fit:contain; display:block;
  transition:transform 1s var(--slow); }
.wcard:hover .wcard__media img{ transform:scale(1.03); }
.wcard__body{ padding-top:11px; display:flex; flex-direction:column; gap:4px; }
.wcard__coll{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.wcard__name{ font-family:var(--f-display); font-size:19px; line-height:1.15; }
.wcard__meta{ font-size:12.5px; color:var(--muted); }
.wcard__act{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.link-btn{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:12.5px;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover{ color:var(--ink); }

/* =========================================================
   HOMEPAGE REVIEWS — the score, its spread, and fuller quotes
   ========================================================= */
.rsum{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,3vw,44px); align-items:center;
  border-block:1px solid var(--line); padding:clamp(14px,1.7vw,20px) 0; margin-bottom:clamp(15px,1.8vw,24px); }
.rsum__score{ text-align:center; }
.rsum__n{ font-family:var(--f-display); font-size:clamp(38px,5vw,58px); line-height:1; }
.rsum__bars{ min-width:0; max-width:420px; }
.rsum__facts{ display:flex; gap:clamp(18px,2.4vw,34px); }
.rsum__facts div{ display:flex; flex-direction:column; gap:2px; }
.rsum__facts b{ font-family:var(--f-display); font-size:clamp(18px,1.9vw,24px); font-weight:400; }
.rsum__facts span{ font-size:11.5px; color:var(--muted); }
@media (max-width:1099px){
  .rsum{ grid-template-columns:auto 1fr; }
  .rsum__facts{ grid-column:1 / -1; justify-content:space-between; }
}
@media (max-width:679px){
  .rsum{ grid-template-columns:1fr; text-align:center; }
  .rsum__bars{ max-width:none; }
  .rsum__facts{ flex-wrap:wrap; gap:16px; justify-content:center; text-align:center; }
  .rsum__facts div{ align-items:center; }
}

/* the quote runs in full now, so the card needs a headline above it */
.rcard__img{ display:block; }
.rcard__t{ font-family:var(--f-display); font-size:16px; line-height:1.25; margin:0; }
.rcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.rcard__v{ color:var(--ink-2); border:1px solid var(--line); padding:1px 6px; }
.rcard__go{ font-size:12px; margin-top:2px; }

/* =========================================================
   BAG AND CHECKOUT
   ========================================================= */

/* Two steps, because the site has two. */
.flow{ display:flex; align-items:center; gap:clamp(10px,2vw,22px); justify-content:center; }
.flow__s{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.flow__n{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-3); color:var(--muted); font-size:12.5px; flex:none; }
.flow__s.is-on{ color:var(--ink); }
.flow__s.is-on .flow__n{ background:var(--ink); color:var(--paper); }
.flow__s.is-done{ color:var(--ink-2); }
.flow__s.is-done .flow__n{ background:var(--ink-2); color:var(--paper); }
.flow__s.is-done a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.flow__r{ flex:1; max-width:180px; height:1px; background:var(--line); }
@media (max-width:599px){ .flow__r{ max-width:40px; } .flow__s{ font-size:12px; } }

.page-head__n{ font-family:var(--f-body); font-size:15px; color:var(--muted); vertical-align:middle; margin-left:6px; }

/* What was configured, and the gift note — expanders on each bag line. */
.ldet{ margin-top:12px; border-top:1px solid var(--line); }
.ldet summary{ list-style:none; cursor:pointer; padding:10px 0 0; font-size:12.5px; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; }
.ldet summary::-webkit-details-marker{ display:none; }
.ldet summary::after{ content:"⌄"; font-size:11px; color:var(--muted); transition:transform .2s var(--ease); }
.ldet[open] summary::after{ transform:rotate(180deg); }
.ldet summary:hover{ color:var(--ink); }
.ldet summary svg{ width:15px; height:15px; flex:none; }
.ldet__d{ margin:10px 0 12px; display:grid; grid-template-columns:auto 1fr; gap:5px 18px; font-size:12.5px; }
.ldet__d dt{ color:var(--muted); }
.ldet__d dd{ margin:0; }
.ldet__g{ padding:10px 0 14px; }
.ldet__g textarea{ width:100%; border:1px solid var(--line); background:var(--white); padding:10px 12px;
  font:inherit; font-size:13px; resize:vertical; }
.ldet__g textarea:focus{ outline:none; border-color:var(--ink); }

/* Shipping choice, on the bag as well as the checkout. */
.ship{ display:grid; gap:8px; margin-top:12px; }
.ship__o{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  border:1px solid var(--line); padding:13px 14px; cursor:pointer; transition:border-color .2s var(--ease); }
.ship__o:hover{ border-color:var(--ink-2); }
.ship__o.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.ship__b{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ship__b b{ font-weight:500; font-size:13.5px; }
.ship__p{ font-size:13.5px; white-space:nowrap; }

.promo{ display:flex; gap:8px; margin-top:12px; }
.promo input{ flex:1; min-width:0; border:1px solid var(--line); background:var(--white);
  padding:10px 12px; font:inherit; font-size:13px; }
.promo input:focus{ outline:none; border-color:var(--ink); }
.promo .btn{ margin-top:0; flex:none; }
.promo__msg{ font-size:12px; color:var(--muted); margin-top:8px; min-height:1em; }
.promo__msg.is-bad{ color:var(--ink); }

.summary__row--off{ color:var(--ink-2); }

/* the drawer's Edit | Remove row, and the quiet way to the full bag */
.drawer__title span{ color:var(--muted); font-size:13px; }
.line__bar{ color:var(--line-2); }
.drawer__full{ display:block; text-align:center; margin-top:12px; font-size:12.5px; }

/* =========================================================
   CRAFT
   ========================================================= */

/* One closing moment, built the same way on every page that has one. Centring
   is the device that says "this page is over"; it only reads as deliberate if
   it is identical each time. */
.endcta{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.endcta h2{ max-width:20ch; }
.endcta p{ max-width:44ch; color:var(--ink-2); }
.endcta__a{ margin-top:8px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Small text buttons were 20px tall — under the 24px minimum and hard to hit on
   a phone. Grown through padding, so nothing looks different. */
.line__acts button, .link-a, .buy__rating button{
  min-height:24px; padding-block:2px;
}

/* A grid whose column count comes from how many things are in it, so the last
   row is always full. Fixed counts stranded a single card on its own row in
   three places: five engine controls in four columns, five sample renders in
   four, and four featured pieces in three at tablet width. */
.grid--n{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:920px){ .grid--n{ grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); } }

/* =========================================================
   THE FUNNEL
   Two full-height moments — asking for the photograph, and making the
   piece — then the summary that sells it. Same shell for both moments.
   ========================================================= */
.stage{
  position:relative; min-height:calc(100dvh - var(--nav-h) - var(--bar-h));
  display:grid; place-items:center; overflow:hidden; background:var(--ink);
}
.stage__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage__bg--blur{ filter:blur(26px) saturate(.75); transform:scale(1.1); }
/* Two layers: a flat one so white type is legible over any photograph at all,
   and a pool under the middle where the words actually sit. A room shot can be
   bright orange in the centre — one gentle gradient is not enough. */
.stage__scrim{ position:absolute; inset:0; background:rgba(16,15,14,.42); }
.stage__scrim::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(76% 62% at 50% 50%, rgba(14,13,12,.72) 0%, rgba(14,13,12,.34) 55%, rgba(14,13,12,0) 100%); }
.stage__in{
  position:relative; z-index:2; width:100%; max-width:560px; text-align:center; color:#fff;
  padding:clamp(40px,7vw,80px) var(--gut) calc(clamp(40px,7vw,80px) + env(safe-area-inset-bottom));
}
.stage__eyebrow{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:500; }
.stage__t{ font-family:var(--f-display); font-size:clamp(30px,5.2vw,52px); line-height:1.04;
  letter-spacing:-.015em; margin:10px 0 0; color:#fff; }
.stage__price{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.8); }

/* one target, and a big one: the plus and the words are the same button */
.drop{
  margin:clamp(26px,4vw,40px) auto 0; display:flex; flex-direction:column; align-items:center; gap:12px;
  width:100%; padding:clamp(26px,4vw,38px) 24px; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.42); border-radius:var(--r);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.drop:hover,.drop:focus-visible,.drop.is-over{ background:rgba(255,255,255,.16); border-color:#fff; }
.drop__plus{ font-size:38px; line-height:1; font-weight:200; }
.drop__t{ font-family:var(--f-display); font-size:clamp(20px,2.4vw,27px); line-height:1.1; }

.stage__alt{ margin-top:clamp(20px,3vw,28px); }
.stage__altt{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.66); }
/* on a phone the row runs off the side rather than wrapping into a block */
.stage__thumbs{ margin-top:11px; display:flex; gap:9px;
  overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
/* centred with auto margins rather than justify-content, which would push the
   first thumbs off the left edge, out of reach, once the row overflows */
.stage__thumbs > :first-child{ margin-left:auto; }
.stage__thumbs > :last-child{ margin-right:auto; }
.stage__thumbs::-webkit-scrollbar{ display:none; }
.stage__th{ flex:none; width:60px; padding:0; border:1px solid rgba(255,255,255,.4); background:none;
  cursor:pointer; color:rgba(255,255,255,.72); font-size:10px; }
.stage__th img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.stage__th span{ display:block; padding:4px 2px 5px; }
.stage__th:hover,.stage__th:focus-visible{ border-color:#fff; color:#fff; }
.stage__th[disabled]{ opacity:.5; pointer-events:none; }
.stage__fine{ margin:clamp(20px,3vw,26px) auto 0; max-width:42ch; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.62); }

/* the making moment */
.make{ display:grid; justify-items:center; gap:clamp(14px,2vw,20px); margin-top:clamp(18px,2.6vw,28px); }
/* Both layers are centred and contained in one box, so a photograph and a
   piece of a different shape still sit over one another. */
.make__frame{ position:relative; width:min(520px,86vw); height:min(44dvh,400px); }
.make__photo,.make__art{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.make__photo{ transition:opacity 1.6s var(--ease); }
.make__photo.is-out{ opacity:0; }
/* The piece emerges rather than appears: three renders, each sharper, each a
   little more present than the last. */
.make__art{ opacity:0; filter:blur(14px); transition:opacity 1.2s var(--ease), filter 1.2s var(--ease); }
.make__art[data-pass="1"]{ opacity:.6; filter:blur(9px); }
.make__art[data-pass="2"]{ opacity:.88; filter:blur(3px); }
.make__art[data-pass="3"]{ opacity:1; filter:blur(0); }
/* The subject the site really found, drawn on the photograph for one step. */
.make__box{ position:absolute; z-index:2; border:1px solid rgba(255,255,255,.9);
  opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.make__box.is-on{ opacity:1; transform:none; }
.make__box::before,.make__box::after{ content:""; position:absolute; background:rgba(255,255,255,.9); }
.make__box::before{ left:50%; top:-7px; width:1px; height:5px; }
.make__box::after{ left:50%; bottom:-7px; width:1px; height:5px; }
.make__bar{ width:min(300px,74vw); height:1px; background:rgba(255,255,255,.22); overflow:hidden; }
.make__fill{ display:block; height:100%; width:0; background:#fff; transition:width 1.6s var(--ease); }
.make__step{ display:grid; justify-items:center; gap:5px; text-align:center; max-width:40ch; }
.make__t{ font-family:var(--f-display); font-size:clamp(17px,2.2vw,22px); color:#fff; line-height:1.2; }
.make__d{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.66); }
@media (prefers-reduced-motion: reduce){
  .make__art{ opacity:1; filter:none; transition:none; }
  .make__photo{ transition:none; }
  .make__fill{ transition:none; }
  .make__box{ transition:none; }
}

/* =========================================================
   THE SUMMARY
   ========================================================= */
.sale{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:14px;
  border:1px solid var(--line-2); border-left:3px solid var(--accent); padding:9px 12px; }
.sale b{ font-size:13px; font-weight:500; }
.sale span{ font-size:12px; color:var(--muted); }

.gal2__slide{ position:absolute; inset:0; width:100%; height:100%; }
/* photographs crop; the bare artwork must never be cut, because several
   engines compose right out to the frame */
.gal2__main img.gal2__slide{ object-fit:cover; }
.gal2__main canvas.gal2__slide{ object-fit:contain; background:var(--paper-2); }
.gal2__main canvas.gal2__slide[data-k="wall"]{ object-fit:cover; }
/* on a phone six thumbnails wrap into two rows and push the price off the
   screen; they scroll sideways instead, and a swipe works on the image */
@media (max-width:999px){
  .gal2__thumbs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .gal2__thumbs::-webkit-scrollbar{ display:none; }
  .gal2__thumbs button{ flex:none; width:62px; height:62px; }
}
.gal2__thumbs canvas{ width:100%; height:100%; object-fit:contain; background:var(--paper-2); }

.qtyb .opt-head{ margin-bottom:9px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r); }
.qty button{ width:42px; height:42px; border:0; background:none; cursor:pointer; font-size:17px; color:var(--ink); }
.qty button:hover{ color:var(--accent); }
.qty span{ min-width:34px; text-align:center; font-size:14px; }

.buy__cta .btn--line{ gap:8px; }
.buy__cta .btn--line svg{ width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.4; }
.buy__cta .btn--line.is-on svg{ fill:var(--accent); stroke:var(--accent); }
/* "use a different photo" — secondary to the four buttons above it */
.buy__swap{ display:block; margin:10px auto 0; font-size:12.5px; }

/* The phone's buy bar. .buy is sticky only on a wide screen, so without this
   "Add to cart" scrolls away on a phone and never comes back. */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center;
  background:var(--paper); border-top:1px solid var(--line);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(18,17,16,.07);
}
.mbar__img{ width:44px; height:44px; object-fit:cover; background:var(--paper-2); }
.mbar__b{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mbar__b b{ font-size:15px; font-weight:500; }
.mbar__b span{ font-size:11.5px; color:var(--muted); }
.mbar .btn{ padding:12px 18px; }
@media (min-width:1000px){ .mbar{ display:none; } }
/* Paying: the total and the way forward are pinned to the bottom of the
   screen, so neither is ever a scroll away. */
.mbar--pay{ grid-template-columns:1fr auto; }
.mbar--pay b{ font-family:var(--f-display); font-size:21px; font-weight:400; }
@media (min-width:900px){ .mbar--pay{ display:none; } }
/* and the panel it duplicates keeps itself short enough to sit on one screen */
.summary{ max-height:calc(100dvh - var(--nav-h) - 40px); overflow-y:auto; }
.summary .btn{ position:sticky; bottom:0; }

/* =========================================================
   THE HOMEPAGE
   A hero you can click into, then rails, a magazine, the craft,
   and the proof — in that order.
   ========================================================= */

/* ---- hero: one room, the pieces in it marked ---- */
/* The photograph is 2.2:1 and cover crops the sides, so a taller box pushes
   the vase on the shelf off the right edge — and the vase is one of the two
   things marked. Height is capped to keep it in frame. */
.hero{ position:relative; min-height:min(64vh,560px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
@media (min-width:1800px){ .hero{ min-height:min(64vh,700px); } }
.hero__media{ position:absolute; inset:0; }
/* One slide at a time. Hidden rather than merely transparent, so an off-slide's
   mark leaves the tab order and the accessibility tree. */
.hslide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility 0s linear .9s; }
.hslide.on{ opacity:1; visibility:visible; transition:opacity .9s var(--ease), visibility 0s; }
.hero__media > .hslide > img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,rgba(8,7,6,.66) 0%,rgba(8,7,6,.36) 32%,rgba(8,7,6,0) 58%),
    linear-gradient(180deg,rgba(8,7,6,.3) 0%,rgba(8,7,6,0) 28%,rgba(8,7,6,.1) 56%,rgba(8,7,6,.62) 100%);
}
.hero__in{ position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--gut) clamp(36px,5vw,72px); color:#F8F5F0; }
.hero__title{ max-width:14ch; }
.hero__sub{ margin-top:16px; max-width:38ch; font-size:clamp(15.5px,1.5vw,19px); color:rgba(248,245,240,.92); }
.hero__cta{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.hero__proof{ margin-top:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:rgba(248,245,240,.8); }
.hero__proof .stars__glyphs{ color:rgba(248,245,240,.4); }
.hero__proof .stars__fill{ color:#F8F5F0; }
.hdots{ margin-top:22px; display:flex; gap:9px; }
.hdot{ width:28px; height:3px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:rgba(248,245,240,.34); transition:background .3s var(--ease); }
.hdot.is-on{ background:#F8F5F0; }
.hdot:hover{ background:rgba(248,245,240,.7); }
@media (prefers-reduced-motion:reduce){ .hslide{ transition:none; } }

/* the mark on the piece itself, and the card it opens */
.hspot{
  position:absolute; z-index:4; width:36px; height:36px; margin:-18px 0 0 -18px; padding:0;
  border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(251,250,248,.94); color:var(--ink); font-size:19px; line-height:1;
  box-shadow:0 2px 14px rgba(8,7,6,.34);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.hspot[hidden]{ display:none; }
.hspot::before{ content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(251,250,248,.5); animation:hpulse 2.6s var(--ease) infinite; }
@keyframes hpulse{ 0%{ transform:scale(.86); opacity:.9 } 70%{ transform:scale(1.22); opacity:0 } 100%{ opacity:0 } }
.hspot:hover,.hspot[aria-expanded="true"]{ transform:scale(1.12); background:#fff; }
.hspot[aria-expanded="true"]::before{ animation:none; opacity:0; }

.hcard{
  position:absolute; z-index:5; width:min(236px,calc(100vw - 32px)); display:flex; gap:11px; align-items:center;
  background:var(--paper); border-radius:var(--r); padding:10px; text-align:left;
  box-shadow:0 8px 34px rgba(8,7,6,.3);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.hcard.on{ opacity:1; transform:none; pointer-events:auto; }
.hcard img{ width:56px; height:56px; flex:none; object-fit:cover; background:var(--paper-2); }
.hcard__b{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.hcard__c{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.hcard__n{ font-family:var(--f-display); font-size:16px; line-height:1.15; color:var(--ink); }
.hcard__p{ font-size:12.5px; color:var(--ink-2); }
.hcard__go{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:3px; }
@media (prefers-reduced-motion:reduce){
  .hspot::before{ animation:none; }
  .hcard{ transition:none; }
}

/* ---- the rail: one horizontal scroller, used three times ---- */
.rail{ position:relative; }
.rail__t{
  display:flex; flex-wrap:nowrap; gap:clamp(12px,1.6vw,22px);
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory;
  scroll-padding-inline:0; padding-bottom:4px;
}
.rail__t::-webkit-scrollbar{ display:none; }
/* Each item is its own containing block. Without this an absolutely
   positioned descendant with no positioned parent of its own — the
   screen-reader line inside a star rating is one — resolves against .rail
   instead, escapes the scroller, and stretches the whole PAGE sideways by the
   length of the rail. */
.rail__t > *{ flex:0 0 var(--w,78%); scroll-snap-align:start; min-width:0; position:relative; }
@media (min-width:620px){ .rail__t > *{ flex-basis:calc((100% - 1 * clamp(12px,1.6vw,22px)) / 2); } }
@media (min-width:920px){ .rail__t > *{ flex-basis:calc((100% - 2 * clamp(12px,1.6vw,22px)) / 3); } }
@media (min-width:1180px){ .rail__t > *{ flex-basis:calc((100% - 3 * clamp(12px,1.6vw,22px)) / 4); } }
.rail__nav{ display:flex; gap:8px; }
.rail__b{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--white); color:var(--ink); cursor:pointer; font-size:15px; line-height:1;
  display:grid; place-items:center; transition:.2s var(--ease);
}
.rail__b:hover:not([disabled]){ border-color:var(--ink); }
.rail__b[disabled]{ opacity:.3; cursor:default; }
.rail__nav[hidden]{ display:none; }

/* ---- magazine ---- */

/* ---- behind the scenes ---- */

/* ---- as seen in ---- */

/* ---- my art work: image, name, price. Nothing else on the card. ---- */
.railhead{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:clamp(16px,2vw,24px); }
.railhead__t{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; }
.railhead__t::after{ content:"→"; transition:transform .3s var(--ease); }
.railhead__t:hover::after{ transform:translateX(4px); }
.vcard{ display:block; }
/* The visitor's own piece, large, as the product page made it, with the
   photograph it came from small in the corner. The stored thumbnail sits
   underneath as the fallback until — or if — the fresh render arrives. */
.vcard__m{ position:relative; display:block; overflow:hidden; border-radius:8px;
  background:var(--paper-2); aspect-ratio:1; }
.vcard__m img,.vcard__m canvas{ width:100%; height:100%; display:block;
  transition:transform 1s var(--slow); }
.vcard__m .vcard__flat{ object-fit:contain; }
.vcard__m canvas{ position:absolute; inset:0; object-fit:contain; padding:8%;
  background:var(--paper-2); opacity:0; transition:opacity .5s var(--ease); }
.vcard__m canvas[data-ok]{ opacity:1; }
.vcard:hover .vcard__flat,.vcard:hover .vcard__m canvas{ transform:scale(1.04); }
.vcard__m .pcard__from{ width:22%; left:8px; bottom:8px; }
.vcard__m .pcard__from img{ height:auto; }
.vcard__n{ display:block; margin-top:11px; font-size:14px; color:var(--ink-2); }
.vcard__p{ display:block; margin-top:3px; font-size:14px; font-weight:500; }


/* =========================================================
   PETROL — the elevated theme
   Bright and light like a marketplace, a step more composed: one deep
   petrol for everything you can press, stone grounds, soft corners, black
   for stars and badges, and the serif for every headline.
   ========================================================= */

/* ---- buttons: petrol pills ---- */
.btn{ border-radius:999px; background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:hover{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; }
.btn--ghost,.btn--line{ background:var(--white); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover,.btn--line:hover{ background:var(--white); color:var(--ink); border-color:var(--ink); }
.btn--light{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--light:hover{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--ink); }
.xpay__btn{ border-radius:999px; }
.link-a{ color:var(--accent-d); border-color:color-mix(in srgb, var(--accent) 35%, transparent); font-weight:500; }
.link-a:hover{ border-color:var(--accent-d); }
.chip{ border-radius:999px; }
.chip.is-on{ background:var(--ink); border-color:var(--ink); }
.select,.field input,.field select,.field textarea,.news__f input,.promo input{ border-radius:var(--r); }

/* ---- header and the bar above it ---- */
.pbar{ background:var(--ink); color:#F4F1EC; }
.pbar i{ border-color:rgba(244,241,236,.5); }
.nav__mark{ width:14px; height:14px; background:var(--accent); }
.nav__links > a::after,.nav__item > a::after{ background:var(--accent); height:2px; bottom:0; }
.nav__links > a.is-on,.nav__item > a.is-on{ color:var(--ink); }
.pill{ background:var(--accent); color:#fff; }
.pill.is-zero{ background:var(--paper-3); color:var(--ink-2); }

/* ---- stars and badges: black, quiet ---- */
.stars__fill{ color:var(--ink); }
.badge{ border-radius:999px; padding:4px 10px; letter-spacing:.06em; background:var(--white); border-color:var(--line-2); }
.badge--solid{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---- tiles: soft corners ---- */
.pcard__media,.ex__media,.gal2__main,.rtile__media,.filmstrip__i img,.made__i img,.states__m > img,
.ba__box,.mat__media img,.wcard__media,.fill,.col-row__media,.cband,.line__img,.mdrop__pic,
.rcard,.rev-score,.summary,.film__frame,.yp__bar,.opt,.ship__o,.ship__opt,.reassure,.handoff__box,.rev-note{ border-radius:var(--r-lg); }
.ex__media{ border:0; }
.gal2__thumbs button{ border-radius:var(--r); border-width:2px; }
.gal2__thumbs button.is-on{ border-color:var(--accent); }
.gal2__mine{ background:var(--accent); border-radius:999px; }
.pcard__from img,.ex__src{ border-radius:8px; }
.pcard__n,.ex__srclabel,.gal__tag,.ba__tag{ border-radius:999px; }

/* ---- the product card: heart, rating, price and the way in ---- */
.pcard__body{ gap:5px; }
.pcard__name{ font-size:21px; }
.pcard__foot{ align-items:center; }
.pcard__go{ border:0; padding:0; color:var(--accent-d); font-weight:500; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.pcard__go.link-arrow::after{ content:none; }
.heart{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; border-radius:50%;
  border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; transition:transform .2s var(--ease); }
.heart:hover{ transform:scale(1.08); }
.heart svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.heart.is-on{ color:var(--accent); }
.heart.is-on svg{ fill:var(--accent); }

/* ---- the homepage hero: words on stone, the picture beside them ---- */
.hero{ display:grid; grid-template-columns:1fr; align-items:stretch; min-height:0;
  width:min(calc(100% - 2 * var(--gut)), calc(var(--max) - 2 * var(--gut)));
  margin:clamp(12px,1.6vw,22px) auto 0; border-radius:var(--r-lg); background:var(--paper-2); }
.hero__media{ position:relative; inset:auto; min-height:280px; }
.hero__media::after{ content:none; }
.hero__in{ max-width:none; margin:0; color:var(--ink); padding:clamp(26px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center; }
.hero__title{ max-width:12ch; }
.hero__sub{ color:var(--ink-2); max-width:30ch; }
.hero__proof{ color:var(--muted); }
.hero__proof .stars__glyphs{ color:var(--line-2); }
.hero__proof .stars__fill{ color:var(--ink); }
.hdot{ background:var(--line-2); }
.hdot.is-on{ background:var(--accent); }
.hdot:hover{ background:var(--muted-2); }
.hcard{ border-radius:var(--r-lg); }
.hcard img{ border-radius:8px; }
.hcard__go{ color:var(--accent-d); }
@media (min-width:860px){
  .hero{ grid-template-columns:.9fr 1.1fr; min-height:min(60vh,520px); }
  .hero__media{ order:2; }
}

/* ---- the collections: three or four, given room ---- */
.cgrid{ display:grid; gap:clamp(14px,1.8vw,26px); grid-template-columns:1fr; }
@media (min-width:700px){ .cgrid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } }
.ccard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--white); }
.ccard__media{ position:relative; display:block; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.ccard__media canvas{ width:100%; height:100%; object-fit:contain; display:block; padding:6% 10%;
  transition:transform 1s var(--slow); }
.ccard:hover .ccard__media canvas{ transform:scale(1.03); }
.ccard__n{ position:absolute; left:12px; top:12px; z-index:2; background:var(--white); border-radius:999px;
  padding:3px 11px; font-size:11.5px; font-weight:600; letter-spacing:.06em; }
.ccard__b{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 18px; }
.ccard__b > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ccard__name{ font-family:var(--f-display); font-size:clamp(22px,2vw,27px); line-height:1.1; }
.ccard__meta{ font-size:13px; color:var(--muted); }
@media (max-width:699px){
  .ccard{ display:grid; grid-template-columns:128px 1fr; }
  .ccard__media{ aspect-ratio:1; }
  .ccard__b{ flex-direction:column; align-items:flex-start; padding:12px 14px; }
}

/* ---- rooms: round pictures ---- */
.rtile{ text-align:center; }
.rtile__media{ aspect-ratio:1; border-radius:50%; width:78%; margin:0 auto;
  box-shadow:0 0 0 5px var(--paper), 0 0 0 6px var(--line); }
.rtile__d{ margin-inline:auto; }
.rtile__go{ color:var(--accent-d); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---- panels: a soft ground for a section that wants to stand apart ---- */
.panel{ background:var(--paper-2); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px); }
.panel .pcard__media,.panel .pcard__media canvas{ background:var(--white); }
.panel .gfact{ background:var(--white); border:0; border-radius:var(--r); padding:14px 16px; }
.panel .grid--n{ gap:clamp(14px,1.6vw,22px); }
.panel .xform-step__t{ color:var(--ink); }
.gfact svg{ stroke:var(--accent); }

/* ---- four steps: cards, on the light page ---- */
.xform-step{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--white); }
.xform-step__frame{ background:var(--paper-2); border-radius:0; }
.xform-step__head{ margin:0; padding:14px 16px 0; align-items:center; }
.xform-step__n{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:var(--f-sans); font-size:11.5px; font-weight:600; letter-spacing:0; }
.xform-step__t{ margin:0; font-weight:500; color:var(--ink); }
.xform-step__d{ margin:0; padding:6px 16px 16px 55px; color:var(--muted); }
.dark .xform-step__n{ background:transparent; color:var(--accent-soft); width:auto; height:auto; }

/* ---- collection page ---- */
.chero{ width:min(calc(100% - 2 * var(--gut)), calc(var(--max) - 2 * var(--gut)));
  margin:0 auto; border-radius:var(--r-lg); display:grid; grid-template-columns:1fr; min-height:0;
  background:var(--paper-2); align-items:stretch; }
.chero__media{ position:relative; inset:auto; min-height:220px; }
.chero__media::after{ content:none; }
.chero__in{ color:var(--ink); padding:clamp(24px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.chero__num{ color:var(--accent-d); font-family:var(--f-sans); font-size:11.5px; font-weight:500; }
.chero__sub{ color:var(--ink-2); }
@media (min-width:860px){
  .chero{ grid-template-columns:1fr 1.2fr; min-height:min(40vh,340px); }
  .chero__media{ order:2; }
}
.ctabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.idea__item{ border:0; background:var(--paper-2); border-radius:var(--r); padding:14px 16px; }
.numeral{ color:var(--accent); }
.cpager__all{ border-radius:999px; }

/* ---- product page ---- */
.opt{ border-radius:var(--r); }
.opt.is-on{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.opt:hover{ border-color:var(--accent); }
.qty{ border-radius:999px; }
.qty button:hover{ color:var(--accent); }
.assure__date{ border:0; background:var(--paper-2); border-radius:var(--r); padding:12px 14px; }
.buy__cta .btn--line.is-on svg{ fill:var(--accent); stroke:var(--accent); }

/* ---- reviews ---- */
.rsum{ border:0; background:var(--paper-2); border-radius:var(--r-lg); padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px); }
.rcard--plain{ background:var(--white); }
.rev-bar__t{ border-radius:9px; }

/* ---- newsletter: a dark closing band ---- */
.news{ max-width:none; text-align:left; background:var(--ink); color:#F4F1EC; border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px) clamp(22px,3.4vw,44px); display:grid; gap:10px 30px; align-items:center; }
.news h2{ color:#F4F1EC; }
.news .small{ color:rgba(244,241,236,.66); margin-top:4px; }
.news__f{ margin:0; justify-content:flex-start; }
.news__f input{ max-width:none; border:0; border-radius:999px; padding:12px 18px; }
@media (min-width:860px){
  .news{ grid-template-columns:1fr minmax(320px,420px); }
  .news__f{ grid-row:1 / span 2; grid-column:2; }
}

/* ---- footer: light, like the page ---- */
.foot{ background:var(--paper-2); color:var(--ink-2); }
.foot__word{ color:var(--ink); }
.foot__tag{ color:var(--muted); }
.foot__cols h4{ color:var(--muted); }
.foot__cols a{ color:var(--ink-2); }
.foot__cols a:hover{ color:var(--accent-d); }
.foot__legal{ color:var(--muted); border-color:var(--line); }

/* ---- the phone's tab bar ---- */
.tabbar{ display:none; }
@media (max-width:939px){
  .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:140;
    background:color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; }
  .tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10.5px; color:var(--muted); padding:4px 0; }
  .tabbar a.is-on{ color:var(--accent); }
  .tabbar svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4;
    stroke-linecap:round; stroke-linejoin:round; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  /* the product page's buy bar sits above the tabs, and paying hides them */
  .mbar{ bottom:calc(58px + env(safe-area-inset-bottom)); }
  body.is-paying .tabbar{ display:none; }
  body.is-paying .mbar{ bottom:0; }
}
@media (max-width:939px){ .toast{ bottom:calc(80px + env(safe-area-inset-bottom)); } }
/* the bars are spans; a width on an inline box does nothing */
.rev-bar__t,.rev-bar__f{ display:block; }
@media (max-width:939px){ .nav__cta{ display:none; } }

/* ---- the hero: the film and the words in one card, Tedooo-style ----
   The film is portrait (720 × 1024) and is shown at its own shape, never
   cropped into a banner. On a phone the card is stacked — film on top, the
   words on a soft panel under it. On a wide screen the same card is laid on
   its side: the words on the left, the film on the right at full height. */
.hero{ position:relative; display:flex; flex-direction:column; min-height:0; height:auto;
  overflow:hidden; background:var(--hero-panel); }
/* warm peach, sampled from Tedooo's own hero panel */
:root{ --hero-panel:linear-gradient(135deg,#FFEAB6 0%,#FFE3B1 55%,#F3D3A5 100%); }
.hero__media{ position:relative; display:block; padding:0; background:var(--ink); overflow:hidden; }
.hero__film{ position:relative; width:100%; aspect-ratio:720/1024; overflow:hidden; background:var(--ink); }
.hero__film video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__in{ position:relative; padding:clamp(26px,4vw,72px); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center; }
.hero__title{ color:var(--ink); max-width:11ch; }
.hero__sub{ color:var(--ink-2); max-width:32ch; }
/* the one dark control on the page, with the arrow Tedooo gives it */
.hero .btn{ background:var(--ink); border-color:var(--ink); color:#fff; gap:12px; }
.hero .btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero .btn::after{ content:"→"; font-size:1.1em; line-height:1; transition:transform .25s var(--ease); }
.hero .btn:hover::after{ transform:translateX(3px); }

@media (min-width:860px){
  .hero{ flex-direction:row; height:clamp(520px,calc(100dvh - 190px),700px); }
  .hero__media{ order:2; height:100%; flex:none; }
  .hero__film{ height:100%; width:auto; }
  .hero__in{ flex:1; min-width:0; }
}
@media (max-width:859px){
  /* On a phone the words come first, then the whole film as a portrait card
     on the peach panel, the way Tedooo does it. The film is sized so the
     button and the top of the film share the first screen, and it is never
     cropped: the phone in the footage is shown whole. */
  .hero{ padding-bottom:20px; }
  .hero__in{ order:1; padding:26px 22px 18px; }
  .hero__title{ max-width:none; font-size:clamp(36px,10vw,46px); line-height:1.02; }
  .hero__sub{ margin-top:10px; font-size:15.5px; }
  .hero__cta{ margin-top:16px; }
  .hero .btn{ padding:13px 24px; font-size:15px; }
  .hero__media{ order:2; background:none; padding:0 22px; display:flex; justify-content:center; }
  .hero__film{ width:auto; max-width:100%; height:clamp(340px,calc(100dvh - 430px),560px); aspect-ratio:720/1024;
    border-radius:18px; box-shadow:0 18px 40px -18px rgba(60,40,10,.45); }
}

/* One collection on its own is a feature, not a stretched card: the picture
   on the left, the words beside it. With two or more it is a grid again. */
.ccard__line{ display:none; }
@media (min-width:860px){
  .cgrid:has(> .ccard:only-child){ grid-template-columns:1fr; }
  .ccard:only-child{ display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch; }
  .ccard:only-child .ccard__media{ aspect-ratio:auto; height:clamp(340px,32vw,440px); }
  .ccard:only-child .ccard__b{ flex-direction:column; align-items:flex-start; justify-content:center; gap:18px;
    padding:clamp(28px,3.4vw,52px); }
  .ccard:only-child .ccard__name{ font-size:clamp(34px,3.4vw,48px); }
  .ccard:only-child .ccard__line{ display:block; font-size:16px; color:var(--ink-2); margin-top:6px; max-width:32ch; }
  .ccard:only-child .btn{ padding:13px 26px; font-size:14.5px; }
}

/* Lenticular: where you stand decides the picture */
.gal2__views{ display:flex; gap:6px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.gal2__views button{ font:inherit; font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--card, #fff); color:var(--ink); cursor:pointer; }
.gal2__views button.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* several films: a grid of 16:9 frames rather than one letterbox */
.films--grid{ display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:1fr; }
@media (min-width:760px){ .films--grid{ grid-template-columns:repeat(2,1fr); } }
.films--grid .film__frame{ aspect-ratio:16/9; max-height:none; }

/* photographs of the real pieces, in the cards that otherwise hold a live preview */
.ccard__media--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--slow); }
.ccard:hover .ccard__media--photo img{ transform:scale(1.03); }
.ex__media--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ex__media--photo::after{ content:none; }

/* ---- product page, Tedooo-style ----
   Everything about the piece runs down the left under the pictures; the
   right is one compact card that stays in view the whole way down. */
.pdp__main{ min-width:0; }
.pdp__more{ margin-top:clamp(28px,3.6vw,44px); display:grid; gap:clamp(30px,3.6vw,46px); }
.pdp__more .pinfo__h{ font-family:var(--f-body); font-size:19px; font-weight:600; letter-spacing:-.01em; margin-bottom:14px; }
.pdp__more .lead{ font-size:15px; }
.pdp__more .rev-top{ grid-template-columns:1fr; }
@media (min-width:820px){ .pdp__more .rev-top{ grid-template-columns:240px 1fr; } }
.pdp__side{ display:grid; gap:14px; align-content:start; }
@media (min-width:1000px){
  .pdp{ grid-template-columns:minmax(0,1.45fr) minmax(330px,.62fr); }
  .pdp__side{ position:sticky; top:calc(var(--nav-h) + 16px); }
  .pdp__side .buy{ position:static; }
}
.buy--card{ background:var(--white, #fff); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 20px 18px; box-shadow:0 10px 30px -18px rgba(20,16,10,.25); }
.buy--card .buy__price{ margin-top:0; }
.buy--card .buy__price b{ font-family:var(--f-body); font-weight:600; font-size:24px; letter-spacing:-.01em; color:var(--accent); }
.buy--card .buy__rating{ margin-top:6px; font-size:12.5px; }
.buy--card .buy__title{ font-family:var(--f-body); font-size:21px; font-weight:600; letter-spacing:-.015em; line-height:1.2; margin-top:12px; }
.buy__ship{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 9px; border-radius:6px;
  background:var(--paper-2); font-size:12px; color:var(--ink-2); width:max-content; max-width:100%; }
.buy__ship svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; flex:none; }
.buy__fields{ display:grid; gap:10px; margin-top:16px; }
.fld{ position:relative; display:block; border:1px solid var(--line-2, #ccc); border-radius:10px; padding:7px 12px 6px; background:#fff; }
.fld:focus-within{ border-color:var(--ink); }
.fld__l{ display:block; font-size:11px; color:var(--muted); line-height:1.2; }
.fld select, .fld input{ width:100%; border:0; outline:0; background:none; padding:2px 0 1px; font:inherit; font-size:14.5px; color:var(--ink);
  appearance:none; -webkit-appearance:none; }
.fld select{ padding-right:22px; cursor:pointer; }
.fld:has(select)::after{ content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; margin-top:-5px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); pointer-events:none; }
.buy--card .buy__cta{ margin-top:16px; gap:10px; }
.buy__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.buy--card .btn{ min-height:46px; padding:11px 14px; font-size:14.5px; border-radius:10px; }
.buy--card .btn--ghost{ background:#fff; border:1px solid var(--ink); color:var(--ink); }
.buy--card .btn--ghost:hover{ background:var(--paper-2); }
.xpay1{ gap:4px; }
.xpay1 .xpay__mark{ margin-left:2px; }
.buy__fav{ gap:8px; }
.buy__fav svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.5; }
.buy__fav.is-on svg{ fill:var(--accent); stroke:var(--accent); }
.buy__note{ display:block; margin-top:12px; font-size:12px; color:var(--muted); text-align:center; }
.buy__note .link-a{ font-size:12px; }
.buy__pays{ display:grid; justify-items:center; gap:6px; }
.buy__pays .pay{ justify-content:center; margin:0; }
/* the pictures scroll with the details under them; only the buy card stays */
.pdp__main .gal2{ position:static; top:auto; }
.pdp__more .pinfo__h{ text-transform:none; color:var(--ink); }
/* one column on a phone: the pictures, then the card, then everything else */
@media (max-width:999px){
  .pdp__main{ display:contents; }
  .pdp__main > .gal2{ order:1; }
  .pdp__side{ order:2; }
  .pdp__more{ order:3; margin-top:0; }
}
/* the checkout's order box, in the same card as the product page's */
.summary{ border-radius:var(--r-lg); box-shadow:0 10px 30px -18px rgba(20,16,10,.25); }
.summary h3{ font-family:var(--f-body); font-size:19px; font-weight:600; letter-spacing:-.01em; }
/* the photograph's corner inset sits over the picture, not under it */
.ex__media--photo .ex__src{ position:absolute; inset:auto auto 9px 9px; width:56px; height:56px; z-index:2; }
/* Paying is a corridor: no promotions bar, no footer menu, nothing to wander
   off through. The logo stays, and the legal line under the page. */
body.is-paying .pbar{ display:none; }
body.is-paying .foot__in{ display:none; }
body.is-paying .tabbar{ display:none; }
.pdp__desc{ font-size:15px; line-height:1.55; color:var(--ink-2); max-width:62ch; }
.pdp__moreinfo{ margin-top:12px; }
.pdp__moreinfo summary{ cursor:pointer; font-size:14px; font-weight:500; color:var(--ink); list-style:none; display:inline-flex; gap:8px; align-items:center; }
.pdp__moreinfo summary::-webkit-details-marker{ display:none; }
.pdp__moreinfo summary::after{ content:"+"; font-size:16px; color:var(--muted); }
.pdp__moreinfo[open] summary::after{ content:"−"; }
.pdp__moreinfo[open] > .pdp__desc{ margin-top:12px; }
.pdp__moreinfo .spec{ margin-top:14px; }
.pdp__moreinfo .spec__r{ padding-block:10px; }
.pdp__moreinfo .spec dt, .pdp__moreinfo .spec dd{ font-size:13.5px; }
.pdp__more{ gap:clamp(24px,3vw,36px); }

/* ---- type and rhythm ----
   Instrument Serif is a display face: one weight, narrow, beautiful large
   and spindly small. It carries the headlines (about 24px and up) and the
   wordmark; everything smaller — names, prices, labels, step numbers — is
   Inter, so a piece's name reads the same on a card as on its own page. */
.pcard__name,.wcard__name,.hcard__n,.line__name,.rev__title,.rcard__t,.reassure__q,
.search__row b,.rtile__t,.cpager__nm,.fill__t,.step h2,.summary h3,.form-block h3,
.mdrop__list a > span,.mdrop__fig figcaption b,.make__t,.mbar--pay b,
.summary__row--total b,.rsum__facts b{
  font-family:var(--f-sans); font-weight:600; letter-spacing:-.012em; }
.pcard__name,.wcard__name,.line__name{ font-size:16px; line-height:1.25; }
.hcard__n,.rcard__t{ font-size:15px; }
.rev__title,.reassure__q,.search__row b{ font-size:16px; line-height:1.3; }
.rtile__t,.cpager__nm{ font-size:17px; line-height:1.2; }
.fill__t{ font-size:18px; }
.step h2,.summary h3{ font-size:18px; }
.form-block h3{ font-size:19px; }
.mdrop__list a > span,.mdrop__fig figcaption b{ font-size:15px; font-weight:500; }
.make__t{ font-weight:500; font-size:clamp(16px,1.8vw,19px); }
.mbar--pay b,.summary__row--total b{ font-size:19px; }
.rsum__facts b{ font-size:clamp(17px,1.6vw,20px); }
.numeral,.pillar__n,.xform-step__n,.step__n,.chero__num{
  font-family:var(--f-sans); font-weight:600; font-size:12px; letter-spacing:.08em; }
/* the small caps line over each section was 10.5px — under reading size */
.eyebrow{ font-size:12px; letter-spacing:.12em; }

/* One rhythm between sections, everywhere: about 112px on a wide screen,
   64px on a phone, and the same step from a section's title to its content. */
.sec,.sec--tight{ padding-block:clamp(32px,4vw,56px); }
.sec-head{ margin-bottom:clamp(20px,2.4vw,32px); }

/* the bar above the menu: the full line on a wide screen, the short one on a phone */
.pbar__short{ display:none; }
@media (max-width:620px){
  .pbar__long{ display:none; }
  .pbar__short{ display:inline; white-space:nowrap; }
  .pbar{ padding-block:8px; }
}
/* the collection a piece belongs to, under its name on every card */
.pcard__coll{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.pcard__coll:hover{ color:var(--accent); }
.buy__coll{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--muted); }
.buy__coll:hover{ color:var(--accent); }
.buy--card .buy__coll + .buy__title{ margin-top:2px; }

/* four materials: two across on a phone */
@media (max-width:719px){ .filmstrip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* "What you can change": the heading and the button on the left, the choices
   listed on the right with what each one offers */
.edit2{ display:grid; gap:clamp(24px,4vw,64px); align-items:start; }
@media (min-width:900px){ .edit2{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } }
.edit2__list{ list-style:none; margin:0; padding:0; display:grid; }
.edit2__list li{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:4px; align-items:center;
  padding:16px 0; border-top:1px solid rgba(0,0,0,.08); }
.edit2__list li:last-child{ border-bottom:1px solid rgba(0,0,0,.08); }
.edit2__list .xform-step__n{ grid-row:span 2; }
.edit2__t{ font-weight:500; font-size:16px; }
.edit2__d{ font-size:14px; color:var(--muted); grid-column:2; }

/* The studio band: dark, the film large on the left, the materials beside it */
.studio{ background:#14302F; color:#EDE7DF; padding-block:clamp(48px,7vw,96px); margin-block:clamp(24px,4vw,48px); }
.studio__head{ display:grid; gap:16px; align-items:end; margin-bottom:clamp(24px,3.4vw,40px); }
@media (min-width:900px){ .studio__head{ grid-template-columns:1.2fr 1fr; } }
.studio__eyebrow{ color:#E9A88B; }
.studio__h{ margin-top:10px; max-width:16ch; color:#F6F1EA; }
.studio__lead{ color:rgba(237,231,223,.78); font-size:16px; line-height:1.6; max-width:42ch; }
.studio__grid{ display:grid; gap:clamp(14px,2vw,24px); }
@media (min-width:900px){ .studio__grid{ grid-template-columns:1.25fr 1fr; align-items:stretch; } }
.studio__film .film{ margin:0; height:100%; display:flex; flex-direction:column; }
.studio__film .film__frame{ aspect-ratio:16/10; max-height:none; border-radius:var(--r-lg, 18px); flex:1; }
.studio__film .film__cap{ color:rgba(237,231,223,.6); }
.studio__mats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.studio__m{ margin:0; }
.studio__img{ display:block; overflow:hidden; border-radius:14px; }
.studio__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.studio__m:hover .studio__img img{ transform:scale(1.06); }
.studio__m figcaption{ margin-top:10px; font-size:13.5px; line-height:1.45; color:rgba(237,231,223,.82); }
.studio__n{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#E9A88B; margin-bottom:4px; }
.studio__cta{ margin-top:clamp(24px,3vw,36px); }
.studio__btn{ background:#F6F1EA; color:#14302F; }

/* The product page: no menu, banner or tab bar to wander off through, as at
   checkout; the footer stays, as a product page should carry it. */
body.is-buying .pbar{ display:none; }
@media (max-width:939px){
  body.is-buying .tabbar{ display:none; }
  body.is-buying .mbar{ bottom:0; }
}

/* The logo: the sphere, and the name in capitals, spaced a little so the
   capitals read as a mark */
.nav .nav__mark{ width:34px; height:34px; border-radius:0; background:none; box-shadow:none; transform:none; object-fit:contain; }
.nav__word{ font-family:'Bebas Neue', var(--f-sans); font-weight:400; letter-spacing:.08em; font-size:28px; line-height:1; padding-top:3px; }
@media (min-width:940px){ .nav__word{ font-size:32px; } }
.nav__brand{ gap:11px; }
.foot__word{ display:flex; align-items:center; gap:14px; font-family:'Bebas Neue', var(--f-sans); font-weight:400; letter-spacing:.08em; font-size:38px; line-height:1; padding-top:4px; }
.foot__mark{ width:40px; height:40px; object-fit:contain; }

/* ---- the hero slideshow: three photographed pieces in turn ----
   Wide screens: the words on the peach panel, the picture beside them at 5:4,
   full height. Phones: the words, then the picture as a rounded 4:3 card. */
.hshow{ position:relative; height:100%; aspect-ratio:5/4; overflow:hidden; background:var(--paper-2); }
.hshow .hslide{ position:absolute; inset:0; }
.hslide__img{ width:100%; height:100%; object-fit:cover; display:block; }
.hslide__from{ position:absolute; left:18px; bottom:18px; z-index:3; width:86px; height:86px; border-radius:12px;
  border:3px solid #fff; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:opacity .2s var(--ease); }
.hslide__from img{ width:100%; height:100%; object-fit:cover; display:block; }
.hslide__lbl{ position:absolute; left:18px; bottom:112px; z-index:3; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:20px;
  transition:opacity .2s var(--ease); }
.hshow .hcard{ width:236px; }
.hero .hdots{ margin-top:24px; }
.hero .hdot{ background:rgba(20,20,20,.18); }
.hero .hdot.is-on{ background:var(--ink); }
.hero .hdot:hover{ background:rgba(20,20,20,.5); }
@media (max-width:859px){
  .hero__media{ background:none; }
  .hshow{ height:auto; width:100%; aspect-ratio:4/3; border-radius:18px; box-shadow:0 18px 40px -18px rgba(60,40,10,.45); }
  .hslide__from{ width:62px; height:62px; left:12px; bottom:12px; border-radius:10px; }
  .hslide__lbl{ left:12px; bottom:82px; }
  /* on a phone the card sits along the bottom of the picture, and the small
     photo it would cover steps aside while it is open */
  .hshow .hcard{ left:auto !important; right:12px !important; top:auto !important; bottom:12px; width:auto; max-width:calc(100% - 24px); }
  .hslide.is-open .hslide__from, .hslide.is-open .hslide__lbl{ opacity:0; }
}

/* placing an order: a calm full-screen moment while the files go up */
.placing{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(250,248,244,.94); backdrop-filter:blur(6px); }
.placing__in{ max-width:420px; text-align:center; }
.placing__t{ margin:10px 0 16px; color:var(--ink-2); min-height:1.5em; }
.placing__bar{ height:6px; border-radius:6px; background:var(--paper-2); overflow:hidden; margin-bottom:14px; }
.placing__bar span{ display:block; height:100%; background:var(--accent, #0F7C80); transition:width .4s var(--ease); }
.placing__spin{ width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  border:3px solid var(--paper-2); border-top-color:var(--ink); animation:placing-spin 1s linear infinite; }
@keyframes placing-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .placing__spin{ animation:none; } }

.testpay{ margin-bottom:18px; padding:12px 14px; border-radius:10px; background:#FFF4D6; border:1px solid #F0D48A; font-size:14px; line-height:1.5; }

/* ---------- after the order: progress, actions, my orders ---------- */
.ostep{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:26px 0 8px; padding:0; position:relative; }
.ostep::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:15px; height:2px; background:var(--line); }
.ostep__s{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ostep__dot{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--line); font-size:13px; color:var(--muted); }
.ostep__s.is-done .ostep__dot{ background:var(--ink); border-color:var(--ink); color:#fff; }
.ostep__s.is-now .ostep__dot{ box-shadow:0 0 0 5px rgba(15,124,128,.18); background:var(--accent,#0F7C80); border-color:var(--accent,#0F7C80); }
.ostep__l{ font-size:13px; font-weight:500; }
.ostep__d{ font-size:12px; color:var(--muted); min-height:1.2em; }
.otrack{ margin:6px 0 4px; font-size:14px; }
.oacts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.ocancel{ margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:12px; text-align:left; background:var(--paper); }
.olist{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.olist__r{ display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border-top:1px solid var(--line); }
.olist__r:first-child{ border-top:0; }
.olist__r:hover{ background:var(--paper-2); }
.olist__r > span:last-child{ text-align:right; white-space:nowrap; display:flex; flex-direction:column; }
.olist__go{ font-size:12px; color:var(--accent,#0F7C80); margin-top:4px; }
@media (max-width:560px){ .ostep__l{ font-size:11.5px; } .ostep__dot{ width:28px; height:28px; } .ostep::before{ top:13px; } }

/* ---------- the studio page ---------- */
.stabs{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 18px; }
.stabs__t{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); font-size:13px; }
.stabs__t.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.desk{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.desk__list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.desk__detail{ border:1px solid var(--line); border-radius:12px; padding:18px; position:sticky; top:90px; background:var(--paper); }
.srow{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border:0; border-top:1px solid var(--line); background:none; text-align:left; font:inherit; cursor:pointer; }
.srow:first-child{ border-top:0; }
.srow:hover,.srow.is-on{ background:var(--paper-2); }
.srow.is-new{ box-shadow:inset 3px 0 0 var(--accent,#0F7C80); }
.stag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; background:var(--paper-2); color:var(--ink-2); vertical-align:middle; }
.stag--paid{ background:#E3F2F1; color:#0F6B6E; } .stag--in_production{ background:#FFF1D6; color:#8A5A00; }
.stag--shipped{ background:#E5EDFB; color:#2B4C8C; } .stag--delivered{ background:#E6F4E6; color:#2E6B2E; }
.stag--cancelled,.stag--refunded{ background:#F7E3E1; color:#8C2F26; }
.sitems{ margin:14px 0; display:flex; flex-direction:column; gap:10px; }
.sitem{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.sitem img{ width:72px; height:72px; object-fit:contain; background:var(--paper-2); border-radius:6px; }
.sacts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
.sship{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sship select,.sship input{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; background:#fff; }
@media (max-width:860px){ .desk{ grid-template-columns:1fr; } .desk__detail{ position:static; } .sship select,.sship input{ flex:1 1 100%; min-width:0; width:100%; } }
mark.todo{ background:#FFE58F; color:#5A4500; padding:0 4px; border-radius:4px; font-weight:600; }
.previewbar{ position:sticky; top:0; z-index:200; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 16px; background:#FFE58F; color:#3D2F00; font-size:13px; }
.previewbar button{ font:inherit; font-weight:600; background:#3D2F00; color:#FFE58F; border:0; border-radius:999px; padding:5px 12px; cursor:pointer; }

/* ---- the admin area ---- */
.admin .stabs--main{ margin-bottom:6px; }
.admin .stabs--sub{ margin-bottom:14px; }
.admin .stabs--sub .stabs__t{ font-size:12.5px; padding:5px 11px; }
.ptools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 10px; }
.pmenu{ position:relative; }
.pmenu > summary{ list-style:none; cursor:pointer; }
.pmenu > summary::-webkit-details-marker{ display:none; }
.pmenu__in{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:270px; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.pnote{ margin:0 0 14px; }
.pnote--proposal{ background:#FFF4CC; border:1px solid #F1D98A; border-radius:10px; padding:10px 14px; }
.desk__list .srow--col{ background:var(--paper-2); }
.desk__list .srow--prod{ padding-left:30px; }
.stag--draft{ background:#F1ECE4; color:#6B5E4E; }
.stag--published{ background:#DDF1E6; color:#1B6B42; }
.stag--archived{ background:#EEE; color:#777; }
.desk__detail h3{ font-size:15px; }
.desk__detail .field textarea, .desk__detail .field input, .desk__detail .field select, .orow details input{ width:100%; }
.pcheck{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.orows{ display:flex; flex-direction:column; gap:10px; margin:8px 0; }
.orows--grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.orow{ position:relative; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--paper); }
.orow details{ margin-top:6px; }
.orow details input{ margin-top:6px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; }
.orow__x{ font-size:12.5px; }
.orow__ord{ display:block; margin-top:6px; font-size:12.5px; }
.field--price{ max-width:130px; }
.imgf{ display:grid; grid-template-columns:64px 1fr; gap:6px 10px; align-items:center; }
.imgf__t{ grid-row:span 2; width:64px; height:64px; border-radius:8px; background:var(--paper-2); overflow:hidden; display:grid; place-items:center; }
.imgf__t img{ width:100%; height:100%; object-fit:cover; }
.imgf__t .placing__spin{ width:22px; height:22px; }
.imgf__u{ min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:12.5px; }
.imgf__b{ display:flex; gap:6px; flex-wrap:wrap; }
.libpick{ position:fixed; inset:0; z-index:500; background:rgba(20,18,16,.5); display:grid; place-items:center; padding:16px; }
.libpick__in{ width:min(920px, 100%); max-height:86vh; overflow:auto; background:var(--paper); border-radius:16px; padding:16px; }
.libpick__h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.libpick__g{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.libpick__g button{ border:0; padding:0; background:var(--paper-2); border-radius:8px; overflow:hidden; aspect-ratio:1; cursor:pointer; }
.libpick__g button:hover{ outline:2px solid var(--accent); }
.libpick__g img{ width:100%; height:100%; object-fit:cover; display:block; }
.perr{ margin:10px 0 0 18px; color:var(--accent); }
.hedit section{ margin-bottom:26px; }
.hsave{ position:sticky; bottom:0; padding:12px 0; background:var(--paper); border-top:1px solid var(--line); z-index:5; }
.sprompt{ margin-top:6px; }
.sprompt p{ white-space:pre-wrap; margin-top:4px; }
@media (max-width:860px){ .desk__list .srow--prod{ padding-left:22px; } .field--price{ max-width:none; } }
.hsec{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.hsec__h{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.hmode{ display:flex; gap:12px; font-size:13px; }
.hmode label{ display:flex; gap:5px; align-items:center; cursor:pointer; }
.hsec:not(.is-custom) .hsec__b{ opacity:.55; }
.hsec.is-custom{ border-color:var(--ink); }
.fpick{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin-top:10px; }
.admin .desk{ grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr); }
.admin .desk__detail .field-row, .admin .orow .field-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.admin .orow .field{ margin-bottom:8px; }
.admin .orow input, .admin .orow select, .admin .orow textarea{ padding:8px 10px; }
@media (max-width:860px){ .admin .desk{ grid-template-columns:1fr; } }

/* =========================================================
   THE ADMIN AREA — a tool of its own (body.is-admin)
   ========================================================= */
body.is-admin .pbar, body.is-admin #nav, body.is-admin #foot, body.is-admin .tabbar, body.is-admin .mbar{ display:none !important; }
body.is-admin{ background:#F3F1ED; padding-bottom:0 !important; }
body.is-admin #main{ padding:0; }
.adm{ --adm-side:220px; min-height:100vh; color:var(--ink); font-size:14px; }
.adm__top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:56px; padding:0 20px; background:#1D1B19; color:#F3F1ED; }
.adm__brand{ display:flex; align-items:baseline; gap:10px; color:inherit; text-decoration:none; }
.adm__logo{ font-family:"Bebas Neue", "Oswald", var(--display, sans-serif); letter-spacing:.14em; font-size:19px; font-weight:600; }
.adm__tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.12); }
.adm__me{ display:flex; gap:14px; align-items:center; font-size:13px; }
.adm__name{ opacity:.7; }
.adm__link{ color:inherit; background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }
.adm__wrap{ display:grid; grid-template-columns:var(--adm-side) minmax(0,1fr); }
.adm__nav{ position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); display:flex; flex-direction:column; gap:2px; padding:18px 12px;
  border-right:1px solid #E4DFD7; background:#FBFAF8; }
.adm__nl{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:#4A4540; text-decoration:none; font-size:14px; }
.adm__nl:hover{ background:#F0ECE5; }
.adm__nl.is-on{ background:#1D1B19; color:#fff; }
.adm__i{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; flex:none; }
.adm__count{ margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; text-align:center; }
.adm__main{ min-width:0; padding:22px clamp(16px,2.6vw,36px) 120px; }
.adm__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.adm__h{ font-family:var(--serif, Georgia, serif); font-size:28px; font-weight:400; margin:0; }
.adm__h2{ font-family:var(--serif, Georgia, serif); font-size:22px; font-weight:400; margin:0; }
.adm__acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.adm__howto{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:11px 14px; margin-bottom:16px;
  background:#EAF3F3; border:1px solid #CFE3E3; border-radius:12px; font-size:13px; line-height:1.5; }
.adm__ok{ color:var(--ok); background:#E6F4EC; border-radius:8px; padding:8px 10px; margin:10px 0 0; }
.adm__x{ border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:#4A4540; }
.adm__card{ background:#fff; border:1px solid #E6E1D9; border-radius:14px; padding:16px 18px; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.adm__card--quiet{ background:#FBFAF8; }
.adm__cardh{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.adm__cardh h2, .adm__card > h2{ font-size:15px; font-weight:600; margin:0; font-family:inherit; display:flex; align-items:center; gap:8px; }
.adm .muted{ color:#8A837A; }
.adm .chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; background:#F0ECE5; color:#4A4540; font-weight:500; }
.adm .chip--ai{ background:#E7E3F7; color:#4B3B9A; }
.adm .warnt{ color:#B3541E; }
.adm .star{ color:#C9922B; }
.adm .stag{ font-size:11px; }
.adm .field label{ font-size:12.5px; color:#5E5850; }
.adm .field input, .adm .field select, .adm .field textarea{ font-size:14px; }
.adm .sublbl{ display:block; font-size:12.5px; color:#5E5850; margin:10px 0 6px; }
.adm .stabs--sub{ margin:0 0 14px; }
/* sign in */
.adm--login{ display:grid; place-items:center; padding:40px 16px; background:#F3F1ED; }
.adm__login{ width:min(420px,100%); }
.adm__login .adm__brand{ color:var(--ink); margin-bottom:16px; }
.adm__login .adm__tag{ background:#F0ECE5; }
.adm__err{ color:var(--accent); min-height:1em; }
/* dashboard */
.dstats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.dstat{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; background:#fff; border:1px solid #E6E1D9; border-radius:14px; color:inherit; text-decoration:none; }
.dstat b{ font-size:28px; font-weight:500; line-height:1.1; }
.dstat span{ font-size:12.5px; color:#8A837A; }
.dstat--warn{ border-color:#E8B48F; background:#FFF6EF; }
.dstat:hover{ border-color:#1D1B19; }
.dgrid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; align-items:start; }
.dprog{ height:6px; background:#F0ECE5; border-radius:999px; overflow:hidden; margin:-2px 0 12px; }
.dprog span{ display:block; height:100%; background:var(--accent); }
.dsteps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dsteps li{ display:grid; grid-template-columns:30px 1fr; gap:10px; padding:12px 0; border-top:1px solid #F0ECE5; }
.dsteps li:first-child{ border-top:0; }
.dsteps__n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:600; background:#F0ECE5; }
.dsteps li.is-done .dsteps__n{ background:#DDF1E6; color:#1B6B42; }
.dsteps li.is-done b{ color:#8A837A; text-decoration:line-through; text-decoration-color:#C8C1B7; }
.dsteps p{ margin:3px 0 0; }
.dsteps__a{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.dlist{ display:flex; flex-direction:column; }
.dlist__r{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #F0ECE5; color:inherit; text-decoration:none; }
.dlist__r:first-child{ border-top:0; }
.dlist__r:hover b{ text-decoration:underline; }
.dquick{ display:flex; gap:8px; flex-wrap:wrap; }
/* help */
.hlpgrid{ columns:2 380px; column-gap:14px; }
.hlp{ break-inside:avoid; }
.hlp ol, .hlp ul{ padding-left:18px; margin:6px 0; line-height:1.6; }
.hlpt{ width:100%; border-collapse:collapse; margin:8px 0; }
.hlpt td, .hlpt th{ text-align:left; padding:5px 8px; border-bottom:1px solid #F0ECE5; vertical-align:top; }
/* products */
.pdesk{ display:grid; grid-template-columns:minmax(260px,330px) minmax(0,1fr); gap:16px; align-items:start; }
.plist{ position:sticky; top:72px; max-height:calc(100vh - 90px); display:flex; flex-direction:column; background:#fff; border:1px solid #E6E1D9; border-radius:14px; overflow:hidden; }
.plist__f{ padding:10px; border-bottom:1px solid #F0ECE5; display:flex; flex-direction:column; gap:8px; }
.plist__f input, .plist__f select{ width:100%; padding:8px 10px; border:1px solid #E6E1D9; border-radius:9px; font:inherit; font-size:13px; background:#fff; }
.plist__fr{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.plist__l{ overflow:auto; }
.pgroup__h, .prow{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left;
  border:0; border-top:1px solid #F0ECE5; background:none; font:inherit; color:inherit; cursor:pointer; padding:8px 12px; }
.pgroup__h{ background:#FBFAF8; }
.pgroup__h > span:nth-child(2), .prow__t{ display:flex; flex-direction:column; min-width:0; }
.prow{ padding-left:24px; }
.prow b, .pgroup__h b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pgroup__h:hover, .prow:hover{ background:#F6F3EE; }
.pgroup__h.is-on, .prow.is-on{ background:#EAF3F3; box-shadow:inset 3px 0 0 var(--accent); }
.thumb{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:#F0ECE5; display:block; }
.thumb--none{ background:repeating-linear-gradient(45deg,#F0ECE5,#F0ECE5 6px,#F7F4EF 6px,#F7F4EF 12px); }
.peditor{ min-width:0; }
.pempty{ text-align:center; padding:40px 20px; }
.pedh{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:2px 0 12px; }
.pedh .btn{ margin-left:auto; }
.gtabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.gtab{ border:1px solid #E6E1D9; background:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer; }
.gtab.is-on{ background:#1D1B19; color:#fff; border-color:#1D1B19; }
.gtab__n{ display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px; background:rgba(0,0,0,.08); font-size:11px; }
.gtab.is-on .gtab__n{ background:rgba(255,255,255,.2); }
.gpanel > p{ margin:0 0 8px; }
.adm .orows{ display:flex; flex-direction:column; gap:6px; margin:8px 0 10px; }
.adm .orow{ border:1px solid #E6E1D9; border-radius:11px; padding:0; background:#fff; }
.adm details.orow > summary{ list-style:none; cursor:pointer; }
.adm details.orow > summary::-webkit-details-marker{ display:none; }
.orow__s{ display:flex; align-items:center; gap:10px; padding:9px 12px; }
.orow__s .thumb{ width:30px; height:30px; }
.orow__l{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.orow__p{ margin-left:auto; font-weight:600; white-space:nowrap; }
.adm details.orow[open] > summary{ border-bottom:1px solid #F0ECE5; background:#FBFAF8; border-radius:11px 11px 0 0; }
.orow__b{ padding:10px 12px 12px; }
.adm .orow .adv{ margin:4px 0 8px; }
.adm .orow .adv input{ width:100%; margin-top:6px; padding:7px 9px; border:1px solid #E6E1D9; border-radius:8px; font:inherit; font-size:13px; }
.pshots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:8px; }
.pshot{ border:1px solid #F0ECE5; border-radius:10px; padding:8px; }
.pchecks{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:8px; }
.adm .pcheck{ display:flex; gap:7px; align-items:center; margin:4px 0; font-size:13.5px; }
.imgf{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; }
.imgf__t{ width:64px; height:64px; border-radius:9px; background:#F0ECE5; overflow:hidden; display:grid; place-items:center; }
.imgf--big{ grid-template-columns:120px minmax(0,1fr); }
.imgf--big .imgf__t{ width:120px; height:120px; }
.imgf__r{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.imgf__u{ width:100%; padding:6px 9px; border:1px solid #E6E1D9; border-radius:8px; font:inherit; font-size:12px; color:#6B655D; }
/* the sticky save bar */
.psave{ position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; padding:10px 14px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border:1px solid #E6E1D9; border-radius:14px; box-shadow:0 -6px 20px rgba(0,0,0,.06); }
.psave__s{ display:flex; align-items:center; gap:8px; font-size:13px; }
.psave__s select{ padding:6px 8px; border:1px solid #E6E1D9; border-radius:8px; font:inherit; }
.psave__d{ color:#B3541E; font-size:12.5px; font-weight:600; }
.psave__b{ margin-left:auto; display:flex; gap:8px; }
/* homepage editor */
.hsec{ padding:0; overflow:hidden; }
.hsec__h{ display:grid; grid-template-columns:28px minmax(150px,220px) minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; margin:0; }
.hsec__n{ width:26px; height:26px; border-radius:50%; background:#F0ECE5; display:grid; place-items:center; font-size:12px; font-weight:600; }
.hsec__t h2{ font-size:15px; font-weight:600; margin:0 0 3px; font-family:inherit; }
.hsec.is-custom .hsec__mode{ background:#1D1B19; color:#fff; }
.hsec__thumbs{ display:flex; gap:6px; overflow:hidden; min-width:0; }
.hsec__thumbs .thumb{ width:52px; height:52px; flex:none; }
.hsec__words{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hsec__b{ padding:12px 16px 16px; border-top:1px solid #F0ECE5; background:#FBFAF8; }
.hsec .hmode{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:13px; }
.hsec:not(.is-custom) .hsec__b > *:not(.hmode){ opacity:.6; }
.hsec.is-custom{ border-color:#1D1B19; }
.hsec .orow{ padding:10px 12px; }
/* the old desk inside the admin */
.adm .desk__list, .adm .desk__detail{ background:#fff; border-color:#E6E1D9; }
@media (max-width:900px){
  .adm__wrap{ grid-template-columns:1fr; }
  .adm__nav{ position:sticky; top:56px; z-index:30; height:auto; flex-direction:row; overflow-x:auto; padding:8px 10px; border-right:0; border-bottom:1px solid #E4DFD7; gap:4px; }
  .adm__nl{ flex:none; padding:7px 11px; font-size:13px; }
  .adm__nl .adm__i{ display:none; }
  .adm__name{ display:none; }
  .adm__top{ padding:0 14px; }
  .dgrid, .pdesk{ grid-template-columns:1fr; }
  .plist{ position:static; max-height:none; }
  .pdesk.is-editing .plist{ display:none; }
  .hsec__h{ grid-template-columns:26px minmax(0,1fr) auto; }
  .hsec__thumbs{ grid-column:1 / -1; order:3; }
  .imgf--big{ grid-template-columns:84px minmax(0,1fr); }
  .imgf--big .imgf__t{ width:84px; height:84px; }
}
.adm .field-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:0 12px; }
.adm #pFacts .field-row{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
.adm #pFacts .field{ margin-bottom:6px; }
.adm .chip--ok{ background:#DDF1E6; color:#1B6B42; }
.adm .chip--bad{ background:#FBE3D9; color:#9A3412; }
.shoppanel .dquick{ margin-top:8px; }
.shopline{ margin:0 0 6px; color:#6B655D; }
.shopnote{ margin:-2px 0 10px; }
/* ---------- the command center ---------- */
.adm__nav{ overflow-y:auto; }
.adm__ng{ display:block; margin:14px 12px 4px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#9A9389; font-weight:600; }
.seg{ display:inline-flex; padding:3px; border-radius:999px; background:#F0ECE5; gap:2px; }
.seg__b{ padding:5px 12px; border-radius:999px; font-size:12.5px; color:#4A4540; text-decoration:none; white-space:nowrap; }
.seg__b.is-on{ background:#fff; color:#1D1B19; box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:600; }
.dmain, .dside{ min-width:0; }
.dpair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; }
.dpair--wide{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
/* numbers */
.kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:#F0ECE5; border:1px solid #F0ECE5; border-radius:12px; overflow:hidden; }
.kpis--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.kpis--4.adm__card{ padding:0; }
.kpi{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:#fff; min-width:0; }
.kpi__l{ font-size:12px; color:#8A837A; }
.kpi__v{ font-size:22px; font-weight:500; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi__h{ font-size:11.5px; color:#8A837A; }
.kpi__h a{ color:var(--accent-d); }
.kd{ font-size:11.5px; color:#8A837A; font-weight:600; }
.kd--up{ color:#1B6B42; }
.kd--down{ color:#9A3412; }
/* charts */
.chart{ width:100%; height:auto; display:block; }
.chart__b{ fill:var(--accent); opacity:.85; }
.chart__l{ fill:none; stroke:#1D1B19; stroke-width:1.5; stroke-linejoin:round; }
.chart__x, .chart__y{ font-size:9px; fill:#8A837A; text-anchor:middle; }
.chart__y{ text-anchor:start; }
.funnel{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.funnel__r{ display:grid; grid-template-columns:minmax(0,118px) minmax(0,1fr) auto 42px; gap:10px; align-items:center; font-size:13px; }
.funnel__t{ height:10px; background:#F0ECE5; border-radius:999px; overflow:hidden; }
.funnel__f{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.funnel__p{ font-size:11.5px; color:#8A837A; text-align:right; }
/* needs you */
.need{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; margin-bottom:8px; border-radius:10px; border:1px solid #E6E1D9; border-left-width:3px; background:#FBFAF8; color:inherit; text-decoration:none; }
.need__k{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#8A837A; font-weight:600; }
.need--agent{ border-left-color:#4B3B9A; }
.need--high{ border-left-color:#C2410C; background:#FFF6EF; }
.need--low{ border-left-color:#C9922B; }
.need--task{ flex-direction:row; align-items:flex-start; gap:10px; border-left-color:var(--accent); cursor:pointer; }
.need--task input{ margin-top:3px; }
a.need:hover b{ text-decoration:underline; }
.need__a{ display:flex; gap:6px; margin-top:6px; }
.taskf{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; margin-top:6px; }
.taskf input{ min-width:0; padding:7px 10px; border:1px solid #E6E1D9; border-radius:9px; font:inherit; font-size:13px; background:#fff; }
/* orders */
.pipe{ display:flex; align-items:stretch; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.pipe__s{ flex:1 1 120px; display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:#fff; border:1px solid #E6E1D9; border-radius:12px; color:inherit; text-decoration:none; }
.pipe__s b{ font-size:24px; font-weight:500; }
.pipe__s span{ font-size:12.5px; color:#8A837A; }
.pipe__s:hover{ border-color:#1D1B19; }
.pipe__a{ align-self:center; color:#C8C1B7; }
.latebox{ border-color:#E8B48F; background:#FFF6EF; }
.tbl{ overflow-x:auto; }
.tbl table{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; font-weight:600; font-size:12px; color:#8A837A; padding:8px 10px; border-bottom:1px solid #E6E1D9; white-space:nowrap; }
.tbl td{ padding:9px 10px; border-bottom:1px solid #F0ECE5; vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl__a{ text-align:right; white-space:nowrap; }
.cu__s{ padding:7px 11px; border:1px solid #E6E1D9; border-radius:999px; font:inherit; font-size:13px; min-width:0; width:min(260px,100%); }
/* support */
.thread{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.tmsg{ max-width:88%; padding:9px 12px; border-radius:12px; background:#F6F3EE; }
.tmsg p{ margin:4px 0 0; white-space:pre-wrap; }
.tmsg--us{ align-self:flex-end; background:#EAF3F3; }
.adm .note{ padding:8px 10px; margin:6px 0; border-radius:9px; background:#FFF8E6; border:1px solid #F1E2B8; }
/* creatives board */
.board{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; align-items:start; margin-bottom:14px; }
.board__c{ background:#F6F3EE; border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.board__c h2{ font-size:13px; font-weight:600; margin:2px 4px 2px; font-family:inherit; display:flex; justify-content:space-between; align-items:center; }
.crd{ display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; padding:8px; background:#fff; border:1px solid #E6E1D9; border-radius:10px; font:inherit; color:inherit; cursor:pointer; }
.crd img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:7px; background:#F0ECE5; }
.crd:hover{ border-color:#1D1B19; }
/* experiments */
.exvs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:10px 0; }
.exv{ border:1px solid #E6E1D9; border-radius:12px; padding:10px 12px; background:#FBFAF8; min-width:0; }
.exv.is-win{ border-color:#1B6B42; background:#F1FAF4; }
.exv__h{ display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
.exv img{ width:100%; max-height:180px; object-fit:cover; border-radius:8px; display:block; }
.exv__t{ margin:0; white-space:pre-wrap; }
.exv__n{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-size:12px; color:#6B655D; }
.exv__n b{ color:#1D1B19; }
/* agents */
.agents{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:14px; }
.agents > .adm__card{ margin-bottom:0; }
.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12.5px; font-weight:600; }
.switch input{ appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; background:#D9D3CA; position:relative; cursor:pointer; margin:0; transition:background .2s; }
.switch input::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .2s; }
.switch input:checked{ background:#1B6B42; }
.switch input:checked::after{ transform:translateX(16px); }
.agkey{ margin-top:10px; padding:10px 12px; border-radius:10px; background:#1D1B19; color:#F3F1ED; font-size:12.5px; word-break:break-all; }
.agkey code{ font-size:12px; }
.btn--danger{ background:#9A3412; border-color:#9A3412; color:#fff; }
.btn--danger:hover{ background:#7C2A0E; border-color:#7C2A0E; }
/* integrations, coming next */
.integ{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:14px; }
.integ > .adm__card{ margin-bottom:0; }
.integ__c.is-on{ border-color:#BFE1CD; }
.integ__c summary{ cursor:pointer; color:var(--accent-d); }
.coming{ max-width:720px; }
.coming ul{ padding-left:18px; line-height:1.7; }
@media (max-width:1100px){
  .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .board{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .adm__ng{ display:none; }
  .adm__nav{ overflow-y:visible; }
  .dpair, .dpair--wide{ grid-template-columns:1fr; }
  .dside{ order:-1; }
}
@media (max-width:560px){
  .board, .exvs{ grid-template-columns:1fr; }
  .funnel__r{ grid-template-columns:minmax(0,92px) minmax(0,1fr) auto 34px; gap:6px; }
  .pipe__a{ display:none; }
  .pipe__s{ flex-basis:calc(50% - 3px); }
  .kpi__v{ font-size:19px; }
}
/* ---------- a product's looks (Collection → Product → Variation) ---------- */
.pcard__looks{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.looks{ margin:14px 0 4px; }
.looks__l{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.looks__row{ display:flex; gap:8px; flex-wrap:wrap; }
.looks__o{ display:flex; flex-direction:column; align-items:center; gap:5px; width:74px; padding:5px; border:1px solid var(--line); border-radius:var(--r); color:var(--ink-2); text-decoration:none; font-size:11.5px; line-height:1.25; text-align:center; background:var(--white); }
.looks__o img{ width:62px; height:62px; object-fit:cover; border-radius:calc(var(--r) - 4px); background:var(--paper-2); }
.looks__o:hover{ border-color:var(--ink-2); }
.looks__o.is-on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); font-weight:500; }
.looks--stage{ margin:18px auto 0; }
.looks--stage .looks__l{ color:rgba(255,255,255,.66); }
.looks--stage .looks__row{ justify-content:center; }
.looks--stage .looks__o{ background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.85); }
.looks--stage .looks__o.is-on{ border-color:#fff; box-shadow:inset 0 0 0 1px #fff; color:#fff; }
.hiw__row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-top:12px; }
.hiw__p{ margin:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.hiw__p img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r); background:var(--paper-2); }
.hiw__p img:only-of-type{ grid-column:1 / -1; }
.hiw__a{ color:var(--muted); font-size:18px; }
.hiw__p figcaption{ grid-column:1 / -1; color:var(--muted); }
/* the catalog tree and the variation editor */
.prow--g{ padding-left:24px; }
.prow--v{ padding-left:44px; }
.prow--v .thumb{ width:32px; height:32px; }
.pgrp{ border-top:1px solid #F0ECE5; }
.restr{ border-color:#CFE3E3; background:#F4FAFA; }
.gvar{ display:flex; align-items:center; gap:10px; }
.pedh .link-a{ align-self:center; }
.pmore > summary{ cursor:pointer; color:var(--accent-d); margin-bottom:6px; }
.pmore[open] > summary{ margin-bottom:10px; }
#pVariants input{ width:100%; min-width:90px; padding:5px 8px; border:1px solid #E6E1D9; border-radius:7px; font:inherit; font-size:12.5px; }
.pref{ border:1px solid #F0ECE5; border-radius:11px; padding:10px 12px; margin-bottom:8px; background:#FBFAF8; }
.pref__p{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:end; }
.pref__a{ font-size:20px; color:#8A837A; padding-bottom:22px; }
.serp{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; margin:6px 0 10px; border:1px solid #E6E1D9; border-radius:10px; background:#fff; max-width:600px; }
.serp__u{ font-size:12px; color:#4D5156; }
.serp__t{ font-size:17px; color:#1A0DAB; line-height:1.3; }
.serp__d{ font-size:13px; color:#4D5156; line-height:1.45; }
.psave__f + .psave__f{ margin-left:4px; }
@media (max-width:560px){ .pref__p{ grid-template-columns:1fr; } .pref__a{ display:none; } }
.srefs{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:6px; }
.srefs a{ display:inline-flex; align-items:center; gap:4px; color:#8A837A; text-decoration:none; }
.srefs img{ width:56px; height:56px; object-fit:cover; border-radius:7px; }
/* Website section */
.pbarprev{ display:flex; gap:10px; justify-content:center; align-items:center; margin:14px 0 4px; padding:9px 12px; border-radius:10px; background:#1D1B19; color:#F3F1ED; font-size:13px; }
.pbarprev i{ font-style:normal; border-bottom:1px solid rgba(255,246,241,.5); }
.pagecard__img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:10px; background:#F0ECE5; }

/* product lines (admin): style × layout grid, sizes table */
.adm .chip--line{ background:var(--accent-soft); color:var(--accent-d); font-size:10.5px; }
.lrow{ border:1px solid #E6E1D9; border-radius:10px; padding:10px 12px; margin-bottom:8px; background:#FBFAF8; }
.lrow .field{ margin-bottom:6px; }
.lsize input[data-k="label"], .lsize input[data-k="delta"]{ width:100%; min-width:90px; }
.lsize input[data-k="dim"]{ width:100%; margin-top:4px; }
.lsize__fit{ white-space:nowrap; }
.lsize__fit .pcheck{ display:block; margin:0; }
.lgrid table{ border-collapse:separate; border-spacing:6px; }
.lgrid th{ text-align:left; font-size:12.5px; }
.lcell{ display:flex; gap:8px; align-items:center; min-width:150px; padding:6px; border:1px solid #E6E1D9; border-radius:10px; background:#fff; color:inherit; text-decoration:none; font:inherit; font-size:12.5px; }
.lcell > span{ display:flex; flex-direction:column; gap:2px; }
.lcell--add{ justify-content:center; border-style:dashed; color:var(--accent-d); cursor:pointer; background:#FBFAF8; min-height:52px; }
.lcell--add:hover{ background:var(--accent-soft); }
.lsizes{ margin-bottom:12px; }
.lsizes__l{ margin:6px 0 8px; padding-left:18px; }
/* the product page: graphic style and layout switchers */
.looks + .looks{ margin-top:10px; }
.looks__o.is-off{ opacity:.45; }

/* a product line's variation: the line's name, then its graphic style · layout */
.buy__title-sub{ font-size:15px; color:var(--muted); margin-top:2px; letter-spacing:.01em; }
.stage__t-sub{ font-size:clamp(15px,1.8vw,19px); opacity:.88; margin-top:6px; letter-spacing:.02em; }
.tidy__in{ display:block; width:100%; margin-bottom:6px; }
.tidy__t td, .tidy__t th{ vertical-align:top; }
.tidy__c{ display:flex; gap:8px; align-items:flex-start; cursor:pointer; min-width:150px; }
.tidy__c > span{ display:flex; flex-direction:column; gap:2px; }
.tidy__c input{ margin:0 6px 0 0; }
.tidy__c.is-new{ outline:1px dashed var(--muted); outline-offset:3px; border-radius:6px; }
.tidy__c.is-off{ opacity:.45; }
.tidy__c.is-off .tidy__n{ text-decoration:line-through; }
.tidy .field-row{ align-items:flex-start; }