/* Keyframe animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3NODE - Utilities - START */
.u-hide-mobile-up {
	@media (min-width: 480px) {
		display: none;
	}
}
.u-hide-tablet-up {
	@media (min-width: 768px) {
		display: none
	}
}
.u-hide-desktop-up {
	@media (min-width: 992px) {
		display: none;
	}
}
.u-hide-desktop-large-up {
	@media (min-width: 1281px) {
		display: none;
	}
}
.u-hide-desktop-large-down {
	@media (max-width: 1280px) {
		display: none;
	}
}
.u-hide-desktop-down {
	@media (max-width: 991px) {
		display: none;
	}
}
.u-hide-tablet-down {
	@media (max-width: 767px) {
		display: none;
	}
}
.u-hide-mobile-down {
	@media (max-width: 479px) {
		display: none;
	}
}
/* 3NODE - Utilities - END */

/* Products Section - Default State (light background) */
.products-wrapper {
  border-radius: 24px;
  padding: 48px 32px;
  position: relative;
  overflow: hidden; /* Clip image to wrapper bounds */
  transition: background-color 0.3s ease;
  transition-delay: 0.1s; /* Delay return to white to prevent flicker */
}

/* Hide buttons by default */
.products-wrapper .button-wrapper-mask {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Make section-products the positioning context for images */
.section-products {
  position: relative !important;
  overflow: hidden !important;
}

/* Allow overflow on tablet/laptop for filter buttons */
@media (max-width: 1279px) {
  .section-products {
    overflow: visible !important;
  }
  
  .section-products .products-wrapper {
    overflow: visible !important;
  }
}

.section-products .container-small {
  position: static !important;
}

/* Hide images by default - positioned to cover full section width */
.section-products .image-products-hp {
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0 !important;
  pointer-events: none;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* Make products-wrapper and elevia-products NOT create a new positioning context */
.section-products .products-wrapper,
.section-products .elevia-products,
.section-products .flex-default,
.section-products .headline-pagination {
  position: static !important;
}

/* Text content should be above image */
.products-wrapper .hp-products-text {
  /* Removed position relative so image is relative to wrapper */
  z-index: 2;
}

/* Headline for products section */
.section-products .headline-pagination {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

/* Tablet - reduce gap between headline and categories */
@media screen and (max-width: 991px) {
  .section-products .headline-pagination {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

.section-products .products-headline {
  position: relative;
  z-index: 2;
  color: #000000;
  text-align: left;
  width: 100%;
  transition: color 0.3s ease;
}

/* Products wrapper - keep centered for product rows */
.products-wrapper {
  align-items: center !important;
  width: 100%;
}

/* Headline becomes white when any row is hovered */
.section-products:has(.elevia-products:hover) .products-headline {
  color: white !important;
}

/* Remove top padding from products section */
.section-products {
  padding-top: 0 !important;
}

.section-products .container-small {
  padding-top: 0 !important;
}

/* Products wrapper - remove top gap */
.section-products .products-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* Default text colors (dark on light background) */
.products-wrapper .text-80.all-caps.is-product {
  transition: color 0.3s ease;
  color: #000000 !important; /* Black by default */
}

/* Hover State - Red background when any row is hovered */
.products-wrapper:has(.elevia-products:hover) {
  background-color: transparent !important;
}

/* Show buttons on row hover */
.elevia-products:hover .button-wrapper-mask {
  max-width: 800px;
  overflow: visible;
}

/* Reduce gap between buttons on desktop */
.button-wrapper {
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
}

/* Hide all images by default */
.section-products .image-products-hp {
  opacity: 0 !important;
}

/* Show image only on hover of its parent row */
.section-products .elevia-products:hover .image-products-hp {
  opacity: 1 !important;
  z-index: 1 !important;
}

/* Text colors when wrapper has hover - all text becomes white */
.products-wrapper:has(.elevia-products:hover) .text-80.all-caps.is-product {
  color: white !important;
}

/* Ensure text and buttons are above the image */
.products-wrapper .hp-products-text > *:not(.image-products-hp) {
  position: relative;
  z-index: 10 !important;
}

/* Hovered row product name becomes green */
.elevia-products:hover .text-80.all-caps.is-product {
  color: #5CE526 !important;
}

/* Reduce opacity of non-hovered rows when any row is hovered */
.products-wrapper:has(.elevia-products:hover) .elevia-products:not(:hover) .text-80.all-caps.is-product {
  opacity: 0.4 !important;
  transition: opacity 0.3s ease !important;
}

.products-wrapper:has(.elevia-products:hover) .elevia-products:not(:hover) .arrow-wrapper {
  opacity: 0.4 !important;
  transition: opacity 0.3s ease !important;
}

/* Hide row numbers */
.section-products .text-color-light-gray {
  display: none !important;
}

/* Products wrapper - align items to left, full width, no side padding */
.section-products .products-wrapper {
  align-items: stretch !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section-products .elevia-products {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section-products .hp-products-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Default state - text aligned left with arrow on right */
.section-products .hp-products-text {
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Content within link block - aligned left by default */
.section-products .products-hp-link-block {
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Remove left padding from product names to align with headline */
.section-products .text-80.all-caps.is-product {
  padding-left: 0 !important;
}

/* On hover, link block takes full width, content stays left-aligned */
.section-products .elevia-products:hover .products-hp-link-block {
  flex: 1 !important;
  justify-content: flex-start !important;
}

.section-products .products-wrapper .arrow-wrapper {
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Hide arrow on hovered row - homepage products only */
.section-products .products-wrapper .elevia-products:hover .arrow-wrapper {
  display: none !important;
}

/* Buttons stay in normal flow for proper centering */
.section-products .button-wrapper-mask {
  white-space: nowrap !important;
}

/* Mobile accordion style for products - ONLY for homepage products section */
@media screen and (max-width: 767px) {
  /* Hide product images on mobile - homepage only */
  .section-products .products-wrapper .image-products-hp {
    display: none !important;
  }
  
  /* Show numbers on mobile - homepage only */
  .section-products .products-wrapper .text-color-light-gray {
    display: block !important;
    font-size: 16px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
  }
  
  /* Compact product rows - homepage only */
  .section-products .products-wrapper .elevia-products {
    padding: 20px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Row layout - homepage only */
  .section-products .products-wrapper .hp-products-text {
    height: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  
  /* Product name visible - homepage only */
  .section-products .products-wrapper .text-80.all-caps.is-product {
    font-size: 24px !important;
    display: block !important;
  }
  
  /* Arrow rotated down (accordion indicator) - homepage only */
  .section-products .products-wrapper .arrow-wrapper {
    transform: rotate(90deg) !important;
    transition: transform 0.3s ease !important;
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* Arrow rotates up when expanded - homepage only */
  .section-products .products-wrapper .elevia-products:hover .arrow-wrapper,
  .section-products .products-wrapper .elevia-products:focus-within .arrow-wrapper {
    transform: rotate(-90deg) !important;
    display: flex !important;
  }
  
  /* Products link block - homepage only */
  .section-products .products-wrapper .products-hp-link-block {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
  }
  
  /* Buttons container - full width below - homepage only */
  .section-products .products-wrapper .button-wrapper-mask {
    white-space: normal !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  
  /* Buttons in row, wrap if needed - homepage only */
  .section-products .products-wrapper .button-wrapper {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  
  /* Smaller buttons on mobile - homepage only */
  .section-products .products-wrapper .button.w-inline-block {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
}


/* Arrow circles should be white when image is visible - homepage only */
.section-products .products-wrapper:has(.elevia-products:hover) .arrow-wrapper {
  color: white !important;
  border-color: white !important;
}

/* Button styling - use default button styles */
.products-wrapper .button.w-inline-block {
  background-color: white !important;
  color: #070707 !important;
}

.products-wrapper .button.w-inline-block:hover {
  background-color: #000 !important;
  color: #fff !important;
}

.products-wrapper .button.w-inline-block div {
  color: inherit;
}

/* Disabled buttons should have gray styling */
.products-wrapper .button.w-inline-block:has(div[style*="color: #C4C4C4"]) {
  background-color: rgba(255, 255, 255, 0.3) !important;
  pointer-events: none;
}

.products-wrapper .button.w-inline-block:has(div[style*="color: #C4C4C4"]) div {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Line hover animation for nav links */
.nav-link-small {
  overflow: visible !important;
  height: auto !important;
}

.line-hover {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link-small:hover .line-hover {
  opacity: 1;
  transform: scaleX(1);
}

/* Swiper carousel fixes */
.swiper {
  overflow: hidden;
}

.swiper-slide {
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  /* Safari fix */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

/* Ensure headline takes available space in pagination wrapper */
.headline-pagination h2 {
  flex-grow: 1;
  width: 100%;
}

/* Drop Lines section - "Objevte ELEVIA MEDICAL ŘADU" */
.droplines-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

.droplines-card {
  flex-shrink: 0;
  width: 550px;
  min-width: 550px;
  height: 630px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important; /* Remove padding */
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.droplines-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.droplines-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 48px !important;
  right: 48px !important;
  padding-bottom: 48px !important;
  z-index: 10 !important;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s ease;
}

.droplines-card:hover .droplines-content {
  transform: translateY(-20px);
}

.droplines-content h3 {
  font-size: 32px;
  margin: 0 !important;
  font-weight: 700;
  line-height: 1.1;
}

.droplines-content p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 16px 0 0 0 !important;
  padding: 0 100px 0 0 !important; /* Right padding for arrow button */
  max-width: 100%;
}

/* Override swiper slide widths - use original dimensions */
.swiper .swiper-slide,
.swiper1 .swiper-slide {
  width: 550px !important;
  min-width: 550px !important;
  height: 630px !important;
}

.swiper1 .swiper-slide.is-large {
  width: 830px !important;
  min-width: 830px !important;
  height: 630px !important;
}

.swiper1 .swiper-slide.is-medium {
  width: 550px !important;
  min-width: 550px !important;
  height: 630px !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .droplines-card {
    width: 450px;
    min-width: 450px;
    height: 486px;
    padding: 20px !important;
  }
  
  .swiper-droplines .swiper-slide.droplines-card {
    height: 486px !important;
  }
  
  .swiper .swiper-slide,
  .swiper1 .swiper-slide {
    width: 450px !important;
    min-width: 450px !important;
    height: 540px !important;
  }
  
  .swiper1 .swiper-slide.is-large {
    width: 650px !important;
    min-width: 650px !important;
    height: 540px !important;
  }
}

@media (max-width: 767px) {
  .droplines-card {
    width: calc(100vw - 80px);
    min-width: calc(100vw - 80px);
    max-width: 320px;
    height: 414px;
    padding: 16px !important;
  }
  
  .swiper-droplines .swiper-slide.droplines-card {
    width: calc(100vw - 80px) !important;
    min-width: calc(100vw - 80px) !important;
    max-width: 320px !important;
    height: 414px !important;
    padding: 16px !important;
  }
  
  .swiper .swiper-slide,
  .swiper1 .swiper-slide {
    width: 350px !important;
    min-width: 350px !important;
    height: 460px !important;
  }
  
  .swiper1 .swiper-slide.is-large {
    width: 450px !important;
    min-width: 450px !important;
    height: 460px !important;
  }
  
  /* ELEVIA LAB section - same width as droplines cards */
  .swiper-slide.is-about {
    width: calc(100vw - 80px) !important;
    min-width: calc(100vw - 80px) !important;
    max-width: 320px !important;
  }
}


/* ===== HOMEPAGE CARDS HOVER EFFECTS ===== */
/* Apply hover effect - only text fade in, no movement */

/* Card hover - no scale, no movement */
.swiper-slide.w-inline-block {
  overflow: hidden;
  position: relative;
  transform: translateY(0) !important;
}

.swiper-slide.w-inline-block:hover {
  transform: translateY(0) !important;
}

/* Background - no zoom effect */
.swiper-slide.w-inline-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Ensure content stays above background */
.swiper-slide.w-inline-block .slide-content-wrapper {
  position: relative;
  z-index: 1;
}

/* Hide description text by default - for both .swiper and .swiper1 sections */
/* EXCLUDING .swiper-droplines which should always show description */
.swiper:not(.swiper-droplines) .swiper-slide p,
.swiper1 .swiper-slide .mobile-centered {
  margin: 0 !important;
  margin-top: 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Show description text on hover - for both .swiper and .swiper1 sections */
.swiper:not(.swiper-droplines) .swiper-slide:hover p,
.swiper1 .swiper-slide:hover .mobile-centered {
  opacity: 1 !important;
  visibility: visible !important;
}




/* Reduce line-height for navigation card headings */
.card-nav-heading {
  line-height: 1.1 !important;
}

/* Hide the inner hover element completely */
.swiper-slide.w-inline-block .btn-card .btn-card.is-hover,
.swiper-slide.w-inline-block .btn-card > .btn-card {
  display: none !important;
}

/* Button default state - circle with border and arrow */
.swiper-slide.w-inline-block > .slide-content-wrapper > .btn-card {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8h9.34M9.33 4.67L12.67 8l-3.34 3.33' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Button hover state - green background with black arrow */
.swiper-slide.w-inline-block:hover > .slide-content-wrapper > .btn-card {
  background-color: #5CE526 !important;
  border-color: #5CE526 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8h9.34M9.33 4.67L12.67 8l-3.34 3.33' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


/* No scroll during age verification */
.no-scroll {
  overflow: hidden;
}

/* Font smoothing for better text rendering */
html {
  /* Use native overlay scrollbars that don't reserve space */
  overflow-y: auto;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

/* Product pages should have white background */
body.body {
  background-color: #ffffff !important;
}

/* Remove gap between sections-wrapper and page-overflow */
.sections-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.sections-wrapper > section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-section {
  margin-bottom: 0 !important;
}

.page-overflow {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cart badge styling */
.cart-quantity {
  font-size: 8px !important;
}

/* Cart badge pulse animation */
.cart-quantity.cart-bounce {
  animation: cart-pulse 1.2s ease-out;
}

@keyframes cart-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Cart wrapper full viewport */
/* Cart drawer - right side positioning with animation */
.cart-wrapper {
  display: flex !important;
  visibility: hidden;
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  width: 638px !important;
  max-width: calc(100vw - 40px) !important;
  height: calc(100vh - 40px) !important;
  padding: 0 !important;
  z-index: 1002 !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  transform: translateX(40px) !important;
  opacity: 0 !important;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, visibility 0s 0.8s !important;
  pointer-events: none;
  overflow: hidden !important;
}

.cart-wrapper.is-open {
  visibility: visible;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, visibility 0s 0s !important;
}

/* Cart container - full height with flex layout */
.cart-wrapper .cart-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 34px !important;
  margin: 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Tablet: 34px padding */
@media screen and (max-width: 991px) {
  .cart-wrapper .cart-container {
    padding: 34px !important;
  }
}

/* Mobile Large and Mobile: 20px padding */
@media screen and (max-width: 767px) {
  .cart-wrapper .cart-container {
    padding: 20px !important;
  }
}

/* Reset all cart children to prevent overflow */
.cart-wrapper,
.cart-wrapper *,
.cart-wrapper *::before,
.cart-wrapper *::after {
  box-sizing: border-box !important;
}

.cart-wrapper .cart-container,
.cart-wrapper .cart-container * {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* Force width constraints */
.cart-wrapper .w-commerce-commercecartformwrapper,
.cart-wrapper .w-commerce-commercecartform,
.cart-wrapper .cart-list,
.cart-wrapper .cart-footer,
.cart-wrapper .cart-item,
.cart-wrapper .cart-line-item,
.cart-wrapper .btn-cart,
.cart-wrapper .summary-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cart-wrapper .cart-header {
  flex-shrink: 0 !important;
  padding: 0 !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #eee !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  position: relative !important;
}

.cart-wrapper .cart-header h4,
.cart-wrapper .cart-header .w-commerce-commercecartheading {
  margin: 0 !important;
  padding: 0 !important;
}

.cart-wrapper .close-button-nav.is-cart,
.cart-wrapper .w-commerce-commercecartcloselink {
  position: static !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
}

.cart-wrapper .w-commerce-commercecartformwrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  width: 100% !important;
}

.cart-wrapper .w-commerce-commercecartform {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Scrollable area containing cart items + recommended products */
.cart-wrapper .cart-scrollable-area {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

.cart-wrapper .cart-list {
  width: calc(100% + 14px) !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding-right: 14px !important;
  margin-right: -14px !important;
}

/* Custom scrollbar for cart - in the padding area outside content */
.cart-wrapper .cart-list::-webkit-scrollbar {
  width: 4px !important;
}

.cart-wrapper .cart-list::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
  border-radius: 2px !important;
}

.cart-wrapper .cart-list::-webkit-scrollbar-thumb {
  background: #d0d0d0 !important;
  border-radius: 2px !important;
}

.cart-wrapper .cart-list::-webkit-scrollbar-thumb:hover {
  background: #bbb !important;
}

.cart-wrapper .cart-footer {
  flex-shrink: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid #eee !important;
  margin-top: auto !important;
  width: 100% !important;
  position: sticky !important;
  bottom: 0 !important;
  background: white !important;
  z-index: 10 !important;
}

/* Cart item title hover */
/* Navigation card icon hover state */
.icon-nav.is-card {
  border: none !important;
}


.card-nav-wrapper .icon-nav.is-card {
  transition: background-color 0.2s ease;
}

.card-nav-wrapper:hover .icon-nav.is-card {
  background-color: #55EC3B !important;
  border-radius: 50% !important;
}

.card-nav-wrapper:hover .icon-nav.is-card svg rect {
  stroke: #55EC3B !important;
}

.card-nav-wrapper:hover .icon-nav.is-card svg path {
  stroke: #000 !important;
  fill: none !important;
}

/* Cart item title with animated underline */
.cart-wrapper .cart-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.3;
  position: relative;
  display: inline-block;
}

.cart-wrapper .cart-item-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1a1a1a;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.cart-wrapper .cart-item-title:hover::after {
  transform: scaleX(1);
}

/* Remove link with animated underline */
.cart-wrapper .remove-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: inline-block;
}

.cart-wrapper .remove-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #666;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease, background-color 0.2s ease;
}

.cart-wrapper .remove-link:hover {
  color: #1a1a1a;
}

.cart-wrapper .remove-link:hover::after {
  background-color: #1a1a1a;
  transform: scaleX(1);
}

/* Cart line items (Doprava, Celkem) */
.cart-wrapper .cart-line-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 0 !important;
}

/* Cart total row - bold text */
.cart-wrapper .cart-line-item strong,
.cart-wrapper .cart-total-row strong {
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Cart checkout button */
.cart-wrapper .btn-cart {
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.cart-wrapper .btn-cart .button,
.cart-wrapper .btn-cart a {
  width: 100% !important;
  margin-bottom: 0 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  transition: background-color 0.2s ease !important;
}

.cart-wrapper .btn-cart .button:hover,
.cart-wrapper .btn-cart a:hover {
  background-color: #323232 !important;
  color: #ffffff !important;
}

/* Ensure footer takes remaining space and stays at bottom */
.cart-wrapper .cart-footer > div:last-child {
  margin-bottom: 0 !important;
}

.cart-wrapper .cart-item {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding-top: 12px !important;
}

.cart-wrapper .cart-item:first-child {
  padding-top: 0 !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #eee !important;
}

/* Left side wrapper (image + info) */
.cart-wrapper .cart-item .cart-item-left {
  display: flex !important;
  gap: 16px !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

/* Div block wrapper for image */
.cart-wrapper .cart-item .div-block {
  display: flex !important;
  gap: 16px !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

/* Cart item image */
.cart-wrapper .cart-item .cart-image {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: #f5f5f5 !important;
}

/* Cart item image - Mobile and Mobile Landscape only */
@media screen and (max-width: 767px) {
  .cart-wrapper .cart-item .cart-image {
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
  }
}

/* Cart item info */
.cart-wrapper .cart-item .cart-item-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* Cart item name */
.cart-wrapper .cart-item .cart-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #000 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  word-wrap: break-word !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Cart item variant */
.cart-wrapper .cart-item .cart-item-variant {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-top: 2px !important;
}

/* Quantity group in cart */
.cart-wrapper .cart-item .cart-qty {
  margin-top: 12px !important;
}

/* Cart quantity buttons - outline style */
.cart-wrapper .q-group {
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  gap: 8px !important;
}

.cart-wrapper .q-dec,
.cart-wrapper .q-inc {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  color: #000 !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

.cart-wrapper .q-dec:hover,
.cart-wrapper .q-inc:hover {
  background: #000 !important;
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.cart-wrapper .q-dec.disabled,
.cart-wrapper .q-dec[disabled] {
  background: transparent !important;
  border-color: #eee !important;
  color: #ccc !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cart-wrapper .q-num {
  width: 40px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Cart item right column - delete & price */
.cart-wrapper .cart-item .cart-item-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  min-height: 100px !important;
  height: 100% !important;
}

/* Remove button */
.cart-wrapper .cart-item .remove-button {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

.cart-wrapper .cart-item .remove-button:hover {
  border-color: #000 !important;
}

.cart-wrapper .cart-item .remove-button img {
  width: 18px !important;
  height: 18px !important;
}

/* Price in cart item */
.cart-wrapper .cart-item .cart-item-right > div:last-child {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #000 !important;
  white-space: nowrap !important;
}

.cart-wrapper .empty-state {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Cart backdrop animation */
.cart-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none;
  visibility: hidden;
}

.cart-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto;
  visibility: visible;
}

/* ===== DEBUG: Section Spacing Visualization ===== */
/* Uncomment to visualize section gaps */
.debug-spacing section,
.debug-spacing .hero-section,
.debug-spacing .main-section,
.debug-spacing .light-section,
.debug-spacing .dosage-section,
.debug-spacing .product-gallery-section,
.debug-spacing .faq-section {
  outline: 3px solid #5CE526 !important;
  outline-offset: -3px;
  position: relative;
}

.debug-spacing section::before,
.debug-spacing .hero-section::before,
.debug-spacing .main-section::before,
.debug-spacing .light-section::before,
.debug-spacing .dosage-section::before,
.debug-spacing .product-gallery-section::before,
.debug-spacing .faq-section::before {
  content: attr(class);
  position: absolute;
  top: 10px;
  left: 10px;
  background: #5CE526;
  color: #000;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  z-index: 9999;
  border-radius: 4px;
}

/* Highlight margins/padding gaps */
.debug-spacing section::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: rgba(255, 0, 0, 0.3);
  pointer-events: none;
}

/* ===== Custom Cursor for Swiper Navigation ===== */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.cursor-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* White semi-transparent background with thin white border */
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Active/Click state - scale down and darken */
.custom-cursor.is-clicking .cursor-inner {
  transform: scale(0.85);
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Pulse ring element */
.cursor-pulse {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
}

/* Pulse animation on click */
.custom-cursor.is-pulsing .cursor-pulse {
  animation: cursorPulse 1.2s ease-out forwards;
}

@keyframes cursorPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.cursor-text {
  font-family: 'Kuniforma', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: white;
  text-transform: uppercase;
}

/* Override Webflow's cursor:none on main-section */
.main-section {
  cursor: auto;
}

/* Only hide cursor on navigation prev/next buttons */
.prev-sec, .prev-sec1, .prev-sec2, .prev-sec-about, .prev-sec-process, .prev-sec-related,
.next-sec, .next-sec1, .next-sec2, .next-sec-about, .next-sec-process, .next-sec-related,
.prev-sec-gallery, .next-sec-gallery {
  cursor: none;
}

/* Also hide cursor on elements inside navigation areas */
.prev-sec *, .prev-sec1 *, .prev-sec2 *, .prev-sec-about *, .prev-sec-process *, .prev-sec-related *,
.next-sec *, .next-sec1 *, .next-sec2 *, .next-sec-about *, .next-sec-process *, .next-sec-related *,
.prev-sec-gallery *, .next-sec-gallery * {
  cursor: none;
}

/* Hide custom cursor on mobile/tablet */
@media (max-width: 991px) {
  .custom-cursor {
    display: none;
  }
  
  /* Restore default cursor on touch devices */
  .prev-sec, .prev-sec1, .prev-sec2, .prev-sec-about, .prev-sec-process, .prev-sec-related,
  .next-sec, .next-sec1, .next-sec2, .next-sec-about, .next-sec-process, .next-sec-related,
  .prev-sec-gallery, .next-sec-gallery {
    cursor: pointer;
  }
}

/* ===== PRODUCT PAGE FIXES ===== */

/* Product 3D Image - positioned on right side */
.product-3d-image {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  max-height: 70vh;
  max-width: 40vw;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Animation wrapper positioning */
.animation-wrapper {
  position: fixed;
  top: -5%;
  left: 0 !important;
  right: 0 !important;
  bottom: -5%;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95; /* Slightly reduce opacity to prevent full coverage of text */
}

/* Bottom gradient overlay on animation wrapper - DISABLED */
/* .animation-wrapper::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(to top, #E90C24 0%, rgba(233, 12, 36, 0) 100%) !important;
  pointer-events: none;
  z-index: 10;
} */

.animation {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}

.animation canvas {
  pointer-events: auto !important;
}

/* Hero wrapper - two column layout */
.hero-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 80vh;
  padding-top: 120px;
  position: relative;
  z-index: 2;
}

.hero-left {
  max-width: 550px;
  flex: 0 0 auto;
}

.hero-right {
  position: fixed;
  right: 10%;
  bottom: 15%;
  z-index: 10;
}

/* Product detail specs line */
.product-detail-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.product-detail-wrapper .body-large {
  color: white;
  margin: 0;
}

/* Product categories badge */
.product-categories {
  margin-bottom: 16px;
}

.product-cat {
  display: inline-block;
  font-family: 'Kuniforma', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

/* Product hero section text */
.product-hero {
  max-width: 500px;
}

.heading-product-wrapper {
  margin-bottom: 16px;
}

.h1-product {
  font-family: 'Kuniforma', sans-serif;
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 400;
  line-height: 0.95;
  color: white;
  margin: 0;
  text-transform: uppercase;
}

/* Variant/Flavour Selector - Radio Button Style */
.flavour-selector {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  border: none;
}

.flavour-text {
  font-family: 'Kuniforma', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.option-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Radio button styled variant selector */
.option-button-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-button-radio:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.option-button-radio.is-selected {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

.option-button-radio input[type="radio"] {
  display: none;
}

.radio-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  position: relative;
  transition: all 0.2s ease;
}

.option-button-radio.is-selected .radio-circle {
  border-color: #5CE526;
}

.option-button-radio.is-selected .radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5CE526;
}

.radio-label {
  font-family: 'Kuniforma', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white;
}

/* ===== ADD TO CART BUTTON STYLING ===== */
/* Default: white background, green circle icon */
/* Hover: black background, green circle icon stays */

.w-commerce-commerceaddtocartbutton.button.is-add,
button.button.is-add,
.button.is-add {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  color: #070707 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 8px 8px 8px 24px !important;
  font-family: "Kuniformatest 70", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-width: 180px !important;
  max-width: 280px !important;
  width: auto !important;
  height: 60px !important; /* Same height as q-group */
  box-sizing: border-box !important;
}

.w-commerce-commerceaddtocartbutton.button.is-add:hover,
button.button.is-add:hover,
.button.is-add:hover,
.add-to-cart .button.is-add:hover,
.div-block-2 .button.is-add:hover,
.buy-wrapper .button.is-add:hover {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

.w-commerce-commerceaddtocartbutton.button.is-add:disabled,
button.button.is-add:disabled,
.button.is-add:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Green circle with arrow icon - same size as q-inc (44px) */
.icon-button.is-add-cart {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
}
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
  filter: none !important;
}

/* Icon stays green on hover - no change needed */

/* ===== QUANTITY GROUP STYLING ===== */
.q-group {
  display: flex !important;
  align-items: center !important;
  background: white !important;
  background-color: white !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  height: 58px !important;
  padding: 4px !important;
}

/* Minus button - GREEN when enabled (same as plus button) */
.q-dec,
a.q-dec,
button.q-dec,
.q-dec.w-inline-block {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #5CE526 !important;
  background-color: #5CE526 !important;
  color: #070707 !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.q-dec:hover,
a.q-dec:hover,
button.q-dec:hover,
.q-dec.w-inline-block:hover {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

/* Disabled state for minus button - GRAY when quantity = 1 */
.q-dec.disabled,
a.q-dec.disabled,
button.q-dec.disabled,
.q-dec.w-inline-block.disabled {
  background: #e5e5e5 !important;
  background-color: #e5e5e5 !important;
  color: #9a9a9a !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.q-dec.disabled:hover,
a.q-dec.disabled:hover,
button.q-dec.disabled:hover,
.q-dec.w-inline-block.disabled:hover {
  background: #e5e5e5 !important;
  background-color: #e5e5e5 !important;
  color: #9a9a9a !important;
}

/* Plus button - green background, black on hover */
.q-inc,
a.q-inc,
button.q-inc,
.q-inc.w-inline-block {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #5CE526 !important;
  background-color: #5CE526 !important;
  color: #070707 !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.q-inc:hover,
a.q-inc:hover,
button.q-inc:hover,
.q-inc.w-inline-block:hover {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

.q-num {
  width: 50px;
  text-align: center;
  background: #fff !important;
  border: none;
  color: #070707 !important;
  font-family: 'Kuniforma', sans-serif;
  font-size: 18px;
  font-weight: 500;
  -moz-appearance: textfield;
}

.q-num::-webkit-outer-spin-button,
.q-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Buy wrapper layout */
.div-block-2 {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Responsive adjustments for product page */
@media (max-width: 991px) {
  .hero-wrapper {
    flex-direction: column;
    padding-top: 100px;
    min-height: auto;
  }
  
  .hero-left {
    max-width: 100%;
  }
  
  .hero-right {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 24px;
  }
  
  .product-3d-image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    max-height: 50vh;
    max-width: 80vw;
    margin: 0 auto;
    display: block;
  }
  
  .h1-product {
    font-size: clamp(32px, 10vw, 56px);
  }
}

@media (max-width: 479px) {
  .div-block-2 {
    flex-direction: column;
    gap: 12px;
  }
  
  .button.is-add {
    width: 100%;
    justify-content: center;
  }
}

/* ===== SCROLLING TEXT MARQUEE SECTION ===== */

.product-scroll-text-wrapper {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  margin: 72px 0 160px 0;
  isolation: isolate; /* Create new stacking context */
}

/* Ensure text wrapper is above everything */
.animate-text-wrapper {
  position: relative;
  z-index: 100;
  isolation: isolate;
}

/* Limit gradient to What's Inside section only - prevent it from covering scrolling text */
.product-wrapper_whats-inside .gradient {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Hide gradient in scrolling text section */
.product-scroll-text-wrapper .gradient,
.main-section .gradient {
  display: none !important;
}

.scroll-text-line-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  width: max-content;
  /* Animation controlled by JavaScript scroll */
  transition: transform 0.1s linear;
  position: relative;
  z-index: 100;
}

.scroll-text-line-wrapper.is-2 {
  /* Opposite direction - controlled by JavaScript */
}

.text-style-h1 {
  font-family: 'Kuniforma', sans-serif;
  font-size: 72px; /* Desktop Large - default */
  font-weight: 400;
  text-transform: none !important;
  color: #ffffff !important;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 10;
}

/* Desktop */
@media (max-width: 1279px) {
  .text-style-h1 {
    font-size: 64px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .text-style-h1 {
    font-size: 48px;
  }
}

/* Mobile Large & Mobile - same size as tablet */
@media (max-width: 767px) {
  .text-style-h1 {
    font-size: 48px;
  }
}

.sizing-none {
  flex-shrink: 0;
}

.diamond-icon {
  width: 24px;
  height: 24px;
  filter: hue-rotate(45deg) brightness(1.2);
}

/* Scroll Animations */
@keyframes scroll-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Scroll-based animation - no auto animation */

/* Mobile adjustments */
@media (max-width: 767px) {
  
  .scroll-text-line-wrapper {
    gap: 20px;
  }
  
  .diamond-icon {
    width: 16px;
    height: 16px;
  }
  
  .product-scroll-text-wrapper {
    padding: 48px 0;
    margin: 32px 0 120px 0;
  }
}

/* ===== WHAT'S INSIDE SECTION ===== */

.product-margin {
  padding: 0;
}

.text-style-display {
  font-family: 'Kuniforma', sans-serif;
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 400;
  color: white;
  line-height: 1.1;
  text-transform: uppercase;
}

.text-style-display strong {
  text-decoration: underline;
  font-weight: inherit;
}

.text-align-center {
  text-align: center;
}

.max-width-990 {
  max-width: 990px;
  margin: 0 auto;
}

.product-wrapper_whats-inside {
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column; /* Stack headline and spline vertically */
  align-items: center;
  justify-content: flex-start; /* Align to top */
  margin: 40px 0;
  padding-top: 80px; /* Space for headline */
  overflow: visible !important; /* Ensure overflow is visible */
  background-color: rgba(227, 17, 36, 1) !important; /* Match product page background */
}

/* Top gradient for mobile/tablet - softer edge at the top */
@media (max-width: 767px) {
  .product-wrapper_whats-inside {
    padding-top: 40px;
  }
  
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50vw;
    right: -50vw;
    width: 200vw;
    height: 80px;
    background: linear-gradient(to bottom, 
      rgba(227, 17, 36, 1) 0%, 
      rgba(227, 17, 36, 0) 100%
    );
    pointer-events: none;
    z-index: 100;
  }
}

.wrapper_whats-inside {
  width: 100%;
  max-width: 600px;
  position: relative;
  height: 900px !important; /* Increase height to prevent clipping - was 720px */
}

@media screen and (min-width: 1920px) {
  .wrapper_whats-inside {
    height: 1000px !important; /* Even taller on Full HD+ */
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .wrapper_whats-inside {
    height: 600px !important; /* Large Desktop - same as Desktop breakpoint */
  }
}

@media screen and (max-width: 991px) {
  .wrapper_whats-inside {
    height: 550px !important; /* Tablet - was 450px */
  }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
  .wrapper_whats-inside {
    height: 680px !important; /* Desktop - increased from 600px to 680px */
  }
}

@media screen and (max-width: 767px) {
  .wrapper_whats-inside {
    height: 550px !important; /* Mobile - increased from 450px to 550px */
    z-index: 300 !important; /* High z-index to ensure pins are above text block */
  }
  
  /* Move pins on mobile: right 100px, down 150px - with parent selector for higher specificity */
  .product-wrapper_whats-inside .wrapper_whats-inside {
    transform: translate(100px, 150px) !important;
  }
}

/* Tabs container */
.tabs.w-tabs {
  position: relative;
}

/* Icon wrapper container - positioned as a circle around content */
.inside-bg-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pin positioning wrapper - 0x0 size, absolute position */
.pin-position {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 150; /* Increased from 10 to 150 to be above text block (z-index: 100) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important; /* Debug: ensure cursor changes */
}

/* Positions */
.pin-position._1 { left: calc(15% + 400px); top: calc(25% + 0px); } /* Moved up by 100px: was +100px, now +0px */
.pin-position._2 { left: calc(55% + 350px); top: calc(5% + 0px); } /* Moved up by 100px: was +100px, now +0px */
.pin-position._3 { left: calc(50% + 350px); top: calc(60% + 0px); } /* Moved up by 100px: was +100px, now +0px */

/* Move pins higher on tablet and mobile to be above text */
@media (max-width: 991px) {
  .pin-position._1 { top: 5%; left: 25%; } /* Left pin - base position */
  .pin-position._2 { top: 5%; left: 75%; } /* Right pin - base position */
  .pin-position._3 { top: 12%; left: 50%; } /* Bottom center pin - base position */
}

/* Tablet only (768-991px): move pins right by 80px and down by 320px */
@media (min-width: 768px) and (max-width: 991px) {
  .pin-position._1 { 
    top: calc(5% + 30px); /* Moved up by 60px (was 90px, now 30px) */
    left: calc(25% - 20px); /* Moved left by 100px (was 80px, now -20px) */
  }
  .pin-position._2 { 
    top: calc(5% + 30px); /* Moved up by 60px (was 90px, now 30px) */
    left: calc(75% - 20px); /* Moved left by 100px (was 80px, now -20px) */
  }
  .pin-position._3 { 
    top: calc(12% + 90px); /* Center pin stays at 90px */
    left: calc(50% - 20px); /* Moved left by 100px (was 80px, now -20px) */
  }
}

@media (max-width: 767px) {
  /* Position pins: moved up by 50px more and closer by 15px */
  .pin-position._1 { 
    top: calc(5% - 150px); /* Moved up by 50px more (was -100px, now -150px) */
    left: calc(25% - 100px); /* Moved right by 15px to be closer (was -115px, now -100px) */
  }
  .pin-position._2 { 
    top: calc(5% - 180px); /* Right pin: moved up by 30px more (was -150px, now -180px) */
    left: calc(75% - 150px); /* Right pin: moved left by 80px more (was -70px, now -150px) */
  }
  .pin-position._3 { 
    top: calc(12% - 100px); /* Moved up by 50px more (was -50px, now -100px) */
    left: calc(50% - 100px); /* Stays centered */
  }
  
  /* Ensure pins are clickable above text block */
  .pin-position {
    z-index: 200 !important;
    pointer-events: auto !important;
  }
  
  .inside-icon-wrapper {
    pointer-events: auto !important;
  }
  
  .inside-bg-wrapper {
    z-index: 300 !important; /* Ensure pin container is above text block */
    position: relative !important;
  }
}

/* Staggered pulse animation delays */
.pin-position._1 .inside-icon-wrapper { animation-delay: 0s; }
.pin-position._2 .inside-icon-wrapper { animation-delay: 0.7s; }
.pin-position._3 .inside-icon-wrapper { animation-delay: 1.4s; }

/* Icon buttons - centered by flex parent */
.inside-icon-wrapper {
  position: relative;
  flex-shrink: 0; /* Prevent shrinking */
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease;
  animation: pulse-animation 2s infinite;
}

.inside-icon-wrapper:hover {
  background: rgba(255, 255, 255, 0.2);
}

.inside-icon-wrapper.w--current {
  background: rgba(0, 0, 0, 0.3);
  border-color: #ffffff;
  animation: none;
  width: 92px;
  height: 92px;
  cursor: default;
}

/* Inactive state - smaller size */
.inside-icon-wrapper.is-inactive {
  width: 55px;
  height: 55px;
  background: rgba(0, 0, 0, 0.2);
}

.inside-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}

.inside-icon.is-visible {
  opacity: 1;
  transform: scale(1);
}

.plus-symbol {
  font-size: 24px;
  font-weight: 300;
  color: #ffffff;
  line-height: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}

.plus-symbol.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Remove old display rules */
.inside-icon-wrapper.is-inactive .inside-icon {
  /* No display: none needed */
}

.inside-icon-wrapper.is-inactive .plus-symbol {
  /* No display: flex needed */
}

/* Tab content */
.tabs-content-3 {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none;
  width: auto;
  max-width: 350px; /* Desktop: 350px */
  margin: 0;
  margin-top: -700px; /* Moved up by 100px: was -600px, now -700px */
  margin-bottom: 100px; /* Add bottom margin to compensate and keep container height */
  margin-left: 140px; /* Match exact .container-small padding on desktop (140px) */
  padding: 0;
  z-index: 100 !important; /* High z-index to ensure visibility */
  pointer-events: none;
  min-height: 280px !important; /* Increased to prevent height changes when switching tabs */
  height: 280px !important; /* Fixed height */
}

/* Desktop Large - wider text block */
@media screen and (min-width: 1280px) {
  .tabs-content-3 {
    max-width: 500px; /* Desktop Large: 500px */
    min-height: 250px !important;
    height: 250px !important;
  }
}

.tabs-content-3 .tab-products {
  pointer-events: none !important; /* Don't block clicks on pins */
}

.tabs-content-3 .tab-products h4,
.tabs-content-3 .tab-products p {
  pointer-events: auto !important; /* Allow text selection */
}

.tabs-content-3 .w-tab-pane {
  min-height: 280px !important; /* Match parent */
  height: 280px !important; /* Fixed height */
  overflow: hidden; /* Hide overflow if text is too long */
}

@media (max-width: 991px) {
  .tabs-content-3 {
    margin-top: -250px; /* Moved up by 100px: was -150px, now -250px */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    max-width: 527px; /* Tablet: increased by additional 30% from 405px to 527px */
    min-height: auto !important; /* Auto height to fit content */
    height: auto !important; /* Auto height to fit content */
  }
  
  .tabs-content-3 .w-tab-pane {
    min-height: auto !important;
    height: auto !important;
    overflow: visible;
  }
  
  /* Center text on tablet and align to bottom */
  .tabs-content-3 .tab-products {
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: auto !important;
  }
  
  /* Increase heading size on tablet */
  .tabs-content-3 .tab-products h4,
  .tab-products h4 {
    font-size: 36px !important;
  }
}

@media (max-width: 767px) {
  .tabs-content-3 {
    margin-top: -400px; /* Match mobile device positioning (0-479px uses -400px) */
    margin-bottom: 0 !important; /* Remove bottom margin to allow proper positioning */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    max-width: 80%; /* Narrower on mobile landscape - was 100% */
    min-height: 380px !important; /* Increased for mobile */
    height: 380px !important; /* Fixed height for mobile */
    position: relative !important;
    z-index: 50 !important; /* Reduced from 100 to be below pins (z-index: 200) */
    pointer-events: none !important; /* Don't block clicks on pins */
  }
  
  /* Gradient overlay for better text readability */
  .tabs-content-3::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    width: 200vw;
    height: 400px; /* Increased by 100px: was 300px, now 400px */
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: -1;
  }
  
  .tabs-content-3 .w-tab-pane {
    min-height: 380px !important;
    height: 380px !important;
    overflow: hidden;
  }
  
  /* Center text on mobile and align to bottom */
  .tabs-content-3 .tab-products {
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100% !important;
  }
  
  /* Increase heading size on mobile */
  .tabs-content-3 .tab-products h4,
  .tab-products h4 {
    font-size: 32px !important;
  }
}

@media (max-width: 479px) {
  .tabs-content-3 {
    margin-top: -400px; /* Moved up by 100px: was -300px, now -400px */
    margin-left: 16px; /* Match .container-small padding on mobile (16px) */
    margin-right: 16px; /* Added right margin for symmetry */
    max-width: 100%;
    min-height: 140px;
  }
  
  .tabs-content-3 .w-tab-pane {
    min-height: 140px;
  }
}

.tab-products {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
}

.tab-products h4 {
  font-family: 'Kuniforma', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #ffffff !important;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.tab-products p {
  font-family: 'Kuniforma', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .inside-icon-wrapper {
    width: 80px;
    height: 80px;
  }
  
  .inside-icon {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 767px) {
  .inside-icon-wrapper {
    width: 80px;
    height: 80px;
  }
  
  .inside-icon {
    width: 44px;
    height: 44px;
  }
  
  .inside-bg-wrapper {
    height: 220px;
  }
  
  .tab-products {
    padding: 16px;
  }
  
  .tab-products h4 {
    font-size: 16px;
  }
  
  .tab-products p {
    font-size: 14px;
  }
}

/* OBCHOD Button - Rounded Border Style */
.nav-shop-btn {
  background: transparent;
  border: 1.5px solid white;
  border-radius: 50px;
  padding: 6px 18px;
  color: white;
  font-family: "Kuniformatest 70", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.nav-shop-btn:hover {
  border-color: #5CE526;
}

/* Language Selector */
.language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.language-selector:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Hide language selector on mobile */
@media (max-width: 991px) {
  .language-selector {
    display: none;
  }
}

/* ===== PRODUCT PAGE - DESCRIPTION SPACING ===== */
/* Remove all internal spacing - controlled by sections */
.main-section .container.is-relative {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

.wrapper-what-is-elevia {
  grid-row-gap: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

/* Main Spline wrapper - allow mouse interaction */
.main-spline-wrapper {
  pointer-events: auto !important;
}

.main-spline-wrapper canvas {
  pointer-events: auto !important;
}

.wrapper-what-is-elevia .prodcut-text,
.wrapper-what-is-elevia .product-description,
.wrapper-what-is-elevia .w-richtext {
  margin: 0 !important;
  padding: 0 !important;
  grid-row-gap: 0 !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.wrapper-what-is-elevia .prodcut-text p,
.wrapper-what-is-elevia .product-description p,
.wrapper-what-is-elevia .w-richtext p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Add horizontal padding for product description text on mobile/tablet */
@media (max-width: 991px) {
  .wrapper-what-is-elevia .prodcut-text,
  .wrapper-what-is-elevia .product-description {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
}

@media (max-width: 479px) {
  .wrapper-what-is-elevia .prodcut-text,
  .wrapper-what-is-elevia .product-description {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Gap between description and what's inside headline */
.product-margin {
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 192px !important;
}

.product-margin .text-style-display {
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

/* ===== PRODUCT CONTROLS ===== */
/* Override Webflow's large gaps */
.hero-left {
  grid-row-gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.info-wrapper {
  grid-row-gap: 24px !important;
}

/* Reduce gap between title, description and specs */
.product-hero {
  grid-row-gap: 12px !important;
}

/* Controls row - spans full width with space-between */
.product-controls-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 100% !important;
  gap: 24px;
}

/* Left side controls */
.product-controls-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Right side variant selector */
.product-controls-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.product-controls-right .flavour-text {
  margin-bottom: 0;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}

.product-controls-right .option-group {
  flex-wrap: nowrap;
  margin-bottom: 0;
}

/* Ensure hero section has relative positioning */
.hero-section {
  position: relative !important;
  padding-bottom: 48px !important;
}

/* Tablet: Stack controls */
@media (max-width: 991px) {
  .product-controls-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 24px;
  }
  
  .product-controls-right {
    align-items: flex-start;
  }
}

/* Mobile: Stack the controls */
@media (max-width: 767px) {
  .product-controls-left {
    margin-top: 24px;
  }
}

/* ===== PRODUCT GALLERY SWIPER ===== */
.product-gallery-section {
  overflow: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-bottom: 0 !important;
}

/* Remove gap between gallery and light-section */
.product-gallery-section + .light-section {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

/* Force white background for FAQ and Related Products sections */
.light-section {
  background-color: #ffffff !important;
}

.product-gallery-slider,
.product-gallery-slider.swiper,
.swiper.product-gallery-slider {
  width: 100% !important;
  height: 70vh !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  background-color: transparent !important;
}

.product-gallery-slider .swiper-wrapper,
.product-gallery-slider > .swiper-wrapper {
  /* Smooth slide transition */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  background-color: transparent !important;
}

.product-gallery-slider .swiper-slide,
.product-gallery-slider .pg-slide,
.pg-slide {
  width: calc(100vw - 200px) !important; /* Show 200px of next slide */
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.pg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

.pg-slide {
  border-radius: 0 !important;
}

@media (max-width: 991px) {
  .product-gallery-slider,
  .product-gallery-slider.swiper,
  .swiper.product-gallery-slider {
    height: 59.5vh !important; /* 15% smaller than 70vh for mobile/tablet */
  }
  
  .product-gallery-slider .swiper-slide,
  .product-gallery-slider .pg-slide,
  .pg-slide {
    width: calc(100vw - 60px) !important; /* Mobile - smaller peek */
  }
}

/* Product Gallery Pagination Bullets */
.product-gallery-pagination {
  display: none; /* Hidden on desktop */
  position: relative;
  text-align: center;
  padding: 20px 0;
  z-index: 20;
}

@media (max-width: 991px) {
  .product-gallery-pagination {
    display: block; /* Show on tablet and mobile */
  }
}

.product-gallery-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  margin: 0 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.product-gallery-pagination .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1);
  width: 24px;
  border-radius: 4px;
}

/* ===== PRODUCT GALLERY NAVIGATION ZONES ===== */
/* Invisible clickable areas for prev/next - positioned relative to section */
.prev-sec-gallery {
  z-index: 10;
  cursor: none;
  width: 50%;
  height: 70vh; /* Match swiper height */
  position: absolute;
  left: 0;
  bottom: 0;
}

.next-sec-gallery {
  z-index: 10;
  cursor: none;
  width: 50%;
  height: 70vh; /* Match swiper height */
  position: absolute;
  right: 0;
  bottom: 0;
}

.prev-sec-gallery.disabled,
.next-sec-gallery.disabled {
  pointer-events: none;
}

/* ===== RELATED PRODUCTS CAROUSEL ===== */
/* Ensure slides display properly */
.swiper1 .swiper-wrapper {
  display: flex !important;
}

.swiper1 .swiper-slide.is-small-product {
  width: 370px !important;
  min-width: 370px !important;
  height: 550px !important;
}

/* Responsive adjustments for related products on mobile */
@media (max-width: 767px) {
  .swiper1 .swiper-slide.is-small-product {
    width: 350px !important;
    min-width: 350px !important;
    height: 460px !important;
  }
}

/* Increase text size on related product cards */
.swiper-slide.is-small-product .body-medium {
  font-size: 18px !important;
  line-height: 26px !important;
}

.swiper-slide.is-small-product h2 {
  font-size: 40px !important;
  line-height: 44px !important;
}

/* ===== RELATED PRODUCTS HOVER EFFECTS ===== */
/* Fix symmetric padding for product card content */
.swiper-slide.is-small-product .product-card-content.is-small,
.product-card-content.is-small {
  left: 40px !important;
  right: 40px !important;
}

/* Product card hover - zoom image and scale card slightly */
.swiper-slide.is-small-product {
  overflow: hidden !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
}

.swiper-slide.is-small-product:hover {
  transform: scale(1.02) !important;
}

/* Background image zoom on hover */
.swiper-slide.is-small-product::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  z-index: 0;
}

.swiper-slide.is-small-product:hover::before {
  transform: scale(1.05) !important;
}

/* Hide the inner hover element completely */
.swiper-slide.is-small-product .btn-card .btn-card.is-hover,
.swiper-slide.is-small-product .btn-card > .btn-card {
  display: none !important;
}

/* Button default state - circle with border and arrow */
.swiper-slide.is-small-product > .product-card-content > .btn-card,
.swiper-slide.is-small-product .product-card-content.is-small > .btn-card {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8h9.34M9.33 4.67L12.67 8l-3.34 3.33' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: all 0.3s ease !important;
  margin-top: auto !important;
  align-self: flex-end !important;
}

/* Button hover state - green background with black arrow */
.swiper-slide.is-small-product:hover > .product-card-content > .btn-card,
.swiper-slide.is-small-product:hover .product-card-content.is-small > .btn-card {
  background-color: #5CE526 !important;
  border-color: #5CE526 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8h9.34M9.33 4.67L12.67 8l-3.34 3.33' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Debug mode - INACTIVE
   To activate, uncomment the sections below */

/*
.sections-wrapper > section,
.page-overflow > section,
main > section,
.hero-section,
.main-section,
.dosage-section,
.product-gallery-section,
.light-section,
.faq-section {
  outline: 3px dashed rgba(0, 100, 255, 0.8) !important;
  outline-offset: -3px;
}

.product-scroll-text-wrapper,
.wrapper-what-is-elevia,
.product-margin,
.product-wrapper_whats-inside {
  outline: 2px dashed rgba(255, 150, 0, 0.8) !important;
  outline-offset: -2px;
}

.hero-section::before { content: 'HERO | pb: 48px'; }
.main-section::before { content: 'MAIN SECTION'; }
.dosage-section::before { content: 'DOSAGE | p: 120px 0'; }
.product-gallery-section::before { content: 'GALLERY | mb: 0'; }
.light-section::before { content: 'RELATED | pt: 80px'; }
.product-scroll-text-wrapper::before { content: '1. SCROLLING TEXT | p: 64px 0, m: 72px 0 160px 0'; }
.wrapper-what-is-elevia::before { content: '2. DESCRIPTION | p: 0'; }
.product-margin::before { content: '3. WHATS INSIDE HEADLINE | mt: 192px'; }
.product-wrapper_whats-inside::before { content: '3b. WHATS INSIDE TABS'; }
*/


/* DEBUG BORDERS - REMOVED */

/* Hide any yellow/green borders or backgrounds between sections */
.section-default,
section,
main {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Reduce padding between sections */
.section-default {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Droplines section - keep some bottom padding */
.section-default:has(.swiper-droplines) {
  padding-bottom: 44px !important;
}

.droplines-full-width {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.swiper-droplines {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

@media screen and (min-width: 768px) {
  .section-default {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  
  .section-default:has(.swiper-droplines) {
    padding-bottom: 40px !important;
  }
}

@media screen and (min-width: 992px) {
  .section-default {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
  
  .section-default:has(.swiper-droplines) {
    padding-bottom: 53px !important;
  }
}

/* Add margin bottom to hero carousel */
.home-hero {
  margin-bottom: 46px !important;
}

@media screen and (min-width: 768px) {
  .home-hero {
    margin-bottom: 58px !important;
  }
}

@media screen and (min-width: 992px) {
  .home-hero {
    margin-bottom: 69px !important;
  }
}

section::before,
section::after {
  display: none !important;
}


/* FAQ headline - narrower on larger screens */
.text-style-caps.no-shrink.is-faq {
  width: 683px;
  max-width: 683px !important;
}

@media screen and (max-width: 1279px) {
  .text-style-caps.no-shrink.is-faq {
    width: 280px !important;
    max-width: 280px !important;
    font-size: 48px !important;
    line-height: 52px !important;
  }
  
  /* FAQ headline wrapper - reduce gap between headline and body text */
  .faq-headline-wrapper {
    flex-direction: row !important;
    gap: 34px !important;
    grid-column-gap: 34px !important;
    grid-row-gap: 34px !important;
  }
  
  .faq-headline-wrapper .body-medium {
    max-width: 936px !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 991px) {
  .text-style-caps.no-shrink.is-faq {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 48px !important;
    line-height: 46px !important;
  }
  
  /* FAQ headline wrapper - stack vertically on tablet */
  .faq-headline-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  
  .faq-headline-wrapper .body-medium {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .text-style-caps.no-shrink.is-faq {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Cart button tooltip */
.cart-button {
  position: relative;
}
.cart-button::before {
  content: 'Košík';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: white !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  font-family: 'Kuniforma', sans-serif !important;
  letter-spacing: 0.02em !important;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 1010;
}
.cart-button::after {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 1010;
}
.cart-button:hover::before,
.cart-button:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Login button - same style as cart button */
a.login-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  color: #070707 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

a.login-button:hover {
  background-color: #070707 !important;
  color: #fff !important;
}

/* Login button tooltip */
a.login-button::before {
  content: 'Přihlásit se';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: white !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  font-family: 'Kuniforma', sans-serif !important;
  letter-spacing: 0.02em !important;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 1010;
}

a.login-button::after {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 1010;
}

a.login-button:hover::before,
a.login-button:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Shop navigation - black sidebar 15% wider than cards */
.main-nav {
  width: 520px !important;
}

/* Navigation category links - keep default space-between layout */
/* Removed flex-start override to restore proper icon positioning */

.tabs-content {
  width: 450px !important;
  left: 520px !important;
  position: fixed !important;
  inset: 0 auto 0 520px !important;
  visibility: hidden !important; /* Hidden by default */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Only show tabs-content when menu is open (body has menu-open class) */
body.menu-open .tabs-content {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Close button positioned next to cards */
.close-button {
  inset: 24px auto auto calc(520px + 450px + 24px) !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  background-color: #55ec3b !important;
  color: #000000 !important;
}

/* Close button icon - black color */
.close-button,
.close-button .icon-16,
.close-button .icon-16 svg,
.close-button .icon-16 svg path,
.close-button svg,
.close-button svg path,
.close-button .w-embed,
.close-button .w-embed svg,
.close-button .w-embed svg path {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Desktop: Remove background/blur from nav-block - use separate overlay for fade effect */
@media screen and (min-width: 992px) {
  .nav-block {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (min-width: 1920px) {
  .main-nav {
    width: 575px !important;
  }
  .tabs-content {
    width: 500px !important;
    left: 575px !important;
    inset: 0 auto 0 575px !important;
  }
  .close-button {
    inset: 24px auto auto calc(575px + 500px + 24px) !important;
  }
}

@media (max-width: 1919px) and (min-width: 1441px) {
  .main-nav {
    width: 520px !important;
  }
  .tabs-content {
    width: 450px !important;
    left: 520px !important;
    inset: 0 auto 0 520px !important;
  }
  .close-button {
    inset: 24px auto auto calc(520px + 450px + 24px) !important;
  }
}

@media (max-width: 1440px) and (min-width: 1280px) {
  .main-nav {
    width: 480px !important;
  }
  .tabs-content {
    width: 420px !important;
    left: 480px !important;
    inset: 0 auto 0 480px !important;
  }
  .close-button {
    inset: 24px auto auto calc(480px + 420px + 24px) !important;
  }
}

@media (max-width: 1279px) and (min-width: 992px) {
  .main-nav {
    width: 400px !important;
    max-width: none !important;
  }
  .tabs-content {
    width: 380px !important;
    left: 400px !important;
    inset: 0 auto 0 400px !important;
  }
  .close-button {
    inset: 24px auto auto calc(400px + 380px + 24px) !important;
  }
}

/* ===== FAQ SMOOTH ANIMATIONS ===== */
.faq-list {
  display: flex !important;
  flex-direction: column !important;
}

.faq-item-custom {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

/* Smooth height transition for the answer container */
.faq-item-custom > div:first-child > div:last-child > div {
  will-change: max-height, opacity, margin;
}

/* Override FAQ icon rotation - we want native arrow directions */
.icon-16.is-faq-icon {
  transform: none !important;
}

/* ===== FOOTER FIX - ensure white text on dark background ===== */
.section-footer {
  color: #fff !important;
  background-color: #070707 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 200px !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 80px 0 !important;
}

.section-footer h4,
.section-footer a,
.section-footer .body-xsmall,
.section-footer .text-style-caps {
  color: #fff !important;
}

.section-footer a:hover {
  color: var(--green--main) !important;
}

.section-footer a:hover h4 {
  color: var(--green--main) !important;
}

/* ===== FLAVOURS BENTO GRID ===== */
.flavours-bento-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  width: 100%;
  min-height: 630px;
}

.flavours-bento-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform 0.4s ease;
}

.flavours-bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.5s ease;
}

.flavours-bento-card:hover {
  transform: scale(1.02);
}

.flavours-bento-card:hover::before {
  transform: scale(1.1);
}

.flavours-bento-card.is-large {
  grid-row: span 1;
  min-height: 630px;
}

.flavours-bento-card.is-medium {
  grid-row: span 1;
  min-height: 630px;
}

.flavours-bento-content {
  position: relative;
  z-index: 1;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  /* background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 60%); */
}

.flavours-bento-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flavours-bento-text h2 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  color: white;
}

.flavours-bento-description {
  margin-top: 8px;
}

.flavours-bento-description p {
  color: white;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
  padding-right: 70px;
}

.flavours-coming-soon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Bento card button - default state with white outline */
.flavours-bento-card > .flavours-bento-content > .btn-card,
.flavours-bento-card .flavours-bento-content .btn-card,
.flavours-bento-content > .btn-card,
.flavours-bento-content .btn-card,
.flavours-bento-card .btn-card:not(.is-hover) {
  position: absolute !important;
  bottom: 48px !important;
  right: 48px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: transparent !important;
  background-image: url('/elevia/btn-default.svg') !important;
  background-size: 42px 42px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: background-image 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Bento card button - hover state with green fill */
.flavours-bento-card:hover > .flavours-bento-content > .btn-card,
.flavours-bento-card:hover .flavours-bento-content .btn-card,
.flavours-bento-card:hover .btn-card:not(.is-hover) {
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url('/elevia/btn-hover.svg') !important;
  background-size: 42px 42px !important;
}

/* Hide the inner hover element */
.flavours-bento-card .btn-card .btn-card.is-hover,
.flavours-bento-card .btn-card > .btn-card {
  display: none !important;
}

/* Responsive - Laptop */
@media (max-width: 1279px) {
  .flavours-bento-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
  }
  
  .flavours-bento-card.is-large,
  .flavours-bento-card.is-medium {
    min-height: 500px;
  }
  
  .flavours-bento-description p {
    padding-right: 80px !important;
  }
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .flavours-bento-content {
    padding: 32px;
  }
  
  .flavours-bento-text h2 {
    font-size: 26px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .flavours-bento-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  .flavours-bento-card.is-large,
  .flavours-bento-card.is-medium {
    min-height: 420px;
    padding: 16px !important;
  }
  
  .flavours-bento-content {
    padding: 0 32px 24px 32px !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    height: auto !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .flavours-bento-text {
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .flavours-bento-text h2 {
    font-size: 28px !important;
    text-align: left !important;
  }
  
  .flavours-bento-text h2.mobile-center {
    text-align: left !important;
  }
  
  .flavours-bento-description {
    text-align: left !important;
  }
  
  .flavours-bento-description p {
    font-size: 14px;
    padding-right: 88px !important;
    text-align: left !important;
  }
  
  /* Arrow button position - same as droplines */
  .flavours-bento-card > .flavours-bento-content > .btn-card {
    position: absolute !important;
    bottom: 24px !important;
    right: 32px !important;
  }
  
  .flavours-coming-soon {
    text-align: left !important;
  }
}

/* ============================================
   MOBILE NAVIGATION - Tablet and Mobile
   ============================================ */

/* Desktop Navigation - ALWAYS show btn-wrapper on desktop */
@media screen and (min-width: 992px) {
  .nav .btn-wrapper,
  .nav-wrapper .btn-wrapper,
  nav .btn-wrapper,
  .btn-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Hide hamburger and mobile cart wrapper on desktop */
  .nav .nav-button,
  .nav-wrapper .nav-button,
  nav .nav-button,
  .nav-button,
  .nav .mobile-cart-wrapper,
  .nav-wrapper .mobile-cart-wrapper,
  nav .mobile-cart-wrapper,
  .mobile-cart-wrapper {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Mobile Navigation - Hide desktop nav items, show hamburger */
@media screen and (max-width: 991px) {
  /* Hide all desktop navigation items */
  .btn-wrapper {
    display: none !important;
  }
  
  /* Hide desktop close button on tablet/mobile - high specificity */
  .close-button,
  .nav-block .close-button,
  .nav-block > .close-button,
  div.close-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Apply mobile menu layout to tablet - removed display: flex !important to allow inline styles to control visibility */
  .main-mobile-nav {
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background-color: #070707 !important;
  }
  
  /* Nav links should be full width with large text like mobile */
  .main-mobile-nav .nav-link {
    width: 100% !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }
  
  .main-mobile-nav .nav-text {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
  }
  
  .main-mobile-nav .nav-link .nav-text {
    color: #ffffff !important;
  }
  
  .main-mobile-nav .icon-nav {
    width: 42px !important;
    height: 42px !important;
  }
  
  /* Control visibility based on shop menu state */
  .main-mobile-nav.is-visible {
    display: flex !important;
  }
  
  .main-mobile-nav.is-hidden {
    display: none !important;
  }
  
  /* Control shop submenu visibility */
  .main-nav.is-visible {
    display: flex !important;
  }
  
  .main-nav.is-hidden {
    display: none !important;
  }

  .nav-footer-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 22px !important;
    margin-top: auto !important; /* Push to bottom */
    margin-bottom: 48px !important;
    width: 100% !important;
    color: #ffffff !important;
  }
  
  .nav-footer-wrapper a,
  .nav-footer-wrapper div {
    color: #ffffff !important;
  }

  /* Ensure footer links are visible */
  .footer-links-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Show mobile cart wrapper */
  .mobile-cart-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  /* Show hamburger menu button */
  .nav-button {
    display: flex !important;
    background-color: #55ec3b !important;
    border-radius: 32px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 42px !important;
    height: 42px !important;
  }
  
  .nav-wrapper {
    justify-content: space-between !important;
  }

  /* Ensure mobile nav wrapper has space for close button on tablet too */
  .mobile-nav-wrapper {
    margin-top: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  
  /* Nav link items inside mobile nav wrapper */
  .mobile-nav-wrapper .nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
  }
  
  .mobile-nav-wrapper .nav-link .nav-text {
    color: #ffffff !important;
  }
  
  .mobile-nav-wrapper .nav-text {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
  }
  
  /* Ensure nav links are white - override gray from Webflow CSS */
  .nav-block .nav-link,
  .nav-block .nav-link .nav-text,
  .nav-block .mobile-nav-wrapper .nav-link,
  .nav-block .main-mobile-nav .nav-link,
  .mobile-nav-wrapper .nav-link,
  .main-mobile-nav .nav-link,
  .mobile-nav-wrapper .nav-link .nav-text,
  .main-mobile-nav .nav-link .nav-text,
  .nav-link.w-inline-block,
  .nav-link.w-inline-block .nav-text,
  .main-mobile-nav .mobile-nav-wrapper .nav-link,
  .main-mobile-nav .mobile-nav-wrapper .nav-text {
    color: #ffffff !important;
  }
  
  /* Icon should also be white */
  .mobile-nav-wrapper .icon-nav,
  .main-mobile-nav .icon-nav,
  .nav-block .icon-nav {
    color: #ffffff !important;
  }
  
  /* Force white color on all nav text in mobile menu */
  .main-mobile-nav .nav-text,
  .mobile-nav-wrapper .nav-text {
    color: #ffffff !important;
  }

  /* Ensure nav-block is full screen and black on tablet/mobile */
  .nav-block {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-color: #070707 !important;
    z-index: 10000 !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
  }
}

/* Prevent scroll when menu is open - ALL screen sizes */
body.menu-open,
html.menu-open {
  overflow: hidden !important;
}

/* Mobile/tablet specific - also fix position */
@media screen and (max-width: 991px) {
  body.menu-open,
  body.menu-open html {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
  }

  /* Allow touch interaction inside menu */
  body.menu-open .nav-block,
  body.menu-open .nav-block *,
  body.menu-open .mobile-products-view,
  body.menu-open .mobile-products-view * {
    touch-action: auto;
  }
}

/* Mobile shop navigation - full width and scrollable */
@media screen and (max-width: 991px) {
  .main-nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 24px !important;
    padding-top: 0 !important;
    background-color: #070707 !important;
    position: relative !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }
  
  /* All nav links - full width on tablet/mobile */
  .nav-link,
  .nav-link.w--current,
  .nav-link.is-product,
  .nav-link.is-product.w--current,
  .w-tab-link {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }
  
  /* W-tabs container - full width */
  .main-nav .w-tabs {
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }
  
  /* Tabs menu (categories list) - full width */
  .main-nav .tabs-menu,
  .main-nav .tabs-menu.w-tab-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    pointer-events: auto !important;
  }
  
  /* Ensure category links are clickable */
  .main-nav .tabs-menu .nav-link,
  .main-nav .tabs-menu .nav-link.is-product,
  .main-nav .w-tab-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
  }
  
  /* Parent div of tabs - full width (but not buttons) */
  .main-nav > div:not([style*="position: absolute"]) {
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
  }
  
  /* Protect close/back buttons from being stretched */
  .main-nav > div[style*="position: absolute"] {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-shrink: 0 !important;
  }
  
  /* Category links - full width with large text */
  .main-nav .nav-link.is-product {
    width: 100% !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  .main-nav .nav-link.is-product .nav-text {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
  }
  
  .main-nav .nav-link.is-product .icon-nav {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Back button in shop menu - same style as mobile */
  .main-nav .nav-link.is-nav {
    display: none !important; /* Hide desktop back button, we use absolute positioned one */
  }
  
  /* Footer in shop menu - push to bottom with proper spacing */
  .main-nav .nav-footer-wrapper {
    margin-top: auto !important;
    padding-top: 64px !important; /* Same spacing as main menu */
  }
  
  /* HIDE product cards container on mobile - only show after category click */
  .main-nav .tabs-content {
    display: none !important;
  }
  
  /* Mobile products view - full screen overlay with products */
  .mobile-products-view {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Product cards in mobile view */
  .mobile-products-view .card-nav-wrapper {
    width: 100% !important;
    min-height: 220px !important;
    border-radius: 20px !important;
  }
}

/* FAQ Mobile Layout */
@media screen and (max-width: 991px) {
  .faq-mobile-layout {
    display: block !important;
  }
  
  .faq-desktop-layout {
    display: none !important;
  }
}

/* Dosage grid - default 3 columns for desktop */
.dosage-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media screen and (max-width: 479px) {
  .text-style-caps.no-shrink.is-faq {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  /* Dosage section - single column ONLY on mobile */
  .dosage-section .dosage-grid[style],
  section .dosage-grid[style],
  .dosage-grid[style],
  .dosage-grid {
    grid-template-columns: 1fr !important;
    gap: 80px !important;
  }
}

@media screen and (max-width: 767px) {
  /* Dosage section - single column on mobile/small tablet */
  .dosage-grid {
    grid-template-columns: 1fr !important;
    gap: 80px !important;
  }
}

/* Mobile/Tablet - "Seznam se s řadou Medical" headline on 2 lines */
@media screen and (max-width: 991px) {
  .section-default .headline-pagination .all-caps.p-contents {
    max-width: none !important;
  }
  
  .section-default .headline-pagination .all-caps.p-contents span {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* Mobile portrait - consistent 24px side padding */
@media screen and (max-width: 479px) {
  .container-small {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  .section-default {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Droplines pagination dots - hidden on desktop, visible on mobile/tablet */
.swiper-pagination-droplines-dots,
.swiper-pagination2-dots,
.swiper-pagination-about-dots {
  display: none;
}

/* Base styles for Swiper pagination bullets */
.swiper-pagination-droplines-dots .swiper-pagination-bullet,
.swiper-pagination2-dots .swiper-pagination-bullet,
.swiper-pagination-about-dots .swiper-pagination-bullet,
.swiper-bullets1 .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #d1d1d1;
  opacity: 1;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
}

.swiper-pagination-droplines-dots .swiper-pagination-bullet-active,
.swiper-pagination2-dots .swiper-pagination-bullet-active,
.swiper-pagination-about-dots .swiper-pagination-bullet-active,
.swiper-bullets1 .swiper-pagination-bullet-active {
  background-color: #1a1a1a;
  width: 40px;
  height: 8px;
  border-radius: 4px;
}

@media screen and (max-width: 991px) {
  /* Show fraction pagination on mobile/tablet for Elevia Lab */
  .elevia-pagination {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
  
  /* Show dots pagination on mobile/tablet */
  .swiper-pagination-droplines-dots,
  .swiper-pagination2-dots,
  .swiper-pagination-about-dots {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 24px !important;
  }
  
  /* Seznam se s řadou Medical - no flex gap, use positive margin */
  .swiper-pagination-droplines-dots {
    margin-top: 28px !important;
  }
  
  /* Elevia Lab - has flex gap 48px on tablet, use negative margin to get 28px */
  .swiper-pagination2-dots {
    margin-top: -20px !important;
  }
  
  /* Fix navigation arrows height to align with cards */
  .prev-sec2,
  .next-sec2 {
    height: 100% !important;
  }
  
  /* Ensure consistent spacing - remove extra margin from swiper containers */
  .swiper2,
  .swiper-droplines {
    margin-bottom: 0 !important;
  }
  
  .swiper-pagination-droplines-dots .swiper-pagination-bullet,
  .swiper-pagination2-dots .swiper-pagination-bullet,
  .swiper-pagination-about-dots .swiper-pagination-bullet,
  .swiper-bullets1 .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #d1d1d1 !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    margin: 0 2px !important;
  }
  
  .swiper-pagination-droplines-dots .swiper-pagination-bullet-active,
  .swiper-pagination2-dots .swiper-pagination-bullet-active,
  .swiper-pagination-about-dots .swiper-pagination-bullet-active,
  .swiper-bullets1 .swiper-pagination-bullet-active {
    background-color: #1a1a1a !important;
    width: 40px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }
  
  /* About page pagination - same spacing as Elevia Lab */
  .swiper-pagination-about-dots {
    margin-top: -20px !important;
  }
  
  /* Related products bullets pagination - tablet/mobile - reduce margin since bullets are outside flex-default */
  .swiper-bullets1 {
    margin-top: 28px !important;
  }
}

/* Mobile specific - flex gap is 28px, so use 0 margin for Elevia Lab */
@media screen and (max-width: 767px) {
  .swiper-pagination2-dots,
  .swiper-pagination-about-dots {
    margin-top: 0 !important;
  }
  
  .products-mobile-category-item {
    padding: 36px 0 !important;
  }
}

/* Desktop FAQ - show desktop, hide mobile */
@media screen and (min-width: 992px) {
  .faq-mobile-layout {
    display: none !important;
  }
  
  .faq-desktop-layout {
    display: flex !important;
  }
  
  /* Related products bullets pagination - desktop - HIDE on desktop */
  .swiper-bullets1,
  .prev-sec1,
  .next-sec1,
  .swiper-pagination1 {
    display: none !important;
  }
}

/* ============================================
   MOBILE PRODUCTS NAVIGATION (Shop-style)
   ============================================ */

/* ELEVIA PROCES carousel styles - ensure proper overflow */
.tab-pane,
.lab-tab,
.tabs-content,
.w-tab-content {
  overflow: visible !important;
}

.lab-tab .swiper2,
[class*="swiper-process-"] {
  overflow: visible !important;
  max-width: 100% !important;
  position: relative !important;
}

.lab-tab .swiper-wrapper,
[class*="swiper-process-"] .swiper-wrapper {
  overflow: visible !important;
}

/* Ensure slides have proper widths in ELEVIA PROCES section */
[class*="swiper-process-"] .swiper-slide.is-photo {
  width: 550px !important;
  min-width: 550px !important;
  height: 780px !important;
}

[class*="swiper-process-"] .swiper-slide.is-photo-large {
  width: 1024px !important;
  min-width: 1024px !important;
  height: 780px !important;
}

@media screen and (max-width: 991px) {
  [class*="swiper-process-"] .swiper-slide.is-photo {
    width: 361px !important;
    min-width: 361px !important;
    height: 513px !important;
  }

  [class*="swiper-process-"] .swiper-slide.is-photo-large {
    width: 790px !important;
    min-width: 790px !important;
    height: 513px !important;
  }
}

/* Hide mobile nav on desktop, show desktop view */
.products-mobile-nav {
  display: none;
}

.products-desktop-view {
  display: flex;
}

/* Tablet & Mobile: Show mobile nav, hide desktop view */
@media screen and (max-width: 991px) {
  .products-desktop-view {
    display: none !important;
  }
  
  .products-mobile-nav {
    display: block;
    width: 100%;
  }
  
  /* Categories list */
  .products-mobile-categories {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 460px;
    justify-content: center;
  }
  
  .products-mobile-category-item {
    display: flex;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .products-mobile-category-item:hover {
    opacity: 0.7;
  }
  
  .products-mobile-category-item:first-child {
    border-top: 1px solid #E5E5E5;
  }
  
  .products-mobile-number {
    font-size: 14px;
    color: #999;
    width: 40px;
    flex-shrink: 0;
  }
  
  .products-mobile-name {
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1;
  }
  
  .products-mobile-arrow {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: #1a1a1a;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .products-mobile-arrow svg {
    width: 100%;
    height: 100%;
  }
  
  .products-mobile-arrow svg rect {
    transition: opacity 0.3s ease;
  }
  
  /* Hover effect on category item - green circle with black arrow */
  .products-mobile-category-item:hover .products-mobile-arrow {
    color: #000 !important;
    background-color: #5CE526 !important;
  }
  
  .products-mobile-category-item:hover .products-mobile-arrow svg rect {
    opacity: 0 !important;
  }
  
  /* Animation for categories */
  @keyframes productsFadeInUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .products-mobile-category-item {
    opacity: 0;
    animation: productsFadeInUp 0.4s ease-out forwards;
  }
  
  .products-mobile-category-item:nth-child(1) { animation-delay: 0.1s; }
  .products-mobile-category-item:nth-child(2) { animation-delay: 0.15s; }
  .products-mobile-category-item:nth-child(3) { animation-delay: 0.2s; }
  .products-mobile-category-item:nth-child(4) { animation-delay: 0.25s; }
  .products-mobile-category-item:nth-child(5) { animation-delay: 0.3s; }
  
  /* Product lines view */
  .products-mobile-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* Back button - styled like "VÍCE O LABU" button */
  .products-mobile-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    padding: 6px 6px 6px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    width: fit-content;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    opacity: 0;
    animation: productsFadeInUp 0.3s ease-out forwards;
  }
  
  .products-mobile-back:hover {
    background-color: #f5f5f5;
  }
  
  .products-mobile-back-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #55ec3b;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .products-mobile-back-icon svg {
    color: #000;
    width: 20px;
    height: 20px;
  }
  
  /* Product cards */
  .products-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .products-mobile-card {
    border-radius: 20px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform 0.3s ease;
    opacity: 0;
    animation: productsFadeInUp 0.5s ease-out forwards;
  }
  
  .products-mobile-card:nth-child(1) { animation-delay: 0.1s; }
  .products-mobile-card:nth-child(2) { animation-delay: 0.2s; }
  .products-mobile-card:nth-child(3) { animation-delay: 0.3s; }
  
  .products-mobile-card:hover:not(.is-coming-soon) {
    transform: scale(1.02);
  }
  
  .products-mobile-card.is-coming-soon {
    cursor: default;
    opacity: 0.9;
  }
  
  .products-mobile-card-title {
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  
  .products-mobile-card-soon {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
  }
  
  /* ============================================
     MOBILE PRODUCTS CAROUSEL
     ============================================ */
  
  .products-mobile-carousel {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    animation: productsSlideInFromRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    border-radius: 0 !important;
    overflow: visible;
  }
  
  @keyframes productsSlideInFromRight {
    from { 
      opacity: 0; 
      transform: translateY(50px);
    }
    to { 
      opacity: 1; 
      transform: translateY(0);
    }
  }
  
  /* Swiper container - same height as categories list */
  .products-mobile-swiper {
    position: relative;
    width: 100%;
    height: 460px;
    overflow: hidden;
    border-radius: 0 !important;
  }
  
  .products-mobile-swiper .swiper-wrapper {
    display: flex;
  }
  
  .products-mobile-swiper .swiper-slide {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0;
  }
  
  .products-mobile-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 !important;
  }
  
  /* Full slide clickable link */
  .products-mobile-slide-link {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  
  .products-mobile-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 0 !important;
  }
  
  /* Category & Line info at bottom left */
  .products-mobile-slide-info {
    position: absolute;
    bottom: 32px;
    left: 24px;
    z-index: 1;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    animation: ctaSlideUp 0.4s ease forwards;
    animation-delay: 0.3s;
  }
  
  
  @keyframes contentSlideIn {
    from { 
      opacity: 0; 
      transform: translateX(30px);
    }
    to { 
      opacity: 1; 
      transform: translateX(0);
    }
  }
  
  .products-mobile-slide-category {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  
  .products-mobile-slide-line {
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  
  /* Pagination dots - below carousel, centered */
  .products-mobile-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 20px 0 !important;
    width: 100% !important;
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
  
  .products-mobile-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #E5E5E5 !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
  }
  
  .products-mobile-pagination .swiper-pagination-bullet-active {
    background-color: #1a1a1a !important;
    width: 32px !important;
  }
  
  /* Back button - top left corner */
  .products-mobile-back-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
    animation-delay: 0.2s;
  }
  
  .products-mobile-back-btn:hover {
    background: #5CE526 !important;
    border-color: #5CE526 !important;
    color: #000 !important;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* CTA Button - bottom right (uses standard .button class) */
  .products-mobile-cta-btn {
    position: absolute !important;
    bottom: 32px !important;
    right: 24px !important;
    z-index: 10 !important;
    opacity: 0;
    transform: translateY(20px);
    animation: ctaSlideUp 0.4s ease forwards;
    animation-delay: 0.4s;
  }
  
  @keyframes ctaSlideUp {
    from { 
      opacity: 0; 
      transform: translateY(20px);
    }
    to { 
      opacity: 1; 
      transform: translateY(0);
    }
  }
  
  /* Arrow button in bottom right - aligned with text (legacy) */
  .products-mobile-slide-arrow {
    position: absolute;
    bottom: 60px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(30px);
    animation: contentSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
  }
  
  .products-mobile-slide-arrow svg {
    width: 20px;
    height: 20px;
  }
  
  .products-mobile-slide-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
  }
  
  /* Coming soon text */
  .products-mobile-slide-soon {
    position: absolute;
    bottom: 32px;
    right: 24px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(20px);
    animation: ctaSlideUp 0.4s ease forwards;
    animation-delay: 0.4s;
  }
}

/* Tablet specific - 48px padding all around */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .products-mobile-swiper {
    height: 620px !important;
  }
  
  .products-mobile-swiper .swiper-slide,
  .products-mobile-slide,
  .products-mobile-slide-link {
    height: 620px !important;
  }
  
  .products-mobile-pagination {
    padding: 28px 0 !important;
    margin-top: 0 !important;
  }
  
  .products-mobile-slide-info {
    bottom: 48px !important;
    left: 48px !important;
  }
  
  .products-mobile-cta-btn {
    bottom: 48px !important;
    right: 48px !important;
  }
  
  .products-mobile-back-btn {
    left: 48px !important;
    top: 48px !important;
  }
  
  .products-mobile-slide-soon {
    bottom: 48px !important;
    right: 48px !important;
  }
}

/* Contact page hero image - full width on all breakpoints */
.contact-hero {
  min-height: 535px !important;
}

.contact-hero .image-about {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .contact-hero {
    min-height: 430px !important;
  }
  
  /* Contact form headline - two lines on tablet */
  .section-default .heading-style-h1 p {
    max-width: 500px !important;
  }
  
  /* Contact hero headline - VÁM POMOCI on second line */
  .contact-hero .home-h1 {
    max-width: 480px !important;
  }
  
  /* Contact form - single column on tablet */
  .form-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .form-contact .form-group {
    width: 100% !important;
  }
}

@media screen and (min-width: 992px) {
  .contact-hero {
    min-height: 900px !important;
  }
  
  /* About page - increased section spacing on desktop */
  .section-default {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
}

/* Contact form - textarea full width and button below */
.form-contact .form-group:has(.is-text-field) {
  grid-column: 1 / -1 !important;
}

.form-contact .btn-contact {
  grid-column: 1 / -1 !important;
}

/* Contact button hover effect */
.btn-contact {
  cursor: pointer;
}

.btn-contact .button.is-secondary.is-contact {
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.btn-contact:hover .button.is-secondary.is-contact {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.btn-contact .icon-button.is-contact {
  transition: background-color 0.3s ease, filter 0.3s ease !important;
  border-radius: 50% !important;
}

.btn-contact:hover .icon-button.is-contact {
  background-color: #55ec3b !important;
  filter: none !important;
}

@media screen and (max-width: 1100px) {
  .form-contact {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .form-contact .form-group {
    width: 100% !important;
  }
}

/* Fix tab underline position - all tabs same height */
@media screen and (min-width: 768px) {
  .tabs-lab {
    align-items: stretch !important;
  }

  .tab-lab {
    align-self: stretch !important;
    display: flex !important;
    align-items: flex-start !important;
    border-bottom: 4px solid transparent !important;
    margin-bottom: -1px !important;
  }

  .tab-lab.w--current {
    border-bottom: 4px solid #262626 !important;
  }
}

/* Mobile & Tablet tabs - horizontal scroll with better UX */
@media screen and (max-width: 991px) {
  .w-tabs:has(.tabs-lab) {
    position: relative !important;
  }
  
  /* Fade indicator on right to show more tabs */
  .w-tabs:has(.tabs-lab)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 50px;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
    z-index: 2;
  }
  
  .tabs-lab {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
    gap: 0 !important;
    padding-right: 40px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .tabs-lab::-webkit-scrollbar {
    display: none;
  }
  
  .tab-lab {
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    padding: 16px 12px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }
  
  .tab-lab .p-contents {
    font-size: 13px !important;
  }
  
  .tab-lab.w--current {
    border-bottom: 2px solid #262626 !important;
  }
  
  .tab-lab:hover {
    color: #262626 !important;
  }
}

/* VĚDECKÁ RADA - 2 columns on tablet instead of 1 */
@media screen and (min-width: 480px) and (max-width: 1200px) {
  .wrapper-people {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin-top: 0 !important;
  }
  
  .wrapper-people .people-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    overflow: hidden !important;
  }
  
  .wrapper-people .people-photo {
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 350px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .wrapper-people .people-main-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .wrapper-people .people-name {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .wrapper-people .people-name h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  
  .wrapper-people .body-medium {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .wrapper-people .divider-people {
    display: none !important;
  }
}

/* Mobile - single column for VĚDECKÁ RADA */
@media screen and (max-width: 479px) {
  .wrapper-people {
    display: flex !important;
    flex-flow: column !important;
  }
}

/* Product page - Dosage section headline - always 2 lines */
.dosage-section .text-style-display {
  max-width: 900px !important;
}

@media screen and (max-width: 991px) {
  .dosage-section .text-style-display {
    max-width: 700px !important;
  }
}

@media screen and (max-width: 767px) {
  .dosage-section .text-style-display {
    max-width: 100% !important;
  }
}

/* Product page - Ensure gallery/overflow headlines are white */
.product-gallery-section .text-style-display,
.product-gallery-section .text-style-h1,
.product-gallery-section h1,
.product-gallery-section h2,
.product-gallery-section h3,
.page-overflow .text-style-display,
.page-overflow .text-style-h1,
.sections-wrapper .text-style-display,
.sections-wrapper .text-style-h1 {
  color: #ffffff !important;
}

.page-overflow .text-style-display {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none !important;
}

.page-overflow .text-style-display *,
.page-overflow .text-style-display u,
.page-overflow .text-style-display strong {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Product controls layout - keep variants aligned with buttons */
.product-controls-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
}

.product-controls-left {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.product-controls-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-end !important;
  flex: 0 0 auto !important;
  transform: translateY(-4px) !important;
}

.product-controls-right .flavour-text {
  margin-bottom: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.product-controls-right .option-group {
  margin-top: 0 !important;
  display: flex !important;
  gap: 8px !important;
}

/* Mobile - stack vertically and reverse order */
@media screen and (max-width: 767px) {
  .product-controls-row {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
  }

  .product-controls-right {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    gap: 8px !important;
  }
  
  .product-controls-left {
    width: 100% !important;
  }
}

/* Product page buttons - ensure consistent height across all elements */
/* Desktop */
.product-controls-left .q-group,
.product-controls-left .button.is-add {
  height: 58px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.product-controls-left .q-dec,
.product-controls-left .q-inc {
  width: 42px !important;
  height: 42px !important;
}

.product-controls-left .button.is-add .icon-button {
  width: 42px !important;
  height: 42px !important;
}

/* Mobile & Tablet - FORCE icon size */
@media screen and (max-width: 991px) {
  .product-controls-left .q-group,
  .product-controls-left .button.is-add {
    height: 48px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .product-controls-left .button.is-add {
    background-color: #ffffff !important;
    color: #070707 !important;
    background-size: 32px 32px !important;
    background-position: calc(100% - 8px) center !important;
    padding-right: 8px !important;
    padding-left: 16px !important;
  }

  .product-controls-left .q-dec,
  .product-controls-left .q-inc {
    width: 32px !important;
    height: 32px !important;
  }

  /* Multiple selectors to override everything */
  img.icon-button.is-add-cart,
  .icon-button.is-add-cart,
  .product-controls-left img.icon-button,
  .product-controls-left .button img,
  button img.icon-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

.dosage-section {
  position: relative !important;
  z-index: 10 !important;
  opacity: 1 !important;
}

.dosage-section h3.text-style-display {
  color: #ffffff !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 100 !important;
}

.dosage-section h3.text-style-display * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Footer - smaller font for email and phone on mobile */
@media screen and (max-width: 767px) {
  .section-footer h4.text-style-caps {
    font-size: 20px !important;
    line-height: 24px !important;
  }
}

@media screen and (max-width: 479px) {
  .section-footer h4.text-style-caps {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

/* DEBUG BORDERS - FOR DEVELOPMENT ONLY */
/* Tablet (768px - 991px) - Debug borders for Spline container and text block */
@media (min-width: 768px) and (max-width: 991px) {
  .inside-bg-wrapper {
    /* border: 5px solid blue !important; */ /* Blue border for Spline container - HIDDEN */
    height: 425px !important; /* Increased by 100px: was 325px, now 425px */
  }
  
  /* Reduce headline width and move up by 150px for tablet */
  .product-wrapper_whats-inside .product-margin {
    max-width: calc(100% - 200px) !important;
    transform: translateY(-150px) !important;
  }
  
  .tabs-content-3 {
    /* border: 5px solid red !important; */ /* Red border for text block - HIDDEN */
  }
  
  /* Tablet specific: auto height for text block */
  .tabs-content-3 {
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Gradient overlay as separate layer between text block and Spline container on tablet */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 400px; /* Gradient height increased to 400px */
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100; /* Above Spline container, below text block and pins */
  }
  
  /* Removed all custom transforms to restore original tablet layout */
}

/* WIDTH INDICATOR - FOR DEVELOPMENT ONLY */
body::after {
  content: '';
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #00ff00;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  z-index: 9999;
  pointer-events: none;
}

@media (min-width: 0px) {
  body::after { content: 'Width: 0-479px'; }
}

@media (min-width: 480px) {
  body::after { content: 'Width: 480-767px'; }
}

@media (min-width: 768px) {
  body::after { content: 'Width: 768-991px (TABLET)'; }
}

@media (min-width: 992px) {
  body::after { content: 'Width: 992-1279px (DESKTOP)'; }
}

@media (min-width: 1280px) {
  body::after { content: 'Width: 1280-1439px (LARGE)'; }
}

@media (min-width: 1440px) {
  body::after { content: 'Width: 1440-1919px (XL)'; }
}

@media (min-width: 1920px) {
  body::after { content: 'Width: 1920px+ (FULL HD)'; }
}

/* Desktop (992-1279px) - Move Spline container down and add gradient */
@media (min-width: 992px) and (max-width: 1279px) {
  /* Force correct Spline scene for Desktop - scene-9 (vertical bottle) */
  .spline-scene-7 {
    display: none !important;
    visibility: hidden !important;
  }
  
  .spline-scene-9 {
    display: block !important;
    visibility: visible !important;
  }

  /* Move text block up by 50px (was 100px down, now 50px down = 50px up) */
  .tabs-content-3.w-tab-content {
    transform: translateY(50px) !important;
  }

  /* NOTE: .inside-bg-wrapper is used for the pins menu.
     The actual What's Inside Spline is wrapped by .whats-inside-spline-wrapper (absolute centered). */
  .product-wrapper_whats-inside .whats-inside-spline-wrapper {
    transform: translate(-50%, -50%) translateY(100px) !important; /* Move Spline down by 100px */
    width: 100% !important; /* Keep within container */
    max-width: 100% !important;
  }
  
  .product-wrapper_whats-inside .whats-inside-spline-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Prevent stretching */
  }

  /* Gradient overlay - using ::after like tablet (NOT ::before) */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    bottom: 270px; /* Moved down by 30px (was 300px, now 270px) */
    left: 0;
    right: 0;
    width: 100%;
    height: 75px; /* Reduced to 75px (was 150px, now 75px) */
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }

  /* Desktop (992-1279px) - Individual controls (Headline / Pins / Text block) */
  .product-wrapper_whats-inside .product-margin {
    transform: translateY(-50px) !important; /* Headline: moved up by 50px */
  }

  /* Force "V" onto next line (only 992-1279px). We inject <span class="wi-break-v">V</span> in TSX. */
  .product-wrapper_whats-inside .wi-break-v {
    display: block !important;
  }

  .product-wrapper_whats-inside .wrapper_whats-inside {
    transform: translate(-70px, -50px) !important; /* Pins: moved left by 40px more (was -30px, now -70px), up 50px */
    z-index: 400 !important;
  }

  /* Optional: fine-tune each pin individually (desktop) - moved up by 60px more (was 70px, now 10px) and closer by 25px */
  .product-wrapper_whats-inside .pin-position._1 { transform: translate(-15px, 10px) !important; } /* Left pin: moved left by 40px (was 25px, now -15px), down 10px */
  .product-wrapper_whats-inside .pin-position._2 { transform: translate(-65px, 10px) !important; } /* Right pin: moved left by 40px (was -25px, now -65px), down 10px */
  .product-wrapper_whats-inside .pin-position._3 { transform: translate(-40px, 10px) !important; } /* Center pin: moved left by 40px, down 10px */

  /* Ensure inner pane moves with the text block */
  .product-wrapper_whats-inside .tabs-content-3 .w-tab-pane {
    transform: none !important;
  }
}

/* Large Desktop (1280-1439px) - Individual controls for What's Inside section */
@media (min-width: 1280px) and (max-width: 1439px) {
  /* Move text block down by 350px total (was -50px, now +50px = 100px down more) */
  .tabs-content-3.w-tab-content {
    transform: translateY(50px) !important;
  }

  /* Gradient overlay - aligned with bottom of canvas */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    top: 560px !important; /* Moved down by 90px (was 470px, now 560px) */
    left: 0;
    right: 0;
    width: 100%;
    height: 150px; /* Reduced from 250px to 150px */
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }

  /* Individual control for headline position */
  .product-wrapper_whats-inside .product-margin {
    transform: translateY(-170px) !important; /* Moved headline down by 30px more (was -200px, now -170px) */
  }

  /* Move all 3 pins: down by 100px (was -150px, now -50px), left by 80px */
  .product-wrapper_whats-inside .wrapper_whats-inside {
    transform: translate(-80px, -50px) !important; /* Left 80px, up 50px (moved down by 100px) */
    z-index: 400 !important;
  }

  /* Individual pin positions - move closer by 30px, down by 100px */
  .product-wrapper_whats-inside .pin-position._1 { transform: translate(30px, -50px) !important; } /* Left pin: move right by 30px, up 50px */
  .product-wrapper_whats-inside .pin-position._2 { transform: translate(-30px, -50px) !important; } /* Right pin: move left by 30px, up 50px */
  .product-wrapper_whats-inside .pin-position._3 { transform: translateY(-50px) !important; } /* Center pin: up 50px */

  /* Ensure inner pane moves with the text block */
  .product-wrapper_whats-inside .tabs-content-3 .w-tab-pane {
    transform: none !important;
  }
}

/* XL Desktop (1440-1919px) - Individual controls for What's Inside section */
@media (min-width: 1440px) and (max-width: 1919px) {
  /* Move entire wrapper down by 220px and extend to full width */
  .product-wrapper_whats-inside {
    margin-top: 220px !important;
    margin-left: -140px !important; /* Compensate for container-small padding-left */
    margin-right: -140px !important; /* Compensate for container-small padding-right */
    padding-left: 140px !important; /* Restore padding for content inside */
    padding-right: 140px !important; /* Restore padding for content inside */
  }

  /* Set wrapper to full width and 580px height (increased by 100px) */
  .product-wrapper_whats-inside .wrapper_whats-inside {
    width: 100% !important;
    max-width: 100% !important;
    height: 580px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Move text block down by 30px more (was 50px, now 80px) */
  .tabs-content-3.w-tab-content {
    transform: translateY(80px) !important;
  }

  /* Make canvas fit within the wrapper and move 150px to the right */
  .product-wrapper_whats-inside .whats-inside-spline-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    left: 50% !important;
    top: 40% !important; /* Moved higher (was 50%, now 40%) */
    transform: translate(calc(-50% + 150px), -50%) !important; /* Move 150px to the right */
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-wrapper_whats-inside canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important; /* Fill wrapper, maintain aspect */
    object-fit: contain !important; /* Prevent stretching */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Gradient overlay - positioned at exact bottom of canvas */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    top: 553px !important; /* Moved down by 18px (was 535px, now 553px) */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 140px; /* Reduced from 300px to 140px */
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }

  /* Individual control for headline position */
  .product-wrapper_whats-inside .product-margin {
    transform: translateY(-220px) !important; /* Moved headline up by 200px (was -20px, now -220px) */
  }

  /* Move all 3 pins: right by 150px (was -80px, now 70px), up by 120px */
  .product-wrapper_whats-inside .wrapper_whats-inside {
    transform: translate(70px, -120px) !important; /* Moved right by 150px (was -80px, now 70px) */
    z-index: 400 !important;
  }

  /* Individual pin positions - adjust horizontal spacing */
  .product-wrapper_whats-inside .pin-position._1 { transform: translate(250px, 0px) !important; } /* Left pin: move right by 250px (was 200px, now +50px) */
  .product-wrapper_whats-inside .pin-position._2 { transform: translate(-150px, 0px) !important; } /* Right pin: move left by 150px (was -70px, now -80px more = -150px) */
  .product-wrapper_whats-inside .pin-position._3 { transform: translate(-70px, -40px) !important; } /* Middle pin: move left by 70px, up by 40px */

  /* Ensure inner pane moves with the text block */
  .product-wrapper_whats-inside .tabs-content-3 .w-tab-pane {
    transform: none !important;
  }
}