/* ================================================================ */
/* SORTIMENT-GLOBAL.CSS - Kompletní styly pro eshop                 */
/* ================================================================ */

/* ==== 1. ZÁKLADNÍ NASTAVENÍ ===================================== */
/* 1.1 Barevné proměnné a typografie */
:root {
  /* Základní barvy */
  --col-primary:    #945b16;
  --col-dark:       #333;
  --col-light:      #ebdecd;
  --col-white:      #FFF;
  --col-border:     #544523;
  
  /* Barvy patičky */
  --footer-bg:      #171514;
  --footer-text:    #ddc7a7;
  --footer-hover:   #ffc566;
  
  /* Typografie a základní prvky */
  --font-base:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:         12px;
  --shadow-light:   0 4px 15px rgba(0,0,0,0.05);
  
  /* SNPT Chess komponenty - proměnné */
  --snpt-chess-gap-side: 40px;      /* mezera vedle bloku – desktop */
  --snpt-chess-padding: 50px;       /* padding textu – desktop */
  --snpt-chess-pad-mobile: 20px;    /* padding textu – tablet/mob */
}

/* 1.2 Hlavní kontejner */
.kontakt-stranka-container {
  max-width:        1200px;
  margin:           0 auto;
  padding:          45px 20px;
  font-family:      var(--font-base);
  color:            var(--col-dark);
  background:       var(--col-white);
}

/* ==== 2. HLAVNÍ KOMPONENTY ====================================== */
/* 2.1 KONTAKTNÍ BOXY - unikátní ikony, bez kolize s globály */
.top-contacts {
  display:         flex;
  justify-content: center;
  gap:             30px;
  margin-bottom:   60px;
  flex-wrap:       wrap;
}

.contact-box-wrapper {
  flex:             0 1 350px;
  max-width:        380px;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  background:       var(--col-white);
  padding:          25px 25px;
  border:           1px solid var(--col-border);
  border-radius:    var(--radius);
  box-shadow:       var(--shadow-light);
  text-align:       center;
  min-height:       220px;
}

.contact-box-wrapper .contact-title {
  font-size:       1.8rem;
  font-weight:     600;
  margin-bottom:   20px;
}

/* Unikátní třída pro ikonky */
.contact-box__icon {
  width:           52px !important;  /* 35% z 150px */
  height:          52px !important;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   25px;
}
.contact-box__icon img {
  width:           100% !important;
  height:          auto !important;
  max-width:       none !important;
  max-height:      none !important;
}

.contact-box-wrapper .contact-detail {
  font-size:       2.5rem;
  font-weight:     700;
  color:           var(--col-primary);
}
.contact-box-wrapper .contact-detail a {
  color:           inherit;
  text-decoration: none;
}
.contact-box-wrapper .contact-detail a:hover {
  text-decoration: underline;
}

/* 2.2 SHOWROOM - layout a vizuální styl */
.showroom-banner {
  display:          flex;
  background:       var(--col-light);
  border-radius:    var(--radius);
  overflow:         hidden;
  margin-bottom:    60px;
  box-shadow:       0 8px 30px rgba(0,0,0,0.1);
  min-height:       400px;
}
.showroom-banner:hover {
  transform:        translateY(-3px) scale(1.005);
}

.showroom-text {
  flex:            1;
  padding:         45px 35px;
  background:      var(--col-white);
}

.showroom-text h2 {
  font-size:      3.3rem;
  margin:         0 0 25px;
  color:          var(--col-primary);
  letter-spacing: 0.5px;
}

.showroom-text p {
  display:        block !important;
  font-size:      1.5rem;
  color:          var(--col-dark);
  line-height:    1.4;
  white-space:    normal;
}
.showroom-text p i {
  font-size:      1.8rem;
  color:          var(--col-primary);
}

/* Tlačítko */
.showroom-text .btn {
  margin-top:       25px;
  padding:          18px 40px;
  background:       var(--col-primary);
  color:            var(--col-white);
  border-radius:    30px;
  font-size:        2rem;
  font-weight:      700;
  text-decoration:  none;
  display:          inline-flex;
  align-items:      center;
}
.showroom-text .btn:hover {
  background:       #e65c00;
  transform:        scale(1.03);
}

