@import url("../../../AngarTheme/assets/css/libs/jquery.bxslider.css");
@import url("../../../AngarTheme/assets/css/font-awesome.css");
@import url("../../../AngarTheme/assets/css/angartheme.css");
@import url("../../../AngarTheme/assets/css/home_modyficators.css");
@import url("../../../AngarTheme/assets/css/rwd.css");
@import url("../../../AngarTheme/assets/css/black.css");

/*
 * =========================================================================
 *  SYMPAKT.CZ — 4-COLOR FUNCTIONAL PALETTE
 *  Child theme overrides for AngarTheme (PrestaShop 8.1.5)
 * =========================================================================
 *
 *  Color 1 (60% – Base Background):   --bg-base         #F8F9FA
 *  Color 2 (30% – Brand Sport Green):  --brand-primary    #1B7A3D
 *  Color 3 (Hover & Depth Green):      --brand-dark       #0F4F25
 *  Color 4 (10% – Action CTA Red):     --action-cta       #D32F2F
 *
 *  Neutrals (not counted as palette colors):
 *  --text-primary     #1A1A2E   (dark slate for body text)
 *  --text-secondary   #5A6578   (muted helper text)
 *  --border-light     #E2E8F0   (subtle card/section borders)
 *  --bg-white         #FFFFFF   (card surfaces)
 *  --bg-green-tint    #EBF5EE   (light green wash for badges/tags)
 *  --action-cta-dark  #B71C1C   (CTA hover / pressed state)
 *  --brand-glow       rgba(27,122,61,0.12) (hover overlays)
 */

:root {
  /* ── 4 Functional Colors ── */
  --bg-base:          #F8F9FA;
  --brand-primary:    #1B7A3D;
  --brand-dark:       #0F4F25;
  --action-cta:       #D32F2F;

  /* ── Neutral helpers ── */
  --text-primary:     #1A1A2E;
  --text-secondary:   #5A6578;
  --border-light:     #E2E8F0;
  --bg-white:         #FFFFFF;
  --bg-green-tint:    #EBF5EE;
  --action-cta-dark:  #B71C1C;
  --brand-glow:       rgba(27, 122, 61, 0.12);
}


/* =========================================================================
   GLOBAL RESETS
   ========================================================================= */

body {
  background-color: var(--bg-base) !important;
}

main {
  background: var(--bg-base) !important;
}


/* =========================================================================
   PHASE 1 — HEADER & TOP NAVIGATION
   ========================================================================= */

/* ── Top utility bar ── */
@media (min-width: 768px) {
  nav.header-nav {
    background: var(--bg-white) !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 13px !important;
  }

  nav.header-nav .row > .col-md-12 {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 42px !important;
  }

  #contact-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    line-height: 1.35 !important;
  }

  #contact-link .shop-phone,
  #_desktop_user_info,
  #_desktop_currency_selector {
    margin: 0 !important;
  }

  #contact-link .shop-phone strong,
  #contact-link .shop-phone strong a {
    color: var(--brand-primary) !important;
  }

  #contact-link .shop-phone i {
    color: var(--brand-primary) !important;
  }

  nav.header-nav .user-info a.account {
    color: var(--brand-primary) !important;
  }

  #_desktop_user_info {
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  #_desktop_currency_selector {
    flex: 0 0 auto !important;
  }

  .lang_currency_top span.expand-more {
    color: var(--brand-primary) !important;
  }

  /* ── Header row (logo / search / cart) ── */
  .header-top {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: var(--bg-white) !important;
  }

  .header-top .row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  #_desktop_logo {
    order: 1 !important;
    flex: 0 0 250px !important;
    max-width: 250px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #_desktop_logo h1 {
    margin: 0 !important;
  }

  #_desktop_logo img,
  .logo img {
    max-height: 66px !important;
    width: auto !important;
  }

  #_desktop_search_widget {
    order: 2 !important;
    flex: 1 1 auto !important;
    max-width: 560px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #_desktop_cart {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  div#search_widget form {
    display: flex !important;
    width: 100% !important;
  }

  div#search_widget form input[type="text"] {
    height: 44px !important;
    min-width: 0 !important;
    border: 1px solid var(--border-light) !important;
    border-right: 0 !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 16px !important;
    color: var(--text-primary) !important;
  }

  div#search_widget form button[type="submit"] {
    width: 52px !important;
    height: 44px !important;
    border-radius: 0 8px 8px 0 !important;
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border: none !important;
  }

  div#search_widget form button[type="submit"]:hover {
    background: var(--brand-dark) !important;
  }

  /* ── Cart button ── */
  #header div#_desktop_cart .blockcart .header {
    min-height: 44px !important;
    border-radius: 8px !important;
    background: var(--brand-primary) !important;
  }

  #header div#_desktop_cart .blockcart .header:hover {
    background: var(--brand-dark) !important;
  }

  #header div#_desktop_cart .blockcart .header a.cart_link {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    color: #ffffff !important;
  }

  #header div#_desktop_cart .blockcart .header a.cart_link i.shopping-cart {
    display: none !important;
  }

  #subcart {
    right: 0 !important;
    left: auto !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.15) !important;
  }
}

/* ── Main navigation menu ── */
#_desktop_top_menu {
  background: var(--brand-primary) !important;
  border-bottom: 2px solid var(--brand-dark) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

#_desktop_top_menu > ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  min-height: 52px !important;
}

#_desktop_top_menu > ul > li {
  float: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-right: none !important;
}

#_desktop_top_menu > ul > li:first-child {
  border-left: none !important;
}

#_desktop_top_menu > ul > li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#_desktop_top_menu > ul > li > a,
#top-menu > li > a {
  padding: 14px 16px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease !important;
}

#_desktop_top_menu > ul > li:hover > a,
#top-menu > li:hover > a {
  background: var(--brand-dark) !important;
  color: #ffffff !important;
}

#_desktop_top_menu .popover.sub-menu {
  max-height: min(72vh, 620px) !important;
  overflow-y: auto !important;
  border-top-color: var(--brand-primary) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14) !important;
}

/* Submenu links hover */
#_desktop_top_menu .popover.sub-menu a:hover {
  color: var(--brand-primary) !important;
}


/* =========================================================================
   PHASE 1A — HOMEPAGE LAYOUT
   ========================================================================= */

body#index #wrapper {
  padding-top: 18px !important;
  background: var(--bg-base) !important;
}

@media (min-width: 768px) {
  body#index #left-column {
    display: none !important;
  }

  body#index #content-wrapper,
  body#index div#content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
  }
}


/* =========================================================================
   HERO SECTION
   ========================================================================= */

.sympakt-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto 24px;
  padding: 30px;
  background: linear-gradient(135deg, #268e4a 0%, #156a31 100%);
  border-radius: 8px;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
}

.sympakt-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.sympakt-hero-eyebrow {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sympakt-home-hero h1 {
  color: #ffffff;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 14px;
}

.sympakt-home-hero p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 22px;
}

.sympakt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sympakt-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-primary) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.sympakt-hero-actions a:hover {
  background: var(--bg-green-tint);
  color: var(--brand-primary) !important;
}

.sympakt-hero-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sympakt-hero-card {
  position: relative;
  display: block;
  min-height: 132px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--text-primary);
  text-decoration: none !important;
}

.sympakt-hero-card img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  opacity: 0.72;
  transform: scale(1.02);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sympakt-hero-card span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.sympakt-hero-card:hover img {
  opacity: 0.9;
  transform: scale(1.06);
}


/* =========================================================================
   USP TRUST BAR
   ========================================================================= */

.usp-trust-bar {
  margin-top: 0 !important;
}

body#index .usp-trust-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 1180px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#index .usp-trust-bar .usp-col {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  border-right: 1px solid var(--border-light) !important;
}

body#index .usp-trust-bar .usp-col:last-child {
  border-right: 0 !important;
}

body#index .usp-icon-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: var(--bg-green-tint) !important;
}

body#index .usp-icon-wrapper svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--brand-primary) !important;
}

body#index .usp-text {
  min-width: 0 !important;
}

body#index .usp-headline {
  display: block !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body#index .usp-label {
  display: block !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}


/* =========================================================================
   SLIDER ROW (hidden on homepage)
   ========================================================================= */

body#index #slider_row {
  display: none !important;
}


/* =========================================================================
   HOME CATEGORIES MODULE
   ========================================================================= */

body#index #home_categories {
  max-width: 1180px !important;
  margin: 22px auto 26px !important;
}

body#index #home_categories .homecat_title {
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body#index #home_categories .homecat_title span {
  border-bottom: 3px solid var(--brand-primary) !important;
  color: var(--text-primary) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

body#index #home_categories ul.row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#index #home_categories ul.row > li.cat_block {
  flex: 1 1 230px !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#index #home_categories .cat-container {
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#index #home_categories .catimg_container img {
  width: 100% !important;
  height: 128px !important;
  object-fit: cover !important;
}

body#index #home_categories .catlinks_container {
  padding: 14px !important;
}

body#index #home_categories .homecat_name a {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body#index #home_categories ul.sub_categories {
  display: none !important;
}

body#index #home_categories a.view_more {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  background: var(--bg-green-tint) !important;
  border: 1px solid rgba(27, 122, 61, 0.18) !important;
  color: var(--brand-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

body#index #home_categories a.view_more:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}


/* =========================================================================
   HOMEPAGE TABS & PRODUCT SECTIONS
   ========================================================================= */

body#index .tabs {
  max-width: 1180px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body#index #home-page-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}

body#index #home-page-tabs .nav-item {
  margin: 0 !important;
}

body#index #home-page-tabs .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  background: var(--bg-white) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

body#index #home-page-tabs .nav-link.active,
body#index #home-page-tabs .nav-link:hover {
  border-color: var(--brand-primary) !important;
  background: var(--bg-green-tint) !important;
  color: var(--brand-primary) !important;
}

body#index .products-section-title,
body#index .index_title {
  margin: 0 0 16px !important;
  padding: 0 0 10px !important;
  border-bottom: none !important; /* Clean layout without horizontal grid lines */
  color: var(--text-primary) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

