/* ============================================================
   HALF & HALF — footwear brand stylesheet
   Original design. Black & white "half / half" editorial system.
   ============================================================ */

:root{
  /* ---- HALF & HALF brand palette (from the showroom signboard) ---- */
  --blue:#1a3a8f;        /* royal brand blue */
  --blue-2:#142c70;      /* deeper blue */
  --blue-3:#0e1e52;      /* deepest — footer / bands */
  --yellow:#ffd200;      /* brand yellow */
  --yellow-2:#f0c200;

  --ink:#16265a;         /* headings / dark surfaces = deep navy */
  --ink-2:#1a3a8f;       /* brand blue */
  --paper:#ffffff;
  --smoke:#f3f6fd;
  --smoke-2:#e5ecf8;
  --line:#d9e1f2;
  --muted:#6c7899;
  --wa:#25d366;
  --wa-dark:#1da851;
  --maxw:1220px;
  --pad:clamp(1.1rem,4vw,2.2rem);
  --r:0px;      /* sharp corners — Liberty-style */
  --r-lg:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 50px -28px rgba(17,16,16,.4);
  /* SF Pro Display everywhere (Apple system font) with graceful fallbacks on Win/Android */
  --serif:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;   /* display headings */
  --sans:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;line-height:1.16;letter-spacing:.01em;text-transform:uppercase}
p{margin:0}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-alt{background:var(--smoke)}
.center{text-align:center;margin-top:2.4rem}

/* ---------- eyebrow + split titles ---------- */
.eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:700;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.9rem;position:relative;padding-left:2.4rem;
}
.eyebrow::before{content:"";position:absolute;left:0;top:.5em;width:1.7rem;height:2px;background:var(--ink)}
.eyebrow-light{color:rgba(255,255,255,.7)}
.eyebrow-light::before{background:#fff}

.split-title{
  font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.08;
}
.split-title em{font-style:italic}
.split-title-light{color:#fff}

.section-head{max-width:640px;margin:0 auto clamp(2.2rem,4vw,3.3rem);text-align:center}
.section-head .eyebrow{padding-left:0}
.section-head .eyebrow::before{display:none}
.section-head p{color:var(--muted);margin-top:.7rem}
.section-head .split-title-light + p{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.8rem 1.6rem;border-radius:var(--r);cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn-dark:hover{--bg:#000;box-shadow:var(--shadow)}
.btn-outline{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn-outline:hover{--bg:var(--ink);--fg:#fff}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn-ghost:hover{--bd:var(--ink)}
.btn-light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn-light:hover{--bg:transparent;--fg:#fff;--bd:#fff}
.btn-wa{--bg:var(--wa);--fg:#fff;--bd:var(--wa)}
.btn-wa:hover{--bg:var(--wa-dark);--bd:var(--wa-dark);box-shadow:0 14px 34px -16px rgba(37,211,102,.7)}
.btn-sm{padding:.58rem 1.05rem;font-size:.8rem}
.btn-lg{padding:.95rem 2rem;font-size:.92rem}

/* ---------- flash ---------- */
.flash{padding:.85rem 0;font-size:.9rem;font-weight:600}
.flash-success{background:#e8f7ee;color:#137a3e}
.flash-error{background:#fdeaea;color:#b42222}

/* ============================================================ TOP BAR + HEADER */
.topbar{background:var(--ink);color:#fff;font-size:.78rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:38px;gap:1rem}
.topbar-msg{letter-spacing:.04em;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.topbar-right a{opacity:.86;transition:opacity .2s}
.topbar-right a:hover{opacity:1}
.topbar-sep{opacity:.4}

.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
/* centered logo, split navigation (Liberty-style) */
.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:94px;transition:height .3s var(--ease)}
.site-header.shrink{box-shadow:0 10px 30px -24px rgba(0,0,0,.5)}
.site-header.shrink .header-inner{height:74px}
.brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.brand img{height:48px;width:auto;transition:height .3s var(--ease)}
.site-header.shrink .brand img{height:40px}

/* desktop split nav groups */
.nav-side{display:flex;align-items:center;gap:.1rem}
/* :not(.btn) — otherwise these nav rules out-specify .btn and repaint the
   WhatsApp button with dark nav text, an underline and wrong alignment */
.nav-side>a:not(.btn),.nav-drop>a{
  position:relative;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.6rem .95rem;color:var(--ink-2);transition:color .2s;white-space:nowrap;
}
.nav-side>a:not(.btn)::after,.nav-drop>a::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.5rem;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease);
}
.nav-side>a:not(.btn):hover,.nav-drop>a:hover{color:var(--ink)}
.nav-side>a:not(.btn):hover::after,.nav-drop:hover>a::after,.nav-side>a:not(.btn).is-active::after{transform:scaleX(1)}
.caret{font-size:.7rem;opacity:.6}

.nav-drop{position:relative}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;min-width:230px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);padding:.4rem;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:.25s var(--ease);z-index:5;
}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.nav-drop-menu a{display:block;padding:.58rem .85rem;font-size:.82rem;font-weight:500;transition:background .2s,padding-left .2s}
.nav-drop-menu a:hover{background:var(--smoke);padding-left:1.15rem}
.nav-wa{margin-left:.7rem;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;padding:.65rem 1.15rem}

/* ---- mega menu (desktop) ---- */
.has-mega{position:relative}
.has-mega>a{
  position:relative;display:inline-flex;align-items:center;gap:.25rem;
  font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.6rem .95rem;color:var(--ink-2);transition:color .2s;white-space:nowrap;
}
.has-mega>a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.5rem;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.has-mega:hover>a,.has-mega>a.is-active{color:var(--ink)}
.has-mega:hover>a::after,.has-mega>a.is-active::after{transform:scaleX(1)}
.mega{
  position:absolute;top:100%;z-index:30;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:1.7rem 1.9rem 1.4rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s var(--ease);
}
.mega-left{left:0}
.mega-right{right:0}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{display:flex;gap:2.6rem;align-items:flex-start}
.mega-col{min-width:128px}
.mega-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;white-space:nowrap}
.mega-col h4 a{color:var(--muted)}
.mega-col h4 a:hover{color:var(--ink)}
.mega-col ul{display:grid;gap:.55rem}
.mega-col.wide ul{grid-template-columns:1fr 1fr;gap:.55rem 2rem}
.mega-col li a{font-size:.88rem;font-weight:500;color:var(--ink-2);transition:color .2s,padding-left .2s;white-space:nowrap}
.mega-col li a:hover{color:var(--ink);padding-left:5px}
.mega-all{display:block;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.mega-all:hover{color:var(--muted)}
/* mobile drawer: nested group heading */
.nav-drop-group{display:block;padding:.7rem .3rem .25rem 1.35rem;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* mobile-only pieces (hidden on desktop) */
.main-nav{display:none}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;z-index:110}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================ HERO (image only) */
.hero{position:relative;height:clamp(360px,62vw,660px);background:var(--smoke);overflow:hidden}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 7s ease-out both}
.hero-slide.is-active img{animation:kenburns 7s ease-out both}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--ink);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:.25s;backdrop-filter:blur(4px);
}
.hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hero-prev{left:clamp(.6rem,2vw,1.6rem)}
.hero-next{right:clamp(.6rem,2vw,1.6rem)}
.hero-dots{position:absolute;left:0;right:0;bottom:1.2rem;z-index:3;display:flex;gap:.5rem;justify-content:center}
.hero-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;transition:.25s}
.hero-dot.is-active{background:#fff;width:26px;border-radius:5px}

/* ============================================================ VALUE PROPS (minimal trust strip) */
.valueprops{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(1rem,1.8vw,1.4rem) 0}
.vp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:center}
.vp{display:flex;align-items:center;justify-content:center;gap:.7rem;min-width:0}
.vp-ic{flex:0 0 auto;width:25px;height:25px;color:var(--ink);display:grid;place-items:center;
  transition:transform .3s var(--ease)}
.vp-ic svg{width:100%;height:100%;stroke-width:1.4}
.vp:hover .vp-ic{transform:translateY(-2px)}
.vp-label{font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.3}

/* ============================================================ WELCOME / STORY */
.welcome-grid,.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.welcome-media,.about-media{position:relative}
.welcome-media img,.about-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-lg)}
.welcome-media::before,.about-media::before{content:"";position:absolute;left:-14px;top:-14px;width:52%;height:52%;border:2px solid var(--ink);border-radius:var(--r-lg);z-index:-1}
.welcome-badge{
  position:absolute;right:-10px;bottom:-16px;background:var(--ink);color:#fff;
  font-family:var(--serif);font-weight:800;font-size:1.25rem;line-height:1;
  padding:1rem 1.2rem;border-radius:var(--r-lg);text-align:center;box-shadow:var(--shadow);
}
.welcome-text .split-title{margin:.4rem 0 1rem}
.welcome-text p{color:var(--muted)}
.welcome-points{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem;margin:1.5rem 0 1.8rem}
.welcome-points li{position:relative;padding-left:1.7rem;font-size:.9rem;font-weight:500}
.welcome-points li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;background:var(--ink);transform:rotate(45deg)}

/* ============================================================ CATEGORY GRID (round) */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(1.4rem,2.5vw,2.2rem) clamp(1rem,1.8vw,1.6rem);justify-items:center}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;background:transparent;border:0;padding:0;width:100%;max-width:190px}
.cat-card-img{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--smoke);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.cat-card-img::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);opacity:0;transform:scale(.86);transition:.4s var(--ease)}
.cat-card:hover .cat-card-img{transform:translateY(-6px);box-shadow:var(--shadow)}
.cat-card:hover .cat-card-img::after{opacity:1;transform:scale(1)}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-card:hover .cat-card-img img{transform:scale(1.08)}
.cat-card-body{padding:0;display:flex;flex-direction:column;gap:.15rem}
.cat-card-body h3{font-size:.98rem;font-family:var(--sans);font-weight:700}
.cat-count{font-size:.72rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.cat-arrow{display:none}
/* ---- category slider ---- */
.cat-slider{position:relative}
.cat-track{display:flex;gap:clamp(1rem,2vw,1.9rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:.5rem .2rem 1rem;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.cat-track::-webkit-scrollbar{display:none}
.cat-track .cat-card{flex:0 0 auto;width:clamp(128px,17vw,168px);max-width:none;scroll-snap-align:start}
.cat-slider-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,transform .25s;box-shadow:var(--shadow)}
.cat-slider-arrow:hover{background:var(--ink);color:#fff}
.cat-prev{left:-6px}
.cat-next{right:-6px}
@media(max-width:640px){.cat-slider-arrow{display:none}}

/* ============================================================ PRODUCT GRID */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.6rem)}
.prod-card{background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--ink)}
/* media + Liberty-style hover overlay */
.prod-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.prod-card-img{display:block;width:100%;height:100%}
/* contain, not cover — show the whole product photo on cards */
.prod-card-img img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .7s var(--ease)}
.prod-card:hover .prod-card-img img{transform:scale(1.09)}
.prod-flag{position:absolute;top:0;left:0;background:var(--ink);color:#fff;font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .7rem;z-index:2}
.prod-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;gap:.5rem;padding:.8rem;
  background:linear-gradient(transparent,rgba(17,16,16,.7));transform:translateY(101%);transition:transform .4s var(--ease)}
