/** Shopify CDN: Minification failed

Line 1171:0 Unexpected "{"
Line 1171:1 Expected identifier but found "%"

**/


/* =========================================
   HEADER: centered logo + tight edges
   white on hero + glass pills on scroll
   ========================================= */

/* Keep logo truly centered by making columns symmetrical */
header[data-aid="header-section"]{
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas: "nav logo cta" !important;
}

/* Tighter to edges */
header[data-aid="header-section"]{
  padding: 6px 12px !important;
}
@media (min-width: 1024px){
  header[data-aid="header-section"]{
    padding: 8px 18px !important;
  }
}

/* Make sure each zone behaves */
header[data-aid="header-section"] [data-armada-selector="main-navigation"]{
  justify-self: start;
}
header[data-aid="header-section"] .header-logo{
  justify-self: center !important;
}
header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
  justify-self: end;
  gap: 12px;
}

/* Prevent menu wrapping */
header[data-aid="header-section"] ul[data-aid="navigation-items"]{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  gap: 18px !important;
}
header[data-aid="header-section"] li[data-aid="navigation-list-item"]{
  margin-right: 0 !important;
}

/* HERO/TOP: white text/icons */
header[data-aid="header-section"].transparent-header{
  background: transparent !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
}


/* Scrolled: keep header background transparent (no big bar) */
header[data-aid="header-section"]:not(.transparent-header){
  background: transparent !important;
}

/* Kill the big white nav rectangle */
@media (min-width: 1024px) {
  header[data-aid="header-section"] [data-armada-selector="main-navigation"],
  header[data-aid="header-section"] [data-aid="navigation-items"]{
    background: transparent !important;
  }
}

/* Glass pill behind nav + right controls (only after scroll) */
@media (min-width: 1024px){
  header[data-aid="header-section"]:not(.transparent-header)
  [data-armada-selector="main-navigation"]::before,
  header[data-aid="header-section"]:not(.transparent-header)
  [data-armada-selector="header-cta-container"]::before{
    content:"";
    position:absolute;
    left:-10px; right:-10px;
    top:50%;
    transform: translateY(-50%);
    height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05); /* almost nothing */
backdrop-filter: invert(1) blur(10px) contrast(1.1);
-webkit-backdrop-filter: invert(1) blur(10px) contrast(1.1);
border: 1px solid rgba(255,255,255,0.25);
    z-index: -1;
  }

  header[data-aid="header-section"] [data-armada-selector="main-navigation"],
  header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
    position: relative;
    z-index: 1;
  }
}

