/* ==========================================================================
   Elbuz Theme — base stylesheet (engine v2, docs/12-engine-v2-spec.md)
   Layer 1 tokens → layer 2 switches → components.
   Components use only --et-* tokens for sizes, radii, borders, rhythm and colors.
   ========================================================================== */

/* === tokens === */
:root {
  /* Accent Colors (Blue default — universal for all niches) */
  --et-accent: #2563EB;
  --et-accent-hover: #1D4ED8;
  --et-accent-light: rgba(37, 99, 235, 0.1);
  --et-accent-dark: #1E40AF;
  --et-accent-rgb: 37, 99, 235;
  --et-accent-ghost: rgba(var(--et-accent-rgb), 0.15);   /* focus ring */
  --et-accent-text: var(--et-accent);   /* accent as text/link color, >= 4.5:1 on bg/surface */

  /* Hero gradient derived from accent */
  --et-hero-from: #1E3A5F;
  --et-hero-via: #1E40AF;
  --et-hero-to: #2563EB;
  --et-hero-glow: rgba(37, 99, 235, 0.25);

  /* Promo gradients */
  --et-promo-dark-from: #0F172A;
  --et-promo-dark-to: #1E3A5F;
  --et-promo-accent-from: var(--et-accent-dark);
  --et-promo-accent-to: var(--et-accent);

  /* Semantic */
  --et-success: #16a34a;
  --et-danger: #DC2626;
  --et-warning: #d97706;
  --et-info: #3B82F6;
  --et-error: var(--et-danger);
  --et-error-bg: #FEE2E2;
  --et-danger-hover: #B91C1C;
  --et-sale: var(--et-danger);          /* discounted price, sale badge */
  --et-on-status: #FFFFFF;              /* text on danger/success/warning/brand fills */
  --et-rating: var(--et-warning);       /* rating stars */
  --et-hot: #F59E0B;                    /* "hit", flash sale */
  --et-hot-light: #FBBF24;
  --et-hot-strong: #F97316;
  --et-new: #10B981;

  /* Status tints (alerts, banners, hover fills) */
  --et-success-soft: #DCFCE7;
  --et-success-border: #BBF7D0;
  --et-success-text: #166534;
  --et-danger-soft: #FEF2F2;
  --et-danger-border: #FECACA;
  --et-danger-text: #991B1B;
  --et-warning-soft: #FEF3C7;
  --et-warning-tint: #FDE68A;
  --et-warning-border: #FCD34D;
  --et-warning-text: #92400E;
  --et-info-soft: #DBEAFE;
  --et-info-border: #BFDBFE;
  --et-info-text: #1E40AF;

  /* Fixed brand colors (social / messengers) */
  --et-brand-google: #EA4335;
  --et-brand-facebook: #1877F2;
  --et-brand-telegram: #26A5E4;
  --et-brand-viber: #7360F2;
  --et-brand-whatsapp: #25D366;

  /* Surfaces */
  --et-bg: #f5f7fa;
  --et-surface: #FFFFFF;
  --et-surface-2: #F1F5F9;              /* secondary fill inside surfaces */
  --et-surface-glass: rgba(255, 255, 255, 0.72);
  --et-surface-elevated: rgba(255, 255, 255, 0.88);
  --et-header-bg: rgba(15, 23, 42, 0.95);
  --et-topbar-bg: rgba(2, 6, 23, 0.95);
  --et-footer-bg: #0F172A;
  --et-nav-bg: rgba(255, 255, 255, 0.85);
  --et-header-text: #FFFFFF;            /* text on --et-header-bg */
  --et-topbar-text: #FFFFFF;            /* text on --et-topbar-bg */
  --et-footer-text: #FFFFFF;            /* text on --et-footer-bg */
  --et-accent-contrast: #FFFFFF;        /* text on --et-accent fills */
  --et-header-accent: #93C5FD;          /* accent on --et-header-bg (hover, active icon) */
  --et-topbar-accent: #93C5FD;          /* accent on --et-topbar-bg */
  --et-footer-accent: #93C5FD;          /* accent on --et-footer-bg */

  /* Text */
  --et-text: #0F172A;
  --et-text-secondary: #475569;
  --et-text-muted: #94A3B8;
  --et-text-light: rgba(255, 255, 255, 0.92);
  --et-text-light-secondary: rgba(255, 255, 255, 0.6);

  /* Borders */
  --et-border: #E2E8F0;
  --et-border-strong: #CBD5E1;
  --et-border-light: rgba(255, 255, 255, 0.18);
  --et-border-glass: rgba(255, 255, 255, 0.25);

  /* Spacing (8dp scale) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shape */
  --et-radius: 16px;
  --et-radius-sm: 10px;
  --et-radius-xs: 6px;
  --et-radius-full: 9999px;
  --et-btn-radius: var(--et-radius-sm);
  --et-card-radius: var(--et-radius);
  --et-input-radius: var(--et-radius-sm);
  --et-media-radius: var(--et-radius-sm);
  --et-btn-secondary-radius: var(--et-radius-sm);  /* used once data-btn-secondary is set (pill/underline of data-btn do not touch it) */
  /* Optional per-component form (shape.components, elbuz_shape.php); not set → CSS falls back to the general token:
     --et-{btn,input,card,media,overlay}-border-width, --et-{btn,input,card,media,overlay}-shadow, --et-overlay-radius.
     Font roles (typography.roles, elbuz_fonts.php): --et-font-{subheading,accent,price,button}; not set → each place keeps its own font. */
  --et-media-plate: color-mix(in oklab, #fff 94%, var(--et-accent));  /* light plate under product photos (data-media-bg=plate) */
  --et-chip-radius: var(--et-radius-full);  /* pills, chips, tags */
  --et-border-width: 1px;
  --et-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --et-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
  --et-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
  --et-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12);
  --et-shadow-up: 0 -6px 20px rgba(15, 23, 42, 0.08);   /* bottom-docked bars */
  --et-overlay-bg: rgba(15, 23, 42, 0.55);   /* dimmed page under modals, drawer, sheets */
  --et-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --et-blur: blur(20px);
  --et-blur-heavy: blur(40px);

  /* Typography */
  --et-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --et-font-display: 'Unbounded', 'Inter', sans-serif;
  --et-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --et-font-size-root: 18px;            /* html font-size; all rem sizes scale from it */
  --et-body-leading: 1.5;
  --et-heading-weight: 700;             /* final heading weight (absolute); emphasis components add +100/+200 for hierarchy */
  --et-heading-transform: none;
  --et-heading-tracking: -0.02em;       /* final heading tracking of the font pair (absolute) */
  --et-tracking-shift: 0em;             /* pair tracking minus the default -0.02em; components add it to their own baseline to keep hierarchy */
  --et-heading-leading: 1.2;
  --et-heading-style: normal;
  --et-eyebrow-tracking: 0.05em;        /* uppercase labels */

  /* Type scale (rem; preset may regenerate from base + ratio) */
  --et-text-xs: 0.6875rem;   /* 11px */
  --et-text-sm: 0.8125rem;   /* 13px */
  --et-text-base: 1rem;       /* 16px (18px with html font-size) */
  --et-text-lg: 1.125rem;     /* 18px */
  --et-text-xl: 1.25rem;      /* 20px */
  --et-text-2xl: 1.5rem;      /* 24px */
  --et-text-3xl: 2rem;        /* 32px */
  --et-text-4xl: 2.5rem;      /* 40px */
  --et-text-5xl: 3.5rem;      /* 56px */
  --et-text-6xl: 4.5rem;      /* 72px */
  /* Derived in-between steps (follow the scale) */
  --et-text-caption: calc(var(--et-text-sm) * 0.923077);  /* 0.75rem */
  --et-text-md: calc(var(--et-text-sm) * 1.076923);       /* 0.875rem */

  /* Rhythm */
  --et-container: 1600px;               /* max content width */
  --et-gutter: 2rem;                    /* container side padding (mobile: x0.375) */
  --et-section-gap: 1.25rem;            /* vertical gap between home sections */
  --et-grid-gap: 1rem;                  /* product/card grids */
  --et-card-pad: 1rem;                  /* inner padding of cards */
  --et-block-pad: 1.75rem;              /* inner padding of section blocks, panels */

  /* Transitions & easing */
  --et-transition: var(--et-motion-fast, 0.2s) var(--et-motion-ease, cubic-bezier(0.4, 0, 0.2, 1));      /* motion level: elbuz_motion.css */
  --et-transition-slow: var(--et-motion-slow, 0.4s) var(--et-motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradient tokens */
  --et-gradient-hero: linear-gradient(135deg, var(--et-hero-from) 0%, var(--et-hero-via) 50%, var(--et-hero-to) 100%);
  --et-gradient-text: linear-gradient(135deg, var(--et-accent), var(--et-accent-hover));
}

/* ==========================================================================
   COLOUR PALETTES: <html data-scheme="<code>"> (visitor choice in the Tools panel). The rules are not here: the colour
   engine compiles the chosen palette (schema/palettes.json) over the preset — route extension/theme/elbuz_theme/palette,
   scoped to html[data-scheme="<code>"], text roles computed for contrast with their backgrounds.
   ========================================================================== */

/* ==========================================================================
   DARK THEME (overrides any scheme — higher specificity)
   ========================================================================== */
html.dark-theme, html[data-scheme].dark-theme {
  --et-media-plate: color-mix(in oklab, var(--et-text) 84%, var(--et-bg));  /* muted plate under white photos in dark mode */
  --et-bg: #0B0F1A;
  --et-surface: #151B2B;
  --et-surface-glass: rgba(21, 27, 43, 0.72);
  --et-surface-elevated: rgba(21, 27, 43, 0.88);
  --et-nav-bg: rgba(21, 27, 43, 0.85);

  --et-text: #F1F5F9;
  --et-text-secondary: #94A3B8;
  --et-text-muted: #64748B;

  --et-border: #1E293B;
  --et-border-strong: #334155;
  --et-surface-2: #1B2235;
  --et-border-glass: rgba(255, 255, 255, 0.06);
  --et-accent-light: rgba(var(--et-accent-rgb), 0.18);
  --et-error-bg: rgba(220, 38, 38, 0.18);

  --et-shadow-sm: none;
  --et-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --et-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --et-shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --et-shadow-glass: 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html { font-synthesis: none; } /* no fake bold/italic for fonts with few faces (e.g. Prata 400) */
html { font-size: var(--et-font-size-root); }

/* === switches === */
/* Layer 2: style switches on <html> (docs/12-engine-v2-spec.md).
   No attribute or the default value (btn=solid, heading=plain, surface=outlined, density=default,
   media=square, badge=pill) = current look, so those values have no rules here.
   Every other value changes the character of a component family, not just a color. */

/* ---- data-density: rhythm tokens ---- */
html[data-density="compact"] {
  --et-gutter: 1.25rem;
  --et-section-gap: 0.625rem;
  --et-grid-gap: 0.625rem;
  --et-card-pad: 0.625rem;
  --et-block-pad: 1rem;
}
html[data-density="airy"] {
  --et-gutter: 3.5rem;
  --et-section-gap: 3rem;
  --et-grid-gap: 1.75rem;
  --et-card-pad: 1.5rem;
  --et-block-pad: 3rem;
}

/* ---- data-btn: primary actions + .et-btn family ---- */
html[data-btn="pill"] { --et-btn-radius: var(--et-radius-full); }
html[data-btn="underline"] { --et-btn-radius: 0; }

html[data-btn="outline"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout) {
  background: transparent;
  color: var(--et-accent-text);
  box-shadow: inset 0 0 0 var(--et-btn-border-width, calc(var(--et-border-width) * 2)) var(--et-accent);
}
html[data-btn="outline"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout):hover {
  background: var(--et-accent);
  color: var(--et-accent-contrast);
}

html[data-btn="ghost"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout) {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  box-shadow: none;
}
html[data-btn="ghost"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout):hover {
  background: color-mix(in srgb, var(--et-accent) 22%, transparent);
  color: var(--et-accent-hover);
}
html[data-btn="ghost"]:not([data-btn-secondary]) :is(.et-btn--outline, .et-btn--secondary) { border-color: transparent; background: var(--et-surface-2); }

html[data-btn="pill"] :is(.et-btn:not(:where([data-btn-secondary] :is(.et-btn--outline, .et-btn--secondary))), .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout) {
  border-radius: var(--et-radius-full);
  padding-inline: max(1.25em, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--et-text-caption);
}

html[data-btn="underline"] :is(.et-btn:not(:where([data-btn-secondary] :is(.et-btn--outline, .et-btn--secondary))), .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout) {
  background: transparent;
  color: var(--et-text);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 calc(var(--et-border-width) * -2) 0 var(--et-accent);
  padding-inline: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: none;
}
html[data-btn="underline"] :is(.et-btn:not(:where([data-btn-secondary] :is(.et-btn--outline, .et-btn--secondary))), .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout):hover {
  background: transparent;
  color: var(--et-accent-text);
  box-shadow: inset 0 calc(var(--et-border-width) * -4) 0 var(--et-accent);
  transform: none;
}
html[data-btn="underline"] .et-hero__slide-btn { color: var(--et-accent-contrast); }

/* ---- data-btn-secondary: secondary buttons (.et-btn--secondary, .et-btn--outline) ----
   Not set → secondaries follow data-btn as before. Set → their own style; outline = the base look. */
html[data-btn-secondary] :is(.et-btn--outline, .et-btn--secondary) { border-radius: var(--et-btn-secondary-radius); }
html[data-btn-secondary="pill"] { --et-btn-secondary-radius: var(--et-radius-full); }
html[data-btn-secondary="underline"] { --et-btn-secondary-radius: 0px; }
html[data-btn-secondary="solid"] :is(.et-btn--outline, .et-btn--secondary) { background: var(--et-text); border-color: var(--et-text); color: var(--et-bg); }
html[data-btn-secondary="solid"] :is(.et-btn--outline, .et-btn--secondary):hover { background: var(--et-text-secondary); border-color: var(--et-text-secondary); color: var(--et-bg); }
html[data-btn-secondary="ghost"] :is(.et-btn--outline, .et-btn--secondary) { border-color: transparent; background: var(--et-surface-2); }
html[data-btn-secondary="ghost"] :is(.et-btn--outline, .et-btn--secondary):hover { border-color: transparent; background: var(--et-accent-light); color: var(--et-accent-text); }
html[data-btn-secondary="pill"] :is(.et-btn--outline, .et-btn--secondary) {
  padding-inline: max(1.25em, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--et-text-caption);
}
html[data-btn-secondary="underline"] :is(.et-btn--outline, .et-btn--secondary) {
  background: transparent;
  color: var(--et-text);
  border: 0;
  box-shadow: inset 0 calc(var(--et-btn-border-width, var(--et-border-width)) * -2) 0 var(--et-border-strong);
  padding-inline: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[data-btn-secondary="underline"] :is(.et-btn--outline, .et-btn--secondary):hover {
  color: var(--et-text);
  box-shadow: inset 0 calc(var(--et-btn-border-width, var(--et-border-width)) * -2) 0 var(--et-text);
  transform: none;
}

/* ---- data-heading: section titles ---- */
body { counter-reset: et-section; }
html[data-heading="rule"] :is(.et-section__title, .et-product-section__title) {
  display: flex;
  align-items: center;
  gap: 0.75em;
}
html[data-heading="rule"] :is(.et-section__title, .et-product-section__title)::after {
  content: '';
  flex: 1;
  height: var(--et-border-width);
  background: var(--et-border-strong);
}
html[data-heading="rule"] :is(.et-section__header, .et-product-section__head) :is(.et-section__title, .et-product-section__title) {
  flex: 1 1 12rem;
  min-width: 0;
}

html[data-heading="centered"] :is(.et-section__header, .et-product-section__head) {
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
html[data-heading="centered"] :is(.et-section__title, .et-product-section__title) {
  text-align: center;
  font-size: calc(var(--et-text-2xl) * 1.25);
}
html[data-heading="centered"] :is(.et-section__title, .et-product-section__title)::after {
  content: '';
  display: block;
  width: 3rem;
  height: calc(var(--et-border-width) * 3);
  margin: 0.6em auto 0;
  background: var(--et-accent);
}

html[data-heading="numbered"] :is(.et-section__title, .et-product-section__title) {
  counter-increment: et-section;
  display: flex;
  align-items: baseline;
  gap: 0.9em;
}
html[data-heading="numbered"] :is(.et-section__title, .et-product-section__title)::before {
  content: counter(et-section, decimal-leading-zero);
  font-family: var(--et-font-mono);
  font-size: 0.55em;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: var(--et-accent-text);
  padding: 0.2em 0.5em;
  border: var(--et-border-width) solid currentColor;
  border-radius: var(--et-radius-xs);
  transform: translateY(-0.25em);
}
html[data-heading="numbered"] :is(.et-section__title, .et-product-section__title) > i,
html[data-heading="eyebrow"] :is(.et-section__title, .et-product-section__title) > i { display: none; }

/* the title stays a heading; above it a short accent bar (the eyebrow mark), the subtitle under it — a quiet caption */
html[data-heading="eyebrow"] :is(.et-section__title, .et-product-section__title)::before {
  content: ""; display: block; width: 2.5rem; height: 0.1875rem; margin-bottom: 0.625rem; border-radius: 2px; background: var(--et-accent);
}
html[data-heading="eyebrow"] .et-section--center :is(.et-section__title, .et-product-section__title)::before { margin-inline: auto; }
html[data-heading="eyebrow"] .et-path__eyebrow + .et-section__title::before { display: none; }

/* ---- data-surface: cards, blocks, sidebars ---- */
html[data-surface="flat"] :is(.et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-categories__item, .et-testimonial, .et-blog-card, .et-why-card) {
  border-color: transparent;
  box-shadow: none;
}
html[data-surface="flat"] :is(.et-product-block, .et-category-layout__sidebar, .et-buybox) { background: var(--et-surface); }
html[data-surface="flat"] :is(.et-card, .et-advantage, .et-categories__item, .et-testimonial, .et-blog-card, .et-why-card) { background: var(--et-surface-2); }
html[data-surface="flat"] :is(.et-card, .et-advantage, .et-categories__item, .et-blog-card, .et-why-card):hover {
  box-shadow: none;
  transform: none;
  border-color: transparent;
  background: color-mix(in srgb, var(--et-accent) 6%, var(--et-surface-2));
}
html[data-surface="flat"] .et-category-layout__main .et-card { background: var(--et-surface); }

html[data-surface="raised"] :is(.et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-categories__item, .et-testimonial, .et-blog-card, .et-why-card) {
  border-color: transparent;
  box-shadow: var(--et-shadow-lg);
}
html[data-surface="raised"] .et-card { box-shadow: var(--et-card-shadow, var(--et-shadow)); }
html[data-surface="raised"] .et-card:hover { box-shadow: var(--et-shadow-xl); }
html[data-surface="raised"] .et-product-block .et-card { background: var(--et-surface); }

/* ---- data-surface="bare": no plates — section blocks and cards sit right on the page, the objects carry the volume ---- */
html[data-surface="bare"] :is(.et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card) { background: transparent; border-color: transparent; box-shadow: none; }
html[data-surface="bare"] .et-product-block { padding-inline: 0; }
html[data-surface="bare"] .et-card { background: transparent; border-color: transparent; box-shadow: none; }

/* ---- data-media: product card photo proportions ---- */
html[data-media="portrait"] .et-card__image { height: auto; aspect-ratio: 3 / 4; }
html[data-media="landscape"] .et-card__image { height: auto; aspect-ratio: 4 / 3; }
html:is([data-media="portrait"], [data-media="landscape"]) .et-card__image { border-radius: var(--et-media-radius); background: var(--et-media-box, var(--et-surface-2)); }
html[data-media="portrait"] .et-card__image img { object-fit: cover; padding: 0; }

/* ---- data-media-bg: product, brand and banner photos (mostly JPEGs on white) ----
   Media boxes: every container of such a photo. Corners always follow --et-media-radius.
   plate: the photo sits on --et-media-plate and multiply turns its white background into the plate colour,
   so the tile reads as intentional. multiply: the white dissolves into the page/card colour (light designs).
   In the visitor's dark mode every value becomes a plate (white photos would glow otherwise); dark schemes
   get a muted plate tone from the colour model. :root (not html) outranks card-variant files; variant files read --et-media-box
   for their own photo background, so the axis wins without specificity games. */
:root:is([data-media-bg="plate"], .dark-theme) { --et-media-box: var(--et-media-plate); }
:root:not(.dark-theme)[data-media-bg="multiply"] { --et-media-box: transparent; }
:is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-order-row__thumb, .et-sticky-bar__thumb, .et-testimonial__product, .et-banner__link, .et-slider__link, .et-marquee__item, .et-categories__icon, .et-subcategories__item > img) { border-radius: var(--et-media-radius); overflow: hidden; outline: var(--et-media-border-width, 0px) solid var(--et-border); outline-offset: calc(var(--et-media-border-width, 0px) * -1); box-shadow: var(--et-media-shadow, none); }
/* pictures inside rich text (product and category descriptions, information pages): the same shape token as the media */
:is(.et-product-description, .et-content__body, .et-listing__description) img { max-width: 100%; height: auto; border-radius: var(--et-media-radius); }
:root:is([data-media-bg="plate"], .dark-theme) :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-order-row__thumb, .et-sticky-bar__thumb, .et-testimonial__product, .et-banner__link, .et-slider__link, .et-marquee__item, .et-categories__icon, .et-subcategories__item > img) { background: var(--et-media-box); }
:root:is([data-media-bg="plate"], .dark-theme):not([data-media-bg="key"]) .et-card__image { padding: calc(var(--et-card-pad) * 0.5); }
:root:not(.dark-theme)[data-media-bg="multiply"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-order-row__thumb, .et-sticky-bar__thumb, .et-testimonial__product, .et-banner__link, .et-slider__link, .et-marquee__item, .et-categories__icon, .et-subcategories__item > img) { background: var(--et-media-box); }
:root:is([data-media-bg="plate"], [data-media-bg="multiply"], .dark-theme) :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-order-row__thumb, .et-sticky-bar__thumb, .et-testimonial__product, .et-banner__link, .et-slider__link, .et-marquee__item, .et-categories__icon, .et-subcategories__item > img) img { mix-blend-mode: multiply; }
/* key: SVG filter #et-white-key (common/footer.twig) turns near-white pixels transparent; works on light and dark
   pages alike, so it stays key in the visitor's dark mode. ponytail: threshold fixed in the filter matrix */
:root[data-media-bg="key"] { --et-media-box: transparent; }
:root[data-media-bg="key"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-order-row__thumb, .et-sticky-bar__thumb, .et-testimonial__product, .et-banner__link, .et-slider__link, .et-marquee__item, .et-categories__icon, .et-subcategories__item > img) img { mix-blend-mode: normal; filter: url(#et-white-key); }

/* ---- data-badge: sale / new / hit labels ---- */
html[data-badge="tag"] :is(.et-card__badge, .et-gallery__badge) {
  border-radius: 0;
  padding: 0.25em 1.1em 0.25em 0.6em;
  clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
  font-family: var(--et-font-mono);
  letter-spacing: 0.04em;
}
html[data-badge="text"] :is(.et-card__badge, .et-gallery__badge) {
  /* the badge lies on a photo (plate, white or dark image): a small backing in the page colour keeps it
     readable, and --et-sale/--et-accent-text on --et-bg is contrast-checked by the colour model */
  background: var(--et-bg);
  padding: 0.2em 0.55em;
  border-radius: var(--et-radius-xs);
  font-size: var(--et-text-xs);
  font-weight: 800;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 2);
  text-decoration: underline;
  text-decoration-thickness: calc(var(--et-border-width) * 2);
  text-underline-offset: 0.3em;
}
html[data-badge="text"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { color: var(--et-sale); }
html[data-badge="text"] :is(.et-card__badge--new, .et-gallery__badge--new) { color: var(--et-accent-text); }
html[data-badge="text"] :is(.et-card__badge--hit, .et-gallery__badge--hit) { color: var(--et-warning); }

/* ---- data-decor: page textures (body background, scrolls with the page, no extra layer) ---- */
html[data-decor] { --et-decor-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.dark-theme[data-decor] { --et-decor-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-decor="grain"] body { background-image: var(--et-decor-grain); }
html[data-decor="lines"] body {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.75rem - var(--et-border-width)), color-mix(in srgb, var(--et-border) 70%, transparent) calc(1.75rem - var(--et-border-width)), color-mix(in srgb, var(--et-border) 70%, transparent) 1.75rem);
}
html[data-decor="grid"] body {
  background-image:
    linear-gradient(to right, var(--et-border) var(--et-border-width), transparent var(--et-border-width)),
    linear-gradient(to bottom, var(--et-border) var(--et-border-width), transparent var(--et-border-width)),
    linear-gradient(to right, color-mix(in srgb, var(--et-border) 45%, transparent) var(--et-border-width), transparent var(--et-border-width)),
    linear-gradient(to bottom, color-mix(in srgb, var(--et-border) 45%, transparent) var(--et-border-width), transparent var(--et-border-width));
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
/* ---- data-decor="columns": 12 columns of the container drawn with hairlines over the whole page (4 on phones), --et-col-line ---- */
html[data-decor="columns"] body {
  --et-colbox: min(100vw - var(--et-gutter) * 2, var(--et-container) - var(--et-gutter) * 2);
  --et-colsn: 12;
  background-image: linear-gradient(to right, var(--et-col-line, color-mix(in srgb, var(--et-border) 45%, transparent)) var(--et-border-width), transparent var(--et-border-width));
  background-size: calc(var(--et-colbox) / var(--et-colsn)) 100%;
  background-position: calc(50vw - var(--et-colbox) / 2) 0;
}
@media (max-width: 767.98px) { html[data-decor="columns"] body { --et-colbox: calc(100vw - var(--et-gutter) * 0.75); --et-colsn: 4; } }
html[data-decor="paper"] body {
  background-color: color-mix(in srgb, var(--et-bg) 92%, var(--et-hot));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"), var(--et-decor-grain);
}
html.dark-theme[data-decor="paper"] body { background-color: color-mix(in srgb, var(--et-bg) 94%, var(--et-hot)); }

/* ---- colour schemes: .et-scheme-<code> on a section/header/footer; role values come from the preset
   (elbuz_color::compileSchemes → .et-scheme-<code>{--et-bg:…}), here only their use ---- */
:is(.et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft, .et-scheme-topbar) { background-color: var(--et-bg); color: var(--et-text); }

/* ---- Volume tokens: soft plastic, keys, pedestals (heading=puffy, btn=key, media_bg=pedestal, hover=squish).
   Defaults keep the stub neutral; a preset sets them in tokens / tokens_dark. Derived ones are restated on the
   colour schemes: a custom property that refers to others resolves where it is declared. ---- */
:root {
  --et-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy easing: squish, keys, catches */
  --et-depth: 4px;                                   /* thickness of a key button (btn=key) */
  --et-ped-side: 12px;                               /* side of a pedestal (media_bg=pedestal) */
  --et-shadow-rgb: 15 23 42;                         /* r g b of soft shadows, e.g. rgb(var(--et-shadow-rgb) / .3) */
  --et-hi: rgb(255 255 255 / 0.55);                  /* top highlight of volume */
  --et-lo: rgb(var(--et-shadow-rgb) / 0.08);         /* bottom shade of volume */
  --et-media-filter: drop-shadow(0 0 0 transparent); /* product cut-outs: drop-shadow(…); a no-op filter (not none) so it chains after url(#et-white-key) */
  --et-bg-glow: none;                                /* soft light spot behind the page */
  /* object / pedestal colours (a palette the preset picks; cards take one by product id) */
  --et-c-persimmon: #FF9A6C;
  --et-c-blueberry: #9497F8;
  --et-c-mint: #9FE3C8;
  --et-c-butter: #FFD978;
  --et-c-raspberry: #FF86AB;
  --et-c-lilac: #CDB9FF;
  --et-pd: var(--et-c-butter);                       /* pedestal colour of the current item */
}
html.dark-theme { --et-hi: rgb(255 255 255 / 0.12); --et-lo: rgb(0 0 0 / 0.3); }
:root, .et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft, .et-scheme-topbar {
  --et-surface-3: color-mix(in oklab, var(--et-surface-2) 78%, var(--et-text));   /* side faces of keys and plates */
  --et-accent-deep: color-mix(in oklab, var(--et-accent) 72%, black);              /* side face of an accent key */
  --et-extrude: color-mix(in oklab, var(--et-accent) 72%, var(--et-bg));            /* puffy heading extrusion */
  --et-extrude-2: color-mix(in oklab, var(--et-accent) 70%, black);
  --et-puff: inset 0 2px 0 var(--et-hi), inset 0 -8px 16px var(--et-lo);
  --et-puff-lg: inset 0 3px 0 var(--et-hi), inset 0 -18px 34px var(--et-lo);
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--et-bg-glow); pointer-events: none; }

/* ---- data-heading="puffy": inflated letters — colour extrusion + a soft drop shadow ---- */
html[data-heading="puffy"] :is(.et-section__title, .et-product-section__title, .et-listing__title, .et-product__title) {
  font-family: var(--et-font-display);
  font-weight: var(--et-heading-weight);
  text-shadow: 0 1px 0 var(--et-extrude), 0 2px 0 var(--et-extrude), 0 3px 0 var(--et-extrude), 0 4px 0 var(--et-extrude-2), 0 5px 0 var(--et-extrude-2), 0 12px 16px rgb(var(--et-shadow-rgb) / 0.28);
}
html[data-heading="puffy"] :is(.et-section__title, .et-product-section__title) { font-size: var(--et-text-5xl); line-height: var(--et-heading-leading); }
html[data-heading="puffy"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="puffy"] .et-product__title { font-size: var(--et-text-4xl); line-height: var(--et-heading-leading); letter-spacing: var(--et-heading-tracking); }
/* the subtitle reads as a small accent line with a glossy bead */
html[data-heading="puffy"] .et-section__subtitle { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-weight: 700; font-size: var(--et-text-sm); color: var(--et-accent-text); }
html[data-heading="puffy"] .et-section__subtitle::before { content: ""; flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, white 0 12%, var(--et-c-persimmon) 40%, var(--et-accent-deep)); box-shadow: 0 3px 5px -1px rgb(var(--et-shadow-rgb) / 0.45); }
html[data-heading="puffy"] .et-section--center .et-section__subtitle { justify-content: center; }

/* ---- data-btn="key" / data-btn-secondary="key": a key with a side face, presses down ---- */
html[data-btn="key"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn),
html[data-btn-secondary="key"] :is(.et-btn--outline, .et-btn--secondary) {
  --et-key-bg: var(--et-accent);
  --et-key-fg: var(--et-accent-contrast);
  --et-key-edge: var(--et-accent-deep);
  border: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--et-key-bg) 82%, white), var(--et-key-bg) 55%);
  color: var(--et-key-fg);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.45), 0 var(--et-depth) 0 var(--et-key-edge), 0 calc(var(--et-depth) + 12px) 18px -10px rgb(var(--et-shadow-rgb) / 0.5);
  transition: transform var(--et-motion-fast, 0.16s) var(--et-motion-ease, ease), box-shadow var(--et-motion-fast, 0.16s), background var(--et-motion-fast, 0.16s);
}
html[data-btn-secondary="key"] :is(.et-btn--outline, .et-btn--secondary) { --et-key-bg: var(--et-surface); --et-key-fg: var(--et-text); --et-key-edge: var(--et-surface-3); }
html[data-btn="key"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):is(:hover, :focus-visible),
html[data-btn-secondary="key"] :is(.et-btn--outline, .et-btn--secondary):is(:hover, :focus-visible) {
  background: linear-gradient(180deg, color-mix(in oklab, var(--et-key-bg) 70%, white), var(--et-key-bg) 60%);
  color: var(--et-key-fg);
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.45), 0 calc(var(--et-depth) + 2px) 0 var(--et-key-edge), 0 calc(var(--et-depth) + 18px) 22px -10px rgb(var(--et-shadow-rgb) / 0.5);
}
html[data-btn="key"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):active,
html[data-btn-secondary="key"] :is(.et-btn--outline, .et-btn--secondary):active {
  transform: translateY(var(--et-depth));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.3), 0 0 0 var(--et-key-edge), 0 4px 8px -4px rgb(var(--et-shadow-rgb) / 0.4);
  transition-duration: 60ms;
}
/* the accent colour scheme turns the accent into ink: its key gets a darker ink face */
html[data-btn="key"] .et-scheme-accent { --et-accent-deep: color-mix(in oklab, var(--et-accent) 60%, black); }

/* ---- data-media-bg="pedestal": the product (a cut-out on a transparent background) stands on a round pedestal of --et-pd.
   Ellipse top + a solid side (shadow without blur, same hue darker) + a soft floor shadow. No plate, not even in dark mode. ---- */
:root[data-media-bg="pedestal"] { --et-media-box: transparent; }
:root[data-media-bg="pedestal"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb, .et-categories__icon) { background: transparent; overflow: visible; outline: 0; }
/* the white key (#et-white-key, footer.twig) first: product photos on white also stand on the pedestal; cut-outs pass through.
   ponytail: white parts of a product touching the photo edge can go transparent too — upgrade path: real background removal */
html:root[data-media-bg="pedestal"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter); }
:root[data-media-bg="pedestal"] .et-card__image { position: relative; padding: 0; isolation: isolate; }
:root[data-media-bg="pedestal"] .et-card__image::before,
:root[data-media-bg="pedestal"] .et-gallery__slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 9%;
  right: 9%;
  bottom: calc(5% + var(--et-ped-side));
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(110% 130% at 50% 18%, color-mix(in oklab, var(--et-pd) 45%, white) 0 25%, var(--et-pd) 62%, color-mix(in oklab, var(--et-pd) 86%, black));
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.45), 0 var(--et-ped-side) 0 color-mix(in oklab, var(--et-pd) 70%, black), 0 calc(var(--et-ped-side) + 20px) 26px -12px rgb(var(--et-shadow-rgb) / 0.5);
  transition: transform var(--et-motion-medium, 0.38s) var(--et-spring);
  pointer-events: none;
}
html.dark-theme[data-media-bg="pedestal"] :is(.et-card__image, .et-gallery__slide)::before {
  box-shadow: inset 0 3px 0 rgb(255 225 180 / 0.35), 0 var(--et-ped-side) 0 color-mix(in oklab, var(--et-pd) 55%, black), 0 0 40px -6px color-mix(in oklab, var(--et-pd) 60%, transparent);
}
:root[data-media-bg="pedestal"] .et-card__image :is(.et-card__img-main, .et-card__img-alt) { object-fit: contain; object-position: 50% 100%; padding: 4% 13% 15%; background: transparent; transform-origin: 50% 100%; }
:root[data-media-bg="pedestal"] .et-gallery__main { border-radius: var(--et-radius-xl, calc(var(--et-radius) * 1.6)); background: radial-gradient(70% 60% at 50% 30%, color-mix(in oklab, var(--et-pd) 22%, var(--et-surface)), color-mix(in oklab, var(--et-pd) 48%, var(--et-surface))); box-shadow: var(--et-puff-lg), var(--et-shadow); overflow: hidden; }
:root[data-media-bg="pedestal"] .et-gallery__slide { position: relative; isolation: isolate; }
:root[data-media-bg="pedestal"] .et-gallery__slide::before { left: 16%; right: 16%; bottom: calc(8% + var(--et-ped-side)); height: 18%; z-index: 0; }
:root[data-media-bg="pedestal"] .et-gallery__image { position: relative; z-index: 1; object-fit: contain; object-position: 50% 100%; padding: 6% 14% 20%; }
:root[data-media-bg="pedestal"] .et-gallery__thumb { border-radius: var(--et-radius-sm); background: var(--et-surface); box-shadow: var(--et-puff), 0 4px 0 var(--et-surface-3); }
/* pedestal colours of a list without per-product colour: by position */
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 1) { --et-pd: var(--et-c-persimmon); }
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 2) { --et-pd: var(--et-c-blueberry); }
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 3) { --et-pd: var(--et-c-mint); }
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 4) { --et-pd: var(--et-c-butter); }
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 5) { --et-pd: var(--et-c-raspberry); }
:is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(6n + 6) { --et-pd: var(--et-c-lilac); }

/* ---- data-surface="clay": soft clay. Cards, tiles and the buy box bulge with a double shadow (light from the top left);
   fields, the quantity and the chosen option press in. --et-clay* are built from the colour of the place (--et-bg) and restated
   on every colour scheme: a property that refers to others resolves where it is declared. Strength: --et-clay-hi-a / --et-clay-lo-a
   (preset tokens / tokens_dark); the inverse scheme takes the strength of the other theme. ---- */
:root { --et-clay-hi-a: 90%; --et-clay-lo-a: 32%; }
html.dark-theme { --et-clay-hi-a: 7%; --et-clay-lo-a: 55%; }
html:not(.dark-theme) .et-scheme-inverse { --et-clay-hi-a: 8%; --et-clay-lo-a: 45%; }
html.dark-theme .et-scheme-inverse { --et-clay-hi-a: 85%; --et-clay-lo-a: 30%; }
:root, .et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft, .et-scheme-topbar {
  --et-clay-hi: color-mix(in srgb, color-mix(in oklab, var(--et-bg) 20%, white) var(--et-clay-hi-a), transparent);
  --et-clay-lo: color-mix(in srgb, color-mix(in oklab, var(--et-bg) 45%, black) var(--et-clay-lo-a), transparent);
  --et-clay: -7px -7px 16px var(--et-clay-hi), 9px 11px 24px var(--et-clay-lo), inset 1px 1px 0 var(--et-clay-hi);
  --et-clay-sm: -3px -3px 8px var(--et-clay-hi), 4px 5px 12px var(--et-clay-lo), inset 1px 1px 0 var(--et-clay-hi);
  --et-clay-in: inset 4px 4px 10px var(--et-clay-lo), inset -4px -4px 10px var(--et-clay-hi);
}
html[data-surface="clay"] :is(.et-card, .et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card, .et-tile) { border-color: transparent; background: var(--et-surface); box-shadow: var(--et-clay); }
html[data-surface="clay"] .et-card:hover { box-shadow: var(--et-clay-sm); }
html[data-surface="clay"] :is(.et-field__input, .et-search__input, .et-buybox__quantity, .et-product__option-input, .et-product__option-select, .et-product__option-textarea) { border-color: transparent; background: var(--et-surface-2); box-shadow: var(--et-clay-in); }
html[data-surface="clay"] .et-product__option-btn { border-color: transparent; background: var(--et-surface); box-shadow: var(--et-clay-sm); }
html[data-surface="clay"] .et-product__option-btn.is-active { background: var(--et-accent); color: var(--et-accent-contrast); box-shadow: var(--et-clay-in); }
html[data-surface="clay"] :is(.et-btn--outline, .et-btn--secondary) { border-color: transparent; box-shadow: var(--et-clay-sm); }
html[data-surface="clay"] :is(.et-btn, .et-card__cart-icon, .et-buybox__cart-btn):active { box-shadow: var(--et-clay-in); transform: translateY(1px) scale(0.98); }
/* menu links are text pills that press in on hover; the profile chip is a raised pill (:root outranks header variant files) */
:root[data-surface="clay"] .et-header__link { border-radius: var(--et-radius-full, 999px); transition: box-shadow var(--et-motion-fast, 0.16s), color var(--et-motion-fast, 0.16s); }
:root[data-surface="clay"] .et-header__link:is(:hover, :focus-visible) { background: transparent; box-shadow: var(--et-clay-in); }
:root[data-surface="clay"] .et-profile-chip { border-radius: var(--et-radius-full, 999px); background: var(--et-surface); box-shadow: var(--et-clay-sm); }
:root[data-surface="clay"] .et-profile-chip:hover { background: var(--et-surface); }
:root[data-surface="clay"] .et-profile-chip:active { box-shadow: var(--et-clay-in); }

/* ---- data-surface="soft": soft cards. Cards, tiles and the buy box lift on a warm three-layer shadow with a top highlight
   (--et-hi); fields, segments and the quantity press in (--et-press). Shadow colour — --et-shadow-rgb (preset tokens). ---- */
:root, .et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft {
  --et-soft-sm: inset 0 1px 0 var(--et-hi), 0 1px 2px rgb(var(--et-shadow-rgb) / 0.1), 0 4px 12px -6px rgb(var(--et-shadow-rgb) / 0.2);
  --et-soft: inset 0 1px 0 var(--et-hi), 0 2px 4px rgb(var(--et-shadow-rgb) / 0.08), 0 16px 32px -14px rgb(var(--et-shadow-rgb) / 0.32);
  --et-press: inset 0 2px 5px rgb(var(--et-shadow-rgb) / 0.14), inset 0 -1px 0 var(--et-hi);
}
html.dark-theme { --et-hi: rgb(255 255 255 / 0.05); }
html.dark-theme, html.dark-theme :is(.et-scheme-main, .et-scheme-accent, .et-scheme-soft) {
  --et-soft-sm: inset 0 1px 0 var(--et-hi), 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 14px -8px rgb(0 0 0 / 0.6);
  --et-soft: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -16px rgb(0 0 0 / 0.75);
  --et-press: inset 0 2px 5px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.04);
}
html[data-surface="soft"] :is(.et-card, .et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card, .et-tile) { border-color: transparent; background: var(--et-surface); box-shadow: var(--et-soft-sm); }
html[data-surface="soft"] :is(.et-card, .et-tile, .et-blog-card):hover { box-shadow: var(--et-soft); }
html[data-surface="soft"] :is(.et-field__input, .et-search__input, .et-buybox__quantity, .et-product__option-input, .et-product__option-select, .et-product__option-textarea, .et-calc__seg, .et-calc__stepper) { border-color: transparent; background-color: var(--et-surface); box-shadow: var(--et-press); }
html[data-surface="soft"] :is(.et-btn, .et-card__cart-icon, .et-buybox__cart-btn):active { box-shadow: var(--et-press); transform: translateY(1px); }
/* ---- data-surface="glass": frosted glass. Cards, tiles, the buy box and fields are translucent panels over a page backdrop of
   two soft colour pools (--et-glass-tint-1/-2, default --et-glow-1/-2): blur + saturation, a thin light edge and a top highlight.
   Strength: --et-glass-a (how much of the surface colour stays), --et-glass-blur, --et-glass-sat (preset tokens / tokens_dark).
   Without backdrop-filter or with prefers-reduced-transparency the panels are opaque. ---- */
:root { --et-glass-a: 62%; --et-glass-blur: 18px; --et-glass-sat: 1.35; --et-glass-edge-a: 55%; --et-glass-hi-a: 70%; }
html.dark-theme { --et-glass-a: 52%; --et-glass-edge-a: 12%; --et-glass-hi-a: 14%; }
:root, .et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft {
  --et-glass-bg: color-mix(in srgb, var(--et-surface) var(--et-glass-a), transparent);
  --et-glass-edge: color-mix(in srgb, white var(--et-glass-edge-a), transparent);
  --et-glass-hi: inset 0 1px 0 color-mix(in srgb, white var(--et-glass-hi-a), transparent);
  --et-glass-shadow: var(--et-glass-hi), 0 24px 48px -28px rgb(var(--et-shadow-rgb, 0 0 0) / 0.55);
}
html[data-surface="glass"] body {
  background-color: var(--et-bg);
  background-image:
    radial-gradient(60vmax 45vmax at 85% 8%, color-mix(in srgb, var(--et-glass-tint-1, var(--et-glow-1, var(--et-accent))) 26%, transparent), transparent 70%),
    radial-gradient(55vmax 40vmax at 8% 62%, color-mix(in srgb, var(--et-glass-tint-2, var(--et-glow-2, var(--et-accent))) 20%, transparent), transparent 70%);
  background-attachment: fixed;
}
html[data-surface="glass"] :is(.et-card, .et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card, .et-tile) {
  border-color: var(--et-glass-edge);
  background: var(--et-glass-bg);
  box-shadow: var(--et-glass-shadow);
  -webkit-backdrop-filter: blur(var(--et-glass-blur)) saturate(var(--et-glass-sat));
  backdrop-filter: blur(var(--et-glass-blur)) saturate(var(--et-glass-sat));
}
html[data-surface="glass"] :is(.et-card, .et-tile, .et-blog-card):hover { border-color: color-mix(in srgb, var(--et-accent) 45%, var(--et-glass-edge)); }
html[data-surface="glass"] :is(.et-field__input, .et-search__input, .et-buybox__quantity, .et-product__option-input, .et-product__option-select, .et-product__option-textarea, .et-calc__seg, .et-calc__stepper) {
  border-color: var(--et-glass-edge);
  background-color: color-mix(in srgb, var(--et-surface-2) 70%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-surface="glass"] :is(.et-card, .et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card, .et-tile) { background: var(--et-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-surface="glass"] :is(.et-card, .et-product-block, .et-category-layout__sidebar, .et-buybox, .et-advantage, .et-testimonial, .et-blog-card, .et-why-card, .et-tile) { background: var(--et-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- data-media-bg="blob": the product (best a cut-out) on a pastel drop of its colour --et-pd (by product id / position),
   a soft highlight on top; the drop changes form on card hover. No plate and no multiply, also in the dark theme
   (the preset darkens the --et-c-* palette there). ---- */
:root[data-media-bg="blob"] { --et-media-box: transparent; --et-blob-light: rgb(255 255 255 / 0.75); }
html.dark-theme[data-media-bg="blob"] { --et-blob-light: rgb(255 226 240 / 0.14); }
:root[data-media-bg="blob"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb, .et-categories__icon) {
  outline: 0;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 34% 26%, var(--et-blob-light), transparent 52%), var(--et-pd, var(--et-c-butter));
  transition: border-radius var(--et-motion-slow, 0.7s) var(--et-spring);
}
:root[data-media-bg="blob"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter); }
:root[data-media-bg="blob"] .et-card__image :is(.et-card__img-main, .et-card__img-alt) { object-fit: contain; padding: 10%; background: transparent; }
/* the drop's rounded corners would cut the card tools and badges in half: photos sit inside with padding, so nothing needs clipping */
:root[data-media-bg="blob"] .et-card__image { overflow: visible; }
:root[data-media-bg="blob"] .et-gallery__image { object-fit: contain; padding: 8%; }
@media (prefers-reduced-motion: no-preference) {
  html[data-media-bg="blob"]:not([data-motion="none"]) .et-card:hover .et-card__image { border-radius: 54% 46% 56% 44% / 44% 56% 46% 54%; }
}

/* ---- data-media-bg="ink": the product (best a cut-out) lies on a sheet of printing ink — the colour of the item --et-pd (by position),
   tilted a little, with uneven edges and a "missed print" of light dots (--et-ink-dots); the ink sheet multiplies with the page in the
   light theme and glows (screen) in the dark one. The tilt alternates from card to card. ---- */
:root[data-media-bg="ink"] { --et-media-box: transparent; --et-ink-dots: radial-gradient(rgb(255 255 255 / 0.3) 0.9px, transparent 1.3px) 0 0 / 4px 4px; --et-ink-blend: multiply; --et-ink-tilt: -2.5deg; }
html.dark-theme[data-media-bg="ink"] { --et-ink-dots: radial-gradient(rgb(0 0 0 / 0.28) 0.9px, transparent 1.3px) 0 0 / 4px 4px; --et-ink-blend: screen; }
:root[data-media-bg="ink"] :is(.et-section__grid, .et-products-grid, .et-listing__grid, [data-et-listing]) > :nth-child(even) { --et-ink-tilt: 2deg; }
:root[data-media-bg="ink"] :is(.et-card__image, .et-gallery__main, .et-categories__icon) { position: relative; isolation: isolate; outline: 0; background: transparent; overflow: visible; }
:root[data-media-bg="ink"] :is(.et-card__image, .et-gallery__main, .et-categories__icon)::before {
  content: ""; position: absolute; inset: 7% 6% 5% 7%; z-index: -1; pointer-events: none;
  background: var(--et-ink-dots), var(--et-pd, var(--et-accent)); mix-blend-mode: var(--et-ink-blend);
  clip-path: polygon(1% 3%, 22% 0, 51% 2%, 78% 0, 99% 2%, 100% 31%, 98% 62%, 100% 97%, 74% 100%, 46% 98%, 19% 100%, 0 98%, 2% 66%, 0 35%);
  rotate: var(--et-ink-tilt); transition: rotate var(--et-motion-medium, 0.3s) var(--et-motion-ease, ease), translate var(--et-motion-medium, 0.3s) var(--et-motion-ease, ease);
}
:root[data-media-bg="ink"] :is(.et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb, .et-compare__image) { background: var(--et-ink-dots), color-mix(in oklab, var(--et-pd, var(--et-accent)) 55%, var(--et-surface)); }
html:root[data-media-bg="ink"] :is(.et-card__image, .et-gallery__main, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter, none); }
:root[data-media-bg="ink"] .et-card__image :is(.et-card__img-main, .et-card__img-alt) { object-fit: contain; padding: 9%; background: transparent; }
:root[data-media-bg="ink"] .et-gallery__image { object-fit: contain; padding: 8%; }
@media (prefers-reduced-motion: no-preference) {
  html[data-media-bg="ink"]:not([data-motion="none"]) .et-card:hover .et-card__image::before { rotate: 0deg; translate: 3px -3px; }
}

/* text marks (search hits, highlighted actives): the accent fill with its own contrast colour — readable on a dark accent too */
mark { padding: 0 0.15em; border-radius: var(--et-radius-xs, 4px); background: var(--et-accent); color: var(--et-accent-contrast); }

/* ---- Shopper profile (preset profile, js/elbuz_profile.js): header chip, "fits" badge on cards ---- */
.et-profile-chip { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 1rem 0.3rem 0.3rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); color: var(--et-text); text-decoration: none; box-shadow: inset 0 2px 5px var(--et-lo); transition: background var(--et-motion-fast, 0.16s); }
.et-profile-chip:hover { background: var(--et-surface-3); color: var(--et-text); }
.et-profile-chip img { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: var(--et-radius-xs); background: var(--et-c-butter); padding: 2px; box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5), 0 3px 0 color-mix(in oklab, var(--et-c-butter) 60%, black); }
.et-profile-chip.is-set img { background: var(--et-c-mint); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5), 0 3px 0 color-mix(in oklab, var(--et-c-mint) 60%, black); }
.et-profile-chip span { display: grid; line-height: 1.15; text-align: start; }
.et-profile-chip small { font-size: var(--et-text-xs); color: var(--et-text-muted); font-weight: 600; }
.et-profile-chip b { font-size: var(--et-text-sm); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* chip_form pill: one line — the picture or the icon (profile.icon) and the choice */
.et-profile-chip__icon { flex: none; font-size: 1.125rem; color: var(--et-accent-text, var(--et-accent)); }
.et-profile-chip--pill { gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0.875rem; border-radius: var(--et-radius-full, 999px); }
.et-profile-chip--pill:has(img) { padding-left: 0.25rem; }
.et-profile-chip--pill img { border-radius: 50%; }
.et-profile-chip--pill b { font-size: var(--et-text-md); }
.et-card__badge--fit { background: var(--et-c-mint); color: color-mix(in oklab, var(--et-c-mint) 22%, black); }
.et-card__badge--fit[hidden] { display: none; }
@media (max-width: 767.98px) { .et-profile-chip span { display: none; } .et-profile-chip { padding: 0.25rem; } .et-profile-chip--pill:not(:has(img)) { justify-content: center; width: 2.75rem; padding: 0; } }
.et-profile-filter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-chip-radius, var(--et-radius-full)); background: var(--et-surface); color: var(--et-text); font: inherit; font-size: var(--et-text-sm); font-weight: 600; cursor: pointer; }
.et-profile-filter[hidden] { display: none; }
.et-profile-filter[aria-pressed="true"] { background: var(--et-c-mint); border-color: transparent; color: color-mix(in oklab, var(--et-c-mint) 22%, black); }
/* "fits my profile" on: the listing keeps only fitting cards of this page */
html.et-profile-only .et-listing__grid > :not(:has(.et-card.is-fit)) { display: none; }
/* preset logo.dark: the light version of the logo for the visitor dark theme (header _logo.twig prints both) */
.et-logo-dark { display: none; }
html.dark-theme .et-logo-dark { display: block; }
html.dark-theme .et-logo-light { display: none; }
/* day / night pictures of a section (hero bento, countdown…): .et-for-light shows in the light theme, .et-for-dark in the dark one */
.et-for-dark { display: none; }
html.dark-theme .et-for-dark { display: block; }
html.dark-theme .et-for-light { display: none; }
/* two states of a page (hero daypart switch → html[data-daypart], js/blocks/hero/daypart.js): data-daypart-show="am|pm" shows only in its state; before the script — the first state */
html[data-daypart="am"] [data-daypart-show="pm"], html[data-daypart="pm"] [data-daypart-show="am"], html:not([data-daypart]) [data-daypart-show="pm"] { display: none !important; }

/* ---- Panel tokens and bento tiles (heading=indexed, media_bg=grid, badge=led, hover=spotlight; tile variants:
   header/tiles, hero/bento, categories/directory, testimonials/mosaic, quiz/tiles, bundle, compare…).
   Defaults keep every preset sane; a preset sets them in tokens / tokens_dark. Derived ones are restated on the colour
   schemes: a custom property that refers to others resolves where it is declared. ---- */
:root {
  --et-seam: 0.5rem;                                   /* gap between tiles of a bento grid */
  --et-tile-pad: clamp(1.1rem, 1.8vw, 1.75rem);
  --et-led: var(--et-accent);                          /* status light: new / action */
  --et-pre: var(--et-warning);                         /* status: pre-order, coming soon */
  --et-sale-bg: var(--et-sale);                        /* status: price dropped, sale */
  --et-display-axes: normal;                           /* font-variation-settings of headings, e.g. "SHRP" 100 */
  --et-text-axes: normal;                              /* … of body text */
}
:root, .et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft {
  --et-grid-dot: color-mix(in srgb, var(--et-text) 11%, transparent);
  --et-spot: color-mix(in srgb, var(--et-accent) 16%, transparent);
  --et-led-glow: 0 0 0 3px color-mix(in oklab, var(--led, var(--et-led)) 26%, transparent);
}
html.dark-theme { --et-led-glow: 0 0 10px 1px color-mix(in oklab, var(--led, var(--et-led)) 70%, transparent); }
body { font-variation-settings: var(--et-text-axes); }
:is(h1, h2, h3, h4, h5, h6, .et-section__title, .et-product-section__title) { font-variation-settings: var(--et-display-axes); }

.et-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--et-seam); }
.et-tile { position: relative; min-width: 0; overflow: hidden; padding: var(--et-tile-pad); border-radius: var(--et-card-radius, var(--et-radius)); background: var(--et-surface); color: var(--et-text); }
a.et-tile { display: block; text-decoration: none; }
a.et-tile:hover { color: var(--et-text); }
html[data-surface="outlined"] .et-tile { box-shadow: inset 0 0 0 var(--et-border-width) var(--et-border); }
html[data-surface="raised"] .et-tile { box-shadow: var(--et-shadow); }
html[data-surface="raised"] .et-bento { gap: calc(var(--et-seam) * 2); }
/* scheme on a tile: the scheme paints the tile, not a band (schemes set --et-bg; the tile reads --et-surface) */
.et-tile:is(.et-scheme-inverse, .et-scheme-accent, .et-scheme-soft) { background: var(--et-surface); }
/* a section whose scheme paints its tiles keeps the heading in the page colours: the header carries .et-scheme-main */
:is(.et-section__header, .et-section__subtitle).et-scheme-main { background: transparent; }
/* tile coordinate: a mono key (A1, B3…) + label, optional status light */
.et-tile__id { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font: 500 var(--et-text-xs)/1.2 var(--et-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--et-text-muted); }
.et-tile__id > b { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.25rem; padding: 0 0.3rem; border-radius: var(--et-radius-xs); background: var(--et-surface-2); color: var(--et-text); font-weight: 700; letter-spacing: 0; }
.et-led { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--led, var(--et-led)); box-shadow: var(--et-led-glow); vertical-align: middle; }
.et-led--ok { --led: var(--et-success); }
.et-led--pre { --led: var(--et-pre); }
.et-led--sale { --led: var(--et-sale-bg); }
html:not([data-motion="none"]) .et-led--blink { animation: et-led-blink 1.6s steps(2, jump-none) infinite; }
@keyframes et-led-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .et-led--blink { animation: none; } }
/* live widgets (js/elbuz_widgets.js): countdown and price sparkline */
.et-countdown { display: flex; gap: 0.375rem; font-family: var(--et-font-mono); }
.et-countdown > span { display: grid; justify-items: center; min-width: 3.25rem; padding: 0.5rem 0.25rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
.et-countdown b { font-size: var(--et-text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.et-countdown small { margin-top: 0.25rem; font-size: var(--et-text-xs); color: var(--et-text-muted); text-transform: uppercase; }
.et-spark { display: block; width: 100%; height: 3.5rem; overflow: visible; }
.et-spark__line { fill: none; stroke: var(--et-text); stroke-width: 2; stroke-linejoin: round; }
.et-spark__area { fill: color-mix(in srgb, var(--et-accent) 28%, transparent); stroke: none; }
.et-spark__dot { fill: var(--et-accent); stroke: var(--et-text); stroke-width: 1.5; }
/* battery gauge: --v 0…1 (hero stat tile, calculator runtime) */
.et-battery { position: relative; display: block; height: 1.75rem; margin-top: auto; padding: 3px; border: 2px solid var(--et-text); border-radius: var(--et-radius-xs); }
.et-battery::after { content: ""; position: absolute; right: -7px; top: 7px; width: 4px; height: 10px; border-radius: 0 2px 2px 0; background: var(--et-text); }
.et-battery i { display: block; width: calc(var(--v, 0.5) * 100%); height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--et-text) 0 10px, transparent 10px 13px); transition: width var(--et-motion-slow, 0.6s) var(--et-motion-ease, ease); }

/* ---- data-heading="indexed": a letter key before the title (section order), meta line in mono after // ---- */
html[data-heading="indexed"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section; display: flex; align-items: center; gap: 0.55em; }
html[data-heading="indexed"] :is(.et-section__title, .et-product-section__title)::before {
  content: counter(et-section, upper-alpha); flex: none; display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 0.35em;
  border-radius: var(--et-radius-xs); background: var(--et-text); color: var(--et-bg); font: 700 0.5em/1 var(--et-font-mono); letter-spacing: 0;
}
html[data-heading="indexed"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="indexed"] .et-section__subtitle { font-family: var(--et-font-mono); font-size: var(--et-text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--et-text-muted); }
html[data-heading="indexed"] .et-section__subtitle::before { content: "// "; }

/* ---- data-heading="section-mark" (Swiss index): a 2 px rule over the section header, "§ 01" (section counter) in the first column,
   the title from the second, the "all" link on the right; the subtitle under the title. One column on phones. ---- */
html[data-heading="section-mark"] .et-section__header {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); align-items: start; gap: 0.375rem 1rem;
  padding-top: 0.875rem; border-top: calc(var(--et-border-width) * 2) solid var(--et-border-strong);
}
html[data-heading="section-mark"] .et-section__header::before {
  counter-increment: et-section; content: "§ " counter(et-section, decimal-leading-zero);
  font: 500 var(--et-text-sm)/1.6 var(--et-font-mono); color: var(--et-accent-text);
}
html[data-heading="section-mark"] .et-section__header > :is(.et-section__title, .et-product-section__title) { grid-column: 2; }
html[data-heading="section-mark"] .et-section__header > :not(:is(.et-section__title, .et-product-section__title)) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
html[data-heading="section-mark"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="section-mark"] .et-section__header + .et-section__subtitle { margin-left: calc((100% - 2rem) / 6 + 1rem); margin-top: calc(var(--space-lg) * -0.75); font-family: var(--et-font-mono); font-size: var(--et-text-sm); color: var(--et-text-muted); }
@media (max-width: 767.98px) {
  html[data-heading="section-mark"] .et-section__header { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-heading="section-mark"] .et-section__header::before { grid-column: 1 / -1; }
  html[data-heading="section-mark"] .et-section__header > :is(.et-section__title, .et-product-section__title) { grid-column: 1; }
  html[data-heading="section-mark"] .et-section__header > :not(:is(.et-section__title, .et-product-section__title)) { grid-column: 2; grid-row: 2; }
  html[data-heading="section-mark"] .et-section__header + .et-section__subtitle { margin-left: 0; }
}

/* ---- data-heading="oversize" (Exaggerated Minimalism, prototype 21): a hairline over the header, "(01)" in mono (section
   counter) before a giant tight title; the size grows with the screen up to --et-text-5xl. ---- */
html[data-heading="oversize"] :is(.et-section__header, .et-product-section__head) { align-items: flex-start; padding-top: 1rem; border-top: var(--et-border-width) solid var(--et-border-strong); }
html[data-heading="oversize"] :is(.et-section__title, .et-product-section__title) {
  counter-increment: et-section; display: flex; align-items: flex-start; gap: 0 1.25rem;
  font-size: clamp(var(--et-text-3xl), 1rem + 4.4vw, var(--et-text-5xl)); line-height: var(--et-heading-leading, 0.95);
}
html[data-heading="oversize"] :is(.et-section__title, .et-product-section__title)::before {
  content: "(" counter(et-section, decimal-leading-zero) ")"; flex: none; min-width: 4.5em; padding-top: 0.6em;
  font: 500 var(--et-text-xs)/1.4 var(--et-font-mono); letter-spacing: 0; color: var(--et-text-muted);
}
html[data-heading="oversize"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="oversize"] .et-section__subtitle { padding-left: calc(4.5 * var(--et-text-xs) + 1.25rem); font-family: var(--et-font-mono); font-size: var(--et-text-sm); color: var(--et-text-muted); }
@media (max-width: 575.98px) {
  html[data-heading="oversize"] :is(.et-section__title, .et-product-section__title) { flex-direction: column; gap: 0.5rem; }
  html[data-heading="oversize"] :is(.et-section__title, .et-product-section__title)::before { padding-top: 0; }
  html[data-heading="oversize"] .et-section__subtitle { padding-left: 0; }
}

/* ---- data-heading="degree": a turning page — a thin dash and the section number in rotation degrees above the title (000°, 045°,
   090°…; the counter steps by 45, starts at −45 so the first section is 000°). Language-free. ---- */
@counter-style et-deg { system: extends decimal; pad: 3 "0"; }
html[data-heading="degree"] body { counter-reset: et-section -45; }
html[data-heading="degree"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section 45; }
html[data-heading="degree"] :is(.et-section__title, .et-product-section__title)::before {
  content: counter(et-section, et-deg) "°"; display: block; margin-bottom: 0.75rem; padding-left: 3.5rem;
  font: 500 var(--et-text-xs)/1 var(--et-font); letter-spacing: 0.16em; color: var(--et-text-muted); font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 50% / 2.5rem 1px;
}
html[data-heading="degree"] .et-section--center :is(.et-section__title, .et-product-section__title)::before { padding-inline: 0; background: none; }

/* ---- data-media-bg="studio": a photo studio — a cyclorama (the wall --et-cyc-wall turns into the floor --et-cyc-floor, a light spot
   --et-cyc-spot) and a soft contact shadow --et-contact under the object. Best with cut-out photos; near-white is keyed out. ---- */
:root[data-media-bg="studio"] { --et-media-box: transparent; }
:root[data-media-bg="studio"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-categories__icon, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb) {
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, var(--et-cyc-spot, color-mix(in oklab, var(--et-surface) 70%, transparent)), transparent 70%),
    linear-gradient(180deg, var(--et-cyc-wall, var(--et-surface)) 0 58%, var(--et-cyc-floor, var(--et-surface-2)) 100%);
}
:root[data-media-bg="studio"] :is(.et-card__image, .et-gallery__slide)::before {
  content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 9%; height: 7%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--et-contact, rgb(var(--et-shadow-rgb, 0 0 0) / 0.3)), transparent); filter: blur(4px);
}
:root[data-media-bg="studio"] .et-gallery__slide { position: relative; isolation: isolate; }
html:root[data-media-bg="studio"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-categories__icon, .et-cart-item__image, .et-cart-row__image, .et-sticky-bar__thumb) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-obj-filter, var(--et-media-filter, none)); }

/* ---- linen weave (--et-tex-linen): a fine woven texture from two hairline gradients, colour --et-tex-rgb. Used by
   data-decor="linen" (page and coloured sections), data-media-bg="linen" (photo plate) and hero tag (the plate). ---- */
:root { --et-tex-rgb: 90 66 40; --et-tex-linen: repeating-linear-gradient(0deg, rgb(var(--et-tex-rgb) / 0.045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(var(--et-tex-rgb) / 0.035) 0 1px, transparent 1px 4px); }
html.dark-theme { --et-tex-rgb: 240 220 190; }
html[data-decor="linen"] body, html[data-decor="linen"] :is(.et-scheme-soft, .et-scheme-inverse, .et-scheme-accent) { background-image: var(--et-tex-linen); }
:root[data-media-bg="linen"] { --et-media-box: var(--et-surface-2); }
:root[data-media-bg="linen"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon) {
  background-color: var(--et-media-box); background-image: var(--et-tex-linen);
}
html:root[data-media-bg="linen"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter, none); }

/* ---- data-heading="stitch": a dashed accent thread under the section header, like a seam (--et-stitch) ---- */
html[data-heading="stitch"] :is(.et-section__header, .et-product-section__head) {
  padding-bottom: 1rem;
  background: linear-gradient(90deg, var(--et-stitch, color-mix(in oklab, var(--et-accent) 70%, var(--et-surface))) 0 9px, transparent 9px 15px) left bottom / 15px 2px repeat-x;
}

/* ---- data-heading="sign": a thick warm vertical bar before the section title, like a road sign (--et-warm, else the accent) ---- */
html[data-heading="sign"] :is(.et-section__title, .et-product-section__title) { display: flex; align-items: stretch; gap: 0.5em; }
html[data-heading="sign"] :is(.et-section__title, .et-product-section__title)::before { content: ""; flex: none; width: 0.3em; min-height: 1em; border-radius: 3px; background: var(--et-warm, var(--et-accent)); }

/* ---- data-heading="blaze": a trail blaze — a square of the accent with a frame in the text colour before the section title ---- */
html[data-heading="blaze"] :is(.et-section__title, .et-product-section__title) { display: flex; align-items: center; gap: 0.55em; }
html[data-heading="blaze"] :is(.et-section__title, .et-product-section__title)::before { content: ""; flex: none; width: 0.62em; aspect-ratio: 1; background: var(--et-accent); box-shadow: 0 0 0 2px var(--et-text); }
html[data-heading="blaze"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="blaze"] .et-section--center :is(.et-section__title, .et-product-section__title) { justify-content: center; }