.prod-card:hover .prod-overlay{transform:none}
.prod-ov-btn{flex:1;text-align:center;background:#fff;color:var(--ink);font-size:.73rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.65rem .5rem;transition:background .2s,color .2s}
.prod-ov-btn:hover{background:var(--ink);color:#fff}
.prod-ov-wa{background:var(--wa);color:#fff}
.prod-ov-wa:hover{background:var(--wa-dark);color:#fff}
.prod-card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.prod-cat{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prod-card-body h3{font-size:1rem;font-family:var(--sans);font-weight:700;line-height:1.3}
.prod-card-foot{display:flex;align-items:baseline;justify-content:space-between;margin-top:.35rem}
.prod-price{font-family:var(--serif);font-weight:700;font-size:1.12rem}
.prod-code{font-size:.7rem;font-weight:600;letter-spacing:.05em;color:var(--muted)}
/* touch-only action row — lives in the card body, never over the photo */
.prod-actions-m{display:none;gap:.4rem;margin-top:.7rem}
.prod-actions-m a{display:flex;align-items:center;justify-content:center;gap:.3rem;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.55rem .4rem;border:1px solid var(--line);color:var(--ink);transition:.2s}
.pam-view{flex:1}
.pam-wa{flex:1;background:var(--wa);border-color:var(--wa);color:#fff}
/* Touch devices have no hover: hide the image overlay entirely (big buttons
   smothering the product looked terrible) and show the compact row instead. */
@media(hover:none){
  .prod-overlay{display:none}
  .prod-actions-m{display:flex}
}

/* ============================================================ SEASONAL PROMO (half/half split) */
.promo{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.promo::before{content:"";position:absolute;inset:0 55% 0 0;background:var(--smoke);
  clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.promo-inner{position:relative;min-height:340px;display:flex;align-items:center;padding-block:clamp(2.5rem,5vw,3.5rem)}
.promo-text{position:relative;max-width:480px;margin-left:auto;text-align:right}
.promo-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);padding:.35rem .8rem;border-radius:0;margin-bottom:1rem}
.promo-text h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.9rem}
.promo-text p{color:rgba(255,255,255,.78);margin-bottom:1.6rem}

/* ============================================================ STATS BAND */
.stats-band{background:var(--ink);color:#fff;padding:clamp(2.6rem,5vw,3.6rem) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat{border-right:1px solid rgba(255,255,255,.14);padding:.5rem}
.stat:last-child{border-right:0}
.stat-num{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);line-height:1}
.stat-label{display:block;margin-top:.5rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ============================================================ PRODUCT SLIDER (reusable — Featured etc.) */
.prod-slider{position:relative}
.prod-track{display:flex;gap:clamp(.9rem,1.5vw,1.4rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:.4rem .2rem;scrollbar-width:none;
  margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.prod-track::-webkit-scrollbar{display:none}
.prod-track .prod-card{flex:0 0 auto;width:clamp(200px,20vw,258px);scroll-snap-align:start}
/* cards in a horizontal track must not stay hidden by the scroll-reveal */
.prod-track .reveal{opacity:1;transform:none}
.prod-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.15rem;display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow);transition:background .25s,color .25s}
.prod-arrow:hover{background:var(--ink);color:#fff}
.prod-prev{left:-14px}
.prod-next{right:-14px}
@media(max-width:820px){.prod-arrow{display:none}}

/* ============================================================ NEW ARRIVALS (vertical title + slider) */
.newarrivals{position:relative;background:#b3123c center/cover no-repeat;padding:clamp(2.6rem,5vw,4.2rem) 0;overflow:hidden}
.newarrivals::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04))}
.na-inner{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.6rem);align-items:center}
.na-side{display:flex;align-items:center;justify-content:center}
/* vertical, bottom-to-top heading */
.na-vertical{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:.5rem;margin:0;
  font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:1;
  font-size:clamp(1.6rem,3.4vw,2.9rem)}
.na-w1{color:#fff}
.na-w2{color:transparent;-webkit-text-stroke:2px #fff}
.na-main{position:relative;min-width:0}
.na-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.na-sub{color:rgba(255,255,255,.85);font-size:.86rem;margin:0}
.na-viewall{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:5px;white-space:nowrap;transition:opacity .2s}
.na-viewall:hover{opacity:.75}
.na-slider{position:relative}
.na-track{display:flex;gap:clamp(.9rem,1.5vw,1.3rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:.3rem .2rem;scrollbar-width:none}
.na-track::-webkit-scrollbar{display:none}
.na-track .prod-card{flex:0 0 auto;width:clamp(196px,19vw,246px);scroll-snap-align:start}
/* cards inside a horizontal track must not stay hidden by the scroll-reveal */
.na-track .reveal{opacity:1;transform:none}
.na-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:0;background:#fff;color:var(--ink);font-size:1.15rem;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);transition:background .25s,color .25s}
.na-arrow:hover{background:var(--ink);color:#fff}
.na-prev{left:-14px}
.na-next{right:-14px}
@media(max-width:820px){
  .na-inner{grid-template-columns:1fr;gap:1.2rem}
  .na-vertical{writing-mode:horizontal-tb;transform:none;justify-content:center;font-size:clamp(1.5rem,7vw,2.1rem)}
  .na-head{flex-direction:column;align-items:flex-start;gap:.3rem}
  .na-arrow{display:none}
}

/* ============================================================ SHOP FOR (gender tiles) */
.shopfor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.5vw,1.4rem)}
.shopfor-4{grid-template-columns:repeat(4,1fr)}
.shopfor-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.shopfor-tile img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .7s var(--ease),opacity .4s}
.shopfor-tile:hover img{transform:scale(1.07);opacity:.72}
.shopfor-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.68));z-index:1}
.shopfor-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,2.5vw,1.8rem);color:#fff;z-index:2}
.shopfor-cap h3{font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff}
.shopfor-cap span{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.shopfor-cap em{font-style:normal;font-size:1.1rem;transition:transform .3s var(--ease);display:inline-block}
.shopfor-tile:hover .shopfor-cap em{transform:translateX(6px)}

/* ============================================================ WHY CHOOSE US */
/* identical treatment on every screen size — same as desktop, no distortion */
.section-why{position:relative;background:var(--ink-2) center/cover no-repeat;color:#fff;overflow:hidden}
/* dark veil so the copy stays legible over the texture */
.section-why::before{content:"";position:absolute;inset:0;background:rgba(17,16,16,.55)}
.section-why .container{position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.why-card{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1.8rem 1.6rem;display:flex;gap:1.1rem;transition:transform .35s var(--ease),background .35s}
.why-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.08)}
.why-no{font-family:var(--serif);font-weight:800;font-size:1.5rem;color:rgba(255,255,255,.5);line-height:1}
.why-body h3{font-family:var(--sans);font-size:1.02rem;margin-bottom:.35rem}
.why-body p{font-size:.85rem;color:rgba(255,255,255,.68);line-height:1.55}

/* ============================================================ STORES */
.section-stores{border-top:1px solid var(--line)}
.store-chip-grid{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:820px;margin:0 auto}
.store-chip{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:0;padding:.6rem 1.2rem;font-weight:600;font-size:.9rem;transition:.3s var(--ease)}
.store-chip:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.store-chip-pin{font-size:.6rem}

.stores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.store-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .35s,transform .35s var(--ease)}
.store-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.store-map{aspect-ratio:16/8;background:var(--smoke)}
.store-map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.store-card:hover .store-map iframe{filter:grayscale(0)}
.store-body{padding:1.4rem 1.5rem 1.6rem}
.store-area{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.store-body h3{font-size:1.25rem;margin:.25rem 0 .5rem}
.store-addr{font-size:.88rem;color:var(--muted);margin-bottom:.9rem}
.store-meta{display:grid;gap:.4rem;margin-bottom:1.1rem}
.store-meta li{font-size:.85rem;display:flex;gap:.6rem}
.store-meta li span{min-width:52px;font-weight:700;color:var(--ink)}
.store-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ============================================================ DEALER BAND */
.dealer-band{background:var(--ink) center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
/* dark veil so the headline + copy stay legible over the texture */
.dealer-band::before{content:"";position:absolute;inset:0;background:rgba(17,16,16,.62)}
.dealer-band::after{content:"";position:absolute;right:-8%;top:-40%;width:46%;height:180%;background:rgba(255,255,255,.04);transform:rotate(18deg)}
.dealer-band-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr auto;align-items:center;gap:2.4rem;padding-block:clamp(2.8rem,5vw,4rem)}
.dealer-band-inner p{color:rgba(255,255,255,.75);margin-top:.9rem;max-width:640px}

/* ============================================================ CTA BAND */
.cta-band{background:var(--smoke);border-top:1px solid var(--line)}
.cta-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding-block:clamp(2.4rem,4.5vw,3.4rem)}
.cta-inner p{color:var(--muted);margin-top:.6rem;max-width:560px}

/* ============================================================ PAGE HERO */
.page-hero{background:var(--ink);color:#fff;padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(2.4rem,5vw,3.6rem);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0 0 0 62%;background:rgba(255,255,255,.04);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.page-hero .container{position:relative}
.page-hero .eyebrow{color:rgba(255,255,255,.72)}
.page-hero .eyebrow::before{background:#fff}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.6rem}
.page-hero p{color:rgba(255,255,255,.75);max-width:620px}
.page-404 .notfound-actions{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}

/* ============================================================ COLLECTIONS FILTER */
.filter-bar{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-bottom:1.4rem}
.filter-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:#fff;border-radius:0;padding:.5rem 1rem;font-size:.83rem;font-weight:600;transition:.25s var(--ease)}
.filter-chip:hover{border-color:var(--ink)}
.filter-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-n{font-size:.68rem;background:var(--smoke-2);color:var(--muted);border-radius:0;padding:.05rem .4rem;min-width:1.3rem;text-align:center}
.filter-chip.is-active .chip-n{background:rgba(255,255,255,.2);color:#fff}
.filter-sub{margin-top:-.5rem;margin-bottom:1.6rem}
.filter-sub .filter-chip{font-size:.78rem;padding:.4rem .85rem;border-style:dashed;background:var(--smoke)}
.filter-sub .filter-chip.is-active{background:var(--ink);border-style:solid}
.result-count{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:2rem}
.empty-state{text-align:center;color:var(--muted);padding:3rem 0;display:flex;flex-direction:column;align-items:center;gap:1.2rem}

/* ============================================================ PRODUCT DETAIL */
.crumbs{border-bottom:1px solid var(--line);background:var(--smoke)}
.crumbs .container{padding-block:.9rem;font-size:.8rem;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .4rem;opacity:.6}
.crumb-current{color:var(--ink);font-weight:600}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.product-media-main{position:relative;border:1px solid var(--line);overflow:hidden;background:#fff}
/* contain, not cover — never crop a product photo */
.product-media-main img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.product-thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.product-thumb{width:76px;height:76px;border:1px solid var(--line);background:#fff;padding:0;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .2s}
.product-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.product-thumb:hover{border-color:var(--ink)}
.product-thumb.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.product-info .prod-cat{display:inline-block;margin-bottom:.7rem}
.product-info h1{font-size:clamp(1.7rem,3.5vw,2.5rem);margin-bottom:.8rem}
.product-meta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.product-code{font-size:.85rem;color:var(--muted)}
.product-price{font-family:var(--serif);font-weight:800;font-size:1.7rem}
.product-lead{color:var(--muted);margin-bottom:1.4rem}
.spec-block h3{font-family:var(--sans);font-size:1rem;margin-bottom:.8rem}
.spec-list{display:grid;gap:.55rem;margin-bottom:1.8rem}
.spec-list li{display:flex;gap:1rem;font-size:.9rem;padding-bottom:.55rem;border-bottom:1px dashed var(--line)}
.spec-k{min-width:120px;font-weight:700;color:var(--ink)}
.spec-v{color:var(--muted)}
.product-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.product-note{font-size:.78rem;color:var(--muted)}

/* ============================================================ ABOUT */
.about-text .split-title{margin:.4rem 0 1rem}
.about-text p{color:var(--muted);margin-bottom:1rem}
.mission-inner{text-align:center;max-width:780px;margin:0 auto}
.mission-quote{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.4;font-style:italic;margin-top:1rem}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.7rem;transition:transform .35s var(--ease),box-shadow .35s}
.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.value-no{font-family:var(--serif);font-weight:800;font-size:1.6rem;color:var(--smoke-2);-webkit-text-stroke:1px var(--ink);color:transparent;display:block;margin-bottom:.6rem}
.value-card h3{font-family:var(--sans);font-size:1.05rem;margin-bottom:.5rem}
.value-card p{font-size:.87rem;color:var(--muted)}

/* ============================================================ DEALER + CONTACT FORMS */
.dealer-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.dealer-pitch .split-title{margin-bottom:1rem}
.dealer-pitch p{color:var(--muted)}
.check-list{display:grid;gap:.7rem;margin:1.4rem 0}
.check-list li{position:relative;padding-left:2rem;font-weight:500}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.35rem;height:1.35rem;background:var(--ink);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.72rem}
.dealer-callout{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;padding:1.1rem 1.3rem;background:var(--smoke);border-radius:var(--r-lg);font-weight:600}

.lead-form,.contact-info{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.2rem)}
.lead-form h3{font-family:var(--sans);font-size:1.25rem;margin-bottom:.4rem}
.form-sub{color:var(--muted);font-size:.86rem;margin-bottom:1.3rem}
.lead-form label,.contact-form label{display:block;font-size:.8rem;font-weight:600;margin-bottom:1rem;color:var(--ink-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lead-form input,.lead-form textarea{
  width:100%;margin-top:.4rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:.92rem;font-weight:400;background:var(--smoke);transition:border-color .2s,background .2s;
}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.lead-form .btn{width:100%;margin-top:.4rem}
.form-note{font-size:.76rem;color:var(--muted);margin-top:.8rem;text-align:center}

.contact-info h3{font-family:var(--sans);font-size:1.2rem;margin-bottom:1.2rem}
.contact-list{display:grid;gap:1rem;margin-bottom:1.6rem}
.contact-list li{display:grid;gap:.15rem}
.contact-list strong{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list span{font-size:.95rem}
.contact-info .btn{width:100%}

/* ============================================================ LOOKBOOK */
.look-grid{columns:3;column-gap:clamp(.9rem,1.6vw,1.4rem)}
.look-item{position:relative;break-inside:avoid;margin-bottom:clamp(.9rem,1.6vw,1.4rem);border-radius:var(--r-lg);overflow:hidden;background:var(--smoke)}
.look-item img{width:100%;transition:transform .6s var(--ease)}
.look-item:hover img{transform:scale(1.05)}
.look-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;color:#fff;font-weight:600;font-size:.9rem;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transform:translateY(8px);transition:.3s}
.look-item:hover figcaption{opacity:1;transform:none}

/* ============================================================ FOOTER */
.site-footer{background:var(--ink);color:#fff;padding-top:clamp(3rem,5vw,4.2rem)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:2.4rem;padding-bottom:2.8rem}
.footer-logo{height:34px;margin-bottom:1.1rem}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.6;max-width:340px}
.social{display:flex;gap:.7rem;margin-top:1.3rem}
.social a{font-size:.8rem;font-weight:600;padding:.4rem .9rem;border:1px solid rgba(255,255,255,.22);border-radius:0;transition:.25s}
.social a:hover{background:#fff;color:var(--ink)}
.footer-col h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1rem}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{color:rgba(255,255,255,.8);font-size:.9rem;transition:.2s}
.footer-col a:hover{color:#fff;padding-left:4px}
.footer-contact li{color:rgba(255,255,255,.7);font-size:.88rem;margin-bottom:.55rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;padding-block:1.3rem;font-size:.8rem;color:rgba(255,255,255,.5)}
.footer-credit a{color:rgba(255,255,255,.5)}
.footer-credit a:hover{color:#fff}

/* ============================================================ WHATSAPP FLOAT */
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(37,211,102,.7);transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.1)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:wapulse 2.4s infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ============================================================ REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-slide img,.hero-slide.is-active img{animation:none}
  *{scroll-behavior:auto}
}

/* ============================================================ RESPONSIVE */
@media(max-width:1024px){
  .vp-row{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .cat-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .shopfor-4{grid-template-columns:repeat(2,1fr)}
  .why-grid,.value-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  /* collapse the split nav into a hamburger + drawer */
  .nav-side{display:none}
  .nav-toggle{display:flex;position:relative;z-index:110}
  /* The drawer sits ABOVE everything (incl. the header) and covers the full
     height, so it is never clipped or overpainted. It carries its own ✕. */
  .main-nav{
    display:flex;position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:4.6rem 1.4rem 2rem;
    transform:translateX(100%);transition:transform .35s var(--ease);
    box-shadow:-18px 0 50px -24px rgba(0,0,0,.5);z-index:300;overflow-y:auto;overscroll-behavior:contain;
  }
  .main-nav.open{transform:none}
  .nav-close{position:absolute;top:.9rem;right:1rem;width:42px;height:42px;border:0;background:none;
    font-size:2.1rem;line-height:1;color:var(--ink);cursor:pointer;display:grid;place-items:center;z-index:2}
  /* every drawer row: full-width block with the label on the left */
  .main-nav>a:not(.btn),.nav-drop>a{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:1rem .2rem;border-bottom:1px solid var(--line);
    font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink);
    letter-spacing:0;text-transform:none;white-space:normal;
  }
  .main-nav>a:not(.btn)::after,.nav-drop>a::after{display:none}
  .nav-drop{display:block;width:100%}
  .nav-drop>a .caret{font-size:1.15rem;opacity:.45;transition:transform .3s var(--ease)}
  .nav-drop.open>a .caret{transform:rotate(90deg);opacity:.8}
  .nav-drop.open>a{color:var(--ink);border-bottom-color:transparent}
  /* collapsible submenu (accordion) */
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;
    background:transparent;padding:0;max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  /* The desktop rule `.nav-drop:hover .nav-drop-menu{transform:translateX(-50%)}`
     lives outside any media query, and on touch :hover STICKS after a tap. Its
     specificity (0-2-0) beat the mobile `transform:none` (0-1-0), so the opened
     submenu was sliding half its width off-screen. Neutralise it here. */
  .nav-drop:hover .nav-drop-menu,
  .nav-drop.open .nav-drop-menu{transform:none;opacity:1;visibility:visible;box-shadow:none;left:auto;top:auto;min-width:0}
  .nav-drop:hover .nav-drop-menu{max-height:0}
  .nav-drop.open .nav-drop-menu{max-height:720px;border-bottom:1px solid var(--line)}
  .nav-drop-menu a{
    display:block;width:100%;position:relative;padding:.78rem .3rem .78rem 1.35rem;
    font-size:.93rem;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line);
  }
  .nav-drop-menu a:last-child{border-bottom:0}
  .nav-drop-menu a::before{content:"";position:absolute;left:.35rem;top:50%;width:5px;height:5px;
    border-radius:50%;background:var(--ink);opacity:.28;transform:translateY(-50%)}
  .nav-drop-menu a:hover{background:transparent;padding-left:1.55rem;color:var(--ink)}
  .nav-drop-all{font-weight:700;color:var(--ink)!important}
  .nav-drop-all::before{opacity:.6!important}
  .nav-wa{margin-top:1.5rem;justify-content:center;padding:.95rem 1.2rem;font-size:.95rem;border-radius:var(--r)}
  body.nav-open{overflow:hidden}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:290;opacity:0;visibility:hidden;transition:.3s}
  .nav-scrim.show{opacity:1;visibility:visible}
  .welcome-grid,.about-grid,.product-grid,.dealer-grid,.contact-grid{grid-template-columns:1fr}
  .welcome-media::before,.about-media::before{display:none}
  .stores-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .stat:nth-child(2){border-right:0}
  .promo::before{inset:0;clip-path:none;background:transparent}
  .promo-text{margin:0;text-align:left;max-width:none}
  .dealer-band-inner,.cta-inner{grid-template-columns:1fr;gap:1.4rem}
  .look-grid{columns:2}
}
@media(max-width:560px){
  .topbar-msg{font-size:.72rem}
  .vp-row{grid-template-columns:repeat(2,1fr);gap:1rem .6rem}
  .vp{justify-content:flex-start;gap:.55rem}
  .vp-label{font-size:.8rem}
  .vp-ic{width:22px;height:22px}
  .cat-grid,.prod-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  /* phone: swipeable slider instead of 4 tall stacked tiles */
  .shopfor-grid,.shopfor-4{display:flex;grid-template-columns:none;gap:.85rem;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:.4rem;
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .shopfor-grid::-webkit-scrollbar{display:none}
  .shopfor-tile{flex:0 0 76%;scroll-snap-align:start;aspect-ratio:4/5}
  /* tiles in a horizontal track must not stay hidden by the scroll-reveal */
  .shopfor-grid .reveal{opacity:1;transform:none}
  .why-grid,.value-grid{grid-template-columns:1fr}
  .welcome-points{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .look-grid{columns:1}
  .prod-card-actions{flex-direction:column}
  .btn{width:100%}
  .filter-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .filter-chip{flex:0 0 auto}
}

/* ============================================================ MOBILE HARDENING */
/* prevent any sideways scroll */
html,body{max-width:100%}
img,svg,iframe{max-width:100%}

@media(max-width:820px){
  /* tighter sticky header on phones/tablets */
  .header-inner{height:64px}
  .site-header.shrink .header-inner{height:56px}
  .brand img{height:32px}
  /* wide banners read better in a shorter hero on narrow screens */
  .hero{height:clamp(300px,52vw,440px)}
  /* keep the story badge from poking past the screen edge */
  .welcome-media,.about-media{overflow:visible}
  .welcome-badge{right:10px;bottom:10px;font-size:1.05rem;padding:.75rem .95rem}
  /* section rhythm */
  .section{padding:clamp(2.6rem,7vw,3.6rem) 0}
  .promo-inner{min-height:0}
}

@media(max-width:560px){
  /* let wide banners show as a letterbox instead of a deep centre-crop */
  .hero{height:clamp(210px,60vw,300px)}
  .hero-arrow{width:38px;height:38px;font-size:1.2rem}
  .hero-dots{bottom:.7rem}
  /* topbar: drop the long tagline, keep the useful links */
  .topbar-msg{display:none}
  .topbar-inner{justify-content:center}
  .topbar-right{gap:.5rem}
  /* headings a touch smaller so nothing clips */
  .split-title{font-size:clamp(1.5rem,6.5vw,2rem)}
  .page-hero h1{font-size:clamp(1.7rem,7vw,2.3rem)}
  .section-head{margin-bottom:1.8rem}
  /* comfortable tap targets */
  .main-nav>a:not(.btn),.nav-drop>a{padding:1rem .2rem}
  .btn-lg{padding:.9rem 1.4rem}
  /* keep cards tidy */
  .cat-card-body{padding:.9rem 1rem}
  .prod-card-body{padding:.9rem 1rem 1rem}
  .welcome-badge{right:8px;bottom:8px}
  .stat-num{font-size:clamp(1.9rem,9vw,2.6rem)}
  /* store maps a bit shorter on phones */
  .store-map{aspect-ratio:16/9}
}

/* phone: smaller, tighter cards inside the horizontal sliders
   (New Arrivals + Featured) so they don't read as tall/thin slabs */
@media(max-width:560px){
  .na-track .prod-card,
  .prod-track .prod-card{width:clamp(144px,42vw,168px)}
  .na-track .prod-card-body,
  .prod-track .prod-card-body{padding:.7rem .75rem .8rem;gap:.2rem}
  .na-track .prod-card-body h3,
  .prod-track .prod-card-body h3{font-size:.85rem;line-height:1.25}
  .na-track .prod-cat,
  .prod-track .prod-cat{font-size:.6rem;letter-spacing:.1em}
  .na-track .prod-price,
  .prod-track .prod-price{font-size:.95rem}
  .na-track .prod-code,
  .prod-track .prod-code{font-size:.62rem}
  .na-track .prod-actions-m,
  .prod-track .prod-actions-m{margin-top:.5rem;gap:.3rem}
  .na-track .prod-actions-m a,
  .prod-track .prod-actions-m a{font-size:.62rem;padding:.45rem .3rem}
}

@media(max-width:400px){
  :root{--pad:1rem}
  .hero{height:clamp(190px,58vw,260px)}
  .stats-grid{gap:1rem .6rem}
  .topbar-right a{font-size:.72rem}
}

/* ============================================================
   BRAND ACCENTS — blue + yellow (signboard palette) & MOTION
   Appended last so these deliberately win over the base rules.
   ============================================================ */

/* ---- yellow accent wherever the design had a black hairline ---- */
.eyebrow::before{background:var(--yellow)}
.nav-side>a:not(.btn)::after,.has-mega>a::after{background:var(--yellow);height:3px}
.vp::before{background:var(--yellow)}
.vp:hover .vp-ic{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}
.prod-flag{background:var(--yellow);color:var(--blue)}
.hero-dot.is-active{background:var(--yellow)}
.cat-card-img::after{border-color:var(--yellow);border-width:3px}
.welcome-badge{background:var(--yellow);color:var(--blue)}
.welcome-points li::before{background:var(--yellow)}
.check-list li::before{background:var(--yellow);color:var(--blue)}
.stat-num{color:var(--yellow)}
.why-no{color:var(--yellow)}
.value-no{-webkit-text-stroke:1px var(--yellow)}
.na-w2{-webkit-text-stroke:2px var(--yellow)}
.promo-tag{border-color:var(--yellow);color:var(--yellow)}
.mission-quote{color:var(--blue)}
.crumb-current{color:var(--blue)}
.product-price,.prod-price{color:var(--blue)}

/* ---- dark surfaces become brand blue ---- */
.topbar{background:var(--blue-3);border-bottom:3px solid var(--yellow)}
.site-footer{background:var(--blue-3)}
.stats-band{background:var(--blue)}
.section-why{background-color:var(--blue-2)}
.dealer-band{background-color:var(--blue-2)}
.page-hero{background-color:var(--blue)}
.promo{background:var(--blue-2)}
.footer-col h4{color:var(--yellow)}
.social a:hover{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}
.footer-col a:hover{color:var(--yellow)}

/* ---- buttons: blue primary, yellow on hover, with a light sweep ---- */
.btn-dark{--bg:var(--blue);--fg:#fff;--bd:var(--blue)}
.btn-dark:hover{--bg:var(--yellow);--fg:var(--blue);--bd:var(--yellow)}
.btn-outline{--bg:transparent;--fg:var(--blue);--bd:var(--blue)}
.btn-outline:hover{--bg:var(--blue);--fg:#fff}
.btn-light:hover{--bg:var(--yellow);--fg:var(--blue);--bd:var(--yellow)}
.btn-accent{--bg:var(--yellow);--fg:var(--blue);--bd:var(--yellow)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%);pointer-events:none}
.btn:hover::after{animation:sweep .75s var(--ease)}
@keyframes sweep{to{transform:translateX(320%)}}

.prod-ov-btn:hover{background:var(--yellow);color:var(--blue)}
.filter-chip.is-active{background:var(--blue);border-color:var(--blue)}
.filter-chip:hover{border-color:var(--blue)}
.store-chip:hover{background:var(--blue);color:#fff}
.prod-card:hover{border-color:var(--blue)}
.vp:hover{border-color:var(--blue)}
.value-card:hover{border-color:var(--blue)}

/* ---- signboard motif: yellow diagonal band ---- */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--yellow) 0 33%,#fff 33% 66%,var(--blue) 66% 100%)}

/* ---- animated brand ticker (blue band, yellow type) ---- */
.ticker{background:var(--blue);border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);
  overflow:hidden;padding:.7rem 0}
.ticker-track{display:flex;width:max-content;animation:tickerMove 28s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:.9rem;padding:0 1.6rem;
  font-family:var(--sans);font-weight:800;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;white-space:nowrap}
.ticker-item svg{width:26px;height:26px;color:var(--yellow);flex:0 0 auto;animation:stride 2.4s ease-in-out infinite}
.ticker-item:nth-child(even) svg{animation-delay:.6s}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes stride{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}

/* ---- floating motion on the story badge + WhatsApp float ---- */
.welcome-badge{animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---- animated underline on section headings ---- */
.section-head .split-title{position:relative;display:inline-block;padding-bottom:.5rem}
.section-head .split-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:4px;background:var(--yellow);transition:width .8s var(--ease)}
.section-head.in .split-title::after,.reveal.in .split-title::after{width:64px}

@media (prefers-reduced-motion:reduce){
  .ticker-track,.ticker-item svg,.welcome-badge{animation:none}
  .btn:hover::after{animation:none}
}

/* ============================================================
   HERO PRODUCT LAYER + GEN-Z MOTION
   ============================================================ */
.hero-decor{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}

/* floating product cut-outs (transparent PNGs) */
.hd-prod{position:absolute;width:clamp(120px,17vw,250px);height:auto;
  filter:drop-shadow(0 26px 30px rgba(14,30,82,.45))}
.hd-prod-1{left:3%;bottom:-4%;animation:bob 5.5s ease-in-out infinite}
.hd-prod-2{right:4%;top:6%;width:clamp(110px,15vw,215px);animation:bob 6.5s ease-in-out infinite .8s,tilt 9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(3deg)}}
@keyframes tilt{0%,100%{filter:drop-shadow(0 26px 30px rgba(14,30,82,.45))}50%{filter:drop-shadow(0 12px 22px rgba(255,210,0,.5))}}

/* brand shapes */
.hd-blob{position:absolute;left:-6%;top:-14%;width:clamp(180px,26vw,380px);aspect-ratio:1;
  background:var(--yellow);opacity:.9;border-radius:44% 56% 61% 39%/42% 40% 60% 58%;
  animation:morph 12s ease-in-out infinite,spinSlow 26s linear infinite;mix-blend-mode:multiply}
@keyframes morph{
  0%,100%{border-radius:44% 56% 61% 39%/42% 40% 60% 58%}
  33%{border-radius:62% 38% 35% 65%/58% 62% 38% 42%}
  66%{border-radius:38% 62% 55% 45%/36% 52% 48% 64%}
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hd-ring{position:absolute;right:8%;bottom:8%;width:clamp(90px,12vw,170px);aspect-ratio:1;
  border:7px solid var(--blue);border-radius:50%;opacity:.55;animation:pulseRing 4s ease-in-out infinite}
@keyframes pulseRing{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.25}}
.hd-dots{position:absolute;left:12%;top:14%;width:120px;height:90px;opacity:.5;
  background-image:radial-gradient(var(--blue) 2.5px,transparent 2.6px);background-size:16px 16px;
  animation:drift 8s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-12px)}}

/* sparkles */
.hd-spark{position:absolute;width:26px;height:26px;fill:var(--yellow);
  filter:drop-shadow(0 0 8px rgba(255,210,0,.9));animation:twinkle 2.6s ease-in-out infinite}
.hd-spark-1{left:34%;top:18%}
.hd-spark-2{right:26%;bottom:22%;width:20px;animation-delay:.8s;fill:#fff}
.hd-spark-3{left:22%;bottom:14%;width:16px;animation-delay:1.6s}
@keyframes twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.25}50%{transform:scale(1.15) rotate(90deg);opacity:1}}

/* ---- gen-z: bouncy pop-in instead of a flat fade ---- */
.reveal{transform:translateY(30px) scale(.96)}
.reveal.in{transform:none;transition:opacity .6s var(--ease),transform .75s cubic-bezier(.34,1.56,.64,1)}

/* ---- sticker-style NEW badge ---- */
.prod-flag{transform:rotate(-7deg);border-radius:2px;box-shadow:0 6px 14px -6px rgba(14,30,82,.6);
  top:.6rem;left:.6rem;animation:wobble 3.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(4deg) scale(1.06)}}

/* ---- playful card + tile hovers ---- */
.prod-card:hover{transform:translateY(-8px) rotate(-.6deg)}
.cat-card:hover .cat-card-img{transform:translateY(-8px) scale(1.03)}
.shopfor-tile:hover{transform:translateY(-4px)}
.shopfor-tile{transition:transform .4s var(--ease)}
.vp:hover .vp-ic{transform:rotate(-10deg) scale(1.08)}
.btn:hover{transform:translateY(-3px) scale(1.02)}

/* ---- hero decor is too busy on small phones ---- */
@media(max-width:640px){
  .hd-dots,.hd-spark-3,.hd-ring{display:none}
  .hd-prod-1{width:96px;left:2%;bottom:-2%}
  .hd-prod-2{width:80px;right:2%;top:8%}
  .hd-blob{width:150px;opacity:.75}
}
@media (prefers-reduced-motion:reduce){
  .hd-prod,.hd-blob,.hd-ring,.hd-dots,.hd-spark,.prod-flag{animation:none}
  .reveal.in{transition:opacity .4s}
}

/* ============================================================
   HERO SHOWCASE — product centred, feature callouts around it
   ============================================================ */
.hero-showcase{background:linear-gradient(135deg,#f7f9ff 0%,#e9eff9 55%,#dfe7f6 100%);overflow:hidden}
.hero-showcase .hero-slide{display:grid;place-items:center;background-size:cover;background-position:center}
.hero-showcase .hero-slide img{animation:none} /* no ken-burns on the cut-out */

/* background brand shapes */
.hs-blob{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  width:clamp(260px,42vw,560px);aspect-ratio:1;background:var(--yellow);opacity:.9;
  border-radius:44% 56% 61% 39%/42% 40% 60% 58%;
  animation:morph 14s ease-in-out infinite,spinSlow 40s linear infinite}
.hs-grid{position:absolute;inset:0;z-index:0;opacity:.35;
  background-image:radial-gradient(var(--blue) 1.6px,transparent 1.7px);background-size:22px 22px}

/* the stage holds the shoe + its callouts */
.hs-stage{position:relative;z-index:3;width:min(1020px,94vw);height:100%;display:grid;place-items:center}
.hs-ring{position:absolute;width:clamp(220px,32vw,420px);aspect-ratio:1;border:3px dashed var(--blue);
  border-radius:50%;opacity:.35;animation:spinSlow 30s linear infinite}

/* centred product */
.hs-prod{position:relative;z-index:4;width:clamp(180px,30vw,430px);height:auto;
  filter:drop-shadow(0 34px 38px rgba(14,30,82,.45));
  animation:prodIn 1s cubic-bezier(.34,1.56,.64,1) both,bob 6s ease-in-out 1s infinite}
@keyframes prodIn{from{opacity:0;transform:translateY(60px) scale(.75) rotate(-12deg)}to{opacity:1;transform:none}}

/* feature callouts around the shoe */
.hs-feat{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;color:var(--blue);border:2px solid var(--blue);
  font-family:var(--sans);font-weight:800;font-size:clamp(.62rem,1.05vw,.82rem);
  letter-spacing:.08em;text-transform:uppercase;padding:.5rem .85rem;white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(14,30,82,.6);
  opacity:0;animation:featIn .7s cubic-bezier(.34,1.56,.64,1) forwards}
.hs-feat .hs-dot{width:9px;height:9px;background:var(--yellow);border:2px solid var(--blue);border-radius:50%;flex:0 0 auto}
.hs-f1{left:2%;top:20%;animation-delay:.55s}
.hs-f2{right:2%;top:28%;animation-delay:.75s}
.hs-f3{left:6%;bottom:24%;animation-delay:.95s}
.hs-f4{right:5%;bottom:18%;animation-delay:1.15s}
@keyframes featIn{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
.hs-feat:hover{background:var(--yellow);transform:translateY(-3px) rotate(-1.5deg)}
.hs-feat{transition:background .25s,transform .25s var(--ease)}

/* shop-now pill under the shoe */
.hs-cta{position:absolute;z-index:6;bottom:6%;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-family:var(--sans);font-weight:800;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1.7rem;border:2px solid var(--blue);
  box-shadow:0 14px 30px -14px rgba(14,30,82,.8);opacity:0;
  animation:featIn .7s cubic-bezier(.34,1.56,.64,1) 1.35s forwards;transition:background .25s,color .25s}
.hs-cta:hover{background:var(--yellow);color:var(--blue)}

/* phones: shrink the shoe, drop callouts to the corners */
@media(max-width:820px){
  .hero-showcase{height:clamp(340px,74vw,470px)}
  .hs-prod{width:clamp(150px,40vw,230px)}
  .hs-feat{font-size:.58rem;padding:.4rem .6rem;gap:.35rem;border-width:1.5px}
  .hs-f1{left:0;top:12%}
  .hs-f2{right:0;top:12%}
  .hs-f3{left:0;bottom:26%}
  .hs-f4{right:0;bottom:26%}
  .hs-cta{bottom:4%;font-size:.68rem;padding:.6rem 1.2rem}
  .hs-ring{width:clamp(180px,52vw,260px)}
}
@media(max-width:420px){
  .hs-f3,.hs-f4{display:none}
  .hs-prod{width:clamp(130px,44vw,180px)}
}
@media (prefers-reduced-motion:reduce){
  .hs-prod,.hs-blob,.hs-ring{animation:none}
  .hs-feat,.hs-cta{opacity:1;animation:none}
}

/* ============================================================
   HERO SHOWCASE v2 — ghosted word, tilted floating shoe,
   details left, price + CTA right. Own implementation.
   ============================================================ */
.hero-showcase{height:clamp(430px,52vw,640px)}
.hero-showcase .hero-slide{background-size:cover;background-position:center;display:block}
.hero-showcase .hs-blob,.hero-showcase .hs-grid{display:none}
/* soft veil so text stays readable over any background */
.hero-showcase .hero-slide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.30) 55%,rgba(255,255,255,.55))}

.hs-stage{position:relative;z-index:3;width:min(1220px,100%);height:100%;margin:0 auto;
  padding-inline:var(--pad);display:block}

/* ---- huge ghosted word behind the shoe ---- */
.hs-word{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--sans);font-weight:900;letter-spacing:.02em;
  font-size:clamp(4.5rem,17vw,15rem);line-height:1;color:rgba(255,255,255,.55);
  text-transform:uppercase;white-space:nowrap;pointer-events:none;
  animation:wordIn 1.1s var(--ease) both}
