/*
 * Brant Bio — mobile corrections
 *
 * These rules were section 11 of the theme's assets/css/v2.css. They live
 * here instead because a theme redeploy overwrites the theme directory and
 * has already destroyed this work once (section 12 of brant.css, 2026-09-10).
 * wp-content/plugins/ is not part of the theme package, so a redeploy cannot
 * touch it. This is the only copy — v2.css carries a pointer comment.
 *
 * Loaded by brant-mobile-css.php with a dependency on the "brant-v2" handle,
 * so it prints after every theme stylesheet and plain selectors win ties.
 * Audited at 390x844 and 412x915 across 15 pages.
 */

/* ── 11. Mobile corrections ────────────────────────────────────────── */
/* Add to the Contents block at the top of this file when convenient.
   Folded in from Additional CSS on 2026-09-10 so there is one copy of
   these rules, in the theme, and not two.

   The file's rule is that mobile lives at the end of each block. These
   do not: they patch chrome that v2 did not author — the pre-v2
   certificates table, core's details/summary, WooCommerce's account
   form — so there is no block to put them at the end of. Anything here
   that later gets a v2 component of its own should move up into it.

   This section is LAST in the file and v2.css is the last stylesheet the
   page loads, so plain selectors win ties without !important. The one
   exception is flagged where it occurs.

   v2 already handles the big things on a phone: no page scrolls
   sideways, the catalog is two columns, the nav panel opens at 53px
   rows, the consent bar is a thin strip. What follows is hit areas,
   a few type sizes, and the certificates table. Audited at 390x844
   and 412x915.

     11.1 Certificates table - rows become cards
     11.2 Touch targets
     11.3 Readable minimums */

/* -- 11.1 Certificates table ---------------------------------------- */
/* The certificates page still uses the pre-v2 table. Four columns in
   350px break every lot number into three stacked fragments ("BR-" /
   "2609-" / "0645") across 44 rows, on the page the whole trust
   argument rests on. Below 700px each row becomes a labelled card.
   Labels are generated from column position, so they assume the table
   stays Compound | Lot | Purity | Certificate. */
@media (max-width: 700px) {
    .brant-table-scroll { overflow-x: visible; }
    .brant-table-scroll .brant-table,
    .brant-table-scroll .brant-table tbody { display: block; width: 100%; }
    .brant-table-scroll .brant-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .brant-table-scroll .brant-table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        padding-block: 6px 14px;
        border-bottom: 1px solid var(--wp--preset--color--divider);
    }
    .brant-table-scroll .brant-table tr:last-child { border-bottom: 0; }
    .brant-table-scroll .brant-table td { border: 0; padding: 0; overflow-wrap: normal; }
    .brant-table-scroll .brant-table td:first-child {
        flex: 1 0 100%;
        font-family: var(--wp--preset--font-family--heading);
        font-weight: 600;
        font-size: 17px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .brant-table-scroll .brant-table td:first-child a {
        display: flex;
        align-items: center;
        min-height: 44px;
        text-decoration: none;
    }
    .brant-table-scroll .brant-table td:nth-child(n+2) {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
    }
    .brant-table-scroll .brant-table td:nth-child(n+2)::before {
        font-family: var(--wp--preset--font-family--body);
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--wp--preset--color--neutral-600);
    }
    .brant-table-scroll .brant-table td:nth-child(2)::before { content: "Lot"; }
    .brant-table-scroll .brant-table td:nth-child(3)::before { content: "Purity"; }
    .brant-table-scroll .brant-table td:nth-child(4)::before { content: "Certificate"; }
    .brant-table-scroll .brant-table tbody tr:hover { background: none; }
}

/* -- 11.2 Touch targets --------------------------------------------- */
/* v2's own controls already clear 44px; these are the ones it inherited. */
@media (max-width: 900px) {
    .brant-footer2__col { gap: 0; }
    .brant-footer2__col a,
    .brant-sec__link { display: inline-flex; align-items: center; min-height: 44px; }
    /* Accordions: the padding sat on the wrapper, so the row looked
       tappable while the actual target was 22px of text. */
    .wp-block-details { padding-block: 0; }
    .wp-block-details summary { padding-block: 14px; }
    .wp-block-details > :not(summary) { padding-bottom: 14px; }
    /* WooCommerce account form. */
    .woocommerce form .form-row input[type="checkbox"],
    .woocommerce-form__input-checkbox { width: 20px; height: 20px; }
    /* Woo's eye icon is a 22px absolutely-positioned button. Grow the hit
       area around it without moving the glyph. !important is required
       here: Woo's own selector is more specific than this one. */
    .show-password-input { padding: 11px !important; margin: -11px !important; }
    /* Inline links in running copy get a real target without breaking the
       line - "Look it up", email addresses, cross-references, lot numbers. */
    main p a,
    main li a,
    .brant-sec p a,
    .brant-hero2__lot a,
    .brant-spec-sheet td a { padding-block: 6px; }
    .brant-hero2__lot a,
    .brant-spec-sheet td a { display: inline-block; }
    .brant-nav__brand { padding-block: 6px; }
    .brant-consent__text a { display: inline-block; padding-block: 4px; }
}

/* -- 11.3 Readable minimums ----------------------------------------- */
@media (max-width: 640px) {
    /* 9px is not a font size on a phone; 10px with the mono's wide
       letterforms still fits the two-column card. */
    .brant-pc__top,
    .brant-pc__badge { font-size: 10px; }
    /* Pre-v2 chrome on the legal and certificates pages. */
    .brant-kicker { font-size: 11px; }
    .brant-size__s { font-size: 11px; }
}

/* -- 11.4 Two-column card fit ---------------------------------------- */
/* At 390px each catalog card is 189px wide, .brant-pc__top is a nowrap flex
   row, and its spans carry white-space: nowrap, so a longer stock string
   ("Low · 8 left") beside a "Best seller" badge runs 7px past the card's
   right edge. It fits at 412px, which is why it was missed. Let the row wrap
   instead of overflow; it only wraps on the cards that need it. */
@media (max-width: 400px) {
    .brant-pc__top { flex-wrap: wrap; row-gap: 4px; }
}

/* -- 11.5 Category chip --------------------------------------------- */
/* 23px, one pixel under the WCAG 2.2 AA minimum (2.5.8). It sits beside the
   stock line in the product header, so it gets the pixel rather than the
   44px AAA target, which would unbalance that row. */
@media (max-width: 900px) {
    .brant-tag2 { min-height: 24px; }
}