/* ─────────────────────────────────────────────────────────────────────────────
   Stock display design system
   Covers: product detail accordion · product grid · cart pills · checkout block
   ───────────────────────────────────────────────────────────────────────────── */

/* Tokens */
:root {
    --stock-in-dot:      #22c55e;
    --stock-in-text:     #15803d;
    --stock-in-bg:       #f0fdf4;
    --stock-in-border:   #bbf7d0;
    --stock-out-dot:     #ef4444;
    --stock-out-text:    #b91c1c;
    --stock-out-bg:      #fef2f2;
    --stock-out-border:  #fecaca;
    --stock-warn-text:   #92400e;
    --stock-warn-bg:     #fffbeb;
    --stock-warn-border: #fde68a;
    --stock-panel-bg:    #f8fafc;
    --stock-panel-border:#e2e8f0;
    --stock-text-primary:#1e3a5f;
    --stock-text-muted:  #64748b;
    --stock-radius:      6px;
    --stock-radius-sm:   4px;
}

/* ── Status dot ─────────────────────────────────────────────────────────────── */
.stock-dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}
.stock-dot--sm { width: 6px; height: 6px; }
.stock-dot--in   { background: var(--stock-in-dot);  box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.stock-dot--out  { background: var(--stock-out-dot); box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
.stock-dot--warn { background: #f59e0b;              box-shadow: 0 0 0 2px rgba(245,158,11,.2); }

/* ── Status badge ───────────────────────────────────────────────────────────── */
.stock-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: var(--stock-radius-sm);
    white-space: nowrap;
    border: 1px solid transparent;
}
.stock-badge--sm { font-size: 11px; padding: 2px 6px; }
.stock-badge--in  { color: var(--stock-in-text);  background: var(--stock-in-bg);  border-color: var(--stock-in-border); }
.stock-badge--out { color: var(--stock-out-text); background: var(--stock-out-bg); border-color: var(--stock-out-border); }

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT DETAIL — accordion panel
   ───────────────────────────────────────────────────────────────────────────── */
.stock-panel {
    margin-top: 16px;
    border: 1px solid var(--stock-panel-border);
    border-radius: var(--stock-radius);
    background: var(--stock-panel-bg);
    overflow: hidden;
}

.stock-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--stock-text-muted);
    border-bottom: 1px solid var(--stock-panel-border);
}

/* Branch row (shared between flat + summary) */
.stock-branch__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--stock-panel-border);
    cursor: default;
}
.stock-branch__row:last-child,
.stock-branch:last-child .stock-branch__row { border-bottom: none; }
.stock-branch__row--flat { cursor: default; }

.stock-branch__name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--stock-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accordion (details/summary) */
.stock-branch { border-bottom: 1px solid var(--stock-panel-border); }
.stock-branch:last-child { border-bottom: none; }

.stock-branch > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.stock-branch > summary::-webkit-details-marker { display: none; }
.stock-branch > summary:hover { background: rgba(0,0,0,.03); }

