@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
:root {
  --navy: #0a2540; --navy2: #0e3a5f; --gold: #ffb703; --gold2: #fb8500;
  --green: #0a7d3b; --ink: #1c2430; --mut: #68707c; --bg: #f2f5f9; --line: #e5ebf2;
}
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Hind Siliguri', 'Noto Sans Bengali', Arial, sans-serif; background: var(--bg); color: var(--ink); }
a { color: #0b6bcb; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 14px; }

.topbar { background: #061a2c; color: #cfe0ef; font-size: 13.5px; text-align: center; padding: 6px 10px; }
.topbar strong { color: var(--gold); }

.site-header { background: linear-gradient(90deg, #081c30, #0d2f4d 55%, #114a77); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(6,26,44,.35); }
.header-in { display: flex; gap: 14px; align-items: center; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.logo { color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 9px; letter-spacing: .2px; }
.logo-badge { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #231303; font-weight: 800; font-size: 15px; padding: 5px 8px; border-radius: 9px; box-shadow: 0 2px 8px rgba(251,133,0,.45); }
.search { flex: 1; display: flex; min-width: 200px; background: #fff; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.search input { flex: 1; padding: 10px 16px; border: 0; font-size: 15px; outline: none; font-family: inherit; }
.search button { border: 0; background: linear-gradient(180deg, #ffc233, var(--gold)); padding: 10px 20px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 15px; }
.cart-btn { color: #fff; font-weight: 700; position: relative; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 8px 14px; border-radius: 999px; }
.cart-btn:hover { background: rgba(255,255,255,.2); }
.badge { background: #e63946; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 13px; margin-left: 4px; }

.flash { background: #d9f2e2; border: 1px solid #35a852; color: #14532d; padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.err { color: #c1121f; font-size: 14px; margin: 4px 0; }
.muted { color: var(--mut); font-size: 14px; }
.empty { padding: 30px 0; font-size: 17px; }

.hero { position: relative; overflow: hidden; background: radial-gradient(600px 300px at 85% -10%, rgba(255,183,3,.35), transparent 60%), linear-gradient(120deg, #0a2540, #14548c); color: #fff; border-radius: 20px; padding: 38px 28px; margin: 18px 0 8px; box-shadow: 0 10px 30px rgba(10,37,64,.25); }
.hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.3; max-width: 640px; }
.hero p { margin: 0; opacity: .94; font-size: 16.5px; max-width: 560px; line-height: 1.6; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.hero-badges span { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }

.sec-head { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; font-size: 20px; font-weight: 700; }
.sec-head .bar { width: 5px; height: 22px; background: linear-gradient(180deg, var(--gold), var(--gold2)); border-radius: 3px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.chip { background: #fff; border: 1px solid var(--line); color: var(--ink); padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 1px 3px rgba(16,24,40,.05); transition: .15s; }
.chip:hover { border-color: #c4d2e0; transform: translateY(-1px); }
.chip.on { background: linear-gradient(120deg, var(--navy), var(--navy2)); color: #fff; border-color: var(--navy); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(16,24,40,.06); display: flex; flex-direction: column; position: relative; transition: transform .18s, box-shadow .18s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,.13); }
.card > a { display: block; background: #f7fafc; }
.card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.off { position: absolute; top: 10px; left: 10px; z-index: 2; background: linear-gradient(120deg, #e63946, #c1121f); color: #fff; font-weight: 700; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; box-shadow: 0 3px 8px rgba(193,18,31,.4); }
.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { margin: 0; font-size: 16px; line-height: 1.45; }
.card-body h3 a { color: var(--ink); }
.cat { align-self: flex-start; font-size: 11.5px; background: #fff3d1; color: #8a5a00; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 6px; }
.price { font-size: 20px; font-weight: 800; color: var(--green); margin: 2px 0; }
.price del { color: #9aa3ad; font-weight: 400; font-size: 14px; margin-left: 6px; }
.price.big { font-size: 28px; }
.card-actions { display: flex; gap: 8px; margin-top: auto; }
.card-actions form { flex: 1; }
.card-actions .btn { width: 100%; }

.btn { background: linear-gradient(180deg, #ffc233, var(--gold)); color: #231303; border: 0; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 15px; display: inline-block; text-align: center; font-family: inherit; box-shadow: 0 3px 8px rgba(251,133,0,.3); transition: .15s; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; }
.btn.ghost:hover { background: #eef4fa; }
.btn.danger { background: #e63946; color: #fff; box-shadow: none; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.big { padding: 14px 22px; font-size: 17px; border-radius: 12px; }
.btn.block { display: block; width: 100%; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 32px; }
.features > div { background: #fff; border-radius: 16px; border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 18px 16px; font-size: 28px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 8px rgba(16,24,40,.05); }
.features strong { font-size: 16px; }
.features span { font-size: 14px; color: var(--mut); }

.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0; }
.p-img img { width: 100%; border-radius: 18px; max-height: 480px; object-fit: cover; box-shadow: 0 10px 26px rgba(16,24,40,.14); border: 1px solid var(--line); }
.p-info { background: #fff; border-radius: 18px; padding: 22px; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(16,24,40,.06); align-self: start; }
.p-info h1 { margin: 6px 0; font-size: 26px; line-height: 1.4; }
.desc { line-height: 1.75; color: #374151; white-space: pre-line; }
.buy-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 16px 0; }
.buy-row input[type=number] { width: 80px; padding: 10px; border: 1px solid #ccd3db; border-radius: 9px; margin-left: 6px; font-family: inherit; }
.ticks { list-style: none; padding: 0; line-height: 2; margin: 10px 0; }
.ticks li::before { content: '✔ '; color: var(--green); font-weight: 700; }
.sec-title, .page-title { margin: 20px 0 12px; }

.cart-table { width: 100%; background: #fff; border-radius: 14px; border-collapse: collapse; overflow: hidden; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.cart-table th, .cart-table td { padding: 11px; border-bottom: 1px solid #edf0f3; text-align: left; vertical-align: middle; }
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
.qty-form { display: flex; gap: 6px; }
.qty-form input { width: 64px; padding: 6px; border: 1px solid #ccd3db; border-radius: 7px; font-family: inherit; }
.cart-total { background: #fff; border-radius: 14px; padding: 18px; margin: 14px 0 30px; text-align: right; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.cart-total .btn { margin-top: 8px; }

.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 30px; }
.checkout-form, .summary { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(16,24,40,.06); border: 1px solid var(--line); }
.checkout-form label { display: block; font-weight: 600; margin-bottom: 12px; }
.checkout-form input, .checkout-form textarea, .checkout-form select { width: 100%; padding: 11px; border: 1px solid #ccd3db; border-radius: 9px; margin-top: 5px; font-size: 15px; font-family: inherit; }
.checkout-form input:focus, .checkout-form textarea:focus, .checkout-form select:focus { outline: 2px solid rgba(255,183,3,.55); border-color: var(--gold); }
.summary h3 { margin-top: 0; }
.summary.left { text-align: left; margin: 16px 0; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e5e9ee; }
.sum-row.total { font-weight: 800; font-size: 17px; border-bottom: 0; }

.success-box { background: #fff; border-radius: 18px; padding: 34px 22px; text-align: center; margin: 22px 0 34px; box-shadow: 0 4px 16px rgba(16,24,40,.08); border: 1px solid var(--line); }
.ok-icon { font-size: 52px; }

.site-footer { background: linear-gradient(180deg, #0b2745, #071a2e); color: #dbe4ee; margin-top: 10px; border-top: 3px solid var(--gold); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 10px; }
.foot-grid strong { color: #fff; }
.copy { text-align: center; padding: 12px; font-size: 13px; color: #8fa5bb; border-top: 1px solid rgba(255,255,255,.12); }

.track-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(16,24,40,.06); max-width: 640px; margin-bottom: 16px; }
.track-box label { display: block; font-weight: 600; margin-bottom: 12px; }
.track-box input { width: 100%; padding: 11px; border: 1px solid #ccd3db; border-radius: 9px; margin-top: 5px; font-size: 15px; font-family: inherit; }
.track-box input:focus { outline: 2px solid rgba(255,183,3,.55); border-color: var(--gold); }
.track-err { background: #fdecec; border: 1px solid #f3b6b6; color: #8a1f1f; padding: 12px 14px; border-radius: 10px; max-width: 640px; margin-bottom: 16px; line-height: 1.6; }
.track-result { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(16,24,40,.06); max-width: 640px; margin-bottom: 30px; }
.track-result h3 { margin: 0 0 4px; }
.status-banner { border-radius: 10px; padding: 11px 14px; font-weight: 700; margin: 12px 0; line-height: 1.55; }
.status-banner.pending { background: #fff6db; color: #7a5200; }
.status-banner.ok { background: #e2f4e8; color: #14532d; }
.status-banner.bad { background: #fdecec; color: #8a1f1f; }
.steps { display: flex; margin: 18px 0 8px; }
.step { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--mut); padding-top: 24px; }
.step::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: #d3dbe4; z-index: 1; }
.step::after { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: #d3dbe4; }
.step:first-child::after { display: none; }
.step.done { color: var(--green); font-weight: 700; }
.step.done::before { background: var(--green); }
.step.done::after { background: var(--green); }
.step.now { color: var(--ink); font-weight: 700; }
.step.now::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(255,183,3,.3); }

@media (max-width: 720px) {
  .product-page, .checkout-grid { grid-template-columns: 1fr; }
  .hero { padding: 26px 18px; }
  .hero h1 { font-size: 23px; }
  .hero p { font-size: 15px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card img { height: 128px; }
  .card-body { padding: 10px; }
  .card-body h3 { font-size: 13.5px; }
  .price { font-size: 16.5px; }
  .card-actions .btn { font-size: 12.5px; padding: 8px 4px; }
  .logo { font-size: 19px; }
  .search { order: 3; flex-basis: 100%; }
  .cart-table th:nth-child(2), .cart-table td:nth-child(2) { display: none; }
}

/* ===== Product page v3: gallery, discount badge, order box, tabs (2026-11-04) ===== */
.p-gallery { align-self: start; }
.g-main { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(16,24,40,.14); background: #fff; }
.g-main > img { width: 100%; height: 480px; object-fit: cover; display: block; }
.disc-badge { position: absolute; top: 14px; right: 14px; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b5e, #c1121f 70%); color: #fff; font-weight: 800; font-size: 15px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(255,255,255,.75); box-shadow: 0 6px 16px rgba(193,18,31,.45); z-index: 3; animation: discSpin 9s linear infinite; }
@keyframes discSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.g-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--navy); font-size: 17px; cursor: pointer; box-shadow: 0 3px 10px rgba(16,24,40,.25); z-index: 2; }
.g-arrow:hover { background: #fff; }
.g-prev { left: 10px; }
.g-next { right: 10px; }
.g-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 2.5px solid transparent; cursor: pointer; background: #fff; }
.g-thumb.on { border-color: var(--green); box-shadow: 0 3px 10px rgba(10,125,59,.35); }
.save-tag { display: inline-block; vertical-align: middle; background: linear-gradient(120deg, #e63946, #c1121f); color: #fff; font-size: 13.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; margin-left: 8px; box-shadow: 0 3px 8px rgba(193,18,31,.35); }
.order-box { margin: 14px 0 4px; }
.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 600; }
.qty-ctrl { display: flex; align-items: stretch; border: 1px solid #ccd3db; border-radius: 10px; overflow: hidden; }
.qty-ctrl button { width: 38px; border: 0; background: #eef4fa; font-size: 19px; cursor: pointer; font-family: inherit; color: var(--navy); }
.qty-ctrl input { width: 56px; text-align: center; border: 0; padding: 9px 2px; font-size: 15.5px; font-family: inherit; outline: none; }
.btn.order-btn { display: block; width: 100%; background: linear-gradient(180deg, #14a44e, var(--green)); color: #fff; font-size: 17.5px; padding: 14px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(10,125,59,.35); animation: orderBounce 1.6s ease-in-out infinite; }
.btn.order-btn:hover { filter: brightness(1.06); }
@keyframes orderBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ship-box { background: #f7fafc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.ship-title { font-weight: 700; margin-bottom: 6px; }
.ship-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; }
.ship-row:last-of-type { border-bottom: 0; }
.ship-note { margin-top: 8px; color: var(--mut); font-size: 14px; }
.p-tabs { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 2px 0 12px; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.tab-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.tab-btn { border: 1.5px solid var(--green); background: #fff; color: var(--ink); padding: 9px 24px; border-radius: 999px; font-weight: 700; font-size: 15.5px; cursor: pointer; font-family: inherit; transition: .15s; }
.tab-btn.on { background: var(--green); color: #fff; }
.tab-panel .desc { margin: 0; }

@media (max-width: 720px) {
  .g-main > img { height: 300px; }
  .disc-badge { width: 60px; height: 60px; font-size: 12.5px; top: 10px; right: 10px; }
  .g-thumb { width: 56px; height: 56px; }
  .tab-btn { padding: 8px 16px; font-size: 14px; }
}

/* ===== Colour variant picker (2026-11-04) ===== */
.variant-picker { margin: 14px 0 2px; }
.variant-label { font-size: 15.5px; margin-bottom: 8px; }
.variant-swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.v-swatch { background: #fff; border: 2.5px solid var(--line); border-radius: 13px; padding: 5px 7px 4px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: .15s; }
.v-swatch img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; display: block; }
.v-swatch span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.v-swatch:hover { border-color: #b9c8d6; }
.v-swatch.on { border-color: var(--green); box-shadow: 0 3px 10px rgba(10,125,59,.3); }

/* ===== Stock Out state (2026-11-04) ===== */
.flash.error { background: #fdecec; border-color: #e63946; color: #8a1f1f; }
.stock-off { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(23, 32, 42, .92); color: #fff; font-weight: 800; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; box-shadow: 0 3px 9px rgba(16,24,40,.35); }
.card.is-out-of-stock > a img { filter: grayscale(.55); opacity: .72; }
.card-actions .stock-out-btn { flex: 1; width: 100%; }
.stock-out-btn { background: #e3e7ec; color: #66707c; box-shadow: none; }
.stock-badge-main { position: absolute; top: 14px; left: 14px; z-index: 4; background: rgba(193,18,31,.95); color: #fff; font-weight: 800; font-size: 14px; padding: 7px 13px; border-radius: 999px; box-shadow: 0 5px 14px rgba(193,18,31,.4); }
.stock-tag { display: inline-block; vertical-align: middle; background: #fdecec; border: 1px solid #f3b6b6; color: #8a1f1f; font-size: 13.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; margin-left: 8px; }
.stock-out-box { background: #fff5f5; border: 1.5px solid #f3b6b6; color: #8a1f1f; border-radius: 12px; padding: 14px; margin: 14px 0 4px; line-height: 1.65; }
.stock-out-box strong { display: block; font-size: 17px; margin-bottom: 3px; }
.stock-out-box .order-btn { margin-top: 12px; }
.btn:disabled { cursor: not-allowed; opacity: .78; transform: none !important; filter: none !important; }
.btn.order-btn:disabled { background: linear-gradient(180deg, #aab3bc, #6c757d); box-shadow: none; animation: none; }
.cart-stock-warning { color: #c1121f; font-weight: 700; }