/** Shopify CDN: Minification failed

Line 1348:22 "-" can only be used as an infix operator, not a prefix operator

**/
/* ======================================================
   The Skirting Factory – Custom Visual Enhancements
   ====================================================== */

/* -----------------------------------------------
   1. PRODUCT CARDS — premium image hover & shadow
   ----------------------------------------------- */

.product-card-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card-wrapper:hover {
  transform: translateY(-4px);
}

.card--card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: box-shadow 0.3s ease;
}

.product-card-wrapper:hover .card--card {
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}

.card__heading {
  font-weight: 700;
  letter-spacing: 0.01rem;
}

.card-information .price {
  font-size: 1.6rem;
  font-weight: 600;
}

/* Subtle separator between product name and price */
.card-information > * + * {
  margin-top: 0.4rem;
}


/* -----------------------------------------------
   2. PRODUCT PAGE — refined layout
   ----------------------------------------------- */

/* Subtle section divider between blocks */
.product__info-container .product-form {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
}

/* Description text — improved line-height for readability */
.product__description {
  line-height: 1.75;
}

.product__description ul,
.product__description ol {
  padding-left: 1.8rem;
  margin-bottom: 1.5rem;
}

.product__description ul li,
.product__description ol li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* Hero image — slight rounding */
.product__media-wrapper .media {
  border-radius: 10px;
  overflow: hidden;
}

/* Product Description section heading */
.tsf-product-desc-title {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02rem;
  text-align: left;
}

@media screen and (min-width: 750px) {
  .tsf-product-desc-title {
    text-align: center;
  }
}


/* -----------------------------------------------
   3. ADD TO CART BUTTON — premium look
   ----------------------------------------------- */

.product-form__submit.button {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  padding: 1.6rem 2.4rem;
  border-radius: 8px;
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  width: 100%;
  max-width: 44rem;
}

.product-form__submit.button:hover:not([aria-disabled='true']) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-button), 0.35);
}

.product-form__submit.button:active {
  transform: translateY(0);
}


/* -----------------------------------------------
   4. TRUST BADGES — premium style override
   ----------------------------------------------- */

.tsf-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.8rem 0 2rem;
  padding: 1.6rem 1.8rem;
  border-radius: 10px;
  background: rgba(var(--color-foreground), 0.03);
  border: 1px solid rgba(var(--color-foreground), 0.08);
}

.tsf-trust-badges .tsf-badge-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

.tsf-trust-badges .tsf-badge-row svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #5a8a5f;
  stroke: #5a8a5f;
}

