/* =========================================================
   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-v10.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 6)

   Dva bloky pod sebou:
   a) "Co říkají naši zákazníci" - produktové recenze ze Shoptetu
   b) "Hodnocení od našich zákazníků" - Google recenze z widgetu Ellity

   Cíl: menší karty, každý blok vysazený na jinou stranu, oba pod sebou.

   VŠECHNA LADITELNÁ ČÍSLA JSOU TADY NAHOŘE.
   Chceš karty větší nebo menší? Změň --np-review-card.
   Chceš větší nebo menší vysazení? Změň --np-review-width.
   --------------------------------------------------------- */

body.type-index {
  --np-review-card: 232px;   /* šířka jedné recenzní karty */
  --np-review-width: 64%;    /* šířka obou bloků (100 % = celá stránka) */
  --np-review-edge: 5%;      /* odsazení od kraje stránky */
}


/* 7a) VELIKOST NADPISŮ
   Nadpis "Co říkají naši zákazníci" se vykresluje přes ::after
   (tak to má novaplet-style.css), proto se velikost mění tam. */
body.type-index .homepage-latest-contribution h2::after,
body.type-index .latest-contribution-box .homepage-group-title::after {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

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

body.type-index .np-google-reviews > .np-why-title {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin: 0 0 16px !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  body.type-index .homepage-latest-contribution h2::after,
  body.type-index .latest-contribution-box .homepage-group-title::after,
  body.type-index .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í Ellity, můžeme mu ale zmenšit celkové 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: 34px;
}

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: 24px;
  }
}


/* ---------------------------------------------------------
   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;
}

/* 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) RECENZNÍ PRUH: VYCENTROVAT A ZASTAVIT PŘETÉKÁNÍ (verze 10)

   PROBLÉM VE VERZI 9
   Oba bloky se odsazovaly od krajů okna procenty. Google blok navíc
   skript vkládal do full-width obalu béžového pruhu, takže vyčníval
   mimo stránku a vznikl vodorovný posuvník - to je ta rozbitá věc
   na screenshotu.

   ŘEŠENÍ
   Zavádíme neviditelnou středovou kolej širokou 1240 px. Oba bloky
   jsou uvnitř ní, jen každý u jiného kraje. Celek je tak vycentrovaný
   na stránce a přetéct nemůže, protože nikdo nesahá mimo kolej.
   --------------------------------------------------------- */

body.type-index {
  --np-rail: min(1240px, calc(100% - 48px));
  --np-rail-gap: calc((100% - var(--np-rail)) / 2);
  --np-block: 88%;   /* šířka bloku uvnitř koleje = míra vysazení */
}

body.type-index .homepage-latest-contribution-full-width {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body.type-index .homepage-latest-contribution {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 30px 0 32px !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Produktové recenze - u levého kraje koleje */
body.type-index .homepage-latest-contribution .latest-contribution-wrapper {
  box-sizing: border-box !important;
  width: calc(var(--np-rail) * var(--np-block)) !important;
  max-width: calc(var(--np-rail) * var(--np-block)) !important;
  margin: 0 auto 0 var(--np-rail-gap) !important;
  padding: 0 !important;
  transform: none !important;
}

/* Google recenze - u pravého kraje koleje */
body.type-index section.np-google-reviews {
  box-sizing: border-box !important;
  width: calc(var(--np-rail) * var(--np-block)) !important;
  max-width: calc(var(--np-rail) * var(--np-block)) !important;
  margin: 26px var(--np-rail-gap) 0 auto !important;
  transform: none !important;
}

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

/* Na tabletu a mobilu vysazení nedává smysl - obojí na plnou šířku. */
@media (max-width: 991px) {
  body.type-index {
    --np-block: 100%;
  }

  body.type-index .homepage-latest-contribution .latest-contribution-wrapper,
  body.type-index section.np-google-reviews {
    margin-left: auto !important;
    margin-right: auto !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: 16px;
}

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;
}