/**
 * Product Listing Page Styles
 * Matches the IMS Company design specifications
 * 
 * @package IMS_by_Soul_Country
 */

/* ==========================================================================
   CSS Variables for Product Listing
   ========================================================================== */

:root {
    --ims-text-primary: var(--color-dark, #111827);
    --ims-text-secondary: #6b7280;
    --ims-text-muted: #9ca3af;
    --ims-border-color: var(--color-border, #e5e7eb);
    --ims-border-light: #f3f4f6;
    --ims-bg-white: #ffffff;
    --ims-bg-light: var(--color-bg-light, #f9fafb);
    --ims-accent-blue: var(--color-cta, #2563eb);
    --ims-accent-green: #34d399;
    --ims-button-dark: var(--color-dark, #1f2937);
    --ims-button-hover: var(--color-dark-charcoal, #111827);
    --ims-location-badge-bg: var(--color-border, #e5e7eb);
    --ims-location-badge-text: #374151;
    --ims-filter-sidebar-width: 200px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.ims-product-listing-header {
    margin-bottom: 0;
}

/* Disable WordPress's constrained-layout top-gap rule
   (:root :where(.is-layout-constrained) > * { margin-block-start: 24px }).
   The 24px auto-gap fights every vertical-rhythm decision in this theme:
   it shifts the whole product listing down from the sticky header, pushes
   breadcrumbs off the top, and stacks extra whitespace between the header,
   pills, and layout grid. Each block here owns its own top/bottom spacing
   via padding, so we clear WordPress's global opinion once, at matching
   specificity, and let per-block styles drive the rhythm. */
:root :where(.is-layout-constrained) > * {
    margin-block-start: 0 !important;
}

/* The outer <main class="ims-product-listing"> also picks up a 24px
   margin-top from a separate WordPress block-gap rule (its parent is not
   .is-layout-constrained so the selector above doesn't catch it). Zero it
   here so the breadcrumbs sit flush under the sticky header. */
main.ims-product-listing {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Spinner used inside the filter loading chip (injected inline by
   product-listing-filters.js). Keyframes live here so we don't have to
   inline them in the JS. */
@keyframes ims-filter-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ims-filter-loading-chip svg { animation-duration: 2.4s !important; }
}

/*
 * Category accent on the archive page title. Only active when the queried
 * category resolves to one of the mapped top-level colours (see
 * includes/category-accents.php). A 4px coloured bar sits to the left of the
 * title, matching the stripe on every product card below.
 */
.ims-product-listing-header[style*="--ims-cat-accent"] .ims-page-title {
    padding-left: 0.75rem;
    border-left: 4px solid var(--ims-cat-accent);
}

/* When the title/count is hidden on parent categories, keep the sort and
   per-page controls anchored to the right where users expect them. */
.ims-product-listing-header--controls-only .ims-page-title-row {
    justify-content: flex-end;
}

.ims-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 14px 0 12px;
    border-bottom: 1px solid #E8EAED;
}

/* Title + count stack (matches redesign prototype `.cat-header` layout). */
.ims-page-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ims-page-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #111111;
    text-transform: uppercase;
}

.ims-page-title .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ims-text-secondary);
    border-radius: 50%;
    font-size: 11px;
    color: var(--ims-text-secondary);
    cursor: help;
}

.ims-product-count {
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ims-text-secondary);
    transition: background-color 1.5s ease, color 1.5s ease;
}

.ims-product-count.ims-highlight {
    background-color: var(--color-gold-pale);
    color: #92400e;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    transition: none;
}

.ims-product-count.ims-highlight-fade {
    background-color: transparent;
    color: var(--ims-text-secondary);
    font-weight: 400;
}

/* Controls Row (Sort + View Toggle) */
.ims-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ims-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ims-control-label {
    font-size: 12.5px;
    color: var(--ims-text-secondary);
    white-space: nowrap;
}

.ims-control-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #E8EAED;
    border-radius: 6px;
    background: var(--ims-bg-white);
    font-size: 13px;
    color: #111111;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    outline: none;
}

.ims-control-select:focus {
    border-color: var(--wp--preset--color--primary, #FAB000);
}

/* Grid / list view toggle — matches prototype `.view-toggle` group. */
.ims-view-toggle {
    display: inline-flex;
    border: 1px solid #E8EAED;
    border-radius: 6px;
    overflow: hidden;
}

.ims-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    background: #ffffff;
    border: none;
    color: #6B7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ims-view-btn + .ims-view-btn {
    border-left: 1px solid #E8EAED;
}

.ims-view-btn:hover {
    color: #111111;
}

.ims-view-btn.is-active {
    background: #111111;
    color: #ffffff;
}

.ims-view-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Filter Sidebar — prototype-matching treatment
   Active filters sit above, as a small "ACTIVE FILTERS" label with gold
   tags and a "Clear all filters" link. Filter groups then live inside a
   shared bordered/rounded box with hairline dividers between groups.
   ========================================================================== */

.ims-filter-sidebar {
    position: sticky;
    /* Sticky stack above = .compact-header (70px) + .ims-mega-menu-wrapper
       nav (~50px) ≈ 120px total. Park below that with breathing room so
       the sidebar doesn't tuck underneath the fixed chrome on scroll. */
    top: calc(120px + 1rem);
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Legacy "Filters" header is no longer rendered; keep a hidden rule so any
   cached markup still collapses gracefully. */
.ims-filter-sidebar .ims-filters-header {
    display: none;
}

/* Active filters strip (above the box) ------------------------------------ */
.ims-filter-sidebar__active {
    padding: 0;
}

.ims-filter-sidebar__title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ims-filter-sidebar__title--available {
    margin-bottom: 0;
}

.ims-active-filter-pills {
    padding: 0;
    background: transparent;
    border: 0;
}

.ims-active-filter-pills__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ims-active-filter-pills__item {
    margin: 0;
    padding: 0;
    line-height: 1;
    /* Allow the flex item to shrink below its content width so the pill's
       ellipsis can kick in rather than overflowing the sidebar. */
    min-width: 0;
    max-width: 100%;
}

.ims-active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 10px;
    background: #FDE17F;
    border: 1px solid #F59E0B;
    color: #111111;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    max-width: 100%;
}

.ims-active-filter-pill:hover,
.ims-active-filter-pill:focus-visible {
    background: #FCD34D;
    border-color: #D97706;
    color: #111111;
    outline: none;
}

.ims-active-filter-pill__label {
    /* inline-block + nowrap + ellipsis so long attribute values (e.g.
       "Stainless Steel Braid") truncate instead of pushing the pill past
       the sidebar edge. Children render inline inside the label. */
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    flex: 0 1 auto;
}

.ims-active-filter-pill__group {
    font-weight: 500;
    color: #57534e;
}

.ims-active-filter-pill__group::after {
    content: " ";
}

.ims-active-filter-pill__value {
    font-weight: 600;
}

.ims-active-filter-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #111111;
    flex-shrink: 0;
}

.ims-filter-sidebar__clear {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gold, #FAB000);
    cursor: pointer;
    text-decoration: none;
}

.ims-filter-sidebar__clear:hover,
.ims-filter-sidebar__clear:focus-visible {
    color: var(--gold-light, #FFC84A);
    text-decoration: underline;
    outline: none;
}

/* Filter group box --------------------------------------------------------- */
.ims-filter-sidebar__box {
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    overflow: hidden;
}

/* Each filter group (accordion item) */
.ims-filter-section {
    border-bottom: 1px solid #e8eaed;
}

.ims-filter-section:last-child {
    border-bottom: none;
}

/* Group header: "Product Type", "Voltage", etc. */
.ims-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.ims-filter-header:hover {
    background: #fafafa;
}

.ims-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
}

.ims-filter-toggle {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ims-filter-toggle svg {
    width: 12px;
    height: 12px;
    stroke: #6b7280;
}

.ims-filter-section.expanded .ims-filter-toggle {
    transform: rotate(180deg);
}

/* Group body */
.ims-filter-content {
    display: none;
}

.ims-filter-section.expanded .ims-filter-content {
    display: block;
}

.ims-filter-content-inner {
    padding: 6px 12px 8px;
    border-top: 1px solid #e8eaed;
}

/* Options list */
.ims-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.ims-filter-list::-webkit-scrollbar {
    width: 6px;
}

.ims-filter-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.ims-filter-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.ims-filter-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ims-filter-item {
    margin: 0;
}

.ims-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.3;
}

.ims-filter-checkbox input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--gold, #FAB000);
    cursor: pointer;
    flex-shrink: 0;
}

