/* ============================================================
   Enotale — corporate portal (enotale.com)
   Editorial / corporate layer over the platform design system.
   Every colour, space and type value references a token from
   design-system/tokens.css. Documented exceptions: the 1px hairline,
   pixel breakpoints in @media, and three layout constants (shell
   width, media column floor, card floor), marked inline.
   ============================================================ */

:root {
  --shell-max: 1280px;                   /* layout geometry */
  --shell-gutter: clamp(var(--spacing-5), 4vw, var(--spacing-12));
  --hairline: 1px;
  --rule-color: var(--color-border-default);

  /* Section rhythm. Deliberately tighter than editorial-* — the page
     reads as one argument, not as five posters stacked on each other. */
  --section-pad: var(--spacing-14);
  --section-head-gap: var(--spacing-8);
}

body {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-ui-light);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow-x: hidden;
}

/* `hidden` must win. Several components below set an explicit `display`
   (inline-flex on the status labels and the compact store element, grid
   on the media frames), and an explicit display beats the UA rule for
   [hidden] — which is how all three store states ended up on screen at
   once. store-state.js, corporate.js and age-gate.js all toggle the
   attribute, so this one line is what makes them work. */
[hidden] { display: none !important; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
}

.visually-hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  margin: calc(var(--hairline) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--spacing-4);
  top: calc(var(--spacing-4) * -8);
  z-index: var(--z-modal);
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  transition: top var(--duration-fast) var(--easing-standard);
}
.skip:focus { top: var(--spacing-4); }

:where(a, button, input, summary):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------------------
   BUTTONS — the page needs real calls to action, not only
   hairline text links.
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--button-min-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: var(--hairline) solid var(--button-primary-bg);
  border-radius: var(--button-radius);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--button-transition-duration) var(--button-transition-easing),
              border-color var(--button-transition-duration) var(--button-transition-easing);
}
.btn:hover {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
}

.btn--secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}
.btn--secondary:hover {
  background: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
}









/* Quiet inline link, used inside cards and body copy */
.textlink {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-2);
  color: var(--color-accent-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  padding-bottom: var(--spacing-1);
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
  transition: border-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.textlink:hover {
  color: var(--color-accent-primary-hover);
  border-bottom-color: var(--color-accent-primary);
}
.textlink__arrow { transition: transform var(--duration-fast) var(--easing-standard); }
.textlink:hover .textlink__arrow { transform: translateX(var(--spacing-1)); }

/* ------------------------------------------------------------
   TOP BAR — slim, with a standing call to action.
   ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background: color-mix(in srgb, var(--color-surface-primary) 94%, transparent);
  backdrop-filter: blur(var(--spacing-2));
  border-bottom: var(--hairline) solid var(--rule-color);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  min-height: var(--nav-height-mobile);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-right: auto;
  text-decoration: none;
  color: inherit;
}

.topbar__logo { display: block; width: auto; height: var(--spacing-8); }



.topbar__nav { display: none; }

.topbar__nav ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__nav a {
  position: relative;
  display: inline-block;
  padding-block: var(--spacing-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--hairline);
  background: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--easing-standard);
}
.topbar__nav a:hover { color: var(--color-text-primary); }
.topbar__nav a:hover::after { transform: scaleX(1); }



/* Language switcher — languages, never flags. Never auto-redirects. */
.langswitch {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.langswitch li + li::before {
  content: "";
  display: inline-block;
  width: var(--hairline);
  height: var(--font-size-small);
  margin-right: var(--spacing-3);
  background: var(--rule-color);
  vertical-align: middle;
}

.langswitch a {
  display: inline-block;
  padding-block: var(--spacing-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.langswitch a:hover { color: var(--color-text-primary); }
.langswitch a[aria-current="true"] {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: var(--spacing-1);
  text-decoration-color: var(--color-accent-gold);
}


/* ------------------------------------------------------------
   SECTION PRIMITIVES
   Headlines run wide — they are the loudest thing on the page and
   must not wrap at half column width.
   ------------------------------------------------------------ */

.section { padding-block: var(--section-pad); }
.section + .section { border-top: var(--hairline) solid var(--rule-color); }
.section--alt { background: var(--color-surface-alt); }




.h2 {
  margin: 0 0 var(--spacing-5);
  max-width: 38ch;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: pretty;
}

/* Lets a headline run the full content width instead of the reading-measure
   cap. For the short, wide ones that are meant to be read as one line. */
.h2--full { max-width: none; }

.h3 {
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-tight);
}

.lead {
  margin: 0;
  max-width: 68ch;
  font-size: var(--font-size-body);
  line-height: var(--line-height-editorial);
  color: var(--color-text-muted);
}

.prose p {
  margin: 0 0 var(--spacing-4);
  max-width: 70ch;
  line-height: var(--line-height-editorial);
}
.prose p:last-child { margin-bottom: 0; }

.section__head { margin-bottom: var(--section-head-gap); }



/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

/* The hero and the markets block read as one opening spread, so the seam
   between them is deliberately much tighter than the rest of the rhythm. */
.hero { padding-block: var(--spacing-12) var(--spacing-5); }
.hero + .section { padding-top: var(--spacing-8); }

.hero__grid { display: grid; gap: var(--spacing-10); align-items: center; }



.hero__headline {
  margin: 0 0 var(--spacing-5);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: balance;
}

.hero__lead {
  margin: 0 0 var(--spacing-6);
  max-width: 52ch;
  line-height: var(--line-height-editorial);
  color: var(--color-text-muted);
}






.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-sunk);
  border: var(--hairline) solid var(--rule-color);
}






/* ---- BG hero: launch badge + linked store banner --------------------
   The Bulgarian market is trading, so its hero says so and sends people
   to the store instead of running the ambient film. ------------------- */






/* The banner is already 4:3, so the box matches it at every width and
   nothing is cropped. */







/* The ring is drawn on the frame, not the link: the frame clips its
   children, so a ring on the link itself would be cut off. */





/* ------------------------------------------------------------
   MARKETS — the component grows by adding one <li>.
   ------------------------------------------------------------ */













.market__status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  align-self: flex-start;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--radius-badge);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-letter-spacing);
  text-transform: uppercase;
}
.market__status--open {
  background: var(--color-status-pill-published-bg);
  color: var(--color-status-pill-published-fg);
}
.market__status--soon {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
}

