/** Shopify CDN: Minification failed

Line 21:13 Expected identifier but found whitespace
Line 21:15 Unexpected "{"
Line 21:25 Expected ":"
Line 22:18 Expected identifier but found whitespace
Line 22:20 Unexpected "{"
Line 22:30 Expected ":"
Line 24:18 Expected identifier but found whitespace
Line 24:20 Unexpected "{"
Line 24:30 Expected ":"
Line 26:17 Expected identifier but found whitespace
... and 5 more hidden warnings

**/
/* ==========================================================================
   Virelle Cosmetics — Theme Stylesheet
   ========================================================================== */

:root {
  --color-bg: {{ settings.color_background | default: '#FAF7F2' }};
  --color-surface: {{ settings.color_surface | default: '#F0EAE0' }};
  --color-surface-2: #EAE2D4;
  --color-primary: {{ settings.color_primary | default: '#8A9A7B' }};
  --color-primary-dark: #5C6B52;
  --color-accent: {{ settings.color_accent | default: '#C4856A' }};
  --color-accent-dark: #A56A50;
  --color-text: {{ settings.color_text | default: '#2E2820' }};
  --color-text-muted: #6B6258;
  --color-border: #E5DDD0;
  --color-white: #FFFFFF;
  --color-black: #1A1612;
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem;
  --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;
  --container-max: 1280px; --container-narrow: 920px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 24px; --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-med: 400ms var(--ease-out);
  --transition-slow: 700ms var(--ease-out);
  --shadow-sm: 0 2px 8px rgba(46, 40, 32, 0.04);
  --shadow-md: 0 8px 24px rgba(46, 40, 32, 0.08);
  --shadow-lg: 0 24px 48px rgba(46, 40, 32, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; margin: 0 0 var(--space-md); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); } h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); } h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } h5 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-sm); }
.eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary-dark); display: inline-block; margin-bottom: var(--space-sm); }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--space-3xl) 0; position: relative; }
.section--sm { padding: var(--space-2xl) 0; }
@media (max-width: 768px) { .section { padding: var(--space-2xl) 0; } .section--sm { padding: var(--space-xl) 0; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 2rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); transition: all var(--transition-med); position: relative; overflow: hidden; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--color-accent); color: var(--color-white); }
.btn--accent:hover { background: var(--color-accent-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md), 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent); }
.btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: var(--color-bg); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--color-text); padding: 0.5rem 0; border-radius: 0; }
.btn--ghost::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--transition-med); }
.btn--ghost:hover::after { transform-origin: left; transform: scaleX(0.5); }
.btn--block { width: 100%; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 242, 0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--transition-med), background var(--transition-med); }
.site-header.is-scrolled { border-bottom-color: var(--color-border); }
.announcement-bar { background: var(--color-primary-dark); color: var(--color-bg); text-align: center; padding: 0.6rem var(--space-md); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--space-md) 0; gap: var(--space-md); }
.header__logo { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text); justify-self: center; }
.header__logo a { display: inline-block; transition: transform var(--transition-med); }
.header__logo a:hover { transform: scale(1.03); color: var(--color-text); }
.header__nav { display: flex; gap: var(--space-lg); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; align-items: center; }
.header__nav > a { position: relative; padding: 0.25rem 0; }
.header__nav > a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--color-text); transform: scaleX(0); transform-origin: right; transition: transform var(--transition-med); }
.header__nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__actions { display: flex; gap: var(--space-md); justify-self: end; align-items: center; }
.header__action-btn { position: relative; padding: 0.5rem; color: var(--color-text); transition: transform var(--transition-fast), color var(--transition-fast); }
.header__action-btn:hover { transform: translateY(-2px); color: var(--color-accent); }
.header__action-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: -2px; right: -2px; background: var(--color-accent); color: var(--color-white); font-size: 0.7rem; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 600; letter-spacing: 0; }
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__nav { position: fixed; top: 70px; left: 0; width: 100%; background: var(--color-bg); flex-direction: column; padding: var(--space-xl) var(--space-md); gap: var(--space-md); transform: translateX(-100%); transition: transform var(--transition-med); height: calc(100vh - 70px); border-top: 1px solid var(--color-border); align-items: flex-start; }
  .header__nav.is-open { transform: translateX(0); }
  .header__nav > a { font-size: 1.5rem; font-family: var(--font-heading); letter-spacing: 0.02em; text-transform: none; }
  .header__logo { justify-self: center; font-size: 1.4rem; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--color-text); }
  .menu-toggle svg { width: 22px; height: 22px; }
}

