/** Shopify CDN: Minification failed

Line 832:68 Expected "}" to go with "{"

**/
/* ============================================================
   custom_cards.css
   ============================================================
   Z-INDEX HIERARCHY (bottom → top)
   ------------------------------------------------------------
   1. .card--product (base container)
   2. .card__inner (main surface)
   3. .card-wrapper__link--overlay (clickable full link)
   4. .card__overlay-info / .card__links--hover (interactive UI)
   5. .card__inner::before (ring / border overlay)
   ============================================================ */


/* ============================================
   1. BASE STRUCTURE & STACKING CONTEXT
   ============================================ */

   .card--product {
    position: relative;
    z-index: 1; /* base layer */
  }
  
  .card--product .card__inner {
    position: relative;
    z-index: 2; /* above base but below overlays */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow var(--duration-default);
  }
  
  /* Visual ring (pseudo-element above overlay UI) */
  .card--product .card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-product);
    pointer-events: none;
    z-index: 3;
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.12);
    transition: box-shadow var(--duration-default);
  }
  
  /* Entire card clickable area */
  .card-wrapper__link--overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* ✅ sits above image, below ring + overlays */
    pointer-events: auto;
  }
  
  .card-wrapper__link--overlay:empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 25%;   /* leave 25% space at bottom for overlay */
    height: auto;  /* override base.css 100% height */
    width: 100%;
    z-index: 2;    /* sits below overlay info */
    pointer-events: auto;
  }

  /* ============================================
     2. OVERLAY INFO & ACTION LAYERS
     ============================================ */
  
  /* Info panel and swatches */
  .card--product .card__overlay-info,
  .card--product .card__overlay-swatches {
    position: relative;
    z-index: 4; /* sits above link overlay */
    pointer-events: auto;
  }

  /* Info content block */
  .card--product .card__overlay-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: none; /* unified gradient handled by ::after elsewhere */
    color: rgb(var(--color-foreground));
    transition: transform .25s ease, opacity .25s ease;
    transform: translateY(0);
  }
  
  .card--product:hover .card__overlay-info {
    transform: translateY(-64px);
  }
  
  /* Inner structure for info (title, price, swatches) */
  .card--product .card__overlay-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /*gap: 16px;*/
  }
  
  .card--product .card__overlay-left { min-width: 0; }
  
  .card--product .card__overlay-swatches {
    display: flex;
    align-items: flex-end;
  }
  
  .card--product .card__overlay-swatches .product-parameters { margin: 0; }
  .card--product .card__overlay-swatches .product-form__controls-group { justify-content: flex-end; }
  
  /* Text styles */
  .card--product .card__overlay-title {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
  }
  
  .card--product .card__overlay-subtitle {
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1;
    opacity: .7;
  }
  
  .card--product .card__overlay-price {
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1;
  }
  
  .card--product .card__overlay-price .price {
    margin: 0;
    color: inherit;
    text-align: left;
    align-items: flex-start;
  }
  
  .card--product .card__overlay-price .price__sale {
    justify-content: flex-start;
  }
  
  .card--product .card__overlay-price .price * {
    color: inherit;
  }
  
  /* Buttons section – shares overlay z-index */
  .card--product .card__links--hover {
    background: none;
    color: rgb(var(--color-foreground));
    z-index: 4;
  }
  
  /* Default hidden state for hover buttons */
  .collection-product-card.quickview--hover .card__links {
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
  }
  .collection-product-card.quickview--hover:hover .card__links {
    opacity: 1;
    pointer-events: auto;
  }

  /* MOBILE TWO‑TAP STATE: make .is-active look like :hover */
  @media (hover: none) and (pointer: coarse) {
    /* Lift the info block same as desktop hover */
    .card--product.is-active .card__overlay-info,
    .collection-product-card.is-active .card__overlay-info {
      transform: translateY(-64px); /* same offset used on :hover */
      opacity: 1;
      pointer-events: auto;
    }

    /* Show the hover buttons */
    .card--product .card__links--hover,
    .collection-product-card .card__links--hover {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity var(--duration-default), transform var(--duration-default);
    }
    .card--product.is-active .card__links--hover,
    .collection-product-card.is-active .card__links--hover {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Show the overlay/backdrop when active */
    .collection-wrapper--overlay .collection-product-card.is-active .card__inner::after,
    .popular-products .popular-products__list--overlay .collection-product-card.is-active .card__inner::after,
    .product-list--overlay .collection-product-card.is-active .card__inner::after {
      opacity: 1;
    }

    /* Do not disable link overlay; single-tap should still navigate */
  }

  /* ============================================
     3. BUTTON STYLES (shared within cards)
     ============================================ */
  
  .button.button--primary,
  .button.button--secondary {
    padding: 12px 20px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-radius: var(--border-radius-button);
    border: 1px solid var(--color-border-input);
    outline-offset: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
  }
  
  .button.button--primary .button__label,
  .button.button--secondary .button__label {
    font-family: var(--font-body-family, 'Suisse Intl'), 'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: currentColor;
  }
  
  /* Primary */
  .button.button--primary {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-color: rgb(var(--button-primary-border-color));
    border-width: var(--button-primary-border-width, 1px);
    border-style: solid;
  }
  @media (hover:hover) {
    .button.button--primary:not(:disabled):not([aria-disabled=true]):hover {
      background: rgb(var(--color-button-hover));
      border-color: rgb(var(--button-primary-border-color));
      color: rgb(var(--color-button-text-hover));
    }
  }
  
  /* Secondary */
  .button.button--secondary {
    background: rgb(var(--color-button-secondary));
    color: rgb(var(--color-button-secondary-text));
    border-color: rgb(var(--button-secondary-border-color));
    border-width: var(--button-secondary-border-width, 1px);
    border-style: solid;
  }
  @media (hover:hover) {
    .button.button--secondary:not(:disabled):not([aria-disabled=true]):hover {
      background: rgb(var(--color-button-secondary-hover));
      border-color: rgb(var(--button-secondary-border-color));
      color: rgb(var(--color-button-secondary-text-hover));
    }
  }
  
  /* Mobile sizing adjustments */
  @media (max-width: 749px) {
    .button.button--primary,
    .button.button--secondary {
      padding: 10px 14px;
    }
  
    .card--product .card__overlay-info {
      padding: 16px;
      transform: translateY(0) !important;
      opacity: 1 !important;
      position: relative;
    }
    .card--product .card__overlay-title,
    .card--product .card__overlay-subtitle,
    .card--product .card__overlay-price {
      font-size: 1.5rem;
      margin-top: 6px;
    }

    /* Prevent hover/active from lifting overlay on mobile */
    .card--product:hover .card__overlay-info,
    .collection-product-card:hover .card__overlay-info,
    .card--product.is-active .card__overlay-info,
    .collection-product-card.is-active .card__overlay-info {
      transform: translateY(0) !important;
      opacity: 1 !important;
    }

    /* Optional: remove transition to avoid jitter during tap */
    .card--product .card__overlay-info {
      transition: none;
    }
  }

  /* ============================================
     2B. MOBILE – ALL PRODUCT LISTS: SHOW BUTTONS UNDER CARD
     ============================================ */
  @media (max-width: 749px) {
    /* Base: ensure any quickview hover hidden state is canceled on mobile */
    .collection-product-card.quickview--hover .card__links {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    /* Apply to all major product list contexts */
    .products-grid .collection-product-card .card__links,
    .products-tabs .collection-product-card .card__links,
    .recently-viewed .collection-product-card .card__links,
    .product-card-slider .collection-product-card .card__links,
    .product-recommendations .collection-product-card .card__links,
    .collection .collection-product-card .card__links {
      display: flex !important;
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      padding: 12px 0 0 0;
      z-index: 5;
    }

    .products-grid .collection-product-card .card__links--hover,
    .products-tabs .collection-product-card .card__links--hover,
    .recently-viewed .collection-product-card .card__links--hover,
    .product-card-slider .collection-product-card .card__links--hover,
    .product-recommendations .collection-product-card .card__links--hover,
    .collection .collection-product-card .card__links--hover {
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
      z-index: 5;
    }

    /* Keep swatches/forms above the link overlay */
    .collection-product-card .product-parameters,
    .collection-product-card .js-color-swatches,
    .collection-product-card product-form,
    .collection-product-card .quick-add {
      position: relative;
      z-index: 5;
    }

    /* Equal expansion of card action buttons (1 = 100%, 2 = 50/50 with gap) */
    .collection-product-card .card__links {
      display: flex; /* ensure flex context */
    }
    .collection-product-card .card__links > .card__add-to-cart,
    .collection-product-card .card__links > .quick-add {
      flex: 1 1 0;
      width: auto !important; /* override fixed mobile widths */
    }
    /* Also override paddings-small variant */
    .collection-product-card .card__links--paddings-small .card__add-to-cart,
    .collection-product-card .card__links--paddings-small .quick-add {
      flex: 1 1 0;
      width: auto !important;
    }
  }
  
  /* Hide duplicated bottom info under cards */
  .card-wrapper .card-information {
    display: none;
  }  


  /* ============================================
     2A. MOBILE – POPULAR PRODUCTS BUTTONS ALWAYS VISIBLE
     ============================================ */
  @media (max-width: 749px) {
    /* Ensure buttons are always below the card in popular products */
    .popular-products .collection-product-card .card__links {
      display: flex !important;
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      padding: 12px 0 0 0;
    }
    .popular-products .collection-product-card .card__links--hover {
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
    }
    /* Override quickview--hover hidden state */
    .popular-products .collection-product-card.quickview--hover .card__links {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }

  /* ============================================
   4. HOVER BEHAVIORS (ZOOM / CROSSFADE / OFF)
   ============================================ */

/* ============================================================
   PRODUCT LIST CONTAINERS
   Used to scope hover behaviors and shared card rules
   ============================================================
   Add any new product list parent here (e.g., .bundle-products)
   to automatically inherit unified hover & overlay logic.
   ============================================================ */
   .products-grid,
   .popular-products,
   .products-tabs,
   .recently-viewed,
   .product-card-slider,
   .product-recommendations,
   .collection {
     /* This section intentionally left empty.
        It serves as a parent selector grouping for below @media blocks. */
   }

@media screen and (hover: hover) and (pointer: fine) {

  /* ---- ZOOM MODE ---- */
  .card-wrapper[data-hover-behavior="zoom"] .media.media--hover-effect > img + img {
    display: none !important;
  }
  .card-wrapper[data-hover-behavior="zoom"]:hover .media.media--hover-effect > img:first-child {
    opacity: 1 !important;
    transform: scale3d(1.05, 1.05, 1.05);
  }

  /* ---- OFF MODE ---- */
  .card-wrapper[data-hover-behavior="off"] .media.media--hover-effect > img + img {
    display: none !important;
  }
  .card-wrapper[data-hover-behavior="off"]:hover .media.media--hover-effect > img:first-child {
    transform: none !important;
  }

  /* ---- CROSSFADE / SECOND IMAGE MODE ---- */
  .card-wrapper[data-hover-behavior="second_image"] .media.media--hover-effect > img + img,
  .card-wrapper[data-hover-behavior="variant_image"] .media.media--hover-effect > img + img {
    display: block !important;
    opacity: 0;
  }
  .card-wrapper[data-hover-behavior="second_image"]:hover .media.media--hover-effect > img:first-child,
  .card-wrapper[data-hover-behavior="variant_image"]:hover .media.media--hover-effect > img:first-child {
    opacity: 0 !important;
    transition: opacity var(--duration-long) ease;
    transform: none !important;
  }
  .card-wrapper[data-hover-behavior="second_image"]:hover .media.media--hover-effect > img + img,
  .card-wrapper[data-hover-behavior="variant_image"]:hover .media.media--hover-effect > img + img {
    opacity: 1 !important;
    transition: opacity var(--duration-long) ease;
  }

  /* ---- Stabilize hover zoom ---- */
  .card-wrapper[data-hover-behavior="zoom"] .media.media--hover-effect > img:first-child {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform: translateZ(0);
  }
}

/* Desktop: make single action fill full width */
@media (min-width: 750px) {
  .collection-product-card .card__links > .card__add-to-cart:only-child,
  .collection-product-card .card__links > .quick-add:only-child,
  .card--product .card__links > .card__add-to-cart:only-child,
  .card--product .card__links > .quick-add:only-child,
  .collection-product-card .card__links--paddings-small .card__add-to-cart:only-child,
  .collection-product-card .card__links--paddings-small .quick-add:only-child,
  .card--product .card__links--paddings-small .card__add-to-cart:only-child,
  .card--product .card__links--paddings-small .quick-add:only-child {
    width: 100% !important;
    flex: 1 1 0;
  }
}


/* ============================================
   5. COLLECTION CARDS & UNIFIED BACKDROPS
   ============================================ */

/* Unified transparent backdrop under overlay info */
.collection .collection-product-card .card__overlay-info {
  background: transparent !important;
  opacity: 1;
  transition: transform var(--duration-default);
}

/* Hover buttons (fade + slide up) */
.collection .collection-product-card .card__links--hover {
  background: transparent !important;
  border-radius: var(--border-radius-product);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-default), transform var(--duration-default);
}
@media (hover:hover) {
  .collection .collection-product-card:hover .card__links--hover {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Overlay gradient layers (used by multiple sections) ---- */

/* 5a. Collections with overlay option */
.collection-wrapper--overlay .collection-product-card .card__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 17rem;
  border-radius: 0 0 var(--border-radius-product) var(--border-radius-product);
  pointer-events: none;
  z-index: 2; /* below ring (::before), above media */
  background: rgba(var(--color-background), 0.8);
  opacity: 0;
  transition: opacity var(--duration-default);
}
@media (hover:hover) {
  .collection-wrapper--overlay .collection-product-card:hover .card__inner::after {
    opacity: 1;
  }
}

/* 5b. Popular products section */
.popular-products .popular-products__list--overlay .collection-product-card .card__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9rem;
  border-radius: 0 0 var(--border-radius-product) var(--border-radius-product);
  pointer-events: none;
  z-index: 2;
  background: rgba(var(--color-background), 0.4);
  opacity: 0;
  transition: opacity var(--duration-default);
}
@media (hover:hover) {
  .popular-products .popular-products__list--overlay .collection-product-card:hover .card__inner::after {
    opacity: 1;
  }
}

/* Always-on mobile backdrop when enabled */
@media (max-width: 749px) {
  .popular-products .popular-products__list--overlay-mobile .collection-product-card .card__inner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 9rem;
    border-radius: 0 0 var(--border-radius-product) var(--border-radius-product);
    pointer-events: none;
    z-index: 2;
    background: rgba(255,255,255,0.5);
    opacity: 1;
    transition: opacity var(--duration-default);
  }
}

/* 5c. Generic product-list overlay */
.product-list--overlay .collection-product-card .card__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9rem;
  border-radius: 0 0 var(--border-radius-product) var(--border-radius-product);
  pointer-events: none;
  z-index: 2;
  background: rgba(var(--color-background), 0.4);
  opacity: 0;
  transition: opacity var(--duration-default);
}
@media (hover:hover) {
  .product-list--overlay .collection-product-card:hover .card__inner::after {
    opacity: 1;
  }
}