/* Základní styl tlačítka s vyšší specifičností */
html body .snpt-btn.snpt-btn--primary,
body .kontakt-stranka-container .snpt-btn.snpt-btn--primary,
.site-content .snpt-btn.snpt-btn--primary,
#content .snpt-btn.snpt-btn--primary {
  background: var(--col-primary) !important;
  color: var(--col-white) !important;
  text-decoration: none !important;
}

/* Hover stav s vyšší specifičností a zajištěním světle žluté barvy textu */
html body .snpt-btn.snpt-btn--primary:hover,
body .kontakt-stranka-container .snpt-btn.snpt-btn--primary:hover,
.site-content .snpt-btn.snpt-btn--primary:hover,
#content .snpt-btn.snpt-btn--primary:hover {
  background: #ea4600 !important; /* Tmavší oranžová pro pozadí */
  color: #ffe044 !important; /* Světle žlutá pro text */
  transform: scale(1.03);
  text-decoration: none !important;
}

/* Zajištění stejné barvy pro případné odkazy uvnitř tlačítek */
html body .snpt-btn.snpt-btn--primary:hover a,
body .kontakt-stranka-container .snpt-btn.snpt-btn--primary:hover a,
.site-content .snpt-btn.snpt-btn--primary:hover a,
#content .snpt-btn.snpt-btn--primary:hover a {
  color: #fff4c0 !important; /* Světle žlutá pro text */
  text-decoration: none !important;
}

/* Zvláštní pravidlo pro všechny ostatní velikostní varianty */
html body .snpt-btn[class*="snpt-btn--"]:hover,
body .kontakt-stranka-container .snpt-btn[class*="snpt-btn--"]:hover,
.site-content .snpt-btn[class*="snpt-btn--"]:hover,
#content .snpt-btn[class*="snpt-btn--"]:hover {
  color: #fff4c0 !important; /* Světle žlutá pro text */
}

/* Obrázek - UPRAVENO */
.showroom-image {
  flex: 2;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* Nové pravidlo pro img tag uvnitř .showroom-image */
.showroom-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 2.3 FAKTURAČNÍ ÚDAJE */
.billing-separator {
  width: 100%;
  height: 1px;
  background-color: var(--col-border);
  margin: 60px 0 40px;
}

.billing-info-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.billing-boxes-wrapper {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 30px;
}

.billing-faktura { grid-column: 1; grid-row: 1 / span 2; }
.billing-ucet   { grid-column: 2; grid-row: 1; }
.billing-iban   { grid-column: 2; grid-row: 2; }

.billing-box {
  background-color: var(--col-white);
  border-radius:    var(--radius);
  box-shadow:       var(--shadow-light);
  border:           1px solid var(--col-border);
  padding:          30px 25px;
  display:          flex;
  flex-direction:   column;
}

.billing-box h3 {
  font-size:      2.1rem;
  color:          var(--col-dark);
  margin:         0 0 20px;
  padding-bottom: 12px;
  border-bottom:  3px solid var(--col-primary);
  font-weight:    600;
}

.billing-content { flex: 1; }
.billing-box p {
  font-size:   1.5rem;
  line-height: 1.7;
  margin:      0 0 10px;
}
.billing-box p:last-child { margin-bottom: 0; }

/* ==== 3. SNPT KOMPONENTY ======================================== */
/* 3.1 Tri-boxes - každý box s rámečkem + stínem */
.snpt-3boxes {
  display: flex;
  gap: 30px;
  align-items: stretch;
}
.snpt-3boxes__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--col-white);
  border: 1px solid var(--col-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  overflow: hidden;
}
.snpt-3boxes__img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.snpt-3boxes__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.snpt-3boxes__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.snpt-3boxes__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--col-primary);
  margin: 0 0 10px;
  text-align: center;
}
.snpt-3boxes__text {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--col-dark);
  margin: 0;
  flex: 1;
}

/* 3.2 Chessboard - šachovnicové rozvržení */
.snpt-chess {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin: 0;
}

.snpt-chess-item {
  display: flex;
  align-items: stretch;
  background: var(--col-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.snpt-chess-item--text-left  { flex-direction: row; margin-right: var(--snpt-chess-gap-side); }
.snpt-chess-item--text-right { flex-direction: row-reverse; margin-left: var(--snpt-chess-gap-side); }

.snpt-chess-item__img {
  flex: 0 0 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 1px;
}
.snpt-chess-item__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.snpt-chess-item__text {
  flex: 0 0 50%;
  padding: var(--snpt-chess-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.snpt-chess-item__text > *:first-child { margin-top: 0; }
.snpt-chess-item__text > *:last-child  { margin-bottom: 0; }

.snpt-chess-item__text h3 {
  font-size: 2.0rem;
  margin: 0 0 15px;
  color: var(--col-primary);
}
.snpt-chess-item__text p,
.snpt-chess-item__text ul {
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--col-dark);
}
.snpt-chess-item__text ul { padding-left: 1.2em; margin: 0; }
.snpt-chess-item__text li { margin-bottom: 0.4em; }

/* 3.3 Box Grid Variants - 1-5 boxů na řádek, různá pozadí */
.snpt-box-grid { display: grid; gap: 30px; }
.snpt-box-grid--1 { grid-template-columns: 1fr; }
.snpt-box-grid--2 { grid-template-columns: repeat(2, 1fr); } 
.snpt-box-grid--3 { grid-template-columns: repeat(3, 1fr); }
.snpt-box-grid--4 { grid-template-columns: repeat(4, 1fr); }
.snpt-box-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Přizpůsobení boxu obsahu - univerzální řešení */
.snpt-box-grid__item {
  /* Základní vlastnosti */
  padding: 20px !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  background: var(--col-white);
  
  /* Klíčové vlastnosti pro přizpůsobení obsahu */
  display: inline-block !important; /* Umožňuje elementu přizpůsobit se obsahu */
  width: 100% !important; /* Zachovává plnou šířku */
  box-sizing: border-box !important;
  height: auto !important; /* Zruší pevnou výšku */
  min-height: 0 !important; /* Zruší minimální výšku */
  max-height: none !important; /* Zruší maximální výšku */
  overflow: visible !important; /* Dovolí obsahu přetékat v případě potřeby */
}

.snpt-box-grid__item--border {
  border: 1px solid var(--col-border);
}
.snpt-box-grid__item--bg {
  background: var(--col-light);
}
.snpt-box-grid__item--accent {
  background: #fff4d5;
}
.snpt-box-grid__item h3 {
  margin: 0 0 10px;
  font-size: 2rem;
  color: var(--col-primary);
}

.snpt-box-grid__item p {
  margin: 0 0 10px !important; /* Konzistentní spodní margin */
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Nastavení vnitřních elementů */
.snpt-box-grid__item > * {
  margin-top: 0 !important; /* První element nemá horní margin */
  margin-bottom: 10px !important; /* Konzistentní mezery mezi elementy */
}

/* Poslední element v boxu */
.snpt-box-grid__item > *:last-child {
  margin-bottom: 0 !important; /* Odstraní spodní margin posledního prvku */
  padding-bottom: 0 !important; /* Odstraní spodní padding posledního prvku */
}

/* 3.4 Column Rows - čisté sloupce bez rámečků (3,4 nebo 5) */
.snpt-col-row { display: grid; gap: 30px; align-items: start; }
.snpt-col-row--3 { grid-template-columns: repeat(3, 1fr); }
.snpt-col-row--4 { grid-template-columns: repeat(4, 1fr); }
.snpt-col-row--5 { grid-template-columns: repeat(5, 1fr); }
.snpt-col-row__item {
  text-align: center;
}
.snpt-col-row__item img {
  display: block; margin: 0 auto;
  max-width: 100%; height: auto;
}
.snpt-col-row__item h3 {
  margin: 12px 0 0;
  font-size: 1.8rem;
  color: var(--col-primary);
}

/* 3.5 Tlačítka - všechny velikosti a varianty */
.snpt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-light);
}
.snpt-btn--primary {
  background: var(--col-primary);
  color: var(--col-white);
}
.snpt-btn--sm { font-size: 1.4rem; padding: 8px 16px; }
.snpt-btn--ms { font-size: 1.6rem; padding: 10px 20px; } /* mezi "sm" a "md" */
.snpt-btn--md { font-size: 1.8rem; padding: 12px 24px; }
.snpt-btn--ml { font-size: 2rem; padding: 14px 28px; }   /* mezi "md" a "lg" */
.snpt-btn--lg { font-size: 2.2rem; padding: 16px 32px; }
.snpt-btn--stacked {
  flex-direction: column;
  line-height: 1.2;
  padding: 12px 24px;
}
.snpt-btn:hover {
  background: #e65c00;
  transform: scale(1.03);
}
.snpt-btn:hover a {
  color: white !important;
}



/* ==== 5. RESPONSIVITA =========================================== */
/* 5.1 Desktop -> Tablet přechod (992px) */
@media (max-width: 992px) {
  /* Showroom banner */
  .showroom-banner { flex-direction: column; }
  .showroom-image { 
    /* zrušíme background-image a výškové limity */
    background-image: none !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .showroom-image img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* SNPT Chess */
  :root { --snpt-chess-gap-side: 30px; }
}

/* 5.2 Tablet přechod (768px) */
@media (max-width: 768px) {
  /* Kontaktní boxy */
  .top-contacts { flex-direction: column; gap: 25px; }
  .contact-box-wrapper { max-width: 400px; width: 100%; }
  
  /* Billing boxes */
  .billing-info-container,
  .billing-boxes-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 16px !important;
    width: 100% !important;
  }
  
  .billing-box {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  
  .billing-box h3,
  .billing-box .billing-content,
  .billing-box p {
    text-align: left !important;
  }
  
  .billing-box .billing-content {
    padding: 8px 0 !important;
  }
  
  /* SNPT komponenty */
  .snpt-3boxes { flex-direction: column; }
  .snpt-box-grid--5 { grid-template-columns: 1fr 1fr; }
  
  /* SNPT Chess */
  :root { --snpt-chess-gap-side: 25px; }
  .snpt-chess { gap: 30px; }
  .snpt-chess-item { flex-direction: column-reverse; }
  
  .snpt-chess-item__img,
  .snpt-chess-item__text {
    flex: 0 1 auto;
    width: 100%;
  }
  .snpt-chess-item__text { padding: var(--snpt-chess-pad-mobile); }
}

/* 5.3 Mobilní přechod (576px) */
@media (max-width: 576px) {
  /* Kontaktní boxy */
  .contact-box-wrapper .contact-title { font-size: 1.2rem; }
  .contact-box-wrapper .contact-detail { font-size: 1.6rem; }
  .contact-box-wrapper { padding: 30px 20px; min-height: 240px; }
  
  /* Top contacts - dvě vedle sebe */
  .top-contacts {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 8px !important;
  }
  
  .contact-box-wrapper {
    flex: 0 0 48% !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  .contact-box__icon {
    margin-bottom: 6px !important;
  }
  .contact-box__icon img {
    width: 32px !important;
    height: auto !important;
  }
  
  .contact-title {
    font-size: 1.2rem !important;
    margin-bottom: 4px !important;
  }
  .contact-detail a {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }
  
  /* SNPT komponenty */
  .snpt-box-grid--2,
  .snpt-box-grid--3,
  .snpt-box-grid--4,
  .snpt-box-grid--5 { grid-template-columns: 1fr; }
  
  .snpt-chess-item__text { padding: 15px; }
}

/* ==== 6. SNPT TILE GRID – 4×2 DYNAMICKÉ DLAŽDICE (REV 3) ==== */
.snpt-tile-grid{
  --gap:30px;                   /* mezeru máme k dispozici i v calc() */
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  grid-template-areas:
    "tall item2 item3 item4"
    "tall item6 wide  wide";
}

/* --- společné vlastnosti každé dlaždice --- */
.snpt-tile-grid__item{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-light);
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease;
}
.snpt-tile-grid__item:hover{transform:translateY(-3px) scale(1.02);}

/* obrázek = absolutně pod textem, vždy vyplní box */
.snpt-tile-grid__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
}

/* text = absolutně nad obrázkem */
.snpt-tile-grid__text{
  position:absolute;
  inset-inline:20px;
  bottom:20px;
  margin:0;
  font-size:1.6rem;font-weight:600;
  text-transform:uppercase;
  color:var(--col-white);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  line-height:1.2;
  z-index:1;
}

/* --- specifické oblasti / poměry --- */
.snpt-tile--tall {grid-area:tall; grid-row:span 2;}      /* výška = 2 řádky + gap   */
.snpt-tile--wide {grid-area:wide; grid-column:span 2;}   /* šířka  = 2 sloupce+gap  */

/* čtvercové dlaždice udrží aspect-ratio 1/1 */
.snpt-tile--item2,
.snpt-tile--item3,
.snpt-tile--item4,
.snpt-tile--item6{aspect-ratio:1/1;}
.snpt-tile--item2{grid-area:item2;}
.snpt-tile--item3{grid-area:item3;}
.snpt-tile--item4{grid-area:item4;}
.snpt-tile--item6{grid-area:item6;}

/* --- RESPONSIVITA: 2 sloupce na mobilu --- */
@media(max-width:576px){
  .snpt-tile-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "tall item2"
      "tall item6"
      "item3 item4"
      "wide wide";
  }
}

/* ==== SNPT TILE/TITLE GRID – TEXT OVERLAY ==== */

/* 1) rodič musí být position:relative */
.snpt-tile-grid__item,
.snpt-title-grid__item {
  position: relative !important;
  overflow: hidden;
}

/* 2) text – pseudo-element ::after */
.snpt-tile-grid__item::after,
.snpt-title-grid__item::after {
  content: attr(data-text);      /* 1 krok: text z atributu */
  position: absolute !important; /* vždy relativně k dlaždici */
  left: 20px !important;
  right: 20px !important;
  bottom: 20px !important;

  font-size: 1.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
  line-height: 1.2 !important;

  pointer-events: none !important;
  z-index: 2 !important;
  white-space: pre-wrap !important;  /* delší text zalomí */
}

/* 3) původní vnitřní div, pokud zůstal, skryjeme */
.snpt-tile-grid__text,
.snpt-title-grid__text {
  display: none !important;
}

/* === Mobil: zajistit výšku řádku + šířku wide dlaždice === */
@media (max-width: 576px) {

  /* 1) každému novému řádku dovol růst podle obsahu */
  .snpt-tile-grid {
    grid-auto-rows: auto;
  }

  /* 2) wide dlaždice natvrdo přes obě kolony + poměr 2:1 */
  .snpt-tile--wide {
    grid-column: 1 / -1;   /* = 1 až konec gridu (2. kolona) */
    aspect-ratio: 2 / 1;
  }
}

/* ==== Variant 1: wide vlevo, dva čtverce vpravo ==== */
.snpt-tile-grid-v1 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4,1fr);
  grid-template-areas: "wide wide item2 item3";
}
.snpt-tile-v1--wide { grid-area: wide; aspect-ratio: 2/1; }
.snpt-tile-v1--item2{ grid-area: item2; aspect-ratio: 1/1; }
.snpt-tile-v1--item3{ grid-area: item3; aspect-ratio: 1/1; }

/* mobil: wide nahoře, čtverce pod ním */
@media(max-width:576px){
  .snpt-tile-grid-v1 {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas:
      "wide wide"
      "item2 item3";
  }
}

/* ==== Variant 2: 2× čtverec vlevo, wide vpravo ==== */
.snpt-tile-grid-v2 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4,1fr);
  grid-template-areas: "item2 item3 wide wide";
}
.snpt-tile-v2--item2{ grid-area: item2; aspect-ratio: 1/1; }
.snpt-tile-v2--item3{ grid-area: item3; aspect-ratio: 1/1; }
.snpt-tile-v2--wide { grid-area: wide; aspect-ratio: 2/1; }

/* mobil: 2× čtverec nahoře, wide pod nimi */
@media(max-width:576px){
  .snpt-tile-grid-v2 {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas:
      "item2 item3"
      "wide  wide";
  }
}

/* ==== Variant 3: 4× čtverec vedle sebe ==== */
.snpt-tile-grid-v3 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4,1fr);
  grid-template-areas: "item1 item2 item3 item4";
}
.snpt-tile-v3--item1{ grid-area: item1; aspect-ratio: 1/1; }
.snpt-tile-v3--item2{ grid-area: item2; aspect-ratio: 1/1; }
.snpt-tile-v3--item3{ grid-area: item3; aspect-ratio: 1/1; }
.snpt-tile-v3--item4{ grid-area: item4; aspect-ratio: 1/1; }