/* ---------- Nav Dropdown (Luxury) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  font-family: inherit;
  position: relative;
}
.nav-dropdown__trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: calc(100% - 18px);
  height: 1px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-med);
}
.nav-dropdown:hover .nav-dropdown__trigger::after,
.nav-dropdown__trigger[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown__trigger svg { transition: transform var(--transition-fast); flex-shrink: 0; color: var(--color-text-muted); }
.nav-dropdown__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(250, 247, 242, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(46,40,32,0.14), 0 4px 16px rgba(46,40,32,0.06);
  min-width: 272px;
  padding: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med), transform var(--transition-med);
  z-index: 95;
  overflow: hidden;
}
.nav-dropdown__menu::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  margin: -0.875rem -0.875rem 0.75rem;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown__menu.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
  color: var(--color-text);
}
.nav-dropdown__item:hover { background: var(--color-surface); color: var(--color-text); transform: translateX(4px); }
.nav-dropdown__item-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: 1.15rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nav-dropdown__item:hover .nav-dropdown__item-icon { background: rgba(196,133,106,0.18); transform: scale(1.1) rotate(-3deg); }
.nav-dropdown__item-content { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nav-dropdown__item-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: var(--color-text); letter-spacing: 0; line-height: 1.2; }
.nav-dropdown__item-desc { font-size: 0.74rem; color: var(--color-text-muted); letter-spacing: 0.03em; line-height: 1.3; }
.nav-dropdown__divider { height: 1px; background: var(--color-border); margin: 0.5rem 0.75rem; }
.nav-dropdown__view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.nav-dropdown__view-all:hover { color: var(--color-accent-dark); padding-left: 1rem; }
@media (max-width: 900px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown__trigger { font-size: 1.5rem; font-family: var(--font-heading); letter-spacing: 0.02em; text-transform: none; width: 100%; justify-content: space-between; }
  .nav-dropdown__trigger::after { display: none; }
  .nav-dropdown__menu { position: static; transform: none; box-shadow: none; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-left: 2px solid var(--color-border); border-radius: 0; margin-left: var(--space-sm); padding: 0.25rem 0 0.25rem var(--space-sm); opacity: 1; pointer-events: auto; display: none; min-width: unset; }
  .nav-dropdown__menu::before { display: none; }
  .nav-dropdown__menu.is-open { display: block; }
  .nav-dropdown__item { font-family: var(--font-heading); padding: 0.5rem 0; gap: 0.6rem; }
  .nav-dropdown__item:hover { transform: none; background: transparent; }
  .nav-dropdown__item-icon { width: 30px; height: 30px; font-size: 0.85rem; }
  .nav-dropdown__item-title { font-size: 1.25rem; }
  .nav-dropdown__item-desc { display: none; }
  .nav-dropdown__divider, .nav-dropdown__view-all { display: none; }
}

.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: var(--color-surface); }
.hero__bg { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__bg img, .hero__bg-img { width: 100%; height: 115%; object-fit: cover; position: absolute; inset: 0; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 40, 32, 0.15) 0%, rgba(46, 40, 32, 0.45) 100%); z-index: 1; }
.hero__content { position: relative; z-index: 2; color: var(--color-white); max-width: 720px; padding: var(--space-2xl) 0; }
.hero__content--light { color: var(--color-text); }
.hero__title { font-size: clamp(3rem, 7.5vw, 6rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.hero__title em { font-style: italic; font-weight: 400; }
.hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; max-width: 540px; margin-bottom: var(--space-lg); opacity: 0.95; }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero__scroll-hint { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); z-index: 2; color: var(--color-white); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.hero__scroll-hint::after { content: ''; width: 1px; height: 40px; background: currentColor; animation: scrollLine 2.4s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 100ms; } .reveal--delay-2 { transition-delay: 200ms; } .reveal--delay-3 { transition-delay: 300ms; } .reveal--delay-4 { transition-delay: 400ms; }
.reveal--scale { opacity: 0; transform: scale(1.04); transition: opacity 1200ms var(--ease-out), transform 1400ms var(--ease-out); }
.reveal--scale.is-visible { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal--scale { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto; } }

.section-heading { text-align: center; margin-bottom: var(--space-xl); }
.section-heading--left { text-align: left; }
.section-heading h2 { margin-bottom: var(--space-sm); }
.section-heading p { color: var(--color-text-muted); max-width: 580px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; }
.section-heading--left p { margin: 0; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg) var(--space-md); }
.product-grid--featured { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl) var(--space-md); }
.product-card { display: block; position: relative; text-align: left; transition: transform var(--transition-med); }
.product-card:hover { color: inherit; }
.product-card:hover .product-card__image { transform: scale(1.05); }
.product-card:hover .product-card__quick-add { opacity: 1; transform: translateY(0); }
.product-card__image-wrap { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); }
.product-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); will-change: transform; }
.product-card__image--placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-family: var(--font-heading); font-size: 1.5rem; background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)); }
.product-card__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); background: var(--color-accent); color: var(--color-white); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); z-index: 2; }
.product-card__quick-add { position: absolute; bottom: var(--space-sm); left: var(--space-sm); right: var(--space-sm); background: var(--color-text); color: var(--color-bg); text-align: center; padding: 0.7rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--radius-pill); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-med), transform var(--transition-med), background var(--transition-fast); border: none; cursor: pointer; font-family: inherit; }
.product-card__quick-add:hover { background: var(--color-accent); color: var(--color-white); }
@media (max-width: 768px) { .product-card__quick-add { opacity: 1; transform: none; } }
.product-card__title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 400; margin: 0 0 var(--space-xs); color: var(--color-text); letter-spacing: 0; }
.product-card__vendor { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.product-card__price { font-size: 0.95rem; color: var(--color-text); font-weight: 500; }
.product-card__price del { color: var(--color-text-muted); font-weight: 400; margin-right: 0.4rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface); }
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.split:hover .split__media img { transform: scale(1.04); }
.split__content { padding: var(--space-md) 0; }
.split__content h2 { margin-bottom: var(--space-md); }
.split__content p { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.85; max-width: 480px; margin-bottom: var(--space-md); }
@media (max-width: 768px) { .split { grid-template-columns: 1fr; gap: var(--space-lg); } .split--reverse > :first-child { order: 0; } }

.ingredients { background: var(--color-surface); position: relative; overflow: hidden; }
.ingredients::before { content: ''; position: absolute; top: -50%; right: -20%; width: 70%; height: 200%; background: radial-gradient(circle, rgba(138, 154, 123, 0.12) 0%, transparent 60%); pointer-events: none; }
.ingredient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); position: relative; }
.ingredient-card { text-align: center; padding: var(--space-md); transition: transform var(--transition-med); }
.ingredient-card:hover { transform: translateY(-4px); }
.ingredient-card__icon { width: 64px; height: 64px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; background: var(--color-bg); border-radius: 999px; color: var(--color-primary-dark); transition: transform var(--transition-med), box-shadow var(--transition-med); }
.ingredient-card:hover .ingredient-card__icon { transform: scale(1.08) rotate(-3deg); box-shadow: var(--shadow-md); }
.ingredient-card__icon svg { width: 32px; height: 32px; }
.ingredient-card h4 { margin-bottom: var(--space-xs); font-size: 1.35rem; }
.ingredient-card p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.7; margin: 0; }

.testimonials { background: var(--color-text); color: var(--color-bg); position: relative; overflow: hidden; }
.testimonials .eyebrow { color: var(--color-accent); }
.testimonials h2 { color: var(--color-bg); }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.testimonial { padding: var(--space-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); transition: transform var(--transition-med), background var(--transition-med); }
.testimonial:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.07); }
.testimonial__stars { color: var(--color-accent); font-size: 1rem; letter-spacing: 0.2em; margin-bottom: var(--space-sm); }
.testimonial__quote { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.5; margin-bottom: var(--space-md); font-style: italic; }
.testimonial__author { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250, 247, 242, 0.65); }

.newsletter { background: var(--color-surface); text-align: center; position: relative; overflow: hidden; }
.newsletter__inner { max-width: 580px; margin: 0 auto; position: relative; z-index: 1; }
.newsletter__form { display: flex; gap: var(--space-xs); margin-top: var(--space-md); background: var(--color-bg); padding: 0.4rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.newsletter__input { flex: 1; border: none; background: transparent; padding: 0.85rem 1.25rem; font-family: inherit; font-size: 0.95rem; color: var(--color-text); outline: none; }
.newsletter__input::placeholder { color: var(--color-text-muted); }
.newsletter__form .btn { padding: 0.7rem 1.5rem; }
@media (max-width: 540px) { .newsletter__form { flex-direction: column; padding: 0; background: transparent; box-shadow: none; } .newsletter__input { background: var(--color-bg); border-radius: var(--radius-pill); } }

.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-xl); padding: var(--space-2xl) 0; }
.product__gallery { position: sticky; top: 120px; align-self: start; }
.product__main-image { width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); aspect-ratio: 4 / 5; }
.product__main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.product__thumbs { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); flex-wrap: wrap; }
.product__thumb { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-fast), transform var(--transition-fast); padding: 0; }
.product__thumb:hover { transform: scale(1.04); }
.product__thumb.is-active { border-color: var(--color-primary); }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__info { padding-top: var(--space-md); }
.product__vendor { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: var(--space-sm); }
.product__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-sm); }
.product__price { font-size: 1.5rem; margin-bottom: var(--space-md); display: flex; align-items: baseline; gap: var(--space-sm); }
.product__price del { color: var(--color-text-muted); font-weight: 400; font-size: 1.15rem; }
.product__price-badge { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--color-accent); color: var(--color-white); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); }
.product__description { color: var(--color-text-muted); line-height: 1.8; margin: var(--space-md) 0 var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.product__variants { margin-bottom: var(--space-md); }
.product__variant-label { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-xs); color: var(--color-text-muted); }
.product__variant-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.product__variant-option { padding: 0.7rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: transparent; font-size: 0.9rem; color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); font-family: inherit; }
.product__variant-option:hover { border-color: var(--color-text); }
.product__variant-option.is-active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.product__variant-option:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.product__quantity { display: flex; align-items: center; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); width: fit-content; margin-bottom: var(--space-md); overflow: hidden; }
.product__quantity button { width: 44px; height: 44px; font-size: 1.1rem; color: var(--color-text); transition: background var(--transition-fast); }
.product__quantity button:hover { background: var(--color-surface); }
.product__quantity input { width: 50px; text-align: center; border: none; background: transparent; font-family: inherit; font-size: 0.95rem; color: var(--color-text); }
.product__quantity input:focus { outline: none; }
.product__add-to-cart { width: 100%; }
.product__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.product__feature { text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
.product__feature svg { width: 28px; height: 28px; margin: 0 auto var(--space-xs); color: var(--color-primary-dark); }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-xl) 0; } .product__gallery { position: static; } }

/* ---------- Product Accordion ---------- */
.product-accordion { margin: var(--space-lg) 0; border-top: 1px solid var(--color-border); }
.product-accordion__item { border-bottom: 1px solid var(--color-border); }
.product-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-sm);
  transition: color var(--transition-fast);
}
.product-accordion__trigger:hover { color: var(--color-accent); }
.product-accordion__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: transform var(--transition-med), background var(--transition-fast), border-color var(--transition-fast);
  font-size: 0.75rem;
  font-style: normal;
}
.product-accordion__item.is-open .product-accordion__icon { transform: rotate(45deg); background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.product-accordion__body { max-height: 0; overflow: hidden; transition: max-height 500ms var(--ease-out); }
.product-accordion__body-inner { padding: 0 0 var(--space-md); color: var(--color-text-muted); line-height: 1.8; font-size: 0.95rem; }
.product-accordion__body-inner p { margin-bottom: var(--space-xs); }
.product-accordion__body-inner ol, .product-accordion__body-inner ul { padding-left: 1.25rem; margin: 0; }
.product-accordion__body-inner li { margin-bottom: 0.4rem; }

.page-hero { text-align: center; padding: var(--space-2xl) 0 var(--space-xl); background: var(--color-surface); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -30%; left: -10%; width: 50%; height: 160%; background: radial-gradient(circle, rgba(196, 133, 106, 0.12) 0%, transparent 60%); pointer-events: none; }
.page-hero h1 { margin-bottom: var(--space-sm); }
.page-hero p { color: var(--color-text-muted); max-width: 580px; margin: 0 auto; font-size: 1.05rem; }

.collection-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); font-size: 0.85rem; color: var(--color-text-muted); }

