@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--g:#18e45e;--g2:#0db94a;--bg:#060708;--panel:#0c0f11;--ink:#fff;--muted:#a1a7ad;--line:rgba(255,255,255,.11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(1440px,calc(100% - 82px));margin:auto}.announcement{height:46px;background:var(--g2);color:#001b09;display:flex;align-items:center;overflow:hidden;font:800 11px/1 'Roboto Mono',monospace;letter-spacing:.04em}.ticker{display:flex;gap:44px;min-width:max-content;animation:tick 25s linear infinite}@keyframes tick{to{transform:translateX(-45%)}}.ticker b{margin-left:28px}.header{height:70px;background:#060708;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.07)}.nav{height:100%;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}.brand-main{font:700 28px/1 'Barlow Condensed';letter-spacing:-.02em}.brand-main span{color:var(--g)}.brand small{font-size:8px;color:#697178;letter-spacing:.18em}.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}.nav-links a{font-size:11px;color:#f0f2f3}.nav-links a.active,.nav-links a:hover{color:var(--g)}.nav-actions{display:flex;gap:4px;margin-left:12px}.nav-actions button{position:relative;border:0;background:none;color:#e7e9ea;width:38px;height:38px;font-size:23px;cursor:pointer}.mini-count{position:absolute;right:1px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--g);color:#001b09;font:800 8px/14px Inter}.menu-btn{display:none}.hero{height:620px;position:relative;overflow:hidden}.hero-media{position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat}.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,4,4,.94),rgba(2,4,4,.58) 40%,rgba(2,4,4,.14) 72%,rgba(2,4,4,.7)),linear-gradient(0deg,rgba(2,4,4,.92),transparent 30%)}.hero-inner{height:100%;display:flex;align-items:center;position:relative;z-index:2}.hero-copy{padding-top:35px}.eyebrow{color:var(--g);font:800 11px/1 'Roboto Mono',monospace;letter-spacing:.28em}.hero h1{font:500 clamp(70px,7vw,112px)/.82 'Barlow Condensed';margin:19px 0 14px;letter-spacing:-.03em}.hero p{font-size:22px;margin:0 0 27px}.hero-actions{display:flex;align-items:center;gap:24px}.btn{height:56px;padding:0 29px;border:0;font:800 11px/56px 'Roboto Mono',monospace;letter-spacing:.08em;cursor:pointer;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center}.btn-green{background:var(--g);color:#00180a}.hero-meta{color:#d7dcdf;font:12px 'Roboto Mono',monospace}.hero-meta b{color:var(--g)}.hero-meta strong{padding:0 15px;color:#9da5aa}.hero-side{position:absolute;right:58px;top:98px;z-index:2;font:500 13px/1.55 'Roboto Mono',monospace;letter-spacing:.26em;text-align:left}.hero-side i{display:block;width:28px;height:2px;background:#fff;margin:26px 0}.hero-side small{font:600 9px/1.9 'Roboto Mono';letter-spacing:.15em}.hero-brand{position:absolute;right:58px;bottom:56px;font:700 25px 'Barlow Condensed'}.hero-brand span{color:var(--g)}.hero-dots{position:absolute;left:max(41px,calc((100vw - 1440px)/2 + 41px));bottom:20px;display:flex;gap:10px;z-index:3}.hero-dots i{width:32px;height:2px;background:#7b858b}.hero-dots i.active{background:var(--g)}.service-band{background:#0b0d0f;border-bottom:1px solid var(--line)}.service-grid{display:grid;grid-template-columns:repeat(5,1fr)}.service-grid>div{display:flex;gap:16px;align-items:center;padding:21px 20px;border-right:1px solid var(--line)}.service-grid>div:last-child{border-right:0}.service-grid span{font-size:27px}.service-grid b{display:block;font:800 11px 'Roboto Mono'}.service-grid small{display:block;color:#a5aaae;margin-top:5px;font-size:10px}.section{padding:40px 0}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-title h2{margin:0;font:600 37px/1 'Barlow Condensed';letter-spacing:.01em}.section-title a{color:var(--g);font:700 11px 'Roboto Mono'}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.cat-card{min-height:142px;border-radius:7px;background-size:cover;background-position:center;position:relative;overflow:hidden;padding:17px;display:flex;justify-content:flex-end;flex-direction:column}.cat-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.02) 70%)}.cat-card>*{position:relative;z-index:1}.cat-card span{font:600 19px 'Barlow Condensed'}.cat-card small{font-size:9px;margin-top:6px}.search-row{display:flex;gap:8px;margin-bottom:12px}.search-row input{flex:1;height:48px;background:#090b0d;border:1px solid #252b30;color:#fff;padding:0 15px;outline:none}.filters{display:flex;gap:7px;margin-bottom:18px;overflow:auto}.filter{height:35px;border:1px solid #2a3136;background:#090b0d;color:#aeb4b8;padding:0 13px;font:800 9px 'Roboto Mono';cursor:pointer}.filter.active,.filter:hover{background:#fff;color:#080a0c}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.product-card{background:#0b0e10;border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:.2s;overflow:hidden}.product-card:hover{transform:translateY(-3px);border-color:rgba(24,228,94,.28)}.product-media{aspect-ratio:.83;position:relative;background:#181b1e;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover;transition:.3s}.product-card:hover img{transform:scale(1.03)}.tag{position:absolute;z-index:2;left:8px;top:8px;background:var(--g);color:#002009;padding:5px 7px;font:900 8px 'Roboto Mono'}.heart{position:absolute;z-index:3;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}.quick-add{position:absolute;left:10px;right:10px;bottom:10px;height:36px;border:0;background:#fff;color:#060708;font:800 9px 'Roboto Mono';transform:translateY(48px);transition:.2s;cursor:pointer}.product-card:hover .quick-add{transform:none}.product-info{padding:10px 8px 14px}.product-name{font-size:11px;font-weight:700}.product-meta{font:8px 'Roboto Mono';color:#767e84;margin-top:4px;text-transform:uppercase}.product-price{font-size:11px;margin-top:7px}.product-old{color:#616970;text-decoration:line-through;margin-left:5px}.product-sale{color:var(--g);font:800 8px 'Roboto Mono';margin-left:6px}.editorial{padding:30px 0 72px}.editorial-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:470px}.editorial-copy{background:#0b0d0f;padding:64px}.editorial-copy h3{font:600 75px/.88 'Barlow Condensed';margin:13px 0 18px}.editorial-copy p{color:#aeb4b9;max-width:530px;font-size:13px;line-height:1.7;margin-bottom:26px}.editorial-image{background:url('https://images.unsplash.com/photo-1517466787929-bc90951d0974?auto=format&fit=crop&w=1200&q=85') center/cover}.newsletter{padding-bottom:75px}.newsletter-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.newsletter-box h3{font:600 46px 'Barlow Condensed';margin:9px 0 4px}.newsletter-box p{margin:0;color:#8e969c;font-size:10px}.newsletter-box form{display:flex;gap:8px;width:min(520px,100%)}.newsletter-box input{flex:1;height:56px;background:#090b0d;border:1px solid #2b3135;color:#fff;padding:0 13px;outline:none}footer{border-top:1px solid var(--line);padding:40px 0 55px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}.footer-grid p{color:#747d83;font-size:11px;max-width:250px;margin-top:12px}.footer-grid>b,.footer-grid>div:not(:first-child)>b{font:800 9px 'Roboto Mono';color:#737b81;display:block;margin-bottom:12px}.footer-grid>div:not(:first-child){display:grid;align-content:start;gap:8px}.footer-grid a{font-size:11px;color:#d5d9db}.float-wa{position:fixed;right:26px;bottom:25px;width:58px;height:58px;border-radius:50%;background:#1ed760;color:#03100a;display:grid;place-items:center;font-size:29px;z-index:80}.float-help{position:fixed;right:18px;bottom:15px;transform:translateY(0);width:30px;height:30px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;z-index:81;box-shadow:0 4px 14px rgba(0,0,0,.3);font-weight:800}.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;visibility:hidden;z-index:90;transition:.2s}.drawer-backdrop.open{opacity:1;visibility:visible}.cart-drawer{position:fixed;right:0;top:0;bottom:0;width:min(430px,100%);background:#07090a;border-left:1px solid #252a2e;z-index:91;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column}.cart-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}.drawer-head strong{font:600 28px 'Barlow Condensed';text-transform:uppercase}.drawer-head button{border:0;background:none;color:#fff;font-size:28px;cursor:pointer}.cart-list{padding:17px;overflow:auto}.cart-item{display:grid;grid-template-columns:65px 1fr auto;gap:11px;align-items:center;margin-bottom:14px}.cart-item img{width:65px;height:80px;object-fit:cover}.cart-item b{font-size:11px}.cart-item span{display:block;color:#80888e;font-size:9px;margin-top:3px}.cart-remove{background:none;border:0;color:#6d7479;cursor:pointer}.drawer-bottom{margin-top:auto;padding:18px;border-top:1px solid var(--line)}.subtotal{display:flex;justify-content:space-between;margin-bottom:13px}.full{width:100%}.empty{padding:44px 0;text-align:center;color:#647078;font:700 10px 'Roboto Mono'}.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}.modal.open{display:flex}.modal-card{width:min(920px,100%);background:#0a0c0e;border:1px solid #282d31}.modal-body{padding:20px}.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.product-detail-img{background:#15181b}.product-detail-img img{width:100%;height:100%;max-height:520px;object-fit:cover}.detail-price{font-size:18px;margin:16px 0}.detail-copy{color:#a2a9ad;font-size:12px;line-height:1.7}.size-row{display:flex;gap:7px;margin:9px 0 20px}.size-btn{height:38px;min-width:42px;border:1px solid #30363b;background:#0b0d0f;color:#fff;cursor:pointer}.size-btn.active{background:#fff;color:#050607}.qty-row{display:flex;gap:9px}.qty{display:flex;border:1px solid #30363b}.qty button,.qty input{width:38px;height:46px;border:0;background:#0b0d0f;color:#fff;text-align:center}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#fff;color:#050607;padding:11px 16px;font:800 10px 'Roboto Mono';opacity:0;pointer-events:none;z-index:120;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1200px){.container{width:min(1180px,calc(100% - 36px))}.nav-links{gap:16px}.nav-links a{font-size:10px}.grid{grid-template-columns:repeat(4,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.nav-links{display:none;position:absolute;left:0;right:0;top:70px;background:#080a0b;padding:18px 20px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.menu-btn{display:block}.service-grid{grid-template-columns:repeat(2,1fr)}.service-grid>div:nth-child(2){border-right:0}.hero-side,.hero-brand{display:none}.hero{height:560px}.editorial-wrap{grid-template-columns:1fr}.editorial-image{height:330px}.newsletter-box{display:block}.newsletter-box form{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.container{width:calc(100% - 24px)}.announcement{height:38px;font-size:9px}.header{height:62px}.brand-main{font-size:23px}.nav-links{top:62px}.hero{height:510px}.hero h1{font-size:62px}.hero p{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-meta{font-size:9px}.service-grid{grid-template-columns:1fr}.service-grid>div{border-right:0;border-bottom:1px solid var(--line)}.category-grid{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}.section-title h2{font-size:31px}.editorial-copy{padding:38px 24px}.editorial-copy h3{font-size:59px}.newsletter-box h3{font-size:38px}.footer-grid{grid-template-columns:1fr}.product-detail-grid{grid-template-columns:1fr}.product-detail-img{max-height:330px}.float-wa{right:17px;width:52px;height:52px}.float-help{right:10px}}


