/* ==========================================================================
   Aitrixa — single product page (MOBILE)
   --------------------------------------------------------------------------
   File:        assets/aitrixa-product-mobile-v2.css
   Enqueue:     after aitrixa-product.css, on is_product() AND wp_is_mobile()
                — or unconditionally; everything below is wrapped in a
                @media (max-width: 720px) query so it cannot affect desktop.
   Purpose:     Mobile-specific reskin of the single product page. Replaces
                the desktop two-column grid + tabs + carousel with a
                vertically-stacked, gesture-friendly layout: full-bleed
                swipeable gallery, edge-aligned summary, accordion details,
                horizontal scroll for related products, and a floating
                action bar pinned to the bottom of the viewport.
   Tokens:      All colors / fonts / spacing pulled from aitrixa.css. No
                hardcoded hex values.
   WC parity:   All canonical WC selectors retained (.woocommerce, .product,
                .single_add_to_cart_button, .variations_form, etc.) so
                add-to-cart AJAX, fragments, and any plugin bindings work
                untouched. Visual classes are layered ON TOP.
   ========================================================================== */

@media (max-width: 720px) {

/* --------------------------------------------------------------------------
   0. Container — kill the desktop max-width frame on mobile.
   The desktop layer wraps .aitrixa-single-product in a centered max-width
   container with a gutter; on mobile we want the gallery to bleed edge to
   edge while the rest of the content keeps a 20px inset.
   -------------------------------------------------------------------------- */
.aitrixa-single-product,
.woocommerce {
    max-width: 100%;
    padding: 0 !important;
    margin: 0;
}

/* Sticky-cart-bar pushes the page up; reserve space so the last
   in-flow element isn't covered. */
body.single-product {
    padding-bottom: 76px;
}


/* --------------------------------------------------------------------------
   1. Upsell strip — matches the .topbar in Aitrixa Shop (Mobile).html:
   ink bg, 8px padding, 9px mono caps, .18em letter-spacing. All text is
   pure white at uniform weight (no two-tone strong highlight). Only the
   first message is shown (per v95/v96).
   -------------------------------------------------------------------------- */
.upsell-strip {
    background: var(--ink) !important;
    color: var(--white) !important;
    padding: 8px var(--gutter, 20px) !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    line-height: 1.4 !important;
}
.upsell-strip strong {
    color: var(--white) !important;
    font-weight: 400 !important;
}
.upsell-strip > *:not(:first-child) {
    display: none !important;
}
.upsell-strip > *:first-child {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}


/* --------------------------------------------------------------------------
   2. Breadcrumb — tighter, single-line, no edge-to-edge underline trick.
   -------------------------------------------------------------------------- */
.woocommerce-breadcrumb,
main.site-main > .woocommerce-breadcrumb,
.aitrixa-single-product > .woocommerce-breadcrumb {
    margin: 0;
    padding: 14px 20px;
    font-size: 9.5px;
    letter-spacing: .18em;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    display: block;
    line-height: 1.6;
}
.woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
.woocommerce-breadcrumb .sep { margin: 0 .7em; }


/* --------------------------------------------------------------------------
   3. Product container — drop the desktop bordered "card" frame.
   Mobile uses a continuous vertical scroll with hairline dividers between
   regions instead.
   -------------------------------------------------------------------------- */
.woocommerce div.product {
    display: block;
    grid-template-columns: none;
    border: 0;
    background: var(--white);
    margin: 0;
}


/* --------------------------------------------------------------------------
   4. Gallery — single product photo, contained card (not full-bleed, not
   dominating the screen). One image per product; thumbnails hidden, no
   pagination dots. Cap at ~280px so the title + price stay visible above
   the fold on a 393–430px viewport.
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery,
.woocommerce div.product div.woocommerce-product-gallery {
    width: 100%;
    max-width: 280px;
    margin: 20px auto 0;
    border: 1px solid var(--line-soft);
    aspect-ratio: 1 / 1;
    max-height: 280px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Image fills wrapper, no hatched placeholder pattern on mobile — use a
   flat panel-2 background so the photo (when present) lands clean. */
.woocommerce-product-gallery__wrapper {
    background: var(--panel-2);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-product-gallery__wrapper img,
.woocommerce-product-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Hide the thumbnail strip on mobile — one image per product. */
.woocommerce-product-gallery__thumbnails {
    display: none !important;
}

/* Pagination dots — not needed (single image). Hidden defensively in case
   any future JS injects them. */
.pc-gallery-dots {
    display: none !important;
}

/* Badge inside the image, top-left. */
.woocommerce-product-gallery .product-badge {
    top: 12px;
    left: 12px;
    bottom: auto;
    font-size: 8.5px;
    letter-spacing: .24em;
    padding: 5px 9px;
}


/* --------------------------------------------------------------------------
   5. Summary — edge-inset (20px), serif title scaled down, formula line
   under it, then a single-cell stack of price + specs + sizes + form.
   -------------------------------------------------------------------------- */
.summary.entry-summary,
.woocommerce div.product div.summary {
    padding: 24px 20px 20px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    float: none;
    display: block;
    overflow: visible;
}

/* Title — smaller serif on mobile so it doesn't dominate. */
.woocommerce div.product h1.product_title.entry-title,
h1.product_title.entry-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

/* Formula — compact mono line. */
.product-formula {
    font-size: 10.5px;
    letter-spacing: .12em;
    margin: 0 0 14px;
    color: var(--mute);
    /* Allow the chemical formula to wrap on narrow screens. */
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   5b. Inline description (NEW, mobile-friendly).
   --------------------------------------------------------------------------
   The product description is shown INLINE under the summary basics (no
   accordion tap required) — matches the amino-club product page rhythm
   but uses the aitrixa visual system (sharp corners, IBM Plex, hairline
   borders).

   PHP / WC integration:
     - .product-overview: hook into woocommerce_single_product_summary at
       priority 22 (after price) to print a copy of the description content
       (or use $product->get_description() / get_the_content()). The desktop
       description tab keeps its existing content; this CSS shows the inline
       block on mobile (and the §11 rule hides the duplicate tab panel on
       mobile so nothing renders twice).
   -------------------------------------------------------------------------- */

.product-overview {
    display: block;
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--line-soft);
}
.product-overview p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--body);
    margin: 0 0 10px;
}
.product-overview p:last-child {
    margin-bottom: 0;
}
.product-overview strong {
    color: var(--ink);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   6. Price block — promote to a horizontal row: label · amount · per-unit.
   Sits in a soft-bordered card that visually anchors the page above the
   size selector.
   -------------------------------------------------------------------------- */
.woocommerce div.product .price,
.price {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: baseline;
}
.price-from-label {
    grid-column: 1 / -1;
    font-size: 9.5px;
    letter-spacing: .22em;
    margin: 0 0 4px;
    /* Per design: "Starting from" hidden on mobile. PHP can keep emitting
       the span for desktop — this just removes it visually on phones. */
    display: none !important;
}
.woocommerce div.product .price .woocommerce-Price-amount.amount {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.price-per-unit {
    font-size: 10px;
    letter-spacing: .14em;
    margin-left: 0;
    color: var(--mute);
    justify-self: end;
}


/* --------------------------------------------------------------------------
   7. Quick specs — three rows stacked, not three columns. Each row is a
   left-aligned bordered tile with label-on-top, value below.
   --------------------------------------------------------------------------
   On mobile, .product-quick-specs is repositioned BELOW the add-to-cart
   form (just above the CoA accordion) using flex `order` — .summary.entry-
   summary is display:flex column, so reordering children via `order` works
   without any PHP markup changes. Desktop keeps the natural DOM order.

   Spacing is intentionally tight (zero margin) and the summary's bottom
   padding is collapsed (§5) so specs sits visually centered between the
   cart row above and the CoA accordion below, instead of floating high
   with a large gap underneath.
   -------------------------------------------------------------------------- */
.product-quick-specs {
    order: 50; /* sit between form.cart (default order:0) and any later siblings */
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--line-soft);
    margin: 0;
    background: var(--white);
}
.product-quick-spec {
    padding: 12px 10px;
    border-right: 1px solid var(--line-soft);
    font-size: 9px;
    letter-spacing: .14em;
    text-align: left;
}
.product-quick-spec:last-child {
    border-right: 0;
}
.product-quick-spec strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 2px;
    line-height: 1.2;
}


