/* =========================================================================
   Filter Everything — de-override Plant3 theme
   Purpose: Plant3 uses generic selectors (.widget-title, label, *) that leak
   into the FE filter sidebar and flatten its typography/spacing, making it
   look "theme-controlled" instead of FE's native demo look.
   This restores FE's intended appearance. Scope everything under
   .wpc-filters-main-wrap so nothing else on the site is affected.
   Add via Code Snippets (CSS) or theme Custom CSS. No core/theme files touched.
   ========================================================================= */

/* ---- Site font (shop hero + filter UI) ------------------------------------
   Font is controlled by the CSS variable --wccm-site-font, which defaults to
   `inherit` — i.e. it follows the active THEME's font automatically. A site can
   override it (Carousel Manager → Typography, or a stylesheet snippet) to pin a
   specific face, e.g.  :root { --wccm-site-font: "Roboto","Anuphan",sans-serif; }
   This is SEPARATE from the carousel font (--wccm-carousel-font), so changing
   one never affects the other. */
:root { --wccm-site-font: inherit; }
.wccm-shop-hero,
.wccm-shop-hero *,
.wccm-mobile-toolbar,
.wccm-mobile-toolbar *,
.wpc-filters-main-wrap,
.wpc-filters-main-wrap *,
.wpc-filters-widget-content,
.wpc-filters-widget-content *,
.wpc-filter-chips-list,
.wpc-filter-chips-list * {
    font-family: var(--wccm-site-font) !important;
}

/* ---- Mobile: use Filter Everything's own pop-up, hide the theme's --------
   Two mobile filter systems exist: Plant3's ".shop-widgets-toggle" (expands the
   in-page sidebar) and Filter Everything's own bottom-widget pop-up button
   (".wpc-filters-open-widget"). The design calls for FE's pop-up ("ตัวกรอง (n)"
   + overlay), so we KEEP FE's button and HIDE the theme's toggle. Only on
   mobile widths where both appear. */
/* ---- FE sort <select>: shared look (desktop + mobile) --------------------
   Custom chevron on the right so, with native appearance removed, the control
   still reads as a dropdown and the right-hand space isn't left blank. The SVG
   is inlined as a data URI (CSP-safe, no external request). */
.wccm-mt-sort .wpc-orderby-select,
.wccm-mt-sort select {
    height: 44px;
    border: 1px solid #d7dbe4 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: #1a1a2e !important;
    font-weight: 600 !important;
    /* room on the right for the chevron */
    padding: 0 38px 0 14px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a1a2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
}
.wccm-mt-sort .wpc-sorting-form,
.wccm-mt-sort .wpc-sorting-widget { margin: 0 !important; }

/* Hover on the sort + filter toolbar buttons: brand yellow #FFD230 */
.wccm-mt-sort .wpc-orderby-select:hover,
.wccm-mt-sort select:hover,
.wccm-mt-filter a.wpc-filters-open-widget:hover,
.wccm-mt-filter a.wpc-open-close-filters-button:hover {
    border-color: #FFD230 !important;
    color: #FFD230 !important;
}
/* Recolor the filter button's icon lines on hover to match. */
.wccm-mt-filter a.wpc-filters-open-widget:hover .wpc-icon-html-wrapper span,
.wccm-mt-filter a.wpc-open-close-filters-button:hover .wpc-icon-html-wrapper span {
    background: #FFD230 !important;
}

/* ---- Desktop (>=1024px): show ONLY the FE sort from the toolbar ----------
   On desktop the filter lives in the sidebar, so we don't need the "ตัวกรอง"
   pop-up button — but we DO want the same FE sort control as mobile, in place
   of WooCommerce's default dropdown. Show the toolbar, hide its filter half,
   right-align the sort, and hide the Woo ordering select. */
@media (min-width: 1024px) {
    .wccm-mobile-toolbar {
        display: flex;
        justify-content: flex-end;
        margin: 0 0 20px;
    }
    .wccm-mt-filter { display: none; }   /* filter pop-up button not needed */
    .wccm-mt-sort {
        flex: 0 0 auto;
    }
    /* Let the select size to its content (was a fixed 220px that left a big
       empty gap on the right for short labels). */
    .wccm-mt-sort .wpc-orderby-select,
    .wccm-mt-sort select {
        width: auto !important;
        min-width: 180px;
        max-width: 260px;
    }

    /* Hide WooCommerce's own ordering dropdown — FE sort replaces it. */
    .shop-content .woocommerce-ordering { display: none !important; }

    /* Breathing room between the full-width carousel hero and the shop body
       (filter sidebar + chips + products). */
    #main.shop-main { margin-top: 32px !important; }
}

