/* =========================================================
   NOVÁ PLEŤ – mobilní opravy, produktovka, výpisy, banner a recenze, verze 10
   =========================================================

   KAM PATŘÍ
   Nahraj do Shoptetu: Vzhled a obsah → Správce souborů → složka "CSS složka"
   (tam, kde už máš ostatní CSS soubory).

   POTOM přidej tenhle řádek do hlavičky (Vzhled a obsah → Editor HTML kódu
   → Záhlaví), a to JAKO POSLEDNÍ ze všech <link> na CSS — musí být pod
   novaplet-home-panel-v6-final-OPRAVENO.css, jinak ho ten soubor přebije:

   <link rel="stylesheet" href="/user/documents/upload/CSS%20slo%C5%BEka/novaplet-mobil-v12.css?v=1">

   CO TO DĚLÁ
   1) Opravuje pásmo konkurenčních výhod na mobilu (hlavní věc).
   2) Zužuje odsazení produktových karuselů, aby se vešly celé karty.
   3) Vypíná animace lidem, kteří mají v telefonu zapnuté omezení pohybu.
   4) Uklízí produktovou stránku (nové ve verzi 2).

   CO TO NEDĚLÁ
   Nesahá na hlavičku, patičku, menu, vyhledávání ani na desktop.
   Když nějaké pravidlo nesedne na tvůj web, prostě se neprojeví — nic se
   nerozbije.
   ========================================================= */


/* ---------------------------------------------------------
   1) PÁSMO VÝHOD NA MOBILU

   Proč: v souboru novaplet-home-panel-v6-final-OPRAVENO.css máš pravidlo
   @media (max-width: 430px), které přepne výhody do jednoho sloupce.
   iPhone 15/16 Pro Max má šířku přesně 430 px, takže na nejrozšířenějším
   velkém iPhonu spadneš do jednoho sloupce. Na tvém screenshotu je to přesně
   ono — čtyři výhody pod sebou zaberou skoro celou obrazovku a zákaznice
   se k produktům dorolluje až za nimi.

   Řešení: dva sloupce necháváme až do 360 px a zmenšujeme svislé rozestupy.
   --------------------------------------------------------- */

@media (max-width: 430px) {
  body.type-index .benefitBanner,
  body.in-index .benefitBanner,
  .homepage .benefitBanner,
  body.type-index .benefitBanner > .benefitBanner__content,
  body.in-index .benefitBanner > .benefitBanner__content,
  .homepage .benefitBanner > .benefitBanner__content,
  body.type-index #homepage-benefits > .benefitBanner__content,
  body.in-index #homepage-benefits > .benefitBanner__content,
  .homepage #homepage-benefits > .benefitBanner__content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
  }
}

/* Pod 360 px (starší malé telefony) jeden sloupec zůstává. */
@media (max-width: 359px) {
  body.type-index .benefitBanner,
  body.in-index .benefitBanner,
  .homepage .benefitBanner,
  body.type-index .benefitBanner > .benefitBanner__content,
  body.in-index .benefitBanner > .benefitBanner__content,
  .homepage .benefitBanner > .benefitBanner__content {
    grid-template-columns: 1fr !important;
  }
}