@keyframes wordIn{from{opacity:0;transform:translate(-50%,-42%) scale(1.12)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ---- centre: tilted, floating product ---- */
.hs-prod-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  animation:prodFly 1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes prodFly{from{opacity:0;transform:translate(calc(-50% + 130px),-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hs-prod{width:clamp(190px,32vw,470px);height:auto;
  filter:drop-shadow(0 38px 40px rgba(14,30,82,.42));
  transform:rotate(-16deg);animation:bobTilt 6s ease-in-out 1s infinite}
@keyframes bobTilt{0%,100%{transform:rotate(-16deg) translateY(0)}50%{transform:rotate(-11deg) translateY(-20px)}}
.hs-shadow{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  width:62%;height:22px;background:rgba(14,30,82,.28);filter:blur(14px);border-radius:50%;
  animation:shadowPulse 6s ease-in-out 1s infinite}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.35}50%{transform:translateX(-50%) scale(.82);opacity:.2}}
.hs-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(240px,34vw,470px);aspect-ratio:1;border:3px dashed rgba(26,58,143,.35);border-radius:50%;
  z-index:2;animation:spinSlow 34s linear infinite}

/* ---- left: product details ---- */
.hs-info{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:5;max-width:min(300px,32vw);
  animation:infoIn .9s var(--ease) .25s both}
@keyframes infoIn{from{opacity:0;transform:translate(-28px,-50%)}to{opacity:1;transform:translateY(-50%)}}
.hs-eyebrow{display:inline-block;font-weight:800;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);background:var(--yellow);padding:.35rem .7rem;margin-bottom:.8rem}
.hs-title{font-family:var(--serif);font-weight:800;color:var(--blue);
  font-size:clamp(1.3rem,2.4vw,2.1rem);line-height:1.1;margin-bottom:1rem}
.hs-specs{display:grid;gap:.5rem}
.hs-specs li{display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;color:var(--blue);
  animation:specIn .6s var(--ease) both}
.hs-specs li:nth-child(1){animation-delay:.5s}
.hs-specs li:nth-child(2){animation-delay:.62s}
.hs-specs li:nth-child(3){animation-delay:.74s}
.hs-specs li:nth-child(4){animation-delay:.86s}
@keyframes specIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.hs-specs .hs-dot{width:8px;height:8px;background:var(--yellow);border:2px solid var(--blue);border-radius:50%;flex:0 0 auto}

/* ---- right: price + CTA card ---- */
.hs-buy{position:absolute;right:var(--pad);bottom:12%;z-index:5;display:flex;align-items:center;gap:1rem;
  background:#fff;border:2px solid var(--blue);padding:.85rem 1rem .85rem 1.2rem;
  box-shadow:0 22px 44px -22px rgba(14,30,82,.7);
  animation:buyIn .8s cubic-bezier(.34,1.56,.64,1) .95s both}
@keyframes buyIn{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
.hs-price-label{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:.1rem}
.hs-price{font-family:var(--serif);font-weight:800;font-size:1.4rem;color:var(--blue);line-height:1}
.hs-cta{background:var(--blue);color:#fff;font-family:var(--sans);font-weight:800;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1.3rem;border:2px solid var(--blue);
  white-space:nowrap;transition:background .25s,color .25s,transform .25s}
.hs-cta:hover{background:var(--yellow);color:var(--blue);transform:translateY(-2px)}

/* ---- phones: stack it ---- */
@media(max-width:860px){
  .hero-showcase{height:auto;min-height:0}
  .hero-showcase .hero-slide{position:absolute;inset:0}
  .hs-stage{padding-block:1.4rem}
  .hs-word{font-size:clamp(3rem,20vw,6rem);top:26%;color:rgba(255,255,255,.6)}
  .hs-prod-wrap{top:46%}
  .hs-prod{width:clamp(150px,44vw,240px)}
  .hs-info{left:var(--pad);top:auto;bottom:auto;max-width:46%;transform:none}
  .hs-info{top:8%}
  .hs-title{font-size:1rem;margin-bottom:.5rem}
  .hs-specs{display:none}
  .hs-eyebrow{font-size:.55rem;padding:.25rem .5rem;margin-bottom:.4rem}
  .hs-buy{right:var(--pad);bottom:8%;gap:.6rem;padding:.55rem .6rem .55rem .8rem}
  .hs-price{font-size:1.05rem}
  .hs-cta{font-size:.62rem;padding:.55rem .8rem}
  .hs-ring{width:clamp(190px,56vw,280px)}
}
@media (prefers-reduced-motion:reduce){
  .hs-word,.hs-prod-wrap,.hs-prod,.hs-info,.hs-buy,.hs-specs li,.hs-ring,.hs-shadow{animation:none}
}

/* ============================================================
   HERO "LUX" — gradient panel, copy left, product + orbit right.
   Supersedes every earlier hero-showcase rule.
   ============================================================ */
.hero-lux{height:auto;min-height:clamp(460px,46vw,620px);overflow:hidden;
  background:
    radial-gradient(120% 120% at 78% 45%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(125deg,#0b1740 0%,#16265a 42%,#1a3a8f 100%)}
.hero-lux .hero-slide{position:absolute;inset:0;display:grid;place-items:center;background:none}
.hero-lux .hero-slide::before{display:none}

.lux-inner{width:min(1220px,100%);margin:0 auto;padding:clamp(1.6rem,3vw,2.4rem) var(--pad);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1rem,3vw,2.6rem);align-items:center}

/* ---- left copy ---- */
.lux-copy{position:relative;z-index:3;color:#fff;max-width:520px}
.lux-eyebrow{display:inline-block;font-weight:800;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:#0b1740;background:var(--accent);padding:.35rem .75rem;margin-bottom:1rem;
  animation:luxUp .7s var(--ease) .1s both}
.lux-brand{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);
  color:#fff;line-height:1;animation:luxUp .7s var(--ease) .2s both}
.lux-title{font-family:var(--serif);font-weight:800;font-size:clamp(1.35rem,2.5vw,2.2rem);line-height:1.12;
  color:var(--accent);margin:.15rem 0 .7rem;animation:luxUp .7s var(--ease) .3s both}
.lux-kicker{display:block;font-weight:800;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:.75rem;animation:luxUp .7s var(--ease) .4s both}
.lux-blurb{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.72);margin-bottom:1.5rem;
  animation:luxUp .7s var(--ease) .5s both}
.lux-buy{display:flex;align-items:center;gap:1.3rem;animation:luxUp .7s var(--ease) .6s both}
.lux-price{font-family:var(--serif);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);color:#fff}
.lux-cta{background:var(--accent);color:#0b1740;font-family:var(--sans);font-weight:800;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.9rem 1.7rem;border:2px solid var(--accent);
  box-shadow:0 16px 34px -16px var(--accent);transition:transform .25s var(--ease),background .25s,color .25s}
.lux-cta:hover{transform:translateY(-3px);background:transparent;color:var(--accent)}
@keyframes luxUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---- right: product + orbiting ribbon ---- */
.lux-media{position:relative;z-index:2;display:grid;place-items:center;min-height:clamp(240px,30vw,420px)}
.lux-orbit{position:absolute;width:clamp(300px,40vw,560px);aspect-ratio:1;
  animation:orbitSpin 26s linear infinite;opacity:.85}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.lux-glow{position:absolute;width:clamp(200px,26vw,360px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.35;filter:blur(24px);
  animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.12);opacity:.5}}
.lux-prod{position:relative;z-index:3;width:clamp(190px,29vw,430px);height:auto;
  filter:drop-shadow(0 40px 44px rgba(0,0,0,.55));
  transform:rotate(-14deg);
  animation:luxFly 1s cubic-bezier(.34,1.56,.64,1) both,luxBob 6s ease-in-out 1.1s infinite}
@keyframes luxFly{from{opacity:0;transform:translateX(90px) rotate(-30deg) scale(.82)}
                  to{opacity:1;transform:rotate(-14deg) scale(1)}}
@keyframes luxBob{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(-9deg) translateY(-20px)}}
.lux-shadow{position:absolute;bottom:6%;width:46%;height:20px;border-radius:50%;
  background:rgba(0,0,0,.55);filter:blur(16px);animation:luxShadow 6s ease-in-out 1.1s infinite}
@keyframes luxShadow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(.8);opacity:.3}}

