:root,
[data-theme="green"] {
    /* Fresh emerald: brighter canvas, punchier accent, clearer contrast */
    --ink: #102820;
    --mute: #3f5f52;
    --line: rgba(16, 40, 32, .12);
    --accent: #00a86a;
    --accent-deep: #008554;
    --accent-bright: #12d489;
    --accent-soft: rgba(0, 168, 106, .18);
    --accent-2: #00c278;
    --accent-rgb: 0, 168, 106;
    --glow: rgba(0, 168, 106, .32);
    --glass: rgba(255, 255, 255, .9);
    --glass-strong: rgba(255, 255, 255, .98);
    --surface: linear-gradient(165deg, #ffffff 0%, #f4fbf7 100%);
    --surface-solid: #f7fcf9;
    --surface-raised: linear-gradient(180deg, #ffffff 0%, #eef9f3 100%);
    --surface-border: rgba(0, 168, 106, .2);
    --surface-border-strong: rgba(0, 168, 106, .36);
    --canvas: #f5faf7;
    --canvas-mid: #e8f5ee;
    --wash-a: rgba(18, 212, 137, .18);
    --wash-b: rgba(0, 168, 106, .1);
    --wash-c: rgba(0, 133, 84, .07);
    --shell-grad: linear-gradient(155deg, #fbfefc 0%, #f3faf6 42%, #eaf7f0 78%, #f7fcf9 100%);
    --rail-wash: rgba(250, 253, 251, .98);
    --auth-bg: #009e64;
    --auth-deep: #006b44;
    --auth-mid: #00b873;
    --auth-bright: #1ee092;
    --auth-light: #b4f0d4;
    --danger: #e0484e;
    --warn: #d97706;
    --rail-w: 52px;
    --rail-w-open: 280px;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 4px 14px rgba(10, 50, 36, .06);
    --shadow-md: 0 12px 28px rgba(10, 50, 36, .09);
    --shadow-lg: 0 18px 44px rgba(10, 50, 36, .12);
    --font: "Outfit", sans-serif;
    --serif: "Source Serif 4", Georgia, serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Arviom — blue */
[data-theme="blue"] {
    --ink: #0a1f36;
    --mute: #3a5670;
    --line: rgba(70, 155, 220, .26);
    --accent: #0b84e0;
    --accent-deep: #0660a8;
    --accent-bright: #2aa3ff;
    --accent-soft: rgba(11, 132, 224, .16);
    --accent-2: #1a93ef;
    --accent-rgb: 11, 132, 224;
    --glow: rgba(11, 132, 224, .3);
    --glass: rgba(255, 255, 255, .86);
    --glass-strong: rgba(255, 255, 255, .96);
    --surface: linear-gradient(165deg, #ffffff 0%, #eef6fd 100%);
    --surface-solid: #f3f8fd;
    --surface-raised: linear-gradient(180deg, #ffffff 0%, #e6f2fb 100%);
    /* Soft sky-blue frames (was too dark / green-tinted on product UI) */
    --surface-border: rgba(90, 175, 235, .38);
    --surface-border-strong: rgba(42, 163, 255, .5);
    --canvas: #e4f1fb;
    --canvas-mid: #cee6f8;
    --wash-a: rgba(42, 163, 255, .24);
    --wash-b: rgba(11, 132, 224, .14);
    --wash-c: rgba(6, 96, 168, .1);
    --shell-grad: linear-gradient(155deg, #f3f9ff 0%, #e3f1fc 38%, #d4e9f9 68%, #eef6fd 100%);
    --rail-wash: rgba(236, 246, 253, .98);
    --auth-bg: #0a6fbf;
    --auth-deep: #054a84;
    --auth-mid: #1490ea;
    --auth-bright: #46b4ff;
    --auth-light: #b4dfff;
    --shadow-sm: 0 4px 14px rgba(8, 36, 64, .06);
    --shadow-md: 0 12px 30px rgba(8, 36, 64, .1);
    --shadow-lg: 0 18px 44px rgba(8, 36, 64, .13);
}

* { box-sizing: border-box; }

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font);
    color: var(--ink);
    background: var(--canvas);
    overflow-x: hidden;
    overflow-y: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ?????? ??????? ?? ??? ???????? */
.shell {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    /* clip — not visible: visible+overflow-x:hidden computes to overflow-y:auto (extra scrollbar) */
    overflow-y: clip;
    background:
        radial-gradient(980px 560px at 4% -6%, var(--wash-a), transparent 62%),
        radial-gradient(860px 580px at 98% 4%, var(--wash-b), transparent 60%),
        radial-gradient(720px 460px at 72% 108%, var(--wash-c), transparent 55%),
        var(--shell-grad);
}

.shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgb(var(--accent-rgb) / .12) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 12%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 12%, transparent 78%);
    pointer-events: none;
    opacity: .7;
}

.shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 40% at 12% 18%, rgb(var(--accent-rgb) / .12), transparent 70%),
        radial-gradient(ellipse 45% 35% at 88% 72%, rgb(var(--accent-rgb) / .1), transparent 68%);
}

/* soft ambient mist ? barely there, never steals focus from catalog */
.shell-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.shell-ambient span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .4;
    background: radial-gradient(circle, rgb(var(--accent-rgb) / .14), transparent 70%);
}

.shell.is-rail-busy .shell-ambient span {
    animation-play-state: paused;
}

.shell-ambient span:nth-child(1) {
    width: min(48vw, 520px);
    height: min(48vw, 520px);
    top: -8%;
    left: 18%;
    animation: ambient-drift-a 42s ease-in-out infinite alternate;
}

.shell-ambient span:nth-child(2) {
    width: min(42vw, 460px);
    height: min(42vw, 460px);
    right: -6%;
    top: 36%;
    opacity: .35;
    animation: ambient-drift-b 54s ease-in-out infinite alternate;
}

.shell-ambient span:nth-child(3) {
    width: min(50vw, 560px);
    height: min(50vw, 560px);
    left: 28%;
    bottom: -18%;
    opacity: .3;
    animation: ambient-drift-c 48s ease-in-out infinite alternate;
}

@keyframes ambient-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(4%, 6%) scale(1.06); }
}

@keyframes ambient-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-5%, 4%) scale(1.08); }
}

@keyframes ambient-drift-c {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(3%, -5%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .shell-ambient span {
        animation: none !important;
    }
    .rail,
    .shell.is-rail-open .rail,
    .rail-brand,
    .rail-label,
    .rail-link {
        transition: none !important;
    }
}

/* First paint: restore open/closed without replaying the expand animation */
.shell.is-rail-boot .rail,
.shell.is-rail-boot .rail-brand,
.shell.is-rail-boot .rail-label,
.shell.is-rail-boot .rail-link {
    transition: none !important;
}

@keyframes railPanelIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

body.is-login .shell-ambient {
    display: none;
}

.stage {
    position: relative;
    z-index: 1;
}

.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    flex: 0 0 auto;
    width: var(--rail-w);
    height: 100vh;
    height: 100dvh;
    padding: 10px 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: linear-gradient(
        185deg,
        rgba(250, 253, 251, .98) 0%,
        var(--rail-wash) 55%,
        rgba(236, 248, 242, .96) 100%
    );
    border-right: 1px solid var(--surface-border);
    box-shadow: 12px 0 36px rgba(10, 50, 36, .06);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* avoid contain:layout during width tween — clips long labels mid-animation */
    contain: style;
    transition:
        width .28s cubic-bezier(.2, .8, .2, 1),
        padding .28s cubic-bezier(.2, .8, .2, 1);
    transform: translateZ(0);
}

/* Reserve space for fixed rail so content doesn't sit underneath */
.shell {
    padding-left: var(--rail-w);
    transition: padding-left .28s cubic-bezier(.2, .8, .2, 1);
}

.shell.is-rail-open {
    padding-left: var(--rail-w-open);
}

.shell.is-rail-busy .rail {
    will-change: width;
    pointer-events: none;
}

.shell.is-rail-open .rail {
    width: var(--rail-w-open);
    padding: 14px 12px 16px;
}

.rail::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.rail-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 4px;
}

.rail-toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3f5a50;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.rail-toggle svg {
    width: 18px;
    height: 18px;
}

.rail-toggle:hover {
    background: rgba(255, 255, 255, .7);
    color: var(--ink);
}

.rail-brand {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    pointer-events: none;
    transition: opacity .2s ease, max-width .28s cubic-bezier(.2, .8, .2, 1);
}

.brand-lockup {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: inherit;
}

.brand-lockup__name {
    font-family: var(--font);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent-bright);
}

.brand-lockup__tag {
    font-size: 0.58rem;
    font-weight: 560;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}

.shell.is-rail-open .rail-brand {
    opacity: 1;
    max-width: 168px;
    pointer-events: auto;
}

.shell.is-rail-open .rail-brand .brand-lockup__name {
    font-size: 1.28rem;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: 1;
    width: 100%;
    overflow: visible;
    padding: 4px 0;
}

.rail-link {
    position: relative;
    display: grid;
    /* keep columns stable ? only labels fade/clip (no grid snap mid-tween) */
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    width: 100%;
    min-height: 34px;
    border-radius: var(--radius-sm);
    color: #3f5a50;
    background: transparent;
    transition: background .15s ease, color .15s ease;
    overflow: hidden;
    z-index: 1;
    flex: 0 0 auto;
    padding-right: 0;
}

.shell.is-rail-open .rail-link {
    padding-right: 10px;
}

.rail-link:hover,
.rail-link:focus-visible {
    background: rgba(19, 40, 32, .05);
    color: var(--ink);
    outline: none;
    z-index: 30;
}

.rail-link.is-on {
    color: var(--accent-deep);
    background: transparent;
    box-shadow: none;
}

.shell.is-rail-open .rail-link.is-on {
    background: var(--accent-soft);
}

.rail-link .picto {
    width: 19px;
    height: 19px;
    display: block;
    margin: 0 auto;
    grid-column: 1;
    justify-self: center;
}

.shell.is-rail-open .rail-link .picto {
    margin: 0 auto;
}

.rail-label {
    display: block;
    grid-column: 2;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    text-overflow: clip;
    font-size: 0.92rem;
    font-weight: 650;
    padding-left: 0;
    justify-self: start;
    transform: translateX(-4px);
    transition:
        opacity .18s ease,
        max-width .28s cubic-bezier(.2, .8, .2, 1),
        padding .28s cubic-bezier(.2, .8, .2, 1),
        transform .22s cubic-bezier(.2, .8, .2, 1);
}

.shell.is-rail-open .rail-label {
    opacity: 1;
    max-width: 220px;
    padding-left: 4px;
    transform: none;
}

.picto {
    width: 19px;
    height: 19px;
    display: block;
}

.tip {
    position: fixed;
    left: 0;
    top: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(20, 48, 38, .92);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(20, 48, 38, .28);
    transition: opacity .18s var(--ease), visibility .18s;
    z-index: 400;
    transform: translateY(-50%);
    /* keep off-layout when hidden so arrow can't create page scroll */
    content-visibility: hidden;
}

.tip.is-on {
    opacity: 1;
    visibility: visible;
    content-visibility: visible;
}

.tip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: rgba(20, 48, 38, .92);
    transform: translateY(-50%) rotate(45deg);
}

.shell.is-rail-open .tip {
    display: none !important;
}

.rail-login { margin-top: auto; }

.stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 20px 28px 64px 22px;
    overflow-x: auto;
    /* clip (not visible): visible+overflow-x computes to overflow-y:auto → dual scrollbars */
    overflow-y: clip;
}

/* Keep content inside stage when rail is open on mid-size screens */
@media (max-width: 1280px) {
    .shell.is-rail-open .stage {
        padding: 16px 16px 56px 14px;
    }
}

@media (max-width: 1100px) {
    .shell.is-rail-open .stage {
        padding: 14px 12px 48px 10px;
    }
}

.topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin: 0 0 18px;
    padding: 12px 14px 12px 16px;
    border-radius: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .75) inset,
        var(--shadow-md);
}

.topbar__lead {
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
}

.topbar:has(.header-search) .topbar__lead {
    flex: 0 1 auto;
    max-width: min(280px, 34%);
}

.topbar:has(.header-search) .topbar__account {
    flex: 0 0 auto;
}

.topbar__page {
    display: grid;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

.topbar__title {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__hint {
    margin: 0;
    color: var(--mute);
    font-size: 0.78rem;
    font-weight: 450;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__account {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
}

.topbar__account--home {
    flex: 1 1 auto;
}

.topbar__finance {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 10px 4px;
    border-radius: 16px;
    background: rgba(238, 246, 242, .78);
    border: 1px solid rgba(20, 48, 38, .06);
}

.topbar__stat {
    display: grid;
    gap: 4px;
    padding: 4px 18px;
    text-align: left;
    min-width: 0;
}

.topbar__stat + .topbar__stat {
    border-left: 1px solid rgba(20, 48, 38, .08);
}

.topbar__stat-label {
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--mute);
    white-space: nowrap;
}

.topbar__stat-value {
    font-size: 1.18rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1.15;
}

.topbar__stat-value.is-credit { color: var(--accent-deep); }
.topbar__stat-value.is-debt { color: var(--warn); }

.topbar__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.topbar__manager-wrap {
    position: relative;
    border-radius: 16px;
    background: rgb(var(--accent-rgb) / .07);
    border: 1px solid var(--surface-border);
    padding: 4px;
}

.topbar__manager {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: background .15s;
}

.topbar__manager:hover,
.topbar__manager-wrap.is-open .topbar__manager,
.topbar__manager-wrap:hover .topbar__manager {
    background: rgba(20, 48, 38, .05);
}

.topbar__cart-wrap {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 16px;
    background: rgb(var(--accent-rgb) / .07);
    border: 1px solid var(--surface-border);
}

.topbar__manager-label {
    font-size: 0.92rem;
    font-weight: 560;
    color: var(--mute);
    white-space: nowrap;
}

.topbar__avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(160deg, #c8efe0, #7ecfaf);
    color: var(--accent-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.topbar__avatar--img {
    object-fit: cover;
    padding: 0;
}

.topbar__manager-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    width: min(300px, calc(100vw - 32px));
    padding: 0;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(20, 48, 38, .08);
    box-shadow: 0 16px 40px rgba(20, 48, 38, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}

.topbar__manager-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.topbar__manager-wrap:hover .topbar__manager-panel,
.topbar__manager-wrap:focus-within .topbar__manager-panel,
.topbar__manager-wrap.is-open .topbar__manager-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.topbar__manager-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(238, 246, 242, .85);
    border-radius: 16px 16px 0 0;
}

.topbar__manager-photo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(160deg, #c8efe0, #7ecfaf);
    color: var(--accent-deep);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.topbar__manager-photo--img {
    object-fit: cover;
}

.topbar__manager-who {
    min-width: 0;
}

.topbar__manager-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.25;
}

.topbar__manager-role {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--mute);
}

.topbar__manager-links {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.topbar__manager-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.topbar__manager-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 8px 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}

.topbar__manager-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__manager-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--mute);
}

.topbar__manager-link:hover {
    background: rgb(var(--accent-rgb) / .08);
    color: var(--accent-deep);
}

.topbar__manager-link:hover svg {
    color: var(--accent-deep);
}

.topbar__manager-copy {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.topbar__manager-copy svg {
    width: 15px;
    height: 15px;
    grid-area: 1 / 1;
}

.topbar__manager-copy-check {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .15s, transform .15s;
}

.topbar__manager-copy-icon {
    opacity: 1;
    transition: opacity .15s, transform .15s;
}

.topbar__manager-copy:hover {
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
}

.topbar__manager-copy.is-copied {
    color: var(--accent);
}

.topbar__manager-copy.is-copied .topbar__manager-copy-icon {
    opacity: 0;
    transform: scale(.8);
}

.topbar__manager-copy.is-copied .topbar__manager-copy-check {
    opacity: 1;
    transform: scale(1);
}

.topbar__icon-btn {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--mute);
    transition: background .15s, color .15s;
}

.topbar__icon-btn svg {
    width: 22px;
    height: 22px;
}

.topbar__icon-btn:hover {
    background: rgb(var(--accent-rgb) / .1);
    color: var(--ink);
}

.topbar__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-deep);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--mute);
    font-size: 0.84rem;
    font-weight: 550;
    transition: background .15s, color .15s;
}

.topbar__logout svg {
    width: 17px;
    height: 17px;
}

.topbar__logout:hover {
    background: rgba(20, 48, 38, .05);
    color: var(--ink);
}

.stage > .lede,
.stage-lede {
    margin: 0 0 22px;
    max-width: 52rem;
}

.hero {
    margin-bottom: 28px;
    padding: 28px 30px 30px;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .78) 0%,
        rgba(255, 255, 255, .48) 100%
    );
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        0 20px 50px rgba(20, 48, 38, .06),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
}

.hero h1 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    background: linear-gradient(120deg, #1e3a32 20%, var(--accent) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lede {
    margin: 0;
    max-width: 38rem;
    color: var(--mute);
    font-size: 1.06rem;
    line-height: 1.6;
}

.stage > h1 {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.stage > .lede {
    margin: 0 0 28px;
    max-width: 42rem;
    color: var(--mute);
    font-size: 1.05rem;
    line-height: 1.55;
}

.panels {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

.panel {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-bright), var(--accent), transparent 78%);
    opacity: .85;
}

.panel:hover {
    transform: translateY(-3px);
    border-color: var(--surface-border-strong);
    box-shadow: var(--shadow-lg);
}

.panel.wide { grid-column: 1 / -1; }

.panel h2 {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.panel p {
    margin: 0;
    color: var(--mute);
    line-height: 1.55;
}

.panel pre {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(160deg, #0f172a, #132337);
    color: #b8edd8;
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid rgba(255, 255, 255, .06);
}

.note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
    font-size: 0.84rem;
    font-weight: 560;
}

/* ??? login ??? */
body.is-login {
    background: var(--auth-bg);
}

body.is-login .shell {
    display: block;
    background: var(--auth-bg);
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: 0;
}

body.is-login .shell::before,
body.is-login .rail,
body.is-login .topbar {
    display: none !important;
}

body.is-login .stage {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-screen {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    overflow: hidden;
    background: var(--auth-bg);
}

.auth-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.auth-veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 255, 255, .06), transparent 70%);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    padding: 48px 48px 36px;
    background: rgba(255, 255, 255, .95);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        0 24px 56px rgba(8, 30, 24, .3),
        0 1px 0 rgba(255, 255, 255, .7) inset;
    backdrop-filter: blur(10px);
}

.auth-back {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    color: var(--mute);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.auth-back:hover {
    color: var(--ink);
    background: rgba(15, 35, 55, .06);
}

.auth-card__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px auto 36px;
    text-align: center;
}

.auth-card__logo .brand-lockup__name {
    font-size: 2.35rem;
    letter-spacing: .12em;
    color: var(--accent);
}

.auth-card__logo .brand-lockup__tag {
    font-size: 0.72rem;
    letter-spacing: .16em;
    color: var(--ink);
}

.auth {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.auth-error {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(176, 48, 48, .28);
    border-radius: 8px;
    background: rgba(176, 48, 48, .08);
    color: #8a1f1f;
    font-size: 0.9rem;
    line-height: 1.4;
}

.panel-empty {
    margin: 0;
    color: var(--mute);
    font-size: 0.92rem;
    line-height: 1.45;
}

.auth label {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
}

.auth input[type="text"],
.auth input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(19, 40, 32, .14);
    border-radius: 8px;
    font: inherit;
    background: #eef2f5;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.auth input[type="text"]:focus,
.auth input[type="password"]:focus {
    outline: none;
    background: #fff;
    border-color: rgb(var(--accent-rgb) / .55);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}

.auth-pass {
    position: relative;
}

.auth-pass input {
    padding-right: 44px;
}

.auth-pass__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    translate: 0 -50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
}

.auth-pass__toggle svg {
    width: 18px;
    height: 18px;
}

.auth-pass__toggle:hover {
    color: var(--ink);
    background: rgba(19, 40, 32, .05);
}

.auth-remember {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 4px 0 22px;
    font-size: 0.88rem;
    font-weight: 450;
    color: var(--mute);
    cursor: pointer;
}

.auth-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-actions button[type="submit"],
.auth-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, background .15s, color .15s, border-color .15s;
}

.auth-actions button[type="submit"] {
    border: 0;
    background: var(--accent);
    color: #fff;
}

.auth-actions button[type="submit"]:hover {
    filter: brightness(1.06);
}

.auth-register {
    border: 1.5px solid var(--accent);
    background: #fff;
    color: var(--accent);
}

.auth-register:hover {
    background: rgb(var(--accent-rgb) / .08);
}

.auth-hint {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--mute);
}

.auth-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(19, 40, 32, .06);
    color: var(--ink);
}

/* ??? catalog filter drawer ??? */
.catalog-hero { margin-bottom: 20px; }

.page-head {
    display: none;
}

.catalog-layout {
    display: block;
}

.catalog-main {
    min-width: 0;
}

/*
 * Catalog pin (desktop only): storefront/topbar + toolbar.
 * Phone ≤800px — do not touch; keep original flow.
 */