@media (max-width: 1023px) {
    .shop-widgets-toggle {
        display: none !important;
    }
    /* Collapse the in-flow sidebar to zero height on mobile so it doesn't take
       space — BUT do NOT set opacity/overflow on .shop-widgets: Filter
       Everything renders its pop-up panel (.wpc-filters-widget-content, which
       becomes position:fixed) INSIDE .shop-widgets. An opacity:0 or
       overflow:hidden on the ancestor would hide the pop-up too (that was the
       "overlay shows but panel is invisible" bug). height:0 + visibility
       toggling keeps the fixed-position pop-up child fully visible. */
    /* CRITICAL FIX — "dark overlay shows but no filter panel":
       The theme (woo-m.css) collapses the mobile sidebar with
       .shop-widgets{opacity:0; max-height:0; overflow:hidden}. FE's pop-up panel
       is a CHILD of .shop-widgets, so opacity:0/overflow:hidden on that ancestor
       hide the pop-up too. Using `display:contents` removes .shop-widgets from
       the box tree entirely: it stops generating a box (no opacity, no clipping,
       no space), while its children lay out as if promoted to the parent. The
       in-flow filter widget is then hidden separately, and FE's fixed pop-up
       renders normally. */
    .shop-widgets {
        display: contents !important;
    }
    /* Hide the in-flow filter widget (the sidebar copy) so only the pop-up shows.
       FE's pop-up open button lives in .shop-content (relocated into our toolbar)
       and the pop-up panel is position:fixed, so neither is affected by this. */
    .shop-widgets > .widget_wpc_filters_widget > .wpc-filters-main-wrap > .wpc-filters-widget-content {
        display: none;
    }
    /* But when the pop-up is open, FE sets the content to position:fixed and
       shows it — keep that visible. */
    html.wpc-overlay-visible .wpc-filters-widget-content {
        display: block !important;
    }

    /* ---- Mobile toolbar: [ตัวกรอง (n)] [เรียงตาม] on one row ------------ */
    .wccm-mobile-toolbar {
        display: flex;
        gap: 10px;
        align-items: stretch;
        /* Breathing room below the carousel hero, and below before the grid. */
        margin: 24px 0 18px;
    }
    .wccm-mt-filter,
    .wccm-mt-sort {
        flex: 1 1 50%;
        min-width: 0;
    }
    /* The relocated FE open button fills its half and looks like a real button */
    .wccm-mt-filter .wpc-filters-open-button-container { display: block !important; margin: 0 !important; }
    .wccm-mt-filter a.wpc-filters-open-widget,
    .wccm-mt-filter a.wpc-open-close-filters-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        height: 44px;
        border: 1px solid #d7dbe4 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #1a1a2e !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;   /* keep it compact on small screens */
        padding: 0 10px !important;
    }
    /* Filter icon: a touch smaller so the label fits without wrapping */
    .wccm-mt-filter .wpc-icon-html-wrapper { margin-right: 7px !important; }
    .wccm-mt-filter .wpc-filters-button-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* FE sort <select> styled to match the filter button */
    /* Mobile only overrides the width/size; the chevron, border, and background
       come from the shared FE-sort rule above (keep them intact — do NOT set
       the `background` shorthand here or it wipes the chevron image). */
    .wccm-mt-sort .wpc-orderby-select,
    .wccm-mt-sort select {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0 34px 0 10px !important;
    }

    /* Hide WooCommerce's own ordering dropdown on mobile — FE sort replaces it. */
    .shop-content .woocommerce-ordering { display: none !important; }

    /* Keep the whole hero's carousel text from getting oversized on phones. */
    .wccm-shop-hero .wccm-section-heading,
    .wccm-shop-hero .wccm-carousel-title {
        font-size: 1.35rem !important;
    }
    .wccm-shop-hero .wccm-term-label,
    .wccm-shop-hero .wccm-term-card-title {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }
}

/* ---- Panel heading "ตัวกรอง" ---------------------------------------- */
.shop-widgets .widget-title,
.wpc-filters-main-wrap .widget-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

