/* ==========================================================================
   Žaislų Dėžė V3 — layout: headeris, hero, sekcijos, footeris
   Spalvos TIK per var(--…).
   ========================================================================== */

/* ==========================================================================
   1. HEADERIS
   ========================================================================== */
.zd-header {
  position: sticky;
  /* Admin bar’as prisegtą headerį nustumia — WP pats paskelbia savo aukštį. */
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background: var(--bg-brand);
  border-bottom: 1px solid rgba(255, 249, 236, .08);
  transition: padding var(--d-ui) var(--ease-ui);
}
.zd-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
}
@media (min-width: 1024px) { .zd-header__inner { min-height: 80px; } }
.zd-header.is-stuck .zd-header__inner { min-height: 64px; }

.zd-header__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.zd-header__logo svg { height: 34px; width: auto; }
@media (min-width: 1024px) { .zd-header__logo svg { height: 42px; } }
.zd-header__wordmark {
  font: 700 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1 var(--font-display);
  color: var(--paper-050);
  letter-spacing: var(--ls-display);
}

/*
 * Headerio apatinis ornamentas (UI V4). Buvo 1 px linija — techniškai riba,
 * bet vizualiai niekas. Skirtukas kabo žemiau headerio, todėl neaugina jo
 * aukščio ir negaudo paspaudimų.
 */
.zd-header::after {
  content: "";
  position: absolute; right: 0; bottom: -8px; left: 0;
  height: 16px;
  pointer-events: none;
  background: url(../img/decorative/dividers/nav-bottom-divider.svg) center / 100% 16px no-repeat;
}

/* Navigacija */
.zd-nav { display: none; margin-inline: auto; }
/*
 * Riba 1024 → 1180 (UI V4). Ties 1024 px septyni punktai, paieškos laukas ir
 * trys medalionai telpa tik todėl, kad tarpai suspausti iki nulio — punktai
 * beveik liečiasi ir juostą skaityti nebeįmanoma. Geriau švarus drawer'is nei
 * susispaudusi eilė.
 */
@media (min-width: 1180px) { .zd-nav { display: block; } }
/* Punktai nesilaužo per dvi eilutes: atsiradus paieškos laukui vietos sumažėjo,
   ir „Pagal amžių“ virto dviem eilutėmis — antraštė iškart atrodo netvarkinga.
   Tarpai mažesni, o punktai — nedalomi. */
.zd-nav__list { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.zd-nav__list > li { white-space: nowrap; }
@media (min-width: 1280px) { .zd-nav__list { gap: var(--space-6); } }
.zd-nav__list a, .zd-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 7px;
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  color: var(--paper-050);
  text-decoration: none;
  letter-spacing: .01em;
  /* Fonai dedami per ::before su z-index:-1; be izoliacijos jie nulįstų po
     visu headeriu, o ne tik po savo punktu. */
  isolation: isolate;
  transition: color var(--d-ui) var(--ease-ui);
}
.zd-nav__list a:hover, .zd-nav__link:hover { color: var(--gold-300); }

/*
 * „Žaisk ir atrask“ — kito tipo tikslas.
 *
 * Visi kiti punktai veda į prekių sąrašus, o šis — į nemokamą veiklą. Be ženklo
 * jis atrodo kaip septinta kategorija ir lieka nepastebėtas. Auksinis rėmelis
 * pakankamai išskiria neperšaukdamas pirkimo kelio, o ne vien spalva: tas pats
 * ženklas veikia ir monochrome, ir spalvų nesuvokiantiems.
 */
.zd-nav__list .zd-nav__link--game {
  min-width: 132px;
  padding-inline: 20px;
  color: var(--paper-050);
}
.zd-nav__list .zd-nav__link--game::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -3px;
  background: url(../img/ui/frames/nav-feature-backplate.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.zd-nav__list .zd-nav__link--game:hover,
.zd-nav__list .zd-nav__link--game:focus-visible { color: var(--gold-300); }
/* Siūlo šiam punktui nereikia — jis jau turi plokštelę. */
.zd-nav__list .zd-nav__link--game::after { display: none; }

/* Mobiliame meniu tas pats ženklas, tik eilutėje. */
.zd-menu-list .zd-nav__link--game {
  display: inline-block;
  padding: 6px 14px;
  border: var(--bw-ui) solid var(--gold-700, var(--gold-500));
  border-radius: 999px;
  color: var(--crimson-600);
}
/*
 * HOVER IR AKTYVI BŪSENA (UI V4).
 *
 * Buvo 2 px auksinė juostelė — techniškai pabraukimas, bet toks pat, kaip bet
 * kurioje temoje. Dabar hover'ą rodo pieštas siūlas (nav-hover-underline.svg),
 * o dabartinis puslapis gauna plokštelę po tekstu. Skirtumas svarbus: siūlas
 * sako „čia nueisi“, plokštelė — „čia jau esi“, ir jie nebeatrodo vienodai.
 *
 * ::after rodomas ir ties :focus-visible, kitaip klaviatūra naršantis žmogus
 * matytų tik naršyklės kontūrą ant tamsaus fono.
 */
.zd-nav__list a::after,
.zd-nav__link::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4px; bottom: 3px; left: 4px;
  height: 10px;
  background: url(../img/decorative/dividers/nav-hover-underline.svg) center / 100% 10px no-repeat;
  opacity: 0;
  transform: translateY(3px) scaleX(.82);
  transition: opacity var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease-ui);
  pointer-events: none;
}
.zd-nav__list a:hover::after,
.zd-nav__list a:focus-visible::after,
.zd-nav__link:hover::after,
.zd-nav__link:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

