/* ==========================================================================
   mobile.css — LS Fabrication child theme
   Enqueued by wp-content/mu-plugins/lsfab-mobile.php at priority 110,
   i.e. after every other theme sheet including absorbed.css.

   Selectors still carry a repeated class where they compete with an existing
   declaration, so the rules hold even if the load order is ever rearranged.
   See docs/theme-css-architecture.md for why that matters on this site.

     1. Horizontal overflow containment
     2. Product attribute tables
     3. Form controls (iOS focus zoom)
     4. Cart page
   ========================================================================== */


/* ==========================================================================
   1. HORIZONTAL OVERFLOW
   --------------------------------------------------------------------------
   absorbed.css draws the hairline either side of a .default-header heading:

       .default-header h2:after { position:absolute; width:1000%;
                                  left: calc(100% + 25px); }

   On a phone that pseudo-element is ~2210px wide and hangs off the right of
   the heading, so every product page reported a document scroll width of
   2493px inside a 375px viewport — the sideways drag in Tay's recording.
   Desktop had it too (3416px inside 1905px), just less noticeably.

   The bleed is intentional: the hairline is meant to reach both edges of the
   screen. So rather than shortening it, clip at the section — which IS full
   width. The line looks identical and stops generating scroll.

   `overflow-x: clip` rather than `hidden` on purpose: clip does not create a
   scroll container, so any position:sticky inside these sections still works.
   ========================================================================== */

@supports (overflow: clip) {

  .et_pb_section:has(.default-header),
  .et-db #et-boc .et-l .et_pb_section:has(.default-header) {
    overflow-x: clip;
  }

  /* Safety net for anything that turns up later. A clip on the root element
     propagates to the viewport, so it cannot create a scroll container and
     cannot break sticky or fixed positioning the way overflow-x:hidden on
     body does. */
  html {
    overflow-x: clip;
  }
}

/* Browsers without :has() — keep the page undraggable even though the line
   then stops at the column edge instead of the screen edge. */
@supports not selector(:has(*)) {
  .default-header .et_pb_text_inner { overflow: hidden; }
}

/* Wide tables pasted into content scroll inside their own box rather than
   dragging the page with them. */
.et-db #et-boc .et-l .et_pb_text_inner > table:not(.shop_attributes),
.et-db #et-boc .et-l .et_pb_code_inner > table,
.woocommerce-product-details__short-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   2. PRODUCT ATTRIBUTE TABLES
   --------------------------------------------------------------------------
   css/woocommerce.css sets

       .divi-ecommerce-woo-tabs.et_pb_tabs table…shop_attributes th
           { width: 42% }

   with no media query. WooCommerce's own woocommerce-smallscreen.css stacks
   th and td to display:block below 768px but does not reset that width, so
   the label ends up in a 42%-wide grey box with dead space beside it and the
   value lands underneath at full width. That is the broken table in the
   recording.

   Below 981px each row becomes a labelled block instead, and linked terms
   become chips. The commas between terms are bare text nodes, so font-size:0
   on a <p> that contains term links collapses them while the links keep
   their own size; rows whose value is plain text (Weight, Product Types)
   never match that selector and are left alone.
   ========================================================================== */

