/* ============================================================================
   ipSales V3 — modern storefront stylesheet
   RTL-first, Hebrew typography, palette-driven via CSS variables set inline.
   Class prefix `v3-` everywhere to avoid collisions with tenant addStyle.
   ============================================================================ */

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

:root {
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-3: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Easing tokens — refined for a more "natural" feel than plain Material.
       --ease-out: sharp-out for entrances (Vercel/Linear-style)
       --ease-in:  for exits
       --ease-spring: slight overshoot for celebratory micro-interactions */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --t-fast:   180ms var(--ease-out);
    --t-base:   260ms var(--ease-out);
    --t-slow:   440ms var(--ease-out);
    --t-snap:   140ms var(--ease-smooth);

    --nav-h: 72px;
    --topbar-h: 0px;

    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    --danger:   #dc2626;
    --warning:  #f59e0b;
    --success:  #16a34a;
    --info:     #0284c7;
}

html { height: 100%; }
body.v3-body {
    font-family: 'Heebo', 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    background: var(--c-bg);
    color: var(--c-text);
    /* Sticky footer: flex column + margin-top:auto on footer.
       !important to survive tenant addStyle overrides. dvh for mobile UI. */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Push footer to bottom even when content is short */
.v3-footer { margin-top: auto !important; flex-shrink: 0; }

/* Material Symbols sizing */
.material-symbols-rounded {
    font-variation-settings: 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
}

/* ---------- Top strip ---------- */
.v3-topbar {
    background: var(--c-nav-bg);
    color: var(--c-nav-text);
    text-align: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    min-height: 26px;
}
.v3-topbar:empty { display: none; padding: 0; min-height: 0; }

/* ---------- Nav ---------- */
.v3-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--c-header-bg);
    box-shadow: var(--shadow-1);
    backdrop-filter: saturate(140%) blur(8px);
}
.v3-nav-inner {
    max-width: 1600px;            /* synced with .v3-main */
    margin: 0 auto;
    padding: 14px clamp(14px, 2vw, 28px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 1.5vw, 24px);
}

.v3-logo-link { display: block; line-height: 0; }
.v3-logo {
    height: 52px;
    width: auto;
    transition: height var(--t-base);
}
.v3-nav.is-scrolled .v3-logo { height: 38px; }
.v3-nav.is-scrolled .v3-nav-inner { padding-block: 8px; }

/* Wordmark fallback when the tenant has no uploaded logo file */
.v3-logo-wordmark {
    display: inline-block;
    line-height: 1;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--c-btn);
    padding: 6px 14px;
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--c-btn) 10%, transparent);
    transition: font-size var(--t-base), padding var(--t-base);
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-nav.is-scrolled .v3-logo-wordmark { font-size: 1.2rem; padding: 4px 10px; }

.v3-search-wrap {
    position: relative;
    max-width: 520px;
    width: 100%;
    justify-self: center;
}
.v3-search-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    font-size: 22px;
    pointer-events: none;
}
.v3-search {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 16px;
    border: 1.5px solid var(--neutral-200);
    background: rgba(255,255,255,.92);
    border-radius: var(--r-pill);
    color: var(--neutral-800);
    outline: none;
    transition: border var(--t-fast), box-shadow var(--t-fast);
}
.v3-search:focus {
    border-color: var(--c-btn);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-btn) 18%, transparent);
}

/* Search autocomplete dropdown */
.v3-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--c-panel);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    max-height: min(420px, 60vh);
    overflow-y: auto;
    z-index: 200;
    padding: 6px;
    animation: v3-slide-down 220ms var(--ease-out);
    transform-origin: top center;
}
.v3-suggest-item {
    animation: v3-slide-down 280ms var(--ease-out) both;
}
.v3-suggest-item:nth-child(1) { animation-delay: 20ms; }
.v3-suggest-item:nth-child(2) { animation-delay: 40ms; }
.v3-suggest-item:nth-child(3) { animation-delay: 60ms; }
.v3-suggest-item:nth-child(4) { animation-delay: 80ms; }
.v3-suggest-item:nth-child(5) { animation-delay: 100ms; }
.v3-suggest-item:nth-child(n+6) { animation-delay: 120ms; }
@media (max-width: 720px) {
    .v3-search-suggest {
        position: fixed;
        top: calc(var(--nav-h) + 8px);
        inset-inline-start: 8px;
        inset-inline-end: 8px;
        max-height: calc(100dvh - var(--nav-h) - 24px);
    }
}
.v3-suggest-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.v3-suggest-item:hover,
.v3-suggest-item.is-active { background: var(--neutral-100); }
.v3-suggest-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--neutral-50);
    border-radius: var(--r-sm);
    border: 1px solid var(--neutral-200);
}
.v3-suggest-text { min-width: 0; }
.v3-suggest-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-suggest-price {
    font-size: .85rem;
    color: var(--c-btn);
    font-weight: 700;
}
.v3-suggest-empty {
    padding: 16px;
    text-align: center;
    color: var(--neutral-500);
    font-size: .9rem;
}

.v3-nav-actions { display: flex; align-items: center; gap: 10px; }

.v3-icon-btn {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    color: var(--neutral-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
}
.v3-icon-btn:hover { background: rgba(15,23,42,.06); }
.v3-icon-btn .material-symbols-rounded { font-size: 24px; }

.v3-user-menu { position: relative; }
.v3-user-btn {
    width: auto;
    padding: 0 10px 0 6px;
    gap: 6px;
    background: var(--neutral-100);
    border-radius: var(--r-pill);
    transition: background var(--t-fast);
}
.v3-user-btn:hover { background: var(--neutral-200); }
.v3-user-btn .material-symbols-rounded:first-child { font-size: 22px; }
.v3-user-name { font-size: .92rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.v3-chevron { font-size: 20px !important; color: var(--neutral-500); transition: transform var(--t-fast); }
.v3-user-btn[aria-expanded="true"] .v3-chevron { transform: rotate(180deg); }

.v3-dropdown {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 6px;
    display: none;
    z-index: 200;
}
.v3-dropdown.is-open { display: block; animation: v3-pop .18s ease-out; }
.v3-dropdown-item {
    width: 100%;
    text-align: start;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--neutral-700);
    font-size: .95rem;
    transition: background var(--t-fast);
}
.v3-dropdown-item:hover { background: var(--neutral-100); color: var(--neutral-900); }
.v3-dropdown-item .material-symbols-rounded { font-size: 20px; color: var(--c-btn); }

.v3-login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-btn);
    color: var(--c-btn-text);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .95rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.v3-login-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: brightness(1.05); }

.v3-cart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-btn);
    color: var(--c-btn-text);
    padding: 10px 20px 10px 16px;
    border-radius: var(--r-pill);
    font-weight: 600;
    position: relative;
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.v3-cart-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: brightness(1.05); }
.v3-cart-btn .material-symbols-rounded { font-size: 22px; }
.v3-cart-label { font-size: 1rem; font-weight: 700; }
.v3-cart-divider { opacity: .55; padding: 0 2px; }
.v3-cart-count {
    background: rgba(255,255,255,.24);
    border-radius: var(--r-pill);
    padding: 2px 9px;
    font-size: .82rem;
    min-width: 26px;
    text-align: center;
    font-weight: 700;
}
.v3-cart-sum { font-size: 1rem; font-weight: 700; }
.v3-cart-currency { opacity: .85; }

/* When items in cart — gentle pulse to draw the eye */
.v3-cart-btn.has-items {
    animation: v3-cart-pulse 2.6s ease-in-out 1s 3;   /* pulse 3 times after 1s */
}
@keyframes v3-cart-pulse {
    0%, 100% { box-shadow: var(--shadow-1); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-btn) 30%, transparent), var(--shadow-2); }
}

/* ---------- Hero ---------- */
.v3-hero {
    max-width: 1800px;
    margin: 0 auto;
    padding: 16px 28px 0;
}
/* Banner area — FIXED responsive height to prevent page jump when image swaps.
   Each animation frame fills the same box via object-fit: cover. */