/* Match locale typography to menu */
header[data-aid="header-section"] nav-link h5,
header[data-aid="header-section"] [data-aid="country-selector-button"]{
  font-family: var(--font-heading-family, inherit) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

/* =========================================
   KEEP HEADER VISIBLE (disable hide-on-scroll)
   ========================================= */

header[data-aid="header-section"]{
  transform: none !important;
  translate: none !important;
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Catch common “header hides” classes used by themes */
header[data-aid="header-section"].header--hidden,
header[data-aid="header-section"].is-hidden,
header[data-aid="header-section"].hide,
header[data-aid="header-section"].hidden,
header[data-aid="header-section"][aria-hidden="true"]{
  transform: none !important;
  translate: none !important;
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If theme animates it out with negative margin */
header[data-aid="header-section"]{
  margin-top: 0 !important;
}

/* =========================================
   STICKY HEADER (announcement bar scrolls away)
   ========================================= */

/* keep header pinned */
header[data-aid="header-section"]{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 999 !important;

  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;

  background: transparent !important;
}

/* kill any “hide on scroll down” behavior */
header[data-aid="header-section"].header--hidden,
header[data-aid="header-section"].is-hidden,
header[data-aid="header-section"].hide,
header[data-aid="header-section"].hidden,
header[data-aid="header-section"][aria-hidden="true"]{
  transform: none !important;
  translate: none !important;
  top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* (optional) prevent content from jumping under the fixed header */
body{
  padding-top: 84px; /* adjust up/down until it feels perfect */
}
@media (min-width: 1024px){
  body{ padding-top: 96px; }
}

/* =========================================
   FIX: give content breathing room under
   fixed transparent header (on load)
   ========================================= */

/* Push the FIRST section down so it never
   sits behind the fixed header */
main > section:first-child,
main > div:first-child {
  margin-top: 96px;
}

/* Desktop refinement */
@media (min-width: 1024px) {
  main > section:first-child,
  main > div:first-child {
    margin-top: 112px;
  }
}
/* =========================================
   FORCE READABLE TEXT ON INVERTED GLASS
   ========================================= */


/* ===== PATCH: center logo + keep right side white + fix pills ===== */

/* remove stray invalid lines (don’t paste them) */

/* ensure logo stays centered */
header[data-aid="header-section"]{
  grid-template-columns: 1fr auto 1fr !important;
}
header[data-aid="header-section"] .header-logo{
  grid-area: logo !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* anchor pills */
header[data-aid="header-section"] [data-armada-selector="main-navigation"],
header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
  position: relative !important;
}

/* scrolled state: force ALL header content to white */
header[data-aid="header-section"]:not(.transparent-header),
header[data-aid="header-section"]:not(.transparent-header) a,
header[data-aid="header-section"]:not(.transparent-header) h5,
header[data-aid="header-section"]:not(.transparent-header) span,
header[data-aid="header-section"]:not(.transparent-header) svg{
  color: #fff !important;
  fill: currentColor !important;
}

/* IMPORTANT: choose ONE offset method.
   If you keep body padding-top, delete your main > first-child margin rules. */

   /* ===== FIX: put NAV bubble left, LOGO centered, CTA bubble right ===== */
@media (min-width: 1024px){
  header[data-aid="header-section"]{
    display: grid !important;
    grid-template-areas: "nav logo cta" !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items: center !important;
  }

  /* hard-assign each zone */
  header[data-aid="header-section"] [data-armada-selector="main-navigation"]{
    grid-area: nav !important;
    justify-self: start !important;
  }

  header[data-aid="header-section"] .header-logo{
    grid-area: logo !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
    grid-area: cta !important;
    justify-self: end !important;
  }
}

/* ===== LOGO centered BETWEEN the two bubbles (responsive) ===== */
@media (min-width: 1024px){
  header[data-aid="header-section"]{
    display: grid !important;
    grid-template-areas: "nav logo cta" !important;
    grid-template-columns: auto minmax(0,1fr) auto !important; /* key */
    align-items: center !important;
  }

  header[data-aid="header-section"] [data-armada-selector="main-navigation"]{
    grid-area: nav !important;
    justify-self: start !important;
  }

  header[data-aid="header-section"] .header-logo{
    grid-area: logo !important;
    justify-self: center !important;   /* centers inside the middle space */
    margin: 0 auto !important;
  }

  header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
    grid-area: cta !important;
    justify-self: end !important;
  }
}
/* =========================================
   DESKTOP HEADER TEXT COLOR: ALWAYS BLACK
   ========================================= */
@media (min-width: 1024px) {

  header[data-aid="header-section"] nav-link h5,
  header[data-aid="header-section"] a,
  header[data-aid="header-section"] 
  [data-aid="country-selector-button"],
  header[data-aid="header-section"] 
  [data-aid="country-selector-button"] span,
  header[data-aid="header-section"] svg {
    color: #000 !important;
    fill: currentColor !important;
  }

}

/* =========================================
   DESKTOP: FORCE HEADER TEXT BLACK (FINAL)
   ========================================= */
@media (min-width: 1024px) {

  header[data-aid="header-section"] nav-link h5,
  header[data-aid="header-section"] a,
  header[data-aid="header-section"] span,
  header[data-aid="header-section"] 
  [data-aid="country-selector-button"],
  header[data-aid="header-section"] 
  [data-aid="country-selector-button"] span,
  header[data-aid="header-section"] svg {
    color: #000 !important;
    fill: currentColor !important;
  }

}
/* =========================================
   PRODUCT PAGES: make product media flush
   to the fixed header (remove extra gaps)
   ========================================= */

/* 1) remove the extra "push down" rules ONLY on product pages */
body.template-product main > section:first-child,
body.template-product main > div:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) set a tighter top offset for product pages (tweak if needed) */
body.template-product{
  padding-top: 64px !important;  /* mobile */
}
@media (min-width: 1024px){
  body.template-product{
    padding-top: 130px !important; /* desktop */
  }
}


.buybox-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin: 0 0 12px 0; /* space before button */
  font-weight: 700;
}

.buybox-price__current{
  font-size: 1.15rem;
  line-height: 1;
}

.buybox-price__compare{
  font-size: .95rem;
  line-height: 1;
  text-decoration: line-through;
  opacity: .65;
}

/* Hide duplicate ATC if two render */
[data-name="payment-buttons"] [data-name="product-submit-wrapper"]:nth-of-type(2),
[data-name="payment-buttons"] button[data-aid="product-form-submit-button"]:nth-of-type(2){
  display: none !important;
}

fieldset[data-option-name="COLOR"] > legend,
fieldset[data-name="option-Color"] > legend,
fieldset[data-name="option-COLOR"] > legend{
  margin: 0 !important;
  padding: 0 !important;
}




/* =========================
   PRODUCT PAGE: "COLOR" + swatch inline
   Uses your label class string
   ========================= */

/* 1) Turn the wrapper into a row (best, if supported) */
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 2) Remove the label bottom spacing that pushes the swatch down */
.text-h6.heading-case.font-heading.leading-none.mb-2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 3) Make the “swatch container” (whatever comes right after the label) inline */
.text-h6.heading-case.font-heading.leading-none.mb-2 + * {
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Fallback: if your option block is a fieldset with a legend and swatch list */
.product-form fieldset{
  /* do nothing by default */
}
.product-form fieldset legend + *{
  margin-top: 0 !important;
}
.product-form fieldset:has(legend) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.product-form fieldset legend{
  margin: 0 !important;
}

/* =========================================
   FIX: align COLOR label + swatch on same line
   (and vertically aligned)
   ========================================= */

/* The wrapper that contains the COLOR label */
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2){
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* kill the label's bottom margin so it doesn't push the swatch down */
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2)
> .text-h6.heading-case.font-heading.leading-none.mb-2{
  margin: 0 !important;
}