.ims-filter-checkbox > span:not(.filter-count) {
    flex: 1;
    min-width: 0;
}

.ims-filter-checkbox .filter-count {
    font-size: 11px;
    color: #6b7280;
    margin-left: auto;
    flex-shrink: 0;
}

/* Disabled options (zero count under current filter combination) */
.ims-filter-item--disabled .ims-filter-checkbox,
.ims-filter-checkbox--disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.ims-filter-item--disabled .ims-filter-checkbox input[type="checkbox"],
.ims-filter-checkbox--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.ims-filter-item--disabled .filter-count,
.ims-filter-checkbox--disabled .filter-count {
    color: #9ca3af;
}

/* Empty state */
.ims-no-filters-message {
    padding: 1rem 1.25rem;
    color: #6b7280;
    font-size: 13px;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    background: #ffffff;
}

/* Price Filter */
.ims-price-filter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.ims-price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ims-price-input-group {
    display: flex;
    align-items: center;
    flex: 1;
}

.ims-price-input-group label {
    font-size: 0.8125rem;
    color: var(--ims-text-secondary);
    margin-right: 0.375rem;
    min-width: 35px;
}

.ims-price-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--ims-border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    min-width: 0;
}

.ims-price-input:focus {
    outline: none;
    border-color: var(--ims-accent-blue);
}

