/* ============================================================================
   LS FABRICATION — SITE INTEGRATIONS
   Styling for third-party plugin output, ported from Appearance > Additional
   CSS and rewritten against the design tokens.

   Everything here targets markup this site does not own. Each block names the
   plugin it belongs to, so when a plugin goes, its block goes with it.
   ========================================================================= */

/* ============================================================================
   VEHICLE PARTS FINDER (WooCommerce Vehicle Parts Finder — YMM)
   Used full-width on Shop by Vehicle and stacked in the shop sidebar.
   ========================================================================= */

.woo_vpf_ymm_filter_wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--ls-space-5);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
}
.woo_vpf_ymm_filter_wrapper:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--ls-card-line-h);
    background-image: var(--ls-gradient-brand);
    border-radius: var(--ls-radius-lg) var(--ls-radius-lg) 0 0;
}
.woo_vpf_ymm_filter_wrapper .widget-woo-vpf-ymm-filter { margin: 0; padding: 0; }

/* An open dropdown has to escape the section that contains it. */
.et_pb_section:has(.woo_vpf_ymm_filter_wrapper .chosen-with-drop) {
    position: relative;
    z-index: 1000;
}

.woo_vpf_ymm_filter_wrapper form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ls-space-3);
    margin: 0;
}
.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field {
    flex: 1 1 170px;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit { flex: 0 0 auto; }
.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-clearfix { display: none; }
.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field label {
    display: block;
    margin: 0 0 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;
    line-height: 1;
    color: var(--ls-text-faint);
}

/* --- Chosen dropdowns ---------------------------------------------------- */
.woo_vpf_ymm_filter_wrapper .chosen-container {
    width: 100%;
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single {
    height: var(--ls-control-h);
    line-height: calc(var(--ls-control-h) - 2px);
    padding: 0 44px 0 var(--ls-control-pad-x);
    background-color: var(--ls-surface-2);
    background-image: none;
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    box-shadow: none;
    color: var(--ls-text);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color var(--ls-transition), background-color var(--ls-transition),
                box-shadow var(--ls-transition);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single span { margin-right: 0; }
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single:hover {
    border-color: var(--ls-hairline-strong);
    background-color: var(--ls-surface-raised);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single div {
    top: 0; right: 0;
    width: 44px;
    height: 100%;
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single div b {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    position: relative;
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single div b:after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -6px 0 0 -5px;
    border-right: 2px solid var(--ls-text-faint);
    border-bottom: 2px solid var(--ls-text-faint);
    transform: rotate(45deg);
    transition: transform var(--ls-transition), margin-top var(--ls-transition),
                border-color var(--ls-transition);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-active.chosen-with-drop .chosen-single div b:after {
    transform: rotate(-135deg);
    margin-top: -2px;
    border-color: var(--ls-red);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-active .chosen-single {
    border-color: var(--ls-red);
    box-shadow: var(--ls-focus-ring);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-active.chosen-with-drop .chosen-single {
    background-image: none;
    border-radius: var(--ls-radius-md) var(--ls-radius-md) 0 0;
    box-shadow: none;
}
.woo_vpf_ymm_filter_wrapper .chosen-container.chosen-disabled { opacity: 1; cursor: not-allowed; }
.woo_vpf_ymm_filter_wrapper .chosen-disabled .chosen-single {
    background-color: #151515;
    border-color: var(--ls-hairline-faint);
    color: var(--ls-text-ghost);
    cursor: not-allowed;
}
.woo_vpf_ymm_filter_wrapper .chosen-disabled .chosen-single div b:after { border-color: var(--ls-hairline-input); }

.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-drop {
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-red);
    border-top: none;
    border-radius: 0 0 var(--ls-radius-md) var(--ls-radius-md);
    box-shadow: var(--ls-shadow-drop);
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search {
    position: relative;
    padding: var(--ls-space-2);
    white-space: normal;
}
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search input[type="text"] {
    width: 100%;
    min-height: var(--ls-control-h-sm);
    margin: 0;
    padding: 0 var(--ls-space-3);
    background-color: #0a0a0a;
    background-image: none;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text);
    font-size: var(--ls-body);
}

.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results {
    margin: 0;
    padding: 0 var(--ls-space-2) var(--ls-space-2);
    max-height: 264px;
    color: var(--ls-text-muted);
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li {
    margin: 0;
    padding: 11px var(--ls-space-3);
    border-radius: var(--ls-radius-md);
    line-height: 1.3;
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.active-result { cursor: pointer; }
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li[data-option-array-index="0"] { color: var(--ls-text-ghost); }
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.result-selected {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--ls-text);
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.disabled-result { color: var(--ls-text-ghost); }
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.no-results {
    background-color: transparent;
    color: var(--ls-text-soft);
    font-size: var(--ls-body);
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.group-result {
    color: var(--ls-text-faint);
    font-size: var(--ls-body);
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results::-webkit-scrollbar { width: 8px; }
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results::-webkit-scrollbar-track { background: var(--ls-surface-1); }
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results::-webkit-scrollbar-thumb {
    background: var(--ls-hairline-input);
    border-radius: var(--ls-radius-sm);
}
.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results::-webkit-scrollbar-thumb:hover { background: var(--ls-red-btn); }

/* The finder's submit and reset use the shared button component (they are
   named in the component's selector list in components.css). */
.woo_vpf_ymm_filter_wrapper input[type="submit"] { min-width: 190px; }
.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a,
.woo_vpf_ymm_filter_wrapper input[type="reset"] {
    background-color: transparent;
    border: 1px solid var(--ls-hairline-strong);
    color: var(--ls-text);
}

/* Fallback if the dropdown script does not load. */
.woo_vpf_ymm_filter_wrapper select { min-height: var(--ls-control-h); }

/* Inside the sidebar the finder drops its own card — the widget provides one. */
#sidebar .woo_vpf_ymm_filter_wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
#sidebar .woo_vpf_ymm_filter_wrapper:before { display: none; }
#sidebar .woo_vpf_ymm_filter_wrapper form { flex-direction: column; align-items: stretch; }
#sidebar .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field { flex: 1 1 auto; width: 100%; }
#sidebar .woo_vpf_ymm_filter_wrapper input[type="submit"] { width: 100%; min-width: 0; }


/* ============================================================================
   WOOCOMMERCE PRODUCT SEARCH (itthinx) — sidebar widgets + live results
   ========================================================================= */

#sidebar .product-search-field { min-height: var(--ls-control-h-sm); }

/* ---------------------------------------------------------------------------
   LIVE SEARCH DROPDOWN (header search + sidebar widget)

   The plugin ships a white box with a 1px #ccc border, 16px red titles, 32px
   thumbnails and an "Add to cart" link under every hit, and it sets no
   max-height so a busy query runs off the bottom of the screen. Rebuilt here
   as a dark on-brand results panel: red top rule, rounded card, 56px product
   tiles, Barlow Condensed titles, price instead of the add-to-cart link, a
   labelled category section and a full-width "show more" footer.

   The four legacy .product-search-results rules that used to live in
   absorbed.css (white-box padding, the red title colour and the
   display:none!important on description + price) were removed there, so this
   is now the single source of truth for the dropdown. Selectors repeat the
   plugin's own `div.` / `tr.` prefixes to beat its stylesheet on specificity
   rather than relying on load order.
   ------------------------------------------------------------------------ */

/* --- the panel ---------------------------------------------------------- */
.product-search div.product-search-results-content {
    margin-top: var(--ls-space-2);
    padding: 0;
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-xl);
    box-shadow: var(--ls-shadow-drop);
    max-height: min(68vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* No results yet: the plugin leaves the element in place, so hide it or an
   empty red-topped card sits under the field. */
.product-search div.product-search-results-content:empty { display: none; }

/* The animation is attached to :not(:empty), so it fires when results arrive
   rather than once, invisibly, at page load. */
.product-search div.product-search-results-content:not(:empty) {
    animation: ls-search-drop 160ms ease both;
}
@keyframes ls-search-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.product-search div.product-search-results-content::-webkit-scrollbar { width: 10px; }
.product-search div.product-search-results-content::-webkit-scrollbar-track { background: transparent; }
.product-search div.product-search-results-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
    border: 3px solid var(--ls-surface-1);
    border-radius: var(--ls-radius-pill);
}
.product-search div.product-search-results-content::-webkit-scrollbar-thumb:hover { background-color: var(--ls-red-btn); }

/* --- the table ---------------------------------------------------------- */
/* table-layout: fixed is load-bearing. On auto layout a long category label
   ("Search in 73-87 GMC Chevy Square Body Truck Parts") sets the table's
   min-content width, the table grows past the panel, and the panel's
   overflow-x clips the text with no ellipsis. Fixed layout takes the column
   widths from the first row instead, so every cell ellipsises inside the
   panel. Column one is the 56px thumbnail plus its 16px left padding. */
.product-search-results table.search-results {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background-color: transparent;
    table-layout: fixed;
}
.product-search-results table.search-results td { box-sizing: border-box; }
.product-search-results table.search-results tr.entry { border: 0; background-color: transparent; }
.product-search-results table.search-results tr.entry td {
    border: 0;
    vertical-align: middle;
    background-color: transparent;
    transition: background-color var(--ls-transition), box-shadow var(--ls-transition);
}

/* --- product rows ------------------------------------------------------- */
.product-search-results tr.entry.product td {
    padding: var(--ls-space-3) var(--ls-space-4);
    border-top: 1px solid var(--ls-hairline-faint);
}
.product-search-results tr.entry.product.first td { border-top: 0; }

.product-search-results tr.entry.product td.product-image {
    width: 72px;
    padding-right: 0;
}
.product-search-results tr.entry.product td.product-image a { display: block; line-height: 0; }
.product-search-results tr.entry img.thumbnail {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    object-fit: cover;
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
    transition: border-color var(--ls-transition);
}

.product-search-results tr.entry.product td.product-info { padding-left: var(--ls-space-3); }
.product-search-results td.product-info > a { display: block; }

/* The site's prose link treatment underlines on hover. In a results list that
   reads as noise, so every entry link opts out in all states. */
.product-search-results table.search-results a,
.product-search-results table.search-results a:hover,
.product-search-results table.search-results a:focus { text-decoration: none; }

/* Two lines, not one. The plugin's own 5-word title limit was lifted to
   unlimited (Settings > Product Search > max title words = 0), so a full name
   now arrives and wraps to use the panel's width instead of ellipsising after
   a third of it. The clamp works here because the span is a block inside the
   <a>, not a flex item — a flex item blockifies and the clamp silently dies. */
.product-search-results .entry span.title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h4);
    font-weight: 600;
    line-height: var(--ls-leading-h4);
    letter-spacing: 0;
    color: var(--ls-text);
    overflow: hidden;
    transition: color var(--ls-transition);
}

/* The plugin's excerpt line is boilerplate on this catalogue — the price is
   the useful second line. */
.product-search-results .entry span.description { display: none; }
.product-search-results .entry div.wps_add_to_cart { display: none; }

.product-search-results tr.entry.product span.price {
    display: block;
    margin-top: var(--ls-space-1);
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ls-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover and keyboard focus share one treatment: lifted row, red rule down the
   left edge, red title. */
.product-search-results tr.entry.product:hover td,
.product-search-results tr.entry.product.active td { background-color: rgba(255, 0, 68, 0.09); }
.product-search-results tr.entry.product:hover td.product-image,
.product-search-results tr.entry.product.active td.product-image { box-shadow: inset 3px 0 0 0 var(--ls-red); }
.product-search-results tr.entry.product:hover span.title,
.product-search-results tr.entry.product.active span.title { color: var(--ls-red); }
.product-search-results tr.entry.product:hover img.thumbnail,
.product-search-results tr.entry.product.active img.thumbnail { border-color: var(--ls-hairline-strong); }

/* --- category rows ------------------------------------------------------ */
.product-search-results tr.entry.s_product_cat td.category-info {
    padding: var(--ls-space-2) var(--ls-space-4);
    border-top: 1px solid var(--ls-hairline-faint);
}
.product-search-results tr.entry.s_product_cat.first td.category-info {
    padding-top: var(--ls-space-4);
    border-top: 1px solid var(--ls-hairline);
}
.product-search-results tr.entry.s_product_cat.first td.category-info::before {
    content: "Browse categories";
    display: block;
    margin-bottom: var(--ls-space-2);
    font-family: var(--ls-font-display);
    font-size: var(--ls-micro);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-text-faint);
}
.product-search-results tr.entry.s_product_cat span.title {
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ls-text-muted);
}
.product-search-results tr.entry.s_product_cat:hover td { background-color: rgba(255, 0, 68, 0.09); }
.product-search-results tr.entry.s_product_cat:hover span.title,
.product-search-results tr.entry.s_product_cat.active span.title { color: var(--ls-red); }
.product-search-results tr.entry.s_product_cat.active td { background-color: rgba(255, 0, 68, 0.09); }

/* --- "show all results" footer ------------------------------------------ */
.product-search-results tr.entry.s_more td.more-info {
    padding: 0;
    border-top: 1px solid var(--ls-hairline);
}
.product-search-results tr.entry.s_more td.more-info a {
    display: block;
    padding: var(--ls-space-3) var(--ls-space-4);
    text-align: center;
    background-color: rgba(255, 0, 68, 0.10);
    transition: background-color var(--ls-transition);
}
/* The plugin labels this row "More ...", which says nothing about what is on
   the other side of it. The label is swapped for a real call to action in CSS
   so no plugin file or template is touched. */
.product-search-results tr.entry.s_more span.title {
    display: block;
    font-family: var(--ls-font-display);
    font-size: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-tracking-button);
    color: var(--ls-red);
    white-space: normal;
}
.product-search-results tr.entry.s_more span.title::before {
    content: "See all results \2192";
    font-size: var(--ls-small);
    letter-spacing: var(--ls-tracking-button);
}
.product-search-results tr.entry.s_more td.more-info a:hover,
.product-search-results tr.entry.s_more.active td.more-info a { background-color: var(--ls-red-btn); }
.product-search-results tr.entry.s_more td.more-info a:hover span.title,
.product-search-results tr.entry.s_more.active span.title { color: var(--ls-text); }

/* --- empty state -------------------------------------------------------- */
.product-search-results .no-results {
    padding: var(--ls-space-5) var(--ls-space-4);
    text-align: center;
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    color: var(--ls-text-soft);
}

/* --- narrow container (the shop sidebar widget is only ~158px wide) ------
   Sized against the search wrapper rather than the viewport, so the header
   dropdown keeps its thumbnails at every breakpoint while the sidebar one
   drops them and gives the whole width to a two-line title. */
.product-search { container-type: inline-size; container-name: ls-search; }

@container ls-search (max-width: 260px) {
    .product-search-results tr.entry.product td.product-image { display: none; }
    .product-search-results tr.entry.product td { padding: var(--ls-space-2) var(--ls-space-3); }
    .product-search-results tr.entry.product td.product-info { padding-left: var(--ls-space-3); }
    /* No thumbnail here and a full-length title, so it gets a third line. */
    .product-search-results .entry span.title { font-size: var(--ls-h4); -webkit-line-clamp: 3; line-height: var(--ls-leading-h4); letter-spacing: 0; }
    .product-search-results tr.entry.s_product_cat td.category-info { padding: var(--ls-space-2) var(--ls-space-3); }
    .product-search-results tr.entry.s_product_cat span.title { -webkit-line-clamp: 2; }
}

@media (max-width: 480px) {
    .product-search-results tr.entry.product td { padding: var(--ls-space-2) var(--ls-space-3); }
    .product-search-results tr.entry img.thumbnail { width: 48px; height: 48px; }
    .product-search-results tr.entry.product td.product-image { width: 60px; }
    .product-search-results .entry span.title { font-size: var(--ls-h4); line-height: var(--ls-leading-h4); letter-spacing: 0; }
    .product-search-results tr.entry.s_product_cat td.category-info { padding-left: var(--ls-space-3); padding-right: var(--ls-space-3); }
}
.product-search-filter-price-slider.ui-slider {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--ls-hairline-input);
}
.product-search-filter-price-slider .ui-slider-handle {
    background-color: var(--ls-red-btn);
    box-shadow: 0 0 0 3px var(--ls-surface-1), 0 0 0 4px rgba(255, 255, 255, 0.4);
    cursor: grab;
}
.product-search-filter-price-slider .ui-slider-handle.ui-state-active { cursor: grabbing; }
.product-search-filter-price-field { width: 68px; min-height: var(--ls-control-h-sm); }
.product-search-filter-price-clear { font-size: var(--ls-small); color: var(--ls-text-soft); text-decoration: underline; }
.slider-min-max-separator { color: var(--ls-text-ghost); margin: 0 var(--ls-space-1); }
.product-search-attribute-filter-item.current-attribute > a:after { color: var(--ls-red); }

/* ============================================================================
   CUSTOMER REVIEWS FOR WOOCOMMERCE (CusRev)
   ========================================================================= */

.cr-summaryBox-wrap,
.cr-count-row,
.cr-ajax-reviews-sort,
.comment_container {
    background-color: #121212;
    border-radius: var(--ls-radius-sm);
    color: var(--ls-text);
}
.cr-average-rating,
.cr-total-rating-count,
.cr-comment-productname-a,
.cr-histogramTable .ivole-histogramRow .cr-histogram-a,
.cr-reviews-ajax-reviews .cr-ajax-reviews-list .cr-comment-text .meta .woocommerce-review__author { color: var(--ls-text); }
.cr-reviews-ajax-reviews .cr-ajax-reviews-list .cr-comment-text .meta .woocommerce-review__verified { color: var(--ls-text-muted); }
#reviews.cr-reviews-ajax-reviews .cr-count-row { margin: 0; }
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review,
.cr-show-more-reviews-prd { background-color: var(--ls-red-btn); }
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review:hover,
.cr-show-more-reviews-prd:hover { background-color: var(--ls-red-btn-hover); }

/* CusRev ships its review-form submit on #31856C (4.47:1, misses AA) from a
   (0,4,0) selector in its frontend.css. Doubled class = (0,4,1) so the shared
   red button fill wins. */
.cr-review-form-wrap .cr-review-form-buttons button.cr-review-form-submit.cr-review-form-submit,
.cr-qna-block .cr-review-form-buttons button.cr-review-form-submit.cr-review-form-submit { background-color: var(--ls-red-btn); }
.cr-review-form-wrap .cr-review-form-buttons button.cr-review-form-submit.cr-review-form-submit:hover,
.cr-qna-block .cr-review-form-buttons button.cr-review-form-submit.cr-review-form-submit:hover { background-color: var(--ls-red-btn-hover); }
.ivole-meter { border-radius: var(--ls-radius-pill); }
.ivole-meter .ivole-meter-bar { border-radius: var(--ls-radius-pill); background: var(--ls-amber); }

/* ============================================================================
   YITH PRODUCT ADD-ONS
   ========================================================================= */

.addon-header h4 { font-weight: 600; font-size: var(--ls-h5); line-height: 1.6em; }

/* ============================================================================
   LS GALLERY (replaced WooThumbs, 2026-09-07)
   The plugin stylesheet draws the gallery; the theme only spaces the column
   around it -- see the STICKY GALLERY block below.
   ========================================================================= */


/* ============================================================================
   SMASH BALLOON — REVIEWS FEED
   The Instagram feed is not placed anywhere on the site; if it is added back,
   its styling belongs here.
   ========================================================================= */

.sbr-owl-nav > div { background-color: var(--ls-purple); color: #ffffff; }
#sb-reviews-container-1 .sb-feed-header-btn,
#sb-reviews-container-1 .sb-feed-header-btn a,
#sb-reviews-container-4 .sb-feed-header-btn {
    font-family: var(--ls-font-display);
    font-size: var(--ls-h6);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    border-radius: var(--ls-radius-sm);
}

/* ============================================================================
   PRODUCT PAGE — STOCK BLOCK AND STICKY GALLERY
   Custom markup injected via Code Snippets.
   ========================================================================= */

#ls-stock-container { order: 1; }
.woocommerce-variation.single_variation { order: 2; }
.woocommerce-variation-add-to-cart { order: 3; }

#ls-features-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
    margin: var(--ls-space-4) 0;
}
.ls-feature-card {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    padding: var(--ls-space-3) var(--ls-space-4);
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-faint);
    border-radius: var(--ls-radius-lg);
}
.ls-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--ls-radius-lg);
    font-size: 20px;
}
.ls-feature-title { display: block; color: var(--ls-text); font-size: var(--ls-small); font-weight: 600; }


/* Gallery column spacing.

   The share bar rides 18px under the gallery on desktop; on mobile the
   summary column starts 20px under the thumbnail strip.

   The 22px bottom margin on the share card matches the trailing margin of the
   last feature card in the summary column, so both columns end on the same
   line and the sticky share bar comes to rest level with the bottom of the
   feature cards. */
@media (max-width: 980px) {
    /* Divi gives every stacked column 30px underneath; the gallery column
       gets 20px so the title sits 20px under the thumbnail strip. */
    .et_pb_column.sticky-images {
        margin-bottom: 20px;
    }

    .sticky-images .lsgal {
        margin-bottom: 0;
    }
}

@media (min-width: 981px) {
    .sticky-images .lsgal {
        margin-bottom: 18px;
    }

    .sticky-images .ls-share-gallery {
        margin-top: 0;
    }

    .sticky-images .ls-share-gallery .lssoc-share {
        margin-top: 0;
        margin-bottom: 22px;
    }
}


/* ============================================================================
   VEHICLE FINDER — declarations moved from absorbed.css, 2026-09-01

   site.css already styled the finder; absorbed.css was overriding it from a
   later sheet, and the two had drifted. This file is now the single owner.

   What follows is the 105 declarations that existed ONLY in absorbed.css and
   had no counterpart here — the search box inside an open dropdown, the submit
   and reset buttons, the bare <select> fallback, and the sidebar-width
   variants. Without these the finder loses styling outright; they were never
   the "duplicates" the old notes worried about.

   Everywhere the two sheets genuinely disagreed, THIS file's values now win.
   ⚠️ That includes the control height: the finder used to render at 53px and
   now uses --ls-control-h (48px) like every other control on the site. Tay's
   call, 1 Sep. It is the one deliberate visual change in this migration.
   ========================================================================= */

.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search input[type="text"],
.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search-input {
    width: 100% !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 12px !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    border: 1px solid var(--ls-hairline) !important;
    border-radius: var(--ls-radius-md) !important;
    box-shadow: none;
    color: var(--ls-text);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
}

.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: var(--ls-text-faint) !important;
    outline: none;
}

.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search input[type="text"]::placeholder {
    color: rgba(255,255,255,0.35);
}

.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.group-result {
    font-weight: 400;
}

/* The finder's CTA is GREEN everywhere EXCEPT the homepage hero, where it is the
   page's primary action and is overridden to red in home.css section 6a. Here it
   sits inside a sidebar card with nothing else actionable near it, and red is
   reserved for cart/checkout commitment. See components.css .ls-btn--success. */
.woo_vpf_ymm_filter_wrapper input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: var(--ls-control-h);
    margin: 0;
    padding: 13px 30px;
    background-color: var(--ls-red-btn);
    background-image: none;
    border: none;
    border-radius: var(--ls-radius-md) !important;
    color: var(--ls-text);
    font-family: var(--ls-font-display);
    font-size: var(--ls-btn-font);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ls-transition),transform 100ms ease;
}