/* --------------------------------------------------------------------------
   8. Size selector — DROPDOWN on mobile.
   --------------------------------------------------------------------------
   The desktop layout shows a grid of size pills (.size-options > .size-option).
   On mobile we collapse that to a single full-width <select> dropdown.

   WordPress / WooCommerce integration paths (pick whichever fits your setup
   — the rules below cover all three):

   1. Easiest: in aitrixa_render_variation_prices() (inc/shop.php), emit a
      <select class="size-select" name="attribute_pa_size"> alongside the
      .size-options button grid. Bind the existing .size-option click
      handler to also sync the <select> value and vice versa. WC's own
      ajax-add-to-cart reads the select's value at submit time.

   2. Drop the custom helper on mobile and let WC's native variations
      form render. WC emits:
          <table class="variations"><tr><td class="value">
              <select name="attribute_pa_size">…</select>
          </td></tr></table>
      The .variations* rules below restyle this to match the mock.

   3. JS-only: on DOMContentLoaded under 720px, generate a <select> from
      the existing .size-option buttons and inject it. No PHP changes.

   The CSS targets all three selector shapes:
     select.size-select          — custom helper output
     .size-selector select       — any <select> inside our wrapper
     .variations td.value select — WC's native variations select
   -------------------------------------------------------------------------- */