.ims-price-currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.625rem;
    background: var(--ims-bg-light);
    border: 1px solid var(--ims-border-color);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 0.875rem;
    color: var(--ims-text-secondary);
}

.ims-price-input-group .ims-price-input {
    border-radius: 0 4px 4px 0;
}

.ims-price-separator {
    color: var(--ims-text-muted);
    font-size: 0.875rem;
}

.ims-price-apply {
    padding: 0.5rem 0.875rem;
    background: var(--ims-accent-blue);
    color: var(--ims-bg-white);
    border: none;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: end;
}

.ims-price-apply:hover {
    background: var(--color-cta-hover);
}

/* ==========================================================================
   Product Cards - Horizontal Layout
   ========================================================================== */

.ims-products-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ims-product-card {
    display: flex;
    align-items: flex-start;
    background: var(--ims-bg-white);
    border: 1px solid var(--ims-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    gap: 1.5rem;
    transition: background-color 0.2s ease;
}

.ims-product-card:first-child {
    border-radius: 8px;
}

.ims-product-card:last-child {
    border-radius: 8px;
}

.ims-product-card:only-child {
    border-radius: 8px;
}

.ims-product-card:hover {
    background: var(--ims-bg-light);
}

/* Product Image */
.ims-product-image {
    flex-shrink: 0;
    width: 180px;
    height: 140px;
    /* Anchor the volume-metric badge (SALE / + NEW / BEST) to the
     * top-right corner of the thumbnail so it sits on the image
     * regardless of whether the card is in row layout (default) or
     * column layout (mobile / vertical grids). */
    position: relative;
}

.ims-product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Volume-metric chip (auto-rendered from _netsuite_volume_metric) ──
 * Mirrors the slider's corner pill so a SALE / NEW / BEST item is
 * visually consistent across the homepage hero, listing pages, related
 * carousels, and the PDP. */
.ims-product-card-vm-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.ims-product-card-vm-badge--sale {
    background: #DC2626;
}

.ims-product-card-vm-badge--new {
    background: #16A34A;
}

.ims-product-card-vm-badge--bestseller {
    background: #1F2937;
}

.ims-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/*
 * Inline image pager (dot indicator + click-to-switch) for product cards
 * that have multiple images. Rendered by ims_render_product_card() when
 * the `show_image_pager` option is on AND the product has >1 image.
 *
 * Layout: all images are stacked inside the wrapping <a>; only the one
 * with `.is-active` is displayed. The dot row is a sibling of the <a>
 * (so clicking a dot doesn't navigate to the product page) and pinned
 * to the bottom of the wrapper.
 */
.ims-product-image--has-pager {
    position: relative;
    /* Reserve horizontal touch motion for the JS swipe handler while
     * still allowing vertical scrolling of the page underneath. Without
     * this, the browser may steal short horizontal gestures for native
     * scroll/pull behavior and the swap won't fire. */
    touch-action: pan-y;
    /* Stop iOS Safari from showing a grey "tap highlight" rectangle
     * during a swipe, which looks like a buggy click. */
    -webkit-tap-highlight-color: transparent;
}

.ims-product-image--has-pager .ims-product-image-stage-img {
    display: none;
}

.ims-product-image--has-pager .ims-product-image-stage-img.is-active {
    display: block;
}

.ims-image-pager {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 3;
    /* Pointer events only on the dots themselves, so clicks on the gap
     * between dots fall through to the <a> link beneath. */
    pointer-events: none;
}

.ims-image-pager-dot {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.ims-image-pager-dot:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.18);
}

.ims-image-pager-dot.is-active {
    background: var(--color-gold, #f5a623);
    border-color: var(--color-dark, #1a1a1a);
}

.ims-image-pager-dot:focus-visible {
    outline: 2px solid var(--color-gold, #f5a623);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ims-image-pager-dot,
    .ims-image-pager-dot:hover {
        transition: none;
        transform: none;
    }
}

/*
 * Lazy-image placeholder — scoped to the infinite-scroll archive grid only.
 *
 * The same .ims-product-image markup is reused by carousels, related-
 * product cards, search results, etc. that don't load the listing JS, so
 * scoping to .ims-products-container prevents images on those surfaces
 * from being permanently hidden by opacity:0 without a JS handler to
 * reveal them.
 *
 * How it works: the wrapper gets a shimmering background + "Loading…"
 * label, and the <img> starts at opacity: 0. When native loading="lazy"
 * finally paints the image, LazyImages JS adds .is-loaded to the wrapper,
 * which fades the image in and hides the placeholder.
 */
.ims-products-container .ims-product-image {
    position: relative;
    background: #f3f4f6;
    overflow: hidden;
    border-radius: 4px;
}

.ims-products-container .ims-product-image::before {
    content: "Loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: #9ca3af;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: ims-img-shimmer 1.6s linear infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.ims-products-container .ims-product-image a {
    position: relative;
    z-index: 2;
}

.ims-products-container .ims-product-image img {
    opacity: 0;
    transition: opacity 220ms ease;
}

.ims-products-container .ims-product-image.is-loaded::before {
    opacity: 0;
}

.ims-products-container .ims-product-image.is-loaded img {
    opacity: 1;
}

.ims-products-container .ims-product-image.is-error::before {
    content: "Image unavailable";
    animation: none;
    background: #f3f4f6;
}

@keyframes ims-img-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ims-products-container .ims-product-image::before {
        animation: none;
    }
}

.ims-product-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ims-bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ims-text-muted);
    font-size: 0.75rem;
}