.market__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-regular);
  line-height: var(--line-height-tight);
}

.market__note {
  margin: 0;
  flex: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-editorial);
}

.market__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: var(--hairline) solid var(--rule-color);
}

.market__domain {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-wide);
}

/* ------------------------------------------------------------
   MODEL — what the company actually does. Head left, points right.
   ------------------------------------------------------------ */

.model__grid { display: grid; gap: var(--spacing-8); }

.model__points { display: grid; gap: var(--spacing-6); margin: 0; padding: 0; list-style: none; }

.model__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-3) var(--spacing-5);
  padding-top: var(--spacing-5);
  border-top: var(--hairline) solid var(--rule-color);
}



.model__item h3 { margin: 0; }
/* :not() keeps this off .model__num, which is also a <p> in this block */
.model__item p:not(.model__num) {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-editorial);
}

/* ------------------------------------------------------------
   PARTNER PATHS — the page's main conversion block. Cards with
   photography, not a list of links at the bottom of the page.
   ------------------------------------------------------------ */










.path__label {
  color: var(--color-accent-primary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}







/* ------------------------------------------------------------
   STORY
   ------------------------------------------------------------ */








.pullquote {
  margin: var(--spacing-6) 0;
  padding-left: var(--spacing-5);
  border-left: var(--spacing-1) solid var(--color-accent-gold);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-light);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------
   CLOSING CALL TO ACTION — the one dark surface on the page.
   ------------------------------------------------------------ */













/* ------------------------------------------------------------
   FOOTER — column count is not fixed; the social list wraps.
   ------------------------------------------------------------ */

.footer {
  padding-block: var(--spacing-12) var(--spacing-8);
  background: var(--color-surface-alt);
  border-top: var(--hairline) solid var(--rule-color);
}

.footer__grid { display: grid; gap: var(--spacing-8); }

.footer__brandline {
  margin: var(--spacing-3) 0 0;
  max-width: 38ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.footer__mail {
  display: inline-block;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-1);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--color-accent-gold);
}
.footer__mail:hover { color: var(--color-accent-primary); }

.footer__coltitle {
  margin: 0 0 var(--spacing-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}
.footer__coltitle--spaced { margin-top: var(--spacing-6); }

.footer__list { display: grid; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; }

/* "Пазари" and the inactive language are plain text, not links, so they
   inherited the body size and set noticeably larger and heavier than the
   linked columns beside them. The row carries the type; the anchor only
   adds the touch target and the hover. */
.footer__list li {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

.footer__list a {
  display: inline-block;
  padding-block: var(--spacing-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.footer__list a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: var(--spacing-1);
}

.footer__social { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin: 0; padding: 0; list-style: none; }

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-min-height);
  height: var(--button-min-height);
  color: var(--color-text-muted);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}
.footer__social a:hover { color: var(--color-accent-primary); border-color: var(--color-border-strong); }
.footer__social svg { width: var(--spacing-5); height: var(--spacing-5); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3) var(--spacing-6);
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-5);
  border-top: var(--hairline) solid var(--rule-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
}
.footer__legal p { margin: 0; }

.footer__age { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.footer__age b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-6);
  height: var(--spacing-6);
  padding-inline: var(--spacing-1);
  border: var(--hairline) solid var(--color-text-muted);
  border-radius: var(--radius-full);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-medium);
}

/* ------------------------------------------------------------
   BREAKPOINTS
   ------------------------------------------------------------ */

@media (min-width: 641px) {
  .topbar__inner { min-height: var(--nav-height); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  :root { --section-pad: var(--spacing-16); --section-head-gap: var(--spacing-10); }
  .topbar__nav { display: block; }
  .hero { padding-block: var(--spacing-14) var(--spacing-6); }
  .hero + .section { padding-top: var(--spacing-10); }
  /* 5/12 text, 7/12 media (design note §3.2) */
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-12); }
  .hero__media { aspect-ratio: 4 / 3; }
  /* The head is much shorter than the list beside it; left at the top it
     read as if it had been pushed up. Centred, the two columns balance.
     The list is the taller item, so it still sets the row height. */
  .model__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--spacing-12);
    align-items: center;
  }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--spacing-8); }
}

/* ------------------------------------------------------------
   MOTION / PRINT
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .textlink__arrow { transition: none; }
  .topbar { transition: none; }
}

@media print {
  .topbar, .gate { display: none; }
  body { background: var(--color-white); }
}

/* ============================================================
   NEXT VERSION — design note of 17.09.2026
   Structural, not cosmetic. One register (editorial, not product
   landing), people in frame, no rhythm-of-three, the BG store as the
   first clear action. Everything below references tokens; the only
   raw values are the 1px hairline and the pixel breakpoints, both
   documented at the top of this file.
   ============================================================ */

:root {
  /* Minimum touch target. Same 44px the buttons already stand on, named
     here so the quiet links in the header and footer can reach it too —
     the switcher used to be ~36px and the footer links ~29px (§6). */
  --tap-min: var(--button-min-height);
}

/* ------------------------------------------------------------
   HEADER — one action, never three
   Mobile order: logo · БГ магазин · EN|BG. The anchors drop, there
   is no menu, and the store action does not disappear under 641px.
   ------------------------------------------------------------ */

.topbar { transition: background var(--duration-base) var(--easing-standard); }
.topbar__inner { max-height: var(--nav-height-mobile); }       /* ≤56px on mobile (§3.1) */
.topbar.is-compact .topbar__inner { min-height: var(--spacing-12); }

.topbar__storebg { order: 1; }
.topbar__langwrap { order: 2; display: flex; align-items: center; }

/* The horizontal lockup (§6): ONE file, seal and set word together, in the
   header and in the footer (Design Director, 02.10.2026). One file per
   theme — burgundy on the light page, gold on the dark one; CSS picks it,
   like the hero frames, so the toggle and not only the OS decides.
   The files carry transparent margin round the mark (~13% of the height
   on the left), so the negative inline margin puts the seal back on the
   shell edge. The seal alone stays reserved for the 18+ card. */
.topbar__logo {
  height: var(--spacing-14);
  width: auto;
  margin-inline-start: calc(var(--spacing-2) * -1);
}
.brand-logo--on-dark { display: none; }
[data-theme="dark"] .brand-logo--on-light { display: none; }
[data-theme="dark"] .brand-logo--on-dark { display: block; }

/* Every interactive thing in the chrome reaches 44x44 (§6). The short
   EN / BG labels are two characters wide, so they need the minimum on
   the horizontal axis too, not only the vertical one. */
.langswitch a,
.langswitch__pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-block: 0;
}

.topbar__brand { min-height: var(--tap-min); }

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: 0;
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* The legal row at the very bottom — links there were ~29px. */
.footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* English is a slot, not a link: the copy for / is not written yet (§8). */
.langswitch__pending {
  color: var(--color-text-subtle);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
  cursor: default;
}

/* ------------------------------------------------------------
   БГ МАГАЗИН — one component, three states, six places (§3.0)
   Compact form is exactly ONE element. Never a status chip and a
   button carrying the same words side by side.
   ------------------------------------------------------------ */

.storebg-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--tap-min);
  padding: var(--spacing-2) var(--spacing-4);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-ui-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--easing-standard);
}
a.storebg-compact:hover { border-color: var(--color-border-strong); }

.storebg-compact__dot {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-gold);
}
/* Success green only once the shop actually trades. Before that the
   indicator is neutral — it must not read as "open" (§3.0). */
[data-store-state="live"] .storebg-compact__dot { background: var(--color-status-success); }
[data-store-state="noaddress"] .storebg-compact__dot { background: var(--color-text-subtle); }

.storebg-full {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
}
.storebg-full .btn { margin-top: var(--spacing-1); }

.storebg-full__domain {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-wide);
}

/* The reserve state: a label, not a button, and no domain. */
.market__status--neutral {
  background: transparent;
  border: var(--hairline) solid var(--rule-color);
  color: var(--color-text-muted);
}

.hero__secondary { margin: var(--spacing-5) 0 0; }

/* ------------------------------------------------------------
   MEDIA FRAMES
   Every media slot is a fixed box so nothing reflows while an image
   is still provisional. `.mock-frame` is the empty frame with the
   description of the shot we are looking for — it ships only where no
   compliant photograph exists yet (§5).
   ------------------------------------------------------------ */

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-sunk);
  border-radius: var(--radius-card);       /* same corners as the landing page */
}
.media-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mock-frame {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--spacing-6);
  background: var(--color-surface-sunk);
  border: var(--hairline) dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  color: var(--color-text-muted);
  text-align: center;
}
.mock-frame__inner { max-width: 30ch; }
.mock-frame__inner svg {
  display: block;
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin: 0 auto var(--spacing-3);
  stroke: var(--color-text-subtle);
}
.mock-frame__tag {
  display: block;
  margin-bottom: var(--spacing-2);
  /* Walnut, not Oak: at 12px uppercase, Oak lands at 3.1-3.9:1 on the
     three surfaces this label sits on and fails WCAG 1.4.3. */
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}
.mock-frame__label {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

/* ------------------------------------------------------------
   КАКВО ПРАВИМ — the count comes from the content, not from a
   01/02/03 template. The section must survive two items and four.
   ------------------------------------------------------------ */

.what__points { display: grid; gap: var(--spacing-5); margin: 0; padding: 0; list-style: none; }

/* The numeral column and the rule above each item come back from the
   previous direction (Design Director, 24.09.2026 — the page read as
   unfinished without them). The count still comes from the content, not
   from a fixed 01/02/03 template: the numerals are generated, so two
   items or four number themselves correctly.

   Note against §3.3, which keeps numbers "only if they carry order":
   these three do not describe a sequence. They are here as structure,
   and they are one `counter-reset` away from going if they read as
   decoration. */
.what__points { counter-reset: what; }

.what__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-2) var(--spacing-5);
  padding-top: var(--spacing-5);
  border-top: var(--hairline) solid var(--rule-color);
}
.what__item::before {
  counter-increment: what;
  content: "0" counter(what);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-regular);
  line-height: var(--line-height-tight);
  color: var(--color-accent-primary);
}
.what__item h3 { margin: 0; align-self: end; }
.what__item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-editorial);
}

/* ------------------------------------------------------------
   ЗАЩО — the one genuinely editorial moment, and the model for the
   rest. Media is tied to the quote: the portrait of the person who
   said it, or a detail with no face. Never another face beside
   someone else's words (§3.4).
   ------------------------------------------------------------ */

.why__grid { display: grid; gap: var(--spacing-8); align-items: center; }
.why__media { aspect-ratio: 4 / 3; }

.pullquote__attr {
  margin: calc(var(--spacing-6) * -1) 0 var(--spacing-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-style: normal;
}

/* ------------------------------------------------------------
   ПАЗАРИ — a lead block for the live market, then one group for the
   ones that follow. No three equal cards: they read as a choice
   between equals, and no landscape stands in for a country (§3.5).
   ------------------------------------------------------------ */

/* 4:3, matching the photography. It was 16:10, which `object-fit: cover`
   resolved by taking ~8% off the top and bottom — and the top is where
   the heads are in a working shot. No crop, no clipped faces. */
/* A surface, not a gap. This is what the page was missing: the previous
   direction stood every block on a raised card with a hairline border,
   and the media ran flush to the card edge. Without it the blocks float
   on the page background and the section reads as unfinished. */
.mkt-lead {
  display: grid;
  gap: 0;
  margin-bottom: var(--spacing-6);
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--rule-color);
  overflow: hidden;
}
.mkt-lead__media { aspect-ratio: 4 / 3; }
.mkt-lead__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
}
.mkt-lead__body .market__foot { margin-top: var(--spacing-2); }
/* The note keeps `flex: 1` from the card it used to live in, which in a
   stretched column opened a hole between the text and the button. The
   body is centred against the media instead. */
.mkt-lead__body .market__note { flex: none; }


