/* Static-copy enhancements.
   The original carousels/gallery were driven by Swiper via the Nuxt bundle.
   That bundle is gone, so layout is restored with CSS and the interactions are
   re-implemented in enhance.js. Slide geometry that Swiper used to compute in
   JS is expressed here instead, so it stays responsive at any viewport. */

/* Swiper baked a fixed pixel transform/width into the markup at capture time.
   Neutralise both so the slides lay out from CSS again. */
.swiper-wrapper { transform: none !important; transition: none !important; width: auto !important; }

/* Hero: exactly one slide per view, always the full width of the viewport. */
.slider-wrapper .swiper-slide { width: 100% !important; flex: 0 0 100% !important; }

/* Horizontal carousels become native scroll-snap strips: responsive, swipeable,
   and keyboard/trackpad friendly without a slider library. */
.swiper:not(.swiper-vertical) {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper:not(.swiper-vertical)::-webkit-scrollbar { display: none; }
.swiper:not(.swiper-vertical) > .swiper-wrapper > .swiper-slide { scroll-snap-align: start; }

/* The product thumbnail rail is a vertical swiper. */
.swiper.swiper-vertical { overflow-y: auto !important; scrollbar-width: none; }
.swiper.swiper-vertical::-webkit-scrollbar { display: none; }

/* Nav arrows were hidden by Swiper's disabled/lock classes at capture time. */
.swiper-button-prev, .swiper-button-next,
[class*="-nav-prev"], [class*="-nav-next"] { cursor: pointer; }
/* The popup's slider is built here, so its disabled arrows are real. */
.swiper-button-disabled:not(.modal-slider-nav),
.swiper-button-lock { opacity: 1 !important; pointer-events: auto !important; }

.gallery-list .swiper-slide { cursor: pointer; }
.gallery-list .swiper-slide.is-active img,
.gallery-list .active img { outline: 2px solid #8d4a52; }

/* The sidebar renders client-side on the live site, so the icon CSS its search
   field and category chevrons rely on was injected at runtime and never made it
   into the captured stylesheets. These two rules are rebuilt from the icon data
   that did get mirrored, in api/_nuxt_icon/, using the same mask technique the
   captured icons use. */
:where(.i-bi\:search){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill='black' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")}
:where(.i-ic\:outline-keyboard-arrow-down){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/%3E%3C/svg%3E")}

/* Same story for the gallery rail arrows and the review close button: they
   render client-side, so their icon CSS was injected at runtime and wasn't
   captured either. Without it the controls collapse to 0x0 and look absent.
   Rebuilt from api/_nuxt_icon/ as above. With these, every iconify class
   used anywhere in the copy now has a rule. */
:where(.i-material-symbols\:arrow-upward){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 20V7.825l-5.6 5.6L4 12l8-8l8 8l-1.4 1.425l-5.6-5.6V20z'/%3E%3C/svg%3E")}
:where(.i-material-symbols\:arrow-downward){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 4v12.175l-5.6-5.6L4 12l8 8l8-8l-1.4-1.425l-5.6 5.6V4z'/%3E%3C/svg%3E")}
:where(.i-ph\:x-bold){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' height='256'%3E%3Cpath fill='black' d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E")}

/* ---- add-to-cart upsell popup ---------------------------------------- */

/* The popup's own styles survived the capture in _nuxt/get_productTemp.*.css
   (Vue scope data-v-f2092d3a), and Bootstrap's modal CSS and Swiper's slider
   CSS are inlined in every product page. Missing is only what the JS supplied
   at run time: the panel behind the modal, the slide widths Swiper measured,
   the positioning context its arrows and dots resolve against, and the icons. */

/* .modal-content is forced transparent for the product-gallery modal on these
   pages; this popup paints its own sections and needs the panel back. */
.atc-modal .modal-content { background-color: #fff; }

/* .modal-slider-nav and .swiper-pagination are absolute, and their offsets
   (left/right 40px, bottom 0) only line up against the rail's own box. */
.atc-modal .slider-wrap { position: relative; }

/* Swiper sized slides in JS: three per view, two on tablet, one on phone with
   the next peeking through the 70px right padding the stylesheet adds there. */
.atc-modal .modal-slider > .swiper-wrapper { gap: 20px; }
.atc-modal .modal-slider > .swiper-wrapper > .swiper-slide {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 40px) / 3);
}
@media (max-width: 991.9px) {
  .atc-modal .modal-slider > .swiper-wrapper > .swiper-slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767.9px) {
  .atc-modal .modal-slider > .swiper-wrapper { gap: 12px; }
  .atc-modal .modal-slider > .swiper-wrapper > .swiper-slide { flex-basis: 100%; }
}

/* Nuxt Icon emitted one mask-image rule per icon a page actually used, so the
   four the popup needs are absent. Same shape, sized by font-size as there. */
:where(.i-material-symbols\:check-rounded),
:where(.i-material-symbols\:close-rounded),
:where(.i-material-symbols\:chevron-left-rounded),
:where(.i-material-symbols\:chevron-right-rounded) {
  display: inline-block; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg); mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
:where(.i-material-symbols\:check-rounded) {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
:where(.i-material-symbols\:close-rounded) {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
:where(.i-material-symbols\:chevron-left-rounded) {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}
:where(.i-material-symbols\:chevron-right-rounded) {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}