.v3-anim-port {
    width: 100%;
    height: clamp(140px, 22vw, 320px);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    background: var(--neutral-100);
    display: block;
}
.v3-anim-port:empty { display: none; }
.v3-anim-port img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: v3-fade-in .8s ease-out;
}
@media (max-width: 720px) { .v3-anim-port { height: clamp(110px, 26vw, 180px); } }
@media (max-width: 480px) { .v3-anim-port { height: 120px; } }

.v3-top-notes {
    margin-top: 16px;
    background: var(--c-notes);
    color: var(--c-notes-text);
    border-radius: var(--r-lg);
    padding: 14px 20px;
    font-weight: 600;
    border: 2px solid color-mix(in oklab, var(--c-notes-text) 30%, transparent);
}
.v3-top-notes:empty { display: none; }

/* ---------- Main shop layout ----------
   1600px max (Shopify Dawn default; Amazon ~1500, Walmart 1440).
   Sidebar 280px (benchmark median 260 + 20 for our 3 stacked panels).
   Gap 24px (Dawn standard).
   Pinned to viewport inline-start (right in RTL) so the sidebar never moves
   based on viewport width or product count. */
.v3-main {
    max-width: 1600px;
    margin-block: 24px 60px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Collapse-to-single-column only when there are truly zero products in the
   entire sale (productsList is empty). Empty current-category keeps sidebar
   visible per industry standard — sidebar is the recovery surface. */
.v3-main.v3-no-sidebar { grid-template-columns: minmax(0, 1fr) !important; }
.v3-main.v3-no-sidebar > .v3-sidebar { display: none !important; }

.v3-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Desktop: instead of pinning the whole sidebar as one block (which buries the
   categories below the fold on shorter screens), let the sidebar fill the row and
   pin ONLY the categories card. As you scroll, notes/sales/point-info scroll away
   above it and the categories stay stuck near the top — always reachable. */
@media (min-width: 1025px) {
    .v3-sidebar { align-self: stretch; }
    /* Pin the categories card and cap it at the viewport height (sticky top + an
       18px bottom gap) so a long list never runs past the screen — the list fills
       the remaining card height and scrolls INSIDE the box. */
    .v3-cat-card {
        position: sticky;
        top: calc(var(--nav-h) + 18px);
        max-height: calc(100vh - var(--nav-h) - 36px);
        display: flex;
        flex-direction: column;
    }
    .v3-cat-card > #v3CategoryList { flex: 1 1 auto; min-height: 0; max-height: none; }
}

.v3-side-card {
    background: var(--c-panel);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow-1);
    border: 1px solid color-mix(in oklab, var(--neutral-200) 80%, transparent);
}
.v3-side-card h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neutral-800);
}
.v3-side-card h3 .material-symbols-rounded { color: var(--c-btn); font-size: 22px; }

/* Sidebar info card — point name/address + system close time + sale time (compact) */
.v3-side-card.v3-point-info { padding: 14px; }
.v3-point-info h3 { margin-bottom: 10px; font-size: .98rem; }
#v3PointInfoBody { display: flex; flex-direction: column; gap: 7px; font-size: .82rem; }
.v3-pi-row { display: flex; gap: 7px; align-items: flex-start; color: var(--neutral-700); line-height: 1.4; }
.v3-pi-row > .material-symbols-rounded { color: var(--c-btn); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.v3-pi-row > div { min-width: 0; }
.v3-pi-strong { font-weight: 700; color: var(--neutral-900); }
.v3-pi-sub { color: var(--neutral-600); }
.v3-pi-dot { color: var(--neutral-400); }
.v3-pi-notes-link { margin-top: 2px; align-self: flex-start; font-size: .85rem; }

.v3-link {
    color: var(--c-link);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}
.v3-link:hover { opacity: .8; }

/* Category list */
#v3CategoryList {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-inline-end: 4px;
}
/* Keep rows at their natural size when the list overflows — otherwise the flex
   column compresses them (they "shrink and vanish") instead of scrolling. */
#v3CategoryList > * { flex-shrink: 0; }
#v3CategoryList::-webkit-scrollbar { width: 6px; }
#v3CategoryList::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 6px; }

.v3-cat-class-header {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    overflow: hidden;
}
.v3-cat-class-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    color: var(--neutral-500);
    cursor: pointer;
    transition: background var(--t-fast);
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.v3-cat-class-toggle:hover { background: var(--neutral-100); }
.v3-cat-class-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
    padding: 10px 12px;
    color: var(--neutral-700);
    font-weight: 700;
    font-size: .95rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: start;
    background: transparent;
    border: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.v3-cat-class-name:hover { background: var(--neutral-100); color: var(--neutral-900); }
