/* Mercuno v2.6.80 HOTFIX3 — mobile catalogue action sizing.
 * Use the rendered width of a product card rather than the saved grid setting:
 * the Website Builder can temporarily display a one-column preview while the
 * public <body> still describes the previously saved two-column setting.
 * Keep regular pricing and payment flows completely unchanged.
 */
@media (max-width: 720px) {
  /* Preserve the Default theme's saved mobile grid control. */
  body.store-shell.theme-default[data-mobile-products-per-row="1"]
    .default-products-grid:not(.mercuno-related-track):not(.mercuno-brand-slider-track) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.store-shell.theme-default[data-mobile-products-per-row="2"]
    .default-products-grid:not(.mercuno-related-track):not(.mercuno-brand-slider-track) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Native Home and catalogue Shop product cards. Do not modify compact
     related-product cards, carousels, product details or checkout. */
  body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.frame-product-card,.hexa-product-card):not(.mercuno-related-compact-card):not(.frame-related-compact-card) {
    container: mercuno-mobile-product-card / inline-size;
    min-width: 0;
  }
  /* Both modes must preserve the visible cart icon. */
  body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.frame-product-card,.hexa-product-card):not(.mercuno-related-compact-card):not(.frame-related-compact-card)
    .default-add-cart i.fa-cart-plus {
    display: inline-block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    font-size: 1em !important;
    margin-inline-end: 4px !important;
    line-height: 1 !important;
  }
}

/* A full-width card occupies substantially more than half the phone viewport.
 * Include the exact card and action classes to outrank the historical
 * theme-specific !important compact rules in FRAME, HEXA and Default. */
@media (max-width: 720px) {
  @container mercuno-mobile-product-card (min-width: 55vw) {
    /* Keep large-card price on the left and CTA on the right. */
  body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.frame-product-card,.hexa-product-card):not(.mercuno-related-compact-card):not(.frame-related-compact-card)
    :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) max-content !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100%;
    min-width: 0;
  }
  body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.frame-product-card,.hexa-product-card):not(.mercuno-related-compact-card):not(.frame-related-compact-card)
    :is(.default-product-price-wrap,.frame-product-price-wrap,.hexa-product-price-wrap) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left;
  }
  body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.frame-product-card,.hexa-product-card):not(.mercuno-related-compact-card):not(.frame-related-compact-card)
    :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta)
    > :is(form,a,button,.frame-product-meta-action,.hexa-product-meta-action) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

    body.store-shell[data-mobile-products-per-row]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-price,.frame-price,.hexa-price) {
      font-size: clamp(24px, 6.2vw, 28px) !important;
      line-height: 1.2 !important;
      letter-spacing: normal !important;
    }
    body.store-shell[data-mobile-products-per-row]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) .default-add-cart {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      width: auto !important;
      min-width: clamp(124px, 36vw, 150px) !important;
      max-width: 100% !important;
      min-height: 48px !important;
      height: auto !important;
      padding: 12px clamp(8px, 2.8vw, 16px) !important;
      font-size: 15px !important;
      line-height: 1.25 !important;
      letter-spacing: normal !important;
      gap: 6px !important;
      white-space: nowrap !important;
    }
    body.store-shell[data-mobile-products-per-row]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) .default-add-cart i.fa-cart-plus {
      display: inline-block !important;
      visibility: visible !important;
      font-size: 15px !important;
      margin-inline-end: 4px !important;
    }
  }

  /* Only necessary when a not-yet-saved preview is still tagged one-column
   * but its actual rendered layout has already switched to two columns. */
  @container mercuno-mobile-product-card (max-width: 55vw) {
    body.store-shell[data-mobile-products-per-row="1"]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-price,.frame-price,.hexa-price) {
      font-size: clamp(11px, 2.8vw, 14px) !important;
      line-height: 1.2 !important;
    }
    body.store-shell[data-mobile-products-per-row="1"]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) .default-add-cart {
      box-sizing: border-box !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 32px !important;
      height: auto !important;
      padding: 6px 5px !important;
      font-size: clamp(8px, 2vw, 10px) !important;
      line-height: 1.1 !important;
      gap: 3px !important;
    }
  }
}

