/* ═══════════════════════════════════════════════════════════════
   Public E-Catalogue — Refined B2B Catalogue
   Typography: Inter | Palette: Classic Cofat Blue
   ═══════════════════════════════════════════════════════════════ */

:root {
    --pc-primary: #00517b;
    --pc-primary-hover: #003f60;
    --pc-primary-muted: rgba(0, 81, 123, 0.1);
    --pc-accent: #f59e0b;
    --pc-accent-muted: rgba(245, 158, 11, 0.14);
    --pc-success: #0f9f76;
    --pc-danger: #e35d5d;
    --pc-close-bg: #ee776a;
    --pc-close-bg-hover: #de675b;
    --pc-close-border: #d85f53;
    --pc-slate-50: #f5f8fb;
    --pc-slate-100: #edf3f8;
    --pc-slate-200: #d9e4ee;
    --pc-slate-300: #bfd0de;
    --pc-slate-400: #8ea1b5;
    --pc-slate-500: #60758a;
    --pc-slate-600: #42586b;
    --pc-slate-700: #2b4355;
    --pc-slate-800: #193142;
    --pc-slate-900: #0a2233;
    --pc-radius-sm: 8px;
    --pc-radius: 12px;
    --pc-radius-lg: 16px;
    --pc-radius-xl: 20px;
    --pc-shadow-sm: 0 4px 12px rgba(10, 34, 51, 0.05);
    --pc-shadow: 0 12px 28px rgba(10, 34, 51, 0.08);
    --pc-shadow-lg: 0 18px 40px rgba(10, 34, 51, 0.12);
    --pc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

.pc-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.pc-icon-sm { width: 18px; height: 18px; }
.pc-icon-md { width: 21px; height: 21px; }
.pc-icon-lg { width: 28px; height: 28px; }
.pc-icon-xxl { width: 64px; height: 64px; }
.pc-inline-icon { margin-right: 6px; }

body,
.pc-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background:
        linear-gradient(180deg, rgba(0, 81, 123, 0.08) 0%, rgba(232, 244, 250, 0.6) 18%, transparent 42%),
        var(--pc-slate-50);
    color: var(--pc-slate-800);
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#catalogue-app {
    --pc-main-overlay-top: 50px;
    min-height: 100vh;
    position: relative;
}
#catalogue-app::before,
#catalogue-app::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
}
#catalogue-app::before {
    width: 420px;
    height: 420px;
    top: -190px;
    left: -120px;
    background: radial-gradient(circle at center, rgba(0, 81, 123, 0.16), rgba(0, 81, 123, 0));
}
#catalogue-app::after {
    width: 360px;
    height: 360px;
    top: 230px;
    right: -160px;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.13), rgba(245, 158, 11, 0));
}

/* ── Header ──────────────────────────────────────────────── */
.pc-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 81, 123, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(10, 34, 51, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.pc-header-shell {
    margin: 10px 0 12px;
    padding: 8px 16px;
    border-radius: 18px;
    border: 1px solid rgba(0, 81, 123, 0.1);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(244, 249, 255, 0.96));
}

/* Mobile-only: expand/collapse full header row (see initPcHeaderShellToggle) */
.pc-header-shell-toggle {
    display: none;
}
.pc-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    border-radius: var(--pc-radius-sm);
}
.pc-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--pc-primary);
    letter-spacing: -0.02em;
}
.pc-subtitle {
    font-size: 0.875rem;
    color: var(--pc-slate-500);
    font-weight: 500;
}
.pc-search-wrapper {
    position: relative;
    width: 280px;
}
.pc-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-slate-400);
    font-size: 20px;
}
.pc-search-input {
    width: 100%;
    padding: 10px 14px 10px 44px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
    transition: border-color var(--pc-transition), background var(--pc-transition);
}
.pc-search-input::placeholder {
    color: var(--pc-slate-400);
}
.pc-search-input:focus {
    outline: none;
    border-color: var(--pc-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-cart-btn {
    position: relative;
    background: var(--pc-primary);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: var(--pc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--pc-transition), background var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-cart-btn:hover {
    background: var(--pc-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 81, 123, 0.18);
}
.pc-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--pc-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Header layout ────────────────────────────────────────── */
.pc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
}
.pc-header-left {
    flex: 0 0 auto;
    min-width: 0;
}
.pc-header-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.pc-header-center .pc-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pc-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 12px;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
}
.pc-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pc-header-brand .pc-subtitle {
    font-size: 0.9rem;
    color: var(--pc-primary);
    font-weight: 500;
}
.pc-header-brand-meta,
.pc-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pc-header-brand-meta {
    min-width: 0;
    max-width: 100%;
}
.pc-company-name {
    word-break: break-word;
}
@media (max-width: 991px) {
    .pc-company-name {
        display: block;
        max-width: min(42vw, 12.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
    }
}
@media (min-width: 992px) {
    .pc-company-name {
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
    }
}
.pc-title-block {
    align-items: flex-start;
    text-align: left;
}
.pc-header-kicker,
.pc-title-kicker {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pc-primary);
}

/* Link validity countdown (matches e-sourcing sealed RFQ style: Xd Xh Xm Xs) */
.pc-validity-timer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--pc-slate-600);
}
.pc-validity-label {
    font-weight: 600;
    color: var(--pc-slate-500);
}
.pc-validity-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--pc-primary);
}
.pc-validity-timer.pc-validity-timer--urgent .pc-validity-value {
    color: #b45309;
}
.pc-validity-timer.pc-validity-timer--expired .pc-validity-label,
.pc-validity-timer.pc-validity-timer--expired .pc-validity-value {
    color: #dc2626;
}

/* Promo / timer strip: background spans full shell width; .pc-header-validity-bar-inner matches header row inset */
.pc-header-validity-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    flex-shrink: 0;
    padding: 8px 0 10px;
    border-top: 1px solid rgba(0, 81, 123, 0.1);
    background: linear-gradient(180deg, rgba(0, 81, 123, 0.06), rgba(0, 81, 123, 0.02));
    box-sizing: border-box;
    overflow: visible;
}

/* Full width of the shell card: cancel shell horizontal padding; inner restores alignment with header row */
.pc-header-shell > .pc-header-validity-bar {
    margin-inline: -18px;
    width: calc(100% + 36px);
    max-width: none;
    box-sizing: border-box;
}

.pc-header-shell > .pc-header-validity-bar .pc-header-validity-bar-inner {
    padding-inline: 18px;
    box-sizing: border-box;
}

.pc-header-validity-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .pc-header-validity-bar--promo-and-timer .pc-header-validity-bar-inner {
        flex-wrap: nowrap;
    }
}
.pc-header-promo-inline {
    flex: 1 1 200px;
    min-width: 0;
    text-align: start;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--pc-slate-700);
    align-self: center;
}
.pc-header-promo-fab-col {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-header-promo-fab-col--desktop {
    display: flex;
}
.pc-validity-mobile-triggers {
    display: none;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}
.pc-validity-mobile-btn {
    flex: 1 1 140px;
    min-height: 44px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0, 81, 123, 0.18);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(10, 34, 51, 0.08);
    color: var(--pc-primary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pc-validity-mobile-btn:hover {
    background: #fff;
    box-shadow: 0 6px 18px rgba(10, 34, 51, 0.12);
}
.pc-validity-mobile-btn:focus-visible {
    outline: 2px solid rgba(13, 92, 132, 0.35);
    outline-offset: 3px;
}
.pc-validity-mobile-btn__ico {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.pc-validity-mobile-btn__label {
    line-height: 1.2;
    text-align: center;
}
.pc-validity-mobile-btn--promo {
    position: relative;
    background: linear-gradient(135deg, #ff7a18 0%, #ff3d6e 100%);
    border-color: rgba(255, 61, 110, 0.45);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 61, 110, 0.28);
}
.pc-validity-mobile-btn--promo:hover {
    background: linear-gradient(135deg, #ff8a32 0%, #ff5582 100%);
    box-shadow: 0 8px 22px rgba(255, 61, 110, 0.36);
    transform: translateY(-1px);
}
.pc-validity-mobile-btn--promo .pc-validity-mobile-btn__label {
    color: #fff;
}
.pc-validity-mobile-btn__ico--promo {
    color: #fff;
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.pc-validity-mobile-btn__pulse {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffe14a;
    box-shadow: 0 0 0 0 rgba(255, 225, 74, 0.85);
    animation: pcPromoPulse 1.6s ease-out infinite;
}
@keyframes pcPromoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 225, 74, 0.85); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 225, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 225, 74, 0); }
}
.pc-validity-timer-compact {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pc-primary);
    max-width: 56vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .pc-validity-mobile-triggers {
        display: flex;
    }
}
@media (min-width: 768px) {
    .pc-validity-mobile-triggers {
        display: none !important;
    }
    .pc-validity-collapsible-panel {
        display: block !important;
    }
}
@media (max-width: 767px) {
    .pc-validity-collapsible-panel:not(.is-open) {
        display: none !important;
    }
}
.pc-validity-promo-panel {
    flex: 1 1 0;
    min-width: 0;
}
.pc-validity-timer-panel {
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .pc-validity-promo-panel,
    .pc-validity-timer-panel {
        flex: 0 0 auto;
        width: 100%;
        align-self: stretch;
    }
}
@media (min-width: 768px) {
    .pc-validity-timer-panel {
        margin-inline-start: auto;
    }
}
.pc-header-promo-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-slate-500);
    margin-bottom: 4px;
}
.pc-header-promo-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.pc-header-promo-line + .pc-header-promo-line {
    margin-top: 4px;
}
.pc-header-promo-line .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1;
}
.pc-header-promo-line--ok {
    color: var(--pc-success);
    font-weight: 600;
}
.pc-header-promo-line--progress {
    color: var(--pc-primary);
    font-weight: 600;
}
.pc-header-promo-line--muted {
    color: var(--pc-slate-600);
}
.pc-header-timer-col {
    flex: 0 0 auto;
    margin-inline-start: auto;
    align-self: center;
}
.pc-header-validity-bar .pc-header-timer-col .pc-validity-timer {
    margin-top: 0;
    justify-content: center;
    text-align: center;
}
@media (min-width: 768px) {
    .pc-header-validity-bar .pc-header-timer-col .pc-validity-timer {
        justify-content: flex-end;
        text-align: right;
    }
}
html[dir='rtl'] .pc-header-validity-bar .pc-header-timer-col .pc-validity-timer {
    text-align: right;
}
@media (min-width: 768px) {
    html[dir='rtl'] .pc-header-validity-bar .pc-header-timer-col .pc-validity-timer {
        justify-content: flex-start;
        text-align: left;
    }
}
@media (max-width: 767px) {
    .pc-header-timer-col {
        margin-inline-start: 0;
        width: 100%;
    }
    .pc-header-promo-inline {
        flex: 1 1 100%;
    }
    .pc-header-promo-fab-col--desktop {
        display: none !important;
    }
    .pc-header-validity-bar-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
    }
}

[dir="rtl"] .pc-title-block {
    align-items: flex-end;
    text-align: right;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.pc-sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 22px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    border-radius: 22px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    box-shadow: var(--pc-shadow);
}
.pc-filter-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pc-slate-100);
}
.pc-filter-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pc-filter-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pc-slate-500);
    margin-bottom: 10px;
}
.pc-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.pc-filter-toggle .pc-filter-title {
    margin-bottom: 0;
}
.pc-filter-toggle-icon {
    color: var(--pc-slate-500);
    transition: transform var(--pc-transition), color var(--pc-transition);
}
.pc-filter-toggle[aria-expanded="true"] .pc-filter-toggle-icon {
    transform: rotate(180deg);
}
.pc-filter-toggle:hover .pc-filter-toggle-icon,
.pc-filter-toggle:focus-visible .pc-filter-toggle-icon {
    color: var(--pc-primary);
}
.pc-filter-toggle:focus-visible {
    outline: 2px solid rgba(13, 92, 132, 0.28);
    outline-offset: 4px;
    border-radius: 10px;
}
.pc-filter-list { list-style: none; padding: 0; margin: 0; }
.pc-filter-list[hidden] { display: none !important; }
.pc-filter-list li { margin-bottom: 4px; }
.pc-filter-link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-slate-700);
    text-decoration: none;
    transition: all var(--pc-transition);
}
.pc-filter-link:hover {
    background: #eef6fb;
    color: var(--pc-slate-800);
}
.pc-filter-link.active {
    background: var(--pc-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(0, 81, 123, 0.16);
    transform: translateX(1px);
}
.pc-price-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
}
.pc-price-input:focus {
    outline: none;
    border-color: var(--pc-primary);
}
.pc-price-range span {
    color: var(--pc-slate-500);
    font-weight: 500;
}
.pc-apply-price-btn {
    background: var(--pc-primary);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
    box-shadow: 0 10px 20px rgba(0, 81, 123, 0.14);
}
.pc-apply-price-btn:hover {
    background: var(--pc-primary-hover);
    transform: translateY(-1px);
}
.pc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--pc-slate-600);
}
.pc-clear-filters {
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    padding: 10px 16px;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-slate-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    transition: all var(--pc-transition);
}
.pc-clear-filters:hover {
    background: #eef4f9;
    border-color: rgba(0, 81, 123, 0.2);
    color: var(--pc-primary);
}
.pc-clear-filters-icon {
    color: var(--pc-slate-500);
}

/* ── Toolbar & results ───────────────────────────────────── */
.pc-results-info {
    font-size: 0.875rem;
    color: var(--pc-slate-500);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}
.pc-catalogue-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #C9D2DD transparent;
    padding: 4px;
    margin-inline-start: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.pc-catalogue-chips::-webkit-scrollbar { height: 6px; }
.pc-catalogue-chips::-webkit-scrollbar-track { background: transparent; }
.pc-catalogue-chips::-webkit-scrollbar-thumb { background: #C9D2DD; border-radius: 999px; }
.pc-catalogue-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 80px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    color: var(--pc-slate-900, #0F172A);
    font-size: 0.8rem;
    font-weight: 600;
    scroll-snap-align: start;
    transition: color .15s;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.25;
    text-align: center;
    border-radius: 14px;
}
.pc-catalogue-chip:focus {
    outline: none;
}
.pc-catalogue-chip:focus-visible {
    outline: 2px dashed rgba(31, 78, 121, .45);
    outline-offset: 3px;
}
.pc-catalogue-chip:hover .pc-catalogue-chip-thumb {
    border-color: var(--pc-primary);
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
}
.pc-catalogue-chip.is-active {
    color: var(--pc-primary);
}
.pc-catalogue-chip.is-active .pc-catalogue-chip-thumb {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .18);
}
.pc-catalogue-chip--all .pc-catalogue-chip-thumb {
    background: var(--pc-primary);
    color: #FFFFFF;
    font-size: 14px;
    border-color: var(--pc-primary);
}
.pc-catalogue-chip--all.is-active .pc-catalogue-chip-thumb {
    background: var(--pc-primary);
    color: #FFFFFF;
}
.pc-catalogue-chip-thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #F4F6FA;
    border: 2px solid #E5E9F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1F4E79;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    transition: border-color .15s, box-shadow .15s;
}
.pc-catalogue-chip-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-word;
}
@media (max-width: 576px) {
    .pc-results-info { gap: 8px; }
    .pc-catalogue-chip { font-size: 0.72rem; width: 64px; }
    .pc-catalogue-chip-thumb { width: 48px; height: 48px; font-size: 18px; }
}
.pc-results-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8f4fa;
    color: var(--pc-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pc-sort-select {
    padding: 10px 14px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    background: #fff;
    color: var(--pc-slate-800);
    cursor: pointer;
    transition: border-color var(--pc-transition);
}
.pc-sort-select:hover,
.pc-sort-select:focus {
    border-color: var(--pc-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}

/* ── Product Card ────────────────────────────────────────── */
.pc-product-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0, 81, 123, 0.1);
    overflow: hidden;
    transition: box-shadow var(--pc-transition), transform var(--pc-transition), border-color var(--pc-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(10, 34, 51, 0.05);
}
/* Markup order: .pc-product-title, .pc-product-img-wrapper, .pc-product-catalogue, .pc-product-body */
.pc-product-card > .pc-product-img-wrapper {
    order: 1;
}
.pc-product-card > .pc-product-catalogue {
    order: 2;
}
.pc-product-card > .pc-product-title {
    order: 3;
}
.pc-product-card > .pc-product-body {
    order: 4;
}
.pc-product-catalogue {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pc-primary, #00517b);
    background: rgba(0, 81, 123, 0.06);
    padding: 6px 16px;
    margin: 0;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .pc-product-catalogue { font-size: 0.65rem; padding: 5px 10px; }
}
.pc-product-card:hover {
    box-shadow: var(--pc-shadow-lg);
    transform: translateY(-3px);
    border-color: rgba(0, 81, 123, 0.18);
}
/* NOTE: `.pc-product-img-wrapper`, `.pc-product-img` and
   `.pc-product-card:hover .pc-product-img` used to ALSO be declared here. They were
   duplicated verbatim further down the file, and because that copy is later with the
   same specificity it always won — every edit made here was silently dead. The single
   authoritative block now lives in the "Screenshot-inspired catalogue refresh" section
   (search for "AUTHORITATIVE product-media rules"). Do not re-declare those selectors
   here; edit the authoritative block instead. */
.pc-discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: linear-gradient(135deg, #e53e3e, #f6ad55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
}
.pc-product-img-wrapper:has(.pc-discount-badge) .pc-product-promo-compact {
    top: 44px;
}
.pc-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}
.pc-stock-in { background: #d1fae5; color: #065f46; }
.pc-stock-out { background: #fee2e2; color: #991b1b; }
.pc-product-body {
    padding: 12px 16px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: start;
    gap: 9px;
}
.pc-product-card > .pc-product-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--pc-slate-900);
    line-height: 1.4;
    text-align: start !important;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 16px 6px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pc-product-sku {
    font-size: 0.75rem;
    color: var(--pc-slate-400);
    margin: 0;
}
.pc-product-pricing {
    margin-top: auto;
}
.pc-product-pricing .pc-product-price-row {
    margin-top: 0;
}
.pc-product-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
    row-gap: 2px;
}
.pc-product-price-row--discount {
    gap: 6px;
    align-items: center;
}
.pc-product-price-unit {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pc-slate-500);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.2;
}
.pc-product-tax-line {
    font-size: 0.6875rem;
    color: var(--pc-slate-400);
    margin: 2px 0 0;
    width: 100%;
    line-height: 1.3;
}
.pc-product-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pc-primary);
    letter-spacing: -0.02em;
}
.pc-product-price--discounted {
    color: var(--pc-danger);
    font-size: 1.125rem;
}
.pc-product-old-price {
    font-size: 0.8125rem;
    color: var(--pc-slate-400);
    text-decoration: line-through;
}
.pc-product-discount-tag {
    display: inline-block;
    background: var(--pc-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}
/* Grid: optional UOM | qty | add — uses horizontal space better than a stacked full-width unit row */
.pc-product-actions {
    margin-top: 6px;
}
.pc-product-actions-grid {
    display: grid;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
}
.pc-product-actions-grid--has-uom {
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1.25fr);
}
.pc-product-actions-uom {
    min-width: 0;
}
.pc-product-actions-qty {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
}
.pc-grid-qty-stepper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* Product grid quantity: numeric input only (no +/- buttons; see public-catalogue.js) */
.pc-product-actions-qty .pc-grid-qty-stepper .pc-qty-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 52px;
    max-width: 88px;
    margin: 0;
    -moz-appearance: textfield;
}
.pc-product-actions-qty .pc-grid-qty-stepper .pc-qty-input::-webkit-outer-spin-button,
.pc-product-actions-qty .pc-grid-qty-stepper .pc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pc-product-actions-qty .pc-qty-input {
    width: 100%;
    min-width: 52px;
    max-width: 72px;
    margin: 0 auto;
}
.pc-product-actions-add {
    min-width: 0;
}
.pc-product-actions-add .pc-add-btn {
    width: 100%;
}
.pc-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}
.pc-qty-input {
    width: 64px;
    padding: 10px 8px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: center;
    font-weight: 500;
    background: #fff;
}
.pc-qty-input:focus {
    outline: none;
    border-color: var(--pc-primary);
}
.pc-add-btn {
    flex: 1;
    background: #FFD814;
    color: #0F1111;
    border: 1px solid #FCD200;
    padding: 10px 0;
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
    position: relative;
}
.pc-add-btn-qty-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 2;
}
.pc-add-btn .pc-icon,
.pc-add-btn svg {
    color: #0F1111;
    fill: currentColor;
    stroke: currentColor;
}
.pc-add-btn:hover {
    background: #F7CA00;
    transform: translateY(-1px);
}
.pc-add-btn.added {
    background: var(--pc-success);
}
/* NOTE: `.pc-add-btn--oos` and `.pc-add-btn--oos:hover` used to declare the muted
   out-of-stock appearance HERE. `.pc-add-btn` re-declares `background`/`color`/
   `border` further down the file at the SAME specificity, so the later CTA-yellow
   rule always won: the out-of-stock button rendered as a bright yellow call to
   action — the strongest in-stock cue on an out-of-stock card — and every edit made
   here was silently dead. The single authoritative block now sits immediately AFTER
   that `.pc-add-btn` block (search for "AUTHORITATIVE out-of-stock Add button").
   Do not re-declare `.pc-add-btn--oos` here; edit the authoritative block instead. */