.stock-branch__chevron {
    margin-inline-start: auto;
    color: var(--stock-text-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.stock-branch[open] > summary .stock-branch__chevron { transform: rotate(180deg); }

/* Warehouse sub-rows */
.stock-branch__warehouses {
    background: #fff;
    border-top: 1px solid var(--stock-panel-border);
    padding: 4px 0;
}

.stock-warehouse__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 30px;
    border-bottom: 1px solid #f1f5f9;
}
.stock-warehouse__row:last-child { border-bottom: none; }

[dir="rtl"] .stock-warehouse__row { padding: 7px 30px 7px 14px; }

.stock-warehouse__name {
    flex: 1;
    font-size: 12px;
    color: var(--stock-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART — line item branch stock rows (datagrid cell)
   ───────────────────────────────────────────────────────────────────────────── */
.cs-cart-stock-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.cs-cart-stock-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--stock-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile stock pill + branch list inside shift-mobile-row — hidden on desktop */
.stock-cart-pill--mobile,
.cs-cart-stock-mobile,
.cs-cart-stock-list--mobile {
    display: none;
}

@media (max-width: 1279px) {
    .cs-cart-stock-mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        margin-top: 6px;
        padding: 8px 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    .stock-cart-pill--mobile {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        align-self: flex-start;
    }

    .cs-cart-stock-list--mobile {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .cs-cart-stock-list--mobile .cs-cart-stock-row {
        padding: 3px 0;
    }

    /* Hide the generic Oro inventory status label inside mobile row */
    .shift-mobile-row > .status-label {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT GRID — compact dots
   ───────────────────────────────────────────────────────────────────────────── */
.stock-grid {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stock-grid__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-grid__branch {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--stock-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART — line item status pill
   ───────────────────────────────────────────────────────────────────────────── */
.stock-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.stock-cart-pill--covered  { color: var(--stock-in-text);   background: var(--stock-in-bg);   border-color: var(--stock-in-border); }
.stock-cart-pill--transfer { color: var(--stock-warn-text); background: var(--stock-warn-bg); border-color: var(--stock-warn-border); }
.stock-cart-pill--none     { color: var(--stock-out-text);  background: var(--stock-out-bg);  border-color: var(--stock-out-border); }

/* ─────────────────────────────────────────────────────────────────────────────
   CHECKOUT — warning block above place_order
   ───────────────────────────────────────────────────────────────────────────── */
.stock-checkout-block {
    margin: 0 0 16px;
    border-radius: var(--stock-radius);
    overflow: hidden;
    border: 1px solid var(--stock-warn-border);
}

.stock-checkout-block__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--stock-warn-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--stock-warn-text);
    border-bottom: 1px solid var(--stock-warn-border);
}

.stock-checkout-block__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}
.stock-checkout-block__item:last-child { border-bottom: none; }

.stock-checkout-block__sku {
    font-weight: 700;
    color: var(--stock-text-primary);
    flex-shrink: 0;
}
.stock-checkout-block__label {
    flex: 1;
    color: var(--stock-text-muted);
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-checkout-block__status--transfer { color: var(--stock-warn-text); font-weight: 600; flex-shrink: 0; }
.stock-checkout-block__status--none     { color: var(--stock-out-text);  font-weight: 600; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   BRANCH STOCK MESSAGE (product detail — real-time feedback)
   ───────────────────────────────────────────────────────────────────────────── */
.branch-stock-message {
    margin: 0;
    direction: inherit;
}
.branch-stock-message:empty { display: none; }

.branch-stock-message--warning,
.branch-stock-message--error,
.branch-stock-message--info,
.branch-stock-message--neutral,
.branch-stock-message--notice {
    font-size: 13px;
    border-radius: 0 0 var(--stock-radius) var(--stock-radius);
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.branch-stock-message--warning { color: var(--stock-warn-text);  background: var(--stock-warn-bg);  border-top: 1px solid var(--stock-warn-border); }
.branch-stock-message--error   { color: var(--stock-out-text);   background: var(--stock-out-bg);   border-top: 1px solid var(--stock-out-border); }
.branch-stock-message--info    { color: #1e40af; background: #eff6ff; border-top: 1px solid #bfdbfe; }
.branch-stock-message--neutral { color: var(--stock-text-muted); background: var(--stock-panel-bg); border-top: 1px solid var(--stock-panel-border); }
.branch-stock-message--notice  { color: #78350f; background: #fef3c7; border-top: 1px solid #fcd34d; }

/* ── RTL overrides ──────────────────────────────────────────────────────────── */
[dir="rtl"] .stock-branch__chevron { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .stock-branch[open] > summary .stock-branch__chevron { transform: rotate(180deg); }

/* ── Status pills (grid + accordion + cart + checkout) ───────────────────── */
.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    min-height: 24px;
}
.stock-pill--sm { font-size: 11px; padding: 3px 8px; }
.stock-pill--sufficient,
.stock-pill--in       { color: var(--stock-in-text);  background: var(--stock-in-bg);  border: 1px solid var(--stock-in-border); }
.stock-pill--partial,
.stock-pill--warning  { color: var(--stock-warn-text); background: var(--stock-warn-bg); border: 1px solid var(--stock-warn-border); }
.stock-pill--info     { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; }
.stock-pill--empty,
.stock-pill--out,
.stock-pill--blocked  { color: var(--stock-out-text); background: var(--stock-out-bg); border: 1px solid var(--stock-out-border); }
.stock-pill--neutral,
.stock-pill--more     { color: var(--stock-text-muted); background: var(--stock-panel-bg); border: 1px solid var(--stock-panel-border); }

/* Status-driven panel classes */
.stock-panel--sufficient { border-color: var(--stock-in-border); }
.stock-panel--partial    { border-color: var(--stock-warn-border); }
.stock-panel--empty      { border-color: var(--stock-out-border); }

/* Skeleton placeholder (no layout shift) */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: stock-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 999px;
    min-height: 18px;
    min-width: 80px;
}
.skeleton--pill { width: 100px; }
@keyframes stock-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse on status change */
.stock-cart-pill { transition: transform 200ms ease, opacity 200ms ease; }
.stock-cart-pill.pulse { animation: stock-pulse 600ms ease; }
@keyframes stock-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Branch row touch targets */
.stock-branch__row { min-height: 44px; }
.stock-branch__row:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Grid pills strip — mobile snap, RTL reversal via [dir] */
.stock-grid--pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.stock-grid--pills > .stock-pill { scroll-snap-align: start; flex: 0 0 auto; }

/* Checkout warning block */
.stock-checkout-block { border: 1px solid var(--stock-warn-border); background: var(--stock-warn-bg); border-radius: var(--stock-radius); padding: 12px 14px; margin: 12px 0; }
.stock-checkout-block__header { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stock-checkout-block__group { padding: 6px 0; }
.stock-checkout-block__group--unavailable { border-bottom: 1px dashed var(--stock-out-border); }
.stock-checkout-block__copy { margin: 0 0 6px; font-size: 13px; }
.stock-checkout-block__item { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.stock-checkout-block__icon--unavailable { color: var(--stock-out-text); }
.stock-checkout-block__icon--transfer    { color: var(--stock-warn-text); }
.stock-checkout-block__change-branch { display: inline-block; margin-top: 8px; font-size: 13px; text-decoration: underline; }

/* ── RTL coverage ──────────────────────────────────────────────────────── */
[dir="rtl"] .stock-grid--pills { flex-direction: row-reverse; }
[dir="rtl"] .stock-checkout-block__item { flex-direction: row-reverse; }
[dir="rtl"] .stock-checkout-block__header { flex-direction: row-reverse; }
[dir="rtl"] .stock-pill,
[dir="rtl"] .stock-cart-pill { flex-direction: row-reverse; }
[dir="rtl"] .stock-checkout-block__icon--transfer { transform: scaleX(-1); }

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT GRID — branch availability chips
   ───────────────────────────────────────────────────────────────────────────── */
.branch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    cursor: pointer;
}

.branch-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    white-space: nowrap;
    position: relative;
    transition: padding .15s ease;
}

.branch-chips .branch-chip--in,
.branch-chip.branch-chip--in  { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.branch-chips .branch-chip--out,
.branch-chip.branch-chip--out { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.branch-chip__code { display: inline; }
.branch-chip__name { display: none; font-weight: 500; }

/* Desktop: tooltip on hover */
@media (hover: hover) {
    .branch-chip:hover::after {
        content: attr(data-fullname);
        position: absolute;
        bottom: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
        background: #1e293b;
        color: #fff;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 30;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .branch-chip:hover::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 1px);
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: #1e293b;
        pointer-events: none;
        z-index: 30;
    }
}

/* Tap/click: expand chips to show full name */
.branch-chips--expanded .branch-chip__code { display: none; }
.branch-chips--expanded .branch-chip__name { display: inline; }
.branch-chips--expanded .branch-chip { padding: 3px 8px; }

/* RTL */
[dir="rtl"] .branch-chips { flex-direction: row-reverse; }
[dir="rtl"] .branch-chip:hover::after { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .branch-chip:hover::before { left: auto; right: 50%; transform: translateX(50%); }
/* ── Legend (always visible above chips) ─────────────────────────────── */
.branch-stock-legend {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--stock-text-muted);
}

.branch-stock-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.branch-stock-legend__item--in  { color: var(--stock-in-text); }
.branch-stock-legend__item--out { color: var(--stock-out-text); }

/* ── Chip icon (visible even when collapsed) ─────────────────────────── */
.branch-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    margin-inline-end: 3px;
    flex-shrink: 0;
}

.branch-chip--in .branch-chip__icon {
    background: var(--stock-in-dot);
    color: #fff;
}

.branch-chip--out .branch-chip__icon {
    background: var(--stock-out-dot);
    color: #fff;
}

/* ── Expanded chip text ──────────────────────────────────────────────── */
.branch-chip__status {
    font-weight: 500;
    margin-inline-start: 4px;
}

.branch-chip__qty {
    font-weight: 600;
    margin-inline-start: 2px;
    color: var(--stock-text-primary);
}

/* Make expanded chips wider to fit the text */
.branch-chips--expanded .branch-chip {
    padding: 4px 10px;
    font-size: 12px;
}

/* ── RTL ─────────────────────────────────────────────────────────────── */
[dir="rtl"] .branch-chip__icon { margin-inline-end: 0; margin-inline-start: 3px; }
[dir="rtl"] .branch-chip__status { margin-inline-start: 0; margin-inline-end: 4px; }
[dir="rtl"] .branch-chip__qty { margin-inline-start: 0; margin-inline-end: 2px; }

/* 1. Lock chips inside the product card */
.branch-chips {
    max-width: 100%;
}

.branch-chip {
    max-width: 100%;
    box-sizing: border-box;
}

/* 2. Let the expanded name shrink and wrap instead of overflowing */
.branch-chip__name {
    display: none;
    min-width: 0;                 /* critical: allows flex item to get narrower than its text */
}

.branch-chips--expanded .branch-chip {
    padding: 4px 8px;
    line-height: 1.35;            /* nicer multi-line spacing */
    align-items: flex-start;      /* keep icon at top when text wraps */
}

.branch-chips--expanded .branch-chip__name {
    display: inline;              /* shown */
    white-space: normal;          /* allow wrapping */
    word-break: break-word;
    overflow-wrap: break-word;
}
/* ─────────────────────────────────────────────────────────────────────────────
   SHOPPING LIST (cart) — mobile overflow fix
   The view page now uses the edit-grid, which has inline-editable cells that
   are wider than typical view cells. Without these rules the table forces the
   page wider than the viewport on phones.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .shopping-list-view,
    .shopping-list-container,
    .grid-container,
    [data-page-component-name="frontend-customer-user-shopping-list-grid"],
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Allow the grid table itself to scroll horizontally inside its own
       wrapper rather than expanding the page. */
    .shopping-list-view .grid-container,
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] .grid-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Shrink wide inline-editable inputs so they don't push the row beyond
       the viewport. */
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] input[type="number"],
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] input[name*="quantity"] {
        max-width: 72px;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Long SKUs / names must wrap rather than overflow. */
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] .grid-body-cell,
    [data-page-component-name="frontend-customer-user-shopping-list-grid"] .grid-body-cell {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Cart per-row branch stock list — already mobile-styled, but ensure it
       can't expand the row beyond the row's flex bounds. */
    .cs-cart-stock-mobile,
    .cs-cart-stock-list--mobile {
        max-width: 100%;
        box-sizing: border-box;
    }
    .cs-cart-stock-list--mobile .cs-cart-stock-row {
        min-width: 0;
    }
    .cs-cart-stock-list--mobile .cs-cart-stock-name {
        white-space: normal;
        word-break: break-word;
    }

    /* Mobile (≤767px): keep qty input readable — let vendor widths apply */
    .grid-body-cell-quantity,
    [data-name="cell-quantity"] {
        min-width: 0 !important;
        padding: 4px 6px !important;
    }
    .grid-body-cell-quantity-content,
    [data-role="cell-quantity-root"] {
        max-width: 100%;
        min-width: 0;
    }
    .grid-body-cell-quantity .form-quantity-row,
    [data-role="cell-quantity-root"] .form-quantity-row {
        gap: 2px;
    }
    .grid-body-cell-quantity .input-quantity-btn,
    [data-role="cell-quantity-root"] .input-quantity-btn {
        width: 24px;
        height: 24px;
        min-width: 0;
        padding: 0;
    }
    /* Per-branch cart list — tighten badge/typography so the 5 chips fit one line. */
    .cs-cart-stock-list--mobile .cs-cart-stock-row {
        font-size: 11px;
        padding: 2px 4px;
    }
    .cs-cart-stock-list--mobile .stock-badge {
        font-size: 10px;
        padding: 1px 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOPPING LIST (cart) — tablet (768–1099px, vendor's 'tablet' breakpoint).
   Pin a narrow fixed width on the qty cell, shrink the faux qty input, and let
   the header label wrap rather than push the row wide. Uses vendor's
   .responsive-shopping-list-grid-edit ancestor to win specificity over vendor
   rules, and forces table-layout:fixed so the widths actually take effect.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1099px) {
    .responsive-shopping-list-grid-edit .grid-table,
    .responsive-shopping-list-grid-edit table.grid {
        table-layout: fixed !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-item,
    .responsive-shopping-list-grid-edit .grid-header-cell-item {
        width: auto !important;
        word-break: break-word;
    }
    /* Let qty cell breathe — don't hard-pin the body cell width at tablet
       because the edit-grid uses CSS grid here and the cell spans multiple
       columns; a fixed width clips the faux input. */
    .responsive-shopping-list-grid-edit .grid-header-cell-quantity {
        width: 140px !important;
        max-width: 140px !important;
        min-width: 110px !important;
        box-sizing: border-box;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity .line-item-container__qty,
    .responsive-shopping-list-grid-edit .grid-header-cell-quantity .grid-header-cell__label-container {
        min-width: 0 !important;
        padding-right: 4px !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity .unit-select-root,
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity .single-unit {
        font-size: 11px;
    }
    /* Pin the other narrow columns so qty isn't forced to absorb the slack. */
    .responsive-shopping-list-grid-edit .grid-body-cell-sku,
    .responsive-shopping-list-grid-edit .grid-header-cell-sku {
        width: 130px !important;
        max-width: 130px !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-inventoryStatus,
    .responsive-shopping-list-grid-edit .grid-header-cell-inventoryStatus {
        width: 220px !important;
        max-width: 220px !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-price,
    .responsive-shopping-list-grid-edit .grid-header-cell-price,
    .responsive-shopping-list-grid-edit .grid-body-cell-subtotal,
    .responsive-shopping-list-grid-edit .grid-header-cell-subtotal {
        width: 110px !important;
        max-width: 110px !important;
    }
    /* Header labels wrap rather than stretching their column. */
    .responsive-shopping-list-grid-edit .grid-header-cell {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.2;
        vertical-align: middle;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOPPING LIST (cart) — desktop (≥1100px).
   Force table-layout:fixed so column widths stick. Pin narrow columns
   (qty 150px, sku 150px, price/subtotal 120px) and let item + inventory
   absorb the remaining space. Override vendor's 334px/414px .editable width
   inside the qty cell so it doesn't force the column wide.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .responsive-shopping-list-grid-edit .grid-table,
    .responsive-shopping-list-grid-edit table.grid {
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Item column gets all remaining slack */
    .responsive-shopping-list-grid-edit .grid-body-cell-item,
    .responsive-shopping-list-grid-edit .grid-header-cell-item {
        width: auto !important;
        min-width: 240px !important;
    }

    /* Compact typography inside the item cell */
    .responsive-shopping-list-grid-edit .grid-line-items,
    .responsive-shopping-list-grid-edit .grid-line-items__row-item,
    .responsive-shopping-list-grid-edit .grid-line-items__title,
    .responsive-shopping-list-grid-edit .grid-line-items__title-content,
    .responsive-shopping-list-grid-edit .grid-line-items__field-val {
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Narrow fixed-width neighbours */
    .responsive-shopping-list-grid-edit .grid-body-cell-sku,
    .responsive-shopping-list-grid-edit .grid-header-cell-sku {
        width: 150px !important;
        max-width: 150px !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity,
    .responsive-shopping-list-grid-edit .grid-header-cell-quantity {
        width: 150px !important;
        max-width: 150px !important;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-price,
    .responsive-shopping-list-grid-edit .grid-body-cell-subtotal,
    .responsive-shopping-list-grid-edit .grid-header-cell-price,
    .responsive-shopping-list-grid-edit .grid-header-cell-subtotal {
        width: 120px !important;
        max-width: 120px !important;
    }

    /* Inventory grows with available space (min 300px) */
    .responsive-shopping-list-grid-edit .grid-body-cell-inventoryStatus,
    .responsive-shopping-list-grid-edit .grid-header-cell-inventoryStatus {
        width: auto !important;
        min-width: 300px !important;
    }

    /* Override vendor's 334px / 414px inline-editor width inside qty cell
       ONLY in view mode — edit mode needs the full width for buttons */
    .responsive-shopping-list-grid-edit .grid-inline-editing-quantity .editable:not(.edit-mode),
    .responsive-shopping-list-grid-edit .grid-inline-editing-quantity .view-mode.editable {
        width: auto !important;
        min-width: 0 !important;
    }

    /* Hard cap the qty <td> in view mode so it doesn't force the column wide.
       Edit mode is excluded so the inline editor buttons stay visible. */
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity:not(.edit-mode),
    .responsive-shopping-list-grid-edit .grid-header-cell-quantity {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        overflow: hidden;
    }

    /* Prevent any child inside the qty cell from exceeding 150px */
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity:not(.edit-mode) * {
        max-width: 100% !important;
    }
}

/* ── Post-plan conservative fixes ──────────────────────────────────────────── */

/* GLOBAL (all breakpoints): stop SKU / name from breaking one character per line */
.responsive-shopping-list-grid-edit .break-all,
.responsive-shopping-list-grid-edit .grid-body-cell-sku,
.responsive-shopping-list-grid-edit .grid-line-items__title,
.responsive-shopping-list-grid-edit .grid-line-items__title-content {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* GLOBAL (all breakpoints): branch stock rows wrap when tight instead of squeezing name to 0px */
.cs-cart-stock-list .cs-cart-stock-row,
.cs-cart-stock-list--mobile .cs-cart-stock-row {
    flex-wrap: wrap;
    gap: 4px;
}

/* GLOBAL (all breakpoints): allow branch stock names to wrap and never shrink below 60px */
.cs-cart-stock-list .cs-cart-stock-name,
.cs-cart-stock-list--mobile .cs-cart-stock-name {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 60px !important;
}

/* ── Mobile (≤767px) ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Stop SKU / stock from bleeding into the checkbox/image column */
    .responsive-shopping-list-grid-edit .shift-mobile-row {
        margin-left: 0 !important;
    }

    /* Stock box now sits naturally inside the product column */
    .cs-cart-stock-mobile {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Compact mobile stock typography */
    .cs-cart-stock-list--mobile .cs-cart-stock-row {
        font-size: 12px;
        padding: 3px 0;
    }
    .cs-cart-stock-list--mobile .stock-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Stop unit label from wrapping to a second line */
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity .single-unit,
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity .unit-select-root {
        white-space: nowrap !important;
    }
}

/* ── Tablet (768–1099px) ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1099px) {
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity-content {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding-left: 0 !important;
    }
    .responsive-shopping-list-grid-edit .grid-header-cell-item .grid-header-cell__label-container {
        text-align: left !important;
        min-width: 0 !important;
    }
    .responsive-shopping-list-grid-edit .grid-header-cell {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOPPING LIST (cart) — mobile B2B clarity pass.
   Full-width card; bottom row reorganised as [qty] left, Unit/Total stacked
   right with a separator. Appended last so it wins source order.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Full-width card — kill any side margins the vendor row inherits */
    .responsive-shopping-list-grid-edit .grid-row,
    .responsive-shopping-list-grid-edit .grid-body-cell-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* All cells now fit; stop the horizontal scroll from the earlier rule. */
    [data-page-component-name="frontend-customer-user-shopping-list-edit-grid"] .grid-container {
        overflow-x: hidden !important;
    }

    /* Bottom row layout: qty left, price stack right. */
    .responsive-shopping-list-grid-edit .mobile-row,
    .responsive-shopping-list-grid-edit [data-name="cell-quantity"] ~ * {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .responsive-shopping-list-grid-edit .grid-body-cell-quantity {
        flex: 0 0 auto;
        order: 1;
    }

    .responsive-shopping-list-grid-edit .grid-body-cell-price,
    .responsive-shopping-list-grid-edit .grid-body-cell-subtotal {
        flex: 0 0 auto;
        text-align: right;
        order: 2;
        display: block;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-price {
        font-size: 12px;
        color: #6b7280;
    }
    .responsive-shopping-list-grid-edit .grid-body-cell-subtotal {
        font-size: 14px;
        font-weight: 600;
        margin-top: 2px;
    }

    /* Separator line + spacing above the bottom row.
       Margin pulled up so there's a visible gap between the product info
       section (image/name/sku/stock) and the qty/price row. */
    .responsive-shopping-list-grid-edit .grid-body-cell-quantity {
        border-top: 1px solid #e5e7eb;
        padding-top: 12px;
        margin-top: 14px;
    }

    /* Price + subtotal also get a bit of breathing room from the product
       info above them on the view variant (no qty separator there). */
    .responsive-shopping-list-grid-view .grid-body .grid-body-cell-price {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #e5e7eb;
    }

    /* ── Subgrid overflow fix ──────────────────────────────────────────────
       Vendor `responsive-shopping-list-grid-view.scss` (mobile-big) puts
       .grid-body-cell-item / -price / -subtotal in a CSS subgrid spanning
       `product / subtotal` columns of `.grid-main-container`. With
       `grid-template-columns: auto min-content min-content`, any wide child
       (long SKU, our branch-stock list) blows the row out past the viewport
       — observed as a 572px cell inside a 440px container.

       Drop the subgrid at mobile so each cell is a normal block constrained
       to the row width. We keep vendor's row ordering via grid-row. */
    .responsive-shopping-list-grid-view .grid-body .grid-body-cell-item,
    .responsive-shopping-list-grid-view .grid-body .grid-body-cell-price,
    .responsive-shopping-list-grid-view .grid-body .grid-body-cell-subtotal {
        display: block !important;
        grid-template-columns: none !important;
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Belt-and-braces: stop any descendant from pushing the row wider than
       its container. Required because grid items default to `min-width: auto`
       which is the content's intrinsic min-width, not 0. */
    .responsive-shopping-list-grid-view .grid-main-container,
    .responsive-shopping-list-grid-view .grid-row,
    .responsive-shopping-list-grid-view .grid-header-row {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ── RTL: branch stock chips overflow the card ────────────────────────
       Two root causes:
       1. Vendor sets `margin-left: -N` on `.shift-mobile-row` at mobile to
          tuck content under the product image. That's a *physical* property;
          in RTL it pushes the box past the visual edge. Our existing reset
          only covers `.responsive-shopping-list-grid-edit` — the view variant
          (used for the cart page) was not caught.
       2. `.stock-badge` is `white-space: nowrap`; the Arabic "متوفر / غير
          متوفر" labels don't fit beside dot+name on narrow rows, so the
          badge spills outside the card. */

    /* Neutralise the negative shift on BOTH grid variants */
    .responsive-shopping-list-grid-edit .shift-mobile-row,
    .responsive-shopping-list-grid-view .shift-mobile-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }

    /* Clamp the mobile branch container to its parent and allow rows to wrap
       — applies to both LTR and RTL, but the symptom only surfaces in RTL. */
    .cs-cart-stock-mobile,
    .cs-cart-stock-list--mobile {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .cs-cart-stock-list--mobile .cs-cart-stock-row {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .cs-cart-stock-list--mobile .cs-cart-stock-name {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    /* Let the badge wrap its label rather than nowrap-overflow.
       This is what makes the in-stock / out-of-stock indicator visible
       again on narrow RTL rows. */
    .cs-cart-stock-list--mobile .stock-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
    }
    .cs-cart-stock-list--mobile .stock-dot {
        flex: 0 0 auto;
    }
}

/* (desktop rules merged into the ≥1100px block above) */