/* Dabartinis puslapis — plokštelė, ne siūlas. */
.zd-nav__list .current-menu-item > a,
.zd-nav__list a[aria-current="page"] {
  min-width: 112px;
  padding-inline: 18px;
  color: var(--paper-050);
}
.zd-nav__list .current-menu-item > a::before,
.zd-nav__list a[aria-current="page"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -4px;
  background: url(../img/ui/frames/nav-active-backplate.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.zd-nav__list .current-menu-item > a::after,
.zd-nav__list a[aria-current="page"]::after { display: none; }

/* Išskleidžiamas amžiaus grupių sąrašas.
   Atsidaro ir ties hover, ir ties klaviatūros fokusu (:focus-within) — kitaip
   punktas būtų nepasiekiamas be pelės. */
.zd-nav__item { position: relative; }
.zd-subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 168px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 12px 6px 12px 6px;
  box-shadow: 0 14px 34px rgba(14, 15, 24, .35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease-ui);
  z-index: 20;
}
/* Mygtukas turi atrodyti lygiai kaip kiti punktai. */
button.zd-nav__link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.zd-nav__item--has-sub:hover .zd-subnav,
.zd-nav__item--has-sub.is-open .zd-subnav,
.zd-nav__item--has-sub:focus-within .zd-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.zd-subnav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font: 700 var(--fs-ui)/1.25 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.zd-subnav a:hover,
.zd-subnav a:focus-visible { background: var(--paper-100); color: var(--crimson-600); }

/* ---------- Paieška antraštėje ----------
   Telefone jos nėra: 64 px antraštėje telpa logotipas, krepšelis ir meniu, o
   laukas ten tik atimtų vietą iš to, ką reikia paspausti pirštu. Ten lieka
   ikona, atidaranti tą patį paieškos stalčių. */
.zd-header__search { display: none; }

@media (min-width: 1180px) {
  /*
   * Rėmas piešiamas CSS'u, NE search-frame.svg.
   *
   * Pirmiausia buvo įdėtas SVG kaip fonas. Jis nupieštas 280×56 ir turi
   * `preserveAspectRatio="none"`, tad antraštėje susispaudęs iki 200 px
   * sutraukė viską horizontaliai: apvalūs galai tapo smailūs, dekoratyvinis
   * apskritimas po ikona — elipse, o vidinis skirtukas, nupieštas ties 48 px,
   * nuslinko į 34 px ir nebesutapo su mygtuku. Laukas atrodė sugadintas.
   *
   * Tos pačios detalės CSS'u nesusispaudžia jokiame plotyje: kreminis vidus,
   * auksinis kraštas, pergamentinis vidinis žiedas (inset box-shadow),
   * apskritimas po ikona ir skirtukas už mygtuko.
   */
  .zd-header__search {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: clamp(220px, 20vw, 300px);
    min-height: 50px;
    margin-left: var(--space-4);
    padding: 0 16px 0 8px;
    background: var(--paper-050);
    border: 1.4px solid var(--gold-500);
    border-radius: 26px;
    box-shadow: inset 0 0 0 2px var(--paper-100);
  }
  .zd-header__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 8px 4px 8px 12px;
    font: 500 var(--fs-ui)/1.2 var(--font-ui);
    color: var(--text-strong);
  }
  .zd-header__search-input::placeholder { color: var(--text-muted); }
  .zd-header__search-input:focus { outline: none; }
  .zd-header__search:focus-within { box-shadow: inset 0 0 0 2px var(--paper-100), 0 0 0 3px rgba(213, 166, 59, .35); }
  /* Mygtukas kairėje, kaip dizaine: ikona apskritime, už jo — plonas skirtukas. */
  .zd-header__search-btn {
    order: -1;
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--gold-700);
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-950);
    cursor: pointer;
  }
  .zd-header__search-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
  .zd-header__search-btn:hover { color: var(--crimson-600); }

  /* Ikona nebereikalinga — laukas jau matomas. */
  .zd-medallion--search { display: none; }

  /* Meniu nebestumiam per vidurį: paieška užima dešinę pusę. */
  .zd-nav { margin-inline: 0 auto; }
}

.zd-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1180px) { .zd-header__actions { margin-left: 0; } }
.zd-header .zd-medallion { color: var(--paper-050); }
.zd-medallion--menu { display: inline-grid; }
@media (min-width: 1180px) { .zd-medallion--menu { display: none; } }
.zd-medallion--hide-mobile { display: none; }
@media (min-width: 768px) { .zd-medallion--hide-mobile { display: inline-grid; } }

/* Drawer variantai. Bazė (components.css) slysta iš dešinės — tai krepšelis.
   Meniu slysta iš kairės, paieška nusileidžia iš viršaus per visą plotį. */
.zd-drawer--menu {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
}
.zd-drawer--menu[data-open="true"] { transform: none; }

.zd-drawer--search {
  inset: var(--wp-admin--admin-bar--height, 0px) 0 auto 0;
  width: 100%;
  max-height: 100vh;
  transform: translateY(-100%);
}
.zd-drawer--search[data-open="true"] { transform: none; }
.zd-drawer--search .zd-drawer__head,
.zd-drawer--search .zd-drawer__body { margin-inline: auto; width: 100%; max-width: var(--container); }
.zd-drawer--search .zd-drawer__head { background: transparent; color: var(--text-strong); }
.zd-drawer--search .zd-drawer__head h2 { color: var(--text-strong); }
.zd-drawer--search .zd-drawer__head .zd-medallion { color: var(--text-strong); }
.zd-drawer--search .zd-field { display: grid; gap: var(--space-3); }
@media (min-width: 600px) {
  .zd-drawer--search .zd-field { grid-template-columns: 1fr auto; align-items: end; }
  .zd-drawer--search .zd-field label { grid-column: 1 / -1; }
}

/* Drawer sąrašai */
.zd-menu-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.zd-menu-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font: 700 var(--fs-lead)/1.2 var(--font-display);
  color: var(--text-strong);
  text-decoration: none;
}
.zd-menu-list--sub a { font: 600 var(--fs-body)/1.3 var(--font-ui); }
.zd-menu-heading {
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.zd-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-brand);
  padding-block: var(--space-12) 0;
}
@media (min-width: 1024px) { .zd-hero { padding-block: var(--space-16) 0; } }

.zd-hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .zd-hero__inner { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 44px; }
}

.zd-hero__copy { position: relative; z-index: 2; padding-bottom: var(--space-8); }
.zd-hero__copy .zd-hero-title { color: var(--paper-050); margin-bottom: 18px; letter-spacing: -.02em; }
.zd-hero__copy .zd-lead { color: var(--text-muted-on-dark); }
.zd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Faktai po mygtukais: kada gausiu, kiek kainuos, kas jei netiks. */
.zd-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font: 600 var(--fs-ui)/1.3 var(--font-ui);
  color: var(--paper-100, #f3e9d8);
  opacity: .92;
}
.zd-hero__facts li { position: relative; padding-left: 18px; }
.zd-hero__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500, #d5a63b);
}

/* Rami scena: be karuselės ir be jos valdiklių. */
.zd-hero__stage--still { cursor: default; }


/* Arkos rėmas — pagrindinis skirtumas nuo to, kas buvo gyvai.
   Dizaine (Checkpoint 2) scena yra įrėminta arka: --r-stage radius, 1.5 px
   kraštas ir radial fonas. Anksčiau čia gulėjo plika WEBP be jokio rėmo. */
.zd-hero__stage {
  position: relative;
  aspect-ratio: 1.28;
  border-radius: var(--r-stage);
  border: var(--bw-ui) solid var(--plum-600);
  background: radial-gradient(120% 90% at 50% 22%, #3a2c46 0%, #241f33 46%, #191a26 100%);
  overflow: hidden;
  margin-inline: 0;
}
.zd-hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/* Šiltas švytėjimas scenos viduryje */
.zd-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 46% at 50% 34%, rgba(232, 201, 106, .22), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Rikiavimas: matoma etiketė prie select'o */
.zd-ordering { display: flex; align-items: center; gap: 10px; }
.zd-ordering__label {
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  color: var(--text-muted);
  white-space: nowrap;
}
/* Mygtukas reikalingas tik be JavaScript — su JS select'as pasiunčia formą pats. */
.zd-ordering__go {
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 999px;
  background: var(--paper-100);
  padding: 6px 12px;
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  cursor: pointer;
}
html:not(.no-js) .zd-ordering__go { display: none; }

/* Susijusios prekės prekės puslapyje */
.zd-related { margin-top: var(--space-12); }
.zd-related__title { margin-bottom: var(--space-6); }

/* Ilgas ženklų sąrašas nepaverčia šoninės juostos begaline.
   14 ženklų × ~30 px + antraštės telpa, likę pasiekiami slenkant. */
.zd-checkset--scroll {
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
}
.zd-checkset--scroll::-webkit-scrollbar { width: 6px; }
.zd-checkset--scroll::-webkit-scrollbar-thumb {
  background: var(--paper-200);
  border-radius: 999px;
}

/* Aktyvių filtrų juosta virš rezultatų */
.zd-activefilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.zd-activefilters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px 5px 12px;
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 999px;
  background: var(--paper-100);
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
}
.zd-activefilters__chip:hover,
.zd-activefilters__chip:focus-visible {
  background: var(--crimson-600);
  border-color: var(--crimson-700);
  color: var(--paper-050);
}
.zd-activefilters__x { font-size: 15px; line-height: 1; opacity: .75; }
.zd-activefilters__clear { margin-left: 4px; }

/* ==========================================================================
   BESISUKANTI SCENA
   Prekės apskritimu ant scenos grindų. Padėtį, mastelį, permatomumą ir
   z-index kiekvienam kadrui skaičiuoja assets/js/stage.js — čia tik pradinė
   būklė, kad be JavaScript prekės būtų matomos paprasta eilute.
   ========================================================================== */
.zd-hero__figure { display: flex; flex-direction: column; gap: var(--space-4); }

.zd-stage {
  position: absolute;
  /*
   * Juostos vieta paimta IŠ PAVEIKSLĖLIO, ne iš akies.
   *
   * Scenos WEBP yra 1536×961 (santykis 1,6), o rėmelis — 1,28, tad su
   * `object-fit: cover` nukerpama po 9,95 % iš kiekvieno šono. Perskaičiavus
   * apšviesta scenos anga yra ties 39–90 % rėmelio pločio, o medinė pakyla —
   * ties 24–92 %, jos viršus ties 87 % aukščio. Anga NĖRA per vidurį: jos
   * centras yra ties 58 %.
   *
   * Anksčiau juosta buvo 7–93 % (centras 50 %), t. y. per aštuonis procentus
   * į kairę nuo angos — todėl kairiosios prekės nueidavo už užuolaidos.
   */
  left: 26%; right: 6%; bottom: 8%;
  height: 52%;
  z-index: 3;
  /* Be JS: paprasta eilė. Su JS klasė is-ready perima valdymą. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  touch-action: pan-y;          /* vertikalus slinkimas lieka naršyklei */
  cursor: grab;
}
.zd-stage:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 6px; border-radius: 8px; }
.zd-stage.is-dragging { cursor: grabbing; }

.zd-stage.is-ready { display: block; }
.zd-stage.is-ready .zd-stage__item {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  margin-left: -23%;
  /* Mastelis turi mažinti prekę Į GRINDIS, ne nuo centro — kitaip mažesnės
     prekės pakimba ore. */
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.zd-stage__item {
  position: relative;
  display: block;
  aspect-ratio: .84;
  border-radius: 14px 6px 12px 5px;
  background: rgba(255, 249, 236, .07);
  border: var(--bw-ui) solid rgba(182, 167, 204, .45);
  overflow: hidden;
  min-width: 0;
  flex: 0 1 30%;
  transition: border-color var(--d-ui) var(--ease-ui), box-shadow var(--d-ui) var(--ease-ui);
  /* Nutempus nuotrauka neturi būti „paimama“ kaip vaizdas */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.zd-stage__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Rėmelio variantas: nuotrauka su savo fonu (pvz. mėlyna tiekėjo studija) arba
   JavaScript neveikia. Tokios nebeiškirpsim, todėl paverčiam ją SĄMONINGA
   detale — įrėminta nuotrauka ant molberto: pergamento paraštė, auksinis
   kraštas ir vinjetė. Kitaip ant tamsios scenos ji atrodo kaip įklijuotas
   spalvotas stačiakampis. */
.zd-stage__item:not(.is-cutout) {
  padding: 4%;
  background: linear-gradient(180deg, rgba(255, 249, 236, .16), rgba(255, 249, 236, .06));
  border-color: rgba(213, 166, 59, .5);
  box-shadow: 0 10px 26px rgba(14, 15, 24, .5);
}
.zd-stage__item:not(.is-cutout) img { border-radius: 8px; }

/* Vinjetė nuleidžia kadro kraštus į scenos prieblandą. */
.zd-stage__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(76% 66% at 50% 40%, transparent 42%, rgba(38, 26, 56, .46) 100%);
  mix-blend-mode: multiply;
}
.zd-stage__item.is-front {
  border-color: rgba(213, 166, 59, .8);
  border-radius: 16px 7px 14px 5px;
  background: rgba(255, 249, 236, .12);
  box-shadow: 0 10px 30px rgba(14, 15, 24, .45);
}
.zd-stage__item:hover { border-color: var(--gold-500); }

/* --------------------------------------------------------------------------
   Iškirpta prekė (assets/js/cutout.js nuėmė baltą foną).
   Rėmelio nebereikia: žaislas stovi ant grindų su savo šešėliu.
   -------------------------------------------------------------------------- */
.zd-stage__item.is-cutout,
.zd-stage__item.is-cutout.is-front {
  background: none;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
}
.zd-stage__item.is-cutout::before { content: none; }
.zd-stage__item.is-cutout img {
  /* Kontūro šešėlis, ne kvadrato — todėl drop-shadow, ne box-shadow. */
  filter: drop-shadow(0 6px 10px rgba(14, 15, 24, .5));
  object-position: 50% 100%;
}
.zd-stage__item.is-cutout.is-front img {
  filter: drop-shadow(0 8px 14px rgba(14, 15, 24, .55))
          drop-shadow(0 0 20px rgba(232, 201, 106, .26));
}
/* Šešėlis ant grindų — be jo prekė atrodo pakibusi. */
.zd-stage__item.is-cutout::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -3%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(11, 12, 20, .55), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* Juosta po scena: rodyklės ir priekinės prekės pavadinimas */
.zd-stage__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.zd-stage__nav { flex: none; color: var(--paper-050); }
.zd-stage__caption { flex: 1; min-width: 0; margin: 0; text-align: center; }
.zd-stage__caption a { text-decoration: none; display: block; min-width: 0; }
.zd-stage__name {
  display: block;
  font: 700 var(--fs-ui)/1.35 var(--font-ui);
  color: var(--paper-050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zd-stage__price {
  display: block;
  font: 800 var(--fs-ui)/1.3 var(--font-ui);
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.zd-stage__caption a:hover .zd-stage__name { color: var(--gold-300); }

@media (max-width: 767px) {
  /*
   * Mobiliame karuselės nėra — trys prekės stovi eile ant scenos grindų.
   *
   * KODĖL NE `position: static`. Pirmoji versija juostą padarė statine
   * („prekės po scena telpa geriau nei ant jos“), ir tai SUGRIOVĖ visą sceną:
   * `.zd-hero__stage` viduje neliko nė vieno tinklelio vaiko, kurio aukštis
   * kažką reikštų, o su `aspect-ratio: 1.28` plotis pradėtas skaičiuoti nuo
   * beveik nulinio aukščio. Rėmelis susitraukdavo į 32×25 px — telefone
   * pagrindinio puslapio scenos praktiškai NEBUVO. Rasta 2026-08-12
   * matuojant 390 px pločio rėme.
   *
   * Dabar juosta lieka absoliuti (kaip stalinėje versijoje), tik vietoje
   * karuselės — paprasta eilė. Prekės atsistoja apšviestoje angoje, 26 px nuo
   * rėmelio apačios: 343×268 rėmelyje trys prekės po 72×86.
   */
  .zd-stage.is-ready {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
  }
  .zd-stage.is-ready .zd-stage__item {
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    margin-left: 0;
    flex: 0 1 31%;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .zd-stage__item:nth-child(n+4) { display: none; }
}

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

/* Užuolaidos atidengimas — kol nėra sluoksnių, scena tiesiog įeina */
.zd-hero[data-curtain="reveal"] .zd-hero__scene {
  animation: zd-stage-in var(--d-hero) var(--ease-reveal) both;
}
@keyframes zd-stage-in {
  from { opacity: 0; transform: scale(1.04) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zd-hero[data-curtain="reveal"] .zd-hero__scene { animation: none; }
}

/* Mobiliame scena mažesnė, be gylio sluoksnių */
@media (max-width: 767px) {
  /*
   * `width: 100%` ČIA YRA BŪTINAS, ne dekoracija.
   *
   * `.zd-hero__figure` yra stulpelinis flex konteineris, tad vaikai turėtų
   * išsitempti į visą plotį. Bet `margin-inline: auto` skersinėje ašyje
   * IŠTEMPIMĄ IŠJUNGIA — tokia CSS taisyklė. Be aiškaus pločio rėmelio plotis
   * pradedamas skaičiuoti iš turinio (o visas jo turinys yra absoliutus, t. y.
   * nulinis) ir `aspect-ratio` gauna beveik nulį. Rezultatas telefone: scena
   * 32×25 px.
   *
   * `min-width: 0` ties `figure` — kad tinklelio elementas nesiplėstų iki savo
   * min-content pločio: 390 px lange jis buvo 410 px ir sceną kirpo iš šono.
   */
  .zd-hero__figure { min-width: 0; }
  .zd-hero__stage { width: 100%; max-width: 520px; margin-inline: auto; }
  /* „Rasti dovaną“ rodoma IR telefone.
     Anksčiau ji čia buvo slepiama, nors būtent telefone dovanos ieškantis
     lankytojas labiausiai ir nori vedimo už rankos. */
  .zd-hero__actions .zd-btn--secondary { display: inline-flex; }
}

/* Auksinis akcentas antraštėje */
.zd-hero-title__accent { color: var(--gold-300); }

/* Eyebrow su brūkšneliu — dizaino detalė, kurios gyvai nebuvo */
.zd-eyebrow--dash { display: inline-flex; align-items: center; gap: 9px; }
.zd-eyebrow--dash::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: currentColor;
  flex: none;
}

/* ==========================================================================
   3. KATEGORIJŲ DURYS — koliažas ir fallback
   ========================================================================== */
.zd-door__collage {
  position: absolute;
  inset: 21% 13% 24%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--paper-100);
  box-shadow: 0 0 0 2px var(--zd-accent, var(--accent-1));
}
.zd-door__collage img { width: 100%; height: 100%; object-fit: contain; background: var(--paper-050); }
.zd-door__collage img:first-child { grid-row: span 2; }

/* Fallback: kol nėra nuotraukų, šešios durys neturi atrodyti identiškai —
   kategorijos akcentas nuspalvina rakto skylutės žvaigždę ir vidinį apšvietimą. */
.zd-door__fallback svg { width: 44%; height: auto; color: var(--zd-accent, var(--gold-500)); }
.zd-door__fallback::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 62%, var(--zd-accent, var(--gold-500)) 0%, transparent 68%);
  opacity: .14;
  pointer-events: none;
}

/* ==========================================================================
   4. DOVANŲ IEŠKIKLIS — trys katalogo stalčiai
   ========================================================================== */
.zd-gift {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--line);
  border-radius: var(--r-panel);
  align-items: end;
}
@media (min-width: 768px) { .zd-gift { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }

/* ==========================================================================
   5. STORY sekcija
   ========================================================================== */
.zd-story { position: relative; overflow: hidden; }
.zd-story__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 768px) { .zd-story__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); } }
.zd-story__figure { max-width: 200px; margin-inline: auto; color: var(--plum-600); opacity: .9; }
.zd-story__figure svg { width: 100%; height: auto; }
.zd-story__text p { color: var(--text-muted-on-dark); max-width: 60ch; }
.zd-story__text .zd-btn--tertiary { color: var(--gold-300); }

