/* Print shop — uses the site's tokens from site.css (light + night themes). */
.shop-hero{border-bottom:1px solid var(--rule);background:var(--mat)}
.shop-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(40px,7vw,88px)}
.shop-hero h1{font:400 clamp(38px,6vw,76px)/1.02 var(--serif);letter-spacing:-.01em;margin:0 0 18px;color:var(--ink)}
.shop-hero p{max-width:34em;margin:0 0 22px;font:400 17px/1.6 var(--serif);color:var(--ink-soft)}
.shop-hero .kicker{display:block;margin-bottom:16px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.shop-hero .cta{display:inline-block;padding:13px 22px;border:1px solid var(--ink);color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.shop-hero .cta:hover{background:var(--ink);color:var(--wall)}
.shop-hero-art{display:flex;justify-content:center}
.shop-hero-art .frame{width:min(100%,460px)}

.shop-trust{display:flex;flex-wrap:wrap;gap:10px 28px;padding:18px 0;border-bottom:1px solid var(--rule);font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--ink-soft)}
.shop-trust span::before{content:"\2022";margin-right:10px;color:var(--ink-faint)}
.shop-trust span:first-child::before{content:"";margin:0}

.shop-body{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:36px 0 72px}
.shop-side h2{margin:0 0 12px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.shop-side ul{list-style:none;margin:0 0 30px;padding:0}
.shop-side li{margin:0}
.shop-side button.coll{display:flex;justify-content:space-between;width:100%;padding:9px 0;background:none;border:0;border-bottom:1px solid var(--rule);font:400 15px/1.3 var(--serif);color:var(--ink-soft);cursor:pointer;text-align:left}
.shop-side button.coll:hover,.shop-side button.coll[aria-pressed="true"]{color:var(--ink)}
.shop-side button.coll[aria-pressed="true"]{font-weight:600}
.shop-side button.coll em{font:400 12px/1.6 var(--sans);font-style:normal;color:var(--ink-faint)}
.finish{display:flex;flex-wrap:wrap;gap:8px}
.finish button{padding:8px 12px;background:none;border:1px solid var(--rule);font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.finish button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.shop-note{font:400 12px/1.55 var(--sans);color:var(--ink-faint)}

.shop-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
.shop-head h2{margin:0;font:400 clamp(24px,3vw,34px)/1.1 var(--serif);color:var(--ink)}
.shop-head p{margin:0;font:400 13px/1.4 var(--sans);color:var(--ink-faint)}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 22px}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;background:var(--mat);overflow:hidden}
.card:hover .tile{background:var(--plate)}

/* framed mockup: frame > mat > picture */
.frame{--fw:6px;--mat-w:12%;--r:1.5;position:relative;display:block;width:min(80%,calc(var(--r) * 90%));box-shadow:0 14px 28px -10px var(--shadow),0 2px 5px var(--shadow);background:#fff}
.frame .pic{display:block;width:100%;height:auto}
.finish-black .frame{border:13px solid #0c0c0c;border-image:repeating-linear-gradient(94deg,#0e0d0c 0,#1f1c19 2px,#0b0a09 3px,#171412 7px,#090908 8px,#221e1a 10px,#0d0c0b 11px,#191613 16px,#0a0a09 18px,#1d1a17 19px,#0e0d0c 24px) 13;padding:16px;background:#f4f3ef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 3px 3px 7px rgba(0,0,0,.3),0 14px 28px -10px var(--shadow),0 2px 5px var(--shadow)}
.finish-black .frame::after{content:"";position:absolute;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset -6px 6px 10px rgba(0,0,0,.4),2px -2px 0 0 #d5d4cf}
.finish-white .frame{border:var(--fw) solid #f4f2ee;padding:var(--mat-w);background:#fbfaf7;outline:1px solid rgba(0,0,0,.08)}
.finish-oak .frame{border:var(--fw) solid #b98f5f;padding:var(--mat-w);background:#fbfaf7}
.finish-none .frame{border:0;padding:0}
.card .pic{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.badge{position:absolute;left:10px;top:10px;padding:5px 8px;background:var(--wall);font:500 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

.meta{padding:12px 2px 0}
.meta h3{margin:0 0 4px;font:400 16px/1.3 var(--serif);color:var(--ink)}
.meta .sub{display:flex;justify-content:space-between;gap:10px;font:400 13px/1.4 var(--sans);color:var(--ink-soft)}
.meta .price{color:var(--ink);font-weight:500}
.buy{margin-top:10px;padding:11px 14px;border:1px solid var(--ink);text-align:center;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.card:hover .buy{background:var(--ink);color:var(--wall)}

.more{display:block;margin:38px auto 0;padding:13px 26px;background:none;border:1px solid var(--ink);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.more:hover{background:var(--ink);color:var(--wall)}

.how{border-top:1px solid var(--rule);background:var(--mat)}
.how .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-top:56px;padding-bottom:56px}
.how h3{margin:0 0 8px;font:400 20px/1.2 var(--serif);color:var(--ink)}
.how p{margin:0;font:400 15px/1.6 var(--serif);color:var(--ink-soft)}
.how .n{display:block;margin-bottom:12px;font:500 11px/1 var(--sans);letter-spacing:.18em;color:var(--ink-faint)}

.faq{padding:56px 0 72px}
.faq h2{margin:0 0 20px;font:400 clamp(24px,3vw,34px)/1.1 var(--serif);color:var(--ink)}
.faq details{max-width:760px;border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font:500 16px/1.4 var(--serif);color:var(--ink)}
.faq details p{margin:10px 0 0;font:400 15px/1.65 var(--serif);color:var(--ink-soft)}

@media(max-width:860px){
  .shop-hero .wrap{grid-template-columns:1fr;gap:28px}
  .shop-body{grid-template-columns:1fr;gap:22px}
  .shop-side ul{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .shop-side button.coll{width:auto;padding:8px 12px;border:1px solid var(--rule)}
  .shop-side button.coll[aria-pressed="true"]{border-color:var(--ink)}
  .shop-side button.coll em{margin-left:8px}
  .how .wrap{grid-template-columns:1fr;gap:26px}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 14px}
}

/* Living-room hero */
.shop-hero.has-room{position:relative;overflow:hidden;min-height:clamp(440px,45vw,960px);background:#1f2c32;display:flex;align-items:flex-end}
.shop-room{position:absolute;inset:0}
.shop-room svg{display:block;width:100%;height:100%}
.shop-hero.has-room:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,20,.62),rgba(10,16,20,.28) 40%,rgba(10,16,20,0) 62%),linear-gradient(0deg,rgba(10,16,20,.45),rgba(10,16,20,0) 45%);pointer-events:none}
.shop-hero.has-room .wrap{position:relative;z-index:2;display:block;width:100%}
.shop-hero.has-room .shop-hero-art{display:none}
.shop-hero.has-room h1,.shop-hero.has-room p,.shop-hero.has-room .kicker{color:#fff}
.shop-hero.has-room h1{max-width:9ch}
.shop-hero.has-room p{max-width:26em}
.shop-hero.has-room .cta{border-color:#fff;color:#fff}
.shop-hero.has-room .cta:hover{background:#fff;color:#1b1917}