/** Shopify CDN: Minification failed

Line 976:20 Expected ":"
Line 976:61 Expected ":"
Line 976:85 Expected ":"
Line 976:110 Expected ":"
Line 976:134 Expected ":"
Line 976:148 Expected ":"
Line 976:170 Expected ":"
Line 976:200 Expected ":"
Line 976:226 Expected ":"
Line 976:252 Expected ":"
... and 18 more hidden warnings

**/
:root {

  /* Timing */

  --duration-short: 100ms;

  --duration-default: 250ms;

  --duration-long: 500ms;

  --duration-slower: 800ms;

  

  /* Premium Easing Curves */

  --ease-out-slow: cubic-bezier(0.19, 1, 0.22, 1);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  

  /* Premium Shadows */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);

  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  --shadow-glow: 0 0 40px rgba(var(--color-accent-rgb), 0.15);

  

  /* Spacing Scale */

  --space-xs: 0.5rem;

  --space-sm: 1rem;

  --space-md: 2rem;

  --space-lg: 4rem;

  --space-xl: 6rem;

  --space-2xl: 10rem;

}



/* 

  Reset & Base Styles 

  -------------------

*/



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  -webkit-text-size-adjust: 100%;

}



body, h1, h2, h3, h4, moving-text, p, figure, blockquote, dl, dd {

  margin: 0;

}



html, body {

  max-width: 100%;

  overflow-x: hidden;

}



ul[role='list'], ol[role='list'] {

  list-style: none;

}



html:focus-within {

  scroll-behavior: smooth;

}



a:not([class]) {

  text-decoration-skip-ink: auto;

}



/* Ensure links are distinguishable without relying on color alone */

a {

  text-decoration-skip-ink: auto;

}



/* Links in content should have underlines for accessibility */

main a:not([class]),

.rte a {

  text-decoration: underline;

  text-decoration-color: currentColor;

  text-decoration-thickness: 1px;

  text-underline-offset: 2px;

}



img, picture {

  max-width: 100%;

  display: block;

}



*, *::before, *::after {

  box-sizing: border-box;

}



input, button, textarea, select {

  font: inherit;

}



@media (prefers-reduced-motion: reduce) {

  html:focus-within {

   scroll-behavior: auto;

  }

  

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}



/* 

  Typography Utilities 

  --------------------

  Premium typography with refined scaling and elegant spacing

*/

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

  font-family: var(--font-heading-family);

  font-style: var(--font-heading-style);

  font-weight: var(--font-heading-weight);

  color: var(--color-heading);

  line-height: var(--font-heading-line-height);

  text-transform: var(--font-heading-transform);

  letter-spacing: var(--font-heading-letter-spacing);

  text-wrap: balance;

}



h1, .h1 { 

  font-size: calc(var(--font-heading-base-size) * 1.4);

  line-height: 1.1;

}

h2, .h2 { 

  font-size: calc(var(--font-heading-base-size) * 1.2);

  line-height: 1.15;

}

h3, .h3 { 

  font-size: calc(var(--font-heading-base-size) * 1.08);

  line-height: 1.2;

}

h4, .h4 { font-size: var(--font-heading-base-size); }

h5, .h5 { font-size: calc(var(--font-heading-base-size) * 0.85); }



.h0 {

  font-size: calc(var(--font-heading-base-size) * 1.8);

  line-height: 1.05;

  letter-spacing: -0.02em;

}



/* Desktop Scaling - Premium proportions */

@media screen and (min-width: 750px) {

  h1, .h1 { 

    font-size: calc(var(--font-heading-base-size) * 1.75);

    line-height: 1.08;

  }

  h2, .h2 { 

    font-size: calc(var(--font-heading-base-size) * 1.45);

    line-height: 1.12;

  }

  h3, .h3 { 

    font-size: calc(var(--font-heading-base-size) * 1.2);

    line-height: 1.18;

  }

  .h0 { 

    font-size: calc(var(--font-heading-base-size) * 2.5);

    letter-spacing: -0.03em;

  }

}



@media screen and (min-width: 990px) {

  .h0 { 

    font-size: calc(var(--font-heading-base-size) * 3);

  }

}



