/** Shopify CDN: Minification failed

Line 1887:0 All "@import" rules must come first
Line 1981:0 All "@import" rules must come first

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-inline-end var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

.page-wrapper--drawer-open {
  margin-inline-end: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-inline: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flip-x {
  scale: -1 1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-left {
  --text-align: start;

  text-align: start;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: end;

  text-align: end;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: flex-end;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Caret icon transition */
.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);

  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: start;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  inset-inline-start: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}


                                                                  /*Changus from Me*/
                                                  /* =======================================================
                                                    PREMIUM ACCENT ANNOUNCEMENT BAR UPGRADE
                                                    ======================================================= */
/* 1. Turns the background to a deep obsidian dark line and adds an orange accent trim */
.announcement-bar,
aside.announcement-bar {
  background-color: #141413ff !important; /* Rich solid dark background line */
  border-bottom: 2px solid #F7941D !important; /* Elegant thin matching orange border accent stripe */
  position: relative !important;
  overflow: hidden !important;
  padding-top: 10px !important;    /* Uniform professional vertical breathing room */
  padding-bottom: 10px !important;
}
/* 2. Styles the text block to match a premium athleisure/shoe brand layout look */
.announcement-bar__text,
.announcement-bar__slider,
.announcement-bar__slider span,
.announcement-bar p {
  color: #ffffff !important;         /* Sharp high-contrast white text */
  font-family: 'Fredoka', 'Quicksand', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;       /* Semi-bold text weights to make characters pop out clearly */
  letter-spacing: 0.12em !important; /* Premium horizontal letter spacing spacing */
  text-transform: uppercase !important; /* Uniform classic layout structure */
}




                                                                /*Universal Header Font Fix for Horizon Theme */






/* =======================================================
   FONTS IMPORT ENGINE
   ======================================================= */
@import url('https://googleapis.com');

/* =======================================================
   UNIVERSAL HEADER FONT FIX (SLEEK SMALL MONTSERRAT)
   ======================================================= */
header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]),
#shopify-section-header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]),
.header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]) {
 font-family: "Montserrat", sans-serif !important;
 font-size: 12px !important;       /* Reduced font size for a cleaner look */
 font-weight: 800 !important;       /* Reduced weight/thickness to Medium */
 text-transform: uppercase !important;
 letter-spacing: 0.1em !important;  /* Elegant letter spacing optimized for smaller fonts */
 display: inline-block !important; 
 width: max-content !important;    
 
 /* Invisible border placeholder stops layout shifting/expanding on hover */
 padding: 4px 10px !important;      /* Adjusted breathing room slightly for smaller text */
 border: 2px solid transparent !important;
 background-color: transparent !important;
 transition: all 0.2s ease-in-out !important;
}

/* =======================================================
   VERTICAL-OPTIMIZED HEADER HOVER EFFECTS (ZERO EXPANSION)
   ======================================================= */
header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]):hover,
#shopify-section-header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]):hover,
.header a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]):hover,
nav a:not([class*="logo"]):not([class*="heading"]):not([class*="brand"]):hover {
  /* 1. Turns text into vibrant brand orange */
  color: #F7941D !important;
  
  /* 2. Swaps transparent background and border for the brand styling seamlessly */
  background-color: #3b3a37ff !important;
  border: 2px solid #F7941D !important;
  border-radius: 2px !important;
  
  /* 3. Strip all shifting properties */
  box-shadow: none !important; 
  outline: none !important;
  transform: none !important; 
}

/* =======================================================
   ULTIMATE HARD RESET: REMOVE BLACK LINES & BOXES FROM LOGO
   ======================================================= */
header a[class*="logo"],
header a[class*="heading"],
.header__heading-link,
[class*="logo-link"],
header a[class*="logo"]:hover,
header a[class*="heading"]:hover,
.header__heading-link:hover,
[class*="logo-link"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  padding: 0 !important;
}



/* ==========================================================================
   🖥️ DESKTOP HEADER CONFIGURATION (Laptops & Computers)
   ========================================================================== */
@media (min-width: 750px) {
  header, #shopify-section-header, .header, .site-header {
    min-height: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}
/* Adjust navigation menu vertical spacing */
header nav,
.header nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 40px; /* align links vertically */
}
/* Adjust links inside nav */
header nav a,
.header nav a {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  line-height: 30px !important;
  font-size: 14px; /* optional smaller font */
}

