/* ==========================================================================
   energy-things.com — Direction C "Мистична наука"
   Design tokens + components (from handoff tokens.css) + theme layout.
   Loaded after parent + child style.css. Fonts: Archivo + Inter + SF Mono.
   ========================================================================== */

:root {
  /* ==== BRAND PALETTE — blue-forward (Brand Guide 2026, 60 / 30 / 10) ====
     Surfaces 60% · Blue 30% (Yale + Ocean) · accents 10%.
     Four laws: (1) Saffron #F4C21A is LIGHT ONLY — never a fill/CTA/section bg;
     (2) red/green/saffron sparingly, for states/pictograms; (3) light = space,
     dark = structure; (4) colour comes from product imagery → UI stays calm.
     Legacy token names (--et-cream / --et-gold*) are kept as aliases and
     REPOINTED so the whole theme inherits the new palette; see notes inline. */

  /* ---- Surfaces (60%) ---- */
  --et-snow:         #FAFAF8;   /* Bright Snow — primary page background */
  --et-cream:        #FAFAF8;   /* legacy alias → Snow (used site-wide) */
  --et-white:        #FFFFFF;   /* cards / panels */
  --et-linen:        #F3EFE6;   /* Soft Linen — warm sections (Нови неща / Аукцион) */
  --et-platinum:     #EEF2F5;   /* Platinum — categories / products / secondary */
  --et-sky:          #CDEEFF;   /* Pale Sky — home bands + hero преливки + FX */
  --et-olive:        #8C8378;   /* Grey Olive — limited (trust / team / mission) */
  --et-sand:         #EEF2F5;   /* media placeholder / divider → Platinum */

  /* ---- Text ---- */
  --et-graphite:     #2B313C;   /* Jet Black — primary text / body */
  --et-ink-2:        #0E4F74;   /* Yale Blue — navigation + strong links */
  --et-brown:        #6C7682;   /* State Grey — secondary text / meta */
  --et-brown-soft:   #454B54;   /* long-form body copy (readable slate) */
  --et-muted:        #7C8794;   /* muted meta / captions */
  --et-head:         #0E4F74;   /* Yale Blue — headings on light surfaces */

  /* ---- Dark sections (hero fallback / cause / footer) = Graphite ---- */
  --et-dark:         #2B313C;
  --et-dark-2:       #363D4A;
  --et-footer:       #2B313C;
  --et-on-dark:      #FAFAF8;   /* Snow text on dark */
  --et-on-dark-2:    #C6D3DE;   /* secondary text on dark (cool) */
  --et-on-dark-3:    #A7B4C0;   /* footer link text */

  /* ---- Accent tokens (10%) — legacy "gold" names kept but REPOINTED:
     the interactive accent is now BLUE (Ocean/sky); saffron/red/green are the
     true 10% accents used only where a warm/state colour is intended. ---- */
  --et-gold:         #088AC7;   /* → Ocean Blue: hover / active / accent on light */
  --et-gold-2:       #84D8FF;   /* → light sky: accent on dark surfaces */
  --et-gold-grad:    #F4C21A;   /* → Saffron (thin light rules only) */
  --et-on-gold:      #FAFAF8;   /* Snow text on a filled accent */
  --et-saffron:      #F4C21A;   /* Saffron — LIGHT ONLY (stars / rules / bullets) */
  --et-red:          #CF1827;   /* Flag Red — promo / ново / favourite / warning */
  --et-shamrock:     #2E9E5A;   /* success / in-stock / bullets */

  /* ---- Buttons: primary = solid Yale, secondary = ghost ---- */
  --et-btn-line:            rgba(14,79,116,.35);  /* ghost outline (secondary) */
  --et-btn-line-strong:     #0E4F74;              /* Yale outline */
  --et-btn-fill:            #0E4F74;              /* PRIMARY fill / active state */
  --et-btn-on-fill:         #FAFAF8;              /* Snow text on fill */
  --et-btn-line-ondark:     rgba(255,255,255,.55); /* ghost outline on dark */
  --et-btn-fill-ondark:     #FAFAF8;              /* light fill on dark */
  --et-btn-on-fill-ondark:  #0E4F74;              /* Yale text on light fill */

  /* ---- Blue system (30% — the leading accent) ---- */
  --et-blue:         #088AC7;   /* Ocean — links / hover / active / focus (light) */
  --et-blue-deep:    #0E4F74;   /* Yale — headings / nav / link-hover on light */
  --et-blue-2:       #84D8FF;   /* light sky — eyebrows / labels / accent on DARK */
  --et-blue-3:       #A9E3FF;   /* pale sky — hero accent word / particle core */
  --et-blue-soft:    #CDEEFF;   /* Pale Sky — faint twinkle */
  --et-glow-strong:  rgba(8,138,199,.55);    /* Ocean glow (hero) */
  --et-glow-soft:    rgba(132,216,255,.40);  /* sky glow */
  --et-line:         rgba(132,216,255,.20);  /* sky grid lines */
  --et-glow-warm:    rgba(244,194,26,.26);   /* Saffron — the single warm light */

  /* ---- Typography ---- */
  --et-font-head:    'Archivo', system-ui, -apple-system, sans-serif;
  --et-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --et-font-mono:    'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --et-fs-hero:      62px;
  --et-fs-h1:        46px;
  --et-fs-h2:        34px;
  --et-fs-title-it:  30px;
  --et-fs-pdp-name:  42px;
  --et-fs-price-lg:  38px;
  --et-fs-body:      15px;
  --et-fs-body-sm:   14px;
  --et-fs-meta:      12.5px;
  --et-fs-eyebrow:   11px;
  --et-eyebrow-tracking: .22em;

  /* ---- Spacing ---- */
  --et-sp-1: 6px;  --et-sp-2: 10px; --et-sp-3: 14px; --et-sp-4: 18px;
  --et-sp-5: 24px; --et-sp-6: 30px; --et-sp-7: 40px; --et-sp-8: 54px; --et-sp-9: 64px;
  --et-section-x: 40px;
  --et-content-max: 1280px;
  --et-product-max: 1560px;   /* PDP runs wider so gallery + summary breathe */

  /* ---- Radius ---- */
  --et-r-sm: 10px; --et-r-md: 14px; --et-r-lg: 16px; --et-r-pill: 30px;

  /* ---- Borders ---- */
  --et-hairline:      1px solid rgba(43,49,60,.08);
  --et-hairline-2:    1px solid rgba(43,49,60,.12);
  --et-border-blue:   1px solid rgba(8,138,199,.28);

  /* ---- Shadow ---- */
  --et-shadow-card:  0 26px 56px -36px rgba(43,49,60,.30);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  font-family: var(--et-font-body);
  color: var(--et-graphite);
  background: var(--et-cream);
  font-size: var(--et-fs-body);
  line-height: 1.65;
}
h1, h2, h3, .et-head { font-family: var(--et-font-head); font-weight: 500; line-height: 1.06; }

/* --------------------------------------------------------------------------
   FULL-BLEED LAYOUT
   Header, hero, section backgrounds and footer must run edge-to-edge on wide
   screens (>~1280px, e.g. iMac/4K). GeneratePress caps its content wrappers
   (#page / .site / .site-content / .grid-container) at the Customizer
   "Container width" (~1200–1280px) and centres them, which left a cream
   gutter on the right above that width. Neutralise those caps on the
   STRUCTURAL wrappers only — the actual content stays centred with a sane
   max-width via .et-container / *__inner (their max-width is unchanged below).
   -------------------------------------------------------------------------- */
#page,
.site,
.site-content,
#content,
.et-main {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Cancel GeneratePress's flex on the content wrapper so a single full-width
   child (<main>) stretches edge-to-edge instead of shrinking to fit. */
.site-content,
#content {
  display: block;
}
/* Belt-and-braces: never let a stray cap reintroduce a horizontal gutter.
   Use `clip` (not `hidden`) where supported: `overflow-x: hidden` turns the
   element into a scroll container, which BREAKS `position: sticky` on the
   header for every inner page. `clip` clips the same overflow WITHOUT
   establishing a scrollport, so the sticky header works site-wide. */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}
/* Native GeneratePress content column (blog index, single posts, pages,
   search, 404, and native WooCommerce cart / checkout / my-account). Our
   custom templates never output .content-area, so this only touches GP's
   default pages — keep their content in a readable centred column now that
   the structural wrappers above run full-bleed. */
.site-content > .content-area,
#content > .content-area {
  max-width: var(--et-content-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--et-section-x);
  padding-right: var(--et-section-x);
  box-sizing: border-box;
}

.et-container { max-width: var(--et-content-max); margin: 0 auto; padding-left: var(--et-section-x); padding-right: var(--et-section-x); }
.et-section { padding-top: var(--et-sp-8); padding-bottom: var(--et-sp-7); }

.et-eyebrow {
  font-family: var(--et-font-mono); font-size: var(--et-fs-eyebrow);
  letter-spacing: var(--et-eyebrow-tracking); text-transform: uppercase; color: var(--et-muted);
}
.et-eyebrow--blue { color: var(--et-blue-2); }
.et-title-italic { font-family: var(--et-font-head); font-style: normal; font-size: var(--et-fs-title-it); color: var(--et-head); }
.et-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--et-sp-5); }
.et-section-head--center { display: block; text-align: center; }
.et-link-more { font-size: var(--et-fs-meta); color: var(--et-blue-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.et-link-more:hover { color: var(--et-blue); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* Button hierarchy (Brand Guide — "не крещи КУПИ"):
   - primary ("Научи повече" / "Разгледай" / "Подкрепи"): SOLID Yale, Ocean hover.
   - secondary ("Купи" / "Добави"): airy ghost outline (invites, doesn't shout). */
.et-btn {
  font-family: var(--et-font-body); font-weight: 600; font-size: var(--et-fs-body-sm);
  border-radius: var(--et-r-pill); padding: 14px 30px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; background: transparent; color: var(--et-blue-deep);
  border: 1px solid var(--et-btn-line);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.et-btn:hover { background: rgba(8,138,199,.08); }
/* Primary = leading action: solid Yale fill, Ocean-blue on hover. */
.et-btn--primary { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border: 1.5px solid var(--et-btn-fill); }
.et-btn--primary:hover { background: var(--et-blue); border-color: var(--et-blue); color: #FAFAF8; }
/* Secondary = airy ghost (the "Купи" tier — learn first, buy if it resonates). */
.et-btn--ghost   { background: transparent; color: var(--et-blue-deep); border: 1.5px solid var(--et-btn-line-strong); }
.et-btn--ghost:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: var(--et-btn-fill); }
/* Ghost on dark surfaces (hero / cause): white outline, light fill on hover. */
.et-btn--ghost-light {
  background: transparent; color: var(--et-on-dark);
  border: 1px solid var(--et-btn-line-ondark);
}
.et-btn--ghost-light:hover { background: var(--et-btn-fill-ondark); color: var(--et-btn-on-fill-ondark); border-color: var(--et-btn-fill-ondark); }

/* Primary stays SOLID Yale on dark surfaces too (Yale + Snow text reads well on
   the hero image / cause band); hover lightens to Ocean. */
.et-hero .et-btn--primary,
.et-cause .et-btn--primary,
.et-about-hero .et-btn--primary { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: var(--et-btn-fill); }
.et-hero .et-btn--primary:hover,
.et-cause .et-btn--primary:hover,
.et-about-hero .et-btn--primary:hover { background: var(--et-blue); color: #FAFAF8; border-color: var(--et-blue); }

/* ==========================================================================
   HERO ENERGY EFFECTS  (science-meets-magic)
   ========================================================================== */
.et-hero { position: relative; background: var(--et-dark); color: var(--et-on-dark); overflow: hidden; min-height: 580px; }
.et-hero > img, .et-fx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; }
/* Light hero: image stays bright. Only a soft, localized scrim on the lower-left
   sits behind the text for readability — the rest of the image is untouched. */
.et-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,17,13,.42) 0%, rgba(18,17,13,.18) 30%,
              transparent 52%, transparent 100%);
}
.et-hero__scrim--v {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18,17,13,.30) 100%);
}

.et-fx-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--et-line) 1px, transparent 1px);
  background-size: 64px 100%; animation: etLine 7s ease-in-out infinite;
}
.et-fx-glow {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(44px);
  background: radial-gradient(circle, var(--et-glow-strong), rgba(8,138,199,0) 66%);
  animation: etGlow 6s ease-in-out infinite;
}
.et-fx-glow--hero  { top: -40px; left: 30%; transform: translateX(-50%); width: 520px; height: 340px; }
.et-fx-glow--cause { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 480px; height: 260px; }

.et-fx-dot {
  position: absolute; border-radius: 50%; background: var(--et-blue-3);
  box-shadow: 0 0 10px 2px rgba(132,216,255,.9); pointer-events: none;
}
.et-fx-dot--drift   { animation: etDrift 6s ease-in-out infinite; }
.et-fx-dot--twinkle { background: var(--et-blue-soft); box-shadow: 0 0 8px 2px rgba(132,216,255,.8); animation: etTwinkle 3.4s ease-in-out infinite; }

/* Animated particle field (injected by hero-fx.js). Additive-blended canvas
   of blue-white drifting sparks + faint network lines. Sits above the scrims
   but below the hero content (z-index:3 on the *__inner wrappers). */
.et-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Energy fog — two slow blurred clouds: blue-white core + warm gold accent.
   mix-blend:screen keeps it LIGHT (adds glow) rather than darkening. */
.et-fx-fog { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.et-fx-fog::before, .et-fx-fog::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(64px);
  mix-blend-mode: screen; will-change: transform, opacity;
}
.et-fx-fog::before { width: 62%; height: 78%; left: 6%;  top: -14%;
  background: radial-gradient(circle, var(--et-glow-strong), rgba(132,216,255,0) 68%);
  animation: etFog1 24s ease-in-out infinite; }
/* The single warm "light sphere" — Saffron, kept faint (law: yellow = light). */
.et-fx-fog::after  { width: 46%; height: 60%; right: 4%; bottom: -16%;
  background: radial-gradient(circle, var(--et-glow-warm), rgba(244,194,26,0) 70%);
  animation: etFog2 30s ease-in-out infinite; }

/* Light beams — fine diagonal shafts of blue-white light + a softer gold one. */
.et-fx-beams {
  position: absolute; inset: -18% -12%; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: .5;
  background:
    linear-gradient(100deg, transparent 36%, rgba(169,227,255,.12) 41%, transparent 45%),
    linear-gradient(78deg,  transparent 58%, rgba(244,194,26,.07) 63%, transparent 67%),
    linear-gradient(118deg, transparent 14%, rgba(8,138,199,.10) 19%, transparent 24%);
  animation: etBeam 16s ease-in-out infinite;
}

@keyframes etGlow    { 0%,100%{opacity:.7;transform:scale(1);}    50%{opacity:1;transform:scale(1.06);} }
@keyframes etDrift   { 0%{transform:translate(0,0);opacity:.5;}    50%{opacity:1;} 100%{transform:translate(6px,-18px);opacity:.3;} }
@keyframes etLine    { 0%{opacity:.16;} 50%{opacity:.46;} 100%{opacity:.16;} }
@keyframes etTwinkle { 0%,100%{opacity:.25;transform:scale(.8);}  50%{opacity:1;transform:scale(1.25);} }
@keyframes etFog1    { 0%,100%{transform:translate(0,0) scale(1);opacity:.7;}  50%{transform:translate(6%,5%) scale(1.12);opacity:1;} }
@keyframes etFog2    { 0%,100%{transform:translate(0,0) scale(1);opacity:.5;}  50%{transform:translate(-5%,-4%) scale(1.1);opacity:.85;} }
@keyframes etBeam    { 0%,100%{opacity:.3;transform:translateX(-2%) skewX(-2deg);} 50%{opacity:.58;transform:translateX(2%) skewX(-2deg);} }

@media (prefers-reduced-motion: reduce) {
  .et-fx-lines, .et-fx-glow, .et-fx-dot,
  .et-fx-fog::before, .et-fx-fog::after, .et-fx-beams { animation: none !important; }
}

/* Hero effect type (Customizer → Hero ефекти). body.et-fx-<mode> toggles the
   CSS-driven layers with no first-paint flash; hero-fx.js handles the canvas /
   fog / beams. Default (full) shows everything. */
body.et-fx-stars .et-fx-lines,
body.et-fx-minimal .et-fx-lines,
body.et-fx-golden_sparks .et-fx-lines,
body.et-fx-golden_threads .et-fx-lines,
body.et-fx-mystic_combo .et-fx-lines,
body.et-fx-off .et-fx-lines { display: none; }
/* The golden modes hide the blue glow so the warm gold field reads clean. */
body.et-fx-golden_sparks .et-fx-glow,
body.et-fx-golden_threads .et-fx-glow,
body.et-fx-off .et-fx-glow { display: none; }

/* ---- Hero content ---- */
/* Horizontal padding + centring now come from the wrapping .et-container (the
   same one the sections use), so the hero title starts on exactly the line as
   the logo and the section headings. Keeping --et-section-x here too would
   double it. max-width stays: it is the text measure INSIDE the container, not
   a container of its own. */
.et-hero__inner { position: relative; z-index: 3; max-width: 620px; padding: 78px 0 96px; }
.et-hero__eyebrow { font-family: var(--et-font-mono); font-size: var(--et-fs-eyebrow); letter-spacing: .26em; text-transform: uppercase; color: var(--et-blue-2); margin-bottom: 22px; text-shadow: 0 1px 10px rgba(12,11,8,.55); }
.et-hero__title { font-family: var(--et-font-head); font-weight: 500; font-size: var(--et-fs-hero); line-height: 1.03; margin: 0 0 22px; text-shadow: 0 2px 16px rgba(12,11,8,.55), 0 1px 3px rgba(12,11,8,.45); }
.et-hero__title em { font-style: normal; color: var(--et-blue-3); }
.et-hero__lead { margin: 0 0 32px; max-width: 430px; font-size: 15.5px; line-height: 1.72; color: var(--et-on-dark-2); text-shadow: 0 1px 10px rgba(12,11,8,.55); }
.et-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Hero slider (Customizer-managed) ---- */
.et-hero--slider { position: relative; }
/* All slides stacked in one grid cell → the section sizes to the tallest slide
   and slides crossfade in place (no absolute-collapse). min-height: inherit so
   the slides (and their bg images) always fill the hero's min-height. */