/* Live customization preview */
.custom-live-card{margin:12px 0 14px;padding:16px 14px 13px;border:1px solid #22292b;border-radius:14px;background:linear-gradient(145deg,#111416,#070909);text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.custom-live-name{font:700 11px/1.1 monospace;letter-spacing:.28em;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-live-number{margin-top:3px;font:800 58px/.82 'Barlow Condensed',Impact,sans-serif;color:#fff;letter-spacing:-.02em}
.custom-live-card small{display:block;margin-top:10px;color:#647174;font:400 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.01em}
.detail-print-preview{position:absolute;left:50%;bottom:18px;transform:translate(-50%,8px);width:min(58%,220px);padding:10px 12px 8px;background:rgba(4,7,8,.82);border:1px solid rgba(255,255,255,.12);border-radius:14px;text-align:center;opacity:.84;backdrop-filter:blur(7px);pointer-events:none;transition:.18s ease}
.detail-print-preview.active{opacity:1;border-color:rgba(0,239,104,.38);transform:translate(-50%,0)}
.detail-print-name{font:700 10px/1.1 monospace;letter-spacing:.22em;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-print-number{margin-top:3px;font:800 48px/.82 'Barlow Condensed',Impact,sans-serif;color:#fff}
@media(max-width:700px){.custom-live-number{font-size:48px}.detail-print-preview{width:min(62%,190px)}}


/* =========================================================
   TALKJERSEY — FUTURE READY PRODUCT DETAIL
   UI OVERRIDES — isolated to product/detail experience
========================================================= */

.modal{
  padding:20px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.modal-card{
  width:min(1080px,96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 10%,rgba(24,228,94,.055),transparent 28%),
    linear-gradient(145deg,#090d0f,#060809);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.modal-card>.drawer-head{
  flex:0 0 auto;
  min-height:58px;
  padding:15px 18px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.modal-card>.drawer-head strong{
  font-size:26px;
  letter-spacing:.02em;
}

.modal-card>.drawer-head button{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #273338;
  border-radius:5px;
  background:#080c0e;
  color:#fff;
  font-size:22px;
  transition:.2s ease;
}

.modal-card>.drawer-head button:hover{
  color:#00ef68;
  border-color:#00ef68;
  box-shadow:0 0 18px rgba(0,239,104,.12);
}

.modal-body{
  padding:18px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#263338 transparent;
}

.modal-body::-webkit-scrollbar{
  width:5px;
}

.modal-body::-webkit-scrollbar-track{
  background:transparent;
}

.modal-body::-webkit-scrollbar-thumb{
  background:#263338;
  border-radius:20px;
}


/* PRODUCT DETAIL LAYOUT */

.product-detail-grid{
  display:grid;
  grid-template-columns:minmax(380px,46%) minmax(0,1fr);
  gap:26px;
  align-items:start;
}

.product-detail-img{
  position:relative;
  height:min(620px,calc(92vh - 105px));
  min-height:420px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:#0c1113;
}

.product-detail-img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),transparent 48%,rgba(0,0,0,.18));
}

.product-detail-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.detail-panel{
  min-width:0;
  padding:4px 2px 8px 0;
}

.detail-panel h2{
  max-width:100%;
}

.detail-price{
  color:#fff;
  font:700 20px 'Barlow Condensed',sans-serif;
}

.detail-copy{
  max-width:650px;
  margin:12px 0 18px;
}


/* SIZE */

.detail-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:17px 0 9px;
}

.detail-section-head>span{
  color:#7f8d92;
  font:800 9px/1 'Roboto Mono',monospace;
  letter-spacing:.17em;
}

.detail-section-head em{
  color:#4f6065;
  font:700 8px 'Roboto Mono',monospace;
  font-style:normal;
  letter-spacing:.11em;
}

.size-guide-trigger{
  appearance:none;
  border:1px solid rgba(24,228,94,.45);
  border-radius:5px;
  background:rgba(24,228,94,.035);
  color:#1cf06b;
  padding:9px 12px;
  font:800 8px 'Roboto Mono',monospace;
  letter-spacing:.11em;
  cursor:pointer;
  white-space:nowrap;
  transition:.22s ease;
}

.size-guide-trigger:hover{
  background:#18e45e;
  color:#001608;
  border-color:#18e45e;
  box-shadow:0 0 24px rgba(24,228,94,.16);
}

.size-row{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 5px;
}

.size-row .size-btn{
  appearance:none;
  min-width:43px;
  height:39px;
  padding:0 12px;
  border:1px solid #29363b;
  border-radius:4px;
  background:#090d0f;
  color:#e8edef;
  font:700 12px 'Barlow Condensed',sans-serif;
  cursor:pointer;
  transition:.18s ease;
}

.size-row .size-btn:hover{
  border-color:#18e45e;
  color:#18e45e;
  transform:translateY(-1px);
}

.size-row .size-btn.active{
  background:#f4f7f7;
  color:#050708;
  border-color:#f4f7f7;
  box-shadow:none;
}


/* HIDDEN BY DEFAULT — ONLY OPENS ON CLICK */

.size-guide-inline{
  display:none;
  margin:11px 0 15px;
  padding:0;
  border:1px solid #1f2b2f;
  border-radius:8px;
  overflow:hidden;
  background:#080c0e;
}

.size-guide-inline.open{
  display:block;
  animation:JVSizeGuideIn .2s ease;
}

@keyframes JVSizeGuideIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

.size-guide-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 13px;
  border-bottom:1px solid #1b272b;
  background:rgba(24,228,94,.03);
}

.size-guide-head b{
  color:#18e45e;
  font:800 9px 'Roboto Mono',monospace;
  letter-spacing:.15em;
}

.size-guide-head button{
  appearance:none;
  width:24px;
  height:24px;
  border:1px solid #28353a;
  border-radius:4px;
  background:#0b1012;
  color:#aab4b8;
  cursor:pointer;
}

.size-guide-inline table{
  width:100%;
  border-collapse:collapse;
}

.size-guide-inline th,
.size-guide-inline td{
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  text-align:left;
}

.size-guide-inline th{
  color:#627277;
  font:800 8px 'Roboto Mono',monospace;
  letter-spacing:.12em;
}

.size-guide-inline td{
  color:#e3eaec;
  font:600 11px 'Roboto Mono',monospace;
}

.size-guide-inline small{
  display:block;
  padding:10px 12px 12px;
  color:#617176;
  font-size:9px;
  line-height:1.45;
}


/* CUSTOMIZATION */

.custom-box{
  margin-top:18px;
  padding:13px;
  border:1px solid #1e2b2f;
  border-radius:9px;
  background:
    radial-gradient(circle at 100% 0%,rgba(24,228,94,.055),transparent 34%),
    #080c0e;
}

.custom-live-card{
  min-height:124px;
  margin:10px 0 12px;
  border:1px solid #202d31;
  border-radius:9px;
  background:
    radial-gradient(circle at 50% 15%,rgba(255,255,255,.045),transparent 42%),
    linear-gradient(145deg,#101518,#090c0e);
}

.custom-live-name{
  color:#fff;
  font:900 10px 'Barlow Condensed',sans-serif;
  letter-spacing:.27em;
}

.custom-live-number{
  color:#fff;
  font:900 55px/.82 'Barlow Condensed',sans-serif;
}

.custom-live-card small{
  margin-top:12px;
  color:#536469;
  font-size:8px;
}

.print-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.print-option{
  appearance:none;
  min-height:55px;
  padding:9px 10px;
  border:1px solid #263338;
  border-radius:6px;
  background:#090d0f;
  color:#cbd4d7;
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}

.print-option:hover{
  border-color:#536267;
}

.print-option.active{
  border-color:#18e45e;
  background:rgba(24,228,94,.065);
  box-shadow:0 0 18px rgba(24,228,94,.055);
}

.print-option span{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  font-weight:700;
}

.print-option b{
  display:block;
  color:#66767b;
  font:700 8px 'Roboto Mono',monospace;
}

.print-option.active span,
.print-option.active b{
  color:#18e45e;
}

.custom-fields{
  display:grid;
  grid-template-columns:1fr 110px;
  gap:8px;
  margin-top:9px;
}

.custom-fields label{
  color:#6b7c81;
  font:800 8px 'Roboto Mono',monospace;
  letter-spacing:.1em;
}

.custom-fields input{
  width:100%;
  height:42px;
  margin-top:6px;
  padding:0 11px;
  border:1px solid #29373c;
  border-radius:5px;
  outline:none;
  background:#050809;
  color:#fff;
  font:600 11px 'Roboto Mono',monospace;
}

.custom-fields input:focus{
  border-color:#18e45e;
  box-shadow:0 0 0 2px rgba(24,228,94,.06);
}

.badge-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:13px 0 7px;
}

.badge-head span{
  color:#738287;
  font:800 8px 'Roboto Mono',monospace;
  letter-spacing:.12em;
}

.badge-head small{
  color:#46565b;
  font:700 7px 'Roboto Mono',monospace;
}

.badge-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  max-height:135px;
  overflow:auto;
  padding-right:2px;
}

.badge-option{
  appearance:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 8px;
  border:1px solid #202d31;
  border-radius:5px;
  background:#090d0f;
  color:#748286;
  cursor:pointer;
  transition:.18s ease;
}

.badge-option span{
  font:700 7px 'Roboto Mono',monospace;
}

.badge-option b{
  color:#4f6065;
  font:700 7px 'Roboto Mono',monospace;
}

.badge-option:hover{
  border-color:#5b6a6f;
  color:#dfe6e8;
}

.badge-option.active{
  border-color:#18e45e;
  background:rgba(24,228,94,.06);
  color:#18e45e;
}

.badge-option.active b{
  color:#18e45e;
}

.prepaid-note{
  margin-top:10px;
  padding:8px 9px;
  border-left:2px solid #18e45e;
  background:rgba(24,228,94,.025);
  color:#668078;
  font:700 7px/1.5 'Roboto Mono',monospace;
  letter-spacing:.07em;
}

.detail-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  padding:11px 0;
  border-top:1px solid #1a2529;
}

