/* ================================================================ */
/* SORTIMENT-GLOBAL.CSS - Kompletní styly pro eshop                 */
/* Verze s konfigurovatelným designem                               */
/* ================================================================ */


/* ================================================================ */
/*                                                                  */
/*   🎨 OVLÁDACÍ PANEL VZHLEDU - CONFIGURATION PANEL                */
/*                                                                  */
/*   Tato sekce obsahuje VŠECHNA nastavení vzhledu.                 */
/*   Pro změnu barev, velikostí a stylů upravujte pouze zde.        */
/*   Zbytek CSS není potřeba měnit.                                 */
/*                                                                  */
/* ================================================================ */

:root {
  
  /* ============================================================== */
  /* 1. ZÁKLADNÍ BARVY STRÁNKY                                      */
  /*    Base page colors                                            */
  /* ============================================================== */
  
  /* Pozadí celé stránky / Page background */
  --page-background:              #ffffff;
  
  /* Světlé pozadí pro sekce / Light background for sections */
  --section-background-light:     #f3f3f3;
  
  /* Barva hlavního textu / Main text color */
  --text-main:                    #333;
  
  /* Barva okrajů a linií / Border and line color */
  --border-color:                 #e0e0e0;
  
  
  /* ============================================================== */
  /* 2. BARVY ZNAČKY - HLAVNÍ AKCENT                                */
  /*    Brand colors - Main accent                                  */
  /* ============================================================== */
  
  /* Hlavní barva značky (tlačítka, nadpisy, zvýraznění) */
  /* Main brand color (buttons, headings, highlights) */
  --brand-primary:                #88ed3a;
  
  /* Tmavší varianta pro hover efekty */
  /* Darker variant for hover effects */
  --brand-primary-hover:          #c3ed3a;
  
  /* Ještě tmavší varianta (alternativní hover) */
  /* Even darker variant (alternative hover) */
  --brand-primary-dark:           #81ea00;
  
  /* Akcentová barva pozadí (jemná, pro zvýraznění boxů) */
  /* Accent background color (subtle, for highlighting boxes) */
  --accent-background:            #efffd5;
  
  
  /* ============================================================== */
  /* 3. INTERAKTIVNÍ STAVY - TLAČÍTKA A ODKAZY                      */
  /*    Interactive states - Buttons and links                      */
  /* ============================================================== */
  
  /* Barva textu na tlačítku (normální stav) */
  /* Button text color (normal state) */
  --button-text:                  #ffffff;
  
  /* Barva textu na tlačítku při najetí myší */
  /* Button text color on hover */
  --button-text-hover:            #e7ffc0;
  
  /* Alternativní světlá barva textu při hoveru */
  /* Alternative light text color on hover */
  --button-text-hover-alt:        #cafaa2;
  
  
  /* ============================================================== */
  /* 4. BARVY PATIČKY (FOOTER)                                      */
  /*    Footer colors                                               */
  /* ============================================================== */
  
  /* Pozadí patičky / Footer background */
  --footer-background:            #2a2a2a;
  
  /* Text a odkazy v patičce / Footer text and links */
  --footer-text:                  #37cb2a;
  
  /* Odkazy při najetí myší / Links on hover */
  --footer-text-hover:            #8aff66;
  
  
  /* ============================================================== */
  /* 5. STÍNY A EFEKTY HLOUBKY                                      */
  /*    Shadows and depth effects                                   */
  /* ============================================================== */
  
  /* Jemný stín pro karty a boxy / Light shadow for cards */
  --shadow-soft:                  0 4px 15px rgba(0,0,0,0.05);
  
  /* Střední stín / Medium shadow */
  --shadow-medium:                0 8px 25px rgba(0,0,0,0.1);
  
  /* Výrazný stín (showroom, velké sekce) / Strong shadow */
  --shadow-strong:                0 8px 30px rgba(0,0,0,0.1);
  
  /* Stín pro text na obrázcích / Text shadow on images */
  --shadow-text:                  0 1px 3px rgba(0,0,0,0.5);
  
  
  /* ============================================================== */
  /* 6. ZAOBLENÍ ROHŮ                                               */
  /*    Border radius / Corner rounding                             */
  /* ============================================================== */
  
  /* Standardní zaoblení (karty, boxy) / Standard radius */
  --radius-normal:                12px;
  
  /* Silné zaoblení (pilulková tlačítka) / Pill-shaped buttons */
  --radius-pill:                  30px;
  
  /* Kruhové prvky (ikony, avatary) / Circular elements */
  --radius-circle:                50%;
  
  
  /* ============================================================== */
  /* 7. ŠÍŘKA OKRAJŮ (BORDERS)                                      */
  /*    Border widths                                               */
  /* ============================================================== */
  
  /* Tenký okraj (karty, boxy) / Thin border */
  --border-thin:                  1px;
  
  /* Střední okraj (podtržení nadpisů) / Medium border */
  --border-medium:                2px;
  
  /* Silný okraj (výrazné podtržení) / Thick border */
  --border-thick:                 3px;
  
  
  /* ============================================================== */
  /* 8. PÍSMO - RODINA A ZÁKLADNÍ NASTAVENÍ                         */
  /*    Typography - Font family and base settings                  */
  /* ============================================================== */
  
  /* Rodina písma / Font family */
  --font-family:                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Tloušťka písma - polotučné / Semi-bold weight */
  --font-semibold:                600;
  
  /* Tloušťka písma - tučné / Bold weight */
  --font-bold:                    700;
  
  
  /* ============================================================== */
  /* 9. VELIKOSTI PÍSMA                                             */
  /*    Font sizes                                                  */
  /* ============================================================== */
  
  /* Extra malé (mobilní detaily) */
  --text-xs:                      1.2rem;
  
  /* Malé (drobné texty, labely) */
  --text-sm:                      1.4rem;
  
  /* Základní velikost textu */
  --text-base:                    1.5rem;
  
  /* Mírně větší (běžný text v boxech) */
  --text-md:                      1.6rem;
  
  /* Nadpis malý (kategorie, podnadpisy) */
  --text-lg:                      1.8rem;
  
  /* Nadpis střední */
  --text-xl:                      2rem;
  
  /* Nadpis sekce */
  --text-2xl:                     2.1rem;
  
  /* Nadpis velký */
  --text-3xl:                     2.2rem;
  
  /* Nadpis chess/karty */
  --text-4xl:                     2.4rem;
  
  /* Kontaktní údaje (telefon, email) */
  --text-5xl:                     2.5rem;
  
  /* Velký hlavní nadpis */
  --text-6xl:                     3.3rem;
  
  
  /* ============================================================== */
  /* 10. VÝŠKA ŘÁDKU (LINE HEIGHT)                                  */
  /*     Line heights                                               */
  /* ============================================================== */
  
  /* Těsná (nadpisy) / Tight */
  --line-tight:                   1.2;
  
  /* Normální / Normal */
  --line-normal:                  1.4;
  
  /* Pohodlná (kratší texty) / Comfortable */
  --line-relaxed:                 1.5;
  
  /* Volná (delší texty, odstavce) / Loose */
  --line-loose:                   1.6;
  
  /* Extra volná / Extra loose */
  --line-spacious:                1.7;
  
  
  /* ============================================================== */
  /* 11. MEZERY A ODSAZENÍ - STUPNICE                               */
  /*     Spacing scale (margins, paddings, gaps)                    */
  /* ============================================================== */
  
  /* 4px - minimální */
  --space-1:                      4px;
  
  /* 8px - extra malá */
  --space-2:                      8px;
  
  /* 10px */
  --space-2-5:                    10px;
  
  /* 12px - malá */
  --space-3:                      12px;
  
  /* 15px */
  --space-4:                      15px;
  
  /* 16px - základní */
  --space-5:                      16px;
  
  /* 20px - střední */
  --space-6:                      20px;
  
  /* 24px */
  --space-7:                      24px;
  
  /* 25px */
  --space-7-5:                    25px;
  
  /* 28px */
  --space-8:                      28px;
  
  /* 30px - velká */
  --space-9:                      30px;
  
  /* 32px */
  --space-10:                     32px;
  
  /* 35px */
  --space-11:                     35px;
  
  /* 40px - extra velká */
  --space-12:                     40px;
  
  /* 45px */
  --space-13:                     45px;
  
  /* 48px */
  --space-14:                     48px;
  
  /* 50px */
  --space-15:                     50px;
  
  /* 60px - sekce */
  --space-16:                     60px;
  
  
  /* ============================================================== */
  /* 12. ANIMACE A PŘECHODY                                         */
  /*     Transitions and animations                                 */
  /* ============================================================== */
  
  /* Rychlý přechod / Fast transition */
  --transition-fast:              0.2s ease;
  
  /* Normální přechod / Normal transition */
  --transition-normal:            0.3s ease;
  
  
  /* ============================================================== */
  /* 13. HOVER EFEKTY - TRANSFORMACE                                */
  /*     Hover effects - Transforms                                 */
  /* ============================================================== */
  
  /* Posun nahoru při hoveru / Lift on hover */
  --hover-lift:                   -3px;
  
  /* Zvětšení při hoveru / Scale on hover */
  --hover-scale:                  1.03;
  
  /* Jemné zvětšení / Subtle scale */
  --hover-scale-subtle:           1.02;
  
  /* Minimální zvětšení / Minimal scale */
  --hover-scale-minimal:          1.005;
  
  
  /* ============================================================== */
  /* 14. ROZLOŽENÍ STRÁNKY                                          */
  /*     Page layout                                                */
  /* ============================================================== */
  
  /* Maximální šířka obsahu / Maximum content width */
  --container-max-width:          1200px;
  
  /* Odsazení kontejneru od okrajů / Container padding */
  --container-padding:            20px;
  
  
  /* ============================================================== */
  /* 15. VELIKOSTI KOMPONENT                                        */
  /*     Component sizes                                            */
  /* ============================================================== */
  
  /* --- Kontaktní boxy --- */
  --contact-box-min-width:        350px;
  --contact-box-max-width:        380px;
  --contact-box-min-height:       220px;
  --contact-box-min-height-mobile: 240px;
  --contact-icon-size:            52px;
  --contact-icon-size-mobile:     32px;
  
  /* --- Showroom banner --- */
  --showroom-min-height:          400px;
  
  /* --- Benefit boxy --- */
  --benefit-box-max-width:        280px;
  --benefit-box-min-height:       220px;
  --benefit-icon-size:            72px;
  
  /* --- Tile grid --- */
  --tile-gap:                     30px;
  
  /* --- Photo grid --- */
  --photo-gap:                    50px;
  --photo-flex-wide:              5;
  --photo-flex-narrow:            3.5;
  --photo-unit-height:            3;
  --photo-min-height-mobile:      180px;
  
  /* --- Chess layout --- */
  --chess-gap-desktop:            40px;
  --chess-gap-tablet:             30px;
  --chess-gap-mobile:             25px;
  --chess-padding-desktop:        50px;
  --chess-padding-mobile:         20px;
  
  /* --- 3 boxy obrázky --- */
  --three-boxes-image-height:     200px;
  
  
  /* ============================================================== */
  /* 16. TLAČÍTKA - VELIKOSTNÍ VARIANTY                             */
  /*     Button size variants                                       */
  /* ============================================================== */
  
  /* Small (sm) */
  --btn-font-sm:                  1.4rem;
  --btn-padding-sm:               8px 16px;
  
  /* Medium-small (ms) */
  --btn-font-ms:                  1.6rem;
  --btn-padding-ms:               10px 20px;
  
  /* Medium (md) */
  --btn-font-md:                  1.8rem;
  --btn-padding-md:               12px 24px;
  
  /* Medium-large (ml) */
  --btn-font-ml:                  2rem;
  --btn-padding-ml:               14px 28px;
  
  /* Large (lg) */
  --btn-font-lg:                  2.2rem;
  --btn-padding-lg:               16px 32px;
  
  /* Showroom button */
  --btn-showroom-padding:         18px 40px;
  --btn-showroom-font:            2rem;
  
  
  /* ============================================================== */
  /* 17. Z-INDEX VRSTVY                                             */
  /*     Z-index layers                                             */
  /* ============================================================== */
  
  --z-base:                       0;
  --z-above:                      1;
  --z-overlay:                    2;


}
/* ================================================================ */
/*                   KONEC KONFIGURACE                              */
/*                   End of configuration                           */
/* ================================================================ */