/* ---- hero controls on the dark panel ---- */
.hero-lux .hero-arrow{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(4px)}
.hero-lux .hero-arrow:hover{background:var(--yellow);color:var(--blue)}
.hero-lux .hero-dot{background:rgba(255,255,255,.35)}
.hero-lux .hero-dot.is-active{background:var(--yellow)}

/* ---- phones: stack copy above product ---- */
@media(max-width:860px){
  .hero-lux{min-height:0}
  .lux-inner{grid-template-columns:1fr;gap:.6rem;padding-block:2rem 2.6rem;text-align:center}
  .lux-copy{max-width:none;margin:0 auto;order:2}
  .lux-media{order:1;min-height:190px}
  .lux-blurb{display:none}
  .lux-buy{justify-content:center;gap:1rem}
  .lux-prod{width:clamp(150px,44vw,230px)}
  .lux-orbit{width:clamp(230px,64vw,320px)}
  .hero-lux .hero-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lux-orbit,.lux-glow,.lux-prod,.lux-shadow,
  .lux-eyebrow,.lux-brand,.lux-title,.lux-kicker,.lux-blurb,.lux-buy{animation:none;opacity:1}
}

/* ============================================================
   BRAND STORY — animated ("Since 2007 — 18+ Years")
   ============================================================ */