body#index .products-section-title a,
body#index .index_title a,
body#index .index_title span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important; /* Premium touch target */
  padding: 5px 16px !important; /* Symmetrical button internal padding */
  background: #ffffff !important; /* Premium white background */
  border: 1.5px solid var(--brand-primary) !important; /* Sport Green boundary */
  border-radius: 20px !important; /* Smooth pill button design */
  color: var(--brand-primary) !important; /* Sport Green text color */
  font-size: 11px !important; /* Compact dense uppercase text */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 8px !important;
}

body#index .products-section-title a:hover,
body#index .index_title a:hover {
  background: var(--brand-primary) !important; /* Forest green signature active state */
  color: #ffffff !important; /* Pure white text on hover */
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 12px rgba(27, 122, 61, 0.16) !important;
  transform: translateY(-1px) !important;
}

/* Completely remove the chevron icon / two circles from category buttons */
body#index .products-section-title a::after,
body#index .index_title a::after,
body#index .index_title span::after,
body#index .products-section-title span::after,
body#index .products-section-title a i,
body#index .index_title a i,
body#index .index_title span i {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================================
   HOMEPAGE PRODUCT CARDS
   ========================================================================= */

body#index .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body#index .products .product-miniature {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body#index .products .product-miniature .thumbnail-container {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

body#index .products .product-miniature .thumbnail-container:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

body#index .products .product-miniature .product-left,
body#index .products .product-miniature .product-right {
  float: none !important;
  width: 100% !important;
}

body#index .products .product-miniature .product-image-container {
  padding: 12px 12px 0 !important;
}

body#index .products .product-miniature img {
  width: 100% !important;
  height: 190px !important;
  object-fit: contain !important;
}

body#index .products .product-miniature .product-title {
  height: auto !important;
  min-height: 42px !important;
  margin: 10px 0 8px !important;
}

body#index .products .product-miniature .product-title a {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body#index .products .product-miniature .product-desc {
  height: auto !important;
  color: var(--text-secondary) !important;
}

body#index .products .product-miniature .product-price-and-shipping,
body#index .products .product-miniature span.price {
  color: var(--brand-dark) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body#index .products .product-miniature .button-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

/* ── Homepage CTA: Add to Cart = ACTION RED ── */
body#index .button-container .add-to-cart {
  flex: 1 1 120px !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: var(--action-cta) !important;
  border-color: var(--action-cta) !important;
  color: #ffffff !important;
  transition: background 0.2s ease !important;
}

body#index .button-container .add-to-cart:hover {
  background: var(--action-cta-dark) !important;
  border-color: var(--action-cta-dark) !important;
}

body#index .button-container .add-to-cart i,
body#index .button-container .add-to-cart i.shopping-cart {
  color: #ffffff !important;
}

/* ── Homepage: Detail / View button = neutral ── */
body#index .button-container .lnk_view {
  flex: 1 1 120px !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: var(--bg-base) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
}

body#index .button-container .lnk_view:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

body#index .all-product-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 16px !important;
  color: var(--brand-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body#index .all-product-link:hover {
  color: var(--brand-dark) !important;
}

body#index #angarinfo_desc {
  display: none !important;
}

body#index #parallax_baner {
  display: none !important;
}


/* =========================================================================
   SALE / DISCOUNT FLAGS — ACTION RED
   ========================================================================= */

a.product-flags-plist span.product-flag.on_sale,
a.product-flags-plist span.product-flag.on-sale,
.product-flag.on-sale,
.product-flag.on_sale,
.product-flag.discount,
span.discount-percentage,
span.discount-amount {
  background-color: var(--action-cta) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}


/* =========================================================================
   PRODUCT CARD BUTTONS (global icon-only style)
   ========================================================================= */

.button-container .add-to-cart i,
.button-container .add-to-cart i.shopping-cart,
.pl_button_icon_yes .button-container .add-to-cart i {
  display: inline-block !important;
  font-size: 17px !important;
}


/* =========================================================================
   CATEGORY PAGE
   ========================================================================= */

body#category #wrapper,
body#product #wrapper {
  padding-top: 22px !important;
  background: var(--bg-base) !important;
}

/* ── Breadcrumb ── */
body#category .breadcrumb,
body#product .breadcrumb {
  max-width: 1180px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

/* ── Left sidebar ── */
body#category #left-column,
body#product #left-column {
  padding-right: 18px !important;
}

body#category #left-column .block,
body#category #search_filters_wrapper,
body#product #left-column .block {
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#category #left-column .block .title_block,
body#category #left-column .block h4,
body#product #left-column .block .title_block,
body#product #left-column .block h4 {
  padding: 14px 16px !important;
  margin: 0 !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

body#category #left-column .block_content,
body#product #left-column .block_content {
  padding: 12px 14px !important;
}

body#category #content-wrapper,
body#product #content-wrapper {
  padding-left: 15px !important;
}

/* ── Category description ── */
body#category #category_desc {
  margin-bottom: 22px !important;
  padding: 20px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  display: block !important;
}

body#category #category_desc::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

body#category #category_desc .category-image {
  display: none !important;
}

body#category #category_desc .category-desc {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body#category #category_desc .cat_name {
  color: var(--text-primary) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  letter-spacing: 0 !important;
}

body#category #category_desc .cat_desc {
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

/* ── Subcategories ── */
body#category #subcategories {
  margin: 0 0 22px !important;
  padding: 18px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#category #subcategories .subcategory-heading {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}

body#category #subcategories ul {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

body#category #subcategories ul li {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#category #subcategories .subcategory-container {
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-base) !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

body#category #subcategories .subcategory-container:hover {
  border-color: var(--brand-primary) !important;
  transform: translateY(-2px) !important;
}

body#category #subcategories .subcategory-image img {
  width: 100% !important;
  height: 82px !important;
  object-fit: cover !important;
}

body#category #subcategories .subcategory-desc {
  padding: 10px !important;
}

body#category #subcategories .subcategory-name {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* ── Category products sort ── */
body#category .products-selection {
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
}

body#category .total-products p {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body#category .products-sort-order .select-title {
  min-height: 38px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  background: var(--bg-white) !important;
  color: var(--text-primary) !important;
}

/* ── Category product grid ── */
body#category #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body#category #js-product-list .product-miniature {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body#category #js-product-list .product-miniature .thumbnail-container {
  height: 100% !important;
  min-height: 0 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

body#category #js-product-list .product-miniature .thumbnail-container:hover {
  border-color: var(--brand-primary) !important;
  transform: translateY(-2px) !important;
}

body#category #js-product-list .product-miniature img {
  height: 190px !important;
  object-fit: contain !important;
}

/* Product card buttons: unified icon-only style (excluding homepage) */
body:not(#index) .product-miniature .button-container form.add-to-cart-or-refresh {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

body:not(#index) .product-miniature .button-container .add-to-cart,
body:not(#index) .product-miniature .button-container a.btn.add-to-cart,
body:not(#index) .product-miniature .button-container .lnk_view {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(27, 122, 61, 0.18) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

/* Hide default button text label */
body:not(#index) .product-miniature .button-container .add-to-cart span,
body:not(#index) .product-miniature .button-container .lnk_view span {
  display: none !important;
}

/* Eye button icon default structure */
body:not(#index) .product-miniature .button-container .lnk_view::before {
  content: "\e8f4" !important;
  font-family: "Material Icons" !important;
  font-size: 17px !important;
  color: var(--brand-primary) !important;
  line-height: 1 !important;
  transition: color 0.3s ease !important;
}

/* Cart button icon default structure */
body:not(#index) .product-miniature .button-container .add-to-cart i,
body:not(#index) .product-miniature .button-container .add-to-cart i.shopping-cart,
body:not(#index) .product-miniature .button-container .add-to-cart i.material-icons {
  display: inline-block !important;
  position: static !important;
  color: var(--brand-primary) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

/* HOVER: Eye button filled style */
body:not(#index) .product-miniature .button-container .lnk_view:hover {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

body:not(#index) .product-miniature .button-container .lnk_view:hover::before {
  color: #ffffff !important;
}

/* HOVER: Cart button premium "Antigravity" effect (soft mint background, dark green icon, deep soft shadow) */
body:not(#index) .product-miniature .button-container .add-to-cart:hover,
body:not(#index) .product-miniature .button-container a.btn.add-to-cart:hover {
  background-color: #ebf5ee !important;
  border-color: rgba(27, 122, 61, 0.35) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 12px rgba(27, 122, 61, 0.15) !important;
}

body:not(#index) .product-miniature .button-container .add-to-cart:hover i,
body:not(#index) .product-miniature .button-container .add-to-cart:hover i.shopping-cart {
  color: var(--brand-primary) !important;
}


/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */

body#product .product_container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr) !important;
  gap: 24px !important;
  margin: 0 !important;
}

body#product .product_left,
body#product .product_right {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#product .product_left #content,
body#product .product_right {
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#product .product_left #content {
  padding: 18px !important;
}

body#product .product_right {
  padding: 22px !important;
}

body#product .product-cover {
  overflow: hidden !important;
  border-radius: 8px !important;
  background: var(--bg-base) !important;
}

body#product .product-cover img {
  width: 100% !important;
  max-height: 520px !important;
  object-fit: contain !important;
}

body#product .product-images,
.quickview .product-images {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
  flex-wrap: nowrap !important;
}

body#product .product-images .thumb-container,
.quickview .product-images .thumb-container {
  margin: 0 !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body#product .product-images .thumb-container picture,
.quickview .product-images .thumb-container picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body#product .product-images .thumb,
.quickview .product-images .thumb {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  object-fit: cover !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease !important;
}

body#product .product-images .thumb.selected,
body#product .product-images .thumb:hover,
.quickview .product-images .thumb.selected,
.quickview .product-images .thumb:hover {
  border-color: var(--brand-primary) !important;
}

/* Fix pro slider náhledů (když je aktivní carousel s 3 a více obrázky) */
body#product #main .js-qv-mask.scroll,
.quickview .js-qv-mask.scroll {
  width: 298px !important; /* Šířka pro přesně 3 náhledy: 3x72px + 2x41px = 298px */
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 auto !important;
}

body#product #main .js-qv-mask.scroll .product-images,
.quickview .js-qv-mask.scroll .product-images {
  display: block !important;
  width: 9999px !important; /* Zamezí zalomení inline-block prvků pod sebe */
  white-space: nowrap !important;
  margin-top: 14px !important;
  padding: 0 !important;
}

body#product #main .js-qv-mask.scroll .product-images .thumb-container,
.quickview .js-qv-mask.scroll .product-images .thumb-container {
  display: inline-block !important;
  flex: none !important;
  width: 113px !important; /* Celková šířka odpovídá kroku posunu v JS (distance: 113) */
  min-width: 113px !important;
  max-width: 113px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  vertical-align: top !important;
}

body#product #main .js-qv-mask.scroll .product-images .thumb-container picture,
.quickview .js-qv-mask.scroll .product-images .thumb-container picture {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
}

body#product #main .js-qv-mask.scroll .product-images .thumb,
.quickview .js-qv-mask.scroll .product-images .thumb {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin-right: 41px !important; /* 72px šířka obrázku + 41px mezera = 113px */
  display: inline-block !important;
}

body#product .product_name {
  color: var(--text-primary) !important;
  font-size: 30px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin: 0 0 12px !important;
}

body#product .product-reference_top,
body#product #product_manufacturer,
body#product #product_comments_block_extra {
  margin-bottom: 10px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

body#product .product_desc {
  margin: 16px 0 !important;
  padding: 14px !important;
  border-radius: 8px !important;
  background: var(--bg-base) !important;
  color: var(--text-secondary) !important;
}

/* ── Product prices ── */
body#product .product-prices {
  margin: 18px 0 !important;
  padding: 18px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-base) !important;
}

body#product .regular-price {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  text-decoration: line-through !important;
}

body#product .product-prices .current-price span.price {
  color: var(--brand-dark) !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

body#product .discount-percentage {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  margin-left: 10px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: var(--action-cta) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ── Quantity & Add to Cart CTA ── */
body#product .product-quantity {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

body#product .product-quantity .control-label {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body#product #quantity_wanted {
  width: 72px !important;
  height: 46px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  text-align: center !important;
}

/* ── Product page: ADD TO CART = ACTION RED CTA ── */
body#product .product-add-to-cart button.btn.add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 156px !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  background: var(--action-cta) !important;
  border-color: var(--action-cta) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
}

