/* ==========================================================
   Cheese House — custom styly
   Barvy a hodnoty dle Design System (colors_and_type.css)
   ========================================================== */

:root{
  --color-primary:#2C2117;
  --color-primary-hover:#1A1410;
  --color-gold:#D4A017;
  --color-gold-hover:#B58812;
  --color-rust:#7A3E1D;
  --color-rust-hover:#5E2F15;
  --color-ink:#2C2117;
  --color-body:#4A4036;
  --color-muted:#6B6358;
  --color-line:#E7E1D6;
  --color-surface:#FFFFFF;
  --color-surface-warm:#F7F2E9;
  --color-surface-sand:#EFE7D8;
  --color-surface-dark:#2C2117;
  --color-success:#3F7D4E;
  --color-sale:#B23A2F;
  --font-head:"Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(44,33,23,.06);
  --shadow-md:0 4px 12px rgba(44,33,23,.10);
  --shadow-lg:0 12px 28px rgba(44,33,23,.14);
}

/* --- Písmo dle UI kitu na celém webu --- */
/* text webu = Source Sans 3 */
body,
body input,
body select,
body textarea,
body button,
body .btn{
  font-family:var(--font-body)!important;
}
/* nadpisy webu = Exo 2 */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
body .h1,body .h2,body .h3{
  font-family:var(--font-head)!important;
}

/* --- Horní lišta --- */
.top-navigation-bar{background:var(--color-primary)!important}
.top-navigation-menu{display:none!important}

/* --- Hero carousel — plná šířka --- */
.type-index .banners-row,
.before-carousel .banners-row,
#content-wrapper .banners-row{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-top:0;
}
.banners-row .wide-carousel,
.banners-row #carousel,
.banners-row .carousel-inner,
.banners-row .carousel-inner .item,
.banners-row .carousel-inner .item>span{
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  max-width:100%;
  width:100%;
}
.banners-row .carousel-inner .item>span{display:block}
.banners-row,
.banners-row .wide-carousel,
.banners-row #carousel,
.banners-row .carousel-inner{overflow:hidden}
#content-wrapper{padding-top:0!important}
#content-wrapper main#content{padding-top:0!important;margin-top:0!important}
/* Benefit bar — pozadí přes celé okno, 3 benefity v řadě, obsah drží 1200px */
.benefitBanner{
  background:var(--color-surface-warm)!important;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-bottom:1px solid var(--color-line);
  overflow-x:hidden;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.benefitBanner__item{
  flex:1 1 0;
  min-width:240px;
  max-width:400px;
  box-sizing:border-box;
}
.benefitBanner>*{
  padding-top:8px;
  padding-bottom:8px;
}
.h4.homepage-group-title:after,
h4.homepage-group-title:after{
  left:50%;
  transform:translateX(-50%);
  width:100%;
  height:1px;
}
.recipes-section{display:none!important}

/* --- Banner "Poradíme co k čemu" — plná šířka --- */
.middle-banners-wrapper{
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:0!important;
  overflow:hidden;
  border-radius:0!important;
}
.middle-banners-wrapper .content-wrapper-in,
.middle-banners-wrapper .container,
.middle-banners-wrapper .row,
.middle-banners-wrapper [class*="col-"],
.middle-banners-wrapper .banner-wrapper,
.middle-banners-wrapper .banner-wrapper>span,
.middle-banners-wrapper .ch-pair,
.middle-banners-wrapper .ch-pair__bg{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  border-radius:0!important;
}
.middle-banners-wrapper .banner-wrapper>span{display:block}
.middle-banners-wrapper .ch-pair{border-top:0!important}

/* --- Sekční nadpisy --- */
.homepage-group-title,
h4.homepage-group-title,
.h4.homepage-group-title{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--color-ink);
}

/* --- Produktová karta — UI kit styl --- */
.product .p{
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  height:100%;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.product .p:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.product .p .image{display:block;background:var(--color-surface);padding:0}
.product .p .image img{width:100%;height:auto;transition:transform .28s ease}
.product .p:hover .image img{transform:scale(1.04)}
.product .p .flag{
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.product .p .flag-discount{background:var(--color-sale);color:#fff}
.product .p .p-in{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px}
.product .p .p-bottom{display:flex;flex-direction:column;flex:1}
.product .p .prices{margin-top:auto}
.product .p .name{text-decoration:none}
.product .p .name span{
  font-family:var(--font-head);
  font-weight:600;
  font-size:17px;
  line-height:1.25;
  color:var(--color-ink);
  display:block;
  min-height:43px;
}
.product .p .name:hover span{color:var(--color-rust)}
.product .p .ratings-wrapper{display:block!important}
.product .p .availability{
  display:flex!important;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  color:var(--color-success);
  margin-top:6px;
}
.product .p .availability>span:first-child{display:inline-flex;align-items:center;gap:6px}
.product .p .availability>span:first-child::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  flex:0 0 auto;
}
.product .p .availability .availability-amount{color:var(--color-muted)}
.product .p .price-final{margin-top:10px}
.product .p .price-final strong{
  font-family:var(--font-head);
  font-weight:700;
  font-size:19px;
  color:var(--color-ink);
}
.product .p .price-final small{font-weight:500;font-size:13px;color:var(--color-muted)}
.product .p .price-standard{color:var(--color-muted);text-decoration:line-through;font-size:13px}
.product .p .p-tools{display:flex;flex-direction:column;gap:0;margin-top:12px}
.product .p .quantity{
  margin:0!important;
  height:42px;
  padding-bottom:10px;
  display:flex;
  align-items:center;
  box-sizing:content-box;
}
.product .p .quantity input.amount{border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-ink)}
.product .p .quantity .increase,
.product .p .quantity .decrease{color:var(--color-ink)}
.product .p .p-bottom.single-button .quantity{visibility:hidden!important}

/* Tlačítka karty — selektor .p-tools a.btn-primary je nutný, neodstraňovat */
.product .p .btn-cart,
.product .p .add-to-cart-button,
.product .p a.btn-primary,
.product .p .p-tools a.btn-primary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 24px!important;
  margin:0!important;
  background:var(--color-primary)!important;
  border:0!important;
  border-radius:var(--radius-md)!important;
  font-family:var(--font-body)!important;
  font-weight:700!important;
  font-size:15px!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:none!important;
  visibility:visible!important;
  opacity:1!important;
  transition:background .15s ease!important;
}
.product .p .btn-cart,
.product .p .btn-cart *,
.product .p .add-to-cart-button,
.product .p .add-to-cart-button *,
.product .p a.btn-primary,
.product .p a.btn-primary *,
.product .p .p-tools a.btn-primary,
.product .p .p-tools a.btn-primary *{
  color:var(--color-surface-warm)!important;
  visibility:visible!important;
  opacity:1!important;
}
.product .p .btn-cart:hover,
.product .p .add-to-cart-button:hover,
.product .p a.btn-primary:hover{background:var(--color-primary-hover)!important}

/* --- Produktový slider — statický grid, přebití slicku --- */
.products .slick-list{width:100%!important;transform:none!important}
.products .slick-track{
  width:100%!important;
  transform:none!important;
  display:flex!important;
  gap:24px;
}
.products .slick-slide{
  flex:1 1 0!important;
  width:0!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
}
.products .slick-slide>div{height:100%}
.products .slick-arrow{display:none!important}

/* --- Footer — dle UI kitu --- */
#footer{
  background:var(--color-surface-dark)!important;
  color:rgba(247,242,233,.7)!important;
}
#footer .footer-rows{padding-top:64px;padding-bottom:48px}
#footer a{text-decoration:none}
/* nadpisy — plný cream */
#footer h2,
#footer h3,
#footer .pageElement__heading span,
#footer .chstores__title,
#footer strong{
  color:var(--color-surface-warm)!important;
  font-family:var(--font-head);
}
#footer .pageElement__heading span{
  font-weight:600;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* srovnání horního startu sloupců */