@media (min-width: 801px) {
    body.is-catalog {
        --catalog-pin-top: 12px;
        --catalog-pin-gap: 12px;
        --catalog-pin-x: 14px;
        --catalog-pin-x-left: 10px;
        --catalog-bar-h: 0px;
        --catalog-tool-h: 0px;
    }

    body.is-catalog:not(.is-guest-storefront) {
        --catalog-pin-top: 20px;
        --catalog-pin-x: 28px;
        --catalog-pin-x-left: 22px;
    }

    /* Must beat body.is-catalog:not(.is-guest-storefront) (same 0,2,1) — flush while scrolling */
    body.is-catalog.is-catalog-compact {
        --catalog-pin-top: 0px;
    }

    body.is-catalog .storefront-bar,
    body.is-catalog .topbar {
        position: fixed;
        top: var(--catalog-pin-top);
        left: calc(var(--rail-w) + var(--catalog-pin-x-left));
        right: var(--catalog-pin-x);
        z-index: 60;
        margin: 0;
        width: auto;
        max-width: none;
        box-sizing: border-box;
        flex-wrap: nowrap;
        align-items: center;
        transition:
            top .56s cubic-bezier(.16, 1, .3, 1),
            border-radius .48s cubic-bezier(.16, 1, .3, 1),
            gap .48s cubic-bezier(.16, 1, .3, 1);
    }

    /* Search fills the free row; tools stay packed on the right (no dead middle hole). */
    body.is-catalog .storefront-bar .header-search,
    body.is-catalog .topbar .header-search {
        flex: 1 1 auto;
        max-width: none;
        min-width: 140px;
    }

    body.is-catalog .storefront-bar__tools {
        flex: 0 0 auto;
        margin-left: 0;
    }

    body.is-catalog.is-catalog-compact .storefront-bar,
    body.is-catalog.is-catalog-compact .topbar {
        top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body.is-catalog:has(.shell.is-rail-open) .storefront-bar,
    body.is-catalog:has(.shell.is-rail-open) .topbar {
        left: calc(var(--rail-w-open) + var(--catalog-pin-x-left));
    }

    body.is-catalog .catalog-toolbar {
        position: fixed;
        top: calc(var(--catalog-pin-top) + var(--catalog-bar-h) + var(--catalog-pin-gap));
        left: calc(var(--rail-w) + var(--catalog-pin-x-left));
        right: var(--catalog-pin-x);
        z-index: 59;
        margin: 0;
        padding: 8px 0 10px;
        width: auto;
        max-width: none;
        box-sizing: border-box;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible;
    }

    body.is-catalog .catalog-toolbar::before,
    body.is-catalog .catalog-toolbar::after {
        content: none !important;
        display: none !important;
    }

    body.is-catalog:has(.shell.is-rail-open) .catalog-toolbar {
        left: calc(var(--rail-w-open) + var(--catalog-pin-x-left));
    }

    body.is-catalog .catalog-toolbar__row {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #catalogBarSpacer,
    #catalogToolSpacer {
        display: block;
        width: 100%;
        flex: 0 0 auto;
        pointer-events: none;
        /* No height transition — animating spacers fights native scroll and feels jerky */
        overflow-anchor: none;
    }

    body.is-catalog .storefront-bar,
    body.is-catalog .topbar,
    body.is-catalog .catalog-toolbar {
        overflow-anchor: none;
    }

    /* Slots open instantly (buttons FLIP in); search/phone animate separately */
    .catalog-pin-slot {
        display: none;
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: visible;
        pointer-events: none;
    }

    body.is-catalog-compact .catalog-pin-slot:not([hidden]) {
        display: flex;
        pointer-events: auto;
    }

    body.is-catalog-compact .storefront-bar,
    body.is-catalog-compact .topbar {
        flex-wrap: nowrap;
        gap: 10px 12px;
    }

    body.is-catalog-compact .catalog-pin-slot--actions {
        margin-right: 2px;
    }

    body.is-catalog-compact .catalog-pin-slot--controls {
        margin-left: 2px;
    }

    body.is-catalog-compact .catalog-pin-slot .catalog-actions,
    body.is-catalog-compact .catalog-pin-slot .catalog-controls,
    body.is-catalog-compact .catalog-pin-slot .compare-toolbar {
        margin: 0 !important;
        box-shadow: var(--shadow-sm);
        will-change: transform;
    }

    body.is-catalog .catalog-pin-slot .filter-btn,
    body.is-catalog .catalog-actions .filter-btn {
        transition:
            height .48s cubic-bezier(.16, 1, .3, 1),
            padding .48s cubic-bezier(.16, 1, .3, 1),
            font-size .48s cubic-bezier(.16, 1, .3, 1);
    }

    body.is-catalog-compact .catalog-pin-slot .filter-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 0.84rem;
    }

    body.is-catalog .page-size__btn,
    body.is-catalog .view-toggle__btn {
        transition:
            min-width .4s cubic-bezier(.16, 1, .3, 1),
            height .4s cubic-bezier(.16, 1, .3, 1),
            background .2s ease,
            color .2s ease,
            box-shadow .2s ease;
    }

    body.is-catalog-compact .catalog-pin-slot .page-size__btn,
    body.is-catalog-compact .catalog-pin-slot .view-toggle__btn {
        min-width: 32px;
        height: 34px;
    }

    /* Shrink search; hide B2B + phone on guest storefront */
    body.is-catalog .storefront-bar .header-search,
    body.is-catalog .topbar .header-search {
        transition:
            flex-basis .56s cubic-bezier(.16, 1, .3, 1),
            max-width .56s cubic-bezier(.16, 1, .3, 1),
            height .56s cubic-bezier(.16, 1, .3, 1),
            padding .56s cubic-bezier(.16, 1, .3, 1);
    }

    body.is-catalog-compact .storefront-bar .header-search,
    body.is-catalog-compact .topbar .header-search {
        flex: 1 1 180px;
        max-width: 300px;
        height: 40px;
        padding: 0 14px;
    }

    body.is-catalog .storefront-bar__portal,
    body.is-catalog .storefront-bar__phones,
    body.is-catalog .storefront-bar__phone {
        transition:
            opacity .22s ease,
            max-width .28s ease,
            margin .28s ease,
            padding .28s ease;
        max-width: 280px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Collapse in the fixed bar only — in-flow spacers use expanded reserves (no catalog jerk). */
    body.is-catalog-compact .storefront-bar__portal,
    body.is-catalog-compact .storefront-bar__phones,
    body.is-catalog-compact .storefront-bar__phone {
        opacity: 0;
        max-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        pointer-events: none;
        min-width: 0 !important;
    }

    body.is-catalog .topbar__hint {
        transition:
            opacity .4s cubic-bezier(.16, 1, .3, 1),
            max-height .48s cubic-bezier(.16, 1, .3, 1);
    }

    body.is-catalog-compact .topbar__hint {
        opacity: 0;
        max-height: 0;
        margin: 0;
        overflow: hidden;
    }

    body.is-catalog .topbar__lead {
        transition: max-width .56s cubic-bezier(.16, 1, .3, 1);
    }

    body.is-catalog-compact .topbar__lead {
        max-width: min(160px, 22%);
    }

    /* Breadcrumbs: fade only — never collapse height (that jerked the catalog on expand). */
    body.is-catalog .catalog-selection {
        transition: opacity .28s ease;
    }

    body.is-catalog-compact .catalog-selection {
        opacity: 0;
        pointer-events: none;
    }

    /* Toolbar fades out in place — do NOT slide top into the header (overlap twitch). */
    body.is-catalog .catalog-toolbar {
        transition:
            opacity .28s ease,
            visibility .28s ease;
    }

    body.is-catalog-compact .catalog-toolbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* Keep geometry for spacer/FLIP origin; hide without collapsing into the bar */
    }

    body.is-catalog-compact .catalog-toolbar__row {
        pointer-events: none;
    }
}

@media (max-width: 800px) {
    /* Pin is desktop-only; drop spacers if they were created before resize */
    #catalogBarSpacer,
    #catalogToolSpacer {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .catalog-pin-slot {
        display: none !important;
    }

    body.is-catalog-compact .storefront-bar__portal,
    body.is-catalog-compact .storefront-bar__phones,
    body.is-catalog-compact .storefront-bar__phone {
        opacity: 1;
        max-width: none !important;
        pointer-events: auto;
    }
}

/* Catalog: no horizontal scrollbar. Use clip (not visible) for Y —
   overflow-x:hidden + overflow-y:visible computes to overflow-y:auto → inner scrollbar. */
body.is-catalog,
body.is-catalog .shell,
body.is-catalog .main-column,
body.is-catalog .stage,
body.is-catalog .catalog-layout,
body.is-catalog .catalog-main,
body.is-catalog .catalog-toolbar,
body.is-catalog .catalog-toolbar__row {
    overflow-x: hidden;
    overflow-y: clip;
    max-width: 100%;
}

body.is-catalog .catalog-toolbar__row,
body.is-catalog .catalog-controls,
body.is-catalog .catalog-actions {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: clip;
}

.catalog-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.catalog-toolbar__row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

/* B2B: search lives in topbar — keep actions left, controls right */
.catalog-toolbar__row:not(:has(.catalog-search)) .catalog-controls {
    margin-left: auto;
}

.catalog-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm);
}

.catalog-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}

.catalog-search:focus-within {
    border-color: rgb(var(--accent-rgb) / .45);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12), var(--shadow-sm);
}

.catalog-search svg {
    width: 18px;
    height: 18px;
    color: var(--mute);
    flex: 0 0 auto;
}

.catalog-search input {
    border: 0;
    background: transparent;
    font: inherit;
    width: 100%;
    height: 48px;
    outline: none;
    color: var(--ink);
}

.catalog-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px;
    border-radius: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm);
}

/* Sit just left of page-size / view toggle (right side of toolbar) */
.compare-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px;
    border-radius: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm);
}

.compare-toolbar[hidden] {
    display: none !important;
}

/* Phone: floating compare when the top toolbar scrolled away */
.compare-fab {
    display: none;
}

.compare-fab[hidden] {
    display: none !important;
}

@media (max-width: 800px) {
    .compare-fab {
        display: grid;
        place-items: center;
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        z-index: 190;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--accent);
        color: #fff;
        box-shadow: 0 10px 28px rgb(var(--accent-rgb) / .38), 0 2px 8px rgba(15, 35, 55, .12);
        text-decoration: none;
        transition: transform .18s var(--ease), opacity .18s var(--ease), visibility .18s;
    }

    .compare-fab svg {
        width: 22px;
        height: 22px;
    }

    .compare-fab__count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #fff;
        color: var(--accent-deep);
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 20px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(15, 35, 55, .16);
    }

    .compare-fab__count[hidden] {
        display: none !important;
    }
}

.compare-toolbar:not([hidden]) + .catalog-controls {
    margin-left: 0;
}

.compare-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 560;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.compare-tool-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--accent-deep);
}

.compare-tool-btn:hover,
.compare-tool-btn:focus-visible {
    background: rgb(var(--accent-rgb) / .1);
    border-color: rgb(var(--accent-rgb) / .28);
    color: var(--accent-deep);
    outline: none;
}

.compare-tool-btn.is-active,
.compare-tool-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .28);
}

.compare-tool-btn.is-active svg,
.compare-tool-btn[aria-pressed="true"] svg {
    color: #fff;
}

.compare-tool-btn--link {
    background: rgb(var(--accent-rgb) / .1);
    border-color: rgb(var(--accent-rgb) / .22);
    color: var(--accent-deep);
}

.compare-tool-btn--muted {
    color: var(--mute);
}

.compare-diff-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.compare-diff-toggle[hidden] {
    display: none !important;
}

.compare-diff-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compare-diff-toggle__ui {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.compare-diff-toggle__label {
    font-size: 0.82rem;
    font-weight: 560;
    color: var(--ink);
    white-space: nowrap;
}

.compare-diff-toggle__switch {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: rgba(15, 35, 55, .14);
    transition: background .18s;
}

.compare-diff-toggle__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 35, 55, .18);
    transition: transform .18s;
}

.compare-diff-toggle:hover .compare-diff-toggle__ui,
.compare-diff-toggle > input:focus-visible + .compare-diff-toggle__ui {
    background: rgb(var(--accent-rgb) / .08);
    border-color: rgb(var(--accent-rgb) / .28);
    outline: none;
}

.compare-diff-toggle > input:checked + .compare-diff-toggle__ui {
    border-color: rgb(var(--accent-rgb) / .28);
    background: rgb(var(--accent-rgb) / .1);
}

.compare-diff-toggle > input:checked + .compare-diff-toggle__ui .compare-diff-toggle__label {
    color: var(--accent-deep);
}

.compare-diff-toggle > input:checked + .compare-diff-toggle__ui .compare-diff-toggle__switch {
    background: var(--accent);
}

.compare-diff-toggle > input:checked + .compare-diff-toggle__ui .compare-diff-toggle__switch::after {
    transform: translateX(16px);
}

.catalog-grid.is-compare-diff-only .product-card.is-specs-compare .product-card__specs-row:not(.is-diff) {
    display: none !important;
}

.compare-page-tools,
.compare-toolbar-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 800px) {
    .compare-page-tools,
    .compare-toolbar-bar {
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .compare-toolbar-bar .compare-diff-toggle {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .compare-toolbar-bar .compare-diff-toggle__ui {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }

    .compare-toolbar-bar .compare-tool-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
    }
}

.compare-page-tools[hidden],
.compare-toolbar-bar[hidden] {
    display: none !important;
}

.compare-page {
    display: grid;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
}

.compare-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--mute);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.compare-empty p {
    margin: 0 0 12px;
    font-size: 1rem;
}

.compare-table-wrap {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* Wide tables: horizontal scroll only; vertical = page scroll */
.compare-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px;
}

.compare-table th,
.compare-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 35, 55, .08);
    border-right: 1px solid rgba(15, 35, 55, .06);
    vertical-align: top;
    text-align: left;
    font-size: 0.9rem;
}

.compare-table th:last-child,
.compare-table td:last-child {
    border-right: 0;
}

.compare-table__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 180px;
    background: #f7faf8;
    color: var(--mute);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.compare-table__product {
    position: relative;
    min-width: 180px;
    max-width: 220px;
    background: #fbfdfc;
}

.compare-table__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 8px;
    background: #fff;
    color: var(--mute);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.compare-table__remove:hover {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, .28);
}

.compare-table__media {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 4px 0 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 35, 55, .08);
}

.compare-table__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-table__name {
    display: block;
    margin: 0 0 4px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.compare-table__name:hover {
    color: var(--accent-deep);
}

.compare-table__sku {
    margin: 0 0 6px;
    color: var(--mute);
    font-size: 0.78rem;
}

.compare-table__price {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.compare-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    color: var(--mute);
    font-weight: 500;
    min-width: 180px;
}

/* Phone: entire left label column scrolls with products (corner + Бренд / …) */
@media (max-width: 800px) {
    .compare-table__corner,
    .compare-table tbody th,
    .compare-table__row.is-diff th {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
    }
}

.compare-table__row.is-diff th,
.compare-table__row.is-diff td {
    background: #fff1f2;
}

.compare-table__row.is-diff td {
    color: #b91c1c;
    font-weight: 600;
}

.compare-table .is-missing {
    color: var(--mute);
    font-weight: 400;
}

html.is-compare-diff-only .compare-table__row:not(.is-diff) {
    display: none !important;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 560;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}

.filter-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--mute);
}

.filter-btn:hover {
    background: rgb(var(--accent-rgb) / .1);
    border-color: rgb(var(--accent-rgb) / .28);
    color: var(--accent-deep);
}

.filter-btn:hover svg {
    color: var(--accent-deep);
}

.filter-btn.is-open {
    background: rgb(var(--accent-rgb) / .12);
    border-color: rgb(var(--accent-rgb) / .35);
    color: var(--accent-deep);
    box-shadow: none;
}

.filter-btn.is-open svg {
    color: var(--accent-deep);
}

.catalog-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.catalog-selection[hidden] {
    display: none !important;
}

.catalog-selection__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.catalog-selection__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    max-width: min(58%, 100%);
}

.catalog-selection__active[hidden] {
    display: none !important;
}

.catalog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 560;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.catalog-filter-chip:hover,
.catalog-filter-chip:focus-visible {
    background: rgb(var(--accent-rgb) / .22);
    outline: none;
}

.catalog-filter-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-filter-chip__x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    opacity: 0.65;
    font-size: 1.05em;
    line-height: 1;
}

.catalog-filter-chip:hover .catalog-filter-chip__x,
.catalog-filter-chip:focus-visible .catalog-filter-chip__x {
    opacity: 1;
}

.catalog-selection__sep {
    color: var(--mute);
    font-size: 0.86rem;
    user-select: none;
}

.chip:empty {
    display: none;
}

.chip-link {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.chip-link:hover,
.chip-link:focus-visible {
    background: rgb(var(--accent-rgb) / .2);
    color: var(--accent-deep);
    outline: none;
}

.chip-link.is-current,
.chip-current {
    cursor: default;
    pointer-events: none;
}

.chip-current {
    background: rgba(20, 48, 38, .06);
    color: var(--ink);
}

.page-size {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
}

.page-size__btn {
    min-width: 34px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mute);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.page-size__btn:hover {
    color: var(--ink);
    background: rgb(var(--accent-rgb) / .1);
}

.page-size__btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .25);
}

.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}

.view-toggle__btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
}

.view-toggle__btn svg {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 auto;
}

.view-toggle__btn:hover {
    color: var(--ink);
    background: rgb(var(--accent-rgb) / .1);
}

.view-toggle__btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .25);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
    font-size: 0.86rem;
    font-weight: 560;
}

.chip-muted {
    background: rgba(20, 48, 38, .06);
    color: var(--mute);
}

button.chip {
    font-family: inherit;
    line-height: inherit;
}

.catalog-grid { display: grid; gap: 14px; }

.product-card--placeholder {
    pointer-events: none;
    cursor: default;
}

.product-card--placeholder .ph-line,
.product-card--placeholder .ph-block {
    display: block;
    border-radius: 10px;
    background: linear-gradient(90deg, #e4efe8 0%, #f3f8f5 45%, #e4efe8 90%);
    background-size: 200% 100%;
    animation: catalog-ph-shimmer 1.2s ease-in-out infinite;
}

.product-card--placeholder .ph-line {
    height: 0.85em;
    width: 78%;
}

.product-card--placeholder .ph-line--sm { width: 42%; height: 0.7em; }
.product-card--placeholder .ph-line--md { width: 36%; height: 0.75em; }
.product-card--placeholder .ph-line--price { width: 5.5rem; height: 1.15em; }
.product-card--placeholder h3 .ph-line { width: 88%; height: 1em; }

.product-card--placeholder .ph-block--fav {
    width: 36px;
    height: 36px;
}

.product-card--placeholder .ph-block--cart {
    flex: 1 1 auto;
    height: 40px;
    min-width: 7rem;
    border-radius: 12px;
}

@keyframes catalog-ph-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card--placeholder .ph-line,
    .product-card--placeholder .ph-block {
        animation: none;
    }
}

.catalog-grid.is-view-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 1280px) {
    .catalog-grid.is-view-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .catalog-grid.is-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.catalog-grid.is-view-grid {
    overflow: visible;
}

.catalog-grid.is-view-grid .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    align-items: stretch;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 12px;
    overflow: visible;
    z-index: 1;
}

.catalog-grid.is-view-grid .product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 4px;
}

.catalog-grid.is-view-grid .product-card__title-row {
    margin-bottom: 0;
}

.catalog-grid.is-view-grid .product-card__title-row h3,
.catalog-grid.is-view-grid .product-card__title-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    line-height: 1.25;
}

.catalog-grid.is-view-grid .product-card__stats {
    margin-top: auto;
}

.catalog-grid.is-view-grid .product-card__buy {
    margin-top: auto;
}

.catalog-grid.is-view-grid .product-card__buy-top {
    min-height: 36px;
}

.catalog-grid.is-view-grid .product-card:hover,
.catalog-grid.is-view-grid .product-card:focus-within {
    z-index: 24;
}

.catalog-grid.is-view-grid .product-card__media {
    position: relative;
    width: 100%;
}

.catalog-grid.is-view-grid .product-card__img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.catalog-grid.is-view-grid .product-card__img img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    max-width: none;
    max-height: none;
    margin: auto;
    object-fit: contain;
    object-position: center;
}

.product-card__media {
    position: relative;
}

/* Compare scales: direct child of card — survives overlay (actions hide «i» only) */
.catalog-grid.has-compare-scope .product-card.has-specs .product-card__compare-btn {
    display: grid !important;
    position: absolute;
    z-index: 14;
    top: 14px;
    right: 14px;
    left: auto;
}

/* List/long: leave room so qty/+ is not under scales */
.catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__buy-top,
.catalog-grid.has-compare-scope.is-view-long .product-card.has-specs .product-card__buy-top {
    padding-right: 40px;
}

/* Desktop grid: top-right over photo */
.catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs .product-card__compare-btn {
    top: 22px;
    right: 22px;
}

.catalog-grid.has-compare-scope.is-view-grid .product-card.is-specs-open .product-card__compare-btn,
.catalog-grid.has-compare-scope.is-view-grid .product-card.is-specs-compare .product-card__compare-btn {
    display: grid !important;
    top: 10px;
    right: 10px;
    z-index: 40;
    box-shadow: 0 8px 18px rgba(12, 40, 30, .18);
}

@media (max-width: 800px) {
    /* Phone: scales + «i» flush to the right edge of the card */
    .catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__compare-btn,
    .catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs .product-card__compare-btn {
        top: 8px;
        right: 8px;
        left: auto;
        width: 32px;
        height: 32px;
        z-index: 20;
    }

    .catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__actions,
    .catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs .product-card__actions {
        position: absolute;
        top: 44px;
        right: 8px;
        z-index: 20;
        margin: 0;
    }

    .catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__buy-top,
    .catalog-grid.has-compare-scope.is-view-long .product-card.has-specs .product-card__buy-top {
        padding-right: 0;
    }

    .catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__title-row,
    .catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs .product-card__title-row {
        padding-right: 40px;
    }

    .catalog-grid.has-compare-scope.is-view-list .product-card.has-specs .product-card__body,
    .catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs .product-card__body {
        padding-right: 0;
    }

    .compare-toolbar .compare-diff-toggle {
        display: none !important;
    }

    /* Hug content — no empty stretched field beside Скинути / Порівняти */
    .compare-toolbar {
        flex: 0 0 auto;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: auto;
    }

    .compare-toolbar #compareOpenPage {
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
    }

    .compare-toolbar #compareOpenPage span {
        overflow: visible;
        text-overflow: unset;
    }

    .compare-toolbar #compareClearPicks {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* List / non-grid: «лише відмінності» only on desktop grid (also when toolbar is in header) */
body.is-catalog:has(.catalog-grid:not(.is-view-grid)) .compare-diff-toggle,
.catalog-main:has(.catalog-grid:not(.is-view-grid)) .compare-diff-toggle {
    display: none !important;
}

.catalog-grid.is-view-grid .product-card__buy {
    display: grid;
    gap: 10px;
}

.catalog-grid.is-view-grid .product-card__buy-top {
    width: 100%;
}

.catalog-grid.is-view-grid .product-card__prices {
    text-align: left;
}

/* Specs: button beside title → side popover outside the card */
.product-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 0 0 8px;
}

.product-card__title-row h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* «i» beside title: desktop grid only; phone list only (see mobile block) */
.product-card.has-specs .product-card__specs-btn,
.product-card.has-specs .product-card__actions {
    display: none !important;
}

.catalog-grid.is-view-grid .product-card.has-specs .product-card__actions {
    display: flex !important;
}

.catalog-grid.is-view-grid .product-card.has-specs .product-card__specs-btn {
    display: grid !important;
}

.product-card__actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.product-card__compare-btn {
    display: none;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(15, 35, 55, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .96);
    color: var(--mute);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(28, 50, 44, .08);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    position: relative;
    z-index: 2;
}

.product-card__compare-btn svg {
    width: 16px;
    height: 16px;
}

/* Hover only on real pointers — sticky :hover on phones kept scales green after unpick */
@media (hover: hover) and (pointer: fine) {
    .product-card__compare-btn:hover,
    .product-card__compare-btn:focus-visible {
        background: var(--accent);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .28);
        outline: none;
    }
}

/* Selected = class only (not aria/hover) so unpick always clears the green */
.product-card.is-compare-pick .product-card__compare-btn {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .28);
}

.product-card__specs-btn {
    display: none;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 9px;
    background: #fff;
    color: var(--accent-deep);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(28, 50, 44, .08);
    position: relative;
    z-index: 2;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.product-card__specs-btn:hover,
.product-card__specs-btn:focus-visible {
    background: #eef6f2;
    border-color: rgba(15, 35, 55, .18);
    outline: none;
}

.product-card__specs-btn svg {
    width: 16px;
    height: 16px;
}

.product-card.is-specs-open .product-card__specs-btn {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .28);
}