@media (max-width: 980px) {

  .woocommerce table.shop_attributes.shop_attributes {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 4px;
    border: 0;
  }

  .woocommerce table.shop_attributes.shop_attributes tbody {
    display: block;
    width: 100%;
  }

  .woocommerce table.shop_attributes.shop_attributes tr {
    display: block;
    width: 100%;
    padding: 15px 0 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: none;
  }

  .woocommerce table.shop_attributes.shop_attributes tr:first-child { padding-top: 4px; }
  .woocommerce table.shop_attributes.shop_attributes tr:last-child  { border-bottom: 0; }

  /* The label. Full width, no box, nothing beside it. */
  .woocommerce table.shop_attributes.shop_attributes th {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 0 9px;
    border: 0;
    background: none;
    text-align: left;
    font-size: var(--ls-caption);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  .woocommerce table.shop_attributes.shop_attributes td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: var(--ls-body);
    line-height: var(--ls-leading-body);
    color: #fff;
  }

  .woocommerce table.shop_attributes.shop_attributes td p { margin: 0; padding: 0; }

  /* Collapse the ", " text nodes between term links. */
  @supports selector(:has(*)) {
    .woocommerce table.shop_attributes.shop_attributes td p:has(> a[rel~="tag"]) {
      margin: -3px;
      font-size: var(--ls-body);
      line-height: var(--ls-leading-body);
    }
  }

  .woocommerce table.shop_attributes.shop_attributes td a[rel~="tag"] {
    display: inline-block;
    margin: 3px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--ls-small);
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .woocommerce table.shop_attributes.shop_attributes td a[rel~="tag"]:hover,
  .woocommerce table.shop_attributes.shop_attributes td a[rel~="tag"]:focus-visible {
    border-color: #ff0044;
    background: rgba(255, 0, 68, 0.14);
    color: #fff;
  }

  .woocommerce table.shop_attributes.shop_attributes td a[rel~="tag"]:focus-visible {
    outline: 2px solid #ff0044;
    outline-offset: 2px;
  }

  .woocommerce .woocommerce-Tabs-panel > h2 {
    margin: 0 0 14px;
    font-size: var(--ls-h3);
    line-height: var(--ls-leading-h3);
  }

  /* ------------------------------------------------------------------
     Long term lists. mobile.js wraps any value with more than 14 chips
     in .ls-attr-clip and appends the toggle; Truck Year on most products
     is 53 chips, about eleven rows on a phone. Without the JS every chip
     just stays visible, which is the pre-existing behaviour.
     ------------------------------------------------------------------ */

  .ls-attr-clip {
    position: relative;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .ls-attr-collapsed > .ls-attr-clip { max-height: 128px; }

  .ls-attr-collapsed > .ls-attr-clip::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0), #111);
    pointer-events: none;
  }

  .ls-attr-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 6px 0 0;
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: var(--ls-small);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: #ff0044;
    cursor: pointer;
  }

  .ls-attr-toggle:focus-visible { outline: 2px solid #ff0044; outline-offset: 2px; }
}


/* ==========================================================================
   3. FORM CONTROLS
   --------------------------------------------------------------------------
   iOS Safari zooms the page in when a text field smaller than 16px takes
   focus, and does not zoom back out. The header search sits at 13.5px, the
   quantity box at 14px and the review email at 14px, so tapping any of them
   left the viewer stranded at 1.2x. 16px is the threshold, not a preference.
   ========================================================================== */

@media (max-width: 980px) {

  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="url"],
  .woocommerce input[type="password"],
  .woocommerce input[type="search"],
  .woocommerce input[type="number"],
  .woocommerce select,
  .woocommerce textarea,
  body input[type="text"],
  body input[type="email"],
  body input[type="tel"],
  body input[type="url"],
  body input[type="password"],
  body input[type="search"],
  body input[type="number"],
  body select,
  body textarea {
    font-size: var(--ls-body);
  }

  /* Four fields are pinned harder than a plain element selector can reach:
     css/header.css locks the header search to 0.84375rem !important at
     (1,6,2), css/footer.css the newsletter field, the reviews plugin the
     review email at (0,3,0), and the upsellator plugin .btn-qty at (0,2,0)
     with !important. Each gets an explicit override rather than a blanket
     one — this is a functional fix, not a type-scale opinion, so it is
     deliberately narrow. */
  body.et-db #et-boc .et-l--header.et-l--header .ls-header__search .ls-search.ls-search input,
  body .ls-f-signup__form.ls-f-signup__form input,
  body .cr-review-form-ne .cr-review-form-txt.cr-review-form-txt,
  body input.product-search-field.product-search-field,
  body input.product-search-filter-price-field.product-search-filter-price-field,
  body .chosen-container .chosen-search input.chosen-search-input {
    font-size: var(--ls-body) !important;
  }

  /* The quantity spinner is only 25px wide; 16px type needs a little room. */
  body .quantity.quantity input.qty {
    min-width: 44px;
    text-align: center;
  }

  /* The admin bar is not part of the storefront and its own 13px is correct. */
  #wpadminbar input,
  #wpadminbar select,
  #wpadminbar textarea { font-size: 13px; }
}


/* ==========================================================================
   4. CART PAGE
   --------------------------------------------------------------------------
   Two problems, both only below 981px.

   (a) The J Cart upsell card is `display:flex; flex-wrap:nowrap`. Its data
       column takes the full 255px, which squeezes the .options column that
       holds BUY NOW to zero width — the button then paints on top of the
       upsell copy. Stacking the card fixes it without touching the plugin.

   (b) WooCommerce's small-screen sheet floats a ::before label left and sets
       text-align:right on every cell, so a long product name wraps into a
       ragged right-aligned block beside the word "Product:". Each row is a
       card instead: thumbnail and name on their own lines, then label/value
       pairs. Scoped to body.woocommerce-cart so the slide-out drawer, which
       shares some of these class names, is left as it is.
   ========================================================================== */

@media (max-width: 980px) {


  /* ---- (b) cart line items ---- */

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item,
  body.woocommerce-cart .woocommerce-page table.shop_table_responsive tr.cart_item {
    position: relative;
    display: block;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td,
  body.woocommerce-cart .woocommerce-page table.shop_table_responsive tr.cart_item td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td::before,
  body.woocommerce-cart .woocommerce-page table.shop_table_responsive tr.cart_item td::before {
    float: none;
    flex: 0 0 auto;
    font-size: var(--ls-caption);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  /* Bring the thumbnail back and give the name its own full-width line. */
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail {
    display: block;
    padding: 0 0 12px;
    border-bottom: 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail::before { content: none; }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail img {
    width: 84px;
    height: auto;
    border-radius: 8px;
  }

  /* woocommerce-smallscreen.css sets text-align:right !important on every
     cell, which is why a long product name wrapped into a ragged
     right-aligned block. Matching !important is the only way past it. */
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-name {
    display: block;
    padding: 0 44px 12px 0;
    text-align: left !important;
    font-size: var(--ls-body);
    line-height: var(--ls-leading-snug);
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail {
    text-align: left !important;
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-name::before { content: none; }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-name a {
    font-weight: 600;
    color: #fff;
  }

  /* The remove cross becomes a corner control instead of a row with a
     stray ": " label of its own. */
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 40px;
    padding: 0;
    border-bottom: 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-remove::before { content: none; }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-subtotal {
    border-bottom: 0;
    padding-bottom: 0;
    font-weight: 600;
    color: #fff;
  }

  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td.product-quantity .quantity { margin: 0; }
}

/* ==========================================================================
   5. HOME PAGE SIGNUP BUTTON
   --------------------------------------------------------------------------
   The "Join the Chevolution" Divi signup module: Divi gives
   .et_pb_newsletter_button `width: 100%`, but the button is a flex item whose
   `min-width: auto` floors it at its min-content size — and the label,
   "Get 10% off Sheet metal products", does not wrap. So the button measured
   331px inside a 265px form and ran 12px off the right of a 375px screen.

   The only overflow on the site that was not the .default-header hairline.
   ========================================================================== */

@media (max-width: 980px) {

  .et_pb_newsletter_form .et_pb_newsletter_button_wrap {
    min-width: 0;
    max-width: 100%;
  }

  .et_pb_newsletter_form .et_pb_newsletter_button.et_pb_button {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}


/* ==========================================================================
   6. CART PAGE — TOTALS AND ACTIONS BELOW 981px
   --------------------------------------------------------------------------
   Section 4b above turned each line item into a card. Two things below it
   were left as tables and measured badly at 386px:

   (a) The actions row. The line-item cards run x=38..333; the actions <td>
       landed at x=43..324, so the coupon block sat 5px in on the left and 9px
       in on the right of the cards directly above it.

   (b) The totals table keeps `th { width: 38% }` from woocommerce.css
       section 4, which is right at 1200px and wrong at 386px: it left
       "SHIPMENT 1" alone in a 110px column while two shipping options and a
       destination line were crushed into the 190px beside it. Rows stack.
   ========================================================================== */

@media (max-width: 980px) {

  /* ---- (a) actions row lines up with the cards above it ---- */

  /* The table still sized itself to its widest cell, and with the coupon row
     on one line that min-content came to 407px inside a 297px form — the cart
     scrolled sideways. thead is already display:none here and every row is
     already display:block (section 4b), so blockifying the table costs no
     layout and gives the flex row a width to shrink against. */
  body.woocommerce-cart .woocommerce table.shop_table.cart,
  body.woocommerce-cart .woocommerce table.shop_table.cart tbody,
  body.woocommerce-cart .woocommerce-page table.shop_table.cart,
  body.woocommerce-cart .woocommerce-page table.shop_table.cart tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  /* The <tr> is what was holding the actions row 5px in from the cards above
     it: Divi's generated Theme Builder sheet carries
     `table.cart td { padding: .857em .287em !important }` and the responsive
     table hands that to the row as well. !important on both, matching it. */
  body.woocommerce-cart .woocommerce table.shop_table.cart tbody > tr:has(> td.actions),
  body.woocommerce-cart .woocommerce-page table.shop_table.cart tbody > tr:has(> td.actions) {
    display: block;
    padding: 0 !important;
    margin: 0;
    border: 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions,
  body.woocommerce-cart .woocommerce-page table.shop_table.cart td.actions {
    display: block;
    margin: 0;
    padding: 16px !important;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart tr.actions-row td.actions::before,
  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions::before { content: none; }

  /* Field, Apply, Update: three full-width rows on one 12px rhythm.
     Measured before settling on this: the inner width of the actions card at
     390px is 263px, and "APPLY COUPON" at 14px with the button tracking has a
     min-content width of about 157px — which leaves the coupon field 98px.
     Putting the two on one line fits, but a 98px field is not a field you can
     read a coupon code in, so they stack. The alignment was the defect here,
     not the stacking. */
  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon {
    display: block;
    margin: 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    display: block;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon .button {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.actions > .button {
    display: flex !important;
    width: 100% !important;
    margin: 0;
  }

  /* Same rhythm, same height. The field was 40px and both buttons 50px, and
     "Update cart" carried a stray 25px top margin — all three from
     absorbed.css's `.woocommerce button.button { margin-top: 25px !important }`,
     a rule written for the single-product add to cart that matches every Woo
     button on the site. Three stacked full-width controls at three different
     heights is what the column reads as wrong. 48px is the standard control
     height here and a comfortable tap target; the gaps are the same 12px the
     rest of this cell uses.

     The id is not decoration: components.css sizes buttons through
     `.et-db #et-boc .et-l .woocommerce button.button`, and an id beats any
     number of classes however late this sheet loads. Note `.et-db` is on the
     BODY element, so it compounds onto body.woocommerce-cart — it is not a
     descendant, and writing it as one matches nothing. */
  /* WooCommerce core leaves a 5px bottom margin on .coupon, which turned the
     one gap in this stack that should have been 12px into 17px. */
  body.woocommerce-cart.et-db #et-boc .et-l .woocommerce table.shop_table.cart td.actions .coupon {
    margin: 0 !important;
  }
  body.woocommerce-cart.et-db #et-boc .et-l .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    height: var(--ls-control-h) !important;
    min-height: var(--ls-control-h) !important;
    line-height: var(--ls-control-h) !important;
    margin: 0 0 12px !important;
  }
  body.woocommerce-cart.et-db #et-boc .et-l .woocommerce table.shop_table.cart td.actions .coupon .button,
  body.woocommerce-cart.et-db #et-boc .et-l .woocommerce table.shop_table.cart td.actions > .button {
    height: var(--ls-control-h) !important;
    min-height: var(--ls-control-h) !important;
    line-height: 1 !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  body.woocommerce-cart.et-db #et-boc .et-l .woocommerce table.shop_table.cart td.actions > .button:last-of-type {
    margin-bottom: 0 !important;
  }

  /* ---- (b) totals rows stack ---- */

  /* woocommerce-smallscreen.css prints the column heading a second time as a
     floated td::before and sets `text-align: right !important` on the cell.
     In the line-item table that is the whole point (section 4b uses those
     labels as the PRICE / QUANTITY / SUBTOTAL captions). In the totals table
     the row already has a real <th>, so the ::before rendered the label twice
     — "SHIPMENT 1" above "Shipment 1:" — and its float pushed the first
     shipping option out of line with the second. Matching !important is the
     only way past a rule that carries it. */
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table td::before,
  body.woocommerce-cart .woocommerce-page .cart_totals table.shop_table td::before {
    content: none !important;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
    display: block;
    width: auto;
    text-align: left !important;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table th {
    padding: 12px 0 4px;
    border-bottom: 0;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
    padding: 0 0 12px;
  }

  /* Subtotal and total stay as label/value pairs — they are one short line
     each and reading them down two rows is worse, not better. */
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.cart-subtotal,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.cart-subtotal th,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total th,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.cart-subtotal td,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.cart-subtotal td,
  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td {
    text-align: right !important;
  }

  body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td .amount {
    font-size: var(--ls-price-total);
  }

  /* The destination line and Change address were right-aligned under the
     options, which put them on their own ragged edge. */
  body.woocommerce-cart .woocommerce .woocommerce-shipping-destination,
  body.woocommerce-cart .woocommerce .shipping-calculator-button {
    display: block;
    text-align: left !important;
  }

  body.woocommerce-cart .woocommerce .shipping-calculator-button { margin-top: 8px; }
}


/* ==========================================================================
   7. CHECKOUT BELOW 981px
   --------------------------------------------------------------------------
   The order review is still a two-column table at 386px. Measured: the
   product-name column resolved to about 120px, so "Altman Easy Hood Latch -
   67-72 Ford F-100 Truck" wrapped over four lines beside a one-line price,
   and each shipping option wrapped over two inside a 190px cell.

   Same treatment as the cart totals: label above value, full width, and the
   short money rows kept as pairs.
   ========================================================================== */

@media (max-width: 980px) {

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead { display: none; }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.cart_item,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.cart-subtotal,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
    flex: 1 1 auto;
    text-align: left !important;
    line-height: 1.4;
  }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.cart_item td.product-total,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.cart-subtotal td,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right !important;
  }

  /* Shipping is the row that needed it most: the label goes above and the
     options get the full width of the card. */
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    display: block;
    width: auto;
    text-align: left !important;
  }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    padding: 12px 0 8px;
    border-bottom: 0;
  }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    padding: 0 0 12px;
  }

  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td .amount { font-size: var(--ls-price-total); }

  /* The card panel and the bot check both have fixed-width children that
     overflowed a 386px viewport by a few pixels. */
  body.woocommerce-checkout .woocommerce #payment fieldset#wc-ppcp-credit-card-gateway-cc-form,
  body.woocommerce-checkout .woocommerce #payment .cf-turnstile,
  body.woocommerce-checkout .woocommerce #payment .cf-turnstile iframe {
    max-width: 100%;
  }

  /* The gateway logo can go under the label rather than force the row to
     scroll on the narrowest phones. */
  body.woocommerce-checkout .woocommerce #payment ul.wc_payment_methods li label {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* The checkout order review has real <th> cells too, so the smallscreen
   ::before captions duplicate them there in exactly the same way. Section 7
   above stacks those rows; this stops the label printing twice inside them. */
@media (max-width: 980px) {
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td::before {
    content: none !important;
  }
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td,
  body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    text-align: left !important;
  }
}


/* ==========================================================================
   8. TAP TARGETS — 44px MINIMUM
   ==========================================================================
   WCAG 2.5.5 asks for a 44x44 CSS-pixel pointer target. This site had no
   global rule for it. A sweep at 390px on 6 Sep 2026 found 71 controls under
   44px on the shop archive, 34 in the checkout, 30 in the cart and 19 on a
   product page — but they were not 100+ separate mistakes. Three families
   repeat everywhere:

     1. a 40px icon/button size — header icons, catalogue card buttons,
        pagination, the sort select, the cart steppers, the footer social row
     2. 22-34px drawer controls — fixed in ls-cart/assets/css/frontend.css,
        which owns that component; nothing for them here
     3. inline text controls at 17-25px — "Clear", "Change address", the
        review-count link, the breadcrumb, the footer phone and email

   TWO TECHNIQUES, AND THEY ARE NOT INTERCHANGEABLE:

     - An element that owns its own box gets a real min-height/min-width of
       var(--ls-tap). It grows by a few pixels and the layout absorbs it.
     - An INLINE text link gets vertical PADDING instead. Padding on an inline
       box does not contribute to line height, so the hit area reaches 44px
       while the page does not move a single pixel. This is deliberate on the
       product summary column and the variations table, whose 22px rhythm was
       measured by hand — swapping those for min-height would break it.

   Padding is kept at 12px so an expanded box never reaches into the control
   below it and starts stealing its taps; every gap it sits in is 22px or more.

   SCOPED TO <=980px ON PURPOSE. Desktop is a mouse — WCAG 2.5.8 asks 24px
   there and every one of these already clears it — and the desktop layouts in
   this theme were measured to the pixel. Nothing below needs to disturb them.

   This sheet is enqueued at priority 110 by inc/lsfab-mobile.php, after every
   theme sheet and after absorbed.css (100), so a plain selector already wins a
   same-specificity tie on source order. !important and the repeated Divi scope
   appear below only where the rule being beaten carries !important itself.
   ========================================================================== */

:root { --ls-tap: 44px; }

@media (max-width: 980px) {

  /* --- Header: search, cart and burger were all 40px squares ------------- */
  body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__icon,
  body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__burger,
  body.et-db #et-boc .et-l--header.et-l--header .ls-header .ls-header__stoggle,
  .et-l--header .ls-header .ls-header__icon,
  .et-l--header .ls-header .ls-header__burger,
  .et-l--header .ls-header .ls-header__stoggle {
    width: var(--ls-tap);
    height: var(--ls-tap);
  }

  /* The Account / Cart pills in the foot of the mobile drawer. Everything
     else in that drawer already measured 44px or more. */
  body.et-db #et-boc .et-l--header.et-l--header .ls-drawer__foot .ls-drawer__row a,
  .et-l--header .ls-drawer__foot .ls-drawer__row a {
    min-height: var(--ls-tap);
  }

  /* --- Breadcrumb ------------------------------------------------------- */
  .woocommerce .woocommerce-breadcrumb a,
  .et-db #et-boc .et-l .woocommerce-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* --- Shop archive ----------------------------------------------------- */
  /* Catalogue card buttons are handled in shop-mobile.css, which owns the
     phone card and states its height with !important. */

  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ls-tap);
    min-height: var(--ls-tap);
  }

  .woocommerce .woocommerce-ordering select.orderby,
  .et-db #et-boc .et-l .woocommerce .woocommerce-ordering select.orderby {
    min-height: var(--ls-tap);
  }

  /* WooCommerce Product Search (itthinx) department and filter lists. */
  .product-attribute.product-search-filter-items .attribute-item a,
  .product-search-filter-items .attribute-item a {
    display: flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* The era chip row under the category "About" block. Its CSS lives in an
     inline code module inside Divi layout 459878, which renders in the BODY
     and therefore wins source order against every head sheet — hence the
     !important here rather than a specificity bump. */
  .ls-catabout .ls-catabout__chips a,
  .ls-catabout__rel .ls-catabout__chips a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--ls-tap) !important;
  }

  /* --- Product page ----------------------------------------------------- */
  /* Inline links inside the summary column: padding only, so the 22px module
     rhythm measured in [[product-tabs]] is untouched. */
  .woocommerce div.product .woocommerce-review-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* The reset link's hit area moved into section 17f of woocommerce.css when
     UX-07 relocated the link into the attribute label row (2026-09-07). It now
     uses padding cancelled by an equal negative margin, which gives the same
     "costs nothing in flow" result as the old overlay AND keeps the tall band
     out of the option card below it -- a 44px overlay centred on a link that
     now sits 8px above a card would have stolen taps from the card's top edge.
     Verify with document.elementFromPoint(), not getBoundingClientRect(). */

  /* Iconic WooThumbs gallery: the thumbnail strip arrows are 16px wide. */
  .iconic-woothumbs-thumbnails__control {
    min-width: var(--ls-tap);
  }

  /* --- Cart ------------------------------------------------------------- */
  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
    width: var(--ls-tap);
    height: var(--ls-tap);
  }

  /* The stepper states 40px with !important at (1,5,1) in woocommerce.css so
     the component layer cannot blow it out to a full-width button. Same
     selector, later sheet, so this wins the tie. */
  .et-db #et-boc .et-l .woocommerce .quantity.ls-qty button.ls-qty-btn,
  .woocommerce .quantity.ls-qty button.ls-qty-btn {
    width: var(--ls-tap) !important;
    min-width: var(--ls-tap) !important;
    min-height: var(--ls-tap) !important;
  }

  .woocommerce .quantity.ls-qty .ls-qty-btn {
    width: var(--ls-tap);
    height: var(--ls-tap);
  }

  body .quantity.quantity input.qty {
    min-height: var(--ls-tap);
  }

  .woocommerce .quantity.ls-qty input.qty {
    width: 52px;
  }

  .woocommerce .shipping-calculator-button,
  .woocommerce a.shipping-calculator-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* LS Upsell's "Add" buttons and card titles, on the cart and the PDP. */
  .lsups-btn {
    min-height: var(--ls-tap);
  }

  .lsups-card__title {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* --- Cart and checkout: radio and checkbox rows ----------------------- */
  /* The input itself is 18-20px and cannot carry the whole target; the LABEL
     is what a shopper aims at. Shipping labels are inline, so they take
     padding and the row does not move. Payment labels are already flex (see
     section 7), so they take a min-height instead. */
  .woocommerce ul#shipping_method li label,
  .woocommerce-checkout ul#shipping_method li label {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.woocommerce-checkout .woocommerce #payment ul.wc_payment_methods li label {
    align-items: center;
    min-height: var(--ls-tap);
  }

  .woocommerce ul#shipping_method li input[type="radio"],
  body.woocommerce-checkout .woocommerce #payment ul.wc_payment_methods li input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  .woocommerce form.checkout label.woocommerce-form__label-for-checkbox,
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  .woocommerce form.checkout input.woocommerce-form__input-checkbox,
  .woocommerce-checkout input.woocommerce-form__input-checkbox {
    width: 22px;
    height: 22px;
  }

  /* The slim checkout bar's logo is the only way back to the site from the
     distraction-free template. The bar is 57px tall, so 44 fits inside it. */
  .ls-co-bar__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* --- Small buttons and the footer ------------------------------------- */
  /* components.css sizes .ls-btn--sm from --ls-btn-h-sm (40px) with
     !important; home.css then pins its line-height. Both are earlier sheets,
     so an !important at equal weight here takes it. */
  .ls-btn--sm {
    min-height: var(--ls-tap) !important;
  }

  .ls-f-social a {
    min-width: var(--ls-tap);
    min-height: var(--ls-tap);
  }

  /* Phone and email in the footer NAP block. These sit on their own lines, so
     inline padding would make the two hit areas overlap and each would steal
     taps from the other — they get a real box instead. */
  p.ls-f-nap a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }
}

/* --- 8b. Second pass, same day --------------------------------------------
   Found by re-measuring at 390px after the first pass shipped. Five targets
   the sweep only surfaced once the noisy ones were out of the way. */

@media (max-width: 980px) {

  /* The mobile header logo is a 50x26 mark and the anchor around it was 20px
     tall. It is the "back to the top of the site" tap on every page. */
  body.et-db #et-boc .et-l--header.et-l--header .ls-header__logo a,
  .et-l--header .ls-header__logo a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* The WooThumbs strip control came out 44x42.4 — wide enough after 8a,
     1.6px short on height. */
  .iconic-woothumbs-thumbnails__control {
    min-height: var(--ls-tap);
  }

  /* "View all →" on the homepage era and best-seller tiles. */
  .ls-tile-more a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* The distraction-free checkout has its own slim footer (inc/lsfab-checkout
     -focus.php), so it does not carry .ls-f-nap and was missed by 8a. */
  .ls-co-foot__group a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ls-tap);
  }

  /* The shipping radio took the height from 8a but not the width — something
     earlier states width on input[type=radio] more specifically. The label is
     the real target either way; this just makes the dot match the payment
     radios, which did take it. */
  .woocommerce ul#shipping_method li input.shipping_method[type="radio"],
  .woocommerce-checkout ul#shipping_method li input.shipping_method[type="radio"] {
    width: 22px;
    height: 22px;
  }
}