/* The thing immediately after the label (your swatch container) */
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2)
> .text-h6.heading-case.font-heading.leading-none.mb-2 + *{
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Nudge the actual swatch square up a hair (tweak -1px/-2px if needed) */
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2)
> .text-h6.heading-case.font-heading.leading-none.mb-2 + *
button,
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2)
> .text-h6.heading-case.font-heading.leading-none.mb-2 + *
label,
div:has(> .text-h6.heading-case.font-heading.leading-none.mb-2)
> .text-h6.heading-case.font-heading.leading-none.mb-2 + *
span{
  position: relative;
  top: -1px;
}


/* =========================================
   MOBILE: header text/icons ALWAYS BLACK
   ========================================= */
@media (max-width: 1023px){
  header[data-aid="header-section"],
  header[data-aid="header-section"] a,
  header[data-aid="header-section"] h5,
  header[data-aid="header-section"] span,
  header[data-aid="header-section"] [data-aid="country-selector-button"],
  header[data-aid="header-section"] [data-aid="country-selector-button"] span,
  header[data-aid="header-section"] svg{
    color:#000 !important;
    fill: currentColor !important;
  }
}




/* 6) Your proven horizontal nudge for color swatch */
body.template-product color-swatch [data-name="swatch-option"]{
  position: relative !important;
  left: 6px !important;
}



/* =========================================================
   FINAL PATCH (SAFE): Color swatch square + text alignment
   - fixes the “floating / misaligned” squares
   - adds black border so WHITE is visible
   - does NOT touch Size buttons
   ========================================================= */

body.template-product color-swatch[data-aid="color-swatch"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* each option wrapper */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"]{
  display: inline-flex !important;
  align-items: center !important;
}

/* label becomes the alignment container */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

  color: #000 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

/* IMPORTANT: themes often render BOTH ::before and ::after.
   That causes weird “double” offsets. Keep ONE. */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label::after{
  content: none !important;
}

/* force the square to be an inline box aligned to text */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label::before{
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;

  display: inline-block !important;
  vertical-align: middle !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;

  border: 1px solid #000 !important; /* makes WHITE visible */
  border-radius: 2px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* =========================================
   HEADER BUBBLES: white pill + black text
   (override existing glass pill)
   ========================================= */

/* 1) Make the bubbles WHITE (instead of transparent/inverted glass) */
@media (min-width: 1024px){
  header[data-aid="header-section"]:not(.transparent-header)
  [data-armada-selector="main-navigation"]::before,
  header[data-aid="header-section"]:not(.transparent-header)
  [data-armada-selector="header-cta-container"]::before{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 2) Force solid BLACK text/icons inside those bubbles (scrolled state) */
header[data-aid="header-section"]:not(.transparent-header),
header[data-aid="header-section"]:not(.transparent-header) a,
header[data-aid="header-section"]:not(.transparent-header) h5,
header[data-aid="header-section"]:not(.transparent-header) span,
header[data-aid="header-section"]:not(.transparent-header) svg,
header[data-aid="header-section"]:not(.transparent-header) [data-aid="country-selector-button"]{
  color: #000 !important;
  fill: currentColor !important;
}

/* =========================================
   PRODUCT CARD: lock brand + title alignment
   ========================================= */

[data-aid="product-card"] [data-name="title"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Create a consistent inner text column */
[data-aid="product-card"] [data-name="title"] > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure brand + title share exact left edge */
[data-aid="product-card"] [data-name="title"] a{
  display: block;
}

/* Kill any inherited centering */
[data-aid="product-card"] [data-name="title"],
[data-aid="product-card"] [data-name="title"] *{
  text-align: left !important;
}

/* Brand label refinement */
[data-aid="product-card"] [data-name="title"] > a:first-child{
  margin-bottom: 4px;
  line-height: 1.1;
}

/* Product title refinement */
[data-aid="product-card"] h5{
  margin: 0;
  line-height: 1.2;
}

/* =========================================
   PRODUCT CARD: Brand + Title alignment
   ========================================= */

/* Brand label refinement */
[data-aid="product-card"] [data-name="title"] > a:first-child{
  margin-bottom: 4px;
  line-height: 1.1;
}

/* Product title refinement */
[data-aid="product-card"] h5{
  margin: 0;
  line-height: 1.2;
}

/* =========================================
   PRODUCT CARD: Price alignment flush left
   ========================================= */

/* Kill internal indentation in price block */
[data-aid="product-card"] [data-name="price"]{
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

/* Remove any indent applied by price component */
[data-aid="product-card"] [data-name="price"] *{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Tighten price typography */
[data-aid="product-card"] [data-name="price"]{
  line-height: 1.2;
}

/* =========================
   FEATURED BRANDS (TOP GRID)
   10 items max, 5 per row, centered
   ========================= */

.featured-brands{
  margin: 0 0 34px; /* space before A-Z list starts */
}

.featured-title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 18px;
}

.featured-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 per row */
  gap: 14px 22px;
  justify-items: center; /* centers each column item */
  align-items: center;
}

.featured-link{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-align: center;
  white-space: normal;
}

.featured-link:hover{
  opacity: .75;
}

/* Mobile: 2 per row (clean + readable) */
@media (max-width: 640px){
  .featured-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
}

/* =========================
   FEATURED CATEGORIES (MENU)
   ========================= */
.collection-header .featured-categories{
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.collection-header .featured-categories__list{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;

  max-width: 860px;
  width: 100%;
  margin: 0 auto;

  padding: 0 14px;
  list-style: none;
  gap: 22px;
}

@media (max-width: 989px){
  .collection-header .featured-categories__list{
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding: 0;
    gap: 18px;
  }
}

.collection-header .featured-categories__link{
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .7;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: opacity .15s ease, border-color .15s ease;
}

.collection-header .featured-categories__link:hover{
  opacity: 1;
  border-bottom-color: rgba(0,0,0,.35);
}

.collection-header .featured-categories { position: relative; z-index: 5; }
.collection-header .featured-categories__list,
.collection-header .featured-categories__item,
.collection-header .featured-categories__link { position: relative; z-index: 6; pointer-events: auto; }

.collection-header .featured-brands__list,
.collection-header .featured-categories__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 0 14px;
  list-style: none;
  gap: 22px;
}

/* =========================================================
   FEATURED BRANDS — MATCH MAIN BRANDS TYPOGRAPHY & SPACING
   ========================================================= */

/* 1. Match brand link typography exactly */
.featured-brands .featured-link {
  font-weight: 700;                 /* same as .brands-link */
  font-size: 14px;                  /* same size */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  color: inherit;
}

/* Hover parity */
.featured-brands .featured-link:hover {
  opacity: 0.75;
}

/* 2. Grid spacing identical to brands list */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 22px;                    /* same visual rhythm */
  justify-items: center;
}

/* 3. Featured title spacing = Brands spacing */
.featured-title {
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 36px;                  /* SAME spacing as Brands title */
  text-align: center;
}

/* 4. Equal vertical padding above and below featured section */
.featured-brands {
  margin-bottom: 36px;               /* matches spacing before "Brands" */
}

/* 5. Mobile parity */
@media (max-width: 640px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
  }

  .featured-brands .featured-link {
    font-size: 12px;
    letter-spacing: 0.03em;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
  }

  .featured-title {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .featured-brands {
    margin-bottom: 28px;
  }
}

/* =========================================
   FEATURED BRANDS — FORCE TITLE MATCH
   ========================================= */

/* Match Featured Brands title to Brands title exactly */
.brands-directory .featured-title {
  font-weight: 900 !important;
  font-size: clamp(40px, 7vw, 90px) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin: 0 0 36px !important;
}

/* =========================================================
   BRANDS DIRECTORY — MATCH COLLECTION PAGE TYPOGRAPHY
   (FINAL, HARD OVERRIDE — NO VARIABLES)
   ========================================================= */

/* Collection titles (NEW ARRIVALS / SHOES / PRE-OWNED) */
body .brands-directory .brands-title,
body .brands-directory .featured-title {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Space between FEATURED BRANDS title and grid */
body .brands-directory .featured-title {
  margin-bottom: 28px !important;
}

/* Space between FEATURED BRANDS block and BRAND LIST title */
body .brands-directory .featured-brands {
  margin-bottom: 28px !important;
}

/* Brand names (match FILTER / SORT BY text) */
body .brands-directory .brands-link,
body .brands-directory .featured-link {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* =========================================================
   BRANDS PAGE — SEPARATION BETWEEN FEATURED + BRAND LIST
   ========================================================= */

/* Add a divider line below Featured Brands */
.brands-directory .featured-brands::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 40px; /* space above & below line */
  height: 1px;
  background: rgba(0,0,0,0.12);
}

/* Ensure Brand List title sits cleanly after divider */
.brands-directory .brands-title-wrap {
  margin-top: 0 !important;
}

/* =========================================
   HEADER — REMOVE BOTTOM DIVIDER LINE
   ========================================= */

/* Common header border / divider removal */
header,
.header,
.site-header,
.header-wrapper {
  border-bottom: none !important;
}

/* If theme uses a pseudo-element divider */
header::after,
.header::after,
.site-header::after {
  display: none !important;
}

/* =========================================
   COLLECTION ROW DIVIDER (FULL WIDTH)
   ========================================= */

.collection-row-divider{
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(0,0,0,.12);

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin: 40px 0;
  pointer-events: none;
  z-index: 2;
}   

@media (max-width: 767px){
  .collection-row-divider{ margin: 28px 0; }
}


/* =========================================================
   HEADER NAV — KEEP PILL ALIGNMENT + TIGHT UNDERLINE
   ========================================================= */

/* Remove the existing big hover bar underline (the ::after element) */
@media (min-width: 1024px) {
  [data-aid="navigation-list-item"]
  .navigation-item-link-only
  > .relative::after{
    content: none !important;
  }

  /* Make the underline attach to the text itself */
  [data-aid="navigation-list-item"] a h5{
    position: relative;
    display: inline-block;
  }

  /* Hover underline (tight to the text) */
  [data-aid="navigation-list-item"] a:hover h5::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;          /* adjust: -4px tighter, -8px lower */
    height: 4px;           /* thickness of underline */
    background: currentColor;
  }

  /* Optional: keep underline on active/current menu item too */
  [data-aid="navigation-list-item"] a[aria-current="page"] h5::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 4px;
    background: currentColor;
  }
}

/* =========================================================
   COLLECTION FILTER/SORT — MERGE TWO <hr> INTO ONE LINE
   (mobile topbar)
   ========================================================= */

/* 1) Hide the two separate hr lines (one under Filter, one under Sort) */
.template-collection
  [data-filter-position="topbar"]
  hr.mt-2{
  display: none !important;
}

/* 2) Add one continuous line under the whole Filter/Sort row */
.template-collection
  .filter-topbar-container{
  position: relative !important;
}

/* One full-width line */
.template-collection
  .filter-topbar-container::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 1px !important;
  background: rgba(0,0,0,.35) !important;

  /* place it where the old hr sat */
  bottom: 0 !important;

  pointer-events: none !important;
  z-index: 50 !important;
}