.welcome-media{position:relative}
/* rotating yellow accent frame behind the photo */
.welcome-media::after{content:"";position:absolute;right:-16px;top:-16px;width:46%;height:46%;
  border:4px solid var(--yellow);z-index:-1;animation:frameFloat 7s ease-in-out infinite}
@keyframes frameFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,8px) rotate(-2.5deg)}}
/* photo wipes open */
.welcome-media img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.welcome-media.in img{animation:wipeUp 1.1s var(--ease) .1s forwards}
@keyframes wipeUp{to{clip-path:inset(0 0 0 0);transform:scale(1)}}

/* staggered copy */
.welcome-text .eyebrow,
.welcome-text .split-title,
.welcome-text>p,
.welcome-text .welcome-points li,
.welcome-text .btn{opacity:0}
.welcome-text.in .eyebrow{animation:luxUp .6s var(--ease) .05s both}
.welcome-text.in .split-title{animation:luxUp .7s var(--ease) .18s both}
.welcome-text.in>p{animation:luxUp .7s var(--ease) .32s both}
.welcome-text.in .welcome-points li{animation:luxUp .55s var(--ease) both}
.welcome-text.in .welcome-points li:nth-child(1){animation-delay:.46s}
.welcome-text.in .welcome-points li:nth-child(2){animation-delay:.56s}
.welcome-text.in .welcome-points li:nth-child(3){animation-delay:.66s}
.welcome-text.in .welcome-points li:nth-child(4){animation-delay:.76s}
.welcome-text.in .btn{animation:luxUp .6s cubic-bezier(.34,1.56,.64,1) .9s both}
/* the bullets pop as they land */
.welcome-points li::before{transition:transform .3s var(--ease)}
.welcome-points li:hover::before{transform:rotate(135deg) scale(1.25)}

@media (prefers-reduced-motion:reduce){
  .welcome-media img{clip-path:none;transform:none;animation:none}
  .welcome-media::after{animation:none}
  .welcome-text .eyebrow,.welcome-text .split-title,.welcome-text>p,
  .welcome-text .welcome-points li,.welcome-text .btn{opacity:1;animation:none}
}

/* ============================================================
   MONSOON PROMO — product on the left, copy on the right
   ============================================================ */
.promo-inner{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;
  gap:clamp(1.4rem,4vw,3.2rem);min-height:0}
.promo-media{position:relative;display:grid;place-items:center;z-index:2}
.promo-media img{position:relative;z-index:3;width:clamp(170px,24vw,360px);height:auto;
  transform:rotate(-12deg);filter:drop-shadow(0 34px 38px rgba(0,0,0,.5));
  animation:promoBob 6s ease-in-out infinite}
@keyframes promoBob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-18px)}}
.promo-glow{position:absolute;z-index:1;width:clamp(180px,24vw,340px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--yellow),transparent 62%);opacity:.45;filter:blur(22px);
  animation:glowPulse 5.5s ease-in-out infinite}
.promo-shadow{position:absolute;z-index:2;bottom:6%;width:44%;height:18px;border-radius:50%;
  background:rgba(0,0,0,.5);filter:blur(14px);animation:luxShadow 6s ease-in-out infinite}
/* copy sits left-aligned beside the shoe now */
.promo-text{margin:0;text-align:left;max-width:560px;position:relative;z-index:3}

