/** Shopify CDN: Minification failed

Line 1506:0 All "@import" rules must come first
Line 5126:10 Unexpected "{"
Line 5126:19 Expected ":"
Line 5126:25 Unexpected ","

**/
/* ============================================================================
   CLOUD CULTURE CUSTOM STYLES
   Dreamy Luxury Theme - "Walking Through Clouds"
   Cache bust: 2025-12-16-v4-desktop-spacing-fix

   VERIFIED FROM STORE PHOTOS (Dec 8, 2025):
   - Black walls #0A0A0A
   - White cloud ceiling (SIGNATURE ELEMENT)
   - Gold accents #C9A227
   - Warm amber lighting #F59E0B
   - Purple/cyan/pink accent lighting
   - Espresso brown shelving #3D2B1F
   - Grey marble counter #6B7280
   ============================================================================ */

/* CSS Custom Properties - VERIFIED FROM STORE PHOTOS */
:root {
  /* Primary */
  --cc-black: #0A0A0A;
  --cc-white: #FFFFFF;
  --cc-gold: #C9A227;
  --cc-gold-hover: #D4AF37;

  /* Store Lighting Colors */
  --cc-amber: #F59E0B;
  --cc-purple: #8B5CF6;
  --cc-cyan: #06B6D4;
  --cc-pink: #EC4899;

  /* Store Materials */
  --cc-espresso: #3D2B1F;
  --cc-marble: #6B7280;

  /* Gradient End Colors (darker shades for depth) */
  --cc-gold-dark: #B8922A;
  --cc-purple-dark: #7C3AED;

  /* Urgency/Alert Colors */
  --cc-red: #EF4444;
  --cc-red-dark: #DC2626;
  --cc-red-darker: #B91C1C;

  /* Text variations */
  --cc-gray-light: rgba(255, 255, 255, 0.75);
  --cc-gray-muted: rgba(255, 255, 255, 0.5);

  /* Gradients matching mandala/storefront */
  --cc-gradient-mandala: linear-gradient(135deg, var(--cc-purple) 0%, var(--cc-pink) 50%, var(--cc-cyan) 100%);
  --cc-gradient-glow: linear-gradient(180deg, rgba(245, 158, 11, 0.2) 0%, transparent 100%);

  /* ==========================================================================
     VISUAL AUDIT FIXES - Override cramped theme defaults
     ========================================================================== */
  /* Mobile grid spacing - theme default is 4px, way too tight */
  --grid-mobile-vertical-spacing: 1.25rem;
  --grid-mobile-horizontal-spacing: 0.75rem;
  --grid-desktop-vertical-spacing: 1.5rem;
  --grid-desktop-horizontal-spacing: 1rem;

  /* Product card breathing room */
  --product-card-image-padding: 0;
  --product-card-border-width: 1px;
  --product-card-border-opacity: 0.08;
  --product-card-shadow-opacity: 0.1;
  --product-card-shadow-horizontal-offset: 0;
  --product-card-shadow-vertical-offset: 4px;
  --product-card-shadow-blur-radius: 12px;
  --product-card-corner-radius: 0.75rem;
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */

/* Header background - matte black like store walls */
.section-header,
.header-wrapper {
  background-color: var(--cc-black);
}

/* Logo and top-level menu items */
.header__menu-item {
  color: var(--cc-white);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.header__menu-item:hover {
  color: var(--cc-gold);
}

/* ============================================================================
   MEGA MENU - DREAMY LUXURY STYLE
   ============================================================================ */

/* Mega menu panel */
.mega-menu__content {
  background-color: var(--cc-black);
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Subtle gold accent line at top */
.mega-menu__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cc-gold) 20%,
    var(--cc-gold) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

/* Category headers (level 2 links) */
.mega-menu__link--level-2 {
  color: var(--cc-gold);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.mega-menu__link--level-2:hover {
  color: var(--cc-gold-hover);
  text-decoration: none;
}

/* Regular links (level 3) */
.mega-menu__link {
  color: var(--cc-gray-light);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mega-menu__link:hover {
  color: var(--cc-white);
  text-decoration: none;
  padding-left: 0.3rem;
}

/* Active state */
.mega-menu__link--active {
  color: var(--cc-gold);
}

.mega-menu__link--active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--cc-gold);
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Column layout adjustments */
.mega-menu__list {
  gap: 2rem 3rem;
}

/* Nested list styling */
.mega-menu__list .list-unstyled {
  margin-top: 0.5rem;
}

/* ============================================================================
   HEADER ICONS
   ============================================================================ */

.header__icon {
  color: var(--cc-white);
  transition: color 0.2s ease;
}

.header__icon:hover {
  color: var(--cc-gold);
}

/* Cart count badge */
.cart-count-bubble {
  background-color: var(--cc-gold);
  color: var(--cc-black);
  font-weight: 600;
}

/* ============================================================================
   SEARCH
   ============================================================================ */

.search-modal__content {
  background-color: var(--cc-black);
  border-color: rgba(201, 162, 39, 0.2);
}

.search__input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--cc-white);
}

.search__input:focus {
  border-color: var(--cc-gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
}

.predictive-search__result-group-title {
  color: var(--cc-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* ============================================================================
   ANNOUNCEMENT BAR - DREAMY GLOW
   ============================================================================ */

.announcement-bar {
  background: linear-gradient(90deg, var(--cc-black) 0%, rgba(139, 92, 246, 0.15) 50%, var(--cc-black) 100%);
  color: var(--cc-white);
  border-bottom: 1px solid rgba(201, 162, 39, 0.1);
}

.announcement-bar__link {
  color: var(--cc-gold);
}

/* ============================================================================
   PRODUCT BADGES - STORE-VERIFIED COLORS
   ============================================================================ */

.badge--limited {
  background: linear-gradient(135deg, var(--cc-gold) 0%, var(--cc-gold-dark) 100%);
  color: var(--cc-black);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}

/* Staff Pick - Purple accent (matches store lighting) */
.badge--staff-pick {
  background: linear-gradient(135deg, var(--cc-purple) 0%, var(--cc-purple-dark) 100%);
  color: var(--cc-white);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}

.badge--new {
  background-color: transparent;
  border: 1px solid var(--cc-gold);
  color: var(--cc-gold);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
}

/* ============================================================================
   CLOUD CEILING EFFECT - SIGNATURE DESIGN ELEMENT
   Use on hero sections, cards, or anywhere to evoke the in-store experience
   ============================================================================ */

.cc-cloud-glow {
  position: relative;
}

.cc-cloud-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: var(--cc-gradient-glow);
  pointer-events: none;
  opacity: 0.6;
}

/* Dreamy border effect (like the cloud edge) */
.cc-cloud-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.cc-gold {
  color: var(--cc-gold);
}

.cc-purple {
  color: var(--cc-purple);
}

.cc-cyan {
  color: var(--cc-cyan);
}

.cc-pink {
  color: var(--cc-pink);
}

.cc-amber {
  color: var(--cc-amber);
}

.cc-bg-black {
  background-color: var(--cc-black);
}

.cc-bg-espresso {
  background-color: var(--cc-espresso);
}

.cc-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mandala-inspired gradient text */
.cc-gradient-text {
  background: var(--cc-gradient-mandala);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================================
   HOMEPAGE ATMOSPHERIC EFFECTS - CLOUD CEILING DIGITAL TRANSLATION
   ============================================================================ */

/* Hero section cloud glow - evokes the ceiling lights */
.shopify-section-group-header-group + .shopify-section .banner {
  position: relative;
}

.shopify-section-group-header-group + .shopify-section .banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(139, 92, 246, 0.05) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ritual pathways cloud effect */
.ritual-pathways {
  position: relative;
}

.ritual-pathways::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 100%);
  pointer-events: none;
}

/* Testimonials ambient glow */
.testimonials {
  position: relative;
  overflow: hidden;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(6, 182, 212, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
}

/* Collection list cards - warm glow on hover */
.collection-list .collection-product-card:hover,
.collection-list .card:hover {
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.1);
}

/* Product cards ambient effect */
.card-wrapper:hover .card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(201, 162, 39, 0.05);
}

/* Featured collection section subtle top glow */
.featured-collection {
  position: relative;
}

.featured-collection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 162, 39, 0.3) 50%,
    transparent 100%);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media screen and (max-width: 989px) {
  /* Mobile menu styling */
  .menu-drawer {
    background-color: var(--cc-black);
  }

  .menu-drawer__menu-item {
    color: var(--cc-white);
  }

  .menu-drawer__menu-item:hover {
    color: var(--cc-gold);
  }

  /* Purple accent instead of emerald for submenu */
  .menu-drawer__submenu {
    background-color: rgba(139, 92, 246, 0.1);
  }
}

/* ============================================================================
   ELITE ENHANCEMENTS - PREMIUM UX
   ============================================================================ */

/* Smooth scrolling behavior */
html {
  scroll-behavior: smooth;
}

/* GLOBAL DARK BACKGROUND FIX - Ensure entire site is dark */
html, body {
  background-color: var(--cc-black) !important;
}

/* Force all sections to have dark background unless explicitly light */
.shopify-section {
  background-color: var(--cc-black);
}

/* Override any default white backgrounds in color schemes */
.color-scheme-1,
.color-scheme-2,
.color-background-1,
.color-background-2 {
  background-color: var(--cc-black) !important;
  color: var(--cc-white) !important;
}

/* Custom Scrollbar - Subtle gold accent */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cc-black);
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 39, 0.5);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.3) var(--cc-black);
}

/* ============================================================================
   ENHANCED PRODUCT CARDS - LUXURY FEEL
   ============================================================================ */

/* Product card base transitions */
.card-wrapper {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-wrapper:hover {
  transform: translateY(-4px);
}

/* Product image zoom on hover */
.card-wrapper .card__media img,
.card-wrapper .media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

.card-wrapper:hover .card__media img,
.card-wrapper:hover .media img {
  transform: scale(1.05);
}

/* Product title elegant underline on hover */
.card__heading a {
  position: relative;
  display: inline;
}

.card__heading a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cc-gold);
  transition: width 0.3s ease;
}

.card-wrapper:hover .card__heading a::after {
  width: 100%;
}

/* Quick add button enhancement */
.quick-add__submit {
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.quick-add__submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.quick-add__submit:hover::before {
  left: 100%;
}

/* ============================================================================
   BUTTON ENHANCEMENTS - PREMIUM INTERACTIONS
   ============================================================================ */

/* Primary buttons - gold shimmer effect */
.button--primary,
.shopify-challenge__button,
.customer button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.button--primary::after,
.shopify-challenge__button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s ease;
}

.button--primary:hover::after,
.shopify-challenge__button:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* Secondary buttons - subtle border glow */
.button--secondary {
  transition: all 0.3s ease;
}

.button--secondary:hover {
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
}

/* ============================================================================
   GLASS MORPHISM ELEMENTS
   ============================================================================ */

.cc-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Apply glass effect to predictive search */
.predictive-search {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 162, 39, 0.15);
}

/* Cart drawer glass effect */
.cart-drawer {
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ============================================================================
   PAGE TRANSITIONS - SMOOTH ENTRY ANIMATIONS
   ============================================================================ */

/* Fade in animation for sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply to main content sections */
.shopify-section {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.shopify-section:nth-child(1) { animation-delay: 0s; }
.shopify-section:nth-child(2) { animation-delay: 0.1s; }
.shopify-section:nth-child(3) { animation-delay: 0.2s; }
.shopify-section:nth-child(4) { animation-delay: 0.3s; }
.shopify-section:nth-child(5) { animation-delay: 0.4s; }

/* ============================================================================
   FOCUS STATES - ACCESSIBILITY WITH STYLE
   ============================================================================ */

*:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
}

/* ============================================================================
   LOADING STATES - ELEGANT SPINNERS
   ============================================================================ */

.loading-overlay__spinner {
  border-color: rgba(201, 162, 39, 0.2);
  border-top-color: var(--cc-gold);
}

/* ============================================================================
   PRICE STYLING - CLEAN & PREMIUM
   ============================================================================ */

.price-item--sale {
  color: var(--cc-gold);
}

.price-item--regular.price-item--last {
  color: var(--cc-gray-muted);
  text-decoration: line-through;
}

/* ============================================================================
   COLLECTION FILTERS - REFINED
   ============================================================================ */

.facets__summary {
  border-color: rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease;
}

.facets__summary:hover {
  border-color: var(--cc-gold);
}

.facets__disclosure[open] .facets__summary {
  border-color: var(--cc-gold);
}

/* ============================================================================
   FOOTER REFINEMENTS
   ============================================================================ */

.footer {
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

.footer__content-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer links hover */
.footer-block__details-content a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-block__details-content a:hover {
  color: var(--cc-gold);
  padding-left: 4px;
}

/* Payment icons subtle styling */
.footer__payment svg {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.footer__payment svg:hover {
  opacity: 1;
}

/* ============================================================================
   QUANTITY SELECTOR - PREMIUM FEEL
   ============================================================================ */

.quantity__button {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.quantity__button:hover {
  color: var(--cc-gold);
  background-color: rgba(201, 162, 39, 0.1);
}

.quantity__input {
  transition: border-color 0.2s ease;
}

.quantity__input:focus {
  border-color: var(--cc-gold);
}

/* ============================================================================
   IMAGE OVERLAYS - DREAMY EFFECT
   ============================================================================ */

.banner__media::after {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.1) 30%,
    rgba(10, 10, 10, 0.1) 70%,
    rgba(10, 10, 10, 0.5) 100%
  );
}

/* ============================================================================
   NOTIFICATION/TOAST STYLING
   ============================================================================ */

.cart-notification {
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 162, 39, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   LINK HOVER EFFECTS - ELEGANT UNDERLINES
   ============================================================================ */

.link--text {
  position: relative;
}

.link--text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.link--text:hover::after {
  width: 100%;
}

/* ============================================================================
   SELECTION STYLING
   ============================================================================ */

::selection {
  background: rgba(201, 162, 39, 0.3);
  color: var(--cc-white);
}

::-moz-selection {
  background: rgba(201, 162, 39, 0.3);
  color: var(--cc-white);
}

/* ============================================================================
   REDUCED MOTION - ACCESSIBILITY
   ============================================================================ */

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

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================================
   FREE SHIPPING PROGRESS BAR
   ============================================================================ */

.free-shipping-bar {
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 8px;
}

.free-shipping-bar__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--cc-gray-light);
  margin-bottom: 0.75rem;
  text-align: center;
}

.free-shipping-bar__message strong {
  color: var(--cc-gold);
}

.free-shipping-bar__message--success {
  color: var(--cc-gold);
}

.free-shipping-bar__message--success strong {
  color: var(--cc-white);
}

.free-shipping-bar__icon {
  flex-shrink: 0;
  color: var(--cc-gold);
}

.free-shipping-bar__track {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.free-shipping-bar__progress {
  height: 100%;
  background: linear-gradient(90deg, var(--cc-gold) 0%, var(--cc-amber) 100%);
  border-radius: 2px;
  position: relative;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.free-shipping-bar__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================================
   BACK TO TOP BUTTON
   ============================================================================ */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: var(--cc-black);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 99;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--cc-gold);
  color: var(--cc-black);
  border-color: var(--cc-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201, 162, 39, 0.3);
}

.back-to-top svg {
  transition: transform 0.2s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

@media screen and (max-width: 749px) {
  .back-to-top {
    bottom: 5rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}

/* ============================================================================
   RECENTLY VIEWED PRODUCTS
   ============================================================================ */

.recently-viewed {
  padding: 3rem 0;
  background: var(--cc-black);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.recently-viewed__title {
  text-align: center;
  color: var(--cc-white);
  margin-bottom: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.recently-viewed__products {
  gap: 1.5rem;
}

.recently-viewed__item .card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.recently-viewed__item .card:hover {
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.recently-viewed__item .card__media {
  aspect-ratio: 1;
  overflow: hidden;
}

.recently-viewed__item .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.recently-viewed__item .card:hover .card__media img {
  transform: scale(1.05);
}

.recently-viewed__item .card__content {
  padding: 1rem;
  text-align: center;
}

.recently-viewed__item .card__heading {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--cc-white);
}

.recently-viewed__item .price {
  font-size: 0.875rem;
  color: var(--cc-gold);
}

/* ============================================================================
   STICKY ADD TO CART (MOBILE)
   ============================================================================ */

.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cc-black);
  border-top: 1px solid rgba(201, 162, 39, 0.2);
  padding: 0.75rem 1rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.sticky-atc.is-visible {
  transform: translateY(0);
}

.sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 100%;
}

.sticky-atc__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.sticky-atc__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cc-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-atc__price {
  font-size: 0.875rem;
  color: var(--cc-gold);
  font-weight: 600;
}

.sticky-atc__form {
  flex-shrink: 0;
}

.sticky-atc__button {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Hide on desktop */
@media screen and (min-width: 750px) {
  .sticky-atc {
    display: none;
  }
}

/* ============================================================================
   ENHANCED FORM INPUTS
   ============================================================================ */

.field__input,
.customer input,
.form__input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cc-white);
  transition: all 0.2s ease;
}

.field__input:focus,
.customer input:focus,
.form__input:focus {
  border-color: var(--cc-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.field__label,
.form__label {
  color: var(--cc-gray-light);
}

/* ============================================================================
   PRODUCT VARIANT SELECTORS
   ============================================================================ */

.variant-input {
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.variant-input:hover {
  border-color: rgba(201, 162, 39, 0.4);
}

.variant-input:checked + label,
.variant-input.is-active + label {
  border-color: var(--cc-gold);
  background: rgba(201, 162, 39, 0.1);
}

/* ============================================================================
   BREADCRUMBS - SUBTLE NAVIGATION
   ============================================================================ */

.breadcrumbs {
  font-size: 0.8rem;
  color: var(--cc-gray-muted);
}

.breadcrumbs a {
  color: var(--cc-gray-muted);
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--cc-gold);
}

.breadcrumbs__separator {
  margin: 0 0.5rem;
  opacity: 0.5;
}

/* ============================================================================
   PRODUCT TABS - ELEGANT DETAILS
   ============================================================================ */

.product__accordion .accordion__title {
  border-color: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.product__accordion .accordion__title:hover {
  color: var(--cc-gold);
}

.product__accordion .accordion[open] .accordion__title {
  color: var(--cc-gold);
  border-color: var(--cc-gold);
}

/* ============================================================================
   SALE BADGE ENHANCEMENT
   ============================================================================ */

.badge--sale,
.price__badge-sale {
  background: linear-gradient(135deg, var(--cc-red-dark) 0%, var(--cc-red-darker) 100%);
  color: var(--cc-white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}

/* ============================================================================
   NEWSLETTER POPUP STYLING
   ============================================================================ */

.newsletter-popup,
.popup-modal {
  background: var(--cc-black);
  border: 1px solid rgba(201, 162, 39, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.newsletter-popup__close {
  color: var(--cc-gray-light);
  transition: color 0.2s ease;
}

.newsletter-popup__close:hover {
  color: var(--cc-gold);
}

/* ============================================================================
   COLLECTION HERO BANNER
   ============================================================================ */

.collection-hero {
  position: relative;
}

.collection-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, var(--cc-black) 100%);
  pointer-events: none;
}

.collection-hero__title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   MOBILE MENU REFINEMENTS
   ============================================================================ */

@media screen and (max-width: 989px) {
  .menu-drawer__navigation-container {
    background: var(--cc-black);
  }

  .menu-drawer__close-button {
    color: var(--cc-gray-light);
  }

  .menu-drawer__close-button:hover {
    color: var(--cc-gold);
  }

  .menu-drawer__menu-item {
    border-color: rgba(255, 255, 255, 0.05);
  }

  .menu-drawer__submenu-item {
    background: rgba(139, 92, 246, 0.05);
  }
}

/* ============================================================================
   COLLECTION PAGE - ELITE ENHANCEMENTS
   ============================================================================ */

/* Collection banner - stronger presence */
.collection-banner {
  position: relative;
  padding: 3rem 0 2rem;
}

.collection-banner__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.collection-banner__description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Collection title styling */
.main-collection-banner .title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.main-collection-banner .collection__description {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* Filter bar styling */
.facets-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

.facets__summary {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.facets__disclosure {
  border-color: rgba(255, 255, 255, 0.1);
}

.facets__disclosure:hover {
  border-color: rgba(201, 162, 39, 0.3);
}

/* Active filter pills */
.active-facets__button {
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.3);
  color: var(--cc-gold);
}

.active-facets__button:hover {
  background: rgba(201, 162, 39, 0.25);
}

/* Sort dropdown */
.collection-sort-select {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--cc-white);
}

/* Product count indicator */
.collection-product-count {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Empty collection state */
.collection--empty {
  text-align: center;
  padding: 4rem 2rem;
}

.collection--empty p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
}

/* Loading state */
.collection-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Pagination styling */
.pagination {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pagination__item {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.pagination__item:hover {
  border-color: var(--cc-gold);
  color: var(--cc-gold);
}

.pagination__item--current {
  background: var(--cc-gold);
  border-color: var(--cc-gold);
  color: var(--cc-black);
}

/* ============================================================================
   QUICK ADD BUTTON - COLLECTION GRID
   ============================================================================ */

.quick-add__submit {
  background: rgba(201, 162, 39, 0.9);
  color: var(--cc-black);
  border: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.quick-add__submit:hover {
  background: var(--cc-gold);
  transform: translateY(-1px);
}

.quick-add__submit span {
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* Sold out quick add */
.quick-add__submit[disabled] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================================
   PRODUCT GRID - COLLECTION SPECIFIC
   ============================================================================ */

.collection .product-grid {
  row-gap: 2.5rem;
}

/* First row emphasis */
.collection .product-grid .grid__item:nth-child(-n+4) .card-wrapper {
  animation: fadeInUp 0.5s ease-out both;
}

.collection .product-grid .grid__item:nth-child(1) .card-wrapper { animation-delay: 0.1s; }
.collection .product-grid .grid__item:nth-child(2) .card-wrapper { animation-delay: 0.15s; }
.collection .product-grid .grid__item:nth-child(3) .card-wrapper { animation-delay: 0.2s; }
.collection .product-grid .grid__item:nth-child(4) .card-wrapper { animation-delay: 0.25s; }

/* ============================================================================
   ELITE LUXURY OVERHAUL - DEC 2025
   Transforming from "generic Shopify" to "Aesop-level luxury"
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. LUXURY TYPOGRAPHY - The #1 differentiator
   Import elegant serif for headers, refined sans for body
   ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --font-heading-luxury: "Cormorant Garamond", "Georgia", serif;
  --font-body-luxury: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Text hierarchy - opacity variations */
  --text-primary: var(--cc-white);
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.45);
}

/* Override Shopify's default Assistant font everywhere */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-luxury) !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body, p, span, a, li, td, th, label, input, textarea, select, button {
  font-family: var(--font-body-luxury) !important;
  font-weight: 400;
}

/* Headings - elegant sizing */
h1, .h0, .h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 500;
}

/* Body text - optimal readability */
body {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Product titles - refined */
.card__heading,
.product__title,
.full-unstyled-link {
  font-family: var(--font-heading-luxury) !important;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Vendor/brand names - subtle uppercase */
.caption-with-letter-spacing,
.card__information .visually-hidden + span,
.product__text.caption-with-letter-spacing {
  font-family: var(--font-body-luxury) !important;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Prices - clean and visible */
.price, .price-item {
  font-family: var(--font-body-luxury) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   2. LUXURY CARD DESIGN - Elevated, not flat
   ---------------------------------------------------------------------------- */

/* Product cards - soft shadows and rounded corners */
.card-wrapper .card,
.card {
  border-radius: 12px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.02);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

/* Card hover - sophisticated lift */
.card-wrapper:hover .card {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(201, 162, 39, 0.1) !important;
  transform: translateY(-6px);
}

/* Card media - rounded top with elegant gold frame */
.card__media,
.card .media {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  position: relative;
}

/* Elegant gold frame around product images */
.card__media::after,
.card .media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

/* Enhanced gold frame on hover */
.card-wrapper:hover .card__media::after,
.card-wrapper:hover .card .media::after {
  border-color: rgba(201, 162, 39, 0.5);
  border-width: 2px;
}

/* Card content - breathing room */
.card__information,
.card__content {
  padding: 1.25rem 1rem 1.5rem !important;
}

/* Collection cards - same treatment */
.collection-card-wrapper .card,
.collection-product-card {
  border-radius: 12px !important;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   3. LUXURY BADGES - Pill-shaped, subtle, not flashy
   ---------------------------------------------------------------------------- */

.badge,
.badge--limited,
.badge--staff-pick,
.badge--new,
.badge--sale,
.card__badge {
  border-radius: 20px !important;
  padding: 0.4rem 0.85rem !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge--limited {
  background: rgba(201, 162, 39, 0.15) !important;
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--cc-gold) !important;
}

.badge--staff-pick {
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--cc-purple) !important;
}

.badge--new {
  background: transparent !important;
  border: 1px solid rgba(201, 162, 39, 0.5);
  color: var(--cc-gold) !important;
}

.badge--sale,
.price__badge-sale {
  background: rgba(220, 38, 38, 0.15) !important;
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: var(--cc-red) !important;
  border-radius: 20px !important;
}

/* Sold out badge */
.badge--soldout,
.card__badge--soldout {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted) !important;
  border-radius: 20px !important;
}

/* ----------------------------------------------------------------------------
   4. REFINED BUTTONS - Elegant, not generic
   ---------------------------------------------------------------------------- */

/* Quick add buttons - transparent with gold border */
.quick-add__submit,
.button--secondary {
  background: transparent !important;
  border: 1px solid rgba(201, 162, 39, 0.5) !important;
  color: var(--cc-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem !important;
  font-weight: 600;
  padding: 0.875rem 1.5rem !important;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quick-add__submit:hover,
.button--secondary:hover {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  border-color: var(--cc-gold) !important;
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.25);
  transform: translateY(-1px);
}

/* Primary buttons - solid gold */
.button--primary,
.shopify-payment-button button {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem !important;
  font-weight: 600;
  padding: 1rem 2rem !important;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.button--primary:hover,
.shopify-payment-button button:hover {
  background: var(--cc-gold-hover) !important;
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.3);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   5. TEXT HIERARCHY - Depth through opacity
   ---------------------------------------------------------------------------- */

/* Primary text */
.card__heading a,
.product__title,
h1, h2, h3 {
  color: var(--text-primary);
}

/* ----------------------------------------------------------------------------
   5a. PRODUCT TITLE TRUNCATION - Visual only, full title stays in HTML for SEO
   ---------------------------------------------------------------------------- */

/* Truncate product titles on cards to 2 lines max */
.card__heading,
.card__heading a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em; /* 2 lines x 1.4 line-height */
}

/* Full title appears on hover via native browser tooltip */
.card__heading a[title] {
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   5b. LUXURY SPACING - Breathing room signals premium
   ---------------------------------------------------------------------------- */

/* Section padding - balanced, not excessive */
.section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* MOBILE: Reduce section padding for collection pages to avoid massive gaps */
@media screen and (max-width: 749px) {
  .section {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media screen and (min-width: 750px) {
  .section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* COLLECTION PAGES: Reduce padding - don't need as much luxury spacing here */
  .shopify-section[id$="__banner"],
  .shopify-section[id$="__context"],
  .shopify-section[id$="__value-bar"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .shopify-section[id$="__product-grid"] {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }
}

/* More space in product cards */
.card__information,
.card__content {
  padding: 1.5rem 1.25rem 1.75rem !important;
}

/* Grid gap - moderate increase */
.grid--2-col-tablet-down,
.grid--3-col-tablet,
.grid--4-col-desktop {
  gap: 1rem !important;
}

@media screen and (min-width: 750px) {
  .grid--2-col-tablet-down,
  .grid--3-col-tablet,
  .grid--4-col-desktop {
    gap: 1.25rem !important;
  }
}

/* Collection grid spacing */
.collection .grid {
  row-gap: 1.5rem !important;
}

/* Secondary text - descriptions */
.product__description,
.card__information p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ----------------------------------------------------------------------------
   PRODUCT PAGE DESCRIPTION - Larger, More Readable
   ---------------------------------------------------------------------------- */
.product__description .rte,
.product__description.rte {
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.product__description .rte p,
.product__description.rte p {
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  margin-bottom: 1.5rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.product__description .rte h3,
.product__description.rte h3 {
  font-size: 1.8rem !important;
  color: var(--cc-gold) !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.product__description .rte ul,
.product__description.rte ul {
  margin: 1.5rem 0 !important;
  padding-left: 1.5rem !important;
}

.product__description .rte li,
.product__description.rte li {
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.75rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.product__description .rte strong,
.product__description.rte strong {
  color: white !important;
  font-weight: 600 !important;
}

.product__description .rte em,
.product__description.rte em {
  color: rgba(255, 255, 255, 0.7) !important;
  font-style: italic !important;
}

/* First paragraph - make it stand out */
.product__description .rte p:first-of-type,
.product__description.rte p:first-of-type {
  font-size: 1.8rem !important;
  color: white !important;
  font-weight: 400 !important;
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .product__description .rte,
  .product__description.rte,
  .product__description .rte p,
  .product__description.rte p {
    font-size: 1.5rem !important;
  }

  .product__description .rte p:first-of-type,
  .product__description.rte p:first-of-type {
    font-size: 1.6rem !important;
  }

  .product__description .rte h3,
  .product__description.rte h3 {
    font-size: 1.6rem !important;
  }
}

/* Tertiary text - vendors, meta */
.card-information .caption-with-letter-spacing,
.product__text.caption-with-letter-spacing {
  color: var(--text-tertiary);
}

/* Muted text - less important */
.price-item--regular.price-item--last,
.pagination__item:not(.pagination__item--current) {
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   6. REFINED MICRO-INTERACTIONS
   ---------------------------------------------------------------------------- */

/* Product title underline - elegant gold sweep */
.card__heading a::after {
  background: linear-gradient(90deg, var(--cc-gold), rgba(201, 162, 39, 0.3)) !important;
  height: 1px;
  bottom: -3px;
}

/* Image hover - subtle zoom */
.card-wrapper .card__media img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.card-wrapper:hover .card__media img {
  transform: scale(1.04);
}

/* Links - refined underlines */
a:not(.button):not(.card__heading a) {
  transition: color 0.2s ease;
}

/* ----------------------------------------------------------------------------
   7. CLOUD CEILING GLOW ON CARDS - Brand signature
   ---------------------------------------------------------------------------- */

.card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.06) 0%,
    rgba(139, 92, 246, 0.03) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.card-wrapper:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   8. COLLECTION PAGE REFINEMENTS
   ---------------------------------------------------------------------------- */

/* Collection title - elegant serif */
.collection-hero__title,
.main-collection-banner .title {
  font-family: var(--font-heading-luxury) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Filter/sort buttons - refined */
.facet-filters button,
.facets__summary {
  font-family: var(--font-body-luxury) !important;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   9. PRODUCT PAGE REFINEMENTS
   ---------------------------------------------------------------------------- */

/* Product title on PDP */
.product__title {
  font-family: var(--font-heading-luxury) !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Vendor on PDP */
.product__text.caption-with-letter-spacing {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

/* Price on PDP */
.product__info-wrapper .price {
  font-size: 1.25rem;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   10. HEADER/NAV TYPOGRAPHY
   ---------------------------------------------------------------------------- */

.header__menu-item,
.mega-menu__link {
  font-family: var(--font-body-luxury) !important;
}

.mega-menu__link--level-2 {
  font-family: var(--font-body-luxury) !important;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   11. FOOTER TYPOGRAPHY
   ---------------------------------------------------------------------------- */

.footer h2,
.footer-block__heading {
  font-family: var(--font-heading-luxury) !important;
  font-weight: 500;
  letter-spacing: 0;
}

.footer a,
.footer p {
  font-family: var(--font-body-luxury) !important;
}

/* ============================================================================
   12. MOBILE TOUCH TARGET OPTIMIZATION
   Apple/WCAG require minimum 44x44px touch targets
   ============================================================================ */

@media screen and (max-width: 749px) {
  /* Badges - increase tap area on mobile */
  .badge,
  .badge--limited,
  .badge--staff-pick,
  .badge--new,
  .badge--sale,
  .card__badge {
    padding: 0.6rem 1rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Quick add buttons - ensure minimum touch size */
  .quick-add__submit,
  .button--secondary {
    min-height: 44px;
    padding: 0.75rem 1.25rem !important;
  }

  /* Icon buttons - ensure minimum size */
  .header__icon,
  .cart-toggle,
  .search-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu items in mobile drawer */
  .menu-drawer__menu-item {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }

  /* Quantity selector buttons */
  .quantity__button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================================
   13. ANIMATION PERFORMANCE OPTIMIZATION
   Only animate first sections, use reduced motion when requested
   ============================================================================ */

/* Respect user's motion 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;
  }
}

/* Only animate first 3 sections for performance */
.shopify-section:nth-child(n+4) {
  animation: none !important;
}

/* Optimize will-change for animated elements */
.card:hover,
.button:hover {
  will-change: transform;
}

/* Remove will-change after animation completes */
.card,
.button {
  will-change: auto;
}

/* ============================================================================
   14. CLOUD CEILING EFFECT - Digital Translation of Store Signature
   The physical store has fluffy white clouds with warm amber lights.
   These CSS effects create that dreamy, floating sensation digitally.
   ============================================================================ */

/* Cloud wisp border - top edge glow (like ceiling clouds) */
.cc-cloud-top {
  position: relative;
}

.cc-cloud-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(245, 158, 11, 0.02) 30%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Cloud wisp border - bottom edge (like clouds on shelf edges) */
.cc-cloud-bottom {
  position: relative;
}

.cc-cloud-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ambient warm glow - like embedded ceiling lights */
.cc-ambient-glow {
  position: relative;
}

.cc-ambient-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 158, 11, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Apply cloud effects to homepage sections */
.section-image-banner {
  position: relative;
}

/* Hero section - dreamy cloud overlay from top */
.section-image-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(245, 158, 11, 0.03) 20%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Ritual pathways section - subtle glow */
.section-ritual-pathways {
  position: relative;
  overflow: hidden;
}

.section-ritual-pathways::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 200px;
  background: radial-gradient(
    ellipse at center,
    rgba(139, 92, 246, 0.06) 0%,
    rgba(6, 182, 212, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Featured collection - warm glow like store lighting */
.section-featured-collection {
  position: relative;
}

.section-featured-collection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(245, 158, 11, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

/* Collection list (Shop by Format) - subtle cloud wisps */
.section-collection-list {
  position: relative;
}

.section-collection-list::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.015) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* ============================================================================
   15. ENHANCED PRODUCT CARD GLOW - Floating in Clouds Effect
   Products should feel like they're floating among clouds, like store shelves
   ============================================================================ */

/* Base card enhancement - subtle floating effect */
.card-wrapper {
  position: relative;
}

/* Dreamy shadow that suggests floating */
.card-wrapper .card {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 0 60px rgba(245, 158, 11, 0.03);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover - card rises up through clouds */
.card-wrapper:hover .card {
  transform: translateY(-8px);
  box-shadow:
    0 12px 20px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 80px rgba(245, 158, 11, 0.06),
    0 0 120px rgba(139, 92, 246, 0.03);
}

/* Ambient glow behind cards on hover */
.card-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 158, 11, 0) 0%,
    transparent 70%
  );
  transition: all 0.4s ease;
  z-index: -1;
  opacity: 0;
}

.card-wrapper:hover::before {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 158, 11, 0.08) 0%,
    rgba(139, 92, 246, 0.04) 50%,
    transparent 70%
  );
}

/* Image container - subtle inner glow */
.card__media {
  position: relative;
  overflow: hidden;
}

.card__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-wrapper:hover .card__media::after {
  opacity: 1;
}

/* ============================================================================
   16. URGENCY & SOCIAL PROOF INDICATORS
   Psychological triggers that increase conversion
   ============================================================================ */

/* Low stock warning - pulsing urgency */
.inventory-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cc-red);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}

.inventory-warning::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cc-red);
  border-radius: 50%;
  animation: pulse-urgency 1.5s ease-in-out infinite;
}

@keyframes pulse-urgency {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Viewing now indicator */
.viewing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  margin-top: 0.5rem;
}

.viewing-indicator svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* Popular badge pulse */
.badge--popular {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15)) !important;
  border: 1px solid rgba(236, 72, 153, 0.3);
  color: var(--cc-pink) !important;
  animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
  50% { box-shadow: 0 0 20px 0 rgba(236, 72, 153, 0.15); }
}

/* Bestseller flame icon effect */
.badge--bestseller {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.15)) !important;
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--cc-amber) !important;
}

/* Recently purchased social proof */
.social-proof-banner {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-proof-banner svg {
  color: var(--cc-purple);
  width: 16px;
  height: 16px;
}

/* ============================================================================
   17. COLLECTION PAGE ENHANCEMENTS
   Make browsing feel premium and intentional
   ============================================================================ */

/* Collection header - dreamy gradient backdrop */
.collection-hero {
  position: relative;
}

.collection-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.05) 0%,
    rgba(6, 182, 212, 0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Filter tags - luxury pill styling */
.facet-checkbox__text,
.facets__label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.facets__disclosure {
  border-color: rgba(201, 162, 39, 0.2);
}

.facets__disclosure:hover {
  border-color: rgba(201, 162, 39, 0.4);
}

/* Active filter - gold accent */
.facet-checkbox:checked + .facet-checkbox__text {
  color: var(--cc-gold);
}

/* Sort dropdown refinement */
.facet-filters__sort select {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cc-white);
  font-size: 0.85rem;
  padding: 0.6rem 2rem 0.6rem 1rem;
}

.facet-filters__sort select:focus {
  border-color: var(--cc-gold);
  outline: none;
}

/* ============================================================================
   18. FOOTER ENHANCEMENTS - Brand Elevation
   Captures Cloud Culture aesthetic in the footer
   ============================================================================ */

/* Footer base styling */
.footer {
  background-color: var(--cc-black);
  position: relative;
  overflow: hidden;
}

/* Subtle cloud border at top of footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 162, 39, 0.3) 20%,
    rgba(201, 162, 39, 0.5) 50%,
    rgba(201, 162, 39, 0.3) 80%,
    transparent 100%
  );
}

/* Cloud glow effect at top */
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 150px;
  background: radial-gradient(ellipse at center top,
    rgba(245, 158, 11, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Footer headings - gold accent */
.footer-block__heading {
  color: var(--cc-gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Footer links - elegant hover */
.footer-block__details-content .list-menu__item {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  padding: 0.25rem 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-block__details-content .list-menu__item:hover {
  color: var(--cc-gold);
  transform: translateX(4px);
}

/* Footer text - soft and readable */
.footer-block__details-content.rte {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Social icons - brand colored */
.footer__list-social .list-social__link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 0.5rem;
  transition: all 0.2s ease;
}

.footer__list-social .list-social__link:hover {
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.3);
  transform: translateY(-2px);
}

.footer__list-social .list-social__link svg {
  fill: rgba(255, 255, 255, 0.7);
  transition: fill 0.2s ease;
}

.footer__list-social .list-social__link:hover svg {
  fill: var(--cc-gold);
}

/* Copyright area */
.footer__content-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
  margin-top: 2rem;
}

.copyright__content {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Payment icons - subtle styling */
.footer__payment .list-payment {
  gap: 0.5rem;
}

.footer__payment .list-payment__item svg {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.footer__payment .list-payment__item:hover svg {
  opacity: 0.8;
}

/* Country selector - refined */
.footer__localization button,
.footer__localization .localization-form__select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.footer__localization button:hover,
.footer__localization .localization-form__select:hover {
  border-color: rgba(201, 162, 39, 0.3);
  color: var(--cc-white);
}

/* Newsletter in footer */
.footer .newsletter-form {
  max-width: 400px;
}

.footer .newsletter-form__field-wrapper {
  display: flex;
  gap: 0.5rem;
}

.footer .newsletter-form__field-wrapper input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cc-white);
  padding: 0.75rem 1rem;
  flex: 1;
}

.footer .newsletter-form__field-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer .newsletter-form__field-wrapper input:focus {
  border-color: var(--cc-gold);
  outline: none;
}

.footer .newsletter-form__button {
  background: var(--cc-gold);
  color: var(--cc-black);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.footer .newsletter-form__button:hover {
  background: var(--cc-gold-hover);
  transform: translateY(-1px);
}

/* ============================================================================
   19. PREDICTIVE SEARCH - Elite Styling
   Premium search experience matching brand aesthetic
   ============================================================================ */

/* Search modal/dropdown container */
.predictive-search,
predictive-search {
  background: var(--cc-black);
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Search input styling */
.search__input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cc-white);
  font-size: 1rem;
  padding: 0.875rem 1rem;
  transition: all 0.2s ease;
}

.search__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search__input:focus {
  border-color: var(--cc-gold);
  outline: none;
  background: rgba(255, 255, 255, 0.08);
}

/* Search icon button */
.search__button {
  color: var(--cc-gold);
  transition: color 0.2s ease;
}

.search__button:hover {
  color: var(--cc-gold-hover);
}

/* Results headings */
.predictive-search__heading {
  color: var(--cc-gold);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.5rem;
  margin: 0;
}

/* Result items */
.predictive-search__list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.predictive-search__list-item:last-child {
  border-bottom: none;
}

.predictive-search__list-item:hover,
.predictive-search__list-item[aria-selected="true"] {
  background: rgba(201, 162, 39, 0.08);
}

/* Result item content */
.predictive-search__item {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.predictive-search__item-heading {
  color: var(--cc-white);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  transition: color 0.15s ease;
}

.predictive-search__list-item:hover .predictive-search__item-heading,
.predictive-search__list-item[aria-selected="true"] .predictive-search__item-heading {
  color: var(--cc-gold);
}

/* Product images in results */
.predictive-search__image {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

/* Product details */
.predictive-search__item-vendor {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* Price in search results */
.predictive-search .price {
  color: var(--cc-gold);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* View all results button */
.predictive-search__search-for-button {
  display: block;
  width: 100%;
  padding: 1rem;
  background: rgba(201, 162, 39, 0.1);
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  color: var(--cc-gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.2s ease;
}

.predictive-search__search-for-button:hover {
  background: rgba(201, 162, 39, 0.2);
}

/* Highlighted search term */
.predictive-search__item-query-result mark,
.predictive-search__item-heading mark {
  background: transparent;
  color: var(--cc-gold);
  font-weight: 600;
}

/* No results state */
.predictive-search--no-results {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* Search loading spinner */
.predictive-search__loading-state {
  padding: 2rem;
  text-align: center;
}

.predictive-search__loading-state .spinner {
  border-color: rgba(201, 162, 39, 0.2);
  border-top-color: var(--cc-gold);
}

/* Mobile search drawer */
@media screen and (max-width: 749px) {
  .predictive-search,
  predictive-search {
    border-radius: 0;
    max-height: 70vh;
    overflow-y: auto;
  }

  .predictive-search__item {
    padding: 1rem;
  }

  .predictive-search__image {
    width: 60px;
    height: 60px;
  }
}

/* ============================================================================
   20. PRODUCT CARD QUICK VIEW HOVER
   Elevated hover state for product cards
   ============================================================================ */

/* Product card image container */
.card__media {
  position: relative;
  overflow: hidden;
}

/* Subtle zoom on hover */
.card__media .media img {
  transition: transform 0.4s ease;
}

.card-wrapper:hover .card__media .media img {
  transform: scale(1.03);
}

/* Quick view overlay */
.card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.card-wrapper:hover .card__quick-add {
  transform: translateY(0);
  opacity: 1;
}

/* Quick add button styling */
.card__quick-add .quick-add__submit {
  width: 100%;
  background: var(--cc-gold);
  color: var(--cc-black);
  border: none;
  padding: 0.6rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card__quick-add .quick-add__submit:hover {
  background: var(--cc-gold-hover);
}

/* Sold out state */
.card__quick-add .quick-add__submit[disabled] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* Product info enhancement on hover */
.card__information {
  transition: all 0.2s ease;
}

.card-wrapper:hover .card__heading {
  color: var(--cc-gold);
}

/* Price emphasis */
.card__information .price-item--regular,
.card__information .price-item--sale {
  color: var(--cc-gold);
  font-weight: 600;
}

/* Compare at price */
.card__information .price-item--regular s {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* ============================================================================
   SECTION 21: ELITE MOBILE FIXES
   Critical mobile conversion optimizations
   ============================================================================ */

/* 1. CRITICAL: Fix base font size for iOS (prevents auto-zoom on form inputs) */
@media screen and (max-width: 749px) {
  body {
    font-size: 1rem !important; /* 16px minimum for iOS */
  }

  /* Ensure form inputs don't trigger zoom */
  .field__input,
  .customer input,
  .form__input,
  input[type="email"],
  input[type="tel"],
  input[type="text"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 48px;
    padding: 0.875rem 1rem;
  }
}

/* 2. CRITICAL: Increase mobile grid spacing */
@media screen and (max-width: 749px) {
  .grid,
  .product-grid,
  .collection-product-list {
    gap: 1.5rem 1rem !important; /* 24px vertical, 16px horizontal */
    row-gap: 1.5rem !important;
  }

  .collection-product-list .grid__item {
    padding-bottom: 0.5rem;
  }
}

/* 3. CRITICAL: Enforce 48px touch targets */
@media screen and (max-width: 749px) {
  /* Quantity selectors */
  .quantity__button,
  .quantity-selector button,
  button.quantity__button {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .quantity__button svg {
    width: 20px;
    height: 20px;
  }

  /* Header icons */
  .header__icon,
  .header__icon--cart,
  .header__icon--menu,
  .header__icon--search {
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Menu drawer items */
  .menu-drawer__menu-item {
    min-height: 52px !important;
    padding: 1rem !important;
  }

  .menu-drawer__menu-item a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 4. HIGH: Increase button/badge font sizes */
@media screen and (max-width: 749px) {
  /* Buttons */
  .quick-add__submit,
  .button,
  .button--secondary,
  .product-form__submit,
  .shopify-payment-button button {
    font-size: 0.875rem !important; /* 14px minimum */
    padding: 1rem 1.25rem !important;
    min-height: 48px !important;
  }

  /* Badges */
  .badge,
  .product-badge,
  .badge--limited,
  .badge--staff-pick,
  .badge--new,
  .badge--sale,
  .product-badge--limited,
  .product-badge--staff-pick,
  .product-badge--low-stock {
    font-size: 0.7rem !important; /* 11.2px - slightly larger */
    padding: 0.35rem 0.6rem !important;
    min-height: 24px;
  }
}

/* 5. HIGH: Add aspect-ratio to images (prevent CLS) */
.card__media,
.card__media .media,
.media--square {
  aspect-ratio: 1 / 1;
}

.media--portrait {
  aspect-ratio: 2 / 3;
}

.media--landscape {
  aspect-ratio: 3 / 2;
}

@supports not (aspect-ratio: 1 / 1) {
  .card__media {
    position: relative;
  }

  .card__media::before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .card__media img,
  .card__media .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 6. MEDIUM: Isolate hover effects for touch devices */
@media (hover: none) {
  /* Remove hover transforms on touch devices */
  .card-wrapper:hover {
    transform: none !important;
  }

  .card-wrapper:hover .card {
    box-shadow: inherit !important;
  }

  .card-wrapper:hover .card__heading {
    color: inherit;
  }

  /* Add active (tap) states instead */
  .card-wrapper:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .button:active,
  .quick-add__submit:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }

  /* Remove glow effects on mobile */
  .card-wrapper::before,
  .cc-cloud-glow::before {
    display: none;
  }
}

@media (hover: hover) {
  /* Keep hover effects only on hover-capable devices */
  .card-wrapper:hover {
    transform: translateY(-6px);
  }
}

/* 7. MEDIUM: Optimize animations for mobile performance */
@media screen and (max-width: 749px) {
  /* Faster animations */
  .shopify-section {
    animation-duration: 0.3s !important;
  }

  /* Only animate first 2 sections */
  .shopify-section:nth-child(n+3) {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Reduce backdrop-filter usage (expensive on mobile GPU) */
  .header,
  .menu-drawer {
    backdrop-filter: blur(8px) !important; /* Reduced from 20px */
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* 8. MEDIUM: Mobile menu improvements */
@media screen and (max-width: 749px) {
  .menu-drawer {
    width: 100vw;
    max-width: 100%;
  }

  .menu-drawer__inner-container {
    padding: 1.5rem;
  }

  .menu-drawer__navigation {
    padding-top: 1rem;
  }

  /* Larger close button */
  .menu-drawer__close-button {
    min-width: 48px;
    min-height: 48px;
  }
}

/* 9. LOW: Back-to-top button mobile positioning */
@media screen and (max-width: 749px) {
  .back-to-top {
    bottom: 5rem !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* 10. Accessibility: Focus states always visible */
*:focus-visible {
  outline: 3px solid var(--cc-gold) !important;
  outline-offset: 2px;
}

/* Improve text selection */
::selection {
  background: rgba(201, 162, 39, 0.4);
  color: var(--cc-white);
}

/* 11. Mobile sticky add-to-cart enhancement */
@media screen and (max-width: 749px) {
  .product-form__buttons {
    position: sticky;
    bottom: 0;
    background: var(--cc-black);
    padding: 1rem;
    margin: 0 -1rem;
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    z-index: 10;
  }

  .product-form__submit {
    width: 100%;
    min-height: 52px;
    font-size: 1rem !important;
  }
}

/* 12. Mobile cart drawer improvements */
@media screen and (max-width: 749px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100%;
  }

  .cart-drawer__footer {
    padding: 1rem;
    background: var(--cc-black);
    border-top: 1px solid rgba(201, 162, 39, 0.2);
  }

  .cart-drawer__footer .button {
    width: 100%;
    min-height: 52px;
  }
}

/* 13. Mobile product page trust signals */
@media screen and (max-width: 749px) {
  .pdp-trust-signals {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .pdp-trust-item {
    flex: 0 0 calc(50% - 0.25rem);
    font-size: 0.7rem;
  }

  .pdp-shipping-promise {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

/* 14. FIX: Center product images on mobile when using object-fit: contain */
@media screen and (max-width: 749px) {
  /* PDP product images - center when using contain fit */
  .product__media-wrapper .media,
  .product__media .media,
  .product-media-container .media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product__media-wrapper .media img,
  .product__media .media img,
  .product-media-container .media img {
    object-position: center center !important;
    margin: 0 auto !important;
  }

  /* Collection grid cards - center images */
  .card__media .media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card__media .media img {
    object-position: center center;
  }
}

/* 15. Mobile collection filters */
@media screen and (max-width: 749px) {
  .facets-container {
    position: sticky;
    top: 60px;
    z-index: 5;
    background: var(--cc-black);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(201, 162, 39, 0.1);
  }

  .facets__disclosure button,
  .facets__sort button {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}

/* ============================================================================
   22. VISUAL AUDIT FIXES - Dec 9 2025
   Fixes found from actual visual inspection of live site
   ============================================================================ */

/* 22a. PRODUCT GRID SPACING - Force proper gaps on mobile */
@media screen and (max-width: 749px) {
  /* Override cramped 4px grid spacing */
  .collection .grid,
  .product-grid,
  .grid--2-col-tablet-down {
    gap: 1.25rem 0.75rem !important;
    row-gap: 1.25rem !important;
    column-gap: 0.75rem !important;
  }

  /* Grid items need margin fallback if gap isn't supported */
  .grid__item {
    margin-bottom: 0.5rem;
  }
}

/* 22b. PRODUCT CARD SEPARATION - Add visual distinction between cards */
.card-wrapper .card {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-wrapper:hover .card {
  border-color: rgba(201, 162, 39, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* 22c. BADGE POSITIONING - Ensure badges don't overflow on small screens */
@media screen and (max-width: 374px) {
  .card__badge {
    top: 0.5rem !important;
    left: 0.5rem !important;
    max-width: calc(100% - 1rem);
  }

  .card__badge .badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
}

/* 22d. TRUST BAR - Fix wrapping on narrow phones */
@media screen and (max-width: 374px) {
  .trust-bar__items {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: center;
  }

  .trust-bar__item {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* 22e. AGE GATE MODAL - Ensure fits on small screens */
@media screen and (max-width: 440px) {
  .age-gate,
  .age-verifier,
  [data-age-gate],
  .shopify-section--age-check {
    padding: 1rem !important;
  }

  .age-gate__content,
  .age-verifier__content {
    max-width: 100% !important;
    width: calc(100vw - 2rem) !important;
    padding: 1.5rem !important;
  }

  .age-gate__title,
  .age-verifier__title {
    font-size: 1.25rem !important;
  }

  .age-gate__buttons,
  .age-verifier__buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .age-gate__button,
  .age-verifier__button {
    width: 100% !important;
  }
}

/* 22f. COLLECTION PAGE TITLE - Better mobile sizing */
@media screen and (max-width: 749px) {
  .collection-hero__title,
  .collection__title {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }

  .collection-hero__description {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* 22g. PRODUCT INFO SPACING on mobile */
@media screen and (max-width: 749px) {
  .card__content,
  .card__information {
    padding: 0.875rem 0.75rem !important;
  }

  .card__heading {
    font-size: 0.8rem !important;
    line-height: 1.3;
    margin-bottom: 0.25rem;
  }

  .price {
    font-size: 0.9rem !important;
  }
}

/* ============================================================================
   SECTION 23: CONVERSION OPTIMIZATION
   Focus: Remove friction, increase urgency, drive sales
   ============================================================================ */

/* 23a. COLLECTION PAGE - Tighter spacing, products above fold */
.collection-hero {
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
}

.collection-hero__title {
  font-size: 1.75rem !important;
  margin-bottom: 0.5rem !important;
}

.collection-hero__description {
  max-width: 700px;
  font-size: 0.9rem !important;
  line-height: 1.5;
  opacity: 0.8;
}

/* ============================================================================
   MOBILE COLLECTION PAGE - AGGRESSIVE SPACE REDUCTION
   Fix: Massive gap before products on mobile (was ~675px before products)
   ============================================================================ */

@media screen and (max-width: 749px) {
  /* CRITICAL: Override .section padding on collection pages */
  /* The .section class from line 1789 adds 40px padding - too much for mobile collections */
  /* IDs look like: shopify-section-template--19314629443806__banner */
  .shopify-section[id$="__banner"],
  .shopify-section[id$="__context"],
  .shopify-section[id$="__value-bar"],
  .shopify-section[id$="__product-grid"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Also target the inner -padding divs */
  [class*="__banner-padding"],
  [class*="__context-padding"],
  [class*="__value-bar-padding"],
  [class*="__product-grid-padding"],
  div[class*="-padding"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Reduce collection hero/banner */
  .collection-hero {
    padding: 8px 0 !important;
  }

  .collection-hero__inner {
    padding: 8px 0 !important;
  }

  .collection-hero__title {
    font-size: 1.25rem !important;
    margin-bottom: 0 !important;
  }

  /* Drastically reduce context section padding */
  [class*="__context-padding"],
  .collection-context {
    padding: 4px 0 !important;
  }

  .collection-context__inner {
    gap: 0.25rem !important;
  }

  .collection-context__stats {
    font-size: 0.75rem !important;
  }

  /* Drastically reduce value bar padding */
  [class*="__value-bar-padding"],
  .collection-value-bar {
    padding: 0.5rem 1rem !important;
  }

  .collection-value-bar__inner {
    gap: 0.5rem !important;
  }

  .collection-value-bar__item {
    font-size: 0.7rem !important;
  }

  /* Reduce product grid section top padding */
  [class*="__product-grid-padding"] {
    padding-top: 0.5rem !important;
  }

  /* Tighten facets/filter bar */
  .facets-container {
    padding: 0.5rem 0 !important;
  }

  .facet-filters {
    padding: 0.5rem 0 !important;
  }
}

/* Desktop: Keep reasonable spacing */
@media screen and (min-width: 750px) {
  .collection-context {
    padding: 0.625rem 0 !important;
  }

  .collection-value-bar {
    padding: 0.875rem 0 !important;
  }
}

/* 23b. PRICE PROMINENCE - Make prices impossible to miss */
.price {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--cc-white) !important;
}

.price-item--regular {
  font-weight: 700;
}

/* Sale price styling */
.price--on-sale .price-item--regular {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.9rem !important;
}

.price--on-sale .price-item--sale {
  color: var(--cc-gold) !important;
  font-weight: 700;
}

/* Compare at price */
.price__sale .price-item--regular {
  font-size: 0.85rem;
  opacity: 0.6;
}

/* 23c. QUICK ADD BUTTONS - High contrast, obvious CTA */
.quick-add__submit {
  background-color: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  border: none !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.875rem 1.5rem !important;
  transition: all 0.2s ease !important;
}

.quick-add__submit:hover {
  background-color: var(--cc-gold-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

.quick-add__submit:disabled {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Quick add on hover - show immediately */
.card:hover .quick-add {
  opacity: 1;
  transform: translateY(0);
}

.quick-add {
  margin-top: 0.75rem;
}

/* 23d. PRODUCT CARD - Clean, conversion-focused layout */
.card-wrapper {
  position: relative;
}

.card__heading {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.35;
  margin-bottom: 0.375rem !important;
}

.card__heading a {
  color: var(--cc-white);
  transition: color 0.2s ease;
}

.card__heading a:hover {
  color: var(--cc-gold);
}

/* Card content area */
.card__content {
  padding: 1rem 0.75rem !important;
}

/* Card information layout */
.card-information {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 23e. BADGE REFINEMENT - Less clutter, more impact */
.product-badges {
  gap: 0.25rem !important;
}

.product-badge {
  font-size: 0.55rem !important;
  padding: 0.15rem 0.4rem !important;
  letter-spacing: 0.1em !important;
}

/* Hide fulfillment badges on collection pages - they're redundant */
.collection .product-badge--shippable,
.collection .product-badge--pickup-only {
  display: none;
}

/* Only show on product page where it matters for decision */
.product .product-badge--shippable,
.product .product-badge--pickup-only {
  display: inline-flex;
}

/* 23f. TRUST SIGNALS - Always visible */
.collection-context__prop {
  font-size: 0.7rem !important;
}

/* Add trust badge to product cards on hover */
.card-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cc-gold) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-wrapper:hover::after {
  opacity: 1;
}

/* 23g. SOLD OUT STATE - Clear but not dominant */
.badge--sold-out,
.badge[class*="sold_out"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.65rem;
}

/* Dim sold out cards */
.card:has(.badge--sold-out),
.card-wrapper:has([disabled]) {
  opacity: 0.6;
}

/* 23h. HOVER STATES - Encourage interaction */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Image zoom on hover */
.card__media .media img {
  transition: transform 0.4s ease;
}

.card:hover .card__media .media img {
  transform: scale(1.03);
}

/* 23i. URGENCY INDICATORS - Draw attention without being annoying */
.product-badge--low-stock {
  animation: none !important; /* Remove pulsing - too distracting */
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
}

/* 23j. MOBILE CONVERSION OPTIMIZATION */
@media screen and (max-width: 749px) {
  /* Tighter collection header */
  .collection-hero {
    padding: 1rem 0 0.75rem !important;
  }

  .collection-hero__title {
    font-size: 1.35rem !important;
  }

  /* Smaller badges on mobile */
  .product-badge {
    font-size: 0.5rem !important;
    padding: 0.125rem 0.35rem !important;
  }

  /* Price always visible */
  .price {
    font-size: 1rem !important;
  }

  /* Quick add full width on mobile */
  .quick-add__submit {
    padding: 0.75rem 1rem !important;
    font-size: 0.75rem !important;
  }

  /* Card hover effects off on mobile (no hover) */
  .card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Tap target size */
  .card__heading a {
    display: block;
    padding: 0.25rem 0;
  }
}

/* 23k. HERO SECTION - Clear CTA */
.banner__buttons .button,
.slideshow__buttons .button {
  background-color: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  font-weight: 600 !important;
  padding: 1rem 2rem !important;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none !important;
  transition: all 0.2s ease;
}

.banner__buttons .button:hover,
.slideshow__buttons .button:hover {
  background-color: var(--cc-gold-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}

/* Secondary button style */
.banner__buttons .button--secondary,
.slideshow__buttons .button--secondary {
  background-color: transparent !important;
  color: var(--cc-white) !important;
  border: 2px solid var(--cc-white) !important;
}

.banner__buttons .button--secondary:hover,
.slideshow__buttons .button--secondary:hover {
  background-color: var(--cc-white) !important;
  color: var(--cc-black) !important;
}

/* 23l. PRODUCT PAGE - BUY BUTTON PROMINENCE */
.product-form__submit {
  background-color: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 1.125rem 2rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none !important;
  transition: all 0.2s ease;
}

.product-form__submit:hover {
  background-color: var(--cc-gold-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}

.product-form__submit:disabled {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: not-allowed;
}

/* Shop Pay button styling */
.shopify-payment-button__button {
  border-radius: 4px !important;
}

/* 23m. CHECKOUT URGENCY */
.cart__ctas .button {
  background-color: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  font-weight: 700;
}

/* 23n. ANNOUNCEMENT BAR - Trust and urgency */
.announcement-bar {
  background-color: var(--cc-gold) !important;
  color: var(--cc-black) !important;
}

.announcement-bar__message {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

/* 23o. STICKY ADD TO CART (if implemented) */
.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cc-black);
  border-top: 1px solid rgba(201, 162, 39, 0.2);
  padding: 0.75rem;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-atc.is-visible {
  transform: translateY(0);
}

.sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.sticky-atc__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sticky-atc__title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cc-white);
}

.sticky-atc__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-gold);
}

.sticky-atc__button {
  background-color: var(--cc-gold);
  color: var(--cc-black);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sticky-atc__button:hover {
  background-color: var(--cc-gold-hover);
}

/* ============================================================================
   ANIMATED HERO BACKGROUND - CSS Fallback for Video
   Creates floating color orbs similar to nadsai.com effect
   Uses Cloud Culture color palette: purple, cyan, amber, pink
   ============================================================================ */

/* Container for animated background - add this class to slideshow/hero section */
.cc-animated-bg {
  position: relative;
  overflow: hidden;
}

.cc-animated-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

/* The floating orbs container */
.cc-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* Individual orb styling - blurred gradient circles */
.cc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Purple orb - primary, largest */
.cc-orb--purple {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--cc-purple) 0%, transparent 70%);
  top: 10%;
  left: 20%;
  animation: cc-float-1 12s ease-in-out infinite alternate;
}

/* Cyan orb - secondary */
.cc-orb--cyan {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--cc-cyan) 0%, transparent 70%);
  top: 40%;
  right: 15%;
  animation: cc-float-2 15s ease-in-out infinite alternate;
}

/* Amber/Gold orb - accent */
.cc-orb--amber {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--cc-amber) 0%, transparent 70%);
  bottom: 20%;
  left: 10%;
  animation: cc-float-3 18s ease-in-out infinite alternate;
  opacity: 0.4;
}

/* Pink orb - accent */
.cc-orb--pink {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--cc-pink) 0%, transparent 70%);
  top: 60%;
  left: 50%;
  animation: cc-float-4 14s ease-in-out infinite alternate;
  opacity: 0.5;
}

/* Small accent orb */
.cc-orb--small {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--cc-purple-dark) 0%, transparent 70%);
  top: 20%;
  right: 30%;
  animation: cc-float-5 10s ease-in-out infinite alternate;
  opacity: 0.4;
}

/* Keyframe animations - slow, hypnotic floating */
@keyframes cc-float-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(50px, 30px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 50px) scale(0.95);
  }
}

@keyframes cc-float-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, -20px) scale(1.05);
  }
  100% {
    transform: translate(30px, -40px) scale(0.9);
  }
}

@keyframes cc-float-3 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(60px, -30px) scale(1.15);
  }
  100% {
    transform: translate(-20px, -50px) scale(1);
  }
}

@keyframes cc-float-4 {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(-50px, 40px) scale(1.1) rotate(10deg);
  }
  100% {
    transform: translate(40px, -30px) scale(0.9) rotate(-5deg);
  }
}

@keyframes cc-float-5 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(80px, 60px) scale(1.2);
  }
}

/* Ensure hero content stays above the orbs */
.cc-animated-bg .banner__content,
.cc-animated-bg .slideshow__text-wrapper {
  position: relative;
  z-index: 10;
}

.cc-animated-bg .banner__media,
.cc-animated-bg .slideshow__media {
  z-index: 5;
}

/* Mobile: reduce orb sizes and blur for performance */
@media screen and (max-width: 749px) {
  .cc-orb {
    filter: blur(60px);
  }

  .cc-orb--purple {
    width: 300px;
    height: 300px;
  }

  .cc-orb--cyan {
    width: 250px;
    height: 250px;
  }

  .cc-orb--amber {
    width: 200px;
    height: 200px;
  }

  .cc-orb--pink {
    width: 180px;
    height: 180px;
  }

  .cc-orb--small {
    display: none; /* Hide smallest orb on mobile */
  }
}

/* Reduced motion preference - pause animations */
@media (prefers-reduced-motion: reduce) {
  .cc-orb {
    animation: none;
  }
}

/* ============================================================================
   ALTERNATIVE: Pure CSS Animated Gradient Background
   Use this if you don't want to add HTML for orbs
   Just add class "cc-gradient-animate" to the hero section
   ============================================================================ */

.cc-gradient-animate {
  position: relative;
  overflow: hidden;
}

.cc-gradient-animate::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 30%, var(--cc-purple) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, var(--cc-cyan) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, var(--cc-amber) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 20%, var(--cc-pink) 0%, transparent 45%);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  animation: cc-gradient-shift 20s ease-in-out infinite;
  filter: blur(80px);
}

@keyframes cc-gradient-shift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5%, 5%) rotate(2deg);
  }
  50% {
    transform: translate(-3%, 8%) rotate(-1deg);
  }
  75% {
    transform: translate(8%, -5%) rotate(3deg);
  }
}

.cc-gradient-animate > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .cc-gradient-animate::before {
    animation: none;
  }
}

/* ============================================================================
   LUXURY POLISH - Elite Refinements
   Added: Dec 16, 2025
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. SMOOTH SCROLL - Elegant page navigation
   ---------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* ----------------------------------------------------------------------------
   2. FADE-IN ANIMATIONS - Elements reveal gracefully on scroll
   ---------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Staggered fade-in for product grids */
.product-grid .grid__item,
.collection-product-card {
  animation: fadeInUp 0.6s ease-out both;
}

.product-grid .grid__item:nth-child(1) { animation-delay: 0.05s; }
.product-grid .grid__item:nth-child(2) { animation-delay: 0.1s; }
.product-grid .grid__item:nth-child(3) { animation-delay: 0.15s; }
.product-grid .grid__item:nth-child(4) { animation-delay: 0.2s; }
.product-grid .grid__item:nth-child(5) { animation-delay: 0.25s; }
.product-grid .grid__item:nth-child(6) { animation-delay: 0.3s; }
.product-grid .grid__item:nth-child(7) { animation-delay: 0.35s; }
.product-grid .grid__item:nth-child(8) { animation-delay: 0.4s; }

/* Fade-in for sections */
.section-header,
.collection-hero,
.shopify-section {
  animation: fadeIn 0.8s ease-out both;
}

/* ----------------------------------------------------------------------------
   3. PRODUCT CARD HOVER EFFECTS - Subtle, luxurious interactions
   ---------------------------------------------------------------------------- */
.card-wrapper {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
}

.card-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(201, 162, 39, 0.1);
}

/* Image zoom on hover */
.card__media .media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-wrapper:hover .card__media .media img {
  transform: scale(1.05);
}

/* Subtle gold glow on card hover */
.card-wrapper:hover .card {
  border-color: rgba(201, 162, 39, 0.3);
}

/* Product title hover effect */
.card__heading a {
  transition: color 0.3s ease;
}

.card-wrapper:hover .card__heading a {
  color: var(--cc-gold);
}

/* ----------------------------------------------------------------------------
   4. BUTTON STYLING - Refined, luxurious buttons
   ---------------------------------------------------------------------------- */

/* Primary buttons - Gold with elegance */
.button,
.shopify-challenge__button,
button[type="submit"],
.cart__checkout-button {
  background: linear-gradient(135deg, var(--cc-gold) 0%, var(--cc-gold-dark) 100%);
  border: none;
  color: var(--cc-black);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 1rem 2rem;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.button::before,
.cart__checkout-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.button:hover::before,
.cart__checkout-button:hover::before {
  left: 100%;
}

.button:hover,
.cart__checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 162, 39, 0.4);
}

/* Secondary buttons - Outlined elegance */
.button--secondary {
  background: transparent;
  border: 1px solid var(--cc-gold);
  color: var(--cc-gold);
}

.button--secondary:hover {
  background: var(--cc-gold);
  color: var(--cc-black);
}

/* Quick add button refinement */
.quick-add__submit {
  background: rgba(201, 162, 39, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.875rem 1.5rem;
}

.quick-add__submit:hover {
  background: var(--cc-gold);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   5. GOLD ACCENT SEPARATORS & DETAILS
   ---------------------------------------------------------------------------- */

/* Elegant gold line under section titles */
.collection-hero__title::after,
.section-header h2::after,
h1.collection-hero__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--cc-gold), transparent);
  margin-top: 1rem;
}

/* Gold accent on active/selected states */
.facets__label.active,
.list-menu__item--active {
  border-bottom: 2px solid var(--cc-gold);
}

/* Subtle gold border on focused inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--cc-gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2) !important;
  outline: none;
}

/* ----------------------------------------------------------------------------
   6. TYPOGRAPHY REFINEMENTS - Quiet luxury in every letter
   ---------------------------------------------------------------------------- */

/* Headings - More refined spacing */
h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: 0.02em;
  font-weight: 500;
}

h1, .h1 {
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Body text - Improved readability */
body {
  letter-spacing: 0.01em;
  line-height: 1.7;
}

/* Product titles - Elegant restraint */
.card__heading {
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Price styling - Confident, not shouty */
.price-item {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Muted helper text */
.caption,
.product__text,
.card-information {
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* ----------------------------------------------------------------------------
   7. MICRO-INTERACTIONS - Details that feel premium
   ---------------------------------------------------------------------------- */

/* Smooth transitions on all interactive elements */
a, button, .card, input, select, textarea {
  transition: all 0.3s ease;
}

/* Link hover - Gold accent */
a:hover {
  color: var(--cc-gold);
}

/* Icon buttons hover */
.header__icon:hover {
  transform: scale(1.1);
  color: var(--cc-gold);
}

/* Cart icon subtle bounce on add */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.cart-icon--active {
  animation: cartBounce 0.4s ease;
}

/* Quantity buttons refinement */
.quantity__button {
  transition: all 0.2s ease;
}

.quantity__button:hover {
  background: var(--cc-gold);
  color: var(--cc-black);
}

/* ----------------------------------------------------------------------------
   8. LUXURY LOADING STATE
   ---------------------------------------------------------------------------- */
.loading-overlay {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px);
}

.loading-overlay__spinner {
  border-color: rgba(201, 162, 39, 0.2);
  border-top-color: var(--cc-gold);
}

/* ----------------------------------------------------------------------------
   9. SCROLLBAR STYLING - Even the details matter
   ---------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cc-black);
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cc-gold);
}

/* ============================================================================
   ELITE VISUAL ENHANCEMENTS
   Every detail matters for a premium experience
   ============================================================================ */

/* ----------------------------------------------------------------------------
   10. RITUAL PATHWAYS - Enhanced Cards
   ---------------------------------------------------------------------------- */
.ritual-card {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(201, 162, 39, 0.04) 50%,
    rgba(0, 0, 0, 0.6) 100%
  ) !important;
  border: 1px solid rgba(201, 162, 39, 0.12) !important;
  position: relative;
  overflow: hidden;
}

.ritual-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 39, 0.05),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
}

.ritual-card:hover::after {
  left: 100%;
}

.ritual-card:hover {
  border-color: rgba(201, 162, 39, 0.35) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(201, 162, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.ritual-card__title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.ritual-card__name {
  position: relative;
}

.ritual-card__name::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cc-gold);
  transition: width 0.3s ease;
}

.ritual-card:hover .ritual-card__name::after {
  width: 100%;
}

/* ----------------------------------------------------------------------------
   11. COLLECTION CARDS - Premium Hover Effects
   ---------------------------------------------------------------------------- */
.collection-list__item .card {
  position: relative;
  overflow: hidden;
}

.collection-list__item .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0.6;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.collection-list__item .card:hover::before {
  opacity: 0.8;
}

.collection-list__item .card__content {
  position: relative;
  z-index: 2;
}

.collection-list__item .card img,
.collection-list__item .card .media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.collection-list__item .card:hover img,
.collection-list__item .card:hover .media img {
  transform: scale(1.08) !important;
}

.collection-list__item .card__heading {
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.collection-list__item .card:hover .card__heading {
  transform: translateY(-2px);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------------------------
   12. PRODUCT BADGES - Staff Pick & Bestseller
   ---------------------------------------------------------------------------- */
.card__badge {
  position: relative;
  z-index: 5;
}

.card__badge .badge {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 2px !important;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3) !important;
  animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(201, 162, 39, 0.5);
  }
}

.card__badge .badge--sale {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

.card__badge .badge--soldout {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  box-shadow: none !important;
  animation: none;
}

/* Staff Pick Badge - Special styling */
.card[data-staff-pick="true"]::before,
.product-card[data-staff-pick="true"]::before {
  content: 'STAFF PICK';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--cc-gold);
  color: var(--cc-black);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4);
}

/* ----------------------------------------------------------------------------
   13. EMAIL SIGNUP - Subtle Glow Animation
   ---------------------------------------------------------------------------- */
.email-signup,
.newsletter {
  position: relative;
  overflow: hidden;
}

.email-signup::before,
.newsletter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 162, 39, 0.08) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  animation: email-glow 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes email-glow {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.email-signup__incentive,
.newsletter .field input[type="email"] {
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.email-signup__incentive:focus,
.newsletter .field input[type="email"]:focus {
  border-color: var(--cc-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15) !important;
}

/* Email input premium styling */
.email-signup .field__input,
.newsletter .field__input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.email-signup .field__input:focus,
.newsletter .field__input:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--cc-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1) !important;
}

.email-signup .field__input::placeholder,
.newsletter .field__input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ----------------------------------------------------------------------------
   14. BACK TO TOP BUTTON
   ---------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--cc-gold);
  border-color: var(--cc-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(201, 162, 39, 0.4);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  color: var(--cc-gold);
  transition: color 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover svg {
  color: var(--cc-black);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   15. TESTIMONIAL CARDS - Premium Polish
   ---------------------------------------------------------------------------- */
.testimonial-card,
.testimonials__item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.01) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease !important;
}

.testimonial-card::before,
.testimonials__item::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 120px;
  font-family: Georgia, serif;
  color: rgba(201, 162, 39, 0.08);
  line-height: 1;
  pointer-events: none;
}

.testimonial-card:hover,
.testimonials__item:hover {
  border-color: rgba(201, 162, 39, 0.2) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.testimonial-card__text,
.testimonials__quote {
  font-style: italic;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.7 !important;
}

.testimonial-card__author,
.testimonials__author {
  color: var(--cc-gold) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Star rating enhancement */
.testimonial-card .stars,
.testimonials__rating {
  color: var(--cc-gold) !important;
  filter: drop-shadow(0 0 3px rgba(201, 162, 39, 0.3));
}

/* ----------------------------------------------------------------------------
   16. TRUST BAR - Subtle Animation
   ---------------------------------------------------------------------------- */
.trust-bar__item,
.trust-bar .trust-item {
  transition: transform 0.3s ease, color 0.3s ease;
}

.trust-bar__item:hover,
.trust-bar .trust-item:hover {
  transform: translateY(-2px);
  color: var(--cc-gold) !important;
}

.trust-bar__item svg,
.trust-bar .trust-item svg {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.trust-bar__item:hover svg,
.trust-bar .trust-item:hover svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.4));
}

/* Marquee-style trust bar animation for mobile */
@media screen and (max-width: 749px) {
  .trust-bar__inner {
    animation: trust-scroll 20s linear infinite;
  }

  @keyframes trust-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}

/* ----------------------------------------------------------------------------
   17. HERO SECTION - Premium Styling
   ---------------------------------------------------------------------------- */

/* Hero heading in gold for brand consistency */
.banner__heading,
.image-banner .banner__heading {
  color: var(--cc-gold) !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(201, 162, 39, 0.2) !important;
}

/* Hero CTA Buttons */
.banner__buttons .button,
.image-banner .button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner__buttons .button--primary,
.image-banner .button--primary {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

.banner__buttons .button--primary::before,
.image-banner .button--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.banner__buttons .button--primary:hover::before,
.image-banner .button--primary:hover::before {
  left: 100%;
}

.banner__buttons .button--primary:hover,
.image-banner .button--primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(201, 162, 39, 0.4) !important;
}

.banner__buttons .button--secondary,
.image-banner .button--secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  backdrop-filter: blur(10px);
}

.banner__buttons .button--secondary:hover,
.image-banner .button--secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--cc-gold) !important;
  color: var(--cc-gold) !important;
  transform: translateY(-3px) !important;
}

/* ----------------------------------------------------------------------------
   18. ADD TO CART / ADD TO RITUAL - Premium Button
   ---------------------------------------------------------------------------- */
.product-form__submit,
.add-to-cart,
button[name="add"],
.quick-add__submit {
  position: relative;
  overflow: hidden;
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-form__submit::before,
.add-to-cart::before,
button[name="add"]::before,
.quick-add__submit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.product-form__submit:hover::before,
.add-to-cart:hover::before,
button[name="add"]:hover::before,
.quick-add__submit:hover::before {
  width: 300px;
  height: 300px;
}

.product-form__submit:hover,
.add-to-cart:hover,
button[name="add"]:hover,
.quick-add__submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(201, 162, 39, 0.4) !important;
}

/* Loading state */
.product-form__submit.loading,
.add-to-cart.loading {
  pointer-events: none;
  opacity: 0.8;
}

.product-form__submit.loading::after,
.add-to-cart.loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(10, 10, 10, 0.3);
  border-top-color: var(--cc-black);
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   19. PAGE TRANSITIONS & STAGGER ANIMATIONS
   ---------------------------------------------------------------------------- */
.section-{{ section.id }},
[class*="shopify-section"] {
  opacity: 0;
  transform: translateY(20px);
  animation: section-reveal 0.6s ease forwards;
}

@keyframes section-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger children animations */
.grid__item,
.collection-list__item,
.product-list__item {
  opacity: 0;
  animation: item-stagger 0.5s ease forwards;
}

.grid__item:nth-child(1),
.collection-list__item:nth-child(1) { animation-delay: 0.1s; }
.grid__item:nth-child(2),
.collection-list__item:nth-child(2) { animation-delay: 0.2s; }
.grid__item:nth-child(3),
.collection-list__item:nth-child(3) { animation-delay: 0.3s; }
.grid__item:nth-child(4),
.collection-list__item:nth-child(4) { animation-delay: 0.4s; }
.grid__item:nth-child(5) { animation-delay: 0.5s; }
.grid__item:nth-child(6) { animation-delay: 0.6s; }
.grid__item:nth-child(7) { animation-delay: 0.7s; }
.grid__item:nth-child(8) { animation-delay: 0.8s; }

@keyframes item-stagger {
  to {
    opacity: 1;
  }
}

/* ----------------------------------------------------------------------------
   20. FOCUS STATES - Accessibility with Style
   ---------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--cc-gold) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cc-gold) !important;
  outline-offset: 2px !important;
}

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

/* ----------------------------------------------------------------------------
   21. TEXT SELECTION - On-brand Selection Colors
   ---------------------------------------------------------------------------- */
::selection {
  background: var(--cc-gold);
  color: var(--cc-black);
}

::-moz-selection {
  background: var(--cc-gold);
  color: var(--cc-black);
}

/* ----------------------------------------------------------------------------
   22. PRODUCT CARD ENHANCEMENTS
   ---------------------------------------------------------------------------- */
.card-wrapper .card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.card-wrapper:hover .card {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(201, 162, 39, 0.1);
}

.card-wrapper .card__heading a {
  transition: color 0.3s ease !important;
}

.card-wrapper:hover .card__heading a {
  color: var(--cc-gold) !important;
}

/* Price styling */
.price-item--regular {
  color: var(--cc-gold) !important;
  font-weight: 600 !important;
}

.price-item--sale {
  color: #EF4444 !important;
  font-weight: 600 !important;
}

.price__regular .price-item--regular {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
}

/* Quick add button */
.quick-add__submit {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease !important;
}

.card-wrapper:hover .quick-add__submit {
  opacity: 1;
  transform: translateY(0);
}

/* Secondary image on hover */
.card__media .media img:nth-child(2) {
  opacity: 0;
  transition: opacity 0.5s ease !important;
}

.card-wrapper:hover .card__media .media img:nth-child(2) {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   23. SMOOTH IMAGE LOADING
   ---------------------------------------------------------------------------- */
img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.loaded,
img[src]:not([src=""]) {
  opacity: 1;
}

/* Placeholder shimmer effect */
.media--loading-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ----------------------------------------------------------------------------
   24. HEADER SCROLL EFFECT
   ---------------------------------------------------------------------------- */
.header-wrapper--scrolled {
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.1) !important;
}

/* ----------------------------------------------------------------------------
   25. FOOTER ENHANCEMENTS
   ---------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid rgba(201, 162, 39, 0.1) !important;
}

.footer__content-top {
  background: linear-gradient(
    180deg,
    rgba(201, 162, 39, 0.03) 0%,
    transparent 100%
  );
}

.footer a {
  transition: color 0.3s ease !important;
}

.footer a:hover {
  color: var(--cc-gold) !important;
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.4);
}

/* Social icons enhancement */
.footer .social-icons a {
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.footer .social-icons a:hover {
  transform: translateY(-3px);
  color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   26. COLLECTION PAGE HEADER
   ---------------------------------------------------------------------------- */
.collection-hero {
  position: relative;
}

.collection-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    to top,
    var(--cc-black),
    transparent
  );
  pointer-events: none;
}

.collection-hero__title {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   SITE-WIDE GOLD HEADINGS - Brand Consistency
   ============================================================================ */

/* ----------------------------------------------------------------------------
   27. COLLECTION PAGE - Gold Title
   ---------------------------------------------------------------------------- */
.collection__title,
.collection-hero__title,
h1.title--primary,
.template-collection h1 {
  color: var(--cc-gold) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 162, 39, 0.15) !important;
}

.collection__description {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ----------------------------------------------------------------------------
   28. PRODUCT PAGE - Gold Title
   ---------------------------------------------------------------------------- */
.product__title,
.product-single__title,
h1.product__title,
.template-product h1 {
  color: var(--cc-gold) !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Product price already gold from earlier - reinforce */
.product__info-wrapper .price-item--regular {
  color: var(--cc-gold) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* Variant labels */
.product-form__label,
.variant-picker__label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

/* ----------------------------------------------------------------------------
   29. CART PAGE - Gold Headings
   ---------------------------------------------------------------------------- */
.cart__empty-text,
.cart-empty h1,
h1:has(+ .cart__buttons),
.template-cart h1 {
  color: var(--cc-gold) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.cart__ctas .button--primary {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
}

/* Cart item titles */
.cart-item__name {
  color: white !important;
  transition: color 0.3s ease !important;
}

.cart-item__name:hover {
  color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   30. 404 & ERROR PAGES - Gold Headings
   ---------------------------------------------------------------------------- */
.template-404 h1,
.shopify-policy__title,
h1.center {
  color: var(--cc-gold) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* "While You're Here" and similar recommendation sections */
.product-recommendations__heading,
.related-products__heading,
h2.section-header__title {
  color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   31. SEARCH PAGE - Gold Accents
   ---------------------------------------------------------------------------- */
.template-search h1,
.search__heading {
  color: var(--cc-gold) !important;
}

.search__input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.search__input:focus {
  border-color: var(--cc-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1) !important;
}

.search__button,
.predictive-search__button {
  background: var(--cc-gold) !important;
  color: var(--cc-black) !important;
}

/* Search results count */
.search__results-count {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ----------------------------------------------------------------------------
   32. FILTER & SORT DROPDOWNS - Gold Accents
   ---------------------------------------------------------------------------- */
.facets__summary,
.facet-filters__summary {
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  transition: all 0.3s ease !important;
}

.facets__summary:hover,
.facet-filters__summary:hover {
  border-color: rgba(201, 162, 39, 0.4) !important;
}

.facets__disclosure[open] .facets__summary,
.facet-filters__summary[aria-expanded="true"] {
  border-color: var(--cc-gold) !important;
}

/* Active filter pills */
.active-facets__button,
.facets__pill {
  background: rgba(201, 162, 39, 0.1) !important;
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
  color: var(--cc-gold) !important;
}

.active-facets__button:hover,
.facets__pill:hover {
  background: rgba(201, 162, 39, 0.2) !important;
}

/* Sort dropdown */
.facet-filters__sort select,
.collection-filters__sort select {
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  background-color: transparent !important;
  color: white !important;
}

.facet-filters__sort select:focus,
.collection-filters__sort select:focus {
  border-color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   33. BREADCRUMBS - Subtle Gold
   ---------------------------------------------------------------------------- */
.breadcrumbs,
nav[aria-label="breadcrumb"] {
  color: rgba(255, 255, 255, 0.5) !important;
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: color 0.3s ease !important;
}

.breadcrumbs a:hover {
  color: var(--cc-gold) !important;
}

.breadcrumbs__separator {
  color: rgba(201, 162, 39, 0.3) !important;
}

/* Current page in breadcrumb */
.breadcrumbs span:last-child,
.breadcrumbs__current {
  color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   34. SECTION HEADINGS - Universal Gold
   ---------------------------------------------------------------------------- */
.section-header__title,
.title--primary,
h2.h1,
.featured-collection__title,
.collection-list__title,
section h2:first-of-type {
  color: var(--cc-gold) !important;
}

/* Subtitles in muted style */
.section-header__subtitle,
.subtitle,
.caption-with-letter-spacing {
  color: rgba(201, 162, 39, 0.7) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------------
   35. ACCOUNT PAGES - Gold Headings
   ---------------------------------------------------------------------------- */
.template-customers-login h1,
.template-customers-register h1,
.template-customers-account h1,
.template-customers-addresses h1,
.template-customers-order h1 {
  color: var(--cc-gold) !important;
}

.customer__title {
  color: var(--cc-gold) !important;
}

/* Form labels */
.customer label,
.form__label {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ----------------------------------------------------------------------------
   36. PAGE TITLES - Universal
   ---------------------------------------------------------------------------- */
.page-title,
.template-page h1,
.rte h1,
article h1 {
  color: var(--cc-gold) !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Blog titles */
.article-card__title,
.blog__title {
  color: white !important;
  transition: color 0.3s ease !important;
}

.article-card:hover .article-card__title,
.blog__title:hover {
  color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------------------
   37. QUANTITY SELECTOR - Premium Styling
   ---------------------------------------------------------------------------- */
.quantity__input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  color: white !important;
}

.quantity__button {
  color: var(--cc-gold) !important;
  transition: all 0.3s ease !important;
}

.quantity__button:hover {
  background: rgba(201, 162, 39, 0.1) !important;
}

/* ----------------------------------------------------------------------------
   38. ANNOUNCEMENT BAR - Premium
   ---------------------------------------------------------------------------- */
.announcement-bar {
  background: var(--cc-gold) !important;
}

.announcement-bar__message {
  color: var(--cc-black) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.announcement-bar a {
  color: var(--cc-black) !important;
  text-decoration: underline !important;
}

/* ============================================================================
   PREMIUM VISUAL POLISH - Breaking the Flatness
   ============================================================================ */

/* ----------------------------------------------------------------------------
   39. BACKGROUND TEXTURE - Subtle noise to break pure black
   ---------------------------------------------------------------------------- */
body {
  background-color: #0A0A0A !important;
  background-image:
    radial-gradient(ellipse at top, rgba(201, 162, 39, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Add subtle noise texture via pseudo-element */
main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.015;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  z-index: -1;
}

/* ----------------------------------------------------------------------------
   40. SECTION DIVIDERS - Gold gradient lines between sections
   ---------------------------------------------------------------------------- */
.shopify-section + .shopify-section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 162, 39, 0.1) 20%,
    rgba(201, 162, 39, 0.3) 50%,
    rgba(201, 162, 39, 0.1) 80%,
    transparent 100%
  );
  margin: 0 auto;
}

/* Decorative section corners */
section[class*="section"]::after {
  content: '';
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 30px;
  height: 30px;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  border-right: 1px solid rgba(201, 162, 39, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

section[class*="section"]:hover::after {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   41. ALTERNATING SECTION BACKGROUNDS - Visual rhythm
   ---------------------------------------------------------------------------- */
.shopify-section:nth-child(even) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.01) 100%
  );
}

.shopify-section:nth-child(odd) {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201, 162, 39, 0.01) 50%,
    transparent 100%
  );
}

/* ----------------------------------------------------------------------------
   42. PRODUCT CARDS - Glassmorphism & Depth
   ---------------------------------------------------------------------------- */
.card-wrapper .card,
.product-card,
.card--standard {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  ) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.card-wrapper .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.card-wrapper:hover .card {
  border-color: rgba(201, 162, 39, 0.2) !important;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(201, 162, 39, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Product image container glow on hover */
.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(201, 162, 39, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.card-wrapper:hover .card__media::after {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   43. TYPOGRAPHY SCALE - Bigger, Bolder
   ---------------------------------------------------------------------------- */
h1, .h1 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

h2, .h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
}

/* Section titles with decorative underline */
.section-header__title::after,
h2.title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--cc-gold), transparent);
  margin-top: 1rem;
}

.section-header--center .section-header__title::after,
.center h2.title::after {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--cc-gold), transparent);
  width: 120px;
}

/* ----------------------------------------------------------------------------
   44. DECORATIVE GOLD ACCENTS
   ---------------------------------------------------------------------------- */
/* Gold corner accents on featured sections */
.featured-collection,
.collection-list,
.image-banner {
  position: relative;
}

.featured-collection::before,
.collection-list::before {
  content: '✦';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cc-gold);
  font-size: 0.75rem;
  opacity: 0.5;
  letter-spacing: 1em;
}

/* Subtle gold glow behind key sections */
.featured-collection,
.testimonials,
.email-signup {
  position: relative;
}

.featured-collection::after,
.testimonials::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 162, 39, 0.03) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* ----------------------------------------------------------------------------
   45. ENHANCED HOVER STATES - More Drama
   ---------------------------------------------------------------------------- */
/* Product card dramatic lift */
.card-wrapper:hover .card {
  transform: translateY(-12px) scale(1.02) !important;
}

/* Button magnetic effect */
.button:hover,
.btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 15px 40px rgba(201, 162, 39, 0.3),
    0 0 0 1px rgba(201, 162, 39, 0.2) !important;
}

/* Link underline animation */
a:not(.button):not(.btn):not(.card):hover {
  text-decoration: none !important;
}

.footer a:hover,
.nav a:hover {
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.5);
}

/* ----------------------------------------------------------------------------
   46. COLLECTION GRID - Better Spacing & Hierarchy
   ---------------------------------------------------------------------------- */
.collection .grid,
.product-grid {
  gap: 2rem !important;
}

@media screen and (min-width: 990px) {
  .collection .grid,
  .product-grid {
    gap: 2.5rem !important;
  }
}

/* First product in grid - Featured treatment */
.collection .grid__item:first-child .card,
.product-grid .grid__item:first-child .card {
  border-color: rgba(201, 162, 39, 0.15) !important;
}

/* Product count badge */
.collection-context__count {
  background: rgba(201, 162, 39, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(201, 162, 39, 0.2);
}

/* ----------------------------------------------------------------------------
   47. HERO SECTION - Cinematic Feel
   ---------------------------------------------------------------------------- */
.banner,
.image-banner {
  position: relative;
}

.banner::after,
.image-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(
    to top,
    var(--cc-black) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.banner__content,
.image-banner .banner__content {
  position: relative;
  z-index: 2;
}

/* Vignette effect */
.banner::before,
.image-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------------------------
   48. PRODUCT PAGE - Gallery Enhancement
   ---------------------------------------------------------------------------- */
.product__media-wrapper {
  position: relative;
}

.product__media-wrapper::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 162, 39, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* Thumbnail strip */
.thumbnail-list {
  gap: 0.75rem !important;
}

.thumbnail {
  border: 2px solid transparent !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.thumbnail:hover,
.thumbnail.is-active {
  border-color: var(--cc-gold) !important;
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.3) !important;
}

/* ----------------------------------------------------------------------------
   49. MICRO-INTERACTIONS - Polish Details
   ---------------------------------------------------------------------------- */
/* Smooth image reveal */
.card__media img,
.product__media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s ease !important;
}

/* Icon hover pulse */
.trust-bar__item svg,
.icon-with-text svg {
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.trust-bar__item:hover svg,
.icon-with-text:hover svg {
  transform: scale(1.2) !important;
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.6)) !important;
}

/* Input focus glow */
input:focus,
textarea:focus,
select:focus {
  box-shadow:
    0 0 0 2px rgba(201, 162, 39, 0.2),
    0 0 20px rgba(201, 162, 39, 0.1) !important;
}

/* ----------------------------------------------------------------------------
   50. SCROLL PROGRESS INDICATOR
   ---------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--cc-gold), rgba(201, 162, 39, 0.5));
  z-index: 9999;
  transition: width 0.1s ease-out;
}

/* ----------------------------------------------------------------------------
   51. CURSOR ENHANCEMENTS (Desktop)
   ---------------------------------------------------------------------------- */
@media (hover: hover) {
  a, button, .card-wrapper {
    cursor: pointer;
  }

  .card-wrapper:hover {
    cursor: pointer;
  }
}

/* ----------------------------------------------------------------------------
   52. RESPECT USER PREFERENCES
   ---------------------------------------------------------------------------- */
/* ============================================================================
   MOBILE NAVIGATION FIX
   ============================================================================ */

@media screen and (max-width: 749px) {
  /* Menu drawer container */
  .menu-drawer {
    background: var(--cc-black, #0A0A0A) !important;
    border: none !important;
  }

  /* Hide any weird placeholder boxes */
  .menu-drawer .placeholder,
  .menu-drawer [class*="placeholder"],
  .header__icon--menu + div:empty,
  .menu-drawer__inner-container > div:first-child:empty {
    display: none !important;
  }

  /* Menu drawer inner */
  .menu-drawer__inner-container {
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Main navigation container */
  .menu-drawer__navigation-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Menu items - centered and styled */
  .menu-drawer__menu {
    text-align: center !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .menu-drawer__menu-item {
    text-align: center !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.1) !important;
  }

  .menu-drawer__menu-item:last-child {
    border-bottom: none !important;
  }

  /* Menu links */
  .menu-drawer__menu-item > a,
  .menu-drawer__menu-item > button,
  .menu-drawer__menu-item summary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1.25rem 1rem !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: white !important;
    text-decoration: none !important;
    transition: color 0.3s ease, background 0.3s ease !important;
  }

  .menu-drawer__menu-item > a:hover,
  .menu-drawer__menu-item > button:hover,
  .menu-drawer__menu-item summary:hover {
    color: var(--cc-gold, #C9A227) !important;
    background: rgba(201, 162, 39, 0.05) !important;
  }

  /* Arrow icons */
  .menu-drawer__menu-item svg,
  .menu-drawer__menu-item .icon-arrow {
    color: var(--cc-gold, #C9A227) !important;
    margin-left: 0.5rem !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Submenu styling */
  .menu-drawer__submenu {
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 0.5rem 0 !important;
  }

  .menu-drawer__submenu-item {
    text-align: center !important;
  }

  .menu-drawer__submenu-item a {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: block !important;
  }

  .menu-drawer__submenu-item a:hover {
    color: var(--cc-gold, #C9A227) !important;
  }

  /* Close button */
  .menu-drawer__close-button,
  .drawer__close {
    color: var(--cc-gold, #C9A227) !important;
    background: transparent !important;
    border: 1px solid rgba(201, 162, 39, 0.3) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
  }

  .menu-drawer__close-button:hover,
  .drawer__close:hover {
    background: rgba(201, 162, 39, 0.1) !important;
    border-color: var(--cc-gold, #C9A227) !important;
  }

  /* Utility links at bottom (Login, etc) */
  .menu-drawer__utility-links {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(201, 162, 39, 0.1) !important;
    text-align: center !important;
  }

  .menu-drawer__utility-links a,
  .menu-drawer__utility-links button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
  }

  .menu-drawer__utility-links a:hover,
  .menu-drawer__utility-links button:hover {
    color: var(--cc-gold, #C9A227) !important;
  }

  /* Social icons */
  .menu-drawer .social-icons,
  .menu-drawer__utility-links .list-social {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin-top: 1rem !important;
    padding: 1rem 0 !important;
  }

  .menu-drawer .social-icons a,
  .menu-drawer__utility-links .list-social a {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
  }

  .menu-drawer .social-icons a:hover,
  .menu-drawer__utility-links .list-social a:hover {
    color: var(--cc-gold, #C9A227) !important;
    transform: scale(1.1) !important;
  }

  /* Header alignment fix */
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header__icons {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }

  /* Logo centering */
  .header__heading {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .header__heading-logo-wrapper img,
  .header__heading-logo {
    max-height: 50px !important;
    width: auto !important;
  }

  /* Hamburger menu button */
  .header__icon--menu {
    color: white !important;
    padding: 0.5rem !important;
  }

  .header__icon--menu:hover {
    color: var(--cc-gold, #C9A227) !important;
  }

  /* Remove any leftover placeholders or empty divs */
  .menu-drawer > div:empty,
  .menu-drawer__inner-container > div:empty,
  .header details > div:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* ----------------------------------------------------------------------------
   53. 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;
  }

  html {
    scroll-behavior: auto;
  }

  .ritual-card::after,
  .email-signup::before,
  .newsletter::before,
  .banner__buttons .button::before {
    display: none;
  }
}

/* ============================================================================
   54. BLOG STYLING - CLOUD CULTURE AESTHETIC
   ============================================================================ */

/* Blog Page Layout */
.main-blog {
  background-color: var(--cc-black, #0A0A0A);
}

.main-blog .title--primary {
  color: var(--cc-gold, #C9A227) !important;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-blog .title--primary {
    font-size: 3rem;
  }
}

/* Blog Article Cards */
.blog-articles {
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media screen and (min-width: 990px) {
  .blog-articles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-articles__article {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

.blog-articles__article:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(201, 162, 39, 0.1);
}

/* Article Card Image */
.article-card__image-wrapper {
  position: relative;
  overflow: hidden;
}

.article-card__image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);
  pointer-events: none;
}

.article-card__image-wrapper img {
  transition: transform 0.6s ease;
}

.blog-articles__article:hover .article-card__image-wrapper img {
  transform: scale(1.05);
}

/* Article Card Content */
.article-card__info {
  padding: 1.5rem;
}

.article-card__title {
  color: #ffffff !important;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.article-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-card__title a:hover {
  color: var(--cc-gold, #C9A227);
}

/* Article Meta (Date, Author) */
.article-card__info .caption-with-letter-spacing,
.article-card__info time {
  color: var(--cc-gold, #C9A227) !important;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Article Excerpt */
.article-card__excerpt {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}

/* Read More Link */
.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cc-gold, #C9A227);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 1rem;
  transition: gap 0.3s ease;
}

.article-card__link:hover {
  gap: 0.75rem;
}

.article-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.article-card__link:hover svg {
  transform: translateX(4px);
}

/* ============================================================================
   55. ARTICLE PAGE STYLING
   ============================================================================ */

.article-template {
  background-color: var(--cc-black, #0A0A0A);
}

/* Article Hero Image */
.article-template__hero-container {
  position: relative;
  margin-bottom: 3rem;
}

.article-template__hero-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, var(--cc-black, #0A0A0A), transparent);
  pointer-events: none;
}

/* Article Title */
.article-template__title {
  color: var(--cc-gold, #C9A227) !important;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: 1rem;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .article-template__title {
    font-size: 2.75rem;
  }
}

/* Article Meta */
.article-template header .caption-with-letter-spacing {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 0.5rem;
}

.article-template header .circle-divider::before {
  background-color: var(--cc-gold, #C9A227);
}

/* Article Content */
.article-template__content {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.article-template__content h2,
.article-template__content h3,
.article-template__content h4 {
  color: var(--cc-gold, #C9A227);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-template__content h2 {
  font-size: 1.75rem;
}

.article-template__content h3 {
  font-size: 1.4rem;
}

.article-template__content p {
  margin-bottom: 1.5rem;
}

.article-template__content a {
  color: var(--cc-gold, #C9A227);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.article-template__content a:hover {
  opacity: 0.8;
}

.article-template__content ul,
.article-template__content ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.article-template__content li {
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.article-template__content li::marker {
  color: var(--cc-gold, #C9A227);
}

.article-template__content blockquote {
  border-left: 2px solid var(--cc-gold, #C9A227);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.article-template__content img {
  border-radius: 4px;
  margin: 2rem 0;
}

/* Back to Blog Link */
.article-template__back {
  padding: 3rem 0;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  margin-top: 3rem;
}

.article-template__link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-template__link:hover {
  color: var(--cc-gold, #C9A227) !important;
}

.article-template__link .icon-wrap {
  display: inline-flex;
  margin-right: 0.5rem;
}

.article-template__link svg {
  color: var(--cc-gold, #C9A227);
  transform: rotate(180deg);
}

/* Comments Section */
.article-template__comment-wrapper {
  background: rgba(20, 20, 20, 0.5) !important;
  border-top: 1px solid rgba(201, 162, 39, 0.1);
  padding: 3rem 0;
}

.article-template__comment-wrapper h2 {
  color: var(--cc-gold, #C9A227) !important;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

.article-template__comments-comment {
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(201, 162, 39, 0.1);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.article-template__comments-comment footer {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* Comment Form */
.article-template__comment-wrapper .field__input {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  color: white !important;
  border-radius: 4px;
}

.article-template__comment-wrapper .field__input:focus {
  border-color: var(--cc-gold, #C9A227) !important;
  box-shadow: 0 0 0 1px var(--cc-gold, #C9A227) !important;
}

.article-template__comment-wrapper .field__label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.article-template__comment-wrapper .button {
  background: var(--cc-gold, #C9A227) !important;
  color: #000000 !important;
  border: none;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  margin-top: 1rem;
}

.article-template__comment-wrapper .button:hover {
  background: #d4af37 !important;
}

/* Share Buttons */
.article-template__social-sharing {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
}

.share-button {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.share-button:hover {
  color: var(--cc-gold, #C9A227);
}

/* Blog Pagination */
.main-blog .pagination {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

.main-blog .pagination__item {
  color: rgba(255, 255, 255, 0.7);
}

.main-blog .pagination__item:hover {
  color: var(--cc-gold, #C9A227);
}

.main-blog .pagination__item--current {
  color: var(--cc-gold, #C9A227) !important;
  border-color: var(--cc-gold, #C9A227) !important;
}

/* ----------------------------------------------------------------------------
   SOCIAL PROOF & TRUST ENHANCEMENTS
   ---------------------------------------------------------------------------- */

/* Curated Rating on Product Cards */
.cc-curated-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.cc-curated-stars {
  color: var(--cc-gold, #C9A227);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.cc-curated-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Product Page Activity Indicator */
.cc-activity-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.12);
  border-radius: 4px;
  margin: 0.75rem 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.cc-activity-indicator__dot {
  width: 6px;
  height: 6px;
  background: var(--cc-gold, #C9A227);
  border-radius: 50%;
  animation: cc-pulse-soft 2s ease-in-out infinite;
}

@keyframes cc-pulse-soft {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.cc-activity-indicator__text {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

/* Staff Pick Badge */
.cc-staff-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.08));
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: 3px;
  font-size: 0.65rem;
  color: var(--cc-gold, #C9A227);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.cc-staff-pick svg {
  width: 10px;
  height: 10px;
}

/* Trust Badges Enhancement */
.cc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 162, 39, 0.1);
  border-radius: 3px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

.cc-trust-badge svg {
  width: 14px;
  height: 14px;
  color: var(--cc-gold, #C9A227);
}

/* Google Reviews Link Style */
.cc-google-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.cc-google-reviews:hover {
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.25);
  color: var(--cc-gold, #C9A227);
}

.cc-google-reviews__stars {
  color: var(--cc-gold, #C9A227);
  font-size: 0.9rem;
}

.cc-google-reviews__arrow {
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.cc-google-reviews:hover .cc-google-reviews__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* Popular/Trending Indicator */
.cc-trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));
  border-radius: 3px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.cc-trending-badge::before {
  content: '🔥';
  font-size: 0.65rem;
}

/* Reddit Community Reviews */
.cc-reddit-reviews {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 162, 39, 0.1);
  border-radius: 6px;
}

.cc-reddit-review {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--cc-gold, #C9A227);
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

.cc-reddit-review p {
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

.cc-reddit-review cite {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

.cc-reddit-review cite::before {
  content: '';
}

/* Reddit icon styling if needed */
.cc-reddit-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.1);
}

.cc-reddit-header svg {
  width: 20px;
  height: 20px;
  color: #FF4500;
}

.cc-reddit-header span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================================
   MOBILE ALIGNMENT FIXES - Dec 21, 2025
   Targeted fixes for mobile visual alignment issues
   ============================================================================ */

@media screen and (max-width: 749px) {
  /* Product card badges - override 44px min-height for non-interactive badges */
  .card__badge .badge,
  .card__badge .badge--limited,
  .card__badge .badge--staff-pick,
  .card__badge .badge--new,
  .card__badge .badge--sale {
    min-height: auto !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.65rem !important;
  }

  /* Fix badge container positioning */
  .card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 60%;
    z-index: 2;
  }

  /* Ensure multiple badges stack properly */
  .card__badge .badge + .badge {
    margin-top: 0.25rem;
  }

  /* Collection page header badges - horizontal alignment */
  .collection-context__stats,
  .collection-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
  }

  /* Collection stats badges consistency */
  .collection-context__stats .badge,
  .collection-stats .badge,
  .cc-collection-badge {
    min-height: auto;
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* Product card content alignment */
  .card__content {
    padding: 0.75rem !important;
    text-align: left;
  }

  .card__information {
    padding: 0 !important;
    text-align: left;
  }

  /* Product title alignment */
  .card__heading {
    text-align: left !important;
    margin-bottom: 0.25rem;
  }

  /* Price alignment */
  .price,
  .price-item {
    text-align: left !important;
  }

  /* Rating/curated label alignment */
  .cc-curated-rating,
  .card-rating {
    justify-content: flex-start;
  }

  /* Fix product grid item spacing consistency */
  .product-grid .grid__item,
  .collection .grid__item {
    display: flex;
    flex-direction: column;
  }

  .product-grid .card-wrapper,
  .collection .card-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .product-grid .card,
  .collection .card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .product-grid .card__content,
  .collection .card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Quick add button alignment */
  .quick-add {
    margin-top: auto;
    padding-top: 0.5rem;
  }

  /* Filter bar alignment */
  .facets-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .facets__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Product count alignment */
  .product-count,
  .products-count {
    text-align: right;
    font-size: 0.85rem;
  }
}

/* Extra small screens - tighter alignment */
@media screen and (max-width: 374px) {
  .card__content {
    padding: 0.5rem !important;
  }

  .card__heading {
    font-size: 0.75rem !important;
  }

  .price {
    font-size: 0.8rem !important;
  }

  .card__badge .badge {
    font-size: 0.55rem !important;
    padding: 0.2rem 0.4rem !important;
  }
}

/* ============================================================================
   MOBILE AUDIT FIXES - December 25, 2024
   Critical fixes for mobile UX issues identified in comprehensive audit
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CRITICAL: Product Page Gap Fix
   Problem: ~500px black void between product image and buy button on mobile
   Root cause: Viewport-based height constraints creating excessive media height
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Override constrained height calculations for mobile */
  .product-media-container.constrain-height {
    --viewport-offset: 50px !important;
    --constrained-min-height: 200px !important;
    max-height: 55vh !important;
  }

  /* Limit media wrapper height */
  .product__media-wrapper {
    max-height: 55vh !important;
    margin-bottom: 0.5rem !important;
  }

  /* Limit media list height */
  .product__media-list {
    max-height: 55vh !important;
  }

  /* Remove top padding from product info to bring it closer to image */
  .product__info-wrapper {
    padding-top: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Remove any min-height that creates gaps */
  .product__media-item,
  .product__media-item--single {
    min-height: auto !important;
    max-height: 55vh !important;
  }

  /* Ensure slider doesn't create extra height */
  .product__media-list.slider {
    max-height: 55vh !important;
  }

  /* Product info container - remove excessive spacing */
  .product__info-container > *:first-child {
    margin-top: 0 !important;
  }

  .product__info-container {
    padding-top: 0.5rem !important;
  }

  /* Product title spacing */
  .product__title {
    margin-bottom: 0.75rem !important;
  }
}

/* ----------------------------------------------------------------------------
   2. CRITICAL: Force 2-Column Collection Grid on Mobile
   Problem: Products showing as single column despite settings
   Root cause: Grid CSS variable calculation issues
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Force flex display for product grids */
  .collection .product-grid,
  #product-grid,
  .grid--2-col-tablet-down {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    row-gap: 1rem !important;
  }

  /* Force 2-column layout for grid items */
  .collection .product-grid > .grid__item,
  #product-grid > .grid__item,
  .grid--2-col-tablet-down > .grid__item {
    width: calc(50% - 0.375rem) !important;
    flex: 0 0 calc(50% - 0.375rem) !important;
    max-width: calc(50% - 0.375rem) !important;
    min-width: 0 !important;
  }

  /* Ensure cards fill their container */
  .collection .card-wrapper,
  .collection .card {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ----------------------------------------------------------------------------
   3. Homepage Section Spacing Fix
   Problem: Large empty black areas between sections on mobile
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Reduce section padding on mobile */
  .shopify-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* First section (header) no top padding */
  .shopify-section-group-header-group .shopify-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero section adjustments */
  .shopify-section-group-header-group + .shopify-section {
    padding-top: 0 !important;
  }

  /* Section padding classes override */
  [class*="-padding"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Trust bar section - tighter */
  .trust-bar,
  [class*="trust-bar"] {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* ----------------------------------------------------------------------------
   4. Product Card Title & Content Fix
   Problem: Titles truncating oddly, inconsistent card heights
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Product card title - 2 line clamp */
  .card__heading {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
    margin-bottom: 0.25rem !important;
  }

  /* Card content padding */
  .card__content {
    padding: 0.6rem 0.5rem !important;
  }

  /* Price styling */
  .card .price {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
  }

  /* Badge sizing */
  .card__badge {
    top: 0.4rem !important;
    left: 0.4rem !important;
  }

  .card__badge .badge {
    font-size: 0.5rem !important;
    padding: 0.2rem 0.35rem !important;
  }
}

/* ----------------------------------------------------------------------------
   5. Announcement Bar Touch Targets
   Problem: Navigation arrows too small on mobile
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .announcement-bar .slider-button,
  .announcement-bar__link {
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .announcement-bar__message {
    font-size: 0.75rem !important;
    padding: 0.25rem 0 !important;
  }
}

/* ----------------------------------------------------------------------------
   6. Quick Add Button Mobile Enhancement
   Problem: Quick add buttons may be hard to tap on small cards
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .quick-add__submit {
    min-height: 36px !important;
    font-size: 0.65rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Show quick add on mobile (touch devices can't hover) */
  .card__quick-add {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ----------------------------------------------------------------------------
   7. Collection Page Header Spacing
   Problem: Too much space before products appear
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Collection banner/hero - minimal */
  .collection-hero {
    padding: 0.5rem 0 !important;
  }

  .collection-hero__title {
    font-size: 1.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .collection-hero__description {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
  }

  /* Facets container - sticky and compact */
  .facets-container {
    padding: 0.5rem 1rem !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 5 !important;
    background: var(--cc-black) !important;
  }

  /* Collection context and value bar - minimal */
  .collection-context,
  .collection-value-bar {
    padding: 0.375rem 1rem !important;
  }
}

/* ----------------------------------------------------------------------------
   8. Cart Drawer Mobile Optimization
   Problem: Ensure cart drawer is usable on mobile
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .cart-drawer {
    width: 100vw !important;
    max-width: 100% !important;
  }

  .cart-drawer__footer {
    padding: 1rem !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--cc-black) !important;
  }

  .cart-drawer__footer .button {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ----------------------------------------------------------------------------
   9. Menu Drawer Mobile Enhancement
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .menu-drawer {
    width: 100vw !important;
    max-width: 100% !important;
  }

  .menu-drawer__menu-item {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .menu-drawer__close-button {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* ----------------------------------------------------------------------------
   10. Footer Mobile Optimization
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .footer {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }

  .footer__content-top {
    gap: 1.5rem !important;
  }

  .footer-block {
    padding: 0.5rem 0 !important;
  }
}

/* ----------------------------------------------------------------------------
   11. ADDITIONAL PDP GAP FIX - Aggressive Layout Repair
   Problem: Gap still exists between product image and info on mobile
   Root cause: Grid layout, margins, and padding creating cumulative space
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Force product grid to have minimal gap */
  .product.grid {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Remove all margins from media wrapper */
  .product__media-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Product info wrapper - start immediately after media */
  .product__info-wrapper {
    margin: 0 !important;
    padding: 0 1rem !important;
    padding-top: 0.5rem !important;
  }

  /* Product info container - tighten spacing */
  .product__info-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  .product__info-container > * {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .product__info-container > *:first-child {
    margin-top: 0 !important;
  }

  /* Media gallery - constrain height aggressively */
  media-gallery,
  .product__media-gallery {
    max-height: 50vh !important;
    overflow: hidden !important;
  }

  /* Slider container - limit height */
  .product__media-list.slider {
    max-height: 50vh !important;
  }

  /* Individual media items */
  .product__media-item {
    max-height: 50vh !important;
  }

  /* The actual image container */
  .product-media-container {
    max-height: 50vh !important;
  }

  /* Product section padding override */
  .section-main-product,
  [class*="section-"][class*="-padding"] {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
  }

  /* Product title - reduce margin */
  .product__title {
    margin-bottom: 0.5rem !important;
  }

  .product__title h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Price - tighten */
  .product__info-wrapper .price {
    margin-bottom: 0.5rem !important;
  }

  /* Product form - reduce spacing */
  .product-form {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Variant picker spacing */
  .product-form__input {
    margin-bottom: 0.75rem !important;
  }

  /* Buy buttons container */
  .product-form__buttons {
    margin-top: 0.75rem !important;
  }

  /* Main product grid - ensure stacking works */
  .product.grid.grid--1-col {
    display: flex !important;
    flex-direction: column !important;
  }

  .product.grid .grid__item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ----------------------------------------------------------------------------
   12. Product Image Aspect Ratio Fix
   Ensure images don't create excessive height
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .product__media-item .media {
    max-height: 50vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product__media-item .media img {
    max-height: 50vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* Remove any padding-bottom percentage hacks that create height */
  .product__media-item .media::before {
    display: none !important;
  }

  .product-media-container::before {
    display: none !important;
  }
}

/* ============================================================
   13. LAST UPDATED - Freshness Signal Component
   ============================================================ */

.last-updated {
  font-size: 0.75rem;
  color: rgba(var(--color-foreground), 0.6);
  font-style: italic;
}

.article-last-updated {
  display: block;
  margin-top: 0.5rem;
}

.article-last-updated .last-updated {
  color: rgba(var(--color-foreground), 0.5);
}