.about-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-surface); padding: var(--space-2xl) var(--space-md); position: relative; overflow: hidden; }
.about-hero__title { font-size: clamp(2.5rem, 6vw, 5rem); max-width: 900px; font-weight: 300; line-height: 1.1; }
.about-hero__title em { font-style: italic; color: var(--color-primary-dark); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.value-card { padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.value-card__number { font-family: var(--font-heading); font-size: 2rem; color: var(--color-accent); font-style: italic; margin-bottom: var(--space-sm); display: block; }
.value-card h4 { margin-bottom: var(--space-sm); }
.value-card p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; line-height: 1.7; }

.site-footer { background: var(--color-text); color: var(--color-bg); padding: var(--space-2xl) 0 var(--space-md); margin-top: var(--space-2xl); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.footer__brand h3 { font-size: 1.75rem; margin-bottom: var(--space-sm); color: var(--color-bg); }
.footer__brand p { color: rgba(250, 247, 242, 0.65); max-width: 320px; font-size: 0.95rem; line-height: 1.7; }
.footer__col h5 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-md); color: var(--color-bg); font-weight: 500; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 0.7rem; }
.footer__col a { color: rgba(250, 247, 242, 0.65); font-size: 0.95rem; transition: color var(--transition-fast), padding-left var(--transition-fast); }
.footer__col a:hover { color: var(--color-bg); padding-left: 4px; }
.footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.footer__social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(250, 247, 242, 0.08); color: var(--color-bg); transition: all var(--transition-med); }
.footer__social a:hover { background: var(--color-accent); transform: translateY(-3px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom { padding-top: var(--space-md); border-top: 1px solid rgba(250, 247, 242, 0.1); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(250, 247, 242, 0.5); flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.cart-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: 440px; height: 100vh; background: var(--color-bg); z-index: 200; transform: translateX(100%); transition: transform var(--transition-med); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-overlay { position: fixed; inset: 0; background: rgba(46, 40, 32, 0.35); z-index: 150; opacity: 0; pointer-events: none; transition: opacity var(--transition-med); backdrop-filter: blur(4px); }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer__header { padding: var(--space-md); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.cart-drawer__header h3 { margin: 0; font-size: 1.5rem; }
.cart-drawer__close { padding: 0.5rem; color: var(--color-text); }
.cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--space-md); }
.cart-drawer__footer { padding: var(--space-md); border-top: 1px solid var(--color-border); }
.cart-drawer__subtotal { display: flex; justify-content: space-between; margin-bottom: var(--space-md); font-size: 1.1rem; }
.cart-empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--color-text-muted); }
.cart-empty h4 { color: var(--color-text); }

