/* =============================================================================
   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 {
    /* ───────── 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);
}

.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;
}

/* 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: var(--p-radius-sm) !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: 8px !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;
}

@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);
}

/* 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.
   ─────────────────────────────────────────────────────────────────────── */
.admin-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    color: var(--p-text-light);
    border-bottom: 1px solid var(--p-border-light);
    box-shadow: 0 1px 3px rgba(15, 15, 17, 0.06);
    padding: 0.75rem 0;
}
.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;
}
.admin-header__wordmark {
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: var(--p-fs-18);
}
.admin-header__badge {
    /*    background: var(--p-accent);*/
    color: #c8102e;
    font-size: var(--p-fs-11);
    padding: 0.15rem 0.5rem;
    border-radius: var(--p-radius-sm);
    border: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.admin-header__operator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.admin-header__operator:hover,
.admin-header__operator:focus {
    color: inherit;
    opacity: 0.85;
}
.admin-header__operator-name {
    font-size: var(--p-fs-14);
    font-weight: 500;
}
.admin-header .dropdown-menu {
    min-width: 240px;
}

.admin-shell--sidebar {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.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;
    background: #fff;
    border-right: 1px solid var(--p-border-light);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    /* 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;
}
@media (min-width: 1280px) {
    .admin-sidebar {
        width: 240px;
    }
}
.admin-sidebar__nav {
    padding: 12px 0 24px;
    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 {
    border-top: 1px solid var(--p-border-light);
}
.admin-nav__group-label {
    display: none; /* hidden in tablet icon-rail by default */
    padding: 6px 20px 4px;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(15, 15, 17, 0.45);
}
@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;
}
.admin-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    color: var(--p-text-light);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    white-space: nowrap;
    /* In icon-rail mode, hide the label (the title attr fills in as a
       browser-native tooltip — accessible across mouse + keyboard + touch). */
}
.admin-nav__link i {
    font-size: 1.1rem;
    color: var(--nav-ic, var(--p-muted-light));
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    transition: color .15s ease;
}
/* Per-group icon tints so the rail reads as a colourful, scannable index.
   Set a CSS var per group (low concern); the :hover / .active rules below
   override `color` directly and still win by source order, so interaction
   states are unaffected. */
.admin-nav__group:nth-of-type(1) { --nav-ic: #4f46e5; } /* Home      — indigo */
.admin-nav__group:nth-of-type(2) { --nav-ic: #0d9488; } /* Catalog   — teal   */
.admin-nav__group:nth-of-type(3) { --nav-ic: #2563eb; } /* B2B       — blue   */
.admin-nav__group:nth-of-type(4) { --nav-ic: #d97706; } /* Sales     — amber  */
.admin-nav__group:nth-of-type(5) { --nav-ic: #7c3aed; } /* Customers — violet */
.admin-nav__group:nth-of-type(6) { --nav-ic: #16a34a; } /* System    — green  */
.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 20px;
}
.admin-nav__link:hover {
    color: var(--p-text-light);
    background-color: rgba(15, 15, 17, 0.03);
}
.admin-nav__link:hover i {
    color: var(--p-text-light);
}
.admin-nav__link.active {
    color: var(--p-accent);
    border-left-color: var(--p-accent);
    background-color: rgba(200, 16, 46, 0.05);
}
.admin-nav__link.active i {
    color: var(--p-accent);
}
.admin-nav__link:focus,
.admin-nav__link:focus-visible {
    outline: 2px solid rgba(200, 16, 46, 0.25);
    outline-offset: -2px;
}

/* 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;
    background-color: #f5f5f5;
}
.admin-pagehead {
    border-bottom: 1px solid var(--p-border-light);
    background: #fff;
}

/* 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);
}

/* 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 Help Center link (beside the logo) ───────── */
.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;
}

/* 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: 110px; }
.page-rfq .rfq-qty-group .rfq-qty-input {
    text-align: center;
    width: 38px;
    flex: 0 0 38px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 0;
    -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: #000;
    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: right; }
    .page-rfq .rfq-cell-qty { flex: 0 0 160px; }
    .page-rfq .rfq-cell-total { flex: 0 0 80px; text-align: right; }
    .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 ───────────────────────────────────────────── */

/* ── 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); }
}

/* Mobile-only label rendered above cart cells on the cart page (lg- breakpoint
   is where the desktop header row appears via d-none d-lg-flex). */
.cart-cell-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--p-muted-light);
    margin-bottom: 2px;
}

/* ── 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 {
    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); }

.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;
}
.page-brand .brand-search { position: relative; }
.page-brand .brand-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-muted-light);
    pointer-events: none;
}
.page-brand .brand-search__input {
    width: 260px;
    max-width: 70vw;
    padding: 10px 16px 10px 40px;
    font-size: var(--p-fs-14);
    border: 1px solid var(--p-border-light);
    border-radius: 999px;
    background: var(--p-bg-light);
    transition: border-color var(--p-transition), box-shadow var(--p-transition);
}
.page-brand .brand-search__input:focus {
    outline: none;
    border-color: var(--p-text-light);
    box-shadow: 0 0 0 3px rgba(15,15,17,0.06);
}

/* 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(160px, 1fr));
    gap: 12px;
}
.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: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    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: 75%;
    max-width: 75%;
    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__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__search {
    position: relative;
    display: flex;
    align-items: center;
}
.page-brand .brand-strip__search svg {
    position: absolute;
    left: 12px;
    color: var(--p-muted-dark);
    pointer-events: none;
    flex-shrink: 0;
}
.page-brand .brand-strip__input {
    width: 220px;
    padding: 7px 14px 7px 34px;
    font-size: var(--p-fs-13);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    color: var(--p-text-dark);
    transition: background var(--p-transition), border-color var(--p-transition);
}
.page-brand .brand-strip__input::placeholder { color: var(--p-muted-dark); }
.page-brand .brand-strip__input:focus {
    outline: none;
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.35);
}
.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;
    color: var(--p-muted-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--p-transition);
}
.page-brand .brand-strip__cta:hover { color: var(--p-text-dark); }
@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; }
    .page-brand .brand-strip__eyebrow { font-size: 9px; letter-spacing: 0.10em; }
    .page-brand .brand-strip__count { font-size: 11px; padding: 2px 7px; }
    .page-brand .brand-strip__input { width: 130px; font-size: 12px; padding: 6px 12px 6px 30px; }
}

/* ─── 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%;
    max-width: 1920px;
    height: 220px;
    margin: 0 auto;
    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;
}

/* #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;
}
.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. */
.page-shop .filter-cat__selected {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.page-shop .filter-cat__selected-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.page-shop .filter-cat__selected-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-shop .filter-cat__pin-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.page-shop .filter-cat__pin-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}
.page-shop .filter-cat__pin-nav:hover { background: var(--border-soft); }
.page-shop .filter-cat__pin-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-shop .filter-cat__pin-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: var(--accent, var(--ink));
    color: #fff;
    border-radius: 999px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.page-shop .filter-cat__pin-remove {
    flex-shrink: 0;
    width: 26px;
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.page-shop .filter-cat__pin-remove:hover { background: var(--ink); color: #fff; }
.page-shop .filter-cat__pin-row.is-partial .filter-cat__pin-remove { color: var(--accent, var(--ink)); }

/* 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__trail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-shop .filter-cat__trail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    padding-left: calc(12px + var(--cat-depth, 0) * 16px);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    line-height: 1.3;
}
.page-shop .filter-cat__trail-back {
    cursor: pointer;
    transition: background var(--transition);
}
.page-shop .filter-cat__trail-back:hover { background: var(--border-soft); }
.page-shop .filter-cat__trail-chev {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ink-soft);
}
.page-shop .filter-cat__trail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-shop .filter-cat__trail-row.is-current {    background: #f0f0f0;
    color: #1a1a1a;
    font-weight: 600;
}

.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. */
.page-shop .filter-cat__row--child {
    margin-left: calc(var(--cat-depth, 0) * 16px);
}
/* A ticked row — accent bar + tint so the selection is visible in place,
   below its parent in the trail. */
.page-shop .filter-cat__row--child.is-selected {
    background: #f0f0f0;
    box-shadow: inset 3px 0 0 #1a1a1a;
}
.page-shop .filter-cat__row--child.is-selected .filter-cat__item-name {
    font-weight: 600;
    color: var(--ink);
}
.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. */
.page-shop .filter-cat__browse {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    align-self: center;
    margin: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* 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__browse--empty {
    border-color: transparent;
    background: transparent;
    cursor: default;
}
.page-shop button.filter-cat__browse:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.page-shop .filter-cat__item-chev {
    flex-shrink: 0;
    font-size: 12px;
}

.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;
}

.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;
}

.page-shop .price-range-display {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 6px;
}

/* 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; }
.page-shop .shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.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 (the product-count pill that used to occupy the
   right side is gone); sort + page-size keep their fixed widths at the end. */
.page-shop .shop-controls .search-wrap { flex: 1; min-width: 220px; }
.page-shop .shop-controls .sort-wrap { width: 180px; }
.page-shop .shop-controls .page-size-wrap { width: 110px; }
/* 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; }

/* 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 {
    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 {
        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; }
.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,
    .page-shop .shop-controls .page-size-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); }
.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;
}

@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);
}

/* ── 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;
}
.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;
    justify-content: space-between;
    align-items: baseline !important;
    gap: 8px;
}
.products-area.view-grid .product-card .product-price-inline {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.products-area.view-grid .product-card .product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--p-accent) !important;
    line-height: 1.1;
}
.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 {
    border: 1px solid var(--p-border-light);
    border-radius: var(--p-radius-md);
    background: #fff;
    padding: 28px 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__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 16, 46, 0.08);
    color: var(--p-accent);
    font-size: 24px;
    margin-bottom: 16px;
}
.help-card__title { font-size: var(--p-fs-20); font-weight: 600; margin: 0 0 8px; }
.help-card__blurb { font-size: var(--p-fs-14); color: var(--p-muted-light); margin: 0 0 16px; }
.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-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; }


/* ──────────────────────────────────────────────────────────────────────────
   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; }
/* 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 */
.b2b-landing__hero { flex: 1 1 auto; min-height: 412px; display: flex; flex-direction: column; }
.b2b-landing__carousel { border-radius: var(--p-radius-md); overflow: hidden; flex: 1 1 auto; min-height: 412px; }
.b2b-landing__slide {
    width: 100%;
    flex: 1 1 auto;   /* fill the carousel when used without Flickity */
    min-height: 412px;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.b2b-landing__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 15, 17, 0.6) 0%, rgba(15, 15, 17, 0.15) 60%, transparent 100%);
}
.b2b-landing__slide-copy {
    position: relative;
    z-index: 1;
    padding: 0 48px;
    max-width: 560px;
    color: #fff;
}
.b2b-landing__slide-eyebrow {
    display: inline-block;
    font-size: var(--p-fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 10px;
}
.b2b-landing__slide-title { font-size: var(--p-fs-40); font-weight: 600; margin: 0 0 20px; color: #fff; }
.b2b-landing__slide-btn {
    display: inline-block;
    background: #fff;
    color: var(--p-text-light);
    font-weight: 600;
    font-size: var(--p-fs-14);
    padding: 12px 28px;
    border-radius: var(--p-radius-sm);
    text-decoration: none;
    transition: background var(--p-transition), color var(--p-transition);
}
.b2b-landing__slide-btn:hover { background: var(--p-accent); color: #fff; }
.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;
    min-height: 412px;
}
.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); }
.b2b-hero-slider__shop-btn { border-radius: 10px !important; }
.b2b-hero-slider__shop-btn:hover { color: #fff !important; }
/* ── /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 {
    flex: 0 0 160px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 8px 12px;
    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; }
    .b2b-landing__slide { min-height: 240px; }
    .b2b-landing__slide-copy { padding: 0 24px; }
    .b2b-landing__slide-title { font-size: var(--p-fs-28); }
}
@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. */
.p-home-banner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    min-height: clamp(64px, 9vw, 130px);
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background-color: #14141a;
    background-position: center;
    background-size: cover;
    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) {
    .p-home-banner { min-height: 56px; }
    .p-home-banner__slash { width: 100%; clip-path: none; }
    .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: #0f0f11;
    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 { 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; }

/* ── 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: #4e97fd;
    color: white !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;
}

/* ── 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;
}
.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;
}
.rfq-cbm__dim-input {
    width: 56px;
    text-align: right;
    padding: 2px 4px;
    font-size: 0.76rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}
.rfq-cbm__dim-input:focus {
    outline: none;
    border-color: #6b7280;
}
.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;
}

/* ── 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;
}