/*! tg-mobile-gutters-5.css
   Mobile-only (max-width:767px) outer gutters → 5px+5px.
   Refreshed 2026-11-09 against live CSS:
     - /en/ shop50: shop50-chrome-d71 (sha changed vs Nov8) embeds D68
       --tg-page-pad-x:26 + foot.css .fm-in calc(100%-32px) ≈42px cumulative
     - /in/ shop72: tg-spacing-v1.css + JS class; Elementor nests
       container pad + column-wrap 10px + banner pad → triple inset
   Desktop/tablet ≥768 unchanged (48/57).
   Does NOT touch cart/checkout/order or Studio.
*/

@media (max-width: 767px) {
  /* 1) Token — chrome + spacing-v1 site-wide */
  html.tg-spacing-v1 {
    --tg-page-pad-x: 5px;
  }

  /* 2) /en/ footer: kill nested .fm-in side shrink (foot.css calc(100%-32px)) */
  html.tg-spacing-v1 footer.fm .fm-in,
  html.tg-spacing-v1 .fm .fm-in,
  html.tg-spacing-v1 body .fm .fm-in {
    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;
  }

  /* 3) /en/ .fm outer pad = token */
  html.tg-spacing-v1 footer.fm,
  html.tg-spacing-v1 .fm {
    padding-left: var(--tg-page-pad-x) !important;
    padding-right: var(--tg-page-pad-x) !important;
    box-sizing: border-box !important;
  }

  /* 4) /in/ Elementor footer: kill section side pad (live ~15/11), keep 5px on container */
  html.tg-spacing-v1 #footer .elementor-section.elementor-top-section,
  html.tg-spacing-v1 footer.footer .elementor-section.elementor-top-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.tg-spacing-v1 #footer .elementor-section > .elementor-container,
  html.tg-spacing-v1 footer.footer .elementor-section > .elementor-container {
    padding-left: var(--tg-page-pad-x) !important;
    padding-right: var(--tg-page-pad-x) !important;
    box-sizing: border-box !important;
  }
  html.tg-spacing-v1 #footer .elementor-column-gap-default > .elementor-row
    > .elementor-column.elementor-col-100 > .elementor-element-populated,
  html.tg-spacing-v1 footer.footer .elementor-column-gap-default > .elementor-row
    > .elementor-column.elementor-col-100 > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5) Bottom-nav clearance (one band only) */
  html.tg-spacing-v1 .fm .fm-bar,
  html.tg-spacing-v1 footer.fm .fm-bar,
  html body .fm .fm-bar,
  html body footer.fm .fm-bar {
    padding-top: 12px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  html.tg-spacing-v1 .fm .fm-cpy,
  html body .fm .fm-cpy {
    margin-bottom: 0;
  }
  html body.ma:has(footer.fm) {
    padding-bottom: 0;
  }

  /* 6) Homepage / CMS Elementor top containers → 5px (not cart/checkout) */
  html.tg-spacing-v1 body#index
    #wrapper .elementor-section.elementor-top-section > .elementor-container,
  html.tg-spacing-v1 body.page-cms:not(.page-cart):not(.page-checkout)
    .elementor-section.elementor-top-section > .elementor-container {
    padding-left: var(--tg-page-pad-x) !important;
    padding-right: var(--tg-page-pad-x) !important;
    box-sizing: border-box !important;
  }

  /* Avoid double pad where .tg5 homepage already pads .home (/en/) */
  html.tg-spacing-v1 body#index
    .elementor-section.elementor-top-section > .elementor-container:has(.tg5) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 7) Collapse Elementor column-gap 10px on full-width columns (mobile),
        homepage/cms only — category/product CE grids already sit ~5px. */
  html.tg-spacing-v1 body#index
    .elementor-column-gap-default > .elementor-row
    > .elementor-column.elementor-col-100 > .elementor-element-populated,
  html.tg-spacing-v1 body.page-cms
    .elementor-column-gap-default > .elementor-row
    > .elementor-column.elementor-col-100 > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 8) Banner/cats/trust already inside padded Elementor container → no second pad.
        (/en/ .tg5 .home path already zeros these in spacing-v1) */
  html.tg-spacing-v1 .elementor-container .tg-v3-banner,
  html.tg-spacing-v1 .elementor-container .tg-v3-cats,
  html.tg-spacing-v1 .elementor-container .tg-trust,
  html.tg-spacing-v1 .elementor-container .tg-in-logos {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 9) Category / product: theme container → 5px.
        Do NOT force Elementor top-section pad (heroes often full-bleed at 0). */
  html.tg-spacing-v1 body.page-category #wrapper > .container,
  html.tg-spacing-v1 body.page-product #wrapper > .container,
  html.tg-spacing-v1 body#category #wrapper > .container,
  html.tg-spacing-v1 body#product #wrapper > .container {
    padding-left: var(--tg-page-pad-x) !important;
    padding-right: var(--tg-page-pad-x) !important;
    box-sizing: border-box !important;
  }

  /* Product listing / PDP content shells that use spacing token elsewhere */
  html.tg-spacing-v1 body.page-category #content-wrapper,
  html.tg-spacing-v1 body.page-product #content-wrapper,
  html.tg-spacing-v1 body#category #main,
  html.tg-spacing-v1 body#product #main {
    padding-left: 0;
    padding-right: 0;
  }

  /* 10) Overflow guard — NOT on html/body (that clips scrollHeight / sticky) */
  html.tg-spacing-v1 footer.fm,
  html.tg-spacing-v1 .fm,
  html.tg-spacing-v1 .fm .fm-in,
  html.tg-spacing-v1 #footer .elementor-container,
  html.tg-spacing-v1 #wrapper .elementor-section.elementor-top-section > .elementor-container {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ≥768: no overrides — chrome/spacing keep 48 / 57 */