/** Shopify CDN: Minification failed

Line 357:0 Unexpected "{"
Line 1324:0 Unexpected "}"

**/
/* High Level Shirts — Core Styles (scaffold) */
:root {
  --hls-accent: #16a34a; /* emerald */
  --hls-shadow: rgba(22, 163, 74, 0.35);
}

/* optional visual aid for debugging hook targets */
[data-hls-debug="true"] { outline: 1px dashed rgba(0,0,0,.2); }



/* === HLS — Featured Collection spacing + subtitle (scoped) === */
.hl-section .hl-featured-subtitle{
  display: block;
  text-align: center;
  font-weight: 700;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.35;
  color: rgb(0, 0, 0);
  opacity: 1;
}

.hl-section .section-header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hl-section .section-header > *:not(:last-child){
  margin-bottom: 0 !important;
}

.hl-section .section-header .hl-home-heading{
  margin-bottom: 5px !important; /* tweak 0–12px to taste */
}

.hl-section .section-stack{
  row-gap: 6px !important;
  gap: 6px !important;
}

.hl-section .section-header + .hl-featured-subtitle{
  margin-top: 0 !important;
  margin-bottom: 50px;
}

/* Mobile compaction for this section only */
@media (max-width: 700px){
  .hl-section .section{
    padding-top: 2px !important;
  }
  .hl-section .section-stack{
    row-gap: 4px !important;
    gap: 6px !important;
  }
  .hl-section .section-header{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .hl-section .section-header .hl-home-heading{
    margin-bottom: 0 !important;
    line-height: 1.15;
  }
  .hl-section .section-header + .hl-featured-subtitle{
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }
  .hl-section .hl-featured-subtitle{
    font-size: clamp(18px, 4.8vw, 24px) !important;
    padding-bottom: 6px !important;
  }
}


/* HLS — center Featured Collection header */
.hl-section .section-header{
  text-align: center;              /* centers text inside the header */
}

.hl-section .section-header h2,
.hl-section .section-header .h2,
.hl-section .section-header .prose{
  margin-left: auto;               /* ensure block elements center */
  margin-right: auto;
}

.hl-section .section-header .section-header__actions,
.hl-section .section-header .section-actions{
  justify-content: center;         /* if actions are flexed, center them */
}


/* HLS — normalize Impact grid header to 1 column and center (scoped) */
.hl-section .section-header{
  /* keep whatever display it uses, but make it a single centered column */
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

/* Ensure children center themselves within the grid cell */
.hl-section .section-header > *{
  justify-self: center !important;
}

/* If the header snippet still renders an actions area, collapse it */
.hl-section .section-header .section-header__actions,
.hl-section .section-header .section-actions{
  display: none !important;
}











/* ==== HLS FRESH CSS (imported) ============================================
   Source: fresh-css.txt (sanitized: replaced ,h1-faq → .hl-faq)
   NOTE: Several rules are global (use of !important, element/class overrides).
   Keep this in Workbench until we finish QA.
=========================================================================== */

.line-through {
  text-decoration: line-through;
}

.break-all {
  overflow-wrap: anywhere;
}

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .drawer--lg {
    width: 100% !important;
    height: 85% !important;
  }
}

.centervibe {
  margin: auto;
}
/* FAST SOLUTIONS */
/* Title */
h1.product-info__title.h3 {
  display: none !important;
}
/*Shop Pay --> Description */
.product-info__vendor,
.product-info__title,
.product-info__sku,
.product-info__rating,
.product-info__payment-terms {
  display: none !important;
}
/* hr */
.product-info__separator {
  display: none !important;
}
/* Shop Pay --> Button */
.BUz42FHpSPncCPJ4Pr_f {
  display: none !important;
}
/* payment options link */
.kqsiVA9Jf8LJAbxw8Bau {
  display: none !important;
}
/* ADD TO CART --> BUTTON */
.button.button--xl.button--secondary {
  font-weight: bold;
  text-transform: uppercase;
  color: black;
}
/* add to cart float */
product-quick-add {
  display: none;
}
button[form="product-form-7943624458285-template--16666192052269__main"] {
  display: none;
}
/* shop pay */
div[data-shopify="payment-button"] {
  display: none;
}
.block-swatch:before {
  box-shadow: 0px 0px 0px 4px #E64249;
}
label.block-swatch {
  border-radius: 0px;
  padding: 0px;
}
.color-swatch:before {
  inset: 0px !important;
  box-shadow: 0 0 0 4px #E64249;
}
.variant-picker__option-info .text-subdued {
  color: black;
}
.variant-picker__option-info {
  font-weight: 600;
}
.product-info price-list.price-list.price-list--lg {
  font-size: 32px !important;
  font-weight: bold;
}
buy-buttons.buy-buttons.buy-buttons--multiple {
  grid-template-columns: 1fr;
}
.color-swatch {
  width: 59px;
  height: 59px;
}
.color-swatch {
  margin: 1px;
}
label.block-swatch {width: 61px;height: 61px;}
.product-switcher label {
  font-weight: 600;
}

.product-switcher ul {
  display: flex;
  gap: 0px;
  margin-top: 10px;
  margin-bottom: 24px;
}

/* .product-switcher ul li.selected {
  box-shadow: 0 0 0 4px #e64249;
} */

.product-switcher ul li {
  width: 50px;
}

.product-switcher ul img {
  object-fit: contain;
}
buy-buttons.buy-buttons button {
  font-size: 22px;
}
.product-info price-list.price-list.price-list--lg * {
  font-size: 32px;
} 
@media(max-width: 900px){
  .product-switcher ul li{
  width: 70px !important;
}
.product-switcher .product-switch, .product-switcher .product-switch img{
  width: 100% !important;
}
}
.product-card__title{
  font-weight: bold !important;
  font-size: 19px;
}
:root{
  --bd-color:#00ff55;
  --bd-hover:#ffff33;
}
.product-switcher ul li.selected {
  border: 2px solid var(--bd-color) !important;
  background-color: var(--bd-color) !important;
}

.product-switcher ul li:hover {
  border: 2px solid var(--bd-hover) !important;
  background-color: var(--bd-hover) !important;
}

.product-switcher ul li {
  border: 2px solid transparent;
  border-radius: 5px;
} 

.product-switcher ul li {
  width: 50px;
  padding: 3px;
}
.variant-picker__option-values.wrap.gap-2 {
  gap: 0px;
}

.variant-picker__option-values.wrap.gap-2 label {
  box-shadow: unset !important;
  border: 2px solid transparent;
  border-radius: 6px;
  padding:2px;
  overflow: hidden;
}

.variant-picker__option-values.wrap.gap-2 label:before {
  display: none;
}

.variant-picker__option-values.wrap.gap-2 input:checked + label {
  border: 2px solid var(--bd-color) !important;
  background-color: var(--bd-color) !important;
}
label.block-swatch.simple-block {
  width: max-content;
  padding: 5px !important;
}
span.color-swatch-back {
  background: var(--swatch-background);
  display: block;
  width: 100%;
  height: 100%;
}


.product-switcher label, .variant-picker__option-info {
  font-size: 20px;
}
@media all and (min-width:1000px){
h1.product-info__title.h3{
  display:block !Important;
}  
}
@media all and (max-width:999px){
  .mobile-heading{
    display:block !important;
  }
  .product-card__title{
    font-size: 17px;
  }
}
.collection-header .prose,
{
  font-size: 50px !important;
  line-height: 1.6 !important;
  font-weight: 600;
  letter-spacing: .2px;
}

.collection-header {
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================
   DESKTOP NAV (≥ 1275px)
   … (unchanged from your source)
   ================================ */
@media (min-width: 1275px) {
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: flex !important;
    visibility: visible !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center;
    gap: 0 !important;
    max-width: 100%;
    min-width: 0;
  }

  button.tap-area.lg\:hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  :root {
    --alien-rgb: 0,255,85;
    --item-pad-x: clamp(12px, 1.2vw, 30px);
    --item-pad-y: 9px;
    --ring-thickness: 2px;
    --ring-gap: 16px;
    --ring-alpha: 0.85;
  }

  .header_link-list { display:flex; gap:0 !important; flex-wrap:nowrap; align-items:center; white-space:nowrap; max-width:100%; min-width:0; }
  .header_link-list li { margin:0 !important; padding:0 !important; flex:0 0 auto; white-space:nowrap; }

  .bold.link-faded-reverse {
    position: relative;
    display: inline-block;
    isolation: isolate;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;
    padding: var(--item-pad-y) var(--item-pad-x);
    transition: color 0.25s ease, background-color 0.18s ease;
    text-decoration: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .bold.link-faded-reverse > * { position: relative; z-index: 1; }

  .bold.link-faded-reverse:hover,
  .bold.link-faded-reverse:focus-visible {
    color: rgb(var(--alien-rgb));
    -webkit-text-stroke: 1.2px #000;
    background: #fff;
    outline: none;
    animation: textGlowPulse 1050ms ease-out 1 both;
  }

  .bold.link-faded-reverse:focus-visible { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18); }

  @keyframes textGlowPulse {
    0% { text-shadow: 0 0 8px rgba(var(--alien-rgb),1), 0 0 16px rgba(var(--alien-rgb),.75), 0 0 26px rgba(var(--alien-rgb),.55); }
    35% { text-shadow: 0 0 6px rgba(var(--alien-rgb),.6), 0 0 12px rgba(var(--alien-rgb),.4), 0 0 18px rgba(var(--alien-rgb),.2); }
    65%,100% { text-shadow: none; }
  }

  @keyframes alienRippleDesktop {
    0% { transform: translate(-50%, -50%) scale(0.35); opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
  }

  .bold.link-faded-reverse::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 200%; height: 200%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: repeating-radial-gradient(circle at center, rgba(var(--alien-rgb), var(--ring-alpha)) 0 calc(var(--ring-thickness)), rgba(var(--alien-rgb), 0) calc(var(--ring-thickness)) calc(var(--ring-thickness) + var(--ring-gap)));
    box-shadow: 0 0 1px rgba(0,0,0,0.22);
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
    will-change: transform, opacity;
  }

  .bold.link-faded-reverse:hover::after,
  .bold.link-faded-reverse:focus-visible::after,
  .bold.link-faded-reverse.rippling::after {
    animation: alienRippleDesktop 1050ms ease-out forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .bold.link-faded-reverse:hover,
    .bold.link-faded-reverse:focus-visible { animation: none; text-shadow: none; }
    .bold.link-faded-reverse:hover::after,
    .bold.link-faded-reverse:focus-visible::after { animation: none; opacity: 0.2; }
  }
}

/* =========================
   MOBILE/TABLET (≤ 1274px)
   … (unchanged from your source)
   ========================= */
@media (max-width: 1274px) {
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list { display: none !important; visibility:hidden !important; white-space:normal !important; }

  button.tap-area.lg\:hidden { display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; position:absolute !important; top:30px; left:30px; margin:0 !important; transform:none !important; z-index:50; }
  button.tap-area.lg\:hidden svg { width:32px !important; height:32px !important; stroke-width:1.7 !important; }

  .navigation-drawer .panel__scroller { padding-bottom:0 !important; margin-bottom:0 !important; gap:0; }
  .navigation-drawer .panel-footer,
  .navigation-drawer .panel__footer,
  .navigation-drawer .panel-footer__localization-wrapper,
  .navigation-drawer .social-media { display:none !important; }

  .navigation-drawer .header_link-list { margin:0 !important; padding:0 !important; list-style:none !important; gap:2px !important; }
  .navigation-drawer .header_link-list > li { margin:0 !important; padding:0 !important; }
  .navigation-drawer .header_link-list > li:last-child,
  .navigation-drawer .header_link-list > li:last-child * { margin-bottom:0 !important; padding-bottom:0 !important; }

  :root { --alien-rgb:0,255,85; --ring-thickness:3px; --ring-gap:20px; --ring-alpha:1; --ripple-ms:1500ms; }

  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row) {
    position:relative; isolation:isolate; display:block; overflow:hidden;
    text-align:center; font-size:29px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#000 !important; padding:10px 0;
    transition: color .25s ease, background-color .18s ease, text-shadow .18s ease;
    text-decoration:none !important; background-image:none !important; border:none !important; box-shadow:none !important;
  }
  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row) > * { position:relative; z-index:1; }

  .navigation-drawer::part(body) { gap: var(--spacing-8); grid-template-rows: auto minmax(0,1fr); padding-block-start: var(--drawer-body-padding); }

  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row):hover,
  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row):active {
    color: rgb(var(--alien-rgb)) !important;
    -webkit-text-stroke: 1.2px #000;
    background: #fff !important;
    animation: textGlowPulseMobile__REC var(--ripple-ms) ease-out 1 both;
    text-decoration: none !important; background-image: none !important;
  }

  @keyframes textGlowPulseMobile__REC {
    0% { text-shadow: 0 0 8px rgba(var(--alien-rgb),1), 0 0 16px rgba(var(--alien-rgb),.75), 0 0 26px rgba(var(--alien-rgb),.55); }
    35% { text-shadow: 0 0 6px rgba(var(--alien-rgb),.6), 0 0 12px rgba(var(--alien-rgb),.4), 0 0 18px rgba(var(--alien-rgb),.2); }
    65%,100% { text-shadow: none; }
  }
  @keyframes alienRippleMobile__REC { 0%{ transform: translate(-50%,-50%) scale(.35); opacity:.9;} 100%{ transform: translate(-50%,-50%) scale(1.25); opacity:0;} }
  @keyframes rippleMaskReveal__REC { 0%{ -webkit-mask-size:0% 0%; mask-size:0% 0%; } 100%{ -webkit-mask-size:300% 300%; mask-size:300% 300%; } }

  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row)::after {
    content:""; position:absolute; left:50%; top:50%; width:240%; height:240%; border-radius:50%; pointer-events:none; z-index:0;
    background: repeating-radial-gradient(circle at center, rgba(var(--alien-rgb), var(--ring-alpha)) 0 calc(var(--ring-thickness)), rgba(var(--alien-rgb), 0) calc(var(--ring-thickness)) calc(var(--ring-thickness) + var(--ring-gap)));
    box-shadow:0 0 1px rgba(0,0,0,.22); transform: translate(-50%,-50%) scale(.35); opacity:0;
    -webkit-mask-image: radial-gradient(circle at center,#000 0%,#000 50%,transparent 51%); mask-image: radial-gradient(circle at center,#000 0%,#000 50%,transparent 51%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:0% 0%; mask-size:0% 0%; will-change: transform, opacity, -webkit-mask-size, mask-size;
    mix-blend-mode:multiply; filter: drop-shadow(0 0 .5px rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(0,0,0,.22)) contrast(1.2) brightness(.95);
  }

  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row):hover::after,
  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row):active::after,
  .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row).rippling::after {
    animation: alienRippleMobile__REC var(--ripple-ms) ease-out forwards, rippleMaskReveal__REC var(--ripple-ms) linear forwards;
  }

  .bold.link-faded-reverse { 
    font-size: 15px; font-weight: 600; letter-spacing: .3px; color: inherit; transform: none !important; -webkit-text-stroke: 0 !important; text-shadow: none !important;
  }
  .bold.link-faded-reverse::before, .bold.link-faded-reverse::after { display: none !important; content: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row) { animation:none !important; }
    .navigation-drawer :is(a,[role="menuitem"],.header__menu-item,button.collapsible-row)::after {
      animation:none !important; opacity:.32; transform: translate(-50%,-50%) scale(1.0);
      -webkit-mask-size:260% 260%; mask-size:260% 260%;
      filter: drop-shadow(0 0 .5px rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(0,0,0,.22)) contrast(1.2) brightness(.95);
    }
  }

  .navigation-drawer .reversed-link,
  .navigation-drawer .reversed-link:hover,
  .navigation-drawer .reversed-link:focus,
  .navigation-drawer .reversed-link:active { background: none !important; background-image: none !important; }
}

