/**
 * Product Listing Grid Block Styles
 * 
 * @package IMS_by_Soul_Country
 */

/* Editor preview styles */
.ims-product-listing-grid-editor .ims-product-preview-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div {
    border-bottom: none;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div:first-child {
    border-radius: 8px 8px 0 0;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid var(--color-border);
}

/* Grid layout styles
 * NOTE: `.ims-products-container` in assets/css/product-listing.css sets
 * `display: flex; flex-direction: column` — which has the same specificity
 * as a single-class `.ims-products-grid` selector and wins by load order.
 * We scope to `.ims-products-container.ims-products-grid` so the grid rules
 * bump specificity above the container's flex-column default.
 */
.ims-products-container.ims-products-grid {
    display: grid;
    gap: 1.5rem;
    flex-direction: initial;
}

.ims-products-container.ims-products-grid.ims-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ims-products-container.ims-products-grid.ims-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ims-products-container.ims-products-grid.ims-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.ims-products-container.ims-products-grid.ims-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ims-products-container.ims-products-grid.ims-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ==========================================================================
   Grid card — matches redesign-product-listing prototype .prod-card.
   The base .ims-product-card rules (in assets/css/product-listing.css) define
   a horizontal layout for the old design; here we restyle to a compact,
   vertical card: image on top, body in the middle, footer (qty + CTAs) at
   the bottom.
   ========================================================================== */

.ims-products-grid .ims-product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid var(--ims-border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    /* Make the card a size container so the footer can respond to the
       card's own width rather than the viewport — cards at 3 columns on
       desktop and 1 column on mobile can share the same breakpoint rules. */
    container-type: inline-size;
    container-name: ims-card;
}

.ims-products-grid .ims-product-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/*
 * Volume-pricing popover ( `.ims-volume-pricing-popover` ) is positioned
 * above `.ims-volume-pricing-note` with `position: absolute`. The card
 * uses `overflow: hidden` so imagery respects the 12px radius; that
 * same clip also cuts off the popover at the card border. When the
 * user hovers or focuses the note, lift the stacking context (see
 * product-listing.css) and allow overflow so the tooltip can extend past
 * the card chrome.
 */
.ims-products-grid .ims-product-card:has(.ims-volume-pricing-note:hover),
.ims-products-grid .ims-product-card:has(.ims-volume-pricing-note:focus),
.ims-products-grid .ims-product-card:has(.ims-volume-pricing-note:focus-within) {
    overflow: visible;
    z-index: 5;
}

/* Image: full width, fixed prototype height, divider underneath. */
.ims-products-grid .ims-product-image {
    width: 100%;
    height: 216px;
    margin: 0;
    padding: 6px 0;
    background: #ffffff !important;
    border-bottom: 1px solid var(--ims-border-color, #e5e7eb);
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ims-products-grid .ims-product-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Suppress the grey shimmer placeholder inside grid/list cards — keep the
   image wrapper plain white per the prototype. */
.ims-products-grid .ims-product-image::before {
    display: none !important;
}

.ims-products-grid .ims-product-image img {
    opacity: 1 !important;
}

.ims-products-grid .ims-product-image img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    margin: 0 auto;
}

/* Info (body): title first, SKU pill second, price third. */
.ims-products-grid .ims-product-info {
    padding: 10px 12px;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
}

.ims-products-grid .ims-product-title {
    order: 1;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 6px 0;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ims-products-grid .ims-product-title a:hover {
    /* Subtle lighter-grey shift on hover — avoid the yellow hover which
       clashes with the gold SKU pill directly beneath the title. */
    color: #4b5563;
}

/* Layout-only overrides for the listing card sku pill — visual sizing
   (padding, font-size, gap, radius) comes from the canonical .ims-product-sku
   base in assets/css/product-listing.css, which now matches the mini cart
   pill size site-wide. */
.ims-products-grid .ims-product-sku {
    order: 2;
    margin: 0 0 10px 0;
}

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

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

/* The listing card markup currently has no icon; this guards against any
   legacy SVG slipping in and breaking the pill. */
.ims-products-grid .ims-product-sku svg {
    display: none !important;
}

.ims-products-grid .ims-product-image { order: 0; }
.ims-products-grid .ims-product-info  { order: 1; }

.ims-products-grid .ims-price-main {
    margin-bottom: 0;
}

.ims-products-grid .ims-price-amount {
    font-size: 20px;
    font-weight: 800;
}

.ims-products-grid .ims-price-unit {
    font-size: 11.5px;
    font-weight: 400;
}

/* Grid-view sale display: scale strikethrough + pill proportional to
   the 20px active amount so the on-sale row reads as one composed unit
   rather than a giant price next to a thumbnail-sized strikethrough. */
.ims-products-grid .ims-price-regular {
    font-size: 13px;
}

.ims-products-grid .ims-price-discount {
    font-size: 10px;
    padding: 2px 6px;
}

/* The card markup nests .ims-price-section and .ims-cart-section inside
   .ims-product-actions. To place the price below the part-number pill in the
   body (without touching PHP), we dissolve .ims-product-actions with
   `display: contents` so its children become direct flex items of the card,
   then reorder them: info → price → cart footer. */
.ims-products-grid .ims-product-actions {
    display: contents;
}

/* Price now lives between info and cart, visually inside the body column. */
.ims-products-grid .ims-price-section {
    order: 2;
    padding: 0 12px 10px;
    margin: -4px 0 0;
    background: #ffffff;
    text-align: left;
}

/* Cart section becomes the footer. CSS Grid so we can keep qty in column 1
   and both buttons in column 2, stacked when the card is too narrow to
   fit cart + quote side-by-side. When stacked, the quote button inherits
   the same column-2 width as the add-to-cart above it. */
.ims-products-grid .ims-cart-section {
    order: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-top: 1px solid var(--ims-border-color, #e5e7eb);
    margin-top: auto;
}

.ims-products-grid .ims-quantity-row {
    grid-column: 1;
    grid-row: 1;
    gap: 0;
    justify-content: flex-start;
}

.ims-products-grid .ims-quantity-label {
    display: none;
}

.ims-products-grid .ims-add-to-cart {
    grid-column: 2;
    grid-row: 1;
    /* Never shrink below the rendered text width — the button label must
       stay fully legible even when the card is very narrow. */
    min-width: max-content;
    width: auto;
    padding: 9px 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ims-products-grid .ims-add-to-quote {
    /* Lives in column 3 alongside add-to-cart by default; when the card
       narrows past (max-width: 320px) below, it drops to row 2 of
       column 2 so it sits directly beneath add-to-cart at the same
       width. min-width: max-content stops it shrinking below its label. */
    grid-column: 3;
    grid-row: 1;
    width: auto;
    min-width: max-content;
    padding: 7.5px 10px;
    font-size: 12px;
    white-space: nowrap;
    /* Match the modal's gold outline treatment so the quote button is
       visually distinct from the dark add-to-cart primary. */
    background: transparent;
    color: var(--color-cta, #FAB000);
    border: 1.5px solid var(--color-cta, #FAB000);
}

.ims-products-grid .ims-add-to-quote:hover {
    background: var(--color-gold-light, #FDE17F);
    color: var(--color-cta, #FAB000);
    border-color: var(--color-cta, #FAB000);
}

/* ==========================================================================
   Footer responsive behaviour (grid view only)
   Each card is a size container (container-name: ims-card). As the card
   gets narrower we first shorten "ADD TO QUOTE" → "QUOTE", then stack the
   quote button beneath the add-to-cart row when there still isn't room.
   ========================================================================== */

/* Narrow card: shorten the quote label to just "QUOTE" and drop it to
   row 2 in column 2 so it sits directly beneath the add-to-cart at the
   same width. Column 3 collapses to zero once nothing occupies it. */
@container ims-card (max-width: 320px) {
    .ims-products-grid .ims-add-to-quote {
        grid-column: 2;
        grid-row: 2;
        font-size: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    .ims-products-grid .ims-add-to-quote::after {
        content: "QUOTE";
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.05em;
    }
}

/* ==========================================================================
   Quick Info — "QUICK INFO" text button appended to each card by
   assets/js/quick-info.js, sibling of .ims-price-section.
   ========================================================================== */

.ims-products-grid .ims-quick-info-btn {
    order: 3;
    align-self: flex-start;
    margin: -2px 12px 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

.ims-products-grid .ims-cart-section {
    order: 4;
}

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

/* Eye-in-a-circle icon before the "Quick Info" label. Inherits currentColor
   so it matches the grey label text and darkens on hover with the button. */
.ims-quick-info-btn .ims-quick-info-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.ims-quick-info-btn .ims-quick-info-label {
    display: inline-block;
    line-height: 1;
}

/* Highlight the card currently shown in the quick-info modal. */
.ims-product-card.qv-active {
    box-shadow: 0 0 0 2px var(--color-cta, #FAB000), 0 8px 20px rgba(250, 176, 0, 0.18);
    border-color: var(--color-cta, #FAB000);
}

/* ==========================================================================
   Hidden card metadata (grid view)
   ========================================================================== */

.ims-products-grid .ims-more-info-btn,
.ims-products-grid .ims-catalog-page-link,
.ims-products-grid .ims-sds-documents,
.ims-products-grid .ims-returnable-status,
.ims-products-grid .ims-prop65-warning,
.ims-products-grid .ims-product-breadcrumb,
.ims-products-grid .ims-product-brand,
.ims-products-grid .ims-product-stock-row,
.ims-products-grid .ims-product-categories,
.ims-products-grid .ims-volume-pricing,
.ims-products-grid .ims-price-label,
.ims-products-grid .ims-price-ex-vat {
    display: none !important;
}

@media (max-width: 1024px) {
    .ims-products-container.ims-products-grid.ims-columns-4,
    .ims-products-container.ims-products-grid.ims-columns-5,
    .ims-products-container.ims-products-grid.ims-columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ims-products-container.ims-products-grid.ims-columns-2,
    .ims-products-container.ims-products-grid.ims-columns-3,
    .ims-products-container.ims-products-grid.ims-columns-4,
    .ims-products-container.ims-products-grid.ims-columns-5,
    .ims-products-container.ims-products-grid.ims-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (phones, phones in landscape, small tablets in portrait):
 * collapse card view to a single column so each card has the full
 * viewport width to lay out the image, body, and actions. The earlier
 * 480px threshold was too narrow — it left 481–768px showing two
 * cramped cards per row. The 768px breakpoint here intentionally wins
 * over the 2-column rule above via `!important`. */
@media (max-width: 768px) {
    .ims-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Infinite-scroll sentinel / status footer.
 *
 * Sits at the bottom of the product loop. Does two jobs:
 *   1) It's the element the IntersectionObserver watches to trigger the
 *      next-page fetch.
 *   2) It replaces the old numbered pagination with a live "Showing N of M
 *      items" counter, and during a fetch swaps that counter for an
 *      animated "Loading next N…" indicator which disappears once the new
 *      batch is in the DOM.
 */
.ims-infinite-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0 8px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

/* Hide entirely when the query returned nothing — the empty-state card in
   the grid is already communicating that. */
.ims-infinite-sentinel[data-total="0"] {
    display: none;
}

.ims-infinite-status {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 22px;
}

.ims-infinite-status strong {
    color: #1f2937;
    font-weight: 600;
}

/* Loading row is hidden until the sentinel is actively fetching. */
.ims-infinite-loading {
    display: none;
    align-items: center;
    gap: 10px;
}

.ims-infinite-sentinel.is-loading .ims-infinite-count {
    display: none;
}

.ims-infinite-sentinel.is-loading .ims-infinite-loading {
    display: inline-flex;
}

.ims-infinite-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-top-color: #1f2937;
    border-radius: 50%;
    animation: ims-infinite-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* ── Infinite-scroll card reveal ─────────────────────────────────────
 * Newly appended cards get .ims-card-enter from the JS, with an inline
 * animation-delay that staggers each card by ~50ms (capped at ~360ms
 * for the whole batch). The `both` fill mode keeps the card invisible
 * during its delay window so we never get a flash of the end state.
 * ──────────────────────────────────────────────────────────────────── */
@keyframes ims-card-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ims-product-card.ims-card-enter {
    animation: ims-card-enter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .ims-product-card.ims-card-enter {
        animation: none;
    }
}

/* ==========================================================================
   List view — .ims-view--list switches the card to a horizontal row:
     [ 130px image ][ body (title + part# + price) ][ 160px actions ]
   Uses CSS grid on the card itself for deterministic column sizing, which
   avoids the flex-wrap / align-items-stretch issues that plagued the flex
   version of this layout.

   The view toggle persists the chosen view in localStorage and stamps
   `ims-view--list` on <html>/<body> for every page on the site (see
   assets/js/product-listing-filters.js). That means any other context
   that re-uses the listing-card markup (related-products carousel on
   the PDP, etc.) would otherwise inherit the list rendering. Such
   contexts opt out by adding `ims-cards-only` next to `ims-products-grid`
   on their wrapper — every selector below is scoped with
   `:not(.ims-cards-only)` so cards-only contexts always render as cards.
   ========================================================================== */

.ims-view--list .ims-products-grid:not(.ims-cards-only) {
    grid-template-columns: 1fr !important;
    gap: 6px;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-card {
    display: grid !important;
    grid-template-columns: 130px 1fr 180px;
    grid-template-rows: auto auto auto;
    align-items: stretch;
    flex-direction: row; /* harmless; display:grid wins */
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
    min-height: 110px;
    transform: none !important;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: none;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
    height: auto;
    min-height: 110px;
    max-height: 140px;
    padding: 8px;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid var(--ims-border-color, #e5e7eb);
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-image a,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-image {
    box-sizing: border-box;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Body column — title + part# pill, sits above the price row. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 16px 4px;
    min-width: 0;
    flex: initial;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-title {
    order: 1;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    /* Override the grid-view webkit-box clamp so the title wraps to a
       second/third line instead of truncating with an ellipsis when the
       viewport narrows. */
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-sku {
    order: 2;
    margin: 0;
}

/* Dissolve .ims-product-actions so .ims-price-section and .ims-cart-section
   become direct grid items of the card. Price lives in column 2 (body column)
   beneath the info, cart sits in column 3 spanning both rows as the right
   panel. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-actions {
    display: contents !important;
}

/* Price placed under the info in the body column. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-price-section {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0 16px 10px;
    background: transparent;
    text-align: left;
    align-self: start;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-price-amount {
    font-size: 17px;
    font-weight: 800;
}

/* List-view sale display: tweak from the grid overrides so the
   strikethrough scales down with the 17px active amount. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-price-regular {
    font-size: 12px;
}

/* Quick-info link: column 2, row 3, beneath the price. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-quick-info-btn {
    grid-column: 2;
    grid-row: 3;
    margin: 0 16px 10px;
    padding: 0;
    align-self: start;
    justify-self: start;
}

/* Cart becomes the full-height right panel. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-cart-section {
    grid-column: 3;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: auto;
    padding: 10px 12px;
    border-top: none;
    border-left: 1px solid var(--ims-border-color, #e5e7eb);
    background: var(--ims-bg-light, #f9fafb);
    margin: 0;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-quantity-row {
    width: 100%;
    justify-content: center;
}
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-quantity-wrapper {
    width: auto;
    justify-content: center;
}

.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-add-to-cart,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-add-to-quote {
    width: 100%;
    flex: none;
    text-align: center;
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* Prototype's list row shows only: image | title + part# + price | qty/CTAs.
   Keep the card lean by hiding the same metadata we hide in grid view. */
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-catalog-page-link,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-sds-documents,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-sds-links,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-sds-link,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-returnable-status,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-prop65-warning,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-breadcrumb,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-brand,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-stock-row,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-categories,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-volume-pricing,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-price-label,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-price-ex-vat,
.ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-more-info-btn {
    display: none !important;
}

/* ==========================================================================
   List view — mobile reflow.
   On phones the third column (qty + add-to-cart + add-to-quote) starves
   the body column and the title wraps to 5+ lines. Drop the actions
   column and let the cart-section span the full card width on a fourth
   row below the image + body block, with its children laid out as a
   single horizontal row to preserve vertical space.

   Layout becomes:
     [ image ][ title + part# ]
     [ image ][ price         ]
     [ image ][ quick info    ]
     [ qty stepper | Add to Cart | Add to Quote (full-width row) ]
   ========================================================================== */
@media (max-width: 600px) {
    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-card {
        grid-template-columns: 110px 1fr;
    }

    /* Image now spans only the three body rows; the cart row sits
       beneath both columns. */
    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-product-image {
        grid-row: 1 / 4;
    }

    /* Cart section: full-width fourth row, horizontal layout. The
       border that used to separate it from the body (border-left in
       desktop) becomes a top border so it still reads as its own
       region. */
    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-cart-section {
        grid-column: 1 / -1;
        grid-row: 4;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 12px;
        border-left: none;
        border-top: 1px solid var(--ims-border-color, #e5e7eb);
    }

    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-quantity-row {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    /* Buttons share the remaining row width equally instead of each
       filling 100% of a column. min-width keeps the labels readable. */
    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-add-to-cart,
    .ims-view--list .ims-products-grid:not(.ims-cards-only) .ims-add-to-quote {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* =============================================================
 * Per-product NetSuite Minimum Order Quantity inline note.
 * Rendered just below the .ims-quantity-wrapper inside
 * .ims-quantity-row on listing cards (grid + list layouts) when a
 * product has _netsuite_minimum_quantity > 1.
 * ============================================================= */
.ims-quantity-row .ims-quantity-min-note {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
}