/* !important here is deliberate: the original build's now-removed Style
   Switcher persists an accent color to localStorage and reapplies it as
   an inline style on <html> on every load (see nova.js StyleSwitcher.
   init/applyAccent) — regardless of whether its own picker UI still
   exists in the page. A stale saved value (e.g. orange, from testing the
   original build before this theme removed that feature) would otherwise
   silently override every one of these colors forever. !important in a
   stylesheet beats a non-important inline style, so this wins no matter
   what's left over in a visitor's localStorage. sneakers-effects.js also
   actively clears that saved value so it can't resurface at all. */
:root{
  --pink:#B5502F !important;
  --pink-deep:#8C3B22 !important;
  --pink-light:#D97A54 !important;
  --display:'Archivo Black', Impact, sans-serif;
  --body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme="light"]{
  --pink:#B5502F !important;
  --pink-deep:#8C3B22 !important;
  --pink-light:#D97A54 !important;
}
h1,h2,h3{ letter-spacing:-.01em; }
.eyebrow{ letter-spacing:.16em; }
/* Products blend straight into the page — no card box, no border, no
   shadow. Just the photo and clean stacked text, like the surrounding
   white itself is the "card". */
.pcard{ background:none; border:none; padding:0; }
.pcard-media{ border-radius:2px; }
.cat-card{ border-radius:2px; }

/* No hero text overlay on this build's hero — the dim/darken treatment
   nova.css applies by default exists only to keep white headline text
   readable on top of the photo; with no text there, it just makes a real
   product photo look washed out for no reason. */
.hero-single .ph-img{ opacity:1; }
.hero-single::after{ content:none; }
/* Real, explicit opt-in: a merchant who fills in the Hero's optional
   heading/text via the Page Editor gets the base theme's own real
   overlay-hero treatment back (darkened photo + centered white copy) —
   the two rules above stay the shipped default (bare, uncovered photo)
   for anyone who hasn't. */
.hero-single.has-overlay .ph-img{ opacity:.6; }
.hero-single.has-overlay::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 100%);
}

/* ============ NIKE-STYLE 3-TIER HEADER (utility bar / main nav / promo strip) ============ */
.utility-bar{
  background:var(--surface); border-bottom:1px solid var(--line);
}
.utility-bar-inner{
  display:flex; justify-content:flex-end; align-items:center; gap:18px;
  padding-block:8px; font-size:12px; font-weight:600; color:var(--ink-dim);
}
.utility-bar-inner a{ color:var(--ink-dim); }
.utility-bar-inner a:hover{ color:var(--ink); }
.utility-bar-inner a + a{ position:relative; padding-left:18px; }
.utility-bar-inner a + a::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:var(--line);
}

.site-nav-nk{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:24px; }
.nk-nav-left{ display:flex; align-items:center; gap:36px; }
.nk-nav-left .logo{ font-size:22px; }
.nk-nav-right{ display:flex; align-items:center; gap:24px; }

.nk-search{
  display:flex; align-items:center; gap:10px; background:var(--bg-raise);
  border:1px solid var(--line); border-radius:999px; padding:10px 18px;
  color:var(--ink-dim); font-family:var(--body); font-size:13.5px; font-weight:600;
  cursor:pointer; min-width:180px;
}
.nk-search svg{ width:16px; height:16px; flex-shrink:0; }
.nk-search:hover{ border-color:var(--pink); color:var(--ink); }

@media (max-width:960px){
  .site-nav-nk{ gap:10px; }
  .nk-nav-left{ gap:14px; }
  .nk-nav-right{ gap:10px; }
  .icon-row{ gap:8px; }
  .nk-search span{ display:none; }
  .nk-search{ min-width:auto; padding:10px; border-radius:50%; }
  .style-switcher{ display:none; }
  .utility-bar-inner{ justify-content:center; flex-wrap:wrap; gap:10px 16px; }
}