/* mobil: 2 sloupce – první dva nahoře, další dva pod nimi */
@media(max-width:576px){
  .snpt-tile-grid-v3 {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas:
      "item1 item2"
      "item3 item4";
  }
}

/* ---- Globální jistič pro všechny snpt gridy ---- */
.snpt-tile-grid,
[class*="snpt-tile-grid-v"] {
  /* fallback, kdyby se někdy proměnná nezavedla */
  --gap: 30px !important;
  grid-auto-rows: 1fr; /* vždycky aspoň nějaká výška */
}

/* Mobilní jistič, aby wide zůstal vidět */
@media(max-width:576px){
  /* wide natáhni přes celé 2 sloupce, kdybychom to zapomněli */
  [class*="snpt-tile-"][class*="--wide"]{
    grid-column:1 / -1 !important;
    aspect-ratio:2/1 !important;
  }
}
/* ==== 3.X SNPT PHOTO BOXES – 2×2 (obdélník + čtverec / zrcadlo) ==== */

/* Kontejner */
.snpt-photo-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Společné styly položky */
.snpt-photo-boxes__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  background: var(--col-light);
}

/* Obecné nastavení obrázku */
.snpt-photo-boxes__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Obdélník (poměr 2:1) */
.snpt-photo-boxes__item--rect {
  aspect-ratio: 2 / 1;
}

/* Čtverec (poměr 1:1) */
.snpt-photo-boxes__item--square {
  aspect-ratio: 1 / 1;
}
:root {
  /* snadné jemné doladění – stejné jako dřív */
  --bb-photo-gap: 50px;
  --bb-flex-wide: 5;
  --bb-flex-narrow: 3.5;

  /* společná „výška v jednotkách" – vůči ní počítáme poměry šířek */
  --bb-unit-height: 3;
}

/* kontejner celé galerie */
.bb-photo-grid {
  margin: 0 auto;
  padding: 0 50px;
}

/* řádky */
.bb-photo-row {
  display: flex !important;
  gap: var(--bb-photo-gap) !important;
  margin-bottom: var(--bb-photo-gap);
}
.bb-photo-row:last-child { margin-bottom: 0; }
.bb-photo-row--reverse { flex-direction: row-reverse !important; }

/* box + obraz */
.bb-photo-box {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
}

/* *** klíčové: poměry stran + fallback *** */

/* --- širší obdélník (5 × 3) */
.bb-photo-box--wide {
  flex: var(--bb-flex-wide) 1 0 !important;
  aspect-ratio: calc(var(--bb-flex-wide) / var(--bb-unit-height));
}
.bb-photo-box--wide::before {         /* fallback pro starší prohlížeče */
  content: "";
  display: block;
  padding-top: calc(100% * var(--bb-unit-height) / var(--bb-flex-wide));
}

/* --- užší obdélník (3.5 × 3) */
.bb-photo-box--narrow {
  flex: var(--bb-flex-narrow) 1 0 !important;
  aspect-ratio: calc(var(--bb-flex-narrow) / var(--bb-unit-height));
}
.bb-photo-box--narrow::before {
  content: "";
  display: block;
  padding-top: calc(100% * var(--bb-unit-height) / var(--bb-flex-narrow));
}

/* samotný <img> vyplní box a ořízne se */
.bb-photo-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* mobil – fotky pod sebe */
@media (max-width: 600px) {
  .bb-photo-row { flex-direction: column !important; }
  /* chceme-li na mobilu zachovat poměry, nic nemusíme měnit.
     Pokud by výška příliš narůstala, lze snížit --bb-unit-height
     v @media query. */
}
/* ===== upravíme padding a mezery na 20px ===== */
.bbx-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bbx-gap);
  padding: 0 var(--bbx-gap);
  box-sizing: border-box;
  align-items: stretch;   /* všechny boxy do jedné výšky */
}