.et-hero__slides { display: grid; min-height: inherit; }
.et-hero__slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.et-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }

/* Arrows + dots */
.et-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--et-on-dark);
  background: rgba(20,20,20,.32); border: 1px solid rgba(255,255,255,.45);
  transition: background .15s ease, border-color .15s ease;
}
.et-hero__arrow:hover { background: rgba(20,20,20,.55); border-color: #fff; }
.et-hero__arrow--prev { left: 18px; }
.et-hero__arrow--next { right: 18px; }
.et-hero__dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; gap: 9px; justify-content: center; }
.et-hero__dot { width: 9px; height: 9px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(255,255,255,.6); background: transparent; transition: background .15s ease, transform .15s ease; }
.et-hero__dot:hover { background: rgba(255,255,255,.5); }
.et-hero__dot.is-active { background: #fff; border-color: #fff; transform: scale(1.15); }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.et-card { background: var(--et-white); border-radius: var(--et-r-lg); overflow: hidden; border: var(--et-hairline); display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.et-card:hover { transform: translateY(-2px); box-shadow: var(--et-shadow-card); }
.et-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--et-sand); }
/* height !important: WooCommerce loads its own loop CSS AFTER energy.css, and
   `.woocommerce ul.products li.product img { height: auto }` (0,3,3) outranks
   this rule (0,1,1). Out-specifying it cleanly would need a 4-class chain; the
   file already settled this exact collision with !important on layout-critical
   props (see the hardened grid below), so this follows that precedent.
   Without it the photo renders shorter than the 4/5 slot and the slot's own
   background shows as a strip underneath. object-fit stays `cover`, so the
   photo is scaled, never distorted. */
.et-card__media img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.et-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--et-platinum), #D9E7EF); }
.et-card__body { padding: 15px 15px 17px; }
.et-card__eyebrow { font-family: var(--et-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--et-muted); margin-bottom: 6px; }
.et-card__name { font-size: var(--et-fs-body-sm); font-weight: 600; line-height: 1.3; }
.et-card__price { font-size: 13.5px; color: var(--et-brown); margin-top: 6px; }
.et-card__price .woocommerce-Price-amount { font-weight: 600; }
.et-card__price del { opacity: .55; font-weight: 400; margin-right: 6px; }

/* ==========================================================================
   CATEGORY TILE (Полета на енергията)
   ========================================================================== */
.et-tile { border: var(--et-hairline-2); border-radius: var(--et-r-md); padding: 20px 12px; text-align: center; background: var(--et-white); display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.et-tile:hover { transform: translateY(-2px); border-color: rgba(8,138,199,.4); }
.et-tile:first-child, .et-tile--accent { border: var(--et-border-blue); }
.et-tile__icon { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: var(--et-blue-deep); background: radial-gradient(circle at 35% 30%, rgba(132,216,255,.30), rgba(244,194,26,.14)); }
.et-tile__icon svg { width: 24px; height: 24px; }
.et-tile__label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }

/* ==========================================================================
   GRIDS
   ========================================================================== */
.et-grid { display: grid; gap: 18px; }
.et-grid--6 { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.et-grid--4 { grid-template-columns: repeat(4, 1fr); }
.et-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   SECTION BACKGROUNDS
   ========================================================================== */
.et-sec--cream { background: var(--et-cream); }
.et-sec--white { background: var(--et-white); border-top: 1px solid rgba(43,49,60,.06); }
/* Brand section backgrounds (Phase 1 skeleton) */
.et-sec--snow     { background: var(--et-snow); }
.et-sec--linen    { background: var(--et-linen); }
.et-sec--platinum { background: var(--et-platinum); }
.et-sec--sky      { background: var(--et-sky); }
.et-sec--olive    { background: var(--et-olive); color: var(--et-on-dark); }
.et-sec--olive .et-eyebrow,
.et-sec--olive .et-title-italic { color: var(--et-on-dark); }

/* ---- Подаръци с кауза ---- */
.et-cause { position: relative; padding: 64px 44px; background: linear-gradient(180deg, var(--et-dark-2), var(--et-dark)); color: var(--et-on-dark); text-align: center; overflow: hidden; }
.et-cause__scrim { position: absolute; inset: 0; background: radial-gradient(120% 130% at 50% 50%, rgba(21,20,15,.4), rgba(21,20,15,.8)); }
.et-cause__inner { position: relative; z-index: 2; }
.et-cause__title { font-family: var(--et-font-head); font-size: 42px; line-height: 1.08; margin: 0 auto 16px; max-width: 560px; }
.et-cause__lead { margin: 0 auto 26px; font-size: 14.5px; line-height: 1.7; color: var(--et-on-dark-2); max-width: 480px; }
.et-cause .et-eyebrow { color: var(--et-blue-2); margin-bottom: 16px; }

/* ---- Cause — sticky media variant (Aecop-style): the image pins while the
   text floats over it on scroll. Falls back to a normal band on mobile. ---- */
.et-cause--sticky { overflow: visible; padding: 0; min-height: 170vh; background: var(--et-dark); }
.et-cause--sticky .et-cause__media { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.et-cause--sticky .et-cause__media .et-fx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.et-cause--sticky .et-cause__scrim { position: absolute; inset: 0; }
.et-cause--sticky .et-cause__inner { position: relative; z-index: 3; margin-top: -100vh; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px var(--et-section-x); }
@media (max-width: 768px) {
  /* Mobile: no sticky scroll — classic centred band over the image. */
  .et-cause--sticky { min-height: 0; padding: 56px 22px; }
  .et-cause--sticky .et-cause__media { position: absolute; inset: 0; height: 100%; }
  .et-cause--sticky .et-cause__inner { margin-top: 0; min-height: 0; }
}

/* ---- Front-page skeleton pieces (Phase 1) ---- */
/* Badge stack — "Нов" on top, "-N%" under it, never overlapping. One column so
   a product that is both keeps them tidy inside the card corner; the wrapper is
   absolute, so on the PDP (where div.product is a grid) it is taken out of flow
   and never claims a grid cell. pointer-events:none keeps the image link
   clickable straight through the badges. */
.et-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.et-badge { font-family: var(--et-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--et-r-pill); color: var(--et-on-dark); white-space: nowrap; }
/* "Нов" keeps Flag Red (unchanged). The discount takes Yale — Flag Red is
   already spoken for, Saffron is light-only per brand law #1, and Shamrock
   means in-stock. Yale is the leading brand blue: distinct, calm, not shouting. */
.et-badge--new { background: var(--et-red); }
.et-badge--sale { background: var(--et-blue-deep); }

/* Размер badge — bottom-left. The three corners are divided on purpose:
   .et-badges top-left, wishlist heart top-right, this one bottom-left, so they
   can never collide however many are on at once. */
.et-size-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: var(--et-white); color: var(--et-graphite);
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 6px 11px; border-radius: var(--et-r-pill);
  box-shadow: var(--et-shadow-card); pointer-events: none; white-space: nowrap;
}
.et-card__media { position: relative; }
.et-empty-note { grid-column: 1 / -1; font-size: 14px; color: var(--et-brown); text-align: center; padding: 24px 0; margin: 0; }
.et-season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.et-season-tile { border-radius: var(--et-r-lg); overflow: hidden; border: var(--et-hairline); aspect-ratio: 21 / 9; }
.et-season-tile .et-card__placeholder { height: 100%; }
.et-quote { margin: 0; background: rgba(250,250,248,.10); border: 1px solid rgba(250,250,248,.18); border-radius: var(--et-r-lg); padding: 26px 24px; }
.et-quote__text { margin: 0 0 14px; font-family: var(--et-font-head); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--et-on-dark); }
.et-quote__by { font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-on-dark-2); }
@media (max-width: 768px) {
  .et-season-grid { grid-template-columns: 1fr; }
}

/* ---- Blog billboard ---- */
.et-blog__cat { font-family: var(--et-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--et-gold); margin-bottom: 7px; }
.et-blog__media { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--et-r-md); overflow: hidden; margin-bottom: 14px; background: var(--et-sand); }
.et-blog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-blog__title { font-family: var(--et-font-head); font-size: 21px; line-height: 1.2; color: var(--et-head); }
.et-blog__item { text-decoration: none; color: inherit; display: block; }

/* ==========================================================================
   SITE HEADER  (transparent over hero on home, solid cream elsewhere)
   ========================================================================== */
.et-site-header {
  position: sticky; top: 0; z-index: 30; background: var(--et-cream);
  border-bottom: var(--et-hairline);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.et-site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--et-section-x); max-width: var(--et-content-max); margin: 0 auto; transition: padding .25s ease; }

/* Scrolled state (>80px, toggled by sticky-header.js): solid + shadow + tighter. */
.et-site-header.et-scrolled { box-shadow: 0 6px 24px -16px rgba(31,29,27,.5); }
.et-site-header.et-scrolled .et-site-header__inner { padding-top: 8px; padding-bottom: 8px; }

/* Anchor offset: the header is sticky, so #anchor jumps must clear its height —
   otherwise the section title hides behind the bar. Applies to every id'd
   front-page section (novo / na-fokus / zapiski / avtori / kauza / ideata). */
#novo, #na-fokus, #zapiski, #avtori, #kauza, #ideata { scroll-margin-top: 96px; }
@media (max-width: 768px) {
  #novo, #na-fokus, #zapiski, #avtori, #kauza, #ideata { scroll-margin-top: 76px; }
}
.et-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.et-brand__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--et-blue-2); box-shadow: 0 0 10px 2px rgba(132,216,255,.9); }
.et-brand__name { font-family: var(--et-font-head); font-weight: 600; font-size: 23px; color: var(--et-graphite); }

/* ── Energy Things — header logo (responsive + gentle twinkle) ───────────────
   Designer handoff. Desktop/tablet = full lockup, phone (<=480px) = fairy+star
   icon. Image + CSS/SVG only (no web font). Do not retune the star/glow offsets. */
.et-logo{ display:inline-flex; align-items:center; line-height:0; text-decoration:none; }

/* the two size-variants share a relative box for the star/glow overlay */
.et-logo__full,
.et-logo__icon{ position:relative; display:block; height:54px; }
.et-logo__full{ aspect-ratio:640 / 241; }             /* full lockup (2026 fairy wordmark) */
.et-logo__icon{ aspect-ratio:178 / 200; display:none; } /* mobile icon (fairy + orb)         */

.et-logo__img{
  display:block; height:100%; width:100%;
  /* very subtle blue glow keeps royal-blue readable on dark headers */
  filter: drop-shadow(0 0 5px rgba(70,120,230,.40));
}

/* soft, static gold halo behind the wand-tip star (kept small) */
.et-logo__glow{
  position:absolute; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(250,205,90,.40) 0%, rgba(250,205,90,0) 62%);
}

/* the animated sparkle/star */
.et-logo__star{ position:absolute; transform:translate(-50%,-50%); overflow:visible; pointer-events:none; }
.et-logo__spark{
  animation: et-twinkle 3.2s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes et-twinkle{
  0%,100%{ opacity:.55; transform:scale(.90); }
  50%    { opacity:1;   transform:scale(1.07); }
}

/* star/glow sit on the fairy's glowing orb (a small round light; kept subtle so
   it enhances the baked-in glow rather than doubling it). Recalibrated for the
   2026 lockup — orb centroid measured at 65.2%/20.5% (full), 89.7%/21.8% (icon). */
.et-logo__full .et-logo__star{ left:65.2%; top:20.5%; width:8%; }
.et-logo__full .et-logo__glow{ left:65.2%; top:20.5%; width:12%; }
.et-logo__icon .et-logo__star{ left:89.7%; top:21.8%; width:18%; }
.et-logo__icon .et-logo__glow{ left:89.7%; top:21.8%; width:30%; }

/* ── responsive switch (header only) ─────────────────────────────────
   Client wants the FULL lockup on mobile too, just smaller. Only on very
   narrow phones (<=360px), where the lockup would collide with the burger,
   fall back to the compact fairy+star icon. */
@media (max-width:768px){
  .et-logo__full, .et-logo__icon{ height:46px; }          /* tablet: shrink        */
}
@media (max-width:480px){
  .et-site-header__brand .et-logo__full{ height:38px; }   /* phone: smaller lockup */
}
@media (max-width:360px){
  .et-site-header__brand .et-logo__full{ display:none; }  /* very narrow: avoid burger */
  .et-site-header__brand .et-logo__icon{ display:block; height:36px; } /* fairy+star icon */
}
@media (prefers-reduced-motion: reduce){
  .et-logo__spark{ animation:none; }
}

/* Footer / drawer reuse: single full lockup, more restrained (no twinkle),
   always shown (these contexts never collide with the burger). */
.et-logo--compact .et-logo__full{ height:44px; display:block; }
.et-logo--compact .et-logo__spark{ animation:none; }

/* ── Dark-state logo swap ────────────────────────────────────────────────
   Blue lockup (the <img>) is the default: light cream bar, snow scroll bar and
   the cream drawer all keep it. The white+gold lockup (.et-logo__alt, a CSS
   background) takes over ONLY over the hero (transparent header) and on the dark
   graphite scroll bar. Because the white webp is referenced solely inside these
   dark-state selectors, light-only pages never request it — no JS, no extra fetch.
   Same lockup / orb position as blue, so the star + glow overlays need no change. */
.et-logo__img{ transition: opacity .25s ease; }
.et-logo__alt{ position:absolute; inset:0; background:center/contain no-repeat; opacity:0; pointer-events:none; transition: opacity .25s ease; }

.home .et-site-header:not(.et-scrolled) .et-logo__img,
.et-header--transparent:not(.et-scrolled) .et-logo__img,
.et-header--scroll-dark.et-scrolled .et-logo__img{ opacity:0; }

.home .et-site-header:not(.et-scrolled) .et-logo__alt,
.et-header--transparent:not(.et-scrolled) .et-logo__alt,
.et-header--scroll-dark.et-scrolled .et-logo__alt{ opacity:1; }

.home .et-site-header:not(.et-scrolled) .et-logo__full .et-logo__alt,
.et-header--transparent:not(.et-scrolled) .et-logo__full .et-logo__alt,
.et-header--scroll-dark.et-scrolled .et-logo__full .et-logo__alt{ background-image:url(../images/logo-clean-white.webp); }

.home .et-site-header:not(.et-scrolled) .et-logo__icon .et-logo__alt,
.et-header--transparent:not(.et-scrolled) .et-logo__icon .et-logo__alt,
.et-header--scroll-dark.et-scrolled .et-logo__icon .et-logo__alt{ background-image:url(../images/logo-icon-white.webp); }

.et-nav { display: flex; gap: 26px; font-size: 13.5px; font-weight: 500; list-style: none; margin: 0; padding: 0; }
/* Defensive: a real WP menu can emit nested <ul>/<li> with default list markers.
   Never show raw bullets in the primary nav (mega is the intended dropdown). */
.et-nav li { list-style: none; }
.et-nav ul, .et-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
/* Undecorate every link in the nav (panel included) — but COLOUR only the
   top-level links: `.et-nav a` (0,1,1) would otherwise out-specify the panel's
   own `.et-mega__*` colours (0,1,0), e.g. painting the dark promo card's title
   Yale-on-graphite. The panel colours itself; see the note below. */
.et-nav a { text-decoration: none; }
.et-nav > li > a { color: var(--et-ink-2); }
.et-nav > li > a:hover, .et-nav > li.current-menu-item > a { color: var(--et-gold); }
.et-utils { display: flex; gap: 18px; font-size: 13px; align-items: center; }
.et-utils a { color: var(--et-brown); text-decoration: none; }
.et-utils a:hover { color: var(--et-gold); }

/* Home: header floats transparently over the hero. */
.home .et-site-header,
.et-header--transparent {
  position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none;
}
/* Home scrolled: detach from the hero and pin a solid bar to the top. The bar's
   colour (dark graphite / light snow) is driven by the Customizer scroll-style
   variant rules (.et-header--scroll-dark / --light) in the Phase-2 block, so it
   applies on home AND inner pages. Reveal on scroll-up is a transform transition
   (see .et-hidden), not a keyframe, so it composes with the hide/reveal. */
.home .et-site-header.et-scrolled,
.et-header--transparent.et-scrolled {
  position: fixed;
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.7);
}
.home .et-brand__name, .et-header--transparent .et-brand__name { color: var(--et-on-dark); }
.home .et-nav > li > a, .et-header--transparent .et-nav > li > a { color: var(--et-on-dark); }
.home .et-nav > li > a:hover, .home .et-nav > li.current-menu-item > a,
.et-header--transparent .et-nav > li > a:hover { color: var(--et-gold-2); }
.home .et-utils a, .et-header--transparent .et-utils a { color: var(--et-on-dark-2); }

/* ── Why `> li > a` and not a bare `.et-nav a` ────────────────────────────
   The mega panel is rendered INSIDE the "Продукти" <li>, i.e. inside .et-nav.
   A descendant `.et-nav a` therefore paints the panel's category links with
   the header-state colour meant for the hero/dark bar — light text on the
   panel's white background, contrast ~1.04:1, effectively invisible (the panel
   then reads as "transparent"/empty). Every header-state colour rule below and
   in the Phase-2 block is scoped to the TOP-LEVEL links with `> li > a`, so the
   panel always keeps its own colours from the .et-mega__* rules — no
   re-assertion guard needed, and a new header state can't re-break it. */

/* ==========================================================================
   FOOTER  (4-col: brand+subscribe, За нас, Информация, Профил)
   ========================================================================== */
.et-footer { background: var(--et-footer); color: var(--et-on-dark); padding: 54px var(--et-section-x) 0; }
.et-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.6fr; gap: 30px; max-width: var(--et-content-max); margin: 0 auto; }

/* Brand lockup — the white+gold logo (replaces the old text wordmark). Height is
   tuned so the wordmark inside the lockup optically carries the same weight as
   the 24px Archivo wordmark it replaced: the letters occupy ~41% of the asset's
   height, so 48px puts them at ~20px — a touch above the old ~17.5px cap height,
   which the mark earns. Colour comes baked into the asset (no filters). */
.et-footer__logo { display: inline-block; line-height: 0; text-decoration: none; }
.et-footer__logo img { display: block; height: 48px; width: auto; }
.et-footer__about { margin: 14px 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--et-on-dark-3); max-width: 240px; }

/* За нас — social row */
.et-footer__social-label { font-family: var(--et-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--et-on-dark-3); margin: 16px 0 8px; }
.et-footer__social { display: flex; gap: 12px; }
.et-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--et-on-dark-2); border: 1px solid rgba(255,255,255,.16); transition: color .18s ease, border-color .18s ease, background .18s ease; }
.et-footer__social a:hover { color: var(--et-graphite); background: var(--et-blue-2); border-color: var(--et-blue-2); }

/* Newsletter (right column) */
.et-footer__news .et-subscribe { margin-top: 4px; }
.et-footer__news-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--et-on-dark-3); max-width: 260px; }
.et-subscribe { display: flex; gap: 8px; max-width: 280px; }
.et-subscribe input { flex: 1; font-family: var(--et-font-body); font-size: 12.5px; padding: 11px 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: var(--et-on-dark); outline: none; }
.et-subscribe input::placeholder { color: rgba(250,250,248,.5); }
.et-subscribe button { font-family: var(--et-font-body); font-weight: 600; font-size: 15px; color: var(--et-on-dark); background: transparent; border: 1px solid var(--et-btn-line-ondark); padding: 11px 17px; border-radius: 24px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.et-subscribe button:hover { background: var(--et-btn-fill-ondark); color: var(--et-btn-on-fill-ondark); border-color: var(--et-btn-fill-ondark); }

.et-footer__col-title { color: var(--et-blue-2); font-weight: 600; margin-bottom: 10px; font-size: 12.5px; }
.et-footer__col ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 2; }
.et-footer__col a { color: var(--et-on-dark-3); text-decoration: none; }
.et-footer__col a:hover { color: var(--et-blue-2); }

/* Direct contact (tel/mail) under the newsletter note. Must come AFTER
   `.et-footer__col a` — equal specificity (0,1,1), so source order decides and
   the muted link colour would otherwise win. Snow on graphite ≈ 12.5:1; the
   labels stay on-dark-3 (~6.2:1, still AA) so the numbers lead.
   overflow-wrap keeps the long address inside a narrow phone column. */
/* label | value grid: the second phone has no label, and a plain inline layout
   would leave its number hanging 4px left of the first. `auto 1fr` pins every
   value to one edge whatever the labels are. */
.et-footer__contact { margin-top: 14px; font-size: 12.5px; line-height: 1.7; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; }
.et-footer__contact-label { color: var(--et-on-dark-3); }
.et-footer__contact a { color: var(--et-on-dark); overflow-wrap: anywhere; }
.et-footer__contact a:hover { color: var(--et-blue-2); }

/* Bottom bar — thin hairline, copyright + sitemap left, credit right. */
.et-footer__bottom { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.10); }
.et-footer__bottom-inner { max-width: var(--et-content-max); margin: 0 auto; padding: 20px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--et-on-dark-3); }
.et-footer__legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.et-footer__sep { opacity: .5; }
.et-footer__bottom a { color: var(--et-on-dark-3); text-decoration: none; }
.et-footer__bottom a:hover { color: var(--et-blue-2); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .et-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .et-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .et-footer__brand, .et-footer__news { grid-column: span 3; }
}
@media (max-width: 768px) {
  :root { --et-section-x: 22px; }
  .et-nav { display: none; }
  .et-hero { min-height: 440px; }
  .et-hero__title { font-size: 34px; }
  .et-hero__inner { padding: 64px 0 72px; }   /* x-padding comes from .et-container */
  .et-hero__arrow { width: 38px; height: 38px; font-size: 18px; }
  .et-hero__arrow--prev { left: 8px; }
  .et-hero__arrow--next { right: 8px; }
  .et-hero__dots { bottom: 16px; }
  .et-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .et-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .et-grid--3 { grid-template-columns: 1fr; }
  .et-cause__title { font-size: 30px; }
  .et-footer__inner { grid-template-columns: 1fr 1fr; gap: 22px; }
  .et-footer__brand, .et-footer__news { grid-column: span 2; }
}
@media (max-width: 480px) {
  .et-footer__inner { grid-template-columns: 1fr; }
  .et-footer__brand, .et-footer__news { grid-column: auto; }
}

/* ==========================================================================
   MEGA-MENU "Продукти"
   ========================================================================== */
.et-has-mega { position: static; }
.et-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--et-white); border-bottom: var(--et-hairline); box-shadow: var(--et-shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 40;
}
.et-has-mega:hover > .et-mega,
.et-has-mega:focus-within > .et-mega,
.et-mega.is-open { opacity: 1; visibility: visible; transform: none; }

/* ---- eMAG/eBag two-section panel: categories (left) → subcats (right) ---- */
.et-mega__inner {
  max-width: var(--et-content-max); margin: 0 auto;
  display: flex; align-items: stretch;
  max-height: min(70vh, 460px);
}

/* LEFT — vertical category list */
.et-mega__nav { flex: 0 0 248px; list-style: none; margin: 0; padding: 14px 12px; overflow-y: auto; border-right: var(--et-hairline); }
.et-mega__nav-item { list-style: none; }
.et-mega__nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--et-r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--et-ink-2); text-decoration: none;
  border-left: 2px solid transparent; transition: background .12s ease, color .12s ease;
}
.et-mega__nav-link:hover { background: rgba(20,20,20,.04); color: var(--et-graphite); }
.et-mega__nav-link.is-active {
  background: rgba(20,20,20,.05); color: var(--et-graphite);
  border-left-color: var(--et-gold);
}
.et-mega__nav-icon { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--et-brown); }
.et-mega__nav-icon svg { width: 19px; height: 19px; }
.et-mega__nav-link.is-active .et-mega__nav-icon { color: var(--et-gold); }
.et-mega__nav-name { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.et-mega__nav-arrow { font-size: 16px; color: var(--et-muted); opacity: 0; transition: opacity .12s ease; }
.et-mega__nav-link:hover .et-mega__nav-arrow,
.et-mega__nav-link.is-active .et-mega__nav-arrow { opacity: 1; color: var(--et-gold); }

/* MIDDLE — the active category's subcategories, grouped and column-flowed.
   ------------------------------------------------------------------------
   eMAG model: a group = a header (subcategory) + the vertical list of its
   leaves. Groups flow DOWN then ACROSS via CSS multi-column, filling the zone
   like newspaper copy; `break-inside: avoid` keeps a header welded to its list.
   Depth decides the shape in PHP (et_mega_group_is_grouped): three levels →
   many groups across columns; two levels → one group, ONE vertical column. */
.et-mega__view { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 22px 26px; }
.et-mega__panel { display: none; }
.et-mega__panel.is-active { display: block; }

.et-mega__groups { columns: 190px 3; column-gap: 30px; }
.et-mega__group { break-inside: avoid; margin: 0 0 18px; }
/* 2-level: ONE vertical column, read top-to-bottom. A flat list of siblings has
   no headers to anchor the eye, so flowing it across columns reads as scattered
   — the grouped case keeps its columns because each group heads its own list. */
.et-mega__groups--flat { columns: auto; }
.et-mega__group--flat { break-inside: auto; margin-bottom: 10px; }

.et-mega__group-title {
  display: block; font-family: var(--et-font-body); font-size: 12.5px; font-weight: 600;
  line-height: 1.3; color: var(--et-ink-2); text-decoration: none; margin: 0 0 7px;
}
.et-mega__group-title:hover { color: var(--et-blue); }
.et-mega__group--flat .et-mega__group-title { margin-bottom: 10px; }

.et-mega__group-list { list-style: none; margin: 0; padding: 0; }
.et-mega__group-list li { list-style: none; break-inside: avoid; }
.et-mega__group-list a { display: block; font-size: 12.5px; line-height: 1.35; color: var(--et-brown-soft); text-decoration: none; padding: 4px 0; }
.et-mega__group-list a:hover { color: var(--et-blue); }
.et-mega__panel-empty { display: inline-block; font-size: 13px; font-weight: 600; color: var(--et-gold); text-decoration: none; }

/* PROMO — bottom-right corner */
.et-mega__promo { flex: 0 0 220px; align-self: stretch; margin: 18px 18px 18px 0; position: relative; border-radius: var(--et-r-md); overflow: hidden; min-height: 196px; display: flex; text-decoration: none; color: var(--et-on-dark); background: var(--et-dark); }
.et-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.et-mega__promo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,15,.2), rgba(21,20,15,.85)); }
.et-mega__promo-glow { position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--et-glow-soft), transparent 68%); filter: blur(30px); }
.et-mega__promo-body { position: relative; z-index: 2; align-self: flex-end; padding: 18px; }
.et-mega__promo-title { display: block; font-family: var(--et-font-head); font-size: 19px; line-height: 1.18; margin: 8px 0 10px; }
.et-mega__promo-cta { font-family: var(--et-font-body); font-weight: 600; font-size: 12.5px; color: var(--et-gold-2); }
.et-mega-caret { font-size: 9px; }
/* page dim while mega open (set by mega-menu.js) */
.et-mega-open .site-content,
.et-mega-open .et-footer { opacity: .72; transition: opacity .2s ease; }

/* ==========================================================================
   ARCHIVE / CATEGORY
   ========================================================================== */
/* Leading banner (category / archive) — Yale Blue base per Brand Guide. */
.et-archive-banner { min-height: 0; background: linear-gradient(160deg, #0E4F74 0%, #0A3A57 100%); }
.et-archive-banner__inner { position: relative; z-index: 3; max-width: var(--et-content-max); margin: 0 auto; padding: 44px var(--et-section-x); }
.et-archive-banner__title { font-size: var(--et-fs-h1); margin: 8px 0 14px; color: var(--et-on-dark); }
/* Category / subcategory description (native woocommerce_archive_description →
   term_description()). Brand serif, capped width, discreet on the dark banner. */
.et-archive-banner__desc { font-family: var(--et-font-head); font-weight: 300; max-width: 560px; color: var(--et-on-dark-2); font-size: 15.5px; line-height: 1.72; }
.et-archive-banner__desc p,
.et-archive-banner__desc .term-description { margin: 0 0 .55em; }
.et-archive-banner__desc p:last-child,
.et-archive-banner__desc .term-description:last-child { margin-bottom: 0; }

.et-breadcrumb { font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--et-on-dark-2); }
.et-breadcrumb a { color: var(--et-on-dark-2); text-decoration: none; }
.et-breadcrumb--light { color: var(--et-muted); margin: 18px 0 24px; }
.et-breadcrumb--light a { color: var(--et-brown); }

/* --- Readability on the dark (Yale-Blue) archive banner ---
   On WooCommerce archives the `woocommerce` body class pulls the banner h1 to
   Yale via `.woocommerce h1` (0,1,1 > 0,1,0), and `.woocommerce #content a`
   (1,3,1) recolours the breadcrumb links to a dark slate — both nearly invisible
   on the banner. Re-assert the on-dark palette, SCOPED to the banner (so the
   light `.et-breadcrumb--light` PDP variant stays dark). Applies everywhere the
   shared `.et-archive-banner` is used: /shop/ and every product-category archive. */
.et-archive-banner .et-archive-banner__title { color: var(--et-on-dark); }
.et-archive-banner .et-archive-banner__desc,
.et-archive-banner .et-archive-banner__desc p,
.et-archive-banner .et-archive-banner__desc .term-description { color: var(--et-on-dark-2); }
.woocommerce #content .et-archive-banner .et-archive-banner__desc a { color: var(--et-on-dark); }
/* Breadcrumb: current page brightest (Snow), parent links a touch dimmer. */
.et-archive-banner .et-breadcrumb { color: var(--et-on-dark); }
.woocommerce #content .et-archive-banner .et-breadcrumb a,
.et-archive-banner .et-breadcrumb a { color: var(--et-on-dark-2); }
.woocommerce #content .et-archive-banner .et-breadcrumb a:hover,
.et-archive-banner .et-breadcrumb a:hover { color: var(--et-on-dark); }

.et-archive { display: grid; grid-template-columns: 248px 1fr; gap: 30px; padding-top: 36px; padding-bottom: 54px; }
.et-facet { margin-bottom: 24px; padding-bottom: 20px; border-bottom: var(--et-hairline); }
.et-facet__title { font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--et-muted); margin-bottom: 12px; }
.et-facet__list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.et-facet__list li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.et-facet__list a { color: var(--et-brown-soft); text-decoration: none; }
.et-facet__list a:hover { color: var(--et-gold); }
.et-facet__count { color: var(--et-muted); font-size: 12px; }
.et-facet__hint { font-size: 12px; color: var(--et-muted); margin: 8px 0 0; }
.et-range__track { display: block; height: 4px; border-radius: 4px; background: var(--et-sand); position: relative; }
.et-range__fill { position: absolute; left: 18%; right: 22%; top: 0; bottom: 0; background: var(--et-graphite); border-radius: 4px; }
.et-range__bounds { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--et-brown); margin-top: 10px; }
.et-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--et-brown-soft); padding: 5px 0; }
.et-check__box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(31,29,27,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.et-check__box.is-on { background: var(--et-btn-fill); border-color: transparent; color: var(--et-btn-on-fill); }
.et-swatches { display: flex; gap: 8px; margin-bottom: 4px; }
.et-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(31,29,27,.12); }

.et-archive__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 14px; flex-wrap: wrap; }
.et-result-count, .woocommerce-result-count { font-size: 13px; color: var(--et-brown); margin: 0; }
.et-sort-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.et-sort-pill { font-size: 12.5px; padding: 8px 16px; border-radius: var(--et-r-pill); border: 1px solid rgba(31,29,27,.18); color: var(--et-brown-soft); text-decoration: none; }
.et-sort-pill:hover { border-color: var(--et-btn-line-strong); color: var(--et-graphite); }
.et-sort-pill.is-active { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: transparent; }

/* ==========================================================================
   WOOCOMMERCE LOOP (shared by archive + related)
   ========================================================================== */
/* --------------------------------------------------------------------------
   Product loop grid — HARDENED against WooCommerce's bundled loop CSS.
   WooCommerce ships float-based loop styles (li.product { float:left;
   width:30.75% } + a clearfix ::after) that load AFTER this file on the
   server and were overriding our grid on live: ~180px floated cards with big
   gaps, titles broken word/letter-by-letter, "Добавяне" button spilling out.
   !important on the layout-critical props guarantees our responsive grid wins
   regardless of WooCommerce's stylesheet load order / version.
   Columns: 4 → 3 → 2 → 1 (see WOO RESPONSIVE below).
   -------------------------------------------------------------------------- */
/* FLEX, not grid: a grid always keeps 4 tracks, so 5 products render 4 + one
   card marooned beside three empty cells. Flex wrap + justify-content:center
   lets an incomplete last row sit centred — the cards keep the exact width they
   have in full rows (no giant stretched orphan), and the leftover space is
   balanced instead of gaping on the right. --et-loop-cols is the column CAP,
   stepped down in WOO RESPONSIVE; it is never auto-fill, so a 4K screen still
   shows 4. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.et-archive__results ul.products {
  --et-loop-cols: 4;
  --et-loop-gap: 18px;
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: stretch;
  gap: var(--et-loop-gap) !important;
}
/* WooCommerce's clearfix pseudo-elements become phantom grid cells that push
   the row out of alignment — remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }

/* ==========================================================================
   "ЗАРЕДИ ОЩЕ" + BACK TO TOP
   ========================================================================== */
.et-loadmore { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.et-loadmore__btn { min-width: 200px; text-align: center; }
.et-loadmore.is-loading .et-loadmore__btn { opacity: .6; pointer-events: none; }
.et-loadmore__status { margin: 0; font-size: 12.5px; color: var(--et-brown); min-height: 1.2em; }
.et-loadmore__status:focus-visible { outline: 2px solid var(--et-blue); outline-offset: 3px; }

/* Back-to-top. z-index sits UNDER the drawer/mega (which are 40+) so it can
   never cover an open menu, and bottom-right is offset enough to clear a
   consent bar / chat bubble parking in the same corner. */
.et-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 25;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--et-white); color: var(--et-ink-2);
  border: var(--et-hairline); box-shadow: var(--et-shadow-card);
  cursor: pointer; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .18s ease, color .18s ease;
}
.et-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.et-totop:hover { background: var(--et-ink-2); color: var(--et-on-dark); }
.et-totop svg { width: 22px; height: 22px; display: block; }
.et-drawer-open .et-totop { opacity: 0; visibility: hidden; } /* never over the drawer */
@media (max-width: 768px) {
  .et-totop { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .et-totop svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .et-totop { transition: none; }
}

/* ── Shop / product archives: white media slot ───────────────────────────
   Why a band appears here and nowhere else: WooCommerce ships its own loop CSS
   AFTER energy.css, and its `ul.products li.product img { height: auto }`
   (0,2,2) outranks our `.et-card__media img { height: 100% }` (0,2,1). The
   photo then renders shorter than the 4/5 slot and the slot's Platinum
   (--et-sand) shows through underneath. The front page never shows it because
   its cards are not inside `ul.products li.product`.

   Per the client's call (Вариант А) the slot goes white instead of the image
   being cropped or stretched — product photos are shot on white, so the
   leftover strip now blends into the photo AND into the card, which is
   --et-white too. Scoped to the archive body classes so the front page keeps
   its Platinum slot exactly as it is. */
.post-type-archive-product .et-card__media,
.tax-product_cat .et-card__media,
.tax-product_tag .et-card__media { background: var(--et-white); }

/* One card = one column of the cap, gaps deducted. flex-basis (not width:100%,
   which the grid version needed) — and still !important, because WC's own
   `li.product { width: 30.75% }` loads after us. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  /* border-box, stated here rather than inherited from the parent theme's
     reset: the card carries a 1px border, so under content-box its real width
     is basis + 2px — four of them then exceed 100% and the row wraps to three.
     Layout-critical, so it does not get to depend on someone else's stylesheet. */
  box-sizing: border-box !important;
  flex: 0 0 calc((100% - (var(--et-loop-cols) - 1) * var(--et-loop-gap)) / var(--et-loop-cols)) !important;
  max-width: calc((100% - (var(--et-loop-cols) - 1) * var(--et-loop-gap)) / var(--et-loop-cols)) !important;
  width: auto !important;
  min-width: 0;          /* allow the title to wrap instead of overflowing */
  margin: 0 !important;
  padding: 0;
  float: none !important;
  text-align: left !important;   /* WC centres loop items; our card is left-aligned */
}