/* ============ MEGA MENU (Women / Men / Kids / Gear / Sale) ============ */
.megamenu{ position:relative; }
.megamenu-trigger{
  display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-dim);
  font-family:inherit; padding:0; height:100%;
}
.megamenu-trigger svg{ width:11px; height:11px; transition:transform .2s ease; }
.megamenu-trigger:hover, .megamenu.is-open .megamenu-trigger{ color:var(--ink); }
.megamenu.is-open .megamenu-trigger svg{ transform:rotate(180deg); }
.megamenu-panel{
  position:fixed; left:0; right:0; top:var(--nk-nav-bottom, 108px);
  background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 20px 40px var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:80;
}
.megamenu.is-open .megamenu-panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
.megamenu-panel-inner{
  max-width:var(--maxw,1320px); margin:0 auto; padding:40px var(--gutter,24px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:32px;
}
.megamenu-col h4{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 14px;
}
.megamenu-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.megamenu-col a{ font-size:14px; color:var(--ink); }
.megamenu-col a:hover{ color:var(--pink); }
.megamenu-col a.is-strong{ font-weight:700; }

@media (max-width:960px){
  .megamenu{ display:none; }
}

/* ============ SHOP BEST SELLERS (horizontal carousel) ============ */
.bestsellers{ padding-block:56px; }
.bestsellers .section-head{ text-align:center; justify-content:center; }
.bestsellers .section-head h2{ width:100%; }
.bs-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.bs-track::-webkit-scrollbar{ display:none; }
.bs-card{
  flex:0 0 auto; width:250px; scroll-snap-align:start;
}
.bs-card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden; margin-bottom:14px;
}
.bs-card-media img{ width:100%; height:100%; object-fit:cover; }
.bs-badge{
  position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
.bs-badge svg{ width:12px; height:12px; }
.bs-card-title{ font-size:15px; font-weight:700; margin-bottom:2px; }
.bs-card-desc{ font-size:13px; color:var(--ink-dim); margin-bottom:6px; }
.bs-card-price .now{ font-weight:800; }
.bs-card-price .was{ text-decoration:line-through; color:var(--ink-dim); margin-left:6px; font-size:13.5px; }

/* ============ PROMO BANNER STRIP ============ */
.promo-banner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  background:linear-gradient(120deg, var(--pink) 0%, var(--pink-light) 100%);
  color:#fff; padding:26px var(--gutter); border-radius:4px;
}
.promo-banner-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.promo-banner-copy{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.promo-banner-copy h3{ font-size:clamp(20px,2.6vw,30px); color:#fff; }
.promo-banner-copy span{ font-size:15px; opacity:.9; }
.promo-banner-cta{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.promo-banner-cta .btn{ background:#fff; color:#0B0B0D; border-radius:999px; padding:12px 26px; font-size:12.5px; }
.promo-banner-cta small{ font-size:11px; opacity:.8; letter-spacing:.03em; }
@media (max-width:800px){
  .promo-banner{ justify-content:center; text-align:center; }
}

/* ============ CATEGORY SHOWCASE (New Arrivals / Women's / Men's / Kids') ============ */
.cat-showcase{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
}
.cat-showcase-item{ display:block; }
.cat-showcase-media{ aspect-ratio:3/4; overflow:hidden; background:var(--bg-raise); }
.cat-showcase-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-showcase-label{
  display:block; text-align:center; padding:16px 0; font-size:14px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
@media (max-width:800px){
  .cat-showcase{ grid-template-columns:repeat(2, 1fr); }
}

/* ============ SPLIT BRAND HERO (Women's / Men's) ============ */
.split-hero{
  position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:70vh;
  overflow:hidden;
}
.split-hero-media{ position:relative; }
.split-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-hero-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  text-align:center; padding:0 24px;
}
.split-hero-logo{
  font-family:var(--display); font-size:clamp(48px,9vw,120px); color:#fff; line-height:1;
  letter-spacing:.01em; text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.split-hero-tagline{
  font-size:clamp(14px,1.6vw,20px); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.split-hero-ctas{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.split-hero-ctas a{
  background:#fff; color:#0B0B0D; padding:14px 28px; font-size:12.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; border-radius:2px;
}
@media (max-width:720px){
  .split-hero{ min-height:56vh; }
}

/* ============ SHOP OUR ICONS ============ */
/* Flex + justify-content:center (not a strict grid) so the section is
   centered as a whole, including its incomplete last row — 13 real
   product photos don't divide evenly into 8 columns, so a grid would
   leave the last row stuck to the left edge. */
.icons-head{ text-align:center; justify-content:center; }
.icons-head > div{ width:100%; }
.icons-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px 16px;
}
.icons-item{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  flex:0 0 auto; width:calc((100% - 16px * 7) / 8);
}
.icons-media{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.icons-media img{ width:100%; height:100%; object-fit:contain; }
.icons-label{ font-size:13px; font-weight:700; color:var(--ink); }
@media (max-width:960px){
  .icons-item{ width:calc((100% - 16px * 3) / 4); }
}
@media (max-width:560px){
  .icons-item{ width:calc((100% - 16px * 2) / 3); }
}

/* ============ PAYDAY PICKS ============ */
.payday-heading{
  font-size:clamp(24px,2.6vw,32px); font-weight:800; display:inline-block;
  border-bottom:3px solid var(--pink); padding-bottom:8px; margin-bottom:24px;
}
.payday-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.payday-tab{
  background:var(--bg-raise); border:none; border-radius:999px; padding:11px 22px;
  font-size:14px; font-weight:700; color:var(--ink-dim); cursor:pointer;
  font-family:inherit;
}
.payday-tab.is-active{ background:var(--pink); color:#fff; }
.payday-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.payday-track::-webkit-scrollbar{ display:none; }
.payday-card{ flex:0 0 auto; width:230px; scroll-snap-align:start; }
.payday-card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}
.payday-card-media img{ width:85%; height:85%; object-fit:contain; }
.payday-tag{
  position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.payday-card-brand{ font-size:15px; font-weight:800; margin-bottom:4px; }
.payday-card-name{ font-size:13.5px; color:var(--ink-dim); margin-bottom:4px; }
.payday-card-price{ font-size:14px; font-weight:700; }

/* ============ PRE-FOOTER BAND (Rewards / Stay in Touch / Sign Up) ============ */
.prefooter{ background:var(--bg-raise); padding-block:56px; }
.prefooter-grid{ display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:40px; }
.prefooter-col h3{
  font-family:var(--body); font-size:20px; font-weight:800; color:var(--ink);
  margin-bottom:14px; text-transform:none; letter-spacing:0;
}
.prefooter-col p{ font-size:14px; color:var(--ink-dim); line-height:1.6; margin-bottom:16px; max-width:340px; }
.prefooter-join{ display:flex; align-items:center; gap:10px; }
.prefooter-join svg{ width:26px; height:26px; flex-shrink:0; color:var(--ink); }
.prefooter-join a{ font-weight:700; color:var(--ink); text-decoration:underline; }
.prefooter-join span{ font-size:12.5px; color:var(--ink-dim); font-style:italic; }
.prefooter-social{ display:flex; gap:12px; }
.prefooter-social a{
  width:42px; height:42px; border:1.5px solid var(--ink); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.prefooter-social svg{ width:20px; height:20px; }
.prefooter-btn{
  display:inline-block; background:var(--pink); color:#fff; padding:15px 28px;
  border-radius:2px; font-size:13px; font-weight:700; letter-spacing:.03em; margin-bottom:18px;
}
.prefooter-textalert{ display:flex; align-items:center; gap:10px; }
.prefooter-textalert svg{ width:22px; height:22px; color:var(--ink); }
.prefooter-textalert a{ font-weight:700; color:var(--ink); text-decoration:underline; font-size:14px; }
@media (max-width:800px){
  .prefooter-grid{ grid-template-columns:1fr; gap:32px; }
}

/* ============ LIGHT FOOTER (not dark) ============ */
.nova-footer{
  background:var(--bg) !important; border-top:1px solid var(--line) !important; color:var(--ink) !important;
}
.nova-footer .footer-brand .logo{ color:var(--ink) !important; }
.nova-footer .footer-brand p{ color:var(--ink-dim) !important; }
.nova-footer-learn{ font-weight:700; color:var(--ink) !important; text-decoration:underline; font-size:14px; }
.nova-footer .footer-col h4{ color:var(--ink) !important; }
.nova-footer .footer-col a{ color:var(--ink-dim) !important; }
.nova-footer .footer-col a:hover{ color:var(--pink) !important; }
.nova-footer .footer-bottom{ border-top:1px solid var(--line) !important; color:var(--ink-dim) !important; }
.nova-footer .payment-row span{ border-color:var(--line) !important; color:var(--ink-dim) !important; }
.nova-footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; }
@media (max-width:900px){ .nova-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .nova-footer-grid{ grid-template-columns:1fr; gap:28px; } }

/* ============ MOTION SYSTEM ============ */

/* Richer 3D scroll-reveal — overrides nova.css's flat fade/slide with a
   perspective tilt-up-into-place, same is-visible class + --i stagger
   nova.js already drives, just a stronger easing curve underneath it. */
[data-reveal]{
  opacity:0; transform:perspective(1200px) translateY(46px) rotateX(-10deg) scale(.94);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  transform-origin:center bottom;
}
[data-reveal].is-visible{ opacity:1; transform:perspective(1200px) translateY(0) rotateX(0) scale(1); }

/* Interactive 3D tilt-on-hover (driven by sneakers-effects.js, which sets
   --rx/--ry from real cursor position) for every product/category card. */
.tilt-card{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--ry,0)) rotateY(var(--rx,0)) scale3d(var(--tscale,1),var(--tscale,1),1);
  transition:transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
  will-change:transform;
}
.tilt-card:hover{ transition:transform .08s linear; z-index:2; }

/* Image zoom-in on card hover — every product/category thumbnail. */
.bs-card-media img, .payday-card-media img, .cat-showcase-media img,
.icons-media img, .pcard-media .ph-img, .shop-item-media img{
  transition:transform .7s cubic-bezier(.16,.84,.44,1);
}
.bs-card:hover .bs-card-media img,
.payday-card:hover .payday-card-media img,
.cat-showcase-item:hover .cat-showcase-media img,
.icons-item:hover .icons-media img,
.shop-item:hover .shop-item-media img{ transform:scale(1.09); }

/* Magnetic, lifted buttons + tabs everywhere. */
.btn, .icon-btn, .prefooter-btn, .payday-tab, .nk-search, .megamenu-trigger,
.cat-showcase-item, .split-hero-ctas a{
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .2s ease, color .2s ease;
}
.btn:hover, .prefooter-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(11,11,13,.2); }
.icon-btn:hover{ transform:translateY(-2px) scale(1.08); }
.payday-tab:hover:not(.is-active){ transform:translateY(-2px); }

/* Slow, cinematic hero parallax (translateY driven by scroll, set by JS). */
.hero-single{ overflow:hidden; }
.hero-single .ph-img{
  transform:translateY(var(--parallax,0px)) scale(1.12);
  will-change:transform;
}
.split-hero-media img{
  transition:transform .8s cubic-bezier(.16,.84,.44,1);
}
.split-hero-media:hover img{ transform:scale(1.05); }

@media (prefers-reduced-motion: reduce){
  .tilt-card{ transform:none !important; transition:none !important; }
  .hero-single .ph-img{ transform:none !important; }
}

/* ============ FULL MOBILE PASS ============ */
/* Prevents any fixed-width/overflow element from ever forcing a horizontal
   scrollbar on narrow screens. */
html, body{ overflow-x:hidden; max-width:100%; }

@media (max-width:720px){
  .wrap{ padding-inline:16px; }

  /* Hero: shorter on phones so the fold isn't 100% photo. */
  .hero-single{ min-height:52vh; }

  /* Best Sellers */
  .bestsellers{ padding-block:36px; }
  .bs-card{ width:168px; }
  .bs-card-title{ font-size:13.5px; }
  .bs-card-desc{ font-size:12px; }

  /* Promo banner: stack, center, full-width button */
  .promo-banner{ flex-direction:column; align-items:flex-start; text-align:left; padding:22px 18px; gap:18px; }
  .promo-banner-copy{ flex-direction:column; align-items:flex-start; gap:4px; }
  .promo-banner-cta{ width:100%; }
  .promo-banner-cta .btn{ width:100%; text-align:center; }

  /* Category showcase: 2-up, shorter tiles */
  .cat-showcase{ grid-template-columns:repeat(2, 1fr); }
  .cat-showcase-label{ font-size:12px; padding:12px 0; }

  /* Shop Our Icons already collapses via its own breakpoints; tighten gaps */
  .icons-grid{ gap:20px 10px; }
  .icons-label{ font-size:11.5px; }

  /* Payday Picks: smaller cards, wrapping tabs, tighter heading */
  .payday-heading{ font-size:22px; }
  .payday-tabs{ gap:8px; margin-bottom:20px; }
  .payday-tab{ padding:9px 16px; font-size:13px; }
  .payday-card{ width:150px; }
  .payday-card-brand{ font-size:13px; }
  .payday-card-name{ font-size:12px; }
  .payday-card-price{ font-size:13px; }

  /* Split brand hero: stack instead of a cramped 2-up on phones */
  .split-hero{ grid-template-columns:1fr; min-height:auto; }
  .split-hero-media{ aspect-ratio:4/5; }
  .split-hero-media img{ height:100%; }

  /* Pre-footer band already stacks at 800px; tighten spacing further */
  .prefooter{ padding-block:40px; }
  .prefooter-social a{ width:38px; height:38px; }

  /* Footer: full-width sign-up button, comfortable link spacing */
  .prefooter-btn{ display:block; text-align:center; width:100%; }
  .nova-footer .footer-brand p{ max-width:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  .payment-row{ flex-wrap:wrap; }

  /* Mega menu is already hidden below 960px in favor of the real mobile
     drawer — nothing more to do there. */
}

@media (max-width:420px){
  .bs-card{ width:148px; }
  .payday-card{ width:135px; }
  .icons-item{ width:calc((100% - 16px * 2) / 3); }
}

/* ============ SHOP / CATEGORY LISTING PAGE ============ */
.shop-page{ padding-block:32px 64px; }

.shop-search{
  display:flex; align-items:center; gap:10px; max-width:420px; margin-bottom:20px;
  background:var(--bg-raise); border:1px solid var(--line); border-radius:2px; padding:11px 16px;
}
.shop-search svg{ width:16px; height:16px; color:var(--ink-dim); flex-shrink:0; }
.shop-search input{
  flex:1; border:none; background:none; font-family:var(--body); font-size:14px; color:var(--ink);
}
.shop-search input:focus{ outline:none; }

.shop-breadcrumb{
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-dim); margin-bottom:18px;
}
.shop-breadcrumb a{ color:var(--ink-dim); }
.shop-breadcrumb a:hover{ color:var(--pink); }

.shop-heading-row{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:16px 24px;
  margin-bottom:18px;
}
.shop-heading-row h1{ font-size:clamp(28px,3.6vw,42px); }
.shop-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.shop-pill{
  display:inline-flex; align-items:center; background:var(--bg-raise); border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; font-size:13px; font-weight:700; color:var(--ink-dim);
}
.shop-pill:hover{ color:var(--ink); border-color:var(--pink); }

.shop-desc{
  font-size:14px; color:var(--ink-dim); line-height:1.7; max-width:880px; margin-bottom:24px;
}
.shop-readmore{ color:var(--ink); font-weight:700; text-decoration:underline; white-space:nowrap; }

.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:32px;
}
.shop-count{ font-size:13px; color:var(--ink-dim); }
.shop-toolbar-controls{ display:flex; align-items:center; gap:20px; }
.shop-control{
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:700; color:var(--ink);
}
.shop-control svg{ width:15px; height:15px; }

.shop-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px 20px;
}
.shop-item{ display:block; position:relative; }
.shop-item-media{
  position:relative; aspect-ratio:1/1; overflow:hidden; margin-bottom:14px;
}
.shop-item-media img{ width:100%; height:100%; object-fit:cover; }
.shop-item-tag{
  position:absolute; top:12px; left:12px; z-index:1; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--bg);
  padding:4px 9px; border-radius:2px;
}
.shop-item-title{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.shop-item-price .now{ font-size:14px; font-weight:700; color:var(--ink); }
.shop-item-price .was{ font-size:13px; color:var(--ink-dim); text-decoration:line-through; margin-left:8px; }

@media (max-width:960px){
  .shop-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:720px){
  .shop-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 14px; }
  .shop-heading-row{ flex-direction:column; align-items:flex-start; }
  .shop-desc{ font-size:13.5px; }
  .shop-toolbar{ gap:12px 20px; }
}

/* ============ AUTH PAGES (Sign In / Create Account) ============ */
/* A real split layout — full-height photo panel + form panel — instead of
   a bare centered form on empty white. Matches the visual weight of the
   rest of the theme (hero-split already uses this same 2-panel language)
   so sign-in/register don't feel like an afterthought bolted on. */
.ns-auth{
  display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 260px);
}
.ns-auth-media{ position:relative; overflow:hidden; background:var(--bg-raise); }
.ns-auth-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ns-auth-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,13,.05) 0%, rgba(11,11,13,.55) 100%);
}
.ns-auth-media-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:48px;
  color:#fff;
}
.ns-auth-media-copy .logo{ font-size:26px; color:#fff; margin-bottom:18px; display:inline-block; }
.ns-auth-media-copy .logo span{ color:#fff; -webkit-text-stroke:1px #fff; }
.ns-auth-media-copy h2{
  font-size:clamp(24px,2.6vw,32px); color:#fff; margin-bottom:10px; line-height:1.2;
}
.ns-auth-media-copy p{ font-size:14px; color:rgba(255,255,255,.85); max-width:360px; line-height:1.6; }

.ns-auth-form-side{
  display:flex; align-items:center; justify-content:center; padding:56px var(--gutter);
}
.ns-auth-form-inner{ width:100%; max-width:400px; }
.ns-auth-form-inner > div:first-child{ margin-bottom:28px; }
.ns-auth-form-inner h1{ font-size:clamp(28px,3vw,36px); margin-bottom:8px; }

.ns-auth-perks{
  display:flex; flex-direction:column; gap:12px; margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line);
}
.ns-auth-perk{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-dim); }
.ns-auth-perk svg{ width:17px; height:17px; color:var(--pink); flex-shrink:0; }

