/* ============================================================
   SPORTERRA MARKET — e-commerce storefront styles
   Market vertical accent = orange #F4A020 (darkened for text/AA)
   ============================================================ */
:root{
  --mkt:      #F4A020;
  --mkt-700:  #C97E0A;   /* text/links on white */
  --mkt-800:  #9A5F06;
  --mkt-50:   #FEF6E8;
  --mkt-100:  #FCEBCB;
}

/* page accent overrides */
.mkt .eyebrow { color: var(--mkt-700); }
.mkt .eyebrow::before { background: var(--mkt-700); }

.btn-market { background: var(--mkt); color:#3d2906; border:1px solid var(--mkt); }
.btn-market:hover { background:#e69612; color:#3d2906; box-shadow:0 12px 26px -12px rgba(244,160,32,.6); transform:translateY(-1px); }

/* ---------- Market hero ---------- */
.mkt-hero { background:
   radial-gradient(120% 130% at 88% -10%, var(--mkt-50), transparent 55%),
   linear-gradient(180deg,#fff,#fff); padding-top:2.4rem; }
.mkt-search {
  display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line-2);
  border-radius:999px; padding:.55rem .55rem .55rem 1.2rem; box-shadow: var(--shadow-sm); max-width:560px;
}
.mkt-search input { border:0; outline:0; flex:1; font-size:1rem; font-family:var(--font); color:var(--ink); background:transparent; }
.mkt-search input::placeholder { color:#9aa8a1; }

/* ---------- Category pills ---------- */
.cat-scroll { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none; }
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-pill {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.55rem 1.05rem; font-weight:600; font-size:.92rem; color:var(--ink-2);
  cursor:pointer; transition: all .2s var(--ease); white-space:nowrap;
}
.cat-pill i { color:var(--mkt-700); }
.cat-pill:hover { border-color:var(--mkt); }
.cat-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.cat-pill.active i { color:var(--mkt); }

/* ---------- Deals strip ---------- */
.deal-strip { background: var(--ink); color:#fff; border-radius: var(--radius); overflow:hidden; }
.deal-card {
  flex:0 0 auto; width:230px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:1rem 1.1rem; text-decoration:none; color:#fff; transition: background .25s var(--ease);
}
.deal-card:hover { background:rgba(255,255,255,.1); color:#fff; }
.deal-off { font-size:1.6rem; font-weight:800; color:var(--mkt); letter-spacing:-.02em; }

/* ---------- Filter sidebar ---------- */
.filter-panel { position:sticky; top:90px; }
.filter-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.4rem; }
.filter-group + .filter-group { margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.filter-group h6 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin-bottom:.8rem; }
.form-check-input:checked { background-color:var(--mkt); border-color:var(--mkt); }
.form-check-input:focus { box-shadow:0 0 0 .2rem rgba(244,160,32,.25); border-color:var(--mkt); }
.form-check-label { font-size:.95rem; color:var(--ink-2); cursor:pointer; }
.form-range::-webkit-slider-thumb { background:var(--mkt); }
.form-range::-moz-range-thumb { background:var(--mkt); }

/* ---------- Product cards ---------- */
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width: 991px){ .prod-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 575px){ .prod-grid { grid-template-columns:1fr; } }

.prod-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color:transparent; }
.prod-media { position:relative; aspect-ratio:1/1; background:var(--bg-soft); overflow:hidden; }
.prod-media img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.prod-card:hover .prod-media img { transform: scale(1.05); }
.prod-fallback { background: linear-gradient(135deg,#f0ece2,#fbf6ea); }

.prod-badge {
  position:absolute; top:.7rem; left:.7rem; background:var(--mkt); color:#3d2906;
  font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:.28rem .6rem; border-radius:8px;
}
.prod-fav {
  position:absolute; top:.6rem; right:.6rem; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); display:grid; place-items:center;
  color:var(--ink-2); cursor:pointer; transition: all .2s var(--ease);
}
.prod-fav:hover { color:var(--c-tickets); }
.prod-fav.on { color:var(--c-tickets); }

.prod-body { padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; flex:1; }
.prod-vendor { font-size:.78rem; font-weight:700; color:var(--mkt-700); letter-spacing:.03em; text-transform:uppercase; }
.prod-name { font-weight:700; font-size:1.02rem; letter-spacing:-.01em; line-height:1.3; margin:.2rem 0 .35rem; color:var(--ink); }
.prod-rating { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.35rem; }
.prod-rating .stars { color:var(--mkt); }
.prod-price { display:flex; align-items:baseline; gap:.5rem; margin-top:.7rem; }
.prod-price b { font-size:1.2rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.prod-price del { color:#a9b3ac; font-size:.92rem; }
.prod-price .save { font-size:.78rem; font-weight:700; color:var(--brand); }
.prod-fulfil { display:flex; gap:.9rem; margin-top:.55rem; font-size:.78rem; color:var(--muted); }
.prod-fulfil span { display:inline-flex; align-items:center; gap:.3rem; }
.prod-add {
  margin-top:.95rem; width:100%; border:0; border-radius:999px; padding:.62rem; font-weight:700;
  background:var(--mkt); color:#3d2906; cursor:pointer; transition: all .2s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font);
}
.prod-add:hover { background:#e69612; }
.prod-add.added { background:var(--brand); color:#fff; }

/* ---------- Cart button + offcanvas ---------- */
.cart-btn { position:relative; }
.cart-count {
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--c-tickets); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center;
}
.cart-count.hide { display:none; }
.offcanvas { border-left:1px solid var(--line); }
.cart-line { display:flex; gap:.85rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.cart-thumb { width:64px; height:64px; border-radius:11px; overflow:hidden; flex:0 0 auto; background:var(--bg-soft); }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.qty-ctrl { display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.qty-ctrl button { border:0; background:#fff; width:28px; height:28px; cursor:pointer; color:var(--ink); font-weight:700; }
.qty-ctrl button:hover { background:var(--bg-soft); }
.qty-ctrl span { min-width:26px; text-align:center; font-weight:700; font-size:.9rem; }
.vendor-group-lbl { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:1rem 0 .2rem; display:flex; align-items:center; gap:.4rem; }

/* ---------- Sort bar ---------- */
.sort-select { border:1px solid var(--line-2); border-radius:999px; padding:.5rem 1rem; font-family:var(--font); font-weight:600; color:var(--ink); background:#fff; }

/* ---------- Info row ---------- */
.info-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--mkt-50); color:var(--mkt-700); font-size:1.2rem; flex:0 0 auto; }

/* empty state */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state i { font-size:2.4rem; color:var(--line-2); margin-bottom:1rem; }

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.pdp-gallery-main { aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); }
.pdp-gallery-main img { width:100%; height:100%; object-fit:cover; }
.pdp-thumbs { display:flex; gap:.7rem; margin-top:.8rem; }
.pdp-thumb { width:74px; height:74px; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--bg-soft); padding:0; flex:0 0 auto; }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; }
.pdp-thumb.active { border-color:var(--mkt); }

.pdp-vendor { font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mkt-700); }
.pdp-price { display:flex; align-items:baseline; gap:.7rem; margin:.4rem 0 1rem; }
.pdp-price b { font-size:2rem; font-weight:800; letter-spacing:-.03em; }
.pdp-price del { color:#a9b3ac; font-size:1.1rem; }
.pdp-price .save { background:var(--mkt-50); color:var(--mkt-800); font-weight:700; font-size:.85rem; padding:.2rem .6rem; border-radius:8px; }

.size-row { display:flex; flex-wrap:wrap; gap:.55rem; }
.size-chip { min-width:54px; padding:.55rem .9rem; border:1px solid var(--line-2); border-radius:11px; background:#fff; font-weight:700; cursor:pointer; color:var(--ink); font-family:var(--font); transition:all .18s var(--ease); }
.size-chip:hover { border-color:var(--ink); }
.size-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.qty-stepper { display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.qty-stepper button { border:0; background:#fff; width:42px; height:46px; font-size:1.2rem; font-weight:700; cursor:pointer; color:var(--ink); }
.qty-stepper button:hover { background:var(--bg-soft); }
.qty-stepper span { min-width:40px; text-align:center; font-weight:800; }

.pdp-trust { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem 0; }
.pdp-trust i { color:var(--mkt-700); width:20px; text-align:center; margin-top:.15rem; }

.pdp-tabs .nav-link { color:var(--muted); font-weight:700; border:0; border-bottom:2px solid transparent; border-radius:0; padding:.7rem 0; margin-right:1.6rem; }
.pdp-tabs .nav-link.active { color:var(--ink); border-bottom-color:var(--mkt); background:none; }
.spec-row { display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.spec-row dt { color:var(--muted); font-weight:500; }
.spec-row dd { margin:0; font-weight:700; color:var(--ink); }

.toast-cart {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%); z-index:1080;
  background:var(--ink); color:#fff; padding:.85rem 1.2rem; border-radius:999px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.7rem; font-weight:600; opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.toast-cart.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast-cart .tc-ic { color:var(--brand); background:#fff; width:26px;height:26px;border-radius:50%;display:grid;place-items:center; }
.toast-cart a { color:var(--mkt); text-decoration:none; font-weight:700; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.checkout-card + .checkout-card { margin-top:1.25rem; }
.co-step-head { display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.co-step-num { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--mkt);color:#3d2906;flex:0 0 auto; }
.co-step-head h3 { font-size:1.15rem; margin:0; }

.fulfil-toggle { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.fulfil-opt { border:1.5px solid var(--line-2); border-radius:14px; padding:1rem 1.1rem; cursor:pointer; transition:all .2s var(--ease); }
.fulfil-opt:hover { border-color:var(--mkt); }
.fulfil-opt.active { border-color:var(--mkt); background:var(--mkt-50); }
.fulfil-opt i { font-size:1.3rem; color:var(--mkt-700); }
.fulfil-opt .ft-title { font-weight:800; margin-top:.5rem; }
.fulfil-opt .ft-sub { font-size:.85rem; color:var(--muted); }

.form-label { font-weight:600; font-size:.88rem; color:var(--ink-2); margin-bottom:.3rem; }
.form-control, .form-select { border:1px solid var(--line-2); border-radius:11px; padding:.7rem .9rem; font-family:var(--font); }
.form-control:focus, .form-select:focus { border-color:var(--mkt); box-shadow:0 0 0 .2rem rgba(244,160,32,.18); }

.pay-method { border:1.5px solid var(--line-2); border-radius:12px; padding:.9rem 1.1rem; display:flex; align-items:center; gap:.8rem; cursor:pointer; transition:all .2s var(--ease); }
.pay-method + .pay-method { margin-top:.7rem; }
.pay-method:hover { border-color:var(--mkt); }
.pay-method.active { border-color:var(--mkt); background:var(--mkt-50); }
.pay-method i { font-size:1.3rem; color:var(--ink-2); width:28px; text-align:center; }

.summary-panel { position:sticky; top:90px; }
.summary-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.sum-line { display:flex; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.sum-thumb { width:54px;height:54px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--bg-soft); position:relative; }
.sum-thumb img { width:100%;height:100%;object-fit:cover; }
.sum-qty { position:absolute; top:-7px; right:-7px; background:var(--ink); color:#fff; min-width:20px;height:20px;border-radius:999px;font-size:.72rem;font-weight:800;display:grid;place-items:center;padding:0 4px; }
.sum-tot-row { display:flex; justify-content:space-between; margin-top:.5rem; font-size:.95rem; color:var(--ink-2); }
.sum-grand { display:flex; justify-content:space-between; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:1.2rem; font-weight:800; }

/* confirmation */
.confirm-check { width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--brand-100);color:var(--brand);font-size:2.4rem;margin:0 auto 1.4rem; }
.qr-box { width:200px;height:200px;border-radius:18px;border:1px solid var(--line);padding:14px;background:#fff;margin:0 auto;box-shadow:var(--shadow-sm); }
.qr-box img, .qr-box svg { width:100%;height:100%; }