/* ============ Base / Theme ============ */
:root{
  --bg:#ffffff; --bg-2:#ffffff; --text:#0b1220; --muted:#667085; --line:#e9edf3;
  --accent1:#2563eb; --accent2:#9333ea; --accent3:#16a34a;
  --radius:16px; --shadow:0 12px 32px rgba(2,6,23,.06); --container:1100px;
  --topbar-h:40px; --chrome-h:calc(var(--topbar-h) + 64px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;  font-family: "Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(147,51,234,.08), transparent 60%),
    #fff;
  line-height:1.6;
  padding-top:var(--chrome-h);
}
.container{max-width:var(--container); margin-inline:auto; padding:24px}
.muted{color:var(--muted)}
.grad{background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
a,button{cursor:pointer}

/* ============ Chrome (Topbar + Nav) ============ */
.chrome{position:fixed; top:0; left:0; right:0; z-index:100; transform:translateY(0); transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.chrome.is-hidden{transform:translateY(calc(-1*var(--chrome-h)))}
.topbar{background:#1C1C1C; color:#fff; border-bottom:1px solid #e5e7eb}
.topbar__inner{display:flex; align-items:center; justify-content:center; height:var(--topbar-h); padding:0 24px; font-weight:700; font-size:14px; letter-spacing:.2px}
.nav{border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(6px); background:rgba(255,255,255,.75)}
.nav__row{
  display: flex;
  align-items: center;
  justify-content: space-between; /* space between left/center/right */
  gap: 16px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800}
.brand__logo{width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; font-family:Orbitron, Inter, sans-serif; font-weight:700; box-shadow:0 8px 24px rgba(37,99,235,.25), 0 12px 28px rgba(147,51,234,.18)}
.brand--sm .brand__logo{width:28px; height:28px; font-size:14px}
.brand__text{font-weight:700; font-size:20px; letter-spacing:.2px}
.nav__links{display:flex; gap:16px; align-items:center; font-weight: 700;}
.nav__links a{color:var(--text); text-decoration:none; opacity:.85}

/* ============ Buttons (used in hero/about) ============ */
.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; letter-spacing:.2px; border:1px solid var(--line); transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; border:0}
.btn--ghost{color:var(--text); background:rgba(2,6,23,.03); border:1px solid var(--line)}
.chip{display:inline-block; padding:6px 10px; font-size:12px; color:#6b7280; border:1px solid var(--line); border-radius:999px; background:#ffffff80}

/* ============ Hero ============ */
.hero{
  position: relative;
  min-height: 74vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;

  background: #000;       /* solid black background */
  border-bottom: 1px solid var(--line);
}
.hero__content{
  position:relative;
  z-index:1;   /* keep text above canvas */
  padding-top:60px;
  padding-bottom:40px;
}
.hero h1{font-size:clamp(36px,7vw,72px); line-height:1.05; margin:20px 0 12px}
.hero__sub{max-width:780px; margin:0 auto 22px; color:var(--muted)}
.hero__cta{display:flex; gap:12px; justify-content:center}
.hero__badges{margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.hero__scroll{position:absolute; bottom:16px; left:50%; translate:-50% 0; color:#98a2b3; opacity:.9}
.hero__fx{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  filter: blur(28px);
  opacity:.9;
}
.hero__fx canvas{width:100%; height:100%; display:block}
@media (prefers-reduced-motion:reduce){.hero__fx{filter:blur(22px); opacity:.6}}

/* ============ Sections ============ */
.section{padding:64px 0}
.section--alt{background:linear-gradient(180deg, rgba(2,6,23,.035), rgba(2,6,23,0)); border-top:1px solid var(--line)}
.section__head{margin-bottom:18px}

/* ============ Grid ============ */
.grid{--cols:4; display:grid; gap:24px; grid-template-columns:repeat(var(--cols), minmax(0,1fr))}
@media (max-width:1000px){.grid{--cols:3}}
@media (max-width:720px){.grid{--cols:2}}
@media (max-width:480px){.grid{--cols:1}}

/* ============ Minimal Product (image → title → price) ============ */
.product{display:block; text-decoration:none; color:inherit}
.product__image{aspect-ratio:1/1}        /* if your photos are square; remove if not */
.product__image img{width:100%; height:100%; object-fit:cover; display:block}
.product__title{
  margin:10px 0 6px;
  font-weight:400;   /* normal weight */
  color:#000;
}

.product__price{
  font-weight:700;   /* keep bold */
  color:#000;
}


/* ============ About / Footer / Reveal ============ */
.about{display:grid; gap:22px; grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about__card{border:1px solid var(--line); border-radius:16px; padding:20px; background:#fff; box-shadow:0 8px 24px rgba(2,6,23,.04)}
.footer{border-top:1px solid var(--line); padding:28px 0; background:#fff}
.footer__row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer__links{display:grid; gap:8px}
.footer__links a{color:var(--muted); text-decoration:none}
.footer__brand p{margin:.4rem 0 0}
.reveal{opacity:0; transform:translateY(12px); transition:all .6s cubic-bezier(.2,.65,.2,1)}
.reveal.is-visible{opacity:1; transform:none}




/* === Latest Drops: flat white + no extra gap under hero === */
#drops{
  background: #fff;       /* solid white band */
  padding-top: 16px;      /* was 64px from .section — tighten it */
  padding-bottom: 64px;   /* keep bottom spacing as before */
}

/* Remove any default top margin browsers add to H2 */
#drops .section__head h2{
  margin-top: 0;
}

/* Optional: if you still see a line or gap and want it flush, uncomment: */
/* .hero{ border-bottom: none; } */
/* === Make "Latest Drops" use more horizontal space === */

/* 1) Widen the container just for the Drops section on large screens */
@media (min-width: 1200px){
  #drops .container{
    max-width: 1600px;         /* was 1100px — tweak to 1500/1600px if you want even wider */
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 2) Keep 4 items per row and tighten the gaps so the grid feels fuller */
#drops .grid{
  --cols: 4;                   /* force 4 columns on desktop */
  gap: 18px;                   /* slightly smaller gaps so tiles are larger */
}

/* 3) Still collapse nicely on smaller screens */
@media (max-width: 1000px){ #drops .grid{ --cols:3; } }
@media (max-width: 720px){  #drops .grid{ --cols:2; } }
@media (max-width: 480px){  #drops .grid{ --cols:1; } }




.product__image{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0; left: 0;
  transition: opacity .4s ease;
}

.product__image .img--primary{ opacity: 1; z-index: 1; }
.product__image .img--hover{ opacity: 0; z-index: 2; }

.product__image:hover .img--primary{ opacity: 0; }
.product__image:hover .img--hover{ opacity: 1; }



/* === Hero dark text colors === */
.hero h1 {
  color: #ffffff; /* main heading white */
}

.hero .grad {
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  color: #ffffff; /* light gray for subtitle */
}

.hero__cta .btn--ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}

.hero__badges .chip {
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}
/* === Hero search bar === */
.hero-search{
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-search input[type="search"]{
  width: min(56vw, 360px);
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: #ffffff;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-search input::placeholder{ color: rgba(255, 255, 255, 0.7); }

.hero-search input:focus{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(147,51,234,.18); /* subtle focus ring */
}

.hero-search__btn{
  width: 44px;                  /* slightly bigger so icon fits */
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;      /* no background */
  color: #fff;                  /* force icon white */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;                   /* no clipping from padding */
  line-height: 0;               /* avoid extra spacing */
  transition: transform .2s ease, opacity .2s ease;
}

.hero-search__btn svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0;               /* don’t scale down */
}

.hero-search__btn:hover{
  transform: scale(1.1);
  opacity: 0.8;
}

/* Make form stack nicely on narrow screens */
@media (max-width: 560px){
  .hero-search{ flex-direction: column; width: 100%; }
  .hero-search input[type="search"]{ width: 100%; }
  .hero-search__btn{ width: 100%; }
}



/* Polygon grid overlay on dark hero */
.hero__grid{
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sits above the neon canvas but below text */
  pointer-events: none;
  color: var(--line);         /* use site line color */
  opacity: .14;               /* subtle! adjust 0.08–0.2 to taste */
  mix-blend-mode: normal;     /* you can try 'screen' or 'overlay' if you like */
}

.hero__grid svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* On small screens, make it even softer */
@media (max-width: 600px){
  .hero__grid{ opacity: .10; }
}



/* Unify CTA button height with search bar */
.hero__cta .btn{
  padding: 12px 18px;            /* match input padding */
  height: 40px;                  /* same as input + button */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
}




/* ===== Fixed Header Layout (flex) ===== */
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Left (brand) stays as is */
.nav__left {
  display: flex;
  align-items: center;
}

/* Center (nav links) */
.nav__center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.nav__center a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.9;
}
.nav__center a:hover {
  opacity: 1;
}

/* Right (icons) */
.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text);
}
.nav__icon svg {
  width: 22px;
  height: 22px;
}





/* Show more footer under product grid */
.section__footer{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

/* Rounded button with black stroke */
.btn-showmore{
  appearance:none;
  -webkit-appearance:none;
  border:1.5px solid #000;      /* black stroke */
  background:#fff;               /* white fill */
  color:#000;                    /* black text */
  border-radius:999px;           /* fully rounded */
  padding:10px 18px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}

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

.btn-showmore:active{
  transform:translateY(0);
  opacity:.9;
}

/* Focus ring for accessibility */
.btn-showmore:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.12);
}

/* When there’s nothing more to show, hide it */
.btn-showmore.is-hidden{
  display:none;
}



/* === Hero background image (WebP) === */


/* (optional) make the overlay a bit stronger on small screens */




/* White pill background behind the word "Touge" in the hero */
/* White rounded badge behind the word */
.hero-pill{
  display: inline-block;
  background: #fff;
  color: #0b1220;          /* dark text so it’s readable on white */
  border-radius: .25em;    /* was invalid before; this is correct */
  padding: .05em .3em;
  line-height: 1;
}


/* Ensure the gradient text renders cleanly inside the pill */
.hero-pill .grad{
  display:inline-block;      /* helps background-clip:text behave consistently */
}
/* Knockout text: letters are transparent so the hero bg shows through */
/* Knockout text: see-through letters + a thin outline for readability */
.hero-cutout{
  color: transparent !important;
  -webkit-text-fill-color: transparent;   /* Safari/WebKit */
  -webkit-text-stroke: 1.5px #fff;        /* white outline */
  text-stroke: 1.5px #fff;                /* non-standard, ignored by many */
  display: inline-block;
}
/* === Hero "Shop Latest" button: yellow gradient === */
/* Replace your existing rule with this */
.hero__cta .btn--primary{
  background: transparent;      /* kill the gradient */
  background-image: none;
  color: #fff;                  /* white text */
     /* white border */
}

/* (optional) nicer interactions */
.hero__cta .btn--primary:hover{
  background: rgba(255,255,255,.08);
}

.hero__cta .btn--primary:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* === Hero search: yellow focus ring === */
.hero-search input[type="search"]:focus,
.hero-search input[type="search"]:focus-visible{
  border-color: rgba(255, 255, 255, 0.55);            /* amber border */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);    /* yellow glow */
  outline: none;
}

/* (optional) match the caret color to the theme */
.hero-search input[type="search"]{
  caret-color: #f59e0b;
}




/* === Product hover: slide-in "Add to cart" pill === */
.product__image {
  position: relative; /* already set above, but safe */
  overflow: hidden;   /* keeps the pill clipped while sliding in */
}

.product__image::after{
  content: "Add to cart";            /* change text if you want */
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111827;               /* dark pill */
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;

  transform: translateX(-120%);      /* start off-screen to the left */
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}

.product:hover .product__image::after,
.product:focus-visible .product__image::after{
  transform: translateX(0);          /* slide in */
  opacity: 1;
}

/* Touch devices: show pill without requiring hover */
@media (hover: none){
  .product__image::after{
    transform: translateX(0);
    opacity: 1;
  }
}


/* === Product hover: slide-in "Add to cart" pill (no flicker) === */
.product__image {
  position: relative;
  overflow: hidden;
}

.product__image::after{
  content: "Add to cart";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;

  z-index: 5;                 /* above both images */
  pointer-events: none;       /* don't steal hover from parent */
  transform: translateX(-140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}

.product:hover .product__image::after,
.product:focus-visible .product__image::after{
  transform: translateX(0);
  opacity: 1;                 /* stays visible while hovering anywhere on card */
}

/* Touch devices: show pill without hover */
@media (hover: none){
  .product__image::after{
    transform: translateX(0);
    opacity: 1;
  }
}



/* === Product hover pill: slide in from RIGHT === */
.product__image::after{
  right: 12px;              /* come in from the right */
  left: auto;               /* override previous left */
  transform: translateX(140%);  /* start off-canvas to the right */
}

.product:hover .product__image::after,
.product:focus-visible .product__image::after{
  transform: translateX(0);     /* slide into place */
}

.topbar__inner,
.topbar-rotator{
  font-family: "Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: none;    /* set to uppercase if you want that vibe */
  font-feature-settings: "calt" 1, "liga" 1, "ss01" 1; /* subtle modern feel */
}





/* Brand layout + logo sizing */
.nav .brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { display: block; height: 24px; width: auto; } /* mobile */

@media (min-width: 960px) {
  .brand__mark { height:38px; } /* desktop */
}

/* If you had any old box styles: neutralize */
.brand__logo { padding: 0; border: 0; background: none; }
/* Remove the polygon grid overlay in the hero */
.hero__grid { 
  display: none !important; 
}




/* Quick-add label switching (desktop default) */
.add-to-cart .add-label{ display:inline; }
.add-to-cart .add-plus{ display:none; }






/* Desktop & larger (≥481px): show text label, hide the + */
.add-to-cart .add-label { display: inline-block; }
.add-to-cart .add-plus  { display: none; }

/* Safety reset in case mobile rules leaked */
@media (min-width: 481px){
  .add-to-cart{
    width: auto; height: auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    border: 0;
    font-size: 14px;
    line-height: 1;
  }
}





/* Latest Drops: use Archivo for product name + price only */
#drops .product__title,
#drops .product__price{
  font-family: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#drops .product__title{ font-weight: 400; }
#drops .product__price{ font-weight: 800; letter-spacing: .1px; }



@media (max-width: 480px){
  /* Stack layout on phones */
  #category-view .cat-layout{ display:block; }

  /* Stick only within the category section */
  #category-view .cat-aside{
    position: sticky;                 /* ← was fixed */
    top: var(--chrome-h);             /* sits under your header/nav */
    z-index: 3;
    background: #fff;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;              /* space before the list */
  }

  /* No extra spacer padding needed anymore */
  #category-view .container{
    padding-top: 0 !important;
  }

  /* Keep the small header inside the filter visible while its panel scrolls */
  #category-view .cat-aside__head{
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
  }

  /* Long lists scroll inside the filter bar */
  #category-view .cat-aside__panel{
    max-height: calc(100vh - var(--chrome-h) - 48px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}





/* Dark overlay on top of video (moved from background gradient) */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
  z-index: 2;
  pointer-events: none;
}

/* Full-bleed video behaves like background-cover */
.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;            /* behind everything */
  pointer-events: none;  /* clicks go to content */
  display: block;
}

/* Ensure your grid overlay sits above the video but below the gradient */
.hero__grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Make sure hero content is above overlay */
.hero .hero__content,
.hero .hero__cta,
.hero .hero__badges,
.hero .hero__scroll{
  position: relative;
  z-index: 3;
  color: #fff;
}

/* Reduced motion: hide video, show fallback image */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ display: none; }
}





/* ——— Force clean white background site-wide ——— */
body{
  background: #fff !important;          /* no gradients */
}

/* If any section has a tint/gradient, flatten it too */
.section--alt{
  background: #fff !important;
}

/* If you also want the hero itself white (remove dark overlay/video tint) */
.hero{
  background: #fff !important;
}
.hero::after{
  background: none !important;           /* removes the dark overlay */
}









/* Make #drops stop below the header when scrolled into view */
#drops{ scroll-margin-top: calc(var(--chrome-h, 56px) + 8px); }
/* ===== Home: full-bleed hero under fixed header ===== */
.is-home body{
  padding-top: 0 !important;           /* remove the global header spacer */
}

/* Make hero fill the viewport */
.is-home .hero{
  min-height: 100svh;                   /* mobile-aware viewport */
}
@supports not (height: 100svh){
  .is-home .hero{ min-height: 100vh; }  /* fallback */
}

/* Ensure hero content starts below the fixed header */
.is-home .hero__content{
  /* keep your existing 60px, but if header is taller, respect it */
  padding-top: calc(max(60px, var(--chrome-h) + 8px));
}

/* Keep the header truly overlaying and seam-free on home */
.is-home .nav{
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
}
.is-home .topbar{
  background: transparent !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
}

/* Make all header content white on hero */
.is-home .brand,
.is-home .brand__text,
.is-home .nav__links a,
.is-home .nav__icon{
  color:#fff !important;
  opacity:1 !important;
}



/* Anchor jumps (e.g., clicking “LATEST DROPS”) stop below header */
.is-home #drops{ 
  scroll-margin-top: calc(var(--chrome-h, 56px) + 8px);
}







/* Accessible focus state without a white square */
.is-home .nav__links a:focus-visible{
  outline: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}






/* Also ensure brand link has no box */
.is-home .brand{
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}



/* Accessible focus (no white box) */
.is-home .nav__links a:not(.cta):focus,
.is-home .nav__links a:not(.cta):focus-visible,
.is-home .brand:focus,
.is-home .brand:focus-visible{
  outline: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Home only: remove the topbar + rotator */
html.is-home { 
  --topbar-h: 0px !important;              /* keep layout math happy */
}
html.is-home .topbar,
html.is-home .topbar-rotator,
html.is-home .topbar__inner{
  display: none !important;                 /* no bar, no label */
}
/* === FINAL: unify header link look & typography (incl. SHOP) === */
.nav__links a,
.nav__center a {
  font-family: inherit !important;   /* Manrope from <body> */
  font-weight: 500 !important;       /* same for all links */
  letter-spacing: .02em !important;
  text-transform: none !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* Kill any leftover “pill” styles specifically on SHOP */
.nav__links a.cta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* Home (transparent header): keep links plain white text, no boxes */
.is-home .nav__links a,
.is-home .nav__center a {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Desktop header links: no box/outline */
@media (min-width:481px){
  .nav__links a,
  .nav__center a{
    outline: 0 !important;
    box-shadow: none !important;
  }
}