/* Accent Text (Metadata) */

.caption, .caption-large, .uppercase {

  font-family: var(--font-accent-family);

  font-style: var(--font-accent-style);

  font-weight: var(--font-accent-weight);

  text-transform: var(--font-accent-transform);

  letter-spacing: var(--font-accent-letter-spacing);

}



.caption {

  font-size: var(--font-accent-base-size);

}



/* 

  Layout & Grid 

  -------------

  Using a flexible grid that can support the asymmetrical layouts.

*/

.page-width {

  max-width: var(--page-width);

  margin: 0 auto;

  padding: 0 var(--page-padding-x);

}



@media screen and (min-width: 750px) {

  .page-width {

    padding: 0 var(--page-padding-x-desktop);

  }

}



.grid {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 2rem;

  padding: 0;

  list-style: none;

  column-gap: var(--grid-desktop-horizontal-spacing);

  row-gap: var(--grid-desktop-vertical-spacing);

}



.grid__item {

  width: 100%; /* Default mobile: full width */

  max-width: 100%;

}



@media screen and (min-width: 750px) {

  .grid__item {

    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);

  }

}



/* Width helpers */

.width-100 { width: 100%; }



@media screen and (min-width: 750px) {

  .width-50 { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); }

  .width-33 { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); }

}



/* 

  Components 

  ----------

*/

.link {

  cursor: pointer;

  display: inline-block;

  border: none;

  box-shadow: none;

  color: inherit;

  background-color: transparent;

  font-size: 1.4rem; /* Fallback */

  font-size: var(--font-body-base-size);

  position: relative;

  text-decoration: none;

}



.link::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 100%;

  height: 1px;

  background: currentColor;

  transform: scaleX(1);

  transform-origin: right;

  transition: transform var(--duration-default) var(--ease-out-expo);

}



.link:hover::after {

  transform: scaleX(0);

  transform-origin: left;

}



/* For links that should have persistent underline */

.link--underline {

  text-decoration: underline;

  text-underline-offset: 0.3rem;

}



.link--underline::after {

  display: none;

}



.button {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  border: var(--button-border-width) solid var(--button-border-color);

  padding: 0 var(--button-padding-x);

  cursor: pointer;

  font: inherit;

  text-decoration: none;

  color: var(--button-text);

  transition: 

    transform var(--duration-default) var(--ease-out-expo),

    box-shadow var(--duration-default) var(--ease-out-expo), 

    background-color var(--duration-default) ease, 

    color var(--duration-default) ease, 

    border-color var(--duration-default) ease;

  background-color: var(--button-bg);

  min-height: var(--button-height);

  min-width: 12rem;

  font-family: var(--font-accent-family);

  text-transform: uppercase;

  letter-spacing: var(--button-letter-spacing);

  font-size: var(--button-font-size);

  border-radius: var(--button-radius);

  box-shadow: var(--button-shadow);

  position: relative;

  overflow: hidden;

  isolation: isolate;

}



/* Premium shimmer effect on hover */

.button::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.15),

    transparent

  );

  transition: left var(--duration-long) var(--ease-out-expo);

  z-index: -1;

}



.button:hover::before {

  left: 100%;

}



.button:hover {

  background-color: var(--button-hover-bg);

  color: var(--button-hover-text);

  border-color: var(--button-hover-border-color);

  box-shadow: var(--button-hover-shadow);

  transform: translateY(-2px);

}



.button:active {

  transform: translateY(0);

  transition-duration: 50ms;

}



.button--secondary {

  background-color: var(--button-secondary-bg);

  border-color: var(--button-secondary-border-color);

  color: var(--button-secondary-text);

  box-shadow: none;

}



.button--secondary:hover {

  background-color: var(--button-secondary-hover-bg);

  color: var(--button-secondary-hover-text);

  border-color: var(--button-secondary-border-color);

}



/* Visually Hidden */

.visually-hidden {

  position: absolute !important;

  overflow: hidden;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  border: 0;

  clip: rect(0 0 0 0);

  word-wrap: normal !important;

}