/* ── Out of Stock Card ─────────────────────────────────── */
.pc-product-card--oos {
    position: relative;
    background: #e5e7eb !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
.pc-product-card--oos:hover {
    background: #d8dde3 !important;
    transform: none !important;
}
.pc-product-card--oos .pc-product-title,
.pc-product-card--oos .pc-product-body {
    color: #6b7280;
}

/* ── Out-of-stock media treatment ──────────────────────────────────────────
 * ROBUST REGARDLESS OF WHAT THE IMAGE COVERS — this is the whole point of the
 * rule below, do not fold it back into a wrapper `background`.
 *
 * The dimming used to be a grey wrapper BACKGROUND (#d1d5db) plus
 * grayscale + opacity. That only ever worked because a non-square source is
 * letterboxed inside the 1:1 slot and left the background partly visible.
 * Once product images are normalized to a 1:1 square with white padding baked
 * INTO the file, the image covers the slot edge to edge and that background is
 * 100% occluded — it never renders at all. The media area then reads BRIGHTER
 * for a treated image than for an untreated one, i.e. the treatment gets weaker
 * exactly as image quality improves, and an out-of-stock product starts to read
 * as in-stock at a glance. No fill colour can fix it: any fill light enough for
 * the ~95% in-stock case reproduces it, because the fill is not what renders.
 *
 * Measured in a headless render of these exact rules (media padding, sRGB):
 *              BEFORE          AFTER
 *   treated    rgb(151,152,154) rgb(131,133,134)   <- was 18 levels too bright
 *   untreated  rgb(133,134,136) rgb(131,133,134)   <- essentially unchanged
 *   card body  rgb(229,231,235) rgb(229,231,235)
 * (Both figures already include `.pc-oos-overlay`'s own rgba(15,23,42,0.5)
 * scrim, which covers the whole slot — that is why the absolute values are much
 * darker than a pen-and-paper composite of the wrapper alone would suggest.)
 *
 * Fix: the dimming is a TINT LAYER ABOVE the media (::after), never a
 * background behind it. It lands identically on baked-in white padding, on a
 * letterboxed gap, on the no-image fallback icon, on a video poster and on the
 * image content itself. The wrapper base is white so a treated image's baked
 * white padding and an untreated image's letterbox bars start from the SAME
 * value and finish at the SAME rendered grey — the two states are now
 * pixel-identical, and both must stay right forever, because remote-URL images,
 * videos, animated GIFs and AVIF can never be normalized.
 * ────────────────────────────────────────────────────────────────────────── */
.pc-product-card--oos .pc-product-img-wrapper {
    background: #fff !important;
    filter: grayscale(0.85);
    opacity: 0.85;
}
.pc-product-card--oos .pc-product-img-wrapper::after {
    content: '';
    position: absolute;
    /* Symmetric on all four sides — mirror-safe, needs no [dir="rtl"] variant. */
    inset: 0;
    border-radius: inherit;
    background: rgba(15, 23, 42, 0.2);
    /* The wrapper is clickable (`.pc-product-img-wrapper { cursor: pointer }`,
       handlers in public/js/public-catalogue.js) — never intercept that. */
    pointer-events: none;
    /* Above the media, below .pc-oos-overlay (2), the out-of-stock video
       overlay/badge (3) and .pc-discount-badge (5). */
    z-index: 1;
}
/* Badges are informational LABELS, not media: keep them above the tint so the
   out-of-stock and promo pills keep their contrast against the dimming layer. */
.pc-product-card--oos .pc-stock-badge,
.pc-product-card--oos .pc-product-promo-compact {
    z-index: 2;
}
.pc-oos-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 2;
}
.pc-oos-overlay .pc-icon { opacity: 0.9; }
.pc-product-price--oos {
    color: var(--pc-slate-400) !important;
    text-decoration: line-through;
}
/* Out-of-stock cards never autoplay. The play affordance demotes from a centred
   overlay to a corner mark so it never stacks on top of the centred out-of-stock
   lockup — one affordance, one message. Purely CSS: no markup branch, no JS. */
.pc-product-card--oos .pc-product-video-overlay {
    background: none;
    inset: auto 8px 8px auto;
    inset-inline-end: 8px;
    inset-block-end: 8px;
    inset-block-start: auto;
    inset-inline-start: auto;
    z-index: 3;
}
.pc-product-card--oos .pc-product-video-overlay .pc-icon {
    width: 32px;
    height: 32px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
}
.pc-product-card--oos .pc-product-video-badge {
    z-index: 3;
}

/* ── Clickable image/title ───────────────────────────────── */
.pc-product-img-wrapper { cursor: pointer; }
.pc-product-title {
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
}
.pc-product-title:hover { color: var(--pc-primary); }

/* ── Load More ───────────────────────────────────────────── */
.pc-load-more-btn {
    background: #fff;
    border: 1px solid var(--pc-slate-200);
    padding: 12px 36px;
    border-radius: var(--pc-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--pc-primary);
    cursor: pointer;
    transition: all var(--pc-transition);
}
.pc-load-more-btn:hover {
    background: var(--pc-primary-muted);
    border-color: var(--pc-primary);
}

/* ── Cart Drawer ─────────────────────────────────────────── */
.pc-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.pc-cart-overlay.open {
    opacity: 1;
    visibility: visible;
}
.pc-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
}
.pc-cart-drawer.open {
    transform: translateX(0);
}
.pc-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--pc-slate-200);
}
.pc-cart-header h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pc-slate-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pc-cart-header-icon {
    color: var(--pc-primary);
}
.pc-cart-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--pc-slate-500);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pc-radius-sm);
    transition: background var(--pc-transition), color var(--pc-transition);
}
.pc-cart-close:hover {
    background: var(--pc-slate-100);
    color: var(--pc-slate-800);
}
.pc-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.pc-cart-footer {
    border-top: 1px solid var(--pc-slate-200);
    padding: 20px 24px;
}
/* Promotion banners */
/* Quantity discount deal on product tiles (matches campaign “badge on product” copy) */
.pc-promo-product-badges {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}
.pc-promo-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    line-height: 1.25;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.pc-promo-product-badge .material-symbols-outlined {
    font-size: 15px;
    flex-shrink: 0;
}
.pc-promo-product-badge--gift {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
.pc-promo-product-badge--invoice {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.pc-promo-product-badge--eligible {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.35);
}
/* Compact promo: free units earned (grid + cart reference) */
.pc-product-promo-compact {
    position: absolute;
    top: 8px;
    right: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 7px 4px 5px;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.95);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.pc-product-promo-compact .material-symbols-outlined {
    font-size: 15px;
    opacity: 0.95;
}
.pc-product-promo-compact__n {
    letter-spacing: -0.02em;
}
.pc-cart-item-price-meta {
    margin-top: 4px;
}
.pc-cart-item-price-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pc-cart-item-price-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-wrap: nowrap;
}
.pc-cart-item-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8125rem;
}
.pc-cart-item-price-row--unit {
    align-items: center;
}
.pc-cart-item-unit-with-qty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
}
.pc-cart-item-unit-with-qty .pc-cart-item-unit-price-wrap {
    margin-inline-end: 0;
    min-width: 0;
}
.pc-cart-item-unit-price-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    max-width: 100%;
}
.pc-cart-item-unit-price-stack-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}
html[dir="rtl"] .pc-cart-item-unit-price-stack-inner {
    align-items: flex-end;
}
.pc-cart-item-unit-price-stack-inner .pc-cart-item-unit-price-current {
    line-height: 1.2;
}
.pc-cart-item-unit-price-stack-inner .pc-cart-item-unit-price-old {
    font-size: 0.6875rem;
    line-height: 1.2;
}
.pc-cart-price-per {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pc-slate-500);
    white-space: nowrap;
}
.pc-cart-item-unit-price-old {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pc-slate-400);
    text-decoration: line-through;
}
.pc-cart-item-unit-with-qty .pc-cart-item-unit-price-current,
.pc-cart-item-unit-with-qty .pc-cart-item-unit-price-old {
    text-align: start;
}
html[dir="rtl"] .pc-cart-item-unit-with-qty .pc-cart-item-unit-price-current,
html[dir="rtl"] .pc-cart-item-unit-with-qty .pc-cart-item-unit-price-old {
    text-align: end;
}
.pc-cart-item-qty-inline {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.pc-cart-item-unit-price,
.pc-cart-item-unit-price-current {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pc-primary);
}
.pc-cart-item-extra-line {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #047857;
}
.pc-cart-item-extra-line .pc-cart-item-extra-ico {
    font-size: 15px;
    opacity: 0.9;
}
.pc-promo-fab {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.38);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pc-promo-fab-attn 2.4s ease-in-out infinite;
}
.pc-promo-fab__ico {
    font-size: 26px;
    line-height: 1;
    display: block;
    animation: pc-promo-fab-ico 2.4s ease-in-out infinite;
}
.pc-promo-fab:hover {
    animation: none;
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(5, 150, 105, 0.5);
}
.pc-promo-fab:hover .pc-promo-fab__ico {
    animation: none;
}
@keyframes pc-promo-fab-attn {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 12px rgba(5, 150, 105, 0.38);
    }
    35% {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 22px rgba(5, 150, 105, 0.48);
    }
    55% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 12px rgba(5, 150, 105, 0.38);
    }
}
@keyframes pc-promo-fab-ico {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pc-promo-fab,
    .pc-promo-fab__ico {
        animation: none;
    }
}
@media (max-width: 768px) {
    .pc-promo-fab {
        width: 44px;
        height: 44px;
    }
    .pc-promo-fab__ico {
        font-size: 24px;
    }
}
.pc-promo-fab--desktop {
    position: relative;
    z-index: 2;
}
.pc-promo-fab--mobile-float {
    position: fixed;
    z-index: 1050;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    left: auto;
    top: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.pc-promo-fab--mobile-float:hover {
    transform: scale(1.06);
}
.pc-promo-fab--mobile-float.pc-promo-fab--dragging {
    cursor: grabbing;
    animation: none !important;
    transform: none;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45);
}
@media (min-width: 768px) {
    .pc-promo-fab--mobile-float {
        display: none !important;
    }
}
/* Promotion reward picker */
.pc-promo-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(10, 34, 51, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: pc-promo-reward-overlay-in 0.22s ease;
}
@keyframes pc-promo-reward-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.pc-promo-reward-panel {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, var(--pc-slate-50) 100%);
    border: 1px solid var(--pc-slate-200);
    border-radius: 20px 20px 0 0;
    box-shadow:
        0 -8px 40px rgba(10, 34, 51, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.85) inset;
    max-height: min(85vh, 640px);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pc-promo-reward-panel-up 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pc-promo-reward-panel-up {
    from {
        transform: translateY(110%);
        opacity: 0.92;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.pc-promo-reward-handle {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--pc-slate-300);
    margin: 8px auto 4px;
    flex-shrink: 0;
}
.pc-promo-reward-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--pc-close-bg);
    border: 1px solid var(--pc-close-border);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(238, 119, 106, 0.35);
    transition: background var(--pc-transition), border-color var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-promo-reward-close:hover {
    background: var(--pc-close-bg-hover);
    border-color: var(--pc-close-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(238, 119, 106, 0.42);
}
.pc-promo-reward-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(238, 119, 106, 0.28), 0 8px 22px rgba(238, 119, 106, 0.35);
}
.pc-promo-reward-close .material-symbols-outlined {
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.pc-promo-reward-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 24px 20px;
    margin: 0;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(0, 81, 123, 0.07) 0%, var(--pc-slate-50) 100%);
    border-bottom: 1px solid var(--pc-slate-200);
    flex-shrink: 0;
}
.pc-promo-reward-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pc-primary) 0%, #0a6a9e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 81, 123, 0.28);
}
.pc-promo-reward-header-icon .material-symbols-outlined {
    font-size: 26px;
    line-height: 1;
}
.pc-promo-reward-header-copy {
    min-width: 0;
    padding-top: 2px;
    padding-right: 52px;
}
.pc-promo-reward-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pc-slate-900);
    line-height: 1.2;
}
.pc-promo-reward-lead {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pc-slate-600);
    font-weight: 500;
}
.pc-promo-reward-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 14px;
    padding: 20px 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pc-promo-reward-card {
    border: 1px solid rgba(0, 81, 123, 0.1);
    border-radius: 16px;
    padding: 0;
    text-align: center;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.pc-promo-reward-card:hover {
    border-color: rgba(0, 81, 123, 0.28);
    box-shadow: 0 12px 28px rgba(10, 34, 51, 0.1);
    transform: translateY(-2px);
}
.pc-promo-reward-card-media {
    padding: 14px 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, var(--pc-slate-50) 0%, #fff 100%);
}
.pc-promo-reward-img {
    width: 100%;
    max-width: 108px;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 0;
}
.pc-promo-reward-img-placeholder {
    width: 100%;
    max-width: 108px;
    aspect-ratio: 1;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
}
.pc-promo-reward-img-placeholder .material-symbols-outlined {
    font-size: 36px;
    opacity: 0.85;
}
.pc-promo-reward-name {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
    padding: 12px 12px 10px;
    color: var(--pc-slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    min-height: 2.7em;
    text-align: center;
}
.pc-promo-reward-add {
    width: 100%;
    margin: 0;
    margin-top: auto;
    background: linear-gradient(180deg, var(--pc-primary) 0%, var(--pc-primary-hover) 100%);
    color: #fff;
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 12px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.02em;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pc-promo-reward-add:hover {
    filter: brightness(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.pc-promo-reward-add:active {
    transform: scale(0.98);
}
.pc-promo-reward-add-ico {
    font-size: 18px !important;
    line-height: 1 !important;
}
.pc-promo-reward-add:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.65;
    background: var(--pc-slate-400, #94a3b8) !important;
    box-shadow: none;
}
.pc-promo-reward-add:disabled:hover {
    filter: grayscale(0.35);
    transform: none;
}
.pc-promo-reward-card-actions {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 12px 12px;
}
.pc-promo-reward-in-cart-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.pc-promo-reward-remove {
    width: 100%;
    margin: 0;
    background: #fff;
    color: var(--pc-primary, #00517b);
    border: 1px solid rgba(0, 81, 123, 0.25);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 10px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.pc-promo-reward-remove:hover {
    background: #f0f9ff;
    border-color: rgba(0, 81, 123, 0.45);
}
.pc-promo-reward-card--in-cart {
    border-color: rgba(5, 150, 105, 0.45);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
}
@media (min-width: 769px) {
    .pc-promo-reward-overlay {
        align-items: center;
        padding: 24px;
        animation: pc-promo-reward-overlay-in 0.25s ease;
    }
    .pc-promo-reward-panel {
        border-radius: 24px;
        max-height: min(88vh, 680px);
        animation: pc-promo-reward-panel-center 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow:
            var(--pc-shadow-lg),
            0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    }
    @keyframes pc-promo-reward-panel-center {
        from {
            transform: translateY(16px) scale(0.96);
            opacity: 0;
        }
        to {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }
    .pc-promo-reward-handle {
        display: none;
    }
    .pc-promo-reward-header {
        padding-top: 20px;
        border-radius: 24px 24px 0 0;
    }
    button.pc-promo-reward-close {
        top: 14px;
        right: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pc-promo-reward-overlay,
    .pc-promo-reward-panel {
        animation: none;
    }
    .pc-promo-reward-card:hover {
        transform: none;
    }
}
html[dir='rtl'] .pc-promo-reward-close {
    right: auto;
    left: 12px;
}
html[dir='rtl'] .pc-promo-reward-header-copy {
    padding-right: 0;
    padding-left: 52px;
}
@media (min-width: 769px) {
    html[dir='rtl'] button.pc-promo-reward-close {
        right: auto;
        left: 16px;
    }
}
.pc-cart-price-summary {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pc-slate-100);
}
.pc-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--pc-slate-600);
    margin-bottom: 6px;
}
.pc-cart-summary-row strong {
    color: var(--pc-slate-800);
    font-weight: 600;
}
.pc-cart-summary-row--discount .pc-cart-summary-value {
    color: #059669;
    font-weight: 600;
}
.pc-cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--pc-slate-800);
}
.pc-cart-subtotal--grand {
    margin-top: 4px;
    margin-bottom: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--pc-slate-100);
    font-size: 1.05rem;
    font-weight: 700;
}
.pc-cart-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pc-slate-100);
    align-items: flex-start;
}
.pc-cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: var(--pc-radius-sm);
    object-fit: contain;
    background: var(--pc-slate-50);
    flex-shrink: 0;
}
.pc-cart-item-img-fallback {
    color: var(--pc-slate-400);
}
.pc-cart-item-info { flex: 1; min-width: 0; }
.pc-cart-item-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pc-cart-item-title-row .pc-cart-item-title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}
.pc-cart-item-title-row .pc-cart-item-extra-line {
    flex-shrink: 0;
    align-self: flex-start;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.25;
}
.pc-cart-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--pc-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: default;
}
.pc-cart-item-sku {
    font-size: 0.75rem;
    color: var(--pc-slate-400);
}
.pc-cart-item-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pc-primary);
}
/* Legacy single-line cart price (older markup); unit row uses .pc-cart-item-unit-price */
.pc-cart-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.pc-cart-qty-val {
    min-width: 32px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
}
.pc-cart-qty-input {
    width: 96px;
    min-width: 88px;
    height: 36px;
    padding: 4px 10px;
    font-size: 0.95rem;
    border: 1px solid var(--pc-slate-200);
    border-radius: 6px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: var(--pc-slate-800);
    -moz-appearance: textfield;
}
.pc-cart-qty-input::-webkit-outer-spin-button,
.pc-cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pc-cart-qty-input:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 2px rgba(0, 81, 123, 0.12);
}
.pc-product-price--muted,
.pc-detail-price--muted {
    color: var(--pc-slate-400);
    font-weight: 500;
}
.pc-cart-remove {
    cursor: pointer;
    flex-shrink: 0;
}
.pc-cart-remove--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--pc-slate-200);
    border-radius: 6px;
    background: #fff;
    color: var(--pc-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--pc-transition), border-color var(--pc-transition), background-color 0.15s;
}
.pc-cart-remove--icon .pc-icon {
    width: 16px;
    height: 16px;
}
.pc-cart-remove--icon:hover {
    border-color: var(--pc-danger);
    background: #fef2f2;
    color: #dc2626;
}
.pc-cart-item-controls .pc-cart-remove--icon {
    margin-left: auto;
}
.pc-proposed-price-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--pc-slate-200);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    margin-top: 6px;
}
.pc-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pc-slate-600);
}
.pc-propose-price-highlight {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1.5px solid #3b82f6;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
}
.pc-propose-price-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 4px;
}
.pc-propose-price-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pc-propose-currency {
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}
.pc-proposed-price-input--prominent {
    padding: 6px 10px;
    border: 1.5px solid #3b82f6;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    background: #fff;
    margin-top: 0;
}
.pc-proposed-price-input--prominent:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.pc-form-label { font-size: .8rem; font-weight: 500; color: var(--pc-gray-600); }

