/* ============================================================
   SHOP.CSS — homemade products + cart drawer
   ============================================================ */

.shop{background:var(--ivory);}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.product-card{
  background:var(--ivory-dim);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(163,74,36,.13);border-color:rgba(217,140,60,.4);}
.product-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(circle at 30% 22%, var(--gold-light), var(--gold) 58%, #a06a1d);
  display:flex;align-items:center;justify-content:center;font-size:46px;
}
.product-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s var(--ease);
}
.product-card:hover .product-thumb img{transform:scale(1.07);}
.product-thumb.img-err img{display:none;}
.product-thumb.img-err::before{content:"🍛";font-size:46px;opacity:.85;}

/* ---------- CART DRAWER ---------- */
.product-body{padding:20px 20px 22px;}
.product-body h4{font-family:var(--font-serif);font-size:19px;margin-bottom:6px;}
.product-body .desc{color:var(--ink-soft);font-size:13.5px;margin-bottom:14px;min-height:38px;}
.product-row{display:flex;align-items:center;justify-content:space-between;}
.price{font-family:var(--font-serif);font-weight:700;font-size:19px;color:var(--saffron);}
.add-btn{
  background:linear-gradient(120deg,var(--saffron),var(--saffron-deep));
  color:#fff;border:none;border-radius:40px;
  padding:10px 18px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 8px 18px rgba(217,140,60,.3);
  transition:transform .25s var(--ease);
}
.add-btn:hover{transform:translateY(-2px);}

/* ---------- CART DRAWER ---------- */
.cart-toggle{
  position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:900;
  background:linear-gradient(180deg,var(--maroon),var(--maroon-dark));color:#fff;border:none;padding:16px 10px;
  writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;
  border-radius:10px 0 0 10px;display:flex;align-items:center;gap:8px;
  box-shadow:-6px 6px 20px rgba(163,74,36,.4);
}
.cart-toggle .count{writing-mode:horizontal-tb;background:var(--saffron);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:390px;max-width:90vw;background:var(--ivory);
  z-index:1200;transform:translateX(100%);transition:transform .4s var(--ease);
  box-shadow:-10px 0 40px rgba(0,0,0,.25);display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{
  padding:26px 26px 18px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(120deg,var(--charcoal),var(--charcoal-2));color:#fff;
}
.cart-head h3{font-family:var(--font-serif);color:#fff;font-size:22px;}
.cart-close{background:none;border:none;font-size:24px;color:var(--gold-light);}
.cart-items{flex:1;overflow-y:auto;padding:18px 26px;}
.cart-empty{color:var(--ink-soft);font-size:14px;text-align:center;padding:60px 0;line-height:1.8;}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);gap:10px;}
.cart-item .ci-name{font-size:15px;font-weight:600;}
.cart-item .ci-meta{font-size:12.5px;color:var(--ink-soft);}
.qty-ctrl{display:flex;align-items:center;gap:8px;}
.qty-ctrl button{width:26px;height:26px;border:1px solid rgba(217,140,60,.4);background:var(--card);border-radius:50%;font-size:15px;line-height:1;color:var(--saffron);transition:all .2s var(--ease);}
.qty-ctrl button:hover{background:var(--saffron);color:#fff;border-color:var(--saffron);}
.cart-foot{padding:20px 26px 28px;border-top:1px solid var(--line);}
.cart-total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:16px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr;gap:18px;}
  .product-row{flex-direction:column;gap:12px;align-items:stretch;}
  .price{font-size:16px;}
  .add-btn{width:100%;padding:12px 16px;font-size:13px;}
}