/* Compare overlay: hide «i» only — scales stay on the card. */
.catalog-grid.is-view-grid .product-card.is-specs-compare .product-card__actions,
.catalog-grid.is-view-grid .product-card.is-specs-compare .product-card__specs-btn {
    display: none !important;
}

.catalog-grid.has-compare-scope.is-view-grid .product-card.is-specs-compare .product-card__compare-btn {
    display: grid !important;
}

/* Pinned specs: float «i» over the overlay (same corner as scales) so it stays clickable */
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__actions {
    display: flex !important;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 40;
    margin: 0;
}

.catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__actions {
    right: 48px; /* room for scales at right: 10px */
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__specs-btn {
    display: grid !important;
    box-shadow: 0 8px 18px rgba(12, 40, 30, .18);
}

/* Specs panel: hidden by default */
.catalog-grid.is-view-grid .product-card.has-specs .product-card__specs {
    display: none;
    overflow: hidden;
}

/* Desktop hover: floating side popover — only main (primary) specs */
@media (hover: hover) and (pointer: fine) {
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs {
        display: block;
        position: absolute;
        top: 12px;
        left: calc(100% + 12px);
        right: auto;
        width: max-content;
        min-width: 260px;
        max-width: min(560px, 78vw);
        z-index: 50;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--surface-border-strong);
        border-left: 3px solid var(--accent);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(4px);
        transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
        overflow: hidden;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-row:not(.is-primary) {
        display: none;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-more {
        display: block;
    }

    /* Hover list: single column by default; .is-multi-col → 2 cols when tall */
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-list {
        display: block;
        max-height: min(70vh, 520px);
        padding: 0 10px 10px;
        overflow: hidden;
        column-count: 1;
        column-gap: 16px;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-row {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-multi-col {
        width: min(520px, 82vw);
        min-width: min(460px, 82vw);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-multi-col .product-card__specs-list {
        column-count: 2;
        column-fill: balance;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-row dt,
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs-row dd {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs::before {
        content: "";
        position: absolute;
        top: 18px;
        left: -5px;
        width: 10px;
        height: 10px;
        background: #fff;
        border-left: 1px solid var(--surface-border-strong);
        border-bottom: 1px solid var(--surface-border-strong);
        transform: rotate(45deg);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 3):not(.is-specs-open) .product-card__specs,
    .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 4):not(.is-specs-open) .product-card__specs {
        left: auto;
        right: calc(100% + 12px);
        border-left: 1px solid var(--surface-border-strong);
        border-right: 3px solid var(--accent);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 3):not(.is-specs-open) .product-card__specs::before,
    .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 4):not(.is-specs-open) .product-card__specs::before {
        left: auto;
        right: -5px;
        border-left: 0;
        border-bottom: 0;
        border-right: 1px solid var(--surface-border-strong);
        border-top: 1px solid var(--surface-border-strong);
    }

    @media (max-width: 1280px) {
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 3):not(.is-specs-open) .product-card__specs,
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 4):not(.is-specs-open) .product-card__specs {
            left: calc(100% + 12px);
            right: auto;
            border-left: 3px solid var(--accent);
            border-right: 1px solid var(--surface-border-strong);
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 3):not(.is-specs-open) .product-card__specs::before,
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(4n + 4):not(.is-specs-open) .product-card__specs::before {
            left: -5px;
            right: auto;
            border-left: 1px solid var(--surface-border-strong);
            border-bottom: 1px solid var(--surface-border-strong);
            border-right: 0;
            border-top: 0;
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(3n):not(.is-specs-open) .product-card__specs {
            left: auto;
            right: calc(100% + 12px);
            border-left: 1px solid var(--surface-border-strong);
            border-right: 3px solid var(--accent);
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(3n):not(.is-specs-open) .product-card__specs::before {
            left: auto;
            right: -5px;
            border-left: 0;
            border-bottom: 0;
            border-right: 1px solid var(--surface-border-strong);
            border-top: 1px solid var(--surface-border-strong);
        }
    }

    @media (max-width: 980px) {
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(3n):not(.is-specs-open) .product-card__specs {
            left: calc(100% + 12px);
            right: auto;
            border-left: 3px solid var(--accent);
            border-right: 1px solid var(--surface-border-strong);
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(3n):not(.is-specs-open) .product-card__specs::before {
            left: -5px;
            right: auto;
            border-left: 1px solid var(--surface-border-strong);
            border-bottom: 1px solid var(--surface-border-strong);
            border-right: 0;
            border-top: 0;
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(2n):not(.is-specs-open) .product-card__specs {
            left: auto;
            right: calc(100% + 12px);
            border-left: 1px solid var(--surface-border-strong);
            border-right: 3px solid var(--accent);
        }
        .catalog-grid.is-view-grid .product-card.has-specs:nth-child(2n):not(.is-specs-open) .product-card__specs::before {
            left: auto;
            right: -5px;
            border-left: 0;
            border-bottom: 0;
            border-right: 1px solid var(--surface-border-strong);
            border-top: 1px solid var(--surface-border-strong);
        }
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs-btn:hover) .product-card__specs,
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs:hover) .product-card__specs {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs-btn:hover) .product-card__specs[hidden],
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs:hover) .product-card__specs[hidden] {
        display: block;
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs-btn:hover),
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open):has(.product-card__specs:hover) {
        z-index: 40;
    }

    /* JS side override (wins over nth-child heuristics) */
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-specs-left {
        left: auto !important;
        right: calc(100% + 12px) !important;
        border-left: 1px solid var(--surface-border-strong);
        border-right: 3px solid var(--accent);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-specs-left::before {
        left: auto !important;
        right: -5px !important;
        border-left: 0;
        border-bottom: 0;
        border-right: 1px solid var(--surface-border-strong);
        border-top: 1px solid var(--surface-border-strong);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-specs-right {
        left: calc(100% + 12px) !important;
        right: auto !important;
        border-left: 3px solid var(--accent);
        border-right: 1px solid var(--surface-border-strong);
    }

    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs.is-specs-right::before {
        left: -5px !important;
        right: auto !important;
        border-left: 1px solid var(--surface-border-strong);
        border-bottom: 1px solid var(--surface-border-strong);
        border-right: 0;
        border-top: 0;
    }
}

/* Click pin: cover the card, blur what’s underneath — no grid stretch */
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open {
    overflow: hidden;
    z-index: 30;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__img,
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__buy,
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__sku,
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__stats,
.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__title-row h3 {
    filter: blur(4px);
    opacity: .42;
    transition: filter .18s var(--ease), opacity .18s var(--ease);
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 6;
    width: auto;
    margin: 0;
    padding: 10px 0 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 0;
    border-left: 3px solid var(--accent);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: auto;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs[hidden] {
    display: flex;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs::before {
    display: none;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-title {
    padding-right: 56px; /* room for «i» / scales in the corner */
    padding-left: 14px;
}

.catalog-grid.has-compare-scope.is-view-grid .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__specs-title {
    padding-right: 92px; /* «i» + scales */
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-list {
    flex: 1 1 auto;
    padding-bottom: 12px;
    align-content: start;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-row {
    display: grid;
}

/* Must win over open-row `display: grid` above */
.catalog-grid.is-view-grid.is-compare-diff-only .product-card.is-specs-compare.is-specs-open .product-card__specs-row:not(.is-diff) {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Diff-only: pack remaining rows tight at the top */
.catalog-grid.is-view-grid.is-compare-diff-only .product-card.is-specs-compare.is-specs-open .product-card__specs-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0;
}

.catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-more {
    display: none;
}

.product-card__specs-more {
    display: none;
    margin: 0;
    padding: 8px 14px 12px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mute);
    border-top: 1px solid rgba(15, 35, 55, .08);
}

/* Touch / narrow: no hover flyout — tap toggles an inline sheet (not a trap overlay) */
@media (hover: none), (max-width: 800px) {
    .catalog-grid.is-view-grid .product-card.has-specs:not(.is-specs-open) .product-card__specs {
        display: none !important;
    }

    /* Keep «i» visible so the user can close characteristics */
    .catalog-grid.is-view-grid .product-card.is-specs-open .product-card__actions,
    .catalog-grid.is-view-grid .product-card.is-specs-open .product-card__specs-btn,
    .catalog-grid.is-view-grid .product-card.is-specs-compare .product-card__actions,
    .catalog-grid.is-view-grid .product-card.is-specs-compare .product-card__specs-btn {
        display: flex !important;
        position: relative;
        z-index: 40;
    }

    .catalog-grid.is-view-grid .product-card.is-specs-open .product-card__specs-btn {
        display: grid !important;
    }

    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open {
        overflow: visible;
    }

    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__img,
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__buy,
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__sku,
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__stats,
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__title-row h3 {
        filter: none;
        opacity: 1;
    }

    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs {
        position: relative;
        inset: auto;
        z-index: 5;
        margin: 4px 0 8px;
        padding: 0;
        max-height: none;
        overflow: visible;
        border-radius: 12px;
        border: 1px solid var(--surface-border);
        border-left: 3px solid var(--accent);
        background: #fff;
        box-shadow: var(--shadow-sm);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-list {
        overflow: visible;
        max-height: none;
    }

    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs-title {
        padding-right: 14px;
    }

    /* Same as desktop «i» hover: only CMS primary (filter) specs, not the full dump */
    .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__specs-row:not(.is-primary) {
        display: none !important;
    }

    .product-card.has-specs.is-specs-open:not(.is-specs-compare) .product-card__specs-more {
        display: block;
    }
}

.product-card__specs-title {
    margin: 0;
    padding: 12px 14px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: transparent;
}

.product-card.is-specs-compare .product-card__specs-title::after {
    content: " · порівняння";
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mute);
    text-transform: none;
}

.product-card__specs-list {
    margin: 0;
    padding: 0 6px 8px;
    display: grid;
    gap: 0;
}

.product-card__specs-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 8px 14px;
    align-items: baseline;
    font-size: 0.84rem;
    line-height: 1.4;
    padding: 9px 10px;
    border-radius: 8px;
    background: transparent;
    border-top: 1px solid rgba(15, 35, 55, .08);
}

.product-card__specs-row:first-child {
    border-top: 0;
}

.product-card__specs-row dt {
    margin: 0;
    color: #5a6b74;
    font-weight: 500;
}

.product-card__specs-row dd {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

.product-card__specs-row.is-diff {
    background: rgba(196, 60, 60, .1);
    border-top-color: transparent;
}

.product-card__specs-row.is-diff dd {
    color: #b42318;
    text-decoration: underline;
    text-decoration-color: rgba(180, 35, 24, .55);
    text-underline-offset: 2px;
}

.product-card__specs-row.is-missing dd {
    color: var(--mute);
    font-weight: 600;
}

.catalog-grid.is-view-long .product-card {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 12px;
}

.catalog-grid.is-view-long .product-card__media {
    width: 64px;
}

.catalog-grid.is-view-long .product-card__img {
    width: 100%;
    height: 64px;
}

.catalog-grid.is-view-long .product-card__stats,
.catalog-grid.is-view-long .product-card__badge {
    display: none;
}

.catalog-grid.is-view-long .product-card h3 {
    font-size: 0.95rem;
    margin: 0;
}

.catalog-grid.is-view-long .product-card__sku {
    margin-bottom: 2px;
}

/* List view: slightly taller cards / larger photo frame */
.catalog-grid.is-view-list {
    gap: 16px;
}

.catalog-grid.is-view-list .product-card {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px 20px;
    min-height: 132px;
}

.catalog-grid.is-view-list .product-card__media {
    width: 120px;
}

.catalog-grid.is-view-list .product-card__img {
    width: 100%;
    height: 120px;
    border-radius: 16px;
}

.catalog-grid.is-view-list .product-card h3 {
    font-size: 1.08rem;
}

.product-card {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
    cursor: pointer;
}

/* display:grid/flex on .product-card overrides UA [hidden] — force hide when filtered */
.product-card[hidden],
.product-card.is-filtered-out {
    display: none !important;
}

.catalog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm);
}

.catalog-pager[hidden] {
    display: none !important;
}

.catalog-pager__meta {
    margin: 0;
    color: var(--mute);
    font-size: 0.88rem;
    font-weight: 500;
}

.catalog-pager__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.catalog-pager__pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.catalog-pager__gap {
    min-width: 1.25rem;
    text-align: center;
    color: var(--mute);
    font-weight: 600;
    user-select: none;
}

.catalog-pager__num {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.catalog-pager__num:hover {
    border-color: rgba(15, 35, 55, .12);
    background: #fff;
}

.catalog-pager__num.is-active {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
    cursor: default;
}

.catalog-pager__btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 35, 55, .12);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.catalog-pager__btn:hover:not(:disabled) {
    border-color: rgb(var(--accent-rgb) / .35);
    color: var(--accent-deep);
}

.catalog-pager__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.product-card__buy,
.product-card__buy * {
    cursor: auto;
}

.product-card__buy button,
.product-card__buy .qty__btn,
.product-card__fav,
.product-card__cart {
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--surface-border-strong);
}

.product-card.is-out {
    opacity: 1;
}

.product-card.is-out:hover {
    transform: none;
}

.product-card.is-out .product-card__img img {
    filter: grayscale(.55) brightness(1.02);
}

.product-card.is-out .product-card__body h3 {
    color: var(--mute);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(28, 50, 44, .35);
}

.product-card.is-out .product-card__price {
    color: var(--mute);
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(28, 50, 44, .35);
}

.product-card.is-out .product-card__rrp {
    opacity: .7;
}

.product-card__stock-out {
    color: #a85a2a;
    font-weight: 650;
}

.product-card__badge--out {
    background: rgba(120, 72, 40, .88);
    letter-spacing: .02em;
}

.product-card.is-out .product-card__cart:disabled {
    opacity: 1;
    background: rgba(28, 50, 44, .06);
    color: var(--mute);
    box-shadow: none;
}

.product-card__img {
    position: relative;
    width: 96px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    /* Tiandy default: soft mint wash in media frame */
    background:
        linear-gradient(150deg, rgba(255,255,255,.5), transparent 48%),
        linear-gradient(145deg, #d8eee4, #c9e4d8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.product-card__img.is-empty {
    background: #eef3f0;
    box-shadow: inset 0 0 0 1px rgba(15, 35, 55, .06);
}

.product-card__img.is-loading::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 40%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 55%),
        linear-gradient(135deg, rgba(40, 110, 80, .22), rgba(120, 170, 140, .35) 48%, rgba(40, 90, 70, .18));
    filter: blur(14px);
    transform: scale(1.15);
    animation: product-img-blob 1.6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Arviom: sky-blue media wash + clearer card frames */
[data-theme="blue"] .product-card {
    border-color: rgba(90, 175, 235, .45);
}

[data-theme="blue"] .product-card:hover,
[data-theme="blue"] .product-card:focus-within {
    border-color: rgba(42, 163, 255, .65);
}

[data-theme="blue"] .product-card__img {
    border: 1px solid rgba(90, 175, 235, .42);
    background:
        linear-gradient(150deg, rgba(255,255,255,.65), transparent 50%),
        linear-gradient(145deg, #e8f4fc, #d2ebfa);
}

[data-theme="blue"] .product-card__img.is-empty {
    background: #eef6fc;
    box-shadow: inset 0 0 0 1px rgba(90, 175, 235, .35);
}

[data-theme="blue"] .product-card__img.is-loading::before {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 55%),
        linear-gradient(135deg, rgba(40, 120, 180, .22), rgba(120, 180, 220, .35) 48%, rgba(40, 100, 160, .18));
}

@keyframes product-img-blob {
    from { opacity: .55; transform: scale(1.05); }
    to { opacity: .95; transform: scale(1.2); }
}

.product-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.product-card__img img.is-pending {
    opacity: .45;
    filter: blur(14px) saturate(.85);
    transform: scale(1.08);
}

.product-card__img img.is-ready {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity .38s var(--ease), filter .45s var(--ease), transform .45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .product-card__img.is-loading::before {
        animation: none;
    }

    .product-card__img img.is-ready {
        transition: none;
    }
}

.product-card__buy-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card__fav.fav-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
}

.product-card__badge {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .92);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.product-card__sku {
    margin: 0 0 4px;
    font-size: 0.78rem;
    color: var(--mute);
    letter-spacing: .02em;
}

.product-card__body h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
}

.product-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    color: var(--mute);
    font-size: 0.86rem;
}

.product-card__stats strong { color: var(--accent-deep); font-weight: 600; }
.product-card__stats em { color: #b45309; font-style: normal; font-weight: 560; }

.product-card__buy {
    display: grid;
    gap: 10px;
    justify-items: stretch;
    min-width: 188px;
}

.product-card__buy-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.product-card__prices {
    display: grid;
    gap: 2px;
    text-align: left;
}

.product-card__rrp {
    color: var(--mute);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(20, 48, 38, .28);
}

/* Public site: no РРЦ / reserve / favorites (no client account) */
body.is-guest-storefront .product-card__rrp,
body.is-guest-storefront .product-hero__rrp,
body.is-guest-storefront .product-card__reserve,
body.is-guest-storefront .product-hero__reserve,
body.is-guest-storefront .fav-btn,
body.is-guest-storefront .product-card__fav,
body.is-guest-storefront .product-hero__fav {
    display: none !important;
}

.product-card__avail {
    font-weight: 650;
    letter-spacing: -0.01em;
}

.product-card__avail.is-ok {
    color: var(--accent-deep, #1a5c45);
}

.product-card__avail.is-low {
    color: #b45309;
}

.product-card__avail.is-out {
    color: #a85a2a;
}

.product-card__price {
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.product-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fav-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    color: var(--mute);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.fav-btn svg {
    width: 18px;
    height: 18px;
}

.fav-btn:hover {
    color: #e11d48;
    border-color: rgba(225, 29, 72, .28);
    background: rgba(225, 29, 72, .06);
}

.fav-btn.is-on {
    color: #e11d48;
    border-color: rgba(225, 29, 72, .35);
    background: rgba(225, 29, 72, .1);
}

.fav-btn.is-on svg {
    fill: currentColor;
}

.rail-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.shell.is-rail-open .rail-badge {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.topbar__page--row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.topbar__page-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.wishlist-empty {
    margin-top: 12px;
    padding: 28px 22px;
    border-radius: 18px;
    background: var(--glass-strong);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 10px 28px rgba(20, 48, 38, .04);
    color: var(--mute);
}

.wishlist-empty p {
    margin: 0 0 12px;
}

.wishlist-empty__link {
    display: inline-flex;
    color: var(--accent-deep);
    font-weight: 600;
}

.wishlist-empty__link:hover {
    text-decoration: underline;
}

.wishlist-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.wishlist-toolbar[hidden] {
    display: none !important;
}

.wishlist-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}

.wishlist-action svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.wishlist-action--cart {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .18);
}

.wishlist-action--cart:hover:not(:disabled) {
    background: var(--accent-deep);
}

.wishlist-action--cart:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.wishlist-action--cart.is-done {
    background: var(--accent-deep);
}

.wishlist-action--clear {
    background: rgba(255, 255, 255, .9);
    color: var(--mute);
    border-color: var(--line);
}

.wishlist-action--clear:hover {
    color: var(--danger);
    border-color: rgb(212, 83, 90, .35);
    background: rgba(212, 83, 90, .06);
}

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    overflow: hidden;
}

.qty__btn {
    width: 30px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.qty input {
    width: 36px;
    height: 34px;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-size: 0.9rem;
}

.product-card__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgb(var(--accent-rgb) / .28);
    transition: background .15s, box-shadow .15s, filter .15s, transform .15s;
}

.product-card__cart svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.product-card__cart:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.product-card__cart:not(:disabled):hover {
    background: var(--accent-deep);
    box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .32);
}

.product-card__cart:not(:disabled):active {
    transform: scale(.98);
}

.product-card__cart.is-added {
    background: var(--accent-2);
}

@media (max-width: 800px) {
    /* Phone catalog: list only — no grid toggle */
    #viewToggle,
    .catalog-controls .view-toggle {
        display: none !important;
    }

    .product-card {
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 12px;
    }
    .product-card__img {
        width: 72px;
        height: 56px;
    }
    .panels {
        grid-template-columns: 1fr;
    }
    .product-card__buy {
        grid-column: 1 / -1;
        justify-items: stretch;
        min-width: 0;
        gap: 8px;
    }
    .product-card__buy-top {
        align-items: center;
    }
    .product-card__price {
        font-size: 1.08rem;
    }
    .product-card__prices { text-align: left; }
    .product-card__actions { justify-content: flex-end; }
    .product-card__cart {
        height: 42px;
        font-size: 0.9rem;
    }
    .product-card__fav.fav-btn,
    .fav-btn {
        width: 42px;
        height: 42px;
    }
    .qty__btn {
        width: 36px;
        height: 40px;
    }
    .qty input {
        height: 40px;
    }

    /* Force list card layout even if grid class lingered */
    .catalog-grid.is-view-grid,
    .catalog-grid.is-view-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .catalog-grid.is-view-grid .product-card,
    .catalog-grid.is-view-list .product-card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 12px;
        min-width: 0;
    }

    .catalog-grid.is-view-grid .product-card__media,
    .catalog-grid.is-view-list .product-card__media {
        width: 72px;
    }

    .catalog-grid.is-view-grid .product-card__img,
    .catalog-grid.is-view-list .product-card__img {
        width: 72px;
        height: 56px;
        aspect-ratio: auto;
        max-height: none;
    }

    .catalog-grid.is-view-list .product-card__title-row,
    .catalog-grid.is-view-grid .product-card__title-row {
        align-items: center;
        gap: 8px;
    }

    /* «i» lives in list on phone */
    .catalog-grid.is-view-list .product-card.has-specs .product-card__actions,
    .catalog-grid.is-view-grid .product-card.has-specs .product-card__actions {
        display: flex !important;
    }

    .catalog-grid.is-view-list .product-card.has-specs .product-card__specs-btn,
    .catalog-grid.is-view-grid .product-card.has-specs .product-card__specs-btn {
        display: grid !important;
    }

    .catalog-grid.is-view-list .product-card.has-specs.is-specs-open .product-card__specs,
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs {
        display: block;
        position: relative;
        inset: auto;
        z-index: 5;
        /* Full card width: pull out of body column past media (72) + gap (12) */
        box-sizing: border-box;
        width: calc(100% + 72px + 12px);
        max-width: none;
        margin: 10px 0 0 calc(-72px - 12px);
        padding: 0;
        max-height: none;
        overflow: visible;
        border-radius: 12px;
        border: 1px solid var(--surface-border);
        border-left: 3px solid var(--accent);
        background: #fff;
        box-shadow: var(--shadow-sm);
    }

    .catalog-grid.is-view-list .product-card.has-specs.is-specs-open .product-card__specs[hidden],
    .catalog-grid.is-view-grid .product-card.has-specs.is-specs-open .product-card__specs[hidden] {
        display: block;
    }

    .catalog-grid.is-view-long .product-card {
        grid-template-columns: 56px minmax(0, 1fr);
    }
}

.compare-empty__one {
    margin: 16px auto 0;
    padding: 14px 16px;
    max-width: 360px;
    text-align: left;
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.compare-empty__one-name {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--ink);
}

.compare-empty__one-sku {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--mute);
}

.compare-empty__one .compare-tool-btn {
    width: 100%;
    justify-content: center;
}

.filter-tab { display: none; }

.filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 48, 38, .28);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .42s ease,
        visibility .42s;
}

.filter-scrim.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.category-drawer,
.filter-drawer {
    position: fixed;
    top: 0;
    z-index: 210;
    width: min(380px, 92vw);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 18px 0 24px 18px;
    background: linear-gradient(180deg, rgba(248, 252, 250, .98), rgba(226, 240, 233, .96));
    box-shadow: 0 0 60px rgba(15, 42, 34, .18);
    transition:
        transform .52s cubic-bezier(.16, 1, .3, 1),
        opacity .4s ease,
        visibility .52s;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.category-drawer {
    left: 0;
    border-right: 1px solid var(--surface-border);
    box-shadow: 20px 0 60px rgba(15, 42, 34, .16);
    transform: translateX(-105%);
    overflow: visible;
}

.category-filter-sheet {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 6;
    width: min(360px, calc(100vw - 100px));
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px 0 24px 18px;
    background: linear-gradient(180deg, rgba(250, 253, 251, .99), rgba(224, 238, 231, .97));
    border-right: 1px solid var(--surface-border);
    box-shadow: 18px 0 44px rgba(20, 48, 38, .14);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform .34s var(--ease),
        opacity .24s ease,
        visibility .34s;
}

.category-filter-sheet.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.filter-drawer {
    right: 0;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, .85);
    box-shadow: -20px 0 60px rgba(20, 48, 38, .16);
    transform: translateX(105%);
}

.category-drawer.is-open,
.filter-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.category-drawer__body,
.filter-drawer__body,
.filter-form,
#categoryFilterBody,
.nice-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(61, 143, 116, .28) transparent;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
}

