/** Shopify CDN: Minification failed

Line 832:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════════════════════════════════════
   Ki'olal Design System — Global UX Polish
   A unified luxury design language across the entire website.
   Inspired by Loro Piana, Aesop, Hermès, Aman Resorts.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Color palette */
  --kiolal-gold: #C4A97D;
  --kiolal-gold-hover: #b8965a;
  --kiolal-dark: #1a1a1a;
  --kiolal-dark-soft: #2C2C2C;
  --kiolal-cream: #fffdf9;
  --kiolal-warm-gray: #6b6560;
  --kiolal-border: rgba(44, 44, 44, 0.12);
  --kiolal-border-hover: rgba(44, 44, 44, 0.35);

  /* Motion — unified luxury timing */
  --kiolal-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --kiolal-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kiolal-duration-micro: 0.3s;
  --kiolal-duration-medium: 0.5s;
  --kiolal-duration-reveal: 0.8s;
  --kiolal-duration-slow: 1.2s;
  --kiolal-transition: var(--kiolal-duration-micro) var(--kiolal-ease);

  /* Spacing — vertical rhythm */
  --kiolal-space-xs: 8px;
  --kiolal-space-sm: 16px;
  --kiolal-space-md: 24px;
  --kiolal-space-lg: 40px;
  --kiolal-space-xl: 64px;
  --kiolal-space-2xl: 96px;
  --kiolal-space-3xl: 120px;
  --kiolal-section-gap: var(--kiolal-space-3xl);
  --kiolal-subsection-gap: var(--kiolal-space-xl);

  /* Typography scale */
  --kiolal-text-xs: 0.7rem;
  --kiolal-text-sm: 0.8rem;
  --kiolal-text-base: 1rem;
  --kiolal-text-lg: 1.125rem;
  --kiolal-text-xl: 1.5rem;

  /* Icon system */
  --kiolal-icon-nav: 20px;
  --kiolal-icon-stroke: 1.5px;

  /* Shadows */
  --kiolal-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --kiolal-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --kiolal-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --kiolal-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
}


/* ─────────────────────────────────────────────────────────────────────────
   2. UNIFIED MOTION SYSTEM
   All transitions use the same luxury easing — slow, elegant, minimal.
   ───────────────────────────────────────────────────────────────────────── */

/* Override inconsistent theme transitions */
.btn,
.shopify-payment-button .shopify-payment-button__button--unbranded,
#challenge .shopify-challenge__button {
  transition: color var(--kiolal-transition),
              background-color var(--kiolal-transition),
              border-color var(--kiolal-transition),
              transform var(--kiolal-transition),
              box-shadow var(--kiolal-transition) !important;
}

a,
.product-link,
.product-item__bg,
.product-item__bg__under,
.product-item__bg__inner {
  transition: color var(--kiolal-transition),
              opacity var(--kiolal-transition) !important;
}

/* Image treatments — consistent hover zoom */
.product-item__image img,
.product__slide img,
.product__thumb img,
.collection-item__image img,
.grid-product__image img {
  transition: transform var(--kiolal-duration-medium) var(--kiolal-ease-out) !important;
}

@media (hover: hover) {
  .product-item:hover .product-item__image img,
  .grid-product:hover .grid-product__image img,
  .collection-item:hover .collection-item__image img {
    transform: scale(1.02) !important;
  }
}

/* Overflow hidden on image containers to contain the zoom */
.product-item__image,
.grid-product__image,
.collection-item__image {
  overflow: hidden !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. BUTTON REFINEMENTS
   Premium feel — subtle lift on hover, elegant press state.
   ───────────────────────────────────────────────────────────────────────── */

/* Primary buttons — luxury hover */
@media (hover: hover) {
  .btn:not(.btn--text):not([disabled]):hover,
  .shopify-payment-button .shopify-payment-button__button--unbranded:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--kiolal-shadow-hover) !important;
  }
}