/* ---- Each filter group heading (หมวดหมู่สินค้า / ความจุ / แบรนด์) ---- */
.wpc-filters-main-wrap .wpc-filter-title,
.wpc-filters-main-wrap .wpc-filter-title button {
    font-size: 1rem !important;      /* theme forced 1.125em via .widget-title */
    font-weight: 600 !important;
    color: #1a1a2e !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

/* ---- Spacing between filter blocks — FE wants ~24-32px of air ------- */
.wpc-filters-main-wrap .wpc-filters-section:not(.wpc-filter-layout-submit-button) {
    margin-bottom: 28px !important;
}
.wpc-filters-main-wrap .wpc-filter-header {
    margin-bottom: 12px !important;
}

/* ---- Term rows: readable dark text, comfortable line-height -------- */
/* ROOT CAUSE of the "theme-controlled" look: FE renders each term as an
   <a class="wpc-filter-link">, and Plant3 sets a{color:#fbbf24} (its gold
   brand color), turning every filter term gold. FE's demo shows plain dark
   text. Force the term link back to a normal dark/grey. */
.wpc-filters-main-wrap li.wpc-term-item a.wpc-filter-link,
.wpc-filters-main-wrap li.wpc-term-item a,
.wpc-filters-main-wrap li.wpc-term-item label,
.wpc-filters-main-wrap li.wpc-term-item .wpc-term-name {
    font-size: 0.95rem !important;   /* theme label{} forced 0.9375em small/grey */
    line-height: 1.5 !important;
    color: #2b2b3a !important;       /* was gold #fbbf24 from theme a{} */
    text-decoration: none !important;
}
/* Terms with products (count > 0) read fully dark; zero-count stay muted grey */
.wpc-filters-main-wrap li.wpc-term-item:not(.wpc-term-count-0) a.wpc-filter-link,
.wpc-filters-main-wrap li.wpc-term-item:not(.wpc-term-count-0) .wpc-term-name {
    color: #1a1a2e !important;
}
.wpc-filters-main-wrap li.wpc-term-item.wpc-term-count-0 a.wpc-filter-link,
.wpc-filters-main-wrap li.wpc-term-item.wpc-term-count-0 .wpc-term-name {
    color: #b3b8c2 !important;       /* clearly "no products", not gold */
}
/* Hover: brand yellow #FFD230 on filter terms */
.wpc-filters-main-wrap li.wpc-term-item a.wpc-filter-link:hover,
.wpc-filters-main-wrap li.wpc-term-item a.wpc-filter-link:hover .wpc-term-name,
.wpc-filters-main-wrap li.wpc-term-item label:hover .wpc-term-name {
    color: #FFD230 !important;
}
.wpc-filters-main-wrap li.wpc-term-item {
    margin-bottom: 14px !important;
}

/* ---- Checkbox alignment: top-align with the FIRST line of the label -------
   FE lays out each term as flex with align-items:center, so on a two-line term
   the checkbox floats in the vertical middle (between the two lines). Align to
   the top instead so the checkbox lines up with the first line of text, like
   the single-line rows. A tiny padding-top nudges it to the text's optical
   center on that first line rather than hard against the cap height. */
.wpc-filters-main-wrap .wpc-term-item-content-wrapper {
    align-items: flex-start !important;
}
.wpc-filters-main-wrap .wpc-term-item-content-wrapper > input[type="checkbox"],
.wpc-filters-main-wrap .wpc-term-item-content-wrapper > input[type="radio"] {
    margin-top: 1px !important;
}

/* ---- Count numbers: subtle grey like the demo --------------------- */
.wpc-filters-main-wrap .wpc-term-count {
    color: #9aa0ad !important;
    font-size: 0.85rem !important;
}

/* ---- Search boxes inside filters: taller, rounded, clean ---------- */
.wpc-filters-widget-content .wpc-filters-section input[type="text"],
.wpc-filters-widget-content .wpc-filters-section input[type="search"],
.wpc-filters-main-wrap .wpc-search-field input {
    height: 44px !important;
    border: 1px solid #d7dbe4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 8px 14px 8px 38px !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
}

/* ---- Custom checkbox (styled_inputs) polish ----------------------- */
.wpc-filters-main-wrap input[type="checkbox"],
.wpc-filters-main-wrap input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 1.5px solid #c9d1e0 !important;
    border-radius: 5px !important;
    background: #fff !important;
    margin-right: 4px !important;
}
.wpc-filters-main-wrap input[type="radio"] {
    border-radius: 50% !important;
}

/* ---- Number/range inputs (ความจุ min/max) ------------------------- */
.wpc-filters-main-wrap .wpc-filters-range-inputs input[type="number"],
.wpc-filters-main-wrap .wpc-filters-range-inputs input[type="text"] {
    height: 44px !important;
    border: 1px solid #d7dbe4 !important;
    border-radius: 8px !important;
    text-align: left !important;
    padding: 8px 12px !important;
}