/* ==========================================================================
   6. NAUJIENLAIŠKIS — parchment scena su vienu ornamentu
   ========================================================================== */
.zd-news {
  position: relative;
  padding: var(--space-12) var(--space-6);
  background: var(--paper-100);
  border: var(--bw-ui) solid var(--line);
  border-radius: var(--r-panel);
  text-align: center;
}
.zd-news__ornament {
  width: 56px; margin: 0 auto var(--space-4);
  color: var(--gold-500);
}
.zd-news__ornament svg { width: 100%; height: auto; }
.zd-news .zd-lead { margin-inline: auto; }
.zd-news__form {
  display: grid;
  gap: var(--space-3);
  max-width: 520px;
  margin: var(--space-6) auto var(--space-3);
  text-align: left;
}
@media (min-width: 600px) { .zd-news__form { grid-template-columns: 1fr auto; align-items: end; } }

/* ==========================================================================
   7. FOOTERIS
   ========================================================================== */
.zd-divider--footer svg { display: block; width: 100%; height: auto; }

.zd-footer { position: relative; overflow: hidden; padding-top: var(--space-12); }
.zd-footer__silhouette {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: .1;
  pointer-events: none;
}
.zd-footer__silhouette svg { width: 100%; height: auto; color: var(--paper-050); }

.zd-footer__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}
@media (min-width: 600px)  { .zd-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zd-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.zd-footer__col svg { max-width: 190px; height: auto; }
.zd-footer__title {
  font: 700 var(--fs-ui)/1.2 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-300);
  margin: 0 0 var(--space-4);
}
.zd-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.zd-footer__list a {
  font: 500 var(--fs-body)/1.5 var(--font-ui);
  color: var(--paper-050);
  text-decoration: none;
}
.zd-footer__list a:hover { color: var(--gold-300); text-decoration: underline; }
.zd-footer__list--contact li { display: flex; align-items: center; gap: var(--space-2); }
.zd-footer__list--contact .zd-icon { color: var(--gold-500); flex: none; }
.zd-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.zd-footer__social .zd-medallion { width: 40px; height: 40px; color: var(--paper-050); }

.zd-footer__bottom {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 249, 236, .12);
}
.zd-footer__bottom .zd-caption { color: var(--text-muted-on-dark); margin: 0; }

/* ==========================================================================
   8. PUSLAPIO ANTGALVIS + BREADCRUMB
   ========================================================================== */
.zd-pagehead {
  padding-block: var(--space-8) var(--space-4);
  background: var(--bg-section-alt);
  text-align: center;
}
.zd-pagehead__title { margin: 0 0 var(--space-3); }
.zd-pagehead .zd-lead { margin-inline: auto; }
.zd-pagehead .zd-divider { margin-top: var(--space-4); }

.zd-breadcrumb {
  font: 500 var(--fs-caption)/1.4 var(--font-ui);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.zd-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.zd-breadcrumb a:hover { color: var(--crimson-600); text-decoration: underline; }
.zd-breadcrumb__sep { margin-inline: var(--space-2); color: var(--gold-500); }

/* ==========================================================================
   9. PROSE — teisiniai puslapiai, įrašai
   ========================================================================== */
.zd-prose { max-width: 68ch; margin-inline: auto; }
.zd-prose > * + * { margin-top: var(--space-4); }
.zd-prose h2 { margin-top: var(--space-8); font-size: var(--fs-h3); }
.zd-prose h3 { margin-top: var(--space-6); font-size: var(--fs-h3); }
.zd-prose ul, .zd-prose ol { padding-left: 1.4em; display: grid; gap: var(--space-2); }
.zd-prose a { color: var(--crimson-600); text-underline-offset: 3px; }
.zd-prose img, .zd-prose figure img { max-width: 100%; height: auto; border-radius: var(--r-panel); }
.zd-prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--gold-500);
  background: var(--paper-100);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  font: 500 var(--fs-lead)/1.5 var(--font-display);
}
.zd-prose table { width: 100%; border-collapse: collapse; }
.zd-prose th, .zd-prose td { padding: var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }
.zd-prose__hero { max-width: 900px; margin: 0 auto var(--space-8); }
.zd-prose__hero img { width: 100%; height: auto; border-radius: var(--r-panel); }

.zd-postnav {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  max-width: 68ch; margin: var(--space-12) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   10. ĮRAŠŲ SĄRAŠAS
   ========================================================================== */
.zd-grid-posts { display: grid; gap: var(--space-6); }
@media (min-width: 600px)  { .zd-grid-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zd-grid-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zd-postcard {
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  transition: transform var(--d-ui) var(--ease-ui), box-shadow var(--d-ui) var(--ease-ui);
}
.zd-postcard:hover { transform: translateY(var(--lift-card)); }
.zd-postcard__link { display: block; color: inherit; text-decoration: none; }
.zd-postcard__stage { aspect-ratio: 3 / 2; background: var(--paper-100); }
.zd-postcard__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zd-postcard__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.zd-postcard__title { margin: 0; font-size: var(--fs-h3); }
.zd-postcard__body p { margin: 0; color: var(--text-muted); }

/* ==========================================================================
   11. PAGINACIJA
   ========================================================================== */
.zd-pagination { margin-top: var(--space-12); }
.zd-pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; align-items: center;
}
.zd-pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding-inline: var(--space-3);
  font: 700 var(--fs-ui)/1 var(--font-ui);
  color: var(--text-strong);
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 999px;
  text-decoration: none;
}
.zd-pagination .page-numbers:hover { background: var(--paper-100); }
.zd-pagination .page-numbers.current { background: var(--crimson-600); border-color: var(--crimson-700); color: var(--paper-050); }
.zd-pagination .page-numbers.dots { border: 0; background: none; min-width: auto; }

/* ==========================================================================
   12. TUŠČIOS BŪSENOS IR 404
   ========================================================================== */
.zd-empty { text-align: center; max-width: 640px; margin-inline: auto; }
.zd-empty__mark { width: 88px; margin: 0 auto var(--space-6); color: var(--gold-500); }
.zd-empty__mark--lg { width: 180px; color: var(--plum-600); }
.zd-empty__mark svg { width: 100%; height: auto; }
/* Tapyta scena vietoj ženklo — 404 ir „nieko neradome“. */
.zd-empty__scene { max-width: 460px; margin: 0 auto var(--space-6); }
.zd-empty h1, .zd-empty h2 { margin: 0 0 var(--space-3); }
.zd-empty .zd-lead { margin-inline: auto; }
.zd-empty__search { display: grid; gap: var(--space-3); margin: var(--space-8) auto 0; text-align: left; }
@media (min-width: 600px) {
  .zd-empty__search { grid-template-columns: 1fr auto; align-items: end; }
  .zd-empty__search label { grid-column: 1 / -1; }
}
.zd-empty__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}
.zd-section--404 { padding-block: var(--space-16); }

/* ==========================================================================
   13. Bendra
   ========================================================================== */
.zd-center { text-align: center; }
#zd-main { display: block; }

/* ==========================================================================
   14. SLAPUKŲ SUTIKIMAS
   Juosta apačioje, neblokuoja turinio, nėra cookie wall.
   „Atmesti“ vizualiai tokio pat svorio kaip „Priimti“ — teisinis reikalavimas,
   ne dizaino sprendimas, todėl abu yra pilni mygtukai.
   ========================================================================== */
.zd-consent {
  position: fixed;
  left: var(--space-4); right: var(--space-4);
  bottom: var(--space-4);
  z-index: 300;
  max-width: 980px;
  margin-inline: auto;
  padding: var(--space-6);
  background: var(--paper-050);
  border: var(--bw-illustration) solid var(--ink-950);
  border-radius: var(--r-panel);
  box-shadow: 0 18px 48px rgba(21, 22, 34, .28);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease-reveal);
}
.zd-consent.is-in { opacity: 1; transform: none; }
.zd-consent[hidden] { display: none; }

.zd-consent__inner { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .zd-consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }

.zd-consent__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.zd-consent__copy p { margin: 0; font: 500 var(--fs-ui)/1.55 var(--font-ui); color: var(--text-muted); }
.zd-consent__copy a { color: var(--crimson-600); }

.zd-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 599px) {
  .zd-consent { padding: var(--space-4); left: 0; right: 0; bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .zd-consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .zd-consent__actions .zd-btn--tertiary { grid-column: 1 / -1; justify-self: center; }
}

/* Nustatymų drawer’is */
.zd-drawer--consent { z-index: 320; }
.zd-consent-cat + .zd-consent-cat { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.zd-consent-cat__head {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
}
.zd-consent-cat__head input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--crimson-600); flex: none; }
.zd-consent-cat__head input:disabled { cursor: not-allowed; }
.zd-consent-cat__label { font: 700 var(--fs-lead)/1.2 var(--font-display); color: var(--text-strong); }
.zd-consent-cat .zd-caption { margin: var(--space-2) 0 0 34px; }

/* Footerio nuoroda sutikimui perkeisti */
.zd-consent-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--gold-300);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.zd-consent-link:hover { color: var(--paper-050); }

/* Platus puslapio rėmas — krepšelis, kasa, paskyra */
.zd-page-wide { max-width: none; }
.zd-page-wide > * + * { margin-top: var(--space-4); }

/* ==========================================================================
   15. DRAWER’IŲ PATAISOS
   Visi drawer’iai turi nusileisti po WP admin bar’u. Be to mini krepšelio
   antraštė atsidurdavo PO admin bar’u (jo z-index 99999, mūsų 200), tai
   „Jūsų krepšelis“ buvo nukirstas, o X mygtukas užlipdavo ant teksto.
   Patikrinta gyvai 2026-08-11.
   ========================================================================== */
.zd-drawer {
  top: var(--wp-admin--admin-bar--height, 0px);
  width: min(440px, 100vw);
}
.zd-drawer__head { flex: none; }

/* ==========================================================================
   16. MINI KREPŠELIS
   Woo `woocommerce_mini_cart()` struktūra yra tokia:
     <li><a class="remove">×</a><a href><img>Pavadinimas</a><span class="quantity">1 × 26,65 €</span></li>
   Svarbiausia detalė: NUOTRAUKA YRA PAVADINIMO NUORODOS VIDUJE. Todėl pirma
   versija, kuri img dėjo į atskirą tinklelio stulpelį, neveikė — img nėra
   tinklelio elementas, ir pavadinimui likdavo 74 px, t. y. po vieną žodį
   eilutėje. Būtent taip ir atrodė gyvai.
   Dabar tinklelį daro pati nuoroda: 64 px miniatiūra + tekstas, o kaina
   atskirame dešiniame stulpelyje.
   ========================================================================== */
.zd-drawer--cart .zd-drawer__body { padding: var(--space-6); }

.woocommerce ul.cart_list,
ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Flex, ne grid: `auto` stulpelis netikėtai pasiimdavo 222 px iš 440 px
   drawer'io, o pavadinimui likdavo 157 px. Flex’e min-width:0 + flex:none
   duoda tikslų pasiskirstymą — kaina užima tik tiek, kiek jai reikia. */
.woocommerce ul.cart_list li,
ul.woocommerce-mini-cart li {
  position: relative;
  display: flex;
  flex-wrap: nowrap;      /* be to eilutė lūžta ir kaina nukeliauja po pavadinimu */
  align-items: center;
  gap: var(--space-3);
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 64px;
}

/* Pavadinimo nuoroda pati yra tinklelis: miniatiūra + tekstas */
.woocommerce ul.cart_list li > a:not(.remove),
ul.woocommerce-mini-cart li > a:not(.remove) {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  font: 700 14.5px/1.35 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
}
.woocommerce ul.cart_list li > a:not(.remove):hover,
ul.woocommerce-mini-cart li > a:not(.remove):hover { color: var(--crimson-600); }

