/* ============================================
   SP-CUSTOM.CSS - Classic template
   Cíl: Roztažení produktu na hlavní straně na celou šířku
   ============================================ */

/* ============================================
   Design tokens
   ============================================ */
:root{
  --ui-surface:#fff;
  --ui-text:#0f172a;
  --ui-muted:#64748b;
  --ui-radius:0;
  --ui-shadow-md:0 14px 34px rgba(15,23,42,.12);
}

/* ============================================
   Single-product HERO na homepage
   Cíl: 1 produkt dominantně, přes celou šířku.
   ============================================ */

/* Pozn.: nezasahujeme do šířky hlavního .containeru – jen produkt má být „full width“ v rámci obsahu. */

/* --- Single-product režim: schovej další produkty na homepage --- */
body.type-index .products .product:not(:first-child){
  display:none !important;
}

/* --- HERO sekce - první produkt přes celou šířku --- */
body.type-index .products.products-block{
  width: 100%;
  max-width: 100%;
  margin: 40px 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  display: block !important;
}

body.type-index .products .product:first-child{
  /* Hero karta je centrovaná a drží rozumnou max šířku */
  width: 100% !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: relative;
  left: auto !important;
  right: auto !important;
  display: block !important;
}

/* HERO karta - vnitřní layout */
body.type-index .products .product:first-child .p{
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) 1fr !important;
  gap: 28px !important;
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 0;
  box-shadow: var(--ui-shadow-md);
  padding: 28px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative; /* kvůli flags */
  overflow: hidden; /* ochrana proti „vyjíždění“ obsahu */
}

/* Techno někdy nastavuje šířky produktů přes inline-block/floats */
body.type-index #products-2.products.products-block{
  width: 100% !important;
  max-width: 100% !important;
}
body.type-index #products-2.products.products-block > .product{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Obrázek produktu - větší, vlevo */
body.type-index .products .product:first-child .p .image{
  width: 100%;
  display: block;
  order: 1;
}

body.type-index .products .product:first-child .p .image img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

/* Obsah produktu - vpravo */
body.type-index .products .product:first-child .p .p-in{
  order: 2;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  min-width: 0; /* aby šel text správně zalamovat v gridu */
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  position: relative !important;
}

/* Vypnout případné centrování/pozicování, které Techno dělá v kartě */
body.type-index #products-2 .product:first-child .p-in,
body.type-index #products-2 .product:first-child .p-in-in,
body.type-index #products-2 .product:first-child .p-bottom{
  text-align: left !important;
  position: relative !important;
  float: none !important;
}

/* Název nahoře, ceny a tlačítka pod ním (sloupec) */
body.type-index #products-2 .product:first-child .p-in{
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

body.type-index #products-2 .product:first-child .p-in-in{
  width: 100% !important;
  display: block !important;
}

body.type-index #products-2 .product:first-child .p-bottom{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kritické: wrapper s cenou/CTA (`data-micro="offer"`) musí mít šířku 100%,
   jinak se na mobilu (a někdy i desktop) tlačítka neprotáhnou na celou šířku. */
body.type-index #products-2 .product:first-child [data-micro="offer"]{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

body.type-index #products-2 .product:first-child .p-code{
  /* ať kód produktu nepřekáží layoutu */
  opacity: .55;
}

/* Zruš levé odsazení názvu (někdy ho Techno přidá přes margin/padding) */
body.type-index #products-2 .product:first-child .p-in-in{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
body.type-index #products-2 .product:first-child a.name{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Název produktu - velký, výrazný */
body.type-index .products .product:first-child .p .p-in .name,
body.type-index .products .product:first-child .p .p-in .name span{
  font-size: clamp(22px, 2.6vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: var(--ui-text) !important;
  margin: 0 0 10px !important;
  text-decoration: none !important;
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-height: none !important;
}

/* Techno někdy dává názvu ořez (line-clamp). Vypni ho pro hero produkt. */
body.type-index .products .product:first-child .p .p-in .name{
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  display: block !important;
}

/* Techno někdy kreslí „linku“ pod názvem přes border/box-shadow/background (a pak se to láme divně).
   V hero produktu to vypneme. */
body.type-index #products-2 .product:first-child a.name,
body.type-index #products-2 .product:first-child a.name span{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Ceny - větší, výraznější */
body.type-index .products .product:first-child .p .prices{
  margin: 14px 0 6px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  position: relative !important;
  float: none !important;
}

body.type-index .products .product:first-child .p .price-standard-wrapper{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

body.type-index .products .product:first-child .p .price-standard-label{
  font-size: 12px;
  color: var(--ui-muted);
}

body.type-index .products .product:first-child .p .price-standard{
  font-size: 14px !important;
  color: var(--ui-muted);
  text-decoration: line-through;
}

body.type-index .products .product:first-child .p .price-final{
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 900 !important;
  color: var(--color-primary, #ff880e) !important;
  margin: 0 !important;
}

body.type-index .products .product:first-child .p .price-save{
  font-size: 13px !important;
  color: var(--ui-muted);
  margin-left: 0;
}

/* Sleva+„původně“ na jednom řádku, finální cena pod tím */
body.type-index #products-2 .product:first-child .prices .price-standard-wrapper,
body.type-index #products-2 .product:first-child .prices .price-save{
  order: 1;
}
body.type-index #products-2 .product:first-child .prices .price-final{
  order: 2;
}

/* Zarovnání hodnocení a dostupnosti – jednoduché, bez hacků */
body.type-index #products-2 .product:first-child .ratings-wrapper{
  display: block;
  margin: 24px 0 0;
  min-height: auto;
  padding-bottom: 0;
}

/* Jemné posunutí textu dostupnosti níž pro širší breakpoint (~desktop) */
@media (min-width: 1200px) and (max-width: 1500px){
  body.type-index #products-2 .product:first-child .ratings-wrapper{
    margin-top: 36px;
  }
}

/* ============================================
   Footer bannery – mobilní zobrazení
   ============================================ */
@media (max-width: 767px){
  .custom-footer .banner,
  .custom-footer .banner-wrapper{
    min-height: auto;
    margin-bottom: 0;
    overflow: visible;
    position: static;
  }

  .custom-footer .banner img{
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Footer wrapper – bez okrajové čáry na všech zařízeních */
.custom-footer{
  border: 0 !important;
}

/* Footer wrapper – na mobilu bez horního vnitřního odsazení */
@media (max-width: 767px){
  .custom-footer.elements-2{
    padding-top: 0;
  }

  /* Homepage welcome + sales blok – zrušení bočních paddingů containeru na mobilu */
  .content-wrapper.homepage-box.welcome-wrapper .container{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Spodní část footeru – odstranění horní čáry na všech zařízeních */
.footer-bottom{
  border-top: 0 !important;
}

body.type-index #products-2 .product:first-child .availability{
  margin: 0;
  padding: 0;
  text-align: left;
}

body.type-index #products-2 .product:first-child .availability span{
  white-space: normal;
  font-weight: 700;
}

/* Zarovnání tlačítka a popisu produktu */
body.type-index .products .product:first-child .p .p-bottom.single-button{
  text-align: left !important;
}

body.type-index .products .product:first-child .p .p-tools{
  margin-top: 16px;
  display: inline-flex;
  justify-content: flex-start;
}

body.type-index .products .product:first-child .p .p-desc{
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  max-width: none;
}

/* Welcome blok – zrušení max-width nadpisu i textu */
body.type-index .welcome div,
body.type-index .welcome h1{
  max-width: none !important;
}

/* ============================================
   Homepage – Poctivec blok: oprava zarovnání FAQ
   Důvod: Shoptet/welcome styly často centrováním (margin auto / max-width)
   rozbijí šířku vnořených divů. Omezujeme zásah pouze na FAQ v našem bloku.
   ============================================ */
body.type-index .welcome .poctivec-block__faq {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body.type-index .welcome .poctivec-block__faq div,
body.type-index .welcome .poctivec-block__faq-list,
body.type-index .welcome .poctivec-block__faq-item {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Vypnutí pravé linky mezi produkty na tabletu (jen homepage) */
@media (min-width: 480px){
  body.type-index .products.products-block > div{
    border-right-width: 0 !important;
    border-right-style: none !important;
  }
}

/* Flags (Akce badge) - větší */
body.type-index .products .product:first-child .p .flags{
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
}

body.type-index .products .product:first-child .p .flag{
  font-size: 14px !important;
  padding: 6px 12px !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
}

/* Konkrétně sleva: zelené pozadí, bílý text, bez kolečka */
body.type-index .products .product:first-child .p .flag-discount{
  background: #77bb41 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.type-index .products .product:first-child .p .flag-discount .price-standard span{
  color: rgba(255,255,255,0.75) !important;
}

body.type-index .products .product:first-child .p .flag-discount .price-save{
  color: #ffffff !important;
}

/* Mobil / užší tablet: hero karta do 1 sloupce (včetně ~991px) */
@media (max-width: 991px) {
  body.type-index .products .product:first-child{
    max-width: 100%;
  }

  body.type-index .products .product:first-child .p{
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px !important;
  }
  
  body.type-index .products .product:first-child .p .image{
    order: 1;
  }
  
  body.type-index .products .product:first-child .p .p-in{
    order: 2;
    display: flex !important;
    flex-direction: column !important;
  }
  
  body.type-index #products-2 .product:first-child .p-in-in{
    width: 100% !important;
  }
  
  body.type-index #products-2 .product:first-child .p-bottom{
    width: 100% !important;
  }
}

/* ============================================
   Skrytí vyhledávání na celém e-shopu
   ============================================ */
.header-top .search {
  display: none !important;
}

/* Skrytí ikony vyhledávání na mobilu */
.responsive-tools a[data-target="search"] {
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Zarovnání košíku vpravo na PC */
@media (min-width: 992px) {
  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navigation-buttons {
    margin-left: auto;
  }
}
/* (blok Poctivec – styly dočasně odstraněny) */

/* ============================================
   Notifikace „Produkt byl přidán do košíku“
   Cíl: nezakrývat celou šířku, chovat se jako toast
   ============================================ */

/* Varianta A (doporučeno): zmenšený toast vpravo nahoře */
.messages {
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  width: auto;
  max-width: min(420px, calc(100vw - 24px));
  z-index: 99999;
  pointer-events: none; /* aby to nezachytávalo kliky mimo */
}

.messages .msg {
  pointer-events: auto; /* ale uvnitř (např. odkaz) funguje */
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.messages .msg-success {
  background: #77bb41 !important;
  color: #ffffff !important;
  border-color: #77bb41 !important;
}

.messages .msg-success a {
  color: #ffffff !important;
  text-decoration: underline;
}

.messages .msg .container {
  max-width: none !important;
  width: auto !important;
  padding: 10px 12px !important;
}

.messages .msg span,
.messages .msg a {
  font-size: 13px;
  line-height: 1.4;
}

.messages .msg a {
  font-weight: 800;
  text-decoration: underline;
}

/* Na mobilu: přes celou šířku, ale nízké */
@media (max-width: 767px) {
  .messages {
    top: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
  }
}

/* ============================================
   Skrytí položek menu na mobilním zobrazení
   Cíl: skrýt "produkty", "Pivní sety" a "Přihlášení" v navigaci
   ============================================ */
@media (max-width: 767px) {

  /* Skrytí položky "Pivní sety" */
  .navigation-in .menu-item-721,
  .navigation-in .menu-item-721 a {
    display: none !important;
  }

  /* Skrytí položky "Přihlášení" */
  .navigation-in .navigationActions a[href*="/login/"],
  .navigation-in .navigationActions a[data-testid="signin"] {
    display: none !important;
  }

  /* Pokud je celý seznam navigationActions prázdný, skrýt i jeho wrapper */
  .navigation-in .navigationActions:only-child,
  .navigation-in .navigationActions:empty {
    display: none !important;
  }
}

/* ============================================
   Skrytí drobečkové navigace napříč celým e-shopem
   ============================================ */
.breadcrumb,
.breadcrumbs,
.breadcrumb-wrapper,
.breadcrumb-nav {
  display: none !important;
}

/* ============================================
   Skrytí hodnocení produktů (hvězdičky) napříč celým e-shopem
   ============================================ */
.stars-wrapper,
.stars,
.star-list,
.stars-label,
.ratings-wrapper,
.product-rating,
.rating {
  display: none !important;
}

/* ============================================
   Skrytí doplňkových parametrů v produktovém detailu
   ============================================ */
.extended-description {
  display: none !important;
}