/* ==========================================================================
   KIDS SCHOOL SHOE STORE - COMBINED TYPOGRAPHY LAYOUT (OPTION 2)
   ========================================================================== */
@import url('https://googleapis.com');

/* --- 1. PLAYFUL PRIMARY TITLES & BANNER HEADINGS ONLY --- */
/* Strictly targets top page titles, text-heros, and image banner headers */
h1.collection-hero__title,
h1.page-title,
.banner__heading,
.image-with-text__heading,
.brand-hero-heading,
.ss-style-hero-title {
    color: #111111 !important;
    font-size: clamp(20px, 4vw, 36px) !important;
    font-weight: 900 !important; /* Slightly bumped from 300 to show the 3D text-shadow cleanly */
    text-transform: uppercase !important; 
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important; 
    cursor: pointer !important;
    transition: all 0.3s ease !important; 
    text-shadow: 1px 1px 1px #999999 !important; 
    letter-spacing: 0.04em !important;
}

/* --- 2. MATCHING ORANGE HOVER STATE ONLY FOR THESE MAIN HEADINGS --- */
/*h1.collection-hero__title:hover,
h1.page-title:hover,
.banner__heading:hover,
.image-with-text__heading:hover,
.brand-hero-heading:hover,
.ss-style-hero-title:hover {
    color: #F7941D !important; 
    text-shadow: 2px 2px 0px #111111 !important; 
}

    
     3D SHADOW INJECTION: Sharp orange geometric drop tracking shadow 
    text-shadow: 2px 2px 0px #F7941D !important; 
    letter-spacing: 0.02em !important;
}*/


/* ==========================================================================
   KIDS SCHOOL SHOE STORE - RECTANGULAR HERO CTA BUTTON CONFIGURATION
   ========================================================================== */

/* --- 1. FORCE THE BUTTON CONTAINER TO CENTER --- */
/* Combines all parent wrapper targets into a single clean layout engine */
div:has(> a.button.size-style[class*="button--"]),
.banner__buttons,
[data-block-type="button"],
main [class*="buttons--"],
main [class*="button-wrapper"] {
   display: flex !important;
   justify-content: center !important;  /* Horizontally centers the button block */
   align-items: center !important;
   width: 100% !important;
   max-width: 100% !important;
   margin: 20px auto 0 auto !important; /* Centers it globally using equal margins */
   flex-basis: 100% !important;         /* Breaks out of left-aligned columns */
}

/* --- 2. THE RECTANGLE BUTTON DESIGN PRIMARY (With Fredoka & Brand Orange) --- */
a.button.size-style[class*="button--"] {
    font-family: 'Fredoka', 'Fredoka One', sans-serif !important; /* Forces Fredoka directly onto button text */
    
    /* Color Strategy Strategy */
    background-color: #111111 !important; /* Your signature vibrant brand orange */
    color: #ffffff !important;            /* High-contrast solid black text color */
    border: 2px solid #F7941D !important;
    opacity: 1 !important;
    
    /* RECTANGLE CORE ADJUSTMENT */
    border-radius: 0px !important;        /* HARD RESET: Removes pill shape for strict 90-degree corners */

    /* Button Proportions */
    font-size: 12px !important;           
    font-weight: 700 !important;          /* Makes text thick and bold to stand out */
    padding: 14px 50px !important;        /* Balanced horizontal cushions optimized for a sharp box */
    letter-spacing: 0.08em !important;    /* Airy, modern lifestyle character spacing */
    text-transform: uppercase !important; /* Uniform professional all-caps look */
    
    display: inline-flex !important;      
    align-items: center !important;
    justify-content: center !important;
    
    /* Animation Timing Frame */
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.15) !important; /* Subtle warm color glow */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
}
/* --- 5. THE BLACK HOVER SHIFT --- */

a.button.size-style[class*="button--"]:hover {

    background-color: #ffffff !important; /* Smooth flip to solid matching black */
 border-color: #F7941D !important;
    color: #111111 !important;            

    transform: scale(1.04) !important;    /* Modern, friendly 4% zoom pop effect */

    box-shadow: 0 8px 20px rgba(182, 72, 72, 0.15) !important; /* Soft depth shadow */

}