/* ── Checkout buttons ────────────────────────────────────── */
.pc-btn-quotation {
    background: var(--pc-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--pc-radius);
    border: none;
    transition: background var(--pc-transition);
}
.pc-btn-quotation:hover {
    background: var(--pc-primary-hover);
    color: #fff;
}
.pc-btn-order {
    background: var(--pc-success);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--pc-radius);
    border: none;
    transition: background var(--pc-transition);
}
.pc-btn-order:hover {
    background: #047857;
    color: #fff;
}
.pc-cart-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.pc-cart-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Product Detail Modal ────────────────────────────────── */
.pc-detail-modal {
    border: none;
    border-radius: var(--pc-radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
}
.pc-detail-modal-body {
    padding: 0;
}
.pc-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.pc-confirm-modal-content {
    border: none;
    border-radius: var(--pc-radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.pc-confirm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pc-confirm-close {
    flex: 0 0 auto;
}

/* Skeleton */
.pc-detail-skeleton { padding: 0; }
.pc-skel-img {
    width: 100%;
    /* NOTE: moved 100% -> 75% (1:1 -> 4:3) in lockstep with `.pc-detail-main-img-wrap`
       below. This is the LOADING placeholder for that exact slot, so its ratio is not
       an independent choice: if the two ever diverge, the modal visibly jumps by the
       difference at the moment the image finishes decoding. Change both or neither.
       The ≥768px block overrides BOTH to a viewport-relative height for the same
       reason — if you touch one there, touch the other in the same edit. */
    padding-top: 75%;
    background: linear-gradient(110deg, var(--pc-slate-100) 30%, var(--pc-slate-50) 50%, var(--pc-slate-100) 70%);
    background-size: 200% 100%;
    animation: pcShimmer 1.5s infinite;
    border-radius: var(--pc-radius) 0 0 var(--pc-radius);
}
.pc-skel-line {
    border-radius: 6px;
    background: linear-gradient(110deg, var(--pc-slate-100) 30%, var(--pc-slate-50) 50%, var(--pc-slate-100) 70%);
    background-size: 200% 100%;
    animation: pcShimmer 1.5s infinite;
}
@keyframes pcShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Gallery */
.pc-detail-gallery {
    background: var(--pc-slate-50);
    display: flex;
    flex-direction: column;
}
/* ── AUTHORITATIVE detail-modal viewer geometry ──────────────────────────────
 * This is the ONLY place `.pc-detail-main-img-wrap` ratio is declared at base
 * specificity. TWO media blocks further down replace it with an explicit
 * viewport-relative height: the ≤767px one (see the NOTE there) and the
 * ≥768px one under "AUTHORITATIVE detail-modal DIALOG WIDTH", which trades the
 * ratio for height on purpose so the desktop viewer is not capped at
 * `0.75 x column width`. Keep ratio declarations for this selector HERE.
 *
 * NOTE: moved `padding-top: 100%` -> `75%` (1:1 -> 4:3). Per BR-16 of
 * SPEC-product-image-normalization.md the public catalogue reads the NORMALIZED
 * DERIVATIVE, so the image this viewer displays is already 4:3. A 1:1 viewer
 * letterboxed every single one of them by ~12.5% top and bottom for no reason —
 * dead space the whole normalization workstream exists to remove. This value is
 * in LOCKSTEP with three things: the card slot (`.pc-product-img-wrapper`,
 * `padding-top: 75%`), the skeleton (`.pc-skel-img`, same 75%), and the
 * server-side normalization canvas. Changing one without the others
 * reintroduces letterboxing.
 *
 * `object-fit: contain` on `.pc-detail-main-img` is retained deliberately: a
 * detail VIEWER must never crop. A non-4:3 source (a legacy un-normalized
 * original, or a 16:9 banner) still letterboxes here rather than losing pixels —
 * it just letterboxes far less than it did against a square.
 * ─────────────────────────────────────────────────────────────────────────── */
.pc-detail-main-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
}
.pc-detail-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: opacity 0.25s;
}
.pc-detail-main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    background: #0f172a;
}
.pc-detail-main-embed-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.pc-detail-main-embed {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--pc-radius-sm);
    background: #000;
}
.pc-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-slate-200);
    background: #fff;
    box-shadow: var(--pc-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all var(--pc-transition);
}
.pc-gallery-nav:hover {
    background: var(--pc-slate-50);
    border-color: var(--pc-slate-300);
}
.pc-gallery-nav .pc-icon {
    color: var(--pc-slate-700);
    width: 22px;
    height: 22px;
}
.pc-gallery-prev { left: 12px; }
.pc-gallery-next { right: 12px; }
.pc-detail-thumbs {
    display: flex;
    gap: 8px;
    padding: 14px 20px 18px;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.pc-detail-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--pc-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    object-fit: contain;
    background: #fff;
    padding: 4px;
    transition: border-color var(--pc-transition);
}
.pc-detail-thumb:hover {
    border-color: var(--pc-slate-300);
}
.pc-detail-thumb.active {
    border-color: var(--pc-primary);
}
.pc-detail-thumb.pc-detail-thumb--video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--pc-slate-200), var(--pc-slate-100));
}
.pc-detail-thumb.pc-detail-thumb--video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: calc(var(--pc-radius-sm) - 2px);
}
.pc-detail-thumb-play {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: var(--pc-shadow);
}
.pc-detail-thumb-play .pc-icon {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.pc-success-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    border-radius: var(--pc-radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    padding: 40px 32px 32px !important;
}

.pc-success-icon-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.pc-success-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.pc-detail-close,
.pc-confirm-close,
.pc-success-close {
    background: var(--pc-close-bg);
    border: 1px solid var(--pc-close-border);
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(238, 119, 106, 0.28);
    opacity: 1;
    transition: background var(--pc-transition), border-color var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
}

.pc-detail-close:hover,
.pc-confirm-close:hover,
.pc-success-close:hover {
    background: var(--pc-close-bg-hover);
    border-color: var(--pc-close-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(238, 119, 106, 0.34);
}

.pc-detail-close:focus-visible,
.pc-confirm-close:focus-visible,
.pc-success-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(238, 119, 106, 0.22), 0 10px 24px rgba(238, 119, 106, 0.28);
}

.pc-detail-close .pc-icon,
.pc-confirm-close .pc-icon,
.pc-success-close .pc-icon {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke-width: 2.4;
}

/* Info pane */
.pc-detail-info {
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
}
.pc-detail-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pc-slate-900);
    margin: 0 0 16px;
    padding-right: 40px;
    letter-spacing: -0.02em;
}
.pc-detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pc-detail-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pc-primary);
    letter-spacing: -0.02em;
}
.pc-detail-price--discounted {
    color: var(--pc-danger);
    font-size: 1.5rem;
}
.pc-detail-old-price {
    font-size: 1rem;
    color: var(--pc-slate-400);
    text-decoration: line-through;
}
.pc-detail-discount-badge {
    background: linear-gradient(135deg, #e53e3e, #f6ad55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.pc-detail-tax-line {
    font-size: 0.8125rem;
    color: var(--pc-slate-500);
    margin: -12px 0 16px;
    line-height: 1.35;
}
.pc-detail-tax {
    display: block;
    flex-basis: 100%;
    width: 100%;
    font-size: 0.8125rem;
    color: var(--pc-slate-500);
    margin-top: 6px;
}

/* Meta */
.pc-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 8px;
}
.pc-detail-meta-item {
    font-size: 0.875rem;
    color: var(--pc-slate-600);
}
.pc-detail-meta-item strong {
    color: var(--pc-slate-800);
    font-weight: 600;
}

/* Tabs — segmented control so reads clearly as tabs, not plain links */
.pc-detail-tabs.nav-tabs {
    border-bottom: none;
}
.pc-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    margin-bottom: 0;
    background: rgba(13, 92, 132, 0.07);
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pc-detail-tabs .nav-item {
    flex: 1 1 auto;
    min-width: 0;
}
.pc-detail-tabs .nav-link {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pc-slate-600);
    border: none;
    padding: 9px 12px;
    margin: 0;
    border-radius: 10px;
    text-align: center;
    line-height: 1.25;
    background: transparent;
    transition: color var(--pc-transition), background var(--pc-transition), box-shadow var(--pc-transition);
    -webkit-tap-highlight-color: transparent;
}
.pc-detail-tabs .nav-link:hover {
    color: var(--pc-slate-800);
    background: rgba(255, 255, 255, 0.55);
}
.pc-detail-tabs .nav-link:focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
}
.pc-detail-tabs .nav-link.active {
    color: var(--pc-primary);
    background: #fff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 81, 123, 0.1);
}
html[dir='rtl'] .pc-detail-tabs .nav-link {
    text-align: center;
}
.pc-detail-tab-content {
    padding: 18px 0;
    flex: 1;
    overflow-y: auto;
}
.pc-detail-html {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--pc-slate-600);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pc-detail-html * {
    max-width: 100%;
}
.pc-detail-html img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pc-radius-sm);
}
.pc-detail-empty {
    color: var(--pc-slate-400);
    font-size: 0.875rem;
    font-style: italic;
}

.pc-detail-files {
    font-size: 0.9375rem;
    color: var(--pc-slate-600);
}
.pc-detail-files-section + .pc-detail-files-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pc-slate-200);
}
.pc-detail-files-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pc-slate-500);
    margin-bottom: 0.5rem;
}
.pc-detail-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-detail-files-list li {
    margin: 0.35rem 0;
}
.pc-detail-file-link {
    color: var(--pc-primary);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}
.pc-detail-file-link:hover {
    text-decoration: underline;
}

/* Variants table */
.pc-detail-variants-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.pc-detail-variants-table th {
    text-align: left;
    font-weight: 600;
    color: var(--pc-slate-600);
    padding: 10px 14px;
    border-bottom: 2px solid var(--pc-slate-200);
}
.pc-detail-variants-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--pc-slate-100);
    color: var(--pc-slate-800);
}

.pc-detail-attachments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-detail-attachments-item {
    margin: 0;
}
.pc-detail-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-slate-200);
    background: var(--pc-slate-50);
    color: var(--pc-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--pc-transition), border-color var(--pc-transition), color var(--pc-transition);
    max-width: 100%;
}
.pc-detail-attachment-link:hover {
    background: #fff;
    border-color: var(--pc-primary);
    color: var(--pc-primary-hover);
}
.pc-detail-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── AUTHORITATIVE detail-modal DIALOG WIDTH (>= 768px) ──────────────────────
 * The markup carries Bootstrap's `.modal-lg`, but `.modal-lg` only sets
 * `--bs-modal-width: 800px` at >= 992px. Below that it falls back to the 500px
 * default WHILE the `col-md-5` / `col-md-7` horizontal split is already active
 * (>= 768px) — which left the gallery at ~208px and wrapped the info-pane tabs
 * onto a second line. Above 992px the 800px cap is simply far too narrow on a
 * modern display (~42% of a 1920px viewport), which is what made the whole
 * viewer read as "tiny".
 *
 * The <= 767px block further down replaces this entirely with a full-screen
 * sheet (100vw/100dvh) — do not add width rules for this selector there.
 * Keep dialog-width declarations for `#pc-product-modal` HERE.
 *
 * `min()` is load-bearing: a flat 1120px would overflow a 1024px-wide laptop,
 * and Bootstrap's own `.modal-dialog` margin is NOT subtracted from a
 * `max-width`, so the vw term has to leave that gutter itself.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    #pc-product-modal .modal-dialog {
        max-width: min(1120px, 92vw);
    }

    /* HEIGHT, part 1 — column share.
     * The viewer's height is driven entirely by the gallery: the image sits in
     * a ratio-locked box, so its height is `0.75 x column width` and nothing
     * else. `col-md-5` gave that column 41.67%, which capped the whole modal at
     * roughly half the viewport. Widening the column is the ONLY way to make
     * the image itself larger without letterboxing it, so take it to 48/52.
     * Bootstrap 5 sets `width` on `.col-md-*` (with `flex: 0 0 auto`), so the
     * override has to be on `width` — a `flex-basis` override alone loses. */
    #pc-product-modal #pc-detail-content > .row.g-0 > .col-md-5.pc-detail-gallery {
        width: 48%;
    }
    #pc-product-modal #pc-detail-content > .row.g-0 > .col-md-7.pc-detail-info {
        width: 52%;
    }

    /* HEIGHT, part 2 — the ratio cap itself.
     * Even at 48% the 4:3 box tops out around 400px, so the panel still read as
     * squat. Swap the width-derived ratio for a viewport-derived height here.
     * `object-fit: contain` is untouched, so this still never crops: a 4:3
     * source simply gains a surplus band above and below, and because that band
     * is the gallery's own --pc-slate-50 it reads as extra padding rather than
     * as a letterbox. This is the one deliberate exception to the 4:3 lockstep
     * documented on `.pc-detail-main-img-wrap` above — the skeleton override
     * directly below keeps the loading state matched so the modal does not jump
     * height when the image finishes decoding. */
    #pc-product-modal .pc-detail-main-img-wrap {
        padding-top: 0;
        height: min(68vh, 620px);
        min-height: 340px;
    }
    #pc-product-modal .pc-skel-img {
        padding-top: 0;
        height: min(68vh, 620px);
        min-height: 340px;
    }

    /* The image box is now taller than the image inside it, and the thumb strip
       is content-height — centre the pair so the surplus splits evenly instead
       of pooling under the thumbs. */
    #pc-product-modal .pc-detail-gallery {
        justify-content: center;
    }
    #pc-product-modal .pc-detail-info {
        max-height: 82vh;
    }
}

/* ── Language Dropdown ────────────────────────────────────── */
.pc-lang-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}
.pc-lang-flag { font-size: 18px; line-height: 1; }
.pc-lang-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: var(--pc-radius);
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    transition: all var(--pc-transition);
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pc-lang-trigger:focus-visible {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}

/* Right cluster: language → currency → cart */
.pc-header-actions-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pc-header-collapsed-contact {
    display: none;
}
html[dir="rtl"] .pc-header-actions-cluster {
    flex-direction: row-reverse;
}
/* Visitor-controlled mobile grid density toggle (1 vs 2 products per row) */
.pc-grid-density-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: var(--pc-radius);
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    color: var(--pc-slate-700);
    transition: all var(--pc-transition);
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pc-grid-density-toggle:hover,
.pc-grid-density-toggle:focus-visible {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-grid-density-toggle[aria-pressed="true"] {
    background: var(--pc-primary-muted);
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}
/* Only meaningful at the mobile grid breakpoint (see the .pc-ecatalog-mobile-cols-1
   rules further down, scoped to the same max-width: 991.98px) — no visible effect
   at desktop widths, so the button is hidden there. */
@media (min-width: 992px) {
    .pc-grid-density-toggle {
        display: none;
    }
}
.pc-lang-trigger:hover {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-lang-dropdown-menu {
    background: #fff;
    padding: 8px;
    border-radius: var(--pc-radius-lg);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 0;
    z-index: 1000001;
    display: none;
    border: 1px solid var(--pc-slate-200);
    box-shadow: var(--pc-shadow-lg);
}
.pc-lang-dropdown-container:hover .pc-lang-dropdown-menu,
.pc-lang-dropdown-container:focus-within .pc-lang-dropdown-menu,
.pc-lang-dropdown-container.is-open .pc-lang-dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.pc-lang-dropdown-item {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--pc-radius-sm);
    background: transparent;
    transition: background var(--pc-transition);
}
.pc-lang-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pc-slate-800);
}
.pc-lang-dropdown-item:hover {
    background: var(--pc-slate-100);
}
.pc-lang-dropdown-item--active {
    background: var(--pc-primary-muted);
    color: var(--pc-primary);
}
html[dir="rtl"] .pc-lang-dropdown-menu {
    left: 0;
    right: auto;
}
html[dir="rtl"] .pc-lang-dropdown-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── Currency: icon trigger + dropdown (native select visually hidden for JS) ─ */
.pc-currency-dropdown {
    position: relative;
    flex-shrink: 0;
}
.pc-currency-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius);
    background: #fff;
    color: var(--pc-slate-800);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-currency-trigger:hover,