/* ============================================
   7. PROMO CARD STRUCTURE
   ============================================ */

/* Base promo card wrapper */
.collection-product-card--promo {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    grid-column: auto / span 1;
  }
  
  /* --- Aspect ratio modifiers --- */
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-1-1 { aspect-ratio: 1 / 1; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-4-5 { aspect-ratio: 4 / 5; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-3-2 { aspect-ratio: 3 / 2; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-16-9 { aspect-ratio: 16 / 9; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-21-9 { aspect-ratio: 21 / 9; }
  
  /* Extra wide options */
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-3-1 { aspect-ratio: 3 / 1; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-32-9 { aspect-ratio: 32 / 9; }
  .collection-product-card--promo.collection-product-card--promo--ratio-mobile-4-1 { aspect-ratio: 4 / 1; }
  
  /* Desktop ratio modifiers */
  @media screen and (min-width: 990px) {
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-1-1 { aspect-ratio: 1 / 1; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-4-5 { aspect-ratio: 4 / 5; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-3-2 { aspect-ratio: 3 / 2; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-16-9 { aspect-ratio: 16 / 9; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-21-9 { aspect-ratio: 21 / 9; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-3-1 { aspect-ratio: 3 / 1; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-32-9 { aspect-ratio: 32 / 9; }
    .collection-product-card--promo.collection-product-card--promo--ratio-desktop-4-1 { aspect-ratio: 4 / 1; }
  }
  
  /* --- Grid spanning --- */
  .collection-product-card--promo.collection-product-card--promo--span-mobile-2 { grid-column: auto / span 2; }
  
  @media screen and (min-width: 990px) {
    .collection-product-card--promo.collection-product-card--promo--span-2 { grid-column: auto / span 2; }
    .collection-product-card--promo.collection-product-card--promo--span-full { grid-column: 1 / -1; }
  }
  
  /* ============================================
     8. PROMO CARD CONTENT ALIGNMENT
     ============================================ */
  
  /* Default alignment: bottom-left */
  .collection-product-card--promo .collection-promo-tile__inner {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
  }
  
  /* Alignment modifiers */
  .collection-product-card--promo.collection-product-card--promo--align-top-left    .collection-promo-tile__inner { align-items: flex-start; justify-content: flex-start; text-align: left; }
  .collection-product-card--promo.collection-product-card--promo--align-top-center  .collection-promo-tile__inner { align-items: flex-start; justify-content: center; text-align: center; }
  .collection-product-card--promo.collection-product-card--promo--align-top-right   .collection-promo-tile__inner { align-items: flex-start; justify-content: flex-end; text-align: right; }
  .collection-product-card--promo.collection-product-card--promo--align-center-left .collection-promo-tile__inner { align-items: center; justify-content: flex-start; text-align: left; }
  .collection-product-card--promo.collection-product-card--promo--align-center      .collection-promo-tile__inner { align-items: center; justify-content: center; text-align: center; }
  .collection-product-card--promo.collection-product-card--promo--align-center-right.collection-promo-tile__inner { align-items: center; justify-content: flex-end; text-align: right; }
  .collection-product-card--promo.collection-product-card--promo--align-bottom-left .collection-promo-tile__inner { align-items: flex-end; justify-content: flex-start; text-align: left; }
  .collection-product-card--promo.collection-product-card--promo--align-bottom-center.collection-promo-tile__inner { align-items: flex-end; justify-content: center; text-align: center; }
  .collection-product-card--promo.collection-product-card--promo--align-bottom-right.collection-promo-tile__inner { align-items: flex-end; justify-content: flex-end; text-align: right; }
  
  /* Positional overrides */
  .collection-product-card--promo.collection-product-card--promo--align-top-left    .collection-promo-tile__inner,
  .collection-product-card--promo.collection-product-card--promo--align-top-center  .collection-promo-tile__inner,
  .collection-product-card--promo.collection-product-card--promo--align-top-right   .collection-promo-tile__inner {
    top: 0;
    bottom: auto;
    transform: none;
  }
  .collection-product-card--promo.collection-product-card--promo--align-center-left .collection-promo-tile__inner,
  .collection-product-card--promo.collection-product-card--promo--align-center      .collection-promo-tile__inner,
  .collection-product-card--promo.collection-product-card--promo--align-center-right.collection-promo-tile__inner {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  
  /* Promo tile visuals */
  .collection-product-card--promo .collection-promo-tile {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: var(--border-radius-product);
    overflow: hidden;
    background: rgb(var(--color-background));
  }
  .collection-product-card--promo .collection-promo-tile__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-long) ease, opacity var(--duration-long) ease;
  }
  .collection-product-card--promo .collection-promo-tile__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
    display: flex;
    align-items: flex-end;
    z-index: 2;
    color: rgb(var(--color-background));
  }
  
  /* Padding presets */
  .collection-product-card--promo.collection-product-card--promo--pad-none .collection-promo-tile__inner { padding: 0; }
  .collection-product-card--promo.collection-product-card--promo--pad-s .collection-promo-tile__inner { padding: 12px; }
  .collection-product-card--promo.collection-product-card--promo--pad-m .collection-promo-tile__inner { padding: 24px; }
  .collection-product-card--promo.collection-product-card--promo--pad-l .collection-promo-tile__inner { padding: 40px; }
  
  .collection-promo-tile__bg {
    --translate: translate3d(0,0,0);
    --scale: scale(1);
    transform: var(--translate) var(--scale);
    transition: transform 240ms cubic-bezier(.2,.6,.2,1);
  }
  @media (hover: hover) and (pointer: fine) {
    .collection-product-card--promo:hover .collection-promo-tile__bg {
      --scale: scale(1.05);
    }
  }

  /*
  @media screen and (hover: hover) and (pointer: fine) {
    .collection-product-card--promo:hover .collection-promo-tile__bg {
      transform: scale3d(1.05, 1.05, 1.05);
    }
  }
  */
  
  /* ============================================
     9. COLLECTION GRID & ITEM WIDTHS
     ============================================ */
  
  /* Make cards non-fluid and calculate widths manually */
  .collection-product-list > .collection-product-card {
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  
  /* --- 2, 3, and 4-column widths --- */
  @media (min-width: 576px) {
    /* 2-column layout 
    .collection-product-list--2-items > .collection-product-card:not(.collection-product-card--promo) {
      width: calc((100% - 1.6rem) / 2) !important;
    }
  }*/

  @media (min-width: 576px) {
    /* 2-column layout */
    .collection-product-list--2-items > .collection-product-card {
      width: calc((100% - 1.6rem) / 2) !important;
    }
  }
  
  /*
  @media (min-width: 990px) {
    /* 3-column layout 
    .collection-product-list--3-items > .collection-product-card:not(.collection-product-card--promo),
    .collection-product-list--4-items > .collection-product-card:not(.collection-product-card--promo) {
      width: calc((100% - 3.2rem) / 3) !important;
    }
  }*/

  @media (min-width: 990px) {
    /* 3-column layout */
    .collection-product-list--3-items > .collection-product-card,
    .collection-product-list--4-items > .collection-product-card {
      width: calc((100% - 3.2rem) / 3) !important;
    }
  }
  
  /*@media (min-width: 1440px) {
    /* 4-column layout 
    .collection-product-list--4-items > .collection-product-card:not(.collection-product-card--promo) {
      width: calc((100% - 4.8rem) / 4) !important;
    }
  }*/
    
  @media (min-width: 1440px) {
    /* 4-column layout */
    .collection-product-list--4-items > .collection-product-card {
      width: calc((100% - 4.8rem) / 4) !important;
    }
  }  
  
  /* --- Promo spans --- */
  @media (min-width: 576px) {
    /* 2-column full row */
    .collection-product-list--2-items .collection-product-card--promo.collection-product-card--promo--span-2 {
      width: 100% !important;
    }
  }
  
  @media (min-width: 990px) and (max-width: 1439px) {
    /* 3-column → span-2 covers two columns */
    .collection-product-list--3-items .collection-product-card--promo.collection-product-card--promo--span-2,
    .collection-product-list--4-items .collection-product-card--promo.collection-product-card--promo--span-2 {
      width: calc(((100% - 3.2rem) / 3) * 2 + 1.6rem) !important;
    }
  
    /* Full width fallback */
    .collection-product-list--3-items .collection-product-card--promo.collection-product-card--promo--span-full,
    .collection-product-list--4-items .collection-product-card--promo.collection-product-card--promo--span-full {
      width: 100% !important;
    }
  }
  
  @media (min-width: 1440px) {
    /* 4-column → span-2 or span-3 */
    .collection-product-list--4-items .collection-product-card--promo.collection-product-card--promo--span-2 {
      width: calc(((100% - 4.8rem) / 4) * 2 + 1.6rem) !important;
    }
    .collection-product-list--4-items .collection-product-card--promo.collection-product-card--promo--span-3 {
      width: calc(((100% - 4.8rem) / 4) * 3 + 1.6rem * 2) !important;
    }
    .collection-product-list--4-items .collection-product-card--promo.collection-product-card--promo--span-full {
      width: 100% !important;
    }
  }
  
  /* Universal fallback for full row promos */
  .collection-product-list .collection-product-card--promo.collection-product-card--promo--span-full {
    width: 100% !important;
  }
  
  
  /* ============================================
     10. DESIGN TOKENS USED (REFERENCE)
     ============================================
     --color-foreground
     --color-background
     --color-background-secondary
     --color-border
     --color-border-input
     --color-button
     --color-button-hover
     --color-button-text
     --color-button-text-hover
     --color-button-secondary
     --color-button-secondary-hover
     --color-button-secondary-text
     --color-button-secondary-text-hover
     --color-shadow
     --border-radius-product
     --border-radius-button
     --duration-default
     --duration-long
     ============================================================ */