/* ============================================================
   DaVinci Frames storefront
   A gallery wall, not a shop grid: every piece is a shadow box (art
   printed edge to edge on a 3.5 cm block, no glass) hanging on limewash
   plaster, with a museum wall label beneath it.

   Palette  paper #F6F3EE · plaster #E8E1D6 · mount #FCFAF6
            walnut #2B211B (ink) · umber #6E6258 · brass #A67C2E (the one accent)
   Type     Bodoni Moda (display) · Instrument Sans (text)
   ============================================================ */
:root{
  --paper:#F6F3EE;
  --plaster:#E8E1D6;
  --mount:#FCFAF6;
  --walnut:#2B211B;
  --walnut-2:#45372D;
  --ebony:#1C1815;
  --umber:#6E6258;
  --line:#DCD3C6;
  --line-2:#CBBFAF;
  --brass:#A67C2E;
  --brass-ink:#7C5B1C;       /* brass dark enough for text on paper */
  --gilt:#C29A4B;
  --ok:#3E6B4B;
  --danger:#9B2F2A;
  --maxw:1200px;
  --gutter:16px;
  --font-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hang-shadow:0 18px 26px -18px rgba(43,33,27,.55),0 2px 3px rgba(43,33,27,.14);
  --wall-shadow:14px 20px 26px -12px rgba(43,33,27,.5),4px 6px 10px -4px rgba(43,33,27,.28);
  --champagne:#C9A24A;
  --tile-gap:1.1rem;
  /* legacy aliases so older inline styles still resolve to this palette */
  --ink:var(--walnut); --ink-700:var(--walnut-2); --ink-500:var(--umber); --ink-400:#9A8E83;
  --white:var(--mount); --clay:var(--danger);
  --amber:var(--brass); --green:var(--walnut); --panel:var(--mount);
}
@media (min-width:700px){:root{--gutter:28px;--tile-gap:1.6rem}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--walnut);font-family:var(--font-body);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--walnut);text-decoration:none}
a:hover{color:var(--brass-ink)}
p a,.prose a,.link{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
p a:hover,.prose a:hover,.link:hover{text-decoration-color:var(--brass)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;margin:0 0 .45em;letter-spacing:-.01em;color:var(--walnut)}
h1{font-size:clamp(2.35rem,8vw,4.4rem)}
h2{font-size:clamp(1.75rem,5vw,2.75rem)}
h3{font-size:1.35rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.muted{color:var(--umber)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.75rem 1.5rem;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font:600 .95rem/1.2 var(--font-body);letter-spacing:.01em;text-align:center;
  transition:background-color .18s,color .18s,border-color .18s}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn,.btn-primary,.btn-dark,.btn-buy{background:var(--walnut);color:var(--mount);border-color:var(--walnut)}
.btn:hover,.btn-primary:hover,.btn-dark:hover,.btn-buy:hover{background:var(--walnut-2);border-color:var(--walnut-2);color:var(--mount)}
.btn-ghost{background:transparent;color:var(--walnut);border-color:var(--walnut)}
.btn-ghost:hover{background:var(--walnut);color:var(--mount)}
.btn-on-image,.btn-light{background:transparent;color:var(--mount);border-color:rgba(252,250,246,.7)}
.btn-on-image:hover,.btn-light:hover{background:var(--mount);color:var(--walnut);border-color:var(--mount)}
.btn-block{width:100%}
.btn-sm{min-height:40px;padding:.5rem 1rem;font-size:.86rem}
.btn.loading{opacity:.7;pointer-events:none}
.text-link{font-weight:600;border-bottom:1px solid var(--brass);padding-bottom:2px}
.text-link:hover{color:var(--brass-ink)}

/* ---------------------------------------------------------------- top bar + header */
.topbar{background:var(--walnut);color:#E9E0D2;font-size:.8rem}
.topbar .wrap{display:flex;justify-content:center;align-items:center;min-height:34px;gap:1rem;text-align:center}
.topbar a{color:var(--mount)}
.topbar-right{display:none}
@media (min-width:900px){.topbar .wrap{justify-content:space-between}.topbar-right{display:flex;gap:1.2rem}}

.site-header{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.96);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:.5rem;height:62px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand-logo{height:30px;width:auto}
.nav{display:none}
.header-actions{display:flex;align-items:center;gap:.15rem}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--walnut);background:none;border:0;cursor:pointer}
.icon-btn:hover{color:var(--brass-ink)}
.cart-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--brass);color:var(--mount);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.menu-toggle{order:3}
.searchbox{display:none}
/* one joined control: a single bordered field with the submit button set flush inside it */
.searchbox.open{display:flex;position:absolute;top:62px;left:0;right:0;padding:.6rem var(--gutter);
  background:var(--paper);border-bottom:1px solid var(--line);z-index:60}
.searchbox .sb-field{display:flex;flex:1;min-width:0;height:46px;border:1px solid var(--line-2);border-radius:2px;
  background:var(--mount);overflow:hidden}
.searchbox .sb-field:focus-within{border-color:var(--walnut);box-shadow:0 0 0 3px rgba(166,124,46,.22)}
.searchbox input[type=search]{flex:1;min-width:0;height:100%;min-height:0;border:0;border-radius:0;background:none;
  padding:0 .85rem;font:inherit;font-size:16px;color:var(--walnut);-webkit-appearance:none;appearance:none}
