/** Shopify CDN: Minification failed

Line 1614:57 Unexpected ")"
Line 1622:57 Unexpected ")"
Line 1630:57 Unexpected ")"

**/
/* Defensive CSS - High specificity to prevent overrides */
.shopify-section .product-section,
body .product-section,
html .product-section {
  padding: 60px 50px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* Direction Section Styles - High specificity */
.shopify-section .product-section .design-direction-header,
body .product-section .design-direction-header,
html .product-section .design-direction-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.shopify-section .product-section .design-direction-title,
body .product-section .design-direction-title,
html .product-section .design-direction-title {
  color: #663427 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

.shopify-section .product-section .design-direction-inline-content,
body .product-section .design-direction-inline-content,
html .product-section .design-direction-inline-content {
  color: #663427 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  display: inline !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

.shopify-section .product-section .design-direction-content,
body .product-section .design-direction-content,
html .product-section .design-direction-content {
  margin: 0 !important;
  padding: 0 !important;
  /* Allow JavaScript to control visibility - don't force display: none */
}

/* Hide direction content by default, but allow JavaScript override */
.shopify-section .product-section .design-direction-content:not([style*="display: block"]),
body .product-section .design-direction-content:not([style*="display: block"]),
html .product-section .design-direction-content:not([style*="display: block"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Direction Selector Styles - Matching Size Selector Styles */
.shopify-section .product-section .direction-selector,
body .product-section .direction-selector,
html .product-section .direction-selector {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.shopify-section .product-section .direction-options,
body .product-section .direction-options,
html .product-section .direction-options {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.shopify-section .product-section .direction-option,
body .product-section .direction-option,
html .product-section .direction-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border: 1.5px solid #ddd !important;
  background: transparent !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  min-width: 60px !important;
  height: 40px !important;
  border-radius: 0 !important;
  position: relative !important;
}

.shopify-section .product-section .direction-option:hover,
body .product-section .direction-option:hover,
html .product-section .direction-option:hover {
  border-color: #663427 !important;
  background: #f8f8f8 !important;
  transform: translateY(-1px) !important;
}

.shopify-section .product-section .direction-option.selected,
body .product-section .direction-option.selected,
html .product-section .direction-option.selected {
  border-color: #663427 !important;
  background: #663427 !important;
  color: white !important;
}

.shopify-section .product-section .direction-option.selected .direction-label,
body .product-section .direction-option.selected .direction-label,
html .product-section .direction-option.selected .direction-label {
  color: white !important;
}

.shopify-section .product-section .direction-option.disabled,
body .product-section .direction-option.disabled,
html .product-section .direction-option.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f5f5f5 !important;
}

.shopify-section .product-section .direction-label,
body .product-section .direction-label,
html .product-section .direction-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #663427 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
}

.product-section {
  padding: 60px 50px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 100;
  box-sizing: border-box;
  isolation: isolate;
}

.product-section * {
  box-sizing: border-box;
}

/* Override any external button styles */
.product-section .btn,
.product-section .btn:hover,
.product-section .btn:focus,
.product-section .btn:active {
  background-image: none !important;
  position: relative !important;
  transform: none !important;
  text-align: center !important;
  text-indent: 0 !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.product-section .btn::after,
.product-section .btn::before,
.product-section .btn:hover::after,
.product-section .btn:hover::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Breadcrumbs - Defensive styling */
.shopify-section .product-section .breadcrumbs,
body .product-section .breadcrumbs,
html .product-section .breadcrumbs,
.product-section .breadcrumbs {
  font-size: 11px !important;
  color: #663427 !important;
  margin: 0 !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
  padding: 10px 0 0 0 !important;
  padding-top: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 101 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

.breadcrumbs a {
  color: #663427;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: #333;
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 8px;
}

.breadcrumb-current {
  color: #663427;
}

/* Product container */
.shopify-section .product-section .product-container,
body .product-section .product-container,
html .product-section .product-container,
.product-section .product-container {
  display: flex !important;
  gap: 60px !important;
  align-items: flex-start !important;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 101 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  overflow: visible !important;
}

/* Left side - Images - Add sticky positioning */
.shopify-section .product-section .product-images,
body .product-section .product-images,
html .product-section .product-images,
.product-section .product-images {
  flex: 1 !important;
  display: flex !important;
  gap: 20px !important;
  max-width: 580px !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
}

/* Thumbnail images - Desktop Vertical Slider */
@media (min-width: 768px) {
  .shopify-section .product-section .thumbnail-images,
  body .product-section .thumbnail-images,
  html .product-section .thumbnail-images,
  .product-section .thumbnail-images {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    max-height: 550px !important;
    height: 550px !important;
    overflow: hidden !important;
    width: 80px !important;
  }

  /* Fade gradients - only show when scrolling is needed */
  .thumbnail-images.has-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .thumbnail-images.has-scroll.scrolled::before {
    opacity: 1;
  }

  .thumbnail-images.has-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .thumbnail-images.has-scroll.can-scroll-down::after {
    opacity: 1;
  }

  /* SUBTLE SLIDER ARROWS - No circle background */
  .thumb-nav-up,
  .thumb-nav-down {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    z-index: 999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.6 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease !important;
    color: #663427 !important;
    font-size: 14px !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  .thumb-nav-up:hover,
  .thumb-nav-down:hover {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .thumb-nav-up:active,
  .thumb-nav-down:active {
    opacity: 0.8 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .thumb-nav-up {
    margin-bottom: 16px !important;
  }

  .thumb-nav-down {
    margin-top: 16px !important;
  }

  /* Hide arrows when not needed */
  .thumb-nav-up.hidden,
  .thumb-nav-down.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Responsive thumbnail slider heights for different desktop sizes */
  
  /* Medium Desktop: 1024px - 1199px */
  @media (min-width: 1024px) and (max-width: 1199px) {
    .thumbnail-images,
    #thumbnail-container {
      max-height: 370px !important;
      height: 370px !important;
    }
    
    .thumbnail-scroll-container,
    #thumbnail-scroll-container {
      height: 370px !important;
    }
    
    /* Layout rebalancing for medium desktop - give more space to image section */
    .shopify-section .product-section .grid .grid__item.medium-up--two-fifths,
    .shopify-section .product-section .grid .grid__item.medium-up--one-half:first-child {
      width: 55% !important;
      flex: 0 0 55% !important;
    }
    
    .shopify-section .product-section .grid .grid__item.medium-up--three-fifths,
    .shopify-section .product-section .grid .grid__item.medium-up--one-half:last-child {
      width: 45% !important;
      flex: 0 0 45% !important;
    }
    
    .shopify-section .product-section .grid {
      display: flex !important;
      gap: 20px !important;
    }
  }
  
  /* Small Desktop: 768px - 1023px */
  @media (min-width: 768px) and (max-width: 1023px) {
    .thumbnail-images,
    #thumbnail-container {
      max-height: 330px !important;
      height: 330px !important;
    }
    
    .thumbnail-scroll-container,
    #thumbnail-scroll-container {
      height: 330px !important;
    }
    
    /* Layout rebalancing for small desktop - give more space to image section */
    .shopify-section .product-section .grid .grid__item.medium-up--two-fifths,
    .shopify-section .product-section .grid .grid__item.medium-up--one-half:first-child {
      width: 58% !important;
      flex: 0 0 58% !important;
    }
    
    .shopify-section .product-section .grid .grid__item.medium-up--three-fifths,
    .shopify-section .product-section .grid .grid__item.medium-up--one-half:last-child {
      width: 42% !important;
      flex: 0 0 42% !important;
    }
    
    .shopify-section .product-section .grid {
      display: flex !important;
      gap: 15px !important;
    }
  }

  /* Scrollable thumbnails container */
  .thumbnail-images .thumbnail-scroll-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    height: 550px !important;
  }
}

/* Mobile fallback */
@media (max-width: 767px) {
  .shopify-section .product-section .thumbnail-images,
  body .product-section .thumbnail-images,
  html .product-section .thumbnail-images,
  .product-section .thumbnail-images {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Thumbnail styling - Desktop and Mobile */
.thumbnail {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  overflow: hidden;
  background-color: transparent;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
}

/* Desktop specific thumbnail styling */
@media (min-width: 768px) {
  .thumbnail {
    width: 80px !important;
    height: 80px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
  }

  .thumbnail:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  }
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail:hover,
.thumbnail.active {
  border-color: #663427;
}

.main-image {
  flex: 1;
  aspect-ratio: 4/5;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

.placeholder-main-image {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Mobile Image Slider Styles - Hidden by default, shown only on mobile */
.mobile-image-slider {
  display: none;
}

/* Desktop Images - Hidden on mobile */
.desktop-images {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* Mobile Slider Styles */
.slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: transparent;
  z-index: 10001;
}

.slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Slide Indicators */
.slider-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

/* Hide desktop indicators on mobile */
.desktop-only-indicators {
  display: flex;
}

@media (max-width: 767px) {
  .desktop-only-indicators {
    display: none !important;
  }
}

/* Hide slider indicators on medium and small desktop screens */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .desktop-only-indicators,
  .slider-indicators,
  .mobile-image-scroll-indicator {
    display: none !important;
  }
  
  .indicator {
    display: none !important;
  }
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.indicator.active {
  background-color: #663427;
}

/* Mobile Image Scroll Indicator - Hidden by default, shown only on mobile */
.mobile-image-scroll-indicator {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  justify-content: center;
}

.mobile-image-scroll-track {
  width: 100%;
  max-width: 400px;
  height: 3px;
  background: rgba(45, 45, 45, 0.2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.mobile-image-scroll-thumb {
  width: 120px;
  height: 3px;
  background: #2d2d2d;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.2s ease;
}

/* Show mobile scroll indicator on mobile only */
@media (max-width: 767px) {
  .shopify-section .product-section .mobile-image-scroll-indicator,
  body .product-section .mobile-image-scroll-indicator,
  html .product-section .mobile-image-scroll-indicator,
  .product-section .mobile-image-scroll-indicator,
  .mobile-image-scroll-indicator {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
    position: relative !important;
    margin: -10px 0 -10px 0 !important;
    padding: 0 !important;
    z-index: 999 !important;
  }
  
  .product-images {
    order: 1 !important;
    margin-bottom: -50px !important;
  }
  
  .product-details {
    order: 3 !important;
    margin-top: 0 !important;
  }
  
  .product-container {
    gap: 0px !important;
  }
}

/* Right side - Product details */
.shopify-section .product-section .product-details,
body .product-section .product-details,
html .product-section .product-details,
.product-section .product-details {
  flex: 1 !important;
  max-width: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.collection-name {
  font-size: 12px;
  color: #663427;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 400;
}

.product-section .product-title {
  font-size: 40px !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
  color: #663427 !important;
  position: relative !important;
  z-index: 10 !important;
}

.product-price {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #663427;
}

.compare-price {
  text-decoration: line-through;
  color: #999;
  margin-left: 10px;
  font-weight: 400;
}

/* Enhanced Stock Status Styles */
.stock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #663427;
}

.stock-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stock-indicator.in-stock {
  background-color: #33483C;
}

.stock-indicator.out-of-stock {
  background-color: #A85C38;
}

/* Made-to-order styling */
.stock-status.made-to-order #stock-text {
  color: #663427;
  font-weight: 500;
}

.stock-status.made-to-order .stock-indicator {
  background-color: #A85C38;
}

/* Product Description - REMOVED ALL FONT-FAMILY OVERRIDES to use default store font */
.shopify-section .product-section .product-description,
body .product-section .product-description,
html .product-section .product-description,
.product-section .product-description,
#product-description {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  margin-bottom: 30px !important;
  /* REMOVED: font-family override to use default store font */
}

/* Force 14px on ALL elements inside product description but inherit font-family */
.shopify-section .product-section .product-description *,
body .product-section .product-description *,
html .product-section .product-description *,
.product-section .product-description *,
#product-description * {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* Override any possible external styling but inherit font-family */
.product-description p,
.product-description div,
.product-description span,
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6,
.product-description li,
.product-description ul,
.product-description ol,
.product-description strong,
.product-description em,
.product-description b,
.product-description i {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* Extra defensive CSS for the most common overrides but inherit font-family */
[id="product-description"],
[id="product-description"] *,
.product-section [id="product-description"],
.product-section [id="product-description"] * {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* JavaScript-applied CSS classes for maximum enforcement but inherit font-family */
.force-14px-font,
.force-14px-font *,
.force-14px-font-child {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* Mega defensive CSS - target any possible element combinations but inherit font-family */
html body .shopify-section .product-section .product-description,
html body .shopify-section .product-section .product-description *,
html body .shopify-section .product-section #product-description,
html body .shopify-section .product-section #product-description * {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* Ultra-mega defensive CSS - COLLECTION-SPECIFIC OVERRIDES but inherit font-family */
body[class*="collection-throw-pillows"] .product-description,
body[class*="collection-throw-pillows"] .product-description *,
body[class*="collection-throw-pillows"] #product-description,
body[class*="collection-throw-pillows"] #product-description *,
body[class*="collection-placemats"] .product-description,
body[class*="collection-placemats"] .product-description *,
body[class*="collection-placemats"] #product-description,
body[class*="collection-placemats"] #product-description *,
body[class*="collection-runners"] .product-description,
body[class*="collection-runners"] .product-description *,
body[class*="collection-runners"] #product-description,
body[class*="collection-runners"] #product-description *,
.collection-throw-pillows .product-description,
.collection-throw-pillows .product-description *,
.collection-throw-pillows #product-description,
.collection-throw-pillows #product-description *,
.collection-placemats .product-description,
.collection-placemats .product-description *,
.collection-placemats #product-description,
.collection-placemats #product-description *,
.collection-runners .product-description,
.collection-runners .product-description *,
.collection-runners #product-description,
.collection-runners #product-description * {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  /* REMOVED: font-family override to use default store font */
}

/* NUCLEAR OPTION - Override ALL possible CSS combinations but inherit font-family */
* .product-description,
* .product-description *,
* #product-description,
* #product-description *,
[class*="collection"] .product-description,
[class*="collection"] .product-description *,
[class*="collection"] #product-description,
[class*="collection"] #product-description *,
[id*="collection"] .product-description,
[id*="collection"] .product-description *,
[id*="collection"] #product-description,
[id*="collection"] #product-description * {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgb(102, 52, 39) !important;
  /* REMOVED: font-family override to use default store font */
}

/* Limited Time Offer Banner Styles - TRULY DYNAMIC WIDTH */
.limited-offer-banner {
  /* Dynamic width - starts small, grows with content */
  width: fit-content; /* Fit to actual content size */
  min-width: 300px; /* Small minimum for short content */
  max-width: 100%; /* Never exceed container */
  padding: 12px 16px;
  border-radius: 8px;
  margin: 24px 0;
  border: 1px solid rgba(102, 52, 39, 0.1);
  position: relative;
  overflow: visible; /* Allow tooltip to extend outside */
  
  /* Flexbox to properly contain all elements */
  display: inline-flex; /* Use inline-flex for true content-based sizing */
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box; /* Include padding and border in width calculation */
}

.limited-offer-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

/* Vertical stripe on the left */
.offer-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(102, 52, 39, 0.3);
  z-index: 2;
  border-radius: 8px 0 0 8px; /* ADDED: Match the banner's border radius */
  border-top-left-radius: 8px; /* ADDED: Ensure top-left corner is rounded */
  border-bottom-left-radius: 8px;
}

.offer-content {
  display: flex;
  align-items: center;
  justify-content: flex-start !important; /* Force left-align content */
  gap: 8px; /* Adequate gap between elements for proper spacing */
  position: relative;
  z-index: 1;
  padding-left: 0px; /* No left padding to push content to the very left */
  overflow: visible; /* Allow tooltip to extend outside */
  white-space: nowrap; /* Prevent text wrapping to maintain dynamic sizing */
  flex-shrink: 0; /* Don't shrink content - let banner grow to fit */
}

.offer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: -2px; /* Move icon slightly left on desktop */
}

.offer-icon svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.offer-text {
  flex: none; /* Fixed width, no expansion */
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  margin: 0; /* Remove any default margins */
  padding: 0; /* Remove any default padding */
}

.offer-text strong {
  font-weight: 600;
}

/* Limited Time Offer Banner Tooltip - FIXED to appear outside banner */
.limited-offer-banner .info-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  height: 100%;
}

.limited-offer-banner .info-icon {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 500;
  color: #663427;
  background: transparent;
  border: none;
  border-radius: 50%;
}

.limited-offer-banner .tooltip-popup {
  position: absolute;
  bottom: calc(100% + 1px); /* FIXED: More space from icon */
  left: 50%;
  transform: translateX(-50%);
  background: #F5E0CC;
  color: #663427;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  width: auto;
  text-align: center;
  box-shadow: 0 2px 8px rgba(102, 52, 39, 0.15), 0 0 0 1px rgba(102, 52, 39, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 1001; /* HIGHER z-index to ensure it's above banner */
  border: 1px solid rgba(102, 52, 39, 0.1);
  pointer-events: none; /* ADDED: Prevent interaction issues */
}

.limited-offer-banner .tooltip-popup::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #F5E0CC;
}

.limited-offer-banner .info-icon-wrapper .tooltip-popup::before {
  left: calc(50% - 0px); /* Icon is 16px wide, so center is at 8px from left of wrapper */
}

.limited-offer-banner .tooltip-trigger:hover + .tooltip-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px); /* ADDED: Slight movement on hover */
}

.limited-offer-banner .tooltip-popup {
  /* Keep tooltip centered on icon wrapper */
  left: 50%;
  transform: translateX(-50%);
}

.limited-offer-banner .tooltip-popup::before {
  /* Position arrow to align exactly with the center of the 16px icon */
  left: 50%;
  transform: translateX(-50%);
}

/* Horizontal separator line */
.description-separator {
  width: 100%;
  height: 1px;
  background-color: rgba(102, 52, 39, 0.3);
  margin-bottom: 40px;
}

/* Complete the Set Section - Clean design consistent with product page */
.complete-set-section-fixed {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(102, 52, 39, 0.3);
  margin-bottom: 40px;
  padding-bottom: 0;
  width: 100%;
}

/* Header with title and discount badge positioned on the right */
.complete-set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.complete-set-title {
  font-size: 28px;
  font-weight: 400;
  color: #663427;
  margin: 0;
  line-height: 1.2;
}

.complete-set-discount {
  background: #F5C842;
  color: #663427;
  font-size: 12px !important;
  font-weight: 600;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Products container */
.complete-set-products {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

/* Individual product item - Clean design */
.bundle-product-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  position: relative;
}

/* Current Item Badge - Subtle inline style */
.current-item-badge {
  display: inline-block;
  margin-left: 8px;
  background: rgba(102, 52, 39, 0.1);
  color: #663427;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* Product image - Clean minimal styling */
.bundle-product-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.bundle-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

/* Runner products - rectangular image matching content height */
.bundle-product-item.runner-product .bundle-product-image {
  width: 80px;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
}

.bundle-product-item.runner-product .bundle-product-image img {
  aspect-ratio: auto;
  height: 100%;
}

.placeholder-image {
  width: 100%;
  height: 100%;
  background: #E5E5E5;
}

/* Product details */
.bundle-product-details {
  flex: 1;
  min-width: 0;
}

.bundle-product-title {
  font-size: 16px;
  font-weight: 400;
  color: #663427;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

/* Price styling with quantity on the right */
.bundle-product-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  width: 100%;
}

.price-amount {
  font-size: 14px;
  font-weight: 600;
  color: #663427;
}

.price-label {
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
}

/* Quantity display styling - Positioned inline with price */
.bundle-quantity-display {
  margin-top: 0;
}

.quantity-text {
  font-size: 12px;
  color: #663427;
  font-weight: 400;
}

/* Size selector for runners collection products in bundle - Compact inline design */
.bundle-size-variants {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bundle-size-variants-title {
  font-size: 11px;
  color: #663427;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-size-variants-grid {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.bundle-size-variant-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid #ddd;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 32px;
  height: 22px;
  border-radius: 0;
  position: relative;
  font-size: 10px;
  font-weight: 400;
}

.bundle-size-variant-option:hover {
  border-color: #663427;
  background: #f8f8f8;
  transform: translateY(-1px);
}

.bundle-size-variant-option.selected,
.bundle-size-variant-option.active {
  border-color: #663427;
  background: #663427;
  color: white;
}

.bundle-size-variant-option.selected .bundle-size-text,
.bundle-size-variant-option.active .bundle-size-text {
  color: white;
}

.bundle-size-text {
  font-size: 12px;
  font-weight: 500;
  color: #663427;
  text-transform: none;
  letter-spacing: 0.3px;
}

/* Quantity selector styling to match reference */
.bundle-quantity-wrapper {
  position: relative;
  display: inline-block;
  min-width: 60px;
}

.bundle-quantity-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  width: 100%;
  min-width: 60px;
  font-weight: 400;
}

.bundle-quantity-select:disabled {
  background: #F9FAFB;
  color: #9CA3AF;
  cursor: not-allowed;
}

.select-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Bundle summary section - FIXED to match reference */
.bundle-summary-section {
  border-top: 1px solid #E5E7EB;
  padding-top: 20px;
}

.bundle-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.subtotal-label {
  font-size: 14px;
  color: #663427;
  font-weight: 400;
}

.subtotal-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.original-price {
  font-size: 12px;
  color: #663427;
  text-decoration: line-through;
  font-weight: 400;
}

.subtotal-amount {
  font-size: 14px;
  color: #663427;
  font-weight: 600;
}

/* Claim Offer button - EXACTLY matching Buy it now button (pill-shaped border style) */
.claim-offer-button {
  width: 100%;
  background: transparent !important;
  color: #663427 !important;
  border: 1px solid #663427 !important;
  border-radius: 25px;
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.claim-offer-button:hover:not(:disabled) {
  background: #663427 !important;
  color: #F9F5F2 !important;
  border-color: #663427 !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  text-align: center !important;
  text-indent: 0 !important;
}

.claim-offer-button::after,
.claim-offer-button::before {
  display: none !important;
  content: none !important;
}

.claim-offer-button:focus,
.claim-offer-button:active {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #333 !important;
}

/* Color Variants Section - UPDATED WITH SLANTED DIVISIONS */
.color-variants {
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
}

.color-variants-title {
  font-size: 14px;
  color: #363634;
  font-weight: 500;
  letter-spacing:0.5px;
  margin-bottom: 12px;
}

.color-variants-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  min-height: 56px;
  width: 100%;
  margin-left: -8px;
}

.color-variants-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.color-variants-grid::-webkit-scrollbar-track {
  background: transparent;
}

.color-variants-grid::-webkit-scrollbar-thumb {
  background: transparent;
}

.color-variant-option {
  flex: 0 0 auto;
  text-decoration: none;
  padding: 8px;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-variant-option:hover {
  transform: translateY(-2px);
  z-index: 10;
}

.color-variant-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #663427;
  background: transparent;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.color-variant-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0) 60%,
    rgba(0, 0, 0, 0.01) 100%
  );
  pointer-events: none;
  border-radius: 50%;
  z-index: 3;
  opacity: 0.3;
}

.color-variant-circle .circle-segment {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Single color - full circle */
.color-variant-circle .circle-segment:only-child {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
}

/* Two colors - slanted diagonal division */
.color-variant-circle:not(:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(1) {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
  clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%);
}

.color-variant-circle:not(:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(2) {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 25% 100%);
}

/* Three colors - slanted divisions with truly equal visual width */
.color-variant-circle:has(.circle-segment:nth-child(3)) .circle-segment:nth-child(1) {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
  clip-path: polygon(0 0, 50% 0, 16.67% 100%, 0 100%);
}

.color-variant-circle:has(.circle-segment:nth-child(3)) .circle-segment:nth-child(2) {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
  clip-path: polygon(50% 0, 83.33% 0, 50% 100%, 16.67% 100%);
}

.color-variant-circle:has(.circle-segment:nth-child(3)) .circle-segment:nth-child(3) {
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
  clip-path: polygon(83.33% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Alternative approach using transform for better browser support */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  /* Fallback for browsers that don't support clip-path */
  .color-variant-circle:not(:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(1) {
    left: 0;
    width: 50%;
    z-index: 1;
    transform: skewX(-15deg);
    transform-origin: bottom left;
  }

  .color-variant-circle:not(:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(2) {
    right: 0;
    left: auto;
    width: 50%;
    z-index: 1;
    transform: skewX(-15deg);
    transform-origin: bottom right;
  }

  .color-variant-circle:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(1) {
    left: 0;
    width: 33.33%;
    z-index: 1;
    transform: skewX(-15deg);
    transform-origin: bottom left;
  }

  .color-variant-circle:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(2) {
    left: 33.33%;
    width: 33.33%;
    z-index: 1;
    transform: skewX(-15deg);
    transform-origin: center bottom;
  }

  .color-variant-circle:has(.circle-segment:nth-child(3))) .circle-segment:nth-child(3) {
    left: 66.67%;
    width: 33.33%;
    z-index: 1;
    transform: skewX(-15deg);
    transform-origin: bottom right;
  }
}

.color-variant-option:hover .color-variant-circle {
  transform: scale(1.08);
  border-color: #663427;
}

.color-variant-option.selected .color-variant-circle,
.color-variant-option.active .color-variant-circle {
  border: 3px solid #663427;
  transform: scale(1.05);
}

.color-variant-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.color-variant-option.disabled .color-variant-circle {
  filter: grayscale(50%);
}

.color-variant-option[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out 0.5s forwards;
}

.color-variant-option[title]:hover::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.9);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out 0.5s forwards;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.color-variant-option:focus {
  outline: 2px solid #33483C;
  outline-offset: 2px;
  border-radius: 50%;
}

.color-variant-option:focus:not(:focus-visible) {
  outline: none;
}

/* Size Variants Section - NEW */
.size-variants {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.size-variants-title {
  font-size: 14px;
  color: #663427;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin: 0;
}

.size-variants-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.size-variant-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1.5px solid #ddd;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 60px;
  height: 40px;
  border-radius: 0;
  position: relative;
}

.size-variant-option:hover {
  border-color: #663427;
  background: #f8f8f8;
  transform: translateY(-1px);
}

.size-variant-option.selected,
.size-variant-option.active {
  border-color: #663427;
  background: #663427;
  color: white;
}

.size-variant-option.selected .size-text,
.size-variant-option.active .size-text {
  color: white;
}

.size-variant-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
}

.size-text {
  font-size: 14px;
  font-weight: 500;
  color: #663427;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.size-variant-option[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out 0.5s forwards;
}

.size-variant-option[title]:hover::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.9);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out 0.5s forwards;
}

/* Quantity selector */
.quantity-section {
  margin: 30px 0;
}

.quantity-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #663427;
}

.quantity-selector {
  display: flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #ddd;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #663427 !important;
}

.quantity-btn:hover {
  background: #f5f5f5;
}

.quantity-input {
  width: 60px;
  height: 40px;
  border: none;
  text-align: center;
  font-size: 14px;
  background: white;
  color: #663427 !important;
  outline: none;
  -moz-appearance: textfield;
}

.quantity-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

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

/* Subtotal and buttons */
.subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: #663427;
  font-weight: 400;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.btn {
  padding: 15px 30px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center !important;
  text-indent: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
}

.btn:hover {
  cursor: pointer !important;
  transform: none !important;
  text-align: center !important;
  text-indent: 0 !important;
}

.btn * {
  pointer-events: none;
}

.btn svg,
.btn i,
.btn .icon {
  display: none !important;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: transparent !important;
  color: #663427 !important;
  border: 1px solid #663427 !important;
}

.btn-primary:hover:not(:disabled) {
  background: transparent !important;
  border-color: #663427 !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  text-align: center !important;
  text-indent: 0 !important;
}

.btn-secondary {
  background: #663427 !important;
  color: white;
  border: none;
}

.btn-secondary:hover:not(:disabled) {
  background: #4C3935 !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  text-align: center !important;
  text-indent: 0 !important;
}

.btn-secondary::after,
.btn-secondary::before,
.btn-primary::after,
.btn-primary::before {
  display: none !important;
  content: none !important;
}

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #333;
}

.btn-secondary:focus,
.btn-secondary:active {
  border: none !important;
}

/* Enhanced Shipping Info Styles */
.shipping-info {
  font-size: 12px;
  color: #663427 !important;
  margin-bottom: 40px;
  position: relative;
}

.shipping-info.pre-order #shipping-display-text {
  color: #33483C;
  font-weight: 500;
}