/* HEADER EFFECTS — Clean Pro Version (icons, search, sticky, etc.) */
/* … (remaining rules copied directly from your CSS file) … */

/* FAQ (sanitized): use .hl-faq wrapper instead of Liquid id */
.hl-upgrades .hl-faq details[is="accordion"] > summary,
.hl-upgrades .hl-faq details.accordion > summary,
.hl-upgrades .hl-faq .accordion__summary,
.hl-upgrades .hl-faq summary{
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.hl-upgrades .hl-faq summary::-webkit-details-marker{ display: none; }

.hl-upgrades .hl-faq .accordion__content,
.hl-upgrades .hl-faq .collapsible-content,
.hl-upgrades .hl-faq details[is="accordion"] > .content,
.hl-upgrades .hl-faq details > .content,
.hl-upgrades .hl-faq .accordion__content .prose{
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  padding: 0 22px 18px 22px;
}
.hl-upgrades .hl-faq .accordion__content .prose :where(p, li, ul, ol, a, span, strong, em, blockquote, code){
  font-size: inherit; line-height: inherit;
}
.hl-upgrades .hl-faq .accordion-box,
.hl-upgrades .hl-faq [class*="accordion"]{ border-radius: 8px; }
.hl-upgrades .hl-faq summary:focus-visible,
.hl-upgrades .hl-faq .accordion__summary:focus-visible{ outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce){
  .hl-upgrades .hl-faq summary,
  .hl-upgrades .hl-faq .accordion__summary{ transition:none; }
}

/* Home heading */
.hl-home-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-size: 33px;
  margin: 0 0 0;
}
@media (min-width: 700px) {
  .hl-home-heading { font-size: 50px; margin: 24px 0 32px; }
}
.hl-home-heading a { color: inherit; text-decoration: none; }










/* ===================== HLS FRESH CSS — START (bulk import) ===================== */




.line-through {
  text-decoration: line-through;
}

.break-all {
  overflow-wrap: anywhere;
}

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .drawer--lg {
    width: 100% !important;
    height: 85% !important;
  }
}

