/** Shopify CDN: Minification failed

Line 473:0 Unexpected "}"

**/
/* Base highlighted text styles with modern refinements */
.stacked-text--title.highlighted span,
.stacked-text--overline.highlighted span,
.stacked-text--description.highlighted span {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background-clip: padding-box !important;
  transition: all 0.4s var(--transition--ease-out) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 
    4px 4px 15px rgba(0, 0, 0, 0.1),
    -2px -2px 8px rgba(255, 255, 255, 0.08),
    inset 1px 1px 2px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* (Optional) Hover effect for highlighted text */
/*
.stacked-text--title.highlighted span:hover,
.stacked-text--overline.highlighted span:hover,
.stacked-text--description.highlighted span:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    6px 6px 20px rgba(0, 0, 0, 0.15),
    -2px -2px 10px rgba(255, 255, 255, 0.1),
    inset 1px 1px 3px rgba(255, 255, 255, 0.1) !important;
}
*/

/* Enhanced button styles */
.stacked-text--button-container.highlighted .stacked-text--button span span {
  position: relative !important;
  overflow: hidden !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  background-clip: padding-box !important;
  transition: all 0.4s var(--transition--ease-out) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 
    4px 4px 15px rgba(0, 0, 0, 0.1),
    -2px -2px 8px rgba(255, 255, 255, 0.08),
    inset 1px 1px 2px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Button hover effects */
.stacked-text--button-container.highlighted .stacked-text--button:hover span span {
  transform: translateY(-2px) !important;
  box-shadow: 
    6px 6px 20px rgba(0, 0, 0, 0.15),
    -2px -2px 10px rgba(255, 255, 255, 0.1),
    inset 1px 1px 3px rgba(255, 255, 255, 0.1) !important;
}

/* Shine effect on hover */
.stacked-text--button-container.highlighted .stacked-text--button span span::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ) !important;
  transition: 0.8s var(--transition--ease-out) !important;
}

.stacked-text--button-container.highlighted .stacked-text--button:hover span span::before {
  left: 100% !important;
}

/* Active state for buttons */
.stacked-text--button-container.highlighted .stacked-text--button:active span span {
  transform: translateY(1px) !important;
  box-shadow: 
    2px 2px 10px rgba(0, 0, 0, 0.1),
    -1px -1px 6px rgba(255, 255, 255, 0.05),
    inset 2px 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.1s var(--transition--standard) !important;
}

/* Focus state for accessibility */
.stacked-text--button-container.highlighted .stacked-text--button:focus-visible span span {
  outline: none !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.2),
    4px 4px 15px rgba(0, 0, 0, 0.1),
    -2px -2px 8px rgba(255, 255, 255, 0.08) !important;
}

/* Remove underline from highlighted stacked text buttons */
.stacked-text--button-container.highlighted [data-item="block-link"] > *:after {
  border-bottom: 0 !important;
}

[data-text-color="body"] .stacked-text--button-container.highlighted [data-item="block-link"] > *:after {
  border-color: transparent !important;
}

[data-text-color="white"] .stacked-text--button-container.highlighted [data-item="block-link"] > *:after {
  border-color: transparent !important;
}

/* Mobile adjustment for highlighted buttons */
@media only screen and (max-width: 767px) {
  .stacked-text--button-container.highlighted [data-item="block-link"] > * {
    border-bottom: 0 !important;
  }
}

/* ---------- BUTTON CONTAINER (generic layout) ---------- */
.stacked-text--button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

/* white text toggle fix */
/* When white_text is true */
.stacked-text--root[data-text-color="white"] .stacked-text--title span,
.stacked-text--root[data-text-color="white"] .stacked-text--overline span,
.stacked-text--root[data-text-color="white"] .stacked-text--description span,
.stacked-text--root[data-text-color="white"] .stacked-text--button span span {
  color: #FFFFFF !important;
}

/* When white_text is false */
.stacked-text--root[data-text-color="body"] .stacked-text--title span,
.stacked-text--root[data-text-color="body"] .stacked-text--overline span,
.stacked-text--root[data-text-color="body"] .stacked-text--description span,
.stacked-text--root[data-text-color="body"] .stacked-text--button span span {
  color: #000000;
}

/* Fix animation for product page descriptions */
.product--block--description {
  /* Initial state: invisible and slightly shifted down */
  opacity: 0;
  transform: translateY(20px);
  /* Animation settings */
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.3s; /* Adjust delay as desired */
}

