/* =========================================================================
   Prime Core Dynamics — Phase 1
   Strict monochrome. No accent color. No rounded corners. Hairline borders.
   Inter (UI/body) + JetBrains Mono (data).
   ========================================================================= */

:root {
    --black:      #0a0a0a;
    --surface-dark: #1c1c1c;   /* matte black for large dark panels (nav, login) */
    --border-dark:  #3a3a3a;   /* hairlines/borders drawn on --surface-dark */
    --footer-bg:    #1B4DB1;   /* brand blue (placeholder — swap for your logo hex) */
    --accent-orange: #E8590C;  /* deep premium orange — Order pill (empty cart) */
    --accent-warm:   #F5B43C;  /* warm amber — SEO card icon blocks (reusable) */
    --accent-green:  #1b8a4e;  /* Order pill when the cart has items */
    --accent-blue:   #2E5BE0;  /* login tabs/button/glows/seam accent */
    --hero-glow:     46, 91, 224;  /* brand-blue RGB triplet for the hero glow blobs (adjust hex here) */
    --off-white:  #fafafa;
    --white:      #ffffff;
    --border:     #e4e4e4;
    --border-2:   #d4d4d4;
    --muted:      #6b6b6b;
    --muted-2:    #9a9a9a;
    --muted-3:    #b8b8b8;
    --ink:        #141414;

    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --maxw: 1240px;
    --step: 8px;
}

/* ---- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must always win over author display rules. Without this a
   rule like `.iname-chip { display: inline-block }` re-shows a hidden element (the
   chip + dashed add button were rendering stacked because of exactly that). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }  /* reduced-motion resets this to auto */

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Sticky footer: full-height flex column so the footer is pushed to the
       viewport bottom on short pages and flows below content on long ones. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* The primary content region grows to fill the space above the footer, site-wide
   (storefront <main>, admin/login shells already set their own min-height:100vh). */
body > main,
body > .admin-shell {
    flex: 1 0 auto;
}

img { max-width: 100%; display: block; }

a { color: var(--black); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select, button { font-size: 15px; }

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* ---- Shared bits ------------------------------------------------------- */

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.eyebrow-invert { color: var(--muted-3); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 13px 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.btn:hover { background: #262626; text-decoration: none; }
.btn-block { width: 100%; }
.btn-outline {
    background: transparent;
    color: var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); }

.alert {
    padding: 12px 16px;
    border: 1px solid var(--border-2);
    margin: 0 0 20px;
    font-size: 14px;
}
.alert-error { border-color: var(--black); background: var(--white); }
.alert-success { border-color: var(--black); background: var(--white); }

.hint { color: var(--muted-2); font-weight: 400; }

/* =========================================================================
   FORMS
   ========================================================================= */

.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 7px;
    color: var(--ink);
}

.field input,
.field textarea,
.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-2);
    padding: 12px 14px;
    color: var(--ink);
    transition: border-color .15s ease;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--black);
}
textarea { resize: vertical; font-family: inherit; }

.field-error { color: var(--black); font-size: 12.5px; margin: 6px 0 0; font-weight: 500; }
.field-error::before { content: '— '; }

.fineprint { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* Disclaimer checkboxes */
.disclaimers {
    border: 1px solid var(--border);
    padding: 16px 16px 6px;
    margin: 8px 0 22px;
}
.disclaimers legend {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px;
}
.check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 14px;
    color: var(--ink);
    cursor: pointer;
}
.check input {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    flex: 0 0 auto;
}
.req {
    display: inline-block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-left: 6px;
}

/* =========================================================================
   LOGIN — split screen (image visual + dark auth card), #0d0d0f
   ========================================================================= */

.login-body { background: #0d0d0f; }

.login-split {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
}

/* Soft blue seam blending the two panels (above panels, below content). */
.login-seam {
    position: absolute;
    top: 0; bottom: 0;
    left: 52.5%;
    width: 360px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(46, 91, 224, 0) 0%,
        rgba(46, 91, 224, 0.11) 45%,
        rgba(46, 91, 224, 0.06) 62%,
        rgba(0, 0, 0, 0) 100%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 2;
}

/* ---- LEFT: full-bleed visual ---------------------------------------------- */
.login-visual {
    position: relative;
    background-color: #0d0d0f;   /* fallback when no image is set */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    overflow: hidden;
    padding: 54px 60px 48px;
}
.login-visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(13, 13, 15, 0.55) 0%,
        rgba(13, 13, 15, 0.40) 42%,
        rgba(13, 13, 15, 0.82) 100%);
}

/* Drifting blue glows (no grid) */
.login-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}
.login-glow-1 {
    width: 620px; height: 620px;
    top: -190px; left: -110px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.50), transparent 68%);
    animation: login-glow-a 18s ease-in-out infinite alternate;
}
.login-glow-2 {
    width: 520px; height: 520px;
    bottom: -180px; right: -90px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.34), transparent 70%);
    animation: login-glow-b 24s ease-in-out infinite alternate;
}
.login-visual.has-bg .login-glow { opacity: 0.5; }   /* don't muddy the image */
@keyframes login-glow-a {
    from { transform: translate(0, 0); }
    to   { transform: translate(80px, 55px); }
}
@keyframes login-glow-b {
    from { transform: translate(0, 0); }
    to   { transform: translate(-85px, -40px); }
}

.login-visual-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.login-logo { align-self: center; display: inline-block; }
.login-visual .login-logo-img { height: 120px; width: auto; }
.login-visual .logo-wordmark { color: #fff; font-size: 30px; }

/* Three equal 80%-width glass boxes, centered between logo and bottom block */
.login-features {
    width: 80%;
    align-self: center;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Apple "liquid glass": translucent gradient fill (light catches the top edge),
   a glowing brand-blue border, and a faint top inner highlight for the glossy edge. */
.login-feature {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(46, 91, 224, 0.50);
    border-radius: 18px;
    padding: 15px 22px;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        0 0 20px rgba(46, 91, 224, 0.25),
        0 0 0 1px rgba(46, 91, 224, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: box-shadow .2s ease, border-color .2s ease;
}
/* Subtle hover: intensify the glow. */
.login-feature:hover {
    border-color: rgba(46, 91, 224, 0.65);
    box-shadow:
        0 0 28px rgba(46, 91, 224, 0.38),
        0 0 0 1px rgba(46, 91, 224, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Fallback where backdrop-filter is unsupported: a semi-opaque dark fill so the
   boxes never turn into unreadable light gradients on the dark panel. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .login-feature { background: rgba(16, 20, 38, 0.88); }
}
.login-feature-title { margin: 0; font-size: 19px; font-weight: 600; color: #fff; }
.login-feature-text { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }

/* Bottom block: same 80% width + centering, anchored to bottom */
.login-visual-foot { width: 80%; align-self: center; margin-top: auto; }
.login-bottom-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
}
.login-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.login-chip {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 17px;
}
.login-social { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.55); }
.login-social-stat { color: #fff; font-weight: 700; }

/* ---- RIGHT: auth card ----------------------------------------------------- */
.login-auth {
    position: relative;
    background: #0d0d0f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 60px;
}
.login-auth::before {   /* subtle wash toward the seam */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 60%);
}
.auth-card { position: relative; z-index: 3; width: 100%; max-width: 470px; }

.tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    padding: 5px;
    margin-bottom: 28px;
}
.tab {
    flex: 1;
    background: none;
    border: none;
    border-radius: 9px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.52);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab.is-active {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 5px 18px rgba(46, 91, 224, 0.32);
}
.tab:not(.is-active):hover { color: #fff; }
.auth-form.is-hidden { display: none; }

/* Fields on the dark card */
.login-auth .field label { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.80); margin-bottom: 9px; }
.login-auth .field label .hint { color: rgba(255, 255, 255, 0.40); font-weight: 400; }
.input-icon { position: relative; }
.input-icon-svg {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
}
.login-auth .input-icon input {
    width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 14px 46px 14px 46px;
    color: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.login-auth .input-icon input::placeholder { color: rgba(255, 255, 255, 0.30); }
.login-auth .input-icon input:focus {
    outline: none;
    border-color: rgba(46, 91, 224, 0.70);
    background: rgba(255, 255, 255, 0.06);
}
.pw-toggle {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    color: rgba(255, 255, 255, 0.38);
    display: inline-flex;
}
.pw-toggle:hover { color: rgba(255, 255, 255, 0.85); }
.pw-toggle svg { width: 18px; height: 18px; }
.login-auth .field-error { color: #f0a58f; }

/* Primary button — blue, white text (no cream) */
.btn-auth {
    display: block;
    width: 100%;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 7px 24px rgba(46, 91, 224, 0.30);
    transition: background .15s ease, transform .05s ease;
}
.btn-auth:hover { background: #264fc4; }
.btn-auth:active { transform: translateY(1px); }

/* Agreements box */
.login-auth .disclaimers {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    padding: 18px 18px 16px;
    margin: 6px 0 22px;
    background: rgba(255, 255, 255, 0.018);
}
.login-auth .disclaimers legend {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    margin-bottom: 4px;
    padding: 0;
}
.login-auth .check {
    gap: 11px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.45;
    margin-bottom: 12px;
}
.login-auth .check:last-of-type { margin-bottom: 0; }
.login-auth .check input {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    accent-color: var(--accent-blue);
}
.login-auth .req {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.34);
    text-transform: uppercase;
}

.auth-fineprint {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}
.auth-fineprint a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 2px; }
.auth-fineprint a:hover { color: #fff; }

.auth-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 24px 0 18px; }

.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.50); }
.trust svg { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.45); flex: 0 0 auto; }

.auth-closing { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.34); margin: 17px 0 0; }

/* Alerts on the dark card */
.login-auth .alert { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #fff; }

/* Freeze glows for reduced motion (static glow still shows) */
@media (prefers-reduced-motion: reduce) {
    .login-glow { animation: none; }
}

/* =========================================================================
   TOP BAR (gated)
   ========================================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-dark);   /* resting state: solid matte black */
    color: var(--white);
    border-bottom: 1px solid var(--border-dark);
    transition: background .25s ease;
}
/* Frosted glass only once scrolled, and only where backdrop-filter is supported.
   At the top of the page (no .is-scrolled) the bar stays solid; unsupported
   browsers stay solid too (never see-through-to-unreadable). */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .topbar.is-scrolled {
        background: rgba(28, 28, 28, 0.96);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}
.topbar-inner {
    /* Full-bleed inner container matching the hero's geometry (padding: 0 78px, no
       max-width), so the logo lines up with the hero's left edge and the nav items
       with its right edge. The .topbar background still spans the full viewport. */
    max-width: none;
    margin: 0 auto;
    padding: 22px 78px;   /* taller bar; align-items:center keeps items vertically centered */
    display: flex;
    align-items: center;
    gap: 24px;
}
.topbar-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-brand:hover { text-decoration: none; }
.topbar-logo { height: 42px; width: auto; }
.topbar-wordmark {
    color: var(--white);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 15px;
}
/* Natural width (no grow) so it never stretches to fill; the nav group's
   margin-left:auto absorbs the free space, leaving a gap before the links. */
.topbar-search { flex: 0 1 460px; max-width: 460px; }
.topbar-search input {
    width: 100%;
    background: #262626;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
    color: var(--white);
    padding: 9px 14px;
    font-size: 14px;
    transition: border-color .15s ease;
}
.topbar-search input::placeholder { color: var(--muted-2); }
.topbar-search input:focus { outline: none; border-color: #5a5a5a; }

.topbar-nav { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; margin-left: auto; }
.topbar-link { color: var(--muted-3); font-size: 14px; }
.topbar-link:hover { color: var(--white); text-decoration: none; }

/* Solid filled orange pill with an inset white count badge. Reads as one button. */
.order-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-orange);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    min-height: 40px;            /* keeps a comfortable tap target on mobile */
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.order-pill:hover { text-decoration: none; background: #D24E06; }  /* slightly darker on hover */
/* Cart has items -> green (reverts to orange automatically when count returns to 0). */
.order-pill.has-items { background: var(--accent-green); }
.order-pill.has-items:hover { background: #166f3f; }
.order-pill.has-items .order-pill-count { color: var(--accent-green); }
.order-pill-label { font-size: 13px; font-weight: 600; line-height: 1; }
.order-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ffffff;
    color: var(--accent-orange);
    border-radius: 999px;
}

/* =========================================================================
   HERO — dark, two columns, drifting blue glows (no grid)
   ========================================================================= */

.hero {
    position: relative;
    overflow: hidden;
    background: #0d0d0f;
    min-height: 700px;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 48px;
    padding: 0 78px;
}
.hero.no-media { grid-template-columns: 1fr; }   /* no image -> left column takes the space */

.hero-glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(95px);
}
.hero-glow-1 {
    width: 660px; height: 660px;
    top: -210px; left: -120px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.48), transparent 68%);
    animation: hero-glow-a 18s ease-in-out infinite alternate;
}
.hero-glow-2 {
    width: 560px; height: 560px;
    bottom: -200px; right: -80px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.34), transparent 70%);
    animation: hero-glow-b 24s ease-in-out infinite alternate;
}
@keyframes hero-glow-a { from { transform: translate(0, 0); } to { transform: translate(85px, 55px); } }
@keyframes hero-glow-b { from { transform: translate(0, 0); } to { transform: translate(-90px, -40px); } }