.bbx-benefit {
  background: #fff;
  border-radius: var(--bbx-radius);
  box-shadow: var(--bbx-shadow);
  padding: 20px;          /* přesně 20px od všech hran */
  box-sizing: border-box; /* aby padding neovlivnil šířku */
  display: flex;
  flex-direction: column;
}

/* ikona má 20px od horní hrany boxu (díky paddingu) */
/* a 20px pod sebou k nadpisu */
.bbx-benefit__icon {
  width: var(--bbx-icon-size) !important;
  height: var(--bbx-icon-size) !important;
  margin: 0 0 20px;       /* 20px pod ikonou */
  flex: 0 0 auto;
}

/* nadpis — 8px od ikony a 8px k textu */
.bbx-benefit__title {
  margin: 0 0 8px;
  flex: 0 0 auto;
}

/* text — od spodní hrany boxu bude minimálně 20px */
/* krátký text box roztáhne až k dolnímu paddingu */
.bbx-benefit__text {
  margin: 0 0 20px;
  flex: 0 0 auto;
}
:root {
  /* doplňujeme */
  --bbx-pad-vertical:   20px;   /* od horní i spodní hrany boxu */
  --bbx-pad-horizontal: 16px;   /* od levé i pravé hrany boxu */
}

/* upravíme padding boxu */
.bbx-benefit {
  padding: var(--bbx-pad-vertical) var(--bbx-pad-horizontal);
}

/* ikona 20px od vrchu + 16px pod sebou */
.bbx-benefit__icon {
  margin: 0 0 var(--bbx-pad-vertical);
}

/* nadpis 8px od ikonky a 8px od textu – toto zůstává, jen aby byl rytmus */
.bbx-benefit__title {
  margin: 0 0 8px;
}

/* text 20px nad spodní hranou */
.bbx-benefit__text {
  margin: 0 0 var(--bbx-pad-vertical);
}
/* ===== FINÁLNÍ ÚPRAVY PADDINGŮ a MARGINŮ pro bbx-benefit ===== */
:root {
  /* odsazení uvnitř boxu */
  --bbx-pad-vertical:   20px;   /* horní + spodní */
  --bbx-pad-horizontal: 16px;   /* levý + pravý */
}

/* Ujistěte se, že grid roztahuje buňky na výšku nejvyššího */
.bbx-benefits {
  display: grid; /* už máte */
  align-items: stretch;
}

/* Nový padding boxu */
.bbx-benefit {
  box-sizing: border-box;  
  padding: var(--bbx-pad-vertical) var(--bbx-pad-horizontal);
}

/* Ikona – přesně 20px od horního okraje obsahu a 20px pod ní */
.bbx-benefit__icon {
  margin: 0 0 var(--bbx-pad-vertical);
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px;
}

/* Mezera mezi ikonou a nadpisem */
.bbx-benefit__title {
  margin: 0 0 8px;
}

/* Text – 20px nad spodním okrajem boxu */
.bbx-benefit__text {
  margin: 0 0 var(--bbx-pad-vertical);
  flex-shrink: 0;
}
/* === Doladění rámečků a stínu jako u top-contacts === */
.bbx-benefit {
  background: var(--col-white);               /* stejné pozadí */
  border: 1px solid var(--col-border);        /* stejná šedá linka */ 
  border-radius: var(--bbx-radius);           /* stejné zaoblení rohů */
  box-shadow: var(--shadow-light);            /* stejný jemný stín */
}
/* Vylepšení bb-photo-grid pro konzistenci s designovým systémem */
.bb-photo-box {
  border-radius: var(--radius);  /* zaoblené rohy */
  box-shadow: var(--shadow-light);  /* jemný stín */
  overflow: hidden;  /* aby obrázek nepřetékal přes zaoblené rohy */
}