.tsf-trust-badges .tsf-badge-row strong {
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

.tsf-trust-badges .tsf-badge-row span.tsf-badge-sub {
  color: rgba(var(--color-foreground), 0.7);
}


/* -----------------------------------------------
   5. VARIANT PICKER — cleaner pill buttons
   ----------------------------------------------- */

.product-form__input .swatch-input__input:not(:checked) + .swatch__input-label,
.product-form__input .select__select,
fieldset.product-form__input legend + ul .swatch-input__input:not(:checked) + .swatch__input-label {
  border-radius: 8px;
}

/* Radio/pill variant buttons */
.variant-input-wrapper .variant__button-label {
  border-radius: 8px;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* -----------------------------------------------
   Quick Add Modal & Filters — Z-index fixes
   ----------------------------------------------- */

.quick-add-modal.quick-add-modal[open] {
  z-index: 9999 !important;
}

.mobile-facets {
  z-index: 9999 !important;
}

.quick-add-modal__content {
  margin-top: 1.5rem !important;
  max-height: calc(100vh - 3rem) !important;
  overflow: auto !important;
}

@media screen and (max-width: 749px) {
  quick-add-modal .product__media-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }
  quick-add-modal .product__media-list {
    max-height: 28vh !important;
    overflow: hidden !important;
  }
  quick-add-modal .product-media-container {
    max-height: 28vh !important;
  }
  quick-add-modal .product-media-container .media {
    max-height: 28vh !important;
  }
  quick-add-modal .product-media-container img {
    object-fit: cover !important;
    height: 100% !important;
  }
}


/* -----------------------------------------------
   6. ANNOUNCEMENT BAR — subtle refinement
   ----------------------------------------------- */

/* Announcement bar — compact single line */
.announcement-bar__message {
  font-family: "Inter", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06rem !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
}


/* -----------------------------------------------
   7. TESTIMONIAL SECTION — card polish
   ----------------------------------------------- */

.testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Star icon fill */
.testimonial-card .svg-wrapper svg,
.testimonial-card svg {
  fill: #FAAF00;
  color: #FAAF00;
  stroke: none;
}

/* New premium testimonials stars */
.tsf-testimonials__stars-summary svg,
.tsf-testimonial-card__stars svg {
  fill: #FAAF00 !important;
  stroke: none !important;
}


/* -----------------------------------------------
   12. TRUST BADGES — 4-row layout fix
   ----------------------------------------------- */

.tsf-trust-badges {
  max-width: 44rem;
}

@media screen and (max-width: 749px) {
  .tsf-trust-badges {
    max-width: 100%;
  }
}


/* -----------------------------------------------
   13. FAQ SECTION — card polish
   ----------------------------------------------- */

.tsf-faq__list {
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

.tsf-faq__question {
  font-family: inherit;
}


/* -----------------------------------------------
   14. NEWSLETTER SECTION — visual polish
   ----------------------------------------------- */

.email-signup-banner__heading {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 800;
}


/* -----------------------------------------------
   15. RELATED PRODUCTS — top border
   ----------------------------------------------- */

.section-related-products {
  border-top: 1px solid rgba(var(--color-foreground), 0.07);
}


/* -----------------------------------------------
   8. IMAGE BANNER HERO — text readability + mobile height
   ----------------------------------------------- */

.image-banner .banner__box h2.hxxl,
.image-banner .banner__box h2,
.banner__heading {
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.banner__text {
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
}

/* Give the hero text box elegant bottom breathing room globally */
.banner__box {
  padding-bottom: 3rem !important;
}

/* Push the entire content block away from the bottom edge — works on both desktop and mobile */
.image-banner .banner__content {
  padding-bottom: 3rem !important;
}

/* Mobile hero — full bleed image with text overlay */
@media screen and (max-width: 749px) {
  /* Fix zoom-in animation: position:fixed on img breaks mobile layout */
  .banner__media.animate--zoom-in > img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Remove gray content box on mobile (same as banner--desktop-transparent does on desktop) */
  .banner--desktop-transparent .banner__box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2rem 1.5rem 2rem !important;
  }

  /* Set hero height on mobile — make it tall enough and anchor content to the bottom */
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    max-height: 800px !important;
    justify-content: flex-end !important;
  }

  /* Image fills the container absolutely */
  .banner__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}


/* -----------------------------------------------
   9. SECTION RICH TEXT — visual breathing room
   ----------------------------------------------- */

.rich-text__heading {
  line-height: 1.3;
}


/* -----------------------------------------------
   10. FOOTER & PAGE — global polish
   ----------------------------------------------- */

/* Slightly rounder buttons globally */
.button {
  border-radius: 8px;
}

/* -----------------------------------------------
   19. DESKTOP HEADER & HERO POLISH
   ----------------------------------------------- */

@media screen and (min-width: 750px) {
  /* Force hero H1 to single line with max width constraints */
  .image-banner .banner__heading {
    white-space: nowrap !important;
    font-size: clamp(3rem, 4vw, 4.5rem) !important;
  }
}

@media screen and (min-width: 990px) {
  /* Shrink desktop navbar height */
  .shopify-section-group-header-group .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* Strip excessive padding on the logo wrapper to flatten the bar */
  .header__heading-link {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* Smoother focus ring */
*:focus-visible {
  outline-offset: 4px;
}

/* Collection/product grid spacing enhancement */
.grid.product-grid {
  row-gap: 3rem;
}

@media screen and (max-width: 749px) {
  .grid.product-grid {
    row-gap: 2rem;
  }
}

/* -----------------------------------------------
   11. RESPONSIVE TYPOGRAPHY FIXES
   Applied on mobile (<750px) to prevent oversized text
   ----------------------------------------------- */

/* Hero banner heading — cap on mobile */
@media screen and (max-width: 749px) {
  /* The hxxl class from Shopify's theme scales with clamp — override it on mobile */
  .banner__heading.hxxl,
  .image-banner .hxxl,
  .hxxl {
    font-size: clamp(2.6rem, 8vw, 4rem) !important;
    line-height: 1.15;
  }

  /* Announcement / banner text below hero */
  .banner__text {
    font-size: 1.5rem;
    letter-spacing: 0.02rem;
  }

  /* Section headings inside Why Us and How It Works */
  .tsf-why-us__section-title h2 {
    font-size: 2rem;
  }

  .tsf-how-it-works__title h2 {
    font-size: 1.9rem;
  }

  /* Stat numbers */
  .tsf-why-us__stat-number {
    font-size: 2rem !important;
  }

  .tsf-why-us__stat-label {
    font-size: 1rem;
  }

  /* Step numbers — reduce circle and number */
  .tsf-how-it-works__number {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.6rem !important;
  }

  /* Step text */
  .tsf-how-it-works__step-title {
    font-size: 1.4rem !important;
  }

  .tsf-how-it-works__step-text {
    font-size: 1.3rem !important;
  }

  /* Why Us card title */
  .tsf-why-us__card-title {
    font-size: 1.45rem !important;
  }

  .tsf-why-us__card-text {
    font-size: 1.3rem !important;
  }

  /* Rich text section headings */
  .rich-text__heading {
    font-size: 1.8rem;
  }
}

/* Stat bar — slightly smaller on mid-size tablets */
@media screen and (max-width: 989px) and (min-width: 750px) {
  .tsf-why-us__stat-number {
    font-size: 2.2rem;
  }
}


/* -----------------------------------------------
   16. IMAGE WITH TEXT — "Where Craft Meets Character"
   Premium visual treatment
   ----------------------------------------------- */

/* Container gets a subtle background tint */
.image-with-text {
  background: rgba(var(--color-foreground), 0.015);
}

/* Image side — rounded corners, overflow clip, zoom on hover */
.image-with-text__media-item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14);
  position: relative;
}

/* Zoom effect on the photo */
.image-with-text__media-item img,
.image-with-text__media-item .media img {
  transition: transform 0.6s ease !important;
  transform-origin: center center;
}

.image-with-text__media-item:hover img,
.image-with-text__media-item:hover .media img {
  transform: scale(1.04) !important;
}

/* Gradient overlay on image for depth */
.image-with-text__media-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.08) 0%,
    transparent 60%
  );
  border-radius: 20px;
  pointer-events: none;
}