.hero-col { position: relative; z-index: 2; padding: 72px 0; }
.hero-media { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
/* Faint blue pool of light so the vials emerge from the dark instead of sitting on flat
   black. Sits behind the image (z-index 0); the product paints on top (z-index 1). */
.hero-media::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    height: 78%;
    background: radial-gradient(ellipse at center, rgba(46, 91, 224, 0.16), transparent 68%);
    filter: blur(26px);
    z-index: 0;
    pointer-events: none;
}
/* Grounded soft shadow + subtle blue ambient glow so the transparent-PNG cutout edges
   read as lit and settled, not hard-pasted. Product itself stays sharp (drop-shadow only
   affects the alpha silhouette, not the pixels). */
.hero-media img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 60px rgba(46, 91, 224, 0.15));
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 91, 224, 0.12);
    border: 1px solid rgba(46, 91, 224, 0.30);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #7EA0F5;
}
.hero-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3ED67F;
    box-shadow: 0 0 10px rgba(62, 214, 127, 0.85);
    flex: 0 0 auto;
}
.hero-h1 {
    margin: 30px 0 0;
    font-size: 76px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.035em;
    max-width: 700px;
    color: #fff;
}
.hero-h1-line2 { display: block; color: var(--accent-blue); }
.hero-subhead {
    margin: 28px 0 0;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.58);
    max-width: 560px;
}
.hero-buttons { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    border: none;
    transition: background .15s ease, border-color .15s ease;
}
.hero-btn svg { width: 18px; height: 18px; }
.hero-btn:hover { text-decoration: none; }
.hero-btn-primary { background: var(--accent-blue); color: #fff; box-shadow: 0 8px 26px rgba(46, 91, 224, 0.35); }
.hero-btn-primary:hover { background: #264fc4; }
.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.88);
}
.hero-btn-secondary:hover { background: rgba(255, 255, 255, 0.10); }

.hero-stats { margin-top: 64px; display: flex; }
.hero-stat {
    padding-right: 52px;
    margin-right: 52px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stat:last-child { padding-right: 0; margin-right: 0; border-right: none; }
.hero-stat-value { font-size: 38px; font-weight: 800; color: var(--accent-blue); letter-spacing: -0.02em; line-height: 1; }
.hero-stat-label { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.48); }

@media (prefers-reduced-motion: reduce) {
    .hero-glow { animation: none; }
}

/* =========================================================================
   CATALOG — light product section (anchor #catalog)
   ========================================================================= */