.centervibe {
  margin: auto;
}
/* FAST SOLUTIONS */
/* Title */
h1.product-info__title.h3 {
  display: none !important;
}
/*Shop Pay --> Description */
.product-info__vendor,
.product-info__title,
.product-info__sku,
.product-info__rating,
.product-info__payment-terms {
  display: none !important;
}
/* hr */
.product-info__separator {
  display: none !important;
}
/* Shop Pay --> Button */
.BUz42FHpSPncCPJ4Pr_f {
  display: none !important;
}
/* payment options link */
.kqsiVA9Jf8LJAbxw8Bau {
  display: none !important;
}
/* ADD TO CART --> BUTTON */
.button.button--xl.button--secondary {
  font-weight: bold;
  text-transform: uppercase;
  color: black;
}
/* add to cart float */
product-quick-add {
  display: none;
}
button[form="product-form-7943624458285-template--16666192052269__main"] {
  display: none;
}
/* shop pay */
div[data-shopify="payment-button"] {
  display: none;
}
.block-swatch:before {
    box-shadow: 0px 0px 0px 4px #E64249;
}
label.block-swatch {
    border-radius: 0px;
    padding: 0px;
}
.color-swatch:before {
    inset: 0px !important;
    box-shadow: 0 0 0 4px #E64249;
}
.variant-picker__option-info .text-subdued {
    color: black;
}
.variant-picker__option-info {
    font-weight: 600;
}
.product-info price-list.price-list.price-list--lg {
    font-size: 32px !important;
    font-weight: bold;
}
buy-buttons.buy-buttons.buy-buttons--multiple {
    grid-template-columns: 1fr;
}
.color-swatch {
    width: 59px;
    height: 59px;
}
.color-swatch {
    margin: 1px;
}
label.block-swatch {width: 61px;height: 61px;}
.product-switcher label {
    font-weight: 600;
}

.product-switcher ul {
    display: flex;
    gap: 0px;
    margin-top: 10px;
    margin-bottom: 24px;
}

/* .product-switcher ul li.selected {
    box-shadow: 0 0 0 4px #e64249;
} */

.product-switcher ul li {
    width: 50px;
}

.product-switcher ul img {
    object-fit: contain;
}
buy-buttons.buy-buttons button {
    font-size: 22px;
}
.product-info price-list.price-list.price-list--lg * {
    font-size: 32px;
} 
@media(max-width: 900px){
  .product-switcher ul li{
  width: 70px !important;
}
.product-switcher .product-switch, .product-switcher .product-switch img{
  width: 100% !important;
}
}
.product-card__title{
  font-weight: bold !important;
  font-size: 19px;
}
:root{
  --bd-color:#00ff55;
  --bd-hover:#ffff33;
}
.product-switcher ul li.selected {
    border: 2px solid var(--bd-color) !important;
    background-color: var(--bd-color) !important;
}

.product-switcher ul li:hover {
    border: 2px solid var(--bd-hover) !important;
    background-color: var(--bd-hover) !important;
}

.product-switcher ul li {
    border: 2px solid transparent;
    border-radius: 5px;
} 

.product-switcher ul li {
    width: 50px;
    padding: 3px;
}
.variant-picker__option-values.wrap.gap-2 {
    gap: 0px;
}

.variant-picker__option-values.wrap.gap-2 label {
    box-shadow: unset !important;
    border: 2px solid transparent;
    border-radius: 6px;
    padding:2px;
    overflow: hidden;
}

.variant-picker__option-values.wrap.gap-2 label:before {
    display: none;
}

.variant-picker__option-values.wrap.gap-2 label[aria-pressed="false"]:hover  {
    border: 2px solid var(--bd-hover) !important;
    background-color: var(--bd-hover) !important;
}

.variant-picker__option-values.wrap.gap-2 input:checked + label {
    border: 5px solid var(--bd-color) !important;
    background-color: var(--bd-color) !important;
}
label.block-swatch.simple-block {
    width: max-content;
    padding: 5px !important;
}
span.color-swatch-back {
    background: var(--swatch-background);
    display: block;
    width: 100%;
    height: 100%;
}


.product-switcher label, .variant-picker__option-info {
    font-size: 20px;
}
@media all and (min-width:1000px){
h1.product-info__title.h3{
  display:block !Important;
}  
}
@media all and (max-width:999px){
  .mobile-heading{
    display:block !important;
  }
  .product-card__title{
    font-size: 17px;
  }
}
.collection-header .prose
 {
  font-size: 50px !important;
  line-height: 1.6 !important;
  font-weight: 600;
  letter-spacing: .2px;
}

.collection-header {
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}












/* ================================
   DESKTOP NAV (≥ 1275px)
   No-wrap + 25% tighter horizontal space
   Also: force inline menu ON, hamburger OFF
   ================================ */
@media (min-width: 1275px) {
  /* Force the inline desktop menu visible */
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: flex !important;
    visibility: visible !important;
    flex-wrap: nowrap !important;     /* force single line */
    white-space: nowrap !important;
    align-items: center;
    gap: 0 !important;
    max-width: 100%;
    min-width: 0;
  }

  /* Hide the hamburger on desktop just in case */
  button.tap-area.lg\:hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  :root {
    --alien-rgb: 0,255,85;                      /* #00ff55 */
    /* ~25% tighter than your original */
    --item-pad-x: clamp(12px, 1.2vw, 30px);
    --item-pad-y: 9px;
    --ring-thickness: 2px;
    --ring-gap: 16px;
    --ring-alpha: 0.85;
  }

  .header_link-list {
    display: flex;
    gap: 0 !important;
    flex-wrap: nowrap;                 /* force single line */
    align-items: center;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
  }

  .header_link-list li {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .bold.link-faded-reverse {
    position: relative;
    display: inline-block;
    isolation: isolate;
    overflow: hidden;

    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;

    padding: var(--item-pad-y) var(--item-pad-x);

    transition: color 0.25s ease, background-color 0.18s ease;
    text-decoration: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  .bold.link-faded-reverse > * { position: relative; z-index: 1; }

  .bold.link-faded-reverse:hover,
  .bold.link-faded-reverse:focus-visible {
    color: rgb(var(--alien-rgb));
    -webkit-text-stroke: 1.2px #000;
    background: #fff;
    outline: none;
    animation: textGlowPulse 1050ms ease-out 1 both; /* synced with ripple */
  }

  .bold.link-faded-reverse:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);
  }

  @keyframes textGlowPulse {
    0% {
      text-shadow:
        0 0 8px  rgba(var(--alien-rgb), 1.0),
        0 0 16px rgba(var(--alien-rgb), 0.75),
        0 0 26px rgba(var(--alien-rgb), 0.55);
    }
    35% {
      text-shadow:
        0 0 6px  rgba(var(--alien-rgb), 0.6),
        0 0 12px rgba(var(--alien-rgb), 0.4),
        0 0 18px rgba(var(--alien-rgb), 0.2);
    }
    65%,100% { text-shadow: none; }
  }

  @keyframes alienRippleDesktop {
    0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
  }

  .bold.link-faded-reverse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;

    background: repeating-radial-gradient(
      circle at center,
      rgba(var(--alien-rgb), var(--ring-alpha)) 0 calc(var(--ring-thickness)),
      rgba(var(--alien-rgb), 0) calc(var(--ring-thickness)) calc(var(--ring-thickness) + var(--ring-gap))
    );

    box-shadow: 0 0 1px rgba(0,0,0,0.22);
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
    will-change: transform, opacity;
  }

  .bold.link-faded-reverse:hover::after,
  .bold.link-faded-reverse:focus-visible::after,
  .bold.link-faded-reverse.rippling::after {
    animation: alienRippleDesktop 1050ms ease-out forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .bold.link-faded-reverse:hover,
    .bold.link-faded-reverse:focus-visible { animation: none; text-shadow: none; }
    .bold.link-faded-reverse:hover::after,
    .bold.link-faded-reverse:focus-visible::after { animation: none; opacity: 0.2; }
  }
}






/* =========================
   MOBILE/TABLET (≤ 1274px)
   Recovery: Rings + Source Glow + Center-out Mask
   Also: force drawer ON, inline menu OFF
   ========================= */
