/* ========================================================================
   ZAVRYNE 16.55 — MOBILE DESCRIPTION IMAGE FIT
   Mobile-only repair: A+/description visuals use the real phone viewport,
   keep their natural aspect ratio and never crop/stretch. Desktop/tablet
   remain governed by the existing 16.52 fit rules.
   ======================================================================== */

@media (max-width: 800px) {
  body.single-product {
    overflow-x: clip !important;
  }

  /* Text description itself stays readable inside the normal content gutter. */
  .single-product .zv31-description.zv1651-description,
  .single-product .zv31-description.zv1651-description .woocommerce-Tabs-panel--description,
  .single-product .zv31-description.zv1651-description .zavryne-description,
  .single-product .zv31-description.zv1651-description .product-description,
  .single-product .zv31-description.zv1651-description .description-infographic {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Any wrapper containing a standalone description image may break out to
     the phone viewport, while ordinary text paragraphs keep their gutter. */
  .single-product .zv31-description.zv1651-description p:has(> img:only-child),
  .single-product .zv31-description.zv1651-description figure:has(img),
  .single-product .zv31-description.zv1651-description picture {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .single-product .zv31-description.zv1651-description .woocommerce-Tabs-panel--description img,
  .single-product .zv31-description.zv1651-description .zavryne-description img,
  .single-product .zv31-description.zv1651-description .product-description img,
  .single-product .zv31-description.zv1651-description .description-infographic img,
  .single-product .zv31-description.zv1651-description img.zv1615-hq-infographic {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
  }

  /* Five-image visual story: header remains comfortably padded, only the
     visual panels run edge-to-edge. */
  .single-product .zv40-story {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 18px calc(50% - 50vw) !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .single-product .zv40-head {
    width: auto !important;
    max-width: 760px !important;
    margin: 0 auto 14px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }
  .single-product .zv40-panel,
  .single-product .zv40-media,
  .single-product .zv40-media > picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .single-product .zv40-media > picture { margin: 0 !important; }
  .single-product .zv40-media > img,
  .single-product .zv40-media > picture > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Images authored with HTML width/height attributes must still scale down. */
  .single-product .zv31-description img[width],
  .single-product .zv40-story img[width] {
    height: auto !important;
  }
}

@media (max-width: 430px) {
  .single-product .zv40-head { padding-inline: 12px !important; }
}