.detail-total-row span{
  color:#627176;
  font:800 8px 'Roboto Mono',monospace;
  letter-spacing:.14em;
}

.detail-total-row b{
  color:#18e45e;
  font:900 19px 'Barlow Condensed',sans-serif;
}

.qty-row{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.qty{
  flex:0 0 auto;
  height:46px;
  display:flex;
  border:1px solid #29363b;
  border-radius:5px;
  overflow:hidden;
  background:#090d0f;
}

.qty button,
.qty input{
  width:40px;
  height:46px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:center;
}

.qty button{
  cursor:pointer;
  color:#18e45e;
}

.qty input{
  font:800 12px 'Roboto Mono',monospace;
}

.qty-row>.btn{
  min-height:46px;
  height:46px;
  font-size:9px;
  border-radius:5px;
}


/* LIVE PRINT PREVIEW — deliberately subtle so product stays visible */

.detail-print-preview{
  position:absolute;
  left:51%;
  top:45%;
  width:140px;
  transform:translate(-50%,-50%);
  z-index:4;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:.2s ease;
}

.detail-print-preview.active{
  opacity:1;
}

.detail-print-name{
  color:#fff;
  font:900 10px 'Barlow Condensed',sans-serif;
  letter-spacing:.19em;
  text-shadow:0 2px 7px #000;
}

.detail-print-number{
  color:#fff;
  font:900 58px/.82 'Barlow Condensed',sans-serif;
  text-shadow:0 3px 8px #000;
}


/* MOBILE DETAIL */

@media(max-width:850px){

  .modal{
    padding:10px;
    align-items:flex-end;
  }

  .modal-card{
    width:100%;
    max-height:94vh;
    border-radius:10px 10px 0 0;
  }

  .modal-body{
    padding:13px;
  }

  .product-detail-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .product-detail-img{
    height:330px;
    min-height:0;
  }

  .print-options{
    grid-template-columns:1fr;
  }

  .custom-fields{
    grid-template-columns:1fr;
  }

  .badge-grid{
    grid-template-columns:1fr;
    max-height:160px;
  }
}

@media(max-width:520px){

  .modal-card>.drawer-head strong{
    font-size:22px;
  }

  .detail-panel h2{
    font-size:38px !important;
  }

  .detail-section-head{
    align-items:flex-start;
  }

  .size-guide-trigger{
    padding:8px 9px;
    font-size:7px;
  }

  .custom-live-number{
    font-size:49px;
  }
}


/* =========================================================
   LIVE JERSEY PRINT PREVIEW — FINAL OVERRIDE
   Fixes: input jumping + undersized left-side number
========================================================= */

.detail-print-preview{
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:220px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:block !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
  text-align:center !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .18s ease !important;
  overflow:visible !important;
}

.detail-print-preview.active{
  opacity:1 !important;
  visibility:visible !important;
}

.detail-print-name{
  display:block !important;
  width:100% !important;
  color:#fff !important;
  font:900 15px/1 'Barlow Condensed',sans-serif !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.55) !important;
}

.detail-print-number{
  display:block !important;
  width:100% !important;
  margin-top:7px !important;
  color:#fff !important;
  font:900 118px/.75 'Barlow Condensed',sans-serif !important;
  letter-spacing:-.035em !important;
  text-shadow:
    0 4px 10px rgba(0,0,0,.95),
    0 0 12px rgba(0,0,0,.5) !important;
}

/* Prevent the name field from ever being forced out of its box */
.custom-fields{
  min-width:0 !important;
}

.custom-fields label{
  min-width:0 !important;
}

.custom-fields input{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Input typing must never rebuild / resize the modal */
.custom-fields input:focus{
  position:relative;
  z-index:3;
}

/* Keep the left preview aligned and contained */
.product-detail-img{
  position:relative !important;
  overflow:hidden !important;
}

@media(max-width:850px){
  .detail-print-preview{
    width:180px !important;
  }

  .detail-print-name{
    font-size:12px !important;
  }

  .detail-print-number{
    font-size:92px !important;
  }
}


/* BADGES — slightly larger, easier to scan */
.badge-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  max-height:190px !important;
  padding-right:3px !important;
}