@media (max-width: 1274px) {

  /* Kill inline desktop menu completely below 1275 */
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: none !important;
    visibility: hidden !important;
    white-space: normal !important;
  }

  /* Ensure hamburger/toggle is visible & clickable */
  button.tap-area.lg\:hidden {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 30px;
    left: 30px;
    margin: 0 !important;
    transform: none !important;
    z-index: 50;
  }

  /* Enlarge the hamburger icon on mobile */
  button.tap-area.lg\:hidden svg {
    width: 32px !important;
    height: 32px !important;
    stroke-width: 1.7 !important;
  }

  .navigation-drawer .panel__scroller {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    gap: 0;
  }
  .navigation-drawer .panel-footer,
  .navigation-drawer .panel__footer,
  .navigation-drawer .panel-footer__localization-wrapper,
  .navigation-drawer .social-media {
    display: none !important;
  }

  .navigation-drawer .header_link-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 2px !important;
  }
  .navigation-drawer .header_link-list > li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .navigation-drawer .header_link-list > li:last-child,
  .navigation-drawer .header_link-list > li:last-child * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  :root {
    --alien-rgb: 0,255,85;
    --ring-thickness: 3px;   /* was 2px */
    --ring-gap: 20px;        /* was 24px */
    --ring-alpha: 1;         /* was 0.9 */
    --ripple-ms: 1500ms;
  }

  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row) {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;

    text-align: center;
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000 !important;
    padding: 10px 0;

    transition: color 0.25s ease, background-color 0.18s ease, text-shadow 0.18s ease;
    text-decoration: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row) > * {
    position: relative;
    z-index: 1;
  }

  .navigation-drawer::part(body) {
    gap: var(--spacing-8);
    grid-template-rows: auto minmax(0, 1fr);
    padding-block-start: var(--drawer-body-padding);
  }

  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row):hover,
  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row):active {
    color: rgb(var(--alien-rgb)) !important;
    -webkit-text-stroke: 1.2px #000;
    background: #fff !important;
    animation: textGlowPulseMobile__REC var(--ripple-ms) ease-out 1 both;
    text-decoration: none !important;
    background-image: none !important;
  }

  @keyframes textGlowPulseMobile__REC {
    0% {
      text-shadow:
        0 0 8px  rgba(var(--alien-rgb), 1.0),
        0 0 16px rgba(var(--alien-rgb), 0.75),
        0 0 26px rgba(var(--alien-rgb), 0.55);
    }
    35% {
      text-shadow:
        0 0 6px  rgba(var(--alien-rgb), 0.60),
        0 0 12px rgba(var(--alien-rgb), 0.40),
        0 0 18px rgba(var(--alien-rgb), 0.20);
    }
    65%,100% { text-shadow: none; }
  }

  @keyframes alienRippleMobile__REC {
    0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
  }
  @keyframes rippleMaskReveal__REC {
    0%   { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
    100% { -webkit-mask-size: 300% 300%; mask-size: 300% 300%; }
  }

  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240%;
    height: 240%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;

    background: repeating-radial-gradient(
      circle at center,
      rgba(var(--alien-rgb), var(--ring-alpha)) 0 calc(var(--ring-thickness)),
      rgba(var(--alien-rgb), 0) calc(var(--ring-thickness)) calc(var(--ring-thickness) + var(--ring-gap))
    );

    box-shadow: 0 0 1px rgba(0,0,0,0.22);
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;

    -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 50%, transparent 51%);
            mask-image: radial-gradient(circle at center, #000 0%, #000 50%, transparent 51%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;

    will-change: transform, opacity, -webkit-mask-size, mask-size;

    /* NEW: subtle boost for visibility */
    mix-blend-mode: multiply;
    filter:
      drop-shadow(0 0 0.5px rgba(0,0,0,.35))
      drop-shadow(0 0 1px   rgba(0,0,0,.22))
      contrast(1.2) brightness(0.95);
  }

  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row):hover::after,
  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row):active::after,
  .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row).rippling::after {
    animation:
      alienRippleMobile__REC var(--ripple-ms) ease-out forwards,
      rippleMaskReveal__REC var(--ripple-ms) linear forwards;
  }

  .bold.link-faded-reverse { 
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: inherit;
    transform: none !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
  .bold.link-faded-reverse::before,
  .bold.link-faded-reverse::after {
    display: none !important;
    content: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row) {
      animation: none !important;
    }
    .navigation-drawer :is(a, [role="menuitem"], .header__menu-item, button.collapsible-row)::after {
      animation: none !important;
      opacity: 0.32; /* was 0.22 */
      transform: translate(-50%, -50%) scale(1.0);
      -webkit-mask-size: 260% 260%;
              mask-size: 260% 260%;
      filter:
        drop-shadow(0 0 0.5px rgba(0,0,0,.35))
        drop-shadow(0 0 1px   rgba(0,0,0,.22))
        contrast(1.2) brightness(0.95);
    }
  }

  /* Kill Shopify's gradient underline on reversed-link in the mobile drawer */
  .navigation-drawer .reversed-link,
  .navigation-drawer .reversed-link:hover,
  .navigation-drawer .reversed-link:focus,
  .navigation-drawer .reversed-link:active {
    background: none !important;
    background-image: none !important;
  }

}

















/* =========================================================
   HEADER EFFECTS — Clean Pro Version
   - Logo: calm, no hover/glow
   - Icons (cart, search, hamburger): black only, no hover/glow
   - Subtle shrink on click for tactile feedback
   - Account button removed
   - Responsive sizing for mobile/desktop
   ========================================================= */

