/* ============================================================
   deska & co — Shop & Cart demo
   Layers on top of ../assets/brand.css
   ============================================================ */

/* cart button in the top bar */
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.5em;background:var(--olive);color:var(--cream-2);
  border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:.8rem;letter-spacing:.04em;
  padding:.72em 1.2em;border-radius:40px;transition:background .25s,transform .25s}
.cart-btn:hover{background:var(--olive-deep);transform:translateY(-1px)}
.cart-btn .badge-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  background:var(--gold);color:var(--ink);border-radius:20px;font-size:.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s var(--ease)}
.cart-btn .badge-count.show{transform:scale(1)}
.bar-actions{display:flex;align-items:center;gap:18px}

/* hero band */
.shop-hero{padding:46px 0 14px}
.shop-hero .eyebrow{margin-bottom:14px;display:block}
.shop-hero h1{font-size:clamp(2.4rem,5.5vw,3.8rem);margin-bottom:.25em}
.shop-hero h1 em{font-style:italic;color:var(--olive)}
.shop-hero p{color:var(--muted);font-size:1.05rem;max-width:52ch}

/* category tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px;padding:30px 0 26px;position:sticky;top:74px;z-index:30;
  background:linear-gradient(var(--cream) 70%,transparent)}
.tab{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);
  background:var(--cream-2);border:1px solid var(--line);border-radius:40px;padding:.6em 1.2em;cursor:pointer;
  font-family:inherit;transition:background .2s,color .2s,border-color .2s,transform .2s}
.tab:hover{transform:translateY(-1px);border-color:var(--olive)}
.tab.active{background:var(--olive);color:var(--cream-2);border-color:var(--olive)}

/* product grid */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:80px}
.product{background:var(--cream-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.product.is-hidden{display:none}
.product .pic{aspect-ratio:4/3;overflow:hidden;cursor:pointer;position:relative}
.product .pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.product:hover .pic img{transform:scale(1.05)}
.product .pic .quick{position:absolute;inset:auto 0 0 0;background:rgba(36,40,26,.78);color:var(--cream-2);
  text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:9px;transform:translateY(100%);transition:transform .3s var(--ease)}
.product:hover .pic .quick{transform:none}
.product .cat-pill{position:absolute;top:12px;left:12px;background:rgba(236,228,211,.92);color:var(--olive);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:40px}
.product .info{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.product .info h3{font-size:1.28rem;margin-bottom:.18em}
.product .info .blurb{font-size:.84rem;color:var(--muted);flex:1;margin-bottom:14px}
.product .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.product .price{font-family:'Fraunces',serif;font-size:1.18rem;color:var(--ink)}
.product .price small{font-size:.7rem;color:var(--muted);font-family:'Mulish',sans-serif;letter-spacing:.04em;text-transform:uppercase;font-weight:700;margin-right:4px}

/* shared overlay base */
.overlay{position:fixed;inset:0;background:rgba(36,40,26,.55);backdrop-filter:blur(3px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:auto}

/* quick-view modal */
.modal-back{display:flex;align-items:center;justify-content:center;padding:24px}
.qv{background:var(--cream-2);border-radius:8px;max-width:760px;width:100%;max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;transform:translateY(16px) scale(.98);transition:transform .3s var(--ease);position:relative}
.overlay.open .qv{transform:none}
.qv .qv-pic{background:var(--olive)}
.qv .qv-pic img{width:100%;height:100%;object-fit:cover;min-height:280px}
.qv .qv-body{padding:30px 30px 28px}
.qv .qv-body .eyebrow{display:block;margin-bottom:10px}
.qv .qv-body h2{font-size:1.9rem;margin-bottom:.25em}
.qv .qv-body .blurb{font-size:.92rem;color:var(--muted);margin-bottom:20px}
.qv-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);margin:0 0 9px}
.variants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.variant{border:1px solid var(--line);background:#fff;border-radius:4px;padding:.6em .9em;cursor:pointer;font-family:inherit;
  font-size:.82rem;font-weight:600;color:var(--ink);transition:border-color .2s,background .2s}
.variant:hover{border-color:var(--olive)}
.variant.sel{border-color:var(--olive);background:var(--olive);color:var(--cream-2)}
.variant .vp{font-weight:800;margin-left:.4em}
.qv-foot{display:flex;align-items:center;gap:14px;margin-top:8px}

/* quantity stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.stepper button{width:38px;height:42px;border:0;background:none;cursor:pointer;font-size:1.2rem;color:var(--ink);font-family:inherit;transition:background .2s}
.stepper button:hover{background:rgba(91,98,51,.12)}
.stepper .qval{min-width:38px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

.icon-x{position:absolute;top:14px;right:14px;background:rgba(236,228,211,.9);border:0;cursor:pointer;color:var(--ink);
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s;z-index:2}
.icon-x:hover{opacity:1}

/* cart drawer */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream-2);z-index:110;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s var(--ease);box-shadow:-30px 0 60px -30px rgba(36,40,26,.6)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.5rem}
.drawer-head .dx{background:none;border:0;cursor:pointer;color:var(--ink);opacity:.6;padding:6px;line-height:0}
.drawer-head .dx:hover{opacity:1}
.drawer-body{flex:1;overflow:auto;padding:8px 24px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.line .lpic{width:64px;height:64px;border-radius:4px;object-fit:cover}
.line .lname{font-family:'Fraunces',serif;font-size:1.02rem;line-height:1.2}
.line .lvar{font-size:.74rem;color:var(--muted);margin:2px 0 8px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.line .lqty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:4px;background:#fff}
.line .lqty button{width:28px;height:28px;border:0;background:none;cursor:pointer;font-size:1rem;color:var(--ink)}
.line .lqty button:hover{background:rgba(91,98,51,.12)}
.line .lqty span{min-width:26px;text-align:center;font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.line .lright{text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.line .lprice{font-family:'Fraunces',serif;font-size:1.02rem}
.line .lrm{background:none;border:0;cursor:pointer;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 0;transition:color .2s}
.line .lrm:hover{color:var(--brown)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cart-empty svg{opacity:.4;margin-bottom:14px}
.cart-empty p{font-size:.92rem}
.drawer-foot{border-top:1px solid var(--line);padding:20px 24px 24px}
.subtotal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.subtotal .lbl{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.subtotal .amt{font-family:'Fraunces',serif;font-size:1.7rem}
.drawer-foot .note{font-size:.74rem;color:var(--muted);margin-bottom:16px}
.drawer-foot .btn{width:100%;justify-content:center}

@media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)}.qv{grid-template-columns:1fr}.qv .qv-pic img{min-height:200px;max-height:260px}}
@media(max-width:560px){.products{grid-template-columns:1fr}.tabs{top:64px}}