.skip-to-content-link:focus {

  z-index: 9999;

  position: absolute;

  top: 0;

  left: 0;

  width: auto;

  height: auto;

  clip: auto;

  padding: 1rem;

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

  color: var(--color-foreground);

}



/* 

  Focus Styles for Keyboard Navigation 

  -------------------------------------

  Using :focus-visible for better UX (only shows on keyboard navigation)

*/

:focus-visible {

  outline: 2px solid var(--color-accent, currentColor);

  outline-offset: 3px;

}



/* Remove default focus for mouse users */

:focus:not(:focus-visible) {

  outline: none;

}



/* Specific focus styles for interactive elements */

a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

[tabindex]:focus-visible {

  outline: 2px solid var(--color-accent, currentColor);

  outline-offset: 3px;

  border-radius: 2px;

}



/* Button focus states */

.button:focus-visible {

  outline: 2px solid var(--color-accent, currentColor);

  outline-offset: 3px;

  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb, 0, 0, 0), 0.2);

}



/* Card and interactive block focus */

.card:focus-visible,

.product-card:focus-visible,

.article-card:focus-visible {

  outline: 2px solid var(--color-accent, currentColor);

  outline-offset: 4px;

}



/* Form input focus */

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

  border-color: var(--color-accent, currentColor);

  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 0, 0, 0), 0.15);

}



/* Price Component */

.price .price__sale { display: none; }

.price .price__regular { display: block; }

.price.price--on-sale .price__sale { display: flex; gap: 1rem; align-items: baseline; }

.price.price--on-sale .price__regular { display: none; }

.price__sale .price-item--regular { text-decoration: line-through; opacity: 0.7; } 

.price-item--sale { font-weight: bold; }



/* 

  Mobile Optimizations 

*/

@media screen and (max-width: 749px) {

  .product-form__submit {

    min-height: 5rem; /* Ensure clickable area */

    font-size: 1.4rem; /* Larger text for button */

  }

}



/* 

  Premium Section Utilities

  -------------------------

*/



/* Section dividers */

.section--divider-top::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  max-width: var(--page-width);

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(var(--color-foreground-rgb), 0.1), transparent);

}



.section--divider-bottom::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  max-width: var(--page-width);

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(var(--color-foreground-rgb), 0.1), transparent);

}



/* Premium section header styling */

.section__header {\n  margin-bottom: var(--space-lg, 4rem);\n}\n\n.section__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 1rem;\n  font-size: 1.1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.2em;\n  margin-bottom: 1.5rem;\n  color: var(--color-accent);\n}\n\n.section__label::before {\n  content: '';\n  width: 40px;\n  height: 1px;\n  background: currentColor;\n  opacity: 0.5;\n}\n\n.section__title {\n  font-size: clamp(2.6rem, 4vw, 4rem);\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n\n.section__description {\n  margin-top: 1.5rem;\n  font-size: 1.6rem;\n  line-height: 1.65;\n  max-width: 50ch;\n  color: rgba(var(--color-foreground-rgb), 0.75);\n}



/* Visibility Utilities */

.small-hide { display: none !important; }

.large-up-hide { display: block !important; }

@media screen and (min-width: 750px) {

  .small-hide { display: block !important; }

  .medium-hide { display: none !important; }

  .large-up-hide { display: none !important; }

}

@media screen and (min-width: 990px) {

  .medium-hide { display: block !important; }

}



/* Loading States */

.product-form__submit {

  position: relative;

}



.product-form__submit.loading > span {

  visibility: hidden;

  opacity: 0;

}



.loading-overlay__spinner {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 1.8rem;

  height: 1.8rem;

}



.spinner {

  animation: rotator 1.4s linear infinite;

}



@keyframes rotator {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(270deg); }

}



.path {

  stroke-dasharray: 280;

  stroke-dashoffset: 0;

  transform-origin: center;

  stroke: currentColor;

  animation: dash 1.4s ease-in-out infinite;

}



@keyframes dash {

  0% { stroke-dashoffset: 280; }

  50% { stroke-dashoffset: 75; transform: rotate(135deg); }

  100% { stroke-dashoffset: 280; transform: rotate(450deg); }

}