.v3-cat-class-header .material-symbols-rounded { font-size: 20px; transition: transform var(--t-fast); }
.v3-cat-class-header.is-open .material-symbols-rounded { transform: rotate(-90deg); }
.v3-cat-class-header.is-selected .v3-cat-class-name {
    background: color-mix(in oklab, var(--c-btn) 14%, transparent);
    color: color-mix(in oklab, var(--c-btn) 90%, #000);
}
.v3-cat-class-header.is-selected .v3-cat-class-name .v3-cat-count {
    background: color-mix(in oklab, var(--c-btn) 22%, transparent);
    color: color-mix(in oklab, var(--c-btn) 90%, #000);
}

.v3-cat-class-list {
    margin: 0;
    padding-inline-start: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v3-cat-item {
    text-align: start;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--neutral-700);
    font-size: .92rem;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.v3-cat-item:hover { background: var(--neutral-100); color: var(--neutral-900); }
.v3-cat-item.is-selected {
    background: color-mix(in oklab, var(--c-btn) 12%, transparent);
    color: color-mix(in oklab, var(--c-btn) 80%, var(--neutral-900));
    font-weight: 700;
}
.v3-cat-count {
    background: var(--neutral-100);
    color: var(--neutral-600);
    border-radius: var(--r-pill);
    padding: 1px 8px;
    font-size: .78rem;
    font-weight: 500;
}
.v3-cat-item.is-selected .v3-cat-count {
    background: color-mix(in oklab, var(--c-btn) 20%, transparent);
    color: color-mix(in oklab, var(--c-btn) 90%, #000);
}

.v3-cat-toggle-mobile { display: none; }

/* Sales menu items */
#v3SalesMenuList { display: flex; flex-direction: column; gap: 4px; }
#v3SalesMenuList a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--neutral-700);
    text-decoration: none;
    font-size: .92rem;
    transition: background var(--t-fast);
}
#v3SalesMenuList a:hover { background: var(--neutral-100); }
#v3SalesMenuList a.is-selected {
    background: color-mix(in oklab, var(--c-btn) 14%, transparent);
    color: color-mix(in oklab, var(--c-btn) 90%, #000);
    font-weight: 700;
}

/* ---------- Products area ---------- */
.v3-products { min-width: 0; width: 100%; }

/* Toolbar above the grid: breadcrumb (left) + sort bar (right) */
.v3-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
/* On narrow screens: breadcrumb spans full width, actions wrap below */
@media (max-width: 720px) {
    .v3-products-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .v3-products-toolbar .v3-breadcrumb { width: 100%; }
    .v3-toolbar-actions { width: 100%; }
    .v3-sort-bar {
        flex: 1 1 auto;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .v3-sort-bar::-webkit-scrollbar { height: 4px; }
    .v3-sort-bar::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }
}
.v3-products-toolbar .v3-breadcrumb { margin-bottom: 0; }
.v3-sort-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--c-panel);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1);
    flex-wrap: wrap;
}
.v3-sort-label {
    color: var(--neutral-500);
    font-size: .85rem;
    font-weight: 600;
    padding: 0 8px;
}
.v3-sort-btn {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    color: var(--neutral-600);
    font-size: .88rem;
    font-weight: 600;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.v3-sort-btn:hover { background: var(--neutral-100); color: var(--neutral-800); }
.v3-sort-btn.is-active {
    background: var(--c-btn);
    color: var(--c-btn-text);
}
@media (max-width: 720px) {
    .v3-sort-bar { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .v3-sort-btn { white-space: nowrap; }
}

.v3-breadcrumb {
    color: var(--neutral-500);
    font-size: .92rem;
    margin-bottom: 14px;
    min-height: 22px;
}
.v3-breadcrumb b { color: var(--neutral-800); }

/* === FORCED GRID — !important to bypass any tenant/accessibility CSS overrides === */
.v3-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.v3-products-grid > .v3-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}
.v3-products { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.v3-main { display: grid !important; box-sizing: border-box !important; }
/* The forced grid above must NOT override an explicit hide: when the sale is
   closed/unavailable the JS sets inline display:none on #v3Main and the whole
   shop (toolbar + grid + sidebar) must disappear. An inline hide — both the
   initial HTML one ("display:none", no space) and jQuery .hide() ("display: none",
   with space) — wins here so the closed-state panel shows alone. */
.v3-main[style*="display:none"],
.v3-main[style*="display: none"] { display: none !important; }
.v3-main > .v3-sidebar,
.v3-main > .v3-products { min-width: 0 !important; }

.v3-products-empty {
    text-align: center;
    padding: 64px 28px;
    color: var(--neutral-500);
    background: var(--c-panel);
    border-radius: var(--r-lg);
    border: 2px dashed var(--neutral-200);
}
.v3-products-empty .v3-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c-btn) 10%, var(--neutral-100));
    color: var(--c-btn);
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v3-products-empty .v3-empty-icon .material-symbols-rounded { font-size: 38px; }
.v3-products-empty .v3-empty-title {
    color: var(--neutral-800);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.v3-products-empty .v3-empty-sub {
    color: var(--neutral-500);
    font-size: .95rem;
    margin-bottom: 18px;
}
.v3-products-empty .v3-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Product card ---------- */
.v3-card {
    background: var(--c-card);
    border-radius: var(--r-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1.5px solid var(--neutral-200);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    position: relative;
    overflow: hidden;
    animation: v3-card-in 360ms var(--ease-out) both;
}
@keyframes v3-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.v3-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: color-mix(in oklab, var(--c-btn) 50%, var(--neutral-200)); }
.v3-card.is-disabled { opacity: .65; }
.v3-card.is-disabled:hover { transform: none; }

.v3-card.is-selected {
    border-color: var(--c-btn);
    box-shadow: 0 0 0 1px var(--c-btn), var(--shadow-2);
}

.v3-card-img-wrap {
    background: var(--neutral-50);
    border-radius: var(--r-md);
    height: 180px;             /* fixed height — predictable card size, no runaway logos */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.v3-card-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 600ms var(--ease-out);
    cursor: zoom-in;
    animation: v3-fade-in 420ms var(--ease-out) both;
}
.v3-card:hover .v3-card-img { transform: scale(1.06); }

/* Quick-action button cluster on each card image (zoom + share) */
.v3-card-img-actions {
    position: absolute;
    bottom: 8px;
    inset-inline-start: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.v3-card:hover .v3-card-img-actions,
.v3-card:focus-within .v3-card-img-actions { opacity: 1; transform: translateY(0); }
@media (hover: none) {
    .v3-card-img-actions { opacity: 1; transform: none; }
}
.v3-card-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.92);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}
.v3-card-icon-btn .material-symbols-rounded { font-size: 18px; }
.v3-card-icon-btn.v3-zoom-btn:hover  { background: var(--c-btn);  color: var(--c-btn-text);  border-color: var(--c-btn); }
.v3-card-icon-btn:active { transform: scale(.92); }

/* Heart "favorite" button — top corner of the card image */
.v3-card-fav-btn {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.92);
    color: var(--neutral-400);
    border: 1px solid var(--neutral-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    z-index: 3;
}
.v3-card-fav-btn .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 500;
    transition: font-variation-settings var(--t-fast);
}
.v3-card-fav-btn:hover { color: #e11d48; transform: scale(1.06); }
.v3-card-fav-btn.is-active { color: #e11d48; background: #fff; }
.v3-card-fav-btn.is-active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 600; }
.v3-card-fav-btn:active { transform: scale(.92); }
/* When orded-badge is also at top — push fav left a bit */
.v3-card-img-wrap:has(.v3-card-orded-badge) .v3-card-fav-btn { inset-inline-end: 80px; }

/* Toolbar actions row (right side of toolbar) */
.v3-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.v3-fav-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--c-panel);
    border: 1px solid var(--neutral-200);
    color: var(--neutral-700);
    font-weight: 600;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.v3-fav-toggle-btn .material-symbols-rounded {
    font-size: 18px;
    color: #e11d48;
    font-variation-settings: 'FILL' 1, 'wght' 600;
}
.v3-fav-toggle-btn:hover { border-color: #e11d48; }
.v3-fav-toggle-btn.is-active {
    background: color-mix(in oklab, #e11d48 12%, transparent);
    border-color: #e11d48;
    color: #e11d48;
}
.v3-fav-toggle-btn.is-empty .v3-fav-count { display: none; }
.v3-fav-count {
    background: #e11d48;
    color: #fff;
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}

.v3-card-id {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    background: rgba(255,255,255,.92);
    color: var(--neutral-700);
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--neutral-200);
}

.v3-card-orded-badge {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
    background: var(--c-orded);
    color: var(--c-orded-text);
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.v3-card-warning {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: .82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.v3-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.3;
    margin: 0;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v3-card-supplier {
    font-size: .8rem;
    color: var(--neutral-500);
    margin: 0;
    min-height: 1.1em;
}
.v3-card-noteweb {
    font-size: .85rem;
    color: var(--neutral-600);
    margin: 0;
}
.v3-card-price {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--neutral-900);
    margin: 0;
}
.v3-card-price-unit { font-size: .8rem; color: var(--neutral-500); font-weight: 500; }
.v3-card-pkg-note { font-size: .78rem; color: var(--neutral-500); font-weight: 500; margin-top: 2px; }
.v3-pv-pkg-note { font-size: .9rem; color: var(--neutral-500); font-weight: 500; margin-top: 4px; }
.v3-card-each-sum {
    font-size: .82rem;
    color: var(--c-link);
    background: color-mix(in oklab, var(--c-btn) 10%, transparent);
    padding: 4px 8px;
    border-radius: var(--r-sm);
}
.v3-card-note {
    font-size: .78rem;
    color: var(--neutral-500);
    margin: 0;
}

.v3-card-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-100);
}
.v3-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
}
.v3-qty-btn {
    width: 36px; height: 38px;
    background: var(--c-card-btn);
    color: var(--c-card-btn-text);
    font-size: 18px;
    font-weight: 700;
    transition: filter var(--t-fast);
}
.v3-qty-btn:hover { filter: brightness(1.1); }
.v3-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.v3-qty-input {
    width: 50px; height: 38px;
    text-align: center;
    border: 0;
    outline: none;
    font-weight: 600;
    background: var(--c-card);
    color: var(--neutral-900);
    -moz-appearance: textfield;
}
.v3-qty-input::-webkit-outer-spin-button,
.v3-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v3-card-add-btn {
    flex: 1;
    background: var(--c-card-btn);
    color: var(--c-card-btn-text);
    border-radius: var(--r-md);
    padding: 0 14px;
    font-size: .9rem;
    font-weight: 700;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: filter var(--t-fast), box-shadow var(--t-fast);
    position: relative;
}
.v3-card-add-btn:hover { filter: brightness(1.07); box-shadow: var(--shadow-2); }
.v3-card-add-btn:disabled { opacity: .5; cursor: not-allowed; }
.v3-card-add-btn.is-loading { color: transparent; }
.v3-card-add-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: rgba(255,255,255,1);
    border-radius: 50%;
    animation: v3-spin .7s linear infinite;
    top: 50%; left: 50%; margin: -8px 0 0 -8px;
}