.text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Soothing Ambient Layer
   ========================================================================== */

.grain-overlay { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 9999; mix-blend-mode: overlay; }
@keyframes floatOrb { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-22px) scale(1.06); } 66% { transform: translate(-18px,16px) scale(0.94); } }
@keyframes floatOrb2 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-26px,20px) scale(1.08); } 66% { transform: translate(22px,-16px) scale(0.93); } }
@keyframes floatOrb3 { 0%, 100% { transform: translate(0,0) scale(1); opacity:0.7; } 50% { transform: translate(12px,-26px) scale(1.1); opacity:1; } }
.hero::before { content:''; position:absolute; top:8%; right:8%; width:480px; height:480px; background:radial-gradient(circle,rgba(196,133,106,0.18) 0%,transparent 70%); border-radius:50%; filter:blur(70px); pointer-events:none; z-index:1; animation:floatOrb 20s ease-in-out infinite; }
.hero::after { content:''; position:absolute; bottom:12%; left:4%; width:340px; height:340px; background:radial-gradient(circle,rgba(138,154,123,0.2) 0%,transparent 70%); border-radius:50%; filter:blur(55px); pointer-events:none; z-index:1; animation:floatOrb2 24s ease-in-out infinite; }
.testimonials::before { content:''; position:absolute; top:-10%; left:-5%; width:500px; height:500px; background:radial-gradient(circle,rgba(196,133,106,0.1) 0%,transparent 65%); border-radius:50%; filter:blur(80px); pointer-events:none; animation:floatOrb 22s ease-in-out infinite; }
.testimonials::after { content:''; position:absolute; bottom:-5%; right:-5%; width:400px; height:400px; background:radial-gradient(circle,rgba(138,154,123,0.12) 0%,transparent 65%); border-radius:50%; filter:blur(70px); pointer-events:none; animation:floatOrb2 26s ease-in-out infinite; }
.newsletter::before { content:''; position:absolute; top:-30%; left:-10%; width:420px; height:420px; background:radial-gradient(circle,rgba(138,154,123,0.16) 0%,transparent 65%); border-radius:50%; filter:blur(65px); pointer-events:none; animation:floatOrb3 18s ease-in-out infinite; }
.newsletter::after { content:''; position:absolute; bottom:-20%; right:-5%; width:350px; height:350px; background:radial-gradient(circle,rgba(196,133,106,0.14) 0%,transparent 65%); border-radius:50%; filter:blur(60px); pointer-events:none; animation:floatOrb2 22s ease-in-out infinite; }
.ingredients::after { content:''; position:absolute; bottom:-20%; left:-5%; width:380px; height:380px; background:radial-gradient(circle,rgba(196,133,106,0.1) 0%,transparent 65%); border-radius:50%; filter:blur(70px); pointer-events:none; animation:floatOrb2 26s ease-in-out infinite; }
.btn--primary::before,.btn--accent::before { content:''; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,0.24) 50%,transparent 80%); transition:left 0.55s ease; pointer-events:none; }
.btn--primary:hover::before,.btn--accent:hover::before { left:160%; }
@keyframes pulseSoft { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
.ingredient-card__icon { animation:pulseSoft 4s ease-in-out infinite; }
.ingredient-card:nth-child(2) .ingredient-card__icon { animation-delay:0.8s; } .ingredient-card:nth-child(3) .ingredient-card__icon { animation-delay:1.6s; } .ingredient-card:nth-child(4) .ingredient-card__icon { animation-delay:2.4s; }
@keyframes starShimmer { 0%,100% { opacity:1; letter-spacing:0.2em; } 50% { opacity:0.65; letter-spacing:0.26em; } }
.testimonial__stars { animation:starShimmer 4s ease-in-out infinite; }
.testimonial:nth-child(2) .testimonial__stars { animation-delay:1.2s; } .testimonial:nth-child(3) .testimonial__stars { animation-delay:2.4s; }
.reveal--left { opacity:0; transform:translateX(-36px); transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out); will-change:opacity,transform; }
.reveal--right { opacity:0; transform:translateX(36px); transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out); will-change:opacity,transform; }
.reveal--left.is-visible,.reveal--right.is-visible { opacity:1; transform:translateX(0); }