/* Keep infinite scroll, hide the button UI */
.template-collection button,
.template-collection a{
  /* do NOT hide all buttons — only hide the load more one */
}

.template-collection button:has(span),
.template-collection button:has(div){
  /* not reliable across browsers; use the safer selector below */
}

/* Safe: hide only the load more button by text (CSS can't do this reliably),
   so instead hide the wrapper we know exists in your theme */
.template-collection ship-pagination-load-more{
  display: none !important;
}


/* Viewing X–Y text */
collection-grid .collection-count{
  margin:0;
  padding:0;
  line-height:1.15;
  text-align:center;
}

/* Pagination buttons container */
collection-grid [data-aid="pagination-container"]{
  margin:0;
  padding:0;
}

/* Remove default li spacing from theme */
collection-grid [data-aid="pagination-container"] li{
  margin:0;
}


/* ===============================
   HOMEPAGE COLLECTION RAIL
================================ */

.home-collection-rail-section {
  padding: 32px 0;
  overflow: hidden;
}

.home-collection-rail-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px 12px;
}

.home-collection-rail-title {
  font-size: 1.25rem;
  line-height: 1.2;
}

.home-collection-rail-subtitle {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-top: 4px;
}

.home-collection-rail-cta {
  font-size: 0.875rem;
  text-decoration: underline;
}

.home-collection-rail-hero {
  display: block;
  margin: 0 24px 16px;
}

.home-collection-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 2.2);
  gap: 16px;
  overflow-x: auto;
  padding: 0 24px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .home-collection-rail-track {
    grid-auto-columns: calc(100% / 4.5);
  }
}

.home-collection-rail-item {
  scroll-snap-align: start;
}