.pc-currency-trigger[aria-expanded="true"] {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-currency-trigger-icon {
    color: var(--pc-primary);
    flex-shrink: 0;
}
/* Material “payments” glyph — reads clearly as money / currency on all breakpoints */
.pc-currency-trigger .pc-currency-trigger-icon.material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
@media (min-width: 768px) {
    .pc-currency-trigger .pc-currency-trigger-icon.material-symbols-outlined {
        font-size: 26px;
    }
}
.pc-currency-trigger-code {
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-currency-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000002;
    min-width: 220px;
    max-width: min(92vw, 320px);
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
html[dir="rtl"] .pc-currency-dropdown-panel {
    right: auto;
    left: 0;
}
.pc-currency-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: var(--pc-radius-sm);
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    color: var(--pc-slate-800);
    transition: background var(--pc-transition);
}
.pc-currency-option:hover,
.pc-currency-option:focus-visible {
    background: rgba(0, 81, 123, 0.06);
    outline: none;
}
.pc-currency-option.is-selected {
    background: var(--pc-primary-muted);
    font-weight: 600;
}
.pc-currency-option-code {
    font-size: 0.875rem;
    font-weight: 600;
}
.pc-currency-option-desc {
    font-size: 0.75rem;
    color: var(--pc-slate-500);
    line-height: 1.3;
}
.pc-currency-select.visually-hidden,
select.pc-currency-select.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Sidebar: search above filters */
.pc-sidebar-search {
    margin-bottom: 4px;
}
.pc-sidebar-scroll {
    min-height: 0;
}
.pc-sidebar-search-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-slate-500);
    margin-bottom: 8px;
}
.pc-sidebar .pc-search-wrapper {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
}

/* Header: sales rep + chat / WhatsApp (compact) */
.pc-header-sales.pc-sales-rep-block {
    padding: 0;
    margin: 0;
    border: none;
}
.pc-header-sales-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pc-header-sales-dropdown {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}
.pc-header-sales-static {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pc-header-sales-trigger {
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    text-align: left;
    transition: opacity var(--pc-transition);
}
.pc-header-sales-trigger:hover,
.pc-header-sales-trigger[aria-expanded="true"] {
    opacity: 0.92;
}
.pc-header-sales-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-header-sales .pc-header-sales-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.pc-header-sales .pc-sales-rep-avatar-img {
    width: 40px;
    height: 40px;
}
.pc-header-sales-text {
    min-width: 0;
    max-width: 210px;
}
.pc-header-sales-chevron {
    margin-inline-start: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--pc-primary);
    flex-shrink: 0;
    transition: transform var(--pc-transition), color var(--pc-transition);
}
.pc-header-sales-trigger[aria-expanded="true"] .pc-header-sales-chevron {
    transform: rotate(180deg);
    color: var(--pc-primary-strong);
}
.pc-header-sales-dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 1200;
    width: min(374px, calc(100vw - 32px));
}
.pc-header-sales-dropdown-panel[hidden] {
    display: none !important;
}
.pc-header-sales-popover {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: 0;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    overflow: visible;
}
.pc-header-sales-popover::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 36%;
    width: 16px;
    height: 16px;
    background: #fff;
    border-top: 1px solid rgba(0, 81, 123, 0.12);
    border-left: 1px solid rgba(0, 81, 123, 0.12);
    transform: rotate(45deg);
}
.pc-header-sales-popover-avatar {
    width: 76px;
    min-width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    border-right: 1px solid rgba(0, 81, 123, 0.08);
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.pc-header-sales-card-avatar {
    width: 52px;
    height: 52px;
    border-width: 2px;
}
.pc-header-sales-popover-body {
    min-width: 0;
    flex: 1;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.pc-header-sales-popover-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pc-slate-900);
    line-height: 1.25;
    word-break: break-word;
}
.pc-header-sales-popover-line {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--pc-slate-600);
    text-decoration: none;
    word-break: break-word;
}
.pc-header-sales-popover-line:hover {
    color: var(--pc-primary);
}
.pc-header-sales-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-slate-500);
    line-height: 1.2;
    margin-top: 2px;
}
.pc-header-sales-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--pc-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-header-sales-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--pc-slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
a.pc-header-sales-meta:hover {
    color: var(--pc-primary);
    text-decoration: underline;
}
.pc-header-sales-unavailable {
    font-size: 0.75rem;
    line-height: 1.3;
}
.pc-header-sales .pc-header-sales-actions {
    margin-top: 0;
    margin-inline-start: auto;
    flex-shrink: 0;
    gap: 6px;
}
.pc-header-sales-icon.pc-sales-rep-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

@media (max-width: 575px) {
    .pc-header-sales-text {
        display: none;
    }
    .pc-header-sales-inner {
        gap: 6px;
    }
    .pc-header-sales-trigger {
        width: auto;
        padding: 0;
        border-radius: 12px;
    }
    .pc-header-sales-chevron {
        display: none;
    }
    .pc-header-sales-dropdown-panel {
        left: 0;
        width: min(300px, calc(100vw - 20px));
    }
    .pc-header-sales-popover {
        min-height: 108px;
    }
    .pc-header-sales-popover-avatar {
        width: 72px;
        min-width: 72px;
        padding: 14px 10px;
    }
}

/* ── Toolbar ──────────────────────────────────────────────── */
.pc-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    position: sticky;
    top: 64px;
    z-index: 40;
    background: transparent;
    padding: 14px 0 16px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pc-toolbar-sort-only {
    display: none;
    position: relative;
    top: auto;
    z-index: auto;
}

.pc-mobile-sort-sheet-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.pc-mobile-sort-sheet-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #17354a;
}
.pc-mobile-sort-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: var(--pc-radius-sm);
    background: transparent;
    color: var(--pc-slate-500);
    cursor: pointer;
    transition: color var(--pc-transition), background var(--pc-transition);
}
.pc-mobile-sort-close:hover {
    color: var(--pc-primary);
    background: var(--pc-slate-100);
}

.pc-mobile-sort-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-mobile-sort-list > li {
    margin: 0;
    padding: 0;
}
.pc-mobile-sort-option {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: start;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--pc-slate-800);
    cursor: pointer;
    transition: background var(--pc-transition), color var(--pc-transition);
    -webkit-tap-highlight-color: transparent;
}
.pc-mobile-sort-option:hover {
    background: var(--pc-slate-100);
}
.pc-mobile-sort-option:focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
}
.pc-mobile-sort-option.is-selected {
    background: var(--pc-primary-muted);
    color: var(--pc-primary);
    font-weight: 600;
}
html[dir='rtl'] .pc-mobile-sort-option {
    text-align: right;
}

.pc-products-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
    border: 1px solid rgba(0, 81, 123, 0.08);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-sm);
    padding: 14px 16px 16px;
}

.pc-products-panel .pc-results-info {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 81, 123, 0.08);
}

.pc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Filter dropdown ──────────────────────────────────────── */
.pc-filter-dropdown {
    position: relative;
    min-width: 150px;
}
.pc-filter-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-filter-dropdown-trigger:hover {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px var(--pc-primary-muted);
}
.pc-filter-dropdown-trigger .pc-filter-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-filter-dropdown-chevron {
    width: 18px;
    height: 18px;
    color: var(--pc-slate-500);
    flex-shrink: 0;
    transition: transform var(--pc-transition);
}
.pc-filter-dropdown.open .pc-filter-dropdown-chevron {
    transform: rotate(180deg);
}
.pc-filter-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    background: #fff;
    border: 1px solid rgba(0, 81, 123, 0.12);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-lg);
    z-index: 1000;
    overflow: hidden;
}
.pc-filter-dropdown.open .pc-filter-dropdown-panel {
    display: block;
}
.pc-filter-dropdown-search {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: none;
    border-bottom: 1px solid var(--pc-slate-200);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
    background-size: 16px;
}
.pc-filter-dropdown-search::placeholder {
    color: var(--pc-slate-400);
}
.pc-filter-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}
.pc-filter-dropdown-option {
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--pc-radius-sm);
    transition: background var(--pc-transition);
}
.pc-filter-dropdown-option:hover {
    background: var(--pc-slate-100);
}
.pc-filter-dropdown-option.selected {
    background: var(--pc-primary-muted);
    color: var(--pc-primary);
    font-weight: 600;
}
.pc-filter-dropdown-option.hidden {
    display: none;
}
.pc-filter-dropdown.has-value .pc-filter-dropdown-trigger {
    border-color: var(--pc-accent);
    color: #92400e;
    background: var(--pc-accent-muted);
    font-weight: 600;
}
.pc-filter-dropdown.has-value .pc-filter-dropdown-chevron {
    color: var(--pc-accent);
}
.pc-toolbar-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: not-allowed;
    transition: all .15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.6;
}
.pc-toolbar-clear-btn.is-active {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #DC2626;
    cursor: pointer;
    opacity: 1;
}
.pc-toolbar-clear-btn.is-active:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
}

/* ── Page shell & products panel ──────────────────────────── */
.pc-page-shell {
    padding-bottom: 32px;
    padding-top: 4px;
}
.pc-products-panel {
    padding: 24px 24px 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 253, 0.98));
    border: 1px solid rgba(0, 81, 123, 0.1);
    box-shadow: var(--pc-shadow);
}
.pc-main-stage { min-width: 0; position: relative; }

/* ── State panels ─────────────────────────────────────────── */
.pc-state-panel {
    border-radius: var(--pc-radius-lg);
    border: 2px dashed var(--pc-slate-200);
    background: var(--pc-slate-50);
}

/* ── Mobile bottom nav ───────────────────────────────────── */
.pc-mobile-bottom-nav {
    display: none;
}
.pc-mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--pc-slate-500);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 14px;
    position: relative;
    transition: color var(--pc-transition);
}
.pc-mobile-nav-btn .pc-icon { width: 23px; height: 23px; }
.pc-mobile-nav-btn:active { color: var(--pc-primary); }
.pc-mobile-cart-btn {
    color: var(--pc-primary);
}
.pc-mobile-cart-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    background: var(--pc-accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
html[dir="rtl"] .pc-mobile-cart-badge {
    right: auto;
    left: 6px;
}
.pc-mobile-filter-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--pc-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-mobile-filter-badge[hidden] {
    display: none !important;
}
.pc-mobile-nav-btn.is-active {
    color: var(--pc-primary);
}
.pc-mobile-nav-btn.is-active .pc-icon {
    transform: scale(1.04);
}

/* ── Mobile search bar ───────────────────────────────────── */
.pc-mobile-search-bar {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--pc-slate-200);
    padding: 12px 0;
    position: sticky;
    top: 56px;
    z-index: 99;
}
.pc-mobile-search-bar.open { display: block; }
.pc-mobile-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.pc-mobile-search-inner .pc-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.pc-mobile-search-inner .pc-search-input {
    flex: 1;
    padding-left: 44px;
}
.pc-mobile-search-close {
    background: none;
    border: none;
    color: var(--pc-slate-500);
    cursor: pointer;
    padding: 6px;
}

/* ── Filter overlay (mobile) ─────────────────────────────── */
.pc-filter-overlay { display: none; }
.pc-sidebar-mobile-header { display: none; }
.pc-sidebar-close {
    background: none;
    border: none;
    color: var(--pc-slate-600);
    cursor: pointer;
    padding: 6px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 991px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .pc-search-wrapper { width: 220px; }
    .pc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100%;
        background: #fff;
        z-index: 1060;
        padding: 0 20px 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
        max-height: 100vh;
        border-radius: 0 var(--pc-radius-xl) var(--pc-radius-xl) 0;
    }
    .pc-sidebar.open { transform: translateX(0); }
    .pc-sidebar-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid var(--pc-slate-200);
        margin-bottom: 20px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }
    .pc-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: 1055;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s;
    }
    .pc-filter-overlay.open {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 767px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pc-header-row {
        flex-wrap: nowrap;
        gap: 10px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        justify-content: flex-start;
        min-width: min-content;
    }
    .pc-header-center { flex: 0 0 auto; }
    .pc-header-right {
        flex-wrap: nowrap;
        justify-content: flex-end;
        flex: 0 0 auto;
    }
    .pc-header-brand { gap: 10px; }
    .pc-logo { height: 34px; }
    .pc-header-center .pc-title {
        font-size: 1.0625rem;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    .pc-subtitle { font-size: 0.75rem; }
    /* Search lives in sidebar / mobile filter drawer; optional narrow sidebar search */
    .pc-sidebar .pc-search-wrapper {
        display: block;
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    .pc-header-actions-cluster {
        gap: 6px;
    }
    .pc-lang-trigger { width: 40px; height: 40px; }
    .pc-currency-dropdown {
        order: 0;
        width: auto;
        flex: 0 0 auto;
        min-width: 0;
    }
    .pc-product-price--discounted { font-size: 1rem; }
    .pc-toolbar-right { flex-wrap: wrap; }
    .pc-filter-dropdown { min-width: 0; }
    .pc-filter-dropdown-trigger { min-width: 0; }

    .pc-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--pc-slate-200);
        z-index: 1040;
        justify-content: space-around;
        align-items: stretch;
        min-height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding: 0;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        gap: 0;
    }

    .pc-mobile-bottom-nav .pc-mobile-nav-btn {
        padding: 0 4px;
        min-width: 0;
        flex: 1 1 0;
        max-width: 25%;
        justify-content: center;
    }

    /* Full-height cart lane: solid brand blue, white icon + label */
    .pc-mobile-bottom-nav .pc-mobile-cart-btn {
        margin: 0;
        padding: 0 4px;
        align-self: stretch;
        background: var(--pc-primary);
        border: none;
        border-inline: 1px solid var(--pc-primary-hover);
        border-radius: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        color: #fff;
    }
    .pc-mobile-bottom-nav .pc-mobile-cart-btn .pc-icon {
        color: #fff;
    }
    .pc-mobile-bottom-nav .pc-mobile-cart-btn:hover {
        background: var(--pc-primary-hover);
        color: #fff;
    }
    .pc-mobile-bottom-nav .pc-mobile-cart-btn:hover .pc-icon {
        color: #fff;
    }
    .pc-mobile-bottom-nav .pc-mobile-cart-btn:active {
        background: #002d45;
        color: #fff;
    }
    .pc-mobile-bottom-nav .pc-mobile-cart-btn:active .pc-icon {
        color: #fff;
    }
    .pc-cart-btn-header {
        display: none;
    }
    /* Bottom nav clearance: see end-of-file mobile block (avoids double padding with .pc-page-shell) */

    #pc-product-grid { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
    .pc-product-body { padding: 12px; text-align: start; align-items: stretch; }
    .pc-product-card > .pc-product-title {
        font-size: 0.875rem;
        text-align: start !important;
    }
    .pc-product-sku { font-size: 0.7rem; margin-bottom: 6px; }
    .pc-product-price { font-size: 1rem; }
    .pc-product-old-price { font-size: 0.75rem; }
    .pc-product-price-row { margin-bottom: 8px; }
    .pc-qty-input { width: 52px; padding: 8px 6px; font-size: 0.8125rem; }
    .pc-add-btn { font-size: 0.8125rem; padding: 10px 0; }

    .pc-cart-drawer { width: 100%; max-width: 100%; }

    #pc-product-modal .modal-dialog {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
    }
    #pc-product-modal .modal-content {
        border-radius: 0;
        height: 100%;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    }
    #pc-product-modal .pc-detail-modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    #pc-product-modal #pc-detail-content,
    #pc-product-modal #pc-detail-content > .row.g-0 {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        min-height: 100%;
        min-width: 0;
        overflow: visible;
    }
    #pc-product-modal .row.g-0 { flex-direction: column; }
    #pc-product-modal .col-md-5,
    #pc-product-modal .col-md-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    #pc-product-modal .pc-detail-gallery {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    #pc-product-modal .row.g-0 > .col-md-7 {
        min-width: 0;
    }
    /*
     * The full-screen mobile modal body scrolls as one surface.
     * Do not use flex:1 1 0 on this column when the row height is content-sized — it collapses to 0.
     */
    #pc-product-modal .row.g-0 > .col-md-7.pc-detail-info {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none;
        min-height: 0;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 20px 14px;
        box-sizing: border-box;
    }
    #pc-product-modal .pc-detail-info > .pc-detail-title,
    #pc-product-modal .pc-detail-info > .pc-detail-price-row,
    #pc-product-modal .pc-detail-info > .pc-detail-tax-line,
    #pc-product-modal .pc-detail-info > .pc-detail-meta,
    #pc-product-modal .pc-detail-info > .pc-detail-tabs {
        flex-shrink: 0;
    }
    #pc-product-modal .pc-detail-tab-content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        overflow-y: visible;
        overflow-x: hidden;
        padding-bottom: 36px;
        display: block;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }
    .pc-detail-gallery { max-height: none; }
    /* NOTE: `.pc-skel-img` is joined to the rule below on purpose. It is the LOADING
       placeholder for `.pc-detail-main-img-wrap`, so it has to track EVERY geometry
       override that slot gets, not just the base one — otherwise the modal jumps when
       the image decodes. It was not in this block before: the skeleton kept the base
       ratio while the real slot took the clamp, so the modal shifted by ~37px at 375px
       and ~88px at 560px on every open. Measured 0px both sides after joining. If the
       clamp below is ever retuned, this selector comes with it. */
    .pc-skel-img,
    .pc-detail-main-img-wrap {
        /* NOTE: deliberately NOT 4:3. This replaces the base 75% padding-top with an
           explicit viewport-relative height, so the ratio above does not apply here.
           At 62vw against a ~96vw-wide modal the effective slot is ~1.55:1, and a 4:3
           image pillarboxes ~13% each side. Left as is: on a phone the modal must also
           fit title + tabs + price + CTA above the fold, and a true 4:3 slot (72vw)
           would push them off it. Same class of deliberate "not a hero" clamp as the
           1-column ecatalog card slot (~line 5300) — both are ratio-vs-density product
           decisions, not oversights, and should be revisited together. */
        height: clamp(210px, 62vw, 320px);
        padding-top: 0;
    }
    .pc-detail-main-img,
    .pc-detail-main-video {
        padding: 12px;
    }
    .pc-detail-main-embed-wrap {
        padding: 12px;
    }
    .pc-detail-thumbs {
        padding: 8px 12px 10px;
        scrollbar-width: thin;
    }
    .pc-gallery-prev { left: 10px; }
    .pc-gallery-next { right: 10px; }
    #pc-product-modal .pc-detail-title {
        font-size: 1.125rem;
        padding-right: 44px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .pc-detail-tabs .nav-link { font-size: 0.8125rem; padding: 10px 12px; }

    .pc-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        position: static;
    }
    .pc-sort-select { font-size: 0.8125rem; width: 100%; }

    .pc-products-panel { padding: 16px; border-radius: var(--pc-radius-lg); }
    .pc-load-more-btn { width: 100%; padding: 14px; font-size: 0.875rem; }

    .pc-cart-item-qty-inline .pc-cart-qty-input,
    .pc-cart-item-controls .pc-cart-qty-input {
        min-height: 36px;
        height: 36px;
        width: 72px;
        max-width: min(100%, 100px);
    }
    .pc-cart-qty-val { font-size: 0.875rem; min-width: 36px; }
    .pc-btn-quotation,
    .pc-btn-order { padding: 10px; font-size: 0.875rem; }
    .pc-cart-actions {
        gap: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (max-width: 374px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 374px) {
    .pc-header-brand { gap: 8px; }
    .pc-logo { height: 30px; }
    .pc-title { font-size: 0.9375rem; }
    .pc-product-body { padding: 10px; text-align: start; align-items: stretch; }
    .pc-product-card > .pc-product-title { font-size: 0.8125rem; text-align: start !important; }
    .pc-product-price { font-size: 0.9375rem; }
    .pc-qty-input { width: 46px; }
    .pc-add-btn { font-size: 0.75rem; }
    .pc-mobile-nav-btn { font-size: 0.6rem; padding: 6px 10px; }
    .pc-mobile-nav-btn .pc-icon { width: 22px; height: 22px; }
}

/* ── RTL overrides ── */
html[dir="rtl"] .pc-search-icon { left: auto; right: 14px; }
html[dir="rtl"] .pc-search-input { padding-left: 14px; padding-right: 44px; }
html[dir="rtl"] .pc-inline-icon { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .pc-filter-dropdown-trigger,
html[dir="rtl"] .pc-sort-select { text-align: right; }
html[dir="rtl"] .pc-filter-dropdown-panel { left: auto; right: 0; }
html[dir="rtl"] .pc-sidebar { padding-left: 20px; padding-right: 20px; }
html[dir="rtl"] .pc-filter-link:hover { transform: translateX(-3px); }

.pc-empty-icon { color: var(--pc-slate-300); }
.pc-success-icon {
    color: var(--pc-success);
    display: block;
    margin: 0 auto;
}
.pc-product-img-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-slate-300);
}

/* Screenshot-inspired catalogue refresh */
:root {
    --pc-primary: #0d5c84;
    --pc-primary-hover: #094969;
    --pc-primary-muted: rgba(13, 92, 132, 0.12);
    --pc-success: #19a777;
    --pc-success-hover: #148761;
    --pc-accent: #ffac17;
    --pc-body-bg: #f2f8fc;
    --pc-panel-border: #d9e7f2;
    --pc-panel-shadow: 0 20px 48px rgba(21, 67, 96, 0.12);
    --pc-soft-shadow: 0 10px 30px rgba(21, 67, 96, 0.08);
}

body,
.pc-body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #17354a;
    background:
        radial-gradient(circle at top left, rgba(123, 183, 214, 0.28), transparent 26%),
        radial-gradient(circle at 88% 14%, rgba(164, 213, 235, 0.18), transparent 18%),
        linear-gradient(180deg, #eaf5fb 0, #f5fafe 160px, #f3f8fc 100%);
}

#catalogue-app {
    overflow: clip;
}

#catalogue-app::before {
    width: 540px;
    height: 540px;
    top: -220px;
    left: -150px;
    background: radial-gradient(circle at center, rgba(78, 153, 196, 0.26), rgba(78, 153, 196, 0));
}

#catalogue-app::after {
    width: 420px;
    height: 420px;
    top: 190px;
    right: -180px;
    background: radial-gradient(circle at center, rgba(189, 227, 244, 0.55), rgba(189, 227, 244, 0));
}

.pc-shell-container {
    max-width: 1880px;
    margin-inline: auto;
}

.pc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 8px 0 0;
    background: linear-gradient(180deg, rgba(242, 248, 252, 0.94), rgba(242, 248, 252, 0.82));
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pc-header-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--pc-panel-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 252, 255, 0.95));
    box-shadow: var(--pc-panel-shadow);
}

.pc-header-row {
    min-height: 92px;
    gap: 20px;
}

.pc-header-left,
.pc-header-right {
    min-width: 0;
}

.pc-header-center {
    flex: 1 1 auto;
    justify-content: center;
}

.pc-header-brand {
    gap: 18px;
}

.pc-logo,
.pc-logo-fallback {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    flex: 0 0 auto;
}

.pc-logo {
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(13, 92, 132, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.pc-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d5c84, #2b87b1);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 28px rgba(13, 92, 132, 0.18);
}

.pc-header-brand-meta,
.pc-title-block {
    gap: 4px;
}

.pc-title-block {
    transform: none;
    align-items: flex-start;
    text-align: left;
}

.pc-header-kicker,
.pc-title-kicker {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #11628a;
}

.pc-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #0f4360;
}

.pc-title {
    font-size: clamp(1.6rem, 1.5vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #0d5c84;
}

.pc-header-center {
    justify-content: center;
}

.pc-header-right {
    gap: 14px;
}

.pc-search-wrapper {
    width: 280px;
    flex: 0 0 320px;
}
.pc-sidebar .pc-search-wrapper {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
}

.pc-search-input,
.pc-sort-select,
.pc-filter-dropdown-trigger,
.pc-price-input,
.pc-qty-input,
.pc-clear-filters,
.pc-add-btn,
.pc-apply-price-btn,
.pc-currency-trigger,
.pc-lang-trigger {
    border-radius: 16px;
}

.pc-search-input {
    min-height: 54px;
    padding-inline: 22px 18px;
    padding-left: 52px;
    border-color: var(--pc-panel-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 0.98rem;
    font-weight: 500;
}

.pc-search-input::placeholder {
    color: #8da3b6;
}

.pc-search-icon {
    left: 18px;
    color: #88a1b4;
}

.pc-currency-trigger {
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--pc-panel-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}
.pc-currency-dropdown-panel {
    border-radius: 16px;
    border-color: var(--pc-panel-border);
}

.pc-lang-trigger,
.pc-cart-btn {
    width: 54px;
    height: 54px;
}

.pc-lang-trigger {
    border-color: var(--pc-panel-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.pc-lang-flag {
    font-size: 24px;
}

.pc-cart-btn {
    background: linear-gradient(180deg, #0d5c84, #0a4d6f);
    box-shadow: 0 16px 26px rgba(13, 92, 132, 0.2);
}

.pc-cart-badge {
    top: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 3px solid #f7fbff;
    background: var(--pc-accent);
    font-size: 0.78rem;
}

.pc-page-shell {
    position: relative;
    padding-top: 12px;
    padding-bottom: 32px;
}

.pc-layout-grid {
    align-items: flex-start;
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.pc-sidebar,
.pc-products-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.97));
    border: 1px solid var(--pc-panel-border);
    box-shadow: var(--pc-panel-shadow);
}

.pc-sidebar {
    top: 126px;
    max-height: none;
    overflow-y: visible;
    padding: 20px 18px;
    border-radius: 28px;
}

.pc-filter-section {
    margin-bottom: 18px;
    padding-bottom: 18px;
}

.pc-filter-title {
    margin-bottom: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    color: #69819a;
}

.pc-filter-toggle {
    margin-bottom: 10px;
}

.pc-filter-toggle .pc-filter-title {
    margin-bottom: 0;
}

.pc-filter-toggle-icon {
    color: #69819a;
}

.pc-filter-list li {
    margin-bottom: 4px;
}

.pc-filter-link {
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    color: #244962;
}

.pc-filter-link.active {
    background: linear-gradient(180deg, #0d5c84, #0a4d6f);
    box-shadow: 0 16px 24px rgba(13, 92, 132, 0.18);
    transform: none;
}

.pc-price-range {
    gap: 8px;
}

.pc-price-range span {
    font-size: 1.2rem;
    color: #7891a7;
}

.pc-price-input {
    min-height: 46px;
    border-color: var(--pc-panel-border);
    font-size: 0.92rem;
}

.pc-apply-price-btn {
    min-height: 44px;
    min-width: 82px;
    padding-inline: 18px;
    background: linear-gradient(180deg, #0d5c84, #0a4d6f);
    box-shadow: 0 14px 22px rgba(13, 92, 132, 0.18);
}

.pc-clear-filters {
    min-height: 46px;
    border-color: var(--pc-panel-border);
    color: #40607a;
    font-size: 0.92rem;
    font-weight: 600;
}

.pc-products-panel {
    min-height: calc(100vh - 190px);
    padding: 22px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
}

.pc-toolbar {
    position: sticky;
    top: 0;
    z-index: 35;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 20px;
    border-color: var(--pc-panel-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.98));
    box-shadow: var(--pc-soft-shadow);
}

.pc-results-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #6f8498;
}

.pc-results-pill {
    padding: 8px 14px;
    background: #e9f4fb;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0d5c84;
}

.pc-toolbar-right {
    gap: 10px;
}

.pc-sort-select,
.pc-filter-dropdown-trigger {
    min-height: 46px;
    padding: 0 16px;
    border-color: var(--pc-panel-border);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3850;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.pc-sort-select {
    min-width: 176px;
}

.pc-filter-dropdown {
    min-width: 176px;
}

.pc-filter-dropdown-panel {
    margin-top: 10px;
    border-color: var(--pc-panel-border);
    border-radius: 20px;
}

.pc-filter-dropdown-search {
    min-height: 50px;
    border-bottom-color: #e3edf5;
}

.pc-filter-dropdown-list {
    padding: 10px;
}

.pc-filter-dropdown-option {
    border-radius: 12px;
    font-size: 0.95rem;
}

#pc-product-grid {
    --bs-gutter-x: 1.15rem;
    --bs-gutter-y: 1.15rem;
    max-height: calc(100vh - 310px);
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    padding-right: 8px;
}

#pc-product-grid > [class*='col-'] {
    display: flex;
}

.pc-product-card {
    width: 100%;
    border-radius: 22px;
    border-color: #dce8f1;
    box-shadow: 0 14px 34px rgba(24, 60, 87, 0.08);
}

.pc-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px rgba(24, 60, 87, 0.13);
}

/* ── AUTHORITATIVE product-media rules (grid card) ───────────────────────────
 * This is the ONLY place `.pc-product-img-wrapper` / `.pc-product-img` geometry and
 * fit are declared. An identical block used to sit earlier in this file; it was
 * always overridden by this one (same specificity, later wins), so editing it did
 * nothing. It has been removed — keep all geometry/fit declarations for these two
 * selectors HERE.
 *
 * The media slot is a 4:3 LANDSCAPE box (`padding-top: 75%` — padding-top is a
 * percentage of the WIDTH, so 75% is height = 0.75 × width, i.e. 4:3). This value is
 * in LOCKSTEP with the server-side image-normalization canvas: media is normalized
 * onto a 4:3 canvas, and the two ratios must match EXACTLY. Changing one without the
 * other reintroduces letterboxing — the original bug this whole workstream removed.
 * It replaced a 1:1 square, which wasted ~44% of the slot on a 16:9 banner.
 *
 * The image is CONTAINED inside that box rather than cover-cropped: a wide (~16:9)
 * source keeps its full width and letterboxes against the wrapper gradient instead
 * of losing ~22% off each side ("SOURCE TO PAY" was rendering as "URCE / PAY"). A
 * square source now pillarboxes mildly — the accepted cost of halving the letterbox
 * on the wide banners that dominate real catalogues. Aspect ratio is always
 * preserved: nothing is stretched in either mode, the only difference is crop vs.
 * letterbox.
 * ─────────────────────────────────────────────────────────────────────────── */
.pc-product-img-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    height: 0;
    padding-top: 75%;
    border: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #fbfdff, #f0f7fb);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    transform: none;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: none;
    transition: transform 0.3s ease;
}

.pc-product-card:hover .pc-product-img {
    transform: none;
}

.pc-product-img-fallback {
    color: #c0d3e0;
}

#pc-product-grid::-webkit-scrollbar {
    width: 10px;
}

#pc-product-grid::-webkit-scrollbar-track {
    background: #edf4f8;
    border-radius: 999px;
}

#pc-product-grid::-webkit-scrollbar-thumb {
    background: #c0d4e2;
    border-radius: 999px;
}

#pc-product-grid::-webkit-scrollbar-thumb:hover {
    background: #a8c2d4;
}

.pc-stock-badge,
.pc-discount-badge {
    top: 12px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
}

.pc-stock-badge {
    left: 12px;
}

.pc-discount-badge {
    right: 12px;
    z-index: 5;
}

.pc-product-img-wrapper:has(.pc-discount-badge) .pc-product-promo-compact {
    top: 46px;
}

.pc-product-body {
    padding: 12px 16px 16px;
    align-items: stretch;
    text-align: start;
    gap: 8px;
}

.pc-product-card > .pc-product-title {
    font-size: 0.98rem;
    line-height: 1.45;
    letter-spacing: -0.02em;
    padding-top: 8px;
    padding-bottom: 6px;
}

.pc-product-sku {
    min-height: 1.25rem;
    font-size: 0.8rem;
    color: #91a5b7;
}

.pc-product-price-row {
    margin-top: 4px;
    padding-top: 0;
}

.pc-product-price {
    font-size: 1.08rem;
    font-weight: 800;
    color: #0d5c84;
}

.pc-product-price--discounted {
    font-size: 1.08rem;
}

.pc-add-row {
    margin-top: auto;
    gap: 8px;
    padding-top: 2px;
}
.pc-product-card .pc-product-actions {
    margin-top: auto;
    padding-top: 4px;
}

.pc-qty-input {
    width: 72px;
    min-height: 46px;
    border-color: var(--pc-panel-border);
    font-size: 0.92rem;
    font-weight: 700;
}

.pc-add-btn {
    min-height: 46px;
    padding: 0 16px;
    background: #FFD814;
    color: #0F1111;
    border: 1px solid #FCD200;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
}

