/* ============================================================================
   LS FABRICATION — WOOCOMMERCE
   Shop archive, single product, cart, checkout, account.
   Everything here consumes tokens from style.css and components from
   components.css. No color literals below this line.
   ========================================================================= */

/* ============================================================================
   1. SHOP ARCHIVE
   ========================================================================= */

.woocommerce ul.products {
    display: grid;
    gap: var(--ls-space-6) var(--ls-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products:before,
.woocommerce ul.products:after { display: none; }

/* Divi sets product columns with percentage widths and margins. A grid gives
   equal-height cards without the flex gymnastics the old overrides needed. */
body.product-columns-4 ul.products { grid-template-columns: repeat(4, 1fr); }
body.product-columns-3 ul.products { grid-template-columns: repeat(3, 1fr); }

.woocommerce ul.products li.product,
.et-db #et-boc .et-l .woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    transition: border-color var(--ls-transition), transform var(--ls-transition);
}
.woocommerce ul.products li.product:hover { border-color: var(--ls-hairline-strong); }

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
}

/* Divi wraps the loop image in .et_shop_image and hangs a hover overlay off
   it. The overlay ("Shop Now" pill, or the magnifier it was overridden to)
   is not generated by this theme at all, so there is nothing to hide. */
.woocommerce ul.products li.product .et_shop_image {
    position: relative;
    margin: 0 0 var(--ls-space-4);
    border: none;
    border-bottom: var(--ls-card-line-h) solid transparent;
    border-image: var(--ls-gradient-brand) 1;
    overflow: hidden;
}
.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
    flex-grow: 1;
    margin: 0;
    padding: 0 var(--ls-space-4) var(--ls-space-3);
    font-family: var(--ls-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ls-text);
}

.woocommerce ul.products li.product .price {
    display: block;
    padding: 0 var(--ls-space-4);
    margin: 0 0 var(--ls-space-3);
    font-family: var(--ls-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ls-text);
}
.woocommerce ul.products li.product .price del {
    margin-right: var(--ls-space-2);
    color: var(--ls-text-ghost);
    font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
    background: none;
    color: var(--ls-text);
    text-decoration: none;
}

/* Divi's style-static.min.css ships
       .woocommerce .products .star-rating { margin: 4px 0 .3em !important }
   at (0,2,0). Without a matching `!important` the stars lose the card's 16px
   inset and hang off the left edge, tight against the price -- visible on the
   related-products grid of every product page. */
.woocommerce ul.products li.product .star-rating {
    margin: 0 var(--ls-space-4) var(--ls-space-3) !important;
    font-size: 0.875em;
}
.woocommerce .star-rating span:before { color: #ffc700; }

.woocommerce ul.products li.product .button {
    margin: 0 var(--ls-space-4) var(--ls-space-4);
    width: calc(100% - (var(--ls-space-4) * 2));
}

/* Out of stock: the card stays legible, the action recedes. */
.woocommerce ul.products li.product.outofstock .button { opacity: 0.65; }

@media (max-width: 980px) {
    body.product-columns-4 ul.products,
    body.product-columns-3 ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body.product-columns-4 ul.products,
    body.product-columns-3 ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--ls-space-4) var(--ls-space-3); }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem; }
}

/* Divi prints per-breakpoint product widths into an inline <style> block using
   `!important` and a `:nth-child(n)` specificity bump, e.g.
       .woocommerce-page ul.products li.product:nth-child(n) { width: 28.333% !important }
   Those percentages are sized for its float layout and collapse the items to a
   fraction of their track once the list is a grid. Reclaiming the width has to
   happen at matching weight — hence the mirrored :nth-child(n) and !important.
   This is the only place in the theme that needs them. */
body.product-columns-4 ul.products li.product:nth-child(n),
body.product-columns-3 ul.products li.product:nth-child(n) {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* ============================================================================
   2. SINGLE PRODUCT
   ========================================================================= */

.woocommerce div.product .product_title { margin-bottom: var(--ls-space-3); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    margin-bottom: var(--ls-space-5);
    font-family: var(--ls-font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ls-text);
}

.woocommerce div.product form.cart { margin-bottom: var(--ls-space-6); }

.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: var(--ls-space-4);
    border: none;
    background: none;
}
.woocommerce div.product form.cart .variations tr { border: none; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
    display: block;
    width: 100%;
    padding: 0 0 var(--ls-space-3);
    background: none;
    border: none;
}
.woocommerce div.product form.cart .variations th.label label {
    margin-bottom: var(--ls-space-2);
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 400;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
}

/* ---------------------------------------------------------------------------
   PRODUCT TABS
   The tab strip is NOT WooCommerce markup. Divi's WooCommerce Tabs module
   (et_pb_wc_tabs, given module_class "divi-ecommerce-woo-tabs" in the Theme
   Builder) renders Divi tab chrome and only keeps Woo's tab-key classes on
   the <li>. So there is no .woocommerce-tabs, no ul.tabs and no li.active —
   the real hooks are:

       .divi-ecommerce-woo-tabs.et_pb_tabs
         > ul.et_pb_tabs_controls > li(.et_pb_tab_active) > a
         > .et_pb_all_tabs > .et_pb_tab > .et_pb_tab_content

   Colour, type and radii used to be hard-coded in the Theme Builder module
   (#7C00FF / #2b2b2b / #1C1C1C / 20px, plus three custom_css_tab boxes with
   !important). Those settings were cleared at source on 2026-08-31 so this
   block is the only authority — do not re-add them in the module or the
   inline Theme Builder CSS will outrank this file.

   Selectors double the class (.divi-ecommerce-woo-tabs.et_pb_tabs) purely to
   outweigh Divi's own .et_pb_tabs defaults, which paint the strip light grey.
   ------------------------------------------------------------------------ */

.divi-ecommerce-woo-tabs.et_pb_tabs {
    background-color: transparent;
    border: 0;
    margin-bottom: var(--ls-space-7);
}

