/* ════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — You Name It
   Overlay layer that elevates the storefront to luxury brand tier.
   Loaded after store.css — overrides with same or higher specificity.
   All values reference tokens from variables.css.
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. HEADER / NAVIGATION
   ──────────────────────────────────────────────────────────────── */

.store-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.store-header.scrolled,
.store-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
}

.store-header__inner {
  max-width: var(--store-max-width);
}

.store-nav > a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
  padding: var(--space-2) var(--space-3);
}

.store-nav > a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.store-nav__trigger {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ────────────────────────────────────────────────────────────────
   2. HERO SECTION — Premium emotional treatment
   ──────────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(2rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.hero__eyebrow {
  background: linear-gradient(135deg, var(--color-primary-bg), var(--color-accent-light));
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-chocolate);
  margin-bottom: var(--space-5);
  max-width: 600px;
}

.hero h1 .accent-text {
  background: linear-gradient(135deg, var(--color-gold), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: var(--space-8);
}

.hero__cta {
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero__cta .btn-store--primary {
  min-width: 180px;
  justify-content: center;
}

.hero__cta .btn-store--ghost {
  min-width: 140px;
  justify-content: center;
}

.hero__frame {
  border-radius: var(--radius-2xl);
  background: linear-gradient(145deg, var(--color-cream), var(--color-cream-dark));
  box-shadow: var(--shadow-2xl),
              0 0 0 1px rgba(139, 105, 20, 0.06);
  position: relative;
  overflow: hidden;
}

.hero__frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  pointer-events: none;
  z-index: 1;
}

.hero__frame:hover {
  box-shadow: var(--shadow-2xl),
              0 0 0 1px rgba(139, 105, 20, 0.12),
              0 0 60px rgba(139, 105, 20, 0.08);
}

.hero__img {
  border-radius: var(--radius-xl);
  transition: transform 0.6s var(--ease-out-expo);
}

.hero__frame:hover .hero__img {
  transform: scale(1.02);
}

/* ────────────────────────────────────────────────────────────────
   3. PRODUCT CARDS — Premium luxury redesign
   ──────────────────────────────────────────────────────────────── */

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              box-shadow var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out);
  position: relative;
}

.product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
  border-color: rgba(139, 105, 20, 0.15);
}

.product-card::after {
  box-shadow: inset 0 0 0 1px rgba(139, 105, 20, 0.1);
}

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

.product-card__media {
  background: var(--color-cream);
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}

.product-card__media img {
  transition: transform 0.5s var(--ease-out-expo);
}

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

.product-card__body {
  padding: var(--space-3-5) var(--space-4) var(--space-4);
  gap: 0;
}

.product-card__cat {
  font-size: var(--text-2xs);
  color: var(--color-text-light);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.product-card__meta {
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  gap: var(--space-3);
}

.product-card__price {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
}

.product-card__price .price-currency {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-inline-start: 2px;
}

.price-from {
  font-size: var(--text-2xs);
  color: var(--color-text-light);
  font-weight: var(--weight-medium);
}

.product-card__actions .btn-store {
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  background: linear-gradient(135deg, var(--color-gold), var(--color-primary));
  color: var(--color-text-inverse);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.3);
}

/* ────────────────────────────────────────────────────────────────
   4. BUTTONS — Premium treatment
   ──────────────────────────────────────────────────────────────── */

.btn-store {
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.btn-store--primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-primary) 50%, var(--color-accent-dark) 100%);
  background-size: 200% 200%;
  color: var(--color-text-inverse);
  border: none;
  box-shadow: 0 4px 16px rgba(139, 105, 20, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-store--primary:hover:not(:disabled) {
  background-position: 100% 0;
  box-shadow: 0 8px 28px rgba(139, 105, 20, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-store--primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-store--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn-store--ghost:hover {
  background: var(--color-bg-secondary);
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
  box-shadow: var(--shadow-glow);
}

/* ────────────────────────────────────────────────────────────────
   5. CATEGORY CARDS — Premium impact
   ──────────────────────────────────────────────────────────────── */

.category-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              box-shadow var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out);
  overflow: hidden;
  position: relative;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(139, 105, 20, 0.2);
}

.category-card__media {
  overflow: hidden;
}

.category-card__media img {
  transition: transform 0.5s var(--ease-out-expo);
}

.category-card:hover .category-card__media img {
  transform: scale(1.08);
}

.category-card__overlay {
  background: linear-gradient(180deg,
    rgba(253, 251, 247, 0.05) 0%,
    rgba(253, 251, 247, 0.75) 40%,
    rgba(253, 251, 247, 0.96) 100%);
  transition: background 0.4s var(--ease-out);
}

.category-card:hover .category-card__overlay {
  background: linear-gradient(180deg,
    rgba(253, 251, 247, 0.1) 0%,
    rgba(253, 251, 247, 0.85) 45%,
    rgba(253, 251, 247, 0.98) 100%);
}

.category-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-chocolate);
  letter-spacing: var(--tracking-tight);
  font-size: var(--text-lg);
}

.category-card__count {
  color: var(--color-text-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

.category-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  transition: background 0.3s, transform 0.3s;
}

.category-card:hover .category-card__arrow {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateX(4px);
}

/* ────────────────────────────────────────────────────────────────
   6. SHOP PAGE — Search, Filters, Grid
   ──────────────────────────────────────────────────────────────── */

.shop-header__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-chocolate);
  letter-spacing: var(--tracking-tight);
}

.shop-header__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.shop-search {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
}

.shop-search:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.shop-search::placeholder {
  color: var(--color-text-light);
}

/* ────────────────────────────────────────────────────────────────
   7. CART & CHECKOUT — Calm, trustworthy
   ──────────────────────────────────────────────────────────────── */

.cart-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.cart-section {
  margin-top: var(--space-8);
}

.cart-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  box-shadow: var(--shadow-card);
}

.cart-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  color: var(--color-text-light);
  opacity: 0.5;
}

.cart-item {
  border-bottom: 1px solid var(--color-border-soft);
  padding: var(--space-4) 0;
  transition: background 0.2s;
}

.cart-item:hover {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.cart-summary__glass {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--space-4);
}

.checkout-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ────────────────────────────────────────────────────────────────
   8. TOAST NOTIFICATIONS
   ──────────────────────────────────────────────────────────────── */

.toast {
  background: var(--color-chocolate);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-4);
}

.toast--error {
  background: var(--color-danger);
}

.toast--success {
  background: var(--color-success);
}

/* ────────────────────────────────────────────────────────────────
   9. FOOTER — Premium refined treatment
   ──────────────────────────────────────────────────────────────── */

.store-footer {
  background: linear-gradient(180deg, var(--color-chocolate) 0%, #2a1a10 100%);
  color: var(--color-cream);
}

.store-footer__inner {
  max-width: var(--store-max-width);
}

.store-footer__brand .site-logo--footer {
  filter: brightness(10) contrast(0.8);
  opacity: 0.9;
  transition: opacity 0.3s;
}

.store-footer__brand:hover .site-logo--footer {
  opacity: 1;
}

.store-footer a {
  color: var(--color-gold);
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.store-footer a:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
  opacity: 0.9;
}

.store-footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.store-footer__copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
}

/* ────────────────────────────────────────────────────────────────
   10. MOBILE DRAWER — Premium treatment
   ──────────────────────────────────────────────────────────────── */

.store-drawer {
  background: var(--color-surface);
  box-shadow: var(--shadow-2xl);
}

.store-drawer__head {
  border-bottom: 1px solid var(--color-border-soft);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.store-drawer__head h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-chocolate);
  margin: 0;
}

.store-drawer a {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  padding: var(--space-2-5) 0;
  border-bottom: 1px solid var(--color-border-soft);
  transition: color var(--duration-fast) var(--ease-out);
}

.store-drawer a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ────────────────────────────────────────────────────────────────
   11. SPECIAL ORDER BUTTONS
   ──────────────────────────────────────────────────────────────── */

.btn-special-order {
  background: linear-gradient(135deg, var(--color-chocolate), var(--color-warm-brown));
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(74, 47, 31, 0.2);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.btn-special-order:hover {
  box-shadow: 0 4px 16px rgba(74, 47, 31, 0.3);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────────
   12. RESPONSIVE REFINEMENTS
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .store-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
  }

  .hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero__lead {
    font-size: var(--text-base);
  }

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

  .shop-header__title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .btn-store--primary {
    width: 100%;
    justify-content: center;
  }

  .product-card__body {
    padding: var(--space-3) var(--space-3-5) var(--space-3-5);
  }
}

/* ────────────────────────────────────────────────────────────────
   13. ACCESSIBILITY — Focus visible
   ──────────────────────────────────────────────────────────────── */

.btn-store:focus-visible,
.store-nav > a:focus-visible,
.product-card a:focus-visible,
.category-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ────────────────────────────────────────────────────────────────
   14. REDUCED MOTION
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .category-card,
  .hero__frame,
  .btn-store,
  .btn-special-order {
    transition: none;
  }

  .product-card:hover,
  .category-card:hover {
    transform: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   15. RTL SUPPORT
   ──────────────────────────────────────────────────────────────── */

body.store-body.is-rtl .hero h1 {
  letter-spacing: 0;
}

body.store-body.is-rtl .product-card__cat {
  letter-spacing: 0;
}

body.store-body.is-rtl .btn-store {
  letter-spacing: 0;
}

/* ────────────────────────────────────────────────────────────────
   16. THEME TOGGLE BUTTON
   ──────────────────────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--color-bg-hover);
}
.theme-toggle:active {
  transform: scale(0.92);
}
.theme-toggle svg {
  display: block;
  transition: transform 0.3s var(--sh-ease);
}
.theme-toggle:hover svg {
  transform: rotate(15deg);
}
.theme-toggle--admin {
  width: 32px;
  height: 32px;
}

/* ────────────────────────────────────────────────────────────────
   17. DARK MODE — STOREFRONT
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] .store-header {
  background: rgba(26, 20, 16, 0.88);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .store-header.is-scrolled {
  background: rgba(26, 20, 16, 0.95);
}

[data-theme="dark"] .hero {
  color: var(--color-text);
}

[data-theme="dark"] .store-btn-primary,
[data-theme="dark"] .btn-store {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .store-btn-primary:hover,
[data-theme="dark"] .btn-store:hover {
  box-shadow: 0 4px 16px rgba(201,169,110,0.15);
}

[data-theme="dark"] .product-card {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
}
[data-theme="dark"] .product-card:hover {
  border-color: var(--color-border);
}

[data-theme="dark"] .category-card {
  border-color: var(--color-border-soft);
}

[data-theme="dark"] .product-card .add-to-cart-btn {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
[data-theme="dark"] .product-card .add-to-cart-btn:hover {
  background: var(--color-primary-hover);
}

[data-theme="dark"] .product-badge {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .footer {
  background: var(--color-bg-secondary);
  border-top-color: var(--color-border);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: var(--color-border-soft);
}

[data-theme="dark"] .toast-container .toast {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .store-drawer {
  background: var(--color-bg);
}
[data-theme="dark"] .store-drawer__account-panel {
  background: var(--color-bg-secondary);
}
[data-theme="dark"] .store-drawer__auth-btn {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
[data-theme="dark"] .store-drawer__lang-btn {
  background: var(--color-bg-hover);
  color: var(--color-text);
}

/* Dark mode for product grid filters */
[data-theme="dark"] .shop-filters {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
}
[data-theme="dark"] .shop-filters select,
[data-theme="dark"] .shop-filters input {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Dark mode for cart */
[data-theme="dark"] .cart-section {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
}
[data-theme="dark"] .cart-item {
  border-color: var(--color-border-soft);
}

/* ────────────────────────────────────────────────────────────────
   18. DARK MODE — AUTH PAGES
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] .auth-page {
  background: var(--color-bg);
}
[data-theme="dark"] .auth-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .auth-card h2,
[data-theme="dark"] .auth-card label {
  color: var(--color-text);
}
[data-theme="dark"] .auth-card input {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .auth-card input::placeholder {
  color: var(--color-text-muted);
}

/* ────────────────────────────────────────────────────────────────
   19. DARK MODE — ACCOUNT / TRACKING PAGES
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] .account-page {
  background: var(--color-bg);
}
[data-theme="dark"] .account-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .tracking-page {
  background: var(--color-bg);
}
[data-theme="dark"] .tracking-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM SCROLL-REVEAL MOTION SYSTEM
   IntersectionObserver-driven entrance + refined hover states.
   All transitions use GPU-composited properties only.
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. SCROLL-REVEAL ENTRANCE ANIMATIONS
   Applied via JS: .sr-visible triggers the animation.
   Initial state: invisible, shifted down.
   ──────────────────────────────────────────────────────────────── */

/* Section-level reveal — enhanced from .sh-reveal */
.sh-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override old cardReveal animation for cards inside scroll-reveal sections */
.sh-reveal .product-card,
.sh-reveal .category-card {
  animation: none !important;
}

/* Card-level reveal — for grids of cards inside a revealed section */
.sh-reveal .sr-card {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .sr-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered delays — up to 12 children */
.sh-reveal.sh-reveal--visible .sr-card:nth-child(1)  { transition-delay: 0.04s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(2)  { transition-delay: 0.09s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(3)  { transition-delay: 0.14s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(4)  { transition-delay: 0.19s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(5)  { transition-delay: 0.24s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(6)  { transition-delay: 0.29s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(7)  { transition-delay: 0.33s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(8)  { transition-delay: 0.37s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(9)  { transition-delay: 0.40s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(10) { transition-delay: 0.43s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(11) { transition-delay: 0.46s; }
.sh-reveal.sh-reveal--visible .sr-card:nth-child(12) { transition-delay: 0.49s; }

/* Section head — text reveal before cards */
.sh-reveal .sh-section__head {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .sh-section__head {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.sh-section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary, #c9a96e);
  margin-bottom: 0.6rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.sh-section__eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--color-primary, #c9a96e);
  border-radius: 1px;
}

/* ────────────────────────────────────────────────────────────────
   2. PRODUCT CARD — Premium Hover States
   Card lift + image zoom + shadow deepen + ambient glow
   ──────────────────────────────────────────────────────────────── */

.product-card {
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 50px rgba(44, 24, 16, 0.10),
    0 8px 20px rgba(44, 24, 16, 0.06);
  border-color: rgba(139, 105, 20, 0.12);
}

/* Image zoom on card hover */
.product-card__media {
  overflow: hidden;
  will-change: transform;
}
.product-card:hover .product-card__img--loaded {
  transform: scale(1.06);
}

/* Shadow deepen on hover — layered depth */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(139, 105, 20, 0.06),
    0 32px 64px rgba(44, 24, 16, 0.08);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}
.product-card:hover::after {
  opacity: 1;
}

/* Wishlist heart — glow on card hover */
.product-card:hover .yni-wishlist-heart {
  opacity: 1;
  transform: scale(1);
}
.yni-wishlist-heart {
  opacity: 0.6;
  transform: scale(0.9);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}
.yni-wishlist-heart:hover {
  filter: drop-shadow(0 0 6px rgba(169, 68, 66, 0.4));
}

/* Button micro-interaction */
.product-card .btn-store--primary {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background 0.3s ease;
}
.product-card:hover .btn-store--primary {
  box-shadow: 0 4px 14px rgba(139, 105, 20, 0.25);
}
.product-card .btn-store--primary:active {
  transform: scale(0.97);
}

/* ────────────────────────────────────────────────────────────────
   3. CATEGORY CARD — Premium Hover States
   Image zoom + overlay reveal + title glow
   ──────────────────────────────────────────────────────────────── */

.category-card {
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 40px rgba(44, 24, 16, 0.10),
    0 6px 16px rgba(44, 24, 16, 0.05);
}

/* Image zoom */
.category-card:hover .category-card__image {
  transform: scale(1.08);
}
.category-card__image {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Overlay darkening on hover */
.category-card__content {
  transition: background 0.4s ease;
}

/* Title color shift */
.category-card:hover .category-card__title {
  color: var(--color-primary);
}

/* ────────────────────────────────────────────────────────────────
   4. FEATURE CARD — Premium Hover States
   Lift + icon bounce + border glow
   ──────────────────────────────────────────────────────────────── */

.feature-card {
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 32px rgba(44, 24, 16, 0.07),
    0 4px 12px rgba(44, 24, 16, 0.03);
  border-color: rgba(139, 105, 20, 0.12);
}

/* Icon pop on hover */
.feature-card:hover .feature-card__icon {
  transform: scale(1.15) translateY(-2px);
}
.feature-card__icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Feature card stagger for 3-column grid */
.features-grid .feature-card {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}
.sh-reveal.sh-reveal--visible .feature-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sh-reveal.sh-reveal--visible .feature-card:nth-child(1) { transition-delay: 0.08s; }
.sh-reveal.sh-reveal--visible .feature-card:nth-child(2) { transition-delay: 0.16s; }
.sh-reveal.sh-reveal--visible .feature-card:nth-child(3) { transition-delay: 0.24s; }
.sh-reveal.sh-reveal--visible .feature-card:nth-child(4) { transition-delay: 0.32s; }
.sh-reveal.sh-reveal--visible .feature-card:nth-child(5) { transition-delay: 0.40s; }

/* ────────────────────────────────────────────────────────────────
   5. TESTIMONIAL CARD — Hover refinement
   ──────────────────────────────────────────────────────────────── */

.testimonial-card {
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px rgba(44, 24, 16, 0.08),
    0 4px 10px rgba(44, 24, 16, 0.03);
}

/* Quote icon glow */
.testimonial-card:hover .testimonial-card__quote-icon {
  color: var(--color-primary);
  transform: scale(1.1);
}
.testimonial-card__quote-icon {
  transition:
    color 0.35s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Testimonial stagger */
.testimonials-grid .testimonial-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .testimonial-card {
  opacity: 1;
  transform: translateY(0);
}
.sh-reveal.sh-reveal--visible .testimonial-card:nth-child(1) { transition-delay: 0.06s; }
.sh-reveal.sh-reveal--visible .testimonial-card:nth-child(2) { transition-delay: 0.14s; }
.sh-reveal.sh-reveal--visible .testimonial-card:nth-child(3) { transition-delay: 0.22s; }

/* ────────────────────────────────────────────────────────────────
   6. CURATED-FOR-YOU CARD — Hover states
   ──────────────────────────────────────────────────────────────── */

.curated-for-you__card {
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.curated-for-you__card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 16px 40px rgba(44, 24, 16, 0.09),
    0 6px 16px rgba(44, 24, 16, 0.04);
}
.curated-for-you__card:hover .curated-for-you__media img {
  transform: scale(1.05);
}
.curated-for-you__media img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Curated stagger */
.curated-for-you__track .curated-for-you__card {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .curated-for-you__card {
  opacity: 1;
  transform: translateY(0);
}
.sh-reveal.sh-reveal--visible .curated-for-you__card:nth-child(1) { transition-delay: 0.06s; }
.sh-reveal.sh-reveal--visible .curated-for-you__card:nth-child(2) { transition-delay: 0.13s; }
.sh-reveal.sh-reveal--visible .curated-for-you__card:nth-child(3) { transition-delay: 0.20s; }
.sh-reveal.sh-reveal--visible .curated-for-you__card:nth-child(4) { transition-delay: 0.27s; }

/* ────────────────────────────────────────────────────────────────
   7. BANNER ITEM — Hover refinement
   ──────────────────────────────────────────────────────────────── */

.banner-item {
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.banner-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 24, 16, 0.08);
}
.banner-item:hover img {
  transform: scale(1.02);
}
.banner-item img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Banner stagger */
.banners-section .banner-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .banner-item {
  opacity: 1;
  transform: translateY(0);
}
.sh-reveal.sh-reveal--visible .banner-item:nth-child(1) { transition-delay: 0.05s; }
.sh-reveal.sh-reveal--visible .banner-item:nth-child(2) { transition-delay: 0.12s; }

/* ────────────────────────────────────────────────────────────────
   8. ABOUT SECTION — Image reveal
   ──────────────────────────────────────────────────────────────── */

.about-section__card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.sh-reveal--visible .about-section__card {
  opacity: 1;
  transform: translateY(0);
}

.about-section__photo {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-section__frame:hover .about-section__photo {
  transform: scale(1.04);
}

/* ────────────────────────────────────────────────────────────────
   9. SOCIAL LINKS — Icon pop on hover
   ──────────────────────────────────────────────────────────────── */

.social-link {
  will-change: transform;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease;
}
.social-link:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(44, 24, 16, 0.10);
}
.social-link:active {
  transform: scale(0.96);
}

/* ────────────────────────────────────────────────────────────────
   10. SPECIAL ORDER CTA — Pulse attention
   ──────────────────────────────────────────────────────────────── */

.special-order-cta__content {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.special-order-cta__content:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(139, 105, 20, 0.12);
}

/* ────────────────────────────────────────────────────────────────
   11. PRODUCT DETAIL — Gallery & Info entrance
   ──────────────────────────────────────────────────────────────── */

.product-detail__gallery {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-detail--loaded .product-detail__gallery {
  opacity: 1;
  transform: translateX(0);
}

.product-detail__info {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.product-detail--loaded .product-detail__info {
  opacity: 1;
  transform: translateX(0);
}

/* ────────────────────────────────────────────────────────────────
   12. FOOTER ENTRANCE
   ──────────────────────────────────────────────────────────────── */

.store-footer-section .footer__grid {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.sh-reveal.sh-reveal--visible .footer__grid {
  opacity: 1;
  transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────────
   13. PREFERS-REDUCED-MOTION
   Disable all entrance animations & hover transforms.
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Kill all scroll-reveal entrance animations */
  .sh-reveal,
  .sh-reveal .sr-card,
  .sh-reveal .sh-section__head,
  .sh-reveal .feature-card,
  .sh-reveal .testimonial-card,
  .sh-reveal .curated-for-you__card,
  .sh-reveal .banner-item,
  .sh-reveal.sh-reveal--visible .sr-card,
  .sh-reveal.sh-reveal--visible .feature-card,
  .sh-reveal.sh-reveal--visible .testimonial-card,
  .sh-reveal.sh-reveal--visible .curated-for-you__card,
  .sh-reveal.sh-reveal--visible .banner-item,
  .about-section__card,
  .store-footer-section .footer__grid,
  .product-detail__gallery,
  .product-detail__info {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }

  /* Kill existing cardReveal animations from premium-polish.css */
  .product-card,
  .category-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Kill hero entrance animations */
  .hero__content,
  .hero__visual,
  .hero__eyebrow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Remove all hover transforms */
  .product-card:hover,
  .category-card:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .curated-for-you__card:hover,
  .banner-item:hover,
  .social-link:hover,
  .special-order-cta__content:hover,
  .hero__frame:hover,
  .about-section__frame:hover {
    transform: none !important;
  }

  /* Remove hover image zoom */
  .product-card:hover .product-card__img--loaded,
  .category-card:hover .category-card__image,
  .curated-for-you__card:hover .curated-for-you__media img,
  .banner-item:hover img,
  .about-section__frame:hover .about-section__photo {
    transform: none !important;
  }

  /* Remove all will-change hints */
  .product-card,
  .category-card,
  .feature-card,
  .testimonial-card,
  .curated-for-you__card,
  .banner-item,
  .social-link {
    will-change: auto !important;
  }

  /* Remove ambient glow pseudo-elements */
  .product-card::before,
  .product-card::after {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   14. DARK MODE — Enhanced hover states
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] .product-card:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: rgba(201, 169, 110, 0.15);
}
[data-theme="dark"] .product-card::after {
  box-shadow:
    0 0 0 1px rgba(201, 169, 110, 0.08),
    0 32px 64px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .category-card:hover {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .feature-card:hover {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: rgba(201, 169, 110, 0.12);
}
[data-theme="dark"] .testimonial-card:hover {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .curated-for-you__card:hover {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .social-link:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .special-order-cta__content:hover {
  box-shadow: 0 16px 40px rgba(201, 169, 110, 0.12);
}

/* ── Utility classes ── */
.yni-u-min-w-btn { min-width: 145px; }