/* =========================================================
   GALERIE (/galerie) – 3 podkategorie jako velké dlaždice
   Cílí pouze na body.in-galerie
   ========================================================= */

body.in-galerie #content .category-top{
  margin-top: 6px;
}

/* 1) Kontejner podkategorií */
body.in-galerie #content ul.subcategories.with-image{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 22px 0 10px;
  padding: 0;
}

/* reset bootstrap sloupců, aby nelezly do gridu */
body.in-galerie #content ul.subcategories.with-image > li{
  width: auto !important;
  float: none !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* KARTA = jeden hero blok (žádný spodní řádek) */
body.in-galerie #content ul.subcategories.with-image > li > a{
  display: flex;                 /* místo grid */
  flex-direction: column;     /* ← změna */


  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;          /* ← zruší šablonových 15px */

  position: relative;
  overflow: hidden;
  text-decoration: none !important;

  background: #0d0d0cd1;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  min-height: 360px;              /* klidně 320–380 dle chuti */
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}


body.in-galerie #content ul.subcategories.with-image > li > a:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: #0d0d0cd1;
}

/* 3) Obrázek – uděláme z něj velký “cover” */
body.in-galerie #content ul.subcategories.with-image > li > a .image{
  width: 100%;
  height: 100%;
  min-height: inherit;
  position: relative;
}

body.in-galerie #content ul.subcategories.with-image > li > a .image img{
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transform: scale(1.03);
}

/* 4) Text (název) – hezky čitelný a centrovaný */
body.in-galerie #content ul.subcategories.with-image > li > a .text{
  display: block;
  margin: 0 !important;
  padding: 14px 14px 16px;
  text-align: center;

  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92) !important;

  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%);
}

/* 5) Pryč s hláškou “Produkty teprve připravujeme” na galerii */
body.in-galerie #content .empty-content-category{
  display: none !important;
}

/* 6) Responsivně */
@media (max-width: 980px){
  body.in-galerie #content ul.subcategories.with-image{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  body.in-galerie #content ul.subcategories.with-image > li > a{
    min-height: 230px;
  }
}



/* box drží poměr 3:2 a přizpůsobí se šířce karty */
body.in-galerie #content ul.subcategories.with-image > li > a .image{
  height: auto;
  aspect-ratio: 3 / 2;
}









/* =========================================================
   GALERIE – texty (breadcrumb, H1, případné popisky) bílé
   ========================================================= */

body.in-galerie .breadcrumbs,
body.in-galerie .breadcrumbs *{
  color: rgba(255,255,255,.78) !important;
}

body.in-galerie #content .category-title,
body.in-galerie #content h1,
body.in-galerie #content h2,
body.in-galerie #content h3,
body.in-galerie #content p{
  color: rgba(255,255,255,.92) !important;
}

/* Pokud některé prvky zůstávají černé (dědí barvu od šablony) */
body.in-galerie #content .category-top{
  color: rgba(255,255,255,.92) !important;
}

/* =========================================================
   GALERIE – zvětšení dlaždic a obrázků (hero image)
   ========================================================= */

/* větší karta */
body.in-galerie #content ul.subcategories.with-image > li > a{
  min-height: 360px;               /* bylo ~270 */
  border-radius: 0;
}

/* obrázek zabere většinu karty */
body.in-galerie #content ul.subcategories.with-image > li > a .image{
  display: block;
  width: 100%;
  height: 280px;                   /* výška “hero” obrázku */
  margin-top: 12px; /* ← TADY */
}

/* přepíšeme pevné rozměry 140x100 + uděláme cover */
body.in-galerie #content ul.subcategories.with-image > li > a .image img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover;
  border-radius: 0;                /* karta už má radius */
  transform: none;                 /* ať se neškáluje */
}

/* text (název) trochu větší */
body.in-galerie #content ul.subcategories.with-image > li > a .text{
  font-size: 18px;
  padding: 16px 14px;
  order: -1;   /* ← TADY */

}

body.in-galerie #content .category-top{
  max-width: 1378px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   GALERIE – ostré hero obrázky pro podkategorie
   ========================================================= */

/* původní Shoptet thumb necháme v DOM, ale skryjeme */
body.in-galerie #content ul.subcategories.with-image > li > a .image img{
  opacity: 0 !important;
}

/* image jako hero pozadí */
body.in-galerie #content ul.subcategories.with-image > li > a .image{
  height: 280px;                 /* poměr cca 16:10 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;        /* žádné bílé pruhy */
  overflow: hidden;
}

/* MOTORKY */
body.in-galerie
#content ul.subcategories.with-image > li > a[href="/motorky/"] .image{
  background-image: url("/user/documents/upload/gallery/motorky.jpg");
}

/* AUTA */
body.in-galerie
#content ul.subcategories.with-image > li > a[href="/auta/"] .image{
  background-image: url("/user/documents/upload/gallery/auta.jpg");
}

/* OSTATNÍ */
body.in-galerie
#content ul.subcategories.with-image > li > a[href="/ostatni/"] .image{
  background-image: url("/user/documents/upload/gallery/ostatni.jpg");
}


/* =========================================================
   GALERIE – breadcrumbs (Domů > Galerie) větší a vždy viditelné
   ========================================================= */

body.in-galerie .breadcrumbs{
  display: flex !important;              /* vynutit zobrazení */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  margin: 10px 0 14px !important;
  padding: 10px 12px !important;

  font-size: 15px;                       /* větší */
  line-height: 1.2;

  color: rgba(255,255,255,.85) !important;
  background: #0d0d0cd1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.in-galerie .breadcrumbs a{
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

body.in-galerie .breadcrumbs a:hover{
  text-decoration: underline !important;
}

/* ikonka domů a oddělovače */
body.in-galerie .breadcrumbs .navigation-home-icon{
  opacity: .95;
}

/* Schovat původní Shoptet lomítka (navigation-bullet) */
body.in-galerie .breadcrumbs .navigation-bullet{
  display: none !important;
}

/* Generovat lomítko mezi položkami breadcrumbs pomocí ::before */
body.in-galerie .breadcrumbs > span[itemprop="itemListElement"]:not(#navigation-first)::before{
  content: "/" !important;
  display: inline-block;
  margin: 0 12px 0 10px;
  color: rgba(255,255,255,.6) !important;
}

/* Desktop (992px+) – sjednocení a zabránění rozpadnutí */
@media (min-width: 992px){
  body.in-galerie .breadcrumbs{
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* Shoptet dává na desktopu align-self na span; sjednotíme */
  body.in-galerie .breadcrumbs > span{
    align-self: center !important;
    display: inline-flex;
    align-items: center;
  }

  /* odstranit šipku (→) z Shoptetu */
  body.in-galerie .breadcrumbs > span > a:not(.navigation-home-icon)::after{
    content: "" !important;
    display: none !important;
  }

  /* Reset paddingu na odkazech a spanech v breadcrumbs */
  body.in-galerie .breadcrumbs > span > a:not(.navigation-home-icon),
  body.in-galerie .breadcrumbs > span > span{
    padding: 0 !important;
  }
}

/* FIX: Breadcrumbs se na tabletu/menším desktopu (991–1200px) NESMÍ lámat na 2 řádky */
@media (min-width: 991px) and (max-width: 1200px){
  /* Shoptet dává .breadcrumbs max-width:972px – přebít */
  body.in-galerie .breadcrumbs{
    max-width: none !important;
    width: 100% !important;
  }

  /* Držet vše v jednom řádku */
  body.in-galerie .breadcrumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 10px !important;
    font-size: 0 !important;   /* zabije whitespace mezi span */
  }

  /* Vrátit velikost textu */
  body.in-galerie .breadcrumbs > span{
    font-size: 18px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Lomítka nesmí zůstat "viset" na dalším řádku */
  body.in-galerie .breadcrumbs > span::before{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 12px 0 10px !important;
  }

  /* Poslední položku zkrátit, když se nevejde */
  body.in-galerie .breadcrumbs > span:last-of-type{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Fix pro display:block bug */
  body.in-galerie .breadcrumbs > span > a,
  body.in-galerie .breadcrumbs > span > span{
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* Konkrétní reset pro jednotlivé úrovně breadcrumbs */
  body.in-galerie .breadcrumbs #navigation-1 a,
  body.in-galerie .breadcrumbs #navigation-1 span,
  body.in-galerie .breadcrumbs #navigation-2 a,
  body.in-galerie .breadcrumbs #navigation-2 span{
    padding: 0 !important;
  }

  /* Domeček - správné zarovnání boxu */
  body.in-galerie a.navigation-home-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
  }

  /* Ikonka uvnitř boxu - vycentrovat */
  body.in-galerie a.navigation-home-icon::after{
    display: block !important;
    margin: 0 !important;
    position: relative !important;
  }
}

/* mobil/tablet – ještě větší "tap target" */
@media (max-width: 980px){
  body.in-galerie .breadcrumbs{
    font-size: 16px;
    padding: 12px 12px !important;
    margin: 10px 0 12px !important;
  }
  body.in-galerie .breadcrumbs a,
  body.in-galerie .breadcrumbs span[itemprop="name"]{
    padding: 2px 0;                      /* ať se to líp čte */
  }
}

/* ultra mobil – kdyby se to nevešlo, pořád ať je to vidět */
@media (max-width: 420px){
  body.in-galerie .breadcrumbs{
    font-size: 15px;
  }
}



/* =========================================================
   GALERIE – vypnout původní "home" ikonu ze šablony
   (většinou je na wrapperu nebo na #navigation-first)
   ========================================================= */

body.in-galerie .navigation-home-icon-wrapper::before,
body.in-galerie #navigation-first::before,
body.in-galerie #navigation-first > a.navigation-home-icon::before{
  content: none !important;
  display: none !important;
  background: none !important;
}



/* =========================================================
   GALERIE – nový domeček jako SVG (škálovatelný, čistý)
   ========================================================= */

body.in-galerie a.navigation-home-icon{
  /* zrušit interní odsazení pro původní ikonu */
  padding: 0 !important;

  /* klikací plocha */
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0;

  /* aby se tam nedědilo nic ze šablony */
  background-image: none !important;
}

/* samotná ikonka */
body.in-galerie a.navigation-home-icon::after{
  content: "";
  width: 26px;
  height: 26px;

  /* barva ikonky */
  background: rgba(255,255,255,.92);

  /* SVG domeček jako maska */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 2.5 11h2v9.5h6.5V14h2v6.5H19.5V11h2L12 3.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 2.5 11h2v9.5h6.5V14h2v6.5H19.5V11h2L12 3.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* hover */
body.in-galerie a.navigation-home-icon:hover{
  background: rgba(255,255,255,.12);
}

/* mobil větší */
@media (max-width: 980px){
  body.in-galerie a.navigation-home-icon{
    width: 48px !important;
    height: 48px !important;
  }
  body.in-galerie a.navigation-home-icon::after{
    width: 30px;
    height: 30px;
  }
}




/* =========================================================
   GALERIE – styl pro breadcrumb text
   ========================================================= */

body.in-galerie #navigation-1{
  font-weight: 700;
  letter-spacing: .2px;
}




/* =========================================================
   GALERIE – skrýt H1 nadpis (a nechat jen breadcrumbs)
   ========================================================= */

body.in-galerie #content .category-title{
  display: none !important;
}



