/* ============================================================
   WankahSoft v2 design system
   Blend: grocery-app freshness (shop) + minproff glass/gradients.
   Mobile-first, themeable via html[data-theme].
   ============================================================ */
:root,
html[data-theme="aurora"] {
    --v2-font: "Outfit", system-ui, sans-serif;
    --v2-primary: #16a34a;
    --v2-primary-deep: #15803d;
    --v2-primary-ink: #0b3d22;
    --v2-secondary: #0d9488;
    --v2-accent: #f59e0b;
    --v2-accent-soft: #fef3c7;
    --v2-primary-rgb: 22, 163, 74;
    --v2-secondary-rgb: 13, 148, 136;
    --v2-bg: #f3f8f4;
    --v2-bg-soft: #e9f4ec;
    --v2-surface: #ffffff;
    --v2-surface-2: #f0f7f2;
    --v2-text: #10281b;
    --v2-muted: #5d7468;
    --v2-border: rgba(22, 163, 74, 0.14);
    --v2-border-strong: rgba(22, 163, 74, 0.28);
    --v2-grad: linear-gradient(135deg, #16a34a, #0d9488);
    --v2-grad-warm: linear-gradient(135deg, #f59e0b, #f97316);
    --v2-shadow-sm: 0 2px 10px rgba(16, 40, 27, 0.06);
    --v2-shadow: 0 14px 34px rgba(16, 40, 27, 0.1);
    --v2-shadow-lg: 0 24px 60px rgba(16, 40, 27, 0.16);
    --v2-radius: 22px;
    --v2-radius-sm: 14px;
    --v2-danger: #dc2626;
    --v2-danger-soft: #fee2e2;
    --v2-info: #2563eb;
    --v2-info-soft: #dbeafe;
    --v2-success: #16a34a;
    --v2-success-soft: #dcfce7;
    --v2-tabbar-h: 53px;
}
html[data-theme="ember"] {
    --v2-primary: #ea580c;
    --v2-primary-deep: #c2410c;
    --v2-primary-ink: #431407;
    --v2-secondary: #db2777;
    --v2-accent: #fbbf24;
    --v2-accent-soft: #fef3c7;
    --v2-primary-rgb: 234, 88, 12;
    --v2-secondary-rgb: 219, 39, 119;
    --v2-bg: #fdf6f1;
    --v2-bg-soft: #fbe9dc;
    --v2-surface-2: #faf0e8;
    --v2-text: #331507;
    --v2-muted: #7d5f52;
    --v2-border: rgba(234, 88, 12, 0.16);
    --v2-border-strong: rgba(234, 88, 12, 0.32);
    --v2-grad: linear-gradient(135deg, #ea580c, #db2777);
}
html[data-theme="ocean"] {
    --v2-primary: #0284c7;
    --v2-primary-deep: #0369a1;
    --v2-primary-ink: #082f49;
    --v2-secondary: #0d9488;
    --v2-accent: #f59e0b;
    --v2-accent-soft: #fef3c7;
    --v2-primary-rgb: 2, 132, 199;
    --v2-secondary-rgb: 13, 148, 136;
    --v2-bg: #f1f7fc;
    --v2-bg-soft: #e2eef8;
    --v2-surface-2: #edf4fa;
    --v2-text: #0b2438;
    --v2-muted: #5b7288;
    --v2-border: rgba(2, 132, 199, 0.16);
    --v2-border-strong: rgba(2, 132, 199, 0.32);
    --v2-grad: linear-gradient(135deg, #0284c7, #0d9488);
}
html[data-theme="solaris"] {
    --v2-primary: #d97706;
    --v2-primary-deep: #b45309;
    --v2-primary-ink: #451a03;
    --v2-secondary: #dc2626;
    --v2-accent: #16a34a;
    --v2-accent-soft: #dcfce7;
    --v2-primary-rgb: 217, 119, 6;
    --v2-secondary-rgb: 220, 38, 38;
    --v2-bg: #fdf8ef;
    --v2-bg-soft: #f8ecd4;
    --v2-surface-2: #faf3e3;
    --v2-text: #3a2504;
    --v2-muted: #7c6a4d;
    --v2-border: rgba(217, 119, 6, 0.18);
    --v2-border-strong: rgba(217, 119, 6, 0.34);
    --v2-grad: linear-gradient(135deg, #d97706, #dc2626);
}
html[data-theme="orchid"] {
    --v2-primary: #9333ea;
    --v2-primary-deep: #7e22ce;
    --v2-primary-ink: #3b0764;
    --v2-secondary: #db2777;
    --v2-accent: #f59e0b;
    --v2-accent-soft: #fef3c7;
    --v2-primary-rgb: 147, 51, 234;
    --v2-secondary-rgb: 219, 39, 119;
    --v2-bg: #f8f3fd;
    --v2-bg-soft: #efe3fa;
    --v2-surface-2: #f4ecfb;
    --v2-text: #2c1546;
    --v2-muted: #6f5f86;
    --v2-border: rgba(147, 51, 234, 0.16);
    --v2-border-strong: rgba(147, 51, 234, 0.32);
    --v2-grad: linear-gradient(135deg, #9333ea, #db2777);
}
html[data-theme="meadow"] {
    --v2-primary: #4d7c0f;
    --v2-primary-deep: #3f6212;
    --v2-primary-ink: #1a2e05;
    --v2-secondary: #0d9488;
    --v2-accent: #eab308;
    --v2-accent-soft: #fef9c3;
    --v2-primary-rgb: 77, 124, 15;
    --v2-secondary-rgb: 13, 148, 136;
    --v2-bg: #f5f8ec;
    --v2-bg-soft: #e9f0d3;
    --v2-surface-2: #f0f4e2;
    --v2-text: #22300c;
    --v2-muted: #64744f;
    --v2-border: rgba(77, 124, 15, 0.18);
    --v2-border-strong: rgba(77, 124, 15, 0.34);
    --v2-grad: linear-gradient(135deg, #4d7c0f, #0d9488);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--v2-font, "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif);
    background:
        radial-gradient(700px 320px at 12% -4%, rgba(var(--v2-primary-rgb), 0.1), transparent 60%),
        radial-gradient(700px 340px at 92% 6%, rgba(var(--v2-secondary-rgb), 0.1), transparent 60%),
        var(--v2-bg);
    color: var(--v2-text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--v2-tabbar-h) + 10px);
}
@media (min-width: 861px) {
    body { padding-bottom: 0; }
}
img { max-width: 100%; }
a { color: var(--v2-primary-deep); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; }
p { margin: 0 0 0.8em; }
::selection { background: rgba(var(--v2-primary-rgb), 0.22); }

/* scroll reveal (driven by app.js observer) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.is-hidden { display: none !important; }
.muted { color: var(--v2-muted); font-size: 0.86em; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--v2-primary-deep);
    background: rgba(var(--v2-primary-rgb), 0.1);
    border: 1px solid var(--v2-border);
    padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-grad); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.compact { font-size: 0.9em; }

/* ---------- buttons (new + legacy bridge) ---------- */
.v2-btn, .primary-button, .secondary-button, .ghost-danger-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; font-weight: 800; font-size: 14px;
    padding: 12px 22px; border: 1px solid transparent; cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
    text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.v2-btn:active, .primary-button:active, .secondary-button:active { transform: scale(0.97); }
.v2-btn.is-primary, .primary-button {
    background: var(--v2-grad); color: #fff;
    box-shadow: 0 10px 22px rgba(var(--v2-primary-rgb), 0.35);
}
.v2-btn.is-primary:hover, .primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(var(--v2-primary-rgb), 0.4); }
.v2-btn.is-soft, .secondary-button {
    background: var(--v2-surface); color: var(--v2-primary-deep);
    border-color: var(--v2-border-strong);
    box-shadow: var(--v2-shadow-sm);
}
.v2-btn.is-soft:hover, .secondary-button:hover { border-color: var(--v2-primary); transform: translateY(-1px); box-shadow: var(--v2-shadow); }
.v2-btn.is-ghost { background: rgba(var(--v2-primary-rgb), 0.08); color: var(--v2-primary-deep); }
.v2-btn.is-warm { background: var(--v2-grad-warm); color: #fff; box-shadow: 0 10px 22px rgba(245, 158, 11, 0.35); }
.v2-btn.is-danger, .ghost-danger-button {
    background: var(--v2-surface); color: var(--v2-danger);
    border-color: rgba(220, 38, 38, 0.3);
}
.v2-btn.is-danger:hover, .ghost-danger-button:hover { background: var(--v2-danger-soft); }
.v2-btn.is-sm, .secondary-button.sm { padding: 8px 14px; font-size: 12.5px; }
.v2-btn.is-block { width: 100%; }
.v2-btn[disabled], .primary-button[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.inline-form { display: inline; margin: 0; }
.inline-form button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; padding: 0; }

/* ---------- v2 shell / header ---------- */
.v2-shell { min-height: 100vh; display: flex; flex-direction: column; }
.v2-topbar {
    position: sticky; top: 0; z-index: 60;
    background: transparent;
    border-bottom: none;
    transition: box-shadow 0.25s ease;
}
.v2-topbar.is-scrolled { box-shadow: none; }
.site-header {
    max-width: 1220px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--v2-text); }
.brand-logo {
    width: 46px; height: 46px; border-radius: 15px; object-fit: cover;
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--v2-grad) border-box;
    box-shadow: 0 10px 22px rgba(var(--v2-primary-rgb), 0.35);
    transition: transform 0.2s ease;
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.04); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.brand-copy strong span { background: var(--v2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-copy small { font-size: 9.5px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--v2-muted); }
.brand-v2 {
    font-size: 10px; font-weight: 800; color: #fff; background: var(--v2-grad);
    border-radius: 999px; padding: 3px 9px; margin-left: 2px; align-self: flex-start;
    box-shadow: 0 6px 14px rgba(var(--v2-primary-rgb), 0.4);
}
.v2-search {
    flex: 0 1 200px; width: 200px; display: none; align-items: center; gap: 8px;
    background: var(--v2-surface-2); border: 1px solid var(--v2-border);
    border-radius: 999px; padding: 6px 6px 6px 16px; color: var(--v2-muted); font-size: 13.5px;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.v2-search:focus-within { border-color: var(--v2-primary); box-shadow: 0 0 0 4px rgba(var(--v2-primary-rgb), 0.14); }
.v2-search input[type="search"] { flex: 1; border: none; background: none; font: inherit; outline: none; color: var(--v2-text); min-width: 0; }
.v2-search button[type="submit"] { border: none; background: var(--v2-grad); color: #fff; border-radius: 999px; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* live search suggestions */
.v2-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 130;
    width: max(330px, 100%); max-width: min(420px, calc(100vw - 32px)); max-height: 340px; overflow: auto;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 18px;
    box-shadow: var(--v2-shadow-lg); padding: 6px;
    animation: v2-pop 0.2s ease;
}
.v2-suggest[hidden] { display: none; }
.v2-suggest a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; color: var(--v2-text); }
.v2-suggest a:hover { background: var(--v2-surface-2); }
.v2-suggest img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--v2-surface-2); }
.v2-suggest a > span { flex: 1; min-width: 0; }
.v2-suggest strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-suggest small { color: var(--v2-muted); font-size: 11.5px; }
.v2-suggest .v2-suggest-price { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--v2-primary-deep); white-space: nowrap; flex: 0 0 auto; }
.v2-suggest-empty { padding: 12px; font-size: 13px; color: var(--v2-muted); text-align: center; }
@media (min-width: 861px) { .v2-search { display: inline-flex; } }
.nav-shell { display: none; }
@media (min-width: 861px) {
    .nav-shell { display: block; }
    .site-nav { display: flex; align-items: center; gap: 2px; }
    .site-nav a {
        padding: 7px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
        color: var(--v2-text); transition: background 0.2s, color 0.2s; white-space: nowrap;
    }
    .site-nav a i { font-size: 13px; margin-right: 2px; }
    .site-nav a:hover, .site-nav a.is-active { background: rgba(var(--v2-primary-rgb), 0.1); color: var(--v2-primary-deep); }
}
/* language button matches adjacent icon buttons */
.lang-flag { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.flag-current { line-height: 1; }
.lang-option { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--v2-text); width: 100%; text-align: left; }
.lang-option small { color: var(--v2-muted); font-weight: 600; }
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.v2-icon-btn, .cart-button, .user-menu-toggle, .menu-toggle, .lang-flag {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v2-surface); border: 1px solid var(--v2-border);
    color: var(--v2-primary-deep); cursor: pointer; font-size: 16px;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    position: relative;
}
.v2-icon-btn:hover, .cart-button:hover, .user-menu-toggle:hover, .menu-toggle:hover { transform: translateY(-1px); box-shadow: var(--v2-shadow-sm); border-color: var(--v2-border-strong); }
.cart-button span {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    background: var(--v2-grad-warm); color: #fff; font-size: 11px; font-weight: 800;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.header-select { position: relative; }
.lang-dropdown, .user-menu-dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 18px;
    box-shadow: var(--v2-shadow-lg); padding: 8px; min-width: 200px;
    opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.lang-dropdown.is-open, .user-menu-dropdown.is-open { opacity: 1; transform: none; pointer-events: auto; }
.lang-option { border: none; background: none; font-size: 22px; cursor: pointer; padding: 6px 10px; border-radius: 12px; }
.lang-option:hover { background: var(--v2-surface-2); }
.user-menu-toggle { overflow: hidden; padding: 0; aspect-ratio: 1; }
.user-menu-toggle img.user-menu-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.user-menu-photo-lg { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.user-menu { position: relative; }
.user-menu-dropdown { min-width: 250px; padding: 0; overflow: hidden; }
.user-menu-hero {
    display: flex; gap: 12px; align-items: center; padding: 16px 14px;
    background: var(--v2-grad); color: #fff;
}
.user-menu-hero strong { display: block; font-size: 14.5px; }
.user-menu-hero small { opacity: 0.85; font-size: 12px; display: block; }
.user-menu-hero .user-avatar { font-size: 34px; }
.user-menu-hero .user-menu-photo-lg { border: 2px solid rgba(255, 255, 255, 0.7); }
.user-menu-role {
    display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2px 9px; border-radius: 999px;
}
.user-menu-dropdown .user-menu-item { margin: 4px 8px; width: calc(100% - 16px); }
.user-menu-dropdown .user-menu-item:last-child { margin-bottom: 8px; }
.user-menu-item i { width: 32px; height: 32px; border-radius: 10px; background: var(--v2-surface-2); color: var(--v2-primary-deep); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.user-menu-item.is-logout:hover { background: var(--v2-danger-soft); }
.user-menu-item.is-logout i { background: var(--v2-danger-soft); color: var(--v2-danger); }
.user-menu-header { display: flex; gap: 10px; align-items: center; padding: 10px; }
.user-menu-header strong { display: block; font-size: 14px; }
.user-menu-header small { color: var(--v2-muted); font-size: 12px; }
.user-avatar { font-size: 30px; color: var(--v2-primary); }
.user-menu hr { border: none; border-top: 1px solid var(--v2-border); margin: 4px 0; }
.user-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--v2-text);
    background: none; border: none; cursor: pointer; text-align: left;
}
.user-menu-item:hover { background: var(--v2-surface-2); }
.menu-toggle { display: inline-flex; }
@media (min-width: 861px) { .menu-toggle { display: none; } }
.nav-shell.is-open {
    display: block; position: absolute; top: 100%; left: 12px; right: 12px; z-index: 65;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 20px;
    box-shadow: var(--v2-shadow-lg); padding: 10px;
    animation: v2-pop 0.22s ease;
}
.nav-shell.is-open .site-nav { display: grid; gap: 2px; }
.nav-shell.is-open .site-nav a { padding: 12px 14px; border-radius: 14px; font-weight: 700; color: var(--v2-text); display: flex; gap: 10px; align-items: center; }
.nav-shell.is-open .site-nav a:hover { background: var(--v2-surface-2); }

/* ---------- mobile bottom tab bar ---------- */
.v2-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--v2-border);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--v2-shadow-lg);
    padding: 2px 1px;
    height: 53px;
}
@media (min-width: 861px) { .v2-tabbar { display: none; } }
.v2-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 800;
    color: var(--v2-muted);
    padding: 8px 12px;
    border-radius: 16px;
    position: relative;
    min-width: 60px;
    transition: color 0.2s, background 0.2s, transform 0.2s;
    justify-content: center;
}
.v2-tab i { font-size: 19px; }
.v2-tab.is-active { color: var(--v2-primary-deep); background: rgba(var(--v2-primary-rgb), 0.12); }
.v2-tab.is-active::after {
    content: ""; position: absolute; bottom: 3px; width: 16px; height: 3px; border-radius: 99px; background: var(--v2-grad);
}
.v2-tab .v2-tab-count {
    position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px;
    background: var(--v2-grad-warm); color: #fff; font-size: 10px; font-weight: 800;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- main / footer ---------- */
.v2-main { max-width: 1220px; margin: 0 auto; padding: 18px 16px 30px; width: 100%; flex: 1; }
.v2-footer {
    margin-top: 30px; background: var(--v2-primary-ink); color: #dcebe1;
    border-radius: 28px 28px 0 0; overflow: hidden; position: relative;
}
.v2-footer::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(500px 220px at 85% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
        radial-gradient(500px 260px at 8% 100%, rgba(var(--v2-secondary-rgb), 0.35), transparent 60%);
    pointer-events: none;
}
.v2-footer-grid {
    position: relative; max-width: 1220px; margin: 0 auto; padding: 40px 20px 20px;
    display: grid; gap: 26px; grid-template-columns: 1fr 1fr;
}
@media (min-width: 861px) { .v2-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.v2-footer h3, .v2-footer h4 { color: #fff; }
.v2-footer a { color: #cfe3d6; font-size: 13.5px; display: block; padding: 4px 0; }
.v2-footer a:hover { color: #fff; }
.v2-theme-dots { display: flex; gap: 8px; margin-top: 12px; }
.v2-theme-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; padding: 0; transition: transform 0.18s; }
.v2-theme-dot:hover { transform: scale(1.12); }
.v2-theme-dot.is-current { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.v2-footer-base { position: relative; text-align: center; padding: 14px; font-size: 12px; color: #a9c4b3; border-top: 1px solid rgba(255,255,255,0.12); }

/* ---------- toasts / cart drawer ---------- */
.toast-container { position: fixed; top: 76px; right: 14px; left: 14px; z-index: 200; display: grid; gap: 10px; justify-items: center; pointer-events: none; }
@media (min-width: 861px) { .toast-container { left: auto; width: 360px; } }
.toast {
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    background: rgba(16, 40, 27, 0.92); color: #fff; backdrop-filter: blur(10px);
    border-radius: 16px; padding: 12px 14px; font-size: 13.5px; font-weight: 600;
    box-shadow: var(--v2-shadow-lg); animation: v2-toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    border: 1px solid rgba(255,255,255,0.14); max-width: 100%;
}
.toast-success { border-left: 4px solid #22c55e; }
.toast-error { border-left: 4px solid #ef4444; }
.toast-info { border-left: 4px solid #3b82f6; }
.toast.toast-out { opacity: 0; transform: translateY(-8px); transition: all 0.3s; }
.toast-close { background: rgba(255,255,255,0.14); border: none; color: #fff; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.cart-drawer {
    position: fixed; z-index: 120; background: var(--v2-surface);
    border: 1px solid var(--v2-border); border-radius: 22px; box-shadow: var(--v2-shadow-lg);
    padding: 18px; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
    opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
}
.cart-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* mobile/tabbar toggles: app.js anchors the drawer below the button (off-screen),
   so force a bottom sheet above the tab bar instead */
@media (max-width: 860px) {
    .cart-drawer.is-open {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--v2-tabbar-h) + 12px) !important;
        width: auto !important;
        max-height: 62vh;
    }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-head h3 { margin: 0; }
.drawer-head button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--v2-border); background: var(--v2-surface-2); cursor: pointer; }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--v2-border); }
.cart-row strong { display: block; font-size: 13.5px; }
.cart-row small { color: var(--v2-muted); }
.cart-row-actions { display: flex; align-items: center; gap: 10px; }
.cart-row-actions button { color: var(--v2-danger); font-size: 15px; }
.drawer-total { display: flex; justify-content: space-between; font-weight: 800; padding: 12px 0; }
.cart-drawer .primary-button { width: 100%; }

/* ---------- hero slider ---------- */
.v2-hero {
    position: relative; border-radius: 28px; overflow: hidden;
    border: 1px solid var(--v2-border); box-shadow: var(--v2-shadow);
    background: var(--v2-primary-ink); min-height: 380px;
}
.v2-slides { position: relative; }
.v2-slide {
    position: absolute; inset: 0; opacity: 0; transform: scale(1.04);
    transition: opacity 0.7s ease, transform 1.4s ease;
    pointer-events: none; display: grid; align-items: end;
    min-height: 380px;
}
.v2-slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.v2-slide img.v2-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 25, 16, 0.32) 0%, rgba(8, 25, 16, 0.55) 55%, rgba(8, 25, 16, 0.88) 100%);
}
.v2-slide-copy { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.v2-slide-copy .v2-pill { text-shadow: none; }
/* dedicated slider CTA styles (immune to generic form resets) */
.v2-slide-cta form.inline-form { display: inline-flex; }
.v2-slide-cta form.inline-form button.v2-slide-btn-cart {
    background: var(--v2-grad); color: #fff; border: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}
.v2-slide-cta form.inline-form button.v2-slide-btn-cart:hover { filter: brightness(1.1); transform: translateY(-1px); }
.v2-slide-cta a.v2-slide-btn-view { background: #fff; color: var(--v2-primary-ink); border: none; }
button.v2-btn.v2-slide-btn-cart {
    padding: 10px;
}
.v2-slide-copy {
    background: linear-gradient(45deg, #00000096, #0000009c);
    border-radius: 30px;
}
.v2-slide-copy { position: relative; z-index: 2; padding: 26px 22px; color: #fff; max-width: 640px; }
.v2-slide-copy.is-glass {
    background: rgba(8, 25, 16, 0.52);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px; padding: 20px 22px; margin: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.v2-hero.has-deep .v2-slide::after {
    background: linear-gradient(180deg, rgba(8, 25, 16, 0.28) 20%, rgba(8, 25, 16, 0.82) 100%);
}
.v2-slide-copy .v2-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; margin-bottom: 10px;
}
.v2-slide-copy h1 { font-size: clamp(26px, 5.4vw, 46px); font-weight: 800; margin: 0 0 8px; }
.v2-slide-copy h1 .v2-grad-text {
    background: linear-gradient(120deg, #bef264, #5eead4, #fff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-slide-copy p { opacity: 0.92; font-size: 14.5px; max-width: 52ch; }
.v2-slide-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.v2-btn.is-light { background: #fff; color: var(--v2-primary-ink); }
.v2-btn.is-light:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); }
.v2-btn.is-outline-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); }
.v2-slider-nav { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center; }
.v2-slider-dot { width: 26px; height: 6px; border-radius: 99px; border: none; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.3s; padding: 0; }
.v2-slider-dot.is-active { width: 40px; background: #fff; }
.v2-slider-arrow {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
}
@media (min-width: 861px) { .v2-slider-arrow { display: inline-flex; } }

/* ---------- promo banner / section heads ---------- */
.v2-promo {
    position: relative; overflow: hidden; border-radius: var(--v2-radius);
    background: linear-gradient(120deg, var(--v2-primary-deep), var(--v2-secondary));
    color: #fff; padding: 26px 22px; display: grid; gap: 14px; align-items: center;
    box-shadow: var(--v2-shadow); margin-top: 18px;
}
@media (min-width: 861px) { .v2-promo { grid-template-columns: 1.3fr 1fr; padding: 30px 34px; } }
.v2-promo::before, .v2-promo::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.25; background: #fff;
}
.v2-promo::before { width: 220px; height: 220px; right: -60px; top: -80px; }
.v2-promo::after { width: 140px; height: 140px; right: 140px; bottom: -70px; }
.v2-promo h2 { margin: 0 0 6px; font-size: clamp(20px, 3.4vw, 30px); }
.v2-promo p { opacity: 0.9; margin: 0; font-size: 14px; }
.v2-promo img { position: relative; z-index: 1; border-radius: 18px; width: 100%; max-height: 190px; object-fit: cover; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25); }
.v2-section { margin-top: 30px; }
.v2-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.v2-section-head h2 { margin: 0; font-size: clamp(19px, 3vw, 26px); }
.v2-section-head p { margin: 2px 0 0; color: var(--v2-muted); font-size: 13.5px; }
.v2-see-all { font-size: 13px; font-weight: 800; color: var(--v2-primary-deep); background: rgba(var(--v2-primary-rgb), 0.1); padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.v2-see-all:hover { background: rgba(var(--v2-primary-rgb), 0.18); }

/* ---------- category chips ---------- */
.v2-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.v2-chips::-webkit-scrollbar { display: none; }
.v2-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px;
    padding: 9px 16px; font-size: 13px; font-weight: 800; color: var(--v2-text); cursor: pointer;
    transition: all 0.2s;
}
.v2-chip i { color: var(--v2-primary); }
.v2-chip:hover { border-color: var(--v2-border-strong); transform: translateY(-1px); }
.v2-chip.is-active { background: var(--v2-primary-ink); color: #fff; border-color: var(--v2-primary-ink); }
.v2-chip.is-active i { color: #bef264; }
.v2-chip .v2-chip-count { background: rgba(var(--v2-primary-rgb), 0.12); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.v2-chip.is-active .v2-chip-count { background: rgba(255, 255, 255, 0.18); }

/* ---------- product cards (grocery style) ---------- */
.v2-pgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .v2-pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .v2-pgrid { grid-template-columns: repeat(4, 1fr); } }
/* recent grid: 8 cards on 4-column screens, last 6 below */
.v2-pgrid.recent-8 > :nth-child(n+7) { display: none; }
@media (min-width: 1024px) {
    .v2-pgrid.recent-8 > :nth-child(n+7) { display: flex; }
}
.v2-pcard {
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    animation: v2-rise 0.5s ease both; animation-delay: var(--v2-d, 0ms);
}
.v2-pcard:hover { transform: translateY(-4px); box-shadow: var(--v2-shadow); border-color: var(--v2-border-strong); }
.v2-pcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--v2-surface-2); }
.v2-pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.v2-pcard:hover .v2-pcard-media img { transform: scale(1.06); }
.v2-pcard-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: rgba(11, 61, 34, 0.85); color: #fff; backdrop-filter: blur(6px);
    font-size: 10.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
}
.v2-pcard-fav {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); border: none; color: var(--v2-primary-deep); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.v2-pcard-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.v2-pcard-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-primary); }
.v2-pcard-body h3 { margin: 0; font-size: 14.5px; }
.v2-pcard-body h3 a { color: var(--v2-text); }
.v2-pcard-tag { font-size: 12px; color: var(--v2-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-pcard-tag.is-full { -webkit-line-clamp: 3; }
.v2-pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.v2-price { font-weight: 800; font-size: 15px; color: var(--v2-primary-ink); }
.v2-price-old { font-size: 12px; color: var(--v2-muted); text-decoration: line-through; font-weight: 600; margin-left: 6px; }
.v2-add {
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--v2-grad); color: #fff; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    box-shadow: 0 10px 20px rgba(var(--v2-primary-rgb), 0.42);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.v2-add:hover { transform: scale(1.1) rotate(90deg); filter: brightness(1.08); box-shadow: 0 14px 26px rgba(var(--v2-primary-rgb), 0.5); }
.v2-add:active { transform: scale(0.94); }
.v2-add:focus-visible { outline: 3px solid rgba(var(--v2-primary-rgb), 0.45); outline-offset: 2px; }
.v2-card-actions { display: inline-flex; align-items: center; gap: 8px; }
.v2-demo {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--v2-surface); border: 1.5px solid var(--v2-border-strong);
    color: var(--v2-primary-deep); font-size: 15px;
    box-shadow: var(--v2-shadow-sm);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.v2-demo:hover { transform: scale(1.08); border-color: var(--v2-primary); box-shadow: var(--v2-shadow); }
.v2-pcard-foot .inline-form { display: inline-flex; }

/* ---------- forms / fields ---------- */
.v2-card {
    background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px);
    border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-sm); padding: 20px;
}
.v2-field { display: grid; gap: 6px; margin-bottom: 14px; }
.v2-field > span, .stack-form label > span, .webbrief-field > span, .webbrief-field > label {
    font-size: 12.5px; font-weight: 800; color: var(--v2-primary-ink);
}
.v2-input, .stack-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.stack-form select, .stack-form textarea,
.webbrief-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.webbrief-field select, .webbrief-field textarea,
.checkout-form input:not([type="checkbox"]):not([type="radio"]),
.checkout-form select, .checkout-form textarea {
    width: 100%; border: 1.5px solid var(--v2-border); border-radius: 16px;
    background: var(--v2-surface); padding: 12px 15px; font: inherit; font-size: 14px; color: var(--v2-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.v2-input:focus, .stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus,
.webbrief-field input:focus, .webbrief-field select:focus, .webbrief-field textarea:focus,
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus {
    outline: none; border-color: var(--v2-primary); box-shadow: 0 0 0 4px rgba(var(--v2-primary-rgb), 0.14);
}
.stack-form, .checkout-form { display: grid; gap: 4px; }
.stack-form label, .webbrief-field { display: grid; gap: 6px; margin-bottom: 12px; }
.checkbox-line { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.checkbox-line input, .stack-form input[type="checkbox"], .webbrief-field input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--v2-primary);
}
.section-head { margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.section-note { color: var(--v2-muted); font-size: 13.5px; }
.empty-state {
    text-align: center; padding: 50px 20px; color: var(--v2-muted);
    background: var(--v2-surface); border: 1px dashed var(--v2-border-strong); border-radius: var(--v2-radius);
}
.empty-state i { font-size: 34px; opacity: 0.4; display: block; margin-bottom: 10px; }

/* ---------- admin hub ---------- */
.v2-admin-nav {
    position: sticky; top: 0; z-index: 70;
    display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; margin-bottom: 6px;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border); border-radius: 18px;
    box-shadow: var(--v2-shadow-sm);
}
.v2-admin-nav::-webkit-scrollbar { display: none; }
.v2-admin-nav a {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--v2-primary-deep);
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px; padding: 8px 14px;
    display: inline-flex; gap: 6px; align-items: center;
}
.v2-admin-nav a:hover { border-color: var(--v2-primary); }
.admin-hub { display: grid; gap: 18px; }
.admin-hero, .admin-card, .admin-table-card, .admin-rebind-card {
    background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px);
    border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-sm); padding: 20px;
}
.admin-hero {
    background:
        radial-gradient(400px 160px at 90% 0%, rgba(var(--v2-primary-rgb), 0.16), transparent 60%),
        rgba(255, 255, 255, 0.9);
    display: grid; gap: 14px;
}
@media (min-width: 861px) { .admin-hero { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.admin-hero h1 { margin: 0 0 6px; font-size: clamp(22px, 3.6vw, 32px); }
.admin-hero p { color: var(--v2-muted); margin: 0; }
.admin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .admin-stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .admin-stats-grid { grid-template-columns: repeat(7, 1fr); } }
.stat-card { text-align: center; padding: 16px 10px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--v2-grad); }
.stat-card strong {
    display: block; font-family: var(--v2-font, "Outfit", system-ui, sans-serif);
    font-size: 24px; font-weight: 800; color: var(--v2-primary-ink);
    font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.01em;
}
.stat-card strong span { font-size: inherit; font-weight: inherit; font-family: inherit; }
.stat-card span { font-size: 12px; font-weight: 700; color: var(--v2-muted); }
.admin-section { display: grid; gap: 12px; scroll-margin-top: 130px; }
.admin-section .section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-entity-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .admin-entity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .admin-entity-grid { grid-template-columns: repeat(3, 1fr); } }
.entity-card { padding: 0; overflow: hidden; }
.entity-cover { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--v2-surface-2); }
.entity-cover img { width: 100%; height: 100%; object-fit: cover; }
.entity-badge {
    position: absolute; top: 10px; left: 10px;
    background: rgba(11, 61, 34, 0.85); color: #fff; font-size: 11px; font-weight: 800;
    padding: 5px 11px; border-radius: 999px;
}
.entity-copy { padding: 16px; display: grid; gap: 8px; }
.entity-copy strong { font-size: 15px; }
.entity-copy p { font-size: 13px; color: var(--v2-muted); margin: 0; }
.entity-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.entity-tags span { font-size: 11px; font-weight: 700; background: var(--v2-surface-2); border: 1px solid var(--v2-border); padding: 3px 10px; border-radius: 999px; }
.entity-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-user-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .admin-user-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .admin-user-grid { grid-template-columns: repeat(3, 1fr); } }
.admin-user-card { display: grid; gap: 10px; }
.admin-user-head { display: flex; gap: 12px; align-items: center; }
.admin-user-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    background: var(--v2-grad); color: #fff; font-weight: 800; font-size: 19px;
    display: inline-flex; align-items: center; justify-content: center;
}
.admin-user-head strong { display: block; }
.admin-user-head small { color: var(--v2-muted); }
.admin-user-meta, .admin-user-details { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--v2-muted); }
.admin-user-meta span, .admin-user-details span { background: var(--v2-surface-2); padding: 4px 10px; border-radius: 999px; }
.admin-table-card { padding: 8px; display: grid; gap: 4px; }
.admin-row { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; }
.admin-row:hover { background: var(--v2-surface-2); }
.admin-row-rich { grid-template-columns: 1fr; }
@media (min-width: 861px) { .admin-row-rich { grid-template-columns: 1.3fr 1fr auto; align-items: center; } }
.admin-row small { color: var(--v2-muted); display: block; }
.admin-row-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.admin-row-meta span { background: var(--v2-surface-2); border: 1px solid var(--v2-border); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.admin-row-sub { background: var(--v2-surface-2); margin: 0 10px; }
.license-code-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.license-code-box code { background: var(--v2-primary-ink); color: #d9f99d; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; }
.copy-license-button { border: 1px solid var(--v2-border-strong); background: var(--v2-surface); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--v2-primary-deep); }
.license-accordion { margin: 0 10px 6px; border: 1px dashed var(--v2-border-strong); border-radius: 14px; }
.license-accordion-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 10px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--v2-primary-deep); }
.license-accordion-body { padding: 0 8px 8px; }
.admin-form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .admin-form-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .admin-form-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .admin-form-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .admin-form-grid-compact { grid-template-columns: repeat(4, 1fr); } }
.align-end { align-items: end; }
.admin-form-section {
    font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--v2-primary-deep); border-bottom: 2px solid var(--v2-border); padding-bottom: 8px; margin: 6px 0 2px;
}
.project-grid-admin { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .project-grid-admin { grid-template-columns: repeat(2, 1fr); } }
.project-card { display: grid; gap: 12px; }
.project-card-head { display: flex; gap: 12px; align-items: flex-start; }
.project-card-id {
    width: 46px; height: 46px; border-radius: 16px; flex: 0 0 auto;
    background: rgba(var(--v2-primary-rgb), 0.12); color: var(--v2-primary-deep);
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.project-card-title h3 { margin: 0; font-size: 15.5px; }
.project-card-sub { display: block; font-size: 12px; color: var(--v2-muted); }
.project-status { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: var(--v2-surface-2); border: 1px solid var(--v2-border); margin-left: auto; white-space: nowrap; }
.project-doc-list { display: grid; gap: 8px; }
.project-doc-item { display: flex; align-items: center; gap: 10px; background: var(--v2-surface-2); border-radius: 14px; padding: 9px 12px; font-size: 13px; }
.project-doc-icon { color: var(--v2-primary); }
.project-doc-label { font-weight: 700; }
.project-doc-link { margin-left: auto; font-size: 12px; font-weight: 800; }
.project-doc-link.is-locked { color: var(--v2-muted); font-weight: 600; }
.project-card-foot .entity-actions { border-top: 1px dashed var(--v2-border); padding-top: 12px; }
.partner-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 14px; background: var(--v2-surface-2); font-weight: 800; }