.woo_vpf_ymm_filter_wrapper input[type="submit"]:hover {
    background-color: var(--ls-red-btn-hover);
    color: var(--ls-text);
}

.woo_vpf_ymm_filter_wrapper input[type="submit"]:active {
    transform: translateY(1px);
}

.woo_vpf_ymm_filter_wrapper input[type="submit"]:focus-visible {
    outline: 2px solid var(--ls-text);
    outline-offset: 3px;
}

.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a,
.woo_vpf_ymm_filter_wrapper input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    height: var(--ls-control-h);
    padding: 12px 30px;
    border-radius: var(--ls-radius-md) !important;
    font-family: var(--ls-font-display);
    font-size: var(--ls-btn-font);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    line-height: 27px;
    cursor: pointer;
    transition: border-color var(--ls-transition),background-color var(--ls-transition);
}

.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field-submit a:hover,
.woo_vpf_ymm_filter_wrapper input[type="reset"]:hover {
    border-color: rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.05);
    color: var(--ls-text);
}

.woo_vpf_ymm_filter_wrapper select {
    width: 100%;
    height: var(--ls-control-h);
    padding: 0 14px;
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    font-weight: 600;
}

.dfw-sidebar-03 .woo_vpf_ymm_filter_wrapper form {
    flex-direction: column;
    align-items: stretch;
}