/* Přidání přechodového efektu pro interaktivitu */
.bb-photo-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bb-photo-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Zajištění správného zobrazení na mobilu s zachováním poměrů */
@media (max-width: 600px) {
  .bb-photo-row {
    flex-direction: column !important;
    gap: 30px !important;  /* menší mezera na mobilu */
  }
  
  /* Zajištění minimální výšky pro obdélníky na mobilu */
  .bb-photo-box {
    min-height: 180px;
  }
}
/* ===== FINÁLNÍ ÚPRAVY PADDINGŮ a MARGINŮ pro bbx-benefit ===== */
:root {
  /* odsazení uvnitř boxu */
  --bbx-pad-vertical:   20px;   /* horní + spodní */
  --bbx-pad-horizontal: 16px;   /* levý + pravý */
}

/* Ujistěte se, že grid roztahuje buňky na výšku nejvyššího */
.bbx-benefits {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Nový padding boxu */
.bbx-benefit {
  flex: 0 1 calc(25% - 30px);
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  text-align: center;
  min-height: 220px;
  box-sizing: border-box;  
  padding: var(--bbx-pad-vertical) var(--bbx-pad-horizontal);
}

/* Ikona – přesně 20px od horního okraje obsahu a 20px pod ní */
.bbx-benefit__icon {
  margin: 0 0 var(--bbx-pad-vertical);
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mezera mezi ikonou a nadpisem */
.bbx-benefit__title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--col-primary);
  flex: 0 0 auto;
  width: 100%;
}

/* Text – 20px nad spodním okrajem boxu */
.bbx-benefit__text {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--col-dark);
  margin: 0 0 var(--bbx-pad-vertical);
  flex-shrink: 0;
  width: 100%;
}

/* Responzivita */
@media (max-width: 992px) {
  .bbx-benefits {
    justify-content: space-between;
  }
  .bbx-benefit {
    flex: 0 0 calc(50% - 15px);
    margin-bottom: 30px;
  }
}

@media (max-width: 576px) {
  .bbx-benefits {
    flex-direction: column;
    align-items: center;
  }
  .bbx-benefit {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }
}
/* ==== 7. SKRYTÍ NAVIGAČNÍCH TLAČÍTEK NA BLOGU ==== */
/* Skrytí celého kontejneru s tlačítky pro navigaci mezi články */
.next-prev.text-center,
div.next-prev.text-center {
  display: none !important;
}

/* Skrytí samotných tlačítek pro navigaci */
a.btn.btn-default.inline-block[role="link"],
.btn.btn-default.inline-block {
  display: none !important;
}

/* Pro kompletní skrytí můžeme cílit i na obecnější nadřazený element, pokud je potřeba */
.news-item-detail .buttons,
.article-detail-content + .buttons,
.blog-detail + .buttons {
  display: none !important;
}
/* Úpravy pro box kategorií rolet */
.rolety-kategorie-box h3 {
  font-size: 2.1rem;
  color: var(--col-primary);
  margin: 0 0 15px;
  font-weight: 600;
}

.rolety-kategorie-box p {
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Menší mezery pro oddělovače v boxu kategorií */
.rolety-kategorie-box .billing-separator {
  margin: 30px 0 25px; /* Menší vertikální mezery než standardní billing-separator */
}

/* Poslední oddělovač má menší spodní mezeru */
.rolety-kategorie-box .billing-separator:last-of-type {
  margin-bottom: 20px;
}

/* Poslední paragraf nemá spodní mezeru */
.rolety-kategorie-box p:last-of-type {
  margin-bottom: 0;
}
/* ==== KATEGORIE ROLET - unikátní komponenta s menší mezerou ==== */
.krl-category-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.krl-category-grid {
  display: flex;
  flex-direction: column;
  gap: 15px !important; /* Poloviční mezera oproti standardním 30px */
  margin-bottom: 30px;
}

.krl-category-box {
  background: var(--col-white);
  border: 1px solid var(--col-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  padding: 25px;
  transition: transform 0.3s ease;
}

.krl-category-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.krl-category-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--col-primary);
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--col-primary);
  display: inline-block;
}

.krl-category-text {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--col-dark);
  margin: 0;
}

/* Responzivita */
@media (max-width: 768px) {
  .krl-category-grid {
    gap: 12px !important; /* Ještě menší mezera na mobilech */
  }
  
  .krl-category-box {
    padding: 20px;
  }
  
  .krl-category-title {
    font-size: 1.6rem;
  }
  
  .krl-category-text {
    font-size: 1.4rem;
  }
}