/* ---------- States ---------- */
.v3-state {
    max-width: 720px;
    margin: 60px auto;
    padding: 50px 30px;
    text-align: center;
    background: var(--c-panel);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
}
.v3-state h2 { margin: 12px 0 8px; font-size: 1.6rem; color: var(--neutral-800); }
.v3-state p { color: var(--neutral-600); margin: 8px 0; font-size: 1.05rem; }
.v3-state-icon { font-size: 80px !important; font-variation-settings: 'wght' 400, 'opsz' 48; color: var(--c-btn); }
.v3-icon-warn { color: var(--warning); }
.v3-icon-err  { color: var(--danger); }
.v3-icon-ok   { color: var(--success); }
.v3-icon-info { color: var(--info); }
.v3-state-cta {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
}
.v3-state-cta .material-symbols-rounded { font-size: 20px; }

/* Exists order */
.v3-exists-card { text-align: start; max-width: 600px; margin: 0 auto; }
.v3-exists-banner {
    background: #eef2ff;
    border-inline-start: 4px solid #6366f1;
    padding: 14px 18px;
    border-radius: var(--r-md);
    color: #312e81;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.v3-exists-banner .material-symbols-rounded { font-size: 28px; color: #6366f1; }
.v3-exists-grid {
    background: var(--neutral-50);
    border-radius: var(--r-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    border: 1px solid var(--neutral-200);
}
.v3-exists-grid > div {
    display: flex;
    justify-content: space-between;
    padding-block: 6px;
    border-bottom: 1px dashed var(--neutral-200);
}
.v3-exists-grid > div:last-child { border: 0; }
.v3-exists-grid > div b { color: var(--info); }
.v3-exists-products {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    margin-bottom: 22px;
    max-height: 280px;
    overflow-y: auto;
}
.v3-exists-product-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-100);
}
.v3-exists-product-row:last-child { border: 0; }
.v3-exists-qty {
    background: var(--neutral-800);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 3px 10px;
    min-width: 36px;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
}
.v3-exists-product-name { font-weight: 600; }
.v3-exists-product-meta { color: var(--neutral-500); font-size: .88rem; margin-top: 2px; }
.v3-exists-warn {
    background: #fffbeb;
    border-inline-start: 3px solid var(--warning);
    padding: 12px 16px;
    border-radius: var(--r-sm);
    color: #78350f;
    font-size: .92rem;
    margin-bottom: 22px;
}

/* ---------- Weights view ---------- */
.v3-weights {
    max-width: 980px;
    margin: 30px auto 80px;
    padding: 28px;
    background: var(--c-panel);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
}
.v3-weights-head { margin-bottom: 20px; text-align: center; }
.v3-weights-note { color: var(--neutral-600); font-size: .96rem; margin-top: 10px; }
.v3-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.v3-table th {
    background: var(--c-th);
    color: var(--neutral-800);
    font-weight: 700;
    padding: 12px;
    text-align: start;
    font-size: .92rem;
    border-bottom: 1px solid var(--neutral-200);
}
.v3-table td {
    padding: 12px;
    border-bottom: 1px solid var(--neutral-100);
    font-size: .94rem;
}
.v3-table tr:last-child td { border-bottom: 0; }

.v3-weights-box-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.v3-weights-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--neutral-50);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: .9rem;
}
.v3-weights-box input {
    width: 80px;
    border: 1.5px solid var(--neutral-300);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    text-align: center;
    -moz-appearance: textfield;
}
.v3-weights-box input::-webkit-outer-spin-button,
.v3-weights-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v3-weights-box input:focus { outline: none; border-color: var(--c-btn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-btn) 18%, transparent); }
.v3-weights-total-input {
    width: 100px;
    background: var(--neutral-100);
    cursor: not-allowed;
    color: var(--neutral-700);
    font-weight: 700;
}

/* ---------- Buttons ---------- */
.v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast);
    line-height: 1.2;
}
.v3-btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--shadow-2); }
.v3-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.v3-btn-primary { background: var(--c-btn); color: var(--c-btn-text); }
.v3-btn-secondary { background: var(--neutral-100); color: var(--neutral-800); border: 1px solid var(--neutral-200); }
.v3-btn-secondary:hover { background: var(--neutral-200); }
.v3-btn-danger { background: var(--danger); color: #fff; }
.v3-btn-success { background: var(--success); color: #fff; }
.v3-btn-ghost { background: transparent; color: var(--neutral-700); border: 1px solid var(--neutral-200); }
.v3-btn-block { width: 100%; }
.v3-btn-lg { padding: 14px 26px; font-size: 1.05rem; border-radius: var(--r-lg); }
.v3-btn-sm { padding: 6px 14px; font-size: .85rem; }

.v3-btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }

/* ---------- FABs ---------- */
.v3-fab-checkout {
    position: fixed;
    inset-inline-start: 24px;
    bottom: 24px;
    z-index: 80;
    background: var(--c-btn);
    color: var(--c-btn-text);
    padding: 16px 26px 16px 22px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-3);
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--t-fast);
    animation: v3-pulse-cta 2.4s ease-in-out infinite;
}
.v3-fab-checkout:hover { transform: scale(1.05); }
.v3-fab-checkout .material-symbols-rounded { font-size: 24px; }

.v3-fab-top {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: 70;
    background: var(--neutral-800);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-2);
    opacity: .85;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.v3-fab-top:hover { opacity: 1; transform: translateY(-2px); }

.v3-timer {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 50%;
    transform: translateX(50%);
    background: var(--danger);
    color: #fff;
    padding: 14px 24px;
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow-3);
    z-index: 75;
}
.v3-timer-label { font-size: .82rem; opacity: .85; margin-bottom: 4px; }
.v3-timer-text { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }

/* ---------- Sale picker ---------- */
.v3-sale-picker {
    max-width: 720px;
    margin: 30px auto;
    padding: 30px;
    background: var(--c-panel);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
}

/* ---------- Toasts ---------- */
.v3-toasts {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
}
.v3-toast {
    background: var(--neutral-800);
    color: #fff;
    padding: 14px 18px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    pointer-events: auto;
    animation: v3-toast-in .26s ease-out;
    font-size: .94rem;
}
.v3-toast.is-leaving { animation: v3-toast-out .22s ease-in forwards; }
.v3-toast-icon { font-size: 22px !important; flex-shrink: 0; }
.v3-toast-success { background: var(--success); }
.v3-toast-error   { background: var(--danger); }
.v3-toast-warning { background: var(--warning); color: #422006; }
.v3-toast-info    { background: var(--info); }

/* ---------- Modal ---------- */
.v3-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0px, 4vw, 30px) clamp(0px, 3vw, 16px) clamp(0px, 6vw, 60px);
    overflow-y: auto;
}
.v3-modal-backdrop.is-open { display: flex; animation: v3-fade-in 280ms var(--ease-out); }
.v3-modal-backdrop.is-open.is-closing { animation: v3-fade-out 240ms var(--ease-in) both; }
.v3-modal-backdrop.is-open.is-closing .v3-modal-card { animation: v3-modal-out 240ms var(--ease-in) both; }
.v3-modal-card {
    background: var(--c-modal-body);
    border-radius: var(--r-xl);
    max-width: 640px;
    width: 100%;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    margin-block: auto;
    animation: v3-modal-in 420ms var(--ease-out);
}
.v3-modal-card.is-wide { max-width: 920px; }

.v3-modal-head {
    background: var(--c-modal-title);
    color: var(--c-modal-title-t);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.v3-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}