.size-selector {
    margin: 0 0 20px;
}
.size-selector__label {
    font-size: 10.5px !important;
    letter-spacing: .22em;
    margin-bottom: 10px;
}
.size-selector__label::before {
    font-size: 10.5px;
    letter-spacing: .22em;
}

/* Hide the desktop button grid on mobile. */
.size-options {
    display: none !important;
}

/* Collapse WC's <table class="variations"> chrome — the <select> alone is
   all we need; the label is already provided by .size-selector__label. */
.variations,
.variations tbody,
.variations tr,
.variations td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
}
.variations td.label,
.variations th.label {
    display: none !important;
}

/* The dropdown itself. */
select.size-select,
.size-selector select,
.variations td.value select,
.woocommerce div.product form.cart .variations select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 44px 0 16px;
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    background-color: var(--white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230b0b0d' stroke-width='1.4'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: background-color .15s ease;
}
select.size-select:hover,
.size-selector select:hover,
.variations td.value select:hover {
    background-color: var(--panel);
}
select.size-select:focus,
.size-selector select:focus,
.variations td.value select:focus,
select.size-select:focus-visible,
.size-selector select:focus-visible,
.variations td.value select:focus-visible {
    outline: none;
    box-shadow: none;
}
select.size-select:disabled,
.size-selector select:disabled,
.variations td.value select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Native option styling (limited cross-browser — most engines only honor
   font + color + background here, but it's enough for a clean menu list). */
select.size-select option,
.size-selector select option,
.variations td.value select option {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: var(--white);
    padding: 12px 16px;
}
select.size-select option:disabled,
.variations td.value select option:disabled {
    color: var(--mute-2);
}

/* WC's "Clear" reset link sits in the variations table — already hidden by
   desktop CSS section 13, but keep a defensive override. */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}


/* --------------------------------------------------------------------------
   9. Add-to-cart form — INLINE form stays in flow for accessibility, but a
   floating action bar (Section 14) is the primary CTA on mobile. We keep
   this row visible but condense it: qty stepper full-width with the inline
   "Add to cart" pill on the right side, single 56px row.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart,
form.cart {
    grid-template-columns: 132px 1fr !important;
    grid-template-rows: 56px !important;
    height: 56px;
    border: 1px solid var(--ink) !important;
    margin: 0 0 20px !important;
}

.woocommerce div.product form.cart .quantity,
form.cart .quantity {
    height: 100%;
    width: 100%;
}

button.single_add_to_cart_button.button.alt {
    font-size: 12px !important;
    letter-spacing: .22em !important;
    padding: 0 16px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}


/* --------------------------------------------------------------------------
   10. Trust strip — REMOVED on mobile (items + divider).
   --------------------------------------------------------------------------
   Both the 3 trust items AND the container's hairline border-top are hidden
   on mobile. PHP/template can keep emitting the markup — desktop continues
   to render the strip normally; only mobile is affected.

   UNDO: restore the original §10 stacked-strip rule (see git history).
   -------------------------------------------------------------------------- */
