/* ==========================================================================
   CRO Optimization Styles — nazouvarna.cz
   Version: 2
   ========================================================================== */

:root {
  --cro-green: #27ae60;
  --cro-green-light: #2ecc71;
  --cro-green-dark: #1e8449;
  --cro-accent: #e67e22;
  --cro-accent-dark: #d35400;
  --cro-red: #e74c3c;
  --cro-blue: #2980b9;
  --cro-dark: #2c3e50;
  --cro-gray: #7f8c8d;
  --cro-gray-light: #ecf0f1;
  --cro-white: #ffffff;
  --cro-shadow: 0 2px 8px rgba(0,0,0,0.12);
  --cro-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
  --cro-radius: 8px;
  --cro-radius-sm: 4px;
  --cro-transition: 0.3s ease;
  --cro-font: inherit;
}

/* ==========================================================================
   1. ANNOUNCEMENT BAR
   ========================================================================== */

.cro-announcement {
  background: var(--cro-dark) !important;
  color: var(--cro-white) !important;
  text-align: center !important;
  padding: 8px 40px !important;
  font-size: 13px !important;
  font-family: var(--cro-font) !important;
  position: relative !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
}

.cro-announcement-inner {
  position: relative !important;
  height: 1.4em !important;
  overflow: hidden !important;
}

.cro-announcement-slide {
  position: absolute !important;
  width: 100% !important;
  text-align: center !important;
  opacity: 0 !important;
  transform: translateY(100%) !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.cro-announcement-slide.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cro-announcement-close {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: var(--cro-white) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.cro-announcement-close:hover {
  opacity: 1 !important;
}

/* ==========================================================================
   2. TRUST BADGES (Product Page)
   ========================================================================== */

.cro-trust-badges {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 14px !important;
  background: #f8f9fa !important;
  border-radius: var(--cro-radius) !important;
  border: 1px solid #e9ecef !important;
}

.cro-trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #495057 !important;
  line-height: 1.3 !important;
}

.cro-trust-badge-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

/* ==========================================================================
   4. STICKY ADD-TO-CART BAR (Product Page)
   ========================================================================== */

.cro-sticky-atc {
  position: fixed !important;
  bottom: -80px !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--cro-white) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.12) !important;
  z-index: 9960 !important;
  padding: 10px 20px !important;
  transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.cro-sticky-atc.visible {
  bottom: 0 !important;
}

.cro-sticky-atc-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cro-dark) !important;
  max-width: 300px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cro-sticky-atc-price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cro-dark) !important;
  white-space: nowrap !important;
}

.cro-sticky-atc-btn {
  background: var(--cro-green) !important;
  color: var(--cro-white) !important;
  border: none !important;
  padding: 10px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--cro-radius-sm) !important;
  cursor: pointer !important;
  transition: background var(--cro-transition) !important;
  white-space: nowrap !important;
  font-family: var(--cro-font) !important;
}

.cro-sticky-atc-btn:hover {
  background: var(--cro-green-dark) !important;
}

/* ==========================================================================
   5. CROSS-SELL / UPSELL
   ========================================================================== */

.cro-cross-sell {
  margin-top: 24px !important;
  padding: 16px !important;
  background: #f8f9fa !important;
  border-radius: var(--cro-radius) !important;
  border: 1px solid #e9ecef !important;
}

.cro-cross-sell-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cro-dark) !important;
  margin: 0 0 12px 0 !important;
}

.cro-cross-sell-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  background: var(--cro-white) !important;
  border-radius: var(--cro-radius-sm) !important;
  border: 1px solid #e9ecef !important;
}

.cro-cross-sell-item + .cro-cross-sell-item {
  margin-top: 8px !important;
}

.cro-cross-sell-img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  border-radius: var(--cro-radius-sm) !important;
  flex-shrink: 0 !important;
}

.cro-cross-sell-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.cro-cross-sell-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cro-dark) !important;
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cro-cross-sell-name a {
  color: inherit !important;
  text-decoration: none !important;
}

.cro-cross-sell-name a:hover {
  text-decoration: underline !important;
}

.cro-cross-sell-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cro-green-dark) !important;
}

.cro-cross-sell-add {
  background: var(--cro-green) !important;
  color: var(--cro-white) !important;
  border: none !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--cro-radius-sm) !important;
  cursor: pointer !important;
  transition: background var(--cro-transition) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: var(--cro-font) !important;
}

.cro-cross-sell-add:hover {
  background: var(--cro-green-dark) !important;
}

/* Cart page cross-sell - suggestion to reach free shipping */
.cro-cart-upsell {
  margin: 16px 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #fef9e7, #fdebd0) !important;
  border-radius: var(--cro-radius) !important;
  border: 1px solid #f0c27a !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
}

.cro-cart-upsell-icon {
  font-size: 24px !important;
  flex-shrink: 0 !important;
}

.cro-cart-upsell-text {
  flex: 1 !important;
  color: var(--cro-dark) !important;
  line-height: 1.4 !important;
}

.cro-cart-upsell-text a {
  color: var(--cro-accent-dark) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   6. URGENCY ELEMENTS
   ========================================================================== */

/* Viewer count */
.cro-viewers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--cro-red) !important;
  margin-top: 8px !important;
  padding: 6px 10px !important;
  background: #fef5f5 !important;
  border-radius: var(--cro-radius-sm) !important;
  width: fit-content !important;
}

.cro-viewers-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--cro-red) !important;
  border-radius: 50% !important;
  animation: cro-blink 1.5s infinite !important;
}

@keyframes cro-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Recent purchase toast */
.cro-toast {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  background: var(--cro-white) !important;
  border-radius: var(--cro-radius) !important;
  box-shadow: var(--cro-shadow-lg) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 340px !important;
  z-index: 9950 !important;
  transform: translateX(-120%) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 3px solid var(--cro-green) !important;
}

.cro-toast.visible {
  transform: translateX(0) !important;
}

.cro-toast-img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  border-radius: var(--cro-radius-sm) !important;
  flex-shrink: 0 !important;
}

.cro-toast-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.cro-toast-name {
  font-size: 12px !important;
  color: var(--cro-gray) !important;
  margin-bottom: 2px !important;
}

.cro-toast-product {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cro-dark) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cro-toast-time {
  font-size: 11px !important;
  color: var(--cro-gray) !important;
  margin-top: 2px !important;
}

.cro-toast-close {
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  background: none !important;
  border: none !important;
  color: var(--cro-gray) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px !important;
  line-height: 1 !important;
}

/* Cart reservation timer */
.cro-cart-timer {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--cro-dark) !important;
  padding: 10px 16px !important;
  background: #fef9e7 !important;
  border-radius: var(--cro-radius-sm) !important;
  margin: 12px 0 !important;
  border: 1px solid #f9e79f !important;
}

.cro-cart-timer-count {
  font-weight: 700 !important;
  color: var(--cro-red) !important;
}

/* ==========================================================================
   7. EXIT-INTENT POPUP
   ========================================================================== */

.cro-exit-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.cro-exit-overlay.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.cro-exit-modal {
  background: var(--cro-white) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  max-width: 440px !important;
  width: 90% !important;
  text-align: center !important;
  position: relative !important;
  transform: scale(0.9) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--cro-shadow-lg) !important;
}

.cro-exit-overlay.visible .cro-exit-modal {
  transform: scale(1) !important;
}

.cro-exit-close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  color: var(--cro-gray) !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
}

.cro-exit-close:hover {
  color: var(--cro-dark) !important;
}

.cro-exit-emoji {
  font-size: 40px !important;
  margin-bottom: 12px !important;
}

.cro-exit-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cro-dark) !important;
  margin: 0 0 8px 0 !important;
}

.cro-exit-text {
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.5 !important;
}

.cro-exit-cta {
  display: inline-block !important;
  background: var(--cro-green) !important;
  color: var(--cro-white) !important;
  border: none !important;
  padding: 12px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: var(--cro-radius) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background var(--cro-transition) !important;
  font-family: var(--cro-font) !important;
}

.cro-exit-cta:hover {
  background: var(--cro-green-dark) !important;
  color: var(--cro-white) !important;
  text-decoration: none !important;
}

.cro-exit-sub {
  font-size: 12px !important;
  color: var(--cro-gray) !important;
  margin-top: 12px !important;
}

.cro-exit-sub a {
  color: var(--cro-gray) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* ==========================================================================
   8. CATEGORY PAGE ENHANCEMENTS
   ========================================================================== */

.cro-badge-bestseller {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: var(--cro-accent) !important;
  color: var(--cro-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  z-index: 5 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   9. CART PAGE OPTIMIZATIONS
   ========================================================================== */

.cro-cart-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  padding: 14px 0 !important;
  margin-top: 12px !important;
  border-top: 1px solid #e9ecef !important;
}

.cro-cart-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #666 !important;
}

.cro-cart-trust-icon {
  font-size: 16px !important;
}

.cro-payment-icons {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.cro-payment-icon {
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: var(--cro-radius-sm) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  color: #666 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   10. CHECKOUT OPTIMIZATIONS
   ========================================================================== */

.cro-checkout-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  background: #f8f9fa !important;
  border-radius: var(--cro-radius) !important;
  margin: 16px 0 !important;
}

.cro-checkout-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: #555 !important;
}

.cro-checkout-encouragement {
  text-align: center !important;
  font-size: 14px !important;
  color: var(--cro-green-dark) !important;
  font-weight: 500 !important;
  padding: 8px !important;
}

/* ==========================================================================
   11. MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 767px) {
  /* --- Hide sidebar on mobile --- */
  .left-column,
  .sidebar-left,
  .column-left {
    display: none !important;
  }

  .right-column,
  .column-right,
  .main-column {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* --- Product page layout reorder --- */
  .p-detail-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  .p-image-wrapper { order: 1 !important; }
  .p-info-wrapper,
  .p-data-wrapper { order: 2 !important; }
  .add-to-cart[data-testid="divAddToCart"] { order: 3 !important; }
  .cro-trust-badges { order: 4 !important; }
  .cro-viewers { order: 4 !important; }
  .cro-cross-sell { order: 5 !important; }
  .p-short-description { order: 6 !important; }
  .p-detail-tabs { order: 7 !important; }

  /* Compact product image on mobile */
  .p-image-wrapper {
    max-height: 50vh !important;
    overflow: hidden !important;
  }

  .p-image-wrapper img {
    max-height: 50vh !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* --- Homepage / category mobile compact --- */
  .carousel-wrapper,
  .carousel-wrapper .carousel-item,
  .carousel-wrapper img {
    max-height: 40vh !important;
  }

  .type-category .category-description,
  .type-category .category-top-text,
  .type-category .category-perex {
    max-height: 3em !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* --- CRO component mobile sizing --- */
  .cro-announcement {
    font-size: 12px !important;
    padding: 6px 32px !important;
  }

  .cro-trust-badges {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .cro-trust-badge {
    font-size: 11px !important;
  }

  /* Sticky ATC on mobile */
  .cro-sticky-atc {
    padding: 8px 12px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .cro-sticky-atc-name {
    display: none !important;
  }

  .cro-sticky-atc-price {
    font-size: 16px !important;
  }

  .cro-sticky-atc-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    flex: 1 !important;
  }

  /* Cross-sell */
  .cro-cross-sell-item {
    flex-wrap: wrap !important;
  }

  .cro-cross-sell-img {
    width: 48px !important;
    height: 48px !important;
  }

  /* Toast with safe area */
  .cro-toast {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }

  /* Exit popup */
  .cro-exit-modal {
    padding: 24px 20px !important;
    max-width: 340px !important;
  }

  .cro-exit-title {
    font-size: 18px !important;
  }

  .cro-exit-text {
    font-size: 13px !important;
  }

  /* Viewers */
  .cro-viewers {
    font-size: 12px !important;
  }

  /* Cart upsell */
  .cro-cart-upsell {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* --- 44px minimum touch targets --- */
  .cro-sticky-atc-btn,
  .cro-cross-sell-add,
  .cro-exit-cta,
  .cro-desc-toggle,
  .cro-announcement-close,
  .cro-exit-close,
  .cro-toast-close {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Collapsible description --- */
  .cro-desc-collapsed {
    max-height: 3.6em !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .cro-desc-collapsed::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1.5em !important;
    background: linear-gradient(transparent, white) !important;
  }

  .cro-desc-toggle {
    display: block !important;
    margin-top: 4px !important;
    color: var(--cro-blue) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    border: none !important;
    background: none !important;
    padding: 4px 0 !important;
    font-family: var(--cro-font) !important;
  }

  .cro-desc-expanded {
    max-height: none !important;
  }

  .cro-desc-expanded::after {
    display: none !important;
  }

  /* --- Sticky checkout button on cart page --- */
  .cro-mobile-checkout-sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--cro-white) !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12) !important;
    z-index: 9960 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .cro-mobile-checkout-total {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cro-dark) !important;
  }

  .cro-mobile-checkout-btn {
    background: var(--cro-green) !important;
    color: var(--cro-white) !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--cro-radius-sm) !important;
    cursor: pointer !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    font-family: var(--cro-font) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Bottom padding so sticky bars don't overlap content */
  .in-kosik .content-wrapper {
    padding-bottom: 80px !important;
  }

  .type-product .content-wrapper {
    padding-bottom: 70px !important;
  }

  /* Benefit banners 2x2 grid on mobile */
  .benefitBanner {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
  }

  .welcome {
    padding: 0 15px !important;
  }

  .category-title {
    margin-top: 15px !important;
  }

  :where(body.ums_a11y_category_page--on) .listSorting__control {
    padding: 10px 10px !important;
  }

  #description > div > div > p {
    font-size: 17px !important;
    line-height: 1.6em !important;
  }

  .benefitBanner .benefitBanner__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .benefitBanner .benefitBanner__picture {
    height: 100px !important;
    max-width: 80px !important;
  }

  .benefitBanner .benefitBanner__title {
    font-size: 17px !important;
  }

  .benefitBanner .benefitBanner__content {
    font-size: 12px !important;
  }
}

/* Desktop only - hide mobile description toggle */
@media (min-width: 768px) {
  .cro-desc-toggle {
    display: none !important;
  }
}

/* ==========================================================================
   12. FOCUS-VISIBLE STYLES (Accessibility)
   ========================================================================== */

.cro-sticky-atc-btn:focus-visible,
.cro-cross-sell-add:focus-visible,
.cro-exit-cta:focus-visible,
.cro-desc-toggle:focus-visible,
.cro-exit-close:focus-visible,
.cro-announcement-close:focus-visible,
.cro-toast-close:focus-visible,
.cro-mobile-checkout-btn:focus-visible {
  outline: 2px solid var(--cro-blue) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   13. UTILITY / ANIMATION
   ========================================================================== */

@keyframes cro-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cro-animate-in {
  animation: cro-fadeIn 0.4s ease forwards !important;
}

/* ==========================================================================
   14. HEADER & NAVIGATION CUSTOMIZATION
   ========================================================================== */

#header, .top-navigation-bar {
  background-color: #0F1113 !important;
}

@media (min-width: 992px) {
  #header .header-top .header-top-wrapper .site-name a img,
  #header .header-top .header-top-wrapper h1.site-name a img {
    max-height: 70px !important;
  }
}

ul.menu-level-1 {
  background-color: #5a1a24 !important;
}

.navigation-in {
  background-color: #5a1a24 !important;
}

@media (max-width: 767px) {
  .navigation-in>ul {
    padding-top: 50px !important;
  }
}

.navigation-in .has-third-level div>ul a,
.navigation-in>ul>li>a,
.navigation-in>ul>li>a:hover {
  color: #fff !important;
}

@media (min-width: 768px) {
  .navigation-in>ul>li.exp>a,
  .navigation-in>ul>li>a:hover {
    background-color: #41141b !important;
    color: #ffffff !important;
  }

  .navigation-in>ul>li a {
    border-radius: 0px !important;
  }
}

.navigation-buttons a[data-target=navigation],
.navigation-buttons a[data-target=navigation]:hover {
  background-color: #0f1113 !important;
}

.navigation-buttons a[data-target=search],
.navigation-buttons a[data-target=search]:hover {
  background-color: #0f1113 !important;
  color: #ffffff !important;
}

:where(body.ums_a11y_login--on) .top-nav-button-login {
  background-color: #0f1113 !important;
  color: #ffffff !important;
}

.navigation-buttons a,
.navigation-buttons a[data-target=cart],
.navigation-buttons a[data-target=search],
.navigation-in>ul>li>a {
  color: #ffffff !important;
}

:where(body.ums_a11y_login--on) .top-nav-button-login:focus-visible,
:where(body.ums_a11y_login--on) .top-nav-button-login:hover {
  background-color: #0f1113 !important;
  color: var(--color-secondary-hover) !important;
}

#signature {
  display: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   15. FOOTER CUSTOMIZATION
   ========================================================================== */

#footer, .footer-rows .rate-wrapper {
  background-color: #5a1a24 !important;
}

#footer a {
  color: #ffffff !important;
}

#footer > div.container.footer-rows > div > div.custom-footer__contact.col-sm-6.col-lg-3 > div > ul > li:nth-child(3) {
  color: white !important;
}

#footer > div.container.footer-rows > div > div.custom-footer__contact.col-sm-6.col-lg-3 > div > ul > li.social-icon-list > a {
  color: #5a1a24 !important;
}

.footer-bottom, .footer-bottom-full-width {
  background-color: #5a1a24 !important;
}

#footer .footer-bottom, #footer .footer-bottom a {
  color: #0f1113 !important;
}

:where(body.ums_page_element_headings--off) #footer h4 {
  color: #ffffff !important;
}

/* ==========================================================================
   16. BENEFIT BANNER
   ========================================================================== */

.benefitBanner .benefitBanner__picture {
  height: 200px !important;
}

.benefitBanner__picture {
  max-width: 155px !important;
}

/* ==========================================================================
   17. LAYOUT & SPACING TWEAKS
   ========================================================================== */

.wide-carousel {
  max-height: 490px !important;
}

.homepage-group-title.h4 {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
}

@media (min-width: 768px) {
  .homepage-group-title {
    padding-top: 10px !important;
  }
}

.product-slider-holder {
  padding: 0 !important;
}

.breadcrumbs {
  padding: 12px 16px !important;
}

@media (min-width: 768px) {
  .h1, h1 {
    margin-bottom: 4px !important;
  }
}

@media (min-width: 768px) {
  .category-top {
    margin-bottom: 10px !important;
  }
}

.category-top {
  padding-bottom: 0px !important;
}

.products-block>div .p .p-in .p-bottom>div .p-tools {
  padding: 0px 0 0 !important;
}

.quantity, .quantity .decrease, .quantity .increase {
  border-color: #ededed !important;
}

.cart-table .p-name .main-link-variant, .cart-table .p-name>div {
  font-size: 17px !important;
}