/* ============================================================
   HAUTE OPTIQUE — Mobile edge spacing (sitewide)

   Investigated 2026-07-17: there is no single global content-padding
   control on this site (no customizer setting, no Elementor Kit default).
   Two separate, uncoordinated mechanisms exist, and neither is responsive
   — the same padding value applies at every breakpoint including narrow
   phones, which is what makes content sit too close to the screen edges
   on mobile:

     1. Classic/Bootstrap pages (cart, my account, and any other page not
        built as an Elementor full-width template — About, Contact, blog,
        404, etc.): `.container.content-page` in the PARENT theme's
        xstore.min.css, flat 15px left/right at all widths, never
        overridden by any @media rule in that file.
     2. Elementor Theme-Builder full-width templates (home post 13, shop
        archive post 1315, single product post 1318): each content
        section sets its own `--padding-left`/`--padding-right` custom
        property in that page's compiled
        wp-content/uploads/elementor/css/post-{ID}.css — flat 10px at
        every breakpoint (the file's own @media(max-width:767px) blocks
        re-declare the exact same 10px, i.e. it was authored as a
        constant, not actually made responsive).

   This file raises both to a consistent 20px on mobile. Deliberately
   full-bleed sections are explicitly excluded (never touched): the
   homepage hero slider (465dac2/018437b) and marquee (813ade8), and the
   shop hero banner (1a2ec78d, already forced to a 100vw breakout by
   shop-filters.css) — as well as the header (templates 1309/1312) and
   footer (template 1306) entirely, none of which this file's selectors
   touch.

   Checkout (haute-optique-checkout.php, .ho-wrap, already 16px !important
   on mobile) and the thank-you page (.ho-thankyou-wrap, already a fixed
   24px) already have adequate independent mobile spacing — intentionally
   left untouched here.

   Both the custom-property AND the literal padding-left/right are set
   (same technique already used successfully in shop-filters.css) so the
   override holds regardless of exactly how Elementor's own compiled CSS
   consumes the variable.

   Self-contained (main.css does not load on the front, see HANDOFF §2).
   ============================================================ */

@media (max-width:767px){

  /* ---- Classic/Bootstrap pages: cart, my account, and any other
     non-Elementor-full-width page sharing the same parent-theme wrapper.
     24px (not 20px) to match the already-correct thank-you page value and
     make the change from the original 15px actually noticeable. ---- */
  .container.content-page{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  /* ---- Homepage (post 13) — every boxed content section except the
     hero slider and marquee, both deliberately full-bleed by design ---- */
  .elementor-13 .elementor-element.elementor-element-6f016424,
  .elementor-13 .elementor-element.elementor-element-461fdef,
  .elementor-13 .elementor-element.elementor-element-43af4df2,
  .elementor-13 .elementor-element.elementor-element-cd32a7c,
  .elementor-13 .elementor-element.elementor-element-a7738a9,
  .elementor-13 .elementor-element.elementor-element-777cd85a,
  .elementor-13 .elementor-element.elementor-element-b789588,
  .elementor-13 .elementor-element.elementor-element-4b875edb{
    --padding-left:20px!important;
    --padding-right:20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* ---- Shop / category archive (template post 1315) — both the toolbar
     row (249fe413: Filtrer button + sort/per-page) AND the row that
     actually holds the product grid + filter sidebar widget (2d87ac6a) —
     easy to miss since they're two separate containers stacked vertically.
     The hero banner (1a2ec78d) is already an intentional full-bleed
     breakout in shop-filters.css, untouched here. ---- */
  .elementor-1315 .elementor-element.elementor-element-249fe413,
  .elementor-1315 .elementor-element.elementor-element-2d87ac6a{
    --padding-left:20px!important;
    --padding-right:20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* ---- Single product (template post 1318). Re-applied 2026-07-17 after
     fixing the underlying cause of the earlier regression: the price/stock
     row (elementor-element-2ae47c5c, inside 6b868c99) used to rely on a
     fragile position:relative;top:-16px pixel hack (stock-badge-style.php)
     that broke when available width changed. That's been rebuilt with
     explicit flex `order` + `justify-content:space-between` +
     `margin-left:auto`, which holds regardless of the container's exact
     width — safe to pad now. ---- */
  .elementor-1318 .elementor-element.elementor-element-917b125,
  .elementor-1318 .elementor-element.elementor-element-6b868c99,
  .elementor-1318 .elementor-element.elementor-element-50c31a67,
  .elementor-1318 .elementor-element.elementor-element-66af70e7{
    --padding-left:20px!important;
    --padding-right:20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}