.badge-option{
  min-height:44px !important;
  padding:10px 12px !important;
  border-radius:6px !important;
}

.badge-option span{
  font-size:9px !important;
  letter-spacing:.05em !important;
}

.badge-option b{
  font-size:8px !important;
}

.badge-head{
  margin-top:16px !important;
  margin-bottom:9px !important;
}

.badge-head span{
  font-size:9px !important;
}

.badge-head small{
  font-size:8px !important;
}

.prepaid-note{
  font-size:8px !important;
  padding:10px 11px !important;
}

/* Keep the customization panel comfortable on shorter screens */
@media(max-height:760px) and (min-width:851px){
  .badge-grid{
    max-height:160px !important;
  }
}


/* PRODUCT PRICE — larger + bolder */
.detail-price{
  font-size:30px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  color:#ffffff !important;
  margin:16px 0 !important;
}

.detail-price .product-old{
  font-size:14px !important;
  font-weight:700 !important;
  margin-left:8px !important;
}

.detail-price .product-sale{
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.1em !important;
  margin-left:7px !important;
  color:#18e45e !important;
}

.detail-total-row b{
  font-size:21px !important;
  font-weight:900 !important;
}

@media(max-width:520px){
  .detail-price{
    font-size:26px !important;
  }

  .detail-price .product-old{
    font-size:12px !important;
  }
}


/* =========================================================
   TALKJERSEY — MOBILE FIRST EXPERIENCE
   Optimized for 320–767px touch screens
========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

img{
  max-width:100%;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

@media (max-width: 767px){

  /* ---------- TOP TICKER ---------- */

  .announcement{
    height:34px !important;
    font-size:8px !important;
    letter-spacing:.025em !important;
  }

  .ticker{
    gap:28px !important;
    animation-duration:22s !important;
  }

  /* ---------- HEADER ---------- */

  .header{
    height:62px !important;
  }

  .nav{
    width:100% !important;
    height:62px !important;
    padding:0 13px !important;
    gap:7px !important;
    justify-content:space-between !important;
  }

  .brand{
    min-width:0 !important;
    gap:5px !important;
  }

  .brand-main{
    font-size:23px !important;
    letter-spacing:-1.2px !important;
    white-space:nowrap;
  }

  .brand small{
    display:none !important;
  }

  .nav-links{
    position:absolute !important;
    top:62px !important;
    left:10px !important;
    right:10px !important;
    display:none;
    flex-direction:column !important;
    gap:0 !important;
    padding:7px !important;
    margin:0 !important;
    border:1px solid #193136 !important;
    border-radius:12px !important;
    background:rgba(4,8,9,.97) !important;
    box-shadow:0 20px 55px rgba(0,0,0,.6) !important;
    backdrop-filter:blur(18px);
    z-index:100 !important;
  }

  .nav-links.open{
    display:flex !important;
  }

  .nav-links a{
    width:100% !important;
    padding:13px 12px !important;
    border-radius:7px !important;
    font-size:11px !important;
  }

  .nav-links a:after{
    display:none !important;
  }

  .nav-links a:hover,
  .nav-links a.active{
    background:rgba(0,239,104,.07) !important;
    color:#18e45e !important;
  }

  .nav-actions{
    margin-left:auto !important;
    gap:2px !important;
    flex:0 0 auto !important;
  }

  .nav-actions button{
    width:34px !important;
    height:34px !important;
    font-size:20px !important;
    padding:0 !important;
  }

  .mini-count{
    width:12px !important;
    height:12px !important;
    line-height:12px !important;
    right:0 !important;
    top:0 !important;
    font-size:7px !important;
  }

  .menu-btn{
    display:block !important;
    color:#fff !important;
  }


  /* ---------- HERO ---------- */

  .hero{
    height:auto !important;
    min-height:calc(100svh - 96px) !important;
    max-height:760px !important;
  }

  .hero-media{
    transform:scale(1.01) !important;
    background-position:57% center !important;
  }

  .hero-vignette{
    background:
      linear-gradient(
        180deg,
        rgba(1,3,3,.18) 0%,
        rgba(1,3,3,.18) 28%,
        rgba(1,3,3,.72) 58%,
        rgba(1,3,3,.96) 100%
      ) !important;
  }

  .hero-inner{
    min-height:calc(100svh - 96px) !important;
    height:auto !important;
    align-items:flex-end !important;
    padding:0 18px 62px !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:620px;
    padding:0 !important;
  }

  .hero-status{
    margin-bottom:11px !important;
    padding:6px 9px !important;
    font-size:8px !important;
    letter-spacing:1.1px !important;
  }

  .hero-copy .eyebrow{
    font-size:9px !important;
    letter-spacing:3px !important;
  }

  .hero-copy h1{
    margin:11px 0 10px !important;
    font-size:clamp(52px,15vw,76px) !important;
    line-height:.86 !important;
    letter-spacing:-2px !important;
    max-width:100% !important;
  }

  .hero-copy p{
    margin:0 0 17px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    max-width:340px !important;
  }

  .hero-actions{
    width:100% !important;
    display:flex !important;
    align-items:stretch !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .hero-actions .btn{
    width:100% !important;
    height:52px !important;
    font-size:10px !important;
  }

  .hero-meta{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:4px 6px !important;
    font-size:9px !important;
    line-height:1.5 !important;
  }

  .hero-meta strong{
    padding:0 4px !important;
  }

  .hero-side,
  .hero-brand{
    display:none !important;
  }

  .hero-dots{
    left:18px !important;
    bottom:19px !important;
    gap:7px !important;
  }

  .hero-dots i{
    width:25px !important;
  }


  /* ---------- SERVICE STRIP ---------- */

  .service-band{
    overflow:hidden;
  }

  .service-grid{
    width:100% !important;
    grid-template-columns:repeat(2,1fr) !important;
  }

  .service-grid>div{
    min-width:0 !important;
    padding:14px 12px !important;
    gap:9px !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
  }

  .service-grid>div:nth-child(2n){
    border-right:0 !important;
  }

  .service-grid>div:nth-child(n+5){
    grid-column:1/-1;
  }

  .service-grid span{
    font-size:22px !important;
    flex:0 0 auto;
  }

  .service-grid b{
    font-size:8px !important;
    line-height:1.2 !important;
  }

  .service-grid small{
    font-size:8px !important;
    margin-top:3px !important;
    line-height:1.3 !important;
  }


  /* ---------- GLOBAL SECTIONS ---------- */

  .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }

  .section{
    padding:30px 0 !important;
  }

  .section-title{
    margin-bottom:16px !important;
    align-items:flex-end !important;
  }

  .section-title h2{
    font-size:30px !important;
    line-height:.95 !important;
  }

  .section-title a{
    font-size:8px !important;
    white-space:nowrap;
  }


  /* ---------- CATEGORY ---------- */

  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .cat-card{
    min-height:132px !important;
    padding:13px !important;
    border-radius:8px !important;
  }

  .cat-card span{
    font-size:17px !important;
    line-height:.95 !important;
  }

  .cat-card small{
    font-size:8px !important;
    margin-top:5px !important;
  }


  /* ---------- PRODUCT SECTION ---------- */

  .search-row{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:7px !important;
    margin:12px 0 13px !important;
  }

  .search-row input{
    min-width:0 !important;
    height:45px !important;
    border-radius:8px !important;
    padding:0 12px !important;
    font-size:11px !important;
  }

  .search-row .btn{
    height:45px !important;
    padding:0 15px !important;
    min-width:auto !important;
    font-size:9px !important;
  }

  .filters{
    gap:6px !important;
    margin-bottom:14px !important;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .filters::-webkit-scrollbar{
    display:none;
  }

  .filter{
    height:32px !important;
    padding:0 11px !important;
    flex:0 0 auto !important;
    font-size:8px !important;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .product-card{
    min-width:0 !important;
    border-radius:7px !important;
  }

  .product-media{
    aspect-ratio:.78 !important;
  }

  .product-media img{
    object-position:center;
  }

  .tag{
    left:6px !important;
    top:6px !important;
    padding:4px 5px !important;
    font-size:7px !important;
  }

  .heart{
    right:6px !important;
    top:6px !important;
    width:28px !important;
    height:28px !important;
    font-size:17px !important;
  }

  /*
   * No hover on phones — keep CTA visible
   */
  .quick-add{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    height:34px !important;
    transform:none !important;
    opacity:1 !important;
    font-size:8px !important;
    border-radius:5px !important;
  }

  .product-info{
    padding:8px 7px 11px !important;
  }

  .product-name{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .product-meta{
    font-size:7px !important;
    margin-top:4px !important;
  }

  .product-price{
    font-size:11px !important;
    margin-top:6px !important;
    font-weight:800 !important;
  }


  /* ---------- EDITORIAL ---------- */

  .editorial{
    padding:22px 0 45px !important;
  }

  .editorial-wrap{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }

  .editorial-copy{
    padding:34px 22px !important;
    min-height:310px;
  }

  .editorial-copy h3{
    font-size:56px !important;
    line-height:.85 !important;
  }

  .editorial-copy p{
    font-size:11px !important;
    line-height:1.65 !important;
  }

  .editorial-copy .btn{
    width:100% !important;
    font-size:9px !important;
  }

  .editorial-image{
    min-height:260px !important;
    height:260px !important;
  }


  /* ---------- NEWSLETTER ---------- */

  .newsletter{
    padding-bottom:50px !important;
  }

  .newsletter-box{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:17px !important;
    padding:28px 0 !important;
  }

  .newsletter-box h3{
    font-size:40px !important;
  }

  .newsletter-box form{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    width:100% !important;
    gap:7px !important;
  }

  .newsletter-box input{
    min-width:0 !important;
    height:48px !important;
    font-size:11px !important;
  }

  .newsletter-box .btn{
    height:48px !important;
    padding:0 14px !important;
  }


  /* ---------- FOOTER ---------- */

  footer{
    padding:30px 0 42px !important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:26px 18px !important;
  }

  .footer-grid>div:first-child{
    grid-column:1/-1;
  }

  .footer-grid a{
    font-size:10px !important;
  }

  .footer-grid p{
    font-size:10px !important;
  }


  /* ---------- FLOATING ACTIONS ---------- */

  .float-wa{
    right:14px !important;
    bottom:15px !important;
    width:53px !important;
    height:53px !important;
    z-index:200 !important;
  }

  .float-help{
    right:7px !important;
    bottom:8px !important;
    width:27px !important;
    height:27px !important;
    z-index:201 !important;
  }


  /* ---------- CART DRAWER ---------- */

  .cart-drawer{
    width:min(94vw,430px) !important;
  }

  .drawer-head{
    padding:16px !important;
  }

  .drawer-head strong{
    font-size:25px !important;
  }

  .cart-list{
    padding:14px !important;
  }


  /* ---------- PRODUCT DETAIL MODAL ---------- */

  .modal{
    padding:0 !important;
    align-items:flex-end !important;
    overflow:hidden !important;
  }

  .modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:94svh !important;
    border-radius:14px 14px 0 0 !important;
  }

  .modal-card>.drawer-head{
    min-height:52px !important;
    padding:12px 15px !important;
  }

  .modal-body{
    padding:13px !important;
    max-height:calc(94svh - 52px) !important;
  }

  .product-detail-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .product-detail-img{
    height:285px !important;
    min-height:285px !important;
    border-radius:8px !important;
  }

  .detail-panel{
    padding:0 !important;
  }

  .detail-panel h2{
    font-size:37px !important;
    line-height:.9 !important;
    margin-top:7px !important;
  }

  .detail-price{
    font-size:25px !important;
    margin:12px 0 !important;
  }

  .detail-copy{
    font-size:10px !important;
    line-height:1.55 !important;
  }

  .detail-section-head{
    margin-top:15px !important;
  }

  .size-guide-trigger{
    padding:8px 10px !important;
    font-size:7px !important;
  }

  .size-row .size-btn{
    min-width:43px !important;
    height:40px !important;
  }

  .custom-box{
    margin-top:14px !important;
    padding:11px !important;
  }

  .custom-live-card{
    min-height:118px !important;
  }

  .custom-live-number{
    font-size:52px !important;
  }

  .print-options{
    grid-template-columns:1fr !important;
  }

  .custom-fields{
    grid-template-columns:1fr 100px !important;
  }

  .badge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-height:175px !important;
  }

  .badge-option{
    min-height:42px !important;
    padding:9px 10px !important;
  }

  .qty-row{
    position:sticky;
    bottom:0;
    padding-top:9px;
    margin-top:10px;
    background:linear-gradient(180deg,transparent,#080c0e 35%);
  }

  .qty-row>.btn{
    min-height:48px !important;
    height:48px !important;
  }


  /* ---------- SIZE GUIDE ---------- */

  .size-guide-inline{
    margin-top:8px !important;
    margin-bottom:11px !important;
  }

  .size-guide-inline th,
  .size-guide-inline td{
    padding:8px 10px !important;
  }

  .size-guide-inline small{
    font-size:8px !important;
  }

}


/* =========================================================
   EXTRA SMALL PHONES — 320–380px
========================================================= */

@media(max-width:380px){

  .nav-actions button{
    width:31px !important;
    font-size:18px !important;
  }

  .brand-main{
    font-size:21px !important;
  }

  .hero-inner{
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .hero-copy h1{
    font-size:50px !important;
  }

  .hero-copy p{
    font-size:14px !important;
  }

  .category-grid{
    gap:6px !important;
  }

  .cat-card{
    min-height:118px !important;
  }

  .cat-card span{
    font-size:15px !important;
  }

  .grid{
    gap:7px !important;
  }

  .product-name{
    font-size:9px !important;
  }

  .product-meta{
    font-size:6px !important;
  }

  .quick-add{
    height:31px !important;
  }

  .custom-fields{
    grid-template-columns:1fr !important;
  }

  .badge-grid{
    grid-template-columns:1fr !important;
  }

}


/* =========================================================
   TALKJERSEY FINAL FUTURISTIC POLISH
   Isolated additive layer for this final build
========================================================= */

html{
  background:#020506;
  color-scheme:dark;
}

body{
  overscroll-behavior-x:none;
  -webkit-tap-highlight-color:transparent;
}

img{
  user-select:none;
  -webkit-user-drag:none;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.product-card{
  position:relative;
  isolation:isolate;
}

.product-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  border:1px solid transparent;
  transition:.25s ease;
}

.product-card:hover:before{
  border-color:rgba(24,228,94,.20);
  box-shadow:
    inset 0 0 26px rgba(24,228,94,.025),
    0 0 24px rgba(24,228,94,.035);
}

.product-media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      transparent 0 42%,
      rgba(255,255,255,.035) 48%,
      transparent 54%
    );
  transform:translateX(-130%);
  transition:.55s ease;
  z-index:2;
}