@media(max-width:820px){
  .promo-inner{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .promo-media{order:1}
  .promo-text{order:2;text-align:center;margin:0 auto}
  .promo-media img{width:clamp(150px,42vw,220px)}
}
@media (prefers-reduced-motion:reduce){
  .promo-media img,.promo-glow,.promo-shadow{animation:none}
}

/* ============================================================
   CHROME YELLOW — deeper golden accent, paired with brand yellow
   ============================================================ */
:root{
  --chrome:#ffa700;        /* chrome yellow */
  --chrome-2:#e8930a;      /* deeper edge */
  --gold:linear-gradient(135deg,var(--yellow) 0%,var(--chrome) 100%);
}

/* gradient gold on the headline accents */
.eyebrow::before{background:var(--gold)}
.section-head .split-title::after{background:var(--gold)}
.nav-side>a:not(.btn)::after,.has-mega>a::after{background:var(--gold)}
.vp::before{background:var(--gold)}

/* badges + chips get the two-tone gold */
.prod-flag{background:var(--gold);color:var(--blue-3)}
.welcome-badge{background:var(--gold);color:var(--blue-3)}
.hs-eyebrow,.lux-eyebrow{background:var(--gold);color:var(--blue-3)}
.check-list li::before{background:var(--gold);color:var(--blue-3)}
.welcome-points li::before{background:var(--gold)}

/* buttons: blue -> chrome-gold on hover */
.btn-dark:hover{--bg:var(--chrome);--fg:var(--blue-3);--bd:var(--chrome)}
.btn-light:hover{--bg:var(--chrome);--fg:var(--blue-3);--bd:var(--chrome)}
.btn-accent{--bg:var(--chrome);--fg:var(--blue-3);--bd:var(--chrome)}
.prod-ov-btn:hover{background:var(--chrome);color:var(--blue-3)}
.hs-cta:hover{background:var(--chrome);color:var(--blue-3)}
.hero-lux .hero-arrow:hover{background:var(--chrome);color:var(--blue-3)}
.cat-slider-arrow:hover,.prod-arrow:hover,.na-arrow:hover{background:var(--chrome);color:var(--blue-3)}
.social a:hover,.footer-col a:hover{color:var(--chrome)}

/* stats + numerals in chrome gold */
.stat-num{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-no{color:var(--chrome)}
.na-w2{-webkit-text-stroke:2px var(--chrome)}

/* ticker: gold rules top and bottom */
.ticker{border-top:3px solid var(--chrome);border-bottom:3px solid var(--yellow)}
.ticker-item svg{color:var(--chrome)}

/* category circles: gold ring on hover */
.cat-card-img::after{border-color:var(--chrome)}

/* signboard band under page headers: blue / white / yellow / chrome */
.page-hero::after{background:linear-gradient(90deg,
  var(--blue) 0 25%, #fff 25% 50%, var(--yellow) 50% 75%, var(--chrome) 75% 100%)}

/* hero glow warms up */
.promo-glow{background:radial-gradient(circle,var(--chrome),transparent 62%)}

/* monsoon promo: the pair shot is landscape, so give it more width */
.promo-media img{width:clamp(200px,28vw,420px);transform:rotate(-8deg)}
@keyframes promoBob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-16px)}}
@media(max-width:820px){.promo-media img{width:clamp(180px,52vw,260px)}}

/* ============================================================
   DEALER BAND — chrome-yellow → yellow gradient (no photo bg)
   Light background, so the copy flips to deep blue.
   ============================================================ */
.dealer-band{
  background:
    radial-gradient(120% 130% at 85% 20%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(115deg, var(--chrome) 0%, #ffbe1a 45%, var(--yellow) 100%);
  color:var(--blue-3);
}
/* kill the dark veil + the old diagonal sheen */
.dealer-band::before{background:none}
.dealer-band::after{background:rgba(255,255,255,.28)}

/* copy reads dark on the gold */
.dealer-band .split-title,
.dealer-band .split-title-light{color:var(--blue-3)}
.dealer-band .eyebrow,
.dealer-band .eyebrow-light{color:var(--blue-2)}
.dealer-band .eyebrow::before,
.dealer-band .eyebrow-light::before{background:var(--blue-3)}
.dealer-band-inner p{color:rgba(14,30,82,.82)}

/* CTA: solid blue on the gold, inverting on hover */
.dealer-band .btn-light{--bg:var(--blue-3);--fg:#fff;--bd:var(--blue-3)}
.dealer-band .btn-light:hover{--bg:transparent;--fg:var(--blue-3);--bd:var(--blue-3)}

/* ============================================================
   HERO SHOWCASE — BACKGROUND ONLY CHANGE.
   Same layout + animation as before; the per-slide photo
   background is replaced by a brand gradient tinted with the
   slide's own accent colour. Nothing else is touched.
   ============================================================ */
.hero-showcase{
  background:linear-gradient(125deg,#f7f9ff 0%,#eaf0fb 55%,#dde6f6 100%);
}
/* no photos on the slides any more */
.hero-showcase .hero-slide{background-image:none !important;background-color:transparent}
/* the old white veil becomes a soft accent glow, so each product
   gets its own colour wash (rose / teal / chrome-yellow) */
.hero-showcase .hero-slide::before{
  content:"";position:absolute;inset:0;display:block;
  background:
    radial-gradient(65% 78% at 68% 46%, var(--accent), transparent 62%),
    radial-gradient(50% 60% at 12% 80%, var(--yellow), transparent 65%);
  opacity:.42;
}

/* ============================================================
   FIX: the hero vanished on phones.
   All hero slides are position:absolute, so nothing is in the
   normal flow — an earlier `height:auto;min-height:0` mobile rule
   collapsed the section to zero height. Give it a real height.
   ============================================================ */
@media(max-width:860px){
  .hero-showcase{height:clamp(430px,115vw,540px) !important;min-height:0}
  .hero-showcase .hs-stage{height:100%}
  /* keep the stacked pieces inside that box */
  .hs-word{top:24%;font-size:clamp(2.8rem,19vw,5rem)}
  .hs-info{top:6%;max-width:52%}
  .hs-prod-wrap{top:52%}
  .hs-prod{width:clamp(160px,46vw,240px)}
  .hs-buy{bottom:6%}
  .hs-ring{width:clamp(190px,58vw,270px)}
}
@media(max-width:420px){
  .hero-showcase{height:clamp(400px,120vw,470px) !important}
  .hs-prod{width:clamp(140px,46vw,190px)}
  .hs-title{font-size:.95rem}
}

/* ============================================================
   PHONE: make sure the hero + section animations actually run.
   (The left info panel had animation disabled on mobile.)
   ============================================================ */
@media(max-width:860px){
  .hs-info{animation:infoIn .9s var(--ease) .25s both}
  .hs-word{animation:wordIn 1.1s var(--ease) both}
  .hs-prod-wrap{animation:prodFly 1s cubic-bezier(.34,1.56,.64,1) both}
  .hs-prod{animation:bobTilt 6s ease-in-out 1s infinite}
  .hs-buy{animation:buyIn .8s cubic-bezier(.34,1.56,.64,1) .95s both}
  .hs-shadow{animation:shadowPulse 6s ease-in-out 1s infinite}
  .hs-ring{animation:spinSlow 34s linear infinite}
}

/* ============================================================
   PHONE FIXES
   1. the hero price/CTA card was overflowing the right edge
   2. "Find Your Pair" tiles were too large
   ============================================================ */
@media(max-width:860px){
  /* keep the buy card inside the screen and make it compact */
  .hs-buy{
    right:var(--pad);left:auto;
    max-width:calc(100% - (var(--pad) * 2));
    padding:.45rem .5rem .45rem .75rem;gap:.5rem;
    flex-wrap:nowrap;overflow:hidden;
  }
  .hs-price-label{font-size:.5rem;letter-spacing:.1em}
  .hs-price{font-size:1rem}
  .hs-cta{font-size:.58rem;padding:.5rem .65rem;letter-spacing:.08em;white-space:nowrap}
}
@media(max-width:420px){
  .hs-buy{padding:.4rem .45rem .4rem .6rem;gap:.4rem}
  .hs-price{font-size:.9rem}
  .hs-cta{font-size:.54rem;padding:.45rem .55rem}
}

/* smaller Shop-For tiles on phones */
@media(max-width:560px){
  .shopfor-tile{flex:0 0 58%;aspect-ratio:3/4}
  .shopfor-cap{padding:.9rem}
  .shopfor-cap h3{font-size:1.05rem}
  .shopfor-cap span{font-size:.58rem;letter-spacing:.08em;gap:.3rem}
  .shopfor-cap em{font-size:.9rem}
}
@media(max-width:400px){
  .shopfor-tile{flex:0 0 64%}
}

/* ============================================================
   FIX: "SHOP NOW" was being cut off.
   The previous rule capped the card's width and set
   overflow:hidden — so instead of fitting, it clipped the label.
   Let the card size to its content and sit inside the padding.
   ============================================================ */
@media(max-width:860px){
  .hs-buy{
    width:max-content;
    max-width:none;
    overflow:visible;
    right:var(--pad);left:auto;
    flex-wrap:nowrap;
  }
  .hs-buy>*{flex:0 0 auto}
  .hs-cta{white-space:nowrap;overflow:visible;text-overflow:clip}
  .hs-price,.hs-price-label{white-space:nowrap}
}

/* ============================================================
   TOUCH: :hover STICKS after the first tap, so a hover animation
   plays once and then freezes — pressing again does nothing.
   On touch devices we cancel :hover transforms and drive the same
   motion from :active, which re-fires on every single press.
   ============================================================ */
@media(hover:none){
  *{-webkit-tap-highlight-color:transparent}

  /* cancel the sticky hover states */
  .prod-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .prod-card:hover .prod-card-img img{transform:none}
  .cat-card:hover .cat-card-img{transform:none;box-shadow:none}
  .cat-card:hover .cat-card-img img{transform:none}
  .cat-card:hover .cat-card-img::after{opacity:0}
  .shopfor-tile:hover{transform:none}
  .shopfor-tile:hover img{transform:none;opacity:.85}
  .btn:hover{transform:none}
  .vp:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .vp:hover .vp-ic{transform:none;background:transparent;color:var(--ink)}
  .value-card:hover,.why-card:hover,.store-card:hover{transform:none}

  /* …and replay them on every press instead */
  .prod-card:active{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow);border-color:var(--blue);
    transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
  .prod-card:active .prod-card-img img{transform:scale(1.07);transition:transform .25s var(--ease)}
  .cat-card:active .cat-card-img{transform:translateY(-6px) scale(1.03);box-shadow:var(--shadow);
    transition:transform .2s var(--ease),box-shadow .2s}
  .cat-card:active .cat-card-img img{transform:scale(1.07)}
  .cat-card:active .cat-card-img::after{opacity:1;transform:scale(1)}
  .shopfor-tile:active{transform:translateY(-4px) scale(.99);transition:transform .18s var(--ease)}
  .shopfor-tile:active img{transform:scale(1.05);opacity:.72}
  .btn:active,.prod-ov-btn:active,.pam-view:active,.pam-wa:active,.hs-cta:active{
    transform:scale(.96);transition:transform .12s var(--ease)}
  .vp:active{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue);
    transition:transform .18s var(--ease)}
  .vp:active .vp-ic{background:var(--gold);color:var(--blue-3);transform:rotate(-8deg) scale(1.06)}
  .value-card:active,.why-card:active,.store-card:active{transform:translateY(-4px);transition:transform .18s var(--ease)}
  .filter-chip:active{transform:scale(.96)}
}

/* ============================================================
   FIX (properly): the price/CTA card kept escaping the right edge.
   Anchoring with right: wasn't holding, so on phones we centre it
   at the bottom — it can't overflow either side. Its entrance is a
   FADE (not a transform) because a transform animation would
   cancel the translateX(-50%) that does the centring.
   ============================================================ */
@media(max-width:860px){
  .hs-buy{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
    bottom:5%;
    width:max-content;
    max-width:calc(100vw - (var(--pad) * 2));
    overflow:visible;
    animation:buyFade .7s var(--ease) .9s both !important;
  }
  .hs-buy>*{flex:0 0 auto;min-width:0}
  .hs-cta{white-space:nowrap}
}
@keyframes buyFade{from{opacity:0}to{opacity:1}}

/* ============================================================
   HEADER — logo LEFT, menu after it (was centered)
   ============================================================ */
.header-left .header-inner{justify-content:flex-start;gap:clamp(1rem,2.6vw,2.4rem)}
.header-left .brand{position:static;transform:none;flex:0 0 auto}
.header-left .nav-main{margin-right:auto;gap:.1rem}
.header-actions{display:flex;align-items:center;flex:0 0 auto}
/* the mega panels drop straight down from their nav item */
.header-left .mega{left:0;right:auto}
@media(max-width:1024px){
  /* mobile: logo left, hamburger right; everything else in the drawer */
  .header-left .header-inner{justify-content:space-between}
  .header-actions{display:none}
}

/* ============================================================
   HOME IMAGE BANNER + TAGLINE (replaces the welcome story block)
   ============================================================ */
/* full image, never cropped — scales to the container width */
.homebanner{display:block;width:100%;line-height:0}
.homebanner img{width:100%;height:auto;display:block}

/* ============================================================
   DIAGONAL HEADER — white (blue logo) / yellow (menus)
   ============================================================ */
.header-diag{position:relative;background:var(--yellow)}
/* white wedge on the left with a diagonal right edge (clip-path contains it — no overflow:hidden needed) */
/* white wedge sized so the whole logo sits inside it, clear of the diagonal */
.header-diag .header-split{position:absolute;left:0;top:0;bottom:0;width:clamp(300px,44vw,460px);background:#fff;z-index:0;
  clip-path:polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%)}
/* full-width bar (not the centered container) so the logo sits near the left
   edge of the white wedge instead of being pushed in by the container margin */
.header-diag .header-inner{position:relative;z-index:1;max-width:none;padding-inline:clamp(1.4rem,3.5vw,2.8rem)}
.header-diag .nav-wa{margin-right:clamp(.4rem,2vw,1.6rem)}
/* blue logo — smaller, left on the white box; brand reserves the wedge width
   so the menu that follows begins on the yellow part */
.header-diag .brand{flex:0 0 auto;min-width:clamp(320px,46vw,485px);margin-right:0}
.header-diag .brand img{height:36px;max-width:280px;object-fit:contain}
.site-header.shrink.header-diag .brand img{height:32px}
/* menus on the yellow — deep blue text */
.header-diag .nav-main>a:not(.btn),
.header-diag .has-mega>a{color:var(--blue-3);font-weight:700}
.header-diag .nav-main>a:not(.btn)::after,
.header-diag .has-mega>a::after{background:var(--blue-3);height:3px}
.header-diag .nav-main>a:not(.btn):hover,
.header-diag .has-mega:hover>a,
.header-diag .nav-main>a.is-active,
.header-diag .has-mega>a.is-active{color:var(--blue-3)}
/* WhatsApp button keeps green; caret in blue */
.header-diag .caret{color:var(--blue-3);opacity:.6}
/* mobile: keep the split subtle (logo left, hamburger right on yellow) */
@media(max-width:1024px){
  .header-diag .header-split{width:56%;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%)}
  .header-diag .nav-toggle span{background:var(--blue-3)}
}

/* ============================================================
   TOP BAR — scrolling announcement marquee
   ============================================================ */
.topbar-marquee{flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tm-track{display:flex;width:max-content;animation:tmMove 30s linear infinite}
.topbar-marquee:hover .tm-track{animation-play-state:paused}
.tm-item{white-space:nowrap;padding-right:2.8rem;position:relative;opacity:.9}
.tm-item::after{content:"◆";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  color:var(--yellow);font-size:.5rem;opacity:.9}
@keyframes tmMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:768px){ .topbar-right{display:none} }
@media (prefers-reduced-motion:reduce){ .tm-track{animation:none} }

/* ============================================================
   TOP BAR — FULL-WIDTH continuous marquee (links included)
   ============================================================ */
.topbar-marquee-full{width:100%;flex:none;padding-block:.15rem}
.topbar-marquee-full .tm-link{font-weight:600;opacity:1;transition:color .2s}
.topbar-marquee-full .tm-link:hover{color:var(--yellow)}
.topbar-marquee-full .tm-item{padding-right:2.6rem}

/* ============================================================
   "WHY TRUST US" — clean, modern (gold numbers, accent line)
   ============================================================ */
.whyx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.whyx-card{position:relative;background:#fff;border:1px solid var(--line);padding:2rem 1.8rem 1.9rem;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.whyx-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:width .55s var(--ease)}
.whyx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--blue)}
.whyx-card:hover::before{width:100%}
.whyx-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.whyx-no{font-family:var(--serif);font-weight:800;font-size:2rem;line-height:1;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.whyx-line{flex:1;height:2px;background:var(--line);transition:background .35s}
.whyx-card:hover .whyx-line{background:var(--blue)}
.whyx-card h3{font-family:var(--sans);font-weight:700;font-size:1.08rem;color:var(--blue);margin-bottom:.5rem;line-height:1.25}
.whyx-card p{font-size:.87rem;color:var(--muted);line-height:1.65}
@media(max-width:820px){ .whyx-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .whyx-grid{grid-template-columns:1fr} }

/* ============================================================
   VIDEO SECTION (homepage, below New Arrivals)
   ============================================================ */
/* full-bleed: break out of the container to the full viewport width.
   Keep an exact 16:9 frame (no max-height) so the video fills it edge to
   edge with no pillarbox / black side-bars on desktop. */
.section-video .video-frame{position:relative;width:100vw;margin-left:calc(50% - 50vw);max-width:none;
  aspect-ratio:16/9;background:#000;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.section-video .video-frame iframe,
.section-video .video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}

/* top offer strip — bold, uppercase promos */
.tm-offer{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.74rem}
.topbar-offers .tm-item::after{color:var(--yellow)}

/* ============================================================
   OFFER BANNER (below Find Your Pair)
   ============================================================ */
.offer-banner-sec{padding-block:clamp(1.4rem,3vw,2.4rem)}
.offer-banner{display:block;overflow:hidden;border:1px solid var(--line);line-height:0;
  transition:transform .4s var(--ease),box-shadow .4s}
.offer-banner img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.offer-banner:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.offer-banner:hover img{transform:scale(1.02)}

/* ============================================================
   SHOP FOR — left-aligned split header (title left, desc right)
   ============================================================ */
.shopfor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);text-align:left}
.shopfor-head-title{max-width:640px}
.shopfor-head-title .eyebrow{padding-left:0}
.shopfor-head-title .eyebrow::before{display:none}
.shopfor-head-desc{max-width:360px;color:var(--muted);font-size:.9rem;line-height:1.6;
  padding-bottom:.35rem;border-left:3px solid var(--yellow);padding-left:1rem}
@media(max-width:640px){
  .shopfor-head{flex-direction:column;align-items:flex-start;gap:.8rem}
  .shopfor-head-desc{border-left:3px solid var(--yellow);padding-left:.9rem}
}

/* ============================================================
   PHONE HEADER FIX + smaller type
   The desktop logo reserved ~320px (wedge width) which pushed the
   hamburger off-screen on phones. Reset it below 1024 and scale down.
   ============================================================ */
@media(max-width:1024px){
  .header-diag .brand{min-width:0;flex:0 1 auto}
  .header-diag .brand img{height:30px;max-width:210px}
  .header-diag .header-split{width:64%}
  .header-diag .header-inner{padding-inline:var(--pad)}
  .header-diag .nav-toggle{display:flex;position:relative;z-index:110}
  .header-diag .nav-toggle span{background:var(--blue-3)}
}
@media(max-width:560px){
  .header-diag .brand img{height:26px;max-width:175px}
  /* Archivo Expanded UPPERCASE is wide — bring the big headings down on phones */
  .split-title{font-size:clamp(1.15rem,5.4vw,1.55rem)}
  .page-hero h1{font-size:clamp(1.3rem,6.4vw,1.8rem)}
  .section-head{margin-bottom:1.5rem}
  .section-head p,.shopfor-head-desc{font-size:.82rem}
  .ticker-item{font-size:.72rem;padding:0 1rem}
  .ticker-item svg{width:20px;height:20px}
  .vp-label{font-size:.78rem}
  .whyx-card h3,.prod-card-body h3{font-size:.95rem}
  .stat-num{font-size:clamp(1.7rem,8vw,2.3rem)}
}

/* ============================================================
   VALUE PROPS — better icons + phone auto-scroll marquee
   ============================================================ */
/* icon in a soft brand circle (desktop + phone) */
.vp-ic{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--smoke);color:var(--blue);transition:transform .3s var(--ease),background .3s,color .3s}
.vp-ic svg{width:24px;height:24px;stroke-width:1.7}
.vp:hover .vp-ic{background:var(--blue);color:#fff;transform:translateY(-2px)}
.vp-label{font-weight:600}

.vp-marquee{display:none}
@media(max-width:640px){
  /* swap the static grid for an auto-scrolling marquee on phones */
  .valueprops .vp-row{display:none}
  .valueprops{padding-block:.9rem}
  .vp-marquee{display:block;overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .vp-track{display:flex;width:max-content;animation:vpScroll 18s linear infinite}
  .vp-marquee:hover .vp-track,.vp-marquee:active .vp-track{animation-play-state:paused}
  .vp-track .vp{flex:0 0 auto;justify-content:flex-start;gap:.6rem;padding:0 1.5rem}
  .vp-track .vp-ic{width:40px;height:40px}
  .vp-track .vp-ic svg{width:22px;height:22px}
  .vp-track .vp-label{font-size:.82rem;white-space:nowrap}
}
@keyframes vpScroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){ .vp-track{animation:none} }

/* ============================================================
   DESCRIPTIONS in Raleway (headings stay Poppins, UI Roboto)
   ============================================================ */
:root{ --desc:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif; }
p,
.section-head p, .shopfor-head-desc, .subheading,
.product-lead, .prod-card-body p, .lux-blurb, .hs-title + .hs-specs,
.about-text p, .mission-quote, .store-addr, .whyx-card p, .value-card p,
.why-body p, .welcome-text p, .dealer-band-inner p, .cta-inner p, .promo-text p{
  font-family:var(--desc);
}

/* ============================================================
   SHOP FOR tiles — rounded corners + shadow; smaller on phones
   ============================================================ */
.shopfor-tile{border-radius:14px;box-shadow:0 16px 34px -16px rgba(14,30,82,.6)}
.shopfor-tile img{border-radius:inherit}
.shopfor-tile::after{border-radius:inherit}
@media(max-width:560px){
  .shopfor-tile{flex:0 0 46%;aspect-ratio:4/5;border-radius:12px}
  .shopfor-cap{padding:.7rem .8rem}
  .shopfor-cap h3{font-size:.92rem}
  .shopfor-cap span{font-size:.5rem;letter-spacing:.06em;gap:.25rem;margin-top:.2rem}
  .shopfor-cap em{font-size:.8rem}
}
@media(max-width:400px){ .shopfor-tile{flex:0 0 52%} }

/* section titles in Raleway (product names / small headings stay Poppins) */
.split-title{font-family:var(--desc);font-weight:700}

/* ============================================================
   UNIFORM SECTION HEADER — eyebrow + title (left), description
   (right, yellow accent) — same hierarchy as "Shop By" everywhere.
   ============================================================ */
.section-head{display:grid;grid-template-columns:1fr auto;align-items:end;
  column-gap:clamp(1rem,3vw,2.6rem);text-align:left;max-width:none;
  margin:0 0 clamp(1.8rem,3.5vw,2.8rem)}
.section-head>.eyebrow{grid-column:1;grid-row:1;margin-bottom:.55rem;padding-left:0}
.section-head>.eyebrow::before{display:none}
.section-head>.split-title{grid-column:1;grid-row:2;margin:0}
.section-head>.split-title::after{left:0;transform:none}   /* underline left-aligned */
.section-head>p{grid-column:2;grid-row:1 / 3;align-self:end;max-width:360px;
  font-size:.9rem;line-height:1.6;border-left:3px solid var(--yellow);padding-left:1rem;padding-bottom:.3rem}
/* no text -> no stray bar */
.section-head>p:empty{display:none;border:0}
.shopfor-head-desc:empty{display:none;border:0}
@media(max-width:700px){
  .section-head{grid-template-columns:1fr;column-gap:0}
  .section-head>p{grid-column:1;grid-row:auto;max-width:none;margin-top:.8rem;
    border-left:3px solid var(--yellow);padding-left:.9rem}
}

/* ============================================================
   FIND YOUR PAIR — dot slider + softer/unclipped shadow
   ============================================================ */
/* softer shadow, and the mobile scroll track was clipping it — give it room */
.shopfor-tile{box-shadow:0 18px 42px -22px rgba(14,30,82,.5)}
@media(max-width:560px){ .shopfor-grid,.shopfor-4{padding-bottom:1.8rem} }

.shopfor-dots{display:none;justify-content:center;gap:.5rem;margin-top:1.2rem}
.shopfor-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;
  transition:width .25s var(--ease),background .25s}
.shopfor-dot.is-active{background:var(--blue);width:22px;border-radius:5px}
@media(max-width:640px){ .shopfor-dots{display:flex} }

/* SHOP BY CATEGORY — show the slider arrows on phones too */
@media(max-width:640px){
  .cat-slider-arrow{display:grid;width:36px;height:36px;font-size:1.2rem}
  .cat-prev{left:-2px}
  .cat-next{right:-2px}
}

/* Find Your Pair title — yellow underline (same as other sections), always visible */
.shopfor-head-title .split-title{position:relative;display:inline-block;padding-bottom:.5rem}
.shopfor-head-title .split-title::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;
  background:var(--gold)}

/* remove the vertical yellow bar before section descriptions (keep the text) */
.section-head>p, .shopfor-head-desc{border-left:0;padding-left:0}

/* ============================================================
   SHOP BY CATEGORY — page-style dot slider on phones
   ============================================================ */
.cat-dots{display:none;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.cat-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;
  transition:width .25s var(--ease),background .25s}
.cat-dot.is-active{background:var(--blue);width:22px;border-radius:5px}
@media(max-width:640px){
  .cat-dots{display:flex}
  .cat-slider-arrow{display:none}   /* dots replace the arrows on phone */
}

/* ============================================================
   Enquire button -> BLUE with white text (was WhatsApp green)
   ============================================================ */