/* Header is clickable as one block */
.home-collection-rail-headerlink{
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Visual hover affordance */
.home-collection-rail-headerlink:hover .home-collection-rail-title{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Ensure header sits above layout layers (not drag layers) */
.home-collection-rail-header{
  position: relative;
  z-index: 10;
}

{% style %}
  .home-collection-rail-headerlink{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
  }

  .home-collection-rail-headerlink:hover .home-collection-rail-title{
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
/* =========================================================
   MOBILE HEADER (CLEAN) — KEEP ONLY THIS VERSION
   Left: hamburger | Center: logo | Right: icons
   ========================================================= */
@media (max-width: 1023px) {

  /* Make header only as tall as the row */
  header[data-aid="header-section"]{
    padding: 8px 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Use the actual header row container */
  header[data-aid="header-section"] form{
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 96px !important; /* left | center | right */
    grid-template-rows: auto !important;
    align-items: start !important; /* keeps the row higher */
    column-gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
    min-height: 56px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* LEFT: hamburger */
  header[data-aid="header-section"] .navigation-toggle{
    justify-self: start !important;
    align-self: start !important;
  }

  /* CENTER: logo */
  header[data-aid="header-section"] a[id*="__header"],
  header[data-aid="header-section"] .header-logo{
    justify-self: center !important;
    align-self: start !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  /* Logo size (bigger, but won’t shove icons off-screen) */
  header[data-aid="header-section"] a[id*="__header"] img,
  header[data-aid="header-section"] .header-logo img{
    height: 46px !important;     /* change to 52px if you want slightly bigger */
    width: auto !important;
    max-width: 56vw !important;  /* prevents pushing the right icons off */
    object-fit: contain !important;
  }

  /* RIGHT: icon cluster (target the REAL container — not :last-child) */
  header[data-aid="header-section"] [data-armada-selector="header-cta-container"]{
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-right: 10px !important; /* fixes right-side clipping */
    box-sizing: border-box !important;
  }

  /* Safety: prevent overflow/clipping from children */
  header[data-aid="header-section"] form *{
    max-width: 100% !important;
  }
}
/* =========================================
   MOBILE ONLY: shrink the white header area
   (does NOT affect desktop)
   ========================================= */
@media (max-width: 1023px){

  /* 1) Hard-lock the header to a tight height */
  header[data-aid="header-section"]{
    padding: 0 !important;
    margin: 0 !important;
    height: 56px !important;       /* <- adjust to 52/54/58 if you want */
    min-height: 56px !important;
    overflow: visible !important;
  }

  /* 2) The inner row (form) should NOT add extra vertical space */
  header[data-aid="header-section"] form{
    padding: 0 12px !important;    /* tight edges */
    margin: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    display: grid !important;
    grid-template-columns: 44px 1fr 88px !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  /* 3) Logo size but contained */
  header[data-aid="header-section"] a[id*="__header"]{
    justify-self: center !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  header[data-aid="header-section"] a[id*="__header"] img{
    height: 40px !important;       /* <- tweak */
    width: auto !important;
    max-width: 56vw !important;
    object-fit: contain !important;
  }

  /* 4) Right icon cluster stays inside the 56px row */
  header[data-aid="header-section"] form > :last-child{
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-right: 6px !important;
    min-width: 88px !important;
  }

  /* 5) IMPORTANT: remove the extra “push down” rules on mobile
        and use body padding-top as the only offset */
  body{
    padding-top: 56px !important;  /* MUST match header height above */
  }
  main > section:first-child,
  main > div:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* Price row layout: price left, sizes right */
product-card .pc-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

/* Size strip hidden until hover/focus */
product-card .pc-size-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}

/* Show on hover (desktop) + keyboard focus */
product-card.group:hover .pc-size-strip,
product-card.group:focus-within .pc-size-strip{
  opacity:1;
  pointer-events:auto;
}

/* Size styling */
product-card .pc-size{
  font-size:12px;
  letter-spacing:.02em;
  line-height:1;
}

/* Sold out look */
product-card .pc-size.is-soldout{
  opacity:.35;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
/* =========================================================
  HIDE PAYPAL
   ========================================================= */
/* Hide PayPal express button */
body.template-product .shopify-payment-button {
  display: none !important;
}

/* ================================
   PRODUCT PAGE — COLOR + SIZE UI (REPLACE WITH THIS)
   - Color pills horizontal
   - Color names visible (sr-only unhidden)
   - No tiny square swatch icons
   ================================ */

/* separators + row layout */
body.template-product .armament-color-row,
body.template-product .armament-size-row{
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: 1px solid #e6e6e6 !important;
  padding: 18px 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* option container MUST be the flex/wrap area */
body.template-product .armament-color-row > div,
body.template-product .armament-size-row > div{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;

  min-width: 0 !important;
}

/* -------- COLOR (pills) -------- */

/* stop the theme from forcing 44px basis/width (this is what causes stacking) */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"],
body.template-product color-swatch[data-aid="color-swatch"] .armament-swatch-option{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* make sr-only visible ONLY inside color swatches */
body.template-product color-swatch[data-aid="color-swatch"] .sr-only,
body.template-product color-swatch[data-aid="color-swatch"] [class*="sr-only"]{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* the label becomes the pill */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;

  padding: 6px 12px !important;
  min-height: 32px !important;

  border: 1px solid #cfcfcf !important;
  background: #f3f3f3 !important;
  border-radius: 6px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  color: #000 !important;
  opacity: 1 !important;
  text-indent: 0 !important;

  margin: 0 !important;
  transform: none !important;
}

/* remove the tiny “square” swatch visuals */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label::before,
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] label::after{
  content: none !important;
}

/* selected COLOR */
body.template-product color-swatch[data-aid="color-swatch"] [data-name="swatch-option"] input:checked + label{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* -------- SIZE (keep your look) -------- */

body.template-product [data-aid="armament-radio-item-size"] + label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 32px !important;

  border: 1px solid #cfcfcf !important;
  background: #f3f3f3 !important;
  border-radius: 6px !important;

  color: #000 !important;
}

body.template-product [data-aid="armament-radio-item-size"]:checked + label{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* legends (keep clean) */
fieldset[data-option-name="COLOR"] > legend,
fieldset[data-name="option-Color"] > legend,
fieldset[data-name="option-COLOR"] > legend{
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   DESKTOP: lower the FILTER popup WITHOUT moving products
   (only offsets the overlay + drawer, no layout shift)
   ========================================================= */
@media (min-width: 1024px){

  :root{
    --header-offset: 84px; /* tweak to match your fixed header height */
  }

  /* The dark overlay you showed in your code */
  [data-armada-selector="filter_underlay"]{
    top: var(--header-offset) !important;
    height: calc(100vh - var(--header-offset)) !important;
  }

  /* The actual filter “panel” (drawer/modal) — catch common patterns */
  [role="dialog"][class*="filter"],
  [role="dialog"][data-armada-selector*="filter"],
  [data-armada-selector*="filter"][role="dialog"],
  [data-armada-selector*="filter-drawer"],
  [data-armada-selector*="filter-modal"],
  .filter-drawer,
  .filter-modal{
    top: var(--header-offset) !important;
    max-height: calc(100vh - var(--header-offset)) !important;
    overflow: auto !important;
  }
}

/* =========================================================
   DESKTOP: Drop the FILTER modal down below your fixed header
   (does NOT push products down)
   ========================================================= */
@media (min-width: 1024px){

  /* Target the filter modal container (the full-screen fixed wrapper) */
  body.template-collection
  [data-armada-selector="modal-container"]{
    /* push the whole modal content down */
    padding-top: 125px !important; /* <-- adjust to match header height */
    align-items: flex-start !important;
  }

  /* Keep the modal itself from overflowing the viewport */
  body.template-collection
  [data-armada-selector="modal-inner"]{
    max-height: calc(100vh - 130px) !important; /* 110 + a little breathing room */
    overflow: auto !important;
  }

}

/* Sold-out SIZE options */
.armament-text-option.is-sold-out {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Sold-out COLOR swatches */
.armament-swatch-option.is-sold-out {
  opacity: 0.35;
  filter: grayscale(40%);
  cursor: not-allowed;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Micro fade when switching colors (sizes area) */
.variant-sizes-fade {
  transition: opacity 120ms ease, transform 120ms ease;
  will-change: opacity, transform;
}

.variant-sizes-fade.is-fading {
  opacity: 0.25;
  transform: translateY(1px);
  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .variant-sizes-fade {
    transition: none;
  }
}


/* If your theme adds an extra divider/spacing row above pagination */
body.template-collection .collection-row-divider {
  margin: 0 !important;
  padding: 0 !important;
}

/* Last resort: if the footer group itself has a top margin */
body.template-collection .shopify-section-group-footer-group {
  margin-top: 0 !important;
}


/* If divider is near the bottom, reduce its vertical spacing */
body.template-collection .collection-row-divider{
  margin: 16px 0 !important;
}

/* =========================================================
   COLLECTION PAGINATION — centered + equal breathing room
   ========================================================= */

body.template-collection collection-grid .collection-pagination-wrap{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;                 /* space between Viewing + numbers */
  padding: 28px 0 44px !important;      /* TOP / BOTTOM whitespace */
  margin: 0 !important;
}

/* Viewing line */
body.template-collection collection-grid .collection-pagination-wrap .collection-count{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* Kills theme’s pt-4 / md:pt-5 on the pagination row */
body.template-collection collection-grid .collection-pagination-wrap
> .flex.w-full.justify-center.items-center{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Tighten the number row vertically + horizontally */
body.template-collection collection-grid ul[data-aid="pagination-container"]{
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Remove mt-3 and h-[50px] on li */
body.template-collection collection-grid ul[data-aid="pagination-container"] li{
  margin-top: 0 !important;
  height: auto !important;
  padding: 0 2px !important;
}

/* Make buttons/links not so tall */
body.template-collection collection-grid ul[data-aid="pagination-container"] a,
body.template-collection collection-grid ul[data-aid="pagination-container"] button{
  padding: 6px 8px !important;
  min-height: 32px !important;
  line-height: 1 !important;
}

/* =========================
   PDP Fullscreen Zoom (v8)
   Target actual wrapper: .pdp-media-zoom-wrap
   ========================= */


/* PDP image hover */
main img[data-aid="image"]{
  cursor: zoom-in;
}

/* Fullscreen zoom overlay */
.pdp-zoom-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(255,255,255,0.98);
  display: none;
}

.pdp-zoom-overlay.is-open{
  display: block;
}

/* Stage */
.pdp-zoom-stage{
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-out;
}

/* When zoomed in */
.pdp-zoom-overlay.is-zoomed .pdp-zoom-stage{
  cursor: grab;
}
.pdp-zoom-overlay.is-zoomed .pdp-zoom-stage:active{
  cursor: grabbing;
}

/* Zoom image */
.pdp-zoom-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Controls */
.pdp-zoom-controls{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 1000000;
}

.pdp-zoom-controls button{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Close button */
.pdp-zoom-close{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000001;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  font-size: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Lock background scroll */
body.pdp-zoom-lock{
  overflow: hidden !important;
}
.pdp-zoom-controls{ display:flex !important; opacity:1 !important; pointer-events:auto !important; }
.pdp-zoom-controls button{ pointer-events:auto !important; }
.pdp-zoom-close{ pointer-events:auto !important; }

/* Force overlay UI on top of the stage/image */
.pdp-zoom-overlay { z-index: 999999 !important; }
.pdp-zoom-stage { z-index: 0 !important; }

/* Force controls to the bottom center */
.pdp-zoom-controls{
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1000000 !important;
}

.pdp-zoom-controls button{
  pointer-events: auto !important;
  z-index: 1000000 !important;
}

/* Force close button top-right */
.pdp-zoom-close{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  pointer-events: auto !important;
  z-index: 1000001 !important;
}


/* Rails (thumbs left, numbers right) */
.pdp-zoom-rail{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000002; /* above stage + controls */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  pointer-events: auto;
}

.pdp-zoom-rail-left{ left: 14px; }
.pdp-zoom-rail-right{ right: 14px; }

/* Left thumbnails */
.pdp-zoom-thumb{
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.92);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.pdp-zoom-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-zoom-thumb.is-active{
  outline: 2px solid rgba(0,0,0,0.75);
  outline-offset: 2px;
}

/* Right numbers */
.pdp-zoom-num{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.pdp-zoom-num.is-active{
  background: rgba(0,0,0,0.92);
  color: #fff;
  border-color: rgba(0,0,0,0.92);
}

/* Keep rails visible on small screens but less intrusive */
@media (max-width: 640px){
  .pdp-zoom-rail{ gap: 8px; padding: 8px; }
  .pdp-zoom-thumb{ width: 48px; height: 48px; border-radius: 12px; }
  .pdp-zoom-num{ width: 38px; height: 38px; font-size: 13px; }
}

.pdp-thumbnail.is-active,
.pdp-thumbnail.active {
  box-shadow: 0 0 0 2px #000;
  transform: scale(1.03);
  transition: all 0.2s ease;
}


/* Kill ALL pseudo indicators on thumbnails */
main ul.product-thumbnail-slider > li::before,
main ul.product-thumbnail-slider > li::after {
  content: none !important;
  display: none !important;
}



/* Hide the theme's right-side numeric indicator only while zoom overlay is open */
body.pdp-zoom-lock [data-name="mobile-indicator"],
body.pdp-zoom-lock [data-armada-selector*="mobile-indicator"],
body.pdp-zoom-lock .mobile-indicator{
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pdp-zoom-overlay{
  background: #fff !important;
}

/* MOBILE ONLY: hide the theme’s numeric/scroll-bar indicator */
@media (max-width: 749px){
  main [data-name="mobile-indicator"],
  main [data-name="mobile-indicator"] * ,
  main scroll-bar[data-aid="scroll-bar"]{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Our dot indicator */
@media (max-width: 749px){
  .pdp-dot-indicator{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 30;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
  }

  .pdp-dot-indicator button{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(0,0,0,0.25);
  }

  .pdp-dot-indicator button.is-active{
    background: rgba(0,0,0,0.85);
    transform: scale(1.15);
  }
}