/*
Atölye Adatepe — Mobile Safe v3
Only mobile containment. No desktop redesign.
*/

@media (max-width: 820px) {

  html,
  body {
    width: 100%;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Media never exceeds its parent. */
  img,
  video,
  iframe,
  canvas,
  svg,
  picture,
  object,
  embed {
    max-width: 100% !important;
  }

  img,
  video,
  picture {
    height: auto;
  }

  /* Common WordPress/theme wrappers:
     don't restyle them; just prevent impossible mobile widths. */
  :where(
    #page,
    #content,
    #primary,
    #main,
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    .site,
    .site-main,
    .site-content,
    .content-area,
    .entry-content,
    .container,
    .wrapper,
    .inner,
    .wp-site-blocks,
    .wp-block-group,
    .wp-block-columns,
    .wp-block-column,
    .wp-block-cover,
    .wp-block-cover__inner-container,
    .wp-block-media-text,
    .wp-block-media-text__content,
    .elementor,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-widget,
    .elementor-widget-container,
    .e-con,
    .e-con-inner,
    .woocommerce,
    .woocommerce-page
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Flex/grid children can overflow even when the parent is correct. */
  :where(
    .wp-block-columns,
    .wp-block-group,
    .elementor-container,
    .e-con,
    .e-con-inner,
    .products,
    .woocommerce
  ) > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Inline width declarations frequently cause mobile overflow.
     max-width does not alter the intended desktop design because this is mobile-only. */
  :where(
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    div,
    form,
    ul,
    ol
  )[style*="width"] {
    max-width: 100% !important;
  }

  :where(
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    div,
    form,
    ul,
    ol
  )[style*="min-width"] {
    min-width: 0 !important;
  }

  /* Long text/URLs must not widen the page. */
  :where(
    h1,h2,h3,h4,h5,h6,
    p,li,a,span,strong,em,
    label,small
  ) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Inputs should remain inside their columns. */
  :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button
  ) {
    max-width: 100% !important;
  }

  /* Tables keep their content and become horizontally scrollable
     instead of widening the whole page. */
  :where(.wp-block-table, .woocommerce table.shop_table) {
    max-width: 100% !important;
  }

  .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-table table {
    width: 100%;
    max-width: 100%;
  }

  /* WooCommerce containment only. */
  .woocommerce div.product,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce ul.products,
  .woocommerce ul.products li.product,
  .woocommerce form.cart,
  .woocommerce .cart,
  .woocommerce-checkout,
  .woocommerce-account,
  .woocommerce .woocommerce-cart-form,
  .woocommerce .woocommerce-checkout-review-order {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .woocommerce .woocommerce-cart-form,
  .woocommerce .woocommerce-checkout-review-order {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Navigation: preserve menu behavior, just keep its wrapper in viewport. */
  :where(
    .site-header,
    .main-navigation,
    .primary-navigation,
    .wp-block-navigation,
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-container-content
  ) {
    max-width: 100% !important;
  }

  /* Fixed/sticky UI must not be wider than the phone.
     No positioning or visual style is changed. */
  :where(
    [class*="popup"],
    [class*="modal"],
    [class*="drawer"],
    [class*="offcanvas"]
  ) {
    max-width: 100vw !important;
  }
}

@media (max-width: 420px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}