/* =============================================================================
   PRIMMERCE THEME — design system
   ----------------------------------------------------------------------------
   Loaded last in _Layout so it overrides the original template (Kalles) CSS.
   All custom design tokens live as CSS variables at the top of this file.
   When tweaking the visual identity, change them here — do not introduce
   hex codes or hardcoded type sizes in views or other stylesheets.
   ========================================================================== */

/* Inter is loaded via the consolidated Google Fonts <link> in _Layout.cshtml.
   The nested @@import here was a render-blocking sub-request — removed. */

:root {
    /* The storefront + admin are designed light-only — there is no dark theme.
       Declaring "only light" opts every UA-rendered surface (form controls,
       <select>, scrollbars, and any element without an explicit colour) out of
       the browser's dark-mode defaults, and suppresses Chrome's Android
       "Auto Dark Theme" force-darkening. Without this, a shopper whose OS/browser
       is in dark mode saw light UA text land on the site's white backgrounds and
       disappear. Paired with a <meta name="color-scheme" content="light"> hint in
       the layout <head> for the pre-CSS initial render. */
    color-scheme: only light;

    /* ───────── Colour ───────── */
    --p-bg-light: #ffffff;
    --p-bg-light-alt: #f7f7f7; /* section banding on light pages */
    --p-bg-dark: #0f0f11; /* header / footer / hero / promo */
    --p-bg-dark-alt: #18181b;
    --p-text-light: #0f0f11; /* default body text on light bg */
    --p-text-dark: #ffffff; /* default body text on dark bg */
    --p-muted-light: rgba(15, 15, 17, 0.6);
    --p-muted-dark: rgba(255, 255, 255, 0.6);
    /* --p-border-light: #e5e5e5;*/
    --p-border-light: #e9e9e9;
    --p-border-dark: #27272a;
    /* CTA accent — used ONLY on primary button surfaces, active filter
       underlines, and the price-strikethrough highlight. Never as body text.
       #C8102E is a classic deep red — passes WCAG AA on white (~5.3:1) and
       on the button (white text on accent ~5.0:1). */
    --p-accent: #c8102e;
    --p-accent-hover: #a40d26;
    --p-on-accent: #ffffff;
    /* Override Bootstrap's default `--bs-primary` (#4e97fd, teal-blue from app.min.css)
       so anything that cascades through Bootstrap link / primary colour uses our accent.
       Without this, link hover, .text-primary, nav-pill .active, default <a> hover
       inside admin tiles, etc. all flash teal. */
    --bs-primary: #c8102e;
    --bs-primary-rgb: 200, 16, 46;
    --bs-link-color: #c8102e;
    --bs-link-color-rgb: 200, 16, 46;
    --bs-link-hover-color: #c8102e;
    --bs-link-hover-color-rgb: 200, 16, 46;
    /* Product-card image bed (slight grey so cutouts don't float on pure white) */
    /*--p-product-bed: #f4f4f5;*/
    --p-product-bed: #ffff;
    /* ───────── Type ───────── */
    --p-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    /* Scale: 12 / 14 / 16 / 20 / 28 / 40 / 56 / 80 */
    --p-fs-12: 0.75rem;
    --p-fs-14: 0.875rem;
    --p-fs-16: 1rem;
    --p-fs-20: 1.25rem;
    --p-fs-28: 1.75rem;
    --p-fs-40: 2.5rem;
    --p-fs-56: 3.5rem;
    --p-fs-80: 5rem;
    /* ───────── Layout ───────── */
    --p-container-max: 1440px;
    --p-container-pad: 48px;
    --p-section-pad-y: 120px;
    --p-section-pad-y-sm: 64px;
    --p-grid-gutter: 24px;
    /* ───────── Effects ───────── */
    --p-elev-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --p-radius-sm: 10px;
    --p-radius-md: 6px;
    --p-transition: 0.2s ease-out;
}

/* =============================================================================
   GLOBAL RESETS — apply on every page
   ========================================================================== */
body {
    font-family: var(--p-font);
    color: var(--p-text-light);
    background: var(--p-bg-light);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--p-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: inherit;
}

a {
    color: #c8102e;
    text-decoration: none;
    transition: color var(--p-transition);
    --bs-link-color-rgb: 200, 16, 46;
    --bs-link-hover-color-rgb: 200, 16, 46;
}

a:hover,
a:focus {
    color: #c8102e !important;
    --bs-link-color-rgb: 200, 16, 46;
    --bs-link-hover-color-rgb: 200, 16, 46;
}

/* =============================================================================
   THEMED SECTIONS
   ========================================================================== */
.p-dark {
    background: var(--p-bg-dark);
    color: var(--p-text-dark);
}

.p-dark a,
.p-dark .text-muted {
    color: var(--p-text-dark);
}

.p-dark .text-muted {
    color: var(--p-muted-dark) !important;
}

.p-light {
    background: var(--p-bg-light);
    color: var(--p-text-light);
}

/* Section spacing utility */
.p-section {
    padding: var(--p-section-pad-y) 0;
}

@media (max-width: 991px) {
    .p-section {
        padding: var(--p-section-pad-y-sm) 0;
    }
}

/* =============================================================================
   ELIBLE: ELEMENTS — buttons, eyebrows, prices
   ========================================================================== */

/* Eyebrow micro-label (12px caps, muted) */
.p-eyebrow {
    font-size: var(--p-fs-12);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p-muted-light);
    margin-bottom: 16px;
    display: inline-block;
}

.p-dark .p-eyebrow {
    color: var(--p-muted-dark);
}

/* Headlines */
.p-h-hero {
    font-size: clamp(2.5rem, 7vw, var(--p-fs-80));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
}

.p-h-section {
    font-size: clamp(1.75rem, 4vw, var(--p-fs-40));
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 16px;
}

.p-lede {
    font-size: var(--p-fs-20);
    line-height: 1.5;
    font-weight: 400;
    opacity: 0.7;
    max-width: 540px;
}

/* Primary CTA — solid accent rectangle */
.p-btn,
.p-btn:link,
.p-btn:visited,
.p-btn:hover,
.p-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: var(--p-accent);
    color: var(--p-on-accent) !important;
    border: 1px solid var(--p-accent);
    border-radius: 10px;
    font-size: var(--p-fs-16);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none !important;
    transition: background var(--p-transition), border-color var(--p-transition), opacity var(--p-transition);
    cursor: pointer;
    line-height: 1;
    opacity: 1;
}

.p-btn:hover,
.p-btn:focus {
    background: var(--p-accent-hover);
    border-color: var(--p-accent-hover);
    color: var(--p-on-accent) !important;
    opacity: 1;
}

/* Secondary outline CTA — used on dark or light */
.p-btn-outline,
.p-btn-outline:hover,
.p-btn-outline:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: var(--p-fs-16);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--p-transition), color var(--p-transition), border-color var(--p-transition);
    cursor: pointer;
    line-height: 1;
    opacity: 1;
}

.p-btn-outline:hover {
    background: #c8102e;
    border-color: #c8102e;
    color: #ffffff;
}

/* Force explicit colours so anchor-style resets don't bleed through */
.p-light .p-btn-outline,
.p-light .p-btn-outline:link,
.p-light .p-btn-outline:visited {
    color: var(--p-text-light) !important;
    border-color: var(--p-text-light);
}

.p-light .p-btn-outline:hover {
    background: #c8102e;
    border-color: #c8102e;
    color: #ffffff !important;
}

.p-dark .p-btn-outline,
.p-dark .p-btn-outline:link,
.p-dark .p-btn-outline:visited {
    color: var(--p-text-dark) !important;
    border-color: var(--p-text-dark);
}

.p-dark .p-btn-outline:hover {
    background: #c8102e;
    border-color: #c8102e;
    color: #ffffff !important;
}

/* Sale price treatment: strikethrough only, no red */
.p-price-was {
    text-decoration: line-through;
    color: var(--p-muted-light);
    margin-right: 8px;
    font-weight: 400;
}

.p-price-now {
    font-weight: 600;
}

/* =============================================================================
   PRODUCT CARD (used by homepage featured grid + shop listing)
   ========================================================================== */
.p-product-card {
    background: transparent;
    border: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--p-transition);
}

.p-product-card:hover {
    opacity: 1;
}

.p-product-card .p-product-media {
    background: var(--p-product-bed);
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: var(--p-radius-sm);
    position: relative;
}

.p-product-card .p-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.p-product-card:hover .p-product-media img {
    transform: scale(1.03);
}

.p-product-card .p-product-info {
    padding-top: 16px;
}

.p-product-card .p-product-brand {
    font-size: var(--p-fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p-muted-light);
    margin-bottom: 4px;
}

.p-product-card .p-product-name {
    font-size: var(--p-fs-16);
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.p-product-card .p-product-price {
    font-size: var(--p-fs-14);
    color: var(--p-text-light);
}

/* =============================================================================
   HOMEPAGE — hero & sections
   ========================================================================== */
.p-hero {
    background: var(--p-bg-dark);
    color: var(--p-text-dark);
    min-height: 480px;
    aspect-ratio: 1020 / 315;
    max-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.p-hero__bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--p-bg-dark);
    opacity: 1;
}

.p-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.p-hero__copy {
    max-width: 640px;
}

/* Editorial split section: 50/50 image + headline */
.p-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
}

.p-split__media {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
}

.p-split__copy {
    padding: clamp(48px, 6vw, 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767px) {
    .p-split {
        grid-template-columns: 1fr;
    }
}

/* Brand strip */
.p-brand-strip {
    background: var(--p-bg-light-alt);
    padding: 64px 0;
}

.p-brand-strip__logos {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 32px;
}

.p-brand-strip__logo {
    height: 32px;
    width: auto;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity var(--p-transition);
}

.p-brand-strip__logo:hover {
    opacity: 1;
}

/* Featured products — full-bleed horizontal scroller with arrow nav.
   The track lives inside `.container` but breaks out to the right viewport
   edge via a negative right margin (`50% - 50vw` = the container's right
   gutter), so cards scroll edge-to-edge while the first card stays aligned
   under the heading. Scrollbar is hidden; prev/next arrows + swipe drive it. */
.p-featured-scroller {
    display: flex;
    gap: var(--p-grid-gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    margin-right: calc(50% - 50vw);
    padding: 4px clamp(16px, 4vw, 64px) 4px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.p-featured-scroller::-webkit-scrollbar {
    display: none;
}

.p-featured-scroller > .p-product-card {
    flex: 0 0 auto;
    width: clamp(220px, 24vw, 300px);
    scroll-snap-align: start;
}

/* Prev/next arrows in the section header */
.p-featured-nav {
    display: inline-flex;
    gap: 8px;
}

.p-featured-nav__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--p-border-light);
    background: transparent;
    color: var(--p-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.p-featured-nav__btn:hover {
    background: var(--p-text-light);
    color: #fff;
    border-color: var(--p-text-light);
}

.p-featured-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
    color: var(--p-text-light);
    border-color: var(--p-border-light);
}

/* New arrivals — Flickity carousel. 4 cards in view on desktop, scrolling a
   full page per arrow (groupCells). Each .p-featured-cell carries the gutter
   via horizontal padding so 4 cells fill 100% exactly; the bordered card sits
   inside the padded cell. */
.p-featured-carousel {
    width: 100%;
    position: relative;
}
.p-featured-carousel .p-featured-cell {
    width: 25%;
    /* Vertical padding gives the cards room inside the overflow:hidden Flickity
       viewport so the hover lift (translateY) + box-shadow aren't clipped against
       the top/bottom of the section. Horizontal padding is the inter-card gutter. */
    padding: 14px 10px;
    box-sizing: border-box;
}
@media (max-width: 991px) {
    .p-featured-carousel .p-featured-cell { width: 50%; }
}
@media (max-width: 575px) {
    .p-featured-carousel .p-featured-cell { width: 100%; }
}

/* Flickity arrows — square, on-brand, sitting just inside the track edges. */
.p-featured-carousel .flickity-button {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.p-featured-carousel .flickity-button:hover {
    background: #c8102e;
    border-color: #c8102e;
    color: #ffffff;
}
.p-featured-carousel .flickity-button:disabled {
    opacity: 0.35;
}
.p-featured-carousel .flickity-button .flickity-button-icon {
    fill: currentColor;
}
.p-featured-carousel .flickity-prev-next-button.previous { left: -8px; }
.p-featured-carousel .flickity-prev-next-button.next { right: -8px; }

/* =============================================================================
   GLOBAL OVERRIDES — applied site-wide so any markup using Bootstrap/Kalles
   classes (which is most pages) inherits the new identity automatically.
   ========================================================================== */

/* ───────── Headings everywhere ───────── */
.section-title,
.section-subtitle,
.fs-12, .fs-13, .fs-14, .fs-15, .fs-16, .fs-18, .fs-20,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--p-font) !important;
}

.section-title {
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

.section-title::before,
.section-title::after,
.section-title span::before,
.section-title span::after {
    display: none !important;
}

.font-secondary,
.fst-italic.font-secondary {
    font-family: var(--p-font) !important;
    font-style: normal !important;
}

/* ───────── Buttons (Bootstrap variants) ───────── */
.btn {
    font-family: var(--p-font);
    font-weight: 500;
    border-radius: 10px;
    padding: 12px 24px;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--p-transition), border-color var(--p-transition), color var(--p-transition), opacity var(--p-transition);
}
.btn-sm { padding: 5px 14px; font-size: .8125rem; }
.btn-lg { padding: 14px 32px; font-size: 1.0625rem; }

.btn-dark,
.btn-primary,
.btn-teal,
.btn-info,
.btn-secondary {
    background: var(--p-accent) !important;
    border-color: var(--p-accent) !important;
    color: var(--p-on-accent) !important;
}

.btn-dark:hover,
.btn-primary:hover,
.btn-teal:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-dark:focus,
.btn-primary:focus,
.btn-teal:focus,
.btn-info:focus,
.btn-secondary:focus,
.btn-dark:active,
.btn-primary:active,
.btn-teal:active,
.btn-info:active,
.btn-secondary:active {
    background: #c8102e !important;
    border-color: #c8102e !important;
    color: var(--p-on-accent) !important;
}

.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary {
    background: transparent !important;
    color: var(--p-text-light) !important;
    border-color: var(--p-text-light) !important;
}

.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: #c8102e !important;
    border-color: #c8102e !important;
    color: #ffffff !important;
}