.dfw-sidebar-03 .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field {
    flex: 1 1 auto;
    width: 100% !important;
}

.dfw-sidebar-03 .woo_vpf_ymm_filter_wrapper input[type="submit"] {
    width: 100%;
    min-width: 0;
}

.dfw-sidebar-03 .woo_vpf_ymm_filter_wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.dfw-sidebar-03 .woo_vpf_ymm_filter_wrapper:before {
    display: none;
}

@media (max-width:980px) {

    .woo_vpf_ymm_filter_wrapper {
        padding: 20px;
    }

    .woo_vpf_ymm_filter_wrapper form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field {
        flex: 1 1 auto;
        width: 100% !important;
    }

    .woo_vpf_ymm_filter_wrapper input[type="submit"] {
        width: 100%;
        margin-top: 4px;
    }
}


/* ============================================================================
   VEHICLE FINDER — the declarations that must stay !important

   Chosen ships its own stylesheet and asserts !important on several of these
   properties. absorbed.css used to win them by also being !important; the
   plain declarations above cannot. Measured, not guessed: dropping the flags
   sent disabled dropdowns to opacity .5 and took the red off the highlighted
   result — the exact regression recorded when this block was first tried.

   Values are this file's own (design-system) values. The !important is only
   there to beat the plugin, not the theme. If Chosen is ever replaced, this
   whole section can go.
   ========================================================================= */


.woo_vpf_ymm_filter_wrapper .woo-vpf-ymm-field {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woo_vpf_ymm_filter_wrapper .chosen-container {
    width: 100% !important;
}

.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-single div b {
    background: none !important;
}

.woo_vpf_ymm_filter_wrapper .chosen-container.chosen-disabled {
    opacity: 1 !important;
}

.woo_vpf_ymm_filter_wrapper .chosen-container-single .chosen-search input[type='text'] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--ls-space-3) !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    border: 1px solid var(--ls-hairline) !important;
    border-radius: var(--ls-radius-md) !important;
}

.woo_vpf_ymm_filter_wrapper .chosen-container .chosen-results li.highlighted {
    background-color: var(--ls-red-btn) !important;
    background-image: none !important;
    color: #ffffff !important;
}


/* ============================================================================
   PAGE HERO — the blog-post header treatment, generalised
   Added 4 Sep 2026.

   The single blog/install-guide hero (blog.css §7.1 + §8.2) was the one page
   header on this site that looked like it belonged to the brand: the photo
   darkened rather than washed out under a bright gradient, a cyan eyebrow, a
   Barlow Condensed title on the left, and the 3px purple->cyan rule that the
   site header and section dividers already use.

   Every other page header was the raw Divi section: rgba(124,0,255,.85) to
   rgba(0,222,239,.84) laid over the same truck photo at 85% opacity, which
   erased the photo and matched nothing else. This block is that same blog
   recipe, hung off one class so shop/category/brand archives and the standard
   pages all share it.

   The class `ls-page-hero` is set in each section's own Divi settings
   (module_class), NOT guessed at from :first-child, so a section reordered in
   the builder keeps or loses the treatment deliberately.

   PADDING IS DELIBERATELY ABSENT HERE. Divi emits row/section padding at
   (1,4,1) with !important and a stylesheet cannot outrank it — the hero's
   120px/100px lives in each section's own settings. See the same note in
   layout 459878's About-block CSS.
   ========================================================================= */