/* Menší ikony a těsnější řádkování, ať pásmo nezabere celou obrazovku. */
@media (max-width: 767px) {
  body.type-index .benefitBanner__picture,
  body.in-index .benefitBanner__picture,
  .homepage .benefitBanner__picture,
  body.type-index .benefitBanner__icon,
  body.in-index .benefitBanner__icon,
  .homepage .benefitBanner__icon {
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 6px !important;
  }

  body.type-index .benefitBanner__picture img,
  body.in-index .benefitBanner__picture img,
  .homepage .benefitBanner__picture img,
  body.type-index .benefitBanner__picture svg,
  body.in-index .benefitBanner__picture svg,
  .homepage .benefitBanner__picture svg,
  body.type-index .benefitBanner__icon img,
  body.in-index .benefitBanner__icon img,
  .homepage .benefitBanner__icon img,
  body.type-index .benefitBanner__icon svg,
  body.in-index .benefitBanner__icon svg,
  .homepage .benefitBanner__icon svg {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  body.type-index .benefitBanner__title,
  body.in-index .benefitBanner__title,
  .homepage .benefitBanner__title,
  body.type-index .benefitBanner__name,
  body.in-index .benefitBanner__name,
  .homepage .benefitBanner__name {
    margin-bottom: 3px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body.type-index .benefitBanner__description,
  body.in-index .benefitBanner__description,
  .homepage .benefitBanner__description,
  body.type-index .benefitBanner__text,
  body.in-index .benefitBanner__text,
  .homepage .benefitBanner__text,
  body.type-index .benefitBanner__item p,
  body.in-index .benefitBanner__item p,
  .homepage .benefitBanner__item p {
    max-width: none !important;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }

  body.type-index .benefitBanner,
  body.in-index .benefitBanner,
  .homepage .benefitBanner,
  body.type-index #homepage-benefits,
  body.in-index #homepage-benefits,
  .homepage #homepage-benefits {
    padding: 16px 12px 14px !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
  }
}


/* ---------------------------------------------------------
   2) PRODUKTOVÉ KARUSELY NA MOBILU

   Proč: .np-home-product-row má na mobilu odsazení 26 px z každé strany
   (kvůli šipkám). Na 430px displeji tím zbyde na kartu tak málo místa, že
   se druhá karta ořízne uprostřed a názvy se sekají — na tvém screenshotu
   je vidět „MEDI-PEEL or Tox…“ a půlka ceny.

   Řešení: zmenšit odsazení řádku i celého panelu. Šipky zůstávají, jen
   nezabírají tolik místa.
   --------------------------------------------------------- */

@media (max-width: 767px) {
  body.type-index .np-home-product-pair > .np-home-product-row {
    padding: 0 6px !important;
  }

  body.type-index .np-home-product-pair {
    padding: 18px 10px 20px !important;
  }

  body.type-index .np-home-guide,
  body.type-index .np-care-picker {
    padding: 18px 10px 20px !important;
  }

  /* Karta rychlého výběru: ať se vejde celá a kus další je vidět jako
     náznak, že se dá posouvat. */
  body.type-index .np-guide-card {
    flex-basis: 250px !important;
  }
}


/* ---------------------------------------------------------
   3) OMEZENÝ POHYB

   Kdo má v telefonu nebo počítači zapnuté „omezit pohyb“, nemá dostat
   posouvající se pásy. Část skriptů to už respektuje, tohle dorovnává
   zbytek na úrovni CSS.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.type-index .np-guide-viewport,
  body.type-index .np-care-picker-viewport {
    scroll-behavior: auto !important;
  }

  body.type-index .np-guide-card,
  body.type-index .np-care-card,
  body.type-index .np-care-card-image img,
  body.type-index .np-guide-button,
  body.type-index .np-care-picker-button,
  body.type-index .products-wrapper.product-slider-holder .product > .p {
    transition: none !important;
  }

  body.type-index .np-guide-card:hover,
  body.type-index .np-care-card:hover,
  body.type-index .products-wrapper.product-slider-holder .product > .p:hover {
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   4) PRODUKTOVÁ STRÁNKA  (nové ve verzi 2)

   Selektory níž jsou opsané z tvého zdrojového kódu produktovky,
   ne odhadnuté. Ověřeno na Dr. Pepti toneru a LumiSpa čisticím gelu.
   --------------------------------------------------------- */

/* 4a) PRÁZDNÁ MĚRNÁ CENA
   Ve zdrojáku je <span class="price-measure"> a uvnitř jen skrytý popisek
   "Měrná cena:" bez hodnoty. Element tak zabírá místo pod cenou a působí
   jako nedodělek.
   POZOR: až budeš u produktů vyplňovat jednotky (Nastavení → Produkty →
   Jednotky), tenhle blok smaž, jinak schováš i vyplněné měrné ceny. */
body.type-product .p-price-wrapper .price-measure {
  display: none !important;
}

/* 4b) ODKAZ "TISK"
   Ve zdrojáku jsou tři ikony: Tisk, Zeptat se, Sdílet. Nikdo si produktovou
   stránku toneru netiskne. "Zeptat se" naopak necháváme a zvýrazňujeme —
   je to tvoje jediné tlačítko, které vede k poradenství Petry. */
body.type-product .link-icons .link-icon.print {
  display: none !important;
}

body.type-product .link-icons .link-icon.chat {
  font-weight: 700;
}

body.type-product .link-icons .link-icon.chat span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 4c) VÍC ŠTÍTKŮ NA JEDNOM PRODUKTU
   Dr. Pepti toner má současně Akce + Novinka + Tip. Když má štítek skoro
   každý produkt, přestane fungovat jako signál. Necháváme jen ten první
   v pořadí — Shoptet dává akční štítek na začátek, takže zůstane sleva.
   Trvalé řešení je odškrtat přebytečné štítky v administraci u produktů;
   tohle je zatím vizuální záplata.
   VERZE 3: pravidlo platí i na homepage a v kategoriích, ne jen na
   produktové stránce. Na screenshotu měl AgeLOC LumiSpa v karuselu
   Akce + Novinka + Tip pod sebou přes třetinu fotky. */
.flags-default .flag ~ .flag {
  display: none !important;
}

/* 4d) KÓD PRODUKTU
   Neschováváme (občas se hodí při reklamaci), jen ho zmenšujeme, ať
   nesoupeří o pozornost s dostupností a tlačítkem do košíku. */
body.type-product .detail-parameter-product-code {
  font-size: 12px !important;
  opacity: 0.62;
}

/* 4e) NADPIS PRODUKTU NA MOBILU
   Na screenshotu zabírá název "Dr. Pepti – Peptide Volume Master Toner…"
   skoro půl obrazovky a cena i tlačítko do košíku spadnou pod ohyb.
   Zmenšujeme ho, aby bylo vidět i to, co vede k nákupu. */
@media (max-width: 767px) {
  body.type-product .p-detail-inner-header h1,
  body.type-product .p-detail-inner-header-mobile h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  body.type-product .p-detail-inner-header,
  body.type-product .p-detail-inner-header-mobile {
    padding-top: 8px !important;
  }
}

/* 4f) DOSTUPNOST A DODÁNÍ VÍC NAPOVRCH
   Dostupnost a datum doručení jsou to, co zákaznice hledá hned po ceně. */
body.type-product .detail-parameter-availability .availability-label {
  font-weight: 700;
}

body.type-product .detail-parameter-delivery-date {
  font-weight: 600;
}


/* ---------------------------------------------------------
   5) VÝPISY PRODUKTŮ  (nové ve verzi 3)
   --------------------------------------------------------- */

/* 5a) KÓD PRODUKTU NA KARTĚ
   Na kartách v karuselu je velké "KÓD: 873" hned nad názvem produktu.
   Zákaznici to nic neříká a soupeří to o pozornost s názvem a cenou.
   Na detailu produktu kód zůstává (jen zmenšený, viz bod 4d). */
.products .product .p-code {
  display: none !important;
}


/* ---------------------------------------------------------
   6) HLAVNÍ BANNER – KONEC OŘEZÁVÁNÍ  (přepsáno ve verzi 4)

   PROBLÉM
   Banner měl napevno danou výšku 360 px a object-fit: cover. Prohlížeč
   proto obrázek natáhl na šířku okna a přebytek uřízl nahoře i dole.
   Na širokém monitoru se tak z banneru 1600 × 400 uřízlo přes 60 px
   a spolu s nimi nadpis a tlačítko.

   ŘEŠENÍ
   Výšku neurčujeme pevně, ale poměrem stran 4:1 – stejným, v jakém
   bannery vyrábíme. Obrázek se tak vždy vejde celý a jeho výška se
   plynule mění se šířkou okna. Žádný ořez.

   PODMÍNKA: bannery musí být 1600 × 400 px (poměr 4:1). Když nahraješ
   banner v jiném poměru, zůstane po stranách proužek pozadí.
   --------------------------------------------------------- */

@media (min-width: 992px) {
  body.type-index #carousel,
  body.type-index .content-wrapper-in > .carousel:first-child,
  body.type-index .content-wrapper > .carousel:first-child,
  body.type-index .content > .carousel:first-child {
    max-height: none !important;
  }

  body.type-index #carousel .carousel-inner,
  body.type-index #carousel .carousel-inner > .item,
  body.type-index #carousel .carousel-inner > .carousel-item,
  body.type-index #carousel .carousel-inner > .item > a,
  body.type-index #carousel .carousel-inner > .carousel-item > a,
  body.type-index .content-wrapper-in > .carousel:first-child .carousel-inner,
  body.type-index .content-wrapper-in > .carousel:first-child .carousel-inner > .item,
  body.type-index .content-wrapper-in > .carousel:first-child .carousel-inner > .carousel-item,
  body.type-index .content-wrapper > .carousel:first-child .carousel-inner,
  body.type-index .content-wrapper > .carousel:first-child .carousel-inner > .item,
  body.type-index .content-wrapper > .carousel:first-child .carousel-inner > .carousel-item,
  body.type-index .content > .carousel:first-child .carousel-inner,
  body.type-index .content > .carousel:first-child .carousel-inner > .item,
  body.type-index .content > .carousel:first-child .carousel-inner > .carousel-item {
    max-height: none !important;
  }

  body.type-index #carousel img,
  body.type-index .content-wrapper-in > .carousel:first-child img,
  body.type-index .content-wrapper > .carousel:first-child img,
  body.type-index .content > .carousel:first-child img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Na mobilu se banner zobrazoval celý už předtím, jen pojistka. */
@media (max-width: 991px) {
  body.type-index #carousel img,
  body.type-index .content-wrapper-in > .carousel:first-child img,
  body.type-index .content-wrapper > .carousel:first-child img,
  body.type-index .content > .carousel:first-child img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


/* ---------------------------------------------------------
   7) RECENZE NA HOMEPAGE  (přepsáno ve verzi 11)

   Dva bloky pod sebou:
   a) "Hodnocení z nákupů v e-shopu" - recenze ze Shoptetu, jedou v pásu
   b) "Hodnocení našich zákazníků na Google" - widget doplňku
      Google Reviews od ShopStack (NE Ellity, ta dělá věrnostní body)

   Cíl: menší karty, první blok lícuje s produkty nad ním, druhý je
   vysazený doprava, oba pod sebou a nic nepřetéká ze stránky.

   LADITELNÁ ČÍSLA
   --np-review-card    šířka jedné recenzní karty (tady níž)
   --np-review-rail    šířka koleje obou bloků (sekce 10)
   --np-review-offset  vysazení Google bloku doprava (sekce 10)
   --------------------------------------------------------- */

body.type-index {
  --np-review-card: 232px;   /* šířka jedné recenzní karty */
}


/* 7a) NADPISY OBOU BLOKŮ  (přepsáno ve verzi 11)

   PROČ TO BYLO DVAKRÁT
   V novaplet-style.css je pravidlo
     .homepage-latest-contribution h2::after { content: "Co říkají naši zákazníci" }
   Od verze 14 skriptu leží Google blok uvnitř téže sekce, takže si ten
   přílepek vzal i jeho nadpis a na stránce byly dva stejné texty za sebou.

   ŘEŠENÍ
   Prvnímu bloku (hodnocení z nákupů) přílepek přepíšeme na vlastní text,
   druhému (Google) ho úplně vypneme - jeho nadpis píše skript.

   CHCEŠ JINÉ ZNĚNÍ PRVNÍHO NADPISU?
   Přepiš text v uvozovkách na řádku, který začíná  content:  hned níž.
   Druhý nadpis se mění v novaplet-final-v16.js na řádku s  var TITLE. */

body.type-index .homepage-latest-contribution .latest-contribution-wrapper h2::after,
body.type-index .homepage-latest-contribution .latest-contribution-wrapper .homepage-group-title::after {
  content: "Hodnocení z nákupů v e-shopu" !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: #2b2b2b !important;
}

/* Shoptet posílá do druhé skupiny prázdný nadpis
   <h2 class="latest-contribution-placeholder">. Ten by dostal stejný
   přílepek a text by byl na stránce dvakrát pod sebou. Schováme ho. */
body.type-index .homepage-latest-contribution .latest-contribution-placeholder {
  display: none !important;
}

/* Google nadpis: žádný přílepek z tématu. */
body.type-index section.np-google-reviews h2::after,
body.type-index .np-gr-title::after {
  content: none !important;
  display: none !important;
}

body.type-index .homepage-latest-contribution h2 {
  grid-column: auto !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}

body.type-index section.np-google-reviews > .np-why-title {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
  color: #2b2b2b !important;
}

@media (max-width: 767px) {
  body.type-index .homepage-latest-contribution .latest-contribution-wrapper h2::after,
  body.type-index .homepage-latest-contribution .latest-contribution-wrapper .homepage-group-title::after,
  body.type-index section.np-google-reviews > .np-why-title {
    font-size: 19px !important;
  }
}


/* 7b) ROZLOŽENÍ OBOU BLOKŮ  (přepsáno ve verzi 10)
   Viz sekce 10 dole - staré pravidlo přetékalo ze stránky. */

/* 7c) PLYNULE JEDOUCÍ PÁS PRODUKTOVÝCH RECENZÍ
   Karty přeskládá do jedné dráhy skript, tady je pohyb a vzhled.
   Pás jede pořád, nezastavuje se. Rychlost se řídí v JS souboru. */

body.type-index .homepage-latest-contribution .latest-contribution-wrapper.np-has-marquee {
  display: block !important;
  overflow: hidden !important;
}

body.type-index .np-review-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 2px 0 4px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

body.type-index .np-review-track {
  display: flex !important;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation-name: np-review-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* ZMĚNA ve verzi 8: pás se nezastavuje ani při najetí myší.
   Kdybys zastavování někdy chtěl zpátky, odkomentuj tenhle blok:

body.type-index .np-review-marquee:hover .np-review-track,
body.type-index .np-review-marquee:focus-within .np-review-track {
  animation-play-state: paused;
}
*/

@keyframes np-review-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--np-review-shift, -50%), 0, 0); }
}


/* 7d) ZMENŠENÍ SAMOTNÝCH KARET
   Karty byly skoro tak velké jako produktové dlaždice a přebíjely je.
   Recenze má být doplněk, ne hlavní obsah stránky. */

body.type-index .np-review-track > .latest-contribution-inner {
  flex: 0 0 var(--np-review-card) !important;
  width: var(--np-review-card) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 12px 16px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  box-shadow: 0 3px 12px rgba(74, 52, 53, 0.05) !important;
}

/* Vnitřek karty srovnáme na jednu velikost, ať téma nepřebíjí. */
body.type-index .np-review-track > .latest-contribution-inner *:not(.star):not(.stars) {
  font-size: inherit !important;
  line-height: 1.4 !important;
}

/* Název produktu necháme o kousek větší, ať je karta čitelná. */
body.type-index .np-review-track > .latest-contribution-inner a,
body.type-index .np-review-track > .latest-contribution-inner strong,
body.type-index .np-review-track > .latest-contribution-inner b {
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

body.type-index .np-review-track > .latest-contribution-inner img {
  max-width: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 8px !important;
}


/* 7e) ZMENŠENÍ GOOGLE WIDGETU
   Vnitřek widgetu řídí ShopStack, můžeme mu ale zmenšit měřítko. */
body.type-index .np-google-reviews #gr-embed-500916-1 {
  font-size: 13px;
}


@media (max-width: 767px) {
  body.type-index {
    --np-review-card: 210px;
  }

  body.type-index .np-review-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.type-index .np-review-track {
    animation: none !important;
  }

  body.type-index .np-review-marquee {
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------
   8) GOOGLE RECENZE VLOŽENÉ SKRIPTEM  (nové ve verzi 7)

   Blok "Hodnocení od našich zákazníků" už není v uvítacím textu.
   Vkládá ho novaplet-final-v14.js hned pod produktové recenze.
   Tady jen dorovnáváme odsazení, aby na to místo sedl.
   --------------------------------------------------------- */

body.type-index section.np-google-reviews {
  display: block;
  margin-top: 14px;   /* konečnou hodnotu určuje sekce 10 */
}

body.type-index section.np-google-reviews > .np-why-title {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  body.type-index section.np-google-reviews {
    margin-top: 18px;
  }
}


/* ---------------------------------------------------------
   9) VLASTNÍ RECENZNÍ KARTY A MEZERA MEZI BLOKY (verze 9)

   Karty se od verze 13 skriptu staví z vlastního seznamu, takže
   nemají obrázek produktu a jsou čistě textové. Tady je jejich vzhled
   a zároveň stažení té velké mezery mezi oběma bloky recenzí.
   --------------------------------------------------------- */

/* 9a) MEZERA - přepsáno ve verzi 10, viz sekce 10. */

/* 9b) TEXTOVÁ RECENZNÍ KARTA */

body.type-index .np-review-card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left !important;
  background: #ffffff !important;
}

body.type-index .np-review-card .latest-contribution-product {
  margin: 0 0 8px !important;
  color: #3b3131 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body.type-index .np-review-card .latest-contribution-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 8px !important;
}

body.type-index .np-review-card .latest-contribution-author {
  font-weight: 600 !important;
  color: #4b3f3f !important;
}

body.type-index .np-review-card .latest-contribution-date {
  color: #8a7d7d !important;
}