body#product .product-add-to-cart button.btn.add-to-cart i {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  line-height: 1 !important;
  transform: none !important;
}

body#product .product-add-to-cart button.btn.add-to-cart::after {
  content: "Do košíku";
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

body#product .product-add-to-cart button.btn.add-to-cart:hover {
  background: var(--action-cta-dark) !important;
  border-color: var(--action-cta-dark) !important;
}

/* ── Availability ── */
body#product #product-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  background: var(--bg-green-tint) !important;
  color: var(--brand-primary) !important;
  font-weight: 800 !important;
}

body#product #product-availability:has(.product-available) {
  font-size: 0 !important;
}

body#product #product-availability:has(.product-available) i {
  font-size: 20px !important;
}

body#product #product-availability:has(.product-available)::after {
  content: "Skladem";
  font-size: 13px !important;
  line-height: 1 !important;
}

body#product #product-availability:has(.product-unavailable),
body#product #product-availability.product-unavailable {
  background: #fdf2f2 !important; /* Soft red background */
  color: #ec5959 !important; /* Alert red text */
}

body#product #product-availability:has(.product-unavailable) i,
body#product #product-availability.product-unavailable i {
  color: #ec5959 !important;
}

body#product #product-availability:has(.product-last-items),
body#product #product-availability.product-last-items {
  background: #fff8eb !important; /* Soft orange/yellow background */
  color: #e67e22 !important; /* Warning orange text */
}

body#product #product-availability:has(.product-last-items) i,
body#product #product-availability.product-last-items i {
  color: #e67e22 !important;
}

/* Product list availability — handled by the unified "MODERN PRODUCT CARD v2"
   section at the END of this file (own line under price, color-coded + status dot,
   real text so "Na objednání" / "Nedostupné" show correctly). */



body#product .product_right p:has(a.btn.btn-secondary) {
  margin: 12px 0 0 !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

body#product .product_right a.btn.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  margin-top: 6px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  background: var(--bg-white) !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease !important;
}

body#product .product_right a.btn.btn-secondary:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* ── Reassurance block ── */
body#product .blockreassurance_product {
  margin-top: 18px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
}

body#product .blockreassurance_product > div {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body#product .blockreassurance_product > div:last-child {
  border-bottom: 0 !important;
}

/* ── Product tabs ── */
body#product .tabs {
  margin-top: 24px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body#product .tabs .nav-tabs {
  padding: 12px 14px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body#product .tabs .nav-link {
  border-radius: 6px 6px 0 0 !important;
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  transition: all 0.2s ease !important;
}

body#product .tabs .nav-link.active,
body#product .tabs .nav-link:hover {
  color: var(--brand-primary) !important;
  border-color: rgba(27, 122, 61, 0.2) !important;
  background: var(--bg-green-tint) !important;
}

body#product .tabs .tab-content {
  padding: 18px !important;
}

/* =========================================================================
   FOOTER — COMPLETE BRAND OVERRIDE
   ========================================================================= */

/* ── Footer container: Deep Forest Green background ── */
.footer-container {
  background: #0a3d18 !important; /* Unified brand deep forest green background */
  border-top: 3px solid var(--brand-primary) !important;
  color: #faf7f0 !important; /* Sand white for beautiful contrast */
  padding-top: 28px !important;
}

/* ── Ensure 4-column layout ── */
.footer-container > .container > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.footer-container .col-md-3.links.wrapper,
.footer-container #block_myaccount_infos {
  display: block !important;
  visibility: visible !important;
  text-align: center !important;
}

.footer-container .links ul,
.footer-container #block_myaccount_infos ul {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Ensure Bootstrap collapse lists show on desktop */
@media (min-width: 768px) {
  .footer-container .links ul.collapse,
  .footer-container #block_myaccount_infos ul.collapse,
  .footer-container #block_myaccount_infos .account-list {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .footer-container .links .collapse {
    display: inherit !important;
  }

  .footer-container #block_myaccount_infos .myaccount-title {
    display: block !important;
    visibility: visible !important;
  }
}

/* ── Footer text color ── */
.footer-container,
.footer-container a,
.footer-container li,
.footer-container li a {
  color: #faf7f0 !important; /* Sand white for beautiful contrast */
}

/* ── Footer headings: White text, brand-primary underline ── */
.footer-container .h3,
.footer-container h3,
.footer-container h4 {
  color: #ffffff !important; /* Pure white for headings on dark green */
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.footer-container .links .title,
.footer-container .links .title span,
.footer-container .links .title span.h3,
.footer-container .links .title a.h3,
.footer-container .links > .h3,
.footer-container .links > .h3 span,
.footer-container .links > .h3 a,
.footer-container .links > .h3 a.text-uppercase,
.footer-container .h3 span,
.footer-container .h3 a,
.footer-container #block_myaccount_infos .myaccount-title,
.footer-container #block_myaccount_infos .myaccount-title a,
.footer-container .block-contact .h4,
.footer-container .block-contact .title,
.footer-container .block-contact-title,
.footer-container .block-contact-title span,
.footer-container .block-contact-title a,
.footer-container p#block-newsletter-label,
.footer-container p#block-social-label {
  color: #ffffff !important; /* Pure white for headings on dark green */
  box-shadow: none !important;
}

/* Hide duplicate social heading generated by parent theme's pseudo-element */
.footer-container .social_footer .block-social::before,
.footer-container .block-social::before,
.social_footer .block-social::before,
.block-social::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

/* Heading accent underlines: Brand Green */
.footer-container .h3 span,
.footer-container .h3 a,
.footer-container .links .title span.h3,
.footer-container .links .title a.h3,
.footer-container .links > .h3 span,
.footer-container .links > .h3 a,
.footer-container #block_myaccount_infos .myaccount-title a {
  border-bottom: 2px solid var(--brand-primary) !important;
  margin-bottom: -1px !important;
  padding: 7px 0 !important;
}

/* Remove legacy pseudo-elements (golden/blue accents from parent) */
.footer-container .h3::before,
.footer-container .h3::after,
.footer-container .h3 span::before,
.footer-container .h3 span::after,
.footer-container .h3 a::before,
.footer-container .h3 a::after,
.footer-container h3::before,
.footer-container h3::after,
.footer-container h4::before,
.footer-container h4::after,
.footer-container .links .title::before,
.footer-container .links .title::after,
.footer-container .links .title span::before,
.footer-container .links .title span::after {
  display: none !important;
  content: none !important;
}

/* ── Footer link items ── */
.footer-container .links ul > li a,
.footer-container .account-list li a,
.footer-container .block-contact a,
.footer-container #contact-infos a {
  color: #faf7f0 !important; /* Sand white links */
  transition: color 0.16s ease !important;
}

.footer-container .links ul > li a:hover,
.footer-container .links ul > li a:focus,
.footer-container .account-list li a:hover,
.footer-container .account-list li a:focus,
.footer-container .block-contact a:hover,
.footer-container .block-contact a:focus,
.footer-container #contact-infos a:hover,
.footer-container #contact-infos a:focus,
.footer-container #block_myaccount_infos .myaccount-title a:hover,
.footer-container #block_myaccount_infos .myaccount-title a:focus,
.footer-container a:hover,
.footer-container a:focus {
  color: #86efac !important; /* Light pastel green hover color */
  text-decoration: none !important;
}

/* ── Contact block text ── */
.footer-container .block-contact,
.footer-container .block-contact p,
.footer-container .block-contact div,
.footer-container .block-contact li,
.footer-container .block-contact strong,
.footer-container .block-contact * ,
.footer-container #contact-infos,
.footer-container #contact-infos p,
.footer-container #contact-infos li,
.footer-container #contact-infos strong,
.footer-container #contact-infos *,
.footer-container .contact-rich,
.footer-container .contact-rich strong {
  color: #faf7f0 !important;
}

/* ── Bottom footer bar ── */
.footer-container .bottom-footer {
  background: #F8F9FA !important; /* Modern Light Contrast background for copyright */
  padding: 18px 0 !important;
  margin-top: 28px !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

.footer-container .bottom-footer,
.footer-container .bottom-footer *,
.footer-container .bottom-footer a {
  color: #334155 !important; /* Dark slate text for maximum readability */
}

.footer-container .bottom-footer a:hover {
  color: var(--brand-primary) !important;
}

.footer-container #contact-infos strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── Social bar: brand border ── */
.footer-container .row.social_footer {
  border-top: 1px solid rgba(15, 79, 37, 0.1) !important;
  padding-top: 20px !important;
  align-items: center !important;
}

/* ── Newsletter ── */
#blockEmailSubscription_displayFooterAfter {
  flex: 1 1 620px !important;
  max-width: 680px !important;
}

#blockEmailSubscription_displayFooterAfter > .row,
#blockEmailSubscription_displayFooterAfter form > .row,
#blockEmailSubscription_displayFooterAfter form > .row > .col-xs-12:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#blockEmailSubscription_displayFooterAfter #block-newsletter-label {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
  color: #ffffff !important;
  line-height: 42px !important;
  white-space: nowrap !important;
}

#blockEmailSubscription_displayFooterAfter #block-newsletter-content {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

#blockEmailSubscription_displayFooterAfter .input-wrapper {
  order: 1 !important;
  flex: 1 1 280px !important;
  min-width: 220px !important;
}

#blockEmailSubscription_displayFooterAfter input[name="email"] {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  line-height: 42px !important;
}

#blockEmailSubscription_displayFooterAfter input[name="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

#blockEmailSubscription_displayFooterAfter .btn-newsletter.hidden-xs-down {
  display: inline-flex !important;
}

#blockEmailSubscription_displayFooterAfter .btn-newsletter.hidden-sm-up {
  display: none !important;
}

#blockEmailSubscription_displayFooterAfter .btn-newsletter {
  order: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 126px !important;
  height: 42px !important;
  padding: 0 18px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

#blockEmailSubscription_displayFooterAfter .btn-newsletter:hover {
  background: #ffffff !important;
  color: var(--brand-dark) !important;
  transform: translateY(-1px) !important;
}

/* Legacy parent theme newsletter overrides */
.footer-container .block_newsletter .btn-newsletter {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.footer-container .block_newsletter .btn-newsletter:hover {
  background: #ffffff !important;
  color: var(--brand-dark) !important;
}

.footer-container .block_newsletter form input[type=text] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* ── Bottom footer bar: premium high-contrast dark green text ── */
.footer-container .bottom-footer,
.footer-container .bottom-footer *,
.footer-container .bottom-footer a {
  color: #0F4F25 !important; /* Brand Dark Green text color for readable contrast */
}

.footer-container .bottom-footer a:hover {
  color: var(--brand-primary) !important;
}


/* =========================================================================
   LEFT-COLUMN PRODUCT MINIATURES (sidebar) - Handled globally by body:not(#index)
   ========================================================================= */

#left-column .product-miniature .availability {
  display: block !important;
}

/* #left-column availability unified with the "MODERN PRODUCT CARD v2" rules below. */


/* =========================================================================
   GLOBAL BUTTON OVERRIDES — .btn-primary uses Brand Green
   ========================================================================= */

.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
}

/* Links: use brand green for active links */
a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-dark);
}


/* =========================================================================
   HIDE FACEBOOK LIKEBOX
   ========================================================================= */

#likebox_content { display: none !important; }


/* =========================================================================
   FAQ SECTION
   ========================================================================= */

.sympakt-faq {
  max-width: 1180px;
  margin: 32px auto 0;
}

.sympakt-faq-inner {
  padding: 24px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.sympakt-faq h2 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 18px;
}

.sympakt-faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 14px 0;
}

.sympakt-faq-item:last-child {
  border-bottom: 0;
}

.sympakt-faq-item h3 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
  position: relative;
  padding-right: 28px;
}

.sympakt-faq-item h3::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.sympakt-faq-item.open h3::after {
  content: "−";
  color: var(--brand-primary);
}

.sympakt-faq-item div[itemscope] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sympakt-faq-item.open div[itemscope] {
  max-height: 200px;
}

.sympakt-faq-item p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
}


/* =========================================================================
   RESPONSIVE — TABLET
   ========================================================================= */

@media (max-width: 991px) {
  .sympakt-home-hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  body#index .usp-trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#index .usp-trust-bar .usp-col:nth-child(2) {
    border-right: 0 !important;
  }

  body#index .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#product .product_container {
    grid-template-columns: 1fr !important;
  }

  body#category #subcategories ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body#category #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  #blockEmailSubscription_displayFooterAfter > .row,
  #blockEmailSubscription_displayFooterAfter form > .row,
  #blockEmailSubscription_displayFooterAfter form > .row > .col-xs-12:first-child {
    flex-wrap: wrap !important;
  }

  #blockEmailSubscription_displayFooterAfter #block-newsletter-label,
  #blockEmailSubscription_displayFooterAfter #block-newsletter-content,
  #blockEmailSubscription_displayFooterAfter .input-wrapper,
  #blockEmailSubscription_displayFooterAfter .btn-newsletter {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}


/* =========================================================================
   RESPONSIVE — MOBILE
   ========================================================================= */

@media (max-width: 575px) {
  .sympakt-home-hero {
    margin-left: -5px;
    margin-right: -5px;
    padding: 20px;
  }

  .sympakt-home-hero h1 {
    font-size: 26px;
  }

  /* ── Force hero text to white on mobile ── */
  .sympakt-home-hero p,
  .sympakt-home-hero .sympakt-hero-eyebrow,
  .sympakt-hero-copy p,
  .sympakt-hero-copy span {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .sympakt-hero-categories {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sympakt-hero-card,
  .sympakt-hero-card img {
    min-height: 104px;
  }

  body#index .usp-trust-bar {
    grid-template-columns: 1fr !important;
  }

  body#index .usp-trust-bar .usp-col {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  body#index .usp-trust-bar .usp-col:last-child {
    border-bottom: 0 !important;
  }

  body#index .products {
    grid-template-columns: 1fr !important;
  }

  body#index .products .product-miniature img {
    height: 170px !important;
  }

  body#category #subcategories ul,
  body#category #js-product-list .products {
    grid-template-columns: 1fr !important;
  }

  body#product .product_name {
    font-size: 24px !important;
  }

  body#product .product-prices .current-price span.price {
    font-size: 26px !important;
  }
}

/* =========================================================================
   FOOTER MOBILE — Advanced 2x2 Grid Segment Selector (Tabs Switcher)
   ========================================================================= */