.category-drawer__body::-webkit-scrollbar,
.filter-drawer__body::-webkit-scrollbar,
.filter-form::-webkit-scrollbar,
#categoryFilterBody::-webkit-scrollbar,
.nice-scroll::-webkit-scrollbar {
    width: 4px;
}

.category-drawer__body::-webkit-scrollbar-track,
.filter-drawer__body::-webkit-scrollbar-track,
.filter-form::-webkit-scrollbar-track,
#categoryFilterBody::-webkit-scrollbar-track,
.nice-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.category-drawer__body::-webkit-scrollbar-thumb,
.filter-drawer__body::-webkit-scrollbar-thumb,
.filter-form::-webkit-scrollbar-thumb,
#categoryFilterBody::-webkit-scrollbar-thumb,
.nice-scroll::-webkit-scrollbar-thumb {
    background: rgba(61, 143, 116, .26);
    border-radius: 999px;
    border: 0;
    min-height: 36px;
}

.category-drawer__body::-webkit-scrollbar-thumb:hover,
.filter-form::-webkit-scrollbar-thumb:hover,
#categoryFilterBody::-webkit-scrollbar-thumb:hover,
.nice-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 143, 116, .42);
}

.category-drawer__body::-webkit-scrollbar-button,
.filter-form::-webkit-scrollbar-button,
#categoryFilterBody::-webkit-scrollbar-button,
.nice-scroll::-webkit-scrollbar-button,
.category-drawer__body::-webkit-scrollbar-corner,
.filter-form::-webkit-scrollbar-corner,
#categoryFilterBody::-webkit-scrollbar-corner,
.nice-scroll::-webkit-scrollbar-corner {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.filter-drawer__head {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 10px;
    padding-right: 18px;
    position: relative;
    z-index: 2;
}

.filter-drawer__spacer {
    width: 40px;
    height: 40px;
}

.filter-hint {
    margin: 8px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgb(var(--accent-rgb) / .08);
    color: var(--mute);
    font-size: 0.9rem;
    line-height: 1.45;
}

.filter-drawer__titles { text-align: center; }

.filter-step-label {
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 560;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}

.filter-drawer__titles h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
}

.filter-back,
.filter-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(20, 48, 38, .05);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.filter-back svg { width: 18px; height: 18px; }
.filter-back[hidden] { visibility: hidden; }

.filter-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.filter-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--mute);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.filter-step:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.filter-step.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
    box-shadow: 0 8px 18px rgb(var(--accent-rgb) / .3);
}

.filter-step.is-done {
    color: var(--accent-deep);
    border-color: rgb(var(--accent-rgb) / .35);
    background: rgb(var(--accent-rgb) / .12);
}

.filter-steps__line {
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: rgba(20, 48, 38, .1);
}

.filter-pane { display: none; }
.filter-pane.is-on { display: block; }

.filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.cat-tree {
    display: grid;
    gap: 8px;
    align-content: start;
    transform-origin: center;
    will-change: transform, opacity;
}

.cat-tree.is-animating {
    pointer-events: none;
}

.cat-tree.is-out-left {
    animation: catOutLeft .2s ease forwards;
}

.cat-tree.is-out-right {
    animation: catOutRight .2s ease forwards;
}

.cat-tree.is-in-right {
    animation: catInRight .28s var(--ease) forwards;
}

.cat-tree.is-in-left {
    animation: catInLeft .28s var(--ease) forwards;
}

@keyframes catOutLeft {
    to { opacity: 0; transform: translateX(-16px); }
}

@keyframes catOutRight {
    to { opacity: 0; transform: translateX(16px); }
}

@keyframes catInRight {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes catInLeft {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: translateX(0); }
}

.category-drawer .filter-drawer__titles {
    transition: opacity .18s ease, transform .18s ease;
}

.category-drawer .filter-drawer__titles.is-swap {
    opacity: 0;
    transform: translateY(4px);
}

.cat-tree__link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    height: 45px;
    min-height: 45px;
    max-height: 45px;
    padding: 0 14px;
    border: 1px solid rgba(20, 48, 38, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 560;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 48, 38, .03);
    transition: color .15s, background .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.cat-tree__link:hover {
    color: var(--accent-deep);
    background: #fff;
    border-color: rgb(var(--accent-rgb) / .28);
    box-shadow: 0 6px 16px rgba(20, 48, 38, .06);
}

.cat-tree__link.is-picked {
    border-color: rgb(var(--accent-rgb) / .45);
    background: rgba(255, 255, 255, .95);
}

.cat-tree__link.is-active {
    color: var(--accent-deep);
    background: rgb(var(--accent-rgb) / .1);
    border-color: rgb(var(--accent-rgb) / .32);
}

.cat-tree__link-title {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-tree__link-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--mute);
}

.cat-tree__link-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-tree__link-meta svg {
    width: 16px;
    height: 16px;
    opacity: .55;
}

.cat-tree__link--all {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    margin-bottom: 6px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-weight: 650;
    box-shadow: 0 10px 22px rgb(var(--accent-rgb) / .26);
}

.cat-tree__link--all .cat-tree__link-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.cat-tree__link--all .cat-tree__link-meta {
    color: rgba(255, 255, 255, .88);
}

.cat-tree__link--all .cat-tree__link-meta svg {
    opacity: .9;
    color: #fff;
}

.cat-tree__link--all:hover,
.cat-tree__link--all.is-active {
    background: var(--accent-deep);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgb(var(--accent-rgb) / .32);
}

@keyframes catItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cat-filter {
    display: grid;
    gap: 4px;
    padding-bottom: 8px;
    animation: catItemIn .3s var(--ease) both;
}

.cat-filter__acc {
    border-bottom: 1px solid rgba(20, 48, 38, .08);
}

.cat-filter__hint {
    margin: 10px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgb(var(--accent-rgb) / .08);
    color: var(--mute);
    font-size: 0.88rem;
    line-height: 1.45;
}

.filter-pick {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border: 1px solid rgba(15, 35, 55, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.filter-pick svg {
    width: 18px;
    height: 18px;
    color: var(--mute);
    flex: 0 0 auto;
}

.filter-pick:hover {
    border-color: rgb(var(--accent-rgb) / .45);
    box-shadow: 0 10px 24px rgba(20, 48, 38, .06);
    transform: translateY(-1px);
}

.filter-form fieldset {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
}

.filter-form legend {
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.filter-clear-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.filter-apply-bar {
    flex: 0 0 auto;
    z-index: 4;
    margin: 0;
    padding: 12px 18px 8px 0;
    background: linear-gradient(
        180deg,
        rgba(236, 246, 241, 0) 0%,
        rgba(232, 244, 238, .96) 22%,
        rgba(228, 241, 234, .99) 100%
    );
    border-top: 1px solid rgba(15, 42, 34, .06);
}

.filter-apply-bar[hidden] {
    display: none !important;
}

.filter-apply {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgb(var(--accent-rgb) / .28);
    transition: background .15s, transform .15s, box-shadow .15s;
}

.filter-apply:hover,
.filter-apply:focus-visible {
    background: var(--accent-deep);
    box-shadow: 0 12px 28px rgb(var(--accent-rgb) / .34);
    outline: none;
}

.filter-apply:active {
    transform: translateY(1px);
}

.filter-apply.is-empty-result {
    background: rgba(20, 48, 38, .18);
    color: var(--ink);
    box-shadow: none;
    cursor: pointer;
}

.filter-apply.is-empty-result:hover,
.filter-apply.is-empty-result:focus-visible {
    background: rgba(20, 48, 38, .26);
    box-shadow: none;
}

.filter-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 18px 28px;
    overflow: auto;
    overscroll-behavior: contain;
}

.filter-drawer .filter-drawer__titles.is-swap {
    opacity: 0;
    transform: translateY(4px);
}

.filter-drawer .filter-drawer__titles {
    transition: opacity .12s ease, transform .12s ease;
}

.filter-panel {
    display: grid;
    gap: 0;
    align-content: start;
}

#categoryList .filter-panel,
#filterBrowse .filter-panel {
    padding-right: 4px;
}

.cat-tree__link.is-picked .cat-tree__link-title {
    color: var(--accent-deep);
}

.cat-tree__link .filter-acc__picked {
    margin-right: 2px;
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgb(var(--accent-rgb) / .28);
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / .08);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s, color .15s;
}

.filter-clear:hover:not(:disabled) {
    background: rgb(var(--accent-rgb) / .14);
    border-color: rgb(var(--accent-rgb) / .4);
}

.filter-clear:disabled,
.filter-clear.is-empty {
    opacity: .45;
    cursor: default;
}

.filter-acc {
    border-bottom: 1px solid rgba(15, 35, 55, .08);
}

.filter-acc__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 560;
    text-align: left;
    cursor: pointer;
}

.filter-acc__title { flex: 1 1 auto; min-width: 0; }

.filter-acc__picked {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    flex: 0 0 auto;
    box-shadow: 0 4px 10px rgb(var(--accent-rgb) / .28);
}

.filter-acc__picked[hidden] {
    display: none !important;
}

.filter-acc.is-picked .filter-acc__title {
    color: var(--accent-deep);
    font-weight: 650;
}

.filter-acc.is-picked .filter-acc__count {
    display: none;
}

.filter-acc__count {
    color: var(--mute);
    font-weight: 500;
    font-size: 0.9rem;
}

.filter-acc__chev {
    width: 18px;
    height: 18px;
    color: var(--mute);
    flex: 0 0 auto;
    transition: transform .34s var(--ease), color .2s;
}

.filter-acc.is-open .filter-acc__chev {
    transform: rotate(180deg);
    color: var(--accent);
}

.filter-acc.is-open .filter-acc__title {
    color: var(--accent-deep);
}

.filter-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--ease);
}

.filter-acc.is-open .filter-acc__body {
    grid-template-rows: 1fr;
}

.filter-acc__clip {
    overflow: hidden;
    min-height: 0;
    padding: 0 2px;
    opacity: 0;
    transition: opacity .28s var(--ease), padding .34s var(--ease);
}

.filter-acc.is-open .filter-acc__clip {
    opacity: 1;
    padding: 0 2px 12px;
}

.filter-range {
    display: grid;
    gap: 12px;
    padding: 4px 2px 8px;
}

.filter-range__inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.filter-range__field {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 35, 55, .14);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.filter-range__field:focus-within {
    border-color: rgb(var(--accent-rgb) / .55);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}

.filter-range__num {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 9px 10px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 560;
    color: var(--ink);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

select.filter-range__num {
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f5f52' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.filter-range__unit {
    flex: 0 0 auto;
    padding-right: 10px;
    color: var(--mute);
    font-size: 0.78rem;
    font-weight: 600;
}

.filter-range__sep {
    color: var(--mute);
    font-weight: 600;
}

.filter-range__slider {
    position: relative;
    height: 28px;
    margin: 2px 6px 0;
    display: flex;
    align-items: center;
}

.filter-range__rail,
.filter-range__fill {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    pointer-events: none;
}

.filter-range__rail {
    background: rgba(15, 35, 55, .12);
}

.filter-range__fill {
    right: auto;
    background: var(--accent);
}

.filter-range__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.filter-range__thumb::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.filter-range__thumb::-moz-range-track {
    height: 4px;
    background: transparent;
    border: 0;
}

.filter-range__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .35);
    pointer-events: auto;
    cursor: grab;
}

.filter-range__thumb::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .35);
    pointer-events: auto;
    cursor: grab;
}

.filter-range__thumb:active::-webkit-slider-thumb,
.filter-range__thumb:active::-moz-range-thumb {
    cursor: grabbing;
}

.filter-range__thumb[data-range-thumb="min"] {
    z-index: 2;
}

.filter-range__thumb[data-range-thumb="max"] {
    z-index: 3;
}

.filter-range__thumb.is-top {
    z-index: 4;
}

.filter-range.is-active .filter-range__field {
    border-color: rgb(var(--accent-rgb) / .4);
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    font-size: 0.95rem;
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.check small {
    margin-left: auto;
    color: var(--accent-deep);
    font-weight: 560;
}

body.drawer-open { overflow: hidden; }

@media (max-width: 800px) {
    .shell,
    .shell.is-rail-open {
        flex-direction: column;
        padding-left: 0;
    }
    .rail,
    .shell.is-rail-open .rail {
        width: 100%;
        position: sticky;
        top: 0;
        left: auto;
        bottom: auto;
        height: auto;
        max-height: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
        padding-top: max(10px, env(safe-area-inset-top));
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .55);
        z-index: 90;
        overflow: hidden;
        background: rgba(255, 255, 255, .94);
        transition: none;
        will-change: auto;
    }
    /* Closed: only the top bar (hamburger + brand). Open: full-screen drawer. */
    .shell.is-rail-open .rail {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: none;
        z-index: 220;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        background: linear-gradient(
            185deg,
            rgba(248, 252, 250, .995) 0%,
            rgba(236, 244, 240, .99) 55%,
            rgba(230, 240, 235, .99) 100%
        );
        box-shadow: none;
        border-bottom: 0;
        animation: railPanelIn .22s var(--ease) both;
    }
    .rail-nav {
        display: none;
        flex-direction: column;
        flex: 1 1 auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 8px;
    }
    .shell.is-rail-open .rail-nav,
    .shell.is-rail-open .rail-login {
        display: grid;
    }
    .rail-login { margin-top: auto; display: none; }
    .shell.is-rail-open .rail-login {
        margin-top: 12px;
    }
    .shell.is-rail-open .rail-brand {
        opacity: 1;
        max-width: 200px;
        pointer-events: auto;
    }
    .shell.is-rail-open .rail-link {
        grid-template-columns: 42px 1fr;
        padding-right: 10px;
        min-height: 46px;
    }
    .shell.is-rail-open .rail-label { opacity: 1; }

    /* Lock page scroll under the drawer (scroll lives on html, not body) */
    html.is-rail-drawer-open {
        overflow: hidden !important;
        overscroll-behavior: none;
        height: 100%;
    }

    body.is-rail-drawer-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }

    .shell.is-rail-open .rail {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .stage {
        padding: 14px 14px 48px;
        padding-bottom: max(48px, calc(24px + env(safe-area-inset-bottom)));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        margin-bottom: 14px;
        border-radius: 16px;
    }
    .topbar:has(.header-search) .topbar__lead {
        max-width: none;
        flex: 1 1 auto;
    }
    .topbar .header-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
    .topbar__lead {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }
    .topbar__title {
        font-size: 1.18rem;
        white-space: normal;
    }
    .topbar__hint {
        font-size: 0.74rem;
        white-space: normal;
    }
    .topbar__account {
        margin-left: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
        width: auto;
    }
    .topbar__account--home {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .topbar__finance {
        flex: 1 1 100%;
        width: 100%;
        justify-content: space-between;
        order: 2;
    }
    .topbar__stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 12px;
    }
    .topbar__stat-label {
        font-size: 0.72rem;
        white-space: normal;
    }
    .topbar__stat-value {
        font-size: 1rem;
    }
    .topbar__tools {
        width: auto;
        justify-content: flex-end;
        margin-left: 0;
        order: 1;
    }
    .topbar__account > .orders-create-btn,
    .topbar__account > .orders-link-btn,
    .topbar__account > .view-toggle {
        order: 0;
    }
    .topbar__manager-label { display: none; }
    .topbar__logout span { display: none; }
    .topbar__manager-panel {
        right: 0;
        left: auto;
        width: min(300px, calc(100vw - 28px));
    }
    .orders-create-btn__text { display: none; }
    .orders-create-btn__short { display: inline; }
    .orders-create-btn {
        padding: 9px 12px;
    }

    .catalog-layout {
        display: block;
    }
    .catalog-toolbar {
        gap: 6px;
        margin-bottom: 10px;
    }
    /*
     * Phone toolbar — two full-width rows:
     * 1) Категорії | Фільтри
     * 2) alone: 10 | 20 full-width; with compare: 10/20 left, tools right
     */
    .catalog-toolbar__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .catalog-actions {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        min-width: 0;
        justify-content: stretch;
        padding: 3px;
        border-radius: 12px;
    }
    .catalog-actions .filter-btn {
        min-width: 0;
        justify-content: center;
        height: 38px;
        padding: 0 10px;
        gap: 6px;
        font-size: 0.86rem;
        overflow: hidden;
    }
    .catalog-actions .filter-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .catalog-actions .filter-btn svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }
    .catalog-search {
        order: 0;
        flex: 1 1 100%;
    }
    .catalog-search input {
        height: 46px;
        font-size: 1rem;
    }
    .catalog-controls {
        order: 2;
        margin: 0 !important;
        padding: 2px;
        border-radius: 12px;
        overflow: hidden;
    }
    /* No compare picks yet — stretch 10/20 so the row isn't half-empty */
    .catalog-toolbar__row:not(:has(.compare-toolbar:not([hidden]))) .catalog-controls {
        flex: 1 1 100%;
        width: 100%;
    }
    .catalog-toolbar__row:not(:has(.compare-toolbar:not([hidden]))) .catalog-controls .page-size {
        display: flex;
        width: 100%;
        gap: 4px;
    }
    .catalog-toolbar__row:not(:has(.compare-toolbar:not([hidden]))) .catalog-controls .page-size__btn {
        flex: 1 1 0;
        min-width: 0;
    }
    /* Compare visible — hug content left, tools right */
    .catalog-toolbar__row:has(.compare-toolbar:not([hidden])) .catalog-controls {
        flex: 0 0 auto;
        width: auto;
        margin-right: auto !important;
    }
    .compare-toolbar {
        flex: 0 0 auto;
        order: 3;
        width: max-content;
        max-width: 100%;
        margin: 0 0 0 auto !important;
    }
    .compare-toolbar:not([hidden]) {
        margin: 0 0 0 auto !important;
    }
    .compare-toolbar:not([hidden]) + .catalog-controls {
        margin: 0 !important;
        margin-right: auto !important;
    }
    /* FAB is position:fixed — don't leave a flex/grid hole in the toolbar */
    .catalog-toolbar__row > .compare-fab {
        order: 99;
        flex: 0 0 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: visible;
    }
    .catalog-toolbar__row > .compare-fab:not([hidden]) {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        width: 48px !important;
        height: 48px !important;
    }
    .page-size,
    .view-toggle {
        border-left: 0;
        padding-left: 0;
    }
    /* Phone is list-only — hide view toggle, shrink page-size */
    .catalog-controls .view-toggle {
        display: none !important;
    }
    .catalog-controls .page-size__btn {
        min-width: 28px;
        height: 30px;
        padding: 0 6px;
        border-radius: 8px;
        font-size: 0.78rem;
    }
    /* Phone: only 10 / 20 per page */
    .catalog-controls .page-size__btn[data-size="30"],
    .catalog-controls .page-size__btn[data-size="50"] {
        display: none !important;
    }

    /* After category pick: compact crumbs + title, not big chip stack */
    .catalog-selection {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px 8px;
        margin: 2px 0 2px;
        padding: 0;
        min-width: 0;
    }
    .catalog-selection__path {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 5px;
        flex: 1 1 100%;
        min-width: 0;
    }
    .catalog-selection__path .chip {
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--mute);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.25;
        max-width: 100%;
    }
    .catalog-selection__path .chip-link:hover,
    .catalog-selection__path .chip-link:focus-visible {
        background: transparent;
        color: var(--accent-deep);
        text-decoration: underline;
        box-shadow: none;
    }
    .catalog-selection__sep {
        font-size: 0.78rem;
        line-height: 1.25;
        opacity: 0.7;
    }
    .catalog-selection__path .chip-link.is-current,
    .catalog-selection__path .chip-current {
        flex: 1 1 100%;
        margin-top: 2px;
        padding: 0;
        background: transparent;
        color: var(--accent-deep);
        font-size: 1.12rem;
        font-weight: 750;
        letter-spacing: -0.02em;
        line-height: 1.2;
        white-space: normal;
    }
    .catalog-selection__active {
        flex: 1 1 100%;
        justify-content: flex-start;
        margin-left: 0;
        max-width: 100%;
    }
    .catalog-filter-chip {
        font-size: 0.72rem;
        padding: 3px 5px 3px 8px;
    }

    body.is-guest-storefront.is-catalog .storefront-bar {
        margin-bottom: 10px;
    }

    .category-drawer,
    .filter-drawer {
        width: 100%;
        max-width: none;
        padding: 14px 0 20px 14px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        padding-left: max(14px, env(safe-area-inset-left));
    }
    .category-drawer .filter-drawer__head,
    .filter-drawer .filter-drawer__head,
    .category-filter-sheet .filter-drawer__head {
        padding-right: 14px;
    }
    .category-filter-sheet {
        left: 0;
        width: 100%;
        height: 100%;
        padding: 14px 0 20px 14px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        transform: translateX(105%);
        box-shadow: none;
        border-right: 0;
    }
    .category-filter-sheet.is-open {
        transform: translateX(0);
    }
    .filter-back,
    .filter-close {
        width: 44px;
        height: 44px;
    }
    .filter-acc__head {
        min-height: 48px;
        padding: 12px 2px;
    }
    .check {
        min-height: 44px;
        padding: 12px 4px;
    }

    .tip::before {
        left: 50%;
        top: auto;
        bottom: -3px;
        transform: translateX(-50%) rotate(45deg);
    }
    .tip.is-on {
        transform: translateX(-50%) translateY(0);
    }

    .auth-card {
        padding: 36px 24px 28px;
        width: min(100%, 560px);
    }

    .auth-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .topbar__finance {
        flex-direction: column;
        gap: 0;
        padding: 4px 0;
    }
    .topbar__stat + .topbar__stat {
        border-left: 0;
        border-top: 1px solid rgba(20, 48, 38, .08);
        padding-top: 8px;
        margin-top: 6px;
    }
    .topbar__stat {
        padding: 4px 12px;
    }
    .catalog-controls {
        flex-wrap: wrap;
        gap: 6px;
    }
    .compare-tool-btn span {
        display: none;
    }
    .compare-tool-btn {
        padding: 0 10px;
    }
    .filter-btn span {
        font-size: 0.84rem;
    }
    .product-card__body h3 {
        font-size: 0.95rem;
    }
    .product-card__stats {
        font-size: 0.8rem;
        gap: 8px 12px;
    }
}

/* ?? Orders list + checkout (B2B flow) ?? */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.orders-page,
.checkout-page,
.order-detail-page {
    display: grid;
    gap: 22px;
    margin-top: 8px;
    padding-bottom: 48px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.orders-panel {
    padding: 20px 22px 22px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.checkout-side.orders-panel {
    background: var(--surface-raised);
    border-color: var(--surface-border-strong);
    box-shadow: var(--shadow-lg);
}

.orders-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 12px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.28);
    transition: background .15s, box-shadow .15s, filter .15s;
}

.orders-create-btn:hover {
    filter: none;
    background: var(--accent-deep);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.32);
    color: #fff;
}

.orders-create-btn span:first-child {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
}

.orders-create-btn__short {
    display: none;
}

.orders-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 18px;
    min-width: 0;
    max-width: 100%;
}

.orders-period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.orders-period__caption {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
}

.orders-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    padding: 3px;
    border: 1px solid rgba(28, 50, 44, .18);
    border-radius: 12px;
    background: rgba(244, 247, 245, .95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.orders-chip {
    height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mute);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.orders-chip:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .7);
}

.orders-chip.is-on {
    color: #fff;
    background: var(--accent-deep);
    box-shadow: 0 1px 2px rgba(28, 50, 44, .18);
}

.orders-range {
    position: relative;
}

/* Lift stage above sticky rail while any period calendar is open */
.shell.is-cal-open .stage,
.stage.is-cal-open {
    z-index: 90;
}

.shell.is-cal-open .orders-range,
.stage.is-cal-open .orders-range {
    z-index: 120;
}

.orders-range__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: min(220px, 100%);
    max-width: 100%;
    height: 38px;
    padding: 0 12px 0 12px;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 12px;
    background: rgba(244, 247, 245, .92);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 560;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(19, 40, 32, .03);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.orders-range__trigger svg:first-child {
    width: 16px;
    height: 16px;
    color: var(--accent-deep);
    flex: 0 0 auto;
}

.orders-range__chev {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--mute);
    transition: transform .18s ease;
}

.orders-range__trigger:hover,
.orders-range__trigger[aria-expanded="true"] {
    border-color: rgb(var(--accent-rgb) / .35);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .08);
    background: var(--surface-solid);
}

.orders-range__trigger[aria-expanded="true"] .orders-range__chev {
    transform: rotate(180deg);
}

.orders-range__trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-cal {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    width: min(312px, calc(100vw - 32px));
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--surface-border-strong);
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 42, 34, .16);
}

.orders-cal[hidden] {
    display: none !important;
}

.orders-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.orders-cal__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: capitalize;
}

.orders-cal__nav {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.orders-cal__nav:hover {
    background: rgb(var(--accent-rgb) / .18);
}

.orders-cal__weekdays,
.orders-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
}

.orders-cal__weekdays {
    margin-bottom: 4px;
    gap: 2px;
}

.orders-cal__weekdays span {
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mute);
}

.orders-cal__day {
    position: relative;
    z-index: 1;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 560;
    cursor: pointer;
}

.orders-cal__day:disabled {
    cursor: default;
    pointer-events: none;
}

.orders-cal__num {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 3px auto;
    border-radius: 999px;
    transition: background .12s, color .12s, box-shadow .12s;
}

.orders-cal__day:hover:not(:disabled) .orders-cal__num {
    background: rgb(var(--accent-rgb) / .16);
    color: var(--accent-deep);
}

.orders-cal__day:disabled .orders-cal__num {
    color: transparent;
    background: transparent;
}

.orders-cal__day.is-today:not(.is-start):not(.is-end) .orders-cal__num {
    box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / .5);
    font-weight: 700;
}

/* Continuous filled band for the selected period */
.orders-cal__day.is-in-range::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 0;
    right: 0;
    background: var(--accent);
}

.orders-cal__day.is-in-range.is-start::before {
    left: 50%;
}

.orders-cal__day.is-in-range.is-end::before {
    right: 50%;
}

.orders-cal__day.is-in-range.is-start.is-end::before {
    display: none;
}

.orders-cal__day.is-in-range:not(.is-start):not(.is-end) .orders-cal__num {
    color: #fff;
    font-weight: 700;
}

.orders-cal__day.is-start .orders-cal__num,
.orders-cal__day.is-end .orders-cal__num {
    background: var(--accent-deep);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .35);
}

.orders-cal__day.is-start:hover .orders-cal__num,
.orders-cal__day.is-end:hover .orders-cal__num {
    background: var(--accent);
    color: #f4f7f5;
}

.orders-cal__day.is-pending .orders-cal__num {
    background: rgb(var(--accent-rgb) / .2);
    color: var(--accent-deep);
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--accent-deep);
}

.orders-cal__foot {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 35, 55, .08);
}

.orders-cal__picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.orders-cal__pick {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgb(var(--accent-rgb) / .08);
    border: 1px solid rgb(var(--accent-rgb) / .12);
}

.orders-cal__pick span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
}

.orders-cal__pick strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}

.orders-cal__pick:not(.is-empty) {
    background: rgb(var(--accent-rgb) / .2);
    border-color: rgb(var(--accent-rgb) / .35);
}

.orders-cal__pick:not(.is-empty) strong {
    color: var(--accent-deep);
}

.orders-cal__pick.is-empty strong {
    color: var(--mute);
    font-weight: 560;
}

.orders-cal__pick.is-active {
    background: rgb(var(--accent-rgb) / .16);
    border-color: rgb(var(--accent-rgb) / .35);
}

.orders-cal__step {
    margin: 0;
    font-size: 0.82rem;
    color: var(--accent-deep);
    font-weight: 600;
}

.orders-cal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.orders-cal__btn {
    height: 36px;
    border-radius: 11px;
    border: 0;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}

.orders-cal__btn--ghost {
    background: rgba(15, 35, 55, .06);
    color: var(--mute);
}

.orders-cal__btn--ghost:hover {
    background: rgba(15, 35, 55, .1);
    color: var(--ink);
}

.orders-cal__btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 14px rgb(var(--accent-rgb) / .22);
}

.orders-cal__btn--primary:hover:not(:disabled) {
    background: var(--accent-deep);
}

.orders-cal__btn--primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}

.orders-table-wrap {
    position: relative;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 96px;
    -webkit-overflow-scrolling: touch;
}

.orders-table-wrap.is-loading {
    pointer-events: none;
    user-select: none;
}

.orders-table-wrap.is-loading > table {
    filter: blur(3.5px) saturate(.9);
    opacity: .48;
    transition: filter .18s ease, opacity .18s ease;
}

.orders-table-wrap.is-loading::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 22px;
    height: 22px;
    margin: -34px 0 0 -11px;
    border-radius: 50%;
    border: 2.5px solid rgb(var(--accent-rgb) / .22);
    border-top-color: var(--accent);
    animation: orders-load-spin .7s linear infinite;
}

.orders-table-wrap.is-loading::after {
    content: attr(data-loading-text);
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 24px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--accent-deep);
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / .2) 0%,
        rgb(255 255 255 / .48) 100%
    );
}

@keyframes orders-load-spin {
    to { transform: rotate(360deg); }
}

.orders-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.orders-table th,
.orders-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 35, 55, .07);
    vertical-align: middle;
}

.orders-table th {
    color: var(--mute);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.orders-table__sum {
    text-align: right !important;
    white-space: nowrap;
    font-weight: 650;
}

.orders-table__action {
    text-align: right !important;
    width: 1%;
    white-space: nowrap;
}

.orders-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Paired control: left open/edit, right filled repeat */
.orders-row-actions--pair {
    gap: 0;
    border: 1.5px solid rgba(var(--accent-rgb), 0.55);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(28, 50, 44, .08);
}

.orders-row-actions--pair .orders-row-btn {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.orders-row-actions--pair .orders-row-btn--edit,
.orders-row-actions--pair .orders-row-btn--view {
    border-right: 1px solid rgba(var(--accent-rgb), 0.28);
}

.orders-table__empty td {
    padding: 36px 12px;
    text-align: center;
    color: var(--mute);
    border-bottom: 0;
}

.orders-sort {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    padding: 0;
}

.orders-sort:hover {
    color: var(--accent-deep);
}

.orders-status {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.orders-status.is-new {
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
}

.orders-status.is-done {
    background: rgba(15, 35, 55, .08);
    color: var(--mute);
}

.orders-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 34px;
    padding: 0 13px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}

@media (max-width: 1280px) {
    .shell.is-rail-open .orders-table {
        min-width: 520px;
        font-size: 0.86rem;
    }
    .shell.is-rail-open .orders-table th,
    .shell.is-rail-open .orders-table td {
        padding: 10px 6px;
    }
    .shell.is-rail-open .orders-row-actions--pair .orders-row-btn {
        height: 30px;
        padding: 0 10px;
        font-size: 0.78rem;
    }
    .shell.is-rail-open .orders-panel {
        padding: 16px 14px 18px;
    }
}

@media (max-width: 1100px) {
    .shell.is-rail-open .orders-table th:nth-child(3),
    .shell.is-rail-open .orders-table td:nth-child(3) {
        display: none;
    }
}

.orders-row-btn--edit {
    background: #fff;
    color: var(--accent-deep);
}

.orders-row-btn--edit:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.orders-row-btn--view {
    background: #fff;
    color: var(--mute) !important;
    text-decoration: none !important;
}

.orders-row-btn--view:hover {
    background: rgba(28, 50, 44, 0.05);
    color: var(--ink) !important;
    text-decoration: none !important;
}

.orders-row-btn--repeat {
    min-width: 0;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
}

.orders-row-btn--repeat:hover {
    background: var(--accent-deep);
    color: #fff;
    filter: brightness(1.02);
}

.orders-row-actions:not(.orders-row-actions--pair) .orders-row-btn--edit {
    border-color: rgba(var(--accent-rgb), 0.55);
}

.orders-row-actions:not(.orders-row-actions--pair) .orders-row-btn--view {
    border-color: rgba(28, 50, 44, 0.2);
}

.orders-row-actions:not(.orders-row-actions--pair) .orders-row-btn--repeat {
    border-color: var(--accent);
}

.orders-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.orders-panel__head h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
}

.orders-panel__sub {
    margin: 4px 0 0;
    color: var(--mute);
    font-size: 0.88rem;
}

.orders-link-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.orders-link-btn:hover {
    background: rgb(var(--accent-rgb) / .1);
    border-color: rgb(var(--accent-rgb) / .35);
}

.orders-empty {
    padding: 18px 4px 8px;
    color: var(--mute);
}

.orders-empty p {
    margin: 0 0 10px;
}

.cart-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 8px;
    padding: 8px 2px 4px;
}

.cart-hero__eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.cart-hero__title {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.cart-hero__lead {
    margin: 0;
    max-width: 36rem;
    color: var(--mute);
    font-size: 0.95rem;
    line-height: 1.45;
}

.cart-hero__link {
    flex-shrink: 0;
    color: var(--accent-deep);
    font-weight: 650;
    text-decoration: none;
    font-size: 0.9rem;
}

.cart-hero__link:hover {
    text-decoration: underline;
}

.checkout-empty {
    margin-top: 8px;
}

.cart-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    border-radius: 22px;
    background:
        radial-gradient(420px 180px at 50% 0%, rgb(var(--accent-rgb) / .1), transparent 70%),
        var(--surface);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
}

.cart-empty__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 18px;
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
}

.cart-empty h2 {
    margin: 0;
    font-size: 1.25rem;
}

.cart-empty p {
    margin: 0 0 8px;
    color: var(--mute);
    max-width: 28rem;
}

.cart-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.cart-empty__btn:hover {
    background: var(--accent-deep);
}

.checkout-empty[hidden],
.checkout-layout[hidden],
.checkout-np[hidden],
.checkout-project[hidden],
#checkoutProjectUrlWrap[hidden] {
    display: none !important;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 20px;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.checkout-main {
    display: grid;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}

.cart-panel {
    padding: 22px 22px 20px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    min-width: 0;
}

.cart-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cart-panel__step {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.cart-panel__head h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.cart-panel__meta {
    margin: 0;
    padding-top: 4px;
    color: var(--mute);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.cart-lines {
    display: grid;
    gap: 12px;
}

.cart-lines__empty {
    margin: 0;
    padding: 18px 16px;
    border-radius: 14px;
    background: rgba(15, 35, 55, .03);
    color: var(--mute);
    font-size: 0.92rem;
}

.cart-lines__empty a {
    color: var(--accent-deep);
    font-weight: 650;
}

.checkout-page .cart-line,
.order-detail-page .cart-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px 16px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(15, 35, 55, .08);
    background: #fff;
    box-shadow: 0 4px 14px rgba(12, 30, 24, .04);
}

.checkout-page .cart-line__img,
.order-detail-page .cart-line__img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: #f1f4f6;
}

.checkout-page .cart-line__main h3,
.order-detail-page .cart-line__main h3 {
    font-size: 0.98rem;
    line-height: 1.35;
}

.cart-line__unit {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--mute);
}

.cart-line__unit strong {
    color: var(--ink);
    font-weight: 650;
}

.cart-line__qty.qty {
    background: #f4f7f5;
    border-radius: 999px;
    padding: 2px;
    border: 1px solid rgba(15, 35, 55, .08);
}

.cart-line__sum {
    display: grid;
    gap: 2px;
    justify-items: end;
    min-width: 5.5rem;
}

.cart-line__sum span {
    font-size: 0.72rem;
    color: var(--mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cart-line__sum strong {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--accent-deep);
    white-space: nowrap;
}

.checkout-page .cart-line__remove,
.order-detail-page .cart-line__remove {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mute);
}

.cart-picker {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(15, 35, 55, .12);
}

.checkout-page .checkout-field--comment {
    margin-top: 16px;
}

.checkout-delivery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cart-delivery {
    position: relative;
    cursor: pointer;
}

.cart-delivery input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cart-delivery__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    min-height: 88px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 35, 55, .1);
    background: #fff;
    transition: border-color .18s, background .18s, box-shadow .18s;
}

.cart-delivery__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(15, 35, 55, .05);
    color: #44545c;
}

.cart-delivery__text {
    display: grid;
    gap: 3px;
}

.cart-delivery__text strong {
    font-size: 0.98rem;
    color: var(--ink);
}

.cart-delivery__text small {
    color: var(--mute);
    font-size: 0.8rem;
    line-height: 1.35;
}

.cart-delivery input:checked + .cart-delivery__card {
    border-color: rgb(var(--accent-rgb) / .45);
    background: rgb(var(--accent-rgb) / .07);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .1);
}

.cart-delivery input:checked + .cart-delivery__card .cart-delivery__icon {
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent-deep);
}

.cart-delivery:hover .cart-delivery__card {
    border-color: rgb(var(--accent-rgb) / .28);
}

.checkout-np {
    margin-top: 14px;
}

.cart-project-toggle {
    display: block;
    cursor: pointer;
}

.cart-project-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cart-project-toggle__ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px;
}

.cart-project-toggle__copy {
    display: grid;
    gap: 4px;
}

.cart-project-toggle__copy strong {
    font-size: 1.05rem;
    color: var(--ink);
}

.cart-project-toggle__copy small {
    color: var(--mute);
    font-size: 0.84rem;
    line-height: 1.4;
}

.cart-project-toggle__switch {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: rgba(15, 35, 55, .14);
    transition: background .18s;
}

.cart-project-toggle__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 35, 55, .18);
    transition: transform .18s;
}

.cart-project-toggle > input:checked + .cart-project-toggle__ui .cart-project-toggle__switch {
    background: var(--accent);
}

.cart-project-toggle > input:checked + .cart-project-toggle__ui .cart-project-toggle__switch::after {
    transform: translateX(18px);
}

.checkout-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
}

.checkout-check:has(input:checked) {
    border-color: rgb(var(--accent-rgb) / .4);
    background: rgb(var(--accent-rgb) / .08);
}

.checkout-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.checkout-check--nested {
    margin-top: 10px;
    background: rgba(255, 255, 255, .55);
}

.checkout-project {
    display: grid;
    gap: 2px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 35, 55, .08);
}

.cart-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.cart-guest {
    margin: 18px 0 4px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(15, 35, 55, .08);
}

.cart-guest__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.cart-guest__lead {
    margin: 0 0 14px;
    color: var(--mute);
    font-size: 0.92rem;
    line-height: 1.45;
}

.cart-guest-grid .checkout-field em {
    color: #c0392b;
    font-style: normal;
    font-weight: 700;
}

.cart-guest__req {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(192, 57, 43, .08);
    color: #a93226;
    font-size: 0.88rem;
    font-weight: 600;
}

.cart-empty--ok .cart-empty__icon {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .12);
}

.cart-summary {
    position: sticky;
    top: 16px;
    padding: 22px 20px 20px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 251, 249, .96)),
        var(--surface-raised);
    border: 1px solid var(--surface-border-strong);
    box-shadow: var(--shadow-lg);
}

.cart-summary__eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.cart-summary__count {
    margin: 0 0 14px;
}

.cart-summary__total-wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(15, 35, 55, .08);
    border-bottom: 1px solid rgba(15, 35, 55, .08);
}

.cart-summary__total-wrap > span {
    color: var(--mute);
    font-weight: 600;
}

.cart-summary .checkout-total {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.checkout-field--date input {
    max-width: 180px;
}

.checkout-probability__box {
    position: relative;
}

.checkout-probability__box input {
    width: 100%;
    padding: 11px 42px 11px 12px;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.checkout-probability__toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--mute);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 4px;
}

.checkout-probability__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 35, 55, .12);
}

.checkout-probability__menu[hidden] {
    display: none !important;
}

.checkout-probability__item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(15, 35, 55, .08);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.checkout-probability__item:last-child {
    border-bottom: 0;
}

.checkout-probability__item strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.checkout-probability__item span {
    color: var(--mute);
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 500;
}

.checkout-probability__item:hover,
.checkout-probability__item:focus-visible {
    background: rgb(var(--accent-rgb) / .06);
    outline: none;
}

.checkout-field {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    color: var(--mute);
    font-size: 0.86rem;
    font-weight: 600;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(15, 35, 55, .12);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    resize: vertical;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: rgb(var(--accent-rgb) / .45);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.checkout-total {
    margin: 8px 0 16px;
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--ink);
}

.checkout-actions {
    display: grid;
    gap: 14px;
}

.cart-action-blocks {
    display: grid;
    gap: 0;
    padding-top: 4px;
}

.cart-action-block {
    position: relative;
    margin-top: 26px;
}

.cart-action-block:first-child {
    margin-top: 8px;
}

.cart-action-block__note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 3;
    margin: 0;
    height: 0;
    padding: 0 10px;
    border: none;
    border-radius: 5px;
    overflow: hidden;
    color: #fff;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition:
        height .15s ease,
        padding .15s ease,
        opacity .15s ease,
        border-color .15s ease;
}

.cart-action-block:hover .cart-action-block__note,
.cart-action-block:focus-within .cart-action-block__note {
    height: auto;
    padding: 5px 10px 10px;
    border: 1px solid #746f73;
    opacity: 1;
}

.cart-action-block__note--save {
    background: #0d79df;
}

.cart-action-block__note--send {
    background: #00872d;
}

.cart-action-block__note--danger {
    background: #e30d0f;
}

.cart-action-block__note--muted {
    background: #5c6670;
}

.cart-action-block__btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: filter .15s, transform .12s;
}

.cart-action-block:hover .cart-action-block__btn,
.cart-action-block__btn:focus-visible {
    filter: brightness(1.06);
}

.cart-action-block__btn:active {
    transform: translateY(1px);
}

.cart-action-block__btn--save {
    background: #17a2b8;
}

.cart-action-block__btn--send {
    background: var(--accent-deep);
}

.cart-action-block__btn--danger {
    background: #dc3545;
}

.cart-action-block__btn--muted {
    background: #6c757d;
}

.checkout-action {
    display: grid;
    gap: 6px;
}

.checkout-action--danger {
    margin-top: 4px;
}

.checkout-action__hint {
    margin: 0;
    color: var(--mute);
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 500;
}

.checkout-btn {
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, filter .15s;
}

.checkout-btn--primary {
    background: linear-gradient(145deg, var(--accent), var(--accent-deep));
    color: #f4f7f5;
    box-shadow: 0 6px 14px rgb(var(--accent-rgb) / .18);
}

.checkout-btn--primary:hover {
    filter: brightness(1.05);
}

.checkout-btn--secondary {
    background: var(--surface-solid);
    color: var(--ink);
    border-color: rgba(28, 50, 44, .14);
}

.checkout-btn--secondary:hover {
    border-color: rgb(var(--accent-rgb) / .45);
    background: rgb(var(--accent-rgb) / .06);
}

.checkout-btn--ghost {
    background: transparent;
    color: var(--mute);
    border-color: transparent;
    font-weight: 600;
    min-height: 38px;
    font-size: 0.88rem;
}

.checkout-btn--ghost:hover {
    color: #b42318;
    background: rgba(180, 35, 24, .06);
}

.order-cart-list {
    display: grid;
    gap: 10px;
}

.product-picker {
    margin: 16px 0 4px;
    max-width: 520px;
}

.cart-picker .product-picker {
    margin: 0;
    max-width: none;
}

.product-picker--cart .product-picker__label {
    margin-bottom: 8px;
    padding-left: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.product-picker--cart .product-picker__bar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0;
    min-height: 48px;
    padding: 4px 4px 4px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 35, 55, .12);
    background: #fff;
    box-shadow: 0 4px 16px rgba(12, 30, 24, .05);
    transition: border-color .18s, box-shadow .18s;
}

.product-picker--cart .product-picker__bar:focus-within {
    border-color: rgb(var(--accent-rgb) / .45);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.product-picker--cart .product-picker__icon {
    display: grid;
    place-items: center;
    color: var(--mute);
    margin-right: 8px;
}

.product-picker--cart .product-picker__search--main {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 8px 0 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.product-picker--cart .product-picker__search--main::placeholder {
    color: #8a9490;
}

.product-picker--cart .product-picker__search--main:focus {
    outline: none;
}

.product-picker--cart .product-picker__clear {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
}

.product-picker--cart .product-picker__clear:hover {
    background: rgba(15, 35, 55, .06);
    color: var(--ink);
}

.product-picker--cart .product-picker__clear[hidden] {
    display: none !important;
}

.product-picker--cart .product-picker__add {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, opacity .15s;
}

.product-picker--cart .product-picker__add:hover:not(:disabled) {
    background: var(--accent-deep);
}

.product-picker--cart .product-picker__add:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.product-picker--cart .product-picker__dropdown {
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    border-radius: 14px;
    border: 1px solid rgba(15, 35, 55, .1);
    box-shadow: 0 16px 36px rgba(12, 30, 24, .12);
}

.product-picker--cart .product-picker__list {
    max-height: 280px;
    padding: 8px;
}

.product-picker--cart .product-picker__item {
    padding: 10px 12px;
    border-radius: 10px;
}

.product-picker--cart .product-picker__empty {
    padding: 16px;
}

.product-picker__label {
    margin: 0 0 10px;
    padding-left: 4px;
    color: var(--mute);
    font-size: 0.88rem;
    font-weight: 600;
}

.product-picker__group {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 40px 44px;
    align-items: stretch;
    min-height: 42px;
    border: 1px solid rgba(28, 50, 44, .18);
    border-radius: 10px;
    background: #fff;
    overflow: visible;
}

.product-picker__selected {
    width: 100%;
    min-width: 0;
    border: 0;
    border-right: 1px solid rgba(28, 50, 44, .12);
    border-radius: 10px 0 0 10px;
    background: #f3f5f4;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    padding: 0 12px;
}

.product-picker__btn {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(28, 50, 44, .12);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.product-picker__btn--toggle.is-open {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-deep);
}

.product-picker__btn--reset {
    color: #c62828;
    font-weight: 700;
}

.product-picker__btn--add {
    border-right: 0;
    border-radius: 0 9px 9px 0;
    background: #8a9490;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
}

.product-picker__btn--add:hover {
    background: #6f7975;
}

.product-picker__btn--reset:hover {
    background: rgba(198, 40, 40, .08);
}

.product-picker__dropdown {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    border: 1px solid rgba(28, 50, 44, .16);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(19, 40, 32, .12);
    overflow: hidden;
}

.product-picker__search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(28, 50, 44, .1);
}

.product-picker__search {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(28, 50, 44, .14);
    border-radius: 8px;
    background: #f7f9f8;
    font: inherit;
    font-size: 0.88rem;
}

.product-picker__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 240px;
    overflow: auto;
}

.product-picker__item {
    display: grid;
    gap: 2px;
    padding: 8px 14px;
    cursor: pointer;
}

.product-picker__item:hover,
.product-picker__item.is-on {
    background: rgba(var(--accent-rgb), 0.1);
}

.product-picker__item.is-out {
    opacity: .55;
    cursor: not-allowed;
}

.product-picker__name {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
}

.product-picker__meta {
    color: var(--mute);
    font-size: 0.78rem;
}

.product-picker__stock.is-out {
    color: #b42318;
}

.product-picker__empty {
    padding: 14px;
    color: var(--mute);
    font-size: 0.86rem;
    text-align: center;
}

.order-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, .58);
}

.order-line__img {
    width: 64px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f6;
    border: 1px solid rgba(15, 35, 55, .06);
    display: grid;
    place-items: center;
}

.order-line__img.is-empty {
    background:
      linear-gradient(135deg, rgba(15, 35, 55, .04), rgba(15, 35, 55, .08));
}

.order-line__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.order-line__sku {
    margin: 0 0 2px;
    font-size: 0.78rem;
    color: var(--mute);
}

.order-line h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.order-line__price {
    font-weight: 650;
    white-space: nowrap;
    color: var(--accent-deep);
}

.order-line__qty-static {
    font-weight: 600;
    color: var(--mute);
    white-space: nowrap;
}

.order-line__remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mute);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.order-line__remove:hover {
    background: rgba(225, 29, 72, .1);
    color: #e11d48;
}

.orders-summary {
    margin: 0;
    color: var(--mute);
    font-size: 0.92rem;
}

.orders-summary strong {
    color: var(--ink);
}

.orders-checkout {
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--accent), var(--accent-deep));
    color: #f4f7f5;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgb(var(--accent-rgb) / .18);
}

.orders-checkout:hover:not(:disabled) {
    filter: brightness(1.05);
}

.orders-checkout:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary {
        position: static;
    }
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-delivery {
        grid-template-columns: 1fr;
    }

    .cart-project-grid {
        grid-template-columns: 1fr;
    }

    .cart-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1100px) {
    .topbar {
        flex-wrap: wrap;
        gap: 10px 14px;
    }
    .topbar__lead {
        flex: 1 1 auto;
        min-width: min(100%, 180px);
    }
    .topbar__account {
        flex: 0 1 auto;
    }
    .topbar__account--home {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
    .topbar__account--home .topbar__finance {
        margin-right: auto;
    }
    .orders-create-btn__text { display: none; }
    .orders-create-btn__short { display: inline; }
}

@media (max-width: 720px) {
    .orders-create-btn {
        padding: 9px 12px;
    }
    .orders-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .orders-range__trigger {
        width: 100%;
    }
    .orders-cal {
        left: 0;
        right: 0;
        width: auto;
    }
    .order-line {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas:
            "img main remove"
            "img price qty";
    }
    .order-line:not(:has(.order-line__img)) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main remove"
            "price qty";
    }
    .order-line__img { grid-area: img; width: 48px; height: 36px; }
    .order-line__main { grid-area: main; }
    .order-line__price { grid-area: price; }
    .order-line .qty { grid-area: qty; justify-self: end; }
    .order-line__qty-static { grid-area: qty; justify-self: end; }
    .order-line__remove { grid-area: remove; justify-self: end; }

    .checkout-page .cart-line,
.order-detail-page .cart-line {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "img main remove"
            "img qty sum";
        gap: 10px 12px;
    }
    .checkout-page .cart-line__img,
    .order-detail-page .cart-line__img { grid-area: img; width: 64px; height: 64px; }
    .checkout-page .cart-line__main,
    .order-detail-page .cart-line__main { grid-area: main; }
    .checkout-page .cart-line__qty,
    .order-detail-page .cart-line__qty { grid-area: qty; justify-self: start; }
    .checkout-page .cart-line__sum,
    .order-detail-page .cart-line__sum { grid-area: sum; justify-items: end; }
    .checkout-page .cart-line__remove,
    .order-detail-page .cart-line__remove { grid-area: remove; }

    .order-detail-page .cart-line--readonly {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "img main sum";
    }
    .order-detail-page .cart-line--readonly .cart-line__sum { grid-area: sum; }
}

/* ??? shared module pages (projects, shipments, repairs, etc.) ??? */
.module-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
}

.module-search,
.module-select {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, .7);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
}

.module-search {
    flex: 1 1 220px;
    min-width: 160px;
}

.module-select {
    flex: 0 0 auto;
}

.module-status {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    background: rgba(15, 42, 34, .08);
    color: var(--mute);
    white-space: nowrap;
}

.module-status.is-new,
.module-status.is-open {
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
}

.module-status.is-done,
.module-status.is-closed {
    background: rgba(15, 42, 34, .1);
    color: var(--mute);
}

.module-status.is-danger,
.module-status.is-rejected {
    background: rgba(212, 83, 90, .12);
    color: #b42318;
}

.module-status.is-warn {
    background: rgba(194, 106, 45, .14);
    color: var(--warn);
}

.module-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 42, 34, .35);
}

.module-modal[hidden] {
    display: none !important;
}

.module-modal__card {
    width: min(480px, 100%);
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-lg);
}

.module-modal__card h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.module-modal__meta {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--mute);
    font-size: 0.9rem;
}

.module-modal__meta strong {
    color: var(--ink);
}

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

.profile-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    background: rgb(var(--accent-rgb) / .1);
    border: 1px solid var(--surface-border);
}

/* —— Propositions (КП) —— */
.prop-list-panel .prop-table th.prop-table__status,
.prop-list-panel .prop-table td.prop-table__status {
    text-align: center;
    width: 180px;
}

.prop-list-panel .prop-table th.prop-table__note,
.prop-list-panel .prop-table td.prop-table__note {
    text-align: center;
    min-width: 140px;
    max-width: 220px;
}

.prop-status {
    min-width: 160px;
    max-width: 200px;
    height: 36px;
}

.prop-edit-actions,
.prop-download,
.prop-convert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prop-download__label {
    color: var(--mute);
    font-size: 0.86rem;
    white-space: nowrap;
}

.prop-icon-btn,
.prop-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1.5px solid rgba(var(--accent-rgb), 0.4);
    background: #fff;
    color: var(--accent-deep);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
}

.prop-icon-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.prop-del {
    border-color: rgba(28, 50, 44, 0.18);
    color: var(--mute);
}

.prop-del:hover:not(:disabled):not(.is-disabled) {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.35);
}

.prop-del:disabled,
.prop-del.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.prop-note-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: center;
    max-width: 200px;
}

.prop-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--accent-deep);
    font-weight: 600;
    font-size: 0.86rem;
}

.prop-note-empty {
    color: var(--mute);
    font-size: 0.86rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prop-edit-page {
    max-width: 1180px;
}

.prop-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.prop-doc-head__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prop-doc-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent-deep);
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 700;
}

.prop-doc-brand {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
}

.prop-doc-profile-link {
    color: var(--accent-deep);
    font-size: 0.88rem;
    font-weight: 600;
}

.prop-doc-title {
    text-align: center;
    margin: 8px 0 22px;
}

.prop-doc-title h2 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 650;
}

.prop-doc-from {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.prop-doc-from input {
    min-width: min(420px, 80vw);
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: #fff;
    font: inherit;
}

.prop-doc-intro {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}

.prop-products-panel {
    margin: 8px 0 20px;
}

.prop-products-wrap {
    overflow-x: auto;
}

.prop-products-table {
    min-width: 980px;
}

.prop-products-table th,
.prop-products-table td {
    vertical-align: middle;
}

.prop-col-move { width: 42px; }
.prop-col-idx { width: 40px; text-align: center; }
.prop-col-img { width: 88px; }
.prop-col-qty { width: 84px; }
.prop-col-price { width: 140px; }
.prop-col-discount { width: 90px; }
.prop-col-total { width: 120px; text-align: center; white-space: nowrap; }
.prop-col-remove { width: 44px; }
.prop-col-desc { min-width: 160px; }

.prop-move {
    display: grid;
    gap: 2px;
}

.prop-move__btn {
    border: 0;
    background: transparent;
    color: var(--mute);
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
}

.prop-move__btn:hover:not(:disabled) {
    color: var(--accent-deep);
}

.prop-move__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.prop-cell-edit {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 6px 4px;
    text-align: left;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
}

.prop-cell-edit:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent-deep);
}

.prop-img {
    display: grid;
    place-items: center;
    width: 72px;
    height: 54px;
    border-radius: 10px;
    border: 1px dashed rgba(28, 50, 44, 0.22);
    background: rgba(15, 35, 55, 0.03);
    cursor: pointer;
    overflow: hidden;
}

.prop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prop-img__empty {
    font-size: 0.75rem;
    color: var(--mute);
}

.prop-products-table input[data-f] {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: #fff;
    font: inherit;
}

.prop-price-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.prop-price-wrap span {
    color: var(--mute);
    font-size: 0.82rem;
    white-space: nowrap;
}

.prop-line-total {
    font-weight: 650;
}

.prop-line.is-locked {
    opacity: 0.85;
}

.prop-picker-block {
    max-width: 520px;
    margin: 22px auto 0;
    text-align: center;
}

.prop-custom-nomenclature {
    margin-top: 12px;
}

.prop-nomenclature-link {
    margin: 14px 0 0;
}

.prop-nomenclature-link a {
    color: var(--accent-deep);
    font-weight: 650;
}

.prop-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 320;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-weight: 600;
}

.site-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 500;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(20, 48, 38, .94);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    box-shadow: 0 16px 40px rgba(12, 40, 30, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

.site-toast.is-on {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 800px) {
    .site-toast {
        bottom: max(20px, env(safe-area-inset-bottom));
        left: 16px;
        right: 16px;
        max-width: none;
        transform: translate(0, 16px);
    }
    .site-toast.is-on {
        transform: translate(0, 0);
    }
}

@media (max-width: 900px) {
    .prop-list-panel .prop-table th:nth-child(6),
    .prop-list-panel .prop-table td:nth-child(6) {
        min-width: 220px;
    }

    .prop-download__label {
        display: none;
    }
}

.orders-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 35, 55, .08);
    text-align: right;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--ink);
}

.orders-table a:not(.orders-row-btn) {
    color: var(--accent-deep);
    font-weight: 600;
}

.orders-table a:not(.orders-row-btn):hover {
    text-decoration: underline;
}

.checkout-field select.module-select {
    width: 100%;
    height: 42px;
}

/* —— Home dashboard —— */
.home-page {
    padding: 4px 0 28px;
    width: 100%;
    max-width: none; /* fill the stage — old 1360px left a dead strip on wide B2B screens */
    container-type: inline-size;
    container-name: home;
}

/* Guest: storefront header + hero banner */
.home-page--guest {
    max-width: none;
    padding: 0 0 32px;
}

.storefront-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: calc(var(--radius) + 2px);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 35, 55, .08);
    box-shadow: 0 8px 24px rgba(10, 50, 36, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.storefront-bar__brand {
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
    min-width: 0;
    color: inherit;
    transition: opacity .22s ease, max-width .28s cubic-bezier(.2, .8, .2, 1);
    max-width: 220px;
    overflow: hidden;
}

/* Logo in header only when the rail is collapsed (brand lives in the rail when open).
   Absolute + zero box — leave flex flow so search isn't pushed by an invisible brand. */
.shell.is-rail-open .storefront-bar__brand {
    position: absolute;
    width: 0;
    height: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.storefront-bar__brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.storefront-bar__name {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent-bright);
}

.storefront-bar__ua {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
}

.storefront-bar__tag {
    font-size: 0.58rem;
    font-weight: 560;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}

/* Shared header search — guest storefront + B2B topbar */
.header-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(15, 35, 55, .1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 250, .96));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 1px 2px rgba(15, 35, 55, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.header-search.is-suggest-open {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    z-index: 40;
}

/* Keep sticky bars above product hero while live-search is open */
body.is-header-search-open .storefront-bar,
body.is-header-search-open .topbar {
    z-index: 320;
}

.header-search__suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 420px);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(15, 42, 34, .1);
    background: #fff;
    box-shadow:
        0 18px 40px rgba(15, 35, 55, .14),
        0 2px 8px rgba(15, 35, 55, .06);
}

/* Portaled to <body> with fixed coords — escapes sticky/backdrop-filter stacking */
.header-search__suggest--portal {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 400;
    margin: 0;
}

.header-search__suggest[hidden] {
    display: none !important;
}

.header-search__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow: auto;
}

.header-search__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s ease;
}

.header-search__item:hover,
.header-search__item.is-active {
    background: rgb(var(--accent-rgb) / .1);
}

.header-search__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: #f3f7f5;
    border: 1px solid rgba(15, 42, 34, .06);
}

.header-search__thumb.is-empty {
    display: block;
    background:
        linear-gradient(145deg, #e8f1ec, #f6faf7);
}

.header-search__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-search__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.74rem;
    color: var(--mute);
}

.header-search__sku {
    font-variant-numeric: tabular-nums;
}

.header-search__stock.is-out {
    color: #a05a3c;
}

.header-search__price {
    margin-left: auto;
    color: var(--accent-deep);
    font-weight: 650;
}

.header-search__empty {
    padding: 14px 12px;
    color: var(--mute);
    font-size: 0.88rem;
    text-align: center;
}

.header-search__all {
    flex: 0 0 auto;
    display: block;
    padding: 11px 14px;
    border-top: 1px solid rgba(15, 42, 34, .08);
    color: var(--accent-deep);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    background: #f6faf8;
}

.header-search__all:hover,
.header-search__all:focus-visible {
    background: rgb(var(--accent-rgb) / .12);
    outline: none;
}

.header-search:hover {
    border-color: rgba(15, 35, 55, .16);
}

.header-search:focus-within {
    border-color: rgb(var(--accent-rgb) / .42);
    background: #fff;
    box-shadow:
        0 0 0 3px rgb(var(--accent-rgb) / .12),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.header-search__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgb(var(--accent-rgb) / .72);
    transition: color .15s ease;
}

.header-search:focus-within .header-search__icon {
    color: var(--accent-deep);
}

.header-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    height: 44px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
    outline: none;
}

.header-search__input::placeholder {
    color: #8a9a93;
    font-weight: 500;
    opacity: 1;
}

.header-search__input::-webkit-search-decoration,
.header-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.topbar .header-search {
    flex: 1 1 260px;
}

.storefront-bar__tools {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    margin-left: auto;
}

.storefront-bar__portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(var(--accent-rgb) / .28);
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.storefront-bar__portal svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.storefront-bar__portal-short {
    display: none;
}

.storefront-bar__portal:hover {
    background: rgb(var(--accent-rgb) / .16);
    border-color: rgb(var(--accent-rgb) / .42);
    color: var(--accent-deep);
}

.storefront-bar__phone,
.storefront-bar__phone-summary,
.storefront-bar__phone-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    text-decoration: none;
}

.storefront-bar__phones {
    position: relative;
}

.storefront-bar__phone-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.storefront-bar__phone-summary::-webkit-details-marker {
    display: none;
}

.storefront-bar__phone-chevron {
    flex: 0 0 auto;
    color: var(--mute);
    transition: transform .16s var(--ease);
}

.storefront-bar__phones[open] .storefront-bar__phone-chevron {
    transform: rotate(180deg);
}

.storefront-bar__phone-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 12px;
    border: 1px solid var(--surface-border-strong);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.storefront-bar__phone-item {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 9px;
    font-weight: 650;
}

.storefront-bar__phone-item:hover {
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
}

.storefront-bar__phone-ico,
.site-footer__phone-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #4a5a54;
}

.phone-ico--tel {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(16, 40, 32, .12);
    color: #3a4a55;
}

.phone-ico--kyivstar,
.phone-ico--vodafone {
    display: block;
}

.storefront-bar__phone svg,
.storefront-bar__phone-ico svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.phone-ico--tel svg {
    width: 12px;
    height: 12px;
}

.storefront-bar__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.storefront-bar__cart svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.storefront-bar__cart:hover {
    color: var(--accent-deep);
}

.storefront-bar__cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
}

@media (max-width: 900px) {
    .storefront-bar {
        padding: 12px 14px;
        gap: 10px 12px;
    }

    .storefront-bar .header-search {
        flex: 1 1 100%;
        max-width: none;
        order: 3;
    }

    .storefront-bar__tools {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 6px;
    }

    .storefront-bar__portal svg,
    .storefront-bar__portal-label,
    .storefront-bar__phone > span:not(.storefront-bar__phone-ico),
    .storefront-bar__phone-num,
    .storefront-bar__phone-summary .storefront-bar__phone-chevron {
        display: none;
    }

    .storefront-bar__portal-short {
        display: inline;
    }

    .storefront-bar__phone-menu {
        right: 0;
        left: auto;
    }

    .storefront-bar__cart span:not(.storefront-bar__cart-badge) {
        display: none;
    }

    .storefront-bar__portal {
        width: auto;
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
        justify-content: center;
        gap: 0;
        border-radius: 12px;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .storefront-bar__phone,
    .storefront-bar__phone-summary {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        gap: 0;
        border-radius: 12px;
    }
}

/* Phone: flatten the floating card — brand lives in the rail top bar */
@media (max-width: 800px) {
    body.is-guest-storefront .rail-brand {
        opacity: 1;
        max-width: min(168px, 48vw);
        pointer-events: auto;
    }

    body.is-guest-storefront .rail-brand .brand-lockup__name {
        font-size: 1.22rem;
    }

    body.is-guest-storefront .rail-brand .brand-lockup__tag {
        display: none;
    }

    .storefront-bar {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        margin: 0 0 14px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .storefront-bar__brand {
        display: none;
    }

    .storefront-bar .header-search {
        order: unset;
        flex: unset;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 42px;
        padding: 0 14px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid rgba(15, 35, 55, .1);
        box-shadow: 0 1px 2px rgba(15, 35, 55, .04);
    }

    .storefront-bar .header-search__input {
        height: 42px;
        font-size: 0.92rem;
    }

    .storefront-bar__tools {
        flex: 0 0 auto;
        margin-left: 0;
        gap: 6px;
    }

    .storefront-bar__phone,
    .storefront-bar__phone-summary,
    .storefront-bar__cart {
        width: 42px;
        height: 42px;
        justify-content: center;
        gap: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid rgba(15, 35, 55, .1);
        box-shadow: 0 1px 2px rgba(15, 35, 55, .04);
        color: var(--ink);
        padding: 0;
    }

    .storefront-bar__portal {
        width: auto;
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
        justify-content: center;
        gap: 0;
        border-radius: 12px;
        background: rgb(var(--accent-rgb) / .12);
        border: 1px solid rgb(var(--accent-rgb) / .28);
        box-shadow: 0 1px 2px rgba(15, 35, 55, .04);
        color: var(--accent-deep);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .storefront-bar__portal svg,
    .storefront-bar__portal-label {
        display: none;
    }

    .storefront-bar__portal-short {
        display: inline;
    }

    .storefront-bar__phone-summary .storefront-bar__phone-chevron {
        display: none;
    }

    /* Same icon size as portal/cart — drop the tiny grey circle */
    .storefront-bar__phone-ico,
    .storefront-bar__phone-summary .phone-ico--tel,
    .storefront-bar__phone .phone-ico--tel {
        width: 18px;
        height: 18px;
        background: none;
        border-radius: 0;
        color: inherit;
    }

    .storefront-bar__portal svg,
    .storefront-bar__phone svg,
    .storefront-bar__phone-summary svg,
    .storefront-bar__phone-ico svg,
    .storefront-bar__cart svg {
        width: 18px;
        height: 18px;
    }

    .storefront-bar__cart-badge {
        top: -6px;
        right: -6px;
    }
}

.home-page--guest .home-grid {
    display: block;
    gap: 0;
}

.home-page--guest .home-card--slider {
    grid-column: auto;
    grid-row: auto;
    margin-top: 4px;
}

.home-page--guest .home-slider {
    /* Desktop: wide CMS creatives (~3.5:1) */
    aspect-ratio: 3.5 / 1;
    width: 100%;
    height: auto;
    max-height: min(62vh, 640px);
    min-height: 280px;
    border-radius: calc(var(--radius) + 4px);
    background: #eceef1;
}

.home-page--guest .home-slider__link img {
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 800px) {
    /*
     * Phone: don't force min-height — it breaks 3.5:1 and cover crops the copy.
     * Show the full banner (contain); optional later: separate mobile creatives from CMS.
     */
    .home-page--guest .home-slider {
        aspect-ratio: 3.5 / 1;
        min-height: 0;
        max-height: none;
        border-radius: calc(var(--radius) + 2px);
    }

    .home-page--guest .home-slider__link img {
        object-fit: contain;
        object-position: center center;
        background: #eceef1;
    }

    /* Hits / news — match compact banner scale on phone */
    .home-page--guest .home-showcase {
        margin-top: 16px;
        padding: 4px 0 0;
    }

    .home-page--guest .home-showcase__tabs {
        gap: 6px 14px;
        margin: 0 0 10px;
    }

    .home-page--guest .home-showcase__tab {
        font-size: 0.88rem;
        padding: 2px 1px;
    }

    .home-page--guest .home-showcase__stage {
        grid-template-columns: 22px minmax(0, 1fr) 22px;
        gap: 2px;
    }

    .home-page--guest .home-showcase__nav {
        width: 22px;
        height: 22px;
    }

    .home-page--guest .home-showcase__nav svg {
        width: 14px;
        height: 14px;
    }

    .home-page--guest .home-showcase__track {
        min-height: 0;
        gap: 8px;
        padding: 2px 0 4px;
        /* Exactly 2 cards — arrows page by full pairs */
        grid-auto-columns: calc((100% - 8px) / 2);
    }

    .home-page--guest .home-mini-card {
        gap: 4px;
        min-height: 0;
    }

    .home-page--guest .home-mini-card__media {
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

    .home-page--guest .home-mini-card__badges {
        left: 5px;
        bottom: 5px;
        gap: 3px;
    }

    .home-page--guest .home-mini-card__badge {
        padding: 2px 5px;
        font-size: 0.6rem;
    }

    .home-page--guest .home-mini-card__sku {
        font-size: 0.66rem;
    }

    .home-page--guest .home-mini-card__title {
        font-size: 0.74rem;
        min-height: 0;
        -webkit-line-clamp: 2;
    }

    .home-page--guest .home-mini-card__price {
        font-size: 0.8rem;
    }

    .home-page--guest .home-news-strip {
        margin-top: 18px;
        padding: 0 0 4px;
    }

    .home-page--guest .home-news-strip__title {
        margin: 0 0 10px;
        font-size: 1.05rem;
    }

    .home-page--guest .home-news-strip__stage {
        grid-template-columns: 22px minmax(0, 1fr) 22px;
        gap: 2px;
    }

    .home-page--guest .home-news-strip__nav {
        width: 22px;
        height: 22px;
    }

    .home-page--guest .home-news-strip__nav svg {
        width: 14px;
        height: 14px;
    }

    .home-page--guest .home-news-strip__track {
        min-height: 0;
        gap: 8px;
        padding: 2px 0 4px;
        grid-auto-columns: calc((100% - 8px) / 2);
    }

    .home-page--guest .home-news-card {
        gap: 4px;
        min-height: 0;
    }

    .home-page--guest .home-news-card__media {
        aspect-ratio: 16 / 10;
        border-radius: 6px;
    }

    .home-page--guest .home-news-card__date {
        font-size: 0.66rem;
        min-height: 0;
    }

    .home-page--guest .home-news-card__title {
        font-size: 0.74rem;
        min-height: 0;
        -webkit-line-clamp: 2;
    }
}

/* Main content column (stage + footer) beside the rail */
.main-column {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
}

/*
 * Guest + B2B: footer sits outside .shell, full viewport width.
 * Short pages — shell grows so footer stays at the bottom of the screen.
 */
body.is-guest-storefront,
body.is-b2b {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    /* html is the only vertical scroller — clip, not visible (avoids computed auto) */
    overflow-y: clip;
}

body.is-guest-storefront .shell,
body.is-b2b .shell {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
}

body.is-guest-storefront .main-column {
    min-height: 100%;
}

body.is-guest-storefront .stage {
    flex: 1 0 auto;
    padding: 12px 14px 28px 10px;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    body.is-guest-storefront .stage {
        padding: 10px 14px 28px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(28px, calc(18px + env(safe-area-inset-bottom)));
    }

    body.is-guest-storefront .stage:has(> .home-page--guest) {
        padding-bottom: 0;
    }
}

body.is-guest-storefront .site-footer,
body.is-b2b .site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.stage:has(> .home-page--guest) {
    padding: 12px 14px 0 10px;
}

.home-showcase {
    margin-top: 28px;
    padding: 8px 0 4px;
}

.home-showcase__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 0 0 18px;
}

.home-showcase__tab {
    border: 0;
    padding: 4px 2px;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: #3a4650;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.home-showcase__tab:hover {
    color: var(--ink);
}

.home-showcase__tab.is-on {
    color: #e67a22;
    border-bottom-color: #e67a22;
}

.home-showcase__stage {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 4px;
    container-type: inline-size;
    container-name: home-showcase;
}

.home-showcase__panels {
    min-width: 0;
    overflow: hidden;
}

.home-showcase__panel[hidden] {
    display: none;
}

.home-showcase__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 4);
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 0;
    padding: 4px 0 8px;
    min-height: 280px;
    scrollbar-width: none;
}

.home-showcase__track::-webkit-scrollbar {
    display: none;
}

.home-showcase__nav {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7780;
    cursor: pointer;
}

.home-showcase__nav svg {
    width: 16px;
    height: 16px;
}

.home-showcase__nav:hover {
    color: var(--ink);
}

.home-mini-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    height: 100%;
    min-height: 268px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
}

.home-mini-card__media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f5f6;
    border: 1px solid rgba(15, 35, 55, .06);
}

.home-mini-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-mini-card__ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #eef2f4, #e2e8ec);
}

.home-mini-card__badges {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.home-mini-card__badge {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.home-mini-card__badge--new {
    background: #5aa8d8;
}

.home-mini-card__badge--hit {
    background: #3f9f5f;
}

.home-mini-card__badge--sale {
    background: #e07a2f;
}

.home-mini-card__sku {
    margin: 0;
    font-size: 0.72rem;
    color: #8a95a0;
}

.home-mini-card__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.home-mini-card__price {
    margin: auto 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}

.home-mini-card:hover .home-mini-card__title {
    color: var(--accent-deep);
}

@container home-showcase (max-width: 720px) {
    .home-showcase__track {
        grid-auto-columns: calc((100% - 24px) / 3);
        gap: 12px;
    }
}

@container home-showcase (max-width: 520px) {
    .home-showcase__track {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
    }
}

@container home-showcase (max-width: 360px) {
    .home-showcase__track {
        grid-auto-columns: 100%;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    .home-showcase__tab {
        font-size: 0.95rem;
    }

    .home-showcase__track {
        grid-auto-columns: calc((100% - 24px) / 3);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .home-showcase__stage {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
    }

    .home-showcase__track {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .home-showcase__track {
        grid-auto-columns: 100%;
    }
}

.home-news-strip {
    margin-top: 36px;
    padding: 4px 0 8px;
}

.home-news-strip__title {
    margin: 0 0 16px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.home-news-strip__stage {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 4px;
    container-type: inline-size;
    container-name: home-news;
}

.home-news-strip__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 4);
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 0;
    padding: 4px 0 8px;
    min-width: 0;
    min-height: 280px;
    scrollbar-width: none;
}

.home-news-strip__track::-webkit-scrollbar {
    display: none;
}

.home-news-strip__nav {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7780;
    cursor: pointer;
}

.home-news-strip__nav svg {
    width: 16px;
    height: 16px;
}

.home-news-strip__nav:hover {
    color: var(--ink);
}

.home-news-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    height: 100%;
    min-height: 268px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
}

.home-news-card__media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #eef2f4;
    border: 1px solid rgba(15, 35, 55, .06);
}

.home-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-news-card__ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(155deg, #e8eef2, #dce4ea);
}

.home-news-card__date {
    margin: 0;
    font-size: 0.72rem;
    color: #8a95a0;
    min-height: 1.2em;
}

.home-news-card__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    flex: 1 1 auto;
}

.home-news-card:hover .home-news-card__title {
    color: var(--accent-deep);
}

@container home-news (max-width: 720px) {
    .home-news-strip__track {
        grid-auto-columns: calc((100% - 24px) / 3);
        gap: 12px;
    }
}

@container home-news (max-width: 520px) {
    .home-news-strip__track {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
    }
}

@container home-news (max-width: 360px) {
    .home-news-strip__track {
        grid-auto-columns: 100%;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    .home-news-strip__track {
        grid-auto-columns: calc((100% - 24px) / 3);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .home-news-strip__stage {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
    }

    .home-news-strip__track {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
    }

    .home-news-strip__title {
        font-size: 1.2rem;
    }
}

@media (max-width: 420px) {
    .home-news-strip__track {
        grid-auto-columns: 100%;
    }
}

.home-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
}

.home-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.home-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 0;
}

.home-card__head h2 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.home-card--slider {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.home-slider {
    position: relative;
    /* Match CMS banner creatives (~3.4–3.9:1) so cover/contain don’t crop copy */
    aspect-ratio: 3.5 / 1;
    min-height: 160px;
    max-height: 360px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #e8eaed;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
}

.home-videos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
}

.home-video {
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(15, 35, 55, .08);
}

.home-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
}

.home-card--news {
    display: flex;
    flex-direction: column;
}

.home-card--news .home-news {
    flex: 1;
    max-height: none;
}

.home-card--orders {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: home-orders;
}

.home-card--orders .home-table-wrap {
    flex: 1;
    min-width: 0;
}

/* Medium: banner full, then videos | orders, news full */
@container home (min-width: 700px) {
    .home-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 16px;
    }

    .home-card--slider {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .home-card--videos {
        grid-column: 1;
        grid-row: 2;
    }

    .home-card--orders {
        grid-column: 2;
        grid-row: 2;
    }

    .home-card--news {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .home-grid:not(:has(.home-card--videos)) .home-card--orders {
        grid-column: 1 / -1;
    }

    .home-grid:not(:has(.home-card--orders)) .home-card--videos {
        grid-column: 1 / -1;
    }

    .home-grid:not(:has(.home-card--orders)) .home-videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-news {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: none;
    }
}

/* Wide bento: banner + news on top, videos + orders below — columns share full width */
@container home (min-width: 980px) {
    .home-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(280px, 1fr);
        grid-template-rows: auto minmax(260px, 1fr);
        gap: 18px;
    }

    .home-card--slider {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .home-card--news {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
    }

    .home-card--videos {
        grid-column: 1;
        grid-row: 2;
    }

    .home-card--orders {
        grid-column: 2;
        grid-row: 2;
    }

    .home-grid:not(:has(.home-card--news)) .home-card--slider {
        grid-column: 1 / -1;
    }

    .home-grid:not(:has(.home-card--news)) {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .home-grid:not(:has(.home-card--news)) .home-card--videos {
        grid-column: 1;
    }

    .home-grid:not(:has(.home-card--news)) .home-card--orders {
        grid-column: 2;
    }

    .home-grid:not(:has(.home-card--videos)) .home-card--orders {
        grid-column: 1 / 3;
    }

    .home-grid:not(:has(.home-card--orders)) .home-card--videos {
        grid-column: 1 / 3;
    }

    .home-grid:not(:has(.home-card--orders)) .home-videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-slider {
        aspect-ratio: 3.5 / 1;
        max-height: none;
        min-height: 160px;
        height: 100%;
    }

    .home-videos {
        grid-template-columns: 1fr;
    }

    .home-news {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: none;
    }

    .home-table-wrap {
        max-height: none;
    }
}

/* Extra-wide: give news more room so the right edge doesn’t feel empty */
@container home (min-width: 1280px) {
    .home-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.2fr) minmax(320px, 1.05fr);
        gap: 20px;
    }

    .home-slider {
        min-height: 200px;
    }
}

@container home (min-width: 1560px) {
    .home-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(360px, 1.1fr);
        gap: 22px;
    }
}

@container home (max-width: 699px) {
    .home-videos {
        grid-template-columns: 1fr;
    }
}
.home-empty {
    margin: 0;
    padding: 28px 20px;
    color: var(--mute);
    font-size: 0.95rem;
}

.home-slider__track {
    position: absolute;
    inset: 0;
}

.home-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.012);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.home-slider__slide.is-on {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.home-slider__link {
    display: block;
    width: 100%;
    height: 100%;
}

.home-slider__link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #e8eaed;
}

.home-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    color: rgba(28, 36, 42, .72);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(12, 24, 32, .1);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .22s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s, transform .18s var(--ease);
}

.home-slider:hover .home-slider__arrow,
.home-slider:focus-within .home-slider__arrow {
    opacity: 1;
}

.home-slider__arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}

.home-slider__arrow:hover {
    background: rgba(255, 255, 255, .78);
    color: var(--ink);
    border-color: rgba(255, 255, 255, .9);
}

.home-slider__arrow:active {
    transform: translateY(-50%) scale(.96);
}

.home-slider__arrow--prev {
    left: 14px;
}

.home-slider__arrow--next {
    right: 14px;
}

.home-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}

.home-slider__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 0 0 1px rgba(15, 35, 55, .08);
    transition: width .2s var(--ease), background .2s var(--ease);
}

.home-slider__dot.is-on {
    width: 18px;
    background: rgba(255, 255, 255, .92);
}

@media (hover: none) {
    .home-slider__arrow {
        opacity: .72;
    }
}

.home-card--news.home-news--measure .home-news__panel {
    transition: none;
}

.home-card--news.is-news-fit .home-news {
    overflow: visible;
}

.home-card--news.is-news-fit .home-news__chev {
    display: none;
}

.home-card--news.is-news-fit .home-news__toggle {
    cursor: default;
    pointer-events: none;
}

.home-card--news.is-news-fit .home-news__toggle:hover {
    background: transparent;
}

.home-news {
    list-style: none;
    margin: 0;
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: none;
    overflow: auto;
}

.home-news__item {
    padding: 0;
    border-top: 1px solid rgba(15, 35, 55, .08);
}

.home-news__item:first-child {
    border-top: 0;
}

.home-news__toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 6px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: var(--ink);
    border-radius: 10px;
    transition: background .15s;
}

.home-news__toggle:hover:not(:disabled) {
    background: rgb(var(--accent-rgb) / .06);
}

.home-news__toggle:disabled {
    cursor: default;
}

.home-news__title {
    flex: 1;
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.35;
}

.home-news__chev {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-right: 2px solid var(--mute);
    border-bottom: 2px solid var(--mute);
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .55;
    transition: transform .22s var(--ease), opacity .15s;
}

.home-news__item.is-open .home-news__chev {
    transform: rotate(225deg) translate(-1px, -1px);
    opacity: .85;
    border-color: var(--accent-deep);
}

.home-news__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
}

.home-news__item.is-open .home-news__panel {
    grid-template-rows: 1fr;
}

.home-news__panel[hidden] {
    display: grid !important;
}

.home-news__body {
    overflow: hidden;
    min-height: 0;
    color: var(--mute);
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0 6px;
}

.home-news__item.is-open .home-news__body {
    padding-bottom: 12px;
}

.home-news__body p {
    margin: 0;
    white-space: pre-wrap;
}

.home-table-wrap {
    padding: 10px 12px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(560px, 70vh);
}

.home-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.home-table th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(15, 35, 55, .1);
    white-space: nowrap;
}

.home-table th:nth-child(1) { width: 42%; }
.home-table th:nth-child(2) { width: 22%; }
.home-table th:nth-child(3) { width: 12%; }
.home-table th:nth-child(4) { width: 24%; }

.home-table td {
    padding: 10px 6px;
    border-bottom: 1px solid rgba(15, 35, 55, .06);
    color: var(--ink);
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.home-table tr:last-child td {
    border-bottom: 0;
}

.home-table td:nth-child(2),
.home-table td:nth-child(3),
.home-table td:nth-child(4) {
    color: var(--mute);
    white-space: normal;
}

.home-table td:nth-child(3) {
    text-align: center;
}

.home-table td:nth-child(4) {
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Narrow orders card (sidebar / phone): stack rows, no h-scroll */
@container home-orders (max-width: 559px) {
    .home-table-wrap {
        overflow-x: hidden;
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-table,
    .home-table thead,
    .home-table tbody,
    .home-table tr,
    .home-table th,
    .home-table td {
        display: block;
        width: 100%;
    }

    .home-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .home-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
        gap: 6px 10px;
        align-items: start;
        padding: 12px 2px;
        border-bottom: 1px solid rgba(15, 35, 55, .08);
    }

    .home-table tr:last-child {
        border-bottom: 0;
    }

    .home-table td {
        width: auto;
        max-width: 100%;
        padding: 0;
        border: 0;
        white-space: normal;
        text-align: left;
    }

    .home-table td:first-child {
        grid-column: 1 / -1;
        font-weight: 650;
        color: var(--ink);
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .home-table td:nth-child(2),
    .home-table td:nth-child(3),
    .home-table td:nth-child(4) {
        white-space: nowrap;
        font-size: 0.9rem;
        color: var(--ink);
    }

    .home-table td:nth-child(2)::before,
    .home-table td:nth-child(3)::before,
    .home-table td:nth-child(4)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--mute);
    }

    .home-table td:nth-child(3) {
        text-align: center;
    }

    .home-table td:nth-child(3)::before {
        text-align: center;
    }

    .home-table td:nth-child(4) {
        justify-self: end;
        text-align: right;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .home-table td:nth-child(4)::before {
        text-align: right;
    }
}

/* —— Product detail page —— */
.product-page.product-card {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    height: auto;
    max-height: none;
    min-height: 0;
    /* Catalog cards use pointer; product page reuses the class but is not clickable. */
    cursor: auto;
    transform: none;
}

.product-page.product-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.product-page .product-tabs,
.product-page .product-desc,
.product-page .product-specs,
.product-page .product-hero__info {
    cursor: auto;
}

/*
 * Product page: header stays in document flow (static).
 * Overrides catalog pin even if body still has is-catalog (old build / cache).
 */
body:has(.product-page) .storefront-bar,
body:has(.product-page) .topbar,
body.is-product .storefront-bar,
body.is-product .topbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    z-index: auto;
}

body:has(.product-page) #catalogBarSpacer,
body:has(.product-page) #catalogToolSpacer {
    display: none !important;
    height: 0 !important;
}

.product-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 0.86rem;
    color: var(--mute);
}

.product-crumb a {
    color: var(--accent-deep);
    text-decoration: none;
    cursor: pointer;
}

.product-crumb a:hover,
.product-crumb a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.product-crumb__current {
    color: var(--ink);
    max-width: 42ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.05fr);
    gap: 32px 36px;
    align-items: stretch;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.product-hero__media {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    justify-items: center;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.product-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
}

.product-gallery__thumb {
    appearance: none;
    width: 64px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}

.product-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.product-gallery__thumb:hover {
    border-color: rgb(var(--accent-rgb) / .35);
    transform: translateY(-1px);
}

.product-gallery__thumb.is-on {
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .18);
}

.product-hero__zoom {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.product-hero__frame {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border-radius: 18px;
    /* Tiandy: solid mint plate behind product photo (not grey/white) */
    background: #d8eee4;
    border: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 16px 36px rgba(10, 50, 36, .1);
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

.product-hero__zoom:hover .product-hero__frame {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 22px 44px rgba(10, 50, 36, .14);
}

.product-hero__frame::before {
    display: none;
}

.product-hero__zoom img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: #d8eee4;
    transition: transform .4s var(--ease);
}

.product-hero__zoom:hover img {
    transform: scale(1.03);
}

.product-hero__zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--accent-deep);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 35, 55, .1);
    box-shadow: 0 8px 18px rgba(15, 35, 55, .1);
    pointer-events: none;
    transition: transform .2s var(--ease), background .2s;
}

.product-hero__zoom-hint svg {
    width: 16px;
    height: 16px;
}

.product-hero__zoom:hover .product-hero__zoom-hint {
    transform: scale(1.05);
    background: #fff;
}

.product-hero__out {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 740;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(255, 245, 245, .94);
    color: #8a2a2a;
    border: 1px solid rgba(160, 40, 40, .18);
    box-shadow: 0 6px 16px rgba(10, 50, 36, .1);
}
.product-hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 8px 4px 8px 0;
    min-width: 0;
}

.product-hero__sku {
    margin: 0 0 10px;
    font-size: 0.84rem;
    color: var(--mute);
    letter-spacing: .02em;
}

.product-hero__sku strong {
    color: var(--ink);
    font-weight: 680;
}

.product-hero__title {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.18;
    font-weight: 720;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.product-hero__brand {
    margin: 0 0 20px;
    font-size: 0.92rem;
    color: var(--mute);
}

.product-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.product-hero__meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    /* Tiandy: soft green frame (availability / stock) */
    border: 1px solid rgba(0, 168, 106, .38);
}

.qty,
.product-hero__qty.qty {
    border-color: rgba(0, 168, 106, .38);
}

/* Arviom: soft blue plate + barely-visible frame */
[data-theme="blue"] .product-hero__frame {
    background: #dceffb;
    border: 1px solid rgba(120, 175, 220, .28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 16px 36px rgb(var(--accent-rgb) / .1);
}

[data-theme="blue"] .product-hero__zoom:hover .product-hero__frame {
    border-color: rgba(100, 165, 215, .38);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 22px 44px rgb(var(--accent-rgb) / .16);
}

[data-theme="blue"] .product-hero__zoom img {
    background: #dceffb;
}

[data-theme="blue"] .product-hero__meta > div {
    border-color: rgba(90, 175, 235, .5);
    background: rgba(255, 255, 255, .88);
}

[data-theme="blue"] .product-hero__qty.qty,
[data-theme="blue"] .qty {
    border-color: rgba(90, 175, 235, .55);
}

[data-theme="blue"] .product-tabs {
    border-color: rgba(90, 175, 235, .45);
}

[data-theme="blue"] .product-tabs__btn {
    border-color: rgba(90, 175, 235, .42);
}

[data-theme="blue"] .product-tabs__btn.is-on {
    border-color: #2aa3ff;
}

.product-hero__meta span {
    font-size: 0.75rem;
    color: var(--mute);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 620;
}

.product-hero__meta strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}

.product-hero__meta strong.is-muted {
    color: var(--mute);
    font-weight: 600;
}

.product-hero__prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 16px;
    background:
        linear-gradient(165deg, #ffffff 0%, rgb(var(--accent-rgb) / .08) 100%);
    border: 1px solid rgb(var(--accent-rgb) / .18);
}

.product-hero__rrp {
    font-size: 0.88rem;
    color: var(--mute);
    text-decoration: line-through;
}

.product-hero__price {
    font-size: 1.9rem;
    font-weight: 760;
    letter-spacing: -0.03em;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}

.product-hero__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.product-hero__qty {
    flex: 0 0 auto;
}

.product-hero__fav {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.product-hero__cart {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    justify-content: center;
    font-size: 0.9rem;
}
.product-tabs {
    margin-top: 28px;
    padding: 18px 20px 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--surface-border);
    box-shadow: 0 10px 28px rgb(var(--accent-rgb) / .06);
}