/* Active/pressed state — subtle, never aggressive */
.btn:not(.btn--text):not([disabled]):active,
.shopify-payment-button .shopify-payment-button__button--unbranded:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: var(--kiolal-shadow-sm) !important;
}

/* Text buttons — underline animation */
.btn--text span.btn__text::after,
.btn--text span:not([class])::after {
  transition: background-size var(--kiolal-transition) !important;
}

/* Quick Add buttons on product cards */
.quick-add-btn,
.product-item__quick-add,
[class*="quick-add"] button,
.btn--quick {
  transition: opacity var(--kiolal-transition),
              transform var(--kiolal-transition) !important;
}

@media (hover: hover) {
  .product-item:hover .quick-add-btn,
  .product-item:hover .product-item__quick-add,
  .product-item:hover [class*="quick-add"] button,
  .grid-product:hover .btn--quick {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. ICONOGRAPHY — Consistent across the site
   ───────────────────────────────────────────────────────────────────────── */

/* Navigation icons — cart, search, account */
.header__icon .icon,
.site-nav__icon .icon,
.navlink .icon,
[class*="header"] .icon:not(.flickity-prev-next-button .icon) {
  width: var(--kiolal-icon-nav) !important;
  height: var(--kiolal-icon-nav) !important;
  stroke-width: var(--kiolal-icon-stroke) !important;
  transition: color var(--kiolal-transition),
              stroke var(--kiolal-transition),
              opacity var(--kiolal-transition) !important;
}

/* Icon hover — warm gold */
@media (hover: hover) {
  .header__icon:hover .icon,
  .site-nav__icon:hover .icon,
  .navlink:hover .icon {
    color: var(--kiolal-gold) !important;
    stroke: var(--kiolal-gold) !important;
  }
}

/* Close buttons (modals, drawers, popups) */
.modal__close,
.drawer__close,
[class*="close-btn"],
[class*="close-button"],
button[aria-label="Close"] {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity var(--kiolal-transition),
              color var(--kiolal-transition) !important;
  opacity: 0.6;
}

.modal__close:hover,
.drawer__close:hover,
[class*="close-btn"]:hover,
[class*="close-button"]:hover,
button[aria-label="Close"]:hover {
  opacity: 1;
  color: var(--kiolal-gold-hover) !important;
}

/* Pagination */
.pagination .icon,
.pagination__arrow .icon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: var(--kiolal-icon-stroke) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   5. FORM INPUTS — Luxury sharp edges, gold focus
   ───────────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.popout__toggle,
.form__field input,
.form__field textarea {
  border: 1px solid var(--kiolal-border) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  transition: border-color var(--kiolal-transition),
              box-shadow var(--kiolal-transition) !important;
  font-family: var(--FONT-STACK-BODY) !important;
  font-size: var(--kiolal-text-base) !important;
  line-height: 1.5 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.popout__toggle:focus,
.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--kiolal-gold) !important;
  box-shadow: 0 0 0 1px var(--kiolal-gold) !important;
  outline: none !important;
}

/* Newsletter input in footer */
.newsletter__input,
[id*="email-input"] {
  border: 1px solid var(--kiolal-border) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  transition: border-color var(--kiolal-transition) !important;
}

.newsletter__input:focus,
[id*="email-input"]:focus {
  border-color: var(--kiolal-gold) !important;
  outline: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. PRODUCT CARDS — Consistent hover behavior
   ───────────────────────────────────────────────────────────────────────── */

/* Product card container */
.product-item,
.grid-product,
.collection-item {
  transition: transform var(--kiolal-transition) !important;
}

/* Product title links */
.product-item__title,
.grid-product__title,
.product-item__title a,
.grid-product__title a {
  transition: color var(--kiolal-transition) !important;
}

@media (hover: hover) {
  .product-item:hover .product-item__title a,
  .grid-product:hover .grid-product__title a {
    color: var(--kiolal-warm-gray) !important;
  }
}

/* Price styling */
.product-item__price,
.grid-product__price,
.product__price {
  letter-spacing: 0.5px !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   7. GALLERY & PRODUCT IMAGE TREATMENTS
   ───────────────────────────────────────────────────────────────────────── */

/* Product page gallery */
.product__slides {
  overflow: hidden !important;
}

.product__slide {
  transition: opacity var(--kiolal-duration-medium) var(--kiolal-ease) !important;
}

/* Thumbnail active state */
.product__thumb.is-active,
.product__thumb--active,
.product__thumb[aria-current="true"] {
  border-color: var(--kiolal-dark) !important;
  opacity: 1 !important;
}

.product__thumb:not(.is-active):not(.product__thumb--active) {
  opacity: 0.5 !important;
  transition: opacity var(--kiolal-transition) !important;
}

.product__thumb:hover {
  opacity: 0.8 !important;
}

/* Image zoom/lightbox trigger */
.product__slide[data-zoom],
.product__slide .pswp-trigger {
  cursor: zoom-in !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   8. NAVIGATION — Luxury feel
   ───────────────────────────────────────────────────────────────────────── */

/* Main nav links */
.site-nav__link,
.navlink,
.header__desktop__upper__links a {
  transition: color var(--kiolal-transition),
              opacity var(--kiolal-transition) !important;
  letter-spacing: 1px !important;
}

@media (hover: hover) {
  .site-nav__link:hover,
  .navlink:hover,
  .header__desktop__upper__links a:hover {
    color: var(--kiolal-warm-gray) !important;
  }
}

/* Mobile menu */
.mobile-nav__link,
.drawer__nav a {
  padding: 16px 0 !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  transition: color var(--kiolal-transition) !important;
}

/* Dropdown/submenu */
.site-nav__dropdown,
.submenu,
.header__submenu {
  transition: opacity var(--kiolal-duration-micro) var(--kiolal-ease),
              transform var(--kiolal-duration-micro) var(--kiolal-ease) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   9. ACCESSIBILITY — Focus states, contrast, keyboard nav
   ───────────────────────────────────────────────────────────────────────── */

/* Focus-visible ring — elegant gold outline */
*:focus-visible {
  outline: 2px solid var(--kiolal-gold) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* Ensure minimum contrast for subtle text */
.product-item__price,
.grid-product__price,
[class*="caption"],
[class*="subtitle"] {
  color: var(--kiolal-warm-gray) !important;
}

/* Touch targets — minimum 48px on mobile */
@media (max-width: 749px) {
  .site-nav__link,
  .navlink,
  .header__icon,
  .mobile-nav__link,
  .drawer__nav a,
  button:not(.btn):not(.flickity-prev-next-button):not(.slider__button) {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   10. SECTION SPACING — Consistent vertical rhythm
   ───────────────────────────────────────────────────────────────────────── */

/* Section spacing — tokens available for page-specific CSS.
   Do NOT override .section-padding globally to avoid conflicts
   with the theme's built-in section spacing system. */

/* Ensure consistent inner container max-width */
/* Content containers — refined max-width for readability.
   Note: .container is excluded — it is the page wrapper and must be full-width.
   The global-frame.css handles the full layout system. */
.page-width,
.wrapper {
  max-width: 1400px;
}


/* ─────────────────────────────────────────────────────────────────────────
   11. ANNOUNCEMENT BAR — Refined
   ───────────────────────────────────────────────────────────────────────── */

.announcement__bar,
[class*="announcement-bar"],
.announcement__bar-holder {
  letter-spacing: 1.5px !important;
  font-size: var(--kiolal-text-xs) !important;
  transition: background-color var(--kiolal-transition) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   12. FOOTER — Luxury refinement
   ───────────────────────────────────────────────────────────────────────── */

.footer a,
.site-footer a {
  transition: color var(--kiolal-transition) !important;
}

@media (hover: hover) {
  .footer a:hover,
  .site-footer a:hover {
    color: var(--kiolal-gold) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   13. SCROLL ANIMATIONS — Unified reveal
   ───────────────────────────────────────────────────────────────────────── */

/* Override the existing kiolal-fade-in with consistent timing */
.kiolal-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--kiolal-duration-reveal) var(--kiolal-ease-out),
              transform var(--kiolal-duration-reveal) var(--kiolal-ease-out) !important;
}

.kiolal-fade-in.is-visible,
.kiolal-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children animation */
.kiolal-fade-in.is-visible > *:nth-child(1),
.kiolal-fade-in.visible > *:nth-child(1) { transition-delay: 0ms; }
.kiolal-fade-in.is-visible > *:nth-child(2),
.kiolal-fade-in.visible > *:nth-child(2) { transition-delay: 80ms; }
.kiolal-fade-in.is-visible > *:nth-child(3),
.kiolal-fade-in.visible > *:nth-child(3) { transition-delay: 160ms; }
.kiolal-fade-in.is-visible > *:nth-child(4),
.kiolal-fade-in.visible > *:nth-child(4) { transition-delay: 240ms; }
.kiolal-fade-in.is-visible > *:nth-child(5),
.kiolal-fade-in.visible > *:nth-child(5) { transition-delay: 320ms; }
.kiolal-fade-in.is-visible > *:nth-child(6),
.kiolal-fade-in.visible > *:nth-child(6) { transition-delay: 400ms; }


/* ─────────────────────────────────────────────────────────────────────────
   14. TABLET BREAKPOINT (768px – 1024px)
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --kiolal-section-gap: 88px;
    --kiolal-subsection-gap: 56px;
  }

  /* Section gap tokens available for page-specific use */
}


/* ─────────────────────────────────────────────────────────────────────────
   15. MOBILE BREAKPOINT (< 768px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --kiolal-section-gap: 56px;
    --kiolal-subsection-gap: 40px;
  }

  /* Section gap tokens available for page-specific use */

  /* Tighter form inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    padding: 12px 14px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* Product cards — consistent gap */
  .grid--products,
  .collection-products {
    gap: 16px !important;
  }

  /* Ensure images don't crop awkwardly */
  .product-item__image img,
  .grid-product__image img {
    object-fit: cover !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   16. SMALL MOBILE (< 375px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 374px) {
  :root {
    --kiolal-section-gap: 48px;
    --kiolal-subsection-gap: 32px;
  }

  /* Section gap tokens available for page-specific use */
}


/* ─────────────────────────────────────────────────────────────────────────
   17. REDUCED MOTION — Respect user preferences
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .kiolal-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .product-item__image img,
  .grid-product__image img {
    transform: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   18. PRINT STYLES — Clean luxury output
   ───────────────────────────────────────────────────────────────────────── */

@media print {
  .kiolal-floating-cta,
  .kiolal-popup-overlay,
  .kiolal-mobile-sticky-atc,
  .announcement__bar,
  .flickity-prev-next-button,
  .slider__button {
    display: none !important;
  }
}

/* Fix: Mayan Miracle Mist - show $115 only, no Sale badge or strikethrough */
/* Hide old-price (strikethrough $115) inside the product link */
a[href*="mayan-miracle-mist"] .old-price {
  display: none !important;
}
/* Hide "From" text (the <small> tag inside new-price) */
a[href*="mayan-miracle-mist"] .new-price small {
  display: none !important;
}
/* Remove sale styling (red color, strikethrough) from the price */
a[href*="mayan-miracle-mist"] .price.sale {
  color: var(--text-color, #1a1a1a) !important;
}
a[href*="mayan-miracle-mist"] .price.sale .new-price {
  color: var(--text-color, #1a1a1a) !important;
  text-decoration: none !important;
}
/* Hide the Sale badge - it's a span.badge--sale that's a sibling/child within the product card */
/* Since we can't use :has() reliably, we target the badge that appears right after the mist image link */
.product-item__image:has(a[href*="mayan-miracle-mist"]) .badge--sale,
.product-item__image:has(a[href*="mayan-miracle-mist"]) .badge {
  display: none !important;
}
/* Fallback for browsers without :has() - use JS to add a class */
.mist-product-card .badge--sale,
.mist-product-card .badge {
  display: none !important;
}

/* ============================================
   MOBILE NAVIGATION FIX
   Show mobile header at < 750px, hide desktop
   Let theme's native drawer animation work
   ============================================ */

/* Base: Show mobile header by default (mobile-first) */
.header__mobile {
  display: grid !important;
}

/* Hide desktop header on mobile/tablet (up to 749px) */
@media only screen and (max-width: 749px) {
  .header__mobile {
    display: grid !important;
  }
  .header__desktop {
    position: relative !important;
    overflow: hidden !important;
    max-height: 0px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .header__mobile__hamburger {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 100 !important;
    position: relative !important;
  }
}

/* Show desktop header on desktop (750px+) */
@media only screen and (min-width: 750px) {
  .header__mobile {
    display: none !important;
  }
  .header__desktop {
    position: static !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ===== DRAWER FIX - Containing Block Fix ===== */
/* 
 * ROOT CAUSE: The <header> has transform applied (sticky header animation)
 * which creates a containing block for fixed-position elements.
 * This makes the drawer's position:fixed relative to the header, not viewport.
 * FIX: Remove transform from header when drawer is open.
 */

/* Remove transform from header when drawer is open to fix containing block */
.theme__header:has(.drawer--header.is-open) {
  transform: none !important;
  -webkit-transform: none !important;
}

/* Fallback for browsers that don't support :has() - use body class */
body.drawer-open .theme__header {
  transform: none !important;
  -webkit-transform: none !important;
}

/* Ensure drawer has correct z-index above everything */
.drawer--header {
  z-index: 99998 !important;
}
.drawer--header .drawer__inner {
  z-index: 99999 !important;
}
.drawer--header .drawer__underlay {
  z-index: 99997 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* When drawer is open, ensure inner is visible and interactive */
.drawer--header.is-open .drawer__inner {
  visibility: visible !important;
  pointer-events: auto !important;
}
.drawer--header.is-open .drawer__underlay {
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Mobile-specific drawer adjustments */
@media only screen and (max-width: 749px) {
  .drawer--header .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
  }
  .drawer--header .drawer__head {
    display: flex !important;
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--bg, #ffffff) !important;
    z-index: 1 !important;
  }
  .drawer--header .drawer__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .drawer--header .drawer__body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Menu items touch targets */
  .drawer--header .sliderow,
  .drawer--header .drawer__menu a {
    min-height: 44px !important;
    padding: 14px 0 !important;
  }
}

/* Ensure the floating CTA doesn't block the drawer */
.drawer--header.is-open ~ .kiolal-floating-cta,
body.drawer-open .kiolal-floating-cta {
  display: none !important;
}

/* Lock body scroll when drawer is open */
body.drawer-open {
  overflow: hidden !important;
}
html:has(body.drawer-open) {
  overflow: hidden !important;
}
  .drawer--header .drawer__head {
    display: flex !important;
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--bg, #ffffff) !important;
    z-index: 1 !important;
  }
  .drawer--header .drawer__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .drawer--header .drawer__body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Menu items touch targets */
  .drawer--header .sliderow,
  .drawer--header .drawer__menu a {
    min-height: 44px !important;
    padding: 14px 0 !important;
  }
}

/* Ensure the floating CTA doesn't block the drawer */
.drawer--header.is-open ~ .kiolal-floating-cta,
body.drawer-open .kiolal-floating-cta {
  display: none !important;
}

/* Lock body scroll when drawer is open */
body.drawer-open {
  overflow: hidden !important;
}
html:has(body.drawer-open) {
  overflow: hidden !important;
}