/* =============================================================================
   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-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: #a40d26;
    --bs-link-hover-color-rgb: 164, 13, 38;
    /* 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: inherit;
    text-decoration: none;
    transition: opacity var(--p-transition);
}

a:hover {
    opacity: 0.7;
    color: inherit;
}

/* =============================================================================
   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: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);
    border: 1px solid var(--p-accent);
    border-radius: var(--p-radius-sm);
    font-size: var(--p-fs-16);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    transition: background var(--p-transition), border-color var(--p-transition), opacity var(--p-transition);
    cursor: pointer;
    line-height: 1;
    opacity: 1;
}

.p-btn:hover {
    background: var(--p-accent-hover);
    border-color: var(--p-accent-hover);
    color: var(--p-on-accent);
    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: var(--p-radius-sm);
    font-size: var(--p-fs-16);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--p-transition), color var(--p-transition);
    cursor: pointer;
    line-height: 1;
    opacity: 1;
}

.p-btn-outline:hover {
    background: currentColor;
}

/* 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: var(--p-text-light);
    color: var(--p-bg-light) !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: var(--p-text-dark);
    color: var(--p-bg-dark) !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);
}

/* =============================================================================
   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: var(--p-radius-sm);
    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-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: var(--p-accent-hover) !important;
    border-color: var(--p-accent-hover) !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: var(--p-text-light) !important;
    color: var(--p-bg-light) !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 — keep it but make modest */
.btn.rounded-pill {
    border-radius: 999px;
}

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

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

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

.navbar-custom .nav-link:hover {
    opacity: 0.7;
}

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

.topbar-toolbar a {
    color: var(--p-text-light);
    font-size: 20px;
}

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

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

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

/* ───────── 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(960px, 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;
    }
}

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

/* Cols 1–3 are fixed-width; col 4 (info) is bounded to match the B2B
   sidebar inline variant — no wider than 280px so the dark panel stays
   compact rather than stretching across unused space. */
.p-megadept__grid {
    display: grid;
    grid-template-columns: 283px 283px minmax(160px, 280px);
    min-height: 360px;
}
.p-megadept--grandkids-open .p-megadept__grid {
    grid-template-columns: 283px 283px 283px minmax(160px, 280px);
}

.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: linear-gradient(155deg, #151929 0%, #0d1117 100%);
    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: radial-gradient(circle, rgba(200, 16, 46, 0.28) 0%, transparent 70%);
    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;
}

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

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

.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: var(--p-text-light);
    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: rgba(15, 23, 42, 0.05);
    color: var(--p-text, #111827);
    box-shadow: none;
}

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

/* Active: accent-tinted pill with bold red text. */
.p-megadept__item.is-active {
    background-color: rgba(200, 16, 46, 0.09);
    color: var(--p-accent, #c8102e);
    box-shadow: none;
    font-weight: 700;
}
.p-megadept__item.is-active:hover,
.p-megadept__item.is-active:focus-visible {
    background-color: rgba(200, 16, 46, 0.14);
    color: var(--p-accent, #c8102e);
    box-shadow: none;
}

.p-megadept__item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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: none;
    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 */
}
/* Initial: col 1 only (200 px wide) */
.p-megadept--inline .p-megadept__grid {
    grid-template-columns: 200px;
    min-height: 412px;
    height: 100%;     /* grid fills the panel so the category list can scroll inside */
}
/* 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;
}
/* Grid widens as each column is revealed */
.p-megadept--inline.p-megadept--info-open .p-megadept__grid {
    grid-template-columns: 200px minmax(190px, 280px);
}
.p-megadept--inline.p-megadept--info-open.p-megadept--children-open .p-megadept__grid {
    grid-template-columns: 200px 200px minmax(190px, 280px);
}
.p-megadept--inline.p-megadept--info-open.p-megadept--children-open.p-megadept--grandkids-open .p-megadept__grid {
    grid-template-columns: 200px 200px 200px minmax(190px, 280px);
}
/* 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;
}
.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; }

/* ───────── 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: var(--p-text-dark) !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: var(--p-text-dark) !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 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: var(--p-text-dark);
    font-size: var(--p-fs-11);
    padding: 0.15rem 0.5rem;
    border-radius: var(--p-radius-sm);
    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;
}
.admin-pagehead {
    border-bottom: 1px solid var(--p-border-light);
    background: #fff;
}

/* Full-width status strip rendered directly under the admin header
   (ETL background-job banner). Sits in the top-header stack, not the body. */
.admin-etl-statusbar {
    background: #fff;
    border-bottom: 1px solid var(--p-border-light);
}

/* ETL page: two stacked full-width panels (Price lists / Recent runs). Each
   table carries many fixed-width columns that together exceed the viewport on
   smaller screens — let the dense table scroll horizontally rather than let the
   non-shrinking flex cells overflow and overlap. The .acct-list rows only enter
   flex/row mode at md+, so the min-widths are scoped to the same breakpoint. */
@media (min-width: 768px) {
    .admin-etl-split .admin-etl-scroll {
        overflow-x: auto;
    }
    .admin-etl-split .admin-etl-pricelists .acct-list-header,
    .admin-etl-split .admin-etl-pricelists .acct-list-row {
        min-width: 960px;
    }
    .admin-etl-split .admin-etl-runs .acct-list-header,
    .admin-etl-split .admin-etl-runs .acct-list-row {
        min-width: 1040px;
    }
}

/* 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: 999px;
    color: var(--p-text-light);
    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(15, 15, 17, 0.04);
    border-color: var(--p-text-light);
    color: var(--p-text-light);
}
.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: var(--p-text-light);
    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);
}

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

.page-rfq .rfq-lines-header,
.acct-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    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;
}

/* 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; }
.page-rfq .rfq-qty-wrap .form-control { max-width: 90px; }
.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: 12px;
        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: 2 1 0; min-width: 0; grid-column: auto; }
    .page-rfq .rfq-cell-price { flex: 0 0 110px; text-align: right; }
    .page-rfq .rfq-cell-qty { flex: 0 0 160px; }
    .page-rfq .rfq-cell-total { flex: 0 0 120px; text-align: right; }
    .page-rfq .rfq-cell-actions { flex: 0 0 110px; text-align: right; justify-self: auto; }
    .page-rfq .rfq-lines-header .rfq-cell-name { flex: 2 1 0; }
    .page-rfq .rfq-lines-header .rfq-cell-price { flex: 0 0 110px; }
    .page-rfq .rfq-lines-header .rfq-cell-qty { flex: 0 0 160px; }
    .page-rfq .rfq-lines-header .rfq-cell-total { flex: 0 0 120px; }
    .page-rfq .rfq-lines-header .rfq-cell-actions { flex: 0 0 110px; }
}

/* 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: 12px;
        margin-bottom: 6px;
        border: 0;
        border-bottom: 1px solid var(--p-border-light);
        border-radius: 0;
        background: transparent;
    }
    .acct-list-row:hover { background: rgba(15, 15, 17, 0.02); }
    .acct-list-row .acct-list-cell-label { display: none; }
    .acct-list-cell-name { flex: 2 1 0; min-width: 0; grid-column: auto; }
}

/* 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 dashboard (page-account) ──
   Customer self-service shell — sidebar nav, glance cards, journey strip. */
.page-account .account-hero { color: #fff; }
/* 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 .acct-nav a:hover {
    background: rgba(15, 15, 17, 0.04);
    color: var(--p-text-light);
    transform: translateX(2px);
}
.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: 999px;
    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;
    padding: 104px 0 96px;
    overflow: hidden;
}
.page-brand .brand-hero__glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(200,16,46,0.20) 0%, transparent 68%);
    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; }
.page-brand .brand-hero__headline { margin-bottom: 20px; }
.page-brand .brand-hero__lede { max-width: 480px; }
.page-brand .brand-hero__actions { margin-top: 32px; }

/* ─── 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;
}
.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-top: 8px; margin-top: -8px; }
.page-brand .brand-spotlight__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.page-brand .brand-spotlight__track::-webkit-scrollbar { display: none; }

/* Spotlight card */
.page-brand .brand-scard {
    flex: 0 0 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 {
    aspect-ratio: 16 / 9;
    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__input { width: 160px; }
}

/* ─── 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-image: url('/assets/images/shop/shop-banner.jpg');
    background-size: cover;
    background-position: center;
    min-height: 598px;
    padding: 0 !important;   /* cancel the generic 96px !important padding */
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-shop .shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,15,17,0.45) 0%, rgba(15,15,17,0.65) 100%);
}
.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-banner.jpg') 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);
}