.product-trust {
    display: none !important;
}


/* --------------------------------------------------------------------------
   10c. Trust info — "For research use only" inline badge.
   --------------------------------------------------------------------------
   Small mono caps line with a filled-dot prefix, sits directly under
   .product-formula. Regulatory info next to the chemical metadata.

   Usage:
     <p class="product-formula">…</p>
     <span class="product-disclaimer">For research use only</span>

   UNDO: delete the .product-disclaimer node from the markup and strip
   this block. Nothing else references this class.
   -------------------------------------------------------------------------- */
.product-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
}
.product-disclaimer::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--ink);
    border-radius: 50%;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   11. Tabs → ACCORDION on mobile.
   The desktop horizontal tab bar collapses badly on narrow screens. Re-
   present each tab as a tap-to-expand row. Hide the .tabs list, then
   reveal each panel under its own header. We use the existing
   .woocommerce-Tabs-panel structure — JS toggles a .is-open class on the
   parent .wc-tabs-wrapper li, OR you can wrap each panel in a <details>
   element on the PHP side; both work.
   -------------------------------------------------------------------------- */

/* Replace the tab strip with header-style rows above each panel. */
.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none !important;
}

/* Description tab — content is now shown INLINE inside the summary
   (.product-overview block, §5b). Hide the tab panel on mobile so the
   content isn't duplicated. Desktop is unaffected (this whole sheet is
   under @media max-width: 720px). */
.woocommerce-Tabs-panel--description,
.woocommerce div.product .woocommerce-Tabs-panel--description,
.woocommerce div.product .woocommerce-Tabs-panel--description.active,
.woocommerce div.product .wc-tab.woocommerce-Tabs-panel--description {
    display: none !important;
}

.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce div.product .woocommerce-tabs {
    border-top: 1px solid var(--line-soft) !important;
    padding-top: 0 !important;
}

/* Each panel renders as an always-visible accordion section.
   Reveal them all with a sectional title pulled from data-tab-title
   (set this attribute in PHP/JS — falls back to a generic label). */
.woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-Tabs-panel {
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--line-soft);
}

/* Panel header bar. Generated via ::before from data-tab-title attribute,
   or you can inject a <button class="pc-acc-trigger"> at PHP level. */
.woocommerce-Tabs-panel::before {
    display: block;
    padding: 18px 20px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--white);
    /* Trailing "+" indicator */
    content: attr(data-tab-title) " +";
    cursor: pointer;
}
.woocommerce-Tabs-panel.is-open::before {
    content: attr(data-tab-title) " −";
    border-bottom: 1px solid var(--line-soft);
}

/* Defaults for the auto-injected accordion titles per known panel id. */
.woocommerce-Tabs-panel--description:not([data-tab-title])::before {
    content: "Description +";
}
.woocommerce-Tabs-panel--description.is-open:not([data-tab-title])::before {
    content: "Description −";
    border-bottom: 1px solid var(--line-soft);
}
.woocommerce-Tabs-panel--aitrixa_documents:not([data-tab-title])::before {
    content: "CoA / Documents +";
}
.woocommerce-Tabs-panel--aitrixa_documents.is-open:not([data-tab-title])::before {
    content: "CoA / Documents −";
    border-bottom: 1px solid var(--line-soft);
}

/* Inner content: hidden until panel is .is-open, then revealed with
   padding. The existing desktop ::before eyebrow (e.g. "Product overview"
   / "Available documentation" injected on the panel itself) duplicates
   the accordion header on mobile — neutralize it. */
.woocommerce-Tabs-panel > *,
.woocommerce-Tabs-panel > ::before,
.woocommerce-Tabs-panel--description::after,
.woocommerce-Tabs-panel--aitrixa_documents::after {
    /* No-op anchor for the next rule. */
}

/* The auto-eyebrow set by aitrixa-product.css §22/§29 lives as the panel's
   own ::before. Since we've reassigned ::before to the accordion header
   above, the old eyebrow no longer renders — good. But the in-panel
   .tab-section-label div (in HTML) still renders; hide it on mobile. */