.product-card:hover .product-media:after{
  transform:translateX(130%);
}

.quick-add:disabled{
  opacity:.46!important;
  cursor:not-allowed!important;
  transform:none!important;
}

.modal{
  backdrop-filter:blur(12px);
}

.modal-card{
  box-shadow:
    0 40px 120px rgba(0,0,0,.58),
    0 0 60px rgba(0,239,104,.045);
}

.btn{
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn-green{
  box-shadow:
    0 12px 30px rgba(0,239,104,.12);
}

.btn-green:hover{
  filter:brightness(1.06);
  box-shadow:
    0 14px 36px rgba(0,239,104,.20),
    0 0 28px rgba(0,239,104,.07);
}

.custom-live-card{
  position:relative;
  overflow:hidden;
}

.custom-live-card:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-100%;
  height:100%;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,239,104,.055),
      transparent
    );
  animation:jvPreviewSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes jvPreviewSweep{
  0%,55%,100%{transform:translateY(0);opacity:0}
  20%{transform:translateY(210%);opacity:1}
}

.size-btn.sold-out{
  position:relative;
  color:#687276!important;
  border-color:#20282b!important;
  background:#080b0c!important;
  cursor:not-allowed!important;
}

.size-btn.sold-out small{
  display:block;
  margin-top:3px;
  font:700 6px/1 monospace;
  color:#ff7187;
}

.product-soldout-banner{
  margin:-5px 0 16px;
  padding:10px 12px;
  border:1px solid rgba(255,77,105,.25);
  border-radius:9px;
  background:rgba(255,77,105,.045);
  color:#ff9aaa;
  font:800 8px/1.4 monospace;
  letter-spacing:.08em;
}

.product-soldout-banner span{
  color:#ff5570;
  margin-right:6px;
}

.detail-gallery-strip{
  display:flex;
  gap:7px;
  overflow:auto;
  padding-top:8px;
  scrollbar-width:none;
}

.detail-gallery-strip::-webkit-scrollbar{
  display:none;
}

.detail-gallery-thumb{
  flex:0 0 62px;
  width:62px;
  height:62px;
  padding:0;
  overflow:hidden;
  border:1px solid #263136;
  background:#080b0c;
  border-radius:7px;
  cursor:pointer;
  opacity:.65;
  transition:.18s ease;
}

.detail-gallery-thumb:hover,
.detail-gallery-thumb.active{
  opacity:1;
  border-color:#00ef68;
  box-shadow:0 0 16px rgba(0,239,104,.08);
}

.detail-gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.prepaid-note{
  border:1px solid rgba(0,239,104,.18);
  background:rgba(0,239,104,.035);
  color:#8de5aa;
  border-radius:8px;
}

@media(max-width:700px){

  .container{
    width:calc(100% - 22px);
  }

  .hero{
    min-height:76svh!important;
    height:76svh!important;
  }

  .hero-media{
    transform:scale(1.025);
    background-position:center 38%!important;
  }

  .hero-copy{
    max-width:90vw;
  }

  .hero-copy h1{
    font-size:clamp(49px,14vw,78px)!important;
    letter-spacing:-2px!important;
  }

  .hero-copy p{
    font-size:15px!important;
    max-width:340px;
  }

  .hero-actions{
    gap:13px!important;
  }

  .service-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .service-grid>div{
    min-width:0;
    padding:16px 11px;
  }

  .category-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .product-media{
    aspect-ratio:.78;
  }

  .product-info{
    padding:9px 7px 12px;
  }

  .product-name{
    font-size:10px;
    line-height:1.25;
  }

  .quick-add{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:calc(100% - 14px);
    margin:0 7px 7px;
    transform:none!important;
    background:#fff;
  }

  .product-card:hover .quick-add{
    transform:none!important;
  }

  .product-detail-grid{
    grid-template-columns:1fr!important;
  }

  .modal{
    padding:8px;
    align-items:flex-end;
  }

  .modal-card{
    max-height:96svh;
    overflow:auto;
    border-radius:15px 15px 0 0;
  }

  .modal-body{
    padding:14px;
  }

  .product-detail-img{
    max-height:330px;
  }

  .product-detail-img img{
    max-height:330px;
    object-fit:cover;
  }

  .custom-live-number{
    font-size:54px;
  }

  .print-options{
    grid-template-columns:1fr!important;
  }

  .badge-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .qty-row{
    position:sticky;
    bottom:0;
    background:linear-gradient(
      180deg,
      transparent,
      #05090a 20%
    );
    padding-top:10px;
    z-index:5;
  }

  .float-wa{
    box-shadow:
      0 0 28px rgba(24,228,94,.22)!important;
  }
}