.btn-danger {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

.btn-link {
    color: var(--p-text-light) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* "rounded-pill" is overused by the template — normalise buttons to the
   site-wide 10px radius for uniformity (utility kept for non-button elements). */
.btn.rounded-pill {
    border-radius: 10px;
}

/* ───────── Badges ───────── */
.badge {
    font-family: var(--p-font) !important;
    font-weight: 500 !important;
    border-radius: var(--p-radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 8px !important;
    font-size: var(--p-fs-12) !important;
}

.badge.bg-danger {
    background: var(--p-accent) !important;
    color: var(--p-on-accent) !important;
    border: 0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
}

.badge.bg-success {
    background: transparent !important;
    color: var(--p-text-light) !important;
    border: 1px solid var(--p-text-light);
}

.badge.bg-warning {
    background: transparent !important;
    color: var(--p-muted-light) !important;
    border: 1px solid var(--p-border-light);
}

.badge.bg-secondary {
    background: var(--p-bg-light-alt) !important;
    color: var(--p-muted-light) !important;
}

.badge.bg-dark {
    background: var(--p-text-light) !important;
    color: var(--p-bg-light) !important;
}

/* ───────── Forms ───────── */
.form-control,
.form-select {
    font-family: var(--p-font) !important;
    border-radius: var(--p-radius-sm) !important;
    border-color: var(--p-border-light);
    padding: 10px 14px;
    font-size: var(--p-fs-16);
    transition: border-color var(--p-transition), box-shadow var(--p-transition);
}

.form-control-sm,
.form-select-sm { padding: 5px 10px; font-size: .8125rem; }

/* Keep room on the right for Bootstrap's chevron SVG so the select visibly reads as a dropdown
   (the generic .form-control rule above otherwise overrides Bootstrap's 2.25rem padding-right
   and the chevron overlaps the option text). */
.form-select {
    padding-right: 2.25rem;
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--p-accent);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

.form-control.rounded-pill {
    border-radius: 999px !important;
}

.form-label {
    font-size: var(--p-fs-14);
    font-weight: 500;
    margin-bottom: 6px;
}

.form-check-input:checked {
    background-color: var(--p-accent);
    border-color: var(--p-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
    border-color: var(--p-accent);
}

/* ───────── Tables ───────── */
.table {
    font-family: var(--p-font);
}

.table > :not(caption) > * > * {
    padding: 14px 12px;
}

.table-light {
    --bs-table-bg: var(--p-bg-light-alt);
    background: var(--p-bg-light-alt);
}

.table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--p-fs-12);
    font-weight: 500;
    color: var(--p-muted-light);
}

/* ───────── Cards ───────── */
.card {
    border-radius: var(--p-radius-md);
    border-color: var(--p-border-light);
    box-shadow: none;
}

.card .card-header {
    background: var(--p-bg-light-alt);
    border-bottom-color: var(--p-border-light);
    font-weight: 500;
}

/* ───────── Alerts ───────── */
.alert {
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-border-light);
    font-family: var(--p-font);
    padding: 14px 18px;
}

.alert-success { background: #f4faf5; color: #15703f; border-color: #cdebd6; }
.alert-danger  { background: #fdf3f0; color: #9a3412; border-color: #f6d4c8; }
.alert-info    { background: var(--p-bg-light-alt); color: var(--p-text-light); border-color: var(--p-border-light); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ───────── Modals ───────── */
.modal-content {
    border: 0;
    border-radius: var(--p-radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.modal-header {
    border-bottom-color: var(--p-border-light);
    padding: 20px 24px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top-color: var(--p-border-light);
    padding: 16px 24px;
}

.modal-title {
    font-weight: 600;
}

/* ───────── Offcanvas (cart, search, mobile menu) ───────── */
.offcanvas {
    border: 0 !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--p-border-light);
    padding: 20px 24px;
}

.offcanvas-title {
    font-family: var(--p-font);
    font-weight: 600;
    font-size: var(--p-fs-16);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.offcanvas-body {
    padding: 24px;
}

/* ───────── .p-drawer — shared off-canvas convention ───────── */
/* Convention layer over Bootstrap `.offcanvas`. ESC + click-outside + body
   scroll-lock + slide transition come from Bootstrap. This file adds the
   visual contract (header / body / footer slots) and the focus-trap is in
   `wwwroot/assets/js/shop/p-drawer.js`. Markup contract in STYLE_GUIDE.md
   → `.p-drawer — anatomy and contract`. */
.p-drawer {
    background: var(--p-bg-light);
    color: var(--p-text-light);
    font-family: var(--p-font);
    border: 0;
}

.p-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--p-border-light);
}

.p-drawer__title {
    font-weight: 600;
    font-size: var(--p-fs-16);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
}

.p-drawer__close {
    background: transparent;
    border: 0;
    padding: 8px;
    color: var(--p-text-light);
    cursor: pointer;
}

.p-drawer__close:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

.p-drawer__body {
    padding: 24px;
    overflow-y: auto;
}

.p-drawer__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--p-border-light);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Variants — slide direction is delegated to Bootstrap's `.offcanvas-start` /
   `.offcanvas-end` carried alongside on the same element. The rules below are
   empty by design — they exist so the contract is documented at the CSS layer. */
.p-drawer--left { /* pairs with `.offcanvas-start` */ }
.p-drawer--right { /* pairs with `.offcanvas-end` */ }

/* Admin side-panel size variant — 420px on tablet+; Bootstrap collapses to
   full-width below md automatically. First consumer: Slice 4 admin users grid. */
@media (min-width: 768px) {
    .p-drawer--admin-side-panel.offcanvas-end {
        width: 420px;
    }
}

/* Side-panel account-detail list (admin users grid inspector). */
.p-account-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-account-detail-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--p-border-light);
}

.p-account-detail-row:last-child {
    border-bottom: 0;
}

.p-account-detail__name {
    font-weight: 600;
    margin-bottom: 4px;
}

.p-account-detail__meta {
    font-size: var(--p-fs-14, 0.875rem);
    color: var(--p-text-muted, #6c757d);
}

.p-account-detail__activity-kind {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--p-bg-light-alt, #f5f5f5);
    color: var(--p-text-light);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ───────── Grid embellishments — clickable count pill ───────── */
/* Interactive variant: opens an inspector side-panel (admin users grid).
   Zero variant: plain text, no border, no hover (cell still aligns the column). */
.p-account-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 12px;
    border-radius: 999px;
    border: 1px solid var(--p-border-light);
    background: transparent;
    color: var(--p-text-light);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.p-account-count:hover,
.p-account-count:focus-visible {
    background: var(--p-accent, #d40000);
    border-color: var(--p-accent, #d40000);
    color: #fff;
    outline: none;
}

.p-account-count--zero {
    border: 0;
    background: transparent;
    color: var(--p-text-muted, #6c757d);
    cursor: default;
    padding: 2px 0;
    min-width: 0;
}

.p-account-count--zero:hover,
.p-account-count--zero:focus-visible {
    background: transparent;
    border: 0;
    color: var(--p-text-muted, #6c757d);
}

.p-grid-expand-list {
    list-style: disc inside;
    margin: 0;
    padding: 8px 0;
}

.p-grid-expand-list li {
    padding: 2px 0;
}

/* Loading-state placeholder (small shimmer bar). Used by the admin users-grid
   side-panel while account-detail is in flight; reusable for any drawer body. */
.p-skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--p-border-light) 0%, var(--p-bg-light-alt, #f5f5f5) 50%, var(--p-border-light) 100%);
    background-size: 200% 100%;
    animation: p-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes p-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ───────── Dropdowns ───────── */
.dropdown-menu {
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 6px;
    margin-top: 8px !important;
    font-family: var(--p-font);
}

/* Tight-anchored action menu for admin list rows (e.g. the /admin/users kebab).
   The global .dropdown-menu above adds margin-top:8px and Bootstrap's base adds
   top:100%; both stack on top of Popper's transform and push the menu ~44px below
   a short icon-only toggle. Zero them so Popper's transform alone anchors it. */
.admin-actions-menu.dropdown-menu {
    top: 0 !important;
    margin-top: 0 !important;
}

.dropdown-item {
    border-radius: var(--p-radius-sm);
    padding: 8px 12px;
    font-size: var(--p-fs-14);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--p-bg-light-alt);
    color: var(--p-text-light);
}

.dropdown-divider {
    margin: 6px 0;
    border-color: var(--p-border-light);
}

.dropdown-header {
    font-family: var(--p-font);
    font-size: var(--p-fs-12);
    letter-spacing: 0.08em;
    color: var(--p-muted-light);
}

/* ───────── Pagination ───────── */
.page-link {
    color: var(--p-text-light);
    border-color: var(--p-border-light);
/*    border-radius: var(--p-radius-sm) !important;*/
    margin: 0 2px;
}

.page-item.active .page-link {
    background-color: var(--p-text-light);
    border-color: var(--p-text-light);
    color: var(--p-bg-light);
}

/* ───────── Header / navbar (template wrappers) ───────── */
.h__top {
    background: var(--p-bg-light);
    border-bottom: 1px solid var(--p-border-light);
    font-family: var(--p-font);
}

.h__top a {
    color: var(--p-muted-light);
}

.navbar-custom {
    background: var(--p-bg-light) !important;
    border-bottom: 1px solid var(--p-border-light);
    font-family: var(--p-font);
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Mobile browsers (notably iOS Safari) can mis-order a `position: sticky`
       element against unrelated descendants that get their own transform-based
       stacking context elsewhere on the page (product-card hover-lift, the
       carousel arrows, qty-stepper focus/active states) — those can render on
       top of the sticky header mid-scroll despite its lower DOM position and
       higher z-index. Promoting the header to its own compositing layer forces
       it to always paint above everything else regardless of that bug. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
}

/* Per-deployment region marker beside the header logo (e.g. "ZA" on Primmerce SA).
   Rendered only when Storefront:RegionBadge is configured, so China never shows it.
   Small brand-accent pill so it reads as an intentional marker, not a stray label. */
.p-region-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--p-accent);
    color: #fff;
    font-family: var(--p-font);
    font-size: var(--p-fs-12, 12px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Mobile bottom tab bar (Shop/Wishlist/Cart/Account/Search). It's `position: fixed`
   (via Bootstrap's .position-fixed utility) but never got an explicit z-index, so it
   sat at the implicit z-index:0 stacking level — any in-page element with even a small
   *explicit* positive z-index (slider/carousel arrows at z-index:3, Bootstrap's
   .input-group button/focus states at z-index:3-5, etc.) painted on top of it during
   scroll. Matches the sticky top nav's z-index tier so both chrome bars consistently
   sit above page content. */
.responsive-footer {
    z-index: 1030;
}

.navbar-custom .nav-link {
    font-weight: 500;
    color: #000000 !important;
    padding: 16px 18px !important;
    font-size: var(--p-fs-14);
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-link.active {
    color: #c8102e !important;
    opacity: 1;
}

.navbar-custom .dropdown-menu {
    margin-top: 0 !important;
}

.topbar-toolbar a {
    color: #c8102e;
    font-size: 20px;
}

.topbar-toolbar a:hover,
.topbar-toolbar a:focus,
.topbar-toolbar a:hover i,
.topbar-toolbar a:focus i {
    color: #c8102e !important;
    opacity: 1;
}

/* Promo top banner (PromoBanner ViewComponent) */
.t_header {
    background: var(--p-bg-dark) !important;
    color: var(--p-text-dark) !important;
    padding: 10px 0;
    font-size: var(--p-fs-13);
    letter-spacing: 0.04em;
}

.t_header a,
.t_header .text-white {
    color: var(--p-text-dark) !important;
}

/* ───────── Section headers (the wavy old style) ───────── */
.kalles-home-section,
.kalles-section-type-shipping,
.cat-section {
    font-family: var(--p-font);
}

/* ───────── Shop-page hero ───────── */
.shop-hero {
    background: var(--p-bg-dark) !important;
    color: var(--p-text-dark) !important;
    padding: 96px 0 !important;
    min-height: auto !important;
}

.shop-hero::before {
    display: none !important;
}

.shop-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.shop-hero-eyebrow {
    font-size: var(--p-fs-12) !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--p-muted-dark) !important;
    margin-bottom: 16px !important;
}

.shop-hero-title {
    font-family: var(--p-font) !important;
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    margin-bottom: 16px !important;
}

.shop-hero-sub {
    font-size: var(--p-fs-20) !important;
    opacity: 0.7;
    max-width: 480px;
    margin: 0 auto !important;
}

/* ───────── Product cards on shop listing ───────── */
.product-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.product-card .product-media {
    background: var(--p-product-bed) !important;
    border-radius: var(--p-radius-sm) !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

.product-card .product-media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.product-media__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(0,0,0,0.08);
    border-top-color: var(--p-accent, #c0392b);
    border-radius: 50%;
    animation: pm-spin 0.75s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.product-media__img.is-loaded ~ .product-media__spinner { display: none; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

.product-card .product-info {
    padding: 16px 0 0 0 !important;
}

.product-card .product-name {
    font-family: var(--p-font) !important;
    font-weight: 600 !important;
    font-size: var(--p-fs-16) !important;
    color: var(--p-text-light) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    margin-bottom: 4px;
    display: block;
}

.product-card .product-brand {
    font-size: var(--p-fs-12) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--p-muted-light) !important;
    margin-bottom: 4px !important;
}

/* ── Product-card titles: clamp to TWO lines; the full name shows via the
   element's title="" tooltip on hover. min-height reserves exactly 2 lines
   so short (1-line) names don't make the card shorter than long ones —
   keeps card heights + CTA baselines aligned across a row. ── */
.p-product-card .p-product-name,
.product-card .product-name,
.b2b-home__quick-name,
.topbar-product-card .product-title,
.topbar-product-card .related-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    line-height: 1.4;
    min-height: calc(2 * 1.4em);
}

.product-card .product-price {
    font-family: var(--p-font);
    font-weight: 600;
    color: var(--p-text-light) !important;
}

/* ── Reusable product-card image carousel (.p-cc). Arrows ALWAYS visible.
   Used by B2B quick-reorder, homepage Featured Products, related products.
   Markup contract: wwwroot/assets/js/shop/card-carousel.js. ── */
.p-cc { position: relative; }
.p-cc__imglink { display: block; width: 100%; height: 100%; }
.p-cc__img { display: block; width: 100%; }
.p-cc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--p-text-light, #0f0f11);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(15, 15, 17, 0.12);
    transition: background 0.18s ease, transform 0.18s ease;
}
.p-cc__arrow--prev { left: 8px; }
.p-cc__arrow--next { right: 8px; }
.p-cc__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.p-cc__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 5px;
    z-index: 3;
    pointer-events: none;
}
.p-cc__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 15, 17, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.p-cc__dot.is-active { background: var(--p-text-light, #0f0f11); transform: scale(1.25); }

/* /shop — make the existing grid carousel arrows ALWAYS visible (incl. touch),
   and bring the same arrows/dots to the list (row) view. */
.view-grid .product-media__arrow,
.page-shop .view-list .product-media__arrow {
    opacity: 1 !important;
    display: inline-flex !important;
}
.page-shop .view-list .product-media__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink, #0f0f11);
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(15, 15, 17, 0.10);
}
.page-shop .view-list .product-media__arrow--prev { left: 8px; }
.page-shop .view-list .product-media__arrow--next { right: 8px; }
.page-shop .view-list .product-media__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.page-shop .view-list .product-media__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 5px;
    z-index: 3;
    pointer-events: none;
}
.page-shop .view-list .product-media__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 15, 17, 0.25);
}
.page-shop .view-list .product-media__dot.is-active { background: var(--ink, #0f0f11); transform: scale(1.25); }

/* Product card badges — solid chips, no border, tight type */
.product-card .product-badge,
.product-badge-group .product-badge,
span.product-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--p-text-light) !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    line-height: 1;
}

/* SALE — image icon + percentage badge (see Sales-Tag-storefront.png) */
.product-sale-tag-icon {
    width: 45px;
    height: 45px;
    display: block;
    flex-shrink: 0;
    background: url('/assets/images/Sales-Tag-storefront.png') center / cover no-repeat;
}
.product-sale-pct {
    width: 45px;
    height: 45px;
    background: #0f0f0f;
    color: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
}
.product-sale-pct span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* OOS — solid black, white text */
.product-card .product-badge.is-oos,
.product-badge.is-oos,
span.product-badge.is-oos {
    background: var(--p-text-light) !important;
    background-color: var(--p-text-light) !important;
    color: var(--p-bg-light) !important;
    border: 0 !important;
    border-radius: 7px !important;
}

/* NEW — solid black, white text */
.product-card .product-badge.is-new,
.product-badge.is-new,
span.product-badge.is-new {
    background: var(--p-text-light) !important;
    background-color: var(--p-text-light) !important;
    color: var(--p-bg-light) !important;
    border: 0 !important;
}

/* Sale badge — PNG image with a dark %-off pill stacked beneath it. The sub-stack
   owns its own column layout so it is independent of the badge-group direction. */
.product-sale-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
}
.product-sale-badge-img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.product-pct-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    background: #151515;
    color: #ffffff;
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
}

/* ───────── B2B card overlay (Slice 6) ───────── */
/* Renders between the product image and the card body for B2B users only
   (gated client-side by window.__isB2B in productlist.js). Empty string for
   B2C / anonymous — the surrounding card markup is unchanged. */
.b2b-card-overlay {
    background: var(--p-bg-light-alt);
    border-top: 1px solid var(--p-border-light);
    border-bottom: 1px solid var(--p-border-light);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.b2b-card-overlay__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2b-card-overlay__row--meta {
    justify-content: space-between;
    gap: 12px;
}

.b2b-card-overlay__row--actions {
    justify-content: space-between;
}

.b2b-card-overlay__stock {
    font-size: var(--p-fs-12);
    color: var(--p-text-light);
}

.b2b-card-overlay__stock strong {
    font-size: var(--p-fs-14);
    font-weight: 600;
}

.b2b-card-overlay__uom {
    max-width: 140px;
    border-radius: var(--p-radius-sm);
}

.b2b-card-overlay__total {
    font-size: var(--p-fs-14);
    color: var(--p-text-light);
}

.b2b-card-overlay__qty {
    width: auto;
    flex: 0 0 auto;
}

.b2b-card-overlay__qty .b2b-qty-input {
    text-align: center;
    width: 56px;
    flex: 0 0 56px;
}

.b2b-card-overlay__action-slot {
    display: inline-flex;
}

/* #21853 — inline client-side stock pre-check message. */
.b2b-card-overlay__error {
    font-size: var(--p-fs-12);
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .b2b-card-overlay__row--actions {
        flex-direction: column;
        align-items: stretch;
    }
    .b2b-card-overlay__action-slot,
    .b2b-card-overlay__action-slot .btn {
        width: 100%;
    }
}

/* ───────── Sale megamenu ───────── */
.dropdown-mega-3xl .dropdown-menu {
    border-radius: var(--p-radius-md);
    border-color: var(--p-border-light);
}

.dropdown-menu-title {
    text-transform: none;
    color: var(--p-text-light) !important;
}
.dropdown-menu-title:hover { color: #c8102e !important; }

/* ───────── Shop by Department mega-menu (.p-megadept) ─────────
   Four-column overlay panel hung off the header navbar.
   Col 1 = L0 parent categories (hover reveals children in col 2).
   Col 2 = Featured brands (default) / L1 children (on parent hover).
   Col 3 = Empty (default) / L2 grandchildren (on child hover).
   Col 4 = Info panel with Shop Now CTA (always visible).
   Panels within col 2 and col 3 swap via .p-megadept__panel [hidden].
*/
.p-megadept {
    position: relative; /* anchors the absolutely-positioned .dropdown-menu */
}

.p-megadept .nav-link {
    display: inline-flex;
    align-items: center;
}

/* Hover-driven open state — pure CSS, no Bootstrap dropdown JS. The menu
   stays in the DOM (display:block) but is faded out via opacity + visibility
   so the chevron rotation and panel slide transitions actually animate. */
.p-megadept__menu {
    border-radius: var(--p-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.07);
    width: min(1400px, calc(100vw - 32px));
    max-width: 100vw;
    padding: 0;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    pointer-events: none;
}

@media (hover: hover) {
    .p-megadept:hover > .p-megadept__menu,
    .p-megadept:focus-within > .p-megadept__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }
    .p-megadept:not(.p-megadept--inline):hover > .p-megadept__menu .p-megadept__grid,
    .p-megadept:not(.p-megadept--inline):focus-within > .p-megadept__menu .p-megadept__grid {
        min-height: 480px;
    }
}

/* Trigger chevron — rotates 180° while the menu is open so the arrow points
   up. Scoped to the trigger only (per-item chevrons keep their default). */
.p-megadept__trigger-chev {
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .p-megadept:hover > .p-megadept__trigger > .p-megadept__trigger-chev,
    .p-megadept:focus-within > .p-megadept__trigger > .p-megadept__trigger-chev {
        transform: rotate(180deg);
    }
}

/* Col 1 fixed; col 2 flexible; col 4 (info) bounded so the dark panel
   stays compact. Header variant is wider (1400 px) so each column gets
   more breathing room than the original 283 px. */
.p-megadept__grid {
    display: grid;
    grid-template-columns: 300px 1fr minmax(220px, 380px);
    min-height: 360px;
    transition: min-height 0.28s ease 0.18s;
}
.p-megadept--grandkids-open .p-megadept__grid {
    grid-template-columns: 300px 1fr 300px minmax(220px, 380px);
}

.p-megadept__col {
    padding: 20px 18px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .p-megadept__col:last-child {
        border-right: 0;
    }

.p-megadept__col--info {
    background: url('/assets/images/category-strip-banner.png') center / cover no-repeat;
    position: relative;
    overflow: hidden;
    /* space-between distributes the 5 content elements evenly across the fixed
       360px panel height so neither end has dead dark space. */
    justify-content: space-between;
    padding: 28px 24px;
}
.p-megadept__col--info::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: none;
    pointer-events: none;
}
.p-megadept__col--info::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Col 1 — cool off-white sidebar differentiates the nav rail from content */
.p-megadept__col--cats {
    background: #f8f9fb;
}

.p-megadept__col--cats::after hover {
    background: red;
}

/* Grandkids column: hidden (display:none) when empty — no space reserved.
   Opening adds .p-megadept--grandkids-open to the root which widens the menu
   by 220px (matching the fixed column width) so all other columns stay put.
   A slide-in + fade keeps the reveal from feeling abrupt. */
.p-megadept__col--grandkids {
    display: none;
}
.p-megadept--grandkids-open .p-megadept__col--grandkids {
    display: flex;
    animation: p-megadept-col-in 0.66s ease both;
}
@keyframes p-megadept-col-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes p-megadept-col-out {
    from { opacity: 1; transform: translateX(0);      }
    to   { opacity: 0; transform: translateX(-20px);  }
}

/* Col 1 title — small accent-coloured label with a faint red rule */
.p-megadept__col-title {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 600;
    color: var(--p-accent, #c8102e);
    border-bottom: 1px solid rgba(200, 16, 46, 0.14);
    padding-bottom: 10px;
    margin: 0 0 14px;
}

/* Col 2 & 3 titles — bolder section header naming the selected parent */
.p-megadept__col--brands .p-megadept__col-title,
.p-megadept__col--grandkids .p-megadept__col-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--p-text, #111827);
    border-bottom: 2px solid var(--p-accent, #c8102e);
    padding-bottom: 10px;
}

/* Panel wrapper — one visible panel per column at a time; JS switches between
   them by toggling the [hidden] attribute. flex:1 fills the column height so
   the list inside can scroll correctly. */
.p-megadept__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.p-megadept__panel[hidden] {
    display: none !important;
}

.p-megadept__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 360px;
    transition: max-height 1.88s ease;
}

.p-megadept__list::-webkit-scrollbar {
    width: 6px;
}
.p-megadept__list::-webkit-scrollbar-thumb {
    background: var(--p-border-light);
    border-radius: 3px;
}

.p-megadept__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #000000 !important;
    text-align: left;
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover: pill fill — no left-border shadow, just a quiet background tint. */
.p-megadept__item:hover:not(.is-active),
.p-megadept__item:focus-visible:not(.is-active) {
    background-color: #f0f0f0;
    color: #000000 !important;
    box-shadow: none;
}

.p-megadept__item:hover,
.p-megadept__item:focus-visible {
    outline: none;
    opacity: 1; /* override global a:hover { opacity: 0.7 } */
}

/* Active: soft grey pill with black text. */
.p-megadept__item.is-active {
    background-color: #f0f0f0;
    color: #000000 !important;
    box-shadow: none;
    font-weight: 700;
}
.p-megadept__item.is-active:hover,
.p-megadept__item.is-active:focus-visible {
    background-color: #e8e8e8;
    color: #000000 !important;
    box-shadow: none;
}

.p-megadept__item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Category column (col 1) has a wide enough fixed width that wrapping
   is preferable to silently clipping long names. */
.p-megadept__col--cats .p-megadept__item-label {
    white-space: normal;
}

.p-megadept__item-chev {
    margin-left: 8px;
    flex-shrink: 0;
    color: var(--p-text-light);
    font-size: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.p-megadept__item:hover:not(.is-active) .p-megadept__item-chev,
.p-megadept__item:focus-visible:not(.is-active) .p-megadept__item-chev {
    color: var(--p-accent, #c8102e);
}
.p-megadept__item.is-active .p-megadept__item-chev {
    color: var(--p-accent, #c8102e);
}

/* Tree-style category column — chevron + link sit in a row; children indent
   below an expanded parent. */
.p-megadept__tree .p-megadept__node { display: block; }
.p-megadept__row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.p-megadept__expand {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--p-text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.p-megadept__expand:hover {
    background: rgba(200, 16, 46, 0.08);
    color: var(--p-accent, #c8102e);
}
.p-megadept__expand > i {
    transition: transform 0.18s ease;
    display: inline-block;
}
.p-megadept__expand.is-expanded > i {
    transform: rotate(90deg);
}
.p-megadept__expand--spacer {
    cursor: default;
    pointer-events: none;
    background: transparent !important;
}
/* Children list — indented under their parent, removes default ul padding,
   inherits ul reset from .p-megadept__list. */
.p-megadept__nested {
    list-style: none;
    padding: 0 0 0 26px;
    margin: 4px 0 4px;
    border-left: 1px solid var(--p-border-light);
    margin-left: 14px;
}
.p-megadept__nested .p-megadept__item {
    padding: 6px 10px;
    font-size: var(--p-fs-13, 13px);
}
.p-megadept__nested--l2 {
    padding-left: 16px;
    margin-left: 10px;
}
.p-megadept__nested--l2 .p-megadept__item {
    font-size: 12px;
}
.p-megadept__item--child {
    color: var(--p-muted-light);
}
.p-megadept__item--grandchild {
    font-size: 12px;
    color: var(--p-muted-light);
}

.p-megadept__col-footer-link {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 12px;
    color: var(--p-accent, #0d6efd);
    font-size: var(--p-fs-13, 13px);
    font-weight: 500;
    text-decoration: none;
}

.p-megadept__col-footer-link:hover {
    text-decoration: underline;
}

.p-megadept__info-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
    margin: 0; /* space-between handles vertical distribution */
}

.p-megadept__info-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.2;
}

.p-megadept__info-sub {
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
    margin: 0;
}

.p-megadept__info-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--p-fs-14, 14px);
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
}

.p-megadept__info-count strong {
    font-size: 40px;
    font-weight: 800;
    color: var(--p-accent, #c8102e);
    line-height: 1;
}

/* CTA — accent red pill with glow shadow. !important survives Bootstrap's
   .btn cascade and the global a:hover { opacity:0.7 } fade. */
.p-megadept__cta {
    background-color: var(--p-accent, #c8102e) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    align-self: flex-start;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
    display: inline-flex !important;
    align-items: center;
    opacity: 1 !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(200, 16, 46, 0.3) !important;
}

.p-megadept__cta:hover,
.p-megadept__cta:focus-visible {
    background-color: #a50e26 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 16, 46, 0.4) !important;
    opacity: 1 !important;
    outline: none;
}

/* Narrower viewports: collapse to two columns; the info panel spans full
   width. The grandkids column is already hidden at this breakpoint. */
@@media (max-width: 991.98px) {
    .p-megadept__menu {
        width: min(720px, calc(100vw - 24px));
    }

    .p-megadept__grid,
    .p-megadept--grandkids-open .p-megadept__grid {
        grid-template-columns: 1fr 1fr;
    }

    .p-megadept__col--info {
        grid-column: 1 / -1;
        border-top: 1px solid var(--p-border-light);
        border-right: 0;
    }
}

/* ───────── .p-megadept--inline — B2B home sidebar variant ─────────────────
   Progressive column reveal driven by JS classes on the root element:
     Initial                               → col 1 (parents) only
     Hover/click any parent   [info-open]  → col 1 + col 4 (info)
     Parent has children  [children-open]  → col 1 + col 2 + col 4
     Child has grandkids  [grandkids-open] → col 1 + col 2 + col 3 + col 4
   Click outside collapses all extra columns (JS document click handler).
   background:#fff on the menu covers the banner sitting behind the panel.
   Only used via ShopByDepartment/Inline.cshtml on B2BHome.cshtml.
*/
.p-megadept--inline {
    position: static;
    width: 100%;
}
.p-megadept--inline > .p-megadept__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: min-height 0.28s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;      /* grid determines width */
    min-height: 412px;
    height: 100%;     /* stretch to match the banner/main-column height */
    z-index: 100;
    background: #fff; /* covers the banner behind the panel */
}
@media (hover: hover) {
    .p-megadept--inline:hover > .p-megadept__menu,
    .p-megadept--inline:focus-within > .p-megadept__menu {
        min-height: 600px;
    }
    /* No hover-specific list max-height override anymore — the unconditional
       max-height:none above already applies in every state, so the list no
       longer needs to grow (and visibly jump) on hover. */
}
/* Initial: col 1 only (260 px wide — wider than before to prevent label clipping) */
.p-megadept--inline .p-megadept__grid {
    grid-template-columns: 260px;
    min-height: 412px;
    height: 100%;     /* grid fills the panel so the category list can scroll inside */
}
/* The panel now stretches to match the hero + featured-brands height (not just
   the hero), via .p-megadept__menu's height:100%. Raise the category list's
   ceiling well past the header dropdown's 360px cap so more categories show —
   but keep an explicit max-height (not none) so overflow-y:auto has a bound
   to clip/scroll against; without one, overflow content isn't reliably caught
   by the list's own scrollbar and instead gets silently cropped by
   .p-megadept__menu's overflow:hidden further up the chain. */
.p-megadept--inline .p-megadept__list {
    max-height: 560px;
}
/* Col 2 — hidden until .p-megadept--children-open */
.p-megadept--inline .p-megadept__col--brands {
    display: none;
}
.p-megadept--inline.p-megadept--children-open .p-megadept__col--brands {
    display: flex;
    animation: p-megadept-col-in 0.22s ease both;
}
/* Col 4 (info) — hidden until any Col 1 item is hovered → .p-megadept--info-open */
.p-megadept--inline .p-megadept__col--info {
    display: none;
}
.p-megadept--inline.p-megadept--info-open .p-megadept__col--info {
    display: flex;
    animation: p-megadept-col-in 0.22s ease both;
}
/* Exit animations — panel stays expanded (is-collapsing overrides hover loss)
   so overflow:hidden never clips columns mid-animation. After 300ms JS removes
   all open classes; then the panel/list transition back on their own. */
.p-megadept--inline.p-megadept--is-collapsing > .p-megadept__menu {
    min-height: 600px;
}
.p-megadept--inline.p-megadept--is-collapsing.p-megadept--children-open .p-megadept__col--brands {
    display: flex;
    animation: p-megadept-col-out 0.3s ease-out forwards;
}
.p-megadept--inline.p-megadept--is-collapsing.p-megadept--info-open .p-megadept__col--info {
    display: flex;
    animation: p-megadept-col-out 0.3s ease-out forwards;
}
.p-megadept--inline.p-megadept--is-collapsing.p-megadept--grandkids-open .p-megadept__col--grandkids {
    display: flex;
    animation: p-megadept-col-out 0.3s ease-out forwards;
}
/* Grid widens as each column is revealed — col 1 is 260 px to match the
   sidebar reserve; info/brands cols are wider so the fully-open panel
   fills most of the page layout (~1100–1160 px on a 1440 px screen). */
.p-megadept--inline.p-megadept--info-open .p-megadept__grid {
    grid-template-columns: 260px minmax(220px, 400px);
}
.p-megadept--inline.p-megadept--info-open.p-megadept--children-open .p-megadept__grid {
    grid-template-columns: 260px 260px minmax(220px, 400px);
}
.p-megadept--inline.p-megadept--info-open.p-megadept--children-open.p-megadept--grandkids-open .p-megadept__grid {
    grid-template-columns: 260px 260px 260px minmax(220px, 400px);
}
/* Mobile: static, full-width, all columns in a 2-col grid */
@media (max-width: 991.98px) {
    .p-megadept--inline > .p-megadept__menu {
        position: static;
        width: 100%;
        min-height: 0;
        z-index: auto;
        background: transparent;
    }
    .p-megadept--inline .p-megadept__col--brands,
    .p-megadept--inline .p-megadept__col--info { display: flex; }
    .p-megadept--inline .p-megadept__grid,
    .p-megadept--inline.p-megadept--info-open .p-megadept__grid,
    .p-megadept--inline.p-megadept--info-open.p-megadept--children-open .p-megadept__grid,
    .p-megadept--inline.p-megadept--info-open.p-megadept--children-open.p-megadept--grandkids-open .p-megadept__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Inline-only refinements — only what genuinely differs from the shared base ──
   The sidebar panel is much taller than the nav dropdown's fixed 360px height,
   so content is vertically centred here (not space-between).  Explicit margins
   restore the spacing that space-between handles automatically on the nav menu.
*/
.p-megadept--inline .p-megadept__col--info {
    justify-content: center;
}
/* Shorter row padding than the nav dropdown (9px) — lets more categories fit
   in the sidebar list before it needs to scroll. */
.p-megadept--inline .p-megadept__item {
    padding: 3px 12px;
}
.p-megadept--inline .p-megadept__info-eyebrow { margin-bottom: 10px; }
.p-megadept--inline .p-megadept__info-title   { margin-bottom: 10px; }
.p-megadept--inline .p-megadept__info-sub     { margin-bottom: 24px; }
/* Hover feedback — more visible than the shared #f0f0f0 so users can clearly
   track which item they're over in the always-visible sidebar panel. */
.p-megadept--inline .p-megadept__item:hover,
.p-megadept--inline .p-megadept__item:focus-visible {
    background-color: #e9e9e9;
}
.p-megadept--inline .p-megadept__item.is-active:hover,
.p-megadept--inline .p-megadept__item.is-active:focus-visible {
    background-color: #e2e2e2;
}

/* ───────── Footer ───────── */
.footer {
    background: var(--p-bg-dark) !important;
    color: var(--p-text-dark) !important;
    padding: 80px 0 40px !important;
    border-top: 0 !important;
}

.footer * {
    color: var(--p-text-dark);
}

.footer h5 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--p-fs-12);
    font-weight: 500;
    color: var(--p-muted-dark);
    margin-bottom: 20px;
}

.footer .menu .menu-item a,
.footer a.text-muted,
.footer .text-muted,
.footer a,
.footer a:link,
.footer a:visited,
.footer p,
.footer span {
    color: var(--p-text-dark) !important;
    opacity: 0.75;
    font-size: var(--p-fs-14);
    line-height: 2;
    text-decoration: none;
}

.footer a:hover {
    opacity: 1;
    color: #c8102e !important;
}

.footer .accordion-button,
.footer .footer-accordion-button {
    background: transparent !important;
    color: var(--p-text-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.footer-accordion-button::after {
    filter: invert(1);
}

.footer .footer-subscribe input.form-control {
    background: var(--p-bg-dark-alt) !important;
    border: 1px solid var(--p-border-dark) !important;
    color: var(--p-text-dark) !important;
    border-radius: 999px !important;
    padding: 14px 130px 14px 18px;
}

.footer .footer-subscribe input.form-control::placeholder {
    color: var(--p-muted-dark);
}

.footer .footer-subscribe .btn-dark {
    background: var(--p-accent) !important;
    color: var(--p-on-accent) !important;
    border-color: var(--p-accent) !important;
    padding: 10px 22px !important;
    top: 4px;
    right: 4px;
}

.footer .footer-social a {
    color: var(--p-text-dark);
    font-size: 18px;
    opacity: 0.7;
}

.footer .footer-social a:hover {
    opacity: 1;
}

.footer-alt {
    background: var(--p-bg-dark) !important;
    color: var(--p-muted-dark) !important;
    border-top: 1px solid var(--p-border-dark);
    padding: 24px 0 !important;
}

.footer-alt * {
    color: var(--p-muted-dark) !important;
}

.footer-alt .text-dark {
    color: var(--p-text-dark) !important;
}

.footer-alt a {
    color: var(--p-muted-dark) !important;
}

.footer-alt a:hover {
    color: #c8102e !important;
    opacity: 1;
}

/* Back-to-top button — fixed floating control, hidden until the page is
   scrolled down (toggled by back-to-top.js adding .is-visible). */
#nt_backtop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--p-text-light) !important;
    color: var(--p-bg-light) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    /* Hidden by default; revealed once scrolled past the threshold. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#nt_backtop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#nt_backtop i {
    color: var(--p-bg-light);
}

/* Persistent support launcher (US #20847) — signed-in customers only, rendered from
   _Layout via _SupportBar.cshtml. Fixed bottom-LEFT so it never overlaps the bottom-right
   back-to-top control. A brand-accent pill that toggles a small links popover. */
.p-support {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1030;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* #33875 — out of the way while the footer is on screen, so its links can be tapped. */
.p-support.is-tucked {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.p-support__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--p-accent);
    color: var(--p-text-dark);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.p-support__toggle:hover,
.p-support__toggle:focus-visible {
    background: var(--p-accent-hover);
    transform: translateY(-1px);
}

.p-support__toggle i {
    font-size: 18px;
}

.p-support__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    min-width: 230px;
    background: var(--p-bg-light);
    border: 1px solid var(--p-border-light);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 8px;
    /* Reveal animation; base state is display:none via [hidden]. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.p-support.is-open .p-support__panel {
    opacity: 1;
    transform: translateY(0);
}

.p-support__panel-head {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--p-border-light);
    margin-bottom: 6px;
}

.p-support__panel-title {
    display: block;
    font-weight: 700;
    color: var(--p-text-light);
}

.p-support__panel-sub {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.p-support__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--p-text-light);
    text-decoration: none;
    font-size: 14px;
}

.p-support__item i {
    font-size: 18px;
    color: var(--p-accent);
}

.p-support__item:hover,
.p-support__item:focus-visible {
    background: var(--p-bg-light-alt);
    color: var(--p-accent);
}

/* MT1 — movable: dragged with the pointer (touch too), so the browser mustn't scroll on it. Once
   moved, the menu opens below when the button is in the top half, and leftwards in the right half. */
.p-support__toggle { touch-action: none; }
.p-support.is-dragging .p-support__toggle { cursor: grabbing; transform: none; }
.p-support.is-dragging { transition: none; }
.p-support--low .p-support__panel { bottom: auto; top: calc(100% + 10px); }
.p-support--right .p-support__panel { left: auto; right: 0; }
.p-support__reset { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-top: 1px solid var(--p-border-light); margin-top: 4px; }

/* On small screens collapse the pill to an icon-only circle to save space. */
@media (max-width: 575.98px) {
    .p-support { left: 16px; bottom: 16px; }
    .p-support__label { display: none; }
    .p-support__toggle { padding: 12px; }
    .p-support__toggle i { font-size: 20px; }
}

/* #33875 (JHNet M3) — below lg the fixed bottom tab bar (.responsive-footer, ~58px) is on
   every page, and both floating buttons sat on top of it (Help over "Shop", back-to-top over
   "Search"). Lift them clear of it. */
@media (max-width: 991.98px) {
    .p-support,
    #nt_backtop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Newsletter popup — the field reuses the footer-subscribe layout but on a
   light modal background, so it needs its own (non-.footer-scoped) styling. */
.newsletter-modal .modal-content {
    border: 0;
    border-radius: var(--p-radius-md);
    overflow: hidden;
}

.newsletter-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.newsletter-modal .footer-subscribe input.form-control {
    border: 1px solid var(--p-border-light);
    border-radius: 999px !important;
    padding: 14px 140px 14px 18px;
}

.newsletter-modal .footer-subscribe .btn-dark {
    background: var(--p-accent) !important;
    color: var(--p-on-accent) !important;
    border-color: var(--p-accent) !important;
    padding: 10px 22px !important;
    top: 4px;
    right: 4px;
}

.newsletter-modal__msg {
    font-size: var(--p-fs-13);
    min-height: 1.25rem;
}

/* Hide the RTL/LTR toggle from the template — not needed in SA */
a.layout-mode-ltr {
    display: none !important;
}

/* ───────── Account / form pages ───────── */
.kalles-section-page-title,
.shopping-cart-head,
[style*="shopping-cart-head.jpg"] {
    background-color: var(--p-bg-dark);
}

/* The grey title strip used on info/account pages — restyle to dark */
.position-relative > .bg-dark.opacity-50 {
    background: var(--p-bg-dark) !important;
    opacity: 0.7 !important;
}

/* ───────── Brand strip / store-wide brand cards ───────── */
.brand-card-link {
    text-decoration: none;
    color: inherit;
}

.brand-card-link h5 {
    font-weight: 600;
    color: var(--p-text-light);
}

/* ───────── Cart line items (offcanvas + cart page) ───────── */
#cartItemsBody .cart-line,
#cartItemsBody > div {
    border-bottom: 1px solid var(--p-border-light);
    padding: 16px 0;
}

#cartItemsBody img,
.shopping-cart img {
    border-radius: var(--p-radius-sm);
    background: var(--p-product-bed);
}

.cart-count-badge,
.rfq-count-badge {
    background: var(--p-accent) !important;
    color: var(--p-on-accent) !important;
    font-size: 10px !important;
    width: 18px;
    height: 18px;
    line-height: 1;
    /* Overlay style — sits in the upper-right corner of the parent icon link */
    position: absolute;
    top: -6px;
    right: -8px;
}

/* ───────── Quick-view / product modal ───────── */
.product-quick-view .modal-content {
    padding: 0;
}

.product-quick-view .product-title {
    font-size: var(--p-fs-28);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ───────── Misc cleanup ───────── */
.fst-italic {
    font-style: normal !important;
}

.text-uppercase {
    letter-spacing: 0.12em;
}

del {
    color: var(--p-muted-light) !important;
}

/* Make the underline brand-page hero use dark scheme automatically */
.brand-card-link .border {
    border-color: var(--p-border-light) !important;
    border-radius: var(--p-radius-md) !important;
}

/* Spacing — give container some breathing space */
.container,
.container-fluid {
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 1200px) {
    .container,
    .container-fluid {
        padding-left: 48px;
        padding-right: 48px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Admin shell — sidebar nav (Slice 5a)
   Persistent 240px sidebar on desktop ≥ 1280px, icon-only 64px rail at
   tablet 768-1280px, mobile <768px renders the same nav inside a .p-drawer
   (Slice 0b) opened by the titlebar hamburger.
   ─────────────────────────────────────────────────────────────────────── */
/* ── Admin button standard ───────────────────────────────────────────────
   All buttons inside .admin-shell use 10px border-radius. The !important
   overrides Bootstrap's rounded-pill / rounded-* utilities so pages don't
   need per-button class changes. */
.admin-shell .btn { border-radius: 10px !important; }
/* Input-group overrides: higher specificity (3 classes) beats the rule above so the
   joined input+button look works — left side rounded on the input, right side on the button. */
.admin-shell .input-group .form-control { border-radius: 10px 0 0 10px !important; }
.admin-shell .input-group .btn          { border-radius: 0 10px 10px 0 !important; }

/* ───────────────────────────────────────────────────────────────────────
   Admin header (Slice 5b — 2026-05-25)
   Brand-dark sticky top chrome for /admin/* only. Wordmark + Admin badge
   on the left, operator dropdown on the right. NO hamburger here — the
   Slice 5a `.admin-titlebar` below owns the mobile sidebar toggle.
   ─────────────────────────────────────────────────────────────────────── */
/* Fixed header height so the sticky sidebar can sit right under it and fill
   the rest of the viewport (sidebar + shell sizes below read this). */
:root {
    --admin-header-h: 65px; /* the dark header's 40px operator pill + 0.75rem padding each side + border */
}
.admin-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #1b1d21;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 18px rgba(15, 15, 17, 0.18);
    height: var(--admin-header-h);
    display: flex;
    align-items: center;
}
.admin-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}
.admin-header__brand:hover,
.admin-header__brand:focus {
    color: inherit;
    opacity: 0.85;
}
/* A global `a { color: … !important }` rule would otherwise paint the header's links dark. */
.admin-header a.admin-header__brand,
.admin-header a.admin-header__operator { color: #fff !important; }
/* Site logo, forced white whatever its source colours (custom upload or the default glyph). */
.admin-header__logo {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}
.admin-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #ff5a6a;
    background: rgba(200, 16, 46, 0.12);
    font-size: var(--p-fs-11);
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(200, 16, 46, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
/* Dark-header controls: round bell, hairline divider, pill operator menu. */
.admin-header .admin-header__icon-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.admin-header .admin-header__icon-btn:hover,
.admin-header .admin-header__icon-btn:focus-visible,
.admin-header .admin-header__icon-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.admin-header .admin-header__icon-btn i { font-size: 1.15rem; }
.admin-header__divider {
    width: 1px;
    height: 32px;
    margin: 0 0.5rem;
    background: rgba(255, 255, 255, 0.14);
}
.admin-header__operator {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.admin-header__operator:hover,
.admin-header__operator:focus,
.admin-header__operator[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}
.admin-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 16, 46, 0.4);
    color: #fff;
    font-size: 1rem;
}
.admin-header__operator-name {
    font-size: var(--p-fs-14);
    font-weight: 500;
}
.admin-header .dropdown-menu {
    min-width: 240px;
}
/* Phones: tighter gutters and smaller controls so the header row fits a 360px screen. */
@media (max-width: 575.98px) {
    .admin-header { padding: 0.6rem 0; }
    .admin-header > .container-fluid { padding-left: 12px; padding-right: 12px; }
    .admin-header > .container-fluid > .d-flex { gap: 8px !important; }
    .admin-header__logo { height: 24px; }
    .admin-header__badge { padding: 0.15rem 0.45rem; letter-spacing: 0.05em; }
    .admin-header__badge i { display: none; }
    .admin-header .admin-header__icon-btn { width: 36px; height: 36px; }
    .admin-header__operator { padding: 3px 8px 3px 3px; gap: 0.35rem; }
    .admin-header__avatar { width: 30px; height: 30px; }
    .admin-header .admin-titlebar__hamburger { width: 34px; height: 34px; flex-shrink: 0; }
}

.admin-shell--sidebar {
    display: flex;
    align-items: stretch;
    /* Header + shell = one viewport, so a short page doesn't scroll. */
    min-height: calc(100vh - var(--admin-header-h));
}

.admin-shell .admin-subnav-eyebrow {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--p-accent);
    background: rgba(200, 16, 46, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.admin-shell .admin-subnav-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--p-text-light);
    letter-spacing: -0.01em;
}

/* Mobile titlebar — only visible below md; hamburger opens the drawer. */
.admin-shell .admin-titlebar {
    border-bottom: 1px solid var(--p-border-light);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1010;
}
.admin-shell .admin-titlebar__hamburger {
    border-color: var(--p-border-light);
    color: var(--p-text-light);
    padding: 0.25rem 0.55rem;
    line-height: 1;
}
.admin-shell .admin-titlebar__hamburger i {
    font-size: 1.2rem;
}

/* Desktop / tablet sidebar shell. Tablet collapses to a 64px icon rail; full
   240px panel returns at ≥ 1280px (xxl breakpoint). */
.admin-sidebar {
    flex-direction: column;
    width: 64px;
    flex-shrink: 0;
    /* Dark, matching .admin-header. */
    background: #1b1d21;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    /* Pinned under the sticky header; only the page body scrolls. A plain
       0 / 100vh pushed the last links (Settings) below the screen. */
    position: sticky;
    top: var(--admin-header-h);
    align-self: flex-start;
    height: calc(100vh - var(--admin-header-h));
    /* A nav taller than a short window still scrolls (wheel / keyboard focus),
       but without its own scrollbar. */
    overflow-y: auto;
    scrollbar-width: none;
    /* Keep the wheel/trackpad scroll inside the nav when the pointer is over it
       — don't chain the leftover delta to the page behind. */
    overscroll-behavior: contain;
    transition: width .15s ease;
}
.admin-sidebar::-webkit-scrollbar {
    display: none;
}
/* Admin pages only: the page body still scrolls, just without the window
   scrollbar on the right. */
html:has(.admin-shell) {
    scrollbar-width: none;
}
html:has(.admin-shell)::-webkit-scrollbar {
    display: none;
}
/* "Enroll a Nucleus catalog" modal on /admin/etl: the server sends one page,
   so the list sizes to its rows rather than being the global .acct-list
   scroll box, and rows are compact so search + page + pager fit together. */
.etl-discover-dialog {
    max-width: 640px;
}
.etl-discover .acct-list {
    height: auto;
    overflow: visible;
    padding-right: 0;
}
.etl-discover .acct-list-row {
    padding: 8px 12px;
    margin-bottom: 6px;
}
/* ETL panes (Price Lists, Full Run History): the pane is the one scroll box,
   so the list sizes to its rows — one run means nothing to scroll. */
.etl-list-scroll .acct-list {
    height: auto;
    overflow: visible;
}

/* The ETL page's inner panes keep a scrollbar, a thin one. */
.etl-full-card .account-sidebar,
.etl-list-scroll,
.etl-dash-scroll,
.etl-runs-scroll {
    scrollbar-width: thin;
}

/* A page ending in a save bar (Settings, .admin-savebar forms): its body fills
   the window so the bar sits on the window's bottom edge even when the content
   is short; with long content the bar's own position:sticky keeps it there. */
.admin-shell__main:has(.settings-savebar, .admin-savebar) {
    display: flex;
    flex-direction: column;
}
.admin-shell__main:has(.settings-savebar, .admin-savebar) > .container-fluid:last-child {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important; /* beats the layout's py-4 utility (itself !important) */
}
/* The card fills what the bar leaves, rather than the global .account-card min-height
   (100vh - 220px), which with the card's margin and the bar overshot the window, so the
   page always scrolled a little. A form wrapping the card (store, page forms) stretches too. */
.admin-shell__main:has(.settings-savebar, .admin-savebar) > .container-fluid:last-child > form:has(> .account-card) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.admin-shell__main:has(.settings-savebar, .admin-savebar) .account-card {
    margin-bottom: 1.25rem;
    flex: 1 0 auto;
    min-height: 0;
}
.admin-shell__main .settings-savebar,
.admin-shell__main .admin-savebar {
    margin-top: auto;
}

/* ── Admin tabbed form (.account-card--form + .admin-savebar) ─────────────
   The Settings layout — dark tab list on the left, one section per tab, the
   save bar on the window's bottom edge, outside the card (the card's
   overflow:hidden would trap position:sticky; the Save button reaches the form
   with form="…"). For forms that opt in instead of carrying their own <style>
   copy (Settings, AccountForm, EditPriceList and ETL still do). */
.account-card--form { border-radius: 12px; overflow: hidden; }
.account-card--form > .card-body { display: flex; flex-direction: column; }
.account-card--form > .card-body > .row { flex: 1 1 auto; }
.account-card--form .account-sidebar {
    height: auto;
    background: color-mix(in srgb, #1b1d21 95%, #fff); /* the page title strip's shade */
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.account-card--form .account-sidebar-header { padding: 1.25rem 1.25rem 0.875rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.account-card--form .account-sidebar-header h5 { font-size: 0.9rem; font-weight: 600; color: #fff; margin: 0 0 2px; }
.account-card--form .account-sidebar-header small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.account-card--form .account-nav { padding: 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.account-card--form .account-nav .nav-link {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.55rem 0.75rem; border-radius: 10px;
    color: rgba(255, 255, 255, 0.78); font-size: 0.845rem; font-weight: 500;
    text-align: left; border: 0; background: transparent; width: 100%;
}
.account-card--form .account-nav .nav-link i { font-size: 1rem; flex-shrink: 0; }
.account-card--form .account-nav .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.account-card--form .account-nav .nav-link.active { background: rgba(200, 16, 46, 0.32); color: #fff; box-shadow: none; }
.account-card--form .account-content { padding: 1.75rem; }
.account-card--form .section-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #f3f4f6; }
.account-card--form .section-header > i { font-size: 1.2rem; color: #9ca3af; margin-top: 3px; flex-shrink: 0; }
.account-card--form .section-header h5 { font-size: 0.9375rem; font-weight: 600; color: #111827; margin: 0 0 3px; }
.account-card--form .section-header p { font-size: 0.8125rem; color: #6b7280; margin: 0; }
.admin-savebar {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff; border-top: 1px solid #e5e7eb;
    padding: 0.85rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
}
/* The theme repaints .btn-dark brand-red; a true dark fill for Save, as on Settings. */
.admin-savebar .btn-save { background: #1f2937 !important; border-color: #1f2937 !important; color: #fff !important; }
.admin-savebar .btn-save:hover,
.admin-savebar .btn-save:focus { background: #111827 !important; border-color: #111827 !important; color: #fff !important; }
@media (min-width: 1280px) {
    .admin-sidebar {
        width: 240px;
    }
}
.admin-sidebar__nav {
    /* Bottom room so the last links can scroll clear of the floating Support button. */
    padding: 12px 0 72px;
    flex: 1 1 auto;
}

/* Drawer variant — full-width inside the .p-drawer, no border / sticky. */
.admin-sidebar--in-drawer {
    width: 100%;
    height: auto;
    border-right: 0;
    position: static;
    overflow: visible;
    padding: 0;
}

/* Nav structure — grouped list. Group label hidden in icon-rail (tablet) mode;
   shown on desktop and inside the mobile drawer. */
.admin-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-nav__group {
    padding: 8px 0;
}
.admin-nav__group + .admin-nav__group {
    margin-top: 6px;
}
.admin-nav__group-label {
    display: none; /* hidden in tablet icon-rail by default */
    padding: 6px 26px 6px;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 1280px) {
    .admin-nav__group-label {
        display: block;
    }
}
.admin-sidebar--in-drawer .admin-nav__group-label {
    display: block;
}
.admin-nav__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Links are rounded pills inset from the edges; the active one gets a deep red
   fill. In the tablet icon rail the label is hidden and the title attr acts as
   a browser-native tooltip. `.admin-sidebar` in the selectors beats the global
   `a { color: … !important }` rule's specificity only together with !important. */
.admin-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 12px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
    white-space: nowrap;
}
.admin-sidebar .admin-nav__link {
    color: rgba(255, 255, 255, 0.82) !important;
}
.admin-nav__link i {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.78);
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    transition: color .15s ease;
}
@media (max-width: 1279.98px) {
    /* Icon rail: centre the icon inside the 64px column. */
    .admin-sidebar:not(.admin-sidebar--in-drawer) .admin-nav__link {
        justify-content: center;
        margin: 2px 8px;
        padding: 10px 0;
    }
}
.admin-nav__link span {
    display: none; /* tablet icon-rail default */
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 1280px) {
    .admin-nav__link span {
        display: inline;
    }
}
.admin-sidebar--in-drawer .admin-nav__link span {
    display: inline;
}
.admin-sidebar--in-drawer .admin-nav__link {
    padding: 11px 14px;
}
.admin-sidebar .admin-nav__link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.06);
}
.admin-nav__link:hover i {
    color: #fff;
}
.admin-sidebar .admin-nav__link.active {
    color: #fff !important;
    background-color: rgba(200, 16, 46, 0.32);
}
.admin-nav__link.active i {
    color: #fff;
}
.admin-nav__link:focus,
.admin-nav__link:focus-visible {
    outline: 2px solid rgba(255, 90, 106, 0.6);
    outline-offset: -2px;
}

/* Mobile drawer chrome matches the dark sidebar it holds. */
#offcanvasAdminNav {
    background: #1b1d21;
    color: #fff;
}
#offcanvasAdminNav .p-drawer__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
#offcanvasAdminNav .p-drawer__title,
#offcanvasAdminNav .p-drawer__close {
    color: #fff;
}

/* Main column — fills remaining width next to the sidebar. min-width:0 lets
   wide admin tables (Syncfusion grid on /admin/users, etc.) overflow-scroll
   inside their own container instead of pushing the whole layout. */
.admin-shell__main {
    flex: 1 1 auto;
    min-width: 0;
    /* Admin page body: the header's charcoal lightened 88% (88% white); raise the white share to lighten. */
    --admin-body-bg: color-mix(in srgb, #1b1d21 12%, #fff);
    background-color: var(--admin-body-bg);
}
/* Page title strip under the header on every admin page: the header's charcoal
   lightened by 5% (mixed with 5% white), white title, solid red "Admin" tag.
   It stays pinned under the header; only the content below scrolls. z-index
   sits under the header (1030) so its dropdowns still open over it. */
.admin-pagehead {
    --admin-pagehead-bg: color-mix(in srgb, #1b1d21 95%, #fff); /* raise the white share to lighten */
    border-bottom: 1px solid rgba(15, 15, 17, 0.12);
    background: var(--admin-pagehead-bg);
    position: sticky;
    top: var(--admin-header-h);
    z-index: 1020;
}
.admin-shell .admin-pagehead .admin-subnav-title {
    color: #fff;
}
.admin-shell .admin-pagehead .admin-subnav-eyebrow {
    color: #fff;
    background: #c8102e;
}

/* ETL page ─────────────────────────────────────────────────────────────── */

/* "DEFAULT" badge on the PriceList name */
.etl-default-badge {
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--bs-danger, #dc3545);
    background: rgba(220, 53, 69, .1);
    border-radius: 4px;
    padding: 2px 7px;
}

/* "ALWAYS ON" pill for the default price list */
.etl-always-on-badge {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #0d6e6e;
    background: #d1f0f0;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* Status badges in the price-list table and run-status cell */
.etl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 10px;
    border: 1.5px solid;
    white-space: nowrap;
}
.etl-status-badge--success {
    color: #1a7c4a;
    background: #eaf7ef;
    border-color: #b2e5cb;
}
.etl-status-badge--running {
    color: #856404;
    background: #fff8e1;
    border-color: #ffd966;
}
.etl-status-badge--failed {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}
.etl-status-badge--idle {
    color: rgba(15,15,17,.5);
    background: #f5f5f7;
    border-color: #ddd;
}

/* Pipeline pills inside the Recent runs table */
.etl-pipe-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 20px;
    padding: 2px 9px;
    border: 1.5px solid;
    text-decoration: none;
    white-space: nowrap;
    color: #1a7c4a;
    background: #eaf7ef;
    border-color: #b2e5cb;
}
.etl-pipe-badge--running {
    color: #856404;
    background: #fff8e1;
    border-color: #ffd966;
}
.etl-pipe-badge--failed {
    color: #dc3545;
    background: #fdf2f2;
    border-color: #f5b8bc;
}


/* Tables — denser, eyebrow-style headers */
.admin-shell .table {
    font-size: 0.9rem;
    margin-bottom: 0;
}
.admin-shell .table > :not(caption) > * > * {
    padding: 0.65rem 0.75rem;
}
.admin-shell .table thead th {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(15, 15, 17, 0.55) !important;
    font-weight: 600;
    background-color: transparent !important;
    border-bottom: 1px solid var(--p-border-light) !important;
}
.admin-shell .table tbody tr {
    border-color: var(--p-border-light);
}
.admin-shell .table tbody tr:hover {
    background-color: rgba(15, 15, 17, 0.02);
}
/* Money in the quote-editor line-total cell must stay on one line — the SA money
   format ("R10 798.92") uses a space thousands-separator that would otherwise wrap. */
.admin-shell .table .line-total {
    white-space: nowrap;
}

/* Card wrapper used by some admin sections */
.admin-shell .admin-card {
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    padding: 24px;
    background: #fff;
}

/* Section headings inside admin pages */
.admin-shell h5.section-heading,
.admin-shell .section-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(15, 15, 17, 0.6);
    margin-bottom: 1rem;
}

/* Standardise admin form controls — tighter, clean focus */
.admin-shell .form-control,
.admin-shell .form-select {
    border-color: var(--p-border-light);
    border-radius: var(--p-radius-sm);
}
.admin-shell .form-control:focus,
.admin-shell .form-select:focus {
    border-color: var(--p-bg-dark);
    box-shadow: 0 0 0 2px rgba(15, 15, 17, 0.08);
}
.admin-shell .form-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(15, 15, 17, 0.55);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Empty-state and helper text */
.admin-shell .fs-13,
.admin-shell .text-muted.small {
    font-size: 0.8125rem;
}

/* Tighter badges in admin context */
.admin-shell .badge.rounded-pill {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* =============================================================================
   COMPONENT PATTERNS — shared building blocks. Use these classes in views
   instead of inline <style> or per-page rules. See /STYLE_GUIDE.md.
   ========================================================================== */

/* ── Eyebrow micro-label (formalised; previously also .p-eyebrow) ── */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 15, 17, 0.6);
    display: inline-block;
    line-height: 1.4;
}

/* ── Hairline divider ── */
.hairline { border-bottom: 1px solid var(--p-border-light); }
.hairline-top { border-top: 1px solid var(--p-border-light); }

/* ── Surface card (lightweight, not Bootstrap .card) ── */
.surface-card {
    background: #fff;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    padding: 24px;
}

/* ── Filter title underline (replaces .bg-teal width:60/134 inline pattern) ── */
.filter-title-bar {
    height: 2px;
    width: 60px;
    background: var(--p-text-light);
    margin-bottom: 1.5rem;
}
.filter-title-bar.wide { width: 134px; }

/* ── Rounded chip 30/40 (recurring sized circle pattern) ── */
.chip-30 {
    min-width: 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.chip-40 {
    min-width: 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

/* ── Cart drawer CTA (compact uppercase wide-tracked pill) ── */
.cart-cta { letter-spacing: 0.25em; font-size: 11px; }

/* ── Cursor utility (Bootstrap omits this) ── */
.cursor-pointer { cursor: pointer; }

/* ── Soft grey surface used by legacy template filter chips ── */
.bg-soft-grey { background-color: #f2f2f2; }

/* ── Sized initials chip (25/30/40 sit alongside; 25 added for review cards) ── */
.chip-25 {
    min-width: 25px;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

/* ── Flat filter box (legacy .filter-box without the template's drop-shadow) ── */
.filter-box-flat { box-shadow: none; }

/* ── Mobile offcanvas menu items (cardModel.cshtml) ── */
.mobile-menu-link { font-size: var(--p-fs-16); font-weight: 500; }
.mobile-menu-link.is-sale { font-weight: 600; color: var(--p-accent); }
.mobile-menu-sub-link { font-size: var(--p-fs-14); opacity: 0.7; }
.mobile-menu-divider {
    border-top: 1px solid var(--p-border-light);
    margin-top: 8px;
    padding-top: 8px;
}
.mobile-menu-section {
    border-top: 1px solid var(--p-border-light);
    padding: 16px 0;
}
.mobile-menu-contact {
    border-top: 1px solid var(--p-border-light);
    padding: 16px 24px;
    font-size: var(--p-fs-13);
    opacity: 0.6;
}
.mobile-menu-tab-btn {
    border-radius: 0;
    padding: 16px 0;
    font-size: var(--p-fs-12);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ── Product detail (layout01.cshtml) ── */
.pd-meta-block {
    border-top: 1px solid var(--p-border-light);
    padding-top: 24px;
    font-size: var(--p-fs-13);
    line-height: 1.9;
}
.pd-meta-label {
    opacity: 0.55;
    min-width: 96px;
    display: inline-block;
}
.pd-accordion-arrow-strip { width: 47px; height: 100%; }
.icon-44 { width: 44px; }

/* ── Soft pill badge (small uppercase, light surface, dark ink) ── */
.badge-pill-soft {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-text-light);
    background: var(--p-bg-light-alt);
    border-radius: 999px;
    line-height: 1.4;
}

/* ── Account UI — unified offcanvas + dropdown ─────────────────────────── */
/* Goal: header dropdown ("Hi, Ryan") and offcanvas "MY ACCOUNT" drawer
   look like one family — flat white, hairline borders, line-icon menu
   items, dark CTAs. No teal, no shadows-with-attitude. */
.acct-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--p-border-light);
    padding: 20px 24px;
}
.acct-offcanvas .acct-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--p-bg-light-alt);
    color: var(--p-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid var(--p-border-light);
}
.acct-offcanvas .acct-name { font-weight: 600; font-size: 1rem; margin: 12px 0 2px; }
.acct-offcanvas .acct-email {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-muted-light);
    margin: 0 0 20px;
}
.acct-offcanvas .acct-menu {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border-top: 1px solid var(--p-border-light);
}
.acct-offcanvas .acct-menu li { border-bottom: 1px solid var(--p-border-light); }
.acct-offcanvas .acct-menu a,
.acct-offcanvas .acct-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 4px;
    font-size: 0.875rem;
    color: var(--p-text-light);
    background: transparent;
    border: 0;
    text-align: left;
    text-decoration: none;
}
.acct-offcanvas .acct-menu a:hover,
.acct-offcanvas .acct-menu button:hover {
    opacity: 1;
    background: rgba(15, 15, 17, 0.03);
}
.acct-offcanvas .acct-menu i:first-child {
    font-size: 1.1rem;
    width: 22px;
    color: var(--p-muted-light);
    flex-shrink: 0;
}
.acct-offcanvas .acct-menu .acct-chev {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--p-muted-light);
}

/* Public-site header account dropdown (Hi, Ryan menu).
   Restyle the Bootstrap dropdown to match the offcanvas family. */
.acct-dropdown.dropdown-menu {
    border: 1px solid var(--p-border-light) !important;
    border-radius: var(--p-radius-sm) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    padding: 8px 0 !important;
    min-width: 240px;
    margin-top: 8px !important;
    background: #fff;
    /* Sit above the sticky admin sub-nav (z-index 1010) so the dropdown is never
       covered when admins use the "My account" menu from inside /admin/*. */
    z-index: 1080 !important;
}
.acct-dropdown .acct-dd-header {
    padding: 4px 16px 10px;
    border-bottom: 1px solid var(--p-border-light);
    margin-bottom: 6px;
}
.acct-dropdown .acct-dd-header .acct-dd-greeting {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-muted-light);
    display: block;
    margin: 0;
}
.acct-dropdown .acct-dd-header .acct-dd-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--p-text-light);
    display: block;
    margin-top: 2px;
}
.acct-dropdown .dropdown-item {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    color: var(--p-text-light) !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.acct-dropdown .dropdown-item i {
    width: 18px;
    font-size: 1rem;
    color: var(--p-muted-light);
}
.acct-dropdown .dropdown-item:hover,
.acct-dropdown .dropdown-item:focus {
    background: rgba(15, 15, 17, 0.04) !important;
    color: var(--p-text-light) !important;
}
.acct-dropdown .dropdown-item.is-danger { color: var(--p-accent) !important; }
.acct-dropdown .dropdown-item.is-danger i { color: var(--p-accent); }
.acct-dropdown .dropdown-item.is-admin { color: var(--p-accent) !important; font-weight: 600; }
.acct-dropdown .dropdown-item.is-admin i { color: var(--p-accent); }
.acct-dropdown .dropdown-divider { margin: 6px 0; }

/* B2B account switcher — header pill + dropdown rows. Reuses the .acct-dropdown
   chrome; each row carries an initials avatar and the active one is checked. */
.acct-switcher-menu { min-width: 264px; }
.acct-switcher-menu form { width: 100%; }
.acct-switcher-menu .dropdown-item { width: 100%; background: none; border: 0; text-align: left; }
.acct-switch-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(15, 15, 17, 0.06);
    color: var(--p-text-light);
    font-size: 0.74rem;
    font-weight: 700;
}
.acct-switch-item__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acct-switcher-menu .acct-switch-item__check {
    color: var(--p-accent) !important;
    font-size: 1rem;
    margin-left: auto;
}
.acct-switcher-menu .dropdown-item.active {
    font-weight: 600;
    cursor: default;
    background: rgba(200, 16, 46, 0.06) !important;
    color: var(--p-text-light) !important;
}
.acct-switcher-menu .dropdown-item.active .acct-switch-item__avatar {
    background: var(--p-accent);
    color: #fff;
}

/* ───────── .p-help-link — header pill beside the logo ("Shop all", B2B; JHNet UX23) ───────── */
.p-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.25rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--p-border-light);
    border-radius: 10px;
    color: #c8102e;
    font-size: var(--p-fs-14);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background var(--p-transition), border-color var(--p-transition), color var(--p-transition);
}
.p-help-link i { font-size: 1rem; }
.p-help-link:hover,
.p-help-link:focus-visible {
    background: rgba(200, 16, 46, 0.06);
    border-color: #c8102e;
    color: #c8102e !important;
}
.p-help-link:hover i,
.p-help-link:focus-visible i {
    color: #c8102e !important;
}
.p-help-link:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

/* ───────── .p-account-badge — header active-account badge (Slice 2) ─────────
   Styled as a subtle ghost pill so it sits alongside the toolbar's dark line
   icons + "Hi, name" text rather than reading as a loud crimson chip. */
.p-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: 1px solid var(--p-border-light);
    color: var(--p-text-light);
    border-radius: 999px;
    font-size: var(--p-fs-14);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background var(--p-transition), border-color var(--p-transition), color var(--p-transition);
}
.p-account-badge i { font-size: 1rem; }
.p-account-badge--interactive:hover,
.p-account-badge--interactive:focus-visible {
    background: rgba(15, 15, 17, 0.04);
    border-color: var(--p-text-light);
    color: var(--p-text-light);
}
.p-account-badge--interactive:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

/* ── .p-acct-switch — header account switcher pill (B2B) ──────────────────────
   The toolbar's blanket `.topbar-toolbar a { font-size: 20px }` would otherwise
   inflate the account name out of line with its neighbours, so size is pinned
   here with toolbar-beating specificity. Initials avatar + name + chevron. */
.topbar-toolbar .p-acct-switch,
.p-acct-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border: 1px solid var(--p-border-light);
    border-radius: 999px;
    color: #c8102e;
    line-height: 1.1;
    text-decoration: none;
    transition: background var(--p-transition), border-color var(--p-transition);
}
.p-acct-switch__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--p-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.p-acct-switch__name {
    font-size: var(--p-fs-14);
    font-weight: 500;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-acct-switch__chev {
    font-size: 0.8rem;
    color: var(--p-muted-light);
    transition: transform .15s ease;
}
.p-acct-switch--interactive { cursor: pointer; }
.p-acct-switch--interactive:hover,
.p-acct-switch--interactive:focus-visible {
    background: rgba(15, 15, 17, 0.04);
    border-color: var(--p-text-light);
    color: var(--p-text-light);
}
.p-acct-switch--interactive:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}
.acct-switcher [aria-expanded="true"] .p-acct-switch__chev {
    transform: rotate(180deg);
}

/* Admin overview — triage cards + manage tiles.
   `.admin-stat-card.is-active` highlights non-zero counts in the Today row. */
.admin-stat-card,
.admin-tile {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    background: #fff;
}
.admin-stat-card:hover,
.admin-tile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    border-color: #d0d4d9 !important;
    transform: translateY(-1px);
}
.admin-stat-card.is-active {
    border-color: var(--p-accent) !important;
    border-width: 1.5px !important;
}
.admin-stat-card.is-active .display-6 {
    color: var(--p-accent);
}

/* ── Coloured Manage tiles (admin Overview) ───────────────────────────────
   Each tile carries an --tile-accent set by a modifier class. Icon chip +
   coloured top border + accent-coloured value give the dashboard variation
   without abandoning the neutral surface. */
.admin-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 3px solid var(--tile-accent, var(--p-accent)) !important;
}
.admin-tile__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 1.3rem;
    color: var(--tile-accent, var(--p-accent));
    background: color-mix(in srgb, var(--tile-accent, var(--p-accent)) 13%, #fff);
}
.admin-tile__body { min-width: 0; }
.admin-tile__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--p-text-light);
    transition: color .15s ease;
}
.admin-tile:hover .admin-tile__value { color: var(--tile-accent, var(--p-accent)); }
.admin-tile__label { font-size: 0.8125rem; color: var(--p-muted-light); }
.admin-tile__hint { font-size: 0.72rem; color: var(--p-muted-light); }

