/* galpomoda.cz — vlastní styly */
/* verze 100 — filtr: písmenkové velikosti skryté */

/* ---------- 1. Proměnné ---------- */

:root {
  --gp-bg:        #FFFFFF;
  --gp-muted-1:   #F5F2ED;
  --gp-muted-2:   #F7F4EF;
  --gp-text:      #211E1A;
  --gp-text-2:    #6E675E;
  --gp-text-3:    #8B847A;
  --gp-line:      #E4DFD7;
  --gp-accent:    #A98A66;
  --gp-accent-tx: #8F7352;
  --gp-dark:      #211E1A;
}

/* ---------- 2. Písma ---------- */

body,
input, button, select, textarea,
.btn, .product .name, .p-detail {
  font-family: 'Karla', sans-serif !important;
  font-size: 17px;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500;
}

/* ---------- 3. Hero blok ---------- */

.gp-hero {
  display: flex !important;
  min-height: 620px;
  background: var(--gp-muted-1);
  margin-bottom: 24px;
  text-align: left;
}

/* Plocha 560 × 620 na počítači, celá šířka × 320 px na mobilu.
   Fotka 1120 × 1240 px, JPG, poměr 0,903. Na počítači se neořezává.
   Mobilní ořez řeší pravidlo v sekci 7. */
.gp-hero__media {
  flex: 0 0 560px;
  background-color: var(--gp-muted-1);
  background-image: url('/user/documents/upload/hero.jpg?v=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gp-hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
  background: var(--gp-muted-1);
}

.gp-hero__kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-accent-tx);
  margin: 0 0 20px;
}

.gp-hero__title {
  font-size: 52px;
  line-height: 1.15;
  color: var(--gp-text);
  margin: 0 0 20px;
  max-width: 15em;
}

.gp-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gp-text-2);
  margin: 0 0 36px;
  max-width: 34em;
}

.gp-hero__lead strong {
  font-weight: 600;
  color: var(--gp-text);
}

.gp-hero__label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-3);
  margin: 0 0 14px;
}

/* ---------- 4. Velikostní dlaždice ---------- */

.gp-sizes {
  display: grid !important;
  grid-template-columns: repeat(5, 68px);
  gap: 10px;
  margin-bottom: 32px;
}

.gp-size {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 56px;
  border: 1px solid var(--gp-line);
  background: var(--gp-bg);
  color: var(--gp-text) !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s;
}

.gp-size:hover,
.gp-size:focus {
  background: var(--gp-dark);
  border-color: var(--gp-dark);
  color: #FFFFFF !important;
}

/* ---------- 5. Tlačítko ---------- */

.gp-hero__btn {
  align-self: flex-start;
  padding: 15px 34px;
  background: var(--gp-accent);
  color: #FFFFFF !important;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s;
}

.gp-hero__btn:hover,
.gp-hero__btn:focus {
  background: var(--gp-accent-tx);
}

/* ---------- 6. Tři bannery ---------- */

.gp-bands {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}

/* Plocha zhruba 470 × 200. Doporučená fotka 940 × 400 px, JPG. */
.gp-band {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  height: 200px;
  padding: 28px 32px;
  overflow: hidden;
  text-decoration: none !important;
  transition: opacity .15s, background .15s, border-color .15s;
}

.gp-band__body,
.gp-band__link {
  position: relative;
  z-index: 1;
  display: block;
}

.gp-band__link {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}

.gp-band__title {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 6px;
}

.gp-band__sub {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}

/* Dlaždice Podzimní kolekce. V HTML má třídu gp-band--promo, ne
   gp-band--photo, proto se fotka nasazuje tady. Akcentní barva zůstává
   jako podklad pro dobu, než se fotka načte. */
.gp-band--promo {
  background-color: var(--gp-accent);
  background-image: url('/user/documents/upload/banner-kolekce.jpg?v=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF !important;
}

.gp-band--promo .gp-band__sub {
  color: rgba(255, 255, 255, 0.9);
}

/* Tmavý překryv, stejná hodnota jako u fotkových dlaždic. */
.gp-band--promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 30, 26, 0.45);
  z-index: 0;
}

/* Hover nesmí přepsat background, jinak by fotka zmizela. */
.gp-band--promo:hover,
.gp-band--promo:focus {
  opacity: 0.92;
}

.gp-band--photo {
  background-color: var(--gp-accent);
  background-size: cover;
  background-position: center;
  color: #FFFFFF !important;
}

.gp-band--photo .gp-band__sub {
  color: rgba(255, 255, 255, 0.9);
}

.gp-band--photo:hover,
.gp-band--photo:focus {
  background-color: var(--gp-accent-tx);
}

/* ============================================================
   FOTKY DLAŽDIC — nasazeno ve v81.
   Fotka 1000 × 440 px. Levá třetina fotky musí být klidná,
   jde přes ni bílý nadpis.
   ============================================================ */

.gp-band--vyprodej {
  background-image: url('/user/documents/upload/banner-vyprodej.jpg?v=1');
}

.gp-band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 30, 26, 0.45);
  z-index: 0;
}

.gp-band--photo:hover,
.gp-band--photo:focus {
  opacity: 0.92;
}

.gp-band--service {
  background: var(--gp-muted-1);
  border: 1px solid var(--gp-line);
  color: var(--gp-text) !important;
}

.gp-band--service .gp-band__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
}

.gp-band--service .gp-band__sub {
  color: var(--gp-text-2);
}

.gp-band--service .gp-band__link {
  color: var(--gp-accent-tx);
}

.gp-band--service:hover,
.gp-band--service:focus {
  background: var(--gp-muted-2);
  border-color: var(--gp-accent);
}

.gp-band__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--gp-accent);
}

/* ---------- 6b. Hlavička sekce na hlavní straně ---------- */
/* Shoptet vykresluje skupinu produktů jako záložku v liště
   `responsive-nav`. Ta má vlastní JS, který měří šířku položek
   a co se nevejde, odklidí do skryté nabídky. Záložku proto
   NELZE stylovat. Obsah lišty se skryje a nadpis i podnadpis
   se vypíšou odsud.

   POZOR: text nadpisu i podnadpisu je tady, ne v administraci.

   POZOR 2: `.shp-tabs-row` používá Step i pro záložky na
   detailu produktu. Bez omezení na `.homepage-tabs-wrapper`
   se nadpis vypsal i tam a záložky Popis / Hodnocení zmizely.
   Selektor se nesmí odzávorkovat. */

.homepage-tabs-wrapper .shp-tabs-row {
  display: block !important;
  position: relative;
  border: 0 !important;
  border-bottom: 1px solid var(--gp-line) !important;
  background: none !important;
  margin: 24px 0 32px !important;
  padding: 0 0 20px !important;
  text-align: left !important;
}

.homepage-tabs-wrapper .shp-tabs-row > * {
  display: none !important;
}

.homepage-tabs-wrapper .shp-tabs-row::before {
  content: "Nové modely";
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--gp-text);
}

.homepage-tabs-wrapper .shp-tabs-row::after {
  content: "Přidáno tento týden. V limitované sérii.";
  display: block;
  margin-top: 8px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gp-text-2);
}

/* Odkaz vpravo v hlavičce sekce. Doplňuje ho skript
   `sekce-odkaz.html` v Návrháři → Zápatí BODY. */
.homepage-tabs-wrapper .shp-tabs-row > .gp-section-link {
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 20px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-accent-tx) !important;
  text-decoration: none !important;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gp-accent-tx);
}

.homepage-tabs-wrapper .shp-tabs-row > .gp-section-link:hover {
  color: var(--gp-text) !important;
  border-bottom-color: var(--gp-text);
}

/* ---------- 6c. Příběhový blok ---------- */
/* HTML je v `pribehovy-blok.html`, vloženo jako TEXTOVÝ banner
   do prvku **Banner: Zápatí**. Ten prvek je stavěný na mřížku
   log, takže každý banner dostane úzký sloupec — proto se
   obalové vrstvy rozšiřují na plnou šířku. */

.footer-banners,
.footer-banners > div,
.footer-banners > div > div,
.footer-banners .banner-wrapper > div {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

.gp-story {
  display: flex !important;
  align-items: stretch;
  min-height: 460px;
  width: 100%;
  background: var(--gp-muted-1);
  margin: 24px 0 56px;
  text-align: left;
}

.gp-story__content {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}

/* Plocha zhruba 40 % šířky × 460 px, na mobilu celá šířka × 260 px.
   Fotka 1200 × 1000 px, JPG. Motiv patří doprostřed, mobil ořezává
   shora i zdola. */
.gp-story__media {
  flex: 0 0 40%;
  background-color: var(--gp-muted-1);
  background-image: url('/user/documents/upload/pribeh.jpg?v=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gp-story__kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-accent-tx);
  margin: 0 0 20px;
}

.gp-story__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--gp-text);
  margin: 0 0 24px;
  max-width: 14em;
}

.gp-story__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gp-text-2);
  margin: 0 0 36px;
  max-width: 32em;
}

.gp-story__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
}

.gp-story__btn {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--gp-dark);
  background: transparent;
  color: var(--gp-text) !important;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.gp-story__btn:hover,
.gp-story__btn:focus {
  background: var(--gp-dark);
  color: #FFFFFF !important;
}

.gp-story__link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gp-accent-tx);
  color: var(--gp-accent-tx) !important;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color .15s, border-color .15s;
}

.gp-story__link:hover,
.gp-story__link:focus {
  color: var(--gp-text) !important;
  border-bottom-color: var(--gp-text);
}

/* ---------- 6d. Pruhy výhod ---------- */
/* Dva pruhy se stejným stylem:
   `pruh-vyhod.html`  → Banner: Střed, nad produkty, servisní jistoty
   `pruh-hodnot.html` → Banner: Zápatí, pod příběhem, hodnoty značky

   Mění to `vizualni_system.md` bod 6, kde byl jen jeden pruh dole. */

.banners-content.body-banners,
.banners-content.body-banners > div,
.banners-content.body-banners > div > div {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

.gp-perks {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
  background: var(--gp-muted-2);
  padding: 34px 40px;
  margin: 0 0 48px;
}

.gp-perks--values {
  margin: 0;
}

.gp-perk {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gp-perk__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gp-accent);
  border-radius: 50%;
  color: var(--gp-accent);
}

.gp-perk__icon svg {
  width: 22px;
  height: 22px;
}

.gp-perk__body {
  display: block;
  padding-top: 2px;
}

.gp-perk__title {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gp-text);
  margin-bottom: 6px;
}

.gp-perk__sub {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gp-text-2);
}

/* ---------- 6e. Patička ---------- */
/* Čtyři sloupce jsou čtyři TEXTOVÉ bannery v prvku Patička.
   Nativní sekce Kontakty a Menu box Informace pro vás jsou
   v Návrháři odebrané — vykreslovaly by se před bannery a
   pořadí by nesedělo návrhu.

   Mění to `vizualni_system.md` bod 6 (obsah sloupců). */

#footer,
.footer {
  background: var(--gp-dark) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-top: 0 !important;
  padding-top: 56px !important;
}

#footer h1, #footer h2, #footer h3, #footer h4,
.footer h1, .footer h2, .footer h3, .footer h4 {
  color: #FFFFFF !important;
}

#footer a,
.footer a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: color .15s;
}

#footer a:hover,
.footer a:hover {
  color: #FFFFFF !important;
}

/* oddělovací linka a copyright dole */
#footer hr,
.footer hr,
#footer .footer-bottom,
.footer .footer-bottom,
#footer [class*="copyright"],
.footer [class*="copyright"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

#footer .footer-bottom a,
.footer .footer-bottom a,
#footer [class*="copyright"] a,
.footer [class*="copyright"] a {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* sloupce patičky.
   Bannery dostávají od Stepu `col-sm-6 col-lg-3`, takže čtyři
   vedle sebe jsou až nad 1200 px. Níž se lámou na 2×2.
   Tímhle jsou čtvrtinové už od 768 px. */

@media (min-width: 768px) {
  .row.custom-footer > [class*="custom-footer__banner"] {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
}

.gp-foot {
  text-align: left;
}

.gp-foot__brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.gp-foot__about {
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.gp-foot__title {
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 20px;
}

.gp-foot__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gp-foot__list li {
  margin: 0 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

.gp-foot__list li::before {
  content: none !important;
}

.gp-foot__list a {
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- 7. Mobil ---------- */

@media (max-width: 767px) {

  .gp-hero {
    flex-direction: column;
    min-height: 0;
  }

  /* Na mobilu je vidět jen 77 % výšky fotky. Při výchozím center
     se ořízne 11,6 % nahoře a modelce zmizí temeno hlavy.
     Proto se ořez bere celý zdola. */
  .gp-hero__media {
    flex: none;
    height: 320px;
    background-position: center top;
  }

  .gp-hero__content {
    padding: 32px 20px;
  }

  .gp-hero__title {
    font-size: 32px;
  }

  .gp-hero__lead {
    font-size: 17px;
    margin-bottom: 28px;
  }

  .gp-sizes {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .gp-size {
    height: 52px;
    font-size: 17px;
  }

  .gp-hero__btn {
    align-self: stretch;
    text-align: center;
  }

  .gp-bands {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 40px;
  }

  .gp-band {
    height: auto;
    min-height: 130px;
    padding: 22px 20px;
  }

  .gp-band__title {
    font-size: 26px;
  }

  .gp-band--service .gp-band__title {
    font-size: 22px;
  }

  .gp-band__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
  }

  .shp-tabs-row::before {
    font-size: 28px;
  }

  .shp-tabs-row > .gp-section-link {
    position: static;
    margin-top: 14px;
  }

  .product .name,
  .p .name {
    font-size: 17px !important;
    min-height: 0 !important;
  }

  .gp-story {
    flex-direction: column-reverse;
    min-height: 0;
    margin-bottom: 40px;
  }

  .gp-story__media {
    flex: none;
    height: 260px;
  }

  .gp-story__content {
    padding: 32px 20px;
  }

  .gp-story__title {
    font-size: 27px;
  }

  .gp-story__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .gp-story__btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }

  .gp-story__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .gp-perks {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 20px;
    margin-bottom: 32px;
  }

  #footer,
  .footer {
    padding-top: 36px !important;
  }

  .gp-foot {
    margin-bottom: 32px;
  }

  .gp-foot__list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ---------- 8. Výpis produktů ---------- */

/* Popisek pod dlaždicí pryč — nafukuje mřížku */
.products-block .p-desc,
.product .p-desc,
.p .p-desc {
  display: none !important;
}

/* --- fotka v poměru 2:3 --- */

.products-block .image,
.products .image,
.product .image,
.p .image {
  display: block !important;
  position: relative;
  width: 100% !important;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--gp-muted-2);
}

.products-block .image img,
.products .image img,
.product .image img,
.p .image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top;
}

/* --- dlaždice bez rámečku, text vlevo, mezera mezi řadami --- */

.products-block .product,
.products .product,
.products-block .p,
.products .p {
  border: 0 !important;
  text-align: left !important;
  margin-bottom: 44px !important;
}

/* Vynulovat veškeré vnitřní odsazení, aby název, dostupnost
   i cena začínaly na stejné svislici jako fotka. */
.products-block .p-in,
.products .p-in,
.products-block .p-in-in,
.products .p-in-in,
.products-block .p-bottom,
.products .p-bottom {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tlačítko Detail v dlaždici pryč, celá dlaždice je odkaz */
.products-block .p-tools,
.products .p-tools {
  display: none !important;
}

/* Název produktu.
   Pevná výška dvou řádků drží dostupnost a cenu na stejné
   lince napříč celou mřížkou, i když má jeden název delší. */
.product .name,
.p .name {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  min-height: 2.5em;
  color: var(--gp-text) !important;
  font-weight: 500 !important;
  margin: 14px 0 4px !important;
  padding: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
}

/* Dostupnost.
   POZOR: na `.availability span` se nesmí dávat `display`.
   Skript `dostupnost.html` u posledního kusu počet schovává
   inline stylem a `!important` v CSS by ho přebil — počet by
   se vrátil zpátky a spadl na vlastní řádek. */
.availability,
.availability-label {
  display: block !important;
  color: var(--gp-text-2) !important;
  font-size: 14px !important;
  font-weight: 400;
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.availability span {
  color: var(--gp-text-2);
  font-size: 14px;
  font-weight: 400;
}

/* Poslední kus nese akcentní barvu záměrně */
.availability .availability-amount,
.availability [class*="last"],
.availability-label[title*="Poslední"],
.availability span[class*="poslední"] {
  color: var(--gp-accent-tx) !important;
}

/* Cena.
   Šablona jí dává vlastní vnitřní odsazení, které ji posouvalo
   doprava proti názvu. Vynulováno. */
.products-block .prices,
.products .prices,
.p .prices,
.product .prices {
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.price-final,
.product .price,
.prices .price,
.prices strong {
  display: inline-block !important;
  color: var(--gp-text) !important;
  font-weight: 600;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.price-standard,
.price-additional {
  color: var(--gp-text-3) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Štítky Novinka / Akce / Tip */
.flag,
.flags .flag {
  background: var(--gp-dark) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0 !important;
}

.flag::before,
.flag::after,
.flags .flag::before,
.flags .flag::after {
  border-color: var(--gp-dark) transparent !important;
}

.flag-action,
.flag.flag-action {
  background: var(--gp-accent) !important;
}

.flag-action::before,
.flag-action::after {
  border-color: var(--gp-accent) transparent !important;
}

/* Bublina se slevou */
.price-save,
.flag-discount,
.appendix-discount,
[class*="discount-bubble"] {
  background: var(--gp-dark) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500;
}

/* ---------- 9. Hlavička ---------- */
/* Logo je obrázek nahraný v Návrháři → Záhlaví → Logo.

   Do 31. 8. tu bylo dočasné textové logo psané přes `::after`.
   Nahradilo ho skutečné logo klientky. */

#header,
.navigation-wrapper {
  background: var(--gp-bg) !important;
}

.site-name a[data-testid="linkWebsiteLogo"] {
  display: inline-block !important;
  text-decoration: none !important;
}

.site-name a[data-testid="linkWebsiteLogo"] img {
  display: block !important;
  height: 54px;
  width: auto;
  max-width: none;
}

@media (max-width: 767px) {
  .site-name a[data-testid="linkWebsiteLogo"] img {
    height: 42px;
  }
}

/* --- tlačítka v hlavičce: hledání, přihlášení, košík --- */
/* Háčky jsou `data-testid`, ty Step nemění.

   POZOR: na `a[data-testid="headerCart"]` se nesmí sahat na
   `::after` — třída `cart-count` jím nejspíš vykresluje počet
   kusů v košíku. Proto tam není doplněné slovo „Košík". */

.navigation-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

/* ⛔ POPISKY V HLAVIČCE NEJDOU. NEZKOUŠET ZNOVU.

   Návrh má u tlačítek slova Hledat / Přihlásit / Košík.
   Step si šířku prvku #navigation počítá vlastním skriptem a
   nastaví ji napevno (nav dostane třídu `fitted`). Počítá ji
   dřív, než se popisky vykreslí, takže menu si vezme místo,
   které patří tlačítkům, a košík přeteče přes okraj.

   Zkoušeno: zúžení prvků, `flex-shrink`, vyvolání `resize`
   po načtení i po načtení písem. Nepomohlo nic — nav má šířku
   nastavenou napevno a nezmenší se.

   Zůstávají samotné ikony. Košík si drží tmavé tlačítko. */

/* Hledání */
.navigation-buttons a[data-testid="linkSearchIcon"] {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex: 0 0 auto;
  width: 44px;
  padding: 0;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  color: var(--gp-text) !important;
  text-decoration: none !important;
  transition: color .15s;
}

.navigation-buttons a[data-testid="linkSearchIcon"]:hover {
  color: var(--gp-accent-tx) !important;
}


/* Přihlášení — ikona je bez textu, popisek se doplňuje */
.navigation-buttons .top-nav-button-login {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0 !important;
  background: transparent !important;
  color: var(--gp-text) !important;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
}


/* Košík — tmavé tlačítko.
   Počet kusů Step nevykresluje přes `::after`, ověřeno,
   takže je pseudoelement volný pro popisek. */
.navigation-buttons a[data-testid="headerCart"] {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 16px;
  background: var(--gp-accent) !important;
  color: #FFFFFF !important;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  text-decoration: none !important;
  transition: background .15s;
}


.navigation-buttons a[data-testid="headerCart"]:hover {
  background: var(--gp-accent-tx) !important;
}

/* ⛔ HLAVIČKA ZŮSTÁVÁ NA JEDNOM ŘÁDKU. NEZKOUŠET ZNOVU.

   Návrh má hlavičku ve dvou řádcích — logo a tlačítka nahoře,
   menu pod nimi přes celou šířku. Zkoušeno dvakrát:

   1. flex `order` + `flex-basis: 100 %` na #navigation
   2. totéž plus skript, který po načtení vyvolal `resize`,
      aby si Step menu přeměřil v nové šířce

   Obojí skončilo stejně: Step sbalil všechny položky menu do
   nabídky „Více" a ta se položila přes logo. Jeho měřicí
   skript si drží vlastní představu o šířce kontejneru a
   nedá se přesvědčit ani vynuceným přeměřením.

   Je to stejná mechanika, která zabila štítek velikosti na
   dlaždici a stylování záložek produktů.

   Pokud se to bude někdy řešit znovu, jediná zbývající cesta
   je přesunout #navigation v DOM javascriptem do vlastního
   kontejneru pod hlavičkou — ne přes CSS. */


/* --- horní lišta nad hlavičkou --- */
/* Záhlaví v Návrháři má jen Logo a Menu, pole pro informační
   lištu tam není. Proužek vkládá skript `horni-lista.html`
   v Zápatí BODY před <header>. Texty se mění tam, ne tady. */

.gp-topbar {
  width: 100%;
  background: var(--gp-dark);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.gp-topbar__in {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 11px 20px;
}

.gp-topbar__item {
  display: inline-block;
}

/* WhatsApp odsazený doprava, stejná barva jako zbytek lišty */
.gp-topbar__link {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

.gp-topbar__link:hover {
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF;
}

@media (max-width: 767px) {
  .gp-topbar__in {
    gap: 14px;
    padding: 9px 16px;
    font-size: 13px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* na mobilu se vejde jen doprava a WhatsApp */
  .gp-topbar__item:nth-child(2) {
    display: none;
  }

  .gp-topbar__link {
    margin-left: 0;
  }
}

/* ---------- 10. Detail produktu ---------- */

/* --- tabulka rozměrů --- */
/* Vykresluje ji skript `rozmery.html` v Zápatí BODY z popisných
   parametrů produktu (Rozměry M (40-42) → 108/76/42/60).
   Řádky s rozměry se v tabulce parametrů dole schovávají. */

.gp-dims {
  background: var(--gp-muted-1);
  margin: 24px 0;
  padding: 20px 24px;
}

.gp-dims__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

.gp-dims__title {
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-text);
}

.gp-dims__note {
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  color: var(--gp-text-3);
}

.gp-dims__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gp-line);
}

/* Počet sloupců podle toho, kolik čísel klientka zapsala.
   U rovného střihu pas splývá s prsy a boky a nezapisuje se. */
.gp-dims__grid--3 { grid-template-columns: repeat(3, 1fr); }
.gp-dims__grid--2 { grid-template-columns: repeat(2, 1fr); }
.gp-dims__grid--1 { grid-template-columns: 1fr; }

.gp-dims__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--gp-muted-1);
}

.gp-dims__label {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  color: var(--gp-text-2);
}

.gp-dims__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  color: var(--gp-text);
}

.gp-dims__hint {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--gp-text-2);
}

@media (max-width: 767px) {
  .gp-dims {
    padding: 18px 16px;
  }

  .gp-dims__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-dims__value {
    font-size: 21px;
  }
}

/* --- Tisk / Zeptat se / Sdílet pryč --- */
/* V návrhu na detailu nejsou. Sdílení řeší prohlížeč,
   dotaz na produkt řeší WhatsApp box, tisk nikdo nepoužívá. */

.social-buttons-wrapper {
  display: none !important;
}

/* --- značka nad názvem --- */
/* Přesouvá ji skript, blok 5 v `galpo.js`.
   Původní řádek v tabulce parametrů se schová. */

.gp-brand {
  display: block;
  margin: 0 0 10px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-accent-tx) !important;
  text-decoration: none !important;
  transition: color .15s;
}

a.gp-brand:hover {
  color: var(--gp-text) !important;
}

/* --- galerie: miniatury svisle vlevo --- */
/* Step má miniatury vodorovně pod fotkou jako posuvník se
   šipkami; posun píše inline stylem `left: 0px` na
   `.p-thumbnails-inner`. Přepnutí na svislý sloupec proto
   potřebuje `!important` — ten inline styl přebije.

   Šipky se schovávají, ve sloupci nemají smysl.
   Na mobilu zůstává původní vodorovné řešení. */

@media (min-width: 768px) {

  .p-detail .p-image-wrapper {
    display: flex !important;
    align-items: stretch;
    gap: 16px;
  }

  /* hlavní fotka vpravo */
  .p-detail .p-image-wrapper > .p-image {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* pruh miniatur vlevo */
  /* Sloupec se roztáhne na výšku hlavní fotky. */
  .p-detail .p-image-wrapper > .row {
    order: 1;
    flex: 0 0 92px;
    width: 92px;
    margin: 0 !important;
    display: flex !important;
    align-self: stretch;
  }

  .p-detail .p-thumbnails-wrapper {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    display: flex !important;
    min-height: 0;
  }

  /* Sloupec končí přesně tam, kde hlavní fotka. Co se nevejde,
     doroluje se. Bez toho by u kusu se šesti fotkami přerostl. */
  .p-detail .p-thumbnails {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  .p-detail .p-thumbnails::-webkit-scrollbar {
    width: 4px;
  }

  .p-detail .p-thumbnails::-webkit-scrollbar-thumb {
    background: var(--gp-line);
  }

  .p-detail .p-thumbnails-inner {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    display: block !important;
  }

  .p-detail .p-thumbnails-inner > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    width: 100% !important;
  }

  .p-detail .p-thumbnail {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid transparent;
    transition: border-color .15s;
  }

  .p-detail .p-thumbnail.highlighted {
    border-color: var(--gp-accent);
  }

  .p-detail .p-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* prázdné odkazy pro lightbox a šipky posuvníku */
  .p-detail a.cbox-gal,
  .p-detail .thumbnail-prev,
  .p-detail .thumbnail-next {
    display: none !important;
  }
}

/* --- WhatsApp box pod tlačítkem --- */
/* Vkládá ho skript, blok 6 v `galpo.js`. */

.gp-wa {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  margin: 20px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--gp-line);
  background: var(--gp-bg);
  color: var(--gp-text) !important;
  text-decoration: none !important;
  transition: border-color .15s, background .15s;
}

.gp-wa:hover,
.gp-wa:focus {
  border-color: var(--gp-accent);
  background: var(--gp-muted-2);
}

.gp-wa__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--gp-accent);
}

.gp-wa__body {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gp-text-2);
}

.gp-wa__title {
  font-weight: 700;
  color: var(--gp-text);
}

/* --- cena a tlačítko do košíku --- */
/* Struktura ověřena inspektorem 12. 8.:

   div.p-to-cart-block
     div.p-final-price-wrapper      ← přeškrtnutá cena, sleva, cena
     div.p-add-to-cart-wrapper
       div.add-to-cart              ← flex, píše ho Step
         span.quantity
         button.btn.btn-conversion.add-to-cart-button
   a.gp-wa                          ← vkládá skript, blok 6

   Tři opravy proti v48:
   1. Wrappery měly z šablony vlastní výšku a odsazení. Tlačítko
      vyšší než wrapper z něj vyteklo a leželo na WhatsApp boxu.
      Proto `height: auto` a vynulované padding/margin.
   2. Cenový řádek se vykresloval na jedné řádce a přeškrtnutá
      cena s bublinou slevy zajížděly do velké ceny. Teď je to
      mřížka: nahoře stará cena a sleva, pod nimi cena.
   3. Linka přes cenu byl rámeček wrapperu. Ruší se a nahrazuje
      vlastní linkou nad celým blokem. */

.p-detail .p-to-cart-block {
  display: block !important;
  width: 100%;
  height: auto !important;
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--gp-line) !important;
  box-shadow: none !important;
}

/* --- cenový řádek --- */

.p-detail .p-final-price-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  float: none !important;
}

.p-detail .p-final-price-wrapper > * {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* stará cena a bublina slevy nahoře vedle sebe */
.p-detail .p-final-price-wrapper .price-standard {
  order: 1;
  font-family: 'Karla', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--gp-text-3) !important;
  text-decoration: line-through;
}

.p-detail .p-final-price-wrapper .price-save,
.p-detail .p-final-price-wrapper .flag-discount,
.p-detail .p-final-price-wrapper [class*="discount"] {
  order: 2;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  padding: 3px 8px !important;
  background: var(--gp-dark) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2;
}

/* cena na vlastní řádek pod nimi */
.p-detail .p-final-price-wrapper .price-final {
  order: 3;
  flex: 0 0 100%;
}

.p-detail .price-final,
.p-detail .price-final strong,
.p-detail .price-final span {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--gp-text) !important;
}

/* měrná cena a cena bez DPH pod ni, drobným */
.p-detail .price-additional,
.p-detail .price-measure {
  order: 4;
  flex: 0 0 100%;
  font-family: 'Karla', sans-serif !important;
  font-size: 13px !important;
  color: var(--gp-text-3) !important;
}

/* --- tlačítko do košíku --- */
/* Wrappery se jen zprůhlední: žádná vlastní výška, žádné
   odsazení. Bez toho tlačítko přeteče na WhatsApp box. */

.p-detail .p-add-to-cart-wrapper {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

.p-detail .add-to-cart {
  display: flex !important;
  align-items: stretch;
  gap: 10px;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* počet kusů pryč — 91 % variant má jediný kus */
.p-detail .add-to-cart .quantity,
.p-detail .p-to-cart-block .quantity,
.p-detail .p-to-cart-block .quantity-wrapper,
.p-detail .p-to-cart-block .increase,
.p-detail .p-to-cart-block .decrease {
  display: none !important;
}

.p-detail .add-to-cart-button,
.p-detail .add-to-cart .btn-conversion,
.p-detail .add-to-cart .btn {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 58px;
  margin: 0 !important;
  padding: 0 24px !important;
  background: var(--gp-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background .15s;
}

.p-detail .add-to-cart-button:hover,
.p-detail .add-to-cart .btn-conversion:hover,
.p-detail .add-to-cart .btn:hover {
  background: var(--gp-accent-tx) !important;
}

/* ikona košíku v tlačítku */
.p-detail .add-to-cart-button::before,
.p-detail .add-to-cart .btn-conversion::before {
  margin-right: 10px;
}

/* WhatsApp box nesmí nikdy podlézt tlačítko */
.p-detail .gp-wa {
  clear: both;
  position: relative;
  z-index: 1;
}

/* --- tabulka parametrů dole na detailu --- */
/* Řádky Kategorie, EAN a Velikost odklízí skript, blok 7.
   Zbývají materiály. Ve fázi 5 je nahradí čtyři sloupce
   Materiál / Střih / Komu sedne / Údržba a celý blok zmizí. */

.p-detail .p-param-block {
  width: 100%;
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--gp-line);
}

.p-detail .detail-parameters-wrapper {
  width: 100%;
}

.p-detail .gp-params {
  width: 100%;
  border-collapse: collapse;
}

.p-detail .gp-params tr {
  border-bottom: 1px solid var(--gp-line);
}

.p-detail .gp-params tr:last-child {
  border-bottom: 0;
}

.p-detail .gp-params th,
.p-detail .gp-params td {
  padding: 11px 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4;
  vertical-align: top;
  text-align: left !important;
}

.p-detail .gp-params th {
  width: 45%;
  font-weight: 400 !important;
}

.p-detail .gp-params .row-header-label {
  color: var(--gp-text-2) !important;
  font-weight: 400 !important;
}

.p-detail .gp-params td {
  color: var(--gp-text) !important;
}

.p-detail .gp-params td a {
  color: var(--gp-accent-tx) !important;
  text-decoration: none !important;
}

.p-detail .gp-params td a:hover {
  color: var(--gp-text) !important;
}

/* --- čtyři sloupce nad záložkami --- */
/* Vkládá skript, blok 8, před `.p-detail-tabs-wrapper`.
   Počet sloupců se řídí tím, kolik parametrů je vyplněných —
   třída `gp-cols--2` až `gp-cols--4`.

   Pozadí je bílé, plochu drží jen linky. Béžová verze byla
   zamítnuta 13. 8. */

.gp-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 56px 0 0;
  background: none;
  border-top: 1px solid var(--gp-line);
  border-bottom: 1px solid var(--gp-line);
}

.gp-cols--1 { grid-template-columns: 1fr; }
.gp-cols--2 { grid-template-columns: repeat(2, 1fr); }
.gp-cols--3 { grid-template-columns: repeat(3, 1fr); }

.gp-cols__item {
  padding: 32px 32px 34px;
  border-left: 1px solid var(--gp-line);
}

.gp-cols__item:first-child {
  border-left: 0;
}

.gp-cols__label {
  display: block;
  margin-bottom: 12px;
  color: var(--gp-accent-tx);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gp-cols__text {
  margin: 0;
  color: var(--gp-text-2);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {

  .gp-cols,
  .gp-cols--2,
  .gp-cols--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-cols__item {
    padding: 20px;
    border-top: 1px solid var(--gp-line);
  }

  .gp-cols__item:nth-child(-n+2) {
    border-top: 0;
  }

  .gp-cols__item:nth-child(odd) {
    border-left: 0;
  }
}

/* --- záložky na detailu produktu --- */
/* Step je kreslí jako šedé krabičky s rámečkem. Návrh je má
   jako holý text s podtržením u aktivní.

   POZOR: lišta `.shp-tabs-row` má vlastní JS, který měří šířku
   položek a co se nevejde, odklidí do nabídky „…". Písmo se
   proto nesmí zvětšovat nad 15 px — ověřeno 8. 8. na sekcích
   hlavní strany. */

.p-detail-tabs-wrapper .shp-tabs-row,
.p-detail-tabs-wrapper .responsive-nav {
  margin: 56px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gp-line) !important;
}

.p-detail-tabs-wrapper .shp-tabs-row a,
.p-detail-tabs-wrapper .shp-tabs-row > li > a {
  position: relative;
  margin: 0 32px 0 0 !important;
  padding: 0 0 14px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--gp-text-2) !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}

.p-detail-tabs-wrapper .shp-tabs-row a:hover {
  color: var(--gp-text) !important;
}

.p-detail-tabs-wrapper .shp-tabs-row .active > a,
.p-detail-tabs-wrapper .shp-tabs-row a.active,
.p-detail-tabs-wrapper .shp-tabs-row [aria-selected="true"] {
  color: var(--gp-text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 0 var(--gp-accent) !important;
}

/* obsah pod záložkami */
.p-detail-tabs-wrapper .tab-content,
.p-detail-tabs-wrapper .shp-tab-content {
  padding: 28px 0 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gp-text-2);
}

/* --- banner na velikost pod čtyřmi sloupci --- */
/* Vkládá skript, blok 10, před `.p-detail-tabs-wrapper`.
   Text i odkaz se mění podle zvolené varianty.

   AŽ BUDE FOTKA: odkomentovat blok níž — je v něm fotka
   i tmavý překryv, odkomentovat se musí celý naráz. */

.gp-band-size {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  margin: 40px 0 0;
  padding: 52px 48px;
  background: var(--gp-dark);
  overflow: hidden;
}

/* FOTKA — nasazeno ve v81. Fotka 2400 × 480 px, poměr 5:1.
   Přes ni jde tmavý přechod, zleva 86 %, doprava 45 %. */
.gp-band-size {
  background: var(--gp-dark) url('/user/documents/upload/pruh-velikost.jpg?v=1') center/cover no-repeat;
}

.gp-band-size::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33,30,26,.86) 0%, rgba(33,30,26,.45) 100%);
}

.gp-band-size > * {
  position: relative;
  z-index: 1;
}

.gp-band-size__kicker {
  margin-bottom: 14px;
  color: rgba(255,255,255,.72);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gp-band-size__title {
  margin-bottom: 28px;
  color: #FFFFFF;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

.gp-band-size__row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gp-band-size__btn {
  padding: 14px 30px;
  background: #FFFFFF;
  color: var(--gp-text) !important;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.gp-band-size__btn:hover,
.gp-band-size__btn:focus {
  background: var(--gp-accent);
  color: #FFFFFF !important;
}

.gp-band-size__note {
  color: rgba(255,255,255,.72);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
}

@media (max-width: 767px) {

  .gp-band-size {
    min-height: 0;
    padding: 32px 20px;
  }

  .gp-band-size__title {
    font-size: 24px;
  }

  .gp-band-size__btn {
    text-align: center;
  }

  .gp-band-size__row {
    gap: 14px;
  }
}

/* ============================================================
   12. Výpis produktů — mřížka a dlaždice
   ============================================================ */

/* Struktura ověřená inspektorem 19. 8.:

     main#content.content.narrow
       .category-top
       .category-content-wrapper
         #category-header
         #filters-wrapper
         #products.products.products-page.products-block
           .product
             .p
               a.image > img
               .p-in
                 .p-in-in
                   a.name > span
                   .availability > span + span.availability-amount
                 .p-bottom.single-button
                   .prices > .price.price-final > strong
                   .p-tools > a.btn.btn-primary
                   p.p-desc
           .listingControls

   POZOR: `.availability span` má z Shoptetu inline `color`
   (zeleně #009901). Přebíjí ho JS blok 1, který text i barvu
   přepisuje na Poslední kus / Skladem. Na `.availability span`
   se v CSS nedává `display` — schovaný počet kusů by se vrátil. */

/* --- mřížka --- */

#products.products-block {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
  margin: 32px 0 0;
  padding: 0;
}

#products.products-block::before,
#products.products-block::after {
  content: none !important;
}

#products .product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
}

#products .product:hover {
  border: 0 !important;
}

#products .p {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  border: 0 !important;
  background: none !important;
}

/* --- fotka 2:3 --- */

#products .p > a.image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--gp-muted-1);
  margin: 0 0 14px;
  border: 0 !important;
}

#products .p > a.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .4s ease;
}

#products .product:hover .p > a.image img {
  transform: scale(1.03);
}

/* --- text pod fotkou --- */

#products .p-in,
#products .p-in-in,
#products .p-bottom {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
}

#products a.name {
  display: block;
  margin: 0 0 6px;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--gp-text) !important;
  text-decoration: none !important;
}

#products a.name:hover {
  color: var(--gp-accent-tx) !important;
}

#products .availability {
  margin: 0 0 6px;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

#products .price-final,
#products .price-final strong {
  font-family: 'Karla', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--gp-text) !important;
}

#products .prices {
  margin: 0 !important;
  padding: 0 !important;
}

/* tlačítko Detail a popisek pryč — návrh je nemá,
   celá dlaždice je odkaz */
#products .p-tools,
#products .p-desc {
  display: none !important;
}

/* --- vyprodáno --- */

#products .product .p:has(.availability [class*="vyprodan"]) a.image::after,
#products .product.sold-out a.image::after {
  content: 'Vyprodáno';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: rgba(33, 30, 26, .88);
  color: #FFFFFF;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
}

/* --- Načíst dalších --- */

.listingControls {
  margin: 48px 0 0;
  text-align: center;
}

.listingControls .btn {
  padding: 15px 40px !important;
  background: transparent !important;
  border: 1px solid var(--gp-line) !important;
  border-radius: 0 !important;
  color: var(--gp-text) !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.listingControls .btn:hover {
  border-color: var(--gp-accent) !important;
  color: var(--gp-accent-tx) !important;
}

@media (max-width: 991px) {
  #products.products-block { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

@media (max-width: 575px) {
  #products.products-block { gap: 28px 12px; }
  #products a.name { font-size: 16px !important; }
}

/* --- levý panel --- */
/* Struktura (inspektor 19. 8.):
     aside.sidebar.sidebar-left > .sidebar-inner
       .box.box-bg-variant.box-sm.box-filters
       .box.box-bg-default.box-categories
       .box.box-bg-variant.box-sm.box-facebook   ← pryč */

.sidebar-left {
  padding: 0 !important;
}

.sidebar-left .box {
  margin: 0 0 34px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Facebook widget pryč — zabírá místo a zpomaluje načítání */
.sidebar-left .box-facebook {
  display: none !important;
}

/* nadpisy sekcí v panelu */
.sidebar-left .box h3,
.sidebar-left .box h4,
.sidebar-left .pageElement__heading,
.sidebar-left .box-heading {
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--gp-line);
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-text-3) !important;
}

/* --- strom kategorií --- */

#categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#categories li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

#categories a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--gp-line);
  font-family: 'Karla', sans-serif !important;
  font-size: 16px !important;
  color: var(--gp-text-2) !important;
  text-decoration: none !important;
  transition: color .15s;
}

#categories a:hover {
  color: var(--gp-text) !important;
}

/* aktivní kategorie */
#categories .active > a,
#categories li.active > a,
#categories a.active {
  color: var(--gp-text) !important;
  font-weight: 600 !important;
}

/* podkategorie odsazené a drobnějším */
#categories ul ul a {
  padding-left: 16px;
  font-size: 15px !important;
  color: var(--gp-text-3) !important;
}

/* --- hlavička výpisu --- */

.breadcrumbs {
  margin: 0 0 20px !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-text-3) !important;
}

.breadcrumbs a {
  color: var(--gp-text-3) !important;
  text-decoration: none !important;
}

.breadcrumbs a:hover {
  color: var(--gp-accent-tx) !important;
}

#category-header h1,
.category-header h1,
.content h1 {
  margin: 0 0 8px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.15;
  color: var(--gp-text) !important;
}

.category-perex,
#category-header .category-perex,
.category-top .category-perex {
  max-width: 60em;
  margin: 0 0 8px !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65;
  color: var(--gp-text-2) !important;
}

@media (max-width: 767px) {
  #category-header h1,
  .content h1 {
    font-size: 30px !important;
  }
}

/* --- pořadí boxů v panelu --- */
/* Velikost vyjímá do vlastního boxu JS blok 12, pořadí drží
   `order`. Návrh: Velikost → Kategorie → Cena → Značka → Sezóna */

.sidebar-left .sidebar-inner {
  display: flex;
  flex-direction: column;
}

.sidebar-left .gp-size-box    { order: 1; }
.sidebar-left .box-categories { order: 2; }
.sidebar-left .box-filters    { order: 3; }
.sidebar-left .box-facebook   { order: 9; }

/* --- box s velikostmi --- */

.gp-size-box {
  margin: 0 0 34px !important;
  padding: 22px 20px 20px !important;
  background: var(--gp-muted-1) !important;
}

.gp-size-box h4 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-text) !important;
}

.gp-size-box__lead {
  margin: 0 0 16px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gp-text-3);
}

.gp-size-box .filter-section,
.gp-size-box form,
.gp-size-box fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* mřížka dlaždic */
.gp-size-box fieldset {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gp-size-box fieldset > div {
  margin: 0;
  padding: 0;
}

/* zaškrtávátko pryč, dlaždicí je štítek */
.gp-size-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gp-size-box .filter-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--gp-line);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--gp-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.gp-size-box .filter-label:hover {
  border-color: var(--gp-accent);
  color: var(--gp-accent-tx);
}

.gp-size-box input[type="checkbox"]:checked + .filter-label {
  background: var(--gp-dark);
  border-color: var(--gp-dark);
  color: #FFFFFF;
}

/* počty u velikostí se v dlaždici nevypisují */
.gp-size-box .filter-count,
.gp-size-box .advanced-filters-wrapper {
  display: none !important;
}

/* --- ostatní filtry: cena, značka, sezóna --- */

/* tlačítko Rozbalit filtr pryč, filtry jsou vidět rovnou */
.filters-unveil-button-wrapper {
  display: none !important;
}

.sidebar-left #filters {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

.sidebar-left .filter-section,
.sidebar-left .slider-wrapper {
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidebar-left .filter-section h4,
.sidebar-left .slider-wrapper h4 {
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--gp-line);
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-text-3) !important;
}

.sidebar-left .filter-section fieldset > div {
  margin: 0 0 9px;
}

.sidebar-left .filter-section .filter-label {
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--gp-text-2);
  cursor: pointer;
}

.sidebar-left .filter-section .filter-count {
  margin-left: 4px;
  color: var(--gp-text-3);
  font-size: 13px;
}

/* posuvník ceny v akcentu */
.sidebar-left .slider-content .ui-slider-range,
.sidebar-left .noUi-connect {
  background: var(--gp-accent) !important;
}

.sidebar-left .slider-content .ui-slider-handle,
.sidebar-left .noUi-handle {
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- kategorie: počty a podkategorie --- */

#categories a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#categories .category-count,
#categories .count {
  flex: none;
  color: var(--gp-text-3) !important;
  font-size: 14px;
  font-weight: 400;
}

/* podkategorie jen u rozkliknuté kategorie */
#categories ul ul {
  display: none;
}

#categories li.active > ul,
#categories li.expanded > ul,
#categories .active > ul {
  display: block;
}

/* --- oprava dlaždic velikostí --- */
/* Step kreslí zaškrtávátko jako pseudoprvek na štítku, ne jako
   viditelný input. Samotné schování `input` proto nestačí. */

.gp-size-box .filter-label::before,
.gp-size-box .filter-label::after,
.gp-size-box .filter-label > span:not(.filter-count) {
  display: none !important;
  content: none !important;
}

.gp-size-box .filter-label {
  padding: 0 !important;
  text-indent: 0 !important;
}

/* --- filtry vidět rovnou, bez rozbalování --- */

.filters-unveil-button-wrapper,
[data-testid="buttonOpenFilter"],
.sidebar-left .filters-unveil-button,
.sidebar-left .unveil-button {
  display: none !important;
}

.sidebar-left .filters-wrapper,
.sidebar-left #filters,
.sidebar-left .filter-sections {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* box s filtry bez vlastního rámečku a podkladu */
.sidebar-left .box-filters {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* --- značky ze stromu kategorií pryč --- */
/* `#cat-manufacturers` je samostatný blok uvnitř `#categories`
   (ověřeno 20. 8.). V menu jsou jen čtyři značky z osmi, kdežto
   filtr Značka níž v panelu je vypisuje všechny. Ve stromu se
   navíc míchají mezi kategorie, což mate. */

#cat-manufacturers,
#categories [data-testid="brandsList"] {
  display: none !important;
}

/* --- oprava: box s velikostmi má béžovou plochu --- */
/* `.gp-size-box` nese i třídu `box`, takže ho přebíjelo
   obecnější `.sidebar-left .box`. Musí se přepsat se stejnou
   nebo vyšší váhou. */

.sidebar-left .gp-size-box {
  margin: 0 0 34px !important;
  padding: 22px 20px 20px !important;
  background: var(--gp-muted-1) !important;
  border: 0 !important;
}

/* --- schované filtry ven --- */
/* Struktura (inspektor 20. 8.):
     .filter-sections
       .filter-section.filter-section-boolean     ← Na skladě
       .filter-section.filter-section-button      ← ROZBALIT FILTR
         a.toggle-filters[data-unveil="category-filter-hover"]
       #category-filter-hover                     ← Značka, Sezóna

   Tlačítko jde pryč a schovaný blok se rozbalí natrvalo. */

.filter-section-button,
.sidebar-left .toggle-filters {
  display: none !important;
}

#category-filter-hover {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Na skladě jako běžný filtr, ne jako patka pod cenou */
.filter-section-boolean {
  margin: 0 0 28px !important;
  padding: 0 0 24px !important;
  border-bottom: 1px solid var(--gp-line) !important;
}

/* --- prostornější kategorie --- */

#categories a {
  padding: 14px 0 !important;
}

#categories ul ul a {
  padding: 11px 0 11px 16px !important;
}

/* --- oddělení hlavičky panelu od obsahu --- */

.sidebar-left .box-categories {
  padding-top: 4px !important;
}

/* --- sezóna v boxu s velikostmi --- */
/* Přesouvá ji JS blok 12. Vykresluje se jako řádek slov,
   ne jako zaškrtávátka — je to volba mezi čtyřmi hodnotami
   a dlaždice by soupeřily s velikostmi. */

.gp-size-box .gp-season {
  margin: 20px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--gp-line) !important;
}

.gp-size-box .gp-season h4 {
  margin: 0 0 12px !important;
  color: var(--gp-text-3) !important;
}

.gp-size-box .gp-season fieldset {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.gp-size-box .gp-season fieldset > div {
  margin: 0;
}

.gp-size-box .gp-season .filter-label {
  display: inline;
  height: auto;
  padding: 0 !important;
  background: none;
  border: 0;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--gp-text-3);
  cursor: pointer;
  transition: color .15s;
}

.gp-size-box .gp-season .filter-label:hover {
  color: var(--gp-text);
  background: none;
}

.gp-size-box .gp-season input[type="checkbox"]:checked + .filter-label {
  background: none;
  border: 0;
  color: var(--gp-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--gp-accent);
}

.gp-size-box .gp-season .filter-count {
  display: none !important;
}

/* --- oddělovací linky v panelu --- */

/* hlavička béžového boxu oddělená od dlaždic */
.gp-size-box__lead {
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--gp-line);
}

/* svislá linka mezi panelem a výpisem */
@media (min-width: 992px) {

  .content-wrapper-in {
    align-items: flex-start;
  }

  .sidebar-left {
    padding-right: 30px !important;
    border-right: 1px solid var(--gp-line);
  }

  main#content.narrow {
    padding-left: 34px !important;
  }
}

/* --- řazení produktů --- */
/* Struktura (inspektor 20. 8.):
     #category-header > .listSorting.js-listSorting
       ul.listSorting__controls
         li > button.listSorting__control
              button.listSorting__control--current   ← aktivní

   Step je kreslí jako šedé krabičky. Přestylované na holý text
   s akcentní linkou u aktivní, stejně jako záložky na detailu
   produktu. */

#category-header {
  display: block !important;
  margin: 0 0 8px !important;
}

.listSorting {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--gp-line);
}

.listSorting__controls {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.listSorting__controls li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.listSorting__control {
  margin: 0 !important;
  padding: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--gp-text-2) !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .15s;
}

.listSorting__control:hover {
  color: var(--gp-text) !important;
  background: none !important;
}

.listSorting__control--current {
  color: var(--gp-text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 0 var(--gp-accent) !important;
  cursor: default;
}

@media (max-width: 575px) {
  .listSorting__controls { gap: 0 18px; }
  .listSorting__control { font-size: 14px !important; }
}

/* --- mobil: box s velikostmi nad výpisem --- */
/* Přesouvá ho JS blok 12. Na mobilu je postranní panel až pod
   výpisem, takže by velikosti nikdo neviděl. */

@media (max-width: 991px) {

  .gp-size-box--mobil {
    margin: 0 0 24px !important;
    padding: 18px 16px 16px !important;
  }

  .gp-size-box--mobil fieldset {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .gp-size-box--mobil .filter-label {
    height: 46px;
    font-size: 16px;
  }

  .gp-size-box__lead {
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
  }

  /* panel pod výpisem, ale ne nacpaný */
  .sidebar-left {
    margin-top: 40px;
    padding: 32px 0 0 !important;
    border-top: 1px solid var(--gp-line);
  }

  .listSorting__controls {
    gap: 0 16px;
  }
}

@media (max-width: 400px) {
  .gp-size-box--mobil fieldset {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- mobil: vlastní dlaždice velikostí --- */
/* Staví je JS blok 13. Na mobilu Shoptet postranní panel
   negeneruje, takže dlaždice nejsou přesunuté, ale vlastní. */

.gp-msize {
  display: none;
}

@media (max-width: 991px) {

  .gp-msize {
    display: block;
    margin: 0 0 26px;
    padding: 18px 16px 16px;
    background: var(--gp-muted-1);
  }

  .gp-msize__title {
    display: block;
    margin: 0 0 8px;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gp-text);
  }

  .gp-msize__lead {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--gp-line);
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gp-text-3);
  }

  .gp-msize__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .gp-msize__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    background: #FFFFFF;
    border: 1px solid var(--gp-line);
    color: var(--gp-text) !important;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s;
  }

  .gp-msize__tile.is-active {
    background: var(--gp-dark);
    border-color: var(--gp-dark);
    color: #FFFFFF !important;
  }
}

@media (max-width: 400px) {
  .gp-msize__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- mobil: nativní filtr velikosti pryč --- */
/* Step vodorovný filtr vykreslí až ve chvíli, kdy je v adrese
   nějaký filtr. Pak by byla velikost na stránce dvakrát — jednou
   jako dlaždice z bloku 13, podruhé jako seznam se zaškrtávátky.

   Sekce se pozná podle třídy `filter-section-parametric-id-66;190`.
   Středník se v selektoru špatně escapuje, proto shoda na část
   názvu třídy. */

@media (max-width: 991px) {
  [class*="filter-section-parametric-id-66"] {
    display: none !important;
  }
}

/* --- mobil: vodorovný filtr (cena, značky) --- */
/* Step ho vykreslí až ve chvíli, kdy je v adrese nějaký filtr.
   Přestylovaný do stejného jazyka jako panel na desktopu. */

@media (max-width: 991px) {

  #filters-wrapper {
    margin: 0 0 28px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }

  #filters-wrapper .filter-section,
  #filters-wrapper .slider-wrapper {
    margin: 0 0 22px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--gp-line) !important;
  }

  #filters-wrapper h4,
  #filters-wrapper .filter-section h4 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gp-text-3) !important;
  }

  #filters-wrapper .filter-label {
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    color: var(--gp-text-2);
  }

  #filters-wrapper .filter-count {
    color: var(--gp-text-3);
    font-size: 13px;
  }

  /* Vymazat filtry jako klidný odkaz, ne červený výkřik */
  #filters-wrapper a[class*="clear"],
  #filters-wrapper .filters-clear,
  .filters-clear-all {
    color: var(--gp-text-3) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* --- mobil: pořadí prvků nad výpisem --- */
/* Chceme: dlaždice velikostí → filtr → řazení → produkty.
   Step to skládá jinak, protože řazení sedí v `#category-header`
   nad filtrem. Přehodí se pořadím ve flexu.

   Prázdný `gp-size-box` z bloku 12 se na mobilu schovává —
   panel na mobilu neexistuje, takže ho Shoptet nemá čím
   naplnit a zbyla by po něm béžová plocha. */

@media (max-width: 991px) {

  .sidebar-left .gp-size-box,
  .gp-size-box {
    display: none !important;
  }

  .category-content-wrapper {
    display: flex !important;
    flex-direction: column;
  }

  .category-content-wrapper #filters-wrapper { order: 1; }
  .category-content-wrapper #category-header  { order: 2; }
  .category-content-wrapper #productsListHeading { order: 3; }
  .category-content-wrapper #products         { order: 4; }
  .category-content-wrapper .listingControls  { order: 5; }

  .category-content-wrapper #category-header {
    margin: 0 0 20px !important;
  }

  .listSorting {
    margin: 0 !important;
  }
}

