body.qb-content{background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.wrapc{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.ph{padding:clamp(28px,5vw,56px) 0 clamp(18px,3vw,28px)}
.ph .k{font:700 12px Montserrat;letter-spacing:.18em;text-transform:uppercase;color:var(--crust)}
.ph h1{font:800 clamp(32px,6vw,56px)/1.02 Montserrat;letter-spacing:-.03em;margin:10px 0 10px}
.ph p{font:400 clamp(15px,1.8vw,18px)/1.55 Roboto;color:var(--muted);margin:0;max-width:640px}
.crumbs{font:500 13px Roboto;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;padding-top:22px}
.crumbs a{color:var(--navy)}
/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px}
.filters a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:22px;font:700 14px Montserrat;text-decoration:none;color:var(--ink);background:#EDE3D4;transition:transform 150ms var(--ease-out),background-color 150ms ease}
.filters a:active{transform:scale(.96)}
.filters a[aria-current]{background:var(--navy);color:#fff}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;padding-bottom:40px}
.pcard{background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgb(0 0 0/.06),0 1px 2px -1px rgb(0 0 0/.06),0 2px 4px rgb(0 0 0/.04);display:flex;flex-direction:column}
.pcard .im{position:relative;aspect-ratio:4/3;display:block;background:#eee;overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pcard .im:hover img{transform:scale(1.03)}}
.pcard .im .tg{left:10px;bottom:10px}
.pcard .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .bd a.n{font:700 17px Montserrat;color:var(--ink);text-decoration:none}
.pcard .u{font:400 13px Roboto;color:var(--muted)}
.pcard .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;gap:8px}
.pcard .pr{font:600 15px Roboto}
.addb{height:44px;min-width:44px;padding:0 14px;border-radius:12px;background:var(--orange);color:var(--ink);font:700 14px Montserrat;display:inline-flex;align-items:center;gap:6px;transition:transform 150ms var(--ease-out)}
.addb:active{transform:scale(.95)}
.addb.ok{background:var(--navy);color:#fff}
.promo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);border-radius:20px;padding:18px 20px;margin-bottom:22px;box-shadow:0 0 0 1px rgb(0 0 0/.06)}
.promo b{font:800 18px Montserrat;display:block}.promo span{font:400 14px Roboto;color:var(--muted)}
/* generic */
.card2{background:var(--paper);border-radius:20px;box-shadow:0 0 0 1px rgb(0 0 0/.06),0 2px 4px rgb(0 0 0/.04);padding:clamp(18px,3vw,28px)}
.btn{max-width:100%}
.note{font:400 13px/1.5 Roboto;color:var(--muted)}
.draft{display:flex;gap:10px;align-items:flex-start;background:#FFF6E0;border:1.5px dashed #C9921A;color:#5a4410;border-radius:14px;padding:14px 16px;font:500 14px/1.5 Roboto;margin-bottom:22px}
.draft b{font:800 13px Montserrat;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.prose{max-width:760px;padding-bottom:60px}
.prose h2{font:800 22px Montserrat;margin:30px 0 8px}
.prose p,.prose li{font:400 16px/1.65 Roboto;color:#2e313c}
.toastq{position:fixed;left:50%;top:104px;z-index:90;transform:translate(-50%,-8px);opacity:0;background:var(--ink);color:#fff;font:600 14px Montserrat;padding:10px 16px;border-radius:12px;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toastq.on{opacity:1;transform:translate(-50%,0)}
.step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;height:46px;flex:none;background:#fff}
.step span{width:36px;text-align:center;font:700 18px Montserrat;color:var(--navy);font-variant-numeric:tabular-nums}
.step button{font:700 18px Montserrat;width:44px;height:44px;border-radius:10px;transition:transform 150ms var(--ease-out)}
.step button:active{transform:scale(.9)}
.seg{display:flex;background:#F0E7DA;border-radius:12px;padding:4px;position:relative}
.seg button{flex:1;height:40px;border-radius:9px;font:700 14px Montserrat;color:var(--muted);position:relative;z-index:1;transition:color 150ms ease}
.seg button.on{color:var(--ink)}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform 220ms var(--ease-out)}
.seg.r .pill{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){.seg .pill{transition:none}.pcard .im img{transition:none}}