/* --- REMOVE ACCOUNT BUTTON --- */
.header__icon-list a[href="/account"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


  .header__logo::after {
    content: none !important;
  }

  .header__logo:hover,
  .header__logo:focus-visible,
  .header__logo:active {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    outline: none !important;
  }

  .header__logo img,
  .header__logo svg {
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ================================
   BASE ICON STYLES (Cart + Search)
   ================================ */
.header__icon-list a[aria-controls="search-drawer"] svg,
.header__icon-list a[aria-controls="cart-drawer"] svg,
.header__icon-list a[href="/cart"] svg {
  width: 24px;
  height: 24px;
  stroke: #000;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 2;
  color: #000 !important;
  transition: transform .15s ease;
  filter: none !important;
  transform: none;
}

/* --- ACTIVE (click/tap): subtle shrink --- */
.header__icon-list a[aria-controls="search-drawer"]:active svg,
.header__icon-list a[aria-controls="cart-drawer"]:active svg,
.header__icon-list a[href="/cart"]:active svg {
  transform: scale(0.96);
}

/* --- DESKTOP (≥1275px): slightly smaller & crisp --- */
@media (min-width: 1275px) {
  .header__icon-list a[aria-controls="search-drawer"] svg,
  .header__icon-list a[aria-controls="cart-drawer"] svg,
  .header__icon-list a[href="/cart"] svg
  .icon-account {
    width: 20px;
    height: 22px;
    stroke-width: 2.25;
  }
}

/* --- MOBILE (≤1274px): larger tap targets --- */
@media (max-width: 1274px) {
  .header__icon-list a[aria-controls="search-drawer"] svg,
  .header__icon-list a[aria-controls="cart-drawer"] svg,
  .header__icon-list a[href="/cart"] svg {
    width: 30px;
    height: 30px;
    stroke-width: 2.75;
  }

  .header__icon-list a[aria-controls="search-drawer"],
  .header__icon-list a[aria-controls="cart-drawer"],
  .header__icon-list a[href="/cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
  }
}





/* HLS — simple, global account icon rules */
.icon-account {
  width: 24px !important;
  height: 24px !important;
  stroke: #000 !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
  stroke-width: 2 !important;
  color: #000 !important;
  transition: transform .155s ease;
  transform: none !important;
  margin-right: 8px;
}

/* Tap/press feedback */
a:active .icon-account { transform: scale(0.96) !important; }


/* Tap/press feedback */
a:active .icon-account { transform: scale(0.96) !important; }

/* Desktop tweak */
@media (min-width: 1275px) {
  .icon-account {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.5 !important;
  }
}









/* =========================================================
   MOBILE ONLY (≤1274px)
   One search icon near the hamburger (top-left)
   Remove duplicates that overlap the menu
   ========================================================= */
@media (max-width: 1274px) {
  /* 1) Hide ALL possible search triggers by default */
  [aria-controls="search-drawer"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2) Re-enable ONLY the header icon-list version */
  .header__icon-list a[aria-controls="search-drawer"] {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    z-index: 60;
  }

  /* 3) Pin hamburger & search to the top-left */
  .header { position: relative; }

  button.tap-area.lg\:hidden {
    position: absolute !important;
    top: 23px;
    left: 25px;
    margin: 0 !important;
    transform: none !important;
    z-index: 61;
  }

  .header__icon-list a[aria-controls="search-drawer"] {
    position: absolute !important;
    top: 20px;
    left: 75px;
    transform: none !important;
  }

  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ================================
   HAMBURGER ICON (Always black, no glow)
   ================================ */
button.tap-area.lg\:hidden svg {
  width: 30px;
  height: 30px;
  stroke: #000;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 2.5;
  color: #000 !important;
  transition: transform .15s ease;
  filter: none !important;
}

button.tap-area.lg\:hidden:active svg {
  transform: scale(0.96);
}






/* =========================================================
   Fix header between 1150px and 1274px
   - Kill theme's grid so it stops re-centering the logo
   - Keep our mobile layout (logo centered, hamburger + search pinned)
   ========================================================= */
@media (min-width: 1150px) and (max-width: 1274px) {
  /* Stop the grid behavior in this mid band */
  .header__wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* keeps logo centered */
    grid-template-columns: initial !important;
    grid-template-areas: initial !important;
  }

  /* Make sure inline/desktop nav is off in this band */
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: none !important;
    visibility: hidden !important;
  }

  /* Logo stays centered */
  .header__logo {
    order: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  

  /* Pin hamburger left */
  button.tap-area.lg\:hidden {
    position: absolute !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 61;
  }

  /* Use only ONE search trigger and pin it just right of the hamburger */
  [aria-controls="search-drawer"] { display: none !important; } /* hide all */
  .header__icon-list a[aria-controls="search-drawer"] {
    display: inline-flex !important;
    position: absolute !important;
    top: 12px;
    left: 56px; /* adjust spacing from hamburger */
    z-index: 60;
  }
}
















/* =========================================================
   CUSTOM CONTROL: 700px – 1274px
   - Manual positioning for hamburger + search
   - Tweak the variables below to adjust
   ========================================================= */
@media (min-width: 700px) and (max-width: 1274px) {
  :root {
    --icon-size-mid: 30px;   /* size of both icons */
    --ham-top-mid: 30px;     /* hamburger top offset */
    --ham-left-mid: 45px;    /* hamburger left offset */
    --search-top-mid: 29px;  /* search top offset */
    --search-left-mid: 95px; /* search left offset */
  }

  .header { position: relative; }

  /* HAMBURGER */
  button.tap-area.lg\:hidden {
    position: absolute !important;
    top: var(--ham-top-mid);
    left: var(--ham-left-mid);
    transform: none !important;
    z-index: 61;
  }
  button.tap-area.lg\:hidden svg {
    width: var(--icon-size-mid);
    height: var(--icon-size-mid);
  }

  /* SEARCH (the header__icon-list version only) */
  .header__icon-list a[aria-controls="search-drawer"] {
    position: absolute !important;
    top: var(--search-top-mid);
    left: var(--search-left-mid);
    transform: none !important;
    z-index: 60;
  }
  .header__icon-list a[aria-controls="search-drawer"] svg {
    width: var(--icon-size-mid);
    height: var(--icon-size-mid);
  }

  /* Optional: make sure duplicates don't appear */
  [aria-controls="search-drawer"] { display: none !important; }
  .header__icon-list a[aria-controls="search-drawer"] {
    display: inline-flex !important;
    pointer-events: auto !important;
  }
}










/* =========================================================
   DESKTOP ICON STYLING (≥1275px)
   Bigger + bolder search and cart
   No glow, no hover effects
   Extra 10px horizontal space between them
   ========================================================= */
@media (min-width: 1275px) {
  .header__icon-list a[aria-controls="search-drawer"] svg,
  .header__icon-list a[aria-controls="cart-drawer"] svg,
  .header__icon-list a[href="/cart"] svg {
    width: 28px;       /* bigger */
    height: 28px;
    stroke-width: 3;   /* thicker lines */
    color: #000;       /* solid black, no glow */
    filter: none !important;
    transform: none !important;
    transition: none !important; /* no hover animation */
  }

  /* Add horizontal spacing between search and cart */
  .header__icon-list a[aria-controls="search-drawer"] {
    margin-right: 10px;
  }
}












/* Style the floating close bubble */
navigation-drawer::part(outside-close-button) {
  width: 70px !important;       /* size of the bubble */
  height: 70px !important;
  border-radius: 9999px;        /* keep circular */
  background: rgba(0,0,0,0.85); /* dark background */
  position: relative;           /* needed for overlaying ::before/::after */
  display: grid;
  place-items: center;
  cursor: pointer;              /* shows it's clickable */
  color: transparent;           /* hide inherited text/icon color */
}

/* Hide the built-in SVG icon */
navigation-drawer::part(outside-close-button) svg {
  display: none !important;
}

/* Add your own bold white X */
navigation-drawer::part(outside-close-button)::before,
navigation-drawer::part(outside-close-button)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;                  /* width of each line of the X */
  height: 5px;                  /* thickness of each line */
  background: #000000;             /* color of the X */
  border-radius: 3px;
  transform-origin: center;
  translate: -50% -50%;
}

navigation-drawer::part(outside-close-button)::before {
  transform: rotate(45deg);
}

navigation-drawer::part(outside-close-button)::after {
  transform: rotate(-45deg);
}

/* Optional hover effect */
navigation-drawer::part(outside-close-button):hover {
  background: #00ff55;          /* your brand green on hover */
}
















/* 1) Keep hamburger visible through 1274 even if it has lg:hidden */
@media (min-width: 1024px) and (max-width: 1274px) {
  button.tap-area.lg\:hidden {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* 2) Kill inline/desktop nav through 1274 */
@media (max-width: 1274px) {
  .header__inline-menu,
  .header__inline-menu .header__link-list,
  .header__link-list {
    display: none !important;
    visibility: hidden !important;
  }
}



/* Center the X Close Button */
@media (max-width: 1274px) {
  #header-sidebar-menu::part(outside-close-button),
  #header-sidebar-menu::part(close-button) {
    left: 50% !important;               /* move halfway across */
    transform: translateX(-50%) !important; /* pull back half its width */
  }
}








/* Mid-band logo micro-nudge only (no layout changes) */
@media (min-width: 1150px) and (max-width: 1274px) {
  .header__logo {
    margin-inline: auto;           /* keep normal centering */
    transform: translateX(60px);    /* tweak this value: + moves right, - moves left */
    will-change: transform;        /* smooths the tiny shift */
  }
}



































/* 3) EXTEND *MOBILE* DRAWER BEHAVIOR to 700–1274 */
/* Target BOTH the custom element and the class */
/*
@media (min-width: 700px) and (max-width: 1274px) {
  navigation-drawer,
  .navigation-drawer {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100vw !important; max-width: 100vw !important;
    height: auto;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform 320ms ease, opacity 320ms ease !important;
    opacity: 1 !important;
    inset: auto 0 0 0 !important;
  }

  
  navigation-drawer[aria-hidden="false"],
  navigation-drawer[open],
  navigation-drawer.is-open,
  navigation-drawer.active,
  navigation-drawer.js-is-open,
  .navigation-drawer[aria-hidden="false"],
  .navigation-drawer[open],
  .navigation-drawer.is-open,
  .navigation-drawer.active,
  .navigation-drawer.js-is-open {
    transform: translateY(0) !important;
    left: 0 !important; right: 0 !important;
  }


  navigation-drawer .panel,
  navigation-drawer .panel__scroller,
  .navigation-drawer .panel,
  .navigation-drawer .panel__scroller {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    transform: none !important;
    transform-origin: bottom center !important;
  }

  
  .drawer--left,
  .drawer--right,
  navigation-drawer[style*="translateX"],
  .navigation-drawer[style*="translateX"] {
    transform: none !important;
    left: 0 !important; right: 0 !important;
    width: 100vw !important;
  }

 
  navigation-drawer::backdrop,
  .navigation-drawer ~ .drawer-backdrop {
    background: rgba(0,0,0,.45) !important;
    opacity: 1 !important;
  }
}


navigation-drawer .header__link-list,
.navigation-drawer .header__link-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 2px !important;
}
  */







.product-info__buy-buttons .buy-buttons {
  background-color: #00ff55;
  color: #000;
  padding: 2px 28px;
  border: none;
  border-radius: 40px; /* pill shape */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  
  /* faint resting aura */
  filter: drop-shadow(0 0 4px rgba(0, 255, 85, 0.4));
}

/* Hover: stronger neon aura + slight zoom */
.product-info__buy-buttons .buy-buttons:hover {
  background-color: #00ff55; /* darker green */
  filter: drop-shadow(0 0 6px rgba(0, 255, 85, 0.8))
          drop-shadow(0 0 14px rgba(0, 255, 85, 0.6));
  transform: scale(1.03);
}











/* Primary Checkout button (no lock) */
.cart-drawer .button[name="checkout"] {
  background-color: #00ff55;
  color: #000;
  padding: 14px 28px;
  border: none;
  border-radius: 40px;
  font-size: 20px;   /* bigger text */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  filter: drop-shadow(0 0 4px rgba(0, 255, 85, 0.4));
  display: block;  /* pure centered button */
  width: 100%;
  text-align: center;
}

.cart-drawer .button[name="checkout"]:hover {
  background-color: #00ff55;
  filter: drop-shadow(0 0 6px rgba(0, 255, 85, 0.8))
          drop-shadow(0 0 14px rgba(0, 255, 85, 0.6));
  transform: scale(1.03);
}

/* Secondary View Cart button */
.cart-drawer a[href="/cart"] {
  display: inline-block;
  background-color: transparent;
  color: #00ff55;
  border-radius: 40px;
  padding: 14px 28px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 3px #00ff55 inset; /* faux border */
  width: 100%;
}

.cart-drawer a[href="/cart"]:hover {
  background-color: #00ff55;
  color: #000;
  transform: scale(1.02);
}

.secure-checkout-note {
  font-size: 12px;
  color: #666;           /* softer gray */
  text-align: center;
  margin-top: 10px;
  width: 100%;
  display: block;
  letter-spacing: 0.3px; /* slightly easier to read in small text */
}



/* Reset the buy-buttons container */
.cart-drawer .buy-buttons {
  display: flex;          /* flex instead of grid */
  justify-content: space-between;
  gap: 12px;              /* space between buttons */
  flex-wrap: wrap;        /* allows note to drop below */
}

/* Force each button to half width */
.cart-drawer .buy-buttons a[href="/cart"],
.cart-drawer .buy-buttons .button[name="checkout"] {
  flex: 1 1 48%;          /* each takes ~50% */
  text-align: center;
}

/* Secure note just falls to next line */
.cart-drawer .buy-buttons::after {
  content: "Secure checkout powered by Shopify";
  flex-basis: 100%;       /* own line */
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  color: #777;
  letter-spacing: 0.3px;
}



@media (max-width: 600px) {
  .cart-drawer .buy-buttons::after {
    font-size: 14px;     /* bigger on mobile */
    color: #555;         /* still muted, not as dark as button text */
    margin-top: 14px;    /* extra breathing room */
  }
}












/* Make every card a vertical stack */
.product-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* figure + info same width */
  text-align: center;     /* center title/prices */
}

