/* ============================================================
   Storefront — shared mobile foundation (issue #180)

   One file, loaded LAST by every storefront theme head.php, so it
   wins the cascade over omnimart.css / responsive.css / the theme
   sheets / the per-page inline <style> blocks.

   Rules:
     - Only the :root token block is global. Every layout rule lives
       inside a max-width @media block, so DESKTOP DOES NOT CHANGE.
     - Spacing comes from the design-system --sp-* tokens
       (themes/altum/assets/design-system.css). Each var() carries a
       px fallback, because the older theme pages do not always load
       design-system.css.

   What it fixes:
     1. No sideways scroll on small screens.
     2. One consistent screen-edge padding on every page.
     3. Consistent gaps between sections and between elements.
     4. Buttons / inputs / quantity steppers are at least 44px tall.
     5. Two-column cart / checkout / account layouts stack to one
        column, with the order summary below the form.
   ============================================================ */

:root {
  /* Screen-edge padding (the page gutter). */
  --sf-gutter: var(--sp-4, 16px);
  --sf-gutter-sm: var(--sp-3, 12px);

  /* Gap between two sections, and between elements inside a section. */
  --sf-section-gap: var(--sp-8, 32px);
  --sf-block-gap: var(--sp-4, 16px);
  --sf-item-gap: var(--sp-2, 8px);

  /* Minimum touch target. 44px is the accessible minimum. */
  --sf-tap: 44px;
}

/* ------------------------------------------------------------
   1. Tablet and down — never scroll sideways
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Long product names and long URLs wrap instead of pushing the page wide. */
  body {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Wide media can never be wider than its box. */
  img,
  svg,
  video,
  iframe,
  embed,
  object {
    max-width: 100%;
    height: auto;
  }

  /* Grid and flex children default to min-width:auto, which is what
     usually makes a page scroll sideways. Reset it for layout rows. */
  [class*="grid"] > *,
  [class*="-row"] > *,
  .row > * {
    min-width: 0;
  }

  /* Wide tables scroll inside their own box, not with the whole page. */
  .table-wrap,
  .table-responsive,
  .sf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   2. Phone and small tablet — spacing + touch targets
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* --- One screen-edge padding for every page --- */
  .container {
    padding-inline: var(--sf-gutter) !important;
  }

  /* --- Consistent gap between sections --- */
  .sf-section,
  .section,
  .co-page,
  .cart-wrap,
  .acc-page {
    padding-block: var(--sf-block-gap) var(--sf-section-gap) !important;
  }

  .section-title {
    margin-bottom: var(--sf-block-gap) !important;
    padding-bottom: var(--sp-2, 8px) !important;
  }

  /* Old utility margins, retuned to the token scale. */
  .mt-30 { margin-top: var(--sp-4, 16px) !important; }
  .mt-50 { margin-top: var(--sp-6, 24px) !important; }
  .mt-60 { margin-top: var(--sp-8, 32px) !important; }

  /* --- Touch targets: at least 44px --- */
  .btn,
  .sf-btn,
  button.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: var(--sf-tap);
    padding-block: var(--sp-3, 12px);
  }

  .input,
  .sf-input,
  .form-control,
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"] {
    min-height: var(--sf-tap);
    /* 16px stops iOS Safari from zooming in when the field is focused. */
    font-size: 16px;
  }

  textarea {
    min-height: calc(var(--sf-tap) * 2);
  }

  .qty-btn {
    inline-size: var(--sf-tap) !important;
    block-size: var(--sf-tap) !important;
  }

  .qty-input {
    block-size: var(--sf-tap);
    inline-size: 56px;
    font-size: 16px;
  }

  /* The cart row remove button is an icon button. Give it the same tap size
     as the other controls, so the buyer can see it and press it. */
  .cart-line-remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none !important;
    min-inline-size: var(--sf-tap) !important;
    min-block-size: var(--sf-tap) !important;
  }

  .cart-line-remove svg {
    inline-size: var(--sp-5, 20px);
    block-size: var(--sp-5, 20px);
  }

  /* Header icons stay reachable and tap sized. */
  .sf-action {
    min-height: var(--sf-tap);
    min-width: var(--sf-tap);
    justify-content: center;
  }

  .sf-cat-pill {
    min-height: 36px;
  }

  .mobile-bottom-nav .bottom-nav-item {
    min-height: var(--sf-tap);
  }

  /* --- Two column layouts stack to one column --- */
  .cart-wrap,
  .co-grid,
  .co-row,
  .acc-row,
  .auth-row,
  .od-grid,
  .cf-row,
  .contact-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--sf-block-gap) !important;
  }

  /* The order summary sits below the form, and does not stick. */
  .cart-summary,
  .co-summary,
  .co-summary-wrap {
    position: static !important;
    inset-block-start: auto !important;
  }

  /* --- Forms and main actions are full width and easy to tap --- */
  .field,
  .field .input,
  .field select,
  .field textarea,
  .cart-coupon .input,
  .co-submit,
  .btn-block {
    width: 100%;
  }

  .cart-coupon {
    flex-wrap: wrap;
    gap: var(--sf-item-gap) !important;
  }

  /* The main call to action fills the row. */
  .cart-summary .btn,
  .co-submit,
  #placeBtn,
  .pd-cart-row .btn {
    width: 100%;
    min-height: var(--sf-tap);
  }
}

/* ------------------------------------------------------------
   3. Phone (375px class) — tighter gutter, even grid gaps
   ------------------------------------------------------------ */
@media (max-width: 575px) {
  .container {
    padding-inline: var(--sf-gutter-sm) !important;
  }

  /* Product grids: 2 even columns with a token gap. */
  .product-grid,
  .product-grid-2,
  .product-grid-3,
  .product-grid-4,
  .product-grid-5,
  .shop-grid,
  .shop-grid-3,
  .shop-grid-4,
  .shop-grid-5 {
    gap: var(--sp-2, 8px) !important;
  }

  /* Card padding follows the token scale so nothing touches the edge. */
  .card,
  .co-card,
  .acc-card,
  .sf-card {
    padding: var(--sp-4, 16px) !important;
  }

  .cart-items {
    padding-inline: var(--sp-4, 16px) !important;
  }

  /* Rows of small items keep one even gap. */
  .cart-line,
  .item-row,
  .summary-row {
    gap: var(--sf-item-gap) !important;
  }
}