:root{--brand:#0a3d7c;--brand-dark:#072c5c;--brand-light:#e8f0fc;--gold:#f5a623;--green:#27ae60;--red:#e8344a;--white:#fff;--off-white:#f5f8ff;--g100:#e5eaf4;--g300:#b8c4d8;--g500:#6e7e9a;--g700:#3a4a62;--navy:#0d1f3c;--r:16px;--r-sm:10px;}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-tap-highlight-color:transparent;}
body{font-family:'Poppins',sans-serif;background:var(--off-white);color:var(--navy);min-height:100vh;-webkit-font-smoothing:antialiased;}
header{background:var(--white);border-bottom:2px solid var(--brand-light);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(10,61,124,0.10);}
.header-inner{max-width:560px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.header-logos{display:flex;align-items:center;gap:10px;}
.h-skoop{height:44px;width:auto;object-fit:contain;cursor:pointer;}
.h-partner{height:28px;width:auto;object-fit:contain;}
.h-nps{height:28px;width:28px;border-radius:50%;object-fit:contain;}
.h-div{color:var(--g300);font-size:15px;}
.cart-pill{background:var(--brand);border:none;border-radius:50px;padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:6px;color:white;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;position:relative;transition:all 0.2s;flex-shrink:0;}
.cart-pill:hover{background:var(--brand-dark);}
.cart-bubble{background:var(--gold);color:var(--navy);font-size:10px;font-weight:900;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;}
.hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 60%,#041a38 100%);padding:28px 20px 36px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,0.05);}
.school-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.13);border:1px solid rgba(255,255,255,0.22);border-radius:50px;padding:7px 18px 7px 8px;margin-bottom:18px;}
.school-logo{width:42px;height:42px;border-radius:50%;object-fit:contain;background:white;padding:2px;}
.school-name{color:white;font-size:14px;font-weight:700;text-align:left;line-height:1.2;}
.school-city{color:rgba(255,255,255,0.62);font-size:11px;}
.hero-tagline{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:1.2px;text-transform:uppercase;font-weight:500;margin-bottom:10px;}
.hero h1{font-family:'Nunito',sans-serif;font-size:26px;font-weight:900;color:white;line-height:1.2;margin-bottom:10px;}
.hero h1 span{color:var(--gold);}
.hero p{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;max-width:320px;margin:0 auto;}
.wave{display:block;width:100%;height:28px;margin-bottom:-2px;}
main{max-width:560px;margin:0 auto;padding:8px 16px 150px;}
.section-header{display:flex;align-items:center;gap:10px;margin:22px 0 14px;}
.section-pill{background:var(--brand);color:white;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;padding:6px 16px;border-radius:50px;}
.section-line{flex:1;height:2px;background:var(--g100);border-radius:1px;}
.product-card{background:var(--white);border-radius:var(--r);box-shadow:0 2px 8px rgba(10,61,124,0.10);margin-bottom:14px;border:1.5px solid var(--g100);overflow:hidden;}
.product-header{background:linear-gradient(135deg,var(--brand-light),#d8e8fc);padding:14px 16px 12px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--g100);}
.product-icon{width:48px;height:48px;border-radius:12px;background:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.product-icon svg{width:24px;height:24px;color:white;}
.product-info{flex:1;}
.product-name{font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.product-desc{font-size:11.5px;color:var(--g500);}
.price-tag{text-align:right;flex-shrink:0;}
.price{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;color:var(--brand);line-height:1;}
.price-note{font-size:10px;color:var(--g500);margin-top:2px;}
.price-mrp{font-size:11px;color:#c00;text-decoration:line-through;margin-top:3px;}
.price-band{font-size:10px;color:var(--g500);margin-top:1px;}
.product-body{padding:14px 16px;}
.sel-label{font-size:11px;font-weight:700;color:var(--g500);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:8px;}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.opt{min-width:52px;height:44px;padding:0 14px;border:2px solid var(--g100);border-radius:8px;background:var(--white);font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;color:var(--g700);cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.opt:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
.opt.sel{background:var(--brand);border-color:var(--brand);color:white;font-weight:700;}
.add-btn{width:100%;height:48px;background:var(--brand);color:white;border:none;border-radius:var(--r-sm);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:7px;}
.add-btn:hover:not(:disabled){background:var(--brand-dark);transform:translateY(-1px);}
.add-btn:disabled{background:var(--g100);color:var(--g300);cursor:not-allowed;}
.add-btn.added{background:var(--green);}
.sticky{position:fixed;bottom:0;left:0;right:0;background:var(--navy);padding:12px 20px 20px;display:none;align-items:center;justify-content:space-between;z-index:150;box-shadow:0 -4px 24px rgba(0,0,0,0.25);}
.sticky.vis{display:flex;}
.sticky-info{color:white;}
.sticky-count{font-size:11px;opacity:0.6;margin-bottom:2px;}
.sticky-total{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;}
.sticky-items{margin-top:4px;display:flex;flex-direction:column;gap:3px;}
.sticky-item{font-size:10px;color:rgba(255,255,255,0.75);display:flex;align-items:center;gap:8px;margin-top:5px;}
.pay-btn{background:var(--gold);color:var(--navy);border:none;border-radius:var(--r-sm);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;padding:14px 22px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:7px;flex-shrink:0;}
.pay-btn:hover{background:#f0b93a;}
.pay-btn:disabled{opacity:0.6;cursor:not-allowed;}
.loading{position:fixed;inset:0;background:rgba(13,31,60,0.75);z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.loading.vis{display:flex;}
.spinner{width:52px;height:52px;border:5px solid rgba(255,255,255,0.2);border-top-color:white;border-radius:50%;animation:spin 0.9s linear infinite;margin-bottom:18px;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{color:white;font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;margin-bottom:4px;}
.loading-sub{color:rgba(255,255,255,0.6);font-size:13px;}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--red);color:white;padding:12px 24px;border-radius:50px;font-size:13px;font-weight:600;opacity:0;transition:all 0.3s;z-index:600;pointer-events:none;max-width:88vw;text-align:center;}
.toast.vis{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.ok{background:var(--green);}
.powered{text-align:center;padding:24px 16px 8px;font-size:11px;color:var(--g300);}

/* ── Product icon thumbnail ── */
.product-icon-wrap{flex-shrink:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;}
.product-icon{width:76px;height:76px;border-radius:12px;overflow:hidden;border:2px solid rgba(10,61,124,0.15);transition:transform .15s,box-shadow .15s;}
.product-icon-wrap:hover .product-icon{transform:scale(1.06);box-shadow:0 4px 14px rgba(10,61,124,0.25);}
.product-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.product-icon svg{width:26px;height:26px;color:white;}
.tap-hint{font-size:9.5px;font-weight:700;color:var(--brand);text-align:center;white-space:nowrap;letter-spacing:0.1px;}

/* ── Modal overlay ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);align-items:center;justify-content:center;}
.modal-overlay.vis{display:flex;}
.modal-box{position:relative;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;}
.modal-close{position:absolute;top:-44px;right:4px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;padding:8px;z-index:10;}
.modal-stage{position:relative;width:100%;overflow:hidden;background:#000;border-radius:var(--r);user-select:none;line-height:0;}
.modal-track{display:flex;transition:transform .35s ease;align-items:stretch;}
.modal-slide{min-width:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#000;}
.modal-slide img{width:100%;max-height:72vh;object-fit:contain;display:block;background:#000;}
.modal-slide video{width:100%;max-height:72vh;display:block;background:#000;}
.modal-mbadge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 9px;border-radius:10px;pointer-events:none;}
.modal-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.3);}
.modal-btn.prev{left:10px;}
.modal-btn.next{right:10px;}
.modal-dots{display:flex;justify-content:center;gap:6px;padding:14px 0 8px;}
.modal-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s;}
.modal-dot.active{background:#fff;transform:scale(1.3);}
/* ── Price Table (shoe pricing info, rendered from PRODUCTS config) ── */
.price-table{background:#fff8f0;border:1px solid #ffe0c0;border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:11.5px;color:var(--g700);}
.price-table-title{font-weight:700;color:var(--navy);margin-bottom:6px;}
.price-table-grid{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;}
.price-table-head{color:var(--g500);font-size:10px;font-weight:600;text-transform:uppercase;}
.price-table-head--brand{color:var(--brand);text-transform:none;white-space:normal;line-height:1.3;}
.price-table-mrp{text-decoration:line-through;color:#c00;}
.price-table-you-pay{font-weight:700;color:var(--brand);}

/* ── Price: unset / placeholder state ── */
.price--unset{font-size:15px;color:var(--g500);}

/* ── MRP hidden by default; JS adds .vis to show ── */
.price-mrp{display:none;}
.price-mrp.vis{display:block;}

/* ── Product preview banner (replaces small product-icon in header) ── */
.product-preview{width:100%;height:180px;overflow:hidden;position:relative;cursor:pointer;background:#e8edf5;}
.product-preview img{width:100%;height:100%;object-fit:cover;transition:transform .25s;display:block;}
.product-preview:active img,.product-preview:hover img{transform:scale(1.04);}
.preview-cta{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(10,31,60,0.72));color:#fff;padding:28px 14px 12px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;font-family:'Nunito',sans-serif;pointer-events:none;}

/* ── Size groups ── */
#opts-shoes{display:block;margin-bottom:14px;}
.size-group{margin-bottom:14px;}
.size-group-label{font-size:10px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:7px;}
.size-group-btns{display:flex;flex-wrap:wrap;gap:7px;}

/* ── In-cart opt button state ── */
.opt.in-cart{border-color:var(--green);background:#f0fdf4;color:var(--green);font-weight:700;}
.opt-cart-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:900;margin-left:4px;vertical-align:middle;}

/* ── Qty stepper (sticky bar) ── */
.sticky-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sticky-item-price{font-size:10px;color:rgba(255,255,255,0.9);flex-shrink:0;min-width:52px;text-align:right;}
.qty-stepper{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.qty-btn{width:22px;height:22px;border:1.5px solid rgba(255,255,255,0.35);border-radius:50%;background:none;color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.qty-btn:hover{background:rgba(255,255,255,0.15);}
.qty-num{font-size:12px;font-weight:700;color:#fff;min-width:18px;text-align:center;}

/* ── Qty stepper (socks card) ── */
.qty-stepper-card{display:flex;align-items:center;width:100%;height:48px;border-radius:var(--r-sm);overflow:hidden;border:2px solid var(--brand);}
.qty-btn-card{width:52px;height:100%;background:var(--brand);color:#fff;border:none;font-size:24px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.qty-btn-card:hover{background:var(--brand-dark);}
.qty-val-card{flex:1;text-align:center;font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;color:var(--brand);}

/* ── Socks color badge ── */
.product-color-badge{font-size:11px;color:var(--g500);margin-top:4px;display:flex;align-items:center;gap:5px;}
.color-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--g300);display:inline-block;flex-shrink:0;}
.color-dot.white{background:#fff;}

/* ── Share button ── */
.share-row{display:flex;justify-content:center;padding:8px 0 20px;}
.share-btn{background:none;border:1.5px solid var(--g300);border-radius:50px;padding:10px 22px;color:var(--g700);font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;}
.share-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}