/* Product Info Section */
.ims-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ims-product-title {
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--ims-text-primary);
    margin: 0 0 0.125rem 0;
    line-height: 1.4;
    text-transform: uppercase;
}

.ims-product-title a {
    color: inherit;
    text-decoration: none;
}

.ims-product-title a:hover {
    color: inherit;
}

/*
 * "Item # XXXXXX" pill on listing cards. Sized to match the canonical
 * .ims-part-number-badge pill (see blocks/product-part-number/style.css)
 * so the same visual token reads at the same scale everywhere on the site.
 */
.ims-product-sku {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--ims-text-primary);
    background: var(--color-gold-light);
    padding: 0.175rem 0.45rem;
    border-radius: 999px;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Tag/shield icon previously rendered inside the pill is now hidden site-wide. */
.ims-product-sku svg {
    display: none !important;
}

.ims-product-sku__label {
    font-weight: 400;
    letter-spacing: 0.02em;
}

.ims-product-sku__value {
    font-weight: 400;
    letter-spacing: 0.04em;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
}

.ims-product-brand {
    font-size: 0.875rem;
    color: var(--ims-accent-blue);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.ims-product-brand a {
    color: inherit;
    text-decoration: none;
}

.ims-product-brand a:hover {
    text-decoration: underline;
}

/* Stock Status & Location */
.ims-product-stock-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.ims-stock-status {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
}

.ims-stock-status.out-of-stock {
    color: #dc2626;
}

.ims-stock-quantity {
    margin-left: 0.25rem;
    font-weight: 500;
    color: var(--ims-text-muted);
}

.ims-returnable-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    color: var(--ims-text-primary);
}

.ims-returnable-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.ims-location-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--ims-location-badge-bg);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ims-location-badge-text);
    text-transform: uppercase;
}

/* Prop 65 Warning */
.ims-prop65-warning {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.375rem;
    width: fit-content;
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.75rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 0.375rem 0.5rem;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ims-prop65-warning:hover {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
    text-decoration: none;
}

.ims-prop65-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #d97706;
    margin-top: 1px;
}

.ims-prop65-text {
    flex: 1;
    min-width: 0;
}

/* Product Breadcrumb */
.ims-product-breadcrumb {
    font-size: 0.75rem;
    color: var(--ims-text-muted);
    margin-top: 0.625rem;
}

.ims-product-breadcrumb a {
    color: var(--ims-text-primary);
    text-decoration: none;
}

.ims-product-breadcrumb a:hover {
    text-decoration: underline;
}

.ims-product-breadcrumb .separator {
    margin: 0 0.25rem;
    color: var(--ims-text-muted);
}

/* Product Actions (Price & Cart) */
.ims-product-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 160px;
}

/* Price Display */
.ims-price-section {
    text-align: right;
}

.ims-price-label {
    font-size: 0.75rem;
    color: var(--ims-text-muted);
    margin-bottom: 0.125rem;
}

.ims-price-main {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
}

.ims-price-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ims-text-primary);
}

.ims-price-unit {
    font-size: 0.8125rem;
    color: var(--ims-text-muted);
}

.ims-price-ex-vat {
    font-size: 0.75rem;
    color: var(--ims-text-muted);
}

/* ==========================================================================
   Sale display (mirrors the PDP product-pricing block treatment)
   --------------------------------------------------------------------------
   When a product has a sale_price strictly lower than regular_price the
   card emits an .ims-price-regular strikethrough span ahead of the
   active .ims-price-amount, tints the active amount red, and adds an
   .ims-price-discount "Save N%" pill that wraps onto its own row via
   flex-basis: 100%. The .ims-price-main--on-sale modifier toggles
   flex-wrap so non-sale cards retain their original single-line flow.
   ========================================================================== */

.ims-price-main--on-sale {
    flex-wrap: wrap;
    row-gap: 0.2rem;
}

.ims-price-regular {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ims-text-muted, #6b7280);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    line-height: 1;
}

.ims-price-amount--sale {
    color: #dc2626;
}