/* Text side — better spacing and visual hierarchy */
.image-with-text__content {
  padding: 3rem 2rem 3rem 4rem !important;
}

@media screen and (max-width: 749px) {
  .image-with-text__content {
    padding: 2.4rem 0 !important;
  }

  /* No badge on mobile */
}

/* Heading — left accent line */
.image-with-text__content .image-with-text__heading {
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  position: relative;
  padding-left: 1.6rem;
  border-left: 4px solid rgb(var(--color-foreground));
  margin-bottom: 2rem !important;
}

/* Body text — more readable, styled */
.image-with-text__content .image-with-text__text p {
  font-size: 1.5rem;
  line-height: 1.75;
  color: rgba(var(--color-foreground), 0.72);
  margin-bottom: 1.2rem;
}

.image-with-text__content .image-with-text__text em {
  font-style: normal;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

/* CTA button */
.image-with-text__content .button {
  margin-top: 1rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
}


/* -----------------------------------------------
   17. SLIDESHOW — Premium full-bleed treatment
   ----------------------------------------------- */

/* Prevent any overflow causing horizontal scroll */
html, body { overflow-x: clip; }

/* Reserve scrollbar space always to prevent layout shift when cart opens */
html { scrollbar-gutter: stable; }


/* Section wrapper — no padding, clips overflow */
.shopify-section:has(slideshow-component:not(.announcement-bar)) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/*
 * slideshow-component is the POSITIONING CONTEXT for the overlay dots.
 * It has a fixed height — slides fill it, controls overlay it.
 * Controls are placed OUTSIDE the scrollable .slideshow div so they
 * don't scroll away with the slides.
 */
slideshow-component:not(.announcement-bar) {
  position: relative !important;
  display: block !important;
  min-height: 420px !important;
  max-height: 780px !important;
  overflow: hidden !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 749px) {
  slideshow-component:not(.announcement-bar) {
    height: 65vw !important;
    min-height: 280px !important;
    max-height: 500px !important;
  }
}

/*
 * The slider is absolutely positioned to fill slideshow-component exactly.
 * This avoids all height inheritance issues with flex-stretched parents.
 */
slideshow-component:not(.announcement-bar) > .slideshow {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Kill Dawn's min-heights — they create white space */
.slideshow.banner--large,
.slideshow.banner--medium,
.slideshow.banner--small {
  min-height: 0 !important;
}

/*
 * Each slide = full height of the slider.
 * flex: 0 0 100% ensures each slide takes exactly 100% of the scroll container width.
 */
.slideshow .slideshow__slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Banner media fills the slide completely */
.slideshow .slideshow__media.banner__media,
.slideshow .banner__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Images cover + centered */
.slideshow .banner__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Bottom gradient vignette */
.slideshow .banner__media::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.38) 100%) !important;
  pointer-events: none;
  z-index: 1;
}

/* Text wrapper fills slide — no min-height pushing */
.slideshow .banner__content,
.slideshow .slideshow__text-wrapper {
  min-height: 0 !important;
  height: 100% !important;
}

/*
 * DOTS OVERLAY — positioned relative to slideshow-component (outside the scroll area)
 * tsf-dots-overlay is our custom class so we don't conflict with Dawn's default controls
 */
slideshow-component:not(.announcement-bar) .tsf-dots-overlay {
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
  /* Pill backdrop */
  background: rgba(0,0,0,0.32) !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.2rem !important;
  border: none !important;
  /* Always visible — no hover dependency */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide prev/next arrow buttons inside our overlay */
slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slider-button--prev,
slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slider-button--next {
  display: none !important;
}

/* Dot style — thin line bars */
slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slider-counter__link--dots .dot {
  width: 24px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.45) !important;
  border: none !important;
  display: block !important;
  transition: background 0.3s ease, width 0.3s ease !important;
}

slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slider-counter__link--dots.slider-counter__link--active .dot {
  background: rgba(255,255,255,1) !important;
  width: 40px !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.4) !important;
}

/* Dot button padding (touch target) */
slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slider-counter__link {
  padding: 0.6rem 0.4rem !important;
}

/* Autoplay pause button — pill, bottom-right */
slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slideshow__autoplay {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.6rem !important;
}

slideshow-component:not(.announcement-bar) .tsf-dots-overlay .slideshow__autoplay svg {
  width: 10px !important;
  height: 10px !important;
  fill: rgba(255,255,255,0.9) !important;
  stroke: none !important;
}

/* Hide the default (non-overlay) controls block */
slideshow-component:not(.announcement-bar) .slideshow__controls:not(.tsf-dots-overlay) {
  display: none !important;
}


/* -----------------------------------------------
   18. PRODUCT PAGE — premium layout overhaul
   ----------------------------------------------- */

/* Product title — bold, large, tight leading */
.product__title {
  font-size: clamp(2rem, 2.8vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01rem;
  margin-bottom: 0.8rem;
}

/* USP pill strip — 3 compact badges under title */
.tsf-product-usp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 1.6rem;
}

.tsf-product-usp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(var(--color-foreground), 0.7);
  background: rgba(var(--color-foreground), 0.05);
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  letter-spacing: 0.01rem;
}

/* Price block — bigger, more impactful */
.product .price .price-item--regular,
.product .price .price-item--sale {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02rem;
}

.product .price--on-sale .price-item--regular {
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  opacity: 0.5;
}

/* Variant picker legend — show selected value inline */
.product-form__input legend {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: rgb(var(--color-foreground));
}

/* Gallery: main image - consistent cover fit */
.product__media .media {
  border-radius: 12px !important;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.03);
}

/* Thumbnails strip */
.thumbnail-list {
  gap: 0.7rem !important;
  margin-top: 0.8rem !important;
}

.thumbnail-list__item {
  border-radius: 8px;
  overflow: hidden;
}

.thumbnail-list__item .thumbnail {
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease, opacity 0.2s ease !important;
  opacity: 0.65;
}

.thumbnail-list__item .thumbnail[aria-current="true"],
.thumbnail-list__item .thumbnail:hover {
  border-color: rgb(var(--color-foreground)) !important;
  opacity: 1;
}

/* Product info section — tighter top spacing */
.product__info-container {
  padding-top: 0 !important;
}

/* Quantity selector — compact */
.product-form .quantity {
  max-width: 13rem;
}

/* Description — more space from ATC */
.product__description {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
}

@media screen and (max-width: 749px) {
  .product__title {
    font-size: 2rem !important;
  }

  .product .price .price-item--regular,
  .product .price .price-item--sale {
    font-size: 2.2rem !important;
  }

  .tsf-product-usp-pill {
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  .slideshow .slideshow__controls,
  slideshow-component .slideshow__controls {
    bottom: 1.2rem !important;
  }

  slideshow-component .slideshow__autoplay {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}


/* -----------------------------------------------
   19. MOBILE HEADER — even more compact
   ----------------------------------------------- */

@media screen and (max-width: 749px) {
  .header-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* Logo — allow natural size, no distortion */
  .header__heading-logo {
    max-height: 3.8rem !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Tighten icon spacing */
  .header__icons {
    gap: 0.4rem !important;
  }

  /* Uniform icon size */
  .header__icon svg {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }

  /* Cart icon — bigger than other icons on mobile */
  .header__icon--cart svg {
    width: 2.8rem !important;
    height: 2.8rem !important;
    transform: scale(1.15) !important;
    transform-origin: center !important;
  }

  /* Extra space below hero banner */
  .banner {
    margin-bottom: 2.5rem;
  }
}


/* -----------------------------------------------
   20. PRODUCT PAGE — description below buy section
   ----------------------------------------------- */

.tsf-product-description {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.tsf-product-desc-inner {
  max-width: 72rem;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.85);
}

.tsf-product-desc-inner h1,
.tsf-product-desc-inner h2,
.tsf-product-desc-inner h3 {
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
}

.tsf-product-desc-inner p {
  margin-bottom: 1.4rem;
}

@media screen and (max-width: 749px) {
  .tsf-product-description {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .tsf-product-desc-inner {
    font-size: 1.4rem;
  }
}

/* Legacy */
.product__description {
  font-size: 1.45rem;
  border-left: 3px solid rgba(var(--color-foreground), 0.12);
  padding-left: 1.6rem;
  margin-top: 2.4rem;
  padding-top: 0;
}

/* Clean up excess space after share button */
.product__share-button {
  margin-top: 2rem;
  opacity: 0.6;
}

/* Subscription / deferred purchase notice — reduce visual weight */
.deferred-purchase-option,
.installment-payment-callout,
shopify-payment-terms {
  font-size: 1.2rem !important;
  opacity: 0.65;
  margin-top: -0.5rem !important;
}


/* -----------------------------------------------
   21. HOMEPAGE — Final polish & mobile refinements
   ----------------------------------------------- */

/* --- A. Hero CTA buttons: stack vertically on mobile --- */
@media screen and (max-width: 749px) {
  .banner__buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 28rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner__buttons .button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* --- B. Hero content: center vertically on mobile --- */
@media screen and (max-width: 749px) {
  .banner--desktop-transparent.banner--large:not(.banner--mobile-bottom) .banner__content {
    align-items: center !important;
  }
  .banner--desktop-transparent .banner__box {
    width: 100% !important;
  }
}

/* --- C. Secondary button on dark hero: keep white outlined style on mobile --- */
@media screen and (max-width: 749px) {
  .banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0 !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: rgb(255,255,255) !important;
  }
}

/* --- D. Section padding: reduce on mobile for tighter feel --- */
@media screen and (max-width: 749px) {
  .tsf-why-us        { padding-top: 36px !important; padding-bottom: 36px !important; }
  .tsf-testimonials  { padding-top: 40px !important; padding-bottom: 40px !important; }
  .tsf-leather-filter { padding-top: 36px !important; padding-bottom: 36px !important; }
  .tsf-how-it-works  { padding-top: 36px !important; padding-bottom: 36px !important; }
  .tsf-stat-bar-section { padding-top: 16px !important; padding-bottom: 16px !important; }
  .tsf-stat-bar__item { padding: 1.4rem 0.8rem !important; }
}

/* --- E. Featured collection: heading weight & description match custom sections --- */
#shopify-section-featured_collection .title-wrapper {
  text-align: center;
}
#shopify-section-featured_collection .title-wrapper .title {
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01rem;
  line-height: 1.2;
}
#shopify-section-featured_collection .collection__description {
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
  color: rgba(var(--color-foreground), 0.6) !important;
  text-align: center;
  max-width: 60rem;
  margin: 0 auto 2rem;
}

/* --- F. Product grid: tighten column gap on mobile --- */
@media screen and (max-width: 749px) {
  .grid.product-grid {
    --grid-mobile-horizontal-spacing: 1.2rem;
    column-gap: var(--grid-mobile-horizontal-spacing) !important;
  }
  .product-card-wrapper {
    overflow: visible;
  }
}

/* --- G. How It Works: 2x2 grid on medium phones (avoids tall vertical list) --- */
@media screen and (min-width: 480px) and (max-width: 749px) {
  .tsf-how-it-works__steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
  /* Connector lines don't make sense in 2-col layout */
  .tsf-how-it-works__step::after {
    display: none !important;
  }
}

/* --- H. Leather filter pills: tighter on mobile --- */
@media screen and (max-width: 749px) {
  .tsf-leather-filter__pills {
    gap: 0.5rem !important;
  }
  .tsf-filter-pill {
    padding: 0.5rem 1.1rem !important;
    font-size: 1.2rem !important;
  }
}

/* --- I. Image-with-text: slightly smaller radius on mobile --- */
@media screen and (max-width: 749px) {
  .image-with-text__media-item {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
  }
  .image-with-text__media-item::after {
    border-radius: 12px !important;
  }
}

/* --- J. Why Us header margin: reduce on mobile --- */
@media screen and (max-width: 749px) {
  .tsf-why-us__section-title {
    margin-bottom: 2.4rem !important;
  }
  .tsf-how-it-works__title {
    margin-bottom: 3rem !important;
  }
  .tsf-testimonials__header {
    margin-bottom: 2.8rem !important;
  }
}

/* --- K. Testimonial cards on mobile: horizontal scroll instead of stacking --- */
/* Keep stacked — cleaner on small screens */

/* --- L. View all button in featured collection: center & style --- */
#shopify-section-featured_collection .center {
  text-align: center !important;
}

/* --- M. Slideshow section: ensure zero gap from adjacent sections --- */
.shopify-section:has(slideshow-component) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- N. Banner heading: reduce bottom margin on mobile to compact hero --- */
@media screen and (max-width: 749px) {
  .banner__box .banner__heading {
    margin-bottom: 0.8rem !important;
  }
  .banner__box .banner__text {
    margin-bottom: 1.4rem !important;
  }
}

/* --- O. Why Us card: reduce padding on mobile --- */
@media screen and (max-width: 749px) {
  .tsf-why-us__card {
    padding: 2rem 1.8rem !important;
  }
  .tsf-why-us__icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 1.4rem !important;
  }
  .tsf-why-us__card-title {
    font-size: 1.55rem !important;
  }
}

/* --- P. Leather filter grid: tighten on mobile --- */
@media screen and (max-width: 749px) {
  .tsf-leather-filter__grid {
    gap: 1.2rem !important;
  }
}

/* --- Q. How It Works step text: more readable on mobile (2-col) --- */
@media screen and (min-width: 480px) and (max-width: 749px) {
  .tsf-how-it-works__step-text {
    max-width: none !important;
    font-size: 1.25rem !important;
  }
}

/* --- R. Mobile Menu & Navbar Fixes --- */