.searchbox input[type=search]:focus{outline:none}
.searchbox input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.searchbox button{flex:0 0 auto;width:46px;height:100%;border:0;border-left:1px solid var(--walnut);border-radius:0;
  background:var(--walnut);color:var(--mount);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.searchbox button:hover{background:var(--walnut-2)}
.nav.open{display:flex;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:var(--paper);
  border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.2rem;z-index:60;max-height:calc(100dvh - 62px);overflow:auto}
.nav a{display:block;padding:.7rem 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
.nav-group-title{font-size:.82rem;color:var(--umber);padding:.9rem 0 .2rem}
.nav-moods a{font-family:var(--font-display);font-size:1.2rem}
.nav-moods a.nav-sub{font-family:var(--font-body);font-size:.95rem;padding:.5rem 0 .5rem 1.1rem;color:var(--walnut-2);
  border-left:1px solid var(--line-2);border-bottom-color:transparent;margin-left:.2rem}
.nav-moods a:has(+ a.nav-sub){border-bottom-color:transparent}
.nav-moods a.nav-sub+a:not(.nav-sub){border-top:1px solid var(--line)}
.nav-moods a.nav-sub:has(+ a:not(.nav-sub)){margin-bottom:.3rem}
.nav-dd-btn{display:none}
/* phones list the collections (and their sub-collections) in .nav-moods; the dropdown is desktop only */
@media (max-width:979px){.nav-dd{display:none}}
@media (min-width:980px){
  .site-header .wrap{height:76px;gap:1.6rem}
  .brand{margin-right:0}
  .brand-logo{height:36px}
  .nav,.nav.open{display:flex;flex-direction:row;position:static;background:none;border:0;padding:0;gap:1.6rem;flex:1;
    align-items:center;max-height:none;overflow:visible}
  .nav a{border:0;padding:.3rem 0;font-size:.93rem}
  .nav-group-title{display:none}
  .nav-moods{display:none!important}
  .nav-dd{position:relative}
  .nav-dd-btn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;font:inherit;font-size:.93rem;
    color:var(--walnut);cursor:pointer;padding:.3rem 0}
  .nav-dd-menu{position:absolute;top:100%;left:-1rem;min-width:260px;background:var(--mount);border:1px solid var(--line);
    padding:.6rem 1rem;box-shadow:var(--hang-shadow);opacity:0;visibility:hidden;transition:opacity .15s;z-index:70}
  .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible}
  .nav-dd-menu a{font-family:var(--font-display);font-size:1.1rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
  .nav-dd-menu a:last-child{border:0;font-family:var(--font-body);font-size:.88rem;font-weight:600}
  .nav-dd-menu a.nav-sub{font-family:var(--font-body);font-size:.86rem;color:var(--walnut-2);padding:.28rem 0 .28rem .9rem;
    margin-left:.15rem;border-bottom:0;border-left:1px solid var(--line-2)}
  .nav-dd-menu a.nav-sub:hover{color:var(--brass-ink);border-left-color:var(--brass)}
  .nav-dd-menu a:has(+ a.nav-sub){border-bottom:0}
  .nav-dd-menu a.nav-sub:has(+ a:not(.nav-sub)){margin-bottom:.4rem}
  .menu-toggle{display:none}
  .searchbox,.searchbox.open{display:flex;position:static;padding:0;border:0;background:none;width:240px}
  .searchbox .sb-field{height:42px}
  .searchbox button{width:42px}
  .search-toggle{display:none}
}

/* flash messages */
.flash{padding:.8rem 1rem;margin:.6rem 0;background:var(--mount);border:1px solid var(--line);border-left:3px solid var(--walnut)}
.flash.success{border-left-color:var(--ok)}
.flash.error{border-left-color:var(--danger)}

/* ---------------------------------------------------------------- the signature: the shadow box */
/* .sbox        flat block for grids: the art is the front face; ::after is the right side and
                ::before the bottom, skewed into a thin depth edge. The sides continue the image
                (darkened) unless .sbox--painted sets a colour in --edge. Soft wall shadow behind.
   .sbox--3d    the same block turned in CSS perspective with a real side face (.sbox-side) whose
                width is 3.5 cm at the size's scale (--wcm = width in cm). Sits in .sbox-stage. */
.sbox{--d:clamp(4px,3.4%,9px);--edge:var(--walnut);--shade:rgba(20,14,10,.42);
  position:relative;display:block;aspect-ratio:2/3;background:var(--edge);box-shadow:var(--wall-shadow)}
.sbox-face{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sbox::after,.sbox::before{content:"";position:absolute;transform-origin:0 0;pointer-events:none}
.sbox::after{top:0;left:100%;width:var(--d);height:100%;transform:skewY(45deg);
  background:linear-gradient(var(--shade),var(--shade)),var(--art,none) right center/auto 100% no-repeat,var(--edge)}
.sbox::before{top:100%;left:0;width:100%;height:var(--d);transform:skewX(45deg);--shade:rgba(20,14,10,.58);
  background:linear-gradient(var(--shade),var(--shade)),var(--art,none) center bottom/100% auto no-repeat,var(--edge)}
.sbox--painted::after,.sbox--painted::before{background:linear-gradient(var(--shade),var(--shade)),var(--edge)}
.sbox--painted::after{--shade:rgba(20,14,10,.16)}
.sbox--painted::before{--shade:rgba(20,14,10,.3)}
.sbox-empty{background:linear-gradient(160deg,rgba(166,124,46,.2),transparent 60%),var(--plaster)}
/* landscape (3:2) block — the storefront default wherever a design has landscape art */
.sbox--land{aspect-ratio:3/2}

/* angled 3D block */
.sbox-stage{perspective:1600px;filter:drop-shadow(18px 22px 18px rgba(43,33,27,.34)) drop-shadow(3px 4px 3px rgba(43,33,27,.2))}
.sbox--3d{box-shadow:none;background:none;transform-style:preserve-3d;transform:rotateY(-32deg) rotateX(2deg);
  transition:transform .5s ease}
.sbox--3d::after,.sbox--3d::before{display:none}
.sbox--3d .sbox-face{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sbox-side{position:absolute;top:0;left:100%;height:100%;width:calc(100% * 3.5 / var(--wcm,40));
  transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(20,14,10,.34),rgba(20,14,10,.5)),var(--art,none) right center/auto 100% no-repeat,var(--edge)}
.sbox--painted .sbox-side{background:linear-gradient(90deg,rgba(20,14,10,.08),rgba(20,14,10,.22)),var(--edge)}
@media (prefers-reduced-motion:reduce){.sbox--3d{transform:rotateY(-18deg)}}

/* tiles: every grid (moods, rooms, product cards) uses one tile — a square plaster wall with a centred
   shadow box, then a label. Square suits the landscape boxes (the default): 80% wide, so they read as
   big on a phone's two-column grid; the odd portrait box (legacy art) stands 74% of the wall high. */
.tiles,.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--tile-gap)}
@media (min-width:900px){.tiles,.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.6rem var(--tile-gap)}}
/* grids beside a filter column drop to three across until there's room for four */
@media (min-width:900px) and (max-width:1199px){.shop-main .product-grid,.split .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;min-width:0;color:inherit}
.tile-wall{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:var(--plaster);overflow:hidden}
.tile-wall .sbox{width:auto;height:74%;transition:transform .3s ease}
.tile-wall .sbox--land{width:80%;height:auto;margin-top:-3%}
.tile:hover .tile-wall .sbox,.pcard:hover .tile-wall .sbox{transform:translateY(-3px)}
.tile-label{display:block;padding:.75rem 0 0}
.tile-label .t{display:block;font-family:var(--font-display);font-size:1.15rem;line-height:1.2;color:var(--walnut)}
.tile-label .d{display:block;font-size:.88rem;color:var(--umber);line-height:1.45;margin-top:.2rem}
.tile-label .m{display:block;font-size:.8rem;color:var(--brass-ink);margin-top:.3rem;letter-spacing:.01em}
.tile:hover .tile-label .t{color:var(--brass-ink)}
/* sub-collection strip (fields of a mood): the same tile, one row. On a phone it scrolls sideways
   inside its own box (snap, bleeding to the screen edge); from 900px every field sits in one row. */
