/* ═══════════════════════════════════════════════════════
   PNOBALY.CZ - CUSTOM STYLES
   Verze: 2.1 - Konzistentní typografie s Mulish (Shoptet CDN)
   Poslední úprava: Prosinec 2024

   Účel: Přepisuje výchozí Shoptet styly z style.css
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   POZNÁMKA: Font Mulish je načítán automaticky Shoptetem
   Není potřeba @import ani @font-face deklarace
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   CSS PROMĚNNÉ - Centralizovaná konfigurace
   ═══════════════════════════════════════════════════════ */

:root {
  /* === FONT FAMILY === */
  --font-primary: 'Mulish', 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === FONT SIZES (z typography-scale.css) === */
  /* Desktop */
  --font-size-5xl: 3.75rem;    /* 60px - Hero */
  --font-size-4xl: 3rem;       /* 48px - H1 */
  --font-size-3xl: 2.25rem;    /* 36px - H2 */
  --font-size-2xl: 1.875rem;   /* 30px - H3 */
  --font-size-xl: 1.5rem;      /* 24px - H4 */
  --font-size-lg: 1.25rem;     /* 20px - H5 */
  --font-size-md: 1.125rem;    /* 18px - Emphasized */
  --font-size-base: 1rem;      /* 16px - Body */
  --font-size-sm: 0.875rem;    /* 14px - Small */
  --font-size-xs: 0.75rem;     /* 12px - Captions */

  /* === FONT WEIGHTS === */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === LINE HEIGHTS === */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* === LETTER SPACING === */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* === Zaoblení === */
  --border-radius-button: 30px;
  --border-radius-flag: 12px;

  /* === Flagy - barvy === */
  --flag-repas-start: #34c759;
  --flag-repas-end: #30d158;
  --flag-novy-start: #0071e3;
  --flag-novy-end: #00a8e8;
  --flag-reko-start: #ff9500;
  --flag-reko-end: #ffb340;

  /* === Progress bar === */
  --progress-bar-color: #008bf5;
  --progress-bar-height: 4px;

  /* === Spacing === */
  --logo-padding-md: 30px;
  --logo-padding-lg: 50px;
  --menu-padding-md: 30px;
  --menu-padding-lg: 60px;
  --menu-separator-md: 50px;
  --menu-separator-lg: 70px;
}

/* ═══════════════════════════════════════════════════════
   1. GLOBÁLNÍ TYPOGRAFIE - Font Family Override
   ═══════════════════════════════════════════════════════ */

/* Základní font pro celý web */
html,
body,
.external-fonts-loaded,
.blank-mode body,
body.blank-mode,
.product-appendix,
.empty-content-404 h1,
.dropdown-menu > li > a,
.header-top .btn.cart-count .cart-price,
.news-item-widget h5,
.header-top .oblibeneBtn em,
.navigation-buttons > a[data-target="cart"] i {
  font-family: var(--font-primary) !important;
}

/* Nadpisy a komponenty */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navigation-in a,
.price strong,
.products-block.products .p .price span,
.btn:not(.cart-count),
a.btn:not(.cart-count),
.fav-cat li a,
.user-action-tabs li a,
.cart-widget .popup-widget-inner::before,
.cart-widget-product-name a,
.quantity .increase::before,
.quantity .decrease::before,
.cart-widget-product > span,
.search-whisperer ul::before,
.search-whisperer .p-info span,
.search-whisperer .price,
.search-box::before,
.search-whisperer-documents a,
.box-bg-variant .categories a,
.box-filters::before,
.param-filter-top::before,
.subcategories.with-image li a .text,
.name,
.category-header label,
.pagination > a,
.pagination > strong,
.search-results-groups #search-group-categories .search-results-group-list ul li a,
.availability-value,
.price-final,
.p-gifts-heading,
.p-gift-name,
.shp-tabs-holder ul.shp-tabs li a,
.all-param span,
#productsAlternative::before,
.rate-average,
.vote-form::before,
#variants::before,
.var-dostupnost,
.variant-name,
.vote-title,
ol.cart-header li a,
ol.cart-header li strong,
.cart-table tr td.p-name a,
.price-wrapper,
a.cart-related-name,
.empty-cart-boxes ul li a,
.payment-info,
.payment-shipping-price,
.cart-item-name,
.cart-item-price,
.order-summary-item.helper,
.recapitulation-single,
.reca-number,
.id--15 .cart-table .p-name,
.id--15 .cart-table .p-price,
#register-form > fieldset .form-group:not(.consents) label,
a.login-btn.facebook,
a.login-btn.google,
a.login-btn.seznam,
ul.manufacturers ul li,
.search-whisperer-empty,
.menu-helper > ul > li a,
.filtrovat,
.tab-mobil,
.free-gift-name,
.id--9 .free-product-gifts-wrapper::before,
.vote-form > form::before,
#footer .contact-box::before {
  font-family: var(--font-primary) !important;
}