/* 1. Prevent background scrolling when hamburger menu is open */
body.overflow-hidden,
html.overflow-hidden {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* 2. Header group z-index */
.shopify-section-group-header-group {
  z-index: 1000 !important;
}
/* Navbar sticky — directo en CSS, sin depender de la clase de Dawn JS */
.section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ==========================================================================
   PHASE 5: PREMIUM UPGRADES (GLASSMORPHISM, FONTS, WA)
   ========================================================================== */

/* 1. Typography Overrides */
:root {
  --font-heading-family: "Playfair Display", serif !important;
  --font-body-family: "Inter", sans-serif !important;
}
h1, h2, h3, h4, h5, .title {
  font-family: var(--font-heading-family) !important;
}

/* 2. Solid Sticky Header (Fixed to Viewport) */
.shopify-section-group-header-group {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1002 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  transform: none !important;
}

/* Offset main content so it is not covered by the fixed header */
main#MainContent {
  padding-top: var(--header-height, 100px) !important;
}
.shopify-section-group-header-group .header-wrapper,
.shopify-section-group-header-group .header {
  background: transparent !important;
}

/* 3. Button Micro-animations & Hovers */
.button, .shopify-payment-button__button {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease !important;
}
.button:not([disabled]):hover, 
.shopify-payment-button__button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
}

/* ====================================================
   UI Bug Fixes & Refinements
   ==================================================== */

/* 1. Prevent background scroll when mobile menu is open */
body.overflow-hidden {
  overflow: hidden !important;
  touch-action: none !important;
}

/* 2. Scale up the cart icon */
.header__icon--cart svg {
  transform: scale(1.18);
  transform-origin: center;
}

/* 3. Refine 'Quick Add' buttons */
.quick-add__submit, .tsf-filter-card .button--secondary {
  min-height: 4.2rem !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.08rem !important;
  padding: 0 1.5rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.quick-add {
  margin: 1.2rem 0 !important;
}
.tsf-filter-card .button--secondary {
  margin-top: 1.5rem !important;
}

sticky-header {
  display: block;
}

/* -----------------------------------------------
   22. MOBILE MENU — COMPACT DROPDOWN BELOW NAVBAR
   ----------------------------------------------- */
@media screen and (max-width: 989px) {
  /* Never hide the header when scrolling */
  .section-header,
  .shopify-section-header-hidden {
    transform: none !important;
  }

  /* Remove the dark overlay behind the menu */
  .js menu-drawer > details > summary::before,
  .js menu-drawer > details[open]:not(.menu-opening) > summary::before,
  menu-drawer > details[open] > summary::before {
    display: none !important;
  }

  /* The drawer: absolute position right beneath the sticky header */
  .menu-drawer {
    position: fixed !important;
    top: var(--header-height, 80px) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc( - var(--header-height, 80px)) !important;
    overflow-y: auto !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s ease, visibility 0.1s ease !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 1001 !important;
    filter: none !important;
  }

  /* When open — slide down into view */
  .js details[open].menu-opening > .menu-drawer {
    transform: translateX(0) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Menu navigation — compact padding */
  .menu-drawer__navigation {
    padding: 1rem 0 !important;
  }

  /* Menu items — compact rows */
  .menu-drawer__menu-item {
    padding: 1rem 2rem !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: rgb(var(--color-foreground)) !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  }

  .menu-drawer__menu-item:last-child {
    border-bottom: none !important;
  }

  /* Hide the utility/social links section to keep it compact */
  .menu-drawer__utility-links {
    display: none !important;
  }

  /* Submenus — inline expand, not slide */
  .js .menu-drawer__navigation .submenu-open {
    visibility: visible !important; /* Prevents parent items from disappearing */
  }

  .js .menu-drawer__submenu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    transition: opacity 0.1s ease, visibility 0.1s ease !important;
  }

  .js details[open].menu-opening > .menu-drawer__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Sub-menu items — indented */
  .menu-drawer__submenu .menu-drawer__menu-item {
    padding-left: 4rem !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
  }

  /* Back button in submenus (Since it acts as an accordion, let's hide the back button 
     so they just click the main category title again, or if they need it, keep it subtle) */
  .menu-drawer__close-button {
    display: none !important;
  }

  /* Inner container — auto height, not full screen */
  .menu-drawer__inner-container,
  .menu-drawer__navigation-container {
    height: auto !important;
  }
}

/* -----------------------------------------------
   23. QUICK ADD MODAL (CENTERED & TOP Z-INDEX)
   ----------------------------------------------- */

/* Overlay backdrop */
quick-add-modal, .quick-add-modal {
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Modal content panel */
quick-add-modal .quick-add-modal__content,
.quick-add-modal .quick-add-modal__content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  height: auto !important;
  max-height: 90vh !important;
  width: 90vw !important;
  max-width: 1100px !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.14) !important;
  background: white !important;
  overflow-y: auto !important;
  display: block !important;
  overscroll-behavior: contain !important;
}

/* Mobile — tall enough to show all content */
@media screen and (max-width: 749px) {
  quick-add-modal .quick-add-modal__content,
  .quick-add-modal .quick-add-modal__content {
    max-width: 96vw !important;
    min-height: 70vh !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }
}

/* Desktop: give the product info column more breathing room */
@media screen and (min-width: 990px) {
  quick-add-modal .quick-add-modal__content-info {
    padding: 2.8rem 3.2rem !important;
  }
}

/* ── Main image carousel ── */
quick-add-modal .product__media-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