.catalog { background: #fafafa; padding: 48px 60px; }
/* Keep the catalog content from stretching absurdly wide + centered. */
.catalog-filters, .catalog-count, .pgrid { max-width: 1440px; margin-left: auto; margin-right: auto; }

.catalog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.catalog-filter {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    padding: 9px 18px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.catalog-filter:hover { border-color: #bbb; color: #111; text-decoration: none; }
.catalog-filter.is-active { background: #111; color: #fff; border-color: #111; }
.catalog-count { font-size: 13.5px; color: var(--muted-2); margin: 0 0 20px; }

/* Exactly 4 columns on desktop. minmax(0, 1fr) lets tracks shrink so card
   content can never force a 5th column or push past the container edge. */
.pgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
/* Reflow 4 -> 3 -> 2 -> 1 (the 2 -> 1 steps live in the 900px / 640px blocks). */
@media (max-width: 1160px) {
    .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Product card */
.pcard {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    overflow: hidden;
    min-width: 0;   /* allow the card to shrink to its grid track (no overflow) */
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard-name { overflow-wrap: break-word; }
.pcard:hover {
    transform: translateY(-5px);
    border-color: #dcdcdc;
    box-shadow: 0 16px 34px rgba(10, 10, 10, 0.09);
}
@media (prefers-reduced-motion: reduce) {
    .pcard:hover { transform: none; box-shadow: none; }
}
.pcard-form { display: flex; flex-direction: column; height: 100%; }

.pcard-media {
    position: relative;
    height: 300px;
    background: linear-gradient(170deg, #f7f7f8, #eeeeef);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pcard-media img { max-width: 82%; max-height: 82%; object-fit: contain; }
.pcard-placeholder { color: #cdced3; }
.pcard-placeholder svg { width: 84px; height: 84px; }
.pcard-cart {
    position: absolute;
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    cursor: pointer;
    transition: transform .12s ease;
}
.pcard-cart:hover { transform: scale(1.06); }
.pcard-cart svg { width: 20px; height: 20px; }

/* SALE badge — top-left, opposite the quick-add cart. Colour is admin-set inline. */
.pcard-sale {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #E23744;
    padding: 6px 11px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* Out-of-stock badge — centered pill over the image; same badge system as SALE.
   pointer-events:none so it never blocks the click-through to the product page. */
.pcard-media.is-oos .pcard-media-link { opacity: 0.55; }
.pcard-oos-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    max-width: calc(100% - 24px);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background: #1c1c1c;
    padding: 9px 20px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}
@media (max-width: 480px) {
    .pcard-oos-badge { font-size: 10.5px; padding: 7px 15px; letter-spacing: 0.05em; }
}

.pcard-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.cat-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 7px;
    padding: 6px 11px;
}
/* Admin-managed category colour palette (tint bg + darker text) */
.cat-green  { background: #e7f6ee; color: #1b8a4e; }
.cat-blue   { background: #e8eefc; color: #2E5BE0; }
.cat-red    { background: #fdeaea; color: #c0392b; }
.cat-orange { background: #fbefe2; color: #c05a12; }
.cat-purple { background: #f0eafb; color: #7d3ec0; }
.cat-gray   { background: #ededed; color: #555555; }

.pcard-name { margin: 13px 0 0; font-size: 19px; font-weight: 700; color: #111; letter-spacing: -0.015em; line-height: 1.25; }
.pcard-price { margin: 9px 0 0; font-size: 15px; font-weight: 600; color: #6b6b6b; }
.pcard-amount { font-size: 17px; font-weight: 800; color: #111; }
.pcard-compare { color: #9a9a9a; font-weight: 600; text-decoration: line-through; margin-right: 6px; }

.pcard-buy { margin-top: auto; padding-top: 18px; }
.pcard-size-label {
    display: block;
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9a9a;
}
.pcard-size {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 10px;
    padding: 12px 40px 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}
.pcard-size:focus { outline: none; border-color: var(--accent-blue); }
.pcard-add {
    margin-top: 12px;
    width: 100%;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 15px;
    font-size: 15.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(46, 91, 224, 0.26);
    cursor: pointer;
    transition: background .15s ease;
}
.pcard-add:hover { background: #264fc4; }
.pcard-add svg { width: 17px; height: 17px; }

/* Empty state */
.empty { text-align: center; padding: 64px 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); }
.empty p { color: var(--muted); margin: 0 0 20px; }

/* =========================================================================
   GENERIC PAGE (contact, legal, error)
   ========================================================================= */

.page { background: var(--off-white); }
.page-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 72px; }
.page-inner.narrow { max-width: 720px; }
.page-h1 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 16px; }
.page-intro { color: var(--muted); font-size: 16px; max-width: 62ch; margin: 0 0 32px; }

.contact-form { background: var(--white); border: 1px solid var(--border); padding: 28px; }

.legal-body-copy { color: var(--ink); font-size: 15.5px; line-height: 1.7; max-width: 68ch; }

/* Slim header for public legal / error pages */
.legal-body { background: var(--off-white); }
.slim-header { background: var(--black); }
.slim-header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.slim-brand { color: var(--white); font-weight: 600; letter-spacing: -0.01em; }
.slim-brand:hover { text-decoration: none; }
.slim-back { color: var(--muted-3); font-size: 13px; }
.slim-back:hover { color: var(--white); text-decoration: none; }

/* =========================================================================
   FOOTER
   ========================================================================= */

/* ---- Site footer (multi-column, matte black to match the nav) ---------- */
/* Gutter mirrors .catalog (60/32/18px); the inner mirrors .pgrid (max-width 1440,
   margin auto), so footer columns align exactly with the grid + FAQ above. */
.site-footer { background: var(--surface-dark); color: #a9b0bc; padding: 0 60px; }
.site-footer-inner { max-width: 1440px; margin: 0 auto; }

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 26px;
    padding-top: 28px;
    padding-bottom: 30px;
}
.footer-col { min-width: 0; }

.footer-heading {
    margin: 0 0 14px; font-size: 11px; font-weight: 600; line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.1em; color: #5d636e;
}
.footer-subheading {
    margin: 20px 0 8px; font-size: 11px; font-weight: 600; line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.1em; color: #5d636e;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a {
    display: inline-block; font-size: 13px; line-height: 2.1; color: #a9b0bc;
    text-decoration: none; transition: color .12s ease;
}
.footer-links a:hover { color: #fff; }

.footer-plain { list-style: none; margin: 0; padding: 0; }
.footer-plain li { font-size: 13px; line-height: 2.1; color: #a9b0bc; }

/* Brand column */
.footer-col-brand { min-width: 0; }
.footer-blurb { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #7d8494; max-width: 34ch; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-contact li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #a9b0bc; min-width: 0; }
.footer-contact a { color: #a9b0bc; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-contact a:hover { color: #fff; }
.footer-ico { width: 15px; height: 15px; flex: 0 0 auto; color: #5d636e; }

/* Compliance notice (full width) */
.footer-notice { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 18px 0; }
.footer-notice .footer-heading { margin-bottom: 8px; }
.footer-notice-text { margin: 0; font-size: 11.5px; line-height: 1.75; color: #7d8494; }

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 14px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.footer-copy { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.footer-powered { margin: 0; font-size: 12px; color: #5d636e; }

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 26px; }
    .site-footer { padding: 0 32px; }   /* match .catalog @900 */
}
@media (max-width: 640px) {
    .footer-top { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
    .site-footer { padding: 0 18px; }   /* match .catalog @640 */
}

/* =========================================================================
   FOCUS / MOTION
   ========================================================================= */

:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}
.topbar :focus-visible,
.login-visual :focus-visible,
.login-auth :focus-visible,
.slim-header :focus-visible {
    outline-color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 900px) {
    /* Hero stacks (text, then image); glows still cover. */
    .hero, .hero.no-media { grid-template-columns: 1fr; min-height: auto; padding: 0 32px; }
    .hero-col { padding: 52px 0 8px; }
    .hero-h1 { font-size: 54px; }
    .hero-media { padding-bottom: 28px; }
    .catalog { padding: 40px 32px; }
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Stack the login split: image becomes a shorter banner on top, auth card full-width. */
    .login-split { grid-template-columns: 1fr; }
    .login-seam { display: none; }
    .login-visual { order: -1; padding: 36px 32px; }
    .login-visual .login-logo-img { height: 84px; }
    .login-features { width: 100%; margin: 26px 0; }
    .login-visual-foot { width: 100%; }
    .login-auth { padding: 36px 32px; }
    .login-auth::before { display: none; }

    /* Nav bar steps down on tablets before the mobile reflow (match hero padding). */
    .topbar-inner { padding: 18px 32px; }
    .topbar-logo { height: 36px; }
}

@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .topbar-wordmark { display: none; }
    .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
    /* Tighter padding + smaller logo so the taller desktop bar doesn't dominate a phone. */
    .topbar-inner { gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
    .topbar-logo { height: 30px; }
    .topbar-nav { gap: 14px; margin-left: 0; }   /* keep the wrapped mobile layout unchanged */
    .topbar-link { font-size: 13px; }

    .login-visual { padding: 28px 18px; }
    .login-visual .login-logo-img { height: 70px; }
    .login-feature { padding: 13px 18px; }
    .login-feature-title { font-size: 18px; }
    .login-auth { padding: 28px 18px; }
    .trust-row { gap: 10px 16px; }

    .field-row { grid-template-columns: 1fr; gap: 0; }
    .hero { padding: 0 18px; }
    .hero-col { padding: 36px 0 4px; }
    .hero-h1 { font-size: 40px; }
    .hero-subhead { font-size: 17px; }
    .hero-stats { flex-wrap: wrap; gap: 22px 0; }
    .hero-stat { padding-right: 40px; margin-right: 40px; }
    .catalog { padding: 32px 18px; }
    .pgrid { grid-template-columns: 1fr; }
    .pd-related-grid { grid-template-columns: 1fr; }
    .page-inner { padding: 36px 16px 56px; }
    .contact-form { padding: 20px; }
}

/* =========================================================================
   PHASE 2 — logo helper + admin center
   ========================================================================= */

/* ---- Logo helper (shared) --------------------------------------------- */
.logo-wordmark { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.topbar-brand { color: #fff; }
.topbar-brand .logo-wordmark,
.login-logo .logo-wordmark,
.admin-brand .logo-wordmark { color: #fff; }
.login-logo { color: #fff; }
.login-logo-img { height: 72px; width: auto; }
.admin-logo-img { height: 24px; width: auto; }
.footer-logo { display: inline-block; margin-bottom: 16px; }
.footer-logo-img { height: 30px; width: auto; }
.footer-logo .logo-wordmark { color: #ffffff; font-size: 22px; }

/* ---- Admin shell ------------------------------------------------------- */
.admin-body { background: var(--off-white); }
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

.admin-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: var(--black);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 26px 0 0;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
}
.admin-brand { display: block; padding: 0 24px; }
.admin-brand:hover { text-decoration: none; }
.admin-brand-tag {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0 24px;
    margin: 8px 0 22px;
}
.admin-nav { display: flex; flex-direction: column; }
.admin-nav-link {
    color: var(--muted-3);
    padding: 11px 24px;
    font-size: 14px;
    border-left: 2px solid transparent;
    transition: background .12s ease, color .12s ease;
}
.admin-nav-link:hover { color: #fff; background: #141414; text-decoration: none; }
.admin-nav-link.is-active { color: #fff; background: #141414; border-left-color: #fff; font-weight: 500; }
.admin-nav-external { display: flex; align-items: center; gap: 7px; }
.admin-nav-ext-icon { width: 13px; height: 13px; flex: none; opacity: .7; }
.admin-nav-external:hover .admin-nav-ext-icon { opacity: 1; }
.admin-nav-ext-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.admin-sidebar-foot {
    margin-top: auto;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #222;
}
.admin-sidebar-foot a { color: var(--muted-3); font-size: 13px; }
.admin-sidebar-foot a:hover { color: #fff; }

.admin-main { flex: 1 1 auto; min-width: 0; }
.admin-main-inner { max-width: 1600px; margin: 0 auto; padding: 40px; }
.admin-menu-toggle { display: none; }

/* ---- Admin headings / sections ---------------------------------------- */
.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.admin-h1 { font-size: 28px; }
.admin-h2 {
    font-size: 15px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.01em;
}
.admin-h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.admin-subsection { padding: 16px 0; border-top: 1px solid var(--border); }
.admin-subsection:first-of-type { border-top: none; padding-top: 4px; }
.admin-lede { margin: -6px 0 24px; max-width: 72ch; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.admin-section {
    background: #fff;
    border: 1px solid var(--border);
    padding: 24px;
    margin-bottom: 20px;
}
.admin-actions { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.admin-actions-inline { margin-top: 14px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.key-hint { font-size: 11px; color: var(--muted-2); margin-left: 8px; font-weight: 400; }

/* ---- Stat grid --------------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 32px;
}
.stat { background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
a.stat:hover { background: var(--off-white); text-decoration: none; }
.stat-num { font-size: 26px; font-weight: 600; line-height: 1; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* ---- Dashboard: site traffic panel ------------------------------------- */
.traffic-grid { margin-bottom: 20px; }
.traffic-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.traffic-list { min-width: 0; }
.traffic-list .admin-h3 { margin: 0 0 8px; }
.traffic-rows { list-style: none; margin: 0; padding: 0; }
.traffic-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.traffic-row:last-child { border-bottom: none; }
.traffic-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.traffic-row-count { flex: 0 0 auto; color: var(--muted); }
@media (max-width: 640px) {
    .traffic-lists { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: #fff; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-weight: 500;
}
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thumb {
    display: inline-flex;
    width: 40px; height: 40px;
    border: 1px solid var(--border);
    align-items: center; justify-content: center;
    background: var(--off-white);
    overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.thumb-empty { color: var(--muted-3); }

/* ---- Badges ------------------------------------------------------------ */
.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border-2);
    color: var(--muted);
}
.badge-live { border-color: var(--black); color: var(--black); }
.badge-off { color: var(--muted-2); }
.badge-pending { color: var(--black); border-color: var(--black); background: var(--off-white); }
.badge-admin { background: var(--black); color: #fff; border-color: var(--black); }

/* ---- Row actions / link buttons --------------------------------------- */
/* Action cells stay real table cells (never display:flex on a <td>, which pulls
   the cell out of the table layout and pushes the links past the right border).
   Lay the links/forms out inline instead, right-aligned within the cell. */
.row-actions { white-space: nowrap; text-align: right; vertical-align: middle; }
.row-actions > * { display: inline-block; vertical-align: middle; }
.row-actions > * + * { margin-left: 14px; }
.inline-form { display: inline-block; margin: 0; vertical-align: middle; }
.link-action {
    background: none; border: none; padding: 0;
    font-size: 13px; color: var(--black);
    cursor: pointer; font-family: inherit;
    text-decoration: underline;
}
.link-action:hover { color: var(--muted); }
.link-danger { color: var(--black); }

/* Messages: bulk-delete bar + checkbox column */
.bulk-bar {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 14px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--border-2);
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: 13px; color: var(--muted); }
.msg-check-col { width: 1%; white-space: nowrap; text-align: center; vertical-align: middle; }
.msg-check-col input[type="checkbox"] { margin: 0; vertical-align: middle; }

/* ---- Admin form controls ---------------------------------------------- */
.admin-body select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-2);
    padding: 12px 14px;
    color: var(--ink);
}
.admin-body select:focus { outline: none; border-color: var(--black); }
.admin-body input[type="file"] { font-size: 13px; color: var(--muted); }
.check-standalone { margin-top: 28px; }

/* Disclaimer editor rows */
.disc-row-grid { display: grid; grid-template-columns: 1fr 90px auto; gap: 18px; align-items: start; }
.disc-row .field { margin-bottom: 0; }
.disc-sort input { width: 80px; }
.disc-required { margin-top: 28px; margin-bottom: 0; }

/* Product cert checkboxes */
.cert-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cert-checks .check { margin-bottom: 0; }
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Logo manager */
.logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.logo-slot-label { font-weight: 500; font-size: 13px; margin: 0 0 10px; }
.logo-preview {
    border: 1px solid var(--border);
    padding: 20px;
    display: flex; align-items: center; justify-content: center;
    min-height: 92px;
    margin-bottom: 8px;
}
.logo-preview-dark { background: var(--black); }
.logo-preview-light { background: #fff; }
.logo-preview img { max-height: 60px; max-width: 100%; }
.logo-preview-empty { color: var(--muted-2); font-size: 11px; text-align: center; }
.current-image { min-height: auto; padding: 12px; display: inline-flex; }
.current-image img { max-height: 80px; filter: grayscale(1); }

/* Users: accepted disclaimers */
.disc-cell { max-width: 260px; }
.disc-accepted { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); }
.disc-accepted li { margin-bottom: 2px; }
.disc-gone { color: var(--muted-3); text-decoration: line-through; }

/* ---- Admin responsive -------------------------------------------------- */
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .admin-menu-toggle {
        display: block;
        position: sticky; top: 0; z-index: 40;
        width: 100%;
        background: var(--black); color: #fff;
        border: none; padding: 14px 20px; text-align: left;
        font-family: var(--font-mono); font-size: 12px;
        letter-spacing: 0.08em; text-transform: uppercase;
    }
    .admin-sidebar {
        display: none;
        position: static; height: auto; width: 100%; flex-basis: auto;
        padding-bottom: 16px;
    }
    .admin-sidebar.is-open { display: flex; }
    .admin-main-inner { padding: 24px 16px; }
    .admin-head { flex-direction: column; align-items: flex-start; }
    .logo-grid { grid-template-columns: 1fr; }
    .disc-row-grid { grid-template-columns: 1fr; }
    .disc-required, .check-standalone { margin-top: 0; }
    .field-row-3 { grid-template-columns: 1fr; }
}

/* Admin: monospace body textarea (login.body) + inline code in helper notes */
.mono-body { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; }
.admin-body code { font-family: var(--font-mono); font-size: 12px; background: var(--off-white); border: 1px solid var(--border); padding: 1px 5px; }

/* =========================================================================
   Legal page rendered HTML (light background)
   ========================================================================= */
.legal-body-copy > :first-child { margin-top: 0; }
.legal-body-copy h1 { font-size: 26px; margin: 28px 0 12px; }
.legal-body-copy h2 { font-size: 21px; margin: 24px 0 10px; }
.legal-body-copy h3 { font-size: 17px; margin: 20px 0 8px; }
.legal-body-copy p { margin: 0 0 14px; }
.legal-body-copy ul, .legal-body-copy ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body-copy li { margin-bottom: 6px; }
.legal-body-copy strong { font-weight: 600; }
.legal-body-copy a { color: var(--black); text-decoration: underline; }

/* =========================================================================
   WYSIWYG editor (Quill Snow) — monochrome admin overrides
   (style.css loads AFTER quill.snow.css, so these win)
   ========================================================================= */
.rich-field { margin-top: 2px; }
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--border-2); border-radius: 0; }
.ql-toolbar.ql-snow { background: var(--off-white); }
.ql-container.ql-snow { background: #fff; }
.ql-editor {
    min-height: 220px;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
.ql-editor.ql-blank::before { color: var(--muted-2); font-style: normal; left: 14px; }

/* Icons: muted by default, black on hover/active (kills Quill's blue accent) */
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected { color: var(--black); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-picker-item.ql-selected .ql-stroke { stroke: var(--black); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--black); }
.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: var(--border-2); }
.ql-snow .ql-picker-options { border-color: var(--border-2); border-radius: 0; }
.ql-snow a { color: var(--black); }
.ql-snow .ql-tooltip {
    border-color: var(--border-2);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.10);
    color: var(--ink);
}
.ql-snow .ql-tooltip input[type=text] { border-color: var(--border-2); border-radius: 0; }
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove { color: var(--black); }

/* Login background-image preview in admin settings (portrait-ish) */
.bg-preview { min-height: 200px; padding: 0; overflow: hidden; }
.bg-preview img { max-height: 280px; width: auto; filter: none; }

/* Category manager rows: name + colour + order + preview + usage */
.cat-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cat-fields .field { margin-bottom: 0; }
.cat-f-name { flex: 1 1 200px; min-width: 180px; }
.cat-f-color { flex: 0 0 150px; }
.cat-f-sort { flex: 0 0 90px; }
.cat-f-sort input { width: 80px; }
.cat-f-preview, .cat-f-use { flex: 0 0 auto; }
.cat-f-preview .cat-badge { margin-top: 4px; }

/* =========================================================================
   COMMERCE — cart / checkout / confirmation / account / admin orders
   ========================================================================= */

/* Status pills */
.st-pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-blue   { background: #e8eefc; color: #2E5BE0; }
.st-amber  { background: #fdf3e0; color: #b7791f; }
.st-green  { background: #e7f6ee; color: #1b8a4e; }
.st-purple { background: #f0eafb; color: #7d3ec0; }
.st-gray   { background: #ededed; color: #555; }
.ta-right  { text-align: right; }
.order-link { color: #111; font-weight: 700; }

/* Orders list: internal payment-note flag + row quick-actions */
.pay-note-flag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #7d3ec0; background: #f0eafb; padding: 2px 7px; border-radius: 999px; vertical-align: middle; cursor: help; }
.order-status-form { margin: 0; }
.status-select { font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border-2); background: #fff; color: var(--ink); border-radius: 7px; max-width: 160px; }
.status-select:focus { outline: none; border-color: var(--black); }
.order-status-form noscript button { margin-left: 8px; }

/* Admin danger zone (destructive actions) */
.admin-danger { border: 1px solid #f0d4d4; background: #fdf6f6; }
.admin-danger .admin-h2 { color: #a3352b; border-bottom-color: #f0d4d4; }
.order-link:hover { color: var(--accent-blue); }

/* Cart */
.cart { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.cart-line-media { width: 76px; height: 76px; background: linear-gradient(170deg, #f7f7f8, #eeeeef); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-line-media img { max-width: 80%; max-height: 80%; object-fit: contain; }
.cart-line-ph { color: #c9c9cd; font-size: 11px; }
.cart-line-name { margin: 0; font-weight: 600; font-size: 16px; }
.cart-line-meta { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.cart-line-unit { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.cart-line-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.cart-qty-form { display: flex; align-items: center; gap: 8px; }
.cart-qty-label { font-size: 12px; color: var(--muted); margin: 0; }
.cart-qty { width: 64px; text-align: center; border: 1px solid var(--border-2); border-radius: 8px; padding: 7px; }
.cart-line-total { font-weight: 700; font-size: 16px; }
.cart-summary { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: #fff; position: sticky; top: 100px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 15px; }
.cart-summary-total { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.cart-checkout { margin-top: 16px; }
.cart-continue { display: block; text-align: center; margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Discount code UI (cart + checkout) */
.discount-row { color: #1b8a4e; }
.discount-row span { color: #1b8a4e; }
.discount-form { margin: 14px 0 6px; padding: 14px 0 4px; border-top: 1px solid var(--border); }
.checkout-discount { margin-top: 8px; }
.discount-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; color: var(--ink); }
.discount-input-row { display: flex; gap: 8px; }
.discount-input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border-2); padding: 10px 12px; color: var(--ink); text-transform: uppercase; }
.discount-input:focus { outline: none; border-color: var(--black); }
.discount-apply { flex: none; }
.discount-applied { color: #1b8a4e; margin: 8px 0 0; }
.discount-error { margin: 8px 0 0; }
.discount-remove { margin-top: 6px; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.checkout-block { margin-bottom: 24px; }
.checkout-h2 { font-size: 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.checkout-billing.is-hidden { display: none; }
.checkout-summary { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: #fff; position: sticky; top: 100px; }
.summary-lines { margin-bottom: 12px; }
.summary-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; color: var(--muted); gap: 12px; }
.summary-line-name { color: var(--ink); }
.summary-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 6px 0; }
.summary-grand { font-weight: 700; font-size: 17px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.checkout-place { margin-top: 16px; }

/* Google Places autocomplete dropdown (classic widget). Restyled to match the site:
   the widget attaches .pac-container to <body>, so it is never clipped by container
   overflow; a high z-index keeps it above the sticky summary. The "powered by Google"
   row is required attribution, so it is kept and styled around, not hidden. */
.pac-container {
    z-index: 4000;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}
.pac-item {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    border-top: 1px solid #f0f0f0;
    cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover { background: #eef3ff; }
.pac-item-query { font-size: 14px; color: var(--ink); }
.pac-matched { font-weight: 600; }
.pac-icon { margin-top: 2px; }
/* Attribution row spacing (kept per Google terms). */
.pac-logo:after { margin: 8px 14px; opacity: 0.7; }

/* Confirmation + order detail */
.conf-check { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #e7f6ee; color: #1b8a4e; font-size: 26px; margin-bottom: 14px; }
.conf-number { font-size: 16px; margin: 0 0 8px; }
.conf-section { margin-top: 28px; }
.conf-h2 { font-size: 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.conf-item { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; gap: 16px; }
.conf-totals { margin-top: 12px; max-width: 360px; }
.conf-address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.pay-list { margin: 14px 0 0; }
.pay-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.pay-row dt { color: var(--muted); font-weight: 500; margin: 0; }
.pay-row dd { margin: 0; color: var(--ink); }

/* Account order detail: timeline + tracking */
.order-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-head-num { font-size: 0.62em; color: var(--muted); }
.timeline { list-style: none; display: flex; margin: 24px 0; padding: 0; }
.timeline-step { flex: 1; text-align: center; position: relative; }
.timeline-step::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.timeline-step:first-child::before { display: none; }
.timeline-dot { position: relative; z-index: 1; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--border-2); margin: 0 auto 8px; }
.timeline-step.is-done .timeline-dot { background: var(--accent-blue); border-color: var(--accent-blue); }
.timeline-step.is-done::before { background: var(--accent-blue); }
.timeline-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.timeline-step.is-done .timeline-label { color: var(--ink); }
.timeline-date { display: block; color: var(--muted-2); }
.tracking-box { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 8px 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; }
.tracking-box p { margin: 0; }
.btn-sm-blue { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-blue); color: #fff; border: none; border-radius: 9px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; }
.btn-sm-blue:hover { background: #264fc4; text-decoration: none; }
.order-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }

/* Admin orders */
.order-filters { margin-top: 6px; }
.order-cust-email { display: block; color: var(--muted-2); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.admin-order-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.admin-order-actions { flex-wrap: wrap; }
.btn.btn-blue { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.btn.btn-blue:hover { background: #264fc4; }

/* Message reply (admin) */
.msg-reply-portal { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.msg-reply-portal > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); list-style: revert; }
.msg-reply-portal > summary:hover { color: var(--accent-blue); }
.msg-reply-form { margin-top: 14px; }
.msg-reply-form textarea { font-family: inherit; }

/* Admin users: tax-exempt cell */
.tax-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tax-check { margin-bottom: 0; font-size: 12px; white-space: nowrap; gap: 7px; }
.tax-cert { width: 120px; padding: 7px 9px; border: 1px solid var(--border-2); border-radius: 8px; font-size: 12px; }

/* Commerce responsive */
@media (max-width: 900px) {
    .cart, .checkout, .order-cols, .admin-order-cols { grid-template-columns: 1fr; }
    .cart-summary, .checkout-summary { position: static; }
}

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */
.pd { max-width: 1360px; margin: 0 auto; padding: 36px 40px 60px; }
.pd-crumb { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.pd-crumb a { color: var(--muted); }
.pd-crumb a:hover { color: #111; }
.pd-crumb span { color: var(--muted-3); margin: 0 2px; }
.pd-crumb-current { color: #111; }

.pd-top { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }

/* Gallery */
.pd-gallery-card { background: #fff; border: 1px solid #ececec; border-radius: 20px; padding: 26px; }
.pd-main { height: 470px; background: linear-gradient(170deg, #f8f8f9, #efeff1); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-main img { max-width: 88%; max-height: 88%; object-fit: contain; }
.pd-main .pcard-placeholder svg { width: 110px; height: 110px; color: #cdced3; }
.pd-thumbs { display: flex; gap: 11px; margin-top: 16px; flex-wrap: wrap; }
.pd-thumb { width: 82px; height: 82px; border-radius: 11px; border: 1px solid #e4e4e4; background: #f7f7f8; overflow: hidden; padding: 0; cursor: pointer; }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb.is-active { border: 2px solid var(--accent-blue); }

/* Buy box */
.pd-buy .cat-badge { margin-bottom: 14px; }
.pd-title { font-size: 41px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0; color: #111; }
.pd-subtitle { font-size: 17px; color: #7a7a7a; margin: 8px 0 0; }
.pd-price-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 20px 0 0; }
.pd-price-current { font-size: 35px; font-weight: 800; color: var(--accent-blue); }
.pd-price-compare { font-size: 20px; color: #a0a0a0; text-decoration: line-through; }
.pd-save { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-blue); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px; }
.pd-save svg { width: 14px; height: 14px; }
.pd-stock { display: inline-flex; align-items: center; gap: 8px; background: #111; color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin: 16px 0 0; }
.pd-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ED67F; }
.pd-stock-dot.pd-stock-low { background: #f0b429; }
.pd-stock-dot.pd-stock-out { background: #e05a4a; }

.pd-trust { list-style: none; margin: 22px 0; padding: 0; border-top: 1px solid var(--border); }
.pd-trust li { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--ink); }
.pd-trust svg { width: 19px; height: 19px; color: var(--accent-blue); flex: 0 0 auto; }

.pd-size { margin: 4px 0 20px; }
.pd-size-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pd-size-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9a9a9a; }
.pd-size-selected { font-size: 13.5px; color: var(--muted); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Compact rounded pill: label + small inline price, single wrapping row. */
.pd-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; border: 1px solid #dcdcdc; border-radius: 999px; background: #fff; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.pd-chip:hover { border-color: #999; }
.pd-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-chip-size { font-size: 15px; font-weight: 600; color: #111; }
.pd-chip-price { font-size: 11px; color: var(--muted); }
.pd-chip:has(input:checked) { background: #111; border-color: #111; }
.pd-chip:has(input:checked) .pd-chip-size { color: #fff; }
.pd-chip:has(input:checked) .pd-chip-price { color: rgba(255,255,255,.7); }
.pd-chip:has(input:focus-visible) { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.pd-chip.is-out { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* Stepper + Add to cart: two matching rounded pills, sized to content, side by
   side, left-aligned within a capped-width row (not stretched full column). */
.pd-buyrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; max-width: 440px; }

.pd-stepper { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border: 1px solid #e4e4e4; border-radius: 999px; background: #fff; flex: 0 0 auto; }
.pd-step { min-width: 20px; background: none; border: none; font-size: 20px; line-height: 1; color: #6b6b6b; cursor: pointer; padding: 0; transition: color .12s ease; }
.pd-step:hover { color: #111; }
.pd-qty { width: 40px; text-align: center; border: none; background: none; font-size: 15px; font-weight: 700; color: #1a1a1a; -moz-appearance: textfield; appearance: textfield; }
.pd-qty::-webkit-outer-spin-button, .pd-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-qty:focus { outline: none; }

.pd-add { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 44px; background: var(--accent-blue); color: #fff; border: none; border-radius: 999px; font-size: 17px; font-weight: 700; box-shadow: 0 7px 20px rgba(46,91,224,.28); cursor: pointer; transition: background .15s ease; }
.pd-add:hover { background: #264fc4; }

.pd-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.pd-info-card { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 16px 18px; }
.pd-info-card svg { width: 26px; height: 26px; flex: 0 0 auto; }
.pd-flag { width: 30px; height: 20px; border: 1px solid #ddd; border-radius: 2px; }
.pd-info-title { margin: 0; font-size: 14px; font-weight: 600; color: #111; }
.pd-info-sub { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

.pd-disclaimer { background: var(--accent-blue); color: #fff; border-radius: 16px; padding: 22px 26px; font-size: 15.5px; line-height: 1.6; margin: 32px 0; }
.pd-disclaimer a { color: #fff; text-decoration: underline; }

.pd-lower { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; }
.pd-tabs-panel { background: #fff; border: 1px solid #ececec; border-radius: 16px; overflow: hidden; }
.pd-tabs { display: flex; border-bottom: 1px solid var(--border); }
.pd-tab { background: none; border: none; padding: 16px 22px; font-size: 15px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pd-tab.is-active { color: #111; border-bottom-color: var(--accent-blue); }
.pd-tab-body { padding: 24px 26px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.pd-tab-body.is-hidden { display: none; }
.pd-tab-body p { margin: 0 0 14px; }
.pd-tab-body h1, .pd-tab-body h2, .pd-tab-body h3 { margin: 20px 0 10px; }
.pd-tab-body ul, .pd-tab-body ol { margin: 0 0 14px; padding-left: 22px; }
.pd-specs-h { font-size: 16px; margin: 24px 0 12px; }
.pd-specs { margin: 0; }
.pd-spec-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.pd-spec-row dt { color: var(--muted); font-size: 14px; white-space: nowrap; }
.pd-spec-row dd { margin: 0; font-size: 14px; color: #111; text-align: right; flex: 1; }
.pd-spec-row::after { content: ""; }
.pd-spec-row dt { order: 0; }
.pd-spec-row { border-bottom: 1px dotted var(--border-2); }

.pd-accordions { display: flex; flex-direction: column; gap: 12px; }
.pd-acc { background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; }
.pd-acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 22px; background: none; border: none; font-size: 16px; font-weight: 600; color: #111; text-align: left; }
.pd-acc-chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s ease; flex: 0 0 auto; }
.pd-acc-head[aria-expanded="true"] .pd-acc-chev { transform: rotate(180deg); }
.pd-acc-inner { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.pd-acc-inner p { margin: 0 0 12px; }
.pd-acc-inner p:last-child { margin-bottom: 0; }

/* "You may also like" — reuses the catalog .pcard component */
.pd-related { margin-top: 56px; }
.pd-related-h { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #111; margin: 0 0 30px; }
.pd-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

/* Admin: variant / spec / image rows.
   Header and rows share ONE column template so every label sits above its field.
   minmax(0,…) + width:100% on the fields stops inputs from blowing out their track
   (which previously squashed the Stock select into a thin vertical sliver). */
.var-head, .var-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 62px 48px 74px;
    gap: 8px;
    align-items: center;
}
.var-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin: 8px 0 6px; }
.var-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.var-row { margin-bottom: 8px; }
.var-row > input, .var-row > select, .var-compare-wrap { min-width: 0; width: 100%; box-sizing: border-box; }
.var-row > input, .var-row > select { padding: 9px 10px; }
.var-row .check { margin-bottom: 0; font-size: 12px; justify-self: center; }
.var-row .var-remove { justify-self: start; white-space: nowrap; }

/* Compare-at cell holds the field plus the per-row SALE flag (Compare-at > Price). */
.var-compare-wrap { position: relative; }
.var-compare-wrap .var-compare { width: 100%; }
.var-sale {
    position: absolute;
    top: -7px; right: -5px;
    background: #E23744;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    padding: 3px 5px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.var-sale[hidden] { display: none; }

#add-variant, #add-spec { margin-top: 10px; }
.spec-erow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 74px 74px; gap: 8px; align-items: center; margin-bottom: 8px; }
.spec-erow > input { min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 10px; }
.spec-erow .var-remove { justify-self: start; white-space: nowrap; }
.img-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.img-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px auto; gap: 14px; align-items: center; }
.img-row .field input { min-width: 0; width: 100%; box-sizing: border-box; }
.img-thumb { width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--off-white); display: flex; align-items: center; justify-content: center; }
.img-thumb img { width: 100%; height: 100%; object-fit: contain; }
.img-row .field { margin-bottom: 0; }
.img-del { margin-bottom: 0; font-size: 12px; }

/* Product detail responsive */
@media (max-width: 960px) {
    .pd { padding: 24px 18px 48px; }
    .pd-top, .pd-lower, .pd-info-cards { grid-template-columns: 1fr; gap: 28px; }
    .pd-title { font-size: 32px; }
    .pd-main { height: 360px; }
    .pd-related-h { font-size: 27px; }
    .pd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .var-head { display: none; }
    .var-row, .spec-erow { grid-template-columns: 1fr 1fr; }
    .img-row { grid-template-columns: 64px 1fr; }
}

/* =========================================================================
   INVOICE (confirmation embed + download)
   ========================================================================= */
.invoice-block { border: 1px solid var(--border); border-radius: 14px; background: var(--white); padding: 20px 22px; }
.invoice-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.invoice-head .conf-h2 { margin: 0; }
.invoice-dl { white-space: nowrap; }
.invoice-embed { display: block; width: 100%; height: 560px; margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; background: #f4f6f9; }
.invoice-fallback { padding: 24px; text-align: center; color: var(--muted); }
@media (max-width: 640px) {
    .invoice-embed { height: 420px; }
    .invoice-head { justify-content: flex-start; }
}

/* =========================================================================
   PRE-LAUNCH CLEANUP — forgot link + one-time success flash
   ========================================================================= */
.auth-forgot { margin: 12px 0 0; text-align: center; font-size: 13.5px; }
.auth-forgot a { color: var(--accent-blue); text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }

.topbar-flash {
    background: #e7f6ee;
    color: #1b7a44;
    border-bottom: 1px solid #cde9d8;
    text-align: center;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
}

/* =========================================================================
   CONTACT FORM — select, helper text, compliance notice; admin msg detail
   ========================================================================= */
.field select,
.contact-form select {
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--border-2);
    padding: 12px 40px 12px 14px;
    color: var(--ink);
    font-family: inherit;
    font-size: inherit;
    transition: border-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px;
}
.field select:focus,
.contact-form select:focus { outline: none; border-color: var(--black); }

.field-help { color: var(--muted-2); font-size: 12.5px; margin: 6px 0 0; line-height: 1.45; }

/* Compliance notice: a calm neutral panel (reads as a notice, not an error).
   Full hairline border on all four sides, neutral grey fill, body text colour. */
.contact-disclaimer {
    margin: 22px 0;
    padding: 15px 18px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Admin message detail */
.detail-list { margin: 0; }
.detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }
.detail-row dt { color: var(--muted); font-size: 13px; }
.detail-row dd { margin: 0; color: var(--ink); }
.detail-message { line-height: 1.65; color: var(--ink); }
@media (max-width: 560px) { .detail-row { grid-template-columns: 1fr; gap: 2px; } }

/* =========================================================================
   ADMIN — user management column
   ========================================================================= */
.user-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.user-manage .inline-form { margin: 0; }
.user-setpass { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.user-setpass input { width: 128px; padding: 6px 9px; font-size: 12px; border: 1px solid var(--border-2); border-radius: 6px; }

/* ===== QR sales + inventory (v50) ===================================== */
.st-red { background: #fdecec; color: #c5311f; }
.stat-warn { color: #c5311f; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.break { word-break: break-all; }

/* Admin inventory table */
.inv-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.inv-form label { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.inv-in { width: 66px; padding: 6px 8px; border: 1px solid var(--border-2); background: #fff; color: var(--ink); }
.inv-qr { margin-top: 8px; }
.inv-qr img { border: 1px solid var(--border); background: #fff; }

/* Salesperson area (mobile-first) */
.sales-body { background: #f4f6f9; }
.sales-topbar { background: #1c1c1c; color: #fff; }
.sales-topbar-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.sales-brand { font-weight: 700; font-size: 16px; }
.sales-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7ea0ff; margin-left: 6px; }
.sales-signout { color: rgba(255,255,255,0.7); font-size: 14px; }
.sales-signout:hover { color: #fff; }
.sales-main { max-width: 1240px; margin: 0 auto; padding: 18px; }
.sales-head { margin: 6px 0 16px; }
.sales-h1 { font-size: 22px; margin: 0 0 4px; }
.sales-list { display: grid; gap: 14px; }
/* Salespeople may use a laptop: single column on phones, two columns >900px,
   three >1400px. Cards stay full-width below 768px as before. */
@media (min-width: 900px)  { .sales-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .sales-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sales-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.sales-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sales-prod { font-weight: 600; margin: 0; }
.sales-size { color: var(--muted); margin: 2px 0 0; font-size: 13px; }
.sales-price { font-size: 18px; font-weight: 700; }
.sales-card-meta { margin: 10px 0; }
.sales-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sales-qr { margin-top: 12px; text-align: center; }
.sales-qr img { width: 180px; height: 180px; border: 1px solid var(--border); background: #fff; }
.sales-confirm { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.sales-confirm-row { display: flex; gap: 10px; margin-bottom: 10px; }
.sales-qty { width: 80px; padding: 12px; border: 1px solid var(--border-2); text-align: center; }
.sales-method { flex: 1; padding: 12px; border: 1px solid var(--border-2); background: #fff; }
.sales-complete { width: 100%; }

/* Public pay page (matte black, mobile-first) */
.pay-page { background: #0e0e10; color: #fff; }
.pay-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pay-card { position: relative; width: 100%; max-width: 420px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 15px; padding: 28px 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.pay-glow { position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; pointer-events: none;
    background: radial-gradient(circle, rgba(46,91,224,0.5), transparent 66%); }
.pay-eyebrow { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; color: #7ea0ff; margin: 0 0 10px; }
.pay-product { position: relative; font-size: 26px; font-weight: 800; margin: 0 0 4px; line-height: 1.2; }
.pay-size { position: relative; color: rgba(255,255,255,0.6); margin: 0 0 18px; }
.pay-price-row { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pay-unit { font-size: 19px; font-weight: 700; }
.pay-each { color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 400; }
.pay-qty { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pay-qty-label { color: rgba(255,255,255,0.7); font-size: 14px; }
.pay-stepper { display: flex; align-items: center; gap: 4px; }
.pay-step { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
    color: #fff; border-radius: 10px; font-size: 20px; cursor: pointer; }
.pay-step:hover { background: rgba(255,255,255,0.12); }
.pay-qty-input { width: 54px; height: 42px; text-align: center; background: transparent; border: none; color: #fff; font-size: 18px; font-weight: 700; }
.pay-total-row { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 18px;
    font-weight: 700; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); margin-bottom: 18px; }
.pay-total { color: #7ea0ff; }
.pay-methods { position: relative; display: grid; gap: 10px; }
.pay-btn { display: block; text-align: center; padding: 15px; border-radius: 11px; font-size: 16px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; }
.pay-venmo { background: #3d95ce; color: #fff; }
.pay-venmo:hover { background: #3484ba; text-decoration: none; }
.pay-zelle { background: #6d1ed4; color: #fff; }
.pay-zelle:hover { background: #5f19bb; }
.pay-zelle-panel { position: relative; margin-top: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; padding: 16px; }
.pay-zelle-h { font-weight: 700; margin: 0 0 10px; }
.pay-zelle-dl { margin: 0 0 12px; }
.pay-zelle-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.pay-zelle-dl dt { color: rgba(255,255,255,0.55); }
.pay-zelle-dl dd { margin: 0; text-align: right; color: #fff; }
.pay-copy { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: 9px; padding: 10px 14px; font-size: 13px; cursor: pointer; }
.pay-foot, .pay-oos { position: relative; color: rgba(255,255,255,0.55); font-size: 13px; margin-top: 16px; }
.pay-page .muted { color: rgba(255,255,255,0.55); }

/* =========================================================================
   Inventory manager rework + internal-name chip (admin/inventory + /sales)
   Monochrome, #2E5BE0 accent, #1c1c1c save bar, Inter labels, mono numbers.
   ========================================================================= */

.inv-search-row, .sales-search-row { margin: 0 0 14px; }
.inv-search, .sales-search {
    width: 100%; max-width: 420px; padding: 9px 12px;
    border: 1px solid var(--border-2); background: #fff; color: var(--ink);
    font-family: var(--font-ui); font-size: 13.5px;
}
.sales-search { max-width: none; }
.inv-search:focus, .sales-search:focus { outline: none; border-color: var(--accent-blue); }

.inv-table td { vertical-align: middle; }
.inv-prod strong { font-family: var(--font-ui); font-weight: 600; }

/* Internal-name chip — shared by admin inventory and the sales page. */
.iname-chip, .iname-chip-static {
    display: inline-block; margin-left: 6px; padding: 2px 8px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.5;
    color: #fff; background: var(--accent-blue); border: none; border-radius: 3px;
    vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; cursor: pointer;
}
.iname-chip:hover { background: #204bc9; }
.iname-chip-static { cursor: default; }
.iname-add {
    display: inline-block; margin-left: 6px; padding: 2px 8px;
    font-family: var(--font-ui); font-size: 11px; color: var(--accent-blue);
    background: none; border: 1px dashed var(--accent-blue); border-radius: 3px; cursor: pointer;
}
.iname-add:hover { background: rgba(46, 91, 224, 0.08); }
.iname-input {
    margin-left: 6px; width: 190px; padding: 3px 7px; font-size: 12px;
    border: 1px solid var(--accent-blue); background: #fff; color: var(--ink);
}
.iname-input:focus { outline: none; }

/* Stock stepper (one field, minus/plus either side). */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-2); }
.stepper .stock-in {
    width: 58px; text-align: center; padding: 6px 4px;
    border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); background: #fff;
}
.stepper .stock-in:focus { outline: none; background: #f4f7ff; }
.step-btn {
    width: 30px; border: none; background: #fff; color: var(--ink);
    font-size: 16px; line-height: 1; cursor: pointer; font-family: var(--font-mono);
}
.step-btn:hover { background: var(--off-white); }
.inv-dot {
    display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px;
    vertical-align: middle;
}

/* Icon buttons (QR / threshold edit). */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid var(--border-2); background: #fff;
    color: var(--ink); cursor: pointer; margin-left: 4px;
}
.icon-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* Detail rows: QR panel + threshold editor. */
.inv-detail > td { background: var(--off-white); }
.qr-panel { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr-panel img { border: 1px solid var(--border); background: #fff; }
.qr-panel-body { display: flex; flex-direction: column; gap: 10px; }
.qr-url { font-size: 12px; color: var(--muted); max-width: 360px; }
.qr-panel-actions { display: flex; gap: 8px; }
.inv-edit-grid { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.thr-edit { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-family: var(--font-ui); }
.thr-in, .cost-in { padding: 6px 8px; border: 1px solid var(--border-2); background: #fff; color: var(--ink); font-family: var(--font-mono); }
.thr-in { width: 66px; }
.cost-in { width: 90px; }
.thr-in:focus, .cost-in:focus { outline: none; border-color: var(--accent-blue); }

/* Changed-row wash (light #2E5BE0). */
.inv-row-dirty > td { background: rgba(46, 91, 224, 0.06); }

/* Sticky save bar — only shown by JS when something changed. */
.inv-savebar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 14px; padding: 14px 18px; background: var(--surface-dark); color: #fff;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}
.inv-savebar-count { font-family: var(--font-mono); font-size: 13px; color: #fff; }
.inv-savebar-actions { display: flex; gap: 10px; }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); }

/* =========================================================================
   Responsive: inventory + sales QR thumbnail, and mobile cards (<768px).
   No horizontal scroll at any width down to 320px.
   ========================================================================= */

/* Shared QR thumbnail (inventory desktop, inventory mobile, sales). */
.qr-wrap { display: inline-block; vertical-align: top; }
.qr-thumb {
    display: block; width: 46px; height: 46px; max-width: 100%;
    border: 1px solid var(--border); background: #fff; cursor: pointer;
}
.qr-thumb-url { display: none; margin: 6px 0 0; font-size: 11px; color: var(--muted); word-break: break-all; }

/* Desktop-first visibility helpers. */
.inv-mobile-only { display: none; }
.inv-cost-mobile, .inv-stockline { display: none; }
.inv-actions .qr-wrap { margin-right: 8px; }

/* Stat cards: two-up on small screens instead of one very tall column. */
@media (max-width: 767px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .stat { padding: 14px; }
    .stat-num { font-size: 22px; }
}

/* ---- Sales cards: QR always visible on the right, tap to expand. ---- */
.sales-card-top { flex-wrap: wrap; }
.sales-card-main { min-width: 0; flex: 1 1 auto; }
.sales-price { margin-top: 6px; font-weight: 600; }
.sales-size { overflow-wrap: anywhere; }
.sales-card .qr-thumb { width: 74px; height: 74px; }
.sales-card .qr-wrap { flex: 0 0 auto; text-align: center; }
.sales-card .qr-wrap.qr-open { flex-basis: 100%; }
.sales-card .qr-wrap.qr-open .qr-thumb { width: 220px; max-width: 100%; height: auto; margin: 8px auto 0; }
.sales-card .qr-wrap.qr-open .qr-thumb-url { display: block; text-align: center; }
.sales-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Inventory: table becomes one card per variant below 768px. ---- */
@media (max-width: 767px) {
    .inv-mobile-only { display: block; }
    .inv-desktop-only { display: none !important; }

    /* Drop the scrolling shell for the INVENTORY table only (its content reflows to
       fit). The in-person sales-log table keeps its own .table-wrap scroll so its
       columns never push the page wide. */
    .inv-table-wrap { overflow: visible; border: none; background: transparent; }
    .inv-table, .inv-table > tbody { display: block; width: 100%; }
    .inv-table > thead { display: none; }

    .inv-table tr.inv-row {
        display: block; position: relative;
        border: 1px solid var(--border); border-radius: 12px; background: #fff;
        padding: 14px; margin-bottom: 12px;
    }
    .inv-table tr.inv-row > td { display: block; padding: 0; border: none; text-align: left; }

    /* Product name + alias (leave room for the QR thumbnail top-right). */
    .inv-prod { padding-right: 86px; }
    .inv-prod strong { font-size: 16px; }
    .iname-input { width: 100%; margin: 6px 0 0; }

    /* Size wraps, never widens the card. */
    .inv-size-cell { margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }

    /* Price line, then the combined muted "cost $X · NN%" line. */
    .inv-table tr.inv-row > td:nth-child(3) { margin-top: 8px; font-size: 16px; font-weight: 600; }
    .inv-cost-desktop, .inv-margin-cell { display: none; }
    .inv-cost-cell { margin-top: 4px; }
    .inv-cost-mobile { display: inline; font-size: 12px; color: var(--muted); }

    /* Stepper: 44px touch targets, input flexes and never overflows. */
    .inv-stock-cell { margin-top: 12px; }
    .stepper { display: flex; width: 100%; max-width: 260px; }
    .stepper .step-btn { width: 44px; min-width: 44px; height: 44px; font-size: 20px; }
    .stepper .stock-in { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; font-size: 16px; }
    .inv-dot-desktop { display: none; }
    .inv-stockline { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
    .inv-stockline.is-out { color: #c5311f; }
    .inv-stockline.is-low { color: #b7791f; }

    /* Actions: QR pinned top-right; Share/Edit full-width buttons below. */
    .inv-actions { margin-top: 12px; }
    .inv-actions .qr-wrap { position: absolute; top: 14px; right: 14px; width: 74px; margin: 0; }
    .inv-actions .qr-thumb { width: 74px; height: 74px; }
    .inv-cardbtns { display: flex; gap: 8px; }
    .inv-cardbtns .btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* Expanded QR: full-width block, ~220px, pay URL beneath. */
    .inv-row.qr-open { padding-right: 14px; }
    .inv-row.qr-open .inv-prod { padding-right: 0; }
    .inv-row.qr-open .inv-actions .qr-wrap { position: static; width: 100%; margin-top: 12px; text-align: center; }
    .inv-row.qr-open .inv-actions .qr-thumb { width: 220px; max-width: 100%; height: auto; margin: 0 auto; }
    .inv-row.qr-open .qr-thumb-url { display: block; text-align: center; }

    /* QR detail row unused on mobile (QR is inline). */
    .inv-table tr.inv-detail[id^="qr-"] { display: none !important; }

    /* Edit panel: attached card-style block, stacked fields. */
    .inv-table tr.inv-detail[id^="edit-"] {
        display: block; border: 1px solid var(--border); border-radius: 12px;
        background: var(--off-white); padding: 14px; margin: -6px 0 14px;
    }
    .inv-table tr.inv-detail[id^="edit-"][hidden] { display: none !important; }
    .inv-table tr.inv-detail > td { display: block; padding: 0; border: none; }
    .inv-edit-grid { flex-direction: column; align-items: stretch; gap: 12px; }
    .inv-edit-grid .thr-edit { justify-content: space-between; }
    .cost-in, .thr-in { min-height: 40px; }
    .inv-edit-print { margin-top: 12px; }
    .inv-edit-print .btn { min-height: 44px; }

    .inv-savebar { flex-wrap: wrap; }
    .inv-search { max-width: none; }
}

/* =========================================================================
   Pricing calculator (/admin/pricing). Two stacked cards, single column,
   ~420px, centered. Monochrome + #2E5BE0 accent, Inter labels, mono numbers.
   ========================================================================= */

/* Below 768px: single ~420px centered column (unchanged). */
.pricing-wrap { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* 768–900px: single column at full content width. */
@media (min-width: 768px) { .pricing-wrap { max-width: none; } }
/* Above 900px: two equal-width, equal-height columns (competitor | pack). */
@media (min-width: 900px) {
    .pricing-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
}
.pricing-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.pricing-h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.pricing-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }

.pricing-field { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); font-family: var(--font-ui); }
.pricing-in {
    display: block; width: 100%; margin-top: 5px; min-height: 40px; padding: 8px 10px;
    border: 1px solid var(--border-2); background: #fff; color: var(--ink); font-size: 15px;
}
.pricing-in:focus { outline: none; border-color: var(--accent-blue); }
select.pricing-in { font-family: var(--font-ui); }

.pricing-slabel { display: flex; justify-content: space-between; align-items: baseline; }
.pricing-slabel output { color: var(--ink); font-size: 13px; }
.pricing-slider input[type="range"] { width: 100%; margin-top: 8px; min-height: 24px; accent-color: var(--accent-blue); }

.pricing-result {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 8px 0 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.pricing-result-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pricing-suggested { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--accent-blue); }

.pricing-out { margin: 0 0 14px; }
.pricing-out > div, .pricing-highlight > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.pricing-out dt, .pricing-highlight dt { color: var(--muted); min-width: 0; }
.pricing-out dd, .pricing-highlight dd { margin: 0; font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }

.pricing-highlight {
    margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
    background: rgba(46, 91, 224, 0.06); border: 1px solid rgba(46, 91, 224, 0.20);
}
.pricing-highlight dd { font-weight: 600; }

.pricing-apply { width: 100%; min-height: 44px; }
.pricing-btnrow { display: flex; gap: 8px; }
.pricing-btnrow .btn { flex: 1 1 0; min-height: 44px; }

/* =========================================================================
   Login redesign — single centered column on the dark bg, animated blue glows
   behind the WHOLE page, translucent card, Google button. All under .login-page
   so nothing here touches other screens. (The old .login-split/.login-visual
   rules go unused.)
   ========================================================================= */

.login-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    overflow: hidden;              /* clip the off-canvas glow blobs -> no scroll */
    background: #0d0d0f;
}
/* Reuse the existing .login-glow-1/2 blobs, but sit them behind the whole page. */
.login-page .login-glow { position: absolute; z-index: 0; }

.login-single {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.login-single .login-logo { align-self: center; display: inline-block; }
.login-single .login-logo-img { height: 62px; width: auto; }
.login-single .logo-wordmark { color: #fff; font-size: 26px; letter-spacing: .01em; }

/* Translucent card so the glows show through. */
.login-page .auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    background: rgba(18, 21, 29, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 26px 24px;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* Fields on the dark card (the old dark styles were scoped to .login-auth). */
.login-page .field { margin-bottom: 16px; }
.login-page .field label { display: block; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.80); margin-bottom: 8px; }
.login-page .field label .hint { color: rgba(255, 255, 255, 0.38); font-weight: 400; }
.login-page .input-icon input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 13px 44px;
    color: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.login-page .input-icon input::placeholder { color: rgba(255, 255, 255, 0.30); }
.login-page .input-icon input:focus { outline: none; border-color: rgba(46, 91, 224, 0.70); background: rgba(255, 255, 255, 0.06); }
.login-page .field-error { color: #f0a58f; }
.login-single :focus-visible { outline: 2px solid rgba(46, 91, 224, 0.75); outline-offset: 2px; }

/* Google button (white, brand G). Disabled state on the Create-account tab. */
.login-page .btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%;
    background: #fff; color: #1f2328;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 15.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .15s ease, opacity .15s ease;
}
.login-page .btn-google:hover { background: #f2f3f5; text-decoration: none; }
.login-page .btn-google[disabled], .login-page .btn-google:disabled { opacity: 0.45; cursor: not-allowed; }
.login-page .google-g { width: 18px; height: 18px; flex: 0 0 auto; }
.login-page .google-hint { margin: 9px 2px 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.42); text-align: center; }

.login-page .or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: rgba(255, 255, 255, 0.35); font-size: 12px; }
.login-page .or-divider::before, .login-page .or-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.10); }

/* Agreements on the dark card. */
.login-page .disclaimers {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 16px;
    margin: 4px 0 18px;
    background: rgba(255, 255, 255, 0.02);
}
.login-page .disclaimers legend {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40); padding: 0; margin-bottom: 6px;
}
.login-page .check { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: rgba(255, 255, 255, 0.70); line-height: 1.5; margin-bottom: 11px; }
.login-page .check:last-of-type { margin-bottom: 0; }
.login-page .check input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent-blue); }
.login-page .req { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.34); text-transform: uppercase; margin-left: 4px; }

/* Optional agreements: dimmer full-width row + a small "Optional" tag after the text. */
.login-page .ag-optional { color: rgba(255, 255, 255, 0.48); }
.login-page .ag-optlabel {
    font-style: normal; margin-left: 6px; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.34);
}

.login-page .auth-forgot { text-align: center; margin: 14px 0 0; font-size: 13.5px; }
.login-page .auth-forgot a { color: rgba(255, 255, 255, 0.60); text-decoration: underline; text-underline-offset: 2px; }
.login-page .auth-forgot a:hover { color: #fff; }

.login-page .login-trust {
    margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.42);
}
.login-page .login-trust-dot { color: rgba(255, 255, 255, 0.22); }

/* Mobile: full width, taller touch targets, optional agreements collapse. */
@media (max-width: 640px) {
    .login-single { max-width: none; padding: 32px 18px; gap: 18px; }
    .login-single .login-logo-img { height: 52px; }
    .login-page .auth-card { padding: 22px 18px; border-radius: 16px; }
    .login-page .input-icon input { padding-top: 14px; padding-bottom: 14px; min-height: 48px; }
    .login-page .btn-auth { min-height: 50px; }
    .login-page .btn-google { min-height: 48px; }
}

/* Desktop card width. The column carries 20px side padding, so the card lands at
   max-width - 40px: 560 -> ~520px, 660 -> ~620px. (Below 640px stays full width.) */
@media (min-width: 641px) {
    .login-single { max-width: 560px; }
    .login-single .login-logo-img { height: 76px; }
    .login-single .logo-wordmark { font-size: 30px; }
}
@media (min-width: 1025px) {
    .login-single { max-width: 660px; }
    .login-single .login-logo-img { height: 90px; }
    .login-single .logo-wordmark { font-size: 34px; }
    .login-page .auth-card { padding: 32px; }
    /* Agreements stay a single full-width column at every width (no two-column grid). */
}

/* =========================================================================
   Announcement bar (signed-in storefront) + cart lock UI. #2E5BE0 accent,
   Inter labels, JetBrains Mono numbers. Nothing here affects login/pay/admin
   layout beyond the opt-in classes.
   ========================================================================= */

.announce { width: 100%; height: 38px; overflow: hidden; display: flex; align-items: center; background: #2E5BE0; color: #fff; }
.announce-still { width: 100%; text-align: center; padding: 0 16px; }
.announce-track { display: flex; align-items: center; white-space: nowrap; will-change: transform; animation-name: announce-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
.announce-set { display: flex; align-items: center; flex: 0 0 auto; }
.announce-msg { font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 0 28px; }
@keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion: no scroll. Drop the duplicate set and centre the messages. */
@media (prefers-reduced-motion: reduce) {
    .announce-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; }
    .announce-set + .announce-set { display: none; }
}
@media (max-width: 640px) {
    .announce { height: 34px; }
    .announce-msg { font-size: 12px; padding: 0 18px; }
}

/* Stick the bar + nav together as one unit. The storefront bar (NOT the admin
   preview) pins to the very top; the nav — already position:sticky top:0 — is
   offset down by the bar's exact height so it sits flush beneath it, no gap/overlap.
   The `.announce + .topbar` offset only applies when the bar is actually present
   (adjacent sibling), so with the bar off the nav keeps top:0. z-index sits at/above
   the nav's 50 so page content never scrolls over either. */
.announce:not(.ann-preview) { position: sticky; top: 0; z-index: 51; }
.announce:not(.ann-preview) + .topbar { top: 38px; }

/* Anchor jumps (e.g. #catalog) clear the sticky nav, plus the bar when it's shown,
   so nothing lands hidden behind the taller sticky block. */
html { scroll-padding-top: 96px; }
html:has(.announce:not(.ann-preview)) { scroll-padding-top: 134px; }

@media (max-width: 640px) {
    .announce:not(.ann-preview) + .topbar { top: 34px; }
    html { scroll-padding-top: 116px; }
    html:has(.announce:not(.ann-preview)) { scroll-padding-top: 150px; }
}

/* Cart-lock inline note (fades in/out beside the Add-to-cart button). */
.cart-lock-note { display: inline-block; margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-blue); opacity: 0; transition: opacity .25s ease; }
.cart-lock-note.is-show { opacity: 1; }

/* Catalog notice (e.g. the cart-lock redirect message). */
.catalog-flash { max-width: 760px; margin: 16px auto 0; padding: 12px 18px; background: var(--off-white); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-size: 14px; text-align: center; }

/* Settings admin: store availability + announcement editor. */
.is-disabled { opacity: 0.45; }
.is-disabled input { pointer-events: none; }
/* Dim-only: visually muted but fully interactive (e.g. the lock message field). */
.is-dimmed { opacity: 0.55; }
.ann-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ann-row input[type="text"] { flex: 1 1 auto; }
.ann-speed { width: 100%; max-width: 420px; accent-color: var(--accent-blue); }
.ann-preview { height: 38px; border-radius: 8px; margin-top: 6px; }
.ann-preview .ann-still { width: 100%; justify-content: center; }
.ann-preview.is-empty { background: var(--off-white); border: 1px dashed var(--border-2); color: var(--muted); }
.ann-preview.is-empty .announce-track { padding: 0 14px; font-size: 12.5px; }

/* =========================================================================
   Settings: tabbed layout + search + save bar. Presentation only; the single
   form and every field are unchanged. Monochrome, #2E5BE0 active-tab underline.
   ========================================================================= */

.settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.settings-search-wrap { flex: 0 1 320px; }
.settings-search { width: 100%; padding: 9px 12px; border: 1px solid var(--border-2); background: #fff; color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; }
.settings-search:focus { outline: none; border-color: var(--accent-blue); }

.settings-tabs { display: flex; gap: 4px; margin: 4px 0 26px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings-tab { flex: 0 0 auto; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 11px 14px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; }
.settings-tab:hover { color: var(--ink); }
.settings-tab.is-active { color: var(--ink); border-bottom-color: var(--accent-blue); font-weight: 600; }

.settings-panel { display: none; }
.settings-panel.is-active { display: block; }
.settings-panel > .admin-h3 { margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; }
.settings-panel > .admin-h3:first-child { margin-top: 4px; padding-top: 0; border-top: none; }

.settings-savebar { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.settings-unsaved { font-size: 12px; color: var(--muted-2); }
.settings-unsaved.is-dirty { color: var(--accent-blue); font-weight: 600; }
.settings-search-empty { color: var(--muted); font-size: 14px; margin: 4px 0 20px; }

/* Search mode: reveal every panel, drop the chrome, show only matches + a tab badge. */
.settings-searching .settings-panel { display: block; }
.settings-searching .settings-panel > h3,
.settings-searching .settings-panel > p { display: none; }
.settings-searching .search-hidden { display: none !important; }
.search-tab-badge { display: none; }
.settings-searching .search-tab-badge { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 3px; background: rgba(46, 91, 224, 0.10); color: var(--accent-blue); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 767px) {
    .settings-head { flex-direction: column; align-items: stretch; }
    .settings-search-wrap { flex: 1 1 auto; }
    .settings-savebar { flex-wrap: wrap; }
    .field-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Responsive admin tables. Desktop: clip long free-text columns (email,
   message) so the table fits its container — full text stays in the title
   attribute. Below 768px: reflow to cards (same treatment as /admin/inventory)
   via a shared .admin-cards class so all six tables behave identically.
   ========================================================================= */

.cell-clip { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-clip.cell-clip-wide { max-width: 210px; }
/* Slightly tighter cell padding on the wide reflow tables so, with the clipped
   columns, they fit their container on desktop (the .table-wrap keeps a contained
   scroll as a fallback at the narrowest widths — the page body never scrolls). */
.admin-cards > thead > tr > th,
.admin-cards > tbody > tr > td { padding: 11px 11px; }

@media (max-width: 767px) {
    .admin-cards-wrap { overflow: visible; border: none; background: transparent; }
    table.admin-cards, table.admin-cards > tbody { display: block; width: 100%; }
    table.admin-cards > thead { display: none; }
    table.admin-cards > tbody > tr {
        display: block; background: #fff; border: 1px solid var(--border);
        border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
    }
    table.admin-cards > tbody > tr > td {
        display: flex; gap: 14px; justify-content: space-between; align-items: baseline;
        padding: 7px 0; border: none; border-bottom: 1px solid var(--border);
        text-align: right; font-size: 13.5px; white-space: normal;
    }
    table.admin-cards > tbody > tr > td:last-child { border-bottom: none; }
    table.admin-cards > tbody > tr > td::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap;
    }
    /* Cells with no label, or block cells (actions, dropdowns, rich content) go full-width. */
    table.admin-cards > tbody > tr > td[data-label=""]::before { content: none; }
    table.admin-cards > tbody > tr > td.card-block {
        display: block; text-align: left; padding-top: 10px;
    }
    table.admin-cards > tbody > tr > td.card-block::before {
        display: block; margin-bottom: 5px;
    }
    table.admin-cards > tbody > tr > td.card-block[data-label=""]::before { display: none; }
    /* In a card the clipped columns show in full (wrap, no ellipsis). */
    table.admin-cards .cell-clip { max-width: none; overflow: visible; white-space: normal; text-align: right; }
    table.admin-cards td.card-block .cell-clip { text-align: left; }
    /* Action controls stay reachable: lay them out, never clipped off an edge. */
    table.admin-cards .row-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; }
    table.admin-cards .status-select { max-width: 100%; }
    table.admin-cards .nowrap { white-space: normal; }
}

@media (max-width: 767px) {
    /* Users: keep the multi-action Manage stack and the Tax form full-width so
       every control (Make admin, Deactivate, Send reset, Set password, Delete)
       stays reachable — never squeezed into a "label: value" row. */
    table.admin-cards > tbody > tr > td.user-manage,
    table.admin-cards > tbody > tr > td.tax-cell {
        display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
    }
    table.admin-cards .user-setpass { width: 100%; }
    table.admin-cards .user-setpass input { flex: 1 1 auto; width: auto; }
    table.admin-cards .tax-form { width: 100%; }
}

@media (min-width: 768px) {
    /* Pin the action column to the right so Delete (messages), the status dropdown
       (orders), and the whole Manage column (users) stay visible even if a wide table
       scrolls inside its own container on a narrow desktop. The page never scrolls. */
    .admin-cards th.col-actions,
    .admin-cards td.col-actions {
        position: sticky; right: 0; z-index: 2; background: #fff;
        box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.10);
    }
}

/* =========================================================================
   Content editor: group sidebar + fields panel + search. Presentation only;
   the single form and every field are unchanged. #2E5BE0 accent for the
   active group; JetBrains Mono for keys/counts.
   ========================================================================= */

.content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.content-search-wrap { flex: 0 1 340px; }
.content-search { width: 100%; padding: 9px 12px; border: 1px solid var(--border-2); background: #fff; color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; }
.content-search:focus { outline: none; border-color: var(--accent-blue); }
.content-search-empty { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

.content-layout { display: flex; gap: 28px; align-items: flex-start; }

.content-groups {
    flex: 0 0 190px; width: 190px; position: sticky; top: 20px;
    display: flex; flex-direction: column; gap: 2px;
    max-height: calc(100vh - 40px); overflow-y: auto;
}
.content-group {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent;
    padding: 8px 12px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); cursor: pointer;
}
.content-group:hover { color: var(--ink); background: var(--off-white); }
.content-group.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--accent-blue); background: rgba(46, 91, 224, 0.06); }
.content-group-name { text-transform: capitalize; }
.content-group-count { flex: 0 0 auto; font-size: 11px; color: var(--muted-2); background: var(--off-white); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.content-group.is-active .content-group-count { color: var(--accent-blue); border-color: rgba(46, 91, 224, 0.30); background: #fff; }

.content-form { flex: 1 1 auto; min-width: 0; }
.content-panel { display: none; }
.content-panel.is-active { display: block; }
.content-savebar { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }

/* Search mode: reveal all panels, filter to matches, tag each with its group. */
.content-searching .content-panel { display: block; }
.content-searching .field.search-hidden { display: none; }
.search-group-badge { display: none; }
.content-searching .search-group-badge { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 3px; background: rgba(46, 91, 224, 0.10); color: var(--accent-blue); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 900px) {
    .content-layout { flex-direction: column; gap: 16px; }
    .content-groups {
        flex: none; width: 100%; position: static; max-height: none; overflow-y: visible;
        flex-direction: row; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--border); padding-bottom: 2px;
    }
    .content-group { flex: 0 0 auto; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .content-group.is-active { border-left: none; border-bottom-color: var(--accent-blue); background: none; }
    .content-form { width: 100%; }
    .content-savebar { flex-wrap: wrap; }
}

/* ===== Certificate of Analysis (product page) ===== */
/* Widen the buy row so the secondary "View COA" button sits beside Add to cart. */
.pd-buyrow { max-width: 620px; }

.pd-coa-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; padding: 0 22px;
    background: #fff; color: var(--ink);
    border: 1px solid var(--border-2); border-radius: 999px;
    font-size: 15px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pd-coa-btn svg { width: 19px; height: 19px; color: var(--accent-blue); flex: 0 0 auto; }
.pd-coa-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.pd-coa-btn.is-open { border-color: var(--accent-blue); background: rgba(46, 91, 224, .05); }

.pd-coa-panel {
    margin-top: 16px; max-width: 620px;
    border: 1px solid var(--border); border-radius: 14px;
    background: #fafafa; padding: 18px 20px;
}
.pd-coa-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pd-coa-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 14px; }
.pd-coa-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 2px; font-family: 'Inter', system-ui, sans-serif; }
.pd-coa-lot .mono, .pd-coa-tested .mono { font-size: 14px; color: var(--ink); }
.pd-coa-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-coa-open, .pd-coa-dl, .pd-coa-contact {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 20px; border-radius: 999px;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.pd-coa-open, .pd-coa-contact { background: var(--accent-blue); color: #fff; }
.pd-coa-open:hover, .pd-coa-contact:hover { background: #264fc4; }
.pd-coa-dl { background: #fff; color: var(--ink); border: 1px solid var(--border-2); }
.pd-coa-dl:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.pd-coa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-coa-item { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.pd-coa-item:first-child { border-top: none; padding-top: 0; }
.pd-coa-item .pd-coa-meta { margin-bottom: 0; }

.pd-coa-soon .pd-coa-title { margin-bottom: 6px; }
.pd-coa-soon-body { margin: 0 0 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
    .pd-coa-btn { flex: 1 1 100%; }
    .pd-coa-panel { max-width: 100%; }
}

/* Admin COA panel bits (dark admin theme handles the rest). */
.coa-mode-legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.coa-empty { margin-top: 10px; }

/* ===== Checkout account step (login page in checkout mode) ===== */
/* Account step width: full below 640, 560 up to 1024, 720 above 1024. The card
   and all three chrome blocks (progress row, summary, heading) share one width. */
.login-body.checkout-account .login-single,
.login-body.checkout-account .checkout-steps,
.login-body.checkout-account .checkout-summary,
.login-body.checkout-account .checkout-acct-head { max-width: none; }

.login-single .checkout-steps {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    list-style: none; margin: 0 auto 18px; padding: 0; width: 100%; max-width: none;
    font-size: 12.5px; color: rgba(255, 255, 255, 0.5);
}
.checkout-steps li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.checkout-steps li:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: rgba(255, 255, 255, 0.18); margin-left: 6px; }
.checkout-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: 0 0 auto; }
.checkout-steps li.is-done { color: rgba(255, 255, 255, 0.7); }
.checkout-steps li.is-done .checkout-step-dot { background: #2E5BE0; }
.checkout-steps li.is-current { color: #fff; font-weight: 600; }
.checkout-steps li.is-current .checkout-step-dot { background: #2E5BE0; box-shadow: 0 0 0 4px rgba(46, 91, 224, 0.25); }

.login-single .checkout-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; max-width: none; margin: 0 auto 16px; padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.8);
}
.checkout-summary-items { font-weight: 600; color: #fff; }
.checkout-summary-label { color: rgba(255, 255, 255, 0.55); margin-right: 6px; }
.checkout-summary-total .mono { color: #fff; font-weight: 600; }

.login-single .checkout-acct-head { width: 100%; max-width: none; margin: 0 auto 14px; text-align: center; }
.checkout-acct-h1 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; line-height: 1.25; }
.checkout-acct-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 420px) {
    .login-single .checkout-steps { font-size: 11.5px; gap: 4px; }
    .checkout-steps li:not(:last-child)::after { width: 12px; margin-left: 4px; }
    .login-single .checkout-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 640–1024px: card + chrome at 560px. */
@media (min-width: 640px) {
    .login-body.checkout-account .login-single,
    .login-body.checkout-account .checkout-steps,
    .login-body.checkout-account .checkout-summary,
    .login-body.checkout-account .checkout-acct-head { max-width: 560px; }
}
/* Above 1024px: 720px, with roomier card padding so it does not look empty. */
@media (min-width: 1025px) {
    .login-body.checkout-account .login-single,
    .login-body.checkout-account .checkout-steps,
    .login-body.checkout-account .checkout-summary,
    .login-body.checkout-account .checkout-acct-head { max-width: 720px; }
    .login-body.checkout-account .auth-card { padding: 32px; }
}

/* =========================================================================
   Admin — product reorder arrows (light admin shell)
   ========================================================================= */
.reorder { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.reorder .inline-form { margin: 0; }
.reorder-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--border-2); border-radius: 7px; color: var(--ink);
    transition: border-color .12s ease, color .12s ease;
}
.reorder-btn svg { width: 15px; height: 15px; }
.reorder-btn:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); }
.reorder-btn:disabled { opacity: 0.35; cursor: default; }

/* =========================================================================
   Dark catalog (/ and /home only). Scoped to body.catalog-dark so product
   detail, cart, checkout, account, contact, and legal stay light.
   ========================================================================= */
body.catalog-dark { background: #070910; color: #c7cbd2; }

/* Blue glow layer behind all content (upper-left, right third-down, lower-centre). */
.catalog-dark .catalog-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.catalog-dark .cat-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.catalog-dark .cat-glow-1 {
    width: 620px; height: 620px; top: -150px; left: -130px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.50), transparent 68%);
    animation: cat-glow-a 19s ease-in-out infinite alternate;
}
.catalog-dark .cat-glow-2 {
    width: 540px; height: 540px; top: 32%; right: -160px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.36), transparent 70%);
    animation: cat-glow-b 24s ease-in-out infinite alternate;
}
.catalog-dark .cat-glow-3 {
    width: 660px; height: 660px; bottom: -200px; left: 50%; margin-left: -330px;
    background: radial-gradient(circle, rgba(46, 91, 224, 0.30), transparent 70%);
    animation: cat-glow-c 22s ease-in-out infinite alternate;
}
@keyframes cat-glow-a { from { transform: translate(0, 0); } to { transform: translate(70px, 55px); } }
@keyframes cat-glow-b { from { transform: translate(0, 0); } to { transform: translate(-70px, 40px); } }
@keyframes cat-glow-c { from { transform: translate(0, 0); } to { transform: translate(0, -45px); } }
@media (prefers-reduced-motion: reduce) {
    .catalog-dark .cat-glow { animation: none; }
}

/* Hero: transparent so the page bg + glows show; its own glows give way to the 3 page glows. */
.catalog-dark .hero { background: transparent; }
.catalog-dark .hero-glow { display: none; }

/* The catalog <main> normally paints a light #fafafa fill that would cover the
   dark body + glows. Make it transparent so #070910 and the glows show through.
   (.catalog-dark .catalog = 0,2,0 beats the base .catalog = 0,1,0 — no !important.) */
.catalog-dark .catalog { background: transparent; }

/* Filter pills + count. */
.catalog-dark .catalog-filter { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #a9b0bc; }
.catalog-dark .catalog-filter:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.catalog-dark .catalog-filter.is-active { background: #fff; color: #111; border-color: #fff; }
.catalog-dark .catalog-count { color: #7d8494; }
.catalog-dark .empty { color: #a9b0bc; }
.catalog-dark .empty .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.30); }
.catalog-dark .catalog-flash { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.12); }

/* Glass cards. Base = flat fallback (no @supports and on mobile). */
.catalog-dark .pcard {
    background: rgba(18, 21, 29, 0.72);
    border: none;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.31),
        inset 0 0 0 1px rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.068),
        0 8px 28px rgba(0, 0, 0, 0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .catalog-dark .pcard {
        background: rgba(255, 255, 255, 0.075);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
    }
}
/* Perf: no backdrop-filter on phones — flat fill, same inset rims. */
@media (max-width: 767px) {
    .catalog-dark .pcard {
        background: rgba(18, 21, 29, 0.72);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Card contents on dark. */
.catalog-dark .pcard-media { background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.catalog-dark .pcard-name-link,
.catalog-dark .pcard-name-link:hover { color: #fff; }
.catalog-dark .pcard-price { color: #8b919c; }
.catalog-dark .pcard-amount { color: #fff; font-family: var(--font-mono); }
.catalog-dark .pcard-compare { color: #8b919c; }
.catalog-dark .pcard-size-label { color: #8b919c; }
.catalog-dark .cat-badge { background: rgba(46, 91, 224, 0.20); color: #8fadf5; }
.catalog-dark .pcard-size {
    color: #c7cbd2;
    background-color: rgba(255, 255, 255, 0.04);
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.31),
        inset 0 0 0 1px rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.068);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cbd2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.catalog-dark .pcard-add { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
/* Both badges must read on the dark cards: OOS pill gains a light rim. */
.catalog-dark .pcard-oos-badge { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* =========================================================================
   FAQ page (/faq) — light, consistent with contact/legal. <details> accordions.
   ========================================================================= */
.faq-page { max-width: 820px; margin: 0 auto; padding: 48px 24px 72px; }
.faq-head { margin-bottom: 26px; }
.faq-h1 { margin: 0 0 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.faq-intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

.faq-jumpnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.faq-jump { font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 15px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.faq-jump:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.faq-cat { margin-bottom: 34px; scroll-margin-top: 96px; }
.faq-cat-h { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-blue); }
.faq-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-child { border-top: none; }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 44px; padding: 16px 20px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--off-white); }
.faq-chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted-2); transition: transform .2s ease; }
.faq-item[open] > .faq-q .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 2px 20px 18px; font-size: 15px; line-height: 1.65; color: #3a3a3a; }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--accent-blue); }

@media (max-width: 640px) {
    .faq-page { padding: 32px 16px 56px; }
    .faq-h1 { font-size: 27px; }
    .faq-q { padding: 14px 16px; font-size: 15px; }
    .faq-a { padding: 2px 16px 16px; }
}

/* =========================================================================
   Homepage FAQ block — dark, glass-consistent with the catalog cards.
   ========================================================================= */
.catalog-dark .home-faq { max-width: 1440px; margin: 44px auto 0; }
.home-faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.home-faq-h { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.home-faq-all { font-size: 14px; color: #8fadf5; text-decoration: none; }
.home-faq-all:hover { color: #fff; }
.home-faq-list { display: grid; gap: 10px; }
.home-faq-item {
    border-radius: 14px; overflow: hidden;
    background: rgba(18, 21, 29, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.31), inset 0 0 0 1px rgba(255, 255, 255, 0.17), inset 0 -1px 0 rgba(255, 255, 255, 0.068);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-faq-item { background: rgba(255, 255, 255, 0.075); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
}
@media (max-width: 767px) {
    .home-faq-item { background: rgba(18, 21, 29, 0.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.home-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 44px; padding: 15px 20px; cursor: pointer; list-style: none;
    font-size: 15.5px; font-weight: 600; color: #fff;
}
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-chev { width: 18px; height: 18px; flex: 0 0 auto; color: #8b919c; transition: transform .2s ease; }
.home-faq-item[open] > .home-faq-q .home-faq-chev { transform: rotate(180deg); }
.home-faq-a { padding: 2px 20px 16px; font-size: 14.5px; line-height: 1.65; color: #c7cbd2; }
.home-faq-a p { margin: 0 0 8px; }
.home-faq-a p:last-child { margin-bottom: 0; }
.home-faq-a a { color: #8fadf5; }
@media (max-width: 640px) {
    .home-faq-q { padding: 14px 16px; font-size: 14.5px; }
    .home-faq-a { padding: 2px 16px 14px; }
}

/* =========================================================================
   Mobile hamburger menu (<768px). Desktop (>=768) keeps the horizontal nav.
   ========================================================================= */
.topbar-mobile { display: none; }
.mnav, .mnav-noscript { display: none; }

@media (max-width: 767px) {
    .topbar-inner { display: none; }
    .topbar-mobile {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        height: 76px; padding: 0 16px; background: #1c1c1c;
    }
}
@media (min-width: 768px) {
    /* Never let the overlay/fallback interfere with the desktop nav. */
    .mnav, .mnav-noscript { display: none !important; }
}

/* Collapsed bar */
.tm-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tm-brand:hover { text-decoration: none; }
.tm-logo { height: 40px; width: auto; display: block; }
.tm-brand .logo-wordmark { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.tm-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tm-cart {
    display: inline-flex; align-items: center; gap: 6px;
    background: #2E5BE0; color: #fff; border-radius: 999px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.tm-cart-count { font-weight: 700; }
.tm-burger {
    width: 44px; height: 44px; padding: 0; border: none; background: none; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tm-burger svg { width: 27px; height: 27px; }

/* Full-screen overlay */
.mnav {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; overflow: hidden;
    opacity: 0; visibility: hidden;
    background: rgba(7, 9, 16, 0.97);   /* solid fallback (no backdrop-filter) */
    transition: opacity .18s ease, visibility .18s ease;
    font-family: 'Inter', system-ui, sans-serif;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mnav {
        background: rgba(7, 9, 16, 0.92);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
    }
}
.mnav.is-open { opacity: 1; visibility: visible; }

/* Drifting blue glows behind the content. */
.mnav-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.mnav-glow-1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(46, 91, 224, 0.45), transparent 68%); animation: mnav-glow-a 18s ease-in-out infinite alternate; }
.mnav-glow-2 { width: 440px; height: 440px; bottom: -150px; right: -120px; background: radial-gradient(circle, rgba(46, 91, 224, 0.34), transparent 70%); animation: mnav-glow-b 22s ease-in-out infinite alternate; }
@keyframes mnav-glow-a { from { transform: translate(0, 0); } to { transform: translate(60px, 45px); } }
@keyframes mnav-glow-b { from { transform: translate(0, 0); } to { transform: translate(-55px, -40px); } }
@media (prefers-reduced-motion: reduce) { .mnav-glow { animation: none; } }

.mnav-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; }

.mnav-head { flex: 0 0 auto; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.mnav-close { width: 44px; height: 44px; padding: 0; border: none; background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mnav-close svg { width: 27px; height: 27px; }

.mnav-search { flex: 0 0 auto; position: relative; padding: 0 18px; margin-bottom: 6px; }
.mnav-search-ico { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
.mnav-search-ico svg { width: 18px; height: 18px; color: #7d8494; }
.mnav-search input {
    width: 100%; box-sizing: border-box; height: 48px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px; color: #fff; font-size: 15px; padding: 0 14px 0 44px;
}
.mnav-search input::placeholder { color: #7d8494; }
.mnav-search input:focus { outline: none; border-color: rgba(46, 91, 224, 0.7); }

.mnav-links { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 0; }
.mnav-link {
    display: flex; align-items: center; gap: 14px; min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff; font-size: 18px; text-decoration: none;
}
.mnav-link:hover { text-decoration: none; }
.mnav-ico { width: 21px; height: 21px; flex: 0 0 auto; color: #2E5BE0; }
.mnav-link-final { margin-top: 8px; border-bottom: none; }
.mnav-link-final .mnav-ico { color: #7d8494; }
.mnav-link-final .mnav-label { color: #a9b0bc; }

.mnav-foot { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 14px; }
.mnav-foot a { font-size: 12px; color: #6b7280; text-decoration: none; }
.mnav-foot a:hover { color: #a9b0bc; }

/* Body scroll lock while the menu is open (position preserved by JS). */
body.mnav-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* No-JS fallback nav (revealed by the <noscript> style on mobile). */
.mnav-noscript { background: #1c1c1c; padding: 6px 18px 16px; border-bottom: 1px solid var(--border-dark); }
.mnav-noscript a { display: block; padding: 12px 0; color: #fff; font-size: 16px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mnav-noscript-legal { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; }
.mnav-noscript-legal a { display: inline; padding: 0; border: none; font-size: 12px; color: #6b7280; }

/* =========================================================================
   Admin drag-to-reorder (products + FAQs). Handle-only drag; arrows remain.
   ========================================================================= */
.col-drag { width: 34px; }
th.col-drag { padding-left: 8px; padding-right: 0; }

.drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; color: var(--muted-2); cursor: grab;
    touch-action: none;                 /* handle only — the rest of the page scrolls */
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.drag-handle svg { width: 18px; height: 18px; display: block; }
.drag-handle:hover { color: var(--ink); }
.drag-handle:active { cursor: grabbing; }
body.reorder-active { -webkit-user-select: none; user-select: none; cursor: grabbing; }
body.reorder-active .drag-handle { cursor: grabbing; }
/* Bigger tap target on touch devices. */
@media (pointer: coarse) {
    .drag-handle { width: 44px; height: 44px; }
    .col-drag { width: 44px; }
}

/* Dragged row: 40% opacity + light accent tint. */
tr.is-dragging { opacity: 0.4; background: rgba(46, 91, 224, 0.12); }
/* Drop-line: 2px accent on the edge the row would insert at (table mode). */
tr.drop-before > td { box-shadow: inset 0 2px 0 0 #2E5BE0; }
tr.drop-after  > td { box-shadow: inset 0 -2px 0 0 #2E5BE0; }

/* De-emphasise the arrow fallback once JS drag is active (still present + usable). */
.reorder-ready .reorder { opacity: 0.45; transition: opacity .15s ease; }
.reorder-ready .reorder:hover, .reorder-ready .reorder:focus-within { opacity: 1; }

/* Save status indicator near the top of each list. */
.reorder-status { margin: 0 0 10px; min-height: 18px; font-size: 13px; font-weight: 600; }
.reorder-status:empty { min-height: 0; margin: 0; }
.reorder-status.is-saving { color: #2E5BE0; }
.reorder-status.is-saved  { color: var(--muted); font-weight: 500; }
.reorder-status.is-error  { color: #c5311f; }

/* Card layout (<=767px): handle sits on the card; drop-line moves to the card edge. */
@media (max-width: 767px) {
    table.admin-cards > tbody > tr.drop-before { box-shadow: inset 0 3px 0 0 #2E5BE0; }
    table.admin-cards > tbody > tr.drop-after  { box-shadow: inset 0 -3px 0 0 #2E5BE0; }
    table.admin-cards > tbody > tr.drop-before > td,
    table.admin-cards > tbody > tr.drop-after  > td { box-shadow: none; }
    table.admin-cards > tbody > tr > td.col-drag { padding-top: 0; }
    .drag-handle { margin-left: -6px; }
}

/* Pack cost calculator: shipping row + landed/per-vial output emphasis. */
.pricing-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pricing-fieldrow .pricing-field { margin-bottom: 0; }
.pricing-help { margin: 6px 0 14px; font-size: 11.5px; line-height: 1.4; color: var(--muted-2); }
.pricing-out > div.pricing-sep { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.pricing-out > div.pricing-pervial { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; align-items: baseline; }
.pricing-out > div.pricing-pervial dt { color: var(--ink); font-weight: 600; }
.pricing-out > div.pricing-pervial dd { font-size: 18px; font-weight: 700; color: #2E5BE0; }

/* =========================================================================
   Homepage SEO copy (dark catalog), public COA library (light), admin SEO counter.
   ========================================================================= */
/* Same width wrapper as .pgrid / .home-faq (1440px, inside .catalog padding). */
.catalog-dark .home-seo { max-width: 1440px; margin: 48px auto 0; }
.home-seo-inner { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1025px) { .home-seo-inner { grid-template-columns: repeat(3, 1fr); } }

/* Glass card — identical treatment + fallbacks to the product cards. */
.home-seo-block {
    border-radius: 16px; padding: 22px;
    background: rgba(18, 21, 29, 0.72);   /* flat fallback (no @supports / mobile) */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.31),
        inset 0 0 0 1px rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.068),
        0 8px 28px rgba(0, 0, 0, 0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-seo-block {
        background: rgba(255, 255, 255, 0.075);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
    }
}
@media (max-width: 767px) {
    .home-seo-block {
        background: rgba(18, 21, 29, 0.72);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.home-seo-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.home-seo-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-warm); color: #1c1c1c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.home-seo-icon svg { width: 21px; height: 21px; display: block; }
.home-seo-h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.home-seo-body { margin: 0; font-size: 14px; line-height: 1.65; color: #a9b0bc; }

.coalib-page { max-width: 900px; margin: 0 auto; padding: 48px 24px 72px; }
.coalib-head { margin-bottom: 24px; }
.coalib-h1 { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.coalib-intro { margin: 0 0 8px; max-width: 65ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.coalib-signin { font-size: 13px; margin: 0; }
.coalib-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); }
.coalib-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.coalib-table td { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 14px; vertical-align: baseline; }
.coalib-product { color: var(--ink); font-weight: 600; text-decoration: none; }
.coalib-product:hover { color: var(--accent-blue); }
.coalib-size { display: inline-block; margin-left: 8px; color: var(--muted-2); font-size: 12px; }
.coalib-col-view { text-align: right; white-space: nowrap; }
.coalib-view { color: var(--accent-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.coalib-view:hover { text-decoration: underline; }
@media (max-width: 600px) { .coalib-page { padding: 32px 16px 56px; } .coalib-h1 { font-size: 26px; } }

.seo-counter { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.seo-counter.over { color: #c5311f; }