body.in-galerie #content .category-top{
  margin-top: 0 !important;
}

/* =========================================================
   GALERIE – breadcrumbs zarovnat do stejné šířky jako obsah/menu
   ========================================================= */

body.in-galerie .breadcrumbs{
  max-width: 1378px;          /* stejné jako u .category-top */
  margin-left: auto !important;
  margin-right: auto !important;

  /* bezpečné odsazení na mobilu, aby to neleželo na kraji */
  padding-left: 16px !important;
  padding-right: 16px !important;
}



/* =========================================================
   GALERIE – skrýt systémový footer (newsletter + shoptet)
   ========================================================= */

body.in-galerie #footer .footer-newsletter,
body.in-galerie #footer #signature{
  display: none !important;
}



/*===========================================================
  MOBILNÍ ZOBRAZENÍ
  ===========================================================*/
@media (max-width: 620px){

  body.in-galerie{
    overflow-x: hidden;
  }

  /* 1) wrappery bez bočního odsazení (ať nic "neujede") */
  body.in-galerie .overall-wrapper,
  body.in-galerie #content-wrapper,
  body.in-galerie .content-wrapper,
  body.in-galerie #content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 2) jeden zdroj pravdy pro boční odsazení obsahu */
  body.in-galerie .breadcrumbs,
  body.in-galerie #content ul.subcategories.with-image,
  body.in-galerie #footer{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* 3) grid na 1 sloupec */
  body.in-galerie #content ul.subcategories.with-image{
    grid-template-columns: 1fr;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) položky na 100% */
  body.in-galerie #content ul.subcategories.with-image > li,
  body.in-galerie #content ul.subcategories.with-image > li > a{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body.in-galerie #content ul.subcategories.with-image > li > a{
    min-height: 210px;
  }

  /* 5) pojistka proti přetečení */
  body.in-galerie #content ul.subcategories.with-image > li > a .image,
  body.in-galerie #content ul.subcategories.with-image > li > a .image img{
    max-width: 100% !important;
  }

  /* 6) footer kontejnery bez max-width (copyright bude zarovnaný stejně) */
  body.in-galerie #footer .container,
  body.in-galerie #footer .overall-wrapper,
  body.in-galerie #footer .content-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }



/* bootstrap "gutter" pryč – jinak to posouvá dlaždice */
  body.in-galerie #content ul.subcategories.with-image > li[class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }


/* 1) zabiják overflowu: někde je width:100vw (scrollbar dělá +26px) */
  body.in-galerie .user-action,
  body.in-galerie #header  {
        box-sizing: border-box;
  }

  /* 2) pojistka proti dlouhému textu v menu (tvůj A/B overflow 66/123) */
  body.in-galerie #navigation a,
  body.in-galerie #navigation b{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* pojistka proti "zoom" efektu */
  html, body{
    overflow-x: hidden;
    max-width: 100%;
  }

  /* opravíme overflow zdroj (header/user-action), ale NESAHEJ na .navigation-in */
  body.in-galerie .user-action,
  body.in-galerie #header,
  body.in-galerie .navigation-wrapper{
    width: 100% !important;      /* místo 100vw */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* když někde v menu vznikne dlouhý řetězec, ať se zalomí */
  body.in-galerie #navigation .menu-level-1 a{
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }



/* aby se grid položky uměly smrsknout (nejčastější příčina ořezu doprava) */
  body.in-galerie #content ul.subcategories.with-image,
  body.in-galerie #content ul.subcategories.with-image > li,
  body.in-galerie #content ul.subcategories.with-image > li > a,
  body.in-galerie #content ul.subcategories.with-image > li > a .image{
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* samotný seznam dlaždic – ať je přesně v šířce a centrovaný */
  body.in-galerie #content ul.subcategories.with-image{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 16px !important;  /* tvoje sjednocené odsazení */
    grid-template-columns: 1fr !important;
    justify-items: stretch;
  }

  /* položka a karta opravdu na 100% */
  body.in-galerie #content ul.subcategories.with-image > li,
  body.in-galerie #content ul.subcategories.with-image > li > a{
    width: 100% !important;
  }

  /* pojistka: kdyby se někde nechoval obrázek */
  body.in-galerie #content ul.subcategories.with-image > li > a .image img{
    width: 100% !important;
    height: 100% !important;
  }


}



/* =========================================================
   GALERIE – CATEGORY TOP (nadpis + subcategories) šířka jako obsah (desktop)
   ========================================================= */
@media (min-width: 1257px){
  body.in-galerie #content .category-top{
    max-width: 1378px !important;   /* nebo 100% pokud chceš bez limitu */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}



/* =========================================================
   GALERIE – BREADCRUMBS: stejná šířka jako category-top (desktop)
   ========================================================= */
@media (min-width: 1257px){
  body.in-galerie .breadcrumbs.navigation-home-icon-wrapper{
    max-width: 1378px !important;      /* stejné jako category-top */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* pojistka: ať se vnitřek nesnaží být ještě užší */
  body.in-galerie .breadcrumbs.navigation-home-icon-wrapper .breadcrumbs{
    max-width: none !important;
  }
}


/* =========================================================
   GALERIE – skrýt seznam produktů (jen přehled kategorií)
   ========================================================= */
body.in-galerie.type-category
.category-content-wrapper{
  display: none !important;
}