/* ==========================================================================
   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,
  .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 4px;
    border: 0;
  }

  .woocommerce table.shop_attributes.shop_attributes tbody,
  .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes tbody {
    display: block;
    width: 100%;
  }

  .woocommerce table.shop_attributes.shop_attributes tr,
  .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-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,
  .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes th {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 0 9px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  .woocommerce table.shop_attributes.shop_attributes td,
  .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 15px;
    line-height: 1.55;
    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: 0;
      line-height: 0;
    }
  }

  .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: 14px;
    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: 20px;
    line-height: 1.25;
  }

  /* ------------------------------------------------------------------
     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: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    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: 16px;
  }

  /* 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 .wc-timeline-product.wc-timeline-product input.btn-qty,
  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: 16px !important;
  }

  /* The quantity spinner is only 25px wide; 16px type needs a little room. */
  body .wc-timeline-product.wc-timeline-product input.btn-qty,
  body input.btn-qty,
  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) {

  /* ---- (a) upsell card ---- */

  body.woocommerce-cart .wc-j-items-carousel-inner article.wc-timeline-product.upsell {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .wc-timeline-product-data {
    flex: 1 1 100%;
    min-width: 0;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .options {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .options > * { width: 100%; }

  body.woocommerce-cart .wc-timeline-product.upsell .options .wc-timeline-button {
    width: 100%;
    justify-content: center;
  }

  /* The copy column is pinned narrow by the plugin's desktop layout; with the
     card stacked it can use the whole width of the slide. */
  body.woocommerce-cart .wc-timeline-product.upsell .heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .upsell-text,
  body.woocommerce-cart .wc-timeline-product.upsell .upsell-heading {
    width: auto;
    max-width: none;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .upsell-text {
    font-size: 13px;
    line-height: 1.45;
  }

  body.woocommerce-cart .wc-timeline-product.upsell .upsell-heading {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  /* ---- (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: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    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: 16px;
    line-height: 1.4;
  }

  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;
  }
}