quick-add-modal .product__media-list::-webkit-scrollbar {
  display: none !important;
}

quick-add-modal .product__media-item[data-media-id] {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start !important;
  display: block !important;
}

/* ── Thumbnail strip (swipeable row, not grid) ── */
quick-add-modal .thumbnail-list {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 0.6rem !important;
  padding: 0.8rem 0 !important;
}

quick-add-modal .thumbnail-list::-webkit-scrollbar {
  display: none !important;
}

/* Force the thumbnail SLIDER (quick-add-hidden / small-hide) to show inside the modal */
quick-add-modal .thumbnail-slider.quick-add-hidden,
quick-add-modal .quick-add-hidden.thumbnail-slider,
quick-add-modal .thumbnail-slider.small-hide {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

quick-add-modal .thumbnail-list__item {
  display: block !important;
  list-style: none !important;
  flex: 0 0 auto !important;
}

quick-add-modal .thumbnail {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  overflow: hidden !important;
  cursor: pointer !important;
  padding: 0 !important;
  background: transparent !important;
  transition: border-color 0.15s ease, opacity 0.15s ease !important;
  touch-action: manipulation !important;  /* prevents double-tap zoom; ensures tap fires click immediately */
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

quick-add-modal .thumbnail:hover {
  opacity: 0.85 !important;
}

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

quick-add-modal .thumbnail[aria-current="true"] {
  border-color: rgb(var(--color-foreground)) !important;
}

quick-add-modal .quick-add-modal__content-info {
  overflow-y: auto !important;
  padding: 2rem !important;
}

/* Hide ALL theme slider buttons inside modal — custom arrows injected via JS */
quick-add-modal .slider-button { display: none !important; }

/* Hide zoom icon and media toggle that appear as a black box on the image */
quick-add-modal .quick-add-hidden { display: none !important; }

/* Thumbnail strip wrapper — arrows absolutely overlaid, thumbs use full width */
quick-add-modal .tsf-thumb-wrapper {
  position: relative !important;
  display: block !important;
}
quick-add-modal .tsf-thumb-wrapper .thumbnail-list {
  width: 100% !important;
  flex: unset !important;
}
quick-add-modal .tsf-thumb-btn {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(var(--color-foreground), 0.75) !important;
  padding: 0 !important;
}
quick-add-modal .tsf-thumb-btn:hover {
  color: rgb(var(--color-foreground)) !important;
}
quick-add-modal .tsf-thumb-btn svg {
  width: 0.6rem !important;
  height: 0.6rem !important;
}
quick-add-modal .tsf-thumb-btn--prev {
  left: 0 !important;
  transform: translateY(-50%) !important;
  svg { transform: rotate(90deg) !important; }
}
quick-add-modal .tsf-thumb-btn--prev svg { transform: rotate(90deg) !important; }
quick-add-modal .tsf-thumb-btn--next { right: 0 !important; }
quick-add-modal .tsf-thumb-btn--next svg { transform: rotate(-90deg) !important; }
quick-add-modal .tsf-thumb-btn.tsf-hidden { display: none !important; }

/* Custom injected carousel arrows — same style as Dawn slider-button */
quick-add-modal .tsf-carousel-btn {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(var(--color-foreground), 0.75) !important;
}
quick-add-modal .tsf-carousel-btn:hover {
  color: rgb(var(--color-foreground)) !important;
}
quick-add-modal .tsf-carousel-btn--prev { left: 0 !important; }
quick-add-modal .tsf-carousel-btn--next { right: 0 !important; }
quick-add-modal .tsf-carousel-btn svg {
  width: 0.6rem !important; height: 0.6rem !important; display: block !important;
}
quick-add-modal .tsf-carousel-btn--prev svg { transform: rotate(90deg) !important; }
quick-add-modal .tsf-carousel-btn--next svg { transform: rotate(-90deg) !important; }
quick-add-modal .tsf-carousel-btn.tsf-hidden { display: none !important; }

/* 1:1 square images in modal */
quick-add-modal .product__media-list .product__media-item[data-media-id] {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
quick-add-modal .product__media-list .product__media-item[data-media-id] > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
quick-add-modal .product__media-list .product__media-item[data-media-id] img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Close button — anchored inside modal, not fixed to viewport */
quick-add-modal .quick-add-modal__toggle {
  position: absolute !important;
  top: 1.4rem !important;
  right: 1.4rem !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  z-index: 10 !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

quick-add-modal .quick-add-modal__toggle:hover {
  background: rgba(0,0,0,0.06) !important;
  transform: scale(1.08) !important;
}

/* Price — more prominent */
quick-add-modal .price__container {
  margin: 0.6rem 0 1.4rem !important;
}

quick-add-modal .price-item {
  font-size: 2rem !important;
  font-weight: 700 !important;
}

/* Variant option pills — clearer selected state */
quick-add-modal .product-form__input--pill .form__label {
  padding: 0.6rem 1.4rem !important;
  font-size: 1.4rem !important;
  border-radius: 999px !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
}

/* Add to Cart — full-width, tall, prominent */
quick-add-modal .product-form__buttons {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}
quick-add-modal button.product-form__submit {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: 5rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04rem !important;
}

/* "View full details" link — styled as a subtle outlined button */
quick-add-modal .product__view-details {
  display: block !important;
  text-align: center !important;
  margin-top: 1.2rem !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: rgb(var(--color-foreground)) !important;
  text-decoration: none !important;
  border: 0.1rem solid rgba(var(--color-foreground), 0.25) !important;
  border-radius: 0.4rem !important;
  padding: 0.9rem 1.6rem !important;
  transition: border-color 0.15s, background 0.15s !important;
  opacity: 1 !important;
}
quick-add-modal .product__view-details:hover {
  border-color: rgba(var(--color-foreground), 0.6) !important;
  background: rgba(var(--color-foreground), 0.04) !important;
}

/* Product name — show h1 in modal */
quick-add-modal .product__title > h1 {
  display: block !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
}

/* Hide sticky ATC inside modal (it belongs to product page, not modal) */
quick-add-modal .tsf-sticky-atc { display: none !important; }

/* Navbar mobile: rotate arrow when submenu is open */
header-drawer details[open] > summary .icon-arrow,
#menu-drawer details[open] > summary .icon-arrow {
  transform: rotate(90deg) !important;
  transition: transform 0.2s ease !important;
}
header-drawer details > summary .icon-arrow,
#menu-drawer details > summary .icon-arrow {
  transition: transform 0.2s ease !important;
}

/* -----------------------------------------------
   20. QUICK ADD MODAL GALLERY FIXES
   ----------------------------------------------- */

@media screen and (max-width: 749px) {
  /* Add padding to the left (by overriding negative margins) */
  quick-add-modal .product__media-wrapper slider-component {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  quick-add-modal .slider.slider--mobile {
    padding-left: 0 !important;
  }
}

/* Ensure 3 responsive thumbnails at the bottom, draggable */
@media screen and (max-width: 749px) {
  quick-add-modal slider-component.thumbnail-slider {
  display: block !important;
  visibility: visible !important;
  margin-top: 1.5rem !important;
}

quick-add-modal slider-component.thumbnail-slider .thumbnail-list.slider {
  display: flex !important;
  gap: 1rem !important;
  padding: 0.5rem 0.2rem !important; /* Some padding for focus ring */
  margin: 0 !important;
  scroll-padding-left: 0 !important;
}

}

/* Mobile: 3 thumbnails visible at a time */
@media screen and (max-width: 749px) {
  quick-add-modal .thumbnail-list__item.slider__slide {
    width: calc(33.333% - 0.67rem) !important;
    min-width: calc(33.333% - 0.67rem) !important;
    flex: 0 0 calc(33.333% - 0.67rem) !important;
    scroll-snap-align: center !important;
  }
}








quick-add-modal .thumbnail-list__item button.thumbnail {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Hide unselected variant images globally via CSS rather than Liquid skips, so thumbnails can activate them */
.product__media-item.product__media-item--variant:not(.is-active) {
  display: none !important;
}
.product__media-item.product__media-item--variant.is-active {
  display: block !important;
}

/* Hide zoom button everywhere */
.product__modal-opener .product__media-icon {
  display: none !important;
}
.product__modal-opener--image {
  cursor: default !important;
  pointer-events: none !important;
}

/* Quick-add modal — taller on all breakpoints */
@media screen and (min-width: 750px) {
  .quick-add-modal__content {
    --modal-height-offset: 2rem;
    margin-top: var(--modal-height-offset);
    max-height: calc(100vh - var(--modal-height-offset) * 2);
  }
}

.quick-add-modal__content {
  --modal-height-offset: 1.5rem;
  margin-top: var(--modal-height-offset);
  max-height: calc(100vh - var(--modal-height-offset) * 2);
  overflow-y: auto;
}

/* -----------------------------------------------
   CART DRAWER — Compact quantity selector on mobile
   ----------------------------------------------- */
@media screen and (max-width: 749px) {
  .cart-drawer .quantity,
  .cart-drawer cart-quantity {
    min-height: 3.6rem !important;
    height: 3.6rem !important;
  }

  .cart-drawer .quantity__button {
    width: 3.2rem !important;
    min-width: 3.2rem !important;
    height: 3.6rem !important;
  }

  .cart-drawer .quantity__input {
    font-size: 1.4rem !important;
    height: 3.6rem !important;
  }

  .cart-drawer .cart-remove-button {
    padding: 0.4rem !important;
    min-height: 3.6rem !important;
    min-width: 3.6rem !important;
  }

  .cart-drawer .cart-remove-button .svg-wrapper svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }
}

/* -----------------------------------------------
   CART DRAWER — Compact CTA buttons on mobile
   ----------------------------------------------- */
@media screen and (max-width: 749px) {
  .cart-drawer .cart__ctas .button,
  .cart-drawer .cart__checkout-button,
  .cart-drawer .cart__ctas button {
    min-height: 4.2rem !important;
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    font-size: 1.4rem !important;
  }
}