/*
 * Spazio Casa — extreme narrow viewport reflow candidate.
 *
 * Scope is deliberately limited to PDP and one-page checkout below 320 CSS px.
 * The rules reflow content; they do not hide horizontal overflow.
 */
@media screen and (max-width: 319px) {
  body#product,
  body#order-opc {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#product #nt-container,
  body#product #columns,
  body#product #center_column,
  body#product .primary_block,
  body#product .pb-left-column,
  body#product .pb-center-column,
  body#product .pb-right-column {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#product .sc-product-status,
  body#product .sc-product-status-desktop {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#product .sc-product-status-desktop .sc-status-item + .sc-status-item {
    border-top: 1px solid #dedede !important;
    border-left: 0 !important;
  }

  body#product .sc-status-item,
  body#product .sc-status-copy,
  body#product .sc-status-shipping,
  body#product .sc-status-shipping .sc-shipping-text {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#product .sc-status-copy strong,
  body#product .sc-status-shipping .sc-shipping-text,
  body#product .sc-shipping-text .sc-delivery-line {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body#product #attributes,
  body#product #attributes .attribute_list,
  body#product #attributes #color_to_pick_list {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#product #attributes.sc-variants-v8 .attribute_list #color_to_pick_list,
  body#product #attributes .attribute_list #color_to_pick_list,
  body#product #attributes #color_to_pick_list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#product #attributes #color_to_pick_list > li,
  body#product #attributes #color_to_pick_list > li .sc-color-name-v8,
  body#product #attributes #color_to_pick_list > li span,
  body#product #attributes #color_to_pick_list > li label {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body#product #image-block.sc-has-gallery-v7 {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    column-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body#product #image-block.sc-has-gallery-v7 > .sc-gallery-rail-v7 {
    width: 54px !important;
    max-width: 54px !important;
  }

  body#product #add_to_cart_wrap,
  body#product #add_to_cart_wrap > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#order-opc #nt-container,
  body#order-opc #columns,
  body#order-opc #center_column,
  body#order-opc.sc-cart-v1-ready .sc-cart-v1-mobile-bar,
  body#order-opc.sc-cart-v1-ready .sc-cart-v1-mobile-total {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#order-opc.sc-cart-v1-ready .sc-cart-v1-mobile-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
  }

  body#order-opc.sc-cart-v1-ready .sc-cart-v1-mobile-total {
    width: 100% !important;
  }

  body#order-opc.sc-cart-v1-ready .sc-cart-v1-mobile-bar button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/*
 * Residual PDP CTA repair for native Page Zoom 200% (197 CSS px measured).
 * Keep quantity and submit action usable without clipping the label.
 */
@media screen and (max-width: 319px) {
  html body#product {
    padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }

  html body#product #add_to_cart_wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 48px 48px !important;
    gap: 6px !important;
  }

  html body#product #add_to_cart_wrap > .sc-sticky-qty {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 32px 36px 32px !important;
    justify-self: center !important;
    width: 100px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body#product #add_to_cart_wrap #add_to_cart {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body#product #add_to_cart_wrap #add_to_cart button,
  html body#product #add_to_cart_wrap #add_to_cart button.exclusive {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    white-space: normal !important;
  }

  html body#product #add_to_cart_wrap #add_to_cart button > span,
  html body#product #add_to_cart_wrap #add_to_cart button.exclusive > span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/*
 * Spazio Casa — PDP CTA icon/text containment at extreme native page zoom.
 *
 * BrowserStack evidence: Galaxy S23 / Android 13 / Chrome / native 200%
 * exposes a 180 CSS px viewport. The v2 button remains inside the viewport,
 * while its icon + 10px gap + full-width label exceed the button by ~3.6px.
 */
@media screen and (max-width: 200px) {
  html body#product #add_to_cart_wrap #add_to_cart button.exclusive {
    gap: 4px !important;
    overflow: hidden !important;
  }

  html body#product #add_to_cart_wrap #add_to_cart button.exclusive > span {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
  }
}