@media(max-width:420px){
  .service-grid{
    grid-template-columns:1fr!important;
  }

  .hero{
    min-height:72svh!important;
    height:72svh!important;
  }

  .hero-copy h1{
    font-size:56px!important;
  }

  .newsletter-box form{
    flex-direction:column;
  }

  .badge-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FUTURISTIC HERO SLIDER v2
========================================================= */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-slider-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.02);transition:opacity .65s ease,visibility .65s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.hero-slide.active{opacity:1;visibility:visible;transform:scale(1)}
.hero-slide .hero-media{position:absolute;inset:-1.5%;background:url('hero.jpg') var(--hero-pos,50% center)/cover no-repeat;transform:scale(var(--hero-scale,1.015));transition:transform 6.2s cubic-bezier(.2,.7,.2,1),background-position 1s ease;will-change:transform,background-position}
.hero-slide.active .hero-media{transform:scale(calc(var(--hero-scale,1.015) + .025))}
.hero-slide .hero-vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,4,4,.94),rgba(2,4,4,.58) 40%,rgba(2,4,4,.14) 72%,rgba(2,4,4,.70)),linear-gradient(0deg,rgba(2,4,4,.92),transparent 30%)}
.hero-vignette-alt{background:linear-gradient(90deg,rgba(2,4,4,.92),rgba(2,4,4,.50) 45%,rgba(2,4,4,.18) 75%,rgba(2,4,4,.75)),linear-gradient(0deg,rgba(2,4,4,.88),transparent 35%)!important}
.hero-vignette-alt2{background:linear-gradient(90deg,rgba(2,4,4,.96),rgba(2,4,4,.62) 42%,rgba(2,4,4,.20) 76%,rgba(2,4,4,.72)),linear-gradient(0deg,rgba(2,4,4,.94),transparent 32%)!important}
.hero-slide .hero-inner{position:relative;z-index:3}
.hero-slide .hero-copy{animation:heroCopyOut .55s ease both}
.hero-slide.active .hero-copy{animation:heroCopyIn .72s cubic-bezier(.2,.8,.2,1) .08s both}
@keyframes heroCopyIn{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes heroCopyOut{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-10px,0)}}
.hero-slide .hero-status{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 11px;border:1px solid rgba(0,242,106,.28);border-radius:999px;background:rgba(0,242,106,.05);font:700 10px monospace;letter-spacing:1.5px;color:#bfead0}
.hero-slide .hero-status span{width:7px;height:7px;border-radius:50%;background:#00f26a;box-shadow:0 0 12px #00f26a;animation:pulse 1.5s infinite}
.hero-controls{position:absolute;left:max(41px,calc((100vw - 1440px)/2 + 41px));bottom:18px;z-index:8;display:flex;align-items:center;gap:12px}
.hero-controls .hero-dots{position:static;display:flex;gap:9px;align-items:center}
.hero-controls .hero-dots button{width:32px;height:3px;border:0;border-radius:99px;background:#7b858b;padding:0;cursor:pointer;transition:width .25s ease,background .25s ease,box-shadow .25s ease}
.hero-controls .hero-dots button.active{width:42px;background:var(--g);box-shadow:0 0 16px rgba(0,242,106,.50)}
.hero-progress{width:85px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
.hero-progress span{display:block;width:0;height:100%;background:var(--g);box-shadow:0 0 12px rgba(0,242,106,.45)}
.hero-slider-track.paused .hero-progress span{animation-play-state:paused!important}
@media(max-width:900px){.hero-controls{left:18px;bottom:16px}.hero-progress{display:none}.hero-slide .hero-media{transform:scale(var(--hero-scale,1.015))}}
@media(max-width:600px){.hero-controls{left:12px;bottom:14px}.hero-controls .hero-dots button{width:24px}.hero-controls .hero-dots button.active{width:34px}.hero-slide .hero-status{font-size:8px;letter-spacing:1.1px;margin-bottom:12px}.hero-slide .hero-copy{padding-top:20px}}


/* =========================================================
   HERO MOTION + CLARITY FINAL OVERRIDE
========================================================= */
.hero-slider-track{position:absolute;inset:0;overflow:hidden}
.hero-slide{isolation:isolate}
.hero-slide .hero-media{
  filter:none !important;
  background-position:var(--hero-pos,50% center) !important;
  animation:heroContinuousDrift 9.5s ease-in-out infinite alternate !important;
  will-change:transform,background-position;
}
.hero-slide:not(.active) .hero-media{
  animation-play-state:paused !important;
}
.hero-slide.active .hero-media{
  animation-play-state:running !important;
}
.hero-slider-track.paused .hero-slide.active .hero-media{
  animation-play-state:paused !important;
}
@keyframes heroContinuousDrift{
  0%{
    transform:translate3d(calc(var(--hero-drift-x,2%) * -1),calc(var(--hero-drift-y,1%) * -1),0) scale(var(--hero-scale,1.015));
    background-position:calc(var(--hero-pos-x,50%) - 1.5%) center;
  }
  100%{
    transform:translate3d(var(--hero-drift-x,2%),var(--hero-drift-y,1%),0) scale(calc(var(--hero-scale,1.015) + .035));
    background-position:calc(var(--hero-pos-x,50%) + 1.5%) center;
  }
}
/* Keep the desktop left side readable without the heavy black/blur veil */
.hero-slide .hero-vignette,
.hero-vignette-alt,
.hero-vignette-alt2{
  background:
    linear-gradient(90deg,rgba(2,4,4,.72) 0%,rgba(2,4,4,.48) 34%,rgba(2,4,4,.16) 70%,rgba(2,4,4,.50) 100%),
    linear-gradient(0deg,rgba(2,4,4,.76),transparent 34%) !important;
}
.hero-slide .hero-copy{
  text-shadow:0 8px 28px rgba(0,0,0,.35);
}
@media(max-width:900px){
  .hero-slide .hero-media{animation-duration:8s !important}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide .hero-media{animation:none !important}
}


/* =========================================================
   CART LINE DETAILS + SOLD OUT TAG
========================================================= */
.cart-item .cart-custom{color:#8de5aa!important;font:700 8px/1.5 'Roboto Mono',monospace!important;letter-spacing:.04em}
.tag.tag-soldout{background:#ff4d69;color:#fff}
.quick-add.added{background:var(--g);color:#00180a}


/* =========================================================
   SITE LEGAL DISCLAIMER (footer)
========================================================= */
.site-disclaimer{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#6d797d;
  font:400 10px/1.8 Inter,Arial,sans-serif;
}
.site-disclaimer b{color:#9fb6ac;font-weight:700}
.site-disclaimer a{color:#18e45e;text-decoration:underline;text-underline-offset:2px}
.site-disclaimer a:hover{color:#00f26a}


/* =========================================================
   UX POLISH PASS — 2026-10
   Appended last so it wins over the earlier override blocks.
   Scope: readability, grid density, CTA hierarchy, mobile
   hero clickability, calmer motion. No colour-identity change.
========================================================= */

/* ---------- 1. MOBILE HERO: CTA MUST NEVER BE CLIPPED ----------
   .hero-inner carried min-height:calc(100svh - 96px) while .hero itself was
   76svh, so the bottom of the copy (the primary CTA) overflowed a container
   with overflow:hidden and was painted over by the service band. The active
   slide now sits in flow, so the hero is as tall as its content. */
@media(max-width:900px){
  /* The active slide is in flow, so the hero is exactly as tall as its
     content. A min-height here would show as a black band below the slide,
     because .hero-media is positioned against the slide, not the section. */
  .hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .hero-slider-track{position:relative !important;inset:auto !important}
  .hero-slide{position:absolute;inset:0}
  .hero-slide.active{position:relative;inset:auto}
  .hero-inner{
    min-height:0 !important;
    height:auto !important;
    align-items:flex-end !important;
    padding:92px 18px 30px !important;
  }
  .hero-copy{padding-top:0 !important}
  .hero-actions .btn{max-width:420px}
  .hero-controls{position:static !important;padding:0 18px 16px;left:auto !important;bottom:auto !important}
}

/* ---------- 2. TYPE SCALE: 12 / 14 / 16 / 20 / 28 / 48 ----------
   Nothing customer-facing below 12px. */
.nav-links a{font-size:13px}
.product-name{font-size:14px;line-height:1.35}
.product-meta{font:12px/1.4 Inter,Arial,sans-serif;color:#8d969c;letter-spacing:0;text-transform:none;margin-top:6px}
.product-price{font-size:16px;font-weight:700;margin-top:8px}
.product-old{font-size:13px;font-weight:400;color:#6b747a}
.tag{font:800 10px 'Roboto Mono',monospace;padding:5px 8px}
.filter{height:40px;font:700 12px Inter,Arial,sans-serif;padding:0 16px;border-radius:999px}
.service-grid b{font:700 13px Inter,Arial,sans-serif;letter-spacing:0}
.service-grid small{font-size:12px;color:#9aa3a9}
.cart-item b{font-size:14px}
.cart-item span{font-size:12px;color:#8d969c}
.footer-grid a{font-size:13px}
.footer-grid p{font-size:13px}
.footer-grid>div:not(:first-child)>b{font:700 12px Inter,Arial,sans-serif;letter-spacing:.06em;color:#8b949a}
.empty{font:500 14px Inter,Arial,sans-serif;color:#8d969c}
.site-disclaimer{font-size:12px !important;line-height:1.7 !important;max-width:76ch}
.site-disclaimer .site-identity{max-width:76ch}
.detail-copy{font-size:14px}
.section-title h2{font-size:38px}

/* ---------- 3. CTA HIERARCHY: one filled green action per view ---------- */
.btn-outline{
  background:transparent;color:#e8edef;
  border:1px solid rgba(255,255,255,.22);
}
.btn-outline:hover{border-color:var(--g);color:var(--g);background:rgba(24,228,94,.05)}
.search-row .btn{height:48px}

/* ---------- 4. PRODUCT GRID: fewer, larger cards + consistent 4:5 ---------- */
@media(min-width:1201px){ .grid{grid-template-columns:repeat(4,1fr);gap:20px} }
@media(min-width:901px) and (max-width:1200px){ .grid{grid-template-columns:repeat(3,1fr);gap:16px} }
.product-media{aspect-ratio:4/5}
.product-media img.is-placeholder{object-fit:contain;padding:12%;opacity:.9}
.product-info{padding:14px 14px 18px}
.product-card{border-radius:10px}
.heart{width:36px;height:36px;font-size:15px}
.quick-add{height:42px;font:700 12px Inter,Arial,sans-serif;border-radius:6px;left:12px;right:12px;bottom:12px}

/* ---------- 5. TAP TARGETS ---------- */
.nav-actions button{width:44px;height:44px}
@media(max-width:380px){ .nav-actions button{width:40px !important} }

/* ---------- 6. MOBILE DENSITY: compact service strip ---------- */
.service-grid{grid-template-columns:repeat(3,1fr)}
.service-grid>div{display:block;padding:16px 20px;border-right:1px solid var(--line)}
.service-grid small{margin-top:4px}
.service-grid a{color:var(--g);text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){
  .service-grid{grid-template-columns:1fr !important;gap:0}
  .service-grid>div{
    display:flex !important;align-items:baseline;gap:10px;
    padding:11px 14px !important;border-right:0;border-bottom:1px solid var(--line);
  }
  .service-grid b{font-size:12px;white-space:nowrap}
  .service-grid small{margin-top:0;font-size:12px;color:#8d969c}
  .section{padding:26px 0}
}

/* ---------- 7. CALMER MOTION ---------- */
.ticker{animation-duration:40s}
.hero-slide .hero-status span{animation:none !important;box-shadow:0 0 10px rgba(0,242,106,.7)}
.shipping-callout:after{display:none !important}
@media(prefers-reduced-motion:reduce){ .ticker{animation:none} }

/* ---------- 8. LOADING SKELETONS ---------- */
.skeleton-card{pointer-events:none;border-color:rgba(255,255,255,.04)}
.skeleton-box,.skeleton-line{
  background:linear-gradient(90deg,#141719 25%,#1d2226 37%,#141719 63%);
  background-size:400% 100%;animation:jvShimmer 1.4s ease infinite;border-radius:4px;
}
.skeleton-line{height:11px;margin-top:10px}
.skeleton-line.w70{width:70%}
.skeleton-line.w45{width:45%}
.skeleton-line.w35{width:35%}
@keyframes jvShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){ .skeleton-box,.skeleton-line{animation:none} }

/* ---------- 9. EMPTY STATES WITH A WAY OUT ---------- */
.empty-state{display:grid;gap:14px;justify-items:center;padding:52px 18px}
.empty-state p{margin:0}
.empty-state .btn{height:44px;padding:0 20px}

/* ---------- 10. OFFLINE CATALOGUE NOTICE ---------- */
.offline-notice{
  margin:0 0 16px;padding:12px 14px;border-radius:9px;
  border:1px solid rgba(255,195,109,.3);background:rgba(255,195,109,.07);
  color:#ffd79a;font-size:12px;line-height:1.6;
}

/* ---------- 11. CART: stepper, line total, reassurance ---------- */
.cart-item{grid-template-columns:68px 1fr auto;align-items:start}
.cart-item img{width:68px;height:85px;border-radius:6px;background:#14181b}
.cart-qty-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.cart-qty{display:inline-flex;align-items:center;border:1px solid #2c3338;border-radius:7px;overflow:hidden}
.cart-qty button{
  width:34px;height:34px;border:0;background:#0e1214;color:#e8edef;
  font-size:16px;line-height:1;cursor:pointer;transition:background .15s;
}
.cart-qty button:hover{background:#18201f;color:var(--g)}
.cart-qty span{min-width:34px;text-align:center;font-size:13px;font-weight:700}
.cart-line-total{font-size:14px;white-space:nowrap}
.cart-remove{font-size:20px;line-height:1;padding:4px 2px}
.drawer-reassure{
  margin-bottom:12px;padding:9px 11px;border-radius:7px;
  background:rgba(24,228,94,.07);border:1px solid rgba(24,228,94,.16);
  color:#9ae7b7;font-size:12px;
}
.cart-list{flex:1 1 auto}

/* ---------- 12. PRODUCT DETAIL: optional badges + sticky buy on mobile ---------- */
.badge-disclosure{
  margin-top:16px;border:1px solid rgba(255,255,255,.08);border-radius:9px;
  background:rgba(255,255,255,.015);overflow:hidden;
}
.badge-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px;cursor:pointer;list-style:none;
}
.badge-summary::-webkit-details-marker{display:none}
.badge-summary span{font:700 13px Inter,Arial,sans-serif}
.badge-summary small{color:#7d868c;font:600 11px 'Roboto Mono',monospace;letter-spacing:.05em}
.badge-summary:after{content:'+';margin-left:4px;color:var(--g);font-size:17px;line-height:1}
.badge-disclosure[open] .badge-summary:after{content:'\2212'}
.badge-disclosure[open] .badge-summary{border-bottom:1px solid rgba(255,255,255,.07)}
.badge-disclosure .badge-grid{padding:12px}

@media(max-width:850px){
  .detail-buybar{
    position:sticky;bottom:0;z-index:5;
    margin:14px -20px -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(10,12,14,.72),#0a0c0e 38%);
    border-top:1px solid rgba(255,255,255,.09);
  }
}

/* ---------- 13. FOOTER ---------- */
footer .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
.site-disclaimer{padding-top:18px}


/* =========================================================
   UX POLISH PASS — READABILITY FLOOR + TAP TARGETS
   The earlier responsive blocks set these with !important, so the
   floor has to be stated at the same weight to win. Reading content
   is >= 12px everywhere; the only deliberate exceptions are the
   numeric cart/wishlist count bubbles and the "INDIA" wordmark
   kicker, which are 10px glyph-level marks, not copy.
========================================================= */

.btn{font-size:12px !important}
.eyebrow{font-size:12px !important;letter-spacing:.2em}
.tag{font-size:11px !important}
.mini-count{font-size:10px !important;line-height:16px !important;width:16px;height:16px}
.brand small{font-size:10px !important}
.search-row .btn{font-size:12px !important}
.drawer-bottom .btn{font-size:12px !important}
.editorial-copy p{font-size:14px !important;line-height:1.75 !important}
.hero-meta{font-size:12px !important}
.hero-meta b,.hero-meta strong{font-size:12px !important}
.service-grid b{font-size:13px !important}
.service-grid small{font-size:12px !important}
.footer-grid a{font-size:13px !important}
.footer-grid p{font-size:13px !important}
.footer-grid>div:not(:first-child)>b{font-size:12px !important}
.site-disclaimer,.site-disclaimer .site-identity{font-size:12px !important;line-height:1.7 !important}
.product-name{font-size:14px !important;line-height:1.35 !important}
.product-meta{font-size:12px !important;letter-spacing:0 !important;text-transform:none !important}
.product-price{font-size:16px !important}
.product-old{font-size:13px !important}
.quick-add{font-size:12px !important}
.filter{font-size:12px !important;height:40px !important}
.empty{font-size:14px !important}
.cart-item b{font-size:14px !important}
.cart-item span{font-size:12px !important}
.detail-copy{font-size:14px !important}
.size-btn{font-size:13px !important;height:42px !important;min-width:46px !important}
.badge-option{font-size:12px !important}
.nav-actions button{width:44px !important;height:44px !important}
.heart{width:36px !important;height:36px !important}

@media(max-width:380px){
  .nav-actions button{width:40px !important;height:40px !important}
}

/* Higher-specificity selectors: the earlier blocks scope these the same way,
   so an unscoped !important rule loses on specificity alone. */
.hero-copy .eyebrow,.hero-slide .eyebrow,.editorial-copy .eyebrow{font-size:12px !important}
.hero-actions .btn,.hero-actions a.btn{font-size:12px !important}
.editorial-copy .btn,.editorial-copy a.btn{font-size:12px !important}
.newsletter-box p{font-size:13px !important}
.footer-grid>div>b,footer .footer-grid b{font-size:12px !important;letter-spacing:.06em}

/* The ticker carries real messages (shipping, COD), so it reads at 12px.
   Its "•" separators stay small — they are punctuation, not copy. */
.announcement{font-size:12px !important;height:40px !important}
.announcement .ticker b{font-size:9px !important;opacity:.55}
@media(max-width:600px){ .announcement{height:36px !important} }

.filter{min-width:48px !important}

/* Cropping the baked-in UI out of hero.jpg shifted a brighter patch of sky
   behind the copy, so the white headline lost contrast. Deepen the scrim on
   the copy side; this also keeps the headline readable if the photo changes. */
.hero-slide .hero-vignette,
.hero-slide .hero-vignette-alt,
.hero-slide .hero-vignette-alt2{
  background:
    linear-gradient(90deg,rgba(2,4,4,.95) 0%,rgba(2,4,4,.74) 30%,rgba(2,4,4,.30) 58%,rgba(2,4,4,.60) 100%),
    linear-gradient(0deg,rgba(2,4,4,.88),transparent 38%) !important;
}
@media(max-width:900px){
  .hero-slide .hero-vignette,
  .hero-slide .hero-vignette-alt,
  .hero-slide .hero-vignette-alt2{
    background:linear-gradient(180deg,rgba(1,3,3,.30) 0%,rgba(1,3,3,.52) 42%,rgba(1,3,3,.88) 74%,rgba(1,3,3,.97) 100%) !important;
  }
}
.hero-slide h1{text-shadow:0 2px 24px rgba(0,0,0,.55)}

/* The hide transform was tuned to the old 36px button; after resizing it to
   42px a sliver stayed visible at the bottom of every card image. */
.quick-add{transform:translateY(72px)}
.product-card:hover .quick-add,.product-card:focus-within .quick-add{transform:translateY(0)}

/* On touch there is no hover, so earlier rules pinned "Customize +" open and
   made it position:relative inside an overflow:hidden media box — it was
   clipped to a white sliver on every card. The card itself opens the detail
   view (where Add to cart is now reachable without scrolling), so the
   redundant overlay button is simply not shown on small screens. */
@media(max-width:900px){
  .product-media .quick-add{display:none !important}
}

/* The product name is the title of the detail view; the dialog's own label is
   chrome and should not compete with it. */
.modal-card>.drawer-head strong{
  font:700 12px Inter,Arial,sans-serif !important;
  letter-spacing:.1em;color:#7d868c !important;text-transform:uppercase;
}
.detail-panel h2{font:600 30px/1.08 'Barlow Condensed';margin:6px 0 2px}

/* The floating WhatsApp buttons sat on top of the sticky Add to cart bar. */
body:has(.modal.open) .float-wa,
body:has(.modal.open) .float-help,
body:has(.cart-drawer.open) .float-wa,
body:has(.cart-drawer.open) .float-help{
  opacity:0;pointer-events:none;transition:opacity .15s;
}

/* Detail image shares the catalogue's 4:5 frame so it fills instead of
   leaving a dark band, and matches the ratio real photography will use. */
.product-detail-img{aspect-ratio:4/5;overflow:hidden;border-radius:8px}
.product-detail-img img{width:100%;height:100%;max-height:none !important;object-fit:cover}
.product-detail-img img.is-placeholder{object-fit:contain;padding:14%}
@media(max-width:850px){ .product-detail-img{aspect-ratio:1/1} }

/* =========================================================
   FAB CLEARANCE (mobile)
   The floating WhatsApp button covered the "Sale" filter pill: the FAB sat
   at bottom:15px / 53px wide and the pill row ends flush against the same
   right-hand edge. Moving the button alone cannot fix this — a fixed
   element's overlap depends on viewport height, so any vertical nudge only
   works at one screen size.
   The reliable fix is to keep the two out of the same column: the filter
   strip reserves a gutter the width of the FAB, so a pill can never be
   painted underneath it at any viewport height or scroll offset. The
   button itself is tucked into that gutter at 44px (the minimum
   recommended tap size) with safe-area-aware offsets.
========================================================= */
@media(max-width:900px){
  /* Gutter reserved for the floating buttons. The strip keeps its normal
     horizontal scroll, and the pill at the cut is left partly visible so
     the row still reads as scrollable. */
  .filters{
    margin-right:58px !important;
    scroll-padding-right:8px;
    /* Fade the trailing edge so the narrowed strip still reads as
       scrollable and the categories past the cut stay discoverable. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .filters::-webkit-scrollbar{display:none}
}
@media(max-width:900px){
  .float-wa{
    width:44px !important;
    height:44px !important;
    right:calc(10px + env(safe-area-inset-right,0px)) !important;
    bottom:env(safe-area-inset-bottom,0px) !important;
    font-size:24px !important;
  }
  .float-wa .wa-icon{width:24px;height:24px}
  .float-help{
    width:22px !important;
    height:22px !important;
    right:calc(4px + env(safe-area-inset-right,0px)) !important;
    bottom:env(safe-area-inset-bottom,0px) !important;
    font-size:12px !important;
  }
}