/* ---- data-decor="contour": map contour lines on coloured sections — light strokes on inverse, dark on accent and soft ---- */
:root { --et-tex-contour-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1.3'%3E%3Cpath d='M128 34c46 2 86 28 84 72s-38 82-88 80-92-30-90-72 48-82 94-80z'/%3E%3Cpath d='M128 58c32 1 60 20 59 50s-27 57-61 55-63-21-62-50 32-56 64-55z'/%3E%3Cpath d='M127 82c18 1 34 11 33 28s-15 32-35 31-35-12-34-28 18-32 36-31z'/%3E%3Cpath d='M126 104c6 0 11 4 11 9s-5 10-12 10-11-4-11-9 6-10 12-10z'/%3E%3Cpath d='M-10 222c44-18 88-8 130 4s92 16 150-8'/%3E%3Cpath d='M-10 246c50-14 96-2 136 8s88 8 144-12'/%3E%3Cpath d='M-10 8c36 8 60 26 58 56s-26 46-58 50'/%3E%3Cpath d='M270 120c-30 6-48 28-44 58s28 44 44 46'/%3E%3C/svg%3E"); --et-tex-contour-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23000' stroke-opacity='.10' stroke-width='1.3'%3E%3Cpath d='M128 34c46 2 86 28 84 72s-38 82-88 80-92-30-90-72 48-82 94-80z'/%3E%3Cpath d='M128 58c32 1 60 20 59 50s-27 57-61 55-63-21-62-50 32-56 64-55z'/%3E%3Cpath d='M127 82c18 1 34 11 33 28s-15 32-35 31-35-12-34-28 18-32 36-31z'/%3E%3Cpath d='M126 104c6 0 11 4 11 9s-5 10-12 10-11-4-11-9 6-10 12-10z'/%3E%3Cpath d='M-10 222c44-18 88-8 130 4s92 16 150-8'/%3E%3Cpath d='M-10 246c50-14 96-2 136 8s88 8 144-12'/%3E%3Cpath d='M-10 8c36 8 60 26 58 56s-26 46-58 50'/%3E%3Cpath d='M270 120c-30 6-48 28-44 58s28 44 44 46'/%3E%3C/svg%3E"); }
html[data-decor="contour"] .et-scheme-inverse { background-image: var(--et-tex-contour-w); background-size: 260px 260px; }
html[data-decor="contour"] :is(.et-scheme-accent, .et-scheme-soft) { background-image: var(--et-tex-contour-k); background-size: 260px 260px; }

/* ---- data-btn="slant": the whole button slanted like italic headings (skewX), a hard offset shadow on hover; focus ring not clipped ---- */
html[data-btn="slant"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn) { transform: skewX(-10deg); border-radius: 3px; padding-inline: 1.6em; font-weight: 700; transition: box-shadow var(--et-motion-fast, 0.16s), transform var(--et-motion-fast, 0.16s); }
html[data-btn="slant"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):is(:hover, :focus-visible) { box-shadow: -4px 4px 0 var(--et-text); }
html[data-btn="slant"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):active { transform: skewX(-10deg) translateY(1px); }
html[data-btn="slant"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html[data-btn="slant"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn) { transition: none; } }

/* ---- data-heading="horizon": a gradient horizon line under the section title (--et-heading-line, else accent → transparent) ---- */
html[data-heading="horizon"] :is(.et-section__title, .et-product-section__title) { padding-bottom: 0.45em; border-bottom: 2px solid; border-image: var(--et-heading-line, linear-gradient(90deg, var(--et-accent), transparent 85%)) 1; }
html[data-heading="horizon"] .et-section--center :is(.et-section__title, .et-product-section__title) { border-image: var(--et-heading-line-center, linear-gradient(90deg, transparent, var(--et-accent), transparent)) 1; }

/* ---- data-heading="elevation": a height mark above the title — "▲ 1100", "▲ 1450"… climbing by 350 from section to section, and a dashed
   rule (the page is a climb). Language-free: a figure and a sign, no units. ---- */
html[data-heading="elevation"] body { counter-reset: et-elev 750; }
html[data-heading="elevation"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-elev 350; }
html[data-heading="elevation"] :is(.et-section__title, .et-product-section__title)::before {
  content: "▲ " counter(et-elev); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem;
  font: 600 var(--et-text-xs)/1 var(--et-font-mono, var(--et-font)); letter-spacing: 0.12em; color: var(--et-accent-text, var(--et-accent)); font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(90deg, currentColor 50%, transparent 0) repeat-x 5.5rem 50% / 8px 1px;
}
html[data-heading="elevation"] .et-section--center :is(.et-section__title, .et-product-section__title)::before { justify-content: center; background: none; }

/* ---- data-btn="stitch": a patch — the fill with a dashed stitch 6 px inside, a soft fabric relief; pressed in on click (--et-press,
   back on --et-spring). The focus ring replaces the stitch. ---- */
html[data-btn="stitch"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -3px 0 rgb(0 0 0 / 0.14), 0 6px 14px -8px rgb(var(--et-shadow-rgb) / 0.7);
  outline: 1.5px dashed color-mix(in oklab, var(--et-accent-contrast) 55%, transparent); outline-offset: -6px;
  transition: transform var(--et-motion-base, 0.24s) var(--et-spring, ease), box-shadow var(--et-motion-fast, 0.16s), background-color var(--et-motion-fast, 0.16s);
}
html[data-btn="stitch"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):active { transform: var(--et-press, scale(0.97)); transition-duration: 90ms; }
html[data-btn="stitch"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):focus-visible { outline: 2.5px solid var(--et-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html[data-btn="stitch"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):active { transform: none; } }
html[data-motion="none"][data-btn="stitch"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):active { transform: none; }

/* ---- data-decor="knit": knitted stockinette — columns of V loops on coloured sections: light on inverse and accent, dark on soft ---- */
:root { --et-tex-knit-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M2.5 2c.6 6 3.4 11 7.5 15M17.5 2c-.6 6-3.4 11-7.5 15' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); --et-tex-knit-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M2.5 2c.6 6 3.4 11 7.5 15M17.5 2c-.6 6-3.4 11-7.5 15' fill='none' stroke='%23542f1a' stroke-opacity='.08' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-decor="knit"] :is(.et-scheme-inverse, .et-scheme-accent) { background-image: var(--et-tex-knit-w); background-size: 20px 22px; }
html[data-decor="knit"] .et-scheme-soft { background-image: var(--et-tex-knit-k); background-size: 20px 22px; }

/* ---- data-heading="roman": a book chapter — the section number as an italic Roman numeral "I.", "II." before the title (section order),
   in the accent; on phones on its own line. Language-free. ---- */
html[data-heading="roman"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section; }
html[data-heading="roman"] :is(.et-section__title, .et-product-section__title)::before {
  content: counter(et-section, upper-roman) "."; display: inline-block; min-width: 2.2em; margin-right: 0.35em;
  font: italic 500 0.82em/1 var(--et-font-display); color: var(--et-accent-text);
}
html[data-heading="roman"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
@media (max-width: 575.98px) { html[data-heading="roman"] :is(.et-section__title, .et-product-section__title)::before { display: block; margin: 0 0 0.25rem; } }

/* ---- data-heading="burner": the rings of a hob burner before the section title — two rings of the text colour, the centre glows in
   the accent. Language-free. ---- */
html[data-heading="burner"] :is(.et-section__title, .et-product-section__title)::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.12em; border-radius: 50%;
  background:
    radial-gradient(circle, var(--et-accent) 0 10%, transparent 12%),
    radial-gradient(circle, transparent 0 22%, currentColor 24% 28%, transparent 30%),
    radial-gradient(circle, transparent 0 39%, currentColor 41% 45%, transparent 47%);
  opacity: 0.9;
}

/* ---- data-heading="code": a stock label — a 2 px rule over the section header and the section number "01" in mono on a plate of the
   text colour above the title, like a shelf code in a warehouse. ---- */
html[data-heading="code"] .et-section__header { padding-top: 0.75rem; border-top: calc(var(--et-border-width) * 2) solid var(--et-border-strong); }
html[data-heading="code"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section; }
html[data-heading="code"] :is(.et-section__title, .et-product-section__title)::before {
  content: counter(et-section, decimal-leading-zero); display: table; margin-bottom: 0.45em; padding: 0.3em 0.55em;
  background: var(--et-text); color: var(--et-bg); font: 600 max(0.75rem, 0.32em)/1 var(--et-font-mono); letter-spacing: 0.05em;
}

/* ---- data-heading="scope": an oscilloscope trace after the section title to the end of the line (a wave mask repeated along x,
   --et-text-muted); on hover of the section the trace runs. No motion — a still trace. ---- */
html[data-heading="scope"] :is(.et-section__title, .et-product-section__title) { flex: 1 1 auto; display: flex; align-items: center; gap: 0.6em; min-width: 0; }
html[data-heading="scope"] :is(.et-section__title, .et-product-section__title)::after {
  content: ""; flex: 1 1 3rem; min-width: 3rem; height: 0.7em; background: var(--et-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Cpath d='M0 10 Q4 1 8 10 T16 10 Q20 4 24 10 T32 10 Q36 0 40 10 T48 10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 48px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Cpath d='M0 10 Q4 1 8 10 T16 10 Q20 4 24 10 T32 10 Q36 0 40 10 T48 10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 48px 100% repeat-x;
}
html[data-heading="scope"]:not([data-motion="none"]) :is(.et-section, .et-product-section):hover :is(.et-section__title, .et-product-section__title)::after { animation: et-scope 1.2s linear infinite; }
@keyframes et-scope { to { -webkit-mask-position: 48px 50%; mask-position: 48px 50%; } }
@media (prefers-reduced-motion: reduce) { html[data-heading="scope"] :is(.et-section__title, .et-product-section__title)::after { animation: none !important; } }

/* ---- data-heading="dimension": a drawing's dimension line above the section title — a hairline across the title width with end
   ticks, like a size on a blueprint. The title takes its text width (fit-content) so the line measures the words. ---- */
html[data-heading="dimension"] :is(.et-section__title, .et-product-section__title) { width: fit-content; max-width: 100%; }
html[data-heading="dimension"] :is(.et-section__title, .et-product-section__title)::before {
  content: ""; display: block; height: 0.55em; margin-bottom: 0.3em; border-inline: 1px solid currentColor; opacity: 0.7;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

/* ---- data-heading="path": a file path like in an IDE explorer — "~/03" in mono, muted, above the section title (the section number),
   a hairline under the section header. Fits tool-like designs: wholesale, tech, software. ---- */
html[data-heading="path"] .et-section__header { padding-bottom: 0.6rem; border-bottom: var(--et-border-width) solid var(--et-border); }
html[data-heading="path"] .et-product-section__title { padding-bottom: 0.45em; border-bottom: var(--et-border-width) solid var(--et-border); }
html[data-heading="path"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section; }
html[data-heading="path"] :is(.et-section__title, .et-product-section__title)::before {
  content: "~/" counter(et-section, decimal-leading-zero); display: block; margin-bottom: 0.4em;
  font: 500 max(0.75rem, 0.34em)/1.3 var(--et-font-mono); color: var(--et-text-muted); letter-spacing: 0;
}

/* ---- data-heading="masthead": a newspaper double rule (3 px) over the section header, like the top of a front page. ---- */
html[data-heading="masthead"] .et-section__header { padding-top: 0.8rem; border-top: calc(var(--et-border-width) * 3) double var(--et-border-strong); }
html[data-heading="masthead"] .et-product-section__title { padding-top: 0.6em; border-top: calc(var(--et-border-width) * 3) double var(--et-border-strong); }

/* ---- data-badge="ribbon": a bookmark ribbon hanging from the top edge of the photo, a notch at the bottom
   (sale — --et-sale-bg, new — --et-success, others — the accent) ---- */
html[data-badge="ribbon"] .et-card__badges, html[data-badge="ribbon"] .et-gallery__badges { top: 0; }
html[data-badge="ribbon"] :is(.et-card__badge, .et-gallery__badge) {
  border-radius: 0; padding: 0.55em 0.6em 1.05em; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.5em), 0 100%);
  font-size: var(--et-text-xs); font-weight: 800; letter-spacing: 0.04em; box-shadow: none;
}
html[data-badge="ribbon"] :is(.et-card__badge, .et-gallery__badge) > i { display: none; }
html[data-badge="ribbon"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { background: var(--et-sale-bg, var(--et-sale)); color: var(--et-sale-contrast, var(--et-accent-contrast)); }
html[data-badge="ribbon"] :is(.et-card__badge--new, .et-gallery__badge--new) { background: var(--et-success); color: var(--et-accent-contrast); }

/* ---- data-heading="ink": the section title soaks up ink as it scrolls into view — from a light weight (--et-ink-fresh) and the muted
   colour to the heading weight and the text colour. Scroll-driven (animation-timeline: view()); older browsers, reduced motion and
   motion=none — the plain title. Best with a variable display font. ---- */
@keyframes et-heading-ink { from { font-weight: var(--et-ink-fresh, 260); color: var(--et-text-muted); } to { font-weight: var(--et-heading-weight); color: var(--et-text); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-heading="ink"]:not([data-motion="none"]) :is(.et-section__title, .et-product-section__title) {
      animation: et-heading-ink linear both; animation-timeline: view(); animation-range: entry 10% cover 35%;
    }
  }
}

/* ---- data-heading="glyph": a flat figure before the title — circle, square, half-circle by section order (--et-plate-1..3) ---- */
html[data-heading="glyph"] :is(.et-section__title, .et-product-section__title) { display: flex; align-items: center; gap: 0.5em; }
html[data-heading="glyph"] :is(.et-section__title, .et-product-section__title)::before { content: ""; flex: none; width: 0.8em; aspect-ratio: 1; border-radius: 50%; background: var(--et-plate-1, var(--et-accent)); }
html[data-heading="glyph"] .et-section:nth-of-type(3n+2) :is(.et-section__title, .et-product-section__title)::before { border-radius: 0; background: var(--et-plate-2, var(--et-text)); }
html[data-heading="glyph"] .et-section:nth-of-type(3n) :is(.et-section__title, .et-product-section__title)::before { aspect-ratio: 2 / 1; align-self: flex-end; margin-bottom: 0.12em; border-radius: 999px 999px 0 0; background: var(--et-plate-3, var(--et-surface-2)); }
html[data-heading="glyph"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="glyph"] .et-section--center :is(.et-section__title, .et-product-section__title) { justify-content: center; }

/* ---- data-heading="folio": a printed catalogue — a running head "№ 02" over the title (section order), a dotted rule under the
   header, the subtitle in italics. Language-free: the head is a number sign and the section number. ---- */
html[data-heading="folio"] :is(.et-section__title, .et-product-section__title) { counter-increment: et-section; }
html[data-heading="folio"] :is(.et-section__title, .et-product-section__title)::before {
  content: "№ " counter(et-section, decimal-leading-zero); display: block; margin-bottom: 0.5rem;
  font: 700 var(--et-text-xs)/1.2 var(--et-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-accent-text);
}
html[data-heading="folio"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="folio"] :is(.et-section__header, .et-product-section__head) {
  padding-bottom: 0.875rem;
  background: radial-gradient(circle, var(--et-text-muted) 1px, transparent 1.5px) 0 100% / 8px 4px repeat-x;
}
html[data-heading="folio"] .et-section__subtitle { font-style: italic; }

/* ---- data-badge="sticker": a round price sticker stuck on at an angle (sale — --et-sale-bg, new — --et-plate-3 / olive,
   other — --et-plate-2 / mustard). Short texts only: the circle is 3.4em. ---- */
html[data-badge="sticker"] :is(.et-card__badge, .et-gallery__badge) {
  display: inline-grid; place-items: center; width: 3.4em; height: 3.4em; padding: 0 0.25em; border-radius: 50%;
  background: var(--et-plate-2, var(--et-accent)); color: var(--et-sticker-text, var(--et-text));
  font: 900 var(--et-text-xs)/1.05 var(--et-font); letter-spacing: 0; text-transform: none; text-align: center; box-shadow: none;
  transform: rotate(-10deg);
}
html[data-badge="sticker"] :is(.et-card__badge, .et-gallery__badge) > i { display: none; }
html[data-badge="sticker"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { background: var(--et-sale-bg, var(--et-sale)); color: var(--et-sale-contrast, var(--et-accent-contrast)); }
html[data-badge="sticker"] :is(.et-card__badge--new, .et-gallery__badge--new, .et-card__badge--fit) { background: var(--et-plate-3, var(--et-success)); color: var(--et-sticker-text-alt, var(--et-accent-contrast)); }
html[data-badge="sticker"] .et-card__badges { top: 0.375rem; left: 0.375rem; }
html[data-badge="sticker"] .et-gallery__badges { left: auto; right: 1.25rem; }

/* ---- data-stripes (decor.stripes): three bands of --et-stripe-1..3 under the header and over the footer ---- */
html[data-stripes] { --et-stripes: linear-gradient(var(--et-stripe-1, var(--et-accent)) 0 0) 0 0 / 100% 4px no-repeat, linear-gradient(var(--et-stripe-2, var(--et-plate-2, var(--et-accent))) 0 0) 0 7px / 100% 4px no-repeat, linear-gradient(var(--et-stripe-3, var(--et-text)) 0 0) 0 14px / 100% 4px no-repeat; }
html[data-stripes] :is(.et-header, .et-footer) { position: relative; }
html[data-stripes] .et-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: var(--et-stripes); pointer-events: none; }
html[data-stripes] .et-footer::before { content: ""; display: block; height: 18px; margin-bottom: var(--space-xl, 2rem); background: var(--et-stripes); }
html[data-stripes] .et-nav { margin-top: 18px; }

/* ---- data-media-bg="grid": photos on a field with a dot grid, like a drawing; near-white backgrounds keyed out ---- */
:root[data-media-bg="grid"] { --et-media-box: var(--et-surface-2); }
:root[data-media-bg="grid"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon, .et-subcategories__item > img) {
  background: radial-gradient(circle, var(--et-grid-dot) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--et-media-box);
}
html:root[data-media-bg="grid"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter); }

/* ---- data-badge="led": a mono label with a status light (sale — --et-sale-bg, new — accent, hit — --et-pre, fits — success) ---- */
html[data-badge="led"] :is(.et-card__badge, .et-gallery__badge) {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.6em; border-radius: var(--et-radius-xs);
  background: var(--et-surface); color: var(--et-text); box-shadow: inset 0 0 0 var(--et-border-width) var(--et-border);
  font: 600 var(--et-text-xs)/1.2 var(--et-font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
html[data-badge="led"] :is(.et-card__badge, .et-gallery__badge)::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--led, var(--et-led)); box-shadow: var(--et-led-glow); }
html[data-badge="led"] :is(.et-card__badge, .et-gallery__badge) > i { display: none; }
html[data-badge="led"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { --led: var(--et-sale-bg); }
html[data-badge="led"] :is(.et-card__badge--hit, .et-gallery__badge--hit, .et-card__badge--pre) { --led: var(--et-pre); }
html[data-badge="led"] .et-card__badge--fit { --led: var(--et-success); }

/* ---- data-badge="stamp": an editor's stamp — a thin frame in the text colour, mono capitals, a slight tilt. Sale and new —
   the frame and text in --et-sale / --et-success, hit — a filled accent stamp. ---- */
html[data-badge="stamp"] :is(.et-card__badge, .et-gallery__badge) {
  padding: 0.3em 0.55em; border-radius: 0; background: var(--et-surface); color: var(--et-text);
  box-shadow: inset 0 0 0 var(--et-border-width) currentColor; rotate: -3deg;
  font: 700 var(--et-text-xs)/1.15 var(--et-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-badge="stamp"] :is(.et-card__badge, .et-gallery__badge) > i { display: none; }
html[data-badge="stamp"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { color: var(--et-sale); }
html[data-badge="stamp"] :is(.et-card__badge--new, .et-gallery__badge--new) { color: var(--et-success); }
html[data-badge="stamp"] :is(.et-card__badge--hit, .et-gallery__badge--hit) { background: var(--et-accent); color: var(--et-accent-contrast); box-shadow: none; }

/* ---- data-btn="gel" / data-btn-secondary="chrome": a glossy gel pill (--et-gel, --et-gel-glow) and a polished-metal pill
   (--et-chrome, --et-chrome-edge). Without the preset tokens both fall back to the accent / surface. ---- */
html[data-btn="gel"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn) {
  position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--et-radius-full, 999px);
  background: var(--et-gel, linear-gradient(180deg, color-mix(in oklab, var(--et-accent) 78%, white), var(--et-accent) 50%, var(--et-accent-deep, var(--et-accent))));
  color: var(--et-accent-contrast);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -3px 8px rgb(0 0 0 / 0.2), 0 10px 22px -10px var(--et-gel-glow, color-mix(in oklab, var(--et-accent) 45%, transparent));
  transition: filter var(--et-motion-fast, 0.16s), transform var(--et-motion-fast, 0.16s), box-shadow var(--et-motion-medium, 0.3s);
}
html[data-btn="gel"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn)::before {
  content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; top: 3px; height: 46%; border-radius: 999px;
  background: linear-gradient(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.04)); pointer-events: none;
}
html[data-btn="gel"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-reviews__write-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-compare__cart-btn, .et-cart-promo__btn, .et-saved-item__move-btn, .et-cart-summary__checkout-btn, .et-cart-empty__btn, .et-summary__submit, .et-mobile-checkout-bar__btn, .et-modal__submit, .et-added-cart__btn--checkout, .et-footer__subscribe-btn):is(:hover, :focus-visible) {
  filter: brightness(1.07) saturate(1.08); color: var(--et-accent-contrast);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -3px 8px rgb(0 0 0 / 0.2), 0 14px 28px -10px var(--et-gel-glow, color-mix(in oklab, var(--et-accent) 45%, transparent));
}
html[data-btn="gel"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-summary__submit, .et-modal__submit):active { transform: translateY(1px) scale(0.99); }
/* ---- data-btn="pour": a liquid pours into the main button from the bottom on hover / focus (a wave of --et-accent-hover, the
   curve --et-pour-ease: slow start, dense middle); an add to cart plays the pour once (.is-added). No motion — a plain colour change. ---- */
html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout) { position: relative; overflow: hidden; isolation: isolate; }
html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout)::before {
  content: ""; position: absolute; inset: -30% -4% -4%; z-index: -1; border-radius: 42% 46% 0 0 / 1.4em 1.6em 0 0; pointer-events: none;
  background: var(--et-accent-hover); transform: translateY(102%); transition: transform var(--et-motion-slow, 0.72s) var(--et-pour-ease, cubic-bezier(0.62, 0, 0.3, 1));
}
html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout):is(:hover, :focus-visible) { background: var(--et-accent); }
html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout):is(:hover, :focus-visible)::before { transform: translateY(0); }
html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout).is-added::before { animation: et-pour 0.9s var(--et-pour-ease, cubic-bezier(0.62, 0, 0.3, 1)); }
@keyframes et-pour { 0% { transform: translateY(102%); } 55% { transform: translateY(0); } 100% { transform: translateY(102%); } }
@media (prefers-reduced-motion: reduce) { html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout)::before { display: none; } html[data-btn="pour"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout):hover { background: var(--et-accent-hover); } }
html[data-btn="pour"][data-motion="none"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout)::before { display: none; }
html[data-btn="pour"][data-motion="none"] :is(.et-btn--primary, .et-hero__slide-btn, .et-card__cart-btn, .et-buybox__cart-btn, .et-sticky-bar__cart-btn, .et-mobile-buybar__btn, .et-cart-summary__checkout-btn, .et-summary__submit, .et-modal__submit, .et-added-cart__btn--checkout):hover { background: var(--et-accent-hover); }
html[data-btn-secondary="chrome"] :is(.et-btn--outline, .et-btn--secondary) {
  border: var(--et-border-width, 1px) solid var(--et-chrome-edge, var(--et-border)); border-radius: var(--et-radius-full, 999px);
  background: var(--et-chrome, linear-gradient(180deg, var(--et-surface), var(--et-surface-3) 50%, var(--et-surface))) 0 0 / 100% 200%; color: var(--et-chrome-ink, var(--et-text));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 6px 14px -10px rgb(var(--et-shadow-rgb) / 0.5);
  transition: background-position var(--et-motion-medium, 0.3s), transform var(--et-motion-fast, 0.16s);
}
html.dark-theme[data-btn-secondary="chrome"] :is(.et-btn--outline, .et-btn--secondary),
html[data-btn-secondary="chrome"] .et-scheme-inverse :is(.et-btn--outline, .et-btn--secondary) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.4), 0 6px 14px -10px rgb(0 0 0 / 0.8); }
html[data-btn-secondary="chrome"] :is(.et-btn--outline, .et-btn--secondary):is(:hover, :focus-visible) { background-position: 0 100%; color: var(--et-chrome-ink, var(--et-text)); border-color: var(--et-chrome-edge, var(--et-border)); }
html[data-btn-secondary="chrome"] :is(.et-btn--outline, .et-btn--secondary):active { transform: translateY(1px); }
/* the accent colour scheme: the accent there is the ink, so the gel turns into a pill of that ink (the preset gel would melt into the band) */
html[data-btn="gel"] .et-scheme-accent { --et-gel: linear-gradient(180deg, color-mix(in oklab, var(--et-accent) 82%, white), var(--et-accent) 50%, color-mix(in oklab, var(--et-accent) 82%, black)); --et-gel-glow: transparent; }

/* ---- data-heading="sparkle": a four-point sparkle before the title (accent ink) that twinkles now and then ---- */
html[data-heading="sparkle"] :is(.et-section__title, .et-product-section__title)::before {
  content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.32em; vertical-align: 0.04em;
  background: var(--et-accent-ink, var(--et-accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.9 5.6 4.9 9.6 10.5 10.5-5.6.9-9.6 4.9-10.5 10.5C11.1 16.9 7.1 12.9 1.5 12 7.1 11.1 11.1 7.1 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.9 5.6 4.9 9.6 10.5 10.5-5.6.9-9.6 4.9-10.5 10.5C11.1 16.9 7.1 12.9 1.5 12 7.1 11.1 11.1 7.1 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-heading="sparkle"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-heading="sparkle"]:not([data-motion="none"]) :is(.et-section__title, .et-product-section__title)::before { animation: et-twinkle 6s var(--et-motion-ease, ease) infinite; }
}
@keyframes et-twinkle { 0%, 70%, 100% { rotate: 0deg; scale: 1; } 80% { rotate: 90deg; scale: 1.25; } }
/* ---- data-heading="sticker": a heavy title and the subtitle as a bright die-cut sticker set at an angle (zine / streetwear look).
   Tokens: --et-sticker-bg / --et-sticker-ink / --et-sticker-edge (fall back to the accent and the page), --et-sticker-alt / -alt-ink
   (the sticker on an inverse band). ---- */
html[data-heading="sticker"] :is(.et-section__title, .et-product-section__title) { font-size: var(--et-text-4xl); line-height: var(--et-heading-leading, 0.95); }
html[data-heading="sticker"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="sticker"] .et-section__subtitle {
  display: block; width: fit-content; max-width: 100%; margin: calc(var(--space-lg) * -0.4) 0 var(--space-lg); padding: 0.4375rem 0.75rem 0.5rem;
  border-radius: var(--et-radius-pill, 999px); rotate: -2deg;
  background: var(--et-sticker-bg, var(--et-accent)); color: var(--et-sticker-ink, var(--et-accent-contrast));
  box-shadow: 0 0 0 3px var(--et-sticker-edge, var(--et-bg));
  font-weight: 800; font-size: var(--et-text-sm); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
}
html[data-heading="sticker"] .et-section__header + .et-section__subtitle { margin-top: calc(var(--space-lg) * -0.4); }
html[data-heading="sticker"] .et-section--center .et-section__subtitle { margin-inline: auto; }
html[data-heading="sticker"] .et-scheme-inverse .et-section__subtitle { background: var(--et-sticker-alt, var(--et-accent)); color: var(--et-sticker-alt-ink, var(--et-accent-contrast)); }


/* ---- data-heading="squiggle": a short wavy line under the section title; its colour goes by the section position
   (--et-c-persimmon / --et-c-mint / --et-c-blueberry, falling back to the accent), on inverse and accent bands — --et-squiggle-alt. ---- */
html[data-heading="squiggle"] :is(.et-section__title, .et-product-section__title) { position: relative; padding-bottom: 1.25rem; }
html[data-heading="squiggle"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="squiggle"] :is(.et-section__title, .et-product-section__title)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 6rem; height: 0.875rem; background: var(--et-squiggle, var(--et-c-persimmon, var(--et-accent)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M2 7c7-9 14 9 22 0s15 9 22 0 15 9 22 0 15 9 22 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M2 7c7-9 14 9 22 0s15 9 22 0 15 9 22 0 15 9 22 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
html[data-heading="squiggle"] .et-section:nth-of-type(3n+2) { --et-squiggle: var(--et-c-mint, var(--et-accent)); }
html[data-heading="squiggle"] .et-section:nth-of-type(3n) { --et-squiggle: var(--et-c-blueberry, var(--et-accent)); }
html[data-heading="squiggle"] :is(.et-scheme-inverse, .et-scheme-accent) { --et-squiggle: var(--et-squiggle-alt, var(--et-accent)); }
html[data-heading="squiggle"] .et-section--center :is(.et-section__title, .et-product-section__title)::after { left: 50%; translate: -50% 0; }

/* ---- data-heading="stamp": under the section title — a short bar of printing ink with a "missed print" of light dots and a torn
   right end, tilted a little; its colour goes by the section position (--et-c-persimmon / --et-c-blueberry / --et-c-mint, falling back
   to the accent), on inverse and accent bands — --et-stamp-alt. ---- */
html[data-heading="stamp"] :is(.et-section__title, .et-product-section__title) { position: relative; padding-bottom: 1rem; }
html[data-heading="stamp"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="stamp"] :is(.et-section__title, .et-product-section__title)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(8rem, 60%); height: 0.5rem; rotate: -1.5deg; transform-origin: 0 50%;
  background: radial-gradient(rgb(255 255 255 / 0.35) 0.8px, transparent 1.2px) 0 0 / 4px 4px, var(--et-stamp, var(--et-c-persimmon, var(--et-accent)));
  clip-path: polygon(0 12%, 30% 0, 62% 10%, 88% 0, 94% 40%, 100% 30%, 96% 70%, 100% 100%, 64% 88%, 34% 100%, 0 90%);
}
html[data-heading="stamp"] .et-section:nth-of-type(3n+2) { --et-stamp: var(--et-c-blueberry, var(--et-accent)); }
html[data-heading="stamp"] .et-section:nth-of-type(3n) { --et-stamp: var(--et-c-mint, var(--et-accent)); }
html[data-heading="stamp"] :is(.et-scheme-inverse, .et-scheme-accent) { --et-stamp: var(--et-stamp-alt, var(--et-accent)); }
html[data-heading="stamp"] .et-section--center :is(.et-section__title, .et-product-section__title)::after { left: 50%; translate: -50% 0; }

/* ---- data-decor="formwork": concrete cast in formwork — panel seams (240 × 120 px, like 1200 × 600 shuttering), four tie holes per
   panel and a light grain. Colours: --et-seam-line (seams), --et-tie (holes); defaults come from the border and text colours. ---- */
html[data-decor="formwork"] body {
  --et-seam: var(--et-seam-line, color-mix(in srgb, var(--et-border) 70%, transparent));
  --et-hole: var(--et-tie, color-mix(in srgb, var(--et-text) 22%, transparent));
  background-image:
    radial-gradient(circle at 30px 30px, var(--et-hole) 0 3px, transparent 3.5px),
    radial-gradient(circle at 210px 30px, var(--et-hole) 0 3px, transparent 3.5px),
    radial-gradient(circle at 30px 90px, var(--et-hole) 0 3px, transparent 3.5px),
    radial-gradient(circle at 210px 90px, var(--et-hole) 0 3px, transparent 3.5px),
    linear-gradient(to right, var(--et-seam) 1px, transparent 1px),
    linear-gradient(to bottom, var(--et-seam) 1px, transparent 1px),
    var(--et-decor-grain);
  background-size: 240px 120px, 240px 120px, 240px 120px, 240px 120px, 240px 120px, 240px 120px, auto;
}

/* ---- data-decor="confetti": page texture — rings, dots and short dashes in the design colours (--et-c-butter / -blueberry / -mint /
   -lilac / -persimmon), see-through (--et-confetti-mix, 40 % by default), scrolls with the page ---- */
html[data-decor="confetti"] body {
  --et-cf: var(--et-confetti-mix, 40%);
  background-image:
    radial-gradient(circle at 40px 50px, transparent 0 5px, color-mix(in srgb, var(--et-c-butter, var(--et-accent)) var(--et-cf), transparent) 5.5px 8.5px, transparent 9px),
    radial-gradient(circle at 220px 180px, transparent 0 4px, color-mix(in srgb, var(--et-c-blueberry, var(--et-accent)) var(--et-cf), transparent) 4.5px 7px, transparent 7.5px),
    radial-gradient(circle at 150px 70px, color-mix(in srgb, var(--et-c-mint, var(--et-accent)) var(--et-cf), transparent) 0 4px, transparent 4.5px),
    radial-gradient(circle at 70px 240px, color-mix(in srgb, var(--et-c-lilac, var(--et-accent)) var(--et-cf), transparent) 0 3.5px, transparent 4px),
    radial-gradient(10px 2.5px at 110px 150px, color-mix(in srgb, var(--et-c-persimmon, var(--et-accent)) var(--et-cf), transparent) 0 92%, transparent 100%),
    radial-gradient(2.5px 10px at 250px 40px, color-mix(in srgb, var(--et-c-mint, var(--et-accent)) var(--et-cf), transparent) 0 92%, transparent 100%),
    radial-gradient(9px 2.5px at 30px 160px, color-mix(in srgb, var(--et-c-blueberry, var(--et-accent)) var(--et-cf), transparent) 0 92%, transparent 100%);
  background-size: 340px 340px;
}

/* ---- data-media-bg="holo": a pearly plate (--et-plate) under the photo; near-white backgrounds keyed out, so cut-outs
   and white-background shots both sit on the plate. Dark mode reads the dark --et-plate from tokens_dark. ---- */
:root[data-media-bg="holo"] { --et-media-box: var(--et-plate, linear-gradient(140deg, var(--et-surface-2), var(--et-surface-3))); }
:root[data-media-bg="holo"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon, .et-subcategories__item > img) { background: var(--et-media-box); }
html:root[data-media-bg="holo"] :is(.et-card__image, .et-gallery__main, .et-gallery__thumb, .et-cart-item__image, .et-cart-row__image, .et-compare__image, .et-sticky-bar__thumb, .et-categories__icon) img { mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter); }

/* ---- data-badge="holo": a holographic sticker at a slight angle (--et-holo / --et-holo-ink); sale — gel ---- */
html[data-badge="holo"] :is(.et-card__badge, .et-gallery__badge) {
  display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0 0.625rem; border-radius: 999px; rotate: -4deg;
  background: var(--et-holo, var(--et-surface-2)); color: var(--et-holo-ink, var(--et-text));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 2px 6px -2px rgb(var(--et-shadow-rgb) / 0.35);
  font: 700 var(--et-text-xs)/1 var(--et-font-display); letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-badge="holo"] :is(.et-card__badge, .et-gallery__badge) + :is(.et-card__badge, .et-gallery__badge) { rotate: 3deg; }
html[data-badge="holo"] :is(.et-card__badge, .et-gallery__badge) > i { display: none; }
html[data-badge="holo"] :is(.et-card__badge--sale, .et-gallery__badge--sale) { background: var(--et-gel, var(--et-sale-bg, var(--et-sale))); color: var(--et-sale-contrast, var(--et-accent-contrast)); }

/* === components === */

/* ---- Scroll offset for sticky header ---- */
[id] { scroll-margin-top: 80px; }

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--et-font);
  background: var(--et-bg);
  color: var(--et-text);
  line-height: var(--et-body-leading);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal overflow */
html {
  overflow-x: hidden;
}

a { color: var(--et-accent-text); text-decoration: none; transition: color var(--et-transition); }
a:hover { color: var(--et-accent-hover); }

img { max-width: 100%; height: auto; display: block; }

/* Headings: Bootstrap gives h1–h6 line-height 1.2; the token takes it over */
h1, h2, h3, h4, h5, h6 { line-height: var(--et-heading-leading); }
:is(h1, h2, h3, h4, h5, h6, .et-section__title, .et-product-section__title) em { font-family: var(--et-font-accent); }

/* ---- Global button system ---- */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--et-btn-radius);
  box-shadow: var(--et-btn-shadow, none);
  font-family: var(--et-font-button, var(--et-font));
  font-size: var(--et-text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  line-height: 1.4;
}
.et-btn--primary {
  background: var(--et-accent);
  color: var(--et-accent-contrast);
}
.et-btn--primary:hover { background: var(--et-accent-hover); color: var(--et-accent-contrast); transform: translateY(-1px); }
.et-btn--primary:active { transform: scale(0.97); }

:is(.et-btn--outline, .et-btn--secondary) {
  background: transparent;
  color: var(--et-text);
  border: var(--et-btn-border-width, var(--et-border-width)) solid var(--et-border);
}
:is(.et-btn--outline, .et-btn--secondary):hover { border-color: var(--et-accent); color: var(--et-accent-text); }

.et-btn--danger {
  background: var(--et-error);
  color: var(--et-on-status);
}
.et-btn--danger:hover { background: var(--et-danger-hover); color: var(--et-on-status); }

.et-btn--sm { padding: 0.5rem 1rem; font-size: var(--et-text-caption); }
.et-btn--lg { padding: 1rem 2rem; font-size: var(--et-text-base); }
.et-btn--block { width: 100%; }

/* Global alert styles */
.et-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-sm);
  margin-bottom: 1rem;
}
.et-alert--success { background: var(--et-success-soft); color: var(--et-success-text); border: var(--et-border-width) solid var(--et-success-border); }
.et-alert--danger { background: var(--et-error-bg); color: var(--et-danger-text); border: var(--et-border-width) solid var(--et-danger-border); }
.et-alert--warning { background: var(--et-warning-soft); color: var(--et-warning-text); border: var(--et-border-width) solid var(--et-warning-tint); }
.et-alert--info { background: var(--et-info-soft); color: var(--et-info-text); border: var(--et-border-width) solid var(--et-info-border); }

/* Global table styles */
.et-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--et-text-sm);
}
.et-table th,
.et-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-table th {
  font-weight: 600;
  color: var(--et-text-muted);
  font-size: var(--et-text-caption);
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 0.6);
}
.et-table tr:hover td { background: var(--et-bg); }

/* Account empty state */
.et-account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--et-text-muted);
}
.et-account-empty i { font-size: var(--et-text-4xl); margin-bottom: 0.75rem; opacity: 0.4; }
.et-account-empty p { font-size: var(--et-text-sm); margin-bottom: 1rem; }

/* ---- Container override (Amazon-style 1600px for e-commerce) ---- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--et-gutter) * 0.375);
}
/* Tablet+ — slightly more breathing room */
@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-inline: var(--et-gutter);
  }
}
/* Large desktops/monitors only — cap width and add comfortable margins */
@media (min-width: 1600px) { /* breakpoint stays literal: media queries can't read custom properties */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--et-container);
    padding-inline: var(--et-gutter);
  }
}

/* Narrow container — for articles, checkout forms, single-column reading */
.container--narrow { max-width: 720px; }

/* Wide container — for hero sliders, full-bleed banners */
.container--wide { max-width: calc(var(--et-container) * 1.05); }

/* Custom 5-col grid */
@media (min-width: 1200px) {
  .col-xl-2-4 { flex: 0 0 20%; max-width: 20%; }
}

/* ===== SITE HEADER (margin + rounded corners on top-level elements) ===== */
.et-topbar,
.et-header,
.et-nav {
  /* Align header with .container (max-width 1600 + padding-inline 2rem) */
  margin-left: max(2rem, calc((100% - 1600px) / 2 + 2rem));
  margin-right: max(2rem, calc((100% - 1600px) / 2 + 2rem));
}

/* Bottom rounded corners on the last header element */
.et-nav {
  border-radius: 0 0 var(--et-radius) var(--et-radius);
  padding-bottom: 5px;
}
/* Sticky header gets rounded bottom corners when scrolled */
.et-header.et-header--scrolled {
  border-radius: 0 0 var(--et-radius) var(--et-radius);
}

@media (max-width: 991.98px) {
  .et-topbar,
  .et-header,
  .et-nav {
    margin-left: 0;
    margin-right: 0;
  }
  .et-nav {
    border-radius: 0;
  }
}

/* ===== TOPBAR ===== */
.et-topbar {
  background: var(--et-topbar-bg);
  color: color-mix(in srgb, var(--et-topbar-text) 72%, transparent);
  font-size: var(--et-text-caption);
  padding: 0.25rem 0;
  position: relative;
}

.et-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.et-topbar__left, .et-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.et-topbar__link {
  color: color-mix(in srgb, var(--et-topbar-text) 72%, transparent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color var(--et-transition);
  cursor: pointer;
}
.et-topbar__link:hover { color: var(--et-topbar-text); }

.et-topbar__social-link {
  color: color-mix(in srgb, var(--et-topbar-text) 55%, transparent);
  transition: color var(--et-transition);
  font-size: var(--et-text-md);
  cursor: pointer;
}
.et-topbar__social-link:hover { color: var(--et-topbar-accent); }

.et-topbar__divider {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--et-topbar-text) 20%, transparent);
  margin: 0 0.25rem;
}

/* Topbar select dropdowns (language, currency) */
.et-topbar__select-wrap {
  position: relative;
}

.et-topbar__select-btn {
  background: none;
  border: none;
  font-family: var(--et-font);
  font-size: inherit;
  padding: 0;
  cursor: pointer;
}

.et-topbar__select-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 9999;
  min-width: 180px;
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-surface) 30%, transparent);
  border-radius: var(--et-radius-sm);
  box-shadow: var(--et-shadow-xl);
  padding: 0.375rem;
  display: none;
}
html.dark-theme .et-topbar__select-dropdown {
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--et-surface) 10%, transparent);
}
.et-topbar__select-dropdown.is-open { display: block; }

.et-topbar__select-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--et-text-secondary);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  text-align: left;
  border-radius: var(--et-radius-xs);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-topbar__select-option:hover {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}
.et-topbar__select-option.is-active {
  font-weight: 700;
  color: var(--et-accent-text);
}

/* Phone dropdown */
.et-topbar__phone-wrap {
  position: relative;
}

.et-topbar__phone-btn {
  background: none;
  border: none;
  font-family: var(--et-font);
  font-size: inherit;
  padding: 0;
  cursor: pointer;
}

.et-topbar__phone-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 9999;
  min-width: 320px;
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-surface) 30%, transparent);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow-xl);
  padding: 1.5rem;
  display: none;
  color: var(--et-text);
}
html.dark-theme .et-topbar__phone-dropdown {
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--et-surface) 10%, transparent);
}
.et-topbar__phone-dropdown.is-open { display: block; }

.et-topbar__phone-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--et-surface) 30%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--et-surface) 30%, transparent);
  transform: rotate(45deg);
}
html.dark-theme .et-topbar__phone-dropdown::before {
  background: color-mix(in srgb, var(--et-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--et-surface) 10%, transparent);
}

.et-topbar__phone-section {
  margin-bottom: 1.25rem;
}
.et-topbar__phone-section:last-of-type { margin-bottom: 1rem; }

.et-topbar__phone-heading {
  font-weight: 700;
  font-size: var(--et-text-md);
  color: var(--et-text);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.et-topbar__phone-heading i {
  color: var(--et-text-muted);
  width: 16px;
  text-align: center;
}

.et-topbar__phone-section p {
  margin: 0;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  line-height: 1.6;
}

.et-topbar__phone-section a {
  display: block;
  font-size: var(--et-text-md);
  color: var(--et-accent-text);
  padding: 0.125rem 0;
  cursor: pointer;
}
.et-topbar__phone-section a:hover { color: var(--et-accent-hover); }

.et-topbar__phone-cta {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast) !important;
  border: none;
  border-radius: var(--et-radius-sm);
  font-family: var(--et-font);
  font-size: var(--et-text-md);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all var(--et-transition);
  text-decoration: none;
}
.et-topbar__phone-cta:hover {
  background: var(--et-accent-hover);
  color: var(--et-accent-contrast) !important;
}

@media (max-width: 991.98px) {
  .et-topbar { display: none; }
}

/* ===== HEADER ===== */
.et-header {
  background: var(--et-header-bg);
  backdrop-filter: var(--et-blur);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--et-transition-slow);
}

.et-header--scrolled {
  box-shadow: var(--et-shadow-xl);
}

.et-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

/* Logo */
.et-header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 160px;
}
.et-header__logo img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .et-header__logo { max-width: 100px; }
  .et-header__logo img { max-height: 32px; }
}

.et-header__logo-icon {
  width: 38px;
  height: 38px;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  font-weight: 800;
  font-size: var(--et-text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--et-radius-sm);
}

.et-header__logo-text {
  color: var(--et-header-text);
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: var(--et-text-2xl);
  line-height: 1.1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .et-header__logo-text { font-size: var(--et-text-lg); }
}

/* Catalog btn */
.et-header__catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: none;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-md);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--et-transition);
}
.et-header__catalog-btn:hover {
  background: var(--et-accent-hover);
  transform: translateY(-1px);
}

.et-header__catalog-btn svg {
  width: 18px;
  height: 18px;
}

/* Search */
.et-header__search {
  flex: 1;
  min-width: 0;
  position: relative;
}
.et-header__search .et-header__search-box {
  width: 100%;
}

.et-header__search-input {
  width: 100%;
  padding: 0.75rem 3.5rem 0.75rem 1.25rem;
  border: calc(var(--et-border-width) * 2) solid color-mix(in srgb, var(--et-header-text) 12%, transparent);
  border-radius: var(--et-radius);
  background: color-mix(in srgb, var(--et-header-text) 7%, transparent);
  color: var(--et-header-text);
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  outline: none;
  transition: all var(--et-transition);
}
.et-header__search-input::placeholder { color: color-mix(in srgb, var(--et-header-text) 90%, transparent); } /* text: >= 4.5:1 on mid-tone headers too */
.et-header__search-input:focus {
  border-color: var(--et-accent);
  background: color-mix(in srgb, var(--et-header-text) 12%, transparent);
  box-shadow: 0 0 0 3px var(--et-accent-light);
}

.et-header__search-btn {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 42px;
  border: none;
  border-radius: var(--et-btn-radius);
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  cursor: pointer;
  font-size: var(--et-text-base);
  transition: all var(--et-transition);
}
.et-header__search-btn:hover { background: var(--et-accent-hover); }

/* Actions */
.et-header__actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

.et-header__action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  /* 80 %: --et-header-text has >= 4.5:1 with the header (elbuz_color), so icons keep >= 3:1 on any header colour */
  color: color-mix(in srgb, var(--et-header-text) 80%, transparent);
  text-decoration: none;
  border-radius: var(--et-radius-sm);
  transition: all var(--et-transition);
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--et-text-xl);
}
.et-header__action-item:hover {
  color: var(--et-header-text);
  background: color-mix(in srgb, var(--et-header-text) 8%, transparent);
}

.et-header__action-item--cart { color: color-mix(in srgb, var(--et-header-text) 85%, transparent); }

.et-header__cart-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: calc(var(--et-text-xs) * 0.8727);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--et-accent-contrast);
  background: var(--et-danger);
  border-radius: var(--et-radius-full);
}
.et-header__cart-badge:empty,
.et-header__cart-badge[data-count="0"] { display: none; }

.et-header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-header-text) 10%, transparent);
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--et-header-text) 80%, transparent);
  cursor: pointer;
  transition: all var(--et-transition);
  margin-left: 0.25rem;
}
.et-header__theme-toggle:hover {
  color: var(--et-header-accent);
  border-color: var(--et-accent);
}

/* (mobile header overrides moved below) */

@media (max-width: 991.98px) {
  .et-header__inner {
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .et-header__catalog-btn { padding: 0.5rem 0.75rem; font-size: var(--et-text-sm); }
  .et-header__search {
    display: flex !important;
    order: 10;
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 0.25rem;
  }
  /* Actions: compact on mobile */
  .et-header__actions { gap: 0; margin-left: auto; }
  .et-header__action-item { width: 36px; height: 36px; font-size: var(--et-text-lg); }
  .et-header__action-item--hide-mobile { display: none; }
  .et-header__theme-toggle { display: none; }
}

/* ===== NAVIGATION ===== */
.et-nav {
  background: var(--et-surface);
  position: relative;
  z-index: 1020;
}

.et-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.et-nav__item > a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  color: var(--et-text);
  font-size: var(--et-text-md);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--et-transition);
  position: relative;
}
.et-nav__item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--et-accent);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--et-transition);
}
.et-nav__item > a:hover { color: var(--et-accent-text); }
.et-nav__item > a:hover::after { transform: scaleX(1); }

.et-nav__item--accent > a {
  color: var(--et-danger);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.et-nav__item--accent > a i { font-size: 0.8em; }
.et-nav__accent-dot {
  width: 7px;
  height: 7px;
  background: var(--et-danger);
  border-radius: 50%;
  flex-shrink: 0;
  animation: etAccentPulse 1.5s ease-in-out infinite;
}
@keyframes etAccentPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--et-danger) 40%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--et-danger) 0%, transparent); }
}

/* Dropdown spans the nav container, not the item: menus of the right-hand items never stick out past the screen edge (backlog #87) */
.et-nav > .container { position: relative; }
.et-nav__item { position: static; }
.et-nav__dropdown {
  position: absolute;
  top: 100%;
  left: var(--et-gutter, 2rem);
  right: var(--et-gutter, 2rem);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  padding-top: 4px;
}
.et-nav__item--has-sub:hover > .et-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.et-nav__dropdown-inner {
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow-lg);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  row-gap: var(--space-lg);
}

.et-nav__dropdown-col { min-width: 100px; }

.et-nav__dropdown-title {
  display: block;
  font-weight: 700;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: calc(var(--et-border-width) * 2) solid var(--et-accent);
}
.et-nav__dropdown-title:hover { color: var(--et-accent-text); }

.et-nav__dropdown-col ul { list-style: none; padding: 0; margin: 0; }
.et-nav__dropdown-col ul a {
  display: block;
  padding: 0.3rem 0;
  color: var(--et-text-secondary);
  font-size: var(--et-text-sm);
}
.et-nav__dropdown-col ul a:hover { color: var(--et-accent-text); }

@media (max-width: 991.98px) {
  .et-nav { display: none; }
}

/* ===== MEGA MENU ===== */
.et-mega {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1029;
  display: none;
  padding-top: var(--et-mega-top, 60px);
}
.et-mega.is-open { display: block; }

.et-mega__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}

.et-mega__body {
  display: flex;
  background: var(--et-surface);
  overflow: hidden;
  border-radius: 0 0 var(--et-overlay-radius, var(--et-radius)) var(--et-overlay-radius, var(--et-radius));
  box-shadow: var(--et-overlay-shadow, var(--et-shadow-xl));
  max-height: 520px;
  animation: megaSlideDown 0.2s ease;
}

@keyframes megaSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar */
.et-mega__sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--et-bg);
  border-right: var(--et-border-width) solid var(--et-border);
  overflow-y: auto;
  padding: 0.5rem 0;
}

.et-mega__cat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  color: var(--et-text);
  text-decoration: none;
  font-size: var(--et-text-sm);
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  position: relative;
}

.et-mega__cat:hover,
.et-mega__cat.is-active {
  background: var(--et-surface);
  color: var(--et-accent-text);
}

.et-mega__cat.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 3px;
  background: var(--et-accent);
  border-radius: 0 2px 2px 0;
}

.et-mega__cat-icon {
  width: 20px;
  text-align: center;
  font-size: var(--et-text-md);
  color: var(--et-text-muted);
  transition: color 0.15s ease;
}
.et-mega__cat:hover .et-mega__cat-icon,
.et-mega__cat.is-active .et-mega__cat-icon { color: var(--et-accent-text); }

.et-mega__cat-arrow {
  margin-left: auto;
  font-size: calc(var(--et-text-xs) * 0.7273);
  color: var(--et-text-muted);
  transition: transform 0.15s ease;
}
.et-mega__cat.is-active .et-mega__cat-arrow { transform: translateX(2px); }

/* Content panels */
.et-mega__content {
  flex: 1;
  min-width: 0;
  position: relative;
}

.et-mega__panel {
  display: none;
  padding: 1.5rem 2rem;
  height: 100%;
  overflow-y: auto;
}
.et-mega__panel.is-active { display: block; }

.et-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
}

.et-mega__group-title {
  display: block;
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: calc(var(--et-border-width) * 2) solid var(--et-accent);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-mega__group-title:hover { color: var(--et-accent-text); }

.et-mega__group-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.et-mega__group-list li a {
  display: block;
  padding: 0.25rem 0;
  color: var(--et-text-secondary);
  font-size: var(--et-text-sm);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-mega__group-list li a:hover {
  color: var(--et-accent-text);
  padding-left: 3px;
}

.et-mega__promo {
  margin-top: 1.5rem;
  border-radius: var(--et-radius-sm);
  overflow: hidden;
}
.et-mega__promo img {
  width: 100%;
  height: auto;
  display: block;
}

.et-mega__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--et-text-muted);
  font-size: var(--et-text-md);
}
.et-mega__empty a { color: var(--et-accent-text); font-weight: 600; }

/* Catalog button active state */
.et-header__catalog-btn.is-active {
  background: var(--et-accent-hover);
}

@media (max-width: 991.98px) {
  .et-mega__body { flex-direction: column; max-height: 70vh; }
  .et-mega__sidebar { width: 100%; max-height: 200px; border-right: none; border-bottom: var(--et-border-width) solid var(--et-border); }
  .et-mega__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== HERO WITH SIDEBAR (catalog-open layout) ===== */
.et-hero-with-sidebar {
  padding: var(--space-lg) 0;
}

.et-hero-with-sidebar__row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.et-hero-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 0.5rem 0;
  position: relative;
  z-index: 5;
}

.et-hero-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem;
  color: var(--et-text);
  text-decoration: none;
  font-size: var(--et-text-sm);
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
}
.et-hero-sidebar__item:hover {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}

.et-hero-sidebar__icon {
  width: 18px;
  text-align: center;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  transition: color 0.15s ease;
}
.et-hero-sidebar__item:hover .et-hero-sidebar__icon { color: var(--et-accent-text); }

.et-hero-sidebar__arrow {
  margin-left: auto;
  font-size: calc(var(--et-text-xs) * 0.7273);
  color: var(--et-text-muted);
  transition: transform 0.15s ease;
}

.et-hero-sidebar__item-wrap {
  position: static;
}

/* Flyout panel — positioned from sidebar, overlays banner */
.et-hero-sidebar__flyout {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: calc(100vw - 280px - 4rem);
  max-width: 700px;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-left: none;
  border-radius: 0 var(--et-radius) var(--et-radius) 0;
  box-shadow: var(--et-shadow-lg);
  padding: 1.5rem;
  display: none;
  overflow-y: auto;
}

.et-hero-sidebar__item-wrap:hover > .et-hero-sidebar__flyout {
  display: block;
}
.et-hero-sidebar__item-wrap:hover > .et-hero-sidebar__item {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}
.et-hero-sidebar__item-wrap:hover > .et-hero-sidebar__item .et-hero-sidebar__icon {
  color: var(--et-accent-text);
}
.et-hero-sidebar__item-wrap:hover > .et-hero-sidebar__item .et-hero-sidebar__arrow {
  transform: translateX(2px);
}

.et-hero-sidebar__flyout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem 1.5rem;
}

.et-hero-sidebar__flyout-title {
  display: block;
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: calc(var(--et-border-width) * 2) solid var(--et-accent);
  text-decoration: none;
}
.et-hero-sidebar__flyout-title:hover { color: var(--et-accent-text); }

.et-hero-sidebar__flyout-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.et-hero-sidebar__flyout-group ul li a {
  display: block;
  padding: 0.2rem 0;
  color: var(--et-text-secondary);
  font-size: var(--et-text-sm);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-hero-sidebar__flyout-group ul li a:hover {
  color: var(--et-accent-text);
  padding-left: 3px;
}

.et-hero-with-sidebar__main {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Override hero padding when inside sidebar layout */
.et-hero-with-sidebar__main .et-hero {
  padding: 0;
}

@media (max-width: 991.98px) {
  .et-hero-with-sidebar__row { flex-direction: column; }
  .et-hero-sidebar { width: 100%; }
  .et-hero-sidebar__flyout { display: none !important; }
}


/* ===== HERO ===== */
.et-hero {
  padding: var(--space-lg) 0;
}

.et-hero__slider {
  position: relative;
  border-radius: var(--et-radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--et-hero-from) 0%, var(--et-hero-via) 50%, var(--et-hero-to) 100%);
  height: 480px;
}

.et-hero__slider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, var(--et-hero-glow) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.et-hero__slide {
  position: absolute;
  inset: 0;
  padding: 3.5rem;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: opacity 0.5s var(--ease-out-expo);
}
.et-hero__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.et-hero__slide-content {
  flex: 1;
  color: var(--et-text-light);
  padding-right: 2rem;
}

.et-hero__slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1rem;
  background: color-mix(in srgb, var(--et-text-light) 15%, transparent);
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-text-light) 25%, transparent);
  border-radius: var(--et-radius-full);
  font-size: var(--et-text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 1.2);
  color: var(--et-text-light);
  margin-bottom: 1.25rem;
  backdrop-filter: blur(8px);
}

.et-hero__slide-title {
  font-size: calc(var(--et-text-4xl) * 1.1);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.875rem;
  letter-spacing: -0.03em;
}

.et-hero__slide-text {
  font-size: var(--et-text-base);
  opacity: 0.75;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 400px;
}

.et-hero__slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border-radius: var(--et-btn-radius);
  font-weight: 700;
  font-size: var(--et-text-md);
  transition: all var(--et-transition);
  cursor: pointer;
}
.et-hero__slide-btn:hover {
  background: var(--et-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(var(--et-accent-rgb), 0.3);
  color: var(--et-accent-contrast);
}

.et-hero__slide-image {
  flex: 0 0 42%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.et-hero__slide-image img {
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.4));
}

.et-hero__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.et-hero__dot {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.et-hero__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--et-radius-full);
  background: var(--et-border);
  transition: all var(--et-transition);
}
.et-hero__dot--active::after {
  width: 28px;
  border-radius: var(--et-radius-xs);
  background: var(--et-accent);
}

/* Slider arrows */
.et-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--et-accent-contrast) 15%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--et-accent-contrast);
  font-size: var(--et-text-base);
  cursor: pointer;
  transition: all var(--et-transition);
  opacity: 0;
}
.et-hero__slider:hover .et-hero__arrow { opacity: 1; }
.et-hero__arrow:hover {
  background: color-mix(in srgb, var(--et-accent-contrast) 30%, transparent);
  transform: translateY(-50%) scale(1.08);
}
.et-hero__arrow--prev { left: 0.5rem; }
.et-hero__arrow--next { right: 0.5rem; }

/* Slide transition handled by opacity + stagger keyframes above */

@media (max-width: 767.98px) {
  .et-hero__slider { height: 360px; }
  .et-hero__slide {
    flex-direction: column;
    padding: 1.5rem;
    justify-content: center;
  }
  .et-hero__slide-content { padding-right: 0; text-align: center; }
  .et-hero__slide-title { font-size: calc(var(--et-text-2xl) * 1.1667); }
  .et-hero__slide-image { display: none; }
  .et-hero__slide-text { font-size: var(--et-text-md); margin-bottom: 1.25rem; }
  .et-hero__slide-badge { margin-bottom: 0.75rem; }
}

/* ===== SECTIONS ===== */
.et-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: var(--space-lg);
}
.et-section__header .et-section__title { min-width: 0; overflow-wrap: anywhere; }

.et-section__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  margin: 0 0 var(--space-lg);
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-section__header .et-section__title { margin-bottom: 0; }

.et-section__link {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}
.et-section__link:hover { color: var(--et-accent-hover); }

/* ===== CATEGORIES ===== */
.et-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--et-grid-gap) * 0.5);
}

@media (max-width: 374px) {
  .et-categories { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .et-categories {
    grid-template-columns: repeat(8, 1fr);
    gap: calc(var(--et-grid-gap) * 0.75);
  }
}

.et-categories__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.5rem;
  min-width: 0;
  background: var(--et-surface);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  text-decoration: none;
  color: var(--et-text);
  font-size: var(--et-text-caption);
  font-weight: 600;
  transition: all var(--et-transition);
  text-align: center;
  cursor: pointer;
}
.et-categories__item:hover {
  border-color: var(--et-accent);
  color: var(--et-accent-text);
  box-shadow: var(--et-shadow-lg);
}

.et-categories__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  border-radius: calc(var(--et-radius-sm) * 1.4);
  font-size: var(--et-text-xl);
  transition: all var(--et-transition);
}

.et-categories__item:hover .et-categories__icon {
  background: var(--et-accent);
  color: var(--et-accent-contrast);
}

/* ===== PRODUCT CARD ===== */
.et-card {
  background: var(--et-surface);
  border-radius: var(--et-card-radius);
  border: var(--et-card-border-width, 0px) solid var(--et-border);
  box-shadow: var(--et-card-shadow, none);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all var(--et-transition);
  cursor: pointer;
  position: relative;
}
/* Override [data-tilt] defaults — card needs overflow visible for slide-down specs panel */
.et-card[data-tilt] {
  overflow: visible;
}
.et-card:hover {
  box-shadow: var(--et-shadow-xl);
  z-index: 10;
}
/* Lift — the data-hover axis (elbuz_motion.css). Photo zoom: not with reduced motion, data-hover / data-motion "none" */
@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-hover="none"], [data-motion="none"])) .et-card:hover .et-card__image img { transform: scale(1.06); }
}
/* Square bottom corners when specs panel is attached (category only) */
.et-product-grid .et-card:hover {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.et-card__image {
  position: relative;
  height: 240px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.et-card__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  border-radius: var(--et-card-radius) var(--et-card-radius) 0 0;
}

.et-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.et-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 2;
}

.et-card__badge {
  padding: 0.125rem 0.4rem;
  font-size: calc(var(--et-text-xs) * 0.8182);
  font-weight: 700;
  color: var(--et-on-status);
  border-radius: var(--et-radius-xs);
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 0.4);
  line-height: 1.3;
}
.et-card__badge--sale { background: var(--et-sale); }
.et-card__badge--new { background: var(--et-accent); }
.et-card__badge--hit { background: var(--et-warning); }

.et-card__wishlist {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-surface-glass);
  backdrop-filter: blur(8px);
  border: var(--et-border-width) solid var(--et-border-glass);
  border-radius: 50%;
  color: var(--et-text-muted);
  cursor: pointer;
  box-shadow: var(--et-shadow-sm);
  transition: all var(--et-transition);
  opacity: 0;
  transform: scale(0.9);
  z-index: 2;
}
.et-card:hover .et-card__wishlist {
  opacity: 1;
  transform: scale(1);
}
.et-card__wishlist:hover {
  color: var(--et-danger);
  border-color: var(--et-danger);
  transform: scale(1.1) !important;
}

.et-card__body {
  padding: var(--et-card-pad);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.et-card__brand {
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-text-muted);
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 1);
  margin-bottom: 0.25rem;
}

.et-card__title {
  font-size: var(--et-text-sm);
  color: var(--et-text);
  line-height: calc(var(--et-heading-leading) * 1.1667);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
  text-decoration: none;
  letter-spacing: var(--et-tracking-shift);
  font-style: var(--et-heading-style);
}
.et-card__title:hover { color: var(--et-accent-text); }

.et-card__rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.et-card__stars {
  color: var(--et-rating);
  font-size: var(--et-text-xs);
  display: flex;
  gap: 1px;
}

.et-card__reviews {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}

.et-card__price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.et-card__price-current {
  font-family: var(--et-font-price);
  font-size: var(--et-text-lg);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-card__price-current--sale { color: var(--et-sale); }

.et-card__price-old {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  text-decoration: line-through;
}

.et-card__stock {
  font-size: var(--et-text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.et-card__stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.et-card__stock--in { color: var(--et-success); }
.et-card__stock--in::before { background: var(--et-success); }
.et-card__stock--out { color: var(--et-danger); }
.et-card__stock--out::before { background: var(--et-danger); }
.et-card__stock--few { color: var(--et-warning); }
.et-card__stock--few::before { background: var(--et-warning); }

/* Sold progress (flash-sale products) */
.et-card__sold-progress { margin-top: 0.5rem; }
.et-card__sold-bar {
  height: 6px;
  background: var(--et-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.et-card__sold-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--et-danger), var(--et-hot-strong));
  border-radius: 3px;
}
.et-card__sold-text {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}

.et-card__footer {
  display: flex;
  gap: 0.375rem;
  padding: 0 var(--et-card-pad) var(--et-card-pad);
}

.et-card__cart-btn {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: none;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-card__cart-btn:hover {
  background: var(--et-accent-hover);
  transform: translateY(-1px);
}

/* Mobile compact card */
@media (max-width: 767.98px) {
  .et-card__image { height: 160px; }
  .et-card__body { padding: calc(var(--et-card-pad) * 0.625); gap: 0.125rem; }
  .et-card__brand { font-size: calc(var(--et-text-xs) * 0.8727); }
  .et-card__title { font-size: var(--et-text-caption); -webkit-line-clamp: 2; }
  .et-card__rating { gap: 0.25rem; }
  .et-card__stars i { font-size: calc(var(--et-text-xs) * 0.8727); }
  .et-card__reviews { font-size: calc(var(--et-text-xs) * 0.8727); }
  .et-card__price { gap: 0.25rem; }
  .et-card__price-current { font-size: var(--et-text-md); }
  .et-card__price-old { font-size: var(--et-text-xs); }
  .et-card__stock { font-size: calc(var(--et-text-xs) * 0.8727); }
  .et-card__footer { padding: 0 calc(var(--et-card-pad) * 0.625) calc(var(--et-card-pad) * 0.625); }
  .et-card__cart-btn { padding: 0.5rem; font-size: var(--et-text-caption); }
  .et-card__action-btn { width: 28px; height: 28px; font-size: var(--et-text-caption); }
}

.et-card__compare-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-btn-radius);
  background: none;
  color: var(--et-text-muted);
  cursor: pointer;
  transition: all var(--et-transition);
  flex-shrink: 0;
}
.et-card__compare-btn:hover {
  color: var(--et-accent-text);
  border-color: var(--et-accent);
}

/* ===== Card top-specs slide-down panel ===== */
/* Hidden by default everywhere — only enabled inside .et-product-grid (category page) */
.et-card__specs {
  display: none;
}

/* Category product grid — slide-down panel on hover */
.et-product-grid .et-card__specs {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  background: var(--et-surface);
  border-top: var(--et-border-width) solid var(--et-border);
  border-radius: 0 0 var(--et-radius) var(--et-radius);
  box-shadow: var(--et-shadow-xl);
  padding: 0.75rem 1rem 0.875rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
  scrollbar-width: thin;
  scrollbar-color: var(--et-border) transparent;
}
.et-product-grid .et-card:hover .et-card__specs {
  opacity: 1;
  pointer-events: auto;
}
.et-card__specs::-webkit-scrollbar { width: 4px; }
.et-card__specs::-webkit-scrollbar-track { background: transparent; }
.et-card__specs::-webkit-scrollbar-thumb {
  background: var(--et-border);
  border-radius: 2px;
}
.et-card__specs-title {
  font-size: calc(var(--et-text-xs) * 0.9091);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--et-text-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.et-card__specs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.et-card__specs-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.625rem;
  font-size: var(--et-text-caption);
  line-height: 1.35;
  border-bottom: var(--et-border-width) dashed var(--et-border);
  padding-bottom: 0.375rem;
}
.et-card__specs-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.et-card__specs-label {
  color: var(--et-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.et-card__specs-value {
  color: var(--et-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
/* Hide on small viewports where hover isn't reliable */
@media (max-width: 991.98px) {
  .et-card__specs { display: none; }
}

/* ===== PROMO BANNERS ===== */
.et-promo {
  padding: calc(var(--et-section-gap) * 1.2) 0;
}

.et-promo__card {
  position: relative;
  border-radius: var(--et-card-radius);
  overflow: hidden;
  padding: calc(var(--et-block-pad) * 1.4286);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* plain tile (style ""): surface of the section scheme; dark / accent / glass below override it */
  background: var(--et-surface);
  color: var(--et-text);
  cursor: pointer;
  transition: transform var(--et-transition), box-shadow var(--et-transition);
}
.et-promo__card:hover {
  box-shadow: var(--et-shadow-xl);
}

.et-promo__card--dark {
  background: linear-gradient(135deg, var(--et-promo-dark-from) 0%, var(--et-promo-dark-to) 100%) !important;
  color: var(--et-text-light) !important;
}

.et-promo__card--accent {
  background: linear-gradient(135deg, var(--et-promo-accent-from) 0%, var(--et-promo-accent-to) 100%) !important;
  color: var(--et-accent-contrast) !important;
}

.et-promo__card--glass {
  background: var(--et-surface-glass);
  backdrop-filter: var(--et-blur);
  border: var(--et-border-width) solid var(--et-border-glass);
  color: var(--et-text);
}

.et-promo__label {
  font-size: var(--et-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 1.6);
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.et-promo__title {
  font-size: calc(var(--et-text-xl) * 1.1);
  font-weight: calc(var(--et-heading-weight) + 100);
  letter-spacing: var(--et-heading-tracking);
  margin: 0 0 0.5rem;
  line-height: var(--et-heading-leading);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-promo__text {
  font-size: var(--et-text-md);
  opacity: 0.75;
  margin: 0;
}

/* ===== ADVANTAGES ===== */
.et-advantages {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.et-advantage {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: calc(var(--et-card-pad) * 1.25);
  background: var(--et-surface);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  height: 100%;
  transition: all var(--et-transition);
}

@media (max-width: 767.98px) {
  .et-advantage {
    flex-direction: column;
    text-align: center;
    padding: var(--et-card-pad) calc(var(--et-card-pad) * 0.75);
    gap: 0.5rem;
  }
}
.et-advantage:hover {
  box-shadow: var(--et-shadow);
  border-color: transparent;
}

.et-advantage__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  border-radius: calc(var(--et-radius-sm) * 1.2);
  flex-shrink: 0;
  font-size: var(--et-text-lg);
}

.et-advantage strong {
  display: block;
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  margin-bottom: 0.125rem;
}

.et-advantage span {
  font-size: var(--et-text-caption);
  color: var(--et-text-muted);
  line-height: 1.4;
}

/* ===== BRANDS ===== */
.et-brands {
  padding: var(--space-xl) 0;
}

.et-brands__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.et-brands__item {
  font-size: var(--et-text-2xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text-muted);
  opacity: 0.3;
  transition: opacity var(--et-transition);
  letter-spacing: calc(-0.03em + var(--et-tracking-shift));
  cursor: pointer;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-brands__item:hover { opacity: 0.7; }

/* ===== FOOTER (v5.9.0 — modernized) ===== */
.et-footer {
  background: var(--et-footer-bg);
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  font-size: var(--et-text-sm);
}

/* Main grid: about (wider) + 4 link columns */
.et-footer__main { padding: 3rem 0 2.5rem; }
.et-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
.et-footer__about { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .et-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .et-footer__about { grid-column: auto; }
}
@media (min-width: 1200px) {
  .et-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
}

/* About column */
.et-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.et-footer__logo-icon {
  width: 36px;
  height: 36px;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  font-weight: 800;
  font-size: var(--et-text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--et-radius-sm);
}
.et-footer__logo-text {
  color: var(--et-footer-text);
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: var(--et-text-xl);
  letter-spacing: -0.03em;
}
.et-footer__desc {
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  font-size: var(--et-text-sm);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 340px;
}
.et-footer__social { display: flex; gap: 0.5rem; }
.et-footer__social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-footer-text) 12%, transparent);
  border-radius: var(--et-radius-sm);
  color: color-mix(in srgb, var(--et-footer-text) 55%, transparent);
  font-size: calc(var(--et-text-base) * 0.95);
  transition: all var(--et-transition);
}
.et-footer__social a:hover {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
  transform: translateY(-2px);
}

/* Link columns */
.et-footer__heading {
  color: var(--et-footer-text);
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  letter-spacing: calc(-0.01em + var(--et-tracking-shift));
  margin-bottom: 1rem;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.et-footer__links li { margin-bottom: 0.5rem; }
.et-footer__links a {
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  text-decoration: none;
  transition: all var(--et-transition);
  font-size: var(--et-text-sm);
}
.et-footer__links a:hover {
  color: var(--et-footer-text);
  padding-left: 4px;
}

/* Contact column */
.et-footer__contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.et-footer__contacts li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  font-size: var(--et-text-sm);
  line-height: 1.4;
}
.et-footer__contacts i {
  width: 16px;
  text-align: center;
  color: color-mix(in srgb, var(--et-footer-text) 55%, transparent);
  margin-top: 0.15em;
  flex-shrink: 0;
}
.et-footer__phone {
  color: var(--et-footer-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--et-text-base);
  display: block;
}
.et-footer__phone:hover { color: var(--et-footer-accent); }
.et-footer__schedule {
  display: block;
  font-size: var(--et-text-xs);
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  margin-top: 0.125rem;
}
.et-footer__contacts a {
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-footer__contacts a:hover { color: var(--et-footer-accent); }

.et-footer__messengers {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.et-footer__messenger {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--et-text-base);
  transition: all var(--et-transition);
}
.et-footer__messenger[title="Telegram"] { background: var(--et-brand-telegram); color: var(--et-on-status); }
.et-footer__messenger[title="Viber"] { background: var(--et-brand-viber); color: var(--et-on-status); }
.et-footer__messenger[title="WhatsApp"] { background: var(--et-brand-whatsapp); color: var(--et-on-status); }
.et-footer__messenger:hover { transform: scale(1.1); opacity: 0.9; }

/* Payment strip */
.et-footer__payment-strip {
  padding: 1rem 0;
  border-top: var(--et-border-width) solid color-mix(in srgb, var(--et-footer-text) 8%, transparent);
  border-bottom: var(--et-border-width) solid color-mix(in srgb, var(--et-footer-text) 8%, transparent);
}
.et-footer__payment-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.et-footer__payment-label {
  font-size: var(--et-text-xs);
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  font-weight: 600;
}
.et-footer__payment-icons {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 0.75rem;
  font-size: calc(var(--et-text-2xl) * 1.1667);
  color: color-mix(in srgb, var(--et-footer-text) 55%, transparent);
}
.et-footer__payment-icons i { transition: color var(--et-transition); }
.et-footer__payment-icons i:hover { color: var(--et-footer-text); }
/* label next to the icon: small caption (generic icons like bank or cash need it), not icon-sized text */
.et-footer__pay-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.et-footer__pay-item > span { font-size: var(--et-text-xs); font-weight: 500; line-height: 1.2; }
.et-footer__security-icons {
  display: flex;
  gap: 1rem;
  font-size: var(--et-text-xs);
  color: color-mix(in srgb, var(--et-footer-text) 55%, transparent);
  margin-left: auto;
}
.et-footer__security-icons span { display: inline-flex; align-items: center; gap: 0.375rem; }
.et-footer__security-icons i { color: var(--et-success); }

/* Bottom bar */
.et-footer__bottom {
  padding: 1rem 0;
  font-size: var(--et-text-xs);
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
}
.et-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}
.et-footer__legal {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 1.25rem;
}
.et-footer__legal a,
.et-footer__dev {
  color: color-mix(in srgb, var(--et-footer-text) 72%, transparent);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-footer__legal a:hover,
.et-footer__dev:hover { color: var(--et-footer-accent); }
.et-footer__dev { margin-left: auto; }

@media (max-width: 767.98px) {
  .et-footer__main { padding: 2rem 0 1.5rem; }
  .et-footer__grid { gap: 1.5rem; }
  .et-footer__heading { font-size: var(--et-text-sm); margin-bottom: 0.75rem; }
  .et-footer__bottom-inner { justify-content: center; text-align: center; }
  .et-footer__dev { margin-left: 0; width: 100%; }
  .et-footer__payment-inner { justify-content: center; }
  .et-footer__security-icons { margin-left: 0; }
}

/* ===== FLOATING TOOLS TRIGGER ===== */
.et-tools-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateX(50%) translateY(-50%);
  z-index: 9998;
  width: 44px;
  height: 44px;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--et-text-lg);
  box-shadow: var(--et-shadow-lg);
  opacity: 0.5;
  transition: all 0.3s var(--ease-spring);
}
.et-tools-trigger:hover {
  transform: translateX(0) translateY(-50%);
  border-radius: var(--et-radius-sm) 0 0 var(--et-radius-sm);
  opacity: 1;
  background: var(--et-accent-hover);
}

/* ===== TOOLS PANEL ===== */
.et-tools {
  z-index: 9999;
}


.et-tools__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--et-surface);
  border-left: var(--et-border-width) solid var(--et-border);
  padding: 1.25rem 1rem;
  overflow-y: auto;
  box-shadow: var(--et-shadow-xl);
  display: none;
  z-index: 10001;
}
.et-tools__panel.is-open { display: block; animation: et-tools-in 0.25s var(--ease-out-expo); }
@keyframes et-tools-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .et-tools__panel.is-open { animation: none; } }
@media (max-width: 767.98px) {
  .et-tools__panel { top: auto; width: 100%; height: 72vh; border-left: 0; border-top: var(--et-border-width) solid var(--et-border); border-radius: 12px 12px 0 0; }
}
.et-tools__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.et-tools__title { font-weight: 700; font-size: var(--et-text-md); color: var(--et-text); }
.et-tools__close {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--et-text-muted);
  padding: 0 0.875rem;
  cursor: pointer;
}
.et-tools__close:hover { color: var(--et-text); }










/* Tools tabs */




/* Radial theme reveal: the circle clip-path animation in theme-customizer.js
   drives the whole transition; default cross-fade must not interfere */
@media (prefers-reduced-motion: no-preference) {
  html:active-view-transition:not(:active-view-transition-type(et-page))::view-transition-old(root),
  html:active-view-transition:not(:active-view-transition-type(et-page))::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
}

/* ---------- Seasonal modes (decor layers on [data-season]) ---------- */

/* New Year: falling snow overlay (pure CSS, no markup, clicks pass through).
   Blue-gray flakes stay visible on the light theme; pure white on dark. */
@media (prefers-reduced-motion: no-preference) {
  html[data-season="new-year"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    background-image:
      radial-gradient(2px 2px at 20px 30px, rgba(148, 163, 184, 0.7) 50%, transparent 60%),
      radial-gradient(2.5px 2.5px at 110px 90px, rgba(147, 197, 253, 0.65) 50%, transparent 60%),
      radial-gradient(1.5px 1.5px at 200px 160px, rgba(148, 163, 184, 0.55) 50%, transparent 60%),
      radial-gradient(3px 3px at 300px 60px, rgba(125, 176, 226, 0.6) 50%, transparent 60%);
    background-size: 340px 340px, 460px 460px, 580px 580px, 700px 700px;
    animation: et-snowfall 18s linear infinite;
  }
  html[data-season="new-year"].dark-theme body::after {
    background-image:
      radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9) 50%, transparent 60%),
      radial-gradient(2.5px 2.5px at 110px 90px, rgba(255, 255, 255, 0.75) 50%, transparent 60%),
      radial-gradient(1.5px 1.5px at 200px 160px, rgba(255, 255, 255, 0.6) 50%, transparent 60%),
      radial-gradient(3px 3px at 300px 60px, rgba(224, 242, 254, 0.8) 50%, transparent 60%);
  }
  @keyframes et-snowfall {
    to { background-position: 40px 340px, -60px 460px, 30px 580px, -20px 700px; }
  }
}

/* Black Friday: pulsing glow draws the eye to the flash-sale block */
@media (prefers-reduced-motion: no-preference) {
  html[data-season="black-friday"] .et-block-theme--sale {
    animation: et-bf-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes et-bf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--et-danger) 0%, transparent); }
  50% { box-shadow: 0 0 28px 2px color-mix(in srgb, var(--et-danger) 35%, transparent); }
}

.et-tools__preset {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  background: none;
  color: var(--et-text-secondary);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-tools__preset i { font-size: calc(var(--et-text-xs) * 0.9091); }
.et-tools__preset:hover {
  border-color: var(--et-accent);
  color: var(--et-accent-text);
  background: var(--et-accent-light);
}
.et-tools__preset:active { transform: scale(0.96); }
.et-tools__preset.is-active {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
}

/* Design presets tab */
.et-tools__preset-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.et-tools__preset-list .et-tools__preset { justify-content: flex-start; border-radius: var(--et-radius-xs); }
.et-tools__preset-row { display: flex; gap: 0.375rem; }
.et-tools__preset-row > .et-tools__preset:first-child { flex: 1 1 auto; min-width: 0; }
.et-tools__preset-loading { color: var(--et-text-muted); padding: 0.5rem 0; }
.et-tools__hint {
  margin: 0.625rem 0 0;
  font-size: var(--et-text-xs);
  line-height: 1.5;
  color: var(--et-text-muted);
}

/* Share-my-look button */

/* Panel minimum width */
.et-tools__panel { min-width: 300px; }




/* ===== UTILITY ===== */
.et-main { min-height: 60vh; }

/* Reduced motion */
/* ===== MOBILE BOTTOM NAV ===== */
.et-bottom-nav {
  display: none;
}

@media (max-width: 991.98px) {
  .et-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--et-surface);
    border-top: var(--et-border-width) solid var(--et-border);
    padding: 0.375rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .et-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0;
    color: var(--et-text-muted);
    text-decoration: none;
    font-size: calc(var(--et-text-xs) * 0.8182);
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    transition: color var(--et-transition);
    position: relative;
    font-family: var(--et-font);
  }
  .et-bottom-nav__item i { font-size: var(--et-text-lg); }
  .et-bottom-nav__item:hover,
  .et-bottom-nav__item--active { color: var(--et-accent-text); }

  .et-bottom-nav__badge {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(12px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: calc(var(--et-text-xs) * 0.7273);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--et-on-status);
    background: var(--et-danger);
    border-radius: var(--et-radius-full);
  }

  /* Add bottom padding to body so content isn't hidden behind bottom nav */
  .et-footer { padding-bottom: 70px; }

  /* On mobile, header catalog btn opens drawer, not mega menu */
  .et-mega { display: none !important; }

  /* On product page (where mobile buybar is rendered), hide bottom-nav so
     the buy bar takes its place — single persistent action zone */
  body:has(.et-mobile-buybar) .et-bottom-nav { display: none; }
}

/* ===== BENTO (reserved for future) ===== */

/* ===== PRODUCT CARD V2 — Actions + Filmstrip ===== */

.et-card__img-main { transition: opacity 0.3s ease; }

/* Image indicators (dots showing which photo is active, injected by animations.js) */
.et-card__img-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.et-card__image:hover .et-card__img-dots { opacity: 1; }
.et-card__img-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease;
}
.et-card__img-dot.is-active { background: var(--et-accent); }


/* Always-visible action buttons (wishlist, compare) — top right */
.et-card__actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  z-index: 3;
}

.et-card__action-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--et-text-muted);
  font-size: var(--et-text-caption);
  cursor: pointer;
  transition: all 0.2s var(--ease-spring);
}
.et-card__action-btn:hover {
  color: var(--et-danger);
  background: var(--et-surface);
  box-shadow: var(--et-shadow);
  transform: scale(1.1);
}
.et-card__action-btn:active {
  transform: scale(0.9);
}


/* ===== HERO SPOTLIGHT (mouse-follow glow) ===== */
.et-hero__slider {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  background:
    radial-gradient(600px circle at var(--spotlight-x) var(--spotlight-y), rgba(255,255,255,0.12) 0%, transparent 60%),
    var(--et-gradient-hero);
}

/* ===== CUSTOM CURSOR ===== */
.et-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 0.3s ease;
}

.et-cursor__dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-spring), height 0.3s var(--ease-spring), background 0.3s ease;
}

.et-cursor.is-hovering .et-cursor__dot {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
}

.et-cursor__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--et-text-xs) * 0.8182);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 1.6);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.et-cursor.is-hovering .et-cursor__label {
  opacity: 1;
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  .et-cursor { display: none; }
}

/* Hide default cursor when custom is active */
@media (hover: hover) and (pointer: fine) {
  [data-cursor] { cursor: none; }
  [data-cursor] * { cursor: none; }
}

/* ===== KINETIC COMMERCE — Animation System ===== */

/* Display typography */
.et-display {
  font-family: var(--et-font-display);
  font-weight: var(--et-heading-weight);
  letter-spacing: calc(-0.04em + var(--et-tracking-shift));
  line-height: calc(var(--et-heading-leading) * 0.875);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-display--xl { font-size: var(--et-text-5xl); }
.et-display--lg { font-size: var(--et-text-4xl); }
.et-display--md { font-size: var(--et-text-3xl); }

/* Gradient text */
.et-gradient-text {
  background: var(--et-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Magnetic button style ---- */
[data-magnetic] {
  transition: none;
  will-change: transform;
}

/* Glow highlight following cursor */
[data-tilt-glow] {
  --tilt-glow-x: 50%;
  --tilt-glow-y: 50%;
  position: relative;
  overflow: hidden;
}
[data-tilt-glow]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--tilt-glow-x) var(--tilt-glow-y), rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
[data-tilt-glow]:hover::after {
  opacity: 1;
}

/* ---- Marquee ---- */
.et-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-lg) 0;
  margin-top: 1.25rem;
  max-width: 100%;
}

.et-marquee__track {
  display: inline-flex;
  animation: marqueeScroll 30s linear infinite;
}

.et-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  font-family: var(--et-font-display);
  font-size: var(--et-text-3xl);
  font-weight: var(--et-heading-weight);
  color: var(--et-text-muted);
  white-space: nowrap;
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-marquee__item--accent {
  color: var(--et-accent-text);
}

.et-marquee__separator {
  width: 8px;
  height: 8px;
  background: var(--et-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

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

/* ---- Hero Kinetic ---- */
.et-hero__slide-title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-4xl);
  font-weight: var(--et-heading-weight);
  letter-spacing: calc(-0.04em + var(--et-tracking-shift));
  line-height: calc(var(--et-heading-leading) * 0.875);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

@media (min-width: 768px) {
  .et-hero__slide-title {
    font-size: var(--et-text-5xl);
  }
}

/* Staggered hero content */
.et-hero__slide--active .et-hero__slide-badge {
  animation: heroReveal 0.6s var(--ease-out-expo) 0.1s both;
}
.et-hero__slide--active .et-hero__slide-title {
  animation: heroReveal 0.7s var(--ease-out-expo) 0.2s both;
}
.et-hero__slide--active .et-hero__slide-text {
  animation: heroReveal 0.7s var(--ease-out-expo) 0.35s both;
}
.et-hero__slide--active .et-hero__slide-btn {
  animation: heroReveal 0.6s var(--ease-out-expo) 0.5s both;
}
.et-hero__slide--active .et-hero__slide-image img {
  animation: heroImageReveal 0.9s var(--ease-out-expo) 0.2s both;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroImageReveal {
  from { opacity: 0; transform: scale(0.9) translateX(40px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}



.et-card__remove-btn {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.375rem;
  background: none;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all var(--et-transition);
}
.et-card__remove-btn:hover {
  color: var(--et-danger);
  border-color: var(--et-danger);
  background: var(--et-danger-soft);
}

/* Wishlist heart spring */
.et-card__wishlist {
  transition: all 0.3s var(--ease-spring);
}
.et-card__wishlist:active {
  transform: scale(0.8) !important;
}

/* ---- Home tiles (advantages, categories, promo): shadow always; the lift of the stub only without data-hover
   (elbuz_motion.css moves them by the axis) and without reduced motion. Durations follow the motion level ---- */
:is(.et-advantage, .et-categories__item, .et-promo__card) {
  transition: transform var(--et-motion-medium, 0.4s) var(--ease-spring), box-shadow var(--et-motion-medium, 0.4s) var(--et-motion-ease, ease),
    border-color var(--et-transition), color var(--et-transition);
}
.et-advantage:hover { box-shadow: var(--et-shadow-lg); }
@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-hover], [data-motion="none"])) .et-advantage:hover { transform: translateY(-4px); }
  :where(html:not([data-hover], [data-motion="none"])) .et-categories__item:hover { transform: translateY(-5px) scale(1.02); }
  :where(html:not([data-hover], [data-motion="none"])) .et-promo__card:hover { transform: translateY(-4px) scale(1.01); }
}

/* ===== SITEMAP ===== */
.et-sitemap__heading {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-sitemap__heading i { color: var(--et-accent-text); font-size: var(--et-text-base); }
.et-sitemap__section { padding: 1.25rem; }
.et-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.et-sitemap__group-title {
  display: block;
  font-weight: 700;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  margin-bottom: 0.5rem;
  text-decoration: none;
}
.et-sitemap__group-title:hover { color: var(--et-accent-text); }
.et-sitemap__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.et-sitemap__list li { padding: 0.25rem 0; }
.et-sitemap__list a {
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  text-decoration: none;
}
.et-sitemap__list a:hover { color: var(--et-accent-text); }
.et-sitemap__sublist {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0.25rem 0 0;
}
.et-sitemap__sublist a { font-size: var(--et-text-caption); color: var(--et-text-muted); }
.et-sitemap__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* ===== SCROLL TO TOP ===== */
.et-scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--et-surface);
  border-radius: 50%;
  box-shadow: var(--et-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--et-text-secondary);
  font-size: var(--et-text-md);
  z-index: 1040;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.3s var(--ease-spring);
  pointer-events: none;
}
.et-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.et-scroll-top:hover {
  color: var(--et-accent-text);
  box-shadow: var(--et-shadow-lg);
  transform: translateY(-2px);
}

.et-scroll-top__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.et-scroll-top__track {
  stroke: var(--et-border);
}
.et-scroll-top__bar {
  stroke: var(--et-accent);
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s ease;
}

@media (max-width: 991.98px) {
  .et-scroll-top { bottom: 4.5rem; right: 1rem; }
}


/* ===== MORPHING BURGER ===== */
.et-burger {
  width: 18px;
  height: 14px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.et-burger__line {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: all 0.3s var(--ease-spring);
  transform-origin: center;
}
.et-burger__line:nth-child(1) { width: 50%; }
.et-burger__line:nth-child(2) { width: 100%; }
.et-burger__line:nth-child(3) { width: 75%; }

.et-burger.is-active .et-burger__line:nth-child(1) {
  width: 100%;
  transform: translateY(6px) rotate(45deg);
}
.et-burger.is-active .et-burger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.et-burger.is-active .et-burger__line:nth-child(3) {
  width: 100%;
  transform: translateY(-6px) rotate(-45deg);
}

/* ===== SEARCH FOCUS ===== */
.et-header__search-input:focus {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px rgba(var(--et-accent-rgb), 0.15);
}

/* ===== HEART FILL ANIMATION ===== */
.et-card__action-btn .fa-heart {
  transition: all 0.3s var(--ease-spring);
}
.et-card__action-btn.is-liked .fa-heart {
  font-weight: 900;
  color: var(--et-danger);
  animation: heartPop 0.4s var(--ease-spring);
}
@keyframes heartPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ===== FLY TO CART ===== */
.et-fly-item {
  position: fixed;
  z-index: 99999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--et-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--et-accent-contrast);
  font-size: var(--et-text-base);
  pointer-events: none;
  transition: none;
}

/* ===== STARS FILL ===== */
.et-card__stars i {
  opacity: 0;
  transform: scale(0);
}
.et-card__stars.is-filled i {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s var(--ease-spring);
}

/* ===== PERFORMANCE ===== */
.et-advantages,
.et-promo,
.et-marquee {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}
.et-advantages,
.et-promo,
.et-marquee {
  margin-top: 0;
}

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */

/* Breadcrumbs */
.et-breadcrumbs {
  padding: 1rem 0;
  font-size: var(--et-text-sm);
}
.et-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.et-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.et-breadcrumbs__link { color: var(--et-text-muted); text-decoration: none; }
.et-breadcrumbs__link:hover { color: var(--et-accent-text); }
.et-breadcrumbs__text { color: var(--et-text); font-weight: 600; }
.et-breadcrumbs__separator { color: var(--et-text-muted); font-size: calc(var(--et-text-xs) * 0.7273); }

/* Category header */
.et-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--space-lg);
}
.et-category-header__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: var(--et-heading-weight);
  letter-spacing: calc(-0.03em + var(--et-tracking-shift));
  margin: 0;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-category-header__count {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  margin-left: 0.5rem;
  font-weight: 400;
}
.et-category-header__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* View toggle */
.et-view-toggle {
  display: flex;
  gap: 0.25rem;
}
.et-view-toggle__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  background: none;
  color: var(--et-text-muted);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-view-toggle__btn.is-active,
.et-view-toggle__btn:hover {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
}
/* Hide compact (5 cols) and grid (4 cols) view buttons on mobile — only 2-col grid and list make sense */
@media (max-width: 767.98px) {
  .et-view-toggle__btn[data-view="compact"],
  .et-view-toggle__btn[data-view="grid"] {
    display: none;
  }
}

/* Sort select */
.et-sort-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  background: var(--et-surface);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  color: var(--et-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Category layout */
.et-category-layout {
  display: flex;
  gap: calc(var(--et-grid-gap) * 1.5);
}
.et-category-layout__sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--et-surface);
  border-radius: var(--et-card-radius);
  padding: calc(var(--et-block-pad) * 0.7143);
  margin-bottom: 30px;
}
.et-category-layout__main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .et-category-layout__sidebar { display: none; }
  .et-category-layout__sidebar.is-open {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    width: 100%;
    max-height: 80vh;
    background: var(--et-surface);
    border-radius: var(--et-radius) var(--et-radius) 0 0;
    box-shadow: var(--et-shadow-up);
    padding: 1.5rem;
    overflow-y: auto;
    animation: sheetUp 0.3s var(--ease-out-expo);
  }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Filters */
.et-filter__section {
  border-bottom: var(--et-border-width) solid var(--et-border);
  padding: 1rem 0;
}
.et-filter__section:first-child { padding-top: 0; }

.et-filter__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: 0;
  font-family: var(--et-font);
}
.et-filter__title i { font-size: calc(var(--et-text-xs) * 0.7273); color: var(--et-text-muted); transition: transform 0.2s ease; }
.et-filter__title.is-collapsed i { transform: rotate(-90deg); }

.et-filter__body { padding-top: 0.75rem; }
.et-filter__title.is-collapsed + .et-filter__body { display: none; }

.et-filter__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  cursor: pointer;
}
.et-filter__checkbox input { accent-color: var(--et-accent); }
.et-filter__checkbox-count {
  margin-left: auto;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}

.et-filter__range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.et-filter__range input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  font-size: var(--et-text-sm);
  font-family: var(--et-font);
  color: var(--et-text);
  width: 100%;
  text-align: center;
}
.et-filter__range-sep { color: var(--et-text-muted); }

/* Filter category list */
.et-filter__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.et-filter__list-item {
  margin: 0;
}

.et-filter__list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--et-radius-xs);
  color: var(--et-text-secondary);
  text-decoration: none;
  font-size: var(--et-text-sm);
  transition: all var(--et-transition);
}
.et-filter__list-link:hover {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}
.et-filter__list-link.is-active {
  color: var(--et-accent-text);
  font-weight: 700;
}

.et-filter__list-count {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  min-width: 24px;
  text-align: right;
}
.et-filter__list-link:hover .et-filter__list-count {
  color: var(--et-accent-text);
}

/* Filter toggle icon rotation */
.et-filter__toggle-icon {
  transition: transform 0.2s ease;
  font-size: calc(var(--et-text-xs) * 0.7273);
}
.collapsed .et-filter__toggle-icon {
  transform: rotate(-90deg);
}

/* Filter range inputs */
.et-filter__range-inputs {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.et-filter__range-field {
  flex: 1;
}
.et-filter__range-label {
  display: block;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  margin-bottom: 0.25rem;
}
.et-filter__range-input {
  padding: 0.375rem 0.5rem;
  font-size: var(--et-text-sm);
  text-align: center;
}
.et-filter__range-sep {
  color: var(--et-text-muted);
  padding-bottom: 0.375rem;
}

/* Filter header (mobile) */
.et-filter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-filter__header-title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-filter__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--et-text-muted);
  font-size: var(--et-text-lg);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--et-transition);
}
.et-filter__close:hover {
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}

/* Filter overlay (mobile) */
.et-filter-overlay {
  display: none;
}
@media (max-width: 991.98px) {
  .et-category-layout__sidebar.is-open .et-filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }
}

.et-filter__reset {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  background: none;
  color: var(--et-text-muted);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-filter__reset:hover { border-color: var(--et-accent); color: var(--et-accent-text); }

/* Mobile filter button */
.et-filter-btn {
  display: none;
}
@media (max-width: 991.98px) {
  .et-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: var(--et-border-width) solid var(--et-border);
    border-radius: var(--et-radius-xs);
    background: var(--et-surface);
    color: var(--et-text-secondary);
    font-family: var(--et-font);
    font-size: var(--et-text-sm);
    cursor: pointer;
  }
}

/* Category toolbar */
.et-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.et-category-toolbar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.et-category-toolbar__right .et-sort-select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
  .et-category-toolbar__right { flex: 1 1 100%; }
  .et-category-toolbar__right .et-sort-select { flex: 1 1 0; }
}
.et-category-showing {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
}

/* Category header description */
.et-category-header__description {
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  margin: 0.5rem 0 0;
}

/* Product grid (category, search, manufacturer, specials) — view modes.
   The breakpoints pick the wanted number of columns (--et-grid-n, by the window; --et-cols* come from the section wrapper);
   auto-fill then drops columns while a card would get narrower than --et-card-min — the grid follows its own width
   (filter sidebar, side modules, the design editor panel). */
.et-product-grid {
  --et-listing-cols: 4;
  --et-grid-n: var(--et-cols-mobile, 2);
  --et-card-min: 0px;   /* phones: no side columns, the window sets the count (as col-6 did) */
  --et-listing-gap: calc(var(--et-grid-gap) * 1.5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--et-card-min), calc((100% - (var(--et-grid-n) - 1) * var(--et-listing-gap)) / var(--et-grid-n))), 1fr));
  gap: var(--et-listing-gap);
  padding-block: 1.25rem;
  border-radius: var(--et-radius);
  transition: opacity 0.2s ease;
}
.et-product-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .et-product-grid { --et-grid-n: var(--et-cols-tablet, 3); --et-card-min: 11rem; }
}
@media (min-width: 992px) {
  .et-product-grid { --et-grid-n: var(--et-cols, var(--et-listing-cols)); }
  .et-product-grid[data-grid-view="grid-3"] { --et-grid-n: 3; }
  .et-product-grid[data-grid-view="compact"] { --et-grid-n: 5; --et-card-min: 9.5rem; }
}
/* Filter landing page without a category (template/extension/module/elbuz_filter_landing.twig): the module filter in a column
   beside the grid from 992 px, on phones the module opens its own panel. Tokens only. */
.et-landing__layout { display: grid; gap: calc(var(--et-grid-gap) * 1.5); padding-bottom: var(--et-block-pad); }
.et-landing__main { min-width: 0; }
.et-landing__filters > * + * { margin-top: var(--et-grid-gap); }
@media (min-width: 992px) {
  .et-landing--filters .et-landing__layout { grid-template-columns: var(--et-listing-sidebar, 16.25rem) minmax(0, 1fr); align-items: start; }
}
.et-product-grid[data-grid-view="grid-3"] .et-card__title {
  font-size: var(--et-text-base);
  -webkit-line-clamp: 2;
}
.et-product-grid[data-grid-view="grid-3"] .et-card__price-current {
  font-size: var(--et-text-lg);
}

/* List view — horizontal cards, full width */
.et-product-grid[data-grid-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.et-product-grid[data-grid-view="list"] .et-card {
  flex-direction: row;
  align-items: stretch;
}
.et-product-grid[data-grid-view="list"] .et-card__image {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: auto;
  border-radius: var(--et-card-radius) 0 0 var(--et-card-radius);
}
.et-product-grid[data-grid-view="list"] .et-card__body {
  flex: 1;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}
.et-product-grid[data-grid-view="list"] .et-card__title {
  font-size: var(--et-text-base);
  -webkit-line-clamp: 2;
  margin-bottom: 0.25rem;
}
.et-product-grid[data-grid-view="list"] .et-card__price {
  margin-top: 0.5rem;
}
.et-product-grid[data-grid-view="list"] .et-card__price-current {
  font-size: var(--et-text-xl);
}
.et-product-grid[data-grid-view="list"] .et-card__footer {
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border-left: var(--et-border-width) solid var(--et-border);
  width: 180px;
  flex-shrink: 0;
}
.et-product-grid[data-grid-view="list"] .et-card__cart-btn {
  width: 100%;
  flex: 0 0 auto;
}
.et-product-grid[data-grid-view="list"] .et-card__actions {
  position: static;
  flex-direction: row;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* List view — specs become an inline column instead of dropdown */
.et-product-grid[data-grid-view="list"] .et-card__specs {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 260px;
  flex-shrink: 0;
  max-height: none;
  background: transparent;
  border: none;
  border-left: var(--et-border-width) solid var(--et-border);
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 1.25rem;
  overflow-y: auto;
  order: 1;
}
.et-product-grid[data-grid-view="list"] .et-card__footer {
  order: 2;
}
/* Don't square-corner card on hover in list view (no dropdown attached) */
.et-product-grid[data-grid-view="list"] .et-card:hover {
  border-bottom-left-radius: var(--et-card-radius);
  border-bottom-right-radius: var(--et-card-radius);
}

@media (max-width: 767.98px) {
  .et-product-grid[data-grid-view="list"] .et-card {
    flex-wrap: wrap;
  }
  .et-product-grid[data-grid-view="list"] .et-card__image { width: 120px; }
  .et-product-grid[data-grid-view="list"] .et-card__footer {
    flex-basis: 100%;
    width: 100%;
    border-left: none;
    border-top: var(--et-border-width) solid var(--et-border);
    flex-direction: row;
    align-items: center;
    padding: 0.75rem;
  }
  .et-product-grid[data-grid-view="list"] .et-card__title { font-size: var(--et-text-sm); }
  .et-product-grid[data-grid-view="list"] .et-card__specs { display: none; }
}

/* Pagination */
.et-pagination {
  padding: var(--space-xl) 0;
}
.et-pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.et-pagination__item {
  display: inline-flex;
}
.et-pagination__item--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.et-pagination__link {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  color: var(--et-text-secondary);
  text-decoration: none;
  font-size: var(--et-text-sm);
  font-weight: 600;
  transition: all var(--et-transition);
  cursor: pointer;
  background: none;
}
.et-pagination__link:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-pagination__item--active .et-pagination__link {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
}

/* ==========================================================================
   PRODUCT PAGE (v5.9.0 — Ozon-inspired redesign)
   ========================================================================== */

/* ---------- Section wrappers ---------- */
.et-product-section { padding: calc(var(--et-section-gap) / 2) 0; }
.et-product-section--main { padding-top: calc(var(--et-section-gap) * 0.8); padding-bottom: calc(var(--et-section-gap) * 0.8); }

.et-product-block {
  background: var(--et-surface);
  border: calc(var(--et-border-width) * 3) solid var(--et-border);
  border-radius: var(--et-card-radius);
  padding: var(--et-block-pad);
}
@media (max-width: 767.98px) {
  .et-product-block { padding: calc(var(--et-block-pad) * 0.7143) calc(var(--et-block-pad) * 0.5714); }
}
/* Product rows inside section blocks (Bootstrap .row.g-3) follow the grid gap */
.et-product-block .row.g-3 { --bs-gutter-x: var(--et-grid-gap); --bs-gutter-y: var(--et-grid-gap); }

/* ---------- Block themes (visual differentiation) ---------- */

/* Sale / Hits / New: colored backgrounds and borders removed — too noisy.
   Only title/icon accent colors remain. */
.et-block-theme--sale .et-section__title { color: var(--et-danger); }
.et-block-theme--sale .et-section__link { color: var(--et-danger); }

.et-block-theme--hits .et-section__title i { color: var(--et-hot); }

.et-block-theme--new .et-section__title i { color: var(--et-new); }

/* Featured — accent brand color */
.et-block-theme--featured {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  border-color: #93c5fd;
}
.et-block-theme--featured .et-section__title { color: var(--et-accent-text); }

/* Dark — inverted for strong contrast */
.et-block-theme--dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  color: rgba(255,255,255,0.8);
}
.et-block-theme--dark .et-section__title { color: #fff; }
.et-block-theme--dark .et-section__link { color: rgba(255,255,255,0.6); }
.et-block-theme--dark .et-section__link:hover { color: #fff; }

/* Gradient cool — blue/purple tones */
.et-block-theme--cool {
  background: linear-gradient(135deg, #eff6ff 0%, #e8e0ff 50%, #ddd6fe 100%);
  border-color: #a78bfa;
}
.et-block-theme--cool .et-section__title i { color: #6366f1; }

/* Gradient warm — peach/pink */
.et-block-theme--warm {
  background: linear-gradient(135deg, #fff7ed 0%, #ffe4e6 50%, #fecdd3 100%);
  border-color: #f9a8d4;
}
.et-block-theme--warm .et-section__title i { color: #ec4899; }

.et-product-section__title {
  overflow-wrap: anywhere;   /* one long word in a large display font never widens the page on phones */
  hyphens: auto;
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: var(--et-heading-weight);
  letter-spacing: var(--et-heading-tracking);
  margin: 0 0 1.25rem;
  color: var(--et-text);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-product-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.et-product-section__head .et-product-section__title { margin-bottom: 0; }
.et-product-section__content { font-size: var(--et-text-base); line-height: 1.7; color: var(--et-text); }
.et-product-section__content p { margin: 0 0 1em; }
.et-product-section__content p:last-child { margin-bottom: 0; }

/* Chip-style button (e.g. "Додати до порівняння") */
.et-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--et-accent-light);
  border: var(--et-border-width) solid transparent;
  border-radius: var(--et-chip-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-chip-btn:hover { background: var(--et-accent); color: var(--et-accent-contrast); }
.et-chip-btn i { font-size: 0.85em; }

/* ---------- Main layout: 3 columns ---------- */
.et-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* 1fr alone grows to the gallery's min-content on phones */
  gap: 1.25rem;
}
.et-product-layout > * { min-width: 0; }
@media (min-width: 768px) {
  .et-product-layout {
    grid-template-columns: minmax(320px, 1fr) minmax(280px, 1fr);
    gap: 1.5rem;
  }
  .et-product-layout__buybox { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .et-product-layout {
    grid-template-columns: minmax(480px, 1.45fr) minmax(320px, 1fr) 340px;
    gap: 1.75rem;
    align-items: start;
  }
  .et-product-layout__buybox { grid-column: auto; }
  .et-product-layout__gallery {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}

/* ---------- GALLERY ---------- */
.et-gallery {
  position: relative;
  background: var(--et-surface);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  padding: 0.75rem;
}
.et-gallery__badges {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  pointer-events: none;
}
.et-gallery__badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: var(--et-text-xs);
  font-weight: 700;
  color: var(--et-on-status);
  background: var(--et-danger);
  border-radius: var(--et-radius-xs);
  text-transform: uppercase;
  letter-spacing: calc(var(--et-eyebrow-tracking) * 0.6);
}
.et-gallery__badge--hit { background: var(--et-hot); }
.et-gallery__badge--sale { background: var(--et-sale); }
.et-gallery__badge--new { background: var(--et-success); }

.et-gallery__similar-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: color-mix(in srgb, var(--et-surface) 95%, transparent);
  backdrop-filter: blur(8px);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-text);
  cursor: pointer;
  box-shadow: var(--et-shadow);
  transition: all var(--et-transition);
}
.et-gallery__similar-btn:hover { color: var(--et-accent-text); border-color: var(--et-accent); }

.et-gallery__wrap {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.75rem;
  align-items: start;
}
.et-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.et-gallery__thumbs::-webkit-scrollbar { width: 3px; }
.et-gallery__thumbs::-webkit-scrollbar-thumb { background: var(--et-border); border-radius: 3px; }

.et-gallery__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--et-radius-xs);
  border: calc(var(--et-border-width) * 2) solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--et-transition);
  background: var(--et-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex-shrink: 0;
}
.et-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-gallery__thumb:hover { border-color: var(--et-accent-light); }
.et-gallery__thumb.is-active { border-color: var(--et-accent); }

.et-gallery__main {
  aspect-ratio: 1;
  border-radius: var(--et-card-radius);
  overflow: hidden;
  background: var(--et-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  position: relative;
}
.et-gallery__main img {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.et-gallery__main:hover img { transform: scale(1.06); }

.et-gallery__zoom-hint {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  color: var(--et-accent-contrast);
  border-radius: 50%;
  font-size: var(--et-text-sm);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--et-transition);
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.et-gallery__main:hover .et-gallery__zoom-hint {
  opacity: 1;
  transform: scale(1);
}

/* ---------- PhotoSwipe custom thumbnails sidebar ---------- */
.pswp__thumbs-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 132px;
  padding: 60px 12px 24px;
  display: flex;
  flex-direction: column;
  z-index: 1050;
  pointer-events: auto;
  overflow: hidden;
}
.pswp__thumbs-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.pswp__thumbs-sidebar__list::-webkit-scrollbar { width: 4px; }
.pswp__thumbs-sidebar__list::-webkit-scrollbar-track { background: transparent; }
.pswp__thumbs-sidebar__list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}

.pswp__thumbs-sidebar__btn {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  padding: 6px;
  background: rgba(255,255,255,0.08);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pswp__thumbs-sidebar__btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}
.pswp__thumbs-sidebar__btn.is-active {
  border-color: #fff;
  background: rgba(255,255,255,0.2);
}
.pswp__thumbs-sidebar__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Offset prev arrow past the sidebar on desktop */
@media (min-width: 768px) {
  .pswp .pswp__button--arrow--prev { left: 140px; }
}

/* Mobile: bottom strip instead of sidebar */
@media (max-width: 767.98px) {
  .pswp__thumbs-sidebar {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 110px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  }
  .pswp__thumbs-sidebar__list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px;
    justify-content: flex-start;
  }
  .pswp__thumbs-sidebar__btn {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 575.98px) {
  .et-gallery__wrap { grid-template-columns: minmax(0, 1fr); }
  .et-gallery__thumbs {
    flex-direction: row;
    max-height: none;
    max-width: 100%;
    min-width: 0;
    order: 2;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .et-gallery__main { order: 1; }
}

/* ---------- INFO COLUMN ---------- */
.et-product__title {
  font-family: var(--et-font-display);
  font-size: clamp(var(--et-text-xl), 2.4vw, var(--et-text-2xl));
  font-weight: var(--et-heading-weight);
  letter-spacing: calc(-0.025em + var(--et-tracking-shift));
  line-height: var(--et-heading-leading);
  margin: 0 0 0.875rem;
  color: var(--et-text);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-product__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1.25rem;
  margin-bottom: 1rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
}
.et-product__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.et-product__stars { color: var(--et-rating); font-size: var(--et-text-sm); letter-spacing: 1px; }
.et-product__rating-value { font-weight: 700; color: var(--et-text); }
.et-product__meta-link {
  color: var(--et-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color var(--et-transition);
}
.et-product__meta-link:hover { color: var(--et-accent-hover); text-decoration: underline; }
.et-product__sku {
  color: var(--et-text-muted);
  font-size: var(--et-text-xs);
}

/* Brand badge */
.et-product__brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  text-decoration: none;
  color: var(--et-text);
  margin-bottom: 1.25rem;
  transition: all var(--et-transition);
}
.et-product__brand-badge:hover { border-color: var(--et-accent); }
.et-product__brand-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border-radius: 50%;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: calc(var(--et-heading-weight) + 100);
  flex-shrink: 0;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-product__brand-info { display: flex; flex-direction: column; line-height: 1.3; }
.et-product__brand-name {
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.et-product__brand-name i { color: var(--et-success); font-size: 0.85em; }
.et-product__brand-meta { font-size: var(--et-text-xs); color: var(--et-text-muted); }

/* Variants */
.et-product__variants { margin-bottom: 1.25rem; }
.et-product__variant-label {
  display: block;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  margin-bottom: 0.625rem;
}
.et-product__variant-label strong { color: var(--et-text); font-weight: 600; }

.et-product__color-options { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.et-product__color-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: calc(var(--et-border-width) * 2) solid var(--et-border);
  cursor: pointer;
  padding: 0;
  transition: all var(--et-transition);
  position: relative;
  background-clip: padding-box;
}
.et-product__color-btn:hover { transform: scale(1.06); }
.et-product__color-btn.is-active {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px var(--et-accent-light);
}

.et-product__variants { margin-bottom: 0.75rem; }
.et-product__variant-label {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  margin-bottom: 0.375rem;
}
.et-product__variant-label .et-required { color: var(--et-error); }
.et-product__option-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.et-product__option-btn {
  padding: 0.5rem 1rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  background: var(--et-surface);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-product__option-btn:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-product__option-btn.is-active {
  border-color: var(--et-accent);
  background: var(--et-accent-light);
  color: var(--et-accent-text);
}

/* Option select, input, textarea, file, date */
.et-product__option-select,
.et-product__option-input,
.et-product__option-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: var(--et-input-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-input-radius);
  background: var(--et-surface);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  color: var(--et-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.et-product__option-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.et-product__option-select:focus,
.et-product__option-input:focus,
.et-product__option-textarea:focus {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px var(--et-accent-ghost);
}
.et-product__option-textarea { resize: vertical; min-height: 80px; }
.et-product__option-file {
  padding: 0.5rem;
  border: var(--et-border-width) dashed var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-bg);
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  width: 100%;
  cursor: pointer;
}
.et-product__option-label {
  display: block;
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  margin-bottom: 0.375rem;
}
.et-product__option-label .et-req { color: var(--et-error); }
.et-product__option-group { margin-bottom: 0.75rem; }
.et-product__option-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: var(--et-text-sm);
  cursor: pointer;
}
.et-product__option-check input[type="radio"],
.et-product__option-check input[type="checkbox"] {
  accent-color: var(--et-accent);
  width: 1rem;
  height: 1rem;
}

/* About card — mini specs preview */
.et-product__about {
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}
.et-product__about-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-product__about-title {
  margin: 0;
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-product__about-link {
  font-size: var(--et-text-sm);
  color: var(--et-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  transition: color var(--et-transition);
}
.et-product__about-link i { font-size: 0.75em; }
.et-product__about-link:hover { color: var(--et-accent-hover); }

.et-product__about-list { margin: 0; padding: 0; }
.et-product__about-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: var(--et-text-sm);
  border-bottom: var(--et-border-width) dashed var(--et-border);
}
.et-product__about-row:last-child { border-bottom: 0; }
.et-product__about-key {
  margin: 0;
  color: var(--et-text-muted);
  line-height: 1.4;
}
.et-product__about-val {
  margin: 0;
  color: var(--et-text);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- BUYBOX (right column, sticky) ---------- */
.et-buybox {
  background: var(--et-surface);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  padding: calc(var(--et-block-pad) * 0.7143);
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.et-buybox__sale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: linear-gradient(135deg, var(--et-danger-soft), var(--et-error-bg));
  border: var(--et-border-width) solid var(--et-danger-border);
  border-radius: var(--et-radius-sm);
  color: var(--et-danger);
  font-size: var(--et-text-sm);
  font-weight: 600;
}
.et-buybox__sale-label { display: inline-flex; align-items: center; gap: 0.375rem; }
.et-buybox__sale-label i { color: var(--et-hot-strong); }
.et-buybox__sale-timer { font-size: var(--et-text-xs); color: var(--et-text-muted); font-weight: 500; }

/* main-product item "fit" (items/fit.twig, js/elbuz_fit.js): a pill with its own icon and words per level, not only a colour */
.et-product__fit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; align-self: flex-start; min-height: 1.75rem; max-width: 100%; padding: 0.125rem 0.75rem 0.125rem 0.375rem; border-radius: var(--et-radius-full, 999px); background: var(--et-surface-2); color: var(--et-text); font-size: var(--et-text-sm); font-weight: 700; }
.et-product__fit[hidden] { display: none; }
.et-product__fit-icon { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--et-text-muted); color: var(--et-surface); font-size: 0.625rem; }
.et-product__fit--ok { background: color-mix(in oklab, var(--et-c-mint, var(--et-success)) 70%, var(--et-surface)); }
.et-product__fit--ok .et-product__fit-icon { background: var(--et-success); }
.et-product__fit--warn { background: color-mix(in oklab, var(--et-c-butter, var(--et-warning)) 70%, var(--et-surface)); }
.et-product__fit--warn .et-product__fit-icon { background: var(--et-warning); }
.et-product__fit--no { color: var(--et-text-muted); }
.et-product__fit-link { color: var(--et-accent-text, var(--et-accent)); font-weight: 700; }

.et-buybox__stock-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--et-text-sm);
  color: var(--et-danger);
  font-weight: 600;
}
.et-buybox__stock-dot {
  width: 8px;
  height: 8px;
  background: var(--et-danger);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-danger) 15%, transparent);
  animation: etBuyboxPulse 1.8s ease-in-out infinite;
}
@keyframes etBuyboxPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-danger) 15%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--et-danger) 8%, transparent); }
}

.et-buybox__price {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.et-buybox__price-sub { display: inline-flex; align-items: center; gap: 0.625rem; }
.et-buybox__price-old {
  font-size: var(--et-text-base);
  color: var(--et-text-muted);
  text-decoration: line-through;
}
.et-buybox__price-discount {
  font-size: var(--et-text-xs);
  font-weight: 700;
  color: var(--et-sale);
  background: color-mix(in srgb, var(--et-sale) 10%, transparent);
  padding: 0.125rem 0.5rem;
  border-radius: var(--et-radius-xs);
}
.et-buybox__price-current {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-3xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: calc(-0.03em + var(--et-tracking-shift));
  line-height: calc(var(--et-heading-leading) * 0.8333);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

/* Quantity selector */
.et-buybox__quantity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  overflow: hidden;
}
.et-buybox__qty-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--et-bg);
  border: 0;
  color: var(--et-text);
  cursor: pointer;
  font-size: var(--et-text-sm);
  transition: all var(--et-transition);
}
.et-buybox__qty-btn:hover { background: var(--et-accent-light); color: var(--et-accent-text); }
.et-buybox__qty-input {
  width: 48px;
  height: 38px;
  text-align: center;
  border: 0;
  border-left: var(--et-border-width) solid var(--et-border);
  border-right: var(--et-border-width) solid var(--et-border);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  background: var(--et-surface);
  -moz-appearance: textfield;
}
.et-buybox__qty-input::-webkit-outer-spin-button,
.et-buybox__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cart button row (cart + wishlist circle) */
.et-buybox__cart-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.et-buybox__cart-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.75rem 0.875rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}
.et-buybox__cart-btn:hover { background: var(--et-accent-hover); transform: translateY(-1px); }
.et-buybox__cart-btn:active { transform: scale(0.98); }
.et-buybox__cart-btn-title {
  font-size: var(--et-text-base);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.et-buybox__cart-btn-sub {
  font-size: var(--et-text-xs);
  font-weight: 500;
  opacity: 0.9;
}

.et-buybox__wishlist-icon {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  color: var(--et-text-muted);
  font-size: var(--et-text-lg);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-buybox__wishlist-icon:hover {
  color: var(--et-danger);
  border-color: var(--et-danger);
  background: var(--et-danger-soft);
}

.et-buybox__buy-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--et-surface);
  border: calc(var(--et-border-width) * 2) solid var(--et-accent);
  color: var(--et-accent-text);
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--et-transition);
}
.et-buybox__buy-btn:hover { background: var(--et-accent-light); }

/* Delivery card */
.et-buybox__delivery-card {
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  padding: 0.875rem 1rem;
}
.et-buybox__delivery-title {
  margin: 0 0 0.5rem;
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
}
.et-buybox__delivery-from {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
  font-size: var(--et-text-xs);
  color: var(--et-text-secondary);
}
.et-buybox__delivery-from i { color: var(--et-accent-text); }
.et-buybox__delivery-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.375rem 0;
  font-size: var(--et-text-xs);
}
.et-buybox__delivery-icon { color: var(--et-accent-text); width: 16px; text-align: center; margin-top: 0.1em; }
.et-buybox__delivery-text { display: flex; flex-direction: column; line-height: 1.35; }
.et-buybox__delivery-text strong { font-size: var(--et-text-sm); color: var(--et-text); font-weight: 600; }
.et-buybox__delivery-text span { color: var(--et-text-muted); }

/* Payment */
.et-buybox__payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: var(--et-border-width) solid var(--et-border);
}
.et-buybox__payment-label { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-buybox__payment-icons { display: inline-flex; gap: 0.625rem; font-size: calc(var(--et-text-xl) * 1.08); color: var(--et-text-muted); }
.et-buybox__payment-icons i { transition: color var(--et-transition); }
.et-buybox__payment-icons i:hover { color: var(--et-accent-text); }

.et-buybox__extra-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.et-buybox__action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text-secondary);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-buybox__action-link i {
  font-size: 0.95em;
  color: var(--et-accent-text);
  transition: color var(--et-transition);
}
.et-buybox__action-link:hover {
  background: var(--et-accent-light);
  border-color: var(--et-accent);
  color: var(--et-accent-text);
  transform: translateY(-1px);
}
.et-buybox__action-link:hover i { color: var(--et-accent-text); }
.et-buybox__action-link:active { transform: translateY(0); }

.et-buybox__found-cheaper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  background: linear-gradient(135deg, var(--et-warning-soft), var(--et-warning-tint));
  border: var(--et-border-width) solid var(--et-warning-border);
  border-radius: var(--et-radius-sm);
  color: var(--et-warning-text);
  font-size: var(--et-text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-buybox__found-cheaper i { color: var(--et-warning); }
.et-buybox__found-cheaper:hover {
  background: linear-gradient(135deg, var(--et-warning-tint), var(--et-warning-border));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--et-warning) 15%, transparent);
}
/* Lowest price of the 30 days before a discount (main-product/items/price.twig, elbuz_product_watch) */
.et-buybox__lowest { flex-basis: 100%; margin: 0.25rem 0 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
/* Product fees: deposit, container, recycling (module elbuz_fees): at the price (main-product/items/price.twig) and in the Smart Checkout cart line */
.et-product__fee { margin: 0.25rem 0 0; font-size: var(--et-text-sm); color: var(--et-text-muted); }
.et-cart-row__fee { margin: 0.25rem 0 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
/* Points of the elbuz_specials loyalty: card, product, header chip, Smart Checkout summary, account page (account/reward.twig) */
.et-card__points,
.et-product__points { margin: 0.25rem 0 0; font-size: var(--et-text-xs); font-weight: 600; color: var(--et-success); }
.et-product__points { font-size: var(--et-text-sm); }
.et-header__points { width: auto; gap: 0.25rem; padding: 0 0.5rem; font-size: var(--et-text-base); }
.et-header__points-value { font-size: var(--et-text-sm); font-weight: 700; }
.et-checkout-points { margin: 0.5rem 0; font-size: var(--et-text-sm); font-weight: 600; color: var(--et-success); }
/* Payment in parts of the module elbuz_credits: card line "від 1 250 ₴/міс" (card/_points.twig), product block (main-product/items/credit.twig) */
.et-card__credit { margin: 0.25rem 0 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-product__credit { margin: 0.75rem 0; }
.et-product__credit-from { margin: 0 0 0.5rem; font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-product__credit-from strong { color: var(--et-text); }
.et-credits-demo { display: inline-block; margin-inline-start: 0.375rem; padding: 0 0.375rem; border-radius: var(--et-radius-xs); background: var(--et-warning-soft); color: var(--et-warning-text); font-size: var(--et-text-xs); font-weight: 600; text-transform: uppercase; vertical-align: middle; }
/* Product family switcher of the module elbuz_product_family (main-product/items/family.twig): every value is a link to its product */
.et-product__family .et-product__color-btn { display: inline-block; background: linear-gradient(135deg, var(--et-swatch) 50%, var(--et-swatch-2) 50%); }
.et-product__family .et-product__option-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.et-product__family .is-muted { opacity: 0.55; }
.et-product__family .is-disabled { opacity: 0.4; pointer-events: none; text-decoration: line-through; }
.et-product__family-photo { flex-direction: column; padding: 0.375rem; font-size: var(--et-text-xs); }
.et-product__family-photo img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--et-radius-xs); }
.et-product__family-list { position: relative; }
.et-product__family-list summary { list-style: none; cursor: pointer; }
.et-product__family-list summary::-webkit-details-marker { display: none; }
.et-product__family-list ul { position: absolute; z-index: 5; inset-inline: 0; margin: 0.25rem 0 0; padding: 0.25rem 0; list-style: none; border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-input-radius); background: var(--et-surface); box-shadow: var(--et-shadow-lg); }
.et-product__family-list a { display: block; padding: 0.5rem 0.875rem; color: var(--et-text); text-decoration: none; font-size: var(--et-text-sm); }
.et-product__family-list a:hover,
.et-product__family-list a[aria-current] { background: var(--et-accent-light); color: var(--et-accent-text); }
.et-product__delivery-slot { margin: 0.25rem 0 0; font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-product__delivery-slot i { color: var(--et-accent-text); margin-right: 0.25rem; }

/* Delivery day and window in the checkout (module elbuz_booking, Smart Checkout slot "shipping") */
.et-booking { margin: 0.75rem 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.et-booking__title { padding: 0; margin: 0; font-size: var(--et-text-sm); font-weight: 600; color: var(--et-text); }
.et-booking__note { margin: 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-booking__group { display: flex; flex-direction: column; gap: 0.375rem; }
.et-booking__label { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-booking__days, .et-booking__windows { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.et-booking__days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.125rem; }
.et-booking__day, .et-booking__window {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-surface);
  color: var(--et-text);
  cursor: pointer;
  transition: border-color var(--et-transition), background var(--et-transition);
}
.et-booking__day { flex: 0 0 auto; min-width: 4.5rem; }
.et-booking__day input, .et-booking__window input { position: absolute; opacity: 0; pointer-events: none; }
.et-booking__day-name { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-booking__day-date, .et-booking__window-time { font-size: var(--et-text-sm); font-weight: 600; white-space: nowrap; }
.et-booking__window-note { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-booking__day:hover, .et-booking__window:hover { border-color: var(--et-accent); }
.et-booking__day:has(input:checked), .et-booking__window:has(input:checked) {
  border-color: var(--et-accent);
  background: color-mix(in srgb, var(--et-accent) 8%, var(--et-surface));
}
.et-booking__day:has(input:focus-visible), .et-booking__window:has(input:focus-visible) { outline: 2px solid var(--et-accent); outline-offset: 2px; }
.et-booking__day.is-disabled, .et-booking__window.is-disabled { opacity: 0.5; cursor: not-allowed; }
.et-booking__day.is-disabled:hover, .et-booking__window.is-disabled:hover { border-color: var(--et-border); }
/* Availability in shops on the product page and the pickup shop in the checkout (module elbuz_stock) */
.et-stores { margin: 0.75rem 0 0; font-size: var(--et-text-sm); color: var(--et-text); }
.et-stores__title { cursor: pointer; font-weight: 600; }
.et-stores__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.et-stores__item { display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.75rem; padding-bottom: 0.5rem; border-bottom: var(--et-border-width) solid var(--et-border); }
.et-stores__item:last-child { border-bottom: 0; padding-bottom: 0; }
.et-stores__name { font-weight: 600; }
.et-stores__state { font-size: var(--et-text-xs); font-weight: 600; color: var(--et-success); text-align: end; }
.et-stores__item--low .et-stores__state { color: var(--et-warning); }
.et-stores__item--out .et-stores__state { color: var(--et-text-muted); }
.et-stores__address, .et-stores__hours, .et-stores__pickup { grid-column: 1 / -1; font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-stores__pickup { color: var(--et-text); }
.et-pickup { margin: 0.75rem 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.et-pickup__title { padding: 0; margin: 0; font-size: var(--et-text-sm); font-weight: 600; color: var(--et-text); }
.et-pickup__note { margin: 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-pickup__list { display: flex; flex-direction: column; gap: 0.5rem; }
.et-pickup__shop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-surface);
  color: var(--et-text);
  cursor: pointer;
  transition: border-color var(--et-transition), background var(--et-transition);
}
.et-pickup__shop input { position: absolute; opacity: 0; pointer-events: none; }
.et-pickup__name { font-size: var(--et-text-sm); font-weight: 600; }
.et-pickup__address, .et-pickup__hours, .et-pickup__when { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-pickup__shop:hover { border-color: var(--et-accent); }
.et-pickup__shop:has(input:checked) { border-color: var(--et-accent); background: color-mix(in srgb, var(--et-accent) 8%, var(--et-surface)); }
.et-pickup__shop:has(input:focus-visible) { outline: 2px solid var(--et-accent); outline-offset: 2px; }
.et-pickup__shop.is-disabled { opacity: 0.5; cursor: not-allowed; }
.et-pickup__shop.is-disabled:hover { border-color: var(--et-border); }
/* City, branch, parcel locker and street autocomplete in the checkout; house and flat of the courier (modules elbuz_novaposhta, elbuz_ukrposhta, elbuz_meest) */
.et-combo { position: relative; }
.et-combo__list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 18rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  list-style: none;
  background: var(--et-surface);
  color: var(--et-text);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  box-shadow: var(--et-shadow-lg);
  font-size: var(--et-text-sm);
}
.et-combo__option { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem; cursor: pointer; }
.et-combo__option:hover, .et-combo__option.is-active { background: color-mix(in srgb, var(--et-accent) 8%, var(--et-surface)); }
.et-combo__option--empty, .et-combo__option--empty:hover { cursor: default; background: none; color: var(--et-text-muted); }
.et-combo__hint { color: var(--et-text-muted); font-size: var(--et-text-xs); }
.et-courier { margin: 0.75rem 0 0; }
.et-courier__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.et-loyalty { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.et-loyalty p { margin: 0; }
.et-loyalty__rate,
.et-loyalty__spent,
.et-loyalty__note { font-size: var(--et-text-sm); color: var(--et-text-muted); }
.et-loyalty__expiring { font-size: var(--et-text-sm); color: var(--et-danger); }
.et-loyalty__status { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid var(--et-border); border-radius: var(--et-radius); background: var(--et-surface); }
.et-loyalty__meter { position: relative; height: 0.5rem; border-radius: 1rem; background: var(--et-surface-3); overflow: hidden; }
.et-loyalty__meter i { position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--v, 0)); border-radius: inherit; background: var(--et-accent); }
.et-loyalty__levels { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.et-loyalty__step { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border: 1px solid var(--et-border); border-radius: var(--et-radius-sm); font-size: var(--et-text-sm); color: var(--et-text-muted); }
.et-loyalty__step b { color: var(--et-text); }
.et-loyalty__step.is-done { border-color: var(--et-success-border); }
.et-loyalty__step.is-cur { border-color: var(--et-accent); box-shadow: inset 0 0 0 1px var(--et-accent); }
.et-loyalty__title { margin: 0.5rem 0 0; font-size: var(--et-text-lg); }
.et-loyalty__earn { margin: 0; padding-left: 1.25rem; }
/* Price by quantity (main-product/items/discounts.twig) */
.et-buybox__tiers { margin: 0.75rem 0; }
.et-buybox__tiers-title { margin: 0 0 0.375rem; font-size: var(--et-text-sm); font-weight: 700; }
.et-buybox__tiers-table { width: 100%; border-collapse: collapse; font-size: var(--et-text-sm); }
.et-buybox__tiers-table th, .et-buybox__tiers-table td { padding: 0.375rem 0; border-top: var(--et-border-width, 1px) solid var(--et-border); text-align: left; font-weight: 400; }
.et-buybox__tiers-table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1199.98px) {
  .et-buybox { position: static; }
}
@media (max-width: 767.98px) {
  .et-buybox { padding: calc(var(--et-block-pad) * 0.5714); }
}

/* ---------- SPECS GRID (2 columns) ---------- */
.et-specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .et-specs-grid { grid-template-columns: 1fr 1fr; }
}
.et-specs-grid__row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: var(--et-border-width) dashed var(--et-border);
  font-size: var(--et-text-sm);
  align-items: baseline;
}
.et-specs-grid__key {
  margin: 0;
  color: var(--et-text-muted);
  line-height: 1.4;
  position: relative;
}
.et-specs-grid__val {
  margin: 0;
  color: var(--et-text);
  font-weight: 600;
  line-height: 1.4;
}
.et-specs-grid__val a,
.et-product__about-val a {
  color: var(--et-accent-text);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: color var(--et-transition), opacity var(--et-transition);
  opacity: 0.85;
}
.et-specs-grid__val a:hover,
.et-product__about-val a:hover {
  color: var(--et-accent-hover);
  opacity: 1;
}

/* ---------- COLLECTION PILLS ---------- */
.et-collection-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.et-collection-pills__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  font-size: var(--et-text-sm);
  font-weight: 500;
  color: var(--et-text);
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-collection-pills__item:hover {
  background: var(--et-accent-light);
  border-color: var(--et-accent);
  color: var(--et-accent-text);
}

/* ---------- REVIEWS SECTION ---------- */
.et-reviews-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: var(--et-border-width) solid var(--et-border);
  margin-bottom: 1.5rem;
}
.et-reviews-tabs__btn {
  padding: 0.75rem 0;
  margin-right: 2rem;
  background: none;
  border: 0;
  border-bottom: calc(var(--et-border-width) * 2) solid transparent;
  font-family: var(--et-font-display);
  font-size: var(--et-text-xl);
  font-weight: var(--et-heading-weight);
  color: var(--et-text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all var(--et-transition);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-reviews-tabs__btn sup {
  font-size: 0.55em;
  font-weight: 600;
  margin-left: 0.25rem;
  color: var(--et-text-muted);
}
.et-reviews-tabs__btn:hover { color: var(--et-text); }
.et-reviews-tabs__btn.is-active {
  color: var(--et-text);
  border-bottom-color: var(--et-accent);
}
.et-reviews-tabs__btn.is-active sup { color: var(--et-accent-text); }

.et-reviews-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 992px) {
  .et-reviews-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; }
}

/* Filter/sort */
.et-reviews-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.et-reviews-filter__tag {
  padding: 0.5rem 1rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 500;
  color: var(--et-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-reviews-filter__tag:hover { border-color: var(--et-accent); }
.et-reviews-filter__tag.is-active {
  background: var(--et-accent-light);
  border-color: var(--et-accent);
  color: var(--et-accent-text);
}

.et-reviews-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
  font-size: var(--et-text-sm);
}
.et-reviews-sort__label { color: var(--et-text-muted); }
.et-reviews-sort__btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.et-reviews-sort__btn i { font-size: 0.75em; }
.et-reviews-sort__btn.is-active { color: var(--et-text); text-decoration: underline; text-underline-offset: 4px; }

/* Review card */
.et-review {
  padding: 1.25rem 0;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-review:last-child { border-bottom: 0; }

.et-review__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}
.et-review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.et-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  flex-shrink: 0;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-review__author-info { display: flex; flex-direction: column; line-height: 1.3; }
.et-review__name { font-size: var(--et-text-sm); font-weight: 700; color: var(--et-text); }
.et-review__verified {
  font-size: var(--et-text-xs);
  color: var(--et-success);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
}
.et-review__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.et-review__stars { color: var(--et-rating); font-size: var(--et-text-sm); letter-spacing: 1px; }
.et-review__date { font-size: var(--et-text-xs); color: var(--et-text-muted); }

.et-review__variant {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  margin-bottom: 0.5rem;
}
.et-review__variant-label { color: var(--et-text-muted); }

.et-review__title {
  margin: 0 0 0.375rem;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-review__text {
  margin: 0 0 0.75rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  line-height: 1.65;
}

.et-review__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.et-review__photo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--et-radius-xs);
  overflow: hidden;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  transition: all var(--et-transition);
}
.et-review__photo:hover { border-color: var(--et-accent); transform: scale(1.04); }
.et-review__photo img { width: 100%; height: 100%; object-fit: cover; }

.et-review__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-review__helpful-label { margin-right: 0.5rem; }
.et-review__helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-review__helpful-btn:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-review__comments-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--et-accent-text);
  text-decoration: none;
}
.et-review__comments-link:hover { text-decoration: underline; }

/* Reviews summary (right aside) */
.et-reviews-layout__summary {
  padding: 1.25rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  align-self: start;
}
.et-reviews__score-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}
.et-reviews__score-stars { color: var(--et-rating); font-size: var(--et-text-xl); letter-spacing: 2px; }
.et-reviews__score-value {
  font-family: var(--et-font-display);
  font-size: var(--et-text-xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-reviews__score-note {
  margin: 0 0 1.25rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  line-height: 1.45;
}

.et-reviews__distribution { margin: 0 0 1.25rem; padding: 0; }
.et-reviews__dist-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: var(--et-text-xs);
}
.et-reviews__dist-label { margin: 0; color: var(--et-text-secondary); }
.et-reviews__dist-bar {
  height: 6px;
  background: var(--et-border);
  border-radius: 3px;
  overflow: hidden;
}
.et-reviews__dist-bar-fill {
  display: block;
  height: 100%;
  background: var(--et-warning);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.et-reviews__dist-count { margin: 0; text-align: right; color: var(--et-text-muted); font-variant-numeric: tabular-nums; }

.et-reviews__score-policy {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
  padding-top: 1rem;
  border-top: var(--et-border-width) solid var(--et-border);
}

.et-reviews__write-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s var(--ease-spring);
}
.et-reviews__write-btn:hover { background: var(--et-accent-hover); transform: translateY(-1px); }

/* Review Form */
.et-reviews__write-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--et-border-width) solid var(--et-border);
}
.et-reviews__write-title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  margin-bottom: 1.25rem;
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-reviews__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.et-reviews__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.et-reviews__form-label {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
}
.et-reviews__form-input,
.et-reviews__form-textarea {
  padding: 0.625rem 0.875rem;
  border: var(--et-input-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-input-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  color: var(--et-text);
  background: var(--et-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
}
.et-reviews__form-input:focus,
.et-reviews__form-textarea:focus {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px var(--et-accent-ghost);
}
.et-reviews__form-textarea {
  resize: vertical;
  min-height: 100px;
}
.et-reviews__form-hint {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-reviews__form-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.et-reviews__form-rating-label {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  margin: 0 0.375rem;
}
.et-reviews__form-star {
  cursor: pointer;
  font-size: var(--et-text-xl);
  color: var(--et-text-muted);
  transition: color 0.15s;
}
.et-reviews__form-star input { position: absolute; opacity: 0; pointer-events: none; }
.et-reviews__form-star:hover,
.et-reviews__form-star:hover ~ .et-reviews__form-star { color: var(--et-rating); }
.et-reviews__form-star input:checked ~ i,
.et-reviews__form-star:has(input:checked) i { color: var(--et-rating); }
.et-reviews__form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ---------- DESKTOP STICKY TOP BUY BAR ---------- */
.et-sticky-bar {
  position: fixed;
  top: var(--et-sticky-bar-offset, 72px);
  left: 0;
  right: 0;
  z-index: 85;
  /* Match header margins to look like one piece with the header block */
  margin-left: max(2rem, calc((100% - 1600px) / 2 + 2rem));
  margin-right: max(2rem, calc((100% - 1600px) / 2 + 2rem));
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-top: 0;
  border-radius: 0 0 var(--et-radius) var(--et-radius);
  box-shadow: var(--et-shadow-lg);
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
  pointer-events: none;
}

/* When the sticky bar is shown, header loses its bottom rounded corners
   so the two elements visually merge into one block */
body:has(.et-sticky-bar.is-visible) .et-nav,
body:has(.et-sticky-bar.is-visible) .et-header.et-header--scrolled {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.et-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    opacity 0.22s ease,
    visibility 0s linear 0s;
}
/* On tablets header loses margins — sticky bar follows suit */
@media (max-width: 991.98px) {
  .et-sticky-bar {
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* Hide on mobile — mobile bottom bar takes its place */
@media (max-width: 767.98px) {
  .et-sticky-bar { display: none !important; }
}

.et-sticky-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.75rem 0;
}
@media (max-width: 991.98px) {
  .et-sticky-bar__inner { gap: 1rem; padding: 0.625rem 0; }
}

/* Product info block */
.et-sticky-bar__product {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}
.et-sticky-bar__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-sticky-bar__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.et-sticky-bar__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1.25;
}
.et-sticky-bar__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: calc(-0.015em + var(--et-tracking-shift));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--et-transition);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-sticky-bar__title:hover { color: var(--et-accent-text); }

.et-sticky-bar__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-sticky-bar__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.et-sticky-bar__rating i { color: var(--et-rating); }
.et-sticky-bar__rating strong { color: var(--et-text); font-weight: 700; }

.et-sticky-bar__meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  color: var(--et-accent-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--et-transition);
}
.et-sticky-bar__meta-link:hover { color: var(--et-accent-hover); text-decoration: underline; }

/* Price */
.et-sticky-bar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  flex-shrink: 0;
}
.et-sticky-bar__price-old {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  text-decoration: line-through;
}
.et-sticky-bar__price-current {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: calc(-0.025em + var(--et-tracking-shift));
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

/* Actions */
.et-sticky-bar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-shrink: 0;
}
.et-sticky-bar__cart-btn {
  min-width: 220px;
  padding: 0.625rem 1.25rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  cursor: pointer;
  font-family: var(--et-font);
  transition: all 0.3s var(--ease-spring);
}
.et-sticky-bar__cart-btn:hover {
  background: var(--et-accent-hover);
  transform: translateY(-1px);
}
.et-sticky-bar__cart-btn:active { transform: scale(0.98); }
.et-sticky-bar__cart-btn-title {
  font-size: var(--et-text-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.et-sticky-bar__cart-btn-sub {
  font-size: var(--et-text-xs);
  opacity: 0.9;
  font-weight: 500;
}
.et-sticky-bar__wishlist {
  width: 46px;
  flex-shrink: 0;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  color: var(--et-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--et-text-lg);
  transition: all var(--et-transition);
}
.et-sticky-bar__wishlist:hover {
  color: var(--et-danger);
  border-color: var(--et-danger);
  background: var(--et-danger-soft);
}

/* Tablet compression — hide meta row to keep essentials */
@media (max-width: 991.98px) {
  .et-sticky-bar__meta { display: none; }
  .et-sticky-bar__cart-btn { min-width: 180px; }
  .et-sticky-bar__price-current { font-size: var(--et-text-lg); }
}

/* ---------- MOBILE STICKY BUY BAR ---------- */
.et-mobile-buybar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--et-surface);
  border-top: var(--et-border-width) solid var(--et-border);
  box-shadow: var(--et-shadow-up);
  gap: 0.875rem;
  align-items: center;
}
.et-mobile-buybar__price { flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.15; }
.et-mobile-buybar__price-old {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  text-decoration: line-through;
}
.et-mobile-buybar__price-current {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-lg);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-mobile-buybar__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.et-mobile-buybar__btn:active { transform: scale(0.98); }
@media (max-width: 767.98px) {
  .et-mobile-buybar { display: flex; }
  /* Offset bottom nav if present */
  body:has(.et-mobile-buybar) { padding-bottom: 5rem; }
}

/* ==========================================================================
   BLOG LISTING PAGE
   ========================================================================== */

/* Category filter pills */
.et-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.et-blog-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-chip-radius);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-blog-filter:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-blog-filter.is-active {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
}
.et-blog-filter__count {
  font-size: var(--et-text-xs);
  opacity: 0.7;
}
.et-blog-filter.is-active .et-blog-filter__count { opacity: 0.9; }

/* Featured hero article */
.et-blog-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--et-text);
  transition: all var(--et-transition);
}
@media (min-width: 768px) {
  .et-blog-hero { grid-template-columns: 1.2fr 1fr; }
}
.et-blog-hero:hover { border-color: var(--et-accent); box-shadow: var(--et-shadow-lg); }

.et-blog-hero__image { overflow: hidden; }
.et-blog-hero__image img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; transition: transform 0.5s ease; display: block; }
.et-blog-hero:hover .et-blog-hero__image img { transform: scale(1.04); }

.et-blog-hero__content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.et-blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-blog-hero__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.et-blog-hero__meta i { color: var(--et-accent-text); font-size: 0.85em; }
.et-blog-hero__category {
  padding: 0.125rem 0.625rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border-radius: var(--et-radius-xs);
  font-weight: 700;
}
.et-blog-hero__title {
  font-family: var(--et-font-display);
  font-size: clamp(var(--et-text-xl), 2.5vw, var(--et-text-2xl));
  font-weight: calc(var(--et-heading-weight) + 100);
  letter-spacing: var(--et-heading-tracking);
  line-height: var(--et-heading-leading);
  color: var(--et-text);
  margin: 0;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-blog-hero__excerpt {
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.et-blog-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-accent-text);
  margin-top: auto;
}
.et-blog-hero__read i { font-size: 0.85em; transition: transform 0.2s ease; }
.et-blog-hero:hover .et-blog-hero__read i { transform: translateX(4px); }

/* Blog card — extended meta for listing page */
.et-blog-card__meta {
  display: flex;
  gap: 1rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  margin-bottom: 0.25rem;
}
.et-blog-card__meta span,
.et-blog-card__meta time { display: inline-flex; align-items: center; gap: 0.25rem; }
.et-blog-card__meta i { font-size: 0.85em; }
.et-blog-card__read-time { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Pagination */
.et-blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--et-border-width) solid var(--et-border);
}
.et-blog-pagination__page,
.et-blog-pagination__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-btn-radius);
  background: var(--et-surface);
  color: var(--et-text);
  text-decoration: none;
  font-size: var(--et-text-sm);
  font-weight: 600;
  transition: all var(--et-transition);
}
.et-blog-pagination__page:hover,
.et-blog-pagination__btn:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-blog-pagination__page.is-active {
  background: var(--et-accent);
  border-color: var(--et-accent);
  color: var(--et-accent-contrast);
}
.et-blog-pagination__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   ACCOUNT PAGE
   ========================================================================== */
.et-account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .et-account-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
}

/* Account content area — prevent overflow */
.et-account-layout__content {
  min-width: 0;
  overflow-wrap: break-word;
}
.et-account-layout__content .et-product-block { overflow-x: auto; }

/* Sidebar */
.et-account-sidebar { padding: 0; }
.et-account-layout__sidebar { position: sticky; top: 5.5rem; }

@media (max-width: 991.98px) {
  .et-account-layout { gap: 0.75rem; }
  .et-account-layout__sidebar { position: static; min-width: 0; }
  .et-account-sidebar { padding: 0; }
}

/* Order line thumbnails (account/order_info.twig, blocks/orders) */
.et-order-row__thumb {
  width: 44px;
  height: 44px;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-order-row__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Addresses */
.et-account-addresses { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.et-account-address {
  padding: 1rem 1.25rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  transition: border-color var(--et-transition);
}
.et-account-address.is-default { border-color: var(--et-accent); }
.et-account-address__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.375rem; }
.et-account-address__header strong { font-size: var(--et-text-sm); color: var(--et-text); }
.et-account-address__badge {
  font-size: var(--et-text-xs);
  font-weight: 700;
  color: var(--et-accent-text);
  background: var(--et-accent-light);
  padding: 0.125rem 0.5rem;
  border-radius: var(--et-chip-radius);
}
.et-account-address__text { font-size: var(--et-text-sm); color: var(--et-text-secondary); margin: 0 0 0.625rem; line-height: 1.4; }
.et-account-address__actions { display: flex; gap: 0.75rem; }
.et-account-address__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-accent-text);
  cursor: pointer;
  transition: color var(--et-transition);
}
.et-account-address__btn:hover { text-decoration: underline; }
.et-account-address__btn--danger { color: var(--et-text-muted); }
.et-account-address__btn--danger:hover { color: var(--et-danger); }

/* Empty state */
.et-account-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--et-text-muted);
}
.et-account-empty i { font-size: var(--et-text-3xl); margin-bottom: 0.75rem; display: block; }
.et-account-empty p { margin: 0 0 1rem; }

/* ==========================================================================
   AUTH PAGE (login / register / forgot)
   ========================================================================== */
.et-auth-section {
  padding: 2.5rem 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300px);
}
.et-auth {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo */
.et-auth__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-bottom: 2rem;
}
.et-auth__logo-icon {
  width: 44px;
  height: 44px;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  font-weight: 800;
  font-size: calc(var(--et-text-xl) * 1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--et-radius-sm) * 1.2);
}
.et-auth__logo-text {
  font-family: var(--et-font-display);
  font-size: calc(var(--et-text-2xl) * 1.1667);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: calc(-0.04em + var(--et-tracking-shift));
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

/* Card */
.et-auth__card {
  width: 100%;
  background: var(--et-surface);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  padding: 2rem;
  box-shadow: var(--et-card-shadow, var(--et-shadow-lg));
}
@media (max-width: 575.98px) {
  .et-auth__card { padding: 1.5rem 1.25rem; }
}

.et-auth__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-heading-tracking);
  margin: 0 0 0.5rem;
  text-align: center;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-auth__subtitle {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

/* Options row (remember + forgot) */
.et-auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.et-auth__link {
  font-size: var(--et-text-sm);
  color: var(--et-accent-text);
  text-decoration: none;
  font-weight: 600;
}
.et-auth__link:hover { text-decoration: underline; }

/* Password hint */
.et-auth__hint {
  margin: 0.25rem 0 0;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}

/* Divider */
.et-auth__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--et-text-muted);
  font-size: var(--et-text-xs);
  font-weight: 600;
}
.et-auth__divider::before,
.et-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--et-border);
}

/* Social login */
.et-auth__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.et-auth__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-auth__social-btn:hover { border-color: var(--et-accent); background: var(--et-bg); }
.et-auth__social-btn--google i { color: var(--et-brand-google); }
.et-auth__social-btn--facebook i { color: var(--et-brand-facebook); }

/* Switch (already have account / register) */
.et-auth__switch {
  margin-top: 1.25rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  text-align: center;
}
.et-auth__switch-link {
  color: var(--et-accent-text);
  font-weight: 700;
  text-decoration: none;
}
.et-auth__switch-link:hover { text-decoration: underline; }

/* Security footer */
.et-auth__security {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-auth__security i { color: var(--et-success); }

/* ==========================================================================
   CONTENT / TEXT PAGE
   ========================================================================== */
.et-content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .et-content-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
  }
}
.et-content-layout__aside { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 991.98px) { .et-content-layout__aside { position: static; } }

.et-content__title {
  font-family: var(--et-font-display);
  font-size: clamp(var(--et-text-2xl), 3vw, var(--et-text-3xl));
  font-weight: calc(var(--et-heading-weight) + 100);
  letter-spacing: calc(-0.025em + var(--et-tracking-shift));
  line-height: var(--et-heading-leading);
  color: var(--et-text);
  margin: 0 0 1.5rem;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-content__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-content__meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.et-content__meta-item i { color: var(--et-accent-text); font-size: 0.85em; }

/* Rich text body */
.et-content__body { font-size: var(--et-text-base); color: var(--et-text); line-height: 1.75; }
.et-content__body h2 {
  font-family: var(--et-font-display);
  font-size: var(--et-text-xl);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: calc(-0.015em + var(--et-tracking-shift));
  margin: 2rem 0 0.75rem;
  padding-top: 1rem;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-content__body h2:first-child { margin-top: 0; padding-top: 0; }
.et-content__body h3 {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  margin: 1.5rem 0 0.5rem;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-content__body p { margin: 0 0 1rem; }
.et-content__body ul, .et-content__body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.et-content__body li { margin-bottom: 0.5rem; line-height: 1.6; }
.et-content__body a:not(.et-btn) { color: var(--et-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.et-content__body a:not(.et-btn):hover { color: var(--et-accent-hover); }
.et-content__body strong { color: var(--et-text); font-weight: 700; }
.et-content__body blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--et-bg);
  border-left: 4px solid var(--et-accent);
  border-radius: 0 var(--et-radius-sm) var(--et-radius-sm) 0;
  font-style: italic;
  color: var(--et-text-secondary);
}
.et-content__body blockquote p { margin-bottom: 0; }
.et-content__body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: var(--et-text-sm); }
.et-content__body th, .et-content__body td { padding: 0.75rem 1rem; border: var(--et-border-width) solid var(--et-border); text-align: left; }
.et-content__body th { background: var(--et-bg); font-weight: 700; color: var(--et-text); }
.et-content__body tr:nth-child(even) td { background: color-mix(in srgb, var(--et-text) 1.5%, transparent); }
.et-content__body img, .et-content__hero-image { max-width: 100%; height: auto; border-radius: var(--et-radius); margin: 1.25rem 0; display: block; }
.et-content__lead { font-size: var(--et-text-lg); color: var(--et-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; font-weight: 500; }

/* Share */
.et-content__share { display: flex; align-items: center; gap: 0.875rem; padding-top: 1.5rem; margin-top: 2rem; border-top: var(--et-border-width) solid var(--et-border); }
.et-content__share-label { font-size: var(--et-text-sm); font-weight: 600; color: var(--et-text-muted); }
.et-content__share-btns { display: flex; gap: 0.5rem; }
.et-content__share-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--et-bg); border: var(--et-border-width) solid var(--et-border); border-radius: 50%;
  color: var(--et-text-muted); font-size: var(--et-text-sm); text-decoration: none; cursor: pointer; transition: all var(--et-transition);
}
.et-content__share-btn:hover { background: var(--et-accent); border-color: var(--et-accent); color: var(--et-accent-contrast); }

/* Table of contents sidebar */
.et-content-toc__title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--et-font-display); font-size: var(--et-text-base); font-weight: var(--et-heading-weight); color: var(--et-text); margin: 0 0 0.75rem; letter-spacing: var(--et-tracking-shift); text-transform: var(--et-heading-transform); font-style: var(--et-heading-style); }
.et-content-toc__title i { color: var(--et-accent-text); font-size: 0.9em; }
.et-content-toc__nav { display: flex; flex-direction: column; }
.et-content-toc__link {
  display: block; padding: 0.5rem 0.75rem; border-left: calc(var(--et-border-width) * 2) solid transparent;
  font-size: var(--et-text-sm); color: var(--et-text-secondary); text-decoration: none; transition: all var(--et-transition);
}
.et-content-toc__link:hover { color: var(--et-accent-text); border-left-color: var(--et-accent); background: var(--et-bg); }

/* Info sidebar */
.et-content-sidebar-block__title { font-family: var(--et-font-display); font-size: var(--et-text-base); font-weight: var(--et-heading-weight); color: var(--et-text); margin: 0 0 0.75rem; letter-spacing: var(--et-tracking-shift); text-transform: var(--et-heading-transform); font-style: var(--et-heading-style); }
.et-content-sidebar-block__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.et-content-sidebar-block__list li { display: flex; align-items: center; gap: 0.625rem; font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-content-sidebar-block__list li i { color: var(--et-accent-text); width: 16px; text-align: center; }
.et-content-sidebar-block__social { display: flex; gap: 0.5rem; }
.et-content-sidebar-block__social a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--et-bg); border: var(--et-border-width) solid var(--et-border); border-radius: 50%;
  color: var(--et-text-muted); font-size: var(--et-text-sm); text-decoration: none; transition: all var(--et-transition);
}
.et-content-sidebar-block__social a:hover { background: var(--et-accent); border-color: var(--et-accent); color: var(--et-accent-contrast); }

/* ==========================================================================
   CONTACTS PAGE
   ========================================================================== */

/* Cards grid (4 cols desktop, 2 tablet, 1 mobile) */
.et-contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .et-contacts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .et-contacts-grid { grid-template-columns: repeat(4, 1fr); } }

.et-contact-card { display: flex; flex-direction: column; gap: 0.75rem; }
.et-contact-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-lg);
}
.et-contact-card__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  margin: 0;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-contact-card__list { display: flex; flex-direction: column; gap: 0.625rem; }
.et-contact-card__item { display: flex; flex-direction: column; gap: 0.125rem; }
.et-contact-card__value {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  text-decoration: none;
  transition: color var(--et-transition);
}
.et-contact-card__value:hover { color: var(--et-accent-hover); }
.et-contact-card__value--phone {
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-contact-card__value--phone:hover { color: var(--et-accent-text); }
.et-contact-card__label { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-contact-card__hint { font-size: var(--et-text-sm); color: var(--et-text-muted); margin: 0; }

.et-contact-card__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  line-height: 1.5;
}
.et-contact-card__address i { color: var(--et-accent-text); margin-top: 0.15em; }

.et-contact-card__schedule { display: flex; flex-direction: column; gap: 0.375rem; }
.et-contact-card__schedule-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  padding: 0.375rem 0;
  border-bottom: var(--et-border-width) dashed var(--et-border);
}
.et-contact-card__schedule-row:last-child { border-bottom: 0; }
.et-contact-card__schedule-row strong { color: var(--et-text); }

/* Messenger buttons */
.et-contact-card__messengers { display: flex; flex-direction: column; gap: 0.5rem; }
.et-contact-messenger {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-contact-messenger i { color: var(--messenger-color); font-size: var(--et-text-lg); }
.et-contact-messenger:hover {
  background: var(--messenger-color);
  border-color: var(--messenger-color);
  color: var(--et-accent-contrast);
}
.et-contact-messenger:hover i { color: var(--et-accent-contrast); }

/* Map + Form layout */
.et-contacts-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .et-contacts-layout { grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
}

.et-contact-map { margin-bottom: 0.75rem; border-radius: var(--et-radius-sm); overflow: hidden; }
.et-contact-map iframe { display: block; }
.et-contact-map__address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
}
.et-contact-map__address i { color: var(--et-accent-text); }

/* Requisites + Social bottom row */
.et-contacts-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .et-contacts-bottom { grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
}

.et-requisites { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.et-requisites__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: var(--et-border-width) dashed var(--et-border);
  font-size: var(--et-text-sm);
}
.et-requisites__row:last-child { border-bottom: 0; }
.et-requisites__row dt { margin: 0; color: var(--et-text-muted); font-weight: 500; }
.et-requisites__row dd { margin: 0; color: var(--et-text); font-weight: 600; word-break: break-all; }

@media (max-width: 575.98px) {
  .et-requisites__row { grid-template-columns: 1fr; gap: 0.125rem; }
}

/* Social links grid */
.et-contact-social-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.et-contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-contact-social-link i { font-size: var(--et-text-lg); color: var(--et-accent-text); }
.et-contact-social-link:hover { border-color: var(--et-accent); background: var(--et-accent-light); color: var(--et-accent-text); }

/* ==========================================================================
   COMPARE PAGE
   ========================================================================== */
.et-compare-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--et-border) transparent;
}
.et-compare-scroll::-webkit-scrollbar { height: 6px; }
.et-compare-scroll::-webkit-scrollbar-thumb { background: var(--et-border); border-radius: 3px; }

.et-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.et-compare th,
.et-compare td {
  text-align: left;
  vertical-align: top;
}

/* Product header cells */
.et-compare__label-cell {
  width: 180px;
  min-width: 180px;
  padding: 0.75rem 1.25rem;
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text-muted);
  background: var(--et-bg);
  position: sticky;
  left: 0;
  z-index: 2;
}
.et-compare__product-cell {
  min-width: 220px;
  padding: 1.25rem 1rem;
  border-left: var(--et-border-width) solid var(--et-border);
}
thead .et-compare__label-cell {
  background: var(--et-surface);
}

.et-compare__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  position: relative;
}
.et-compare__remove {
  position: absolute;
  top: -0.5rem;
  right: -0.25rem;
  width: 28px;
  height: 28px;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: 50%;
  color: var(--et-text-muted);
  font-size: var(--et-text-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--et-transition);
}
.et-compare__remove:hover { background: var(--et-danger-soft); color: var(--et-danger); border-color: var(--et-danger); }

.et-compare__image {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.et-compare__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-compare__name {
  font-family: var(--et-font-display);
  font-size: var(--et-text-sm);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  text-decoration: none;
  line-height: calc(var(--et-heading-leading) * 1.0833);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-compare__name:hover { color: var(--et-accent-text); }
.et-compare__brand { font-size: var(--et-text-xs); color: var(--et-text-muted); text-transform: uppercase; letter-spacing: calc(var(--et-eyebrow-tracking) * 0.8); }

.et-compare__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--et-text-xs);
  color: var(--et-text);
}
.et-compare__rating i { color: var(--et-rating); }
.et-compare__rating span:first-of-type { font-weight: 700; }
.et-compare__reviews { color: var(--et-text-muted); }

.et-compare__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.et-compare__price-old { font-size: var(--et-text-xs); color: var(--et-text-muted); text-decoration: line-through; }
.et-compare__price {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-lg);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-compare__stock { font-size: var(--et-text-xs); font-weight: 600; }
.et-compare__stock--in { color: var(--et-success); }
.et-compare__stock--few { color: var(--et-warning); }
.et-compare__stock--out { color: var(--et-danger); }

.et-compare__cart-btn {
  padding: 0.5rem 1.25rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all var(--et-transition);
  margin-top: 0.25rem;
}
.et-compare__cart-btn:hover { background: var(--et-accent-hover); }

/* Spec rows */
.et-compare__row { border-top: var(--et-border-width) solid var(--et-border); }
.et-compare__row:nth-child(even) .et-compare__value-cell { background: color-mix(in srgb, var(--et-text) 1.5%, transparent); }
.et-compare__row:nth-child(even) .et-compare__label-cell { background: var(--et-bg); }

.et-compare__value-cell {
  padding: 0.75rem 1rem;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  border-left: var(--et-border-width) solid var(--et-border);
  line-height: 1.4;
}
.et-compare__value-cell--diff {
  color: var(--et-accent-text);
  font-weight: 600;
}

/* "Only differences" toggle */
.et-compare__row--same.is-hidden-same { display: none; }

/* ==========================================================================
   CART PAGE
   ========================================================================== */

/* Layout */
.et-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .et-cart-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
  }
}
.et-cart-layout__main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* Sticky sidebar */
.et-cart-layout__aside { position: sticky; top: 5.5rem; }
@media (max-width: 991.98px) { .et-cart-layout__aside { position: static; } }

.et-cart-block { padding: 0; }

/* Table header */
.et-cart-header {
  display: none;
}
@media (min-width: 768px) {
  .et-cart-header {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 120px 140px 120px 80px;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: var(--et-border-width) solid var(--et-border);
    font-size: var(--et-text-xs);
    font-weight: 600;
    color: var(--et-text-muted);
    text-transform: uppercase;
    letter-spacing: calc(var(--et-eyebrow-tracking) * 0.8);
  }
  .et-cart-header__price,
  .et-cart-header__qty,
  .et-cart-header__total { text-align: center; }
  .et-cart-header__actions { text-align: right; }
}

/* Cart item — two-row layout */
.et-cart-item {
  padding: 1.25rem 1.5rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-cart-item:last-of-type { border-bottom: 0; }

/* Row 1: main info */
.et-cart-item__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) {
  .et-cart-item__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 110px 130px 110px 80px;
    gap: 1rem;
  }
}

/* Row 2: extras (delivery, social proof, warranty) */
.et-cart-item__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding: 0.625rem 0 0;
  margin-top: 0.75rem;
  border-top: var(--et-border-width) dashed var(--et-border);
}

/* Product column (image + info as flex pair) */
.et-cart-item__product {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1;
}
.et-cart-item__image {
  width: 100px;
  height: 100px;
  border-radius: var(--et-media-radius);
  overflow: hidden;
  background: var(--et-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}
.et-cart-item__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-cart-item__info { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.et-cart-item__title {
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.et-cart-item__title:hover { color: var(--et-accent-text); }
.et-cart-item__meta { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-cart-item__stock { font-size: var(--et-text-xs); font-weight: 600; }
.et-cart-item__stock--in { color: var(--et-success); }
.et-cart-item__stock--few { color: var(--et-warning); }
.et-cart-item__stock--out { color: var(--et-danger); }

.et-cart-item__price { text-align: center; }
.et-cart-item__price-value {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  font-variant-numeric: tabular-nums;
}

.et-cart-item__qty { display: flex; justify-content: center; }

.et-cart-item__total { text-align: center; }
.et-cart-item__total-value {
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-cart-item__actions { display: flex; gap: 0.375rem; justify-content: flex-end; }
.et-cart-item__action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--et-border-width) solid transparent;
  border-radius: 50%;
  color: var(--et-text-muted);
  cursor: pointer;
  font-size: var(--et-text-sm);
  transition: all var(--et-transition);
}
.et-cart-item__action-btn:hover {
  background: var(--et-bg);
  border-color: var(--et-border);
  color: var(--et-accent-text);
}
.et-cart-item__action-btn--remove:hover { color: var(--et-danger); border-color: color-mix(in srgb, var(--et-danger) 20%, transparent); background: var(--et-danger-soft); }

/* Mobile cart item */
@media (max-width: 767.98px) {
  .et-cart-item { padding: 1rem; }
  .et-cart-item__row { gap: 0.75rem; }
  .et-cart-item__image { width: 80px; height: 80px; }
  .et-cart-item__product { flex: 0 0 100%; }
  .et-cart-item__price { display: none; }
  .et-cart-item__total { margin-left: auto; }
  .et-cart-item__extras { gap: 0.375rem 1rem; }
}

/* Cart footer */
.et-cart-block__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: var(--et-border-width) solid var(--et-border);
}
.et-cart-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  cursor: pointer;
  transition: color var(--et-transition);
}
.et-cart-clear-btn:hover { color: var(--et-danger); }

/* Promo code block */
.et-cart-promo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.et-cart-promo__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-lg);
  flex-shrink: 0;
}
.et-cart-promo__content { flex: 1; min-width: 160px; }
.et-cart-promo__title {
  margin: 0;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-cart-promo__text { margin: 0; font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-cart-promo__form {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.et-cart-promo__form .et-field__input { width: 200px; }
.et-cart-promo__btn {
  padding: 0.625rem 1.25rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--et-transition);
}
.et-cart-promo__btn:hover { background: var(--et-accent-hover); }

@media (max-width: 575.98px) {
  .et-cart-promo { flex-direction: column; align-items: flex-start; }
  .et-cart-promo__form { width: 100%; }
  .et-cart-promo__form .et-field__input { flex: 1; width: auto; }
}

/* Delivery date + social proof per item */
.et-cart-item__delivery {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--et-text-xs);
  color: var(--et-success);
  font-weight: 600;
}
.et-cart-item__delivery i { font-size: 0.85em; }
.et-cart-item__social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--et-text-xs);
  color: var(--et-warning);
  font-weight: 600;
}
.et-cart-item__social-proof i { font-size: 0.8em; }

/* Warranty upsell checkbox (in extras row) */
.et-cart-item__warranty {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--et-accent-light);
  border: var(--et-border-width) dashed var(--et-accent);
  border-radius: var(--et-chip-radius);
  cursor: pointer;
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-accent-text);
  transition: all var(--et-transition);
}
.et-cart-item__warranty:hover { background: var(--et-accent); color: var(--et-accent-contrast); }
.et-cart-item__warranty:hover i { color: var(--et-accent-contrast); }
.et-cart-item__warranty input { accent-color: var(--et-accent); width: 14px; height: 14px; }
.et-cart-item__warranty i { color: var(--et-accent-text); font-size: 0.85em; }

/* Free shipping progress bar */
.et-free-shipping {
  padding: 0.75rem 1rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
}
.et-free-shipping__text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  margin-bottom: 0.625rem;
}
.et-free-shipping__text i { color: var(--et-accent-text); }
.et-free-shipping__text strong { color: var(--et-accent-text); }
.et-free-shipping__bar {
  height: 6px;
  background: var(--et-border);
  border-radius: 3px;
  overflow: hidden;
}
.et-free-shipping__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--et-accent), var(--et-success));
  border-radius: 3px;
  transition: width 0.4s ease;
}
/* Threshold reached: gold fill, celebratory tint */
.et-free-shipping.is-reached {
  background: color-mix(in srgb, var(--et-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--et-success) 25%, transparent);
}
.et-free-shipping.is-reached .et-free-shipping__text i,
.et-free-shipping.is-reached .et-free-shipping__label {
  color: var(--et-success);
  font-weight: 600;
}
.et-free-shipping.is-reached .et-free-shipping__bar-fill {
  background: linear-gradient(90deg, var(--et-hot), var(--et-hot-light), var(--et-hot));
}

/* Buy button add-to-cart states */
.et-card__cart-btn.is-adding,
[data-cart].is-adding { pointer-events: none; opacity: 0.85; }
[data-cart].is-added {
  pointer-events: none;
  background: var(--et-success) !important;
  border-color: var(--et-success) !important;
  color: var(--et-on-status) !important;
}
[data-cart].is-added i { animation: etAddedPop 0.4s var(--et-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
@keyframes etAddedPop {
  0% { transform: scale(0.3); }
  100% { transform: scale(1); }
}

/* Promo block: stacked total modules (coupon / voucher / reward / estimate) */
.et-cart-promo__modules {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.et-cart-promo__modules .et-summary__coupon { width: 100%; }

/* Shipping estimate (replaces stock BS3 panel + modal) */
.et-shipping-estimate__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0 0;
}
.et-shipping-estimate__hint {
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  margin: 0;
}
.et-shipping-estimate__quotes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.et-shipping-estimate__quote {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  cursor: pointer;
  font-size: var(--et-text-sm);
  transition: border-color var(--et-transition);
}
.et-shipping-estimate__quote:hover { border-color: var(--et-accent); }
.et-shipping-estimate__quote input { accent-color: var(--et-accent); }
.et-shipping-estimate__quote span { flex: 1; }
.et-shipping-estimate__quote strong { color: var(--et-accent-text); }
.et-shipping-estimate__error {
  font-size: var(--et-text-sm);
  color: var(--et-danger);
  margin: 0;
}

/* Gift wrapping */
.et-cart-gift { padding: 0.625rem 0.75rem; background: var(--et-bg); border-radius: var(--et-radius-xs); }
.et-cart-gift .et-checkbox__label i { color: var(--et-warning); margin-right: 0.25rem; }

/* Saved for later section */
.et-saved-items { display: flex; flex-direction: column; gap: 0; }
.et-saved-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-saved-item:last-child { border-bottom: 0; }
.et-saved-item__image {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-saved-item__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-saved-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.et-saved-item__title {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
  line-height: 1.3;
}
.et-saved-item__title:hover { color: var(--et-accent-text); }
.et-saved-item__brand { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-saved-item__price { font-size: var(--et-text-sm); font-weight: 700; color: var(--et-text); }

.et-saved-item__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.et-saved-item__move-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-radius-xs);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-saved-item__move-btn:hover { background: var(--et-accent-hover); }
.et-saved-item__remove-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: 50%;
  color: var(--et-text-muted);
  cursor: pointer;
  font-size: var(--et-text-sm);
  transition: all var(--et-transition);
}
.et-saved-item__remove-btn:hover { color: var(--et-danger); border-color: var(--et-danger); background: var(--et-danger-soft); }

@media (max-width: 575.98px) {
  .et-saved-item { flex-wrap: wrap; }
  .et-saved-item__actions { flex: 0 0 100%; }
  .et-saved-item__move-btn { flex: 1; justify-content: center; }
}

/* Cart summary sidebar */
.et-cart-summary { display: flex; flex-direction: column; gap: 1rem; }
.et-cart-summary__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}
.et-cart-summary__checkout-btn:hover { background: var(--et-accent-hover); transform: translateY(-1px); color: var(--et-accent-contrast); }
.et-cart-summary__checkout-btn:active { transform: scale(0.98); }

/* Empty cart */
.et-cart-empty {
  text-align: center;
  padding: 4rem 2rem;
}
.et-cart-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-bg);
  border-radius: 50%;
  font-size: var(--et-text-3xl);
  color: var(--et-text-muted);
}
.et-cart-empty__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  margin: 0 0 0.5rem;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-cart-empty__text {
  font-size: var(--et-text-base);
  color: var(--et-text-muted);
  margin: 0 0 1.5rem;
}
.et-cart-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-cart-empty__btn:hover { background: var(--et-accent-hover); color: var(--et-accent-contrast); }

/* ==========================================================================
   CHECKOUT PAGE (v5.9.0 — Ozon-inspired redesign)
   ========================================================================== */

/* Page title */
.et-checkout-title-section { padding-top: 1rem; padding-bottom: 0.25rem; }
.et-checkout-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.et-checkout-title,
.et-page-title {
  font-family: var(--et-font-display);
  font-size: clamp(var(--et-text-2xl), 3vw, var(--et-text-3xl));
  font-weight: calc(var(--et-heading-weight) + 100);
  letter-spacing: var(--et-heading-tracking);
  margin: 0 0 1.875rem;
  color: var(--et-text);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-checkout-title { margin-bottom: 0; }
.et-checkout-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--et-warning-soft), var(--et-warning-tint));
  border: var(--et-border-width) solid var(--et-warning-border);
  border-radius: var(--et-chip-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-warning-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-checkout-quick-btn i { color: var(--et-warning); }
.et-checkout-quick-btn:hover { background: linear-gradient(135deg, var(--et-warning-tint), var(--et-warning-border)); transform: translateY(-1px); }

/* Step number indicator */
.et-checkout-step-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.et-checkout-step-head .et-product-section__title { margin-bottom: 0; }
.et-checkout-step-head .et-checkout-head__aux { margin-left: auto; }
.et-checkout-step-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border-radius: 50%;
  font-family: var(--et-font-display);
  font-size: var(--et-text-sm);
  font-weight: calc(var(--et-heading-weight) + 100);
  flex-shrink: 0;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-checkout-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

/* ---------- Checkout layout (2-col with sticky summary) ---------- */
.et-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .et-checkout-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.5rem;
    align-items: start;
  }
}
.et-checkout-layout__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Nested 2-col row for delivery + payment */
.et-checkout-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .et-checkout-row-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Section head (title + aux) ---------- */
.et-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.5rem;
}
.et-checkout-head__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.et-checkout-head__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  color: var(--et-text);
  font-size: var(--et-text-base);
  flex-shrink: 0;
}
.et-checkout-head__title .et-product-section__title { margin-bottom: 0; }
.et-checkout-head__aux {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
}
.et-checkout-head__link {
  color: var(--et-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.et-checkout-head__link:hover { color: var(--et-accent-hover); }

.et-checkout-intro {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

/* ---------- Cart items list ---------- */
.et-checkout-cart { padding: 0; }
.et-checkout-cart .et-checkout-step-head { padding: 1.5rem 1.5rem 0; }
.et-checkout-cart__footer { padding: 0.75rem 1.5rem 1rem; }
.et-checkout-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  text-decoration: none;
  transition: all var(--et-transition);
}
.et-checkout-continue-link:hover { color: var(--et-accent-hover); gap: 0.625rem; }
.et-checkout-continue-link i { font-size: 0.8em; transition: transform 0.2s ease; }
.et-checkout-continue-link:hover i { transform: translateX(-3px); }

.et-checkout-step-count {
  font-weight: 500;
  color: var(--et-text-muted);
  font-size: 0.75em;
}
.et-cart-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto 36px;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-cart-row:last-child { border-bottom: 0; }
.et-cart-row__image {
  width: 100px;
  height: 100px;
  border-radius: var(--et-media-radius);
  overflow: hidden;
  background: var(--et-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.et-cart-row__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-cart-row__info { min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.et-cart-row__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  text-decoration: none;
  line-height: calc(var(--et-heading-leading) * 1.0833);
  letter-spacing: calc(-0.015em + var(--et-tracking-shift));
  transition: color var(--et-transition);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-cart-row__title:hover { color: var(--et-accent-text); }
.et-cart-row__sku { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-cart-row__qty-price {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.et-cart-row__qty {
  display: inline-flex;
  align-items: center;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  overflow: hidden;
  background: var(--et-bg);
}
.et-cart-row__qty-btn {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  color: var(--et-text);
  cursor: pointer;
  font-size: var(--et-text-xs);
  transition: all var(--et-transition);
}
.et-cart-row__qty-btn:hover { background: var(--et-accent-light); color: var(--et-accent-text); }
.et-cart-row__qty-input {
  width: 42px;
  height: 34px;
  text-align: center;
  border: 0;
  border-left: var(--et-border-width) solid var(--et-border);
  border-right: var(--et-border-width) solid var(--et-border);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  background: var(--et-surface);
  -moz-appearance: textfield;
}
.et-cart-row__qty-input::-webkit-outer-spin-button,
.et-cart-row__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.et-cart-row__unit-price {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
}

.et-cart-row__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  white-space: nowrap;
}
.et-cart-row__total-label { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-cart-row__total-value {
  font-family: var(--et-font-display);
  font-size: var(--et-text-lg);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: calc(-0.015em + var(--et-tracking-shift));
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

.et-cart-row__remove {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--et-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--et-text-base);
  transition: all var(--et-transition);
}
.et-cart-row__remove:hover {
  background: var(--et-danger-soft);
  color: var(--et-danger);
}

@media (max-width: 575.98px) {
  .et-cart-row {
    grid-template-columns: 80px minmax(0, 1fr) 32px;
    grid-template-areas:
      "image info remove"
      "image total total";
    padding: 1rem;
    gap: 0.75rem;
  }
  .et-cart-row__image { width: 80px; height: 80px; grid-area: image; }
  .et-cart-row__info { grid-area: info; }
  .et-cart-row__total { grid-area: total; align-items: flex-start; }
  .et-cart-row__remove { grid-area: remove; }
}

/* ---------- Form fields ---------- */
.et-checkout-form { margin-top: 0.75rem; }
.et-checkout-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .et-checkout-form__grid { grid-template-columns: 1fr 1fr; }
}

.et-field { display: flex; flex-direction: column; gap: 0.375rem; }
.et-field__label {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  font-weight: 500;
}
.et-field__req { color: var(--et-danger); margin-right: 0.1em; }

.et-field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: var(--et-input-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-input-radius);
  box-shadow: var(--et-input-shadow, none);
  background: var(--et-surface);
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  color: var(--et-text);
  transition: border-color var(--et-transition), box-shadow var(--et-transition);
}
.et-field__input:hover { border-color: var(--et-text-muted); }
.et-field__input:focus {
  outline: none;
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px var(--et-accent-light);
}
.et-field__input::placeholder { color: var(--et-text-muted); opacity: 0.7; }

.et-field__phone {
  display: flex;
  align-items: stretch;
  border: var(--et-input-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-input-radius);
  box-shadow: var(--et-input-shadow, none);
  background: var(--et-surface);
  transition: border-color var(--et-transition), box-shadow var(--et-transition);
}
.et-field__phone:focus-within {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 3px var(--et-accent-light);
}
.et-field__phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  background: var(--et-bg);
  border-right: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm) 0 0 var(--et-radius-sm);
  font-size: var(--et-text-base);
  color: var(--et-text);
  font-weight: 600;
  white-space: nowrap;
}
.et-field__flag { font-size: 1.25em; line-height: 1; }
.et-field__input--phone {
  border: 0;
  box-shadow: none;
  border-radius: 0 var(--et-radius-sm) var(--et-radius-sm) 0;
}
.et-field__input--phone:focus { box-shadow: none; }

/* ---------- Custom checkbox ---------- */
.et-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
  font-size: var(--et-text-sm);
  color: var(--et-text);
  line-height: 1.4;
}
.et-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.et-checkbox__mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--et-surface);
  border: 1.5px solid var(--et-border);
  border-radius: calc(var(--et-radius-xs) * 0.8333);
  position: relative;
  transition: all var(--et-transition);
  margin-top: 1px;
}
.et-checkbox__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--et-accent-contrast);
  border-bottom: 2px solid var(--et-accent-contrast);
  transform: translate(-55%, -70%) rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}
.et-checkbox input:checked ~ .et-checkbox__mark {
  background: var(--et-accent);
  border-color: var(--et-accent);
}
.et-checkbox input:checked ~ .et-checkbox__mark::after { transform: translate(-55%, -70%) rotate(-45deg) scale(1); }
.et-checkbox:hover .et-checkbox__mark { border-color: var(--et-accent); }
.et-checkbox input:focus-visible ~ .et-checkbox__mark {
  box-shadow: 0 0 0 3px var(--et-accent-light);
}
.et-checkbox__label { flex: 1; }
.et-checkbox__label a { color: var(--et-accent-text); text-decoration: underline; text-underline-offset: 2px; }

.et-checkout-register { margin-top: 0.5rem; }

/* ---------- Delivery / Payment method cards ---------- */
.et-method-list { display: flex; flex-direction: column; gap: 0.625rem; }

/* Grouped fieldset (shipping carrier → options) */
.et-method-group {
  padding: 0;
  margin: 0;
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-surface);
  transition: all var(--et-transition);
}
.et-method-group:has(input:checked) {
  background: var(--et-accent-light);
  border-color: var(--et-accent);
}
.et-method-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.75rem;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: calc(-0.01em + var(--et-tracking-shift));
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-method-group__title i { color: var(--et-accent-text); font-size: 0.95em; }
.et-method-group:has(input:checked) .et-method-group__title {
  padding-bottom: 0;
}
.et-method-group__options {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0.5rem 0.5rem;
}

/* Single-method group (no title repeated inside) */
.et-method-group[data-single] .et-method-group__options { display: none; }

/* Method option (radio card) */
.et-method-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  cursor: pointer;
  border-radius: var(--et-radius-xs);
  transition: background var(--et-transition);
  position: relative;
}
.et-method-option:hover { background: color-mix(in srgb, var(--et-text) 2%, transparent); }
.et-method-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.et-method-option__mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--et-border);
  border-radius: 50%;
  background: var(--et-surface);
  position: relative;
  margin-top: 1px;
  transition: all var(--et-transition);
}
.et-method-option__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--et-accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}
.et-method-option input:checked ~ .et-method-option__mark {
  border-color: var(--et-accent);
}
.et-method-option input:checked ~ .et-method-option__mark::after { transform: translate(-50%, -50%) scale(1); }
.et-method-option:hover .et-method-option__mark { border-color: var(--et-accent); }

.et-method-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.et-method-option__name {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.et-method-option__name i { color: var(--et-accent-text); font-size: 0.95em; }
.et-method-option__desc {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  line-height: 1.4;
}
.et-method-option__price {
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  margin-top: 0.125rem;
}

/* Payment method variant — card style with border for each option */
.et-method-option--card {
  border: var(--et-border-width) dashed var(--et-border);
  border-radius: var(--et-radius-sm);
  padding: 0.875rem 1rem;
  background: var(--et-surface);
  margin-bottom: 0;
}
.et-method-option--card:hover { background: var(--et-bg); border-color: var(--et-accent); }
.et-method-option--card input:checked ~ .et-method-option__mark { border-color: var(--et-accent); }
.et-method-option--card:has(input:checked) {
  background: var(--et-accent-light);
  border-color: var(--et-accent);
  border-style: solid;
}
.et-method-option--card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Sticky summary (right column) ---------- */
.et-checkout-layout__aside {
  position: sticky;
  top: 5.5rem;
}
@media (max-width: 991.98px) {
  .et-checkout-layout__aside { position: static; }
}

.et-summary { display: flex; flex-direction: column; gap: 1rem; }
.et-summary .et-product-section__title { margin-bottom: 0; font-size: var(--et-text-lg); }

/* Mini cart items in summary */
.et-summary__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}
.et-summary__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.et-summary__item-img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.et-summary__item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-summary__item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: calc(var(--et-text-xs) * 0.8727);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--et-accent-contrast);
  background: var(--et-accent);
  border-radius: var(--et-radius-full);
}
.et-summary__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.et-summary__item-name {
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.et-summary__item-price {
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  font-variant-numeric: tabular-nums;
}

/* Collapse items after 3 */
.et-summary__items.is-collapsed .et-summary__item:nth-child(n+4) { display: none; }
.et-summary__items.is-collapsed .et-summary__items-toggle-hide { display: none; }
.et-summary__items:not(.is-collapsed) .et-summary__items-toggle-show { display: none; }

.et-summary__items-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  background: none;
  border: var(--et-border-width) dashed var(--et-border);
  border-radius: var(--et-radius-xs);
  font-family: var(--et-font);
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-accent-text);
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-summary__items-toggle:hover { background: var(--et-accent-light); border-color: var(--et-accent); }
.et-summary__items-toggle i { font-size: 0.7em; }

.et-summary__intro {
  margin: 0;
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  line-height: 1.5;
  padding-bottom: 1rem;
  border-bottom: var(--et-border-width) solid var(--et-border);
}

/* Coupon accordion */
.et-summary__coupon {
  border-bottom: var(--et-border-width) solid var(--et-border);
  padding-bottom: 1rem;
}
.et-summary__coupon-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--et-text-base);
  font-weight: 600;
  color: var(--et-text);
  padding: 0.25rem 0;
  user-select: none;
}
.et-summary__coupon-trigger::-webkit-details-marker { display: none; }
.et-summary__coupon-trigger i {
  color: var(--et-text-muted);
  font-size: 0.8em;
  transition: transform 0.25s var(--ease-spring);
}
.et-summary__coupon[open] .et-summary__coupon-trigger i { transform: rotate(180deg); }

.et-summary__coupon-body {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.et-summary__coupon-body .et-field { flex: 1; }
.et-summary__coupon-apply {
  padding: 0 1rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-radius-sm);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--et-transition);
}
.et-summary__coupon-apply:hover { background: var(--et-accent-hover); }

/* Totals */
.et-summary__totals { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.et-summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--et-text-sm);
}
.et-summary__row dt {
  margin: 0;
  color: var(--et-text-secondary);
  font-weight: 500;
}
.et-summary__row dd {
  margin: 0;
  color: var(--et-text);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.et-summary__row--discount dd { color: var(--et-success); }
.et-summary__row--total {
  padding-top: 0.75rem;
  margin-top: 0.375rem;
  border-top: var(--et-border-width) solid var(--et-border);
  align-items: baseline;
}
.et-summary__row--total dt {
  font-size: var(--et-text-base);
  color: var(--et-text);
  font-weight: 700;
}
.et-summary__row--total dd {
  font-family: var(--et-font-display);
  font-size: var(--et-text-xl);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-heading-tracking);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

/* Summary agreements */
.et-summary__agree { display: flex; }
.et-summary__link { color: var(--et-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.et-summary__link:hover { color: var(--et-accent-hover); }

.et-summary__submit {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-radius-sm);
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}
.et-summary__submit:hover { background: var(--et-accent-hover); transform: translateY(-1px); }
.et-summary__submit:active { transform: scale(0.98); }

.et-summary__delivery-date {
  color: var(--et-success);
  font-weight: 600;
}

.et-summary__post-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem;
  background: var(--et-bg);
  border-radius: var(--et-radius-xs);
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  line-height: 1.4;
}
.et-summary__post-note i { color: var(--et-accent-text); flex-shrink: 0; }

/* Security badges under CTA */
.et-summary__security {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: var(--et-border-width) solid var(--et-border);
}
.et-summary__security-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-summary__security-item i {
  color: var(--et-success);
  width: 16px;
  text-align: center;
}

/* ---------- Conditional delivery address fields ---------- */
.et-delivery-panel { display: none; }
.et-delivery-panel.is-visible { display: block; }

.et-delivery-panel__card {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
}
.et-delivery-panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-delivery-panel__title i { color: var(--et-accent-text); }

.et-delivery-pickup-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-sm);
  color: var(--et-text);
  line-height: 1.5;
}
.et-delivery-pickup-info i { color: var(--et-accent-text); margin-top: 0.15em; }
.et-delivery-pickup-info strong { display: block; font-weight: 700; margin-bottom: 0.125rem; }

/* Select as dropdown */
select.et-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ---------- Form validation styles ---------- */
.et-field__error {
  display: none;
  font-size: var(--et-text-xs);
  color: var(--et-danger);
  margin-top: 0.25rem;
  line-height: 1.3;
}
.et-field.has-error .et-field__error { display: block; }
.et-field.has-error .et-field__input {
  border-color: var(--et-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-danger) 10%, transparent);
}
.et-field.has-error .et-field__phone {
  border-color: var(--et-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-danger) 10%, transparent);
}
/* Checkbox / radio with an error (terms agreement in checkout): the mark itself is red, easy to spot on a phone */
.et-field.has-error .et-checkbox__mark {
  border-color: var(--et-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-danger) 20%, transparent);
}
.et-field.has-success .et-field__input { border-color: var(--et-success); }
.et-field.has-success .et-field__phone { border-color: var(--et-success); }