/* --- 3. SECONDARY BUTTON MASTER BASE DESIGN --- */
a.button.size-style[class*="button--secondary"],
.button--secondary,
a.button[class*="button--secondary"],
.button.button--secondary,
a.button-secondary,
.button-secondary,
.banner__buttons a:nth-child(2),
.banner__buttons a.button-secondary,
[class*="marquee"] a.button--secondary,
[class*="marquee"] .button-secondary {
    font-family: 'Fredoka', 'Fredoka One', sans-serif !important;
    background-color: transparent !important; 
    color: #111111 !important;                 
    border: 2px solid #111111 !important;     
    background-image: none !important;        
    opacity: 1 !important;
    border-radius: 0px !important;             

    /* Button Proportions (Desktop Baseline) */
    font-size: 16px !important;           
    font-weight: 700 !important;          
    padding: 14px 50px !important;        
    letter-spacing: 0.08em !important;    
    text-transform: uppercase !important; 
    display: inline-flex !important;      
    align-items: center !important;
    justify-content: center !important;

    /* Animation Framework */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
}

/* SECONDARY HOVER STATE */
@media screen and (min-width: 750px) {
  a.button.size-style[class*="button--secondary"]:hover,
  .button--secondary:hover,
  a.button[class*="button--secondary"]:hover,
  .button.button--secondary:hover,
  a.button-secondary:hover,
  .button-secondary:hover,
  .banner__buttons a:nth-child(2):hover,
  .banner__buttons a.button-secondary:hover {
      background-color: #ffffff !important;  
      border: 2px solid #F7941D !important;   
      color: #111111 !important;             
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 16px rgba(247, 148, 29, 0.25) !important; 
      border-radius: 0px !important;
  }
  .button--secondary:hover *, .button-secondary:hover *, a[class*="button--secondary"]:hover * {
      color: #111111 !important;
  }
}
 
/* ============================================================================
   MOBILE HEADER MENU PROTECTION SHIELD (REPAIRS COLOUMN PILE & ICONS)
   ============================================================================ */

/* 1. SEPARATES AND COMPLETELY STRIPS INJECTED ARROWS & UNDERLINES FROM MENU SLIDES */
.menu-drawer summary::before, .menu-drawer summary::after,
[id*="menu"] summary::before, [id*="menu"] summary::after,
[class*="menu"] summary::before, [class*="menu"] summary::after,
[id*="Nav"] summary::before, [id*="Nav"] summary::after,
[class*="nav"] summary::before, [class*="nav"] summary::after,
.header__inline-menu summary::before, .header__inline-menu summary::after {
  content: none !important;
  display: none !important;
}

/* 2. OVERRIDES VERTICAL COLUMN LAYOUTS AND RESTORES HORIZONTAL MENU ROWS */
/* This instantly snaps your close marks (X) and arrow labels back onto a single line */
.menu-drawer summary,
[id*="menu"] summary,
[class*="menu"] summary,
[id*="Nav"] summary,
[class*="nav"] summary,
.header__inline-menu summary {
  display: flex !important;
  flex-direction: row !important;      /* Forces items back onto a clean horizontal line */
  align-items: center !important;
  justify-content: space-between !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: inherit !important;
  height: auto !important;
  width: auto !important;
}


