/* Cool white layer — loaded last on every storefront page.
   Page     blue-grey white (--page) with white surfaces; content sits in rounded panels instead of hairline boxes.
   Type     one family (Manrope, self-hosted; Chinese falls back to PingFang / YaHei) for every page except the home page, which keeps its serif scheme.
            Sizes stay on a fixed scale: 12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48. No italics outside the home page.
   Radius   8 controls · 12 cards · 16 panels. Spacing 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   Motion   one curve (--ease), transform and opacity only, 300ms colour / 500ms movement, off under reduced motion.
   The home page (body[data-page=home]) only picks up colours, header, cards and footer from this file. */

/* ================================================================ base */
body:not([data-page=home]){background:var(--page)}
body:not([data-page=home]) main{min-height:50vh}
::selection{background:#d6e4f3;color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:8px 12px;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-md);font-size:14px;font-weight:600;transition:transform .3s var(--ease)}
.skip:focus{transform:translateY(80px)}

/* one typeface off the home page; nothing italic */
body:not([data-page=home]) .u-title,body:not([data-page=home]) .u-display,body:not([data-page=home]) .prose h2,
body:not([data-page=home]) h1,body:not([data-page=home]) h2,body:not([data-page=home]) h3{font-family:var(--font-sans);font-style:normal;letter-spacing:-.015em}
body:not([data-page=home]) .u-display{font-size:36px;line-height:40px;font-weight:600}
body:not([data-page=home]) .u-title{font-size:24px;line-height:32px;font-weight:600}
body:not([data-page=home]) .u-label{font-size:14px;line-height:20px;font-weight:600;letter-spacing:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ================================================================ controls */
.btn{border-radius:var(--radius-md);height:44px;padding:0 20px;font-size:14px;font-weight:600;letter-spacing:0;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease),box-shadow .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--on-ink)}
.btn-primary:hover{background:var(--ink-3);box-shadow:0 6px 16px rgba(19,26,35,.16)}
.btn-outline{border:1px solid var(--hairline-2);background:var(--paper);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.btn-sm{height:36px;padding:0 12px;font-size:14px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.chip{border-radius:var(--radius-pill);height:36px;padding:0 16px;border:1px solid var(--hairline-2);background:var(--paper);color:var(--ink-soft);font-size:14px;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.chip:hover{border-color:var(--ink-soft);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.input,select.input,.field textarea{border-radius:var(--radius-md);border:1px solid var(--hairline-2);background:var(--paper);font-size:14px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.input:hover,.field textarea:hover{border-color:var(--rule)}
.input:focus,.field textarea:focus,select:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(59,110,165,.14);outline:none}
.input:user-invalid,.field textarea:user-invalid{border-color:var(--sale)}
.field label{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-soft);letter-spacing:0;text-transform:none}
.qty{border-radius:var(--radius-md);border:1px solid var(--hairline-2);background:var(--paper);height:44px}
.check i{border-radius:4px;border-color:var(--rule)}
.check i[data-on]{background:var(--ink);border-color:var(--ink)}
.toast{border-radius:var(--radius-lg);font-size:14px}
.toast[data-ok=false]{background:var(--sale)}
.stars{color:var(--ink)}

/* ================================================================ header (all pages) */
.promo{background:var(--wabi);color:var(--ink-soft)}
.promo .msg b{color:var(--ink);font-weight:600}
.promo .count{color:var(--ink-soft)}
.hdr{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--hairline)}
body:not([data-page=home]) .hdr{position:sticky;top:0;z-index:30}
.hdr-top .search{border-radius:var(--radius-pill)}
body:not([data-page=home]) .hdr-top .search{background:var(--canvas);border-color:transparent;height:40px;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
body:not([data-page=home]) .hdr-top .search:focus-within{background:var(--paper);border-color:var(--hairline-2)}
.suggest{border-radius:var(--radius-lg);overflow:hidden;top:48px}
.hdr .wordmark::after{background:var(--oxblood)}
.hdr-icons .lang{border-radius:var(--radius-pill);border-color:var(--hairline-2);padding:6px 10px}
.hdr-icons a,.hdr-icons button{transition:color .3s var(--ease),opacity .3s var(--ease)}
.hdr-icons a:hover{color:var(--oxblood)}
.hdr-icons .bag b{background:var(--oxblood)}
.nav a{color:var(--ink-soft);border-bottom-width:2px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--oxblood)}
body:not([data-page=home]) .hdr-top{padding-top:16px;padding-bottom:8px}
body:not([data-page=home]) .nav{padding-bottom:12px}

/* ================================================================ product cards (all pages) */
.p .art{border-radius:var(--radius-lg);background:var(--canvas);isolation:isolate}
.p .art img{transition:transform .5s var(--ease),opacity .3s var(--ease)}
.p:hover .art img{transform:scale(1.035)}
.p .label{padding-top:12px;gap:2px}
.p-name{font-family:var(--font-sans);font-style:normal;font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.005em}
.p-name a:hover{color:var(--oxblood)}
.p-meta{font-size:14px;line-height:20px}
.p-no{color:var(--placeholder);margin-left:8px}
.p-price{font-size:16px;line-height:24px;font-weight:600;margin-top:4px;gap:8px}
.p-price .sale{color:var(--sale)}
.ph-empty{position:absolute;inset:0;background:var(--canvas)}
.w-title{font-family:var(--font-sans);font-style:normal;font-size:16px;line-height:24px;font-weight:500}

/* ================================================================ feature strip (all pages); the footer stays dark slate with its WebGL texture */
.ftr .input{border-radius:var(--radius-md)}
.ftr .btn{border-radius:var(--radius-md)}
.feat{background:var(--page);border-top:0;padding:64px 32px;gap:16px}
.feat>div{background:var(--paper);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--hairline)}
.feat svg{color:var(--oxblood);width:40px;height:40px}
.feat h3{font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:600;font-style:normal}
.feat p{font-size:14px;line-height:20px}
.chat{border-radius:var(--radius-pill);box-shadow:var(--shadow-float);background:var(--ink)}

/* ================================================================ shared page furniture (not home) */
body:not([data-page=home]) .sec{padding:64px 32px}
body:not([data-page=home]) .sec-head{margin-bottom:24px}
.page-title{padding:48px 32px 24px;text-align:left;max-width:1280px;margin:0 auto}
body:not([data-page=home]) h1.page-title{font-size:36px;line-height:40px}
.crumbs{color:var(--muted);font-size:14px;line-height:20px}
.crumbs a{color:var(--ink-soft)}.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--placeholder)}
.panel-card{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px}