.et-card--loop { display: flex; flex-direction: column; min-width: 0; }
.et-card--loop .et-card__body { min-width: 0; }
.et-card--loop .et-card__name { display: block; font-size: var(--et-fs-body-sm); font-weight: 600; line-height: 1.3; color: inherit; text-decoration: none; overflow-wrap: break-word; word-break: normal; hyphens: none; }
.et-card--loop .et-card__name:hover { color: var(--et-gold); }
.et-card__actions { margin-top: 10px; }
.et-card__actions .button, .et-card__actions a.button { font-family: var(--et-font-body); font-weight: 600; font-size: 12.5px; background: transparent; color: var(--et-graphite); border: 1.5px solid var(--et-btn-line-strong); border-radius: var(--et-r-pill); padding: 9px 16px; text-decoration: none; display: inline-block; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; line-height: 1.25; transition: background .18s ease, color .18s ease; }
.et-card__actions .button:hover, .et-card__actions a.button:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }
.et-card__actions .added_to_cart { margin-left: 8px; font-size: 12px; color: var(--et-brown); }
.woocommerce span.onsale { position: absolute; top: 10px; left: 10px; background: var(--et-red); color: #FAFAF8; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--et-r-pill); z-index: 2; margin: 0; min-height: 0; min-width: 0; line-height: 1.4; }

/* pagination — round buttons, active = gold */
.woocommerce nav.woocommerce-pagination { margin-top: 30px; }
.woocommerce nav.woocommerce-pagination ul { display: flex; gap: 8px; border: none; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { border: 1px solid rgba(31,29,27,.18); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--et-brown-soft); padding: 0; }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: transparent; }

/* ==========================================================================
   SINGLE PRODUCT (PDP)
   ========================================================================== */
/* PDP runs in a wider container than the rest of the site so the two columns
   are not cramped in a narrow centred band on >1280px screens. */
.et-pdp-wrap { max-width: var(--et-product-max); padding-top: 24px; padding-bottom: 54px; }
/* Gallery ~48% / summary ~48% with a generous gap. minmax(0,1fr) lets the
   gallery image shrink instead of blowing the track out. */
/* position:relative = the containing block for .et-badges, which hooks in before
   the gallery (woocommerce_before_single_product_summary). Without it the stack
   would anchor to the page, not the product. */
.woocommerce div.product { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; position: relative; }
/* Neutralise WooCommerce's bundled single-product floats/48% widths so the two
   columns each fill their grid track (same override war as the loop grid). */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary { margin: 0 !important; width: auto !important; max-width: 100%; float: none !important; }
.woocommerce div.product div.images img { border-radius: var(--et-r-lg); }

.et-pdp__eyebrow { margin-bottom: 10px; }
.et-pdp__title { font-family: var(--et-font-head); font-weight: 500; font-size: var(--et-fs-pdp-name); line-height: 1.08; margin: 0 0 8px; color: var(--et-head); }
.et-pdp__size { font-family: var(--et-font-head); font-style: normal; font-size: 30px; color: var(--et-brown); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-family: var(--et-font-head); font-size: var(--et-fs-price-lg); color: var(--et-graphite); margin: 12px 0 18px; }
.woocommerce div.product p.price del { font-size: 24px; opacity: .5; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 12px; }
.et-pdp__avail { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-brown); margin: 14px 0; }
.et-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.et-dot.is-in { background: var(--et-shamrock); box-shadow: 0 0 8px 1px rgba(46,158,90,.5); }
.et-dot.is-out { background: var(--et-red); }
.et-pdp__microcopy { font-size: 12px; color: var(--et-muted); line-height: 1.6; margin-top: 16px; }

.woocommerce div.product form.cart { margin: 18px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity input.qty { height: 46px; border-radius: var(--et-r-pill); border: 1px solid rgba(31,29,27,.2); padding: 0 10px; font-family: var(--et-font-body); width: 70px; text-align: center; }
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button { background: transparent; color: var(--et-graphite); border: 1.5px solid var(--et-btn-line-strong); border-radius: var(--et-r-pill); padding: 14px 30px; font-family: var(--et-font-body); font-weight: 600; transition: background .18s ease, color .18s ease; }
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }
.woocommerce div.product table.variations { margin: 14px 0; }
.woocommerce div.product table.variations td, .woocommerce div.product table.variations th { padding: 6px 0; }

/* tabs */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: var(--et-hairline); margin: 0 0 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0 18px 0 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--et-font-body); font-weight: 600; font-size: 13.5px; color: var(--et-brown); padding: 12px 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--et-graphite); box-shadow: inset 0 -2px 0 var(--et-gold); }

/* related / upsells */
.woocommerce .related.products,
.woocommerce .upsells.products { grid-column: 1 / -1; margin-top: 30px; }
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { font-family: var(--et-font-head); font-style: normal; font-weight: 500; font-size: var(--et-fs-title-it); margin-bottom: 18px; }
/* related/upsells inherit the hardened 4→3→2→1 loop grid above (they are also
   ul.products); only the full-row span + heading differ. */

/* ==========================================================================
   WOO RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  /* tighter two-section + drop the promo to free width for subcategories */
  .et-mega__nav { flex-basis: 200px; }
  .et-mega__promo { display: none; }
}
/* Product loop: 4 → 3 columns once the sidebar squeezes the results column.
   Only the cap changes — the card width formula reads it. */
@media (max-width: 1200px) {
  .woocommerce ul.products, .woocommerce-page ul.products,
  .et-archive__results ul.products { --et-loop-cols: 3; }
}
@media (max-width: 860px) {
  .et-archive { grid-template-columns: 1fr; }
  .woocommerce div.product { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .woocommerce ul.products, .woocommerce-page ul.products,
  .et-archive__results ul.products { --et-loop-cols: 2; --et-loop-gap: 12px; }
  /* desktop nav + mega are hidden on mobile — the drawer takes over */
  .et-mega { display: none; }
}
@media (max-width: 480px) {
  .woocommerce ul.products, .woocommerce-page ul.products,
  .et-archive__results ul.products { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   MOBILE NAV DRAWER (<768px)
   ========================================================================== */
.et-burger { display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 8px; background: none; border: none; cursor: pointer; }
.et-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--et-graphite); }
.home .et-burger span, .et-header--transparent .et-burger span { background: var(--et-on-dark); }

.et-drawer { position: fixed; inset: 0; z-index: 100; }
.et-drawer[hidden] { display: none; }
.et-drawer__overlay { position: absolute; inset: 0; background: rgba(17,17,17,.5); opacity: 0; transition: opacity .25s ease; border: none; }
.et-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px); background: var(--et-cream); box-shadow: -20px 0 60px -30px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; padding: 18px 22px 28px; overflow-y: auto; }
.et-drawer.is-open .et-drawer__overlay { opacity: 1; }
.et-drawer.is-open .et-drawer__panel { transform: none; }

.et-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.et-drawer__head .et-brand__name { color: var(--et-graphite); font-size: 20px; }
.et-drawer__close { background: none; border: none; font-size: 20px; color: var(--et-brown); cursor: pointer; line-height: 1; padding: 6px; }

.et-drawer__list { list-style: none; margin: 0; padding: 0; }
.et-drawer__list > li { border-bottom: var(--et-hairline); }
.et-drawer__list a,
.et-drawer__sub-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 2px; font-family: var(--et-font-body); font-size: 16px; font-weight: 500; color: var(--et-graphite); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; }
.et-drawer__list a:hover, .et-drawer__sub-toggle:hover { color: var(--et-gold); }
.et-drawer__chev { font-size: 17px; color: var(--et-muted); transition: transform .2s ease; }
/* Child combinators so a nested category opening doesn't rotate / expand its
   parent's controls (the drawer is a 2-level accordion: Продукти → cat → subs). */
.et-drawer__has-sub.is-open > .et-drawer__sub-toggle .et-drawer__chev { transform: rotate(45deg); }
.et-drawer__sub { list-style: none; margin: 0 0 8px; padding: 0 0 4px 10px; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.et-drawer__has-sub.is-open > .et-drawer__sub { max-height: 1600px; }
.et-drawer__sub a { font-size: 14px; font-weight: 400; color: var(--et-brown-soft); padding: 9px 2px; }
.et-drawer__sub li { border: none; }
/* Nested level (subcategories under a category) — lighter + indented. */
.et-drawer__sub-toggle--nested { font-size: 14px; font-weight: 400; color: var(--et-brown-soft); }
.et-drawer__sub--nested { padding-left: 12px; }
.et-drawer__sub--nested a { font-size: 13.5px; color: var(--et-brown); }
.et-drawer__sub--nested a:hover { color: var(--et-gold); }

.et-drawer__utils { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: var(--et-hairline); }
.et-drawer__utils a { color: var(--et-brown); text-decoration: none; font-size: 14px; padding: 8px 2px; }

body.et-drawer-open { overflow: hidden; }

@media (max-width: 768px) {
  .et-burger { display: inline-flex; }
  /* Профил / Кошница / Търсене all move into the drawer — but a one-tap call is
     worth a permanent slot, so the utils row stays and shows ONLY the phone,
     left of the burger. Its dropdown is off here: there is no hover, and the
     icon is itself a tel: link to the first number, so a tap dials at once. */
  .et-utils { display: flex; gap: 14px; }
  .et-utils > *:not(.et-phone) { display: none; }
  /* (the dropdown is switched off for mobile down in the phone block — it has to
     come after the rule that sets its display) */
}
@media (min-width: 769px) {
  .et-drawer { display: none; }
}

/* ==========================================================================
   ACCESSIBILITY — visible keyboard focus (was relying on UA default)
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--et-blue);
  outline-offset: 2px;
  border-radius: 3px;
}
/* On dark surfaces use the brighter blue so the ring stays visible. */
.et-hero :focus-visible,
.et-cause :focus-visible,
.et-archive-banner :focus-visible,
.home .et-site-header :focus-visible,
.et-header--transparent :focus-visible,
.et-footer :focus-visible,
.et-mega__promo:focus-visible { outline-color: var(--et-blue-2); }
/* Skip-to nothing: never remove focus entirely. */
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   NATIVE WORDPRESS PAGES  (blog index, single post, archives, search, 404,
   plain pages, comments) — GeneratePress markup styled to the brand. These
   render inside .content-area; our custom templates never use it, so this is
   scoped safely away from the home / shop / PDP layouts.
   ========================================================================== */
.content-area { padding-top: var(--et-sp-8); padding-bottom: var(--et-sp-9); }
.content-area .page-header,
.content-area .entry-header { margin-bottom: var(--et-sp-5); }
.content-area .page-title,
.content-area .entry-title { font-family: var(--et-font-head); font-weight: 500; line-height: 1.1; color: var(--et-head); font-size: var(--et-fs-h1); margin: 0 0 12px; }
.content-area .entry-title { font-size: 34px; }
.content-area .entry-title a { color: var(--et-head); text-decoration: none; }
.content-area .entry-title a:hover { color: var(--et-gold); }
.content-area .entry-meta,
.content-area .posted-on,
.content-area .byline { font-family: var(--et-font-mono); font-size: var(--et-fs-meta); letter-spacing: .06em; color: var(--et-muted); }
.content-area .entry-meta a { color: var(--et-brown); text-decoration: none; }
.content-area .entry-meta a:hover { color: var(--et-gold); }

/* Article spacing on the blog index / archives */
.content-area .post,
.content-area .hentry { margin-bottom: var(--et-sp-8); padding-bottom: var(--et-sp-7); border-bottom: var(--et-hairline); }
.content-area .post:last-child { border-bottom: none; }
.content-area .post-image img,
.content-area .post-thumbnail img { border-radius: var(--et-r-md); display: block; }

/* Long-form body copy */
.content-area .entry-content,
.content-area .entry-summary { font-size: var(--et-fs-body); line-height: 1.8; color: var(--et-brown-soft); }
.content-area .entry-content > * + * { margin-top: 1.1em; }
.content-area .entry-content h2 { font-family: var(--et-font-head); font-weight: 500; font-size: 28px; line-height: 1.2; margin-top: 1.6em; color: var(--et-head); }
.content-area .entry-content h3 { font-family: var(--et-font-head); font-weight: 500; font-size: 22px; line-height: 1.25; margin-top: 1.4em; color: var(--et-head); }
.content-area .entry-content a { color: var(--et-blue); text-decoration: underline; text-underline-offset: 2px; }
.content-area .entry-content a:hover { color: var(--et-blue-deep); }
.content-area .entry-content img { border-radius: var(--et-r-md); height: auto; }
.content-area .entry-content blockquote { border-left: 2px solid var(--et-gold); margin: 1.4em 0; padding: 4px 0 4px 20px; font-family: var(--et-font-head); font-style: normal; font-size: 20px; color: var(--et-brown); }
.content-area .entry-content ul,
.content-area .entry-content ol { padding-left: 1.3em; }
.content-area .entry-content li { margin: .4em 0; }
.content-area .more-link { font-weight: 600; color: var(--et-gold); text-decoration: none; }

/* Read-more / post nav / pagination → brand pills */
.content-area .nav-links,
.content-area .pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--et-sp-6); }
.content-area .nav-links a,
.content-area .nav-links .current,
.content-area .post-navigation a { font-family: var(--et-font-body); font-weight: 600; font-size: 13px; color: var(--et-brown-soft); text-decoration: none; border: 1px solid rgba(31,29,27,.18); border-radius: var(--et-r-pill); padding: 9px 18px; }
.content-area .nav-links a:hover,
.content-area .nav-links .current { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: transparent; }
.content-area .post-navigation { margin-top: var(--et-sp-7); padding-top: var(--et-sp-5); border-top: var(--et-hairline); }

/* Comments */
.comments-area { margin-top: var(--et-sp-8); }
.comments-area .comments-title,
.comments-area .comment-reply-title { font-family: var(--et-font-head); font-weight: 500; font-size: 24px; margin-bottom: var(--et-sp-4); }
.comments-area .comment-list { list-style: none; margin: 0; padding: 0; }
.comments-area .comment-body { padding: 16px 0; border-bottom: var(--et-hairline); }
.comments-area .comment-author .fn { font-weight: 600; }
.comments-area .comment-metadata a { font-family: var(--et-font-mono); font-size: var(--et-fs-meta); color: var(--et-muted); text-decoration: none; }

/* Search form + 404 */
.search-form,
.wp-block-search__inside-wrapper { display: flex; gap: 8px; max-width: 460px; }
.search-form .search-field,
.wp-block-search__input { flex: 1; font-family: var(--et-font-body); font-size: var(--et-fs-body-sm); padding: 12px 16px; border-radius: var(--et-r-pill); border: 1px solid rgba(31,29,27,.2); background: var(--et-white); color: var(--et-graphite); outline: none; }
.search-form .search-submit,
.wp-block-search__button { font-family: var(--et-font-body); font-weight: 600; font-size: var(--et-fs-body-sm); color: var(--et-graphite); background: transparent; border: 1.5px solid var(--et-btn-line-strong); border-radius: var(--et-r-pill); padding: 12px 22px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.search-form .search-submit:hover,
.wp-block-search__button:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }
.error-404 .page-content { font-size: var(--et-fs-body); line-height: 1.8; color: var(--et-brown-soft); }

/* Generic WP / block buttons → brand */
.content-area .wp-block-button__link,
.content-area .button:not(.et-btn) { font-family: var(--et-font-body); font-weight: 600; background: transparent; color: var(--et-graphite); border: 1.5px solid var(--et-btn-line-strong); border-radius: var(--et-r-pill); padding: 13px 28px; text-decoration: none; display: inline-block; transition: background .18s ease, color .18s ease; }
.content-area .wp-block-button__link:hover,
.content-area .button:not(.et-btn):hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }

/* ==========================================================================
   WOOCOMMERCE NATIVE PAGES  (cart · checkout · my-account) — native markup,
   made readable + on-brand. No layout rewrites: brand the type, tables,
   fields, buttons and notices that ship with WooCommerce.
   ========================================================================== */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area { padding-top: var(--et-sp-7); }

.woocommerce h1,
.woocommerce h2,
.woocommerce h3 { font-family: var(--et-font-head); font-weight: 500; color: var(--et-head); }
/* Keep Woo links calm (the prose blue/underline rule above must not bleed into
   cart/account tables). Buttons keep their gold styling below. Scoped to #content
   (the page body wrapper) so it does NOT reach the dark footer — the `woocommerce`
   body class would otherwise recolour the footer links; footer lives outside #content. */
.woocommerce #content a:not(.button):not(.et-btn) { color: var(--et-brown-soft); text-decoration: none; }
.woocommerce #content a:not(.button):not(.et-btn):hover { color: var(--et-gold); }
/* Re-exempt the archive-banner breadcrumb + the active sort pill from the calm-
   link rule directly above. They carry the SAME (1,3,1) specificity as that rule,
   so these MUST sit after it in source order to win (the earlier
   `.et-archive-banner .et-breadcrumb a` block loses to `.woocommerce #content a`).
   Breadcrumb → on-dark on the blue banner; active pill → light Snow text on its
   Yale primary fill (was inheriting the dark slate → invisible). */
