/*
 * Katoenentas v1.5.28
 * Single source of truth for mobile WooCommerce product geometry.
 *
 * The product page now uses the exact same 16px horizontal gutter as the
 * regular mobile .container. No 100vw resets, negative margins or nested
 * viewport calculations are used here.
 */
@media (max-width: 700px) {
  :root {
    --kt-product-mobile-gutter: 16px;
  }

  html,
  body.single-product,
  body.single-product #page,
  body.single-product .site,
  body.single-product .site-content,
  body.single-product .kt-commerce-shell.kt-single-product-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  body.single-product .kt-commerce-shell.kt-single-product-shell {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Same visual gutter as the rest of the mobile website. */
  body.single-product .kt-product-container.container {
    position: static !important;
    left: auto !important;
    width: calc(100% - (var(--kt-product-mobile-gutter) * 2)) !important;
    max-width: var(--container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 0 64px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.single-product .kt-product-container > .woocommerce,
  body.single-product .kt-product-container .woocommerce-notices-wrapper,
  body.single-product .kt-product-container .woocommerce div.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .kt-product-container .woocommerce div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  /* Every major WooCommerce block follows the parent gutter. */
  body.single-product .kt-product-container > .kt-breadcrumb,
  body.single-product .woocommerce div.product > div.images,
  body.single-product .woocommerce div.product > div.summary,
  body.single-product .woocommerce div.product > .woocommerce-tabs,
  body.single-product .woocommerce div.product > .related,
  body.single-product .woocommerce div.product > .upsells {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce div.product > div.images {
    margin-bottom: 0 !important;
  }

  body.single-product .woocommerce div.product > div.summary {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }

  /* Gallery/FlexSlider may never become wider than the content column. */
  body.single-product .woocommerce-product-gallery,
  body.single-product .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery__image,
  body.single-product .woocommerce-product-gallery__image > a,
  body.single-product .flex-viewport,
  body.single-product .flex-control-nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce-product-gallery__image,
  body.single-product .woocommerce-product-gallery__image > a,
  body.single-product .flex-viewport {
    overflow: hidden !important;
  }

  body.single-product .woocommerce-product-gallery__image > a {
    display: block !important;
    aspect-ratio: 1 / 1;
  }

  body.single-product .woocommerce-product-gallery__image img:not(.zoomImg),
  body.single-product .woocommerce-product-gallery img.wp-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* The injected zoom image has native dimensions >2000px. Keep it out of geometry. */
  body.single-product .woocommerce-product-gallery img.zoomImg {
    max-width: none !important;
    pointer-events: none;
  }

  body.single-product .woocommerce div.product div.images .flex-control-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Let text and forms shrink naturally instead of widening the page. */
  body.single-product .woocommerce div.product div.summary > *,
  body.single-product .woocommerce div.product .woocommerce-tabs > *,
  body.single-product .woocommerce div.product .related > *,
  body.single-product .woocommerce div.product .upsells > *,
  body.single-product .woocommerce div.product form,
  body.single-product .woocommerce div.product table,
  body.single-product #review_form_wrapper,
  body.single-product #review_form,
  body.single-product #respond,
  body.single-product .comment-form,
  body.single-product .comment-form textarea,
  body.single-product .comment-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce div.product .product_title,
  body.single-product .woocommerce-product-details__short-description,
  body.single-product .woocommerce-product-details__short-description p,
  body.single-product .product_meta,
  body.single-product .woocommerce-tabs .panel,
  body.single-product .woocommerce-tabs .panel p,
  body.single-product .woocommerce-tabs .panel li,
  body.single-product .related,
  body.single-product .upsells {
    overflow-wrap: anywhere;
  }

  /* Breadcrumb stays in the same gutter and scrolls internally if necessary. */
  body.single-product .kt-breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 16px !important;
    padding: 2px 0 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }

  body.single-product .kt-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  body.single-product .kt-breadcrumb a,
  body.single-product .kt-breadcrumb-separator {
    flex: 0 0 auto;
  }

  /* Tabs scroll inside the content width, never the viewport. */
  body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 0 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }

  body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
  }

  body.single-product .woocommerce table.shop_attributes {
    table-layout: fixed;
  }

  body.single-product .woocommerce table.shop_attributes th,
  body.single-product .woocommerce table.shop_attributes td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* One clean related-product card per row on phones. */
  body.single-product .woocommerce div.product .related ul.products,
  body.single-product .woocommerce div.product .upsells ul.products {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce div.product .related ul.products li.product,
  body.single-product .woocommerce div.product .upsells ul.products li.product,
  body.single-product .woocommerce div.product .related ul.products li.product a,
  body.single-product .woocommerce div.product .upsells ul.products li.product a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Floating tools remain inside the safe viewport. */
  body.single-product .kt-fe-toolbar,
  body.single-product.admin-bar .kt-fe-toolbar {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    max-width: calc(100vw - 72px) !important;
  }

  body.single-product .kt-whatsapp-widget {
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  body.single-product .kt-whatsapp-bubble {
    display: none !important;
  }
}


/* v1.5.29: small-phone shell fix.
 * On <=400px the gutter lives on the outer commerce shell instead of being
 * calculated on the WooCommerce container. This prevents small Android
 * layout viewports/FlexSlider from consuming the right-hand gutter.
 */
@media (max-width: 400px) {
  body.single-product .kt-commerce-shell.kt-single-product-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.single-product .kt-product-container.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .kt-product-container > .kt-breadcrumb,
  body.single-product .kt-product-container > .woocommerce,
  body.single-product .kt-product-container .woocommerce div.product,
  body.single-product .woocommerce div.product > div.images,
  body.single-product .woocommerce div.product > div.summary,
  body.single-product .woocommerce div.product > .woocommerce-tabs,
  body.single-product .woocommerce div.product > .related,
  body.single-product .woocommerce div.product > .upsells {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce-product-gallery,
  body.single-product .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery__image,
  body.single-product .woocommerce-product-gallery__image > a,
  body.single-product .flex-viewport,
  body.single-product .flex-control-nav,
  body.single-product .woocommerce-tabs,
  body.single-product .woocommerce-tabs .panel,
  body.single-product .related.products,
  body.single-product .upsells.products,
  body.single-product ul.products,
  body.single-product ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .woocommerce-product-gallery__wrapper,
  body.single-product .flex-viewport,
  body.single-product .woocommerce-product-gallery__image {
    overflow: hidden !important;
  }

  body.single-product .woocommerce-product-gallery img.zoomImg {
    display: none !important;
  }

  body.single-product .woocommerce div.product .product_title {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}