/* ================================================================ collection */
body[data-page=collection] .hero{background:transparent;border:0;padding:48px 32px 24px;max-width:1440px;margin:0 auto}
body[data-page=collection] .hero p{color:var(--muted);font-size:16px;line-height:24px;max-width:640px}
.tb{max-width:1376px;margin:0 auto;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--paper);padding:8px 12px 8px 16px}
.tb .views button{border-radius:var(--radius-md);width:32px;height:32px;transition:background-color .3s var(--ease),color .3s var(--ease)}
.tb .views button:hover{background:var(--canvas)}
.tb .views button[aria-pressed=true]{background:var(--canvas);color:var(--ink)}
.tb select.input{border-radius:var(--radius-md)!important;border-color:var(--hairline-2)!important;height:36px!important}
.tb .count{font-size:14px}
.cat{max-width:1440px;margin:0 auto;grid-template-columns:240px 1fr;gap:32px;padding:24px 32px 64px}
.sb{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px;align-self:start;position:sticky;top:132px;max-height:calc(100vh - 148px);overflow:auto;gap:24px}
.sb .grp h4{font-size:14px;line-height:20px;font-weight:600}
.sb .check{font-size:14px;padding:4px 0;color:var(--ink-soft)}
.sb .check:hover{color:var(--ink)}
.cat .chips{margin-bottom:24px}
.cat .chips .chip{height:32px;padding:0 12px}
.grid{gap:40px 24px}
.grid.masonry{column-gap:24px}
.pager{gap:8px}
.pager a{min-width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--radius-md);border:1px solid transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.pager a:hover{background:var(--paper);border-color:var(--hairline-2)}
.pager a[aria-current]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* ================================================================ product */
.pd{max-width:1320px;margin:0 auto;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;padding:32px 32px 64px;align-items:start}
.pd-gallery{position:sticky;top:132px}
.pd-main{border-radius:var(--radius-xl);background:var(--paper);border:1px solid var(--hairline);aspect-ratio:4/5}
.pd-main img{object-fit:contain;padding:32px}
.pd-thumbs{gap:8px;margin-top:12px}
.pd-thumbs button{width:72px;height:72px;border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--paper);transition:border-color .3s var(--ease)}
.pd-thumbs button:hover{border-color:var(--rule)}
.pd-thumbs button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pd-thumbs img{border-radius:6px}
.pd-info{padding-top:8px}
.pd-title{font-family:var(--font-sans);font-style:normal;font-weight:600;font-size:36px;line-height:40px;letter-spacing:-.02em;margin-bottom:8px}
.pd-label{font-size:14px;color:var(--muted)}
.pd-price{font-size:30px;line-height:36px;font-weight:600;margin:16px 0 4px;letter-spacing:-.01em}
.pd-price s{font-size:18px}
.pd-price .sale{color:var(--sale)}
.pd-vmeta{font-size:14px}.pd-vnote{font-size:14px;margin-bottom:24px}
.pd-opt{margin-bottom:24px}
.pd-opt .u-label{font-size:14px;font-weight:600;margin-bottom:8px}
.pd-opt .opts{gap:8px}
.pd-opt .chip{border-radius:var(--radius-md);height:40px}
.pd-scale{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:16px;margin:0 0 24px}
.pd-buy{gap:12px;margin:24px 0}
.pd-buy .btn{height:48px}
.pd-buy .qty{height:48px}
.pd-buy [data-wish]{width:48px;padding:0;font-size:18px}
.pd-perks{list-style:none;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--paper);padding:16px 20px;gap:8px;font-size:14px}
.pd-perks li{position:relative;padding-left:24px}
.pd-perks li::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:6px;border-left:2px solid var(--oxblood);border-bottom:2px solid var(--oxblood);transform:rotate(-45deg)}
.pd-acc{border-bottom:1px solid var(--hairline);padding:16px 0}
.pd-acc summary{font-size:16px;font-weight:600;line-height:24px}
.pd-acc summary::after{transition:transform .3s var(--ease)}
.pd-acc p{font-size:14px;line-height:22px}
.pd-dl{font-size:14px}
.reviews{gap:16px}
.rev{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px}
.rev .pic{border-radius:var(--radius-md)}
body[data-page=product] #reviews,body[data-page=product] main>.sec{max-width:1320px;margin:0 auto}
body[data-page=product] #reviews .pd-acc summary.btn{border-radius:var(--radius-md)}
.rform{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px}

/* ================================================================ cart · checkout · order */
.cart,.co{max-width:1280px;margin:0 auto;gap:32px;padding:0 32px 64px}
.cart>div:first-child:not(.empty),.co>div:first-child{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:8px 24px}
.co>div:first-child{padding:8px 24px 24px}
.line{border-bottom-color:var(--hairline)}
.line:last-child{border-bottom:0}
.line .pic{border-radius:var(--radius-md)}
.line .rm{font-size:14px;text-decoration:none;color:var(--muted)}
.line .rm:hover{color:var(--sale)}
.summary,.co-sum{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px;top:132px}
.summary h2,.co-sum h2{font-size:18px;line-height:28px;font-weight:600}
.summary .btn,.co-sum .btn{width:100%;height:48px}
.empty{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:64px 24px}
.co h2.u-label{font-size:18px;line-height:28px;margin:24px 0 12px}
.co .pay label{border-radius:var(--radius-md);border-color:var(--hairline-2);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.co .pay label:hover{border-color:var(--rule)}
.co .pay label:has(input:checked){border-color:var(--ink);background:var(--canvas)}
.co-sum .row img,.order .row img{border-radius:6px}
.order{max-width:1080px}
.order .ok{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:48px 24px}
.order .cols>div{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px}

/* ================================================================ account */
.acc{max-width:1280px;padding:0 32px 64px}
.auth{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:32px;max-width:440px}
.auth .tabs{background:var(--canvas);border-radius:var(--radius-pill);padding:4px;gap:4px}
.auth .tabs .chip{flex:1;border:0;background:transparent;justify-content:center}
.auth .tabs .chip[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(19,26,35,.12)}
.stat,.panel{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.stat b{font-family:var(--font-sans);font-weight:600;font-size:30px;line-height:36px;letter-spacing:-.02em}
.stat span{font-size:12px;letter-spacing:0;text-transform:none}
.panel h3{font-size:16px;line-height:24px}
.order-list .pics img{border-radius:4px}
.dash-head .u-display{font-size:30px!important;line-height:36px}

/* ================================================================ about · faq · contact */
.about-hero{background:transparent;border:0;padding:96px 32px 64px}
.about-hero h1{font-size:48px;line-height:1;font-weight:600;letter-spacing:-.025em;max-width:680px;margin:0 auto 16px}
.about-hero p{font-size:18px;line-height:28px;color:var(--ink-soft);max-width:600px}
.about-hero .u-label{color:var(--oxblood)!important}
body[data-page=about] .split{max-width:1280px;margin:0 auto 32px;padding:0 32px;gap:32px}
body[data-page=about] .split .ph{border-radius:var(--radius-xl)}
body[data-page=about] .split .txt{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:48px}
.prose{color:var(--ink-soft);font-size:16px;line-height:26px}
.prose h2{font-size:24px;line-height:32px;font-weight:600;color:var(--ink)}
body[data-page=faq] .page-title,body[data-page=contact] .page-title{max-width:800px;text-align:left}
body[data-page=faq] .prose,body[data-page=contact] .prose{max-width:800px;padding:0 32px 64px}
.faq details{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:0;margin-bottom:8px;transition:border-color .3s var(--ease)}
.faq details[open]{border-color:var(--hairline-2)}
.faq summary{padding:16px 48px 16px 20px;position:relative;font-size:16px;line-height:24px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:22px;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq details p{padding:0 20px 16px;margin:0}
.faq h2{margin:32px 0 12px}
body[data-page=contact] .prose>p:first-child{text-align:left!important;font-size:16px}
body[data-page=contact] form[data-contact]{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px;max-width:none!important;margin:24px 0 0!important}
body[data-page=contact] .row2{text-align:left!important;margin-top:24px!important;gap:16px}
body[data-page=contact] .row2>div{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:20px}
body[data-page=contact] .row2 h2{font-size:16px!important;line-height:24px;margin:0 0 4px}

/* ================================================================ custom portraits */
.cu-hero{background:transparent;border:0;max-width:1320px;margin:0 auto;gap:32px;padding:32px}
.cu-hero .txt{padding:32px 0}
.cu-hero h1{font-size:48px!important;line-height:1!important;font-weight:600;letter-spacing:-.025em}
.cu-hero .u-label{color:var(--oxblood)!important}
.cu-hero .pic{border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin:0;justify-self:end}
.cu-hero .facts b{font-family:var(--font-sans);font-weight:600;font-size:24px;line-height:32px}
.cu-hero .facts span{font-size:12px;letter-spacing:0;text-transform:none}
.steps{gap:16px}
.step{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px}
.step b{font-family:var(--font-sans);font-weight:600;font-size:30px;line-height:36px;color:var(--oxblood)}
.cfg{max-width:1320px;margin:0 auto;gap:32px;padding:32px 32px 64px}
.cfg>div:first-child{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px 32px 32px}
.cfg h2.u-label{font-size:18px;line-height:28px;margin:32px 0 12px}
.cfg h2.u-label:first-child{margin-top:8px}
.style{border-radius:var(--radius-lg);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.style:hover{border-color:var(--rule)}
.style[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.drop{border-radius:var(--radius-lg);border-color:var(--rule);background:var(--canvas);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.drop:hover,.drop.over{border-color:var(--focus-ring);background:#eef3f9}
.drop svg{stroke:var(--oxblood)}
.cfg-sum{background:var(--paper);border-radius:var(--radius-xl);top:132px}
.cfg-sum .btn{width:100%;height:48px}
.ex img{border-radius:var(--radius-lg)}

/* ================================================================ 404 */
.nf{max-width:680px;margin:0 auto;padding:96px 32px;text-align:center}
.nf b{display:block;font-size:96px;line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--hairline-2);margin-bottom:24px}
.nf h1{font-size:30px;line-height:36px;font-weight:600;margin-bottom:12px}
.nf p{color:var(--muted);margin-bottom:24px}
.nf .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ================================================================ phones */
@media (max-width:900px){
  body:not([data-page=home]) .sec{padding:48px 16px}
  .page-title,body[data-page=collection] .hero{padding:32px 16px 16px}
  body:not([data-page=home]) .u-display,body:not([data-page=home]) h1.page-title{font-size:30px;line-height:36px}
  .tb{margin:0 16px;padding:8px 12px}
  .cat{grid-template-columns:minmax(0,1fr);padding:16px 16px 48px;gap:16px}
  .sb{position:fixed;top:15vh;max-height:none;border-radius:16px 16px 0 0}
  .grid{gap:32px 12px}
  .pd{grid-template-columns:minmax(0,1fr);padding:16px 16px 48px;gap:24px}
  .pd-gallery{position:static}
  .pd-main img{padding:16px}
  .pd-title{font-size:30px;line-height:36px}
  .pd-price{font-size:24px;line-height:32px}
  .pd-buy{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .cart,.co,.acc{padding:0 16px 48px;gap:16px}
  .cart>div:first-child:not(.empty),.co>div:first-child{padding:4px 16px}
  .co>div:first-child{padding:4px 16px 16px}
  .auth{padding:24px 16px}
  .about-hero{padding:64px 16px 48px}
  .about-hero h1{font-size:36px;line-height:40px}
  body[data-page=about] .split{padding:0 16px;gap:16px}
  body[data-page=about] .split .txt{padding:24px}
  body[data-page=faq] .prose,body[data-page=contact] .prose{padding:0 16px 48px}
  .cu-hero{padding:16px;gap:16px}
  .cu-hero .txt{padding:16px 0}
  .cu-hero h1{font-size:36px!important}
  .cu-hero .pic{margin:0}
  .cfg{padding:16px 16px 48px;gap:16px}
  .cfg>div:first-child{padding:16px}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr));padding:48px 16px;gap:12px}
  .feat>div{padding:16px}
  .nf{padding:64px 16px}
}
@media (max-width:480px){.feat{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .p:hover .art img{transform:none}
  .btn:active{transform:none}
  *{transition-duration:.01ms!important}
}

/* ================================================================ LUCAI wordmark + type (all pages) */
html,body,html[lang^="zh"] body{font-family:var(--font-sans);font-feature-settings:"ss01" off}
/* wordmark: large, medium weight, very wide tracking — reads as a house name; a fine rule under it instead of a dot.
   It eases a little smaller once the page scrolls (transform only, so the header never changes height). */
.wordmark{font-family:var(--font-sans);font-weight:500;font-size:36px;line-height:44px;letter-spacing:.5em;text-transform:uppercase;padding-left:.5em;display:inline-block;transform-origin:50% 50%;transition:transform .5s var(--ease),letter-spacing .5s var(--ease)}
.hdr .wordmark::after{width:36px;height:1px;bottom:-6px;border-radius:0;opacity:.8;background:currentColor}
.hdr .wordmark:hover{letter-spacing:.54em}
.hdr.is-scrolled .wordmark{transform:scale(.82)}
.p-price,.pd-price,.summary .row,.co-sum .row,.stat b{font-variant-numeric:tabular-nums}
@media (max-width:900px){.wordmark{font-size:24px;line-height:32px;letter-spacing:.4em;padding-left:.4em}.hdr .wordmark::after{width:24px;bottom:-4px}.hdr .wordmark:hover{letter-spacing:.4em}.hdr.is-scrolled .wordmark{transform:none}}

/* ================================================================ fixes after review in the browser */
.p{background:transparent}
.sb{scrollbar-width:thin;scrollbar-color:var(--hairline-2) transparent}
.rp{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.rp img{border-radius:var(--radius-md)}
.rp-q{font-family:var(--font-sans);font-style:normal;font-size:14px;line-height:20px}
/* sticky side panels follow the header: when it slides away on scroll-down they move up with it */
.sb,.pd-gallery,.summary,.co-sum,.cfg-sum{transition:top .5s var(--ease)}
body:has(.hdr.is-hidden) .sb,body:has(.hdr.is-hidden) .pd-gallery,body:has(.hdr.is-hidden) .summary,body:has(.hdr.is-hidden) .co-sum,body:has(.hdr.is-hidden) .cfg-sum{top:24px}
body:has(.hdr.is-hidden) .sb{max-height:calc(100vh - 48px)}
@media (max-width:1100px) and (min-width:901px){
  .cart,.co{grid-template-columns:1fr}
  .summary,.co-sum{position:static}
  .cat{grid-template-columns:200px 1fr;gap:24px}
  body:has([data-view="4"][aria-pressed=true]) .grid{--cols:3!important}   /* only the default 4-up view drops to 3; a 2-up choice stays */
}
@media (max-width:900px){
  .line{grid-template-columns:72px minmax(0,1fr);gap:8px 16px;align-items:start}
  .line .pic{width:72px;height:72px;grid-row:1/span 3}
  .line>*:not(.pic){grid-column:2}
  .line .qty{height:40px;justify-self:start}
}

/* ================================================================ Shop All dropdown (all pages) */
.nav-dd{position:relative;display:flex}
.nav-dd-btn::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)}
.nav-dd:hover .nav-dd-btn::after,.nav-dd:focus-within .nav-dd-btn::after{transform:translateY(3px) rotate(-135deg)}
.nav-dd.is-here>.nav-dd-btn{color:var(--ink);border-bottom-color:var(--oxblood)}
.nav-menu{position:absolute;top:100%;left:50%;z-index:50;display:grid;grid-template-columns:repeat(2,minmax(180px,auto));gap:4px 32px;padding:24px;margin-top:8px;
  background:var(--paper);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s .3s;text-align:left}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}   /* keeps the menu open while the pointer crosses the gap */
.nav-dd:hover .nav-menu,.nav-dd:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s}
.nav-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-h{font-size:12px;line-height:16px;font-weight:600;color:var(--muted);margin:0 0 8px 12px;text-transform:none;letter-spacing:0}
.nav-menu a,.hdr .nav-menu a{display:block;padding:8px 12px;border:0!important;border-radius:var(--radius-md);color:var(--ink)!important;font-size:14px;line-height:20px;white-space:nowrap;letter-spacing:0;text-transform:none;
  transition:background-color .3s var(--ease)}
.nav-menu a:hover,.nav-menu a[aria-current]{background:var(--canvas)}
.nav-all{grid-column:1/-1;border-top:1px solid var(--hairline);margin-top:12px;padding-top:12px}
.nav-all a{font-weight:600}
@media (max-width:900px){
  .nav-dd{display:block;width:100%}
  .nav-dd-btn::after{display:none}
  .nav-menu{position:static;display:flex;flex-direction:column;gap:0;opacity:1;visibility:inherit;transform:none;margin:0 0 8px;padding:4px 0 8px 12px;border:0;box-shadow:none;background:transparent;border-radius:0;transition:none}
  .nav-menu::before{display:none}
  .nav-h{margin:12px 0 4px}
  .nav .nav-menu a,.hdr .nav-menu a{font-family:var(--font-sans);font-size:16px;line-height:24px;padding:8px 0;border-radius:0;font-weight:400}
  .nav-all{border:0;margin:0;padding:0}
}

/* ================================================================ home: six category tiles (the bento keeps its 4-tile layout when there are 4 or fewer) */
.bento:has(.tile:nth-child(5)){grid-template-areas:"a a b c" "d e f f";grid-auto-rows:280px}
.bento:has(.tile:nth-child(5)) .tile:nth-child(5){grid-area:e}
.bento:has(.tile:nth-child(6)) .tile:nth-child(6){grid-area:f}
.bento .tile{border-radius:var(--radius-lg)}
@media (max-width:900px){.bento:has(.tile:nth-child(5)){grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d e" "f f";grid-auto-rows:180px}}
/* phone drawer: gallery.css hides the ready nav with a stronger selector than the one that opens it, so the open state never showed */
@media (max-width:900px){html.js body.menu-open .nav.is-ready{visibility:visible}}
@media (max-width:900px){
  .nav-dd:hover .nav-menu,.nav-dd:focus-within .nav-menu{transform:none}
  .nav>a,.nav .nav-dd-btn{font-family:var(--font-sans);font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.01em}
}

/* ================================================================ review photos */
.rv-opt{color:var(--muted);font-weight:400}
.rv-photos{display:flex;flex-wrap:wrap;gap:8px}
.rv-thumb,.rv-add{position:relative;width:88px;height:88px;border-radius:var(--radius-md);overflow:hidden}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-thumb button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(19,26,35,.72);color:#fff;font-size:16px;line-height:24px;text-align:center;transition:background-color .3s var(--ease)}
.rv-thumb button:hover{background:var(--sale)}
.rv-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px dashed var(--rule);background:var(--canvas);color:var(--ink-soft);font-size:12px;line-height:16px;cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.rv-add:hover,.rv-add:focus-within{border-color:var(--focus-ring);background:#eef3f9}
.rv-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.rv-add svg{width:22px;height:22px}
.rv-add[hidden]{display:none}
.rv-hint{color:var(--muted);margin-top:8px}
.rev-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px}
.rev-pics a{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--canvas)}
.rev-pics img,.rev .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.rev-pics a:hover img,.rev a.pic:hover img{transform:scale(1.04)}
.rev a.pic{display:block}

/* ================================================================ home v13: category tiles, shop by room, reviews, light */
/* category tiles: a soft shade along the bottom with the name in the site's sans, instead of white sticky-note labels */
body[data-page=home] .bento .tile{isolation:isolate;transition:box-shadow .6s var(--ease)}
body[data-page=home] .bento .tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(12,16,22,.66) 0%,rgba(12,16,22,.18) 38%,rgba(12,16,22,0) 62%)}
body[data-page=home] .bento .tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.16),transparent 60%)}
body[data-page=home] .bento .tile:hover::before{opacity:1}
body[data-page=home] .bento .tile:hover{box-shadow:0 28px 56px -28px rgba(19,26,35,.55)}
.tile-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.tile-cap b{font-family:var(--font-sans);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.01em}
.tile-cap small{font-size:13px;line-height:20px;opacity:.88;white-space:nowrap}
.tile-cap i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.tile:hover .tile-cap i{transform:translateX(4px)}
.bento .tile:nth-child(1) .tile-cap{left:28px;bottom:26px}.bento .tile:nth-child(1) .tile-cap b{font-size:26px}
.bento .tile .ph{background-position:center 42%}