.loading-overlay__spinner.hidden {

  display: none;

}





/* Color Schemes */

.color-background-1 {

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

  color: var(--color-foreground);

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

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

  --color-heading: var(--color-foreground);

}



.color-background-2 {

  background-color: rgba(var(--color-foreground-rgb), 0.05); /* Subtle grey */

  color: var(--color-foreground);

  --color-background: rgba(var(--color-foreground-rgb), 0.05);

  --color-heading: var(--color-foreground);

}



.color-inverse {

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

  color: var(--color-background);

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

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

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

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

  --color-heading: var(--color-background);

}



.color-accent-1 {

  background-color: var(--color-btn-solid-bg); /* Use button color as accent */

  color: var(--color-btn-solid-label);

  --color-foreground: var(--color-btn-solid-label);

  --color-background: var(--color-btn-solid-bg);

  --color-heading: var(--color-btn-solid-label);

  --color-foreground-rgb: var(--color-btn-solid-label-rgb);

  --color-background-rgb: var(--color-btn-solid-bg-rgb);

}



.color-accent-2 {

  background-color: var(--color-border); /* Use border/accent color */

  color: var(--color-foreground);

  --color-background: var(--color-border);

  --color-heading: var(--color-foreground);

  --color-background-rgb: var(--color-border-rgb);

}



/* Ensure child elements inherit properly in schemes */

[class^="color-"] .card, 

[class*=" color-"] .card,

[class^="color-"] .product-recommendations__heading,

[class*=" color-"] .product-recommendations__heading {

  background-color: transparent;

  color: inherit;

}



/* Cart Icon & Bubble Fixes */

.header__icon-button {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cart-count-bubble {

  position: absolute;

  background-color: var(--color-btn-solid-bg);

  color: var(--color-btn-solid-label);

  height: 1.5rem;

  width: 1.5rem;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 0.9rem;

  top: 0;

  right: 0;

  line-height: 1;

  pointer-events: none; /* Let clicks pass through to the cart button */

}



/* Responsive readability guardrails */
@media screen and (max-width: 989px) {
  .shopify-section h1,
  .shopify-section h2,
  .shopify-section h3,
  .shopify-section h4,
  .shopify-section .h0,
  .shopify-section .h1,
  .shopify-section .h2,
  .shopify-section .h3,
  .shopify-section .h4 {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
  }

  .shopify-section .rte,
  .shopify-section .rte p,
  .shopify-section p,
  .shopify-section .section__text,
  .shopify-section .section__description {
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 749px) {
  .shopify-section .button,
  .shopify-section .btn,
  .shopify-section .link,
  .shopify-section a.button,
  .shopify-section a.link {
    white-space: normal;
  }

  .shopify-section .button,
  .shopify-section .btn {
    line-height: 1.2;
  }

  .shopify-section .card__content,
  .shopify-section .collection-card__content,
  .shopify-section .card__information {
    min-width: 0;
  }
}


/* ── Mobile Touch Button Effects ─────────────────────────── */
/* Auto-shimmer for touch devices (no hover) */
@keyframes auto-shimmer {
  0%, 85%, 100% { left: -100%; }
  90% { left: 100%; }
}

@media (hover: none) and (pointer: coarse) {
  .button--primary::before,
  .btn-shine::before {
    animation: auto-shimmer 6s ease-in-out infinite;
    animation-delay: 2s;
  }

  .button:active {
    transform: scale(0.97);
    transition-duration: 80ms;
  }

  /* Tap ripple effect for mobile */
  .button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
  }

  .button:active::after {
    opacity: 1;
  }
}

/* ── Add-to-Cart Loading Fix ─────────────────────────────── */
/* Hide Shopify default spinner — premium system uses progress bar */
.product-form__submit.loading .loading-overlay__spinner,
.product-form__submit.loading .loading-overlay__spinner.hidden {
  display: none !important;
  visibility: hidden !important;
}

.product-form__submit.loading > span {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Success state */
.product-form__submit.is-success {
  position: relative;
}

.product-form__submit.is-success .loading-overlay__spinner {
  display: none !important;
}