/* ===== Shop page + product details card ===== */
.shophead{background:var(--headbg);padding:150px 24px 70px;border-radius:0 0 48px 48px;position:relative;overflow:hidden}
.shophead h1{font-size:clamp(60px,14vw,230px);font-weight:800;letter-spacing:-.065em;line-height:.82}
.shophead p{max-width:480px;font-size:19px;line-height:1.4;margin-top:24px}
.shophead .float{position:absolute;right:6%;top:26%;font-size:clamp(60px,10vw,150px);animation:bob 4s infinite}

.shopbar{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;padding:26px 24px 8px;max-width:1500px;margin:0 auto}
.filters{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 560px}
.filters button{padding:11px 18px;border-radius:100px;border:1.5px solid var(--ink);background:var(--cream);font-weight:700;font-size:14px;cursor:pointer;transition:background .25s,color .25s}
.filters button small{opacity:.55;font-weight:600;margin-left:4px}
.filters button:hover{background:#fff}
.filters button.on{background:var(--ink);color:var(--butter)}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #0003;border-radius:100px;padding:0 16px;height:46px;flex:0 1 320px;min-width:240px}
.search input{border:0;outline:0;background:0;font:600 15px 'Bricolage Grotesque',sans-serif;width:100%}
.search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px var(--butter)}
.count{max-width:1500px;margin:0 auto;padding:6px 24px 0;opacity:.6}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px;padding:20px 24px 40px;max-width:1500px;margin:0 auto}
.pc{background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;position:relative;transition:box-shadow .3s}
.pc:hover{box-shadow:0 24px 40px -24px #0005}
.pc .pimg{aspect-ratio:4/3;background-color:var(--c);transition:transform .8s var(--ease)}
.pc:hover .pimg{transform:scale(1.05)}
.pc .imgwrap{overflow:hidden}
.pc .pbody{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.tagx{opacity:.6;font-size:11px}
.pc h3{font-size:19px;letter-spacing:-.03em;line-height:1.1;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}
.prow{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:auto}
.price{font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1}
.price small{font:600 12px 'Bricolage Grotesque',sans-serif;letter-spacing:0;opacity:.6;margin-left:3px}
.moq{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;background:var(--c);border-radius:100px;padding:5px 9px;white-space:nowrap}
.pbtns{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.pbtns .btn{padding:11px 10px;font-size:14px;justify-content:center}
.more{text-align:center;padding:0 24px 100px}
.more[hidden]{display:none}
.empty2{grid-column:1/-1;text-align:center;padding:80px 0;opacity:.7}

.custom{margin:0 24px 120px;max-width:1452px;margin-inline:auto;background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(28px,5vw,70px);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.custom h3{font-size:clamp(34px,5vw,74px);letter-spacing:-.05em;line-height:.9;font-weight:800;max-width:14ch}
.custom p{max-width:40ch;line-height:1.4;opacity:.8;margin-bottom:18px}

/* ---- product details card ---- */
.pm{position:fixed;inset:0;background:#000a;z-index:9300;display:grid;place-items:center;padding:16px;overflow:auto;animation:pmfade .25s}
@keyframes pmfade{from{opacity:0}}
.pmbox{position:relative;background:var(--paper);border-radius:32px;width:min(1040px,100%);max-height:94vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;animation:pmup .5s var(--ease);will-change:transform}
@keyframes pmup{from{opacity:0;transform:translateY(40px) scale(.98)}}
.pmx{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1.5px solid #0003;background:#fffc;font-size:16px;cursor:pointer}
.pmx:hover{background:var(--ink);color:#fff}
.pmgal{padding:22px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;align-self:start}
.pmthumbs{display:flex;gap:8px;flex-wrap:wrap}
.pmthumbs button{width:64px;height:64px;border-radius:12px;border:2px solid transparent;background-size:cover;background-position:center;cursor:pointer}
.pmthumbs button.on{border-color:var(--ink)}
.pminfo{padding:26px 26px 26px 6px;display:flex;flex-direction:column;gap:12px}
.pminfo h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.045em;line-height:1;font-weight:800;margin-right:40px}
.pmprice{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1}
.pmprice small{font:600 13px 'Bricolage Grotesque',sans-serif;letter-spacing:0;opacity:.6}
.pmnote{font-size:13px;opacity:.65;line-height:1.4}
.pmbuy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.qtybox{display:inline-flex;align-items:center;border:1.5px solid #0004;border-radius:100px;background:#fff}
.qtybox button{width:40px;height:44px;border:0;background:0;font-size:18px;cursor:pointer;border-radius:100px}
.qtybox button:hover{background:var(--butter)}
.qtybox input{width:84px;border:0;text-align:center;font:800 16px 'Bricolage Grotesque',sans-serif;background:0;outline:0;-moz-appearance:textfield}
.qtybox input::-webkit-outer-spin-button,.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none}
.pmtotal{font-weight:800;font-size:18px}
.pmbuy .btn{flex:1 1 180px;justify-content:center}
.wal{font-weight:700;font-size:14px;text-decoration:underline;opacity:.75}
.wal:hover{opacity:1;color:#128C7E}
.pmsec h4{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:14px 0 8px}
.pmsec p{font-size:15px;line-height:1.55}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec td{padding:8px 10px;border-bottom:1.5px dashed #0002;vertical-align:top}
.spec td:first-child{opacity:.65;width:42%}
.spec td:last-child{font-weight:600}
@media(max-width:820px){.pmbox{grid-template-columns:1fr}.pmgal{position:static;padding-bottom:6px}.pminfo{padding:8px 22px 24px}}

.alsoin{font-size:10px;opacity:.6;margin-top:-4px}
/* gallery: hover-zoom stage */
.pmstage{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;background:var(--c);cursor:grab;touch-action:pan-y;user-select:none}
.pmstage:active{cursor:grabbing}
.pmimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pmhint{position:absolute;left:12px;bottom:12px;background:#10261Bcc;color:#fff;padding:6px 12px;border-radius:100px;font-size:10px;opacity:0;transform:translateY(8px);transition:.4s var(--ease);pointer-events:none}
.pmstage:hover .pmhint{opacity:1;transform:none}
.pmthumbs button{transition:transform .3s var(--ease),border-color .25s}
.pmthumbs button:hover{transform:translateY(-3px)}
/* content slides up one block after another */
.pminfo .st{opacity:0;animation:stIn .6s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes stIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.spec tr{opacity:0;animation:rowIn .5s var(--ease) forwards;animation-delay:calc(var(--r,0) * 45ms + 600ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.pmtotal.bump{animation:bumpT .35s var(--ease)}
@keyframes bumpT{40%{transform:translateY(-4px);color:var(--orange)}}
.pmprice #pmp{font-variant-numeric:tabular-nums}
/* format picker: a highlight bar slides between Bundle / Pouch / Ream / Kg */
.fmts{position:relative;display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:100px;background:#0000000d}
.fm{position:relative;z-index:1;border:0;background:0;padding:10px 18px;border-radius:100px;font:700 14px 'Bricolage Grotesque',sans-serif;cursor:pointer;color:var(--ink);transition:color .3s}
.fm.on{color:#fff}
.fmbar{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:100px;background:var(--ink);transition:transform .45s cubic-bezier(.3,1.25,.4,1),width .45s cubic-bezier(.3,1.25,.4,1)}