/* Define the keyframes for the fade in & slide up effect */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Make collection title bold */
h1[data-item="section-heading"] {
  font-weight: bold !important;
  font-family: Roboto;
}

/* Update this selector to match your HTML */
.collection-header--description h3 {
  font-weight: normal !important;
  font-family: Roboto;
}

/* Update animation selectors */
.collection-header--description p,
.collection-header--description h3 {
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transform-origin: top center;
  animation: paragraph-cascade 0.7s var(--transition--ease-out, ease-out) forwards;
  animation-delay: calc(0.2s + (var(--paragraph-index, 0) * 0.08s));
}

/* Staggered animation indexing based on natural order */
/* First child (p with data-item="paragraph") */
.description-wrapper .description-content :nth-child(1) {
  --paragraph-index: 1;
}
/* Second child (h3) */
.description-wrapper .description-content :nth-child(2) {
  --paragraph-index: 2;
}
/* Third child (the following p) */
.description-wrapper .description-content :nth-child(3) {
  --paragraph-index: 3;
}

/* Cascade keyframes */
@keyframes paragraph-cascade {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Breadcrumbs */
div.main-product--root div.product--breadcrumbs {
  width: 100%;
  padding-top: 20px !important;
  padding-left: 40px !important;
  padding-bottom: 0px !important;
  box-sizing: border-box !important;
}

div.main-product--root div.product--breadcrumbs ul.breadcrumbs--root {
  width: 100%;
  padding-top: 20px !important;
  padding-left: 48px !important;
  padding-bottom: 0px !important;
  box-sizing: border-box !important;
}

/* Breadcrumbs Mobile Adjustments */
/* @media (max-width: 767px) {
  div.main-product--root div.product--breadcrumbs {
    padding-top: 10px !important;
    padding-left: 20px !important;
  }
  div.main-product--root div.product--breadcrumbs ul.breadcrumbs--root {
    padding-top: 10px !important;
    padding-left: 20px !important;
  }
}
 */

/* Fix white gutter on mobile on main-product.liquid */
/* ------------------------------------------------------------------
   MOBILE PRODUCT CAROUSEL — STOP THE SIDE-TO-SIDE “WOBBLE”
   ------------------------------------------------------------------*/
@media (max-width: 767px) {

  /* 0. Belt-and-suspenders: never let the page scroll sideways */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 1. Clamp the product-media wrapper to the viewport width */
  .main-product--mobile {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;          /* hide stray pixels    */
  }

  /* 2. Do the same to whichever viewport the theme uses
        (Flickity ≤ 10.2, Swiper ≥ 10.3)                         */
  .main-product--mobile .carousel--viewport,
  .main-product--mobile .flickity-viewport,
  .main-product--mobile .swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 3. Force every slide to be exactly one screen wide           */
  .main-product--mobile .carousel--slide,
  .main-product--mobile .flickity-slide,
  .main-product--mobile .swiper-slide {
    flex: 0 0 100% !important;            /* no shrink / grow      */
    max-width: 100% !important;
  }

  /* 4. Make sure the actual media fills its slide cleanly        */
  .main-product--mobile img,
  .main-product--mobile video,
  .main-product--mobile model-viewer {
    width: 100% !important;
    height: auto !important;              /* preserve aspect ratio */
    object-fit: cover !important;         /* crop edges, not width */
  }
}

/* Fix uneven padding in mobile carousel */
/* Fix for carousel image padding issue */
@media (max-width: 767px) {
  /* Target the carousel root element */
  main-product-carousel.carousel--root {
    margin-left: -15px !important; /* Counteract the padding in container */
    width: calc(100% + 15px) !important; /* Expand to full width plus offset */
    max-width: calc(100% + 15px) !important;
  }
  
  /* Target the carousel wrapper */
  .carousel--root .carousel--wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  
  /* Target the specific issue - dot navigation positioning */
  .carousel--dot-container {
    padding-left: 15px !important; /* Realign dots if they get shifted */
  }
  
  /* Ensure containers are properly aligned */
  .main-product--mobile {
    box-sizing: border-box !important;
    padding-left: 0 !important;
    overflow: visible !important; /* Allow negative margin */
  }
  
  /* Target the slide elements directly */
  /* .carousel--block {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  } */
  
  /* Force any image within to take full width */
  .carousel--block img {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Only target the mobile product carousel within the main-product--mobile container */
  .main-product--mobile main-product-carousel.carousel--root .carousel--wrapper {
    /* Override only the gap without changing other spacing properties */
    margin-left: -15px !important;
    width: calc(100% + 30px) !important;
  }
  
  /* Target only the blocks inside this specific carousel */
  .main-product--mobile main-product-carousel.carousel--root .carousel--block {
    /* Zero out left padding/margin without changing other properties */
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Ensure images fill properly */
  .main-product--mobile main-product-carousel.carousel--root .carousel--block img {
    /* Full width with no offset */
    width: 100% !important;
  }
}

/* ---------- MENU SYSTEM ---------- */

/* Main Menu Links */
.x-menu--level-1--link a {
  position: relative;
  background-color: transparent;
  transition: color 0.3s ease, text-shadow 0.2s ease;
}

/* Submenu Container */
.x-menu--level-2--container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.4s ease-out;
  pointer-events: none;
}

.x-menu--level-1--link:hover > .x-menu--level-2--container,
.x-menu--level-1--link:focus > .x-menu--level-2--container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Submenu Column Styling */
.x-menu--level-2--wrapper > ul {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.x-menu--level-2--wrapper > ul:last-child {
  border-right: none;
}

.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul {
  opacity: 1;
  transform: translateY(0);
}

/* Submenu Links */
.x-menu--level-2--link {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.x-menu--level-2--link a {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.x-menu--level-2--link a::after {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 10px; /* Match the horizontal padding */
  width: calc(100% - 20px); /* Subtract left and right padding */
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0); /* Start with zero width */
  transform-origin: center; 
  transition: transform 0.2s ease;
}
.x-menu--level-2--link a:hover::after,
.x-menu--level-2--link a:focus::after {
  transform: scaleX(1); /* Expand to full width on hover */
}

/* Animation Timing for Submenu Items */
.x-menu--level-1--link:hover > .x-menu--level-2--container .x-menu--level-2--link,
.x-menu--level-1--link:focus > .x-menu--level-2--container .x-menu--level-2--link {
  opacity: 1;
  transform: translateY(0);
}

/* Cascading Delays for Links */
.x-menu--level-2--link:nth-child(1) { transition-delay: 0.15s; }
.x-menu--level-2--link:nth-child(2) { transition-delay: 0.3s; }
.x-menu--level-2--link:nth-child(3) { transition-delay: 0.5s; }
.x-menu--level-2--link:nth-child(4) { transition-delay: 0.6s; }
.x-menu--level-2--link:nth-child(5) { transition-delay: 0.7s; }

/* Cascading Delays for Columns */
.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul:nth-of-type(1) { transition-delay: 0.15s; }
.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul:nth-of-type(2) { transition-delay: 0.3s; }
.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul:nth-of-type(3) { transition-delay: 0.5s; }
.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul:nth-of-type(4) { transition-delay: 0.72s; }
.x-menu--level-2--container[aria-hidden="false"] > .x-menu--level-2--wrapper > ul:nth-of-type(5) { transition-delay: 1s; }

/* Soft-edge gradient line with darker tones */
.x-menu--level-2--link a::after {
  background: linear-gradient(90deg, 
    rgba(160, 120, 95, 0.5), 
    rgba(120, 80, 60, 1), 
    rgba(160, 120, 95, 0.5)
  );
  height: 2.5px;
  border-radius: 3px;
}
}
/* glow effect  */
.x-menu--level-2--link a:hover::after,
.x-menu--level-2--link a:focus::after {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
/* text effect on hover  */
.x-menu--level-2--link a:hover,
.x-menu--level-2--link a:focus {
  text-shadow: 0 0 0.5px currentColor;
}

/* Footer Links Styling  */
/* Footer Link Styling - Matches Main Navigation */
.footer--column-content a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Underline effect */
.footer--column-content a::after {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, 
    rgba(160, 120, 95, 0.5), 
    rgba(120, 80, 60, 1), 
    rgba(160, 120, 95, 0.5)
  );
  transform: scaleX(0); /* Start with zero width */
  transform-origin: center; 
  transition: transform 0.2s ease;
}

/* Hover states */
.footer--column-content a:hover::after,
.footer--column-content a:focus::after {
  transform: scaleX(1); /* Expand to full width on hover */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Glow effect */
}

/* Text effect on hover */
.footer--column-content a:hover,
.footer--column-content a:focus {
  text-shadow: 0 0 0.5px currentColor;
}

/* Make sure padding doesn't interfere with underline positioning */
.footer--column-content li a {
  padding: 6px 0;
}

/* Keep hardcoded "footer--link" class styling consistent */
.footer--link::after {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, 
    rgba(160, 120, 95, 0.5), 
    rgba(120, 80, 60, 1), 
    rgba(160, 120, 95, 0.5)
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.footer--link:hover::after,
.footer--link:focus::after {
  transform: scaleX(1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Mobile adjustments for centered text */
@media screen and (max-width: 767px) {
  .footer--column-content a::after {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

/* Target and style all Sort By buttons */
.navigation--button[data-drawer-view="filter"],
.navigation--filter .navigation--button,
.sort-by-button,
[data-toggle-menu="sort_filter"],
.navigation--mobile-button[data-drawer-view="filter"] {
  /* Core button styling */
  background-color: #b88b76 !important;
  color: white !important;
  border: none !important;
  border-radius: 30px !important;
  
  /* Improved text centering with flexbox */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  
  /* Smaller dimensions */
  min-width: 90px !important;
  height: 36px !important;
  padding: 0 16px !important;
  
  /* Text styling */
  font-size: 12px !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  
  /* Remove any extra styling */
  box-shadow: none !important;
  margin: 8px 0 !important;
  outline: none !important;
  position: relative !important;
  /* z-index: 5 !important; */
  line-height: 1 !important; /* Critical for vertical centering */
}

/* Fix for text that might be wrapped in spans */
.navigation--button[data-drawer-view="filter"] span,
.navigation--filter .navigation--button span,
.sort-by-button span,
[data-toggle-menu="sort_filter"] span,
.navigation--mobile-button[data-drawer-view="filter"] span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Remove white outline */
.navigation--button[data-drawer-view="filter"]::before,
.navigation--button[data-drawer-view="filter"]::after,
.navigation--filter .navigation--button::before,
.navigation--filter .navigation--button::after,
.sort-by-button::before,
.sort-by-button::after,
[data-toggle-menu="sort_filter"]::before,
[data-toggle-menu="sort_filter"]::after,
.navigation--container::before,
.navigation--container::after {
  display: none !important;
  content: none !important;
}

/* Hide duplicate buttons */
.navigation--mobile-header,
.navigation--container ~ .sort-by-button,
.section--collection-navigation > .sort-by-button:not(:first-child),
.sort-by-button + .sort-by-button,
.navigation--container + .navigation--button,
.navigation--filter + .navigation--filter {
  display: none !important;
}

/* Target parent elements that might be causing the outline */
.navigation--filter,
.navigation--container {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Hide price and product type filters */
.filter--toggle[aria-controls="price-refine_filter"],
#price-refine_filter,
.filter--toggle[aria-controls="product-type-refine_filter"],
#product-type-refine_filter {
  display: none !important;
}

/* Ensure proper drawer functionality */
.drawer--filter {
  max-width: 100%;
  width: 100%;
}

body.drawer--active .drawer--filter {
  transform: translateX(0) !important;
}

/* Mobile specific styles */
@media (max-width: 768px) {
  /* Keep navigation visible */
  .section--collection-navigation {
    display: block !important;
  }
  
  /* Container styling */
  .navigation--container {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 10px 15px !important;
  }
}

/* Stacked Text Mobile center fix  */
@media only screen and (max-width: 767px) {
  /* Target stacked text inside carousel slides */
  .slideshow-carousel .stacked-text--root,
  .slideshow-carousel .stacked-text--wrapper,
  .slideshow-carousel .stacked-text--title,
  .slideshow-carousel .stacked-text--description,
  .slideshow-carousel .stacked-text--overline {
    text-align: center !important;
  }
  
  /* Ensure buttons are centered in slideshows */
  .slideshow-carousel .stacked-text--button-container {
    justify-content: center !important;
  }
}

/* =================================================== */
/* Animations for Global zoom in/out and Hover Effects */
/* =================================================== */

/* -------------------- */
/* 1. Single Image Pop-Zoom Animation */
/* -------------------- */

/* Keyframes for the pop-zoom effect */
@keyframes popZoom {
  0% {
    transform: scale(1); /* Start at normal size */
  }
  40% {
    transform: scale(1.15); /* Pop to larger size */
  }
  100% {
    transform: scale(.86); /* Return to slightly smaller size for visual effect */
  }
}

/* Base styling for the target images */
[data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item] {
  overflow: hidden; /* Ensure any oversized image is clipped */
  position: relative;
  backface-visibility: hidden; /* Performance optimization */
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* Force GPU acceleration */
  will-change: transform;
}

[data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item] > img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 0.3s ease; /* Smooth transition for non-animation states */
  transform: scale(1); /* Start at normal scale */
}

/* Only apply on devices with hover capability */
@media (hover: hover) {
  /* On hover - play the pop-zoom animation */
  [data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item]:hover > img {
    animation: popZoom 0.5s ease-in-out forwards;
  }
}

/* Handle touch devices specifically */
@media (hover: none) {
  [data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item] > img {
    transform: scale(1) !important; /* Ensure normal scale on touch devices */
    animation: none !important; /* Disable animation on touch */
  }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
  [data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item]:active > img {
    /* Optional tap effect for iOS */
    transform: scale(0.98);
    transition: transform 0.2s ease;
  }
}

/* -------------------- */
/* 2. Second Image Hover Effects */
/* -------------------- */

.product-card--image-wrapper {
  position: relative;
  overflow: hidden; /* ensures any oversized image is clipped */
  backface-visibility: hidden; /* Performance optimization */
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* Force GPU acceleration */
}

.product-card--image,
.product-card--hover-image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.product-card--hover-image {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  /* Start bigger and hidden (scale ~1.15 so you can see it "zoom out") */
  transform: scale(1.15);
  opacity: 0;
}

/* Only apply on real hover devices */
@media (hover: hover) {
  .product-card--image-wrapper:hover .product-card--hover-image {
    /* "Zoom out" effect: it goes from big (1.15) down to normal (1.0) */
    transform: scale(1.0);
    opacity: 1;
  }
  /* Fade the first image away */
  .product-card--image-wrapper:hover .product-card--image {
    opacity: 0.3; /* or 0 to hide it completely */
  }
}

/* Handle touch devices specifically */
@media (hover: none) {
  /* Completely disable second image effect on mobile */
  .product-card--hover-image {
    display: none; /* Hide the hover image completely */
  }
  
  /* Ensure the main image is always visible and normal */
  .product-card--image {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/* iOS Safari specific fixes */
/* @supports (-webkit-touch-callout: none) {
  .product-card--image-wrapper:active .product-card--hover-image {
    transform: scale(1.0);
    opacity: 1;
  }
} */

/* -------------------- */
/* 3. Accessibility */
/* -------------------- */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-transition-type="zoom-in"][data-transition-trigger="hover"][data-transition-item] > img,
  .product-card--image,
  .product-card--hover-image {
    animation: none !important;
    transition: none !important;
    transform: scale(1) !important;
  }
  
  /* Still show the hover image for content, but without animations */
  .product-card--image-wrapper:hover .product-card--hover-image {
    opacity: 1 !important;
  }
}
/* Shop the Look quick add in dark mode fix */
[data-text-color=white] .product-quick-add--button .product-quick-add--text {
  color: #000;
}

/* LOW-STOCK MESSAGE — brand typography */
.product-low-stock--message,
.product-low-stock--message em,
.product-low-stock--message i{
  font-family: var(--font-heading-family, "Roboto", sans-serif);
  font-style: normal;
  text-transform: none;
  color: #9b6124;
  font-weight: 500;
}

/* LOW-STOCK BAR — brown fill on white track */
.product-low-stock--bar{
  position:relative;
  width:100%;
  height:6px;
  background:#fff;
  border-radius:3px;
  overflow:hidden;
}
.product-low-stock--bar::after{
  content: '';
  position: absolute;
  inset: 0;
  width: var(--progress-percent);
  background: linear-gradient(90deg,#d4a88c 0%,#b88b76 100%);
  border-radius: inherit;
  transition: width .6s cubic-bezier(.45,.05,.55,.95);
}

/* Account page – “Manage Subscriptions” + “Logout” side-by-side */
.account--quick-links{
  display:flex;          /* lay items in one row */
  flex-wrap:wrap;        /* wrap on very narrow screens */
  gap:1rem;              /* space between the two links */
  margin-top:0.75rem;    /* space above View Addresses */
  margin-bottom:1.5rem;  /* space before Orders heading */
}

/* remove default blocky spacing each theme might add */
.account--quick-links [data-item="block-link"]{
  margin:0;
}

/* STORE LOCATOR PAGE REMOVE STORE IMAGE  */
/* Hide only store thumbnail images in S: Store Locator */
.item-thumb img {
    display: none !important;
}