/* ============================================================
   DENT MASTER GLOBAL - base.css  (v2, original brand colors)
   Palette from the original site:
     primary red #BF0A1A · ink #111111 · text #616161
     light #F7F7F7 · white · logo navy #1C4E9C
   Motif: the diagonal "lightning slash" from the DMG logo
   ============================================================ */

:root {
  /* Brand (original site palette) */
  --red: #bf0a1a;
  --red-dark: #990815;
  --red-soft: rgba(191, 10, 26, 0.07);
  --navy: #1c4e9c;
  --navy-soft: rgba(28, 78, 156, 0.08);
  --ink: #111111;
  --ink-2: #1b1b1b;
  --text: #3d3d3d;
  --text-dim: #616161;
  /* #908f8f dadea 3,2:1 pe alb: categoria de pe cardul produsului, calea de
     navigare, data articolelor si textul din campurile de cautare se citeau
     greu. #6b6b6b ramane mai stins decat --text-dim, dar trece de 4,5:1 si pe
     fundalul gri deschis al sectiunilor (#f7f7f7). */
  --text-faint: #6b6b6b;

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --bg-card: #ffffff;
  --surface: #ffffff;        /* card / input / drawer surface (flips in dark) */
  --text-strong: var(--ink); /* heading / strong text (flips in dark; --ink stays dark for dark surfaces) */
  --line: #e4e4e4;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-hero: clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
  --text-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  --text-h3: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  --text-base: 0.96rem;
  --text-sm: 0.86rem;
  --text-xs: 0.74rem;

  /* Rhythm */
  --space-section: clamp(2.5rem, 1.9rem + 2.8vw, 4.6rem);
  --container: 1200px;
  --radius: 12px;
  --radius-sm: 8px;

  /* Motion */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Slash skew (logo angle) */
  --skew: -12deg;

  color-scheme: light;
}

/* ============================================================
   NIGHT MODE – hand-tuned dark theme.
   Not an inversion: a layered elevation system + per-component
   treatment so every surface reads as deliberately designed.

   Elevation ladder (darkest → lightest):
     --ink-panel  #08090b  topbar · footer · dark bands (recessed)
     --bg         #0c0d10  page
     --bg-soft    #121319  alternating sections
     --surface    #16181e  cards · inputs
     --surface-2  #1e222a  raised: dropdowns · hover · help card
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Rosul e impartit in doua: un singur ton nu putea fi si text pe fundalul
     de noapte, si fundal sub text alb. #ee2c39 dadea 4,46:1 ca text si 4,15:1
     sub alb – sub 4,5:1 in ambele roluri.
     --red      = text, linii, accente pe fundal inchis: #ff4d58, 4,9-6,1:1
                  pe toate suprafetele (#1e222a … #08090b).
     --red-fill = fundaluri cu text alb (butoane, insigne, benzi): #c41c27,
                  5,9:1 cu alb plin si 4,6:1 cu albul 85% din benzi.
     In tema alba --red-fill nu exista; regulile folosesc
     `var(--red-fill, var(--red))`, deci tema alba ramane neatinsa. */
  --red: #ff4d58;
  --red-fill: #c41c27;
  --red-dark: #a3161f;  /* hover pe fundal rosu: mai inchis, alb 7,6:1 */
  --red-soft: rgba(238, 44, 57, 0.15);
  --navy: #5b8ae0;
  --navy-soft: rgba(91, 138, 224, 0.16);

  /* Layered neutral surfaces */
  --bg: #0c0d10;
  --bg-soft: #121319;
  --bg-card: #16181e;
  --surface: #16181e;
  --surface-2: #1e222a;
  --ink-panel: #08090b;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-dark: rgba(255, 255, 255, 0.08);

  /* Text hierarchy */
  --text-strong: #f4f6f8;
  --text: #c7ccd4;
  --text-dim: #949aa4;
  --text-faint: #8a909a; /* #6d737c: 3,7:1 pe carduri */
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
/* Rosul inchis al starilor de stoc si al comenzilor anulate (#b91c1c) era
   gandit pentru alb; pe fundalul de noapte iesea la 2,7:1. */