/* 🖥️ DESKTOP HERO WIDTH CONTROLLER */
@media screen and (min-width: 750px) {
  /* Locks the hero module into a standard bounded page container layout */
  .hero,
  .hero-section,
  .image-banner,
  .banner {
    width: 100% !important;
    max-width: 1440px !important; /* Matches your carousel and banner layout guidelines */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensures internal media files stick safely inside the new bordered frame boundary */
  .hero__container,
  .hero__image,
  .hero__image img,
  .banner__media,
  .banner__media img {
    border-radius: 8px !important; /* Optional: Softens edges to blend into a boxed style look */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* 📱 MOBILE HERO WIDTH CONTROLLER (Matches your desktop layout rules) */
@media screen and (max-width: 749px) {
  /* Locks the home hero section inside your page layout boundaries on mobile phones */
  .hero,
  .hero-section,
  .image-banner,
  .banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto !important; /* Centers the block with clean top/bottom separation spacing */
    padding-left: 10px !important;  /* Reduces edge-to-edge side margins to match your specific layout settings */
    padding-right: 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Ensures internal media graphics clip smoothly into a bounded layout panel framework */
  .hero__container,
  .hero__image,
  .hero__image img,
  .banner__media,
  .banner__media img {
    border-radius: 6px !important; /* Softens corners to give it a neat, high-end retail card style layout */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* 🏷️ GLOBAL HEADER LOGO OVERRIDE SYSTEM */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important; 
  letter-spacing: 0.12em !important;   /* Slightly widened for premium legibility */
  color: #111111 !important;           
  font-size: clamp(16px, 2.5vw, 22px) !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* 🏷️ GLOBAL HEADER LOGO OVERRIDE SYSTEM */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important; 
  letter-spacing: 0.12em !important;   /* Slightly widened for premium legibility */
  color: #111111 !important;           
  font-size: clamp(16px, 2.5vw, 22px) !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* 🏷️ GLOBAL HEADER LOGO OVERRIDE SYSTEM - COMFORTAA */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Comfortaa', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important; 
  letter-spacing: 0.08em !important;   /* Slightly tighter than Montserrat to keep rounded letters cohesive */
  color: #111111 !important;           
  font-size: clamp(16px, 2.5vw, 22px) !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* 🏷️ GLOBAL HEADER LOGO OVERRIDE SYSTEM - BUNGEE */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Bungee', sans-serif !important;
  font-weight: 400 !important;         /* Bungee only comes in regular, but is naturally ultra-bold */
  text-transform: uppercase !important; 
  letter-spacing: 0.05em !important;   /* Naturally wide, needs less extra tracking */
  color: #111111 !important;           
  font-size: clamp(14px, 2.3vw, 20px) !important; /* Scaled slightly down due to mass */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* 🏷️ GLOBAL HEADER LOGO OVERRIDE SYSTEM */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important; 
  letter-spacing: 0.12em !important;   
  color: #111111 !important;           
  font-size: clamp(16px, 2.5vw, 22px) !important;
  
  /* 🛠️ FORCE POSITIONING & CENTER ALIGNMENT */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Reset margins/paddings that might be pushing it upward */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  
  /* Forces the line layout box to take up natural space vertically */
  line-height: normal !important; 
  height: auto !important;
  
  visibility: visible !important;
  opacity: 1 !important;
}

/* 📱 MOBILE-SPECIFIC PARENT FORCE (Ensures the wrapper centers its contents) */
@media screen and (max-width: 749px) {
  html body [class*="logo"],
  html body [class*="heading"],
  html body .site-header__logo,
  html body .header__heading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 100% !important;
  }
}





/* 🏷️ GLOBAL HEADER LOGO & TAGLINE OVERRIDE SYSTEM */
html body a[href="/"].site-header__logo-link,
html body a[href="/"].header__heading-link,
html body a[href="/"][class*="logo"],
html body a[href="/"][class*="heading"] {
  font-family: 'Fredoka', sans-serif !important; /* Swapped to Fredoka as per your secondary config */
  font-weight: 600 !important;
  text-transform: uppercase !important; 
  letter-spacing: 0.12em !important;   
  color: #111111 !important;           
  font-size: clamp(16px, 2.5vw, 22px) !important;
  
  /* 🛠️ FORCE VERTICAL STACKING TO ALLOW TAGLINE BELOW */
  display: flex !important;
  flex-direction: column !important; /* Places tagline directly under the logo text */
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  
  line-height: 1.2 !important; 
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 🏷️ INJECT THE TAGLINE BELOW LOGO TEXT */
html body a[href="/"].site-header__logo-link::after,
html body a[href="/"].header__heading-link::after,
html body a[href="/"][class*="logo"]::after,
html body a[href="/"][class*="heading"]::after {
  content: "KINDY TO LACE-UPS" !important; /* 👈 Replace with your real tagline text */
  font-family: sans-serif !important;     /* Clean, secondary look for clarity */
  font-weight: 400 !important;
  font-size: clamp(9px, 1.2vw, 11px) !important; /* Keeps tagline elegantly small */
  color: #555555 !important;              /* Softer charcoal grey colour for depth */
  letter-spacing: 0.08em !important;
  text-transform: none !important;        /* Keeps normal sentence case formatting */
  margin-top: 4px !important;             /* Space between the main logo and the tagline */
  line-height: 1 !important;
  display: block !important;
}

/* 📱 MOBILE-SPECIFIC PARENT FORCE */
@media screen and (max-width: 749px) {
  html body [class*="logo"],
  html body [class*="heading"],
  html body .site-header__logo,
  html body .header__heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: auto !important;
  }
}




/* ==========================================================================
   DESKTOP ONLY: Exact image aspect ratio layout
   ========================================================================== */
@media screen and (min-width: 750px) {
  .image-banner,
  .banner,
  .banner__media,
  .hero__container {
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 1040 / 512 !important;
  }

  .banner__media img,
  .hero__image img {
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .banner__content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}