.woocommerce #content .et-archive-banner .et-breadcrumb a { color: var(--et-on-dark-2); }
.woocommerce #content .et-archive-banner .et-breadcrumb a:hover { color: var(--et-on-dark); }
.woocommerce #content a.et-sort-pill { color: var(--et-brown-soft); }
.woocommerce #content a.et-sort-pill:hover { color: var(--et-graphite); }
.woocommerce #content a.et-sort-pill.is-active { color: var(--et-btn-on-fill); }
.woocommerce #content a.et-sort-pill.is-active:hover { color: var(--et-btn-on-fill); background: var(--et-blue); }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 { font-size: 22px; margin-bottom: var(--et-sp-4); }

/* Tables: cart, order review, account orders/downloads/addresses */
.woocommerce table.shop_table { border: var(--et-hairline); border-radius: var(--et-r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--et-font-body); font-weight: 600; font-size: var(--et-fs-body-sm); color: var(--et-graphite); background: var(--et-cream); padding: 14px 16px; }
.woocommerce table.shop_table td { padding: 14px 16px; border-top: var(--et-hairline); color: var(--et-brown-soft); font-size: var(--et-fs-body-sm); }
.woocommerce table.cart img { width: 56px; border-radius: var(--et-r-sm); }
.woocommerce .cart_totals h2,
.woocommerce .cross-sells h2 { font-size: 22px; margin-bottom: var(--et-sp-3); }

/* Form fields */
.woocommerce form .form-row label,
.woocommerce-account .woocommerce-form-row label { font-size: var(--et-fs-body-sm); color: var(--et-brown); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection,
.woocommerce-account input.input-text,
.woocommerce #coupon_code { font-family: var(--et-font-body); font-size: var(--et-fs-body-sm); padding: 12px 14px; border: 1px solid rgba(31,29,27,.2); border-radius: var(--et-r-sm); background: var(--et-white); color: var(--et-graphite); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--et-blue); outline: none; }

/* Buttons — gold gradient everywhere (cart, checkout, account, coupons) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order { font-family: var(--et-font-body); font-weight: 600; font-size: var(--et-fs-body-sm); color: var(--et-graphite); background: transparent; border: 1.5px solid var(--et-btn-line-strong); border-radius: var(--et-r-pill); padding: 13px 26px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }
/* Secondary buttons (e.g. "Обнови кошницата") — lighter ghost */
.woocommerce button[name="update_cart"],
.woocommerce .button.wc-backward { background: transparent; color: var(--et-graphite); border: 1px solid var(--et-btn-line); }
.woocommerce button[name="update_cart"]:hover,
.woocommerce .button.wc-backward:hover { border-color: var(--et-btn-line-strong); background: rgba(20,20,20,.05); color: var(--et-graphite); }

/* WooCommerce BLOCKS (Cart/Checkout block) — default buttons render dark/black
   with their own custom props; brand them gold to match the primary CTA. */
.wc-block-components-button:not(.is-link),
.wp-block-button__link.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: transparent !important;
  color: var(--et-graphite) !important;
  border: 1.5px solid var(--et-btn-line-strong) !important;
  border-radius: var(--et-r-pill) !important;
  font-family: var(--et-font-body) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease;
}
.wc-block-components-button:not(.is-link):hover { background: var(--et-btn-fill) !important; color: var(--et-btn-on-fill) !important; }
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit !important; }
/* Block "link" style buttons (e.g. edit address) stay text-only, brand blue. */
.wc-block-components-button.is-link { color: var(--et-blue); }
.wc-block-components-button.is-link:hover { color: var(--et-blue-deep); }

/* My-account: tab navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--et-sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-block; font-size: 13px; font-weight: 600; color: var(--et-brown-soft); text-decoration: none; border: 1px solid rgba(31,29,27,.18); border-radius: var(--et-r-pill); padding: 9px 18px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: transparent; }

/* Notices */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews { border-radius: var(--et-r-sm); border-top: none; font-size: var(--et-fs-body-sm); }
.woocommerce-message { border-left: 3px solid var(--et-shamrock); background: rgba(46,158,90,.08); }
.woocommerce-info { border-left: 3px solid var(--et-blue); background: rgba(8,138,199,.07); }
.woocommerce-error { border-left: 3px solid var(--et-red); background: rgba(207,24,39,.06); }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { color: inherit; }
.woocommerce-store-notice { background: var(--et-graphite); }

/* ==========================================================================
   ARCHIVE TOOLBAR — sort label + native orderby fallback
   ========================================================================== */
.et-sort-label { font-family: var(--et-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-muted); margin-right: 4px; align-self: center; }

/* ==========================================================================
   TYPOGRAPHY / RESPONSIVE POLISH (>desktop → tablet → mobile)
   ========================================================================== */
/* PDP name + price scale down on small screens (desktop = 42 / 38). */
@media (max-width: 768px) {
  .et-pdp__title { font-size: 30px; }
  .et-pdp__size { font-size: 22px; }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 30px; }
  .content-area .page-title,
  .content-area .entry-title { font-size: 28px; }
  .content-area { padding-top: var(--et-sp-7); }
  .woocommerce table.shop_table { font-size: 13px; }
}

/* ==========================================================================
   BRAND "DOCUMENT" PAGES  (body.et-doc — set in functions.php for ordinary
   content Pages: За нас, Общи условия, ЧЗВ…). The client just writes in the
   normal editor; this turns it into a branded, readable document automatically.
   Builds on the native .content-area styles above — only adds the comfortable
   reading column, roomier type, a branded title accent, table styling, and the
   optional centred "hero title" variant. Front page, blog, shop, PDP and the
   Woo cart/checkout/account pages are excluded server-side, so untouched.
   ========================================================================== */

/* Comfortable centred reading column (title + body share it). */
body.et-doc .inside-article { max-width: 768px; margin-left: auto; margin-right: auto; }
/* A single Page must not show the blog-index divider that .hentry adds. */
body.et-doc .hentry { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Title — larger, with a slim gold accent rule beneath the header. */
body.et-doc .entry-header { margin-bottom: var(--et-sp-6); }
body.et-doc .entry-title { font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -.01em; }
body.et-doc .entry-header::after {
  content: ""; display: block; width: 54px; height: 3px; margin-top: 18px;
  border-radius: 3px; background: var(--et-saffron);
}

/* Roomier long-form reading type. */
body.et-doc .entry-content { font-size: 16.5px; line-height: 1.85; color: var(--et-brown-soft); }
body.et-doc .entry-content > * + * { margin-top: 1.25em; }
body.et-doc .entry-content h2 { font-size: 30px; margin-top: 1.8em; }
body.et-doc .entry-content h3 { font-size: 23px; margin-top: 1.5em; }

/* Tables (e.g. price/spec/terms tables) — clean brand grid. */
body.et-doc .entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
body.et-doc .entry-content th,
body.et-doc .entry-content td { text-align: left; padding: 11px 14px; border: var(--et-hairline); vertical-align: top; }
body.et-doc .entry-content thead th,
body.et-doc .entry-content tr:first-child th {
  background: var(--et-sand); color: var(--et-graphite);
  font-family: var(--et-font-body); font-weight: 600;
}
body.et-doc .entry-content tbody tr:nth-child(even) { background: rgba(31, 29, 27, .025); }

/* --- Optional "hero title" variant (Page → Template → „Бранд страница — едро
   заглавие"). Centred, larger title over a soft gold glow; body stays readable. */
body.et-page-hero .entry-header {
  text-align: center; margin-bottom: var(--et-sp-7);
  padding: var(--et-sp-7) var(--et-sp-6) var(--et-sp-6);
  border-radius: var(--et-r-lg);
  background: var(--et-white);
  border: var(--et-hairline);
}
body.et-page-hero .entry-title { font-size: clamp(38px, 5.6vw, 60px); }
body.et-page-hero .entry-header::after { margin-left: auto; margin-right: auto; }

@media (max-width: 480px) {
  body.et-doc .site-content > .content-area,
  body.et-doc #content > .content-area { padding-left: 22px; padding-right: 22px; }
  body.et-doc .entry-content { font-size: 16px; }
}

/* ==========================================================================
   SHOP FILTERS  (functional facet form in .et-archive__sidebar) — extends the
   facet styles above. Real checkboxes, dual-thumb price slider, form actions.
   ========================================================================== */
.et-filters { margin: 0; }
/* Hidden-but-focusable native checkbox; the .et-check__box is the visual. */
.et-check { cursor: pointer; }
.et-check input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.et-check input[type="checkbox"]:checked + .et-check__box { background: var(--et-btn-fill); border-color: transparent; color: var(--et-btn-on-fill); }
.et-check input[type="checkbox"]:focus-visible + .et-check__box { outline: 2px solid var(--et-graphite); outline-offset: 2px; }
.et-check .et-facet__count { margin-left: auto; }

/* Dual-thumb price slider — two range inputs overlaid on the track. */
.et-range { position: relative; height: 22px; display: flex; align-items: center; }
.et-range[data-min] .et-range__track { width: 100%; }
.et-range[data-min] .et-range__fill { left: 0; right: 0; }
.et-range__input {
  position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0;
  background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.et-range__input::-webkit-slider-runnable-track { background: transparent; border: none; }
.et-range__input::-moz-range-track { background: transparent; border: none; }
.et-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; background: var(--et-white);
  border: 2px solid var(--et-graphite); box-shadow: 0 1px 4px rgba(17, 17, 17, .25);
}
.et-range__input::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 16px; height: 16px; border-radius: 50%;
  background: var(--et-white); border: 2px solid var(--et-graphite); box-shadow: 0 1px 4px rgba(17, 17, 17, .25);
}

.et-filters__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.et-filters__submit {
  font-family: var(--et-font-body); font-weight: 600; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--et-graphite); border: 1.5px solid var(--et-btn-line-strong);
  border-radius: var(--et-r-pill); padding: 11px 22px;
  transition: background .18s ease, color .18s ease;
}
.et-filters__submit:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); }
.et-filters__clear { font-size: 12.5px; color: var(--et-brown); text-decoration: underline; text-underline-offset: 2px; }
.et-filters__clear:hover { color: var(--et-gold); }

/* ==========================================================================
   BLOG — archive card grid (index.php / archive.php) + single post (single.php).
   Brand card list with graceful image fallback, comfortable reading column,
   pagination and related posts. Scoped to .et-blog-archive / .et-post / .et-related
   so the home, shop and PDP layouts are untouched.
   ========================================================================== */
.et-blog-archive { padding: var(--et-sp-8) 0 var(--et-sp-9); }
.et-blog-archive__head { margin-bottom: var(--et-sp-7); }
.et-blog-archive__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(32px, 4.4vw, 46px); color: var(--et-head); margin: 6px 0 0; line-height: 1.08; }
.et-blog-archive__desc { font-size: 15.5px; line-height: 1.7; color: var(--et-brown-soft); max-width: 640px; margin-top: 14px; }
.et-blog-archive__empty { font-size: 16px; color: var(--et-brown); }

.et-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }

.et-blog-card {
  display: flex; flex-direction: column; background: var(--et-white);
  border: var(--et-hairline); border-radius: var(--et-r-lg); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.et-blog-card:hover { transform: translateY(-3px); box-shadow: var(--et-shadow-card); }
.et-blog-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--et-sand); }
.et-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-blog-card__placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--et-platinum), #D9E7EF);
}
.et-blog-card__placeholder-mark { font-size: 30px; color: var(--et-gold-2); opacity: .7; }
.et-blog-card__body { display: flex; flex-direction: column; padding: 18px 20px 22px; gap: 8px; }
.et-blog-card__meta { font-family: var(--et-font-mono); font-size: var(--et-fs-meta); letter-spacing: .06em; color: var(--et-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.et-blog-card__cat { color: var(--et-gold); text-transform: uppercase; letter-spacing: .12em; }
.et-blog-card__title { font-family: var(--et-font-head); font-weight: 500; font-size: 21px; line-height: 1.22; margin: 2px 0 0; }
.et-blog-card__title a { color: var(--et-head); text-decoration: none; }
.et-blog-card__title a:hover { color: var(--et-gold); }
.et-blog-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--et-brown-soft); margin: 0; }
.et-blog-card__more { margin-top: 4px; font-weight: 600; font-size: 13px; color: var(--et-gold); text-decoration: none; }
.et-blog-card__more:hover { color: var(--et-brown); }

/* Pagination — brand pills (paginate_links type=list). */
.et-pagination { margin-top: var(--et-sp-8); }
.et-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; }
.et-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 12px; font-family: var(--et-font-body); font-weight: 600; font-size: 13px;
  color: var(--et-brown-soft); text-decoration: none; border: 1px solid rgba(31, 29, 27, .18); border-radius: var(--et-r-pill);
}
.et-pagination a.page-numbers:hover { border-color: var(--et-btn-line-strong); color: var(--et-graphite); }
.et-pagination .page-numbers.current { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: transparent; }
.et-pagination .page-numbers.dots { border: none; }

/* ---- Single post ---- */
.et-post { padding-bottom: var(--et-sp-9); }
.et-post__header { text-align: center; padding: var(--et-sp-8) 0 var(--et-sp-6); }
.et-post__header-inner { max-width: 820px; }
.et-post__meta { font-family: var(--et-font-mono); font-size: var(--et-fs-meta); letter-spacing: .06em; color: var(--et-muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 16px; }
.et-post__meta a { color: var(--et-gold); text-decoration: none; }
.et-post__meta a:hover { color: var(--et-brown); }
.et-post__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -.01em; color: var(--et-head); margin: 0; }

.et-post__feature { margin: var(--et-sp-6) 0 var(--et-sp-8); }
.et-post__feature-img { display: block; width: 100%; max-height: 540px; object-fit: cover; border-radius: var(--et-r-lg); }

.et-post__content { max-width: 768px; margin: 0 auto; padding: 0 var(--et-section-x); }
.et-post__body { font-size: 16.5px; line-height: 1.85; color: var(--et-brown-soft); }
.et-post__body > * + * { margin-top: 1.25em; }
.et-post__body h2 { font-family: var(--et-font-head); font-weight: 500; font-size: 30px; line-height: 1.2; margin-top: 1.8em; color: var(--et-head); }
.et-post__body h3 { font-family: var(--et-font-head); font-weight: 500; font-size: 23px; line-height: 1.25; margin-top: 1.5em; color: var(--et-head); }
.et-post__body a { color: var(--et-blue); text-decoration: underline; text-underline-offset: 2px; }
.et-post__body a:hover { color: var(--et-blue-deep); }
.et-post__body img { border-radius: var(--et-r-md); height: auto; max-width: 100%; }
.et-post__body blockquote { border-left: 2px solid var(--et-gold); margin: 1.4em 0; padding: 4px 0 4px 20px; font-family: var(--et-font-head); font-style: normal; font-size: 20px; color: var(--et-brown); }
.et-post__body ul, .et-post__body ol { padding-left: 1.3em; }
.et-post__body li { margin: .4em 0; }
.et-post__body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.et-post__body th, .et-post__body td { text-align: left; padding: 11px 14px; border: var(--et-hairline); vertical-align: top; }
.et-post__body thead th, .et-post__body tr:first-child th { background: var(--et-sand); color: var(--et-graphite); font-family: var(--et-font-body); font-weight: 600; }

.et-post__tags { margin-top: var(--et-sp-7); display: flex; flex-wrap: wrap; gap: 8px; }
.et-post__tags a { font-family: var(--et-font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--et-brown-soft); text-decoration: none; border: 1px solid rgba(31, 29, 27, .16); border-radius: var(--et-r-pill); padding: 6px 14px; }
.et-post__tags a:hover { border-color: var(--et-gold); color: var(--et-gold); }
.et-post__back { margin-top: var(--et-sp-6); }
.et-post__back a { font-weight: 600; font-size: 13.5px; color: var(--et-brown); text-decoration: none; }
.et-post__back a:hover { color: var(--et-gold); }

/* Related posts */
.et-related { margin-top: var(--et-sp-9); padding-top: var(--et-sp-8); border-top: var(--et-hairline); }
.et-related__title { font-family: var(--et-font-head); font-weight: 500; font-size: 26px; color: var(--et-head); margin: 0 0 var(--et-sp-5); }

@media (max-width: 768px) {
  .et-blog-archive { padding-top: var(--et-sp-7); }
  .et-blog-grid { gap: 22px; }
  .et-post__header { padding-top: var(--et-sp-7); }
  .et-post__content { padding-left: 22px; padding-right: 22px; }
  .et-post__body { font-size: 16px; }
}

/* ==========================================================================
   "ЗА НАС" PAGE  (tmpl-about.php) — rich multi-section brand story. Reuses the
   brand tokens, FX aesthetic ([data-et-fx]) and buttons; fully self-contained
   and scoped to .et-about*, so no other template is affected.
   ========================================================================== */

/* 1. Hero — dark gradient (or Featured Image) with brand glow + particles. */
.et-about-hero {
  position: relative; overflow: hidden; min-height: 58vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(80px, 12vh, 150px) var(--et-section-x);
  /* Blue-black tint pulled toward Yale Blue per Block 1 (token-only, no hardcode). */
  background: linear-gradient(160deg, var(--et-dark-2) 0%, var(--et-blue-deep) 58%, var(--et-dark) 100%);
  color: var(--et-on-dark);
}
.et-about-hero .et-fx-bg { z-index: 0; }
.et-about-hero__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 50% 28%, rgba(21, 20, 15, .32), rgba(21, 20, 15, .82)); }
.et-about-hero__inner { position: relative; z-index: 3; max-width: 760px; }
.et-about-hero .et-eyebrow { color: var(--et-gold-2); margin-bottom: 18px; }
.et-about-hero__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -.01em; color: var(--et-on-dark); margin: 0 0 22px; }
.et-about-hero__lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.78; color: var(--et-on-dark-2); max-width: 640px; margin: 0 auto; }

/* 2. История — text + media split. */
.et-about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.et-about__h2 { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--et-head); margin: 8px 0 18px; }
.et-about-split__text p { font-size: 16px; line-height: 1.85; color: var(--et-brown-soft); margin: 0; }
.et-about-split__text p + p { margin-top: 1.1em; }

/* Image slots — graceful brand placeholder until a real photo is added. */
.et-about-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--et-r-lg); overflow: hidden; border: var(--et-hairline); background: linear-gradient(135deg, var(--et-platinum), #D9E7EF); }
.et-about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.et-about-media__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--et-gold-2); opacity: .5; }

/* 3. Каузата — dark accent section with gold eyebrow + wider lead. */
.et-about-cause { text-align: center; }
.et-about-cause .et-eyebrow { color: var(--et-gold-2); margin-bottom: 16px; }
.et-about-cause__inner { max-width: 720px; }
.et-about-cause__lead { max-width: 620px; font-size: 15.5px; }

/* 4. Ценности — value cards. */
.et-about__section-head { text-align: center; max-width: 560px; margin: 0 auto var(--et-sp-6); }
.et-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.et-value { background: var(--et-white); border: var(--et-hairline); border-radius: var(--et-r-lg); padding: 34px 30px; }
.et-value__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(132,216,255,.20); color: var(--et-blue-deep); font-size: 19px; margin-bottom: 18px; }
.et-value__title { font-family: var(--et-font-head); font-weight: 500; font-size: 21px; color: var(--et-head); margin: 0 0 10px; }
.et-value__text { font-size: 14.5px; line-height: 1.65; color: var(--et-brown-soft); margin: 0; }

/* 5. CTA — finale with a soft gold glow. */
.et-about-cta { text-align: center; background: var(--et-white); border-top: var(--et-hairline); }
.et-about-cta__inner { max-width: 600px; margin: 0 auto; }
.et-about-cta__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(30px, 4vw, 46px); color: var(--et-head); margin: 0 0 16px; }
.et-about-cta__text { font-size: 16px; line-height: 1.7; color: var(--et-brown-soft); margin: 0 0 28px; }
.et-about-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .et-about-split { grid-template-columns: 1fr; }
  .et-about-split__media { order: -1; }
}

/* ==========================================================================
   КАРТА НА ДЕНЯ  (homepage section + popup) — wraps the energy-daily-card
   plugin output in brand chrome. Scoped to .et-daily*, so nothing else changes.
   ========================================================================== */

/* Homepage section — soft gold glow finale band. */
.et-daily { background: var(--et-linen); border-top: var(--et-hairline); }
.et-daily__inner { text-align: center; max-width: 680px; margin: 0 auto; }
.et-daily__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); color: var(--et-head); margin: 8px 0 12px; line-height: 1.1; }
.et-daily__lead { font-size: 15.5px; line-height: 1.7; color: var(--et-brown-soft); max-width: 520px; margin: 0 auto var(--et-sp-6); }
.et-daily__card { margin: 0 auto; }
.et-daily__hint { font-size: 14px; color: var(--et-brown); }

/* Floating trigger button (popup "button" mode). */
.et-daily-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--et-font-body); font-weight: 600; font-size: 13.5px; cursor: pointer;
  color: var(--et-graphite); background: var(--et-white); border: 1.5px solid var(--et-btn-line-strong);
  border-radius: var(--et-r-pill); padding: 13px 20px;
  box-shadow: 0 16px 34px -12px rgba(17, 17, 17, .3);
  transition: transform .15s ease, box-shadow .15s ease, background .18s ease, color .18s ease;
}
.et-daily-fab:hover { transform: translateY(-2px); background: var(--et-btn-fill); color: var(--et-btn-on-fill); box-shadow: 0 20px 40px -12px rgba(17, 17, 17, .4); }
.et-daily-fab__icon { font-size: 15px; }

/* Modal. */
.et-daily-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .26s ease; }
.et-daily-modal.is-open { opacity: 1; }
.et-daily-modal[hidden] { display: none; }
.et-daily-modal__overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, .6); cursor: pointer; }
.et-daily-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  background: var(--et-white); border: var(--et-hairline); border-radius: var(--et-r-lg);
  padding: 34px 30px 30px; text-align: center;
  box-shadow: 0 40px 90px -30px rgba(17, 17, 17, .35);
  transform: translateY(10px) scale(.985); transition: transform .26s ease;
}
.et-daily-modal.is-open .et-daily-modal__dialog { transform: translateY(0) scale(1); }
.et-daily-modal__close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  color: var(--et-brown); background: transparent; border: 1px solid rgba(31, 29, 27, .16); border-radius: 50%;
}
.et-daily-modal__close:hover { color: var(--et-graphite); border-color: var(--et-gold); }
.et-daily-modal__title { font-family: var(--et-font-head); font-weight: 500; font-size: 26px; color: var(--et-head); margin: 6px 0 18px; line-height: 1.14; }
.et-daily-modal__card { margin: 0 auto; }

/* Prevent background scroll while the modal is open. */
body.et-daily-lock { overflow: hidden; }

@media (max-width: 480px) {
  .et-daily-fab__label { display: none; }
  .et-daily-fab { padding: 14px; }
  .et-daily-fab__icon { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .et-daily-modal, .et-daily-modal__dialog { transition: none; }
}

/* ##########################################################################
   ##########################################################################
   PHASE 2 — carousels, mega-menu photos, header hide/reveal, sticky, blog
   mosaic, scroll-reveal and finishing touches. Everything below routes
   through the :root tokens above — no new hard-coded colours.
   ##########################################################################
   ########################################################################## */

/* ==========================================================================
   SHARED CAROUSEL  (assets/js/carousel.js) — ONE mechanism for every row.
   Scroll-snap track → native touch swipe + momentum; items-per-view is pure
   CSS (--et-cols). Arrows page by the visible width, dots follow the scroll.
   Arrows/dots (Yale base, Ocean active) auto-hide when one page fits.
   ========================================================================== */
.et-carousel { position: relative; --et-cols: 4; --et-gap: 18px; }
.et-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.et-carousel__viewport::-webkit-scrollbar { display: none; }
.et-carousel__track {
  display: flex; gap: var(--et-gap); list-style: none; margin: 0; padding: 2px;
}
.et-carousel__slide {
  flex: 0 0 calc((100% - (var(--et-cols) - 1) * var(--et-gap)) / var(--et-cols));
  min-width: 0; scroll-snap-align: start; list-style: none;
}
.et-carousel__slide > .et-card,
.et-carousel__slide > .et-tile,
.et-carousel__slide > .et-quote { height: 100%; }

/* Arrows — circular Yale-outlined controls; sit just over the row edges. */
.et-carousel__arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; padding: 0;
  color: var(--et-blue-deep); background: var(--et-white);
  border: 1px solid var(--et-btn-line);
  box-shadow: 0 10px 26px -14px rgba(43,49,60,.5);
  transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}
.et-carousel__arrow:hover { background: var(--et-blue); color: var(--et-on-gold); border-color: var(--et-blue); }
.et-carousel__arrow:disabled { opacity: .32; cursor: default; }
.et-carousel__arrow--prev { left: -8px; }
.et-carousel__arrow--next { right: -8px; }

/* Dots */
.et-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.et-carousel__dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--et-btn-line);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.et-carousel__dot:hover { background: rgba(8,138,199,.25); }
.et-carousel__dot.is-active { background: var(--et-blue); border-color: var(--et-blue); transform: scale(1.15); }

/* Single-page: nothing to page through. */
.et-carousel--static .et-carousel__arrow,
.et-carousel--static .et-carousel__dots { display: none; }

/* Per-context items-per-view. */
.et-carousel--products { --et-cols: 4; }
.et-carousel--reviews  { --et-cols: 3; }
/* Category "Полета на енергия": larger image-first cards → ~4 per row on desktop
   (was 6), stepping down to ~1.5 (one full + a peek) on phones. Manual arrows. */
.et-carousel--cats     { --et-cols: 4; --et-gap: 20px; }

@media (max-width: 1024px) {
  .et-carousel--cats { --et-cols: 3; }
}
@media (max-width: 768px) {
  .et-carousel--products,
  .et-carousel--reviews { --et-cols: 2; }
  .et-carousel--cats    { --et-cols: 2; }
  .et-carousel__arrow { width: 36px; height: 36px; font-size: 17px; }
  .et-carousel__arrow--prev { left: -4px; }
  .et-carousel__arrow--next { right: -4px; }
}
@media (max-width: 480px) {
  .et-carousel--products,
  .et-carousel--reviews { --et-cols: 1; }
  .et-carousel--cats    { --et-cols: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .et-carousel__viewport { scroll-behavior: auto; }
}

/* ---- Seasonal promo banner (first slide, card-sized) ---- */
.et-promo-card {
  position: relative; height: 100%; min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--et-r-lg); overflow: hidden; text-decoration: none;
  color: var(--et-on-dark); padding: 20px;
  background: linear-gradient(150deg, var(--et-dark-2) 0%, var(--et-dark) 100%);
  border: var(--et-hairline);
}
/* Photo sits under the dark gradient: .et-promo-card's own gradient stays as
   the fallback/base, __media carries the image, __scrim re-lays the SAME
   gradient over it (semi-transparent) so the text keeps its contrast. */
.et-promo-card__media { position: absolute; inset: 0; z-index: 0; }
.et-promo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-promo-card__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, var(--et-dark-2) 0%, var(--et-dark) 100%);
  opacity: .74;
}
.et-promo-card__glow {
  position: absolute; top: -30px; right: -30px; width: 180px; height: 180px;
  border-radius: 50%; pointer-events: none; filter: blur(30px); z-index: 1;
  background: radial-gradient(circle, var(--et-glow-strong), rgba(8,138,199,0) 68%);
}
.et-promo-card__body { position: relative; z-index: 2; }
.et-promo-card .et-eyebrow { color: var(--et-blue-2); margin-bottom: 10px; }
.et-promo-card__title { font-family: var(--et-font-head); font-weight: 500; font-size: 22px; line-height: 1.14; margin: 0 0 14px; color: var(--et-on-dark); }
.et-promo-card__cta { font-family: var(--et-font-body); font-weight: 600; font-size: 13px; color: var(--et-blue-2); }
.et-promo-card:hover .et-promo-card__cta { color: var(--et-on-dark); }
/* Product-carousel slides carry cards; give them a consistent min height so the
   banner and the product cards line up in the row. */
.et-carousel--products .et-carousel__slide { display: flex; }
.et-carousel--products .et-carousel__slide > * { width: 100%; }

/* ==========================================================================
   SCROLL-REVEAL  (assets/js/reveal.js) — fade + slight rise on enter.
   The hidden state is armed ONLY when JS adds html.et-reveal-ready, so no-JS
   and crawlers see everything. Law #1: content always in the DOM.
   ========================================================================== */
.et-reveal-ready .et-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.et-reveal-ready .et-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .et-reveal-ready .et-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   SECTION RHYTHM  (Moon Juice) — 3 vertical-padding tiers for perceived pace.
   ========================================================================== */
.et-section--compact  { padding-top: var(--et-sp-6); padding-bottom: var(--et-sp-6); }
.et-section--spacious { padding-top: var(--et-sp-9); padding-bottom: var(--et-sp-9); }
@media (min-width: 1025px) {
  .et-section--spacious { padding-top: 96px; padding-bottom: 96px; }
}

/* ==========================================================================
   CATEGORY CARDS  (Section 3 "Полета на енергия") — photos + "rise" reveal.
   Manual carousel of category cards; a card with subcategories lifts and opens
   a full-width panel beneath the row (assets/js/category-cards.js).
   ========================================================================== */
.et-catcards { position: relative; }
/* Extra vertical room so a lifted card + its shadow are not clipped by the
   viewport's overflow-y (scroll-snap forces overflow-y to compute non-visible). */
.et-carousel--cats .et-carousel__track { padding-top: 10px; padding-bottom: 10px; }

/* Large image-first card: the photo (or blue placeholder) fills the whole card,
   the category name overlays TOP-LEFT on a light snow scrim (Jet Black text —
   readable over any image). No dark hover overlay: only image zoom + a light
   lift/shadow. Near-square / slightly horizontal (4:3) banner footprint. */
.et-catcard {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--et-white); border: var(--et-hairline-2); border-radius: var(--et-r-lg);
  overflow: hidden; text-align: left; text-decoration: none; color: inherit;
  cursor: pointer; padding: 0; font: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.et-catcard:hover { transform: translateY(-3px); border-color: rgba(8,138,199,.4); box-shadow: var(--et-shadow-card); }
/* Four Seasons "rise": the active card lifts a touch more and turns Ocean. */
.et-catcard.is-lifted { transform: translateY(-6px); border-color: var(--et-blue); box-shadow: var(--et-shadow-card); }
.et-catcard__media { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--et-sand); }
.et-catcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.et-catcard:hover .et-catcard__media img { transform: scale(1.05); }
/* Fallback when a category has no WooCommerce thumbnail: a branded blue sphere
   (radial gradient, :root tokens only) with the flower-of-life pattern. The
   flower is kept square (aspect-ratio 1) so it never stretches in the wide card. */
.et-catcard__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--et-blue-deep);
  background: radial-gradient(circle at 42% 34%, var(--et-blue-soft), var(--et-platinum) 82%);
}
.et-catcard__ph .et-catcard__flower { width: 50%; height: auto; aspect-ratio: 1 / 1; opacity: .5; }
/* Name overlay: light snow scrim only behind the text (top band), Jet Black text. */
.et-catcard__label {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 15px 16px 28px; color: var(--et-graphite);
  font-weight: 600; font-size: 17px; line-height: 1.22;
  background: linear-gradient(180deg, rgba(250,250,248,.94) 0%, rgba(250,250,248,.78) 45%, rgba(250,250,248,0) 100%);
}
.et-catcard__chev { position: absolute; top: 12px; right: 12px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--et-on-dark); background: rgba(14,79,116,.72); transition: transform .2s ease; }
.et-catcard.is-lifted .et-catcard__chev { transform: rotate(45deg); background: var(--et-blue); }

/* Reveal panel — full-width, below the row. Collapsed by default. */
.et-catpanel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s ease, opacity .28s ease, margin .32s ease; }
.et-catpanel[hidden] { display: block; } /* animate instead of display:none; JS toggles .is-open */
.et-catpanel.is-open { max-height: 520px; opacity: 1; margin-top: 18px; }
.et-catpanel__inner { background: var(--et-white); border: var(--et-border-blue); border-radius: var(--et-r-md); padding: 22px 26px; }
.et-catpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.et-catpanel__title { font-family: var(--et-font-head); font-weight: 500; font-size: 20px; color: var(--et-head); }
.et-catpanel__subs { list-style: none; margin: 0; padding: 0; columns: 180px 3; column-gap: 28px; }
.et-catpanel__subs li { break-inside: avoid; }
.et-catpanel__subs a { display: block; font-size: 13.5px; line-height: 1.4; color: var(--et-brown-soft); text-decoration: none; padding: 6px 0; }
.et-catpanel__subs a:hover { color: var(--et-blue); }
@media (prefers-reduced-motion: reduce) {
  .et-catcard, .et-catcard__media img, .et-catpanel { transition: none; }
}

/* ==========================================================================
   FOCUS BANNERS  (Section 5 "На фокус", row 1) — Phoenix image-swap.
   Two faces crossfade on interval / hover (assets/js/banner-swap.js). Faces
   are gradient layers until real monthly-offer photos are dropped in.
   ========================================================================== */
.et-focus-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.et-focus-banner { position: relative; border-radius: var(--et-r-lg); overflow: hidden; min-height: 210px; border: var(--et-hairline); }
.et-swap__face { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.et-swap__face.is-active { opacity: 1; }
.et-swap__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gradient placeholder faces (client replaces with <img> inside the face). */
.et-swap__face--a { background: linear-gradient(150deg, var(--et-blue-deep) 0%, var(--et-blue) 100%); }
.et-swap__face--b { background: linear-gradient(150deg, var(--et-dark-2) 0%, var(--et-blue-deep) 100%); }
.et-focus-banner__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,15,.08) 30%, rgba(21,20,15,.55) 100%); }
.et-focus-banner__body {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 210px; padding: 24px; color: var(--et-on-dark); text-decoration: none;
}
.et-focus-banner__title { font-family: var(--et-font-head); font-weight: 500; font-size: 24px; line-height: 1.14; margin: 8px 0 12px; color: var(--et-on-dark); }
.et-focus-banner__cta { font-family: var(--et-font-body); font-weight: 600; font-size: 13px; color: var(--et-blue-2); }
.et-focus-banner:hover .et-focus-banner__cta { color: var(--et-on-dark); }
@media (max-width: 768px) {
  .et-focus-banners { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .et-swap__face { transition: none; }
}

/* ==========================================================================
   REVIEWS  (Section 12 "Вашето мнение") — white cards on the olive band.
   Grey-Olive #8C8378 is too mid-toned for AA with light body text, so each
   review sits on a solid white card: graphite-on-white passes AA decisively.
   ========================================================================== */
.et-review {
  height: 100%; display: flex; flex-direction: column; gap: 12px;
  background: var(--et-white); border: var(--et-hairline); border-radius: var(--et-r-lg);
  padding: 26px 24px;
}
.et-review__stars { color: var(--et-saffron); letter-spacing: 2px; font-size: 14px; line-height: 1; }
.et-review__text { margin: 0; font-family: var(--et-font-head); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--et-graphite); }
.et-review__by { font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-muted); margin-top: auto; }

/* ==========================================================================
   BLOG MOSAIC  (Section 7 "От нашите записки") — 1 large + 3 small (Moon Juice).
   Image + title + 2–3 sentence excerpt per card; discreet hover-zoom images.
   ========================================================================== */
.et-blog-mosaic { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 22px; }
.et-blog-tile {
  display: flex; flex-direction: column; background: var(--et-white);
  border: var(--et-hairline); border-radius: var(--et-r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.et-blog-tile:hover { transform: translateY(-3px); box-shadow: var(--et-shadow-card); }
.et-blog-tile__media { display: block; overflow: hidden; background: var(--et-sand); aspect-ratio: 3 / 2; }
.et-blog-tile__media img,
.et-blog-tile__media .et-card__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.et-blog-tile:hover .et-blog-tile__media img { transform: scale(1.06); }
.et-blog-tile__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.et-blog-tile__cat { font-family: var(--et-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--et-blue); }
.et-blog-tile__title { font-family: var(--et-font-head); font-weight: 500; font-size: 20px; line-height: 1.22; color: var(--et-head); }
.et-blog-tile__excerpt { font-size: 14px; line-height: 1.6; color: var(--et-brown-soft); }

/* Feature (first) tile spans the full left column height; bigger image + title. */
.et-blog-feature { grid-row: 1 / span 3; }
.et-blog-feature .et-blog-tile__media { aspect-ratio: 16 / 11; }
.et-blog-feature .et-blog-tile__body { gap: 10px; padding: 24px 26px 28px; }
.et-blog-feature .et-blog-tile__title { font-size: 27px; }
.et-blog-feature .et-blog-tile__excerpt { font-size: 15px; }

.et-blog-mosaic__cta { display: flex; justify-content: center; margin-top: 34px; }

@media (max-width: 860px) {
  .et-blog-mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
  .et-blog-feature { grid-row: auto; }
  .et-blog-feature .et-blog-tile__media { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .et-blog-tile, .et-blog-tile__media img { transition: none; }
}

/* ==========================================================================
   MEGA-MENU PHOTOS + MANDALA  (Section 2 of the brief) — categories shown with
   photos (term thumbnail, icon fallback) on a light panel carrying a faint
   token-coloured mandala. Yale headings / Ocean active come from the base rules.
   ========================================================================== */
.et-mega { overflow: hidden; }
.et-mega__inner { position: relative; z-index: 1; }
.et-mega__mandala {
  position: absolute; top: 50%; right: -60px; transform: translateY(-50%);
  width: 380px; height: 380px; color: var(--et-blue-2); opacity: .10;
  pointer-events: none; z-index: 0;
}
.et-mega__mandala svg { width: 100%; height: 100%; display: block; }

/* Category list items become photo-forward (thumbnail + name). */
.et-mega__nav-thumb {
  width: 44px; height: 44px; flex: none; border-radius: var(--et-r-sm);
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  color: var(--et-blue-deep);
  background: radial-gradient(circle at 40% 30%, rgba(132,216,255,.30), rgba(244,194,26,.10)), var(--et-platinum);
}
.et-mega__nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-mega__nav-thumb svg { width: 22px; height: 22px; }
.et-mega__nav-link { gap: 12px; }
.et-mega__nav-link.is-active .et-mega__nav-thumb { box-shadow: 0 0 0 2px var(--et-blue); }

/* ==========================================================================
   HEADER BEHAVIOUR  (Aesop hide/reveal + ethereal-over-hero + dark/light bar).
   - Hide/reveal: sticky-header.js toggles .et-hidden on scroll-down / reveals
     on the smallest scroll-up. Transform transition, so it is smooth and never
     "jumps". Suppressed near the top and while a menu is open, and disabled
     entirely under prefers-reduced-motion (Law #3).
   - Scroll-bar colour: Customizer variant classes on the header decide dark
     (graphite) or light (snow); icons/links adapt so both stay readable.
   ========================================================================== */
.et-site-header { transition: transform .32s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; }
.et-site-header.et-hidden { transform: translateY(-100%); }

/* Ethereal veil so the light nav stays legible over the hero (home, not scrolled). */
.home .et-site-header:not(.et-scrolled)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,20,15,.30), rgba(21,20,15,0) 100%);
}

/* --- Scrolled bar: DARK (graphite) variant --- */
.et-header--scroll-dark.et-scrolled {
  background: var(--et-graphite);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.et-header--scroll-dark.et-scrolled .et-brand__name { color: var(--et-on-dark); }
/* `> li > a`: top-level links only — never reach into the mega panel (see the
   note by the .home/.et-header--transparent rules). This was the bug: a bare
   `.et-nav a` here (0,3,1) out-specified the panel's own colours and painted
   every category/subcategory link Snow-white on the white panel. */
.et-header--scroll-dark.et-scrolled .et-nav > li > a { color: var(--et-on-dark); }
.et-header--scroll-dark.et-scrolled .et-nav > li > a:hover,
.et-header--scroll-dark.et-scrolled .et-nav > li.current-menu-item > a { color: var(--et-blue-2); }
.et-header--scroll-dark.et-scrolled .et-utils a { color: var(--et-on-dark-2); }
.et-header--scroll-dark.et-scrolled .et-utils a:hover { color: var(--et-blue-2); }
.et-header--scroll-dark.et-scrolled .et-burger span { background: var(--et-on-dark); }

/* --- Scrolled bar: LIGHT (snow) variant --- */
.et-header--scroll-light.et-scrolled {
  background: var(--et-snow);
  border-bottom: var(--et-hairline);
}
.et-header--scroll-light.et-scrolled .et-brand__name { color: var(--et-graphite); }
.et-header--scroll-light.et-scrolled .et-nav > li > a { color: var(--et-ink-2); }
.et-header--scroll-light.et-scrolled .et-nav > li > a:hover,
.et-header--scroll-light.et-scrolled .et-nav > li.current-menu-item > a { color: var(--et-blue); }
.et-header--scroll-light.et-scrolled .et-utils a { color: var(--et-brown); }
.et-header--scroll-light.et-scrolled .et-utils a:hover { color: var(--et-blue); }
.et-header--scroll-light.et-scrolled .et-burger span { background: var(--et-graphite); }

@media (prefers-reduced-motion: reduce) {
  .et-site-header { transition: none; }
}

/* ==========================================================================
   IDEA / "Кои сме ние"  (Section 10) — reuses the cause sticky mechanics
   (.et-cause--sticky). Gradient placeholder media until the real photo lands.
   ========================================================================== */
.et-idea__ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--et-dark-2) 0%, var(--et-blue-deep) 58%, var(--et-dark) 100%);
}

/* ==========================================================================
   FINISHING TOUCHES  (6.1 pre-footer band · 6.2 product-card hover-zoom)
   ========================================================================== */
/* Dyson thin accent band before the footer — Ocean (leading blue). */
.et-prefooter-band { height: 5px; background: linear-gradient(90deg, var(--et-blue-deep), var(--et-blue) 50%, var(--et-blue-deep)); }

/* Discreet hover-zoom on product-card images (consistency with the blog cards). */
.et-card__media img { transition: transform .4s ease; }
.et-card:hover .et-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .et-card__media img { transition: none; }
}

/* ==========================================================================
   VIDEO BANNER  (Section 13 — structure only, video supplied later).
   16:9 container with a poster placeholder + lazy-load path (see front-page).
   ========================================================================== */
.et-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--et-r-lg); overflow: hidden; border: var(--et-hairline); }
.et-video__media,
.et-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.et-video__poster { background: linear-gradient(150deg, var(--et-dark-2) 0%, var(--et-blue-deep) 55%, var(--et-dark) 100%); }
.et-video__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,15,.15) 40%, rgba(21,20,15,.6) 100%); }
.et-video__caption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(20px, 4vw, 44px); color: var(--et-on-dark); }
.et-video__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(22px, 3.2vw, 38px); line-height: 1.12; margin: 10px 0 0; max-width: 620px; color: var(--et-on-dark); }
.et-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 66px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--et-on-dark); background: rgba(14,79,116,.55);
  border: 1px solid rgba(255,255,255,.5); padding-left: 4px;
}

/* ==========================================================================
   PHASE STATIC — "За нас" blocks 2–5, legal pages, footer disclaimer.
   Token-only (no new hardcode colours). Scoped to .et-about* / .et-legal* /
   .et-footer__disclaimer so no other template is affected.
   ========================================================================== */

/* ---- 2. Нашата история (image left + text right, Soft Linen) ---- */
.et-about-story { background: var(--et-linen); }
.et-about-split--media-first .et-about-split__media { order: 0; } /* media already first in DOM */

/* ---- 3. Каузата ни (full-bleed photo band + dark overlay) ---- */
.et-about-cause2 {
  position: relative; overflow: hidden; text-align: center; color: var(--et-on-dark);
  padding: clamp(72px, 12vh, 132px) var(--et-section-x);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.et-about-cause2--placeholder { background-image: linear-gradient(150deg, var(--et-blue-deep) 0%, var(--et-blue) 55%, var(--et-dark-2) 100%); }
.et-about-cause2__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,20,15,.42) 0%, rgba(21,20,15,.66) 100%); }
.et-about-cause2__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.et-about-cause2 .et-eyebrow { color: var(--et-blue-2); margin-bottom: 16px; }
.et-about-cause2__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; color: var(--et-on-dark); margin: 0 0 18px; }
.et-about-cause2__inner p { font-size: 16px; line-height: 1.8; color: var(--et-on-dark-2); margin: 0 auto; max-width: 600px; }
.et-about-cause2__inner p + p { margin-top: 1em; }

/* ---- 4. Ценностите ни (fairy-bullet values, Platinum) ---- */
.et-about-values__intro { font-size: 16px; line-height: 1.7; color: var(--et-brown-soft); margin: 14px auto 0; max-width: 620px; }
.et-about-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.et-about-value { background: var(--et-white); border: var(--et-hairline); border-radius: var(--et-r-lg); padding: 30px 30px 32px; }
.et-about-value__icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; line-height: 0; }
.et-fairy-icon { display: block; }
/* Bullet colour applied ONLY to the icon (currentColor), through tokens. */
.et-fairy--sky     { color: var(--et-sky); }
.et-fairy--olive   { color: var(--et-olive); }
.et-fairy--saffron { color: var(--et-saffron); }
.et-fairy--ocean   { color: var(--et-blue); }
.et-about-value__title { font-family: var(--et-font-head); font-weight: 500; font-size: 21px; color: var(--et-head); margin: 0 0 10px; }
.et-about-value__text { font-size: 14.5px; line-height: 1.7; color: var(--et-brown-soft); margin: 0; }

/* ---- 5. CTA (Soft Linen) — overrides the earlier white background ---- */
.et-about-cta { background: var(--et-linen); }

@media (max-width: 720px) {
  .et-about-values__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEGAL PAGES (template-legal.php) — readable document + sticky anchor TOC.
   Bright Snow surface · Yale headings · Jet Black body · State Grey meta.
   ========================================================================== */
.et-legal { background: var(--et-snow); }
.et-legal__wrap {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--et-section-x);
  display: grid; grid-template-columns: 240px minmax(0, 760px);
  gap: clamp(32px, 5vw, 60px); justify-content: center; align-items: start;
}
.et-legal--no-toc { grid-template-columns: minmax(0, 760px); }

/* TOC — sticky on desktop. */
.et-legal__toc { position: sticky; top: 108px; align-self: start; font-size: 13px; }
.et-legal__toc-title { font-family: var(--et-font-mono); text-transform: uppercase; letter-spacing: var(--et-eyebrow-tracking); font-size: var(--et-fs-eyebrow); color: var(--et-brown); margin-bottom: 12px; }
.et-legal__toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid rgba(43,49,60,.12); }
.et-legal__toc-list li { margin: 0; }
.et-legal__toc-list a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--et-brown-soft); text-decoration: none; line-height: 1.45; transition: color .2s ease, border-color .2s ease; }
.et-legal__toc-list a:hover,
.et-legal__toc-list a:focus-visible { color: var(--et-blue-deep); border-left-color: var(--et-blue); }

/* Document column. */
.et-legal__doc { max-width: 760px; }
.et-legal__head { margin-bottom: clamp(28px, 4vw, 40px); }
.et-legal__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; color: var(--et-head); margin: 0; }
.et-legal__updated { font-size: 13px; color: var(--et-brown); margin: 12px 0 0; }

.et-legal__body { color: var(--et-graphite); font-size: 16px; line-height: 1.75; }
.et-legal__body > *:first-child { margin-top: 0; }
.et-legal__body h2 {
  position: relative; font-family: var(--et-font-head); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: var(--et-head);
  margin: 2.2em 0 .7em; padding-bottom: .45em;
}
/* Thin Saffron rule under h2 — "жълтото само като светлина". */
.et-legal__body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--et-saffron); }
.et-legal__body h3 { font-family: var(--et-font-head); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--et-head); margin: 1.8em 0 .5em; }
.et-legal__body p { margin: 0 0 1.05em; }
.et-legal__body ul, .et-legal__body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.et-legal__body li { margin: 0 0 .5em; line-height: 1.7; }
.et-legal__body li::marker { color: var(--et-blue); }
.et-legal__body a { color: var(--et-blue); text-decoration: none; border-bottom: 1px solid rgba(8,138,199,.4); }
.et-legal__body a:hover,
.et-legal__body a:focus-visible { color: var(--et-blue-deep); border-bottom-color: var(--et-blue-deep); }
.et-legal__body strong { color: var(--et-graphite); font-weight: 600; }
.et-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 14.5px; }
.et-legal__body th, .et-legal__body td { text-align: left; padding: 10px 12px; border: 1px solid rgba(43,49,60,.14); vertical-align: top; }
.et-legal__body th { background: var(--et-platinum); color: var(--et-head); font-weight: 600; }

@media (max-width: 980px) {
  .et-legal__wrap { grid-template-columns: minmax(0, 760px); }
  .et-legal__toc { display: none; }
}

@media print {
  .et-site-header, .et-footer, .et-prefooter-band, .et-legal__toc { display: none !important; }
  .et-legal { background: var(--et-white); }
  .et-legal__wrap { grid-template-columns: 1fr; padding: 0; max-width: none; }
}

/* ==========================================================================
   FOOTER DISCLAIMER (medical/therapeutic disclaimer under the link columns) +
   CookieYes "Настройки на бисквитки" link. On-dark-3 (#A7B4C0) on the graphite
   footer measures ~6.2:1 → passes WCAG AA (muted but readable).
   ========================================================================== */
.et-footer__disclaimer { max-width: var(--et-content-max); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); text-align: center; }
/* 70ch keeps the measure readable when centred; auto margins hold it in the
   middle of the (wider) hairline rule above. max-width beats the ch cap on
   narrow phones, so mobile just fills the column — no overflow. */
.et-footer__disclaimer p { font-size: 11.5px; line-height: 1.75; color: var(--et-on-dark-3); max-width: 70ch; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; }
.et-footer__disclaimer p + p { margin-top: .8em; }

.et-footer__cky { display: block; margin-top: 2px; font-size: 12.5px; line-height: 2; color: var(--et-on-dark-3); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.et-footer__cky:hover,
.et-footer__cky:focus-visible { color: var(--et-blue-2); }

/* ==========================================================================
   КОНТАКТИ (template-contact.php) — narrow hero + 2-col (info · form) + band.
   Token-only. Scoped to .et-contact*; on mobile the form drops below the info.
   ========================================================================== */

/* Narrow hero — same blue-black (Yale) aesthetic as the About hero, shorter. */
.et-contact-hero {
  position: relative; overflow: hidden; min-height: 40vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(56px, 9vh, 104px) var(--et-section-x);
  background: linear-gradient(160deg, var(--et-dark-2) 0%, var(--et-blue-deep) 58%, var(--et-dark) 100%);
  color: var(--et-on-dark);
}
.et-contact-hero__inner { position: relative; z-index: 3; max-width: 640px; }
.et-contact-hero .et-eyebrow { color: var(--et-blue-2); margin-bottom: 16px; }
.et-contact-hero__title { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; color: var(--et-on-dark); margin: 0 0 16px; }
.et-contact-hero__lead { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: var(--et-on-dark-2); max-width: 520px; margin: 0 auto; }

/* Main — Platinum band so the Snow form card reads against it. */
.et-contact-main { background: var(--et-platinum); }
.et-contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.et-contact__h2 { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.12; color: var(--et-head); margin: 0 0 22px; }

/* Left — contact rows. */
.et-contact-list { list-style: none; margin: 0 0 var(--et-sp-7); padding: 0; display: grid; gap: 18px; }
.et-contact-item { display: flex; gap: 16px; align-items: flex-start; }
.et-contact-item__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--et-white); border: var(--et-hairline); }
.et-cico--ocean    { color: var(--et-blue); }
.et-cico--yale     { color: var(--et-blue-deep); }
.et-cico--shamrock { color: var(--et-shamrock); }
.et-contact-item__body { display: flex; flex-direction: column; gap: 3px; }
.et-contact-item__title { font-family: var(--et-font-mono); text-transform: uppercase; letter-spacing: var(--et-eyebrow-tracking); font-size: var(--et-fs-eyebrow); color: var(--et-brown); }
.et-contact-item__value { font-size: 15.5px; line-height: 1.6; color: var(--et-graphite); }
.et-contact-item__value a { color: var(--et-blue); text-decoration: none; border-bottom: 1px solid rgba(8,138,199,.4); }
.et-contact-item__value a:hover,
.et-contact-item__value a:focus-visible { color: var(--et-blue-deep); border-bottom-color: var(--et-blue-deep); }

.et-contact-social__label { font-family: var(--et-font-mono); text-transform: uppercase; letter-spacing: var(--et-eyebrow-tracking); font-size: var(--et-fs-eyebrow); color: var(--et-brown); margin-bottom: 12px; }
.et-contact-social .et-footer__social a { color: var(--et-head); border-color: rgba(14,79,116,.24); }
.et-contact-social .et-footer__social a:hover { color: var(--et-graphite); background: var(--et-blue-2); border-color: var(--et-blue-2); }

/* Right — form card on Bright Snow. */
.et-contact-form-card { background: var(--et-snow); border: var(--et-hairline); border-radius: var(--et-r-lg); box-shadow: var(--et-shadow-card); padding: clamp(26px, 3vw, 40px); }
.et-contact-form-fallback { color: var(--et-brown-soft); }
.et-contact-form-fallback p { margin: 0 0 .8em; font-size: 15px; line-height: 1.7; }
.et-contact-form-fallback__alt { color: var(--et-brown); }
.et-contact-form-fallback a { color: var(--et-blue); text-decoration: none; border-bottom: 1px solid rgba(8,138,199,.4); }
.et-contact-form-fallback a:hover { color: var(--et-blue-deep); border-bottom-color: var(--et-blue-deep); }