/* --- Band height ---------------------------------------------------------
   NORMALLY padding on a Divi section must be set in the section's own
   settings, never here — Divi emits it at (1,4,1) with !important and a
   stylesheet cannot outrank that (see layout 459878's About-block note).

   The heroes DO carry custom_padding="120px||100px" in their own settings and
   that is left in place. This rule exists because Divi does NOT reliably
   emit it on TAXONOMY archives: the shop and product-category pages render
   from Theme Builder body 459878, and after any clear of wp-content/et-cache
   the regenerated et-divi-dynamic-*.css for those terms comes back with the
   section's background rules and no padding at all — the band collapses from
   320px to Divi's default. The identical section in body 459952 (single
   posts) emits it every time, so this is Divi's archive path, not the
   shortcode.

   Specificity is therefore deliberate, not lazy: (1,6,1) with !important, so
   it wins whether or not Divi emits its own rule that request. The value is
   the same 120/100 the settings hold, so nothing moves on the pages where
   Divi behaves. */
body.et-db #et-boc .et-l .ls-page-hero.et_pb_section.et_pb_section,
body.et-db .ls-page-hero.et_pb_section.et_pb_section {
    padding-top: var(--ls-section-lg) !important;
    padding-bottom: var(--ls-section-lg) !important;
}