body.type-index .np-review-card .np-review-text {
  margin: 0 !important;
  color: #55494a !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

/* Popisek hvězdiček je jen pro čtečky, vidět být nemá. */
body.type-index .np-review-card .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hvězdičky nechat v původní velikosti, jen zarovnat. */
body.type-index .np-review-card .stars {
  display: inline-flex !important;
  align-items: center;
  line-height: 1 !important;
}


/* ---------------------------------------------------------
   10) ZAROVNÁNÍ OBOU BLOKŮ  (přepsáno ve verzi 11)

   CO BYLO ŠPATNĚ VE VERZI 10
   Verze 10 přepisovala šířku a okraje u .homepage-latest-contribution
   a u jeho obalu .homepage-latest-contribution-full-width. Právě těmito
   dvěma prvky dělá Shoptet pruh přes celou šířku okna. Jakmile se jim
   sebraly okraje, pruh se odsunul doprava a vylezl ze stránky.
   K tomu byla šířka počítaná jako calc(délka * procenta), což prohlížeč
   neumí spočítat, takže celé pravidlo zahodil.

   JAK TO JE TEĎ
   Béžový pruh necháváme přesně tak, jak ho dělá téma. Řídíme jen dva
   obsahové bloky uvnitř něj:

   - blok "Hodnocení z nákupů v e-shopu" má stejnou kolej jako produktové
     panely nad ním (1240 px na střed, viz --np-home-width v souboru
     novaplet-home-panel), takže levý kraj přesně lícuje s produkty
   - blok "Hodnocení našich zákazníků na Google" má tutéž kolej, jen je
     zleva odsazený o 12 %, takže pravé kraje obou bloků sedí na sobě
     a vysazení zůstává zachované

   LADITELNÁ ČÍSLA
   --np-review-rail    šířka koleje, musí sedět s --np-home-width
   --np-review-offset  o kolik je Google blok vysazený doprava
   --------------------------------------------------------- */

body.type-index {
  --np-review-rail: 1240px;
  --np-review-offset: 12%;
}

/* Pruh přes celou šířku: sáháme jen na svislé odsazení. */
body.type-index .homepage-latest-contribution {
  padding-top: 34px !important;
  padding-bottom: 32px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

/* Blok 1 - hodnocení z nákupů, lícuje s produkty nad tím */
body.type-index .homepage-latest-contribution .latest-contribution-wrapper {
  box-sizing: border-box !important;
  width: min(var(--np-review-rail), calc(100% - 48px)) !important;
  max-width: var(--np-review-rail) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  float: none !important;
}

/* Blok 2 - Google recenze, stejná kolej, jen vysazená doprava */
body.type-index section.np-google-reviews {
  box-sizing: border-box !important;
  display: block !important;
  width: min(var(--np-review-rail), calc(100% - 48px)) !important;
  max-width: var(--np-review-rail) !important;
  margin: 14px auto 0 !important;
  padding: 0 0 0 var(--np-review-offset) !important;
  transform: none !important;
  float: none !important;
}

body.type-index .homepage-latest-contribution .latest-contribution {
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet a mobil: vysazení nedává smysl, oba bloky na plnou šířku. */
@media (max-width: 991px) {
  body.type-index section.np-google-reviews {
    padding-left: 0 !important;
    margin-top: 18px !important;
  }

  body.type-index .homepage-latest-contribution h2,
  body.type-index section.np-google-reviews > .np-why-title {
    text-align: center !important;
  }
}


/* ---------------------------------------------------------
   11) TLAČÍTKO "PŘEČÍST VŠECHNY RECENZE" (verze 10)

   Vytvoří se jen tehdy, když je v JS souboru vyplněná adresa
   NP_REVIEWS_URL. Do té doby se nezobrazí a nic nechybí.
   --------------------------------------------------------- */

body.type-index .np-all-reviews-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

body.type-index .np-all-reviews-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #c89587;
  border-radius: 999px;
  background: transparent;
  color: #7b4f46 !important;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.type-index .np-all-reviews-button:hover,
body.type-index .np-all-reviews-button:focus-visible {
  background: #c89587;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  body.type-index .np-all-reviews-row {
    justify-content: center;
  }
}


/* ---------------------------------------------------------
   12) PROKLIKÁVACÍ DLAŽDICE GOOGLE RECENZE (verze 10)
   --------------------------------------------------------- */

body.type-index .np-rating-tile-link {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: 10px;
  transition: transform 0.18s ease;
}

body.type-index .np-rating-tile-link:hover {
  transform: translateY(-2px);
}

body.type-index .np-rating-tile-link:focus-visible {
  outline: 2px solid #c89587;
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   13) KONTAKTNÍ LIŠTA NAD HLAVIČKOU I NA MOBILU (verze 12)

   PROČ TO BYLO ŠPATNĚ
   Na počítači je pruh s telefonem a e-mailem nad lištou s logem.
   Na mobilu byl pod ní. Lišta je v kódu před hlavičkou správně, jenže
   Shoptet má na mobilu hlavičku přišpendlenou k hornímu okraji okna
   (tělo stránky má body class mobile-header-version-1) a obsah o její
   výšku odsazený, takže náš pruh v běžném toku spadl až pod ni.

   JAK TO JE TEĎ
   Skript novaplet-final-v16.js na mobilu zjistí, že hlavička opravdu
   je position: fixed, přišpendlí i kontaktní lištu, posadí ji přesně
   tam, kde hlavička začínala, a hlavičku i obsah posune o výšku lišty
   dolů. Souřadnice počítá skript, tady je jen samotné přišpendlení.

   Na počítači tahle sekce nic nedělá.
   --------------------------------------------------------- */

@media (max-width: 991px) {
  body.np-contact-pinned #np-contact-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}