/* ==========================================================================
   GOLAZO — DARK MODE + UTILITY CLUSTER (v1.27.0)
   Source: golazo-lang-dark-plan.md + golazo-lang-dark-mockup.html (blocks
   copied verbatim where the mockup specifies them). Tokens remap lives in
   golazo-tokens.css; this file covers component states the tokens can't.
   ========================================================================== */

/* base surface + text ride the alias tokens (kit typography.css sets them to
   fixed light values; aliases mirror those exactly, so light mode is identical) */
body{background:var(--bg);color:var(--tx);transition:background .3s,color .3s}

/* ===== NAV in dark mode: scrolled state = dark glass, white lettering (mockup verbatim) ===== */
html[data-theme="dark"] body .nav.scrolled .nav__inner{color:#fff;background:linear-gradient(135deg,rgba(24,32,27,.85),rgba(14,19,17,.75));border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] body .nav.scrolled .lt-white{opacity:1}
html[data-theme="dark"] body .nav.scrolled .lt-green{opacity:0}
html[data-theme="dark"] body .nav.scrolled .nav__menu a{color:#fff}
html[data-theme="dark"] body .nav.scrolled .nav__menu a.active{color:#fff}
html[data-theme="dark"] body .nav.scrolled .btn--icon{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border-color:rgba(255,255,255,.3)}

/* opened search capsule goes dark glass in the dark scrolled nav (mockup verbatim) */
html[data-theme="dark"] body .nav.scrolled .nsearch.open{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border-color:rgba(255,255,255,.4)}
html[data-theme="dark"] body .nav.scrolled .nsearch.open .nsearch__input{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
html[data-theme="dark"] body .nav.scrolled .nsearch.open .nsearch__input::placeholder{color:rgba(255,255,255,.7)}

/* ===== UTILITY CLUSTER (mockup verbatim) ===== */
.utilbar{position:fixed;top:26px;right:22px;z-index:60;display:flex;gap:6px;padding:5px;border-radius:999px;
  color:#fff;background:var(--glass-tint-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow-glass);transition:background .3s,color .3s,top .3s}
.utilbar.scrolled{top:14px;color:var(--golazo-green);background:var(--glass-tint-light);border-color:rgba(13,98,57,.12)}
html[data-theme="dark"] .utilbar.scrolled{color:#fff;background:linear-gradient(135deg,rgba(24,32,27,.85),rgba(14,19,17,.75));border-color:rgba(255,255,255,.14)}
.utilbar .btn--icon{width:38px;height:38px;color:inherit;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));border-color:rgba(255,255,255,.35)}
.utilbar.scrolled .btn--icon{background:linear-gradient(135deg,rgba(13,98,57,.14),rgba(13,98,57,.08));border-color:rgba(13,98,57,.2)}
html[data-theme="dark"] .utilbar.scrolled .btn--icon{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border-color:rgba(255,255,255,.28)}
@media(max-width:1280px){ .utilbar{top:92px} .utilbar.scrolled{top:80px} }
body.admin-bar .utilbar{margin-top:32px}

/* flag inside the cluster (renders once Polylang is active) */
.nflag svg{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.utilbar.scrolled .nflag svg{box-shadow:0 0 0 1.5px rgba(13,98,57,.35)}
html[data-theme="dark"] .utilbar.scrolled .nflag svg{box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
.nflag .f-geo{display:none} html[lang="en"] .nflag .f-geo{display:block} html[lang="en"] .nflag .f-uk{display:none}

/* moon/sun swap (mockup verbatim) */
.btn--icon .sun{display:none}
html[data-theme="dark"] .btn--icon .moon{display:none}
html[data-theme="dark"] .btn--icon .sun{display:block}

/* ===== cursor: dark mode forces the white ball site-wide (plan token map) ===== */
html[data-theme="dark"] .gc-ball{background-image:url("../img/golazo-ball-white.png") !important}
html[data-theme="dark"] .gc-caret{background:var(--pitch-white)}

/* ===== OOS images: slightly raised brightness in dark so they don't vanish (plan note).
   Site currently runs full-color sold-out images (v1.18.4) — rule kept for if/when
   desaturation returns; harmless now. ===== */
html[data-theme="dark"] .card.stock-out .card__img img{filter:brightness(1.08)}

/* ===== kit components on dark surfaces (theme-owned equivalents; kit files stay verbatim) ===== */
/* live search preview panel */
/* v1.29.3 (Giorgi): search preview stays FULLY WHITE in dark mode — dark variant removed,
   white pinned so future token changes can't darken it. */
html[data-theme="dark"] .nsearch-preview{background:#fff}
/* wishlist gate popup */
html[data-theme="dark"] .gwgate__card{background:var(--card);color:var(--tx);border-color:var(--line)}
html[data-theme="dark"] .gwgate__card p{color:var(--mut)}
/* notify-me block (stock-states kit) */
html[data-theme="dark"] .notify{background:var(--alt);border-color:var(--line)}
html[data-theme="dark"] .notify p{color:var(--mut)}
html[data-theme="dark"] .notify input[type=email]{background:var(--card);border-color:var(--line);color:var(--tx)}
/* generic form fields on dark pages */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--card);border-color:var(--line);color:var(--tx)}
html[data-theme="dark"] ::placeholder{color:var(--mut)}
/* image frames stay studio-white in both themes — product photos are baked on #FDFDFD */

/* ===== v1.28.0 EN typography (brand rule): body Inter, display Saira Condensed ===== */
html[lang="en"] body, html[lang="en"] .ka{font-family:var(--font-body)}
html[lang="en"] .t-display, html[lang="en"] .t-display-xl, html[lang="en"] .t-h1, html[lang="en"] .t-h2, html[lang="en"] .t-h3,
html[lang="en"] .hero__title, html[lang="en"] .section__title, html[lang="en"] .split__big{font-family:var(--font-display);letter-spacing:.5px}
.utilbar .btn--icon{display:flex;align-items:center;justify-content:center;padding:0} /* v1.29.2: icons were left-clipped in the round mask (button computed display:block) */