/* ------------------------------------------------------------
   РАБОТЕТЕ С НАС — one lead block for cellars, then two quiet rows.
   The buyers row is never illustrated with product or labels (§3.6).
   ------------------------------------------------------------ */

.biz-lead {
  display: grid;
  gap: 0;
  margin-bottom: var(--spacing-6);
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--rule-color);
  overflow: hidden;
}
.biz-lead__media { aspect-ratio: 4 / 3; }
.biz-lead__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
}
.biz-lead__body .btn { align-self: flex-start; margin-top: var(--spacing-2); }


/* ------------------------------------------------------------
   FOOTER — the quiet end of the page. The store line is text here in
   every state, never a link (§3.0). Links reach 44px (§6).
   ------------------------------------------------------------ */

.footer__list a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* `display: flex` rather than `inline-flex`: the brand lockup above is
   inline-level, so an inline e-mail sat on the same line as the logo.
   The brandline paragraph that used to force the break is gone — it is
   an empty slot until the brand voice book lands — so the break has to
   come from the e-mail itself. `fit-content` keeps the gold underline
   the width of the address, not the width of the column. */
.footer__mail {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--tap-min);
}

/* ------------------------------------------------------------
   18+ — the same card on every public host (§6). Its title is not an
   <h2>: it must not outrank the page's own <h1>.
   ------------------------------------------------------------ */

.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
}

.gate__card {
  width: 100%;
  max-width: 420px;                      /* layout constant — one readable column */
  padding: var(--spacing-8) var(--spacing-6);
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--rule-color);
  box-shadow: var(--shadow-modal, none);
  text-align: center;
}
.gate__seal { display: block; height: var(--spacing-14); width: auto; margin: 0 auto var(--spacing-4); }
.gate__title {
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-tight);
}
.gate__body {
  margin: 0 0 var(--spacing-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-editorial);
}
.gate__btn { width: 100%; }
.gate__note {
  margin: var(--spacing-4) 0 0;
  color: var(--color-text-muted);        /* 3.88:1 on white as Oak — fails AA */
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-wide);
}

/* ------------------------------------------------------------
   BREAKPOINTS for the blocks above
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  /* At 390px the header carries three things — mark, store action and
     the language pair — and the store label is the longest string on
     the row. The set word drops: the lockup is cropped to its seal, which
     sits at the left of the file, so one image still serves both widths.
     Nothing else may go: §3.1 keeps the store action in the header under
     641px. */
  .topbar__inner { gap: var(--spacing-3); }
  /* Under ~380px the row is still short a few pixels; the seal is then
     clipped at its right edge rather than squashed or pushing the page
     sideways. */
  .topbar .topbar__brand { min-width: 0; overflow: hidden; }
  .topbar .topbar__logo {
    max-width: none;
    height: var(--spacing-8);
    width: calc(var(--spacing-6) + var(--spacing-1) / 2);
    object-fit: cover;
    object-position: left center;
    margin-inline-start: calc(var(--spacing-1) * -1);
  }

  /* Full-width buttons in the stack, so the target is unmissable. */
  .storebg-full .btn,
  .mkt-lead__body .market__foot .btn,
  .biz-lead__body .btn,
  .band .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .mkt-lead__body .market__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }
}

@media (min-width: 1025px) {
  .topbar__storebg { order: 3; }
  .why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-12); }
  /* gap stays 0: the two halves of the card meet, they are not two
     separate blocks with air between them. */
  .mkt-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .biz-lead { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; }
  .mkt-lead__body,
  .biz-lead__body { padding: var(--spacing-8); }
}


/* ============================================================
   24.09.2026 — Design Director's pass
   A dark editorial register for "Защо", bigger and warmer bodies on
   the two lead cards, and the two rows at the end of "Работете с нас"
   rebuilt as centred bands on the model of the landing page.
   ============================================================ */

/* ------------------------------------------------------------
   DARK SECTION — a brown gradient, light type over it
   ------------------------------------------------------------ */

/* Warm brown gradient (Design Director, 02.10.2026) — the ground of both
   dark registers, "Защо" and the buyers band. It replaces the cellar
   photograph and its scrim in each. */
.section--dark,
.band--dark {
  /* The light end is the worst case for
     contrast: 30% amber-bark in ink ≈ #4D3419, against which
       parchment 12.0:1 · paper-edge 7.2:1 · accent-gold 5.2:1
     all clear AA. Do not lighten the first stop without re-checking gold. */
  background:
    radial-gradient(ellipse at 15% 0%,
      color-mix(in srgb, var(--color-amber-bark) 30%, var(--color-ink)) 0%,
      transparent 70%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-amber-bark) 22%, var(--color-ink)) 0%,
      color-mix(in srgb, var(--color-walnut) 30%, var(--color-ink)) 55%,
      var(--color-ink) 100%);
}
.section--dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.section--dark .h2,
.section--dark .prose p,
.section--dark .pullquote,
.section--dark .h3 { color: var(--color-parchment); }

.section--dark .pullquote { border-inline-start-color: var(--color-accent-gold); }
.section--dark .pullquote__attr,
.section--dark .mock-frame__label { color: var(--color-paper-edge); }
.section--dark .mock-frame__tag { color: var(--color-accent-gold); }
.section--dark .mock-frame {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  border-color: var(--color-paper-edge);
}
.section--dark .mock-frame__inner svg { stroke: var(--color-paper-edge); }


/* The section before and after a dark band must not draw a hairline onto
   it — the change of ground is the separation. */
.section--dark + .section { border-top: 0; }
.section--dark { border-top: 0 !important; }

/* ------------------------------------------------------------
   LEAD CARDS — bigger bodies, and a ground that is not white
   ------------------------------------------------------------ */

/* Pure paper read as a white rectangle dropped on the parchment. The
   sunk tone belongs to the same ramp as the page and sits under the
   photograph without a seam. */
.mkt-lead,
.biz-lead {
  background: var(--color-surface-sunk);
  border-radius: var(--radius-modal);       /* same corners as the landing page */
}
/* The card clips its own corners; the photograph inside runs flush. */
.mkt-lead__media,
.biz-lead__media { border-radius: 0; }