@media (max-width: 767px) {
  /* Grid 2x2 architecture using flexbox wrap and contents-based sorting */
  .footer-container > .container > .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: flex-start !important; /* Prevents flex rows from stretching vertically on tall screens */
    gap: 8px !important;
    padding: 0 10px !important;
    margin-bottom: 24px !important; /* Ensure separation from elements below */
  }

  /* Eliminate standard bootstrap block columns from layout flow to allow direct row flex sorting */
  .footer-container .col-md-3.links.wrapper,
  .footer-container #block_myaccount_infos,
  .footer-container .block-contact {
    display: contents !important;
  }

  /* Completely hide all raw desktop hidden elements and modals so they do NOT take any flexbox space */
  .footer-container .hidden-sm-down,
  .footer-container .hidden-xs-down,
  .footer-container .h3.hidden-sm-down,
  .footer-container .wishlist-add-to,
  .footer-container .wishlist-modal,
  .footer-container template {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    order: 99 !important;
  }

  /* Category selectors styled as premium modern buttons (Symmetrical White Buttons) */
  .footer-container .title,
  .footer-container .links .title,
  .footer-container #block_myaccount_infos .title,
  .footer-container .block-contact .title,
  .footer-container #block_myaccount_infos .title.hidden-md-up,
  .footer-container #block_myaccount_infos .myaccount-title {
    order: 1 !important; /* Forces all buttons to the very top in a vertical list */
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important; /* Symmetrical button touch height */
    background: #ffffff !important; /* Clean premium white background */
    border: 1.5px solid var(--brand-primary) !important; /* Elegant Sport Green border */
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Centered button labels with premium typography */
  .footer-container .title span.h3,
  .footer-container .links .title span.h3,
  .footer-container #block_myaccount_infos .title span.h3,
  .footer-container .block-contact .title span.h3,
  .footer-container #block_myaccount_infos .myaccount-title,
  .footer-container #block_myaccount_infos .myaccount-title a {
    color: var(--brand-primary) !important; /* Clean Sport Green text */
    font-size: 11px !important; /* Elegant compact uppercase text */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    width: auto !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
  }

  /* Completely hide raw collapse chevrons and togglers for an elegant button aesthetic */
  .footer-container .navbar-toggler,
  .footer-container .navbar-toggler.collapse-icons,
  .footer-container .title .navbar-toggler,
  .footer-container .title .float-xs-right,
  .footer-container .title .navbar-toggler.collapse-icons {
    display: none !important;
  }

  /* Active/Opened & Hover button state — Smooth transition to Deep Forest Green text/borders */
  .footer-container .title[aria-expanded="true"],
  .footer-container .title:not(.collapsed),
  .footer-container .title:hover,
  .footer-container #block_myaccount_infos .myaccount-title:hover,
  .footer-container #block_myaccount_infos .myaccount-title[aria-expanded="true"] {
    background: #ffffff !important;
    border-color: #0F4F25 !important; /* Deep Forest Green border */
    box-shadow: 0 4px 10px rgba(15, 79, 37, 0.08) !important;
  }

  .footer-container .title[aria-expanded="true"] span.h3,
  .footer-container .title:not(.collapsed) span.h3,
  .footer-container .title:hover span.h3,
  .footer-container #block_myaccount_infos .myaccount-title:hover a,
  .footer-container #block_myaccount_infos .myaccount-title[aria-expanded="true"] a {
    color: #0F4F25 !important; /* Deep Forest Green Text */
  }

  /* Enforce standard Bootstrap collapse height-toggling behavior */
  .footer-container .links .collapse,
  .footer-container #block_myaccount_infos .collapse,
  .footer-container #block_myaccount_infos .account-list,
  .footer-container .block-contact .collapse {
    display: none !important;
  }

  .footer-container .links .collapse.show,
  .footer-container .links .collapse.in,
  .footer-container #block_myaccount_infos .collapse.show,
  .footer-container #block_myaccount_infos .collapse.in,
  .footer-container #block_myaccount_infos .account-list.show,
  .footer-container #block_myaccount_infos .account-list.in,
  .footer-container .block-contact .collapse.show,
  .footer-container .block-contact .collapse.in {
    display: block !important;
  }

  /* Subcategory lists styled as an elegant floating card beneath the buttons */
  .footer-container .links ul,
  .footer-container .links ul.collapse,
  .footer-container #block_myaccount_infos ul.account-list,
  .footer-container #block_myaccount_infos ul.collapse,
  .footer-container .block-contact ul,
  .footer-container .block-contact ul.collapse {
    order: 2 !important; /* Forces lists below the 2x2 button switcher */
    width: 100% !important;
    flex: 0 0 100% !important;
    background: #F1F3F5 !important; /* Light Neutral Gray-Green background card */
    border: 1px solid rgba(15, 79, 37, 0.08) !important;
    border-radius: 10px !important;
    margin: 4px 0 0 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }

  .footer-container .links ul li,
  .footer-container #block_myaccount_infos ul li,
  .footer-container .block-contact ul li {
    text-align: center !important;
  }

  /* Subcategory links with premium layout */
  .footer-container .links ul li a,
  .footer-container #block_myaccount_infos ul li a,
  .footer-container .block-contact ul li a {
    color: #334155 !important;
    display: block !important;
    padding: 6px 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(15, 79, 37, 0.04) !important;
    transition: color 0.16s ease !important;
  }

  .footer-container .links ul li:last-child a,
  .footer-container #block_myaccount_infos ul li:last-child a,
  .footer-container .block-contact ul li:last-child a {
    border-bottom: none !important;
  }

  .footer-container .links ul li a:hover,
  .footer-container #block_myaccount_infos ul li a:hover,
  .footer-container .block-contact ul li a:hover {
    color: var(--brand-primary) !important;
  }

  /* Contact block text */
  .footer-container .block-contact,
  .footer-container .block-contact p,
  .footer-container .block-contact a,
  .footer-container .block-contact div,
  .footer-container .block-contact li,
  .footer-container .block-contact strong,
  .footer-container .block-contact * {
    color: #334155 !important; /* Beautiful dark slate for contrast on mobile light card */
    text-align: center !important;
  }

  /* Newsletter section on mobile - Premium Single-Row Layout */
  .footer-container .block_newsletter,
  .footer-container #blockEmailSubscription_displayFooterAfter {
    background: transparent !important;
    float: none !important;
    clear: both !important; /* Ensure no floating elements from above overlap */
    margin: 28px auto 0 auto !important; /* Increased top margin to clear elements above */
    padding: 0 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important; /* Resets flex-basis: 620px which acts as height in vertical column layout */
  }

  /* Mobile Newsletter Click-to-Activate Flow */
  .footer-container #blockEmailSubscription_displayFooterAfter:not(.active-subscription) > .row {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter:not(.active-subscription) #block-newsletter-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important; /* Fixed height for CTA */
    background: #ffffff !important; /* White CTA Button */
    color: #072a11 !important; /* Dark green text */
    border-radius: 30px !important; /* Pill style */
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
    user-select: none !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter:not(.active-subscription) #block-newsletter-label:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px) !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter:not(.active-subscription) #block-newsletter-content {
    display: none !important;
  }

  /* Make sure standard nested selector doesn't override full-width styling */
  .footer-container .block_newsletter p,
  .footer-container .block_newsletter label {
    display: none !important;
  }

  /* Active state */
  .footer-container #blockEmailSubscription_displayFooterAfter.active-subscription > .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 6px !important; /* Total height: 34px input + 8px padding = 42px */
    background: #072a11 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter.active-subscription #block-newsletter-label {
    display: none !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter.active-subscription #block-newsletter-content {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter form .row {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter form .col-xs-12 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter form .col-xs-12:first-child {
    position: relative !important;
    display: block !important; /* Block container for absolute children */
    height: 34px !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter .input-wrapper {
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    right: 79px !important; /* Button width (74px) + gap spacing (5px) */
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"] {
    background: transparent !important; /* Transparent background removes double outline box effect */
    border: none !important; /* No border prevents double outline box effect */
    box-shadow: none !important;
    color: #ffffff !important;
    text-align: left !important;
    height: 24px !important;
    line-height: 24px !important;
    min-height: 0 !important;
    min-width: 0 !important; /* Crucial override to allow layout shrinking on mobile */
    font-size: 11px !important;
    width: 100% !important;
    padding: 0 8px !important; /* Indent text slightly inside the capsule */
    box-sizing: border-box !important;
    transition: none !important;
    float: none !important;
    display: block !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important; /* Force transparent background on focus to prevent light override */
  }

  /* Prevent browser autofill from painting background white/blue */
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]:-webkit-autofill,
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]:-webkit-autofill:hover,
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]:-webkit-autofill:focus,
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #072a11 inset !important; /* Match capsule dark green background */
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter input[name="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
  }

  /* Hide the mobile "OK" button completely */
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="submitNewsletter"].hidden-sm-up,
  .footer-container #blockEmailSubscription_displayFooterAfter input[name="submitNewsletter"][value="OK"] {
    display: none !important;
  }

  /* Show the desktop "Odebírat" button on mobile, positioned absolutely on the far right */
  .footer-container #blockEmailSubscription_displayFooterAfter .btn-newsletter {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 5px !important;
    right: 0 !important; /* Touch the right edge of container */
    z-index: 10 !important; /* Force button to render completely on top */
    width: 74px !important; /* Fixed width to guarantee it never wraps/overflows */
    height: 24px !important;
    min-height: 0 !important; /* Override bootstrap min-height to allow sizing */
    -webkit-appearance: none !important; /* Override native Safari submit styling */
    appearance: none !important;
    border-radius: 30px !important;
    background: #8cc63f !important; /* Premium pea-green background */
    color: #000000 !important; /* Black text */
    font-weight: 800 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    line-height: 24px !important;
    padding: 0 !important; /* Symmetrical internal layout */
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter .btn-newsletter:hover {
    background: #9bd74c !important; /* Bright pea-green hover */
    transform: translateY(-1px) !important;
  }

  .footer-container #blockEmailSubscription_displayFooterAfter .alert {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Social bar on mobile */
  .footer-container .row.social_footer {
    background: transparent !important;
    text-align: center !important;
    float: none !important;
    margin: 28px auto 0 auto !important; /* Increased top margin to clear elements above */
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Pack items tightly at the top */
    gap: 8px !important; /* Direct vertical gap between newsletter and social block */
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  .footer-container .block-social {
    background: transparent !important;
    text-align: center !important;
    float: none !important;
    margin: 8px auto 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important; /* Resets flex-basis to auto to prevent vertical stretching */
  }

  .footer-container .social_footer .block-social::before,
  .footer-container .block-social::before,
  .social_footer .block-social::before,
  .block-social::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
  }

  .footer-container .social_footer #block-social-label,
  .footer-container .social_footer .block-social p,
  .footer-container #block-social-label,
  .footer-container .block-social p {
    display: block !important;
    color: #ffffff !important; /* Pure white on dark green */
    font-size: 10px !important; /* Slightly smaller, more elegant for mobile */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 auto 6px auto !important;
    letter-spacing: 0.5px !important;
    order: 1 !important;
  }

  .footer-container .block-social ul {
    order: 2 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important; /* Tighter gap for mobile */
    width: 100% !important;
  }

  .footer-container .social_footer .block-social ul li,
  .footer-container .block-social ul li {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 79, 37, 0.2) !important;
    border-radius: 50% !important;
    width: 26px !important; /* Compact circles for mobile */
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }

  .footer-container .block-social ul li:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    transform: scale(1.08) !important;
  }

  .footer-container .block-social ul li:hover a:before {
    color: #ffffff !important;
  }

  .footer-container .block-social ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-container .block-social ul li a span {
    display: none !important;
  }

  .footer-container .social_footer .block-social ul li a:before,
  .footer-container .block-social ul li a:before {
    color: #0F4F25 !important;
    font-size: 11px !important; /* Smaller icons matching the circles */
  }

  .footer-container {
    padding-bottom: 0 !important;
  }

  /* Bottom footer bar on mobile */
  .footer-container .bottom-footer {
    position: static !important;
    background: #F8F9FA !important; /* Modern Light Contrast background for copyright */
    margin-top: 15px !important;
    padding: 12px 0 !important;
  }

  .footer-container .bottom-footer,
  .footer-container .bottom-footer *,
  .footer-container .bottom-footer a {
    color: #334155 !important; /* Dark slate text for maximum readability */
  }
}


/* =========================================================================
   HOMEPAGE PRODUCTS BY CATEGORY — BUTTONS, BORDERS & LINE-CLAMP
   ========================================================================= */

/* Zrušit spodní ohraničení celého záhlaví a nastavit decentní výšku */
#home_cat_product .catprod_title {
  border-bottom: none !important; /* Remove horizontal line completely */
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Align buttons nicely to the left */
  gap: 12px !important;
  height: auto !important;
}

/* Obnovení ohraničení sloupců (celého obrysu .bx_box) s produkty, chybějící čára nahoře a moderní šedá barva */
#home_cat_product .bx_box {
  border: 1px solid #e2e8f0 !important; /* Premium modern unified light gray outline */
  padding-top: 14px !important; /* Symmetrical padding inside the box */
}

#home_cat_product .bx-wrapper {
  border: none !important; /* Disable any inner wrapper borders */
  background: transparent !important;
}

/* Omezení názvů produktů v těchto boxech na max 2 řádky s elegantními třemi tečkami při přetečení */
#home_cat_product .product_container .right-block {
  min-width: 0 !important; /* Force flex child to shrink, allowing ellipsis behavior */
}

#home_cat_product .product_container .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* Clamp to exactly max 2 lines of text */
  line-clamp: 2 !important; /* Standard property to satisfy linters and future-proof */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.7em !important; /* Safety height fallback */
  white-space: normal !important; /* Allow natural text wrapping up to 2 lines */
}

/* Transformovat odkaz kategorie na luxusní kulatý button (ovál / pilulka) */
#home_cat_product .catprod_title a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important; /* Elegant touch height */
  padding: 5px 16px !important; /* Symmetrical button internal padding */
  background: #ffffff !important; /* Premium white background */
  border: 1.5px solid var(--brand-primary) !important; /* Sport Green boundary */
  border-radius: 20px !important; /* Beautiful rounded pill button */
  color: var(--brand-primary) !important; /* Sport Green text color */
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important; /* Dense, compact uppercase text */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  gap: 0 !important; /* Reset icon gap */
}

/* Hover stav pro buttony kategorií */
#home_cat_product .catprod_title a:hover {
  background: var(--brand-primary) !important; /* Solid Sport Green background on hover */
  color: #ffffff !important; /* Pure white text */
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 12px rgba(27, 122, 61, 0.16) !important;
  transform: translateY(-1px) !important;
}

#home_cat_product .catprod_title a:hover * {
  color: #ffffff !important;
}

/* Odstranit zbytečnou šipku (chevron) z buttonů kategorií */
#home_cat_product .catprod_title a::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
}

/* Odstranit ty dva znaky dvou kroužků (navigační šipky slideru) u každé kategorie */
#home_cat_product .arrows_container,
#home_cat_product .catprod_title .arrows_container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}


/* =========================================================================
   COOKIE BANNER — Minimal bottom bar
   ========================================================================= */

#cookie-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 99999 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
  background: var(--brand-dark) !important;
  transform: none !important;
}

#cookie-banner .cookie-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 20px !important;
  flex-wrap: wrap !important;
}

#cookie-banner .cookie-text {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the cookie icon / SVG */
#cookie-banner .cookie-text header {
  display: none !important;
}

/* Hide the large SVG cookie icon */
#cookie-banner .cookie-text svg,
#cookie-banner .cookie-text .cookie-icon {
  display: none !important;
}

#cookie-banner .cookie-text p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#cookie-banner .cookie-text p + p::before {
  content: " " !important;
}

#cookie-banner .cookie-text a {
  color: #90E890 !important;
  text-decoration: underline !important;
  font-size: 12px !important;
}

#cookie-banner .cookie-text a:hover {
  color: #ffffff !important;
}

#cookie-banner * {
  color: rgba(255, 255, 255, 0.9) !important;
}

#cookie-banner .cookie-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#cookie-banner #cookie-accept {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 6px 16px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
}

#cookie-banner #cookie-accept:hover {
  background: #ffffff !important;
  color: var(--brand-dark) !important;
}

#cookie-banner #cookie-exit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#cookie-banner #cookie-exit:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

/* =========================================================================
   EMERGENCY FORCE VISIBILITY OF MY ACCOUNT (VÁŠ ÚČET) — DESKTOP ONLY
   ========================================================================= */
@media (min-width: 768px) {
  #block_myaccount_infos,
  .footer-container #block_myaccount_infos,
  div#block_myaccount_infos.col-md-3.links.wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 768px) {
  #block_myaccount_infos .myaccount-title,
  .footer-container #block_myaccount_infos .myaccount-title,
  #block_myaccount_infos .myaccount-title a,
  .footer-container #block_myaccount_infos .myaccount-title a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
  }

  #block_myaccount_infos ul.account-list,
  .footer-container #block_myaccount_infos ul.account-list,
  #block_myaccount_infos ul.collapse,
  .footer-container #block_myaccount_infos ul.collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }
}



/* =========================================================================
   HOMEPAGE MANUFACTURERS (NAŠI VÝROBCI) — PREMIUM LOGO TILES & HEADER SYNC
   ========================================================================= */

#home_man {
  margin: 40px 0 !important;
  background: transparent !important;
}

/* Sjednocení nadpisu s designem kategorií a potlačení oranžové barvy */
#home_man .man_title {
  border-bottom: 2px solid #e2e8f0 !important; /* Premium clean gray border */
  padding-bottom: 10px !important;
  margin-bottom: 30px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#home_man .man_title a {
  text-decoration: none !important;
  color: #1e293b !important; /* Slate-800 */
  display: inline-flex !important;
}

#home_man .man_title span {
  display: inline-block !important;
  border-bottom: 3px solid var(--brand-primary) !important; /* Brand Sport Green Accent Line */
  padding-bottom: 10px !important;
  margin-bottom: -12px !important;
  background: transparent !important;
  color: #1e293b !important;
  transition: border-color 0.2s ease !important;
}

#home_man .man_title a:hover span {
  border-color: var(--brand-dark) !important; /* Deep Forest Green on hover */
}

/* Stylování moderního responzivního slideru log výrobců */
.brand-slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: transparent;
  padding: 10px 0;
  box-sizing: border-box;
}

.brand-slider-track {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
}

.brand-slide {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 14px;
}

.brand-slide a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  height: 74px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.brand-slide a:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.08) !important;
  transform: translateY(-2px) !important;
}

.brand-slide img {
  max-height: 46px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important;
  opacity: 0.65 !important;
  transition: all 0.26s ease !important;
}

.brand-slide a:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* TABLET A MOBIL: Nekonečný CSS scroll zprava do leva */
@media (max-width: 1023px) {
  .brand-slider-track {
    animation: scroll-ticker 20s linear infinite;
  }
  
  .brand-slider-track:hover {
    animation-play-state: paused;
  }
  
  .brand-slide-duplicate {
    display: flex !important;
  }

  .brand-slide {
    width: 160px;
    padding: 6px 8px;
  }

  .brand-slide a {
    width: 144px !important;
    height: 60px !important;
    padding: 6px 12px !important;
  }

  .brand-slide img {
    max-height: 34px !important;
  }
}

/* DESKTOP (od 1024px): Statické vycentrované rozložení v řadě */
@media (min-width: 1024px) {
  .brand-slider-container {
    display: flex;
    justify-content: center;
  }

  .brand-slider-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    animation: none !important;
  }

  .brand-slide-duplicate {
    display: none !important;
  }

  .brand-slide {
    flex: 1 1 0%;
    width: 16.666%;
    max-width: 16.666%;
  }
}

@keyframes scroll-ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* =========================================================================
   REGISTRATION FORM HELPER TEXT CLEANUP (Hide annoying name comments)
   ========================================================================= */
#field-firstname ~ .form-control-comment,
#field-lastname ~ .form-control-comment {
  display: none !important;
}

/* =========================================================================
   REGISTRATION/AUTHENTICATION TITLE CLEANUP (Hide overlapping page header titles)
   ========================================================================= */
#registration #main .page-header,
#authentication #main .page-header {
  display: none !important;
}

/* =========================================================================
   CLOUDFLARE TURNSTILE CLEANUP (Safely hide widget globally off-screen)
   ========================================================================= */
.cf-turnstile,
#customer-form .cf-turnstile,
#contact-form .cf-turnstile,
.footer-container .cf-turnstile {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =========================================================================
   GLOBAL CURRENCY SELECTOR OVERRIDES
   ========================================================================= */
#_desktop_currency_selector button[data-toggle="dropdown"] {
  display: none !important;
}

#_desktop_currency_selector ul.dropdown-menu {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

#_desktop_currency_selector ul.dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

#_desktop_currency_selector ul.dropdown-menu li a.dropdown-item {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #94a3b8 !important; /* šedá pro neaktivní */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 3px 5px !important;
  transition: color 0.2s ease !important;
}

#_desktop_currency_selector ul.dropdown-menu li a.dropdown-item:hover,
#_desktop_currency_selector ul.dropdown-menu li a.dropdown-item:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #e53935 !important; /* červená při najetí */
}

#_desktop_currency_selector ul.dropdown-menu li.current a.dropdown-item {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #e53935 !important; /* červená pro aktivní */
}

#_desktop_currency_selector ul.dropdown-menu li.current a.dropdown-item:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #e53935 !important;
}

/* =========================================================================
   PHASE 1 TABLET TOP UTILITY BAR OVERRIDES
   ========================================================================= */
@media (max-width: 991px) {
  /* Absolute Minimization of the Top Bar (Currency & WhatsApp Row) */
  nav.header-nav {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
  }

  /* Zajištění, aby absolutní pozicování měny a WhatsAppu bylo vůči nav.header-nav a ne vůči containeru */
  nav.header-nav .container,
  nav.header-nav .row,
  nav.header-nav .col-md-12,
  nav.header-nav .col-xs-12 {
    position: static !important;
  }

  /* Strip out all vertical lines, separators, and borders in the mobile header top/nav sections */
  nav.header-nav,
  nav.header-nav *,
  nav.header-nav *::before,
  nav.header-nav *::after,
  .header-top,
  .header-top *,
  .header-top *::before,
  .header-top *::after {
    border-right: none !important;
    border-left: none !important;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #_desktop_user_info {
    display: none !important;
  }

  /* Currency Switcher: Compact premium segmented toggle - absolutely positioned to left edge */
  #_desktop_currency_selector {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1002 !important;
    height: auto !important;
    width: auto !important;
  }

  #_desktop_currency_selector ul.dropdown-menu {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    transform: none !important;
    list-style: none !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
  }

  #_desktop_currency_selector ul.dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
  }

  #_desktop_currency_selector ul.dropdown-menu li a.dropdown-item {
    border: none !important;
    background: transparent !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
  }

  #_desktop_currency_selector ul.dropdown-menu li.current a.dropdown-item {
    background: transparent !important;
    color: #e53935 !important;
  }

  #_desktop_currency_selector ul.dropdown-menu li a.dropdown-item:hover {
    color: #e53935 !important;
    background: transparent !important;
  }

  #_desktop_currency_selector ul.dropdown-menu li.current a.dropdown-item:hover {
    background: transparent !important;
    color: #e53935 !important;
  }

  /* WhatsApp Icon: Clean and bright green - absolutely positioned to right edge */
  #_desktop_contact_link {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1002 !important;
    height: auto !important;
    width: 32px !important;
  }

  #contact-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }

  #contact-link span.shop-tel {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #contact-link span.shop-tel i.fa-phone {
    font-size: 18px !important;
    color: #25d366 !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  #contact-link span.shop-tel i.fa-phone::before {
    content: "\f232" !important;
  }

  #contact-link span.shop-tel strong {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  #contact-link span.shop-tel strong a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
  }
}

/* =========================================================================
   PHASE 1 MOBILE HEADER LAYOUT AND Z-INDEX OVERRIDES
   ========================================================================= */
@media (max-width: 767px) {
  /* 1. Elevate header and expand it edge-to-edge, offsetting parent #page's padding */
  #header,
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    overflow: visible !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease-in-out !important;
    transform: translateY(0) !important;
  }

  #header.header-hidden {
    transform: translateY(-100%) !important;
  }

  body {
    padding-top: 114px !important; /* height of minimized top bar + logo row + icons bar */
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important; /* height of bottom nav + safe inset */
  }

  .header-top,
  .header-top > .container {
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* 2. Format .header-top .row as a flex container to prevent logo float collapse and enable safe-zone vertical centering */
  .header-top {
    background: #ffffff !important;
  }

  .header-top .row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Horizontal centering of the logo */
    margin: 0 !important;
    padding: 4px 15px !important; /* Extremely tight padding to reduce vertical space */
    height: auto !important;
    min-height: 42px !important; /* Minimized vertical height */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Overlay mobile drawers on top of everything - stretch to parent header width */
  #mobile_top_menu_wrapper2,
  #mobile_search_wrapper,
  #mobile_user_wrapper {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 100000 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
    border-bottom: 3px solid #25d366 !important;
    transform: none !important;
  }

  /* Clean up display force rules that conflict with jQuery animations */
  html body #header #mobile_top_menu_wrapper2.ag-mobile-menu-force-open,
  html body #mobile_top_menu_wrapper2.ag-mobile-menu-force-open {
    display: block !important;
    height: auto !important;
    max-height: 85vh !important;
  }

  /* Perfect horizontal centering & alignment of mobile header icons */
  #rwd_menu {
    height: 40px !important;
    line-height: 40px !important;
  }
  
  #rwd_menu .container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  #rwd_menu .rwd_menu_item {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #rwd_menu .rwd_menu_item a,
  #rwd_menu .rwd_menu_item .rwd_trigger_link,
  #rwd_menu .rwd_menu_item .blockcart,
  #rwd_menu .rwd_menu_item .header,
  #rwd_menu .rwd_menu_item .cart_index_title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  #rwd_menu .rwd_menu_item i {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide all siblings of the logo in the header-top row on mobile to ensure perfect centering */
  .header-top .row > :not(#_desktop_logo) {
    display: none !important;
  }

  /* Mobile Logo Sizing and safe zone positioning */
  #_desktop_logo {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: relative !important;
    left: 0 !important; /* Reset horizontal displacement to center the logo */
    top: 0 !important;  /* Reset vertical displacement */
  }

  #_desktop_logo h1,
  #_desktop_logo a {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #_desktop_logo img,
  #_desktop_logo .logo,
  #header img.logo {
    max-height: 34px !important; /* Slightly smaller for a sleeker row */
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }

  /* Cart dropdown/view padding fixes for viewport edges breathing room */
  #subcart,
  .cart-grid,
  #cart,
  .cart-items {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* Fixed Bottom Navigation Bar (Alza-style) */
  #mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08) !important;
    z-index: 999999 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mobile-bottom-nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    color: #64748b !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    outline: none !important;
  }

  .mobile-bottom-nav-item:hover,
  .mobile-bottom-nav-item:focus {
    color: #2e7d32 !important;
  }

  .mobile-bottom-nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 2px !important;
    stroke: currentColor !important;
  }

  .mobile-bottom-cart-icon-wrapper {
    position: relative !important;
    display: inline-flex !important;
  }

  .mobile-bottom-cart-icon-wrapper .cart-badge-count {
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    background-color: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    border-radius: 10px !important;
    text-align: center !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }

  .mobile-bottom-nav-label {
    text-align: center !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Push mobile autocomplete search results below the green bottom border of the search drawer */
  .ui-autocomplete {
    margin-top: 14px !important;
  }
}

@media (max-width: 991px) {
  #contact-link span.contact_link {
    display: none !important;
  }
}

/* Autocomplete search results z-index fix – must sit above main menu (10010) and submenus (10020) */
.ui-autocomplete {
  z-index: 10050 !important;
}

/* Hide large category title on Kontakt & Servis page (Category 75) */
body.category-id-75 .cat_name,
body.category-id-75 .mobile_cat_name {
  display: none !important;
}

/* Custom Modern Share & WhatsApp Inquiry Blocks (Product Details Page) */
.product-additional-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 60px !important; /* Spacing between Share and WhatsApp blocks */
  border-top: 1px solid var(--border-light) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 20px 0 !important;
  margin: 24px 0 !important;
}

.social-sharing.block-social,
.product-whatsapp-inquiry.block-social {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.social-sharing.block-social span,
.product-whatsapp-inquiry.block-social span {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}

.social-sharing.block-social ul,
.product-whatsapp-inquiry.block-social ul {
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.social-sharing.block-social li.generic-share,
.product-whatsapp-inquiry.block-social li.whatsapp-share {
  background: #7d7d7d !important; /* Premium neutral grey icon matching both */
  border-radius: 50% !important;
  border: 1px solid transparent !important; /* Invisible border by default */
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
  box-sizing: border-box !important;
}

.social-sharing.block-social li.generic-share:hover {
  background: var(--brand-primary) !important; /* Branded green on hover */
  border-color: #eaeaea !important; /* Show border on hover */
  transform: scale(1.05) !important;
}

.product-whatsapp-inquiry.block-social li.whatsapp-share:hover {
  background: #25d366 !important; /* WhatsApp brand green on hover */
  border-color: #eaeaea !important; /* Show border on hover */
  transform: scale(1.05) !important;
}

.social-sharing.block-social li.generic-share a,
.product-whatsapp-inquiry.block-social li.whatsapp-share a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Reset any default module button styles */
.product-whatsapp-inquiry.block-social a.whatsapp_button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.social-sharing.block-social li.generic-share a:before,
.product-whatsapp-inquiry.block-social li.whatsapp-share a:before {
  font-family: "FontAwesome" !important;
  color: #ffffff !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.social-sharing.block-social li.generic-share a:before {
  content: "\f1e0" !important; /* FontAwesome share-alt icon (3 connected dots) */
  font-size: 14px !important;
}

.product-whatsapp-inquiry.block-social li.whatsapp-share a:before {
  content: "\f232" !important; /* FontAwesome whatsapp icon */
  font-size: 16px !important;
}

.social-sharing.block-social li.generic-share a span,
.product-whatsapp-inquiry.block-social li.whatsapp-share a span {
  display: none !important; /* Hide text inside link icons */
}

/* Custom Modern Touchspin / Quantity Selector Alignment (Product Details Page) */
body#product .product-quantity .qty .bootstrap-touchspin {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 76px !important;
  height: 42px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--bg-white) !important;
}

body#product .product-quantity .qty .bootstrap-touchspin #quantity_wanted {
  width: 46px !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  line-height: 40px !important;
}

body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
  width: 30px !important;
  height: 100% !important;
  border-left: 1px solid var(--border-light) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg-white) !important;
  float: none !important;
}

body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .btn,
body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .btn-touchspin,
body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50% !important;
  min-height: 0 !important;
  max-height: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg-white) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  flex: 1 1 50% !important;
}

body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
  border-bottom: 1px solid var(--border-light) !important;
}

body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  margin-top: 0 !important;
}

body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .btn i,
body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical .btn-touchspin i,
body#product .product-quantity .qty .bootstrap-touchspin .input-group-btn-vertical button i {
  position: static !important;
  font-size: 12px !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile responsive layout for Quantity & Add to Cart button (Single Compact Line) */
@media (max-width: 575px) {
  body#product .product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 0 !important;
  }
  
  body#product .product-quantity .control-label {
    display: none !important; /* Hide label on mobile to fit the row */
  }
  
  body#product .product-quantity .qty {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body#product .product-quantity .add {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  
  body#product .product-add-to-cart button.btn.add-to-cart {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================================
   CUSTOMER ACCOUNT INVOICE DOWNLOAD BUTTONS
   ========================================================================= */
.invoice-mobile-download {
  margin-top: 8px !important;
}

.btn-invoice-download {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  min-height: 34px !important; /* Premium touch target height */
  font-size: 11px !important; /* Dense, clean uppercase text */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
  background-color: #f8fafc !important; /* Premium light grey */
  color: #475569 !important; /* slate-600 */
  border: 1px solid #cbd5e1 !important; /* slate-300 */
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.btn-invoice-download:hover,
.btn-invoice-download:focus,
.btn-invoice-download:active {
  background-color: var(--brand-primary) !important; /* Sport Green on hover */
  color: #ffffff !important; /* White text */
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.16) !important;
  text-decoration: none !important;
}

.btn-invoice-download i.material-icons {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* =========================================================================
   ORDER DETAIL PRODUCT THUMBNAILS
   ========================================================================= */
.product-line-info-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
}

.order-detail-thumbnail {
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  background-color: #f8fafc !important; /* Premium light neutral */
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid #cbd5e1 !important; /* slate-300 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.order-detail-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.product-description {
  flex: 1 1 auto !important;
}

/* Ensure no horizontal scrolling on mobile and adjust font weight for scanner UX */
@media (max-width: 767px) {
  .product-line-info-container {
    gap: 10px !important;
  }
  .order-detail-thumbnail {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
  }
}


/* =========================================================================
   MODERN REBUILD: PRODUCT CARD COMPONENT ARCHITECTURE (FLEXBOX)
   ========================================================================= */
/* Core Card Container Reset */
.product-miniature {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: visible !important; /* let flag ribbons peek out past the card's left edge; rounded clip moved to .thumbnail-container */
    height: 100% !important;
}

.product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;   /* rounded card clip (moved here from .product-miniature) */
    overflow: hidden !important;
}

/* Upper Image Section - Occupies 100% width, fixed area for centering */
.product-miniature .product-left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    position: static !important; /* so flag ribbons anchor to .product-miniature and can escape the card clip */
    background: #ffffff !important;
    padding: 15px 15px 15px 0 !important; /* no LEFT padding -> image + ribbons sit at the card's left edge */
}

