/** Shopify CDN: Minification failed

Line 1142:0 Unexpected ")"

**/
/* ============================================
   CUSTOM.CSS - ORGANIZED CUSTOM EDITS
   ============================================ */

/* ============================================
   SECTION: EXTERNAL WIDGETS
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: SW Floating Container | Date: 2025-12-14
============================================ */
div#sw_floating_container {
  --size: 65px !important;
  z-index: 100 !important;
  border: none !important;
  .image.svelte-191a2su:hover,
  .scaled_image.svelte-191a2su {
    transform: scale(0.95) !important;
  }
}

/* Mobile viewport adjustment */
@media screen and (max-width: 699px) {
  div#sw_floating_container {
    --size: 50px !important;
    --spacing-right: 30px !important;
    --spacing-bottom: 85px !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: GoAffPro Open Container Fix | Date: 2025-01-13
What: Keep image fixed at right, text expands left
============================================ */
.sw_container.open-container.open-container-right {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
}

.sw_container.open-container.open-container-right .image {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: scale(0.95) !important;
  flex-shrink: 0 !important;
}

.sw_container.open-container.open-container-right .content-container {
  margin-right: 70px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: External Widget Font Override | Date: 2025-01-21
============================================ */
.ElementsWidget-prefix .R-TextHeading,
.ElementsWidget .R-TextHeading,
.ReviewsWidget .R-TextHeading {
  font-family: var(--text-font-family) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Reviews.io Dark Mode | Date: 2025-10-06
============================================ */

/* Light Mode - Override Reviews.io defaults for better theme integration */
.ElementsWidget-prefix .ElementsWidget {
  --common-star-color: rgb(var(--color-dark)); /* Theme dark color for stars */
}

/* General Styling - Content list item spacing */
.ElementsWidget-prefix .ElementsWidget .R-ContentList .R-ContentList__item {
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* Dark Mode - Slider indicator background */
html[data-display='dark'] .R-SliderIndicator__bg {
  background-color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] .ElementsWidget-prefix .ElementsWidget {
  --slider-indicator-height: 2px;
}

/* Dark Mode - Override Reviews.io CSS variables
 * Applies whenever the theme is displaying the dark palette via data-display="dark"
 */
html[data-display='dark'] .ElementsWidget-prefix .ElementsWidget {
  --primary-button-bg-color: rgb(var(--color-light));
  --primary-button-border-color: rgb(var(--color-light));
  --primary-button-text-color: rgb(var(--color-dark));
  --secondary-button-border-color: rgb(var(--color-light));
  --secondary-button-text-color: rgb(var(--color-light));
  --common-star-color: rgb(var(--color-light));
  --common-star-disabled-color: rgba(var(--color-light), 0.25);
  --heading-text-color: rgb(var(--color-light));
  --body-text-color: rgb(var(--color-light));
  --inputfield-text-color: rgb(var(--color-light));
  --inputfield-border-color: rgba(var(--color-light), 0.2);
  --common-border-color: rgb(var(--color-light));
  --slider-indicator-bg-color: rgba(var(--color-light), 0.3);
  --slider-indicator-button-color: rgb(var(--color-light));
  --badge-icon-color: rgb(var(--color-light));
  --badge-text-color: rgb(var(--color-light));
  --avatar-thumbnail-text-color: rgb(var(--color-light));
  --avatar-thumbnail-bg-color: rgba(var(--color-light), 0.1);
  --mediaslider-scroll-button-icon-color: rgb(var(--color-light));
  --pagination-tab-text-color: rgb(var(--color-light));
  --pagination-tab-active-text-color: rgb(var(--color-light));
  --pagination-tab-active-border-color: rgb(var(--color-light));
  --sentiment-panel-border-color: rgba(var(--color-light), 0.1);
  --sentiment-heading-text-color: rgb(var(--color-light));
  --sentiment-body-text-color: rgb(var(--color-light));
  --sentiment-header-bg-color: rgba(var(--color-light), 0.04);
  --sentiment-pagination-tab-text-color: rgb(var(--color-light));
  --sentiment-pagination-tab-active-text-color: rgb(var(--color-light));
  --sentiment-pagination-tab-active-border-color: rgb(var(--color-light));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Shoe-specific layout fixes | Date: 2025-01-27
What: Fix rating position and image gaps on shoe-specific template
============================================ */
@media screen and (min-width: 1000px) {
  /* Remove gap between brand logo and shoe image */
  [data-block-id='image_aMmYYC'] {
    margin-top: 0 !important;
  }

  /* Constrain shoe image to fit between logo and price row */
  [data-block-id='image_aMmYYC'] .product-info__image {
    max-height: 100px;
  }

  [data-block-id='image_aMmYYC'] .product-info__image img {
    max-height: 100px;
    width: auto;
    object-fit: contain;
  }

  /* Rating stays below shoe image but pulled up slightly */
  .product-info:has([data-block-id='image_aMmYYC']) .product-info__liquid--after-price {
    margin-top: -2.2em;
    margin-left: auto;
    width: fit-content;
  }

  /* Separator clears floats */
  .product-info:has([data-block-id='image_aMmYYC']) [data-block-type='separator'] {
    clear: both;
  }
}

/* Mobile: shoe-specific rating margin */
@media screen and (max-width: 999px) {
  .product-info:has([data-block-id='image_aMmYYC']) .product-info__liquid--after-price {
    margin-top: -2.85em;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Reviews.io rating in static liquid block | Date: 2025-01-27
What: Style reviews.io rating and position after price inline
============================================ */
/* Position rating inline with price using negative margin (no underline issues) */
.product-info__liquid--after-price {
  margin-top: -2.2em;
  margin-left: auto;
  width: fit-content;
  --product-info-block-spacing: 0px;
}

@media screen and (max-width: 999px) {
  .product-info__liquid--after-price {
    margin-top: -2.65em;
  }
}

/* Animated underline for rating - use wrapper instead of link to avoid margin issues */
.product-info__liquid--after-price {
  position: relative;
}

.product-info__liquid--after-price .rating.reversed-link {
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Underline on the static container - positioned below the price row */
.product-info__liquid--after-price::after {
  content: '';
  position: absolute;
  bottom: -12px; /* Push below the price row */
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left; /* Appear from left, disappear to left */
  transition: transform 0.3s ease-in-out;
}

.product-info__liquid--after-price:hover::after {
  transform: scaleX(1);
}

/* Reviews.io snippet inside .rating wrapper */
.rating .ruk_rating_snippet {
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
  cursor: pointer;
  color: rgb(var(--text-color));
  height: 14px; /* Match price height to prevent layout shift */
  min-width: 129px;
  line-height: 1;
}

/* Reserve space for reviews.io rating to prevent layout shift */
.rating:has(.ruk_rating_snippet) {
  height: 14px;
  min-width: 129px;
  line-height: 1;
}

/* Hide empty reviews.io rating but reserve space */
.rating .ruk_rating_snippet:empty {
  visibility: hidden;
}

.rating:has(.ruk_rating_snippet:empty) {
  visibility: hidden;
}

/* Count styling - matches theme text-sm */
.rating .ruk-rating-snippet-count {
  font-size: 14px !important;
  color: inherit;
  line-height: 1;
  order: -1;
  position: relative;
  top: -1px;
}

/* Star styling */
.rating .ruk-rating-snippet-stars {
  display: inline-flex;
  align-items: center;
  height: 14px;
}

.rating .ruk-rating-snippet-stars svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Dark mode rating styles */
html[data-display='dark'] .rating .ruk_rating_snippet,
html[data-display='dark'] .rating .ruk-rating-snippet-count {
  color: rgb(var(--text-color)) !important;
}

html[data-display='dark'] .rating .ruk-rating-snippet-stars svg {
  fill: currentColor !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark mode buy button colors | Date: 2025-01-25
What: Set primary button colors in dark mode
============================================ */
html[data-display='dark'] {
  --button-background-primary: 236 226 217; /* #ece2d9 */
  --button-text-primary: 46 46 46; /* #2e2e2e */
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Testimonial Dark Mode Background | Date: 2026-01-16
============================================ */
html[data-display='dark'] .testimonial.rounded-sm.bg-custom {
  background: rgb(var(--color-dark-light));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: FORM ELEMENTS & INPUTS
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Locale Selector Font Size | Date: 2025-10-29
============================================ */
.md-form__select__span {
  font-size: var(--text-md);
  line-height: 1.4;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Form Elements Light/Dark Mode Colors | Date: 2025-10-29
============================================ */

/* Light Mode - Manual Selection */
html[data-display='light'] .floating-label,
html[data-display='light'] .circle-chevron,
html[data-display='light'] .self-submit-button,
html[data-display='light'] .input,
html[data-display='light'] .textarea,
html[data-display='light'] .select {
  color: rgb(var(--color-dark));
}

html[data-display='light'] .circle-chevron {
  background: rgb(var(--color-dark) / 0.1);
}

html[data-display='light'] .circle-chevron:hover:not([disabled]) {
  background: rgb(var(--color-dark));
  color: rgb(var(--color-light));
}

/* Dark Mode (manual or auto follows data-display) */
html[data-display='dark'] .floating-label,
html[data-display='dark'] .circle-chevron,
html[data-display='dark'] .self-submit-button,
html[data-display='dark'] .input,
html[data-display='dark'] .textarea,
html[data-display='dark'] .select {
  color: rgb(var(--color-light));
}

html[data-display='dark'] .circle-chevron {
  background: rgb(var(--color-light) / 0.1);
}

html[data-display='dark'] .circle-chevron:hover:not([disabled]) {
  background: rgb(var(--color-light));
  color: rgb(var(--color-dark));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Input Focus States | Date: 2025-10-05
============================================ */
html[data-display='dark']
  :is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: rgb(var(--color-light)) !important;
  box-shadow: 0 0 0 1px rgba(var(--color-light), 0.25) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Input Text & Cart Discount Button | Date: 2025-10-05
============================================ */
html[data-display='dark']
  :is(.input, .textarea, .select, .custom-length-input) {
  color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] .cart-discount-save-button .button {
  --button-background: var(--color-light);
  --button-text-color: var(--color-dark);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Form Contrast | Date: 2025-01-04
============================================ */
html[data-display='dark'] input,
html[data-display='dark'] select,
html[data-display='dark'] textarea {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Focus Indicators | Date: 2025-01-04
============================================ */
.dark *:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.dark a:focus-visible,
.dark button:focus-visible,
.dark [role='button']:focus-visible {
  outline-color: rgb(96, 165, 250); /* Blue-400: 5.2:1 contrast */
  outline-width: 2px;
}

.dark input:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible {
  outline-color: rgb(96, 165, 250);
  border-color: rgb(96, 165, 250);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Custom Length Property Styles | Date: 2025-09-25
============================================ */
.product-info__custom-length-property {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.custom-length-input-wrapper {
  position: relative;
}

.custom-length-input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Hide number input spinners */
.custom-length-input::-webkit-outer-spin-button,
.custom-length-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-length-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.custom-length-input.is-error {
  border-color: rgb(var(--text-error));
}

.custom-length-input.is-error:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--text-error), 0.2);
}

.custom-length-error {
  margin-top: var(--spacing-2);
  color: rgb(var(--text-error));
  font-size: 0.875rem;
  line-height: 1.4;
}

.required-indicator {
  color: rgb(var(--text-error));
  margin-left: 0.25rem;
  font-weight: bold;
}

/* Disabled state for add to cart buttons */
button[name='add'].is-disabled,
button[type='submit'][form*='product-form'].is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Quick buy specific styles */
.quickbuy-custom-length {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* Animation for error message */
.custom-length-error {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Custom length error color | Date: 2025-09-26
============================================ */
.product-info__custom-length-property .custom-length-error {
  color: #c0392b !important; /* fallback red */
}

.product-info__custom-length-property .custom-length-input.is-error {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.2) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Custom length unit badge | Date: 2025-09-26
============================================ */
.form-control {
  position: relative;
}
.custom-length-unit {
  position: absolute;
  right: 14px;
  /* top is set dynamically in JS to pin to input baseline */
  transform: none;
  color: rgb(var(--text-subdued));
  font-size: 0.875rem;
  pointer-events: none;
  line-height: 1;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Search input border bottom | Date: 2025-01-27
============================================ */
.search-input {
  border-bottom-width: 1px;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: DARK MODE OVERRIDES
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Brand Logo Invert | Date: 2025-10-29
============================================ */

/* Dark Mode (manual or auto via data-display="dark") */
html[data-display='dark'] .multiple-images-with-text__image-list img,
html[data-display='dark'] img.logo-list__image {
  filter: invert(1) brightness(0.9);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Logo Toggle | Date: 2025-10-04
============================================ */
.header__logo-light {
  display: inline;
}
.header__logo-dark {
  display: none;
}

html[data-display='dark'] .header__logo-light {
  display: none;
}
html[data-display='dark'] .header__logo-dark {
  display: inline;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Section Inversion | Date: 2025-10-04
============================================ */

/* Strategy: Invert section backgrounds and text colors in dark mode
 * - Dark backgrounds (46 46 46) → Softer grey (#383737)
 * - Light text (236 226 217) stays light for contrast
 * - Light backgrounds (236 226 217) → Dark (46 46 46)
 * - Dark text (46 46 46) → Light (236 226 217)
 */

/* Invert dark backgrounds to softer grey */
html[data-display='dark']
  :is(.section, .bg-custom)[style*='--background'][style*='46 46 46'] {
  --background: var(--color-dark-light) !important;
}

/* Keep light text on inverted backgrounds */
html[data-display='dark']
  :is(
    .section.text-custom,
    .text-custom
  )[style*='--text-color'][style*='236 226 217']:not(
    .collection-card__content-wrapper
  ):not(.content-over-media *):not(.slideshow *) {
  --text-color: var(--color-light) !important;
}

/* Invert light backgrounds to dark */
html[data-display='dark']
  :is(.section, .bg-custom)[style*='--background'][style*='239 227 217'] {
  --background: 46 46 46 !important;
}

/* Invert dark text to light */
html[data-display='dark']
  :is(
    .section.text-custom,
    .text-custom
  )[style*='--text-color'][style*='46 46 46']:not(
    .collection-card__content-wrapper
  ):not(.content-over-media *):not(.slideshow *) {
  --text-color: 236 226 217 !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: AI Shoelace Swatches Dark Mode | Date: 2025-10-04
============================================ */
/* Target all ai-shoelace-swatches sections (dynamic ID-based classes) */
html[data-display='dark'] [class*='ai-shoelace-swatches-'] {
  background-color: rgb(
    var(--color-dark-light)
  ) !important; /* #383737 - softer grey matching other inverted sections */
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Offer Block Dark Mode | Date: 2025-10-04
============================================ */
html[data-display='dark'] .offer.bg-custom {
  --background: var(--color-dark-light) !important;
}

html[data-display='dark'] .offer.text-custom {
  --text-color: var(--color-light) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Selected Variant Dark Mode | Date: 2025-10-04
============================================ */
html[data-display='dark']
  :is(
    :checked + .block-swatch,
    .block-swatch.is-selected,
    label.block-swatch.is-selected
  ) {
  background-color: rgb(var(--color-dark-light)) !important;
  border: 1px solid rgb(var(--color-light));
}

html[data-display='dark'] :is(label.block-swatch:hover, a.block-swatch:hover) {
  background-color: rgb(var(--color-dark-light)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: PRODUCT COMPONENTS
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product card rating overlay | Date: 2025-09-26
============================================ */
.product-card__figure {
  position: relative;
}

.product-card__rating-overlay {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Do not intercept pointer events; use image's cursor behavior underneath */
.product-card__rating-overlay .rating {
  pointer-events: none;
  cursor: inherit;
}

.rating--overlay {
  color: #6f665e;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rating--overlay .text-sm {
  display: inline;
  color: #6f665e;
  margin-inline-end: 0;
}

/* Ensure star icons use the overlay color */
.rating--overlay .rating__stars .rating__star,
.rating--overlay .rating__stars .rating__star--empty {
  color: #6f665e;
}

.rating--overlay .rating__stars .rating__star {
  width: 14px;
  height: 14px;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Overlay compact layout | Date: 2025-09-26
============================================ */
.product-card__rating-overlay .rating,
.rating--overlay {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1, 4px);
}

.rating--overlay .rating__stars {
  display: inline-flex;
  position: relative;
  top: -1px;
  margin-left: 0;
  gap: 0;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Color Badge Inline | Date: 2025-10-03
============================================ */
.product-card__title--with-badge {
  position: relative;
}

.product-card__color-badge-absolute {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%) translateY(+3px);
  margin-right: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.color-badge-swatch-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

/* Add subtle border for light/white colors */
.color-badge-swatch-inline.ring-inset {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Number overlay inside the swatch */
.color-badge-swatch-inline .swatch-number-overlay {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  font-family: 'Headline', var(--text-font-family);
}

/* Responsive sizing for mobile */
@media screen and (max-width: 699px) {
  .color-badge-swatch-inline {
    width: 20px;
    height: 20px;
  }

  .color-badge-swatch-inline .swatch-number-overlay {
    font-size: 0.625rem;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Shoe-specific product card styling | Date: 2025-01-25
What: Consistent height, 10px padding, no secondary image hover
============================================ */
.product-card--shoe-specific .product-card__figure {
  background-color: rgb(var(--product-card-background, 255 255 255));
}

.product-card--shoe-specific .product-card__image--primary {
  padding: 15px;
  object-fit: contain !important;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart Line Item Color Badge | Date: 2025-10-08
============================================ */
.line-item__color-badge {
  position: absolute;
  bottom: -3px; /* Very close to bottom edge for responsive bottom-right positioning */
  right: calc(
    20% + 5px
  ); /* Account for image max-width: 80% + minimal spacing */
  z-index: 2;
  pointer-events: none;
}

/* Smaller badge size for cart items */
.line-item__color-badge .color-badge-swatch-inline {
  width: 18px;
  height: 18px;
}

.line-item__color-badge .swatch-number-overlay {
  font-size: 0.625rem; /* 10px */
}

/* Responsive adjustment for mobile */
@media screen and (max-width: 699px) {
  .line-item__color-badge {
    bottom: -2px; /* Flush to bottom on mobile */
    right: calc(20% + 2px); /* Flush to right edge of image on mobile */
  }

  .line-item__color-badge .color-badge-swatch-inline {
    width: 15px;
    height: 15px;
  }

  .line-item__color-badge .swatch-number-overlay {
    font-size: 0.5625rem; /* 9px */
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Horizontal Product Color Badge | Date: 2025-10-08
============================================ */
.horizontal-product__image-wrapper {
  position: relative;
  width: var(--horizontal-product-image-size);
  flex: 0 0 var(--horizontal-product-image-size);
}

.horizontal-product__color-badge {
  position: absolute;
  bottom: -3px;
  right: 5px;
  z-index: 2;
  pointer-events: none;
}

/* Smaller badge size for horizontal products */
.horizontal-product__color-badge .color-badge-swatch-inline {
  width: 18px;
  height: 18px;
}

.horizontal-product__color-badge .swatch-number-overlay {
  font-size: 0.625rem; /* 10px */
}

/* Responsive adjustment for mobile */
@media screen and (max-width: 699px) {
  .horizontal-product__color-badge {
    bottom: -2px;
    right: 2px;
  }

  .horizontal-product__color-badge .color-badge-swatch-inline {
    width: 15px;
    height: 15px;
  }

  .horizontal-product__color-badge .swatch-number-overlay {
    font-size: 0.5625rem; /* 9px */
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart Drawer Z-Index Fix | Date: 2025-10-15
============================================ */
.cart-drawer .product-card__rating-overlay,
.cart-drawer .line-item__color-badge,
.cart-drawer .horizontal-product__color-badge {
  z-index: 0;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product variations (metafield_image) | Date: 2025-08-09
============================================ */
.metafield-image-option .thumbnail-swatch.border {
  --swatch-size: 100px !important;
  overflow: auto !important;
}

.metafield-image-options .thumbnail-swatch img.object-cover {
  transform: none !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Mobile gallery dots inside wrapper | Date: 2025-08-09
============================================ */
@media screen and (max-width: 699px) {
  .product-gallery__media-list-wrapper > .page-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--spacing-3);
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-inline-start: var(--spacing-2);
    margin-inline-end: var(--spacing-2);
    pointer-events: auto;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product gallery mobile sizing | Date: 2025-08-09
============================================ */
@media (max-width: 999px) {
  .product-gallery__media.snap-center {
    height: auto !important;
    max-height: clamp(260px, 58vh, 520px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  .product-gallery__media.snap-center img,
  .product-gallery__media.snap-center picture {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .product-gallery__media-list {
    padding-bottom: 16px !important;
  }
}

@media (max-width: 999px) and (orientation: landscape) {
  .product-gallery__media.snap-center {
    max-height: clamp(220px, 70vh, 480px) !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Tooltip visibility for image thumbnails | Date: 2025-08-09
============================================ */
.variant-picker__option-values .thumbnail-swatch[data-tooltip],
.metafield-image-options .thumbnail-swatch[data-tooltip],
.metafield-image-inline .thumbnail-swatch[data-tooltip] {
  overflow: visible !important;
  z-index: 2;
}

/* Fix: Disabled thumbnails with tooltips - use background-image for strikethrough
   instead of ::after, so tooltip can still display */
@media screen and (pointer: fine) {
  .thumbnail-swatch.is-disabled[data-tooltip]::after {
    /* Override the strikethrough ::after - restore tooltip functionality */
    content: attr(data-tooltip);
    background-image: none;
    position: absolute;
    top: auto;
    bottom: calc(100% + var(--spacing-2));
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0.9);
    border-radius: min(24px, var(--rounded-button));
    background: rgb(var(--text-color));
    width: max-content;
    color: rgb(var(--background));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1.2px;
    transition:
      opacity 0.2s ease-in-out,
      visibility 0.2s ease-in-out,
      transform 0.2s ease-in-out;
  }

  .thumbnail-swatch.is-disabled[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
    will-change: transform;
    transform: translateX(-50%) scale(1);
  }
}

/* Apply strikethrough via background-image on the element itself */
.thumbnail-swatch.is-disabled[data-tooltip] {
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    rgb(var(--text-color) / 0.5) calc(50% - 1px) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* Grey out sold-out/disabled thumbnail images */
.thumbnail-swatch.is-disabled > img,
.thumbnail-swatch.is-disabled img.object-cover {
  opacity: 0.4;
  filter: grayscale(100%);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Consolidated thumbnail behavior | Date: 2025-01-21
============================================ */

/* Base thumbnail styles */
.thumbnail-swatch {
  overflow: hidden;
  position: relative;
}

/* Default thumbnail behavior (general products) - NO ZOOM */
.thumbnail-swatch > img,
.thumbnail-swatch img.object-cover {
  object-position: center 80%;
  transform: none;
}

/* Metafield/tooltip thumbnails: restore normal behavior */
.thumbnail-swatch[data-tooltip] > img,
.thumbnail-swatch[data-tooltip] img.object-cover {
  object-position: center;
  transform: none;
}

/* Aglet-specific thumbnails: custom zoom and positioning */
/* Supports all locale translations - lowercase via Liquid downcase filter */
/* EN: aglet, DE: spitze/aglet, FR: embout, NL: nestel, IT: puntale, ES: herrete */
/* DA: dupsko, FI: nauhanpää, SV: snörändstopp, PL: końcówka, CS: koncovka */
/* MUST come AFTER tooltip rules - CSS specificity makes these win */
.thumbnail-swatch:is(
  [data-option-name='aglet'],
  [data-option-name='spitze'],
  [data-option-name='embout'],
  [data-option-name='nestel'],
  [data-option-name='puntale'],
  [data-option-name='herrete'],
  [data-option-name='dupsko'],
  [data-option-name='nauhanpää'],
  [data-option-name='snörändstopp'],
  [data-option-name='końcówka'],
  [data-option-name='koncovka']
  [data-option-name='dup'],
) {
  outline: 1.5px solid #d5ccc5;
  outline-offset: 0;
  border: none;
}

.thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='dup'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  )
  :is(> img, img.object-cover) {
  width: 250% !important;
  height: 250% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  clip-path: inset(30% 20% 30% 40% round var(--rounded-xs));
}

.thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='dup'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  ).is-selected,
:checked
  + .thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='dup'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  ) {
  outline-color: rgb(var(--color-dark));
}

/* Dark mode aglet outline */
html[data-display='dark']
  .thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='dup'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  ) {
  outline-color: rgb(var(--color-dark));
}

html[data-display='dark']
  .thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='dup'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  ).is-selected,
html[data-display='dark']
  :checked
  + .thumbnail-swatch:is(
    [data-option-name='aglet'],
    [data-option-name='spitze'],
    [data-option-name='dup'],
    [data-option-name='embout'],
    [data-option-name='nestel'],
    [data-option-name='puntale'],
    [data-option-name='herrete'],
    [data-option-name='dupsko'],
    [data-option-name='nauhanpää'],
    [data-option-name='snörändstopp'],
    [data-option-name='końcówka'],
    [data-option-name='koncovka']
  ) {
  outline-color: rgb(var(--color-light));
}

/* Mobile thumbnail sizing */
@media (max-width: 768px) {
  .thumbnail-swatch {
    --swatch-size: 50px;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Form Abbreviation Swatch | Date: 2025-12-30
What: Pill-shaped badge for form abbreviation display
============================================ */
.form-abbreviation-swatch {
  font-size: 0.7rem;
  background: rgb(var(--text-color));
  padding: 0.25rem 0.7rem 0.1rem;
  border-radius: 35px;
  color: rgb(var(--background));
  font-weight: 400;
  display: inline-block;
  line-height: 1.2;
  position: relative;
  bottom: 2px;
  margin-right: var(--spacing-1);
}

/* Form variation larger swatch size */
.form-variation-options .thumbnail-swatch.border {
  --swatch-size: 120px !important;
}

/* Form variation swatch container positioning */
.form-variation-options .product-variation-swatch {
  position: relative;
}

/* Form abbreviation overlay on swatches - fixed light mode colors for visibility over images */
.form-abbreviation-overlay {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 0.65rem;
  background: #2e2e2e;
  padding: 0.15rem 0.5rem 0.05rem;
  border-radius: 35px;
  color: #ece2d9;
  font-weight: 400;
  line-height: 1.2;
  z-index: 3;
  pointer-events: none;
}

/* Product variations and variant picker block spacing */
.product-info__block-item:where(
  [data-block-type='product-variations'],
  [data-block-type='variant-picker']
) {
  --product-info-block-spacing: var(--spacing-3);
}

/* Mobile adjustments for form variation */
@media screen and (max-width: 699px) {
  .product-info__block-item:where(
    [data-block-type='product-variations'],
    [data-block-type='variant-picker']
  ) {
    --product-info-block-spacing: var(--spacing-1);
  }

  .form-variation-options .thumbnail-swatch.border {
    --swatch-size: 80px !important;
  }

  .form-abbreviation-overlay {
    font-size: 0.55rem;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Shoelaces Product Variations Zoom | Date: 2025-12-09
What: Apply aglet-style zoom to product variation thumbnails for shoelaces products
============================================ */
[data-shoelaces-zoom='true'] .thumbnail-swatch {
  outline: 1.5px solid #d5ccc5;
  outline-offset: 0;
  border: none;
}

[data-shoelaces-zoom='true'] .thumbnail-swatch > img,
[data-shoelaces-zoom='true'] .thumbnail-swatch img.object-cover {
  width: 250% !important;
  height: 250% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  clip-path: inset(30% 20% 30% 40% round var(--rounded-xs));
}

[data-shoelaces-zoom='true'] .thumbnail-swatch.is-selected,
[data-shoelaces-zoom='true'] :checked + .thumbnail-swatch {
  outline-color: rgb(var(--color-dark));
}

/* Dark mode shoelaces zoom */
html[data-display='dark'] [data-shoelaces-zoom='true'] .thumbnail-swatch {
  outline-color: rgb(var(--color-dark));
}

html[data-display='dark']
  [data-shoelaces-zoom='true']
  .thumbnail-swatch.is-selected,
html[data-display='dark']
  [data-shoelaces-zoom='true']
  :checked
  + .thumbnail-swatch {
  outline-color: rgb(var(--color-light));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Thumbnail Swatch Selected Dark Mode | Date: 2025-10-06
============================================ */
html[data-display='dark']
  :is(
    .thumbnail-swatch.is-selected:before,
    :checked + .thumbnail-swatch:before
  ) {
  box-shadow: 0 0 0 2.5px;
  border: 2.5px solid #2e2e2e;
  outline: 1px solid #2e2e2e;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Swatch Number Overlay | Date: 2025-10-05
============================================ */
.swatch-number-overlay {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.825rem;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  font-family: 'Headline', var(--text-font-family);
  letter-spacing: 0;
}

/* Default white color only when no custom color is set */
.swatch-number-overlay:not([style*='color']) {
  color: #fff;
}

/* Ensure parent elements have relative positioning */
.color-swatch.has-number-overlay,
.block-swatch.has-number-overlay .block-swatch__color {
  position: relative;
}

/* Different sizes for different swatch types */
.color-swatch--sm .swatch-number-overlay {
  font-size: 0.7rem;
}

.variant-picker__inline-swatch .swatch-number-overlay {
  font-size: 0.7rem;
}

/* Adjust text color and shadow for light backgrounds (fallback when no custom color is set) */
.color-swatch.ring-inset .swatch-number-overlay:not([style*='color']),
.block-swatch__color.ring-inset .swatch-number-overlay:not([style*='color']) {
  color: #000;
}

/* Mobile optimizations for better readability */
@media screen and (max-width: 590px) {
  .variant-picker__inline-swatch .swatch-number-overlay {
    font-size: 0.6875rem;
    font-weight: 400;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product Info Mobile Spacing | Date: 2025-10-06
============================================ */
@media screen and (max-width: 699px) {
  /* Only target product-info blocks on product pages */
  .template-product .product-info {
    --product-info-block-spacing: var(--spacing-2-5);
  }

  /* Reduce section padding on product pages only */
  .template-product .section {
    --calculated-section-spacing-block-start: var(--spacing-4) !important;
  }

  /* Reduce gap between product elements */
  .product {
    gap: var(--spacing-2);
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Horizontal Product Plus Icon Styling | Date: 2025-10-06
============================================ */
/* Apply thinner stroke-width globally (desktop and mobile) - override hardcoded SVG attribute */
/* Target SVG element directly (svg.icon) not through non-existent wrapper */
.horizontal-product__cta .button svg.icon {
  stroke-width: 1.3 !important;
}

.horizontal-product__cta .button svg.icon path {
  stroke-width: 1.3 !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Mobile Circle Plus Button | Date: 2025-10-06
============================================ */
@media screen and (max-width: 699px) {
  /* Change layout to horizontal so button appears next to product info */
  .horizontal-product__info {
    display: flex !important;
    gap: var(--spacing-2);
  }

  .horizontal-product__cta {
    flex-shrink: 0;
    align-self: center;
  }

  /* Make button circular and icon-only */
  .horizontal-product__cta .button {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  /* Hide text content on mobile, keep only icon */
  .horizontal-product__cta .button .text-with-icon {
    font-size: 0;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 3px;
  }

  /* Keep icon visible with proper sizing - target SVG directly */
  .horizontal-product__cta .button svg.icon {
    width: 12px !important;
    height: 12px !important;
    display: block;
  }

  /* Reduce horizontal product image size in cart drawer to save space */
  .cart-drawer .horizontal-product {
    --horizontal-product-image-size: var(--spacing-10);
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: AJAX Product Switching | Date: 2025-01-24
============================================ */

/* Pulsing animation keyframes - subtle breathing effect */
@keyframes product-loading-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Apply pulsing animation when loading non-preloaded products */
.product-gallery.product-switching--loading,
.product-info.product-switching--loading {
  animation: product-loading-pulse 1s ease-in-out infinite;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Non-interactive Mobile Gallery Dots | Date: 2025-10-22
============================================ */
@media screen and (max-width: 699px) {
  .product-gallery--mobile-dots .page-dots .tap-area {
    pointer-events: none;
    cursor: default;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Rating link hover effect | Date: 2024-12-19
============================================ */
.rating.reversed-link {
  position: relative;
}

.rating.reversed-link:hover {
  background-size: 100% 1px !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Virtual ruler component | Date: 2024-12-19
============================================ */
.virtual-ruler {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.virtual-ruler__presets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.virtual-ruler__preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.virtual-ruler__preset-btn {
  position: relative;
  transition: all 0.2s ease;
}

.virtual-ruler__preset-btn[aria-pressed='true'] {
  background-color: rgb(var(--button-background-primary));
  color: rgb(var(--button-text-primary));
}

.virtual-ruler__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}

.virtual-ruler__track {
  position: relative;
  height: 60px;
  background: rgb(var(--background));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-sm);
  overflow: visible;
}

.virtual-ruler__markings {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.virtual-ruler__marking {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

.virtual-ruler__marking--major {
  width: 2px;
  height: 16px;
  background: rgb(var(--text-color) / 0.8);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgb(var(--text-color) / 0.2);
}

.virtual-ruler__marking--major::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: rgb(var(--text-color) / 0.1);
  border-radius: 3px;
}

.virtual-ruler__marking--minor {
  width: 1px;
  height: 8px;
  background: rgb(var(--text-color) / 0.4);
  border-radius: 0.5px;
}

.virtual-ruler__marking-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgb(var(--text-color) / 0.8);
  white-space: nowrap;
  background: rgb(var(--background) / 0.9);
  padding: 2px 4px;
  border-radius: 3px;
  backdrop-filter: blur(2px);
}

.virtual-ruler__indicators {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.virtual-ruler__indicator {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
}

.virtual-ruler__indicator::before {
  content: '';
  display: block;
  width: 2px;
  height: 16px;
  background: rgb(var(--button-background-primary));
  margin: 0 auto 4px;
  border-radius: 1px;
}

.virtual-ruler__indicator-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgb(var(--button-background-primary));
  white-space: nowrap;
  text-align: center;
}

.virtual-ruler__slider {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: transparent;
  outline: none;
  cursor: pointer;
  z-index: 3;
}

/* String bead/knot design for slider thumb */
.virtual-ruler__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: radial-gradient(
    circle at 30% 30%,
    rgb(var(--button-background-primary)) 0%,
    rgb(var(--button-background-primary) / 0.9) 40%,
    rgb(var(--button-background-primary) / 0.7) 100%
  );
  border-radius: 50%;
  cursor: grab;
  border: 3px solid rgb(var(--background));
  box-shadow:
    0 2px 8px rgb(var(--text-color) / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.2);
  transition: all 0.2s ease;
  position: relative;
}

.virtual-ruler__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow:
    0 4px 12px rgb(var(--text-color) / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -1px 0 rgb(0 0 0 / 0.3);
}

.virtual-ruler__slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.virtual-ruler__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: radial-gradient(
    circle at 30% 30%,
    rgb(var(--button-background-primary)) 0%,
    rgb(var(--button-background-primary) / 0.9) 40%,
    rgb(var(--button-background-primary) / 0.7) 100%
  );
  border-radius: 50%;
  cursor: grab;
  border: 3px solid rgb(var(--background));
  box-shadow:
    0 2px 8px rgb(var(--text-color) / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.2);
  transition: all 0.2s ease;
}

.virtual-ruler__slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow:
    0 4px 12px rgb(var(--text-color) / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -1px 0 rgb(0 0 0 / 0.3);
}

.virtual-ruler__value-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  font-size: var(--text-lg);
  font-weight: 500;
}

.virtual-ruler__current-value {
  color: rgb(var(--button-background-primary));
}

/* Responsive adjustments */
@media screen and (max-width: 590px) {
  .virtual-ruler__preset-buttons {
    gap: var(--spacing-1-5);
  }

  .virtual-ruler__preset-btn {
    font-size: var(--text-xs);
    padding: var(--spacing-1-5) var(--spacing-3);
  }

  .virtual-ruler__track {
    height: 50px;
  }

  .virtual-ruler__marking-label {
    font-size: 10px;
  }

  .virtual-ruler__indicator-label {
    font-size: 10px;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Conditional virtual ruler | Date: 2024-12-19
============================================ */
.virtual-ruler-conditional {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.virtual-ruler-container {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid rgb(var(--border-color) / 0.3);
}

.virtual-ruler__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}

/* String-like ruler design */
.virtual-ruler-container .virtual-ruler__track {
  position: relative;
  height: 80px;
  background: transparent;
  border: none;
  overflow: visible;
  display: flex;
  align-items: center;
}

/* String base line */
.virtual-ruler-container .virtual-ruler__track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgb(var(--text-color) / 0.3) 0%,
    rgb(var(--text-color) / 0.6) 50%,
    rgb(var(--text-color) / 0.3) 100%
  );
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 1px 2px rgb(var(--text-color) / 0.1);
}

/* Animation for showing/hiding - Simplified approach */
.virtual-ruler-container {
  opacity: 1;
  max-height: 500px;
  overflow: hidden;
  transition:
    opacity 0.3s ease-in-out,
    max-height 0.3s ease-in-out;
}

.virtual-ruler-container.hidden {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

/* Responsive adjustments for conditional ruler */
@media screen and (max-width: 590px) {
  .virtual-ruler-container .virtual-ruler__track {
    height: 70px;
  }

  .virtual-ruler__marking-label {
    font-size: 10px;
    padding: 1px 2px;
  }

  .virtual-ruler__slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  .virtual-ruler__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product page breadcrumbs positioning | Date: 2025-01-21
============================================ */

/* Base breadcrumb positioning */
.product-breadcrumbs-desktop {
  margin-bottom: var(--spacing-4);
}

.product-breadcrumbs-mobile {
  margin-bottom: var(--spacing-2);
}

/* Common breadcrumb container overrides for both desktop and mobile */
.product-breadcrumbs-desktop,
.product-breadcrumbs-mobile {
  /* Override theme section centering */
  .section.section--tight.section-blends.section-full.text-custom.breadcrumb-container {
    text-align: left;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .small-12.columns {
    text-align: left;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
  }

  .breadcrumbs {
    text-align: left;
    display: block;
    width: 100%;
    margin: 0;
  }

  .breadcrumbs__list {
    text-align: left;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs__item {
    text-align: left;
    margin-left: 0;
  }
}

/* Mobile-specific: Prevent overflow and enable horizontal scroll */
@media screen and (max-width: 699px) {
  .product-breadcrumbs-mobile .breadcrumbs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .product-breadcrumbs-mobile .breadcrumbs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .product-breadcrumbs-mobile .breadcrumbs__list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .product-breadcrumbs-mobile .breadcrumbs__item {
    float: none;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .product-breadcrumbs-mobile .breadcrumbs__item:before {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Desktop-specific: Clean integration with product-info */
@media screen and (min-width: 700px) {
  .product-breadcrumbs-desktop .breadcrumbs {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* Ensure proper grid alignment */
  .product-info > .product-breadcrumbs-desktop {
    justify-self: start;
    align-self: start;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: VARIANT SELECTORS & SWATCHES
============================================ */

/* Additional product card styles */
.product-info__text {
  margin-top: 10px !important;
}

/* Button and price styling optimizations */
button.button.button--xl {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2.5px;
}

sale-price.text-lg {
  font-size: 14px;
}

/* Varianten-Auswahl-Styling */
.block-swatch:before {
  box-shadow: 0 0 0 1.5px rgb(var(--text-color));
}

.thumbnail-swatch:before {
  box-shadow: 0 0 0 1.5px;
}

/* Ausgewählte Varianten-Hervorhebung */
:checked + .block-swatch,
.block-swatch.is-selected,
label.block-swatch.is-selected {
  background-color: #e1d7ce;
  border: 1px solid rgb(var(--color-dark));
}

/* Hover-Effekt für Block-Swatch */
label.block-swatch:hover,
a.block-swatch:hover {
  background-color: #e1d7ce;
  transition: 0.25s ease;
}

/**
 * Product Variations Toggle Styles
 * Optimized for Impact Theme Best Practices
 */
.product-variations-toggle {
  display: block;
}

.variant-picker__selected-wrapper {
  align-items: center;
  margin-bottom: 0.5rem;
}

.product-variations-toggle__button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  margin: 0;
  /* Use will-change for better performance */
  will-change: opacity;
  transition: opacity 0.2s ease;
}

.product-variations-toggle__button:hover {
  transition:
    background-size 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.product-variations-toggle__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.product-variations-toggle__content {
  margin-top: 1rem;
  /* Use transform instead of animation for better performance */
  will-change: transform, opacity;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

.product-variations-toggle__content[hidden] {
  display: none !important;
}

/* Animation optimized for performance - only trigger on explicit toggle, not re-renders */
.product-variations-toggle__content.is-animating {
  animation: fadeInUp 0.3s ease-out forwards;
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .product-variations-toggle__content {
    animation: none;
    transition: none;
  }

  .product-variations-toggle__button {
    transition: none;
  }
}

/* Inline swatch styling for compact display */
.variant-picker__inline-swatch {
  display: inline-flex;
  align-items: center;
}

.variant-picker__inline-swatch .option-value {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  margin: 0;
  pointer-events: none; /* Disable interaction for inline display */
}

.variant-picker__inline-swatch .option-value--block {
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

.variant-picker__inline-swatch .option-value--thumbnail {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 4px;
}

/* Ensure proper alignment with text */
.variant-picker__selected-value {
  align-items: center;
  flex-wrap: wrap;
}

/* Ensure option info displays in one line */
.variant-picker__option-info .h-stack {
  flex-wrap: wrap;
  align-items: center;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 590px) {
  .variant-picker__option-info .h-stack {
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
  }

  .product-variations-toggle__button {
    font-size: 0.75rem;
  }

  /* Smaller inline swatch on mobile */
  .variant-picker__inline-swatch .option-value {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }

  .variant-picker__inline-swatch .option-value--thumbnail {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
}

/* Remove all box-shadows from inline swatch display */
.variant-picker__inline-swatch .color-swatch,
.variant-picker__inline-swatch .thumbnail-swatch,
.variant-picker__inline-swatch .block-swatch {
  box-shadow: none;
}

.variant-picker__inline-swatch .color-swatch:before,
.variant-picker__inline-swatch .thumbnail-swatch:before,
.variant-picker__inline-swatch .block-swatch:before {
  box-shadow: none;
  opacity: 0;
}

/* ============================================
BEGIN CUSTOM EDIT: Variant Picker Toggle | Date: 2025-01-25
What: Toggle button to show/hide color variant options
============================================ */
.variant-picker-toggle {
  display: block;
}

.variant-picker-toggle__button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
}

.variant-picker-toggle__content {
  margin-top: 0.75rem;
  will-change: transform, opacity;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

.variant-picker-toggle__content[hidden] {
  display: none !important;
}

.variant-picker-toggle__content.is-animating {
  animation: fadeInUp 0.3s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .variant-picker-toggle__content {
    animation: none;
    transition: none;
  }
}

/* Mobile: tighter gap for color swatches */
@media screen and (max-width: 999px) {
  .variant-picker-toggle__content .variant-picker__option-values--color {
    gap: 0.2rem;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Permanent Color Filters | Date: 2025-10-03
============================================ */

/* Base styles */
.permanent-color-filter__heading {
  font-weight: 700;
  margin-bottom: var(--spacing-4);
  font-size: var(--text-base);
  text-align: left;
}

.permanent-color-filter__all-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Desktop: Initially hidden, shown at 700px+ */
.permanent-color-filter-desktop-container {
  display: none;
}

/* Mobile: Always visible above products */
.permanent-color-filter-mobile {
  display: block;
  padding: var(--spacing-4) var(--container-gutter);
  background: rgb(var(--background));
  border-bottom: 1px solid rgb(var(--border-color) / 0.2);
}

/* Desktop: Container-width centered (matches collection header) */
@media screen and (min-width: 700px) {
  /* Center the entire color filter section within horizontal layout */
  .collection--filters-horizontal .facets-summary {
    justify-content: center;
  }

  /* Show desktop version at tablet sizes and up */
  .permanent-color-filter-desktop-container {
    display: flex;
    justify-content: center;
    padding: var(--spacing-6) 0;
    padding-top: 0px;
  }

  .permanent-color-filter-desktop-container .permanent-color-filter {
    max-width: 1200px; /* Wider, more relaxed layout */
    width: 100%;
    margin: 0 auto; /* Center the container */
    padding: 0 var(--spacing-6); /* Add breathing room */
    padding-top: 0px;
  }

  .permanent-color-filter-desktop-container .permanent-color-filter__heading {
    text-align: left;
    margin-bottom: var(--spacing-3);
  }

  .permanent-color-filter-desktop-container
    .permanent-color-filter__all-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2); /* Add gap for airier desktop layout */
  }

  /* Hide mobile version when desktop is shown */
  .permanent-color-filter-mobile {
    display: none;
  }
}

.permanent-color-filter-mobile .permanent-color-filter__heading {
  margin-bottom: var(--spacing-3);
}

.permanent-color-filter-mobile .permanent-color-filter__all-swatches {
  display: flex;
  flex-wrap: nowrap; /* Single row only - NO horizontal scrolling */
  justify-content: space-between; /* Distribute evenly across full width */
  gap: 0; /* Remove gap, use natural margins */
  align-items: center;
}

/* Reduce swatch margins for tighter spacing on mobile */
.permanent-color-filter-mobile .color-swatch {
  --swatch-margin: calc(var(--swatch-offset) * 1);
  touch-action: manipulation; /* Remove 300ms tap delay on mobile */
  -webkit-user-select: none; /* Prevent iOS text selection on tooltip attributes */
  user-select: none;
}

/* Remove ALL transitions and transformations on mobile for instant response */
@media (hover: none) and (pointer: coarse) {
  .permanent-color-filter-mobile .color-swatch {
    transition: none !important; /* Remove opacity transition */
  }

  .permanent-color-filter-mobile .color-swatch:before {
    transition: none !important; /* Remove border animation */
    transform: scale(1) !important; /* No scaling - consistent border width */
  }

  /* Selected state - just show without animation */
  .permanent-color-filter-mobile :checked + .color-swatch:before {
    opacity: 1;
    transform: scale(1); /* Same scale as unselected = same border width */
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: LAYOUT & SPACING
============================================ */

/* ============================================
   BREADCRUMBS - FOUNDATION STYLES WITH SHOPIFY STRUCTURE
============================================ */

/* Basic breadcrumb structure */
.breadcrumbs {
  display: block;
  overflow: hidden;
  margin-left: 0;
  list-style: none;
}

.breadcrumbs__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs__item {
  margin: 0;
  float: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
}

/* Link and text styling */
.breadcrumbs__item a,
.breadcrumbs__item span {
  text-transform: uppercase;
  color: rgb(var(--text-color));
}

/* Override Foundation hover styles for theme compatibility */
.breadcrumbs__item:hover a,
.breadcrumbs__item:focus a {
  text-decoration: none;
}

/* Enable reversed-link hover effect */
.breadcrumbs .reversed-link:hover {
  background-size: 100% 1px;
}

/* Current page styling - no hover effects */
.breadcrumbs__link[aria-current='page'] {
  cursor: default;
  color: rgb(var(--text-color));
  background: none !important;
  transition: none !important;
  text-decoration: none;
}

.breadcrumbs__link[aria-current='page']:hover,
.breadcrumbs__link[aria-current='page']:focus {
  text-decoration: none;
  background: none !important;
}

/* Breadcrumb separators */
.breadcrumbs__item:before {
  content: '/';
  color: rgb(var(--text-color));
  margin: 0 0.5rem;
  position: relative;
  top: 1px;
}

.breadcrumbs__item:first-child:before {
  content: ' ';
  margin: 0;
}

/* ============================================
   BREADCRUMB CONTAINER
============================================ */

/* Breadcrumb container spacing */
.breadcrumb-container {
  --calculated-section-spacing-block-start: 0px;
  --calculated-section-spacing-block-end: 0px;
}

/* Breadcrumb container spacing optimization */
.breadcrumb-container.section--tight {
  --calculated-section-spacing-block-start: 0px;
  --calculated-section-spacing-block-end: 0px;
}

/* Mobile optimizations consolidated */
@media screen and (max-width: 699px) {
  /* Breadcrumb container spacing */
  .breadcrumb-container {
    --calculated-section-spacing-block-start: 0px;
    padding-top: 0;
  }

  /* Line item optimizations */
  .line-item {
    --line-item-image-width: 60px;
  }

  .cart-drawer .line-item .price-list,
  .horizontal-product__info .price-list {
    font-size: var(--text-xs);
  }
}

/* ============================================
BEGIN CUSTOM EDIT: Icon-only Button Styling | Date: 2025-10-08
============================================ */
.button--icon-only {
  aspect-ratio: 1;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--button-border-radius, 50%);
}

.button--icon-only.button--sm {
  width: var(--button-height, 2.5rem);
  min-width: var(--button-height, 2.5rem);
}

.button--icon-only svg {
  margin: 0;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: CART & CHECKOUT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart quantity stepper styling | Date: 2025-08-08
============================================ */
/* Optimized quantity selector styling */
.quantity-selector__button {
  padding-inline: var(--spacing-2);
  transition:
    color 0.2s ease-in-out,
    background-color 0.15s ease-in-out,
    transform 0.12s ease-out;
}

.quantity-selector {
  border-radius: var(--rounded-input);
  overflow: hidden;
  height: calc(var(--input-height) - 30%);
  width: fit-content;
}

.quantity-input,
.quantity-selector__input {
  border: none;
  box-shadow: none;
}

.text-subdued .quantity-selector__button {
  color: rgb(var(--text-color) / 0.7);
}

@media screen and (min-width: 700px) {
  .quantity-selector__button {
    padding-inline: var(--spacing-3);
  }
}

/* Quantity button border radius and hover effects */

/* Äußere Ecken der Buttons an den Input-Radius angleichen */
.quantity-selector__button:first-of-type {
  border-top-left-radius: var(--rounded-input);
  border-bottom-left-radius: var(--rounded-input);
}

.quantity-selector__button:last-of-type {
  border-top-right-radius: var(--rounded-input);
  border-bottom-right-radius: var(--rounded-input);
}

@media (pointer: fine) {
  .quantity-selector__button:hover {
    background-color: rgb(var(--text-color) / 0.06);
    transition: all 0.2s ease-in-out;
  }

  .text-subdued .quantity-selector__button:hover {
    color: rgb(var(--text-color));
  }
}

.quantity-selector__button:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .quantity-selector__button {
    transition: none;
  }
}

/* Line item: Actions-Spalte auch mobil nach rechts schieben */
.line-item__actions {
  margin-inline-start: auto;
  align-self: center;
}

/* Mobile: Quantity-Column zentrieren, wenn rechts ausgerichteter v-stack verwendet wird */
line-item-quantity.v-stack.justify-items-end.gap-2 {
  justify-items: center;
}

/* Center line item media wrapper */
.line-item__media-wrapper {
  align-self: center;
}

/* Cart drawer shipping line styling */
.cart-drawer__shipping-line {
  border-bottom: 1px solid rgb(var(--text-color) / 0.12);
  padding-bottom: 10px;
}

/* Cart page shipping line styling */
.cart-page__shipping-line {
  border-bottom: 1px solid rgb(var(--text-color) / 0.12);
  padding-bottom: 10px;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart drawer totals and progress styles | Date: 2025-08-13
============================================ */
.cart__item-sub {
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  line-height: 1;
}

.cart__item-row {
  margin-bottom: 20px;
}

.cart-shipping__wrapper {
  padding: 0;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

p.shipping-messages {
  margin-bottom: 9px;
  text-align: left;
}

.cart-shippingThreshold__bar {
  position: relative;
  background: rgb(var(--text-color) / 0.3);
  border-radius: 35px;
  height: 4px;
}

.cart-shippingThreshold__progress {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  display: block;
  border-radius: 35px;
  background-color: rgb(var(--accent));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart discount horizontal layout | Date: 2025-01-24
============================================ */
.cart-discount-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}

.cart-discount-input-row .cart-discount-field {
  flex: 1;
}

.cart-discount-save-button {
  flex-shrink: 0;
}

/* Ensure proper alignment on mobile */
@media (max-width: 640px) {
  .cart-discount-input-row {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-5);
  }

  .cart-discount-save-button {
    flex-shrink: 0;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart discount amount color | Date: 2025-01-24
============================================ */
.cart-discount-amount {
  color: rgb(var(--on-sale-text));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Discount remove button hover animation | Date: 2025-01-27
============================================ */
.discount-remove-btn {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.discount-remove-btn:hover svg {
  stroke-width: 3;
  color: rgb(var(--on-sale-text));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Quick buy drawer z-index | Date: 2025-01-16
What: Ensure quick buy modal appears above cart drawer
============================================ */
.quick-buy-drawer {
  z-index: 1002;
}

/* Quick-buy drawer inside cart drawer needs position:fixed to escape parent stacking context */
.cart-drawer .quick-buy-drawer[open] {
  z-index: 1003 !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Inline discount in subtotal | Date: 2025-01-16
What: Hide separate discount rows, show discount inline with subtotal
============================================ */
/* Hide separate discount rows */
.discount.cart__item-sub.cart__item-row {
  display: none;
}

/* Inline discount styling */
.cart__discount-inline {
  color: rgb(var(--on-sale-text)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart drawer recommendations alignment | Date: 2025-01-27
============================================ */
.cart-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-drawer__inner > .v-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cart-drawer__recommendations {
  margin-top: auto;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Line item media max width | Date: 2025-01-27
============================================ */
img.line-item__media.rounded-xs {
  max-width: min(var(--image-max-width, 80%), 80%);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Badge styling for non-large badges | Date: 2025-01-27
============================================ */
.badge:not(.badge--lg) {
  padding-top: var(--spacing-1);
  color: rgb(var(--color-light));
  background-color: rgb(var(--color-dark));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart drawer free shipping bar spacing | Date: 2025-01-16
============================================ */
.cart-drawer {
  @media screen and (min-width: 700px) {
    .free-shipping-bar {
      margin-top: var(--spacing-2-5);
    }
  }
  .free-shipping-bar {
    margin-bottom: var(--spacing-2-5);
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Count Bubble Styling | Date: 2025-10-16
============================================ */
.count-bubble {
  font-family: 'Headline', var(--text-font-family);
  background: #2e2e2e;
  color: #ece2d9;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Count bubble medium size for larger screens | Date: 2025-01-16
============================================ */
@media screen and (min-width: 700px) {
  .count-bubble--md {
    --size: var(--spacing-6);
    padding-top: 1px;
    margin-bottom: 2px;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Count Bubble Dark Mode | Date: 2025-10-04
============================================ */
html[data-display='dark'] .count-bubble {
  background: rgb(var(--color-light)) !important;
  color: rgb(var(--color-dark)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Count Bubble Slideshow Override | Date: 2025-12-10
What: Dark bubble only when slideshow + transparent header (before scroll)
============================================ */
/* Slideshow + transparent header: dark bubble to contrast with hero image */
:has(.shopify-section:first-child .slideshow)
  .header:not(.is-filled)
  .count-bubble {
  background: rgb(var(--color-dark)) !important;
  color: rgb(var(--color-light)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Count Bubble in Transparent Header | Date: 2025-10-16
What: Dark bubble only on slideshow pages with transparent header
============================================ */
/* Slideshow pages with transparent header: dark bubble */
:has(.shopify-section:first-child .slideshow)
  .header:not(.is-filled)
  .count-bubble {
  background: #2e2e2e;
  color: #ece2d9;
}

/* Dark mode + slideshow + transparent header: dark bubble */
html[data-display='dark']:has(.shopify-section:first-child .slideshow)
  .header:not(.is-filled)
  .count-bubble {
  background: rgb(var(--color-dark)) !important;
  color: rgb(var(--color-light)) !important;
}

/* Dark mode + filled header (after scroll): light bubble */
html[data-display='dark'] .header.is-filled .count-bubble {
  background: rgb(var(--color-light)) !important;
  color: rgb(var(--color-dark)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Progress Bar Dark Mode | Date: 2025-10-04
============================================ */
html[data-display='dark'] .progress-bar {
  background: rgb(var(--color-light) / 0.15) !important;
}

html[data-display='dark'] .progress-bar:before {
  background: rgb(var(--color-light)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Discount badge button adjustements | Date: 2025-09-28
============================================ */
cart-discount-remove-button.h-stack.align-center {
  padding-bottom: 2px;
}
svg.icon.icon-discount {
  padding-bottom: 1px;
}
li.badge.h-stack.items-center.gap-1 {
  color: rgb(var(--color-dark));
  background: rgb(var(--color-light-alt));
}

/* Dark mode badge styling */
html[data-display='dark'] li.badge.h-stack.items-center.gap-1 {
  color: rgb(var(--color-light) / 0.7);
  background: rgb(var(--color-dark));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Mobile Drawer Footer Optimization | Date: 2025-10-03
============================================ */
@media screen and (max-width: 699px) {
  /* Reduce footer padding from var(--spacing-6) to var(--spacing-4) */
  .cart-drawer::part(footer) {
    --drawer-footer-padding: var(--spacing-4);
  }

  /* Tighten gap spacing between footer sections */
  .cart-drawer-footer.v-stack {
    gap: var(--spacing-2-5) !important;
  }

  /* Compress shipping policy text line-height */
  .cart-drawer-footer .text-subdued {
    line-height: 1.3;
  }

  /* Make discount badges more compact */
  .cart-drawer-footer .badge {
    font-size: 0.75rem;
    padding: 2px 6px;
  }

  /* Reduce discount badge icon size */
  .cart-drawer-footer .badge svg {
    width: 12px;
    height: 12px;
  }

  /* Reduce spacing below checkout button on mobile */
  .cart-drawer-footer .buy-buttons {
    margin-bottom: var(--spacing-4) !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Drawer Footer Theme Support | Date: 2025-10-04
============================================ */
/* Drawer footer background */
.cart-drawer::part(footer) {
  background-color: rgb(var(--drawer-footer-background));
}

/* Footer text color for all content */
.cart-drawer-footer,
.cart-drawer-footer .cart__item-sub,
.cart-drawer-footer .cart__subtotal,
.cart-drawer-footer .h6,
.cart-drawer-footer p,
.cart-drawer-footer
  span:not(.button span):not(.reversed-link):not(.cart__discount-inline) {
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Badge styling */
.cart-drawer-footer .badge {
  background-color: var(--drawer-footer-badge-bg) !important;
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Badge text and icons */
.cart-drawer-footer .badge,
.cart-drawer-footer .badge * {
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Links styling */
.cart-drawer-footer .link {
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Override discount code link to match remove link color */
.cart-drawer-footer button[aria-controls='cart-drawer-discount'] .link {
  color: rgb(var(--text-color)) !important;
}

/* Input placeholder text */
.cart-drawer-footer input::placeholder,
.cart-drawer-footer textarea::placeholder {
  color: rgba(var(--drawer-footer-text), 0.6) !important;
}

/* Note/Discount dialog styling when open */
.cart-drawer__note[open] > .cart-drawer__note-inner {
  background-color: rgb(var(--drawer-footer-background)) !important;
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Dialog headings */
.cart-drawer__note[open] > .cart-drawer__note-inner .h5 {
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Dialog input fields */
.cart-drawer__note[open] > .cart-drawer__note-inner input,
.cart-drawer__note[open] > .cart-drawer__note-inner textarea {
  background-color: var(--drawer-footer-input-bg) !important;
  color: rgb(var(--drawer-footer-text)) !important;
}

/* Warranty text styling */
.cart-drawer-warranty-text {
  color: rgb(var(--drawer-footer-text)) !important;
  text-align: center;
  margin-top: calc(-1 * var(--spacing-4)); /* Pull up closer to button */
  margin-bottom: 0;
}

/* Reduce spacing in buy-buttons container */
.cart-drawer-footer .buy-buttons {
  margin-bottom: var(--spacing-1);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Checkout Button Dark Mode | Date: 2025-10-04
============================================ */
html[data-display='dark']
  .cart-drawer-footer
  :is(
    button[name='checkout'],
    .buy-buttons .button[type='submit']:not(.button--secondary)
  ) {
  background: rgb(var(--color-light)) !important;
  color: rgb(var(--color-dark)) !important;
  border-color: rgb(var(--color-light)) !important;
}

html[data-display='dark']
  .cart-drawer-footer
  :is(
    button[name='checkout']:hover,
    .buy-buttons .button[type='submit']:not(.button--secondary):hover
  ) {
  background: rgb(var(--color-light-alt)) !important;
  opacity: 0.9;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart Footer Border Radius | Date: 2025-10-07
============================================ */
.cart-drawer::part(footer) {
  border-bottom-right-radius: var(--rounded-sm);
  border-bottom-left-radius: var(--rounded-sm);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: THEME TOGGLE & ICONS
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Drawer Theme Toggle Styling | Date: 2025-10-04
============================================ */
.panel-footer__theme-toggle {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-left: auto; /* Push to right side of drawer */
}

.panel-footer__theme-toggle theme-toggle {
  display: flex !important;
  align-items: center;
  position: relative;
  z-index: 1;
}

.panel-footer__theme-toggle button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer !important;
  color: inherit;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

.panel-footer__theme-toggle .theme-icon {
  display: none !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Ensure correct icon shows in drawer based on data-display */
html[data-display='light'] .panel-footer__theme-toggle .theme-icon--light,
html[data-display='dark'] .panel-footer__theme-toggle .theme-icon--dark {
  display: inline-flex !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Fix Icon Alignment | Date: 2025-10-04
============================================ */
/* Ensure icons are properly centered vertically and horizontally */
theme-toggle .theme-icon {
  display: none;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

theme-toggle .theme-icon svg {
  display: block;
}

/* When icon is shown, use inline-flex for proper alignment */
html[data-display='light'] theme-toggle .theme-icon--light,
html[data-display='dark'] theme-toggle .theme-icon--dark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Also fix drawer context */
.panel-footer__theme-toggle .theme-icon svg {
  display: block;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Theme Toggle Accessibility | Date: 2025-10-04
============================================ */
/* Keyboard focus indicators for theme toggle button */
theme-toggle button:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: var(--rounded-xs);
}

/* Smooth theme transition when switching between light/dark modes */
/* Uses a brief fade class added by JavaScript to avoid flickering */
html.theme-transitioning {
  animation: themeTransition 0.15s ease-in-out;
}

@keyframes themeTransition {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

/* Respect motion preferences - disable transitions/animations for users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning {
    animation: none !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Popup Theme Toggle Menu | Date: 2025-11-20
UPDATED: 2025-11-25 | What: Disable layout containment while menu is open so iOS/Safari hit-testing can reach dropdown options
============================================ */
theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  contain: layout style;
  overflow: visible;
}

theme-toggle.tap-area {
  overflow: visible;
}

theme-toggle.tap-area::before {
  inset: 0;
}

/* ============================================
BEGIN CUSTOM EDIT: iOS Hit-Target Fix | Date: 2025-11-25
Disable containment while dropdown is open so taps outside the host bounds register on the menu buttons
============================================ */
theme-toggle[data-open='true'] {
  contain: none;
}
/* ============================================
END CUSTOM EDIT
============================================ */

.theme-toggle__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
}

theme-toggle [data-theme-toggle-trigger] {
  border-radius: var(--rounded-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.theme-toggle__menu {
  --theme-toggle-menu-offset-x: 0px;
  --theme-toggle-menu-closed-y: 6px;
  position: absolute;
  top: calc(100% + 0.4rem);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.35rem;
  min-width: 160px;
  background-color: rgb(var(--dialog-background, var(--background)));
  color: rgb(var(--color-dark));
  border-radius: 12px;
  border: 1px solid rgb(var(--color-dark) / 0.12);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(
      var(--theme-toggle-menu-offset-x),
      var(--theme-toggle-menu-closed-y),
      0
    )
    scale(0.98);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  z-index: 40;
}

html[data-display='dark'] theme-toggle .theme-toggle__menu {
  color: rgb(var(--color-light));
  border-color: rgb(var(--color-light) / 0.25);
  box-shadow: var(--shadow-md);
}

theme-toggle[data-open='true'] .theme-toggle__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(var(--theme-toggle-menu-offset-x), 0, 0) scale(1);
}

theme-toggle[data-placement='top'] .theme-toggle__menu {
  top: auto;
  bottom: calc(100% + 0.4rem);
  --theme-toggle-menu-closed-y: -6px;
}

.theme-toggle__menu button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.theme-toggle__menu button:hover,
.theme-toggle__menu button:focus-visible {
  background-color: rgb(var(--color-dark) / 0.08);
}

html[data-display='dark'] theme-toggle .theme-toggle__menu button:hover,
html[data-display='dark']
  theme-toggle
  .theme-toggle__menu
  button:focus-visible {
  background-color: rgb(var(--color-light) / 0.2);
}

.theme-toggle__menu button[data-selected='true'],
.theme-toggle__menu button[aria-checked='true'] {
  font-weight: 500;
  background-color: rgb(var(--color-dark) / 0.12);
}

html[data-display='dark']
  theme-toggle
  .theme-toggle__menu
  button[data-selected='true'],
html[data-display='dark']
  theme-toggle
  .theme-toggle__menu
  button[aria-checked='true'] {
  background-color: rgb(var(--color-light) / 0.24);
}

.theme-toggle__menu-icon {
  display: inline-flex;
  width: 1.25rem;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
}

.theme-toggle__menu-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  color: inherit;
  opacity: 0;
  transition: opacity 140ms ease;
}

.theme-toggle__menu button[data-selected='true'] .theme-toggle__menu-check,
.theme-toggle__menu button[aria-checked='true'] .theme-toggle__menu-check {
  opacity: 1;
}

@media (max-width: 749px) {
  .navigation-panel theme-toggle .theme-toggle__menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    right: auto;
    left: 0;
    min-width: min(220px, calc(100vw - 2rem));
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: MEGA MENU
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Mega Menu Responsive Spacing and Image Heights | Date: 2025-01-30
============================================ */

/* Mega Menu Promo Images - flexible height with constraints */
.mega-menu .content-over-media img,
.mega-menu .navigation-promo img,
.mega-menu [class*='promo'] img {
  width: 100%;
  height: auto;
  max-height: min(
    350px,
    calc(100vh - var(--header-height, 80px) - 100px)
  ); /* Responsive max height */
  object-fit: cover; /* Cover to fill container and show border-radius */
  object-position: center;
  display: block;
  transition: opacity 0.2s ease-in-out;
  border-radius: var(--rounded-sm); /* Rounded corners on images */
  overflow: hidden !important; /* Override theme.css overflow:clip which prevents border-radius from showing */
}

/* Container uses min-height to prevent collapse */
.mega-menu .content-over-media,
.mega-menu .navigation-promo,
.mega-menu [class*='promo'] {
  height: auto;
  overflow: visible !important; /* Override theme's overflow: hidden to prevent text cutoff */
  position: relative;
}

/* Smooth transition for image heading text overlay - only for dynamic image menus */
.mega-menu[data-dynamic-images='true']
  .content-over-media
  .place-self-end-start {
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
}

/* Loading state indicator - subtle overlay */
.mega-menu-promo-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: mega-menu-spin 0.6s linear infinite;
  z-index: 1;
}

@keyframes mega-menu-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Navigation Promo Caption Mode - text below image */
.navigation-promo__caption-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2, 0.5rem);
  text-decoration: none;
  color: inherit;
}

.navigation-promo__caption-item .content-over-media {
  display: block;
}

.navigation-promo__caption {
  margin: 0;
  padding-block-start: var(--spacing-2, 0.5rem);
  color: rgb(var(--text-primary));
}

/* Make reversed-link underline only span text width, not full block */
.navigation-promo__caption.reversed-link {
  width: fit-content;
}

/* Dynamic caption for collection metafield display on hover - matches .navigation-promo__caption */
.mega-menu-dynamic-caption {
  margin: 0;
  padding-block-start: var(--spacing-2, 0.5rem);
  font-size: var(--promo-heading-font-size, 0.875rem);
  line-height: var(--promo-heading-line-height, 1.4);
  color: rgb(var(--text-primary));
  width: fit-content;
}

/* Navigation Promo Theme Images - JS handles src swapping */
.nav-promo-theme-image {
  transition: opacity 0.2s ease-in-out;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Mega Menu Color Bar | Date: 2025-01-30
============================================ */
.mega-menu-content {
  display: flex;
  justify-content: var(--mega-menu-justify-content);
  align-items: flex-start;
  flex: 1;
  width: 100%;
}

/* Wrap nav and color bar together */
.mega-menu__nav-wrapper {
  display: flex;
  flex-direction: column;
  max-width: var(--column-list-max-width, max-content);
  flex: auto;
}

.mega-menu__nav {
  gap: var(--mega-menu-nav-gap);
  flex-wrap: wrap;
  align-items: start;
  display: flex;
  row-gap: 2rem;
}

.mega-menu-color-bar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-14);
  margin-top: 0;
}

.color-bar-header {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 1em;
}

.color-bar-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2-5) var(--spacing-3-5);
  align-items: center;
}

.color-bar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  text-decoration: none;
}

.color-bar-item .color-swatch {
  --swatch-size: var(--spacing-6);
  --swatch-offset: 2px;
  --swatch-margin: 0;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  top: -2px;
  opacity: 1;
}

/* Keep theme's default opacity behavior for swatches */
.color-bar-item:hover .color-swatch {
  opacity: 1;
}

.color-bar-item .color-swatch.ring-inset {
  box-shadow: inset 0 0 0 1px rgb(var(--text-color) / 0.12);
}

.color-bar-label {
  white-space: nowrap;
}

/* Mobile adjustments */
@media screen and (max-width: 1149px) {
  .mega-menu-color-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
  }

  .color-bar-items {
    width: 100%;
    gap: var(--spacing-2) var(--spacing-4);
  }

  .color-bar-item .color-swatch {
    --swatch-size: var(--spacing-5);
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: PRINT STYLES
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Print Styles for Dark Mode | Date: 2025-10-04
============================================ */
@media print {
  /* Override all dark mode colors for printing */
  :root[data-display='dark'] {
    --background: 255 255 255 !important; /* White background */
    --background-primary: 255 255 255 !important;
    --text-color: 0 0 0 !important; /* Black text */
    --text-primary: 0 0 0 !important;
    --text-subdued: 60 60 60 !important; /* Dark gray for subdued text */
    --header-background: 255 255 255 !important;
    --header-text: 0 0 0 !important;
    --footer-background: 255 255 255 !important;
    --footer-text: 0 0 0 !important;
    --product-card-background: 255 255 255 !important;
    --product-card-text: 0 0 0 !important;
    --dialog-background: 255 255 255 !important;
    --drawer-footer-background: 255 255 255 !important;
    --drawer-footer-text: 0 0 0 !important;
  }

  /* Ensure light backgrounds for all sections */
  :root[data-display] .section,
  :root[data-display] .bg-custom {
    background: white !important;
    color: black !important;
  }

  /* Force borders to be visible but subtle */
  :root[data-display] {
    --border-color: 0 0 0 / 0.15 !important;
  }

  /* Hide theme toggle button when printing */
  theme-toggle {
    display: none !important;
  }

  /* Ensure images are visible */
  :root[data-display] img {
    opacity: 1 !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Brand Logo Icons | Date: 2025-01-24
What: Small brand logo icons in mega nav menu
============================================ */
/* Brand logo icon styles for mega navigation */
.mega-menu__nav .brand-menu-item-with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mega-menu__nav .brand-logo-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.mega-menu__nav .brand-menu-item-with-icon:hover .brand-logo-icon {
  opacity: 1;
}

/* Ensure proper alignment on different screen sizes */
@media screen and (min-width: 1150px) {
  .mega-menu__nav .brand-logo-icon {
    margin-left: auto;
  }
}

/* Dark mode: invert brand logo icon */
html[data-display='dark'] img.brand-logo-icon {
  filter: invert(100%);
}

/* Navigation drawer: adjust brand menu panel link image size (only for brand/Marke menus) */
.navigation-drawer [data-brand-menu='true'] {
  --panel-link-image-size: 1.5rem;
}

.navigation-drawer [data-brand-menu='true'] .panel-link__image {
  border-radius: 0px !important;
}

/* Dark mode: invert brand menu panel link images */
html[data-display='dark']
  .navigation-drawer
  [data-brand-menu='true']
  .panel-link__image {
  filter: invert(100%);
}

/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Hide Breadcrumbs on Mobile | Date: 2025-12-09
============================================ */
@media screen and (max-width: 699px) {
  .breadcrumbs,
  .breadcrumb-container {
    display: none !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product Gallery Page Dots Background | Date: 2025-12-09
What: Force page dots background to #2e2e2e instead of currentColor
============================================ */
.product-gallery .page-dots > * {
  background: #2e2e2e !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product Card Info Padding | Date: 2025-11-24
============================================ */
.product-card--blends .product-card__info {
  padding-block-end: 10px;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
   SECTION: SHIPPING TIMELINE
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Shipping Timeline | Date: 2025-11-27
What: Native shipping timeline component for product pages
============================================ */
.shipping-timeline {
  display: block;
  background: var(--shipping-timeline-bg, rgb(var(--background)));
  color: var(--shipping-timeline-text, rgb(var(--text-color)));
  border-radius: var(--rounded-sm, 4px);
  padding: var(--spacing-4) var(--spacing-10);
}

.shipping-timeline__track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-1);
}

.shipping-timeline__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  min-width: 70px;
  gap: var(--spacing-1);
}

.shipping-timeline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
  opacity: 0.85;
}

.shipping-timeline__icon svg {
  width: 100%;
  height: 100%;
}

.shipping-timeline__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.2;
}

.shipping-timeline__date {
  font-size: var(--text-xs, 0.75rem);
  opacity: 0.75;
  white-space: nowrap;
}

/* Connector line between stages */
.shipping-timeline__connector {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
  margin-top: 10px; /* Align with icon center */
  min-width: 20px;
}

.shipping-timeline__dot {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
  flex-shrink: 0;
}

.shipping-timeline__line {
  flex: 1;
  height: 1.5px;
  background: currentColor;
  opacity: 0.35;
}

/* Responsive - compact on smaller screens */
@media screen and (max-width: 400px) {
  .shipping-timeline {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .shipping-timeline__stage {
    min-width: 55px;
  }

  .shipping-timeline__icon {
    width: 20px;
    height: 20px;
  }

  .shipping-timeline__label {
    font-size: var(--text-xs, 0.75rem);
  }

  .shipping-timeline__date {
    font-size: 0.65rem;
  }

  .shipping-timeline__connector {
    margin-top: 8px;
  }

  .shipping-timeline__dot {
    width: 4px;
    height: 4px;
  }
}

/* Dark mode support - enhanced contrast for better readability */
html[data-display='dark'] .shipping-timeline {
  --shipping-timeline-bg: rgba(var(--text-color), 0.05);
  --shipping-timeline-text: rgb(var(--text-color));
}

html[data-display='dark'] .shipping-timeline__icon {
  opacity: 0.9;
}

html[data-display='dark'] .shipping-timeline__label {
  opacity: 0.95;
}

html[data-display='dark'] .shipping-timeline__date {
  opacity: 0.8;
}

html[data-display='dark'] .shipping-timeline__dot {
  opacity: 0.6;
}

html[data-display='dark'] .shipping-timeline__line {
  opacity: 0.4;
}

/* Light mode - subtle background for visual separation */
html[data-display='light'] .shipping-timeline {
  --shipping-timeline-bg: rgba(var(--text-color), 0.03);
  --shipping-timeline-text: rgb(var(--text-color));
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Cart Drawer Z-Index | Date: 2025-12-27
What: Ensure cart drawer appears above product finder popup on mobile
============================================ */
.cart-drawer {
  z-index: 1001 !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Product Finder Modal | Date: 2025-12-27
What: Styles for product finder inside length guide drawer
============================================ */

/* Modal container - remove section padding for drawer context */
.product-finder-modal {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

/* Modal loader styles */
.product-finder-modal-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  flex-direction: column;
  gap: 1rem;
}

.product-finder-modal[data-preload-status='ready']
  .product-finder-modal-loader {
  display: none;
}

.product-finder-modal-content {
  display: none;
}

.product-finder-modal[data-preload-status='ready']
  .product-finder-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Override section-boxed styling for modal context */
.product-finder-modal-content.product-finder {
  /* Remove section-boxed margins that don't work in drawer */
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  padding-block-start: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  /* Remove section shadow/border in modal */
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Let drawer handle sizing */
  max-width: 100% !important;
  width: 100% !important;
}

/* Show step nav in modal */
.product-finder-modal-content .product-finder-steps-nav {
  display: flex !important;
  margin-bottom: 0;
  padding: 1rem;
}

/* Section styling within modal */
.product-finder-modal-content .product-finder-section {
  padding: 1rem;
}

/* Ensure drawer is wide enough for product finder */
[data-product-finder-drawer].drawer--lg {
  --drawer-max-width: min(90vw, 600px);
}

@media screen and (min-width: 750px) {
  [data-product-finder-drawer].drawer--lg {
    --drawer-max-width: min(80vw, 700px);
  }
}

/* Product result view in modal context */
.product-finder-modal-content .product-result-view {
  margin-top: 0;
}

/* Recommendation cards in modal - more compact */
.product-finder-modal-content .product-summary-card {
  margin-top: 1rem;
}

/* --- Simplified Modal Mode Styles --- */

/* Model step container */
.simplified-model-step {
  padding: 1rem;
}

.simplified-model-step__header {
  margin-bottom: 1rem;
}

.simplified-model-step__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 500;
  margin: 0 0 0.25rem;
}

.simplified-model-step__subtitle {
  font-size: var(--text-sm, 0.875rem);
  color: rgb(var(--text-color) / 0.7);
  margin: 0;
}

/* Search input in simplified mode */
.simplified-model-step__search {
  margin-bottom: 1.5rem;
}

.simplified-model-step__search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--border-color, 200 200 200));
  border-radius: var(--rounded, 0.5rem);
  font-size: var(--text-base, 1rem);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
}

.simplified-model-step__search-input:focus {
  outline: none;
  border-color: rgb(var(--text-color));
}

/* Brand groups */
.simplified-brand-group {
  margin-bottom: 1.5rem;
}

.simplified-brand-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.simplified-brand-group__logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.simplified-brand-group__name {
  font-size: var(--text-base, 1rem);
  font-weight: 500;
}

.simplified-brand-group__models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

/* Model cards */
.simplified-model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgb(var(--border-color, 200 200 200));
  border-radius: var(--rounded, 0.5rem);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  background: rgb(var(--background));
}

.simplified-model-card:hover {
  border-color: rgb(var(--text-color));
  background: rgb(var(--text-color) / 0.05);
}

.simplified-model-card--selected {
  border-color: rgb(var(--text-color));
  background: rgb(var(--text-color) / 0.08);
}

.simplified-model-card__image {
  width: 80px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.simplified-model-card__name {
  font-size: var(--text-sm, 0.875rem);
  text-align: center;
  line-height: 1.3;
}

/* No results state */
.simplified-model-step__no-results {
  text-align: center;
  padding: 2rem;
  color: rgb(var(--text-color) / 0.6);
}

.simplified-model-step__no-results-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Calculator fallback link */
.simplified-model-step__calculator-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.75rem;
  color: rgb(var(--text-color) / 0.8);
  text-decoration: underline;
  font-size: var(--text-sm, 0.875rem);
}

/* Result display */
.simplified-result {
  padding: 1.5rem;
  text-align: center;
}

.simplified-result__success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  background: rgb(var(--success-color, 34 197 94));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.simplified-result__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.simplified-result__length {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0.5rem 0;
  color: rgb(var(--text-color));
}

.simplified-result__length-unit {
  font-size: 1.5rem;
  font-weight: 400;
}

.simplified-result__custom-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgb(var(--text-color) / 0.1);
  border-radius: 999px;
  font-size: var(--text-xs, 0.75rem);
  margin-top: 0.25rem;
}

.simplified-result__model-info {
  margin: 1rem 0;
  font-size: var(--text-sm, 0.875rem);
  color: rgb(var(--text-color) / 0.7);
}

.simplified-result__product-info {
  padding: 0.75rem;
  background: rgb(var(--text-color) / 0.05);
  border-radius: var(--rounded, 0.5rem);
  margin: 1rem 0;
}

.simplified-result__product-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.simplified-result__product-details {
  font-size: var(--text-sm, 0.875rem);
  color: rgb(var(--text-color) / 0.7);
}

/* Calculator link in result */
.simplified-result__calculator-link {
  display: block;
  margin: 1rem 0;
  color: rgb(var(--text-color) / 0.7);
  font-size: var(--text-sm, 0.875rem);
  text-decoration: underline;
}

.simplified-result__calculator-link:hover {
  color: rgb(var(--text-color));
}

/* Add to cart button */
.simplified-result__add-to-cart {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  border: none;
  border-radius: var(--rounded, 0.5rem);
  font-size: var(--text-base, 1rem);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.simplified-result__add-to-cart:hover {
  opacity: 0.9;
}

.simplified-result__add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Back button */
.simplified-result__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem;
  background: none;
  border: none;
  color: rgb(var(--text-color) / 0.7);
  font-size: var(--text-sm, 0.875rem);
  cursor: pointer;
}

.simplified-result__back:hover {
  color: rgb(var(--text-color));
}

/* No length available state */
.simplified-result--no-length {
  background: rgb(var(--warning-color, 250 204 21) / 0.1);
  border-radius: var(--rounded, 0.5rem);
}

.simplified-result--no-length .simplified-result__title {
  color: rgb(var(--warning-color, 180 130 0));
}

/* Loading state */
.simplified-result--loading {
  opacity: 0.7;
  pointer-events: none;
}

.simplified-result__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(var(--text-color) / 0.2);
  border-top-color: rgb(var(--text-color));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media screen and (max-width: 749px) {
  .simplified-brand-group__models {
    grid-template-columns: repeat(2, 1fr);
  }

  .simplified-result__length {
    font-size: 2.5rem;
  }

  .simplified-model-card__image {
    width: 60px;
    height: 45px;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

@media (max-width: 768px) {
  #gorgias-chat-container iframe#chat-button {
    display: none !important;
  }
  .message-window-iframe-14x6kj1 {
    background: #ece2d9 !important;
  }
}

/* ============================================
BEGIN CUSTOM EDIT: Shoe-Specific Product Layout | Date: 2025-01-25
What: Brand logo + shoe image on right of text blocks (desktop), shoe overlay on gallery (mobile)
Note: Block IDs are unique to shoe-specific-shoelaces template
============================================ */

/* Remove default margins on image blocks */
[data-block-id='image_AHmEBE'] .product-info__image,
[data-block-id='image_aMmYYC'] .product-info__image {
  margin: 0;
}

/* Desktop: Images floated to right side of text blocks */
@media screen and (min-width: 1000px) {
  /* Hide image blocks from normal flow - they'll be shown via text block pseudo/float */
  [data-block-id='image_AHmEBE'],
  [data-block-id='image_aMmYYC'] {
    float: right;
    clear: right;
    margin: 0 0 1rem 1rem;
  }

  [data-block-id='image_AHmEBE'] {
    margin-top: 0;
  }

  [data-block-id='image_aMmYYC'] {
    margin-top: 0.5rem;
  }

  /* Text blocks styling */
  [data-block-id='text_KiEB4U'],
  [data-block-id='text_3inhNL'] {
    margin-block-start: 0;
  }

  [data-block-id='text_KiEB4U'] h1,
  [data-block-id='text_3inhNL'] h2 {
    margin: 0;
  }
}

/* Mobile: Hide brand logo, position shoe image directly above text */
@media screen and (max-width: 999px) {
  [data-block-id='image_AHmEBE'] {
    display: none;
  }

  /* Product-info is the positioning context (only when shoe block exists) */
  .product-info:has([data-block-id='image_aMmYYC']) {
    position: relative;
  }

  /* Position shoe image inside gallery area (bottom-left) */
  [data-block-id='image_aMmYYC'] {
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% - 30px)); /* Pull up into gallery area */
    z-index: 10;
    margin: 0;
  }

  [data-block-id='image_aMmYYC'] img {
    max-width: 150px;
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.15));
  }

  /* Color-type text block: use h3 font-size on mobile */
  [data-block-id='text_3inhNL'] h2 {
    font-size: var(--text-h3) !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Multi-Column Dark Mode | Date: 2025-01-25
What: Override hardcoded background color for dark mode compatibility
============================================ */
html[data-display='dark'] .multi-column__item {
  background: rgb(var(--text-color) / 0.08) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Force Hidden Gallery Items | Date: 2025-01-25
What: Ensure hidden gallery items are fully removed from layout and scroll
============================================ */
.product-gallery__media[hidden] {
  display: none !important;
  scroll-snap-align: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Stretched Gallery Mode | Date: 2025-01-25
What: Full width images with fixed height on mobile
============================================ */
@media screen and (max-width: 999px) {
  .product-gallery__media-list--stretched {
    --gallery-stretched-height: 70vh;
    max-height: var(--gallery-stretched-height);
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    width: 100vw !important;
    margin-left: calc(-1 * var(--container-gutter, 20px)) !important;
  }

  .product-gallery__media-list--stretched .product-gallery__media {
    height: var(--gallery-stretched-height);
    max-height: var(--gallery-stretched-height);
    width: 100vw !important;
    min-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-gallery__media-list--stretched .product-gallery__media img {
    width: 100vw !important;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Gallery Counter | Date: 2025-01-25
What: "1 / 51" style numeric indicator for galleries with many images
============================================ */
.gallery-counter {
  display: none;
  align-items: center;
  gap: 0.25em;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--text-color));
  padding: 4px 10px;
  border-radius: 12px;
  position: absolute;
  z-index: 5;
}

/* Only show on mobile (below 1000px) */
@media screen and (max-width: 999px) {
  .gallery-counter {
    display: inline-flex;
  }
}

.gallery-counter--blurred {
  background: rgb(226 217 208 / 0.85); /* #e2d9d0 with opacity */
  backdrop-filter: blur(8px);
  color: #2e2e2e;
}

html[data-display='dark'] .gallery-counter--blurred {
  background: rgb(var(--color-dark-light) / 0.85);
  color: rgb(var(--color-light));
}

.gallery-counter__separator {
  opacity: 0.5;
}

.gallery-counter__total {
  opacity: 0.7;
}

/* Position variants */
.gallery-counter--bottom_center {
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
}

.gallery-counter--bottom_left {
  bottom: var(--spacing-4);
  left: var(--spacing-4);
}

.gallery-counter--bottom_right {
  bottom: var(--spacing-4);
  right: var(--spacing-4);
}

.gallery-counter--top_left {
  top: var(--spacing-4);
  left: var(--spacing-4);
}

.gallery-counter--top_right {
  top: var(--spacing-4);
  right: var(--spacing-4);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Dark Mode Badge | Date: 2025-01-25
What: Make sold-out badge compatible with dark mode
============================================ */
html[data-display='dark'] .badge--sold-out {
  background: rgba(var(--color-light)) !important;
  color: rgba(var(--color-dark)) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Brand Template Dark Mode | Date: 2025-01-25
What: Invert multi-column images on brand collection template in dark mode
============================================ */
html[data-display='dark']
  [id$='__multi_column_8XCC7F']
  .multi-column__item
  img {
  filter: invert(1);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Shoe-Specific Dark Mode | Date: 2025-01-25
What: Invert brand logo in shoe-specific product template for dark mode
============================================ */
html[data-display='dark'] [data-block-id='image_AHmEBE'] img {
  filter: invert(1);
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: CEVOID Dark Mode | Date: 2026-02-01
What: Override CEVOID UGC gallery text colors for dark mode compatibility
============================================ */

/* Explicit dark mode */
html[data-display='dark'] [class*="cevoid"],
html[data-display='dark'] [class*="instafeed"] {
  --cevoid-title-color: rgb(var(--color-light)) !important;
  --cevoid-text-color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] [class*="cevoid"] h2,
html[data-display='dark'] [class*="cevoid"] h3,
html[data-display='dark'] [class*="cevoid"] .title,
html[data-display='dark'] [class*="cevoid"] [class*="title"],
html[data-display='dark'] [class*="cevoid"] [class*="heading"] {
  color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] .instafeed-lightbox,
html[data-display='dark'] [class*="cevoid-lightbox"],
html[data-display='dark'] [class*="cevoid-modal"],
html[data-display='dark'] [class*="cevoid-popup"] {
  color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] .instafeed-lightbox .tagged-products,
html[data-display='dark'] .instafeed-lightbox .tagged-products.instafeed-simple-popup {
  background: rgb(var(--color-dark-light)) !important;
}

html[data-display='dark'] .instafeed-lightbox .instafeed-tagged-product,
html[data-display='dark'] .instafeed-lightbox .tagged-products.instafeed-simple-popup .instafeed-tagged-product {
  color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] .instafeed-tagged-buy-button-simple-popup {
  color: rgb(var(--color-dark)) !important;
  background: rgb(var(--color-light)) !important;
}

html[data-display='dark'] [class*="cevoid"] p,
html[data-display='dark'] [class*="cevoid"] span,
html[data-display='dark'] [class*="cevoid"] a:not([class*="button"]),
html[data-display='dark'] [class*="cevoid"] label {
  color: rgb(var(--color-light)) !important;
}

html[data-display='dark'] [class*="cevoid"] [class*="product-title"],
html[data-display='dark'] [class*="cevoid"] [class*="product-name"],
html[data-display='dark'] [class*="cevoid"] [class*="product-price"] {
  color: rgb(var(--color-light)) !important;
}

/* Auto mode - follows system preference */
@media (prefers-color-scheme: dark) {
  [data-scheme="auto"] [class*="cevoid"],
  [data-scheme="auto"] [class*="instafeed"] {
    --cevoid-title-color: rgb(var(--color-light)) !important;
    --cevoid-text-color: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] [class*="cevoid"] h2,
  [data-scheme="auto"] [class*="cevoid"] h3,
  [data-scheme="auto"] [class*="cevoid"] .title,
  [data-scheme="auto"] [class*="cevoid"] [class*="title"],
  [data-scheme="auto"] [class*="cevoid"] [class*="heading"] {
    color: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] .instafeed-lightbox,
  [data-scheme="auto"] [class*="cevoid-lightbox"],
  [data-scheme="auto"] [class*="cevoid-modal"],
  [data-scheme="auto"] [class*="cevoid-popup"] {
    color: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] .instafeed-lightbox .tagged-products,
  [data-scheme="auto"] .instafeed-lightbox .tagged-products.instafeed-simple-popup {
    background: rgb(var(--color-dark-light)) !important;
  }

  [data-scheme="auto"] .instafeed-lightbox .instafeed-tagged-product,
  [data-scheme="auto"] .instafeed-lightbox .tagged-products.instafeed-simple-popup .instafeed-tagged-product {
    color: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] .instafeed-tagged-buy-button-simple-popup {
    color: rgb(var(--color-dark)) !important;
    background: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] [class*="cevoid"] p,
  [data-scheme="auto"] [class*="cevoid"] span,
  [data-scheme="auto"] [class*="cevoid"] a:not([class*="button"]),
  [data-scheme="auto"] [class*="cevoid"] label {
    color: rgb(var(--color-light)) !important;
  }

  [data-scheme="auto"] [class*="cevoid"] [class*="product-title"],
  [data-scheme="auto"] [class*="cevoid"] [class*="product-name"],
  [data-scheme="auto"] [class*="cevoid"] [class*="product-price"] {
    color: rgb(var(--color-light)) !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */

/* ============================================
BEGIN CUSTOM EDIT: Collection Card Dark Mode | Date: 2026-02-01
What: Fix items 1-4 background and text color for dark mode
============================================ */
html[data-display="dark"] [id*="collection_list_DzLTMn"] collection-list > a:nth-child(-n+4) .zoom-image {
  background-color: #383737 !important;
}

html[data-display="dark"] [id*="collection_list_DzLTMn"] collection-list > a:nth-child(-n+4) .text-custom {
  color: #ece2d9 !important;
}

@media (prefers-color-scheme: dark) {
  [data-scheme="auto"] [id*="collection_list_DzLTMn"] collection-list > a:nth-child(-n+4) .zoom-image {
    background-color: #383737 !important;
  }
  [data-scheme="auto"] [id*="collection_list_DzLTMn"] collection-list > a:nth-child(-n+4) .text-custom {
    color: #ece2d9 !important;
  }
}
/* ============================================
END CUSTOM EDIT
============================================ */


/* ============================================
BEGIN CUSTOM EDIT: Collection Promo Image Text | Date: 2026-02-01
What: Fix promo image text color and font size
============================================ */
#block-template--26902877634904__main-promotion_image_ehwNzx
  .place-self-start.text-start {
  color: #2e2e2e !important;
}
#block-template--26902877634904__main-promotion_image_ehwNzx p.h3 {
  font-size: var(--text-h3) !important;
}
#block-template--26902877634904__main-promotion_image_ehwNzx
.prose :is(.h0,.h1,.h2,.h3,.h4,h1,h2,h3,h4)+* {
    margin-block-start: var(--spacing-0) !important;
}
.collection-results .gap-6 {
  gap: var(--spacing-6) !important;
}
/* ============================================
END CUSTOM EDIT
============================================ */