/* ==========================================================================
   Motorider — TEMOS STILIAI (v2 handoff fidelity)
   Bazė (body, h1–h4, .eyebrow, .grad-bar, .accent-word) = design-system/base.css.
   Viskas iš var(--token). Jokių magiškų px/hex (tik gradientų stop'ai iš prototipo).
   ========================================================================== */

/* ---- LAYOUT ------------------------------------------------------------- */
/* Sklandus scroll anchor nuorodoms (subnav, doc TOC). Reduced-motion → auto (motion.css *) */
html { scroll-behavior: smooth; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .wrap { padding-inline: var(--gutter-lg); } }
.section-pad { padding-block: var(--space-section); }
.grid { display: grid; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-accent); color: #fff; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); }
.skip-link:focus { left: var(--space-md); top: var(--space-md); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.section-head h2 { margin: 6px 0 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap; }

/* speed-line tekstūra + ghost wordmark (tik tamsiose zonose) */
.mr-tex-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  background-image: repeating-linear-gradient(105deg, rgba(255,255,255,1) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 92%);
  mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 92%); }
.mr-ghost { position: absolute; pointer-events: none; user-select: none; font-family: var(--font-display);
  font-weight: var(--fw-black); font-style: italic; line-height: 0.8; letter-spacing: -0.04em; white-space: nowrap;
  color: rgba(255,255,255,0.035); bottom: -9%; right: -2%; text-align: right; }

/* ========================================================================
   HEADER
   ======================================================================== */
/* WP admin bar offset — prisijungus header + sticky elementai pastumiami žemyn (nebe po admin bar) */
body.admin-bar { --admin-bar-h: 32px; }
/* Mobiliame WP admin bar yra absolute (nuskrolinamas) → paliktų tarpą po fixed header'iu.
   Padarom fixed, kad nedingtų ir header visada būtų teisingai po juo. */
@media screen and (max-width: 782px) {
	body.admin-bar { --admin-bar-h: 46px; }
	#wpadminbar { position: fixed !important; }
}
.site-header { position: fixed; top: var(--admin-bar-h, 0px); left: 0; right: 0; z-index: 50;
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
  background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border); color: var(--text-body); }
.site-header__inner { max-width: var(--container); margin-inline: auto; height: var(--header-h);
  padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
@media (min-width: 768px) { .site-header__inner { padding-inline: var(--gutter-lg); } }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 24px; width: auto; }
.logo--white { display: none; }

/* Transparent virš hero */
.site-header[data-transparent="1"]:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.site-header[data-transparent="1"]:not(.is-scrolled) .logo--blue { display: none; }
.site-header[data-transparent="1"]:not(.is-scrolled) .logo--white { display: block; }

.site-nav { display: flex; gap: var(--space-xl); align-items: center; }
.site-nav a, .site-nav .nav-mega { font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm);
  color: inherit; text-decoration: none; letter-spacing: 0.01em; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 0; transition: color var(--motion-base) var(--ease-out); }
.site-header:not([data-transparent="1"]) .site-nav a:hover,
.site-header.is-scrolled .site-nav a:hover,
.nav-mega[aria-expanded="true"] { color: var(--color-accent); }
.nav-mega__chev { display: inline-grid; transition: transform var(--motion-base) var(--ease-out); }
.nav-mega[aria-expanded="true"] .nav-mega__chev { transform: rotate(180deg); }

.header-right { display: flex; align-items: center; gap: var(--space-md); }
.dealer-soon { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted);
  font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); cursor: not-allowed; white-space: nowrap; }
.site-header[data-transparent="1"]:not(.is-scrolled) .dealer-soon { color: rgba(255,255,255,0.6); }
.pill-soon { background: var(--color-surface); color: var(--text-muted); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); font-size: 9px; font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; padding: 2px 7px; }
.site-header[data-transparent="1"]:not(.is-scrolled) .pill-soon { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.25); }

.nav-toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; }

/* Desktop / mobile switch */
@media (max-width: 959px) {
  .site-nav, .dealer-soon, .header-cta, .mega { display: none !important; }
  .nav-toggle { display: inline-flex; }
}

/* MEGA MENU */
.mega { background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
/* The header is fixed, so an open mega panel runs past the bottom of the viewport and its last
   rows of models cannot be reached on a short or narrow screen (client report 2026-07-31).
   The whole panel is capped at the height left under the header, but only the model grid scrolls:
   the category switcher and the links column stay put, which is what they are there for. */
.mega__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter-lg);
  display: grid; grid-template-columns: 220px 1fr 250px; gap: var(--space-2xl); }
/* The cap lives on the middle column, not on the panel around it: a max-height on the grid would
   clip the row rather than shrink it, and the models would spill out instead of scrolling.
   Height left under the header, minus this panel's own vertical padding. */
/* The column reaches across the grid gap to the links divider, and the panel pads that width back
   off its content: the cards keep their size, but the scrollbar sits by the divider instead of
   running down the edge of the models. */
.mega__col { display: flex; flex-direction: column; min-height: 0; margin-right: calc(var(--space-2xl) * -1);
  max-height: calc(100vh - var(--header-h) - var(--admin-bar-h, 0px) - var(--space-xl) * 2);
  max-height: calc(100dvh - var(--header-h) - var(--admin-bar-h, 0px) - var(--space-xl) * 2); }
.mega__cats { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--color-border); padding-right: var(--space-lg); }
.mega__cat { appearance: none; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; text-align: left;
  padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); color: var(--text-heading); }
.mega__cat.is-on { background: var(--color-surface); color: var(--color-accent); font-weight: var(--fw-bold); }
/* A category name that wraps must not squeeze its arrow — icons keep one size across the list. */
.mega__cat .mr-icon { flex: none; }
.mega__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-lg); }
.mega__head::before { content: ""; width: 4px; height: 18px; background: var(--color-accent); }
.mega__head span { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.mega__models { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.mega__panel { display: none; }
.mega__panel.is-on { display: grid; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-right: var(--space-2xl); }
.mega__model { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.mega__model-media { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.mega__model-media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; }
.mega__model-tag { position: absolute; top: 6px; left: 6px; background: var(--color-accent); color: #fff; font-family: var(--font-utility);
  font-weight: var(--fw-bold); font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-sm); }
.mega__model-title { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-heading); text-align: center; }
.mega__model-price { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--color-accent); text-align: center; }
.mega__links { display: flex; flex-direction: column; border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
.mega__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--color-border);
  color: var(--text-body); text-decoration: none; font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.mega__link.is-disabled { color: var(--text-muted); cursor: not-allowed; }
.mega__link.is-disabled > span:first-child { opacity: 0.55; display: inline-flex; align-items: center; gap: 10px; }
.mega__link > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.mega__all { margin-top: var(--space-lg); display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent);
  text-decoration: none; font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
