/** Shopify CDN: Minification failed

Line 1384:25 Unexpected "*"

**/
/* Custom Product Page Styles */

/* ========================================
   Breadcrumb Navigation
   ======================================== */

.product-breadcrumb {
  font-family: 'sofia-pro', sans-serif !important;
  margin-bottom: 0 !important; /* Removed bottom margin */
  padding: 0 !important;
}

.breadcrumb__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.breadcrumb__item {
  display: flex !important;
  align-items: center !important;
  font-size: 0.9375rem !important; /* 15px - increased from 14px */
}

.breadcrumb__item:not(:last-child)::after {
  content: ">" !important;
  margin: 0 0.5rem !important;
  color: #999 !important;
  font-weight: 400 !important;
}

.breadcrumb__link {
  color: #666 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-weight: 400 !important;
}

.breadcrumb__link:hover {
  color: #92251D !important;
  text-decoration: underline !important;
}

.breadcrumb__item--current {
  color: #333 !important;
  font-weight: 500 !important;
  max-width: 300px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Mobile adjustments for breadcrumbs */
@media screen and (max-width: 749px) {
  .product-breadcrumb {
    margin-bottom: 0 !important; /* No bottom margin on mobile either */
    white-space: nowrap !important; /* Keep breadcrumb on one line */
    overflow: hidden !important;
  }

  .breadcrumb__list {
    font-size: 0.875rem !important; /* 14px - increased from 13px */
    flex-wrap: nowrap !important; /* Prevent wrapping to next line */
  }

  .breadcrumb__item {
    font-size: 0.875rem !important; /* 14px - increased from 13px */
  }

  .breadcrumb__item--current {
    max-width: 120px !important; /* Reduce max-width to fit better */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ========================================
   Size Variant Selector - Custom Styling
   ======================================== */

/* Size fieldset container */
.product-form__input--size {
  margin-bottom: 1.5rem;
}

/* Size label/legend */
.product-form__input--size .form__label {
  font-family: 'sofia-pro', sans-serif;
  font-size: 1.5rem; /* 24px - larger label text */
  font-weight: 600;
  color: #333;
  margin-bottom: 0.625rem;
  display: block;
}

/* Size options container */
.form__input--size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Hide the native radio input (accessibility maintained) */
.size-input__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Size option label (the visible circle) */
.size-input__label {
  --size-button-dimension: 5rem; /* 80px - much larger circles */
  --size-button-font: 1.25rem; /* 20px - larger text */
  --size-button-border: #92251D; /* Red border for unselected */
  --size-button-bg: #ffffff;
  --size-button-color: #92251D; /* Red text for unselected */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-button-dimension);
  height: var(--size-button-dimension);
  border-radius: 50%;
  background: var(--size-button-bg);
  border: 2px solid var(--size-button-border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'sofia-pro', sans-serif;
  font-size: var(--size-button-font);
  font-weight: 500;
  color: var(--size-button-color);
  text-align: center;
  line-height: 1;
  position: relative;
  user-select: none;
}

/* Hover state */
.size-input__label:hover {
  --size-button-border: #92251D;
  transform: scale(1.05);
}

/* Selected/Active state */
.size-input__input:checked + .size-input__label {
  --size-button-bg: #92251D;
  --size-button-color: #ffffff;
  --size-button-border: #92251D;
}

/* Focus state for accessibility */
.size-input__input:focus-visible + .size-input__label {
  outline: 2px solid #92251D;
  outline-offset: 2px;
}

/* Disabled state */
.size-input__input:disabled + .size-input__label,
.size-input__input.disabled + .size-input__label {
  opacity: 0.5;
  cursor: not-allowed;
  --size-button-bg: #f5f5f5;
  pointer-events: none;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 749px) {
  .size-input__label {
    --size-button-dimension: 4rem; /* 64px - much larger for mobile */
    --size-button-font: 1.125rem; /* 18px - larger text */
  }

  .form__input--size {
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.3125rem;
  }

  /* Subtle scrollbar for mobile */
  .form__input--size::-webkit-scrollbar {
    height: 3px;
  }

  .form__input--size::-webkit-scrollbar-track {
    background: transparent;
  }

  .form__input--size::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
  }
}

/* Mobile description below product title */
.product__mobile-description {
  display: none;
  font-family: 'Sofia Pro Light', 'Sofia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
  font-size: 1.05rem; /* 16.8px */
  line-height: 1.4;
  color: #7a7a7a;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
  padding: 0;
}

/* Show only on mobile devices */
@media screen and (max-width: 749px) {
  .product__mobile-description {
    display: block;
  }
}

/* Hide quantity selector on all devices - following modern e-commerce patterns */
.product-form__quantity,
.product-form__input.product-form__quantity,
quantity-input.quantity,
.quantity__label,
.quantity__rules,
.quantity__rules-cart,
[id^="Quantity-Form-"] {
  display: none !important;
}

/* Custom Add to Cart button styling */
.product-form__submit.button,
.product-form__submit.button.button--full-width,
.product-form__submit.button.button--secondary,
.product-form__submit.button.button--primary,
#ProductSubmitButton-template--23808941228335__main {
  background-color: #2A8644 !important;
  border: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 50px !important; /* Rounded pill shape */
  color: white !important;
  font-family: 'sofia-pro', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  padding: 1rem 2rem !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Desktop spacing and centering for Add to Cart button */
@media screen and (min-width: 990px) {
  .product-form__buttons {
    margin-top: 2rem !important; /* Space above button */
    margin-bottom: 2rem !important; /* Space below button */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important; /* Center the button */
    max-width: 500px !important; /* Increased container width */
    margin-left: auto !important; /* Push to right */
    margin-right: auto !important; /* Center within its container */
  }

  .product-form__submit.button {
    width: 100% !important; /* Full width of container */
    max-width: 450px !important; /* Increased button width */
    font-size: 1.25rem !important; /* Bigger text - 20px */
    padding: 1.25rem 2.5rem !important; /* Bigger padding */
  }
}

.product-form__submit.button:hover {
  background-color: #1f6633 !important; /* Darker green on hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(42, 134, 68, 0.3) !important;
  border: none !important;
  outline: none !important;
}

.product-form__submit.button:active,
.product-form__submit.button:focus,
.product-form__submit.button:focus-visible {
  transform: translateY(0) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(42, 134, 68, 0.2) !important;
}

.product-form__submit.button:disabled {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  border: none !important;
}

/* Override any Dawn theme button borders */
.product-form__buttons .button--secondary,
.product-form__buttons .button--primary,
.product-form__buttons button,
.product-form__buttons .button,
[id*="ProductSubmitButton"] {
  border: 0 !important;
  border: none !important;
  outline: none !important;
}

/* Remove any pseudo-element borders */
.product-form__submit.button::before,
.product-form__submit.button::after,
.product-form__buttons button::before,
.product-form__buttons button::after {
  border: none !important;
  box-shadow: none !important;
}

/* Force remove borders with higher specificity */
.product .product-form__buttons .product-form__submit {
  border: 0 !important;
  outline: 0 !important;
}

/* Mobile adjustments for Add to Cart button */
@media screen and (max-width: 749px) {
  .product-form__submit.button,
  .product-form__submit.button.button--full-width {
    width: 90% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    display: block !important;
    padding: 1rem 1.5rem !important;
  }

  .product-form__buttons {
    display: flex !important;
    justify-content: center !important;
  }
}

/* Desktop short description below product image */
.product__short-description {
  display: none;
  font-family: 'sofia-pro', sans-serif;
  font-size: 1.4rem; /* 22.4px - bigger text */
  line-height: 1.6;
  color: #333;
  margin-top: 0;
}

.product__short-description-label {
  font-size: 1.75rem; /* 28px - bigger title */
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
  display: block;
}

/* Show only on desktop */
@media screen and (min-width: 990px) {
  .product__short-description {
    display: block;
  }
}

/* Remove padding above product image on mobile */
@media screen and (max-width: 749px) {
  .section-template--26097548591368__main-padding,
  [class*="section-"][class*="-padding"].gradient.color-scheme-1 {
    padding-top: 0 !important;
  }

  /* Target the main product section specifically */
  product-info[id^="MainProduct-"] {
    padding-top: 0 !important;
  }

  /* Remove top padding from thumbnail slider */
  .thumbnail-slider.slider-mobile-gutter.quick-add-hidden.thumbnail-slider--no-slide,
  .thumbnail-slider {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Disable click on product image, but allow zoom icon */
.product__modal-opener {
  position: relative !important;
}

.product__modal-opener button.product__media-toggle {
  pointer-events: none !important;
  cursor: default !important;
}

/* Make zoom icon clickable and properly positioned */
.product__media-icon {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;  /* Override the default left positioning */
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important; /* Higher z-index for desktop */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Fix zoom icon position on mobile for all images */
@media screen and (max-width: 749px) {
  .product__media-icon {
    position: fixed !important; /* Use fixed positioning relative to viewport */
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 200 !important; /* Higher z-index on mobile */
  }

  /* Alternative: If fixed doesn't work, ensure consistent absolute positioning */
  .product__media-item .product__media-icon,
  .product-media-container .product__media-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
  }

  /* Ensure parent container is positioned */
  .product__media-item,
  .product-media-container {
    position: relative !important;
  }
}

/* Ensure zoom icon is clickable on desktop */
@media screen and (min-width: 990px) {
  .product__media-icon {
    pointer-events: auto !important;
    z-index: 100 !important;
  }

  /* Re-enable the button click only for the zoom icon area */
  .product__modal-opener button.product__media-toggle {
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 101 !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: 0 !important; /* Invisible but clickable */
  }
}

.product__media-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Custom Fullscreen Product Modal */
.product-media-modal__dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: black !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.product-media-modal__content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: black !important;
  padding: 60px 20px 100px !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure each media item takes full modal space */
.product-media-modal__content .product__media,
.product-media-modal__content [data-media-id] {
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Show only active media */
.product-media-modal__content .product__media.active,
.product-media-modal__content [data-media-id].active {
  display: flex !important;
}

/* Modal images should be contained */
.product-media-modal__content img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Modal close button */
.product-media-modal__toggle {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000000 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.product-media-modal__toggle svg {
  width: 20px !important;
  height: 20px !important;
  color: black !important;
}

/* Modal navigation controls */
.modal-nav-controls {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  padding: 10px 20px !important;
  border-radius: 30px !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

.modal-nav-button {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: white !important;
  transition: all 0.2s !important;
  font-size: 24px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  z-index: 1000001 !important;
  position: relative !important;
}

.modal-nav-button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.modal-nav-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.modal-nav-counter {
  color: white !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 60px !important;
  text-align: center !important;
}

/* Modal images container */
.modal-images-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.3s ease !important;
}

.modal-image-item {
  min-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px 100px !important;
}

.modal-image-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
}

/* Fix mobile overflow - prevent horizontal scroll */
html {
  overflow-x: clip !important;
  max-width: 100% !important;
}

body {
  overflow-x: clip !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Override Dawn theme page-width constraints - COMPLETE OVERRIDE */
product-info .page-width {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet styles removed - consolidated in main tablet section below */

/* Desktop styles for page-width */
@media screen and (min-width: 990px) {
  product-info .page-width {
    padding: 0 15px 0 0 !important; /* Only right padding */
    max-width: 100% !important;
  }

  /* Override page-width padding for the product section ONLY */
  .shopify-section-product .page-width,
  product-info .page-width {
    padding-left: 15px !important; /* Minimal left padding */
    padding-right: 30px !important; /* Keep right padding */
  }
}

/* Target the product-info component directly */
product-info {
  max-width: 100% !important;
  width: 100% !important;
}

product-info[class*="section-"][class*="-padding"] {
  padding: 20px 0 !important;
}

/* Main product grid layout */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Default equal columns */
  gap: 50px;
  max-width: 100%;
  padding: 20px 40px;
  margin: 0;
}

/* Desktop only - adjust grid columns */
@media screen and (min-width: 990px) {
  /* Override ALL grid calculations for the product page */
  .product.grid.grid--2-col-tablet {
    display: grid !important;
    grid-template-columns: 45% 55% !important; /* Force our layout */
    gap: 30px !important; /* Increased gap between columns */
    padding: 20px 30px !important; /* Keep original padding */
    max-width: 1400px !important;
    margin: 0 auto !important;
  }

  /* Force grid items to use full width - override ALL calculations */
  .product.grid .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Specifically target the media wrapper */
  .product .grid__item.product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important; /* Allow content to extend outside */
  }

  /* Specifically target the info wrapper */
  .product .grid__item.product__info-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Override the Dawn theme's product--medium width calculations */
  .product--medium:not(.product--no-media) .product__media-wrapper,
  .product--medium:not(.product--no-media) .product__info-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Product media wrapper */
.product__media-wrapper {
  position: relative;
  height: auto;
}

/* Desktop only - larger media container */
@media screen and (min-width: 990px) {
  .product__media-wrapper {
    margin-left: 0; /* Remove the push to right */
    max-width: 100%; /* Use full width of column */
    width: 100% !important; /* Ensure it uses full width */
  }

  /* Override the medium size class that might be limiting width */
  .product--medium .product__media-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Make the main product image larger on desktop */
  .product__media-item {
    width: 100% !important;
    max-width: none !important; /* Remove size limit */
  }

  .product-media-container {
    width: 100% !important;
    max-width: none !important; /* Remove size limit */
  }
}

/* Add border to the media container instead of individual items */
.product-media-container {
  border: 1px solid #f0f0f0 !important;
  border-radius: 8px !important;
  /* Override dynamic aspect ratio with fixed ratio */
  --ratio: 0.8 !important; /* 4:5 aspect ratio */
  --preview-ratio: 0.8 !important; /* 4:5 aspect ratio */
}

/* Remove border on desktop */
@media screen and (min-width: 990px) {
  .product-media-container {
    border: none !important;
    border-radius: 0 !important;
  }
}

/* Override the media container to use fixed aspect ratio */
.product-media-container .product__media {
  padding-top: 125% !important; /* 4:5 aspect ratio */
  position: relative !important;
}

/* Main product image container - fixed aspect ratio like collection cards */
.product__media-item {
  position: relative;
  width: 100%;
  background: white;
  overflow: hidden;
  margin-bottom: 0;
  border: none !important; /* Remove border to avoid double borders */
}

/* Product images - absolute positioned to fit within container */
.product__media-item img,
.product__media img,
.product-media-container img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: white !important;
}

/* Custom Fullscreen Product Modal */
.product-media-modal__dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: black !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  touch-action: none !important; /* Prevent touch scrolling */
}

/* Ensure modal is always on top and blocks interaction */
.product-media-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9998 !important;
  touch-action: none !important; /* Prevent touch scrolling */
}

/* Prevent body scroll when modal is open */
body.modal-open {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
  touch-action: none !important;
}

/* Hide header when zoom modal is open */
body.modal-open .shopify-section-header-sticky,
body.modal-open sticky-header,
body.modal-open .section-header,
body.modal-open .shopify-section-group-header-group,
body.modal-open header {
  display: none !important;
  z-index: 1 !important;
}

.product-media-modal__content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: black !important;
  padding: 0 !important;
}

/* Modal close button */
.product-media-modal__toggle {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000000 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.product-media-modal__toggle svg {
  width: 20px !important;
  height: 20px !important;
  color: black !important;
}

/* Modal navigation controls - all screen sizes */
.modal-nav-controls {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  padding: 10px 20px !important;
  border-radius: 30px !important;
  z-index: 1000000 !important;
}

/* Adjust position on mobile to account for Safari's bottom bar */
@media screen and (max-width: 749px) {
  .modal-nav-controls {
    bottom: 80px !important; /* Move higher on mobile to avoid Safari toolbar */
    padding: 12px 20px !important; /* Slightly larger touch targets on mobile */
  }

  .modal-nav-button {
    width: 44px !important; /* iOS minimum touch target size */
    height: 44px !important;
    font-size: 28px !important; /* Larger arrows for better visibility */
  }
}

/* For devices with notch/safe areas (newer iPhones) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .modal-nav-controls {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

.modal-nav-button {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: white !important;
  transition: background 0.2s !important;
  font-size: 24px !important;
  padding: 0 !important;
}

.modal-nav-button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.modal-nav-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.modal-nav-counter {
  color: white !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 60px !important;
  text-align: center !important;
}

/* Modal images container */
.modal-images-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.3s ease !important;
}

.modal-image-item {
  min-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px 100px !important;
}

.modal-image-item img,
.product-media-modal__content img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  background: white !important;
  transform-origin: center center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Enable smooth zoom transitions */
.product-media-modal__content img {
  transition: transform 0.1s ease !important;
}

/* Override overflow for zoomed images */
.product-media-modal__content {
  overflow: visible !important;
}

/* Ensure modal dialog doesn't cut off zoomed images */
.product-media-modal__dialog {
  overflow: hidden !important;
}

/* Hide all media items except the active one - but not in modal */
.product__media-wrapper .product__media-item {
  display: none;
}

.product__media-wrapper .product__media-item.is-active {
  display: block;
}

/* In modal, show all media items for navigation */
.product-media-modal .product__media-item {
  display: none !important;
}

.product-media-modal .product__media-item.active {
  display: block !important;
}

/* DESKTOP THUMBNAIL GALLERY STYLES */
@media screen and (min-width: 990px) {
  /* Main media gallery container - flex layout for side thumbnails */
  media-gallery {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;  /* Remove gap, use padding instead */
    align-items: flex-start !important;
    width: calc(100% + 40px) !important; /* Extend beyond container */
    margin-left: -40px !important; /* Pull to the left */
    padding-left: 0 !important; /* Remove any default left padding */
  }

  /* Remove padding from the media wrapper parent */
  .product__media-wrapper {
    padding-left: 0 !important;
  }

  /* Thumbnails on the left */
  .thumbnail-slider {
    order: -1 !important; /* Move thumbnails to the left */
    width: 100px !important;  /* Back to original width */
    padding: 0 !important;  /* Remove ALL padding */
    margin: 0 !important;
    margin-right: 15px !important;  /* Small space between thumbnails and main image */
    display: block !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  /* Override any mobile gutter padding on desktop */
  .thumbnail-slider.slider-mobile-gutter {
    padding: 0 !important;
  }

  /* Thumbnail list - vertical stack */
  .thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: flex-start;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Main image viewer takes remaining space */
  slider-component[id^="GalleryViewer"] {
    flex: 1 !important;
    order: 0 !important;
    position: relative !important;
    margin-left: 0 !important;
    overflow: visible !important;
    max-width: none !important; /* Remove max-width constraint */
    width: 100% !important;
  }

  /* Ensure the main image container doesn't overlap */
  slider-component[id^="GalleryViewer"] .product__media-list {
    margin-left: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  /* Make the actual media items larger */
  slider-component[id^="GalleryViewer"] .product__media-item {
    max-width: none !important;
    width: 100% !important;
  }

  /* Override container size limits on desktop */
  media-gallery .product-media-container {
    max-width: none !important;
    width: 100% !important;
  }

  media-gallery .product__media-item {
    max-width: none !important;
  }

  /* Disable horizontal scroll for desktop thumbnails */
  .thumbnail-slider .thumbnail-list {
    overflow-x: visible !important;
    overflow-y: auto !important;
    max-height: 600px !important;
    scroll-behavior: smooth !important;
  }

  /* Thumbnail items - square and consistent size */
  .thumbnail-list__item {
    width: 90px !important;  /* Back to original size */
    height: 112px !important;  /* Maintain aspect ratio */
    flex-shrink: 0 !important;
  }

  .thumbnail-list__item button {
    width: 100% !important;
    height: 100% !important;
    padding: 2px !important;
  }
}

/* Mobile and tablet - keep horizontal scroll */
@media screen and (max-width: 989px) {
  .thumbnail-slider {
    margin-top: 15px !important;
    width: 100% !important;
    display: block !important;
  }

  .thumbnail-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    padding: 0 !important;
  }
}

/* Thumbnail items default (desktop) */
.thumbnail-list__item button {
  border: 2px solid #e0e0e0 !important;
  border-radius: 4px !important;
  background: white !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block !important;
  overflow: hidden !important;
}

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

/* Active and hover states */
.thumbnail-list__item button:hover {
  outline: 2px solid #AE3930 !important;
  outline-offset: -2px !important;
  border-color: #AE3930 !important;
}

.thumbnail-list__item button[aria-current="true"] {
  outline: 2px solid #AE3930 !important;
  outline-offset: -2px !important;
  border-color: #AE3930 !important;
}

/* Hide navigation buttons on all screen sizes */
.thumbnail-slider .slider-button {
  display: none !important;
}

/* Thumbnail styling - removed to prevent conflicts with stacked layout */

/* Product info section */
.product__info-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 1000px !important;
  width: 100% !important;
}

.product__info-wrapper.grid__item {
  padding: 0 !important;
  margin: 0 !important;
}

.product__info-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove extra padding from Dawn's default styles */
.product__info-wrapper--extra-padding {
  padding: 0 !important;
}

/* Product title styling */
.product__title h1,
.product__title h2 {
  font-family: 'sofia-pro', sans-serif !important;
  font-weight: 600 !important; /* Semi-bold */
  color: #92251D !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Product title and price container */
.product__title {
  margin-bottom: 20px !important;
}

/* Desktop title wrapper - vertical layout */
@media screen and (min-width: 750px) {
  .product__title-price-wrapper {
    display: block !important; /* Changed from flex to block for desktop */
    width: 100%;
    margin-top: 0.5rem !important; /* Added reduced top margin */
    margin-bottom: 25px;
  }

  .product__info-desktop {
    display: block !important;
    margin-top: -0.5rem !important; /* Pull the whole container up */
  }
}

/* Mobile title wrapper - keep side-by-side */
@media screen and (max-width: 749px) {
  .product__title-price-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    margin-top: 0.25rem !important; /* Reduced top margin */
    margin-bottom: 25px;
    padding: 0 15px !important; /* Add horizontal padding */
  }

  .product__title-text {
    flex: 1;
  }

  .product__info-desktop {
    display: none !important;
  }

  /* Mobile price container - keep horizontal layout */
  .product__price-container--mobile {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  /* Add padding to all product info elements on mobile */
  .product__info-container .product-form__input,
  .product__info-container .product-color-swatches,
  .product__info-container .product-style-variants,
  .product__info-container .product-breadcrumb {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Size selector needs special handling due to horizontal scroll */
  .product-form__input--size {
    padding-left: 15px !important;
  }

  /* Add to cart button container */
  .product-form__buttons {
    padding: 0 15px !important;
    margin-bottom: 15px !important;
  }
}

/* Product title */
.product__title-text {
  font-family: 'sofia-pro', sans-serif !important;
  font-weight: 700 !important;
  color: #92251D !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* Brand link styling */
.product__brand-link {
  font-family: 'sofia-pro', sans-serif !important;
  font-size: 1.25rem !important; /* 20px */
  font-weight: 500 !important;
  color: #666 !important;
  text-decoration: none !important;
  display: inline-block !important; /* Only as wide as text */
  margin: -0.5rem 0 0.25rem 0 !important; /* Negative top margin to pull up */
  padding: 0 !important;
  line-height: 1.2 !important;
  transition: color 0.2s ease !important;
}

.product__brand-link:hover {
  color: #92251D !important;
  text-decoration: underline !important;
}

/* Price container */
.product__price-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Regular price - styled like sale price for consistency */
.product__title-price {
  font-family: 'sofia-pro', sans-serif !important;
  font-weight: 700 !important; /* Bold like sale price */
  color: #92251D !important; /* Red color for all prices */
  font-size: 24px !important; /* Slightly smaller than title */
  white-space: nowrap;
}

/* Sale price - inherits regular price styling */
.product__title-price--sale {
  color: #92251D !important; /* Red color for sale price */
  font-weight: 700 !important;
}

/* Compare at price (strikethrough) */
.product__title-price--compare {
  text-decoration: line-through !important;
  color: #999 !important;
  font-weight: 400 !important;
  font-size: 20px !important; /* Smaller than sale price */
}

/* Aanbieding badge */
.product__sale-badge {
  background-color: #92251D !important;
  color: white !important;
  font-family: 'sofia-pro', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  margin-right: 5px !important;
}

/* Hide default price block */
.product__title + #price-* {
  display: none;
}

/* All text to Sofia Pro */
.product__info-container * {
  font-family: 'sofia-pro', sans-serif !important;
}

/* Brand name styling */
.product__text.subtitle {
  font-family: 'sofia-pro', sans-serif !important;
  color: #666 !important;
  font-size: 16px !important;
  margin-top: -40px !important;
  margin-bottom: 10px !important;
}

/* Article code styling - specific targeting */
.product__text.subtitle:nth-of-type(2) {
  margin-top: 0 !important; /* Reset the negative margin for article code */
  margin-bottom: 15px !important;
}

/* Size chart link styling */
.size-chart-link {
  font-family: 'sofia-pro', sans-serif !important;
  color: #999 !important;
  font-size: 14px !important;
  text-decoration: underline !important;
  font-weight: normal !important;
  margin-left: 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.size-chart-link:hover {
  color: #92251D !important;
  text-decoration: underline !important;
}

/* Hide taxes included text */
.product__tax {
  display: none !important;
}

/* ========================================
   Stock Indicator
   ======================================== */

.product-stock-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
  font-family: 'sofia-pro', sans-serif !important;
}

.stock-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  position: relative !important;
}

/* Green dot for in stock */
.stock-dot--available {
  background-color: #2A8644 !important;
  animation: pulse-green 2s infinite !important;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(42, 134, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(42, 134, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(42, 134, 68, 0);
  }
}

/* Orange dot for low stock */
.stock-dot--low {
  background-color: #ff8c00 !important;
  animation: pulse-orange 2s infinite !important;
}

@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 140, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
  }
}

/* Red dot for out of stock */
.stock-dot--unavailable {
  background-color: #dc3545 !important;
}

.stock-text {
  font-size: 0.9375rem !important; /* 15px */
  color: #333 !important;
  font-weight: 500 !important;
}

/* Desktop alignment */
@media screen and (min-width: 990px) {
  .product-stock-indicator {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    padding-left: 0 !important; /* Align with other form elements */
  }
}

/* Mobile alignment */
@media screen and (max-width: 749px) {
  .product-stock-indicator {
    padding: 0 15px !important;
    margin-bottom: 0.75rem !important;
  }

  .stock-text {
    font-size: 0.875rem !important; /* 14px */
  }
}

/* ========================================
   Payment Options Section
   ======================================== */

.product-payment-options {
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.payment-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.payment-icon-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.payment-icon {
  display: block !important;
  height: 32px !important;
  width: auto !important;
  max-width: 60px !important;
  object-fit: contain !important;
}

.payment-icon svg {
  height: 100% !important;
  width: auto !important;
  display: block !important;
}

@media screen and (max-width: 749px) {
  .product-payment-options {
    margin-top: 1rem !important;
  }

  .payment-icons {
    gap: 8px !important;
  }

  .payment-icon {
    height: 24px !important;
    max-width: 50px !important;
  }
}

/* ========================================
   Product USPs Section
   ======================================== */

.product-usps {
  margin-top: 1.5rem !important;
  padding: 1.5rem !important;
  background-color: #f8f8f8 !important;
  border-radius: 8px !important;
  font-family: 'sofia-pro', sans-serif !important;
}

.product-usp {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}

.product-usp:last-child {
  margin-bottom: 0 !important;
}

.usp-icon {
  flex-shrink: 0 !important;
  margin-right: 12px !important;
  width: 24px !important;
  height: 24px !important;
}

.usp-text {
  font-size: 0.9375rem !important; /* 15px */
  color: #333 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Desktop adjustments */
@media screen and (min-width: 990px) {
  .product-usps {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .product-usps {
    margin: 1rem 15px !important;
    padding: 1rem !important;
  }

  .usp-text {
    font-size: 0.875rem !important; /* 14px */
  }
}

/* Product Color Swatches */
.product-color-swatches {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.product-color-swatches .form__label {
  font-family: 'sofia-pro', sans-serif !important;
  font-size: 1.5rem !important; /* 24px - larger label text */
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 0.625rem !important; /* Same as size label */
  display: block !important;
}

.color-swatches-container {
  display: flex !important;
  gap: 0.75rem !important; /* Same gap as size buttons */
  flex-wrap: wrap !important;
  align-items: center !important;
}

a.product-color-swatch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 5rem !important; /* 80px - same as size buttons */
  height: 5rem !important; /* 80px - same as size buttons */
  border-radius: 50% !important;
  border: 2px solid #e0e0e0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  position: relative !important;
  background-clip: padding-box !important;
  text-decoration: none !important;
}

a.product-color-swatch:hover {
  transform: scale(1.05) !important; /* Same hover scale as size buttons */
  border-color: #000000 !important; /* Black hover color */
}

a.product-color-swatch.active {
  border: 2px solid #000000 !important; /* Black active border */
  transform: scale(1.05) !important;
  pointer-events: none !important; /* Disable click on current color */
}

/* Mobile responsive for color swatches */
@media screen and (max-width: 749px) {
  a.product-color-swatch {
    width: 4rem !important; /* 64px - same as size buttons on mobile */
    height: 4rem !important; /* 64px - same as size buttons on mobile */
  }

  .color-swatches-container {
    gap: 0.5rem !important; /* Same gap as size buttons on mobile */
  }
}

.product__text,
.product__description,
.product__inventory,
.product-form__label,
.product-form__input label,
.product-form__buttons button {
  font-family: 'sofia-pro', sans-serif !important;
}

/* Product description - prevent it from spreading too wide */
.product__description {
  max-width: 600px;
  line-height: 1.6;
  font-size: 16px;
}

/* Adjust media gallery for smaller size */
.product__media-list {
  max-width: 100%;
}

.product-media-modal__content img {
  object-fit: contain;
  background: white;
}

/* Removed thumbnail section CSS to prevent conflicts with stacked layout */

.slider-button {
  background: white;
  border: 1px solid #e0e0e0;
}

/* ===== TABLET STYLES (750px - 989px) ===== */
@media screen and (min-width: 750px) and (max-width: 989px) {
  /* Thumbnail gallery adjustments for tablets */
  .thumbnail-slider {
    margin: 15px 0 !important;
    padding: 0 !important;
  }

  .thumbnail-list {
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .thumbnail-list__item,
  .thumbnail-list__item.slider__slide {
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
  }
}

/* ===== DESKTOP STYLES (990px+) ===== */
@media screen and (min-width: 990px) {
  /* Desktop thumbnail sizing */
  .thumbnail-list__item,
  .thumbnail-list__item.slider__slide {
    width: 100px !important;
    height: 100px !important;
    flex: 0 0 100px !important;
  }
}

/* Tablet responsive - FULL WIDTH LIKE MOBILE for 750px-989px */
@media screen and (min-width: 750px) and (max-width: 989px) {
  /* Remove top padding from product section ONLY - not header */
  product-info,
  product-info[id^="MainProduct-"],
  product-info.gradient.color-scheme-1,
  product-info[data-section*="template--"],
  product-info[data-section="template--26184032452872__main"] {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }

  /* Target the specific product section with higher specificity */
  .shopify-section:has(product-info) {
    padding-top: 0 !important;
  }

  /* Move only the product wrapper up, not the entire component */
  product-info .page-width {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Remove the negative margin approach - just use padding */
  product-info#MainProduct-template--26184032452872__main,
  product-info[id^="MainProduct-"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Keep default spacing for header section */
  .shopify-section-header .page-width {
    /* Don't override - use theme defaults */
  }

  /* Fix zoom icon position - keep it relative to the image, not pushed up */
  .product__media-icon {
    position: absolute !important;
    top: 40px !important; /* Increased from 10px to account for any overlap */
    right: 10px !important;
    z-index: 50 !important; /* Lower z-index to avoid header overlap */
  }

  /* Ensure media wrapper is positioned correctly */
  .product__media-wrapper {
    position: relative !important;
    margin-top: 0 !important;
  }

  /* Main product grid - single column, full width like mobile */
  .product,
  .product.grid,
  .product.product--medium,
  .product.product--left,
  .product.product--thumbnail,
  .product.product--mobile-show,
  .product.grid.grid--1-col,
  .product.grid.grid--2-col-tablet {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Single column */
    gap: 30px !important;
    padding: 0 !important; /* NO padding - full width */
    margin: 0 !important; /* NO margins */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid items - remove ALL margins and padding */
  .product .grid__item,
  .product__media-wrapper.grid__item,
  .product__info-wrapper.grid__item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Product media wrapper - FULL viewport width like mobile */
  .product__media-wrapper,
  .grid__item.product__media-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Media gallery - full width */
  media-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Product media container - full width */
  .product-media-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Main product image - full width with aspect ratio */
  .product__media-item {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-bottom: 125% !important; /* 4:5 aspect ratio */
    position: relative !important;
    margin: 0 !important;
  }

  /* Product info wrapper - full width with padding for text */
  .product__info-wrapper,
  .grid__item.product__info-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important; /* Keep padding for text content */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Thumbnail gallery - horizontal scroll */
  .thumbnail-slider {
    width: 100% !important;
    margin: 15px 0 !important;
    display: block !important;
  }

  .thumbnail-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide scrollbar but keep functionality */
  .thumbnail-list::-webkit-scrollbar {
    height: 3px !important;
  }

  .thumbnail-list::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .thumbnail-list::-webkit-scrollbar-thumb {
    background: #ddd !important;
    border-radius: 3px !important;
  }

  /* Thumbnail items */
  .thumbnail-list__item {
    width: 80px !important;
    height: 100px !important;
    flex: 0 0 80px !important;
  }

  /* Override the desktop thumbnail layout */
  media-gallery {
    flex-direction: column !important; /* Stack vertically on tablets */
  }

  /* Main slider component - full width */
  slider-component[id^="GalleryViewer"],
  .product__media-wrapper slider-component {
    order: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Product media list - enable horizontal scroll like mobile */
  .product__media-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100vw !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Each media item takes full viewport width */
  .product__media-list .product__media-item {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 100vw !important;
    scroll-snap-align: start !important;
    display: block !important; /* Show all items for scrolling */
  }

  /* Hide scrollbar */
  .product__media-list::-webkit-scrollbar,
  slider-component[id^="GalleryViewer"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Thumbnails below main image */
  .thumbnail-slider {
    order: 1 !important;
    width: 100% !important;
    margin: 15px 0 !important;
    padding: 0 20px !important; /* Add padding to match info section */
    box-sizing: border-box !important;
  }

  /* Override any conflicting styles */
  .product__media-wrapper .product__media-item {
    display: block !important; /* Show all items on tablets too */
  }

  .product__media-wrapper .product__media-item.is-active {
    display: block !important;
  }
}

/* Mobile responsive - only for screens smaller than 750px */
@media screen and (max-width: 749px) {
  .product {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0; /* No padding for full width */
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden; /* Prevent any grid overflow */
  }

  .product__media-wrapper {
    position: relative;
    top: 0;
    width: 100vw; /* Full viewport width */
    max-width: 100vw;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .product__info-wrapper {
    max-width: 100%;
    padding: 0 20px; /* Keep padding for text content */
  }

  .product__title h1,
  .product__title h2,
  .product__title-text,
  .product__title-price {
    font-size: 24px !important;
  }

  .product__description {
    max-width: 100%;
  }
}

/* ===== MOBILE STYLES (MOBILE FIRST APPROACH) ===== */
@media screen and (max-width: 749px) {
  /* Fix horizontal overflow on mobile */
  body {
    overflow-x: clip !important;
  }

  /* --- THUMBNAIL GALLERY FIX --- */

  /* 1. Show hidden thumbnails */
  .thumbnail-slider.small-hide,
  slider-component.thumbnail-slider.small-hide {
    display: block !important;
  }

  /* 2. Thumbnail slider container - horizontal carousel */
  .thumbnail-slider,
  #GalleryThumbnails-template--23808941228335__main {
    display: block !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important; /* Allow horizontal scroll */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    position: relative !important;
  }

  /* Add subtle gradient on right edge when scrollable */
  .thumbnail-slider::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* 3. Thumbnail list - horizontal carousel */
  .thumbnail-list,
  .thumbnail-list.slider,
  .thumbnail-list.slider--mobile,
  #Slider-Thumbnails-template--23808941228335__main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* NO WRAP - keep in single row */
    gap: 8px !important;
    justify-content: flex-start !important; /* Start from left */
    align-items: center !important;
    width: max-content !important; /* Width based on content */
    min-width: 100% !important;
    padding: 5px !important; /* 5px padding to see border */
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Smooth scrolling */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide scrollbar but keep functionality */
  .thumbnail-slider::-webkit-scrollbar {
    display: none !important;
  }

  .thumbnail-slider {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
  }

  /* 4. Individual thumbnail items - FIXED SIZE */
  .thumbnail-list__item,
  .thumbnail-list__item.slider__slide,
  li.thumbnail-list__item {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important; /* Prevent shrinking */
    min-height: 70px !important;
    max-width: 70px !important; /* Prevent growing */
    max-height: 70px !important;
    flex: 0 0 70px !important; /* Don't grow or shrink */
    display: block !important;
    position: relative !important; /* For button positioning */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* 5. Thumbnail buttons - fill the list item */
  .thumbnail-list__item button {
    width: 70px !important;
    height: 70px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 6. Thumbnail images */
  .thumbnail-list__item button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 7. Active state - with higher specificity */
  .thumbnail-list__item button {
    border: 2px solid #e0e0e0 !important;
  }

  .thumbnail-list__item button[aria-current="true"] {
    border: 2px solid #AE3930 !important;
    box-shadow: 0 0 0 1px #AE3930 !important;
  }

  /* Hover state */
  .thumbnail-list__item button:hover {
    border-color: #999 !important;
  }

  .thumbnail-list__item button[aria-current="true"]:hover {
    border-color: #AE3930 !important;
  }

  /* 8. Hide slider buttons */
  .thumbnail-slider .slider-button {
    display: none !important;
  }

  /* 9. Remove any ::after elements */
  .thumbnail-list:after,
  .thumbnail-list.slider:after {
    display: none !important;
  }
  .product__title-price-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important; /* Remove gap between items */
  }

  .product__title-price {
    margin-left: 0 !important;
    margin-top: 0.3rem !important; /* Reduced from 10px */
  }

  .product__title h1,
  .product__title h2,
  .product__title-text {
    max-width: 100% !important;
    font-size: 16px !important;
    margin-bottom: 0 !important; /* Remove bottom margin */
  }

  /* Fix overflow caused by negative margins */
  .product__media-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Full width media container on mobile */
  .product-media-container {
    border-radius: 0 !important; /* Remove border radius on mobile */
    border: none !important; /* Remove all borders on mobile */
    width: 100vw !important; /* Full viewport width */
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important; /* Lower z-index than thumbnails */
    box-sizing: border-box !important;
  }

  /* Media list - horizontal scrolling container with proper snapping */
  .product__media-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100vw !important;
    height: 125vw !important; /* Match item height */
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important; /* Force stop at each image */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-padding: 0 !important; /* Ensure proper snap boundaries */
  }

  /* Hide scrollbar on media list */
  .product__media-list::-webkit-scrollbar {
    display: none !important;
  }

  .product__media-list {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* Main product images - each takes full width with proper snapping */
  .product__media-item {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 100vw !important;
    flex-shrink: 0 !important; /* Prevent any shrinking */
    scroll-snap-align: center !important; /* Snap to center for better alignment */
    scroll-snap-stop: always !important; /* Stop at each image */
    margin: 0 !important;
    padding: 0 !important; /* Remove padding */
    position: relative !important;
    display: block !important; /* Show all items for scrolling */
    height: 125vw !important; /* Set height directly instead of padding */
    max-height: 125vw !important;
  }

  /* Override the hiding of inactive items on mobile */
  .product__media-item,
  .product__media-item.is-active {
    display: block !important;
  }

  /* Ensure images fill their container properly */
  .product__media-item img,
  .product__media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Main gallery viewer - enable horizontal scroll */
  .product__media-wrapper slider-component#GalleryViewer-template--23808941228335__main,
  .product__media-wrapper > [id^="GalleryViewer"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide scrollbar for main gallery */
  slider-component#GalleryViewer-template--23808941228335__main::-webkit-scrollbar {
    display: none !important;
  }

  /* Add page dots indicator */
  .product__media-wrapper::after {
    content: '' !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
}

/* Ensure variant picker uses Sofia Pro */
.product-form__input label,
variant-selects label,
variant-radios label {
  font-family: 'sofia-pro', sans-serif !important;
}

/* Ensure price components use correct styling */
.price {
  font-family: 'sofia-pro', sans-serif !important;
}

.price__container {
  margin: 0 !important;
}

.price-item {
  font-family: 'sofia-pro', sans-serif !important;
  color: #000000 !important;
}

/* Style Variants Styling */
.product-style-variants {
  margin-top: 20px;
  margin-bottom: 20px;
}

.product-style-variants .form__label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 1.5rem; /* 24px - larger label text */
  color: #333;
  font-family: 'sofia-pro', sans-serif;
}

.style-variants-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.product-style-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  width: 80px;
  cursor: pointer;
}

.product-style-variant:hover {
  border-color: #AE3930;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-style-variant.active {
  border-color: #AE3930;
  box-shadow: 0 0 0 1px #AE3930;
}

.product-style-variant img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

.variant-placeholder {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.variant-placeholder span {
  font-size: 10px;
  color: #666;
  text-align: center;
  font-family: 'sofia-pro', sans-serif;
}

/* Variant label removed - now showing style name in header */
.variant-label {
  display: none !important;
}

/* Mobile adjustments for style variants */
@media screen and (max-width: 749px) {
  .style-variants-container {
    gap: 8px;
  }

  .product-style-variant {
    width: 70px;
  }

  .product-style-variant img,
  .variant-placeholder {
    height: 85px;
  }
}

/* ========================================
   Accordion Text Styling
   ======================================== */

/* Make accordion text black and normal weight */
.product__accordion .accordion__content {
  color: #000 !important;
  font-weight: normal !important;
}

/* Make accordion text slightly smaller on mobile */
@media screen and (max-width: 749px) {
  .product__accordion .accordion__content {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5 !important;
  }
}

/* ========================================
   Sticky Add to Cart Bar - Mobile Only
   ======================================== */

.sticky-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: none;
}

/* Only show on mobile */
@media screen and (max-width: 749px) {
  .sticky-cart-bar:not([hidden]) {
    display: block;
  }
}

.sticky-cart-bar--visible {
  transform: translateY(0);
}

.sticky-cart-bar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  gap: 10px;
}

.sticky-cart-bar__product-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sticky-cart-bar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: 'sofia-pro', sans-serif;
}

.sticky-cart-bar__price--current {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.sticky-cart-bar__price--compare {
  text-decoration: line-through;
  color: #999;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}

.sticky-cart-bar__price--sale {
  color: #92251D;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.sticky-cart-bar__button {
  flex-shrink: 0;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  /* Green background with white text to match main button */
  background: #4CAF50 !important; /* Green color */
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}

.sticky-cart-bar__button:hover:not(:disabled) {
  background: #45a049 !important; /* Darker green on hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sticky-cart-bar__button:disabled {
  background: #ccc !important;
  opacity: 0.8;
  cursor: not-allowed;
}

/* Hide on desktop */
@media screen and (min-width: 750px) {
  .sticky-cart-bar {
    display: none !important;
  }
}

/* Mobile-specific styling for sticky cart bar */
@media screen and (max-width: 749px) {
  /* Make it float with rounded corners */
  .sticky-cart-bar.sticky-cart-bar--visible {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    border: none !important;
    border-top: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  /* Adjust content spacing for mobile */
  .sticky-cart-bar__content {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Give more space to product info/price area */
  .sticky-cart-bar__product-info {
    flex: 1.5 !important;
  }

  /* Style the button with same green as main add to cart button */
  .sticky-cart-bar__button.button.button--primary {
    background: #2A8644 !important;
    background-color: #2A8644 !important;
    border: none !important;
    border-radius: 8px !important;
    /* Smaller padding on mobile for more room */
    padding: 10px 15px !important;
    font-size: 13px !important;
  }

  /* Remove focus state borders */
  .sticky-cart-bar__button.button.button--primary:focus,
  .sticky-cart-bar__button.button.button--primary:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Hide the ::after pseudo-element that creates borders */
  .sticky-cart-bar__button.button.button--primary::after {
    display: none !important;
  }

  /* Darker hover state */
  .sticky-cart-bar__button.button.button--primary:hover:not(:disabled) {
    background: #1e5f32 !important;
    background-color: #1e5f32 !important;
  }
}