/* --- SP-13: the band is shorter on the PRODUCT ARCHIVES ------------------
   Measured on /67-72-gmc-chevy-c10-truck-parts/ at 1920x855 before this rule:
   header 77 + breadcrumb 42 + hero 328 + 91px of empty Divi section and row
   padding + the result bar -- and the first product card started at y=600, so
   NOT ONE CARD was fully visible on a laptop. On a 390x820 phone the first
   card started at y=716 of an 820px viewport: 104px of a 359px card.

   That is 220px of decoration on the pages that carry 148,453 impressions a
   quarter and click at 2.58% -- below the site average -- against a homepage
   that clicks at 15%. A listing page has one job, which is to show the list.

   The band is not removed, because it carries the H1, the breadcrumb context
   and the only photography on the page; it is cut to the size the title
   actually needs: 44/36 desktop, 32/28 phone, which leaves the H1 with more
   clear space above and below it than the type has line-height.

   SCOPED TO THE ARCHIVES ONLY. About, Contact, Cart, Checkout, Policies and
   the other 16 standard pages keep the full 120/100 -- their hero IS the top
   of the page and there is nothing underneath it competing for the fold.

   `ls-archive` is the theme's own body class (functions.php, section 3), not a
   WordPress one: `body.archive` would also catch the blog category archives,
   which share .ls-page-hero through layout 459952 and are out of scope, and
   `body.woocommerce` would catch the cart and checkout. One class that means
   exactly "a product listing" is safer than three that nearly do.

   Specificity: the base rule above is (1,6,1) with !important, deliberately,
   because Divi does not reliably emit the section's own padding on taxonomy
   archives (see the note above it). Adding the body class makes this (1,7,1),
   so it wins on the archives and changes nothing anywhere else. */