/* ---- "ดูเพิ่มเติม" / "ดูน้อยลง" control (was "See more/less") ------- */
.wpc-filters-main-wrap .wpc-see-more-control,
.wpc-filters-main-wrap .wpc-see-less-control {
    color: #09090B !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}
.wpc-filters-main-wrap .wpc-see-more-control:hover,
.wpc-filters-main-wrap .wpc-see-less-control:hover {
    color: #FFD230 !important;
}

/* ---- Apply / Reset buttons: match design (blue apply, ghost reset) - */
.wpc-filters-main-wrap .wpc-filters-submit-button {
    background: #0570e2 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: none !important;
}
.wpc-filters-main-wrap .wpc-filters-reset-button {
    background: #fff !important;
    color: #1a1a2e !important;
    border: 1px solid #d7dbe4 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
}

/* =========================================================================
   Shop hero band — full-width dark section ABOVE the two-column layout,
   holding the breadcrumb + category/brand carousel. Rendered by the plugin
   into the theme's `wccm_before_shop_main` hook (just before <main>).
   ========================================================================= */
.wccm-shop-hero {
    background: #080600;
    /* Full-bleed: the theme nests this inside .s-container (max-width:1180px),
       so break out to the full viewport width regardless of the container. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 24px 0 40px;
}
.wccm-shop-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Breadcrumb on the dark band */
.wccm-shop-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #c7c9cf;
}
.wccm-shop-breadcrumb a,
.wccm-shop-breadcrumb .rank-math-breadcrumb a {
    color: #c7c9cf !important;
    text-decoration: none;
}
.wccm-shop-breadcrumb a:hover,
.wccm-shop-breadcrumb .rank-math-breadcrumb a:hover {
    color: #ffffff !important;
}
.wccm-shop-breadcrumb .separator,
.wccm-shop-breadcrumb .rank-math-breadcrumb .separator,
.wccm-shop-breadcrumb .wccm-bc-sep {
    color: #6b6d73;
    margin: 0 8px;
}
/* Current page (last crumb) */
.wccm-shop-breadcrumb .last,
.wccm-shop-breadcrumb .rank-math-breadcrumb .last {
    color: #ffffff !important;
    font-weight: 500;
}

/* Carousel section heading sits on the dark band → make it readable */
.wccm-shop-hero .wccm-section-heading,
.wccm-shop-hero .wccm-carousel-title {
    color: #f5c518 !important; /* gold accent, matches brand */
}

/* The carousel wrap itself should not add its own page padding here */
.wccm-shop-hero .wccm-carousel-wrap {
    margin: 0 !important;
}

/* Mobile: tighten the hero padding */
@media (max-width: 767px) {
    .wccm-shop-hero { padding: 16px 0 28px; }
    .wccm-shop-hero-inner { padding: 0 16px; }
}

/* =========================================================================
   Shop pagination — match the design.
   selected: bg #282828 / text #fff · page buttons (prev/next) bg #F3F4F6 ·
   normal page text #637381 · dots hidden.
   ========================================================================= */
.woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    margin: 32px 0;
    padding: 0;
    list-style: none;
}
.woocommerce-pagination ul.page-numbers li {
    border: 0 !important;
    margin: 0 !important;
}
/* Number links + current, shared box */
.woocommerce-pagination ul.page-numbers li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    color: #637381 !important;          /* normal page text */
    transition: background-color .15s ease, color .15s ease;
}
/* Selected page */
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background: #282828 !important;
    color: #ffffff !important;
}
/* Hover on other pages */
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    background: #F3F4F6 !important;
    color: #282828 !important;
}
/* Prev / Next buttons — chevron-left / chevron-right icons.
   WooCommerce prints "←" / "→" as text; hide it (font-size:0) and draw a
   chevron via a mask so its color follows the text color (grey normally,
   white on hover). SVG inlined as data URI (CSP-safe). */
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next {
    background: #F3F4F6 !important;
    color: #637381 !important;
    font-size: 0 !important;        /* hide the ←/→ text glyph */
    position: relative;
}
.woocommerce-pagination ul.page-numbers li a.prev::before,
.woocommerce-pagination ul.page-numbers li a.next::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;  /* inherits #637381 / #fff on hover */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}
/* chevron-left */
.woocommerce-pagination ul.page-numbers li a.prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
/* chevron-right */
.woocommerce-pagination ul.page-numbers li a.next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.woocommerce-pagination ul.page-numbers li a.prev:hover,
.woocommerce-pagination ul.page-numbers li a.next:hover {
    background: #282828 !important;
    color: #ffffff !important;
}
/* The "…" dots (shown between skipped page ranges, e.g. 4 … 19) */
.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
    background: transparent !important;
    color: #637381 !important;
    min-width: auto;
    padding: 0 4px;
    cursor: default;
}