.admin-tile--blue   { --tile-accent: #2563eb; }
.admin-tile--teal   { --tile-accent: #0d9488; }
.admin-tile--violet { --tile-accent: #7c3aed; }
.admin-tile--amber  { --tile-accent: #d97706; }
.admin-tile--green  { --tile-accent: #16a34a; }
.admin-tile--indigo { --tile-accent: #4f46e5; }

/* Operator-queue per-section colour identity — count chips (visible even at 0)
   plus a left accent on the populated list. */
.admin-queue__count--rfq     { background: #e0edff; color: #1d4ed8; }
.admin-queue__count--orders  { background: #fef3c7; color: #b45309; }
.admin-queue__count--returns { background: #ede9fe; color: #6d28d9; }
.admin-queue__list--rfq     { border-left: 3px solid #2563eb; }
.admin-queue__list--orders  { border-left: 3px solid #d97706; }
.admin-queue__list--returns { border-left: 3px solid #7c3aed; }

/* Admin queue (Slice 5c — 2026-05-25) — operator queue on /admin home.
   Three sections (RFQs / Orders / Returns); each row is a full-card-clickable
   <a> laid out as a 3-column CSS Grid (primary/status/meta). All rules namespaced
   under .admin-queue / .admin-queue__* / .admin-queue-empty. */
.admin-queue__section-title {
    font-size: var(--p-fs-18, 1.0625rem);
    font-weight: 600;
    color: var(--ink, #222);
}
.admin-queue__count.badge {
    font-size: var(--p-fs-12, 0.75rem);
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}
.admin-queue__list {
    border: 1px solid var(--p-border, #e6e6e6);
    border-radius: var(--p-radius-sm, 0.375rem);
    overflow: hidden;
}
.admin-queue__row {
    border-bottom: 1px solid var(--p-border, #e6e6e6);
}
.admin-queue__row:last-child {
    border-bottom: none;
}
.admin-queue__row-link {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.12s;
}
.admin-queue__row-link:hover {
    background: var(--p-bg-subtle, #f8f9fa);
}
.admin-queue__row-link:focus-visible {
    outline: 2px solid var(--p-accent, #d4a017);
    outline-offset: -2px;
}
.admin-queue__row-primary {
    font-weight: 600;
    color: var(--ink, #222);
    grid-column: 1 / 2;
    grid-row: 1;
}
.admin-queue__row-secondary {
    font-size: var(--p-fs-13, 0.8125rem);
    color: var(--p-text-muted, #6c757d);
    grid-column: 1 / 2;
    grid-row: 2;
}
.admin-queue__row-status {
    font-size: var(--p-fs-11, 0.6875rem);
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: var(--p-radius-sm, 0.375rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    align-self: center;
}
.admin-queue__row-status--pending {
    background: #fff3cd;
    color: #856404;
}
.admin-queue__row-status--processing {
    background: #d1ecf1;
    color: #0c5460;
}
.admin-queue__row-meta {
    font-size: var(--p-fs-12, 0.75rem);
    color: var(--p-text-muted, #6c757d);
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .admin-queue__row-meta {
        display: none;
    }
}
.admin-queue-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--p-bg-subtle, #f8f9fa);
}
.admin-queue-empty__icon {
    font-size: 2.5rem;
    color: var(--p-text-muted, #6c757d);
    opacity: 0.6;
}
.admin-queue-empty__title {
    font-size: var(--p-fs-16, 1rem);
    font-weight: 500;
    color: var(--ink, #222);
    margin-bottom: 0.25rem;
}
.admin-queue-empty__hint {
    font-size: var(--p-fs-13, 0.8125rem);
}

/* ── Admin filter panel ──────────────────────────────────────────────────────
   Horizontal filter bar used on admin list pages (RFQs, Orders, Returns).
   All fields in one flex row; labels are uppercase eyebrows; active filters
   get a red border; active chips + match count sit below the panel. */
.admin-filter-panel {
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 12px;
    padding: 16px 20px 14px;
    margin-bottom: 39px;
}
.admin-filter-panel__fields {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.admin-filter-field--search { flex: 1 1 200px; }
.admin-filter-field--sm     { flex: 0 0 140px; }
.admin-filter-field--date   { flex: 0 0 130px; }
@media (max-width: 767px) {
    .admin-filter-field--search { flex: 1 1 100%; }
    .admin-filter-field--sm     { flex: 1 1 calc(50% - 7px); }
    .admin-filter-field--date   { flex: 1 1 calc(50% - 7px); }
    .admin-filter-date-sep      { display: none; }
}
.admin-filter-field label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa0a8;
    margin-bottom: 0;
}
/* search input with magnifier icon */
.admin-filter-search-wrap {
    position: relative;
}
.admin-filter-search-wrap .admin-filter-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c6cd;
    font-size: 0.85rem;
    pointer-events: none;
}
.admin-filter-search-wrap input { padding-left: 30px; }
/* active filter — red border + text */
.admin-filter-panel .is-active-filter {
    border-color: #c8102e !important;
    color: #c8102e !important;
}
/* date arrow separator */
.admin-filter-date-sep {
    color: #adb5bd;
    font-size: 0.85rem;
    padding-bottom: 7px;
    flex-shrink: 0;
}
/* actions row */
.admin-filter-panel__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}
.admin-filter-reset {
    font-size: 0.8rem;
    color: #495057;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.12s;
}
.admin-filter-reset:hover { color: #c8102e; text-decoration: underline; }
.admin-filter-apply {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 10px;
    background: #c8102e;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
}
.admin-filter-apply:hover { background: #a50d26; color: #fff; }
/* bare eye-icon link used as the row action on RFQs / Orders / Returns admin lists */
.admin-row-eye { color: #94a3b8; font-size: 1.15rem; line-height: 1; text-decoration: none; display: inline-flex; }
.admin-row-eye:hover, .admin-row-eye:focus { color: #c8102e; }
/* match count + active chip row below the panel */
.admin-filter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    color: #6c757d;
    min-height: 26px;
}
.admin-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 11px;
    border-radius: 20px;
    background: rgba(200,16,46,0.08);
    color: #c8102e;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.admin-filter-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(200,16,46,0.15);
    color: #c8102e;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

/* Mobile offcanvas — eyebrow group separator + inline logout-form alignment.
   The theme's .accordion-nav-list styles each <li><a> as a full-width row;
   our mobile-nav-group sits between two such lists as a visual divider. */
.mobile-nav-group {
    padding: 16px 16px 6px;
    border-top: 1px solid var(--p-border-light);
    margin-top: 8px;
}
.mobile-nav-eyebrow {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-muted-light);
    font-weight: 600;
}
.mobile-nav-eyebrow strong {
    color: var(--p-text-light);
    font-weight: 700;
}
/* Render the inline logout form so it matches the surrounding <a> rows visually. */
.accordion-nav-list .mobile-logout-form,
.accordion-nav-list .mobile-logout-form button {
    width: 100%;
    text-align: left;
}

/* Width utility that defaults to 100% on xs and auto from md+. Used so action
   buttons in card-list rows take the full width on mobile but shrink on desktop. */
@media (min-width: 768px) {
    .w-md-auto { width: auto !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Product detail tab nav — horizontal scroll on small screens so all pills
   (Description / Additional Info / Warranty / Wash & Care / Reviews) stay
   reachable on mobile without wrapping into ugly multi-row stacks.
   ───────────────────────────────────────────────────────────────────────── */
.pd-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-bottom: .25rem;
    margin-bottom: 0;
}
.pd-tabs-nav::-webkit-scrollbar { display: none; }
.pd-tabs-nav .nav-item { flex: 0 0 auto; }
.pd-tabs-nav .nav-link { white-space: nowrap; }
@media (max-width: 991.98px) {
    .main-project-section .tab-content { margin-top: 1.25rem !important; }
    .main-project-section .tab-pane .table { font-size: .9rem; }
}

/* Sticky-bar "Configure & add to RFQ" target highlight. Briefly outlines the
   UoM picker (or the product-details column on B2C / no-tier products) when
   the user taps the mobile sticky bar — so the action is visible even when
   the target is already in view and scrollIntoView is a no-op. */
.pd-flash {
    animation: pdFlash 1.4s ease-out;
    border-radius: .5rem;
}
@keyframes pdFlash {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
    30%  { box-shadow: 0 0 0 6px rgba(220, 53, 69, .35); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive list pattern — used by RFQ draft, account tables.
   Single DOM tree; CSS scales it: cards on mobile, table-row on md+.
   Conventions used inside .rfq-lines + .acct-list:
     .rfq-cell-label  — small uppercase label, visible only < md
     .rfq-cell-value  — the actual datum
   ─────────────────────────────────────────────────────────────────────── */
.page-rfq .rfq-lines,
.acct-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 12px;
}

.page-rfq .rfq-lines-header,
.acct-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
/*    border-top: 1px solid var(--p-border-light);
    border-bottom: 1px solid var(--p-border-light);*/
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(15, 15, 17, 0.55);
    font-weight: 600;
    margin-bottom: 9px;
}

/* Header/body column alignment (RFQ draft only). The scrolling row container
   (.rfq-lines) used a manual `padding-right: 12px` gutter that the static header
   lacked, so the header's 1fr Product column stayed wider and every fixed column
   under it drifted 12px left. Reserve a real scrollbar gutter on BOTH instead
   (stable = reserved whether or not the list is actually scrolling), so the
   columns line up in every state. overflow:hidden makes the header a scroll
   container so `scrollbar-gutter` takes effect on it (it never actually scrolls).
   Scoped to .page-rfq so .acct-list keeps its own gutter. */
.page-rfq .rfq-lines {
    padding-right: 0;
    scrollbar-gutter: stable;
}
.page-rfq .rfq-lines-header {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Mobile-first: each line is a stacked card. */
.page-rfq .rfq-line,
.acct-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 14px;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    margin-bottom: 10px;
    background: #fff;
}
.page-rfq .rfq-line.is-warning,
.acct-list-row.is-warning {
    border-color: rgba(255, 193, 7, 0.6);
    background: rgba(255, 244, 200, 0.4);
}
.page-rfq .rfq-cell,
.acct-list-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.page-rfq .rfq-cell-label,
.acct-list-cell-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p-muted-light);
    font-weight: 600;
}
.page-rfq .rfq-line-name { font-weight: 600; }
.page-rfq .rfq-line-sku,
.page-rfq .rfq-line-tier { font-size: 0.8rem; color: var(--p-muted-light); }
.page-rfq .rfq-line-tier { color: var(--p-text-light); }

/* Thumbnail + name block — thumb on the left, name/sku/tier stacked on the right. */
.page-rfq .rfq-line-name-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.page-rfq .rfq-line-thumb {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    overflow: hidden;
    background: #fff;
}
.page-rfq .rfq-line-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-rfq .rfq-line-name-block { min-width: 0; flex: 1 1 auto; }
@media (min-width: 768px) {
    .page-rfq .rfq-line-thumb { width: 48px; height: 48px; }
}

/* Static thumb used on Razor-rendered RFQ detail / admin RFQ detail pages
   (vs the JS-rendered one on the draft above). Same dimensions for consistency. */
.rfq-line-thumb-static {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    overflow: hidden;
    background: #fff;
}
.rfq-line-thumb-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .rfq-line-thumb-static { width: 48px; height: 48px; }
}

/* The name cell spans both columns at < md so action cell sits on its own row. */
.page-rfq .rfq-cell-name,
.acct-list-cell-name { grid-column: 1 / -1; }

.page-rfq .rfq-cell-actions { justify-self: end; }
.page-rfq .rfq-qty-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-rfq .rfq-qty-group { width: auto; min-width: 110px; flex-wrap: nowrap; }
.page-rfq .rfq-qty-group .rfq-qty-input {
    text-align: center;
    /* Width is content-driven (set inline in ch by autosizeRfqQty) so large
       quantities show in full instead of being clipped at ~4 digits; min-width
       keeps small values looking as before, max-width caps growth so the qty
       cell never overflows into the next column. */
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    max-width: 84px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 0;
    border: 1px solid grey;
    -moz-appearance: textfield;
}
.page-rfq .rfq-qty-group .rfq-qty-input::-webkit-outer-spin-button,
.page-rfq .rfq-qty-group .rfq-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
    .page-rfq .rfq-qty-group .rfq-qty-dec,
    .page-rfq .rfq-qty-group .rfq-qty-inc {
        --bs-btn-bg: #000;
        --bs-btn-color: #fff;
        --bs-btn-border-color: #000;
        --bs-btn-hover-bg: #222;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-border-color: #222;
        --bs-btn-active-bg: #333;
        --bs-btn-active-color: #fff;
        --bs-btn-active-border-color: #333;
        --bs-btn-focus-shadow-rgb: 0, 0, 0;
        border-radius: 0;
        background-color: #414141;
        border-color: #000;
        color: #fff;
    }
.page-rfq .rfq-qty-suffix { font-size: 0.8rem; color: var(--p-muted-light); }

/* md+: collapse into a flex row that mirrors the header. */
@media (min-width: 768px) {
    .page-rfq .rfq-line {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        margin-bottom: 6px;
        border: 0;
        border-bottom: 1px solid var(--p-border-light);
        border-radius: 0;
        background: transparent;
    }
    .page-rfq .rfq-line:hover { background: rgba(15, 15, 17, 0.02); }
    .page-rfq .rfq-cell-label { display: none; }
    .page-rfq .rfq-cell-name { flex: 1 1 0; min-width: 0; grid-column: auto; }
    .page-rfq .rfq-line-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .page-rfq .rfq-cell-price { flex: 0 0 80px; text-align: left; }
    .page-rfq .rfq-cell-qty { flex: 0 0 160px; }
    .page-rfq .rfq-cell-total { flex: 0 0 80px; text-align: left; }
    .page-rfq .rfq-cell-actions { flex: 0 0 90px; text-align: right; justify-self: auto; }
    .page-rfq .rfq-lines-header { gap: 8px; }
    .page-rfq .rfq-lines-header .rfq-cell-name { flex: 1 1 0; }
    .page-rfq .rfq-lines-header .rfq-cell-price { flex: 0 0 80px; }
    .page-rfq .rfq-lines-header .rfq-cell-qty { flex: 0 0 160px; }
    .page-rfq .rfq-lines-header .rfq-cell-total { flex: 0 0 80px; }
    .page-rfq .rfq-lines-header .rfq-cell-actions { flex: 0 0 90px; }
}

.page-rfq .rounded-pill { border-radius: 10px !important; }

/* ── RFQ page redesign — card layout ──────────────────────────────────────── */
.rfq-page { background: #f5f5f5; min-height: 60vh; }

/* White card shell */
.rfq-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 24px;
}
.rfq-card__title {
    font-size: var(--p-fs-16, 1rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}
.rfq-card__sub {
    font-size: var(--p-fs-14, 0.875rem);
    color: var(--p-muted-light, #888);
    margin: 0 0 16px;
}

/* Search box */
.rfq-search-box {
    position: relative;
}
.rfq-search-box__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #aaa;
    pointer-events: none;
}
.rfq-search-box__input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: var(--p-fs-14, 0.875rem);
    background: #fafafa;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.rfq-search-box__input:focus {
    border-color: var(--p-accent, #c8102e);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
    background: #fff;
}
.rfq-search-box__input::placeholder { color: #bbb; }

/* Empty state */
.rfq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px 32px;
}
.rfq-empty__icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fde8ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.rfq-empty__icon {
    font-size: 2rem;
    color: var(--p-accent, #c8102e);
    line-height: 1;
}
.rfq-empty__title {
    font-size: var(--p-fs-16, 1rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 8px;
}
.rfq-empty__sub {
    font-size: var(--p-fs-14, 0.875rem);
    color: #888;
    margin: 0 0 20px;
    line-height: 1.55;
}
.rfq-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--p-accent, #c8102e);
    color: #fff !important;
    border-radius: 10px;
    font-size: var(--p-fs-14, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.rfq-empty__btn:hover { background: #a50d26; color: #fff !important; }

/* Summary card */
.rfq-summary-card { position: sticky; top: 80px; }
.rfq-summary__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.rfq-summary__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fde8ec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-accent, #c8102e);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.rfq-summary__title {
    font-size: var(--p-fs-16, 1rem);
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* Summary rows */
.rfq-summary__rows {
    border-top: 1px solid #f0f0f0;
    margin-bottom: 16px;
}
.rfq-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: var(--p-fs-14, 0.875rem);
    color: #444;
}
.rfq-summary__row--total { font-size: var(--p-fs-15, 0.9375rem); color: #111; }
.rfq-summary__row--total strong { font-size: 1.05rem; }

/* Blue info box */
.rfq-info-box {
    display: flex;
    gap: 10px;
    background: #eef4ff;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
    align-items: flex-start;
}
.rfq-info-box__icon {
    font-size: 1rem;
    color: #2563eb;
    flex-shrink: 0;
    margin-top: 1px;
}
.rfq-info-box__text {
    font-size: var(--p-fs-12, 0.75rem);
    color: #1e40af;
    margin: 0;
    line-height: 1.5;
}

/* Notes */
.rfq-notes { margin-bottom: 20px; }
.rfq-notes__label {
    display: block;
    font-size: var(--p-fs-13, 0.8125rem);
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.rfq-notes__input {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: var(--p-fs-14, 0.875rem);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.rfq-notes__input:focus {
    border-color: var(--p-accent, #c8102e);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
}
.rfq-notes__counter {
    text-align: right;
    font-size: var(--p-fs-12, 0.75rem);
    color: #aaa;
    margin-top: 4px;
}

/* Submit button */
.rfq-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: var(--p-accent, #c8102e);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: var(--p-fs-14, 0.875rem);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.01em;
}
.rfq-submit-btn:hover:not(:disabled) { background: #a50d26; }
.rfq-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ── /RFQ page redesign ──────────────────────────────────────────────────── */

/* ── Checkout page — 10 px radius on fields, buttons and panels ─────────── */
#checkoutForm .form-control,
#checkoutForm .form-select,
#savedAddressPicker { border-radius: 10px !important; }
/* Order-notes textarea has an inline border-radius — override with !important */
#order { border-radius: 10px !important; }
/* Shipping method radio cards */
.form-check.border.rounded.p-3 { border-radius: 10px !important; }
/* Coupon input group */
#couponInput { border-radius: 10px 0 0 10px !important; }
#couponInput + button { border-radius: 0 10px 10px 0 !important; }
/* Place Order button */
.checkout-order button[type="submit"] { border-radius: 10px !important; }
/* Payment-method info panels */
.checkout-bg { border-radius: 10px; }
/* ── /Checkout page ──────────────────────────────────────────────────────── */

/* ── Site search offcanvas + modal — 10 px radius on search input ────────── */
#searchOffcanvas .form-control,
#searchModal .form-control { border-radius: 10px !important; }
/* ── /Site search ────────────────────────────────────────────────────────── */

/* ── Shopping cart offcanvas — 10 px radius on all buttons ──────────────── */
#shoppingCartOffcanvas .btn { border-radius: 10px !important; }
/* ── /Shopping cart offcanvas ───────────────────────────────────────────── */

/* ── RFQ draft offcanvas — 10 px radius on all buttons ──────────────────── */
#rfqDraftOffcanvas .btn { border-radius: 10px !important; }
/* ── /RFQ draft offcanvas ───────────────────────────────────────────────── */

/* ── Shopping cart page — Continue shopping button ──────────────────────── */
#cartPageEmpty .btn { border-radius: 10px !important; }
/* ── /Shopping cart page ────────────────────────────────────────────────── */

/* ── Wishlist page — buttons ─────────────────────────────────────────────── */
#wishlistEmpty .btn,
#wishlistRows .btn { border-radius: 10px !important; }
/* ── /Wishlist page ──────────────────────────────────────────────────────── */

/* RFQ page — product search compact rows */
.rfq-search-results {
    max-height: 330px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.rfq-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--p-border-light);
    border-radius: 6px;
    transition: background 0.12s;
}
.rfq-search-row:last-child { border-bottom: 0; }
.rfq-search-row:hover { background: var(--p-bg-light-alt, #f8f8f8); }
.rfq-search-thumb-link { flex: 0 0 auto; display: block; }
.rfq-thumb-wrap {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--p-bg-light-alt, #f0f0f0);
    position: relative;
}
.rfq-thumb-wrap.rfq-thumb-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: rfq-shimmer 1.2s ease-in-out infinite;
}
@keyframes rfq-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.rfq-search-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}
.rfq-search-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.rfq-search-name {
    font-size: var(--p-fs-14, 0.875rem);
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rfq-search-sku { font-size: var(--p-fs-12, 0.75rem); }
.rfq-search-ctrls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rfq-search-qty-group { width: 110px; }
.rfq-search-qty-group .rfq-s-qty-input {
    text-align: center;
    width: 38px;
    flex: 0 0 38px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 0;
    -moz-appearance: textfield;
}
.rfq-search-qty-group .rfq-s-qty-input::-webkit-outer-spin-button,
.rfq-search-qty-group .rfq-s-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rfq-s-add { border-radius: 10px !important; }
.rfq-search-qty-group .rfq-s-dec,
.rfq-search-qty-group .rfq-s-inc {
    --bs-btn-bg: #000;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #000;
    --bs-btn-hover-bg: #222;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #222;
    --bs-btn-active-bg: #333;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #333;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    border-radius: 0;
    background-color: #000;
    border-color: #000;
    color: #fff;
}
@media (max-width: 575.98px) {
    .rfq-search-ctrls { flex-direction: column; align-items: stretch; gap: 6px; }
    .rfq-search-qty-group { width: 100%; }
}

/* Horizontal scroll wrapper for .acct-list tables at intermediate viewport widths. */
.acct-list-scroll { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

/* Generic shared .acct-list pattern reuses the same conventions for account-page
   tables (Quotes, RFQs, Order history). Set per-column widths via CSS vars on the
   wrapping element so each page can tune them. */
.acct-list-row .acct-list-cell-label { display: block; }
@media (min-width: 768px) {
    .acct-list-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 16px;
        margin-bottom: 12px;
        border: 1px solid var(--p-border-light);
        border-radius: 10px;
        background: #fbfbfb;
    }
    .acct-list-row:hover { background: #eef0f3; }
    .acct-list-row .acct-list-cell-label { display: none; }
    .acct-list-cell-name { flex: 2 1 0; min-width: 0; grid-column: auto; }
    .acct-list-row[data-row-chip="chip-success"]  { border-color: rgba(25,135,84,0.35); }
    .acct-list-row[data-row-chip="chip-info"]     { border-color: rgba(29,111,164,0.35); }
    .acct-list-row[data-row-chip="chip-warning"]  { border-color: rgba(255,152,0,0.5); }
    .acct-list-row[data-row-chip="chip-danger"]   { border-color: rgba(220,53,69,0.35); }
    .acct-list-row[data-row-chip="chip-secondary"] { border-color: rgba(108,117,125,0.3); }
}

/* ───────── .cart-line — one cart line, cart page + slide-out cart (JHNet M4) ─────────
   Narrow (and always in the slide-out, .cart-line--compact): image on the left; name, then
   "R199.00 each", then quantity left / line total right. From 992px the cart page lines up
   in columns under .cart-line--head. Amounts never wrap (nowrap + the non-breaking thousands
   separator from formatMoney). */
.cart-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "img info info" "img price price" "img qty total";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--p-border-light);
}
.cart-line__img { grid-area: img; align-self: start; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.cart-line__info { grid-area: info; min-width: 0; }
.cart-line__name { font-size: 15px; font-weight: 600; margin: 0 0 2px; overflow-wrap: anywhere; }
.cart-line__remove { font-size: 13px; }
.cart-line__price { grid-area: price; font-size: 13px; color: var(--p-muted-light); white-space: nowrap; }
.cart-line__qty { grid-area: qty; }
.cart-line__total { grid-area: total; text-align: right; font-weight: 600; white-space: nowrap; }
.cart-line--head { display: none; }
@media (min-width: 992px) {
    .cart-line:not(.cart-line--compact) {
        grid-template-columns: 80px minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "img info price qty total";
        column-gap: 16px;
    }
    .cart-line:not(.cart-line--compact) .cart-line__img { width: 80px; height: 80px; align-self: center; }
    .cart-line:not(.cart-line--compact) .cart-line__price { font-size: inherit; }
    .cart-line:not(.cart-line--compact) .cart-line__each { display: none; }
    .cart-line:not(.cart-line--compact) .cart-line__qty { text-align: center; }
    .cart-line--head { display: grid; padding-top: 0; }
    .cart-line--head h6 { margin: 0; }
    .cart-line--head .cart-line__head-product { grid-column: 1 / 3; grid-row: 1; }
}

/* ── Account hero banner ──────────────────────────────────────────────────── */
.acct-hero {
    position: relative;
    background: url('/assets/images/shop/shop-bg.png') center / cover no-repeat;
    padding: 52px 0;
}
.acct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.acct-hero .container { position: relative; }
.acct-hero__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 6px;
}
.acct-hero__title {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.2;
}
.acct-hero__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

/* ── Account dashboard (page-account) ──
   Customer self-service shell — sidebar nav, glance cards, journey strip. */
.page-account .account-hero { color: #fff; }
/* All pill-shaped buttons on the account dashboard use 10px radius instead of the
   Bootstrap default 50rem so they stay consistent with the rest of the site. */
.page-account .rounded-pill { border-radius: 10px !important; }
/* Sidebar fills the full height of its row so it lines up flush with the main
   content column. Bootstrap's equal-height flex columns already match; the card
   inside must stretch to fill, and a flex column lets Logout pin to the bottom. */
.page-account .acct-sidebar {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 15, 17, 0.05);
}
.page-account .acct-nav { display: flex; flex-direction: column; flex: 1 1 auto; }
.page-account .acct-avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 15, 17, 0.06);
    color: var(--p-text-light);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.page-account .acct-nav { font-size: 0.875rem; }
.page-account .acct-nav li { margin-bottom: 2px; }
.page-account .acct-nav .acct-nav-group {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p-muted-light);
    font-weight: 700;
    padding: 14px 12px 6px;
    margin-bottom: 0;
}
.page-account .acct-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--p-text-light);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .12s ease, color .12s ease;
}
.page-account .acct-nav a i {
    width: 18px;
    font-size: 1rem;
    color: var(--p-muted-light);
}
.page-account a:hover:not(.btn) {
    color: #c8102e !important;
}
.page-account .acct-nav a:hover {
    background: rgba(200, 16, 46, 0.05);
    color: #c8102e !important;
    transform: translateX(2px);
}
.page-account .acct-nav a:hover i {
    color: #c8102e !important;
}
.page-account .acct-nav a.active {
    background: rgba(200, 16, 46, 0.08);
    color: var(--p-accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--p-accent);
}
.page-account .acct-nav a.active:hover { transform: none; }
.page-account .acct-nav a.active i { color: var(--p-accent); }
/* JHNet UX27 — one page frame for every account page (sidebar + content), so a list and its
   add/edit page are the same width. Same frame as the trade-application wizard (.p-wizard-shell). */
.acct-page { max-width: 1480px; margin: 3rem auto; padding-inline: 24px; }
@media (max-width: 575.98px) { .acct-page { padding-inline: 14px; margin: 1.5rem auto; } }
/* JHNet M5 — below 992px the menu is a drop-down: one button naming the current page
   (.acct-nav-toggle, a Bootstrap collapse toggle) opens the full list. From 992px the list
   always shows and the button is gone. */
.page-account .acct-nav-toggle { display: none; }
@media (max-width: 991.98px) {
    .page-account .acct-nav-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid var(--p-border-light);
        border-radius: 8px;
        background: #fff;
        color: var(--p-text-light);
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
    }
    .page-account .acct-nav-toggle__eyebrow { color: var(--p-muted-light); font-weight: 500; margin-right: 4px; }
    .page-account .acct-nav-toggle i { transition: transform .15s ease; }
    .page-account .acct-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
    .page-account .acct-nav:not(.show):not(.collapsing) { display: none; }
    .page-account .acct-nav.show { margin-top: 8px; }
}
@media (min-width: 992px) {
    .page-account .acct-nav.collapse { display: flex; }
}

.page-account .acct-stat-card {
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.page-account .acct-stat-card:hover {
    box-shadow: 0 8px 22px rgba(15, 15, 17, .08);
    border-color: #d0d4d9 !important;
    transform: translateY(-3px);
}
.page-account .acct-stat-card.is-action {
    border-color: var(--p-accent) !important;
    border-width: 1.5px !important;
}
/* Accent ribbon along the top edge of action cards — draws the eye to the card
   that needs the customer to do something. */
.page-account .acct-stat-card.is-action::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--p-accent), #e8506b);
}
.page-account .acct-stat-card.is-action:hover {
    box-shadow: 0 8px 22px rgba(200, 16, 46, .14);
}
/* Glance-card icons become tinted rounded chips for a more app-like feel. */
.page-account .acct-glance .acct-stat-card > .d-flex i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15, 15, 17, 0.05);
    color: var(--p-text-light);
    font-size: 1.05rem !important;
    transition: background .18s ease, color .18s ease;
}
.page-account .acct-glance .acct-stat-card.is-action > .d-flex i {
    background: rgba(200, 16, 46, 0.1);
    color: var(--p-accent);
}
.page-account .acct-glance .acct-stat-card:hover > .d-flex i {
    background: rgba(200, 16, 46, 0.1);
    color: var(--p-accent);
}
.page-account .text-accent { color: var(--p-accent) !important; }

.page-account .acct-alert {
    background: rgba(200, 16, 46, 0.06);
    border: 1px solid rgba(200, 16, 46, 0.18);
    color: var(--p-text-light);
    border-radius: var(--p-radius-sm);
    padding: 12px 16px;
    margin-bottom: 0;
}

.page-account .acct-journey {
    background: #f8f9fa;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    padding: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Right-edge fade hints horizontal scroll on phones. */
    position: relative;
    background-image: linear-gradient(to right, rgba(255,255,255,0) 80%, #f8f9fa 100%);
}
.page-account .acct-journey .acct-journey-row {
    min-width: max-content; /* forces horizontal layout even on narrow */
}
.page-account .acct-journey .journey-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--p-text-light);
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--p-border-light);
    border-radius: 10px;
    padding: 5px 12px;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.page-account .acct-journey .journey-step:hover {
    border-color: var(--p-accent);
    color: var(--p-accent);
    box-shadow: 0 2px 8px rgba(200, 16, 46, .1);
}
.page-account .acct-journey .journey-step:hover i { color: var(--p-accent); }
.page-account .acct-journey .journey-step i { color: var(--p-muted-light); }

/* Responsive at-a-glance number sizing — replaces the previous .display-6 (2.5rem)
   which was oversized on phones. Scales up from sm. */
.page-account .acct-stat-number {
    font-size: 1.75rem;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .page-account .acct-stat-number {
        font-size: 2.25rem;
    }
}

.page-account .pricelist-chip {
    background: #fff;
    color: var(--p-text-light);
    border: 1px solid var(--p-border-light);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.page-account .pricelist-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--p-accent);
    display: inline-block;
}

.page-account .acct-admin-card {
    background: rgba(200, 16, 46, 0.04);
    border-color: rgba(200, 16, 46, 0.25) !important;
    transition: background .15s ease;
}
.page-account .acct-admin-card:hover {
    background: rgba(200, 16, 46, 0.08);
}

/* Admin top-nav link — accent colour so admins can spot the elevated entry-point. */
.navbar-custom .nav-link.nav-link-admin {
    color: var(--p-accent) !important;
}
.navbar-custom .nav-link.nav-link-admin:hover,
.navbar-custom .nav-link.nav-link-admin:focus {
    color: var(--p-accent) !important;
    text-decoration: underline;
}

/* =============================================================================
   PAGE-SCOPED STYLES
   ----------------------------------------------------------------------------
   Add page-specific rules under a body-class selector (e.g. .page-shop)
   so they cannot leak into other views. Set ViewBag.className in the view.
   ========================================================================== */

/* ── Brand page (Views/Brand/Index.cshtml) ──
   Dark hero with accent glow · infinite logo marquee · horizontal spotlight
   slider for featured brands · A–Z searchable tile grid */

/* ─── Hero ─────────────────────────────────────────────────── */
.page-brand .brand-hero {
    position: relative;
    min-height: 212px;
    max-height: 212px;
    padding: 20px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url('/assets/images/shop/shop-bg.png') center / cover no-repeat !important;
}
.page-brand .brand-hero__glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: none;
    pointer-events: none;
}
/* Large ghost number in the bottom-right corner */
.page-brand .brand-hero__ghost {
    position: absolute;
    bottom: -32px;
    right: 4%;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: rgba(255,255,255,0.04);
    pointer-events: none;
    user-select: none;
}
.page-brand .brand-hero__inner { position: relative; z-index: 1; max-width: 640px; width: 100%; padding: 0 24px; }
.page-brand .brand-hero__headline {
    font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px;
    white-space: nowrap !important;
}
.page-brand .brand-hero__lede {
    max-width: 480px;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}
.page-brand .brand-hero__actions { margin-top: 12px; }
.page-brand .brand-hero__actions .p-btn-outline {
    font-size: 0.75rem !important;
    padding: 6px 16px !important;
}

/* ─── Scrolling logo marquee ───────────────────────────────── */
.page-brand .brand-marquee {
    overflow: hidden;
    padding: 28px 0;
    background: var(--p-bg-light);
    border-top: 1px solid var(--p-border-light);
    border-bottom: 1px solid var(--p-border-light);
}
.page-brand .brand-marquee__track {
    display: flex;
    align-items: center;
    gap: 52px;
    width: max-content;
    animation: brand-marquee-scroll 40s linear infinite;
}
.page-brand .brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
}
.page-brand .brand-marquee__logo {
    height: 54px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.45;
    filter: grayscale(1);
    transition: opacity var(--p-transition), filter var(--p-transition);
}
.page-brand .brand-marquee:hover .brand-marquee__logo {
    opacity: 0.85;
    filter: grayscale(0);
}
@keyframes brand-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─── Spotlight slider ─────────────────────────────────────── */
.page-brand .brand-spotlight { padding: 72px 0 64px; }
.page-brand .brand-spotlight__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.page-brand .brand-spotlight__title {
    font-size: var(--p-fs-24);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 4px 0 0;
}
.page-brand .brand-spotlight__nav { display: flex; gap: 8px; }
.page-brand .brand-spotlight__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--p-border-light);
    background: var(--p-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--p-fs-14);
    color: var(--p-text-light);
    transition: background var(--p-transition), border-color var(--p-transition), color var(--p-transition);
}
.page-brand .brand-spotlight__btn:hover {
    background: var(--p-text-light);
    border-color: var(--p-text-light);
    color: var(--p-bg-light);
}
.page-brand .brand-spotlight__viewport { overflow: hidden; padding: 44px 16px 16px; margin: -44px -16px -16px; }
.page-brand .brand-spotlight__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* overflow-x: auto coerces overflow-y to auto, which clips vertical shadows.
       padding-top + negative margin-top keeps the shadow inside the padding box
       (padding area is NOT clipped by overflow-y: auto). */
    padding-top: 44px;
    margin-top: -44px;
    padding-bottom: 16px;
    margin-bottom: -16px;
}
.page-brand .brand-spotlight__track::-webkit-scrollbar { display: none; }

/* Spotlight card */
.page-brand .brand-scard {
    flex: 0 0 calc(50% - 10px);
    min-width: 140px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--p-bg-light);
    border: 1px solid var(--p-border-light);
    border-radius: 10px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform var(--p-transition), box-shadow var(--p-transition), border-color var(--p-transition);
}
.page-brand .brand-scard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    border-color: var(--p-text-light);
}
.page-brand .brand-scard__bed {
    height: 212px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
    background: var(--p-bg-light-alt);
    border-bottom: 1px solid var(--p-border-light);
    transition: background var(--p-transition);
}
.page-brand .brand-scard:hover .brand-scard__bed { background: var(--p-bg-light); }
.page-brand .brand-scard__bed img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    transition: transform var(--p-transition);
}
.page-brand .brand-scard:hover .brand-scard__bed img { transform: scale(1.06); }
.page-brand .brand-scard__wordmark {
    font-size: var(--p-fs-24);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-brand .brand-scard__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.page-brand .brand-scard__name {
    font-size: var(--p-fs-16);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.page-brand .brand-scard__desc {
    font-size: var(--p-fs-13);
    line-height: 1.55;
    color: var(--p-muted-light);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-brand .brand-scard__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    font-size: var(--p-fs-11);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-accent);
}
.page-brand .brand-scard__cta span { transition: transform var(--p-transition); }
.page-brand .brand-scard:hover .brand-scard__cta span { transform: translateX(4px); }

/* ─── All brands section ───────────────────────────────────── */
.page-brand .brand-all {
    padding: 64px 0 120px;
    background: var(--p-bg-light-alt);
}
.page-brand .brand-all__count {
    font-size: var(--p-fs-14);
    color: var(--p-muted-light);
    margin: 0;
}

/* Toolbar */
.page-brand .brand-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
/* A–Z chips */
.page-brand .brand-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 28px;
}
.page-brand .brand-alpha__chip {
    min-width: 34px;
    padding: 6px 10px;
    font-size: var(--p-fs-12);
    font-weight: 600;
    line-height: 1;
    color: var(--p-muted-light);
    background: var(--p-bg-light);
    border: 1px solid var(--p-border-light);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--p-transition);
}
.page-brand .brand-alpha__chip:hover { border-color: var(--p-text-light); color: var(--p-text-light); }
.page-brand .brand-alpha__chip.is-active {
    color: var(--p-bg-light);
    background: var(--p-text-light);
    border-color: var(--p-text-light);
}

/* Brand tile grid */
.page-brand .brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));   /* JHNet UX22: larger logos */
    gap: 16px;
}
.page-brand .brand-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--p-bg-light);
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    overflow: hidden;
    transition: transform var(--p-transition), box-shadow var(--p-transition), border-color var(--p-transition);
}
.page-brand .brand-tile:hover {
    transform: translateY(-3px);
    border-color: var(--p-text-light);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.page-brand .brand-tile__bed {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--p-bg-light);
    border-bottom: 1px solid var(--p-border-light);
    transition: background var(--p-transition);
}
.page-brand .brand-tile:hover .brand-tile__bed { background: var(--p-bg-light-alt); }
.page-brand .brand-tile__logo {
    max-height: 88%;
    max-width: 88%;
    object-fit: contain;
    transition: transform var(--p-transition);
}
.page-brand .brand-tile:hover .brand-tile__logo { transform: scale(1.07); }
.page-brand .brand-tile__wordmark {
    font-size: var(--p-fs-16);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
}
.page-brand .brand-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 8px;
}
.page-brand .brand-tile__name {
    font-size: var(--p-fs-13);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-brand .brand-tile__count {
    font-size: var(--p-fs-12);
    color: var(--p-muted-light);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 575px) {
    .page-brand .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-brand .brand-tile__foot { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.page-brand .brand-tile__arrow {
    font-size: var(--p-fs-13);
    color: var(--p-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--p-transition), transform var(--p-transition);
    flex-shrink: 0;
}
.page-brand .brand-tile:hover .brand-tile__arrow { opacity: 1; transform: translateX(0); }

.page-brand .brand-empty {
    margin: 48px 0 0;
    text-align: center;
    font-size: var(--p-fs-16);
    color: var(--p-muted-light);
}

/* ─── Scroll strip ─────────────────────────────────────────── */
.page-brand .brand-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--p-bg-dark);
    color: var(--p-text-dark);
    box-shadow: 0 2px 16px rgba(0,0,0,0.40);
    transform: translateY(-100%);
    transition: transform 0.22s ease;
}
.page-brand .brand-strip.is-visible { transform: translateY(0); }
.page-brand .brand-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 16px;
}
.page-brand .brand-strip__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.page-brand .brand-strip__eyebrow {
    font-size: var(--p-fs-11);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-muted-dark);
    white-space: nowrap;
}
.page-brand .brand-strip__count {
    font-size: var(--p-fs-13);
    font-weight: 600;
    color: var(--p-text-dark);
    white-space: nowrap;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 3px 10px;
}
.page-brand .brand-strip__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.page-brand .brand-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--p-fs-12);
    font-weight: 600;
    letter-spacing: 0.08em;
    /* !important beats app.min.css's global `a { color:#222 !important }` so the
       link reads on the dark bar (same fix as the strip icons). */
    color: var(--p-muted-dark) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--p-transition);
}
.page-brand .brand-strip__cta:hover { color: var(--p-text-dark) !important; }
/* Logo (far left) + toolbar icons (far right) added to the brand scroll strip,
   matching the shop hero strip. */
.page-brand .brand-strip__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.page-brand .brand-strip__logo img { height: 24px; width: auto; display: block; }
.page-brand .brand-strip__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.page-brand .brand-strip__actions a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* !important beats app.min.css's global `a { color:#222 !important }` (same
       reason .navbar-custom .nav-link uses it) so the icons read on the dark bar. */
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 20px;
    line-height: 1;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.page-brand .brand-strip__actions a:hover,
.page-brand .brand-strip__actions a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
}
.page-brand .brand-strip__actions .tcount {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    background: var(--p-accent);
    color: #fff;
}
@media (max-width: 575px) {
    .page-brand .brand-strip__cta { display: none; }
    .page-brand .brand-strip__inner { gap: 10px; }
    .page-brand .brand-strip__left { gap: 6px; }
    /* Drop the eyebrow + count on phones so the logo, search and icons fit. */
    .page-brand .brand-strip__eyebrow,
    .page-brand .brand-strip__count { display: none; }
    .page-brand .brand-strip__actions { padding-left: 8px; }
    .page-brand .brand-strip__actions a { font-size: 18px; padding: 5px; }
}

/* ─── Partner CTA ──────────────────────────────────────────── */
.page-brand .brand-partner { padding: 88px 0; }
.page-brand .brand-partner__title {
    font-size: clamp(1.6rem, 3vw, var(--p-fs-40));
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--p-text-dark);
    margin: 0 0 16px;
}
.page-brand .brand-partner__lede { color: var(--p-muted-dark); margin-bottom: 32px; }

/* ── Shop page (Views/Shop/Index.cshtml) ──
   Migrated wholesale from a previous per-page <style> block. Original used a
   secondary palette (--accent: #c8502a) and DM Serif Display — those have
   been folded into the Primmerce tokens (Inter, var(--p-accent)) so the
   shop listing visually matches the rest of the site. */
.page-shop {
    --bg:        #f4f4f4;
    --surface:   #ffffff;
    --ink:       var(--p-text-light);
    --ink-muted: rgba(15,15,17,0.6);
    --ink-soft:  rgba(15,15,17,0.4);
    --accent:    var(--p-accent);
    --accent-lt: #fbe9ec;
    --border:    var(--p-border-light);
    --border-soft:#f1f1f1;
    --danger:    #c0392b;
    --success:   #2e7d4f;
    --radius:    var(--p-radius-sm);
    --radius-lg: var(--p-radius-md);
    --font-head: var(--p-font);
    --font-body: var(--p-font);
    --transition: 0.18s ease;
    --sidebar-w: 264px;
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--ink);
}
.page-shop .shop-hero {
    position: relative;
    background: url('/assets/images/shop/shop-bg.png') center / cover no-repeat !important;
    width: 100%;
    height: 220px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.page-shop .shop-hero::before {
    display: none;
}
.page-shop .shop-hero-inner {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 48px 24px;   /* top/bottom buffer keeps text away from the hero edges */
    max-width: 640px;
}
.page-shop .shop-hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 8px;
}
.page-shop .shop-hero-title {
    font-family: var(--font-head);
    font-size: clamp(20px, 2.2vw, 28px) !important;  /* override generic 4.5rem !important */
    line-height: 1.2;
    margin-bottom: 8px !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-shop .shop-hero-sub { font-size: 13px !important; opacity: 0.85; max-width: 400px; margin: 0 auto !important; }

/* ── Shop hero compact sticky bar ────────────────────────────────────────── */
.shop-hero-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,15,17,0.97);
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.shop-hero-bar.is-visible {
    transform: translateY(0);
}
.shop-hero-bar__title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
}
/* Logo (far left) + toolbar icons (far right) added to the compact bar. Three-
   column grid keeps the title perfectly centred regardless of the side content
   widths (1fr | auto | 1fr). Overrides the flex/centre defaults set above. */
.shop-hero-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 24px;
}
.shop-hero-bar__title { justify-self: center; text-align: center; }
.shop-hero-bar__left { display: flex; align-items: center; justify-self: start; }
.shop-hero-bar__logo { display: inline-flex; align-items: center; }
.shop-hero-bar__logo img { height: 26px; width: auto; display: block; }
.shop-hero-bar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
}
.shop-hero-bar__actions a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* !important to beat the global `a { color: #222 !important }` in app.min.css
       (same reason .navbar-custom .nav-link uses it) — otherwise the icons render
       dark grey and vanish against the dark bar. */
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 20px;
    line-height: 1;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.shop-hero-bar__actions a:hover,
.shop-hero-bar__actions a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
}
/* Count badges: the header's .tcount positioning is scoped to .navbar-custom, so
   restyle them here — a small brand-red pip that reads on the dark bar. */
.shop-hero-bar__actions .tcount {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    background: var(--p-accent);
    color: #fff;
}
/* On narrow viewports keep the logo + icons but hide the middle title so the row
   never overflows (the header title is redundant with the visible controls). */
@media (max-width: 575px) {
    .shop-hero-bar { grid-template-columns: auto 1fr; padding: 0 16px; }
    .shop-hero-bar__title { display: none; }
    .shop-hero-bar__actions { grid-column: 2; }
}

/* #19605 — /category banner: a standard textless image with the category name
   overlaid. Reuses the existing shop banner asset (no baked-in text); one image
   serves every category and the name swaps per page (per the AC). */
.category-banner {
    position: sticky;
    top: 0; /* overridden by JS to sit just below the navbar */
    z-index: 1000;
    overflow: hidden;
    min-height: clamp(80px, 12vw, 140px);
    display: flex;
    align-items: center;
    background: #0d0d0d url('/assets/images/shop/shop-bg.png') center / cover no-repeat;
    transition: min-height 0.35s ease, box-shadow 0.35s ease;
}
.category-banner.is-stuck {
    min-height: 52px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.category-banner__overlay {
    position: absolute;
    inset: 0;
    /* Darken for legible white text regardless of the banner image. */
    background: linear-gradient(90deg, rgba(13,13,13,0.72), rgba(13,13,13,0.35));
    pointer-events: none;
}
.category-banner__inner {
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}
.category-banner__title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(18px, 2.5vw, 28px);
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.page-shop .shop-wrap {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}
/* Sidebar shell — now a column of stacked `.filter-card` blocks rather than a
   single bordered panel. Each card has its own border / padding. */
.page-shop .shop-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
    align-self: flex-start;
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* A sticky element taller than the viewport can only reveal its overflow
       by scrolling the whole page, which — on this infinite-scroll grid —
       meant waiting for every product to load first. Scroll the sidebar
       itself instead; max-height is kept in sync with `top` by the
       shopHeroBar script in Shop/Index.cshtml. */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.page-shop .shop-sidebar::-webkit-scrollbar {
    width: 6px;
}
.page-shop .shop-sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Card — the two stacked panels ("Refine by Category" + "Filters"). */
.page-shop .filter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* #33666 — Brand / Colour as checkbox lists with product counts (CheckboxFacet in
   productlist.js renders into #brandFilter / #colourFilter). Name left, count right;
   top 8 then "Show all", a search box once the list is long. */
.page-shop .facet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-shop .facet-list__search[hidden],
.page-shop .facet-list__more[hidden] { display: none; }
.page-shop .facet-list__rows {
    display: flex;
    flex-direction: column;
}
.page-shop .facet-list__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 4px 2px;
    margin: 0;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}