html[data-theme="dark"] :is(.product-card__stock, .stock-badge--out, .order-row__status.is-cancelled) { color: #f87171; }
html[data-theme="dark"] .product-card__stock--wait { color: #fbbf24; }
/* La fel stocul din fisa produsului: verdele si chihlimbarul de zi
   (#15803d, #b45309) ieseau la 3,5-3,9:1 pe fundalul de noapte. */
html[data-theme="dark"] .stock-badge { color: #4ade80; }
html[data-theme="dark"] .stock-badge--low { color: #fbbf24; }
html[data-theme="dark"] .stock-badge--out { color: #f87171; } /* dupa regula verde, care altfel l-ar acoperi */

/* ---- Recessed dark bars: topbar / footer / dark sections / dividers ---- */
html[data-theme="dark"] .topbar { background: var(--ink-panel); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .footer { background: var(--ink-panel); border-top: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .section--dark { background: var(--ink-panel); }
html[data-theme="dark"] .slash-divider { background: linear-gradient(to bottom right, transparent 49.6%, var(--ink-panel) 50%); }
html[data-theme="dark"] .slash-divider--rev { background: linear-gradient(to top right, var(--ink-panel) 49.6%, transparent 50%); }
html[data-theme="dark"] .marquee { background: var(--ink-panel); border-block: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .page-hero { background: linear-gradient(135deg, #14161c, #0b0c0f); }

/* ---- Header: dark glass ---- */
html[data-theme="dark"] .header { background: rgba(10, 11, 14, 0.78); border-bottom-color: var(--line); }
html[data-theme="dark"] .header.is-scrolled { box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.9); }
html[data-theme="dark"] .header-search { background: var(--surface-2); }
html[data-theme="dark"] .burger span { background: var(--text-strong); }

/* ---- Logo swap + theme-toggle icon ----
   Ambele sigle au `loading="lazy"` in HTML: o imagine lenesa cu
   `display: none` nu se cere deloc, deci se descarca doar sigla temei curente
   (inainte veneau amandoua, 60 KB + 88 KB). Cea vizibila e in fereastra si se
   cere imediat dupa aranjare. `width`/`height` dau proportia inainte de
   incarcare: antetul nu sare, iar `dmgFitHeader` masoara latimea reala. */
.logo__img--light { display: none; }
html[data-theme="dark"] .logo__img--dark { display: none; }
html[data-theme="dark"] .logo__img--light { display: block; }
.theme-toggle { cursor: pointer; }
.theme-ic { width: 19px; height: 19px; }
.theme-ic--sun { display: none; }
html[data-theme="dark"] .theme-ic--sun { display: block; }
html[data-theme="dark"] .theme-ic--moon { display: none; }

/* ---- Dropdowns / menus: raised surface ---- */
html[data-theme="dark"] .nav__menu,
html[data-theme="dark"] .mega,
html[data-theme="dark"] .lang-menu { background: var(--surface-2); border-color: var(--line); }

/* ---- Buttons ---- */
/* --red-dark e, noaptea, fundalul de hover (mai inchis); ca text pe fundal
   inchis ar fi coborat la 3:1. Linkul „Citeste" se lumineaza in schimb. */
html[data-theme="dark"] .post-card__more:hover { color: #ff6670; }
html[data-theme="dark"] .btn--primary { box-shadow: 0 8px 24px -8px rgba(238, 44, 57, 0.45); }
html[data-theme="dark"] .btn--primary:hover { box-shadow: 0 16px 34px -10px rgba(238, 44, 57, 0.55); }
/* The "ink" button had no contrast on dark – becomes a raised light-surface button */
html[data-theme="dark"] .btn--ink { background: var(--surface-2); color: var(--text-strong); border-color: var(--line-2); }
html[data-theme="dark"] .btn--ink:hover { background: #262b34; }
html[data-theme="dark"] .btn--outline { border-color: var(--line-2); color: var(--text-strong); }
html[data-theme="dark"] .btn--outline:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--line-2); }
/* Text rosu pe buton deschis: tonul de fundal (--red-fill), nu cel pentru
   text pe noapte – #ff4d58 pe #eef1f5 ar fi 2,9:1. */
html[data-theme="dark"] .btn--white { background: #eef1f5; color: var(--red-fill); }
html[data-theme="dark"] .btn--white:hover { background: #fff; }

/* ---- Cards: hairline border, lift + red edge on hover ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .post-card { border: 1px solid var(--line); box-shadow: 0 22px 48px -32px rgba(0, 0, 0, 0.9); }
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .post-card:hover { border-color: rgba(238, 44, 57, 0.5); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.95); }
html[data-theme="dark"] .product-card__media,
html[data-theme="dark"] .cart-item__thumb,
html[data-theme="dark"] .product-detail__media { background: linear-gradient(150deg, #23262e, #14161b); }

/* ---- Forms ---- */
html[data-theme="dark"] .form-panel { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
html[data-theme="dark"] .em-media__img { background: var(--surface); }
html[data-theme="dark"] .form-success { background: rgba(34, 197, 94, 0.13); border-color: #2f9e57; color: #6ee79f; }
html[data-theme="dark"] .form-error { background: rgba(239, 68, 68, 0.13); border-color: #b4453f; color: #fca5a5; }
html[data-theme="dark"] .order-done__icon { background: rgba(34, 197, 94, 0.13); }

/* ---- Compare page ---- */
html[data-theme="dark"] .compare__col--lose li::before { background-color: #2a2e36; }
html[data-theme="dark"] .compare__col--win { background: var(--surface-2); border-color: var(--red); color: var(--text); box-shadow: 0 30px 70px -34px rgba(238, 44, 57, 0.32); }

/* ---- Shop: account offer / help card / promo badge / view-all / toast / FAB ---- */
html[data-theme="dark"] .account-offer { background: linear-gradient(150deg, #1e222a, #131519); }
html[data-theme="dark"] .sidebar-help { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .cat-tile__promo-badge { background: var(--red-fill, var(--red)); }
html[data-theme="dark"] .cat-sheet__viewall { background: var(--red-fill, var(--red)); color: #fff; }
html[data-theme="dark"] .toast { background: var(--surface-2); }
html[data-theme="dark"] .cmp-fab { background: var(--surface-2); border: 1px solid var(--line-2); }
html[data-theme="dark"] .cmp-fab:hover { background: var(--red-fill, var(--red)); border-color: var(--red); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Elementele `.reveal--right` stau 34px in dreapta pana intra in ecran. Pe
   telefon, `overflow-x: hidden` de pe body nu ajungea: Chrome largea fereastra
   de aranjare dupa ele (414px in loc de 390) si micsora toata pagina.
   `clip` taie fara sa faca din <main> un container de derulare, deci
   `position: sticky` din interior merge mai departe. */
main { overflow-x: clip; }

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: var(--red-fill, var(--red)); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--text-strong);
  text-wrap: balance;
  text-transform: uppercase;
  /* Un cuvant mai lat decat ecranul („СЕРТИФИЦИРОВАННЫМ" la 390px) iesea din
     pagina, taiat. Se rupe doar cand nu incape singur pe rand – engleza nu se
     schimba. */
  overflow-wrap: break-word;
}
h3, .h3 { font-size: var(--text-h3); font-weight: 600; }
h2, .h2 { font-size: var(--text-h2); }
.h-hero { font-size: var(--text-hero); font-weight: 700; }
.h-hero em, h2 em { font-style: italic; color: var(--red); }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
/* Cardurile albe dintr-o sectiune inchisa (pasii de pe PDR si Academie) nu
   sunt fundal inchis: regula de mai sus le facea titlurile albe pe alb,
   complet invizibile. */
.on-dark :is(.step, .card) :is(h1, h2, h3, h4) { color: var(--text-strong); }

/* Rosul firmei (#bf0a1a) pe negru are 2,9:1: codurile de tara din bara de
   sus si din subsol, eticheta de deasupra titlurilor si cuvantul evidentiat
   din antetul paginilor se citeau greu. In tema alba, fasiile inchise folosesc
   rosul luminat din tema de noapte (4,6:1). Butoanele si cardurile albe din
   ele pastreaza rosul inchis: textul alb pe rosul luminat ar cobori sub 4,5:1. */
html:not([data-theme="dark"]) :is(.topbar, .footer, .page-hero, .section--dark, .marquee, .compare__col--win, .account-offer) { --red: #ee2c39; }
html:not([data-theme="dark"]) :is(.topbar, .footer, .page-hero, .section--dark, .marquee, .compare__col--win, .account-offer) :is(.btn, .step, .lang-menu) { --red: #bf0a1a; }
/* Eticheta „Recomandat" sta pe fondul rosiatic al coloanei inchise: rosul
   luminat ramane acolo la 4,4:1, deci primeste un ton si mai deschis. */
html:not([data-theme="dark"]) .compare__col--win .chip--red { color: #ff5a64; }
/* La fel noaptea: #ff4d58 pe fondul rosiatic al coloanei iese 4,35:1. */
html[data-theme="dark"] .compare__col--win .chip--red { color: #ff6670; }
/* Campurile fara regula proprie (cautarea din magazin, formularele) primeau
   gri-ul implicit al browserului, 4,3:1 pe fundalul gri deschis. */
html:not([data-theme="dark"]) ::placeholder { color: var(--text-faint); opacity: 1; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.85rem;
}
.kicker::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--red-fill, var(--red));
  transform: skewX(var(--skew));
}

.lead { color: var(--text-dim); font-size: 1.02rem; max-width: 60ch; }
.muted { color: var(--text-dim); }
.accent { color: var(--red); }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: #c9c9c9; }
.section--dark .lead, .section--dark p { color: #b9b9b9; }
.section-head { max-width: 660px; margin-bottom: clamp(2.4rem, 2rem + 2vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p { margin-top: 1rem; color: var(--text-dim); }
.section--dark .section-head p { color: #a9a9a9; }

/* Diagonal divider between sections */
.slash-divider {
  height: 72px;
  background: linear-gradient(to bottom right, transparent 49.6%, var(--ink) 50%);
}
.slash-divider--rev { background: linear-gradient(to top right, var(--ink) 49.6%, transparent 50%); }

/* ---------- Buttons (skewed slash style) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transform: skewX(var(--skew));
  /* Un buton inclinat cu eticheta pe doua randuri arata rupt, iar in engleza
     nu se vedea: „Get a Quote" incapea. In germana („Angebot anfordern") si in
     spaniola („Solicitar presupuesto") se rupea. Eticheta unui buton nu se
     desparte niciodata – daca nu incape, se face loc, nu se indoaie textul. */
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn > * , .btn { border-radius: 3px; }
.btn > span, .btn > svg { transform: skewX(calc(var(--skew) * -1)); display: inline-flex; align-items: center; gap: 0.5rem; }
.btn:active { transform: skewX(var(--skew)) translateY(1px); }

.btn--primary {
  background: var(--red-fill, var(--red));
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(191, 10, 26, 0.55);
}
.btn--primary:hover { background: var(--red-dark); transform: skewX(var(--skew)) translateY(-2px); box-shadow: 0 14px 30px -8px rgba(191, 10, 26, 0.6); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; transform: skewX(var(--skew)) translateY(-2px); }

.btn--outline { border-color: var(--text-strong); color: var(--text-strong); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--text-strong); border-color: #fff; }
.btn--white { background: #fff; color: var(--red); }
.btn--white:hover { transform: skewX(var(--skew)) translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.35); }

.btn--sm { padding: 0.48rem 1.1rem; font-size: 0.8rem; }
.btn--block { width: 100%; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink);
  font-size: var(--text-xs);
  color: #9a9a9a;
  position: relative;
  z-index: 61;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  flex-wrap: wrap;
}
.topbar a { color: #cfcfcf; transition: color var(--dur-fast); white-space: nowrap; font-weight: 500; }
.topbar a:hover { color: #fff; }
.topbar__phones { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.topbar__phones a { display: inline-flex; align-items: center; }
/* Click-to-call phone icon before each number */
.topbar__phones a::before {
  content: ""; flex: 0 0 auto; margin-right: 0.4rem; width: 13px; height: 13px;
  background: var(--red-fill, var(--red));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topbar__phones span { color: var(--red); font-weight: 700; margin-right: 0.3rem; }
.topbar__tag { letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; font-style: italic; font-family: var(--font-display); font-size: 0.85rem; }
@media (max-width: 720px) { .topbar__tag { display: none; } }

/* ---------- Topbar right cluster: phones · lang · theme switch · account ---------- */
.topbar__right { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.topbar__sep { width: 1px; height: 15px; background: rgba(255, 255, 255, 0.18); }

/* Language switch – bare (flag only) in the topbar */
.topbar .lang-switch { position: relative; display: inline-flex; }
.topbar .lang-btn { width: auto; height: auto; min-width: 0; padding: 0; border: none; background: none; display: inline-flex; align-items: center; }
.topbar .lang-btn:hover { border: none; }
.topbar .lang-btn .lang-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.topbar .lang-menu { top: calc(100% + 10px); right: 0; left: auto; z-index: 200; }
/* Meniul de limba sta in bara de sus, deci optiunile lui (link-uri) primeau
   `.topbar a { color: #cfcfcf }` – gri deschis gandit pentru bara neagra – pe
   meniul alb: contrast 1,6:1, limbile nu se mai citeau. Aici isi recapata
   culoarea meniului. */
.topbar .lang-menu .lang-opt { color: var(--text); }
.topbar .lang-menu .lang-opt:hover,
.topbar .lang-menu .lang-opt.is-active { color: var(--red); }

/* Account icon in topbar */
.topbar-ic { display: inline-flex; align-items: center; color: #cfcfcf; transition: color var(--dur-fast); }
.topbar-ic svg { width: 17px; height: 17px; }
.topbar-ic:hover { color: #fff; }

/* Theme toggle rendered as a sliding switch */
.theme-switch { padding: 0; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.theme-switch__track {
  position: relative; width: 48px; height: 24px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: space-between; padding: 0 5px;
  transition: background var(--dur-fast);
}
.theme-switch__ic { width: 12px; height: 12px; position: relative; z-index: 1; }
.theme-switch__ic--sun { color: #f6c453; }
.theme-switch__ic--moon { color: #aab2c0; }
.theme-switch__knob {
  position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: left var(--dur) var(--ease-out), background var(--dur-fast);
}
html[data-theme="dark"] .theme-switch__track { background: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .theme-switch__knob { left: calc(100% - 22px); background: var(--red-fill, var(--red)); }

/* Mobile: numbers (icon + country only) on the left, icons cluster on the right */
@media (max-width: 640px) {
  .topbar__right { gap: 0.5rem; width: 100%; flex-wrap: nowrap; }
  .topbar__phones { gap: 0.85rem; flex-wrap: nowrap; }
  /* Hide the actual number – keep the phone icon + country code (still a tel: link) */
  .topbar__phones a { font-size: 0; }
  .topbar__phones a span { font-size: 0.74rem; margin-right: 0; }
  .topbar__sep { display: none; }
  /* Push language / theme / account to the far right */
  .topbar .lang-switch { margin-left: auto; }
}

/* ---------- Header inline search bar ---------- */
.header-searchbar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0.44rem 0.8rem; transition: border-color var(--dur-fast);
  /* `min-width: 200px` fix o facea de nemiscat: la o eticheta de buton mai
     lunga decat cea englezeasca, antetul nu mai avea de unde ceda si
     butonul se rupea. Acum se strange pana la 140px, cat sa se vada ca e
     o casuta de cautare. */
  flex: 0 1 240px; min-width: 120px;
}
.header-searchbar:focus-within { border-color: var(--red); }
.header-searchbar svg { width: 17px; height: 17px; color: var(--text-faint); flex: 0 0 auto; }
.header-searchbar input {
  border: none; background: none; outline: none; width: 100%; min-width: 0;
  font-size: 0.9rem; color: var(--text-strong);
}
.header-searchbar input::placeholder { color: var(--text-faint); }
/* Pragul era 1100px, calculat pe eticheta englezeasca a butonului de oferta.
   Intre 1100 si 1220, cu o eticheta lunga (spaniola, italiana), bara de
   cautare era inca afisata dar ajunsese la minim: antetul nu mai avea de
   unde ceda si iesea din ecran. Cautarea ramane oricum accesibila din
   pagina de magazin si din meniul mobil. */
@media (max-width: 1220px) { .header-searchbar { display: none; } }
/* Pusa de `dmgFitHeader` cand antetul nu mai incape la latimea curenta,
   indiferent de prag: latimea meniului depinde de limba, nu de ecran. */
.header-searchbar.is-squeezed { display: none; }

/* Treptele de stramtare a meniului, puse de `dmgFitHeader` cand antetul nu
   incape. Meniul are sapte intrari, deci fiecare pixel taiat din padding se
   inmulteste cu paisprezece – de aici si castigul, care in rusa e de peste 70px.
   Se strang doar spatiile, nu marimea literei: un meniu micsorat se vede, unul
   mai stramt nu. */
.header__inner.is-tight .nav > a,
.header__inner.is-tight .nav__drop > a { padding-inline: 0.42rem; letter-spacing: 0.02em; }
.header__inner.is-tight .header__actions { gap: 0.4rem; }

.header__inner.is-tighter .nav > a,
.header__inner.is-tighter .nav__drop > a { padding-inline: 0.28rem; letter-spacing: 0; font-size: 0.96rem; }
.header__inner.is-tighter { gap: 0.6rem; }

/* ---------- Search panel that drops in just below the header (mobile) ---------- */
.msearch {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 59;
  background: var(--surface); border-bottom: 2px solid var(--red);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  padding: 0.7rem clamp(0.9rem, 4vw, 1.4rem) 0.8rem;
}
.msearch.is-open { opacity: 1; visibility: visible; transform: none; }
.msearch__form { display: flex; align-items: center; gap: 0.6rem; width: min(var(--container), 100%); margin-inline: auto; }
.msearch__form > svg { width: 20px; height: 20px; color: var(--text-faint); flex: 0 0 auto; }
.msearch__form input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 1.05rem; color: var(--text-strong); }
.msearch__form input::placeholder { color: var(--text-faint); }
.msearch__go { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 8px; background: var(--red-fill, var(--red)); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast); }
.msearch__go:hover { background: var(--red-dark); }
.msearch__go svg { width: 18px; height: 18px; }
.msearch__close { flex: 0 0 auto; background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 0 0.2rem; }
.msearch__close:hover { color: var(--red); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur);
}
.header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(17, 17, 17, 0.3); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 78px; }

/* Logoul nu se strange niciodata.
   Fiind element flex, ceda primul cand antetul devenea prea plin: in
   romana meniul e cu 141px mai lat decat in engleza, iar logoul ajungea
   turtit la 32px in loc de 112 – imaginea marcii, deformata, pe fiecare
   pagina. Ce cedeaza in schimb e casuta de cautare; vezi `fitHeader` din
   js/main.js, care o ascunde cand chiar nu mai incape. */
.logo { flex: 0 0 auto; }
.logo img { height: 54px; width: auto; max-width: none; }
@media (max-width: 500px) { .logo img { height: 48px; } }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav > a, .nav__drop > a {
  position: relative;
  padding: 0.5rem 0.62rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-strong);
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.nav > a::after, .nav__drop > a::after {
  content: "";
  position: absolute;
  left: 0.62rem; right: 0.62rem; bottom: 0.15rem;
  height: 3px;
  background: var(--red-fill, var(--red));
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav > a:hover::after, .nav > a.is-active::after,
.nav__drop > a:hover::after, .nav__drop > a.is-active::after { transform: skewX(var(--skew)) scaleX(1); }
.nav > a:hover, .nav > a.is-active, .nav__drop > a:hover, .nav__drop > a.is-active { color: var(--red); }

.nav__drop { position: relative; }
.nav__drop > a .caret { font-size: 0.65em; color: var(--text-faint); margin-left: 2px; }
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 0.5rem;
  display: grid;
  gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  box-shadow: 0 24px 50px -18px rgba(17, 17, 17, 0.25);
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Invisible bridge across the gap between the trigger and the dropdown so the
   menu stays open while the cursor travels from the link down onto the panel. */
.nav__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px;
}
/* The full-width shop mega sits further below the header, so it needs a taller
   bridge that reaches all the way up to the bottom of the nav links. */
.nav__menu--shop::before { top: -26px; height: 30px; }
.nav__menu a {
  display: block; padding: 0.65rem 0.9rem;
  font-size: var(--text-sm); font-weight: 500; color: var(--text);
  transition: all var(--dur-fast);
}
.nav__menu a:hover { background: var(--red-soft); color: var(--red); padding-left: 1.15rem; }

.header__actions { display: flex; align-items: center; gap: 0.8rem; }

.cart-btn, .account-btn {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
  color: var(--text-strong);
}
.cart-btn:hover, .account-btn:hover { border-color: var(--red); color: var(--red); }
.cart-btn__count {
  position: absolute; top: -8px; right: -8px;
  min-width: 19px; height: 19px; padding-inline: 4px;
  background: var(--red-fill, var(--red)); color: #fff;
  font-size: 0.68rem; font-weight: 800;
  border-radius: 99px;
  display: grid; place-items: center;
}
.cart-btn__count.is-empty { display: none; }
.cart-btn__count.bump { animation: bump 0.4s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.5); } }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 18px; height: 2px; background: var(--ink); transition: transform var(--dur), opacity var(--dur-fast); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1060px) {
  .burger { display: flex; }
  .header .btn--book { display: none; }
  .nav {
    position: fixed;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 3px solid var(--red);
    padding: 1rem 1.25rem 1.6rem;
    gap: 0.1rem;
    transform: translateY(-10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 55;
    box-shadow: 0 30px 50px -20px rgba(17,17,17,0.3);
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  /* Even rhythm: every top-level row shares identical height + a hairline divider,
     whether it is a plain link or a dropdown parent (Services / Shop). */
  .nav { gap: 0; }
  .nav > a, .nav__drop { display: block; border-bottom: 1px solid var(--line); }
  .nav > a, .nav__drop > a {
    display: block; padding: 0.9rem 0.15rem; font-size: 1.15rem;
  }
  .nav__drop > a { border-bottom: none; display: flex; align-items: center; justify-content: space-between; }
  /* Accordion submenus: collapsed by default, expand when parent is open */
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; padding: 0 0 0 1.2rem; min-width: 0;
    display: none;
  }
  .nav__drop.is-open .nav__menu { display: grid; padding-bottom: 0.4rem; }
  .nav__drop > a .caret { transition: transform var(--dur) var(--ease-out); display: inline-block; }
  .nav__drop.is-open > a .caret { transform: rotate(180deg); }
  .nav__drop.is-open > a { color: var(--red); }
}
/* Lock page scroll while the mobile menu is open (scroll happens inside the menu) */
body.nav-lock { overflow: hidden; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #9a9a9a; position: relative; overflow: hidden; }
.footer::before {
  content: "";
  position: absolute;
  top: -40px; right: -60px;
  width: 480px; height: 420px;
  background: linear-gradient(115deg, transparent 46%, rgba(191, 10, 26, 0.16) 46.5%, rgba(191, 10, 26, 0.16) 53%, transparent 53.5%);
  transform: skewX(var(--skew));
  pointer-events: none;
}
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-block: 4rem 3rem;
}
.footer h4 { font-size: 1.05rem; letter-spacing: 0.2em; color: #fff; margin-bottom: 1.2rem; }
.footer h4::after { content: ""; display: block; width: 28px; height: 3px; background: var(--red-fill, var(--red)); transform: skewX(var(--skew)); margin-top: 0.5rem; }
.footer p, .footer a, .footer li { font-size: var(--text-sm); color: #9a9a9a; }
.footer a { transition: color var(--dur-fast); }
.footer a:hover { color: #fff; }
.footer ul { display: grid; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.footer ul:not(.footer__contact) li { position: relative; padding-left: 1.05rem; }
.footer ul:not(.footer__contact) li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 5px; height: 5px; background: var(--red-fill, var(--red)); border-radius: 50%;
}
.footer__brand img { height: 52px; width: auto; }
.footer__brand p { margin-top: 1.1rem; max-width: 36ch; }
.footer__contact li { display: flex; gap: 0.6rem; align-items: baseline; }
.footer__contact strong { color: var(--red); font-weight: 700; min-width: 30px; font-size: var(--text-xs); }
.footer__bottom {
  position: relative;
  border-top: 1px solid var(--line-dark);
  padding-block: 1.3rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: var(--text-xs); color: #8f8f8f; /* #6f6f6f: 3,8:1 pe negru */
}
.footer__bottom a { color: #a8a8a8; }
.footer__bottom a:hover { color: #fff; }

/* Trust / payment badges row */
.footer__trust {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; flex-wrap: wrap;
  padding-block: 1.5rem; border-top: 1px solid var(--line-dark);
}
.footer__pay { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 9px; background: #fff; border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.pay-badge { min-width: 62px; }
.pay-badge img { height: 19px; width: auto; max-width: 52px; object-fit: contain; display: block; }
/* Marca Mastercard sunt doua cercuri suprapuse, aproape patrate; celelalte
   logouri sunt alungite. La aceeasi inaltime iesea 24px lata langa 52px a
   celorlalte – parea o insigna stricata, nu una compacta. Se masoara pe
   latime, ca sa cantareasca la fel in rand. */
.pay-badge img[src$="mastercard.svg"] { height: auto; width: 32px; }
.pay-badge svg { display: block; }
.pay-badge--visa { color: #1a1f71; font-style: italic; letter-spacing: 0.5px; }
.pay-badge--apple { color: #000; gap: 3px; }
.pay-badge--gpay { color: #5f6368; gap: 1px; }
.pay-badge--gpay .gpay-g { color: #4285f4; font-weight: 900; }
.pay-badge--paypal { color: #003087; font-style: italic; gap: 0; }
.pay-badge--paypal span { color: #009cde; }
.footer__anpc { display: flex; align-items: center; gap: 0.6rem; }
.anpc-link { display: inline-flex; align-items: center; transition: opacity var(--dur-fast); }
.anpc-link:hover { opacity: 0.85; }
.anpc-link img { height: 42px; width: auto; display: block; }
@media (max-width: 560px) { .footer__trust { justify-content: center; } }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal--left { transform: translateX(-34px); }
.reveal--right { transform: translateX(34px); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--red-fill, var(--red)); color: #fff; padding: 0.6rem 1rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Floating WhatsApp + mobile action bar + sheets + mini-cart
   ============================================================ */
/* Click-to-call FAB – sits at the very bottom, under WhatsApp */
.phone-fab {
  position: fixed; right: 20px; bottom: 22px; z-index: 85;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--red-fill, var(--red)); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -6px rgba(191, 10, 26, 0.6);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.phone-fab svg { width: 27px; height: 27px; }
.phone-fab:hover { transform: scale(1.08); background: var(--red-dark); }

.wa-fab {
  position: fixed; right: 20px; bottom: 90px; z-index: 85;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -6px rgba(37, 211, 102, 0.7);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur);
  animation: wa-pulse 2.6s ease-in-out infinite;
}
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 14px 32px -6px rgba(37, 211, 102, 0.8); }
@keyframes wa-pulse { 0%, 100% { box-shadow: 0 10px 26px -6px rgba(37,211,102,0.7); } 50% { box-shadow: 0 10px 26px -6px rgba(37,211,102,0.7), 0 0 0 10px rgba(37,211,102,0.12); } }
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }

/* Floating compare button (desktop, sits above WhatsApp) */
.cmp-fab {
  position: fixed; right: 20px; bottom: 158px; z-index: 85;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(17,17,17,0.5);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.cmp-fab:hover { transform: scale(1.08); background: var(--red-fill, var(--red)); }
.cmp-fab svg { width: 24px; height: 24px; }
.cmp-fab .js-compare-count {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding-inline: 4px;
  background: var(--red-fill, var(--red)); color: #fff; font-size: 0.66rem; font-weight: 800; border-radius: 99px;
  display: grid; place-items: center;
}
.cmp-fab .js-compare-count.is-empty { display: none; }
@media (max-width: 1060px) { .cmp-fab { display: none; } } /* compare is in the mobile bottom bar */

/* Shared backdrop */
.ui-backdrop {
  position: fixed; inset: 0; z-index: 94;
  background: rgba(17, 17, 17, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur), visibility var(--dur);
}
.ui-backdrop.is-open { opacity: 1; visibility: visible; }
body.ui-lock { overflow: hidden; }

/* Mobile bottom action bar (mobile only) */
.mobile-bar { display: none; }
@media (max-width: 768px) {
  .mobile-bar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(17, 17, 17, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bar__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.5rem 0.15rem 0.55rem; background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--text-dim); transition: color var(--dur-fast); white-space: nowrap;
  }
  .mobile-bar__item svg { width: 21px; height: 21px; }
  .mobile-bar__item:active, .mobile-bar__item:hover { color: var(--red); }
  .mobile-bar__item .js-cart-count,
  .mobile-bar__item .js-compare-count {
    position: absolute; top: 2px; right: calc(50% - 22px);
    min-width: 17px; height: 17px; padding-inline: 4px;
    background: var(--red-fill, var(--red)); color: #fff; font-size: 0.62rem; font-weight: 800;
    border-radius: 99px; display: grid; place-items: center;
  }
  .mobile-bar__item .js-cart-count.is-empty,
  .mobile-bar__item .js-compare-count.is-empty { display: none; }
  .mobile-bar__item .js-cart-count.bump,
  .mobile-bar__item .js-compare-count.bump { animation: bump 0.4s var(--ease-out); }
  /* Keep content clear of the fixed bar */
  body { padding-bottom: 60px; }
  .phone-fab { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px); right: 16px; width: 50px; height: 50px; }
  .phone-fab svg { width: 24px; height: 24px; }
  .wa-fab { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px + 62px); right: 16px; width: 52px; height: 52px; }
  .wa-fab svg { width: 29px; height: 29px; }
}

/* Categories bottom sheet */
.cat-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px;
  padding: 1.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(102%); transition: transform var(--dur) var(--ease-out);
  box-shadow: 0 -20px 50px -20px rgba(17, 17, 17, 0.4);
  max-height: 84dvh; overflow-y: auto;
}
.cat-sheet.is-open { transform: none; }
.cat-sheet__head, .mini-cart__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-strong);
  padding-bottom: 0.7rem; margin-bottom: 1rem; border-bottom: 2px solid var(--red);
}
.cat-sheet__head { position: relative; }
.sheet-close { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1.9rem; line-height: 1; padding: 0 0.2rem; }
.sheet-close:hover { color: var(--red); }
.cat-sheet__back {
  background: none; border: none; cursor: pointer; color: var(--text-strong); padding: 0 0.4rem 0 0;
  display: none; align-items: center;
}
.cat-sheet__back.is-visible { display: inline-flex; }
.cat-sheet__back svg { width: 22px; height: 22px; }
.cat-sheet__head [data-cat-title] { flex: 1; }
/* Two-step slider */
.cat-sheet__viewport { overflow-x: hidden; overflow-y: hidden; }
.cat-sheet__track { display: flex; width: 200%; transition: transform var(--dur) var(--ease-out); }
.cat-sheet__track.is-sub { transform: translateX(-50%); }
.cat-sheet__level { width: 50%; flex: 0 0 50%; align-content: start; }
/* Once on the sub level, hide the main level outright so its red All-Products
   border can't peek through at the track seam (it's sliding off-screen anyway). */
.cat-sheet__track.is-sub [data-cat-main] { visibility: hidden; }
/* Main level: 2-column tiles with big icons */
[data-cat-main] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.cat-tilebtn {
  display: flex; flex-direction: row; align-items: center; text-align: left; gap: 0.75rem; width: 100%;
  padding: 0.8rem 0.85rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer;
  color: var(--text-strong); transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.cat-tilebtn:active { transform: scale(0.98); }
.cat-tilebtn:hover { border-color: var(--red); }
.cat-tilebtn__ic { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; background: var(--red-soft); border-radius: 12px; color: var(--red); }
.cat-tilebtn__ic .picon { width: 26px; height: 26px; }
.cat-tilebtn__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cat-tilebtn__label { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.cat-tilebtn em { font-style: normal; font-size: var(--text-xs); color: var(--text-faint); }
.cat-tilebtn--all { grid-column: 1 / -1; justify-content: flex-start; background: var(--red-soft); border-color: var(--red); color: var(--red); }
.cat-tilebtn--all .cat-tilebtn__ic { background: var(--red-fill, var(--red)); color: #fff; }
/* Sub level: 2-column list to match the main category grid */
[data-cat-sub] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cat-sheet__viewall {
  grid-column: 1 / -1;
  display: block; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem;
  text-align: center;
}
.cat-sheet__viewall:hover { background: var(--red-fill, var(--red)); color: #fff; }
.cat-sheet__item--sub {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0.85rem 0.8rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-strong); font-size: 0.9rem; min-height: 3.1rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cat-sheet__item--sub:hover { border-color: var(--red); background: var(--red-soft); color: var(--red); }

/* Mini-cart drawer (from right) */
.mini-cart {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 95;
  width: min(360px, 92vw); background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform var(--dur) var(--ease-out);
  box-shadow: -20px 0 50px -20px rgba(17, 17, 17, 0.5);
}
.mini-cart.is-open { transform: none; }
.mini-cart__head { padding: 1.2rem 1.3rem 0.7rem; margin-bottom: 0; }
.mini-cart__body { flex: 1; overflow-y: auto; padding: 0.4rem 1.3rem; }
.mini-cart__foot { padding: 1.1rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; }
.mini-cart__total span { color: var(--text-dim); font-size: var(--text-sm); }
.mini-cart__total strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--red); }
.mini-cart__empty { text-align: center; padding: 3rem 1rem; color: var(--text-dim); }
.mini-cart__empty svg { width: 46px; height: 46px; color: var(--text-faint); margin: 0 auto 1rem; }
.mini-cart__empty p { margin-bottom: 1.2rem; font-size: var(--text-sm); }
.mini-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 0.8rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.mini-item__thumb { width: 54px; height: 46px; border-radius: 6px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; }
.mini-item__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; }
.mini-item__thumb svg.picon { width: 55%; color: var(--text-strong); }
.mini-item__name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; line-height: 1.15; color: var(--text-strong); text-transform: uppercase; }
.mini-item__name:hover { color: var(--red); }
.mini-item__meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: 0.15rem; }
.mini-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.mini-item__right strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-strong); }
.mini-item__rm { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 1.2rem; line-height: 1; padding: 0; }
.mini-item__rm:hover { color: var(--red); }

/* ---------- Nav dropdown: category items with icons ---------- */
.nav__menu a.nav__cat { display: flex; align-items: center; gap: 0.65rem; }
.nav__cat svg { width: 18px; height: 18px; color: var(--red); flex: 0 0 auto; }
.nav__cat em { margin-left: auto; font-style: normal; font-size: var(--text-xs); color: var(--text-faint); }
.nav__menu a.nav__cat:hover { padding-left: 1.15rem; }

/* ---------- Header search ---------- */
.search-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface);
  cursor: pointer; color: var(--text-strong);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.search-btn:hover { border-color: var(--red); color: var(--red); }
.search-btn svg { width: 19px; height: 19px; }

/* ---------- Header icon buttons (wishlist / compare) ---------- */
.header-ic {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--text-strong); transition: border-color var(--dur-fast), color var(--dur-fast);
}
.header-ic:hover { border-color: var(--red); color: var(--red); }
.header-ic svg { width: 19px; height: 19px; }
.wish-btn.is-live svg { fill: var(--red); color: var(--red); }
.header-ic > span {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--red-fill, var(--red)); color: #fff; font-size: 0.66rem; font-weight: 800; border-radius: 99px;
  display: grid; place-items: center;
}
.header-ic > span.is-empty { display: none; }
.header-ic > span.bump { animation: bump 0.4s var(--ease-out); }

/* ---------- Language switcher (flag only) ---------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
  overflow: hidden; transition: border-color var(--dur-fast);
}
.header__actions { gap: 0.5rem; }
/* Butonul de oferta isi pastreaza latimea ceruta de text; ce cedeaza in
   antet e casuta de cautare, care are de unde. */
.btn--book {
  /* Spatierea mare arata bine pe eticheta englezeasca, dar pe cea
     spaniola (SOLICITAR PRESUPUESTO) adauga peste 20px doar din spatiul
     dintre litere si impingea antetul in afara ecranului. Mai stransa pe
     butonul asta, nu pe toate: e singurul care poarta o eticheta de
     lungime imprevizibila intr-un rand deja plin. */
  padding: 0.6rem 0.95rem; font-size: 0.82rem; letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.lang-btn:hover { border-color: var(--red); }
.lang-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.lang-flag--btn { width: 24px; height: 17px; }
.lang-opt .lang-flag { width: 20px; height: 15px; }
/* Shop drop caret is pointless on mobile (submenu hidden) */
@media (max-width: 1060px) { .nav__drop:has(.nav__menu--shop) > a .caret { display: none; } }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 59;
  min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--red);
  padding: 0.4rem; display: grid; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  box-shadow: 0 22px 50px -18px rgba(17,17,17,0.28);
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-opt {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0.55rem 0.7rem; font-size: var(--text-sm); color: var(--text); border-radius: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-opt:hover { background: var(--red-soft); color: var(--red); }
.lang-opt.is-active { color: var(--red); font-weight: 600; }
.lang-opt__code {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em;
  min-width: 26px; padding: 0.1rem 0.3rem; text-align: center;
  border: 1px solid var(--line); border-radius: 4px; color: var(--text-faint);
}
.lang-opt.is-active .lang-opt__code { border-color: var(--red); color: var(--red); }

/* ---------- Shop mega menu (desktop: full-width bar, compact) ---------- */
@media (min-width: 1061px) {
  /* Anchor the panel to the header so it can span the full container width */
  .nav__drop:has(> a[href="shop.html"]) { position: static; }
  .nav__menu--shop {
    position: absolute; left: 0; right: 0; top: 100%; width: auto; min-width: 0;
    padding: 0; border: none; border-top: 3px solid var(--red);
    transform: translateY(10px);
    box-shadow: 0 26px 50px -18px rgba(17,17,17,0.22);
  }
  .nav__drop:hover .nav__menu--shop,
  .nav__drop:focus-within .nav__menu--shop { transform: translateY(0); }
  .nav__menu--shop .mega {
    width: min(var(--container), 100% - 2.5rem); margin-inline: auto;
    padding: 1.5rem 0 1.7rem;
  }
  /* 4 columns × 2 rows: wider columns, bigger titles/icons. */
  .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 2.4rem; align-items: start; }
  /* Specificity must beat `.nav__menu a { display:block }` so the icon sits inline-left of the label. */
  .nav__menu--shop .mega__cat {
    display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.3rem; padding-bottom: 0.5rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; line-height: 1.15;
    text-transform: uppercase; color: var(--text-strong); border-bottom: 2px solid var(--line);
    min-height: 2.5em;
  }
  .mega__cat svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--red); }
  .mega__cat:hover { color: var(--red); border-bottom-color: var(--red); }
  .mega__subs { display: grid; gap: 0; margin-top: 0.35rem; }
  .mega__subs a { display: block; padding: 0.27rem 0; font-size: 0.9rem; line-height: 1.3; color: var(--text-dim); }
  .mega__subs a:hover { color: var(--red); }
}

/* Trim header controls on smaller screens to avoid crowding */
@media (max-width: 1060px) {
  .compare-btn { display: none; }
  /* Shop mega menu is desktop-only; on mobile the fixed bottom bar handles categories */
  .nav__drop--shop, .nav__menu--shop { display: none !important; }
}
@media (max-width: 1060px) {
  /* Search & account live in the fixed bottom bar on mobile – keep the header lean */
  .header__actions .search-btn, .header__actions .account-btn { display: none; }
  .header__actions { gap: 0.4rem; }
}
@media (max-width: 640px) {
  .header-ic, .lang-btn { width: 36px; height: 36px; }
  .header-ic svg { width: 17px; height: 17px; }
  .lang-flag--btn { width: 21px; height: 15px; }
}
.header-search {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 3px solid var(--red);
  box-shadow: 0 20px 40px -20px rgba(17,17,17,0.28);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  z-index: 58;
}
.header-search.is-open { transform: none; opacity: 1; visibility: visible; }
.header-search__form { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 0; }
.header-search__form .container { display: contents; }
.header-search__wrap { position: relative; flex: 1; display: flex; align-items: center; }
.header-search__wrap > svg { position: absolute; left: 0.9rem; width: 18px; height: 18px; color: var(--text-faint); }
.header-search input {
  width: 100%; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem 0.75rem 2.5rem; color: var(--text-strong);
}
.header-search input:focus { outline: none; border-color: var(--red); }
.header-search__close {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  font-size: 1.5rem; line-height: 1; padding: 0 0.3rem;
}
.header-search__close:hover { color: var(--red); }
@media (max-width: 640px) {
  .search-btn { width: 38px; height: 38px; }
  .search-btn svg { width: 17px; height: 17px; }
  .header-search__form { padding: 0.7rem 0; gap: 0.5rem; }
  .header-search .btn { display: none; }
}
@media (max-width: 380px) { .search-btn { width: 36px; height: 36px; } }

/* ============================================================
   MOBILE REFINEMENTS - compact header + tighter spacing
   ============================================================ */
@media (max-width: 640px) {
  /* Compact topbar: one tight scrollable row */
  .topbar { font-size: 0.68rem; }
  .topbar__inner { padding-block: 0.35rem; gap: 0.3rem 0.9rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; }
  .topbar__inner::-webkit-scrollbar { display: none; }
  .topbar__phones { gap: 0.85rem; flex-wrap: nowrap; }
  .topbar__phones a { white-space: nowrap; }
  /* Bara derulabila (`overflow-x: auto`) taie tot ce iese din ea, inclusiv
     meniul de limba: pe telefon se deschidea invizibil si limba nu se putea
     schimba deloc. Fix, meniul iese din bara si sta sub ea. */
  .topbar .lang-menu { position: fixed; top: 40px; right: 10px; max-height: calc(100dvh - 56px); overflow-y: auto; }

  /* Compact header */
  .header__inner { height: 64px; gap: 0.6rem; }
  .logo img { height: 42px; }
  .header__actions { gap: 0.45rem; }
  .cart-btn, .account-btn, .burger { width: 38px; height: 38px; border-radius: 7px; }
  .cart-btn svg, .account-btn svg { width: 17px; height: 17px; }

  /* Mobile nav aligns to the shorter header */
  .nav { top: 64px; max-height: calc(100dvh - 64px); padding: 0.8rem 1.1rem 1.3rem; }
  .nav > a, .nav__drop > a { padding: 0.72rem 0.55rem; font-size: 1.05rem; }

  /* Tighter vertical rhythm site-wide */
  :root { --space-section: 2.1rem; }
  .section-head { margin-bottom: 1.8rem; }
  .grid-2, .grid-3, .grid-4 { gap: 1rem; }

  /* Page hero (interior) more compact */
  .page-hero { padding-block: 2.4rem 2rem; }
  .page-hero p { font-size: 0.92rem; }

  /* Cards / steps tighter */
  .card { padding: 1.5rem 1.3rem; }
  .footer__grid { padding-block: 2.8rem 2.2rem; }

  /* Centered buttons on mobile */
  .hero__cta { justify-content: center; }
  .section .container > p:has(.btn) { text-align: center; }
  .cta-band__inner { flex-direction: column; text-align: center; }
  .cta-band__inner > div { width: 100%; justify-content: center; }
  .cta-band h2, .cta-band p { margin-inline: auto; }
}

@media (max-width: 380px) {
  .logo img { height: 38px; }
  .header__inner { gap: 0.45rem; }
  .header__actions { gap: 0.35rem; }
  .cart-btn, .account-btn, .burger { width: 36px; height: 36px; }
}