/* --- mobil: sbalené značky --- */
/* Sbaluje je JS blok 14. Rozbalené zůstávají jen tehdy, když už
   je nějaká značka zvolená. */

.gp-brands__toggle {
  display: none;
}

@media (max-width: 991px) {

  .gp-brands__toggle {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--gp-accent-tx);
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
  }

  .gp-brands.is-closed form,
  .gp-brands.is-closed fieldset {
    display: none !important;
  }

  /* Do vykreslování zaškrtávátek se nesahá — Step si je kreslí
     vlastním způsobem a zásah do `display` nebo pozice inputu
     ustřelí text štítku doleva pod zaškrtávátko. Ověřeno 20. 8. */
  .gp-brands fieldset > div {
    margin: 0 0 4px;
  }
}


/* --- zarovnání cen v mřížce --- */
/* Názvy mají různý počet řádků, takže ceny skákaly. Dlaždice je
   sloupec a cena se přisaje ke spodní hraně — pak sedí v celé
   řadě bez ohledu na délku názvu.

   Funguje to proto, že položky mřížky jsou v řadě stejně vysoké. */

#products .product {
  display: flex;
  height: 100%;
}

#products .p {
  flex: 1;
}

#products .p-in {
  display: flex !important;
  flex-direction: column;
  flex: 1;
}

#products .p-in-in {
  flex: 1;
}

#products .p-bottom {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* --- zarovnání dostupnosti --- */
/* Cena je přisátá ke spodní hraně, ale dostupnost zůstávala pod
   názvem a mezi nimi vznikla díra. Přisaje se taky, takže sedí
   těsně nad cenou a v celé řadě na jedné linii. */

#products .p-in-in {
  display: flex !important;
  flex-direction: column;
}

#products .p-in-in .availability {
  margin: auto 0 0 !important;
  padding-top: 8px;
}

#products .p-bottom {
  padding-top: 4px !important;
}

/* --- mobil: horní lišta --- */
/* Na mobilu se lišta vykresluje pod hlavičkou, ne nad ní. Sedí
   tam dobře, jen se lepila na obsah a splývala s tmavým
   tlačítkem košíku. */

@media (max-width: 991px) {

  .gp-topbar {
    margin: 0 0 20px;
    padding: 9px 16px;
  }

  .gp-topbar__in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .gp-topbar__item {
    font-size: 12px;
    line-height: 1.4;
  }

  /* košík nesmí splývat s lištou pod hlavičkou */
  #header .cart-count,
  #header [class*="cart"] > a,
  #header .btn-cart {
    margin-bottom: 0;
  }

  #header {
    border-bottom: 0;
  }

  /* obsah pod lištou nezačíná hned */
  #content-wrapper {
    padding-top: 4px;
  }
}

/* --- odkaz na tabulku velikostí --- */
/* Vkládá JS blok 15, jen u produktů bez vlastních rozměrů.
   Vzhledem drží krok s WhatsApp boxem pod ním, ale je tišší —
   je to náhradní informace, ne hlavní. */

.gp-sizetable {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--gp-line);
  text-decoration: none !important;
  transition: border-color .15s;
}

.gp-sizetable:hover {
  border-color: var(--gp-accent);
}

.gp-sizetable__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--gp-accent);
}

.gp-sizetable__title {
  color: var(--gp-text) !important;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.gp-sizetable__text {
  color: var(--gp-text-3) !important;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* ============================================================
   Hodnocení zákaznic
   ============================================================ */

/* HTML blok `hodnoceni.html`. Posouvání řeší JS blok 16.

   Vodorovný pás s odsazením, ne mřížka — hodnocení mají různou
   délku a v mřížce by vznikaly díry. */

.gp-rev {
  position: relative;
  margin: 0;
  padding: 72px 0;
  background: var(--gp-muted-2);
}

.gp-rev__head {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 0 20px;
  text-align: center;
}

.gp-rev__kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--gp-accent-tx);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gp-rev__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--gp-text);
}

/* pás */
.gp-rev__track {
  display: flex;
  gap: 20px;
  padding: 4px 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gp-rev__track::-webkit-scrollbar {
  display: none;
}

.gp-rev__item {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px;
  background: #FFFFFF;
  scroll-snap-align: start;
}

.gp-rev__item blockquote {
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gp-text-2);
}

.gp-rev__item blockquote::before {
  content: '„';
  margin-right: 2px;
  color: var(--gp-accent);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
}

.gp-rev__item figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gp-line);
}

.gp-rev__name {
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-text);
}

.gp-rev__date {
  flex: none;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  color: var(--gp-text-3);
}

