/** Shopify CDN: Minification failed

Line 1212:13 Expected identifier but found whitespace
Line 1213:14 Unexpected ".18s"
Line 1614:13 Expected identifier but found whitespace
Line 1615:14 Unexpected ".38s"
Line 4210:13 Expected identifier but found whitespace
Line 4211:14 Unexpected ".38s"

**/
/* =========================================================
   RA OVERRIDES — v1.0
   Store: Revolution Ape
   Theme: Dawn
   File: assets/ra-overrides.css
   ---------------------------------------------------------
   v1.0 – Stable build (2026-03-05)

   Includes:
   • Hero CTA spacing + mobile pill button
   • Sticky header + announcement bar
   • Homepage collection tile zoom effect
   • Collection page dark product cards
   • Product page recommendations fix
   • Newsletter mobile pill + iOS focus fix
   • Swatch dots restored
========================================================= */


/* =========================================================
   1) HERO CTA SPACING (mobile + desktop)
========================================================= */
#MainContent [id^="Banner-"] .banner__box{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#MainContent [id^="Banner-"] .banner__buttons{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-top: 12px !important;
}

@media (max-width: 749px){
  #MainContent [id^="Banner-"] .banner__buttons{
    margin-top: 16px !important;
  }
}


/* =========================================================
   2) LINKS: prevent purple visited + keep your hover
========================================================= */
:root{
  --ra-link-hover:#c21f1f;
}

#MainContent a,
#MainContent a:visited{
  color: inherit;
}

#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  color: inherit !important;
}

#MainContent .card__heading a:hover,
#MainContent .full-unstyled-link:hover,
#MainContent .rte a:hover{
  color: var(--ra-link-hover) !important;
}


/* =========================================================
   3) ANNOUNCEMENT BAR + HEADER STACKING
========================================================= */
#shopify-section-announcement-bar,
.announcement-bar-section{
  position: sticky;
  top: 0;
  z-index: 40;
}

.shopify-section-group-header-group,
#shopify-section-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-wrapper{
  z-index: 50;
}


/* =========================================================
   4) HERO CTA — MOBILE PILL / GLASS (prevents square)
========================================================= */
@media (max-width: 749px){
  #MainContent [id^="Banner-"] .banner__buttons .button,
  #MainContent [id^="Banner-"] .banner__buttons a.button{
    border-radius: 999px !important;
    overflow: hidden !important;

    background: rgba(0,0,0,0.28) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    --color-button: 0,0,0 !important;
    --color-button-text: 255,255,255 !important;
  }

  /* Dawn draws shape on pseudo elements too */
  #MainContent [id^="Banner-"] .banner__buttons .button::before,
  #MainContent [id^="Banner-"] .banner__buttons .button::after{
    border-radius: 999px !important;
  }
}


/* =========================================================
   5) NEWSLETTER — MOBILE (single source of truth)
   - crisp "Email" (placeholder)
   - pill border always visible
   - no iOS green focus ring
   - circle submit button
========================================================= */
@media (max-width: 749px){

  .section-sections--16854343319670__newsletter_Lm6GUh-padding,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding *{
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Kill Dawn ring layers */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field::before,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field::after,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper::before,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper::after{
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
  }

  /* Put the pill border on the OUTER wrapper (most reliable in Dawn) */
.section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper{
  position: relative !important;  /* ADD THIS LINE */
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset !important;
  background: transparent !important;
  overflow: visible !important;
}

  /* Ensure the .field doesn’t fight it */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter__wrapper .field{
    position: relative !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Focus: slightly brighter border, still no green ring */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper:focus-within{
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset !important;
  }

  /* Input: no ring, correct sizing */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:focus-visible{
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;

    padding-left: 16px !important;
    padding-right: 64px !important;
    line-height: 52px !important;
  }

  /* ✅ Make "Email" crisp: show placeholder */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input::placeholder{
    opacity: 0.75 !important;
  }

  /* Hide Dawn floating label (keeps accessibility) */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Autofill (iOS/Chrome) */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill:hover,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill:focus{
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 999999s ease-out 0s;
  }

  /* Circular submit button */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button{
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    background: rgba(255,255,255,0.08) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    z-index: 5 !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding button#Subscribe .svg-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
}

/* =========================================================
   6) FOOTER SPACING / DENSITY
========================================================= */
.footer{
  padding-top: 70px !important;
  padding-bottom: 50px !important;
}
.footer__blocks-wrapper{ gap: 40px !important; }
.footer a{ line-height: 1.9 !important; opacity: .75; }
.footer a:hover{ opacity: 1; }


/* =========================================================
   7) HOMEPAGE COLLECTION TILES — zoom only (no lift)
   FIX: keep Dawn structure, only zoom image + clip corners
========================================================= */
@media (hover:hover) and (pointer:fine){

  /* Clip the zoom inside the rounded tile */
  .collection-card-wrapper .card__media{
    border-radius:16px !important;
    overflow:hidden !important;
  }

  /* Ensure background layers don't show in corners */
  .collection-card-wrapper .card__media,
  .collection-card-wrapper .media{
    background:transparent !important;
  }

  /* Image zoom */
  .collection-card-wrapper .card__media img{
    transform:scale(1);
    transition:transform 520ms ease;
    will-change:transform;
  }

  .collection-card-wrapper:hover .card__media img{
    transform:scale(1.06);
  }

}
/* Fix: remove white card background behind zooming images */
.collection-card-wrapper .card,
.collection-card-wrapper .card__inner,
.collection-card-wrapper .media{
  background: transparent !important;
}

/* Ensure the rounded media clips the zoom */
.collection-card-wrapper .card__media{
  border-radius: 16px !important;
  overflow: hidden !important;
}


/* =========================================================
   8) COLLECTION PAGES — remove white panels (dark theme)
========================================================= */

body.template-collection .product-grid .card,
body.template-collection .product-grid .card__inner,
body.template-collection .product-grid .card__content,
body.template-collection .product-grid .card__information,
body.template-collection .product-grid .card__media,
body.template-collection .product-grid .media{
  background: transparent !important;
}

body.template-collection .product-grid .card__content{
  box-shadow: none !important;
}


/* =========================================================
   9) SWATCH DOTS — restore visibility + clickability
========================================================= */
.product-card-wrapper .ra-swatches,
.card-wrapper .ra-swatches{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
  position: relative;
  z-index: 50;
}
.product-card-wrapper .ra-swatch-link,
.card-wrapper .ra-swatch-link{
  display: inline-flex !important;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  position: relative;
  z-index: 51;
  pointer-events: auto;
  text-decoration: none !important;
}
.product-card-wrapper .ra-swatch,
.card-wrapper .ra-swatch{
  width: 100%;
  height: 100%;
  border-radius: 999px !important;
  display: block !important;
  background: var(--ra-swatch-color, rgba(255,255,255,.18)) !important;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events: none;
}
.product-card-wrapper .full-width-link,
.card-wrapper .full-width-link{ z-index: 1; }
.product-card-wrapper .card__content,
.card-wrapper .card__content{
  position: relative;
  z-index: 2;
}
/* =========================================================
   NEWSLETTER (MOBILE) — FINAL LOCK
   - kill green focus ring (Dawn vars + shadows)
   - make placeholder "Email" readable
   - keep pill border visible
========================================================= */
@media (max-width: 749px){

  .section-sections--16854343319670__newsletter_Lm6GUh-padding{
    --focused-base-outline-color: transparent !important;
    --inputs-border-color-focus: rgba(255,255,255,0.55) !important;
    --inputs-border-color-hover: rgba(255,255,255,0.35) !important;
  }

  /* Pill border ALWAYS */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
.newsletter-form__field-wrapper{
  position: relative !important;
  border-radius: 9999px !important;

  border: 1px solid rgba(255,255,255,0.35) !important;

  /* subtle glass edge */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 8px 20px rgba(0,0,0,0.25);

  outline: none !important;
}

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .newsletter-form__field-wrapper:focus-within{
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset !important;
    outline: none !important;
  }

  /* HARD kill any green ring/shadow coming from Dawn on focus */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .field,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .field:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  input.field__input:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  input.field__input:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  /* Make "Email" readable (placeholder) */
.section-sections--16854343319670__newsletter_Lm6GUh-padding
input.field__input::placeholder{
  opacity: 1 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* iOS Safari placeholder sometimes needs this too */
.section-sections--16854343319670__newsletter_Lm6GUh-padding
input.field__input::-webkit-input-placeholder{
  opacity: 1 !important;
  color: rgba(255,255,255,0.85) !important;
}

  /* Hide floating label so it can't blur/fade the text */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
/* =========================================================
   COLLECTION PAGE — force product image areas to BLACK
   (Dawn media frame + placeholders are white by default)
========================================================= */
body.template-collection .product-grid .card__media,
body.template-collection .product-grid .card__media .media,
body.template-collection .product-grid .card__media .media::before,
body.template-collection .product-grid .card__media::before,
body.template-collection .product-grid .card__inner{
  background: #000 !important;
  background-color: #000 !important;
}

/* Keep info area dark too (if Dawn is painting it white) */
body.template-collection .product-grid .card__content,
body.template-collection .product-grid .card__information{
  background: #000 !important;
  background-color: #000 !important;
  box-shadow: none !important;
}
/* =========================================================
   FIX: remove white background from Dawn product images
========================================================= */

/* Image containers */
.card__media,
.card__media .media,
.product-grid .media{
  background: transparent !important;
}

/* Dawn's aspect-ratio placeholder layer */
.media::before,
.card__media::before{
  background: transparent !important;
}

/* Ensure collection product cards stay dark */
.product-grid .card,
.product-grid .card__inner{
  background: transparent !important;
}
/* =========================================================
   COLLECTION GRID TEXT — keep readable on black
   (and stop the red hover just for collection cards)
========================================================= */
body.template-collection .product-grid,
body.template-collection .product-grid .card__information,
body.template-collection .product-grid .card__content{
  color: rgba(255,255,255,0.92) !important;
}

/* Title + links: white, and keep white on hover (no red) */
body.template-collection .product-grid .card__heading a,
body.template-collection .product-grid .full-unstyled-link,
body.template-collection .product-grid a{
  color: rgba(255,255,255,0.92) !important;
}
body.template-collection .product-grid .card__heading a:hover,
body.template-collection .product-grid .full-unstyled-link:hover,
body.template-collection .product-grid a:hover{
  color: rgba(255,255,255,0.92) !important; /* override global red hover */
}

/* Price text (Dawn sometimes dims this separately) */
body.template-collection .product-grid .price,
body.template-collection .product-grid .price *{
  color: rgba(255,255,255,0.92) !important;
}
/* =========================================================
   COLLECTION PAGE — force readable text on dark background
   (and disable red hover inside product cards)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) Make the collection grid use white foreground vars */
body.template-collection #MainContent{
  --color-foreground: 255,255,255 !important;
}

/* 2) Force text + opacity inside product cards */
body.template-collection #MainContent .product-grid,
body.template-collection #MainContent .product-grid .card__information,
body.template-collection #MainContent .product-grid .card__content,
body.template-collection #MainContent .product-grid .card__information *,
body.template-collection #MainContent .product-grid .card__content *{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}

/* Titles/links: keep white always (no red hover) */
body.template-collection #MainContent .product-grid a,
body.template-collection #MainContent .product-grid a:visited{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}
body.template-collection #MainContent .product-grid a:hover{
  color: rgba(255,255,255,0.92) !important; /* kills the red hover */
}

/* Prices (Dawn sometimes styles these separately) */
body.template-collection #MainContent .product-grid .price,
body.template-collection #MainContent .product-grid .price *,
body.template-collection #MainContent .product-grid .price-item{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}
/* =========================================================
   COLLECTION GRID — force readable text + stop red hover
   (Your theme body has no template-collection class)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Target Dawn’s collection product grid section + fallback container */
#shopify-section-main-collection-product-grid,
#MainContent #ProductGridContainer{
  color: rgba(255,255,255,0.90) !important;
}

/* Ensure the info/text area is readable on black */
#shopify-section-main-collection-product-grid .card__information,
#shopify-section-main-collection-product-grid .card__content,
#MainContent #ProductGridContainer .card__information,
#MainContent #ProductGridContainer .card__content{
  color: rgba(255,255,255,0.90) !important;
}

/* Titles, prices, and meta text */
#shopify-section-main-collection-product-grid .card__heading,
#shopify-section-main-collection-product-grid .price,
#shopify-section-main-collection-product-grid .caption,
#shopify-section-main-collection-product-grid .card-information,
#MainContent #ProductGridContainer .card__heading,
#MainContent #ProductGridContainer .price,
#MainContent #ProductGridContainer .caption,
#MainContent #ProductGridContainer .card-information{
  color: rgba(255,255,255,0.90) !important;
}

/* Links: keep white (disable the global red hover on collection grid only) */
#shopify-section-main-collection-product-grid a,
#MainContent #ProductGridContainer a{
  color: rgba(255,255,255,0.90) !important;
}

#shopify-section-main-collection-product-grid a:hover,
#shopify-section-main-collection-product-grid a:focus,
#shopify-section-main-collection-product-grid a:active,
#MainContent #ProductGridContainer a:hover,
#MainContent #ProductGridContainer a:focus,
#MainContent #ProductGridContainer a:active{
  color: rgba(255,255,255,0.90) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Product recommendations)
   Fix: text blacked out on dark background
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Target the recommendations section wrapper(s) */
#product-recommendations,
.product-recommendations,
.shopify-section[id*="product-recommendations"]{
  background: #000 !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Force readable text inside the cards */
#product-recommendations .card__heading,
#product-recommendations .card__heading a,
#product-recommendations .card__information,
#product-recommendations .price,
#product-recommendations .price * ,
#product-recommendations .rte,
#product-recommendations .caption,
#product-recommendations .full-unstyled-link{
  color: rgba(255,255,255,0.92) !important;
}

/* Keep your hover style (red) */
#product-recommendations a:hover{
  color: var(--ra-link-hover) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Product recommendations)
   Fix: text looks blacked out + stop hover turning red
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Hit the recommendations section no matter what Dawn calls it */
#product-recommendations,
.product-recommendations,
.shopify-section[id*="product-recommendations"],
.shopify-section[id*="recommendations"]{
  /* Force a dark scheme with light text */
  --color-background: 0,0,0 !important;
  --gradient-background: rgb(0,0,0) !important;
  --color-foreground: 255,255,255 !important;
  --color-link: 255,255,255 !important;

  background: #000 !important;
  color: rgb(255,255,255) !important;

  /* In case something is dimming the whole section */
  opacity: 1 !important;
  filter: none !important;
}

/* Make sure inner wrappers/cards are not dimmed */
#product-recommendations *,
.product-recommendations *,
.shopify-section[id*="product-recommendations"] *{
  opacity: 1 !important;
  filter: none !important;
}

/* Force readable text inside the product cards */
#product-recommendations .card__heading,
#product-recommendations .card__heading a,
#product-recommendations .card__information,
#product-recommendations .price,
#product-recommendations .price *,
.product-recommendations .card__heading,
.product-recommendations .card__heading a,
.product-recommendations .card__information,
.product-recommendations .price,
.product-recommendations .price *{
  color: rgb(255,255,255) !important;
}

/* IMPORTANT: stop your global hover rule turning these links red */
#product-recommendations a:hover,
#product-recommendations .card__heading a:hover,
.product-recommendations a:hover,
.product-recommendations .card__heading a:hover{
  color: rgb(255,255,255) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Recommendations)
   Fix: text too dark + hover turning red
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Dawn usually renders this as <product-recommendations> inside a section */
product-recommendations,
.product-recommendations,
#product-recommendations,
.shopify-section[id*="product-recommendations"],
.shopify-section[id*="recommendations"]{
  /* Force light text */
  --color-foreground: 255,255,255 !important;
  --color-link: 255,255,255 !important;

  /* Also stop your global hover-red inside this block */
  --ra-link-hover: #ffffff !important;

  color: rgb(255,255,255) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* The “dim” in Dawn often comes from rgba(var(--color-foreground), 0.75) */
product-recommendations .card__information,
product-recommendations .card__information *,
product-recommendations .card__heading,
product-recommendations .card__heading a,
product-recommendations .price,
product-recommendations .price *,
.product-recommendations .card__information,
.product-recommendations .card__information *,
.product-recommendations .card__heading,
.product-recommendations .card__heading a,
.product-recommendations .price,
.product-recommendations .price *{
  color: rgb(255,255,255) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Kill the red hover just in recommendations */
product-recommendations a:hover,
product-recommendations .card__heading a:hover,
.product-recommendations a:hover,
.product-recommendations .card__heading a:hover{
  color: rgb(255,255,255) !important;
}
/* =========================================================
   FOOTER — Branded social icons (buttons)
   Paste at VERY END of ra-overrides.css
========================================================= */
:root{
  --ra-social-border: rgba(255,255,255,0.22);
  --ra-social-bg: rgba(255,255,255,0.06);
  --ra-social-icon: rgba(255,255,255,0.92);
  --ra-social-hover-bg: rgba(255,255,255,0.10);
  --ra-social-hover-border: rgba(255,255,255,0.35);

  /* Your brand hover color (already used in your file) */
  --ra-social-hover-icon: var(--ra-link-hover);
}

.footer .list-social{
  gap: 14px !important;
}

.footer .list-social__link{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: var(--ra-social-bg) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Make the SVGs inherit color properly */
.footer .list-social__link .icon{
  width: 20px !important;
  height: 20px !important;
  color: var(--ra-social-icon) !important;
}
.footer .list-social__link .icon path,
.footer .list-social__link .icon circle,
.footer .list-social__link .icon rect{
  fill: currentColor !important;
}

/* Hover/focus */
.footer .list-social__link:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.45) !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 6px 18px rgba(0,0,0,0.35),
    0 0 10px rgba(194,31,31,0.35);
}
.footer .list-social__link:hover .icon{
  color: var(--ra-link-hover) !important;
}

/* Keyboard focus (no ugly ring) */
.footer .list-social__link:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35) !important;
}
/* =========================================================
   FOOTER SOCIAL — Premium glass buttons
========================================================= */

.footer .list-social{
  display:flex;
  justify-content:center;
  gap:16px;

  margin-top:14px;
  margin-bottom:6px;
}

/* Button container */
.footer .list-social__link{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

/* icon colour */
.footer .list-social__link svg{
  width:20px;
  height:20px;
  color:rgba(255,255,255,0.9);
  transition:color .2s ease;
}

/* hover effect */
.footer .list-social__link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.45);
}

/* red accent on hover */
.footer .list-social__link:hover svg{
  color:var(--ra-link-hover);
}
/* =========================================================
   FOOTER LINKS — smooth underline animation
========================================================= */

.footer a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease;
}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium hover interaction
========================================================= */

@media (hover:hover) and (pointer:fine){

  /* smooth motion */
  .product-card-wrapper,
  .product-card-wrapper .card{
    transition: transform .35s cubic-bezier(.4,0,.2,1),
                box-shadow .35s cubic-bezier(.4,0,.2,1);
  }

  /* lift effect */
  .product-card-wrapper:hover{
    transform: translateY(-6px);
  }

  /* soft shadow for depth */
  .product-card-wrapper:hover .card{
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  }

  /* smoother image zoom */
  .product-card-wrapper .card__media img{
    transition: transform .6s cubic-bezier(.4,0,.2,1);
  }

  .product-card-wrapper:hover .card__media img{
    transform: scale(1.07);
  }

}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium spacing
========================================================= */

/* Space between image and text */
.product-card-wrapper .card__information{
  padding-top: 14px !important;
}

/* Product title styling */
.product-card-wrapper .card__heading{
  margin-bottom: 4px !important;
  letter-spacing: 0.02em;
}

/* Price spacing */
.product-card-wrapper .price{
  margin-top: 2px !important;
  opacity: 0.9;
}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium spacing
========================================================= */

/* Space between image and text */
.product-card-wrapper .card__information{
  padding-top: 14px !important;
}

/* Product title styling */
.product-card-wrapper .card__heading{
  margin-bottom: 4px !important;
  letter-spacing: 0.02em;
}

/* Price spacing */
.product-card-wrapper .price{
  margin-top: 2px !important;
  opacity: 0.9;
}
/* =========================================================
   COLLECTION GRID — premium spacing
========================================================= */

/* Desktop grid spacing */
@media (min-width: 990px){

  #ProductGridContainer .grid{
    row-gap: 60px !important;
    column-gap: 28px !important;
  }

}

/* Tablet spacing */
@media (min-width: 750px) and (max-width: 989px){

  #ProductGridContainer .grid{
    row-gap: 48px !important;
    column-gap: 20px !important;
  }

}

/* Mobile spacing */
@media (max-width: 749px){

  #ProductGridContainer .grid{
    row-gap: 36px !important;
    column-gap: 14px !important;
  }

}
/* =========================================================
   PRODUCT — MOBILE STICKY ATC (CSS-only)
   Shows the product form stuck to bottom on scroll
   - Dawn already has a sticky product form container in many builds
   - This styles it into a "bar" feel
========================================================= */

@media (max-width: 749px){

  /* Target Dawn's product form area */
  .template-product .product-form,
  .template-product product-form{
    position: fixed !important;
left: 0 !important;
right: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;

    /* bar look */
    padding: 12px 16px !important;
    margin: 0 !important;

    background: rgba(0,0,0,0.92) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    border-top: 1px solid rgba(255,255,255,0.14) !important;
  }

  /* Keep the button full width + strong */
  .template-product .product-form__submit{
    width: 100% !important;
    border-radius: 999px !important;
  }

  /* Reduce extra spacing inside the form so it feels like a bar */
  .template-product .product-form__buttons{
    margin: 0 !important;
  }

  /* If there are payment buttons (Shop Pay etc.), keep them neat */
  .template-product .shopify-payment-button{
    margin-top: 8px !important;
  }
}
/* =========================================================
   HOMEPAGE — EXPLORE THE ARCHIVE CTA
========================================================= */

/* =========================================================
   HOMEPAGE — EXPLORE THE ARCHIVE CTA (safe selector)
   Fixes: small text + tile flicker
========================================================= */

/* Targets Dawn "Rich text" / "Image with text" style CTA links */
#MainContent .rich-text__wrapper a.link,
#MainContent .rich-text__wrapper a.link-with-icon,
#MainContent .rich-text__wrapper a.link.animate-arrow{
  font-size: 16px !important;          /* slightly bigger */
  letter-spacing: 0.14em !important;   /* more spaced */
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  opacity: 0.9;
  transition: opacity .25s ease, transform .25s ease;
}

#MainContent .rich-text__wrapper a.link:hover,
#MainContent .rich-text__wrapper a.link-with-icon:hover,
#MainContent .rich-text__wrapper a.link.animate-arrow:hover{
  opacity: 1;
  transform: translateY(-2px);
}
/* Hide header social icons */
.header .list-social{
  display:none !important;
}
/* =========================================================
   HEADER — remove social icons (keep footer social icons)
========================================================= */

/* Most common Dawn header locations */
#shopify-section-header .list-social,
#shopify-section-header .header__icons .list-social,
#shopify-section-header .header__icons .list-social__link,
#shopify-section-header .header__icon--social,
#shopify-section-header .header__icon--social + .list-social{
  display: none !important;
}

/* Some Dawn builds render them inside the header wrapper */
#shopify-section-header .header-wrapper .list-social{
  display: none !important;
}

/* If they’re inside the announcement/header group wrapper */
.shopify-section-group-header-group .list-social{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — premium image hover zoom
========================================================= */

@media (hover:hover) and (pointer:fine){

  .template-product .product__media img{
    transition: transform .7s cubic-bezier(.4,0,.2,1);
  }

  .template-product .product__media:hover img{
    transform: scale(1.04);
  }

}
/* =========================================================
   PRODUCT PAGE — subtle media hover zoom (Dawn compatible)
========================================================= */

@media (hover:hover) and (pointer:fine){

  .template-product .product-media-container{
    overflow: hidden;
  }

  .template-product .product-media-container img{
    transition: transform .8s cubic-bezier(.4,0,.2,1);
  }

  .template-product .product-media-container:hover img{
    transform: scale(1.03);
  }

}
/* =========================================================
   PRODUCT PAGE — Premium ATC + remove "Buy with Shop"
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) REMOVE the dynamic checkout button ("Buy with Shop"/"Buy it now") */
.template-product .shopify-payment-button,
.template-product .shopify-payment-button__button,
.template-product .shopify-payment-button__more-options{
  display: none !important;
}

/* 2) Make Add to cart feel more premium */
.template-product .product-form__submit{
  min-height: 52px !important;
  border-radius: 14px !important;

  /* keep your dark vibe */
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;

  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
  will-change: transform;
}

/* Hover = subtle lift + glow (premium) */
@media (hover:hover) and (pointer:fine){
  .template-product .product-form__submit:hover{
    transform: translateY(-1px) !important;
    border-color: rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
  }
}

/* Focus (keyboard) */
.template-product .product-form__submit:focus,
.template-product .product-form__submit:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35) !important;
}
/* =========================================================
   PRODUCT PAGE — keep Add to cart, remove "Buy with Shop"
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) Always show the real Add to cart button */
.template-product .product-form__submit{
  display: flex !important;
}

/* 2) Hide ALL dynamic checkout wrappers (this is where Shop/Shop Pay renders) */
.template-product .shopify-payment-button,
.template-product .shopify-payment-button__button,
.template-product .shopify-payment-button__more-options{
  display: none !important;
}

/* 3) Extra safety: some themes output Shop button inside the payment container */
.template-product .shopify-payment-button button[aria-label*="Shop"],
.template-product .shopify-payment-button button[aria-label*="shop"]{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — REMOVE "BUY WITH SHOP" (accelerated checkout)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Hide accelerated checkout container (Shop / Shop Pay / Buy it now) */
.product__info-container .shopify-payment-button,
.product__info-container [data-shopify="payment-button"]{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — Premium Add to Cart button
========================================================= */


  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* Hover effect */
@media (hover:hover) and (pointer:fine){

  .product-form__submit:hover{
    transform: translateY(-1px);

    border-color: rgba(255,255,255,0.65) !important;

    background: rgba(255,255,255,0.08) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.12) inset;
  }

}

/* Focus accessibility */
.product-form__submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,0.35);
}
/* =========================================================
   PRODUCT PAGE — Premium product title typography
========================================================= */

.product__title{
  letter-spacing: .02em;
  line-height: 1.25;
  font-weight: 600;
}

/* Slight breathing room above price */
.product__title + .price{
  margin-top: 10px;
}
/* =========================================================
   PRODUCT PAGE — Premium product title typography
========================================================= */

.product__title h1{
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-weight: 600;
}

/* spacing between title and price */
.product__title{
  margin-bottom: 10px;
}
/* =========================================================
   HERO — cinematic fade into next section
========================================================= */

#MainContent [id^="Banner-"]{
  position: relative;
}

#MainContent [id^="Banner-"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,1) 100%
  );

  pointer-events:none;
}
/* =========================================================
   HERO — cinematic fade (safe version)
========================================================= */

#MainContent [id^="Banner-"]{
  position: relative;
}