.woocommerce-Tabs-panel .tab-section-label {
    display: none !important;
}

/* Collapsed by default — wrap all non-pseudo children in a div via JS,
   or use the simple approach below: hide all direct children unless the
   panel has .is-open. */
.woocommerce-Tabs-panel:not(.is-open) > *:not(.tab-section-label) {
    display: none !important;
}
.woocommerce-Tabs-panel.is-open {
    padding: 4px 20px 24px !important;
}
.woocommerce-Tabs-panel.is-open > *:not(.tab-section-label) {
    display: block !important;
}

/* Description body — smaller line height and more comfortable measure. */
.woocommerce-Tabs-panel--description h2 {
    font-size: 22px !important;
    margin: 16px 0 12px !important;
    line-height: 1.15;
}
.woocommerce-Tabs-panel--description p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 0 14px !important;
}


/* --------------------------------------------------------------------------
   12. Documents list — single-column rows, full-width buttons stack under
   metadata rather than sitting in a 2nd column.
   -------------------------------------------------------------------------- */
.woocommerce-Tabs-panel--aitrixa_documents.is-open ul.aitrixa-documents {
    max-width: none !important;
    width: 100% !important;
}
.woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px 0 !important;
    padding: 16px !important;
}
.aitrixa-document__head { grid-row: 1 !important; }
.aitrixa-document__detail { grid-row: 2 !important; font-size: 10.5px !important; }
.aitrixa-documents li.aitrixa-document a.aitrixa-document__download,
.aitrixa-document a.aitrixa-document__download {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: stretch !important;
    text-align: center !important;
    margin-top: 6px !important;
    padding: 11px 16px !important;
    font-size: 11px !important;
}


/* --------------------------------------------------------------------------
   13. Related products — horizontal scroll-snap row (was 4-up carousel
   with prev/next on desktop). Drop the arrows; use native momentum scroll.
   -------------------------------------------------------------------------- */
.woocommerce div.product section.related.products,
section.related.products {
    padding: 24px 0 28px !important;
    background: var(--panel);
    border-top: 1px solid var(--line-soft);
}
.related.products > h2 {
    margin: 0 20px 14px !important;
    font-size: 10px !important;
    letter-spacing: .26em !important;
}
.related-carousel-nav {
    display: none !important;
}

.related-carousel-track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
}
.related-carousel-track-wrap::-webkit-scrollbar { display: none; }

.related.products ul.products {
    display: flex;
    gap: 10px;
    background: transparent;
    border: 0;
    transform: none !important;
    /* prevent JS-injected transforms from breaking the scroll-snap row */
    will-change: auto;
    padding: 0;
    margin: 0;
}
.related.products ul.products li.product,
.woocommerce div.product .related.products li.product {
    flex: 0 0 64% !important;
    max-width: 260px;
    scroll-snap-align: start;
    padding: 14px !important;
    border: 1px solid var(--line-soft) !important;
    background: var(--white) !important;
}
.related.products li.product .related-product-img {
    aspect-ratio: 1 / 1;
}
.related.products li.product .related-product-body {
    padding: 10px 0 8px !important;
}
.related.products li.product .woocommerce-loop-product__title {
    font-size: 18px !important;
}
.related.products li.product .related-product-footer {
    padding: 8px 0 0 !important;
}
/* --------------------------------------------------------------------------
   13b. Related products — "From $XX.XX" price prefix.
   --------------------------------------------------------------------------
   Compounds in the related row have multiple size variants. Show the
   starting price (lowest variant) prefixed with a mono caps "From" label
   so customers know it's a starting price, not a fixed price.

   PHP integration: in the related-products card template (loop/price.php
   or a custom .related .price wrapper), output:
       <span class="price">
         <span class="price-from-label">From</span>
         <span class="woocommerce-Price-amount amount">
           <bdi>$<lowest_price></bdi>
         </span>
       </span>
   Use $product->get_variation_price('min') for the lowest variant.
   -------------------------------------------------------------------------- */
