/** Shopify CDN: Minification failed

Line 247:20 Expected identifier but found whitespace
Line 247:21 Unexpected "1.2rem"

**/
@font-face {
  font-family: 'Satoshi';
  src: url('Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
/*
  Therefore Theme - Global Design Tokens
  This file contains the foundational CSS variables for the Therefore Theme architecture.
*/

:root {
  /* =========================================================
     1. COLOR TOKEN SYSTEM (GLOBAL BRAND PALETTE: #2f4b53 & #bccb5e)
     ========================================================= */
  
  /* Brand & Accent Colors */
  --tf-color-brand-primary: #2f4b53;
  --tf-color-brand-accent: #bccb5e;
  --tf-color-brand-secondary: #2f4b53;
  
  /* Surface & Background Colors */
  --tf-color-surface-primary: #ffffff;
  --tf-color-surface-secondary: #f2f4f7;
  --tf-color-surface-inverse: #111111;
  --tf-color-background: #ffffff;
  
  /* Text Colors */
  --tf-color-text-primary: #111111;
  --tf-color-text-secondary: #2f4b53;
  --tf-color-text-accent: #bccb5e;
  --tf-color-text-muted: #666666;
  --tf-color-text-inverse: #ffffff;
  
  /* Interactive & Link Palette */
  --tf-color-link: #2f4b53;
  --tf-color-link-hover: #bccb5e;
  --tf-color-badge-bg: #bccb5e;
  --tf-color-badge-text: #2f4b53;
  
  /* Border Colors */
  --tf-color-border-light: rgba(0, 0, 0, 0.12);
  --tf-color-border-medium: rgba(0, 0, 0, 0.25);
  --tf-color-border-strong: #111111;
  
  /* Status Colors */
  --tf-color-status-success: #2e7d32;
  --tf-color-status-warning: #ed6c02;
  --tf-color-status-error: #d32f2f;
  --tf-color-status-info: #0288d1;
  
  /* Overlays & Transparent */
  --tf-color-overlay-light: rgba(255, 255, 255, 0.7);
  --tf-color-overlay-dark: rgba(0, 0, 0, 0.5);
  --tf-color-transparent: transparent;
  
  /* States */
  --tf-color-state-hover: rgba(0, 0, 0, 0.04);
  --tf-color-state-focus: var(--tf-color-brand-primary);
  --tf-color-state-disabled: rgba(0, 0, 0, 0.12);
  --tf-color-selection-bg: var(--tf-color-brand-primary);
  --tf-color-selection-text: #000000;

  /* =========================================================
     2. FONT SYSTEM
     ========================================================= */
  
  /* Typography (Satoshi Architecture Theme-wide) */
  --font-body-family: 'Satoshi', sans-serif !important;
  --font-heading-family: 'Satoshi', sans-serif !important;
  --tf-font-family-primary: 'Satoshi', sans-serif !important;
  --tf-font-family-secondary: 'Satoshi', sans-serif !important;
  --tf-font-family-mono: 'Satoshi', sans-serif !important;
}

/* Universal Font Enforcement - Satoshi Only */
*,
*::before,
*::after,
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, select, textarea, label, div,
.heading, .title, .h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Satoshi', sans-serif !important;
}

:root {
  --tf-font-weight-light: 300;
  --tf-font-weight-regular: 400;
  --tf-font-weight-medium: 500;
  --tf-font-weight-bold: 700;
  --tf-font-weight-black: 900;
  
  --tf-line-height-tight: 1.1;
  --tf-line-height-normal: 1.5;
  --tf-line-height-loose: 1.7;
  
  --tf-letter-spacing-tight: -0.02em;
  --tf-letter-spacing-normal: 0;
  --tf-letter-spacing-wide: 0.05em;

  /* =========================================================
     3. TYPOGRAPHY SYSTEM (FLUID)
     ========================================================= */
  /* Display & Headings (Fluid typography using clamp: min, preferred, max) */
  --tf-text-display-xl: clamp(3.6rem, 5vw, 6.4rem);
  --tf-text-display-lg: clamp(3.2rem, 4vw, 4.8rem);
  --tf-text-display-md: clamp(2.8rem, 3.5vw, 4.0rem);
  
  --tf-text-heading-1: clamp(2.4rem, 3vw, 3.6rem);
  --tf-text-heading-2: clamp(2.0rem, 2.5vw, 3.2rem);
  --tf-text-heading-3: clamp(1.8rem, 2.2vw, 2.8rem);
  --tf-text-heading-4: clamp(1.6rem, 2vw, 2.4rem);
  --tf-text-heading-5: clamp(1.4rem, 1.8vw, 2.0rem);
  --tf-text-heading-6: clamp(1.2rem, 1.5vw, 1.6rem);
  
  /* Body & UI Text */
  --tf-text-body-xl: 2.0rem;
  --tf-text-body-lg: 1.8rem;
  --tf-text-body-base: 1.6rem;
  --tf-text-body-sm: 1.4rem;
  
  --tf-text-caption: 1.2rem;
  --tf-text-label: 1.2rem;
  --tf-text-button: 1.4rem;
  --tf-text-nav: 1.6rem;
  --tf-text-price: 1.8rem;

  /* =========================================================
     4. SPACING SYSTEM (Based on 4px grid / 0.4rem)
     ========================================================= */
  --tf-spacing-2: 0.2rem;
  --tf-spacing-4: 0.4rem;
  --tf-spacing-8: 0.8rem;
  --tf-spacing-12: 1.2rem;
  --tf-spacing-16: 1.6rem;
  --tf-spacing-20: 2.0rem;
  --tf-spacing-24: 2.4rem;
  --tf-spacing-32: 3.2rem;
  --tf-spacing-40: 4.0rem;
  --tf-spacing-48: 4.8rem;
  --tf-spacing-56: 5.6rem;
  --tf-spacing-64: 6.4rem;
  --tf-spacing-80: 8.0rem;
  --tf-spacing-96: 9.6rem;
  --tf-spacing-120: 12.0rem;

  /* =========================================================
     5. CONTAINER SYSTEM
     ========================================================= */
  --tf-container-width-narrow: 80rem;
  --tf-container-width-standard: 144rem;
  --tf-container-width-wide: 160rem;
  --tf-container-width-max: 192rem;
  
  --tf-container-padding-mobile: var(--tf-spacing-16);
  --tf-container-padding-tablet: var(--tf-spacing-32);
  --tf-container-padding-desktop: var(--tf-spacing-48);
  
  --tf-section-padding-y: var(--tf-spacing-80);
  --tf-gutter: var(--tf-spacing-24);

  /* =========================================================
     6. GRID SYSTEM
     ========================================================= */
  --tf-grid-columns: 12;
  --tf-grid-gap-sm: var(--tf-spacing-16);
  --tf-grid-gap-md: var(--tf-spacing-24);
  --tf-grid-gap-lg: var(--tf-spacing-32);

  /* =========================================================
     7. BORDER RADIUS SYSTEM
     ========================================================= */
  --tf-radius-none: 0;
  --tf-radius-xs: 0.2rem;
  --tf-radius-sm: 0.4rem;
  --tf-radius-md: 0.8rem;
  --tf-radius-lg: 1.2rem;
  --tf-radius-xl: 1.6rem;
  --tf-radius-2xl: 2.4rem;
  --tf-radius-round: 9999px;
  --tf-radius-circle: 50%;

  /* =========================================================
     8. BORDER SYSTEM
     ========================================================= */
  --tf-border-hairline: 1px solid var(--tf-color-border-light);
  --tf-border-thin: 1px solid var(--tf-color-border-medium);
  --tf-border-standard: 2px solid var(--tf-color-border-medium);
  --tf-border-heavy: 4px solid var(--tf-color-border-strong);
  --tf-border-dashed: 1px dashed var(--tf-color-border-medium);
  --tf-border-focus-ring: 2px solid var(--tf-color-state-focus);

  /* =========================================================
     9. SHADOW / ELEVATION SYSTEM
     ========================================================= */
  --tf-shadow-none: none;
  --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --tf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tf-shadow-floating: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tf-shadow-modal: 0 0 50px rgba(0, 0, 0, 0.3);
  --tf-shadow-focus: 0 0 0 3px rgba(188, 203, 94, 0.5); /* Brand Primary Focus */
}

/* Prevent Horizontal Page Overflow & Scrollbars without breaking position: sticky */
html, body {
  overflow-x: clip !important;
  max-width: 100%;
}

  /* =========================================================
     10. ICON SYSTEM
     ========================================================= */
  --tf-icon-size-12: 1.2rem;
  --tf-icon-size-16: 1.6rem;
  --tf-icon-size-20: 2.0rem;
  --tf-icon-size-24: 2.4rem;
  --tf-icon-size-32: 3.2rem;
  --tf-icon-size-40: 4.0rem;
  --tf-icon-size-48: 4.8rem;

  /* =========================================================
     11. BUTTON FOUNDATION
     ========================================================= */
  --tf-btn-height: 4.8rem;
  --tf-btn-padding-x: var(--tf-spacing-24);
  --tf-btn-padding-y: var(--tf-spacing-12);
  --tf-btn-radius: 99px;
  --tf-btn-font-family: var(--tf-font-family-primary);
  --tf-btn-font-weight: var(--tf-font-weight-medium);
  --tf-btn-transition: all var(--tf-duration-fast) var(--tf-ease);

  /* =========================================================
     12. FORM FOUNDATION
     ========================================================= */
  --tf-input-height: 4.8rem;
  --tf-input-padding-x: var(--tf-spacing-16);
  --tf-input-padding-y: var(--tf-spacing-12);
  --tf-input-radius: var(--tf-radius-none);
  --tf-input-border: var(--tf-border-thin);
  --tf-input-bg: var(--tf-color-surface-primary);
  --tf-input-text: var(--tf-color-text-primary);
  --tf-input-placeholder: var(--tf-color-text-muted);

  /* =========================================================
     13. OPACITY SCALE
     ========================================================= */
  --tf-opacity-05: 0.05;
  --tf-opacity-10: 0.10;
  --tf-opacity-20: 0.20;
  --tf-opacity-40: 0.40;
  --tf-opacity-60: 0.60;
  --tf-opacity-80: 0.80;
  --tf-opacity-100: 1.0;

  /* =========================================================
     14. ANIMATION TOKEN SYSTEM
     ========================================================= */
  --tf-duration-fast: 150ms;
  --tf-duration-normal: 300ms;
  --tf-duration-slow: 500ms;
  --tf-delay-short: 100ms;
  --tf-delay-medium: 200ms;
  --tf-delay-long: 400ms;
  
  --tf-ease: ease;
  --tf-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tf-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tf-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --tf-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --tf-transition-fast: var(--tf-duration-fast) var(--tf-ease-in-out);
  --tf-transition-normal: var(--tf-duration-normal) var(--tf-ease-in-out);
  --tf-transition-slow: var(--tf-duration-slow) var(--tf-ease-in-out);

  /* =========================================================
     15. GLOBAL LAYER SYSTEM (Z-INDEX)
     ========================================================= */
  --tf-layer-base: 0;
  --tf-layer-sticky-header: 100;
  --tf-layer-announcement: 110;
  --tf-layer-mega-menu: 200;
  --tf-layer-overlay: 300;
  --tf-layer-drawer: 400;
  --tf-layer-modal: 400;
  --tf-layer-quick-view: 400;
  --tf-layer-toast: 500;
  --tf-layer-tooltip: 500;
  --tf-layer-loader: 1000;
}

/* Base Resets & Dynamic Global Application */
html, body {
  font-family: 'Satoshi', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
  background-color: var(--tf-color-background);
  color: var(--tf-color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   GLOBAL TEXT & DESCRIPTION SYSTEM (EXCLUDING HEADINGS)
   Font-size: 14px & Letter-spacing: 0.6px applied globally
   ========================================================= */
p,
.p,
.description,
.subtitle,
.subheading,
.text-body,
.caption,
.rte p,
.rte li,
label,
figcaption,
.tf-card__information p,
.tf-article-rte p,
.tf-article-rte li {
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
}

/* Header & Navigation Satoshi Enforcement */
.header,
.header__menu-item,
.header__active-menu-item,
.list-menu__item,
.menu-drawer,
.menu-drawer__menu-item,
.tf-mega-menu,
.tf-mega-menu__link,
.tf-nav-item,
nav, nav a, header a {
  font-family: 'Satoshi', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.title, .heading {
  font-family: var(--font-heading-family, var(--tf-font-family-secondary));
  letter-spacing: 0.02em !important;
}

/* =========================================================
   UNIFIED HOMEPAGE SECTION HEADING SYSTEM & UNDERLINE ACCENT
   ========================================================= */
.tf-discovery-header__heading,
.tf-section-title,
.section-header__title,
.tf-editorial-header__title,
.title-wrapper-with-link .title,
.title-wrapper-with-link h2.title {
  font-family: var(--font-heading-family, var(--tf-font-family-secondary)) !important;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--tf-color-brand-primary, #2f4b53) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* View All Journal / Header Action Link */
.tf-discovery-header__link {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--tf-color-brand-primary, #2f4b53) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  transition: color 0.25s ease !important;
}

.tf-discovery-header__link:hover {
  color: var(--tf-color-brand-accent, #bccb5e) !important;
}

/* 1. Hero Section Title (Uncapitalized / Natural Case) */
.tf-hero__heading,
.hero__title,
.banner__heading {
  text-transform: none !important;
}

/* 2. Featured Blog Article Titles (Uncapitalized / Natural Case) */
.tf-archive-blog-hero__title,
.tf-archive-blog-card__title,
.editorial-article-card__title,
.article-card__title,
.article__title {
  text-transform: none !important;
}

/* Accent Underline Line */
.tf-discovery-header__heading::after,
.tf-section-title::after,
.section-header__title::after,
.tf-editorial-header__title::after,
.title-wrapper-with-link .title::after,
.title-wrapper-with-link h2.title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 48px !important;
  height: 3px !important;
  background-color: var(--tf-color-brand-accent, #bccb5e) !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}

/* Center Alignment Support */
.tf-discovery-header--center .tf-discovery-header__heading::after,
.text-center .tf-section-title::after,
.text-center .section-header__title::after,
.center .title-wrapper-with-link .title::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

::selection {
  background-color: var(--tf-color-selection-bg);
  color: var(--tf-color-selection-text);
}

/* Text Selection Highlight Color (#bccb5e) */
::selection {
  background-color: #bccb5e !important;
  color: #111111 !important;
}

::-moz-selection {
  background-color: #bccb5e !important;
  color: #111111 !important;
}

/* Header Icon System - Dynamic Transparent vs Sticky Header Colors */
.tf-header__icon,
.tf-header__icon button,
header button.tf-header__icon,
[data-wishlist-drawer-toggle],
[data-compare-modal-toggle] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: var(--tf-color-brand-primary, #2f4b53) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.tf-header__icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  transition: stroke 0.25s ease, color 0.25s ease !important;
  cursor: pointer !important;
}

/* 1. Transparent Header Initial State (over Hero) -> Pure White Icons */
.tf-header-wrapper--transparent:not(.is-scrolled):not(.is-sticky-active) .tf-header__icon,
.tf-header-wrapper--transparent:not(.is-scrolled):not(.is-sticky-active) .tf-header__icon svg,
.header-wrapper--transparent:not(.scrolled-past-header) .tf-header__icon,
.header-wrapper--transparent:not(.scrolled-past-header) .tf-header__icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 2. Scrolled / Sticky Header (Solid Background) -> Brand Menu Color (#2f4b53) */
.tf-header-wrapper.is-scrolled .tf-header__icon,
.tf-header-wrapper.is-scrolled .tf-header__icon svg,
.tf-header-wrapper.is-sticky-active .tf-header__icon,
.tf-header-wrapper.is-sticky-active .tf-header__icon svg,
.scrolled-past-header .tf-header__icon,
.scrolled-past-header .tf-header__icon svg,
.shopify-section-header-sticky .tf-header__icon,
.shopify-section-header-sticky .tf-header__icon svg,
.tf-header-wrapper:not(.tf-header-wrapper--transparent) .tf-header__icon,
.tf-header-wrapper:not(.tf-header-wrapper--transparent) .tf-header__icon svg {
  color: var(--tf-color-brand-primary, #2f4b53) !important;
  stroke: var(--tf-color-brand-primary, #2f4b53) !important;
}

/* 3. Sticky Header Box Shadow on Scroll */
.tf-header-wrapper.is-scrolled,
.tf-header-wrapper.is-sticky.is-scrolled,
.tf-header-wrapper.is-sticky-active,
.scrolled-past-header,
.shopify-section-header-sticky,
.tf-header-wrapper--transparent.is-scrolled,
header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

/* =========================================================
   GLOBAL FLOATING GLASS DRAWER & MODAL DESIGN SYSTEM
   Consistent architecture for Cart, Wishlist, Search, Menu, and Modals
   ========================================================= */

/* 1. Global Blurry Glass Overlay */
.drawer__overlay,
.cart-drawer__overlay,
.tf-wishlist-drawer__overlay,
.tf-search-drawer__overlay,
.tf-qv-modal__overlay,
.tf-compare-modal__overlay,
.tf-modal__overlay,
.menu-drawer__overlay {
  position: fixed !important;
  inset: 0 !important;
  background: var(--tf-drawer-overlay-bg, rgba(0, 0, 0, 0.5)) !important;
  backdrop-filter: blur(var(--tf-drawer-backdrop-blur, 20px)) !important;
  -webkit-backdrop-filter: blur(var(--tf-drawer-backdrop-blur, 20px)) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity var(--tf-drawer-anim-duration, 350ms) ease, visibility var(--tf-drawer-anim-duration, 350ms) ease !important;
  cursor: none !important;
}

wishlist-drawer.active .wishlist-drawer__overlay,
wishlist-drawer.active #WishlistDrawer-Overlay,
wishlist-drawer.active .drawer__overlay,
wishlist-drawer.is-open .wishlist-drawer__overlay,
wishlist-drawer.is-open #WishlistDrawer-Overlay,
wishlist-drawer.is-open .drawer__overlay,
#WishlistDrawer-Overlay.active,
#WishlistDrawer-Overlay.is-active,
#WishlistDrawer-Overlay.is-open,
.drawer__overlay.active,
.drawer__overlay.is-active,
.drawer__overlay.is-open,
.tf-wishlist-drawer__overlay.active,
.tf-wishlist-drawer__overlay.is-active,
.tf-wishlist-drawer__overlay.is-open,
#ThereforeWishlistDrawer.active .drawer__overlay,
#ThereforeWishlistDrawer.active #WishlistDrawer-Overlay,
#ThereforeWishlistDrawer.active .tf-wishlist-drawer__overlay,
#ThereforeWishlistDrawer.is-open .drawer__overlay,
#ThereforeWishlistDrawer.is-open #WishlistDrawer-Overlay,
#ThereforeWishlistDrawer.is-open .tf-wishlist-drawer__overlay,
.tf-wishlist-drawer.active .drawer__overlay,
.tf-wishlist-drawer.active .tf-wishlist-drawer__overlay,
.tf-wishlist-drawer.is-open .drawer__overlay,
.tf-wishlist-drawer.is-open .tf-wishlist-drawer__overlay,
.tf-search-drawer__panel.is-open ~ .tf-search-drawer__overlay,
.tf-search-drawer.is-open .tf-search-drawer__overlay,
.tf-search-drawer.is-active .tf-search-drawer__overlay,
.tf-compare-modal.is-open .tf-compare-modal__overlay,
.tf-modal.is-open .tf-modal__overlay,
.tf-modal.is-active .tf-modal__overlay,
.tf-qv-modal.is-open .tf-qv-modal__overlay,
.tf-qv-modal.is-active .tf-qv-modal__overlay,
.drawer.is-open .drawer__overlay,
.drawer.is-active .drawer__overlay,
details[open] > .menu-drawer__overlay,
.drawer.active .drawer__overlay,
cart-drawer.active .drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.drawer__overlay.active {
  display: block !important;
}

/* 2. Global Drawer Container */
cart-drawer .drawer__inner,
#ThereforeWishlistDrawer .drawer__inner,
.tf-wishlist-drawer__inner,
.tf-search-drawer__panel,
.menu-drawer__inner-container,
.drawer__inner {
  position: fixed !important;
  top: var(--tf-drawer-spacing, 14px) !important;
  bottom: var(--tf-drawer-spacing, 14px) !important;
  right: var(--tf-drawer-spacing, 14px) !important;
  height: calc(100vh - (var(--tf-drawer-spacing, 14px) * 2)) !important;
  width: var(--tf-drawer-width, 420px) !important;
  max-width: calc(100vw - 20px) !important;
  backdrop-filter: blur(var(--tf-drawer-panel-blur, 16px)) saturate(130%) !important;
  -webkit-backdrop-filter: blur(var(--tf-drawer-panel-blur, 16px)) saturate(130%) !important;
  color: var(--tf-drawer-text, #ffffff) !important;
  border-radius: var(--tf-drawer-radius, 16px) !important;
  border: 1px solid var(--tf-drawer-border-color, rgba(255, 255, 255, 0.1)) !important;
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 99999 !important;
}

@media screen and (max-width: 480px) {
  cart-drawer .drawer__inner,
  #ThereforeWishlistDrawer .drawer__inner,
  .tf-wishlist-drawer__inner,
  .tf-search-drawer__panel,
  .menu-drawer__inner-container,
  .drawer__inner {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: calc(100vw - 15px) !important;
  }
}

/* 3. Global Drawer Headers */
.drawer__header,
.tf-wishlist-drawer__header,
.tf-search-drawer__header,
.menu-drawer__header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.drawer__heading,
.tf-wishlist-drawer__title,
.tf-search-drawer__title,
.menu-drawer__title,
.tf-compare-modal__title {
  color: #ffffff !important;
  font-family: 'Satoshi', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* 4. Global Drawer Circulating Ring Close Button */
.drawer__close,
.tf-wishlist-drawer__close,
.tf-search-drawer__close,
.menu-drawer__close-button,
.tf-qv-modal__close {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 5. Vertically & Horizontally Centered Empty States */
.cart-drawer .is-empty,
.cart-drawer:has(.drawer__inner-empty) cart-drawer-items,
.cart-drawer:has(.drawer__inner-empty) .drawer__footer {
  display: none !important;
}

.drawer__inner-empty,
.tf-wishlist-empty,
.tf-cart-empty {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: auto 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.tf-cart-drawer__empty-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: auto !important;
  width: 100% !important;
}

.tf-close-ring-svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 36px !important;
  pointer-events: none !important;
  transform: rotate(-90deg) !important;
  z-index: 1 !important;
}

.tf-close-ring-circle {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 0.75px !important;
  stroke-dasharray: 120 !important;
  stroke-dashoffset: 120 !important;
  opacity: 0 !important;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}

.tf-close-x-icon {
  width: 12px !important;
  height: 12px !important;
  position: relative !important;
  z-index: 2 !important;
  stroke: #ffffff !important;
  transition: transform 0.3s ease !important;
}

/* Mouseover: Draw circulating line around button & rotate x icon */
.drawer__close:hover .tf-close-ring-circle,
.tf-wishlist-drawer__close:hover .tf-close-ring-circle,
.tf-search-drawer__close:hover .tf-close-ring-circle,
.menu-drawer__close-button:hover .tf-close-ring-circle,
.tf-qv-modal__close:hover .tf-close-ring-circle {
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  stroke: #ffffff !important;
}

.drawer__close:hover .tf-close-x-icon,
.tf-wishlist-drawer__close:hover .tf-close-x-icon,
.tf-search-drawer__close:hover .tf-close-x-icon,
.menu-drawer__close-button:hover .tf-close-x-icon,
.tf-qv-modal__close:hover .tf-close-x-icon {
  transform: rotate(90deg) !important;
}

/* 5. Vertically & Horizontally Centered Empty States */
.drawer__inner-empty,
.tf-wishlist-empty,
.tf-cart-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
  min-height: 360px !important;
  margin: auto !important;
  padding: 32px 24px !important;
}

/* 6. Global Drawer Body & Text Colors */
.drawer__inner p,
.drawer__inner span,
.drawer__inner td,
.tf-wishlist-drawer p,
.tf-wishlist-drawer span,
.tf-search-drawer p,
.tf-search-drawer span {
  color: rgba(255, 255, 255, 0.85);
}

.drawer__inner a,
.tf-wishlist-drawer a,
.tf-search-drawer a {
  color: #ffffff;
}

.drawer__inner a:hover,
.tf-wishlist-drawer a:hover,
.tf-search-drawer a:hover {
  color: var(--tf-color-brand-accent, #bccb5e);
}

/* 7. Global Drawer Action Buttons */
.drawer__inner .button,
.drawer__inner .tf-btn,
.tf-wishlist-drawer .tf-btn,
.tf-search-drawer .tf-btn,
.cart-drawer .button {
  background-color: var(--tf-color-brand-accent, #bccb5e) !important;
  color: #111111 !important;
  border-color: var(--tf-color-brand-accent, #bccb5e) !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.drawer__inner .button:hover,
.drawer__inner .tf-btn:hover,
.tf-wishlist-drawer .tf-btn:hover,
.tf-search-drawer .tf-btn:hover,
.cart-drawer .button:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

/* =========================================================
   GLOBAL HEAVY BLUR & DARK OVERLAY FOR PAGE CONTENT WHEN DRAWERS ARE OPEN
   ========================================================= */
body.overflow-hidden main,
body.overflow-hidden #MainContent,
body.overflow-hidden .shopify-section,
body.overflow-hidden .section-header,
body.overflow-hidden .header-wrapper,
body.overflow-hidden .shopify-section-group-header-group,
body.tf-overflow-hidden main,
body.tf-overflow-hidden #MainContent,
body.tf-overflow-hidden .shopify-section,
body.tf-overflow-hidden .section-header,
body.tf-overflow-hidden .header-wrapper,
body.tf-overflow-hidden .shopify-section-group-header-group,
body.wishlist-drawer-open main,
body.wishlist-drawer-open #MainContent,
body.wishlist-drawer-open .shopify-section,
body.wishlist-drawer-open .section-header,
body.wishlist-drawer-open .header-wrapper,
body.wishlist-drawer-open .shopify-section-group-header-group,
body.menu-open main,
body.menu-open #MainContent,
body.menu-open .shopify-section,
body.menu-open .section-header,
body.menu-open .header-wrapper {
  filter: blur(10px) !important;
}

main,
#MainContent,
.shopify-section,
.section-header,
.header-wrapper,
.shopify-section-group-header-group {
  transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =========================================================
   HERO SECTION WHITE TEXT SYSTEM (EXCLUDING EDITORIAL)
   ========================================================= */
.section-hero-storytelling .tf-hero,
.section-hero-storytelling .tf-hero__heading,
.section-hero-storytelling .tf-hero__description,
.section-hero-storytelling .tf-hero__description p,
.section-hero-storytelling .tf-hero__description span,
.section-hero-storytelling .tf-hero__content-box,
.section-hero-storytelling .tf-hero__content-box h1,
.section-hero-storytelling .tf-hero__content-box h2,
.section-hero-storytelling .tf-hero__content-box h3,
.section-hero-storytelling .tf-hero__content-box p,
.section-hero-storytelling .tf-hero__content-box span,
.banner__heading,
.banner__text,
.banner__text p,
.banner__text span,
.banner__box h1,
.banner__box h2,
.banner__box h3,
.banner__box p,
.banner__box span,
.banner__box div {
  color: #ffffff !important;
}

/* =========================================================
   DYNAMIC BACKEND SECTION PADDING SYSTEM
   ========================================================= */
.tf-editorial-section,
.tf-showcase-section-wrapper,
.tf-collection-slider-section,
.tf-product-carousel-section,
.tf-iwt-section,
.tf-editorial-blog,
.tf-insta-feed {
  padding-top: var(--padding-top, 40px) !important;
  padding-bottom: var(--padding-bottom, 40px) !important;
}

/* Header, Announcement Bar & Footer zero-default padding reset */
.section-header-group,
.shopify-section-group-header-group,
.shopify-section-header,
.shopify-section-announcement-bar,
#shopify-section-header,
#shopify-section-announcement-bar,
.tf-header-wrapper,
.tf-footer {
  padding-top: var(--padding-top, 0px) !important;
  padding-bottom: var(--padding-bottom, 0px) !important;
}

@media screen and (max-width: 768px) {
  .tf-editorial-section,
  .tf-showcase-section-wrapper,
  .tf-collection-slider-section,
  .tf-product-carousel-section,
  .tf-iwt-section,
  .tf-editorial-blog,
  .tf-insta-feed {
    padding-top: var(--mobile-padding-top, var(--padding-top, 20px)) !important;
    padding-bottom: var(--mobile-padding-bottom, var(--padding-bottom, 20px)) !important;
  }

  .section-header-group,
  .shopify-section-group-header-group,
  .tf-header-wrapper,
  .shopify-section-announcement-bar,
  .shopify-section-header,
  #shopify-section-announcement-bar,
  #shopify-section-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}.slideshow__heading,
.slideshow__text,
.slideshow__description {
  color: #ffffff !important;
}

/* =========================================================
   UNIVERSAL SITE-WIDE EYEBROW COLOR RULE
   ========================================================= */
.tf-hero__eyebrow,
.tf-hero-slide__eyebrow,
.tf-discovery-header__eyebrow,
.tf-about-hero__eyebrow,
.tf-about-story__eyebrow,
.tf-about-who__eyebrow,
.tf-about-promise__eyebrow,
.tf-about-mvv-header__eyebrow,
.tf-about-creation-header__eyebrow,
.tf-contact-hero__eyebrow:not(a):not(button),
.tf-grid-promo-card__eyebrow,
.tf-featured-article-card__eyebrow,
.tf-article-newsletter__eyebrow,
.tf-amb-hero__eyebrow,
.tf-amb-eyebrow,
.tf-archive-blog__eyebrow,
.tf-atelier-eyebrow,
.tf-fg-hero-card__eyebrow,
.tf-fg-showcase-eyebrow,
.tf-fg-section-eyebrow,
[class*="eyebrow"]:not(.tf-blog-hero__eyebrow):not(.tf-contact-hero__eyebrow) {
  color: #bccb5e !important;
}