.tiles--fields{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,1fr)}
@media (max-width:899px){
  .tiles--fields{grid-auto-columns:42%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) .6rem;scroll-padding:0 var(--gutter);scrollbar-width:thin}
  .tiles--fields .tile{scroll-snap-align:start}
}
@media (min-width:900px){.tiles--fields{grid-template-columns:none;gap:2rem var(--tile-gap)}
  .tiles--fields .tile-label .t{font-size:1.08rem}}
/* the two style tiles span two columns each on desktop and carry their edition's wall */
.tile--executive .tile-wall{background:radial-gradient(120% 80% at 30% 20%,#2A2622,#141210);box-shadow:inset 0 0 0 1px rgba(201,162,74,.35)}
.tile--gen-z .tile-wall{background:linear-gradient(140deg,#FF5E8A 0%,#8E5CFF 55%,#2FD3C5 100%)}
.tile--executive .tile-wall .sbox,.tile--gen-z .tile-wall .sbox{--wall-shadow:14px 22px 28px -10px rgba(0,0,0,.55),4px 6px 10px -4px rgba(0,0,0,.35)}
@media (min-width:900px){
  .tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--2 .tile-wall{aspect-ratio:4/3}
  .tiles--2 .tile-wall .sbox{width:auto;height:76%}
  .tiles--2 .tile-wall .sbox--land{width:74%;height:auto}
  .tiles--2 .tile-label .t{font-size:1.5rem}
}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--plaster);overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;gap:1.6rem;padding-top:clamp(1.8rem,6vw,4.5rem);padding-bottom:clamp(2.4rem,6vw,4.5rem)}
.hero h1{max-width:13ch;margin-bottom:.35em;font-size:clamp(2.3rem,9vw,4.4rem)}
.hero .lead{font-size:1.06rem;max-width:32rem;margin:0 0 1.4rem;color:var(--walnut-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero-cta .btn{flex:1 1 auto}
@media (min-width:560px){.hero-cta .btn{flex:0 0 auto}}
.sb-facts{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem;color:var(--walnut-2)}
.sb-facts li{position:relative;padding-left:.95rem}
.sb-facts li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;background:var(--brass)}
.hero-wall{display:flex;justify-content:center;padding:.5rem 0 1rem}
.hero-wall .sbox-stage{width:min(56%,280px)}
.hero-wall .sbox-stage.is-land{width:min(80%,400px);margin-right:4%}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:3rem}
  .hero-wall{padding:1rem 0}
  .hero-wall .sbox-stage{width:min(56%,340px)}
  .hero-wall .sbox-stage.is-land{width:min(86%,500px)}
}

/* ---------------------------------------------------------------- sections */
section.block{padding:clamp(2.6rem,7vw,4.8rem) 0}
/* equal rhythm: plain sections share one gap; banded sections (own background) keep both paddings */
section.block:not(.band)+section.block:not(.band){padding-top:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.8rem}
.section-head h2{margin:0}
.section-head p{margin:.5rem 0 0;color:var(--umber);max-width:36rem}
.section-head .text-link{white-space:nowrap}
.kicker{display:block;font-size:.9rem;color:var(--brass-ink);margin-bottom:.35rem;font-weight:500}

/* how it works — a real sequence */
.steps-band{background:var(--mount);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .9rem;align-items:baseline}
.steps li::before{content:counter(step);grid-row:span 2;font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--brass)}
.steps strong{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.2}
.steps span{color:var(--umber);font-size:.95rem}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(5,1fr);gap:1.6rem}
  .steps li{grid-template-columns:1fr;border-top:1px solid var(--line-2);padding-top:1rem}
  .steps li::before{grid-row:auto;margin-bottom:.6rem}
}