/* ---------- modals ---------- */
.admin-modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .admin-modal { align-items: center; padding: 20px; } }
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 30, 20, 0.55); backdrop-filter: blur(4px); animation: v2-fade 0.25s ease; }
.admin-modal-dialog {
    position: relative; background: var(--v2-surface); border-radius: 26px 26px 0 0;
    width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; padding: 22px;
    animation: v2-sheet-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 700px) { .admin-modal-dialog { border-radius: 26px; animation: v2-pop 0.25s ease; } }
.admin-modal-dialog-wide { max-width: 880px; }
.admin-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.admin-modal-head h2 { margin: 0; font-size: 20px; }
.modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v2-border); background: var(--v2-surface-2); cursor: pointer; flex: 0 0 auto; }
.admin-modal-form { padding-bottom: 8px; }
.product-form-section { background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.product-form-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.product-form-section-head h3 { margin: 0; font-size: 15px; }
.product-translate-trigger { border: 1px solid var(--v2-border-strong); background: var(--v2-surface); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--v2-primary-deep); }
.upload-panel { background: var(--v2-surface); border: 1.5px dashed var(--v2-border-strong); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.upload-panel > span { font-weight: 800; font-size: 13.5px; }
.upload-panel input[type="file"] { font-size: 13px; }
.upload-preview-list { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-preview-item { position: relative; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; border: 1px solid var(--v2-border); }
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-badge { position: absolute; bottom: 4px; left: 4px; background: var(--v2-primary); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.upload-preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 11px; }
.upload-progress-card { background: var(--v2-surface-2); border-radius: 14px; padding: 12px 14px; }
.upload-progress-track { height: 10px; border-radius: 99px; background: rgba(var(--v2-primary-rgb), 0.15); overflow: hidden; margin-top: 8px; }
.upload-progress-track span { display: block; height: 100%; width: 0; background: var(--v2-grad); border-radius: 99px; transition: width 0.25s; }
.chip-field { display: grid; gap: 6px; }
.chip-field > span { font-size: 12.5px; font-weight: 800; }
.chip-box { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--v2-primary-rgb), 0.12); border: 1px solid var(--v2-border); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.chip-pill i { font-size: 10px; opacity: 0.7; }
.chip-entry { width: 100%; border: 1.5px solid var(--v2-border); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 13px; }
.project-line-head, .project-line { display: grid; grid-template-columns: 44px 1fr 56px 110px 90px; gap: 8px; align-items: center; font-size: 12.5px; }
.project-line-head { font-weight: 800; color: var(--v2-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.product-pick { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 12px; padding: 8px; margin-bottom: 6px; }
.product-pick input[type="number"] { width: 100%; border: 1px solid var(--v2-border); border-radius: 10px; padding: 7px 8px; font: inherit; }
.project-line-subtotal { font-size: 14px; }
.extra-row { display: grid; grid-template-columns: 1fr 130px 36px; gap: 8px; }
.extra-row input { border: 1.5px solid var(--v2-border); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 13px; width: 100%; }
.extra-row-delete { border-radius: 10px; border: 1px solid rgba(220,38,38,0.3); background: var(--v2-surface); color: var(--v2-danger); cursor: pointer; }
.project-modal-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.profile-field { display: grid; gap: 6px; }
.profile-field > span { font-size: 12.5px; font-weight: 800; }
.profile-field-full { grid-column: 1 / -1; }
.theme-picker-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .theme-picker-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-picker-card { border: 1.5px solid var(--v2-border); border-radius: 16px; padding: 12px; cursor: pointer; display: grid; gap: 6px; justify-items: center; text-align: center; }
.theme-picker-card:has(input:checked) { border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.15); }
.theme-picker-swatch { width: 100%; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--theme-a), var(--theme-b), var(--theme-c)); }
.theme-picker-group > span { font-size: 12.5px; font-weight: 800; display: block; margin-bottom: 8px; }