/* --- the strip ---------------------------------------------------------- */

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-1);
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    list-style: none;
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls:before,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls:after {
    display: none;
}

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li {
    float: none;
    margin: 0;
    padding: 0;
    background-color: var(--ls-surface-2);
    border: 0;
    border-radius: var(--ls-radius-md) var(--ls-radius-md) 0 0;
    transition: background-color var(--ls-transition);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li a {
    display: block;
    padding: var(--ls-space-3) var(--ls-space-5);
    font-family: var(--ls-font-display);
    font-size: var(--ls-h5);           /* 18 */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-text-soft);
    transition: color var(--ls-transition);
}

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li:hover {
    background-color: var(--ls-surface-raised);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li:hover a {
    color: var(--ls-text);
}

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active:hover {
    background-color: var(--ls-purple);
}
/* Divi's style-static.min.css ships `.et_pb_tab_active a { color:#333!important }`,
   so the active label needs !important here or it renders dark grey on purple. */
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a:hover {
    color: var(--ls-text) !important;
}

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li a:focus-visible {
    outline: none;
    box-shadow: var(--ls-focus-ring);
    border-radius: var(--ls-radius-sm);
}

/* The panel is a keyboard stop.
   product-tabs.js gives a panel tabindex="0" when it holds nothing focusable
   of its own — Description does, the specs table and the reviews list do not —
   so a keyboard reader can scroll it. The theme clears outlines site-wide, so
   without this the focus lands somewhere invisible, which is a worse outcome
   than not being focusable at all. Radius matches .et_pb_all_tabs. */
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab:focus-visible {
    outline: none;
    box-shadow: var(--ls-focus-ring);
    border-radius: 0 var(--ls-radius-lg) var(--ls-radius-lg) var(--ls-radius-lg);
}

/* --- the panel ---------------------------------------------------------- */

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_all_tabs {
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: 0 var(--ls-radius-lg) var(--ls-radius-lg) var(--ls-radius-lg);
}

.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab {
    padding: var(--ls-space-6);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content {
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    line-height: var(--ls-leading-body);
    color: var(--ls-text-muted);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h1,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h2,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h3,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h4,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h5,
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content h6 {
    font-family: var(--ls-font-display);
    font-weight: 700;
    line-height: var(--ls-leading-snug);
    color: var(--ls-text);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content a {
    color: var(--ls-red);
}
.divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab_content a:hover {
    color: var(--ls-red-hover);
}

/* Woo's attributes table inside the compatibility tab.
   Selectors name table.woocommerce-product-attributes.shop_attributes so they
   outweigh WooCommerce's own `.woocommerce table.shop_attributes th` (0,3,1),
   which otherwise wins on padding. The Additional CSS also carries a bare
   `th { color:#fff !important }`, hence the !important on the label colour. */
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes {
    width: 100%;
    margin: 0;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes th,
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes td {
    padding: var(--ls-space-3) var(--ls-space-4);
    border: 0;
    border-bottom: 1px solid var(--ls-hairline-faint);
    text-align: left;
    vertical-align: top;
}
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes tr:last-child th,
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes tr:last-child td {
    border-bottom: 0;
}
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes th {
    width: 34%;
    background-color: var(--ls-surface-2);
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 600;
    font-style: normal;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint) !important;
}
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes td,
.divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes td p {
    margin: 0;
    font-style: normal;
    color: var(--ls-text);
}

/* --- tablet / phone ----------------------------------------------------- */

@media (max-width: 980px) {
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li a {
        padding: var(--ls-space-3) var(--ls-space-4);
        font-size: var(--ls-h6);       /* 16 */
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab {
        padding: var(--ls-space-5);
    }
}

@media (max-width: 767px) {
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls {
        margin-bottom: var(--ls-space-2);
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li {
        flex: 1 1 100%;
        border-radius: var(--ls-radius-md);
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tabs_controls li a {
        /* Flex rather than block purely to hold the 44px tap target without
           padding the label off-centre. Measured 375x43 before -- one pixel
           short, which is the sort of miss that only a measurement finds. */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        text-align: center;
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_all_tabs {
        border-radius: var(--ls-radius-lg);
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs .et_pb_tab {
        padding: var(--ls-space-4);
    }
    .divi-ecommerce-woo-tabs.et_pb_tabs table.woocommerce-product-attributes.shop_attributes th {
        width: 42%;
    }
}

/* ============================================================================
   3. QUANTITY STEPPER
   Shared by cart and single product.
   ========================================================================= */

.woocommerce .quantity,
.woocommerce div.product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    overflow: hidden;
}
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
    width: 64px;
    min-height: var(--ls-control-h-sm);
    padding: 0 var(--ls-space-2);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--ls-text);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce .quantity input.qty:focus { box-shadow: none; }
.woocommerce .quantity:focus-within {
    border-color: var(--ls-red);
    box-shadow: var(--ls-focus-ring);
}

/* ============================================================================
   4. CART
   ========================================================================= */

/* The cart table becomes a card. Its header row is the only place the eyebrow
   treatment appears at table scale, which is what makes the columns readable
   without heavy rules between them. */
.woocommerce table.shop_table.cart { margin-bottom: var(--ls-space-5); }

.woocommerce table.shop_table.cart td.product-remove { width: 52px; text-align: center; }
.woocommerce table.shop_table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: transparent;
    border: 1px solid var(--ls-hairline);
    border-radius: 50%;
    color: var(--ls-text-faint);
    font-size: 1.125rem;
    line-height: 1;
    transition: background-color var(--ls-transition), border-color var(--ls-transition),
                color var(--ls-transition);
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
    background-color: var(--ls-red);
    border-color: var(--ls-red);
    color: #ffffff;
}

.woocommerce table.shop_table.cart td.product-thumbnail { width: 92px; }
.woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--ls-radius-md);
    border: 1px solid var(--ls-hairline-faint);
}

.woocommerce table.shop_table.cart td.product-name a {
    font-family: var(--ls-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ls-text);
}
.woocommerce table.shop_table.cart td.product-name a:hover { color: var(--ls-red); }
.woocommerce table.shop_table.cart td.product-name .variation {
    margin: var(--ls-space-1) 0 0;
    font-size: var(--ls-small);
    color: var(--ls-text-soft);
}

.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal {
    font-variant-numeric: tabular-nums;
    color: var(--ls-text);
}
.woocommerce table.shop_table.cart td.product-subtotal { font-weight: 600; }

/* The actions row: coupon on the left, update on the right, on one line.
   The old build stacked them full-width because a global rule forced
   `width: 100%` on every button on the site.

   DO NOT put `display: flex` on this cell. It carries colspan="6", and a
   flex container is no longer a table cell — the colspan is dropped and the
   cell collapses to the width of column 1. That was 327px of a 1200px table:
   the coupon field, a two-line "Apply coupon" and a full-width "Update cart"
   all crushed into one column. Worse, because the cell's content then sized
   column 1, the 52px "remove" column was dragged out to 327px too, which is
   what pushed every product photo and title into the middle of the table.

   The row is laid out with floats instead, which leaves the cell a cell. */
.woocommerce table.shop_table.cart td.actions {
    display: table-cell;
    padding: var(--ls-space-4);
    background-color: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--ls-hairline);
    text-align: right;
    vertical-align: middle;
}
.woocommerce table.shop_table.cart td.actions:after {
    content: "";
    display: table;
    clear: both;
}
.woocommerce table.shop_table.cart td.actions .coupon {
    float: left;
    display: flex;
    align-items: center;
    gap: var(--ls-space-2);
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
}
.woocommerce table.shop_table.cart td.actions .coupon label { display: none; }
.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    width: 190px;
    min-height: var(--ls-btn-h-sm);
    margin: 0;
    float: none;
}
/* Button size and shape come from the component layer (.ls-btn--sm names the
   cart actions row), so nothing about them is restated here. */

/* --- Cart totals --------------------------------------------------------- */
.woocommerce .cart-collaterals .cart_totals {
    position: relative;
    width: 100%;
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    float: none;
}
.woocommerce .cart-collaterals .cart_totals:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--ls-card-line-h);
    background-image: var(--ls-gradient-ui);
    border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
}
.woocommerce .cart_totals h2 {
    margin: 0 0 var(--ls-space-4);
    font-size: 1.25rem;
    font-weight: 600;
}
.woocommerce .cart_totals table.shop_table {
    background: none;
    border: none;
    border-radius: 0;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    padding: var(--ls-space-3) 0;
    background: none;
    border-bottom: 1px solid var(--ls-hairline-faint);
    vertical-align: top;
}
.woocommerce .cart_totals table.shop_table th { width: 38%; }
.woocommerce .cart_totals table.shop_table td { text-align: right; color: var(--ls-text); }
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
    border-bottom: none;
    padding-top: var(--ls-space-4);
}
.woocommerce .cart_totals table.shop_table tr.order-total td .amount {
    font-family: var(--ls-font-body);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--ls-text);
}