/* šipky */
.gp-rev__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.gp-rev__arrow {
  width: 46px;
  height: 46px;
  background: #FFFFFF;
  border: 1px solid var(--gp-line);
  color: var(--gp-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.gp-rev__arrow:hover {
  border-color: var(--gp-accent);
  color: var(--gp-accent-tx);
}

@media (max-width: 767px) {

  .gp-rev {
    padding: 48px 0;
  }

  .gp-rev__title {
    font-size: 24px;
  }

  .gp-rev__item {
    flex: 0 0 82%;
    padding: 24px 20px;
  }
}

/* --- hodnocení: pás v obsahové šířce --- */
/* Karty jsou bílé a na kraji obrazovky splývaly s okolím. Pás
   se proto drží v obsahové šířce a po stranách měkce mizí, aby
   bylo poznat, že jde posouvat dál. */

.gp-rev__track {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4px 4px 4px 0 !important;
  -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%
  );
}

/* tři karty ve viditelné části, čtvrtá zajíždí za okraj */
.gp-rev__item {
  flex: 0 0 calc((1200px - 40px) / 3.4);
  border: 1px solid var(--gp-line);
}

@media (max-width: 1240px) {
  .gp-rev__track {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .gp-rev__item {
    flex: 0 0 30%;
  }
}

@media (max-width: 991px) {
  .gp-rev__item {
    flex: 0 0 46%;
  }
}

@media (max-width: 767px) {
  .gp-rev__track {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gp-rev__item {
    flex: 0 0 80%;
  }
}

/* --- hodnocení: hvězdičky a průměr --- */
/* Vykresluje JS blok 16 z hodnoty `data-stars` na kartě.
   Průměr se dopočítá, nikde se nezadává ručně. */

.gp-rev__stars {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 16px;
  line-height: 1;
}

.gp-rev__star {
  color: var(--gp-line);
  font-size: 15px;
}

.gp-rev__star.is-on {
  color: var(--gp-accent);
}

/* průměr pod nadpisem */
.gp-rev__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.gp-rev__stars--big {
  margin: 0;
}

.gp-rev__stars--big .gp-rev__star {
  font-size: 19px;
}

.gp-rev__score-text {
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--gp-text-2);
}

.gp-rev__score-text strong {
  color: var(--gp-text);
  font-weight: 600;
}

@media (max-width: 767px) {
  .gp-rev__score {
    gap: 8px;
  }
  .gp-rev__score-text {
    font-size: 14px;
  }
}

/* --- hodnocení na detailu produktu --- */
/* Vkládá JS blok 17. Šest náhodných karet stažených z hlavní
   strany, aby se hodnocení psala jen na jednom místě.

   Průměr se tu nevypisuje — z výběru šesti karet by byl
   zavádějící. */

.gp-rev--detail {
  margin: 56px 0 0;
  padding: 48px 0 40px;
}

.gp-rev--detail .gp-rev__head {
  margin-bottom: 26px;
}

.gp-rev--detail .gp-rev__track {
  max-width: none;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.gp-rev--detail .gp-rev__item {
  flex: 0 0 300px;
  padding: 24px 22px;
}

.gp-rev--detail .gp-rev__item blockquote {
  font-size: 15px;
}

.gp-rev__more {
  margin: 24px 0 0;
  text-align: center;
}

.gp-rev__more a {
  color: var(--gp-accent-tx) !important;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.gp-rev__more a:hover {
  color: var(--gp-text) !important;
}

@media (max-width: 767px) {
  .gp-rev--detail {
    margin-top: 40px;
    padding: 36px 0 32px;
  }
  .gp-rev--detail .gp-rev__item {
    flex: 0 0 80%;
  }
}

/* ============================================================
   Pruh s aktualitou nad hero
   ============================================================ */

/* Vkládá JS blok 18 z nejnovějšího článku v rubrice Aktuality.
   Když článek není, pruh se nevykreslí vůbec. */

.gp-news {
  background: var(--gp-muted-1);
  color: var(--gp-text);
}

.gp-news__in {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.gp-news__label {
  flex: none;
  padding: 6px 12px;
  background: var(--gp-accent);
  color: #FFFFFF;
  font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gp-news__body {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.gp-news__title {
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-text);
}

.gp-news__text {
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gp-text-2);
}

.gp-news__link {
  flex: none;
  padding: 10px 20px;
  border: 1px solid var(--gp-line);
  color: var(--gp-text) !important;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s;
}

.gp-news__link:hover {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: #FFFFFF !important;
}

@media (max-width: 767px) {

  .gp-news__in {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px;
  }

  .gp-news__body {
    flex: 1 1 100%;
    gap: 6px;
  }

  .gp-news__title {
    font-size: 16px;
  }

  .gp-news__text {
    font-size: 15px;
  }

  .gp-news__link {
    padding: 9px 16px;
    font-size: 12px;
  }
}

/* ============================================================
   Odstupy mezi sekcemi hlavní strany
   ============================================================ */

/* Sekce vznikaly postupně a každá měla vlastní odstup — 24, 48,
   56 a 72 px. Sjednoceno na 64 px mezi bloky na počítači a
   40 px na mobilu.

   Výjimka je pruh s aktualitou: pod ním je jen 24 px, protože
   patří k hero bloku a větší mezera by ho utrhla.

   Hodnocení má vlastní vnitřní odsazení (celobarevná plocha),
   takže mezi sekce nepřidává nic. */

.gp-news        { margin: 0 0 24px !important; }
.gp-hero        { margin-bottom: 64px !important; }
.gp-bands       { margin-bottom: 64px !important; }
.gp-perks       { margin: 0 0 64px !important; }
.gp-story       { margin: 0 0 64px !important; }

.homepage-tabs-wrapper {
  margin: 0 0 64px !important;
}

.gp-rev {
  margin: 0 !important;
}

@media (max-width: 767px) {

  .gp-news        { margin: 0 0 20px !important; }
  .gp-hero        { margin-bottom: 40px !important; }
  .gp-bands       { margin-bottom: 40px !important; }
  .gp-perks       { margin: 0 0 40px !important; }
  .gp-story       { margin: 0 0 40px !important; }

  .homepage-tabs-wrapper {
    margin: 0 0 40px !important;
  }
}

/* ============================================================
   Textové stránky
   ============================================================ */

/* Obchodní podmínky, Ochrana osobních údajů, Tabulky velikostí,
   Jak nakupovat.

   Struktura (inspektor 21. 8.):
     main#content.content.narrow > .content-inner
       article.pageArticleDetail
         header > h1
         div[itemprop="about"]   ← obsah

   POZOR: text je nakopírovaný z Wordu a má vlepené styly přímo
   v kódu — `font-family: helvetica`, `font-size: 12pt`, červené
   barvy. Vlepený styl přebije stylopis, pokud nemá `!important`.
   Proto ho tu má skoro každé pravidlo. */

.pageArticleDetail {
  max-width: 46em;
  margin: 0 0 64px;
}

.pageArticleDetail header h1,
.content-inner h1 {
  margin: 0 0 28px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  color: var(--gp-text) !important;
}

/* vlepené styly z Wordu pryč */
.pageArticleDetail span,
.pageArticleDetail font,
.pageArticleDetail div[itemprop="about"] * {
  font-family: 'Karla', sans-serif !important;
  font-size: inherit !important;
}

.pageArticleDetail div[itemprop="about"] {
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gp-text-2);
}

.pageArticleDetail p {
  margin: 0 0 12px !important;
}

/* prázdné odstavce z Wordu — nechají po sobě jen malou mezeru */
.pageArticleDetail p:empty {
  display: none;
}

.pageArticleDetail h2,
.pageArticleDetail h3,
.pageArticleDetail h4 {
  margin: 36px 0 14px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--gp-text) !important;
}

.pageArticleDetail h2 { font-size: 26px !important; }
.pageArticleDetail h3 { font-size: 21px !important; }
.pageArticleDetail h4 { font-size: 18px !important; }

.pageArticleDetail strong,
.pageArticleDetail b {
  font-weight: 600 !important;
  color: var(--gp-text) !important;
}

/* Křiklavá červená z Wordu se tlumí do akcentu. Zvýraznění
   zůstává, jen nekřičí. */
.pageArticleDetail [style*="color: #ff0000"],
.pageArticleDetail [style*="color:#ff0000"],
.pageArticleDetail [style*="color: red"] {
  color: var(--gp-accent-tx) !important;
}

.pageArticleDetail a {
  color: var(--gp-accent-tx) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pageArticleDetail a:hover {
  color: var(--gp-text) !important;
}

.pageArticleDetail ul,
.pageArticleDetail ol {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}

.pageArticleDetail li {
  margin: 0 0 7px !important;
  line-height: 1.7;
}

/* tabulky velikostí */
.pageArticleDetail table {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  font-family: 'Karla', sans-serif !important;
  font-size: 15px;
}

.pageArticleDetail table td,
.pageArticleDetail table th {
  padding: 9px 12px !important;
  border: 1px solid var(--gp-line) !important;
  text-align: left;
}

.pageArticleDetail table th,
.pageArticleDetail table tr:first-child td {
  background: var(--gp-muted-1);
  font-weight: 600;
  color: var(--gp-text) !important;
}

/* Na textových stránkách je postranní panel s kategoriemi spíš
   rušivý — zákaznice čte podmínky, ne katalog. Text tím dostane
   plnou šířku a lepší délku řádku. */
.content-wrapper-in:has(.pageArticleDetail) .sidebar-left {
  display: none;
}

.content-wrapper-in:has(.pageArticleDetail) main#content.narrow {
  padding-left: 0 !important;
}

@media (max-width: 767px) {

  .pageArticleDetail header h1,
  .content-inner h1 {
    font-size: 28px !important;
  }

  .pageArticleDetail div[itemprop="about"] {
    font-size: 15px;
  }

  .pageArticleDetail table {
    display: block;
    overflow-x: auto;
  }
}

/* --- stránka Kontakt --- */
/* HTML blok `kontakt.html` vložený do textové stránky.

   Mapa se nepoužívá: Mapy.com sdílený odkaz do rámu nepustí a
   Google jsme nechtěli. Ověřeno 21. 8. Údaje jsou proto ve dvou
   sloupcích. */

.gp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  align-items: start;
  margin: 0 0 48px;
}

.gp-contact--nomap .gp-contact__main {
  display: contents;
}

.gp-contact--nomap .gp-contact__block:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.gp-contact__block {
  margin: 0 0 32px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--gp-line);
}

.gp-contact__block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.gp-contact__label {
  display: block;
  margin: 0 0 10px;
  color: var(--gp-accent-tx);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gp-contact__big {
  margin: 0 0 10px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.35;
  color: var(--gp-text) !important;
}

.gp-contact__big a {
  color: var(--gp-text) !important;
  text-decoration: none !important;
}

.gp-contact__big a:hover {
  color: var(--gp-accent-tx) !important;
}

.gp-contact__note {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  line-height: 1.65;
  color: var(--gp-text-3) !important;
}

.gp-contact__btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--gp-accent);
  color: #FFFFFF !important;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s;
}

.gp-contact__btn:hover {
  background: var(--gp-accent-tx);
  color: #FFFFFF !important;
}

/* otevírací doba a fakturační údaje */
.gp-hours,
.gp-billing {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Karla', sans-serif !important;
  font-size: 16px;
}

.gp-hours td,
.gp-billing td {
  padding: 9px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gp-line) !important;
  vertical-align: top;
}

.gp-hours tr:last-child td,
.gp-billing tr:last-child td {
  border-bottom: 0 !important;
}

.gp-hours td:first-child,
.gp-billing td:first-child {
  width: 42%;
  color: var(--gp-text-3) !important;
  background: none !important;
  font-weight: 400 !important;
}

.gp-hours td:last-child,
.gp-billing td:last-child {
  color: var(--gp-text) !important;
  font-weight: 500;
}

.gp-contact__map iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--gp-line);
}

@media (max-width: 767px) {

  .gp-contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gp-contact__big {
    font-size: 21px !important;
  }

  .gp-contact__map iframe {
    height: 300px;
  }
}

/* --- stránka O nás --- */

.gp-about__lead {
  margin: 0 0 34px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.45;
  color: var(--gp-text) !important;
}

.gp-about__note {
  margin: 40px 0 0;
  padding: 22px 24px;
  background: var(--gp-muted-1);
}

.gp-about__note p {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--gp-text-2) !important;
}

/* fotky vložené do textu stránky */
.pageArticleDetail img {
  max-width: 100%;
  height: auto;
  margin: 8px 0 28px;
}

@media (max-width: 767px) {
  .gp-about__lead {
    font-size: 20px !important;
  }
}

/* --- O nás: fotky týmu --- */

.gp-team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 28px 0 44px;
}

.gp-team__item {
  margin: 0;
}

/* Fotky jsou dodané jako kruhové výřezy na světlém pozadí,
   proto kolečko a ne obdélník. */
.gp-team__item img {
  display: block;
  width: 190px;
  height: 190px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto 16px !important;
  border-radius: 50%;
  background: var(--gp-muted-1);
}

.gp-team__item figcaption {
  text-align: center;
}

.gp-team__name {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  color: var(--gp-text);
}

.gp-team__role {
  display: block;
  margin: 4px 0 10px;
  color: var(--gp-accent-tx);
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gp-team__text {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65;
  color: var(--gp-text-2) !important;
}

@media (max-width: 575px) {
  .gp-team {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --- filtr velikosti: písmenkové hodnoty --- */
/* Skrývá je JS blok 19 — poznají se podle textu štítku a na
   text se v CSS vybírat nedá. */