/* ═══════════════════════════════════════════════════════════════════════════
   lxv-mobile.css — LXV Wine · phone + small-tablet layer
   Created 2026-08-12.

   WHY THIS FILE EXISTS
   --------------------
   lxvwine.com is a Bridge/Qode parent theme wrapped around Elementor-built
   pages with Commerce7 widgets injected on top. Each of those three layers
   ships its own idea of "mobile" and none of them agree:

     · Bridge lays every page out inside `.container_inner`, which below the
       grid breakpoint falls back to a PERCENTAGE side margin (10%). On a
       375px phone that is 37.5px of dead space per side before any content
       is drawn.
     · Elementor then adds its own column padding (30px per side on the
       templates in use here) INSIDE that box.
     · Net result: a 375px viewport rendered 240px of usable content. A third
       of the screen was gutter. That is the "pages look narrow on mobile"
       report, and it hit every page rendered through the Bridge template —
       shop, wine/product, visit, and most content pages.

   The footer (`footer.elementor-location-footer`) is NOT part of this —
   it is a sibling of `<main>`, not a descendant of `.container_inner`, so
   nothing in this file touches it. Its own mobile rules live entirely in
   styles.css §13–14b. See §10 below.

   This file is the single place where the three layers are reconciled below
   1000px. It is enqueued LAST (functions.php, priority 99) so it wins the
   cascade without anyone having to lengthen a selector.

   HOUSE RULES FOLLOWED HERE
   -------------------------
   · No page-id, Elementor element-id, or other generated ID selectors —
     stable semantic hooks only ([[website-coding-conventions]]).
   · Header and burger rules do NOT live here. They belong in
     wp-content/plugins/lxv-ops/assets/lxv-global-header.css (see the note in
     styles.css §11b). This file deliberately contains no header rules.
   · Every `!important` here is answering an `!important` from Bridge,
     Elementor, or Commerce7 — not a shortcut.

   SECTIONS
     1 · Gutter token
     2 · Page shell
     3 · Elementor columns
     4 · Vertical rhythm
     5 · Overflow guards
     6 · Typography
     7 · Tap targets
     8 · Forms
     9 · Commerce7
    10 · Footer
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1 · Gutter token
   One number decides the page edge everywhere below. Change it
   here, not in the rules.
   ───────────────────────────────────────────────────────────── */

:root { --lxv-gutter: 20px; }

@media only screen and (max-width: 480px) {
    :root { --lxv-gutter: 16px; }
}


/* ─────────────────────────────────────────────────────────────
   2 · Page shell
   Bridge's `.container_inner` is the outermost box the page content
   sits in. Its % margin scales the wrong way — the smaller the
   screen, the larger the proportion it eats. Replaced with a fixed
   gutter.

   `.page_container_inner` and `.full_page_container_inner` are the
   same element under different Bridge page templates, so all three
   are addressed together. The `.content .container` prefix matches
   the specificity of the `padding: 0 !important` rule in styles.css
   §2 — a shorter selector loses to it and the gutter silently
   disappears on default-template pages.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {

    .container_inner,
    .page_container_inner,
    .full_page_container_inner,
    .content .container .container_inner,
    .content .container .container_inner.page_container_inner {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--lxv-gutter) !important;
        padding-right: var(--lxv-gutter) !important;
    }

    /* Full-bleed pages opt out. The v7 landing bands compute their own
       edge-to-edge maths from this wrapper (styles.css §16), and the
       wine-product template draws its own colour bands — a gutter here
       would offset every band. */
    body:has(.v7-bg-hero) .container_inner,
    body:has(.v7-bg-hero) .page_container_inner,
    .container_inner:has(.lxvwp-full) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   3 · Elementor columns
   With §2 supplying the page edge, top-level column padding is a
   second gutter stacked on the first. Zeroed for TOP-LEVEL columns
   only — inner sections keep their padding, because that is what
   gives cards and bands their internal breathing room.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 767px) {

    .elementor-top-section
      > .elementor-container
      > .elementor-top-column
      > .elementor-widget-wrap.elementor-element-populated {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Boxed flex containers cap themselves at a content width chosen for
       desktop. On a phone that cap is always wider than the screen, so it
       only ever adds padding. */
    .elementor-element.e-con.e-parent > .e-con-inner {
        max-width: 100% !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   4 · Vertical rhythm
   Several top-level sections carry desktop hero spacing — a 150px
   top padding plus a 100px top margin on the shop page. On a
   390 × 844 phone that is a quarter of the first screen spent on
   nothing: both the shop and wine pages opened with a blank band
   under the header.

   Capped for LEGACY Elementor sections only (`.elementor-top-section`).
   Flex containers (`.e-con`) are deliberately left alone — that is
   where the real heroes live (home, v7 landing pages) and their
   height IS the design.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 767px) {

    .elementor-top-section:not(:has(.v7-bg-hero)):not(:has([class*="hero"])) {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Section-to-section spacing is already carried by the padding above;
       the desktop margins on top of it are what produced the blank band. */
    .elementor > .elementor-top-section {
        margin-top: 0 !important;
    }

    /* The wine-product template opens with its own bottle image, so it
       needs less still. */
    .elementor-top-section:has(.lxvwp) {
        padding-top: 16px !important;
        padding-bottom: 0 !important;
    }

    .elementor-widget-container:has(> .lxvwp) {
        margin-top: 0 !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   5 · Overflow guards
   A single element wider than the viewport turns the whole page
   into a horizontally scrollable one, which on a phone reads as
   "the site is broken". These are the things that do it.

   `overflow-x: clip` (not `hidden`) on the shell — `hidden` would
   make `.container` a scroll container and break `position: sticky`
   on the wine page's buy bar.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {

    .container { overflow-x: clip !important; }

    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
    }

    /* Tables can't wrap. Give them their own scroller rather than letting
       them widen the page. */
    .content table,
    .entry-content table,
    .lxvwp table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    pre, code {
        white-space: pre-wrap !important;
        word-break: break-word;
    }

    /* Long unbroken strings — order numbers, SKUs, URLs in body copy. */
    .content p,
    .content li,
    .entry-content p {
        overflow-wrap: anywhere;
    }
}


/* ─────────────────────────────────────────────────────────────
   6 · Typography
   Display sizes are set in px for desktop and do not scale down.
   These clamps keep the same visual hierarchy while fitting the
   line — "2023 LXV THE JEWEL" was breaking mid-name at 375px.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 767px) {

    .content h1,
    .entry-content h1,
    h1.elementor-heading-title {
        font-size: clamp(1.75rem, 7.4vw, 2.4rem) !important;
        line-height: 1.12 !important;
    }

    .content h2,
    .entry-content h2,
    h2.elementor-heading-title {
        font-size: clamp(1.45rem, 6vw, 2rem) !important;
        line-height: 1.18 !important;
    }

    .content h3,
    .entry-content h3,
    h3.elementor-heading-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        line-height: 1.25 !important;
    }

    /* ALL-CAPS headings with wide tracking overflow a narrow screen far
       sooner than sentence case does. */
    .content h1,
    .content h2,
    h1.elementor-heading-title,
    h2.elementor-heading-title {
        letter-spacing: .01em !important;
        overflow-wrap: break-word;
    }

    /* Body-copy floor. Anything under 15px is a squint on a phone. */
    .content p,
    .content li,
    .entry-content p,
    .entry-content li,
    .elementor-widget-text-editor p {
        font-size: max(1rem, 16px) !important;
        line-height: 1.6 !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   7 · Tap targets
   44 × 44px is the floor a fingertip hits reliably. Applied to the
   controls people actually tap — buttons, nav, footer, pagination —
   rather than to every `a`, which would put 44px of padding around
   inline links inside body copy.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {

    .elementor-button,
    .c7-btn,
    .lxvwp-buy button,
    .lxvwp-stickybuy button,
    button[type="submit"],
    input[type="submit"] {
        min-height: 44px !important;
        padding-block: 12px !important;
    }

    .page_nav a,
    .pagination a {
        display: block;
        min-height: 44px;
        line-height: 1.35;
        padding-block: 11px !important;
    }

    /* ⚠ The footer links are NOT in the list above, on purpose.
       A first pass put them there, and 44px + 11px padding on every
       one of ~25 footer links turned a compact designed block into a
       long airy ribbon — it read as unstyled. The footer's own rules
       (styles.css §14) already give them `padding: 4px 0` at a
       deliberate 0.78rem, and that is the design. Leave it alone. */
}


/* ─────────────────────────────────────────────────────────────
   8 · Forms
   iOS Safari zooms the whole page when a focused input's font-size
   is below 16px, and does not zoom back out. Every newsletter and
   checkout field on the site inherited 13–14px, so the page jumped
   on first tap. 16px is the fix; there is no other one.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    select,
    textarea,
    .c7-form input,
    .c7-form select,
    .c7-form textarea {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    /* Multi-column form rows collapse. A 2-up first/last name pair at
       375px gives each field ~150px, which truncates most real names. */
    .c7-form-row,
    .c7-form .c7-row,
    .lxv-form-row {
        display: block !important;
    }

    .c7-form-row > *,
    .c7-form .c7-row > * {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   9 · Commerce7
   The side cart is declared at a fixed 380px (styles.css §12). On a
   375px viewport it is wider than the screen, so the panel's own
   close button sat off-screen and the page gained a horizontal
   scrollbar while the cart was open.
   ───────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {

    .c7-side-cart {
        width: min(380px, 100vw) !important;
        max-width: 100vw !important;
    }

    .c7-side-cart__content-container {
        padding-left: var(--lxv-gutter) !important;
        padding-right: var(--lxv-gutter) !important;
    }
}

@media only screen and (max-width: 600px) {

    /* Two columns at 375px gives each card ~160px — below what the bottle
       shot and the price line need. */
    .c7-product-list,
    .c7-product-collection {
        grid-template-columns: 1fr !important;
    }

    /* Checkout puts the order summary in a sidebar. Stacked, it belongs
       above the form so the total is visible before the fields. */
    .c7-checkout,
    .c7-cart {
        display: block !important;
    }

    .c7-checkout__summary {
        margin-bottom: 24px !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   10 · Footer — deliberately empty (2026-08-12, revision 2)

   THIS FILE DOES NOT TOUCH THE FOOTER. Two things forced that:

   1. `footer.elementor-location-footer` is a SIBLING of `<main>`,
      appended at body level by `get_footer()` — it is not a
      descendant of `.container_inner`/`.container` (confirmed by
      walking the DOM: the content chain runs
      `h1 → … → .elementor → .container_inner → .container → main →
      body`, and the footer is not in it). §2's page-shell fix
      therefore never reaches it, in either direction — it was never
      the cause of a footer width problem, and it cannot be the cause
      of a footer regression either.
   2. Revision 1 of this section DID style the footer directly — a
      44px tap-target rule that included `.lxv-footer-col a` /
      `.lxv-footer-grid a`, plus `gap` overrides on the grid and
      columns — and made it visibly worse: long, loose, unbranded.
      That was backed out same-day.

   A revision-2 version of this section still pinned the footer's
   left/right padding to `--lxv-gutter`, reasoning it should at least
   line up with the rest of the page. Given (1) that padding was
   solving a problem the footer never had, and given a live report
   after that revision was deployed that the footer had lost its
   background colour and centering — a claim nothing in this file can
   explain, which points at deployment/cache state rather than this
   CSS, but that could not be confirmed visually at the time — the
   remaining touch was removed rather than argued for. If the footer
   still looks wrong with this section empty, after a full redeploy
   and cache purge, the cause is in `styles.css` §13–14b or upstream of
   it, not here.
   ───────────────────────────────────────────────────────────── */