.v3-modal-close {
    color: inherit;
    width: 36px; height: 36px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    transition: opacity var(--t-fast), background var(--t-fast);
}
.v3-modal-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
.v3-modal-body {
    padding: 24px;
    color: var(--neutral-800);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* ---------- Accessibility statement (הצהרת נגישות) ---------- */
.v3-a11y { color: var(--neutral-700); line-height: 1.75; font-size: .98rem; }
.v3-a11y p { margin: 0 0 14px; }
.v3-a11y h3 {
    margin: 22px 0 8px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--neutral-900);
    padding-inline-start: 12px;
    border-inline-start: 4px solid var(--c-btn);
}
.v3-a11y ul { margin: 0 0 14px; padding-inline-start: 22px; }
.v3-a11y li { margin-bottom: 7px; }
.v3-a11y a { color: var(--c-btn); font-weight: 600; text-decoration: none; }
.v3-a11y a:hover { text-decoration: underline; }
.v3-a11y .v3-a11y-contact {
    list-style: none;
    padding: 16px 18px;
    margin-top: 4px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
}
.v3-a11y .v3-a11y-contact li { margin-bottom: 9px; }
.v3-a11y .v3-a11y-contact li:last-child { margin-bottom: 0; }
.v3-a11y .v3-a11y-date {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--neutral-200);
    font-size: .88rem;
    color: var(--neutral-500);
}

/* ---------- Product quick-view modal ---------- */
.v3-pv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.v3-pv-img-col { position: relative; }
.v3-pv-img-wrap {
    position: relative;
    background: var(--neutral-50);
    border-radius: var(--r-lg);
    border: 1px solid var(--neutral-200);
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;       /* prevent native pinch — we drive zoom */
}
.v3-pv-img-wrap.is-zoomed { cursor: zoom-out; }
.v3-pv-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--t-base);
    transform: scale(1);
    will-change: transform, transform-origin;
}
.v3-pv-img-wrap.is-zoomed .v3-pv-img {
    transform: scale(2.6);
    transition: transform var(--t-fast);
}
.v3-pv-zoom-hint {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--t-fast);
    backdrop-filter: blur(4px);
}
.v3-pv-zoom-hint .material-symbols-rounded { font-size: 16px; }
.v3-pv-img-wrap.is-zoomed .v3-pv-zoom-hint { opacity: 0; }
.v3-pv-info-col { display: flex; flex-direction: column; gap: 14px; }
.v3-pv-category {
    color: var(--neutral-500);
    font-size: .88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.v3-pv-name {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.3;
}
.v3-pv-supplier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-600);
    font-size: .92rem;
    font-weight: 500;
}
.v3-pv-supplier .material-symbols-rounded { font-size: 18px; color: var(--c-btn); }
.v3-pv-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-price, var(--c-btn));
    line-height: 1;
    padding-block: 6px;
}
.v3-pv-price-unit { font-size: .95rem; font-weight: 500; color: var(--neutral-500); margin-inline-start: 4px; }
.v3-pv-stock { display: flex; }
.v3-pv-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: 600;
}
.v3-pv-stock-badge.is-low {
    background: color-mix(in oklab, var(--warning) 18%, transparent);
    color: color-mix(in oklab, var(--warning) 80%, #000);
}
.v3-pv-stock-badge.is-out {
    background: color-mix(in oklab, var(--danger) 18%, transparent);
    color: color-mix(in oklab, var(--danger) 80%, #000);
}
.v3-pv-note {
    padding: 12px 14px;
    border-radius: var(--r-md);
    line-height: 1.6;
    font-size: .95rem;
}
.v3-pv-note-web {
    background: color-mix(in oklab, var(--c-btn) 8%, transparent);
    border-inline-start: 3px solid var(--c-btn);
    color: var(--neutral-800);
}
.v3-pv-note-info {
    background: var(--neutral-100);
    color: var(--neutral-700);
}
.v3-pv-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--warning) 14%, transparent);
    color: color-mix(in oklab, var(--warning) 85%, #000);
    font-weight: 600;
}
.v3-pv-warning .material-symbols-rounded { font-size: 20px; flex-shrink: 0; }
.v3-pv-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.v3-pv-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-card);
}
.v3-pv-qty .v3-qty-btn { width: 42px; height: 46px; font-size: 18px; }
.v3-pv-qty-input { width: 64px; height: 46px; text-align: center; border: 0; font-size: 1.05rem; font-weight: 700; }
.v3-pv-qty-input:focus { outline: 2px solid var(--c-btn); outline-offset: -2px; }
.v3-pv-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 22px;
    font-size: 1rem;
    font-weight: 700;
    flex-grow: 1;
    min-width: 180px;
    justify-content: center;
}
.v3-pv-meta {
    color: var(--neutral-500);
    font-size: .82rem;
    border-top: 1px solid var(--neutral-100);
    padding-top: 12px;
    margin-top: 4px;
}

@media (max-width: 720px) {
    .v3-pv-grid { grid-template-columns: 1fr; gap: 18px; }
    .v3-pv-img-wrap { aspect-ratio: 4 / 3; max-height: 45vh; }
    .v3-pv-name { font-size: 1.3rem; }
    .v3-pv-price { font-size: 1.7rem; }
}

/* Related-products strip inside the product-view modal */
.v3-pv-related {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-200);
}
.v3-pv-related-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.v3-pv-related-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neutral-800);
}
.v3-pv-related-head .material-symbols-rounded { color: var(--c-btn); font-size: 22px; }
.v3-pv-related-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.v3-pv-related-card {
    background: var(--c-card);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: 10px;
    cursor: pointer;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v3-pv-related-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-btn);
    box-shadow: var(--shadow-2);
}
.v3-pv-related-img {
    background: var(--neutral-50);
    border-radius: var(--r-sm);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.v3-pv-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v3-pv-related-name {
    font-size: .85rem;
    color: var(--neutral-800);
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.v3-pv-related-price {
    color: var(--c-btn);
    font-weight: 700;
    font-size: .95rem;
}

/* "Recently viewed" strip below the products grid */
.v3-recent-strip {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-200);
}
.v3-recent-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.v3-recent-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neutral-800);
}
.v3-recent-head .material-symbols-rounded { color: var(--c-btn); font-size: 22px; }
.v3-recent-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.v3-recent-card {
    background: var(--c-card);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: 10px;
    cursor: pointer;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v3-recent-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-btn);
    box-shadow: var(--shadow-2);
}
.v3-recent-img {
    background: var(--neutral-50);
    border-radius: var(--r-sm);
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.v3-recent-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v3-recent-name {
    font-size: .85rem;
    color: var(--neutral-800);
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.v3-recent-price {
    color: var(--c-btn);
    font-weight: 700;
    font-size: .92rem;
}

/* ---------- Form fields (inside modals) ---------- */
.v3-form { display: flex; flex-direction: column; gap: 14px; }
.v3-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.v3-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.v3-field label {
    font-size: .84rem;
    color: var(--neutral-600);
    font-weight: 600;
}
.v3-field label .v3-req { color: var(--danger); margin-inline-start: 2px; }
.v3-field input,
.v3-field select,
.v3-field textarea {
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--neutral-900);
    outline: none;
    transition: border var(--t-fast), box-shadow var(--t-fast);
    font-size: 1rem;
}
.v3-field textarea { height: 100px; padding: 12px 14px; resize: vertical; }
.v3-field input:focus,
.v3-field select:focus,
.v3-field textarea:focus {
    border-color: var(--c-modal-input);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-modal-input) 18%, transparent);
}
.v3-field-msg { font-size: .82rem; margin-top: 4px; }
.v3-field-msg.is-err { color: var(--danger); }
.v3-field-msg.is-ok { color: var(--success); }

/* ---------- Address autocomplete (city / street from the national registry) ---------- */
.v3-ac-host { position: relative; }
.v3-ac-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline: 0;
    z-index: 50;
    max-height: 264px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* the [hidden] attribute must win over display:flex above, or the empty box shows when closed */
.v3-ac-menu[hidden] { display: none; }
.v3-ac-opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: start;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: .96rem;
    color: var(--neutral-900);
    cursor: pointer;
    transition: background var(--t-fast);
}
.v3-ac-opt:hover,
.v3-ac-opt.is-active { background: color-mix(in oklab, var(--c-btn) 12%, transparent); }
.v3-ac-opt .v3-ac-sub { font-size: .8rem; color: var(--neutral-500); flex-shrink: 0; }

/* recognition feedback — visual only, does not block submit */
.v3-ac-bad input { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 15%, transparent) !important; }
.v3-ac-ok  input { border-color: var(--success) !important; }
.v3-ac-note { font-size: .8rem; margin-top: 4px; color: var(--danger); }