/* Shipping choices read as selectable rows, not a bare radio list. */
.woocommerce ul#shipping_method,
.woocommerce-checkout-review-order-table ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.woocommerce ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: var(--ls-space-2);
    margin: 0 0 var(--ls-space-2);
    padding: var(--ls-space-3);
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-md);
    font-size: var(--ls-small);
    color: var(--ls-text-muted);
    transition: border-color var(--ls-transition), background-color var(--ls-transition);
}
.woocommerce ul#shipping_method li:hover { border-color: var(--ls-hairline); }
.woocommerce ul#shipping_method li:has(input:checked) {
    border-color: var(--ls-red);
    background-color: rgba(255, 0, 68, 0.06);
}
.woocommerce ul#shipping_method li label { margin: 0; cursor: pointer; }
.woocommerce ul#shipping_method .amount { color: var(--ls-text); font-weight: 600; }

.woocommerce .woocommerce-shipping-destination { margin: var(--ls-space-2) 0 0; font-size: var(--ls-small); color: var(--ls-text-soft); }
.woocommerce .shipping-calculator-button { font-size: var(--ls-small); }

.woocommerce .wc-proceed-to-checkout { padding: var(--ls-space-4) 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { margin-bottom: var(--ls-space-3); }

/* --- Empty cart ---------------------------------------------------------- */
.woocommerce .empty-cart {
    padding: var(--ls-space-8) var(--ls-space-5);
    text-align: center;
}
.woocommerce .empty-cart h1 { margin-bottom: var(--ls-space-3); font-size: var(--ls-h2); }
.woocommerce .empty-cart p { color: var(--ls-text-soft); }

@media (max-width: 980px) {
    .woocommerce table.shop_table.cart td.actions { text-align: left; }
    .woocommerce table.shop_table.cart td.actions .coupon {
        float: none;
        flex-wrap: wrap;
        margin-bottom: var(--ls-space-3);
    }
    .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code { flex: 1 1 auto; width: auto; }
    .woocommerce table.shop_table.cart td.actions .coupon .button,
    .woocommerce table.shop_table.cart td.actions > .button { width: 100%; }
    .woocommerce table.shop_table.cart td.actions > .button { margin-left: 0; }
}

/* ============================================================================
   5. CHECKOUT
   ========================================================================= */

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--ls-space-5); }
.woocommerce-checkout form.checkout_coupon {
    margin: 0 0 var(--ls-space-5);
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}

/* Billing and shipping each get their own panel so the form has structure
   instead of running as one long column. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    margin-bottom: var(--ls-space-5);
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    margin: 0 0 var(--ls-space-4);
    font-size: 1.25rem;
    font-weight: 600;
}
.woocommerce-checkout #ship-to-different-address {
    display: flex;
    align-items: center;
    margin: 0 0 var(--ls-space-4);
}
.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: var(--ls-space-2);
    margin: 0;
    font-size: 1.25rem;
    cursor: pointer;
}

.woocommerce form .form-row { margin: 0 0 var(--ls-space-4); padding: 0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48.5%; overflow: visible; }

/* --- Order review -------------------------------------------------------- */
.woocommerce-checkout #order_review_heading {
    margin: 0 0 var(--ls-space-4);
    font-size: 1.25rem;
    font-weight: 600;
}
.woocommerce-checkout #order_review {
    position: relative;
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce-checkout #order_review:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--ls-card-line-h);
    background-image: var(--ls-gradient-ui);
    border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
    background: none;
    border: none;
    border-radius: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    padding: var(--ls-space-3) 0;
    background: none;
    border-bottom: 1px solid var(--ls-hairline-faint);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td { text-align: right; color: var(--ls-text); }
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name { text-align: left; color: var(--ls-text-muted); }
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td { border-bottom: none; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .amount {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--ls-text);
}

/* --- Payment ------------------------------------------------------------- */
.woocommerce-checkout #payment {
    margin-top: var(--ls-space-5);
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    color: var(--ls-text-muted);
}
.woocommerce-checkout #payment ul.wc_payment_methods {
    margin: 0;
    padding: var(--ls-space-4);
    border-bottom: 1px solid var(--ls-hairline);
    list-style: none;
}
.woocommerce-checkout #payment ul.wc_payment_methods li {
    margin: 0 0 var(--ls-space-2);
    padding: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.wc_payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    font-size: var(--ls-body);
    color: var(--ls-text);
    cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
    margin: var(--ls-space-3) 0 0;
    padding: var(--ls-space-4);
    background-color: var(--ls-surface-3);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-muted);
    font-size: var(--ls-small);
}
.woocommerce-checkout #payment div.payment_box:before { display: none; }
.woocommerce-checkout #payment .place-order { padding: var(--ls-space-4); margin: 0; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--ls-space-4); }

@media (max-width: 980px) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last { width: 100%; }
}

/* ============================================================================
   6. MY ACCOUNT
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 24%;
    margin-right: 4%;
    padding: var(--ls-space-4);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 0 var(--ls-space-1);
    padding: 0;
    list-style: none;
    border: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--ls-space-3) var(--ls-space-3);
    border-radius: var(--ls-radius-md);
    font-family: var(--ls-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ls-text-muted);
    transition: background-color var(--ls-transition), color var(--ls-transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--ls-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: rgba(255, 0, 68, 0.12);
    color: var(--ls-red);
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 72%;
    padding: var(--ls-space-6);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }

/* Addresses side by side, each in its own panel. */
.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: var(--ls-space-5); }
.woocommerce-account .woocommerce-Address {
    flex: 1 1 260px;
    width: auto;
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
}
.woocommerce-account .woocommerce-Address-title h3 { margin: 0 0 var(--ls-space-3); font-size: var(--ls-h5); }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: var(--ls-leading-body); }

/* Login / register, shown when logged out. */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--ls-space-6);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { margin: var(--ls-space-3) 0; }

@media (max-width: 980px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--ls-space-5);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ls-space-1);
    }
}

/* ============================================================================
   7. ORDER RECEIVED / VIEW ORDER
   ========================================================================= */

.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
    margin-bottom: var(--ls-space-6);
    padding: var(--ls-space-6);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woocommerce ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-5);
    margin: 0 0 var(--ls-space-6);
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    list-style: none;
}
.woocommerce ul.woocommerce-order-overview li {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-faint);
}
.woocommerce ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--ls-space-2);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ls-text);
}

/* ============================================================================
   8. SHOP SIDEBAR
   The widget area registered as `woocomerce-sidebar` (one m — the original
   theme's typo, carried forward so existing widget assignments survive).
   ========================================================================= */

#sidebar .et_pb_widget {
    position: relative;
    margin-bottom: var(--ls-space-5);
    padding: var(--ls-space-4) var(--ls-space-5) var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
/* No accent bar on these cards. --ls-red is the primary action colour, and
   the Year/Make/Model widget's own FIND MY PARTS button sits a few rows
   below the card's top edge in exactly that red — four stacked cards each
   wearing a red->coral stripe put decoration and action at the same weight,
   and in the narrow column the stripe reads as a divider floating in the gap
   rather than as the top of a card. The surface, hairline and radius carry
   the card on their own. Cart totals and checkout order review keep their
   stripe: one panel per page, marking the one that matters. */
#sidebar .et_pb_widget .widgettitle,
#sidebar .et_pb_widget h4 {
    margin: 0 0 var(--ls-space-3);
    padding: 0;
    font-family: var(--ls-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ls-text);
}

/* ============================================================================
   9. OUTRANKING lsfab.com's ADDITIONAL CSS — CATALOG CARD

   Two blocks in Appearance > Additional CSS were written to fight the OLD
   Divi Ecommerce child theme, and now fight this one instead. Divi minifies
   that CSS into et-divi-customizer-global.css and loads it after every theme
   sheet, with !important on nearly every declaration, so the card rules in
   section 1 lose to it:

     • `padding-right: 0 !important` on card titles, prices and star ratings.
       Text ends up inset 16px on the left and hard against the right edge —
       barely visible on a desktop card, obvious on a phone where the title
       wraps three or four times.

     • `width: 100% !important` on catalog add-to-cart buttons. That is 100%
       of the card, and the theme also gives the button 16px side margins, so
       it lands 32px wider than the card it sits in. `overflow: hidden` on the
       card clips the overhang, which is why the button looks cut off on the
       right and its label reads off-centre.

   Only those two declarations are restated, at a weight that wins: Divi's own
   scope supplies an ID, and `.instock` / `.outofstock` supply one class more
   than the Additional CSS selectors carry. Nothing here changes the card's
   layout or order — it only removes the overhang and puts the right-hand
   padding back.

   DELETE THIS SECTION once the Additional CSS is absorbed into the theme the
   way it was on staging. It is a workaround, not a design layer.
   ========================================================================= */

.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock .woocommerce-loop-product__title,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock h3,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock h3 {
    padding: 0 var(--ls-space-4) var(--ls-space-3) !important;
}

.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock .price,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock .price {
    padding: 0 var(--ls-space-4) !important;
}

.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock .star-rating,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock .star-rating {
    margin-left: var(--ls-space-4) !important;
    margin-right: var(--ls-space-4) !important;
    padding: 0 !important;
}

.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock .button,
.woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock .button {
    width: calc(100% - (var(--ls-space-4) * 2)) !important;
    max-width: calc(100% - (var(--ls-space-4) * 2)) !important;
}

/* ============================================================================
   10. PHONE — ONE CARD PER ROW

   Divi is set to `product-columns-mobile-2`, and section 1 followed it: two
   columns all the way down. On a 375px phone that leaves each card about
   169px wide, so a title like "Billet Dash Glove Box & Speaker Grille — 47-53
   GMC Chevy Truck" wraps four lines at 20px, the photo renders about 120px
   tall, and the add-to-cart button has ~137px of inner width. Everything is
   legible and everything is tiny.

   Below 600px the grid drops to a single column instead. Nothing between 481
   and 600 is a real device in portrait, so this is effectively the phone
   layout: full-bleed photo, title on one or two lines, a full-width button.
   ========================================================================= */

@media (max-width: 600px) {
    body.product-columns-4 ul.products,
    body.product-columns-3 ul.products,
    body.product-columns-2 ul.products,
    .et-db #et-boc .et-l body.product-columns-4 ul.products,
    .et-db #et-boc .et-l .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: var(--ls-space-5);
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.instock .woocommerce-loop-product__title,
    .woocommerce.et-db #et-boc .et-l .woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title {
        font-size: 1.375rem;
    }

    /* A full-width card gives the photo the whole viewport width, which is
       taller than it needs to be for a parts thumbnail. Cap it and let the
       image sit centred in the frame. */
    .woocommerce ul.products li.product .et_shop_image,
    .et-db #et-boc .et-l .woocommerce ul.products li.product .et_shop_image {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 320px;
        overflow: hidden;
    }
    .woocommerce ul.products li.product .et_shop_image img,
    .et-db #et-boc .et-l .woocommerce ul.products li.product .et_shop_image img {
        max-height: 320px;
        width: 100%;
        object-fit: contain;
    }
}

/* ============================================================================
   CHECKOUT — ORDER SUMMARY IN A RIGHT-HAND COLUMN

   WooCommerce ships the checkout as billing and shipping side by side with the
   order review full width underneath. This lays the form out as a grid instead:
   customer details on the left, "Your order" and the payment box on the right,
   which is the shape people expect from a modern checkout and keeps the total
   in view while the address is filled in.

   Below 981px the grid is off and everything stacks in source order.
   ========================================================================= */

@media (min-width: 981px) {
    .woocommerce-checkout form.checkout.woocommerce-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
        grid-template-areas:
            "msg     msg"
            "details heading"
            "details review";
        column-gap: var(--ls-space-6);
        align-items: start;
    }

    .woocommerce-checkout form.checkout > .wc_coupon_message_wrap { grid-area: msg; }
    .woocommerce-checkout form.checkout > #customer_details        { grid-area: details; }
    .woocommerce-checkout form.checkout > #order_review_heading    { grid-area: heading; margin-top: 0; }
    .woocommerce-checkout form.checkout > #order_review            { grid-area: review; }

    /* Billing and shipping stack down the left column rather than sitting in
       WooCommerce's two floated halves. */
    .woocommerce-checkout #customer_details.col2-set > .col-1,
    .woocommerce-checkout #customer_details.col2-set > .col-2 {
        float: none;
        width: 100%;
        margin: 0 0 var(--ls-space-5);
    }
}

/* ----------------------------------------------------------------------------
   Shipping address is opt-in

   `woocommerce_ship_to_different_address_checked` (functions.php) leaves the box
   unticked, so the shipping fields must start hidden. WooCommerce's own JS
   slideToggles them with an inline style once anything is clicked, and an inline
   style outranks this rule -- which is exactly right: this only governs the
   first paint, before any interaction.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-shipping-fields:not(:has(#ship-to-different-address-checkbox:checked)) .shipping_address {
    display: none;
}

/* ----------------------------------------------------------------------------
   One Place Order button

   PayPal Payments renders its own button for the card fields and hides
   WooCommerce's with `#place_order.ppcp-hidden { display: none !important }`.
   components.css carries `.et-db #et-boc .et-l .woocommerce button.button
   { display: inline-flex !important }` -- one ID and four classes, which
   outranks it, so both buttons showed. Restated above that weight.
   ------------------------------------------------------------------------- */