/* ---------- checkout bridge ---------- */
.checkout-shell { display: grid; gap: 16px; }
@media (min-width: 960px) { .checkout-shell { grid-template-columns: 380px 1fr; align-items: start; } }
.checkout-panel, .checkout-flow { background: rgba(255,255,255,0.88); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow-sm); padding: 22px; }
.checkout-panel h1 { font-size: clamp(22px, 3.4vw, 30px); }
.summary-card { background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: 18px; padding: 16px; margin-top: 14px; display: grid; gap: 8px; }
.checkout-total-row { font-size: 17px; border-top: 2px dashed var(--v2-border-strong); padding-top: 10px; }
.checkout-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.checkout-step { border: 1.5px solid var(--v2-border); background: var(--v2-surface-2); border-radius: 16px; padding: 11px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: var(--v2-muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
.checkout-step span { width: 24px; height: 24px; border-radius: 50%; background: var(--v2-surface); border: 1px solid var(--v2-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.checkout-step.is-active { border-color: var(--v2-primary); color: var(--v2-primary-deep); background: rgba(var(--v2-primary-rgb), 0.08); }
.checkout-step.is-active span { background: var(--v2-grad); color: #fff; border: none; }
.checkout-card-grid, .checkout-contact-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.checkout-stage { display: none; }
.checkout-stage.is-active { display: grid; gap: 16px; }
@media (min-width: 640px) { .checkout-card-grid, .checkout-contact-grid { grid-template-columns: 1fr 1fr; } }
.checkout-coupon-block { display: grid; gap: 8px; margin: 14px 0; }
.checkout-coupon-input { display: flex; gap: 8px; }
.checkout-coupon-input input { flex: 1; border: 1.5px dashed var(--v2-border-strong); border-radius: 14px; padding: 11px 14px; font: inherit; text-transform: uppercase; background: var(--v2-surface-2); }
.payment-type-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 12px 0; }
.payment-type-card { border: 2px solid var(--v2-border); border-radius: 18px; padding: 16px 12px; background: var(--v2-surface); cursor: pointer; text-align: center; font-weight: 800; font-size: 13.5px; display: grid; gap: 6px; justify-items: center; }
.payment-type-card i { font-size: 24px; color: var(--v2-primary); }
.payment-type-card.is-active { border-color: var(--v2-primary); background: rgba(var(--v2-primary-rgb), 0.07); box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.12); }
.checkout-method-panel { margin-top: 12px; display: none; gap: 14px; }
.checkout-method-panel.is-active { display: grid; }
.holder-feedback { font-size: 13px; font-weight: 700; }
.momo-holder-check { background: rgba(var(--v2-primary-rgb), 0.08); border: 1px solid var(--v2-border); border-radius: 14px; padding: 10px 14px; font-size: 13px; margin-top: 8px; }
.checkout-processing-card, .checkout-success-card { text-align: center; padding: 30px 20px; }
.processing-spinner { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid rgba(var(--v2-primary-rgb), 0.2); border-top-color: var(--v2-primary); animation: v2-spin 0.9s linear infinite; }
.processing-meta { display: grid; gap: 6px; font-size: 13.5px; margin: 12px 0; }

/* ---------- webbrief bridge ---------- */
.webbrief-header-inner, .webbrief-card, .webbrief-success-card {
    background: rgba(255,255,255,0.88); border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius); box-shadow: var(--v2-shadow-sm); padding: 22px;
}
.webbrief-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.webbrief-toolbar-btn, .webbrief-upload-add-btn, .webbrief-whatsapp-btn, .webbrief-zip-btn {
    display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
    padding: 10px 18px; font-size: 13px; font-weight: 800; cursor: pointer;
    background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-primary-deep);
}
.webbrief-toolbar-btn:hover, .webbrief-upload-add-btn:hover { border-color: var(--v2-primary); transform: translateY(-1px); }
.webbrief-submit-btn { background: var(--v2-grad); color: #fff; border: none; border-radius: 999px; padding: 14px 30px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(var(--v2-primary-rgb), 0.35); }
/* ---------- webbrief sticky progress + section bar (docks at viewport top) ---------- */
.v2-webbrief-sticky {
    position: sticky; top: 0; z-index: 70;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border); border-radius: 20px;
    box-shadow: var(--v2-shadow);
    padding: 12px 14px;
    display: grid; gap: 10px; margin-bottom: 18px;
}
.v2-webbrief-sticky .webbrief-progress {
    height: 12px; background: var(--v2-surface-2);
    border: 1px solid var(--v2-border); border-radius: 99px; overflow: hidden;
    position: relative;
}
.v2-webbrief-sticky .webbrief-progress-bar {
    height: 100%; background: var(--v2-grad); border-radius: 99px; transition: width 0.3s ease;
    position: relative; overflow: hidden;
}
.v2-webbrief-sticky .webbrief-progress-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: v2-shimmer 1.8s linear infinite;
}
.v2-webbrief-sticky .webbrief-nav {
    position: static; background: none;
    display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none;
}
.v2-webbrief-sticky .webbrief-nav::-webkit-scrollbar { display: none; }
.v2-webbrief-sticky .webbrief-nav-btn {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--v2-border-strong); background: var(--v2-surface);
    font-size: 13px; font-weight: 800; color: var(--v2-primary-deep); cursor: pointer;
    transition: all 0.2s ease;
}
.v2-webbrief-sticky .webbrief-nav-btn:hover { border-color: var(--v2-primary); transform: translateY(-1px); }
.v2-webbrief-sticky .webbrief-nav-btn.is-active, .v2-webbrief-sticky .webbrief-nav-btn.active {
    background: var(--v2-grad); color: #fff; border-color: transparent;
    box-shadow: 0 8px 16px rgba(var(--v2-primary-rgb), 0.4);
}
.webbrief-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .webbrief-grid { grid-template-columns: 1fr 1fr; } }
.webbrief-field-full { grid-column: 1 / -1; }
.webbrief-hint { font-size: 12px; color: var(--v2-muted); }
.webbrief-notice { background: var(--v2-accent-soft); border: 1px solid rgba(245,158,11,0.4); border-radius: 14px; padding: 12px 16px; font-size: 13.5px; }
.webbrief-progress { height: 10px; background: rgba(var(--v2-primary-rgb), 0.15); border-radius: 99px; overflow: hidden; }
.webbrief-progress-bar { height: 100%; background: var(--v2-grad); border-radius: 99px; transition: width 0.3s; }
.webbrief-checks-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .webbrief-checks-grid { grid-template-columns: repeat(3, 1fr); } }
.webbrief-subjects-table-wrap { overflow-x: auto; border: 1px solid var(--v2-border); border-radius: 14px; }
.webbrief-subjects-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.webbrief-subjects-table th, .webbrief-subjects-table td { padding: 9px 10px; border-bottom: 1px solid var(--v2-border); text-align: left; }
.webbrief-subjects-table th { background: var(--v2-surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.webbrief-upload-grid { display: grid; gap: 10px; }
.webbrief-upload-files { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.webbrief-draft-list { display: grid; gap: 8px; }
.webbrief-draft-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--v2-surface-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; }

/* ---------- animations ---------- */
@keyframes v2-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v2-sheet-up { from { opacity: 0.4; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes v2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes v2-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes v2-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }
.v2-float { animation: v2-float 5s ease-in-out infinite; }
.v2-marquee { display: flex; gap: 12px; width: max-content; animation: v2-marquee 28s linear infinite; }
.v2-marquee:hover { animation-play-state: paused; }
.v2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: v2-pulse-dot 1.6s ease infinite; }

/* ---------- inner page hero ---------- */
.v2-page-hero {
    position: relative; overflow: hidden; border-radius: 26px;
    background: linear-gradient(120deg, var(--v2-primary-ink), var(--v2-primary-deep));
    color: #fff; padding: 30px 24px; margin-bottom: 18px;
    box-shadow: var(--v2-shadow);
}
.v2-page-hero::before {
    content: ""; position: absolute; width: 340px; height: 340px; right: -110px; top: -130px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
}
.v2-page-hero::after {
    content: ""; position: absolute; width: 200px; height: 200px; right: 120px; bottom: -110px;
    background: radial-gradient(circle, rgba(var(--v2-secondary-rgb), 0.5), transparent 70%);
}
.v2-page-hero h1 { position: relative; margin: 0 0 6px; font-size: clamp(24px, 4.4vw, 36px); }
.v2-page-hero p { position: relative; margin: 0; opacity: 0.88; font-size: 14px; max-width: 60ch; }
.v2-page-hero .eyebrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: #fff; position: relative; }
.v2-page-hero .eyebrow::before { background: #bef264; }

/* ---------- auth ---------- */
.v2-auth-wrap { max-width: 480px; margin: 10px auto; display: grid; gap: 16px; }
.v2-auth-card { padding: 26px 24px; }
.v2-auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; background: var(--v2-surface-2); border-radius: 999px; padding: 5px; margin-bottom: 18px; }
.v2-auth-tabs a { text-align: center; padding: 10px; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: var(--v2-muted); }
.v2-auth-tabs a.is-active { background: var(--v2-surface); color: var(--v2-primary-deep); box-shadow: var(--v2-shadow-sm); }
.v2-auth-card .primary-button { width: 100%; margin-top: 6px; }
.v2-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--v2-surface); border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 12px; font-weight: 800; cursor: pointer; }
.v2-or { display: flex; align-items: center; gap: 10px; color: var(--v2-muted); font-size: 12px; font-weight: 700; margin: 14px 0; }
.v2-or::before, .v2-or::after { content: ""; flex: 1; height: 1px; background: var(--v2-border); }