/* Force perfect square image area and prevent layout shift */
.product-card__figure,
.product-card__figure .product-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.product-card__figure .product-card__img {
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: consistent spacing */
.product-card__info {
  margin-top: 1px;
}



/* Base: mobile-first */
.product-card__title {
  font-size: 1rem;      /* ~16px */
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.product-card__price {
  font-size: 0.95rem;   /* slightly smaller than title */
  text-align: center;
}

/* Tablet (≥ 600px wide) */
@media (min-width: 600px) {
  .product-card__title {
    font-size: 1.15rem;   /* ~18px */
  }
  .product-card__price {
    font-size: 1rem;
  }
}

/* Desktop (≥ 1024px wide) */
@media (min-width: 1024px) {
  .product-card__title {
    font-size: 1.5rem;    /* ~21px */
  }
  .product-card__price {
    font-size: 1.1rem;
  }
}









/* Announcement bar styling */
.announcement-bar {
  display: flex;               /* enable flexbox */
  align-items: center;         /* vertical centering */
  justify-content: center;     /* horizontal centering */
}

.announcement-bar p {
  font-size: clamp(20px, 2vw, 26px);     
  color: #00ff55;                        
  letter-spacing: 0.1em;                 
  font-weight: 900;                      
  text-transform: uppercase;             
   line-height: 1.1; /* keeps vertical balance sharp */
  text-shadow: 0 0 0.15em rgba(0, 255, 85, 0.6); /* softer, tighter glow */
  margin: 0; /* remove default <p> margins */
}







/* Make the whole nav row use flex + center vertically */
.header__main-nav {
  display: flex;
  align-items: center;
}

/* Ensure both the link list and icon list align to center */
.header__link-list,
.header__icon-list {
  display: flex;
  align-items: center;
}

/* Center the text inside each link and give a tiny downward nudge */
.header__link-list .contents > li > a {
  display: flex;
  align-items: center;   /* vertical centering inside the anchor */
  line-height: 1.1;
  padding-top: 6px;      /* tweak this 4–8px until it’s perfect on your screen */
  padding-bottom: 6px;
}

/* Desktop-only micro-adjust (keeps mobile tight) */
@media (min-width: 1024px) {
  .header__link-list .contents > li > a { padding-top: 7px; }
}





/* Force header to stay sticky and visible */
store-header.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--background, #fff); /* fallback background */
  transform: translateY(0) !important; /* neutralize scroll hide */
}

/* Prevent the theme's "hide-on-scroll" class from shifting header */
store-header.header.hide-on-scroll {
  transform: translateY(0) !important;
}




/* === HL Step 1: section rhythm — only between sections === */
.hl-upgrades{ --space-desktop:72px; --space-mobile:44px; }

/* Add hl-section to the sections you want spaced. 
   This applies spacing only when one follows another. */
.hl-upgrades .hl-section + .hl-section{ margin-top: var(--space-desktop); }

@media (max-width:700px){
  .hl-upgrades .hl-section + .hl-section{ margin-top: var(--space-mobile); }
}










/* === HL FAQ — ideal baseline (no variables) ===
   Scope: .hl-upgrades on <body> and id="hl-faq-{{ section.id }}" on the FAQ wrapper
*/

/* QUESTIONS — balanced, bold, not shouty */
.hl-upgrades ,h1-faq details[is="accordion"] > summary,
.hl-upgrades ,h1-faq details.accordion > summary,
.hl-upgrades ,h1-faq .accordion__summary,
.hl-upgrades ,h1-faq summary{
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.hl-upgrades ,h1-faq summary::-webkit-details-marker{ display: none; }

/* ANSWERS — easy reading, generous line-height */
.hl-upgrades ,h1-faq .accordion__content,
.hl-upgrades ,h1-faq .collapsible-content,
.hl-upgrades ,h1-faq details[is="accordion"] > .content,
.hl-upgrades ,h1-faq details > .content,
.hl-upgrades ,h1-faq .accordion__content .prose{
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  padding: 0 22px 18px 22px;
}

/* Ensure inner text inherits answer sizing */
.hl-upgrades ,h1-faq .accordion__content .prose :where(p, li, ul, ol, a, span, strong, em, blockquote, code){
  font-size: inherit;
  line-height: inherit;
}

/* Subtle card radius + keyboard focus */
.hl-upgrades ,h1-faq .accordion-box,
.hl-upgrades ,h1-faq [class*="accordion"]{
  border-radius: 8px;
}
.hl-upgrades ,h1-faq summary:focus-visible,
.hl-upgrades ,h1-faq .accordion__summary:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .hl-upgrades ,h1-faq summary,
  .hl-upgrades ,h1-faq .accordion__summary{ transition: none; }
}







/* Match the "Collections" heading spec everywhere you use hl-home-heading */
.hl-home-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-size: 33px;           /* mobile */
  margin: px 0 0px;       /* mirrors your Collections spacing */
}
@media (min-width: 700px) {
  .hl-home-heading {
    font-size: 50px;         /* desktop */
    margin: 24px 0 32px;
  }
}
/* Keep link from changing the look */
.hl-home-heading a {
  color: inherit;
  text-decoration: none;
}







/* =========================
   HLS MN1 — Mobile menu height + scroll fix
   Makes the menu drawer fill the viewport (no short panel),
   and confines scrolling to the drawer content (no double scrollbars).
   ========================= */