body.woocommerce-checkout #payment #place_order.ppcp-hidden {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   Terms line reads as a sentence, not a label
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* ============================================================================
   CROSS-SELLS, RELATED PRODUCTS AND UP-SELLS

   "You may be interested in…" on the cart and "People also ordered…" on a
   product page both render `ul.products` outside Divi's `body.product-columns-*`
   class -- which is the only place section 1 sets a track list. So the list got
   `display: grid` with no columns and collapsed to a single 1200px track: one
   card per row, images blown up to match.

   The same gap meant section 1's width reclaim never ran for these lists
   either, so Divi's `.woocommerce-page ul.products li.product:nth-child(n)
   { width: … !important }` percentages still squashed the cards on tablet and
   phone. Both are restated below, scoped to these three lists.

   The button rule is a third casualty of the same split: Appearance >
   Additional CSS forces `width: 100% !important` on the loop button, which
   fights the 16px side margins section 1 gives it and pushes the button 14px
   past the right edge of the card. Capping max-width lets the margins size it.
   ========================================================================= */

.woocommerce .cross-sells ul.products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
    grid-template-columns: repeat(3, 1fr);
}

.woocommerce .cross-sells ul.products li.product:nth-child(n),
.woocommerce .related ul.products li.product:nth-child(n),
.woocommerce .up-sells ul.products li.product:nth-child(n) {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

.woocommerce .cross-sells ul.products li.product .button,
.woocommerce .related ul.products li.product .button,
.woocommerce .up-sells ul.products li.product .button {
    /* max-width rather than width: Additional CSS reaches the button through
       `.woocommerce.et-db #et-boc .et-l ul.products li.product .button
       .add_to_cart_button` -- an ID and six classes -- so a width here loses.
       Nothing sets max-width, so this caps the 100% at whatever the margins
       leave and lands the button inside the card whatever its classes. */
    max-width: calc(100% - (var(--ls-space-4) * 2)) !important;
}

@media (max-width: 980px) {
    .woocommerce .cross-sells ul.products,
    .woocommerce .related ul.products,
    .woocommerce .up-sells ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .woocommerce .cross-sells ul.products,
    .woocommerce .related ul.products,
    .woocommerce .up-sells ul.products {
        gap: var(--ls-space-4) var(--ls-space-3);
    }
}

/* ============================================================================
   SINGLE PRODUCT — VARIATION DROPDOWNS

   These were unreadable: `select { background: var(--ls-surface-2) }` from
   components.css painted them near-black, while Divi's own
   `.woocommerce div.product form.cart .variations td select` set the text to a
   dark grey -- dark text on a dark field, so the selected option looked blank.

   White field, dark text, and a chevron of its own: Divi's module CSS zeroes
   the arrow the theme normally draws, so without this the control had no
   affordance at all. `!important` is needed because `.et-db #et-boc .et-l
   select` in components.css carries an ID and outranks any plain selector here.
   The border is deliberately left to Divi's module setting.
   ========================================================================= */

.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .variations td select {
    background-color: #ffffff !important;
    color: #1c1c1c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5L8 10.5 12 6.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
}

.woocommerce div.product form.cart .variations select option {
    background-color: #ffffff;
    color: #1c1c1c;
}

/* ============================================================================
   11. MOBILE FILTER SHEET
   The "Filter Products" panel on the shop and category archives. It is a Divi
   Theme Builder section (module_class `dl-slide-sidebar`) in body layout
   459878, disabled on desktop, slid in from the right by a jQuery handler in a
   hidden code module that toggles `.is-opened`.

   Rebuilt 31 Aug 2026 as a full-screen sheet to match the mobile menu drawer:
   edge to edge, a "FILTERS" bar with a 44px close, a scrolling body and a
   pinned SHOW RESULTS bar. The 420px drawer variant above 601px is gone — one
   behaviour at every width the panel exists at.

   ---------------------------------------------------------------------------
   STRUCTURE, and why it is this shape

   The sheet itself does NOT scroll. It is a fixed, non-scrolling box holding
   a static header row and an absolutely positioned body row that scrolls.

     .dl-slide-sidebar            position:fixed, overflow:hidden, no scroll
       > .et_pb_row  (first)      static, --ls-sheet-head tall — the top bar
           .dl-close              the X;  its ::after is the pinned bottom bar
       > .et_pb_row  (rest)       absolute, inset below the head, overflow:auto

   The first shot made the sheet the scroll container and pinned the top bar
   with `position: sticky` and the bottom bar with `position: fixed`. On an
   iPhone the bottom bar **scrolled with the content** — it sat wherever it had
   been left, halfway down the list. WebKit positions a `position: fixed`
   descendant of a transformed ancestor against that ancestor, and when the
   ancestor is also the scroll container the bar rides the scroll. `sticky` was
   fine, which is why the top bar looked correct and only the bottom one broke.

   Taking the scroll off the sheet removes the problem at the root: the bar is
   now `position: absolute` against a box that never scrolls. That is also why
   the header row and its column are forced `position: static` — Divi makes
   every column `position: relative`, and a positioned ancestor would capture
   the absolutely positioned bar instead of the sheet.

   Consequence to respect: `--ls-sheet-head` and the header row's height must
   stay equal, since the body row's `top` is measured from it.
   ---------------------------------------------------------------------------

   The Builder used to set min-height:100vh AND max-height:80vh on the section,
   plus overflow-y:scroll !important and 400px of bottom padding. Those were
   cleared on 2026-08-31 — do not put them back, this block owns the box.
   ========================================================================= */

/* Divi emits the section's own box from `body.et-db #page-container #et-boc
   .et-l .et_pb_section_2_tb_body` — inline in <head>, so it beats an external
   sheet at equal specificity. The box properties below therefore carry
   !important. `display` deliberately is NOT among them: the panel is hidden on
   desktop by Divi's `disabled_on`, and overriding display here would break that
   the same way the shared button rule once did. */
.dl-slide-sidebar {
    --ls-sheet-head: 60px;
    --ls-sheet-foot: 84px;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    background-color: var(--ls-surface-1) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* `top` used to be left to Divi so the admin bar was accounted for, but that
   left a strip of the page showing above the sheet for ordinary visitors. It
   is pinned to 0 here and given back only where the admin bar actually is. */
body.admin-bar .dl-slide-sidebar { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar .dl-slide-sidebar { top: 46px !important; }
}

/* The page behind must not scroll while the sheet is open — otherwise a swipe
   that runs past the end of the filters drags the archive underneath. Bounded
   to the widths the sheet exists at: the class can linger on desktop if the
   viewport is widened while it is open, and locking a desktop page nobody can
   unlock is worse than a stray class. */
@media (max-width: 980px) {
    body:has(.dl-slide-sidebar.is-opened) { overflow: hidden !important; }
}

/* Rows: Divi's default 80%/1200px leaves the widgets floating in the middle of
   the sheet, and each row carries its own custom_padding, which Divi emits as
   !important from `body.et-db #page-container #et-boc .et-l .et_pb_row_N_tb_body`
   — two ids, so no id-less selector can outrank it. These mirror that shape and
   add a class. */
body.et-db #page-container #et-boc .et-l .dl-slide-sidebar .et_pb_row,
.dl-slide-sidebar .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- the top bar ---------------------------------------------------------- */
/* Row 1 holds the close blurb and the LS logo image. It becomes the sheet's
   header: label left, close right, logo hidden — the site header is directly
   behind this sheet, nobody needs telling what site they are on.

   It stays in normal flow. Because the sheet does not scroll, in-flow is
   pinned, and leaving the row and its column unpositioned is what lets the
   bottom bar position against the sheet. */
body.et-db #page-container #et-boc .et-l .dl-slide-sidebar > .et_pb_row:first-of-type,
.dl-slide-sidebar > .et_pb_row:first-of-type {
    position: static !important;
    height: var(--ls-sheet-head) !important;
    padding: 0 var(--ls-space-4) !important;
    background-color: var(--ls-surface-1) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ls-hairline-faint) !important;
}

.dl-slide-sidebar > .et_pb_row:first-of-type > .et_pb_column {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.dl-slide-sidebar > .et_pb_row:first-of-type > .et_pb_column::before {
    content: "Filters";
    margin-right: auto;
    font-family: var(--ls-font-display);
    font-weight: 600;
    font-size: var(--ls-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ls-text-soft);
}

.dl-slide-sidebar .et_pb_image { display: none !important; }

/* Close button. Divi emits the blurb's position from a two-id selector, so the
   reset has to match that shape. */
body.et-db #page-container #et-boc .et-l .dl-slide-sidebar .dl-close,
.dl-slide-sidebar .dl-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    order: 2;
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border-radius: var(--ls-radius-md);
    background-color: var(--ls-red) !important;
    overflow: visible !important;
    cursor: pointer;
}
/* Divi paints the blurb's icon as its own small red square inside the button,
   which read as a box inside a box. The red moves to the button, the icon goes
   transparent, and the empty title/description container is removed so the
   glyph actually centres in the 44px target. */
.dl-slide-sidebar .dl-close .et_pb_blurb_container { display: none !important; }
.dl-slide-sidebar .dl-close .et-pb-icon {
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
}
.dl-slide-sidebar .dl-close .et_pb_blurb_content,
.dl-slide-sidebar .dl-close .et_pb_main_blurb_image,
.dl-slide-sidebar .dl-close .et_pb_image_wrap {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* The X glyph carries Divi's waypoint animation classes, and Divi's animation
   CSS holds `.et-waypoint:not(.et-animated)` at opacity 0 until its JS fires a
   scroll waypoint. Inside a fixed panel that waypoint may never fire, leaving
   an empty square where the close button should be. Pin it visible. */
.dl-slide-sidebar .dl-close .et-waypoint,
.dl-slide-sidebar .dl-close .et-pb-icon {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}
.dl-slide-sidebar .dl-close .et-pb-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--ls-text) !important;
}

/* --- the scrolling body --------------------------------------------------- */
/* Everything after the header row. Absolutely positioned so the sheet itself
   never scrolls, which is what keeps the pinned bar pinned on iOS. */

body.et-db #page-container #et-boc .et-l .dl-slide-sidebar > .et_pb_row:not(:first-of-type),
.dl-slide-sidebar > .et_pb_row:not(:first-of-type) {
    position: absolute !important;
    top: var(--ls-sheet-head) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--ls-sheet-foot) + env(safe-area-inset-bottom, 0px)) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ls-hairline-strong) transparent;
}
.dl-slide-sidebar > .et_pb_row:not(:first-of-type)::-webkit-scrollbar { width: 8px; }
.dl-slide-sidebar > .et_pb_row:not(:first-of-type)::-webkit-scrollbar-track { background: transparent; }
.dl-slide-sidebar > .et_pb_row:not(:first-of-type)::-webkit-scrollbar-thumb {
    background-color: var(--ls-hairline-strong);
    border-radius: var(--ls-radius-pill);
}

/* One flat list of groups separated by hairlines, rather than four bordered
   cards inside a bordered panel. */
/* `absorbed.css` sets `.widget_block { width: 90% !important }`, so every
   control in here — the search field, the three vehicle selects, FIND MY PARTS
   — sat 10% narrower than the SHOW RESULTS bar, which spans the sheet's own
   16px gutter. Full width plus the same 16px padding lines them all up. */
.dl-slide-sidebar .et_pb_widget,
.dl-slide-sidebar .widget_block {
    width: 100% !important;
    max-width: 100% !important;
}

.dl-slide-sidebar .et_pb_widget {
    margin: 0 !important;
    padding: var(--ls-space-3) var(--ls-space-4) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ls-hairline-faint) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.dl-slide-sidebar .et_pb_widget:last-child { border-bottom: 0 !important; }

/* The visible cards are the Product Search plugin's own containers, one level
   inside the widget. Flatten those, not the form controls they hold. */
.dl-slide-sidebar .product-search,
.dl-slide-sidebar .product-search-filter-terms,
.dl-slide-sidebar .product-search-filter-price,
.dl-slide-sidebar .widget-woo-vpf-ymm-filter {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dl-slide-sidebar .et_pb_widget h2,
.dl-slide-sidebar .et_pb_widget h3,
.dl-slide-sidebar .et_pb_widget h4,
.dl-slide-sidebar .widgettitle {
    font-family: var(--ls-font-display) !important;
    font-weight: 600 !important;
    font-size: var(--ls-small) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--ls-text-soft) !important;
    margin: 0 0 var(--ls-space-3) !important;
    padding: 0 !important;
}

/* Category links get a real tap target instead of body-copy line height. */
.dl-slide-sidebar .et_pb_widget ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.dl-slide-sidebar .et_pb_widget ul li { margin: 0 !important; padding: 0 !important; }
.dl-slide-sidebar .et_pb_widget ul li > a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: var(--ls-small);
    color: var(--ls-text-muted);
}
.dl-slide-sidebar .et_pb_widget ul li > a:hover { color: var(--ls-text); }

/* --- pinned "Show Results" bar -------------------------------------------- */
/* No new module and no new JS. The bar is the close blurb's own ::after.
   A click on a pseudo-element is dispatched to the element that owns it, so
   tapping this bar fires the existing `$('.dl-close').click()` handler that
   closes the sheet — the same handler the X at the top uses.

   `position: absolute`, not fixed: the header row and its column are forced
   static above, so the nearest positioned ancestor is the sheet, which never
   scrolls. See the structure note at the top for why fixed was wrong. */

.dl-slide-sidebar.is-opened .dl-close::after {
    content: "Show Results";
    position: absolute;
    left: var(--ls-space-4);
    right: var(--ls-space-4);
    bottom: calc(var(--ls-space-3) + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: var(--ls-radius-md);
    background-color: var(--ls-red);
    color: var(--ls-text);
    font-family: var(--ls-font-display);
    font-weight: 700;
    font-size: var(--ls-btn-font-sm);
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    box-shadow: var(--ls-shadow-drop);
    cursor: pointer;
}

/* Fade the filters out under the pinned bar instead of hard-cutting. */
.dl-slide-sidebar.is-opened::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--ls-sheet-foot) + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(to top, var(--ls-surface-1) 55%, transparent);
}

/* --- the toggle button ---------------------------------------------------- */

/* The label sat hard against the top of the button, not centred in it.
   `components.css` builds every button as `min-height` + centred flex with zero
   vertical padding — but its `display: inline-flex` is deliberately NOT
   !important, so that Divi's `disabled_on` (`display:none!important` at (0,1,0))
   can still hide buttons per breakpoint. Divi's own `.et_pb_button {
   display:inline-block }` therefore wins for Theme Builder buttons, the flex
   centring never applies, and a 16px line sits at the top of a 48px box.
   WooCommerce and plugin buttons are unaffected — components.css restates
   `display: inline-flex !important` for those selectors, which are never
   subject to disabled_on.

   Fixed here without touching `display`, by making the line box the full height
   of the button. Three ids to clear the `line-height: 1 !important` in
   components.css. This is a local patch: EVERY Divi Theme Builder button on the
   site has the same top-aligned label, and the real fix belongs in the button
   block in components.css — fold it in next time that file is being rewritten
   anyway. */
body.et-db #page-container#page-container #et-boc .et-l .et_pb_button.dl-btn-toggle {
    /* minus the 1px border top and bottom, so the button stays exactly
       --ls-btn-h tall rather than growing to 50px. Same shape components.css
       already uses for form controls. */
    line-height: calc(var(--ls-btn-h) - 2px) !important;
}

.dl-btn-toggle {
    margin-top: var(--ls-space-5);
    /* Uppercase at 0.12em tracking adds that space to the word gap too, so a
       two-word label reads as two separate blocks. Pull the gap back to match
       the letter rhythm. */
    word-spacing: -0.05em;
}
/* Divi's button glyph is positioned absolutely and does not survive the shared
   button's flex centring, so it renders as a gap rather than an icon. */
.dl-btn-toggle::after,
.dl-btn-toggle::before { display: none !important; }


/* --- archive result count / sorting row ----------------------------------- */
/* WooCommerce floats the count left and the sort select right. Below 768px
   there is not room for both on one line, so they overlap awkwardly under the
   filter button. Stack them instead. */

@media (max-width: 767px) {
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        float: none;
        width: 100%;
        margin: 0 0 var(--ls-space-3);
    }
    .woocommerce .woocommerce-ordering select {
        width: 100%;
    }
}