.shipping-info.made-to-order #shipping-display-text {
  color: #663427;
  font-weight: 500;
}

.shipping-info .info-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-left: -4px;
}

.shipping-info .info-icon {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 500;
  color: #663427;
  background: transparent;
  border: none;
  border-radius: 50%;
}

.shipping-info .tooltip-popup {
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  background: #F5E0CC;
  color: #663427;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  width: auto;
  text-align: center;
  box-shadow: 0 2px 8px rgba(102, 52, 39, 0.15), 0 0 0 1px rgba(102, 52, 39, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 1000;
  border: 1px solid rgba(102, 52, 39, 0.1);
}

.shipping-info .tooltip-popup::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #F5E0CC;
}

.shipping-info .tooltip-trigger:hover + .tooltip-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(1px);
}

/* Why you'll love section - FIXED: Product title same heading level */
.why-love-section {
  margin-top: 24px;
  padding-top: 30px;
  border-top: 1px solid rgba(102, 52, 39, 0.3);
  margin-bottom: 30px;
}

.why-love-title {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 15px;
  color: #663427;
  line-height: 1.3;
}

/* FIXED: Make product title in "Why you'll love" section same heading level */
.why-love-product-title {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  font-family: inherit !important;
}

/* Ensure no other elements interfere with the heading structure */
.why-love-title p,
.why-love-title div,
.why-love-title span:not(.why-love-product-title) {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

.why-love-text {
  font-size: 14px !important;
  line-height: 1.6;
  color: #663427;
}

.why-love-text p {
  font-size: 14px !important;
  line-height: 1.6;
  margin: 0;
}

.why-love-text * {
  font-size: 14px !important;
}

/* Design Direction section - Matches Color Variants styling */
.design-direction-section {
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.design-direction-title {
  font-size: 14px;
  color: #363634;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.design-direction-content {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.design-direction-content p {
  display: none !important;
}

.design-direction-content p:last-child {
  display: none !important;
}

.design-direction-content * {
  display: none !important;
}

/* Product info sections */
.product-info-section {
  border-bottom: 1px solid rgba(102, 52, 39, 0.3);
  padding: 20px 0;
}

.product-info-section:last-child {
  border-bottom: none;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #663427;
  font-size: 14px;
  transition: color 0.2s ease;
}

.info-header:hover {
  color: #4a2319;
}

.info-header:after {
  content: '+';
  font-size: 20px;
  transition: transform 0.2s, color 0.2s ease;
  color: #663427 !important;
}

.info-header:hover:after {
  color: #4a2319 !important;
}

.info-header.expanded {
  font-weight: 700 !important;
}

.info-header.expanded:after {
  transform: rotate(45deg);
}

.info-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #663427;
}

.info-content *,
.info-content strong,
.info-content b,
.info-content bold,
.info-content h1,
.info-content h2,
.info-content h3,
.info-content h4,
.info-content h5,
.info-content h6,
.info-content p,
.info-content span,
.info-content div {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.info-content a {
  text-decoration: underline !important;
  color: #663427 !important;
}

.info-content.expanded {
  max-height: none;
  overflow: visible;
  padding: 18px 0 8px 0;
}

.info-content p {
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 14px;
}

.info-content p:last-child {
  margin-bottom: 0;
}

/* Add spacing between different bold sections - maximum specificity */
.product-section .info-content strong,
.shopify-section .product-section .info-content strong,
body .product-section .info-content strong,
html .product-section .info-content strong {
  display: block !important;
  margin-top: 40px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: normal !important;
}

.product-section .info-content strong:first-child,
.shopify-section .product-section .info-content strong:first-child,
body .product-section .info-content strong:first-child,
html .product-section .info-content strong:first-child {
  margin-top: 0 !important;
}

/* Maximum specificity for consistent spacing */
.product-section .info-content p + strong,
.shopify-section .product-section .info-content p + strong,
body .product-section .info-content p + strong,
html .product-section .info-content p + strong {
  margin-top: 40px !important;
  padding-top: 0px !important;
}

/* Force paragraphs immediately after strong elements to have no top margin - high specificity - exclude Product Details */
.product-section .info-content:not(#product-details-content) strong + p,
.shopify-section .product-section .info-content:not(#product-details-content) strong + p,
body .product-section .info-content:not(#product-details-content) strong + p,
html .product-section .info-content:not(#product-details-content) strong + p {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

/* Force any element immediately after strong to have minimal top margin - high specificity - exclude Product Details */
.product-section .info-content:not(#product-details-content) strong + *,
.shopify-section .product-section .info-content:not(#product-details-content) strong + *,
body .product-section .info-content:not(#product-details-content) strong + *,
html .product-section .info-content:not(#product-details-content) strong + * {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

/* Add spacing around different content blocks */
.info-content > * + .shipping-delivery-table {
  margin-top: 20px !important;
}

.info-content .shipping-delivery-table + * {
  margin-top: 4px !important;
}

/* Aggressively remove spacing from content after shipping table */
.info-content .shipping-delivery-table + p,
.info-content .shipping-delivery-table + div {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Target any text content that follows the table */
.info-content .shipping-delivery-table ~ * {
  margin-top: 4px !important;
}

/* High specificity override for content after shipping table */
.product-section .info-content .shipping-delivery-table + *,
.shopify-section .product-section .info-content .shipping-delivery-table + *,
body .product-section .info-content .shipping-delivery-table + *,
html .product-section .info-content .shipping-delivery-table + * {
  margin-top: 4px !important;
  padding-top: 0px !important;
}

/* Fix Product Details content wrapping - remove unwanted line breaks */
#product-details-content {
  white-space: normal !important;
  line-height: 1.6 !important;
}

#product-details-content ul,
#product-details-content ol {
  margin: 0 !important;
  padding-left: 16px !important;
}

#product-details-content li {
  margin-bottom: 8px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  display: list-item !important;
  line-height: 1.6 !important;
}

#product-details-content p,
#product-details-content div {
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.6 !important;
}

/* Remove unwanted br tags and force inline content after colons */
#product-details-content br {
  display: none !important;
}

/* Force content to stay inline within list items */
#product-details-content li * {
  display: inline !important;
  white-space: normal !important;
}

/* Specific fix for text nodes after colons */
#product-details-content li::after {
  content: none !important;
}

/* Override any paragraph breaks within list items */
#product-details-content li p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Additional defensive CSS */
.shopify-section .product-section,
.shopify-section .product-section *,
body .product-section,
body .product-section *,
html .product-section,
html .product-section * {
  box-sizing: border-box !important;
}

.product-section .breadcrumbs,
.product-section .product-container,
.product-section .product-images,
.product-section .thumbnail-images,
.product-section .main-image {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.product-section .product-details,
.product-section .collection-name,
.product-section .product-title,
.product-section .product-price,
.product-section .product-form {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.shopify-section .product-section .btn-primary,
body .product-section .btn-primary,
html .product-section .btn-primary,
.product-section .btn-primary {
  background: transparent !important;
  background-color: transparent !important;
  color: #663427 !important;
  border: 1px solid #663427 !important;
}

.shopify-section .product-section .btn-primary:hover,
body .product-section .btn-primary:hover,
html .product-section .btn-primary:hover,
.product-section .btn-primary:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: #663427 !important;
  transition: none !important;
  animation: none !important;
}

.product-section {
  contain: layout style !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.product-section::before,
.product-section::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* Size variants header with size guide inline */
.size-variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;
}

/* Size Guide Section Styles - Now inline with size label */
.size-guide-section {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.size-guide-trigger {
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0;
  color: #663427;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.size-guide-trigger:hover {
  color: #4a251a;
  text-decoration: none;
}

.size-guide-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
  flex-shrink: 0;
  /* High-quality icon rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  object-fit: contain;
  object-position: center;
}

.size-guide-text {
  color: currentColor;
}

/* Size Guide Modal Styles */
.size-guide-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483647 !important; /* Maximum possible z-index value */
  align-items: center !important;
  justify-content: center !important;
  animation: fadeIn 0.3s ease-out;
  background: rgba(0, 0, 0, 0.5) !important; /* Ensure backdrop is visible */
}

/* Only show modal when it has the 'show' class or explicit display style */
.size-guide-modal.show {
  display: flex !important;
}

.size-guide-modal-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important; /* Remove duplicate background */
  cursor: pointer;
  z-index: 2147483646 !important;
}

.size-guide-modal-content {
  position: relative !important;
  background: white !important;
  border-radius: 0px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
  z-index: 2147483647 !important; /* Highest z-index */
}

/* Desktop width increase */
@media (min-width: 1025px) {
  .size-guide-modal-content {
    max-width: 800px;
    width: 85%;
  }
}

.size-guide-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.size-guide-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #663427;
}

.size-guide-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.size-guide-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.size-guide-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
  color: #663427;
  line-height: 1.6;
  font-size: 12px !important;
}

/* Force smaller font sizes with high specificity */
.size-guide-modal .size-guide-modal-content .size-guide-modal-body,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body * {
  font-size: 12px !important;
}

.size-guide-modal .size-guide-modal-content .size-guide-modal-body p {
  font-size: 12px !important;
}

/* Increase font size for bold text in size guide content */
.size-guide-modal .size-guide-modal-content .size-guide-modal-body strong,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body b,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body p strong,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body p b {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.size-guide-modal-body h1,
.size-guide-modal-body h2,
.size-guide-modal-body h3,
.size-guide-modal-body h4,
.size-guide-modal-body h5,
.size-guide-modal-body h6 {
  color: #663427;
  margin-top: 0;
}

.size-guide-modal-body h1,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h1 { font-size: 16px !important; }
.size-guide-modal-body h2,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h2 { font-size: 15px !important; }
.size-guide-modal-body h3,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h3 { font-size: 14px !important; }
.size-guide-modal-body h4,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h4 { font-size: 13px !important; }
.size-guide-modal-body h5,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h5 { font-size: 12px !important; }
.size-guide-modal-body h6,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body h6 { font-size: 11px !important; }

.size-guide-modal-body p {
  margin-bottom: 16px;
}

.size-guide-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.size-guide-modal-body th,
.size-guide-modal-body td,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body th,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 11px !important;
}

.size-guide-modal-body th {
  background: #f9fafb;
  font-weight: 600;
}

/* Size guide specific table styles - matching shipping table */
.size-guide-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 0 0 !important;
  font-family: inherit !important;
  background: #fff !important;
  border: 1px solid #663427 !important;
  table-layout: fixed !important;
}

.size-guide-table th,
.size-guide-table td,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td {
  border: 1px solid #663427 !important;
  padding: 12px 12px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #663427 !important;
}

.size-guide-table th,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th {
  background-color: #eae1d8 !important;
  font-weight: 600 !important;
  color: #663427 !important;
  text-transform: none !important;
}

.size-guide-table td,
.size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td {
  background-color: #f4f0ed !important;
  color: #663427 !important;
  font-weight: 400 !important;
}

/* Responsive size guide table styling - increased vertical padding on mobile */
@media (max-width: 1024px) {
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td,
  .size-guide-table th,
  .size-guide-table td {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 10px 10px !important;
  }
}

@media (max-width: 767px) {
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td,
  .size-guide-table th,
  .size-guide-table td {
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 9px 8px !important;
  }
}

@media (max-width: 640px) {
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td,
  .size-guide-table th,
  .size-guide-table td {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding: 8px 7px !important;
  }
}

@media (max-width: 480px) {
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td,
  .size-guide-table th,
  .size-guide-table td {
    font-size: 8px !important;
    line-height: 1.1 !important;
    padding: 7px 6px !important;
  }
  
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table,
  .size-guide-table {
    margin: 8px 0 0 0 !important;
  }
}

@media (max-width: 360px) {
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table th,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body .size-guide-table td,
  .size-guide-table th,
  .size-guide-table td {
    font-size: 7px !important;
    line-height: 1.0 !important;
    padding: 6px 5px !important;
  }
}

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

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

/* MOBILE OPTIMIZATION STYLES - ADD THESE TO EXISTING CSS */

/* REDUCE GAP BETWEEN IMAGE SLIDER AND COLLECTION NAME ON MOBILE */
@media screen and (max-width: 767px) {
  .product-section .product-details .collection-name {
    margin-top: -25px !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
  }
}

/* Mobile responsive adjustments for banner - EXCLUDE TABLETS */
@media (max-width: 767px) {
  /* Main product section mobile adjustments */
  .shopify-section .product-section,
  body .product-section,
  html .product-section,
  .product-section {
    padding: 30px 25px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  /* Stack product container vertically on mobile */
  .product-container {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Product images adjustments for mobile - Make sticky starting from breadcrumb level */
  .product-images {
    position: sticky !important;
    top: -40px !important;
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
    padding: 5px 0 0 0 !important;
    margin: 0 !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  
  /* Hide desktop images on mobile, show slider */
  .desktop-images {
    display: none !important;
  }
  
  .mobile-image-slider {
    display: block !important;
    z-index: 1 !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Mobile Progress Bars - Like Best_Seller section */
  .mobile-progress-bars {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex !important;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    opacity: 1;
    z-index: 10;
  }
  
  .mobile-progress-line {
    width: 60px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    display: block;
  }
  
  .mobile-progress-line.active {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .mobile-progress-fill {
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
    border-radius: 2px;
  }
  
  .mobile-progress-line.active .mobile-progress-fill {
    width: 100%;
  }
  
  /* Product details adjustments for mobile - Enhanced hiding behind image */
  .product-details {
    order: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: -1 !important;
    position: relative !important;
    margin-top: -30px !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  
  /* Mobile breadcrumbs - Lower z-index so they hide behind cart overlay */
  .breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 15px !important;
    padding-top: 0 !important;
    text-align: left !important;
    z-index: 10 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  /* Force all mobile product page elements to stay behind cart overlay */
  .product-section {
    z-index: 5 !important;
  }
  
  .product-images {
    z-index: 5 !important;
  }
  
  .mobile-image-slider {
    z-index: 5 !important;
  }
  
  .slider-container {
    z-index: 5 !important;
  }
  
  /* Reset any problematic z-index values on mobile */
  .product-section > * {
    position: relative !important;
  }
  
  /* Enhanced hiding behavior for product content when scrolling */
  .product-section .product-title,
  .product-section .product-price,
  .product-section .product-form,
  .product-section .product-description,
  .product-section .size-variants,
  .product-section .color-variants,
  .product-section .bundle-section,
  .product-section .shipping-info {
    z-index: -1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  .quantity-selector {
    z-index: 1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  /* Mobile product title */
  .product-section .product-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin: 20px 0 !important;
    text-align: left !important;
  }
  
  /* Equal spacing for mobile product info elements */
  .product-price {
    margin: 20px 0 !important;
  }
  
  .color-variants {
    margin: 16px 0 16px 0 !important;
  }
  
  .size-variants {
    margin: 16px 0 16px 0 !important;
  }
  
  /* Mobile size variants header - reduce gap */
  .size-variants-header {
    margin-bottom: 0px !important;
  }
  
  /* Mobile size selectors - make smaller */
  .size-variant-option {
    padding: 4px 6px !important;
    min-width: 32px !important;
    height: 26px !important;
    font-size: 11px !important;
    border: 1.5px solid #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  /* Ensure unselected options are clearly inactive */
  .size-variant-option:not(.selected):not(.active) {
    border-color: #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  .size-variant-option:not(.selected):not(.active) .size-text {
    color: #333 !important;
  }
  
  .size-variant-option.selected,
  .size-variant-option.active {
    border-color: #663427 !important;
    background: #663427 !important;
    color: white !important;
  }
  
  .size-variant-option.selected .size-text,
  .size-variant-option.active .size-text {
    color: white !important;
  }
  
  .quantity-selector {
    margin: 20px 0 10px 0 !important;
  }
  
  /* Subtotal spacing - reduce gap to buttons */
  .subtotal {
    margin: 10px 0 8px 0 !important;
  }
  
  /* Button spacing adjustments for mobile */
  .product-form .btn {
    margin: 10px 0 !important;
  }
  
  .cta-buttons .btn:first-child {
    margin-bottom: 8px !important;
  }
  
  .cta-buttons .btn:last-child {
    margin-top: 0 !important;
  }
  
  .shipping-info {
    margin: 20px 0 !important;
  }
  
  .bundle-section {
    margin: 20px 0 !important;
  }
  
  /* Bundle section button spacing */
  .bundle-subtotal-row {
    margin-bottom: 8px !important;
  }
  
  .claim-offer-button {
    margin-top: 8px !important;
  }
  
  .product-description {
    margin: 20px 0 !important;
  }
  
  /* Mobile collection name */
  .collection-name {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    text-align: left !important;
  }
  
  /* Mobile product price */
  .product-price {
    font-size: 16px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }
  
  /* Mobile stock status */
  .stock-status {
    margin-bottom: 20px !important;
    font-size: 13px !important;
  }
  
  /* Mobile product description */
  .product-description,
  #product-description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  
  /* Mobile color variants section */
  .color-variants {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .color-variants-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .color-variants-grid {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  
  /* Mobile size variants section */
  .size-variants {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .size-variants-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .size-variants-grid {
    justify-content: flex-start !important;
  }
  
  /* Mobile size guide header - same layout as desktop */
  .size-variants-header {
    align-items: center !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }
  
  .size-guide-section {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  /* Reduce horizontal line gap to match offer banner spacing */
  .description-separator {
    margin-bottom: 20px !important;
  }

  /* Mobile quantity section */
  .quantity-section {
    margin: 10px 0 20px 0 !important;
  }
  
  .quantity-label {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }
  
  /* Mobile subtotal */
  .subtotal {
    font-size: 13px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }
  
  /* Mobile CTA buttons */
  .cta-buttons {
    gap: 8px !important;
    margin-bottom: 15px !important;
  }
  
  .btn {
    padding: 12px 20px !important;
    font-size: 13px !important;
    width: 100% !important;
  }
  
  /* Mobile shipping info */
  .shipping-info {
    font-size: 11px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  
  /* Add gap between shipping text and tooltip icon on mobile */
  .shipping-info .info-icon-wrapper {
    margin-left: -2px !important;
  }
  
  /* Mobile why love section */
  .why-love-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .why-love-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  
  .why-love-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Mobile design direction section */
  .design-direction-section {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .design-direction-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .design-direction-content {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .why-love-text p,
  .why-love-text * {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  .product-description {
    margin: 0 0 16px 0 !important;
  }
  
  /* Mobile info sections - Equal spacing above and below */
  .product-info-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .info-header {
    font-size: 13px !important;
    text-align: left !important;
    margin: 15px 0 8px 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure border doesn't add extra spacing */
  .product-info-section {
    border-bottom-width: 1px !important;
    box-sizing: border-box !important;
  }
  
  .info-content {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding-top: 12px !important;
    text-align: left !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  
  .info-content *,
  .info-content strong,
  .info-content b,
  .info-content bold,
  .info-content h1,
  .info-content h2,
  .info-content h3,
  .info-content h4,
  .info-content h5,
  .info-content h6,
  .info-content p,
  .info-content span,
  .info-content div {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-height: none !important;
  }
  
  .info-content a {
    text-decoration: underline !important;
    color: #663427 !important;
  }
  
  .info-content.expanded {
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 0 6px 0 !important;
  }
  
  .info-content:not(.expanded) {
    padding-top: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  .info-content p {
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
  }
  
  .info-content p:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Mobile spacing for strong elements - maximum specificity */
  .product-section .info-content strong,
  .shopify-section .product-section .info-content strong,
  body .product-section .info-content strong,
  html .product-section .info-content strong {
    display: block !important;
    margin-top: 32px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: normal !important;
  }
  
  .product-section .info-content strong:first-child,
  .shopify-section .product-section .info-content strong:first-child,
  body .product-section .info-content strong:first-child,
  html .product-section .info-content strong:first-child {
    margin-top: 0 !important;
  }

  /* Mobile: Maximum specificity for consistent spacing */
  .product-section .info-content p + strong,
  .shopify-section .product-section .info-content p + strong,
  body .product-section .info-content p + strong,
  html .product-section .info-content p + strong {
    margin-top: 32px !important;
    padding-top: 0px !important;
  }
  
  /* Mobile: Force elements after strong to have no top margin - high specificity - exclude Product Details */
  .product-section .info-content:not(#product-details-content) strong + p,
  .shopify-section .product-section .info-content:not(#product-details-content) strong + p,
  body .product-section .info-content:not(#product-details-content) strong + p,
  html .product-section .info-content:not(#product-details-content) strong + p {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  
  .product-section .info-content:not(#product-details-content) strong + *,
  .shopify-section .product-section .info-content:not(#product-details-content) strong + *,
  body .product-section .info-content:not(#product-details-content) strong + *,
  html .product-section .info-content:not(#product-details-content) strong + * {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  
  /* Mobile complete set section */
  .complete-set-section-fixed {
    margin-top: 25px !important;
    padding-top: 20px !important;
    margin-bottom: 25px !important;
  }
  
  .complete-set-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  .complete-set-title {
    font-size: 20px !important;
    text-align: left !important;
  }
  
  .complete-set-discount {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  
  .complete-set-products {
    gap: 15px !important;
    margin-bottom: 16px !important;
  }
  
  .bundle-product-item {
    gap: 12px !important;
    padding: 0 !important;
  }
  
  .bundle-product-image {
    width: 60px !important;
    height: 60px !important;
  }
  
  .bundle-product-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .bundle-product-price {
    font-size: 13px !important;
    gap: 4px !important;
  }
  
  .current-item-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Mobile bundle summary */
  .bundle-summary-section {
    padding-top: 15px !important;
  }
  
  .bundle-subtotal-row {
    margin-bottom: 15px !important;
  }
  
  .subtotal-label,
  .subtotal-amount {
    font-size: 13px !important;
  }
  
  .claim-offer-button {
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
  
  /* Mobile bundle size variants */
  .bundle-size-variants {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }
  
  .bundle-size-variants-title {
    font-size: 10px !important;
  }
  
  .bundle-size-variants-grid {
    gap: 3px !important;
  }
  
  .bundle-size-variant-option {
    padding: 1px 3px !important;
    min-width: 25px !important;
    height: 16px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }
  
  .bundle-size-text {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .limited-offer-banner {
    min-width: 300px; /* Moderate minimum on tablet */
    max-width: 100%; /* Full width on mobile if needed */
    padding: 10px 14px;
    margin: 20px 0;
    border-radius: 6px;
  }
  
  .offer-content {
    white-space: nowrap; /* Keep content in one line for dynamic sizing */
  }
  
  .offer-content {
    gap: 6px; /* Reduced gap for tablet */
    padding-left: 6px;
  }
  
  .offer-icon {
    width: 28px;
    height: 28px;
    margin-left: 0; /* Reset icon position for tablet */
  }
  
  .offer-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .offer-text {
    font-size: 12px;
  }
  
  .offer-info-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  
  .offer-stripe {
    width: 3px;
    border-radius: 6px 0 0 6px;
  }

  /* Mobile responsive adjustments for tooltip */
  .limited-offer-banner .tooltip-popup {
    white-space: normal;
    max-width: calc(100vw - 40px);
    width: max-content;
    min-width: 250px;
  }

  /* Mobile responsive adjustments */
  .size-guide-modal-content {
    width: 95%;
    margin: 20px;
    max-height: calc(100vh - 40px);
  }
  
  .size-guide-modal-header {
    padding: 16px 20px;
  }
  
  .size-guide-modal-title {
    font-size: 16px;
  }
  
  .size-guide-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .size-guide-modal-close svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .size-guide-modal-body {
    padding: 20px;
    max-height: calc(100vh - 120px);
    font-size: 11px !important;
  }
  
  /* Force smaller font sizes on mobile with high specificity */
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body *,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p {
    font-size: 11px !important;
  }
  
  /* Increase font size for bold text on mobile */
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body strong,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body b,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p strong,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p b {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  
  /* Force modal to be on top on mobile */
  .size-guide-modal {
    z-index: 2147483647 !important;
    position: fixed !important;
  }
  
  .size-guide-modal-content {
    z-index: 2147483647 !important;
    position: relative !important;
  }
}

@media (max-width: 480px) {
  .product-section {
    padding: 30px 20px !important;
  }
  
  /* Force gap reduction on smaller screens */
  .product-container {
    gap: 0px !important;
  }
  
  .mobile-image-slider {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .product-details {
    margin-top: -40px !important;
    padding-top: 0 !important;
  }
  
  .collection-name {
    padding-top: 0 !important;
    margin-bottom: 8px !important;
  }
  
  .product-section .product-title {
    font-size: 32px !important;
    margin: 0 0 8px 0 !important;
  }
  
  .price-container {
    margin: 0 !important;
  }
  
  .product-price {
    margin: 0 0 8px 0 !important;
  }
  
  .inventory-status {
    margin: 0 0 16px 0 !important;
  }
  
  .color-variants-grid,
  .size-variants-grid {
    gap: 6px !important;
  }
  
  .color-variant-circle {
    width: 32px !important;
    height: 32px !important;
  }
  
  .size-variant-option {
    padding: 4px 6px !important;
    min-width: 32px !important;
    height: 26px !important;
    font-size: 11px !important;
    border: 1.5px solid #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  /* Ensure unselected options are clearly inactive */
  .size-variant-option:not(.selected):not(.active) {
    border-color: #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  .size-variant-option:not(.selected):not(.active) .size-text {
    color: #333 !important;
  }
  
  .size-variant-option.selected,
  .size-variant-option.active {
    border-color: #663427 !important;
    background: #663427 !important;
    color: white !important;
  }
  
  .size-variant-option.selected .size-text,
  .size-variant-option.active .size-text {
    color: white !important;
  }
  
  .complete-set-title {
    font-size: 18px !important;
  }
  
  /* Why You'll Love section mobile styles */
  .why-love-title {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
  
  /* Expandable section mobile styles - Equal spacing */
  .product-info-section {
    padding: 10px 0 10px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  .product-info-section:first-of-type {
    margin-top: 0 !important;
  }
  
  .info-header {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: 1 !important;
  }
  
  .info-header * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  
  /* Ensure consistent spacing from horizontal line to color/size sections */
  .product-section .color-variants,
  body .color-variants,
  html .color-variants {
    margin: 8px 0 30px 0 !important;
  }
  
  .product-section .size-variants,
  body .size-variants,
  html .size-variants {
    margin: 8px 0 15px 0 !important;
  }
  
  .bundle-product-image {
    width: 50px !important;
    height: 50px !important;
  }
  
  .bundle-product-title {
    font-size: 13px !important;
  }

  .limited-offer-banner {
    width: 100%; /* Full width of parent container */
    max-width: 100%; /* Ensure it matches the width */
    min-width: unset; /* Remove minimum width constraint */
    padding: 12px 16px; /* Adequate internal padding */
    margin: 0 0 20px 0; /* No side margins - let it align with content */
    height: auto; /* Allow height to grow as needed */
    min-height: auto; /* No minimum height constraint */
    box-sizing: border-box; /* Include padding in width */
    overflow: hidden; /* Prevent content overflow */
  }
  
  .offer-content {
    display: block; /* Use block layout for natural text flow */
    padding-left: 8px; /* Padding from left stripe */
    width: 100%; /* Take full banner width */
    box-sizing: border-box; /* Include padding in width */
    line-height: 1.4; /* Good line height for readability */
    position: relative; /* For absolute positioning of tooltip */
  }
  
  .offer-text {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: table-cell !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
  }
  
  /* Position tooltip right next to text */
  .offer-text .info-icon-wrapper {
    display: inline !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
  }
  
  .offer-icon {
    display: table-cell !important;
    width: 36px !important;
    height: 28px !important;
    vertical-align: middle !important;
    text-align: center !important;
    padding-right: 8px !important;
  }

  .offer-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Two-column layout with text wrapping */
  .limited-offer-banner {
    display: table !important;
    width: 100% !important;
    min-height: 32px !important;
    line-height: 1.3 !important;
  }

  /* Fix tooltip icon vertical centering on mobile */
  .limited-offer-banner .info-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
  }
  
  .limited-offer-banner .info-icon {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important; /* Match height for perfect centering */
    font-size: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .offer-text {
    font-size: 12px;
    line-height: 1.3;
  }
  
  .offer-main-text {
    font-size: 12px;
    display: inline; /* Keep inline for natural flow */
    white-space: normal;
    word-wrap: break-word;
  }
  
  .offer-sub-text {
    font-size: 11px;
    display: inline; /* Keep inline for natural flow */
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* Add space between main and sub text when they wrap */
  .offer-main-text + .offer-sub-text::before {
    content: " ";
    white-space: pre;
  }
  
  .offer-stripe {
    width: 2px;
    border-radius: 6px 0 0 6px;
  }

  .limited-offer-banner .tooltip-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 65px;
    right: auto;
    transform: none;
    max-width: calc(100vw - 40px);
    width: 150px;
    font-size: 11px;
    padding: 10px 12px;
    background: #F5E0CC;
    color: #663427;
    border-radius: 6px;
    line-height: 1.4;
    white-space: normal;
    z-index: 1001;
  }
  
  .limited-offer-banner .tooltip-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 60px !important;
    transform: none;
    border: 6px solid transparent;
    border-top-color: #F5E0CC;
  }
  
  .shipping-info .tooltip-popup {
    max-width: 200px;
    font-size: 10px;
    padding: 6px 8px;
    line-height: 1.3;
  }

  .size-guide-trigger {
    font-size: 13px;
  }
  
  .size-guide-icon {
    width: 20px;
    height: 20px;
  }
}

/* Extra small mobile devices (320px and below) */
@media (max-width: 320px) {
  .product-section {
    padding: 30px 20px !important;
  }
  
  .product-section .product-title {
    font-size: 24px !important;
  }
  
  .color-variants-grid,
  .size-variants-grid {
    gap: 6px !important;
  }
  
  .color-variant-circle {
    width: 32px !important;
    height: 32px !important;
  }
  
  .size-variant-option {
    padding: 4px 6px !important;
    min-width: 32px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  
  .complete-set-title {
    font-size: 18px !important;
  }
  
  .bundle-product-image {
    width: 50px !important;
    height: 50px !important;
  }
  
  .bundle-product-title {
    font-size: 13px !important;
  }
}

/* Landscape mobile orientation */
@media (max-width: 767px) and (orientation: landscape) {
  .product-container {
    flex-direction: row !important;
    gap: 20px !important;
  }
  
  .product-images {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
  
  .product-details {
    flex: 1 !important;
    max-width: 55% !important;
  }
  
  .product-section {
    padding: 20px 25px !important;
  }
}

/* Touch-friendly improvements for mobile */
@media (max-width: 767px) {
  .color-variant-option {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }
  
  .size-variant-option {
    touch-action: manipulation !important;
    /* Size set by more specific media queries below */
  }
  
  .bundle-size-variant-option {
    min-height: 20px !important;
    min-width: 30px !important;
    height: 20px !important;
    padding: 2px 4px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    touch-action: manipulation !important;
  }
  
  .quantity-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    width: 44px !important;
    touch-action: manipulation !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  .quantity-input {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    border: none !important;
    background: white !important;
  }
  
  .btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  
  .info-header {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
  }
  
  .thumbnail {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }
}

/* Mobile-specific font loading and performance */
@media (max-width: 767px) {
  .product-section * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  
  /* Optimize images for mobile */
  .main-image img,
  .thumbnail img,
  .bundle-product-image img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
  
  /* Reduce motion for mobile if user prefers */
  @media (prefers-reduced-motion: reduce) {
    .color-variant-option,
    .size-variant-option,
    .thumbnail,
    .btn {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
  }
}

/* RESPONSIVE TOOLTIP POSITIONING FOR SPECIFIC MOBILE SCREENS */

/* iPhone 14 Pro Max: 430x932 */
@media (max-width: 430px) and (min-width: 428px) {
  .offer-text .info-icon-wrapper {
    margin-left: 6px !important;
  }
}

/* Samsung Galaxy S8+: 428x926 */
@media (max-width: 428px) and (min-width: 412px) {
  .offer-text .info-icon-wrapper {
    margin-left: 6px !important;
  }
}

/* Pixel 7: 412x915 */
@media (max-width: 412px) and (min-width: 390px) {
  .offer-text .info-icon-wrapper {
    margin-left: 5px !important;
  }
}

/* iPhone 12/13/14: 390x844 */
@media (max-width: 390px) and (min-width: 360px) {
  .offer-text .info-icon-wrapper {
    margin-left: 5px !important;
  }
}

/* Galaxy S20: 360x740, Galaxy A51: 360x640 */
@media (max-width: 360px) and (min-width: 280px) {
  .offer-text .info-icon-wrapper {
    margin-left: 4px !important;
  }
}

/* Very small screens: 280x653 */
@media (max-width: 280px) {
  .offer-text {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  
  .offer-content {
    gap: 3px !important;
  }
  
  .limited-offer-banner .tooltip-popup {
    max-width: calc(100vw - 30px);
    min-width: 140px;
    font-size: 10px;
    padding: 6px 8px;
    line-height: 1.2;
  }
}

/* Handle text overflow on very small screens */
@media (max-width: 360px) {
  .offer-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  
  .offer-content {
    gap: 4px !important;
  }
  
  .limited-offer-banner {
    padding: 10px 12px !important;
  }
}

/* High contrast mode support for banner */
@media (prefers-contrast: high) {
  .limited-offer-banner {
    border: 2px solid currentColor;
  }
  
  .offer-info-icon {
    border: 2px solid currentColor;
    background: transparent;
  }
  
  .offer-stripe {
    background: currentColor;
  }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
  /* Force gap reduction */
  .product-container {
    gap: 0px !important;
  }
  
  .mobile-image-slider {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .product-details {
    margin-top: -40px !important;
    padding-top: 0 !important;
  }
  
  .collection-name {
    padding-top: 0 !important;
  }
  
  .color-variants {
    margin: 12px 0 30px 0;
    align-items: center;
    text-align: center;
  }

  .color-variants-title {
    text-align: center;
    font-size: 13px;
  }

  .color-variants-grid {
    gap: 8px;
    justify-content: center;
    padding: 0;
    min-height: 48px;
  }

  .color-variant-option {
    padding: 8px;
    min-width: 64px;
  }

  .color-variant-circle {
    width: 36px;
    height: 36px;
  }

  .color-variant-option:hover .color-variant-circle {
    transform: scale(1.1);
  }

  .color-variant-option[title]:hover::before {
    bottom: -30px;
    font-size: 11px;
    padding: 4px 8px;
  }

  .size-variants {
    margin: 12px 0 15px 0;
    align-items: center;
    text-align: center;
  }

  .size-variants-title {
    text-align: center;
    font-size: 13px;
  }

  .size-variants-grid {
    justify-content: center;
  }
}

@media (max-width: 374px) {
  .color-variants-grid {
    gap: 6px;
    padding: 0;
    min-height: 44px;
  }

  .color-variant-option {
    padding: 6px;
    min-width: 56px;
  }

  .color-variant-circle {
    width: 32px;
    height: 32px;
  }

  .color-variant-option:hover .color-variant-circle {
    transform: scale(1.1);
  }

  .color-variants-title {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .size-variant-option {
    padding: 6px 10px;
    min-width: 45px;
    height: 32px;
  }

  .size-text {
    font-size: 12px;
  }

  .size-variants-title {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-variant-circle,
  .color-variant-option,
  .size-variant-option {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  
  .color-variant-option:hover .color-variant-circle {
    transform: scale(1.02);
  }
  
  .color-variant-option:hover,
  .size-variant-option:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .color-variant-circle {
    border-width: 2px;
    border-color: #000;
  }
  
  .color-variant-option.selected .color-variant-circle {
    border-width: 4px;
    border-color: #000;
  }

  .size-variant-option {
    border-width: 2px;
    border-color: #000;
  }

  .size-variant-option.selected {
    border-color: #000;
    background: #000;
  }
}

.color-variant-option,
.color-variant-circle,
.size-variant-option {
  contain: layout style paint;
}

@media print {
  .color-variants,
  .size-variants {
    margin: 15px 0;
  }
  
  .color-variant-circle {
    border: 2px solid #000;
  }
  
  .color-variant-option:hover .color-variant-circle,
  .size-variant-option:hover {
    transform: none;
  }
}

/* NUCLEAR OPTION - Force color/size sections up on mobile with highest specificity */
@media (max-width: 767px) {
  .shopify-section .product-section .color-variants,
  body .product-section .color-variants,
  html .product-section .color-variants,
  .product-section .color-variants {
    margin-top: -2px !important;
    margin-bottom: 30px !important;
  }
  
  .shopify-section .product-section .size-variants,
  body .product-section .size-variants,
  html .product-section .size-variants,
  .product-section .size-variants {
    margin-top: -2px !important;
    margin-bottom: 15px !important;
  }
}

/* Simple fix for mobile color section spacing */
@media (max-width: 480px) {
  .color-variants {
    margin-top: -20px !important;
  }
  
  .quantity-section {
    margin-top: -3px !important;
  }
  
  /* Smaller screens - equal spacing */
  .product-info-section {
    margin: 0 !important;
    padding: 8px 0 8px 0 !important;
    box-sizing: border-box !important;
  }
  
  .info-header {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: 1 !important;
  }
  
  .info-header * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

/* Desktop: Reduce gap between description and offer banner */
@media (min-width: 1025px) {
  .limited-offer-banner {
    margin-top: 10px !important;
  }

  /* Add more space between content and horizontal line for Behind the Craft and Product Care */
  #craftsmanship-content.expanded,
  .product-info-section:nth-child(2) .info-content.expanded {
    padding: 18px 0 30px 0 !important;
  }
}

/* Shipping Delivery Table Styling */
.shipping-delivery-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 0 0 !important;
  font-family: inherit !important;
  background: #fff !important;
  border: 1px solid #663427 !important;
  table-layout: fixed !important;
}

/* Column width control */
.shipping-delivery-table th:first-child,
.shipping-delivery-table td:first-child {
  width: 35% !important;
}

.shipping-delivery-table th:nth-child(2),
.shipping-delivery-table td:nth-child(2) {
  width: 32.5% !important;
}

.shipping-delivery-table th:nth-child(3),
.shipping-delivery-table td:nth-child(3) {
  width: 32.5% !important;
}

.shipping-delivery-table th,
.shipping-delivery-table td {
  border: 1px solid #663427 !important;
  padding: 8px 12px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #663427 !important;
}

.shipping-delivery-table th {
  background-color: #eae1d8 !important;
  font-weight: 600 !important;
  color: #663427 !important;
  text-transform: none !important;
}

.shipping-delivery-table td {
  background-color: #f4f0ed !important;
  color: #663427 !important;
  font-weight: 400 !important;
}

/* Responsive table styling */
@media (max-width: 767px) {
  .shipping-delivery-table th,
  .shipping-delivery-table td {
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 480px) {
  .shipping-delivery-table th,
  .shipping-delivery-table td {
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding: 5px 8px !important;
  }
}

/* Why Love Highlights - Rectangular boxes styling */
.why-love-highlights {
  display: flex !important;
  gap: 12px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}

.highlight-box {
  display: inline-block !important;
  padding: 8px 16px !important;
  background-color: transparent !important;
  border: 0.3px solid #8b8263 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #663427 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Mobile responsive for highlight boxes */
@media (max-width: 767px) {
  .why-love-highlights {
    gap: 10px !important;
    margin-top: 16px !important;
  }
  
  .highlight-box {
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
}

@media (max-width: 480px) {
  .why-love-highlights {
    gap: 8px !important;
    margin-top: 14px !important;
  }
  
  .highlight-box {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
}

/* Desktop Layout - Ensure desktop layout above 1024px and for fine pointer devices */
@media screen and (min-width: 1025px) {
  [class*="medium-up--"] {
    width: auto !important;
    float: left !important;
    clear: none !important;
  }
  
  .grid__item {
    width: auto !important;
    float: left !important;
    clear: none !important;
  }
}

/* Desktop override for non-touch devices in medium range */
@media screen and (min-width: 768px) and (max-width: 1024px) and (pointer: fine) {
  [class*="medium-up--"] {
    width: auto !important;
    float: left !important;
    clear: none !important;
  }
  
  .grid__item {
    width: auto !important;
    float: left !important;
    clear: none !important;
  }
}

/* MOBILE LAYOUT - Only mobile phones */
@media screen and (max-width: 767px) {
  /* CRITICAL: Override theme grid system for mobile layout */
  [class*="medium-up--"] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  
  .grid__item {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  /* Main product section mobile adjustments */
  .shopify-section .product-section,
  body .product-section,
  html .product-section,
  .product-section {
    padding: 30px 25px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  /* Stack product container vertically on mobile */
  .product-container {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Product images adjustments for mobile - Make sticky starting from breadcrumb level */
  .product-images {
    position: sticky !important;
    top: -40px !important;
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
    padding: 5px 0 0 0 !important;
    margin: 0 !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  
  /* Hide desktop images on mobile, show slider */
  .desktop-images {
    display: none !important;
  }
  
  .mobile-image-slider {
    display: block !important;
    z-index: 1 !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Mobile Progress Bars - Like Best_Seller section */
  .mobile-progress-bars {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex !important;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    opacity: 1;
    z-index: 10;
  }
  
  .mobile-progress-line {
    width: 60px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    display: block;
  }
  
  .mobile-progress-line.active {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .mobile-progress-fill {
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
    border-radius: 2px;
  }
  
  .mobile-progress-line.active .mobile-progress-fill {
    width: 100%;
  }
  
  /* Product details adjustments for mobile - Enhanced hiding behind image */
  .product-details {
    order: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: -1 !important;
    position: relative !important;
    margin-top: -30px !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  
  /* Mobile breadcrumbs - Lower z-index so they hide behind cart overlay */
  .breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 15px !important;
    padding-top: 0 !important;
    text-align: left !important;
    z-index: 10 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  /* Force all mobile product page elements to stay behind cart overlay */
  .product-section {
    z-index: 5 !important;
  }
  
  .product-images {
    z-index: 5 !important;
  }
  
  .mobile-image-slider {
    z-index: 5 !important;
  }
  
  .slider-container {
    z-index: 5 !important;
  }
  
  /* Reset any problematic z-index values on mobile */
  .product-section > * {
    position: relative !important;
  }
  
  /* Enhanced hiding behavior for product content when scrolling */
  .product-section .product-title,
  .product-section .product-price,
  .product-section .product-form,
  .product-section .product-description,
  .product-section .size-variants,
  .product-section .color-variants,
  .product-section .bundle-section,
  .product-section .shipping-info {
    z-index: -1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  .quantity-selector {
    z-index: 1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  /* Mobile product title */
  .product-section .product-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin: 20px 0 !important;
    text-align: left !important;
  }
  
  /* Equal spacing for mobile product info elements */
  .product-price {
    margin: 20px 0 !important;
  }
  
  .color-variants {
    margin: 16px 0 16px 0 !important;
  }
  
  .size-variants {
    margin: 16px 0 16px 0 !important;
  }
  
  /* Mobile size variants header - reduce gap */
  .size-variants-header {
    margin-bottom: 0px !important;
  }
  
  /* Mobile size selectors - make smaller */
  .size-variant-option {
    padding: 4px 6px !important;
    min-width: 32px !important;
    height: 26px !important;
    font-size: 11px !important;
    border: 1.5px solid #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  /* Ensure unselected options are clearly inactive */
  .size-variant-option:not(.selected):not(.active) {
    border-color: #ddd !important;
    background: transparent !important;
    color: #333 !important;
  }
  
  .size-variant-option:not(.selected):not(.active) .size-text {
    color: #333 !important;
  }
  
  .size-variant-option.selected,
  .size-variant-option.active {
    border-color: #663427 !important;
    background: #663427 !important;
    color: white !important;
  }
  
  .size-variant-option.selected .size-text,
  .size-variant-option.active .size-text {
    color: white !important;
  }
  
  .quantity-selector {
    margin: 20px 0 10px 0 !important;
  }
  
  /* Subtotal spacing - reduce gap to buttons */
  .subtotal {
    margin: 10px 0 8px 0 !important;
  }
  
  /* Button spacing adjustments for mobile */
  .product-form .btn {
    margin: 10px 0 !important;
  }
  
  .cta-buttons .btn:first-child {
    margin-bottom: 8px !important;
  }
  
  .cta-buttons .btn:last-child {
    margin-top: 0 !important;
  }
  
  .shipping-info {
    margin: 20px 0 !important;
  }
  
  .bundle-section {
    margin: 20px 0 !important;
  }
  
  /* Bundle section button spacing */
  .bundle-subtotal-row {
    margin-bottom: 8px !important;
  }
  
  .claim-offer-button {
    margin-top: 8px !important;
  }
  
  .product-description {
    margin: 20px 0 !important;
  }
  
  /* Mobile collection name */
  .collection-name {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    text-align: left !important;
  }
  
  /* Mobile product price */
  .product-price {
    font-size: 16px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }
  
  /* Mobile stock status */
  .stock-status {
    margin-bottom: 20px !important;
    font-size: 13px !important;
  }
  
  /* Mobile product description */
  .product-description,
  #product-description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  
  /* Mobile color variants section */
  .color-variants {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .color-variants-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .color-variants-grid {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  
  /* Mobile size variants section */
  .size-variants {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .size-variants-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .size-variants-grid {
    justify-content: flex-start !important;
  }
  
  /* Mobile size guide header - same layout as desktop */
  .size-variants-header {
    align-items: center !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }
  
  .size-guide-section {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  /* Reduce horizontal line gap to match offer banner spacing */
  .description-separator {
    margin-bottom: 20px !important;
  }

  /* Mobile quantity section */
  .quantity-section {
    margin: 10px 0 20px 0 !important;
  }
  
  .quantity-label {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }
  
  /* Mobile subtotal */
  .subtotal {
    font-size: 13px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }
  
  /* Mobile CTA buttons */
  .cta-buttons {
    gap: 8px !important;
    margin-bottom: 15px !important;
  }
  
  .btn {
    padding: 12px 20px !important;
    font-size: 13px !important;
    width: 100% !important;
  }
  
  /* Mobile shipping info */
  .shipping-info {
    font-size: 11px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  
  /* Add gap between shipping text and tooltip icon on mobile */
  .shipping-info .info-icon-wrapper {
    margin-left: -2px !important;
  }
  
  /* Mobile why love section */
  .why-love-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .why-love-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  
  .why-love-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Mobile design direction section */
  .design-direction-section {
    margin: 16px 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .design-direction-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  .design-direction-content {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .why-love-text p,
  .why-love-text * {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  .product-description {
    margin: 0 0 16px 0 !important;
  }
  
  /* Mobile info sections - Equal spacing above and below */
  .product-info-section {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .info-header {
    font-size: 13px !important;
    text-align: left !important;
    margin: 15px 0 8px 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure border doesn't add extra spacing */
  .product-info-section {
    border-bottom-width: 1px !important;
    box-sizing: border-box !important;
  }
  
  .info-content {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding-top: 12px !important;
    text-align: left !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  
  .info-content *,
  .info-content strong,
  .info-content b,
  .info-content bold,
  .info-content h1,
  .info-content h2,
  .info-content h3,
  .info-content h4,
  .info-content h5,
  .info-content h6,
  .info-content p,
  .info-content span,
  .info-content div {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-height: none !important;
  }
  
  .info-content a {
    text-decoration: underline !important;
    color: #663427 !important;
  }
  
  .info-content.expanded {
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 0 6px 0 !important;
  }
  
  .info-content:not(.expanded) {
    padding-top: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  .info-content p {
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
  }
  
  .info-content p:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Mobile spacing for strong elements - maximum specificity */
  .product-section .info-content strong,
  .shopify-section .product-section .info-content strong,
  body .product-section .info-content strong,
  html .product-section .info-content strong {
    display: block !important;
    margin-top: 32px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: normal !important;
  }
  
  .product-section .info-content strong:first-child,
  .shopify-section .product-section .info-content strong:first-child,
  body .product-section .info-content strong:first-child,
  html .product-section .info-content strong:first-child {
    margin-top: 0 !important;
  }

  /* Mobile: Maximum specificity for consistent spacing */
  .product-section .info-content p + strong,
  .shopify-section .product-section .info-content p + strong,
  body .product-section .info-content p + strong,
  html .product-section .info-content p + strong {
    margin-top: 32px !important;
    padding-top: 0px !important;
  }
  
  /* Mobile: Force elements after strong to have no top margin - high specificity - exclude Product Details */
  .product-section .info-content:not(#product-details-content) strong + p,
  .shopify-section .product-section .info-content:not(#product-details-content) strong + p,
  body .product-section .info-content:not(#product-details-content) strong + p,
  html .product-section .info-content:not(#product-details-content) strong + p {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  
  .product-section .info-content:not(#product-details-content) strong + *,
  .shopify-section .product-section .info-content:not(#product-details-content) strong + *,
  body .product-section .info-content:not(#product-details-content) strong + *,
  html .product-section .info-content:not(#product-details-content) strong + * {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  
  /* Mobile complete set section */
  .complete-set-section-fixed {
    margin-top: 25px !important;
    padding-top: 20px !important;
    margin-bottom: 25px !important;
  }
  
  .complete-set-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  .complete-set-title {
    font-size: 20px !important;
    text-align: left !important;
  }
  
  .complete-set-discount {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  
  .complete-set-products {
    gap: 15px !important;
    margin-bottom: 16px !important;
  }
  
  .bundle-product-item {
    gap: 12px !important;
    padding: 0 !important;
  }
  
  .bundle-product-image {
    width: 60px !important;
    height: 60px !important;
  }
  
  .bundle-product-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .bundle-product-price {
    font-size: 13px !important;
    gap: 4px !important;
  }
  
  .current-item-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Mobile bundle summary */
  .bundle-summary-section {
    padding-top: 15px !important;
  }
  
  .bundle-subtotal-row {
    margin-bottom: 15px !important;
  }
  
  .subtotal-label,
  .subtotal-amount {
    font-size: 13px !important;
  }
  
  .claim-offer-button {
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
  
  /* Mobile bundle size variants */
  .bundle-size-variants {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }
  
  .bundle-size-variants-title {
    font-size: 10px !important;
  }
  
  .bundle-size-variants-grid {
    gap: 3px !important;
  }
  
  .bundle-size-variant-option {
    padding: 1px 3px !important;
    min-width: 25px !important;
    height: 16px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }
  
  .bundle-size-text {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .limited-offer-banner {
    min-width: 300px;
    max-width: 100%;
    padding: 10px 14px;
    margin: 20px 0;
    border-radius: 6px;
  }
  
  .offer-content {
    white-space: nowrap;
  }
  
  .offer-content {
    gap: 6px;
    padding-left: 6px;
  }
  
  .offer-icon {
    width: 28px;
    height: 28px;
    margin-left: 0;
  }
  
  .offer-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .offer-text {
    font-size: 12px;
  }
  
  .offer-info-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  
  .offer-stripe {
    width: 3px;
    border-radius: 6px 0 0 6px;
  }

  /* Mobile responsive adjustments for tooltip */
  .limited-offer-banner .tooltip-popup {
    white-space: normal;
    max-width: calc(100vw - 40px);
    width: max-content;
    min-width: 250px;
  }

  /* Mobile responsive adjustments */
  .size-guide-modal-content {
    width: 95%;
    margin: 20px;
    max-height: calc(100vh - 40px);
  }
  
  .size-guide-modal-header {
    padding: 16px 20px;
  }
  
  .size-guide-modal-title {
    font-size: 16px;
  }
  
  .size-guide-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .size-guide-modal-close svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .size-guide-modal-body {
    padding: 20px;
    max-height: calc(100vh - 120px);
    font-size: 11px !important;
  }
  
  /* Force smaller font sizes on mobile with high specificity */
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body *,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p {
    font-size: 11px !important;
  }
  
  /* Increase font size for bold text on mobile */
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body strong,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body b,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p strong,
  .size-guide-modal .size-guide-modal-content .size-guide-modal-body p b {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  
  /* Force modal to be on top on mobile */
  .size-guide-modal {
    z-index: 2147483647 !important;
    position: fixed !important;
  }
  
  .size-guide-modal-content {
    z-index: 2147483647 !important;
    position: relative !important;
  }
}


/* FINAL OVERRIDE: Mobile layout for all mobile/tablet sizes */
@media screen and (max-width: 1024px) {
  
  html .product-section [class*="medium-up--"],
  body .product-section [class*="medium-up--"],
  .shopify-section .product-section [class*="medium-up--"],
  [class*="medium-up--"] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  
  html .product-section .grid__item,
  body .product-section .grid__item,
  .shopify-section .product-section .grid__item,
  .grid__item {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
}


/* SMALL/MEDIUM DESKTOP - Adjust image to product info ratio */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Make image section larger on small/medium desktops */
  .product-container .medium-up--two-fifths {
    width: 55% !important; /* Increase from default ~40% to 55% */
  }
  
  .product-container .medium-up--three-fifths {
    width: 45% !important; /* Decrease from default ~60% to 45% */
  }
  
  .product-container .medium-up--one-half {
    width: 55% !important; /* For image section */
  }
  
  .product-container .medium-up--one-half:last-child {
    width: 45% !important; /* For product info section */
  }
}


/* TARGETED FIX: Small desktop image section sizing */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Override specific grid classes with high specificity */
  .product-section .product-container .grid__item.medium-up--two-fifths {
    width: 55% !important; /* Image section - increase from 40% */
  }
  
  .product-section .product-container .grid__item.medium-up--three-fifths {
    width: 45% !important; /* Product info - decrease from 60% */
  }
  
  .product-section .product-container .grid__item.medium-up--one-half:first-child {
    width: 55% !important; /* Image section when using one-half */
  }
  
  .product-section .product-container .grid__item.medium-up--one-half:last-child {
    width: 45% !important; /* Product info when using one-half */
  }
  
  /* Force the container to use flexbox for better control */
  .product-section .product-container {
    display: flex !important;
    gap: 20px !important;
  }
}


/* AGGRESSIVE FIX: Make image section much larger on small desktops */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Force image section to take up much more space */
  .shopify-section .product-section .product-container .grid__item.medium-up--two-fifths,
  .shopify-section .product-section .product-container .grid__item.medium-up--one-half:first-child {
    width: 65% !important; /* Much larger image section */
    min-width: 65% !important;
    flex: 0 0 65% !important;
  }
  
  .shopify-section .product-section .product-container .grid__item.medium-up--three-fifths,
  .shopify-section .product-section .product-container .grid__item.medium-up--one-half:last-child {
    width: 35% !important; /* Smaller product info section */
    min-width: 35% !important;
    flex: 0 0 35% !important;
  }
  
  /* Ensure the main product image is large */
  .product-images .main-product-image img,
  .product-images #main-product-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
  }
  
  /* Make thumbnails smaller to give more space to main image */
  .product-thumbnails {
    max-width: 80px !important;
  }
  
  .product-thumbnails img {
    max-width: 70px !important;
    max-height: 70px !important;
  }
}


/* CORRECT SELECTORS: Fix image section sizing on small desktops */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Target the actual grid structure from product-template.liquid */
  .grid .grid__item.medium-up--two-fifths,
  .grid .grid__item.medium-up--one-half:first-child {
    width: 60% !important; /* Image section */
    flex: 0 0 60% !important;
  }
  
  .grid .grid__item.medium-up--three-fifths,
  .grid .grid__item.medium-up--one-half:last-child {
    width: 40% !important; /* Product info section */
    flex: 0 0 40% !important;
  }
  
  /* Make the grid container flexbox */
  .product-section .grid {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }
  
  /* Ensure main image is properly sized */
  .product-single__sticky .main-product-image,
  .product-single__sticky #main-product-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* FORCE LARGE MAIN IMAGE: Make main product image much bigger on small desktops */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Target main product image directly with high specificity */
  .product-section .product-single__sticky .main-product-image img,
  .product-section .product-single__sticky #main-product-image,
  .product-section .product-images .main-product-image img,
  .product-section .product-images #main-product-image,
  .product-section img[id*="main"],
  .product-section img[class*="main"] {
    width: 500px !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: 500px !important;
    object-fit: cover !important;
  }
  
  /* Make the image container larger too */
  .product-section .main-product-image,
  .product-section .product-images {
    width: 100% !important;
    max-width: 600px !important;
  }
  
  /* Override any width restrictions */
  .product-section .product-single__sticky {
    min-width: 60% !important;
  }
}


/* RESPONSIVE IMAGE SIZING: Scale with screen size instead of fixed pixels */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Make main image scale proportionally with viewport */
  .product-section .product-single__sticky .main-product-image img,
  .product-section .product-single__sticky #main-product-image,
  .product-section .product-images .main-product-image img,
  .product-section .product-images #main-product-image,
  .product-section img[id*="main"],
  .product-section img[class*="main"] {
    width: 100% !important;
    max-width: 45vw !important; /* 45% of viewport width */
    height: auto !important;
    min-height: 40vh !important; /* 40% of viewport height */
    object-fit: cover !important;
  }
  
  /* Container scales too */
  .product-section .main-product-image,
  .product-section .product-images {
    width: 100% !important;
    max-width: 50vw !important; /* 50% of viewport width */
  }
  
  /* Responsive grid ratios */
  .grid .grid__item.medium-up--two-fifths,
  .grid .grid__item.medium-up--one-half:first-child {
    width: 55% !important;
    min-width: 45% !important;
  }
  
  .grid .grid__item.medium-up--three-fifths,
  .grid .grid__item.medium-up--one-half:last-child {
    width: 45% !important;
    max-width: 55% !important;
  }
}


/* FORCE BALANCED LAYOUT: Make image section equal or larger than product info */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Override with maximum specificity */
  .shopify-section .product-section .grid .grid__item.medium-up--two-fifths,
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:first-child {
    width: 60% !important;
    flex-basis: 60% !important;
    max-width: 60% !important;
    min-width: 60% !important;
  }
  
  .shopify-section .product-section .grid .grid__item.medium-up--three-fifths,
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:last-child {
    width: 40% !important;
    flex-basis: 40% !important;
    max-width: 40% !important;
    min-width: 40% !important;
  }
  
  /* Force flexbox layout */
  .shopify-section .product-section .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }
  
  /* Ensure no other CSS interferes */
  .shopify-section .product-section .grid .grid__item {
    float: none !important;
    clear: none !important;
  }
}


/* SIMPLE FIX: Just balance the section ratios - no static image sizes */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Make image section larger, product info smaller */
  .shopify-section .product-section .grid .grid__item.medium-up--two-fifths {
    width: 55% !important;
  }
  
  .shopify-section .product-section .grid .grid__item.medium-up--three-fifths {
    width: 45% !important;
  }
  
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:first-child {
    width: 55% !important;
  }
  
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:last-child {
    width: 45% !important;
  }
  
  /* Let images scale naturally */
  .product-section img {
    width: 100% !important;
    height: auto !important;
  }
}


/* AGGRESSIVE REBALANCING: Fix the terrible ratio on small desktop screens */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Force much larger image section, much smaller product info */
  .shopify-section .product-section .grid .grid__item.medium-up--two-fifths,
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:first-child {
    width: 65% !important; /* Much larger image section */
    flex: 0 0 65% !important;
  }
  
  .shopify-section .product-section .grid .grid__item.medium-up--three-fifths,
  .shopify-section .product-section .grid .grid__item.medium-up--one-half:last-child {
    width: 35% !important; /* Much smaller product info */
    flex: 0 0 35% !important;
  }
  
  /* Override all existing width rules */
  html body .shopify-section .product-section .grid .grid__item[class*="medium-up"] {
    float: none !important;
    display: block !important;
  }
  
  /* Force the grid to behave */
  .shopify-section .product-section .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
  }
}


/* NUCLEAR OPTION: Override everything for small desktop balance */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /* Kill all existing width rules and force new ones */
  [class*="medium-up--two-fifths"],
  [class*="medium-up--one-half"]:first-child {
    width: 60% !important;
    min-width: 60% !important;
    max-width: 60% !important;
    flex-basis: 60% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  
  [class*="medium-up--three-fifths"],
  [class*="medium-up--one-half"]:last-child {
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    flex-basis: 40% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Force grid to flex */
  .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}


/* DIRECT OVERRIDE: Target theme.css grid system directly */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  /* Override the theme.css medium-up grid system */
  .medium-up--two-fifths { width: 60% !important; }
  .medium-up--three-fifths { width: 40% !important; }
  .medium-up--one-half:first-child { width: 60% !important; }
  .medium-up--one-half:last-child { width: 40% !important; }
  .medium-up--one-half { width: 60% !important; }
  
  /* Force clear floats */
  .medium-up--two-fifths,
  .medium-up--three-fifths,
  .medium-up--one-half {
    float: left !important;
    clear: none !important;
  }
}


/* CLEAN APPROACH: Only hide slider controls where needed */
@media screen and (min-width: 1200px) {
  /* Hide mobile slider controls only on large desktop */
  .mobile-image-scroll-indicator,
  .mobile-image-scroll-thumb {
    display: none !important;
  }
}


/* SHOW DESKTOP IMAGE ELEMENTS - Override mobile hiding */
@media screen and (min-width: 768px) {
  /* Show desktop main image */
  .product-images,
  .main-product-image,
  #main-product-image,
  .product-single__sticky .main-product-image,
  .product-single__sticky #main-product-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Show desktop image container */
  .product-single__sticky {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Hide ONLY mobile slider, not all images */
  .mobile-image-slider {
    display: none !important;
  }
  
  /* But keep desktop images visible */
  .product-images img,
  .main-product-image img {
    display: block !important;
    visibility: visible !important;
  }
}


/* FORCE TABLET IMAGE VISIBILITY */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  /* Show both mobile and desktop image elements on tablets */
  .mobile-image-slider,
  .slider-container,
  .slider-track,
  .product-images,
  .main-product-image,
  .product-single__sticky {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure mobile slider is positioned correctly */
  .mobile-image-slider {
    position: relative !important;
    z-index: 10 !important;
  }
}


/* TABLET: Position slider handler below image */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Position slider handler below the image container */
  .mobile-image-scroll-indicator {
    position: relative !important;
    bottom: auto !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    margin-top: -50px !important;
  }
  
  /* Ensure image container doesn't overlap handler */
  .mobile-image-slider,
  .slider-container {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 0 !important;
  }
}


/* FIX: Move scroll handler below image on tablets - Override absolute positioning */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Force scroll handler to be positioned below image */
  .mobile-image-scroll-indicator {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: -50px auto -25px auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Ensure proper stacking order */
  .mobile-image-slider {
    position: relative !important;
    z-index: 1 !important;
  }
  
  .mobile-image-scroll-indicator {
    position: relative !important;
    z-index: 2 !important;
  }
}


/* AGGRESSIVE FIX: Force scroll handler below image on tablets */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Override all existing positioning for scroll indicator */
  .mobile-image-scroll-indicator {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin: -50px 0 -25px 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    z-index: 1 !important;
  }
  
  /* Center the scroll track within the indicator */
  .mobile-image-scroll-track {
    margin: 0 auto !important;
    display: block !important;
    width: 60px !important;
  }
  
  /* Ensure slider container comes before indicator in stacking */
  .mobile-image-slider {
    margin-bottom: 0 !important;
  }
}


/* AGGRESSIVE FIX: Force scroll handler below image on tablets */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Override all existing positioning for scroll indicator */
  .mobile-image-scroll-indicator {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin: -50px 0 -25px 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    z-index: 1 !important;
  }
  
  /* Center the scroll track within the indicator */
  .mobile-image-scroll-track {
    margin: 0 auto !important;
    display: block !important;
    width: 60px !important;
  }
  
  /* Ensure slider container comes before indicator in stacking */
  .mobile-image-slider {
    margin-bottom: 0 !important;
  }
}


/* CORRECT FIX: Position scroll handler exactly like mobile - below image */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Reset scroll indicator to original size and position it below */
  .mobile-image-scroll-indicator {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: -50px auto -25px auto !important;
    width: auto !important; /* Keep original width */
    height: auto !important; /* Keep original height */
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Don't modify the scroll track - keep original size */
  .mobile-image-scroll-track {
    margin: 0 !important;
    display: block !important;
    width: auto !important; /* Keep original width */
  }
  
  /* Ensure proper document flow order */
  .mobile-image-slider {
    order: 1 !important;
  }
  
  .mobile-image-scroll-indicator {
    order: 2 !important;
  }
}


/* FORCE SCROLL INDICATOR VISIBLE BELOW IMAGE ON TABLETS */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Make scroll indicator highly visible and positioned below */
  .mobile-image-scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: -50px auto -25px auto !important;
    padding: 10px !important;
    width: 100% !important;
    height: auto !important;
    z-index: 999 !important;
    background: rgba(0,0,0,0.1) !important; /* Temporary - to see if it appears */
  }
  
  /* Ensure the container allows it to show */
  .product-single__sticky,
  .mobile-image-slider {
    overflow: visible !important;
    position: relative !important;
  }
}


/* COPY EXACT MOBILE STYLES TO TABLETS */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Main product section mobile adjustments - COPIED FROM MOBILE */
  .shopify-section .product-section,
  body .product-section,
  html .product-section,
  .product-section {
    padding: 30px 25px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  /* Stack product container vertically - COPIED FROM MOBILE */
  .product-container {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Product images adjustments - COPIED FROM MOBILE */
  .product-images {
    position: sticky !important;
    top: -40px !important;
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
    padding: 5px 0 0 0 !important;
    margin: 0 !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  
  /* Mobile slider styling - COPIED FROM MOBILE */
  .mobile-image-slider {
    display: block !important;
    z-index: 1 !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove temporary background */
  .mobile-image-scroll-indicator {
    background: transparent !important;
  }
}


/* PREVENT JAVASCRIPT FROM HIDING SCROLL INDICATOR ON TABLETS */
@media screen and (width: 768px),
       screen and (width: 820px),
       screen and (width: 1024px),
       screen and (width: 1180px) {
  
  /* Force scroll indicator to stay visible on tablets - override JavaScript */
  .mobile-image-scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: relative !important;
    margin: -50px auto -25px auto !important;
    justify-content: center !important;
  }
  
  /* Even if JavaScript sets inline display:none, CSS will override */
  .mobile-image-scroll-indicator[style*="display: none"] {
    display: flex !important;
  }
}


/* CLEAN SLATE: Simple mobile layout for all devices 1024px and under */
@media screen and (max-width: 1024px) {
  /* Force mobile grid layout */
  .product-section .grid .grid__item {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
  
  /* Show mobile slider */
  .mobile-image-slider {
    display: block !important;
  }
  
  /* Hide mobile scroll indicator on medium/small desktop screens */
  .mobile-image-scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Stack layout vertically */
  .product-section .grid {
    display: block !important;
  }
}

/* Desktop override - only for screens larger than 1024px */
@media screen and (min-width: 1025px) {
  .mobile-image-slider {
    display: none !important;
  }
  
  .mobile-image-scroll-indicator {
    display: none !important;
  }
}


/* TABLET ONLY: Make tablets (768x1024, 820x1180) look exactly like mobile */
@media screen and (width: 768px) and (height: 1024px),
       screen and (width: 1024px) and (height: 768px),
       screen and (width: 820px) and (height: 1180px),
       screen and (width: 1180px) and (height: 820px) {
  
  /* Grid system override for tablets */
  [class*="medium-up--"] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  
  .grid__item {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  
  /* Show mobile slider on tablets */
  .mobile-image-slider {
    display: block !important;
  }
  
  /* Force scroll indicator visible on tablets */
  .mobile-image-scroll-indicator {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin: -50px auto -25px auto !important;
    justify-content: center !important;
  }
  
  /* Override any JavaScript hiding */
  .mobile-image-scroll-indicator[style*="display: none"] {
    display: flex !important;
  }
}


/* TABLET: 100% MIRROR MOBILE LAYOUT - COMPLETE EXACT COPY */
@media screen and (width: 768px) and (height: 1024px),
       screen and (width: 1024px) and (height: 768px),
       screen and (width: 820px) and (height: 1180px),
       screen and (width: 1180px) and (height: 820px) {
  
  /* Main product section mobile adjustments - EXACT MOBILE COPY */
  .shopify-section .product-section,
  body .product-section,
  html .product-section,
  .product-section {
    padding: 30px 25px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  /* Stack product container vertically on mobile - EXACT MOBILE COPY */
  .shopify-section .product-section .product-container,
  body .product-section .product-container,
  html .product-section .product-container,
  .product-section .product-container,
  .product-container {
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Product images adjustments for mobile - EXACT MOBILE COPY positioned between breadcrumbs and collection name */
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images,
  .product-section .product-images,
  .product-images {
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    top: -40px !important;
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Remove any grey backgrounds from all child elements */
  .product-images * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Mobile image slider - EXACT MOBILE COPY */
  .mobile-image-slider {
    display: block !important;
    z-index: 1 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
  }
  
  /* Remove any grey background from slider container */
  .mobile-image-slider * {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure slider track has no background */
  .slider-track,
  .slider-container {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Mobile ordering - EXACT MOBILE COPY */
  .product-images {
    order: 1 !important;
    margin-bottom: -25px !important;
  }
  
  .product-details {
    order: 3 !important;
    margin-top: 25px !important;
  }
  
  /* Equal spacing around indicator handler for tablets */
  .collection-name {
    margin-bottom: 25px !important;
  }
  
  .product-container {
    gap: 0px !important;
  }
  
  /* Hide desktop images on mobile, show slider - EXACT MOBILE COPY */
  .desktop-images {
    display: none !important;
  }
  
  /* Hide desktop slider dots/indicators on tablets */
  .indicator {
    display: none !important;
  }
  
  .desktop-only-indicators {
    display: none !important;
  }
  
  /* Remove any extra white background/padding */
  .product-images .desktop-images,
  .product-images .desktop-only-indicators,
  .product-images .indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .mobile-image-slider {
    display: block !important;
    z-index: 1 !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Mobile Progress Bars - EXACT MOBILE COPY */
  .mobile-progress-bars {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex !important;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    opacity: 1;
    z-index: 10;
  }
  
  .mobile-progress-line {
    width: 60px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    display: block;
  }
  
  .mobile-progress-line.active {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .mobile-progress-fill {
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
    border-radius: 2px;
  }
  
  .mobile-progress-line.active .mobile-progress-fill {
    width: 100%;
  }
  
  /* Product details adjustments for mobile - EXACT MOBILE COPY */
  .product-details {
    order: 3 !important;
    max-width: 100% !important;
    width: 100% !important;
    z-index: -1 !important;
    position: relative !important;
    margin-top: 25px !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  
  /* Force all mobile product page elements to stay behind cart overlay - EXACT MOBILE COPY */
  .product-section {
    z-index: 5 !important;
  }
  
  .product-images {
    z-index: 5 !important;
  }
  
  .mobile-image-slider {
    z-index: 5 !important;
  }
  
  .slider-container {
    z-index: 5 !important;
  }
  
  /* Reset any problematic z-index values on mobile - EXACT MOBILE COPY */
  .product-section > * {
    position: relative !important;
  }
  
  /* Enhanced hiding behavior for product content when scrolling - EXACT MOBILE COPY */
  .product-section .product-title,
  .product-section .product-price,
  .product-section .product-form,
  .product-section .product-description,
  .product-section .size-variants,
  .product-section .color-variants,
  .product-section .bundle-section,
  .product-section .shipping-info {
    z-index: -1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  .quantity-selector {
    z-index: 1 !important;
    position: relative !important;
    background: transparent !important;
  }
  
  /* Mobile scroll indicator - EXACT MOBILE COPY - Force visible on tablets */
  .mobile-image-scroll-indicator {
    display: flex !important;
    order: 2 !important;
    position: relative !important;
    margin: -10px -25px -10px -25px !important;
    padding: 0 25px !important;
    width: calc(100% + 50px) !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
  }
  
  .mobile-image-scroll-track {
    width: 100% !important;
    max-width: 100% !important;
    height: 3px !important;
    background: rgba(45, 45, 45, 0.2) !important;
    border-radius: 2px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .mobile-image-scroll-thumb {
    width: 120px !important;
    height: 3px !important;
    background: #2d2d2d !important;
    border-radius: 2px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.2s ease !important;
  }
}

/* Hide scroll indicator ONLY on desktop screens (using pointer detection AND minimum width) */
@media screen and (pointer: fine) and (hover: hover) and (min-width: 1025px) {
  .mobile-image-scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .mobile-progress-bars {
    display: none !important;
  }
}

/* DISABLE HYPHENATION - Behind the Craft Extended section - ALL SCREEN SIZES */
.shopify-section .product-section #craftsmanship-content,
body .product-section #craftsmanship-content,
html .product-section #craftsmanship-content,
.product-section #craftsmanship-content,
#craftsmanship-content,
.shopify-section .product-section #craftsmanship-content *,
body .product-section #craftsmanship-content *,
html .product-section #craftsmanship-content *,
.product-section #craftsmanship-content *,
#craftsmanship-content *,
.info-content#craftsmanship-content,
.info-content#craftsmanship-content *,
.info-content#craftsmanship-content p,
.info-content#craftsmanship-content div,
.info-content#craftsmanship-content span,
.info-content#craftsmanship-content li,
.info-content#craftsmanship-content td,
.info-content#craftsmanship-content th {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  -o-hyphens: none !important;
  hyphenate-limit-chars: none !important;
  hyphenate-limit-lines: none !important;
  hyphenate-limit-last: none !important;
  hyphenate-limit-zone: 0 !important;
  word-break: keep-all !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-break: strict !important;
  text-align: left !important;
  text-align-last: left !important;
  white-space: normal !important;
}

/* DESKTOP - NO HYPHENATION */
@media screen and (min-width: 1025px) {
  .shopify-section .product-section #craftsmanship-content,
  body .product-section #craftsmanship-content,
  html .product-section #craftsmanship-content,
  .product-section #craftsmanship-content,
  #craftsmanship-content,
  .shopify-section .product-section #craftsmanship-content *,
  body .product-section #craftsmanship-content *,
  html .product-section #craftsmanship-content *,
  .product-section #craftsmanship-content *,
  #craftsmanship-content *,
  .info-content#craftsmanship-content,
  .info-content#craftsmanship-content * {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: keep-all !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* TABLET - NO HYPHENATION */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .shopify-section .product-section #craftsmanship-content,
  body .product-section #craftsmanship-content,
  html .product-section #craftsmanship-content,
  .product-section #craftsmanship-content,
  #craftsmanship-content,
  .shopify-section .product-section #craftsmanship-content *,
  body .product-section #craftsmanship-content *,
  html .product-section #craftsmanship-content *,
  .product-section #craftsmanship-content *,
  #craftsmanship-content *,
  .info-content#craftsmanship-content,
  .info-content#craftsmanship-content * {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: keep-all !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* MOBILE - NO HYPHENATION */
@media screen and (max-width: 767px) {
  .shopify-section .product-section #craftsmanship-content,
  body .product-section #craftsmanship-content,
  html .product-section #craftsmanship-content,
  .product-section #craftsmanship-content,
  #craftsmanship-content,
  .shopify-section .product-section #craftsmanship-content *,
  body .product-section #craftsmanship-content *,
  html .product-section #craftsmanship-content *,
  .product-section #craftsmanship-content *,
  #craftsmanship-content *,
  .info-content#craftsmanship-content,
  .info-content#craftsmanship-content * {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: keep-all !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* FIX MOBILE TOOLTIP CLIPPING - Ensure offer banner tooltip is fully visible */
@media screen and (max-width: 767px) {
  .limited-offer-banner {
    overflow: visible !important;
  }
  
  .offer-content {
    overflow: visible !important;
  }
  
  .limited-offer-banner .tooltip-popup {
    z-index: 9999 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

/* TABLET SPACING FIX - Equal spacing around slider indicator */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .shopify-section .product-section .collection-name,
  body .product-section .collection-name,
  html .product-section .collection-name,
  .product-section .collection-name,
  .collection-name {
    margin-bottom: 25px !important;
  }
  
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images,
  .product-section .product-images,
  .product-images {
    margin-bottom: -25px !important;
  }
  
  .shopify-section .product-section .product-details,
  body .product-section .product-details,
  html .product-section .product-details,
  .product-section .product-details,
  .product-details {
    margin-top: 25px !important;
  }
  
  /* When slider indicator is hidden (single image), add proper spacing */
  .mobile-image-scroll-indicator[style*="display: none"] + .product-details .collection-name,
  .mobile-image-scroll-indicator[style*="display:none"] + .product-details .collection-name,
  .product-section:not(:has(.mobile-image-scroll-indicator:not([style*="display: none"]))) .collection-name {
    margin-bottom: 30px !important;
    margin-top: -10px !important;
  }
}

/* MOBILE SPACING FIX - Equal spacing around slider indicator */
@media screen and (max-width: 767px) {
  .shopify-section .product-section .collection-name,
  body .product-section .collection-name,
  html .product-section .collection-name,
  .product-section .collection-name,
  .collection-name {
    margin-bottom: 0 !important;
    margin-top: -50px !important;
  }
  
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images,
  .product-section .product-images,
  .product-images {
    margin-bottom: -20px !important;
  }
  
  .shopify-section .product-section .product-details,
  body .product-section .product-details,
  html .product-section .product-details,
  .product-section .product-details,
  .product-details {
    margin-top: 20px !important;
  }
  
  /* When slider indicator is hidden (single image), add proper spacing */
  .mobile-image-scroll-indicator[style*="display: none"] + .product-details .collection-name,
  .mobile-image-scroll-indicator[style*="display:none"] + .product-details .collection-name,
  .product-section:not(:has(.mobile-image-scroll-indicator:not([style*="display: none"]))) .collection-name {
    margin-bottom: 20px !important;
    margin-top: -10px !important;
  }
}

/* Ensure scroll indicator is ALWAYS visible on exact tablet sizes regardless of pointer type */
@media screen and (width: 768px) and (height: 1024px),
       screen and (width: 1024px) and (height: 768px),
       screen and (width: 820px) and (height: 1180px),
       screen and (width: 1180px) and (height: 820px) {
  .mobile-image-scroll-indicator {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .mobile-image-scroll-track {
    display: block !important;
  }
  
  .mobile-image-scroll-thumb {
    display: block !important;
  }
}


/* VERTICAL THUMBNAIL SLIDER - MATCHES MAIN IMAGE HEIGHT */
@media screen and (min-width: 768px) {
  /* Desktop images container */
  .desktop-images {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
    visibility: visible !important;
    align-items: stretch !important; /* Make containers same height */
    min-height: 600px !important; /* Ensure minimum height */
  }

  /* Thumbnail container - dynamic height based on image count */
  .thumbnail-images {
    display: block !important;
    width: 85px !important;
    height: auto !important; /* Auto height by default */
    max-height: 600px !important; /* Max height to match main image */
    overflow: visible !important; /* Show all thumbnails by default */
    position: relative !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  /* When slider is needed (more than 7 images), set fixed height and enable scroll */
  .thumbnail-images.has-scroll {
    height: 560px !important; /* Fixed height for 7 thumbnails */
    overflow: hidden !important; /* Hide overflow when scrolling */
  }

  /* Main image area - natural size */
  .main-image {
    flex: 1 !important;
    height: auto !important;
  }

  /* Scrollable thumbnail container */
  .thumbnail-scroll-container {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px 4px !important;
    transition: transform 0.3s ease !important;
    position: relative !important;
  }

  /* Individual thumbnails */
  .thumbnail {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 8px auto !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: block !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
  }

  .thumbnail:hover {
    border-color: #333 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  }

  .thumbnail.active {
    border-color: #663427 !important;
    box-shadow: 0 4px 8px rgba(102, 52, 39, 0.3) !important;
  }

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

}

/* FINAL FIX: Responsive thumbnail heights and layout proportions */
/* This must be at the end to override all previous rules */

/* Medium Desktop: 1024px - 1199px */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  /* Thumbnail slider height - OPTIMIZED FOR MEDIUM DESKTOP */
  .shopify-section .product-section .thumbnail-images,
  .shopify-section .product-section #thumbnail-container,
  body .product-section .thumbnail-images,
  body .product-section #thumbnail-container,
  html .product-section .thumbnail-images,
  html .product-section #thumbnail-container,
  .thumbnail-images,
  #thumbnail-container {
    max-height: 440px !important;
    height: 440px !important;
    min-height: 440px !important;
    width: 90px !important;
    max-width: 90px !important;
  }
  
  .shopify-section .product-section .thumbnail-scroll-container,
  .shopify-section .product-section #thumbnail-scroll-container,
  body .product-section .thumbnail-scroll-container,
  body .product-section #thumbnail-scroll-container,
  html .product-section .thumbnail-scroll-container,
  html .product-section #thumbnail-scroll-container,
  .thumbnail-scroll-container,
  #thumbnail-scroll-container {
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
  }
  
  /* Optimize individual thumbnail sizes for medium desktop */
  .thumbnail {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 10px !important;
  }
  
  /* Optimize spacing for medium desktop - REDUCED GAP */
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images,
  .product-section .product-images {
    gap: 10px !important;
  }
  
  .shopify-section .product-section .product-container,
  body .product-section .product-container,
  html .product-section .product-container,
  .product-section .product-container {
    gap: 25px !important;
  }
  
  /* BALANCED LAYOUT PROPORTIONS - Medium Desktop */
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images {
    flex: 0 0 55% !important;
    width: 55% !important;
    max-width: 55% !important;
  }
  
  .shopify-section .product-section .product-details,
  body .product-section .product-details,
  html .product-section .product-details {
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
  }
  
  .shopify-section .product-section .product-container,
  body .product-section .product-container,
  html .product-section .product-container {
    gap: 25px !important;
  }
  
  /* Optimize typography for balanced medium desktop layout */
  .shopify-section .product-section .product-details h1,
  body .product-section .product-details h1,
  html .product-section .product-details h1 {
    font-size: 30px !important;
    margin-bottom: 18px !important;
    line-height: 1.2 !important;
  }
}

/* Small Desktop: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Thumbnail slider height - PROPERLY SIZED FOR SMALL DESKTOP */
  .shopify-section .product-section .thumbnail-images,
  .shopify-section .product-section #thumbnail-container,
  body .product-section .thumbnail-images,
  body .product-section #thumbnail-container,
  html .product-section .thumbnail-images,
  html .product-section #thumbnail-container,
  .thumbnail-images,
  #thumbnail-container {
    max-height: 380px !important;
    height: 380px !important;
    min-height: 380px !important;
    width: 85px !important;
    max-width: 85px !important;
  }
  
  .shopify-section .product-section .thumbnail-scroll-container,
  .shopify-section .product-section #thumbnail-scroll-container,
  body .product-section .thumbnail-scroll-container,
  body .product-section #thumbnail-scroll-container,
  html .product-section .thumbnail-scroll-container,
  html .product-section #thumbnail-scroll-container,
  .thumbnail-scroll-container,
  #thumbnail-scroll-container {
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
  }
  
  /* Optimize individual thumbnail sizes for small desktop - BALANCED SIZE */
  .thumbnail {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
  }
  
  /* Optimize spacing for small desktop - REDUCED GAP */
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images,
  .product-section .product-images {
    gap: 10px !important;
  }
  
  .shopify-section .product-section .product-container,
  body .product-section .product-container,
  html .product-section .product-container,
  .product-section .product-container {
    gap: 25px !important;
  }
  
  /* BALANCED LAYOUT PROPORTIONS - Small Desktop */
  .shopify-section .product-section .product-images,
  body .product-section .product-images,
  html .product-section .product-images {
    flex: 0 0 58% !important;
    width: 58% !important;
    max-width: 58% !important;
  }
  
  .shopify-section .product-section .product-details,
  body .product-section .product-details,
  html .product-section .product-details {
    flex: 0 0 42% !important;
    width: 42% !important;
    max-width: 42% !important;
  }
  
  .shopify-section .product-section .product-container,
  body .product-section .product-container,
  html .product-section .product-container {
    gap: 20px !important;
  }
  
  /* Optimize typography for balanced small desktop layout */
  .shopify-section .product-section .product-details h1,
  body .product-section .product-details h1,
  html .product-section .product-details h1 {
    font-size: 26px !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
  }
}

/* Fix offer banner overflow and optimize layout on small and medium desktop screens */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .limited-offer-banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    display: flex !important;
    padding: 10px 14px !important;
  }
  
  .offer-content {
    white-space: normal !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    gap: 6px !important;
  }
  
  .offer-text {
    flex: 1 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  
  .offer-icon {
    width: 24px !important;
    height: 24px !important;
  }
  
  .offer-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .offer-icon img {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Reduce thumbnail image size for better space utilization */
  .thumbnail {
    width: 64px !important;
    height: 64px !important;
  }
  
  .thumbnail img {
    width: 64px !important;
    height: 64px !important;
  }
  
  /* Adjust thumbnail container width accordingly */
  .thumbnail-images,
  #thumbnail-container {
    width: 64px !important;
  }
  
  .thumbnail-scroll-container,
  #thumbnail-scroll-container {
    width: 64px !important;
  }
  
  /* Reduce desktop images container width */
  .desktop-images > div:first-child {
    width: 64px !important;
  }
  
  /* Reduce gap between thumbnails and main image */
  .desktop-images {
    gap: 8px !important;
  }
  
  /* Reduce spacing in product images container */
  .product-images {
    gap: 8px !important;
  }
  
  /* Reduce color variant circle sizes to prevent cutoff */
  .color-variant-circle {
    width: 36px !important;
    height: 36px !important;
  }
  
  .color-variant-option {
    padding: 4px !important;
    min-width: 44px !important;
  }
  
  .color-variants-grid {
    gap: 8px !important;
  }
  
  /* Fix thumbnail container heights to account for navigation buttons */
  .thumbnail-images,
  #thumbnail-container {
    max-height: 330px !important;
    height: 330px !important;
  }
  
  .thumbnail-scroll-container,
  #thumbnail-scroll-container {
    height: 330px !important;
  }
}

/* Large Desktop: Fix default 600px height to account for buttons */
@media (min-width: 1200px) {
  .thumbnail-images,
  #thumbnail-container {
    max-height: 550px !important;
    height: 550px !important;
  }
  
  .thumbnail-scroll-container,
  #thumbnail-scroll-container {
    height: 550px !important;
  }
}