@media (max-width: 991px) {
  /* Normalize the menu drawer to full viewport height */
  .drawer[data-drawer="menu"],
  .drawer--menu,
  .panel--menu {
    height: 100dvh !important;     /* dynamic viewport height to handle mobile browser chrome */
    max-height: 100dvh !important;
  }

  /* Ensure inner panel stretches and doesn't impose smaller max-heights */
  .drawer[data-drawer="menu"] .panel,
  .drawer--menu .panel,
  .panel--menu .panel {
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Scroller: only this element should scroll, not the entire page */
  .drawer[data-drawer="menu"] .panel__scroller,
  .drawer--menu .panel__scroller,
  .panel--menu .panel__scroller,
  .drawer[data-drawer="menu"] .drawer__content,
  .drawer--menu .drawer__content {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* smooth iOS momentum scroll */
  }

  /* If theme injects inline fixed pixel heights, override them */
  [data-drawer="menu"][style*="height"],
  [data-drawer="menu"] .panel[style*="height"],
  [data-drawer="menu"] .panel__scroller[style*="height"] {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Reduce chance of background page scrolling while menu is open */
  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  /* Cosmetic: hide WebKit scrollbar track inside the drawer */
  .drawer[data-drawer="menu"] .panel__scroller::-webkit-scrollbar,
  .drawer--menu .panel__scroller::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}










/* =========================
   HLS: Variant "Type" Picker
   (image-only tiles, full background on hover/selected)
   ========================= */
.hls-type-picker[hidden] { display: none; }

.hls-type-picker {
  margin-block: var(--spacing-2) var(--spacing-4);
  border: 0;
}

.hls-type-picker__label {
  font: inherit;
  font-weight: 600;
  margin-block-end: var(--spacing-1);
}

/* 5px between icons */
.hls-type-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* containerless option; image wrapper becomes the tile */
.hls-type-picker__option {
  display: inline-grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  gap: 0;
}

/* the tile */
.hls-type-picker__icon {
  padding: 6px;                 /* color margin around the image */
  border-radius: 10px;
  background: transparent;
  transition: background-color .15s ease, outline-color .15s ease;
}

/* keyboard focus ring (kept for accessibility) */
.hls-type-picker__option:focus-visible .hls-type-picker__icon {
  outline: 2px solid var(--color-foreground, #111);
  outline-offset: 2px;
}

/* hover fill — limit to hover-capable devices to avoid sticky hover on touch */
@media (hover: hover) and (pointer: fine) {
  .hls-type-picker__option:hover .hls-type-picker__icon {
    background-color: #ffff33; /* hover background */
  }
}

/* selected fill — survives re-render via server flag */
.hls-type-picker__option[data-selected="true"] .hls-type-picker__icon,
.hls-type-picker__option[aria-pressed="true"] .hls-type-picker__icon,
.hls-type-picker__option.is-active .hls-type-picker__icon {
  background-color: #00ff55;    /* selected background */
}

/* icon size — transparent icons show the bg */
.hls-type-picker__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

/* fallback tile when no image exists (also fills) */
.hls-type-picker__icon--fallback {
  padding: 6px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  font-weight: 700;
}

/* hide captions for image-only look */
.hls-type-picker__text { display: none; }











/* HLS — Size icons with strict 2px padding only */
.variant-picker__option-values .option-value--icon {
  display: inline-grid;
  place-items: center;
  padding: 2px;                 /* exactly 2px on all sides */
  border-radius: 10px;          /* keep if you want rounded corners; adjust or remove */
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

/* Control the graphic size (change as you like) */
.variant-picker__option-values .option-value--icon img {
  width: 64px;                  /* set your desired icon size */
  height: 64px;
  display: block;
}

/* Optional: spacing between icons (not padding inside the tile) */
.variant-picker__option-values {
  gap: 1px !important;          /* row spacing; change or remove */
}

.variant-picker__option-values .option-value--icon[aria-pressed="true"],
.variant-picker__option-values .option-value--icon.is-active,
.variant-picker__option-values .option-value--icon.is-selected,
.variant-picker__option-values .option-value--icon:has(input:checked) {
  background: #00ff55;
  border-color: #00ff55;
}

.variant-picker__option-values .option-value--icon.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
  pointer-events: none;
}





/* HLS: Size icon states */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon {
  /* base (unselected) */
  background: transparent;
  border-radius: 6px;
  outline: 1px solid transparent;
  outline-offset: 2px;
  opacity: .85;
  filter: grayscale(100%);
  transition: background .15s ease, outline-color .15s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
}

/* selected = bright green background */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"] {
  background: #00ff55;               /* ← bright green you asked for */
  filter: none;
  opacity: 1;
  outline-color: #111;                /* subtle inner edge for contrast */
  box-shadow: 0 0 0 2px #111, 0 0 0 4px #00ff55; /* double ring for dark themes */
}

/* hover focus cues (optional but nice) */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon:hover {
  opacity: 1;
  filter: grayscale(30%);
}
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon:focus-visible {
  box-shadow: 0 0 0 2px #111, 0 0 0 4px #00ff55;
}

/* disabled still looks disabled (even if selected) */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-disabled {
  opacity: .35 !important;
  filter: grayscale(100%) !important;
  box-shadow: none !important;
}


/* Base (leave normal look alone) */
variant-picker fieldset[data-hls-debug="sizes"] .option-value--icon {
  border-radius: 6px;
  transition: background .15s ease;
}

/* Selected: always bright green */
variant-picker fieldset[data-hls-debug="sizes"] .option-value--icon.is-selected,
variant-picker fieldset[data-hls-debug="sizes"] .option-value--icon[aria-pressed="true"] {
  background: #00ff55 !important;
}

/* Safety: if theme has a stronger hover, keep green on selected-hover */
variant-picker fieldset[data-hls-debug="sizes"] .option-value--icon.is-selected:hover,
variant-picker fieldset[data-hls-debug="sizes"] .option-value--icon[aria-pressed="true"]:hover {
  background: #00ff55 !important;
}


/* HLS fix: kill dashed focus outlines on size icons (but keep keyboard a11y if you want) */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon:focus,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon:focus-visible,
variant-picker fieldset[data-hls-debug="sizes"] input[type="radio"]:focus + label.option-value--icon,
variant-picker fieldset[data-hls-debug="sizes"] input[type="radio"]:focus-visible + label.option-value--icon {
  outline: none !important;
  box-shadow: none !important;   /* some themes use box-shadow as the focus ring */
}

/* Optional: if you still want a keyboard-only ring, add a green one here */
variant-picker fieldset[data-hls-debug="sizes"] input[type="radio"]:focus-visible + label.option-value--icon {
  outline: 2px solid #00ff55 !important;
  outline-offset: 2px;
}








/* Product Type scroller — horizontal only + thin visible scrollbar */
@media (max-width: 600px) {
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2 {
    --tile: 56px;
    --gap: 8px;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--gap) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;      /* no vertical scroll */
    touch-action: pan-x !important;      /* lock touch to horizontal */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    padding-inline: 10px;
    scroll-snap-type: x mandatory;

    /* SHOW the scrollbar (do NOT hide it) */
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: rgba(0,0,0,.35) transparent;       /* thumb, track */
  }

  /* WebKit scrollbar styling (Chrome/Safari) */
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar {
    height: 4px;                   /* thin bar below icons */
  }
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar-track {
    background: transparent;
  }
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.35);
    border-radius: 999px;
  }
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.55);
  }

  /* tiles */
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2 > .hls-type-picker__option {
    flex: 0 0 var(--tile) !important;
    width: var(--tile) !important;
    height: var(--tile) !important;
    display: grid; place-items: center;
    position: relative;
    border-radius: 8px;
    scroll-snap-align: start;
  }
  .variant-picker__option.hls-type-picker .hls-type-picker__icon,
  .variant-picker__option.hls-type-picker .hls-type-picker__icon img {
    width: 100%; height: 100%; object-fit: contain;
  }

  /* bigger tap area without looking bigger */
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2 > .hls-type-picker__option::before {
    content: ""; position: absolute; inset: -4px;
  }
}



/* Only shrink COLOR SWATCHES a touch on narrow screens */
@media (max-width: 600px) {
  /* If your color chips use .color-swatch, tweak just those */
  .color-swatch {
    /* reduce ~8–10% without wrecking layout */
    transform: scale(0.85);
    transform-origin: center;
  }

  /* If you prefer size-based instead of scale, use this instead of transform: */
  /* .color-swatch { width: calc(var(--swatch-size, 40px) - 4px); height: calc(var(--swatch-size, 40px) - 4px); } */
}



/* Hide the scrollbar completely (but allow horizontal scroll) */
@media (max-width: 600px) {
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;

    /* Hide in all engines */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Old IE/Edge */
  }

  /* WebKit (Chrome/Safari) */
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
}




/* Separate bar under the product-type row */
@media (max-width: 600px){
  .hls-scrollbar {                /* track */
    height: 3px;
    margin: 8px 10px 6px;
    background: rgba(0,0,0,.20);
    border-radius: 999px;
    position: relative;
    pointer-events: none;         /* never blocks taps */
  }
  .hls-scrollbar__thumb {         /* live thumb */
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;                     /* JS sets width */
    background: #00ff55;          /* brand color */
    border-radius: 999px;
    transform: translateX(0);     /* JS sets X */
    will-change: transform, width;
  }
}




@media (max-width: 600px){
  /* Hide native scrollbar if desired (optional) */
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2 {
    overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
    scrollbar-width: none;
  }
  .variant-picker__option.hls-type-picker > .variant-picker__option-values.wrap.gap-2::-webkit-scrollbar {
    height: 0; width: 0; display: none;
  }

  /* Separate, always-visible bar under the row */
  .hls-scrollbar {                 /* track */
    height: 3px;
    margin: 8px 10px 6px;
    background: rgba(0,0,0,.20);
    border-radius: 999px;
    position: relative;
    pointer-events: none;          /* <- cannot intercept taps */
  }
  .hls-scrollbar__thumb {          /* live thumb */
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;
    background: #00ff55;
    border-radius: 999px;
    transform: translateX(0);
    will-change: transform, width;
    pointer-events: none;          /* <- belt & suspenders */
  }

  /* Make sure buttons are on their own layer above anything else */
  .hls-type-picker__option { position: relative; z-index: 1; }
}




/* === HLS: Size icon dimensions (make them smaller) === */
variant-picker fieldset[data-hls-debug="sizes"] {
  /* single place to tune */
  --hls-size-icon: 70px;      /* overall tile box */
}

/* tile box */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon {
  inline-size: var(--hls-size-icon);
  block-size: var(--hls-size-icon);
  padding: var(--hls-size-pad);
  border-radius: var(--hls-size-radius);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
}

/* if the icon is an <img> or inline svg inside the label */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* if the size is text (S, M, L...), keep it readable at the new box size */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon {
  font-size: var(--hls-size-font);
  line-height: 1;
  font-weight: 700;
}

/* optional: make them a touch smaller on narrow screens */
@media (max-width: 600px) {
  variant-picker fieldset[data-hls-debug="sizes"] {
    --hls-size-icon: 60px;
    --hls-size-font: 11px;
    --hls-size-pad: 5px;
  }
}









/* HLS: Metaobject color swatches (works with Impact's option-value classes) */
.option-value--color .hls-color-swatch {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  

  /* smooth shrink without layout jump */
  transform-origin: center center;
  transition: transform .2s ease;
  will-change: transform;
}

.option-value--color {
  padding: 2px;                 /* add space between swatches */
  margin: 1px;
}

.option-value--color.is-selected .hls-color-swatch {
  outline: 10px solid #00ff55;
  transform: scale(0.85); /* shrink a bit on selection */
}

.option-value--color.is-disabled { opacity: .45; cursor: not-allowed; }



/* Make the currently selected color swatch ignore pointer/hover */
.option-value--color.is-selected,
.option-value--color[aria-pressed="true"],
.option-value--color[aria-checked="true"] {
  pointer-events: none;       /* no hover/click on the selected swatch */
  cursor: default;
}





/* Smooth shrink for SIZE icons on selection (scale the icon, not the green tile) */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon svg {
  transform-origin: center center;
  transition: transform .15s ease;
  will-change: transform;
}

variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"] img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected svg,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"] svg {
  transform: scale(0.88); /* tweak 0.82–0.94 to taste */
}

/* Keep the shrink even while hovering the selected tile */
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected:hover img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"]:hover img,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected:hover svg,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"]:hover svg {
  transform: scale(0.88);
}







/* Mobile: shrink color swatch icons on <= 600px */
@media (max-width: 600px) {
  .option-value--color .hls-color-swatch {
    width: 50px;   /* was 60px */
    height: 50px;  /* was 60px */
  }

  /* optional: tighten spacing a touch on mobile */
  .option-value--color {
    margin: 1px;   /* was 6px or whatever you set */
  }

  /* optional: if you use a thick selected outline, reduce it on mobile */
  .option-value--color.is-selected .hls-color-swatch {
    outline-width: 10px;      /* adjust from 10px if needed */
  }
}







/* =========================
   COLOR: crisp ring on the chip (not the label)
   ========================= */


/* 1) Base chip (unchanged sizing from your file) */
.option-value--color .hls-color-swatch {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform .2s ease, box-shadow .15s ease;
  will-change: transform, box-shadow;
}

@media (max-width: 600px) {
.option-value--color .hls-color-swatch {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform .2s ease, box-shadow .15s ease;
  will-change: transform, box-shadow;
  }

/* 2) Selected → green ring + shrink (no label border) */
label.option-value--color:has(input:checked) .hls-color-swatch {
  /* use a ring via box-shadow so it looks clean and doesn’t shift layout */
  box-shadow: 0 0 0 10px #00ff55 !important;  /* thickness = ring width */
  transform: scale(0.85);                     /* your shrink effect */
}
}

/* 3) Hover (desktop only) → yellow ring on the chip, but never when selected */
@media (hover: hover) and (pointer: fine) {
  label.option-value--color:not(:has(input:checked)):hover .hls-color-swatch {
    box-shadow: 0 0 0 3px #ffff33 !important;
    border: 4px #ffff33;
  }
}

/* 4) Mobile/tablet → kill sticky hover entirely */
@media (hover: none), (pointer: coarse) {
  label.option-value--color:hover .hls-color-swatch {
    box-shadow: none !important;
  }
}

/* 5) Disabled stays dim */
.option-value--color.is-disabled .hls-color-swatch {
  opacity: .45;
  filter: grayscale(100%);
}

/* 6) (Optional) tiny breathing room so the green ring shows cleanly */
.option-value--color { padding: 2px; margin: 1px; }




/* ===============================
   VARIANT PICKER — FINAL CONSOLIDATION
   - Desktop: allow hover on non-icon labels only
   - Size icons: selected = green; no yellow hover
   - Mobile/tablet: disable hover & tap flash on size icons
   =============================== */

/* Desktop-only hover (real pointers only): keep yellow for non-icon labels */
@media (hover: hover) and (pointer: fine) {
  .variant-picker__option-values.wrap.gap-2 label:not(.option-value--icon):hover {
    border: 2px solid var(--bd-hover);
    background-color: var(--bd-hover);
  }
}

/* Size icons: base + selected state (no yellow on hover needed) */
.variant-picker__option-values .option-value--icon {
  /* keep your existing visuals; just ensure no tap flash on iOS */
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

/* Selected = green */
.variant-picker__option-values .option-value--icon:has(input:checked),
.variant-picker__option-values input[type="radio"]:checked + label.option-value--icon,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected,
variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"] {
  background: #00ff55;
  border-color: #00ff55;
}

/* On desktop, do nothing special on hover for size icons (keeps green clean) */
@media (hover: hover) and (pointer: fine) {
  .variant-picker__option-values .option-value--icon:hover {
    background: inherit; /* no yellow */
    border-color: inherit;
  }
}

/* Touch devices: disable hover/active paints on size icons (prevents yellow flash) */
@media (hover: none), (pointer: coarse) {
  .variant-picker__option-values .option-value--icon:hover,
  .variant-picker__option-values .option-value--icon:active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  /* When selected, keep/restore green immediately */
  .variant-picker__option-values .option-value--icon:has(input:checked),
  .variant-picker__option-values input[type="radio"]:checked + label.option-value--icon,
  variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon.is-selected,
  variant-picker fieldset[data-hls-debug="sizes"] label.option-value--icon[aria-pressed="true"] {
    background: #00ff55;
    border-color: #00ff55;
  }
}





/* =========================
   MOBILE (≤600px): disable hover paints for variant pickers
   ========================= */
@media (max-width: 600px) {
  /* remove yellow hover on any variant label */
  .variant-picker__option-values label:hover,
  .variant-picker__option-values .option-value--icon:hover,
  .variant-picker__option-values .option-value--color:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* prevent tap flash and active tint */
  .variant-picker__option-values label {
    -webkit-tap-highlight-color: transparent;
  }
  .variant-picker__option-values label:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* keep selected tiles solid green and stable */
  .variant-picker__option-values input[type="radio"]:checked + label,
  .variant-picker__option-values label:has(input:checked) {
    background: #00ff55 !important;
    border-color: #00ff55 !important;
    box-shadow: none !important;
    pointer-events: none; /* selected tile can't be "hovered" again */
    cursor: default;
  }
}


/* =========================
   MOBILE (≤600px): disable hover paints for variant pickers
   ========================= */
@media (max-width: 600px) {
  /* remove yellow hover on any variant label */
  .variant-picker__option-values label:hover,
  .variant-picker__option-values .option-value--icon:hover,
  .variant-picker__option-values .option-value--color:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* prevent tap flash and active tint */
  .variant-picker__option-values label {
    -webkit-tap-highlight-color: transparent;
  }
  .variant-picker__option-values label:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* keep selected tiles solid green and stable */
  .variant-picker__option-values input[type="radio"]:checked + label,
  .variant-picker__option-values label:has(input:checked) {
    background: #00ff55 !important;
    border-color: #00ff55 !important;
    box-shadow: none !important;
    pointer-events: none; /* selected tile can't be "hovered" again */
    cursor: default;
  }
}






/* ===========================================
   MOBILE (≤600px) — kill yellow hover/active/focus
   for variant pickers, keep selected state green
   =========================================== */
@media (max-width: 600px) {
  /* Never paint hover/focus/active on mobile */
  .variant-picker__option-values label:is(:hover, :active, :focus, :focus-visible),
  .variant-picker__option-values .option-value--icon:is(:hover, :active, :focus, :focus-visible),
  .variant-picker__option-values .option-value--color:is(:hover, :active, :focus, :focus-visible),
  .variant-picker__option-values label::before,
  .variant-picker__option-values label::after {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* iOS tap flash */
  .variant-picker__option-values label {
    -webkit-tap-highlight-color: transparent;
  }

  /* Keep selected tiles solid green; also make them ignore hover */
  .variant-picker__option-values input[type="radio"]:checked + label,
  .variant-picker__option-values label:has(input:checked),
  .variant-picker__option-values .option-value--icon[aria-pressed="true"],
  .variant-picker__option-values .option-value--icon.is-selected {
    background: #00ff55 !important;
    border-color: #00ff55 !important;
    box-shadow: none !important;
    outline: none !important;
    pointer-events: none;   /* stops “sticky hover” */
    cursor: default;
  }

  /* If a theme injects inline yellow styles, neutralize them */
  .variant-picker__option-values [style*="#ffff33"],
  .variant-picker__option-values [style*="rgb(255, 255, 51)"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}






/* HLS — Newsletter button: bigger SUBSCRIBE text, slightly smaller icon */
.shopify-section--newsletter .fieldset-with-submit button[type="submit"] .text-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(19px, 4.8vw, 24px) !important; /* slightly larger text */
  font-weight: 700;
  text-transform: uppercase;                        /* SUBSCRIBE */
  letter-spacing: .04em;                            /* crisp caps */
  line-height: 1.1;
}

/* Slightly shrink the SVG icon */
.shopify-section--newsletter .fieldset-with-submit button[type="submit"] .text-with-icon svg,
.shopify-section--newsletter .fieldset-with-submit button[type="submit"] .text-with-icon .icon {
  width: 22px !important;   /* down from 24–26px */
  height: 22px !important;
  flex: 0 0 auto;
  fill: currentColor;
}

/* If the theme forces size on the button itself, mirror the type size */
.shopify-section--newsletter .fieldset-with-submit button[type="submit"].button--xl {
  font-size: clamp(19px, 4.8vw, 24px) !important;
}



/* Desktop ≥601px: tighten vertical padding on the SUBSCRIBE button */
@media (min-width: 700px) {
  .shopify-section--newsletter .fieldset-with-submit button[type="submit"].button--xl {
    padding-block: 10px;   /* adjust to taste (was likely 14–18px) */
    /* padding-inline stays the same */
  }

  /* keep label alignment tidy after padding change */
  .shopify-section--newsletter .fieldset-with-submit button[type="submit"] .text-with-icon {
    line-height: 1.1;
  }
}