.mkt-lead__body .market__note,
.biz-lead__body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-editorial);
  color: var(--color-text-primary);
  max-width: 46ch;
}
.mkt-lead__body .market__name,
.biz-lead__body .h3 { font-size: var(--font-size-h3); }

/* ------------------------------------------------------------
   BANDS — one centred statement, dark or light
   ------------------------------------------------------------ */

.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-14) var(--shell-gutter);
  text-align: center;
}

.band--light {
  background: var(--color-surface-alt);
  border-top: var(--hairline) solid var(--rule-color);
}

.band__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
  max-width: 60ch;
}

.band__label {
  color: var(--color-accent-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}
.band--dark .band__label { color: var(--color-accent-gold); }

.band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
  text-wrap: balance;
}
.band--dark .band__title { color: var(--color-parchment); }

/* Every band title sits one step under the section headings around it.
   A band is a block inside a section, never a rival to its <h2> — and
   the buyers band in particular is the quiet path (§3.6). It was h2 on
   the dark ground and read as the loudest thing on the lower half. */
.band__title { font-size: var(--font-size-h3); }

.band__body {
  margin: 0;
  max-width: 54ch;
  font-size: var(--font-size-body);
  line-height: var(--line-height-editorial);
  color: var(--color-text-muted);
}
.band--dark .band__body { color: var(--color-paper-edge); }

.band .btn { margin-top: var(--spacing-2); }

/* Light-on-dark button, recovered from the previous direction. */
.btn--light {
  background: var(--color-parchment);
  color: var(--color-ink);
  border-color: var(--color-parchment);
}
.btn--light:hover {
  background: var(--color-white, #fff);
  border-color: var(--color-white, #fff);
}

/* ------------------------------------------------------------
   BREAKPOINTS
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  /* A filled band needs more inner gutter than a transparent section.
     At the shell's 20px the content sat hard against the colour edge and
     read as having no inset at all; the band is full-bleed, so it is not
     obliged to line up with the shell above it. */
  .band { padding: var(--spacing-10) var(--spacing-8); }
  .band .btn { width: 100%; justify-content: center; }
}

@media (min-width: 1025px) {
  /* "Пазари": text left, photograph right; "Работете с нас" below it is
     the mirror — photograph left, text right — so two lead cards in a
     row do not repeat the same silhouette (Design Director, 02.10.2026;
     reverses the 24.09 arrangement). Done with `order`, not by moving the
     markup: §3.6 fixes the mobile order as media → text → button, and
     the DOM keeps that. */
  .mkt-lead__media { order: 2; }
  .mkt-lead__body  { order: 1; }
  .biz-lead { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

  .band { padding-block: var(--spacing-16); }
}


/* ============================================================
   24.09.2026 — second Design Director pass
   ============================================================ */

/* ------------------------------------------------------------
   SPLIT SECTION HEAD — title left, lead right
   The lead used to sit under the title and run to 68ch, leaving the
   right half of the row empty. Across the row the two read as one line
   of argument and the head stops being a stack.
   ------------------------------------------------------------ */

.section__head--split { display: grid; gap: var(--spacing-4); }
.section__head--split .h2 { margin-bottom: 0; }

@media (min-width: 1025px) {
  /* The headings are two or three words; the leads are a full sentence.
     An even split broke both leads onto a second line, so the right
     column takes the larger share and the 46ch cap comes off. */
  .section__head--split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--spacing-10);
    align-items: end;
  }
  /* The lead sits on the title's baseline, not floating above it. */
  .section__head--split .lead { max-width: none; padding-bottom: var(--spacing-2); }
}

/* ------------------------------------------------------------
   "КАКВО ПРАВИМ" — the head column carries more weight
   It was a short H2 and a one-line lead centred in a tall row, which
   is where the air was. Bigger type fills the column instead of
   stretching the gaps around it.
   ------------------------------------------------------------ */

.model__grid .h2 { font-size: var(--font-size-h1); max-width: 14ch; }
.model__grid .lead {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-editorial);
  max-width: 34ch;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------
   BANDS — two columns: label and title left, body and action right
   ------------------------------------------------------------ */

/* Light bands step DOWN from whatever section holds them: paper-fold
   reads against both the parchment ground and the paper-light of an
   alt section, where surface-alt would have vanished into one of them. */
.band--light {
  background: var(--color-surface-sunk);
  border-block: var(--hairline) solid var(--rule-color);
}
.band--light .band__title { color: var(--color-text-primary); }

/* A band that ends a section runs into the next register rather than
   leaving the section's bottom padding under it as dead ground. */
.section > .band:last-child { margin-bottom: calc(var(--section-pad) * -1); }

.band--split { text-align: left; }
/* The shell's content box, not the shell: .shell is --shell-max wide
   including its gutters, so the band's text ran one gutter wider on each
   side than the headings and cards above it (Design Director, 02.10.2026). */
.band--split .band__content {
  display: grid;
  gap: var(--spacing-6);
  max-width: calc(var(--shell-max) - 2 * var(--shell-gutter));
  align-items: center;
  text-align: left;
}
.band--split .band__lead,
.band--split .band__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
}
.band--split .band__title { margin: 0; }
/* 62ch resolved to 682px and the Bulgarian sentence needs 679px for two
   lines — three pixels of headroom, which is none. The column (744px at
   the shell's widest) is the real control; the cap only guards the
   measure if the shell ever grows. */
.band--split .band__body { margin: 0; max-width: 75ch; }
.band--split .btn { margin-top: var(--spacing-1); align-self: flex-start; }

@media (min-width: 1025px) {
  /* Same reasoning as the section heads: the left column is a label and
     a short line, the right one is a sentence and its action. */
  .band--split .band__content {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--spacing-10);
  }
  /* The right column is the answer to the left one, so it holds the
     same top edge rather than centring against a taller title. */
  .band--split .band__lead,
  .band--split .band__aside { justify-content: center; }
}

@media (max-width: 640px) {
  .band--split .btn { width: 100%; justify-content: center; }
}

/* Buyers band: the title is one sentence and the column holds one button,
   so the title takes the whole row on one line and the button sits at
   the row's end — a lower band (Design Director, 02.10.2026). */