.ims-price-discount {
    flex-basis: 100%;
    width: max-content;
    margin-top: 0.1rem;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Quantity & Add to Cart */
.ims-cart-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.ims-quantity-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ims-quantity-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ims-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ims-quantity-wrapper {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid var(--ims-border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn,
button.ims-quantity-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ims-text-primary) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn svg,
button.ims-quantity-btn svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none;
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn:hover,
button.ims-quantity-btn:hover {
    background: var(--color-cta) !important;
    color: var(--color-dark-charcoal) !important;
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn:active,
button.ims-quantity-btn:active {
    transform: scale(0.95);
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn:disabled,
button.ims-quantity-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.ims-product-card .ims-quantity-wrapper button.ims-quantity-btn:disabled:hover,
button.ims-quantity-btn:disabled:hover {
    background: transparent !important;
    color: var(--ims-text-primary) !important;
}

.ims-quantity-wrapper .ims-quantity-input {
    width: 40px !important;
    padding: 0.25rem !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ims-text-primary) !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.ims-quantity-wrapper .ims-quantity-input::-webkit-outer-spin-button,
.ims-quantity-wrapper .ims-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.ims-quantity-wrapper .ims-quantity-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.ims-add-to-cart {
    padding: 0.625rem 1.5rem;
    background: var(--ims-button-dark);
    color: #ffffff;
    border: 1px solid var(--ims-button-dark);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    width: 180px;
}

.ims-add-to-cart:hover {
    background: transparent;
    color: var(--ims-button-dark);
    border-color: var(--ims-button-dark);
}

.ims-add-to-cart:disabled {
    background: var(--ims-text-muted);
    cursor: not-allowed;
}

.ims-add-to-cart.loading {
    opacity: 0.7;
    pointer-events: none;
}

.ims-add-to-cart.success {
    /* Swap the stock bootstrap-green confirmation for the site's CTA gold —
       matches the cart badge, SKU pill, and toast accent so "added" reads as
       on-brand feedback rather than a foreign tone. */
    background: var(--color-cta, #FAB000);
    border-color: var(--color-cta, #FAB000);
    color: var(--color-dark-charcoal, #111111);
}

/* Add to Quote Button */
.ims-add-to-quote {
    padding: 0.625rem 1.5rem;
    background: transparent;
    color: var(--ims-button-dark);
    border: 1px solid var(--ims-button-dark);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.ims-add-to-quote:hover {
    background: var(--color-bg-light);
    color: var(--ims-button-dark);
    border-color: var(--ims-button-dark);
}

.ims-add-to-quote:disabled {
    border-color: var(--ims-text-muted);
    color: var(--ims-text-muted);
    cursor: not-allowed;
}

.ims-add-to-quote.adding {
    opacity: 0.7;
    pointer-events: none;
}

.ims-add-to-quote.success {
    /* Match the add-to-cart success state: CTA gold on near-black. */
    background: var(--color-cta, #FAB000);
    border-color: var(--color-cta, #FAB000);
    color: var(--color-dark-charcoal, #111111);
}

.ims-add-to-quote.error {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ==========================================================================
   More Info Button & Expandable Panel
   ========================================================================== */

/* Enable flex-wrap on product cards so the panel flows to a new row */
.ims-product-card,
.ims-unified-product-card {
    flex-wrap: wrap;
}

/* More Info Toggle */
.ims-more-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0;
    background: none;
    color: var(--color-dark-charcoal);
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s ease;
    width: 180px;
    margin-top: 0.375rem;
}

.ims-more-info-btn:hover {
    opacity: 0.7;
}

.ims-more-info-btn[aria-expanded="true"] {
    color: var(--color-dark-charcoal);
}

.ims-more-info-btn[aria-expanded="true"]:hover {
    opacity: 0.7;
}

.ims-more-info-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.ims-more-info-btn[aria-expanded="true"] .ims-more-info-arrow {
    transform: rotate(180deg);
}

/* Expandable Panel */
.ims-more-info-panel {
    flex: 0 0 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.ims-more-info-panel.is-open {
    opacity: 1;
    /* max-height is set via JS for smooth animation */
}

.ims-more-info-inner {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 0 0.5rem;
    border-top: 1px solid var(--ims-border-color, #e5e7eb);
    margin-top: 1rem;
}

/* Loading state for the button */
.ims-more-info-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

/* Larger product image */
.ims-more-info-image-wrap {
    flex-shrink: 0;
    width: 360px;
}

.ims-more-info-image-wrap a {
    display: block;
}

.ims-more-info-image-wrap img.ims-more-info-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: contain;
    background: var(--ims-bg-light);
    border: 1px solid var(--ims-border-color, #e5e7eb);
}

/* Gallery Thumbnails */
.ims-more-info-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.ims-more-info-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--ims-border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--ims-bg-light);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ims-more-info-thumb:hover {
    border-color: var(--color-dark-charcoal);
}

.ims-more-info-thumb.is-active {
    border-color: var(--color-dark-charcoal);
}

.ims-more-info-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Bullet points / details */
.ims-more-info-details {
    flex: 1;
    min-width: 0;
}

.ims-more-info-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ims-text-primary, #111827);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ims-more-info-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ims-more-info-bullets li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ims-text-primary, #111827);
}

.ims-more-info-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold-light);
}

/* Volume Discounts inside More Info panel */
.ims-volume-discounts.ims-volume-discounts--inline {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2.25rem 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ims-volume-discounts--inline .ims-volume-discounts__table {
    border: none !important;
}

/* Bottom "Less Info" collapse link */
.ims-more-info-collapse-wrap {
    text-align: right;
    padding-top: 1rem;
    padding-right: 1.5rem;
}

.ims-more-info-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-dark-charcoal);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ims-more-info-collapse-btn:hover {
    opacity: 0.7;
}

/* Empty state */
.ims-more-info-empty {
    flex: 1;
    text-align: center;
    padding: 1rem 0;
}

.ims-more-info-empty p {
    font-size: 0.875rem;
    color: var(--ims-text-secondary, #6b7280);
    margin: 0;
}

.ims-more-info-empty a {
    color: var(--ims-accent-blue, #2563eb);
    text-decoration: underline;
}

/* Responsive: stack image and details on smaller screens */
@media (max-width: 640px) {
    .ims-more-info-inner {
        flex-direction: column;
        gap: 1rem;
    }

    .ims-more-info-image-wrap {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .ims-more-info-btn {
        width: auto;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ims-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--ims-text-secondary);
}

.ims-pagination-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ims-pagination-text strong {
    color: var(--ims-text-primary);
    font-weight: 600;
}

/* ==========================================================================
   Layout Container
   ========================================================================== */

.ims-product-listing-layout {
    display: grid !important;
    grid-template-columns: var(--ims-filter-sidebar-width) 1fr;
    gap: 1rem !important;
    align-items: start;
}

/* Pin each direct child to an explicit grid column. The FSE template can
   render the real sidebar as a sibling of the wrapper (rather than inside
   it), producing three grid children; without explicit columns, auto-flow
   would put .ims-products-main in the narrow 200px column and the sidebar
   in the 1fr column — visually collapsing the product cards to ~1 char wide. */
.ims-product-listing-layout > .ims-filter-sidebar-wrapper,
.ims-product-listing-layout > .ims-filter-sidebar,
.ims-product-listing-layout > .ims-subcategory-nav,
.ims-product-listing-layout > .ims-collection-sidebar {
    grid-column: 1;
    /* Stretch the filter column to the full grid row height so the sticky
       sidebar inside has vertical scroll-range to pin through. Without this,
       align-items:start on the grid collapses the wrapper to the sidebar's
       own height and sticky has nowhere to travel. */
    align-self: stretch;
    /* Match .ims-products-main so both columns align at the same vertical
       baseline under the header. */
    margin-block-start: 5px;
}

.ims-product-listing-layout > .ims-products-main {
    grid-column: 2;
    min-width: 0;
    width: 100% !important;   /* force fill — width:auto wasn't stretching */
    max-width: 100% !important;
    justify-self: stretch;
    /* Small nudge so the first product card aligns visually with the top
       of the filter sidebar (which carries its own internal padding). */
    margin-block-start: 5px;
}


/* If the category template was built with wp:columns (rather than wp:group)
   the default Gutenberg stylesheet wins over our sizing in two ways:
     1. `.wp-block-columns { display: flex !important; gap: 3rem !important; }`
        turns our grid container into a flex row with a 3rem gap.
     2. `.wp-block-column:first-child { flex-basis: 300px !important; }` pins
        the filter sidebar to 300px regardless of --ims-filter-sidebar-width.
   The overrides below reassert our grid layout and column widths.
   IMPORTANT: scoped to ≥769px only — on mobile the sidebar becomes a
   full-height slide-out drawer (.ims-filter-sidebar-wrapper position:fixed;
   width:85vw) and these !important widths would otherwise lock it at the
   desktop column width and break the drawer. */
@media (min-width: 1025px) {
    .ims-product-listing-layout.wp-block-columns,
    .ims-product-listing-layout > .wp-block-columns {
        display: grid !important;
        grid-template-columns: var(--ims-filter-sidebar-width) 1fr !important;
        gap: 1rem !important;
    }

    .ims-product-listing-layout > .wp-block-column:first-child,
    .ims-product-listing-layout > .wp-block-columns > .wp-block-column:first-child,
    .ims-product-listing-layout .ims-filter-sidebar-wrapper.wp-block-column {
        flex-basis: var(--ims-filter-sidebar-width) !important;
        width: var(--ims-filter-sidebar-width) !important;
        max-width: var(--ims-filter-sidebar-width) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Collapse the 2-column grid to a single column ONLY when neither the
   filter sidebar nor the subcategory nav is rendered anywhere inside the
   layout. Important: we used to also collapse when the wrapper itself was
   :empty, but FSE sometimes renders the real .ims-filter-sidebar as a
   sibling of (not a child of) .ims-filter-sidebar-wrapper. An :empty check
   on the wrapper would then collapse the grid even though the sidebar is
   present, producing phantom whitespace in place of the filter column. */
.ims-product-listing-layout:not(:has(.ims-filter-sidebar)):not(:has(.ims-subcategory-nav)):not(:has(.ims-collection-sidebar)) {
    grid-template-columns: 1fr;
}

.ims-product-listing-layout:not(:has(.ims-filter-sidebar)):not(:has(.ims-subcategory-nav)):not(:has(.ims-collection-sidebar)) > .ims-products-main {
    grid-column: 1 / -1;
}

/* Hide the template wrapper when it's truly empty — safe because if the
   sidebar rendered elsewhere as a sibling, this just removes the invisible
   zero-content placeholder; if nothing rendered at all we hide the slot. */
.ims-filter-sidebar-wrapper:empty {
    display: none;
}

@media (max-width: 1024px) {
    .ims-product-listing-layout,
    .ims-product-listing-layout.wp-block-columns,
    .ims-product-listing-layout > .wp-block-columns {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* ── Mobile Filter Drawer ──
       Selectors are deliberately broad so we catch the wrapper whether the
       template uses wp:group (→ .wp-block-group.ims-filter-sidebar-wrapper)
       or wp:columns (→ .wp-block-column[.ims-filter-sidebar-wrapper]).
       !important is needed because .wp-block-column and the stacked-on-mobile
       Gutenberg rule (flex-basis:100% !important) would otherwise win. */
    /* Dedicated mobile drawer element (JS injects <aside class="ims-mobile-filter-drawer">
       directly under <body> and moves the sidebar into it). Because this
       aside isn't inside any Gutenberg layout wrapper, we don't need to
       fight .wp-block-group / .wp-block-column rules. */
    .ims-mobile-filter-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 360px;
        height: 100%;
        z-index: 9999;
        background: var(--ims-bg-white, #fff);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .ims-mobile-filter-drawer.is-open {
        transform: translateX(0);
    }

    .ims-mobile-drawer-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0.5rem 1rem 1rem;
    }

    .ims-mobile-filter-drawer .ims-filter-sidebar,
    .ims-mobile-filter-drawer .ims-subcategory-nav {
        position: static;
        top: auto;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        width: 100%;
    }

    /* Close button inside drawer */
    .ims-mobile-drawer-close {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--ims-border-color, #e5e7eb);
        background: var(--ims-bg-white, #fff);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .ims-mobile-drawer-close-title {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--ims-text-primary, #111827);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin: 0;
    }

    .ims-mobile-drawer-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: var(--ims-bg-light, #f9fafb);
        border-radius: 6px;
        cursor: pointer;
        color: var(--ims-text-primary, #111827);
        transition: background-color 0.2s ease;
        padding: 0;
    }

    .ims-mobile-drawer-close-btn:hover {
        background: var(--ims-border-color, #e5e7eb);
    }

    .ims-mobile-drawer-close-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Overlay backdrop */
    .ims-mobile-drawer-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
    }

    .ims-mobile-drawer-overlay.is-visible {
        display: block;
    }

    /* Fixed "Filters" tab on the left edge.
       The button is only ever inserted into the DOM by MobileDrawer.setup()
       (which also only runs at ≤1024px), so we can unconditionally show it
       here without gating on .is-visible. The drawer open/close state is
       tracked via .is-hidden below. */
    .ims-mobile-filter-toggle {
        position: fixed !important;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9997;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        background: var(--ims-button-dark, #1f2937);
        color: #fff;
        border: none;
        border-radius: 0 6px 6px 0;
        padding: 0.875rem 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s ease;
        display: block !important;
    }

    .ims-mobile-filter-toggle:hover {
        background: var(--ims-button-hover, #111827);
    }

    /* Legacy alias — JS still adds .is-visible when injecting the button. */
    .ims-mobile-filter-toggle.is-visible {
        display: block !important;
    }

    /* Hide toggle when drawer is open */
    .ims-mobile-filter-toggle.is-hidden {
        display: none !important;
    }

    /* Body scroll lock when drawer is open */
    body.ims-drawer-open {
        overflow: hidden;
    }
    
    .ims-filter-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 0;
    }

    .ims-price-filter {
        grid-template-columns: 1fr;
    }

    .ims-price-apply {
        justify-self: flex-end;
    }
}

/* Phone-only tweaks: product cards go vertical, page-title stacks, etc.
   Kept at the original 768px threshold so tablets keep the horizontal card
   layout even though their filter sidebar is now a drawer. */
@media (max-width: 768px) {
    .ims-page-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ims-product-card {
        flex-direction: column;
        text-align: center;
    }

    .ims-product-image {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }

    .ims-product-info {
        align-items: center;
    }

    .ims-product-actions {
        align-items: center;
        width: 100%;
    }

    .ims-price-section {
        text-align: center;
    }

    .ims-cart-section {
        align-items: center;
    }
}

/* Hide mobile drawer elements on desktop only.
   Scoped to >=1025px so the @media (max-width: 1024px) rules that reveal
   the toggle tab (.ims-mobile-filter-toggle.is-visible) can take effect on
   mobile/tablet without fighting this unscoped hide. */
@media (min-width: 1025px) {
    .ims-mobile-drawer-close,
    .ims-mobile-filter-toggle,
    .ims-mobile-drawer-overlay,
    .ims-mobile-filter-drawer {
        display: none !important;
    }
}

/* ==========================================================================
   WooCommerce Block Overrides
   ========================================================================== */

/* Override WooCommerce defaults to match our design */
.wp-block-woocommerce-product-collection .ims-product-card,
.woocommerce .products .ims-product-card {
    display: flex !important;
    width: 100% !important;
}

/* Hide default WooCommerce elements */
.ims-product-listing .woocommerce-result-count,
.ims-product-listing .woocommerce-ordering {
    display: none !important;
}

/* Style the WooCommerce breadcrumbs */
.woocommerce-breadcrumb {
    font-size: 0.875rem !important;
    color: var(--ims-text-secondary) !important;
    margin-bottom: 0.75rem !important;
    padding: 0 !important;
}

.woocommerce-breadcrumb a {
    color: var(--ims-text-secondary) !important;
    text-decoration: underline !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--ims-text-primary) !important;
}

/* ==========================================================================
   Filter Animations
   ========================================================================== */

@keyframes filterSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ims-filter-section.expanded .ims-filter-content-inner {
    animation: filterSlideDown 0.2s ease;
}

/* ==========================================================================
   Volume Pricing Indicator
   ========================================================================== */

.ims-product-card:has(.ims-volume-pricing-note:hover),
.ims-product-card:has(.ims-volume-pricing-note:focus),
.ims-product-card:has(.ims-volume-pricing-note:focus-within) {
    position: relative;
    z-index: 5;
    /*
     * Grid / list cards additionally use `overflow: hidden` on
     * `.ims-products-grid .ims-product-card` (product-listing-grid)
     * — the popover is clipped there unless that rule is overridden.
     * See blocks/product-listing-grid/style.css for the matching
     * `overflow: visible` lift (same :has selectors, higher specificity).
     */
}

.ims-volume-pricing-note {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: help;
}

.ims-volume-pricing-note__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--color-cta, #FAB000);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.ims-volume-pricing-note:focus-visible {
    outline: 2px solid var(--color-cta, #FAB000);
    outline-offset: 3px;
    border-radius: 4px;
}

.ims-volume-pricing-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(300px, 80vw);
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    color: #111111;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 20;
}

.ims-volume-pricing-note:hover .ims-volume-pricing-popover,
.ims-volume-pricing-note:focus .ims-volume-pricing-popover,
.ims-volume-pricing-note:focus-within .ims-volume-pricing-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ims-volume-pricing-popover strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ims-volume-pricing-popover__table {
    width: 100%;
    border-collapse: collapse;
}

.ims-volume-pricing-popover__table th,
.ims-volume-pricing-popover__table td {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    text-align: left;
    font-size: 12px;
}

.ims-volume-pricing-popover__table th {
    background: #f9fafb;
    font-weight: 700;
}

/* ==========================================================================
   Catalog Page Link
   ========================================================================== */

.ims-catalog-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ims-text-primary);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: color 0.2s ease;
}

.ims-catalog-page-link:hover {
    color: var(--ims-text-primary);
    text-decoration: underline;
}

.ims-catalog-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.ims-catalog-icon path {
    stroke: #7f1d1d;
    stroke-width: 0.6;
}

.ims-catalog-page-link span {
    font-weight: 500;
}

/* ==========================================================================
   SDS Document Links
   ========================================================================== */

.ims-sds-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.ims-sds-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ims-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ims-sds-link:hover {
    color: var(--ims-accent-blue);
    text-decoration: underline;
}

.ims-sds-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.ims-sds-link span {
    font-weight: 500;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.ims-products-loading {
    text-align: center;
    padding: 3rem;
    color: var(--ims-text-muted);
}

.ims-products-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ims-border-color);
    border-top-color: var(--ims-accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   No Products Found
   ========================================================================== */

.ims-no-products {
    text-align: center;
    padding: 3rem;
    background: var(--ims-bg-white);
    border: 1px solid var(--ims-border-color);
    border-radius: 8px;
}

.ims-no-products-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.ims-no-products-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ims-text-primary);
    margin-bottom: 0.5rem;
}

.ims-no-products-text {
    font-size: 0.875rem;
    color: var(--ims-text-secondary);
}

/* ==========================================================================
   Product loop range indicator ("Showing 1–12 of 48 products")
   Rendered once at the top of .ims-product-loop by product-listing-loop/render.php.
   Values are updated client-side by InfiniteScroll.syncCounts() as new batches
   append, and re-rendered server-side by the full-swap AJAX on filter changes.
   ========================================================================== */

.ims-loop-range {
    font-size: 0.875rem;
    color: var(--ims-text-secondary, #6b7280);
    padding: 0 0 0.75rem;
    margin: 0 0 0.75rem;
    border-bottom: 1px solid #e8eaed;
}

.ims-loop-range strong {
    font-weight: 600;
    color: var(--ims-text-primary, #1a1a1a);
}