/* PCH Customer Collect — front styles. Scoped to .pch- classes only. */

.pch-collect-banner {
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    color: #084298;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-size: 14px;
}

.pch-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 18px;
    overflow: hidden;
}
/* .pch-section-title — see line ~468 for the active Rhys-spec rules:
   font-size:14px, font-weight:700, color #1A6FAB for collect / #1a9a6a for deliver.
   The old block here (color #003d82, letter-spacing 0.5px, padding 14px 18px,
   border-bottom #e0e0e0) was a v1.0.45 leftover that didn't match Rhys's spec —
   stale block removed in v1.0.64 so live newdesign renders identical to local. */

.pch-line-method-toggle {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;     /* v1.0.16: fill parent so the two buttons are equal halves */
    box-sizing: border-box;
}
.pch-line-method-toggle > .pch-toggle-btn {
    flex: 1 1 0;     /* equal-width regardless of inner label length */
    min-width: 0;
}
/* v1.0.17 — Gutter Centre theme inline-styles .media (Bootstrap 4 utility class
   wrapping the cart-detailed-product-line content) with width: fit-content,
   which collapses our toggle row. Override with !important since inline styles
   can't be beaten otherwise. We don't know exactly which .media level holds
   the constraint, so target any .media inside cart-detailed-product-line and
   any direct .media ancestor of the toggle. */
.cart-detailed-product-line .media,
.cart-detailed-product-line .media-body,
.cart-item .media,
.cart-item .media-body {
    width: 100% !important;
    max-width: 100% !important;
}
.pch-line-method-toggle button {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #c0c0c0;
    background: #f0f0f0;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s ease, color .15s ease;
}
.pch-line-method-toggle button.active,
.pch-line-method-toggle button[data-method="collect"].active { background: #003d82; color: #fff; border-color: #003d82; }
.pch-line-method-toggle button[data-method="deliver"].active { background: #003d82; color: #fff; border-color: #003d82; }

.pch-line-method-toggle button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* v1.0.20 — split-state display: both buttons show as active with qty,
   followed by a one-line summary + "switch all to one method" link. */
.pch-line-method-toggle.pch-split-state .pch-toggle-btn.active {
    /* Slightly lighter blue so split-active reads differently from single-active */
    background: #1859a6;
    border-color: #1859a6;
}
.pch-split-indicator {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: #f0f7ff;
    border-left: 3px solid #003d82;
    color: #003d82;
    font-size: 12px;
    border-radius: 3px;
}
.pch-split-indicator strong { color: #003d82; }
.pch-split-indicator .pch-split-reset {
    margin-left: 8px;
    color: #b02a37;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.pch-split-indicator .pch-split-reset:hover { color: #842029; }

/* ─────────────────────────────────────────────────────────────
   v1.0.48 — Iteration 3: inline red stock-warn banner.
   Replaces v1.0.44's `.pch-overflow-prompt`. Two simple radio
   options: Reduce qty / Switch to delivery. No more N+M split.
   ───────────────────────────────────────────────────────────── */
.pch-stock-warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 18px;
    background: #fff5f5;             /* design red-bg */
    border: 1px solid #fecaca;       /* design red-border */
    border-left: 4px solid #dc2626;  /* design red accent */
    border-radius: 4px;
    margin-top: 8px;
    font-size: 13px;
}
.pch-stock-warn-icon {
    width: 22px; height: 22px;
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
.pch-stock-warn-body { flex: 1; min-width: 0; }
.pch-stock-warn-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 8px;
}
.pch-stock-warn-options { display: flex; flex-direction: column; gap: 5px; }
.pch-stock-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.pch-stock-opt input { display: none; }
.pch-stock-opt-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid #e2e0db;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.pch-stock-opt input:checked + .pch-stock-opt-dot {
    border-color: #1a9a6a;
    background: #1a9a6a;
}
.pch-stock-opt input:checked + .pch-stock-opt-dot::after {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
}
.pch-stock-opt-label { font-size: 12.5px; color: #2a2a2a; }
.pch-stock-opt-label strong { font-weight: 600; }
.pch-stock-opt-label .pch-next { color: #1A6FAB; font-weight: 600; }
.pch-stock-warn-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.pch-btn-apply-stock {
    height: 32px; padding: 0 16px;
    background: #E8531A;             /* design orange */
    color: #fff; border: none;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.pch-btn-apply-stock:hover { background: #d04817; }
.pch-btn-cancel-stock {
    height: 32px; padding: 0 12px;
    background: transparent;
    color: #888;
    border: 1px solid #e2e0db;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.pch-btn-cancel-stock:hover { color: #4a4a4a; border-color: #c8c8c8; }

/* ─────────────────────────────────────────────────────────────
   v1.0.49 — Iteration 4: Update Basket confirm bar.
   Appears when user changes method on a cart line. Defers commit
   until explicit "Update Basket" click. Undo restores original.
   ───────────────────────────────────────────────────────────── */
/* Higher specificity (0,2,1) to beat client theme + module rules that were
   keeping the bar inline next to the toggle buttons. Force flex:0 0 100% +
   width:100% so when the parent has flex-wrap, the bar lands on its own row
   and spans the full line under the toggle. */
.pch-line-method-toggle .pch-update-bar,
.pch-extra-toggle ~ .pch-update-bar,
.cart-item .pch-update-bar,
.pch-update-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 9px 18px !important;
    margin: 8px 0 0 !important;
    background: #fffbeb !important;             /* design --amber-bg */
    border: 1px solid #fcd34d !important;       /* design --amber-border */
    border-radius: 6px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
/* Ensure parent toggle row allows wrapping so the bar can drop to its own line. */
.pch-line-method-toggle,
.pch-extra-toggle {
    flex-wrap: wrap !important;
}
.pch-update-bar-msg {
    font-size: 12.5px !important;
    color: #d97706 !important;       /* design --amber */
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;       /* take all leftover horizontal space */
    min-width: 0 !important;
    /* v1.0.76 — petyus catch: text was wrapping to two lines because the
       message wasn't expanding to claim the available width between icon and
       buttons. flex:1 + nowrap lets it stretch and stay on one line. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pch-update-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: #d97706;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.pch-update-bar-btns { display: flex; gap: 7px; }
/* v1.0.75 — force single-line layout for both Update Basket + Undo so text doesn't
   wrap to two lines when the parent flex container is narrow. Theme buttons by
   default get word-wrap which split "Update Basket" onto two rows. !important +
   inline-flex centering + white-space:nowrap + line-height:1 fixes it on any theme. */
.pch-btn-update-confirm,
.pch-btn-update-undo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-family: inherit !important;
}
.pch-btn-update-confirm {
    padding: 0 14px !important;
    background: #E8531A !important;
    color: #fff !important;
    border: none !important;
}
.pch-btn-update-confirm:hover { background: #d04817 !important; }
.pch-btn-update-undo {
    padding: 0 10px !important;
    background: transparent !important;
    color: #888 !important;
    border: 1px solid #e2e0db !important;
    font-weight: 500 !important;
}
.pch-btn-update-undo:hover { color: #4a4a4a; }

/* ─────────────────────────────────────────────────────────────
   v1.0.50 — Iteration 5: Order Summary notices (Geraint design)
   Blue "X items ready to collect" + amber "Y items for delivery"
   blocks injected at top of cart-summary panel.
   ───────────────────────────────────────────────────────────── */
.pch-collect-notice,
.pch-delivery-notice {
    /* v1.0.59: force own row + full width when injected as sibling of a flex
       cart-summary header (was overlapping the "Order Summary" title). */
    flex: 0 0 100%;
    width: calc(100% - 36px);
    display: block;
    margin: 12px 18px;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid;
    box-sizing: border-box;
}
.pch-collect-notice {
    background: #f0f7ff;
    border-color: #c8dff5;
}
.pch-delivery-notice {
    /* PeterChamp 2026-06-09 - match basket mockup: delivery notice is TEAL, not amber. */
    background: #f0fdf7;
    border-color: #b6e8d4;
}
.pch-notice-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}
.pch-notice-title {
    font-size: 12.5px;
    font-weight: 700;
}
.pch-collect-notice .pch-notice-title { color: #1A6FAB; }
.pch-delivery-notice .pch-notice-title { color: #1a9a6a; }

/* v1.0.79 — driver sub-block inside .pch-delivery-notice (per Rhys design 583-587).
   Names the longest-lead-time item: "<X> is setting your delivery date". */
.pch-dn-driver {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 8px !important;
    padding: 6px 8px !important;
    background: #fef3c7 !important;
    border-left: 3px solid #d97706 !important;
    border-radius: 3px !important;
    font-size: 11.5px !important;
    color: #92400e !important;
    line-height: 1.3 !important;
}
.pch-dn-driver-icon {
    color: #d97706 !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}
.pch-dn-driver strong {
    color: #78350f !important;
    font-weight: 700 !important;
}
.pch-notice-icon {
    width: 16px; height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pch-notice-icon-collect {
    background: #dbeafe;
}
.pch-notice-icon-collect::before {
    content: "";
    display: block;
    width: 11px; height: 11px;
    background: no-repeat center/contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6FAB' stroke-width='2'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
.pch-notice-icon-deliver {
    background: rgba(217,119,6,0.15);
}
.pch-notice-icon-deliver::before {
    content: "";
    display: block;
    width: 11px; height: 11px;
    background: no-repeat center/contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2'><rect x='1' y='3' width='15' height='13' rx='1'/><path d='M16 8h4l3 5v3h-7V8z'/></svg>");
}
.pch-notice-body {
    font-size: 12px;
    color: #4a4a4a;
    padding-left: 23px;
    line-height: 1.5;
}

/* v1.0.15 — inline message after toggle (no-collect-stock + AJAX errors) */
.pch-line-message {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
}
.pch-line-message--warn {
    background: #fff7ec;
    border: 1px solid #f0c674;
    color: #8a5a00;
}
.pch-line-message--error {
    background: #fde4e4;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* v1.0.44 — overflow prompt restyled. White card with subtle red accent +
   each option rendered as a clickable card-row with hover/selected state. */
.pch-overflow-prompt {
    background: #fff;
    border: 1px solid #e1e6ee;
    border-left: 4px solid #b02a37;
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 10px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(176,42,55,0.08);
}
.pch-overflow-prompt .pch-overflow-title {
    color: #842029;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}
.pch-overflow-prompt .pch-overflow-title::before {
    content: "⚠";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fde4e4;
    color: #b02a37;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
}
.pch-overflow-prompt label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    padding: 10px 12px;
    background: #fafbfd;
    border: 1.5px solid #e1e6ee;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-weight: 500;
    color: #333;
}
.pch-overflow-prompt label:hover {
    border-color: #b02a37;
    background: #fff5f5;
}
.pch-overflow-prompt label input[type="radio"] {
    margin: 0;
    accent-color: #b02a37;
    cursor: pointer;
    flex-shrink: 0;
}
.pch-overflow-prompt label:has(input:checked) {
    border-color: #b02a37;
    background: #fff5f5;
    color: #842029;
}

/* === v1.0.7 cart line layout (per Geraint mockup) === */
.pch-line {
    display: grid;
    grid-template-columns: 110px 1fr 130px;
    gap: 16px;
    padding: 16px 18px;
    border-top: 1px solid #eee;
}
.pch-line:first-child { border-top: 0; }
.pch-line-thumb img { max-width: 100px; height: auto; border: 1px solid #eee; padding: 4px; background: #fff; }
.pch-line-body { min-width: 0; }
.pch-line-name { font-size: 14px; color: #222; margin-bottom: 4px; }
.pch-line-name .pch-line-ref { color: #888; font-weight: normal; margin-left: 4px; }
.pch-line-unit-price { color: #555; font-size: 13px; margin-bottom: 8px; }
.pch-line-stock-hints { display: flex; gap: 24px; font-size: 12px; color: #555; margin: 8px 0; }
.pch-line-stock-hints .pch-hint-collect { color: #17a249; }
.pch-line-stock-hints strong u { text-decoration: underline; }
.pch-line-side { text-align: right; }
.pch-line-qty { color: #555; font-size: 13px; margin-bottom: 4px; }
.pch-line-total { font-weight: 700; color: #003d82; font-size: 15px; }

/* ─────────────────────────────────────────────────────────────
   v1.0.47 — Iteration 2: Section header cards (Geraint design)
   Cart items grouped under colored section blocks via JS.
   ───────────────────────────────────────────────────────────── */
.pch-section-block {
    background: #fff;
    border: 1px solid #e2e0db;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pch-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 2px solid #e2e0db;
}
.pch-section-header-collect { background: #f0f7ff; border-bottom-color: #c8dff5; }
.pch-section-header-deliver { background: #f5fff9; border-bottom-color: #a8dfc5; }
.pch-section-icon {
    width: 32px; height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pch-section-header-collect .pch-section-icon { background: #dbeafe; }
.pch-section-header-deliver .pch-section-icon { background: #eaf8f2; }
.pch-section-header-collect .pch-section-icon::before {
    content: "";
    display: block; width: 16px; height: 16px;
    background: no-repeat center/contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6FAB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}
.pch-section-header-deliver .pch-section-icon::before {
    content: "";
    display: block; width: 16px; height: 16px;
    background: no-repeat center/contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a9a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13' rx='1'/><path d='M16 8h4l3 5v3h-7V8z'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
}
.pch-section-titlewrap { flex: 1 !important; min-width: 0 !important; }
.pch-section-title { font-size: 14px !important; font-weight: 700 !important; letter-spacing: normal !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border-bottom: none !important; }
.pch-section-header-collect .pch-section-title { color: #1A6FAB !important; }
.pch-section-header-deliver .pch-section-title { color: #1a9a6a !important; }
.pch-section-meta { font-size: 12px; color: #888; margin-top: 2px; }
.pch-section-body > .cart-item { padding: 14px 18px; border-bottom: 1px solid #e2e0db; }
.pch-section-body > .cart-item:last-child { border-bottom: 0; }

/* v1.0.55 — Collection Hours panel on the right side of the section header */
.pch-branch-hours {
    border-left: 1px solid #c8dff5;
    padding-left: 14px;
    margin-left: auto;
    flex-shrink: 0;
}
.pch-branch-hours-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1A6FAB;
    margin-bottom: 4px;
}
.pch-branch-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: #4a4a4a;
    line-height: 1.6;
}
.pch-branch-hours-row strong { font-weight: 600; color: #2a2a2a; }
.pch-branch-hours-row.closed strong { color: #dc2626; }

/* v1.0.55 — Yellow cutoff banner below the section header
   "Order before 3:00pm to collect tomorrow · Items held for 7 days" */
.pch-collect-cutoff {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #fefce8 !important;       /* design --amber-bg */
    border-bottom: 1px solid #fef08a !important;
    font-size: 12px !important;
    color: #4a4a4a !important;
    flex-wrap: wrap !important;
}
.pch-cutoff-clock { color: #d97706 !important; flex-shrink: 0 !important; stroke: currentColor !important; }
.pch-cutoff-text { color: #4a4a4a !important; }
.pch-cutoff-text strong { color: #1a1a1a !important; font-weight: 700 !important; }
.pch-cutoff-hold {
    color: #888 !important;
    font-size: 11.5px !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
    border-left: 1px solid #e2e0db !important;  /* design --border */
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.pch-cutoff-cal { stroke: currentColor !important; flex-shrink: 0 !important; }
/* Legacy class kept harmless in case old cached JS still emits the · span */
.pch-cutoff-sep { display: none !important; }

/* v1.0.68 — Rhys's .driver-banner injected at the top of each delivery item.
   "This item sets your order estimated delivery date — 7 working days" */
.pch-driver-banner {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 18px !important;
    margin: 0 0 8px 0 !important;
    background: #fefce8 !important;          /* design --amber-bg */
    border: 1px solid #fef08a !important;    /* design --amber-border */
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #d97706 !important;               /* design --amber text */
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
}
.pch-driver-banner-icon {
    color: #d97706 !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}
.pch-driver-text {
    flex: 1 !important;
    line-height: 1.35 !important;
}
.pch-driver-text strong { color: #b45309 !important; font-weight: 700 !important; }

/* v1.0.74 — Hide the per-item .pchdc-cart-line-label ("Order within X for
   estimated delivery <date>") when the line is set to collect. Collect uses
   "tomorrow" instead of a working-days ETA, so the ETA label is misleading.
   The marker class is added/removed in cart.js injectSectionGrouping(). */
.pch-hide-eta-label {
    display: none !important;
    visibility: hidden !important;
}

/* PeterChamp 2026-06-11 - FIRST-PAINT hide of the theme's "Estimated delivery N
   working days" widget (.div_delivery_times) on COLLECT lines, killing the flicker
   where it showed on load then got hidden by cart.js (which adds .pch-hide-eta-label
   only AFTER first paint). The collect section (.pch-section-collect) and the
   split-collect line (.pch-split-collect) are server-rendered (pch-srv-*), so this
   rule applies before the browser paints. Delivery lines (.pch-section-deliver)
   are untouched and keep their ETA. The JS marker stays as belt-and-braces. */
.pch-section-collect .div_delivery_times,
.cart-item.pch-split-collect .div_delivery_times,
/* PeterChamp 2026-06-11 - newdesign renders the delivery ETA on collect lines via
   the legacy estimateddelivery module (.estimateddelivery > .ed_item "Estimated
   delivery N working days") instead of the theme's .div_delivery_times seen on
   local. Hide that too, at first paint, inside the server-rendered collect markers.
   Deliver lines (.pch-section-deliver) keep their ETA. */
.pch-section-collect .estimateddelivery,
.cart-item.pch-split-collect .estimateddelivery {
    display: none !important;
}

/* PeterChamp 2026-06-12 - v1.0.222: discounted unit price on ONE line in the cart
   line (basket mockup: "£was  -10%  £now"). The PrestaShop theme stacks the
   .product-discount (was price + % badge) ABOVE .current-price (the now price) as
   two block-level divs, so a discounted item's price wraps onto two lines. Lay the
   discount group and the current price inline on a single row. Scoped to cart lines
   so product/listing pages are unaffected; flex-wrap keeps it graceful on mobile. */
.cart-item .product-price.has-discount,
.product-line-grid .product-price.has-discount {
    display: flex !important;
    /* PeterChamp 2026-06-12 - v1.0.223: the theme sets flex-direction:column on this
       container, which stacked the discount group above the now-price (two lines)
       even with display:flex. Force row so "was -10% now" sits on one line. */
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
}
.cart-item .product-price.has-discount .product-discount,
.cart-item .product-price.has-discount .current-price,
.product-line-grid .product-price.has-discount .product-discount,
.product-line-grid .product-price.has-discount .current-price {
    display: inline-flex;
    align-items: baseline;
    margin: 0 !important;
}

/* v1.0.87 — hide external delivery widgets in the Order Summary panel when
   the basket is collect-only. Marker added/removed in cart.js
   injectSummaryNotices(). Same display:none + visibility:hidden + !important
   so it wins against third-party widget styles. */
.pch-hide-in-collect-summary {
    display: none !important;
    visibility: hidden !important;
}

/* v1.0.97 — listing-card collect/delivery radios (Rhys's mockup .lc-delivery-opts).
   Visual-only at this stage — state stored in DOM; add-to-cart hookup ships in a later build. */
.pch-lc-delivery-opts {
    margin: 8px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.pch-lc-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
}
.pch-lc-radio input[type="radio"] {
    /* visually hide native radio — show dot via .pch-lc-radio-dot */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pch-lc-radio-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #6b7280;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
/* v1.0.108 — match client mockup palette: selected Collect uses
   the brand green (#1a9a6a) for both the dot and the label. Selected
   Deliver remains underlined (dark) per mockup line 238. */
.pch-lc-radio input[type="radio"]:checked + .pch-lc-radio-dot {
    border-color: #1a9a6a;
    background: #1a9a6a;
}
.pch-lc-radio input[type="radio"]:checked + .pch-lc-radio-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}
.pch-lc-radio-label {
    color: #1f2937;
}
/* Selected Collect → green bold (mockup line 239). !important on color +
   font-weight because the theme's radio-label rules out-specify ours
   (theme has e.g. `.product-prices label span { color: ... }`). */
.pch-lc-radio input[type="radio"]:checked ~ .pch-lc-radio-label.collect,
.pch-lc-radio input[type="radio"]:checked + .pch-lc-radio-dot + .pch-lc-radio-label.collect {
    color: #1a9a6a !important;
    font-weight: 600 !important;
}
.pch-lc-radio-label.delivery {
    color: #6b7280;
    text-decoration: underline;
}

/* v1.0.46 — Geraint design: pill toggle buttons.
   Default: white bg, grey outline, grey text.
   Active collect: light-blue bg, blue outline+text, white tick in blue circle.
   Active deliver: light-teal bg, teal outline+text, white tick in teal circle.
   Reference: F:\work\guttercentre\Customer_Collect_BASKET DESIGN.html */
.pch-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 14px;
    border: 1.5px solid #e2e0db;          /* design --border */
    background: #fff;
    color: #888;                            /* design --muted */
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.5;
}
.pch-toggle-btn:hover { color: #4a4a4a; border-color: #c8c8c8; }
.pch-toggle-btn.pch-toggle-collect.active {
    background: #dbeafe;                    /* design light-blue */
    border-color: #1A6FAB;                  /* design --blue */
    color: #1A6FAB;
}
.pch-toggle-btn.pch-toggle-deliver.active {
    background: #eaf8f2;                    /* design --teal-bg */
    border-color: #1a9a6a;                  /* design --teal */
    color: #1a9a6a;
}
.pch-toggle-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* v1.0.14 — visual hint that this product has no collect stock seeded.
   Button stays clickable (AJAX returns overflow, JS handles it and shows the
   friendly "not currently available" inline warning), but renders dim +
   not-allowed cursor so users can see at a glance that picking it won't
   actually switch them to Click & Collect. v1.0.18: opacity 0.55 + cursor. */
.pch-toggle-btn.pch-toggle-unstocked {
    border-style: dashed;
    border-color: #b8b8b8;
    background: #f7f7f7;
    color: #888;
    opacity: 0.55;
    cursor: not-allowed;
}
.pch-toggle-btn.pch-toggle-unstocked:hover {
    /* No hover lift — it's not really actionable. Slight bg change keeps the
       button feeling responsive to the pointer without implying it's enabled. */
    background: #f0f0f0;
    color: #888;
    opacity: 0.6;
}

/* v1.0.14 — static method label (rendered on checkout pages where the user
   can no longer change the method; replaces the toggle buttons). */
.pch-line-method-label {
    /* v1.0.26: tight chip — no padding, only 5px right margin per user feedback.
       Block-level (display:flex + width:max-content) keeps stacked layout. */
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 5px 0 0;
    padding: 0;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    width: max-content;
    max-width: 100%;
    background: transparent !important;
}
/* v1.0.28: both checkout labels use the same blue as the active cart toggle
   buttons (#003d82) — user wanted visual consistency between cart and
   checkout. Previously collect was green / deliver blue, which read like
   a status mismatch when actually both are confirmed selections. */
.pch-line-method-label.pch-method-collect,
.pch-line-method-label.pch-method-deliver {
    color: #003d82;
}
.pch-line-method-label .pch-method-check {
    /* v1.0.27: explicit colors per modifier instead of `background: currentColor`.
       Latent bug since v1.0.14: `background: currentColor; color: #fff;` resolves
       currentColor from the element's OWN computed color (#fff), so the badge
       was a white circle with white text — invisible. Per-modifier rules below
       set the actual chip color. */
    display: inline-flex;
    width: 16px; height: 16px;
    align-items: center; justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.pch-line-method-label.pch-method-collect .pch-method-check,
.pch-line-method-label.pch-method-deliver .pch-method-check { background: #003d82; }
/* v1.0.46 — pill tick: white check on colored circle.
   IMPORTANT: avoid v1.0.27 bug — explicit background per active variant, fixed
   white text. The HTML span already contains &#10003; so no ::before. */
.pch-toggle-check {
    display: inline-flex;
    width: 14px; height: 14px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;                    /* checkmark glyph color */
    background: #888;               /* default fallback */
    line-height: 1;
}
.pch-toggle-btn.pch-toggle-collect.active .pch-toggle-check { background: #1A6FAB; }
.pch-toggle-btn.pch-toggle-deliver.active .pch-toggle-check { background: #1a9a6a; }

/* ════════════════════════════════════════════════════════════════════════════
   v1.0.52 — Rhys's pill-button design (Customer_Collect_BASKET DESIGN.html)
   Replaces the older .pch-toggle-btn rules above. New class: .pch-fulfil-btn.
   Spec:
   - Default: white bg, grey border, grey text, with house/truck icon
   - Active collect: light-blue bg + blue border/text + white-check-in-blue-circle tick (replaces icon)
   - Active deliver: light-teal bg + teal border/text + white-check-in-teal-circle tick
   - Stock-status line below: green checkmark + "X in stock · available to collect tomorrow"
   ════════════════════════════════════════════════════════════════════════════ */
/* Higher-specificity selector beats theme + module rules like
   `.pch-line-method-toggle button { flex: 0 }` (0,1,1) that were squashing
   the pill buttons to zero width. We bump specificity to (0,2,1) by chaining
   the parent class. */
.pch-line-method-toggle .pch-fulfil-btn,
.pch-extra-toggle .pch-fulfil-btn,
.pch-fulfil-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1.5px solid #e2e0db !important;
    color: #888 !important;
    background: #fff !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    text-transform: none !important;
    box-shadow: none !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
}
.pch-fulfil-btn:hover { color: #4a4a4a !important; border-color: #c8c8c8 !important; background: #fff !important; }
.pch-fulfil-btn .pch-fulfil-icon {
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}
.pch-fulfil-btn .pch-fulfil-label { display: inline-block !important; }
.pch-fulfil-btn .pch-fulfil-tick {
    width: 14px !important; height: 14px !important;
    background: currentColor !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.pch-fulfil-btn .pch-fulfil-tick svg {
    width: 8px !important; height: 8px !important;
    color: #fff !important;
    stroke: #fff !important;
}

/* Active states — !important to beat theme .btn-primary specificity (was rgb(0,61,130) winning) */
.pch-fulfil-btn.active.pch-fulfil-collect,
.pch-fulfil-btn.active.pch-fulfil-collect:hover,
.pch-fulfil-btn.active.pch-fulfil-collect:focus {
    background: #dbeafe !important;
    border-color: #1A6FAB !important;
    color: #1A6FAB !important;
}
.pch-fulfil-btn.active.pch-fulfil-deliver,
.pch-fulfil-btn.active.pch-fulfil-deliver:hover,
.pch-fulfil-btn.active.pch-fulfil-deliver:focus {
    background: #eaf8f2 !important;
    border-color: #1a9a6a !important;
    color: #1a9a6a !important;
}

/* v1.0.71 (Rhys-requested fix) — Unstocked OR not-configured Collect button
   must be visually greyed AND non-clickable. Previously was opacity-only but
   click still fired and toggled to collect state. Now:
   - opacity 0.5 + greyed text/border + dashed
   - pointer-events:none blocks click at CSS level
   - HTML disabled + aria-disabled + tabindex=-1 set on the button itself
   - Hover does not change colour (no false affordance) */
/* v1.0.78 — removed pointer-events:none + disabled HTML attribute from
   .pch-fulfil-unstocked so clicks CAN reach the JS handler, which now shows
   a toast popup explaining why the button is inactive. Visual disabled-state
   still preserved via cursor + opacity + dashed border + greyed colours. */
.pch-fulfil-btn.pch-fulfil-unstocked,
.pch-fulfil-btn.pch-fulfil-unstocked:hover,
.pch-fulfil-btn.pch-fulfil-unstocked:focus,
.pch-fulfil-btn[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    border-style: dashed !important;
    border-color: #c8c8c8 !important;
    color: #999 !important;
    background: #fafafa !important;
    box-shadow: none !important;
}

/* v1.0.78 — small toast popup shown when user clicks a disabled Collect button. */
.pch-toast {
    display: inline-block !important;
    background: #1f2937 !important;       /* dark slate */
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    max-width: 260px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
    text-align: center !important;
}
.pch-toast.pch-toast-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stock status line — green check + text. Placed in template AFTER the toggle */
.pch-stock-status {
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pch-stock-status.pch-in-stock { color: #1a9a6a; }
.pch-stock-status.pch-out-stock { color: #dc2626; }
.pch-stock-status svg { flex-shrink: 0; stroke: currentColor; }

/* v1.0.10 rollback: removed body:has(#pch-cart-grouped) hide rule.
   That rule blanked out the left cart-overview because our grouped output
   is now disabled (theme renders displayShoppingCart in the right column). */

/* === Collect label on product page + category + search (Phase 6) ===
   !important added to beat theme defaults (.product-miniature etc.) which
   were forcing labelColor=#252525 and collapsing the icon to 0x0 width. */
.pch-collect-label,
.product-miniature .pch-collect-label,
.js-product-miniature .pch-collect-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #17a249 !important;
    margin: 8px 0 !important;
    font-size: 14px !important;
}
.pch-collect-label strong,
.pch-collect-label small {
    color: inherit !important;
}
/* v1.0.51 — visible green ✓ icon on collect label */
.pch-icon-check,
.pch-collect-label .pch-icon-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background: #17a249 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.pch-icon-check::before {
    content: "\2713" !important;
    color: #fff !important;
    line-height: 1 !important;
}

/** PeterChamp 2026-06-05 - cart "Updating…" loader (fade + top-right badge) styles for v1.0.188 */
/* v1.0.188 — subtle cart loader. .pchcc-loading fades + locks the cart
   container while a user-driven pchcc mutation (setMethod / reduceQty) is
   in flight; the fixed top-right pill gives an explicit "Updating…" cue.
   Both are applied/removed by the loader IIFE in cart.js, gated by a 200ms
   debounce so fast round-trips never flash. */
.pchcc-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.pchcc-updating-badge {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 150ms ease, transform 150ms ease;
    pointer-events: none;
}
.pchcc-updating-badge.pchcc-updating-show {
    opacity: 1;
    transform: translateY(0);
}
.pchcc-updating-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pchcc-spin 0.7s linear infinite;
}
@keyframes pchcc-spin {
    to { transform: rotate(360deg); }
}

/* PeterChamp 2026-06-09 - Stage 2A loader REMOVED: the cart now renders its
   collect/delivery sections + items SERVER-SIDE on first paint (Stage 2B), so there
   is no "plain cart then re-arranged" flash to hide — the dim/spinner only added a
   pointless transparent flicker over an already-correct cart. The .pch-cart-ready /
   .pch-cart-loading classes are still toggled by cart.js (harmless) but no longer
   carry any visual dim. (pchcc-spin keyframe kept; unused here.) */
.cart-grid .cart-items { transition: opacity .15s ease; }

/* ============================================================
   PeterChamp 2026-06-13 - v1.0.224 — client cart front-end notes (basket polish).
   Global elements scoped to the cart page (body#cart); cart-only elements left as-is.
   ============================================================ */

/* #1 — space between the Collect and Delivery sections */
body#cart .pch-section-block { margin-bottom: 22px !important; }

/* #3 — remove the branch address + Collection Hours from the collect header
   (keep just the icon + title) */
body#cart .pch-section-header-collect .pch-section-meta,
body#cart .pch-section-header-collect .pch-branch-hours { display: none !important; }

/* #7 — remove the "Order before HH:MM…" / "Items held for N days" cutoff banner */
body#cart .pch-collect-cutoff { display: none !important; }

/* #4 — remove the bottom trust banner (pch_customreassurancemodule) on the cart */
body#cart #pch-reassurance { display: none !important; }

/* #8 — remove the kerbside-delivery note under Proceed to checkout */
body#cart .kerbside-note { display: none !important; }

/* #5 — Proceed to checkout button turns green on hover */
body#cart .card-footer .btn-primary:hover,
body#cart .cart-detailed-actions .btn-primary:hover {
    background-color: #1a9a6a !important;
    border-color: #1a9a6a !important;
    color: #fff !important;
}

/* PeterChamp 2026-06-15 - v1.0.226 — make the Collect/Delivery section separation
   read clearly: the section cards were white bordered cards on a white container,
   so the 22px gap was invisible. Tint the cart-items container so the cards stand
   out, give the cards a subtle lift, and pad the container so the cards breathe. */
/* PeterChamp 2026-06-18 - v1.0.251/252 — round-3 #1: the #f4f3f0 tint didn't match
   the page background. Set it to the page colour #f5f5f7 and drop the container
   padding so the cards sit flush (section cards still stand out via their shadow). */
body#cart .cart-grid .cart-items {
    background: #f5f5f7 !important;
    /* padding: 16px !important; */
    border-radius: 10px;
}
body#cart .pch-section-block {
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* ============================================================
   PeterChamp 2026-06-16 - v1.0.230 — client cart basket polish round 2
   (mockup basket_34). CSS-only, scoped to body#cart. Points done here:
   #1 code+attributes on one wrapping line · #2 tighter line spacing ·
   #3 delivery estimate green / availability grey · #6 "sets delivery date"
   banner restyled to a compact amber badge · #7 Save/Retrieve as bordered
   blue buttons · #8 stronger card shadow. (#4 fulfilment reposition + #5
   right-column total/qty/remove format + #9 cross-sell handled separately.)
   ============================================================ */

/* #1 — product code + attributes flow on one wrapping line, muted */
body#cart .product-line__body .product-reference,
body#cart .product-line__body .product-reference .reference-number,
body#cart .product-line__body .product-line-reference,
body#cart .product-line__body .cart-product-variants {
    display: inline !important;
    margin: 0 !important;
}
body#cart .product-line__body .product-line-reference {
    font-size: 11.5px !important;
    color: #888 !important;
}
body#cart .product-line__body .cart-product-variants .small {
    display: inline !important;
    margin: 0 0 0 12px !important;
    font-size: 11.5px !important;
    color: #888 !important;
}
body#cart .product-line__body .product-line-reference .label,
body#cart .product-line__body .cart-product-variants .small span:first-child {
    color: #4a4a4a !important;
    font-weight: 500 !important;
}
/* small breathing room under the combined code/attrs line */
body#cart .product-line__body .cart-product-variants { margin-bottom: 6px !important; }

/* #2 — tighter, consistent vertical rhythm in the item body */
body#cart .product-line__title { margin-bottom: 4px !important; line-height: 1.35 !important; }
body#cart .product-line__body .product-line-info.product-price { margin-top: 6px !important; }

/* #3 — delivery estimate reads green; collect/availability line reads grey */
body#cart .pchdc-cart-line-label,
body#cart .pchdc-cart-line-label .pchdc-daydate { color: #1a9a6a !important; }
body#cart .product-line__body .stock-status:not(.out-stock),
body#cart .product-line__body .pch-collect-availability { color: #888 !important; }

/* #6 — "is setting your delivery date" full-width banner → compact amber badge
   (inline pill matching the mockup's .driver-badge; text shortened in cart.js) */
body#cart .pch-driver-banner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 0 8px !important;
    padding: 2px 10px !important;
    background: #fffbeb !important;
    border: 1px solid #fed7aa !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #92400e !important;
    line-height: 1.4 !important;
}
body#cart .pch-driver-banner .pch-driver-banner-icon { width: 11px !important; height: 11px !important; stroke: #d97706 !important; margin: 0 !important; }
body#cart .pch-driver-banner .pch-driver-sub { font-weight: 400 !important; opacity: 0.85 !important; }
/* v1.0.231 — the banner text is server-rendered by the theme (long: "<name> is
   setting your order estimated delivery date — N working days"), so we can't
   shorten it from cart.js. Collapse the real text and show the mockup's short
   badge wording via ::after — keeps it CSS-only and makes the pill shrink-wrap
   to a true small badge. Real text stays in the DOM for screen readers. */
body#cart .pch-driver-banner .pch-driver-text { font-size: 0 !important; }
body#cart .pch-driver-banner .pch-driver-text::after {
    /* v1.1.299 (client round-7 #1 follow-up) — dropped "(longest lead time)" so the
       badge fits inline on the ETA line instead of wrapping to its own row (~30px too wide). */
    content: "Sets delivery date";
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #92400e !important;
}

/* #7 — Save / Retrieve basket links restyled as bordered blue buttons */
body#cart .share-basket-widget .basket-share-btn,
body#cart .share-basket-widget .basket-retrieve-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 14px !important;
    background: #fff !important;
    color: #1A6FAB !important;
    border: 1.5px solid #1A6FAB !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: background 0.15s !important;
}
body#cart .share-basket-widget .basket-share-btn:hover,
body#cart .share-basket-widget .basket-retrieve-btn:hover { background: #f0f7ff !important; }
/* hide the "|" text separator; space the two buttons instead */
body#cart .share-basket-widget .px-2,
body#cart .share-basket-widget .px-md-3 { display: none !important; }
body#cart .share-basket-widget .d-flex { gap: 8px !important; }

/* #8 — stronger, layered card shadow so the section cards lift off the tint */
body#cart .pch-section-block {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ============================================================
   PeterChamp 2026-06-16 - v1.0.233 — basket rebuild Phase 1 (#5):
   right column order = line-total ON TOP (large) → Qty stepper → Remove,
   right-aligned, matching mockup_34. Achieved via flex order (no theme edit).
   ============================================================ */
body#cart .product-line-grid-right.product-line-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
    text-align: right !important;
}
/* line total first + emphasised */
body#cart .product-line-grid-right > .product-price {
    order: -1 !important;
    margin: 0 !important;
}
body#cart .product-line-grid-right > .product-price strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2a2a2a !important;
}
/* qty block right-aligned, label above the stepper like the mockup */
body#cart .product-line-grid-right .qty-container {
    order: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin: 0 !important;
    width: auto !important;
}
body#cart .product-line-grid-right .div_qty { display: inline-flex !important; align-items: center !important; }
body#cart .product-line-grid-right .quantity-label {
    display: block !important;
    order: -1 !important;
    font-size: 11px !important;
    color: #888 !important;
    margin: 0 0 2px !important;
    text-align: right !important;
}
/* remove link sits under the qty, muted → red on hover */
body#cart .product-line-grid-right .cart-line-product-actions { order: 1 !important; text-align: right !important; margin: 0 !important; }
body#cart .product-line-grid-right .remove-from-cart { font-size: 11.5px !important; color: #888 !important; }
body#cart .product-line-grid-right .remove-from-cart:hover { color: #dc2626 !important; }

/* ============================================================
   PeterChamp 2026-06-16 - v1.0.238 — summary notices: now icon-less (client
   note), so tighten font + padding to keep the title on one line in the narrow
   320px summary panel. (Long values like "10 working days" may still wrap — that
   is the text length, not the icon.)
   ============================================================ */
body#cart .pch-collect-notice,
body#cart .pch-delivery-notice { margin: 10px 8px !important; padding: 8px 9px !important; }
body#cart .pch-notice-head { gap: 0 !important; margin-bottom: 0 !important; }
body#cart .pch-notice-title { font-size: 11px !important; line-height: 1.35 !important; }

/* v1.0.246 — loading state on summary badges: while the count recalculates,
   HIDE the (stale) value and show a CENTERED spinner over it (client pick), so a
   wrong number is never shown. visibility:hidden keeps the box height → no jump.
   Spinner is colour-matched per badge (collect blue / delivery teal). */
body#cart .pch-collect-notice.pch-notice-loading,
body#cart .pch-delivery-notice.pch-notice-loading {
    position: relative !important;
    pointer-events: none !important;
}
body#cart .pch-collect-notice.pch-notice-loading .pch-notice-title,
body#cart .pch-delivery-notice.pch-notice-loading .pch-notice-title { visibility: hidden !important; }
body#cart .pch-collect-notice.pch-notice-loading::after,
body#cart .pch-delivery-notice.pch-notice-loading::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin: -7px 0 0 -7px !important;
    border: 2px solid rgba(0,0,0,0.18) !important;
    border-radius: 50% !important;
    animation: pchNoticeSpin 0.6s linear infinite !important;
}
body#cart .pch-collect-notice.pch-notice-loading::after { border-top-color: #1A6FAB !important; }
body#cart .pch-delivery-notice.pch-notice-loading::after { border-top-color: #1a9a6a !important; }
@keyframes pchNoticeSpin { to { transform: rotate(360deg); } }
/* v1.0.269 (Rhys) — both summary pills show their spinner IN PARALLEL during a single
   load cycle (nicer UI). The v267 single-collapsed-loader was reverted; the v268 fix
   (silent 2nd refetch = no repeated spinner) stays, so the parallel spinners run once. */

/* ============================================================
   PeterChamp 2026-06-16 - v1.0.236 — basket rebuild Phase 3: qty stepper.
   Replace the theme's clunky bootstrap-touchspin (big floating buttons +
   fieldset-legend "Quantity" label overlapping the border) with the mockup's
   compact segmented box: small grey label ABOVE, then [−][input][+] in one
   bordered rounded box with beige buttons. CSS only, scoped to body#cart.
   ============================================================ */
/* label cleanly above the stepper (was overlapping the top border) */
body#cart .div_qty { display: flex !important; flex-direction: column !important; align-items: flex-end !important; position: static !important; }
body#cart .div_qty .quantity-label {
    order: -1 !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #888 !important;
    text-align: right !important;
    line-height: 1 !important;
}
/* the touchspin wrapper = one unified bordered rounded box */
body#cart .div_qty .input-group.bootstrap-touchspin {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 32px !important;
    width: auto !important;
    border: 1.5px solid #e2e0db !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
body#cart .div_qty .input-group-btn,
body#cart .div_qty .input-group-prepend,
body#cart .div_qty .input-group-append { display: flex !important; align-items: stretch !important; height: 100% !important; margin: 0 !important; }
/* − and + buttons (full cell height → no white strip) */
body#cart .div_qty .btn.js-touchspin {
    width: 28px !important;
    min-width: 28px !important;
    height: 32px !important;
    min-height: 0 !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f0efeb !important;
    color: #2a2a2a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body#cart .div_qty .btn.js-touchspin:hover { background: #e5e4df !important; }
/* the number input in the middle — v1.0.245: PrestaShop's .form-control sets
   min-height:40px which (against the 32px box) clipped the value low; pin the
   height + min-height:0 + line-height so the number is vertically centred. */
body#cart .div_qty input.js-cart-line-product-quantity {
    width: 42px !important;
    height: 32px !important;
    min-height: 0 !important;
    align-self: stretch !important;
    text-align: center !important;
    border: none !important;
    border-left: 1.5px solid #e2e0db !important;
    border-right: 1.5px solid #e2e0db !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    line-height: 32px !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    box-sizing: border-box !important;
}
body#cart .div_qty input.js-cart-line-product-quantity::-webkit-outer-spin-button,
body#cart .div_qty input.js-cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* ============================================================
   PeterChamp 2026-06-16 - v1.0.235 — Phase 2 NOTE: the toggle-above-estimate
   reorder (#4) was attempted via flex on .product-line__body but that forces
   Code and the attributes onto separate lines (flex items can't share a line
   without a shared wrapper), regressing the v230 "code + attrs one line" win.
   #1 wins; #4 deferred to a small template wrapper (theme edit). Kept here:
   the update-bar-to-bottom change (cart.js) which is independent + matches the
   mockup. No flex on .product-line__body.
   ============================================================ */

/* ============================================================
   PeterChamp 2026-06-18 - basket round-3 (CSS-only, scoped body#cart).
   Appended so these layer over the round-2 rules by source order.
   ============================================================ */

/* #2 (v1.0.252) — product code + attributes must not sit on the title's line.
   The title <a> is inline and the code/attrs are inline (v230 #1), so they
   flowed onto the same line; force the title to its own block so code +
   attributes wrap onto the line below (they still share one line together). */
body#cart .product-line__title { display: block !important; }

/* #3 (v1.0.253) — the "Code:" label rendered at 14px (inherited base .label rule)
   while the code value and all the attributes are 11.5px, so the Code line looked
   taller than the rest. Match the code line + its label to the attribute text
   size + line-height so every meta line is the same height. */
body#cart .product-line__body .product-line-reference,
body#cart .product-line__body .product-line-reference .label,
body#cart .product-line__body .product-line-reference span {
    font-size: 11.5px !important;
    line-height: 17.25px !important;
}

/* #4 (v1.0.254) — the "Code:" label is a base inline-block .label with
   padding-right:10px and a wider-than-text box, leaving a big gap before the SKU
   value. Reset it to a plain inline label so the value sits right after it, the
   same as the attribute labels. */
body#cart .product-line__body .product-line-reference .label {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #1b (v1.0.255) — blend the outer cart-container card with the page background
   too (it was white), so only the inner section blocks ("Items for delivery" /
   "Items for collection") stand out as white cards. Matches the #1 page colour. */
body#cart .cart-grid-body > .card {
    background: #f5f5f7 !important;
}

/* #5 (v1.0.256) — code/attribute NAMES read grey, VALUES read near-black.
   It was the other way round (names #4a4a4a darker, values #888 lighter). */
body#cart .product-line__body .product-line-reference,
body#cart .product-line__body .cart-product-variants .small .value {
    color: #1a1a1a !important;   /* values */
}
body#cart .product-line__body .product-line-reference .label,
body#cart .product-line__body .cart-product-variants .small span:first-child {
    color: #888 !important;      /* names */
}

/* #6 (v1.0.257) — tighten the vertical rhythm in the item body: the delivery
   message carried 8px top+bottom and the collect/deliver pills 10px top, which
   read too loose and uneven. Even them out to a consistent ~6px rhythm. */
body#cart .product-line__body .pchdc-cart-line-label { margin-top: 4px !important; margin-bottom: 4px !important; }
body#cart .product-line__body .pch-line-method-toggle { margin-top: 6px !important; margin-bottom: 0 !important; }
body#cart .product-line__body .product-line-info.product-price { margin-top: 6px !important; }

/* #8 (v1.0.264, Rhys) — the "Sets delivery date" badge sits on the collect/deliver
   PILLS line (after the buttons), so the green delivery message keeps its own line.
   Keep the pills row on one line and space the badge after the buttons. */
body#cart .pch-line-method-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
body#cart .pch-line-method-toggle .pch-driver-banner {
    margin: 0 0 0 10px !important;
    vertical-align: middle !important;
}

/* #10 (v1.0.260) — remove the "Quantity" text label above the qty stepper.
   Match the round-2 selectors' specificity (.product-line-grid-right /.div_qty
   .quantity-label set display:block !important) so this later rule wins. */
body#cart .product-line-grid-right .quantity-label,
body#cart .div_qty .quantity-label,
body#cart .quantity-label { display: none !important; }

/* #11 (v1.0.261) — qty stepper match the other pages' format. The product page
   uses #e8e8e8 buttons with a 1px #999 border, 4px radius, ~38px tall; the cart
   was a cream (#f0efeb) 32px box. Re-skin to match (overrides the round-2 rules
   above by source order). */
body#cart .div_qty .input-group.bootstrap-touchspin {
    height: 38px !important;
    border: 1px solid #999 !important;
    border-radius: 4px !important;
}
body#cart .div_qty .btn.js-touchspin {
    height: 38px !important;
    background: #e8e8e8 !important;
}
body#cart .div_qty .btn.js-touchspin:hover { background: #dcdcdc !important; }
body#cart .div_qty input.js-cart-line-product-quantity {
    height: 38px !important;
    line-height: 38px !important;
    border-left: 1px solid #999 !important;
    border-right: 1px solid #999 !important;
    font-size: 14px !important;
}

/* #12 (v1.0.262) — keep the price/qty/remove block in a consistent top-right
   position across products. The right column was justify-content:space-between,
   which spread the three items across the variable row height, so their vertical
   position shifted per product. Stack them from the top instead. */
body#cart .product-line-grid-right.product-line-actions {
    justify-content: flex-start !important;
}

/* Rhys polish 2026-06-18 (v1.0.263):
   - unit price + qty value not bold (were 700) */
body#cart .product-line-grid-right > .product-price strong,
body#cart .product-line__body .current-price-display.price,
body#cart .product-line__body .current-price-display.current-price-discount,
body#cart .div_qty input.js-cart-line-product-quantity {
    font-weight: 400 !important;
}
/* - green delivery message on ONE line (remove the line break between
     "Order within…" and "estimated delivery …") */
body#cart .pchdc-cart-line-label br { display: none !important; }

/* #14 (v1.0.264) — remove the section subtitle ("Delivered to your address" /
   collect equivalent) under the "Items for delivery"/"Items for collection" headers. */
body#cart .pch-section-meta { display: none !important; }

/* #15 (v1.0.265, Rhys) — the Order-Summary delivery/collect pills had shrunk on the
   cart: a round-2 compact override dropped the title to 11px with tight padding.
   Restore a more prominent size (title 13.5px, roomier padding) so they read as
   proper pills again. */
body#cart .pch-collect-notice,
body#cart .pch-delivery-notice { margin: 12px 8px !important; padding: 11px 13px !important; }
body#cart .pch-notice-head { gap: 6px !important; margin-bottom: 3px !important; }
body#cart .pch-notice-title { font-size: 13.5px !important; line-height: 1.4 !important; }

/* #15 refinement (v1.0.266, Rhys) — make the summary pills FULL-WIDTH and
   left-aligned with the Sub total / VAT / Delivery rows (they were inset by an
   8px side margin + a calc(100% - 36px) width), and give the summary line items a
   bit more line-height/breathing room. */
body#cart .cart-summary .pch-collect-notice,
body#cart .cart-summary .pch-delivery-notice {
    width: auto !important;
    margin: 12px 0 !important;
}
body#cart .cart-summary .cart-summary-line { padding: 10px 0 !important; }

/* CHECKOUT ticket (v1.0.270, Rhys) — order-review "Unit price: £x" and "Qty: n"
   VALUES were bold; the attribute values already use .font-weight-normal, so match
   them. Scoped to the checkout order-review price/qty line. */
body#module-thecheckout-order .lc-line-priceqty .lc-meta-val { font-weight: 400 !important; }

/* CHECKOUT ticket (v1.0.271, Rhys) — kill the green "Estimated lead time" flash on
   load: cart.js removes the element, but that runs from the footer so it was visible
   for a moment first. Hide it from FIRST PAINT here (this CSS is in the <head>); the
   JS removal then deletes it permanently. */
body#module-thecheckout-order .div_delivery_times { display: none !important; }

/* ============================================================
   PeterChamp 2026-06-22 - basket round-4 (Rhys). CSS-only, scoped body#cart.
   Appended so these layer over the round-3 rules by source order.
   ============================================================ */

/* #5 (v1.0.273, Rhys) — unit (now) price: KEEP the site orange (matches the rest of
   the site, as agreed), but make the now-price BOLD and the price line slightly
   smaller (was 16px/400). The qty value stays un-bold (v263 left it 400). */
body#cart .product-line__body .product-line-info.product-price { font-size: 14px !important; }
body#cart .product-line__body .current-price-display.price,
body#cart .product-line__body .current-price-display.current-price-discount {
    font-weight: 700 !important;
}

/* #4 (v1.0.274, Rhys) — line total value should be BOLD, and the grand total in the
   order summary should be the dominant figure (it read smaller than the line total
   before). Make the per-line total bold but slightly smaller (was 18-20px), and
   enlarge the grand total value so the payable amount is clearly the biggest. */
body#cart .product-line-grid-right > .product-price,
body#cart .product-line-grid-right > .product-price strong {
    font-size: 15px !important;
    font-weight: 700 !important;
}
body#cart .cart-summary-line.cart-total .value,
body#cart .cart-summary .cart-total .value {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* #6 (v1.0.275, Rhys) — grand total value colour → black (was orange rgb(232,83,26)). */
body#cart .cart-summary-line.cart-total .value,
body#cart .cart-summary .cart-total .value {
    color: #1a1a1a !important;
}

/* #1 (v1.0.276, Rhys) — remove the "N in stock · available to collect …" line from
   the DELIVERY section. For an item being delivered, the collect-availability hint is
   redundant — the collect/deliver toggle already conveys availability (and greys out
   the Collect option when not in stock). Kept in the Collect section where it matters. */
body#cart .pch-section-deliver .pch-stock-status { display: none !important; }

/* #3 (v1.0.277, Rhys) — text-height consistency: the delivery countdown line ("Order
   within …", 14px) and the "Estimated delivery N working days" line (16px) rendered
   larger than the rest of the line text. Bring the delivery-estimate texts (and the
   collect stock line) to a consistent 13px so the line's informational text reads at
   one size. */
body#cart .pchdc-cart-line-label,
body#cart .pchdc-cart-line-label .pchdc-daydate,
body#cart .div_delivery_times,
body#cart .pch-stock-status {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* #7 (v1.0.278, Rhys) — remove the stray empty white box below the basket. Round-1
   hid the reassurance content (#pch-reassurance), but its wrapper card (.cart-footer-info
   > .card) was left behind as an empty white box (most visible on an empty basket).
   Hide the wrapper so no empty card remains. */
body#cart .cart-footer-info { display: none !important; }

/* #2 (v1.0.280, Rhys) — match the row rhythm between the Collect and Delivery
   sections. After #1 removed the collect-availability line from the Delivery section,
   both sections have a single green message line under the toggle, but they sat at
   slightly different gaps: the Collect stock line (.pch-stock-status) had margin-top
   6px while the Delivery countdown (.pchdc-cart-line-label) sits at 4px (set in #6).
   Normalise the Collect stock line to the same 4px top/bottom rhythm so the green
   message line sits identically in both sections. */
body#cart .product-line__body .pch-stock-status {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* #10 (v1.0.279, Rhys) — kill the qty-change flicker. On a quantity change the theme's
   AJAX returns the RAW, un-grouped cart and swaps it in; pchcc's JS then re-groups the
   rows into the Collect/Delivery sections and re-positions the pills/badge. On real
   network latency that raw intermediate is visible for a moment as a broken layout
   (badge jumps to the top, toggle misplaced) — the "flicker" the client saw. It does
   not show on fast localhost because the gap is sub-frame.
   Fix (CSS-only, no fragile JS-timing change): a cart row is a DIRECT child of
   .cart-items ONLY in that raw state — both the server SSR render and pchcc's regroup
   wrap every row inside a .pch-section-block. So hide direct-child rows: the raw
   intermediate is covered (height preserved → no jump), and rows reappear the instant
   pchcc moves them into a section. Normal load + settled state are unaffected (rows are
   in sections, not direct children). The 1.5s regroup interval + 2.5s safety guarantee
   rows can never stay hidden. */
body#cart .cart-items > .cart-item { visibility: hidden !important; }

/* ============================================================
   PeterChamp 2026-06-23 - basket round-5 (Rhys). CSS-only, scoped body#cart.
   ============================================================ */

/* #1 (v1.0.283, Rhys) — basket discounted price out of format. The struck was-price,
   the red -10% badge and the now-price rendered flush together (no spacing) and the
   badge had square corners. Match the listing card: space the -10% badge from the
   was-price and the now-price, and round its corners. (The now-price stays orange+bold
   from round-4 #5.) */
body#cart .product-line__body .product-line-info.product-price .discount.discount-percentage {
    margin: 0 7px !important;
    border-radius: 3px !important;
    line-height: 1.3 !important;
    /* PeterChamp 2026-06-25 - v1.1.296: Rhys round-7 #2 — the -10% badge was too big (14px / 4px
       padding). Shrink it to a neat pill that sits cleanly on the price baseline. */
    font-size: 11px !important;
    padding: 1px 6px !important;
}
body#cart .product-line__body .product-line-info.product-price .regular-price {
    margin-right: 1px !important;
}

/* #2 (v1.0.284 → v1.1.296, Rhys round-7 #1) — the "Sets delivery date" badge now sits INLINE
   INSIDE the delivery/ETA line (cart.js appends it as the last child of .pchdc-cart-line-label)
   so it reads on the SAME line as "...estimated delivery <date>" instead of on its own row below.
   It flows right after the date and wraps gracefully only if the line runs out of width. */
body#cart .product-line__body .pchdc-cart-line-label .pch-driver-banner {
    margin: 0 0 0 8px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

/* #3 (v1.0.285, Rhys) — the basket qty box was still too wide vs the product/listing page.
   The number input was 60px (box ~118px). Narrow the input + buttons so the box matches
   the product page's compact stepper more closely (box ~92px). */
body#cart .div_qty input.js-cart-line-product-quantity {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    flex: 0 0 40px !important;   /* the input sits in an inline-flex group with flex-grow:1 (bootstrap .form-control), which stretched it back to 60px — pin the basis and stop the grow */
}
body#cart .div_qty .btn.js-touchspin {
    width: 26px !important;
    min-width: 26px !important;
    flex: 0 0 26px !important;
}

/* #4 (v1.0.287, Rhys) — flicker rework. v279 hid the RAW un-grouped rows during the
   theme-replace → pchcc-regroup gap (after every qty change), but that left the basket
   BLANK for ~0.5s — the client read it as "the basket disappears". Keep the rows hidden
   (still prevents the layout jump) BUT show a centered spinner over the cart-items while
   raw rows are present, so the customer sees a clear "updating" state instead of a blank.
   Self-triggered via :has() — only fires while direct-child raw rows exist, so it never
   shows on the settled cart or the 1.5s regroup interval. (The ~1s before the basket first
   appears on page load is mostly page-render time, not this rule.) */
body#cart .cart-items:has(> .cart-item) {
    position: relative !important;
    min-height: 96px !important;
}
body#cart .cart-items:has(> .cart-item)::after {
    content: "" !important;
    position: absolute !important;
    top: 38px !important;
    left: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin-left: -13px !important;
    border: 3px solid rgba(0,0,0,0.12) !important;
    border-top-color: #1a9a6a !important;
    border-radius: 50% !important;
    animation: pchNoticeSpin 0.7s linear infinite !important;
    z-index: 2 !important;
}

/* round-6 #1 (client) — baseline-align the three discount values (struck was-price, -10% badge, now-price). The price wrapper is display:flex with align-items:start, so the taller -10% pill (4px padding) sat off the prices' baseline. Baseline-align them so all three sit on one line (bottoms of the characters aligned). */
body#cart .product-line__body .product-line-info.product-price { align-items: baseline !important; }

/* #3 (v1.1.300, client round-7) — kill the qty-change layout jump.
   On a native qty +/- the theme replaces .cart-overview with PrestaShop's plain
   (ungrouped) markup and PAINTS it; pchcustomercollect re-groups the rows and
   pchdeliverycountdown re-places the badge + countdown ~300-400ms later — so the
   customer sees that intermediate frame reshuffle (CLS). The existing guards don't
   cover it: v279 only hides UNGROUPED direct-child rows, and the .pchcc-loading pill
   only fires on our own AJAX, not the native qty update. So fade the WHOLE overview
   out the moment a qty control is used (cart.js adds body.pch-cart-updating BEFORE the
   theme's AJAX swaps the DOM) and fade it back once re-decoration has settled — the
   customer sees a brief spinner instead of the reshuffle. The overview keeps its box
   (opacity, not display) so the page doesn't collapse. Spinner sits on the STABLE
   .cart-grid-body ancestor (the inner #4 spinner is hidden along with the overview). */
body#cart.pch-cart-updating .cart-overview {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease !important;
}
body#cart.pch-cart-updating .cart-grid-body { position: relative !important; min-height: 120px !important; }
body#cart.pch-cart-updating .cart-grid-body::after {
    content: "" !important;
    position: absolute !important;
    top: 46px !important;
    left: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    border: 3px solid rgba(0,0,0,0.12) !important;
    border-top-color: #1a9a6a !important;
    border-radius: 50% !important;
    animation: pchNoticeSpin 0.7s linear infinite !important;
    z-index: 3 !important;
}