.v3-form-section-title {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--neutral-700);
    border-bottom: 2px solid var(--c-btn);
    padding-bottom: 6px;
}

.v3-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.v3-form-actions .v3-btn { min-width: 140px; }

.v3-form-error { color: var(--danger); font-size: .92rem; font-weight: 600; min-height: 1.2em; text-align: center; }
.v3-form-success { color: var(--success); font-size: .96rem; font-weight: 700; min-height: 1.2em; text-align: center; }

/* ---------------------------------------------------------------------------
   Point picker — filterable, city-grouped pickup-station chooser
   --------------------------------------------------------------------------- */
.v3-pp { position: relative; display: flex; flex-direction: column; gap: 6px; }

/* Collapsed trigger (form-field mode) */
.v3-pp-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 52px; padding: 8px 14px;
    border: 1.5px solid var(--neutral-200); border-radius: var(--r-md);
    background: #fff; color: var(--neutral-900);
    font: inherit; text-align: start; cursor: pointer;
    transition: border var(--t-fast), box-shadow var(--t-fast);
}
.v3-pp-trigger:hover { border-color: var(--neutral-300); }
.v3-pp.is-open .v3-pp-trigger {
    border-color: var(--c-modal-input);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-modal-input) 18%, transparent);
}
.v3-pp-trigger-ico { color: var(--c-btn); font-size: 22px; flex: 0 0 auto; }
.v3-pp-trigger-label { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-pp-trigger-label.is-empty { color: var(--neutral-400); font-weight: 500; }
.v3-pp-trigger-caret { color: var(--neutral-400); font-size: 22px; flex: 0 0 auto; transition: transform var(--t-fast); }
.v3-pp.is-open .v3-pp-trigger-caret { transform: rotate(180deg); }

/* Panel */
.v3-pp-panel {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1.5px solid var(--neutral-200); border-radius: var(--r-md);
    background: #fff;
}
.v3-pp:not(.is-static) .v3-pp-panel { box-shadow: var(--shadow-2); animation: v3ppIn var(--t-fast); }
.v3-pp.is-static .v3-pp-panel { border-color: var(--neutral-200); }
/* class selector above beats the UA [hidden]{display:none}; restore it explicitly */
.v3-pp-panel[hidden] { display: none; }
@keyframes v3ppIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Search */
.v3-pp-search {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-100); background: var(--neutral-50);
    position: sticky; top: 0; z-index: 3;
}
.v3-pp-search > .material-symbols-rounded { color: var(--neutral-400); font-size: 20px; flex: 0 0 auto; }
.v3-pp-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: .98rem; color: var(--neutral-900); }

/* Scrollable list */
.v3-pp-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.v3-pp-group + .v3-pp-group { margin-top: 2px; }
.v3-pp-group-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 12px; margin-bottom: 2px;
    font-size: .8rem; font-weight: 800; color: var(--neutral-700);
    background: color-mix(in oklab, var(--c-btn) 9%, #fff);
    border-radius: var(--r-sm);
}
.v3-pp-group-count {
    font-size: .72rem; font-weight: 700; color: var(--neutral-500);
    background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--r-pill);
    padding: 1px 8px; min-width: 22px; text-align: center;
}

/* Option row */
.v3-pp-opt {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%; padding: 11px 12px;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; text-align: start; border-radius: var(--r-sm);
    transition: background var(--t-snap);
}
.v3-pp-opt:hover { background: var(--neutral-50); }
.v3-pp-opt-mark {
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
    border: 1.5px solid var(--neutral-300); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.v3-pp-opt-mark .material-symbols-rounded { font-size: 16px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity var(--t-fast), transform var(--t-fast); }
.v3-pp-opt.is-selected { background: color-mix(in oklab, var(--c-btn) 9%, #fff); }
.v3-pp-opt.is-selected .v3-pp-opt-mark { background: var(--c-btn); border-color: var(--c-btn); }
.v3-pp-opt.is-selected .v3-pp-opt-mark .material-symbols-rounded { opacity: 1; transform: scale(1); }
.v3-pp-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-pp-opt-name { font-weight: 700; color: var(--neutral-900); font-size: .98rem; line-height: 1.3; }
.v3-pp-opt-addr { display: flex; align-items: center; gap: 4px; color: var(--neutral-500); font-size: .82rem; line-height: 1.4; }
.v3-pp-opt-addr .material-symbols-rounded { font-size: 15px; flex: 0 0 auto; color: var(--neutral-400); }
.v3-pp-empty { padding: 22px 12px; text-align: center; color: var(--neutral-400); font-size: .9rem; }

@media (max-width: 720px) {
    .v3-pp-list { max-height: 52vh; }
    .v3-pp-trigger { min-height: 54px; }
    .v3-pp-opt { padding: 13px 12px; }
    .v3-pp-opt-name { font-size: 1rem; }
    .v3-pp-opt-addr { font-size: .85rem; }
}

/* Stage indicator (during signup flow) */
.v3-stages { display: flex; gap: 8px; margin-bottom: 16px; }
.v3-stage {
    flex: 1; height: 6px;
    background: var(--neutral-200);
    border-radius: var(--r-pill);
    transition: background var(--t-base);
}
.v3-stage.is-active { background: var(--c-btn); }
.v3-stage-labels { display: flex; gap: 8px; justify-content: space-between; font-size: .82rem; color: var(--neutral-500); margin-bottom: 22px; }
.v3-stage-labels span.is-active { color: var(--c-btn); font-weight: 700; }

/* Cart-in-modal */
.v3-cart-list { display: flex; flex-direction: column; gap: 8px; }
.v3-cart-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--neutral-200);
    background: #fff;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.v3-cart-row:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-1); }
.v3-cart-row-info { min-width: 0; }
.v3-cart-row-name { font-weight: 600; color: var(--neutral-900); font-size: .95rem; line-height: 1.3; }
.v3-cart-row-id { color: var(--neutral-500); font-size: .78rem; font-family: ui-monospace, monospace; margin-bottom: 2px; }
.v3-cart-row-weight {
    color: var(--neutral-500);
    font-size: .82rem;
    margin-top: 4px;
    font-weight: 500;
}
.v3-cart-row-price { font-weight: 700; color: var(--neutral-800); text-align: end; min-width: 80px; font-size: 1rem; }

/* Inline qty editor */
.v3-cart-row-qty-edit {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}
.v3-cart-qty-btn {
    width: 34px; height: 36px;
    background: var(--c-card-btn);
    color: var(--c-card-btn-text);
    font-size: 18px;
    font-weight: 700;
    transition: filter var(--t-fast);
}
.v3-cart-qty-btn:hover { filter: brightness(1.08); }
.v3-cart-qty-btn:active { filter: brightness(.92); }
.v3-cart-qty-input {
    width: 50px; height: 36px;
    text-align: center;
    border: 0;
    outline: none;
    font-weight: 700;
    background: #fff;
    color: var(--neutral-900);
    font-size: 1rem;
    -moz-appearance: textfield;
}
.v3-cart-qty-input::-webkit-outer-spin-button,
.v3-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v3-cart-qty-input:focus { background: color-mix(in oklab, var(--c-btn) 6%, transparent); }

.v3-cart-row-del {
    color: var(--danger);
    background: transparent;
    width: 36px; height: 36px;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.v3-cart-row-del:hover { background: #fef2f2; }
.v3-cart-row-del .material-symbols-rounded { font-size: 20px; }

/* Syncing state — subtle progress bar at top of row while API is in-flight */
.v3-cart-row.is-syncing {
    position: relative;
    overflow: hidden;
}
.v3-cart-row.is-syncing::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-btn), transparent);
    background-size: 35% 100%;
    background-repeat: no-repeat;
    animation: v3-sync-bar 1.05s infinite linear;
}
@keyframes v3-sync-bar {
    from { background-position: -35% 0; }
    to   { background-position: 135% 0; }
}

/* Locked state — while API is in flight (or click is being processed),
   +/- and input are fully inert. pointer-events: none is hard-blocking,
   above and beyond `disabled` (which some legacy browsers occasionally let
   through under exotic conditions). */
.v3-cart-row.is-locked .v3-cart-qty-btn,
.v3-cart-row.is-locked .v3-cart-qty-input,
.v3-cart-row.is-locked .v3-cart-row-del {
    pointer-events: none !important;
    cursor: progress !important;
    filter: grayscale(.4);
    opacity: .7;
}
.v3-cart-qty-btn:disabled,
.v3-cart-qty-input:disabled {
    pointer-events: none !important;
    cursor: not-allowed;
}

@media (max-width: 540px) {
    .v3-cart-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 12px;
    }
    .v3-cart-row-info { grid-column: 1 / -1; }
    .v3-cart-row-price { min-width: 0; }
}