/* Closing band — Soft Linen. */
.et-contact-band { background: var(--et-linen); text-align: center; }
.et-contact-band__inner { max-width: 640px; margin: 0 auto; }
.et-contact-band p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--et-brown-soft); }
.et-contact-band a { color: var(--et-blue); text-decoration: none; border-bottom: 1px solid rgba(8,138,199,.4); }
.et-contact-band a:hover,
.et-contact-band a:focus-visible { color: var(--et-blue-deep); border-bottom-color: var(--et-blue-deep); }

@media (max-width: 860px) {
  /* Stack: contact info first, form below (DOM order already info → form). */
  .et-contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AUTHORS (терапевти) — Section 7 "Нашите автори", author box (single post),
   author page hero + grid. Blue "flower of life" sphere placeholder when a
   profile has no uploaded photo (NEVER gravatar). :root tokens only.
   ========================================================================== */

/* Shared branded placeholder: radial blue sphere + flower motif, fills its
   (circular or card) frame like an image. Same visual language as .et-catcard__ph. */
.et-author-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--et-blue-deep);
  background: radial-gradient(circle at 42% 34%, var(--et-blue-soft), var(--et-platinum) 82%);
}
.et-author-ph__flower { width: 72%; height: 72%; opacity: .5; }

/* ---- Section 7: "Нашите автори" (front page) ---- */
.et-authors-row {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 940px; margin: 0 auto;
}
/* 1–4 authors: keep the row centred and evenly sized rather than stretched.
   Without a --1 cap a lone card would span 940px and its 4:5 media would blow up
   to ~1173px tall — so pin it to a single compact column. */
.et-authors-row--1 { max-width: 300px; }
.et-authors-row--2 { max-width: 560px; }
.et-authors-row--3 { max-width: 780px; }
.et-authors-row--4 { max-width: 940px; }

.et-author-card {
  display: flex; flex-direction: column; background: var(--et-white);
  border: var(--et-hairline); border-radius: var(--et-r-lg); overflow: hidden;
  text-decoration: none; color: inherit; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.et-author-card:hover { transform: translateY(-3px); box-shadow: var(--et-shadow-card); }
.et-author-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--et-sand); }
.et-author-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.et-author-card:hover .et-author-card__media img { transform: scale(1.05); }
.et-author-card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 20px; }
.et-author-card__name { font-family: var(--et-font-head); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--et-head); }
.et-author-card__specialty { font-family: var(--et-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-blue); }

/* Authors carousel (5+): reuse the shared mechanism, 4-up like products. */
.et-carousel--authors { --et-cols: 4; }
.et-carousel--authors .et-carousel__slide { display: flex; }
.et-carousel--authors .et-carousel__slide > * { width: 100%; }

@media (max-width: 768px) {
  .et-carousel--authors { --et-cols: 2; }
}
@media (max-width: 480px) {
  .et-authors-row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  /* A single author stays one column and never wider than ~80vw. */
  .et-authors-row--1 { grid-template-columns: 1fr; max-width: 80vw; }
  .et-carousel--authors { --et-cols: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .et-author-card, .et-author-card__media img { transition: none; }
}

/* ---- Author box under a single post ---- */
.et-authorbox {
  display: flex; gap: 22px; align-items: flex-start; margin-top: var(--et-sp-7);
  padding: 26px; background: var(--et-white);
  border: var(--et-hairline); border-radius: var(--et-r-lg);
}
.et-authorbox__avatar {
  position: relative; flex: 0 0 84px; width: 84px; height: 84px;
  border-radius: 50%; overflow: hidden; background: var(--et-sand);
}
.et-authorbox__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-authorbox__body { flex: 1 1 auto; min-width: 0; }
.et-authorbox__eyebrow { font-family: var(--et-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--et-muted); }
.et-authorbox__name { font-family: var(--et-font-head); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 4px 0 0; }
.et-authorbox__name a { color: var(--et-head); text-decoration: none; }
.et-authorbox__name a:hover { color: var(--et-gold); }
.et-authorbox__specialty { font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-blue); margin-top: 4px; }
.et-authorbox__bio { font-size: 14.5px; line-height: 1.65; color: var(--et-brown-soft); margin: 12px 0 0; }
.et-authorbox__more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 13px; color: var(--et-gold); text-decoration: none; }
.et-authorbox__more:hover { color: var(--et-brown); }

@media (max-width: 560px) {
  .et-authorbox { flex-direction: column; gap: 16px; align-items: center; text-align: center; padding: 22px; }
}

/* ---- Author page ---- */
.et-author-hero { padding: var(--et-sp-8) 0 var(--et-sp-6); }
.et-author-hero__inner { display: flex; gap: 34px; align-items: center; }
.et-author-hero__avatar {
  position: relative; flex: 0 0 128px; width: 128px; height: 128px;
  border-radius: 50%; overflow: hidden; background: var(--et-sand);
  border: 1px solid var(--et-line);
}
.et-author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-author-hero__body { flex: 1 1 auto; min-width: 0; }
.et-author-hero__name { font-family: var(--et-font-head); font-weight: 500; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; color: var(--et-head); margin: 6px 0 0; }
.et-author-hero__bio { font-size: 15.5px; line-height: 1.7; color: var(--et-brown-soft); max-width: 620px; margin: 14px 0 0; }
.et-author-hero__social { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 13.5px; color: var(--et-blue); text-decoration: none; }
.et-author-hero__social:hover { color: var(--et-blue-deep); }

@media (max-width: 640px) {
  .et-author-hero__inner { flex-direction: column; text-align: center; gap: 22px; }
  .et-author-hero__avatar { flex-basis: 108px; width: 108px; height: 108px; }
  .et-author-hero__bio { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   WISHLIST ("Любими") — custom, theme-native (no plugin). Heart toggle on
   product cards + PDP, header counter (filled by JS), and the /lyubimi/ page.
   Line-outline heart that FILLS (Flag Red — the brand "favourite" accent) when
   active. :root tokens only. See inc/wishlist.php + assets/js/wishlist.js.
   ========================================================================== */

/* ---- Heart toggle button ---- */
.et-wish {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.86); border: var(--et-hairline); border-radius: 50%;
  color: var(--et-brown); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.et-wish:hover { color: var(--et-red); box-shadow: var(--et-shadow-card); }
.et-wish:focus-visible { outline: 2px solid var(--et-blue); outline-offset: 2px; }
.et-wish svg { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill .15s ease, stroke .15s ease; }
.et-wish.is-active { color: var(--et-red); }
.et-wish.is-active svg { fill: var(--et-red); stroke: var(--et-red); }
/* Light "pop" when toggled (JS adds .et-wish--pop for one cycle). */
@keyframes et-wish-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.et-wish--pop { animation: et-wish-pop .32s ease; }
@media (prefers-reduced-motion: reduce) {
  .et-wish, .et-wish svg { transition: none; }
  .et-wish--pop { animation: none; }
}

/* Home-carousel / focus product cards: div card gets the same hover lift the
   anchor cards had (scoped modifier so archive loop cards are untouched). */
.et-card--home { cursor: default; }
.et-card--home:hover { transform: translateY(-2px); box-shadow: var(--et-shadow-card); }
.et-card__media-link { display: block; width: 100%; height: 100%; }

/* ---- PDP heart, next to add-to-cart ---- */
.et-wish--pdp {
  position: static; width: 48px; height: 48px; margin-left: 12px; vertical-align: middle;
  background: var(--et-white); border: 1.5px solid var(--et-btn-line-strong); color: var(--et-btn-line-strong);
}
.et-wish--pdp svg { width: 22px; height: 22px; }
.et-wish--pdp:hover { color: var(--et-red); border-color: var(--et-red); }
.et-wish--pdp.is-active { color: var(--et-red); border-color: var(--et-red); }

/* ---- Header wishlist link + JS-filled counter ---- */
.et-wish-nav { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.et-wish-nav__icon { display: inline-flex; }
.et-wish-nav__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; display: block; }
.et-wish-nav__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 4px; font-family: var(--et-font-mono); font-size: 10.5px; font-weight: 600; line-height: 1;
  color: var(--et-on-gold); background: var(--et-red); border-radius: var(--et-r-pill);
}
.et-wish-nav__count[hidden] { display: none; }

/* ---- /lyubimi/ page ---- */
.et-wishlist-page { padding: var(--et-sp-8) 0 var(--et-sp-9); }
.et-wishlist__loading { font-size: 15px; color: var(--et-brown); }
.et-wishlist-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 26px;
}
.et-card--wish { position: relative; }
.et-card--wish .et-card__media { aspect-ratio: 4 / 5; }
/* Rounded SQUARE (same corner token as the product cards, --et-r-lg) — NOT a
   circle. Bright Snow fill + soft shadow, Jet Black ✕; hover tints to Pale Sky
   with a light scale. Kept separate from the heart .et-wish so those are untouched. */
.et-wish-remove {
  position: absolute; top: 10px; right: 10px; z-index: 3; cursor: pointer;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--et-graphite);
  background: var(--et-snow); border: var(--et-hairline); border-radius: var(--et-r-lg);
  box-shadow: var(--et-shadow-card);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.et-wish-remove:hover { color: var(--et-graphite); background: var(--et-sky); transform: scale(1.06); }
.et-wish-remove:focus-visible { outline: 2px solid var(--et-blue); outline-offset: 2px; }

/* Empty state — branded card in the section language. */
.et-wishlist__empty {
  text-align: center; max-width: 460px; margin: var(--et-sp-6) auto 0;
  padding: clamp(32px, 5vw, 56px) 28px; background: var(--et-white);
  border: var(--et-hairline); border-radius: var(--et-r-lg);
}
.et-wishlist__empty-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%;
  color: var(--et-blue-deep);
  background: radial-gradient(circle at 42% 34%, var(--et-blue-soft), var(--et-platinum) 82%);
}
.et-wishlist__empty-mark svg { width: 34px; height: 34px; }
.et-wishlist__empty-title { font-family: var(--et-font-head); font-weight: 500; font-size: 24px; color: var(--et-head); margin: 0 0 10px; }
.et-wishlist__empty-text { font-size: 15px; line-height: 1.7; color: var(--et-brown-soft); margin: 0 0 22px; }

@media (max-width: 480px) {
  .et-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ==========================================================================
   "LOST" BLOCK (template-parts/lost.php) — the airy dead-end panel shared by the
   empty search state (search.php) and the 404 page (404.php). Reuses the
   flower-of-life placeholder visual + the CSS-only .et-fx-glow (no new JS), the
   Phase-1 buttons and category pills. :root tokens only.
   SEARCH RESULTS otherwise reuse the archive banner, the shop product grid
   (.et-archive__results ul.products) and the blog tiles/grid — no styling here.
   ========================================================================== */
.et-lost-sec { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.et-lost { position: relative; text-align: center; max-width: 620px; margin: 0 auto; }

/* Soft hero glow behind the placeholder mark (CSS-only, reused .et-fx-glow). */
.et-fx-glow--lost { top: -10px; left: 50%; transform: translateX(-50%); width: 340px; height: 260px; opacity: .7; }

/* Flower-of-life placeholder visual — the same blue sphere used elsewhere, larger. */
.et-lost__mark {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(96px, 16vw, 120px); height: clamp(96px, 16vw, 120px); margin-bottom: 22px;
  border-radius: 50%; color: var(--et-blue-deep);
  background: radial-gradient(circle at 42% 34%, var(--et-blue-soft), var(--et-platinum) 82%);
}
.et-lost__mark svg { width: 56%; height: 56%; aspect-ratio: 1 / 1; opacity: .55; }

.et-lost__title { position: relative; z-index: 1; font-family: var(--et-font-head); font-weight: 500; font-size: clamp(30px, 5vw, var(--et-fs-h1)); line-height: 1.08; letter-spacing: -.01em; color: var(--et-head); margin: 0 0 14px; }
.et-lost__text { font-size: 16px; line-height: 1.7; color: var(--et-brown-soft); max-width: 460px; margin: 0 auto 26px; }

.et-lost__form { display: flex; justify-content: center; margin: 0 auto 24px; }
.et-lost__form .search-form { width: 100%; max-width: 480px; }

.et-lost__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.et-lost__cats { margin-top: 30px; }
.et-lost__cats-label { display: block; font-family: var(--et-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--et-muted); margin-bottom: 14px; }
.et-lost__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.et-lost__pill {
  font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: var(--et-r-pill);
  color: var(--et-blue-deep); text-decoration: none;
  border: 1px solid var(--et-btn-line); background: var(--et-white);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.et-lost__pill:hover { background: var(--et-btn-fill); color: var(--et-btn-on-fill); border-color: var(--et-btn-fill); }

@media (max-width: 480px) {
  /* Field + buttons full width, no horizontal scroll. */
  .et-lost__form .search-form { max-width: 100%; }
  .et-lost__actions { flex-direction: column; }
  .et-lost__actions .et-btn { width: 100%; }
}

/* ==========================================================================
   HEADER SEARCH — magnifier sized to match the wishlist heart (~21px) and the
   popover field it opens (assets/js/header-search.js). Colours mirror the other
   .et-utils items across the transparent / scrolled header states. Mobile: the
   drawer carries a full-width search form instead.
   ========================================================================== */
.et-search-nav { position: relative; display: inline-flex; align-items: center; }
.et-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; background: none; border: none;
  cursor: pointer; color: var(--et-brown); transition: color .15s ease;
}
.et-search-toggle svg { width: 21px; height: 21px; display: block; }
/* Match the neighbouring utils links across header states. */
.et-utils .et-search-toggle:hover { color: var(--et-gold); }
.home .et-utils .et-search-toggle,
.et-header--transparent .et-utils .et-search-toggle { color: var(--et-on-dark-2); }
.et-header--scroll-dark.et-scrolled .et-utils .et-search-toggle { color: var(--et-on-dark-2); }
.et-header--scroll-dark.et-scrolled .et-utils .et-search-toggle:hover { color: var(--et-blue-2); }
.et-header--scroll-light.et-scrolled .et-utils .et-search-toggle { color: var(--et-brown); }
.et-header--scroll-light.et-scrolled .et-utils .et-search-toggle:hover { color: var(--et-blue); }

/* ==========================================================================
   HEADER PHONE — icon + dropdown with both numbers.
   The icon inherits the .et-utils a colour rules (incl. the per-state ones
   above), so it stays visible over the hero and on both scrolled bars.
   ========================================================================== */
.et-phone { position: relative; display: inline-flex; align-items: center; }
.et-phone__toggle { display: inline-flex; align-items: center; }
.et-phone__toggle svg { width: 20px; height: 20px; display: block; }

/* Solid panel under the icon; right-aligned so it can never leave the viewport
   (the icon group already sits at the right edge). */
.et-phone__pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 152px; padding: 8px;
  background: var(--et-white); border: var(--et-hairline);
  border-radius: var(--et-r-md); box-shadow: var(--et-shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* Hiding is delayed — the grace period that makes the panel reachable. */
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  transition-delay: .25s;
}
/* Invisible bridge across the gap: without it the pointer leaves .et-phone on
   the way down and the panel closes mid-travel. */
.et-phone__pop::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.et-phone:hover .et-phone__pop,
.et-phone:focus-within .et-phone__pop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

/* The numbers live inside .et-utils, so `.et-header--scroll-dark.et-scrolled
   .et-utils a` (0,3,1) would paint them light — invisible on this white panel
   (the same bleed that broke the mega panel). This selector is (0,4,0) and sits
   after those rules, so the panel keeps its own readable colours in every
   header state. */
.et-utils .et-phone .et-phone__pop .et-phone__num {
  color: var(--et-ink-2); font-size: 13px; font-weight: 600;
  padding: 6px 8px; border-radius: var(--et-r-sm); text-decoration: none;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.et-utils .et-phone .et-phone__pop .et-phone__num:hover,
.et-utils .et-phone .et-phone__pop .et-phone__num:focus-visible {
  color: var(--et-blue); background: var(--et-platinum);
}

@media (prefers-reduced-motion: reduce) {
  .et-phone__pop { transition: none; transition-delay: 0s; }
}

/* Mobile: no hover exists, and the icon is itself a tel: link to the first
   number — a tap dials immediately. Kill the panel outright, or :focus-within
   would pop it open on that same tap. This must sit AFTER the rule that gives
   .et-phone__pop its display, hence here and not in the 768px block above. */
@media (max-width: 768px) {
  .et-phone__pop { display: none; }
}

/* Dropdown field — right-aligned under the header. */
.et-search-pop {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 40;
  background: var(--et-white); border: var(--et-hairline); border-radius: var(--et-r-md);
  box-shadow: var(--et-shadow-card); padding: 10px;
}
.et-search-pop[hidden] { display: none; }
.et-search-pop__form { display: flex; gap: 8px; align-items: center; }
.et-search-pop__field {
  width: 320px; max-width: 60vw; font-family: var(--et-font-body); font-size: var(--et-fs-body);
  color: var(--et-graphite); background: var(--et-white);
  padding: 12px 16px; border: 1px solid rgba(31,29,27,.2); border-radius: var(--et-r-pill); outline: none;
}
.et-search-pop__field:focus { border-color: var(--et-btn-line-strong); }
.et-search-pop__submit {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--et-btn-on-fill); background: var(--et-btn-fill);
  border: 1.5px solid var(--et-btn-fill); border-radius: var(--et-r-pill);
  transition: background .18s ease, border-color .18s ease;
}
.et-search-pop__submit svg { width: 20px; height: 20px; display: block; }
.et-search-pop__submit:hover { background: var(--et-blue); border-color: var(--et-blue); }

/* Mobile drawer: full-width search form (replaces the old text link). */
.et-drawer__search { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 6px 2px 0; }
.et-drawer__search input {
  flex: 1 1 auto; width: 100%; min-width: 0; font-family: var(--et-font-body); font-size: var(--et-fs-body);
  color: var(--et-graphite); background: var(--et-white);
  padding: 12px 16px; border: 1px solid rgba(31,29,27,.2); border-radius: var(--et-r-pill); outline: none;
}
.et-drawer__search input:focus { border-color: var(--et-btn-line-strong); }
.et-drawer__search button {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  color: var(--et-btn-on-fill); background: var(--et-btn-fill);
  border: none; border-radius: var(--et-r-pill);
}
.et-drawer__search button svg { width: 20px; height: 20px; display: block; }