.prod-ov-wa{background:var(--blue);color:#fff}
.prod-ov-wa:hover{background:var(--blue-2);color:#fff}
.pam-wa{background:var(--blue);border-color:var(--blue);color:#fff}

/* ============================================================
   NEW ARRIVALS — smaller, less-tall cards + tidy heading on phone
   ============================================================ */
@media(max-width:560px){
  .na-track .prod-card{width:clamp(128px,39vw,146px)}
  .na-track .prod-card-body{padding:.55rem .6rem .65rem;gap:.15rem}
  .na-track .prod-card-body h3{font-size:.78rem;line-height:1.2}
  .na-track .prod-cat{font-size:.58rem;letter-spacing:.08em}
  .na-track .prod-price{font-size:.9rem}
  .na-track .prod-code{font-size:.56rem}
  .na-track .prod-actions-m{margin-top:.4rem;gap:.3rem}
  .na-track .prod-actions-m a{font-size:.56rem;padding:.4rem .3rem}
  /* heading placed like desktop (left-aligned) + readable sub */
  .na-vertical{justify-content:flex-start;font-size:clamp(1.35rem,6.5vw,1.9rem)}
  .na-head{align-items:flex-start}
  .na-sub{font-size:.8rem}
}

/* Enquire (touch row) — force blue bg + WHITE text (beats .prod-actions-m a) */
.prod-actions-m a.pam-wa{background:var(--blue);border-color:var(--blue);color:#fff}
.prod-actions-m a.pam-wa svg{color:#fff;fill:currentColor}

/* New Arrivals now uses the standard section header — light text on the red bg */
.newarrivals .section-head>.eyebrow{color:rgba(255,255,255,.85)}
.newarrivals .section-head>.split-title{color:#fff}
.newarrivals .section-head>p{color:rgba(255,255,255,.85)}
.newarrivals .na-slider{margin-top:.4rem}

/* guarantee eyebrow ABOVE title everywhere (SHOP BY, then FIND YOUR PAIR) */
.shopfor-head-title{display:flex;flex-direction:column;align-items:flex-start}
.shopfor-head-title>.eyebrow{order:0;margin-bottom:.5rem}
.shopfor-head-title>.split-title{order:1}

/* remove the small icon before "Enquire" on the phone card action row */
.pam-wa svg{display:none}
.pam-wa{gap:0}

/* ============================================================
   NEW ARRIVALS on phone = same as desktop (vertical title left,
   slider right) — just scaled down. Overrides the earlier flip.
   ============================================================ */
@media(max-width:820px){
  .na-inner{grid-template-columns:auto 1fr;gap:clamp(.6rem,2.5vw,1.4rem)}
  .na-vertical{writing-mode:vertical-rl;transform:rotate(180deg);justify-content:center;
    font-size:clamp(1.25rem,6vw,2rem);gap:.4rem}
  .na-head{flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem}
}
@media(max-width:480px){
  .na-vertical{font-size:clamp(1.1rem,7vw,1.6rem)}
  .na-inner{gap:.5rem}
}

/* ============================================================
   Phone slider cards were too TALL — shorten image + trim body
   ============================================================ */
@media(max-width:560px){
  .na-track .prod-card-media,.prod-track .prod-card-media{aspect-ratio:6/5}
  .na-track .prod-code,.prod-track .prod-code{display:none}
  .na-track .prod-card-body,.prod-track .prod-card-body{padding:.5rem .6rem .6rem;gap:.1rem}
  .na-track .prod-cat,.prod-track .prod-cat{font-size:.56rem;margin-bottom:.05rem}
  .na-track .prod-card-body h3,.prod-track .prod-card-body h3{font-size:.76rem;line-height:1.15}
  .na-track .prod-card-foot,.prod-track .prod-card-foot{margin-top:.15rem}
  .na-track .prod-actions-m,.prod-track .prod-actions-m{margin-top:.35rem;gap:.25rem}
  .na-track .prod-actions-m a,.prod-track .prod-actions-m a{padding:.36rem .3rem;font-size:.55rem}
}

/* ============================================================
   Keep View/Enquire aligned across cards (push to the bottom so
   longer/shorter product names above don't shift the buttons)
   ============================================================ */
.prod-actions-m{margin-top:auto}
/* equal-height cards in the sliders so the bottoms line up */
.na-track .prod-card,.prod-track .prod-card{align-self:stretch;height:auto}
.na-track .prod-card-body,.prod-track .prod-card-body{flex:1;display:flex;flex-direction:column}

/* soft resting shadow behind the round Shop-by-Category circles */
.cat-card-img{box-shadow:0 16px 32px -14px rgba(14,30,82,.42)}
.cat-card:hover .cat-card-img{box-shadow:0 22px 40px -14px rgba(14,30,82,.55)}

/* FIX: phone slider buttons must bottom-align (earlier .35rem rule beat margin:auto) */
.na-track,.prod-track{align-items:stretch}
.na-track .prod-actions-m,.prod-track .prod-actions-m{margin-top:auto}

/* ============================================================
   STATS — all four side by side (one row) + smaller on phone
   ============================================================ */
@media(max-width:560px){
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:0}
  .stat{padding:.4rem .25rem;border-right:1px solid rgba(255,255,255,.16)}
  .stat:nth-child(2){border-right:1px solid rgba(255,255,255,.16)}
  .stat:last-child{border-right:0}
  .stat-num{font-size:clamp(1rem,5.4vw,1.5rem)}
  .stat-label{font-size:.5rem;letter-spacing:.02em;margin-top:.35rem;line-height:1.2}
}

/* video section — no bottom padding (video sits flush) */
.section-video{padding-bottom:0}

/* slightly rounded product cards */
.prod-card{border-radius:12px}
.prod-card .prod-card-media{border-top-left-radius:inherit;border-top-right-radius:inherit}

/* monsoon promo glow -> white */
.promo-glow{background:radial-gradient(circle,#ffffff,transparent 62%);opacity:.55}

/* ============================================================
   WHY HALF & HALF — auto-sliding marquee on phone
   ============================================================ */
.why-marquee{display:none}
@keyframes whyScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:560px){
  .section-why .why-grid{display:none}
  .why-marquee{display:block;overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .why-track{display:flex;width:max-content;gap:1rem;animation:whyScroll 26s linear infinite}
  .why-marquee:active .why-track{animation-play-state:paused}
  .why-track .why-card{flex:0 0 min(80vw,310px);margin:0}
}
@media (prefers-reduced-motion:reduce){ .why-track{animation:none} }

/* ============================================================
   MONSOON PROMO — white bg + subtle bottom-to-top yellow gradient
   ============================================================ */
.promo{background:linear-gradient(to top, rgba(255,210,0,.32), #ffffff 60%);color:var(--blue)}
.promo::before{display:none}                 /* drop the old dark diagonal */
.promo-text h2{color:var(--blue)}
.promo-text p{color:var(--muted)}
.promo-tag{color:var(--blue);border-color:rgba(26,58,143,.4)}
.promo .btn-light{--bg:var(--blue);--fg:#fff;--bd:var(--blue)}
.promo .btn-light:hover{--bg:var(--chrome);--fg:var(--blue-3);--bd:var(--chrome)}
/* soft yellow halo behind the product now that the bg is light */
.promo-glow{background:radial-gradient(circle, rgba(255,210,0,.5), transparent 62%);opacity:.7}
.promo-shadow{background:rgba(14,30,82,.18)}

/* Shop by Category: use page dots on ALL screens (drop the arrow buttons) */
.cat-slider-arrow{display:none}
.section-categories .cat-dots{display:flex}

/* ============================================================
   FOOTER on phone: brand full, Collections | Company side-by-side,
   Get in Touch centered at the bottom
   ============================================================ */
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem}
  .footer-brand{grid-column:1 / -1}
  .footer-col:nth-child(4){grid-column:1 / -1;text-align:center;margin-top:.4rem}
  .footer-col:nth-child(4) .footer-contact li{justify-content:center}
  .footer-col:nth-child(4) .social{justify-content:center}
}

/* ============================================================
   "Why customers & dealers trust us" — DOTTED ROUTE-MAP timeline
   numbered nodes on a dotted spine, cards alternate on desktop
   ============================================================ */
.routemap{position:relative;max-width:920px;margin:2.4rem auto 0;padding:.5rem 0}
.routemap::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;transform:translateX(-50%);
  border-left:3px dotted rgba(26,58,143,.45)}
.rm-item{position:relative;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;
  column-gap:1.6rem;margin-bottom:2.2rem}
.rm-item:last-child{margin-bottom:0}
.rm-node{grid-column:2;justify-self:center;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.05rem;
  color:#fff;background:linear-gradient(145deg,var(--blue),var(--blue-3));
  border:4px solid #fff;box-shadow:0 10px 22px -8px rgba(14,30,82,.55);position:relative;z-index:2}
.rm-content{background:#fff;border:1px solid var(--line,#e7e9f2);border-radius:14px;
  padding:1.15rem 1.35rem;box-shadow:0 14px 30px -18px rgba(14,30,82,.4);position:relative}
.rm-content h3{margin:0 0 .35rem;font-family:var(--serif);text-transform:uppercase;
  letter-spacing:.02em;font-size:1.02rem;color:var(--blue)}
.rm-content p{margin:0;font-size:.92rem;line-height:1.55;color:#4b5168}
/* little connector nub from card toward the spine */
.rm-content::after{content:"";position:absolute;top:50%;width:14px;height:14px;background:#fff;
  border:1px solid var(--line,#e7e9f2);transform:translateY(-50%) rotate(45deg)}
.rm-item:nth-child(odd) .rm-content{grid-column:1;text-align:right}
.rm-item:nth-child(odd) .rm-content::after{right:-8px;border-left:none;border-bottom:none}
.rm-item:nth-child(even) .rm-content{grid-column:3;text-align:left}
.rm-item:nth-child(even) .rm-content::after{left:-8px;border-right:none;border-top:none}
/* subtle entrance already handled by .reveal */

@media(max-width:640px){
  .routemap{max-width:460px;margin-top:1.8rem}
  .routemap::before{left:26px}
  .rm-item{grid-template-columns:52px 1fr;column-gap:1rem;margin-bottom:1.5rem;align-items:start}
  .rm-node{grid-column:1;width:52px;height:52px;font-size:.98rem;margin-top:2px}
  .rm-item:nth-child(odd) .rm-content,
  .rm-item:nth-child(even) .rm-content{grid-column:2;text-align:left}
  .rm-content::after{top:24px}
  .rm-item:nth-child(odd) .rm-content::after,
  .rm-item:nth-child(even) .rm-content::after{left:-8px;right:auto;border-right:none;border-top:none;border-left:1px solid var(--line,#e7e9f2);border-bottom:1px solid var(--line,#e7e9f2)}
}

/* ============================================================
   HERO: banners are 1440×500 — show the FULL image edge-to-edge
   (no crop), no ken-burns zoom, just a fade + dot slider
   ============================================================ */
.hero{height:auto !important;aspect-ratio:1600 / 666;max-height:none}
.hero .hero-slide{position:absolute;inset:0}
.hero .hero-slide img,
.hero .hero-slide.is-active img{width:100%;height:100%;object-fit:cover;animation:none !important}

/* Hero: dots only — hide the prev/next arrow buttons */
.hero .hero-arrow{display:none !important}

/* Footer brand block centered on phone */
@media(max-width:560px){
  .footer-brand{text-align:center}
  .footer-brand .footer-logo{display:block;margin-left:auto;margin-right:auto}
  .footer-brand p{margin-left:auto;margin-right:auto}
  .footer-brand .social{justify-content:center}
}

/* Footer "Get in Touch" — left align on phone */
@media(max-width:560px){
  .footer-col:nth-child(4){text-align:left}
  .footer-col:nth-child(4) .footer-contact li{justify-content:flex-start}
  .footer-col:nth-child(4) .social{justify-content:flex-start}
}

/* "Find Your Pair" — smaller tiles on phone */
@media(max-width:640px){
  .shopfor-tile{flex:0 0 38% !important;aspect-ratio:3/4}
  .shopfor-cap{padding:.55rem .65rem}
  .shopfor-cap h3{font-size:.8rem}
  .shopfor-cap span{font-size:.46rem;letter-spacing:.05em}
  .shopfor-cap em{font-size:.7rem}
}
@media(max-width:400px){ .shopfor-tile{flex:0 0 45% !important} }

/* ============================================================
   PROMO BANNER — full-width image area (replaces monsoon promo)
   image shows in full, no crop
   ============================================================ */
.promo-banner{margin:0;padding:0;background:var(--smoke);line-height:0}
.promo-banner a{display:block}
.promo-banner img{display:block;width:100%;height:auto}

/* ============================================================
   SECTION HEADER HIERARCHY (desktop): eyebrow -> title -> description
   stacked vertically, description sits directly under the title
   ============================================================ */
.section-head{display:block !important;grid-template-columns:none;text-align:left;max-width:760px}
.section-head>.eyebrow{display:block;margin-bottom:.55rem;padding-left:0}
.section-head>.eyebrow::before{display:none}
.section-head>.split-title{display:inline-block;margin:0}
.section-head>.split-title::after{left:0;transform:none}
.section-head>p{grid-column:auto;grid-row:auto;align-self:auto;max-width:640px;margin-top:.95rem;
  font-size:.96rem;line-height:1.65;color:var(--muted);border-left:0;padding-left:0}
.section-head .split-title-light + p{color:rgba(255,255,255,.72)}
@media(max-width:700px){ .section-head>p{margin-top:.7rem} }

/* ============================================================
   FIND YOUR PAIR header — stacked hierarchy (desktop):
   eyebrow -> title -> description below (match section-head)
   ============================================================ */
.shopfor-head{display:block !important;text-align:left}
.shopfor-head-title{display:block}
.shopfor-head-desc{max-width:640px;margin-top:.95rem;border-left:0;padding-left:0;
  font-size:.96rem;line-height:1.65;color:var(--muted)}

/* Find Your Pair — eyebrow must sit ABOVE the title (title is inline-block for its underline) */
.shopfor-head-title .eyebrow{display:block;width:100%;margin-bottom:.55rem}

/* Header CONTACT button — BLUE, opens the contact page */
.nav-contact{--bg:var(--blue);--fg:#fff;--bd:var(--blue)}
.nav-contact:hover{--bg:var(--blue-2);--fg:#fff;--bd:var(--blue-2);box-shadow:0 14px 34px -16px rgba(26,58,143,.6)}

/* MOBILE: keep section header text inside the screen (never clipped/overflowing) */
@media(max-width:640px){
  .section-head{max-width:100%}
  .section-head>p,.shopfor-head-desc{max-width:100% !important;overflow-wrap:anywhere;padding-right:0}
}

/* ============================================================
   HEADINGS in sentence/normal case (remove the ALL-CAPS transform)
   ============================================================ */
h1,h2,h3,h4,.split-title,.rm-content h3,.shopfor-head-title .split-title{text-transform:none}

/* ============================================================
   Kill phantom horizontal scroll on phone.
   body already has overflow-x:hidden, but the <html> element still
   scrolls when a full-bleed 100vw section (video) overflows. Clip it
   too. Using `clip` (not hidden) so position:sticky/header still work.
   Also hard-cap the full-bleed video so it can never exceed the viewport.
   ============================================================ */
html{overflow-x:clip}
.section-video .video-frame{max-width:100vw}

/* ============================================================
   HERO — show the FULL banner at ANY width, ZERO crop, all browsers.
   The active slide sits in normal flow so the image's own proportions
   define the hero height (no aspect-ratio box, no object-fit cover crop,
   no 100vw). Other slides overlay it and cross-fade.
   ============================================================ */
.hero{height:auto !important;aspect-ratio:auto !important;max-height:none;
  position:relative;overflow:hidden;background:var(--smoke)}
.hero .hero-track{position:relative;inset:auto;width:100%}
.hero .hero-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity 1s var(--ease)}
.hero .hero-slide.is-active{position:relative;opacity:1}
.hero .hero-slide img{width:100%;height:auto !important;display:block;object-fit:contain;animation:none !important}

/* Full-bleed video WITHOUT 100vw (iOS overflow-safe): on tablet/phone the
   container is full-width, so extend by the container padding instead. */
@media(max-width:900px){
  .section-video .video-frame{width:auto;margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);max-width:none}
}

/* Shop by Category — neutral icon tile (no product photo); images added later per category */
.cat-card-noimg{display:grid;place-items:center;background:linear-gradient(150deg,#eef2fb,#dfe7f6)}
.cat-card-noimg .cat-ic{width:46%;height:auto;color:var(--blue);opacity:.55}
.cat-card:hover .cat-card-noimg .cat-ic{opacity:.75}

/* Festive / seasonal full-width banner (backend-managed, image shows in full) */
.festive-banner{margin:0;padding:0;background:var(--smoke);line-height:0}
.festive-banner a{display:block}
.festive-banner img{display:block;width:100%;height:auto}

/* Trade Enquiry numbers on the Dealers page */
.trade-enquiry{margin-top:1.4rem}
.trade-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.trade-nums{display:flex;flex-wrap:wrap;gap:.6rem}
.trade-num{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--blue);
  border:1.5px solid var(--blue);border-radius:8px;padding:.5rem .9rem;font-size:.95rem;transition:.2s}
.trade-num:hover{background:var(--blue);color:#fff}

/* Story / welcome image — show the FULL uploaded image (no crop) */
.welcome-media img,.about-media img{aspect-ratio:auto !important;height:auto;object-fit:contain}

/* Uploaded video: show the WHOLE clip (esp. vertical/portrait phone videos) — no crop */
.section-video .video-frame{background:#000}
.section-video .video-frame video{object-fit:contain !important}