/* =========================================================================
   Shop product cards — remove the big gap between the product title and the
   "Add to Quote" button. The theme reserves ~74px min-height on the title
   (to keep cards equal height) plus 12px padding, and the Add-to-Quote plugin
   adds a 20px top margin — together that leaves a large empty band under short
   titles. We trim those; equal-height cards are preserved because the theme
   lays products out as flex columns in a stretched row.
   ========================================================================= */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    /* push the title's block to sit right under the image */
    margin-top: 0 !important;
    /* Clamp to two lines and reserve exactly that much space. Dropping the
       theme's ~74px reserve outright let long names run to 5+ lines, so cards
       in the same row ended up different heights (and in a carousel the slide
       height jumped as you paged). Two lines + descender room keeps every card
       identical whether the name is short or long. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    line-height: 1.4 !important;
    min-height: calc(2 * 1.4em + 0.25em) !important;
    max-height: calc(2 * 1.4em + 0.25em) !important;
}
/* Let the image/title block grow and pin the button to the bottom so cards in
   the same row stay the same height without a min-height gap. */
.woocommerce ul.products li.product {
    justify-content: flex-start;
}
.woocommerce ul.products li.product > .elex-rqst-quote-front-wrap {
    margin-top: 12px !important;   /* was 20px */
    margin-top: auto !important;   /* stick the quote button to the card bottom */
}

/* =========================================================================
   Add-to-Quote button (ELEX Request-a-Quote) on shop cards.
   1) Keep the button full-card-width whether one button (Add to Quote) or two
      (Add to Quote + View Quote List) are shown. The plugin wraps them in a
      flex row (.add_view_quote_btn) where buttons size to content, so after a
      product is added the buttons shrink. Force each to flex:1 so they always
      fill the row equally.
   2) Prepend the note_add icon to the "Add to Quote" button.
   ========================================================================= */
/* SCOPE NOTE: the outer wrapper is `.elex-rqst-quote-front-wrap`, present in
   BOTH states. The inner `.add_view_quote_btn` exists only in the AJAX-inserted
   markup — the page-load "View Quote List" markup (rendered on reload when the
   product is already in the quote) has NO `.add_view_quote_btn`, just
   `.elex-rqst-quote-front-wrap > .w-100 > a > button`. That's why scoping to
   `.add_view_quote_btn` left the reloaded button un-stretched. Scope to the
   front-wrap so both states are covered. */
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap {
    width: 100%;
}
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .add_view_quote_btn {
    display: flex !important;
    width: 100%;
}
/* Direct flex children fill equally — EXCEPT the absolutely-positioned toast. */
.woocommerce ul.products li.product .add_view_quote_btn > *:not(.elex-raq-toast-container) {
    flex: 1 1 0 !important;
    min-width: 0;
}
/* Every button/link/wrapper in EITHER state fills the card. */
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .button,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > a,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > button,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > a > button,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap a.button,
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap a > button {
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;   /* the <a> wrapper adds an underline */
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}
/* The toast container must NOT be forced full width (it's an absolute popup). */
.woocommerce ul.products li.product .elex-rqst-quote-front-wrap .elex-raq-toast-container {
    width: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
}

/* note_add icon before the Add-to-Quote label — FILLED, fixed yellow #FFD230.
   Uses background-image (not mask) so the SVG keeps its own color regardless of
   the button text color. Material Symbols note_add, weight 700, filled. */
.woocommerce ul.products li.product button.add_to_quote::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23FFD230'%3E%3Cpath d='M440-400v80q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-80h80q17 0 28.5-11.5T640-440q0-17-11.5-28.5T600-480h-80v-80q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560v80h-80q-17 0-28.5 11.5T320-440q0 17 11.5 28.5T360-400h80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v487q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-480H560q-17 0-28.5-11.5T520-640Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Mobile: shrink the quote-button label so it stays on ONE line (was wrapping
   to two lines in the narrower mobile card). */
@media (max-width: 767px) {
    /* Keep the label on ONE line. The View-Quote button nests its text in a
       <span> inside <a><button>, so font-size + nowrap must reach the span too
       (targeting only button/a left the span at full size → it wrapped). */
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap button,
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a,
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap button span,
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a span {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap button,
    .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 4px !important;
    }
    .woocommerce ul.products li.product button.add_to_quote::before {
        width: 15px;
        height: 15px;
    }
}