.product-miniature .product-image-container {
    position: static !important; /* flags anchor up to .product-miniature; image still clipped by this box's overflow */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 220px !important; /* Standardized uniform height box for all image shapes */
    margin: 0 auto !important;
    overflow: hidden !important;
}

.product-miniature .product-thumbnail {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin: 0 auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Modern Image Behavior: Scales and centers any aspect ratio perfectly without clipping */
.product-miniature .product-thumbnail img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Lower Content Section (Description, Price, Buttons) */
.product-miniature .product-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 12px 15px !important;
    background: inherit !important;
}

/* Premium Edge-Aligned Flag Ribbons with Shadows */
.product-miniature .product-flags-plist {
    position: absolute !important;
    left: 0 !important;   /* flush with the card's left edge (no overhang) */
    top: 26px !important;
    z-index: 15 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    gap: 3px !important;
}

.product-miniature .product-flags-plist .product-flag {
    display: inline-block !important;
    margin: 0 !important;
    padding: 3px 9px !important;            /* slimmer ribbons (was 5px 10px) */
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 10px !important;             /* was 11px */
    font-weight: 600 !important;            /* was 700 */
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-radius: 0 6px 6px 0 !important;  /* flat left (sits on card edge), more rounded right */
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.16) !important; /* light shadow, offset right + down */
    width: max-content !important;
    white-space: nowrap !important;
}


/* =========================================================================
   MODERN PRODUCT CARD v2  —  bottom section + availability + bestseller accent
   Scope: body:not(#index) (category, product-page related, sidebar, search).
   This file loads LAST (head.tpl), so these rules are authoritative.
   DOM order in .product-bottom: price -> buttons -> availability.
   Visual order (flex order): price -> AVAILABILITY -> buttons.
   ========================================================================= */

/* ---- Bottom block: vertical rhythm, pinned to bottom for equal card heights ---- */
body:not(#index) .product-miniature .product-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* ---- 1) Price (unified) ---- */
body:not(#index) .product-miniature .product-price-and-shipping {
  order: 1 !important;
  margin: 0 !important;
}
body:not(#index) .product-miniature .product-price-and-shipping,
body:not(#index) .product-miniature .product-price-and-shipping .pl_price_default {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}
body:not(#index) .product-miniature .product-price-and-shipping .price {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;   /* unified current-price color (was navy in some blocks, green in others) */
}
body:not(#index) .product-miniature .product-price-and-shipping .regular-price {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--action-cta) !important; /* old price in red */
  text-decoration: line-through !important;
}

/* ---- 2) Availability: own line under price, color-coded, status dot, REAL text ---- */
body:not(#index) .product-miniature .availability,
#left-column .product-miniature .availability {
  order: 2 !important;
  display: block !important;
  margin: 0 !important;
  min-height: 15px !important;
}
.product-miniature .pl-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: var(--brand-primary) !important;        /* default = in stock (green) */
}
/* hide the material-icons glyph (checkmark / crossed circle) — replaced by a dot */
.product-miniature .pl-availability i,
.product-miniature .pl-availability i.material-icons {
  display: none !important;
}
/* neutralize any legacy ::after "Skladem" injection so the REAL text shows */
.product-miniature .pl-availability::after {
  content: none !important;
}
/* colored status dot (inherits text color) */
.product-miniature .pl-availability::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  flex: 0 0 auto !important;
}
/* state colors (driven by the icon class, which stays in the DOM) */
.product-miniature .pl-availability:has(.product-available)   { color: var(--brand-primary) !important; }  /* green  */
.product-miniature .pl-availability:has(.product-last-items)  { color: #E8821E !important; }                /* amber  */
.product-miniature .pl-availability:has(.product-unavailable) { color: var(--action-cta) !important; }      /* red    */
/* "Na objednání" tagged by JS (shares .product-available, only text differs) -> amber */
.product-miniature .pl-availability.avail-onorder { color: #E8821E !important; }

/* ---- 3) Action buttons: aligned row, cart = primary (filled green), eye = outline ---- */
body:not(#index) .product-miniature .button-container {
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
/* both buttons: consistent size + radius */
body:not(#index) .product-miniature .button-container .add-to-cart,
body:not(#index) .product-miniature .button-container a.btn.add-to-cart,
body:not(#index) .product-miniature .button-container .lnk_view {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 9px !important;
}
/* cart = primary filled green */
body:not(#index) .product-miniature .button-container .add-to-cart,
body:not(#index) .product-miniature .button-container a.btn.add-to-cart {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 2px 8px rgba(27, 122, 61, 0.22) !important;
}
body:not(#index) .product-miniature .button-container .add-to-cart i,
body:not(#index) .product-miniature .button-container .add-to-cart i.shopping-cart,
body:not(#index) .product-miniature .button-container .add-to-cart i.material-icons {
  color: #ffffff !important;
}
/* cart hover: darken + lift */
body:not(#index) .product-miniature .button-container .add-to-cart:hover,
body:not(#index) .product-miniature .button-container a.btn.add-to-cart:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 16px rgba(27, 122, 61, 0.28) !important;
}
body:not(#index) .product-miniature .button-container .add-to-cart:hover i,
body:not(#index) .product-miniature .button-container .add-to-cart:hover i.shopping-cart {
  color: #ffffff !important;
}
/* defensive: keep any variant/stock blocks below the buttons */
body:not(#index) .product-miniature .product-bottom .highlighted-informations { order: 4 !important; }
body:not(#index) .product-miniature .product-bottom .pl_availability_stock { order: 5 !important; }

/* ---- Card hover lift (modern touch; backgrounds/tints left untouched) ----
   Lift the whole .product-miniature so the peeking ribbons lift WITH the card. */
body:not(#index) .product-miniature,
body:not(#index) .product-miniature .thumbnail-container {
  height: 100% !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
body:not(#index) .product-miniature:hover {
  transform: translateY(-3px) !important;
}
body:not(#index) .product-miniature:hover .thumbnail-container {
  box-shadow: 0 10px 26px rgba(16, 79, 37, 0.12) !important;
}

/* =========================================================================
   BESTSELLERS BLOCK (#angarbest) — subtle premium accent + "Bestseller" badge
   ========================================================================= */
#angarbest .product-miniature .thumbnail-container {
  box-shadow: 0 6px 20px rgba(27, 122, 61, 0.14),
              inset 0 0 0 1px rgba(27, 122, 61, 0.30) !important;
}
/* small inline "★ Bestseller" pill above the product title (collision-free) */
#angarbest .product-miniature .product-description::before {
  content: "★ Bestseller" !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;   /* center the badge text */
  margin-bottom: 7px !important;
  padding: 3px 9px !important;
  background: var(--bg-green-tint) !important;
  color: var(--brand-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
}

/* =========================================================================
   FLAG RIBBONS PEEK OUT PAST THE CARD'S LEFT EDGE ("from behind" look)
   The card clips its content to rounded corners. To let the promo ribbons
   stick out to the LEFT, we (1) anchor the ribbons to .product-miniature,
   (2) move the rounded clip from .product-miniature down to .thumbnail-container.
   High specificity (body .products ... = 0,3,1) to beat parent theme rules
   (.products .product-miniature .product-image-container { position:relative } = 0,3,0).
   Wishlist heart is anchored to article.product-miniature, so it is unaffected.
   ========================================================================= */
body .products .product-miniature {
  overflow: visible !important;          /* don't clip the escaping ribbons at card level */
}
body .products .product-miniature .thumbnail-container {
  position: static !important;           /* push the ribbons' containing block up to .product-miniature */
  border-radius: 8px !important;         /* keep the rounded card... */
  overflow: hidden !important;           /* ...clipping here instead */
}
body .products .product-miniature .product-left,
body .products .product-miniature .product-image-container {
  position: static !important;           /* no longer the ribbons' containing block */
}
body .products .product-miniature .product-flags-plist {
  position: absolute !important;
  left: 0 !important;                    /* flush with the card's left edge (no overhang) */
  top: 26px !important;
  z-index: 15 !important;
}

/* Don't let the product-list wrappers clip the leftmost column's peeking ribbons */
#content-wrapper,
#js-product-list,
#js-product-list .products {
  overflow: visible !important;
}

/* =========================================================================
   GLOBAL PRICE / FLAG TWEAKS (per feedback)
   ========================================================================= */
/* Strikethrough original (old) prices in red — everywhere */
.regular-price,
.old-price,
.product-discount .regular-price {
  color: var(--action-cta) !important;
  text-decoration: line-through !important;
}

/* Remove the "Snížená cena" (Reduced price) flag ribbon — everywhere.
   High specificity to beat the parent flag display rules (0,3,0). */
body .product-flag.discount,
body .products .product-miniature .product-flags-plist .product-flag.discount {
  display: none !important;
}

/* "Nové" flag -> pea green, everywhere.
   Beats the parent green (#2e7d32, 0,3,2) and the bestseller blue (#1565c0, 1,4,0). */
body a.product-flags-plist span.product-flag.new,
body .product-flags-plist .product-flag.new,
body #angarbest .products .product-miniature .product-flag.new,
body #angarbest .products .product-miniature .new {
  background-color: #8DB600 !important; /* pea green */
  color: #ffffff !important;
}

/* =========================================================================
   PRODUCT IMAGE — fill the (square) image box, no empty gap; fully responsive.
   Fixes the mobile issue where a square box + a 240px image cap left a big
   grey gap below the image. The image now fills the square and is centered.
   High specificity beats parent rules (.products .product-miniature
   .product-image-container[ img] = 0,3,0).
   ========================================================================= */
body .products .product-miniature .product-image-container {
  aspect-ratio: 1 / 1 !important;     /* square box, scales with card width */
  height: auto !important;            /* let aspect-ratio drive the height (was 220px/100%) */
  max-height: 400px !important;       /* guard against an oversized square on very wide cards */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body .products .product-miniature .product-thumbnail,
body .products .product-miniature .product-thumbnail picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
body .products .product-miniature .product-thumbnail img,
body .products .product-miniature .product-image-container img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;        /* override the old 240px cap that caused the grey gap */
  object-fit: contain !important;     /* show the whole product, never cropped */
  margin: 0 !important;
}