@media (min-width: 1025px) {
  .band--inline .band__content { grid-template-columns: minmax(0, 1fr) auto; }
  .band--inline .band__title { text-wrap: pretty; }
  .band--inline .band__aside { align-items: flex-end; }
}

/* "Извън България": the question holds one line and the left column
   sizes to it; the answer and its action take what is left, a narrower
   column than the even split gave them (Design Director, 02.10.2026). */
@media (min-width: 1025px) {
  .band--wide-lead .band__content { grid-template-columns: max-content minmax(0, 1fr); }
  .band--wide-lead .band__title { white-space: nowrap; }
}


/* ============================================================
   29.09.2026 — Design Director's pass
   Short language codes set off from the menu, the "БГ магазин"
   status as a kicker instead of a pill, a larger store button, and
   a dark theme driven by assets/js/theme.js.
   ============================================================ */

/* Wine-red TEXT. Burgundy is 10:1 on parchment but 1.6:1 on the dark
   ground, so on dark the text role moves to the lighter accent-link
   (5.1:1 on the page, 4.7:1 on the alt ground). Fills — buttons, the
   nav underline — keep accent-primary: they carry white text. */
:root { --accent-ink: var(--color-accent-primary); }
[data-theme="dark"] { --accent-ink: var(--color-accent-link); }

.textlink,
.path__label,
.band__label,
.what__item::before,
.footer__mail:hover,
.footer__social a:hover { color: var(--accent-ink); }
.textlink:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

[data-theme="dark"] .btn--secondary {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* ------------------------------------------------------------
   HEADER — language codes and the theme toggle
   ------------------------------------------------------------ */

/* EN | BG only, at every width. The full language name stays in the
   link as visually-hidden text, so the accessible name is still
   "English" / "Български", not two letters. */
.topbar__langwrap { gap: var(--spacing-2); }
/* Each item is a flex row, so the hairline divider and the 44px link
   centre on one line instead of sitting on the text baseline. */
.langswitch li { display: flex; align-items: center; }

@media (min-width: 1025px) {
  /* A hairline and air between the section menu and the language pair,
     so the codes do not read as a fifth menu item. */
  .topbar__langwrap {
    margin-inline-start: var(--spacing-6);
    padding-inline-start: var(--spacing-6);
    border-inline-start: var(--hairline) solid var(--rule-color);
  }
}

.themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard);
}
.themetoggle:hover { color: var(--color-text-primary); }
.themetoggle svg { width: var(--spacing-5); height: var(--spacing-5); }
/* Shows what a press will do: the moon on light, the sun on dark. */
.themetoggle__sun { display: none; }
[data-theme="dark"] .themetoggle__sun { display: block; }
[data-theme="dark"] .themetoggle__moon { display: none; }

@media (max-width: 640px) {
  /* Four things in the row at 390px: seal, store action, EN|BG, toggle.
     The divider margins give back the width the toggle needs; every
     target stays at 44px. */
  .topbar__langwrap { gap: 0; }
  .langswitch { gap: 0; }
  .langswitch li + li::before { margin-right: 0; }
}

/* ------------------------------------------------------------
   БГ МАГАЗИН — the status is a kicker over the button, not a chip.
   It announces; the button acts. No fill and no radius, so the two
   can never be mistaken for a pair of buttons.
   ------------------------------------------------------------ */

.market__status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
}
.market__status--soon    { background: transparent; color: var(--accent-ink); }
.market__status--open    { background: transparent; color: var(--color-status-success); }
.market__status--neutral { background: transparent; border: 0; color: var(--color-text-muted); }
/* Moss is 3:1 on the dark ground — the "trading" kicker takes the
   body colour there and keeps the green in its dot. */
[data-theme="dark"] .market__status--open { color: var(--color-text-primary); }
.market__status--open::before {
  content: "";
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-status-success);
}

/* The store button — one size up from the standard button, in type and
   in box. */
.btn--lg {
  min-height: var(--spacing-14);
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-wide);
}
.storebg-full .btn--lg { margin-top: 0; }

/* ------------------------------------------------------------
   DARK THEME — surfaces the semantic tokens do not reach
   ------------------------------------------------------------ */

/* The dark bands already sit on ink; on the dark page they would melt
   into it. A hairline keeps the edge. */
[data-theme="dark"] .section--dark,
[data-theme="dark"] .band--dark { border-block: var(--hairline) solid var(--rule-color); }
[data-theme="dark"] .section--dark { border-top: var(--hairline) solid var(--rule-color) !important; }

/* Photographs a touch quieter, so they do not glare off the dark page. */
[data-theme="dark"] .media-frame > img { filter: brightness(0.92); }

@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color var(--duration-base) var(--easing-standard),
                     color var(--duration-base) var(--easing-standard); }
}

/* Hero frame per theme — two <img> in one frame, CSS picks one.
   A <picture> media query would follow only the OS, not the toggle.
   Scoped under .media-frame so they outrank `.media-frame > img`. */
.media-frame > .hero__img--dark { display: none; }
[data-theme="dark"] .media-frame > .hero__img--light { display: none; }
[data-theme="dark"] .media-frame > .hero__img--dark { display: block; }
/* These frames are set type over a photograph — no dimming. */
[data-theme="dark"] .hero__media > img { filter: none; }

/* Hero statement over the blurred store frame (Design Director, 02.10.2026).
   Live text, so one frame pair serves both languages. Light theme: white
   statement + parchment tagline over the dark frame; dark theme: wine
   statement + walnut tagline over the light frame (swapped 02.10.2026). */
.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  text-align: center;
  /* Soft wash in the frame's own tone so the type never fights a bottle:
     ink behind the dark frame (light theme), parchment behind the light
     frame (dark theme). */
  --hero-wash: var(--color-ink);
  background: radial-gradient(ellipse 60% 50% at center,
    color-mix(in srgb, var(--hero-wash) 72%, transparent),
    transparent 100%);
}
[data-theme="dark"] .hero__overlay { --hero-wash: var(--color-parchment); }
.hero__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
}
/* Two gold hairlines with a small gold dot between them. */
.hero__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: var(--spacing-30);
  color: var(--color-accent-gold);
  background: radial-gradient(circle, currentColor 0 50%, transparent 55%)
              center / var(--spacing-2) var(--spacing-2) no-repeat;
}
.hero__divider::before,
.hero__divider::after {
  content: "";
  flex: 1;
  height: var(--hairline);
  background: currentColor;
}
.hero__divider::before { margin-right: var(--spacing-2); }
.hero__divider::after  { margin-left: var(--spacing-2); }
.hero__tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-display-light);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-parchment);
}
/* Light theme: drop shadow lifts the white type off the dark frame. */
.hero__statement,
.hero__tagline {
  text-shadow:
    0 var(--spacing-1) var(--spacing-3) color-mix(in srgb, var(--color-ink) 85%, transparent),
    0 0 var(--spacing-1) color-mix(in srgb, var(--color-ink) 60%, transparent);
}
[data-theme="dark"] .hero__statement { color: var(--color-wine-burgundy); }
[data-theme="dark"] .hero__tagline   { color: var(--color-ink); }
/* Dark theme: parchment outer glow separates the dark type from the light frame. */
[data-theme="dark"] .hero__statement,
[data-theme="dark"] .hero__tagline {
  text-shadow:
    0 0 var(--spacing-2) var(--color-paper-light),
    0 0 var(--spacing-5) var(--color-paper-light),
    0 0 var(--spacing-10) color-mix(in srgb, var(--color-paper-light) 80%, transparent);
}


/* ============================================================
   12.10.2026 — colleague review pass (marketing, CMO)
   Hero actions on one row with the winery action first; a real
   winery page in the hero frame; no thin rule under the hero; "Защо"
   and the buyers band on the light ground; first wineries as logos.
   ============================================================ */

/* Two buttons, same size, one row. Partner first and filled; the store
   second and outlined. The store status is a small note under them. */
.hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  max-width: 30rem;
  margin-top: var(--spacing-6);
}
.hero__actions .btn { width: 100%; padding-inline: var(--spacing-4); }
.hero__actions .btn[hidden] { display: none; }
.hero__note {
  margin: var(--spacing-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}
@media (max-width: 640px) {
  .hero__actions { grid-template-columns: 1fr; max-width: none; }
}

/* The hero frame: anonymous and blurred as on 06.10 (Director 12.10), and
   not shown on phones, where the text and the two buttons are the hero. */
@media (max-width: 640px) {
  .hero__media { display: none; }
}

/* "Тънката линия долу": the rule above the first point started at the
   middle of the page and lined up with nothing. The rules between the
   points stay. */
.what__item:first-child { border-top: 0; padding-top: 0; }

/* "Защо" on the light ground: picture and text share a top edge. */
@media (min-width: 1025px) {
  .why__grid { align-items: start; }
}

/* Markets: the card body reads as one argument, the action is quieter. */
.mkt-lead__body .market__name { margin: 0; }

/* First wineries — logos on white tiles, one row on desktop. */
.first-izbi { margin: var(--spacing-8) 0 var(--spacing-12); }
.first-izbi__title {
  margin: 0 0 var(--spacing-4);
  color: var(--accent-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}
.first-izbi__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.first-izbi__row li {
  background: var(--color-pure-paper);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-card);
}
.first-izbi__row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 14% 18%;
  box-sizing: border-box;
}
@media (min-width: 1025px) {
  .first-izbi__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Real photographs carry their source. Generated ones carry the EU "AI GENERATED"
   icon on the image, top-right, at first exposure (Code of Practice on AI-generated
   content, 10.06.2026; Art. 50 guidelines: a footer alone is "easily overlooked"). */
.ai-icon,
.media-frame > img.ai-icon {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  width: auto;
  height: 22px;
  z-index: 1;
}
@media (max-width: 640px) { .ai-icon, .media-frame > img.ai-icon { height: 18px; top: var(--spacing-2); right: var(--spacing-2); } }
[data-theme="dark"] .media-frame > img.ai-icon { filter: none; }
.why__photo { margin: 0; }
.media-credit {
  position: absolute;
  right: var(--spacing-2);
  bottom: var(--spacing-2);
  margin: 0;
  padding: 2px var(--spacing-2);
  background: color-mix(in srgb, var(--color-ink) 70%, transparent);
  color: var(--color-parchment);
  border-radius: var(--radius-full);
  font-size: var(--font-size-micro);
  line-height: 1.5;
}
/* «Вино с автор» alone on the blurred frame (review variant «nadpis» B):
   it carries the frame, so it takes the statement's display size. */
.hero__overlay > .hero__tagline:only-child {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-style: italic;
  letter-spacing: var(--letter-spacing-tight);
}

/* ============================================================
   12.10.2026 — Director's pass on "Защо" and "Пазари"
   ============================================================ */

/* "Защо": the founders' words a step smaller, and the photograph as tall
   as the text beside it, so the two halves read as one spread. */
#why .pullquote { font-size: var(--font-size-h4); line-height: var(--line-height-compact); }
#why .pullquote__attr { margin-top: calc(var(--spacing-4) * -1); }
@media (min-width: 1025px) {
  .why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .why__grid > .why__media { aspect-ratio: auto; height: 100%; min-height: 26rem; }
}

/* "Работете с нас" (with the markets, Director 12.10): the country choice
   is a row of quiet flag chips under the winery text. Bulgaria is the one
   filled chip (the live market); RO and GR carry "скоро". */
.mkt-chips__label {
  margin: var(--spacing-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}
.mkt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--tap-min);
  padding: var(--spacing-2) var(--spacing-4);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--easing-standard),
              background-color var(--duration-base) var(--easing-standard);
}
.mkt-chip:hover,
.mkt-chip:focus-visible { border-color: var(--accent-ink); }
.mkt-chip--primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: var(--font-weight-ui-semibold);
}
.mkt-chip--primary:hover { background: var(--button-primary-bg-hover); }
.mkt-chip__flag {
  flex: none;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  box-shadow: 0 0 0 var(--hairline) var(--rule-color);
}
.mkt-chip__flag--globe { width: 1.1rem; height: 1.1rem; box-shadow: none; }
.mkt-chip__soon {
  padding: 0 var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunk);
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
}