.pc-add-btn.added {
    background: linear-gradient(180deg, #19a777, #148761);
}

/* ── AUTHORITATIVE out-of-stock Add button ───────────────────────────────────
 * This is the ONLY place `.pc-add-btn--oos` is declared. It MUST stay AFTER the
 * `.pc-add-btn` block above: both are single-class selectors (equal specificity),
 * so whichever is later wins. An identical `--oos` block used to sit far earlier in
 * the file and was therefore silently overridden by `.pc-add-btn`'s CTA yellow.
 * The values below are exactly the muted treatment that block always intended —
 * existing slate tokens, no new colours.
 * ─────────────────────────────────────────────────────────────────────────── */
.pc-add-btn--oos,
.pc-add-btn--oos:hover {
    background: var(--pc-slate-200);
    /* The base rule's #FCD200 border is CTA yellow and still reads as an active
       control on a disabled button, so it is muted too. slate-300 (not the fill's
       slate-200) keeps a visible edge against the out-of-stock card body. */
    border-color: var(--pc-slate-300);
    color: var(--pc-slate-500);
    cursor: not-allowed;
    opacity: 0.9;
    width: 100%;
    box-shadow: none;
    /* Cancels `.pc-add-btn:hover`'s lift — a disabled control must not react. */
    transform: none;
}
/* `.pc-add-btn .pc-icon, .pc-add-btn svg` pins the glyph to near-black (#0F1111) at
   a HIGHER specificity than `.pc-add-btn--oos { color }`, so without this the icon
   stayed a full-contrast in-stock mark sitting on the muted fill. */
.pc-add-btn--oos .pc-icon,
.pc-add-btn--oos svg {
    color: inherit;
}

.pc-state-panel {
    border: 1px dashed #cfe0eb;
    background: linear-gradient(180deg, #f8fbfe, #f2f8fc);
}

.pc-load-more-btn {
    border-radius: 16px;
    border-color: var(--pc-panel-border);
    min-height: 54px;
    font-weight: 700;
}

@media (max-width: 1399px) {
    .pc-header-row {
        gap: 18px;
    }

    .pc-search-wrapper {
        width: 280px;
        flex-basis: 180px;
    }
}

@media (max-width: 1199px) {
    .pc-header-row {
        flex-wrap: wrap;
        min-height: auto;
        padding-block: 18px !important;
    }

    .pc-header-center {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }

    .pc-title-block {
        transform: none;
    }

    .pc-header-right {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .pc-sidebar {
        top: 110px;
        max-height: calc(100vh - 128px);
    }

    .pc-toolbar {
        top: 110px;
    }
}

@media (max-width: 991px) {
    .pc-header {
        padding-top: 0;
    }

    .pc-header-shell {
        border-radius: 0 0 24px 24px;
    }

    .pc-sidebar {
        top: 0;
        left: 0;
        width: 340px;
        max-width: 86vw;
        max-height: 100vh;
        padding: 0 22px 24px;
        border-radius: 0 30px 30px 0;
    }

    .pc-products-panel {
        min-height: 0;
        padding: 22px;
    }

    .pc-toolbar {
        position: static;
        flex-wrap: wrap;
        gap: 14px;
    }

    .pc-toolbar-right {
        width: 100%;
    }

    .pc-filter-dropdown,
    .pc-sort-select {
        flex: 1 1 180px;
    }

    #pc-product-grid {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .pc-shell-container {
        padding-inline: 0;
    }

    .pc-header-shell {
        position: relative;
        padding: 0 14px;
        padding-inline-end: 52px;
        border-radius: 0 0 22px 22px;
    }

    .pc-header-shell > .pc-header-validity-bar {
        margin-inline-start: -14px;
        margin-inline-end: -52px;
        width: calc(100% + 14px + 52px);
    }

    .pc-header-shell > .pc-header-validity-bar .pc-header-validity-bar-inner {
        padding-inline: 14px 52px;
    }

    #pc-header-shell-expandable {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    /* Collapsed: hide promo + timer strip (same toggle as main header) */
    .pc-header-shell--collapsed .pc-header-validity-bar {
        display: none !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable {
        border-radius: 0 0 22px 22px;
    }

    .pc-header-shell-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 14px;
        inset-inline-end: 14px;
        z-index: 12;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 12px;
        border: 1px solid rgba(0, 81, 123, 0.4);
        background: linear-gradient(165deg, #bfe0f0 0%, #93c5e0 45%, #6baecf 100%);
        color: #063652;
        box-shadow: 0 4px 16px rgba(0, 81, 123, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    }

    .pc-header-shell-toggle:hover {
        background: linear-gradient(165deg, #d2ebf6 0%, #aad7ee 45%, #7ebfe0 100%);
        border-color: rgba(0, 81, 123, 0.55);
        color: #04283d;
        box-shadow: 0 6px 20px rgba(0, 81, 123, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .pc-header-shell-toggle:focus-visible {
        outline: 2px solid var(--pc-primary);
        outline-offset: 2px;
    }

    .pc-header-shell-toggle .pc-header-shell-toggle-icon {
        font-size: 24px;
        line-height: 1;
        font-weight: 600;
    }

    /* Collapsed: slim strip — logo + language/currency icons; full header after expand */
    .pc-header-shell--collapsed {
        overflow-x: hidden;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .pc-header-shell--collapsed .pc-header-shell-toggle {
        top: 6px;
        inset-inline-end: 14px;
    }

    .pc-header-shell--collapsed .pc-header-shell-toggle:hover,
    .pc-header-shell--collapsed .pc-header-shell-toggle:focus-visible {
        background: linear-gradient(165deg, #d2ebf6 0%, #aad7ee 45%, #7ebfe0 100%);
        border-color: rgba(0, 81, 123, 0.55);
        box-shadow: 0 6px 20px rgba(0, 81, 123, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-center {
        display: none !important;
    }

    /* Hoist lang + currency beside logo (same IDs); sales stays hidden below */
    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-right {
        display: contents;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-sales-rep-block {
        display: none !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0;
        align-items: center;
        /* After “Mobile polish”, row uses space-between — that splits logo from icons; keep them grouped */
        justify-content: flex-start !important;
        column-gap: 6px !important;
        row-gap: 6px;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-left {
        order: 1;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-brand {
        align-items: center;
        gap: 10px;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-kicker {
        display: none !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-brand-meta {
        display: none !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-logo,
    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-logo-fallback {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 12px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-logo {
        padding: 5px;
        object-fit: contain;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-actions-cluster {
        order: 2;
        align-self: center;
        flex: 0 0 auto;
        gap: 4px;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-collapsed-contact {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 12px;
        border: 1px solid rgba(0, 81, 123, 0.16);
        background: #fff;
        color: var(--pc-primary);
        text-decoration: none;
        box-sizing: border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-collapsed-contact--wa {
        border-color: rgba(22, 163, 74, 0.28);
        background: #dcfce7;
        color: #15803d;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-header-collapsed-contact--chat {
        cursor: pointer;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-currency-trigger-code {
        display: none !important;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-lang-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box;
    }

    .pc-header-shell--collapsed #pc-header-shell-expandable .pc-currency-trigger {
        padding: 0;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
    }

    .pc-header-row {
        gap: 12px;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        align-items: center;
        min-width: min-content;
        min-height: 0;
    }

    /* Undo wider-breakpoint wrap layout so one row can scroll sideways */
    .pc-header-center {
        order: 0 !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
    }

    .pc-header-left {
        flex: 0 0 auto !important;
    }

    .pc-header-right {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }

    /* Override refresh base .pc-search-wrapper (flex-basis 320px) so the row can scroll on small screens */
    .pc-search-wrapper {
        display: block;
        flex: 0 0 auto;
        width: 200px;
        min-width: 180px;
        max-width: none;
    }

    .pc-header-brand {
        gap: 12px;
    }

    .pc-logo,
    .pc-logo-fallback {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .pc-header-kicker,
    .pc-title-kicker {
        font-size: 0.72rem;
    }

    .pc-title {
        font-size: 1.28rem;
    }

    .pc-subtitle {
        font-size: 0.88rem;
    }

    .pc-currency-dropdown {
        width: auto;
        flex: 0 0 auto;
    }

    .pc-page-shell {
        padding-top: 24px;
        /* Space above fixed bottom nav handled on body (see mobile polish block at end of file) */
        padding-bottom: 20px;
    }

    .pc-sidebar,
    .pc-products-panel {
        border-radius: 24px;
    }

    .pc-products-panel {
        padding: 16px;
        border-radius: 20px;
        overflow: visible;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
        border: 1px solid rgba(0, 81, 123, 0.08);
        box-shadow: var(--pc-shadow-sm);
    }

    .pc-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 16px 0;
        border-radius: 0;
        margin-bottom: 16px;
        position: relative;
        top: auto;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .pc-toolbar-sort-only {
        display: flex;
        position: fixed;
        left: 50%;
        right: auto;
        width: min(calc(100vw - 20px), 288px);
        max-width: 288px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 6px);
        z-index: 1038;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 8px 10px 10px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        background: #fff;
        border: 1px solid rgba(0, 81, 123, 0.12);
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
        transform: translate(-50%, calc(100% + 20px));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.18s ease;
    }

    .pc-toolbar-sort-only.is-open {
        transform: translate(-50%, 0);
        opacity: 1;
        pointer-events: auto;
    }

    .pc-toolbar-sort-only .pc-mobile-sort-sheet-head {
        display: flex;
        gap: 8px;
    }

    .pc-toolbar-sort-only .pc-mobile-sort-sheet-title {
        font-size: 0.8125rem;
    }

    .pc-toolbar-sort-only .pc-mobile-sort-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        max-height: min(48vh, 280px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pc-products-panel .pc-results-info {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(0, 81, 123, 0.08);
    }

    .pc-products-panel #pc-product-grid {
        padding: 0;
    }

    .pc-products-panel #pc-load-more-wrapper {
        padding: 0;
        margin: 20px 0;
    }

    .pc-products-panel .pc-state-panel {
        padding: 0;
    }

    .pc-results-info {
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Brand / model live in the filter drawer; sort is in the bottom nav (sheet) on small screens */
    .pc-toolbar-filter-desktop {
        display: none !important;
    }

    .pc-toolbar-right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .pc-toolbar-right .pc-sort-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
    }

    .pc-toolbar-clear-btn {
        flex: 0 0 auto;
    }

    .pc-sort-select {
        min-width: 0;
    }

    #pc-product-grid {
        --bs-gutter-x: 0.9rem;
        --bs-gutter-y: 0.9rem;
    }

    .pc-product-img-wrapper {
        margin: 0;
    }

    .pc-product-body {
        padding: 14px 14px 16px;
    }

    .pc-product-card > .pc-product-title {
        font-size: 0.9rem;
    }

    .pc-product-price,
    .pc-product-price--discounted {
        font-size: 1rem;
    }

    .pc-qty-input {
        width: 66px;
        min-height: 48px;
    }

    .pc-add-btn {
        min-height: 48px;
        font-size: 0.88rem;
    }

    /* Natural swipe direction for horizontal header scroll in RTL */
    html[dir='rtl'] .pc-header-shell {
        direction: ltr;
    }
    html[dir='rtl'] .pc-header-row {
        direction: rtl;
    }
}

/*
 * One product per row (share setting): classic vertical card, centered, ~tile width —
 * shorter image (4:3, max height) so it is not a full-screen hero; not a horizontal list.
 */
@media (max-width: 991.98px) {
    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid > [class*='col-'] {
        display: flex;
        justify-content: center;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: min(19.5rem, calc(100vw - 1.25rem)) !important;
        margin-inline: auto !important;
        box-sizing: border-box;
        border-radius: 16px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card > .pc-product-img-wrapper {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px 16px 0 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card > .pc-product-title {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 10px 12px 4px !important;
        font-size: 0.8125rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-align: start !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card > .pc-product-body {
        order: 3 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 12px 12px !important;
        box-sizing: border-box !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-product-body {
        gap: 6px !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-product-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 0 !important;
    }

    /* Video posters keep their original cover framing (black letterbox is intentional). */
    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-product-video-thumb {
        object-fit: cover !important;
        padding: 0 !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-product-img-fallback {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-mkt-cta-block {
        flex-direction: column !important;
        margin: 6px 0 4px !important;
    }

    #catalogue-app.pc-ecatalog-mobile-cols-1 #pc-product-grid .pc-product-card .pc-mkt-cta-btn {
        width: 100% !important;
        flex: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE - Narrow phones: two-column product cards
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #pc-product-grid {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    #pc-product-grid > [class*='col-'] {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    .pc-product-card {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        border-radius: 16px;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    /* Image first, then title and details for compact two-column cards. */
    .pc-product-card > .pc-product-title {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 9px 10px 2px;
        box-sizing: border-box;
        font-size: 0.78rem;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 2.2rem;
    }

    .pc-product-card > .pc-product-img-wrapper {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding-top: 0;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 16px 16px 0 0;
    }

    .pc-product-card .pc-product-img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        padding: 0;
        transform: none !important;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* Video posters keep their original cover framing (black letterbox is intentional). */
    .pc-product-card .pc-product-video-thumb {
        object-fit: cover;
        padding: 0;
    }

    .pc-product-card:hover .pc-product-img {
        transform: none !important;
    }

    .pc-product-card .pc-product-img-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pc-product-card > .pc-product-body {
        order: 3;
    }

    .pc-product-card .pc-product-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 4px 10px 8px;
        gap: 2px;
        justify-content: space-between;
        align-items: stretch;
        text-align: start;
    }

    .pc-product-card .pc-product-sku {
        font-size: 0.66rem;
        min-height: 0;
        margin-bottom: 0;
    }

    .pc-product-card .pc-product-price-row {
        margin-top: 0;
        padding-top: 0;
        gap: 4px;
    }

    .pc-product-card .pc-product-price,
    .pc-product-card .pc-product-price--discounted {
        font-size: 0.86rem;
        line-height: 1.15;
    }

    .pc-product-card .pc-product-old-price,
    .pc-product-card .pc-product-price-unit,
    .pc-product-card .pc-product-tax-line {
        font-size: 0.64rem;
    }

    .pc-product-card .pc-add-row {
        margin-top: 2px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .pc-product-card .pc-product-actions {
        margin-top: 2px;
        width: 100%;
        align-self: stretch;
    }

    /* Qty uses remaining width; Add is icon-only (see .pc-add-btn-text hidden) */
    .pc-product-card .pc-product-actions-grid {
        gap: 6px;
        grid-template-columns: minmax(52px, 1fr) auto;
    }

    .pc-product-card .pc-product-actions-qty {
        justify-content: flex-start;
        max-width: none;
        width: 100%;
        min-width: 0;
    }

    .pc-product-card .pc-qty-input {
        width: 100%;
        min-width: 44px;
        max-width: none;
        min-height: 38px;
        flex-shrink: 0;
        font-size: 0.82rem;
    }

    .pc-product-card .pc-product-actions-qty .pc-qty-input {
        width: 100%;
        max-width: none;
        min-width: 44px;
        margin-left: 0;
        margin-right: 0;
    }

    .pc-product-card .pc-product-actions-add {
        min-width: 0;
        flex: 0 0 auto;
    }

    .pc-product-card .pc-add-btn .pc-add-btn-text {
        display: none;
    }

    .pc-product-card .pc-add-btn {
        flex: 0 0 auto;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        min-height: 38px;
        height: 38px;
        padding: 0;
        gap: 0;
        font-size: 0;
        line-height: 0;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .pc-product-card .pc-add-btn .pc-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }

    .pc-product-card .pc-product-actions-add .pc-add-btn {
        padding: 0;
        margin-top: 0;
    }

    .pc-product-card .pc-discount-badge {
        top: 6px;
        right: 6px;
        font-size: 0.62rem;
        padding: 4px 7px;
    }

    .pc-product-card .pc-stock-badge {
        top: 6px;
        left: 6px;
        font-size: 0.58rem;
        padding: 3px 6px;
        max-width: calc(100% - 12px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc-product-card .pc-oos-overlay {
        font-size: 0.75rem;
    }

    .pc-products-panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pc-add-btn,
    .pc-qty-input,
    .pc-filter-dropdown-trigger,
    .pc-sort-select {
        touch-action: manipulation;
    }

    .pc-product-card:hover {
        transform: none;
        box-shadow: 0 12px 28px rgba(24, 60, 87, 0.1);
    }

    html[dir='rtl'] .pc-product-card {
        flex-direction: column;
    }

    html[dir='rtl'] .pc-product-card .pc-product-body {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Small viewports: UOM full width on first row; qty + add on second — avoids clipping Add to cart */
@media (max-width: 767px) {
    .pc-product-card .pc-product-actions-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .pc-product-card .pc-product-actions-grid--has-uom {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .pc-product-card .pc-product-actions-grid--has-uom .pc-product-actions-uom {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .pc-product-card .pc-product-actions-grid--has-uom .pc-product-actions-qty {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .pc-product-card .pc-product-actions-grid--has-uom .pc-product-actions-add {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }
}

/* ≤575px: override 767 UOM grid so qty column grows with icon-only Add (later + higher path wins) */
@media (max-width: 575.98px) {
    .pc-product-card .pc-product-body .pc-product-actions .pc-product-actions-grid--has-uom {
        grid-template-columns: minmax(52px, 1fr) auto;
    }
}

html[dir='rtl'] .pc-product-promo-compact {
    right: auto;
    left: 8px;
}
html[dir='rtl'] .pc-discount-badge {
    right: auto;
    left: 10px;
}
html[dir='rtl'] .pc-product-img-wrapper:has(.pc-discount-badge) .pc-product-promo-compact {
    top: 44px;
    left: 8px;
    right: auto;
}

@media (max-width: 480px) {
    .pc-header-right {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .pc-lang-trigger,
    .pc-cart-btn {
        width: 48px;
        height: 48px;
    }

    .pc-results-pill {
        padding: 8px 12px;
        font-size: 0.74rem;
    }
}

html[dir='rtl'] .pc-search-icon {
    left: auto;
    right: 18px;
}

html[dir='rtl'] .pc-search-input {
    padding-left: 18px;
    padding-right: 52px;
}

/* ══════════════════════════════════════════════════════════════
   PAYMENT MODAL
   ══════════════════════════════════════════════════════════════ */
.pc-payment-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff;
    border-bottom: none;
    padding: 16px 24px;
}
.pc-payment-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: .8;
}
.pc-payment-header .btn-close:hover { opacity: 1; }

.pc-payment-section-title {
    font-size: .9rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Card visual preview */
.pc-card-preview { perspective: 1000px; }
.pc-card-visual {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 50%, #1e40af 100%);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 24px rgba(30, 58, 95, .3);
    position: relative;
    overflow: hidden;
}
.pc-card-visual::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
.pc-card-visual::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}
.pc-card-chip {
    width: 40px;
    height: 28px;
    background: linear-gradient(135deg, #d4af37, #f0d060);
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.pc-card-chip::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 2px;
}
.pc-card-number-display {
    font-size: 1.2rem;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.pc-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}
.pc-card-label {
    font-size: .55rem;
    letter-spacing: 1px;
    opacity: .7;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.pc-card-name-display {
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pc-card-expiry-display {
    font-size: .85rem;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* Card input wrapper with icons */
.pc-card-input-wrapper {
    position: relative;
}
.pc-card-input-wrapper .form-control {
    padding-right: 80px;
}
.pc-card-icons {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}
.pc-card-icon {
    height: 20px;
    border-radius: 3px;
}
.pc-cvv-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Payment summary bar */
.pc-payment-summary {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 14px 18px;
}
.pc-payment-total {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e3a5f;
}

/* Payment footer */
.pc-payment-footer {
    border-top: 1px solid #e5e7eb;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
}

/* Pay Now button */
.pc-btn-pay {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    transition: all .2s;
}
.pc-btn-pay:hover {
    background: linear-gradient(135deg, #047857, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .3);
    transform: translateY(-1px);
}
.pc-btn-pay:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Payment form fields refinement */
#pc-payment-modal .form-control,
#pc-payment-modal .form-select {
    font-size: .85rem;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    transition: border-color .2s, box-shadow .2s;
}
#pc-payment-modal .form-control:focus,
#pc-payment-modal .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
#pc-payment-modal .form-label {
    font-size: .82rem;
    font-weight: 500;
    color: #374151;
}

/* Payment modal responsive */
@media (max-width: 767px) {
    #pc-payment-modal .modal-dialog { margin: 10px; }
    .pc-card-visual { min-height: 140px; padding: 16px; }
    .pc-card-number-display { font-size: 1rem; letter-spacing: 2px; }
    .pc-payment-footer { flex-direction: column; gap: 8px; }
    .pc-payment-footer .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Mobile polish — ordering flow (single source for small screens)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body.pc-body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    /* One search UX: bottom-nav opens the bar; header search removed to stop horizontal overflow */
    .pc-header .pc-search-wrapper {
        display: none !important;
    }

    .pc-header-shell {
        overflow-x: visible;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
    }

    /* Language/currency panels are position:absolute; collapsed shell had overflow-x:hidden which clipped them */
    .pc-header-shell.pc-header-shell--collapsed {
        overflow: visible !important;
    }

    #pc-header-shell-expandable {
        overflow: visible !important;
    }

    .pc-header-row {
        flex-wrap: wrap !important;
        justify-content: space-between;
        align-items: center;
        row-gap: 10px;
        column-gap: 12px;
        min-width: 0 !important;
    }

    .pc-header-left {
        order: 1 !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .pc-header-right {
        order: 2 !important;
        flex: 0 0 auto !important;
        flex-wrap: wrap !important;
    }

    .pc-header-center {
        order: 3 !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        max-width: 100%;
    }

    .pc-header-center .pc-title {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        max-width: 100%;
    }

    .pc-title-block {
        align-items: center !important;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    /* Sticky search bar sits below sticky header (covers with/without validity bar) */
    #catalogue-app .pc-mobile-search-bar {
        top: clamp(88px, 28vw, 160px);
        z-index: 101;
    }

    /* iOS: 16px+ on focused inputs avoids viewport zoom */
    #catalogue-app input.form-control,
    #catalogue-app select.form-select,
    #catalogue-app textarea.form-control,
    #catalogue-app .pc-search-input,
    #catalogue-app .pc-qty-input,
    #catalogue-app .pc-price-input,
    #catalogue-app .pc-proposed-price-input,
    #catalogue-app .pc-cart-shipping-fee-input {
        font-size: 16px !important;
    }

    #pc-confirm-modal .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    .pc-confirm-phone-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-confirm-phone-code {
        max-width: none !important;
        width: 100%;
    }

    .pc-confirm-modal-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .pc-confirm-modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    .pc-cart-shipping-fee-input {
        max-width: none;
        flex: 1 1 140px;
        min-width: 0;
    }

    .pc-cart-footer .form-control,
    .pc-cart-footer input[type="date"] {
        max-width: 100%;
    }

    #pc-payment-modal .modal-dialog.modal-lg {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    #pc-payment-modal .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    #pc-product-modal .pc-detail-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        scrollbar-width: thin;
    }

    #pc-product-modal .pc-detail-tabs .nav-item {
        flex: 0 0 auto;
        min-width: 0;
    }

    #pc-product-modal .pc-detail-tabs .nav-link {
        width: auto;
        white-space: nowrap;
        padding-inline: 14px;
    }

    #pc-product-modal #pcTabDesc,
    #pc-product-modal .pc-detail-tab-content,
    #pc-product-modal .pc-detail-tab-content .tab-pane,
    #pc-product-modal #pc-detail-description {
        width: 100% !important;
        min-width: 0;
        max-width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    #pc-product-modal #pc-detail-description {
        display: block;
        margin: 0;
        padding: 0;
        overflow-y: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #pc-product-modal #pc-detail-description,
    #pc-product-modal #pc-detail-description * {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box;
    }

    #pc-product-modal #pc-detail-description table,
    #pc-product-modal #pc-detail-description tbody,
    #pc-product-modal #pc-detail-description thead,
    #pc-product-modal #pc-detail-description tfoot,
    #pc-product-modal #pc-detail-description tr,
    #pc-product-modal #pc-detail-description th,
    #pc-product-modal #pc-detail-description td,
    #pc-product-modal #pc-detail-description iframe,
    #pc-product-modal #pc-detail-description video,
    #pc-product-modal #pc-detail-description img {
        width: 100% !important;
        max-width: 100% !important;
    }

    #pc-product-modal #pc-detail-variants {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ── Cart: sales representative + chat / WhatsApp ─────────────── */
.pc-sales-rep-block {
    padding-top: 0.25rem;
    border-top: 1px solid rgba(0, 81, 123, 0.1);
    margin-top: 0.25rem;
}
.pc-sales-rep-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pc-slate-700, #334155);
    margin-bottom: 0.5rem;
}
.pc-sales-rep-profile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.pc-sales-rep-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 81, 123, 0.08);
    border: 2px solid rgba(0, 81, 123, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-sales-rep-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pc-sales-rep-avatar-fallback {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pc-primary, #00517b);
    letter-spacing: 0.02em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.pc-sales-rep-avatar-icon {
    color: var(--pc-primary, #00517b);
    opacity: 0.85;
}
.pc-sales-rep-details {
    flex: 1;
    min-width: 0;
}
.pc-sales-rep-line {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    line-height: 1.35;
    word-break: break-word;
}
.pc-sales-rep-label {
    color: var(--pc-slate-500, #64748b);
    margin-inline-end: 0.35rem;
}
.pc-sales-rep-value {
    color: var(--pc-slate-800, #1e293b);
}
a.pc-sales-rep-link {
    color: var(--pc-primary, #00517b);
    text-decoration: none;
}
a.pc-sales-rep-link:hover {
    text-decoration: underline;
}
.pc-sales-rep-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
}
.pc-sales-rep-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0, 81, 123, 0.15);
    background: #fff;
    color: var(--pc-primary, #00517b);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    padding: 0;
}
.pc-sales-rep-icon-btn:hover {
    background: rgba(0, 81, 123, 0.06);
    border-color: rgba(0, 81, 123, 0.25);
    transform: translateY(-1px);
    color: var(--pc-primary-hover, #003d5c);
}
/* WhatsApp brand: green button, white icon (matches official asset style) */
.pc-sales-rep-wa {
    color: #fff;
    background: #25d366;
    border-color: #128c7e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.pc-sales-rep-wa:hover {
    color: #fff;
    background: #20bd5a;
    border-color: #0f9d58;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}
.pc-sales-rep-wa:focus-visible {
    outline: 2px solid #128c7e;
    outline-offset: 2px;
}
.pc-sales-rep-chat .pc-icon {
    width: 22px;
    height: 22px;
    color: inherit;
}

html[dir="rtl"] .pc-cart-drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
}

html[dir="rtl"] .pc-cart-drawer.open {
    transform: translateX(0);
}

@media (max-width: 991px) {
    html[dir="rtl"] .pc-sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
        border-radius: var(--pc-radius-xl) 0 0 var(--pc-radius-xl);
        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
    }

    html[dir="rtl"] .pc-sidebar.open {
        transform: translateX(0);
    }
}

/* Final header/timer overrides: keep dropdowns above the countdown and make the timer easier to redesign */
.pc-header-shell {
    overflow: visible;
    isolation: isolate;
}

.pc-header {
    background: #fff;
}

#catalogue-app {
    background: linear-gradient(180deg, #fff 0 280px, transparent 280px);
}

#catalogue-app::before {
    top: 220px;
}

#catalogue-app::after {
    top: 320px;
}

.pc-header,
.pc-header-shell,
.pc-header-row,
.pc-header-validity-bar,
.pc-logo,
.pc-logo-fallback,
.pc-title,
.pc-header-kicker,
.pc-subtitle,
.pc-lang-trigger,
.pc-currency-trigger,
.pc-cart-btn,
.pc-header-sales .pc-header-sales-avatar,
.pc-header-sales .pc-sales-rep-avatar-img,
.pc-header-sales-name,
.pc-header-sales-meta {
    transition: all 0.24s ease;
}

@media (min-width: 992px) {
    .pc-sidebar {
        position: sticky;
        top: 126px;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 142px);
        max-height: calc(100vh - 142px);
        overflow: hidden;
    }

    .pc-sidebar-search {
        flex: 0 0 auto;
        margin-bottom: 8px;
        padding-inline-end: 8px;
    }

    .pc-sidebar-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding-inline-end: 8px;
        scrollbar-width: thin;
        scrollbar-color: rgba(13, 92, 132, 0.52) rgba(13, 92, 132, 0.08);
    }

    .pc-sidebar-scroll::-webkit-scrollbar {
        width: 10px;
    }

    .pc-sidebar-scroll::-webkit-scrollbar-track {
        background: linear-gradient(180deg, rgba(13, 92, 132, 0.08), rgba(13, 92, 132, 0.03));
        border-radius: 999px;
        margin-block: 10px;
    }

    .pc-sidebar-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(13, 92, 132, 0.82), rgba(13, 92, 132, 0.58));
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.92);
    }

    .pc-sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(13, 92, 132, 0.96), rgba(13, 92, 132, 0.72));
    }

    .pc-header--condensed {
        padding-top: 0;
    }

    .pc-header--condensed .pc-header-shell {
        border-radius: 0 0 20px 20px;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    }

    .pc-header--condensed .pc-header-row {
        min-height: 74px;
        padding-block: 8px !important;
        gap: 16px;
    }

    .pc-header--condensed .pc-logo,
    .pc-header--condensed .pc-logo-fallback {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .pc-header--condensed .pc-header-brand {
        gap: 12px;
    }

    .pc-header--condensed .pc-header-kicker,
    .pc-header--condensed .pc-header-sales-kicker {
        font-size: 0.74rem;
    }

    .pc-header--condensed .pc-subtitle {
        font-size: 0.92rem;
    }

    .pc-header--condensed .pc-title {
        font-size: clamp(1.28rem, 1.2vw, 1.6rem);
    }

    .pc-header--condensed .pc-lang-trigger,
    .pc-header--condensed .pc-cart-btn {
        width: 48px;
        height: 48px;
    }

    .pc-header--condensed .pc-currency-trigger {
        min-height: 48px;
        padding-inline: 14px;
        font-size: 0.9rem;
    }

    .pc-header--condensed .pc-header-right {
        gap: 10px;
    }

    .pc-header--condensed .pc-header-sales-inner {
        gap: 8px;
    }

    .pc-header--condensed .pc-header-sales .pc-header-sales-avatar,
    .pc-header--condensed .pc-header-sales .pc-sales-rep-avatar-img {
        width: 34px;
        height: 34px;
    }

    .pc-header--condensed .pc-header-sales-name {
        font-size: 0.8rem;
    }

    .pc-header--condensed .pc-header-sales-meta {
        font-size: 0.76rem;
    }

    .pc-header--condensed .pc-header-validity-bar {
        padding: 6px 0 8px;
    }

    .pc-header--condensed .pc-header-validity-bar .pc-validity-timer {
        gap: 10px;
    }

    .pc-header--condensed .pc-header-validity-bar .pc-validity-chip {
        min-width: 48px;
        padding: 5px 8px;
    }

    .pc-header--condensed .pc-header-validity-bar .pc-validity-chip-value {
        font-size: 0.88rem;
    }

    .pc-header--condensed .pc-header-validity-bar .pc-validity-chip-label {
        font-size: 0.58rem;
    }

    .pc-header--condensed .pc-header-promo-inline {
        font-size: 0.72rem;
    }

    .pc-header--condensed .pc-header-promo-kicker {
        font-size: 0.62rem;
        margin-bottom: 2px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .pc-sidebar {
        top: 110px;
        height: calc(100vh - 128px);
        max-height: calc(100vh - 128px);
    }
}

.pc-header-row,
.pc-header-right,
.pc-header-actions-cluster,
.pc-lang-dropdown-container,
.pc-currency-dropdown {
    position: relative;
}

.pc-header-row,
.pc-header-right,
.pc-header-actions-cluster {
    z-index: 3;
}

.pc-lang-dropdown-menu,
.pc-currency-dropdown-panel,
.pc-header-sales-dropdown-panel {
    z-index: 1200;
}
html[dir="rtl"] .pc-header-sales-dropdown-panel {
    left: auto;
    right: 0;
}

.pc-validity-timer {
    gap: 12px 14px;
    align-items: center;
}

.pc-validity-label {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pc-validity-value {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.pc-validity-chip {
    min-width: 68px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 81, 123, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 22px rgba(10, 34, 51, 0.08);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pc-validity-chip-value {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-primary);
}

.pc-validity-chip-label {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pc-slate-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pc-validity-note {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: #dc2626;
    font-weight: 700;
}

.pc-header-validity-bar .pc-validity-timer {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.pc-header-validity-bar .pc-validity-value {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-inline-start: auto;
}
.pc-header-validity-bar .pc-header-timer-col .pc-validity-value {
    margin-inline-start: 0;
}

.pc-header-validity-bar .pc-validity-chip {
    min-width: 54px;
    padding: 7px 10px;
    border-radius: 14px;
}

.pc-header-validity-bar .pc-validity-chip-value {
    font-size: 0.98rem;
}

.pc-header-validity-bar .pc-validity-chip-label {
    font-size: 0.62rem;
}

.pc-validity-timer--urgent .pc-validity-chip {
    border-color: rgba(180, 83, 9, 0.24);
    background: rgba(255, 247, 237, 0.96);
}

.pc-validity-timer--urgent .pc-validity-chip-value {
    color: #b45309;
}

.pc-validity-timer--expired .pc-validity-chip {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.96);
}

.pc-validity-timer--expired .pc-validity-note {
    color: #b91c1c;
}

@media (max-width: 767px) {
    .pc-header-validity-bar .pc-validity-timer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pc-header-validity-bar .pc-validity-value {
        justify-content: center;
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    .pc-validity-timer {
        justify-content: center;
        text-align: center;
    }

    .pc-validity-chip {
        min-width: 58px;
        padding: 8px 10px;
    }

    .pc-validity-chip-value {
        font-size: 1rem;
    }
}

/* ── UOM Selector ──────────────────────────────────────── */
.pc-uom-row {
    margin-bottom: 6px;
}

.pc-uom-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    appearance: auto;
}

.pc-product-actions-uom .pc-uom-select {
    border-color: rgba(0, 81, 123, 0.15);
    max-width: 100%;
}

.pc-uom-select:focus {
    outline: none;
    border-color: #2E9E6B;
    box-shadow: 0 0 0 2px rgba(46, 158, 107, 0.15);
}

.pc-cart-item-uom {
    display: inline-block;
    font-size: 0.7rem;
    background: #e5f7ef;
    color: #2E9E6B;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    font-weight: 600;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   Marketing & E-catalog CTA Block — pc-mkt-*
   ═══════════════════════════════════════════════════════════════ */

.pc-mkt-cta-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 6px;
}

/* Promotional display label (e.g. "starting 500dnt/month") */
.pc-mkt-display-label {
    align-self: flex-start;
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(239, 68, 68, .25);
    text-transform: none;
    line-height: 1.3;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CTA grid — default stacked, 2-col when >2 buttons */
.pc-mkt-cta-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-mkt-cta-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Compact CTA when grid is 2-col (more buttons → smaller) */
.pc-mkt-cta-compact {
    padding: 5px 8px !important;
    font-size: 12px !important;
    letter-spacing: .2px !important;
}

/* Base CTA button */
.pc-mkt-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity .18s, transform .12s;
}
.pc-mkt-cta-btn:hover { opacity: .88; transform: translateY(-1px); }
.pc-mkt-cta-btn:active { transform: translateY(0); }

/* Priority variants (pc-cta-* aliases for spec / embedding partners) */
.pc-mkt-cta-primary,
.pc-cta-primary {
    background: var(--pc-primary, #00517b);
    color: #fff;
}
.pc-mkt-cta-secondary,
.pc-cta-secondary {
    background: transparent;
    color: var(--pc-primary, #00517b);
    border: 1.5px solid var(--pc-primary, #00517b);
}
.pc-mkt-cta-tertiary,
.pc-cta-tertiary {
    background: transparent;
    color: var(--pc-slate-500, #64748b);
    border: 1.5px solid var(--pc-slate-300, #cbd5e1);
}

/* Download CTA rendering ONE or TWO separate targets (attached file + URL) in a single grid
   slot — stacked, not counted as two CTA "buttons" for the parent grid's 1-col/2-col decision. */
.pc-mkt-cta-download-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Brochure link */
.pc-mkt-brochure-link,
.pc-cta-brochure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--pc-primary, #00517b);
    text-decoration: none;
    padding: 3px 0;
}
.pc-mkt-brochure-link:hover,
.pc-cta-brochure:hover { text-decoration: underline; }

/* ============================================================
   Change request: orders-off, WhatsApp CTA, brochures, buy/quote
   CTAs, shared toast + live region. All logical-property / RTL-safe.
   ============================================================ */

/* Shared design tokens for the toast primitive */
#catalogue-app,
.pc-toast {
    --ms-toast-bg: #1f2937;
    --ms-toast-fg: #ffffff;
    --ms-toast-radius: 10px;
    --ms-toast-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    --ms-focus-ring: #2563eb;
}

/* Screen-reader-only live region */
.pc-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Toast ─────────────────────────────────────────────── */
.pc-toast {
    position: fixed;
    z-index: 4000;
    max-width: min(92vw, 420px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    /* Desktop: bottom inline-end */
    inset-block-end: 24px;
    inset-inline-end: 24px;
}
.pc-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.pc-toast-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ms-toast-bg);
    color: var(--ms-toast-fg);
    border-radius: var(--ms-toast-radius);
    box-shadow: var(--ms-toast-shadow);
    padding: 12px 14px;
}
.pc-toast-msg {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}
.pc-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--ms-toast-fg);
    border-radius: 6px;
    cursor: pointer;
    opacity: .85;
}
.pc-toast-close:hover { opacity: 1; }
.pc-toast-close:focus-visible {
    outline: 2px solid var(--ms-toast-fg);
    outline-offset: 1px;
}

/* Mobile: bottom-center, above the fixed bottom nav */
@media (max-width: 767.98px) {
    .pc-toast {
        inset-inline: 0;
        inset-inline-end: auto;
        inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 76px);
        margin-inline: auto;
        max-width: 92vw;
        width: max-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-toast { transition: opacity .01s linear; transform: none; }
    .pc-toast.is-visible { transform: none; }
}

/* ── Soft-bounce confirm banner (checkout modal) ──────────
   Neutral/informational — never an error state (no .invalid-feedback / red styling,
   no shake). Built on demand by showSoftBounceConfirmBanner(); inserted immediately
   after the Email field's wrapper inside #pc-confirm-modal. Logical properties only
   (margin-inline / padding-inline) so it mirrors correctly under [dir="rtl"]. */
#catalogue-app,
.pc-soft-bounce-banner {
    --ms-info-bg: var(--pc-accent-muted, rgba(245, 158, 11, 0.14));
    --ms-info-border: rgba(245, 158, 11, 0.4);
    --ms-info-fg: #7c4a03;
    --ms-info-icon: var(--pc-accent, #f59e0b);
}
.pc-soft-bounce-banner {
    margin-block-end: 16px;
    border: 1px solid var(--ms-info-border);
    background: var(--ms-info-bg);
    border-radius: var(--pc-radius-sm, 8px);
    padding: 12px 14px;
}
.pc-soft-bounce-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pc-soft-bounce-banner-icon {
    color: var(--ms-info-icon);
    margin-block-start: 2px;
    flex-shrink: 0;
}
.pc-soft-bounce-banner-body { flex: 1 1 auto; min-width: 0; }
.pc-soft-bounce-banner-msg {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ms-info-fg);
}
.pc-soft-bounce-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.pc-soft-bounce-btn-continue {
    border: none;
    background: var(--pc-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--pc-radius-sm, 8px);
    cursor: pointer;
    transition: background var(--pc-transition, .2s ease);
}
.pc-soft-bounce-btn-continue:hover { background: var(--pc-primary-hover); }
.pc-soft-bounce-btn-continue:disabled { opacity: .65; cursor: not-allowed; }
.pc-soft-bounce-btn-continue:focus-visible,
.pc-soft-bounce-btn-change:focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
}
.pc-soft-bounce-btn-change {
    border: none;
    background: transparent;
    color: var(--ms-info-fg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    padding: 7px 4px;
    cursor: pointer;
}
.pc-soft-bounce-btn-change:disabled { opacity: .6; cursor: not-allowed; }

/* Cart badge bump feedback */
@keyframes pcBadgeBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.pc-badge-bump { animation: pcBadgeBump .32s ease; }
@media (prefers-reduced-motion: reduce) {
    .pc-badge-bump { animation: none; }
}

/* ── Orders-off (quotation-only) ───────────────────────── */
.pc-orders-off #pc-place-order { display: none !important; }
/* Request Quotation becomes the sole / primary action */
.pc-orders-off .pc-cart-actions { flex-direction: column; }
.pc-orders-off .pc-btn-quotation { width: 100%; }

/* ── Quotation-off (orders-only) ───────────────────────── */
.pc-quotation-off #pc-request-quotation { display: none !important; }
/* Place Order becomes the sole / primary action */
.pc-quotation-off .pc-cart-actions { flex-direction: column; }
.pc-quotation-off .pc-btn-order { width: 100%; }

/* ── Drawer action emphasis (display-only, set on open from a CTA) ── */
.pc-cart-drawer[data-emphasis="order"] .pc-btn-order,
.pc-cart-drawer[data-emphasis="quotation"] .pc-btn-quotation {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .55);
}
.pc-cart-drawer[data-emphasis="order"] .pc-btn-quotation,
.pc-cart-drawer[data-emphasis="quotation"] .pc-btn-order {
    opacity: .85;
}

/* ── WhatsApp CTA ──────────────────────────────────────── */
.pc-mkt-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    /* Darkened brand green — white label passes AA (≥ 4.5:1) */
    background: #075E54;
    color: #ffffff;
    transition: opacity .18s, transform .12s;
}
.pc-mkt-cta-whatsapp:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.pc-mkt-cta-whatsapp:active { transform: translateY(0); }
.pc-mkt-cta-whatsapp .pc-icon { color: #ffffff; }
/* Mirror the WhatsApp glyph under RTL */
[dir="rtl"] .pc-mkt-cta-whatsapp .pc-icon { transform: scaleX(-1); }

/* Icon-only WhatsApp CTA on narrow viewports — the accessible name still
   comes from aria-label (already set in JS), so nothing is lost for
   screen readers. Shrinks the button to its content so a sibling CTA in
   the same 2-col row reclaims the freed horizontal space. Desktop keeps
   the "WhatsApp" label for clarity. */
@media (max-width: 480px) {
    .pc-mkt-cta-whatsapp .pc-mkt-cta-text {
        display: none;
    }
    .pc-mkt-cta-whatsapp {
        width: auto;
        flex: 0 0 auto;
        min-width: 44px;
        padding-inline: 12px;
    }
    .pc-mkt-cta-grid-2col {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .pc-mkt-cta-grid-2col > .pc-mkt-cta-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    .pc-mkt-cta-grid-2col > .pc-mkt-cta-whatsapp {
        flex: 0 0 auto;
    }
}

/* ── Brochure block on the card ────────────────────────── */
.pc-mkt-brochures {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 2px;
}
.pc-mkt-brochures-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--pc-slate-500, #64748b);
}
.pc-mkt-brochures-list,
.pc-detail-brochures-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pc-brochure-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pc-mkt-brochure-more {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 2px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-primary, #00517b);
    cursor: pointer;
    text-decoration: underline;
}

/* Detail-modal brochures sub-section */
.pc-detail-brochures { margin: 10px 0 4px; }
.pc-detail-brochures .pc-mkt-brochures-heading { margin-bottom: 4px; }
.pc-detail-brochures-list { gap: 6px; }

/* ── A11y: focus-visible rings + ≥44×44 touch targets ──── */
.pc-mkt-cta-btn:focus-visible,
.pc-mkt-cta-whatsapp:focus-visible,
.pc-mkt-brochure-link:focus-visible,
.pc-mkt-brochure-more:focus-visible {
    outline: 2px solid var(--ms-focus-ring, #2563eb);
    outline-offset: 2px;
    border-radius: 8px;
}
@media (pointer: coarse) {
    .pc-mkt-cta-btn,
    .pc-mkt-cta-whatsapp { min-height: 44px; }
    /* Compact 2-col mode must still hit 44px on touch */
    .pc-mkt-cta-compact { min-height: 44px; }
    .pc-mkt-brochure-link,
    .pc-mkt-brochure-more { min-height: 44px; }
}


/* ============================================================
   v2 — Top filter toolbar (sidebar removed, multi-select dropdowns)
   ============================================================ */
.pc-sidebar { display: none !important; }
.pc-legacy-filter-refs { display: none !important; }

.pc-main-stage { width: 100%; }

/* 5-col grid override at xxl for full-bleed catalogues. */
@media (min-width: 1400px) {
    #pc-product-grid > [class*="col-"] {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Toolbar layout — desktop: card above grid; mobile (≤767.98px): off-canvas sidebar via bottom bar */
.pc-toolbar-filters {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (min-width: 768px) {
    .pc-toolbar-filters {
        position: sticky;
        top: 0;
        z-index: 50;
        margin-bottom: 16px;
    }
}

@media (max-width: 767.98px) {
    .pc-toolbar-filters {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 340px);
        height: 100dvh;
        z-index: 1060;
        margin: 0;
        padding: 10px;
        border-radius: 0 22px 22px 0;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: stretch;
        justify-content: flex-start;
        transform: translateX(-110%);
        transition: transform 0.24s ease;
        -webkit-overflow-scrolling: touch;
    }
    html[dir="rtl"] .pc-toolbar-filters {
        inset: 0 0 0 auto;
        border-radius: 22px 0 0 22px;
        transform: translateX(110%);
    }
    .pc-toolbar-filters.open {
        padding: 18px 16px max(96px, calc(16px + env(safe-area-inset-bottom, 0px)));
        transform: translateX(0);
        box-shadow: 10px 0 34px rgba(15, 23, 42, 0.2);
    }
    html[dir="rtl"] .pc-toolbar-filters.open {
        box-shadow: -10px 0 34px rgba(15, 23, 42, 0.2);
    }
    .pc-toolbar-filters.open .pc-toolbar-row--filters {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pc-toolbar-filters.open .pc-filter-dropdown,
    .pc-toolbar-filters.open .pc-toolbar-instock,
    .pc-toolbar-filters.open .pc-toolbar-clear-btn,
    .pc-toolbar-filters.open .pc-toolbar-search,
    .pc-toolbar-filters.open .pc-toolbar-sort-inline {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }
    .pc-toolbar-filters.open .pc-filter-dropdown-panel {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 8px;
        box-shadow: none;
    }
    .pc-toolbar-search { max-width: none; flex: 1 1 100%; }
    .pc-filter-dropdown--multi { flex: 1 1 calc(50% - 5px); }
    .pc-filter-dropdown--multi .pc-filter-dropdown-trigger { width: 100%; min-width: 0; }
    .pc-toolbar-sort-inline,
    .pc-toolbar-instock { flex: 1 1 100%; }
    .pc-toolbar-sort-inline .pc-sort-select { width: 100%; }
}

@media (max-width: 767px) {
    .pc-toolbar-sort-inline .pc-sort-select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        clip-path: inset(50%) !important;
    }
}

.pc-toolbar-row--filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.pc-toolbar-row--filters > * { flex-shrink: 0; }
.pc-toolbar-sort-inline {
    position: relative;
    flex-shrink: 0;
}

.pc-toolbar-row--filters .pc-toolbar-search { flex-shrink: 1; }
@media (max-width: 991.98px) {
    .pc-toolbar-row--filters { flex-wrap: wrap; }
}
.pc-toolbar-row--meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 0;
}
.pc-toolbar-row--meta:empty { display: none; }
.pc-toolbar-spacer { flex: 1 1 auto; }

.pc-toolbar-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 320px;
    min-width: 240px;
    max-width: 360px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    height: 40px;
    transition: border-color .15s, box-shadow .15s;
}
.pc-toolbar-search:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* Override the global absolute-positioned .pc-search-icon for the toolbar search. */
.pc-toolbar-search .pc-search-icon {
    position: static !important;
    transform: none !important;
    color: #94A3B8;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
    margin-left: 12px;
    margin-right: 8px;
}
.pc-toolbar-search input.pc-search-input {
    flex: 1;
    min-width: 0;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    height: 100%;
    padding: 0 12px 0 0 !important;
    font-size: 14px;
    color: #0F172A;
    outline: none !important;
    box-shadow: none !important;
}
.pc-toolbar-search input.pc-search-input::placeholder { color: #94A3B8; }

.pc-toolbar-instock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.pc-toolbar-instock input { margin: 0; }

.pc-toolbar-sort-inline .pc-sort-select {
    height: 40px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0 28px 0 12px;
    font-size: 14px;
    background-color: #fff;
}

/* Multi-select dropdown — extends existing .pc-filter-dropdown */
.pc-filter-dropdown--multi .pc-filter-dropdown-trigger {
    height: 40px;
    min-width: 110px;
    padding: 0 12px;
}
.pc-filter-dropdown-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: #2563EB;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.pc-filter-dropdown--multi .pc-filter-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.pc-filter-dropdown--multi .pc-filter-dropdown-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: #2563EB;
}
.pc-filter-dropdown--multi .pc-filter-dropdown-option.selected {
    background: #EFF6FF;
}
.pc-filter-dropdown-option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-filter-dropdown-actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px;
    border-top: 1px solid #E5E7EB;
    background: #F8FAFC;
}
.pc-filter-dropdown-clear {
    background: transparent;
    border: 0;
    color: #2563EB;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
}
.pc-filter-dropdown-clear:hover { text-decoration: underline; }

.pc-filter-dropdown-panel--price {
    padding: 12px;
    width: 280px;
}

/* Active filter chips row */
.pc-toolbar-results {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}
.pc-toolbar-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
}
.pc-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E3A8A;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
}
.pc-active-chip-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #1E40AF;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}
.pc-active-chip-remove:hover { color: #DC2626; }

/* Video thumbnails on product cards */
.pc-product-video-thumb {
    /* Deliberate opt-out of the `object-fit: contain` applied to STILL product
       images (see the authoritative `.pc-product-img` block above). Video posters
       keep their original cover framing — their own black letterbox is intentional,
       and a video/poster laid over the `.pc-product-img-fallback` floor must cover
       the whole box or the fallback icon shows through the letterbox bars. This
       rule is later in the file than `.pc-product-img` (same specificity), which is
       what makes the opt-out win; the two mobile media queries above restate it for
       the same reason. */
    object-fit: cover;
    padding: 0;
    /* A <video> with no decoded frame paints NOTHING — it is transparent. The old
       `background: #000` here is what filled that transparency with the flat-black
       box a remote YouTube/Vimeo URL leaves behind. Transparent lets the always
       present `.pc-product-img-fallback` floor show through with zero JS
       orchestration; `object-fit: cover` hides the floor the instant a frame exists. */
    background: transparent;
    pointer-events: none;
}
.pc-product-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0,0,0,0.18);
    color: #fff;
    opacity: 1;
    transition: opacity 120ms ease-out;
    /* Above the media, below .pc-oos-overlay (z-index 2) and .pc-discount-badge (5). */
    z-index: 1;
}

/* The ONLY state-keyed visual rule in this feature. `idle`, `paused`, `spent`,
   `blocked` and `static` are deliberately pixel-identical — a visitor must never
   be able to infer that a playback budget was consumed or that autoplay failed. */
.pc-product-img-wrapper[data-pc-video-state="playing"] .pc-product-video-overlay,
.pc-product-img-wrapper[data-pc-video-state="playing"] .pc-product-video-badge {
    opacity: 0;
}
.pc-product-video-overlay .pc-icon {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
}
.pc-product-video-badge {
    position: absolute;
    bottom: 8px;
    /* Logical property: mirrors to the bottom-left corner in Arabic without an
       html[dir="rtl"] companion rule (there was none — the badge sat in the wrong
       corner for every RTL visitor). The wrapper is `overflow: hidden`, so there
       is no overflow risk in either direction. */
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    pointer-events: none;
    opacity: 1;
    transition: opacity 120ms ease-out;
    z-index: 1;
}
.pc-product-video-badge .pc-icon {
    width: 16px;
    height: 16px;
}

/* YouTube (nocookie) IFrame embed — cover-crops the fixed 1:1 media box with ZERO
   layout shift, no separate 16:9 box. It emulates object-fit:cover: full box height,
   width = height x 16/9 (177.78%), horizontally centred via a translateX(-50%) on a
   left:50% anchor. That transform is RTL-safe (no physical right/left inset), and the
   wrapper's overflow:hidden crops the overhang symmetrically — pixel-stable with the
   16:9 mqdefault poster beneath it, so poster -> iframe is a seamless swap.
   pointer-events:none masks YouTube's own hover chrome (title bar / share /
   "watch on YouTube") so hover + click always land on the wrapper, and combined with
   controls=0 the visitor never operates it. Starts at opacity 0 ABOVE the poster
   floor; only the `playing` state reveals it, so the box never shows a black/blank
   iframe during create/buffer. */
.pc-product-video-embed {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 177.78%;
    transform: translateX(-50%);
    border: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-out;
    /* Above the poster floor, below the ▶ overlay (z-index 1) and OOS/discount. */
    z-index: 0;
}
.pc-product-img-wrapper[data-pc-video-state="playing"] .pc-product-video-embed {
    opacity: 1;
}

/* Confirmed-hover intent cue: a subtle grow on the ▶ affordance while a mouse is
   lingering (applied by JS after the 200ms intent, removed on pointerleave). The
   playback state itself stays `playing` for both hover- and centre-driven playback
   (privacy rule) — this is only a pointer cue, never a trigger-source signal. */
.pc-video-hover-intent .pc-product-video-overlay .pc-icon {
    transform: scale(1.06);
    transition: transform 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    /* Autoplay is globally suppressed in JS under this preference; every card sits
       in the idle/poster state. Belt-and-braces: if a state attribute were ever set
       to "playing" anyway, the affordance must neither animate nor disappear, and
       the embed must neither fade nor the hover cue move. */
    .pc-product-video-overlay,
    .pc-product-video-badge {
        transition: none;
    }
    .pc-product-video-embed {
        transition: none;
    }
    .pc-video-hover-intent .pc-product-video-overlay .pc-icon {
        transition: none;
        transform: none;
    }
    .pc-product-img-wrapper[data-pc-video-state="playing"] .pc-product-video-overlay,
    .pc-product-img-wrapper[data-pc-video-state="playing"] .pc-product-video-badge {
        opacity: 1;
    }
}

/* Variant selectors on catalogue product card */
.pc-variant-block { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.pc-variant-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pc-variant-row > .pc-variant-dd:only-child { grid-column: 1 / -1; }
.pc-variant-dd { position: relative; }
.pc-variant-summary {
    list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; background: #fff; font-size: 12px; color: #0f172a;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.pc-variant-summary::-webkit-details-marker { display: none; }
.pc-variant-summary::after { content: "▾"; font-size: 10px; color: #64748b; }
.pc-variant-name { font-weight: 600; text-transform: capitalize; color: #00517B; }
.pc-variant-current { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pc-variant-menu {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 6px; max-height: 180px; overflow: auto;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    display: flex; flex-direction: column; gap: 2px;
}
.pc-variant-opt { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; cursor: pointer; border-radius: 4px; }
.pc-variant-opt:hover { background: #f1f5f9; }
.pc-variant-opt input { accent-color: #00517B; }

/* Variant single-select dropdowns (revised — desktop pill, mobile floating-label) */
.pc-variant-block { gap: 8px; margin: 8px 0 10px; }
.pc-variant-row { gap: 8px; }

.pc-variant-dd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 28px 4px 12px;
    border: 1px solid #d6dde5;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    cursor: pointer;
}
.pc-variant-dd:hover { border-color: #94a3b8; }
.pc-variant-dd:focus-within {
    border-color: #00517B;
    box-shadow: 0 0 0 3px rgba(0, 81, 123, .15);
}
/* Chevron (replaces native arrow) */
.pc-variant-dd::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #64748b;
    border-bottom: 1.5px solid #64748b;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: transform .15s ease, border-color .15s ease;
}
.pc-variant-dd:focus-within::after { border-color: #00517B; }
html[dir='rtl'] .pc-variant-dd { padding: 4px 12px 4px 28px; }
html[dir='rtl'] .pc-variant-dd::after { right: auto; left: 10px; }

.pc-variant-dd .pc-variant-name {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.pc-variant-dd .pc-variant-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    min-width: 0;
    cursor: pointer;
    text-overflow: ellipsis;
    padding-right: 0;
}

/* Mobile: stack the label above the value as a floating tag — bigger touch target,
   no horizontal collision between label and value */
@media (max-width: 575.98px) {
    .pc-variant-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pc-variant-dd {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 48px;
        padding: 6px 26px 6px 10px;
        border-radius: 10px;
    }
    .pc-variant-dd .pc-variant-name {
        font-size: 9.5px;
        line-height: 1.1;
        margin-bottom: 1px;
    }
    .pc-variant-dd .pc-variant-select {
        font-size: 16px; /* ≥16px prevents iOS focus-zoom AND enlarges native option list */
        line-height: 1.2;
        padding: 0;
        font-weight: 600;
    }
    .pc-variant-dd .pc-variant-select option {
        font-size: 16px;
        padding: 10px 12px;
        background: #fff;
        color: #0f172a;
    }
    .pc-variant-dd::after {
        right: 10px;
        top: 50%;
        width: 7px;
        height: 7px;
    }
    html[dir='rtl'] .pc-variant-dd { padding: 6px 10px 6px 26px; }
}

/* Custom variant dropdown trigger + panel (anchored under the field) */
.pc-variant-dd { padding: 0; cursor: default; }
.pc-variant-dd .pc-variant-trigger {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 4px 28px 4px 12px;
    cursor: pointer;
    border-radius: 8px;
}
.pc-variant-dd .pc-variant-current {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
}
.pc-variant-dd.is-open { border-color: #00517B; box-shadow: 0 0 0 3px rgba(0,81,123,.15); }
.pc-variant-dd.is-open::after { transform: translateY(-30%) rotate(225deg); }

.pc-variant-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d6dde5;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: pcVariantPanelIn .12s ease-out;
}
.pc-variant-panel[hidden] { display: none; }
.pc-variant-panel--up { top: auto; bottom: calc(100% + 6px); }
/* Let the panel escape the card's overflow:hidden while open */
.pc-product-card:has(.pc-variant-dd.is-open) { overflow: visible; }
.pc-variant-dd.is-open { z-index: 60; }
@keyframes pcVariantPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.pc-variant-opt-btn {
    all: unset;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    color: #0f172a;
    border-radius: 6px;
    cursor: pointer;
    min-height: 36px;
}
.pc-variant-opt-btn:hover { background: #f1f5f9; }
.pc-variant-opt-btn.is-selected {
    background: rgba(0, 81, 123, .08);
    color: #00517B;
    font-weight: 600;
}
.pc-variant-opt-btn.is-selected::before {
    content: "✓";
    margin-right: 6px;
    color: #00517B;
    font-weight: 700;
}
html[dir='rtl'] .pc-variant-opt-btn.is-selected::before { margin-right: 0; margin-left: 6px; }

@media (max-width: 575.98px) {
    .pc-variant-dd .pc-variant-trigger {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 48px;
        padding: 6px 26px 6px 10px;
    }
    .pc-variant-block { margin: 2px 0 2px; gap: 6px; }
    .pc-variant-dd { border-radius: 8px; }
    .pc-variant-dd .pc-variant-trigger {
        padding: 3px 20px 3px 8px;
        min-height: 36px;
        gap: 0;
    }
    .pc-variant-dd .pc-variant-name { font-size: 8.5px; line-height: 1; }
    .pc-variant-dd .pc-variant-current { font-size: 12px; line-height: 1.15; text-align: start; }
    .pc-variant-dd::after { right: 7px; width: 6px; height: 6px; }
    .pc-variant-row { gap: 6px; }
    .pc-variant-opt-btn { font-size: 12px; padding: 7px 10px; min-height: 32px; }
    .pc-variant-panel { max-height: 240px; }
}

.pc-cart-item-variants { font-size: 11px; color: #475569; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }