/* ==========================================================================
   GourmetBites responsive foundation
   Site-wide rules so every section built from here on is responsive by
   default rather than needing its own breakpoint patches.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kill horizontal scroll. The single most common mobile defect: one
      overflowing element drags the whole page sideways.
      `clip` is preferred because, unlike `hidden`, it does not turn the
      element into a scroll container (which would break position: sticky).
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   2. Media never exceeds its box
   -------------------------------------------------------------------------- */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe { border: 0; }

/* Keep intrinsic ratio on embeds so they scale instead of letterboxing */
.wp-block-embed__wrapper, .gb-embed {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Long strings (URLs, unbroken product names) must not force a wide page
   -------------------------------------------------------------------------- */
body, p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1, h2, h3 { hyphens: none; }

/* --------------------------------------------------------------------------
   4. Fluid gutters. One source of truth for side padding at every width.
   -------------------------------------------------------------------------- */
:root { --gb-gutter: 24px; }
@media (max-width: 767px) { :root { --gb-gutter: 20px; } }
@media (max-width: 400px) { :root { --gb-gutter: 16px; } }

/* --------------------------------------------------------------------------
   5. Elementor containers: stack cleanly and respect the gutter
   -------------------------------------------------------------------------- */
.e-con > .e-con-inner { max-width: var(--gb-container, 1280px); }

@media (max-width: 767px) {
  .e-con, .e-con-inner { padding-left: var(--gb-gutter); padding-right: var(--gb-gutter); }
  .e-con > .e-con-inner { padding-left: 0; padding-right: 0; }

  /* Any inner container that was a row becomes a column unless it opted out */
  .e-con-inner > .e-con.e-flex:not(.gb-keep-row) { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   6. Tap targets. WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable
      figure and what Apple and Google both recommend.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  a.elementor-button,
  button, input[type=submit], input[type=button],
  .woocommerce a.button, .woocommerce button.button,
  .gb-header-icon, .elementskit-menu-hamburger {
    min-height: 44px;
  }
  .woocommerce a.button, .woocommerce button.button { min-width: 44px; }
}

/* --------------------------------------------------------------------------
   7. Forms never overflow and never trigger iOS zoom.
      Safari zooms the viewport when a focused input is under 16px.
   -------------------------------------------------------------------------- */
input, select, textarea { max-width: 100%; }
@media (max-width: 767px) {
  input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=password], input[type=search], input[type=url], select, textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   8. WooCommerce tables become stacked cards on mobile.
      A 4-column cart table is unusable on a phone otherwise.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table {
    display: block;
    border: none;
    background: transparent;
  }
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td { display: block; width: 100%; }

  .woocommerce table.shop_table tr {
    background: var(--gb-surface);
    border: 1px solid var(--gb-outline-soft);
    border-radius: var(--gb-r-md);
    margin-bottom: 14px;
    padding: 6px 14px;
  }
  .woocommerce table.shop_table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    text-align: right;
    border-top: none;
    border-bottom: 1px solid var(--gb-outline-soft);
    padding: 12px 0;
  }
  .woocommerce table.shop_table tr td:last-child { border-bottom: none; }
  .woocommerce table.shop_table td::before {
    content: attr(data-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gb-ink-muted);
    text-align: left;
    flex: 0 0 auto;
  }
  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.product-thumbnail::before { content: none; }
  .woocommerce table.shop_table td.product-thumbnail { justify-content: center; }
  .woocommerce table.shop_table td.product-thumbnail img { width: 88px; border-radius: var(--gb-r-sm); }

  /* Two-column checkout collapses */
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { float: none; width: 100%; }
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #customer_details { width: 100%; float: none; }
}

/* --------------------------------------------------------------------------
   9. Product grids: 4 -> 3 -> 2 -> 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .woocommerce ul.products[class*=columns-] li.product { width: 30.75%; }
}
@media (max-width: 767px) {
  .woocommerce ul.products[class*=columns-] li.product {
    width: 48%;
    margin-right: 4%;
  }
  .woocommerce ul.products[class*=columns-] li.product:nth-child(2n) { margin-right: 0; }
}
@media (max-width: 400px) {
  .woocommerce ul.products[class*=columns-] li.product { width: 100%; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   10. Typography floor. Nothing drops below a readable size on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.6; }
  .elementor-widget-text-editor p { font-size: max(15px, 1em); }
}

/* --------------------------------------------------------------------------
   11. Landscape phones: vh units misbehave, so never lock a tall min-height
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .e-con { min-height: 0 !important; }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
  .ekit-template-content-header, .gb-float, .gb-hero-glyph { display: none !important; }
  body { padding-top: 0; }
}