/* ---------- Mobile sticky checkout bar ---------- */
.et-mobile-checkout-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--et-surface);
  border-top: var(--et-border-width) solid var(--et-border);
  box-shadow: var(--et-shadow-up);
  align-items: center;
  gap: 1rem;
}
.et-mobile-checkout-bar__total { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1.15; }
.et-mobile-checkout-bar__label { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-mobile-checkout-bar__price {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-lg);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-mobile-checkout-bar__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.et-mobile-checkout-bar__btn:active { transform: scale(0.98); }
@media (max-width: 767.98px) {
  .et-mobile-checkout-bar { display: flex; }
  body:has(.et-mobile-checkout-bar) .et-bottom-nav { display: none; }
}

/* ==========================================================================
   HOME PAGE — NEW BLOCKS (v5.9.0)
   ========================================================================== */

/* ---------- Flash Sale ---------- */
.et-flash-icon { color: var(--et-hot); margin-right: 0.25rem; }

.et-flash-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--et-warning-soft), var(--et-warning-tint));
  border: var(--et-border-width) solid var(--et-warning-border);
  border-radius: var(--et-chip-radius);
  padding: 0.5rem 1rem;
}
.et-flash-timer__label {
  font-size: var(--et-text-xs);
  font-weight: 600;
  color: var(--et-warning-text);
}
.et-flash-timer__digits {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.et-flash-timer__unit {
  background: var(--et-warning-text);
  color: var(--et-on-status);
  font-family: var(--et-font-display);
  font-size: var(--et-text-sm);
  font-weight: calc(var(--et-heading-weight) + 100);
  padding: 0.25rem 0.4rem;
  border-radius: calc(var(--et-radius-xs) * 0.6667);
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-flash-timer__sep { color: var(--et-warning-text); font-weight: 800; font-size: var(--et-text-xs); }

@media (max-width: 575.98px) {
  .et-section__header:has(.et-flash-timer) { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ---------- Trending pills ---------- */
.et-trending-icon { color: var(--et-success); margin-right: 0.25rem; }
.et-collection-pills__item i { font-size: 0.75em; color: var(--et-text-muted); }

/* ---------- Recently Viewed ---------- */
.et-recent-icon { color: var(--et-accent-text); margin-right: 0.25rem; }
.et-recently-viewed__scroll {
  display: flex;
  gap: var(--et-grid-gap);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--et-border) transparent;
  scroll-snap-type: x mandatory;
}
.et-recently-viewed__scroll::-webkit-scrollbar { height: 4px; }
.et-recently-viewed__scroll::-webkit-scrollbar-thumb { background: var(--et-border); border-radius: 4px; }

.et-recent-card {
  flex-shrink: 0;
  width: 160px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--et-text);
  transition: all var(--et-transition);
}
.et-recent-card:hover { color: var(--et-accent-text); }
.et-recent-card__image {
  width: 160px;
  height: 160px;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-media-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--et-card-pad) * 0.75);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.et-recent-card__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-recent-card__name {
  font-size: var(--et-text-xs);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.et-recent-card__price {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-sm);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}

/* ---------- Testimonials ---------- */
.et-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--et-grid-gap) * 1.25);
}
@media (min-width: 768px) {
  .et-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.et-testimonial {
  padding: calc(var(--et-card-pad) * 1.25);
  background: var(--et-bg);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.et-testimonial__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.et-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  flex-shrink: 0;
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-testimonial__author-info { flex: 1; min-width: 0; line-height: 1.3; }
.et-testimonial__name { font-size: var(--et-text-sm); font-weight: 700; color: var(--et-text); }
.et-testimonial__verified {
  display: block;
  font-size: var(--et-text-xs);
  color: var(--et-success);
}
.et-testimonial__verified i { font-size: 0.85em; }
.et-testimonial__date { font-size: var(--et-text-xs); color: var(--et-text-muted); flex-shrink: 0; }
.et-testimonial__stars { color: var(--et-rating); font-size: var(--et-text-sm); letter-spacing: 1px; }
.et-testimonial__text {
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.et-testimonial__product {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  text-decoration: none;
  color: var(--et-text);
  font-size: var(--et-text-xs);
  font-weight: 600;
  transition: border-color var(--et-transition);
  margin-top: auto;
}
.et-testimonial__product:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-testimonial__product img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------- Blog preview ---------- */
.et-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--et-grid-gap) * 1.25);
}
@media (min-width: 768px) {
  .et-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.et-blog-card {
  background: var(--et-bg);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--et-transition);
}
.et-blog-card:hover { border-color: var(--et-accent); box-shadow: var(--et-shadow-lg); }

.et-blog-card__image {
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
}
.et-blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.et-blog-card:hover .et-blog-card__image img { transform: scale(1.05); }
.et-blog-card__category {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--et-accent);
  color: var(--et-accent-contrast);
  font-size: var(--et-text-xs);
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: var(--et-radius-xs);
}

.et-blog-card__body { padding: var(--et-card-pad) calc(var(--et-card-pad) * 1.125); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.et-blog-card__date { font-size: var(--et-text-xs); color: var(--et-text-muted); display: inline-flex; align-items: center; gap: 0.375rem; }
.et-blog-card__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-base);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  text-decoration: none;
  line-height: calc(var(--et-heading-leading) * 1.0833);
  letter-spacing: calc(-0.015em + var(--et-tracking-shift));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-blog-card__title:hover { color: var(--et-accent-text); }
.et-blog-card__excerpt {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  flex: 1;
}
.et-blog-card__link {
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
}
.et-blog-card__link i { font-size: 0.8em; transition: transform 0.2s ease; }
.et-blog-card__link:hover i { transform: translateX(4px); }

/* ---------- Newsletter ---------- */
.et-newsletter {
  background: linear-gradient(135deg, var(--et-accent), var(--et-accent-hover));
  padding: 3rem 0;
  margin-top: 3rem;
  color: var(--et-accent-contrast);
}
.et-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .et-newsletter__inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.et-newsletter__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-2xl);
  font-weight: var(--et-heading-weight);
  letter-spacing: var(--et-heading-tracking);
  margin: 0 0 0.5rem;
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-newsletter__text { margin: 0; font-size: var(--et-text-sm); opacity: 0.9; line-height: 1.6; }

.et-newsletter__input-wrap {
  display: flex;
  gap: 0;
  background: var(--et-surface);
  border-radius: var(--et-input-radius);
  overflow: hidden;
  box-shadow: var(--et-shadow-lg);
  max-width: 480px;
}
.et-newsletter__input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-base);
  color: var(--et-text);
  min-width: 0;
}
.et-newsletter__input::placeholder { color: var(--et-text-muted); }
.et-newsletter__input:focus { outline: none; }
.et-newsletter__btn {
  padding: 0.875rem 1.5rem;
  background: var(--et-text);
  color: var(--et-accent-contrast);
  border: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--et-transition);
}
.et-newsletter__btn:hover { background: var(--et-accent); }
.et-newsletter__privacy {
  font-size: var(--et-text-xs);
  opacity: 0.75;
  margin: 0.5rem 0 0;
}
.et-newsletter__privacy a { color: var(--et-accent-contrast); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 575.98px) {
  .et-newsletter__input-wrap { flex-direction: column; }
  .et-newsletter__btn { justify-content: center; }
}

/* ---------- Why Choose Us (expanded advantages) ---------- */
.et-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--et-grid-gap);
  padding: 4px;
  margin: -4px;
}
@media (min-width: 768px) {
  .et-why-grid { grid-template-columns: repeat(3, 1fr); }
}

.et-why-card {
  padding: calc(var(--et-card-pad) * 1.25);
  background: var(--et-bg);
  border: var(--et-card-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-card-radius);
  transition: all var(--et-transition);
  min-width: 0;
  overflow-wrap: break-word;
}
.et-why-card:hover { border-color: var(--et-accent); transform: translateY(-2px); box-shadow: var(--et-shadow-lg); }
.et-why-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--et-accent-light);
  color: var(--et-accent-text);
  border-radius: var(--et-radius-sm);
  font-size: var(--et-text-lg);
  margin-bottom: 0.875rem;
}
.et-why-card__title {
  font-family: var(--et-font-display);
  font-size: var(--et-text-sm);
  font-weight: var(--et-heading-weight);
  color: var(--et-text);
  margin: 0 0 0.375rem;
  letter-spacing: calc(-0.01em + var(--et-tracking-shift));
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-why-card__text {
  font-size: var(--et-text-sm);
  color: var(--et-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ===== CART MODAL CONTENT (cart.twig with modal=true; the .et-modal component itself is in elbuz_ui.css) ===== */
/* Cart in modal mode (modal=true flag in cart.twig) */
.et-main--modal { padding: 0; }
.et-main--modal .container { max-width: 100%; padding: 0 1rem; }
.et-main--modal .et-product-section { padding: 0.5rem 0; }
.et-main--modal .et-checkout-title { font-size: var(--et-text-base); margin-bottom: 0.5rem; }
.et-main--modal .et-cart-layout { grid-template-columns: 1fr; gap: 0.75rem; }
/* Modal mode: single column, sidebar below items, no sticky */
.et-main--modal .et-cart-layout { grid-template-columns: 1fr; gap: 0.75rem; }
.et-main--modal .et-cart-layout__aside { position: static; order: 2; }
.et-main--modal .et-cart-layout__main { order: 1; }
.et-main--modal .et-cart-summary { position: static; }

/* ---------- Added to cart modal ---------- */
.et-added-cart__product {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--et-success) 6%, transparent);
  border: var(--et-border-width) solid color-mix(in srgb, var(--et-success) 20%, transparent);
  border-radius: var(--et-radius-sm);
  margin-bottom: 1rem;
}
.et-added-cart__image {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: var(--et-bg);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius-xs);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.et-added-cart__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.et-added-cart__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.et-added-cart__name {
  font-size: var(--et-text-sm);
  font-weight: 700;
  color: var(--et-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.et-added-cart__price {
  font-family: var(--et-font-price, var(--et-font-display));
  font-size: var(--et-text-base);
  font-weight: calc(var(--et-heading-weight) + 100);
  color: var(--et-text);
  letter-spacing: var(--et-tracking-shift);
  text-transform: var(--et-heading-transform);
  font-style: var(--et-heading-style);
}
.et-added-cart__check {
  color: var(--et-success);
  font-size: var(--et-text-2xl);
  flex-shrink: 0;
}

.et-added-cart__summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--et-bg);
  border-radius: var(--et-radius-xs);
  margin-bottom: 1.25rem;
}
.et-added-cart__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--et-text-sm);
  color: var(--et-text-secondary);
}
.et-added-cart__summary-row strong {
  color: var(--et-text);
  font-variant-numeric: tabular-nums;
}

.et-added-cart__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.et-added-cart__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--et-btn-radius);
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--et-transition);
}
.et-added-cart__btn--cart {
  background: var(--et-bg);
  border: calc(var(--et-border-width) * 2) solid var(--et-accent);
  color: var(--et-accent-text);
}
.et-added-cart__btn--cart:hover { background: var(--et-accent-light); }
.et-added-cart__btn--checkout {
  background: var(--et-accent);
  color: var(--et-accent-contrast);
}
.et-added-cart__btn--checkout:hover { background: var(--et-accent-hover); color: var(--et-accent-contrast); }

.et-added-cart__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: 0;
  font-family: var(--et-font);
  font-size: var(--et-text-sm);
  font-weight: 600;
  color: var(--et-text-muted);
  cursor: pointer;
  transition: color var(--et-transition);
}
.et-added-cart__continue:hover { color: var(--et-accent-text); }

/* Password field with toggle */
.et-field__password-wrap {
  position: relative;
}
.et-field__password-wrap .et-field__input { padding-right: 3rem; }
.et-field__password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: none;
  border: 0;
  color: var(--et-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--et-text-base);
  transition: color var(--et-transition);
}
.et-field__password-toggle:hover { color: var(--et-accent-text); }

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

  .et-marquee__track { animation: none !important; }
}

/* Focus ring for keyboard nav */
:focus-visible {
  outline: 2px solid var(--et-accent);
  outline-offset: 2px;
}

/* === search === */
.et-search { position: relative; }
.et-search__input::-webkit-search-cancel-button { display: none; }
.et-search.is-loading .et-search__btn { opacity: 0.6; }
.et-search__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--et-surface);
  color: var(--et-text);
  border: var(--et-overlay-border-width, var(--et-border-width)) solid var(--et-border);
  border-radius: var(--et-overlay-radius, var(--et-radius-sm));
  box-shadow: var(--et-overlay-shadow, var(--et-shadow-lg));
}
.et-search__list[hidden] { display: none; }
.et-search__group {
  padding: 0.5rem 0.625rem 0.25rem;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
  text-transform: uppercase;
}
.et-search__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--et-radius-xs);
  color: inherit;
  text-decoration: none;
}
.et-search__option:hover,
.et-search__option[aria-selected="true"] { background: var(--et-accent-light); color: var(--et-accent-text); }
.et-search__thumb { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.et-search__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-search__price { flex-shrink: 0; font-weight: 600; }
.et-search__price-new { color: var(--et-sale); }
.et-search__price-old { color: var(--et-text-muted); font-weight: 400; font-size: var(--et-text-sm); }
.et-search__option--all { justify-content: center; font-weight: 600; color: var(--et-accent-text); }
.et-search__empty { padding: 0.75rem; text-align: center; color: var(--et-text-muted); }
.et-search-overlay .et-search__input { background: var(--et-surface); color: var(--et-text); border-color: var(--et-accent); }
html.et-search-open { overflow: hidden; }

/* === listing === */
[data-et-listing] { transition: opacity var(--et-transition); }
[data-et-listing].is-loading { opacity: 0.5; pointer-events: none; cursor: progress; }
[data-et-listing]:focus { outline: none; }

/* ===== FOOTER COLUMNS (setting footer_columns → data-columns) ===== */
.et-footer__grid[data-columns="2"] { --et-footer-cols: 1; }
.et-footer__grid[data-columns="3"] { --et-footer-cols: 2; }
.et-footer__grid[data-columns="4"] { --et-footer-cols: 3; }
@media (min-width: 1200px) {
  .et-footer__grid { grid-template-columns: 1.4fr repeat(var(--et-footer-cols, 3), 1fr); }
}

/* === stock modules === */
/* Structural markup for stock OC modules/pages (#17a). Visual polish comes with presets (#17b). */
.et-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
.et-module__title { font-family: var(--et-font-display); font-size: var(--et-text-base); font-weight: var(--et-heading-weight); color: var(--et-text); margin: 0 0 var(--space-sm); letter-spacing: var(--et-tracking-shift); text-transform: var(--et-heading-transform); font-style: var(--et-heading-style); }
.et-module__text { color: var(--et-text-secondary); font-size: var(--et-text-sm); }
.et-module__sublist { padding-left: var(--space-md); }
.et-module--filter fieldset { border: 0; margin: 0; min-width: 0; }
.et-module--filter legend { padding: 0; }
.et-module--filter .et-btn { margin-top: var(--space-md); }
/* Product modules (featured include) placed in a narrow column: one card per row */
.et-sidebar .et-product-section .container { padding: 0; max-width: none; }
.et-sidebar .et-product-block { padding: var(--space-md); }
.et-sidebar .et-product-section .row > * { flex: 0 0 100%; max-width: 100%; }

.et-banner { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--et-radius); }
.et-banner__item { flex: 0 0 100%; scroll-snap-align: start; display: flex; justify-content: center; align-items: center; }
.et-banner__link { display: flex; justify-content: center; max-width: 100%; padding: var(--space-sm); }
/* Natural size, never upscaled; logo-style banners capped in height */
.et-banner__img { display: block; width: auto; max-width: 100%; height: auto; max-height: 160px; object-fit: contain; }

.et-captcha__row { display: flex; gap: var(--space-sm); align-items: center; }
.et-captcha__img { border-radius: var(--et-radius-xs); }

fieldset.et-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.et-field__hint { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; margin-top: var(--space-lg); }
.et-table-responsive { overflow-x: auto; }
.et-results { text-align: center; color: var(--et-text-muted); font-size: var(--et-text-sm); }

.et-page-narrow { max-width: 760px; margin: 0 auto; }
.et-result { text-align: center; }
.et-result__icon { font-size: var(--et-text-4xl); color: var(--et-success); margin-bottom: var(--space-md); }
.et-result .et-form-actions { justify-content: center; }
.et-split { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 768px) { .et-split { grid-template-columns: 1fr 1fr; } }
.et-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-xl); font-size: var(--et-text-sm); }
.et-details dt { color: var(--et-text-muted); font-weight: 600; }
.et-details dd { margin: 0; color: var(--et-text); }

/* ===== SLIDER (stock carousel/slideshow modules, [data-et-slider]) ===== */
.et-slider { position: relative; margin-bottom: 1.5rem; }
.et-slider__track {
  --et-slider-gap: 1rem;
  --et-slider-per: 1;
  display: flex;
  gap: var(--et-slider-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.et-slider__track::-webkit-scrollbar { display: none; }
.et-slider__slide {
  flex: 0 0 calc((100% - (var(--et-slider-per) - 1) * var(--et-slider-gap)) / var(--et-slider-per));
  scroll-snap-align: start;
}
.et-slider__link { display: block; }
.et-slider__img { display: block; max-width: 100%; height: auto; }

.et-slider--slideshow { border-radius: var(--et-radius); overflow: hidden; }
.et-slider--slideshow .et-slider__track { --et-slider-gap: 0px; }
.et-slider--slideshow .et-slider__img { width: 100%; }

.et-slider--carousel {
  padding: 0.5rem 3rem;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: var(--et-radius);
}
.et-slider--carousel .et-slider__track { --et-slider-per: 2; }
.et-slider--carousel .et-slider__slide { display: flex; align-items: center; justify-content: center; padding: 1rem 0; }
.et-slider--carousel .et-slider__img { max-height: 60px; width: auto; opacity: 0.5; filter: grayscale(100%); transition: opacity var(--et-transition), filter var(--et-transition); }
.et-slider--carousel .et-slider__slide:hover .et-slider__img,
.et-slider--carousel .et-slider__link:focus-visible .et-slider__img { opacity: 1; filter: none; }
.et-slider--carousel .et-slider__dots { display: none; }
@media (min-width: 576px) { .et-slider--carousel .et-slider__track { --et-slider-per: 3; } }
@media (min-width: 768px) { .et-slider--carousel .et-slider__track { --et-slider-per: 4; } }
@media (min-width: 992px) { .et-slider--carousel .et-slider__track { --et-slider-per: 5; } }
@media (min-width: 1200px) { .et-slider--carousel .et-slider__track { --et-slider-per: 6; } }

.et-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  transform: translateY(-50%);
  color: var(--et-text);
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--et-transition), border-color var(--et-transition);
}
.et-slider__nav:hover { color: var(--et-accent-text); border-color: var(--et-accent); }
.et-slider__nav--prev { left: 0.5rem; }
.et-slider__nav--next { right: 0.5rem; }
.et-slider__dots {
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 0.375rem;
}
.et-slider__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  background: var(--et-surface);
  border: var(--et-border-width) solid var(--et-border);
  border-radius: 50%;
  opacity: 0.7;
  cursor: pointer;
}
.et-slider__dot.is-active { background: var(--et-accent); border-color: var(--et-accent); opacity: 1; }
.et-slider.is-static .et-slider__nav,
.et-slider.is-static .et-slider__dots { display: none; }

/* ===== Social login (elbuz_social_login) ===== */
a.et-modal__social-btn, a.et-auth__social-btn { text-decoration: none; }
.et-social-confirm { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-sm); margin: 0 0 var(--space-lg); font-size: var(--et-text-sm); }
.et-social-confirm__label { color: var(--et-text-muted); }
.et-social-confirm__value { margin: 0; color: var(--et-text); font-weight: 600; word-break: break-all; }
.et-social-accounts { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--et-border-width) solid var(--et-border); }
.et-social-accounts__title { font-size: var(--et-text-lg); margin: 0 0 var(--space-md); }
.et-social-accounts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.et-social-accounts__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius-sm); }
.et-social-accounts__name { font-weight: 600; min-width: 8rem; }
.et-social-accounts__status { flex: 1; color: var(--et-text-muted); font-size: var(--et-text-sm); }
.et-social-accounts__form { margin: 0; }
.et-social-accounts__btn { display: inline-flex; padding: var(--space-xs) var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-btn-radius); background: var(--et-surface); color: var(--et-text); font: inherit; font-size: var(--et-text-sm); cursor: pointer; text-decoration: none; }
.et-social-accounts__btn:hover { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-social-accounts__note { margin: var(--space-sm) 0 0; font-size: var(--et-text-sm); color: var(--et-text-muted); }

/* ===== Product page: reviews, questions (elbuz_reviews, elbuz_product_questions) ===== */
.et-reviews-layout[hidden] { display: none; }
.et-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#review.is-loading, #questions-list.is-loading { opacity: 0.5; pointer-events: none; }
.et-review__helpful-btn.is-active { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-review__reply, .et-question__answer { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border-left: calc(var(--et-border-width) * 3) solid var(--et-accent); border-radius: var(--et-radius-xs); background: var(--et-bg); }
.et-review__reply-head, .et-question__answer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--et-text-sm); font-weight: 700; color: var(--et-text); }
.et-review__reply .et-review__text, .et-question__answer .et-question__text { margin: 0; }
.et-question { padding: var(--space-md) 0; border-bottom: var(--et-border-width) solid var(--et-border); }
.et-question:last-of-type { border-bottom: 0; }
.et-question__head { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.et-question__author { font-size: var(--et-text-sm); color: var(--et-text); }
.et-question__date { font-size: var(--et-text-xs); font-weight: 400; color: var(--et-text-muted); }
.et-question__text { margin: 0 0 var(--space-xs); color: var(--et-text); }

/* ===== Named lists (module elbuz_product_watch): "add to list" dialog, "My lists", shared list ===== */
.et-lists-dialog__body { display: flex; flex-direction: column; gap: var(--space-md); }
.et-lists-dialog__lists { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); max-height: 50vh; overflow-y: auto; }
.et-lists-dialog__new, .et-lists__new, .et-lists__share { display: flex; gap: var(--space-xs); }
.et-lists-dialog__new .et-field__input, .et-lists__share .et-field__input { flex: 1; min-width: 0; }
.et-lists-dialog__all { font-size: var(--et-text-sm); color: var(--et-accent-text); }
.et-lists__note, .et-lists__by, .et-lists__help { color: var(--et-text-muted); font-size: var(--et-text-sm); }
.et-lists__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); }
.et-lists__tab { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-btn-radius); color: var(--et-text); font-size: var(--et-text-sm); text-decoration: none; }
.et-lists__tab:hover, .et-lists__tab.is-active { border-color: var(--et-accent); color: var(--et-accent-text); }
.et-lists__count { color: var(--et-text-muted); font-size: var(--et-text-xs); }
.et-lists__bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.et-lists__item { display: flex; flex-direction: column; gap: var(--space-xs); }
.et-lists__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-lists__qty { display: inline-flex; align-items: center; gap: var(--space-xs); }
.et-lists__qty .et-field__input { width: 5em; }
.et-lists__badge { padding: 0 var(--space-xs); border-radius: var(--et-radius-xs); background: var(--et-success); color: var(--et-on-status); font-size: var(--et-text-xs); }
.et-lists__done { color: var(--et-success); }
.et-lists__settings { margin-top: var(--space-lg); padding: var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius); }
.et-lists__settings summary { cursor: pointer; font-weight: 600; }
.et-lists__form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); max-width: 36rem; }
.et-lists__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ===== Trade-in page and request wizard (module elbuz_tradein), product page line ===== */
.et-tradein__intro { max-width: 48rem; color: var(--et-text-secondary); margin-bottom: var(--space-lg); }
.et-tradein__heading { margin: 0 0 var(--space-md); font-size: var(--et-text-lg); font-weight: 700; color: var(--et-text); }
.et-tradein__how { margin-bottom: var(--space-lg); }
.et-tradein__how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-md); counter-reset: et-ti; }
.et-tradein__how-item { counter-increment: et-ti; padding: var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius); background: var(--et-surface); }
.et-tradein__how-item::before { content: counter(et-ti); display: inline-grid; place-items: center; width: 2em; height: 2em; margin-bottom: var(--space-xs); border-radius: var(--et-radius-full); background: var(--et-accent); color: var(--et-accent-contrast); font-weight: 700; }
.et-tradein__how-title { margin: 0 0 var(--space-xs); font-size: var(--et-text-base); }
.et-tradein__how-text { margin: 0; color: var(--et-text-secondary); font-size: var(--et-text-sm); }
.et-tradein__wizard { max-width: 48rem; padding: var(--space-md); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius); background: var(--et-surface); margin-bottom: var(--space-lg); }
.et-tradein__steps { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; gap: var(--space-xs); counter-reset: et-ts; }
.et-tradein__nav { counter-increment: et-ts; flex: 1; min-width: 0; padding-top: var(--space-xs); border-top: 3px solid var(--et-border); color: var(--et-text-muted); font-size: var(--et-text-sm); overflow-wrap: anywhere; }
.et-tradein__nav::before { content: counter(et-ts) ". "; }
.et-tradein__nav[aria-current="step"] { border-top-color: var(--et-accent); color: var(--et-text); font-weight: 600; }
.et-tradein__nav.is-done { border-top-color: var(--et-accent); }
.et-tradein__target { margin: 0 0 var(--space-md); font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-tradein__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-sm); }
.et-tradein__cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-sm); border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius-sm); text-align: center; cursor: pointer; }
.et-tradein__cat:hover, .et-tradein__cat:has(:checked) { border-color: var(--et-accent); }
.et-tradein__cat:has(:checked) { box-shadow: 0 0 0 1px var(--et-accent); }
.et-tradein__cat:has(:focus-visible) { outline: 2px solid var(--et-accent); outline-offset: 2px; }
.et-tradein__cat-input { position: absolute; opacity: 0; pointer-events: none; }
.et-tradein__cat-img { width: 6rem; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--et-media-radius); }
.et-tradein__cat-name { font-weight: 600; color: var(--et-text); overflow-wrap: anywhere; }
.et-tradein__cat-upto { font-size: var(--et-text-sm); color: var(--et-success); font-weight: 600; }
.et-tradein__form { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.et-tradein__choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.et-tradein__choice--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-md); }
.et-tradein__choice--inline > legend { width: 100%; }
.et-tradein__option { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; }
.et-tradein__option input { margin-top: 0.25em; accent-color: var(--et-accent); }
.et-tradein__option-text { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.et-tradein__option-hint, .et-tradein__help, .et-tradein__estimate-note { color: var(--et-text-muted); font-size: var(--et-text-xs); }
.et-tradein__estimate { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
.et-tradein__estimate output { font-weight: 700; font-size: var(--et-text-lg); color: var(--et-success); }
.et-tradein__estimate-note { flex-basis: 100%; }
.et-tradein__contacts { display: flex; flex-direction: column; gap: var(--space-md); }
.et-tradein__file { padding: var(--space-xs); }
.et-tradein__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.et-tradein__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.et-tradein__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }
.et-tradein .et-field__error:not([hidden]) { display: block; }
.et-tradein__done .et-tradein__heading { color: var(--et-success); }
.et-tradein__empty { color: var(--et-text-secondary); }
.et-tradein__faq { max-width: 48rem; }
.et-tradein__faq-item { border-bottom: var(--et-border-width) solid var(--et-border); }
.et-tradein__faq-q { padding: var(--space-sm) 0; cursor: pointer; font-weight: 600; color: var(--et-text); }
.et-tradein__faq-a { margin: 0 0 var(--space-sm); color: var(--et-text-secondary); }
.et-product__tradein { margin: 0.25rem 0 0; font-size: var(--et-text-sm); color: var(--et-text-secondary); }
.et-product__tradein i { color: var(--et-accent-text); margin-right: 0.25rem; }
.et-product__tradein a { color: var(--et-accent-text); font-weight: 600; }

/* ---- data-heading="orbit": an atom sign (two crossed orbits + a core) before the section title in the accent text colour;
   spins while the section is hovered (not with reduced motion). Prototype 27, preset atomic. ---- */
html[data-heading="orbit"] :is(.et-section__title, .et-product-section__title) { display: flex; align-items: center; gap: 0.38em; }
html[data-heading="orbit"] :is(.et-section__title, .et-product-section__title)::before {
  content: ""; flex: none; width: 1.05em; aspect-ratio: 1; background: var(--et-accent-text, var(--et-accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cellipse cx='22' cy='22' rx='19' ry='7.5' transform='rotate(-30 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='19' ry='7.5' transform='rotate(30 22 22)'/%3E%3Ccircle cx='22' cy='22' r='4' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cellipse cx='22' cy='22' rx='19' ry='7.5' transform='rotate(-30 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='19' ry='7.5' transform='rotate(30 22 22)'/%3E%3Ccircle cx='22' cy='22' r='4' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-heading="orbit"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="orbit"] .et-section--center :is(.et-section__title, .et-product-section__title) { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  html[data-heading="orbit"]:not([data-motion="none"]) .et-section:hover :is(.et-section__title, .et-product-section__title)::before { animation: et-orbit-spin 3s linear infinite; }
}
@keyframes et-orbit-spin { to { rotate: 1turn; } }

/* ---- data-media-bg="orbit": the product (best a cut-out) stands on a coloured oval (--et-pd: the --et-c-* palette by position or
   product) on the --et-surface-2 field, a thin orbit ring (--et-orbit) around it turns on card hover. Light and dark theme alike
   (the oval is muted in the dark one). Card photos and the product gallery. ---- */
:root[data-media-bg="orbit"] { --et-media-box: var(--et-surface-2); }
html:root[data-media-bg="orbit"] :is(.et-card__image, .et-gallery__main) {
  position: relative; isolation: isolate;
  background: radial-gradient(ellipse 44% 34% at 50% 62%, color-mix(in oklab, var(--et-pd, var(--et-accent)) 82%, var(--et-surface-2)) 0 98%, transparent 100%), var(--et-surface-2);
}
html.dark-theme:root[data-media-bg="orbit"] :is(.et-card__image, .et-gallery__main) {
  background: radial-gradient(ellipse 44% 34% at 50% 62%, color-mix(in oklab, var(--et-pd, var(--et-accent)) 45%, var(--et-surface-2)) 0 98%, transparent 100%), var(--et-surface-2);
}
html:root[data-media-bg="orbit"] :is(.et-card__image, .et-gallery__main)::after {
  content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; top: 38%; height: 44%; border: 1.5px solid var(--et-orbit, color-mix(in oklab, var(--et-text) 22%, transparent));
  border-radius: 50%; rotate: -12deg; pointer-events: none; transition: rotate var(--et-motion-slow, 0.6s) var(--et-spring, ease);
}
html:root[data-media-bg="orbit"] .et-card:hover .et-card__image::after { rotate: 6deg; }
html:root[data-media-bg="orbit"] :is(.et-card__image, .et-gallery__main) img { position: relative; z-index: 1; mix-blend-mode: normal; filter: url(#et-white-key) var(--et-media-filter); }
html:root[data-media-bg="orbit"] .et-card__image :is(.et-card__img-main, .et-card__img-alt) { object-fit: contain; padding: 8%; background: transparent; }
html:root[data-media-bg="orbit"] .et-gallery__image { object-fit: contain; padding: 6%; }

/* ---- data-decor="sparks": page texture — fine dots plus four-point sparks and boomerangs (space-age pattern), scrolls with the page ---- */
html[data-decor="sparks"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='%23000' fill-opacity='.06'%3E%3Cpath d='M90 60c2 16 9 23 25 25-16 2-23 9-25 25-2-16-9-23-25-25 16-2 23-9 25-25zM400 330c1.6 12 7 17.4 19 19-12 1.6-17.4 7-19 19-1.6-12-7-17.4-19-19 12-1.6 17.4-7 19-19z'/%3E%3Cpath d='M300 120c18-26 38-30 70-24-24 4-38 12-50 30zM120 400c20-22 42-24 72-14-26 2-40 8-54 24z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--et-text) 9%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 64%, color-mix(in srgb, var(--et-text) 9%, transparent) 0 1.2px, transparent 1.7px);
  background-size: 520px 520px, 180px 180px, 260px 260px;
}
html.dark-theme[data-decor="sparks"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='%23fff' fill-opacity='.07'%3E%3Cpath d='M90 60c2 16 9 23 25 25-16 2-23 9-25 25-2-16-9-23-25-25 16-2 23-9 25-25zM400 330c1.6 12 7 17.4 19 19-12 1.6-17.4 7-19 19-1.6-12-7-17.4-19-19 12-1.6 17.4-7 19-19z'/%3E%3Cpath d='M300 120c18-26 38-30 70-24-24 4-38 12-50 30zM120 400c20-22 42-24 72-14-26 2-40 8-54 24z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--et-text) 22%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 64%, color-mix(in srgb, var(--et-text) 16%, transparent) 0 1.2px, transparent 1.7px);
}

/* ---- data-heading="coded": a "// 01" code in mono accent above the section title (section counter) and a ruler with ticks
   under it (--et-accent for the first segment, --et-border for the ticks). ---- */
html[data-heading="coded"] :is(.et-section__title, .et-product-section__title) {
  counter-increment: et-section; position: relative; padding-bottom: 0.75rem;
  background: linear-gradient(var(--et-accent), var(--et-accent)) 0 100% / 2.25rem 3px no-repeat,
    repeating-linear-gradient(90deg, var(--et-border) 0 1px, transparent 1px 0.75rem) 0 100% / 100% 0.375rem no-repeat;
}
html[data-heading="coded"] :is(.et-section__title, .et-product-section__title)::before {
  content: "// " counter(et-section, decimal-leading-zero); display: block; margin-bottom: 0.5rem;
  font: 600 var(--et-text-xs)/1.2 var(--et-font-mono, var(--et-font)); letter-spacing: 0.08em; text-transform: none; color: var(--et-accent-text, var(--et-accent));
}
html[data-heading="coded"] :is(.et-section__title, .et-product-section__title) > i { display: none; }
html[data-heading="coded"] .et-section--center :is(.et-section__title, .et-product-section__title) { background-position: 50% 100%, 0 100%; }

/* ---- --et-corner: the corner form of buttons, cards, fields, badges and blocks (round by default). A preset sets bevel with
   asymmetric radii (e.g. --et-btn-radius: 10px 0) for cut corners; browsers without corner-shape keep rounded corners. ---- */
:is(.et-btn, .et-card, .et-tile, .et-card__badge, .et-card__image, .et-buybox, .et-product-block, .et-gallery__main, .form-control, .et-search__input, .et-categories__item, .et-advantage, .et-testimonial, .et-blog-card) {
  corner-shape: var(--et-corner, round);
}

/* ===== Simple view of a visitor: html[data-ease="on"] (header button #easeToggle, localStorage et-ease) =====
   Larger text and leading, 48px controls, stronger secondary text, underlined text links, no motion. Motion, hover and decor
   axes are switched to none by the scripts (common/header.twig, js/theme-customizer.js), so their own rules apply.
   The owner hides the button with style.ease_toggle = hide. Any preset: tokens only. */
.et-header__ease-icon { font-family: var(--et-font); font-size: 0.8em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.et-header__ease-toggle[aria-pressed="true"] { color: var(--et-header-accent, var(--et-accent)); background: color-mix(in srgb, var(--et-header-text) 10%, transparent); }
html[data-ease-toggle="hide"] .et-header__ease-toggle { display: none; }
:root[data-ease="on"] {
  font-size: calc(var(--et-font-size-root, 18px) * 1.2);
  --et-body-leading: 1.7;
  --et-heading-leading: 1.25;
}
:root[data-ease="on"],
:root[data-ease="on"] :is(.et-scheme-main, .et-scheme-inverse, .et-scheme-accent, .et-scheme-soft) {
  --et-text-secondary: color-mix(in srgb, var(--et-text) 88%, var(--et-bg));
  --et-text-muted: color-mix(in srgb, var(--et-text) 76%, var(--et-bg));
}
:root[data-ease="on"] body { line-height: var(--et-body-leading); }
/* the tools button sits fully on screen, not half behind the edge until hover (390 px: the icon went off screen, #195) */
:root[data-ease="on"] .et-tools-trigger { transform: translateY(-50%); border-radius: var(--et-radius-sm) 0 0 var(--et-radius-sm); opacity: 1; }
:root[data-ease="on"] :is(.et-btn, .btn, button:not(:empty, .et-header__action-item), select, textarea, .form-control,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"])) { min-height: 48px; }
/* larger text widens a field's own size: fields and forms may shrink inside flex and grid rows */
:root[data-ease="on"] :is(form, input, select, textarea) { min-width: 0; }
:root[data-ease="on"] :is(p, li, dd, td, blockquote) a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; }
/* No motion at all, as with prefers-reduced-motion; marquees stand still as one static row */
:root[data-ease="on"] *, :root[data-ease="on"] *::before, :root[data-ease="on"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
:root[data-ease="on"] :is(.et-marquee__track, .et-announcement__track, .et-tmarquee__track) { animation: none !important; transform: none; }
:root[data-ease="on"] .et-marquee { white-space: normal; }
:root[data-ease="on"] .et-marquee__track { flex-wrap: wrap; justify-content: center; }

:root[data-ease="on"] .et-announcement--marquee .et-announcement__item[aria-hidden="true"],
:root[data-ease="on"] [data-section="testimonials"][data-variant="marquee"] .et-tmarquee__list[aria-hidden="true"] { display: none; }
:root[data-ease="on"] .et-announcement--marquee .et-announcement__track { flex-wrap: wrap; justify-content: center; width: auto; column-gap: var(--space-md); }
:root[data-ease="on"] .et-announcement--marquee .et-announcement__item { white-space: normal; padding-inline-end: 0; }
:root[data-ease="on"] [data-section="testimonials"][data-variant="marquee"] .et-tmarquee__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }