/** Shopify CDN: Minification failed

Line 2311:0 Unexpected "}"

**/
/*
  lv-base.css — komponentní vrstva design systému luxusnivlasy.
  Staví na tokenech z lv-tokens.css (+ přepisy ze settings v snippets/lv-theme-styles.liquid).
  Pravidla mířená na Horizon třídy jsou záměrně úzká, aby přežila update base theme.
*/

/* ============================================================ focus stavy
   2px zlatý outline s offsetem — viditelný na tmavém i světlém podkladu */
:is(a, button, input, select, textarea, summary, [tabindex], [role='button']):focus-visible {
  outline: var(--lv-focus-outline);
  outline-offset: var(--lv-focus-offset);
  border-radius: var(--lv-radius, 10px);
}

::selection {
  background: var(--lv-accent);
  color: var(--lv-on-accent);
}

/* 19. 10. 2026 (Zuzana, zpetna vazba 592262267220): posuvnik #eef1f4 na bilem nebyl videt.
   Jezdec #8a9097 (kontrast 3,2:1 k bile, jako tlumeny text), drazka zustava barvou pozadi. */
html {
  scrollbar-color: #8a9097 var(--lv-bg);
}

/* ============================================================ tlačítka
   Pilulky: primární plná olivová s krémovým textem, sekundární krémová
   s olivovým vlasem — to je ten tvar, který drží vzhled předlohy.
   Horizon čte lokální --button-* proměnné, přepisujeme je na úrovni tříd. */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  font-size: var(--lv-btn-size);
  font-weight: var(--lv-btn-weight);
  letter-spacing: var(--lv-btn-spacing);
  text-transform: uppercase;
  transition: background-color var(--lv-transition), color var(--lv-transition),
    box-shadow var(--lv-transition), border-color var(--lv-transition);
}

.button:not(.button-custom):not(.button-secondary):not(.button-unstyled) {
  --button-background-color: var(--lv-cta);
  --button-color: var(--lv-on-cta);
}

.button:not(.button-custom):not(.button-secondary):not(.button-unstyled):hover {
  --button-background-color: var(--lv-accent-hover);
}

/* Vlas v plné síle, ne poloprůhledný — předloha kreslí obrys tlačítka
   stejnou barvou jako text. */
.button-secondary {
  --button-background-color: var(--lv-cta-outline-bg);
  --button-border-color: var(--lv-border-strong);
  --button-color: var(--lv-cta-outline-text);
}

.button-secondary:hover {
  --button-background-color: var(--lv-accent-subtle);
  --button-border-color: var(--lv-border-strong);
}

/* Destruktivní varianta (mazání položky, zrušení) — obrys, lososová */
.lv-button--destructive {
  --button-background-color: transparent;
  --button-border-color: var(--lv-price-sale);
  --button-color: var(--lv-price-sale);
}

.lv-button--destructive:hover {
  --button-background-color: color-mix(in srgb, var(--lv-price-sale) 12%, transparent);
}

/* ============================================================ eyebrow / nadtitulek */
.lv-eyebrow {
  display: block;
  font-size: var(--lv-eyebrow-size);
  font-weight: var(--lv-eyebrow-weight);
  letter-spacing: var(--lv-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--lv-accent);
  margin-block-end: 16px;
}

.lv-eyebrow--muted {
  color: var(--lv-text-muted);
}

/* ============================================================ odkazové CTA — zlaté se šipkou */
.lv-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--lv-btn-size);
  font-weight: var(--lv-btn-weight);
  letter-spacing: var(--lv-btn-spacing);
  text-transform: uppercase;
  color: var(--lv-accent);
  text-decoration: none;
  transition: color var(--lv-transition);
}

.lv-cta-link::after {
  content: '→';
  font-size: 1.1em;
  transition: translate var(--lv-transition);
}

.lv-cta-link:hover {
  color: var(--lv-accent-hover);
}

.lv-cta-link:hover::after {
  translate: 4px 0;
}

/* ============================================================ chip / pilulka (typy vlasů, filtry) */
.lv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--lv-radius-pill);
  background: var(--lv-surface);
  border: 1px solid var(--lv-border);
  color: var(--lv-text);
  font-size: var(--lv-body-small-size);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--lv-transition), border-color var(--lv-transition),
    color var(--lv-transition);
}

.lv-chip:hover {
  background: var(--lv-surface-2);
  border-color: color-mix(in srgb, var(--lv-text) 45%, transparent);
}

.lv-chip--outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--lv-text) 40%, transparent);
}

.lv-chip--active,
.lv-chip[aria-pressed='true'],
.lv-chip[aria-current] {
  background: var(--lv-accent);
  border-color: var(--lv-accent);
  color: var(--lv-on-accent);
  font-weight: 500;
}

/* ============================================================ badge (Novinka, Tip, Vegan, Sleva) */
.lv-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--lv-radius-pill);
  background: var(--lv-badge-bg);
  color: var(--lv-badge-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.lv-badge--sale {
  color: var(--lv-price-sale);
}

.lv-badge--muted {
  color: var(--lv-text-muted);
}

/* ============================================================ cena */
.lv-price {
  font-size: var(--lv-price-size);
  font-weight: var(--lv-price-weight);
  color: var(--lv-price);
}

.lv-price--sale {
  color: var(--lv-price-sale);
}

.lv-price--compare {
  font-size: var(--lv-body-small-size);
  font-weight: 400;
  color: var(--lv-text-muted);
  text-decoration: line-through;
}

/* ============================================================ dostupnost slovy */
.lv-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lv-body-small-size);
}

.lv-availability::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: currentcolor;
}

.lv-availability--in {
  color: var(--lv-in-stock);
}

.lv-availability--out {
  color: var(--lv-out-stock);
}

/* ============================================================ karta produktu
   Packshoty distribuovaných značek (bílé pozadí) dostávají světlejší podklad
   se zaoblením — brief 5.4. */
.card-gallery {
  background-color: var(--lv-surface);
  /* Hranatý rám dle reference — zaoblení řídí Horizon přes card_corner_radius,
     tady se jen nepřidává vlastní. */
  border-radius: 0;
}

/* ============================================================ dekorativní prvky sekcí */
.lv-watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -2%;
  translate: 0 -54%;
  font-family: var(--lv-font-serif);
  font-size: clamp(10rem, 26vw, 22rem);
  line-height: 1;
  color: var(--lv-watermark-color);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.lv-ghost {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 3%;
  translate: 0 -50%;
  font-family: var(--lv-font);
  font-size: clamp(4.5rem, 15vw, 15rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--lv-ghost-stroke);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* ============================================================ breadcrumb */
.lv-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--lv-body-small-size);
  color: var(--lv-text-muted);
}

.lv-breadcrumbs a {
  color: var(--lv-text-muted);
  text-decoration: none;
  transition: color var(--lv-transition);
}

.lv-breadcrumbs a:hover {
  color: var(--lv-text);
}

.lv-breadcrumbs__sep {
  opacity: 0.5;
}

.lv-breadcrumbs [aria-current='page'] {
  color: var(--lv-text);
}

/* ============================================================ skeleton loader */
.lv-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--lv-surface);
  border-radius: var(--lv-radius);
}

.lv-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--lv-text) 5%, transparent) 50%,
    transparent 70%
  );
  animation: lv-skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes lv-skeleton-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* ============================================================ toast / notifikace */
.lv-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--lv-surface-2);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-radius);
  color: var(--lv-text);
  font-size: var(--lv-body-small-size);
  box-shadow: var(--lv-shadow);
  z-index: 100;
}

.lv-toast--success {
  border-color: color-mix(in srgb, var(--lv-in-stock) 50%, transparent);
}

/* ============================================================ formulářové prvky — doladění nad Horizon settings */
input[type='checkbox']:checked,
input[type='radio']:checked {
  accent-color: var(--lv-accent);
}

/* ============================================================ doprava zdarma — progress (košík) */
.lv-free-shipping {
  display: grid;
  gap: 8px;
  padding-block-end: 16px;
}

.lv-free-shipping__label {
  margin: 0;
  font-size: var(--lv-body-small-size);
  color: var(--lv-text-muted);
}

.lv-free-shipping--reached .lv-free-shipping__label {
  color: var(--lv-in-stock);
}

.lv-free-shipping__track {
  block-size: 4px;
  border-radius: var(--lv-radius-pill);
  background: color-mix(in srgb, var(--lv-text) 12%, transparent);
  overflow: hidden;
}

.lv-free-shipping__fill {
  block-size: 100%;
  border-radius: var(--lv-radius-pill);
  background: var(--lv-accent);
  transition: inline-size 300ms ease-out;
}

.lv-free-shipping--reached .lv-free-shipping__fill {
  background: var(--lv-in-stock);
}

/* ============================================================ doplňkové služby (košík) */
.lv-sluzby {
  display: grid;
  gap: 10px;
  padding-block-end: 16px;
}

.lv-sluzby__nadpis {
  margin: 0;
  font-size: var(--lv-body-small-size);
  font-weight: 700;
}

.lv-sluzby__seznam {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-sluzby__polozka {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.lv-sluzby__ikona img {
  display: block;
  inline-size: 40px;
  block-size: 40px;
  object-fit: contain;
  mix-blend-mode: multiply; /* ikony ze Shoptetu jsou JPG na bile, podklad souhrnu je sedy */
}

/* Zaskrtavatka jako ve Shoptetu (ctverecek), motiv je jinak kresli kulate jako radio */
.lv-sluzby input[type='checkbox'] {
  border-radius: 4px;
  flex: none;
}

.lv-sluzby__text {
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.lv-sluzby__hlava {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.lv-sluzby__cena {
  color: var(--lv-in-stock);
}

.lv-sluzby__popis {
  font-size: 12px;
  line-height: 1.45;
  color: var(--lv-text-muted);
}

/* ============================================================ dárek k objednávce (košík) */
.lv-darky {
  display: grid;
  gap: 8px;
  padding-block-end: 16px;
}

.lv-darky__nadpis {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lv-text-muted);
}

.lv-darky__seznam {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-darky__darek {
  display: grid;
  justify-items: center;
  gap: 6px;
  inline-size: 100%;
  block-size: 100%;
  padding: 10px 8px;
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-radius, 10px);
  background: var(--lv-surface, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.lv-darky__darek[aria-pressed='true'] {
  border-color: var(--lv-in-stock);
  box-shadow: inset 0 0 0 1px var(--lv-in-stock);
}

.lv-darky__darek:disabled {
  opacity: 0.6;
  cursor: progress;
}

.lv-darky__foto {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
}

.lv-darky__foto img {
  display: block;
  max-inline-size: 72px;
  max-block-size: 72px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lv-darky__nazev {
  font-size: var(--lv-body-small-size);
  line-height: 1.3;
  /* dlouhe nazvy typu Original/Nano/Power/Slim bez mezer pretekaly dlazdici */
  overflow-wrap: anywhere;
  hyphens: auto;
  min-inline-size: 0;
}

.lv-darky__seznam > li {
  min-inline-size: 0;
}

.lv-darky__motivace {
  margin: 0;
  font-size: var(--lv-body-small-size);
  color: var(--lv-text-muted);
}

/* ============================================================ upsell v košíku */
.lv-cart-upsell {
  margin-block-start: 20px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--lv-border);
}

.lv-cart-upsell__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lv-text-muted);
}

.lv-cart-upsell__items {
  display: grid;
  gap: 12px;
}

/* ============================================================ mini karta produktu */
/* ---------------------------------------------------------------- hlavička sekce
   Eyebrow, nadpis a uvozující věta nad obsahem přes celou šířku. Je to jedno
   pravidlo pro všechny takové sekce schválně: každá si to dřív držela sama
   a hodnoty se rozešly (jednou 32 px pod nadpisem, jinde 44, tři sekce
   zarovnané vlevo a osm na střed), takže stránka působila rozházeně.

   Text VEDLE obrázku (rutina, flagship, akce s produkty) sem nepatří — tam
   je zarovnání vlevo správně, protože sloupec má svou vlastní osu. */
.lv-hlavicka {
  text-align: center;
  margin-block-end: clamp(28px, 4vw, 44px);
}

.lv-hlavicka__nadpis {
  margin: 0;
  font-size: var(--lv-h2-size);
  font-weight: var(--lv-heading-weight);
  letter-spacing: var(--lv-h2-spacing);
  line-height: var(--lv-t-line);
}

.lv-hlavicka__text {
  margin: 14px auto 0;
  max-inline-size: 62ch;
  color: var(--lv-text-muted);
}

/* ---------------------------------------------------------------- karta dvojice pod vlajkovým produktem
   Kreslí ji lv-duo-karta.liquid. Styly jsou tady, a ne v sekci, protože tytéž
   karty používá lv-flagship (uvnitř svého pruhu, aby přes ně pokračovalo
   pozadí) i samostatná sekce lv-duo-band. */
/* Karta nemá rámeček ani vlastní plochu: produkt má splývat s bílou stránkou,
   ne sedět v boxu. Dřív tu byl `background: var(--lv-surface)` se zaoblením a
   `overflow: hidden`, takže fotka končila viditelnou hranou. */
.lv-duokarta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Podklad pod produktem je přechod do průhledna, ne plocha — nemá tedy kde
   vytvořit hranu, a přitom produkt drží opticky na středu. */
.lv-duokarta__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 280px;
  padding: 32px;
  background: radial-gradient(72% 62% at 50% 46%, var(--lv-surface-2) 0%, rgb(255 255 255 / 0) 72%);
}

.lv-duokarta__media img {
  max-block-size: 320px;
  max-inline-size: 100%;
  object-fit: contain;
  /* Původní stín byl 45 % černé, stavěný na tmavé pozadí. Na bílé z něj byla
     špinavá skvrna — stejná oprava už proběhla u .lv-flagship__media img. */
  filter: drop-shadow(0 26px 34px rgb(30 41 51 / 0.16));
}

.lv-duokarta__content {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px;
}

.lv-duokarta__title {
  margin: 0;
}

.lv-duokarta__text {
  margin: 0;
  color: var(--lv-text-muted);
}

.lv-duokarta__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-start: 8px;
}

/* Mřížka dvojice — stejná v obou sekcích. */
.lv-duokarty {
  display: grid;
  gap: clamp(8px, 1.2vw, 16px);
}

@media screen and (min-width: 750px) {
  .lv-duokarty {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------- doplňkové odkazy v hlavičce
   Kreslí je lv-header-utility.liquid v horním (šedém) pruhu, vpravo vedle
   jazyka a ikon. Na mobilu se skrývají — tam je horní pruh úzký a tytéž
   odkazy jsou v šuplíku hlavní navigace. */
.lv-utility {
  display: none;
}

@media screen and (min-width: 990px) {
  .lv-utility {
    display: block;
  }
}

.lv-utility__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-utility__link {
  font-size: var(--lv-body-small-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  transition: color var(--lv-transition);
}

.lv-utility__link:hover,
.lv-utility__link.is-active {
  color: var(--lv-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- svislá karta produktu
   Používá ji lv-produkt-karta.liquid v posuvných řadách. Vodorovná varianta
   pro rutiny a upsell je .lv-mini níž. */
/* Licovani (Ben 7. 10.): karta je sloupec na vysku rady; nazev a podtext maji
   max. 2 radky a rezervu 2 radku, cena sedi dole (margin-top: auto), takze je
   u vsech karet v rade na stejne lince bez ohledu na delku textu. */
.lv-pkarta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  block-size: 100%;
  text-decoration: none;
  color: var(--lv-text);
}

.lv-pkarta__media {
  /* min-block-size: 0 - jinak vysoky orez (kolekce This..) roztahne ctverec na vysku fotky */
  flex: none;
  min-block-size: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 18px;
  background: var(--lv-card-media-bg, #ffffff);
  border-radius: var(--lv-radius);
  transition: background-color var(--lv-transition);
}

.lv-pkarta:hover .lv-pkarta__media {
  /* Dřív se sem vracelo šedé pozadí, čímž pod produktem znovu vznikl rámeček.
     Michal chce, aby produkt zůstal součástí bílé plochy, takže místo podkladu
     reaguje sama fotka. */
  background: var(--lv-card-media-bg, #ffffff);
}

.lv-pkarta__media img {
  transition: transform var(--lv-transition);
}

.lv-pkarta:hover .lv-pkarta__media img {
  transform: scale(1.04);
}

.lv-pkarta__media img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.lv-pkarta__badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 4px 10px;
  border-radius: var(--lv-radius-pill);
  background: var(--lv-price-sale);
  color: var(--lv-badge-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lv-pkarta__title {
  font-size: var(--lv-body-small-size);
  font-weight: 500;
  line-height: 1.35;
  align-self: start;
  /* Znacka je samostatny radek nad nazvem: 3 radky = znacka + 2 radky nazvu (7. 10.). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 4.05em;
  flex: none;
}

.lv-pkarta__co {
  margin-block-start: -4px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--lv-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 2.6em;
  flex: none;
}

.lv-pkarta__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block-start: auto;
}

.lv-mini {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: var(--lv-text);
}

.lv-routine__grid .lv-mini {
  grid-template-columns: 120px minmax(0, 1fr);
}

.lv-mini__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 10px;
  background: var(--lv-surface);
  border-radius: var(--lv-radius);
  transition: background-color var(--lv-transition);
}

.lv-mini:hover .lv-mini__media {
  background: var(--lv-surface-2);
}

.lv-mini__media img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.lv-mini__info {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.lv-mini__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lv-accent);
}

.lv-mini__title {
  font-size: var(--lv-body-small-size);
  font-weight: 500;
  line-height: 1.35;
}

.lv-mini__price .lv-price {
  font-size: var(--lv-body-small-size);
}

.lv-mini .lv-availability {
  font-size: 12px;
}

/* ============================================================ claims chipy na PDP */
.lv-claims {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-claims__chip {
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================ značka na PDP */
.lv-brand {
  display: flex;
  align-items: center;
}

.lv-brand__link {
  display: inline-flex;
  text-decoration: none;
}

.lv-brand__logo {
  display: block;
  max-block-size: 30px;
  inline-size: auto;
  background: var(--lv-surface);
  border-radius: 6px;
  padding: 4px 10px;
}

.lv-brand__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lv-text-muted);
  text-decoration: none;
}

a.lv-brand__name:hover {
  color: var(--lv-text);
}


/* Hvězdičky hodnocení — sdílené blokem lv-rating i záložkou Recenze */
.lv-stars {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.lv-stars__empty {
  color: var(--lv-border);
}

.lv-stars__full {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: var(--lv-accent);
}

/* ============================================================ fotka na pozadí sekce
   Renderuje snippet lv-section-bg. Styly jsou tady a ne v {% stylesheet %} sekce,
   protože ji používá víc sekcí (flagship, duo band, FAQ) a jinak by se pravidla
   duplikovala. */
.lv-secbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.lv-secbg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--lv-secbg-pos, center);
}

.lv-secbg::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* text vlevo → závoj silnější zleva */
.lv-secbg--veil-left::after {
  background: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.9) 0%,
    rgb(255 255 255 / 0.78) 38%,
    rgb(255 255 255 / 0.25) 68%,
    rgb(255 255 255 / 0.1) 100%
  );
}

/* bílý text na tmavé fotce → tmavý závoj.
   Nejsilnější nahoře, kde sedí eyebrow a nadpis; dole je mramor sám o sobě tmavý.
   Nejslabší místo (0.34) je spočítané: nad ztmavenou fotkou drží bílý text
   ~11:1 a zlatá #d6a444 ~5:1 i v nejsvětlejší desetině procenta plochy. */
.lv-secbg--veil-dark::after {
  background: linear-gradient(
    180deg,
    rgb(36 42 49 / 0.46) 0%,
    rgb(36 42 49 / 0.38) 55%,
    rgb(36 42 49 / 0.34) 100%
  );
}

/* text přes celou šířku → rovnoměrnější, jen mírně slabší dole */
.lv-secbg--veil-top::after {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.86) 0%,
    rgb(255 255 255 / 0.8) 55%,
    rgb(255 255 255 / 0.66) 100%
  );
}


/* ==========================================================================
   Varianta ČERNOBÍLÁ — doplňky nad rámec Estate
   Zadání Michala z 28. 8. 2026. Základ je bílá plocha a černé panely, barva
   přichází až s konkrétní kolekcí nebo kampaní, a to přes celou plochu sekce.
   ========================================================================== */

/* --- 1. Produkt bez rámečku -----------------------------------------------
   "pozadí přechází přímo do bílé plochy stránky, produkt nepůsobí jako obrázek
   vložený do rámečku, ale přirozeně se stane součástí celého designu."
   Rušíme podklad, obrys i stín i u dlaždic, které kreslí sám Horizon. */
.product-card .card-gallery,
.product-card__link .card-gallery,
.collection-card__inner {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Produkt smí dýchat: menší vnitřní okraj než v Estate, ať je lahvička větší. */
.lv-pkarta__media {
  padding: 10px;
}

/* --- 2. Černý panel -------------------------------------------------------
   Druhý tón stránky. Používá se na celé sekce, ne na dlaždice. */
.lv-panel-cerny {
  background: var(--lv-panel-accent);
  color: var(--lv-on-panel-accent);
}

.lv-panel-cerny :is(h1, h2, h3, h4, .lv-nadtitulek) {
  color: var(--lv-on-panel-accent);
}

.lv-panel-cerny .lv-btn--primar {
  background: var(--lv-cta-invert);
  color: var(--lv-on-cta-invert);
  border-color: var(--lv-cta-invert);
}

/* --- 3. Barevný blok kolekce ----------------------------------------------
   Mechanismus, který Michal obdivuje na Oribe: většina webu je klidná a bílá,
   ale konkrétní řada dostane celou plochu ve své barvě. Barvy jsou z lahviček
   vlastních produktů (paleta Pavího pera) a jsou v `lv-tokens.css` jako --pav-*.

   Použití v sekci:  <section class="lv-blok" data-pav="indigo">
   Text se nastaví sám na tu variantu, která je na dané barvě čitelná. */
.lv-blok {
  background: var(--pav-blok, var(--lv-panel-accent));
  color: var(--on-pav-blok, var(--lv-on-panel-accent));
}

.lv-blok :is(h1, h2, h3, h4, p, li, .lv-nadtitulek) {
  color: inherit;
}

.lv-blok[data-pav='petrol']    { --pav-blok: var(--pav-petrol);    --on-pav-blok: var(--on-pav-petrol); }
.lv-blok[data-pav='petrol-2']  { --pav-blok: var(--pav-petrol-2);  --on-pav-blok: var(--on-pav-petrol-2); }
.lv-blok[data-pav='indigo']    { --pav-blok: var(--pav-indigo);    --on-pav-blok: var(--on-pav-indigo); }
.lv-blok[data-pav='bordo']     { --pav-blok: var(--pav-bordo);     --on-pav-blok: var(--on-pav-bordo); }
.lv-blok[data-pav='med-tmava'] { --pav-blok: var(--pav-med-tmava); --on-pav-blok: var(--on-pav-med-tmava); }
.lv-blok[data-pav='med']       { --pav-blok: var(--pav-med);       --on-pav-blok: var(--on-pav-med); }
.lv-blok[data-pav='fuchsie']   { --pav-blok: var(--pav-fuchsie);   --on-pav-blok: var(--on-pav-fuchsie); }
.lv-blok[data-pav='oranzova']  { --pav-blok: var(--pav-oranzova);  --on-pav-blok: var(--on-pav-oranzova); }
.lv-blok[data-pav='zelena']    { --pav-blok: var(--pav-zelena);    --on-pav-blok: var(--on-pav-zelena); }
.lv-blok[data-pav='modra']     { --pav-blok: var(--pav-modra);     --on-pav-blok: var(--on-pav-modra); }
.lv-blok[data-pav='jantar']    { --pav-blok: var(--pav-jantar);    --on-pav-blok: var(--on-pav-jantar); }
.lv-blok[data-pav='limetka']   { --pav-blok: var(--pav-limetka);   --on-pav-blok: var(--on-pav-limetka); }

/* Tlačítko uvnitř barevného bloku: bílá pilulka na tmavé, černá na světlé.
   Rozhoduje se podle toho, jakou barvu textu blok nastavil. */
.lv-blok .lv-btn--primar {
  background: var(--on-pav-blok);
  color: var(--pav-blok);
  border-color: var(--on-pav-blok);
}

/* Produkt uvnitř barevného bloku nesmí mít bílý podklad, jinak se rámeček vrátí. */
.lv-blok .lv-pkarta__media,
.lv-blok .lv-pkarta:hover .lv-pkarta__media {
  background: transparent;
}


/* Doraz zakazu ramecku (28. 8.). Pravidlo bylo aplikovane jen na .lv-pkarta,
   ale karty pod vlajkovym produktem a v balicku mely dal obrys a vlastni
   podklad. Michal: produkt nema pusobit jako obrazek vlozeny do ramecku. */
.lv-flagship__card,
.lv-flagship__item,
.lv-bundle__item,
.lv-pdpritual__item,
[class*="__card"] > [class*="__media"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}


/* Prepinac jazyku v hlavicce: tichy, uzky, zarovnany s ostatnimi odkazy. */
.header .localization-form__select,
.header-actions .localization-form__select {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline-end: 4px;
}
.header .language-selector .icon-caret { scale: 0.8; opacity: 0.6; }

/* ---------------------------------------------------------------- hlavička: logo přes oba řádky
   Zadání Bena 31. 8.: logo stojí vlevo přes oba řádky hlavičky. Na prvním
   řádku je vpravo od něj trojice Věrnostní klub - Zápisník - Poradna zarovnaná
   doprava, na druhém začíná hned vedle loga hlavní menu zarovnané doleva.

   Horizon kreslí každý řádek jako samostatnou mřížku, takže buňka přes dva
   řádky neexistuje. Logo se proto vyjme z toku a umístí absolutně vůči celé
   hlavičce; oba řádky mu vlevo nechají místo. Na mobilu se nic z toho nedělá,
   tam je hlavička jednořádková s šuplíkem. */
@media screen and (min-width: 990px) {
  :root {
    /* Logo je 267 px siroke pri vysce 56 px. Kdyz byl spodni limit 250 px,
       menu na uzsim okne zajelo logu pod patu. Rezervovany sloupec proto
       zacina nad sirkou loga a jeste si nechava odstup. */
    --lv-logo-sloupec: clamp(300px, 21vw, 360px);
  }

  header-component {
    position: relative;
  }

  /* Aby se logo vztáhlo k celé hlavičce a ne jen k prvnímu řádku. */
  .header__row--top .header__columns,
  .header__row--top .header__column--left {
    position: static;
  }

  /* Vztažným rámcem je horní řádek (ten je v Horizonu polohovaný kvůli
     podkladu megamenu), takže střed dvou řádků se dorovná posunem o polovinu
     řádku s menu. --lv-radek-menu drží jeho naměřenou výšku. */
  /* Logo je vyjmute z toku, takze se nedrzi mrizky sekce a lepilo se k okraji
     okna, zatimco menu, doplnkove odkazy i lupa sedi ve sloupci sirky stranky.
     Na sirokem okne z toho byl rozdil 160 px (Ben 22. 9.: "neni mi jasne, jak
     probiha vystredovani sekci"). --util-page-margin-offset je presne ten
     okraj, ktery mrizce sekce vychazi: na uzkem okne --page-margin, na sirokem
     polovina zbytku nad sirkou obsahu. */
  .header__row--top .header-logo {
    position: absolute;
    inset-inline-start: var(--util-page-margin-offset, var(--page-margin, 24px));
    inset-block-start: 50%;
    translate: 0 calc(-50% + var(--lv-radek-menu, 53px) / 2);
    z-index: 5;
  }

  .header__row--top .header__column--left {
    min-inline-size: var(--lv-logo-sloupec);
  }

  /* Menu se zarovnava doprava a logu nechava jeho sloupec volny. Odsazeni
     zleva je pojistka: kdyby se polozky nevesly, prebytek spadne do "Vice",
     ne pres logo. */
  .header__row--bottom .header__column--left {
    padding-inline-start: var(--lv-logo-sloupec);
    justify-content: flex-end;
  }

  .header__row--bottom .header-menu,
  .header__row--bottom .header-menu__inner,
  .header__row--bottom .menu-list {
    inline-size: 100%;
  }

  /* Levy sloupec spodniho radku si bere vsechno misto az k lupe, aby menu
     doslo doprava a nekoncilo v pulce radku. */
  .header__row--bottom .header__columns {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* `overflow-menu` je flexovy prvek uvnitr `.menu-list` a smrskne se na sirku
     obsahu, takze `justify-content` uvnitr nej nemel co zarovnavat. Zarovnat
     se musi ON SAM uvnitr nav, jinak polozky konci uprostred radku a k lupe
     zbyde tri sta pixelu mezery. */
  .header__row--bottom .menu-list {
    justify-content: flex-end;
  }

  .header__row--bottom .overflow-menu,
  .header__row--bottom .overflow-menu > ul,
  .header__row--bottom .menu-list > ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Odstup od lupy, aby posledni polozka menu nelepila na ikonu. */
  .header__row--bottom .header__column--left {
    padding-inline-end: clamp(16px, 2vw, 40px);
  }

  /* Doplňkové odkazy drží pravý okraj stejně jako ikony pod nimi. */
  .header__row--top .header__column--right {
    justify-content: flex-end;
  }
}

/* Jazyk seděl o pár pixelů výš než Věrnostní klub a Zápisník: select má
   vlastní řádkování a v mřížce se srovnával podle horní hrany. */
.header .dropdown-localization,
.header .dropdown-localization .localization-form,
.header .dropdown-localization localization-form-component {
  display: flex;
  align-items: center;
}

.header .localization-form__select {
  line-height: 1.2;
}

/* Šipka u přetékající položky menu. */
.menu-list__vice-ikona {
  inline-size: 10px;
  block-size: 6px;
  margin-inline-start: 6px;
  fill: currentColor;
  opacity: 0.6;
}

.menu-list__list-item[slot="more"] .menu-list__link {
  display: inline-flex;
  align-items: center;
}


/* ---------------------------------------------------------------- paví akcenty
   Web byl černobílý s jedinou barvou v patičce. Tohle jsou drobná místa, kde
   se paví paleta objeví, aniž by přebila obsah: linka nad pilířem, podtržení
   nadpisu článku na hover, rámeček karty produktu při najetí. */

.lv-pillars__pillar {
  position: relative;
  padding-block-start: 20px;
}

/* Každý prvek v řadě dostane vlastní odstín ze zásobníku (--lv-pav), aby
   paleta působila jako paví pero, ne jako jedna firemní barva. Na bílé se
   pro TEXT smí použít jen odstíny, které mají v tokenech bílý protějšek
   (--on-pav-* = #ffffff): petrol 12,2:1, petrol-2 9,9:1, indigo 13,2:1,
   bordó 11,2:1, měď 8,5:1, fuchsie 6,4:1. Zelená, modrá, jantar a limetka
   mají na bílé pod 4,5:1 a patří jen na pozadí s černým textem. */
.lv-pillars__pillar:nth-child(3n + 1) { --lv-pav: var(--pav-petrol-2); }
.lv-pillars__pillar:nth-child(3n + 2) { --lv-pav: var(--pav-indigo); }
.lv-pillars__pillar:nth-child(3n + 3) { --lv-pav: var(--pav-bordo); }

.lv-pillars__pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 2px;
  background: var(--lv-pav, var(--lv-accent));
}

.lv-pillars__pillar .lv-eyebrow { color: var(--lv-pav, var(--lv-accent)); }

/* Články: podtržení nadpisu a "Číst dál" v odstínu karty. */
.lv-blog__polozka:nth-child(6n + 1) { --lv-pav: var(--pav-petrol-2); }
.lv-blog__polozka:nth-child(6n + 2) { --lv-pav: var(--pav-indigo); }
.lv-blog__polozka:nth-child(6n + 3) { --lv-pav: var(--pav-bordo); }
.lv-blog__polozka:nth-child(6n + 4) { --lv-pav: var(--pav-med); }
.lv-blog__polozka:nth-child(6n + 5) { --lv-pav: var(--pav-fuchsie); }
.lv-blog__polozka:nth-child(6n + 6) { --lv-pav: var(--pav-petrol); }

.lv-blog__karta .lv-blog__nadpis {
  background-image: linear-gradient(var(--lv-pav, var(--lv-accent)), var(--lv-pav, var(--lv-accent)));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 280ms ease;
}

.lv-blog__karta:hover .lv-blog__nadpis { background-size: 100% 1px; }

.lv-blog__karta .lv-blog__vice,
.lv-blog__karta:hover .lv-blog__vice { color: var(--lv-pav, var(--lv-accent)); }

/* Značky: dlaždice zůstává bílá s šedou linkou, paví odstín se ukáže jen
   v rámečku při najetí. Loga jsou černá nebo barevná, podklad se nemění. */
.lv-brand-strip__item:nth-child(6n + 1) { --lv-pav: var(--pav-petrol-2); }
.lv-brand-strip__item:nth-child(6n + 2) { --lv-pav: var(--pav-indigo); }
.lv-brand-strip__item:nth-child(6n + 3) { --lv-pav: var(--pav-bordo); }
.lv-brand-strip__item:nth-child(6n + 4) { --lv-pav: var(--pav-med); }
.lv-brand-strip__item:nth-child(6n + 5) { --lv-pav: var(--pav-fuchsie); }
.lv-brand-strip__item:nth-child(6n + 6) { --lv-pav: var(--pav-petrol); }

/* U21 (Ben 16. 9.): loga bez ramecku ani pri najeti */
.lv-brand-strip__tile:hover {
  background: transparent;
}

.lv-pkarta__media {
  border-radius: var(--lv-radius);
  transition: box-shadow 240ms ease;
}

.lv-pkarta:hover .lv-pkarta__media {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-accent) 34%, transparent);
}

/* Sleva se hlásí bordó z paví palety, ne šedou. Text bere protějšek z tokenů. */
.lv-pkarta__badge {
  background: var(--pav-bordo);
  color: var(--on-pav-bordo);
}

.lv-badge--sale { color: var(--pav-bordo); }


/* ---------------------------------------------------------------- roluje okno, ne .page-wrapper
   Horizon na desktopu zamyka <html> na 100dvh a roluje vnitrnim kontejnerem
   .page-wrapper. Klasicky posuvnik (Windows, Mac s trvale zobrazenym
   posuvnikem) si pak ukousne asi patnact pixelu Z OBSAHU, takze sekce pres
   celou sirku konci kousek pred pravou hranou okna a cely web je posunuty.

   Vratime rolovani oknu: posuvnik lezi mimo rozvrzeni a full-bleed sekce
   opravdu dosahnou na kraj. Lepivou hlavicku to neovlivni, ta je `sticky`
   v normalnim toku dokumentu. */
@media screen and (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .page-wrapper {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* 19. 10. (Katerina, zpetna vazba 589447070036): "search box dovoli odscrollovat celou stranku
     na pozadi". Pravidlo vyse prebijelo zamek Horizonu html[scroll-lock] (stejna specificita,
     pozdeji v kaskade), takze hledani, zvetseni fotky a rychly nakup na pocitaci posun
     stranky nezamykaly. Zamek musi vyhrat. */
  html[scroll-lock]:has(.page-wrapper),
  html[scroll-lock]:has(.page-wrapper) body {
    overflow: hidden;
  }
}


/* ---------------------------------------------------------------- horní pruh v paví barevnosti
   Barvy jsou na POZADI, ne v pismenech: pruh je uzky a barevny text v nem byl
   spis nervozni nez efektni. Prechod jde napric celou sirkou a text zustava
   bily. Vsechny zastavky jsou tmave, takze bila na nich drzi kontrast pres
   sedm ku jedne. */
/* Prechod jde pres pseudoprvek, ne pres `background-image` na sekci: Horizon
   sazi barvu listy pres tridu `color-custom-*` zkratkou `background`, ktera
   by obrazek pozadi shodila. Takhle se do cesty nikomu neplete. */
.announcement-bar {
  position: relative;
  isolation: isolate;
}

.announcement-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    100deg,
    var(--pav-petrol) 0%,
    var(--pav-petrol-2) 22%,
    var(--pav-indigo) 46%,
    var(--pav-bordo) 72%,
    var(--pav-med-tmava) 100%
  );
}

.announcement-bar__text,
.announcement-bar__text a,
.announcement-bar__link {
  color: var(--on-pav-petrol);
  -webkit-text-fill-color: var(--on-pav-petrol);
}

.announcement-bar__text a,
.announcement-bar__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------------- megamenu odvážněji
   Vzor oribe.com: panel je tmavý, ne bílý, názvy sloupců jsou patkovou
   kurzívou a odkazy pod nimi bezpatkové. Panel tím přestane být rozbalený
   seznam a začne vypadat jako samostatná stránka.

   Barvy se nastavují jen uvnitř panelu; hlavička nad ním zůstává světlá. */
/* Barvu panelu urcuje trida barevneho schematu Horizonu primo na
   `.menu-list__submenu` a `styles.css` ji jeste prebiji pravidlem
   `.menu-list__list-item > .menu-list__submenu`. Proto se pozadi sazi i na
   vnitrek a selektor s potomkem ma dost vysokou specificitu.

   POZOR: pozadi a barva textu jsou ZAMERNE v jednom bloku. Kdyz byly zvlast
   a stylopis se nacetl jen zcasti, zustal bily text na svetlem panelu a
   megamenu bylo prazdne. Takhle bud plati oboji, nebo nic. */
.menu-list__list-item > .menu-list__submenu,
.menu-list__submenu,
.menu-list__submenu .menu-list__submenu-inner,
.menu-list__submenu .mega-menu {
  /* U11 (Ben 16. 9.): tmavy panel se serifem byl spatne citelny. Svetly panel,
     bezpatkove pismo, tmavy text 15:1. */
  --lv-mega-bg: #ffffff;
  --lv-mega-text: #15181b;
  --lv-mega-muted: #4a5057;
  --lv-mega-line: #e3e7eb;
  background: var(--lv-mega-bg);
  color: var(--lv-mega-text);
}

.menu-list__submenu .mega-menu__link {
  color: var(--lv-mega-muted);
}

.menu-list__submenu .mega-menu__link:hover {
  color: var(--lv-mega-text);
}

/* Nadřazená položka sloupce je patková kurzíva, jako "Shop by Use" u Oribe. */
.menu-list__submenu .mega-menu__link--parent {
  font-family: var(--lv-font);
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lv-mega-text);
  padding-block-end: 14px;
  margin-block-end: 12px;
}

/* Svislé linky mezi sloupci, taky z předlohy. */
.menu-list__submenu .mega-menu__column + .mega-menu__column {
  border-inline-start: 1px solid var(--lv-mega-line);
  padding-inline-start: clamp(18px, 2vw, 36px);
}

.menu-list__submenu .mega-menu__column {
  padding-block: clamp(18px, 2vw, 30px);
}

/* Produktové karty v panelu na tmavém: názvy a ceny bílé. */
.menu-list__submenu .resource-card,
.menu-list__submenu .resource-card * {
  color: var(--lv-mega-text);
}

.menu-list__submenu .mega-menu__content-list--products img {
  background: var(--lv-card-media-bg);
  border-radius: 6px;
}


/* ---------------------------------------------------------------- megamenu: řádky
   Ikony měla jen část položek (podle toho, co se podařilo spárovat), takže
   sloupec vypadal jako nedodělaný. Buď všechny, nebo žádná - a protože sada
   ikon nepokrývá všechny kategorie, jsou pryč.

   Názvy se drží na jednom řádku; když se nevejdou, useknou se třemi tečkami.
   Dvouřádkové položky rozbíjely rytmus sloupce. */
.menu-list__submenu .mega-menu__link .lv-menu-icon,
.menu-list__submenu .mega-menu__link > svg,
.menu-list__submenu .mega-menu__link > .lv-ikona {
  display: none;
}

.menu-list__submenu .mega-menu__link {
  display: block;
  padding-inline-start: 0;
}

/* Ben 17. 9.: nazvy se uz neuriznou (drive "Jemne a splihle bez obje..."), zalomi se */
.menu-list__submenu .mega-menu__link .wrap-text {
  display: block;
  white-space: normal;
}

/* ---------------------------------------------------------------- salonni baleni
   Litrovky maji ve vypisu stitek, aby bylo na prvni pohled jasne, ze jde
   o profesionalni format (Beata 10. 8.: "musi byt oznaceny"). */
.product-grid__item--litr { position: relative; }
.product-grid__item--litr::before {
  content: 'Salonní balení';
  /* Vpravo nahore: vlevo nahore lezi stitek Vyprodej z Horizonu a prekryvaly se. */
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2;
  padding: 4px 10px; border-radius: var(--lv-radius-pill);
  /* 14. 10.: token --lv-panel uz neexistuje -> pruhledne pozadi, bily text na bile karte
     nebyl videt (Michal 13. 10.: "nejde to precist, mizi"); barva panelu napevno jako zaloha */
  background: var(--lv-panel, #22272b); color: var(--lv-on-panel, #fff);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none;
}
/* 14. 10. (Michal 13. 10., /collections/vyprodej): karta lv-karta ma vlastni stitek Vyprodej
   vlevo nahore (.lv-karta__sleva) a na uzke karte telefonu (183 px) do nej stitek vpravo
   zasahoval. Kdyz je na karte Vyprodej, jde Salonni baleni pod nej, zarovnane vlevo. */
.product-grid__item--litr:has(.lv-karta__sleva)::before {
  inset-inline-end: auto;
  inset-inline-start: 13px; /* = .lv-karta__sleva (12 px + linka karty) */
  inset-block-start: 44px;
}

/* ============================================================ styl 16. 9. 2026 (Ben: Cormorant + Pinyon, jedno menu)
   Vychazi z navrhy/maketa-d-2026-09-16.html. Nadpisy Cormorant Garamond 600,
   jedno klicove slovo v nadpisu Pinyon Script ve fuchsii (snippet lv-nadpis),
   oznamovaci lista bila, menu v jednom radku s logem, pod hlavickou 2px pavi
   linka (jediny pavi prechod na strance), panely chladne sede #22272b. */

/* klicove slovo: Pinyon jde smyckami hluboko pod ucar, proto rezerva pod
   radkem a zaporny okraj, aby se nezvetsil radkovy proklad */
.lv-pinyon {
  font-family: var(--lv-font-akcent);
  font-style: normal;
  font-weight: 400;
  font-size: 1.12em;
  line-height: 1;
  color: var(--lv-akcent);
  display: inline-block;
  padding: 0 0.12em 0.28em 0.06em;
  margin-block-end: -0.16em;
  vertical-align: baseline;
}
/* na tmavem panelu svetlejsi fuchsie kvuli kontrastu */
.lv-edit--indigo .lv-pinyon,
.lv-tmavy .lv-pinyon,
.lv-klub .lv-pinyon { color: var(--lv-akcent-svetla); }
/* dopisovani zleva doprava (jen hero); klip ma rezervu kolem, aby se
   neorizly smycky (Benova pripominka k C2) */
.lv-pinyon--dopis {
  animation: lv-dopis 1.5s cubic-bezier(0.6, 0.05, 0.3, 1) 0.4s both;
}
@keyframes lv-dopis {
  from { clip-path: inset(-30% 100% -60% -20%); }
  to { clip-path: inset(-30% -20% -60% -20%); }
}
@media (prefers-reduced-motion: reduce) { .lv-pinyon--dopis { animation: none; } }

/* nadtitulky sede, ne v akcentu: barvu nese jen Pinyon a produkt */
.lv-eyebrow { color: var(--lv-text-muted); }

/* nazev produktu: znacka malym pismem nad nazvem */
.lv-nazev { display: block; }
/* Nazvy v kartach maji max. 2 radky (line-clamp, licovani 7. 10.); obecne display: block
   vyse by orez rusilo, proto ho tady karty prebiji. */
.lv-nazev:is(.lv-pkarta__title, .lv-obl__nazev, .lv-czp__nazev, .lv-categories__knazev) { display: -webkit-box; }
.lv-nazev__znacka {
  display: block;
  font-family: var(--lv-font);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lv-text-muted);
  margin-block-end: 4px;
}
.lv-nazev__jmeno { display: block; }

/* oznamovaci lista: bily radek s textem, jen odkaz podtrzeny */
.announcement-bar { background-color: #ffffff; border-block-end: 1px solid var(--lv-border); }
.announcement-bar::before { display: none; }
.announcement-bar__text, .announcement-bar__text a, .announcement-bar__link {
  color: var(--lv-text-muted); -webkit-text-fill-color: var(--lv-text-muted);
}
.announcement-bar__text a, .announcement-bar__link { color: var(--lv-text); -webkit-text-fill-color: var(--lv-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* hlavicka: pod celou hlavickou pavi linka, doplnkove odkazy tlumene */
header-component .header { position: relative; }
header-component .header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c));
  z-index: 3;
}
.lv-utility__link { color: var(--lv-text-muted); font-weight: 400; }
.lv-utility__link:hover, .lv-utility__link.is-active { color: var(--lv-text); text-decoration: none; }

/* U1 (Ben 16. 9.): hlavicka dvouradkova jako web This.., logo velke pres oba radky.
   Horni radek doplnkove odkazy a ikony, spodni radek hlavni menu vpravo. Absolutni
   poloha loga a sloupec pro nej jsou vyse (blok "logo pres dva radky"); tady jen
   vetsi logo a sirsi rezervovany sloupec. */
@media screen and (min-width: 990px) {
  :root { --lv-logo-sloupec: clamp(360px, 27vw, 430px); }
  .header__row--top .header-logo img,
  .header__row--top .header-logo svg { inline-size: clamp(300px, 22vw, 360px); max-inline-size: none; block-size: auto; }
  header-component .header .header-menu a.menu-list__link { font-family: var(--lv-font); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; }
  header-component .header .header-menu .menu-list ul,
  header-component .header .header-menu .overflow-menu > ul { column-gap: 26px; gap: 26px; }
  .lv-utility__link { font-size: 0.86rem; }
  .lv-utility__list { gap: 24px; }
}

/* ============================================================ U9 hvezdy: pet pavich barev (snippet lv-hvezdy) */
.lv-hv-rada { display: inline-flex; gap: 1px; line-height: 1; letter-spacing: 0; vertical-align: middle; }
.lv-hv {
  --c: #0e4a52;
  background: linear-gradient(90deg, var(--c) var(--f, 100%), #d3d8de var(--f, 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lv-hv--1 { --c: #0e4a52; } .lv-hv--2 { --c: #1a9aa6; } .lv-hv--3 { --c: #3f8a2c; } .lv-hv--4 { --c: #1b2a6b; } .lv-hv--5 { --c: #b0206b; }
/* stary prekryvny mechanismus lv-stars uz nepouzivame, obal jen radi */
.lv-stars { position: static; display: inline-flex; }

/* ============================================================ U11 megamenu: citelnost panelu */
.menu-list__submenu { box-shadow: 0 24px 48px rgb(20 24 28 / 0.08); border-block-start: 1px solid var(--lv-border); }
.menu-list__submenu .mega-menu__link { font-family: var(--lv-font); font-size: 0.92rem; font-weight: 400; }
/* varianta 7. 10. (H4 A): produktove dlazdice bile s linkou jako lv-categories */
.menu-list__submenu .mega-menu__content-list--products img { background: #fff; border: 1px solid var(--lv-border); mix-blend-mode: multiply; }
.menu-list__submenu .resource-card__title,
.menu-list__submenu .resource-card .paragraph { font-family: var(--lv-font); font-size: 0.86rem; line-height: 1.35; }
/* "Vice" a jeho rozbalovaci seznam ve stejnem svetlem stylu jako ostatni panely */
.overflow-menu [popover], .overflow-menu__list, .overflow-menu .menu-list__submenu { background: #ffffff; color: var(--lv-text); }
.overflow-menu a { font-family: var(--lv-font); color: var(--lv-text); }
.menu-list__submenu .mega-menu__link { color: var(--lv-mega-text); font-size: 1rem; }
.menu-list__submenu .mega-menu__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================ U15 hlavicka: jedno pismo a rez
   Doplnkove odkazy byly tenke a sede, menu tucne; "Vice" serifem. Vse Inter 500,
   menu o stupen vetsi. Na uzsim desktopu mensi logo, pismo a mezery, aby se
   vsech 8 polozek veslo bez "Vice". */
.lv-utility__link { font-family: var(--lv-font); font-weight: 500; color: var(--lv-text); }
.lv-utility__link:hover { color: var(--lv-text-muted); }
@media screen and (min-width: 990px) {
  header-component .header .header-menu a.menu-list__link,
  .menu-list__list-item[slot="more"] .menu-list__link,
  .menu-list__list-item[slot="more"] .menu-list__link * { font-family: var(--lv-font); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; }
  .lv-utility__link { font-size: 0.9rem; }
}
@media screen and (min-width: 990px) and (max-width: 1279px) {
  :root { --lv-logo-sloupec: 270px; }
  .header__row--top .header-logo img, .header__row--top .header-logo svg { inline-size: 240px; }
  header-component .header .header-menu a.menu-list__link { font-size: 0.86rem; }
  header-component .header .header-menu .menu-list ul, header-component .header .header-menu .overflow-menu > ul { column-gap: 16px; gap: 16px; }
}

/* U14: horni pruh bily, oddeleny linkou jako ostatni pruhy (sekce Horizonu ma vlastni pravidlo, proto vyssi specificita) */
.shopify-section .announcement-bar, header-announcements .announcement-bar, .announcement-bar.section { border-block-end: 1px solid var(--lv-border); }
/* U15: menu stejny rez jako doplnkove odkazy (Horizon dava odkazum menu vahu 600 na vnitrnim textu) */
@media screen and (min-width: 990px) {
  header-component .header .header-menu .menu-list__link,
  header-component .header .header-menu .menu-list__link * { font-weight: 500; }
}
/* U16: pero jemneji, at nekonkuruje nadpisu */
.lv-herov:not(.lv-herov--pres):not(.lv-herov--split) .lv-herov__panel::before { opacity: 0.42; }
/* U15 oprava: odkazy menu nejsou potomky .header-menu (Horizon ma vlastni element),
   proto selektor pres polozku seznamu (odkaz je v span.menu-list__trigger a styles.css se nacita az po lv-base.css, rozhoduje specificita). Vaha a velikost shodne s doplnkovymi odkazy. */
@media screen and (min-width: 990px) {
  .menu-list .menu-list__list-item .menu-list__link,
  .menu-list .menu-list__list-item .menu-list__link * { font-family: var(--lv-font); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; }
}
@media screen and (min-width: 990px) and (max-width: 1279px) {
  .menu-list .menu-list__list-item .menu-list__link { font-size: 0.88rem; }
}

/* =====================================================================
   Vyrazne nadpisy (Ben 16. 9. 2026) - zapina Nastaveni motivu > LV nadpisy,
   body.lv-bold. Radky a znacky sklada snippets/lv-nadpis.liquid.
   Vypnutim prepinace se vse vrati k puvodni sazbe.
   ===================================================================== */
body.lv-bold { --lv-t-1: clamp(2.6rem, 5.4vw, 5.4rem); --lv-t-display: clamp(3rem, 6.6vw, 6.4rem); }
/* Proklad 0,96 je z anglicke predlohy, ktera nema hacky nad verzalkami.
   U ceskych nadpisu se carky a hacky nevesly a lepily se na predchozi radek
   (Ben 22. 9.). 1,16 je nejmensi hodnota, pri ktere se to prestane dit;
   vic uz by nadpis rozvolnilo. Na kolekci This.. je 1,28, tam jsou verzalky
   pres cely nadpis. */
body.lv-bold :is(h1, h2):has(> .lv-nr) { font-weight: 700; line-height: 1.16; letter-spacing: -0.018em; text-wrap: initial; }
body.lv-bold .lv-nr { display: block; }
body.lv-bold .lv-nr--o1 { padding-inline-start: 0.85em; }
body.lv-bold .lv-nr--o2 { padding-inline-start: 1.7em; }
body.lv-bold .lv-nr--linka::before {
  content: ""; display: inline-block; vertical-align: middle; inline-size: 1em; block-size: max(2px, 0.045em);
  margin-inline-end: 0.3em; background: linear-gradient(90deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c));
}
body.lv-bold .lv-nm { font-style: italic; font-weight: 500; font-size: 0.6em; letter-spacing: -0.005em; line-height: 1.15; }
body.lv-bold .lv-nk { font-style: italic; font-weight: 600; color: var(--lv-akc, #b0206b); }
body.lv-bold .lv-nv {
  font-family: var(--lv-font); font-style: normal; font-weight: 600; font-size: max(0.72rem, 0.24em); letter-spacing: 0.34em;
  text-transform: uppercase; vertical-align: middle; color: var(--lv-akc-v, currentColor); opacity: 0.85;
}
body.lv-bold .lv-nr .lv-pinyon { font-size: 1.08em; }
/* pavi paleta: kazda sekce ma svou barvu pro ~kurzivu~ */
body.lv-bold .lv-herov { --lv-akc: #0e4a52; }
body.lv-bold .lv-probl { --lv-akc: #1a9aa6; }
body.lv-bold .lv-obl { --lv-akc: #b0206b; }
body.lv-bold .lv-regal { --lv-akc: #1b2a6b; }
body.lv-bold .lv-nov { --lv-akc: #3f8a2c; }
body.lv-bold .lv-rpas { --lv-akc: #1b2a6b; }
body.lv-bold .lv-blog { --lv-akc: #0e4a52; }
body.lv-bold .lv-klubu { --lv-akc: #1b2a6b; }
body.lv-bold .lv-edit { --lv-akc: #b0206b; }
body.lv-bold .lv-blok-kolekce { --lv-akc: #7fdde3; --lv-akc-v: #cfe9ea; }
body.lv-bold .lv-news { --lv-akc: #7fdde3; }
/* uzke sloupce: nadpis nesmi prerust sloupec */
body.lv-bold .lv-probl__nadpis { font-size: clamp(2.4rem, 3.9vw, 4.2rem); }
body.lv-bold .lv-herov:not(.lv-herov--pres) .lv-herov__title { font-size: clamp(3.2rem, 6.2vw, 6.6rem); line-height: 0.94; }
body.lv-bold .lv-news__nadpis { font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 0.98; }
body.lv-bold .lv-edit__nadpis { font-size: clamp(3.2rem, 6.2vw, 6.6rem); line-height: 0.94; }
body.lv-bold .lv-hlavicka__nadpis:has(> .lv-nr) { font-size: var(--lv-t-1); }
@media (max-width: 749px) {
  body.lv-bold { --lv-t-1: clamp(2.3rem, 10.5vw, 3rem); --lv-t-display: clamp(2.6rem, 12vw, 3.4rem); }
  body.lv-bold .lv-herov:not(.lv-herov--pres) .lv-herov__title, body.lv-bold .lv-edit__nadpis, body.lv-bold .lv-news__nadpis, body.lv-bold .lv-probl__nadpis { font-size: clamp(2.5rem, 11.5vw, 3.3rem); }
  body.lv-bold .lv-nr--o2 { padding-inline-start: 1.1em; }
}

/* hero: panel je u praveho okraje, odsazeni mensi, at nadpis neujizdi vpravo */
body.lv-bold .lv-herov__title .lv-nr--o1 { padding-inline-start: 0.45em; }
body.lv-bold .lv-herov__title .lv-nr--o2 { padding-inline-start: 0.9em; }
body.lv-bold .lv-herov:not(.lv-herov--pres) .lv-herov__title { font-size: clamp(3rem, 5.4vw, 5.8rem); }
body.lv-bold .lv-social, body.lv-bold .lv-social-videos { --lv-akc: #3f8a2c; }
body.lv-bold .lv-brand-strip { --lv-akc: #0e4a52; }
body.lv-bold .lv-pfoto { --lv-akc: #7fdde3; --lv-akc-v: #e6f4f5; }
body.lv-bold .lv-pfoto__nadpis:has(> .lv-nr) { font-size: clamp(3rem, 6.4vw, 6.6rem); font-weight: 600; }
body.lv-bold .lv-pfoto__nadpis .lv-nk { font-weight: 500; }
/* hero (Ben 16. 9.): text nesmi byt "nalepeny" vpravo. Na desktopu se panel
   vystredi v prave polovine (vedle fotky produktu), pero zustava cele uvnitr. */
@media screen and (min-width: 1200px) {
  .lv-herov--right:not(.lv-herov--pres):not(.lv-herov--split) .lv-herov__inner {
    justify-items: center; padding-inline: 50% var(--page-margin, 24px);
  }
  .lv-herov:not(.lv-herov--pres):not(.lv-herov--split) .lv-herov__panel::before { inset-inline: 18% -4%; inset-block: -14% -18%; }
  body.lv-bold .lv-herov:not(.lv-herov--pres) .lv-herov__title { font-size: clamp(4rem, 6.6vw, 8rem); }
  body.lv-bold .lv-herov__panel { max-inline-size: min(40rem, 44vw); }
}

/* ---- cesta (snippets/lv-cesta.liquid): kroky spojene pavi linkou se sipkami ---- */
.lv-cesta { position: relative; list-style: none; margin: clamp(64px, 7vw, 96px) auto 0; padding: 0; inline-size: min(100%, 960px); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.lv-cesta::before, .lv-cesta__tah { content: ""; position: absolute; inset-inline: calc(50% / var(--n)); inset-block-start: 6px; block-size: 1px; }
.lv-cesta::before { background: rgb(255 255 255 / 0.22); }
.lv-cesta__tah { background: linear-gradient(90deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c)); transform-origin: left; transform: scaleX(var(--q, 1)); }
.lv-cesta__krok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: var(--o, 1); transition: opacity .4s ease; }
.lv-cesta__bod { inline-size: 13px; block-size: 13px; border-radius: 50%; background: #22272b; border: 1px solid rgb(255 255 255 / 0.7); margin-block-end: 6px; position: relative; z-index: 1; transition: background-color .3s ease; }
.lv-cesta__krok.is-on .lv-cesta__bod { background: #fff; border-color: #fff; }
/* sipka uprostred useku k dalsimu kroku */
.lv-cesta__sipka { position: absolute; inset-block-start: -1px; inset-inline-start: 100%; translate: -50% 0; inline-size: 14px; block-size: 14px; color: #fff; line-height: 0; }
.lv-cesta__sipka svg { display: block; inline-size: 14px; block-size: 14px; max-inline-size: none; filter: drop-shadow(0 0 6px rgb(0 0 0 / 0.6)); }
.lv-cesta__cislo { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; color: rgb(255 255 255 / 0.6); }
.lv-cesta__nazev { font-family: var(--lv-font-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; color: #fff; text-decoration: none; text-shadow: 0 1px 14px rgb(0 0 0 / 0.5); }
/* Ben 22. 9.: "tuhle linku z te podsekce smaz". Nejdriv jsem to pochopil jako
   podtrzeni odkazu u posledniho kroku - to zustava schovane az do najeti -
   ale slo o spojovaci linku cesty pod pruhem se salonem. V tom pruhu proto
   zustavaji jen cisla a nazvy kroku, bez linky, uzlu a sipek. Jinde na webu
   (PDP, klub) cesta linku dal ma, tam dava smysl. */
.lv-pfoto .lv-cesta::before,
.lv-pfoto .lv-cesta__tah,
.lv-pfoto .lv-cesta__sipka,
.lv-pfoto .lv-cesta__bod { display: none; }
.lv-pfoto .lv-cesta { margin-block-start: clamp(40px, 5vw, 64px); }
.lv-pfoto .lv-cesta__krok { gap: 4px; }
/* Ben 22. 9.: linka pod poslednim krokem cesty pusobila jako nedopatreni,
   ne jako odkaz. Zustava jen pri najeti a fokusu. */
.lv-cesta__nazev--odkaz { padding-block-end: 3px; border-block-end: 1px solid transparent; transition: border-color .25s ease; }
.lv-cesta__nazev--odkaz:hover, .lv-cesta__nazev--odkaz:focus-visible { border-block-end-color: #fff; }
@media (max-width: 749px) {
  .lv-cesta { inline-size: auto; grid-template-columns: 1fr; gap: 30px; justify-items: start; }
  .lv-cesta::before, .lv-cesta__tah { inset-inline: 6px auto; inset-block: 6px 40px; inline-size: 1px; block-size: auto; }
  .lv-cesta__tah { background: linear-gradient(180deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c)); transform-origin: top; transform: scaleY(var(--q, 1)); }
  .lv-cesta__krok { display: grid; grid-template-columns: 13px auto; column-gap: 18px; row-gap: 2px; align-items: center; text-align: start; }
  .lv-cesta__bod { grid-row: span 2; margin: 0; }
  .lv-cesta__sipka { inset-inline-start: 1px; inset-block-start: calc(100% + 6px); translate: 0 0; rotate: 90deg; }
}

/* svetla varianta (vychozi na bilem pozadi) */
.lv-cesta:not(.lv-cesta--tmava)::before { background: var(--lv-border); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__tah { background: linear-gradient(90deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c)); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__bod { background: #fff; border-color: var(--lv-akc, #1b2a6b); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__krok.is-on .lv-cesta__bod, .lv-cesta:not(.lv-cesta--tmava) .lv-cesta__krok.is-aktivni .lv-cesta__bod { background: var(--lv-akc, #1b2a6b); border-color: var(--lv-akc, #1b2a6b); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__sipka { color: var(--lv-akc, #1b2a6b); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__sipka svg { filter: none; }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__cislo { color: var(--lv-text-muted); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__nazev { color: var(--lv-text); text-shadow: none; }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__nazev--odkaz { border-block-end-color: var(--lv-border); }
.lv-cesta:not(.lv-cesta--tmava) .lv-cesta__nazev--odkaz:hover { border-block-end-color: var(--lv-text); }
.lv-cesta__popis { font-size: 0.88rem; line-height: 1.5; color: var(--lv-text-muted); max-inline-size: 26ch; text-align: center; margin: 0; }
.lv-cesta--tmava .lv-cesta__popis { color: rgb(255 255 255 / 0.75); }
.lv-cesta__produkt { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-block-start: 6px; }
.lv-cesta__foto { inline-size: 120px; aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--lv-border); display: grid; place-items: center; }
.lv-cesta__foto img { inline-size: 84%; block-size: 84%; object-fit: contain; mix-blend-mode: multiply; }
.lv-cesta__cena { font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.lv-cesta__pridat button { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--lv-border); background: #fff; color: var(--lv-text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lv-cesta__pridat button:hover { background: var(--lv-akc, #22272b); border-color: var(--lv-akc, #22272b); color: #fff; }
@media (max-width: 749px) {
  .lv-cesta__popis { text-align: start; grid-column: 2; }
  .lv-cesta__produkt { grid-column: 2; flex-direction: row; align-items: center; }
  .lv-cesta__foto { inline-size: 72px; }
}
@media (prefers-reduced-motion: reduce) { .lv-cesta__tah { transform: none !important; } .lv-cesta__krok { opacity: 1 !important; transition: none; } }

/* ---- karta ritualu (snippets/lv-ritual.liquid) ---- */
/* ---------------------------------------------------------------- ritual pod blokem */
.lv-blok-kolekce:has(+ .lv-ritual--prekryv) { padding-block-end: calc(var(--lv-section-y) + var(--lv-ritual-presah)); }
.lv-blok-kolekce, .lv-ritual { --lv-ritual-presah: clamp(90px, 9vw, 140px); }
.lv-ritual { position: relative; z-index: 2; padding-inline: var(--page-margin, 24px); }
.lv-ritual--prekryv { margin-block-start: calc(-1 * var(--lv-ritual-presah)); }
/* bez prekryvu: barevna plocha za kartou (produkt, kolekce) */
.lv-ritual--plocha { background: var(--pav-blok); padding-block: clamp(48px, 6vw, 88px); }
.lv-ritual__karta {
  max-inline-size: var(--page-width); margin-inline: auto; background: #fff; color: var(--lv-text);
  border-radius: var(--lv-radius-lg, 20px); padding: clamp(28px, 3.4vw, 48px);
  box-shadow: 0 40px 90px -30px rgb(6 20 22 / 0.45), 0 12px 30px -12px rgb(6 20 22 / 0.18);
  display: grid; gap: 28px clamp(28px, 3vw, 48px);
}
@media (min-width: 1100px) {
  .lv-ritual__karta { grid-template-columns: minmax(220px, 1fr) minmax(0, 3.2fr); align-items: start; }
  .lv-ritual__vse { grid-column: 1 / -1; }
}
.lv-ritual__eyebrow { margin: 0 0 8px; font-family: var(--lv-font-display); font-style: italic; font-size: 1.25rem; color: var(--lv-text-muted); }
.lv-ritual__nadpis { margin: 0; font-family: var(--lv-font-display); font-weight: var(--lv-heading-weight); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.08; }
.lv-ritual__text { margin: 14px 0 0; color: var(--lv-text-muted); font-size: 0.95rem; line-height: 1.6; }
.lv-ritual__kroky { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.lv-ritual__krok { display: flex; flex-direction: column; gap: 14px; }
.lv-ritual__foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--lv-border); border-radius: var(--lv-radius, 10px); overflow: hidden; }
.lv-ritual__foto img { inline-size: 62%; block-size: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s ease; }
.lv-ritual__krok:hover .lv-ritual__foto img { transform: scale(1.05); }
.lv-ritual__cislo { position: absolute; inset-block-start: 10px; inset-inline-start: 14px; font-family: var(--lv-font-display); font-style: italic; font-size: 1.05rem; color: var(--lv-text-muted); }
.lv-ritual__info { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lv-ritual__nazev { font-family: var(--lv-font-display); font-weight: var(--lv-heading-weight); font-size: 1.3rem; line-height: 1.15; color: var(--lv-text); text-decoration: none; }
.lv-ritual__nazev:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lv-ritual__popis { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--lv-text-muted); }
.lv-ritual__radek { margin-block-start: auto; padding-block-start: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lv-ritual__cena { font-size: 0.95rem; }
.lv-ritual__pridat button {
  inline-size: 42px; block-size: 42px; border-radius: 50%; border: 1px solid var(--lv-border); background: #fff; color: var(--pav-blok, var(--lv-text));
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.lv-ritual__pridat button:hover { background: var(--pav-blok, var(--lv-panel-accent)); border-color: var(--pav-blok, var(--lv-panel-accent)); color: #fff; }
.lv-ritual__vse { display: flex; justify-content: flex-end; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding-block-start: 24px; border-block-start: 1px solid var(--lv-border); }
.lv-ritual__suma { margin: 0; display: flex; align-items: baseline; gap: 12px; color: var(--lv-text-muted); font-size: 0.9rem; }
.lv-ritual__suma strong { font-family: var(--lv-font-display); font-weight: 600; font-size: 1.6rem; color: var(--lv-text); }
.lv-ritual__tlacitko {
  border: 0; cursor: pointer; border-radius: var(--lv-radius-pill, 999px); padding: 17px 36px;
  background: var(--pav-blok, var(--lv-panel-accent)); color: var(--on-pav-blok, #fff);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: filter .25s ease;
}
.lv-ritual__tlacitko:hover { filter: brightness(1.25); }
@media (max-width: 749px) {
  .lv-ritual__kroky { grid-template-columns: 1fr; }
  .lv-ritual__krok { flex-direction: row; align-items: stretch; }
  .lv-ritual__foto { flex: 0 0 104px; aspect-ratio: 1; }
  .lv-ritual__vse { justify-content: stretch; }
  .lv-ritual__tlacitko { inline-size: 100%; }
}
.lv-ritual__ted { display: inline-block; margin-inline-start: 8px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pav-blok); vertical-align: middle; }

/* barva sveta podle sablony (PLAN-STRANKY A2) */
.tpl-product-this, .tpl-product-this-plet, .tpl-product-set, .tpl-product-doplnek, .tpl-product-vune, .tpl-collection-this, .tpl-page-o-znacce { --lv-akc: #0e4a52; }
.tpl-collection-hair-problem, .tpl-page-vlasovy-test { --lv-akc: #1a9aa6; }
.tpl-product, .tpl-collection-brand, .tpl-page-recenze { --lv-akc: #1b2a6b; }
.tpl-page-michal, .tpl-page-poradna { --lv-akc: #b0206b; }
.tpl-blog, .tpl-article, .tpl-page-vernostni-klub, .tpl-cart, .tpl-search { --lv-akc: #3f8a2c; }
body.lv-bold:is(.tpl-product-this, .tpl-product-this-plet, .lv-svet-this, .tpl-collection-this, .tpl-page-o-znacce) :is(.lv-rpas, .lv-obl, .lv-regal) { --lv-akc: #0e4a52; }
.lv-rpas--produkt { padding-block: clamp(48px, 6vw, 88px); }
.lv-rpas--produkt .lv-rpas__rady { margin-block-start: clamp(28px, 3vw, 44px); }

/* karta ritualu bez uvodu: produkty pres celou sirku */
@media (min-width: 1100px) { .lv-ritual__karta:not(:has(.lv-ritual__uvod > *)) { grid-template-columns: 1fr; } }
.lv-ritual__uvod:not(:has(> *)) { display: none; }
/* nadpisy sekci na produktu a kolekcich ve vyrazne sazbe na urovni B */
body.lv-bold:is(.tpl-product-this, .tpl-product-this-plet, .tpl-product, .tpl-product-set, .tpl-product-doplnek, .tpl-product-vune) main h2:has(> .lv-nr) { font-size: var(--lv-t-1); }
/* B2: nadtitulek znacky pod H1 na produktu cizi znacky */
.lv-nazev__znama { margin: 6px 0 0; font-family: var(--lv-font-display); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--lv-akc, var(--lv-text-muted)); }
/* B13: nejnovejsi clanek ve vypisu Zapisniku (lv-blog-vypis) ma velky nadpis; lv-base je az za stylem sekce */
.lv-vypis .lv-vypis__velky .lv-blog__karta .lv-blog__nadpis { font-family: var(--lv-font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; font-weight: 700; -webkit-line-clamp: 4; }
.lv-vypis .lv-vypis__velky .lv-blog__karta .lv-blog__perex { font-size: 1.05rem; -webkit-line-clamp: 4; }

/* ---- B17 kosik (PLAN-STRANKY-2026-09-16): stranka i drawer ---- */
.cart-page__title h1, .cart-page__title .cart-title { font-family: var(--lv-font-display); font-size: var(--lv-t-1); font-weight: 700; letter-spacing: -0.018em; }
.cart-items__media-container { background: #fff; border: 1px solid var(--lv-border); border-radius: 10px; overflow: hidden; }
.cart-items__media-image { object-fit: contain !important; mix-blend-mode: multiply; padding: 8%; }
.cart-items__title { text-decoration: none; }
.cart-items__title .lv-nazev__znacka { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-text-muted); margin-block-end: 4px; }
.cart-items__title .lv-nazev__jmeno { font-family: var(--lv-font-display); font-size: 1.25rem; line-height: 1.2; }
/* souhrn: sloupec motivu Horizon siaha az k okraji okna, karta s vlastnim paddingem by ho rozsirila (preteceni 32 px); proto jen jemny stin a zaobleni bez zmeny rozmeru */
@media (min-width: 750px) {
  .cart-page__summary { border-radius: 16px 0 0 16px; box-shadow: -18px 0 50px rgb(10 30 35 / 0.07); }
}
.lv-free-shipping__track { block-size: 3px; border-radius: 3px; background: var(--lv-border); overflow: hidden; }
.lv-free-shipping__fill { block-size: 100%; background: linear-gradient(90deg, var(--pav-modra, #1e7fc2), var(--pav-zelena, #3f8a2c)); border-radius: 3px; }

/* ---- B18 vyhledavani ---- */
.lv-hledani__nadpis { margin: 0 0 8px; font-family: var(--lv-font-display); font-size: var(--lv-t-1); font-weight: 700; line-height: 0.96; letter-spacing: -0.018em; }
.lv-hledani__pomoc { margin: 12px 0 0; color: var(--lv-text-muted); font-family: var(--lv-font-body, inherit); font-size: 0.95rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.lv-hledani__pomoc a { color: var(--lv-akc); }
.tpl-search .search-page-input { font-family: var(--lv-font-display); font-size: 2rem; border: 0; border-block-end: 1px solid var(--lv-text); border-radius: 0; background: transparent; padding-block: 10px; }
.tpl-search .search-page-input__parent { max-inline-size: 720px; }
.tpl-search .search-page-input:focus-visible { outline: none; border-block-end-color: var(--lv-akc); }
/* ---- B19 obecna a pravni stranka (page.json): typografie jako clanek ---- */
.tpl-page .page-content, .tpl-page .rte { max-inline-size: 44rem; }
.tpl-page main h1 { font-family: var(--lv-font-display); font-size: var(--lv-t-1); font-weight: 700; line-height: 0.96; letter-spacing: -0.018em; }
.tpl-page .page-content { font-size: 1.0625rem; line-height: 1.75; }
.tpl-page .page-content :is(h2, h3) { font-family: var(--lv-font-display); font-weight: 700; line-height: 1.15; margin: 2em 0 0.5em; }
.tpl-page .page-content h2 { font-size: 1.9rem; }
.tpl-page .page-content h3 { font-size: 1.45rem; }

/* B16 klub: tabulka vyhod jen od 900 px (na mobilu jsou vyhody u karet) */
@media (max-width: 899px) { .lv-klubu__tab-obal { display: none; } }
/* ---- lv-karta (HP karta v mrizkach kolekci, vyhledavani, doporucenich) ---- */
.lv-karta { block-size: 100%; }
.lv-karta__sleva { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: #6b1d2a; color: #fff; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.lv-karta__puvodni { color: var(--lv-text-muted); font-size: 0.82rem; margin-inline-start: 6px; }
.product-grid__item:has(> .lv-karta), .resource-list__item:has(> .lv-karta) { list-style: none; }

/* B17 kosik: prazdny stav a tlacitko K pokladne vzdy na dosah na mobilu */
.cart-page--empty .cart-title h1, .cart-title h1:has(.lv-kosik-nadpis) { font-family: var(--lv-font-display); font-size: var(--lv-t-1); font-weight: 700; line-height: 1; letter-spacing: -0.018em; }
.lv-kosik-nadpis .lv-pinyon { font-weight: 400; }
.tpl-cart .cart-page__title h1 { font-family: var(--lv-font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.018em; }
@media (max-width: 749px) {
  .tpl-cart .cart-page__summary .cart__ctas { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; padding: 12px var(--page-margin, 16px) calc(12px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.96); box-shadow: 0 -10px 30px rgb(10 30 35 / 0.12); }
  .tpl-cart .cart-page__summary .cart__ctas .cart__checkout-button { inline-size: 100%; }
  .tpl-cart:has(.cart-page__summary .cart__ctas) main { padding-block-end: 84px; }
}

/* nasepavac vyhledavani: packshot na sede plose neorezany, nazev jako karta */
.predictive-search-results__card--product .resource-card__media { background: #fff; border: 1px solid var(--lv-border); border-radius: 10px; overflow: hidden; }
.predictive-search-results__card--product .resource-card__media img { object-fit: contain !important; mix-blend-mode: multiply; padding: 8%; }
.predictive-search-results__card--product .resource-card__title .lv-nazev__znacka { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-text-muted); margin-block-end: 2px; }
.predictive-search-results__card--product .resource-card__title .lv-nazev__jmeno { font-family: var(--lv-font-display); font-size: 1.05rem; line-height: 1.2; }

/* obecne stranky: H1 v bloku textu motivu (trida .h2 na obalu) */
body.tpl-page main .text-block.h2 h1, body.tpl-page main .text-block.h2 { font-family: var(--lv-font-display); font-size: var(--lv-t-1); font-weight: 700; line-height: 0.96; letter-spacing: -0.018em; }

/* ============================================================ megamenu Editorial (snippets/lv-megamenu, Ben 17. 9. 1C) */
.lv-mm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-block-size: 400px; background: #fff; text-align: start; }
.menu-list__submenu .mega-menu__grid:has(> .lv-mm) { display: block; padding: 0; }
.lv-mm__l { padding: 30px 40px; border-inline-end: 1px solid var(--lv-border); }
.lv-mm__r { padding: 30px 40px; }
.lv-mm__ey { margin: 0 0 16px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.lv-mm__odkazy { list-style: none; margin: 0; padding: 0; }
.lv-mm__odkazy--2 { columns: 2; column-gap: 36px; }
.lv-mm__odkazy li { break-inside: avoid; }
.lv-mm__odkazy a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-block-end: 1px solid var(--lv-border); font-size: 0.95rem; line-height: 1.3; color: var(--lv-text); text-decoration: none; }
.lv-mm__odkazy a:hover, .lv-mm__odkazy a.is-on { color: var(--c); }
.lv-mm__odkazy a.is-on { font-weight: 500; }
.lv-mm__pocet { flex-shrink: 0; color: #636b73; font-size: 0.8rem; font-weight: 400; white-space: nowrap; font-family: var(--lv-font, inherit); }
.lv-mm__prob { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.lv-mm__prob[hidden] { display: none; }
.lv-mm__prob-foto { grid-column: 1 / -1; display: block; aspect-ratio: 21 / 7; border-radius: 8px; overflow: hidden; background: #eef0f2; }
.lv-mm__prob-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(1); }
.lv-mm__h { margin: 0 0 10px; font-family: var(--lv-font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.02; color: var(--lv-text); }
.lv-mm__h em { color: var(--c); font-weight: 500; }
.lv-mm__prob-text p:not(.lv-mm__h) { margin: 0 0 6px; color: #4a5057; font-size: 0.9rem; line-height: 1.45; }
.lv-mm__cta { display: inline-block; margin-block-start: 12px; font-size: 0.88rem; font-weight: 500; color: var(--lv-text); border-block-end: 1px solid currentColor; text-decoration: none; }
.lv-mm__set, .lv-mm__produkty a { display: block; color: var(--lv-text); text-decoration: none; }
.lv-mm__pf { position: relative; display: block; aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--lv-border); border-radius: 6px; overflow: hidden; }
.lv-mm__pf--set { aspect-ratio: 16 / 10; }
.lv-mm__pf .lv-menu-foto { position: absolute; inset: 8%; inline-size: 84%; block-size: 84%; object-fit: contain; mix-blend-mode: multiply; }
.lv-mm__pz { display: block; margin-block-start: 10px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #636b73; }
.lv-mm__pn { display: block; margin-block-start: 3px; font-size: 0.88rem; line-height: 1.3; overflow-wrap: anywhere; }
.lv-mm__pn .lv-nazev__znacka { display: none; }
.lv-mm__st { display: block; margin-block-start: 4px; font-size: 0.78rem; }
.lv-mm__st i { font-style: normal; color: #636b73; }
.lv-mm__cena { display: block; margin-block-start: 3px; font-size: 0.85rem; }
.lv-mm__produkty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lv-mm__produkty a:hover .lv-mm__pn, .lv-mm__set:hover .lv-mm__pn { text-decoration: underline; text-underline-offset: 3px; }
.lv-mm__znacky { grid-column: 1 / -1; list-style: none; margin: 0; padding: 30px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.lv-mm__znacky a { display: block; padding: 14px 0; border-block-end: 1px solid var(--lv-border); color: var(--lv-text); text-decoration: none; }
.lv-mm__znacky b { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--lv-font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.lv-mm__znacky a:hover b { color: var(--c); }
.lv-mm__znama { display: block; margin-block-start: 4px; font-size: 0.8rem; color: #4a5057; line-height: 1.35; }
.lv-mm__pata { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 14px 40px; background: #eef1f4; }
.lv-mm__pata a { font-size: 0.88rem; font-weight: 500; color: var(--lv-text); text-decoration: none; }
.lv-mm__pata a:hover { color: var(--c); }
@media (max-width: 1199px) { .lv-mm__produkty { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lv-mm__produkty li:nth-child(4) { display: none; } .lv-mm__znacky { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-mm__produkty li, .lv-mm__znacky li, .lv-mm__odkazy li { min-inline-size: 0; }
.lv-mm__znacky b { overflow-wrap: anywhere; }
/* obsah megamenu se zalamuje (hlavicka Horizonu dedi white-space: nowrap) */
.menu-list__submenu .lv-mm, .menu-list__submenu .lv-mm * { white-space: normal; }

/* ===== Cookie lista (snippets/lv-cookies.liquid) =====
   27. 10. 2026 (Ben: "at dostatecne otravuje, zakryva prostor", "ztmaveny web pod nim ne, ale vetsi okno
   v dolni polovine obrazovky"): misto nizkeho pruhu velky panel pres dolni polovinu okna, web nad nim
   zustava videt. Legalne: "Jen nezbytne" je ve stejne vrstve, stejne velke a stejne barvy jako
   "Prijmout vse", zadne predzaskrtnute volby, web se neblokuje (zadna cookie wall). */
.lv-cookies[hidden], .lv-cookies [hidden] { display: none !important; }
.lv-cookies {
  position: fixed; z-index: 2147483000; inset-inline: 16px; inset-block-end: 16px;
  display: flex; justify-content: center; pointer-events: none;
}
.lv-cookies__box {
  pointer-events: auto; box-sizing: border-box; inline-size: min(100%, 1240px); /* Ben 27. 10.: ne az do kraju */
  min-block-size: min(46vh, 520px); max-block-size: calc(100dvh - 32px); overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); column-gap: clamp(32px, 5vw, 88px); align-content: center;
  background: #fff; color: #15181b; border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(13 18 22 / 0.08), 0 24px 60px rgb(0 0 0 / 0.28), 0 60px 140px rgb(0 0 0 / 0.32);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px); font-size: 15px; line-height: 1.6;
}
.lv-cookies__obsah { grid-column: 1; }
.lv-cookies__nadtitulek {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0e4a52;
}
.lv-cookies__titulek {
  margin: 0 0 14px; font-family: var(--font-heading--family, serif); font-size: clamp(26px, 3vw, 40px); line-height: 1.12;
}
.lv-cookies__text { margin: 0 0 16px; color: #4a5057; max-inline-size: 62ch; }
.lv-cookies__text a { color: #15181b; text-decoration: underline; text-underline-offset: 2px; }
.lv-cookies__vyhody { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #15181b; }
.lv-cookies__vyhody li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.lv-cookies__vyhody li::before { content: ""; inline-size: 8px; block-size: 8px; margin: 8px 0 0 6px; border-radius: 50%; background: #0e4a52; }
.lv-cookies__akce { grid-column: 2; align-self: center; display: grid; gap: 14px; }
.lv-cookies__volby { display: grid; gap: 10px; margin: 0; padding: 14px 16px; background: #f3f5f6; border-radius: 4px; }
.lv-cookies__volba { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; cursor: pointer; color: #4a5057; font-size: 14px; line-height: 1.45; }
.lv-cookies__volba input { margin: 3px 0 0; inline-size: 16px; block-size: 16px; accent-color: #0e4a52; }
.lv-cookies__volba strong { color: #15181b; font-weight: 600; margin-inline-end: 4px; }
.lv-cookies__tlacitka { display: grid; gap: 10px; }
.lv-cookies__btn {
  min-block-size: 56px; padding: 8px 18px; border: 1px solid #15181b; border-radius: 2px;
  background: #15181b; color: #fff; font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer; line-height: 1.25;
}
@media (hover: hover) { .lv-cookies__btn:hover { background: #0e4a52; border-color: #0e4a52; } }
.lv-cookies__btn--text {
  justify-self: center; min-block-size: 40px; background: transparent; color: #4a5057; border-color: transparent;
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .lv-cookies__btn--text:hover { background: transparent; border-color: transparent; color: #0e4a52; } }
.lv-cookies__btn:focus-visible { outline: 2px solid #0e4a52; outline-offset: 2px; }
.lv-cookies__kratky { display: none; }
.lv-cookies__pozn { margin: 18px 0 0; font-size: 13.5px; }
/* tablet a telefon: jeden sloupec, panel pres spodni cast okna */
@media (max-width: 899px) {
  .lv-cookies { inset-inline: 10px; inset-block-end: 10px; }
  .lv-cookies__box { grid-template-columns: minmax(0, 1fr); row-gap: 20px; min-block-size: 0; padding: 26px 22px 16px; font-size: 14.5px; max-block-size: calc(100dvh - 20px); }
  .lv-cookies__obsah, .lv-cookies__akce { grid-column: 1; }
  .lv-cookies__titulek { font-size: 26px; }
  .lv-cookies__btn { min-block-size: 50px; }
}
/* telefon na vysku: panel nejvys pres ~2/3 okna (21. 10. lista 34 % kryla CTA; Ben 27. 10. chce vic, ale ne cele okno) */
@media (max-width: 559px) {
  .lv-cookies__box { row-gap: 14px; padding: 18px 16px 10px; font-size: 13.5px; line-height: 1.45; }
  .lv-cookies__nadtitulek { display: none; }
  .lv-cookies__titulek { font-size: 21px; margin-block-end: 8px; }
  .lv-cookies__text { margin-block-end: 8px; }
  .lv-cookies__vyhody { gap: 4px; }
  .lv-cookies__vyhody li { grid-template-columns: 14px 1fr; gap: 6px; }
  .lv-cookies__vyhody li::before { inline-size: 6px; block-size: 6px; margin: 6px 0 0 2px; }
  .lv-cookies__pozn { margin-block-start: 8px; font-size: 12.5px; }
  .lv-cookies__akce { gap: 8px; }
  .lv-cookies__tlacitka { gap: 8px; }
  .lv-cookies__btn { min-block-size: 46px; font-size: 14px; }
  .lv-cookies__btn--text { min-block-size: 34px; font-size: 13px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .lv-cookies__tlacitka { grid-template-columns: 1fr 1fr; }
  .lv-cookies__btn--text, .lv-cookies__btn[data-lv-cookies-akce="ulozit"] { grid-column: 1 / -1; }
}
/* telefon na sirku a nizka okna: kompaktni, okno se vejde cele a necha nahore kus webu */
@media (max-height: 560px) {
  .lv-cookies { inset-inline: 8px; inset-block-end: 8px; }
  .lv-cookies__box { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); column-gap: 24px; row-gap: 10px; min-block-size: 0;
    padding: 14px 18px 10px; font-size: 13px; line-height: 1.4; max-block-size: calc(100dvh - 16px); }
  .lv-cookies__obsah { grid-column: 1; }
  .lv-cookies__akce { grid-column: 2; gap: 8px; }
  .lv-cookies__nadtitulek, .lv-cookies__vyhody, .lv-cookies__pozn { display: none; }
  .lv-cookies__titulek { font-size: 20px; margin-block-end: 4px; }
  .lv-cookies__text { margin: 0; }
  .lv-cookies__tlacitka { grid-template-columns: 1fr; gap: 6px; }
  .lv-cookies__btn { min-block-size: 40px; padding: 4px 12px; font-size: 13px; }
  .lv-cookies__btn--text { min-block-size: 30px; }
  .lv-cookies__volby { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 10px; gap: 6px; }
  .lv-cookies__volba { font-size: 12.5px; }
}
/* Pojistka: vlastni banner Shopify skryt, souhlas sbira lv-cookies pres stejne API.
   Spravne je ho vypnout v adminu (podklady/admin-rucne-2026-09-17.md). */
#shopify-pc__banner { display: none !important; }

/* ============================================================ styl 20. 9. 2026 (Ben: varianta 04 z navrhy/hero-tecky-2026-09-20.html)
   Nadpisy Jost 300 misto Cormorantu (Michal 18. 9.: prace s fonty pusobila
   oldschool). Klicove slovo v nadpisu je Instrument Serif kurziva V BARVE
   NADPISU - barvu nese jen dvojice tecek na konci: prvni tyrkysova, druha
   fuchsiova. Tim se nadpisy LV drzi rodiny s This.., ale nekopiruji ji:
   tam je obarvene cele slovo.
   Navrat: smazat tenhle blok, nic jineho se nemenilo. */
/* lv-varianty.css se nacita az za timhle souborem a ma :root[data-lv-pismo],
   proto je tu atribut dvakrat - jinak by nadpisy zustaly v Cormorantu. */
:root,
:root[data-lv-pismo][data-lv-pismo] {
  --lv-font: 'Jost', 'Jost Fallback', system-ui, -apple-system, sans-serif;
  --lv-font-display: 'Jost', 'Jost Fallback', system-ui, -apple-system, sans-serif;
  --lv-font-serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --lv-font-akcent: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-heading--family: 'Jost', 'Jost Fallback', system-ui, -apple-system, sans-serif;
  --lv-heading-weight: 300;
  --lv-tecka-1: #12808b; /* tyrkys, 4,8:1 na bile */
  --lv-tecka-2: #b0206b; /* fuchsie, 6,4:1 na bile */
}
h1, h2, h3, .lv-hlavicka__nadpis, .lv-rpas__nadpis {
  font-weight: 300;
  letter-spacing: -0.022em;
}
/* klicove slovo: uz ne Pinyon ve fuchsii, ale Instrument Serif kurziva
   v barve nadpisu (varianta 04) */
.lv-pinyon,
body.lv-bold .lv-nk {
  font-family: var(--lv-font-akcent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1;
  color: inherit;
  padding: 0;
  margin-block-end: 0;
}
.lv-edit--indigo .lv-pinyon,
.lv-tmavy .lv-pinyon,
.lv-klub .lv-pinyon { color: inherit; }
body.lv-bold .lv-nr .lv-pinyon { font-size: 1.1em; }

/* dve tecky na konci nadpisu: znacka :: v textu nadpisu (snippet lv-nadpis).
   Velikost drzi merítko pisma, aby to byla sazba, ne prilepeny obrazek. */
.lv-dd {
  display: inline-flex;
  gap: 0.15em;
  margin-inline-start: 0.12em;
  vertical-align: baseline;
}
.lv-dd i {
  inline-size: 0.13em;
  block-size: 0.13em;
  border-radius: 50%;
  align-self: flex-end;
  margin-block-end: 0.07em;
  background: var(--lv-tecka-1);
}
.lv-dd i:last-child { background: var(--lv-tecka-2); }
/* na tmavem panelu svetlejsi odstiny, aby tecky nezanikly */
.lv-tmavy .lv-dd i,
.lv-klub .lv-dd i,
.lv-edit--indigo .lv-dd i,
.lv-pfoto .lv-dd i { background: #3fc1c9; }
.lv-tmavy .lv-dd i:last-child,
.lv-klub .lv-dd i:last-child,
.lv-edit--indigo .lv-dd i:last-child,
.lv-pfoto .lv-dd i:last-child { background: #e2559f; }

/* ============================================================ 20. 9. 2026: dvoubarevne menu (Ben, navrh D)
   Na homepage je hlavicka tmave seda jako hero (#1a1e23), takze hlavicka a hero
   drzi jako jeden blok. Na ostatnich strankach zustava svetla.
   Logo je tmave PNG, na tmave hlavicce se prebarvuje na bilou pres filtr -
   svetla verze loga v nastaveni (logo_inverse) se pouzije, az bude nahrana. */
body.tpl-index .header,
body.tpl-index header-component,
body.tpl-index .header__row {
  background: #1a1e23;
  color: #eef1f3;
}
/* Radky hlavicky si berou barvu z promennych, ktere motiv zapisuje primo do
   style="" na header-component, takze je potreba prebit je s !important. */
body.tpl-index header-component.header {
  --color-background-top-row: #1a1e23 !important;
  --color-background-bottom-row: #1a1e23 !important;
}
body.tpl-index .header a,
body.tpl-index .header button,
body.tpl-index .header .menu-list__link *,
body.tpl-index .header .localization-form__select,
body.tpl-index .lv-utility__link { color: #eef1f3; }
body.tpl-index .header svg { color: currentColor; }
body.tpl-index .header .header-logo img { filter: brightness(0) invert(1); }
body.tpl-index .header { border-block-end: 1px solid #2b323b; }
.lv-herov--tmavy .lv-herov__panel::before { display: none !important; }
body.tpl-index .announcement-bar,
body.tpl-index .announcement-bar__inner,
body.tpl-index .shopify-section-group-header-group .announcement-bar { background-color: #232830 !important; background-image: none !important; color: #eef1f3 !important; }
body.tpl-index .announcement-bar::before { background-image: none; }
body.tpl-index .announcement-bar *,
body.tpl-index .announcement-bar a,
body.tpl-index .announcement-bar a * { color: #eef1f3 !important; }
body.tpl-index .announcement-bar a { text-decoration-color: rgb(255 255 255 / 0.5); }
body.tpl-index .announcement-bar__text,
body.tpl-index .announcement-bar__text a,
body.tpl-index .announcement-bar__link { color: #eef1f3; }

/* ============================================================ 20. 9. 2026: dvoubarevne menu (Ben, navrh D)
   Na homepage je hlavicka tmave seda jako hero (#1a1e23), takze hlavicka a hero
   drzi jako jeden blok. Na ostatnich strankach zustava svetla.
   Logo je tmave PNG, na tmave hlavicce se prebarvuje na bilou pres filtr -
   svetla verze loga v nastaveni (logo_inverse) se pouzije, az bude nahrana. */
body.tpl-index .header,
body.tpl-index header-component,
body.tpl-index .header__row {
  background: #1a1e23;
  color: #eef1f3;
}
/* Radky hlavicky si berou barvu z promennych, ktere motiv zapisuje primo do
   style="" na header-component, takze je potreba prebit je s !important. */
body.tpl-index header-component.header {
  --color-background-top-row: #1a1e23 !important;
  --color-background-bottom-row: #1a1e23 !important;
}
body.tpl-index .header a,
body.tpl-index .header button,
body.tpl-index .header .menu-list__link *,
body.tpl-index .header .localization-form__select,
body.tpl-index .lv-utility__link { color: #eef1f3; }
body.tpl-index .header svg { color: currentColor; }
body.tpl-index .header .header-logo img { filter: brightness(0) invert(1); }
body.tpl-index .header { border-block-end: 1px solid #2b323b; }
.lv-herov--tmavy .lv-herov__panel::before { display: none !important; }
body.tpl-index .announcement-bar,
body.tpl-index .announcement-bar__inner,
body.tpl-index .shopify-section-group-header-group .announcement-bar { background-color: #232830 !important; background-image: none !important; color: #eef1f3 !important; }
body.tpl-index .announcement-bar::before { background-image: none; }
body.tpl-index .announcement-bar *,
body.tpl-index .announcement-bar a,
body.tpl-index .announcement-bar a * { color: #eef1f3 !important; }
body.tpl-index .announcement-bar a { text-decoration-color: rgb(255 255 255 / 0.5); }
body.tpl-index .announcement-bar__text,
body.tpl-index .announcement-bar__text a,
body.tpl-index .announcement-bar__link { color: #eef1f3; }

/* ============================================================ sazba nadpisu podle navrhu D (Ben 21. 9. 2026: vybrana, prepinac zrusen)
   Puvodni sazba z 16. 9. (vic rezu v jednom nadpisu) je archivovana v gitu
   a v zalohy/sazba-2026-09-16/. Pravidla nize ji prebijeji.
   Cely nadpis je Jost 300 v jedne velikosti, kurziva Instrument Serif je jen
   na jednom klicovem slove *takhle*. Ostatni znacky (mensi kurziva, prostrkane
   verzalky, odsazeni radku, pavi linka) se v teto sazbe neuplatni - presne to
   je rozdil proti dnesni sazbe, kde ma nadpis vic rezu v jednom bloku. */
/* v sazbe D je nadpis jeden odstavec, ne sloupec radku: radky plynou za sebou
   a lamou se podle sirky, presne jako v navrhu */
body.lv-bold .lv-nr { display: inline; }
/* vaha nadpisu je jedina pro cely web; sekce si ji berou z teto promenne */
body { --lv-heading-weight: 300; }
body.lv-bold .lv-nm {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
body.lv-bold .lv-nv {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  vertical-align: baseline;
  opacity: 1;
  color: inherit;
}
body.lv-bold .lv-nr--o1,
body.lv-bold .lv-nr--o2 { padding-inline-start: 0; }
body.lv-bold .lv-nr--linka::before { content: none; }
/* klicove slovo: jedina kurziva v nadpisu, v barve nadpisu */
body .lv-pinyon,
body.lv-bold .lv-nk {
  font-family: var(--lv-font-akcent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: 0;
  color: inherit;
}
/* nadpisy drzi jeden stupen a jeden rez */
/* Sekce si misty sazeji vahu nadpisu primo, ne pres promennou, proto tady
   jedno siroke pravidlo. Plati jen v teto porovnavaci sazbe; az bude vybrana,
   vaha se dopise primo do jednotlivych sekci a !important zmizi. */
body h1,
body h2,
body h3,
body [class*="__nadpis"],
body [class*="__title"] {
  font-weight: 300 !important;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
/* 7. 10. 2026: pravidla pro "odvaznou" sazbu citatu (radky r--1..r--5) odstranena,
   lv-citat ma jednu sazbu primo v sekci. */


/* ============================================================ 21. 9. 2026: dotykove cile na mobilu
   Textove odkazy mely na telefonu vysku 19 az 27 px, coz je pod hranici, kterou
   jde spolehlive trefit prstem. Neroste jim pismo, jen aktivni plocha. */
@media screen and (max-width: 749px) {
  .lv-cta-link,
  .lv-probl__vse,
  .lv-obl__vse,
  .lv-regal__vse,
  .lv-komplex__odkaz,
  .lv-ritual__nazev,
  .lv-cesta__nazev,
  .lv-blog__vice,
  .lv-rpas__cta,
  .lv-rpas__vse,
  .lv-klubu__vice,
  .lv-edit__odkaz,
  .lv-footer__col a,
  .lv-footer__col-title,
  .lv-footer__cookies {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}


/* ============================================================ 21. 9. 2026: drobnosti z kontroly homepage
   1) Zapisnik: dva ze ctyr clanku mely akcent v bordo a medove hnede. Michalova
      pavi paleta je modrozelena, smaragd, indigo, purpur a magenta - hneda do ni
      nepatri, takze se akcenty drzi jen pavi podmnoziny.
   2) Sekce s typy vlasu ve dvou sloupcich: perex vysel do druheho sloupce a
      vypadal utrzene od nadpisu. Ted je pod nadpisem a vpravo zustava jen odkaz. */
.lv-blog__polozka:nth-child(6n + 3) { --lv-pav: var(--pav-fuchsie); }
/* 21. 10. 2026: tyrkys #1a9aa6 mel pod "Cist dal" 3,4:1, stejny odstin tmavsi #16828c = 4,6:1 (WCAG AA) */
.lv-blog__polozka:nth-child(6n + 4) { --lv-pav: #16828c; }

}


/* ============================================================ 21. 9. 2026 (Ben): hlavicka a pruh na homepage
   1) Text v oznamovaci liste byl seda na tmave, temer necitelny.
   2) Bile linky kolem menu rozsekavaly hlavicku na pruhy - ted jen naznak.
   3) Prepinac jazyka byl bily ovál s bilym textem uvnitr. */
body.tpl-index .announcement-bar,
body.tpl-index .announcement-bar *,
body.tpl-index .announcement-bar a,
body.tpl-index .announcement-bar a * {
  color: #d7dde3 !important;
}
body.tpl-index .announcement-bar strong,
body.tpl-index .announcement-bar a strong,
body.tpl-index .announcement-bar b { color: #ffffff !important; }

body.tpl-index .header,
body.tpl-index .header__row,
body.tpl-index .header__row--top,
body.tpl-index .header__row--bottom { border-color: rgb(255 255 255 / 0.08) !important; box-shadow: none !important; }
body.tpl-index .header { border-block-end: 1px solid rgb(255 255 255 / 0.1); }
body.tpl-index .announcement-bar { border-block-end: 1px solid rgb(255 255 255 / 0.06); }

body.tpl-index .header .localization-form__select,
body.tpl-index .header .localization-form button,
body.tpl-index .header .dropdown-localization button {
  background: transparent !important;
  border: 1px solid rgb(255 255 255 / 0.22) !important;
  color: #eef1f3 !important;
}
body.tpl-index .header .localization-form__select:hover,
body.tpl-index .header .localization-form button:hover { border-color: rgb(255 255 255 / 0.45) !important; }
body.tpl-index .header .localization-form__select svg,
body.tpl-index .header .localization-form button svg { color: #eef1f3 !important; }


/* ============================================================ 21. 9. 2026: jedna typograficka skala nadpisu
   Na homepage byly nadpisy sekci od 52 do 95 px, protoze si kazda sekce sazela
   vlastni velikost. Ted jsou dva stupne:
     display  - celoplosne claimy (blond, salon, editorial) a hero
     sekce    - bezny nadpis sekce
   Kdyz nejaka sekce potrebuje vyjimku, prepise si promennou, ne velikost. */
:root {
  --lv-nadpis-display: clamp(2.8rem, 5.6vw, 5.5rem);
  --lv-nadpis-sekce: clamp(2.1rem, 4.2vw, 4.6rem);
}
.lv-probl__nadpis,
.lv-komplex__nadpis,
.lv-news__nadpis,
.lv-oblib__nadpis,
.lv-rpas__nadpis,
.lv-social__title,
.lv-blog__title,
.lv-klubu__nadpis,
.lv-brand-strip__title,
.lv-hlavicka__nadpis,
.lv-obl__nadpis,
.lv-regal__nadpis { font-size: var(--lv-nadpis-sekce) !important; }

.lv-rez__nadpis,
.lv-blok-kolekce__nadpis,
.lv-pfoto__nadpis,
.lv-edit__nadpis { font-size: var(--lv-nadpis-display) !important; }


/* 21. 9. 2026: karta ritualu presahuje do sekce se znackami, takze nadpis
   "Svetove znacky" zacinal tesne pod ni. Sekce dostava nahore vic mista. */
body.tpl-index .lv-brand-strip { padding-block-start: clamp(90px, 12vw, 190px); }


/* ============================================================ 21. 9. 2026: oznamovaci lista a dlazdice v heru
   Lista: text se stale sazel v sede z barevneho schematu sekce, takze na tmave
   plose skoro zanikal. Prebijime barvu i vypln pisma a pripadnou pruhlednost. */
body.tpl-index .announcement-bar,
body.tpl-index .announcement-bar *,
body.tpl-index .announcement-bar .text-block,
body.tpl-index .announcement-bar slideshow-slide,
body.tpl-index .announcement-bar slideshow-slide * {
  color: #eef1f3 !important;
  -webkit-text-fill-color: #eef1f3 !important;
  opacity: 1 !important;
}
body.tpl-index .announcement-bar strong,
body.tpl-index .announcement-bar b,
body.tpl-index .announcement-bar a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Dlazdice v heru: vyrez produktu se nesmi orezavat.

   Ben 22. 9.: dlazdice maji byt ve vychozim stavu prusvitne a plne kryti
   dostat az pri najeti - sekce tim zlehkne. Kryti proto resi sekce sama
   (lv-hero-rez.liquid) vcetne kola, ktere jim jednou za cas na chvili
   pridava kryti. Drive tu bylo `background: #ffffff !important`, coz to
   prebijelo - proto tu barva uz vubec neni. */
.lv-rez__volba img { object-fit: contain !important; }
.lv-rez__volba { box-shadow: 0 10px 26px rgb(10 20 30 / 0.22); }

/* ============================================================ 21. 9. 2026: megamenu na homepage (Ben: "Megamenu necitelne")
   Hlavicka je na homepage tmava, takze `body.tpl-index .header a { color: #eef1f3 }`
   probarvilo svetle i rozbalene megamenu - a to ma bilou plochu. Vysledek byla
   skoro neviditelna svetle seda na bile. Panel megamenu se proto z toho pravidla
   vyjima a drzi si vlastni tmavou sazbu bez ohledu na barvu hlavicky. */
body.tpl-index .header .menu-list__submenu,
body.tpl-index .header .mega-menu,
body.tpl-index .header .lv-mm { color: var(--lv-text); }
body.tpl-index .header .menu-list__submenu a,
body.tpl-index .header .menu-list__submenu button,
body.tpl-index .header .menu-list__submenu .menu-list__link *,
body.tpl-index .header .mega-menu a,
body.tpl-index .header .lv-mm a { color: var(--lv-text); }
body.tpl-index .header .lv-mm__ey,
body.tpl-index .header .lv-mm__odkazy a:hover,
body.tpl-index .header .lv-mm__odkazy a.is-on,
body.tpl-index .header .lv-mm__h em,
body.tpl-index .header .lv-mm__znacky a:hover b,
body.tpl-index .header .lv-mm__pata a:hover { color: var(--c); }
body.tpl-index .header .lv-mm__pocet,
body.tpl-index .header .lv-mm__pz,
body.tpl-index .header .lv-mm__st i { color: #636b73; }
body.tpl-index .header .lv-mm__znama,
body.tpl-index .header .lv-mm__prob-text p:not(.lv-mm__h) { color: #4a5057; }
body.tpl-index .header .lv-mm__pata { background: #eef1f4; }

/* ============================================================ 21. 9. 2026: dotykove cile na mobilu (QA homepage)
   Merenim na 390 px zbyly dva prvky pod 44 px: polozky v zasuvce menu (34 px)
   a odkaz v oznamovacim pruhu (31 px). U pruhu se zvetsuje jen plocha k
   klepnuti, ne pismo - pruh ma zustat tenky. */
@media (max-width: 749px) {
  .menu-drawer__menu-item { min-block-size: 44px; display: flex; align-items: center; }
  .announcement-bar__text a,
  .announcement-bar__link { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 2px; }
}

/* ============================================================ 22. 9. 2026: hledani jako pole (CRO)
   Hledani bylo v hlavicce jen lupa. Na desktopu ted vypada jako vyhledavaci
   pole s lupou a popiskem, klik otevre stejny modal jako driv. Na mobilu
   zustava samotna ikona. */
@media screen and (min-width: 750px) {
  .header .search-action .header-actions__action {
    display: inline-flex; align-items: center; gap: 8px;
    min-inline-size: 190px; min-block-size: 38px; padding-inline: 12px;
    border: 1px solid var(--lv-border, rgb(0 0 0 / 0.18)); border-radius: 999px;
    color: inherit; text-align: start; cursor: text;
  }
  .header .search-action .header-actions__action:hover { border-color: currentColor; }
  .header .search-action .svg-wrapper { display: inline-flex; order: -1; opacity: 0.75; }
  .header .search-action .header-actions__action > span:not(.svg-wrapper) { font-size: 0.86rem; opacity: 0.72; }
}
body.tpl-index .header .search-action .header-actions__action { border-color: rgb(255 255 255 / 0.28); }

/* ============================================================ 22. 9. 2026: mezery mezi slovy v displejovych nadpisech
   Ben: v nadpisu "Blond nepotrebuje odbarvit. Potrebuje vycistit" byla mezera
   mezi "Potrebuje" a "vycistit" vetsi nez jinde. Nadpisy maji zaporny prostrk
   (-0,018em), ktery pusobi uvnitr slov, ale mezeru mezi slovy neuzi, takze
   opticky vyroste - a u prechodu z verzalkoveho radku do kurzivy nejvic.
   Slovni mezera se proto o kousek stahne a kurzivni klicove slovo dostane
   maly zaporny odskok, aby nesedelo opticky dal nez ostatni slova. */
body.lv-bold .lv-rez__nadpis,
body.lv-bold .lv-blok-kolekce__nadpis,
body.lv-bold .lv-pfoto__nadpis,
body.lv-bold .lv-edit__nadpis,
body.lv-bold .lv-probl__nadpis,
body.lv-bold .lv-komplex__nadpis,
body.lv-bold .lv-kviz__nadpis { word-spacing: -0.05em; }
body.lv-bold .lv-nv + .lv-nk,
body.lv-bold .lv-nr--linka + .lv-nr > .lv-nk { margin-inline-start: -0.04em; }

/* ============================================================ 22. 9. 2026: drobnosti v hlavicce (Ben)
   1. Ikona uctu byla tmava (#0d1216) i na tmave hlavicce homepage - pravidlo
      pro tmavou hlavicku ji nepokryvalo, protoze to neni <a> ani <button>.
   2. Sipka u prepinace jazyka sedela na okraji pilulky.
   3. Kosik mel bublinu s poctem v cerne na cerne. Ted jde v pavich barvach
      (tyrkys -> fuchsie, tedy stejna dvojice jako dve tecky v nadpisech) a
      pri zmene poctu jednou pulzne, aby si toho clovek vsiml. */
body.tpl-index .header .account-button,
body.tpl-index .header .account-button svg,
body.tpl-index .header .dropdown-localization,
body.tpl-index .header .localization-form__select,
body.tpl-index .header .icon-caret { color: #eef1f3; }
body.tpl-index .header .localization-form__select { background: transparent; }

.header .language-selector { position: relative; }
.header .language-selector .localization-form__select { padding-inline-end: 32px; }
.header .language-selector .svg-wrapper.icon-caret {
  position: absolute; inset-inline-end: 12px; inset-block-start: 50%;
  translate: 0 -50%; pointer-events: none;
}

.header .cart-bubble:not(.visually-hidden) {
  background: linear-gradient(135deg, #1a9aa6, #b0206b) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0 rgb(26 154 166 / 0.55);
  animation: lv-kosik-pulz 2.4s ease-out 2;
}
.header .cart-bubble:not(.visually-hidden) .cart-bubble__background { display: none; }
@keyframes lv-kosik-pulz {
  0% { box-shadow: 0 0 0 0 rgb(26 154 166 / 0.55); }
  70% { box-shadow: 0 0 0 10px rgb(26 154 166 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(26 154 166 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .header .cart-bubble:not(.visually-hidden) { animation: none; }
}

/* hledani presunute do horni rady (lv-hlavicka.js) je uzsi, aby se veslo,
   a utility rada nesmi zalomit - jinak hledani skoci nad odkazy */
/* Pozor na breakpoint: doplnkove odkazy patri jen do sirokeho okna. Kdyz se
   tohle pravidlo psalo bez media dotazu, prebilo zakladni `display: none`
   a na mobilu lezel "Vernostni klub" pres ikonu uctu a kosiku - v uzkem
   hornim radku ma mrizka pro odkazy jen 44 px. Na mobilu jsou tytez odkazy
   v supliku navigace. */
@media screen and (min-width: 750px) {
  .header .lv-utility { display: flex; align-items: center; flex-wrap: nowrap; gap: 18px; }
}
/* Samotne odkazy az od 990 px. Do 989 px v radku zustava jen presunute
   hledani - kdyby se schoval cely nav, nebylo by mezi 750 a 989 px hledani
   nikde (dole je uz schovane a mobilni lupa se zapina az pod 750 px). */
@media screen and (max-width: 989px) {
  .header .lv-utility__list { display: none; }
}
.header .search-action--v-utility .header-actions__action { min-inline-size: 118px; min-block-size: 30px; padding-inline: 10px; }
.header .search-action--v-utility .header-actions__action > span:not(.svg-wrapper) { font-size: 0.8rem; }

/* ============================================================ 22. 9. 2026: vlastni prepinac jazyka
   Nativni <select> mel sipku mimo pilulku a systemove rozbaleni. Select
   zustava kvuli funkci a bez JS, jen je schovany (lv-jazyk.js). */
.lv-jazyk { position: relative; display: inline-flex; align-items: center; }
.lv-jazyk .lv-jazyk__select-skryty { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.lv-jazyk__tlac {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: 30px; padding: 0 10px 0 12px;
  border: 1px solid var(--lv-border, rgb(0 0 0 / 0.2)); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 0.8rem;
  letter-spacing: 0.08em; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.lv-jazyk__tlac:hover { border-color: currentColor; }
.lv-jazyk__tlac[aria-expanded='true'] { border-color: currentColor; }
.lv-jazyk__sipka {
  inline-size: 7px; block-size: 7px; flex: none; translate: 0 -2px;
  border-inline-end: 1.4px solid currentColor; border-block-end: 1.4px solid currentColor;
  rotate: 45deg; transition: rotate .2s ease, translate .2s ease; opacity: 0.7;
}
.lv-jazyk__tlac[aria-expanded='true'] .lv-jazyk__sipka { rotate: -135deg; translate: 0 2px; }
.lv-jazyk__menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none; min-inline-size: 132px;
  background: #fff; color: #15181b; border: 1px solid rgb(0 0 0 / 0.08); border-radius: 10px;
  box-shadow: 0 16px 40px rgb(10 20 30 / 0.18);
}
.lv-jazyk__polozka {
  display: flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 6px 10px;
  border-radius: 7px; font-size: 0.86rem; letter-spacing: 0; cursor: pointer;
}
.lv-jazyk__polozka::before {
  content: ''; inline-size: 14px; block-size: 8px; flex: none; opacity: 0;
  border-inline-start: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
  rotate: -45deg; translate: 0 -3px;
}
.lv-jazyk__polozka.je-vybrana::before { opacity: 1; }
.lv-jazyk__polozka:hover, .lv-jazyk__polozka:focus-visible { background: #f1f3f5; outline: none; }
body.tpl-index .header .lv-jazyk__tlac { border-color: rgb(255 255 255 / 0.28); }

/* ============================================================ výběr hvězdiček (formulář hodnocení) */
.lv-hvv { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.lv-hvv__in { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.lv-hvv__hv { cursor: pointer; font-size: 30px; line-height: 1; color: color-mix(in srgb, var(--lv-text) 18%, transparent); }
.lv-hvv__hv::before { content: '\2605'; }
.lv-hvv__in:focus-visible + .lv-hvv__hv { outline: 2px solid var(--lv-accent); outline-offset: 2px; border-radius: 4px; }
/* rozsvícená: vybraná a všechny vlevo od ní (v DOM za ní), barvy jako hvězdy recenzí */
.lv-hvv__in:checked + .lv-hvv__hv, .lv-hvv__in:checked + .lv-hvv__hv ~ .lv-hvv__hv,
.lv-hvv__hv:hover, .lv-hvv__hv:hover ~ .lv-hvv__hv { color: var(--lv-hvv-barva, #0e4a52); }
.lv-hvv__hv--1 { --lv-hvv-barva: #0e4a52; }
.lv-hvv__hv--2 { --lv-hvv-barva: #1a9aa6; }
.lv-hvv__hv--3 { --lv-hvv-barva: #3f8a2c; }
.lv-hvv__hv--4 { --lv-hvv-barva: #1b2a6b; }
.lv-hvv__hv--5 { --lv-hvv-barva: #b0206b; }

/* ============================================================ odmítnutí dotazníku (košík, Heureka) */
.lv-dotaznik { display: flex; gap: 8px; align-items: flex-start; margin-block: 10px 4px; font-size: 12px; line-height: 1.45; color: var(--lv-text-muted); cursor: pointer; }
.lv-dotaznik input { flex: none; margin-block-start: 2px; border-radius: 4px; }

/* ============================================================ šipka zpět nahoru */
.lv-nahoru { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 40; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%; background: var(--lv-text, #1c2226); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgb(13 18 22 / 0.18); }
.lv-nahoru[hidden] { display: none; }
.lv-nahoru:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 3px; }
@media (max-width: 749px) { .lv-nahoru { inset-block-end: 84px; inline-size: 44px; block-size: 44px; } }

/* ---------------------------------------------- obrazky: druha fotka dlazdice (8. 10. 2026)
   Fotka "pri najeti" (lv-karta, lv-oblibene, resource-card) se na dotykovych zarizenich
   nikdy neukaze (opacity 0, hover neexistuje), presto se stahovala: obrazek s opacity 0
   je pro lazy load viditelny. Na mobilu to bylo az 1,5 MB na kolekci. display: none =
   lazy obrazek se nestahuje (a lv-nacitani.js ho nepredna). */
@media (hover: none) {
  .lv-obl__img--2,
  .resource-card__image--secondary {
    display: none;
  }
}

/* ---------------------------------------------- PDP galerie: skok sirky obrazku (8. 10. 2026)
   Na desktopu Horizon po nacteni nekolikrat prepocita sirku hlavniho obrazku (638 -> 360 ->
   638 px), CLS 0,18 na PDP beznych znacek (Balmain). Na mobilu stejna vec opravena 7. 10.
   v lv-mobil.css. Obrazek drzi sirku ramecku od zacatku, produkt se do nej vejde (contain),
   konecny stav je stejny jako dosud. */
@media screen and (min-width: 750px) {
  .tpl-product media-gallery .product-media__image {
    object-fit: contain;
    inline-size: 100% !important;
    max-inline-size: none !important;
  }
}

/* A01 (proklik 12. 10.): ikona Ucet (shopify-account) nemela viditelny fokus */
shopify-account:focus-within { outline: var(--lv-focus-outline); outline-offset: var(--lv-focus-offset); }

/* 15. 10. (Ben, rozhodnuti 6): priznaky Shoptetu Limitka / Vegan / Tip / XXL (snippets/lv-priznaky).
   Karta: vlevo nahore pod sebou; kdyz je na karte stitek bazaru, jdou pod nej, u litru s bazarem
   i pod "Salonni baleni" (to se pak presouva vlevo pod bazar). PDP: v radku u odznaku MZ. */
.lv-priznaky { display: flex; flex-wrap: wrap; gap: 4px; }
.lv-priznak { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: #fff; }
.lv-priznak--limitka { background: #cd9934; color: #1d1a14; }
.lv-priznak--vegan { background: #32cb00; color: #0f2400; }
.lv-priznak--tip { background: #1c2a68; }
.lv-priznak--xxl { background: #6d2400; }
/* 19. 10. (Katerina 15. 10.): Bazar by Michal Zapoměl - fialova jako "Bazar by MZ" na Shoptetu (#753192) */
.lv-priznak--bazar { background: #753192; color: #fff; letter-spacing: 0.06em; }
.lv-karta__priznaky { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1; flex-direction: column; align-items: flex-start; pointer-events: none; }
.lv-karta:has(.lv-karta__sleva) .lv-karta__priznaky { inset-block-start: 44px; }
.product-grid__item--litr:has(.lv-karta__sleva) .lv-karta__priznaky { inset-block-start: 76px; }
.lv-priznaky--pdp { margin-block: 4px; }
.lv-priznaky--pdp .lv-priznak { font-size: 0.7rem; }
.lv-pkarta__priznaky { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; flex-direction: column; align-items: flex-start; }
.lv-pkarta__media:has(.lv-pkarta__badge) .lv-pkarta__priznaky { inset-block-start: 42px; }

/* ============================================================ 15. 10. 2026: menu v samostatnem pruhu pres celou sirku (parita se Shoptetem)
   Menu ma 10 polozek s nazvy ze Shoptetu (Katerina 15. 10.) a vedle velkeho loga pres obe rady
   se neveslo: GENTLE MAN, Bazar, TIPY NA DARKY a Znacky padaly pod "Vice" (1024-1920 px).
   Rozhodnuto 15. 10.: spodni rada bez sloupce pro logo (menu pres celou sirku jako Shoptet),
   logo mensi a jen v horni rade. Rusi U1 z 16. 9. (logo pres dva radky). Mobil a tablet
   (pod 990 px) beze zmeny. Podklad: podklady/zpetna-vazba-2026-10-15/MENU-PARITA.md.
   22. 10. (Ben: "chci puvodni chovani, kdy v zakladu je to logo na dva radky"): Bazar presunut do
   doplnkovych odkazu za Zapisnik, GENTLE MAN a TIPY NA DARKY bez verzalek -> 9 polozek se od 1280 px
   vejde vedle loga. Od 1280 px proto zase U1 (logo pres obe rady, nize "22. 10. U1 zpet"); tento
   pruh pres celou sirku zustava jen pro 990-1279 px, kde se menu vedle loga nevejde. */
@media screen and (min-width: 990px) and (max-width: 1279px) {
  :root { --lv-logo-sloupec: 240px; }
  /* 22. 10. (Ben: logo "nalepene" na horni pruh): absolutni logo se stredilo na 50 % horniho radku
     vcetne jeho horniho odsazeni (spodni Horizon u sbalenych radku nuluje), takze sedelo o 6 px vys
     nez hledani a ikony a 5 px pod pruhem. Logo je od 15. 10. jen v horni rade, proto zpet do toku:
     stredi se s hledanim a ikonami, radek si vezme jeho vysku a dole ma 6 px odstup od menu. */
  .header__row--top .header-logo { position: static; translate: none; }
  header-component.header .header__row--top .header__columns { --padding-block-end: 6px; }
  .header__row--top .header-logo img,
  .header__row--top .header-logo svg { inline-size: 220px; max-inline-size: none; block-size: auto; }
  .header__row--bottom .header__column--left { padding-inline-start: 0; justify-content: space-between; }
}
/* 990-1279 px: s puvodnim pismem 13-14 px padaly 1-2 polozky pod "Vice" (Znacky, TIPY NA DARKY).
   12,5 px (990-1023 px 12 px) a rozestup 3 px staci na vsech 10 polozek. */
@media screen and (min-width: 990px) and (max-width: 1279px) {
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link,
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link-title { font-size: 12.5px; }
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link-title { padding-inline: 3px; }
}
@media screen and (min-width: 990px) and (max-width: 1023px) {
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link,
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link-title { font-size: 12px; }
}
/* 22. 10. U1 zpet (od 1280 px): logo pres obe rady (absolutni poloha a sloupec z bloku "logo pres oba
   radky" vyse, stred na celou hlavicku = 25-30 px od pruhu), menu vpravo vedle loga. Sloupec loga
   a rozestupy jsou mensi nez v U1 z 16. 9., aby se 9 polozek veslo bez "Vice":
   1280-1439 px logo 230 px, pismo 13,5 px, rozestup 14 px; od 1440 px logo 250-300 px, rozestup 20 px.
   Mereno Playwrightem 1024-2560 px (podklady/menu-2026-10-22/). */
@media screen and (min-width: 1280px) {
  :root { --lv-logo-sloupec: clamp(280px, 20vw, 330px); }
  .header__row--top .header-logo img,
  .header__row--top .header-logo svg { inline-size: clamp(250px, 17vw, 300px); max-inline-size: none; block-size: auto; }
  header-component .header .header-menu .menu-list ul,
  header-component .header .header-menu .overflow-menu > ul { column-gap: 20px; gap: 20px; }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  :root { --lv-logo-sloupec: 260px; }
  .header__row--top .header-logo img,
  .header__row--top .header-logo svg { inline-size: 230px; }
  header-component .header .header-menu .menu-list ul,
  header-component .header .header-menu .overflow-menu > ul { column-gap: 14px; gap: 14px; }
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link,
  header-component.header .menu-list__list-item:not([slot='overflow']) .menu-list__link-title { font-size: 13.5px; }
}


/* ---------------------------------------------------------------- znacka v nadpisu detailu jako odkaz
   19. 10. (Katerina): znacka nad nazvem produktu vede na kolekci znacky (blocks/product-title).
   Vzhled zustava stejny jako driv (span), podtrzeni jen pri najeti. */
h1.lv-nazev--h1 a.lv-nazev__znacka {
  color: inherit;
  text-decoration: none;
}

h1.lv-nazev--h1 a.lv-nazev__znacka:hover,
h1.lv-nazev--h1 a.lv-nazev__znacka:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Znacka This.. ve verzalkach (eyebrow, megamenu, znacka nad nazvem) zustava "This..":
   obaluje ji assets/lv-this-pismo.js (Katerina 19. 10.: "THIS.. s velkymi pismeny jiz nepouzivame"). */
.lv-this-nt { text-transform: none; }