/* Prevent horizontal scroll and overscroll behavior */
html, body {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure nav doesn't block Spline 3D object with gradient */
.nav {
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove any pseudo-elements that might create gradients */
.nav::before,
.nav::after {
  display: none !important;
}

/* Top bar stripe */
.top-bar-stripe {
  width: 100%;
  background-color: #070707;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  transition: background-color 0.45s ease;
}

.top-bar-stripe.is-light {
  background-color: #FFFFFF;
}

.top-bar-stripe .top-bar-center-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.top-bar-stripe .top-bar-center {
  grid-area: 1 / 1;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.45s ease, color 0.45s ease;
  text-align: center;
  pointer-events: none;
}

.top-bar-stripe .top-bar-center.is-active {
  opacity: 1;
  pointer-events: auto;
}

.top-bar-stripe .top-bar-center-link {
  margin-left: 0.35em;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  white-space: nowrap;
}

.top-bar-stripe .top-bar-center-link:hover {
  color: #55EC3B;
}

.top-bar-stripe.is-light .top-bar-center {
  color: #070707;
}

.top-bar-stripe .top-bar-right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}

.top-bar-stripe .top-bar-right .lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-bar-stripe .top-bar-right span.separator {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

.top-bar-stripe .top-bar-right a,
.top-bar-stripe .top-bar-right button {
  color: #ffffff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  padding: 0;
  transition: color 0.2s ease;
}

.top-bar-stripe .top-bar-right a:hover,
.top-bar-stripe .top-bar-right button:hover {
  color: #55EC3B;
}

.top-bar-stripe .top-bar-right button.lang-active {
  color: #55EC3B;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top-bar-stripe.is-light .top-bar-right,
.top-bar-stripe.is-light .top-bar-right a,
.top-bar-stripe.is-light .top-bar-right button {
  color: #070707;
}

.top-bar-stripe.is-light .top-bar-right span.separator {
  color: rgba(7, 7, 7, 0.35);
}

.top-bar-stripe.is-light .top-bar-right a:hover,
.top-bar-stripe.is-light .top-bar-right button:hover {
  color: #070707;
  opacity: 0.75;
}

.top-bar-stripe.is-light .top-bar-right button.lang-active {
  color: #070707;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* MD-LG + LG (≥1280px): taller promo stripe — match reference banner height */
@media screen and (min-width: 1280px) {
  .top-bar-stripe {
    min-height: 48px;
    padding: 0 40px;
  }

  .top-bar-stripe .top-bar-center {
    font-size: 13px;
    line-height: 20px;
  }

  .top-bar-stripe .top-bar-right {
    font-size: 13px;
  }
}

/* Tablet: one row — promo left, language switcher right */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .top-bar-stripe {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 24px;
  }

  .top-bar-stripe .top-bar-center-wrap {
    flex: 1;
    place-items: start;
  }

  .top-bar-stripe .top-bar-center {
    text-align: left;
    max-width: 100%;
    line-height: 1.4;
  }

  .top-bar-stripe .top-bar-right {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    flex-shrink: 0;
    align-self: center;
  }
}

@media (max-width: 767px) {
  .top-bar-stripe {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
  }

  .top-bar-stripe .top-bar-center-wrap {
    flex: 1;
    place-items: start;
  }

  .top-bar-stripe .top-bar-center {
    font-size: 11px;
    text-align: left;
    line-height: 1.3;
  }

  .top-bar-stripe .top-bar-right {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    flex-shrink: 0;
    gap: 8px;
    font-size: 11px;
  }

  .top-bar-stripe .top-bar-right .lang-switcher {
    gap: 4px;
  }
}

/* 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;
  width: 48px !important;
  height: 48px !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 - OLD swiper carousel styles (kept for reference, now using grid) */
/* .droplines-grid-old - no longer used */

.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%;
}

/* ===== DROPLINES LANDSCAPE GRID (2-column layout) ===== */
.section-droplines-grid {
  background-color: #fff !important;
}

/* Product detail page: force white background with full-width bleed */
.section-droplines-grid.product-droplines {
  background-color: #fff !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.product-droplines .droplines-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 992px) {
  .product-droplines .droplines-landscape-card {
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 991px) {
  .section-droplines-grid.product-droplines {
    padding-top: 160px !important;
  }
}

/* XL+ (1440px+) — reduce top padding from 120px to 80px */
@media (min-width: 1440px) {
  .light-section.section-droplines-grid {
    padding-top: 80px !important;
  }
}

.droplines-headline {
  font-size: 48px !important;
  line-height: 1.05 !important;
  margin-bottom: 0px !important;
}

.droplines-headline strong,
.droplines-headline u,
.droplines-headline .droplines-headline-underline,
.droplines-headline span[style*="underline"] {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

.droplines-headline .droplines-headline-underline {
  display: inline;
}

.droplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  width: 100%;
}

.droplines-landscape-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 280px;
  background: var(--card-bg) no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  text-decoration: none;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.droplines-landscape-card:hover {
  transform: scale(1.02);
}

.droplines-landscape-content {
  z-index: 2;
}

.droplines-landscape-content h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: white;
}

.droplines-landscape-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  z-index: 2;
  transition: gap 0.3s ease;
}

.droplines-landscape-card:hover .droplines-landscape-cta {
  gap: 12px;
}

.droplines-landscape-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.droplines-landscape-card:hover .droplines-landscape-cta svg {
  transform: translateX(4px);
}

/* Desktop (992-1279px) - ensure proper spacing */
@media (min-width: 992px) and (max-width: 1279px) {
  .droplines-grid {
    gap: 20px;
  }
  
  .droplines-landscape-card {
    aspect-ratio: 3 / 4;
    min-height: 240px;
    padding: 24px;
  }
  
  .droplines-landscape-content h3 {
    font-size: 28px;
  }
}

/* Large (1280-1439px) - ensure proper spacing */
@media (min-width: 1280px) and (max-width: 1439px) {
  h2 {
    font-size: 34px;
    line-height: 34px;
  }

  .people-name h2 {
    font-size: 28px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .belief-headline {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: none;
  }

  .droplines-grid {
    gap: 24px;
  }
  
  .droplines-landscape-card {
    aspect-ratio: 3 / 4;
    min-height: 260px;
    padding: 28px;
  }
  
  .droplines-landscape-content h3 {
    font-size: 32px;
  }
}

/* Tablet - stack to single column */
@media (max-width: 991px) {
  .droplines-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .droplines-landscape-card {
    aspect-ratio: 16 / 6.48;
    min-height: 200px;
  }
  
  .droplines-landscape-content h3 {
    font-size: 32px;
  }
  
  .droplines-headline {
    font-size: 48px !important;
    line-height: 46px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .droplines-landscape-card {
    aspect-ratio: 16 / 9;
    min-height: auto;
    padding: 24px;
  }
  
  .droplines-landscape-content h3 {
    font-size: 28px;
  }
  
  .droplines-headline {
    font-size: 40px !important;
    line-height: 38px !important;
  }
  
  .droplines-grid {
    gap: 16px;
    margin-top: 32px;
  }
}

/* Small mobile - smaller headline to fit */
@media (max-width: 479px) {
  .droplines-headline {
    font-size: 40px !important;
    line-height: 38px !important;
  }

  .droplines-headline span {
    white-space: normal !important;
  }
}

/* Mobile-Tablet in-between (480-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .droplines-landscape-card {
    aspect-ratio: 16 / 7;
  }
}

/* ===== DROPLINES MOBILE CAROUSEL ===== */

/* Desktop: show grid, hide swiper */
.droplines-swiper-wrapper {
  display: none;
}

@media screen and (min-width: 992px) {
  .droplines-grid-desktop {
    display: grid !important;
  }
}

/* Mobile/Tablet: hide grid, show swiper carousel */
@media screen and (max-width: 991px) {
  .droplines-grid-desktop {
    display: none !important;
  }

  .section-droplines-grid {
    overflow: hidden !important;
  }

  .section-droplines-grid .w-container {
    overflow: visible !important;
  }

  .droplines-swiper-wrapper {
    display: block !important;
    margin-top: 32px;
    overflow: visible !important;
  }

  .droplines-swiper-wrapper [class*="droplines-swiper-"] {
    overflow: visible !important;
  }

  .droplines-fraction {
    color: #7a7a7e;
    text-align: right;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 12px;
  }

  .droplines-swiper-slide {
    width: 75vw !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  .droplines-swiper-slide .droplines-landscape-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: auto;
  }

  .droplines-pagination-dots {
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
    gap: 0 !important;
  }

  .droplines-pagination-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #d1d1d1;
    border-radius: 50%;
    margin: 0 3px;
    opacity: 1;
    transition: all 0.3s ease;
  }

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

/* Tablet: slightly narrower slides to show more peek */
@media screen and (min-width: 600px) and (max-width: 991px) {
  .droplines-swiper-slide {
    width: 60vw !important;
  }
}

/* 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 */
/* Remove the fixed gradient - we'll add it to the specific section instead */
.sections-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

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

/* Fade-out gradient for Spline bottle - positioned at bottom of scroll text section */
.product-scroll-text-wrapper {
  position: relative;
}

.product-scroll-text-wrapper::after {
  content: '';
  position: absolute;
  bottom: -300px; /* Positioned below the scrolling text where bottle fades */
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #E31124 0%, rgba(227, 17, 36, 0) 100%);
  pointer-events: none;
  z-index: 10; /* Above Spline object (z-index: 0) */
}

/* Main section positioning */
.main-section {
  position: relative !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;
  }

  /* Use dynamic viewport height on mobile to avoid being cut by browser chrome */
  .cart-wrapper {
    height: calc(100dvh - 60px) !important;
    bottom: 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;
  text-transform: none !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 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

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

/* Scrollable area gets all remaining height above footer */
.cart-wrapper .cart-scrollable-area {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Cart list — no inner scroll; parent .cart-scrollable-area scrolls */
.cart-wrapper .cart-list {
  width: calc(100% + 14px) !important;
  overflow: visible !important;
  flex: none !important;
  padding-right: 14px !important;
  margin-right: -14px !important;
}

/* Scrollbar on the scroll container */
.cart-wrapper .cart-scrollable-area::-webkit-scrollbar {
  width: 4px !important;
}

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

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

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

/* Footer — fixed size, never grows */
.cart-wrapper .cart-footer {
  flex: 0 0 auto !important;
  padding-top: 12px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid #eee !important;
  width: 100% !important;
  background: white !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-wrapper .remove-link.remove-link--danger {
  color: #ef4444;
}

.cart-wrapper .remove-link.remove-link--danger::after {
  background-color: #ef4444;
}

.cart-wrapper .remove-link.remove-link--danger:hover {
  color: #ef4444;
}

.cart-wrapper .remove-link.remove-link--danger:hover::after {
  background-color: #ef4444;
}

.contact-company-info .remove-link {
  font-size: inherit;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: inline-block;
}

.contact-company-info .remove-link::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, background-color 0.2s ease;
}

.contact-company-info .remove-link:hover::after {
  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; /* Back behind content */
  opacity: 1; /* Full opacity - no transparency overlay */
  /* No background - let page color show through */
  transition: opacity 0.3s ease-out; /* Smooth fade transition */
}

/* CRITICAL: Remove the gradient overlay from Webflow CSS */
.animation-wrapper::after {
  display: none !important;
  content: none !important;
}

/* 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 !important;
}

/* Premium Quality badge - positioned in hero section, scrolls with page */
.premium-quality-badge {
  position: absolute;
  width: 120px;
  right: calc(8% + 170px);
  top: 52%;
  z-index: 3;
  pointer-events: none;
  transform: rotate(30deg);
}

@media screen and (min-width: 1321px) and (max-width: 1439px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(6% + 140px);
    top: calc(54% - 30px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 1280px) and (max-width: 1320px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(6% + 100px);
    top: calc(54% - 30px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 1121px) and (max-width: 1279px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(5% + 50px);
    top: calc(50% - 20px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 992px) and (max-width: 1120px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(5% + 0px);
    top: calc(50% - 20px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 850px) and (max-width: 991px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(5% + 120px);
    top: calc(50% - 160px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 768px) and (max-width: 849px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(5% + 90px);
    top: calc(50% - 160px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 625px) and (max-width: 767px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(4% + 20px);
    top: calc(48% - 210px);
    transform: rotate(30deg);
  }
}

@media screen and (min-width: 480px) and (max-width: 624px) {
  .premium-quality-badge {
    width: 120px;
    right: calc(4% + 10px);
    top: calc(48% - 210px);
    transform: rotate(30deg);
  }
}

@media screen and (max-width: 479px) {
  .premium-quality-badge {
    width: 120px;
    right: 4%;
    top: calc(48% - 330px);
    transform: rotate(30deg);
  }
}

.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;
}

/* TAB (768–991px): move hero text, buttons, and flavor selector down ~100px */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section .hero-left {
    margin-top: 20px !important;
  }
}

/* MD (992–1279px): move product hero text frame down */
@media (min-width: 992px) and (max-width: 1279px) {
  .hero-section .hero-left {
    margin-top: 100px !important;
  }
}

/* MD-LG (1280–1439px): hero text + controls lower; Spline/background unchanged */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero-section {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 68px !important;
  }

  .hero-section .hero-wrapper {
    margin-top: 120px !important;
    padding-top: 60px !important;
    min-height: auto !important;
  }

  .hero-section .hero-left {
    margin-top: 0 !important;
  }
}

.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;
}

/* CMS underline in hero / page headlines (SimpleHtmlEditor → strong) */
.home-h1 strong,
.home-h1 u,
.heading-style-h1 strong,
.heading-style-h1 u,
.home-h1 span[style*="underline"],
.heading-style-h1 span[style*="underline"] {
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

/* 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;
}

/* LG (1440–1919px): align hero content higher (title + controls block) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-section {
    justify-content: flex-start !important;
  }

  .hero-wrapper {
    padding-top: 100px !important;
  }

  /* CZ product hero: extra line in title — nudge text + controls down; EN unchanged */
  html[lang='cs'] .hero-section:not(.hero-section--pre-roll) .hero-left {
    margin-top: 48px !important;
  }
}

/* XL (≥1920px): use flex-start so marginTop on hero-wrapper takes effect */
@media (min-width: 1920px) {
  .hero-section {
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }
}


/* Mobile: override Webflow flex-end so marginTop on hero-wrapper takes effect */
@media (max-width: 767px) {
  .hero-section {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
  }
}

/* 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: 767px) {
  .h1-product {
    font-size: 40px !important;
    line-height: 0.95;
  }

  .text-style-display {
    font-size: 40px !important;
    line-height: 38px !important;
  }

  .text-style-h1 {
    font-size: 40px !important;
    line-height: 38px !important;
  }

  .heading-style-h1 {
    font-size: 40px !important;
    line-height: 38px !important;
  }
}

@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;
}

/* Ensure ::after gradient overlays are above the Spline canvas (z-index: 250) */
.product-wrapper_whats-inside::after {
  z-index: 270 !important;
  pointer-events: none !important;
}

/* Ensure Spline canvas receives hover events */
.whats-inside-spline-wrapper {
  pointer-events: auto !important;
}
.whats-inside-spline-wrapper canvas {
  pointer-events: auto !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: 80px 0;
    margin: 80px 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-style-display u {
  text-decoration: underline;
  font-weight: inherit;
}

/* Pre-roll What's Inside: 2-line headline — same spacing as dosage section (line-height 1.1 + br) */
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display.text-style-caps.max-width-990,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display.text-style-caps.max-width-990 {
  max-width: 990px !important;
  width: 100%;
  line-height: 1.1 !important;
}

.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display {
  display: block;
  line-height: 1.1 !important;
}

.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display .wi-preroll-line1,
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display .wi-preroll-line2,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display .wi-preroll-line1,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display .wi-preroll-line2 {
  display: inline;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* Keep "PRECISELY ADJUSTED" on one line (override 740px webflow wrap) */
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display .wi-preroll-line1,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display .wi-preroll-line1 {
  white-space: nowrap;
}

/* Don't narrow headline box on tablet (default calc(100% - 200px) forces line 1 to wrap) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .product-wrapper_whats-inside.product-cbd-pre-roll .product-margin,
  .product-wrapper_whats-inside[class*="pre-roll"] .product-margin {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display .wi-preroll-line1,
  .product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display .wi-preroll-line1 {
    white-space: normal;
  }
}

.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display strong,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display strong,
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display u,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display u {
  display: inline;
  text-decoration: underline !important;
}

/* What's Inside headline — show admin underline on live */
.product-wrapper_whats-inside .product-margin .text-style-display strong,
.product-wrapper_whats-inside .product-margin .text-style-display u {
  text-decoration: underline !important;
}

/* Kill stray block tags if CMS HTML slips through */
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display p,
.product-wrapper_whats-inside.product-cbd-pre-roll .product-margin .text-style-display div,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display p,
.product-wrapper_whats-inside[class*="pre-roll"] .product-margin .text-style-display div {
  display: inline;
  margin: 0;
  padding: 0;
}

.product-wrapper_whats-inside.product-cbd-pre-roll .wi-preroll-br,
.product-wrapper_whats-inside[class*="pre-roll"] .wi-preroll-br {
  line-height: 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;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: inherit;
  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;
  pointer-events: none;
}

@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;
  }

  /* Move headline up on mobile */
  .product-wrapper_whats-inside .product-margin {
    transform: translateY(-60px) !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;
  pointer-events: none;
}

/* Pin positioning wrapper - 0x0 size, absolute position */
.pin-position {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto;
}

/* 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: 280 !important; /* Above gradient (270) but below pins (300) */
  pointer-events: none;
  min-height: 280px !important;
  height: 280px !important; /* Fixed height - badge overflows visually via overflow:visible */
  overflow: visible !important;
}

/* Desktop Large - smaller product names */
@media screen and (min-width: 1280px) {
  .text-80.all-caps.is-product {
    font-size: 48px !important;
  }
}

/* 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; /* Fixed - badge overflows via overflow:visible */
    overflow: visible !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,
.tabs-content-3 .tab-products .tab-products-body {
  pointer-events: auto !important; /* Allow text selection */
}

.tabs-content-3 .w-tab-pane {
  min-height: 280px !important;
  height: 280px !important;
  overflow: hidden;
}

@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 */
    z-index: 300 !important; /* Above gradient overlay (270) */
  }
  
  .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;
  }

  .tabs-content-3 .tab-products-body {
    margin-bottom: 50px !important;
  }
}

@media (max-width: 767px) {
  .tabs-content-3 {
    margin-top: -350px;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 300 !important;
    pointer-events: none !important;
  }
  
  /* Gradient overlay for better text readability */
  .tabs-content-3::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    width: 200vw;
    height: 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: auto !important;
    height: auto !important;
    overflow: visible;
  }
  
  /* Top-aligned text on mobile */
  .tabs-content-3 .tab-products {
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    padding-top: 24px;
  }
  
  /* 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: -350px;
    margin-left: 16px;
    margin-right: 16px;
    max-width: 100%;
    min-height: auto !important;
    height: auto !important;
  }
  
  .tabs-content-3 .w-tab-pane {
    min-height: auto !important;
    height: auto !important;
  }
}

.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,
.tab-products .tab-products-body {
  font-family: 'Kuniforma', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 1.6;
  margin: 0;
}

.tab-products .tab-products-body strong,
.tab-products .tab-products-body u {
  text-decoration: underline;
}

/* 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,
  .tab-products .tab-products-body {
    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 !important;
  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;
  color: white !important;
}

.nav-shop-btn:active,
.nav-shop-btn:focus,
.nav-shop-btn:visited {
  border-color: #5CE526;
  outline: none;
  color: white !important;
  background: transparent;
}

/* Light background variant - black text */
.nav-shop-btn.is-light,
.sticky-nav .nav-shop-btn {
  color: #070707 !important;
  border-color: #070707;
}

.nav-shop-btn.is-light:hover,
.sticky-nav .nav-shop-btn:hover {
  border-color: #5CE526;
  color: #070707 !important;
}

.nav-shop-btn.is-light:active,
.nav-shop-btn.is-light:focus,
.sticky-nav .nav-shop-btn:active,
.sticky-nav .nav-shop-btn:focus {
  color: #070707 !important;
  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;
}

/* Product description — match CZ Webflow (Kuniforma h4), not serif/italic */
.wrapper-what-is-elevia .product-description {
  max-width: 800px;
  font-family: "Kuniformatest 50", "Kuniforma", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 40px !important;
  letter-spacing: 0.2px;
}

.wrapper-what-is-elevia .product-description h4,
.wrapper-what-is-elevia .product-description p,
.wrapper-what-is-elevia .product-description div,
.wrapper-what-is-elevia .product-description span,
.wrapper-what-is-elevia .product-description em,
.wrapper-what-is-elevia .product-description i {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 991px) {
  .wrapper-what-is-elevia .product-description {
    font-size: clamp(20px, 4vw, 32px) !important;
    line-height: 1.25 !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;
}

/* XL (≥1920px) - extra padding below description text block */
@media (min-width: 1920px) {
  .wrapper-what-is-elevia {
    padding-bottom: 160px !important;
  }
}

/* MD (992–1279px) — extra space below description before What's Inside */
@media (min-width: 992px) and (max-width: 1279px) {
  .wrapper-what-is-elevia {
    padding-bottom: 120px !important;
  }
}

/* MD-LG (1280–1439px) — extra space below description before What's Inside */
@media (min-width: 1280px) and (max-width: 1439px) {
  .wrapper-what-is-elevia {
    padding-bottom: 120px !important;
  }
}

/* Tablet (768–991px) — extra space below description before What's Inside */
@media (min-width: 768px) and (max-width: 991px) {
  .wrapper-what-is-elevia {
    padding-bottom: 120px !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;
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .product-margin .text-style-display {
    padding: 0 24px !important;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .product-margin .text-style-display {
    padding: 0 24px !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;
}

@media (max-width: 991px) {
  .prev-sec-gallery,
  .next-sec-gallery {
    display: none !important;
  }
}

/* ===== VŠCHT SCIENCE BADGE ===== */
/* Mobile/tablet badge (below headline) – hidden on desktop */
.vschat-badge-mobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .vschat-badge-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    z-index: 350;
    position: relative;
    margin-top: 0 !important;
  }
  /* Shrink the headline wrapper's large bottom margin so badge sits close beneath it */
  .product-wrapper_whats-inside > .product-margin {
    margin-bottom: 32px !important;
  }
  /* Hide the desktop badge (inside WhatsInsideTextContent) on mobile/tablet */
  .vschat-badge-row {
    display: none !important;
  }
  /* Clip the Spline canvas at the section boundary */
  .product-wrapper_whats-inside {
    overflow: hidden !important;
  }
  /* Cover the Spline bleed-through into the next section */
  .page-overflow {
    position: relative;
    z-index: 260 !important;
  }
}

/* Mobile only – centre-align badge circle + text + button */
@media screen and (max-width: 767px) {
  .vschat-badge-mobile > div:first-child {
    display: none;
  }
  .vschat-badge-mobile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .vschat-badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .vschat-badge-text .vschat-zjisti-btn {
    justify-content: center;
  }
}

.vschat-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Absolutely positioned below the .tabs-content-3 container */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 20px;
  pointer-events: auto !important;
  z-index: 1;
  width: 100%;
}

.vschat-zjisti-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.vschat-zjisti-btn:hover {
  gap: 10px;
}

.vschat-zjisti-btn svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.vschat-zjisti-btn:hover svg {
  transform: translateX(4px);
}

/* MD (992-1279px) — wider text block, move badge higher, widen badge row, shift pins right */
@media (min-width: 992px) and (max-width: 1279px) {
  .tabs-content-3 {
    max-width: 424px; /* 10% wider than 385px */
  }
  .vschat-badge-row {
    margin-top: -30px;
    width: 440px;
  }
  /* Shift all three pins 65px to the right */
  .pin-position._1 { left: calc(15% + 465px); }
  .pin-position._2 { left: calc(55% + 415px); }
  .pin-position._3 { left: calc(50% + 415px); }
}

/* MD-LG (1280-1439px) — move badge higher so it's not clipped by section bottom */
@media (min-width: 1280px) and (max-width: 1439px) {
  .vschat-badge-row {
    margin-top: -20px;
  }
}

/* LG (1440-1919px) — same treatment */
@media (min-width: 1440px) and (max-width: 1919px) {
  .vschat-badge-row {
    margin-top: -30px;
  }
}

/* ===== VŠCHT MODAL - thin scrollbar ===== */
.vschat-modal-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.vschat-modal-box::-webkit-scrollbar {
  width: 4px;
}
.vschat-modal-box::-webkit-scrollbar-track {
  background: transparent;
}
.vschat-modal-box::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* VŠCHT modal mobile padding: see .vschat-modal-inner.storefront-modal-scroll in src/index.css */

/* ===== 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 + testimonials — headline row and title/body spacing */
@media screen and (min-width: 992px) {
  .faq-headline-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* max-content: column fits longest word/line — fixed px widths caused overflow into gap */
  .faq-headline-title {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 60px 0 0 !important;
  }

  .faq-headline-title .text-style-caps.no-shrink.is-faq,
  .faq-headline-title > .text-style-caps.is-faq,
  .faq-headline-title > h4.is-faq {
    width: max-content !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
  }

  .faq-headline-wrapper .body-medium {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* FAQ headline - desktop default (LG+) */
.text-style-caps.no-shrink.is-faq {
  width: auto;
  max-width: 240px;
  flex: 0 0 auto;
}

.text-style-caps.no-shrink.is-faq br {
  display: block;
  content: '';
}

.text-style-caps.no-shrink.is-faq .faq-headline-underline {
  display: block;
}

.text-style-caps.no-shrink.is-faq strong,
.text-style-caps.no-shrink.is-faq u,
.text-style-caps.no-shrink.is-faq .faq-headline-underline {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
  .faq-headline-title .text-style-caps.no-shrink.is-faq,
  .faq-headline-title > h4.is-faq {
    font-size: 48px !important;
    line-height: 52px !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 280px !important;
  }

  .faq-headline-title {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 280px !important;
    max-width: none !important;
    margin-right: 80px !important;
  }

  .faq-headline-wrapper .body-medium {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0;
  }
}

/* MD-LG: 1280–1439px */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .faq-headline-title {
    margin-right: 60px !important;
  }

  .faq-headline-wrapper .body-medium {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0;
  }
}

/* LG: 1440px+ */
@media screen and (min-width: 1440px) {
  .faq-headline-title {
    margin-right: 60px !important;
  }

  .faq-headline-wrapper .body-medium {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0;
  }
}

/* Tablet: 768–991px — unchanged stacked layout */
@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 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .faq-headline-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .faq-headline-title .text-style-caps.no-shrink.is-faq,
  .faq-headline-title > .text-style-caps.is-faq,
  .faq-headline-title > h4.is-faq {
    max-width: 100% !important;
    width: 100% !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;
    font-size: 40px !important;
    line-height: 38px !important;
  }

  .faq-headline-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .faq-headline-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .faq-headline-wrapper .body-medium {
    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;
}

html[lang='en'] .cart-button::before {
  content: 'Cart';
}

html[lang='en'] a.login-button::before {
  content: 'Log in';
}

/* 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 product tiles - right corners rounded only on desktop */
@media screen and (min-width: 992px) {
  .card-nav-wrapper {
    border-radius: 0 16px 16px 0 !important;
  }
}

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

.tabs-menu {
  width: 100% !important;
}

/* Fix nav-block negative margin causing gap at bottom */
.nav-block {
  margin-top: 0 !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;
}

/* Close button hover - black bg, white icon */
.close-button {
  transition: background-color 0.2s ease !important;
}
.close-button:hover {
  background-color: #000000 !important;
}
.close-button:hover .icon-16,
.close-button:hover .icon-16 svg,
.close-button:hover .icon-16 svg path,
.close-button:hover svg,
.close-button:hover svg path,
.close-button:hover .w-embed,
.close-button:hover .w-embed svg,
.close-button:hover .w-embed svg path {
  color: #ffffff !important;
  stroke: #ffffff !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;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
  }
  .tabs-menu {
    width: 505px !important;
    padding-right: 60px !important;
  }
  .nav-link.is-product {
    width: 425px !important;
    max-width: 425px !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;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
  }
  .tabs-menu {
    padding-right: 60px !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;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
  }
  .tabs-menu {
    padding-right: 60px !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;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
  }
  .tabs-menu {
    padding-right: 54px !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: 5 !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: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !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: 100px !important;
    margin-bottom: 0 !important;
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px)) !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;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !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 48px !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;
  }
  
  .tabs-menu {
    padding-right: 0px !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;
    height: 380px !important;
    min-height: 380px !important;
    border-radius: 20px !important;
  }
}

/* Tablet - taller product tiles */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .mobile-products-view .card-nav-wrapper {
    height: 440px !important;
    min-height: 440px !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: 40px !important;
    line-height: 38px !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;
  }

  .droplines-headline .droplines-headline-underline {
    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 h3 {
  margin: 0 !important;
  padding: 0 !important;
}

.lab-tab h3 + p {
  margin-top: 4px !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;
  }
}

/* ============================================
   PROCESS ACCORDION + GRID LAYOUT
   ============================================ */

.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
  overflow: hidden;
}

.process-grid.no-images .process-carousel-col {
  display: none;
}

.tech-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.process-grid.no-images .process-accordion-col {
  grid-column: 1 / -1;
}

/* Desktop: image column */
.process-carousel-col {
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-self: start;
}

.process-carousel-col > * {
  grid-area: 1 / 1;
}

.process-carousel-wrapper {
  width: 100%;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.process-carousel-wrapper.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.process-carousel-wrapper.is-entering {
  animation: carouselFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes carouselFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Stacked images layout */
.process-stacked-images {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-image-large {
  width: 100%;
  height: 667px;
  overflow: hidden;
  border-radius: 16px;
}

.process-section-3 .process-image-large {
  height: 567px;
}

.process-image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process-image-row {
  display: flex;
  gap: 16px;
}

.process-image-single {
  width: 100%;
  height: 308px;
  overflow: hidden;
  border-radius: 16px;
}

.process-image-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 1200px) {
  .process-image-single {
    height: 260px;
  }
}

.process-image-small {
  flex: 1;
  min-width: 0;
  height: 308px;
  overflow: hidden;
  border-radius: 16px;
}

@media screen and (max-width: 1200px) {
  .process-image-large {
    height: 567px;
  }

  .process-image-row {
    flex-direction: column;
  }

  .process-image-small {
    flex: none;
    height: 260px;
  }
}

.process-image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Accordion column */
.process-accordion-col {
  display: flex;
  flex-direction: column;
}

.process-accordion-item {
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.3s ease;
}

.process-accordion-item:not(.is-active):hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.process-accordion-item:first-child {
  border-top: 1px solid #e0e0e0;
}

.process-accordion-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 40px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 16px;
}


.process-accordion-label {
  flex: 1;
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.2;
}

.process-accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.process-accordion-icon-h {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #070707;
  border-radius: 1px;
}

.process-accordion-icon-v {
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: #070707;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.process-accordion-icon-v.is-open {
  transform: scaleY(0);
  opacity: 0;
}

/* Accordion content - animated */
.process-accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.process-accordion-item.is-active .process-accordion-content {
  max-height: 800px;
  opacity: 1;
}

.process-accordion-body {
  padding: 0 40px 24px 20px;
}


.process-accordion-body .body-small {
  color: #555;
  line-height: 1.6;
}

/* Desktop: show only desktop text, hide responsive content */
.process-accordion-desktop-text {
  display: block;
}
.process-accordion-responsive {
  display: none;
}

/* ============================================
   PROCESS ACCORDION - TABLET & MOBILE
   ============================================ */

@media screen and (max-width: 991px) {
  .section-default:has(.process-grid) .w-container {
    overflow: visible !important;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible !important;
  }

  .process-accordion-col {
    overflow: visible !important;
  }

  .process-accordion-item {
    overflow: visible !important;
  }

  .process-accordion-item.is-active .process-accordion-content {
    overflow: visible !important;
    max-height: 2400px !important;
  }

  .process-carousel-col {
    display: none;
  }

  .process-accordion-desktop-text {
    display: none;
  }

  .process-accordion-responsive {
    display: block;
  }

  .process-accordion-header {
    padding: 40px 20px;
  }

  .process-accordion-item.is-active .process-accordion-header {
    padding: 32px 20px;
  }

  .process-accordion-label {
    font-size: 20px;
    font-weight: 500;
  }

  .about-products h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .about-products .body-small {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
  }

  .lab-grid {
    grid-row-gap: 48px;
  }

  .process-accordion-icon {
    width: 16px;
    height: 16px;
  }

  .process-accordion-icon-h {
    width: 16px;
    height: 1.5px;
  }

  .process-accordion-icon-v {
    width: 1.5px;
    height: 16px;
  }

  .process-accordion-carousel {
    margin-top: 24px;
    margin-left: -68px;
    margin-right: -68px;
  }

  .process-accordion-carousel .swiper2 {
    overflow: hidden !important;
  }

  .process-accordion-carousel .swiper-slide.is-photo,
  .process-accordion-carousel .swiper-slide.is-photo-large {
    width: 70% !important;
    min-width: 70% !important;
    height: 340px !important;
    border-radius: 16px !important;
    overflow: hidden;
  }

  .process-accordion-carousel .swiper-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  .process-accordion-dots {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .process-accordion-dots .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #d1d1d1 !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    margin: 0 4px !important;
  }

  .process-accordion-dots .swiper-pagination-bullet-active {
    background-color: #1a1a1a !important;
    width: 40px !important;
    border-radius: 4px !important;
  }

  .process-accordion-body {
    padding: 0 20px 24px 20px;
  }
}

@media screen and (max-width: 767px) {
  .process-accordion-carousel {
    margin-left: -40px;
    margin-right: -40px;
  }

  .process-accordion-carousel .swiper-slide.is-photo,
  .process-accordion-carousel .swiper-slide.is-photo-large {
    width: 75% !important;
    min-width: 75% !important;
    height: 260px !important;
    border-radius: 12px !important;
  }

  .process-accordion-body {
    padding: 0 16px 20px 16px;
  }

  .process-accordion-label {
    font-size: 20px;
  }

  .process-accordion-header {
    padding: 32px 16px;
    gap: 12px;
  }
}

/* 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-slide-category {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }
  
  .products-mobile-slide-line {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.1 !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;
}

button.btn-contact {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: inherit;
}

.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 {
  pointer-events: none;
  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;
}

.contact-success-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 420px;
  padding: 56px 32px;
  gap: 24px;
  box-sizing: border-box;
}

.contact-success-notice__icon {
  flex: none;
}

.contact-success-notice__icon img {
  display: block;
  width: 89px;
  height: 89px;
}

.contact-success-notice__title {
  margin: 0;
  color: #14142b;
  font-family: "Kuniformatest 70", sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

.contact-success-notice__text {
  margin: 0;
  max-width: 460px;
  color: #434343;
  font-family: "Kuniformatest 50", sans-serif;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.55;
}

@media screen and (max-width: 767px) {
  .contact-success-notice {
    min-height: 320px;
    padding: 40px 20px;
    gap: 20px;
  }
}

@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;
  }
}

/* About page - equal width benefit columns on desktop */
@media screen and (min-width: 992px) {
  .elevia-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .elevia-benefits .benefit-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* VĚDECKÁ RADA - desktop: description below name */
@media screen and (min-width: 992px) {
  .people-main-block {
    flex-flow: column !important;
    align-items: flex-start !important;
  }

  .divider-people {
    display: none !important;
  }

  .wrapper-people .people-name {
    max-width: none !important;
  }

  .wrapper-people .people-name h2 {
    white-space: nowrap !important;
  }
}

/* VĚDECKÁ RADA - 2 columns on tablet only */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .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;
  }

  .dosage-section {
    padding-top: 200px !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-wrapper_whats-inside .text-style-display strong,
.product-wrapper_whats-inside .text-style-display u {
  text-decoration: underline !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;
}

.dosage-section h3.text-style-display strong,
.dosage-section h3.text-style-display u {
  text-decoration: underline !important;
  font-weight: inherit;
}

.dosage-section .dosage-step h4 {
  line-height: 1.3 !important;
  font-size: 1.25rem !important;
}

.dosage-section .dosage-step h4 p {
  margin: 0;
  line-height: inherit;
  display: inline;
}

/* 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 - REMOVED (was development only) */

/* 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 - between Spline (250) and pins (400) */
  .product-wrapper_whats-inside::after {
    content: '' !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 400px !important;
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%) !important;
    pointer-events: none !important;
    z-index: 270 !important;
  }

  /* 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, -100px) !important;
    z-index: 400 !important;
    position: relative !important;
  }

  .product-wrapper_whats-inside .wrapper_whats-inside .pin-position {
    z-index: 500 !important;
    position: absolute !important;
  }

  /* Fine-tune each pin individually (desktop) */
  .product-wrapper_whats-inside .pin-position._1 { transform: translate(-15px, 10px) !important; }
  .product-wrapper_whats-inside .pin-position._2 { transform: translate(-65px, 10px) !important; }
  .product-wrapper_whats-inside .pin-position._3 { transform: translate(-40px, 10px) !important; }

  /* Move inner gradient higher on MD breakpoint */
  .whats-inside-gradient-inner {
    bottom: 300px !important;
  }

  /* 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: 680px !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 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;
  }

  /* Large Breakpoint - Move Spray What's Inside gradient to custom position */
  .product-wrapper_whats-inside.product-shopify_15071729123673::after,
  .product-wrapper_whats-inside.product-cbd-extract-sprej::after {
    top: 755px !important;
  }

  /* DE storefront (MD-LG): move red gradient down ~70px — CS/EN unchanged */
  html.locale-de .product-wrapper_whats-inside::after,
  html[lang='de'] .product-wrapper_whats-inside::after {
    top: 750px !important;
  }

  html.locale-de .product-wrapper_whats-inside.product-shopify_15071729123673::after,
  html.locale-de .product-wrapper_whats-inside.product-cbd-extract-sprej::after,
  html[lang='de'] .product-wrapper_whats-inside.product-shopify_15071729123673::after,
  html[lang='de'] .product-wrapper_whats-inside.product-cbd-extract-sprej::after {
    top: 825px !important;
  }

  html.locale-de .product-wrapper_whats-inside.product-shopify_15897918275929::after,
  html.locale-de .product-wrapper_whats-inside.product-cbd-extract-drops::after,
  html[lang='de'] .product-wrapper_whats-inside.product-shopify_15897918275929::after,
  html[lang='de'] .product-wrapper_whats-inside.product-cbd-extract-drops::after {
    top: 750px !important;
  }

  html.locale-de .product-wrapper_whats-inside .whats-inside-gradient-inner,
  html[lang='de'] .product-wrapper_whats-inside .whats-inside-gradient-inner {
    transform: translateX(-50%) translateY(70px) !important;
  }
}

/* LG: Move inner gradient up 50px (was down 120px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .whats-inside-gradient-inner {
    bottom: -70px !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 viewport width using full-bleed technique */
  .product-wrapper_whats-inside {
    margin-top: 220px !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 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 up by 50px (was 80px down, now 30px down) */
  .tabs-content-3.w-tab-content {
    transform: translateY(30px) !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: 40% !important; /* Changed from 50% to 40% */
    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-specific gradient positions for different bottle heights */
  
  /* Default gradient for all other products - MUST COME FIRST */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    top: 737px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 140px;
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }
  
  /* Gradient for Drops product (Medical line) */
  .product-wrapper_whats-inside.product-shopify_15897918275929::after,
  .product-wrapper_whats-inside.product-cbd-extract-drops::after {
    content: '';
    position: absolute;
    top: 617px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 140px;
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }
  
  /* Gradient for Pre-Roll product */
  .product-wrapper_whats-inside.product-cbd-pre-roll::after {
    content: '';
    position: absolute;
    top: 617px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 140px;
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }

  /* Gradient for Spray product - moved down 120px from Drops */
  .product-wrapper_whats-inside.product-shopify_15071729123673::after,
  .product-wrapper_whats-inside.product-cbd-extract-sprej::after {
    content: '';
    position: absolute;
    top: 737px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 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(-270px) !important; /* LG: 50px higher than -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;
  }

  /* XL Breakpoint - Move Spray What's Inside gradient to custom position */
  .product-wrapper_whats-inside.product-shopify_15071729123673::after,
  .product-wrapper_whats-inside.product-cbd-extract-sprej::after {
    top: 690px !important; /* LG: 50px higher than 740px */
  }
}

/* Override vertical-gradient-bottom position on MD breakpoint */
@media (min-width: 992px) and (max-width: 1279px) {
  .vertical-gradient-bottom {
    top: 2090px !important;
  }
}

/* Override vertical-gradient-bottom position for Drops product on Mobile */
/* Drops - Mobile Small (<480px) */
@media (max-width: 479px) {
  .vertical-gradient-bottom.product-shopify_15897918275929,
  .vertical-gradient-bottom.product-cbd-extract-drops {
    top: 2400px !important; /* Mobile Small */
  }
}

/* Drops - Mobile Large (480-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .vertical-gradient-bottom.product-shopify_15897918275929,
  .vertical-gradient-bottom.product-cbd-extract-drops {
    top: 2130px !important; /* Mobile Large */
  }
}

/* Override vertical-gradient-bottom position for Drops product on Desktop */
@media (min-width: 992px) and (max-width: 1279px) {
  .vertical-gradient-bottom.product-shopify_15897918275929,
  .vertical-gradient-bottom.product-cbd-extract-drops {
    top: 2110px !important; /* Desktop - up 80px from default 2190px */
  }
}

/* Override vertical-gradient-bottom position for Drops product on Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .vertical-gradient-bottom.product-shopify_15897918275929,
  .vertical-gradient-bottom.product-cbd-extract-drops {
    top: 1840px !important; /* Tablet - up 350px from default 2190px */
  }
}

/* Override vertical-gradient-bottom position for Spray product on Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 1790px !important; /* Tablet */
  }
}

/* Override vertical-gradient-bottom position for Spray product on Mobile */
/* Spray - Mobile Small (<480px) */
@media (max-width: 479px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 2340px !important; /* Mobile Small - moved down 150px */
  }
}

/* Spray - Mobile Large (480-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 2100px !important; /* Mobile Large */
  }
}

/* Override vertical-gradient-bottom position for Spray product on Desktop (laptop) breakpoint */
@media (min-width: 992px) and (max-width: 1279px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 2040px !important; /* Desktop */
  }
}

/* Override vertical-gradient-bottom position for Spray product on Large breakpoint */
@media (min-width: 1280px) and (max-width: 1439px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 2000px !important; /* Large */
  }
}

/* Override vertical-gradient-bottom position for Spray product on XL breakpoint */
@media (min-width: 1440px) and (max-width: 1919px) {
  .vertical-gradient-bottom.product-shopify_15071729123673,
  .vertical-gradient-bottom.product-cbd-extract-sprej {
    top: 2090px !important; /* XL */
  }
}

/* XXL Desktop (1920px+) - What's Inside section full width and gradient */
@media (min-width: 1920px) {
  /* Make What's Inside section full viewport width using full-bleed technique */
  .product-wrapper_whats-inside {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Gradient overlay at bottom of What's Inside section */
  .product-wrapper_whats-inside::after {
    content: '';
    position: absolute;
    top: 1087px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 140px;
    background: linear-gradient(to bottom, rgba(227, 17, 36, 0) 0%, rgba(227, 17, 36, 1) 100%);
    pointer-events: none;
    z-index: 100;
  }
}

/* CRITICAL: Override Webflow's display:none on desktop when menu is open */
/* This allows sticky nav OBCHOD button to work on desktop */
@media screen and (min-width: 992px) {
  .nav-block.menu-is-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 100 !important;
  }
}

/* Extra override for XL screens (1280px+) where Webflow also hides it */
@media screen and (min-width: 1280px) {
  .nav-block.menu-is-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 100 !important;
  }
}

/* Animate sticky product stripe sliding out to right when menu opens */
body.menu-open .sticky-product-stripe {
  transform: translateX(calc(100% + 50px)) !important;
  opacity: 0 !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
  pointer-events: none !important;
}

/* Additional fixes for menu positioning */
@media screen and (min-width: 992px) {
  .nav-block.menu-is-open {
    padding: 0 !important;
    min-height: unset !important;
    max-height: none !important;
  }
}

@media screen and (min-width: 1280px) {
  .nav-block.menu-is-open {
    padding: 0 !important;
    min-height: unset !important;
    max-height: none !important;
  }
}

/* CRITICAL: Slide sticky product stripe out to right when menu is open */
body.menu-open .sticky-product-stripe,
html body.menu-open .sticky-product-stripe {
  transform: translateX(calc(100% + 50px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}

/* FIX: Ensure menu covers full viewport with no gaps */
@media screen and (min-width: 992px) {
  .nav-block.menu-is-open {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

@media screen and (min-width: 1280px) {
  .nav-block.menu-is-open {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/* FIX: margin-top is controlled by JS based on where menu was opened from */
.nav-block.menu-is-open {
  /* margin-top is set via JS: 74px when opened from sticky nav, 0 otherwise */
}

/* ULTIMATE FIX: Force nav-block to cover full viewport with highest specificity */
html body .nav-block.menu-is-open,
html body nav .nav-block.menu-is-open,
body .nav-block.menu-is-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  padding: 0 !important;
  margin-top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* top & height set by inline styles to account for top-bar-stripe offset */
}

/* Desktop, Large, XL */
@media screen and (min-width: 992px) {
  html body .nav-block.menu-is-open,
  html body nav .nav-block.menu-is-open,
  body .nav-block.menu-is-open {
    margin-top: 0 !important;
  }
}

/* Tablet and Mobile: Full viewport coverage */
@media screen and (max-width: 991px) {
  html body .nav-block.menu-is-open,
  html body nav .nav-block.menu-is-open,
  body .nav-block.menu-is-open {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* FINAL FIX: Slide sticky product stripe out to right when menu is open */
body.menu-open .sticky-product-stripe.is-visible,
html body.menu-open .sticky-product-stripe.is-visible {
  transform: translateX(calc(100% + 50px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}

/* Force sticky product stripe behind menu when open */
body.menu-open .sticky-product-stripe,
body.menu-open .sticky-product-stripe.is-visible {
  z-index: 1 !important;
}

/* margin-top for XL screens is controlled by JS based on where menu was opened from */

/* Product page USP section - custom padding */
.product-usp-section {
  padding-bottom: 180px !important;
}

@media (max-width: 991px) {
  section.section-default.product-usp-section {
    padding-top: 95px !important;
    padding-bottom: 95px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  section.section-default.product-usp-section {
    padding-top: 95px !important;
    padding-bottom: 95px !important;
  }
}

@media (max-width: 767px) {
  .product-usp-section {
    padding-bottom: 90px !important;
  }
}

/* Narrower body text for 401px - 768px (matching PLNÉ SPEKTRUM section width) */
@media (min-width: 401px) and (max-width: 768px) {
  .product-usp-section .benefit-wrapper .benefit-block .text-align-center,
  .product-usp-section .benefit-wrapper .benefit-block .text-align-center p {
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .product-usp-section .elevia-benefits .benefit-wrapper {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* XL Breakpoint (1440-1919px) - Add more top spacing to Dosage section */
@media (min-width: 1440px) and (max-width: 1919px) {
  .dosage-section {
    padding-top: 180px !important; /* Increased from 120px to 180px (+60px) */
  }
}

/* Instagram Section */

/* Instagram section - contain carousel overflow to prevent page width issues on mobile */
.instagram-section {
  overflow: hidden;
}

/* Instagram headline - match droplines headline size */
.instagram-headline {
  font-size: 48px !important;
  line-height: 1.05 !important;
  margin-bottom: 0px !important;
}

/* Shared tile styles */
.instagram-tile {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  aspect-ratio: 4/5;
}

.instagram-tile:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

.instagram-tile video,
.instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop Grid - 4 columns, visible 992px+ */
.instagram-grid-desktop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Hide carousel on desktop */
.instagram-carousel {
  display: none;
}

/* Desktop breakpoint (992-1279px) */
@media (min-width: 992px) and (max-width: 1279px) {
  .instagram-grid-desktop .instagram-tile {
    aspect-ratio: 4/6.15;
  }
}

/* Large breakpoint (1280-1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .instagram-grid-desktop .instagram-tile {
    aspect-ratio: 4/6.4;
  }
}

/* XL breakpoint (1440px+) - 15% taller tiles */
@media (min-width: 1440px) {
  .instagram-grid-desktop .instagram-tile {
    aspect-ratio: 4/5.75;
  }
}

/* Hide fraction pagination on desktop */
.instagram-fraction-pagination {
  display: none;
}

/* Hide dots pagination on desktop */
.swiper-pagination-instagram-dots {
  display: none;
}

/* Tablet & Mobile (<992px) - hide grid, show carousel */
@media (max-width: 991px) {
  .instagram-grid-desktop {
    display: none;
  }
  
  .instagram-carousel {
    display: block;
    overflow: visible;
    /* Break out: left aligns with container, right extends to viewport edge */
    margin-left: -48px;
    margin-right: calc(-50vw + 50%);
    padding-left: 48px;
  }
  
  /* Override Webflow's fixed .is-photo dimensions for Instagram carousel - match Home page */
  .instagram-carousel .swiper-slide.is-photo {
    width: 379px !important;
    min-width: 379px !important;
    height: auto !important;
  }
  
  .instagram-carousel .instagram-tile {
    aspect-ratio: 4/5;
  }
  
  /* Fraction pagination - top right, matching Home page */
  .instagram-fraction-pagination {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
  
  /* Dots pagination - matching Home page pill-shaped bullets */
  .swiper-pagination-instagram-dots {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 24px !important;
    margin-top: -20px !important;
  }
  
  .swiper-pagination-instagram-dots .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #d1d1d1 !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
  }
  
  .swiper-pagination-instagram-dots .swiper-pagination-bullet-active {
    background-color: #1a1a1a !important;
    width: 40px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }
  
  .instagram-headline {
    font-size: 48px !important;
    line-height: 46px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .instagram-carousel {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
  }
  
  .instagram-carousel .swiper-slide.is-photo {
    width: 280px !important;
    min-width: 280px !important;
  }
  
  .swiper-pagination-instagram-dots {
    margin-top: 0 !important;
  }
  
  .instagram-headline {
    font-size: 40px !important;
    line-height: 38px !important;
  }
}

/* Footer top: equal 50/50 columns on desktop and above */
@media screen and (min-width: 992px) {
  .footer-top-wrapper {
    display: flex !important;
    flex-flow: row !important;
    align-items: center !important;
  }

  .footer-top-wrapper > a {
    flex: 1 1 50% !important;
    text-align: left !important;
  }

  .footer-top-wrapper > a:last-child {
    text-align: right !important;
  }
}


/* Small mobile */
@media (max-width: 479px) {
  .instagram-carousel {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
  }
  
  .instagram-carousel .swiper-slide.is-photo {
    width: 250px !important;
    min-width: 250px !important;
  }
}

/* Science Card - Vědecky podložená receptura */
.science-card {
  display: flex;
  align-items: stretch;
  background: #D6081B;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.product-usp-section .flex-default:has(> .science-card) {
  max-width: none !important;
}

@media (min-width: 1280px) {
  .product-usp-section .flex-default:has(> .science-card) {
    margin-left: -140px !important;
    margin-right: -140px !important;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .product-usp-section .flex-default:has(> .science-card) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 991px) {
  .product-usp-section .flex-default:has(> .science-card) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .product-usp-section .flex-default:has(> .science-card) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 479px) {
  .product-usp-section .flex-default:has(> .science-card) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.science-card-photo {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  min-height: 230px;
  overflow: hidden;
  padding: 40px 0 40px 60px;
}

.science-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}


.science-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px 20px 8px;
  flex: 1;
  min-width: 0;
}

.science-card-headline {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.science-card-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px 0;
}

.science-card-author {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-style: italic;
}

/* Tablet */
@media (max-width: 991px) {
  .science-card {
    max-width: calc(100% - 48px);
    margin: 0 auto;
  }

  .science-card-photo {
    width: 220px;
    min-height: 240px;
  }

  .science-card-content {
    padding: 16px 20px;
  }

  .science-card-headline {
    font-size: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .science-card {
    flex-direction: column;
    max-width: calc(100% - 32px);
    margin: 0 auto;
  }

  .science-card-photo {
    width: 100%;
    min-height: 0;
    height: 260px;
  }

  .science-card-content {
    padding: 20px 16px 24px;
  }

  .science-card-headline {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .science-card-text {
    font-size: 13px;
  }
}

/* ===== BENEFITS MARQUEE STRIPE ===== */

.benefits-marquee-stripe {
  background-color: #E31124;
  padding: 120px 0 120px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

@media (min-width: 992px) and (max-width: 1279px) {
  .benefits-marquee-stripe {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .benefits-marquee-stripe {
    margin-top: 0;
  }
}

.benefits-marquee-overflow {
  overflow: hidden;
  width: 100%;
}

@keyframes benefits-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

.benefits-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: benefits-marquee 25s linear infinite;
}

.benefits-marquee-track:hover {
  animation-play-state: running;
}

.benefits-marquee-track--scroll {
  animation: none !important;
  will-change: transform;
}

.benefits-marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 0 40px;
}

.benefits-marquee-item span {
  font-family: 'Kuniforma', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.benefits-marquee-icon {
  width: 77px;
  height: 77px;
  flex-shrink: 0;
}

.benefits-marquee-dot {
  color: #55EC3B;
  font-size: 8px;
  padding: 0 20px;
  flex-shrink: 0;
  opacity: 0.6;
}

@media (max-width: 767px) {
  .benefits-marquee-stripe {
    padding: 100px 0 100px 0;
  }
  
  .benefits-marquee-item span {
    font-size: 14px;
  }
  
  .benefits-marquee-icon {
    width: 58px;
    height: 58px;
  }

  .benefits-marquee-track {
    animation-duration: 20s;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .benefits-marquee-item span {
    font-size: 15px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .benefits-marquee-item span {
    font-size: 17px;
  }
}

@media (min-width: 1920px) {
  .benefits-marquee-item span {
    font-size: 18px;
  }
}

/* ===== TESTIMONIALS SECTION ===== */

.testimonials-section {
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

.testimonials-overflow {
  overflow: hidden;
  margin-top: 40px;
  width: 100%;
}

@keyframes testimonials-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonials-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonials-marquee 40s linear infinite;
}

.testimonials-track:hover {
  animation-play-state: running;
}

.testimonial-card {
  background-color: #f7f7f7;
  border-radius: 12px;
  padding: 32px;
  min-width: 380px;
  max-width: 380px;
  flex-shrink: 0;
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
  color: #E8A838;
  font-size: 18px;
  line-height: 1;
}

.testimonial-author {
  font-weight: 600;
  font-size: 0.95rem;
  color: #070707;
  margin-bottom: 16px;
}

.testimonial-text {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

/* MD (992–1279px): testimonials headline — 3 lines, no mid-word breaks */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .testimonials-section .faq-headline-title {
    margin-right: 80px !important;
    min-width: 0 !important;
    max-width: 280px !important;
    width: auto !important;
  }

  .testimonials-section .faq-headline-title .text-style-caps.no-shrink.is-faq,
  .testimonials-section .faq-headline-title > h4.is-faq {
    max-width: 280px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .testimonials-section .faq-headline-title .faq-headline-underline,
  .testimonials-section .faq-headline-title strong {
    white-space: nowrap !important;
  }

  /* FAQ headline column — same narrow width as testimonials */
  .faq-section .faq-headline-title {
    margin-right: 80px !important;
    min-width: 0 !important;
    max-width: 280px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .faq-section .faq-headline-title .text-style-caps.no-shrink.is-faq,
  .faq-section .faq-headline-title > h4.is-faq {
    max-width: 280px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .faq-section .faq-headline-title .faq-headline-underline,
  .faq-section .faq-headline-title u {
    white-space: nowrap !important;
  }
}

/* Tablet */
@media screen and (max-width: 991px) {
  .testimonials-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .testimonials-overflow {
    margin-top: 60px;
  }

  .testimonial-card {
    min-width: 340px;
    max-width: 340px;
    padding: 28px;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .testimonials-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .testimonials-overflow {
    margin-top: 40px;
  }

  .testimonial-card {
    min-width: 300px;
    max-width: 300px;
    padding: 24px;
  }

  .testimonials-track {
    gap: 16px;
    animation-duration: 30s;
  }
}

/* Form label smooth animation */
.form-label {
  transition: top 0.2s ease, font-size 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: 8px;
  font-size: 0.75rem;
  transform: translateY(0%);
}

/* Shared form inputs — keep contact/newsletter styling when typing or autofilled */
.form-input:not(:placeholder-shown) {
  background-color: #f9f9f9;
  color: #14142b;
}

.form-input.w-input:focus {
  border: 2px solid #000 !important;
  border-color: #000 !important;
  outline: none;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f9f9f9 inset !important;
  box-shadow: 0 0 0 1000px #f9f9f9 inset !important;
  -webkit-text-fill-color: #14142b !important;
  caret-color: #14142b;
  transition: background-color 5000s ease-in-out 0s;
}

.form-input:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fcfcfc inset !important;
  box-shadow: 0 0 0 1000px #fcfcfc inset !important;
}

/* Newsletter section background */
.newsletter-seciton {
  background-color: #EBEBEC !important;
}

.newsletter-form-slot {
  min-height: 64px;
}

.newsletter-success-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 20px;
  background-color: #eaf9de;
  border-radius: 8px;
  box-sizing: border-box;
}

.newsletter-success-notice__icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #067306;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-success-notice__text {
  margin: 0;
  color: #067306;
  font-family: "Kuniformatest 50", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.newsletter-error-notice {
  margin-top: 12px;
  color: #9e0038;
  font-size: 14px;
  line-height: 1.45;
}

.form-input.warning {
  background-color: #fefce8;
  border: 2px solid #ca8a04;
}

.form-label.warning {
  color: #854d0e;
}

.newsletter-warning-notice {
  margin-top: 12px;
  color: #854d0e;
  font-size: 14px;
  line-height: 1.45;
}

/* Free shipping progress (košík / drawer) */
.free-shipping-meter {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #f7f7f7;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
}

.free-shipping-meter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}

.free-shipping-meter__text {
  flex: 1 1 220px;
  margin: 0;
  font-family: "Kuniformatest 50", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #14142b;
  letter-spacing: 0.02em;
}

.free-shipping-meter__text strong {
  font-weight: 600;
}

.free-shipping-meter__track-column {
  flex: 0 1 240px;
  min-width: 180px;
  width: 100%;
}

.free-shipping-meter__track {
  height: 8px;
  border-radius: 999px;
  background: #e0e0e0;
  overflow: hidden;
  border: 1px solid #c8c8c8;
  box-sizing: border-box;
}

.free-shipping-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: #5ce526;
  transition: width 0.35s ease;
}

.free-shipping-meter__range {
  margin-top: 6px;
  font-size: 12px;
  color: #555;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.free-shipping-meter--complete .free-shipping-meter__fill {
  background: #5ce526;
}

.free-shipping-meter--compact .free-shipping-meter__row {
  flex-direction: column;
}

.free-shipping-meter--compact .free-shipping-meter__track-column {
  max-width: 100%;
}

/* Header cart drawer — no grey card, match previous inline layout */
.free-shipping-meter--bare {
  margin: 8px 0 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.free-shipping-meter--bare .free-shipping-meter__text {
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}

.free-shipping-meter--bare .free-shipping-meter__free-label {
  color: #3aaa1e;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.free-shipping-meter--bare .free-shipping-meter__track {
  height: 6px;
  border: none;
}

.free-shipping-meter--bare .free-shipping-meter__range {
  margin-top: 4px;
  font-size: 11px;
  color: #888;
}

.free-shipping-meter--complete.free-shipping-meter--bare .free-shipping-meter__text {
  color: #3a9e1a;
  font-weight: 600;
}

@media screen and (max-width: 479px) {
  .free-shipping-meter__row {
    flex-direction: column;
  }

  .free-shipping-meter__track-column {
    max-width: 100%;
  }

  .free-shipping-meter__range {
    text-align: left;
  }
}

/* About — Certifications section (philosophy duplicate + logos) */
.section-about-certifications .heading-style-h1 {
  white-space: normal;
}

.section-about-certifications .about-certifications-rows {
  margin-top: 32px;
  width: 100%;
}

.section-about-certifications .info-rows-table__pdf-link {
  flex-shrink: 0;
  font-size: inherit;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: inline-block;
  white-space: nowrap;
}

.section-about-certifications .info-rows-table__pdf-link::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, background-color 0.2s ease;
}

.section-about-certifications .info-rows-table__pdf-link:hover::after {
  transform: scaleX(1);
}

.section-about-certifications .about-certifications-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 72px);
  margin-top: 48px;
  width: 100%;
}

.section-about-certifications .about-certifications-logos img {
  max-height: 88px;
  max-width: min(220px, 30vw);
  width: auto;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 767px) {
  .section-about-certifications .about-certifications-logos {
    gap: 32px;
    margin-top: 40px;
  }

  .section-about-certifications .about-certifications-logos img {
    max-height: 72px;
    max-width: 140px;
  }
}

/* Logo + CMS claim (navigation) */
.logo.logo-with-claim .logo-with-claim-icon {
  height: 32px;
  max-height: 32px;
}

@media screen and (max-width: 600px) {
  .nav-wrapper .logo-with-claim-text.minimal-nav-claim {
    display: none !important;
  }
}