/* ============================================================================
   12. HOSTED CARD FIELDS (PayPal)

   The three inputs a customer types into are cross-origin PayPal iframes, held
   in `div[id^="zoid-paypal-card-"]` containers. Their white interior is not
   reachable from this sheet and never will be. Rather than fight that, the
   fields are GROUPED into one labelled block so the white reads as the
   deliberate secure area -- the pattern Stripe and Shopify use -- instead of
   three mismatched boxes floating on a dark form.

   NOTHING HERE TOUCHES A PAYPAL CODE PATH. Container, label and spacing only.

   Verified against the live checkout, 1 Sep 2026:

   - The zoid containers compute `border-radius: 0` yet the fields render with
     rounded corners, so the rounding is PayPal's own, from inside the iframe.
     Do NOT add a radius or `overflow: hidden` here; it is a no-op, and dead
     rules do not belong on a payment form.
   - Text colour inside the iframes is set by mu-plugins/lsfab-checkout-card-
     fields.php, which forces the three hidden template <input> elements dark so
     PayPal copies a dark `color` onto its white background. Without it the
     typing is invisible. LEAVE THAT PLUGIN ALONE.
   - absorbed.css carries no ppcp, credit-card or payment_box rules, so nothing
     loading after this sheet can outrank the block. No `!important` is used or
     needed: specificity alone beats the shared .payment_box rule in section 5
     (1,2,1) and the shared payment-method label rule (1,3,2).
   - The zoid container ids carry a random per-load uid suffix -- only the
     `zoid-paypal-card-` prefix is stable. Nothing below depends on them.
   - Section 5 already sets .form-row-first/.form-row-last to 100% below 980px,
     so expiry and CVV stack full width and this padding cannot squeeze them.
   - This file is served as `text/css` with NO charset, so the separator is a
     CSS escape, not a literal UTF-8 character.
   ========================================================================= */

/* Flatten this gateway's shared box so the fieldset below is the only frame.
   Scoped to the card gateway; the PayPal and Google Pay boxes are untouched. */
.woocommerce-checkout #payment li.payment_method_ppcp-credit-card-gateway div.payment_box {
    background-color: transparent;
    padding: var(--ls-space-1) 0 0;
    margin-top: var(--ls-space-2);
}

.woocommerce-checkout #payment #wc-ppcp-credit-card-gateway-cc-form {
    background-color: rgba(255, 255, 255, .045);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-md);
    padding: var(--ls-space-4);
    margin: var(--ls-space-3) 0 0;
}

.woocommerce-checkout #payment #wc-ppcp-credit-card-gateway-cc-form::before {
    content: "Card details \00b7\00a0secured by PayPal";
    display: block;
    font-family: var(--ls-font-display);
    font-weight: 600;
    font-size: var(--ls-micro);
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-text-soft);
    margin: 0 0 var(--ls-space-3);
}

.woocommerce-checkout #payment #wc-ppcp-credit-card-gateway-cc-form label {
    font-size: var(--ls-small);
    letter-spacing: var(--ls-tracking-button);
    color: var(--ls-text-muted);
    margin-bottom: var(--ls-space-1);
}

.woocommerce-checkout #payment #wc-ppcp-credit-card-gateway-cc-form p.form-row {
    margin-bottom: 0;
}
.woocommerce-checkout #payment #wc-ppcp-credit-card-gateway-cc-form p.form-row.form-row-wide {
    margin-bottom: var(--ls-space-3);
}


/* ============================================================================
   13. TAP TARGETS

   Five controls the 1 Sep probe sweep measured under the 44px minimum. None
   of them were broken; one of them was.

   ⚠️ THE CART CAROUSEL WAS ACTUALLY BROKEN, not just small. Its nav row is
   [prev][25 bullets][next]. The bullet strip is `flex-wrap: nowrap` with 25
   children that will not shrink far enough, so at 375px it measured 497px
   wide, ran 239px past the nav, squashed the prev arrow from 25px to 7px and
   pushed the next arrow to x=577 -- entirely off-screen. Both arrows were
   unreachable on a phone. The bullets are hidden below 980px rather than
   wrapped: 25 five-pixel bars wrap to five rows and are still not individually
   tappable, so they cost layout and buy nothing. Arrows plus swipe remain.
   Reversible in one line if the dots are wanted back.

   ⚠️ `height` DOES NOT TAKE on .wc-nav-prev / .wc-nav-next, not even with
   !important -- verified on live, the element stays 25px. `min-height` works.
   Do not "simplify" these to `height`.

   The gallery pager is a hit-area fix, not a visual one: the dots keep their
   10px look and gain a transparent 24x44 box on the <li>, which is where slick
   binds its click. The <ul> is absolutely positioned over the image, so the
   taller box costs no layout. Spacing goes 3px to 7px so the boxes abut at a
   24px pitch instead of overlapping -- overlapping targets are worse than
   small ones, because the wrong dot fires.

   24px, not 44px, is the bar for the gallery dots and the review expanders:
   WCAG 2.2 AA (2.5.8) asks for 24x24 or equivalent spacing, and both controls
   sit beside a larger alternative (swipe the gallery, tap the review body).
   Spending 34px of vertical layout to reach AAA on a decorative pager is a bad
   trade. The share row and the carousel arrows have no alternative, so those
   go to a full 44.
   ========================================================================= */

/* --- WooThumbs gallery pager, all widths -------------------------------- */

.iconic-woothumbs-images ul.slick-dots li {
    position: relative;
    margin: 0 7px;
}
.iconic-woothumbs-images ul.slick-dots li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* --- CusRev's "..." expanders in the reviews block, all widths ---------- */

.sb-expand-on-click {
    min-width: 24px;
}

@media (max-width: 980px) {

    /* --- SHARE THIS BUILD row --------------------------------------------
       ls-social is token-driven, so the size class is the way in rather than
       fighting its rules: .lssoc-size-small sets --lssoc-btn: 36px at (0,1,0)
       and this restates it at (0,2,0). The icon has its own token and stays
       16px, so the buttons get airier rather than bigger-looking. Desktop
       keeps 36px, which already clears the AA minimum for a mouse. */
    .lssoc.lssoc-size-small {
        --lssoc-btn: 44px;
    }

    /* --- Cart upsell carousel nav ---------------------------------------- */
    body.woocommerce-cart .wc-j-items-carousel-nav {
        gap: 10px;
        min-height: 44px;
    }
    body.woocommerce-cart .wc-j-items-carousel-nav .wc-nav-bullets {
        display: none;
    }
    body.woocommerce-cart .wc-j-items-carousel-nav .wc-nav-prev,
    body.woocommerce-cart .wc-j-items-carousel-nav .wc-nav-next {
        flex: 0 0 44px;
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
    }
}


/* ============================================================================
   14. CATEGORY "ABOUT" BLOCK

   Moved out of Divi body layout 459878 ("All Product Category Pages") on
   2026-09-01. It was the last of the three inline blocks the theme rebuild set
   out to retire: 5,887 bytes printed into the body of every product category
   page, after every stylesheet on the page.

   ⚠️ WHY EVERY RULE CARRIES !important (53 of them). This block styles Divi
   Theme Builder modules, and Divi emits its own per-module CSS inline with
   !important of its own. These are not defensive habit -- strip them and Divi
   wins. See section 9's notes on the same problem.

   ⚠️ THE SQUARE-BRACKET RULE NO LONGER APPLIES. While this lived in an
   [et_pb_code] module the shortcode parser mangled square brackets, so it had
   to avoid attribute selectors entirely. In a real stylesheet that constraint
   is gone -- if a rule here would read better as [data-…], it can be.

   Moving it EARLIER in the cascade (from end-of-body to a priority-10 theme
   sheet) was verified rather than assumed: computed styles for every element
   on a category page, inline block enabled vs this section, must diff to zero.
   ========================================================================= */