/* Mega hover — kaip visur svetainėje: tekstinės nuorodos → accent, plytelės → zoom + pavadinimas accent.
   BE underline (base.css a:hover pridedа pabraukimą — čia jį nutildom). */
.mega__link:hover, .mega__all:hover, .mega__model:hover, .mega__model-title:hover { text-decoration: none; }
.mega__link { transition: color var(--motion-base) var(--ease-out); }
.mega__link:not(.is-disabled):hover { color: var(--color-accent); }
.mega__model-media img { transition: transform var(--motion-base) var(--ease-out); }
.mega__model:hover .mega__model-media img { transform: scale(1.06); }
.mega__model-title { transition: color var(--motion-base) var(--ease-out); }
.mega__model:hover .mega__model-title { color: var(--color-accent); }

/* MOBILE MENU */
.mobile-menu { position: fixed; inset: calc(var(--header-h) + var(--admin-bar-h, 0px)) 0 0 0; z-index: 60; background: var(--color-bg); overflow: hidden; visibility: hidden; }
.mobile-menu.is-open { visibility: visible; } /* atsiranda akimirksniu — jokio slide iš šono pirmą kartą */
/* Daugiapakopis akordeonas — pakopos ĮSLYSTA iš dešinės (kaip etalone) */
.mm-level { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--color-bg);
  padding: var(--space-md) var(--gutter) var(--space-2xl); transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-out); }
.mm-level.is-active { transform: translateX(0); z-index: 2; }
.mm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--color-border);
  background: none; cursor: pointer; text-align: left; font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-h4); color: var(--text-heading); text-decoration: none; }
.mm-item > span:first-child { display: inline-flex; align-items: baseline; gap: 8px; }
.mm-item--disabled { color: var(--text-muted); cursor: not-allowed; }
.mm-item--disabled > span:first-child { align-items: center; gap: 10px; opacity: 0.6; }
.mm-count { font-size: var(--fs-xs); color: var(--text-muted); }
.mm-item .mr-icon { flex: none; }
.mm-cta { margin-top: var(--space-lg); }
.mm-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; cursor: pointer; color: var(--text-muted); font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.mm-title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); color: var(--text-heading); margin: var(--space-sm) 0 var(--space-md); }
.mm-model { display: flex; align-items: center; gap: var(--space-md); width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.mm-model__img { flex-shrink: 0; width: 72px; height: 54px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); display: grid; place-items: center; }
.mm-model__img img { width: 100%; height: 100%; object-fit: contain; }
.mm-model__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mm-model__title { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--text-heading); }
.mm-model__price { font-family: var(--font-utility); font-size: var(--fs-sm); color: var(--text-muted); }
.mm-model .mr-icon { color: var(--text-muted); flex-shrink: 0; }
/* Mobiliame meniu — jokio hover underline */
.mm-item:hover, .mm-model:hover, .mm-back:hover { text-decoration: none; }
/* Burger → X kai meniu atidarytas */
.nav-toggle__menu, .nav-toggle__x { display: inline-flex; }
.nav-toggle__x { display: none; }
body.mm-open .nav-toggle__menu { display: none; }
body.mm-open .nav-toggle__x { display: inline-flex; }
/* Tituliniame: atidarius meniu header nebe permatomas per hero — tampa baltas.
   Persijungia AKIMIRKSNIU (be fade) — kad matytųsi tik meniu slydimas, ne header „pasišviesinimas". */
body.mm-open .site-header { transition: none; }
body.mm-open .site-header[data-transparent="1"]:not(.is-scrolled) { background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); color: var(--text-body); }
body.mm-open .site-header[data-transparent="1"]:not(.is-scrolled) .logo--white { display: none; }
body.mm-open .site-header[data-transparent="1"]:not(.is-scrolled) .logo--blue { display: block; }

/* ========================================================================
   BUTTON
   ======================================================================== */
/* Tikslūs DS Button stiliai (ištraukta iš v2 preview computed):
   weight 500 · border 1px · radius 8px · sm 8/16·14 · md 12/24·16 · lg 16/32·18 */
.btn { --bg: var(--color-accent); --fg: #fff; --bd: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--fw-medium); line-height: 1; text-decoration: none;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--radius-md);
  padding: 12px 24px; font-size: var(--fs-body); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn .mr-icon { width: 1em; height: 1em; }

/* Sending state (forms): the icon gives way to a spinner; label text is swapped by JS. */
.btn.is-loading { pointer-events: none; }
.btn.is-loading:disabled { opacity: 0.85; }
.btn.is-loading .mr-icon { display: none; }
.btn.is-loading::after { content: ""; width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin 0.7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 2s; } }