/* light that follows the pointer on the "three ways" cards */
body[data-page=home] .line-card{position:relative;isolation:isolate}
body[data-page=home] .line-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(360px circle at var(--mx,50%) var(--my,30%),rgba(59,91,128,.10),transparent 65%)}
body[data-page=home] .line-card:hover::after{opacity:1}

/* Shop by room: picture stage (left) + rooms (right) inside the page width; both pinned while the page scrolls one room at a time.
   Smoothness: only clip-path / transform / opacity animate (no filter, no backdrop blur), the stage is its own compositing layer,
   and each room gets a long stretch of scroll so the picture never flips back and forth. */
body[data-page=home] .room{max-width:1520px;margin:0 auto;padding:0 40px;grid-template-columns:minmax(0,1fr) 420px;column-gap:72px;background:transparent;align-items:start}
body[data-page=home] .room .pic{position:relative;aspect-ratio:auto;height:min(calc(100vh - 196px),680px);min-height:420px;margin:40px 0;overflow:hidden;border-radius:var(--radius-lg);background:var(--canvas);box-shadow:0 30px 60px -36px rgba(19,26,35,.4);transform:translateZ(0);contain:paint}
body[data-page=home] .room .pic .ph{position:absolute;inset:0}
.room .layer{position:absolute;inset:0;background:var(--canvas) center/cover no-repeat;clip-path:inset(100% 0 0 0);transform:scale(1.06);backface-visibility:hidden;transition:clip-path 1.25s cubic-bezier(.65,0,.25,1),transform 1.6s cubic-bezier(.22,1,.36,1)}
.room .layer.is-on{clip-path:inset(0 0 0 0);transform:none}
.room .layer::before{content:"";position:absolute;inset:0;background:#0b0f14;opacity:0;pointer-events:none;transition:opacity 1.25s cubic-bezier(.65,0,.25,1)}
.room .layer.is-under::before{opacity:.42}
.room .layer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:linear-gradient(to bottom,rgba(10,14,20,.45),rgba(10,14,20,0) 26%)}
.room .layer.is-entering::after{opacity:1}
.room .stage-cap{position:absolute;left:20px;bottom:20px;z-index:5;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 10px 24px -12px rgba(19,26,35,.35);transition:transform .4s var(--ease)}
.room .stage-cap b{font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:-.01em}
.room .stage-cap span{font-size:13px;color:var(--muted)}
.room .stage-cap:hover{transform:translateY(-2px)}
.room .stage-n{position:absolute;right:20px;top:18px;z-index:5;font-size:12px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
body[data-page=home] .room .list{position:relative;height:min(calc(100vh - 196px),680px);min-height:420px;max-width:440px;margin:40px 0;padding:0;display:flex;flex-direction:column;justify-content:center}
.room .room-eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood)}
body[data-page=home] .room .list h2{margin:10px 0 8px}
.room .room-intro{max-width:36ch;margin:0 0 20px;color:var(--muted);font-size:15px;line-height:24px}
body[data-page=home] .room .list a{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--hairline);font-family:var(--font-sans);font-size:18px;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ink);opacity:.45;transform:none;transition:opacity .5s var(--ease),color .2s}
body[data-page=home] .room .list a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
body[data-page=home] .room .list a.is-active{opacity:1}
body[data-page=home] .room .list a.is-active::before{transform:scaleX(1)}
body[data-page=home] .room .list a:hover{opacity:1;color:var(--ink)}
.room .list a .th{width:48px;height:48px;border-radius:10px;background:var(--canvas) center/cover no-repeat;transition:transform .6s var(--ease)}
.room .list a.is-active .th{transform:scale(1.08)}
body[data-page=home] .room .list a small{font-family:var(--font-sans);font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.room .list a em{font-style:normal;color:var(--oxblood);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.room .list a.is-active em,.room .list a:hover em{opacity:1;transform:none}
/* about 0.8 of a screen of scrolling per room */
body.js-motion[data-page=home] .room{min-height:calc(100vh + var(--n,5) * 80vh)}
body.js-motion[data-page=home] .room .pic,body.js-motion[data-page=home] .room .list{position:sticky;top:148px}
@media (max-width:1100px){body[data-page=home] .room{column-gap:40px;padding:0 24px;grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:900px){
  body[data-page=home] .room,body.js-motion[data-page=home] .room{grid-template-columns:1fr;min-height:0;padding:0}
  body[data-page=home] .room .pic,body.js-motion[data-page=home] .room .pic{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:4/3;margin:16px 16px 0}
  body[data-page=home] .room .list,body.js-motion[data-page=home] .room .list{position:static;height:auto;min-height:0;max-width:none;margin:0;padding:24px 16px 40px}
  body[data-page=home] .room .list a{opacity:1;font-size:17px}
  .room .list a em{opacity:1;transform:none}
  .room .stage-cap{left:12px;bottom:12px;padding:10px 14px}
}

/* customer reviews: real rating and count, rolled up when in view */
.rev-sum{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px;color:var(--ink-soft)}
.rev-sum b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rev .by b em{font-style:normal;font-weight:400;color:var(--muted)}
@media (max-width:600px){.tile-cap{left:14px;right:14px;bottom:12px;flex-direction:column;align-items:flex-start;gap:2px}.tile-cap b{font-size:15px}.tile-cap small{font-size:12px}.bento .tile:nth-child(1) .tile-cap{left:18px;bottom:16px}.bento .tile:nth-child(1) .tile-cap b{font-size:22px}}

/* order page: refund request */
.order .refund-box{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)}
.order .refund-box p+p{margin-top:6px}
.order .refund-reply{background:var(--canvas,#f6f7f9);border-left:2px solid var(--ink,#111);padding:10px 12px;margin-top:10px;white-space:pre-line}
.order .refund-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline);display:grid;gap:12px}
.order .refund-form .field{display:grid;gap:6px}
.order .refund-form label{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.order .refund-form .input{width:100%}
.order .refund-form textarea.input{height:auto;padding:10px 12px;resize:vertical}
.order .refund-actions{display:flex;gap:8px;flex-wrap:wrap}
.order .refund-err{color:#b42318;min-height:1em}