#MainContent [id^="Banner-"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:160px;

  pointer-events:none;
  z-index:2;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,1) 100%
  );
}
/* =========================================================
   HIDE CURRENCY CODE (GBP / USD / etc)
   Keep only the currency symbol (£)
========================================================= */

.price__currency{
  display:none !important;
}
/* =========================================================
   PRICES — hide currency code (GBP / USD / EUR)
   Works across Dawn variants + Markets
========================================================= */

/* Most common Dawn/Shopify markup */
.currency-code,
.price .currency-code,
.price-item .currency-code,
.money .currency-code,
.price__currency,
.price-item__currency{
  display: none !important;
  visibility: hidden !important;
}

/* Some themes append the code via pseudo-elements */
.price-item::after,
.price__regular .price-item::after,
.price__sale .price-item::after,
.money::after{
  content: "" !important;
  display: none !important;
}
/* Product price styling */
.price{
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* =========================================================
   HERO — cinematic slow zoom (luxury effect)
========================================================= */

#MainContent [id^="Banner-"] .banner__media img{
  transform: scale(1.08);
  transition: transform 6s ease-out;
  will-change: transform;
}

/* when page loads it slowly settles */
body.loaded #MainContent [id^="Banner-"] .banner__media img{
  transform: scale(1);
}
/* Collection card title polish */
.card__heading{
  letter-spacing: 0.03em;
  font-weight: 500;
}
/* =========================================================
   COLLECTIONS (MOBILE) — force 2-column product grid
   Paste at VERY END of ra-overrides.css
========================================================= */
@media (max-width: 749px){

  /* Dawn collection grid UL (most reliable target) */
  #MainContent #product-grid,
  #shopify-section-main-collection-product-grid #product-grid,
  #MainContent .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
  }

  /* Safety: if something forced list items to full width */
  #MainContent #product-grid > li,
  #shopify-section-main-collection-product-grid #product-grid > li{
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — fill the canvas (4 columns)
========================================================= */
@media (min-width: 990px){

  /* Let the collection section use a wider canvas */
  #shopify-section-main-collection-product-grid .page-width{
    max-width: 1400px !important;   /* tweak: 1280 / 1440 / 1520 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Force a 4-col product grid on desktop */
  #shopify-section-main-collection-product-grid ul.product-grid,
  #shopify-section-main-collection-product-grid .product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — FORCE 4 COLUMNS (Dawn flex grid)
========================================================= */
@media (min-width: 990px){

  /* Make sure the collection area is centered and has room */
  #ProductGridContainer .page-width,
  #shopify-section-main-collection-product-grid .page-width{
    max-width: 1400px !important;   /* try 1280 / 1400 / 1520 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Dawn controls columns via item widths (not grid-template-columns) */
  #ProductGridContainer .grid--3-col-desktop .grid__item,
  #ProductGridContainer .grid--2-col-desktop .grid__item,
  #ProductGridContainer .grid__item,
  #shopify-section-main-collection-product-grid .grid--3-col-desktop .grid__item,
  #shopify-section-main-collection-product-grid .grid__item{
    width: 25% !important;
    max-width: 25% !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — FORCE 4 COLUMNS (Dawn-proof)
========================================================= */
@media (min-width: 990px){

  /* Target the actual grid list used by Dawn on collection pages */
  #product-grid > .grid__item,
  .product-grid > .grid__item,
  #ProductGridContainer #product-grid > .grid__item,
  #shopify-section-main-collection-product-grid #product-grid > .grid__item{
    flex: 0 0 25% !important;     /* 4 columns */
    max-width: 25% !important;
    width: 25% !important;
  }
}
@media (min-width: 990px){
  /* Extra specificity override (beats Dawn's grid--3-col-desktop rules) */
  #shopify-section-main-collection-product-grid ul#product-grid.grid > li.grid__item{
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}
/* =========================================================
   COLLECTION GRID — FORCE 4 COLUMNS DESKTOP (Dawn)
========================================================= */
@media (min-width: 990px){
  /* Dawn collection grid list */
  #shopify-section-main-collection-product-grid #product-grid,
  #MainContent #product-grid,
  #product-grid{
    --grid-desktop-columns: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 990px){
  /* Beat Dawn's grid--3-col-desktop class */
  #product-grid.grid--3-col-desktop{
    --grid-desktop-columns: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION PAGE — remove right-side dead space (desktop)
   Your grid is already 4-col; container isn't wide enough.
========================================================= */
@media (min-width: 990px){
  /* Main page width wrapper in Dawn */
  #shopify-section-main-collection-product-grid .page-width,
  #shopify-section-main-collection-product-grid .collection.page-width,
  #shopify-section-main-collection-product-grid .collection-hero__inner.page-width{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Keep it looking premium (not edge-to-edge) */
  #shopify-section-main-collection-product-grid .page-width{
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* =========================================================
   COLLECTION GRID — FORCE 4 COLUMNS (desktop)
   (something is overriding Dawn’s grid--4-col-desktop)
========================================================= */
@media (min-width: 990px){
  #shopify-section-main-collection-product-grid ul#product-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* make sure items don’t have a forced width from old rules */
  #shopify-section-main-collection-product-grid ul#product-grid > .grid__item{
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================================
   COLLECTION GRID — HARD FORCE 4 COLS (desktop)
========================================================= */
@media (min-width: 990px){
  #MainContent ul#product-grid.grid--4-col-desktop{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #MainContent ul#product-grid.grid--4-col-desktop > li.grid__item{
    width: auto !important;
    max-width: none !important;
    flex: none !important; /* in case something turned it into flex items */
  }
}

/* Some themes override again at wider widths — lock it there too */
@media (min-width: 1200px){
  #MainContent ul#product-grid.grid--4-col-desktop{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION CARDS — keep zoom, reduce lift (premium)
========================================================= */
@media (hover:hover) and (pointer:fine){
  /* Stop the whole card jumping up */
  #shopify-section-main-collection-product-grid .card-wrapper,
  #MainContent #ProductGridContainer .card-wrapper{
    transform: none !important;
  }

  /* If your theme uses translateY on hover, neutralize it */
  #shopify-section-main-collection-product-grid .card-wrapper:hover,
  #MainContent #ProductGridContainer .card-wrapper:hover{
    transform: none !important;
  }

  /* Keep hover feel via shadow only (subtle) */
  #shopify-section-main-collection-product-grid .card,
  #MainContent #ProductGridContainer .card{
    transition: box-shadow 320ms ease !important;
  }

  #shopify-section-main-collection-product-grid .card-wrapper:hover .card,
  #MainContent #ProductGridContainer .card-wrapper:hover .card{
    box-shadow: 0 16px 42px rgba(0,0,0,.35) !important;
  }
}
.card__media img{
  transition: transform 0.6s ease;
}
/* =========================================================
   PRODUCT PAGE — subtle image hover zoom
========================================================= */

@media (hover:hover) and (pointer:fine){

  .product__media img{
    transition: transform 0.7s ease;
  }

  .product__media:hover img{
    transform: scale(1.08);
  }

}
/* =========================================================
   PRODUCT PAGE — smooth image switch
========================================================= */

.product__media img{
  transition: opacity 0.35s ease, transform 0.6s ease;
}

/* Prevent flicker during image change */
.product__media-item{
  transition: opacity 0.35s ease;
}
/* =========================================================
   PRODUCT PAGE — STICKY ADD TO CART (ON-BRAND)
========================================================= */

.ra-sticky-atc{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  transform: translateY(110%);
  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  opacity: 0;
}

  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  background: rgba(0,0,0,0.88);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ra-sticky-atc::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );

  opacity: .55;
}

.ra-sticky-atc.active{
  transform: translateY(0);
  opacity: 1;
}

.ra-sticky-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ra-sticky-product{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ra-sticky-thumb{
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  border-radius: 18px;
  overflow: hidden;

  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
}

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

.ra-sticky-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ra-sticky-title{
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64rem;
}

.ra-sticky-price{
  font-size: 1.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.01em;
}

.ra-sticky-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ra-sticky-variant{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;

  min-height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.05);

  font-size: 1.35rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ra-sticky-variant-dot{
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  flex: 0 0 0.9rem;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.ra-sticky-variant-text{
  display: inline-block;
}

.ra-sticky-variant-dot{
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  flex: 0 0 0.9rem;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.ra-sticky-variant-text{
  display: inline-block;
}

.ra-sticky-variant:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.ra-sticky-button{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
opacity: 0;
transform: translateY(10px) scale(0.96);
  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.ra-sticky-atc.active .ra-sticky-button{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .08s;
}
@media (hover:hover) and (pointer:fine){
  .ra-sticky-button:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.42);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.30),
      0 0 0 1px rgba(255,255,255,0.06) inset;
  }
}

.ra-sticky-button:focus,
.ra-sticky-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.28);
}

/* Mobile */
@media (max-width: 768px){

  .ra-sticky-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product product"
      "variant button";
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .ra-sticky-product{
    grid-area: product;
    min-width: 0;
    gap: 10px;
  }

  .ra-sticky-title{
    display: none;
  }

  .ra-sticky-price{
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .ra-sticky-thumb{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .ra-sticky-actions{
    display: contents;
  }

  .ra-sticky-variant{
    grid-area: variant;
    min-width: 0;
    max-width: 100%;
    font-size: 1.2rem;
    padding: 0 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ra-sticky-variant-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ra-sticky-button{
    grid-area: button;
    min-height: 42px;
    padding: 0 16px;
    font-size: 1.25rem;
    white-space: nowrap;
  }
}
.ra-sticky-price,
.ra-sticky-variant-text{
  transition: color .18s ease, transform .18s ease;
}

.ra-sticky-atc.active .ra-sticky-price{
  transform: translateY(-1px);
}
.ra-sticky-variant-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25),
    inset 0 0 4px rgba(0,0,0,0.25);

  flex-shrink: 0;
}
.ra-sticky-atc{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;

  transform: translateY(110%);
  opacity: 0;

  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  background: rgba(0,0,0,0.94);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 -6px 24px rgba(0,0,0,0.35),
    0 -1px 0 rgba(255,255,255,0.06);
}
/* Product recommendations – always 4 columns */

.product-recommendations .grid{
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

/* tighten spacing on very small screens */

@media screen and (max-width: 480px){
  .product-recommendations .grid{
    gap: 8px;
  }
}
/* PRODUCT RECOMMENDATIONS — force 4 columns on all screens */
product-recommendations ul.grid,
.product-recommendations ul.grid,
#product-recommendations ul.grid,
.shopify-section[id*="recommendations"] ul.grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* remove old flex widths from Dawn */
product-recommendations ul.grid > li.grid__item,
.product-recommendations ul.grid > li.grid__item,
#product-recommendations ul.grid > li.grid__item,
.shopify-section[id*="recommendations"] ul.grid > li.grid__item{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
/* COLLECTION / RECOMMENDATION CARDS — zoom only, no lift */
@media (hover:hover) and (pointer:fine){
  .product-card-wrapper,
  .product-card-wrapper .card,
  .card-wrapper,
  .card-wrapper .card{
    transform: none !important;
  }

  .product-card-wrapper:hover,
  .product-card-wrapper .card:hover,
  .card-wrapper:hover,
  .card-wrapper:hover .card{
    transform: none !important;
  }

  .product-card-wrapper:hover .card,
  .card-wrapper:hover .card{
    box-shadow: none !important;
  }

  .product-card-wrapper .card__media img,
  .card-wrapper .card__media img{
    transition: transform .6s ease !important;
  }

  .product-card-wrapper:hover .card__media img,
  .card-wrapper:hover .card__media img{
    transform: scale(1.06) !important;
  }
}
/* PRODUCT PAGE COLOUR SWATCHES */

.product-form__input input[type="radio"] + label .swatch,
.product-form__input .swatch,
.swatch-input__swatch{
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* base swatch */

.swatch-input__swatch{
  border: 2px solid rgba(255,255,255,0.55);

  box-shadow:
    0 0 0 2px rgba(0,0,0,0.75),
    inset 0 0 4px rgba(0,0,0,0.35);

  transition: all .18s ease;
}
/* selected swatch */

.product-form__input input[type="radio"]:checked + label .swatch,
.product-form__input input[type="radio"]:checked + label .swatch-input__swatch{
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.35),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* swatch interaction */

.swatch-input__swatch{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* hover */

.swatch-input__label:hover .swatch-input__swatch{
  transform: scale(1.08);
}

/* selected */

.swatch-input__input:checked + .swatch-input__label .swatch-input__swatch{
  transform: scale(1.15);
}
/* PRODUCT PAGE SWATCHES — subtle lift */

.swatch-input__label{
  display: inline-flex;
}

.swatch-input__swatch{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  transform: scale(1);
}

/* hover */
.swatch-input__label:hover .swatch-input__swatch,
.product-form__input label:hover .swatch-input__swatch,
.product-form__input label:hover .swatch{
  transform: scale(1.08);
}

/* selected */
.swatch-input__input:checked + .swatch-input__label .swatch-input__swatch,
.product-form__input input[type="radio"]:checked + label .swatch-input__swatch,
.product-form__input input[type="radio"]:checked + label .swatch{
  transform: scale(1.12);
}
/* STICKY BAR THUMBNAIL — remove square box on mobile */
.ra-sticky-thumb{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.ra-sticky-thumb img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  background: transparent !important;
}

@media (max-width: 768px){
  .ra-sticky-thumb{
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .ra-sticky-thumb img{
    border-radius: 16px !important;
  }
}
/* STICKY BAR COLOUR DOT — remove square background */
.ra-sticky-variant-dot{
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;

  border-radius: 999px !important;
  overflow: hidden !important;

  background-clip: padding-box !important;
  border: none !important;
  padding: 0 !important;
}

@media (max-width: 768px){
  .ra-sticky-variant-dot{
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border-radius: 999px !important;
  }
}
/* STICKY BAR COLOUR DOT INTERACTION */

.ra-sticky-variant-dot{
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

/* hover */

.ra-sticky-variant:hover .ra-sticky-variant-dot{
  transform: scale(1.15);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* Product title balance */
@media screen and (min-width: 990px) {
  .product__title h1 {
    font-size: 3.0rem;
    line-height: 1.15;
  }
}
/* Reduce top spacing above product */
.product {
  margin-top: 10px;
}

.product__title {
  margin-bottom: 10px;
}

/* Product trust lines */
.ra-product-trust{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  font-size: 1.2rem;   /* slightly smaller */
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}

.ra-product-trust span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;   /* prevents wrapping */
}
@media (max-width: 749px){

  .ra-product-trust{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ra-product-trust span{
    white-space: normal;
  }

}
/* Prevent visited links turning red */
a:visited{
  color: inherit !important;
}
:root{
  --ra-link-hover: rgba(255,255,255,0.96);
}

/* base links */
#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  color: inherit !important;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    color .22s ease,
    background-size .22s ease;
}

/* hover / focus */
#MainContent .card__heading a:hover,
#MainContent .card__heading a:focus-visible,
#MainContent .full-unstyled-link:hover,
#MainContent .full-unstyled-link:focus-visible,
#MainContent .link:hover,
#MainContent .link:focus-visible,
#MainContent .rte a:hover,
#MainContent .rte a:focus-visible{
  color: var(--ra-link-hover) !important;
  background-size: 100% 2px;
}

/* visited stays same */
#MainContent a:visited{
  color: inherit !important;
}
/* Always underline links in text content */
.rte a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Subtle premium link interaction */

#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  transition:
    color .22s ease,
    background-size .22s ease,
    transform .18s ease;
}

/* hover */
#MainContent .card__heading a:hover,
#MainContent .full-unstyled-link:hover,
#MainContent .link:hover,
#MainContent .rte a:hover{
  transform: translateY(-1px);
}
/* =========================================================
   COLLECTION DESCRIPTION — full width container
========================================================= */

#shopify-section-main-collection-banner .page-width,
#shopify-section-main-collection-banner .collection-hero__inner{
  max-width: 100% !important;
  width: 100% !important;
}

/* keep it readable */
#shopify-section-main-collection-banner .collection-hero__description{
  max-width: 900px;
}
/* =========================================================
   COLLECTION DESCRIPTION — widen text area
========================================================= */

#shopify-section-main-collection-banner .collection-hero__inner,
#shopify-section-main-collection-banner .collection-hero__text-wrapper,
#shopify-section-main-collection-banner .collection-hero__description,
#shopify-section-main-collection-banner .collection-hero__description.rte,
#shopify-section-main-collection-banner .page-width{
  max-width: 100% !important;
  width: 100% !important;
}

/* keep the text readable, but wider */
#shopify-section-main-collection-banner .collection-hero__description,
#shopify-section-main-collection-banner .collection-hero__description.rte{
  max-width: 1100px !important;
}
/* COLLECTION INTRO — widen text area above filters */
.template-collection .page-width{
  max-width: 100% !important;
}

.template-collection .collection.page-width,
.template-collection .collection-hero.page-width,
.template-collection .shopify-section .page-width{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* keep the intro text readable, but much wider */
.template-collection .rte,
.template-collection .collection-hero__description,
.template-collection .collection__description{
  max-width: 1100px !important;
}
/* COLLECTION INTRO — stronger fallback */
#MainContent .collection .rte,
#MainContent .collection-hero__description,
#MainContent .collection__description,
#MainContent .shopify-section .rte{
  max-width: 1100px !important;
}

#MainContent .collection.page-width,
#MainContent .shopify-section .page-width{
  max-width: 100% !important;
  width: 100% !important;
}
/* =========================================================
   COLLECTION INTRO — centered readable width
========================================================= */

.template-collection .rte{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
/* COLLECTION INTRO — center the text block */
#MainContent > .shopify-section .page-width > .rte,
#MainContent .page-width .rte{
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* COLLECTION DESCRIPTION — allow full width */
.template-collection .collection.page-width{
  max-width: 1400px !important;
}

/* widen the description text block */
.template-collection .collection .rte{
  max-width: 1200px !important;
}
.template-collection .collection .rte{
  max-width: 1080px !important;
  line-height: 1.6;
}
.template-collection .collection h1{
  margin-bottom: 24px;
}

.template-collection .collection .rte{
  margin-top: 8px;
}
/* COLLECTION TITLE SPACING */

.collection-hero__title{
  margin-bottom: 28px !important;
}

.collection-hero__description{
  margin-top: 8px !important;
  max-width: 1080px;
  line-height: 1.65;
}
/* COLLECTION HEADER SPACING — brute force */
body[class*="template-collection"] h1,
.template-collection h1,
.collection-hero h1,
.collection h1{
  margin-bottom: 32px !important;
}

body[class*="template-collection"] h1 + *,
.template-collection h1 + *,
.collection-hero h1 + *,
.collection h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — fallback */
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — brute force */
body[class*="template-collection"] h1,
.template-collection h1,
.collection-hero h1,
.collection h1{
  margin-bottom: 32px !important;
}

body[class*="template-collection"] h1 + *,
.template-collection h1 + *,
.collection-hero h1 + *,
.collection h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — fallback */
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 0 !important;
}
#MainContent h1 + *{
  margin-top: 8px !important;
}
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 8px !important;
}
/* COLLECTION HEADER — tighten title + intro spacing */
#MainContent .shopify-section:first-of-type{
  padding-bottom: 12px !important;
}

#MainContent .shopify-section:first-of-type .page-width{
  padding-bottom: 0 !important;
}

#MainContent .shopify-section:first-of-type .rte,
#MainContent .shopify-section:first-of-type .collection-hero__description{
  margin-top: 20px !important;
}
/* COLLECTION BANNER — tighten title/description spacing */
.collection-hero__text-wrapper{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collection-hero__title{
  margin: 0 !important;
}

.collection-hero__description{
  margin-top: 0 !important;
}
/* COLLECTION INTRO — editorial typography */

.collection-hero__description{
  max-width: 880px;        /* improves readability */
  line-height: 1.7;        /* nicer paragraph rhythm */
  font-size: 1.65rem;      /* subtle size improvement */
  color: rgba(255,255,255,0.82);
}
/* COLLECTION GRID — premium spacing */

#ProductGridContainer .grid{
  row-gap: 48px;
}

.product-card-wrapper .card__information{
  padding-top: 16px;
}

.product-card-wrapper .card__heading{
  margin-bottom: 6px;
}

.product-card-wrapper .price{
  margin-top: 4px;
}
.product-card-wrapper .card__media img{
  transition: transform .6s ease;
}

.product-card-wrapper:hover .card__media img{
  transform: scale(1.05);
}
/* HEADER NAVIGATION — premium polish */

.header__inline-menu a{
  letter-spacing: 0.06em;
  font-weight: 500;
  transition: color .18s ease;
}

.header__inline-menu a:hover{
  color: rgba(255,255,255,0.85);
}
.header__inline-menu .icon-caret{
  margin-left: 6px;
}

/* PRODUCT TRUST BLOCK — stronger definition */

.ra-product-trust{
  margin-top: 16px;
  padding: 14px 16px;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  border-radius: 12px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 6px 16px rgba(0,0,0,0.35);
}

@media (max-width: 749px){
  .ra-product-trust{
    flex-direction: column;
    gap: 6px;
  }
}
.ra-product-trust{
  margin-top: 16px;
  padding: 14px 18px;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  border-radius: 12px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.28);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.ra-product-trust span{
  color: rgba(255,255,255,0.92);
}

@media (max-width: 749px){
  .ra-product-trust{
    flex-direction: column;
    gap: 6px;
  }
}

/* ========================================
   QUANTITY SELECTOR — clean final version
======================================== */

quantity-input.quantity,
.product-form__input quantity-input.quantity,
.product-form__buttons quantity-input.quantity,
.quantity{
  display: flex !important;
  align-items: stretch !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* inner parts */
quantity-input.quantity .quantity__button,
quantity-input.quantity .quantity__input,
.product-form__input .quantity__button,
.product-form__input .quantity__input,
.product-form__buttons .quantity__button,
.product-form__buttons .quantity__input,
.quantity .quantity__button,
.quantity .quantity__input{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* subtle dividers only between sections */
quantity-input.quantity .quantity__button + .quantity__input,
quantity-input.quantity .quantity__input + .quantity__button,
.product-form__input .quantity__button + .quantity__input,
.product-form__input .quantity__input + .quantity__button,
.product-form__buttons .quantity__button + .quantity__input,
.product-form__buttons .quantity__input + .quantity__button,
.quantity .quantity__button + .quantity__input,
.quantity .quantity__input + .quantity__button{
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* hover */
quantity-input.quantity .quantity__button:hover,
.product-form__input .quantity__button:hover,
.product-form__buttons .quantity__button:hover,
.quantity .quantity__button:hover{
  background: rgba(255,255,255,0.04) !important;
}

/* stronger number */
quantity-input.quantity .quantity__input,
.product-form__input .quantity__input,
.product-form__buttons .quantity__input,
.quantity .quantity__input{
  font-weight: 600 !important;
  color: rgba(255,255,255,0.96) !important;
}
/* =========================================================
   RA OVERRIDES — v1.0
   Store: Revolution Ape
   Theme: Dawn
   File: assets/ra-overrides.css
   ---------------------------------------------------------
   v1.0 – Stable build (2026-03-05)

   Includes:
   • Hero CTA spacing + mobile pill button
   • Sticky header + announcement bar
   • Homepage collection tile zoom effect
   • Collection page dark product cards
   • Product page recommendations fix
   • Newsletter mobile pill + iOS focus fix
   • Swatch dots restored
========================================================= */


/* =========================================================
   1) HERO CTA SPACING (mobile + desktop)
========================================================= */
#MainContent [id^="Banner-"] .banner__box{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#MainContent [id^="Banner-"] .banner__buttons{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-top: 12px !important;
}

@media (max-width: 749px){
  #MainContent [id^="Banner-"] .banner__buttons{
    margin-top: 16px !important;
  }
}


/* =========================================================
   2) LINKS: prevent purple visited + keep your hover
========================================================= */
:root{
  --ra-link-hover:#c21f1f;
}

#MainContent a,
#MainContent a:visited{
  color: inherit;
}

#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  color: inherit !important;
}

#MainContent .card__heading a:hover,
#MainContent .full-unstyled-link:hover,
#MainContent .rte a:hover{
  color: var(--ra-link-hover) !important;
}


/* =========================================================
   3) ANNOUNCEMENT BAR + HEADER STACKING
========================================================= */
#shopify-section-announcement-bar,
.announcement-bar-section{
  position: sticky;
  top: 0;
  z-index: 40;
}

.shopify-section-group-header-group,
#shopify-section-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-wrapper{
  z-index: 50;
}


/* =========================================================
   4) HERO CTA — MOBILE PILL / GLASS (prevents square)
========================================================= */
@media (max-width: 749px){
  #MainContent [id^="Banner-"] .banner__buttons .button,
  #MainContent [id^="Banner-"] .banner__buttons a.button{
    border-radius: 999px !important;
    overflow: hidden !important;

    background: rgba(0,0,0,0.28) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    --color-button: 0,0,0 !important;
    --color-button-text: 255,255,255 !important;
  }

  /* Dawn draws shape on pseudo elements too */
  #MainContent [id^="Banner-"] .banner__buttons .button::before,
  #MainContent [id^="Banner-"] .banner__buttons .button::after{
    border-radius: 999px !important;
  }
}


/* =========================================================
   5) NEWSLETTER — MOBILE (single source of truth)
   - crisp "Email" (placeholder)
   - pill border always visible
   - no iOS green focus ring
   - circle submit button
========================================================= */
@media (max-width: 749px){

  .section-sections--16854343319670__newsletter_Lm6GUh-padding,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding *{
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Kill Dawn ring layers */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field::before,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field::after,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper::before,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper::after{
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
  }

  /* Put the pill border on the OUTER wrapper (most reliable in Dawn) */
.section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper{
  position: relative !important;  /* ADD THIS LINE */
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset !important;
  background: transparent !important;
  overflow: visible !important;
}

  /* Ensure the .field doesn’t fight it */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter__wrapper .field{
    position: relative !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Focus: slightly brighter border, still no green ring */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .newsletter-form__field-wrapper:focus-within{
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset !important;
  }

  /* Input: no ring, correct sizing */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:focus-visible{
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;

    padding-left: 16px !important;
    padding-right: 64px !important;
    line-height: 52px !important;
  }

  /* ✅ Make "Email" crisp: show placeholder */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input::placeholder{
    opacity: 0.75 !important;
  }

  /* Hide Dawn floating label (keeps accessibility) */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Autofill (iOS/Chrome) */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill:hover,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__input:-webkit-autofill:focus{
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 999999s ease-out 0s;
  }

  /* Circular submit button */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button{
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    background: rgba(255,255,255,0.08) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    z-index: 5 !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  button#Subscribe.newsletter-form__button.field__button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding button#Subscribe .svg-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
}

/* =========================================================
   6) FOOTER SPACING / DENSITY
========================================================= */
.footer{
  padding-top: 70px !important;
  padding-bottom: 50px !important;
}
.footer__blocks-wrapper{ gap: 40px !important; }
.footer a{ line-height: 1.9 !important; opacity: .75; }
.footer a:hover{ opacity: 1; }


/* =========================================================
   7) HOMEPAGE COLLECTION TILES — zoom only (no lift)
   FIX: keep Dawn structure, only zoom image + clip corners
========================================================= */
@media (hover:hover) and (pointer:fine){

  /* Clip the zoom inside the rounded tile */
  .collection-card-wrapper .card__media{
    border-radius:16px !important;
    overflow:hidden !important;
  }

  /* Ensure background layers don't show in corners */
  .collection-card-wrapper .card__media,
  .collection-card-wrapper .media{
    background:transparent !important;
  }

  /* Image zoom */
  .collection-card-wrapper .card__media img{
    transform:scale(1);
    transition:transform 520ms ease;
    will-change:transform;
  }

  .collection-card-wrapper:hover .card__media img{
    transform:scale(1.06);
  }

}
/* Fix: remove white card background behind zooming images */
.collection-card-wrapper .card,
.collection-card-wrapper .card__inner,
.collection-card-wrapper .media{
  background: transparent !important;
}

/* Ensure the rounded media clips the zoom */
.collection-card-wrapper .card__media{
  border-radius: 16px !important;
  overflow: hidden !important;
}


/* =========================================================
   8) COLLECTION PAGES — remove white panels (dark theme)
========================================================= */

body.template-collection .product-grid .card,
body.template-collection .product-grid .card__inner,
body.template-collection .product-grid .card__content,
body.template-collection .product-grid .card__information,
body.template-collection .product-grid .card__media,
body.template-collection .product-grid .media{
  background: transparent !important;
}

body.template-collection .product-grid .card__content{
  box-shadow: none !important;
}


/* =========================================================
   9) SWATCH DOTS — restore visibility + clickability
========================================================= */
.product-card-wrapper .ra-swatches,
.card-wrapper .ra-swatches{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
  position: relative;
  z-index: 50;
}
.product-card-wrapper .ra-swatch-link,
.card-wrapper .ra-swatch-link{
  display: inline-flex !important;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  position: relative;
  z-index: 51;
  pointer-events: auto;
  text-decoration: none !important;
}
.product-card-wrapper .ra-swatch,
.card-wrapper .ra-swatch{
  width: 100%;
  height: 100%;
  border-radius: 999px !important;
  display: block !important;
  background: var(--ra-swatch-color, rgba(255,255,255,.18)) !important;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events: none;
}
.product-card-wrapper .full-width-link,
.card-wrapper .full-width-link{ z-index: 1; }
.product-card-wrapper .card__content,
.card-wrapper .card__content{
  position: relative;
  z-index: 2;
}
/* =========================================================
   NEWSLETTER (MOBILE) — FINAL LOCK
   - kill green focus ring (Dawn vars + shadows)
   - make placeholder "Email" readable
   - keep pill border visible
========================================================= */
@media (max-width: 749px){

  .section-sections--16854343319670__newsletter_Lm6GUh-padding{
    --focused-base-outline-color: transparent !important;
    --inputs-border-color-focus: rgba(255,255,255,0.55) !important;
    --inputs-border-color-hover: rgba(255,255,255,0.35) !important;
  }

  /* Pill border ALWAYS */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
.newsletter-form__field-wrapper{
  position: relative !important;
  border-radius: 9999px !important;

  border: 1px solid rgba(255,255,255,0.35) !important;

  /* subtle glass edge */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 8px 20px rgba(0,0,0,0.25);

  outline: none !important;
}

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .newsletter-form__field-wrapper:focus-within{
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset !important;
    outline: none !important;
  }

  /* HARD kill any green ring/shadow coming from Dawn on focus */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .field,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  .field:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }

  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  input.field__input:focus,
  .section-sections--16854343319670__newsletter_Lm6GUh-padding
  input.field__input:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  /* Make "Email" readable (placeholder) */
.section-sections--16854343319670__newsletter_Lm6GUh-padding
input.field__input::placeholder{
  opacity: 1 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* iOS Safari placeholder sometimes needs this too */
.section-sections--16854343319670__newsletter_Lm6GUh-padding
input.field__input::-webkit-input-placeholder{
  opacity: 1 !important;
  color: rgba(255,255,255,0.85) !important;
}

  /* Hide floating label so it can't blur/fade the text */
  .section-sections--16854343319670__newsletter_Lm6GUh-padding .field__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
/* =========================================================
   COLLECTION PAGE — force product image areas to BLACK
   (Dawn media frame + placeholders are white by default)
========================================================= */
body.template-collection .product-grid .card__media,
body.template-collection .product-grid .card__media .media,
body.template-collection .product-grid .card__media .media::before,
body.template-collection .product-grid .card__media::before,
body.template-collection .product-grid .card__inner{
  background: #000 !important;
  background-color: #000 !important;
}

/* Keep info area dark too (if Dawn is painting it white) */
body.template-collection .product-grid .card__content,
body.template-collection .product-grid .card__information{
  background: #000 !important;
  background-color: #000 !important;
  box-shadow: none !important;
}
/* =========================================================
   FIX: remove white background from Dawn product images
========================================================= */

/* Image containers */
.card__media,
.card__media .media,
.product-grid .media{
  background: transparent !important;
}

/* Dawn's aspect-ratio placeholder layer */
.media::before,
.card__media::before{
  background: transparent !important;
}

/* Ensure collection product cards stay dark */
.product-grid .card,
.product-grid .card__inner{
  background: transparent !important;
}
/* =========================================================
   COLLECTION GRID TEXT — keep readable on black
   (and stop the red hover just for collection cards)
========================================================= */
body.template-collection .product-grid,
body.template-collection .product-grid .card__information,
body.template-collection .product-grid .card__content{
  color: rgba(255,255,255,0.92) !important;
}

/* Title + links: white, and keep white on hover (no red) */
body.template-collection .product-grid .card__heading a,
body.template-collection .product-grid .full-unstyled-link,
body.template-collection .product-grid a{
  color: rgba(255,255,255,0.92) !important;
}
body.template-collection .product-grid .card__heading a:hover,
body.template-collection .product-grid .full-unstyled-link:hover,
body.template-collection .product-grid a:hover{
  color: rgba(255,255,255,0.92) !important; /* override global red hover */
}

/* Price text (Dawn sometimes dims this separately) */
body.template-collection .product-grid .price,
body.template-collection .product-grid .price *{
  color: rgba(255,255,255,0.92) !important;
}
/* =========================================================
   COLLECTION PAGE — force readable text on dark background
   (and disable red hover inside product cards)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) Make the collection grid use white foreground vars */
body.template-collection #MainContent{
  --color-foreground: 255,255,255 !important;
}

/* 2) Force text + opacity inside product cards */
body.template-collection #MainContent .product-grid,
body.template-collection #MainContent .product-grid .card__information,
body.template-collection #MainContent .product-grid .card__content,
body.template-collection #MainContent .product-grid .card__information *,
body.template-collection #MainContent .product-grid .card__content *{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}

/* Titles/links: keep white always (no red hover) */
body.template-collection #MainContent .product-grid a,
body.template-collection #MainContent .product-grid a:visited{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}
body.template-collection #MainContent .product-grid a:hover{
  color: rgba(255,255,255,0.92) !important; /* kills the red hover */
}

/* Prices (Dawn sometimes styles these separately) */
body.template-collection #MainContent .product-grid .price,
body.template-collection #MainContent .product-grid .price *,
body.template-collection #MainContent .product-grid .price-item{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}
/* =========================================================
   COLLECTION GRID — force readable text + stop red hover
   (Your theme body has no template-collection class)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Target Dawn’s collection product grid section + fallback container */
#shopify-section-main-collection-product-grid,
#MainContent #ProductGridContainer{
  color: rgba(255,255,255,0.90) !important;
}

/* Ensure the info/text area is readable on black */
#shopify-section-main-collection-product-grid .card__information,
#shopify-section-main-collection-product-grid .card__content,
#MainContent #ProductGridContainer .card__information,
#MainContent #ProductGridContainer .card__content{
  color: rgba(255,255,255,0.90) !important;
}

/* Titles, prices, and meta text */
#shopify-section-main-collection-product-grid .card__heading,
#shopify-section-main-collection-product-grid .price,
#shopify-section-main-collection-product-grid .caption,
#shopify-section-main-collection-product-grid .card-information,
#MainContent #ProductGridContainer .card__heading,
#MainContent #ProductGridContainer .price,
#MainContent #ProductGridContainer .caption,
#MainContent #ProductGridContainer .card-information{
  color: rgba(255,255,255,0.90) !important;
}

/* Links: keep white (disable the global red hover on collection grid only) */
#shopify-section-main-collection-product-grid a,
#MainContent #ProductGridContainer a{
  color: rgba(255,255,255,0.90) !important;
}

#shopify-section-main-collection-product-grid a:hover,
#shopify-section-main-collection-product-grid a:focus,
#shopify-section-main-collection-product-grid a:active,
#MainContent #ProductGridContainer a:hover,
#MainContent #ProductGridContainer a:focus,
#MainContent #ProductGridContainer a:active{
  color: rgba(255,255,255,0.90) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Product recommendations)
   Fix: text blacked out on dark background
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Target the recommendations section wrapper(s) */
#product-recommendations,
.product-recommendations,
.shopify-section[id*="product-recommendations"]{
  background: #000 !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Force readable text inside the cards */
#product-recommendations .card__heading,
#product-recommendations .card__heading a,
#product-recommendations .card__information,
#product-recommendations .price,
#product-recommendations .price * ,
#product-recommendations .rte,
#product-recommendations .caption,
#product-recommendations .full-unstyled-link{
  color: rgba(255,255,255,0.92) !important;
}

/* Keep your hover style (red) */
#product-recommendations a:hover{
  color: var(--ra-link-hover) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Product recommendations)
   Fix: text looks blacked out + stop hover turning red
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Hit the recommendations section no matter what Dawn calls it */
#product-recommendations,
.product-recommendations,
.shopify-section[id*="product-recommendations"],
.shopify-section[id*="recommendations"]{
  /* Force a dark scheme with light text */
  --color-background: 0,0,0 !important;
  --gradient-background: rgb(0,0,0) !important;
  --color-foreground: 255,255,255 !important;
  --color-link: 255,255,255 !important;

  background: #000 !important;
  color: rgb(255,255,255) !important;

  /* In case something is dimming the whole section */
  opacity: 1 !important;
  filter: none !important;
}

/* Make sure inner wrappers/cards are not dimmed */
#product-recommendations *,
.product-recommendations *,
.shopify-section[id*="product-recommendations"] *{
  opacity: 1 !important;
  filter: none !important;
}

/* Force readable text inside the product cards */
#product-recommendations .card__heading,
#product-recommendations .card__heading a,
#product-recommendations .card__information,
#product-recommendations .price,
#product-recommendations .price *,
.product-recommendations .card__heading,
.product-recommendations .card__heading a,
.product-recommendations .card__information,
.product-recommendations .price,
.product-recommendations .price *{
  color: rgb(255,255,255) !important;
}

/* IMPORTANT: stop your global hover rule turning these links red */
#product-recommendations a:hover,
#product-recommendations .card__heading a:hover,
.product-recommendations a:hover,
.product-recommendations .card__heading a:hover{
  color: rgb(255,255,255) !important;
}
/* =========================================================
   PRODUCT PAGE — "YOU MAY ALSO LIKE" (Recommendations)
   Fix: text too dark + hover turning red
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Dawn usually renders this as <product-recommendations> inside a section */
product-recommendations,
.product-recommendations,
#product-recommendations,
.shopify-section[id*="product-recommendations"],
.shopify-section[id*="recommendations"]{
  /* Force light text */
  --color-foreground: 255,255,255 !important;
  --color-link: 255,255,255 !important;

  /* Also stop your global hover-red inside this block */
  --ra-link-hover: #ffffff !important;

  color: rgb(255,255,255) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* The “dim” in Dawn often comes from rgba(var(--color-foreground), 0.75) */
product-recommendations .card__information,
product-recommendations .card__information *,
product-recommendations .card__heading,
product-recommendations .card__heading a,
product-recommendations .price,
product-recommendations .price *,
.product-recommendations .card__information,
.product-recommendations .card__information *,
.product-recommendations .card__heading,
.product-recommendations .card__heading a,
.product-recommendations .price,
.product-recommendations .price *{
  color: rgb(255,255,255) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Kill the red hover just in recommendations */
product-recommendations a:hover,
product-recommendations .card__heading a:hover,
.product-recommendations a:hover,
.product-recommendations .card__heading a:hover{
  color: rgb(255,255,255) !important;
}
/* =========================================================
   FOOTER — Branded social icons (buttons)
   Paste at VERY END of ra-overrides.css
========================================================= */
:root{
  --ra-social-border: rgba(255,255,255,0.22);
  --ra-social-bg: rgba(255,255,255,0.06);
  --ra-social-icon: rgba(255,255,255,0.92);
  --ra-social-hover-bg: rgba(255,255,255,0.10);
  --ra-social-hover-border: rgba(255,255,255,0.35);

  /* Your brand hover color (already used in your file) */
  --ra-social-hover-icon: var(--ra-link-hover);
}

.footer .list-social{
  gap: 14px !important;
}

.footer .list-social__link{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: var(--ra-social-bg) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Make the SVGs inherit color properly */
.footer .list-social__link .icon{
  width: 20px !important;
  height: 20px !important;
  color: var(--ra-social-icon) !important;
}
.footer .list-social__link .icon path,
.footer .list-social__link .icon circle,
.footer .list-social__link .icon rect{
  fill: currentColor !important;
}

/* Hover/focus */
.footer .list-social__link:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.45) !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 6px 18px rgba(0,0,0,0.35),
    0 0 10px rgba(194,31,31,0.35);
}
.footer .list-social__link:hover .icon{
  color: var(--ra-link-hover) !important;
}

/* Keyboard focus (no ugly ring) */
.footer .list-social__link:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35) !important;
}
/* =========================================================
   FOOTER SOCIAL — Premium glass buttons
========================================================= */

.footer .list-social{
  display:flex;
  justify-content:center;
  gap:16px;

  margin-top:14px;
  margin-bottom:6px;
}

/* Button container */
.footer .list-social__link{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

/* icon colour */
.footer .list-social__link svg{
  width:20px;
  height:20px;
  color:rgba(255,255,255,0.9);
  transition:color .2s ease;
}

/* hover effect */
.footer .list-social__link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.45);
}

/* red accent on hover */
.footer .list-social__link:hover svg{
  color:var(--ra-link-hover);
}
/* =========================================================
   FOOTER LINKS — smooth underline animation
========================================================= */

.footer a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease;
}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium hover interaction
========================================================= */

@media (hover:hover) and (pointer:fine){

  /* smooth motion */
  .product-card-wrapper,
  .product-card-wrapper .card{
    transition: transform .35s cubic-bezier(.4,0,.2,1),
                box-shadow .35s cubic-bezier(.4,0,.2,1);
  }

  /* lift effect */
  .product-card-wrapper:hover{
    transform: translateY(-6px);
  }

  /* soft shadow for depth */
  .product-card-wrapper:hover .card{
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  }

  /* smoother image zoom */
  .product-card-wrapper .card__media img{
    transition: transform .6s cubic-bezier(.4,0,.2,1);
  }

  .product-card-wrapper:hover .card__media img{
    transform: scale(1.07);
  }

}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium spacing
========================================================= */

/* Space between image and text */
.product-card-wrapper .card__information{
  padding-top: 14px !important;
}

/* Product title styling */
.product-card-wrapper .card__heading{
  margin-bottom: 4px !important;
  letter-spacing: 0.02em;
}

/* Price spacing */
.product-card-wrapper .price{
  margin-top: 2px !important;
  opacity: 0.9;
}
/* =========================================================
   COLLECTION PRODUCT CARDS — premium spacing
========================================================= */

/* Space between image and text */
.product-card-wrapper .card__information{
  padding-top: 14px !important;
}

/* Product title styling */
.product-card-wrapper .card__heading{
  margin-bottom: 4px !important;
  letter-spacing: 0.02em;
}

/* Price spacing */
.product-card-wrapper .price{
  margin-top: 2px !important;
  opacity: 0.9;
}
/* =========================================================
   COLLECTION GRID — premium spacing
========================================================= */

/* Desktop grid spacing */
@media (min-width: 990px){

  #ProductGridContainer .grid{
    row-gap: 60px !important;
    column-gap: 28px !important;
  }

}

/* Tablet spacing */
@media (min-width: 750px) and (max-width: 989px){

  #ProductGridContainer .grid{
    row-gap: 48px !important;
    column-gap: 20px !important;
  }

}

/* Mobile spacing */
@media (max-width: 749px){

  #ProductGridContainer .grid{
    row-gap: 36px !important;
    column-gap: 14px !important;
  }

}
/* =========================================================
   PRODUCT — MOBILE STICKY ATC (CSS-only)
   Shows the product form stuck to bottom on scroll
   - Dawn already has a sticky product form container in many builds
   - This styles it into a "bar" feel
========================================================= */

@media (max-width: 749px){

  /* Target Dawn's product form area */
  .template-product .product-form,
  .template-product product-form{
    position: fixed !important;
left: 0 !important;
right: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;

    /* bar look */
    padding: 12px 16px !important;
    margin: 0 !important;

    background: rgba(0,0,0,0.92) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    border-top: 1px solid rgba(255,255,255,0.14) !important;
  }

  /* Keep the button full width + strong */
  .template-product .product-form__submit{
    width: 100% !important;
    border-radius: 999px !important;
  }

  /* Reduce extra spacing inside the form so it feels like a bar */
  .template-product .product-form__buttons{
    margin: 0 !important;
  }

  /* If there are payment buttons (Shop Pay etc.), keep them neat */
  .template-product .shopify-payment-button{
    margin-top: 8px !important;
  }
}
/* =========================================================
   HOMEPAGE — EXPLORE THE ARCHIVE CTA
========================================================= */

/* =========================================================
   HOMEPAGE — EXPLORE THE ARCHIVE CTA (safe selector)
   Fixes: small text + tile flicker
========================================================= */

/* Targets Dawn "Rich text" / "Image with text" style CTA links */
#MainContent .rich-text__wrapper a.link,
#MainContent .rich-text__wrapper a.link-with-icon,
#MainContent .rich-text__wrapper a.link.animate-arrow{
  font-size: 16px !important;          /* slightly bigger */
  letter-spacing: 0.14em !important;   /* more spaced */
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  opacity: 0.9;
  transition: opacity .25s ease, transform .25s ease;
}

#MainContent .rich-text__wrapper a.link:hover,
#MainContent .rich-text__wrapper a.link-with-icon:hover,
#MainContent .rich-text__wrapper a.link.animate-arrow:hover{
  opacity: 1;
  transform: translateY(-2px);
}
/* Hide header social icons */
.header .list-social{
  display:none !important;
}
/* =========================================================
   HEADER — remove social icons (keep footer social icons)
========================================================= */

/* Most common Dawn header locations */
#shopify-section-header .list-social,
#shopify-section-header .header__icons .list-social,
#shopify-section-header .header__icons .list-social__link,
#shopify-section-header .header__icon--social,
#shopify-section-header .header__icon--social + .list-social{
  display: none !important;
}

/* Some Dawn builds render them inside the header wrapper */
#shopify-section-header .header-wrapper .list-social{
  display: none !important;
}

/* If they’re inside the announcement/header group wrapper */
.shopify-section-group-header-group .list-social{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — premium image hover zoom
========================================================= */

@media (hover:hover) and (pointer:fine){

  .template-product .product__media img{
    transition: transform .7s cubic-bezier(.4,0,.2,1);
  }

  .template-product .product__media:hover img{
    transform: scale(1.04);
  }

}
/* =========================================================
   PRODUCT PAGE — subtle media hover zoom (Dawn compatible)
========================================================= */

@media (hover:hover) and (pointer:fine){

  .template-product .product-media-container{
    overflow: hidden;
  }

  .template-product .product-media-container img{
    transition: transform .8s cubic-bezier(.4,0,.2,1);
  }

  .template-product .product-media-container:hover img{
    transform: scale(1.03);
  }

}
/* =========================================================
   PRODUCT PAGE — Premium ATC + remove "Buy with Shop"
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) REMOVE the dynamic checkout button ("Buy with Shop"/"Buy it now") */
.template-product .shopify-payment-button,
.template-product .shopify-payment-button__button,
.template-product .shopify-payment-button__more-options{
  display: none !important;
}

/* 2) Make Add to cart feel more premium */
.template-product .product-form__submit{
  min-height: 52px !important;
  border-radius: 14px !important;

  /* keep your dark vibe */
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;

  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
  will-change: transform;
}

/* Hover = subtle lift + glow (premium) */
@media (hover:hover) and (pointer:fine){
  .template-product .product-form__submit:hover{
    transform: translateY(-1px) !important;
    border-color: rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
  }
}

/* Focus (keyboard) */
.template-product .product-form__submit:focus,
.template-product .product-form__submit:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35) !important;
}
/* =========================================================
   PRODUCT PAGE — keep Add to cart, remove "Buy with Shop"
   Paste at VERY END of ra-overrides.css
========================================================= */

/* 1) Always show the real Add to cart button */
.template-product .product-form__submit{
  display: flex !important;
}

/* 2) Hide ALL dynamic checkout wrappers (this is where Shop/Shop Pay renders) */
.template-product .shopify-payment-button,
.template-product .shopify-payment-button__button,
.template-product .shopify-payment-button__more-options{
  display: none !important;
}

/* 3) Extra safety: some themes output Shop button inside the payment container */
.template-product .shopify-payment-button button[aria-label*="Shop"],
.template-product .shopify-payment-button button[aria-label*="shop"]{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — REMOVE "BUY WITH SHOP" (accelerated checkout)
   Paste at VERY END of ra-overrides.css
========================================================= */

/* Hide accelerated checkout container (Shop / Shop Pay / Buy it now) */
.product__info-container .shopify-payment-button,
.product__info-container [data-shopify="payment-button"]{
  display: none !important;
}
/* =========================================================
   PRODUCT PAGE — Premium Add to Cart button
========================================================= */

.product-form__submit{
  min-height: 54px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.06) !important;

  letter-spacing: .08em;
  text-transform: uppercase;

  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* Hover effect */
@media (hover:hover) and (pointer:fine){

  .product-form__submit:hover{
    transform: translateY(-1px);

    border-color: rgba(255,255,255,0.65) !important;

    background: rgba(255,255,255,0.08) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.12) inset;
  }

}

/* Focus accessibility */
.product-form__submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,0.35);
}
/* =========================================================
   PRODUCT PAGE — Premium product title typography
========================================================= */

.product__title{
  letter-spacing: .02em;
  line-height: 1.25;
  font-weight: 600;
}

/* Slight breathing room above price */
.product__title + .price{
  margin-top: 10px;
}
/* =========================================================
   PRODUCT PAGE — Premium product title typography
========================================================= */

.product__title h1{
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-weight: 600;
}

/* spacing between title and price */
.product__title{
  margin-bottom: 10px;
}
/* =========================================================
   HERO — cinematic fade into next section
========================================================= */

#MainContent [id^="Banner-"]{
  position: relative;
}

#MainContent [id^="Banner-"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,1) 100%
  );

  pointer-events:none;
}
/* =========================================================
   HERO — cinematic fade (safe version)
========================================================= */

#MainContent [id^="Banner-"]{
  position: relative;
}

#MainContent [id^="Banner-"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:160px;

  pointer-events:none;
  z-index:2;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,1) 100%
  );
}
/* =========================================================
   HIDE CURRENCY CODE (GBP / USD / etc)
   Keep only the currency symbol (£)
========================================================= */

.price__currency{
  display:none !important;
}
/* =========================================================
   PRICES — hide currency code (GBP / USD / EUR)
   Works across Dawn variants + Markets
========================================================= */

/* Most common Dawn/Shopify markup */
.currency-code,
.price .currency-code,
.price-item .currency-code,
.money .currency-code,
.price__currency,
.price-item__currency{
  display: none !important;
  visibility: hidden !important;
}

/* Some themes append the code via pseudo-elements */
.price-item::after,
.price__regular .price-item::after,
.price__sale .price-item::after,
.money::after{
  content: "" !important;
  display: none !important;
}
/* Product price styling */
.price{
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* =========================================================
   HERO — cinematic slow zoom (luxury effect)
========================================================= */

#MainContent [id^="Banner-"] .banner__media img{
  transform: scale(1.08);
  transition: transform 6s ease-out;
  will-change: transform;
}

/* when page loads it slowly settles */
body.loaded #MainContent [id^="Banner-"] .banner__media img{
  transform: scale(1);
}
/* Collection card title polish */
.card__heading{
  letter-spacing: 0.03em;
  font-weight: 500;
}
/* =========================================================
   COLLECTIONS (MOBILE) — force 2-column product grid
   Paste at VERY END of ra-overrides.css
========================================================= */
@media (max-width: 749px){

  /* Dawn collection grid UL (most reliable target) */
  #MainContent #product-grid,
  #shopify-section-main-collection-product-grid #product-grid,
  #MainContent .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
  }

  /* Safety: if something forced list items to full width */
  #MainContent #product-grid > li,
  #shopify-section-main-collection-product-grid #product-grid > li{
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — fill the canvas (4 columns)
========================================================= */
@media (min-width: 990px){

  /* Let the collection section use a wider canvas */
  #shopify-section-main-collection-product-grid .page-width{
    max-width: 1400px !important;   /* tweak: 1280 / 1440 / 1520 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Force a 4-col product grid on desktop */
  #shopify-section-main-collection-product-grid ul.product-grid,
  #shopify-section-main-collection-product-grid .product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — FORCE 4 COLUMNS (Dawn flex grid)
========================================================= */
@media (min-width: 990px){

  /* Make sure the collection area is centered and has room */
  #ProductGridContainer .page-width,
  #shopify-section-main-collection-product-grid .page-width{
    max-width: 1400px !important;   /* try 1280 / 1400 / 1520 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Dawn controls columns via item widths (not grid-template-columns) */
  #ProductGridContainer .grid--3-col-desktop .grid__item,
  #ProductGridContainer .grid--2-col-desktop .grid__item,
  #ProductGridContainer .grid__item,
  #shopify-section-main-collection-product-grid .grid--3-col-desktop .grid__item,
  #shopify-section-main-collection-product-grid .grid__item{
    width: 25% !important;
    max-width: 25% !important;
  }
}
/* =========================================================
   COLLECTION GRID (DESKTOP) — FORCE 4 COLUMNS (Dawn-proof)
========================================================= */
@media (min-width: 990px){

  /* Target the actual grid list used by Dawn on collection pages */
  #product-grid > .grid__item,
  .product-grid > .grid__item,
  #ProductGridContainer #product-grid > .grid__item,
  #shopify-section-main-collection-product-grid #product-grid > .grid__item{
    flex: 0 0 25% !important;     /* 4 columns */
    max-width: 25% !important;
    width: 25% !important;
  }
}
@media (min-width: 990px){
  /* Extra specificity override (beats Dawn's grid--3-col-desktop rules) */
  #shopify-section-main-collection-product-grid ul#product-grid.grid > li.grid__item{
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}
/* =========================================================
   COLLECTION GRID — FORCE 4 COLUMNS DESKTOP (Dawn)
========================================================= */
@media (min-width: 990px){
  /* Dawn collection grid list */
  #shopify-section-main-collection-product-grid #product-grid,
  #MainContent #product-grid,
  #product-grid{
    --grid-desktop-columns: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 990px){
  /* Beat Dawn's grid--3-col-desktop class */
  #product-grid.grid--3-col-desktop{
    --grid-desktop-columns: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION PAGE — remove right-side dead space (desktop)
   Your grid is already 4-col; container isn't wide enough.
========================================================= */
@media (min-width: 990px){
  /* Main page width wrapper in Dawn */
  #shopify-section-main-collection-product-grid .page-width,
  #shopify-section-main-collection-product-grid .collection.page-width,
  #shopify-section-main-collection-product-grid .collection-hero__inner.page-width{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Keep it looking premium (not edge-to-edge) */
  #shopify-section-main-collection-product-grid .page-width{
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* =========================================================
   COLLECTION GRID — FORCE 4 COLUMNS (desktop)
   (something is overriding Dawn’s grid--4-col-desktop)
========================================================= */
@media (min-width: 990px){
  #shopify-section-main-collection-product-grid ul#product-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* make sure items don’t have a forced width from old rules */
  #shopify-section-main-collection-product-grid ul#product-grid > .grid__item{
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================================
   COLLECTION GRID — HARD FORCE 4 COLS (desktop)
========================================================= */
@media (min-width: 990px){
  #MainContent ul#product-grid.grid--4-col-desktop{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #MainContent ul#product-grid.grid--4-col-desktop > li.grid__item{
    width: auto !important;
    max-width: none !important;
    flex: none !important; /* in case something turned it into flex items */
  }
}

/* Some themes override again at wider widths — lock it there too */
@media (min-width: 1200px){
  #MainContent ul#product-grid.grid--4-col-desktop{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   COLLECTION CARDS — keep zoom, reduce lift (premium)
========================================================= */
@media (hover:hover) and (pointer:fine){
  /* Stop the whole card jumping up */
  #shopify-section-main-collection-product-grid .card-wrapper,
  #MainContent #ProductGridContainer .card-wrapper{
    transform: none !important;
  }

  /* If your theme uses translateY on hover, neutralize it */
  #shopify-section-main-collection-product-grid .card-wrapper:hover,
  #MainContent #ProductGridContainer .card-wrapper:hover{
    transform: none !important;
  }

  /* Keep hover feel via shadow only (subtle) */
  #shopify-section-main-collection-product-grid .card,
  #MainContent #ProductGridContainer .card{
    transition: box-shadow 320ms ease !important;
  }

  #shopify-section-main-collection-product-grid .card-wrapper:hover .card,
  #MainContent #ProductGridContainer .card-wrapper:hover .card{
    box-shadow: 0 16px 42px rgba(0,0,0,.35) !important;
  }
}
.card__media img{
  transition: transform 0.6s ease;
}
/* =========================================================
   PRODUCT PAGE — subtle image hover zoom
========================================================= */

@media (hover:hover) and (pointer:fine){

  .product__media img{
    transition: transform 0.7s ease;
  }

  .product__media:hover img{
    transform: scale(1.08);
  }

}
/* =========================================================
   PRODUCT PAGE — smooth image switch
========================================================= */

.product__media img{
  transition: opacity 0.35s ease, transform 0.6s ease;
}

/* Prevent flicker during image change */
.product__media-item{
  transition: opacity 0.35s ease;
}
/* =========================================================
   PRODUCT PAGE — STICKY ADD TO CART (ON-BRAND)
========================================================= */

.ra-sticky-atc{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  transform: translateY(110%);
  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  opacity: 0;
}

  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  background: rgba(0,0,0,0.88);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ra-sticky-atc::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );

  opacity: .55;
}

.ra-sticky-atc.active{
  transform: translateY(0);
  opacity: 1;
}

.ra-sticky-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ra-sticky-product{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ra-sticky-thumb{
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  border-radius: 18px;
  overflow: hidden;

  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
}

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

.ra-sticky-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ra-sticky-title{
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64rem;
}

.ra-sticky-price{
  font-size: 1.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.01em;
}

.ra-sticky-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ra-sticky-variant{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;

  min-height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.05);

  font-size: 1.35rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ra-sticky-variant-dot{
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  flex: 0 0 0.9rem;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.ra-sticky-variant-text{
  display: inline-block;
}

.ra-sticky-variant-dot{
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  flex: 0 0 0.9rem;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.ra-sticky-variant-text{
  display: inline-block;
}

.ra-sticky-variant:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.ra-sticky-button{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
opacity: 0;
transform: translateY(10px) scale(0.96);
  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.ra-sticky-atc.active .ra-sticky-button{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .08s;
}
@media (hover:hover) and (pointer:fine){
  .ra-sticky-button:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.42);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.30),
      0 0 0 1px rgba(255,255,255,0.06) inset;
  }
}

.ra-sticky-button:focus,
.ra-sticky-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.28);
}

/* Mobile */
@media (max-width: 768px){

  .ra-sticky-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product product"
      "variant button";
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .ra-sticky-product{
    grid-area: product;
    min-width: 0;
    gap: 10px;
  }

  .ra-sticky-title{
    display: none;
  }

  .ra-sticky-price{
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .ra-sticky-thumb{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .ra-sticky-actions{
    display: contents;
  }

  .ra-sticky-variant{
    grid-area: variant;
    min-width: 0;
    max-width: 100%;
    font-size: 1.2rem;
    padding: 0 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ra-sticky-variant-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ra-sticky-button{
    grid-area: button;
    min-height: 42px;
    padding: 0 16px;
    font-size: 1.25rem;
    white-space: nowrap;
  }
}
.ra-sticky-price,
.ra-sticky-variant-text{
  transition: color .18s ease, transform .18s ease;
}

.ra-sticky-atc.active .ra-sticky-price{
  transform: translateY(-1px);
}
.ra-sticky-variant-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25),
    inset 0 0 4px rgba(0,0,0,0.25);

  flex-shrink: 0;
}
.ra-sticky-atc{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;

  transform: translateY(110%);
  opacity: 0;

  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;

  background: rgba(0,0,0,0.94);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 -6px 24px rgba(0,0,0,0.35),
    0 -1px 0 rgba(255,255,255,0.06);
}
/* Product recommendations – always 4 columns */

.product-recommendations .grid{
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

/* tighten spacing on very small screens */

@media screen and (max-width: 480px){
  .product-recommendations .grid{
    gap: 8px;
  }
}
/* PRODUCT RECOMMENDATIONS — force 4 columns on all screens */
product-recommendations ul.grid,
.product-recommendations ul.grid,
#product-recommendations ul.grid,
.shopify-section[id*="recommendations"] ul.grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* remove old flex widths from Dawn */
product-recommendations ul.grid > li.grid__item,
.product-recommendations ul.grid > li.grid__item,
#product-recommendations ul.grid > li.grid__item,
.shopify-section[id*="recommendations"] ul.grid > li.grid__item{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
/* COLLECTION / RECOMMENDATION CARDS — zoom only, no lift */
@media (hover:hover) and (pointer:fine){
  .product-card-wrapper,
  .product-card-wrapper .card,
  .card-wrapper,
  .card-wrapper .card{
    transform: none !important;
  }

  .product-card-wrapper:hover,
  .product-card-wrapper .card:hover,
  .card-wrapper:hover,
  .card-wrapper:hover .card{
    transform: none !important;
  }

  .product-card-wrapper:hover .card,
  .card-wrapper:hover .card{
    box-shadow: none !important;
  }

  .product-card-wrapper .card__media img,
  .card-wrapper .card__media img{
    transition: transform .6s ease !important;
  }

  .product-card-wrapper:hover .card__media img,
  .card-wrapper:hover .card__media img{
    transform: scale(1.06) !important;
  }
}
/* PRODUCT PAGE COLOUR SWATCHES */

.product-form__input input[type="radio"] + label .swatch,
.product-form__input .swatch,
.swatch-input__swatch{
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* base swatch */

.swatch-input__swatch{
  border: 2px solid rgba(255,255,255,0.55);

  box-shadow:
    0 0 0 2px rgba(0,0,0,0.75),
    inset 0 0 4px rgba(0,0,0,0.35);

  transition: all .18s ease;
}
/* selected swatch */

.product-form__input input[type="radio"]:checked + label .swatch,
.product-form__input input[type="radio"]:checked + label .swatch-input__swatch{
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.35),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* swatch interaction */

.swatch-input__swatch{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* hover */

.swatch-input__label:hover .swatch-input__swatch{
  transform: scale(1.08);
}

/* selected */

.swatch-input__input:checked + .swatch-input__label .swatch-input__swatch{
  transform: scale(1.15);
}
/* PRODUCT PAGE SWATCHES — subtle lift */

.swatch-input__label{
  display: inline-flex;
}

.swatch-input__swatch{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  transform: scale(1);
}

/* hover */
.swatch-input__label:hover .swatch-input__swatch,
.product-form__input label:hover .swatch-input__swatch,
.product-form__input label:hover .swatch{
  transform: scale(1.08);
}

/* selected */
.swatch-input__input:checked + .swatch-input__label .swatch-input__swatch,
.product-form__input input[type="radio"]:checked + label .swatch-input__swatch,
.product-form__input input[type="radio"]:checked + label .swatch{
  transform: scale(1.12);
}
/* STICKY BAR THUMBNAIL — remove square box on mobile */
.ra-sticky-thumb{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.ra-sticky-thumb img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  background: transparent !important;
}

@media (max-width: 768px){
  .ra-sticky-thumb{
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .ra-sticky-thumb img{
    border-radius: 16px !important;
  }
}
/* STICKY BAR COLOUR DOT — remove square background */
.ra-sticky-variant-dot{
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;

  border-radius: 999px !important;
  overflow: hidden !important;

  background-clip: padding-box !important;
  border: none !important;
  padding: 0 !important;
}

@media (max-width: 768px){
  .ra-sticky-variant-dot{
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border-radius: 999px !important;
  }
}
/* STICKY BAR COLOUR DOT INTERACTION */

.ra-sticky-variant-dot{
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

/* hover */

.ra-sticky-variant:hover .ra-sticky-variant-dot{
  transform: scale(1.15);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    inset 0 0 4px rgba(0,0,0,0.35);
}
/* Product title balance */
@media screen and (min-width: 990px) {
  .product__title h1 {
    font-size: 3.0rem;
    line-height: 1.15;
  }
}
/* Reduce top spacing above product */
.product {
  margin-top: 10px;
}

.product__title {
  margin-bottom: 10px;
}

/* Product trust lines */
.ra-product-trust{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  font-size: 1.2rem;   /* slightly smaller */
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}

.ra-product-trust span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;   /* prevents wrapping */
}
@media (max-width: 749px){

  .ra-product-trust{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ra-product-trust span{
    white-space: normal;
  }

}
/* Prevent visited links turning red */
a:visited{
  color: inherit !important;
}
:root{
  --ra-link-hover: rgba(255,255,255,0.96);
}

/* base links */
#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  color: inherit !important;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    color .22s ease,
    background-size .22s ease;
}

/* hover / focus */
#MainContent .card__heading a:hover,
#MainContent .card__heading a:focus-visible,
#MainContent .full-unstyled-link:hover,
#MainContent .full-unstyled-link:focus-visible,
#MainContent .link:hover,
#MainContent .link:focus-visible,
#MainContent .rte a:hover,
#MainContent .rte a:focus-visible{
  color: var(--ra-link-hover) !important;
  background-size: 100% 2px;
}

/* visited stays same */
#MainContent a:visited{
  color: inherit !important;
}
/* Always underline links in text content */
.rte a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Subtle premium link interaction */

#MainContent .card__heading a,
#MainContent .full-unstyled-link,
#MainContent .link,
#MainContent .rte a{
  transition:
    color .22s ease,
    background-size .22s ease,
    transform .18s ease;
}

/* hover */
#MainContent .card__heading a:hover,
#MainContent .full-unstyled-link:hover,
#MainContent .link:hover,
#MainContent .rte a:hover{
  transform: translateY(-1px);
}
/* =========================================================
   COLLECTION DESCRIPTION — full width container
========================================================= */

#shopify-section-main-collection-banner .page-width,
#shopify-section-main-collection-banner .collection-hero__inner{
  max-width: 100% !important;
  width: 100% !important;
}

/* keep it readable */
#shopify-section-main-collection-banner .collection-hero__description{
  max-width: 900px;
}
/* =========================================================
   COLLECTION DESCRIPTION — widen text area
========================================================= */

#shopify-section-main-collection-banner .collection-hero__inner,
#shopify-section-main-collection-banner .collection-hero__text-wrapper,
#shopify-section-main-collection-banner .collection-hero__description,
#shopify-section-main-collection-banner .collection-hero__description.rte,
#shopify-section-main-collection-banner .page-width{
  max-width: 100% !important;
  width: 100% !important;
}

/* keep the text readable, but wider */
#shopify-section-main-collection-banner .collection-hero__description,
#shopify-section-main-collection-banner .collection-hero__description.rte{
  max-width: 1100px !important;
}
/* COLLECTION INTRO — widen text area above filters */
.template-collection .page-width{
  max-width: 100% !important;
}

.template-collection .collection.page-width,
.template-collection .collection-hero.page-width,
.template-collection .shopify-section .page-width{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* keep the intro text readable, but much wider */
.template-collection .rte,
.template-collection .collection-hero__description,
.template-collection .collection__description{
  max-width: 1100px !important;
}
/* COLLECTION INTRO — stronger fallback */
#MainContent .collection .rte,
#MainContent .collection-hero__description,
#MainContent .collection__description,
#MainContent .shopify-section .rte{
  max-width: 1100px !important;
}