.btn--primary { --bg: var(--color-accent); --bd: var(--color-accent); --fg: #fff; }
.btn--primary:hover:not(:disabled) { --bg: var(--color-accent-hover); --bd: var(--color-accent-hover); }
.btn--secondary { --bg: transparent; --fg: var(--text-heading); --bd: var(--color-border-strong); }
.btn--secondary:hover:not(:disabled) { --fg: var(--color-accent); --bd: var(--color-accent); }
.btn--ghost { --bg: transparent; --fg: var(--color-accent); --bd: transparent; }
.btn--ghost:hover:not(:disabled) { --bg: var(--color-accent-tint); }

/* onDark — translucent baltas (ant nuotraukų/tamsaus) */
.btn--on-dark.btn--secondary { --bg: rgba(255,255,255,0.10); --fg: #fff; --bd: rgba(255,255,255,0.55); }
/* onDark outline hover: transparent balta pašviesėja + border/tekstas paryškėja (NE mėlynas — blogai skaitosi ant nuotraukos) */
.btn--on-dark.btn--secondary:hover:not(:disabled) { --bg: rgba(255,255,255,0.18); --bd: rgba(255,255,255,0.95); --fg: #fff; }

/* Dydžiai (tikslios reikšmės iš preview) */
.btn--sm { padding: 8px 16px; font-size: var(--fs-sm); gap: 6px; }
.btn--lg { padding: 16px 32px; font-size: var(--fs-h4); gap: 10px; }
.btn--block { width: 100%; }

/* Header „Susisiekti": virš hero = secondary onDark; nuscrolinus = primary (state-switch) */
.site-header[data-transparent="1"]:not(.is-scrolled) .header-cta .btn {
  background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.55); }
.site-header[data-transparent="1"]:not(.is-scrolled) .header-cta .btn:hover {
  background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.95); color: #fff; }

/* ========================================================================
   BADGE
   ======================================================================== */
.badge { display: inline-flex; align-items: center; font-family: var(--font-utility); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.badge--blue.badge--solid { background: var(--color-accent); color: #fff; }
.badge--blue.badge--soft { background: var(--color-accent-tint); color: var(--color-accent); }
.badge--neutral.badge--soft { background: var(--color-surface); color: var(--text-muted); }
.badge--success.badge--soft { background: rgba(27,158,110,0.12); color: var(--color-success); }
.badge--warning.badge--soft { background: rgba(232,161,58,0.14); color: var(--color-warning); }
.badge--danger.badge--soft { background: rgba(214,69,69,0.12); color: var(--color-danger); }

/* ========================================================================
   CATEGORY TILE
   ======================================================================== */
.ctile { position: relative; display: block; aspect-ratio: var(--ctile-ar, 3/4); overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-dark-2); color: #fff; }
.ctile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-base) var(--ease-out); }
.ctile:hover .ctile__img { transform: scale(1.06); }
/* Brandbook: protection gradientas dark-teal .55 (ne juoda) */
.ctile__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,33,0) 12%, rgba(0,26,33,0.35) 55%, rgba(0,26,33,0.82) 100%); }
.ctile:not(.ctile--panel) .mr-tex-lines { opacity: 0.09; }
/* Branded panel (be nuotraukos) — dark teal + speed-lines + „CFMOTO" ghost */
.ctile--panel { background: var(--surface-dark); }
.ctile__ghost { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-black); font-style: italic; font-size: clamp(30px, 5.5vw, 46px); letter-spacing: -0.04em; color: rgba(255,255,255,0.06); user-select: none; transition: transform var(--motion-base) var(--ease-out); }
.ctile--panel .mr-tex-lines { transition: transform var(--motion-base) var(--ease-out); }
/* Tile hover = ZOOM IN (kaip etalone), ne spalvos keitimas. Panel be nuotraukos — zoom'inam ghost+tekstūrą. */
.ctile--panel:hover .ctile__ghost, .ctile--panel:hover .mr-tex-lines { transform: scale(1.06); }
.ctile__body { position: absolute; inset: auto 0 0 0; padding: var(--space-lg); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.ctile__count { display: block; font-family: var(--font-utility); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 4px; }
.ctile__label { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.ctile__chip { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18); transition: background var(--motion-fast) var(--ease-out); }
.ctile:hover .ctile__chip { background: var(--color-accent); }

/* ========================================================================
   PRODUCT CARD
   ======================================================================== */
.pcard { display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs);
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.pcard:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-md); text-decoration: none; }
.pcard__cat { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.pcard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-base) var(--ease-out); }
.pcard--cutout .pcard__media img { object-fit: contain; padding: 8%; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--color-accent); color: #fff; font-family: var(--font-utility);
  font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.pcard__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.pcard__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-heading); }
.pcard__price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-utility); font-weight: var(--fw-black); font-size: var(--fs-h3); color: var(--color-accent); }
/* Add-on price ("+1 000 € su daiktadėžėmis") lives in this tooltip: a second line would leave a gap
   under the price on every card that has no add-on. Negative margin widens the hover target without
   moving anything; the tooltip opens upwards so .pcard's overflow never clips it. */
.pcard__info { position: relative; display: inline-grid; place-items: center; padding: 5px; margin: -5px; transform: translateY(-3px); color: var(--text-muted); }
.pcard__info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 190px; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--text-heading); color: #fff;
  font-family: var(--font-utility); font-weight: var(--fw-regular); font-size: var(--fs-xs); line-height: var(--lh-snug); text-align: center;
  opacity: 0; visibility: hidden; transition: opacity var(--motion-fast) var(--ease-out); pointer-events: none; z-index: 2; }
.pcard__info:hover::after, .pcard__info:focus-visible::after { opacity: 1; visibility: visible; }
/* Where a pointer can hover, the note text is for screen readers only — everyone else gets the
   tooltip. Below it, on touch, the tooltip is unreachable (a tap opens the model), so the icon goes
   and the note becomes a plain second line. */
.pcard__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) {
  .pcard__info { display: none; }
  .pcard__note { position: static; width: auto; height: auto; clip: auto; white-space: normal;
    font-family: var(--font-utility); font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--text-muted); }
}

/* ========================================================================
   KEY SPECS
   ======================================================================== */