.product-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.product-tabs__btn {
    appearance: none;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, .7);
    color: var(--mute);
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.product-tabs__btn:hover {
    color: var(--accent-deep);
    border-color: var(--surface-border-strong);
}

.product-tabs__btn.is-on {
    color: var(--accent-deep);
    background: rgb(var(--accent-rgb) / .12);
    border-color: var(--accent-bright);
}

.product-tabs__empty {
    margin: 0;
    color: var(--mute);
}

.product-specs {
    margin: 0;
}

.product-specs__row {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 12px 18px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(20, 48, 38, .06);
}

.product-specs__row:last-child {
    border-bottom: 0;
}

.product-specs__row dt {
    margin: 0;
    color: var(--mute);
    font-weight: 560;
}

.product-specs__row dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}

.product-specs__row.is-multi dd,
.product-card__specs-row.is-multi dd {
    font-weight: 500;
}

.spec-chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spec-chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 35, 55, .12);
    background: #f3f7f5;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.25;
}

.product-page .spec-chip {
    background: #eef6f2;
    border-color: rgb(var(--accent-rgb) / .22);
}

.product-files__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    max-width: 52rem;
}

.product-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: #fff;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.product-file:hover {
    border-color: rgb(var(--accent-rgb) / .35);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(16, 40, 32, .07);
}

.product-file__kind {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.product-file__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.product-file__name {
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.3;
}

.product-file__size {
    font-size: 0.84rem;
    color: var(--mute);
}

.product-file__action {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--accent-deep);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .product-file {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .product-file__action {
        grid-column: 2;
    }
}

.product-desc--has-embed {
    max-width: none !important;
}
.product-desc__cms {
    max-width: 72ch;
    margin: 0 0 20px;
}
.product-desc--embed {
    max-width: none !important;
    margin: 0;
    padding: 0;
}
.pd-embed-frame {
    display: block;
    width: 100%;
    height: 620px; /* collapsed preview; JS raises after "Показати все" */
    min-height: 420px;
    border: 0;
    background: #fff;
    border-radius: 0;
    overflow: hidden; /* no iframe scrollbar / Win overlay ▲▼ chips */
    scrollbar-width: none;
}
.pd-embed-frame::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.product-desc {
    max-width: 72ch;
    font-size: 1rem;
    line-height: 1.7;
    color: #1b1b1b;
}

.product-desc > *:first-child {
    margin-top: 0;
}

.product-desc > *:last-child {
    margin-bottom: 0;
}

.product-desc p {
    display: block;
    margin: 0 0 1em;
}

/* CMS: section title as <p><strong>…</strong></p> */
.product-desc p:has(> strong:only-child),
.product-desc p:has(> b:only-child) {
    margin: 1.35em 0 0.5em;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #1b1b1b;
}

.product-desc p:has(> strong:only-child):first-child,
.product-desc p:has(> b:only-child):first-child {
    margin-top: 0;
}

.product-desc strong,
.product-desc b {
    font-weight: 700;
    color: #1b1b1b;
}

.product-desc ul,
.product-desc ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.product-desc li {
    margin: 0.3em 0;
}

.product-desc h2,
.product-desc h3:not(.pd-title),
.product-desc h4 {
    margin: 1.25em 0 0.5em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1b1b1b;
}

.product-desc .pd-hero__copy h2 {
    color: #fff;
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
}

.product-desc br {
    display: block;
    content: "";
    margin-top: 0.55em;
}

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    justify-items: center;
    align-items: center;
    padding: 64px 72px 56px;
    background: rgba(12, 24, 20, .72);
    backdrop-filter: blur(4px);
}

.product-lightbox[hidden] {
    display: none !important;
}

/* Keep the full photo — only center it, never crop */
.product-lightbox__stage {
    display: grid;
    place-items: center;
    max-width: min(920px, 100%);
    max-height: min(80vh, 100%);
    margin: 0 auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

.product-lightbox__stage img,
.product-lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(920px, 100%);
    max-height: min(80vh, 100%);
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
}

.product-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.product-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: background .15s, color .15s, transform .15s;
}

.product-lightbox__nav svg {
    width: 22px;
    height: 22px;
}

.product-lightbox__nav:hover {
    background: #fff;
    color: var(--accent-deep);
}

.product-lightbox__nav--prev {
    left: 16px;
}

.product-lightbox__nav--next {
    right: 16px;
}

.product-lightbox__count {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}

@media (max-width: 900px) {
    .product-lightbox {
        padding: 56px 12px 64px;
    }

    .product-lightbox__stage {
        max-width: 100%;
        max-height: min(72vh, 100%);
    }

    .product-lightbox__stage img,
    .product-lightbox img {
        max-width: 100%;
        max-height: min(72vh, 100%);
    }

    .product-lightbox__nav--prev {
        left: 10px;
    }

    .product-lightbox__nav--next {
        right: 10px;
    }

    .product-lightbox__nav {
        width: 42px;
        height: 42px;
    }
}

.product-card__title-link {
    color: inherit;
    text-decoration: none;
}

.product-card__title-link:hover {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.product-card__img {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 900px) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .product-hero__aside {
        padding: 0;
    }

    .product-hero__media {
        padding: 0;
    }

    .product-hero__zoom {
        max-width: none;
        width: 100%;
    }

    .product-hero__frame {
        border-radius: 16px;
    }

    .product-specs__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* —— Guest / info pages —— */
.topbar__guest-login {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .28);
    transition: background .15s, transform .15s;
}

.topbar__guest-login:hover {
    background: var(--accent-deep);
    transform: translateY(-1px);
}

.home-guest-cta {
    padding: 0 16px 18px;
    margin: 0;
}

.info-page {
    width: 100%;
    max-width: none;
    margin: 8px 0 40px;
    padding: 28px 32px 32px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
}

.info-page--about,
.info-page--contacts,
.info-page--payment,
.info-page--news,
.info-page--support,
.info-page--agreement,
.info-page--docs {
    padding: 30px 32px 36px;
}

.info-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
    align-items: start;
}

.info-split__col {
    min-width: 0;
}

.info-split__col > :first-child {
    margin-top: 0;
}

@media (max-width: 900px) {
    .info-split {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.contacts-page {
    display: grid;
    gap: 18px;
}

.contacts-sales {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.contacts-sales--stack {
    grid-template-columns: 1fr;
    margin: 0 0 14px;
}

.contacts-offices-label {
    margin: 4px 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
}

.contacts-channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: #fff;
    box-shadow: 0 6px 16px rgba(16, 40, 32, .04);
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

a.contacts-channel:hover {
    border-color: rgb(var(--accent-rgb) / .35);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(16, 40, 32, .07);
}

.contacts-channel__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
}

.contacts-channel__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
}

.contacts-channel__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
}

.contacts-channel__meta > a,
.contacts-channel__value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1b1b1b !important;
    line-height: 1.3;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.contacts-channel__meta > a:hover {
    color: var(--accent-deep) !important;
}

.contacts-channel__note {
    font-size: 0.84rem;
    color: #6b7570;
    line-height: 1.35;
    font-weight: 400;
}

.contacts-support {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgb(var(--accent-rgb) / .22);
    background:
        radial-gradient(120% 140% at 0% 0%, rgb(var(--accent-rgb) / .12), transparent 55%),
        #fff;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.contacts-support:hover {
    transform: translateY(-1px);
    border-color: rgb(var(--accent-rgb) / .4);
    box-shadow: 0 12px 24px rgba(16, 40, 32, .08);
}

.contacts-support__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--accent-deep);
    border: 1px solid rgb(var(--accent-rgb) / .18);
}

.contacts-support__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.contacts-support__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.contacts-support__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.25;
}

.contacts-support__text {
    font-size: 0.88rem;
    line-height: 1.4;
    color: #3a4540;
}

.contacts-support__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--accent-deep);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.contacts-support__cta::after {
    content: "→";
    transition: transform .2s var(--ease);
}

.contacts-support:hover .contacts-support__cta::after {
    transform: translateX(3px);
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.contacts-block {
    display: grid;
    align-content: start;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(16, 40, 32, .08);
    box-shadow: 0 8px 20px rgba(16, 40, 32, .05);
}

.contacts-block__head {
    margin: 0 0 14px;
}

.contacts-block__eyebrow {
    margin: 0 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.contacts-block__title {
    margin: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    color: #1b1b1b;
}

.contacts-map {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 35, 55, .1);
    background: #eef2f4;
    aspect-ratio: 16 / 10;
    min-height: 180px;
}

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 980px) {
    .contacts-sales {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .contacts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .info-page--contacts {
        padding: 22px 18px 28px;
    }

    .contacts-support {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contacts-support__cta {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .contacts-map {
        min-height: 160px;
    }
}

/* —— Оплата і доставка —— */
/* Title left + payment card right (fills the empty head area) */
.info-page--payment {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: 18px 28px;
    align-items: start;
}

.info-page--payment .info-page__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    align-self: center;
}

.info-page--payment .info-page__body {
    display: contents;
}

.info-page--payment .payment-page {
    display: contents;
}

.info-page--payment .payment-panel--pay {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    align-self: stretch;
    height: 100%;
}

.info-page--payment .payment-panel--ship {
    grid-column: 1 / -1;
    grid-row: 2;
}

@media (max-width: 900px) {
    .info-page--payment {
        grid-template-columns: 1fr;
    }

    .info-page--payment .info-page__head {
        grid-row: auto;
    }

    .info-page--payment .payment-panel--pay,
    .info-page--payment .payment-panel--ship {
        grid-column: 1;
        grid-row: auto;
        height: auto;
    }
}

.payment-page {
    display: grid;
    gap: 22px;
}

.payment-panel {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: 16px;
    border: 1px solid rgba(16, 40, 32, .1);
    background:
        radial-gradient(120% 80% at 100% 0%, rgb(var(--accent-rgb) / .08), transparent 55%),
        linear-gradient(165deg, #fff 0%, rgba(255, 255, 255, .82) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, var(--shadow-sm);
    overflow: hidden;
}

.payment-panel--pay {
    max-width: none;
}

.payment-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.payment-panel__head h2 {
    margin: 0 !important;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.payment-panel__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent-deep);
}

.payment-panel__lead {
    margin: 0 0 10px !important;
    padding: 10px 14px;
    width: fit-content;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid rgb(var(--accent-rgb) / .22);
    background: rgb(var(--accent-rgb) / .1);
    color: var(--accent-deep);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.35;
}

.payment-panel--ship .payment-panel__head {
    margin-bottom: 18px;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}

.payment-method {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px 16px 14px;
    border-radius: 14px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: rgba(255, 255, 255, .88);
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.payment-method:hover {
    border-color: rgb(var(--accent-rgb) / .32);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 40, 32, .08);
}

.payment-method__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(16, 40, 32, .06);
    color: var(--accent-deep);
}

.payment-method__body h3 {
    margin: 0 0 8px !important;
    font-size: 1.02rem;
}

.payment-method__body p {
    margin: 0 0 0.7em;
}

.payment-method__body p:last-child {
    margin-bottom: 0;
}

.payment-method__note {
    margin-top: 10px !important;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(16, 40, 32, .04);
    border-left: 3px solid var(--accent);
    font-size: 0.92rem;
    color: #2a3d34;
}

.payment-return {
    padding: 18px 18px 16px;
    border-radius: 14px;
    border: 1px dashed rgb(var(--accent-rgb) / .35);
    background:
        linear-gradient(135deg, rgb(var(--accent-rgb) / .06), transparent 42%),
        rgba(255, 255, 255, .7);
}

.payment-return > h2 {
    margin: 0 0 14px !important;
    font-size: 1.06rem;
}

.payment-return__facts {
    display: grid;
    gap: 8px;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none;
}

.payment-return__facts li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 !important;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(16, 40, 32, .08);
    font-size: 0.95rem;
}

.payment-return__addrs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.payment-return__addr {
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(16, 40, 32, .1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.payment-return__addr p {
    margin: 0 !important;
    font-size: 0.94rem;
    line-height: 1.5;
}

.payment-return__addr strong {
    display: inline-block;
    margin-bottom: 2px;
    color: var(--accent-deep);
    font-weight: 700;
}

.payment-return__foot {
    margin: 0 !important;
    color: var(--mute);
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    .payment-methods,
    .payment-return__addrs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .payment-panel {
        padding: 16px 14px 14px;
    }

    .payment-panel__head h2 {
        font-size: 1.08rem;
    }
}

.support-page {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.72fr);
    gap: 28px 36px;
    align-items: start;
}

.support-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.support-intro {
    margin: 0;
    max-width: 46ch;
    color: #3a4540;
    line-height: 1.55;
}

.support-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.support-channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .72) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.support-channel:hover {
    border-color: rgb(var(--accent-rgb) / .35);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 40, 32, .08);
}

.support-channel__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent-deep);
}

.support-channel__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.support-channel__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
}

.support-channel__value {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.support-hours {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 10px 14px 10px 10px;
    width: fit-content;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: rgba(255, 255, 255, .85);
    color: #1b1b1b;
}

.support-hours__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(16, 40, 32, .06);
    color: #3a4540;
}

.support-hours__meta {
    display: grid;
    gap: 1px;
}

.support-hours__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
}

.support-hours__value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1b1b1b;
}

.support-kb {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
    padding: 18px 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid rgb(var(--accent-rgb) / .22);
    background:
        radial-gradient(120% 140% at 0% 0%, rgb(var(--accent-rgb) / .14), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgb(var(--accent-rgb) / .08));
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.support-kb:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--accent-rgb) / .4);
    box-shadow: 0 14px 30px rgba(16, 40, 32, .1);
}

.support-kb__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    color: var(--accent-deep);
    border: 1px solid rgb(var(--accent-rgb) / .18);
}

.support-kb__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.support-kb__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.support-kb__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.25;
}

.support-kb__text {
    font-size: 0.92rem;
    line-height: 1.45;
    color: #3a4540;
}

.support-kb__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--accent-deep);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.support-kb__cta::after {
    content: "→";
    transition: transform .2s var(--ease);
}

.support-kb:hover .support-kb__cta::after {
    transform: translateX(3px);
}

.support-aside {
    display: grid;
    align-content: start;
}

.support-qr {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 20px 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(16, 40, 32, .1);
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 40, 32, .07);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.support-qr:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(16, 40, 32, .1);
}

.support-qr img {
    display: block;
    width: min(168px, 100%);
    height: auto;
    border-radius: 8px;
}

.support-qr__handle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-deep);
}

.support-qr__label {
    font-size: 0.82rem;
    color: var(--mute);
    text-align: center;
    line-height: 1.35;
    max-width: 18ch;
}

@media (max-width: 980px) {
    .support-channels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .support-page {
        grid-template-columns: 1fr;
    }

    .support-aside {
        justify-items: center;
    }

    .support-qr {
        width: min(280px, 100%);
    }
}

@media (max-width: 640px) {
    .info-page--support {
        padding: 22px 18px 28px;
    }

    .support-kb {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .support-kb__cta {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

.agreement-page {
    columns: 2 280px;
    column-gap: 40px;
    display: block;
}

.agreement-page > p {
    margin: 0 0 0.95em;
    color: #24343c;
    break-inside: avoid;
}

.agreement-page ul {
    margin: 0 0 0.95em;
    padding-left: 1.25em;
    display: grid;
    gap: 0.75em;
    break-inside: avoid;
}

.agreement-page li {
    margin: 0;
    color: #24343c;
}

@media (max-width: 640px) {
    .info-page--agreement {
        padding: 22px 18px 28px;
    }

    .agreement-page {
        columns: 1;
    }
}

.docs-page {
    margin-top: 4px;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

.docs-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 280px;
    padding: 28px 22px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 35, 55, .1);
    box-shadow: 0 10px 28px rgba(12, 40, 30, .05);
    text-decoration: none !important;
    color: var(--ink) !important;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}

.docs-card:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--accent-rgb) / .35);
    box-shadow: 0 16px 34px rgba(12, 40, 30, .1);
}

.docs-card__media {
    display: grid;
    place-items: center;
    min-height: 180px;
}

.docs-card__media img {
    display: block;
    width: min(168px, 70%);
    height: auto;
    object-fit: contain;
}

.docs-card__title {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.docs-card:hover .docs-card__title {
    color: var(--accent-deep);
}

@media (max-width: 700px) {
    .info-page--docs {
        padding: 22px 18px 28px;
    }

    .docs-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .docs-card {
        min-height: 240px;
    }
}

.info-page__head {
    margin: 0 0 22px;
}

.info-page__head-main {
    min-width: 0;
}

.info-page__head--with-hours {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
}

.info-page__head--with-hours .support-hours {
    flex: 0 0 auto;
    margin-top: 4px;
}

.info-page__head--with-hours .info-page__title {
    margin-bottom: 0;
}

.info-page__eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.info-page__title {
    margin: 0 0 10px;
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--ink);
}

@media (max-width: 640px) {
    .info-page__head--with-hours .support-hours {
        width: 100%;
    }
}

.info-page__lead {
    margin: 0 0 18px;
    color: var(--mute);
    font-size: 1.02rem;
    line-height: 1.5;
}

.info-page__body {
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.65;
}

.info-page__body h2 {
    margin: 1.4em 0 0.55em;
    font-size: 1.12rem;
    font-weight: 650;
    color: var(--ink);
}

.info-page__body h2:first-child {
    margin-top: 0;
}

.info-page__body h3 {
    margin: 1.1em 0 0.4em;
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
}

.info-page__body p {
    margin: 0 0 0.85em;
}

.info-page__body ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.info-page__body li {
    margin: 0.3em 0;
}

.info-page__body a {
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.about-story {
    display: grid;
    gap: 1.15em;
}

.about-story > p {
    margin: 0;
}

.about-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: stretch;
    margin: 0.35em 0;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(15, 35, 55, .08);
}

.about-split__text {
    padding: 10px 8px 10px 10px;
    display: flex;
    align-items: center;
}

.about-split__text p {
    margin: 0;
}

.about-split__media {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #e8eef0;
}

.about-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.info-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0.4em 0 0;
    max-width: none;
}

.info-gallery__item,
.info-gallery__feature {
    margin: 0;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    background: #eef2f4;
    border: 1px solid rgba(15, 35, 55, .08);
    box-shadow: var(--shadow-sm);
}

.info-gallery__feature {
    margin: 1.1em 0 1.35em;
}

.info-gallery__item img,
.info-gallery__feature img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.info-gallery__feature img {
    aspect-ratio: 16 / 10;
}

.info-gallery__item--portrait img,
.info-page__body img[src*="business-award.jpg"] {
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
    object-position: center;
    background: #e8eef1;
}

.info-gallery__feature figcaption {
    margin: 0;
    padding: 10px 14px 12px;
    font-size: 0.86rem;
    color: var(--mute);
    background: #fff;
}

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

    .about-split__text {
        padding: 8px 6px 2px;
    }

    .about-split__media img {
        min-height: 180px;
    }
}

@media (max-width: 1000px) {
    .info-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .info-page--about {
        padding: 22px 18px 28px;
    }

    .info-gallery {
        grid-template-columns: 1fr;
    }
}

.info-page__cta {
    margin: 24px 0 0;
}

.info-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgb(var(--accent-rgb) / .28);
}

.info-page__btn:hover {
    background: var(--accent-deep);
}

.site-footer {
    width: 100%;
    margin: 0;
    padding: 36px 0 22px;
    border-top: 1px solid var(--surface-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 42%),
        rgb(var(--accent-rgb) / .055);
    box-sizing: border-box;
}

/* Clear the fixed rail (guest + B2B) */
body.is-guest-storefront .site-footer,
body.is-b2b .site-footer {
    padding-left: var(--rail-w);
    transition: padding-left .28s cubic-bezier(.2, .8, .2, 1);
}

body.is-guest-storefront:has(.shell.is-rail-open) .site-footer,
body.is-b2b:has(.shell.is-rail-open) .site-footer {
    padding-left: var(--rail-w-open);
}

@media (max-width: 800px) {
    body.is-guest-storefront .site-footer,
    body.is-guest-storefront:has(.shell.is-rail-open) .site-footer,
    body.is-b2b .site-footer,
    body.is-b2b:has(.shell.is-rail-open) .site-footer {
        padding-left: 0;
    }
}

.site-footer--b2b .site-footer__tag {
    color: var(--accent-deep);
}

body.is-guest-storefront .site-footer__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 1.1fr);
}

.site-footer__links--guest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 20px;
}

.site-footer--b2b .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.site-footer__links--b2b {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 20px;
}

@media (max-width: 800px) {
    .site-footer--b2b .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__links--b2b {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .site-footer__links--b2b {
        grid-template-columns: 1fr;
    }
}

.site-footer__inner,
.site-footer__bottom {
    width: min(1240px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 28px 32px;
    padding: 0 0 22px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
}

.site-footer__name {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.site-footer__ua {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent-deep);
}

.site-footer__tag {
    margin: 8px 0 0;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
}

.site-footer__company {
    margin: 10px 0 0;
    font-size: 0.88rem;
    color: #3a4a55;
    line-height: 1.4;
}

.site-footer__social {
    margin-top: 18px;
}

.site-footer__social .site-footer__label {
    margin-bottom: 12px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--ink);
}

.site-footer__social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social-link {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #6b7a74;
    background: rgba(16, 40, 32, .05);
    transition: color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.site-footer__social-link:hover {
    color: var(--accent-deep);
    background: rgb(var(--accent-rgb) / .14);
    transform: translateY(-1px);
}

.site-footer__social-link svg {
    display: block;
}

.site-footer__social-fallback {
    font-size: 0.7rem;
    font-weight: 700;
}

.site-footer__label {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
}

.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

.site-footer__links a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}

.site-footer__links a:hover {
    color: var(--accent-deep);
}

.site-footer__contacts {
    display: grid;
    gap: 6px;
    align-content: start;
}

.site-footer__contacts-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--accent-deep);
}

.site-footer__phones {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.site-footer__phone,
.site-footer__mail,
.site-footer__support-phone {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
}

.site-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-footer__phone-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #4a5a54;
}

.site-footer__phone:hover,
.site-footer__mail:hover,
.site-footer__support-phone:hover {
    color: var(--accent-deep);
}

.site-footer__support {
    margin-top: 14px;
    display: grid;
    gap: 4px;
}

.site-footer__support-label {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--ink);
}

.site-footer__mail {
    margin-top: 12px;
}

.site-footer__address {
    margin: 4px 0 0;
    color: #3a4a55;
    font-size: 0.9rem;
    line-height: 1.45;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(15, 35, 55, .08);
    color: var(--mute);
    font-size: 0.84rem;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom a {
    color: var(--accent-deep);
    font-weight: 700;
    text-decoration: none;
}

.site-footer__bottom a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding-top: 28px;
        padding-bottom: 18px;
    }

    .site-footer__inner,
    .site-footer__bottom {
        width: min(1240px, calc(100% - 28px));
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .site-footer__links {
        grid-template-columns: 1fr 1fr;
    }
}