/* frame-your-photo band */
.own-photo{background:var(--walnut);color:#E9E0D2}
.own-photo h2{color:var(--mount)}
.own-photo .wrap{display:grid;gap:2.4rem;align-items:center}
.own-photo p{max-width:34rem}
.own-photo .note{color:#CFC4B5;font-size:.93rem}
.own-wall{display:flex;justify-content:center}
.own-wall .sbox{width:min(52%,240px);--edge:#F4F2EE;--wall-shadow:14px 22px 28px -10px rgba(0,0,0,.5)}
.own-wall .sbox::after,.own-wall .sbox::before{background:linear-gradient(var(--shade),var(--shade)),var(--edge)}
.own-photo .slot{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;
  background:var(--paper);color:var(--umber);font-family:var(--font-display);font-size:1.15rem;
  outline:1px dashed var(--line-2);outline-offset:-10px}
.own-photo .picks{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:1rem 0 1.6rem;padding:0;list-style:none}
.own-photo .picks a{color:var(--mount);border-bottom:1px solid var(--gilt)}
@media (min-width:860px){.own-photo .wrap{grid-template-columns:1fr 1.2fr}}

/* trust strip */
.trust{display:grid;gap:1.3rem;grid-template-columns:1fr}
.trust>div{border-top:1px solid var(--line-2);padding-top:.9rem}
.trust strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin-bottom:.2rem}
.trust span{color:var(--umber);font-size:.93rem}
@media (min-width:640px){.trust{grid-template-columns:repeat(2,1fr);gap:1.6rem 2rem}}
@media (min-width:1000px){.trust{grid-template-columns:repeat(4,1fr)}}
.pay-marks{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.pay-mark{display:inline-flex;align-items:center;height:26px;padding:0 .55rem;border:1px solid var(--line-2);
  background:var(--mount);font-size:.76rem;font-weight:600;color:var(--walnut-2);border-radius:2px}

/* ---------------------------------------------------------------- product cards (same tile) */
.pcard{display:flex;flex-direction:column;min-width:0}
.pcard .tile-wall .ph{width:62%}
.pcard .badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--brass);color:var(--mount);font-size:.74rem;
  font-weight:600;padding:.2rem .5rem;border-radius:2px}
.pcard .body{display:flex;flex-direction:column;gap:.15rem;padding:.75rem 0 0;flex:1}
.pcard .cat{font-size:.8rem;color:var(--umber)}
.pcard .name{font-family:var(--font-display);font-weight:500;font-size:1.15rem;line-height:1.2;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .name a{color:inherit}
.pcard .price{font-weight:600;font-size:.97rem;margin-top:.15rem}
.pcard .price .from{font-weight:400;color:var(--umber)}
.pcard .price .was{color:var(--umber);text-decoration:line-through;font-weight:400;font-size:.85rem;margin-left:.35rem}
.pcard .stars{color:var(--brass-ink);font-size:.82rem}
.pcard .add{margin-top:auto;align-self:flex-start}
.pcard .price{margin-bottom:.7rem}
@media (max-width:520px){.pcard .add{width:100%;padding-left:.4rem;padding-right:.4rem;font-size:.82rem}}

/* ---------------------------------------------------------------- breadcrumbs + generic */
.crumbs{font-size:.85rem;color:var(--umber);padding:1rem 0 .6rem;overflow-wrap:anywhere}
.crumbs a{color:var(--umber)}
.crumbs a:hover{color:var(--walnut)}
.panel{background:var(--mount);border:1px solid var(--line);padding:clamp(1.1rem,3vw,1.7rem)}
.prose{max-width:66ch}
.prose p{margin:0 0 1rem}
.prose h2{font-size:1.6rem;margin-top:1.6rem}
.tabs{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.8rem}
.status-pill{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600;
  border:1px solid var(--line-2);background:var(--paper);color:var(--walnut-2)}
.status-paid,.status-processing,.status-shipped,.status-delivered{background:var(--walnut);color:var(--mount);border-color:var(--walnut)}
.status-cancelled,.status-refunded{color:var(--umber);text-decoration:line-through}
.split{display:grid;gap:2rem}
@media (min-width:900px){.split{grid-template-columns:240px 1fr;align-items:start}}
.filters{border-top:1px solid var(--line-2);padding-top:1rem}
.filters h4{font-family:var(--font-body);font-size:.9rem;font-weight:600;margin:0 0 .5rem}
.filters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.filters a{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line-2);border-radius:999px;font-size:.9rem}
.filters a.active,.filters a:hover{background:var(--walnut);color:var(--mount);border-color:var(--walnut)}
@media (min-width:900px){.filters ul{display:block}.filters li{margin:.1rem 0}.filters a{border:0;border-radius:0;padding:.35rem 0;font-family:var(--font-display);font-size:1.1rem}
  .filters a.active,.filters a:hover{background:none;color:var(--brass-ink)}}
.field{margin-bottom:1rem}
.field label,label.field-label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.35rem;color:var(--walnut-2)}
.field .hint{display:block;font-size:.82rem;color:var(--umber);font-weight:400;margin-top:.3rem}
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=number],select,textarea{width:100%;min-height:48px;padding:.7rem .85rem;border:1px solid var(--line-2);
  border-radius:2px;background:var(--mount);color:var(--walnut);font:inherit;font-size:16px}
textarea{min-height:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--walnut);outline:none;box-shadow:0 0 0 3px rgba(166,124,46,.22)}
.grid2{display:grid;gap:0 1rem}
@media (min-width:600px){.grid2{grid-template-columns:1fr 1fr}}
.summary-row{display:flex;justify-content:space-between;gap:1rem;margin:.45rem 0;font-size:.95rem}
.summary-total{display:flex;justify-content:space-between;font-weight:600;font-size:1.15rem;border-top:1px solid var(--walnut);
  margin-top:.8rem;padding-top:.8rem}

/* ---------------------------------------------------------------- category page */
.mood-head{display:grid;gap:1.6rem;padding:1rem 0 2.4rem;align-items:center}
.mood-head .tile-wall{width:100%;max-width:340px;aspect-ratio:4/3}
.mood-head .tile-wall .sbox{width:auto;height:74%}
.mood-head .tile-wall .sbox--land{width:70%;height:auto}
.mood-head .tagline{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--walnut-2);margin:0 0 .6rem}
@media (max-width:859px){.mood-head .tile-wall{max-width:none;aspect-ratio:16/10}}
.back-link{display:inline-flex;gap:.35rem;align-items:center}
.back-link:hover{color:var(--walnut)}
.back-foot{margin:2.4rem 0 0}
.fields-row{padding:0 0 2.6rem}
.fields-row .section-head{margin-bottom:1.3rem}
.fields-row h2{font-size:clamp(1.5rem,4vw,2.1rem)}
/* field chips: real links to each sub-collection's own URL (crawlable), current one filled */
.field-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem}
.field-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.4rem .9rem;border:1px solid var(--line-2);
  border-radius:999px;font-size:.9rem;color:var(--walnut);background:var(--mount)}
.field-chip:hover{border-color:var(--walnut);color:var(--walnut)}
.field-chip.is-current{background:var(--walnut);border-color:var(--walnut);color:var(--mount)}
.field-chip.is-current .fcount{color:#CFC4B5}
@media (min-width:860px){.mood-head{grid-template-columns:1.1fr .9fr;gap:3rem}.mood-head .tile-wall{justify-self:end;max-width:420px}}

/* ---------------------------------------------------------------- product page */
.pdp{display:grid;gap:1.8rem;padding-bottom:1rem}
@media (min-width:900px){.pdp{grid-template-columns:1.05fr 1fr;gap:3.4rem;align-items:start}.pdp .gallery{position:sticky;top:96px}}
/* square at every width: the default landscape box (and the landscape photos) fill it without a tall
   empty wall above them on a phone, and the preview scales from cqmin the same way everywhere */
.pdp .gallery .main{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--plaster);overflow:hidden}
.pdp .gallery .main img.photo{width:100%;height:100%;object-fit:cover}
.pdp .gallery .main.is-live img.photo{display:none}
.pdp .gallery .main:not(.is-live) .live-wall{display:none}
.pdp .gallery .main .ph{width:48%;aspect-ratio:2/3;background:var(--line);box-shadow:var(--wall-shadow)}
.pdp .thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.2rem}
.pdp .thumbs button{flex:0 0 64px;height:64px;padding:0;border:1px solid var(--line);background:var(--plaster);cursor:pointer}
.pdp .thumbs button[aria-current="true"]{border-color:var(--walnut)}
.pdp .thumbs img{width:100%;height:100%;object-fit:cover}
.thumb-live{display:block;width:100%;height:100%;background:var(--plaster);position:relative}
.thumb-live::after{content:"";position:absolute;left:32%;top:18%;width:36%;height:64%;background:var(--art,none) center/cover,var(--line);
  box-shadow:2px 2px 0 rgba(43,33,27,.55),5px 7px 8px -3px rgba(43,33,27,.45)}
.thumb-live.is-land::after{left:16%;top:26%;width:66%;height:44%}
.pdp .info h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:.25rem}
.pdp .mood-link{font-size:.92rem;color:var(--brass-ink)}
.edition-switch{display:inline-flex;margin:.5rem 0 .3rem;border:1px solid var(--walnut);border-radius:2px;overflow:hidden}
.ed-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 1.05rem;font-size:.9rem;font-weight:600;color:var(--walnut)}
.ed-chip+.ed-chip{border-left:1px solid var(--walnut)}
.ed-chip:hover{background:var(--plaster);color:var(--walnut)}
.ed-chip[aria-current="page"]{background:var(--walnut);color:var(--mount)}
.edition-one{font-size:.92rem;color:var(--umber);margin:.2rem 0}
.sb-spec{margin:.1rem 0 .5rem;font-size:.93rem;font-weight:600;color:var(--walnut-2)}
.price-now{font-family:var(--font-display);font-size:2rem;font-weight:500;margin:.6rem 0 .2rem}
.price-now .was{font-family:var(--font-body);font-size:1rem;color:var(--umber);text-decoration:line-through;margin-left:.5rem}
.leadtime{display:flex;gap:.5rem;align-items:center;font-size:.93rem;color:var(--walnut-2);margin:.2rem 0 1rem}
.leadtime svg{flex:0 0 auto;color:var(--brass)}
.opt{border:0;padding:0;margin:0 0 1.3rem;min-width:0}
.opt legend{display:flex;gap:.5rem;align-items:baseline;padding:0;margin-bottom:.6rem;font-weight:600;font-size:.95rem;width:100%}
.opt legend output{font-weight:400;color:var(--umber)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:flex;flex-direction:column;align-items:flex-start;min-height:48px;padding:.5rem .8rem;background:var(--mount);
  border:1px solid var(--line-2);border-radius:2px;cursor:pointer;font:inherit;color:var(--walnut);text-align:left}
.chip small{font-size:.78rem;color:var(--umber)}
.chip[aria-pressed="true"]{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip small:empty{display:none}
.chip[hidden]{display:none}
.orient-chip{flex-direction:row;align-items:center;gap:.6rem;font-size:.93rem;min-width:8.5rem}
.orient-ico{flex:0 0 auto;display:block;background:var(--walnut-2);opacity:.35;box-shadow:2px 2px 0 rgba(43,33,27,.25)}
.orient-ico--landscape{width:27px;height:18px}
.orient-ico--portrait{width:18px;height:27px;margin:0 4.5px}
.orient-ico--square{width:22px;height:22px;margin:0 2.5px}
.orient-chip[aria-pressed="true"] .orient-ico{opacity:1;background:var(--walnut)}
.edge-chip{flex-direction:row;align-items:center;gap:.55rem;font-size:.93rem}
.edge-sw{flex:0 0 auto;width:22px;height:30px;background:var(--sw,#2B211B) center/cover;
  box-shadow:inset 0 0 0 1px rgba(43,33,27,.25),2px 2px 0 rgba(43,33,27,.35)}
.edge-sw.is-wrap{background:linear-gradient(90deg,transparent 55%,rgba(20,14,10,.45) 55%),var(--sw) right center/auto 100%}
.swatches{display:flex;flex-wrap:wrap;gap:.7rem}
.swatch{width:44px;height:44px;border-radius:50%;border:1px solid rgba(43,33,27,.25);cursor:pointer;padding:0;
  background:var(--sw,#8b6b4a) center/cover;box-shadow:inset 0 0 0 3px var(--mount)}
.swatch[aria-pressed="true"]{outline:2px solid var(--brass);outline-offset:2px}
.swatch:disabled{opacity:.35;cursor:not-allowed}
.glass-list{display:grid;gap:.5rem}
.glass-opt{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .85rem;border:1px solid var(--line-2);background:var(--mount);cursor:pointer}
.glass-opt input{margin-top:.25rem;accent-color:var(--walnut);width:18px;height:18px;min-height:0}
.glass-opt small{display:block;color:var(--umber);font-size:.84rem}
.glass-opt:has(input:checked){border-color:var(--walnut)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;font-size:.92rem;margin:0 0 1.2rem;padding:.8rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec dt{color:var(--umber)}
.spec dd{margin:0}
.upload{display:block;border:1px dashed var(--line-2);background:var(--mount);padding:1rem;cursor:pointer;margin-bottom:1.2rem}
.upload:hover,.upload:focus-within{border-color:var(--walnut)}
.upload input{display:block;width:100%;margin-top:.6rem;font-size:.9rem;min-height:0;border:0;padding:0;background:none}
.upload .preview{display:none;margin-top:.8rem;max-width:140px;box-shadow:var(--wall-shadow)}
.upload .preview.show{display:block}
.upload .err{color:var(--danger);font-size:.88rem;margin:.5rem 0 0}
.variant-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.variant-chip{min-height:44px;padding:.5rem .9rem;border:1px solid var(--line-2);background:var(--mount);border-radius:2px;
  cursor:pointer;font:inherit;font-weight:500;color:var(--walnut)}
.variant-chip.active{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.variant-chip.oos{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);background:var(--mount);border-radius:2px}
.qty button{width:44px;height:46px;border:0;background:none;font-size:1.15rem;cursor:pointer;color:var(--walnut)}
.qty input,.qty .li-qty{width:40px;min-height:0;border:0;padding:0;text-align:center;font-weight:600;background:none}
.buy-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0 .6rem}
.buy-row .btn{flex:1 1 140px}
@media (max-width:899px){
  .buy-row{position:sticky;bottom:0;z-index:30;background:var(--paper);margin:1rem calc(-1 * var(--gutter)) 0;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-wrap:nowrap}
  .buy-row .qty{display:none}
  .buy-row .btn{min-height:50px;padding-left:.8rem;padding-right:.8rem}
}
.buy-price{display:none}
@media (max-width:899px){.buy-price{display:block;font-family:var(--font-display);font-size:1.25rem;white-space:nowrap;margin-right:.2rem}}
.assure{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem;font-size:.9rem;color:var(--walnut-2)}
.assure li{padding-left:1.1rem;position:relative}
.assure li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border:1px solid var(--brass)}
.story{background:var(--mount);border-left:2px solid var(--brass);padding:1.2rem 1.3rem;margin-top:1.4rem}
.story h2{font-size:1.5rem}
.story p{font-family:var(--font-display);font-size:1.12rem;line-height:1.55;margin:0}
.answer-box{background:var(--mount);border-left:2px solid var(--brass);padding:.8rem 1rem;margin:.8rem 0;font-size:.97rem}
.faq-item{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq-item summary{font-weight:600;cursor:pointer}
.stock-off{color:var(--danger);font-weight:600}

/* ---------------------------------------------------------------- cart + checkout */
.cart-layout,.checkout-layout{display:grid;gap:1.4rem;align-items:start}
@media (min-width:900px){.cart-layout,.checkout-layout{grid-template-columns:1fr 370px;gap:2rem}
  .checkout-layout aside{position:sticky;top:96px}}
.line-item{display:grid;grid-template-columns:76px 1fr;gap:.4rem 1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.line-item:first-child{padding-top:0}
.li-art{display:flex;flex-direction:column;gap:.4rem}
.li-img{width:76px;height:76px;object-fit:cover;background:var(--plaster)}
.li-artwork{width:76px}
.li-artwork img{width:76px;height:76px;object-fit:cover;box-shadow:2px 2px 0 rgba(43,33,27,.4)}
.li-artwork small{display:block;font-size:.74rem;color:var(--umber);text-align:center}
.li-name{font-family:var(--font-display);font-size:1.12rem;line-height:1.2}
.li-meta{font-size:.87rem;color:var(--umber);margin:.15rem 0 .5rem}
.li-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.li-remove{background:none;border:0;padding:.4rem 0;color:var(--danger);font:inherit;font-size:.86rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pay-option{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid var(--line-2);background:var(--mount);cursor:pointer;margin-bottom:.6rem}
.pay-option input{width:20px;height:20px;min-height:0;margin-top:.15rem;accent-color:var(--walnut)}
.pay-option.active,.pay-option:has(input:checked){border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.pay-option strong{display:block}
.pay-option span{font-size:.9rem;color:var(--umber)}
.pay-off{border:1px solid var(--line-2);border-left:3px solid var(--brass);background:var(--mount);padding:1rem 1.1rem}
.pay-off p{margin:.3rem 0 .8rem}
.loc-btn{display:flex;width:100%}
.checkout-steps h2{font-size:1.45rem;margin-bottom:.9rem}

/* ---------------------------------------------------------------- order page */
.order-head{padding:1rem 0 1.4rem}
.order-head h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.track{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:0}
.track li{position:relative;padding:0 0 1.2rem 2rem;color:var(--umber)}
.track li::before{content:"";position:absolute;left:0;top:.35rem;width:.9rem;height:.9rem;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper)}
.track li::after{content:"";position:absolute;left:.44rem;top:1.35rem;bottom:.1rem;border-left:1px solid var(--line-2)}
.track li:last-child::after{display:none}
.track li.done{color:var(--walnut)}
.track li.done::before{background:var(--brass);border-color:var(--brass)}
.track li.done::after{border-color:var(--brass)}
.track li.now{color:var(--walnut);font-weight:600}
.track li.now::before{background:var(--walnut);border-color:var(--walnut);box-shadow:0 0 0 4px rgba(166,124,46,.25)}
@media (min-width:760px){
  .track{grid-template-columns:repeat(5,1fr)}
  .track li{padding:1.6rem .5rem 0 0}
  .track li::before{top:0}
  .track li::after{left:1rem;right:0;top:.44rem;bottom:auto;border-left:0;border-top:1px solid var(--line-2)}
  .track li.done::after{border-color:var(--brass)}
}
.notice{background:var(--mount);border:1px solid var(--line);border-left:3px solid var(--brass);padding:1rem 1.1rem;margin:1rem 0}
.notice p{margin:.2rem 0 .7rem}
.order-grid{display:grid;gap:1.2rem}
@media (min-width:860px){.order-grid{grid-template-columns:1.2fr 1fr}}
.order-grid h2{font-size:1.3rem}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--walnut);color:#D9CFC1;margin-top:4rem;padding:3rem 0 1.5rem}
.site-footer .cols{display:grid;gap:2rem}
@media (min-width:760px){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h5{font-family:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--mount);margin:0 0 .7rem}
.site-footer a{display:block;color:#D9CFC1;padding:.3rem 0;font-size:.93rem}
.site-footer a:hover{color:var(--gilt)}
.footer-logo{height:34px;width:auto;margin-bottom:1rem}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;border-top:1px solid rgba(252,250,246,.16);
  margin-top:2.4rem;padding-top:1.2rem;font-size:.84rem;color:#B3A796}
.g-rating{display:inline-flex!important;gap:.4rem;align-items:center}
.g-stars{color:var(--gilt)}

/* ---------------------------------------------------------------- shop page (AJAX filters) */
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.shop-tools{display:flex;gap:.5rem;flex-wrap:wrap;flex:1 1 100%}
@media (min-width:900px){.shop-tools{flex:0 1 auto}}
.shop-search{display:flex;align-items:center;gap:.5rem;flex:1 1 200px;min-height:46px;padding:0 .8rem;border:1px solid var(--line-2);background:var(--mount)}
.shop-search input{border:0;min-height:44px;padding:0;background:none}
.shop-search input:focus{outline:none}
.shop-sort{flex:0 1 auto;width:auto;min-height:46px}
.shop-filter-toggle{min-height:46px}
.shop-layout{display:grid;gap:2rem}
.shop-filters{display:flex;flex-direction:column;gap:1.3rem}
.filter-block{border-top:1px solid var(--line-2);padding-top:.9rem}
.filter-block h4{font-family:var(--font-body);font-size:.9rem;font-weight:600;margin:0 0 .5rem}
.filter-cats{list-style:none;margin:0;padding:0}
.fcat,.fbrand,.froom{width:100%;display:flex;justify-content:space-between;gap:.5rem;padding:.5rem 0;background:none;border:0;
  font:inherit;font-size:.95rem;color:var(--walnut-2);cursor:pointer;text-align:left}
.fcat.active,.fbrand.active,.froom.active,.fcat:hover,.fbrand:hover,.froom:hover{color:var(--brass-ink);font-weight:600}
.fcount{color:var(--umber);font-size:.82rem;font-weight:400}
.filter-subcats{list-style:none;margin:0 0 .3rem .2rem;padding:0 0 0 .8rem;border-left:1px solid var(--line-2)}
.fcat--sub{font-size:.88rem;padding:.32rem 0}
.price-row{display:flex;align-items:center;gap:.4rem}
.price-row input{min-height:42px}
.fcheck{display:flex;align-items:center;gap:.5rem;font-size:.93rem;margin:.4rem 0;cursor:pointer}
.fcheck input{width:18px;height:18px;min-height:0;accent-color:var(--walnut)}
.brand-extra{display:none}
.filter-brands.expanded .brand-extra{display:block}
.brand-more{background:none;border:0;padding:.4rem 0;font:inherit;font-size:.86rem;font-weight:600;text-decoration:underline;cursor:pointer;color:var(--walnut)}
.shop-active{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.active-chip{border:1px solid var(--line-2);background:var(--mount);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.84rem;cursor:pointer}
#shop-results{min-height:200px;transition:opacity .15s}
#shop-results.loading-results{opacity:.45;pointer-events:none}
.shop-loadmore{display:flex;justify-content:center;margin-top:2rem}
.shop-loadmore[hidden]{display:none}
.filters-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.8rem}
.filters-head span{font-family:var(--font-display);font-size:1.3rem}
.filters-close{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--walnut);width:44px;height:44px}
.filters-backdrop{position:fixed;inset:0;background:rgba(28,24,21,.45);z-index:115;opacity:0;visibility:hidden;transition:opacity .2s}
.filters-backdrop.show{opacity:1;visibility:visible}
@media (max-width:899px){
  .shop-filters{position:fixed;top:0;right:0;bottom:0;width:86%;max-width:360px;background:var(--paper);z-index:120;
    padding:1rem 1.2rem 2rem;overflow:auto;transform:translateX(105%);transition:transform .25s ease}
  .shop-filters.open{transform:none}
}
@media (min-width:900px){
  .shop-layout{grid-template-columns:230px 1fr}
  .shop-filters{position:sticky;top:96px}
  .shop-filter-toggle,.filters-head,.filters-backdrop{display:none}
}

/* ---------------------------------------------------------------- chat assistant */
.chat-fab{position:fixed;right:16px;bottom:16px;z-index:88;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--walnut);color:var(--mount);box-shadow:0 10px 24px -10px rgba(28,24,21,.6),inset 0 0 0 2px var(--gilt);
  display:flex;align-items:center;justify-content:center}
.chat-fab:hover{background:var(--walnut-2)}
.chat-fab .fab-label{display:none}
body.pdp-page .chat-fab{bottom:86px}
@media (min-width:900px){body.pdp-page .chat-fab{bottom:24px}.chat-fab{right:24px;bottom:24px;width:58px;height:58px}}
.chat-panel{position:fixed;left:10px;right:10px;bottom:10px;z-index:95;height:min(72vh,560px);max-height:calc(100dvh - 80px);
  display:none;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--line-2);
  box-shadow:0 24px 50px -20px rgba(28,24,21,.5)}
.chat-panel.open{display:flex}
@media (min-width:600px){.chat-panel{left:auto;right:24px;bottom:94px;width:380px}}
.chat-head{position:relative;display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:var(--walnut);color:var(--mount)}
.chat-head .title{font-family:var(--font-display);font-size:1.15rem}
.chat-head .sub{font-size:.78rem;color:#CFC4B5}
.chat-close{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:0;color:var(--mount);font-size:1.6rem;cursor:pointer}
.chat-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.msg{max-width:86%;padding:.6rem .85rem;font-size:.93rem;line-height:1.45}
.msg.bot{align-self:flex-start;background:var(--mount);border:1px solid var(--line)}
.msg.user{align-self:flex-end;background:var(--walnut);color:var(--mount)}
.msg.note{align-self:center;color:var(--umber);font-size:.8rem;text-align:center}
.typing{color:var(--umber);font-style:italic}
.chat-cards{display:flex;flex-direction:column;gap:.5rem}
.chat-card{display:flex;gap:.6rem;align-items:center;padding:.5rem;background:var(--mount);border:1px solid var(--line)}
.chat-card img{width:48px;height:48px;object-fit:cover;background:var(--plaster)}
.chat-card .cc-name{font-weight:600;font-size:.88rem;line-height:1.25}
.chat-card .cc-price{font-size:.82rem;color:var(--umber)}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .8rem}
.chat-suggestions[hidden]{display:none}
.chat-chip{min-height:36px;background:var(--mount);color:var(--walnut);border:1px solid var(--line-2);border-radius:999px;font-weight:500}
.chat-chip:hover{background:var(--walnut);color:var(--mount)}
.chat-foot{display:flex;gap:.5rem;padding:.6rem;border-top:1px solid var(--line);background:var(--mount)}
.chat-foot input{flex:1;min-height:44px}
.chat-foot button{width:46px;min-height:44px;border:0;background:var(--walnut);color:var(--mount);cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ---------------------------------------------------------------- live shadow box preview (product page) */
/* The box always fills most of the preview so the art reads clearly (a true-to-scale wall made the
   small sizes look "zoomed out"). Sizes still grow visibly: the box's LONG edge (--lcm, the size's
   long side in cm) runs from 58% of the preview (45 cm) to 86% (120 cm), measured against the
   preview's shorter side (cqmin), so a landscape 60×40 and a portrait 40×60 look equally big and a
   landscape box never overflows the 4:5 phone preview. Portrait: long edge = height; landscape: width. */
.live-wall{position:absolute;inset:0;margin:0;background:linear-gradient(180deg,#EDE7DD,var(--plaster) 70%,#DCD2C3);
  container-type:size}
.live-wall .sbox-stage{--long:calc(((var(--lcm,60) - 45) / 75 * 28 + 58) * 1cqmin);
  position:absolute;left:50%;top:45%;height:var(--long);width:calc(var(--long) * 2 / 3);
  transform:translate(-50%,-50%);transition:height .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.live-wall .sbox-stage.is-land{width:var(--long);height:calc(var(--long) * 2 / 3);top:44%;margin-left:-3%}
.live-wall .sbox--3d{height:100%;width:100%}
.live-wall .console{position:absolute;left:14%;right:14%;bottom:0;height:6%;background:linear-gradient(180deg,#5A4636,#3A2C22);
  box-shadow:0 -1px 0 rgba(255,255,255,.2) inset,0 -8px 18px -10px rgba(43,33,27,.4)}
.live-cap{font-size:.88rem;margin:.55rem 0 0;color:var(--walnut)}
@media (prefers-reduced-motion:reduce){.live-wall .sbox-stage{transition:none}}
img.protect,.gallery img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* surface picker price add-on + "included" list */
.glass-opt .adds{font-style:normal;font-weight:500;color:var(--brass-ink,#7C5B1C);font-size:.85em;margin-left:.3rem}
.included{margin:.9rem 0 0;border-top:1px solid var(--line);padding-top:.7rem;font-size:.92rem}
.included summary{cursor:pointer;font-weight:600}
.included ul{margin:.5rem 0 0;padding-left:1.1rem;color:var(--umber,#6E6258)}
.included li{margin:.25rem 0}