/* ==========================================================================
   Collection Page
   ========================================================================== */

.collection-hero { position: relative; overflow: hidden; }
.collection-hero__orb { position:absolute; border-radius:50%; filter:blur(65px); pointer-events:none; will-change:transform; }
.collection-hero__orb--1 { width:400px; height:400px; background:radial-gradient(circle,rgba(196,133,106,0.16) 0%,transparent 70%); top:-20%; right:5%; animation:floatOrb 18s ease-in-out infinite; }
.collection-hero__orb--2 { width:300px; height:300px; background:radial-gradient(circle,rgba(138,154,123,0.18) 0%,transparent 70%); bottom:-20%; left:10%; animation:floatOrb2 22s ease-in-out infinite; }
.collection-hero__image-wrap { width:100px; height:100px; margin:0 auto var(--space-md); border-radius:999px; overflow:hidden; border:3px solid rgba(92,107,82,0.25); box-shadow:var(--shadow-md); }
.collection-hero__image-wrap img { width:100%; height:100%; object-fit:cover; }

.collection-filters { background:var(--color-bg); padding:var(--space-sm) 0; border-bottom:1px solid var(--color-border); position:sticky; top:72px; z-index:90; }
.collection-filters__inner { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; }
.filter-chips { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.filter-chip { display:inline-flex; align-items:center; padding:0.45rem 1.1rem; border:1px solid var(--color-border); border-radius:var(--radius-pill); font-size:0.8rem; letter-spacing:0.06em; color:var(--color-text-muted); transition:all var(--transition-fast); white-space:nowrap; }
.filter-chip:hover { border-color:var(--color-text); color:var(--color-text); }
.filter-chip--active { background:var(--color-text); border-color:var(--color-text); color:var(--color-bg); }
.filter-chip--active:hover { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-white); }