@media (max-width:900px){
  .ns-auth{ grid-template-columns:1fr; min-height:auto; }
  .ns-auth-media{ min-height:260px; }
  .ns-auth-media-copy{ padding:28px; }
  .ns-auth-form-side{ padding:40px 20px; }
}

/* ============ PLATFORM PORT: ENHANCED MOBILE MENU ============ */
/* Added for the biply.ng port only — the original static build's mobile
   menu was a plain text link list. The real platform has a live global
   SearchModal and live per-tenant categories to surface here instead, so
   the mobile menu gets a real search entry point, real account/wishlist/
   cart quick-links, and real category tiles. Own rules, own tokens
   (--pink/--ink/--bg-raise/--line already defined above) — not copied from
   any other theme's CSS file. */
[data-mobile-menu] .mm-search{
  display:flex; align-items:center; gap:10px; margin:16px 20px 0; padding:13px 16px;
  background:var(--bg-raise); border:1px solid var(--line); border-radius:999px;
  color:var(--ink-dim); font-family:var(--body); font-size:14px; font-weight:600;
  cursor:pointer; width:calc(100% - 40px); text-align:left;
}
[data-mobile-menu] .mm-search svg{ flex-shrink:0; }

[data-mobile-menu] .mm-quick-row{
  display:flex; padding:18px 12px; margin:16px 8px 4px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
[data-mobile-menu] .mm-quick-item{
  flex:1; display:flex !important; flex-direction:column; align-items:center; gap:6px;
  padding:6px 4px !important; font-size:11px !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:0 !important; color:var(--ink);
  background:none; border:none; font-family:var(--body); cursor:pointer;
}
[data-mobile-menu] .mm-quick-item:hover{ background:var(--bg-raise) !important; color:var(--ink) !important; }
[data-mobile-menu] .mm-quick-icon{ position:relative; display:inline-flex; }
[data-mobile-menu] .mm-quick-badge{
  position:absolute; top:-6px; right:-8px; min-width:15px; height:15px; padding:0 3px;
  background:var(--pink); color:#fff; border-radius:999px;
  font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

[data-mobile-menu] .mm-cat-list{ padding:6px 8px 20px; }
[data-mobile-menu] .mm-cat-item{
  display:flex !important; align-items:center; gap:12px; padding:9px 10px !important;
  text-transform:none !important; font-weight:600 !important; font-size:14.5px !important;
  letter-spacing:0 !important;
}
[data-mobile-menu] .mm-cat-thumb{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--bg-raise); border:1px solid var(--line);
}
[data-mobile-menu] .mm-cat-thumb img{ width:100%; height:100%; object-fit:cover; }
[data-mobile-menu] .mm-cat-name{ flex:1; }
[data-mobile-menu] .mm-cat-arrow{ flex-shrink:0; opacity:.4; }
[data-mobile-menu] .mm-cat-item:hover .mm-cat-arrow{ opacity:.9; }

/* ns-cart-toast — Nova Sole's own mobile "added to cart" tracker bar (see
   ToolbarNovaSole.jsx). Always light (uses the same --surface/--ink/--line/
   --pink tokens as the rest of this theme, which are forced to their
   data-theme="light" values on every Nova Sole page — never the dark
   defaults). Mobile only: hidden outright above the tablet breakpoint. */
.ns-cart-toast{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:190;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:var(--surface); color:var(--ink);
  box-shadow:0 12px 32px var(--shadow);
  transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .38s var(--ease-premium), opacity .38s var(--ease-premium);
}
.ns-cart-toast.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.ns-cart-toast-media{
  flex-shrink:0; width:52px; height:52px; border-radius:var(--radius-md); overflow:hidden;
  background:var(--bg-raise);
}
.ns-cart-toast-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ns-cart-toast-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ns-cart-toast-label{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pink);
}
.ns-cart-toast-title{
  font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ns-cart-toast-btn{
  flex-shrink:0; padding:9px 16px; border-radius:var(--radius-sm);
  background:var(--pink); color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
}
.ns-cart-toast-close{
  position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
@media (min-width:768px){ .ns-cart-toast{ display:none !important; } }

/* ns-pay-* — real payment-method tabs for CheckoutNovaSole.jsx. New here
   (the original static checkout was a fake card-number form, so nothing
   to convert), reusing existing tokens only — never another theme's
   classes. */
.ns-pay-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ns-pay-tab{
  padding:11px 18px; border-radius:var(--radius-md); border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink-dim); font-size:13px; font-weight:600; cursor:pointer;
}
.ns-pay-tab.is-active{ border-color:var(--pink); color:var(--ink); background:var(--bg-raise); }
.ns-pay-redirect-note{
  display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--bg-raise); color:var(--ink-dim); font-size:13px; line-height:1.5;
}
.ns-pay-redirect-note svg{ flex-shrink:0; width:18px; height:18px; color:var(--pink); margin-top:1px; }
.ns-checkout-error{
  padding:12px 14px; border-radius:var(--radius-md); background:rgba(192,57,43,.1); color:#c0392b; font-size:13px;
}