.related.products li.product .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    /* Override the desktop card .price grid-card treatment — related-card
       price is just a small inline label + amount, not a card. */
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}
.related.products li.product .price .price-from-label {
    /* The summary-block "Starting from" label is hidden on mobile (§6).
       For the related card we WANT a small mono caps "From" prefix —
       override the display:none from the summary rule with a more
       specific selector. */
    display: inline-block !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    margin: 0 !important;
    line-height: 1 !important;
    grid-column: auto !important;
}
.related.products li.product .price .woocommerce-Price-amount {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    letter-spacing: -0.005em !important;
}


/* --------------------------------------------------------------------------
   14. Sticky bottom action bar — primary CTA on mobile.
   --------------------------------------------------------------------------
   The bar hides off-screen by default (transform: translateY(100%) is set
   on the base .sticky-cart-bar rule in the desktop sheet). When the main
   in-page add-to-cart form scrolls out of view, the page's IntersectionObserver
   adds `.visible` to slide the bar up. When the main CTA scrolls back into
   view, `.visible` is removed and the bar slides back down.

   This rule only restyles the OPEN-state appearance and the inner layout;
   the show/hide animation is inherited from the desktop base rule.
   -------------------------------------------------------------------------- */
.sticky-cart-bar {
    box-shadow: 0 -2px 16px rgba(11, 11, 13, .08);
    /* Honor iOS safe-area inset. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-cart-bar__inner {
    padding: 10px 16px;
    gap: 12px;
    align-items: stretch;
}
.sticky-cart-bar__name,
.sticky-cart-bar__size {
    display: none;
}
.sticky-cart-bar__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 17px;
    line-height: 1.1;
}
.sticky-cart-bar__price::before {
    content: "From";
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 2px;
    font-weight: 400;
}
.sticky-cart-bar__btn {
    flex: 1;
    font-size: 11px !important;
    letter-spacing: .22em !important;
    padding: 14px 18px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* --------------------------------------------------------------------------
   15. WooCommerce notices / variation messages
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    margin: 0 20px 16px;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    color: var(--ink);
}


/* --------------------------------------------------------------------------
   16. Misc: hide the SKU/meta block on mobile (the 9.5px caps text is
   illegible on a phone), kill the desktop wishlist row width.
   -------------------------------------------------------------------------- */
.product_meta {
    display: none;
}



/* --------------------------------------------------------------------------
   17. FORM CHILD ORDERING — fix WC variations form rendering order.
   --------------------------------------------------------------------------
   WC outputs the variations <table> (containing the <select>) BEFORE the
   .size-selector wrapper that holds the "Select size" label. Visually we
   want: label → select → qty+button row. Set form.cart to flex column and
   use `order` to reorder the three children:
     1) .size-selector (the label wrapper)
     2) .variations (the select)
     3) .single_variation_wrap (qty + add-to-cart row)
   This is mobile-only and does not affect the form's grid layout (which
   only governs the inner .woocommerce-variation-add-to-cart row).
   -------------------------------------------------------------------------- */
.woocommerce div.product form.cart,
form.cart {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    border: 0 !important;
    margin: 0 0 20px !important;
}
.woocommerce div.product form.cart > .size-selector,
form.cart > .size-selector { order: 1 !important; }
.woocommerce div.product form.cart > .variations,
form.cart > .variations { order: 2 !important; margin-bottom: 20px !important; }
.woocommerce div.product form.cart > .single_variation_wrap,
form.cart > .single_variation_wrap { order: 3 !important; }

/* The inner cart row keeps its bordered 56px grid layout. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
form.cart .woocommerce-variation-add-to-cart {
    display: grid !important;
    grid-template-columns: 132px 1fr !important;
    grid-template-rows: 56px !important;
    height: 56px;
    border: 1px solid var(--ink) !important;
    margin: 0 !important;
}



/* --------------------------------------------------------------------------
   18. Quick-specs grid override — undo legacy single-product.css rule that
   force-spans the 3rd cell across all columns. We want a clean 3-cell row.
   -------------------------------------------------------------------------- */
.product-quick-spec:nth-child(3),
.woocommerce div.product .product-quick-spec:nth-child(3) {
    grid-column: auto !important;
}


/* --------------------------------------------------------------------------
   19. SUMMARY FLEX — force flex column on .summary.entry-summary so that
   `order:` properties on its children actually take effect.

   Variable products receive a desktop-sheet rule like
   `.product-type-variable .summary.entry-summary { display: block }` (or
   inherit block from generic WC styles), which clobbers the mobile flex
   layout and causes children to render in source order regardless of any
   `order:` overrides. As a result, .product-quick-specs (which we want
   below the cart row via order:50) renders ABOVE form.cart on variable
   products.

   We list both product-type selectors explicitly to match desktop-sheet
   specificity (0,3,0), and use !important as belt-and-braces.
   -------------------------------------------------------------------------- */
.summary.entry-summary,
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product.product-type-simple .summary.entry-summary,
.woocommerce div.product.product-type-variable .summary.entry-summary,
.woocommerce div.product.product-type-grouped .summary.entry-summary,
.woocommerce div.product.product-type-external .summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
}