/* LS FABRICATION - CATEGORY "ABOUT" BLOCK
   Lives in Divi body layout 459878 (All Product Category Pages), so one edit
   covers every product category. Fold into lsfab/css/woocommerce.css when the
   mount is up. No square brackets in here - the shortcode parser mangles them
   inside an et_pb_code module. */

.ls-catabout{background:var(--ls-bg) !important;}

.ls-catabout .et_pb_row.ls-catabout__card{
position:relative;
background:var(--ls-surface-1);
border:1px solid var(--ls-hairline);
border-radius:var(--ls-radius-xl);
overflow:hidden;
}
/* NOTE: the card's PADDING and WIDTH are set in the Divi row settings, not here.
   Divi emits row custom_padding as
   .et-db #et-boc .et-l .et_pb_row_N_tb_body.et_pb_row{padding-top:Xpx !important}
   at specificity (1,4,1), which beats any .ls-catabout .et_pb_row rule written
   here. Setting padding in this block silently loses top and bottom. */
.ls-catabout .et_pb_row.ls-catabout__card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:var(--ls-gradient-brand);
}
.ls-catabout .et_pb_column{width:100% !important;margin:0 !important;}
.ls-catabout .et_pb_module{margin-bottom:0 !important;}

.ls-catabout .ls-catabout__head{width:100% !important;margin:0 0 var(--ls-space-5) !important;padding:0 !important;}
.ls-catabout .ls-catabout__head h2{
font-family:var(--ls-font-display) !important;
font-weight:700 !important;
font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem) !important;
line-height:1.15 !important;
text-transform:uppercase !important;
letter-spacing:0.04em !important;
color:var(--ls-text) !important;
text-shadow:none !important;
margin:0 !important;padding:0 !important;
}

.ls-catabout .ls-catabout__body{position:relative;width:100% !important;margin:0 !important;padding:0 !important;}
.ls-catabout .ls-catabout__body .et_pb_text_inner{max-width:74ch;}
.ls-catabout .ls-catabout__body p{
font-family:var(--ls-font-body) !important;
font-size:16px !important;
line-height:1.75 !important;
color:var(--ls-text-muted) !important;
margin:0 0 var(--ls-space-5) !important;
padding:0 !important;
}
.ls-catabout .ls-catabout__body p:last-child{margin-bottom:0 !important;padding:0 !important;}
.ls-catabout .ls-catabout__body h3,.ls-catabout .ls-catabout__body h4{
font-family:var(--ls-font-display) !important;
font-weight:700 !important;font-size:19px !important;
text-transform:uppercase !important;letter-spacing:0.05em !important;
color:var(--ls-text) !important;text-shadow:none !important;
margin:var(--ls-space-6) 0 var(--ls-space-3) !important;
}
.ls-catabout .ls-catabout__body a,.et-db #et-boc .et-l .ls-catabout .ls-catabout__body a{
color:var(--ls-text) !important;text-decoration:underline;text-decoration-color:var(--ls-red);text-decoration-thickness:1px;text-underline-offset:3px;
}
.ls-catabout .ls-catabout__body a:hover,.et-db #et-boc .et-l .ls-catabout .ls-catabout__body a:hover{
color:var(--ls-red) !important;text-decoration-color:var(--ls-red);
}
.ls-catabout .ls-catabout__body a:focus-visible{outline:2px solid var(--ls-red);outline-offset:3px;border-radius:2px;}
.ls-catabout .ls-catabout__body ul{margin:0 0 var(--ls-space-4) !important;padding-left:20px !important;}
.ls-catabout .ls-catabout__body li{position:relative;color:var(--ls-text-muted) !important;font-size:16px !important;line-height:1.7 !important;margin-bottom:6px !important;list-style:none !important;}
.ls-catabout .ls-catabout__body li::before{content:"";position:absolute;left:-14px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--ls-red);}

.ls-catabout .ls-catabout__body.is-clamped .et_pb_text_inner{max-height:220px;overflow:hidden;}
.ls-catabout .ls-catabout__body.is-clamped::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
background:linear-gradient(180deg,rgba(17,17,17,0) 0%,var(--ls-surface-1) 92%);
}

.ls-catabout__toggle{
display:inline-flex;align-items:center;justify-content:center;
min-height:40px;padding:0 20px;margin-top:var(--ls-space-5);
background:transparent;border:1px solid var(--ls-hairline-strong);
border-radius:var(--ls-radius-md);cursor:pointer;
font-family:var(--ls-font-display);font-weight:700;font-size:14px;
text-transform:uppercase;letter-spacing:var(--ls-tracking-button);
color:var(--ls-text);
transition:background var(--ls-transition),border-color var(--ls-transition);
}
.ls-catabout__toggle:hover{background:var(--ls-surface-2);border-color:var(--ls-text);}
.ls-catabout__toggle:focus-visible{outline:2px solid var(--ls-red);outline-offset:2px;}

.ls-catabout__rel{margin-top:var(--ls-space-6);padding-top:var(--ls-space-5);border-top:1px solid var(--ls-hairline-faint);}
.ls-catabout__rel-label{
font-family:var(--ls-font-display);font-weight:700;font-size:13px;
text-transform:uppercase;letter-spacing:0.1em;color:var(--ls-text-faint);
margin:0 0 var(--ls-space-3) !important;
}
.ls-catabout__chips{display:flex;flex-wrap:wrap;gap:8px;}
.ls-catabout__chips a,.et-db #et-boc .et-l .ls-catabout__chips a{
display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
background:var(--ls-surface-2);border:1px solid var(--ls-hairline);
border-radius:var(--ls-radius-pill);
font-family:var(--ls-font-body);font-size:13.5px;line-height:1;
color:var(--ls-text-muted) !important;text-decoration:none !important;
transition:border-color var(--ls-transition),color var(--ls-transition);
}
.ls-catabout__chips a:hover,.et-db #et-boc .et-l .ls-catabout__chips a:hover{
border-color:var(--ls-red);color:var(--ls-text) !important;
}
.ls-catabout__chips a:focus-visible{outline:2px solid var(--ls-red);outline-offset:2px;}

@media (max-width:600px){
.ls-catabout .ls-catabout__body p,.ls-catabout .ls-catabout__body li{font-size:15.5px !important;line-height:1.7 !important;}
.ls-catabout .ls-catabout__body.is-clamped .et_pb_text_inner{max-height:180px;}
.ls-catabout__toggle{width:100%;}
}
@media (prefers-reduced-motion:reduce){
.ls-catabout__toggle,.ls-catabout__chips a{transition:none !important;}
}


/* ============================================================================
   15. SHOP BREADCRUMB ON THE SHOP ROOT

   Moved out of the `ls-shop-breadcrumb-fix` code module in Divi body layout
   459878 on 2026-09-01, alongside section 14.

   The Theme Builder body layout prints a WooCommerce breadcrumb module, which
   is right on a product category page and pointless on the shop root, where
   the crumb trail would read "Home / Shop" and nothing else. The :not() keeps
   it on /?post_type=product archives.
   ========================================================================= */

body.woocommerce-shop:not(.post-type-archive-product) .et_pb_wc_breadcrumb {
    display: none !important;
}