/*
 * Aloostadkar — responsive layer
 * Loaded after the redesign stylesheet. One site width, one set of gutters,
 * three breakpoints, and safety rules so no box leaves the page.
 *
 *   mobile   : < 768px   gutter 16px (14px under 360px)
 *   tablet   : 768–1023  gutter 24px
 *   desktop  : >= 1024   gutter 32px
 *   site width (max, gutters included): 1200px
 */

/* ---------- 1. Site width & gutters (single source of truth) ---------- */
:root {
  --site-max: 1200px;
  --site-gutter: 16px;
  --maxw: var(--site-max);
  --gutter: var(--site-gutter);
}
@media (max-width: 359px) {
  :root { --site-gutter: 14px; }
}
@media (min-width: 768px) {
  :root { --site-gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --site-gutter: 32px; }
}

/* Every content frame uses the same width as the header & footer */
.alx .wrap,
.container,
.alx .container,
.woo-main > .container,
.page-main > .container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: border-box;
}
/* Never double the gutter when frames are nested */
.alx .wrap .wrap,
.alx .wrap .container,
.container .container,
.container .wrap {
  max-width: none;
  padding-inline: 0;
}

/* ---------- 2. Nothing may push the page sideways ---------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
:where(.alx) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* Media and embeds shrink with their box */
:where(.alx) :where(img, video, canvas, picture) {
  max-width: 100%;
  height: auto;
}
:where(.alx) :where(iframe, embed, object) {
  max-width: 100%;
}

/* Long words, links, phone numbers and URLs wrap instead of overflowing */
:where(.alx) :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, td, th, blockquote, figcaption, label, address) {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
:where(.alx) :where(.entry-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel) a {
  overflow-wrap: anywhere;
}

/* Grid / flex children may shrink below their content width */
:where(.alx) :where([class*="grid"], .products, .woocommerce-MyAccount-content) > * {
  min-width: 0;
}

/* Wide content scrolls inside its own box */
:where(.alx) pre {
  max-width: 100%;
  overflow-x: auto;
}
:where(.alx) :where(.entry-content, .woocommerce-Tabs-panel--description, .page-content, .post-content) table:not(.shop_table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:where(.alx) table {
  max-width: 100%;
}

/* Form controls never exceed their column */
:where(.alx) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) {
  max-width: 100%;
}
.alx .select2-container {
  max-width: 100% !important;
}

/* ---------- 3. Mobile (< 768) ---------- */
@media (max-width: 767px) {
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2 {
    float: none;
    width: 100%;
  }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    float: none;
    width: 100%;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
  }
  .alx .wp-block-columns {
    flex-wrap: wrap;
  }
  .alx .wp-block-column {
    flex-basis: 100% !important;
  }
}