.v3-cart-totals {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--neutral-50);
    border-radius: var(--r-md);
}
.v3-cart-totals-row { display: flex; justify-content: space-between; padding: 6px 0; }
.v3-cart-totals-row.is-sub { padding-block: 2px; padding-inline-start: 14px; font-size: .86rem; color: var(--neutral-500); }
.v3-cart-totals-row.is-sub b { font-weight: 600; }
.v3-cart-totals-row.is-total { font-weight: 800; font-size: 1.1rem; border-top: 2px solid var(--neutral-200); margin-top: 8px; padding-top: 12px; color: var(--neutral-900); }

/* admin cart — payment / credit / pickup details with inline edit + info */
.v3-cart-admin { margin-top: 12px; padding: 14px 16px; background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--r-md); }
.v3-cart-admin-title { font-weight: 800; color: var(--neutral-900); margin-bottom: 6px; font-size: .95rem; }
.v3-cart-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.v3-cart-admin-label { color: var(--neutral-700); font-size: .92rem; display: inline-flex; align-items: center; gap: 4px; }
.v3-cart-admin-edit { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--neutral-300); color: var(--c-btn); border-radius: var(--r-sm); padding: 4px 10px; font-size: .85rem; font-family: inherit; cursor: pointer; transition: background var(--t-fast); }
.v3-cart-admin-edit:hover { background: var(--neutral-100); }
.v3-cart-admin-edit .material-symbols-rounded { font-size: 1.05rem; }
.v3-info-dot { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--info); cursor: pointer; padding: 0; line-height: 1; }
.v3-info-dot .material-symbols-rounded { font-size: 1.1rem; }
.v3-cart-admin-note { margin: 0 0 8px; padding: 8px 10px; background: var(--c-notes); color: var(--c-notes-text); border-radius: var(--r-sm); font-size: .85rem; line-height: 1.55; }

.v3-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 700;
    margin-inline-start: 6px;
}
.v3-promo-summary {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px dashed #10b981;
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 12px 0;
    color: #064e3b;
}
.v3-promo-summary-head { font-weight: 800; margin-bottom: 6px; font-size: 1.02rem; }
.v3-promo-summary-list { font-size: .88rem; }

/* ---------- Delivery options (radio cards) ---------- */
.v3-delivery-options { display: flex; flex-direction: column; gap: 10px; }
.v3-delivery-option {
    border: 2px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.v3-delivery-option:hover { border-color: var(--neutral-300); }
.v3-delivery-option.is-selected {
    border-color: var(--c-btn);
    background: color-mix(in oklab, var(--c-btn) 6%, transparent);
}
.v3-delivery-option input[type="radio"] { accent-color: var(--c-btn); width: 20px; height: 20px; }
.v3-delivery-option-text { flex: 1; }
.v3-delivery-option-title { font-weight: 700; color: var(--neutral-900); }
.v3-delivery-option-note { font-size: .85rem; color: var(--neutral-500); margin-top: 2px; }
.v3-delivery-option-price { font-weight: 800; color: var(--success); font-size: 1.05rem; }

.v3-delivery-long {
    background: #fffbeb;
    border: 1px solid var(--warning);
    border-radius: var(--r-md);
    padding: 12px 16px;
    color: #78350f;
    font-size: .92rem;
    margin-top: 8px;
}

/* ---------- Payment menu ---------- */
.v3-pay-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.v3-pay-option {
    background: var(--c-btn);
    color: var(--c-btn-text);
    border-radius: var(--r-lg);
    padding: 18px 16px;
    text-align: center;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform var(--t-fast), filter var(--t-fast);
}
.v3-pay-option:hover { transform: translateY(-2px); filter: brightness(1.07); }
.v3-pay-option:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.v3-pay-option .material-symbols-rounded { font-size: 28px; }
.v3-pay-option-sub { font-size: .8rem; font-weight: 500; opacity: .9; }

/* Credit cards multi list */
.v3-cc-cards-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v3-cc-card {
    background: linear-gradient(135deg, #ffffff, #fafafa);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.v3-cc-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.v3-cc-card.is-default { border-color: var(--c-btn); box-shadow: 0 0 0 1px var(--c-btn) inset; }
.v3-cc-num { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 1.06rem; letter-spacing: .06em; color: var(--neutral-900); }
.v3-cc-num b { color: var(--c-btn); }
.v3-cc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.v3-cc-brand { font-weight: 600; color: var(--neutral-700); }
.v3-cc-badge { font-size: .7rem; padding: 2px 8px; border-radius: var(--r-pill); }
.v3-cc-badge-default { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.v3-cc-badge-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.v3-cc-row { display: flex; gap: 22px; }
.v3-cc-col { display: flex; flex-direction: column; }
.v3-cc-label { font-size: .72rem; color: var(--neutral-500); text-transform: uppercase; letter-spacing: .04em; }
.v3-cc-val { font-size: .95rem; font-weight: 500; }
.v3-cc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--neutral-100); }
.v3-cc-mini-btn {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-200);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: .82rem;
    cursor: pointer;
    transition: background var(--t-fast);
}
.v3-cc-mini-btn:hover { background: var(--neutral-200); }
.v3-cc-mini-danger { color: var(--danger); background: #fff; border-color: #fecaca; }
.v3-cc-mini-danger:hover { background: #fef2f2; }
.v3-cc-mini-disabled { opacity: .45; cursor: not-allowed !important; }
.v3-cc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
    border: 2px dashed var(--neutral-200);
    border-radius: var(--r-md);
    color: var(--neutral-500);
}

/* ---------- Sale select grid ---------- */
.v3-sale-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 16px; }
.v3-sale-tile {
    background: var(--c-panel);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: border var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    text-decoration: none;
    color: var(--neutral-800);
}
.v3-sale-tile:hover { border-color: var(--c-btn); transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ---------- Footer ---------- */
.v3-footer {
    background: var(--c-nav-bg);
    color: var(--c-nav-text);
    padding: 28px 20px;
    text-align: center;
    /* margin-top is set by the sticky-footer rule above (margin-top:auto) */
}
.v3-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 14px;
}
.v3-footer-links button {
    color: inherit;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: .85;
    transition: opacity var(--t-fast), background var(--t-fast);
    font-size: .92rem;
}
.v3-footer-links button:hover { opacity: 1; background: rgba(255,255,255,.08); }
.v3-footer-links .material-symbols-rounded { font-size: 18px; }
.v3-footer-name { font-size: .9rem; opacity: .7; margin-top: 8px; }

/* ---------- Animations ---------- */
@keyframes v3-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-fade-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes v3-modal-in  { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes v3-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes v3-pop       { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes v3-spin      { to { transform: rotate(360deg); } }
@keyframes v3-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v3-pulse     { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes v3-flash     { 0% { background-color: color-mix(in oklab, var(--c-btn) 25%, transparent); } 100% { background-color: transparent; } }
@keyframes v3-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Reusable trigger-classes for one-shot animations */
.v3-anim-pulse { animation: v3-pulse 520ms var(--ease-spring); transform-origin: center; }
.v3-anim-flash { animation: v3-flash 900ms var(--ease-out); border-radius: 4px; padding-inline: 4px; }
@keyframes v3-toast-out { to { opacity: 0; transform: translateX(20%); } }
@keyframes v3-pulse-cta {
    0%, 100% { box-shadow: var(--shadow-3); }
    50%      { box-shadow: var(--shadow-3), 0 0 0 8px color-mix(in oklab, var(--c-btn) 25%, transparent); }
}

/* ---------- Loading skeleton ---------- */
.v3-loading {
    display: inline-block;
    width: 22px; height: 22px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--c-btn);
    border-radius: 50%;
    animation: v3-spin .7s linear infinite;
}
.v3-loading-block { display: flex; justify-content: center; padding: 40px; }

/* ============================================================================
   Responsive breakpoints — professional tiers
     xl ≥ 1280px : 280px sidebar, 5-6 product cols (defaults above)
     lg 980-1279 : 240px sidebar, 3-4 product cols
     md 720-979  : sidebar stacked above products, full-width products
     sm 481-719  : mobile tight, 2-3 product cols
     xs ≤ 480    : single col modals, mini cards
   ============================================================================ */

/* ---------- xxl: ultra-wide (≥1601px) — slightly larger cards/spacing ---------- */
@media (min-width: 1601px) {
    .v3-products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 20px !important; }
    .v3-card-img-wrap { height: 200px; }
    .v3-card-name { font-size: 1.02rem; }
    .v3-card-price { font-size: 1.25rem; }
}

/* ---------- xl: standard desktop (1281-1600px) is the default — no overrides ---------- */

/* ---------- lg: narrower desktop / laptop ---------- */
@media (max-width: 1280px) {
    .v3-nav-inner, .v3-hero, .v3-main { padding-inline: 20px; }
    .v3-main { grid-template-columns: 240px 1fr; gap: 22px; }
    .v3-products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .v3-card-img-wrap { height: 160px; }
}

/* ---------- md: tablet / small laptop — stack sidebar above products ----------
   Breakpoint 1024px matches Walmart/BestBuy/Target/Dawn~990 industry standard. */
@media (max-width: 1024px) {
    .v3-main { grid-template-columns: 1fr; gap: 16px; }
    .v3-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }
    .v3-cat-card { grid-column: 1 / -1; }     /* category card spans full width */
    #v3CategoryList { max-height: 260px; }
    .v3-products-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* Tablet (721-1024px): categories card stays collapsible — show count + toggle */
@media (min-width: 721px) and (max-width: 1024px) {
    .v3-side-card { padding: 14px; }
    .v3-side-card h3 { font-size: .98rem; }
    #v3CategoryList { max-height: 200px; }
}

/* ---------- sm: phones landscape / small tablets ---------- */
@media (max-width: 720px) {
    .v3-nav-inner { grid-template-columns: auto auto; gap: 12px; padding-block: 10px; }
    .v3-search-wrap { grid-column: 1 / -1; max-width: none; order: 3; }
    .v3-cart-btn { padding: 9px 13px; }
    .v3-cart-sum, .v3-cart-currency { display: none; }
    .v3-user-name { display: none; }
    .v3-products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .v3-card { padding: 10px; gap: 8px; }
    .v3-card-name { font-size: .92rem; min-height: 2.4em; }
    .v3-card-price { font-size: 1rem; }
    .v3-card-img-wrap { height: 130px; }
    /* Phones: edge-to-edge modal, taller body */
    .v3-modal-card { border-radius: var(--r-lg); margin-block: 0; min-height: 100dvh; max-height: 100dvh; }
    .v3-modal-card.is-wide { border-radius: var(--r-lg); }
    .v3-modal-head { padding: 12px 16px; position: sticky; top: 0; z-index: 5; }
    .v3-modal-title { font-size: 1.05rem; }
    .v3-modal-body { padding: 16px; max-height: calc(100dvh - 64px); }
    .v3-state { margin: 24px 12px; padding: 30px 16px; }
    .v3-fab-checkout { inset-inline-start: 12px; bottom: 12px; padding: 12px 18px; font-size: .92rem; }
    .v3-fab-top { inset-inline-end: 12px; bottom: 12px; }
    .v3-sidebar { grid-template-columns: 1fr; }
    #v3CategoryList { display: none; max-height: 320px; }
    #v3CategoryList.is-open { display: flex; margin-top: 12px; }
    /* The whole "קטגוריות" header is the tap target that reveals the list (accordion). */
    #v3CategoriesHead { cursor: pointer; margin-bottom: 0; -webkit-user-select: none; user-select: none; }
    .v3-cat-toggle-mobile {
        display: inline-flex;
        position: static;
        margin-inline-start: auto;        /* push the toggle to the far side of the header */
        height: 36px;
        padding-inline: 14px 10px;        /* more room on the text side */
        gap: 3px;
        border-radius: var(--r-pill);
        background: var(--c-btn);
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-shadow: 0 2px 8px color-mix(in oklab, var(--c-btn) 35%, transparent);
    }
    .v3-cat-toggle-mobile .v3-cat-toggle-label {
        color: var(--c-btn-text);
        font-size: .92rem;
        font-weight: 700;
        white-space: nowrap;
    }
    /* ID selector — beats the generic ".v3-side-card h3 .material-symbols-rounded"
       rule that would otherwise paint the chevron --c-btn (red on red = invisible). */
    #v3CatToggleMobile .material-symbols-rounded {
        color: var(--c-btn-text);
        font-size: 22px;
        transition: transform .25s ease;
    }
    #v3CatToggleMobile[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
    .v3-footer { padding: 20px 14px; }
    .v3-footer-links button { padding: 6px 10px; font-size: .85rem; }
}

/* On narrow phones, related/recently use 2 columns; same approach as main grid */
@media (max-width: 720px) {
    .v3-pv-related-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .v3-pv-related-img { height: 90px; }
    .v3-recent-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .v3-recent-img { height: 80px; }
}
@media (max-width: 480px) {
    .v3-pv-related-row { grid-template-columns: repeat(2, 1fr); }
    .v3-recent-row { grid-template-columns: repeat(2, 1fr); }
    .v3-fav-toggle-btn { padding: 6px 10px; }
    .v3-sort-label { display: none; }     /* free up width — bar is self-explanatory */
}

/* ---------- xs: small phones ---------- */
@media (max-width: 480px) {
    .v3-pay-options { grid-template-columns: 1fr; }
    .v3-form-actions { flex-direction: column-reverse; }
    .v3-form-actions .v3-btn { width: 100%; }
    .v3-products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .v3-card { padding: 8px; }
    .v3-card-img-wrap { height: 110px; }
    .v3-card-actions { flex-wrap: wrap; gap: 4px; }
    /* Touch targets: 44px minimum (Apple HIG / WCAG) */
    .v3-card-add-btn { font-size: .82rem; padding: 0 8px; height: 44px; flex-basis: 100%; }
    .v3-qty-btn { width: 40px; height: 44px; font-size: 16px; }
    .v3-qty-input { width: 48px; height: 44px; }
    .v3-topbar { font-size: .85rem; padding: 4px 8px; }
    .v3-nav-inner { padding: 8px 14px; }
    .v3-logo { height: 40px; }
    .v3-logo-wordmark { font-size: 1.1rem; padding: 4px 10px; }
    /* Touch-friendly fav button — always visible */
    .v3-card-fav-btn { width: 38px; height: 38px; }
    .v3-card-fav-btn .material-symbols-rounded { font-size: 22px; }
    .v3-card-img-actions { gap: 4px; }
    .v3-card-icon-btn { width: 36px; height: 36px; }
}

/* ---------- xxs: tiny / older devices (≤360px) ---------- */
@media (max-width: 360px) {
    .v3-products-grid { gap: 6px; }
    .v3-card { padding: 6px; }
    .v3-card-img-wrap { height: 96px; }
    .v3-card-name { font-size: .85rem; }
    .v3-modal-body { padding: 12px; }
}

/* ---------- Print ---------- */
@media print {
    .v3-nav, .v3-fab-top, .v3-fab-checkout, .v3-footer, .v3-modal-backdrop, .v3-sidebar { display: none !important; }
    .v3-main { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}