/* At 320px, a true two-column card cannot fit full price + full button text.
 * Retain a real, accessible cart action and show the icon at the right. */
@media (max-width: 359px) {
  @container mercuno-mobile-product-card (max-width: 55vw) {
    body.store-shell[data-mobile-products-per-row]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) .default-add-cart:not(.mercuno-get-quote):not(:disabled) {
      font-size: 0 !important;
      min-width: 32px !important;
      width: 32px !important;
      min-height: 32px !important;
      padding: 7px !important;
      gap: 0 !important;
      overflow: hidden !important;
    }
    body.store-shell[data-mobile-products-per-row]
      :is(.default-product-card,.frame-product-card,.hexa-product-card)
      :is(.default-product-bottom,.frame-product-meta,.hexa-product-meta) .default-add-cart i:is(.fa-cart-plus,.fa-sliders) {
      display: inline-block !important;
      font-size: 15px !important;
      margin: 0 !important;
    }
  }
}

/* HOTFIX4: the original 1-column rules were defeated by the theme's high-specificity
 * 72px action-wrapper caps inside Website Builder. Explicit actual-width mode from
 * a tiny ResizeObserver is used instead of a vw-based container condition.
 * Desktop/tablet and both themes' original visual colors/radii remain unchanged. */
@media (max-width: 720px) {
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    :is(.default-product-bottom,.hexa-product-meta,.frame-product-meta) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) max-content !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: clamp(6px, 2vw, 12px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    :is(.default-product-price-wrap,.hexa-product-price-wrap,.frame-product-price-wrap) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    :is(.default-product-price,.hexa-price,.frame-price) {
    font-size: clamp(24px, 6.4vw, 28px) !important;
    line-height: 1.18 !important;
    letter-spacing: normal !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    :is(.hexa-product-meta-action,.frame-product-meta-action,.default-product-bottom > form,.default-product-bottom > a,.default-product-bottom > button) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    :is(.hexa-product-meta-action,.frame-product-meta-action) > :is(form,a,button) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    .default-add-cart {
    display: inline-flex !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: none !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    gap: 6px !important;
  }
  body.store-shell :is(.mbuilder-section.mbuilder-products.mbuilder-commerce-element,.default-shop-results,.default-home-section,.hexa-section,.frame-section,.bloom-section,.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid)
    :is(.default-products-grid,.hexa-products,.frame-products,.bloom-product-grid,.mbuilder-native-products)
    > :is(.default-product-card,.hexa-product-card,.frame-product-card)[data-mercuno-card-mode="single"]
    .default-add-cart i.fa-cart-plus {
    display: inline-block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin-inline-end: 4px !important;
  }
}

/* v2.6.83 HOTFIX3: one-line cart labels across all themes and both mobile modes.
 * The existing card-mode rules continue to govern price/button size and alignment. */
body.store-shell :is(.default-product-card,.frame-product-card,.hexa-product-card) .default-add-cart {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex-wrap:nowrap!important;white-space:nowrap!important;text-wrap:nowrap!important;
  word-break:normal!important;overflow-wrap:normal!important;max-width:100%;
}
body.store-shell :is(.default-product-card,.frame-product-card,.hexa-product-card) .default-add-cart i {
  flex:0 0 auto!important;
}
@media(max-width:720px){
 body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
 > :is(.default-product-card,.frame-product-card,.hexa-product-card)[data-mercuno-card-mode="double"] .default-add-cart {
   flex-wrap:nowrap!important;white-space:nowrap!important;text-wrap:nowrap!important;
   font-size:clamp(8px,2.3vw,11px)!important;line-height:1!important;
   padding-inline:clamp(3px,1.2vw,7px)!important;gap:2px!important;
   min-width:0!important;max-width:100%!important;
 }
 body.store-shell :is(.default-products-grid,.frame-products,.hexa-products,.bloom-product-grid,.mbuilder-native-products)
 > :is(.default-product-card,.frame-product-card,.hexa-product-card)[data-mercuno-card-mode="double"] .default-add-cart i {
   margin-inline-end:2px!important;font-size:1em!important;
 }
}