/* --------------------------------------------------------------------------
   20. ASTRA PARENT PADDING — zero horizontal padding on .ast-article-single
   so the page content can extend edge-to-edge on mobile.

   Astra (and its woocommerce-grid sub-sheet) ships a tangle of conflicting
   padding rules on .ast-article-single — `5.34em 6.67em`, `2.5em`,
   `1.5em 1em`, `3.34em 2.4em`, `0` — that fight each other and end up
   inset by ~28px on the left at mobile width. This pushes the entire
   product summary AND the related-products carousel inward, preventing
   the related row from bleeding to the edges as the mock requires.

   We zero out horizontal padding on mobile so:
     - .related.products goes edge-to-edge (it has no inner padding)
     - .summary keeps its OWN 20px padding for inner content gutter
     - .gallery stays centered via its existing margin:auto

   Vertical padding (top/bottom) is left alone so the section spacing
   above and below the article shell is preserved.
   -------------------------------------------------------------------------- */
.ast-article-single,
.ast-separate-container .ast-article-single,
body.single-product .ast-separate-container .ast-article-single,
body.single-product.ast-separate-container .ast-article-single {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* --------------------------------------------------------------------------
   21. RELATED PRODUCTS H2 — restore the 20px left gutter on the section
   header label.

   The desktop sheet single-product.css ships a higher-specificity rule
   ".woocommerce div.product .related.products > h2" (specificity 0,1,3)
   that resets margin to "0 0 24px" and zeroes padding, beating our
   simpler ".related.products > h2" rule from §13. The visible result is
   that "Related products" sits flush to the left edge of the screen on
   mobile, getting cut by the device safe-area.

   We match the desktop sheet's specificity with our own qualified
   selectors so the mobile gutter wins inside @media (max-width: 720px).
   -------------------------------------------------------------------------- */
.woocommerce div.product .related.products > h2,
section.related.products > h2,
section.related.products > h2:first-child,
.related-products-section h2 {
    margin: 0 20px 14px !important;
    padding: 0 !important;
}


/* --------------------------------------------------------------------------
   22. DOCUMENTS PANEL HEADER — restore "CoA / Documents +" accordion label.

   The desktop sheet (single-product.css) ships a duplicate rule with
   `content: "Available documentation" !important` on the
   .woocommerce-Tabs-panel--aitrixa_documents::before pseudo-element.
   `!important` beats our mobile §13 rule on specificity, so the live
   mobile header reads "AVAILABLE DOCUMENTATION" with no "+" indicator
   instead of "CoA / Documents +" as the mock requires.

   We override with `!important` and bump specificity by including the
   parent .woocommerce-tabs class. The base text is "CoA / Documents +"
   in the collapsed state; when JS adds .is-open the closing rule swaps
   it for "CoA / Documents −".
   -------------------------------------------------------------------------- */
.woocommerce-tabs .woocommerce-Tabs-panel--aitrixa_documents::before,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents::before,
.woocommerce-Tabs-panel--aitrixa_documents::before {
    content: "CoA / Documents +" !important;
}
.woocommerce-tabs .woocommerce-Tabs-panel--aitrixa_documents.is-open::before,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents.is-open::before,
.woocommerce-Tabs-panel--aitrixa_documents.is-open::before {
    content: "CoA / Documents \2212" !important;
}


/* --------------------------------------------------------------------------
   23. DOCUMENTS HEADER STYLE — match the mock's ::before typography
   (mock CSS §11, lines 603-615 of aitrixa-product-mobile-v2.css).

   The desktop sheet single-product.css ships two duplicate rules on
   .woocommerce-Tabs-panel--aitrixa_documents::before that set:
     - color: var(--mute, #6b6d73)  (muted gray, should be ink)
     - font-size: 12px !important   (should be 10.5px)
     - padding-bottom: 12px !important  (should be 0; total padding 18px 20px)
   These !important flags beat our generic mobile §13 rule. Override here
   with the same specificity selector AND !important on every property
   the desktop sheet sets, so the mock typography wins on mobile.

   Plus: WooCommerce ships .woocommerce-js div.product .woocommerce-tabs
   { margin: 4em } in woocommerce-grid.min.css, creating ~58px of white
   space below the collapsed panel before the related-products section.
   Mock has no gap — panel flows straight into related products. Zero it.
   -------------------------------------------------------------------------- */
.woocommerce-Tabs-panel--aitrixa_documents::before,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents::before,
.woocommerce-tabs .woocommerce-Tabs-panel--aitrixa_documents::before {
    color: var(--ink) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    padding: 18px 20px !important;
    margin: 0 !important;
}

/* Kill the 4em bottom margin WooCommerce puts on .woocommerce-tabs so the
   collapsed accordion flows straight into the related-products section. */
.woocommerce-js div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce .woocommerce-tabs {
    margin: 0 !important;
}


/* --------------------------------------------------------------------------
   24. WC ADD-TO-CART NOTICE — mobile-optimized layout.

   WooCommerce's default .woocommerce-message has:
     - padding: 1em 2em 1em 3.5em   (huge left pad to clear ::before icon)
     - ::before checkmark absolutely positioned at left:16.5px / top:11px
     - a.button.wc-forward floated right

   At 396px viewport the left pad gets stripped by §15's padding:12px 14px,
   but the WC ::before checkmark stays absolute-positioned and overlaps the
   first character of the message. The floated "View cart" button then wraps
   awkwardly below at full width.

   Fix: flex layout for the notice with a custom inline checkmark prefix,
   the message text in the middle, and a compact "View cart" pill on the
   right. Hide WC's default ::before so we can place a clean one ourselves.

   Desktop is untouched — these rules live inside @media (max-width: 720px)
   and the desktop sheet does not style .woocommerce-message anyway.
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    display: grid !important;
    grid-template-columns: 14px 1fr !important;
    grid-auto-rows: auto !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: start !important;
    padding: 14px 16px !important;
    margin: 12px 20px 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    background: var(--panel) !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Repurpose WC ::before: instead of being absolutely positioned (which
   overlaps message text once we strip the huge left padding), render it
   as a clean inline flex item --- a small ink SVG checkmark at the
   start of the row. */
.woocommerce-notices-wrapper .woocommerce-message::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0b0d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8 7,12 13,4'/></svg>") center/14px no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message a.wc-forward,
.woocommerce-notices-wrapper .woocommerce-info a.button {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 18px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-info a.button:hover {
    background: var(--ink-2, #1c1d20) !important;
    color: var(--white) !important;
}



/* --------------------------------------------------------------------------
   25. SIZE-SELECTOR LABEL GAP --- tighten the space between the
   "SELECT SIZE" label and the dropdown beneath it.

   Mock spec (mobile sheet sect10, lines 362-369): .size-selector has no
   bottom margin; the only gap between the label and the dropdown is the
   label's own 10px margin-bottom. On the live site the gap measures
   ~30px because .size-selector { margin: 0 0 20px } (from sect10) adds
   20px after the label-only wrapper, before WC's .variations table
   that contains the actual <select>.

   Fix: zero the .size-selector bottom margin on mobile so the dropdown
   sits 10px below the label (label margin-bottom alone controls the gap).
   The wrapper still has the existing 20px below the dropdown (provided
   by .variations { margin-bottom: 20px } from sect17), so spacing to
   the add-to-cart row underneath is unchanged.
   -------------------------------------------------------------------------- */
.size-selector,
.woocommerce div.product form.cart .size-selector {
    margin-bottom: 0 !important;
}

} /* end @media (max-width: 720px) */