#MainContent .collection.page-width,
#MainContent .shopify-section .page-width{
  max-width: 100% !important;
  width: 100% !important;
}
/* =========================================================
   COLLECTION INTRO — centered readable width
========================================================= */

.template-collection .rte{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
/* COLLECTION INTRO — center the text block */
#MainContent > .shopify-section .page-width > .rte,
#MainContent .page-width .rte{
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* COLLECTION DESCRIPTION — allow full width */
.template-collection .collection.page-width{
  max-width: 1400px !important;
}

/* widen the description text block */
.template-collection .collection .rte{
  max-width: 1200px !important;
}
.template-collection .collection .rte{
  max-width: 1080px !important;
  line-height: 1.6;
}
.template-collection .collection h1{
  margin-bottom: 24px;
}

.template-collection .collection .rte{
  margin-top: 8px;
}
/* COLLECTION TITLE SPACING */

.collection-hero__title{
  margin-bottom: 28px !important;
}

.collection-hero__description{
  margin-top: 8px !important;
  max-width: 1080px;
  line-height: 1.65;
}
/* COLLECTION HEADER SPACING — brute force */
body[class*="template-collection"] h1,
.template-collection h1,
.collection-hero h1,
.collection h1{
  margin-bottom: 32px !important;
}

body[class*="template-collection"] h1 + *,
.template-collection h1 + *,
.collection-hero h1 + *,
.collection h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — fallback */
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — brute force */
body[class*="template-collection"] h1,
.template-collection h1,
.collection-hero h1,
.collection h1{
  margin-bottom: 32px !important;
}

body[class*="template-collection"] h1 + *,
.template-collection h1 + *,
.collection-hero h1 + *,
.collection h1 + *{
  margin-top: 0 !important;
}
/* COLLECTION HEADER SPACING — fallback */
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 0 !important;
}
#MainContent h1 + *{
  margin-top: 8px !important;
}
#MainContent h1{
  margin-bottom: 32px !important;
}

#MainContent h1 + *{
  margin-top: 8px !important;
}
/* COLLECTION HEADER — tighten title + intro spacing */
#MainContent .shopify-section:first-of-type{
  padding-bottom: 12px !important;
}

#MainContent .shopify-section:first-of-type .page-width{
  padding-bottom: 0 !important;
}

#MainContent .shopify-section:first-of-type .rte,
#MainContent .shopify-section:first-of-type .collection-hero__description{
  margin-top: 20px !important;
}
/* COLLECTION BANNER — tighten title/description spacing */
.collection-hero__text-wrapper{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collection-hero__title{
  margin: 0 !important;
}

.collection-hero__description{
  margin-top: 0 !important;
}
/* COLLECTION INTRO — editorial typography */

.collection-hero__description{
  max-width: 880px;        /* improves readability */
  line-height: 1.7;        /* nicer paragraph rhythm */
  font-size: 1.65rem;      /* subtle size improvement */
  color: rgba(255,255,255,0.82);
}
/* COLLECTION GRID — premium spacing */

#ProductGridContainer .grid{
  row-gap: 48px;
}

.product-card-wrapper .card__information{
  padding-top: 16px;
}

.product-card-wrapper .card__heading{
  margin-bottom: 6px;
}

.product-card-wrapper .price{
  margin-top: 4px;
}
.product-card-wrapper .card__media img{
  transition: transform .6s ease;
}

.product-card-wrapper:hover .card__media img{
  transform: scale(1.05);
}
/* HEADER NAVIGATION — premium polish */

.header__inline-menu a{
  letter-spacing: 0.06em;
  font-weight: 500;
  transition: color .18s ease;
}

.header__inline-menu a:hover{
  color: rgba(255,255,255,0.85);
}
.header__inline-menu .icon-caret{
  margin-left: 6px;
}

/* PRODUCT TRUST BLOCK — stronger definition */

.ra-product-trust{
  margin-top: 16px;
  padding: 14px 16px;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  border-radius: 12px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 6px 16px rgba(0,0,0,0.35);
}

@media (max-width: 749px){
  .ra-product-trust{
    flex-direction: column;
    gap: 6px;
  }
}
.ra-product-trust{
  margin-top: 16px;
  padding: 14px 18px;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  border-radius: 12px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.28);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.ra-product-trust span{
  color: rgba(255,255,255,0.92);
}

@media (max-width: 749px){
  .ra-product-trust{
    flex-direction: column;
    gap: 6px;
  }
}

/* ========================================
   QUANTITY SELECTOR — clean final version
======================================== */

quantity-input.quantity,
.product-form__input quantity-input.quantity,
.product-form__buttons quantity-input.quantity,
.quantity{
  display: flex !important;
  align-items: stretch !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* inner parts */
quantity-input.quantity .quantity__button,
quantity-input.quantity .quantity__input,
.product-form__input .quantity__button,
.product-form__input .quantity__input,
.product-form__buttons .quantity__button,
.product-form__buttons .quantity__input,
.quantity .quantity__button,
.quantity .quantity__input{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* subtle dividers only between sections */
quantity-input.quantity .quantity__button + .quantity__input,
quantity-input.quantity .quantity__input + .quantity__button,
.product-form__input .quantity__button + .quantity__input,
.product-form__input .quantity__input + .quantity__button,
.product-form__buttons .quantity__button + .quantity__input,
.product-form__buttons .quantity__input + .quantity__button,
.quantity .quantity__button + .quantity__input,
.quantity .quantity__input + .quantity__button{
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* hover */
quantity-input.quantity .quantity__button:hover,
.product-form__input .quantity__button:hover,
.product-form__buttons .quantity__button:hover,
.quantity .quantity__button:hover{
  background: rgba(255,255,255,0.04) !important;
}

/* stronger number */
quantity-input.quantity .quantity__input,
.product-form__input .quantity__input,
.product-form__buttons .quantity__input,
.quantity .quantity__input{
  font-weight: 600 !important;
  color: rgba(255,255,255,0.96) !important;
}
/* FIX PURCHASE BLOCK SHAPES */

/* Quantity corners */
.product__info-container .quantity{
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Add to cart pill */
.product__info-container .product-form__submit{
  border-radius: 999px !important;
}

/* Remove square wrapper border Dawn adds */
.product-form__buttons{
  border: none !important;
  background: transparent !important;
}
/* FINAL PURCHASE BLOCK SHAPE FIX */

/* Quantity */
.product__info-container quantity-input.quantity,
.product__info-container .quantity {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

/* Add to cart button */
.product__info-container .product-form__submit,
.product__info-container .product-form__submit.button {
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Kill Dawn outer border/wrapper */
.product__info-container .product-form__buttons,
.product__info-container .product-form,
.product__info-container .button,
.product__info-container .product-form__submit::before,
.product__info-container .product-form__submit::after,
.product__info-container .product-form__submit.button::before,
.product__info-container .product-form__submit.button::after {
  box-shadow: none !important;
}

.product__info-container .product-form__buttons {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.product__info-container .product-form__submit,
.product__info-container .product-form__submit.button {
  border: 1px solid rgba(255,255,255,0.18) !important;
}
/* FINAL PURCHASE BLOCK TWEAK */

/* Quantity */
.product__info-container quantity-input.quantity,
.product__info-container .quantity {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.04) !important;
}

.product__info-container .quantity__button,
.product__info-container .quantity__input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Add to cart */
.product__info-container .product-form__submit,
.product__info-container .product-form__submit.button {
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}
/* QUANTITY FINAL FIX */

.product__info-container .quantity{
  height: 44px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.product__info-container .quantity__button{
  height: 44px !important;
  width: 44px !important;
}

.product__info-container .quantity__input{
  height: 44px !important;
}
/* QUANTITY — HARD FINAL FIX */

.product__info-container quantity-input.quantity,
.product__info-container .quantity {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  outline: none !important;
}

.product__info-container quantity-input.quantity::before,
.product__info-container quantity-input.quantity::after,
.product__info-container .quantity::before,
.product__info-container .quantity::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.product__info-container .quantity__button {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product__info-container .quantity__button:first-child {
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}

.product__info-container .quantity__button:last-child {
  border-left: 1px solid rgba(255,255,255,0.12) !important;
}

.product__info-container .quantity__input {
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* FINAL POLISH */

.product__info-container .quantity,
.product__info-container quantity-input.quantity {
  min-width: 200px !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.05) !important;
}

.product__info-container .quantity__button {
  color: rgba(255,255,255,0.92) !important;
}

.product__info-container .quantity__input {
  color: #fff !important;
  font-weight: 600 !important;
}
/* PRODUCT THUMBNAIL HOVER IMPROVEMENT */

.product__media-list .thumbnail:hover {
  opacity: 1 !important;
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.35);
}

.product__media-list .thumbnail {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* FIX THUMBNAIL HOVER */

.product__media-item img {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.product__media-item:hover img {
  opacity: 1 !important;
  transform: scale(1.05);
}
/* THUMBNAIL HOVER – PREMIUM */

.thumbnail img,
.thumbnail-list__item img{
  transition: transform .25s ease, filter .25s ease;
}

.thumbnail:hover img,
.thumbnail-list__item:hover img{
  transform: scale(1.05);
  filter: brightness(1.12);
}
/* THUMBNAIL HOVER — STOP DARKENING */

.thumbnail,
.thumbnail img,
.thumbnail-list__item,
.thumbnail-list__item img {
  opacity: 1 !important;
  filter: none !important;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease !important;
}

.thumbnail:hover,
.thumbnail:hover img,
.thumbnail-list__item:hover,
.thumbnail-list__item:hover img {
  opacity: 1 !important;
  filter: brightness(1.12) !important;
}

.thumbnail:hover img,
.thumbnail-list__item:hover img {
  transform: scale(1.05) !important;
}
/* ACTIVE PRODUCT THUMBNAIL */

.thumbnail[aria-current="true"] img,
.thumbnail-list__item.is-active img{
  filter: brightness(1.15);
}

.thumbnail[aria-current="true"],
.thumbnail-list__item.is-active{
  border: 1.5px solid rgba(255,255,255,0.45);
}
/* MAIN PRODUCT IMAGE – PREMIUM HOVER */

.product__media img{
  transition: transform 0.45s ease;
}

.product__media:hover img{
  transform: scale(1.04);
}
/* PREMIUM BUTTON LIGHT SWEEP */

.product-form__submit{
  position: relative;
  overflow: hidden;
}

.product-form__submit::after{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.10),
    transparent
  );
  transition: left 0.6s ease;
}

.product-form__submit:hover::after{
  left: 120%;
}
/* PRODUCT PAGE — EDITORIAL SPACING */

.product__info-container > * + * {
  margin-top: 1.8rem !important;
}

.product__info-container .product-form,
.product__info-container .product__description,
.product__info-container .ra-product-icons,
.product__info-container .size-guide,
.product__info-container .product__accordion {
  margin-top: 2.4rem !important;
}

.product__info-container h1,
.product__info-container .product__title {
  margin-bottom: 1.2rem !important;
}

.product__info-container .price {
  margin-bottom: 1.6rem !important;
}
/* FREE SHIPPING BOOSTER — THEME MATCH */

.eos-bar-container,
[class*="free-shipping"] .eos-bar-container {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  color: #fff !important;
  box-shadow: none !important;
}

.eos-bar-container * {
  color: #fff !important;
}

.eos-progress-bar {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
}

.eos-progress-bar-fill {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
}

.eos-bar-container p,
.eos-bar-container span,
.eos-bar-container div {
  color: #fff !important;
}
/* FREE SHIPPING BAR — DARK THEME MATCH */

.free_shipping_card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 2rem 2.2rem !important;
}

.free_shipping_card_title_cmmjb98r0006mgnvk2h88liey {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 1.6rem !important;
}

.free_shipping_card_progress_cmmjb98r0006mgnvk2h88liey {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  height: 10px !important;
  overflow: hidden !important;
}

.free_shipping_card_progress_bar_cmmjb98r0006mgnvk2h88liey {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  min-width: 10px;
}
/* FREE SHIPPING BAR — STRONGER FILL */

.free_shipping_card [class*="free_shipping_card_progress"] {
  background: rgba(255, 255, 255, 0.14) !important;
}

.free_shipping_card [class*="free_shipping_card_progress_bar"] {
  background: #ffffff !important;
  min-width: 18px !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.18) !important;
}
.bundle-offer{
  margin-top: 1.1rem;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
}
.bundle-offer{
  margin-top: 1.2rem;
  margin-bottom: .2rem;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
}
/* PRODUCT THUMBNAIL POLISH */

.thumbnail-list__item button {
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.thumbnail-list__item button:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* active thumbnail */

.thumbnail-list__item[aria-current="true"] button {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(255,255,255,0.25);
  border-radius: 6px;
}
/* MAIN PRODUCT IMAGE HOVER EFFECT */

.product__media img {
  transition: transform .5s ease;
}

.product__media:hover img {
  transform: scale(1.04);
}
.product__media img {
  transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

.product__media:hover img {
  transform: scale(1.05);
}
/* PREMIUM ADD TO CART HOVER */

.product-form__submit {
  transition: all .25s ease;
}

.product-form__submit:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.08) !important;
}

.product-form__submit:active {
  transform: translateY(0);
}
/* CART MUG UPSELL */

.cart-upsell{
  margin: 18px 0 22px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  text-align:center;
}

.cart-upsell__title{
  margin:0 0 10px;
  font-size:1.35rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.9);
}

.cart-upsell__button{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  text-decoration:none;
  font-size:1.25rem;
  transition:all .2s ease;
}

.cart-upsell__button:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.6);
}
.ra-cart-shipping-note {
  margin: 1.2rem 0 1rem;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}