.keyspecs { display: grid; grid-template-columns: repeat(var(--ks-count, 4), 1fr); gap: var(--space-lg); }
.keyspecs__item { display: flex; flex-direction: column; gap: 4px; }
.keyspecs__figure { display: flex; align-items: baseline; gap: 4px; }
.keyspecs__value { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: var(--ls-tight); color: var(--text-heading); }
.keyspecs__unit { font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-body); color: var(--text-muted); }
.keyspecs__label { font-family: var(--font-utility); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.keyspecs--on-dark .keyspecs__value { color: #fff; }
.keyspecs--on-dark .keyspecs__unit, .keyspecs--on-dark .keyspecs__label { color: rgba(255,255,255,0.65); }
/* mobile: keyspecs po 2 stulpelius (4-in-a-row susispaustų telefone) */
@media (max-width: 640px) { .keyspecs { grid-template-columns: repeat(2, 1fr); } }

/* ========================================================================
   HERO (4 sluoksniai: scene → CFORCE → cutout → C5 → gradient → turinys)
   ======================================================================== */
/* --wm: wordmark dydis. Mobiliame min pakeltas 109→150 (buvo per mažas); 40vw riba saugo,
   kad „CFORCE" neišlįstų mažuose telefonuose. Desktop (≥~683px) identiškas (22vw).
   60vh-250px dėmuo: plačiuose-bet-žemuose languose (MacBook Air ~1470×755) vw-dydis C5
   užlipdavo ant „Naujiena" bloko. Geometrija: C5 apačia = 0.18*hero + 1.25*wm (hero = 92vh),
   turinio blokas nuo hero apačios 280px → 60vh-250px išlaiko ~36px tarpą; ≥963px aukščio
   languose dėmuo ≥328px cap, tad fullscreen desktop nepasikeičia. max(150px, ...) — floor,
   kad ekstremaliai žemuose (landscape telefonai) dydis nenueitų į nulį/minusą. */
.hero { --wm: min(clamp(150px, 22vw, 328px), 40vw, max(150px, 60vh - 250px)); position: relative; min-height: 92vh; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; background: var(--surface-dark-deep); }
/* Planšetės (iPad ir pan., 641–1024px): C5 wordmark didesnis — vw-pagrįstas 22vw per mažas
   tokiuose siauruose+aukštuose ekranuose. Desktop (>1024) ir telefonai (≤640) nepaliesti.
   Tas pats 60vh-250px aukščio saugiklis — iPad landscape (1024×768) 34vw kitaip per didelis. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero { --wm: min(34vw, 360px, max(150px, 60vh - 250px)); }
}
.hero__scene, .hero__cutout { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; pointer-events: none; }
.hero__scene { z-index: 1; }
.hero__cutout { z-index: 4; }
.hero__wm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__wm--back { z-index: 3; }
.hero__wm--front { z-index: 5; }
.hero__wm b { position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter-lg)));
  font-family: var(--font-display); font-weight: var(--fw-black); font-style: italic; color: #fff; letter-spacing: var(--ls-tight); }
.hero__wm--back b { top: 18%; font-size: calc(var(--wm) * 0.55); line-height: 0.84; text-shadow: 0 6px 26px rgba(0,16,21,0.2); }
.hero__wm--front b { top: calc(18% + var(--wm) * 0.47); font-size: var(--wm); line-height: 0.78; text-shadow: 0 8px 36px rgba(0,16,21,0.22); }
.hero__grad { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(0,26,33,0) 34%, rgba(0,26,33,0.5) 64%, rgba(0,26,33,0.95) 100%); }
.hero__tex { z-index: 6; }
.hero__inner { position: relative; z-index: 7; padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.hero__content { max-width: 540px; }
.hero__eyebrow { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-sm); }
.hero__sub { color: rgba(255,255,255,0.92); font-size: var(--fs-h3); max-width: 460px; margin: 0 0 var(--space-xl); line-height: 1.4; }
.hero__cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__chev { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); z-index: 7; color: rgba(255,255,255,0.55); display: grid; place-items: center; }

/* ========================================================================
   TEST RIDE SPLIT (įstrižas, hover-expand) — geometrija per JS (--etop/--ebot/--seam)
   ======================================================================== */
.split { position: relative; overflow: hidden; height: clamp(480px, 52vw, 600px); background: var(--surface-dark-deep); }
.split__panel { position: absolute; inset: 0; }
.split__panel--left { z-index: 1; }
.split__panel--right { z-index: 1; }
.split.is-left .split__panel--left { z-index: 3; }
.split.is-right .split__panel--right { z-index: 3; }
.split__clip { position: absolute; inset: 0; transition: clip-path 0.55s cubic-bezier(0.22,1,0.36,1); }
.split__panel--left .split__clip { clip-path: polygon(0 0, var(--etop, 56%) 0, var(--ebot, 44%) 100%, 0 100%); }
.split__panel--right .split__clip { clip-path: polygon(var(--etop, 56%) 0, 100% 0, 100% 100%, var(--ebot, 44%) 100%); }
.split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.split__panel--left .split__img { transform: translateX(-18%); }
.split__panel--left .split__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,26,33,0.92) 0%, rgba(0,26,33,0.5) 46%, rgba(0,26,33,0.12) 100%); }
.split__panel--right .split__shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,26,33,0.92) 0%, rgba(0,26,33,0.5) 46%, rgba(0,26,33,0.12) 100%); }
.split__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.split__content .wrap { width: 100%; display: flex; }
.split__panel--left .split__content .wrap { justify-content: flex-start; }
.split__panel--right .split__content .wrap { justify-content: flex-end; }
.split__box { max-width: 400px; pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; }
.split__panel--right .split__box { align-items: flex-end; text-align: right; }
/* Nuoseklus accent-bar → antraštė tarpas VISUR (split + split-mobile) = --space-md */
.split__box .grad-bar, .split-mobile__panel .grad-bar { margin-bottom: var(--space-md); }
.split__box h2 { color: #fff; margin: 0 0 var(--space-sm); }
.split__box p { color: rgba(255,255,255,0.85); margin: 0 0 var(--space-xl); font-size: var(--fs-h4); max-width: 380px; }
.split__seam { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  background: linear-gradient(105deg, transparent calc(50% - 1.25px), #00EFD1 calc(50% - 1.25px), #00EFD1 calc(50% + 1.25px), transparent calc(50% + 1.25px)),
              linear-gradient(105deg, transparent calc(50% - 7px), rgba(0,239,209,0.22) calc(50% - 7px), rgba(0,239,209,0.22) calc(50% + 7px), transparent calc(50% + 7px)); }
/* Mobile — stacked */
.split-mobile { display: none; }
@media (max-width: 860px) {
  .split { display: none; }
  .split-mobile { display: block; }
  .split-mobile__panel { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; background: var(--surface-dark); }
  .split-mobile__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .split-mobile__panel .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,33,0.15) 0%, rgba(0,26,33,0.5) 52%, rgba(0,26,33,0.94) 100%); }
  .split-mobile__panel .wrap { position: relative; z-index: 2; padding-block: var(--space-2xl); }
  .split-mobile__panel h2 { color: #fff; margin: 0 0 var(--space-sm); }
  .split-mobile__panel p { color: rgba(255,255,255,0.85); margin: 0 0 var(--space-lg); max-width: 440px; }
  .split-mobile__seam { height: 4px; background: var(--grad-bar); }
}

/* ========================================================================
   FOOTER
   ======================================================================== */