.woocommerce ul.cart_list li img,
ul.woocommerce-mini-cart li img {
  width: 64px !important;
  height: 64px;
  margin: 0 !important;
  float: none !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--paper-200);
  border-radius: 12px 6px 10px 4px;
}

/* Kaina ir kiekis — dešinėje, vienodo pločio skaitmenys */
.woocommerce ul.cart_list li .quantity,
ul.woocommerce-mini-cart li .quantity {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 104px;      /* „1 ד ir suma lūžta į dvi eilutes, ne 138 px viena */
  text-align: right;
  font: 600 12.5px/1.4 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.woocommerce ul.cart_list li .quantity .amount,
ul.woocommerce-mini-cart li .quantity .amount {
  display: block;
  font: 800 16px/1.2 var(--font-ui);
  color: var(--text-strong);
}

/* „Pašalinti“ — mažas medalionas ant miniatiūros kampo */
.woocommerce ul.cart_list li a.remove,
ul.woocommerce-mini-cart li a.remove {
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: 2;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 50%;
  font-size: 13px; line-height: 1;
  color: var(--ink-950);
  text-decoration: none;
}
.woocommerce ul.cart_list li a.remove:hover { background: var(--crimson-600); color: var(--paper-050); }

/*
 * Paspaudimo taikinys 44×44, nors medalionas lieka 22 px.
 *
 * KODĖL. Medalionas yra 22×22 — perpus mažiau, nei rekomenduojama pirštui
 * (44×44). Ant telefono tai reiškia, kad prekę iš krepšelio išimti pavyksta
 * antru ar trečiu bandymu, o pataikius į šoną atsidaro prekės puslapis.
 * Rasta 2026-08-12 matuojant taikinius 390 px rėme.
 *
 * Didinam TAIKINĮ, ne piktogramą: `::after` išplečia jautrią zoną už
 * medaliono ribų, o vizualiai niekas nepasikeičia. Taip išvengiam ir eilės
 * išsitampymo krepšelio lentelėje.
 */
.woocommerce ul.cart_list li a.remove::after,
ul.woocommerce-mini-cart li a.remove::after,
.woocommerce-cart-form a.remove::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.woocommerce-cart-form a.remove { position: relative; }

/* ---------- Blocksy mini krepšelio žymėjimas ----------
   Blocksy, kaip ir su prekės kortele, perrašo Woo mini krepšelį į savo
   struktūrą: <a class="remove"> · <a class="ct-media-container"><img></a> ·
   <div class="product-data"><a class="product-title">…</a><span class="quantity">…</span></div>
   Todėl visos taisyklės, parašytos Woo `ul.cart_list li a > img` struktūrai,
   šioje instaliacijoje neveikia. Patikrinta gyvai: pavadinimas gaudavo 118 px
   ir laužydavosi, o kaina nukeliaudavo į kitą eilutę.
   Stiliuojam abi struktūras, kad tema nesulūžtų ir be Blocksy. */
ul.woocommerce-mini-cart li > a.ct-media-container {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: block;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--paper-200);
  border-radius: 12px 6px 10px 4px;
}
ul.woocommerce-mini-cart li > a.ct-media-container img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

ul.woocommerce-mini-cart li > .product-data {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
ul.woocommerce-mini-cart li > .product-data > a.product-title {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 14.5px/1.35 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}
ul.woocommerce-mini-cart li > .product-data > a.product-title:hover { color: var(--crimson-600); }
ul.woocommerce-mini-cart li > .product-data > .quantity {
  flex: 0 0 auto;
  margin: 0;
  max-width: 104px;
  text-align: right;
  font: 600 12.5px/1.4 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
ul.woocommerce-mini-cart li > .product-data > .quantity .amount {
  display: block;
  font: 800 16px/1.2 var(--font-ui);
  color: var(--text-strong);
}

.woocommerce-mini-cart__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font: 800 16px/1.2 var(--font-ui);
}
.woocommerce-mini-cart__total .amount {
  font: 800 var(--fs-price)/1 var(--font-ui);
  color: var(--crimson-600);
  font-variant-numeric: tabular-nums;
}

.woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.woocommerce-mini-cart__buttons .button {
  width: 100%;
  min-height: var(--control-h-lg);
}
/* „Krepšelis“ yra antrinis veiksmas — bilietas, ir po pirminiu */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: var(--zd-ticket-url) center / 100% 100% no-repeat;
  color: var(--ink-950);
  order: 2;
}
.woocommerce-mini-cart__buttons .button.checkout { order: 1; }

.woocommerce-mini-cart__empty-message {
  margin: 0;
  font: 600 var(--fs-body)/1.5 var(--font-ui);
  color: var(--text-muted);
}

/* ==========================================================================
   17. SEKCIJOS ANTGALVIS
   Dizaine eyebrow + h2 stovi kairėje, o „Visos kategorijos“ — pabraukta
   „siūlo“ nuoroda toje pačioje eilėje dešinėje. Gyvai antraštė buvo viena,
   o nuoroda nukeliavusi į sekcijos apačią kaip mygtukas.
   ========================================================================== */
.zd-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.zd-sectionhead h2 { margin: 0; }
.zd-sectionhead__aside { flex: none; }

/* „Siūlo“ nuoroda — plonas pabraukimas, kuris hover’e paraudonuoja */
.zd-threadlink {
  font: 700 15.5px/1.2 var(--font-ui);
  color: var(--text-strong);
  text-decoration: none;
  border-bottom: var(--bw-ui) solid rgba(21, 22, 34, .25);
  padding-bottom: 3px;
  transition: border-color var(--d-ui) var(--ease-ui), color var(--d-ui) var(--ease-ui);
}
.zd-threadlink:hover { border-bottom-color: var(--crimson-600); color: var(--crimson-600); }
.zd-ink .zd-threadlink { color: var(--paper-050); border-bottom-color: rgba(255, 249, 236, .3); }
.zd-ink .zd-threadlink:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }

/* ==========================================================================
   18. KATALOGO MAKETAS IR FILTRAI
   Dizainas (Checkpoint 3): tamsus antgalvis, 288 px filtrų juosta kairėje,
   3 stulpelių tinklelis dešinėje. Gyvai nebuvo nei antgalvio spalvos,
   nei filtrų — katalogas eidavo per visą plotį.
   ========================================================================== */