/* ================================================================ */
/* ==== 1. ZÁKLADNÍ NASTAVENÍ ===================================== */
/* ================================================================ */

/* 1.1 Hlavní kontejner */
.kontakt-stranka-container {
  max-width:        var(--container-max-width);
  margin:           0 auto;
  padding:          var(--space-13) var(--container-padding);
  font-family:      var(--font-family);
  color:            var(--text-main);
  background:       var(--page-background);
}


/* ================================================================ */
/* ==== 2. HLAVNÍ KOMPONENTY ====================================== */
/* ================================================================ */

/* 2.1 KONTAKTNÍ BOXY - unikátní ikony, bez kolize s globály */
.top-contacts {
  display:         flex;
  justify-content: center;
  gap:             var(--space-9);
  margin-bottom:   var(--space-16);
  flex-wrap:       wrap;
}

.contact-box-wrapper {
  flex:             0 1 var(--contact-box-min-width);
  max-width:        var(--contact-box-max-width);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  background:       var(--page-background);
  padding:          var(--space-7-5) var(--space-7-5);
  border:           var(--border-thin) solid var(--border-color);
  border-radius:    var(--radius-normal);
  box-shadow:       var(--shadow-soft);
  text-align:       center;
  min-height:       var(--contact-box-min-height);
}