/* ---------- profile ---------- */
.v2-profile-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .v2-profile-grid { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); align-items: start; } }
.v2-profile-grid > * { min-width: 0; }
.v2-profile-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
.v2-avatar-lg {
    width: 72px; height: 72px; border-radius: 24px; background: var(--v2-grad); color: #fff;
    font-size: 30px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.v2-lic-card { border: 1px solid var(--v2-border); border-radius: 18px; padding: 16px; margin-bottom: 12px; background: var(--v2-surface); }
/* ---------- profile license card interiors ---------- */
.v2-lic-card.license-accordion { margin: 0 0 12px; }
.v2-lic-card.license-accordion .license-accordion-head { padding: 2px 0 0; font-size: 14px; gap: 10px; }
.v2-lic-card .license-accordion-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.v2-lic-card .license-accordion-title > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.v2-lic-card .license-accordion-title strong { font-size: 14.5px; color: var(--v2-text); overflow-wrap: break-word; }
.v2-lic-card .license-accordion-title small { font-size: 11.5px; }
.v2-lic-card .license-accordion-title .v2-status { flex: 0 0 auto; }
.v2-lic-card .license-accordion-body { padding: 12px 0 0; }
.license-accordion-caret { transition: transform 0.25s ease; flex: 0 0 auto; color: var(--v2-muted); }
.license-accordion.is-open .license-accordion-caret { transform: rotate(180deg); }
/* ---------- profile transaction rows ---------- */
.v2-txn-row .entity-actions { justify-content: flex-end; flex-wrap: nowrap; }
.v2-txn-row .v2-btn.is-sm { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.v2-txn-row > div:first-child { min-width: 0; overflow-wrap: break-word; }
.v2-txn-row { display: grid; gap: 6px; padding: 12px 4px; border-bottom: 1px dashed var(--v2-border); font-size: 13.5px; }
@media (min-width: 700px) { .v2-txn-row { grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; } }
.v2-status { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: var(--v2-surface-2); border: 1px solid var(--v2-border); text-transform: uppercase; letter-spacing: 0.06em; }
.v2-status.is-ok { background: var(--v2-success-soft); color: #15803d; border-color: rgba(22,163,74,0.3); }
.v2-status.is-warn { background: var(--v2-accent-soft); color: #b45309; border-color: rgba(245,158,11,0.4); }
.v2-status.is-bad { background: var(--v2-danger-soft); color: #b91c1c; border-color: rgba(220,38,38,0.3); }

/* ---------- contact / verify / installer ---------- */
.v2-contact-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .v2-contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.v2-contact-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--v2-border); font-size: 14px; }
.v2-contact-item i { width: 42px; height: 42px; border-radius: 14px; background: rgba(var(--v2-primary-rgb), 0.1); color: var(--v2-primary-deep); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.v2-verify-card { max-width: 620px; margin: 0 auto; }
.v2-hash { font-family: ui-monospace, monospace; background: var(--v2-primary-ink); color: #d9f99d; padding: 8px 14px; border-radius: 10px; font-size: 13px; word-break: break-all; }
.v2-kv { display: grid; gap: 8px; font-size: 14px; }
.v2-kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--v2-border); padding-bottom: 8px; }

/* ---------- product detail ---------- */
.v2-pdetail { display: grid; gap: 16px; }
@media (min-width: 960px) { .v2-pdetail { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.v2-gallery { display: grid; gap: 10px; }
.v2-gallery-main { border-radius: var(--v2-radius); overflow: hidden; border: 1px solid var(--v2-border); aspect-ratio: 4 / 3; background: var(--v2-surface-2); position: relative; }
.v2-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.v2-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.92); color: var(--v2-primary-ink); cursor: pointer; z-index: 2; box-shadow: var(--v2-shadow); }
.v2-gallery-nav.prev { left: 12px; }
.v2-gallery-nav.next { right: 12px; }
.v2-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.v2-thumb { border: 2px solid transparent; border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer; width: 84px; height: 64px; flex: 0 0 auto; background: var(--v2-surface-2); }
.v2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-thumb.is-active { border-color: var(--v2-primary); }
.v2-pinfo { display: grid; gap: 12px; align-content: start; }
.v2-pinfo h1 { font-size: clamp(24px, 4vw, 34px); margin: 0; }
.v2-pinfo .v2-lead { color: var(--v2-muted); font-size: 15px; }
.v2-price-lg { font-size: 30px; font-weight: 800; color: var(--v2-primary-ink); }
.v2-meta-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-meta-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; background: var(--v2-surface-2); border: 1px solid var(--v2-border); padding: 7px 13px; border-radius: 999px; }
.v2-meta-pill i { color: var(--v2-primary); }
.v2-buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.v2-buy-row .v2-btn { min-height: 54px; font-size: 15px; width: 100%; height: 100%; border-radius: 18px; }
.v2-buy-row .inline-form { display: contents; }
.v2-buy-row .v2-btn.is-soft { box-shadow: var(--v2-shadow-sm); }
.v2-buy-row .v2-btn.is-primary { box-shadow: 0 12px 26px rgba(var(--v2-primary-rgb), 0.42); }
.v2-qty { display: inline-flex; align-items: center; gap: 4px; background: var(--v2-surface); border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 4px; }
.v2-qty button { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--v2-surface-2); color: var(--v2-primary-deep); font-size: 15px; cursor: pointer; }
.v2-qty button:hover { background: rgba(var(--v2-primary-rgb), 0.14); }
.v2-qty strong { min-width: 28px; text-align: center; }
.v2-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2-trust div { background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: 16px; padding: 12px 8px; text-align: center; font-size: 11.5px; font-weight: 700; display: grid; gap: 6px; justify-items: center; }
.v2-trust i { font-size: 19px; color: var(--v2-primary); }
.v2-detail-grid { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 960px) { .v2-detail-grid { grid-template-columns: repeat(3, 1fr); } }
.v2-feature-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.v2-feature-list i { color: var(--v2-primary); margin-right: 8px; }

/* ---------- shop toolbar ---------- */
.v2-shopbar { display: grid; gap: 12px; margin-bottom: 16px; }
.v2-searchbar { display: flex; align-items: center; gap: 10px; background: var(--v2-surface); border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--v2-shadow-sm); }
.v2-searchbar i { color: var(--v2-muted); }
.v2-searchbar input { flex: 1; border: none; background: none; font: inherit; font-size: 14px; outline: none; color: var(--v2-text); min-width: 0; }
.v2-searchbar button { border: none; background: var(--v2-grad); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 800; cursor: pointer; }
.v2-count { font-size: 12.5px; color: var(--v2-muted); font-weight: 700; }

/* ---------- stats band / partners ---------- */
.v2-stats-band {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px;
    background: var(--v2-primary-ink); border-radius: var(--v2-radius); padding: 22px; color: #fff;
    position: relative; overflow: hidden;
}
.v2-stats-band::before { content: ""; position: absolute; width: 300px; height: 300px; right: -100px; top: -120px; background: radial-gradient(circle, rgba(94,234,212,0.25), transparent 70%); }
@media (min-width: 861px) { .v2-stats-band { grid-template-columns: repeat(4, 1fr); } }
.v2-stats-band strong { display: block; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; margin-bottom: 2px; position: relative; }
.v2-stats-band strong span { font-size: inherit; line-height: inherit; }
.v2-stats-band span { font-size: 12.5px; opacity: 0.75; position: relative; }
.v2-partners { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: var(--v2-surface); padding: 16px 0; }
.v2-partner { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; font-weight: 800; white-space: nowrap; color: var(--v2-text); }
.v2-partner i, .v2-partner img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.v2-partner-initials { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.v2-promo-accent { width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; margin-bottom: 8px; }

/* ---------- value cards (teal/blue gradient) ---------- */
.v2-values { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .v2-values { grid-template-columns: repeat(2, 1fr); } }
.v2-value-card { border-radius: var(--v2-radius); padding: 26px 24px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--v2-shadow); }
.v2-value-card.is-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.v2-value-card.is-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.v2-value-card i { font-size: 30px; opacity: 0.9; }
.v2-value-card h3 { margin: 12px 0 8px; font-size: 19px; }
.v2-value-card p { margin: 0; font-size: 13.5px; opacity: 0.92; }
/* ---------- services grid ---------- */
.v2-svc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .v2-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .v2-svc-grid { grid-template-columns: repeat(3, 1fr); } }
.v2-svc-card { overflow: hidden; padding: 0; }
.v2-svc-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; }
.v2-svc-top img { width: 50px; height: 50px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.v2-svc-top h3 { margin: 0; font-size: 16px; }
.v2-svc-card > img { width: 100%; height: 170px; object-fit: cover; margin-top: 12px; }
.v2-svc-body { padding: 14px 18px 20px; display: grid; gap: 10px; }
.v2-svc-body p { margin: 0; font-size: 13.5px; color: var(--v2-muted); }
/* ---------- process steps ---------- */
.v2-steps { display: grid; gap: 12px; grid-template-columns: 1fr; counter-reset: v2step; }
@media (min-width: 861px) { .v2-steps { grid-template-columns: repeat(3, 1fr); } }
.v2-step { position: relative; padding: 20px; }
.v2-step-num { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(var(--v2-primary-rgb), 0.14); color: var(--v2-primary-deep); padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.v2-step h3 { margin: 0 0 6px; font-size: 16.5px; }
.v2-step p { margin: 0; font-size: 13.5px; color: var(--v2-muted); }
/* ---------- misc ---------- */
.v2-divider { border: none; border-top: 1px dashed var(--v2-border-strong); margin: 16px 0; }
.v2-center { text-align: center; }
.download-size-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; background: rgba(var(--v2-primary-rgb), 0.1); color: var(--v2-primary-deep); padding: 5px 12px; border-radius: 999px; }
.shop-price-original { text-decoration: line-through; color: var(--v2-muted); font-weight: 600; font-size: 0.75em; }
.product-json-import-status.is-error { color: var(--v2-danger); }
/* ---------- who-we-are + contact strip ---------- */
.v2-about { display: grid; gap: 18px; }
@media (min-width: 961px) { .v2-about { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } }
.v2-about-visual { position: relative; border-radius: var(--v2-radius); overflow: hidden; border: 1px solid var(--v2-border); min-height: 260px; }
.v2-about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-about-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 25, 16, 0.55)); }
.v2-about-badge {
    position: absolute; z-index: 2; left: 16px; bottom: 16px; right: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
    border-radius: 16px; padding: 12px 16px; font-size: 13px; font-weight: 800; color: var(--v2-primary-ink);
}
.v2-checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.v2-checklist li { display: flex; gap: 12px; align-items: flex-start; background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: 16px; padding: 12px 14px; }
.v2-checklist li > div { flex: 1; min-width: 0; }
.v2-checklist small { overflow-wrap: break-word; }
.v2-checklist i { width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto; background: var(--v2-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.v2-checklist strong { display: block; font-size: 14px; }
.v2-checklist small { color: var(--v2-muted); font-size: 12.5px; }
.v2-contact-strip { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .v2-contact-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v2-contact-strip { grid-template-columns: repeat(4, 1fr); } }
.v2-contact-card { display: flex; gap: 12px; align-items: center; padding: 16px; }
.v2-contact-card i { width: 44px; height: 44px; border-radius: 15px; flex: 0 0 auto; background: rgba(var(--v2-primary-rgb), 0.12); color: var(--v2-primary-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.v2-contact-card strong { display: block; font-size: 13.5px; }
.v2-contact-card small, .v2-contact-card a { font-size: 12.5px; color: var(--v2-muted); word-break: break-word; }
/* ---------- screenshot-style mobile header: branding + search + bell + lang, one line ---------- */
.v2-mhead { display: none; }
.v2-search-btn { display: none; }
@media (max-width: 860px) {
    .site-header { flex-wrap: nowrap; }
    .site-header .brand,
    .site-header .menu-toggle,
    .site-header .cart-button,
    .site-header .v2-search { display: none; }
    .v2-mhead { display: contents; }
    .v2-mhead-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--v2-text); min-width: 0; flex: 0 1 auto; }
    @media (max-width: 380px) {
        .v2-mhead-word, .v2-mhead-brand .brand-v2 { display: none; }
        .header-tools { gap: 4px; }
    }
    .v2-mhead-brand img {
        width: 40px; height: 40px; border-radius: 13px; object-fit: cover;
        border: 2px solid transparent;
        background: linear-gradient(#fff, #fff) padding-box, var(--v2-grad) border-box;
        box-shadow: 0 8px 18px rgba(var(--v2-primary-rgb), 0.35);
    }
    .v2-mhead-word { display: flex; flex-direction: column; line-height: 1.05; }
    .v2-mhead-word strong { font-size: 16px; letter-spacing: -0.02em; }
    .v2-mhead-word strong span { background: var(--v2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .v2-mhead-word small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--v2-muted); }
    .v2-search-btn { display: inline-flex; }
    .header-tools { margin-left: auto; gap: 6px; }
    .header-tools .v2-icon-btn, .header-tools .lang-flag { width: 38px; height: 38px; font-size: 15px; }
}
/* ---------- slide-in search modal ---------- */
.v2-search-modal { position: fixed; inset: 0; z-index: 180; }
.v2-search-modal[hidden] { display: none; }
.v2-search-backdrop { position: absolute; inset: 0; background: rgba(10, 30, 20, 0.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; }
.v2-search-modal.is-open .v2-search-backdrop { opacity: 1; }
.v2-search-sheet {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--v2-surface); border-bottom: 1px solid var(--v2-border);
    border-radius: 0 0 26px 26px; box-shadow: var(--v2-shadow-lg);
    padding: calc(14px + env(safe-area-inset-top)) 16px 18px;
    transform: translateY(-102%); transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.v2-search-modal.is-open .v2-search-sheet { transform: none; }
.v2-search-form { display: flex; align-items: center; gap: 8px; background: var(--v2-surface-2); border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 6px 6px 6px 16px; position: relative; }
.v2-search-form > i { color: var(--v2-muted); }
.v2-search-form input[type="search"] { flex: 1; border: none; background: none; font: inherit; font-size: 15px; outline: none; color: var(--v2-text); min-width: 0; }
.v2-search-sheet .v2-chips { margin-top: 12px; }
/* screenshot-style active tab: solid green pill */
.v2-tab-label { display: none; font-size: 11px; }
.v2-tab.is-active { color: #fff; background: var(--v2-primary); box-shadow: 0 8px 18px rgba(var(--v2-primary-rgb), 0.4); gap: 6px; padding: 10px 18px; }
.v2-tab.is-active .v2-tab-label { display: inline; }
.v2-tab.is-active::after { display: none; }
/* ---------- buttons & inputs always use the brand font ---------- */
button, input, select, textarea, summary {
    font-family: var(--v2-font, "Outfit", system-ui, sans-serif);
}
/* ---------- admin rebind card inputs ---------- */
.admin-rebind-card input:not([type="checkbox"]):not([type="radio"]),
.admin-rebind-card select {
    width: 100%; border: 1.5px solid var(--v2-border); border-radius: 14px;
    background: var(--v2-surface); padding: 11px 14px; font-size: 13.5px; color: var(--v2-text);
}
.admin-rebind-card input:focus, .admin-rebind-card select:focus {
    outline: none; border-color: var(--v2-primary); box-shadow: 0 0 0 4px rgba(var(--v2-primary-rgb), 0.14);
}
.admin-rebind-card label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 800; }
/* ---------- modern admin polish ---------- */
.admin-section .section-head { align-items: center; }
.admin-row { border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.admin-row:hover { border-color: var(--v2-border); }
.entity-card, .admin-user-card, .project-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.entity-card:hover, .admin-user-card:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }
.license-accordion-head:hover { color: var(--v2-primary); }
/* ---------- how-we-work icon grid with connector arrows ---------- */
.v2-how-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 861px) {
    .v2-how-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
}
.v2-how-card { position: relative; text-align: center; padding: 26px 20px; }
.v2-how-card .v2-row-icon { width: 60px; height: 60px; font-size: 24px; margin: 0 auto 12px; border-radius: 20px; }
.v2-how-card h3 { margin: 0 0 6px; font-size: 16.5px; }
.v2-how-card p { margin: 0; font-size: 13.5px; color: var(--v2-muted); }
.v2-how-card .v2-step-num { margin-bottom: 10px; }
.v2-how-card:not(:last-child)::after {
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
    content: "\f063"; color: var(--v2-primary);
    background: var(--v2-surface); border: 1.5px solid var(--v2-border-strong);
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    box-shadow: var(--v2-shadow-sm); z-index: 2;
}
@media (min-width: 861px) {
    .v2-how-card:not(:last-child)::after {
        content: "\f061"; left: auto; right: -27px; top: 50%; bottom: auto;
        transform: translateY(-50%);
    }
}
/* ---------- profile photo upload ---------- */
.v2-profile-photo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.v2-profile-photo-row img { width: 64px; height: 64px; border-radius: 20px; object-fit: cover; border: 2px solid var(--v2-border-strong); }
.v2-profile-photo-row .v2-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.v2-profile-photo-row input[type="file"] { font-size: 12.5px; max-width: 100%; }
/* ---------- graphical animated feature cards ---------- */
.v2-feat-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .v2-feat-grid { grid-template-columns: repeat(2, 1fr); } .v2-feat-grid .v2-feat-card:last-child { grid-column: span 2; } }
@media (min-width: 1024px) { .v2-feat-grid { grid-template-columns: repeat(3, 1fr); } .v2-feat-grid .v2-feat-card:last-child { grid-column: span 2; } }
.v2-feat-card {
    position: relative; overflow: hidden; padding: 22px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.v2-feat-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: linear-gradient(90deg, var(--v2-feat-a, var(--v2-primary)), var(--v2-feat-b, var(--v2-secondary)));
    opacity: 0.9;
}
.v2-feat-card::after {
    content: ""; position: absolute; width: 150px; height: 150px; right: -50px; top: -50px;
    background: radial-gradient(circle, var(--v2-feat-soft, rgba(var(--v2-primary-rgb), 0.14)), transparent 70%);
    pointer-events: none;
}
.v2-feat-card:hover { transform: translateY(-5px); box-shadow: var(--v2-shadow); border-color: var(--v2-border-strong); }
.v2-feat-icon {
    width: 58px; height: 58px; border-radius: 19px; margin-bottom: 12px;
    background: linear-gradient(135deg, var(--v2-feat-a, var(--v2-primary)), var(--v2-feat-b, var(--v2-secondary)));
    color: #fff; font-size: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 24px rgba(var(--v2-primary-rgb), 0.3);
    animation: v2-float 4.5s ease-in-out infinite; animation-delay: var(--v2-d, 0ms);
    transition: transform 0.25s ease;
}
.v2-feat-card:hover .v2-feat-icon { transform: scale(1.1) rotate(-6deg); animation-play-state: paused; }
.v2-feat-card h3 { margin: 0 0 6px; font-size: 16px; position: relative; z-index: 1; }
.v2-feat-card p { margin: 0; font-size: 13.5px; color: var(--v2-muted); position: relative; z-index: 1; }
.v2-feat-grid .v2-feat-card:nth-child(5n+1) { --v2-feat-a: #16a34a; --v2-feat-b: #0d9488; --v2-feat-soft: rgba(22, 163, 74, 0.14); }
.v2-feat-grid .v2-feat-card:nth-child(5n+2) { --v2-feat-a: #2563eb; --v2-feat-b: #0ea5e9; --v2-feat-soft: rgba(37, 99, 235, 0.14); }
.v2-feat-grid .v2-feat-card:nth-child(5n+3) { --v2-feat-a: #d97706; --v2-feat-b: #f59e0b; --v2-feat-soft: rgba(217, 119, 6, 0.14); }
.v2-feat-grid .v2-feat-card:nth-child(5n+4) { --v2-feat-a: #9333ea; --v2-feat-b: #db2777; --v2-feat-soft: rgba(147, 51, 234, 0.14); }
.v2-feat-grid .v2-feat-card:nth-child(5n+5) { --v2-feat-a: #059669; --v2-feat-b: #84cc16; --v2-feat-soft: rgba(5, 150, 105, 0.14); }
/* ---------- square avatar cropper ---------- */
.v2-crop-stage {
    position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
    background: #0f1f16; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.v2-crop-stage:active { cursor: grabbing; }
.v2-crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; pointer-events: none; }
.v2-crop-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 33.34% 33.34%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); border-radius: 18px;
}
.v2-crop-zoom { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; color: var(--v2-primary-deep); }
.v2-crop-zoom input[type="range"] { flex: 1; accent-color: var(--v2-primary); }
.v2-bell-count {
    position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px;
    background: var(--v2-danger, #dc2626); color: #fff; font-size: 10.5px; font-weight: 800;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
    border: 2px solid var(--v2-surface);
    animation: v2-pop 0.3s ease;
}
/* ---------- notification dropdown ---------- */
.v2-notif-wrap { position: relative; }
.v2-notif-dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 120;
    width: min(340px, calc(100vw - 32px));
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 20px;
    box-shadow: var(--v2-shadow-lg); padding: 8px; max-height: 60vh; overflow: auto;
    opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.v2-notif-dropdown.is-open { opacity: 1; transform: none; pointer-events: auto; }
.v2-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.v2-notif-head strong { font-size: 14px; }
.v2-notif-clear { background: none; border: none; color: var(--v2-primary-deep); font-size: 12px; font-weight: 800; cursor: pointer; padding: 4px 6px; }
.v2-notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; color: var(--v2-text); }
.v2-notif-item:hover { background: var(--v2-surface-2); }
.v2-notif-item.is-unread { background: rgba(var(--v2-primary-rgb), 0.08); }
.v2-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-notif-text strong { font-size: 13px; }
.v2-notif-text small { font-size: 12px; color: var(--v2-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-notif-empty { text-align: center; padding: 18px 10px; }
.v2-notif-all { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--v2-primary-deep); padding: 10px; border-top: 1px solid var(--v2-border); margin-top: 4px; }
/* ---------- newsletter pill form ---------- */
.v2-news-form {
    display: flex; align-items: center; gap: 8px; margin-top: 14px;
    background: rgba(255, 255, 255, 0.95); border-radius: 999px; padding: 6px 6px 6px 18px;
    max-width: 460px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}
.v2-news-form input[type="email"] { flex: 1; border: none; background: none; font: inherit; font-size: 14px; outline: none; color: var(--v2-text); min-width: 0; }
.v2-news-form .v2-btn { flex: 0 0 auto; }
/* ---------- mobile tabbar: 6 tabs fit ---------- */
@media (max-width: 430px) {
    .v2-tab { min-width: 0; flex: 1; padding: 8px 6px; }
    .v2-tab.is-active { padding: 8px 12px; }
}
/* ---------- webbrief redesign (scoped, markup untouched) ---------- */
.webbrief-sections { display: grid; gap: 22px; }
.webbrief-sections > section.webbrief-card { margin-bottom: 6px; }
section.webbrief-card {
    padding: 28px 22px 24px;
    background:
        linear-gradient(90deg, var(--v2-primary), var(--v2-secondary)) top left / 100% 5px no-repeat,
        rgba(255, 255, 255, 0.88);
    position: relative; overflow: hidden;
}
section.webbrief-card::before {
    content: ""; position: absolute; width: 200px; height: 200px; right: -70px; top: -70px;
    background: radial-gradient(circle, rgba(var(--v2-primary-rgb), 0.1), transparent 70%);
    pointer-events: none;
}
.webbrief-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; position: relative; }
.webbrief-card-head h2 { margin: 0; font-size: clamp(18px, 2.6vw, 22px); }
.webbrief-section-badge {
    flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: var(--v2-grad); padding: 7px 14px; border-radius: 999px;
    box-shadow: 0 8px 16px rgba(var(--v2-primary-rgb), 0.35);
}
.webbrief-field > span { display: flex; align-items: center; gap: 4px; }
.webbrief-field > span em, .webbrief-field em { color: var(--v2-danger); font-style: normal; font-weight: 800; }
.webbrief-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.webbrief-field select:hover, .webbrief-field textarea:hover { border-color: var(--v2-border-strong); }
.webbrief-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.webbrief-checks label {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    background: var(--v2-surface-2); border: 1.5px solid var(--v2-border); border-radius: 999px;
    padding: 8px 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.webbrief-checks label:has(input:checked) { border-color: var(--v2-primary); background: rgba(var(--v2-primary-rgb), 0.1); }
.webbrief-checks input { accent-color: var(--v2-primary); width: 16px; height: 16px; }
.webbrief-submit-area {
    background: rgba(255, 255, 255, 0.88); border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius); padding: 22px; box-shadow: var(--v2-shadow-sm);
    display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 6px;
}
.webbrief-toolbar {
    background: rgba(255, 255, 255, 0.88); border: 1px solid var(--v2-border);
    border-radius: 18px; padding: 12px 14px; box-shadow: var(--v2-shadow-sm);
}
.webbrief-progress { margin-top: 10px; }
/* ---------- promo coupon tickets ---------- */
.v2-promo-ticket { padding: 0; }
.v2-promo-stub {
    padding: 22px 20px 18px; color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--promo-accent, var(--v2-primary)), var(--v2-primary-ink));
}
.v2-promo-stub::before {
    content: "\f02c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: -18px; top: -24px; font-size: 130px; opacity: 0.16;
    transform: rotate(-12deg); pointer-events: none;
}
.v2-promo-badge {
    display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 5px 13px; border-radius: 999px; margin-bottom: 10px;
}
.v2-promo-stub h3 { margin: 0 0 6px; font-size: 19px; color: #fff; }
.v2-promo-stub p { margin: 0; font-size: 13px; opacity: 0.9; color: #fff; }
.v2-promo-tear { position: relative; height: 18px; background: var(--v2-surface); }
.v2-promo-tear span {
    position: absolute; inset: 8px 0 auto 0; border-top: 2px dashed var(--v2-border-strong);
}
.v2-promo-tear::before, .v2-promo-tear::after {
    content: ""; position: absolute; top: -1px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--v2-bg);
}
.v2-promo-tear::before { left: -10px; }
.v2-promo-tear::after { right: -10px; }
.v2-promo-foot { display: grid; gap: 10px; padding: 6px 18px 20px; justify-items: start; }
.v2-promo-foot .v2-countdown-pill { background: var(--v2-primary-ink); }
.v2-promo-code {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    border: 2px dashed var(--v2-border-strong); background: var(--v2-surface-2);
    border-radius: 12px; padding: 9px 14px; font-weight: 800; font-size: 14px; letter-spacing: 0.06em;
    color: var(--v2-primary-deep); transition: border-color 0.2s, transform 0.15s;
}
.v2-promo-code:hover { border-color: var(--v2-primary); transform: scale(1.03); }
.v2-promo-code i:last-child { font-size: 12px; opacity: 0.6; }
.holder-feedback { min-height: 20px; }

/* ---------- chatbot floating button: mobile icon-only, above tabbar ---------- */
@media (max-width: 860px) {
    .ws-assistant {
        right: 12px;
        left: auto;
        bottom: calc(var(--v2-tabbar-h) + 20px);
    }
    .ws-assistant-fab {
        width: 58px;
        height: 58px;
        min-height: 58px;
        padding: 0;
        margin-left: auto;
        justify-content: center;
        border-radius: 50%;
    }
    .ws-assistant-fab span {
        display: none;
    }
    .ws-assistant-fab i {
        font-size: 1.5rem;
    }
    /* Anchor the panel to the viewport so it can never overflow the screen */
    .ws-assistant-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: calc(var(--v2-tabbar-h) + 86px);
        width: auto;
        max-width: none;
        max-height: min(70vh, 640px);
    }
}
.auth-google-form { margin-top: 12px; }
.google-native-btn-wrap { display: flex; justify-content: center; }
.google-native-btn-wrap > div { width: 100% !important; }
/* ---------- minproff-style landing hero ---------- */
.v2-mhero {
    position: relative; overflow: hidden; border-radius: 28px;
    border: 1px solid var(--v2-border); box-shadow: var(--v2-shadow);
    background:
        radial-gradient(circle at 10% 20%, rgba(var(--v2-primary-rgb), 0.18), transparent 30%),
        radial-gradient(circle at 90% 15%, rgba(var(--v2-secondary-rgb), 0.2), transparent 32%),
        radial-gradient(circle at 50% 110%, rgba(245, 158, 11, 0.12), transparent 40%),
        linear-gradient(135deg, #fffdf6, #fff 50%, #f4fbf6);
}
.v2-mhero-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(var(--v2-primary-rgb), 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
}
.v2-mhero-grid { position: relative; display: grid; gap: 20px; padding: 26px 22px; align-items: center; }
@media (min-width: 961px) { .v2-mhero-grid { grid-template-columns: 1.5fr 0.8fr; padding: 40px; } }
.v2-mhero-status {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.85); border: 1px solid var(--v2-border);
    font-size: 11px; font-weight: 800; color: var(--v2-primary-deep);
    padding: 6px 14px; border-radius: 999px; box-shadow: var(--v2-shadow-sm); margin-bottom: 12px;
}
.v2-mhero-hello { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: var(--v2-muted); margin: 0 0 8px; }
.v2-mhero-hello strong { color: var(--v2-primary-deep); }
.v2-mhero-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    background: var(--v2-grad); color: #fff; font-weight: 800; font-size: 19px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 8px 18px rgba(var(--v2-primary-rgb), 0.35);
}
.v2-mhero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.v2-mhero-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.v2-mhero-who small { font-size: 12.5px; }
.v2-mhero-who strong { font-size: 16.5px; }
.v2-mhero-grid h1 { font-size: clamp(28px, 5.6vw, 50px); font-weight: 800; margin: 0 0 10px; color: var(--v2-primary-ink); }
.v2-mhero-grid h1 .v2-grad-text {
    background: linear-gradient(135deg, var(--v2-primary), var(--v2-secondary), var(--v2-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-mhero-grid > div > p { color: var(--v2-muted); max-width: 56ch; font-size: 14.5px; }
.v2-mhero-visual { display: none; justify-content: center; }
@media (min-width: 961px) { .v2-mhero-visual { display: flex; } }
.v2-mhero-orb { position: relative; width: 250px; height: 250px; }
.v2-mhero-orb::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(24px);
    background: linear-gradient(135deg, rgba(var(--v2-primary-rgb), 0.35), rgba(var(--v2-secondary-rgb), 0.3));
}
.v2-mhero-glass {
    position: absolute; inset: 30px; border-radius: 40px; overflow: hidden;
    background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: var(--v2-shadow-lg);
    animation: v2-float 5s ease-in-out infinite;
}
.v2-mhero-glass img { width: 100%; height: 100%; object-fit: cover; }
.v2-mhero-glass.v2-mhero-logo { display: grid; align-content: center; justify-items: center; gap: 10px; background: rgba(255, 255, 255, 0.85); padding: 26px; }
.v2-mhero-glass.v2-mhero-logo img { width: 118px; height: 118px; object-fit: contain; position: static; }
.v2-mhero-glass.v2-mhero-logo .v2-mhero-tag { position: static; }
.v2-mhero-glass .v2-mhero-tag {
    position: absolute; left: 12px; bottom: 12px; right: 12px;
    background: rgba(255, 255, 255, 0.9); border-radius: 14px; padding: 8px 12px;
    font-size: 12px; font-weight: 800; color: var(--v2-primary-ink);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

/* ---------- minproff-style divider rows card ---------- */
.v2-rows-card { padding: 0; overflow: hidden; }
.v2-rows-head { display: flex; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--v2-border); }
.v2-rows-head .v2-row-icon { width: 42px; height: 42px; font-size: 18px; }
.v2-rows-head h2 { margin: 0; font-size: 17px; }
.v2-rows-head p { margin: 0; font-size: 12px; color: var(--v2-muted); }
.v2-row-item {
    display: flex; gap: 14px; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid var(--v2-border); transition: background 0.2s;
    color: var(--v2-text);
}
.v2-row-item:last-child { border-bottom: none; }
.v2-row-item:hover { background: var(--v2-surface-2); }
.v2-row-icon {
    width: 48px; height: 48px; border-radius: 16px; flex: 0 0 auto;
    background: rgba(var(--v2-primary-rgb), 0.12); color: var(--v2-primary-deep);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.v2-row-item h3 { margin: 0 0 2px; font-size: 15px; }
.v2-row-item p { margin: 0; font-size: 13px; color: var(--v2-muted); }
.v2-row-item > div { flex: 1; min-width: 0; }
.v2-row-chev { color: var(--v2-muted); }
.v2-countdown-pill {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
    background: rgba(11, 61, 34, 0.85); color: #fff; font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 999px;
}
.v2-countdown-pill strong { font-weight: 800; }

/* ---------- shop filters: one line + sort dropdown ---------- */
.v2-filterbar { display: grid; gap: 10px; margin-bottom: 14px; }
.v2-filter-row { display: flex; gap: 8px; align-items: stretch; }
.v2-filter-row .v2-searchbar { flex: 1; min-width: 0; }
.v2-sort { position: relative; flex: 0 0 auto; }
.v2-sort summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; height: 100%; min-height: 48px;
    background: var(--v2-surface); border: 1.5px solid var(--v2-border); border-radius: 999px;
    padding: 0 15px; font-size: 13px; font-weight: 800; color: var(--v2-primary-deep); white-space: nowrap;
}
.v2-sort summary::-webkit-details-marker { display: none; }
.v2-sort summary:hover { border-color: var(--v2-primary); }
.v2-sort[open] summary { border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.14); }
.v2-sort-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 190px;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 16px;
    box-shadow: var(--v2-shadow-lg); padding: 6px; animation: v2-pop 0.2s ease;
}
.v2-sort-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--v2-text); }
.v2-sort-menu a:hover { background: var(--v2-surface-2); }
.v2-sort-menu a.is-current { color: var(--v2-primary-deep); background: rgba(var(--v2-primary-rgb), 0.1); }
.v2-filter-go {
    flex: 0 0 auto; width: 50px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--v2-grad); color: #fff; font-size: 16px;
    box-shadow: 0 8px 18px rgba(var(--v2-primary-rgb), 0.4);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s;
}
.v2-filter-go:hover { transform: scale(1.06); }
.v2-filter-row label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; color: var(--v2-primary-ink); }
.v2-filter-row select, .v2-pagesize select {
    border: 1.5px solid var(--v2-border); border-radius: 14px; background: var(--v2-surface);
    padding: 11px 13px; font: inherit; font-size: 13.5px; color: var(--v2-text);
}
.v2-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.v2-page-link {
    min-width: 42px; height: 42px; padding: 0 12px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v2-surface); border: 1px solid var(--v2-border);
    font-weight: 800; font-size: 13.5px; color: var(--v2-text);
}
.v2-page-link:hover { border-color: var(--v2-primary); }
.v2-page-link.is-current { background: var(--v2-primary-ink); color: #fff; border-color: var(--v2-primary-ink); }
.v2-page-link.is-disabled { opacity: 0.4; pointer-events: none; }
.v2-pagesize { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--v2-muted); }
pre { background: var(--v2-primary-ink); color: #d9f99d; border-radius: 14px; padding: 14px 16px; overflow-x: auto; font-size: 12.5px; }
pre code { background: none; color: inherit; padding: 0; }
code { background: var(--v2-surface-2); border: 1px solid var(--v2-border); padding: 2px 8px; border-radius: 8px; font-size: 0.88em; }
.summary-card code { background: var(--v2-primary-ink); color: #d9f99d; border: none; display: inline-block; margin-top: 8px; word-break: break-all; }