.site-footer { position: relative; overflow: hidden; background: var(--surface-dark); color: #fff; }
.site-footer__bar { position: relative; z-index: 2; height: 4px; background: var(--grad-bar); }
.trust { position: relative; z-index: 1; border-bottom: 1px solid rgba(255,255,255,0.12); }
.trust__grid { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@media (min-width: 768px) { .trust__grid { padding-inline: var(--gutter-lg); } }
.trust__item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.trust__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center;
  color: var(--c-teal-bright); background: rgba(0,239,209,0.10); border: 1px solid rgba(0,239,209,0.22); }
.trust__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); color: #fff; line-height: 1.2; }
.trust__sub { color: rgba(255,255,255,0.62); font-family: var(--font-utility); font-size: var(--fs-xs); margin-top: 3px; line-height: 1.45; }
.foot-main { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-xl); }
@media (min-width: 768px) { .foot-main { padding-inline: var(--gutter-lg); } }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 0.9fr; gap: var(--space-xl); align-items: start; }
.foot-col-title { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--space-sm); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col a, .foot-row { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); text-decoration: none; display: inline-flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.foot-col a:hover { color: #fff; }
.foot-col .scc-revoke { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); line-height: 1.5; text-decoration: none; text-align: left; }
.foot-col .scc-revoke:hover { color: #fff; }
/* Neaktyvi „Netrukus" eilutė footer'yje (2 etapo puslapiai) — pill-soon perrašomas tamsiam fonui,
   bazinis variantas skirtas šviesiam header'iui */
.foot-col .foot-soon { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.45); font-size: var(--fs-sm); line-height: 1.5; cursor: default; }
.site-footer .pill-soon { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.22); }
/* Kontaktų ikonos — baltos (0.82, inherit), lygiuotos su 1-a teksto eilute (height 1.5em) */
.foot-ic { display: flex; align-items: center; height: 1.5em; flex-shrink: 0; }
.foot-col .foot-contact-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: var(--fw-bold); margin-top: 4px; width: fit-content; }
.foot-logo { height: 24px; margin-bottom: var(--space-md); }
.foot-desc { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); max-width: 300px; margin: 0; }
.foot-social { display: flex; gap: 10px; margin-top: var(--space-md); }
.foot-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.foot-social a:hover { background: var(--color-accent); color: #fff; }
.foot-hours { display: inline-flex; gap: 10px; color: rgba(255,255,255,0.82); font-size: var(--fs-sm); white-space: nowrap; }
.foot-hours .d { color: rgba(255,255,255,0.5); min-width: 34px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-xl); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }
.foot-bottom .mr-credit { color: rgba(255,255,255,0.82); }
.foot-bottom .mr-credit a { color: #fff; text-decoration: none; font-weight: var(--fw-bold); }
/* stryvel brand taškas — apvalus CSS apskritimas (išorinis brand, ne CFMOTO token) */
.foot-bottom .mr-credit__dot { display: inline-block; width: 0.25em; height: 0.25em; border-radius: 50%; background: #fcc830; margin-left: 1.5px; vertical-align: baseline; }

/* ========================================================================
   RESPONSYVUMAS
   ======================================================================== */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
@media (max-width: 860px) {
  .trust__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .trust__grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero__wm--front b, .hero__wm--back b { left: var(--gutter); }
  /* Hero aukštis telefone apribotas: floor 720px (kad C5 wordmark neužliptų ant turinio trumpuose
     ekranuose) + cap 780px (kad aukštuose telefonuose nebūtų didelio tarpo tarp C5 ir „Naujiena"). */
  .hero { min-height: clamp(720px, 90vh, 780px); }
  /* Stipresnis/didesnis legibility gradientas telefone — baltas tekstas (Naujiena/CTA) geriau skaitomas */
  .hero__grad { background: linear-gradient(180deg, rgba(0,26,33,0) 18%, rgba(0,26,33,0.6) 50%, rgba(0,26,33,0.97) 100%); }
  /* CTA mygtukai telefone → stack + full-width (didesnis tap-target, konversija).
     Inline .link-arrow nuorodos NEliečiamos — jos lieka inline. */
  .hero__cta { flex-direction: column; }
  .hero__cta .btn, .split-mobile .btn { width: 100%; }
  /* Kontaktai: formos submit, žemėlapio kortelės ir partnerių CTA */
  .contact-form .btn, .mr-map__card .btn, .partner .btn { width: 100%; }
}

/* Grid stulpelių helperiai sekcijoms */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
/* ≤560px (telefonai): kategorijos po 1 (2-col netelpa tekstas) + 16/9 banner (full-width 3:4 būtų per aukšta), produktų gridas po 1 */
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; --ctile-ar: 16 / 9; } .grid-3 { grid-template-columns: 1fr; } }

.section-surface { background: var(--color-surface); }
.section-surface-soft { background: var(--color-surface-soft); }
.section-white { background: var(--color-bg); }

/* Cookie consent (stryvel/cookie-consent) — map plugin tokens to the brand. */
.scc { --scc-accent: var(--color-accent); --scc-accent-hover: #007e93; --scc-accent-fg: #ffffff; --scc-fg: var(--c-ink-900); --scc-focus: var(--color-accent); --scc-radius: var(--radius-lg, 14px); }

/* Forms (stryvel/forms) — map plugin tokens to the brand. */
:root { --sf-error: #c0392b; --sf-success: var(--color-accent); --sf-radius: var(--radius-md, 10px); }
/* The consent error is a direct form child (no .field wrapper), so it gets the form's
   --space-md gap; pull it up to match the 6px input→error gap inside .field. */
.contact-form .consent + .sf-error { margin-top: calc(6px - var(--space-md)); }

/* ========================================================================
   PAGE HERO (vidiniai puslapiai)
   ======================================================================== */
.page-hero { position: relative; overflow: hidden; background: var(--surface-dark); color: #fff;
  padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-2xl); }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { margin: 6px 0 var(--space-sm); font-size: var(--fs-h1); color: #fff; }
.page-hero__sub { margin: 0; color: rgba(255,255,255,0.68); font-family: var(--font-utility); font-size: var(--fs-sm); }

/* ========================================================================
   KATALOGAS
   ======================================================================== */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-2xl); }
.cat-chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cat-chip { appearance: none; cursor: pointer; font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm);
  padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: transparent; color: var(--text-body);
  text-decoration: none; transition: all var(--motion-fast) var(--ease-out); }
.cat-chip:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.cat-chip.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.cat-series { margin-bottom: var(--space-3xl); }
.series-head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.series-head h2 { margin: 0; color: var(--color-accent); font-size: var(--fs-h2); }
.series-head .series-desc { color: var(--text-muted); font-size: var(--fs-sm); }
.series-head .series-count { margin-left: auto; color: var(--text-muted); font-family: var(--font-utility); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
/* Mobile: 1-a eilė = title + count (dešinėje), 2-a eilė = aprašymas (kaip etalone). Order, ne DOM → desktop nepaliestas. */
@media (max-width: 560px) {
  .series-head { row-gap: var(--space-sm); }
  .series-head .series-count { order: 2; }
  .series-head .series-desc { order: 3; flex-basis: 100%; }
}

/* ========================================================================
   KONTAKTAI
   ======================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Kontaktinė info */
.contact-info { display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-info h3 { margin: 0; }
.ci-row { display: flex; gap: var(--space-md); align-items: flex-start; }
.ci-iconsq { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent); display: grid; place-items: center; }
.ci-label { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.ci-value { margin-top: 6px; color: var(--text-heading); font-family: var(--font-utility); font-weight: var(--fw-medium); }
.ci-value--link { display: inline-block; text-decoration: none; font-weight: var(--fw-bold); }
.ci-value--link:hover { color: var(--color-accent); }
.ci-grow { flex: 1; }
.ci-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--color-accent); font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; }
.ci-link:hover { text-decoration: underline; }
.ci-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 10px; }
@media (max-width: 480px) { .ci-phones { grid-template-columns: 1fr; } }
.ci-phone-label { color: var(--text-muted); font-size: var(--fs-sm); }
.ci-phone-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.ci-phone-nums a { color: var(--text-heading); font-weight: var(--fw-bold); font-family: var(--font-utility); white-space: nowrap; text-decoration: none; }
.ci-phone-nums a:hover { color: var(--color-accent); }
.ci-hours { display: grid; grid-template-columns: auto auto; gap: 6px 24px; margin-top: 8px; width: fit-content; }
.ci-hours .d { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.ci-hours .t { color: var(--text-heading); font-weight: var(--fw-medium); font-family: var(--font-utility); font-size: var(--fs-sm); white-space: nowrap; }

/* Formos kortelė */
.contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-xs); }
.contact-card h3 { margin: 0 0 var(--space-xs); }
.contact-card__intro { color: var(--text-body); margin: 0 0 var(--space-lg); font-size: var(--fs-sm); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 480px) { .form-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text-heading); }
.field input, .field textarea { font: inherit; color: var(--text-body); background: var(--color-bg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: 11px 14px; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-accent); }
.consent span { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.5; }
.consent a { color: var(--color-accent); font-weight: var(--fw-bold); }

/* Žemėlapis: self-hosted statinis OSM paveikslas (POI paveikslo centre → pin 50%/50%
   veikia bet kokiam kadravimui) + click-to-load Google embed */
.mr-map { position: relative; width: 100%; height: clamp(360px, 42vw, 560px); background: var(--color-surface-alt); overflow: hidden; }
.mr-map__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.55); }
.mr-map__credit { position: absolute; left: 8px; bottom: 6px; z-index: 2; background: var(--color-bg); border-radius: var(--radius-sm); padding: 2px 7px; font-family: var(--font-utility); font-size: var(--fs-xs); color: var(--text-muted); opacity: 0.85; }
.mr-map__credit a { color: inherit; }
.mr-map__pinwrap { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.mr-map__ping { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 50%; background: var(--color-accent); opacity: 0.5; animation: mr-ping 2.2s var(--ease-out) infinite; }
@keyframes mr-ping { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } }
.mr-map__pinshadow { position: absolute; left: 0; top: 0; width: 20px; height: 7px; margin-left: -10px; margin-top: -3px; border-radius: 50%; background: rgba(0,0,0,0.20); filter: blur(1.5px); }
.mr-map__pin { position: absolute; left: 0; top: 0; transform: translate(-50%,-100%); }
.mr-map__pin::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 50% 50% 50% 0; background: var(--color-accent); transform: rotate(-45deg); box-shadow: var(--shadow-md); border: 2px solid var(--color-bg); }
.mr-map__pindot { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--color-bg); z-index: 1; }
.mr-map__label { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 48px)); white-space: nowrap; background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); padding: 5px 12px; font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--text-heading); display: inline-flex; align-items: center; gap: 6px; }
.mr-map__labelicon { color: var(--color-accent); display: grid; place-items: center; }
.mr-map__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mr-map__overlaywrap { height: 100%; display: flex; align-items: center; }
.mr-map__card { pointer-events: auto; width: min(100%, 360px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.mr-map__title { margin: 0; }
.mr-map__cta { margin-top: var(--space-xs); }
.mr-map__addr { display: flex; gap: 10px; align-items: flex-start; color: var(--text-body); font-family: var(--font-utility); }
.mr-map__addricon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.mr-map__loadwrap { position: absolute; right: var(--space-lg); bottom: var(--space-lg); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mr-map__loadnote { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 10px; font-family: var(--font-utility); font-size: var(--fs-xs); color: var(--text-muted); box-shadow: var(--shadow-xs); }
.mr-map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.mr-map--live .mr-map__base, .mr-map--live .mr-map__credit, .mr-map--live .mr-map__pinwrap, .mr-map--live .mr-map__loadwrap { display: none; }
/* Mobile: no embed loader (the card's "Gauti nuorodas" opens the native maps app instead), card centered. */
@media (max-width: 640px) {
  .mr-map__loadwrap { display: none; }
  .mr-map__overlaywrap { justify-content: center; }
}

/* Partnerių tinklas (Rask atstovą) */
.partner { display: flex; gap: var(--space-xl); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.partner__text { flex: 1 1 340px; max-width: 560px; }
.partner__cities { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-chip { padding: 5px 13px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-family: var(--font-utility); font-size: var(--fs-sm); color: var(--text-body); }

/* ========================================================================
   PRODUKTO DETALĖ (ProductScreen)
   ======================================================================== */
/* scroll-margin BE --admin-bar-h: WP prisijungus prideda html{margin-top:32px} kuris jau
   pastumia anchor koordinatę per admin bar → pridėjus dar kartą liktų papildomas tarpas */
.section-anchor { scroll-margin-top: calc(var(--header-h) + 60px); }
.pdp-hero { position: relative; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--surface-dark-deep); }
.pdp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.pdp-hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,33,0.35) 0%, rgba(0,26,33,0.15) 40%, rgba(0,26,33,0.9) 100%); }
.pdp-hero__top { position: relative; z-index: 2; padding-top: calc(var(--header-h) + var(--space-sm)); display: flex; justify-content: space-between; align-items: center; }
.pdp-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-pill); color: #fff; font-family: var(--font-utility); font-size: var(--fs-sm); padding: 8px 16px; cursor: pointer; text-decoration: none; }
.pdp-hero__head { position: relative; z-index: 2; padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.pdp-hero__cat { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #fff; opacity: 0.9; margin-bottom: var(--space-sm); }
.pdp-hero__title { font-family: var(--font-display); font-weight: var(--fw-black); font-style: italic; font-size: clamp(56px, 9.5vw, 124px); color: #fff; line-height: 0.92; letter-spacing: var(--ls-tight); margin: 0; text-shadow: 0 6px 28px rgba(0,16,21,0.4); }
.pdp-hero__keyspecs { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.18); }
.pdp-subnav { position: sticky; top: calc(var(--header-h) + var(--admin-bar-h, 0px)); z-index: 40; background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.pdp-subnav__inner { display: flex; gap: var(--space-md); height: 54px; align-items: center; justify-content: space-between; }
.pdp-subnav__links { display: flex; gap: var(--space-xl); align-items: center; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
  /* right-edge fade (kaip PDP features) — nublanksta tik kai nuorodos netelpa/skrolinasi */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.pdp-subnav__links::-webkit-scrollbar { display: none; }
.pdp-subnav__links a { font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text-body); text-decoration: none; white-space: nowrap; }
.pdp-subnav__links a:hover { color: var(--color-accent); }
.pdp-subnav__cta { display: flex; gap: var(--space-sm); align-items: center; flex-shrink: 0; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), max-width var(--motion-base) var(--ease-out); }
.pdp-subnav__cta[data-past="1"] { max-width: 420px; opacity: 1; transform: translateX(0); pointer-events: auto; }
/* Mobiliame sticky subnav CTA = tik ikonos (telpa siauroje juostoje) — kvadratinis
   touch-target ~44px su 20px ikona (ta pati šeima kaip .pdp-feat-arrows) */
@media (max-width: 640px) {
  .pdp-subnav__cta .btn { width: 44px; height: 44px; padding: 0; font-size: 20px; }
  .pdp-subnav__cta .btn > span { display: none; }
}
.pdp-config { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2xl); align-items: center; }
.pdp-config__media { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; }
/* Sits high in the frame, not centred: the vehicle cutout occupies the middle and lower half, and a
   centred wordmark ended up hidden behind it. */
.pdp-mark { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6%; text-align: center; white-space: nowrap; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(140px, 30vw, 360px); line-height: 1; letter-spacing: -0.04em; color: rgba(0,26,33,0.06); user-select: none; pointer-events: none; }
.pdp-config__media img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.pdp-colors { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
.pdp-colors__label { font-family: var(--font-utility); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.pdp-colors__swatches { display: flex; gap: var(--space-sm); }
.pdp-color { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--color-border); cursor: pointer; padding: 0; transition: box-shadow var(--motion-fast) var(--ease-out); }
.pdp-color.is-on { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.pdp-colors__name { font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text-heading); }
.pdp-lead { color: var(--text-body); font-size: var(--fs-h4); margin: 0 0 var(--space-lg); }
.pdp-price { padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); }
.pdp-price__val { font-family: var(--font-utility); font-weight: var(--fw-black); font-size: 38px; color: var(--text-heading); line-height: 1; display: block; margin-bottom: 4px; }
.pdp-price__note { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--space-md); }
.pdp-price__cta { display: flex; flex-direction: column; gap: var(--space-sm); }
.pdp-price__cta-row { display: flex; gap: var(--space-sm); }
.pdp-trust { display: flex; flex-direction: column; gap: var(--space-sm); }
.pdp-trust__row { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-body); }
.pdp-trust__row .mr-icon { color: var(--color-accent); flex: none; }
.pdp-feat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.pdp-feat-head h2 { margin: 6px 0 0; }
.pdp-feat-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.pdp-feat-arrows button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--color-bg); color: var(--text-heading); border: 1px solid var(--color-border); transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.pdp-feat-arrows button:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pdp-feat-wrap { position: relative; margin-top: var(--space-xl); }
/* Right-edge fade hints there is more to scroll. Done as a mask on the track, not a white overlay
   on top of it: a card without a photo is dark, and an opaque light gradient over it read as a
   bright band rather than a fade. */
.pdp-feat-scroll { display: flex; gap: var(--space-lg); overflow-x: auto; padding-left: max(var(--gutter-lg), calc((100% - var(--container)) / 2 + var(--gutter-lg))); padding-right: var(--gutter-lg); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent 100%); }
/* baltas fade dešiniajame krašte (kaip etalone) — spalva PRIVALO atitikti sekcijos --color-surface (#F7F7F6) */
.pdp-feat-scroll::-webkit-scrollbar { display: none; }
.pdp-feat { flex: 0 0 auto; width: clamp(280px, 30vw, 430px); }
.pdp-feat__media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3/4; background: #000; margin-bottom: var(--space-lg); }
.pdp-feat__media img { width: 100%; height: 100%; object-fit: cover; }
/* Until a feature photo is uploaded — the branded panel from .ctile--panel: dark teal, the same
   speed-line texture and a centred "CFMOTO" ghost. */
.pdp-feat__media--empty { position: relative; background: var(--surface-dark); }
.pdp-feat__ghost { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-black); font-style: italic; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.04em; color: rgba(255,255,255,0.06); user-select: none; }
/* Feature card with a video: the media becomes the trigger, play button over the photo (design). */
.pdp-feat__media--video { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; }
.pdp-feat__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,26,33,0.18); transition: background var(--motion-base) var(--ease-out); }
.pdp-feat__play > span { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--color-accent); display: grid; place-items: center; box-shadow: var(--shadow-lg); transform: translateX(2px); transition: transform var(--motion-base) var(--ease-out); }
.pdp-feat__media--video:hover .pdp-feat__play { background: rgba(0,26,33,0.28); }
.pdp-feat__media--video:hover .pdp-feat__play > span { transform: translateX(2px) scale(1.06); }
.pdp-feat h3 { margin: 0 0 var(--space-sm); }
.pdp-feat p { margin: 0; color: var(--text-body); line-height: 1.55; }
.pdp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: var(--space-md); }
.pdp-gallery__item { position: relative; padding: 0; cursor: pointer; border: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.pdp-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-base) var(--ease-out); }
.pdp-gallery__item:hover img { transform: scale(1.06); }
.pdp-gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.pdp-gallery__item:nth-child(2) { grid-column: span 2; }
.pdp-gallery__item:nth-child(5) { grid-column: span 2; }
.pdp-gallery__item:nth-child(6) { grid-column: span 2; }
.pdp-specs { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2xl); align-items: start; }
.spec-list { margin: 0; }
.spec-list__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.spec-list__row dt { margin: 0; color: var(--text-muted); }
.spec-list__row dd { margin: 0; color: var(--text-heading); font-weight: var(--fw-medium); text-align: right; }
.pdp-specs__side { display: flex; flex-direction: column; gap: var(--space-xl); }
.pdp-specs__side h3 { margin: 0 0 var(--space-md); font-size: var(--fs-h4); }
.kompl-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.kompl-list li { display: flex; align-items: center; gap: 12px; color: var(--text-body); }
.kompl-check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-tint); color: var(--color-accent); display: grid; place-items: center; }
.garantija { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; gap: var(--space-md); align-items: flex-start; }
.garantija__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent); display: grid; place-items: center; }
.garantija__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); margin-bottom: 2px; }
.garantija p { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.pdp-video, .pdp-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,26,33,0.94); display: grid; place-items: center; padding: var(--gutter-lg); }
.pdp-video[hidden], .pdp-lightbox[hidden] { display: none; }
.pdp-video__close { position: absolute; top: var(--space-lg); right: var(--space-lg); background: none; border: 0; color: #fff; cursor: pointer; }
.pdp-video__frame { width: min(960px, 100%); position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.pdp-video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pdp-video__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); color: #fff; text-align: center; padding: var(--space-lg); }
.pdp-video__play > span:first-child { width: 76px; height: 76px; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.pdp-video__embed { position: absolute; inset: 0; }
.pdp-video__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdp-lightbox__close { position: absolute; top: var(--space-lg); right: var(--space-lg); background: none; border: 0; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-utility); font-size: var(--fs-sm); z-index: 2; }
.pdp-lightbox__stage { display: flex; align-items: center; gap: var(--space-md); max-width: 100%; }
.pdp-lightbox__nav { flex-shrink: 0; appearance: none; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; display: grid; place-items: center; transition: background var(--motion-base) var(--ease-out); }
.pdp-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.pdp-lightbox__img { max-width: min(1100px, 80vw); max-height: 80vh; border-radius: var(--radius-lg); object-fit: contain; }
.pdp-lightbox__count { position: absolute; bottom: var(--space-lg); left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.7); font-family: var(--font-utility); font-size: var(--fs-sm); }
/* Galerijos „+N" perdanga ant paskutinės matomos plytelės (kai nuotraukų daugiau nei limitas) */
.pdp-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,26,33,0.62); color: #fff; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); letter-spacing: var(--ls-tight); pointer-events: none; }
@media (max-width: 860px) {
  .pdp-config, .pdp-specs { grid-template-columns: 1fr; }
  /* mobile: švarus 2×2 (max 4 nuotraukos ribojama per JS) */
  .pdp-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .pdp-gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  /* mobile lightbox: rodyklės absoliučiai prie ekrano kraštų (netilptų flex eilėje) → nuotrauka pilnu pločiu */
  .pdp-lightbox { padding: var(--space-md); }
  .pdp-lightbox__stage { gap: 0; width: 100%; justify-content: center; }
  .pdp-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
  .pdp-lightbox [data-lightbox-prev] { left: var(--space-sm); }
  .pdp-lightbox [data-lightbox-next] { right: var(--space-sm); }
  .pdp-lightbox__img { max-width: 100%; max-height: 78vh; }
}

/* ========================================================================
   TEKSTINIS PUSLAPIS (privatumas / instrukcijos)
   ======================================================================== */
.doc-grid { display: grid; grid-template-columns: 230px 1fr; gap: var(--space-2xl); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + var(--admin-bar-h, 0px) + 24px); display: flex; flex-direction: column; gap: 2px; }
.doc-toc__title { font-family: var(--font-utility); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.doc-toc a { padding: 7px 0 7px 14px; border-left: 2px solid var(--color-border); color: var(--text-body); font-family: var(--font-utility); font-weight: var(--fw-medium); font-size: var(--fs-sm); text-decoration: none; line-height: 1.35; transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); }
.doc-toc a:hover, .doc-toc a.is-on { border-left-color: var(--color-accent); color: var(--color-accent); }
.doc-toc a.is-on { font-weight: var(--fw-bold); }
.doc-body { max-width: 720px; }
.doc-body__intro { font-size: var(--fs-h4); color: var(--text-heading); line-height: 1.6; margin: 0 0 var(--space-2xl); }
.doc-section { scroll-margin-top: calc(var(--header-h) + 24px); margin-bottom: var(--space-2xl); }
.doc-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-md); }
.doc-section p { color: var(--text-body); line-height: 1.7; margin: 0 0 var(--space-md); }
.doc-section ul { margin: 0 0 var(--space-md); padding-left: 1.15em; color: var(--text-body); line-height: 1.7; }
.doc-section li { margin-bottom: 7px; }
/* Tekstinio puslapio turinys iš WP redaktoriaus (flat h2/p/ul „doc-body" viduje) */
.doc-body > h2 { font-size: var(--fs-h3); margin: var(--space-2xl) 0 var(--space-md); scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-body > h2:first-child { margin-top: 0; }
.doc-body > h3 { font-size: var(--fs-h4); margin: var(--space-xl) 0 var(--space-sm); }
.doc-body > p { color: var(--text-body); line-height: 1.7; margin: 0 0 var(--space-md); }
.doc-body > ul, .doc-body > ol { margin: 0 0 var(--space-md); padding-left: 1.15em; color: var(--text-body); line-height: 1.7; }
.doc-body li { margin-bottom: 7px; }
.doc-body a { color: var(--color-accent); }
/* Block editoriaus brand paletės klasės (frontend). Spalvos iš tokenų (DRY). */
.has-ink-color { color: var(--c-ink-900); } .has-ink-background-color { background-color: var(--c-ink-900); }
.has-melyna-color { color: var(--c-blue); } .has-melyna-background-color { background-color: var(--c-blue); }
.has-teal-bright-color { color: var(--c-teal-bright); } .has-teal-bright-background-color { background-color: var(--c-teal-bright); }
.has-dark-teal-color { color: var(--c-dark-teal-2); } .has-dark-teal-background-color { background-color: var(--c-dark-teal-2); }
.has-balta-color { color: var(--c-white); } .has-balta-background-color { background-color: var(--c-white); }
.has-surface-color { color: var(--c-surface); } .has-surface-background-color { background-color: var(--c-surface); }
.has-pilka-color { color: var(--c-logo-gray); } .has-pilka-background-color { background-color: var(--c-logo-gray); }
.has-sviesi-pilka-color { color: var(--c-light-gray); } .has-sviesi-pilka-background-color { background-color: var(--c-light-gray); }
.doc-help { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-lg); display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 768px) { .doc-grid { grid-template-columns: 1fr; } .doc-toc { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ========================================================================
   TOUCH ĮRENGINIAI (hover: none)
   Touch neturi tikro hover — naršyklė jį imituoja ant tapo ir jis „užstringa"
   (plytelė lieka priartėjusi kol tapsi kitur). Nuimam dekoratyvius transform
   efektus ir vietoj jų duodam :active paspaudimo feedback (hover atitikmuo).
   Desktop (hover: hover) NEkinta. Focus/focus-visible NEliečiami (prieinamumas).
   ======================================================================== */
@media (hover: none) {
  /* zoom / pakilimo transform efektai — kad tap'inus neliktų „užstrigę" */
  .ctile:hover .ctile__img,
  .ctile--panel:hover .ctile__ghost,
  .ctile--panel:hover .mr-tex-lines,
  .pcard:hover .pcard__media img,
  .pdp-gallery__item:hover img,
  .mega__model:hover .mega__model-media img { transform: none; }
  .ctile:hover .ctile__chip { background: rgba(255,255,255,0.18); }
  .pcard:hover { transform: none; border-color: var(--color-border); box-shadow: var(--shadow-xs); }

  /* paspaudimo feedback touch'ui (vietoj hover) — subtilus „press" */
  .ctile { transition: transform var(--motion-fast) var(--ease-out); }
  .ctile:active, .pcard:active { transform: scale(0.98); }
}

/* ========================================================================
   404
   ======================================================================== */
.err404 { position: relative; overflow: hidden; background: var(--surface-dark); color: #fff; text-align: center;
  min-height: 70vh; display: grid; place-items: center;
  padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-3xl); }
.err404__mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-black);
  font-style: italic; font-size: clamp(180px, 40vw, 520px); line-height: 1; letter-spacing: var(--ls-tight);
  color: rgba(255,255,255,0.05); pointer-events: none; user-select: none; }
.err404__inner { position: relative; z-index: 1; }
.err404__inner h1 { color: #fff; margin: 6px 0 var(--space-md); }
.err404__inner p { color: rgba(255,255,255,0.7); margin: 0 auto var(--space-xl); max-width: 460px; }
.err404__cta { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .err404__cta { flex-direction: column; } .err404__cta .btn { width: 100%; } }