/**
 * Jangro Storefront — UAT responsive Failed Testing safety net (plain CSS).
 *
 * Source of truth remains:
 *   web/css/source/components/_product-card.less
 *   web/css/source/components/_integrations.less
 *   web/css/source/components/_cookie-notice.less
 *   web/css/source/components/_hero-slider.less
 *
 * Loaded after Magento compiled styles so DeployHQ version bumps still apply
 * these fixes when styles-m.css is stale (same pattern as product-card-override).
 *
 * Charles Failed Testing residuals (passes left alone):
 * - Chatbot overlaps cookie dialog @ 320/390
 * - Mobile hero text visually clipped
 * - Card qty minus/plus 40×44 below 44×44 target
 */

/* —— Card qty: 44×44 touch targets (mobile/tablet) —— */
@media only screen and (max-width: 768px) {
  .products-grid .product-item .actions-primary form[data-role='tocart-form'] .jangro-qty {
    min-height: 44px;
  }

  .products-grid .product-item .actions-primary form[data-role='tocart-form'] .jangro-qty__button {
    font-size: 1.5rem;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }

  .products-grid .product-item .actions-primary form[data-role='tocart-form'] .jangro-qty__input,
  .products-grid .product-item .actions-primary form[data-role='tocart-form'] input.qty {
    font-size: 1.4rem;
    min-height: 44px;
  }

  .products-grid .product-item .actions-primary form[data-role='tocart-form'] .action.tocart {
    min-height: 44px;
  }
}

/* —— Chatbase clears Magento cookie band; stays under cookie z-index —— */
@media only screen and (max-width: 480px) {
  #chatbase-message-bubbles {
    display: none !important;
  }

  #chatbase-bubble-button {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
    right: 12px !important;
    z-index: 30 !important;
  }

  #chatbase-bubble-window {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 160px) !important;
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 180px) !important;
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    z-index: 30 !important;
  }

  body:has(.message.global.cookie:not([style*='display: none'])) #chatbase-bubble-button,
  body:has(#notice-cookie-block:not([style*='display: none'])) #chatbase-bubble-button {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
  }

  body:has(.message.global.cookie:not([style*='display: none'])) #chatbase-bubble-window,
  body:has(#notice-cookie-block:not([style*='display: none'])) #chatbase-bubble-window {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 184px) !important;
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 200px) !important;
  }
}

/* —— Mobile hero: stop 1920/500 strip from clipping copy @ 320/390 —— */
@media only screen and (max-width: 480px) {
  .jangro-hero-carousel__track {
    aspect-ratio: auto;
    min-height: 220px;
  }

  div[data-content-type='slider'],
  [data-content-type='slide'] {
    min-height: 240px;
  }

  [data-content-type='slide'] .pagebuilder-slide-wrapper,
  [data-content-type='slide'] .pagebuilder-poster-overlay,
  [data-content-type='slide'] .pagebuilder-overlay {
    min-height: 240px;
  }

  [data-content-type='slide'] .pagebuilder-overlay {
    background-color: rgba(10, 42, 32, 0.28);
  }

  .pagebuilder-poster-content,
  .pagebuilder-collage-content {
    box-sizing: border-box;
    max-width: none;
    overflow: visible;
    padding: 16px 15px;
    width: 100%;
  }

  .pagebuilder-poster-content h1,
  .pagebuilder-poster-content h2,
  .pagebuilder-collage-content h1,
  .pagebuilder-collage-content h2 {
    font-size: clamp(18px, 5.6vw, 26px);
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(10, 42, 32, 0.55);
  }

  .pagebuilder-poster-content p,
  .pagebuilder-collage-content p {
    font-size: 14px;
    line-height: 1.35;
    max-width: none;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(10, 42, 32, 0.55);
  }

  .pagebuilder-poster-content [data-element='button'],
  .pagebuilder-poster-content .pagebuilder-slide-button,
  .pagebuilder-collage-content [data-element='button'],
  .pagebuilder-collage-content .pagebuilder-slide-button {
    min-height: 44px;
    width: auto;
  }
}