/* Same native checkbox as the category tree (.filter-cat__check), so the sidebar reads as one set. */
.page-shop .facet-list__check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
}
.page-shop .facet-list__row.is-checked .facet-list__name { font-weight: 600; }
.page-shop .facet-list__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-shop .facet-list__count {
    flex-shrink: 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.page-shop .facet-list__note {
    padding: 4px 2px;
    font-size: 13px;
    color: var(--ink-muted);
}
.page-shop .facet-list__more {
    align-self: flex-start;
    padding: 2px 2px;
    border: 0;
    background: none;
    color: #1969c4; /* matches the sidebar's Clear links */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.page-shop .facet-list__more:hover { color: #0d47a1; text-decoration: underline; }
.page-shop .filter-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -18px;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.page-shop .filter-card__title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.page-shop .filter-card__title-row .filter-card__title {
    padding-bottom: 0;
    border-bottom: none;
}

/* Category widget — drill list matching filter-widget.png. */
.page-shop .filter-cat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-shop .filter-cat__loading,
.page-shop .filter-cat__error,
.page-shop .filter-cat__empty {
    padding: 10px 8px;
    font-size: 13px;
    color: var(--ink-muted);
    font-style: italic;
}
.page-shop .filter-cat__error { color: var(--danger); font-style: normal; }

.page-shop .filter-cat__search {
    position: relative;
    display: flex;
    align-items: center;
}
.page-shop .filter-cat__search-icon {
    position: absolute;
    left: 10px;
    color: var(--ink-soft);
    font-size: 13px;
    pointer-events: none;
}
.page-shop .filter-cat__search-input {
    width: 100%;
    padding: 7px 10px 7px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.page-shop .filter-cat__search-input:focus {
    outline: 0;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(15,15,17,0.06);
}

/* Pinned "Selected" panel — current selections grouped by root ancestor, kept
   at the top of the pane no matter how deep the user has drilled. The remove
   glyph is tristate-style: "×" when the whole parent is selected, "−" when only
   some descendants are. Clicking a row drills into that parent's subtree. */

/* Cascading drill trail — the root → current path as indented breadcrumb rows.
   Ancestors are "pop back to here" buttons; the deepest node is the highlighted
   current level (light-blue, mirrors the screenshot). Indentation grows with
   --cat-depth so the path reads as a hierarchy (see assets/filter.png). */

.page-shop .filter-cat__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Row container — flex with the checkbox zone (or label) on the left and
   the drill button (parents) or count cap (leaves) on the right. The row
   itself has no background; hover effects are on the inner zones so the
   user can tell which click-zone they're aiming at. */
.page-shop .filter-cat__row {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius);
    overflow: hidden;
}
/* Current-level category rows are children of the trail's current node, so
   they indent one step deeper than it. */
/* A ticked row — accent bar + tint so the selection is visible in place,
   below its parent in the trail. */
.page-shop .filter-cat__empty {
    padding-left: calc(8px + var(--cat-depth, 0) * 16px);
}

/* Every row = a select-zone (checkbox + name + count) + a browse cell. The
   select-zone is a <label>, so a click anywhere on it toggles the checkbox —
   the category NAME always means "select". Only the right-hand browse cell
   drills into children. This consistency removes the need to teach users that
   the name does different things on parent vs leaf rows (#19369 UX). */
.page-shop .filter-cat__select-zone {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
    border-radius: var(--radius);
    transition: background var(--transition);
    min-width: 0;
}
.page-shop .filter-cat__select-zone:hover { background: #f0f0f0; color: #000000; }

/* Browse control — a small circular button that floats at the right of a parent
   row, clearly a distinct control from the name (which selects). The outlined
   circle is visible at rest so touch users (no hover) still see it. On leaves
   it's an empty same-width placeholder.
   position:relative anchors the count badge that overlaps the top-right corner. */
/* The empty leaf placeholder reserves the same column (24px + 2×6px margin) but
   is not a control — invisible, no border/fill, no pointer. */

.page-shop .filter-cat__check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--ink);
    cursor: pointer;
}

.page-shop .filter-cat__item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-shop .filter-cat__item-count {
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
/* Search-result rows show the path under the name. */
.page-shop .filter-cat__item-name-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.page-shop .filter-cat__item-path {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* JHNet UX5/UX8 — the inline tree. Rows indent by depth; the arrow on the left only opens
   and closes sub-categories, and the rest of the row (a <label>) ticks the category. */
.page-shop .filter-cat__row {
    padding-left: calc(var(--cat-depth, 0) * 14px);
    align-items: center;
}
.page-shop .filter-cat__toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.page-shop button.filter-cat__toggle:hover { background: var(--border-soft); color: var(--ink); }
.page-shop .filter-cat__toggle--empty { cursor: default; }
.page-shop .filter-cat__toggle-chev { font-size: 12px; transition: transform var(--transition); }
.page-shop .filter-cat__toggle[aria-expanded="true"] .filter-cat__toggle-chev { transform: rotate(90deg); }
.page-shop .filter-cat__select-zone { padding: 6px 8px 6px 4px; }
.page-shop .filter-cat__row.is-selected > .filter-cat__select-zone,
.page-shop .filter-cat__row.is-partial > .filter-cat__select-zone { background: #f5f5f5; }
.page-shop .filter-cat__row.is-selected .filter-cat__item-name,
.page-shop .filter-cat__row.is-partial .filter-cat__item-name { font-weight: 600; }
.page-shop .filter-cat__item-note { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }

.page-shop .filter-cat__see-more {
    align-self: flex-end;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.page-shop .filter-cat__see-more:hover { text-decoration: underline; }

/* ── Filters accordion — every section collapsed by default; +/− icon
      toggles on the native <details> open state. Mounting <details> means
      no JS needed for the show/hide animation. */
.page-shop .filter-accordion {
    display: flex;
    flex-direction: column;
}
.page-shop .filter-accordion__item {
    border-bottom: 1px solid var(--border);
}
.page-shop .filter-accordion__item:last-of-type { border-bottom: 0; }
.page-shop .filter-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
/* Remove the native disclosure triangle. */
.page-shop .filter-accordion__head::-webkit-details-marker { display: none; }
.page-shop .filter-accordion__head::marker { display: none; }
.page-shop .filter-accordion__icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.page-shop .filter-accordion__icon::before,
.page-shop .filter-accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--ink-muted);
    border-radius: 1px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.page-shop .filter-accordion__icon::before { /* horizontal bar */
    width: 12px; height: 1.5px;
    transform: translate(-50%, -50%);
}
.page-shop .filter-accordion__icon::after {  /* vertical bar — disappears on open */
    width: 1.5px; height: 12px;
    transform: translate(-50%, -50%);
}
.page-shop .filter-accordion__item[open] .filter-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.page-shop .filter-accordion__body {
    padding: 4px 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* JHNet UX12 — typed min/max boxes under the price handles (replaced .price-range-display). */
.page-shop .price-range-boxes {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.page-shop .price-box { flex: 1 1 0; min-width: 0; margin: 0; }
.page-shop .price-box__label { display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 2px; }
.page-shop .price-box__field {
    display: flex;
    align-items: center;
    border: 1px solid var(--p-border-light, #dee2e6);
    border-radius: 6px;
    background: #fff;
    padding: 0 8px;
}
.page-shop .price-box__field:focus-within { border-color: var(--p-accent, #c8102e); }
.page-shop .price-box__cur { font-size: 13px; color: var(--ink-muted); margin-right: 4px; }
.page-shop .price-box__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 6px 0;
    font-size: 13px;
    background: transparent;
    -moz-appearance: textfield;
}
.page-shop .price-box__field input::-webkit-outer-spin-button,
.page-shop .price-box__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-shop .price-range-boxes__sep { font-size: 12px; color: var(--ink-muted); padding-bottom: 7px; }

/* #21750 — the two native <input type="range"> in #priceSlider (min/max) are
   meant to sit on one shared rail as a single dual-handle control. Without
   this they stack as two separate full-width rows. Each input's own track
   is transparent and the input itself ignores pointer events except on its
   thumb, so dragging one handle never steals input meant for the other. */
.page-shop #priceSlider {
    position: relative;
    height: 1.5rem; /* the .form-range height, so the rail sits on the thumbs' centre line */
}
/* JHNet UX12 — the shared rail and the selected span, drawn under the transparent tracks.
   Inset by half a thumb so the span ends exactly under each handle. */
.page-shop .shop-price-rail {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: #e5e7eb;
}
.page-shop .shop-price-rail__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    background: var(--p-accent, #c8102e);
}
.page-shop .shop-price-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
}
.page-shop .shop-price-range::-webkit-slider-runnable-track { background: transparent; }
.page-shop .shop-price-range::-moz-range-track { background: transparent; }
.page-shop .shop-price-range::-webkit-slider-thumb { pointer-events: auto; }
.page-shop .shop-price-range::-moz-range-thumb { pointer-events: auto; }

/* Slice D4 — price-slider bounds visuals.
   .shop-price-hint = the "Adjusted to match filters" tooltip-like text that
   surfaces below the slider when bounds tighten and clamp the manual range.
   Fades in/out via opacity transition; the .is-visible class is added by
   JS for ~2s before being removed.
   .is-disabled = applied to #priceSlider when 0 products match — greys the
   rail and disables interaction (the host carries a title="…" tooltip
   explaining why). */
.page-shop .shop-price-hint {
    font-size: 11px;
    color: var(--ink-muted);
    font-style: italic;
    margin-top: 4px;
    min-height: 14px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.page-shop .shop-price-hint.is-visible {
    opacity: 1;
}
.page-shop #priceSlider.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.page-shop #priceSlider.is-disabled .shop-price-range {
    filter: grayscale(1);
}

.page-shop .checkbox-list { display: flex; flex-direction: column; gap: 10px; }

/* Slice D5 — rating facet as star rows. Five radio-style buttons; the active
   row gets a brand-accent tint. Filled stars are gold; empty stars muted.
   Per-tier product count sits at the right. */
.page-shop .rating-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-shop .rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}
.page-shop .rating-row:hover { background: var(--border-soft); }
.page-shop .rating-row.is-active {
    background: var(--accent-lt);
    color: var(--accent);
}
.page-shop .rating-row__stars {
    display: inline-flex;
    letter-spacing: 1px;
    line-height: 1;
    flex-shrink: 0;
}
.page-shop .rating-row__star { color: rgba(15, 15, 17, 0.22); }
.page-shop .rating-row__star.is-filled { color: #f5a623; }
.page-shop .rating-row__suffix {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--ink-muted);
}
/* The 5-star row has no "& up" suffix; push its count to the right. */
.page-shop .rating-row__stars:only-child,
.page-shop .rating-row__stars + .rating-row__count { margin-left: auto; }
.page-shop .rating-row__count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.page-shop .rating-row.is-active .rating-row__suffix,
.page-shop .rating-row.is-active .rating-row__count { color: var(--accent); }

.page-shop .filter-clear-section {
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    margin-right: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1969c4;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, color 0.15s;
}
.page-shop .filter-clear-section.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.page-shop .filter-clear-section:hover { color: #0d47a1; }

.page-shop .filter-clear-link {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1969c4;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.25s ease, color 0.15s;
}
.page-shop .filter-clear-link.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.page-shop .filter-clear-link:hover { color: #0d47a1; }

/* JHNet M-A — "Quantity needed" box under the Availability toggles. */
.page-shop .min-qty { margin-top: 12px; }
.page-shop .min-qty__label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.page-shop .min-qty__row { display: flex; align-items: center; gap: 8px; }
.page-shop .min-qty__input { width: 96px; flex: 0 0 auto; }
.page-shop .min-qty__suffix { font-size: 13px; color: var(--ink-muted); }
.page-shop .min-qty__hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.page-shop .shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* #33665 — applied filters as removable chips, between the control bar and the
   grid. One button per applied value plus "Clear all"; productlist.js rebuilds the
   row on every listing fetch and sets [hidden] when nothing is applied. Wraps on
   narrow screens; a long label truncates rather than widening the page. */
.page-shop .shop-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.page-shop .shop-chips[hidden] { display: none; }
.page-shop .shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 8px 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.page-shop .shop-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-shop .shop-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--p-bg-light-alt);
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.page-shop .shop-chip:hover { border-color: var(--p-accent); }
.page-shop .shop-chip:hover .shop-chip__x { background: var(--p-accent); color: var(--p-on-accent); }
.page-shop .shop-chip:focus-visible,
.page-shop .shop-chips__clear:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}
.page-shop .shop-chips__clear {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #1969c4; /* matches the sidebar's Clear links */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.page-shop .shop-chips__clear:hover { color: #0d47a1; text-decoration: underline; }

/* JHNet UX9 — "N filters cleared. Undo", in the chips' place after a Clear all. */
.page-shop .shop-undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--ink-muted);
}
.page-shop .shop-undo[hidden] { display: none; }
.page-shop .shop-undo__btn {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #1969c4; /* matches the Clear links */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.page-shop .shop-undo__btn:hover { color: #0d47a1; text-decoration: underline; }
.page-shop .shop-undo__btn:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}
.page-shop .shop-controls {
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,15,17,0.07), 0 0 0 1px rgba(15,15,17,0.06);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: sticky;
    top: 12px;
    z-index: 20;
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Search grows to fill the bar; sort keeps its fixed width at the end. (The page-size
   picker that sat beside it went in #33668 — the result count is .shop-result-count.) */
.page-shop .shop-controls .search-wrap { flex: 1; min-width: 220px; }
.page-shop .shop-controls .sort-wrap { width: 180px; }
/* #33668 — "Showing X of Y products" between the chip row and the grid. */
.page-shop .shop-result-count {
    margin: 0;
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.page-shop .shop-result-count[hidden] { display: none; }
/* Refine the Bootstrap inputs/selects inside the bar */
.page-shop .shop-controls .form-control,
.page-shop .shop-controls .form-select {
    font-size: 13px;
    border-radius: 10px;
    border-color: rgba(15,15,17,0.13);
    background-color: #f8f9fb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-shop .shop-controls .form-control:focus,
.page-shop .shop-controls .form-select:focus {
    border-color: var(--ink);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(15,15,17,0.07);
}
/* Visual divider before the sort+size+toggle cluster */
.page-shop .shop-controls .sort-wrap {
    border-left: 1px solid rgba(15,15,17,0.09);
    padding-left: 10px;
    margin-left: 2px;
}
.page-shop .mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}
.page-shop .mobile-filter-btn:hover { background: var(--accent); }
.page-shop .products-area { min-height: 200px; }

/* Filter-change loading state — dim the grid + a sticky spinner so switching
   filters/sort/search gives immediate feedback instead of a frozen-looking page. */
#productsArea { position: relative; }
#productsArea.is-loading #bestSellerList { opacity: 0.4; pointer-events: none; transition: opacity 0.15s ease; }
#productsArea .shop-loading-overlay { display: none; position: absolute; inset: 0; z-index: 6; }
#productsArea.is-loading .shop-loading-overlay { display: block; }
.shop-loading-overlay__spinner {
    position: sticky; top: 140px; margin: 0 auto;
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--p-accent, #c8102e);
    animation: shop-grid-spin 0.7s linear infinite;
}
@keyframes shop-grid-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shop-loading-overlay__spinner { animation-duration: 1.6s; } }

/* Grid / list toggle button group sits in the .shop-controls strip. */
.page-shop .view-toggle {
    display: inline-flex;
    border: 1px solid rgba(15,15,17,0.13);
    border-radius: 10px;
    overflow: hidden;
    background: #f8f9fb;
}
.page-shop .view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.page-shop .view-toggle-btn:not(:last-child) { border-right: 1px solid rgba(15,15,17,0.1); }
.page-shop .view-toggle-btn:hover { background: var(--border-soft); color: var(--ink); }
.page-shop .view-toggle-btn.is-active {
    background: var(--ink);
    color: #fff;
}

/* Visibility helpers — toggled by the parent .view-grid / .view-list class. */
.view-grid .list-only { display: none !important; }
.page-shop .view-list .grid-only { display: none !important; }

/* ListView container reset (shared by both views). */
.page-shop #bestSellerList .e-list-item {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ───── GRID VIEW ─────────────────────────────────────────────────────── */

/* Container layout — targets #bestSellerList directly (Slice 8 dropped the
   Syncfusion .e-list-parent <ul> wrapper; cards now mount straight into the
   #bestSellerList <div>). */
.view-grid #bestSellerList,
.products-area.view-grid.p-card-grid /* the shop's card grid, reusable (JHNet F15's unavailable page) */ {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (min-width: 576px) {
    .view-grid #bestSellerList,
    .products-area.view-grid.p-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 22px;
    }
}

/* 2-col mobile card: compact internals so nothing overflows or gets clipped */
@media (max-width: 575px) {
    .view-grid .product-info {
        padding: 8px 8px 10px;
        gap: 4px;
    }
    .view-grid .product-name {
        font-size: 12px;
        line-height: 1.35;
        -webkit-line-clamp: 3;
    }
    .view-grid .product-brand {
        font-size: 9px !important;
        letter-spacing: 0.08em;
    }
    .view-grid .product-price-inline .product-price {
        font-size: 13px;
    }
    .view-grid .product-price-inline .product-compare-price {
        font-size: 11px;
    }
    .view-grid .product-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-top: 2px;
    }
    /* SKU / stock line */
    .view-grid .product-sku,
    .view-grid .product-stock {
        font-size: 10px !important;
    }
    /* CTA button strip: shrink text, keep button usable */
    .view-grid .product-actions .pa-btn {
        font-size: 10px;
        padding: 0 6px;
        height: 36px;
        gap: 3px;
    }
    .view-grid .product-actions .pa-btn i {
        font-size: 12px;
    }
    /* Tighten the always-visible touch action bar */
    @media (hover: none) {
        .view-grid .product-actions .pa-btn {
            height: 36px;
            font-size: 0;   /* hide label, icon only */
        }
        .view-grid .product-actions .pa-btn i {
            font-size: 15px;
        }
        .view-grid .product-actions .pa-btn.is-primary {
            flex: 0 0 44px;
        }
    }
    /* B2C add-to-cart bar: stack stepper above button so both fit in the narrow 2-col card */
    .products-area.view-grid .product-card .b2c-card-cta-row {
        flex-direction: column;
        gap: 5px;
    }
    .products-area.view-grid .product-card .b2c-card-cta-qty {
        width: 100%;
        justify-content: center;
    }
    .products-area.view-grid .product-card .b2c-qty-input {
        width: 44px;
    }
    .products-area.view-grid .product-card .b2c-card-cta {
        width: 100%;
        font-size: 10px;
        height: 32px;
        padding: 0 4px;
    }
}
.view-grid .product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}
.view-grid .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(15, 15, 17, 0.08);
    border-color: #1a1a1a;
}
.view-grid .product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    /* Padding shrinks the rendered thumbnail inside the square media box —
       the card outer dimensions stay grid-aligned but the product sits on a
       clean white surface with breathing room. Absolutely-positioned badges
       and the wishlist button (top:10px/left:10px etc) still anchor to the
       media box's outer edges and overlap into this padding zone. */
    padding: 22px;
}
.view-grid .product-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    display: block;
}
.view-grid .product-card:hover .product-media img { transform: scale(1.05); }

/* The generic ".product-media img" rule above (width/height:100%) would otherwise
   blow the sale-tag badge PNG up to fill the whole media box and hide the product
   image. Re-pin it to a 45px corner badge with higher specificity. Hover scale
   is also neutralised so the badge doesn't zoom with the product image. */
.page-shop .view-grid .product-media .product-sale-badge-img,
.page-shop .view-grid .product-card:hover .product-media .product-sale-badge-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    transform: none;
}

/* Slice D2 — image carousel arrows + dot pagination.
   Arrows are hidden by default and revealed on card hover (desktop pointer
   devices only). Mobile gets dots without arrows — touch-swipe replaces
   arrow clicks. Dots are always visible when the card has 2+ images so the
   shopper can read "this card has more images" at a glance. */
.view-grid .product-media__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink, #0f0f11);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(15, 15, 17, 0.10);
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.view-grid .product-media__arrow--prev { left: 8px; }
.view-grid .product-media__arrow--next { right: 8px; }
.view-grid .product-card:hover .product-media__arrow,
.view-grid .product-media__arrow:focus-visible {
    opacity: 1;
}
.view-grid .product-media__arrow:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.06);
}

.view-grid .product-media__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 5px;
    z-index: 3;
    pointer-events: none;
}
.view-grid .product-media__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 15, 17, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.view-grid .product-media__dot.is-active {
    background: var(--ink, #0f0f11);
    transform: scale(1.25);
}

/* Touch / mobile — arrows always hidden (swipe replaces them), dots stay. */
@media (hover: none), (max-width: 767px) {
    .view-grid .product-media__arrow {
        display: none;
    }
}
.view-grid .product-badge-group {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: 6px; z-index: 3; pointer-events: none;
}
/* Wishlist + quick-view buttons share the .product-icon-btn base styling and
   are positioned via the .product-media-actions wrapper (flex column, top:10px
   right:10px). The legacy block here used to position .product-wishlist
   absolutely on its own, which collided with the quick-view icon at the same
   coordinates. Only the active/hover affordances are kept; the base style
   comes from .product-icon-btn lower in this file. */
.view-grid .product-card .product-wishlist.is-wishlisted,
.view-grid .product-card .product-wishlist.is-wishlisted:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.view-grid .product-actions {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    display: flex; gap: 6px;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
    z-index: 3;
}
.view-grid .product-card:hover .product-actions { opacity: 1; transform: translateY(0); }
.view-grid .product-actions .pa-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; border: none;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(4px);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.view-grid .product-actions .pa-btn:hover { background: var(--ink); color: #fff; }
.view-grid .product-actions .pa-btn.is-primary { background: var(--ink); color: #fff; }
.view-grid .product-actions .pa-btn.is-primary:hover { background: var(--accent); }
.view-grid .product-actions .pa-btn i { font-size: 13px; }
@media (hover: none) {
    .view-grid .product-actions {
        opacity: 1; transform: none;
        left: 0; right: 0; bottom: 0; gap: 0;
        border-top: 1px solid rgba(255,255,255,0.4);
    }
    .view-grid .product-actions .pa-btn {
        height: 42px; border-radius: 0;
        backdrop-filter: blur(6px);
        background: rgba(255,255,255,0.88);
        font-size: 0; gap: 0;
    }
    .view-grid .product-actions .pa-btn i { font-size: 16px; }
    .view-grid .product-actions .pa-btn.is-primary { background: var(--ink); flex: 0 0 52px; }
}
.view-grid .product-info {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.view-grid .product-brand {
    font-size: 10px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft) !important;
    margin: 0 0 2px 0 !important;
}
.view-grid .product-name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.view-grid .product-name:hover { color: var(--accent); }
.view-grid .product-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 4px;
}
.view-grid .product-price-inline .product-price {
    font-size: 15px; font-weight: 600; color: var(--ink);
}
.view-grid .product-price-inline .product-compare-price {
    font-size: 12px; color: var(--ink-soft); text-decoration: line-through;
    margin-left: 6px;
}
.view-grid .product-color-list {
    display: flex; align-items: center; gap: 6px;
    margin: 0 !important;
}
.view-grid .product-color-option {
    width: 14px; height: 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    transition: transform var(--transition);
}
.view-grid .product-color-option:hover { transform: scale(1.2); }

/* ───── LIST VIEW (Takealot-style row) ─────────────────────────────────── */

.page-shop .view-list #bestSellerList {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-shop .view-list .product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 140px 1fr 220px;
    gap: 18px;
    padding: 14px;
    transition: box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}
.page-shop .view-list .product-card:hover {
    box-shadow: 0 4px 16px rgba(15, 15, 17, 0.06);
    border-color: var(--ink-soft);
}
.page-shop .view-list .product-media {
    position: relative;
    width: 140px;
    height: 160px;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}
.page-shop .view-list .product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 16px;
}
.page-shop .view-list .product-badge-group {
    position: absolute; top: 6px; left: 6px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 2; pointer-events: none;
}
.page-shop .view-list .product-info {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
    padding: 4px 0;
}
.page-shop .view-list .product-brand {
    font-size: 11px !important;
    letter-spacing: 0.08em;
    color: var(--ink-soft) !important;
    margin: 0 !important;
}
.page-shop .view-list .product-name {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-shop .view-list .product-name:hover { color: var(--accent); }
.page-shop .view-list .product-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}
.page-shop .view-list .product-stock.is-in { color: #2e7d32; }
.page-shop .view-list .product-stock.is-out { color: #c62828; }
.page-shop .view-list .product-stock::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 999px;
    background: currentColor;
}
.page-shop .view-list .product-color-list {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0 0 0 !important;
}
.page-shop .view-list .product-color-option {
    width: 14px; height: 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    transition: transform var(--transition);
}
.page-shop .view-list .product-color-option:hover { transform: scale(1.2); }
.page-shop .view-list .quick-view-link {
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: auto;
    align-self: flex-start;
}
.page-shop .view-list .quick-view-link:hover { color: var(--accent); }
.page-shop .view-list .product-pricing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0;
}
.page-shop .view-list .product-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: 4px;
}
.page-shop .view-list .product-price-block .product-price {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.page-shop .view-list .product-price-block .product-compare-price {
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: line-through;
}
.page-shop .view-list .row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    border: 1px solid var(--ink);
}
.page-shop .view-list .row-btn-cart {
    background: var(--ink);
    color: #fff;
}
.page-shop .view-list .row-btn-cart:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.page-shop .view-list .row-btn-wishlist {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
.page-shop .view-list .row-btn-wishlist:hover { border-color: var(--ink); }
.page-shop .view-list .row-btn-wishlist.is-wishlisted {
    color: var(--accent);
    border-color: var(--accent);
}
.page-shop .view-list .row-btn i { font-size: 14px; }

/* Mobile: stack the list row vertically so the image sits on top. */
@media (max-width: 720px) {
    .page-shop .view-list .product-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .page-shop .view-list .product-media {
        width: 100%;
        height: 220px;
    }
    .page-shop .view-list .product-price-block {
        align-items: flex-start;
    }
}

/* ───── SKELETON ────────────────────────────────────────────────────────
   Matches whichever view mode is active so the loading state doesn't jump. */
.page-shop .skeleton-grid.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
}
.page-shop .skeleton-grid.view-grid .skeleton-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: block;
    padding: 0;
}
.page-shop .skeleton-grid.view-grid .skeleton-media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background: linear-gradient(90deg, var(--border-soft) 25%, var(--border) 50%, var(--border-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.page-shop .skeleton-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-shop .skeleton-grid.view-list .skeleton-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 140px 1fr 220px;
    gap: 18px;
    padding: 14px;
}
.page-shop .skeleton-grid.view-list .skeleton-media {
    width: 140px;
    height: 160px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--border-soft) 25%, var(--border) 50%, var(--border-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@media (max-width: 720px) {
    .page-shop .skeleton-grid.view-list .skeleton-card { grid-template-columns: 1fr; }
    .page-shop .skeleton-grid.view-list .skeleton-media { width: 100%; height: 220px; }
}
.page-shop .skeleton-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.page-shop .skeleton-line {
    height: 11px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--border-soft) 25%, var(--border) 50%, var(--border-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.page-shop .skeleton-line.short { width: 40%; }
.page-shop .skeleton-line.med   { width: 75%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.page-shop .empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
    color: var(--ink-muted);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.page-shop .empty-state svg { opacity: 0.4; }
.page-shop .empty-state h3 { font-family: var(--font-head); font-size: 22px; color: var(--ink); margin: 0; font-weight: 600; }
.page-shop .empty-state p  { font-size: 13.5px; max-width: 320px; margin: 0; }
.page-shop .pager-wrap {
    margin-top: 8px;
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,15,17,0.07), 0 0 0 1px rgba(15,15,17,0.06);
    padding: 10px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-shop .pager-wrap .shop-pager { width: 100%; }
.page-shop .pager-wrap .pagination { margin-bottom: 0; }
.page-shop .pager-wrap .page-link {
    color: var(--ink, #0f0f11);
    border-color: rgba(15,15,17,0.13);
    font-size: 13px;
}
.page-shop .pager-wrap .page-item.active .page-link {
    background: var(--ink, #0f0f11);
    border-color: var(--ink, #0f0f11);
    color: #fff;
}
.page-shop .pager-wrap .page-link:hover { background: rgba(15,15,17,0.04); }
.page-shop .pager-wrap .page-item.disabled .page-link { color: var(--p-muted-light, #a0a0a8); }

/* Infinite scroll sentinel */
.page-shop .infinite-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 0 8px;
    min-height: 56px;
}
.page-shop .infinite-sentinel .infinite-spinner { display: none; }
.page-shop .infinite-sentinel.is-loading .infinite-spinner { display: block; }

/* #33872 — "Load more" after the automatic batches. */
.page-shop .shop-load-more {
    display: flex;
    justify-content: center;
    padding: 28px 0 8px;
}
.page-shop .shop-load-more[hidden] { display: none; }
.page-shop .shop-load-more__btn {
    min-width: 220px;
    padding: 12px 28px;
    border: 1px solid var(--ink, #0f0f11);
    border-radius: 999px;
    background: transparent;
    color: var(--ink, #0f0f11);
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.page-shop .shop-load-more__btn:hover:not(:disabled) { background: var(--ink, #0f0f11); color: #fff; }
.page-shop .shop-load-more__btn:disabled { opacity: .6; cursor: progress; }
.page-shop .e-input-group,
.page-shop .e-multi-select-wrapper,
.page-shop .e-input-group:not(.e-success):not(.e-warning):not(.e-error) {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
}
.page-shop .e-slider .e-slider-track { background: var(--border); }
.page-shop .e-slider .e-range { background: var(--ink); }
.page-shop .e-slider .e-handle { border-color: var(--ink); background: var(--ink); }
.page-shop .e-chip {
    background: var(--accent-lt) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-lt) !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
}
.page-shop .e-chip .e-chip-delete { color: var(--accent) !important; }
.page-shop .e-pager { background: transparent !important; border: none !important; }
.page-shop .e-pager .e-currentitem,
.page-shop .e-pager .e-currentitem:hover {
    background: var(--ink) !important;
    color: #fff !important;
    border-color: var(--ink) !important;
}
.page-shop .e-checkbox-wrapper .e-frame.e-check { background: var(--ink); border-color: var(--ink); }
.page-shop .e-toast-container .e-toast.e-success { background: var(--success); }
.page-shop .e-toast-container .e-toast.e-danger  { background: var(--danger); }
@media (max-width: 992px) {
    .page-shop .shop-wrap { gap: 0; }
    .page-shop .shop-sidebar { display: none; }
    .page-shop .mobile-filter-btn { display: inline-flex; }
}
@media (max-width: 576px) {
    .page-shop .shop-wrap { padding: 20px 14px 36px; }
    .page-shop .shop-controls { padding: 10px 12px; }
    .page-shop .shop-controls .search-wrap,
    .page-shop .shop-controls .sort-wrap { width: 100%; max-width: none; }
    .page-shop #bestSellerList .e-list-parent { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .page-shop .skeleton-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .page-shop .product-info { padding: 12px; }
    .page-shop .product-name { font-size: 14.5px; }
}
.page-shop .offcanvas.shop-filter-canvas { background: var(--surface); }
/* #33667 — the drawer's footer: Reset + "Show N results". The offcanvas is a flex column
   and its body scrolls, so the footer stays put at the bottom. */
.page-shop .shop-filter-canvas__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.page-shop .shop-filter-canvas__reset {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}
.page-shop .shop-filter-canvas__apply {
    flex: 1;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.page-shop .shop-filter-canvas__apply:hover { background: var(--p-accent-hover); }
.page-shop .shop-filter-canvas__apply.is-counting { opacity: 0.7; }
.page-shop .shop-filter-canvas__apply:disabled { background: var(--ink-muted); cursor: not-allowed; }
.page-shop .shop-filter-canvas__apply:focus-visible,
.page-shop .shop-filter-canvas__reset:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.page-shop .offcanvas.shop-filter-canvas .offcanvas-header { border-bottom: 1px solid var(--border); }
.page-shop .offcanvas.shop-filter-canvas .offcanvas-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
}
.page-shop .offcanvas.shop-filter-canvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Mobile-only filter offcanvas — also referenced outside .page-shop body
   scope when Bootstrap teleports it. Mirror the rules unscoped just in case. */
.offcanvas.shop-filter-canvas { background: #fff; }

/* =============================================================================
   SMD chrome lift — static pages, hero, alternating sections.
   Scope: chrome only. Do NOT extend these classes to product cards, shop list,
   product detail, cart, or checkout.
   ========================================================================== */
.smd-page-hero {
    position: relative;
    min-height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.smd-page-hero--short { min-height: 200px; }
.smd-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.smd-page-hero__title {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    margin: 0;
    padding: 60px 0;
}
.smd-section {
    padding: 64px 0;
}
.smd-section--alt {
    background: #f6f6f6;
}
.smd-section--quote {
    background: #111;
    color: #fff;
    padding: 56px 0;
}
.smd-section--quote blockquote p {
    font-size: clamp(18px, 2.2vw, 24px);
    font-style: italic;
    max-width: 900px;
    margin: 0 auto 16px;
}
.smd-section--quote blockquote cite {
    font-style: normal;
    opacity: 0.8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
}
.smd-section__title {
    color: #c20f2f;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    margin-bottom: 18px;
}
.smd-section__title--center { text-align: center; }
.smd-section p { line-height: 1.7; color: #262626; }
.smd-link { color: #c20f2f; font-weight: 600; }
.smd-link:hover { color: #a40d26; text-decoration: underline; }
.smd-cta { letter-spacing: 0.08em; border-radius: 10px !important; }
.smd-cta:hover { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; }

/* SMD home hero fallback — used when no DB-managed HeroSlide is active. */
.smd-home-hero { background: #fff; }
.smd-home-hero img { object-fit: cover; }

/* SMD category-tile grid — square 1:1 tiles with caption band overlay. */
.smd-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991px) { .smd-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .smd-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.smd-cat-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.smd-cat-card:hover {
    transform: scale(1.02);
    border-color: #1a1a1a;
}
.smd-cat-card__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 18px 18px;
    background: rgba(15, 15, 17, 0.78);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: background 0.25s ease;
}
.smd-cat-card:hover .smd-cat-card__caption {
    background: rgba(194, 15, 47, 0.92);
}
.smd-cat-card__name {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 16px;
    margin-bottom: 4px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.smd-cat-card__cta {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.95;
}

/* ─────────────────────────────────────────────────────────────────────────
   Add-to-cart "fly to cart" animation + badge pop (B2C only).
   The flyer is a fixed-position element JS positions over the add button
   and translates to the visible cart icon (header or responsive footer).
   ───────────────────────────────────────────────────────────────────────── */
.cart-flyer {
    position: fixed;
    z-index: 2000;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s ease-in;
}
.cart-flyer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-flyer-dot {
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    background: var(--p-accent);
}

.cart-badge-pop {
    animation: cartBadgePop 0.4s ease-out;
}
@keyframes cartBadgePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.55); }
    100% { transform: scale(1); }
}

/* ───────── Add-to-cart toast with "View Cart" action ───────── */
#cartFxToastHost {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.cart-fx-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0f0f11;
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--p-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    max-width: 340px;
}
.cart-fx-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cart-fx-toast-msg {
    font-size: 14px;
    line-height: 1.35;
}
.cart-fx-toast-action {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.cart-fx-toast-action:hover {
    background: #fff;
    color: #0f0f11;
}
/* Warning variant — amber accent for non-blocking notices (e.g. stock clamp). */
.cart-fx-toast--warning {
    background: #7a4b00;
    border-left: 4px solid #ffb020;
}

@media (max-width: 575.98px) {
    #cartFxToastHost {
        right: 12px;
        left: 12px;
        bottom: 80px;
    }
    .cart-fx-toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-flyer { transition: none; }
    .cart-badge-pop { animation: none; }
    .cart-fx-toast { transition: opacity 0.25s ease-out; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile: recently-viewed + related products as a slim horizontal scroll
   strip. Desktop keeps the multi-column Bootstrap grid untouched.
   Targets the .row grids (#relatedProductsGrid, #recentlyViewedGrid) which
   hold .col-* card columns populated by JS.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #relatedProductsGrid,
    #recentlyViewedGrid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 4px;
    }
    #relatedProductsGrid::-webkit-scrollbar,
    #recentlyViewedGrid::-webkit-scrollbar {
        display: none;
    }
    #relatedProductsGrid > [class*="col-"],
    #recentlyViewedGrid > [class*="col-"] {
        flex: 0 0 auto;
        width: 46vw;
        max-width: 200px;
        scroll-snap-align: start;
    }
}

/* ── Persistent in-page banner — full-width strip below the header. v1 use:
   orphaned-B2B notice (Slice 3). Generic enough to host future warnings. ─── */
.p-banner {
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.p-banner--warning {
    background: var(--p-color-warning-bg, #fff4e5);
    color: var(--p-color-warning-fg, #663c00);
    border-bottom: 1px solid var(--p-color-warning-border, #ffd699);
}
/* Super Admin proxy-login — deliberately loud so it can't be mistaken for the real session. */
.p-banner--impersonating {
    position: sticky;
    top: 0;
    z-index: 1080;
    background: #1e293b;
    color: #fff;
    border-bottom: 2px solid #dc2626;
    font-weight: 500;
}
.p-banner--impersonating .p-banner__action {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.p-banner--impersonating .p-banner__action:hover {
    background: #fff;
    color: #1e293b;
}

/* ── Soft-deleted row state for admin grids using the .acct-list pattern.
   Slice 3: /admin/accounts in "Show deleted" mode. ──────────────────────── */
.acct-list-row--deleted {
    opacity: 0.65;
    background: var(--p-color-muted-bg, #fafafa);
}
.acct-list-row--deleted .acct-list-cell-name span:not(.acct-list-cell-label) {
    text-decoration: line-through;
    text-decoration-color: var(--p-color-muted-fg, #888);
}

/* ── Admin accounts: avatar chip + stat pills ───────────────────────────────
   Avatar chip: initials circle whose colour is driven by --avatar-color set
   inline per row (hashed from account id so each account gets a stable tint).
   Stat pills: compact label+count badges embedded in the name cell, replacing
   the old standalone Users / Price Lists columns. */
.admin-acct-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--avatar-color, #2563eb) 14%, #fff);
    color: var(--avatar-color, #2563eb);
    font-weight: 700;
    font-size: 0.875rem;
    user-select: none;
}
.admin-cell-eyebrow {
    display: block;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa0a8;
    margin-bottom: 3px;
}
.admin-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}
.admin-stat-pill i { font-size: 0.75rem; }
.admin-stat-pill--teal {
    background: color-mix(in srgb, #0d9488 12%, #fff);
    color: #0d9488;
}
/* Status pills (the colours Price Lists writes inline for Default / Inactive). */
.admin-stat-pill--ok {
    background: color-mix(in srgb, #16a34a 12%, #fff);
    color: #16a34a;
}
.admin-stat-pill--muted {
    background: #f1f5f9;
    color: #94a3b8;
}
/* Bootstrap 5 has no min-width:0 utility; a flex child needs it for text-truncate to shrink. */
.min-w-0 { min-width: 0; }
/* Role badges on /admin/users — one distinct colour per global role. */
.admin-stat-pill--role-super {
    background: color-mix(in srgb, #dc2626 12%, #fff);
    color: #b91c1c;
}
.admin-stat-pill--role-kam {
    background: color-mix(in srgb, #7c3aed 12%, #fff);
    color: #6d28d9;
}
.admin-stat-pill--role-admin {
    background: color-mix(in srgb, #d97706 15%, #fff);
    color: #b45309;
}
.admin-stat-pill--role-buyer {
    background: #f1f5f9;
    color: #475569;
}
.admin-info-callout {
    background: #eef4ff;
    border-radius: 8px;
    padding: 10px 12px;
    color: #354a7a;
}
.admin-info-callout i { color: #5b82d4; }

/* ─────────────────────────────────────────────────────────────────────────
   B2B home page (Slice 7 — 2026-05-25). Four-section dashboard for B2B
   users; namespaced under .b2b-home / .b2b-home__*. The Quick-reorder
   grid hosts Slice 6 .b2b-card-overlay blocks via window.Productlist.
   ───────────────────────────────────────────────────────────────────── */
.b2b-home__section {
    margin-bottom: 2.5rem;
}
.b2b-home__section-title {
    font-size: var(--p-fs-18, 1.0625rem);
    font-weight: 600;
    color: var(--ink, #222);
    margin-bottom: 1rem;
}

/* Continue quoting */
.b2b-home__resume-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--p-border, #e6e6e6);
    border-left: 4px solid var(--p-accent, #d4a017);
    border-radius: var(--p-radius-sm, 0.375rem);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (min-width: 576px) {
    .b2b-home__resume-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.b2b-home__resume-card--empty {
    border-left-color: var(--p-border, #e6e6e6);
}
.b2b-home__resume-number {
    font-size: var(--p-fs-16, 1rem);
    font-weight: 600;
    color: var(--ink, #222);
}
.b2b-home__resume-sub {
    font-size: var(--p-fs-13, 0.8125rem);
    color: var(--p-text-muted, #6c757d);
    margin-top: 0.25rem;
}
.b2b-home__resume-cta {
    white-space: nowrap;
}

/* Recent activity — now rendered inside the nav's "Recent activity" popup
   (Views/Shared/Components/RecentActivity/Default.cshtml), not the B2B home. */
.b2b-home__activity-list {
    border: 1px solid var(--p-border, #e6e6e6);
    border-radius: var(--p-radius-sm, 0.375rem);
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.b2b-home__activity-row {
    border-bottom: 1px solid var(--p-border, #e6e6e6);
}
.b2b-home__activity-row:last-child {
    border-bottom: none;
}
.b2b-home__activity-link {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.12s;
}
.b2b-home__activity-link:hover {
    background: var(--p-bg-subtle, #f8f9fa);
    color: inherit;
}
.b2b-home__activity-link:focus-visible {
    outline: 2px solid var(--p-accent, #d4a017);
    outline-offset: -2px;
}
.b2b-home__activity-kind {
    font-size: var(--p-fs-11, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--p-text-muted, #6c757d);
    min-width: 3rem;
}
.b2b-home__activity-label {
    font-weight: 600;
    color: var(--ink, #222);
}
.b2b-home__activity-pill {
    font-size: var(--p-fs-11, 0.6875rem);
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: var(--p-radius-sm, 0.375rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #e9ecef;
    color: #495057;
}
.b2b-home__activity-pill--rfq {
    background: #d1ecf1;
    color: #0c5460;
}
.b2b-home__activity-pill--quote {
    background: #fff3cd;
    color: #856404;
}
.b2b-home__activity-pill--order {
    background: #d4edda;
    color: #155724;
}
.b2b-home__activity-time {
    font-size: var(--p-fs-12, 0.75rem);
    color: var(--p-text-muted, #6c757d);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .b2b-home__activity-time {
        display: none;
    }
    .b2b-home__activity-link {
        grid-template-columns: auto 1fr auto;
    }
}

/* Quick reorder card panel */
.b2b-home__quick-panel {
    background: #fff;
    border: 1px solid var(--p-border, #e6e6e6);
    border-radius: var(--p-radius-sm, 0.375rem);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 1.25rem 1.5rem;
}
.b2b-home__section-title--quick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.b2b-home__section-title--quick i {
    color: var(--p-accent, #d4a017);
}
/* .p-featured-scroller's default full-bleed margin (meant for sliders that sit
   directly in the page flow, e.g. Trending Now) would escape this bordered card —
   contain it instead, same override .p-home-trending already applies. */
.b2b-home__quick-panel .p-featured-scroller { margin-right: 0; padding: 4px 4px 4px 0; }

/* Quick reorder now renders as a single-row slider (.p-featured-scroller, same as
   Trending Now / On Sale / category sliders) instead of this multi-row grid. */
.b2b-home__quick-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--p-border, #e6e6e6);
    border-radius: var(--p-radius-sm, 0.375rem);
    overflow: hidden;
}
.b2b-home__quick-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--border-soft, #f4f4f4);
}
.b2b-home__quick-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.b2b-home__quick-info {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.b2b-home__quick-name {
    font-weight: 600;
    color: var(--ink, #222);
    text-decoration: none;
    font-size: var(--p-fs-14, 0.875rem);
}
.b2b-home__quick-name:hover {
    color: var(--p-accent, #d4a017);
}
.b2b-home__quick-sku {
    font-size: var(--p-fs-12, 0.75rem);
    color: var(--p-text-muted, #6c757d);
}
.b2b-home__quick-price {
    font-weight: 600;
    color: var(--ink, #222);
    margin-top: 0.25rem;
}

/* Featured-category tiles */
.b2b-home__cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.b2b-home__cat-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: var(--p-radius-sm, 0.375rem);
    overflow: hidden;
    text-decoration: none;
}
.b2b-home__cat-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
}
.b2b-home__cat-name {
    position: absolute;
    left: 0.75rem;
    bottom: 0.5rem;
    color: #fff;
    font-weight: 600;
    z-index: 1;
}
.b2b-home__cat-search {
    display: flex;
    gap: 0.5rem;
    max-width: 520px;
}
.b2b-home__cat-search input { flex: 1; }

/* Onboarding empty state — full-bleed hero replacing all four sections. */
.b2b-home__empty {
    max-width: 720px;
    margin: 2rem auto;
    text-align: center;
    padding: 2rem 1rem;
}
.b2b-home__empty-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink, #222);
    margin-bottom: 0.5rem;
}
.b2b-home__empty-lede {
    font-size: var(--p-fs-16, 1rem);
    color: var(--p-text-muted, #6c757d);
    margin-bottom: 1.5rem;
}
.b2b-home__empty-search {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
@media (min-width: 576px) {
    .b2b-home__empty-search {
        flex-direction: row;
    }
    .b2b-home__empty-search input { flex: 1; }
}
.b2b-home__empty-browse {
    width: 100%;
}
@media (min-width: 576px) {
    .b2b-home__empty-browse { width: auto; }
}

/* Google Places autocomplete — keep the suggestions dropdown above the sticky
   header and any Bootstrap overlay (see wwwroot/assets/js/shop/address-autocomplete.js). */
.pac-container { z-index: 1056; }

/* ────────────────────────────────────────────────────────────────────
   /shop product card — product-card-v3.png design (page-scoped).
   White card, cyan -N% OFF badge top-left, top-right wishlist + quick-view
   circles, big red price + strike-through compare, SOH line, permanent CTA
   bar (B2C = "Add to Cart", B2B = "Add to Quote" + qty stepper).
   Scoped to .page-shop so /, B2B home etc. stay unchanged.
   ──────────────────────────────────────────────────────────────────── */
.products-area.view-grid .product-card {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(15, 15, 17, 0.04), 0 4px 12px rgba(15, 15, 17, 0.06);
    padding: 14px !important;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.products-area.view-grid .product-card:hover {
    border-color: #1a1a1a !important;
    box-shadow: 0 2px 4px rgba(15, 15, 17, 0.05), 0 8px 20px rgba(15, 15, 17, 0.10);
}

.products-area.view-grid .product-card .product-media {
    background: var(--p-product-bed) !important;
    border-radius: 8px !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    /* Needs headroom for the :hover scale(1.05) on the img below (line ~5995) —
       at 1px padding the zoomed image has nowhere to grow and gets clipped by
       overflow:hidden, reading as a crop instead of a smooth zoom. */
    padding: 12px !important;
}

/* New Arrivals (homepage) — the carousel is wrapped in .page-shop, which paints
   the grey shop page background (--bg: #f4f4f4). On the homepage we want a white
   bed with breathing room instead. Scoped to .p-featured so /shop keeps its grey. */
.p-featured .page-shop {
    background: #ffffff;
    padding: 28px 40px;
    border-radius: 12px;
}


/* Top-left badge stack (sale-% / new / OOS). */
.products-area.view-grid .product-card .product-badge-group {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

/* Sale badge is now an image icon + pct div — no legacy text badge needed here. */

/* Top-right icon stack: wishlist + quick-view circular buttons. */
.products-area.view-grid .product-card .product-media-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}
.products-area.view-grid .product-card .product-icon-btn {
    width: 32px;
    height: 32px;
    color: var(--p-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease;
}
.products-area.view-grid .product-card .product-icon-btn:hover {
    color: #c8102e !important;
}
.products-area.view-grid .product-card .product-icon-btn i { line-height: 1; }

/* Wishlist is an icon only — no circular background, border, or hover fill (the
   quick-view icon has been removed). Hover/active just recolours the heart. */
.page-shop .products-area.view-grid .product-card .product-icon-btn.product-wishlist,
.page-shop .products-area.view-grid .product-card .product-icon-btn.product-wishlist:hover,
.page-shop .view-grid .product-card .product-wishlist.is-wishlisted,
.page-shop .view-grid .product-card .product-wishlist.is-wishlisted:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}
.page-shop .products-area.view-grid .product-card .product-icon-btn.product-wishlist {
    width: auto;
    height: auto;
    font-size: 18px;
}
/* Force the heart to #1A1A1A on hover. Targets the inner <i> with !important so it
   beats the Kalles app.min.css link-hover teal that otherwise tints the icon. */
.page-shop .products-area.view-grid .product-card .product-icon-btn.product-wishlist:hover,
.page-shop .products-area.view-grid .product-card .product-icon-btn.product-wishlist:hover i,
#homeFeaturedGrid .product-card .product-wishlist:hover,
#homeFeaturedGrid .product-card .product-wishlist:hover i {
    color: #1A1A1A !important;
}

/* Body — tighter spacing, name on top, price + stock under. */
.products-area.view-grid .product-card .product-info {
    padding: 14px 2px 10px 2px !important;
}
.products-area.view-grid .product-card .product-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--p-text-light) !important;
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
    margin-bottom: 8px !important;
}
.products-area.view-grid .product-card .product-brand {
    /* Brand is optional — keep eyebrow but tone down. */
    font-size: 10px !important;
    margin-bottom: 4px !important;
}
.products-area.view-grid .product-card .product-meta {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline !important;
    gap: 8px;
    row-gap: 2px;
}
/* JHNet UX20 — amounts no longer break (non-breaking thousands separator), so the price block
   can't be squeezed narrower than its widest amount: min-content keeps it whole, and when it and
   the stock figure don't both fit (narrow two-up cards, five-figure prices) the row wraps and the
   stock drops underneath instead of overlapping the price. Basis 0 + grow keeps the single row on
   wider cards. */
.products-area.view-grid .product-card .product-price-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    row-gap: 2px;
    flex: 1 1 0;
    min-width: min-content;
}
/* The "excl. VAT" line (#29480). Its own display:block is ignored inside this flex row, so it was
   squeezed between the price and the stock figure and wrapped word by word. A full-width basis
   drops it onto its own line under the price; nowrap keeps "R6.04 excl. VAT" on that one line. */
.products-area.view-grid .product-card .product-price-inline .price-exvat {
    flex-basis: 100%;
    white-space: nowrap;
    margin-top: 0;
}
/* JHNet UX14 — a regular price is neutral; red is kept for sale prices, so it never reads as a
   "was/now" price when nothing is on sale. */
.products-area.view-grid .product-card .product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--p-text-light) !important;
    line-height: 1.1;
}
.products-area.view-grid .product-card .product-price.is-sale,
.page-shop .view-list .product-price-block .product-price.is-sale {
    color: var(--p-accent) !important;
}
.products-area.view-grid .product-card .product-compare-price {
    font-size: 13px;
    color: var(--p-muted-light);
    text-decoration: line-through;
    font-weight: 500;
}
.products-area.view-grid .product-card .product-stock-line {
    font-size: 12px;
    color: var(--p-muted-light);
    line-height: 1.3;
    text-align: right;
    flex-shrink: 0;
}
.products-area.view-grid .product-card .product-stock-line .product-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.products-area.view-grid .product-card .product-stock-line .product-stock i {
    font-size: 14px;
    line-height: 1;
}
.products-area.view-grid .product-card .product-stock-line .product-stock.is-out {
    color: var(--p-accent);
    font-weight: 600;
}

/* CTA bar — permanent, full-width, pinned to the bottom of the card so it
   aligns across every card in a row regardless of title length / stock line.
   margin-top: auto consumes any spare vertical space inside the flex column,
   pushing the CTA down. padding-top keeps a small gap to the info block. */
.products-area.view-grid .product-card .product-cta-bar {
    margin-top: auto;
    padding-top: 10px;
}

/* Shared sizing token — both the action button and the qty stepper resolve
   to this exact height so the CTA bar is visually flush. Bumping this in
   one place affects both B2C and B2B cards. */
.products-area.view-grid .product-card .product-cta-bar {
    --card-cta-h: 36px;
}

/* B2C: stepper + dark-pill button on one row (matching the B2B layout). */
.products-area.view-grid .product-card .b2c-card-cta-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.products-area.view-grid .product-card .b2c-card-cta {
    flex: 1 1 auto;
    height: var(--card-cta-h);
    background: var(--p-text-light);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}
.products-area.view-grid .product-card .b2c-card-cta:hover {
    background: #c8102e;
}

.products-area.view-grid .product-card .b2c-card-cta-qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: var(--card-cta-h);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(15, 15, 17, 0.10);
    background: #fff;
}
.products-area.view-grid .product-card .b2c-qty-dec,
.products-area.view-grid .product-card .b2c-qty-inc {
    border: 0;
    background: #ffffff;
    color: var(--p-text-light);
    width: 28px;
    height: 100%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.products-area.view-grid .product-card .b2c-qty-dec:hover,
.products-area.view-grid .product-card .b2c-qty-inc:hover {
    background: rgba(15, 15, 17, 0.05);
}
.products-area.view-grid .product-card .b2c-qty-input {
    border: 0;
    width: 36px;
    height: 100%;
    text-align: center;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text-light);
    padding: 0;
    box-shadow: none;
    outline: 0;
    -moz-appearance: textfield;
}
.products-area.view-grid .product-card .b2c-qty-input::-webkit-outer-spin-button,
.products-area.view-grid .product-card .b2c-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* New Arrivals carousel cards are narrower than /shop grid columns, so tighten
   the CTA row so "Add to Cart" isn't clipped by the card's overflow:hidden. */
#homeFeaturedGrid .product-card .b2c-card-cta-row {
    gap: 6px;
}
#homeFeaturedGrid .product-card .b2c-card-cta {
    padding: 0 10px;
    letter-spacing: 0.04em;
    min-width: 0;
}
#homeFeaturedGrid .product-card .b2c-qty-dec,
#homeFeaturedGrid .product-card .b2c-qty-inc {
    width: 26px;
}
#homeFeaturedGrid .product-card .b2c-qty-input {
    width: 30px;
}

/* B2B overlay — inline CTA + qty stepper bar, matching v3 screenshot. */
.products-area.view-grid .product-card .b2b-card-overlay {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Polished UoM dropdown — sits in its own row above the actions row. The
   default form-select-sm is too dense; this gives the control a card-friendly
   pill shape with a custom caret. Hover/focus tighten the border for clearer
   affordance. */
.products-area.view-grid .product-card .b2b-card-overlay__uom {
    width: 100%;
    max-width: none;
    height: 32px;
    padding: 0 28px 0 12px;
    border: 1px solid rgba(15, 15, 17, 0.12) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%230f0f11' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    color: var(--p-text-light);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.products-area.view-grid .product-card .b2b-card-overlay__uom:hover {
    border-color: rgba(15, 15, 17, 0.28) !important;
}
.products-area.view-grid .product-card .b2b-card-overlay__uom:focus {
    outline: 0;
    border-color: var(--p-text-light) !important;
    box-shadow: 0 0 0 2px rgba(15, 15, 17, 0.06) !important;
}

.products-area.view-grid .product-card .b2b-card-overlay__row--actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    justify-content: space-between;
}
.products-area.view-grid .product-card .b2b-card-overlay__action-slot {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}
.products-area.view-grid .product-card .b2b-card-overlay__action-slot .btn,
.products-area.view-grid .product-card .b2b-card-overlay__action-slot .b2b-in-rfq {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--card-cta-h);
    background: var(--p-text-light) !important;
    border-color: var(--p-text-light) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--p-transition), border-color var(--p-transition);
}
.products-area.view-grid .product-card .b2b-card-overlay__action-slot .btn:hover {
    background: #c8102e !important;
    border-color: #c8102e !important;
}
/* "In RFQ (×N) — Edit" has more text — tighten spacing so it fits */
.products-area.view-grid .product-card .b2b-card-overlay__action-slot .b2b-in-rfq {
    padding: 0 8px !important;
    letter-spacing: 0 !important;
}
.products-area.view-grid .product-card .b2b-card-overlay__qty {
    flex: 0 0 auto;
    width: auto;
    height: var(--card-cta-h);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(15, 15, 17, 0.10);
}
.products-area.view-grid .product-card .b2b-card-overlay__qty .btn {
    border: 0 !important;
    background: #ffffff !important;
    color: var(--p-text-light) !important;
    padding: 0 !important;
    width: 28px;
    height: 100%;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.products-area.view-grid .product-card .b2b-card-overlay__qty .b2b-qty-input {
    border: 0 !important;
    width: 38px !important;
    flex: 0 0 38px !important;
    height: 100%;
    text-align: center;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text-light);
    padding: 0 !important;
    box-shadow: none !important;
}
.products-area.view-grid .product-card .b2b-card-overlay__qty .b2b-qty-input::-webkit-outer-spin-button,
.products-area.view-grid .product-card .b2b-card-overlay__qty .b2b-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.products-area.view-grid .product-card .b2b-card-overlay__qty .b2b-qty-input { -moz-appearance: textfield; }

/* Hide legacy hover overlay (.product-actions) on v3 cards — replaced by
   the top-right icon stack + permanent CTA bar. */
.products-area.view-grid .product-card .product-actions {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Help Center (/info/helpcenter) — takealot-style search hero + topic grid.
   ────────────────────────────────────────────────────────────────────────── */
.help-center__hero {
    position: relative;
    background: var(--p-bg-dark) center/cover no-repeat;
    color: var(--p-text-dark);
    padding: 64px 0 72px;
    text-align: center;
    overflow: hidden;
}
.help-center__hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.62) 55%, rgba(8, 8, 10, 0.82) 100%);
}
.help-center__hero > .container {
    position: relative;
    z-index: 2;
}
.help-center__eyebrow {
    display: inline-block;
    font-size: var(--p-fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p-muted-dark);
    margin-bottom: 12px;
}
.help-center__title {
    font-size: var(--p-fs-40);
    font-weight: 600;
    margin: 0 0 28px;
    color: var(--p-text-dark);
}
.help-center__search {
    display: flex;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--p-radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.help-center__search-icon {
    font-size: 20px;
    color: var(--p-muted-light);
    padding: 0 4px 0 18px;
}
.help-center__search-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    padding: 16px 14px;
    font-size: var(--p-fs-16);
    color: var(--p-text-light);
    background: transparent;
}
.help-center__search-btn {
    flex: 0 0 auto;
    border: 0;
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-weight: 600;
    padding: 0 28px;
    align-self: stretch;
    cursor: pointer;
    transition: background var(--p-transition);
}
.help-center__search-btn:hover { background: var(--p-accent-hover); }

.help-center__topics { padding: 64px 0; background: var(--p-bg-light); }
.help-center__section-title {
    font-size: var(--p-fs-28);
    font-weight: 600;
    margin: 0 0 32px;
}
.help-center__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--p-grid-gutter);
}
@media (min-width: 576px) { .help-center__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .help-center__grid { grid-template-columns: repeat(3, 1fr); } }

.help-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    background: #fff;
    padding: 24px;
    transition: box-shadow var(--p-transition), transform var(--p-transition);
}
.help-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.help-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.help-card__ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 16, 46, 0.08);
    color: var(--p-accent);
    font-size: 20px;
}
.help-card__title { font-size: var(--p-fs-20); font-weight: 600; margin: 0; flex: 1 1 auto; }
.help-card__count { flex: 0 0 auto; font-size: var(--p-fs-12); color: var(--p-muted-light); white-space: nowrap; }
.help-card__links li { margin-bottom: 8px; }
.help-card__links li:last-child { margin-bottom: 0; }
.help-card__links a {
    font-size: var(--p-fs-14);
    color: var(--p-text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color var(--p-transition);
}
.help-card__links a::before {
    content: "›";
    color: var(--p-accent);
    margin-right: 8px;
    font-weight: 700;
}
.help-card__links a:hover { color: var(--p-accent); }
.help-card__seeall {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--p-fs-14);
    font-weight: 600;
    color: var(--p-accent);
    text-decoration: none;
}
.help-card__seeall i { transition: transform var(--p-transition); }
.help-card__seeall:hover i { transform: translateX(4px); }

.help-center__contact { padding: 0 0 72px; background: var(--p-bg-light); }
.help-center__contact-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--p-bg-light-alt);
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    padding: 32px 36px;
}
.help-center__contact-title { font-size: var(--p-fs-20); font-weight: 600; margin: 0 0 4px; }
.help-center__contact-sub { font-size: var(--p-fs-14); color: var(--p-muted-light); }
.help-center__contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.help-center__contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--p-radius-sm);
    background: var(--p-bg-dark);
    color: #ffffff !important;
    font-weight: 600;
    font-size: var(--p-fs-14);
    text-decoration: none;
    transition: background var(--p-transition), color var(--p-transition);
}
.help-center__contact-btn:hover { background: var(--p-accent); color: #000000 !important; }
.help-center__contact-btn--ghost {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #1a1a1a;
}
.help-center__contact-btn--ghost:hover { background: #c8102e !important; color: #ffffff !important; border-color: #c8102e !important; }

/* ── Help Center: hero quick-link pills (#22477) ──────────────────────────── */
.help-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 720px;
    margin: 20px auto 0;
}
.help-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: var(--p-fs-14);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--p-transition), border-color var(--p-transition), color var(--p-transition);
}
.help-pill:hover {
    background: #fff;
    border-color: #fff;
    color: var(--p-text-light);
}

/* ── Help Center: Popular Topics slider (#22477) ──────────────────────────── */
.help-pop { padding: 56px 0 8px; background: #fff; }
.help-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.help-pop__nav { display: flex; gap: 10px; flex: 0 0 auto; }
.help-pop__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--p-border-light);
    background: #fff;
    color: var(--p-text-light);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--p-transition), color var(--p-transition), border-color var(--p-transition), opacity var(--p-transition);
}
.help-pop__arrow:hover { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
.help-pop__arrow:disabled { opacity: 0.35; cursor: default; }
.help-pop__arrow:disabled:hover { background: #fff; color: var(--p-text-light); border-color: var(--p-border-light); }
.help-pop__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 20px;
    margin: 0 -4px;
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}
.help-pop__track::-webkit-scrollbar { display: none; }  /* WebKit */
.help-pop__card {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    background: #fff;
    text-decoration: none;
    color: var(--p-text-light);
    transition: box-shadow var(--p-transition), transform var(--p-transition), border-color var(--p-transition);
}
.help-pop__card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
    border-color: transparent;
}
.help-pop__cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--p-fs-12);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--p-muted-light);
}
.help-pop__cat i { color: var(--p-accent); font-size: 16px; }
.help-pop__q { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--p-text-light); }
.help-pop__go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--p-fs-14);
    font-weight: 600;
    color: var(--p-accent);
}
.help-pop__card:hover .help-pop__go i { transform: translateX(4px); }
.help-pop__go i { transition: transform var(--p-transition); }

/* ── Help Center: FAQ accordions by category (#22477) ─────────────────────── */
.help-faq { padding: 56px 0 64px; background: var(--p-bg-light); }
.help-faq__groups {
    max-width: 860px;
    margin: 8px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.help-faq__group { scroll-margin-top: 96px; }
.help-faq__group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.help-faq__group-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 16, 46, 0.08);
    color: var(--p-accent);
    font-size: 20px;
}
.help-faq__group-title { font-size: var(--p-fs-20); font-weight: 600; margin: 0; }
.help-faq__accordion .accordion-item {
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm) !important;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.help-faq__accordion .accordion-button {
    background: #fff;
    font-weight: 600;
    color: var(--p-text-light);
    border-radius: var(--p-radius-sm) !important;
    padding: 16px 20px;
    transition: background var(--p-transition);
}
.help-faq__accordion .accordion-button:hover { background: var(--p-bg-light); }
.help-faq__accordion .accordion-button:not(.collapsed) {
    background: var(--p-bg-light);
    color: var(--p-text-light);
    box-shadow: none;
}
.help-faq__accordion .accordion-button:focus { box-shadow: none; }
.help-faq__accordion .accordion-button::after { filter: none; }
.help-faq__accordion .accordion-body {
    color: var(--p-muted-light);
    line-height: 1.7;
    font-size: var(--p-fs-16);
    padding: 4px 20px 20px;
}
.help-faq__accordion .accordion-body a { color: var(--p-accent); text-decoration: none; }
.help-faq__accordion .accordion-body a:hover { text-decoration: underline; }

@@media (max-width: 575px) {
    .help-pop__card { width: 240px; }
    .help-pop__head { flex-wrap: wrap; }
}


/* ──────────────────────────────────────────────────────────────────────────
   B2B landing chrome (Home/B2BHome.cshtml) — left "Shop by Department" rail
   (full height of the banner block) + search bar, rotating banner carousel and
   featured-brands banner. Sits above the account dashboard.
   ────────────────────────────────────────────────────────────────────────── */
.b2b-landing { padding: 20px 0 8px; }
/* Sticky top nav on the two home pages — keep the nav bar pinned to the top of
   the viewport as the page scrolls. The `.navbar-custom` sticky (see its rule)
   is a no-op on its own because the nav's containing block, the
   `#kalles-section-header_top` wrapper, is only nav-height, so the nav releases
   the instant that wrapper scrolls out. Pinning the wrapper itself gives the
   sticky a full-page containing block (its parent is <body>), so the header
   actually stays visible. The promo `topbanner` above it scrolls away normally.
   Scoped to the home pages per the request. */
.page-b2c-home #kalles-section-header_top,
.page-b2b-home #kalles-section-header_top {
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Same sticky nav on the account + RFQ + cart + checkout + wishlist pages.
   Those views don't set a body class — they wrap their content in
   `<div class="page-account">` / `page-rfq` / `page-cart` / `page-checkout` /
   `page-wishlist` (a sibling that follows the header), so scope off the body
   containing that wrapper rather than a body class. Same wrapper-pinning
   rationale as the home pages above. */
body:has(.page-account) #kalles-section-header_top,
body:has(.page-rfq) #kalles-section-header_top,
body:has(.page-cart) #kalles-section-header_top,
body:has(.page-checkout) #kalles-section-header_top,
body:has(.page-wishlist) #kalles-section-header_top {
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Match /shop horizontal extent (1480px max-width, 24px gutters at all widths)
   across both home pages. Overrides Bootstrap's container max-width (~1320px)
   and the global 48px-at-1200px rule. */
.page-b2c-home .container,
.page-b2b-home .container {
    max-width: 1480px;
    padding-left: 24px;
    padding-right: 24px;
}
/* Light-grey page canvas so white product cards / sliders stand out. Scoped to
   the home pages only — does not touch --p-bg-light, which many card/surface
   components still use as their own (white) background. */
body.page-b2c-home,
body.page-b2b-home {
    background: #f5f5f5;
}
.b2b-landing__layout {
    display: flex;
    align-items: stretch;   /* category card matches the main column height */
    gap: var(--p-grid-gutter);
    position: relative;     /* anchors the inline mega-menu absolute panel */
}

/* Category menu — reuses the /shop CategoryTree widget (page-shop scoped).
   The card stretches to the full height of the main column (hero + search +
   featured brands); the widget shows 6 rows then a "See More" to expand. */
.b2b-landing__dept { flex: 0 0 280px; }
.b2b-landing__dept.page-shop { background: transparent; }
/* The widget shows every category (initialVisible: Infinity); the list fills
   the remaining card height and scrolls instead of growing the card. The flex
   chain (card → host → filter-cat → list) lets the list be the only scroller,
   keeping the search box + drill trail pinned. */
.b2b-landing__dept .filter-card { min-height: 0; }
.b2b-landing__dept #categoryFilter { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.b2b-landing__dept .filter-cat { flex: 1 1 auto; min-height: 0; }
.b2b-landing__dept .filter-cat__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* The list is a flex column — stop its rows shrinking to fit, so the list
   overflows and scrolls (otherwise 29 rows squash to ~13px each). */
.b2b-landing__dept .filter-cat__row { flex: 0 0 auto; }

/* Megadept sidebar — reserves only col 1 width (260 px) in the flex layout.
   The absolute menu is anchored to .b2b-landing__layout (position:relative),
   so the aside must NOT be a positioned ancestor — override to static. */
.b2b-landing__dept--megadept {
    flex: 0 0 260px;
    overflow: visible;
}
@media (min-width: 992px) {
    /* The generic rule adds position:relative here; override it so the menu
       anchors to .b2b-landing__layout instead. */
    .b2b-landing__dept--megadept { position: static; }
}
@media (max-width: 991.98px) {
    .b2b-landing__dept--megadept { display: none; }
}

/* Main column */
.b2b-landing__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Search bar */
.b2b-landing__searchbar { display: flex; gap: 10px; align-items: stretch; }
.b2b-landing__search { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.b2b-landing__search-icon {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: var(--p-muted-light);
    pointer-events: none;
}
.b2b-landing__search-input {
    width: 100%;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    padding: 12px 14px 12px 40px;
    font-size: var(--p-fs-14);
    background: #fff;
    color: var(--p-text-light);
}
.b2b-landing__select {
    flex: 0 0 180px;
    min-width: 0;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-sm);
    padding: 12px 14px;
    font-size: var(--p-fs-14);
    background: #fff;
    color: var(--p-text-light);
    cursor: pointer;
}
/* Rotating banner — carousel is sized to the banners' own 1240×400 aspect
   ratio so background-size:cover never crops the image (no mismatch between
   container ratio and image ratio to crop away). */
.b2b-landing__hero { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; }
.b2b-landing__carousel { border-radius: var(--p-radius-md); overflow: hidden; flex: 1 1 auto; aspect-ratio: 1240 / 400; min-height: 200px; }
.b2b-landing__slide {
    width: 100%;
    flex: 1 1 auto;   /* fill the carousel when used without Flickity */
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.b2b-landing__slide--link { text-decoration: none; }
.b2b-landing__hero-fallback { border-radius: var(--p-radius-md); overflow: hidden; height: 100%; }
.b2b-landing__hero-fallback img { height: 100%; object-fit: cover; }
.b2b-landing .flickity-page-dots { bottom: 16px; }

/* ── Homepage hero slider ─────────────────────────────────────────────────── */
.b2b-hero-slider { position: relative; }
.b2b-hero-slider .b2b-landing__slide {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.b2b-hero-slider .b2b-landing__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.b2b-hero-slider__dots {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
.b2b-hero-slider__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none; padding: 0; cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.b2b-hero-slider__dot.is-active { background: #fff; transform: scale(1.3); }
/* ── /Homepage hero slider ────────────────────────────────────────────────── */

/* Featured brands — direct flex child of .b2b-landing__main, right below the
   hero, so it shares the hero's width and .b2b-landing__main's gap (16px)
   already spaces it from the hero above — no extra margin needed. */
.b2b-landing__brands { margin-top: 0; }
.b2b-landing__brands-title { font-size: var(--p-fs-20); font-weight: 600; margin: 8px 0 16px; }
.b2b-landing__brand-carousel { position: relative; }
.b2b-landing__brand-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 4px 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.b2b-landing__brand-grid::-webkit-scrollbar { display: none; }
.b2b-landing__brand-tile {
    /* #21625 — square to match the brand logo assets (all shipped as square
       280x280/500x500 canvases); a wider box left the object-fit:contain image
       letterboxed on the sides on top of whitespace already baked into the
       source images. Square removes the CSS-introduced letterboxing; the
       remaining sparseness is baked into the image files themselves and
       needs tightly-cropped logo assets to fully resolve. */
    flex: 0 0 120px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 10px;
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    background: #fff;
    transition: box-shadow var(--p-transition), transform var(--p-transition);
}
.b2b-landing__brand-tile:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.b2b-landing__brand-tile img { width: 100%; height: 100%; object-fit: contain; }
.b2b-landing__brand-name { font-weight: 600; font-size: var(--p-fs-14); color: var(--p-text-light); text-align: center; }
.b2b-landing__brand-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--p-border-light);
    background: #fff;
    color: var(--p-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--p-transition), box-shadow var(--p-transition), transform var(--p-transition);
}
.b2b-landing__brand-arrow:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.b2b-landing__brand-arrow--prev { left: -12px; }
.b2b-landing__brand-arrow--next { right: -12px; }
.b2b-landing__brand-arrow[hidden],
.b2b-landing__brand-arrow:disabled { opacity: 0; pointer-events: none; }

/* Desktop — the category card fills its column to the main column's height and
   scrolls internally. Absolute-positioning the card removes it from the dept's
   intrinsic height so the (tall, all-categories) list can't stretch the row;
   align-items:stretch then sizes the dept from the main column. */
@media (min-width: 992px) {
    .b2b-landing__dept { position: relative; }
    .b2b-landing__dept .filter-card { position: absolute; inset: 0; }
}

/* Stack on small screens — rail moves above, capped + scrollable */
@media (max-width: 991.98px) {
    .b2b-landing__layout { flex-direction: column; }
    .b2b-landing__dept { flex: 0 0 auto; width: 100%; }
    .b2b-landing__dept .filter-cat__list { max-height: 320px; }
    /* The desktop 200px min-height floor on .b2b-landing__hero /
       .b2b-landing__carousel always wins over their aspect-ratio below a
       ~620px-wide container (200px * 1240/400) — i.e. on every phone — which
       forced the carousel taller than its own aspect ratio and made
       background-size:cover crop the left/right edges of the banner
       (cutting off the overlaid text). Drop the floor here so aspect-ratio
       alone governs the mobile height. */
    .b2b-landing__hero { min-height: 0; }
    .b2b-landing__carousel { min-height: 0; }
    /* No min-height override on .b2b-landing__slide either — see above,
       same crop mechanism. */
}
@media (max-width: 575.98px) {
    .b2b-landing__searchbar { flex-wrap: wrap; }
    .b2b-landing__select { flex: 1 1 100%; }
}

/* ── #19593 — single product card: settings-driven element gating ──────────
   The card template is identical everywhere; the admin "Product card" settings
   (window.__cardSettings) decide what shows. Brand/SKU/stock/rating/sale-badge/
   carousel collapse their render slot to "". Wishlist + quick view appear in
   both grid and list layouts, so they're hidden here via root modifier classes
   set by the renderer (cardModifierClass). */
.product-card.pc--no-wishlist .product-wishlist,
.product-card.pc--no-wishlist .row-btn-wishlist { display: none !important; }
.product-card.pc--no-quickview .quick-view-btn { display: none !important; }
/* When a settings-gated slot collapses to "", hide its wrapper so it leaves no gap. */
.product-card .product-stock-line:empty { display: none; }

/* SKU line (settings-gated). */
.product-card .product-sku { line-height: 1.2; }

/* B2B outer-box UoM chip — B2B-only, shown below SKU. */
.product-card .product-uom-b2b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 2px 0 6px;
    background: #f7f7f7;
    border: 1px solid #000000;
    border-radius: 8px;
    color: #000000;
    max-width: 100%;
}
.product-card .product-uom-b2b i {
    font-size: 20px;
    color: #000000;
    flex-shrink: 0;
}
.product-card .product-uom-b2b__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.product-card .product-uom-b2b__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #000000;
}
.product-card .product-uom-b2b__sub {
    font-size: 10px;
    color: #444444;
    font-weight: 400;
    margin-top: 1px;
}

/* Rating stars row (new, settings-gated; default off). */
.product-card .product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}
.product-card .product-rating__stars { color: #f5a623; line-height: 1; }
.product-card .product-rating__star.is-off { opacity: .25; }
.product-card .product-rating__count { color: var(--bs-secondary-color, #6c757d); font-size: 11px; }

/* Home featured row + PDP related/recently-viewed now render the unified
   .product-card. Size it for the horizontal scroller exactly like the old
   .p-product-card so the strip keeps its fixed-width snap behaviour. */
.p-featured-scroller > .product-card {
    flex: 0 0 auto;
    width: clamp(220px, 24vw, 300px);
    scroll-snap-align: start;
}

/* ── B2C Home — Trending Now ────────────────────────────────────────────── */
.p-home-trending { padding: 24px 0 48px; background: transparent; }
.p-home-trending__box { overflow: hidden; /* clip the scroller — no viewport bleed */ }
.p-home-trending .p-featured-scroller { margin-right: 0; padding-right: 4px; }
.p-home-trending__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.p-home-trending__title { font-size: 20px; font-weight: 700; margin: 0; }
.p-home-trending__viewall { font-size: 13px; font-weight: 500; color: var(--p-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.p-home-trending__nav { display: inline-flex; gap: 6px; }
.p-home-trending__nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--p-border-light); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background 0.15s, border-color 0.15s; }
.p-home-trending__nav-btn:hover { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.p-home-trending__nav-btn:disabled { opacity: 0.35; pointer-events: none; }
.p-home-trending__head--controls { justify-content: flex-end; }

/* ── Home product-scroller banner header ────────────────────────────────
   Replaces the plain <h2> title above Trending Now / New Arrivals / On
   Sale / per-category sliders with a red diagonal-cut banner (matches the
   pre-baked .p-home-cat-banner art direction) — background photo optional
   per instance, title is real overlaid text so any section works without
   a bespoke image. */
/* Banner artwork is 1430x130 (an 11:1 strip) — at mobile container widths an
   exact aspect-ratio box is only ~30px tall, too short to read as a banner.
   background-size:contain instead of cover keeps a taller, legible min-height
   while guaranteeing the whole image is always visible (letterboxed against
   background-color, never cropped) at any box size. */
.p-home-banner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    min-height: clamp(56px, 11vw, 130px);
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background-color: #14141a;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.p-home-banner__slash {
    position: absolute;
    inset: 0;
    width: 60%;
    background: var(--p-accent);
    clip-path: polygon(0 0, 80% 0, 58% 100%, 0 100%);
}
.p-home-banner__title {
    position: relative;
    z-index: 1;
    margin: 0;
    padding-left: clamp(20px, 4vw, 48px);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(18px, 2.6vw, 32px);
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
@media (max-width: 575px) {
    /* At mobile widths the box is much wider than it is tall relative to the
       11:1 artwork, so background-size:contain (the desktop default, chosen
       to avoid cropping at taller/narrower boxes) letterboxes the strip and
       shows the plain background-color above/below it. Switch to cover here
       so the photo fills the box edge-to-edge instead. */
    .p-home-banner { background-size: cover; }
    /* A solid full-width slash here used to blank out the whole banner photo
       on mobile — nothing of the artwork was visible, just a flat red bar.
       A left-to-right fade keeps the title legible (opaque out to past the
       longest title, "Mobile Accessories") while letting the banner image
       show through on the right, same as desktop's diagonal cut. Lightened
       further so more of the photo reads through behind the gradient. */
    .p-home-banner__slash {
        width: 100%;
        clip-path: none;
        background: linear-gradient(to right, var(--p-accent) 0%, var(--p-accent) 58%, rgba(200, 16, 46, 0.22) 80%, rgba(200, 16, 46, 0) 100%);
    }
    .p-home-banner__title { font-size: 18px; padding-left: 20px; }
}

/* ── B2C Home — Frequently Bought Together ──────────────────────────────── */
/* Section is now transparent — the dark card is the __inner box. */
.p-home-bundles { background: transparent; padding: 24px 0; }
.p-home-bundles__inner {
    background: linear-gradient(rgba(15,15,17,0.78), rgba(15,15,17,0.78)), url('/assets/smd-lift/categories/Frequently-bought-a.jpg') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    padding: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.p-home-bundles__inner::after { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(200,16,46,0.22) 0%, transparent 70%); pointer-events: none; }
.p-home-bundles__copy { flex: 0 0 auto; max-width: 380px; position: relative; z-index: 1; }
.p-home-bundles__title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 12px; }
.p-home-bundles__sub { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0 0 24px; }
.p-home-bundles__btn { display: inline-flex; align-items: center; gap: 6px; background: var(--p-accent); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 22px; border-radius: 10px; text-decoration: none; transition: background 0.15s; }
.p-home-bundles__btn:hover { background: var(--p-accent-hover); color: #fff; }
.p-home-bundles__media { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; position: relative; z-index: 1; }
.p-home-bundles__img-link { display: inline-flex; line-height: 0; border-radius: 12px; transition: transform 0.15s, box-shadow 0.15s; }
.p-home-bundles__img-link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.p-home-bundles__img { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 12px; padding: 12px; }
.p-home-bundles__plus { font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.5); }
@media (max-width: 767px) { .p-home-bundles__media { display: none; } .p-home-bundles__copy { max-width: 100%; } .p-home-bundles__inner { padding: 32px 24px; } }

/* ── Cookie consent strip animation ─────────────────────────────────────── */
.cookies-law {
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookies-law.is-visible {
    transform: translateY(0);
}

/* ── Skeleton shimmer loader (Trending Now) ─────────────────────────────── */
@keyframes p-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.p-skel {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 1200px 100%;
    animation: p-shimmer 1.5s infinite linear;
    border-radius: 6px;
}
.p-skel-card { flex: 0 0 200px; display: flex; flex-direction: column; gap: 10px; }
.p-skel-card__img { width: 100%; aspect-ratio: 1; border-radius: 8px; }
.p-skel-card__line { height: 13px; width: 90%; }
.p-skel-card__line--short { width: 55%; }
.p-skel-card__line--price { width: 38%; height: 16px; }

/* ── B2C Home — Category icon strip ────────────────────────────────────── */
.p-home-cat-strip { padding: 24px 0; background: transparent; }
/* Card on inner __box — aligns with b2b-landing content edge */
.p-home-cat-strip__box {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--p-border-light);
    padding: 24px;
}
.p-home-cat-strip__head { margin-bottom: 20px; text-align: center; }
/* Centre icons on desktop; horizontal-scroll on mobile */
.p-home-cat-strip__track { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-bottom: 4px; }
@media (max-width: 767px) {
    .p-home-cat-strip__track { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .p-home-cat-strip__track::-webkit-scrollbar { display: none; }
    .p-home-cat-strip__box { position: relative; }
    .p-home-cat-strip__box::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 56px;
        background: linear-gradient(to right, transparent, #fff 85%);
        border-radius: 0 12px 12px 0;
        pointer-events: none;
        z-index: 2;
    }
}
.p-home-cat-strip__item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; text-decoration: none; color: var(--p-text-light); padding: 6px 10px; border-radius: 8px; transition: color 0.2s, transform 0.2s; }
.p-home-cat-strip__item:hover { color: var(--p-accent); transform: translateY(-3px); }
.p-home-cat-strip__item:hover .p-home-cat-strip__icon { background: var(--p-accent); color: #fff; transform: scale(1.14); box-shadow: 0 6px 16px rgba(200,16,46,0.28); }
.p-home-cat-strip__icon { width: 44px; height: 44px; border-radius: 50%; background: #f5f5f7; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--p-text-light); transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; }
.p-home-cat-strip__label { font-size: 11px; font-weight: 500; text-align: center; white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }

/* ── B2B home — catalog entry-points banner (replaces the icon-strip title) ── */
.p-home-cat-banner { padding: 0 0 20px; background: #fff; }
.p-home-cat-banner__img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* B2B home renders this banner directly inside .p-home-cat-grid (no .p-home-cat-strip
   wrapper), so add breathing room above/below it here without affecting B2C. */
.p-home-cat-grid .p-home-cat-banner__img { margin: 12px 0 24px; }

/* ── B2C Home — Category image grid ────────────────────────────────────── */
.p-home-cat-grid { padding: 0 0 24px; background: #fff; }
.p-home-cat-grid__banner { margin-top: 8px; }
.p-home-cat-grid__head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; padding-top: 8px; }
.p-home-cat-grid__viewall { font-size: 13px; font-weight: 500; color: var(--p-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.p-home-cat-grid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 767px) { .p-home-cat-grid__grid { grid-template-columns: repeat(2, 1fr); } }
.p-home-cat-grid__tile { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; text-decoration: none; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.p-home-cat-grid__tile:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.p-home-cat-grid__tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%); }
.p-home-cat-grid__tile-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.p-home-cat-grid__tile-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--p-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 4px; }
.p-home-cat-grid__tile-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.p-home-cat-grid__tile-tagline { font-size: 11px; color: rgba(255,255,255,0.72); }

/* ── Admin Prtal — Table action buttons -  ────────────────────────────────────── */

.table-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-action {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action:hover {
        transform: translateY(-2px);
    }


.btn-action-view {
    background: #4ebccc;
    color: white !important;
}

.btn-action-edit {
    background: #f5f5f5;
    color: #0f0f11 !important;
}

.btn-action-delete {
    background: #e74c3c;
    color: white !important;
}

.btn-action-save {
    background: #3baf88;
    color: white !important;
}

.btn-action-menu {
    background: #c8102e;
    color: white !important;
}

.btn-admin {
    border-color: #c5c5c5 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-admin:hover {
        transform: translateY(-2px);
        color: #C8102E;
    }

.btn-dark-v2 {
    background: #191919 !important;
    border-color: #ffd0d8;
    color: #fff;
}

.btn-dark-v2:hover {
    transform: translateY(-2px);
    background-color: #8d0c21 !important;
    color: #fff !important;
}

.account-card {
    min-height: calc(100vh - 220px);
}

.account-sidebar {
    border-right: 1px solid #edf0f5;
    background: #fafbfc;
    height: 73vh;
}

.account-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #edf0f5;
}

.account-nav {
    padding: 16px;
    gap: 8px;
}

    .account-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;
        color: #495057;
        font-weight: 500;
    }

        .account-nav .nav-link i {
            font-size: 20px;
        }

        .account-nav .nav-link.active {
            background: #111827;
            color: #fff;
        }

.account-content {
    padding: 32px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

    .section-header i {
        font-size: 28px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: #f3f4f6;
    }

    .section-header h5 {
        margin: 0;
    }

    .section-header p {
        margin: 0;
        color: #6c757d;
    }

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 16px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s ease;
    background: #fff;
}

    .resource-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    .resource-card input {
        display: none;
    }

    .resource-card.selected {
        border-color: #111827;
        background: #f8f9fb;
    }

.resource-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .resource-icon i {
        font-size: 18px;
    }

.resource-content {
    display: flex;
    flex-direction: column;
}

    .resource-content small {
        color: #6c757d;
    }

.account-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #edf0f5;
    padding: 20px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ── Storefront form wrapper ────────────────────────────────────────────────
   Applied to every customer-facing <form> to give consistent breathing room
   and a soft background that lifts the form off the page. */
.smd-form {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 40px 40px 36px;
}
@media (max-width: 575px) {
    .smd-form { padding: 24px 20px 20px; }
}


/* ── In-app notification bell + dropdown ────────────────────────────────────
   Shared by both admin (_AdminHeader) and storefront (header) notification
   bell icons and their Bootstrap dropdowns. */
.notif-bell-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    pointer-events: none;
}

.notif-bell-btn {
    line-height: 1;
    background: none;
    border: none;
}

.notif-dropdown {
    width: 320px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.notif-item:hover { background: #f8fafc; color: inherit; }
.notif-item--unread { background: #eff6ff; }
.notif-item--unread:hover { background: #dbeafe; }

.notif-item__title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
}
.notif-item__body {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
    line-height: 1.4;
}
.notif-item__time {
    font-size: 11px;
    color: #94a3b8;
}

.notif-empty {
    text-align: center;
}

/* ── Global header "smart search" — highlight + typo-correction hint ─────
   See Views/Shared/cardModel.cshtml's #searchOffcanvas script. */
.p-search-hit__match {
    background: rgba(200, 16, 46, 0.15);
    color: var(--p-accent, #c8102e);
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Live product suggestions under a search box (JHNet UX26) ──────────────
   wwwroot/assets/js/shop/search-suggest.js; used by the homepage search bar so it
   behaves like the header search. The input's wrapper is position: relative. */
.p-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--p-border-light, #e5e7eb);
    border-radius: var(--p-radius-sm, 8px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 6px;
}
.p-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}
.p-suggest__item:hover,
.p-suggest__item.is-active { background: #f5f5f5; color: inherit; }
.p-suggest__img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex: 0 0 44px; }
.p-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.p-suggest__name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-suggest__price { font-size: 13px; color: #64748b; white-space: nowrap; }
.p-suggest__note { margin: 6px 8px; font-size: 13px; color: #64748b; }
.p-suggest__all {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 8px;
    border: 0;
    border-top: 1px solid var(--p-border-light, #e5e7eb);
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--p-accent, #c8102e);
    cursor: pointer;
}
.p-suggest__all:hover { text-decoration: underline; }

#siteSearchCorrection {
    color: #64748b;
}

/* ── Quote message thread — sidebar modern-chat widget ────────────────────
   See STYLE_GUIDE.md → ".quote-chat — sidebar quote message thread".
   Unread badge deliberately reuses .notif-bell-badge's look (red circle) via
   the shared class on the markup side rather than duplicating the rule here.
   The thread itself opens in a right-edge offcanvas — the same Bootstrap
   .offcanvas primitive as the Shopping Cart / RFQ draft sidebars. */
.quote-chat-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--p-border-light, #e5e7eb);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}

.quote-chat-trigger__icon {
    color: #64748b;
    font-size: 18px;
}

.quote-chat-trigger__label {
    font-weight: 700;
    flex: 0 0 auto;
}

.quote-chat__badge {
    position: static;
    margin-left: auto;
}

.quote-chat-offcanvas .quote-chat__list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: #f8fafc;
}

.quote-chat__row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.quote-chat__row--mine {
    align-self: flex-end;
    align-items: flex-end;
}

.quote-chat__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    padding: 0 4px;
}

.quote-chat__row--mine .quote-chat__meta {
    flex-direction: row-reverse;
}

.quote-chat__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--p-accent, #c8102e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quote-chat__row--theirs .quote-chat__avatar,
.quote-chat__row:not(.quote-chat__row--mine) .quote-chat__avatar {
    background: #64748b;
}

.quote-chat__name {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.quote-chat__bubble {
    border-radius: 16px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 1.4;
}

.quote-chat__bubble--mine {
    background: var(--p-accent, #c8102e);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.quote-chat__bubble--theirs {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: inherit;
    border-bottom-left-radius: 4px;
}

.quote-chat__bubble--grouped {
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}

.quote-chat__row--mine .quote-chat__bubble--grouped {
    border-bottom-right-radius: 4px;
}

.quote-chat__row:not(.quote-chat__row--mine) .quote-chat__bubble--grouped {
    border-bottom-left-radius: 4px;
}

.quote-chat__text {
    white-space: pre-wrap;
    word-break: break-word;
}

.quote-chat__attachment {
    margin-top: 6px;
    font-size: 12.5px;
}

.quote-chat__bubble--mine .quote-chat__attachment a {
    color: #fff;
}

/* Admin-only internal note — never sent to the customer. */
.quote-chat__bubble--internal {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}

.quote-chat__time {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.7;
}

/* ── Input row ── */
.quote-chat__form {
    margin-top: 12px;
    position: relative;
}

.quote-chat-offcanvas .quote-chat__form {
    margin-top: 0;
    padding: 12px 18px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}

.quote-chat__file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 8px;
}

.quote-chat__file-chip button {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    color: #94a3b8;
}

/* Admin-only "post as internal note" toggle — no customer-facing equivalent. */
.quote-chat__internal-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 8px;
    cursor: pointer;
}

.quote-chat__inputbar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 6px 8px;
}

.quote-chat__iconbtn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: none;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background 0.12s;
}

.quote-chat__iconbtn:hover {
    background: #f1f5f9;
}

.quote-chat__textinput {
    flex: 1 1 auto;
    border: none;
    outline: none;
    resize: none;
    max-height: 110px;
    padding: 7px 4px;
    font-size: 14px;
    line-height: 1.4;
    background: none;
}

.quote-chat__sendbtn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--p-accent, #c8102e);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: opacity 0.12s;
}

.quote-chat__sendbtn:disabled {
    opacity: 0.35;
    cursor: default;
}

.quote-chat__emoji-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 240px;
    max-height: 160px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    z-index: 10;
}

.quote-chat__emoji-btn {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.quote-chat__emoji-btn:hover {
    background: #f1f5f9;
}

@media (max-width: 575.98px) {
    .quote-chat__row { max-width: 88%; }
    .quote-chat__emoji-popover { width: 200px; grid-template-columns: repeat(6, 1fr); }
}

/* ── CBM Calculator — modal + summary card widget ──────────────────────── */
.rfq-summary__row--cbm {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}
.rfq-summary__cbm-label {
    color: #6b7280;
    font-size: 0.8rem;
}
.rfq-cbm-open-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
}
.rfq-cbm-open-btn:hover { background: #e9eaec; }
.rfq-cbm__modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}
.rfq-cbm__modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
}
/* Staged-edit affordances: qty changes in the CBM modal are previewed, not committed,
   until "Apply Changes" is clicked. A touched row is tinted, and a hint appears. */
.rfq-cbm__dirty-hint {
    font-size: 0.8rem;
    color: var(--p-accent, #c8102e);
    display: inline-flex;
    align-items: center;
}
.rfq-cbm__row--dirty > td {
    background: rgba(200, 16, 46, 0.05);
}
/* Shared confirm-modal (Views/Shared/_ConfirmModal.cshtml + confirm-modal.js) —
   one instance rendered globally in _Layout.cshtml, reused wherever a page needs
   a "are you sure?" step before a destructive action (RFQ remove, admin account
   delete, ...). Do not scope this to any one page's feature namespace. */
.p-confirm-modal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}
.p-confirm-modal__header {
    background: #fde8ec;
    border-bottom: none;
    align-items: center;
}
.p-confirm-modal__header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.p-confirm-modal__icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--p-accent, #c8102e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.rfq-cbm__body {
    overflow-x: auto;
    padding: 12px 16px;
}
.rfq-cbm__table {
    width: 100%;
    font-size: 0.76rem;
    border-collapse: collapse;
}
.rfq-cbm__table th,
.rfq-cbm__table td {
    padding: 5px 7px;
    vertical-align: middle;
    white-space: nowrap;
}
.rfq-cbm__th {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
/* L/W/H are display-only text now (were disabled inputs). Left-aligned to line up
   under the (left-aligned) column headers. */
.rfq-cbm__dim {
    text-align: left;
    color: #374151;
}
/* Narrow the Pkgs column — width:1% shrinks it to its (small integer) content. */
.rfq-cbm__th--pkgs,
.rfq-cbm__pkgs {
    width: 1%;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
}
/* Qty stepper inside the CBM table. Reuses the shared .rfq-qty-* classes + handlers,
   but the modal sits outside .page-rfq so the compact look is redefined here. */
.rfq-cbm__qty-group {
    width: auto;
    min-width: 92px;
    flex-wrap: nowrap;
}
    .rfq-cbm__qty-group .rfq-qty-input {
        text-align: center;
        /* Content-driven width (see autosizeRfqQty) so multi-digit quantities
           are fully visible; min-width preserves the compact look, max-width
           keeps the CBM table column from ballooning. */
        flex: 0 0 auto;
        width: 34px;
        min-width: 34px;
        max-width: 64px;
        padding-left: 2px;
        padding-right: 2px;
        border-radius: 0;
        border: 1px solid grey;
        font-size: 0.76rem;
        -moz-appearance: textfield;
    }
.rfq-cbm__qty-group .rfq-qty-input::-webkit-outer-spin-button,
.rfq-cbm__qty-group .rfq-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
    .rfq-cbm__qty-group .rfq-qty-dec,
    .rfq-cbm__qty-group .rfq-qty-inc {
        border-radius: 0;
        background-color: #414141;
        border-color: #000;
        color: #fff;
        padding: 2px 8px;
        line-height: 1;
    }
.rfq-cbm__product-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.rfq-cbm__thumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--p-border-light, #e5e7eb);
    border-radius: 4px;
    object-fit: cover;
    background: #fff;
}
.rfq-cbm__product-meta {
    min-width: 0;
    white-space: normal;
}
.rfq-cbm__product-name {
    font-weight: 600;
}
.rfq-cbm__sku {
    font-size: 0.68rem;
    color: #9ca3af;
}
.rfq-cbm__unit-label {
    font-size: 0.72rem;
    color: #9ca3af;
}
.rfq-cbm__total-row td {
    font-weight: 700;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}
.rfq-cbm__dash {
    color: #9ca3af;
}
.rfq-cbm__empty {
    padding: 12px 14px;
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: center;
}
.rfq-cbm__container-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.rfq-cbm__container-label {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}
.rfq-cbm__container-result {
    font-size: 0.82rem;
    color: #111827;
}
.rfq-cbm__usage {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
}

.rfq-number-col {
    font-size: 13px !important;
}
/* Remove badge overlaid on the RFQ draft offcanvas thumbnail — a small circular ×
   pinned to the top-right corner, distinct from the pill-shaped Remove button on the
   full /rfq page (this is a compact sidebar, no room for a text button per row). */
.rfq-offcanvas-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rfq-offcanvas-item__thumb-wrap {
    flex: 0 0 auto;
    width: 64px;
}
.rfq-offcanvas-item__thumb-wrap img {
    width: 100%;
    height: 64px;
    object-fit: cover;
}
.rfq-offcanvas-item__info {
    flex: 1 1 auto;
    min-width: 0;
}
/* Remove control now sits on the right edge of the card (was overlaid on the
   thumbnail). Icon-button styling with a Line Awesome trash glyph. */
.rfq-offcanvas-item__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.rfq-offcanvas-item__remove:hover {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}
.rfq-cbm__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 12px;
    font-size: 0.7rem;
    color: #9ca3af;
}
.rfq-cbm__legend-item strong {
    color: #6b7280;
    font-weight: 700;
}

/* ── Back to results button ──────────────────────── */
.pdp-breadcrumb-back {
    display: inline-block;
    animation: backHint 900ms ease-out 500ms;
    animation-fill-mode: both;
}

@keyframes backHint {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    45% {
        transform: translateX(2px);
    }

    65% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

.pdp-breadcrumb-back:hover .la-long-arrow-alt-left {
    transform: translateX(-4px);
    transition: transform 0.2s ease;
}


/* ── Isolated auth pages (#22480) ─────────────────────────────────────────────
   The "lock screen" shell for the unauthenticated auth pages (Login / Register /
   Forgot & Reset password), driven by Views/Shared/_AuthLayout.cshtml. Full-screen
   video background + dark overlay + dot grid + centered white card. Mirrors the
   Welcome page (.wg-* in Views/Welcome/Index.cshtml) minus the benefits strip;
   the card holds a normal Bootstrap form rather than centered CTAs. */
.p-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: #0f0f11; /* fallback while video loads */
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Video + overlay are fixed to the viewport so a tall form (Register) scrolls
   over a stationary background instead of stretching it. */
.p-auth__video,
.p-auth__overlay { position: fixed; inset: 0; }
.p-auth__video {
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.p-auth__overlay {
    background: linear-gradient(rgba(10, 10, 15, 0.78), rgba(10, 10, 15, 0.88));
    z-index: 1;
}
.p-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 2;
}
.p-auth__logo-wrap,
.p-auth__card,
.p-auth__back { position: relative; z-index: 3; }
.p-auth__logo-wrap { margin-bottom: 24px; }
.p-auth__logo { height: 38px; width: auto; }
.p-auth__card {
    background: #fff;
    color: #0f0f11;
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    text-align: left;
}
.p-auth__card--wide { max-width: 580px; }
.p-auth__back {
    display: inline-block;
    margin-top: 22px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
}
.p-auth__back:hover { color: #fff; }

@media (max-width: 600px) {
    .p-auth { padding: 32px 16px; justify-content: flex-start; }
    .p-auth__card { padding: 32px 22px; }
}

/* ── Read-only CBM summary panel (.q-cbm) ──────────────────────────────
   Quote pages + RFQ detail + PDF parity. A distinct read-only namespace,
   NOT .rfq-cbm (which is scoped to the RFQ modal and carries qty-stepper /
   thumbnail / modal-header styling). Adapted from the read-only parts of
   .rfq-cbm. See STYLE_GUIDE.md → ".q-cbm — read-only CBM summary panel". */
.q-cbm {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.q-cbm__head {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.q-cbm__body {
    overflow-x: auto;
    padding: 12px 16px;
}
.q-cbm__table {
    width: 100%;
    font-size: 0.76rem;
    border-collapse: collapse;
}
.q-cbm__table th,
.q-cbm__table td {
    padding: 5px 7px;
    vertical-align: middle;
    white-space: nowrap;
}
.q-cbm__th {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}
.q-cbm__product-name {
    font-weight: 600;
    white-space: normal;
}
.q-cbm__dim {
    text-align: left;
    color: #374151;
}
.q-cbm__th--pkgs,
.q-cbm__pkgs {
    width: 1%;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
}
.q-cbm__total-row td {
    font-weight: 700;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}
.q-cbm__dash {
    color: #9ca3af;
}
.q-cbm__empty {
    padding: 12px 14px;
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: center;
}
.q-cbm__container-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.q-cbm__container-label {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}
.q-cbm__container-result {
    font-size: 0.82rem;
    color: #111827;
}
.q-cbm__usage {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
}
.q-cbm__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 12px;
    font-size: 0.7rem;
    color: #9ca3af;
    border-top: 1px solid #f0f0f0;
}
.q-cbm__legend-item strong {
    color: #6b7280;
    font-weight: 700;
}
.q-cbm__note {
    padding: 8px 12px;
    font-size: 0.72rem;
    color: #9ca3af;
    border-top: 1px solid #f0f0f0;
}

/* ============================================================================
   .p-qr-banner — B2C personalised animated Quick-reorder banner
   Config-gated (Primmerce:QuickReorderLayout == "animated"); rendered at the top
   of the B2C home, below the landing hero. Cycles the customer's most-frequently
   -ordered products. Markup: Views/Home/Index.cshtml; engine: quick-reorder-banner.js.
   ============================================================================ */
.p-qr-banner-wrap {
    --qr-dwell: 5000ms; /* keep in sync with DWELL in quick-reorder-banner.js */
    margin: 28px auto;
}
.p-qr-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(15,15,17,0.78), rgba(15,15,17,0.78)), url('/assets/smd-lift/categories/Frequently-bought-a.jpg') center/cover no-repeat;
    color: var(--p-text-dark);
    border-radius: var(--p-radius-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 320px;
    box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.45);
}

/* ---- left copy panel ---- */
.p-qr-banner__copy {
    position: relative;
    z-index: 2;
    padding: 40px 40px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.p-qr-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-muted-dark);
}
.p-qr-banner__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--p-accent);
    animation: qrPulse 2s ease-in-out infinite;
}
@keyframes qrPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
.p-qr-banner__hi {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 17ch;
    margin: 0;
}
.p-qr-banner__prodline { min-height: 78px; }
.p-qr-banner__pname { font-size: 1.05rem; font-weight: 600; margin-bottom: 2px; }
.p-qr-banner__pmeta { font-size: 0.85rem; color: var(--p-muted-dark); margin-bottom: 2px; }
.p-qr-banner__pprice { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.p-qr-banner__cur { font-size: 0.85rem; font-weight: 600; color: var(--p-muted-dark); margin-right: 3px; }

.p-qr-banner__prodline.is-live .p-qr-banner__pname { animation: qrLineIn 0.5s ease both; }
.p-qr-banner__prodline.is-live .p-qr-banner__pmeta { animation: qrLineIn 0.5s ease 0.05s both; }
.p-qr-banner__prodline.is-live .p-qr-banner__pprice { animation: qrLineIn 0.5s ease 0.1s both; }
@keyframes qrLineIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.p-qr-banner__cta {
    margin-top: 6px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #c8102e;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 11px 22px;
    border-radius: 10px;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.p-qr-banner__cta:hover { transform: translateY(-1px); background: #ffffff; color: #000; }
.p-qr-banner__cta.is-added { background: #d4edda; color: #14532d; }
.p-qr-banner__cta i { font-size: 1rem; }

/* ---- right product stage ---- */
.p-qr-banner__stage { position: relative; z-index: 1; overflow: hidden; }
.p-qr-banner__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}
.p-qr-banner__slide.is-active { opacity: 1; visibility: visible; }

.p-qr-banner__disc {
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 10px;
    background: var(--p-product-bed);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.p-qr-banner__art {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
}
.p-qr-banner__slide.is-active .p-qr-banner__disc { animation: qrDiscIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.p-qr-banner__slide.is-active .p-qr-banner__art {
    animation: qrArtIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both, qrFloat 5s ease-in-out 0.8s infinite;
}
@keyframes qrDiscIn {
    from { opacity: 0; transform: translateX(40px) scale(0.9); }
    to { opacity: 1; transform: none; }
}
@keyframes qrArtIn {
    from { opacity: 0; transform: translateY(18px) scale(0.86) rotate(-4deg); }
    to { opacity: 1; transform: none; }
}
@keyframes qrFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.p-qr-banner__tag {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.p-qr-banner__tag i { color: var(--p-accent); font-size: 0.85rem; }
.p-qr-banner__slide.is-active .p-qr-banner__tag { animation: qrTagIn 0.5s ease 0.35s both; }
@keyframes qrTagIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---- progress rail ---- */
.p-qr-banner__rail {
    position: absolute;
    left: 40px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
.p-qr-banner__pip {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}
.p-qr-banner__pip span { display: block; height: 100%; width: 0; background: #fff; }
.p-qr-banner__pip.is-active span { animation: qrFill var(--qr-dwell) linear forwards; }
.p-qr-banner__pip.is-done span { width: 100%; }
@keyframes qrFill {
    from { width: 0; }
    to { width: 100%; }
}

@media (max-width: 767.98px) {
    .p-qr-banner { grid-template-columns: 1fr; }
    .p-qr-banner__stage { height: 270px; order: -1; }
    .p-qr-banner__copy { padding: 26px 24px 56px; }
    .p-qr-banner__hi { font-size: 1.4rem; }
    .p-qr-banner__rail { left: 24px; bottom: 18px; }
    .p-qr-banner__tag { top: 16px; right: 16px; background: #000; border-color: rgba(255, 255, 255, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
    .p-qr-banner *,
    .p-qr-banner::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   .p-wizard — multi-step form shell (trade account application, #25674)
   Generic: nothing here knows about trade applications specifically.
   Mobile (<576px) swaps the six-pill nav for a compact progress row — a
   six-item pill nav is unusable on a phone and this form gets filled on phones.
   ========================================================================== */

.p-wizard-shell {
    max-width: 1480px;
    margin: 3rem auto;
    padding-inline: 24px;
}

.p-wizard {
    background: #fff;
    border: 1px solid var(--p-border, #e5e5e5);
    border-radius: 10px;
    padding: 1.75rem;
}

.p-wizard__title {
    margin: 0 0 1.25rem;
    font-weight: 700;
}

/* ── Step nav (desktop / tablet) ─────────────────────────────────────────── */

.p-wizard__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--p-border, #e5e5e5);
    counter-reset: none;
}

.p-wizard__step > a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border: 1px solid var(--p-border, #e5e5e5);
    border-radius: 999px;
    color: #6c757d;
    text-decoration: none;
    font-size: var(--p-fs-13, .8125rem);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.p-wizard__step > a:hover {
    border-color: #adb5bd;
    color: #212529;
}

.p-wizard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #f1f3f5;
    color: inherit;
    font-weight: 700;
    font-size: var(--p-fs-12, .75rem);
    flex: 0 0 auto;
}

.p-wizard__step--done > a {
    border-color: #198754;
    color: #198754;
}

.p-wizard__step--done .p-wizard__num {
    background: #198754;
    color: #fff;
}

.p-wizard__step--current > a {
    background: #212529;
    border-color: #212529;
    color: #fff;
}

.p-wizard__step--current .p-wizard__num {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ── Step nav (mobile) ───────────────────────────────────────────────────── */

.p-wizard__progress { display: none; }

.p-wizard__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    font-size: var(--p-fs-13, .8125rem);
    color: #6c757d;
    margin-bottom: .4rem;
}

.p-wizard__progress-track {
    height: 6px;
    border-radius: 999px;
    background: #f1f3f5;
    overflow: hidden;
}

.p-wizard__progress-bar {
    height: 100%;
    background: #212529;
    border-radius: 999px;
    transition: width .2s ease;
}

@media (max-width: 575.98px) {
    .p-wizard { padding: 1.15rem; }
    .p-wizard-shell { padding-inline: 14px; margin: 1.5rem auto; }
    .p-wizard__nav { display: none; }
    .p-wizard__progress {
        display: block;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--p-border, #e5e5e5);
    }
}

/* ── Sections + body ────────────────────────────────────────────────────── */

.p-wizard__section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.75rem 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--p-border, #e5e5e5);
    font-weight: 700;
}

.p-wizard__section:first-of-type { margin-top: 0; }

.p-wizard__edit {
    font-size: var(--p-fs-13, .8125rem);
    font-weight: 500;
    text-decoration: underline;
}

.p-wizard__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--p-border, #e5e5e5);
}

/* ── Notices, issues, read-only ─────────────────────────────────────────── */

.p-wizard__issues,
.p-wizard__notice,
.p-wizard__readonly,
.p-wizard__done {
    display: flex;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: var(--p-fs-14, .875rem);
}

.p-wizard__issues {
    display: block;
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.p-wizard__issues-head { font-weight: 700; margin: 0 0 .4rem; }
.p-wizard__issues ul { margin: 0; padding-left: 1.25rem; }
.p-wizard__issues a { color: #842029; text-decoration: underline; }

.p-wizard__notice {
    background: #f8f9fa;
    border: 1px solid var(--p-border, #e5e5e5);
    color: #495057;
}

.p-wizard__notice--warn {
    background: #fff8e1;
    border-color: #ffe08a;
    color: #664d03;
}

.p-wizard__readonly {
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #212529;
}

.p-wizard__done {
    background: #f0fdf4;
    border: 1px solid #a7e8bd;
    color: #14532d;
    align-items: flex-start;
}

.p-wizard__notice > i,
.p-wizard__readonly > i,
.p-wizard__done > i { font-size: 1.4rem; flex: 0 0 auto; line-height: 1.2; }
.p-wizard__done > i { font-size: 2rem; }

.p-wizard__blocking { margin: .5rem 0 0; padding-left: 1.25rem; font-size: var(--p-fs-14, .875rem); }
.p-wizard__blocking a { color: #842029; }

/* ── Repeatable blocks (directors) ──────────────────────────────────────── */

.p-wizard__repeat {
    border: 1px solid var(--p-border, #e5e5e5);
    border-radius: 8px;
    padding: 1.15rem;
    margin-bottom: 1rem;
    background: #fcfcfd;
}

.p-wizard__repeat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem;
}

.p-wizard__repeat-remove {
    color: #b02a37;
    text-decoration: none;
    padding: 0;
}

.p-wizard__repeat-remove:hover { color: #842029; text-decoration: underline; }

.p-wizard__repeat-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.p-wizard__empty {
    padding: 1.15rem;
    border: 1px dashed var(--p-border, #d5d5d5);
    border-radius: 8px;
    color: #6c757d;
    font-size: var(--p-fs-14, .875rem);
    margin-bottom: 1rem;
}

/* ── Review / summary lists ─────────────────────────────────────────────── */

.p-wizard__review {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: .5rem 1.25rem;
    margin: 0 0 .5rem;
    font-size: var(--p-fs-14, .875rem);
}

.p-wizard__review dt { font-weight: 600; color: #6c757d; }
.p-wizard__review dd { margin: 0; }

@media (max-width: 575.98px) {
    .p-wizard__review { grid-template-columns: 1fr; gap: .1rem 0; }
    .p-wizard__review dd { margin-bottom: .6rem; }
    .p-wizard__actions { flex-direction: column-reverse; align-items: stretch; }
    .p-wizard__actions > .btn { width: 100%; }
}

.p-wizard__doclist,
.p-wizard__next {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    font-size: var(--p-fs-14, .875rem);
}

.p-wizard__doclist { list-style: none; padding-left: 0; }
.p-wizard__doclist > li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--p-border, #f1f1f1);
}
.p-wizard__doclist > li:last-child { border-bottom: 0; }
.p-wizard__doclist .badge { margin-left: .5rem; font-weight: 600; }

.p-wizard__next > li { margin-bottom: .4rem; }

/* .p-wizard document-upload rows (#25675) — extends the .p-wizard__doclist above from a
   read-only checklist into upload slots. */

.p-wizard__docrow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.p-wizard__docactions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.p-wizard__docactions input[type="file"] { max-width: 15rem; }

.p-wizard__docfiles {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
}

.p-wizard__docfiles > li {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .35rem .6rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: .3rem;
    font-size: var(--p-fs-14, .875rem);
}

@media (max-width: 575.98px) {
    .p-wizard__docrow { flex-direction: column; }
    .p-wizard__docactions { width: 100%; }
    .p-wizard__docactions input[type="file"] { max-width: none; flex: 1 1 auto; }
}

/* ───────── Admin lists — one pattern (JHNet UX27) ─────────
   Every /admin list: search bar + result count + filter chips on the left, the Filters card on
   the right (.admin-rfq-side-field), the list, then _AdminPager. These rules used to be copied
   into each page's <style>. Behaviour lives in wwwroot/assets/js/admin/admin-lists.js. */
.admin-shell .admin-rfq-resultbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-shell .admin-rfq-side-field { margin-bottom: 14px; }
.admin-shell .admin-rfq-side-label { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(15,15,17,.45); margin-bottom: 5px; }
.admin-shell .admin-list-intro { color: var(--p-muted-light); font-size: 14px; margin-bottom: 16px; }
/* Rows that open their record */
.admin-shell .acct-list-row[data-row-href] { cursor: pointer; }
.admin-shell .acct-list-row[data-row-href]:hover { background: #fafafb; }
.admin-shell .adm-row-link { color: inherit; font-weight: 600; text-decoration: none; }
.admin-shell .adm-row-link:hover, .admin-shell .adm-row-link:focus-visible { color: var(--p-accent); text-decoration: underline; }
/* Sortable column headers */
.admin-shell .adm-sort-hd { cursor: pointer; user-select: none; flex-direction: row !important; align-items: center; white-space: nowrap; }
.admin-shell .adm-sort-hd:hover { color: var(--p-accent); }
.admin-shell .adm-sort-icon::after { content: '\f0dc'; font-family: 'Line Awesome Free'; font-weight: 900; margin-left: 4px; opacity: .35; font-size: .7rem; }
.admin-shell .adm-sort-hd.asc  .adm-sort-icon::after { content: '\f0de'; opacity: 1; }
.admin-shell .adm-sort-hd.desc .adm-sort-icon::after { content: '\f0dd'; opacity: 1; }
/* Status chips */
.admin-shell .status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 5px; border-radius: 20px; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: none; white-space: nowrap; align-self: flex-start; }
.admin-shell .status-chip-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: currentColor; font-size: .58rem; flex-shrink: 0; }
.admin-shell .status-chip-dot i { color: #fff; }
.admin-shell .chip-success   { color: #115c34; background: rgba(25,135,84,.18); }
.admin-shell .chip-info      { color: #0e4d78; background: rgba(29,111,164,.18); }
.admin-shell .chip-warning   { color: #7a5000; background: rgba(255,152,0,.22); }
.admin-shell .chip-danger    { color: #a71d2a; background: rgba(220,53,69,.16); }
.admin-shell .chip-secondary { color: #4e555b; background: rgba(108,117,125,.18); }
/* Pager */
.admin-shell .admin-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-shell .acct-pg-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; color: #495057; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; text-decoration: none; }
.admin-shell .acct-pg-btn:hover:not(:disabled) { background: #f0f1f3; border-color: #adb5bd; color: #495057; }
.admin-shell .acct-pg-btn:disabled { opacity: .4; cursor: default; }
/* A page number in the pager: the arrow button's box, sized for digits like the current page. */
.admin-shell .acct-pg-num { width: auto; min-width: 28px; padding: 0 6px; font-size: .78rem; font-weight: 600; }
.admin-shell .acct-pg-cur { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 6px; background: #0f0f11; color: #fff; font-size: .78rem; font-weight: 700; padding: 0 6px; }
/* Date range (_AdminDateRange) */
.admin-shell .admin-date-range__error { color: #a71d2a; font-size: 12px; margin-top: 4px; }
.admin-shell .admin-date-range__quick { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.admin-shell .admin-date-range__quick button { border: 1px solid var(--p-border-light); background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--p-text-light); }
.admin-shell .admin-date-range__quick button:hover { border-color: var(--p-accent); color: var(--p-accent); }

/* ── /admin/etl — "Product images on disk" panel (IMG2) ──────────────────────────────────────────
   Reuses the page's .etl-ai panel look; these add the progress bar and the action buttons. */
.etl-img .etl-img__bar {
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    appearance: none;
    background: #f1f2f5;
    accent-color: #4f46e5;
}
.etl-img .etl-img__bar::-webkit-progress-bar { background: #f1f2f5; border-radius: 999px; }
.etl-img .etl-img__bar::-webkit-progress-value { background: #4f46e5; border-radius: 999px; }
.etl-img .etl-img__bar::-moz-progress-bar { background: #4f46e5; border-radius: 999px; }
.etl-img .etl-img__bar[hidden] { display: none; }
.etl-img__actions { flex-shrink: 0; display: flex; gap: 0.4rem; }
.etl-img__actions form[hidden] { display: none; }
@media (max-width: 575.98px) {
    .etl-img { flex-wrap: wrap; }
    .etl-img__actions { width: 100%; }
}

/* ── Store content pages (multi-tenant R10) ─────────────────────────────
   A store's own page text (SimpleMarkup → h2–h3, p, ul/ol, strong, em, a, img), on
   /info/{page} when it replaces a built-in page and on /pages/{slug}, inside the shared
   _LegalMasthead + .legal-prose frame. Only legal pages keep the masthead's "In effect" badge. */
.content-page-view:not(.content-page-view--legal) .legal-mh__meta { display: none; }
.content-page h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.content-page h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.content-page p, .content-page li { line-height: 1.7; }
.content-page img { border-radius: 8px; margin: 0.5rem 0; }

/* ── Admin list pages — Promotions, Reviews (.admin-listpage) ─────────────
   Page header, a white list card (search, heading + count, empty state) and a
   matching Filters card. Scoped to pages that opt in with .admin-listpage, so
   the shared admin list pattern (UX27) and the _AdminDateRange partial look
   unchanged elsewhere. */
.admin-listpage__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.admin-listpage__title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #111827; margin: 0 0 4px; }
.admin-listpage__sub { font-size: 1rem; color: #6b7280; margin: 0; }
.admin-listpage__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Buttons. <a> variants need !important: a global `a { color: … !important }` rule. */
.admin-listpage__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
    line-height: 1.2; border: 1px solid transparent; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.admin-listpage__btn i { font-size: 1.1rem; }
.admin-listpage__btn--primary { background: #c8102e; border-color: #c8102e; color: #fff !important; }
.admin-listpage__btn--primary:hover,
.admin-listpage__btn--primary:focus-visible { background: #a50d26; border-color: #a50d26; color: #fff !important; }
.admin-listpage__btn--ghost { background: #fff; border-color: #d1d5db; color: #111827 !important; }
.admin-listpage__btn--ghost:hover,
.admin-listpage__btn--ghost:focus-visible { border-color: #9ca3af; background: #f9fafb; color: #111827 !important; }
.admin-listpage__btn--block { width: 100%; padding: 12px 20px; }

/* Cards */
.admin-listpage__card {
    background: #fff; border: 1px solid #eef0f3; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
    padding: 28px;
}

/* Search: icon, borderless input, red button flush right */
.admin-listpage__search {
    display: flex; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 10px;
    overflow: hidden; background: #fff; margin-bottom: 24px;
}
.admin-listpage__search:focus-within { border-color: #c8102e; box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }
.admin-listpage__search-icon { display: flex; align-items: center; padding: 0 4px 0 16px; font-size: 1.25rem; color: #6b7280; }
.admin-listpage__search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 14px 12px; font-size: 0.95rem; background: transparent; }
.admin-listpage__search-btn {
    flex: 0 0 auto; width: 60px; border: 0; background: #c8102e; color: #fff;
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
.admin-listpage__search-btn:hover,
.admin-listpage__search-btn:focus-visible { background: #a50d26; }

/* List heading */
.admin-listpage__listhead {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid #eef0f3;
}
.admin-listpage__listtitle { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: #111827; margin: 0; }
.admin-listpage__count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px;
    padding: 0 9px; border-radius: 999px; background: #f1f3f6; color: #4b5563; font-size: 0.8rem; font-weight: 600;
}
.admin-listpage__listmeta { font-size: 0.875rem; color: #6b7280; }
/* Heading with its count line underneath (Reviews), and a status tag on the right. */
.admin-listpage__listheading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-listpage__tag {
    flex-shrink: 0; padding: 6px 14px; border-radius: 8px;
    background: #fdecef; color: #c8102e; font-size: 0.85rem; font-weight: 500;
}
.admin-listpage__chips { margin-bottom: 16px; }

/* Empty state */
.admin-listpage__empty { text-align: center; padding: 40px 16px 24px; }
.admin-listpage__empty-art {
    position: relative; width: 130px; height: 130px; margin: 0 auto 28px; border-radius: 50%;
    background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 3.4rem;
}
.admin-listpage__empty-art::before,
.admin-listpage__empty-art::after { content: ""; position: absolute; border-radius: 50%; background: #f6c4cd; }
.admin-listpage__empty-art::before { width: 9px; height: 9px; left: -16px; top: 32px; }
.admin-listpage__empty-art::after { width: 15px; height: 15px; right: -10px; bottom: 14px; }
.admin-listpage__empty-title { font-size: 1.6rem; font-weight: 700; color: #111827; margin: 0 0 8px; }
.admin-listpage__empty-text { font-size: 1rem; color: #6b7280; margin: 0 0 24px; }

/* Filters card */
/* container-type lets the date range react to the card's own width (narrow at ~1024px screens). */
/* Sticks below the pinned header and the pinned page title strip (55px), plus a gap. */
.admin-listpage__filters { position: sticky; top: calc(var(--admin-header-h) + 55px + 16px); container-type: inline-size; }
.admin-listpage__filters-head {
    display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #eef0f3;
}
.admin-listpage__filters-icon {
    width: 48px; height: 48px; border-radius: 12px; background: #fdecef; color: #c8102e;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.admin-listpage__filters-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0; }
.admin-shell .admin-listpage__filters .admin-rfq-side-field { margin-bottom: 18px; }
.admin-shell .admin-listpage__filters .admin-rfq-side-label {
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #374151; margin-bottom: 8px;
}
.admin-listpage__filters .form-select,
.admin-listpage__filters .form-control { border-radius: 10px; border-color: #e5e7eb; padding-top: 11px; padding-bottom: 11px; }
/* Date range: From / To side by side, three equal quick-range buttons under them. */
.admin-listpage__filters .admin-date-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.admin-listpage__filters .admin-date-range .form-control { min-width: 0; width: 100%; }
.admin-shell .admin-listpage__filters .admin-date-range__quick {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 0;
}
/* Narrow card: From and To stack instead of squeezing side by side. */
@container (max-width: 330px) {
    .admin-listpage__filters .admin-date-range { grid-template-columns: minmax(0, 1fr); }
}
.admin-shell .admin-listpage__filters .admin-date-range__quick button {
    padding: 10px 6px; border-radius: 10px; border-color: #e5e7eb; font-size: 0.85rem; font-weight: 500; color: #111827;
}
.admin-listpage__filters-actions {
    margin-top: 22px; padding-top: 22px; border-top: 1px solid #eef0f3;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* Side card with an info note and stacked actions instead of filters (Accounts). */
.admin-listpage__callout.admin-info-callout { padding: 16px 18px; border-radius: 10px; margin-bottom: 24px; line-height: 1.55; }
.admin-listpage__callout.admin-info-callout i { font-size: 1.25rem !important; margin-top: 1px !important; }
.admin-listpage__side-actions { display: grid; gap: 12px; }
/* Export links under the list heading (Orders). */
.admin-listpage__exports { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.admin-listpage__exports .admin-listpage__rowbtn { padding: 7px 14px; font-size: 0.82rem; }
/* Long explanatory subtitles (Trade applications) shouldn't run the full width. */
.admin-listpage__sub { max-width: 760px; }
/* Search without the leading icon (Price Lists). */
.admin-listpage__search-input--solo { padding-left: 20px; }
/* Rows inside the list card (Price Lists): roomier, softer corners, larger avatar. */
.admin-listpage__rows .acct-list-row { padding: 20px 22px; border-color: #eef0f3; border-radius: 12px; margin-bottom: 12px; }
.admin-listpage__rows .admin-acct-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
/* The card sizes to its rows (not the global .acct-list window-height scroll box); the page scrolls. */
.admin-listpage__rows.acct-list { height: auto; overflow: visible; padding-right: 0; }
/* Row action buttons: soft red (primary action), outlined (secondary), icon-only red (delete). */
.admin-listpage__rowbtn {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px;
    border: 1px solid #d1d5db; background: #fff; color: #111827 !important; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.admin-listpage__rowbtn i { font-size: 1.1rem; }
.admin-listpage__rowbtn:hover,
.admin-listpage__rowbtn:focus-visible { border-color: #9ca3af; background: #f9fafb; }
.admin-listpage__rowbtn--soft { background: #fdecef; border-color: #fdecef; color: #c8102e !important; }
.admin-listpage__rowbtn--soft:hover,
.admin-listpage__rowbtn--soft:focus-visible { background: #fbd9df; border-color: #fbd9df; }
.admin-listpage__rowbtn--danger { padding: 9px 12px; color: #c8102e !important; border-color: #f3c2cb; }
.admin-listpage__rowbtn--danger:hover,
.admin-listpage__rowbtn--danger:focus-visible { background: #fdecef; border-color: #c8102e; }
/* No divider when the card holds a single field (Reviews). */
.admin-listpage__filters-actions--flush { margin-top: 14px; padding-top: 0; border-top: 0; }
.admin-listpage a.admin-listpage__reset {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 500;
    color: #111827 !important; text-decoration: underline; text-underline-offset: 3px;
}
.admin-listpage a.admin-listpage__reset i { font-size: 1.15rem; }
.admin-listpage a.admin-listpage__reset:hover { color: #c8102e !important; }

/* A list that scrolls inside the left card (Users, Accounts): from lg up the page fits the window
   and only the list scrolls. The global .acct-list height (100vh - 260px) plus the card's heading,
   toolbar and column header pushed the page past the window, so the page scrolled as well. */
@media (min-width: 992px) {
    .admin-shell__main:has(.admin-listpage > .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows)) {
        height: calc(100vh - var(--admin-header-h));
        display: flex;
        flex-direction: column;
    }
    .admin-shell__main:has(.admin-listpage > .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows)) > .container-fluid:last-child,
    .admin-listpage:has(> .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows)),
    .admin-listpage:has(> .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows)) > .row {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .admin-listpage:has(> .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows)) > .row { flex-direction: row; }
    .admin-listpage > .row > .col-lg-8:has(> .admin-listpage__card > .acct-list:not(.admin-listpage__rows)) {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .admin-listpage > .row > .col-lg-8 > .admin-listpage__card:has(> .acct-list:not(.admin-listpage__rows)) {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .admin-listpage > .row > .col-lg-8 > .admin-listpage__card > .acct-list:not(.admin-listpage__rows) {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .admin-listpage__card { padding: 20px; }
    .admin-listpage__title { font-size: 1.6rem; }
    .admin-listpage__filters .admin-date-range { grid-template-columns: 1fr; }
}
/* ── /Admin list pages ────────────────────────────────────────────────── */

/* ── My Account: dark sidebar (every account page) ────────────────────────
   Matches the admin chrome (#1b1d21). Overrides the light .page-account sidebar
   rules above; the hover rule beats the page-wide red link hover. */
.page-account .acct-sidebar {
    background: #1b1d21;
    border: 0 !important;
    border-radius: 16px !important;
    color: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.page-account .acct-sidebar > .border-bottom { border-color: rgba(255, 255, 255, .1) !important; }
.page-account .acct-sidebar h6 { color: #fff; }
.page-account .acct-sidebar .text-muted { color: rgba(255, 255, 255, .6) !important; }
.page-account .acct-sidebar .acct-avatar { width: 52px; height: 52px; background: #2e3036; color: #fff; font-size: 1.35rem; }
.page-account .acct-sidebar .acct-nav { font-size: 0.95rem; }
.page-account .acct-sidebar .acct-nav li { margin-bottom: 4px; }
.page-account .acct-sidebar .acct-nav .acct-nav-group { color: rgba(255, 255, 255, .5); padding: 18px 12px 8px; letter-spacing: .12em; }
/* !important: a global `a { color: … !important }` rule would otherwise paint these dark on dark. */
.page-account .acct-sidebar .acct-nav a { color: rgba(255, 255, 255, .88) !important; padding: 10px 14px; border-radius: 10px; gap: 14px; }
.page-account .acct-sidebar .acct-nav a i { color: rgba(255, 255, 255, .85); font-size: 1.3rem; width: 22px; }
.page-account .acct-sidebar .acct-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff !important; transform: none; }
.page-account .acct-sidebar .acct-nav a:hover i { color: #fff !important; }
.page-account .acct-sidebar .acct-nav a.active { background: rgba(255, 255, 255, .08); color: #fff !important; font-weight: 600; box-shadow: inset 3px 0 0 #c8102e; }
.page-account .acct-sidebar .acct-nav a.active i { color: #ff5a6a; }
/* The operator's Admin Dashboard link reads in the brand tint on the dark panel. */
.page-account .acct-sidebar .acct-nav a.text-accent { color: #ff8a9a !important; font-weight: 500 !important; }
.page-account .acct-sidebar .acct-nav a.text-accent i { color: #ff8a9a; }
@media (max-width: 991.98px) {
    .page-account .acct-sidebar .acct-nav-toggle { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
    .page-account .acct-sidebar .acct-nav-toggle__eyebrow { color: rgba(255, 255, 255, .6); }
}

/* ── My Account dashboard (.acct-dash) ─────────────────────────────────── */
.acct-dash__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.acct-dash__title { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; margin: 0 0 4px; line-height: 1.1; }
.acct-dash__sub { font-size: 1.1rem; color: #6b7280; margin: 0; }
.acct-dash__sub-note { display: block; font-size: 0.9rem; margin-top: 2px; }
.page-account a.acct-dash__cta,
.page-account a.acct-dash__btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 10px;
    background: #c8102e; color: #fff !important; font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease;
}
.page-account a.acct-dash__btn { padding: 8px 16px; font-size: 0.9rem; }
.page-account a.acct-dash__cta:hover,
.page-account a.acct-dash__btn:hover { background: #a50d26; color: #fff !important; }
.acct-dash__cta i { font-size: 1.2rem; }
.acct-dash__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 10px; }
.acct-dash__notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 1.5rem; border-radius: 12px; background: #fdecef; border: 1px solid #f5c6cf; color: #7a1020; }

/* At a glance: one white card, cells divided by hairlines. */
.acct-glance-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.75rem;
    background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 24px 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
}
.acct-glance-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-account a.acct-glance-cell { display: flex; align-items: flex-start; gap: 18px; padding: 4px 24px; color: inherit !important; text-decoration: none; min-width: 0; }
.acct-glance-cell + .acct-glance-cell { border-left: 1px solid #eef0f3; }
.acct-glance-cell__ic { width: 60px; height: 60px; border-radius: 50%; background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; transition: background-color .15s ease, color .15s ease; }
.acct-glance-cell__body { display: flex; flex-direction: column; min-width: 0; }
.acct-glance-cell__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.acct-glance-cell__num { font-size: 2.4rem; font-weight: 800; line-height: 1.15; color: #111827; margin: 6px 0 4px; }
.acct-glance-cell.is-action .acct-glance-cell__num { color: #c8102e; }
.acct-glance-cell__meta { font-size: 0.95rem; color: #6b7280; }
.page-account a.acct-glance-cell:hover .acct-glance-cell__ic { background: #c8102e; color: #fff; }
@media (max-width: 1199.98px) {
    .acct-glance-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .acct-glance-strip .acct-glance-cell:nth-child(odd) { border-left: 0; }
    .acct-glance-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .acct-glance-strip--3 .acct-glance-cell + .acct-glance-cell { border-left: 1px solid #eef0f3; }
}
@media (max-width: 767.98px) {
    .acct-glance-strip, .acct-glance-strip--3 { grid-template-columns: 1fr; }
    .acct-glance-strip .acct-glance-cell + .acct-glance-cell { border-left: 0; border-top: 1px solid #eef0f3; padding-top: 16px; }
}

/* Cards: Recent Orders / activity / price list. */
.acct-dash-card { background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 24px 28px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05); }
.acct-dash-card--fill { min-height: 100%; }
.acct-dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid #eef0f3; }
.acct-dash-card__head--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.acct-dash-card__title { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 0; }
.page-account a.acct-dash-card__link { font-size: 0.9rem; color: #c8102e !important; text-decoration: none; font-weight: 600; }
.acct-dash-table thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; background: transparent; border-bottom-color: #eef0f3; }
.acct-dash-empty { text-align: center; padding: 64px 16px 56px; }
.acct-dash-empty__art { width: 108px; height: 108px; margin: 0 auto 24px; border-radius: 50%; background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.acct-dash-empty__title { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 0 0 8px; }
.acct-dash-empty__text { font-size: 1rem; color: #6b7280; margin: 0; }

.acct-pricelist { display: flex; align-items: flex-start; gap: 22px; }
.acct-pricelist__ic { width: 88px; height: 88px; border-radius: 14px; background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; flex-shrink: 0; }
.acct-pricelist__chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #111827; }
.acct-pricelist__chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c8102e; }
.acct-pricelist__note { font-size: 1rem; color: #6b7280; }

/* Operator shortcut: dark tile with a red round arrow. */
.page-account a.acct-admin-tile {
    display: flex; align-items: center; gap: 20px; padding: 36px 28px; border-radius: 16px; background: #1b1d21;
    color: #fff !important; text-decoration: none; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); min-height: 180px;
}
.acct-admin-tile__ic { width: 60px; height: 60px; border-radius: 12px; background: rgba(200, 16, 46, .18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; flex-shrink: 0; }
.acct-admin-tile__eyebrow { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ff5a6a; margin-bottom: 6px; }
.acct-admin-tile__title { display: block; font-size: 1.2rem; font-weight: 600; color: #fff; }
.acct-admin-tile__go { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; background: #c8102e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; transition: transform .15s ease; }
.page-account a.acct-admin-tile:hover .acct-admin-tile__go { transform: translateX(3px); }
@media (max-width: 575.98px) {
    .acct-dash__title { font-size: 1.8rem; }
    .acct-dash__sub { font-size: 1rem; }
    .page-account a.acct-dash__cta { width: 100%; justify-content: center; }
    .acct-glance-strip { padding: 16px 4px; }
    .page-account a.acct-glance-cell { padding: 4px 16px; }
    .acct-glance-cell__ic { width: 48px; height: 48px; font-size: 1.4rem; }
    .acct-glance-cell__num { font-size: 2rem; }
    .acct-dash-card { padding: 18px; }
    .acct-dash-empty { padding: 40px 8px 32px; }
    .acct-pricelist__ic { width: 64px; height: 64px; font-size: 2rem; }
    .page-account a.acct-admin-tile { padding: 24px 20px; min-height: 0; }
}
/* ── /My Account dashboard ─────────────────────────────────────────────── */

/* ── Storefront header refresh ───────────────────────────────────────────
   White bar with a soft shadow, larger nav links (Sale as a pink pill), one icon
   size across the toolbar, a hairline before the account pill. Links, icons and
   counters are unchanged — header.cshtml only gained .p-hdr-divider/.p-hdr-account. */
.navbar-custom {
    background: #fff !important;
    border-bottom: 0;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
    padding: 10px 0;
}
.navbar-custom .navbar-nav { gap: 4px; align-items: center; }
/* Matches app.min.css's `.navbar-custom .navbar-nav .nav-item .nav-link` (70px tall, 14px)
   so these win; a fixed 70px height would make the Sale pill a tall lozenge. */
.navbar-custom .navbar-nav .nav-item .nav-link,
.navbar-custom .nav-link {
    height: auto;
    line-height: 1.3;
    font-size: 17px;
    font-weight: 500;
    color: #111827 !important;
    padding: 9px 20px !important;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}
.navbar-custom .nav-link.nav-link--sale { color: #c8102e !important; background: #fdecef; font-weight: 600; }
.navbar-custom .nav-link.nav-link--sale:hover,
.navbar-custom .nav-link.nav-link--sale:focus { background: #fbd9df; }

/* Toolbar: even spacing and one icon size; icons ink-black, red on hover. */
.navbar-custom .topbar-toolbar { gap: 22px !important; }
.navbar-custom .topbar-toolbar > a,
.navbar-custom .topbar-toolbar > .dropdown > a,
.navbar-custom .topbar-toolbar > .dropdown > button { display: inline-flex; align-items: center; color: #111827 !important; }
.navbar-custom .topbar-toolbar > a > i,
.navbar-custom .topbar-toolbar > .dropdown > a > i,
.navbar-custom .topbar-toolbar .notif-bell-btn > i { font-size: 24px !important; color: #111827; line-height: 1; transition: color .15s ease; }
.navbar-custom .topbar-toolbar > a:hover > i,
.navbar-custom .topbar-toolbar > .dropdown > a:hover > i,
.navbar-custom .topbar-toolbar .notif-bell-btn:hover > i { color: #c8102e !important; }
.p-hdr-divider { width: 1px; height: 32px; background: #e5e7eb; margin: 0 -4px; }
/* Account trigger: soft grey pill with the person icon and "Hi, name". */
.navbar-custom .topbar-toolbar a.p-hdr-account { gap: 10px !important; padding: 8px 18px 8px 14px; border-radius: 999px; background: #f3f4f6; transition: background-color .15s ease; }
.navbar-custom .topbar-toolbar a.p-hdr-account:hover { background: #e9ebef; }
.navbar-custom .topbar-toolbar a.p-hdr-account > span { font-size: 1rem !important; font-weight: 500 !important; color: #111827; white-space: nowrap; }
/* Count badges sit on the icon's top-right corner. */
.navbar-custom .topbar-toolbar .wishlist-count-badge,
.navbar-custom .topbar-toolbar .cart-count-badge { width: 20px; height: 20px; font-size: 11px !important; font-weight: 700; top: -8px; right: -10px; }

@media (max-width: 1399.98px) {
    .navbar-custom .navbar-nav .nav-item .nav-link,
    .navbar-custom .nav-link { padding: 9px 12px !important; font-size: 16px; }
    .navbar-custom .topbar-toolbar { gap: 14px !important; }
}
@media (max-width: 1199.98px) {
    /* 992–1199px: the nav and toolbar share a narrow row — shorter links, the account
       pill drops to its icon (the full "Hi, name" returns from 1200px), tighter gaps. */
    .navbar-custom .navbar-nav .nav-item .nav-link,
    .navbar-custom .nav-link { padding: 8px 9px !important; font-size: 15px; }
    .navbar-custom .topbar-toolbar { gap: 12px !important; }
    .navbar-custom .topbar-toolbar a.p-hdr-account { padding: 6px; background: transparent; }
    .navbar-custom .topbar-toolbar a.p-hdr-account > span { display: none !important; }
    .p-hdr-divider { display: none !important; }
}
@media (max-width: 991.98px) {
    .navbar-custom .topbar-toolbar { gap: 14px !important; }
    .navbar-custom .topbar-toolbar > a > i,
    .navbar-custom .topbar-toolbar > .dropdown > a > i,
    .navbar-custom .topbar-toolbar .notif-bell-btn > i { font-size: 22px !important; }
    .navbar-custom .topbar-toolbar a.p-hdr-account { padding: 0; }
}
/* ── /Storefront header refresh ──────────────────────────────────────── */

/* ── Admin Roles & permissions (.admin-roles) ────────────────────────────
   Read-only matrix of RolePermissions: header with a Read-only tag, info note,
   then one card with a grouped table (family rows, green ticks / grey dashes). */
.admin-roles__head { display: flex; align-items: center; gap: 18px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin-roles__head-ic { width: 64px; height: 64px; border-radius: 14px; background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.admin-roles__title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; margin: 0 0 4px; line-height: 1.1; }
.admin-roles__sub { font-size: 1.05rem; color: #6b7280; margin: 0; }
.admin-roles__readonly { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 26px; border-radius: 999px; background: #e9ebef; color: #374151; font-size: 0.95rem; font-weight: 600; }
.admin-roles__readonly i { font-size: 1.3rem; }

.admin-roles__note { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; margin-bottom: 1.5rem; background: #fff; border: 1px solid #eef0f3; border-radius: 12px; }
.admin-roles__note i { color: #c8102e; font-size: 1.4rem; margin-top: 4px; flex-shrink: 0; }
.admin-roles__note p { margin: 0; font-size: 0.9rem; color: #4b5563; line-height: 1.6; }
.admin-shell .admin-roles__note a { color: #c8102e !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.admin-roles__card { background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 22px 24px 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05); }
.admin-roles__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-roles__card-title { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 0; }
.admin-roles__legend { display: flex; align-items: center; gap: 28px; font-size: 0.85rem; color: #6b7280; }
.admin-roles__legend > span { display: inline-flex; align-items: center; gap: 8px; }

.admin-roles__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-roles__table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.admin-roles__table thead th { background: #f3f4f6; padding: 18px 24px; border-bottom: 0; }
.admin-roles__table thead th:first-child { border-top-left-radius: 10px; }
.admin-roles__table thead th:last-child { border-top-right-radius: 10px; }
.admin-roles__table thead th.admin-roles__perm-col { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.admin-roles__table thead th.admin-roles__role-col { font-size: 1rem; font-weight: 700; color: #111827; }
.admin-roles__perm-col { text-align: left; }
.admin-roles__role-col { text-align: center; width: 13%; }
.admin-roles__table tbody th,
.admin-roles__table tbody td { padding: 10px 24px; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
/* position: relative anchors the cells' .visually-hidden text inside the scroll box —
   otherwise it anchors outside it and widens the whole page on phones. */
.admin-roles__table tbody td.admin-roles__role-col { border-left: 1px solid #eef0f3; position: relative; }
.admin-roles__table tbody tr:not(.admin-roles__family):nth-child(even) { background: #fafbfc; }
.admin-roles__table tbody tr:not(.admin-roles__family):hover { background: #f5f6f8; }
.admin-roles__perm-name { display: block; font-size: 1.02rem; font-weight: 700; color: #111827; }
.admin-roles__perm-desc { display: block; font-size: 0.9rem; font-weight: 400; color: #6b7280; margin-top: 2px; }
/* Family row: grey band with a red marker, name, scope and a count on the right. */
.admin-roles__family td { background: #eef0f3; padding: 12px 24px !important; position: relative; }
.admin-roles__family td::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #c8102e; }
.admin-roles__family-name { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #374151; margin-right: 14px; }
.admin-roles__family-scope { font-size: 0.85rem; color: #6b7280; }
.admin-roles__family-count { float: right; font-size: 0.85rem; color: #6b7280; }
.admin-roles__yes { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e3f6ea; color: #16a34a; font-size: 1rem; font-weight: 700; }
.admin-roles__yes--sm { width: 20px; height: 20px; font-size: 0.75rem; }
.admin-roles__no { color: #c4c8cf; font-size: 1rem; }

@media (max-width: 767.98px) {
    .admin-roles__title { font-size: 1.6rem; }
    .admin-roles__head-ic { width: 52px; height: 52px; font-size: 1.6rem; }
    .admin-roles__readonly { margin-left: 0; padding: 8px 18px; }
    .admin-roles__card { padding: 16px 14px 6px; }
    .admin-roles__table thead th, .admin-roles__table tbody th, .admin-roles__table tbody td { padding-left: 14px; padding-right: 14px; }
}
/* ── /Admin Roles & permissions ──────────────────────────────────────── */

/* ── Admin Users (.admin-users, on top of .admin-listpage) ───────────────
   Header tile, "All users" card with Show filter + in-page search, a column
   header (User · Staff · Backorder · Actions) and roomy, divided rows. */
.admin-users__head-ic { width: 64px; height: 64px; border-radius: 14px; background: #fdecef; color: #c8102e; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.admin-users__listhead { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.admin-users__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #eef0f3; }
.admin-users__show { display: flex; align-items: center; gap: 12px; }
.admin-users__show-label { font-size: 0.9rem; font-weight: 500; color: #4b5563; margin: 0; }
.admin-users__show .form-select { min-width: 190px; border-radius: 10px; border-color: #e5e7eb; padding-top: 10px; padding-bottom: 10px; }
.admin-users__search { flex: 0 1 470px; margin-bottom: 0; }

/* Column header row. */
.admin-users__colhead { background: #f3f4f6; border-radius: 10px; padding: 14px 24px; margin-bottom: 4px; }
.admin-users__colhead .acct-list-cell { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.admin-users__col-toggle { flex: 0 0 158px; }
.admin-users__col-actions { flex: 0 0 72px; display: flex; justify-content: flex-end; }
.admin-users__colhead .admin-users__col-actions { justify-content: flex-end; }

/* Rows: divided list rather than separate boxes; the avatar is larger. */
.admin-users__list { padding-right: 0; }
.admin-users__list .acct-list-row { border: 0; border-radius: 0; margin: 0; padding: 18px 24px; background: transparent; box-shadow: none; }
.admin-users__list .acct-list-row + .acct-list-row { border-top: 1px solid #eef0f3; }
.admin-users__list .acct-list-row:nth-child(even) { background: #fafbfc; }
.admin-users__list .acct-list-row:hover { background: #f5f6f8; }
.admin-users__list .admin-acct-avatar { width: 52px; height: 52px; font-size: 1.25rem; }
.admin-users__list .adm-row-link { font-size: 1.15rem; font-weight: 700; color: #111827 !important; }
.admin-users__list .adm-row-link + .text-muted { font-size: 0.95rem !important; }
.admin-users__list .admin-stat-pill { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; }

/* Toggles with their state beside them. */
.admin-users__toggle { display: flex; align-items: center; gap: 10px; }
.admin-users__toggle .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.admin-users__toggle .form-check-input:checked { background-color: #c8102e; border-color: #c8102e; }
.admin-users__toggle-text { font-size: 0.95rem; color: #6b7280; }
.admin-users__toggle-text.is-on { color: #177245; font-weight: 600; }

/* Actions: a round grey kebab button. */
.admin-users__kebab { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #f1f3f6; color: #374151; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: background-color .15s ease; }
.admin-users__kebab:hover, .admin-users__kebab[aria-expanded="true"] { background: #e5e7eb; }

@media (max-width: 767.98px) {
    .admin-users__head-ic { width: 52px; height: 52px; font-size: 1.6rem; }
    .admin-users__search { flex-basis: 100%; }
    .admin-users__show { width: 100%; }
    .admin-users__show .form-select { flex: 1; min-width: 0; }
    .admin-users__list .acct-list-row { padding: 16px 4px; position: relative; }
    .admin-users__list .acct-list-row > .acct-list-cell:first-child { padding-right: 48px; }
    .admin-users__col-toggle { flex: none; }
    /* Kebab sits top-right of the row rather than wrapping onto its own line. */
    .admin-users__list .admin-users__col-actions { position: absolute; top: 16px; right: 4px; flex: none; width: auto; }
}
/* ── /Admin Users ─────────────────────────────────────────────────────── */