/* ============================================================
   12.10.2026 — Director's 4th pass: «Работете с нас» like «Защо»,
   the brown-gold ground back for «Защо» and a buyers banner
   ============================================================ */

/* «Работете с нас»: the same two-column spread as «Защо», mirrored (the
   photograph on the right); the logos follow on their own row. */
.join__grid + .shell .first-izbi { margin: var(--spacing-12) 0 0; }
.join__grid .mkt-chips { margin-top: var(--spacing-2); }
.join__title { margin: 0; }
@media (min-width: 1025px) {
  .join__title { max-width: 14ch; font-size: var(--font-size-h1); }
}

/* On the brown-gold ground, «Защо» keeps the light words and a quieter
   review tag. */
.section--dark .mock-frame__tag { color: var(--color-accent-gold); }

/* Buyers: one call to action, the whole banner is the link. */
.cta-banner-wrap { padding: 0; }
.cta-banner-wrap[hidden],
.cta-banner[hidden] { display: none; }
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--shell-gutter);
  color: var(--color-parchment);
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
}
.cta-banner__text {
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-accent-gold) 60%, transparent);
  padding-bottom: var(--spacing-1);
  transition: border-color var(--duration-base) var(--easing-standard);
}
.cta-banner__arrow {
  color: var(--color-accent-gold);
  transition: transform var(--duration-base) var(--easing-standard);
}
.cta-banner:hover .cta-banner__text,
.cta-banner:focus-visible .cta-banner__text { border-bottom-color: var(--color-accent-gold); }
.cta-banner:hover .cta-banner__arrow { transform: translateX(var(--spacing-1)); }
.cta-banner:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: -6px; }
@media (max-width: 640px) {
  .cta-banner { font-size: var(--font-size-h3); padding-block: var(--spacing-10); }
}

/* For wineries (brief v1.0 §2.2-2.3, 13.10): a short head (heading + one
   supporting line), then four blocks in a symmetric 2×2 grid. Each block
   starts the same way: the rule, the number on its own line, the heading,
   the text. No hanging number column, so nothing drifts out of line when
   the EN copy runs longer (brief §5.2). */
.what__head .h2 { margin-bottom: var(--spacing-3); max-width: none; }
.what__points--grid { display: grid; gap: var(--spacing-8) var(--spacing-12); }
.what__points--grid .what__item {
  display: block;
  padding-top: var(--spacing-5);
  border-top: var(--hairline) solid var(--rule-color);
}
.what__points--grid .what__item::before {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-h4);
  line-height: 1;
}
.what__points--grid .what__item h3 { margin: 0 0 var(--spacing-3); }
.what__points--grid .what__item p { margin: 0 0 var(--spacing-2); max-width: 52ch; }
.what__points--grid .what__item p:last-child { margin-bottom: 0; }
@media (min-width: 1025px) {
  .what__points--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Да работим заедно»: the line about the next markets carries weight. */
.join__strong strong { font-weight: var(--font-weight-ui-semibold); color: var(--color-text-primary); }

/* ============================================================
   13.10.2026 — typography and vertical rhythm pass (Director)
   The text read sparse: body at 1.65, 44 px per footer link, an H1-sized
   heading in the partners block. Tighter, not cramped: same type scale,
   same grounds; line-height, paragraph spacing and the lower half's
   padding come in. Targets stay ≥ 32 px (WCAG 2.5.8 asks 24 px).
   ============================================================ */

/* Body copy: 1.65 → 1.55; small text 1.5. Display sizes untouched. */
:root { --line-height-editorial: 1.55; }
.what__points--grid .what__item p,
.pullquote__attr,
.mock-frame__label { line-height: 1.5; }
.prose p { margin-bottom: var(--spacing-3); }
.hero__lead { margin-bottom: var(--spacing-3); }
.hero__lead:last-of-type { margin-bottom: var(--spacing-5); }

/* The four blocks: a little less between rows and inside a block. */
.what__points--grid { row-gap: var(--spacing-6); }
.what__points--grid .what__item { padding-top: var(--spacing-4); }
.what__points--grid .what__item h3 { margin-bottom: var(--spacing-2); }

/* «Защо»: quotes closer to their names and to each other. */
#why .pullquote { margin: var(--spacing-5) 0 var(--spacing-5); }

/* Lower half: the partners block reads as a block, not a second hero. */
section[aria-labelledby="partners2-headline"] { padding-block: var(--spacing-12); }
@media (min-width: 1025px) {
  .join__title { font-size: var(--font-size-h2); max-width: 18ch; }
}
.first-izbi { margin-top: var(--spacing-10); }
.cta-banner { padding-block: var(--spacing-10); }

/* Footer: compact. 32 px targets instead of 44 px rows, a smaller gap
   under the column titles, less padding around and above the legal row. */
.footer { padding-block: var(--spacing-10) var(--spacing-6); }
.footer__grid { gap: var(--spacing-6); }
.footer__coltitle { margin-bottom: var(--spacing-2); }
.footer__coltitle--spaced { margin-top: var(--spacing-4); }
.footer__list { gap: 0; }
.footer__list a,
.footer__mail,
.footer__legal a { min-height: 32px; padding-block: 0; }
.footer__legal { margin-top: var(--spacing-6); padding-top: var(--spacing-4); gap: var(--spacing-2) var(--spacing-6); }
@media (max-width: 640px) {
  .section { --section-pad: var(--spacing-12); }
}

/* Director 13.10: the intro heading a size up so it holds the row, and the
   supporting lines («Искаме това да личи и онлайн.», «Българският магазин
   отваря скоро.») in display italic, the register the page already uses for
   asides. Cormorant runs small, so the italic lines go up a step too. */
.what__head .h2 { font-size: calc(var(--font-size-h2) * 1.2); }
.what__head .lead,
.hero__note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
}
.what__head .lead { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: var(--line-height-tight); color: var(--color-text-primary); }
.hero__note { font-size: 1.25rem; line-height: var(--line-height-tight); color: var(--color-text-primary); }