/* SpectacleHome shop styles. Companion to site.css — brand tokens come from
   site.css :root, this file only adds shop-specific layout. */

.container.narrow{max-width:720px}
.muted{color:var(--color-slate)}
.small{font-size:.85rem}

/* ---------- Product grid ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin:28px 0}
.shop-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E7ECF3;border-radius:14px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.shop-card:hover{box-shadow:0 8px 24px rgba(11,60,97,.10);transform:translateY(-2px)}
.shop-card-img{display:block;background:var(--color-cloud);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:14px}
.shop-card-img img{max-width:100%;max-height:100%;object-fit:contain}
.shop-card-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.shop-card-name{font-size:1rem;margin:0;color:var(--color-navy)}
.shop-card-meta{font-size:.82rem;color:var(--color-slate)}
.shop-card-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:8px}
.price-now{font-weight:700;color:var(--color-navy);font-size:1.05rem}
.price-mrp{text-decoration:line-through;color:var(--color-slate);font-size:.85rem}
.price-off{color:var(--color-teal);font-size:.8rem;font-weight:600}
.stock-out{color:var(--color-alert);font-size:.82rem;font-weight:600}

/* ---------- Product detail ---------- */
.product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin:24px 0 40px}
.product-gallery{background:var(--color-cloud);border-radius:14px;padding:24px;display:flex;align-items:center;justify-content:center;min-height:280px}
.product-gallery img{max-width:100%;height:auto}
.product-spec{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.product-spec th,.product-spec td{text-align:left;padding:8px 0;border-bottom:1px solid #EFF3F8}
.product-spec th{color:var(--color-slate);font-weight:500;width:45%}
.buy-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}
.qty-input{width:74px;padding:10px;border:1px solid #E7ECF3;border-radius:8px;font:inherit}

/* ---------- Cart ---------- */
.cart-line{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid #EFF3F8}
.cart-line img{width:80px;height:56px;object-fit:contain;background:var(--color-cloud);border-radius:8px}
.cart-line-name{font-weight:600;color:var(--color-navy)}
.cart-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.link-danger{background:none;border:none;color:var(--color-alert);cursor:pointer;font:inherit;font-size:.85rem;padding:0;text-decoration:underline}
.cart-totals{margin-top:20px;max-width:340px;margin-left:auto}

/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr);gap:32px;align-items:start;margin-top:20px}
.checkout-fields label{display:block;margin-bottom:14px;font-weight:600;color:var(--color-navy);font-size:.9rem}
.checkout-fields input{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid #E7ECF3;border-radius:9px;font:inherit;font-weight:400;color:var(--color-ink)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 16px}
.checkout-summary{background:var(--color-cloud);border:1px solid #E7ECF3;border-radius:14px;padding:20px;position:sticky;top:90px}
.sum-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.92rem}
.sum-total{border-top:1px solid #DDE5EF;margin-top:8px;padding-top:12px;font-weight:700;color:var(--color-navy);font-size:1.05rem}
.btn-block{display:block;width:100%;text-align:center;margin-top:14px}

/* ---------- Order status ---------- */
.order-badge{display:inline-block;padding:6px 14px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:12px}
.order-badge-ok{background:#E6F6EF;color:#0F6B4F}
.order-badge-fail{background:#FDF2F2;color:#9B1C1C}
.order-badge-pending{background:#FFF4E5;color:#9B5B00}

/* ---------- Header cart pill ---------- */
.cart-pill{position:relative;display:inline-flex;align-items:center;gap:6px}
.cart-pill [data-cart-count]{background:var(--color-coral);color:#fff;border-radius:99px;font-size:.7rem;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}

@media (max-width:860px){
  .product-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .checkout-grid{grid-template-columns:minmax(0,1fr)}
  .checkout-summary{position:static}
  .cart-totals{margin-left:0;max-width:none}
}

/* Screen-reader-only. Used by generated product pages for labels that must be
   announced but not shown; without this rule they render visibly on the page. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}