/* ---------- Tamsus antgalvis ---------- */
.zd-pagehead--ink {
  background: var(--bg-brand);
  text-align: left;
  padding-block: var(--space-8);
}
.zd-pagehead--ink .zd-pagehead__title { color: var(--paper-050); }
.zd-pagehead--ink .zd-lead { color: var(--text-muted-on-dark); margin: 10px 0 0; max-width: 520px; }
.zd-pagehead--ink .zd-breadcrumb { color: var(--text-muted-on-dark); margin-bottom: 12px; }
.zd-pagehead--ink .zd-breadcrumb a { color: var(--text-muted-on-dark); }
.zd-pagehead--ink .zd-breadcrumb a:hover { color: var(--gold-300); }
.zd-pagehead--ink .zd-breadcrumb__sep { color: var(--plum-600); }
.zd-pagehead--ink .zd-breadcrumb .woocommerce-breadcrumb { margin: 0; font: inherit; color: inherit; }

/* ---------- Dviejų stulpelių maketas ---------- */
.zd-shop__main { min-width: 0; }
@media (min-width: 1024px) {
  .zd-shop--filtered { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 32px; align-items: start; }
}

.zd-shop__filters-toggle { width: 100%; margin-bottom: var(--space-4); }
@media (min-width: 1024px) { .zd-shop__filters-toggle { display: none; } }
.zd-shop__side-inner { display: none; }
@media (min-width: 1024px) {
  .zd-shop__side-inner { display: block; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }
}

/* Mobilus filtrų drawer’is slysta iš kairės */
.zd-drawer--filters { inset: var(--wp-admin--admin-bar--height, 0px) auto 0 0; transform: translateX(-100%); }
.zd-drawer--filters[data-open="true"] { transform: none; }
.zd-drawer--filters .zd-filters { border: 0; background: none; padding: 0; }
.zd-drawer--filters .zd-filters::after { display: none; }

/* ---------- Filtrų plokštė ---------- */
.zd-filters {
  position: relative;
  background: var(--paper-100);
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 18px 8px 16px 6px;
  padding: 22px;
  overflow: hidden;
}
/* Dekoratyvi arka kampe — dizaino detalė */
.zd-filters::after {
  content: "";
  position: absolute;
  right: -14px; top: -14px;
  width: 64px; height: 64px;
  border: var(--bw-ui) solid var(--crimson-600);
  border-radius: 50% 50% 6px 6px / 44% 44% 4% 4%;
  opacity: .35;
  pointer-events: none;
}
.zd-filters__title {
  font: 700 21px/1.15 var(--font-display);
  color: var(--text-strong);
  margin: 0 0 18px;
}
.zd-filters__label {
  font: 800 12.5px/1.2 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.zd-filters__hint { font: 600 12.5px/1.4 var(--font-ui); color: var(--text-muted); margin: 8px 0 0; }
.zd-filters__hair { height: 1px; background: var(--paper-200); margin: 20px 0; }
.zd-filters__actions { display: grid; gap: var(--space-3); justify-items: start; margin-top: 18px; }
.zd-filters__apply { width: 100%; }

/* Kainos rėžis */
.zd-range { display: flex; align-items: center; gap: 8px; }
.zd-range__input {
  min-width: 0; flex: 1;
  min-height: 42px;
  padding: 0 10px;
  background: var(--paper-050);
  border: var(--bw-ui) solid var(--line);
  border-radius: var(--r-field);
  font: 700 14px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.zd-range__input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.zd-range__sep, .zd-range__unit { font: 700 14px/1 var(--font-ui); color: var(--text-muted); flex: none; }

/* Amžiaus chip’ai — žymė, ne mygtukas, kad veiktų be JS */
.zd-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.zd-chip--filter {
  position: relative;
  padding: 9px 14px;
  min-height: 40px;
  display: inline-flex; align-items: center;
  font: 700 13.5px/1 var(--font-ui);
  border-radius: 4px 11px 3px 9px;
  background: var(--paper-050);
  color: var(--plum-800);
  border: var(--bw-ui) solid var(--paper-200);
  cursor: pointer;
}
.zd-chip--filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zd-chip--filter.is-on,
.zd-chip--filter:has(input:checked) {
  background: var(--ink-900);
  color: var(--paper-050);
  border-color: var(--ink-950);
}
.zd-chip--filter:has(input:focus-visible) { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* Pomėgio žymės */
.zd-checkset { display: flex; flex-direction: column; gap: 11px; }
.zd-check {
  display: flex; align-items: center; gap: 10px;
  font: 600 14.5px/1.3 var(--font-ui);
  color: var(--plum-800);
  cursor: pointer;
  min-height: var(--tap-min);
}
.zd-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zd-check__box {
  width: 19px; height: 19px; flex: none;
  border: var(--bw-ui) solid var(--ink-950);
  border-radius: 5px 2px 5px 2px;
  background: var(--paper-050);
}
.zd-check:has(input:checked) .zd-check__box--1 { background: var(--crimson-600); }
.zd-check:has(input:checked) .zd-check__box--2 { background: var(--gold-500); }
.zd-check:has(input:checked) .zd-check__box--3 { background: var(--teal-600); }
.zd-check:has(input:checked) .zd-check__box--4 { background: var(--dust-blue-500); }
.zd-check:has(input:checked) .zd-check__box--5 { background: var(--plum-600); }
.zd-check:has(input:focus-visible) .zd-check__box { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.zd-check__label { min-width: 0; }
.zd-check__count { margin-left: auto; font: 600 12.5px/1 var(--font-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Perjungiklis */
.zd-switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap-min);
  font: 700 14.5px/1.2 var(--font-ui);
  color: var(--text-strong);
  cursor: pointer;
}
.zd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zd-switch__track {
  position: relative; flex: none;
  width: 46px; height: 26px;
  border-radius: 13px;
  background: var(--paper-200);
  border: var(--bw-ui) solid var(--ink-950);
  transition: background var(--d-ui) var(--ease-ui);
}
.zd-switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper-050);
  border: 1px solid var(--ink-950);
  transition: transform var(--d-ui) var(--ease-ui);
}
.zd-switch:has(input:checked) .zd-switch__track { background: var(--teal-600); }
.zd-switch:has(input:checked) .zd-switch__knob { transform: translateX(20px); }
.zd-switch:has(input:focus-visible) .zd-switch__track { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* ---------- Tinklelio stulpeliai ---------- */
.zd-grid-products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .zd-grid-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zd-grid-products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .zd-grid-products--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zd-grid-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }