/* Přepisy ikon a obrázků z midorini.cz na vlastní soubory tiskvzpominek.cz */

/* Hlavní ikony (košík, účet, hledání, šipky, atd.) */
.navigation-buttons a[data-target="cart"]::before{content:url(/user/documents/upload/Images/kosik.svg?2)}
.navigation-buttons [data-target="login"]::before,.top-nav-button-account.secondary::before{content:url(/user/documents/upload/Images/user.svg?2)}
.lupa::before{content:url(/user/documents/upload/Images/lupa.svg?2)}
.search-form .btn{background-image:url(/user/documents/upload/Images/lupa-big.svg?2) !important}
.slick-prev::before,.product-slider-holder .product-slider-navigation.navigation-prev::before{content:url(/user/documents/upload/Images/sipka-leva.svg?2)}
.slick-next::before,.product-slider-holder .product-slider-navigation.navigation-next::before{content:url(/user/documents/upload/Images/sipka-prava.svg?2)}
.filter-section h4::after,.slider-wrapper h4::after{content:url(/user/documents/upload/Images/sipka-cerna-dolu.svg?2)}
.close::before,#cboxClose::before{content:url(/user/documents/upload/Images/close.svg?2)}
.contact-box ul li>span.mail::before{content:url(/user/documents/upload/Images/email.svg?2)}
.contact-box ul li>span.tel::before{content:url(/user/documents/upload/Images/call.svg?2)}
h4.number{background-image:url(/user/documents/upload/Images/hvezdy.svg?2)}
.newsletter-header{background-image:url(/user/documents/upload/Images/odber-obalka-big.svg?2)}
.subscribe-form .form-control{background-image:url(/user/documents/upload/Images/odber-obalka2.svg?2)}
.searchWhisperer__content--empty .top{background-image:url(/user/documents/upload/Images/nenalezeno.svg?2)}
.cart-widget-product-delete button::before{content:url(/user/documents/upload/Images/delete.svg?2)}
.cart-free-shipping>div,.extra.delivery>span,.extra.gift>span{background-image:url(/user/documents/upload/Images/nakladak.svg?2)}
.empty-cart-content .top h4{background-image:url(/user/documents/upload/Images/empty-cart.svg?2)}
input[type="checkbox"]:checked+label::after,input[type="radio"]:checked+label::after{content:url(/user/documents/upload/Images/filter-check-bila.svg?2)}
.cart-widget-button .btn::after{content:url(/user/documents/upload/Images/sipka-konverze-bila.svg?2)}

/* Ikonky na textových stránkách (Reklamace, Odstoupení od smlouvy, ...) */
.art-box:first-child,.id-839 .art-box:first-child{background-image:url(/user/documents/upload/Images/reklamace1.svg?2)}
.art-box:nth-child(2),.id-839 .art-box:nth-child(3){background-image:url(/user/documents/upload/Images/reklamace2.svg?2)}
.art-box:nth-child(3){background-image:url(/user/documents/upload/Images/reklamace3.svg?2)}
.art-box:nth-child(4){background-image:url(/user/documents/upload/Images/reklamace4.svg?2)}
.art-box:nth-child(2){background-image:url(/user/documents/upload/Images/reklamace5.svg?2)}
.alert-box{background:url(/user/documents/upload/Images/alert.svg?2) 20px 50% no-repeat #F8EDED}
.doprava-zdarma{background:url(/user/documents/upload/Images/nakladak.svg?2) 20px 50% no-repeat #FBF7F1}

/* Šipky u miniatur fotek v detailu produktu */
.p-thumbnails .thumbnail-next::before,.p-thumbnails .thumbnail-prev::before{content:url(/user/documents/upload/Images/sipka-thumbs.svg?2)}

/* Fotky šperků na chybové stránce 404 - z midorini.cz, s tiskem fotek nesouvisí */
.in-404 .content::before,.in-404 .content::after{content:none}

/* Velké dekorativní fotky na textových stránkách (Kontakt, Platba, Reklamace,
   Odstoupení) - dočasně skryty, protože šlo o fotky z midorini.cz (šperky,
   krabička s logem MIDORINI) nesouvisející s tiskem fotek. Čeká na vlastní
   fotky od Sabiny, viz zpráva v konverzaci. */
.id-29 .content,.id-842 #content-wrapper,.id-842 .content,.id-836 #content-wrapper,.id-839 #content-wrapper{background-image:none}

/* Dekorativní zlaté linky (odstraněny, ne nahrazeny) */
.custom-footer__newsletter{background-image:none}
.cart-widget .popup-widget-inner{background-image:none}

/* Newsletter přesunut JS skriptem (viz Záhlaví) z patičky nad banner "O nás"
   na homepage - pouze na homepage (.type-index); na ostatních stránkách
   zůstává box normálně v patičce */
.type-index .custom-footer__newsletter{display:none}

/* Mobilní ikony (viewport <= 767px) - stejný princip, přepis na vlastní
   soubory místo midorini.cz. Zjištěno při kontrole všech @media bloků v
   paxio.css. */
.navigation-window-visible .navigation-buttons a[data-target="navigation"]::before{content:url(/user/documents/upload/Images/close.svg?2) !important}
.navigation-buttons a[data-target="navigation"]::before{content:url(/user/documents/upload/Images/menu-mobil.svg) !important}
.breadcrumbs > span > a::after{content:url(/user/documents/upload/Images/drobek-mobil.svg) !important}
.custom-footer > div:nth-child(n+2) h5::after{content:url(/user/documents/upload/Images/sipka-cerna-dolu2.svg) !important}
.filter-section.otevreno h4::after,.slider-wrapper.otevreno h4::after{content:url(/user/documents/upload/Images/sipka-cerna-nahoru.svg) !important}
.submenu-arrow::after{content:url(/user/documents/upload/Images/sipka-mobil-menu.svg) !important}
.order-summary h2::after{content:url(/user/documents/upload/Images/sipka-recap.svg) !important}
.category-perex .read-more::after{content:url(/user/documents/upload/Images/sipka-zlata-dolu.svg) !important}
.product-tabs{background-image:url(/user/documents/upload/Images/sipka-bila-dolu.svg) !important}
ol.cart-header::after{background-image:none !important}

/* Banner "O nás" na mobilu byl po skrytí fotky welcome4b.jpg (viz Záhlaví)
   zbytečně dlouhý s velkou prázdnou mezerou - nadpis měl na mobilu
   nastavené padding-top:300px, které dřív vyplňovala právě ta fotka.
   Fotku nechceme, takže rušíme i tu rezervovanou mezeru. */
.welcome > .h1{padding-top:0 !important}

/* Text souhlasu se zpracováním osobních údajů (a úvodní věta) u newsletteru
   byl na mobilu nastaven na bílou barvu (šablona počítala s tmavým pozadím
   v původní patičce) - na světlém pozadí byl prakticky neviditelný. */
.subscribe-form .consents.consents-first,.subscribe-form .consents.consents-first a,.newsletter-header p,.newsletter-header h3{color:#000000 !important}

/* Souhlas se zpracováním osobních údajů u newsletteru byl na mobilu
   schovaný pod tlačítkem "PŘIHLÁSIT SE" (tlačítko je position:absolute,
   takže nezabírá místo v toku a souhlas pod něj v normálním toku zajel).
   Přidán dostatečný odstup, aby souhlas byl vždy pod tlačítkem. */
@media screen and (max-width: 767px){
  .subscribe-form .consents.consents-first{margin-top: 90px !important;}
}

/* Text pod hlavním carouselem (Každá fotka je kousek...) neměl žádné
   formátování - na střed a velikost jako nadpis H2. */
.next-to-carousel-banners::before{text-align: center !important; font-size: 26px !important; line-height: 1.3 !important; margin-bottom: 24px !important; display: block;}

/* Patička: "Vytvořil Shoptet Premium" a copyright řádek jsou v šabloně
   umístěny přes position:absolute (počítáno pro kratší sloupec vpravo).
   U delšího sloupce "Kategorie" se text překrýval s odkazy v tomto
   sloupci. Vráceno do normálního toku, aby k překryvu nedocházelo. */
#signature, .copyright{position: static !important;}

/* Patička na PC: prázdný leftover instagram-feed sloupec z šablony (žádný
   obsah, jen zabíral 1/3 řádku), kvůli kterému se sloupce v patičce lámaly
   nerovnoměrně na dva řádky a vypadalo to "rozhozeně". Skryto. */
.custom-footer__instagram{display:none !important;}

/* Text pod hlavním carouselem (viz výše): rodič .next-to-carousel-banners
   je display:flex, takže pseudo-element ::before se bez explicitní šířky
   zmenší na šířku textu a zůstane přilepený vlevo - i s text-align:center
   to na PC vypadalo zarovnané vlevo. Nastavením šířky na 100 % řádku se
   text skutečně vycentruje přes celou šířku. */
.next-to-carousel-banners::before{flex: 1 1 100% !important; width: 100% !important;}

/* Šipky u caruselu (a obecně všechny slick šipky): ikonka šipky (SVG) se
   bez tohoto pravidla nevycentrovala uvnitř tlačítka (řádkovala se nahoru,
   ne na střed), takže byla prakticky neviditelná/na špatném místě -
   zvlášť nápadné na mobilu. Vycentrováno flexboxem. */
.slick-prev, .slick-next{display: flex !important; align-items: center !important; justify-content: center !important;}

/* Šipky konkrétně u carouselu pod hlavním bannerem na mobilu: predchozí
   posun -80px (v paxio.css) byl odladěný pro původní rozložení, kdy nadpis
   ("Každá fotka...") nezabíral celý řádek. Po opravě zarovnání nadpisu
   (viz výše) se řádek s fotkami posunul níž, takže šipky s -80px teď mířily
   do nadpisu místo na fotky. Přepočítáno na nový posun, aby šipky seděly
   svisle uprostřed řádku fotek. */
@media screen and (max-width: 767px){
  .next-to-carousel-banners .slick-prev, .next-to-carousel-banners .slick-next{margin-top: 18px !important;}
}

/* Na přání: hlavní layout homepage má být carousel -> věta -> USP, bez
   samostatného carouselu s kategoriemi (FOTOGRAFIE/VELKOFORMÁTOVÉ FOTKY/...).
   Věta ("Každá fotka...") je ale technicky ::before pseudo-element na
   stejném kontejneru jako ten carousel (.next-to-carousel-banners), takže
   nejde kontejner smazat/skrýt celý - jen jeho viditelný obsah (fotky +
   šipky + tečky), věta zůstává. Protože USP sekce (.benefitBanner) v HTML
   hned následuje, výsledné pořadí je přesně: carousel -> věta -> USP. */
.next-to-carousel-banners .slick-list,
.next-to-carousel-banners .slick-prev,
.next-to-carousel-banners .slick-next,
.next-to-carousel-banners .slick-dots{display: none !important;}
.next-to-carousel-banners::before{margin-bottom: 0 !important;}


/* === Zmenšení mezery mezi carouselem a větou pod ním (PC) ===
   Po skrytí obsahu carouselu (viz výše) zůstal kontejner
   .next-to-carousel-banners s původním margin-top: 80px, který byl
   proporcionální dokud kontejner obsahoval i celý carousel. Teď, když
   obsahuje jen tu jednořádkovou větu, vypadala mezera nad ní zbytečně
   velká. Zmenšeno na 24px. */
.next-to-carousel-banners{margin-top: 24px !important;}

/* === Barva USP lišty (PRÉMIOVÁ KVALITA / VYROBENO V ČR / ...) ===
   Viditelné pozadí lišty není na samotném .benefitBanner (ten je
   průhledný), ale na jeho ::after pseudo-elementu. Změna z původní
   modré rgb(163,193,226) na požadovanou #f6c7b5. */
.benefitBanner::after{background-color: #a3c1e2 !important;}


/* === Tvar a barva tlačítek pro výběr rozměru / typu papíru na stránce produktu ===
   Nativní Shoptet komponenta (.advanced-parameter / .advanced-parameter-inner). Text volby
   (např. "PEARL (polomatný)") je vykreslený přes ::after pseudo-element s absolutním
   umístěním přes celý 60×60px čtverec, proto se dlouhé texty zalamovaly. Řešení: štítek i
   vnitřní span mají teď automatickou šířku podle obsahu s paddingem, ::after je vykreslený
   normálně v toku (ne absolutně), takže určuje šířku, a border-radius:999px dělá z tvaru
   protáhlý ovál/pilulku bez ohledu na délku textu.
   Barvy (2026-09-03, druhá verze): bílé pozadí, tmavě modré ohraničení #0e3166 (stejná
   modrá jako zbytek webu - odkazy, ohraničení polí atd.). Selektor pro border-color musí
   mít stejnou specificitu jako paxio.css (.p-data-wrapper .advanced-parameter-inner),
   jinak paxio.css vyhraje i přes !important. Při výběru (třída .yes-before, přepínaná JS)
   i při najetí myší (:hover) se pozadí podbarví světle modrou #d7e6f1 (původní barva
   těchto tlačítek před redesignem). Černé ohraničení při výběru (z paxio.css,
   .yes-before/:hover) zůstává beze změny jako doplňkový vizuální signál. */
.advanced-parameter{
  width:auto !important;
  height:auto !important;
  min-width:56px !important;
  min-height:40px !important;
  margin:0 10px 10px 0 !important;
}
.advanced-parameter-inner{
  background-color: #ffffff !important;
  width:auto !important;
  height:auto !important;
  min-width:56px !important;
  min-height:40px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.p-data-wrapper .advanced-parameter-inner{
  border-color: #0e3166 !important;
}
.advanced-parameter-inner:hover,
.advanced-parameter-inner.yes-before{
  background-color: #d7e6f1 !important;
}
.advanced-parameter-inner::after{
  position:static !important;
  width:auto !important;
  height:auto !important;
  white-space:nowrap !important;
  padding:0 !important;
}
.advanced-parameter-inner img{border-radius:999px !important;}

/* === Selectbox varianta výběru rozměru / typu papíru na stránce produktu (2026-09-03) ===
   Nahrazuje vizuálně původní tlačítka (.advanced-parameter) rozbalovacím polem. Původní
   tlačítka ZŮSTÁVAJÍ funkční a beze změny v CSS (viz sekce výše) - schovává je až JS soubor
   tvz-param-dropdown.js, a to teprve POTÉ, co se mu podaří pro danou skupinu úspěšně
   vytvořit selectbox. Pokud by se JS z nějakého důvodu nenačetl/nespustil, zákazník uvidí
   a může použít původní tlačítka - nic se nerozbije. */
.tvz-dropdown{
  position: relative;
  width: 100% !important;
  flex: 1 1 100% !important;
  margin-bottom: 10px;
}
.tvz-dropdown-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #0e3166;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease;
}
.tvz-dropdown-trigger:focus{
  outline: 2px solid #0e3166;
  outline-offset: 2px;
}
.tvz-dropdown-value.tvz-placeholder{
  color: #6b7280;
  font-weight: 400;
}
.tvz-dropdown-arrow{
  flex: 0 0 auto;
  display: flex;
  transition: transform .15s ease;
}
.tvz-dropdown.tvz-open .tvz-dropdown-trigger{
  background: #d7e6f1;
}
.tvz-dropdown.tvz-open .tvz-dropdown-arrow{
  transform: rotate(180deg);
}
.tvz-dropdown-panel{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  background: #ffffff;
  border: 1.5px solid #0e3166;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(14,49,102,0.16);
  overflow-y: auto;
  max-height: 280px;
  z-index: 30;
  display: none;
}
.tvz-dropdown.tvz-open .tvz-dropdown-panel{
  display: block;
}
.tvz-dropdown-option{
  padding: 11px 16px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tvz-dropdown-option:not(:last-child){
  border-bottom: 1px solid #eef1f5;
}
.tvz-dropdown-option:hover{
  background: #d7e6f1;
}
.tvz-dropdown-option.tvz-selected{
  background: #d7e6f1;
  font-weight: 700;
}
.tvz-dropdown-option.tvz-selected::after{
  content: "\2713";
  color: #0e3166;
  font-weight: 700;
}

/* Skryti hodnoceni (hvezdicky + "Neohodnoceno" + "Podrobnosti hodnoceni") pod nadpisem produktu (2026-09-03) */
.ratings-and-brand{
  display: none !important;
}


/* Tlacitko "Spustit editor" pres celou sirku sloupce, stejne jako selectboxy (2026-09-04) */
.p-to-cart-block .btn-gen--primary{
  width: 100% !important;
  flex: 1 1 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Skryti filtru v kategoriich, ponechano jen razeni */
#filters-wrapper{display:none !important}

/* Zruseni rezervovaneho mista pro banner vpravo od textu kategorie - text na celou sirku */
.category-perex{width:100% !important;padding-right:0 !important}


/* === Kontakt (2026-09-11 v3): stranka nyni plne vlastni HTML (viz Popis stranky v adminu) - jen fokus stavy + mobilni zlom tabulek === */
.id-29 .content-wrapper-in::after{content:none !important;background:none !important;}

.id-29 .contact-form input:focus,
.id-29 .contact-form textarea:focus { border-color:#0e3166 !important; box-shadow:0 0 0 3px rgba(14,49,102,0.13); outline:none; }

@media (max-width: 767px) {
  .id-29 table[role="presentation"], .id-1461 table[role="presentation"] { border-spacing:0 !important; margin:0 !important; width:100% !important; }
  .id-29 table[role="presentation"] td, .id-1461 table[role="presentation"] td { display:block !important; width:100% !important; margin-bottom:24px; }
}


/* === O nas (2026-09-11): rozlozeni podle navrhu, barvy/fonty prizpusobeny e-shopu === */
.id-1461 .onas-cta a:hover { opacity: 0.85; }


/* === Nejcastejsi dotazy (2026-09-11): FAQ accordion - sipka + hover stavy === */
.id-1473 summary { list-style: none; }
.id-1473 summary::-webkit-details-marker { display: none; }
.id-1473 details[open] > summary > span[data-plus] { transform: rotate(180deg); }
.id-1473 details[open] > summary { color: #0e3166; }
.id-1473 summary > span[data-plus] { transition: transform 160ms ease; }
.id-1473 details > summary:hover { color: #0e3166; }
.id-1473 nav a[href^="#"]:hover { border-color: #0e3166 !important; color: #0e3166 !important; }


/* ============================================================
   NOVY DESIGN UVODNI STRANKY (2026-09-11)
   Navy + Instrument Serif nadpisy, USP pruh v navy, jemny refresh
   produktoveho slideru a blogu, nova sekce "Jak to u nas funguje"
   + restylovany CTA panel (obsah viz Popis v /admin/titulni-strana/).
   Vse scoped na .type-index (jen homepage) nebo na nove .tvz- tridy
   pouzite jen uvnitr Popisu - zadne existujici znackovani se nemeni,
   kosik/vyhledavani/sklad/blog data zustavaji plne funkcni.
   ============================================================ */
.type-index{
  --tvz-navy:#0e3166;
  --tvz-navy-ink:#0a2650;
  --tvz-mist:#f3f6f9;
  --tvz-ink:#1f1f1f;
  --tvz-ink-soft:#4b5563;
}

.type-index .homepage-group-title{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:36px;
  color:var(--tvz-ink);
}
@media (max-width:640px){
  .type-index .homepage-group-title{ font-size:27px; }
}

/* ---------- USP pruh: svetle modra -> tmave modra, ikony bile ---------- */
.type-index .benefitBanner::after{ background-color:var(--tvz-navy) !important; }
.type-index .benefitBanner__title,
.type-index .benefitBanner__data{ color:#fff; }
.type-index .benefitBanner__img{ filter:brightness(0) invert(1); }

/* ---------- Produktovy slider: jemny typograficky refresh (bez zasahu do znackovani) ---------- */
.type-index .products-wrapper.product-slider-holder .p-in-in .name{ font-weight:600; }
.type-index .products-wrapper.product-slider-holder .p-bottom{ font-weight:700; }

/* ---------- Sirsi ramec pro editovatelny obsah (Jak to funguje + CTA) ---------- */
.type-index .welcome-wrapper.container-narrow{ max-width:1180px; }

/* ---------- Jak to u nas funguje ---------- */
.tvz-how{ background:var(--tvz-mist); padding:56px clamp(20px,4vw,64px); margin:0 0 56px; }
.tvz-how__head h2{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:32px;
  margin:0 0 8px; color:var(--tvz-ink);
}
.tvz-how__sub{ margin:0 0 32px; font-size:15px; color:var(--tvz-ink-soft); }
.tvz-how__steps{ display:flex; flex-wrap:wrap; gap:28px 40px; }
.tvz-step{ display:flex; gap:16px; align-items:baseline; flex:1 1 260px; min-width:0; }
.tvz-step__num{
  font-family:"Instrument Serif",Georgia,serif; font-size:28px; color:var(--tvz-navy);
  flex-shrink:0; width:1.2em;
}
.tvz-step p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--tvz-ink); }
@media (max-width:760px){
  .tvz-how{ padding:40px 20px; }
  .tvz-how__steps{ flex-direction:column; gap:20px; }
}

/* ---------- CTA pribeh (navy split panel, realny obsah/foto) ---------- */
.tvz-story{
  background:var(--tvz-navy); color:#fff;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
  margin:0 0 16px;
}
.tvz-story__img{ min-height:320px; }
.tvz-story__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tvz-story__copy{ padding:48px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.tvz-story__copy h2{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:26px; color:#fff; margin:8px 0 0;
}
.tvz-story__copy p{ font-size:14.5px; line-height:1.7; color:#c9d7ea; margin:0; }
a.tvz-story__btn.btn.btn-secondary{
  align-self:flex-start; background:transparent !important; color:#fff !important;
  border-color:#fff !important; margin-top:6px;
}
a.tvz-story__btn.btn.btn-secondary:hover{ background:rgba(255,255,255,.14) !important; }
@media (max-width:840px){
  .tvz-story{ grid-template-columns:1fr; }
  .tvz-story__img{ min-height:220px; order:-1; }
  .tvz-story__copy{ padding:32px 24px; }
}

/* ---------- Newsletter: jemny typograficky refresh ---------- */
.type-index .custom-footer__newsletter.nl-moved h3.pageElement__heading{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
}

/* ---------- Fix: theme's .welcome h2{display:none} @<=767px hides tvz-story heading on mobile ---------- */
.tvz-story__copy h2{ display:block !important; }

/* ============================================================
JAK TO U NAS FUNGUJE - 2-sloupcove rozlozeni podle navrhu (2026-09-11)
Puvodne byly .tvz-how__head (nadpis + podnadpis) a .tvz-how__steps
(kroky 1/2/3) jen pod sebou (blok nad blokem, oboje na stred). Podle
navrhu ma byt uvod vlevo (uzsi) a kroky vpravo (sirsi, v radku) - proto
.tvz-how prevedeno na grid o dvou sloupcich. Na mobilu (viz existujici
@media 760px vyse) zustava puvodni chovani na stred/pod sebou, tady jen
grid vracime zpet na blok, aby se sloupce nezachovaly na uzsim displeji.
============================================================ */
.tvz-how{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: 48px;
  align-items: start;
}
.tvz-how__head{ text-align:left; margin:0; }
.tvz-how__head h2{ text-align:left; }
@media (max-width:760px){
  .tvz-how{ display:block; }
}

/* ============================================================
JAK TO U NAS FUNGUJE - kroky 1/2/3 v jednom radku (2026-09-11 v2)
Po predchozi oprave (2-sloupcove rozlozeni) se pravy sloupec zuzil
(cca 540px) a .tvz-step mel flex:1 1 260px, takze se 3 kroky (3x260px
+ mezery) uz nevesly do jednoho radku a zalomily se pod sebe - presne
opacne nez v navrhu, kde jsou kroky vedle sebe v jednom radku. Reseni:
na sirsich obrazovkach (nad 760px, kde uz plati 2-sloupcove rozlozeni)
kroky sdileji dostupnou sirku rovnym dilem (flex:1 1 0, min-width:0)
misto pevne minimalni sirky 260px, a mezera je mensi. Na mobilu
(<=760px) se nic nemeni - tam uz existujici pravidlo prepina kroky
zpet pod sebe pres flex-direction:column.
============================================================ */
@media (min-width:761px){
  .tvz-how__steps{ gap:20px; }
  .tvz-step{ flex:1 1 0; min-width:0; }
}


/* ---------- TVZ how-it-works video + photo placeholders (2026-09-12) ---------- */
.tvz-how{ background:#fff4cd; }
.tvz-how__media{
  position:relative; min-height:280px;
  background:repeating-linear-gradient(135deg,#eceef1,#eceef1 22px,#dcdfe4 22px,#dcdfe4 24px);
  display:flex; align-items:center; justify-content:center;
}
.tvz-how__media span{
  font-family:"DM Sans",sans-serif; font-size:13px; letter-spacing:.04em; color:#9aa2ad;
  background:rgba(255,255,255,.7); padding:6px 14px; border-radius:3px;
}
.tvz-how__play{
  position:absolute; width:56px; height:56px; border-radius:50%;
  background:rgba(14,49,102,.85); display:flex; align-items:center; justify-content:center;
}
.tvz-how__play::after{
  content:""; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff; margin-left:4px;
}
@media (max-width:760px){
  .tvz-how{ display:flex; flex-direction:column; }
  .tvz-how__media{ order:2; min-height:200px; margin-top:24px; }
  .tvz-how__content{ order:1; }
}
.tvz-story__img--placeholder{
  background:repeating-linear-gradient(135deg,#eceef1,#eceef1 22px,#dcdfe4 22px,#dcdfe4 24px);
  display:flex; align-items:center; justify-content:center;
}
.tvz-story__img--placeholder span{
  font-family:"DM Sans",sans-serif; font-size:13px; letter-spacing:.04em; color:#9aa2ad;
  background:rgba(255,255,255,.7); padding:6px 14px; border-radius:3px;
}
.welcome>.h1{ display:none; }


/* ---------- TVZ welcome-wrapper full-bleed (2026-09-12) ---------- */
.welcome{ padding-left:0 !important; padding-right:0 !important; }


/* ---------- TVZ yellow accents: story button + newsletter bg (2026-09-12) ---------- */
a.tvz-story__btn.btn.btn-secondary{
  background:#fff4cd !important; color:#0e3166 !important; border-color:#fff4cd !important;
}
a.tvz-story__btn.btn.btn-secondary:hover{ background:#ffe9a8 !important; }
.custom-footer__newsletter.nl-moved{ background:#fff4cd !important; }


/* ---------- TVZ newsletter bg fix: visible band is a ::before pseudo-element (2026-09-12) ---------- */
.custom-footer__newsletter.nl-moved::before{ background-color:#fff4cd !important; }


/* ---------- TVZ v39: mobile align-items fix, section gap reduction, square media match (2026-09-12) ---------- */
@media (max-width:760px){
  .tvz-how{ align-items:stretch; }
}
.tvz-how{ margin-bottom:24px; }
.custom-footer__newsletter.nl-moved{ margin-top:16px !important; padding-top:24px !important; }
.tvz-how__media{ min-height:0; aspect-ratio:1/1; }
.tvz-story__img{ min-height:0; aspect-ratio:1/1; align-self:center; }


/* ---------- TVZ v40: mobile .tvz-step flex-basis leak fix (2026-09-12) ---------- */
@media (max-width:760px){
  .tvz-step{ flex:0 0 auto; }
}


/* ---------- TVZ v41: cap video/photo square size, keep them inset from the edges on wide desktop (2026-09-12) ---------- */
@media (min-width:761px){
  .tvz-how__media{ width:480px; max-width:100%; justify-self:center; }
  .tvz-story__img{ width:480px; max-width:100%; justify-self:center; }
}


/* ---------- TVZ v43: no gap between yellow how-it-works and navy story panel (2026-09-12) ---------- */
.tvz-how{ margin-bottom:0; }


/* ---------- TVZ v44: center the contained (1180px) how/story section instead of left-aligned (2026-09-12) ---------- */
.welcome-wrapper{ margin-left:auto !important; margin-right:auto !important; }


/* ---------- TVZ v45: match how/story section width to the product carousel above it, not container-narrow (2026-09-12) ---------- */
.welcome-wrapper{ max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; }


/* ---------- TVZ v46: remove gap between product name and stock availability on listing pages, style injected Detail button (2026-09-12) ---------- */
.product .ratings-wrapper .availability{ margin-top:0 !important; }
.product .p-tools a.btn.btn-conversion{ display:block; text-align:center; margin-top:12px; }


/* ---------- TVZ v47: un-hide .p-tools so the injected Detail button is visible (theme sets display:none via .no-buttons when the card has no add-to-cart button) (2026-09-12) ---------- */
.product .p-bottom.no-buttons .p-tools{ display:block !important; margin-top:12px; }

.custom-footer__newsletter.nl-moved{align-items:center;}
.newsletter-header p{max-width:480px;}