/* ============================================================
   DaVinci Frames storefront
   A gallery wall, not a shop grid: art hangs in real mouldings on
   limewash plaster, and every piece carries a museum wall label.

   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);
  /* 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}}

*{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}
.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);gap:.4rem;z-index:60}
.searchbox input{flex:1;min-width:0;height:44px;border:1px solid var(--line-2);background:var(--mount);border-radius:2px;
  padding:0 .8rem;font:inherit;font-size:16px;color:var(--walnut)}
.searchbox button{width:44px;height:44px;border:0;background:var(--walnut);color:var(--mount);border-radius:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.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-dd-btn{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}
  .menu-toggle{display:none}
  .searchbox{display:flex;position:static;padding:0;border:0;background:none;width:220px}
  .searchbox input{height:40px}
  .searchbox button{height:40px;width:40px}
  .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: framed art */
/* A moulding (border) around a mount (padding) around the art, hung with a soft wall shadow. */
.framed{position:relative;display:block;background:var(--mount);border:clamp(6px,1.9vw,12px) solid var(--walnut);
  padding:clamp(8px,9%,30px);box-shadow:var(--hang-shadow)}
.framed img,.framed .art{width:100%;height:100%;object-fit:cover;box-shadow:0 0 0 1px rgba(43,33,27,.08),inset 0 0 0 1px rgba(43,33,27,.08)}
.framed.brass{border-color:var(--gilt);box-shadow:var(--hang-shadow),inset 0 0 0 1px rgba(124,91,28,.35)}
.framed.ebony{border-color:var(--ebony)}
.framed.thin{border-width:clamp(4px,1.1vw,7px)}
.art-empty{width:100%;height:100%;background:
  linear-gradient(160deg,rgba(166,124,46,.18),transparent 60%),var(--plaster)}

/* picture rail: a brass rail with cords dropping to each frame */
.hang{position:relative;display:flex;align-items:flex-start;gap:clamp(12px,3vw,26px);padding-top:0;margin-top:.5rem}
.hang::before{content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:0;height:3px;
  background:var(--brass);box-shadow:0 2px 2px rgba(43,33,27,.18)}
.piece{position:relative;flex:var(--w,1) 1 0;min-width:0;margin-top:var(--drop,24px)}
.piece::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--drop,24px));height:var(--drop,24px);
  border-left:1px solid var(--brass-ink)}
.piece .framed{aspect-ratio:var(--ratio,4/5)}
.piece:nth-child(1){--w:44;--drop:22px;--ratio:4/5}
.piece:nth-child(2){--w:31;--drop:48px;--ratio:1/1}
.piece:nth-child(3){--w:22;--drop:30px;--ratio:3/4}

/* museum wall label */
.wall-label{display:block;background:var(--mount);padding:.6rem .75rem .65rem;margin-top:.9rem;max-width:17rem;
  box-shadow:0 1px 2px rgba(43,33,27,.12);border-left:2px solid var(--brass)}
.wall-label .t{display:block;font-family:var(--font-display);font-size:1.12rem;line-height:1.15;color:var(--walnut)}
.wall-label .d{display:block;font-size:.84rem;color:var(--umber);line-height:1.4;margin-top:.2rem}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--plaster);overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;gap:2.2rem;padding-top:clamp(2rem,6vw,4.5rem);padding-bottom:clamp(2.4rem,6vw,4.5rem)}
.hero h1{max-width:12ch;margin-bottom:.35em}
.hero .lead{font-size:1.08rem;max-width:34rem;margin:0 0 1.5rem;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}}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:.9fr 1.1fr;align-items:center;gap:3rem}
  .hero .hang::before{left:0}
}

/* ---------------------------------------------------------------- sections */
section.block{padding:clamp(2.8rem,7vw,5.5rem) 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}

/* mood collections — a salon hang */
.mood-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.1rem;align-items:start}
.mood{display:block;color:inherit}
.mood .framed{aspect-ratio:4/5}
.mood:nth-child(4n+2) .framed{aspect-ratio:1/1;margin-top:1.6rem}
.mood:nth-child(4n+3) .framed{aspect-ratio:5/4}
.mood:nth-child(4n+4) .framed{aspect-ratio:3/4;margin-top:-1.2rem}
.mood:nth-child(3n+2) .framed{border-color:var(--gilt)}
.mood:nth-child(3n+3) .framed{border-color:var(--ebony)}
.mood:hover .wall-label .t{color:var(--brass-ink)}
@media (min-width:800px){.mood-wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem 2rem}}

/* 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 .framed{aspect-ratio:4/5;max-width:300px;border-color:var(--gilt)}
.own-photo .slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line-2);color:var(--umber);font-family:var(--font-display);font-size:1.15rem;padding:1rem;background:var(--paper)}
.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}.own-photo .framed{justify-self:center}}

/* 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 */
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1rem}
@media (min-width:760px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 1.6rem}}
@media (min-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard{display:flex;flex-direction:column;min-width:0}
.pcard .thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;
  background:var(--plaster);padding:13%}
.pcard .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:var(--hang-shadow);
  transition:transform .35s ease}
.pcard:hover .thumb img{transform:translateY(-3px)}
.pcard .thumb .ph{width:62%;aspect-ratio:4/5;background:var(--mount);border:8px solid var(--walnut);box-shadow:var(--hang-shadow)}
.pcard .badge{position:absolute;top:10px;left:10px;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:.8rem 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.1rem;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:.7rem;align-self:flex-start}
@media (max-width:520px){.pcard .add{width:100%;padding-left:.5rem;padding-right:.5rem;font-size:.84rem}}

/* ---------------------------------------------------------------- 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 .framed{aspect-ratio:5/4;max-width:420px;width:100%}
.mood-head .tagline{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--walnut-2);margin:0 0 .6rem}
@media (min-width:860px){.mood-head{grid-template-columns:1.1fr .9fr;gap:3rem}.mood-head .framed{justify-self:end}}

/* ---------------------------------------------------------------- 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}}
.pdp .gallery .main{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--plaster);padding:9%}
.pdp .gallery .main img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:var(--hang-shadow)}
.pdp .gallery .main .ph{width:60%;aspect-ratio:4/5;background:var(--mount);border:12px solid var(--walnut);box-shadow:var(--hang-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}
.pdp .info h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:.25rem}
.pdp .mood-link{font-size:.92rem;color:var(--brass-ink)}
.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}
.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(--hang-shadow);border:6px solid var(--walnut);background:var(--mount);padding:6px}
.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;border:4px solid var(--walnut);background:var(--mount);padding:3px}
.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{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,.fcat:hover,.fbrand:hover{color:var(--brass-ink);font-weight:600}
.fcount{color:var(--umber);font-size:.82rem;font-weight:400}
.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 frame preview (product page) */
.live-frame{margin:1.2rem 0 0}
.live-wall{display:flex;align-items:center;justify-content:center;min-height:clamp(260px,52vw,440px);
  padding:clamp(18px,5vw,40px);background:linear-gradient(180deg,var(--plaster),#ddd2c0)}
#live-framed{--moulding:var(--walnut);--ar:21/29.7;border-color:var(--moulding);transition:width .35s ease,border-color .25s ease;
  width:60%;padding:clamp(10px,7%,34px)}
#live-framed .art{aspect-ratio:var(--ar);height:auto}
.live-frame figcaption{font-size:.88rem;margin-top:.55rem;color:var(--ink)}
img.protect,.gallery img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}