body.ls-archive.et-db #et-boc .et-l .ls-page-hero.et_pb_section.et_pb_section,
body.ls-archive.et-db .ls-page-hero.et_pb_section.et_pb_section {
    padding-top: var(--ls-section-sm) !important;
    padding-bottom: var(--ls-section-sm) !important;
}

.ls-page-hero {
    position: relative;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .80);
}

/* NO border-bottom here. It used to carry `1px solid var(--ls-hairline)`, and
   because the ::after gradient below is positioned `bottom: 0` -- which on an
   absolutely positioned child resolves against the PADDING box, inside the
   border -- that 1px sat UNDER the 3px gradient rule and showed as a pale grey
   sliver the full width of every archive, blog and guide hero.
   Tay spotted it on an archive page: "I can see like 1 pixel exposed that the
   border isnt covering". The gradient IS the divider; the hairline was left
   over from before it existed. (2026-09-08) */

/* The brand gradient survives as a 3px rule under the hero. */
.ls-page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-image: var(--ls-gradient-brand);
    z-index: 2;
}

/* --- Title ---------------------------------------------------------------
   !important throughout: Divi Theme Builder and the page builder both emit
   per-module type at `body.et-db #page-container #et-boc .et-l …`, which is
   specificity (2,4,1). No sane selector here beats that, so the contested
   properties are flagged and the rest is left to Divi.
   Sizes: 60px desktop (matching the install-guide hero) down to 38px phone.

   The phone floor was 32px until 2026-09-06. Divi renders in-content h2 at
   36px on a phone, so on any page with body headings — the policies page is
   the clearest case — the H1 was rendering SMALLER than the section headings
   under it and the page read as though it had no title. 38px puts it back on
   top with a gap you can see. The floor governs everything below ~748px; at
   wider viewports the vw term already exceeds it and nothing changes. */
.ls-page-hero .et_pb_text_inner { text-align: left !important; }

.ls-page-hero .et_pb_text_inner h1,
.ls-page-hero .et_pb_text_inner h2 {
    font-family: var(--ls-font-display) !important;
    font-weight: 600 !important;
    font-size: var(--ls-h1) !important;
    line-height: var(--ls-leading-h1) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: #ffffff !important;
}

/* --- Eyebrow -------------------------------------------------------------
   No `content` is declared on the base rule, so the pseudo-element does not
   generate a box at all until a page below claims one. A page with no label
   therefore renders exactly as it did before — this is opt-in, not a default
   that has to be switched off. */
.ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before {
    display: block;
    margin-bottom: var(--ls-space-3);
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ls-cyan);
}

/* Archives */
body.woocommerce-shop   .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Parts Catalog"; }
body.tax-product_cat    .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Parts Catalog"; }
body.tax-product_brand  .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Brand"; }
body.tax-pa_brand       .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Brand"; }

/* The posts page (/classic-truck-news/) is body.blog, which blog.css's
   body.category / body.single-post rules never matched — it kept the old bright
   gradient after every other archive had moved. It renders the same Theme
   Builder body (459952) as the single posts, so the class now sits on that
   layout and all three states share one hero. */
body.blog               .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "News & Articles"; }

/* Standard pages, keyed on the page id Divi already prints on <body>. */
body.page-id-424    .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Who We Are"; }
body.page-id-474    .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Get In Touch"; }
body.page-id-2854   .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Your Order"; }
body.page-id-2855   .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Your Order"; }
body.page-id-8      .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Account"; }
body.page-id-15795  .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Customer Info"; }
body.page-id-144537 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Install Library"; }
body.page-id-460384 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Saved Parts"; }
body.page-id-475730 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Find Us"; }
body.page-id-499302 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Upholstery"; }
body.page-id-499537 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Wholesale"; }
body.page-id-606025 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Parts Finder"; }
body.page-id-606274 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Browse By Era"; }
body.page-id-607031 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Build Tools"; }