/* 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: #e8f1fb;
    color: #1969c4;
    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: #f1f7fd;
    box-shadow: inset 3px 0 0 #1969c4;
}
.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: var(--border-soft); }

/* 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: #1969c4;
    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);
}
.page-shop .shop-controls .search-wrap { flex: 1; min-width: 220px; max-width: 360px; }
.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 .result-count {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: var(--ink);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-left: auto;
    letter-spacing: 0.01em;
}
.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(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.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); }

/* 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: var(--radius);
    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 .result-count { margin-left: 0; }
    .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; }
.smd-cta:hover { background: #c20f2f !important; border-color: #c20f2f !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;
    transition: transform 0.25s ease;
}
.smd-cat-card:hover { transform: scale(1.02); }
.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);
}

/* ─────────────────────────────────────────────────────────────────────────
   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 */
.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 grid */
.b2b-home__quick-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) {
    .b2b-home__quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .b2b-home__quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .b2b-home__quick-grid { grid-template-columns: repeat(4, 1fr); }
}
.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-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;
    padding: 1px !important;
}

/* 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: var(--accent);
}
.products-area.view-grid .product-card .product-icon-btn i { line-height: 1; }

/* 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: #2a2a2e;
}

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

/* 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: 999px !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;
    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;
    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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.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 {
    background: var(--p-bg-dark);
    color: var(--p-text-dark);
    padding: 64px 0 72px;
    text-align: center;
}
.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: var(--p-text-dark);
    font-weight: 600;
    font-size: var(--p-fs-14);
    text-decoration: none;
    transition: background var(--p-transition);
}
.help-center__contact-btn:hover { background: var(--p-accent); color: #fff; }
.help-center__contact-btn--ghost {
    background: transparent;
    color: var(--p-text-light);
    border: 1px solid var(--p-border-light);
}
.help-center__contact-btn--ghost:hover { background: var(--p-bg-dark); color: #fff; }


/* ──────────────────────────────────────────────────────────────────────────
   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;
}
.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 (200 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 200px;
    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 { flex: 0 0 auto; width: 100%; overflow: hidden; }
}

/* 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;
}
.b2b-landing__filter-btn {
    flex: 0 0 auto;
    border: 0;
    background: var(--p-accent);
    color: var(--p-on-accent);
    font-size: 18px;
    padding: 0 20px;
    border-radius: var(--p-radius-sm);
    cursor: pointer;
    transition: background var(--p-transition);
}
.b2b-landing__filter-btn:hover { background: var(--p-accent-hover); }

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

/* Featured brands — block row below the layout, not a flex child */
.b2b-landing__brands { margin-top: 16px; }
.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: #eaf4fb;
    border: 1px solid #b8dcef;
    border-radius: 8px;
    color: #1f6f9c;
    max-width: 100%;
}
.product-card .product-uom-b2b i {
    font-size: 20px;
    color: #1f6f9c;
    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: #1f6f9c;
}
.product-card .product-uom-b2b__sub {
    font-size: 10px;
    color: #4f8aa8;
    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 0; 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; }

/* ── 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; }
.p-home-cat-strip__title { font-size: 18px; font-weight: 700; margin: 0; transition: opacity 0.12s ease; }
/* 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; }

/* ── B2C Home — Category image grid ────────────────────────────────────── */
.p-home-cat-grid { padding: 0 0 24px; background: #fff; }
.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); }