/* ========================================
   PREMIUM iPHONE STORE - SHOPTET CSS OVERRIDES
   Version: 3.1
   Compatible with: Shoptet Template 11

   Instructions:
   1. Go to Shoptet Admin > Design > Own CSS (Vlastní CSS)
   2. Paste this entire CSS file
   3. Save changes
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   LANDING PAGE BACKGROUND
   Clean white background
   ======================================== */
.overall-wrapper {
  background: #fff !important;
}

/* Content wrappers - transparent to show gradient, no margins/padding */
#content-wrapper,
.content-wrapper:not(.navigation-wrapper),
.middle-banners-wrapper,
.welcome-wrapper,
.latest-contribution-box {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Homepage boxes - transparent */
.homepage-box,
.homepage-box-inner {
  background: transparent !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Benefits bar - light card on white background */
.benefitBanner,
.benefit-banner {
  background: #f8f8fa !important;
  border-radius: 16px !important;
  margin: 24px 20px !important;
  padding: 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border: 1px solid #ececf0 !important;
}

/* ========================================
   TOP BAR - DARK PURPLE, WHITE TEXT
   ======================================== */
.top-navigation-bar {
  background: #2a1045 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  position: relative !important;
  z-index: 250 !important;
}

/* Login dropdown - ensure it appears above all header/nav layers */
.user-action-login.popup-widget,
.login-widget.popup-widget,
.user-action-login {
  z-index: 300 !important;
}

/* Kill white backgrounds on all top bar children */
.top-navigation-bar *,
.top-navigation-bar .container,
.top-navigation-bar .top-navigation-contacts,
.top-navigation-bar .top-navigation-menu,
.top-navigation-bar .top-navigation-bar-menu,
.top-navigation-bar .top-navigation-bar-menu-helper,
.top-navigation-bar ul,
.top-navigation-bar li,
.top-navigation-bar div {
  background: transparent !important;
  background-color: transparent !important;
}

.top-navigation-bar a,
.top-navigation-bar span,
.top-navigation-bar strong,
.top-navigation-bar li,
.top-navigation-bar .top-navigation-contacts *,
.top-navigation-bar .top-navigation-menu * {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.top-navigation-bar a:hover {
  color: #fff !important;
}

/* ========================================
   HEADER, LOGO, SEARCH, CART - DESKTOP
   Purple background, frosted glass search
   ======================================== */
@media (min-width: 992px) {
  #header {
    background: #3B165F !important;
  }

  .header-top {
    background: #3B165F !important;
    padding: 8px 0 !important;
    position: relative !important;
    z-index: 150 !important;
    align-items: center !important;
    height: auto !important;
    overflow: visible !important;
  }

  .site-name-wrapper {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .navigation-wrapper {
    background: #3B165F !important;
    position: relative !important;
    z-index: 100 !important;
  }

  /* Logo - breakout style, overflows compact header */
  .site-name {
    margin: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 160 !important;
  }

  .site-name a {
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    height: 60px !important;
  }

  .site-name img,
  .header-top .site-name img {
    max-height: 255px !important;
    height: 255px !important;
    width: auto !important;
    margin-top: -75px !important;
    margin-bottom: -75px !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)) !important;
    transition: transform 0.2s ease !important;
    pointer-events: none !important;
  }

  .site-name img:hover {
    transform: scale(1.03) !important;
  }

  /* Search - frosted glass on purple */
  .header-top .search input[type="search"],
  .header-top .search input[type="text"],
  .header-top .search .query-input,
  .header-top .search .search-input {
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-size: 15px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.2s ease !important;
  }

  .header-top .search input::placeholder {
    color: rgba(255,255,255,0.5) !important;
  }

  .header-top .search input:focus {
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.15) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }

  .header-top .search button,
  .header-top .search .btn {
    background: #fff !important;
    color: #5b2d8e !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .header-top .search button:hover {
    background: #f0e6ff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  }

  /* Cart - white on purple */
  .header-top .navigation-buttons a,
  .header-top .navigation-buttons span,
  .header-top .cart-count,
  .header-top .cart-price,
  .header-top a[data-testid="headerCart"] {
    color: #fff !important;
  }

  .header-top .navigation-buttons i {
    color: #fff !important;
  }

  .header-top .navigation-buttons svg {
    filter: brightness(0) invert(1) !important;
  }
}

/* HEADER - MOBILE: see TASK 36 block at bottom of file */

/* Shared header text colors */
.header__title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.motto {
  font-size: 13px !important;
  color: rgba(255,255,255,0.7) !important;
}

/* ========================================
   LOGIN BUTTON - Plain text style matching menu items (Task 35 updated)
   ======================================== */
@media (min-width: 992px) {
  .top-navigation-bar button[class*="login"],
  .top-navigation-bar .top-nav-button-login,
  .top-navigation-bar .user-menu-link,
  .top-navigation-bar [data-testid="headerLogin"],
  #header button:has(+ .user-menu),
  .header-top .navigation-buttons .user-login,
  button.user-login,
  .top-navigation-bar button {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 20px !important;
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .top-navigation-bar button:hover,
  button.user-login:hover {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Login modal - open below the top bar, not covering the button */
  .user-action-login.popup-widget,
  .login-widget.popup-widget,
  .user-action-login,
  #login {
    top: 81px !important;
  }
}

/* Search whisperer (autocomplete dropdown) */
.search-whisperer {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

/* ========================================
   MAIN NAVIGATION
   ======================================== */
#navigation {
  overflow: visible !important;
  position: relative !important;
  z-index: 100 !important;
}

.navigation-in {
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  box-shadow: 0 4px 20px rgba(91, 45, 142, 0.25) !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Full-width navigation bar on desktop */
@media (min-width: 992px) {
  .navigation-in,
  #navigation .navigation-in {
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
    box-sizing: border-box !important;
  }
}

main {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
}

/* Main menu items - larger click area and better styling */
.menu-level-1 > li > a {
  padding: 16px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.95) !important;
  border-radius: 8px !important;
  margin: 6px 4px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Hover state - subtle glow effect */
.menu-level-1 > li > a:hover,
.menu-level-1 > li:hover > a,
.menu-level-1 > li.open > a {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* Active/current page indicator */
.menu-level-1 > li.active > a {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* Dropdown arrow styling */
.submenu-arrow {
  font-size: 10px !important;
  color: rgba(255,255,255,0.7) !important;
  opacity: 0.7 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.menu-level-1 > li:hover .submenu-arrow {
  opacity: 1 !important;
  transform: rotate(180deg) !important;
}

/* Dropdown menu styling - solid background for legibility */
.menu-level-2,
.navigation-in .menu-level-2,
#navigation .menu-level-2,
.menu-level-1 > li > .menu-level-2 {
  background: #fff !important;
  background-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  top: 100% !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

/* Ensure all menu items have solid white background */
.menu-level-2 > li,
.menu-level-2 > li > a,
.navigation-in .menu-level-2 li,
.navigation-in .menu-level-2 a,
.menu-level-1 ul li,
.menu-level-1 ul li a {
  background: #fff !important;
  background-color: #fff !important;
}

.menu-level-2 > li > a {
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #424245 !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
}

.menu-level-2 > li > a:hover,
.menu-level-2 li a:hover {
  background: #f5f5f7 !important;
  color: #5b2d8e !important;
}

/* ========================================
   DROPDOWN ANIMATIONS
   Smooth open/close with staggered item reveals
   ======================================== */

/* Dropdown container - initial hidden state */
.menu-level-2 {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* Dropdown visible state on hover */
.menu-level-1 > li:hover > .menu-level-2,
.menu-level-1 > li.open > .menu-level-2 {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Dropdown items - staggered fade in (works for all categories) */
.menu-level-2 > li,
.menu-level-2 > a,
.menu-level-2 > [role="menuitem"] {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.3s ease forwards;
}

/* Staggered delays for all dropdown items */
.menu-level-2 > *:nth-child(1) { animation-delay: 0.03s; }
.menu-level-2 > *:nth-child(2) { animation-delay: 0.06s; }
.menu-level-2 > *:nth-child(3) { animation-delay: 0.09s; }
.menu-level-2 > *:nth-child(4) { animation-delay: 0.12s; }
.menu-level-2 > *:nth-child(5) { animation-delay: 0.15s; }
.menu-level-2 > *:nth-child(6) { animation-delay: 0.18s; }
.menu-level-2 > *:nth-child(7) { animation-delay: 0.21s; }
.menu-level-2 > *:nth-child(8) { animation-delay: 0.24s; }
.menu-level-2 > *:nth-child(9) { animation-delay: 0.27s; }
.menu-level-2 > *:nth-child(n+10) { animation-delay: 0.30s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keep level-3 navbar links close to Shoptet default (no pill badges) */
#navigation .menu-level-3,
.navigation-in .menu-level-3,
#navigation .menu-level-3.has-more-items,
.navigation-in .menu-level-3.has-more-items {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

#navigation .menu-level-3 > li,
.navigation-in .menu-level-3 > li {
  opacity: 1 !important;
  animation: none !important;
  display: block !important;
  line-height: 1.4 !important;
  padding: 2px 0 !important;
  font-size: 14px !important;
  color: transparent !important;
  white-space: nowrap !important;
  background: transparent !important;
}

#navigation .menu-level-3 > li > a,
.navigation-in .menu-level-3 > li > a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2f2548 !important;
  line-height: 1.35 !important;
  transform: none !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

#navigation .menu-level-3 > li > a:hover,
.navigation-in .menu-level-3 > li > a:hover {
  transform: none !important;
  box-shadow: none !important;
  color: #4d2784 !important;
}

/* Memory badges for category variant chips (not navbar dropdown) */
.category-top .subcategories.with-image {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

.category-top .subcategories.with-image > li {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.category-top .subcategories.with-image li a,
.category-top .subcategories li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 290px !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border-color: #e8e8ed !important;
  -webkit-tap-highlight-color: transparent !important;
}

.category-top .subcategories.with-image li a:hover,
.category-top .subcategories.with-image li a:active,
.category-top .subcategories.with-image li a:focus,
.category-top .subcategories.with-image li a:focus-visible,
.category-top .subcategories li a:hover,
.category-top .subcategories li a:active,
.category-top .subcategories li a:focus,
.category-top .subcategories li a:focus-visible {
  background: #fff !important;
  border-color: #dccff0 !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.12) !important;
}

.category-top .subcategories.with-image li a .image,
.category-top .subcategories li a .image {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  height: 34px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
}

/* Hide uploaded purple PNG images, show text label from data attribute instead */
.category-top .subcategories.with-image li a[data-memory-enhanced] .image img,
.category-top .subcategories li a[data-memory-enhanced] .image img {
  display: none !important;
}

.category-top .subcategories.with-image li a[data-memory-enhanced] .image::after,
.category-top .subcategories li a[data-memory-enhanced] .image::after {
  content: attr(data-memory-label) !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #3c3d42 !important;
  letter-spacing: 0.02em !important;
}

/* Fallback: non-enhanced links keep original image styling */
.category-top .subcategories.with-image li a:not([data-memory-enhanced]) .image img,
.category-top .subcategories li a:not([data-memory-enhanced]) .image img {
  width: auto !important;
  max-width: 56px !important;
  height: 30px !important;
  object-fit: contain !important;
}

.category-top .subcategories.with-image li a .text,
.category-top .subcategories li a .text {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #3c3d42 !important;
}

.category-top .subcategories.with-image li a[data-memory="128gb"] .image,
.category-top .subcategories li a[data-memory="128gb"] .image {
  background: linear-gradient(135deg, #ecf6ff 0%, #dbeeff 100%) !important;
  box-shadow: inset 0 0 0 1px #b2d8ff !important;
}

.category-top .subcategories.with-image li a[data-memory="256gb"] .image,
.category-top .subcategories li a[data-memory="256gb"] .image {
  background: linear-gradient(135deg, #eef7ff 0%, #e2eeff 100%) !important;
  box-shadow: inset 0 0 0 1px #bfd6ff !important;
}

.category-top .subcategories.with-image li a[data-memory="512gb"] .image,
.category-top .subcategories li a[data-memory="512gb"] .image {
  background: linear-gradient(135deg, #f3eeff 0%, #e9deff 100%) !important;
  box-shadow: inset 0 0 0 1px #d2bcff !important;
}

.category-top .subcategories.with-image li a[data-memory="1tb"] .image,
.category-top .subcategories li a[data-memory="1tb"] .image {
  background: linear-gradient(135deg, #fff4e9 0%, #ffe4cd 100%) !important;
  box-shadow: inset 0 0 0 1px #ffc690 !important;
}

.category-top .subcategories.with-image li a[data-memory="2tb"] .image,
.category-top .subcategories li a[data-memory="2tb"] .image {
  background: linear-gradient(135deg, #fff0fa 0%, #ffe0f5 100%) !important;
  box-shadow: inset 0 0 0 1px #ffb7e8 !important;
}

@media (max-width: 767px) {
  .category-top .subcategories.with-image {
    gap: 10px !important;
  }

  .category-top .subcategories.with-image > li {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .category-top .subcategories.with-image li a,
  .category-top .subcategories li a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  .category-top .subcategories.with-image li a .text,
  .category-top .subcategories li a .text {
    font-size: 14px !important;
  }
}

/* Navbar dropdown: keep only first 3 storage variants visible */
#navigation .menu-level-3 > li:nth-child(n+4),
.navigation-in .menu-level-3 > li:nth-child(n+4) {
  display: none !important;
}

#navigation .menu-level-3 .more-items-trigger,
.navigation-in .menu-level-3 .more-items-trigger {
  display: none !important;
}

/* iPhone model cards - consistent height for grid alignment */
.menu-level-2 > li.has-third-level {
  min-height: 120px !important;
  margin-bottom: 16px !important;
  vertical-align: top !important;
}

/* iPhone model titles - purple color */
.has-third-level > div > a {
  color: #5b2d8e !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: color 0.15s ease !important;
}

.has-third-level > div > a:hover {
  color: #7b4fb0 !important;
}

/* ========================================
   WELCOME SECTION
   Dark text on white background
   ======================================== */
.welcome-wrapper,
.welcome {
  background: transparent !important;
}

.welcome h1,
.welcome-wrapper h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.welcome p,
.welcome-wrapper p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #424245 !important;
}

/* ========================================
   REVIEWS / LATEST CONTRIBUTION SECTION
   Dark text on white background
   ======================================== */
.latest-contribution-wrapper,
.latest-contribution,
.latest-contribution-rating {
  background: transparent !important;
}

.latest-contribution-wrapper h2,
.latest-contribution h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.latest-contribution h4,
.latest-contribution span,
.latest-contribution p,
.latest-contribution a {
  color: #1d1d1f !important;
}

.latest-contribution-rating a {
  background: #f8f8fa !important;
  border-radius: 14px !important;
  border: 1px solid #ececf0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  color: #1d1d1f !important;
}

/* ========================================
   FOOTER
   ======================================== */
footer,
[role="contentinfo"],
#footer {
  background: #2d2d30 !important;
  padding: 40px 0 30px !important;
  margin-top: 0 !important;
}

/* Footer inner containers - no white backgrounds */
footer .container,
footer .row,
footer > div,
#footer .container,
#footer .row,
#footer > div,
.footer-bottom,
.footer-top {
  background: transparent !important;
  background-color: transparent !important;
}

footer * {
  color: rgba(255,255,255,0.8) !important;
}

footer strong {
  color: #fff !important;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary,
.btn-buy {
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
}

/* Rounded "Add to Cart" button - pill shape */
.add-to-cart-button,
.btn-conversion {
  border-radius: 30px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* ========================================
   PRODUCT CARDS
   ======================================== */
.p-product,
.product-card {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06) !important;
}

.p-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
}

/* ========================================
   SIDEBAR
   ======================================== */
aside,
[role="complementary"] {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

aside > div,
[role="complementary"] > div {
  padding: 20px !important;
  border-bottom: 1px solid #f0f0f2 !important;
}

aside > div:last-child,
[role="complementary"] > div:last-child {
  border-bottom: none !important;
}

aside h4,
[role="complementary"] h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5b2d8e !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f0f0f2 !important;
}

.category-tree a,
aside li a,
[role="complementary"] li a {
  color: #424245 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.category-tree a:hover,
aside li a:hover,
[role="complementary"] li a:hover {
  color: #5b2d8e !important;
}

.category-tree .active > a,
aside .active > a {
  color: #fff !important;
  font-weight: 600 !important;
}

aside input[type="range"],
[role="complementary"] input[type="range"] {
  accent-color: #5b2d8e !important;
}

aside input[type="checkbox"],
[role="complementary"] input[type="checkbox"] {
  accent-color: #5b2d8e !important;
  width: 18px !important;
  height: 18px !important;
}

aside .top-products li,
[role="complementary"] .top-products li {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f2 !important;
}

aside .top-products li:last-child {
  border-bottom: none !important;
}

aside .top-products strong,
[role="complementary"] .top-products strong {
  color: #5b2d8e !important;
  font-weight: 700 !important;
}

/* Sidebar breathing room from left edge */
.content-wrapper-in {
  gap: 24px !important;
  padding-left: 20px !important;
}

/* Category box internal padding */
.box-categories {
  padding: 20px 16px !important;
}

.box-categories .box-in {
  padding: 0 !important;
}

/* Category heading */
.box-categories h4 {
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

/* Top-level category links (iPhone, Prislusenstvi) */
.box-categories .category-tree > div > a,
.box-categories .box-in > div > a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #3b165f !important;
  padding: 8px 0 !important;
  display: block !important;
}

/* Category list items */
.box-categories li {
  padding: 0 !important;
  margin: 0 !important;
}

.box-categories li > a {
  display: block !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  font-size: 13.5px !important;
  color: #424245 !important;
}

.box-categories li > a:hover {
  background: rgba(91, 45, 142, 0.06) !important;
  color: #5b2d8e !important;
}

/* Active category highlight */
.box-categories li.active > a,
.box-categories .active > a {
  background: #5b2d8e !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Sub-categories - collapse by default, expand on hover */
.box-categories ul ul {
  margin-left: 8px !important;
  padding-left: 10px !important;
  border-left: 2px solid #ece6f3 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease, opacity 0.3s ease !important;
  opacity: 0 !important;
}

.box-categories li:hover > ul {
  max-height: 500px !important;
  opacity: 1 !important;
}

/* Keep active sub-category branch open */
.box-categories li.active > ul,
.box-categories li:has(.active) > ul {
  max-height: 500px !important;
  opacity: 1 !important;
}

/* Sub-category link styling */
.box-categories ul ul a {
  font-size: 12.5px !important;
  color: #6b6b6e !important;
  padding: 4px 8px !important;
}

.box-categories ul ul a:hover {
  color: #5b2d8e !important;
  background: rgba(91, 45, 142, 0.04) !important;
}

/* Expand indicator for items with children */
.box-categories li:has(> ul) > a::after {
  content: '\203A' !important;
  float: right !important;
  color: #bbb !important;
  font-size: 16px !important;
  transition: transform 0.2s ease !important;
}

.box-categories li:has(> ul):hover > a::after,
.box-categories li:has(> ul).active > a::after {
  transform: rotate(90deg) !important;
  color: #5b2d8e !important;
}

.box-categories li.active:has(> ul) > a::after {
  color: #fff !important;
}

/* Section separator between iPhone and Prislusenstvi */
.box-categories .box-in > div > div + div {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f0f0f2 !important;
}

/* ========================================
   HOMEPAGE CLEANUP
   ======================================== */
.middle-banners-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.welcome-wrapper {
  margin: 0 !important;
  padding: 30px 0 !important;
  background: transparent !important;
}

.latest-contribution-box {
  margin: 0 !important;
  padding: 20px 0 !important;
  background: transparent !important;
}

/* Remove any remaining white lines/gaps */
.container-fluid,
.row,
main.content > .container,
main.content > .row {
  background: transparent !important;
}

/* Hide empty wrapper sections on homepage */
.content-wrapper.container:not(.navigation-wrapper):not(.footer-bottom):not(:has(img)):not(:has(h1)):not(:has(h2)):not(:has(.benefitBanner)) {
  display: none !important;
}

/* ========================================
   MOBILE NAVIGATION FIX
   ======================================== */
@media (max-width: 991px) {
  /* Hide desktop nav by default on mobile */
  #header nav,
  #navigation,
  .navigation-in {
    display: none !important;
  }

  /* Show nav when hamburger menu is opened */
  body.navigation-window-visible .navigation-in {
    display: block !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: #3B165F !important;
    overflow-y: auto !important;
    height: auto !important;
    padding: 8px 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  }

  body.navigation-window-visible .navigation-in ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.navigation-window-visible .navigation-in li {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  body.navigation-window-visible .navigation-in a {
    color: #fff !important;
    padding: 14px 24px !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
  }

  body.navigation-window-visible .navigation-in a:hover,
  body.navigation-window-visible .navigation-in a:active {
    background: rgba(255,255,255,0.1) !important;
  }

  body.navigation-window-visible .navigation-in ul ul a {
    padding-left: 44px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.8) !important;
  }

  /* Overall wrapper - no extra top padding */
  .overall-wrapper {
    padding-top: 0 !important;
  }

  /* Reduce margins on content for tighter mobile layout */
  main.content {
    margin-top: 5px !important;
  }

  .benefitBanner {
    margin-top: 5px !important;
  }
}

/* ========================================
   PRODUCTS/CATEGORY PAGE STYLES
   ======================================== */

/* Main content area on category/product pages (NOT homepage) */
body:not(.type-index) main.content,
body:not(.type-index) main[role="main"] {
  background: #fff !important;
  border-radius: 16px !important;
  margin: 20px !important;
  padding: 24px !important;
}

/* Homepage main content - transparent, no spacing */
body.type-index main.content,
body.type-index main[role="main"] {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Page heading - purple */
main h1,
.category-heading h1 {
  color: #5b2d8e !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  margin-bottom: 20px !important;
}

/* Section headings */
main h2 {
  color: #5b2d8e !important;
  font-weight: 600 !important;
  font-size: 20px !important;
}

/* Remove white line between nav and breadcrumbs */
.navigation-wrapper,
#navigation,
.navigation-in,
header,
.header-wrapper {
  border-bottom: none !important;
}

/* Breadcrumb - edge aligned, white text on purple, with extra top padding to avoid nav cutoff */
.breadcrumbs-wrapper,
.breadcrumb-wrapper {
  background: transparent !important;
  padding: 20px 0 12px 0 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.breadcrumbs-wrapper.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.breadcrumbs,
.breadcrumbs-wrapper .breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs-wrapper a,
.breadcrumbs-wrapper span {
  color: #666 !important;
  font-size: 14px !important;
}

.breadcrumbs a:hover {
  color: #5b2d8e !important;
}

/* Navigation home icon in breadcrumbs */
.navigation-home-icon::before,
.breadcrumbs .navigation-home-icon::before {
  color: #666 !important;
}

/* Remove white border on content wrapper */
.content-wrapper,
#content-wrapper {
  border-top: none !important;
}

/* Category subcategory link cards - rounded */
.subcategories li a,
.subcategories.with-image li a,
.subcategories-list li a,
.category-children a {
  background: #f8f8fa !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
  color: #424245 !important;
  overflow: hidden !important;
}

.subcategories li a:hover,
.subcategories-list li a:hover,
.category-children a:hover {
  background: #fff !important;
  border-color: #5b2d8e !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.15) !important;
  color: #5b2d8e !important;
}

/* Product cards in listing */
.p-product,
.product-card {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid #f0f0f2 !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
}

.p-product:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  border-color: #e0e0e5 !important;
}

/* Product title links */
.p-name a,
.product-card a {
  color: #1d1d1f !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.p-name a:hover,
.product-card a:hover {
  color: #5b2d8e !important;
}

/* Price styling */
.p-price,
.product-price,
.p-final-price,
.price strong {
  color: #5b2d8e !important;
  font-weight: 700 !important;
}

/* Availability badge - green */
.p-availability,
.availability {
  color: #34c759 !important;
  font-size: 12px !important;
}

/* Sorting buttons */
.sorting button,
[class*="sorting"] button {
  background: #f5f5f7 !important;
  border: 1px solid #e5e5e7 !important;
  border-radius: 8px !important;
  color: #424245 !important;
  transition: all 0.15s ease !important;
  padding: 8px 16px !important;
}

.sorting button:hover {
  background: #fff !important;
  border-color: #5b2d8e !important;
  color: #5b2d8e !important;
}

.sorting button[disabled],
.sorting button:disabled {
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  border-color: #5b2d8e !important;
  color: #fff !important;
}

/* Detail button on product cards */
.p-detail-inner a,
.btn-detail {
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.p-detail-inner a:hover,
.btn-detail:hover {
  background: linear-gradient(180deg, #7b4fb0 0%, #6b3fa0 100%) !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.3) !important;
}

/* Pagination */
.pagination a,
.paging a {
  background: #f5f5f7 !important;
  border-radius: 8px !important;
  color: #424245 !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}

.pagination a:hover,
.paging a:hover {
  background: #5b2d8e !important;
  color: #fff !important;
}

.pagination strong,
.paging strong {
  background: #5b2d8e !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
}

/* Load more button */
.load-more,
button[class*="load-more"] {
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.load-more:hover {
  background: linear-gradient(180deg, #7b4fb0 0%, #6b3fa0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.3) !important;
}

/* Product badge/label (e.g., "NABÍJEČKA ZDARMA") */
.p-label,
.product-label,
.p-badge {
  background: #34c759 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ========================================
   DISCOUNT BADGE - GLOBAL
   Purple pill, top-right of product image
   ======================================== */

/* Anchor the image container for absolute positioning */
.products .product .image,
.p-image-wrapper,
.p-image,
.p .image {
  position: relative !important;
}

/* Position flags-extra to top-right */
.flags-extra {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
}

/* Discount badge - circular, percentage only */
.flag-discount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 50% !important;
  width: 70px !important;
  height: 70px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.3) !important;
  text-align: center !important;
}

/* Hide original price amount - show only percentage */
.flag-discount .price-standard,
.flag-discount .price-standard span {
  display: none !important;
}

/* Discount percentage text */
.flag-discount .price-save {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

/* ========================================
   PRODUCT DETAIL - PARAMETER SELECTORS
   Rounded, themed surcharge/option dropdowns
   ======================================== */

/* Parameter table container */
table.detail-parameters {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  margin: 8px 0 16px !important;
}

/* Parameter rows - light purple background */
table.detail-parameters tr {
  background: #f8f6fb !important;
  border-radius: 12px !important;
}

/* Parameter labels */
table.detail-parameters th {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #3b165f !important;
  white-space: nowrap !important;
  border-radius: 12px 0 0 12px !important;
  vertical-align: middle !important;
}

/* Parameter cells */
table.detail-parameters td {
  padding: 6px 8px 6px 0 !important;
  border-radius: 0 12px 12px 0 !important;
  vertical-align: middle !important;
}

/* Select dropdowns - rounded with custom purple chevron */
table.detail-parameters select,
.detail-parameters .surcharge-parameter {
  width: 100% !important;
  height: 42px !important;
  padding: 8px 40px 8px 14px !important;
  border: 2px solid #e8e0f0 !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b2d8e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  font-size: 13.5px !important;
  color: #424245 !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

table.detail-parameters select:hover,
.detail-parameters .surcharge-parameter:hover {
  border-color: #c4b0d9 !important;
}

table.detail-parameters select:focus,
.detail-parameters .surcharge-parameter:focus {
  border-color: #5b2d8e !important;
  box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.12) !important;
  outline: none !important;
}

/* Question mark tooltips */
table.detail-parameters .question-tooltip,
table.detail-parameters .show-tooltip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ece6f3 !important;
  color: #5b2d8e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
  cursor: help !important;
  transition: background 0.2s ease !important;
}

table.detail-parameters .question-tooltip:hover,
table.detail-parameters .show-tooltip:hover {
  background: #5b2d8e !important;
  color: #fff !important;
}

/* ========================================
   PRODUCT DETAIL PAGE FIXES
   Clean image styling, action buttons
   ======================================== */

/* Remove purple border/glow from main product image */
.p-image,
.p-main-image,
.product-image,
.p-image-wrapper,
.image-wrapper,
.p-detail-inner-left .p-image,
[class*="product-image"],
[class*="p-image"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Product image container - clean white background */
.p-detail-inner-left,
.product-image-container,
.p-image-container {
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Main product image link - no purple styling */
.p-image a,
.p-main-image a {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Thumbnail wrapper - remove purple background strip */
.p-thumbnails-wrapper,
.p-thumbnails,
.p-thumbnails-horizontal,
.p-thumbnails-inner,
.p-image-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* Individual thumbnail links - clean styling */
.p-thumbnail,
a.p-thumbnail,
.p-image-thumbnail {
  background: #f5f5f7 !important;
  border: 1px solid #e5e5e7 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Active/selected/highlighted thumbnail */
.p-thumbnail.highlighted,
.p-thumbnail.active,
.p-thumbnail:hover,
.p-thumbnails a.active,
.p-thumbnails a:hover {
  border-color: #5b2d8e !important;
  box-shadow: 0 2px 8px rgba(91, 45, 142, 0.15) !important;
  background: #fff !important;
}

/* Thumbnail images */
.p-thumbnail img {
  background: transparent !important;
}

/* ========================================
   TISK, ZEPTAT SE, SDÍLET BUTTONS
   Purple text with light borders, no dark background
   ======================================== */

/* Remove background from the wrapper */
.social-buttons-wrapper {
  background: transparent !important;
  padding: 16px 0 !important;
}

/* Link icons container - no background */
.link-icons {
  background: transparent !important;
  display: flex !important;
  gap: 12px !important;
}

/* Individual link-icon buttons - purple text, light border, no dark background */
.link-icon,
.link-icon.print,
.link-icon.chat,
.link-icon.share,
a.link-icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #5b2d8e !important;
  border: 1px solid #e5e5e7 !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

/* Hover state for link-icon buttons */
.link-icon:hover,
a.link-icon:hover {
  color: #5b2d8e !important;
  background: rgba(91, 45, 142, 0.06) !important;
  border-color: #5b2d8e !important;
}

/* Icons inside the buttons */
.link-icon::before {
  color: #5b2d8e !important;
  font-size: 18px !important;
}

/* Share buttons popup container */
.share-buttons,
.social-share-buttons,
.js-share-buttons {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* ========================================
   PRODUCT GALLERY - CLEAN THUMBNAILS
   No borders, purple underline for active
   ======================================== */

/* Keep colorbox/lightbox links hidden */
.cbox-gal,
.cboxElement {
  display: none !important;
}

/* Main product image - fill container width */
a.p-main-image img,
.p-main-image.cloud-zoom img {
  max-width: 100% !important;
  height: auto !important;
}

/* Remove purple from main image */
a.p-main-image,
.p-main-image.cloud-zoom {
  border: none !important;
  box-shadow: none !important;
}

/* Thumbnail container - transparent */
.p-thumbnails-wrapper,
.p-thumbnails,
.p-thumbnails-horizontal {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Thumbnails - no border boxes, clean look */
a.p-thumbnail {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  margin-right: 8px !important;
}

/* Active thumbnail - purple underline only */
a.p-thumbnail.highlighted {
  border-bottom: 2px solid #5b2d8e !important;
  background: transparent !important;
}

/* Thumbnail hover */
a.p-thumbnail:hover {
  opacity: 0.75 !important;
}

/* Thumbnail images - clean */
a.p-thumbnail img {
  background: transparent !important;
  border: none !important;
}

/* ========================================
   HOMEPAGE PRODUCT SECTION
   White card with legible text colors, centered
   ======================================== */

/* Center the container that holds the main content */
body.type-index .content-wrapper.container {
  max-width: 1418px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Main content card - subtle separation on white background */
body.type-index main.content:not(#content) {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin: 24px 0 !important;
  border: 1px solid #f0f0f2 !important;
}

.homepage-group-title {
  color: #1d1d1f !important;
}

.products .product a.name,
.products .product a.name span {
  color: #1d1d1f !important;
}

.products .product .availability span {
  color: #34c759 !important;
}

.products .product .price-final strong {
  color: #5b2d8e !important;
}

.products .product .p-code {
  color: #666 !important;
}

/* Fix banner cutoff from navigation */
body.type-index .banners-row {
  margin-top: 8px !important;
}

body.type-index .next-to-carousel-banners {
  margin-top: 0 !important;
}

/* Reviews section legibility fix */
.latest-contribution-rating h2 {
  color: #1d1d1f !important;
}

.latest-contribution-rating .latest-contribution-product {
  color: #1d1d1f !important;
}

.latest-contribution-rating .latest-contribution-info {
  color: #666 !important;
}

/* ========================================
   PRODUCT DETAIL - HIDE SIDEBAR
   Cleaner layout without category sidebar
   ======================================== */
body.type-detail aside,
body.type-detail [role="complementary"] {
  display: none !important;
}

/* Expand main content to full width on product detail */
body.type-detail main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ========================================
   PRODUCT DETAIL - CENTER DESCRIPTION (Task 33)
   Center the detailed product description text
   ======================================== */
body.type-detail .p-detail-body,
body.type-detail .tab-pane,
body.type-detail .p-description {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.type-detail .p-detail-body h3,
body.type-detail .p-description h3,
body.type-detail .p-detail-body h2,
body.type-detail .p-description h2 {
  text-align: center !important;
}

body.type-detail .p-detail-body p,
body.type-detail .p-description p {
  text-align: center !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.type-detail .p-detail-body img,
body.type-detail .p-description img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* Parameters table stays left-aligned */
body.type-detail .p-detail-body table.detail-parameters,
body.type-detail .p-description table {
  text-align: left !important;
  max-width: 100% !important;
}

body.type-detail .p-detail-body table th,
body.type-detail .p-detail-body table td {
  text-align: left !important;
}

/* ========================================
   ROUNDED HOMEPAGE BANNERS
   Jabkolevne-style rounded banners
   ======================================== */

/* Add proper top spacing between navbar and banner section */
.content-wrapper.before-carousel {
  padding-top: 20px !important;
}

.banners-row {
  padding: 20px !important;
  margin-top: 0 !important;
}

/* Main carousel banner - rounded with proper spacing */
.carousel.slide {
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

.carousel-inner,
.carousel-item,
.carousel-item img,
.carousel-item a {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Side banners container - align tops */
.next-to-carousel-banners {
  gap: 16px !important;
  margin-top: 0 !important;
}

.next-to-carousel-banners .banner-wrapper,
.next-to-carousel-banners a,
.next-to-carousel-banners img {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Add subtle shadow for depth */
.carousel.slide,
.next-to-carousel-banners .banner-wrapper {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
}

/* ========================================
   HORIZONTAL OVERFLOW FIX
   Prevents 100vw nav from causing scrollbar
   ======================================== */
body.type-index {
  overflow-x: hidden !important;
}

.overall-wrapper {
  overflow-x: hidden !important;
}

/* ========================================
   HOMEPAGE PRODUCT CARDS
   3-column grid, enhanced shadows, hover lift
   ======================================== */
.products {
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.products .product {
  flex: 0 0 calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  background: #fff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(107, 63, 160, 0.1) !important;
  padding: 16px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.products .product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(107, 63, 160, 0.2) !important;
  border-color: rgba(107, 63, 160, 0.2) !important;
}

/* Align buttons: make card a flex column, push price/button to bottom */
.products .product .p {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.products .product .p-in {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.products .product .p-bottom {
  margin-top: auto !important;
}

/* Round the product image area */
.products .product .image,
.products .product .p-image {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Hide product code */
.products .product .p-code,
.products .product .product-code,
.products .product [class*="code"] {
  display: none !important;
}

/* ========================================
   CART DROPDOWN Z-INDEX FIX
   Ensures cart dropdown appears above navigation
   ======================================== */
.user-action-cart.popup-widget,
.cart-widget,
.popup-widget.cart-widget {
  z-index: 200 !important;
}

.header-top {
  position: relative !important;
  z-index: 150 !important;
}

/* Mobile-only close button for header cart popup */
.cart-widget .cart-widget-mobile-close {
  display: none !important;
}

@media (max-width: 991px) {
  .cart-widget .cart-widget-mobile-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(241, 242, 246, 0.95) !important;
    color: #666 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 20 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
  }
}

/* ========================================
   CART WIDGET - STABLE LAYOUT
   Keep popup compact and functional on desktop/mobile.
   ======================================== */

/* Quantity controls inside widget */
.cart-widget-inner .quantity,
.cart-widget-inner span.quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
}

.cart-widget-inner .quantity label {
  display: inline-flex !important;
  margin: 0 !important;
}

.cart-widget-inner .quantity button.increase,
.cart-widget-inner .quantity button.decrease {
  display: none !important;
}

.cart-widget-inner .quantity input.amount,
.cart-widget-inner input.amount {
  width: 18px !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  box-shadow: none !important;
  outline: none !important;
}

.cart-widget-inner input::-webkit-outer-spin-button,
.cart-widget-inner input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Product rows in standard cart-widget markup */
.cart-widget-product {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "image name remove"
    "image meta price" !important;
  align-items: center !important;
  gap: 6px 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #ececf2 !important;
}

.cart-widget-product-image {
  grid-area: image !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-widget-product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.cart-widget-product-name {
  grid-area: name !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cart-widget-product-name strong {
  margin: 0 !important;
  line-height: 1.3 !important;
}

.cart-widget-product-name strong a {
  color: #1d1d1f !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.cart-widget-product-name span {
  grid-area: price !important;
  color: #5b2d8e !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

.cart-widget-product-amount {
  grid-area: meta !important;
  display: inline-flex !important;
  align-items: center !important;
}

.cart-widget-product-unit {
  display: none !important;
}

.cart-widget-product-amount::after {
  content: " ks" !important;
  font-size: 12px !important;
  color: #666 !important;
  margin-left: 4px !important;
}

.cart-widget-product-delete {
  grid-area: remove !important;
  justify-self: end !important;
  align-self: start !important;
}

.cart-widget-product-delete button.remove-item,
.cart-widget .remove-item {
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f2f6 !important;
  color: #7a7d89 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.cart-widget-product-delete button.remove-item::before,
.cart-widget .remove-item::before {
  content: "×" !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.cart-widget-product-delete button.remove-item .sr-only,
.cart-widget .remove-item .sr-only {
  display: none !important;
}

/* ========================================
   QUANTITY SELECTOR - PRODUCT DETAIL ONLY
   Scoped to .p-detail-inner to avoid affecting cart dropdown
   ======================================== */

/* Main container - horizontal flex layout */
.p-detail-inner .quantity {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #f5f5f7 !important;
  border-radius: 30px !important;
  padding: 4px !important;
  margin-right: 16px !important;
  gap: 4px !important;
  position: relative !important;
}

/* Hide tooltips */
.p-detail-inner .quantity .increase-tooltip,
.p-detail-inner .quantity .decrease-tooltip {
  display: none !important;
}

/* Input label wrapper - center position */
.p-detail-inner .quantity label {
  order: 2 !important;
  display: flex !important;
  margin: 0 !important;
  position: relative !important;
}

/* Input field - rounded white background */
.p-detail-inner .quantity input.amount {
  width: 50px !important;
  height: 38px !important;
  border: none !important;
  background: #fff !important;
  border-radius: 19px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  -moz-appearance: textfield !important;
  padding: 0 !important;
}

/* Hide default browser spinners */
.p-detail-inner .quantity input::-webkit-outer-spin-button,
.p-detail-inner .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Override absolute positioning from theme */
.p-detail-inner .quantity button.decrease,
.p-detail-inner .quantity button.increase {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Decrease button (−) - LEFT position */
.p-detail-inner .quantity button.decrease {
  order: 1 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: none !important;
  background: #5b2d8e !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
}

/* Increase button (+) - RIGHT position */
.p-detail-inner .quantity button.increase {
  order: 3 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: none !important;
  background: #5b2d8e !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
}

/* Show the +/- sign text */
.p-detail-inner .quantity button .increase__sign,
.p-detail-inner .quantity button .decrease__sign {
  display: inline !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Hide any pseudo-element icons from theme */
.p-detail-inner .quantity button::before,
.p-detail-inner .quantity button::after {
  display: none !important;
  content: none !important;
}

/* Hover state */
.p-detail-inner .quantity button:hover {
  background: #7b4fb0 !important;
}

/* ========================================
   CART DROPDOWN - BUTTON + TABLE FALLBACK
   ======================================== */

.cart-widget-button {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 14px 18px !important;
  background: transparent !important;
}

.cart-widget .btn-conversion,
.cart-widget-button .btn-conversion,
#continue-order-button {
  width: auto !important;
  min-width: 190px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  border-radius: 25px !important;
  background: linear-gradient(180deg, #6b3fa0 0%, #5b2d8e 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 12px rgba(91, 45, 142, 0.3) !important;
  transition: all 0.2s ease !important;
}

.cart-widget .btn-conversion:hover,
.cart-widget-button .btn-conversion:hover,
#continue-order-button:hover {
  background: linear-gradient(180deg, #7b4fb0 0%, #6b3fa0 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(91, 45, 142, 0.4) !important;
}

/* Fallback when popup receives cart-table markup */
.cart-widget-inner .cart-row {
  margin: 0 !important;
}

.cart-widget-inner,
.cart-widget-inner .cart-inner,
.cart-widget-inner .cart-content {
  padding: 0 !important;
  margin: 0 !important;
}

.cart-widget-inner .cart-row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.cart-widget-inner .cart-row > .col-md-4 {
  display: none !important;
}

.cart-widget-inner .cart-header,
.cart-widget-inner .checkout-box-wrapper,
.cart-widget-inner .summary-wrapper {
  display: none !important;
}

.cart-widget-inner .cart-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.cart-widget-inner .cart-table thead,
.cart-widget-inner .cart-table .p-availability,
.cart-widget-inner .cart-table .p-price {
  display: none !important;
}

.cart-widget-inner .cart-table,
.cart-widget-inner .cart-table tbody {
  display: block !important;
}

.cart-widget-inner .cart-table tr.removeable {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "image name remove"
    "image quantity total" !important;
  align-items: center !important;
  gap: 6px 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #ececf2 !important;
}

.cart-widget-inner .cart-table td {
  display: block !important;
  border: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.cart-widget-inner .cart-table td.cart-p-image {
  grid-area: image !important;
  width: 56px !important;
  height: 56px !important;
}

.cart-widget-inner .cart-table td.cart-p-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.cart-widget-inner .cart-table td.p-name {
  grid-area: name !important;
  padding-right: 8px !important;
}

.cart-widget-inner .cart-table td.p-name a {
  color: #1d1d1f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.cart-widget-inner .cart-table td.p-quantity {
  grid-area: quantity !important;
}

.cart-widget-inner .cart-table td.p-total {
  grid-area: total !important;
  text-align: right !important;
  padding-right: 6px !important;
}

.cart-widget-inner .cart-table td.p-total strong {
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #5b2d8e !important;
}

.cart-widget-inner .cart-table td.p-total .inline {
  display: inline !important;
}

.cart-widget-inner .cart-table tr.removeable .remove-item {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
}

@media (max-width: 991px) {
  .cart-widget-button {
    justify-content: center !important;
    padding: 12px !important;
  }

  .cart-widget-product,
  .cart-widget-inner .cart-table tr.removeable {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    padding: 10px 10px 10px 12px !important;
    gap: 5px 10px !important;
  }

  .cart-widget-product-image,
  .cart-widget-inner .cart-table td.cart-p-image {
    width: 48px !important;
    height: 48px !important;
  }

  .cart-widget-product-name strong a,
  .cart-widget-inner .cart-table td.p-name a {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .cart-widget-product-name span,
  .cart-widget-inner .cart-table td.p-total strong {
    font-size: 18px !important;
  }

  .cart-widget-inner .quantity button.increase,
  .cart-widget-inner .quantity button.decrease {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .cart-widget-inner .quantity input.amount,
  .cart-widget-inner input.amount {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
}

/* ============================================
   MOBILE PRODUCT DETAIL PAGE OVERHAUL
   Comprehensive mobile UX improvements
   ============================================ */

@media (max-width: 991px) {

  /* ---- BREADCRUMBS ---- */
  body.type-detail .breadcrumbs-wrapper {
    padding: 10px 16px 6px !important;
    margin-top: 0 !important;
  }
  body.type-detail .breadcrumbs a,
  body.type-detail .breadcrumbs span {
    font-size: 12px !important;
  }

  /* ---- OVERALL CONTENT CARD ---- */
  body.type-detail main.content {
    margin: 8px 10px !important;
    padding: 16px 14px !important;
    border-radius: 20px !important;
  }

  /* ---- PRODUCT TITLE ---- */
  body.type-detail h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    color: #1d1d1f !important;
  }

  /* Hide product code */
  body.type-detail .p-code,
  body.type-detail .product-code {
    display: none !important;
  }

  /* ---- META ROW (badge, stars, brand) ---- */
  body.type-detail .p-detail-header .p-info,
  body.type-detail .p-detail-inner .p-info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  /* ---- THUMBNAIL ARROWS - HIDE ---- */
  body.type-detail a.thumbnail-prev,
  body.type-detail a.thumbnail-next {
    display: none !important;
  }

  /* Thumbnail strip - swipeable horizontal scroll */
  body.type-detail .p-thumbnails-wrapper,
  body.type-detail .p-thumbnails {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 !important;
  }
  body.type-detail .p-thumbnails-wrapper::-webkit-scrollbar,
  body.type-detail .p-thumbnails::-webkit-scrollbar {
    display: none !important;
  }

  body.type-detail .p-thumbnails-inner,
  body.type-detail .p-thumbnails-horizontal {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body.type-detail a.p-thumbnail {
    flex-shrink: 0 !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
    border: 2px solid #e8e8ed !important;
    padding: 4px !important;
    background: #f8f8fa !important;
  }

  body.type-detail a.p-thumbnail.highlighted {
    border-color: #5b2d8e !important;
    background: #fff !important;
  }

  body.type-detail a.p-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ---- PRICE SECTION ---- */
  body.type-detail .p-final-price-wrapper {
    margin: 12px 0 4px !important;
  }


  /* Final price - large and prominent */
  body.type-detail .p-final-price-wrapper .price-final strong {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.02em !important;
  }

  /* ---- AVAILABILITY BADGE ---- */
  body.type-detail .availability-value {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: #fff8e6 !important;
    border: 1px solid #f5a62333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f5a623 !important;
    margin: 6px 0 14px !important;
  }

  /* ---- PARAMETER TABLE - STACKED LAYOUT ---- */
  body.type-detail table.detail-parameters {
    width: 100% !important;
    border-spacing: 0 8px !important;
  }

  body.type-detail table.detail-parameters tr {
    display: flex !important;
    flex-direction: column !important;
    background: #f8f6fb !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    gap: 6px !important;
  }

  body.type-detail table.detail-parameters th {
    display: block !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #3b165f !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: normal !important;
  }

  body.type-detail table.detail-parameters td {
    display: block !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.type-detail table.detail-parameters select {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 40px 10px 14px !important;
    border: 2px solid #e0d6eb !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: #333 !important;
  }

  /* ---- QUANTITY + ADD TO CART ---- */
  body.type-detail .p-detail-inner .quantity {
    margin-bottom: 12px !important;
  }

  /* Full-width add to cart button */
  body.type-detail .p-detail-inner .btn-conversion,
  body.type-detail .add-to-cart-button {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
  }

  /* Detailní informace link - outline style */
  body.type-detail .p-detail-inner p:has(a[href="#description"]) a {
    font-size: 14px !important;
    color: #5b2d8e !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1.5px solid #5b2d8e !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
  }

  /* ---- ACTION BUTTONS (Tisk, Zeptat se, Sdilet) ---- */
  body.type-detail .social-buttons-wrapper {
    padding: 12px 0 !important;
    border-top: 1px solid #f0f0f2 !important;
    margin-top: 16px !important;
  }

  body.type-detail .social-buttons-wrapper .link-icons {
    display: flex !important;
    gap: 8px !important;
  }

  body.type-detail .social-buttons-wrapper .link-icon {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    background: #f8f8fa !important;
    border: 1px solid #e8e8ed !important;
    color: #888 !important;
  }

  body.type-detail .social-buttons-wrapper .link-icon span {
    color: #888 !important;
    font-size: 11px !important;
  }

  body.type-detail .social-buttons-wrapper .link-icon::before {
    color: #999 !important;
    font-size: 16px !important;
  }

  body.type-detail .social-buttons-wrapper .link-icon:hover {
    background: #f0ecf5 !important;
    border-color: #d0c4e0 !important;
    color: #5b2d8e !important;
  }

  /* ---- BENEFITS SECTION - 2x2 GRID ---- */
  body.type-detail .benefitBanner.position--benefitProduct {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #f8f6fb !important;
    border-radius: 16px !important;
    margin: 20px 0 !important;
    box-shadow: none !important;
  }

  body.type-detail .benefitBanner.position--benefitProduct .benefitBanner__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    background: #fff !important;
    border-radius: 12px !important;
  }

  body.type-detail .benefitBanner__picture {
    width: 40px !important;
    height: 40px !important;
  }

  body.type-detail .benefitBanner__img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  body.type-detail .benefitBanner__title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    line-height: 1.3 !important;
  }

  body.type-detail .benefitBanner__data {
    font-size: 11px !important;
    color: #888 !important;
    line-height: 1.3 !important;
  }

  /* ---- TABS ---- */
  body.type-detail .shp-tabs.p-detail-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #f0f0f2 !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    padding: 0 !important;
  }

  body.type-detail .shp-tabs.p-detail-tabs li {
    flex: 1 !important;
    text-align: center !important;
  }

  body.type-detail .shp-tabs.p-detail-tabs [role="tab"] {
    display: block !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #999 !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  body.type-detail .shp-tabs.p-detail-tabs [role="tab"][aria-selected="true"],
  body.type-detail .shp-tabs.p-detail-tabs .active [role="tab"] {
    color: #5b2d8e !important;
    border-bottom-color: #5b2d8e !important;
  }

  /* ---- DESCRIPTION CONTENT ---- */
  body.type-detail [role="tabpanel"] {
    padding: 0 4px !important;
  }

  body.type-detail [role="tabpanel"] h2 {
    font-size: 20px !important;
    margin: 24px 0 12px !important;
    color: #1d1d1f !important;
  }

  body.type-detail [role="tabpanel"] h3 {
    font-size: 17px !important;
    margin: 20px 0 10px !important;
    color: #1d1d1f !important;
  }

  body.type-detail [role="tabpanel"] p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #424245 !important;
  }

  /* Description images - responsive with rounded corners */
  body.type-detail [role="tabpanel"] img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
  }

  /* ---- SUPPLEMENTARY PARAMETERS TABLE ---- */
  body.type-detail .p-detail-parameters table,
  body.type-detail [role="tabpanel"] table {
    width: 100% !important;
  }

  body.type-detail .p-detail-parameters th,
  body.type-detail .p-detail-parameters td,
  body.type-detail [role="tabpanel"] table th,
  body.type-detail [role="tabpanel"] table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* ---- FIX META ROW OVERLAP (badge / stars / brand) ---- */
  body.type-detail .p-detail-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
  }

  body.type-detail .p-detail-info .flags-inline {
    order: 1 !important;
  }

  body.type-detail .p-detail-info .flag-tip {
    display: inline-block !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  body.type-detail .p-detail-info .stars-wrapper {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.type-detail .p-detail-info > div:has(a[data-testid="productCardBrandName"]) {
    order: 3 !important;
    display: block !important;
  }

  body.type-detail .p-detail-info a[data-testid="productCardBrandName"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 12px !important;
    background: #f0ecf5 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #5b2d8e !important;
    text-decoration: none !important;
    border: 1px solid #e0d6eb !important;
  }

  /* Hide pipe separators between meta items */
  body.type-detail .p-detail-info > span {
    display: none !important;
  }

  /* ---- DISCOUNT BADGE - TOP RIGHT, PURPLE ---- */
  body.type-detail .p-image-wrapper {
    position: relative !important;
  }

  body.type-detail .p-image .flags-extra {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 10 !important;
  }
}

/* ===== WHITE IMAGE EDGE FIX =====
   Product images have white backgrounds baked in.
   Anywhere they appear, keep the container bg white
   (including on hover) so the white edges stay invisible. */

/* Category page cards - always white bg */
.category-top a,
.category-top a:hover {
  background: #fff !important;
}

/* Subcategory cards with images - white bg so image edges blend */
.subcategories.with-image li a .image,
.subcategories li a .image {
  background: #fff !important;
}

/* Nav dropdown image links - white bg even on hover */
.menu-level-2 a.menu-image,
.menu-level-2 a.menu-image:hover {
  background: #fff !important;
}

/* Hide product descriptions only inside product cards (not detail-page content) */
.products .product .p-desc,
.products-top-wrapper .product .p-desc,
aside .top-products .p-desc,
[role="complementary"] .top-products .p-desc {
  display: none !important;
}

/* Hide promo coupon strip in compact Nejprodávanější sidebar cards */
.products-top-wrapper .promo-coupon-strip {
  display: none !important;
}

/* Hide promo banner on product detail and category pages (desktop only) */
body.desktop.type-detail #promo-banner,
body.desktop.type-category #promo-banner {
  display: none !important;
}

/* Make product-card text more prominent (Task #23) */
.products.products-block > .product .p-in a.name,
.products.products-block > .product .p-in a.name span,
.products.products-block > .product .p-name a {
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  color: #16161a !important;
}

.products.products-block > .product .availability,
.products.products-block > .product .availability span,
.products.products-block > .product .p-availability {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #2fa857 !important;
}

.products.products-block > .product .p-bottom .btn,
.products.products-block > .product .p-bottom .add-to-cart-button {
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 575px) {
  .products.products-block > .product .p-in a.name,
  .products.products-block > .product .p-in a.name span,
  .products.products-block > .product .p-name a {
    font-size: 16px !important;
  }
}

/* Align CTA buttons across product cards (desktop listing grids) */
@media (min-width: 768px) {
  .products.products-block > .product .p-bottom.single-button,
  .products.products-block > .product .p-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .products.products-block > .product .p-bottom.single-button > div,
  .products.products-block > .product .p-bottom > div {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .products.products-block > .product .price-final {
    white-space: nowrap !important;
  }

  .products.products-block > .product .p-bottom .prices {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .products.products-block > .product .p-bottom .p-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .products.products-block > .product .p-bottom .btn,
  .products.products-block > .product .p-bottom .add-to-cart-button {
    min-height: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 16px !important;
  }
}

/* =====================================================
   MOBILE PRODUCT CARDS - VERTICAL LAYOUT
   Single-column vertical cards on small screens,
   2-column grid on tablets.
   ===================================================== */
@media (max-width: 575px) {
  /* Section titles — white text on dark background */
  .homepage-group-title,
  .latest-contribution h2 {
    color: #fff !important;
  }

  /* Banner — full width edge-to-edge, no rounded corners (homepage only) */
  body.type-index .row.banners-row {
    padding: 0 !important;
    margin: 0 !important;
  }
  .content-wrapper.before-carousel {
    padding-top: 0 !important;
  }
  .carousel.slide,
  .carousel-inner,
  .carousel-item,
  .carousel-item a,
  .carousel-item img {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .wide-carousel,
  .wide-carousel .carousel {
    width: 100% !important;
    border-radius: 0 !important;
  }

  .products.products-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .products .product {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  }
  .products .product .p {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #fff !important;
  }
  .products .product a.image {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .products .product a.image img {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }

  /* Hide NABÍJEČKA ZDARMA on mobile - shown on product detail instead */
  .product .flag.flag-action {
    display: none !important;
  }

  /* STAV badge - pill, top-left of image */
  .products .product a.image .flags-default {
    display: flex !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 3 !important;
    flex-direction: row !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .products .product a.image .flags-default .flag-tip {
    display: block !important;
    width: auto !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Discount badge - compact pill, top-right of image */
  .products .product a.image .flags-extra {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
  }
  .products .product a.image .flag-discount {
    border-radius: 10px !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    box-shadow: 0 2px 6px rgba(91,45,142,0.25) !important;
  }
  .products .product a.image .flag-discount .price-save {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  .products .product a.image .flag-discount .price-standard { display: none !important; }

  /* Info section — full width below image */
  .products .product .p-in {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    gap: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #fff !important;
  }
  .products .product .p-in .p-in-in {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .products .product .p-in a.name,
  .products .product .p-in a.name span {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1d1d1f !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .products .product .p-in .availability span { font-size: 12px !important; }

  /* Price + Detail row */
  .products .product .p-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 4px !important;
    flex-wrap: nowrap !important;
  }
  .products .product .price-final {
    white-space: nowrap !important;
  }
  .products .product .price-final strong {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #5b2d8e !important;
  }
  .products .product .p-bottom .p-tools {
    flex-shrink: 0 !important;
  }
  .products .product .p-bottom .p-tools a.btn {
    padding: 8px 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  .products .product .p-code { display: none !important; }

  /* Hide product descriptions on mobile — they get cut off ugly */
  .products .product .p-desc { display: none !important; }

  /* Nejprodávanější (Bestsellers) cards — vertical stack on mobile */
  .products-top-wrapper .product .p {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }
  .products-top-wrapper .product .image {
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    display: flex !important;
    justify-content: center !important;
    min-height: unset !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .products-top-wrapper .product .image img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
  }
  .products-top-wrapper .product .p-in {
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .products-top-wrapper .product .p-in-in { width: 100% !important; }
  .products-top-wrapper .product .name {
    white-space: normal !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: unset !important;
  }
  .products-top-wrapper .product .availability { font-size: 12px !important; }
  .products-top-wrapper .products { gap: 12px !important; }
}

/* Tablet: 2-column layout */
@media (min-width: 576px) and (max-width: 991px) {
  .products .product {
    flex: 0 0 calc(50% - 9px) !important;
    max-width: calc(50% - 9px) !important;
  }
  .products .product .p .flags-extra { top: 6px !important; right: 6px !important; }
  .products .product .flag-discount {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
  .products .product .flag-discount .price-standard { display: none !important; }
}

/* Task #24: Kvalita iPhone page - hide sidebar and improve visuals */
body.in-varianty-prouzitych-iphonu .content-wrapper-in > aside,
body.in-varianty-prouzitych-iphonu .content-wrapper-in > [role="complementary"] {
  display: none !important;
}

body.in-varianty-prouzitych-iphonu .content-wrapper-in {
  display: block !important;
}

body.in-varianty-prouzitych-iphonu main.content.narrow {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 28px 30px 34px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9f7ff 100%) !important;
  box-shadow: 0 16px 40px rgba(46, 25, 79, 0.14) !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail > header h1 {
  margin: 0 0 16px !important;
  font-size: 34px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  color: #2a1650 !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail [itemprop="about"] > header h1 {
  margin: 6px 0 8px !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #2a1650 !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail [itemprop="about"] > header h3 {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #51308f !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2 {
  margin: 30px 0 12px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #2f1a5b !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail p,
body.in-varianty-prouzitych-iphonu article.pageArticleDetail li {
  font-size: 17px !important;
  line-height: 1.68 !important;
  color: #1f1c2a !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail ul {
  margin: 10px 0 16px 1.2em !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail hr {
  margin: 26px 0 !important;
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(109, 75, 164, 0),
    rgba(109, 75, 164, 0.45),
    rgba(109, 75, 164, 0)
  ) !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img),
body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) {
  margin: 30px 0 10px !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img) img,
body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) img {
  width: 210px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img) + ul,
body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) + ul {
  margin: 0 0 18px !important;
  padding: 16px 22px 16px 34px !important;
  background: linear-gradient(150deg, #ffffff 0%, #f3eefc 100%) !important;
  border: 1px solid #dfd2f5 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(72, 40, 120, 0.11) !important;
}

body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img) + ul li::marker,
body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) + ul li::marker {
  color: #5d3195 !important;
}

@media (max-width: 767px) {
  body.in-varianty-prouzitych-iphonu main.content.narrow {
    padding: 20px 16px 24px !important;
    border-radius: 14px !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail > header h1,
  body.in-varianty-prouzitych-iphonu article.pageArticleDetail [itemprop="about"] > header h1 {
    font-size: 28px !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail [itemprop="about"] > header h3 {
    font-size: 18px !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2 {
    font-size: 22px !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail p,
  body.in-varianty-prouzitych-iphonu article.pageArticleDetail li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img) img,
  body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) img {
    width: 172px !important;
  }

  body.in-varianty-prouzitych-iphonu article.pageArticleDetail h2:has(img) + ul,
  body.in-varianty-prouzitych-iphonu article.pageArticleDetail h3:has(img) + ul {
    padding: 14px 16px 14px 28px !important;
  }
}

/* ========================================
   TASK 36: MOBILE FIXED HEADER (FINAL OVERRIDE)
   Must be at bottom of file to win over all earlier rules.
   Logo left, search + cart right, no hamburger.
   Prevents Shoptet JS scroll-hide transforms.
   ======================================== */
@media (max-width: 991px) {
  #header, header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    background: #3B165F !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    overflow: visible !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  .navigation-wrapper {
    background: #3B165F !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    transition: none !important;
    padding: 0 12px !important;
  }
  .header-top {
    background: transparent !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
  }
  .site-name-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin-right: auto !important;
  }
  h1.site-name, .site-name {
    position: static !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  h1.site-name a {
    display: flex !important;
    align-items: center !important;
  }
  .site-name img,
  .header-top .site-name img,
  h1.site-name img {
    height: 150px !important;
    width: auto !important;
    max-height: 150px !important;
    object-fit: contain !important;
    margin: -45px 0 !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;
    transform: none !important;
    transition: none !important;
  }
  .navigation-buttons {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    z-index: 2 !important;
    transition: none !important;
  }
  .cart-count, .btn.cart-count {
    position: static !important;
    color: #fff !important;
    transform: none !important;
    transition: none !important;
  }
  .top-navigation-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    background: transparent !important;
    border-bottom: none !important;
    height: 60px !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
  }
  .top-navigation-bar .container,
  .top-navigation-bar .top-navigation-tools {
    background: transparent !important;
    pointer-events: none !important;
    height: 60px !important;
    transform: none !important;
    transition: none !important;
  }
  .top-navigation-bar .responsive-tools {
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    position: absolute !important;
    right: 64px !important;
    top: 0 !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
  }
  .top-navigation-bar .responsive-tools a {
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    transition: none !important;
  }
  .top-navigation-bar .responsive-tools a::before {
    font-size: 24px !important;
    color: #fff !important;
  }
  .responsive-tools a[data-target="navigation"],
  .responsive-tools a[data-target="login"],
  .top-navigation-bar .top-navigation-contacts,
  .top-navigation-bar .top-nav-button-login,
  .top-navigation-bar .top-navigation-menu {
    display: none !important;
  }
  #promo-banner {
    margin-top: 60px !important;
    position: relative !important;
    z-index: 100 !important;
  }
  .overall-wrapper {
    padding-top: 0 !important;
  }
}

/* ========================================
   PROMO BANNER - Desktop: below nav, low z-index so dropdowns show above
   ======================================== */
@media (min-width: 992px) {
  #promo-banner {
    z-index: 1 !important;
    position: relative !important;
    margin-top: 20px !important;
  }
}

/* ========================================
   MOBILE CATEGORY NAVIGATION
   ======================================== */
@media (max-width: 991px) {

  /* ── Hide search icon on mobile (replaced by hamburger) ── */
  .responsive-tools a[data-target="search"] {
    display: none !important;
  }

  /* ── Hamburger toggle button in header ── */
  #mobile-cat-toggle {
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #mobile-cat-toggle:active {
    opacity: 0.7 !important;
  }

  /* ── Hide responsive-tools overlay (blocks clicks on navigation-buttons) ── */
  .responsive-tools {
    display: none !important;
  }

  /* ── Backdrop ── */
  #mobile-cat-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 10002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }
  #mobile-cat-backdrop.mcp-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ── Slide-in panel ── */
  #mobile-cat-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10003 !important;
    background: #fff !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Panel header */
  #mobile-cat-panel .mcp-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #5b2d8e !important;
    flex-shrink: 0 !important;
  }
  #mobile-cat-panel .mcp-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  #mobile-cat-panel .mcp-close {
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #mobile-cat-panel .mcp-close:active {
    background: rgba(255,255,255,0.3) !important;
  }

  /* Panel body (scrollable) */
  #mobile-cat-panel .mcp-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 0 40px !important;
  }

  /* ── Category rows ── */
  #mobile-cat-panel .mcp-section {
    border-bottom: 1px solid #f0f0f2 !important;
  }
  #mobile-cat-panel .mcp-row {
    display: flex !important;
    align-items: center !important;
  }
  #mobile-cat-panel .mcp-section-link {
    flex: 1 !important;
    display: block !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #mobile-cat-panel .mcp-section-link:active {
    background: #f8f8fa !important;
  }

  /* Expand button */
  #mobile-cat-panel .mcp-expand {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    color: #86868b !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.2s ease !important;
  }
  #mobile-cat-panel .mcp-open > .mcp-row > .mcp-expand {
    transform: rotate(180deg) !important;
  }

  /* Sub-items (collapsed by default) */
  #mobile-cat-panel .mcp-sub {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    background: #f8f8fa !important;
  }
  #mobile-cat-panel .mcp-open > .mcp-sub {
    max-height: 800px !important;
  }
  #mobile-cat-panel .mcp-sub-link {
    display: block !important;
    padding: 11px 20px 11px 36px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #424245 !important;
    text-decoration: none !important;
    border-top: 1px solid #ececf0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #mobile-cat-panel .mcp-sub-link:first-child {
    border-top: none !important;
  }
  #mobile-cat-panel .mcp-sub-link:active {
    background: #ececf0 !important;
  }

  /* Single link (no children) */
  #mobile-cat-panel .mcp-single-link {
    display: block !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f2 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #mobile-cat-panel .mcp-single-link:active {
    background: #f8f8fa !important;
  }

  /* ── Hide breadcrumbs on mobile ── */
  .breadcrumbs-wrapper,
  .container.breadcrumbs-wrapper {
    display: none !important;
  }

  /* ── Fix excessive mobile padding ── */
  .content-wrapper-in {
    padding-left: 0 !important;
  }
  body:not(.type-index) main.content,
  body:not(.type-index) main[role="main"] {
    margin: 8px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
}