.category-select-wrap { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.category-select-label { font-size:0.75rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-muted); white-space:nowrap; }
.category-select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 2.2rem 0.45rem 1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6258' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.category-select:hover { border-color: var(--color-text-muted); }
.category-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(138,154,123,0.15); }

.pagination { display:flex; justify-content:center; align-items:center; gap:var(--space-md); margin-top:var(--space-xl); }
.pagination__info { font-size:0.85rem; color:var(--color-text-muted); letter-spacing:0.06em; }
.collection-empty { text-align:center; padding:var(--space-2xl) 0 var(--space-3xl); }
.collection-empty__icon { font-size:3rem; margin-bottom:var(--space-md); opacity:0.4; }
.collection-empty h3 { margin-bottom:var(--space-sm); }
.collection-empty p { color:var(--color-text-muted); margin-bottom:var(--space-lg); }

/* ---------- Sort Dropdown ---------- */
.sort-dropdown { position: relative; flex-shrink: 0; }
.sort-dropdown__trigger { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.5rem 1.1rem; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; }
.sort-dropdown__trigger-prefix { color: var(--color-text-muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sort-dropdown__trigger-value { font-weight: 500; }
.sort-dropdown__trigger svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform var(--transition-fast); color: var(--color-text-muted); }
.sort-dropdown__trigger:hover { border-color: var(--color-text-muted); }
.sort-dropdown__trigger[aria-expanded="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(138,154,123,0.15); }
.sort-dropdown__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.sort-dropdown__menu { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(250,247,242,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(46,40,32,0.12), 0 4px 12px rgba(46,40,32,0.06); min-width: 210px; padding: 0.4rem; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--transition-med), transform var(--transition-med); z-index: 89; }
.sort-dropdown__menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sort-dropdown__item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.875rem; font-size: 0.84rem; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.sort-dropdown__item:hover { background: var(--color-surface); color: var(--color-text); }
.sort-dropdown__item--active { color: var(--color-text); }
.sort-dropdown__item--active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
@media (max-width: 600px) { .sort-dropdown__menu { right: auto; left: 0; } }

@media (prefers-reduced-motion: reduce) {
  .grain-overlay { display: none; }
  .hero::before,.hero::after,.testimonials::before,.testimonials::after,.newsletter::before,.newsletter::after,.ingredients::after { animation: none !important; }
  .collection-hero__orb { animation: none !important; }
  .ingredient-card__icon,.testimonial__stars { animation: none; }
  .btn--primary::before,.btn--accent::before { display: none; }
  .reveal--left,.reveal--right { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sort-dropdown__menu, .nav-dropdown__menu { transition: none; }
  .product__stock-dot { animation: none; }
  .sticky-atc { transition: none; }
}

/* ==========================================================================
   Product Page — High-Converting Layout
   ========================================================================== */

.product__breadcrumb { font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-muted); padding:1.25rem 0 0; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.product__breadcrumb a:hover { color:var(--color-accent); }

.product__gallery-wrap { position:relative; }
.product__badge { position:absolute; top:var(--space-sm); left:var(--space-sm); z-index:3; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; padding:0.35rem 0.75rem; border-radius:var(--radius-pill); font-weight:500; }
.product__badge--sale { background:var(--color-accent); color:var(--color-white); }
.product__badge--new { background:var(--color-primary-dark); color:var(--color-white); }
.product__badge--best { background:var(--color-text); color:var(--color-bg); }

.product__rating { display:flex; align-items:center; gap:0.6rem; margin-bottom:var(--space-md); }
.product__stars { color:var(--color-accent); font-size:1.05rem; letter-spacing:0.1em; line-height:1; }
.product__rating-text { font-size:0.85rem; color:var(--color-text); font-weight:500; }
.product__rating-count { color:var(--color-text-muted); font-weight:400; }

.product__hook { font-size:1.05rem; line-height:1.75; color:var(--color-text-muted); margin-bottom:var(--space-md); padding-bottom:var(--space-md); border-bottom:1px solid var(--color-border); }

.product__stock-urgency, .product__stock-in { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; margin-bottom:var(--space-md); font-weight:500; letter-spacing:0.04em; }
.product__stock-urgency { color:#9B4F3F; }
.product__stock-in { color:var(--color-primary-dark); }
.product__stock-dot { width:7px; height:7px; border-radius:50%; background:var(--color-accent); flex-shrink:0; animation:pulseDot 2s ease-in-out infinite; }
.product__stock-dot--green { background:var(--color-primary-dark); }
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.45; transform:scale(1.5); } }

.product__ctas { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:var(--space-md); }
.product__atc-price { opacity:0.8; }
.product__buy-now { border-color:var(--color-border); color:var(--color-text-muted); }
.product__buy-now:hover { background:var(--color-text); border-color:var(--color-text); color:var(--color-bg); transform:translateY(-2px); }

.product__trust { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; padding:var(--space-md) 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-md); }
.product__trust-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; text-align:center; font-size:0.72rem; color:var(--color-text-muted); letter-spacing:0.06em; text-transform:uppercase; }
.product__trust-item svg { width:20px; height:20px; color:var(--color-primary-dark); }

.product-desc-section { background:var(--color-surface); }
.product-desc-inner { background:var(--color-bg); border-radius:var(--radius-lg); padding:var(--space-2xl) var(--space-3xl); box-shadow:var(--shadow-sm); border:1px solid var(--color-border); max-width:860px; margin:0 auto; }
@media (max-width:768px) { .product-desc-inner { padding:var(--space-lg) var(--space-md); } }

.sticky-atc { position:fixed; bottom:0; left:0; right:0; background:rgba(250,247,242,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--color-border); padding:0.875rem 0; z-index:110; transform:translateY(calc(100% + 1px)); transition:transform var(--transition-med); box-shadow:0 -8px 32px rgba(46,40,32,0.1); }
.sticky-atc.is-visible { transform:translateY(0); }
.sticky-atc__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.sticky-atc__product { display:flex; align-items:center; gap:var(--space-sm); min-width:0; flex:1; }
.sticky-atc__product img { width:52px; height:64px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.sticky-atc__title { display:block; font-family:var(--font-heading); font-size:1.15rem; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.sticky-atc__price { font-size:0.85rem; color:var(--color-text-muted); display:block; margin-top:0.1rem; }
.sticky-atc__price del { margin-right:0.3rem; }
.sticky-atc__btn { padding:0.8rem 2rem; white-space:nowrap; flex-shrink:0; }
@media (max-width:640px) { .sticky-atc__product img { display:none; } .sticky-atc__title { max-width:160px; font-size:1rem; } .sticky-atc__btn { padding:0.75rem 1.25rem; font-size:0.8rem; } }