/* ═══════════════════════════════════════════════════════
   2. TYPOGRAFIE - Nadpisy (h1-h6)
   ═══════════════════════════════════════════════════════ */

/* H1 - Hlavní nadpis */
h1, .h1 {
  font-size: var(--font-size-4xl) !important;     /* 48px */
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: var(--letter-spacing-tight) !important;
}

/* H2 - Sekundární nadpis */
h2, .h2 {
  font-size: var(--font-size-3xl) !important;     /* 36px */
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  letter-spacing: var(--letter-spacing-tight) !important;
}

/* H3 - Terciární nadpis */
h3, .h3 {
  font-size: var(--font-size-2xl) !important;     /* 30px */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-snug) !important;
}

/* H4 - Podnadpis */
h4, .h4 {
  font-size: var(--font-size-xl) !important;      /* 24px */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-snug) !important;
}

/* H5 - Malý podnadpis */
h5, .h5 {
  font-size: var(--font-size-lg) !important;      /* 20px */
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-normal) !important;
}

/* H6 - Nejmenší nadpis */
h6, .h6 {
  font-size: var(--font-size-base) !important;    /* 16px */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
}

/* === RESPONSIVE - Tablet a menší === */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2.25rem !important;  /* 36px na mobilu */
  }

  h2, .h2 {
    font-size: 1.875rem !important; /* 30px na mobilu */
  }

  h3, .h3 {
    font-size: 1.625rem !important; /* 26px na mobilu */
  }

  h4, .h4 {
    font-size: 1.375rem !important; /* 22px na mobilu */
  }

  h5, .h5 {
    font-size: 1.188rem !important; /* 19px na mobilu */
  }

  /* Specifické úpravy pro product detail */
  .p-detail-inner-header .h1,
  .p-detail-inner-header div.h1 {
    font-size: 2.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   3. TYPOGRAFIE - Body Text
   ═══════════════════════════════════════════════════════ */

body,
p,
.body-normal,
.text-base {
  font-size: var(--font-size-base) !important;        /* 16px */
  font-weight: var(--font-weight-normal) !important;
  line-height: var(--line-height-relaxed) !important; /* 1.625 pro čitelnost */
}

/* Větší text */
.body-large,
.text-lg {
  font-size: var(--font-size-lg) !important;          /* 20px */
  line-height: var(--line-height-normal) !important;
}

/* Menší text */
.body-small,
.text-sm,
small {
  font-size: var(--font-size-sm) !important;          /* 14px */
  line-height: var(--line-height-normal) !important;
}

/* Captions a extra malý text */
.caption,
.text-xs {
  font-size: var(--font-size-xs) !important;          /* 12px */
  line-height: var(--line-height-normal) !important;
  color: #666;
}

/* Emphasized text */
strong, b, .font-bold {
  font-weight: var(--font-weight-bold) !important;
}

em, i {
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   4. TYPOGRAFIE - Tlačítka
   ═══════════════════════════════════════════════════════ */

.btn:not(.cart-count),
a.btn:not(.cart-count),
button,
input[type="submit"],
input[type="button"],
.button {
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-base) !important;       /* 16px */
  font-weight: var(--font-weight-medium) !important; /* 500 */
  line-height: var(--line-height-tight) !important;
  letter-spacing: var(--letter-spacing-wide) !important;
}

/* Velká tlačítka */
.btn-lg,
.btn-large {
  font-size: var(--font-size-lg) !important;         /* 20px */
  font-weight: var(--font-weight-semibold) !important;
}

/* Malá tlačítka */
.btn-sm,
.btn-small {
  font-size: var(--font-size-sm) !important;         /* 14px */
}

/* ═══════════════════════════════════════════════════════
   5. NAVIGAČNÍ MENU - Layout a typografie
   ═══════════════════════════════════════════════════════ */

/* Základní styl navigace */
.navigation-in a,
.menu-level-1 a,
.menu-helper > ul > li a {
  font-family: var(--font-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
}

/* Tablet a desktop */
@media (min-width: 769px) {
  .navigation-in.menu {
    padding-left: var(--menu-padding-md) !important;
  }

  .menu-level-1 a {
    font-size: var(--font-size-md) !important;  /* 18px místo 110% */
  }

  .menu-item-783 {
    margin-left: var(--menu-separator-md) !important;
  }
}

/* Velké obrazovky */
@media (min-width: 1200px) {
  .navigation-in.menu {
    padding-left: var(--menu-padding-lg) !important;
  }

  .menu-item-783 {
    margin-left: var(--menu-separator-lg) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   6. TYPOGRAFIE - Formuláře a Inputy
   ═══════════════════════════════════════════════════════ */

input,
textarea,
select,
.form-control,
.compact-form .form-control {
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-base) !important;       /* 16px */
  font-weight: var(--font-weight-normal) !important;
  line-height: var(--line-height-normal) !important;
}

label,
.form-label,
.category-header label {
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-sm) !important;         /* 14px */
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-normal) !important;
}

/* Velké labely */
label[for="delivery-region-id"] {
  font-size: var(--font-size-lg) !important;         /* 20px */
}

::placeholder {
  font-family: var(--font-primary) !important;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════
   7. FLAGY PRODUKTŮ - Clean Apple Glass Style
   ═══════════════════════════════════════════════════════ */

/* Základní styling pro všechny flagy kromě discount a freeshipping */
.flag:not(.flag-discount):not(.flag-freeshipping) {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;

  /* Rozměry & spacing */
  padding: 5px 12px !important;
  border-radius: var(--border-radius-flag) !important;

  /* Typografie */
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #ffffff !important;

  /* Vizuální efekty */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;

  /* Animace */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Glassmorphism overlay efekt */
.flag:not(.flag-discount):not(.flag-freeshipping)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hover efekt */
.flag:not(.flag-discount):not(.flag-freeshipping):hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Active/Click efekt */
.flag:not(.flag-discount):not(.flag-freeshipping):active {
  transform: translateY(0) scale(0.98) !important;
  transition: all 0.1s ease !important;
}

/* Specifické barvy pro jednotlivé typy flagů */
.flag-repas {
  background: linear-gradient(
    135deg,
    var(--flag-repas-start) 0%,
    var(--flag-repas-end) 100%
  ) !important;
}

.flag-novy {
  background: linear-gradient(
    135deg,
    var(--flag-novy-start) 0%,
    var(--flag-novy-end) 100%
  ) !important;
}

.flag-reko,
.flag-po-potravinach {
  background: linear-gradient(
    135deg,
    var(--flag-reko-start) 0%,
    var(--flag-reko-end) 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════════
   8. ZAOBLENÉ ROHY - Tlačítka a formuláře
   ═══════════════════════════════════════════════════════ */

.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a,
.pagination > strong,
a.login-btn {
  border-radius: var(--border-radius-button);
}

/* ═══════════════════════════════════════════════════════
   9. TOP NAVIGAČNÍ BAR - Email kontakt
   ═══════════════════════════════════════════════════════ */

@media screen and (min-width: 1200px) {
  .top-navigation-bar .project-email {
    display: inline-block;
    margin-left: 24px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
  }

  a.project-email::before {
    content: "\e910";
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════
   10. HOMEPAGE - Skupiny a carousel
   ═══════════════════════════════════════════════════════ */

.homepage-group-title,
.h4.homepage-group-title {
  margin-top: 40px !important;
}

.homepage-box.before-carousel {
  margin-bottom: 10px !important;
}

.homepage-box.welcome-wrapper {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   11. HODNOCENÍ OBCHODU - Addon
   ═══════════════════════════════════════════════════════ */

#hodnoceniobchodu .vote-wrap:not(.admin-response .vote-wrap),
.id--51 #content .vote-wrap:not(.admin-response .vote-wrap),
.template-14.id--51 .rate-wrapper:not(.admin-response .vote-wrap) {
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   12. PROGRESS BAR - Načítání stránky
   ═══════════════════════════════════════════════════════ */

#topbar {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: var(--progress-bar-height);
  background: var(--progress-bar-color);
  z-index: 99999;
  transition: width 0.12s ease;
  will-change: width;
}

html.loading #topbar {
  width: 60vw;
}

html.loading.slow #topbar {
  width: 85vw;
}

html.loaded #topbar {
  width: 100vw;
  transition: width 0.1s ease;
}

/* ═══════════════════════════════════════════════════════
   13. PRODUKTY - Skrytí detailních info
   ═══════════════════════════════════════════════════════ */

.p-detail-info {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   14. LOGO - Odsazení zleva
   ═══════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .site-name-wrapper {
    padding-left: var(--logo-padding-md);
  }
}

@media (min-width: 1200px) {
  .site-name-wrapper {
    padding-left: var(--logo-padding-lg);
  }
}

/* ═══════════════════════════════════════════════════════
   15. UTILITY CLASSES - Pro speciální případy
   ═══════════════════════════════════════════════════════ */

/* Font sizes */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* Font weights */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Line heights */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }