/* Solnests store: product cards, cart button, details window, cart drawer. Shared by every page (tokens come from the page). */

/* ---------- product grid ---------- */
.pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(14px,1.6vw,24px)}
.pieces[data-layout="row3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pieces[data-layout="row2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.piece{position:relative;display:grid;grid-template-rows:auto 1fr;background:#EBE5D8;border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:background-color .6s var(--ease)}
.piece:hover{background:#E4DCCD}
.piece .shot{aspect-ratio:1/1;display:grid;place-items:center;padding:8%;background:inherit;isolation:isolate}
.piece .shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1.4s var(--ease)}
.piece:hover .shot img{transform:scale(1.04) translateY(-4px)}
.piece .meta{display:grid;gap:10px;padding:22px 24px 26px;align-content:start}
.piece h3{font-size:clamp(24px,1.9vw,30px);line-height:1.08}
.piece p{font-size:15px;line-height:1.55;color:var(--text-secondary)}
.piece .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:8px}
.piece .price{font:500 15px/1 var(--sans);letter-spacing:.06em}
button.shot{border:0;margin:0;width:100%;font:inherit;color:inherit;cursor:zoom-in}
.piece h3 button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit;cursor:pointer;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease)}
.piece h3 button:hover{background-size:100% 1px}
.add{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--accent-deep);background:transparent;color:var(--accent-deep);font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .45s var(--ease),color .45s var(--ease)}
.add:hover,.add.done{background:var(--accent-deep);color:var(--canvas)}
.add[disabled]{opacity:.55;cursor:not-allowed;background:transparent;color:var(--accent-deep)}
.piece.feature{grid-column:span 2;grid-row:span 2}
.piece.feature .shot{aspect-ratio:auto;min-height:0;padding:10% 10% 4%}
.piece.feature h3{font-size:clamp(32px,2.8vw,44px)}
.piece.feature p{font-size:16px;max-width:40ch}
.piece .tag{position:absolute;top:18px;left:20px;z-index:1;font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep)}
.piece .ph{display:grid;place-items:center;width:100%;height:100%;color:var(--accent-deep);opacity:.35}
.piece .ph svg{width:38%;height:auto}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- cart button ---------- */
html.locked{overflow:hidden}
.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:0;background:none;color:inherit;cursor:pointer;transition:background-color .45s var(--ease)}
.cart-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav:not(.solid) .cart-btn svg{filter:drop-shadow(0 1px 3px rgba(10,9,8,.8))}
.cart-btn:hover{background:rgba(244,239,230,.14)}
.nav.solid .cart-btn:hover{background:rgba(29,27,24,.06)}
.cart-btn .count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent-muted);color:var(--ink);font:500 11px/18px var(--sans);text-align:center;transform:scale(0);transition:transform .45s var(--ease)}
.nav.solid .cart-btn .count{background:var(--accent-deep);color:var(--canvas)}
.cart-btn.has .count{transform:scale(1)}
.cart-btn.bump .count{animation:bump .7s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- dialogs ---------- */
dialog{padding:0;border:0;color:var(--text-primary);background:var(--canvas)}
dialog::backdrop{background:rgba(14,12,10,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.x{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(244,239,230,.92);color:var(--ink);cursor:pointer;transition:background-color .4s var(--ease)}
.x:hover{background:var(--panel)}
.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;height:48px}
.qty button{width:44px;height:46px;border:0;background:none;color:inherit;font:400 20px/1 var(--sans);cursor:pointer;border-radius:999px}
.qty button:hover{background:rgba(29,27,24,.06)}
.qty span{min-width:26px;text-align:center;font:500 15px var(--sans)}

/* the details window */
.qv{width:min(1100px,100vw - 32px);max-width:none;max-height:min(90vh,880px);border-radius:10px;overflow:hidden}
.qv[open]{animation:qvIn .6s var(--ease)}
.qv.closing{animation:qvOut .28s var(--ease-soft) forwards}
.qv[open]::backdrop{animation:fadeIn .5s var(--ease)}
@keyframes qvIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes qvOut{to{opacity:0;transform:translateY(10px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.qv-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);height:min(86vh,800px)}
.qv .x{position:absolute;top:14px;right:14px;z-index:2}
.qv-media{display:grid;grid-template-rows:minmax(0,1fr) auto;background:#EBE5D8;min-height:0;padding-bottom:16px}
.qv-main{display:grid;place-items:center;min-height:0;padding:5%;background:inherit;isolation:isolate}
.qv-main img{width:100%;height:100%;max-height:62vh;object-fit:contain;transition:opacity .4s var(--ease)}
.qv-main img.cut{mix-blend-mode:multiply}
.qv-thumbs{display:flex;gap:8px;padding:4px 16px 0;overflow-x:auto}
.qv-thumbs button{flex:none;width:62px;height:62px;padding:0;border-radius:4px;overflow:hidden;border:1px solid transparent;background:#fff;cursor:pointer;opacity:.75;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.qv-thumbs button:hover,.qv-thumbs button[aria-current="true"]{opacity:1}
.qv-thumbs button[aria-current="true"]{border-color:var(--accent-deep)}
.qv-thumbs img{width:100%;height:100%;object-fit:cover}
.qv-info{display:grid;gap:16px;align-content:start;min-height:0;padding:clamp(28px,4vw,56px);overflow-y:auto;overscroll-behavior:contain}
.qv-info h2{font-size:clamp(30px,2.8vw,42px);padding-right:40px}
.qv-price{font:500 18px var(--sans);letter-spacing:.04em}
.qv-line{font:500 italic 22px/1.35 var(--serif)}
.qv-desc p{color:var(--text-secondary);font-size:15.5px;line-height:1.7}
.qv-desc p + p{margin-top:12px}
.qv-desc.clamped{max-height:8.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.qv-about{display:grid;gap:12px;padding-top:20px;margin-top:4px;border-top:1px solid var(--line)}
.more{justify-self:start;background:none;border:0;padding:4px 0;font:500 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.qv-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.qv-buy .btn{flex:1 1 200px}
.qv-note{font-size:14px;color:var(--text-secondary)}

/* the cart drawer */
.drawer{position:fixed;inset:0 0 0 auto;margin:0 0 0 auto;width:min(440px,100vw);max-width:none;height:100%;max-height:none;flex-direction:column}
.drawer[open]{display:flex;animation:drawerIn .6s var(--ease)}
.drawer.closing{animation:drawerOut .32s var(--ease-soft) forwards}
.drawer[open]::backdrop{animation:fadeIn .5s var(--ease)}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawerOut{to{transform:translateX(100%)}}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 18px 28px;border-bottom:1px solid var(--line)}
.d-head h2{font-size:30px}
.d-items{flex:1;overflow-y:auto;list-style:none;margin:0;padding:4px 28px}
.d-item{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.d-item.sold .d-thumb,.d-item.sold h3{opacity:.55}
.d-thumb{width:84px;height:84px;border-radius:4px;background:#EBE5D8;display:grid;place-items:center;isolation:isolate}
.d-thumb img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.d-item h3{font-size:20px;line-height:1.15}
.d-price{font:500 14px/1.6 var(--sans);letter-spacing:.04em;white-space:nowrap}
.d-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:12px}
.d-row .qty{height:38px}
.d-row .qty button{width:36px;height:36px;font-size:18px}
.d-remove{background:none;border:0;padding:8px 0;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.d-note{margin:0 28px;padding:14px 0;font-size:14px;line-height:1.5;color:var(--text-secondary)}
.d-empty{flex:1;display:none;align-content:center;justify-items:center;gap:22px;padding:40px 28px;text-align:center}
.d-empty p{font:500 26px var(--serif)}
.drawer.empty .d-empty{display:grid}
.drawer.empty .d-items,.drawer.empty .d-foot{display:none}
.d-foot{display:grid;gap:12px;padding:22px 28px 26px;border-top:1px solid var(--line);background:#EFE9DF}
.d-sub{display:flex;justify-content:space-between;align-items:baseline;font:500 13px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.d-sub strong{font:500 28px var(--serif);letter-spacing:0;text-transform:none}
.d-fine{font-size:14px;color:var(--text-secondary)}
.d-checkout{width:100%}
.d-checkout.off{opacity:.5;cursor:not-allowed}
.d-keep{justify-self:center;background:none;border:0;padding:10px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer}
.d-keep:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:820px), (max-height:560px){
  .qv{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain}
  .qv-inner{display:block;height:auto}
  .qv .x{position:fixed;top:12px;right:12px}
  .qv-main{aspect-ratio:1/1;max-height:70vh}
  .qv-main img{max-height:none}
  .qv-thumbs{padding-top:12px}
  .qv-info{overflow:visible;padding:28px 22px 40px}
}
@media (max-width:1100px){
  .pieces,.pieces[data-layout]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pieces,.pieces[data-layout]{grid-template-columns:1fr}
  .piece.feature{grid-column:auto;grid-row:auto}
}
@media (prefers-reduced-motion: reduce){
  .piece *,.qv,.drawer,.cart-btn .count{animation:none!important;transition:none!important}
}