.contact-box-wrapper .contact-title {
  font-size:       var(--text-lg);
  font-weight:     var(--font-semibold);
  margin-bottom:   var(--space-6);
}

/* Unikátní třída pro ikonky */
.contact-box__icon {
  width:           var(--contact-icon-size) !important;
  height:          var(--contact-icon-size) !important;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   var(--space-7-5);
}
.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:       var(--text-5xl);
  font-weight:     var(--font-bold);
  color:           var(--brand-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(--section-background-light);
  border-radius:    var(--radius-normal);
  overflow:         hidden;
  margin-bottom:    var(--space-16);
  box-shadow:       var(--shadow-strong);
  min-height:       var(--showroom-min-height);
}
.showroom-banner:hover {
  transform:        translateY(var(--hover-lift)) scale(var(--hover-scale-minimal));
}

.showroom-text {
  flex:            1;
  padding:         var(--space-13) var(--space-11);
  background:      var(--page-background);
}

.showroom-text h2 {
  font-size:      var(--text-6xl);
  margin:         0 0 var(--space-7-5);
  color:          var(--brand-primary);
  letter-spacing: 0.5px;
}

.showroom-text p {
  display:        block !important;
  font-size:      var(--text-base);
  color:          var(--text-main);
  line-height:    var(--line-normal);
  white-space:    normal;
}
.showroom-text p i {
  font-size:      var(--text-lg);
  color:          var(--brand-primary);
}

/* Tlačítko */
.showroom-text .btn {
  margin-top:       var(--space-7-5);
  padding:          var(--btn-showroom-padding);
  background:       var(--brand-primary);
  color:            var(--button-text);
  border-radius:    var(--radius-pill);
  font-size:        var(--btn-showroom-font);
  font-weight:      var(--font-bold);
  text-decoration:  none;
  display:          inline-flex;
  align-items:      center;
}
.showroom-text .btn:hover {
  background:       var(--brand-primary-hover);
  transform:        scale(var(--hover-scale));
}

/* 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(--brand-primary) !important;
  color: var(--button-text) !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: var(--brand-primary-dark) !important;
  color: var(--button-text-hover) !important;
  transform: scale(var(--hover-scale));
  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: var(--button-text-hover) !important;
  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: var(--button-text-hover) !important;
}

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

/* 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: var(--border-thin);
  background-color: var(--border-color);
  margin: var(--space-16) 0 var(--space-12);
}

.billing-info-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

.billing-boxes-wrapper {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-9);
}

.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(--page-background);
  border-radius:    var(--radius-normal);
  box-shadow:       var(--shadow-soft);
  border:           var(--border-thin) solid var(--border-color);
  padding:          var(--space-9) var(--space-7-5);
  display:          flex;
  flex-direction:   column;
}

.billing-box h3 {
  font-size:      var(--text-2xl);
  color:          var(--text-main);
  margin:         0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom:  var(--border-thick) solid var(--brand-primary);
  font-weight:    var(--font-semibold);
}

.billing-content { flex: 1; }
.billing-box p {
  font-size:   var(--text-base);
  line-height: var(--line-spacious);
  margin:      0 0 var(--space-2-5);
}
.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: var(--space-9);
  align-items: stretch;
}
.snpt-3boxes__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--page-background);
  border: var(--border-thin) solid var(--border-color);
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.snpt-3boxes__img {
  width: 100%;
  height: var(--three-boxes-image-height);
  overflow: hidden;
}
.snpt-3boxes__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.snpt-3boxes__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}
.snpt-3boxes__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
  margin: 0 0 var(--space-2-5);
  text-align: center;
}
.snpt-3boxes__text {
  font-size: var(--text-base);
  line-height: var(--line-loose);
  color: var(--text-main);
  margin: 0;
  flex: 1;
}

/* 3.2 Chessboard - šachovnicové rozvržení */
.snpt-chess {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
}

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

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

.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(--chess-padding-desktop);
  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: var(--text-4xl);
  margin: 0 0 var(--space-4);
  color: var(--brand-primary);
}
.snpt-chess-item__text p,
.snpt-chess-item__text ul {
  font-size: var(--text-md);
  line-height: var(--line-loose);
  color: var(--text-main);
}
.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: var(--space-9); }
.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: var(--space-6) !important;
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  background: var(--page-background);
  
  /* Klíčové vlastnosti pro přizpůsobení obsahu */
  display: inline-block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.snpt-box-grid__item--border {
  border: var(--border-thin) solid var(--border-color);
}
.snpt-box-grid__item--bg {
  background: var(--section-background-light);
}
.snpt-box-grid__item--accent {
  background: var(--accent-background);
}
.snpt-box-grid__item h3 {
  margin: 0 0 var(--space-2-5);
  font-size: var(--text-xl);
  color: var(--brand-primary);
}

.snpt-box-grid__item p {
  margin: 0 0 var(--space-2-5) !important;
  font-size: var(--text-base);
  line-height: var(--line-loose);
}

/* Nastavení vnitřních elementů */
.snpt-box-grid__item > * {
  margin-top: 0 !important;
  margin-bottom: var(--space-2-5) !important;
}

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

/* 3.4 Column Rows - čisté sloupce bez rámečků (3,4 nebo 5) */
.snpt-col-row { display: grid; gap: var(--space-9); 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: var(--space-3) 0 0;
  font-size: var(--text-lg);
  color: var(--brand-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-normal);
  font-weight: var(--font-bold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.snpt-btn--primary {
  background: var(--brand-primary);
  color: var(--button-text);
}
.snpt-btn--sm { font-size: var(--btn-font-sm); padding: var(--btn-padding-sm); }
.snpt-btn--ms { font-size: var(--btn-font-ms); padding: var(--btn-padding-ms); }
.snpt-btn--md { font-size: var(--btn-font-md); padding: var(--btn-padding-md); }
.snpt-btn--ml { font-size: var(--btn-font-ml); padding: var(--btn-padding-ml); }
.snpt-btn--lg { font-size: var(--btn-font-lg); padding: var(--btn-padding-lg); }
.snpt-btn--stacked {
  flex-direction: column;
  line-height: var(--line-tight);
  padding: var(--btn-padding-md);
}
.snpt-btn:hover {
  background: var(--brand-primary-hover);
  transform: scale(var(--hover-scale));
}
.snpt-btn:hover a {
  color: var(--button-text) !important;
}


/* ================================================================ */
/* ==== 4. PATIČKA ================================================ */
/* ================================================================ */

/* 4.1 Základní styly patičky - barvy a pozadí */
/*footer,
.footer,
.site-footer,
#footer,
.layout-footer {
  background-color: var(--footer-background) !important;
  color: var(--footer-text) !important;
}

/* 4.2 Odkazy v patičce */
/*footer a,
.footer a,
.site-footer a,
#footer a {
  color: var(--footer-text) !important;
}

/* 4.3 Hover efekt u odkazů */
/*footer a:hover,
.footer a:hover,
.site-footer a:hover,
#footer a:hover {
  color: var(--footer-text-hover) !important;
  text-decoration: underline;
}

/* 4.4 Nadpisy v patičce */
/*footer h3,
footer h4,
.footer .footer-column-title {
  color: var(--footer-text) !important;
}

/* 4.5 Text pod obrázkem showroomu v patičce */
/*footer .footer-column img + *,
.footer .footer-column img + *,
.footer .footer-column p,
.footer .footer-column address {
  color: var(--footer-text) !important;
}


/* ================================================================ */
/* ==== 5. RESPONSIVITA =========================================== */
/* ================================================================ */

/* 5.1 Desktop -> Tablet přechod (992px) */
@media (max-width: 992px) {
  /* Showroom banner */
  .showroom-banner { flex-direction: column; }
  .showroom-image { 
    background-image: none !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .showroom-image img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* SNPT Chess */
  .snpt-chess-item--text-left  { margin-right: var(--chess-gap-tablet); }
  .snpt-chess-item--text-right { margin-left: var(--chess-gap-tablet); }
}

/* 5.2 Tablet přechod (768px) */
@media (max-width: 768px) {
  /* Kontaktní boxy */
  .top-contacts { flex-direction: column; gap: var(--space-7-5); }
  .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: var(--space-6) !important;
    padding: 0 var(--space-5) !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: var(--space-2) 0 !important;
  }
  
  /* SNPT komponenty */
  .snpt-3boxes { flex-direction: column; }
  .snpt-box-grid--5 { grid-template-columns: 1fr 1fr; }
  
  /* SNPT Chess */
  .snpt-chess-item--text-left  { margin-right: var(--chess-gap-mobile); }
  .snpt-chess-item--text-right { margin-left: var(--chess-gap-mobile); }
  .snpt-chess { gap: var(--space-9); }
  .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(--chess-padding-mobile); }
}

/* 5.3 Mobilní přechod (576px) */
@media (max-width: 576px) {
  /* Kontaktní boxy */
  .contact-box-wrapper .contact-title { font-size: var(--text-xs); }
  .contact-box-wrapper .contact-detail { font-size: var(--text-md); }
  .contact-box-wrapper { padding: var(--space-9) var(--space-6); min-height: var(--contact-box-min-height-mobile); }
  
  /* 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 var(--space-5) !important;
    gap: var(--space-2) !important;
  }
  
  .contact-box-wrapper {
    flex: 0 0 48% !important;
    padding: var(--space-2) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  .contact-box__icon {
    margin-bottom: 6px !important;
  }
  .contact-box__icon img {
    width: var(--contact-icon-size-mobile) !important;
    height: auto !important;
  }
  
  .contact-title {
    font-size: var(--text-xs) !important;
    margin-bottom: var(--space-1) !important;
  }
  .contact-detail a {
    font-size: var(--text-sm) !important;
    line-height: var(--line-tight) !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: var(--space-4); }
}


/* ================================================================ */
/* ==== 6. SNPT TILE GRID – 4×2 DYNAMICKÉ DLAŽDICE ================ */
/* ================================================================ */

.snpt-tile-grid{
  --gap: var(--tile-gap);
  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-normal);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:inherit;
  transition:transform var(--transition-fast);
}
.snpt-tile-grid__item:hover{transform:translateY(var(--hover-lift)) scale(var(--hover-scale-subtle));}

/* 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:var(--z-base);
}

/* text = absolutně nad obrázkem */
.snpt-tile-grid__text{
  position:absolute;
  inset-inline:var(--space-6);
  bottom:var(--space-6);
  margin:0;
  font-size:var(--text-md);
  font-weight:var(--font-semibold);
  text-transform:uppercase;
  color:var(--button-text);
  text-shadow:var(--shadow-text);
  line-height:var(--line-tight);
  z-index:var(--z-above);
}

/* --- specifické oblasti / poměry --- */
.snpt-tile--tall {grid-area:tall; grid-row:span 2;}
.snpt-tile--wide {grid-area:wide; grid-column:span 2;}

/* č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);
  position: absolute !important;
  left: var(--space-6) !important;
  right: var(--space-6) !important;
  bottom: var(--space-6) !important;

  font-size: var(--text-md) !important;
  font-weight: var(--font-semibold) !important;
  text-transform: uppercase !important;
  color: var(--button-text) !important;
  text-shadow: var(--shadow-text) !important;
  line-height: var(--line-tight) !important;

  pointer-events: none !important;
  z-index: var(--z-overlay) !important;
  white-space: pre-wrap !important;
}

/* 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) {
  .snpt-tile-grid {
    grid-auto-rows: auto;
  }

  .snpt-tile--wide {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
}

/* ==== Variant 1: wide vlevo, dva čtverce vpravo ==== */
.snpt-tile-grid-v1 {
  display: grid;
  gap: var(--tile-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(--tile-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(--tile-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"] {
  --gap: var(--tile-gap) !important;
  grid-auto-rows: 1fr;
}

/* Mobilní jistič, aby wide zůstal vidět */
@media(max-width:576px){
  [class*="snpt-tile-"][class*="--wide"]{
    grid-column:1 / -1 !important;
    aspect-ratio:2/1 !important;
  }
}


/* ================================================================ */
/* ==== 7. SNPT PHOTO BOXES – 2×2 (obdélník + čtverec) ============ */
/* ================================================================ */

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

/* Společné styly položky */
.snpt-photo-boxes__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  background: var(--section-background-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;
}


/* ================================================================ */
/* ==== 8. BB PHOTO GRID ========================================== */
/* ================================================================ */

/* kontejner celé galerie */
.bb-photo-grid {
  margin: 0 auto;
  padding: 0 var(--photo-gap);
}

/* řádky */
.bb-photo-row {
  display: flex !important;
  gap: var(--photo-gap) !important;
  margin-bottom: var(--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;
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.bb-photo-box:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-medium);
}

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

/* --- užší obdélník --- */
.bb-photo-box--narrow {
  flex: var(--photo-flex-narrow) 1 0 !important;
  aspect-ratio: calc(var(--photo-flex-narrow) / var(--photo-unit-height));
}
.bb-photo-box--narrow::before {
  content: "";
  display: block;
  padding-top: calc(100% * var(--photo-unit-height) / var(--photo-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;
    gap: var(--space-9) !important;
  }
  
  .bb-photo-box {
    min-height: var(--photo-min-height-mobile);
  }
}


/* ================================================================ */
/* ==== 9. BBX BENEFITS =========================================== */
/* ================================================================ */

.bbx-benefits {
  display: flex;
  justify-content: center;
  gap: var(--space-9);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
  align-items: stretch;
}

.bbx-benefit {
  flex: 0 1 calc(25% - var(--space-9));
  max-width: var(--benefit-box-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--page-background);
  border: var(--border-thin) solid var(--border-color);
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  text-align: center;
  min-height: var(--benefit-box-min-height);
  box-sizing: border-box;
  padding: var(--space-6) var(--space-5);
}

.bbx-benefit__icon {
  margin: 0 0 var(--space-6);
  width: var(--benefit-icon-size) !important;
  height: var(--benefit-icon-size) !important;
  flex: 0 0 var(--benefit-icon-size);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbx-benefit__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--brand-primary);
  flex: 0 0 auto;
  width: 100%;
}

.bbx-benefit__text {
  font-size: var(--text-base);
  line-height: var(--line-relaxed);
  color: var(--text-main);
  margin: 0 0 var(--space-6);
  flex-shrink: 0;
  width: 100%;
}

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

@media (max-width: 576px) {
  .bbx-benefits {
    flex-direction: column;
    align-items: center;
  }
  .bbx-benefit {
    width: 100%;
    max-width: 400px;
    margin-bottom: var(--space-6);
  }
}


/* ================================================================ */
/* ==== 10. SKRYTÍ NAVIGAČNÍCH TLAČÍTEK NA BLOGU ================== */
/* ================================================================ */

.next-prev.text-center,
div.next-prev.text-center {
  display: none !important;
}

a.btn.btn-default.inline-block[role="link"],
.btn.btn-default.inline-block {
  display: none !important;
}

.news-item-detail .buttons,
.article-detail-content + .buttons,
.blog-detail + .buttons {
  display: none !important;
}


/* ================================================================ */
/* ==== 11. KATEGORIE ROLET ======================================= */
/* ================================================================ */

/* Úpravy pro box kategorií rolet */
.rolety-kategorie-box h3 {
  font-size: var(--text-2xl);
  color: var(--brand-primary);
  margin: 0 0 var(--space-4);
  font-weight: var(--font-semibold);
}

.rolety-kategorie-box p {
  font-size: var(--text-base);
  line-height: var(--line-loose);
  margin: 0 0 var(--space-6);
}

/* Menší mezery pro oddělovače v boxu kategorií */
.rolety-kategorie-box .billing-separator {
  margin: var(--space-9) 0 var(--space-7-5);
}

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

/* 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: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.krl-category-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4) !important;
  margin-bottom: var(--space-9);
}

.krl-category-box {
  background: var(--page-background);
  border: var(--border-thin) solid var(--border-color);
  border-radius: var(--radius-normal);
  box-shadow: var(--shadow-soft);
  padding: var(--space-7-5);
  transition: transform var(--transition-normal);
}

.krl-category-box:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-medium);
}

.krl-category-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
  margin: 0 0 var(--space-2-5);
  padding-bottom: 5px;
  border-bottom: var(--border-medium) solid var(--brand-primary);
  display: inline-block;
}

.krl-category-text {
  font-size: var(--text-base);
  line-height: var(--line-loose);
  color: var(--text-main);
  margin: 0;
}

/* Responzivita kategorií */
@media (max-width: 768px) {
  .krl-category-grid {
    gap: var(--space-3) !important;
  }
  
  .krl-category-box {
    padding: var(--space-6);
  }
  
  .krl-category-title {
    font-size: var(--text-md);
  }
  
  .krl-category-text {
    font-size: var(--text-sm);
  }
}


/* ================================================================ */
/* KONEC SOUBORU                                                    */
/* ================================================================ */