#footer .custom-footer{align-items:flex-start}
#footer .custom-footer>div{margin-top:0!important;padding-top:0!important}
#footer .pageElement__heading{margin:0 0 16px!important}
#footer .custom-footer__articles ul{margin-top:0!important}
#footer .custom-footer__articles ul li:first-child{margin-top:0}
/* brandový blok — vynulovat horní mezery všech obalů, ať logo dosedne na linku nadpisů */
#footer [class*="custom-footer__banner"],
#footer [class*="custom-footer__banner"] .banner,
#footer [class*="custom-footer__banner"] .banner-wrapper,
#footer [class*="custom-footer__banner"] .banner-wrapper>span,
#footer .chf-brand,
#footer .chf-brand__inner{
  margin-top:0!important;
  padding-top:0!important;
}
#footer .chf-brand__logo{margin-top:0!important}
/* odkazy menu — cream 70 %, hover zlatá */
#footer .custom-footer__articles ul a{color:rgba(247,242,233,.7)!important;font-size:14px}
#footer .custom-footer__articles ul a:hover{color:var(--color-gold)!important}
#footer .site-name{display:none!important}
#footer .contact-socials a{color:rgba(247,242,233,.7)!important}
/* spodní lišta */
#footer .footer-bottom{
  border-top:1px solid rgba(247,242,233,.1)!important;
  padding:20px 0!important;
  font-size:12px;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
}
#footer .footer-bottom #signature,
#footer .footer-bottom .copyright{
  display:block!important;
  width:100%!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}
#footer .footer-bottom .copyright .podpis,
#footer .footer-bottom .copyright a{
  display:inline!important;
  float:none!important;
  text-align:center!important;
}
#footer .footer-bottom .back-to-top{margin:0 auto!important}
#footer .footer-bottom,
#footer .footer-bottom *,
#footer .footer-bottom a{color:rgba(247,242,233,.5)!important}
#footer .footer-bottom a:hover{color:var(--color-surface-warm)!important}

/* --- Welcome sekce (SEO text pod produkty) --- */
.welcome-wrapper{
  background:var(--color-surface-warm);
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}
.welcome-wrapper .content-wrapper-in,
.welcome-wrapper>.welcome-wrapper{background:transparent}
.welcome-wrapper .welcome{
  max-width:820px;
  margin:0 auto;
  padding:64px 24px;
  text-align:center;
}
.welcome-wrapper .welcome .h1,
.welcome-wrapper .welcome h1{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.2;
  color:var(--color-ink);
  margin:0 0 18px;
}
.welcome-wrapper .welcome p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--color-body);
  margin:0 0 14px;
}
.welcome-wrapper .welcome p:last-child{margin-bottom:0}
.welcome-wrapper .welcome a{color:var(--color-rust);text-decoration:underline}
.welcome-wrapper .welcome a:hover{color:var(--color-rust-hover)}

/* --- Mobil --- */
@media(max-width:767px){
  .top-navigation-bar{background:var(--color-surface)!important}
  .top-navigation-bar a{color:var(--color-primary)!important}
  body #content-wrapper.content-wrapper{padding-top:100px!important}
  .product .p .p-in{padding:12px 12px 16px}
  .product .p .btn-cart,
  .product .p .add-to-cart-button,
  .product .p a.btn-primary{font-size:13px!important;padding:0 8px!important;height:46px!important;min-height:46px!important}
  /* produkty na mobilu = mřížka 2 sloupce (slick je vypnut skriptem) */
  .products .slick-list{overflow:visible!important;width:100%!important}
  .products .slick-track,
  .products .slick-list{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    -webkit-transform:none!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    opacity:1!important;
  }
  .products .product,
  .products .slick-slide{
    width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
    min-width:calc(50% - 6px)!important;
    flex:0 0 calc(50% - 6px)!important;
    margin:0!important;
    padding:0!important;
    float:none!important;
    box-sizing:border-box!important;
  }
  .products .product>.p,
  .products .slick-slide>div{width:100%!important;height:100%!important}
  .products .product:nth-of-type(n+5),
  .products .slick-slide:nth-child(n+5){display:none!important}
  .products .slick-arrow,
  .products .slick-prev,
  .products .slick-next,
  .products .slick-dots{display:none!important}
  .welcome-wrapper .welcome{padding:40px 18px}
}