/* ============ Shop extension: catalog, cart, checkout ============ */

/* Bilingual KZ lines: distinct but not competing with RU copy */
[lang="kk"]{color:var(--muted);font-style:italic;position:relative;padding-left:14px;border-left:2px solid var(--gold)}
.hero-kz{font-size:.92rem;margin-top:-6px;margin-bottom:10px}
.catalog-kz{margin-top:6px;font-size:.88rem}

/* Cart button in header */
.cart-btn{
  position:relative;background:transparent;border:2px solid var(--wood-dark);color:var(--wood-dark);
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,color .2s;
}
.cart-btn:hover{background:var(--wood-dark);color:var(--cream)}
.cart-btn svg{width:20px;height:20px}
.cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--gold);color:#fff;font-size:.7rem;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Category tabs */
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.cat-tab{
  background:var(--cream);border:1.5px solid rgba(107,74,48,.25);color:var(--text-soft);
  padding:9px 16px;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.cat-tab span{opacity:.65;font-weight:600}
.cat-tab:hover{border-color:var(--gold)}
.cat-tab.active{background:var(--wood-dark);border-color:var(--wood-dark);color:var(--cream)}
.cat-tab.active span{opacity:.85}

/* Catalog grid: allow many cards, not fixed 4 columns */
#productGrid.price-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.shop-card .ph{height:auto;aspect-ratio:3/4;background:var(--bg-alt)}
.shop-card .ph img{object-fit:contain}
.shop-card:hover .ph img{transform:none}
.pc-contents{list-style:none;font-size:.78rem;color:var(--text-soft);margin-bottom:10px;display:grid;gap:3px}
.pc-contents li:before{content:"\2014 "}
.pc-actions{margin-top:auto}
.add-btn{width:100%}
.catalog-empty{text-align:center;color:var(--text-soft);padding:20px 0}

/* Cart drawer */
.cart-overlay{
  position:fixed;inset:0;background:rgba(44,33,22,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;
}
.cart-overlay.show{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream);z-index:80;
  box-shadow:-12px 0 30px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;padding:22px;
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cart-head h3{color:var(--wood-dark);font-size:1.3rem;font-weight:800}
.cart-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-soft);width:34px;height:34px;border-radius:50%}
.cart-close:hover{background:rgba(107,74,48,.1)}
.cart-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px}
.cart-empty{color:var(--text-soft);font-size:.9rem;text-align:center;margin-top:30px}
.cart-item{display:grid;grid-template-columns:56px 1fr auto auto;gap:10px;align-items:center}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid rgba(107,74,48,.15)}
.ci-name{font-weight:700;font-size:.88rem;color:var(--wood-dark);line-height:1.3}
.ci-price{font-size:.8rem;color:var(--text-soft)}
.ci-qty{display:flex;align-items:center;gap:8px;font-weight:700}
.qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(107,74,48,.3);background:var(--cream);cursor:pointer;font-size:.95rem;line-height:1}
.qty-btn:hover{border-color:var(--gold)}
.ci-remove{background:none;border:none;color:var(--text-soft);cursor:pointer;font-size:.85rem}
.ci-remove:hover{color:#a5432f}
.cart-foot{border-top:1px solid rgba(107,74,48,.15);padding-top:16px;margin-top:12px}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:800;color:var(--wood-dark)}
.cart-total strong{font-size:1.25rem;color:var(--gold)}

/* Checkout modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(44,33,22,.55);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay[hidden]{display:none}
[hidden]{display:none !important}
.modal-box{
  position:relative;background:var(--cream);border-radius:18px;max-width:480px;width:100%;
  max-height:88vh;overflow-y:auto;padding:30px;box-shadow:var(--shadow);
}
.modal-box h3{color:var(--wood-dark);font-size:1.3rem;font-weight:800;margin-bottom:16px}
.modal-box .cart-close{position:absolute;top:14px;right:14px}
.checkout-summary{background:var(--bg-alt);border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:.85rem}
.cs-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--text-soft)}
.cs-row.cs-total{border-top:1px solid rgba(107,74,48,.2);margin-top:6px;padding-top:10px;font-weight:800;color:var(--wood-dark)}
#checkoutForm{display:flex;flex-direction:column;gap:14px}
#checkoutForm label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:700;color:var(--wood-dark)}
#checkoutForm input,#checkoutForm textarea{
  font-family:inherit;font-size:.95rem;padding:11px 13px;border-radius:10px;border:1.5px solid rgba(107,74,48,.25);
  background:#fff;color:var(--text)
}
#checkoutForm textarea{min-height:60px;resize:vertical}
#checkoutForm input:focus,#checkoutForm textarea:focus{outline:none;border-color:var(--gold)}
.checkout-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.checkout-note{font-size:.75rem;color:var(--text-soft);margin-top:4px;line-height:1.4}

@media (max-width:640px){
  .cat-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .cat-tab{flex:none}
}