/* ------------------------------------------------------------------
   TrustPulse sale notification — bring the injected widget onto the
   site radius standard. TrustPulse writes its 50px pill / 100% avatar /
   12px badge as inline styles, so !important is required here.
   ------------------------------------------------------------------ */
.tp-widget-container,
.tp-widget-container.tp-widget--rounded { border-radius: 10px !important; }
.tp-widget-container .tp-widget-image  { border-radius: 6px !important; }
.tp-widget-container .tp-widget-powered-by { border-radius: 6px !important; }


/* ------------------------------------------------------------------
   SCROLL LOCK — js/scroll-lock.js
   `ls-scroll-locked` sits on <html> while any drawer or modal is open
   (cart drawer, mobile menu, mobile search, mobile filter panel). The
   root is the viewport's scroller, so hiding overflow here freezes the
   page and leaves <body> alone — overflow:hidden on <body> under a
   non-visible <html> would make <body> its own scroll container and the
   sticky header would stop sticking. The script measures the scrollbar
   (15px on Windows, 0 on phones and Macs) into --ls-scrollbar-gap and
   <body> is padded by that much, so nothing in the page reflows when the
   bar goes away; fixed panels sit flush at the real viewport edge.
   ------------------------------------------------------------------ */
html.ls-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}
html.ls-scroll-locked body {
    padding-right: var(--ls-scrollbar-gap, 0px) !important;
}

/* A swipe that reaches the end of an overlay's own list must stop there
   rather than chain through to the page. */
html.ls-scroll-locked .lscart__body,
html.ls-scroll-locked .ls-drawer > .et_pb_column,
html.ls-scroll-locked .ls-filters__scroll,
html.ls-scroll-locked .product-search-results-content {
    overscroll-behavior: contain;
}

/* ===========================================================================
   SOCIAL PROOF POPUP — KEEP IT OFF THE FILTER COLUMN   (2026-09-07, SP-11)

   TrustPulse parks itself bottom-LEFT, which on every shop and category page
   is directly on top of the Department facet, and further down the page it
   covers the era chip row at the foot of the About block. The one element
   whose job is to build trust was physically covering the one element whose
   job is to help a shopper narrow 78 products.

   Bottom-right instead, clear of the 300px sidebar. Below 980px the sidebar
   collapses into the filter drawer and the popup lands on the product grid
   instead, where it costs a card and gains nothing, so it is hidden there.

   TrustPulse positions its container with INLINE styles, so every rule here
   needs !important to win. An author !important declaration outranks a normal
   inline one, which is the only reason this works without touching the
   TrustPulse account.

   Both the id and the class are targeted: their bundle styles
   .tp-widget-container, and the outer positioned element has carried both
   spellings across versions. The same rules cover LS Social Proof's root
   (.lssp-root), so the in-house replacement cannot reintroduce the bug when it
   is switched on.

   Note css/sticky-cart.css already lifts .lssp-root--bottom-* by 84px when the
   sticky add-to-cart bar is showing; that rule still applies and is unrelated.
   ======================================================================== */
#tp-widget-container,
.tp-widget-container,
[id^="trustpulse"][style*="position: fixed"],
.lssp-root {
    left: auto !important;
    right: 24px !important;
}

@media (max-width: 980px) {

    #tp-widget-container,
    .tp-widget-container,
    [id^="trustpulse"][style*="position: fixed"],
    .lssp-root {
        display: none !important;
    }
}

/* ============================================================================
   404 (404.php) — the page-hero pattern with search and three exits.
   ========================================================================= */
body.error404 .ls-page-hero .et_pb_text:first-of-type .et_pb_text_inner::before { content: "Page not found"; }
body.error404 #main-content .container { display: none; }
.ls-404.et_pb_section { padding: var(--ls-space-8) 0; background-color: var(--ls-bg); }
.ls-404__body { max-width: var(--ls-prose); }
.ls-404__search { margin: var(--ls-space-6) 0; }
.ls-404__search-row { display: flex; gap: var(--ls-space-3); margin-top: var(--ls-space-2); }
.ls-404__search-row input[type="search"] { flex: 1 1 auto; min-width: 0; }
.ls-404__links { display: flex; flex-wrap: wrap; gap: var(--ls-space-3); }
@media (max-width: 600px) {
    .ls-404 { padding: var(--ls-space-7) 0; }
    .ls-404__search-row { flex-direction: column; }
    .ls-404__links .ls-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Hidden plugin dialogs
   PhotoSwipe and YITH WAPO print their dialog markup on pages where their own
   stylesheets are not enqueued (cart, checkout), so the hidden state never
   applies and the dialog chrome renders as stray text and bars under the
   footer. These mirror each plugin's own hidden-state rules as a fallback and
   are overridden the moment the plugin marks the dialog open.
   --------------------------------------------------------------------------- */
.pswp:not(.pswp--open) { display: none; }

.yith-wapo-popup:not(.open) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
}