/* ============================================================================
   NexusCommerce — v19 "Indigo" theme layer
   ============================================================================
   ONE file that re-skins the whole application (storefront + admin/ERP) to a
   professional indigo / slate palette. It is loaded LAST in both layouts, so
   it only overrides — nothing here has to fight the earlier sheets for
   specificity beyond a normal selector.

   Why a single theme file instead of editing style.css / nx-v16.css:
     * the two older sheets are 4,800 lines of layout; re-colouring them in
       place risks breaking the print stylesheets and the mobile fixes that
       were hard-won in v16/v17.
     * a merchant can revert the whole look by removing ONE <link>.

   Palette rationale (initial v19 palette; refined in v22 below):
     * rose    #e11d48  — primary action, links, active states
     * pink    #f472b6  — gradient partner / accent
     * slate   #0f172a  — chrome (header, footer, sidebar)
     * slate-50 #f8fafc — page background
   A refined rose/pink reads warm and modern for a consumer storefront while
   the slate chrome keeps the admin/ERP side looking serious. The discount
   badge is deliberately a SEPARATE solid red (#dc2626) so it still pops
   against a pink page — see section 5.

   Contents
     1.  Design tokens (indigo palette, radius, shadow, gradients)
     2.  Base + typography accents
     3.  Buttons
     4.  Header / category bar / search
     5.  Cards, badges, pills, alerts
     6.  Forms
     7.  Tables
     8.  Footer
     9.  Checkout (compact steps, coupon box, summary, payment, terms)
     10. Cart (qty stepper, aligned totals)
     11. Admin / ERP shell (sidebar, topbar, widgets, nav, order detail)
     12. Mobile
     13. Print
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
    /* --- brand ramp (v21: rose/pink) --------------------------------------
       The variable NAMES are kept as --nx-ind-* on purpose: every selector
       below (and the older sheets) already references them, so re-pointing
       the values here re-skins the whole app without touching a single rule. */
    --nx-ind-50:  #fff1f2;
    --nx-ind-100: #ffe4e6;
    --nx-ind-200: #fecdd3;
    --nx-ind-300: #fda4af;
    --nx-ind-400: #fb7185;
    --nx-ind-500: #f43f5e;
    --nx-ind-600: #e11d48;
    --nx-ind-700: #be123c;
    --nx-ind-800: #9f1239;
    --nx-ind-900: #881337;

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

    /* --- remap the legacy tokens the older sheets already use ------------- */
    --primary:        var(--nx-ind-600);
    --primary-dark:   var(--nx-ind-700);
    --accent:         #f472b6;
    --nx-brand:       var(--nx-ind-600);
    --nx-brand-dark:  var(--nx-ind-700);
    --nx-brand-tint:  var(--nx-ind-50);
    --nx-chrome:      var(--nx-slate-900);   /* deep slate header chrome */
    --nx-page-bg:     var(--nx-slate-50);

    /* --- surfaces / lines ------------------------------------------------- */
    --nx-surface:     #ffffff;
    --nx-surface-2:   var(--nx-slate-50);
    --nx-line:        var(--nx-slate-200);
    --border:         var(--nx-slate-200);
    --light:          var(--nx-slate-50);

    /* --- gradients -------------------------------------------------------- */
    --nx-grad:        linear-gradient(135deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
    --nx-grad-soft:   linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    --nx-grad-chrome: linear-gradient(120deg, #0f172a 0%, #1e293b 60%, #881337 100%);

    /* --- elevation -------------------------------------------------------- */
    --nx-shadow-sm:   0 1px 2px rgba(15, 23, 42, .06);
    --nx-shadow:      0 4px 16px rgba(15, 23, 42, .08);
    --nx-shadow-lg:   0 16px 40px rgba(15, 23, 42, .14);
    --nx-ring:        0 0 0 3px rgba(225, 29, 72, .20);
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */
body { background: var(--nx-page-bg); color: var(--nx-slate-800); }

a { color: var(--nx-ind-700); }
a:hover { color: var(--nx-ind-600); }

.page-title,
h1, h2, h3, h4 { color: var(--nx-slate-900); }

.page-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 22px;
}
.page-title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 64px; height: 4px; border-radius: 4px;
    background: var(--nx-grad);
}

.muted { color: var(--nx-slate-500); }
.req { color: #dc2626; font-weight: 700; }
.opt { color: var(--nx-slate-400); font-weight: 400; font-size: .85em; }

::selection { background: var(--nx-ind-200); color: var(--nx-slate-900); }

/* ---------------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--nx-grad);
    border: 0;
    color: #fff;
    box-shadow: 0 6px 18px rgba(225, 29, 72, .28);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(225, 29, 72, .36);
}

.btn-outline {
    border: 1.5px solid var(--nx-ind-300);
    color: var(--nx-ind-700);
    background: #fff;
}
.btn-outline:hover {
    background: var(--nx-ind-50);
    border-color: var(--nx-ind-500);
    color: var(--nx-ind-700);
}

.btn-secondary { background: var(--nx-slate-800); border: 0; color: #fff; }
.btn-secondary:hover { background: var(--nx-slate-700); color: #fff; }

.btn-danger { background: #dc2626; border: 0; color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }

.btn:focus-visible,
.form-control:focus,
select:focus,
input:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--nx-ring);
    border-color: var(--nx-ind-400);
}

/* ---------------------------------------------------------------------------
   4. HEADER / CATEGORY BAR / SEARCH
   --------------------------------------------------------------------------- */
.site-header { border-bottom: 0; box-shadow: 0 2px 14px rgba(15, 23, 42, .08); }

.header-top {
    background: var(--nx-grad-chrome);
    color: #cbd5e1;
}
.header-top a { color: #cbd5e1; }
.header-top a:hover { color: #fff; }
.header-tagline { color: #94a3b8; }

.brand-mark {
    background: var(--nx-grad) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .35);
}
.brand-text { color: var(--nx-slate-900); }

.nx-search input[type="search"] {
    border: 1.5px solid var(--nx-slate-200);
    background: #fff;
}
.nx-search input[type="search"]:focus { border-color: var(--nx-ind-400); }
.nx-search button {
    background: var(--nx-grad);
    color: #fff;
    border: 0;
}
.nx-search button:hover { background: linear-gradient(135deg, #e11d48, #be123c); }

.nx-action { color: var(--nx-slate-700); }
.nx-action:hover { color: var(--nx-ind-600); }
/* v26: Wishlist / Compare / Cart header icons are RED (owner request).
   Only these three carry the extra class, so Recent / Account / Logout
   keep their neutral colour. */
.nx-action--red { color: #dc2626 !important; }
.nx-action--red:hover { color: #b91c1c !important; background: #fef2f2 !important; }
.nx-badge {
    background: var(--nx-grad);
    color: #fff;
    box-shadow: 0 2px 6px rgba(225, 29, 72, .35);
}

.nx-catbar {
    background: #fff;
    border-top: 1px solid var(--nx-slate-200);
    border-bottom: 1px solid var(--nx-slate-200);
}
.nx-cat-link { color: var(--nx-slate-700); font-weight: 600; }
.nx-cat-link:hover { color: var(--nx-ind-600); }
.nx-cat-item.has-sub > .nx-cat-link { color: var(--nx-ind-700); }
.nx-cat-sub {
    border: 1px solid var(--nx-slate-200);
    box-shadow: var(--nx-shadow-lg);
    border-radius: 12px;
}
.nx-cat-sub a:hover { background: var(--nx-ind-50); color: var(--nx-ind-700); }

.h-cart-dropdown { border: 1px solid var(--nx-slate-200); box-shadow: var(--nx-shadow-lg); }

/* ---------------------------------------------------------------------------
   5. CARDS / BADGES / PILLS / ALERTS
   --------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--nx-slate-200);
    border-radius: 16px;
    box-shadow: var(--nx-shadow-sm);
    background: #fff;
}
.card > h3:first-child,
.card > h2:first-child {
    color: var(--nx-slate-900);
    border-bottom: 1px solid var(--nx-slate-200);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.product-card {
    border: 1px solid var(--nx-slate-200);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nx-shadow-lg);
    border-color: var(--nx-ind-200);
}
.pc-amount, .price { color: var(--nx-slate-900); font-weight: 800; }
/* v21 — DISCOUNT BADGE IS RED, ALWAYS.
   The owner reported the badge was not red. Root cause: this rule used to
   paint it with the brand gradient, and because this sheet loads LAST it
   overrode the red `.pc-badge` in style.css. The badge is now a fixed solid
   red that does NOT follow the brand palette, so it stays red no matter what
   colour the theme is set to. `.pc-off` (the inline "5% Off" text next to the
   price) is red too, so the two never disagree. */
.pc-off, .pc-badge {
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: .2px;
}
.pc-off { padding: 2px 8px; }
.pc-badge { box-shadow: 0 2px 6px rgba(220, 38, 38, .35); }
.old-price { color: var(--nx-slate-400); }

.nx-pill { border-radius: 999px; font-weight: 600; }
.nx-pill-green { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.nx-pill-rose  { background: var(--nx-ind-50); color: var(--nx-ind-700); border: 1px solid var(--nx-ind-200); }

.badge, .nav-badge, .admin-role-badge {
    background: var(--nx-grad);
    color: #fff;
    border-radius: 999px;
}

.alert { border-radius: 12px; border-left-width: 4px; }
.alert-success { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.alert-error   { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.alert-info    { background: var(--nx-ind-50); border-color: var(--nx-ind-400); color: var(--nx-ind-800); }

/* ---------------------------------------------------------------------------
   6. FORMS
   --------------------------------------------------------------------------- */
.form-control, select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"], input[type="tel"] {
    border: 1.5px solid var(--nx-slate-200);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, select:hover { border-color: var(--nx-slate-300); }
label { color: var(--nx-slate-700); font-weight: 600; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--nx-ind-600); }

/* ---------------------------------------------------------------------------
   7. TABLES
   --------------------------------------------------------------------------- */
.table thead th {
    background: var(--nx-slate-50);
    color: var(--nx-slate-700);
    border-bottom: 1px solid var(--nx-slate-200);
    font-weight: 700;
}
.table tbody tr:hover { background: var(--nx-slate-50); }
.table td, .table th { border-color: var(--nx-slate-200); }

/* ---------------------------------------------------------------------------
   8. FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #cbd5e1;
    margin-top: 48px;
}
.site-footer h4 { color: #fff; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.footer-tagline { color: #94a3b8; }

/* The divider the owner asked to be coloured — a soft indigo gradient rule
   that fades out at both ends instead of a flat grey line. */
.footer-hr {
    border: 0;
    height: 2px;
    margin: 0 0 18px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(244, 63, 94, 0) 0%,
        rgba(244, 63, 94, .85) 22%,
        rgba(251, 113, 133, 1) 50%,
        rgba(244, 63, 94, .85) 78%,
        rgba(244, 63, 94, 0) 100%);
}
.footer-bottom .footer-hr,
.site-footer > .footer-hr {
    width: auto;
    max-width: none;
    margin: 0 0 18px;
}
.footer-bottom { color: #94a3b8; }

.nx-newsletter-form .form-control { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
.nx-newsletter-form .form-control::placeholder { color: #94a3b8; }

/* ---------------------------------------------------------------------------
   9. CHECKOUT — compact
   --------------------------------------------------------------------------- */
.nx-steps { gap: 10px; }
.nx-step {
    border-radius: 999px;
    border: 1.5px solid var(--nx-slate-200);
    background: #fff;
    color: var(--nx-slate-500);
    font-weight: 600;
}
.nx-step.is-done { border-color: var(--nx-ind-300); color: var(--nx-ind-700); background: var(--nx-ind-50); }
.nx-step.is-current {
    background: var(--nx-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(225, 29, 72, .3);
}
.nx-step-num { background: rgba(0,0,0,.06); border-radius: 999px; }
.nx-step.is-current .nx-step-num { background: rgba(255,255,255,.25); color: #fff; }

/* --- section headings inside the checkout cards ------------------------- */
.nx-co-section { margin-bottom: 18px; }
.nx-co-section:last-child { margin-bottom: 0; }
.nx-co-section-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--nx-slate-200);
}
.nx-co-section-head h3 { margin: 0; font-size: 1rem; color: var(--nx-slate-900); }
.nx-co-section-num {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 999px;
    background: var(--nx-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 800;
}

/* --- the coupon box ----------------------------------------------------- */
.nx-coupon-box {
    border: 1.5px dashed var(--nx-ind-300);
    background: var(--nx-grad-soft);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 16px;
}
.nx-coupon-box-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 9px;
}
.nx-coupon-box-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 800; color: var(--nx-ind-800); font-size: .93rem;
}
.nx-coupon-box-title .nx-coupon-ico { font-size: 1.05rem; }
.nx-coupon-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-coupon-form .form-control {
    flex: 1 1 200px; min-width: 0;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
    border-color: var(--nx-ind-300); background: #fff;
}
.nx-coupon-form .btn { flex: 0 0 auto; }
.nx-coupon-applied {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid #a7f3d0; border-radius: 12px;
    padding: 11px 13px;
}
.nx-coupon-save { color: #047857; font-weight: 800; font-size: .9rem; }
.nx-coupon-hint { margin: 7px 0 0; font-size: .78rem; color: var(--nx-slate-500); }
.nx-coupon-hint a { font-weight: 600; }

/* --- v20: COMPACT coupon strip ------------------------------------------
   The cart coupon box used to be a tall card (heading + full-width input +
   hint paragraph) that pushed the checkout button off the first screen.
   This variant is a single slim row: icon + input + Apply + "All offers". */
.nx-coupon-compact {
    padding: 9px 12px;
    margin: 0 0 12px;
    border-radius: 12px;
}
.nx-coupon-compact .nx-coupon-applied { padding: 7px 10px; }
.nx-coupon-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.nx-coupon-inline .nx-coupon-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.nx-coupon-inline .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 6px 10px;
    font-size: .88rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
    border-color: var(--nx-ind-300);
    background: #fff;
}
.nx-coupon-inline .btn { flex: 0 0 auto; height: 36px; padding: 0 16px; }
.nx-coupon-more {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- v20: ONE-CLICK ORDER ------------------------------------------------ */
.nx-1click { margin-top: 10px; }
.btn-1click {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px;
    font-weight: 800; font-size: .97rem;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border: 0; border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(234, 88, 12, .55);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-1click:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(234, 88, 12, .6); }
.btn-1click:active { transform: translateY(0); }
.nx-1click-note {
    margin: 8px 0 0; font-size: .8rem; color: var(--nx-slate-500);
    text-align: center; line-height: 1.45;
}
.nx-1click-note strong { color: var(--nx-slate-700); }
.nx-1click-panel {
    margin-top: 10px; padding: 13px;
    border: 1.5px solid var(--nx-ind-200);
    background: var(--nx-ind-50);
    border-radius: 12px;
}
.nx-1click-lead { margin: 0 0 10px; font-size: .84rem; color: var(--nx-slate-600); }
.nx-1click-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.nx-1click-grid .form-control { height: 38px; font-size: .88rem; }
.nx-1click-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .nx-1click-grid { grid-template-columns: 1fr; } }

/* --- v20: RELATED PRODUCTS (full-width grid) ----------------------------- */
.nx-related { margin-top: 30px; }
.nx-related-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.nx-related-head h2 {
    margin: 0; font-size: 1.25rem; color: var(--nx-slate-900);
    position: relative; padding-bottom: 8px;
}
.nx-related-head h2::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 46px; height: 3px; border-radius: 3px; background: var(--nx-grad);
}
.nx-related-more { font-size: .88rem; font-weight: 700; }
.nx-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
@media (max-width: 560px) {
    .nx-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* --- v20: cart footer — primary action on the LEFT ---------------------- */
.cart-foot .btn-checkout {
    order: -1;
    padding: 12px 26px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: var(--nx-shadow-sm);
}
@media (max-width: 560px) {
    .cart-foot { flex-direction: column-reverse; align-items: stretch; }
    .cart-foot .btn-checkout { width: 100%; text-align: center; }
    .cart-foot .cart-subtotal { text-align: center; }
    /* v20.1: keep the code field and Apply on the SAME line even on a phone;
       only the "All offers" link drops to its own row. */
    .nx-coupon-inline { flex-wrap: wrap; }
    .nx-coupon-inline .form-control { flex: 1 1 60%; min-width: 0; }
    .nx-coupon-inline .btn { flex: 0 0 auto; width: auto; }
    .nx-coupon-inline .nx-coupon-more { flex: 1 1 100%; }
}

/* --- order summary ------------------------------------------------------ */
.order-summary { position: sticky; top: 96px; }
.order-summary .table { margin-bottom: 4px; }
.summary-lines { margin-top: 12px; }
.summary-lines .flex-between {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: .93rem;
}
.summary-hr {
    border: 0; height: 1px; margin: 9px 0;
    background: linear-gradient(90deg, var(--nx-slate-200), transparent);
}
.total-row {
    padding-top: 11px !important;
    border-top: 2px solid var(--nx-slate-200);
    font-size: 1.1rem;
}
.total-row strong:last-child { color: var(--nx-ind-700); font-size: 1.25rem; }

/* --- payment methods: COMPACT grid -------------------------------------- */
.payment-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--nx-slate-200);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.payment-option:hover { border-color: var(--nx-ind-400); background: var(--nx-slate-50); }
.payment-option:has(input:checked),
.payment-option.selected {
    border-color: var(--nx-ind-500);
    background: var(--nx-ind-50);
    box-shadow: var(--nx-shadow-sm);
}
.payment-option .pm-name { font-weight: 700; color: var(--nx-slate-900); font-size: .93rem; }
.payment-option .pm-icon { font-size: 1.15rem; line-height: 1; }
.payment-option input[type="radio"] { flex: 0 0 auto; }

/* Two-up on wide screens so the payment block is half as tall. */
@media (min-width: 620px) {
    .nx-pay-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .nx-pay-grid .payment-option { margin-bottom: 0; }
}

/* --- terms checkbox ----------------------------------------------------- */
.nx-terms {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--nx-slate-50);
    border: 1px solid var(--nx-slate-200);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 14px 0;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--nx-slate-700);
}
.nx-terms input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.nx-terms a { font-weight: 700; text-decoration: underline; }
.nx-terms.is-invalid { border-color: #ef4444; background: #fef2f2; }

/* --- the primary CTA ---------------------------------------------------- */
.checkout-sticky-btn {
    border-radius: 12px;
    padding: 15px 20px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    width: 100%;
    box-shadow: 0 10px 26px rgba(225, 29, 72, .34);
}
.checkout-sticky-btn:hover { box-shadow: 0 14px 32px rgba(225, 29, 72, .42); }

/* A slim reassurance strip under the CTA. */
.nx-co-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 9px 0 0; font-size: .78rem; color: var(--nx-slate-500);
}

/* ---------------------------------------------------------------------------
   10. CART — qty stepper + aligned totals
   --------------------------------------------------------------------------- */
.cart-table { width: 100%; }
.cart-table th, .cart-table td { vertical-align: middle; }
.cart-table th.num, .cart-table td.num { text-align: right; }
.cart-table td.num { font-variant-numeric: tabular-nums; }
.cart-table .cart-prod { display: flex; align-items: center; gap: 12px; }
.cart-table .cart-thumb {
    width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
    border: 1px solid var(--nx-slate-200); background: var(--nx-slate-50); flex: 0 0 auto;
}
.cart-table .cart-name { font-weight: 700; color: var(--nx-slate-900); line-height: 1.35; }
.cart-table .cart-variant { font-size: .82rem; color: var(--nx-slate-500); margin-top: 2px; }

/* The stepper: minus on the LEFT, plus on the RIGHT (standard order). */
.qty-stepper {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--nx-slate-200);
    border-radius: 10px; overflow: hidden; background: #fff;
}
.qty-stepper .qty-btn {
    width: 34px; height: 36px; border: 0; background: #fff;
    color: var(--nx-slate-700); font-size: 1.05rem; font-weight: 700;
    cursor: pointer; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease;
}
.qty-stepper .qty-btn:hover { background: var(--nx-ind-50); color: var(--nx-ind-700); }
.qty-stepper .qty-btn:active { background: var(--nx-ind-100); }
.qty-stepper .qty-input {
    width: 46px; height: 36px; border: 0; border-left: 1px solid var(--nx-slate-200);
    border-right: 1px solid var(--nx-slate-200);
    text-align: center; font-weight: 700; color: var(--nx-slate-900);
    -moz-appearance: textfield; background: #fff;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-remove {
    height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1.5px solid var(--nx-slate-200); background: #fff;
    color: var(--nx-slate-500); cursor: pointer; font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px; justify-content: center;
    transition: all .12s ease;
}
.cart-remove:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.cart-remove-label { display: inline; }
@media (max-width: 560px) { .cart-remove-label { display: none; } .cart-remove { width: 32px; padding: 0; } }

.cart-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--nx-slate-200);
}
.cart-foot .cart-subtotal { font-size: 1.05rem; color: var(--nx-slate-900); }
.cart-foot .cart-subtotal strong { font-size: 1.3rem; color: var(--nx-ind-700); }

/* ---------------------------------------------------------------------------
   11. ADMIN / ERP SHELL
   --------------------------------------------------------------------------- */
.admin-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #cbd5e1;
}
.admin-sidebar-brand, .admin-sidebar-title { color: #fff; }
.admin-sidebar-mark { background: var(--nx-grad); color: #fff; }
.admin-sidebar-user { border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-sidebar-user strong { color: #fff; }
.admin-role-badge { background: rgba(255,255,255,.16); color: #e0e7ff; }

.admin-nav-link, .admin-nav-group-btn {
    color: #cbd5e1;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
}
.admin-nav-link:hover, .admin-nav-group-btn:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}
.admin-nav-link.active,
.admin-nav-group.open > .admin-nav-group-btn {
    background: var(--nx-grad);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.admin-nav-sub a { color: #94a3b8; border-radius: 8px; }
.admin-nav-sub a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav-sub a.active {
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--nx-ind-400);
}
.admin-nav-divider { background: rgba(255,255,255,.12); }
.admin-nav-logout { color: #fca5a5; }

.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--nx-slate-200);
    box-shadow: 0 1px 8px rgba(15, 23, 42, .05);
}
.admin-topbar-title { color: var(--nx-slate-900); font-weight: 700; }
.admin-topbar-badge {
    background: var(--nx-ind-50);
    color: var(--nx-ind-700);
    border: 1px solid var(--nx-ind-200);
    border-radius: 999px;
    font-weight: 600;
}
.admin-topbar-badge:hover { background: var(--nx-ind-100); color: var(--nx-ind-800); }
.admin-sidebar-toggle { color: var(--nx-ind-700); }

.admin-content { background: var(--nx-page-bg); }

/* dashboard widgets / stat cards */
.stat-card, .admin-card, .widget {
    border: 1px solid var(--nx-slate-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--nx-shadow-sm);
}
.stat-card .stat-icon { color: var(--nx-ind-600); }
.stat-card .stat-value { color: var(--nx-slate-900); font-weight: 800; }

.admin-content .table thead th { background: var(--nx-slate-50); }
.admin-content .btn-primary { background: var(--nx-grad); }

/* --- admin order detail: tidy panels, no duplicate actions -------------- */
.order-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.order-head .page-title { margin-bottom: 0; }
.order-head .order-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.order-panel { padding: 18px 20px; }
.order-panel h3 {
    font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--nx-slate-500); font-weight: 700;
    margin: 0 0 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--nx-slate-200);
}
.order-kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: .9rem; }
.order-kv dt { color: var(--nx-slate-500); font-weight: 600; }
.order-kv dd { margin: 0; color: var(--nx-slate-900); }

/* status pills — one consistent shape, colour carries the meaning */
.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; line-height: 1.6;
    border: 1px solid transparent; text-transform: capitalize;
}
.status-pill.is-pending  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pill.is-paid     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill.is-failed   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-pill.is-refunded { background: var(--nx-slate-100); color: var(--nx-slate-600); border-color: var(--nx-slate-200); }
.status-pill.is-info     { background: var(--nx-ind-50); color: var(--nx-ind-700); border-color: var(--nx-ind-200); }

/* action rows inside the order panels */
.order-form-row {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 10px;
}
.order-form-row .form-control { flex: 1 1 150px; min-width: 0; }
.order-form-row .btn { flex: 0 0 auto; }

.order-totals { max-width: 380px; margin-left: auto; }
.order-totals .flex-between { padding: 6px 0; font-size: .92rem; }
.order-totals .order-grand {
    border-top: 2px solid var(--nx-slate-200);
    margin-top: 6px; padding-top: 11px;
    font-size: 1.05rem;
}
.order-totals .order-grand strong:last-child { color: var(--nx-ind-700); font-size: 1.2rem; }

/* The floating chat / contact bubbles are `position: fixed` in the bottom-right
   corner, so on a wide screen they sit over the right edge of the order
   summary and clip the grand total. Reserving their column as a gutter on the
   checkout grid keeps the money column clear without moving the bubbles. */
@media (min-width: 1100px) {
    .checkout-grid { padding-right: 78px; }
}

/* On a phone the same bubbles sit over the sticky cart summary bar and the
   Place Order button. Reserving the corner as padding keeps both tappable. */
@media (max-width: 800px) {
    .cart-summary-bar { padding-right: 76px; }
    .checkout-sticky-btn { margin-bottom: 4px; }
    .nx-co-section:last-child { padding-bottom: 66px; }
}

/* The cart renders a coupon box for the desktop table AND one inside the
   mobile card block; show only the one that matches the current layout. */
@media (max-width: 800px) {
    .cart-desktop-only { display: none !important; }
}

/* ---------------------------------------------------------------------------
   12. MOBILE
   --------------------------------------------------------------------------- */
body.nx-cookie-open { padding-bottom: 132px; }
@media (min-width: 700px) { body.nx-cookie-open { padding-bottom: 84px; } }

@media (max-width: 800px) {
    .order-summary { position: static; top: auto; }
    /* v21 FIX: admin page toolbars (e.g. Products: Print / Scan / Warehouses /
       Add Product) are laid out with `.flex` / `.flex-between`, which do NOT
       wrap by default. On a 320px phone the fixed 200px scan input plus the
       buttons pushed the row 11px past the viewport — a real sideways scroll.
       Letting the toolbars wrap and letting their inputs shrink removes it. */
    .admin-content .flex,
    .admin-content .flex-between { flex-wrap: wrap; gap: 8px; }
    .admin-content .flex .form-control,
    .admin-content .flex-between .form-control { min-width: 0; max-width: 100%; }
    /* v20.1 FIX: the coupon row must stay on ONE line (code field + Apply
       side by side) at every width — that is the requested layout. These
       legacy rules forced the input to 100% and the button to 100%, which
       stacked them and pushed the button past the viewport edge (horizontal
       overflow on the cart page at tablet widths). Only the legacy
       non-inline coupon form stacks now. */
    .nx-coupon-form:not(.nx-coupon-inline) .form-control { flex: 1 1 100%; }
    .nx-coupon-form:not(.nx-coupon-inline) .btn { width: 100%; }
    .nx-coupon-inline { flex-wrap: nowrap; }
    .nx-coupon-inline .form-control { flex: 1 1 auto; min-width: 0; }
    .nx-coupon-inline .btn { width: auto; flex: 0 0 auto; }
    .nx-co-section-head h3 { font-size: .96rem; }
    .total-row strong:last-child { font-size: 1.15rem; }
    .order-kv { grid-template-columns: 96px 1fr; }
    .order-totals { max-width: none; }
}

@media (max-width: 560px) {
    .nx-steps { gap: 6px; }
    .nx-step { font-size: .74rem; padding: 6px 9px; }
    .nx-coupon-box { padding: 12px; }
    .payment-option { padding: 10px 11px; }
    .nx-terms { font-size: .82rem; padding: 11px 12px; }
    .page-title::after { width: 48px; }
    .cart-table .cart-thumb { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------------------
   12b. CART v21 — item list + sticky order summary
   ---------------------------------------------------------------------------
   The cart is now a two-column layout: the item list on the left and an
   "Order Summary" panel on the right that carries the money breakdown, the
   coupon box and the checkout button. Below 900px it collapses to a single
   column with the summary underneath the items.
   --------------------------------------------------------------------------- */
.cart-page { padding: 22px 16px 40px; }

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
/* minmax(0,1fr) — NOT 1fr — is what stops a long product name from forcing
   the grid wider than the viewport (the classic sideways-scroll bug). */
.cart-layout > * { min-width: 0; }

.cart-items { padding: 0; overflow: hidden; }
.cart-items-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 1px solid var(--nx-slate-200);
}
.cart-items-head h2 { margin: 0; font-size: 1.05rem; color: var(--nx-slate-900); }
.cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; margin-left: 4px;
    border-radius: 999px; background: var(--nx-ind-50); color: var(--nx-ind-700);
    font-size: .78rem; font-weight: 800;
}
.cart-continue { font-size: .85rem; font-weight: 600; }

.cart-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 16px; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nx-slate-100);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row-img { display: block; }
.cart-row-img img {
    width: 84px; height: 84px; border-radius: 12px; object-fit: cover;
    border: 1px solid var(--nx-slate-200); background: var(--nx-slate-50);
}
.cart-row-name {
    display: block; font-weight: 700; color: var(--nx-slate-900);
    line-height: 1.35; text-decoration: none;
}
.cart-row-name:hover { color: var(--nx-ind-700); }
.cart-row-variant { font-size: .82rem; color: var(--nx-slate-500); margin-top: 3px; }
.cart-row-unit { font-size: .85rem; color: var(--nx-slate-600); margin-top: 5px; }
.cart-row-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart-row-total {
    font-weight: 800; color: var(--nx-slate-900); font-size: 1.02rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.cart-summary { padding: 20px; position: sticky; top: 96px; }
.cart-summary h2 {
    margin: 0 0 14px; font-size: 1.05rem; color: var(--nx-slate-900);
    padding-bottom: 12px; border-bottom: 1px solid var(--nx-slate-200);
}
.cart-summary .summary-discount strong { color: #047857; }
.cart-coupon { margin: 16px 0 0; }
.cart-coupon .nx-coupon-more { display: inline-block; margin-top: 8px; }
.cart-checkout-btn {
    display: block; width: 100%; text-align: center;
    margin-top: 16px; padding: 14px 20px;
    font-size: 1rem; font-weight: 800; border-radius: 12px;
}

/* --- v28 summary hierarchy ---------------------------------------------
   Quiet, evenly-spaced lines for Subtotal / Discount / Delivery, then a
   strong Total separated by a rule. Previously every row had the same
   weight, so the eye had nothing to land on. */
.cart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cart-head .page-title { margin: 0; }
.cart-head-count {
    font-size: .82rem; font-weight: 700; color: var(--nx-slate-500);
    background: var(--nx-slate-100); border-radius: 999px; padding: 3px 10px;
}
.summary-lines { display: flex; flex-direction: column; gap: 11px; }
.summary-line {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font-size: .92rem; color: var(--nx-slate-600);
}
.summary-line strong { color: var(--nx-slate-900); font-variant-numeric: tabular-nums; }
.summary-line.summary-discount strong { color: #047857; }
.summary-total {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px; padding-top: 14px;
    border-top: 2px solid var(--nx-slate-900);
}
.summary-total span { font-size: .95rem; font-weight: 700; color: var(--nx-slate-900); }
.summary-total strong {
    font-size: 1.4rem; font-weight: 800; color: var(--nx-slate-900);
    font-variant-numeric: tabular-nums;
}

/* v28 — the CHECKOUT summary uses .flex-between / .total-row (its own
   markup). Give it the SAME hierarchy as the cart so the two screens
   read identically: quiet lines, then a strong Total. */
.summary-lines .flex-between {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font-size: .92rem; color: var(--nx-slate-600);
    padding: 5px 0;
}
.summary-lines .flex-between > span:last-child { color: var(--nx-slate-900); font-variant-numeric: tabular-nums; }
.summary-lines .total-row {
    margin-top: 10px; padding-top: 14px;
    border-top: 2px solid var(--nx-slate-900);
}
.summary-lines .total-row strong:first-child { font-size: .95rem; color: var(--nx-slate-900); }
.summary-lines .total-row strong:last-child {
    font-size: 1.4rem; font-weight: 800; color: var(--nx-slate-900);
    font-variant-numeric: tabular-nums;
}

/* --- v28 mobile sticky checkout bar ------------------------------------ */
.cart-mobile-bar { display: none; }
@media (max-width: 900px) {
    .cart-mobile-bar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid var(--nx-slate-200);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .10);
    }
    .cart-mobile-total { display: flex; flex-direction: column; line-height: 1.15; }
    .cart-mobile-total span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-slate-500); }
    .cart-mobile-total strong { font-size: 1.1rem; font-weight: 800; color: var(--nx-slate-900); font-variant-numeric: tabular-nums; }
    .cart-mobile-bar .btn { padding: 11px 20px; font-weight: 800; border-radius: 10px; }
    /* Keep the last row clear of the fixed bar. */
    .cart-page { padding-bottom: 96px; }
    /* The floating contact button sits in the bottom-right corner; reserve
       room on the in-page summary so a price is never hidden underneath it.
       The summary is also un-stuck here: in a single column a sticky panel
       just trails the scroll and adds nothing. */
    .cart-summary { padding-right: 62px; position: static; }
    .cart-row { padding-right: 8px; }
}

/* --- empty state -------------------------------------------------------- */
.cart-empty { padding: 54px 24px; text-align: center; }
.cart-empty-ico { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.cart-empty h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--nx-slate-900); }
.cart-empty p { margin: 0 auto 20px; max-width: 380px; }

@media (max-width: 900px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr); }
    .cart-summary { position: static; top: auto; }
}
@media (max-width: 560px) {
    .cart-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .cart-row-img img { width: 64px; height: 64px; }
    .cart-row-total { grid-column: 2; justify-self: start; margin-top: 2px; }
    .cart-items-head { padding: 14px; }
    /* v28 — keep the right gutter so the floating contact button never
       covers a price on a narrow phone. */
    .cart-summary { padding: 16px; padding-right: 62px; }
}

/* ---------------------------------------------------------------------------
   13. PRINT — the theme must not tint paper.
   --------------------------------------------------------------------------- */
@media print {
    .site-footer, .nx-catbar, .header-top, .nx-fab, .nx-chat-fab,
    .cookie-banner, .nx-steps { display: none !important; }
    .card, .table thead th { box-shadow: none !important; background: #fff !important; }
    .btn-primary { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
}


/* === v21 store-owner UI tweaks =========================================
   Product LIST: keep discount badge, but cart CTA uses dark (not rose/red).
   Floating Messenger FAB: real Messenger blue (not brand rose).
   ====================================================================== */
.product-card .btn-add-cart,
.product-card .btn.btn-add-cart {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
}
.product-card .btn-add-cart:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #fff !important;
}
/* Discount corner badge can stay; inline off label slightly softer */
.product-card .pc-off {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.nx-fab-btn.is-msg {
    background: #0084FF !important;
    border-color: #0084FF !important;
    color: #fff !important;
}
.nx-fab-btn.is-msg:hover {
    background: #006fff !important;
}


/* ========================================================================
   v22 visual refinement — calm teal/blue, cleaner v17-inspired product cards
   and a more welcoming customer sign-in page. Layout/ERP logic is untouched.
   ======================================================================== */
:root {
  --nx-ind-50:#effaf8; --nx-ind-100:#d7f3ee; --nx-ind-200:#b2e8de;
  --nx-ind-300:#7dd6c8; --nx-ind-400:#43bfae; --nx-ind-500:#239f91;
  --nx-ind-600:#168578; --nx-ind-700:#146b63; --nx-ind-800:#14564f;
  --nx-ind-900:#124741;
  --primary:#168578; --primary-dark:#146b63;
  --accent:#60a5fa; --nx-brand:#168578; --nx-brand-dark:#146b63;
  --nx-brand-tint:#effaf8; --nx-grad:linear-gradient(135deg,#239f91 0%,#168578 58%,#146b63 100%);
  --nx-grad-soft:linear-gradient(135deg,#f0fdfa 0%,#eff6ff 100%);
  --nx-grad-chrome:linear-gradient(120deg,#102a43 0%,#163b50 65%,#146b63 100%);
  --nx-ring:0 0 0 3px rgba(22,133,120,.18);
  /* v25 — the ONE colour used for a discount / fixed-amount saving.
     The owner asked for the discount colour to change in exactly two
     places (the product card and the product detail page) and nowhere
     else, so both read from this single variable. Change it here and
     both surfaces follow. */
  --nx-discount:#dc2626;
}
/* Keep the discount marker clearly recognizable, but remove the red look from
   the rest of the shopping experience. */
.btn-primary { background:var(--nx-grad); box-shadow:0 4px 12px rgba(22,133,120,.18); }
.btn-primary:hover { background:linear-gradient(135deg,#168578,#14564f); box-shadow:0 7px 18px rgba(22,133,120,.23); }
.nx-search button { background:var(--nx-grad); }
.nx-search button:hover { background:linear-gradient(135deg,#168578,#14564f); }
.brand-mark { background:var(--nx-grad)!important; box-shadow:0 3px 10px rgba(22,133,120,.22); }
.nx-badge { background:var(--nx-grad); box-shadow:0 2px 6px rgba(22,133,120,.22); }
.header-top { background:var(--nx-grad-chrome); }
.page-title::after { background:var(--nx-grad); }

/* Product cards: simpler and closer to the previous compact shop-card style. */
.grid.grid-4 { gap:14px; }
.product-card {
  border:1px solid #e5eaf0; border-radius:10px; box-shadow:0 1px 3px rgba(15,23,42,.045);
  transform:none; transition:border-color .18s ease,box-shadow .18s ease;
}
.product-card:hover { transform:translateY(-2px); border-color:#b2e8de; box-shadow:0 7px 18px rgba(15,23,42,.085); }
.pc-img-wrap { position:relative; aspect-ratio:1/1; background:#fff; padding:10px; }
.pc-img-wrap img { object-fit:contain; transition:transform .2s ease; }
.product-card:hover .pc-img-wrap img { transform:scale(1.025); }
.pc-body { padding:11px 12px 13px; }
.pc-title { font-size:.91rem; line-height:1.4; min-height:2.65em; max-height:2.65em; margin-bottom:7px; }
.pc-title a { color:#263746; text-decoration:none; }
.pc-title a:hover { color:var(--nx-ind-700); }
.pc-amount,.price { color:#142b3a; font-weight:800; }
.pc-meta { color:#718096; font-size:.78rem; }
.pc-actions { margin-top:auto; padding-top:10px; }
.product-card .btn-add-cart,.product-card .btn.btn-add-cart {
  width:100%; min-height:38px; border-radius:7px; background:#168578; color:#fff;
  border:1px solid #168578; font-size:.86rem; font-weight:700; box-shadow:none;
}
.product-card .btn-add-cart:hover { background:#146b63; border-color:#146b63; }
.pc-badge { background:#dc2626; color:#fff; }
@media(max-width:480px) {
  .grid.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .pc-body { padding:9px 9px 11px; }
  .pc-title { font-size:.82rem; }
  .pc-amount { font-size:.95rem; }
  .pc-meta { font-size:.7rem; }
  .product-card .btn-add-cart,.product-card .btn.btn-add-cart { min-height:36px; font-size:.8rem; }
}

/* Customer login / registration forms */
.auth-page { max-width:980px; margin:28px auto 42px; }
.auth-card { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); overflow:hidden; border:1px solid #e4eaf0; border-radius:18px; background:#fff; box-shadow:0 14px 42px rgba(15,42,67,.09); }
.auth-intro { display:flex; flex-direction:column; justify-content:center; padding:38px 34px; color:#eaf6f8; background:linear-gradient(145deg,#102a43 0%,#164e63 58%,#168578 100%); }
.auth-intro h2 { color:#fff; font-size:1.8rem; line-height:1.2; margin:0 0 12px; }
.auth-intro p { color:#d8e9ee; line-height:1.65; margin:0 0 18px; }
.auth-points { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px; }
.auth-points li { display:flex; gap:10px; align-items:flex-start; color:#f2fbfc; font-size:.92rem; }
.auth-check { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-weight:800; }
.auth-form-panel { padding:38px clamp(22px,4vw,48px); }
.auth-form-panel .page-title { margin-bottom:8px; }
.auth-subtitle { color:#64748b; margin:0 0 24px; }
.auth-form-panel .form-group { margin-bottom:17px; }
.auth-form-panel label { display:block; margin-bottom:7px; font-size:.9rem; }
.auth-form-panel .form-control { min-height:46px; padding:11px 13px; }
.auth-submit { width:100%; min-height:46px; margin-top:5px; border-radius:9px; }
.auth-links { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; font-size:.9rem; }
.auth-links a { color:#146b63; font-weight:650; text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }
@media(max-width:680px) {
 .auth-page { margin:16px auto 28px; }
 .auth-card { grid-template-columns:1fr; border-radius:14px; }
 .auth-intro { padding:24px 22px; }
 .auth-intro h2 { font-size:1.45rem; }
 .auth-points { grid-template-columns:1fr; gap:8px; }
 .auth-form-panel { padding:25px 22px 28px; }
}


/* v23 refinement: calmer teal/blue palette, roomier product imagery and compact labels */
:root {
  --nx-ind-50:#eff6ff; --nx-ind-100:#dbeafe; --nx-ind-200:#bfdbfe;
  --nx-ind-300:#93c5fd; --nx-ind-400:#60a5fa; --nx-ind-500:#3b82f6;
  --nx-ind-600:#2563eb; --nx-ind-700:#1d4ed8; --nx-ind-800:#1e40af; --nx-ind-900:#1e3a8a;
  --primary:#2563eb; --primary-dark:#1d4ed8; --accent:#14b8a6;
  --nx-brand:#2563eb; --nx-brand-dark:#1d4ed8; --nx-brand-tint:#eff6ff;
  --nx-grad:linear-gradient(135deg,#2563eb 0%,#0f766e 100%);
  --nx-grad-soft:linear-gradient(135deg,#eff6ff 0%,#f0fdfa 100%);
  --nx-grad-chrome:linear-gradient(120deg,#0f172a 0%,#1e293b 100%);
  --nx-ring:0 0 0 3px rgba(37,99,235,.16);
}
.btn-primary,.nx-search button,.brand-mark { background:var(--nx-grad)!important; }
.btn-primary:hover,.nx-search button:hover { background:linear-gradient(135deg,#1d4ed8,#115e59)!important; }
.btn-outline { border-color:#bfdbfe; color:#1d4ed8; }
.btn-outline:hover { background:#eff6ff; border-color:#60a5fa; color:#1d4ed8; }

/* Listing cards: larger image canvas; preserve full product without cropping. */
.product-card { border-radius:12px; overflow:hidden; }
.pc-img-wrap { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; min-height:164px; padding:8px; background:#fff; overflow:hidden; }
.pc-img-wrap img { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; object-position:center; }
.pc-body { padding:10px 11px 11px; }
.pc-title { font-size:.9rem; line-height:1.35; min-height:2.45em; max-height:2.45em; margin:0 0 5px; }
.pc-price { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; row-gap:2px; line-height:1.35; }
.pc-amount { font-size:.96rem; }
.old-price { font-size:.76rem; }
/* Discount text below title/price stays plain text, not a colored box. */
.pc-off { display:inline; padding:0; margin:0; background:transparent!important; color:#0f766e!important; border:0; border-radius:0; font-size:.74rem; font-weight:600; letter-spacing:0; white-space:nowrap; }
.pc-badge { border-radius:5px; font-size:.7rem; padding:4px 7px; box-shadow:none; }
.pc-meta { font-size:.72rem; line-height:1.35; margin-top:5px; }
.pc-actions { padding-top:8px; }
.product-card .btn-add-cart,.product-card .btn.btn-add-cart { min-height:35px; border-radius:7px; font-size:.78rem; background:#0f172a; border-color:#0f172a; }
.product-card .btn-add-cart:hover,.product-card .btn.btn-add-cart:hover { background:#1e293b; border-color:#1e293b; }

/* Product detail: mobile quantity and both purchase actions remain aligned. */
.pdp-grid { min-width:0; }
.pdp-gallery,.pdp-buy-box,.pdp-info { min-width:0; }
.pdp-main-wrap { display:flex; align-items:center; justify-content:center; min-height:260px; padding:12px; }
.pdp-main-img { display:block; max-width:100%; width:100%; max-height:460px; object-fit:contain; object-position:center; }
.pdp-actions { display:grid; grid-template-columns:minmax(68px,.65fr) minmax(0,1fr) minmax(0,1fr); align-items:end; gap:8px; }
.pdp-actions .qty-wrap { min-width:0; }
.pdp-actions .qty-wrap .form-control { width:100%; min-width:0; }
.pdp-actions .btn-buy { width:100%; min-width:0; min-height:42px; padding:9px 10px; white-space:normal; line-height:1.2; }
.pdp-buy-box { padding:14px; }

/* Wholesale/ERP panels use neutral surfaces and restrained blue accents. */
.wholesale-page .card,.wholesale .card,.ws-card { border-radius:10px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.wholesale-page .btn-primary,.wholesale .btn-primary { background:#2563eb!important; }
.wholesale-page input:focus,.wholesale-page select:focus,.wholesale input:focus,.wholesale select:focus { border-color:#60a5fa; box-shadow:var(--nx-ring); }
.wholesale-page .page-title::after,.wholesale .page-title::after { background:linear-gradient(90deg,#2563eb,#0f766e); }

@media (max-width:680px) {
  .pc-img-wrap { min-height:0; aspect-ratio:1/1; padding:7px; }
  .pc-body { padding:8px 9px 9px; }
  .pc-title { font-size:.82rem; line-height:1.3; min-height:2.6em; max-height:2.6em; margin-bottom:4px; }
  .pc-amount { font-size:.88rem; }
  .pc-meta { font-size:.66rem; }
  .product-card .btn-add-cart,.product-card .btn.btn-add-cart { min-height:33px; font-size:.74rem; padding:6px 7px; }
  .pdp-grid { grid-template-columns:minmax(0,1fr)!important; gap:14px!important; }
  .pdp-main-wrap { min-height:0; height:clamp(230px,72vw,360px); padding:8px; }
  .pdp-main-img { max-height:100%; height:100%; width:100%; object-fit:contain; }
  .pdp-actions { grid-template-columns:72px minmax(0,1fr) minmax(0,1fr); gap:6px; }
  .pdp-actions .qty-wrap label { font-size:.78rem; }
  .pdp-actions .qty-wrap .form-control { height:42px; padding:7px 5px; font-size:.9rem; }
  .pdp-actions .btn-buy { min-height:42px; padding:7px 5px; font-size:.78rem; }
  .pdp-buy-box { padding:10px; }
}
@media (max-width:380px) {
  .pdp-actions { grid-template-columns:64px minmax(0,1fr) minmax(0,1fr); gap:5px; }
  .pdp-actions .btn-buy { font-size:.72rem; }
}

/* ============================================================================
   v24 — DESIGN CORRECTION LAYER  (loaded last, so it wins the cascade)
   ============================================================================
   The owner reviewed v23 and asked for four corrections. Each rule is scoped
   to the exact selectors involved, so nothing else on the site moves:

     1. PRODUCT CARD   — restore the v17 card: square image, cover-fit, NO
        discount badge (the discount is plain text in the price row).
     2. STANDARD SIZING — one button / input / label / card scale, so no
        element is needlessly oversized.
     3. COLOUR         — neutral slate chrome + ONE restrained blue accent,
        applied only to actions, never to whole surfaces.
     4. DASHBOARD / CHECKOUT / CHAT — compact chart cards, a tidy order
        summary, and three small floating contact buttons.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. PRODUCT CARD — v17 look restored
   --------------------------------------------------------------------------- */
.grid.grid-4 { gap: 16px; }

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .045);
    transform: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* The generic `.card { padding:18px }` rule below has the SAME specificity as
   `.product-card`, so it would win on source order and inset the product
   image by 18px on every side. This two-class selector outranks it. */
.card.product-card { padding: 0; }
.product-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
}

/* Square image canvas, identical on every card, so a row of cards lines up
   no matter what shape the source photo is. `cover` fills the square without
   letterboxing; the old `contain` + min-height:164px made some cards taller
   than others and left white bands around portrait photos. */
.pc-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    /* White, not grey: the demo product PNGs carry their own white padding,
       so a grey canvas showed through as an ugly inset frame around every
       photo. White makes the image read as edge-to-edge. */
    background: #fff;
    overflow: hidden;
}
.pc-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border-radius: 0;
    transition: transform .2s ease;
}
.product-card:hover .pc-img-wrap img { transform: scale(1.03); }

/* v27: the discount badge is BACK, pinned to the top-left of the image, as the
   owner's target markup requires. It shares --nx-discount with the inline
   `.pc-off` text so the two always match. Solid red, white text, small radius. */
.pc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--nx-discount);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .35);
}

.pc-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.pc-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
    min-height: 2.7em;
    max-height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pc-title a { color: #0f172a; text-decoration: none; }
.pc-title a:hover { color: #1d4ed8; text-decoration: underline; }

.pc-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    line-height: 1.35;
    margin-bottom: 6px;
    min-height: 1.6em;
}
.pc-amount, .price { color: #111827; font-weight: 800; font-size: 1.05rem; }
.old-price { font-size: .78rem; color: #94a3b8; text-decoration: line-through; }

/* Discount = plain text, no box, no background.
   v26: colour comes from --nx-discount (RED), as the owner asked. This is one
   of the two places the owner asked to recolour; the other is .pdp-off-badge
   in style.css. Nothing else in the shop uses this colour. */
.pc-off {
    display: inline;
    padding: 0;
    margin: 0;
    background: transparent !important;
    color: var(--nx-discount) !important;
    border: 0;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}
.pc-plus { font-size: .72rem; color: #94a3b8; }

.pc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; min-height: 1.2em; font-size: .78rem; color: #64748b; }
.pc-stock { font-size: .78rem; color: #64748b; }
.pc-stock.out { color: #dc2626; }
.pc-sold { font-size: .78rem; color: #64748b; }
.pc-actions { margin-top: auto; padding-top: 10px; }
.pc-actions-single { display: block !important; }
.pc-add-form { margin: 0; }

.product-card .btn-add-cart,
.product-card .btn.btn-add-cart {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #111827;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}
.product-card .btn-add-cart:hover,
.product-card .btn.btn-add-cart:hover { background: #030712; border-color: #030712; }

@media (max-width: 480px) {
    .grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pc-body { padding: 9px 10px 11px; }
    .pc-title { font-size: .82rem; }
    .pc-amount { font-size: .95rem; }
    .pc-meta { font-size: .7rem; }
    .product-card .btn-add-cart,
    .product-card .btn.btn-add-cart { min-height: 34px; font-size: .78rem; }
}

/* ---------------------------------------------------------------------------
   2. STANDARD SIZING — one scale for buttons, inputs, labels, cards
   --------------------------------------------------------------------------- */
.btn {
    min-height: 38px;
    padding: 9px 16px;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1.2;
}
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: .8rem; }
.btn-xs { min-height: 28px; padding: 4px 10px; font-size: .74rem; }
.btn-lg { min-height: 44px; padding: 11px 22px; font-size: .95rem; }

.form-control {
    min-height: 40px;
    padding: 9px 12px;
    font-size: .9rem;
    border-radius: 8px;
}
label { font-size: .86rem; font-weight: 600; color: #334155; }
.form-group { margin-bottom: 14px; }

.card { padding: 18px; border-radius: 12px; }
.card > h3:first-child, .card > h2:first-child { font-size: 1.02rem; padding-bottom: 10px; margin-bottom: 14px; }
.page-title { font-size: 1.5rem; margin-bottom: 18px; padding-bottom: 10px; }

/* ---------------------------------------------------------------------------
   3. COLOUR — neutral base + ONE restrained accent
   ---------------------------------------------------------------------------
   The accent is a single blue. It is applied to ACTIONS only (primary
   button, active nav, links, focus ring). Chrome stays neutral slate, so the
   page reads as a clean shop rather than a coloured-in one. */
:root {
    --nx-ind-50:  #eff6ff;
    --nx-ind-100: #dbeafe;
    --nx-ind-200: #bfdbfe;
    --nx-ind-300: #93c5fd;
    --nx-ind-400: #60a5fa;
    --nx-ind-500: #3b82f6;
    --nx-ind-600: #1d4ed8;
    --nx-ind-700: #1e40af;
    --nx-ind-800: #1e3a8a;
    --nx-ind-900: #172554;
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --accent: #0f766e;
    --nx-brand: #1d4ed8;
    --nx-brand-dark: #1e40af;
    --nx-brand-tint: #eff6ff;
    --nx-grad: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --nx-grad-soft: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    --nx-grad-chrome: linear-gradient(120deg, #0f172a 0%, #1e293b 100%);
    --nx-ring: 0 0 0 3px rgba(29, 78, 216, .16);
}

/* Solid accent on the primary action — a gradient on every button was part
   of what made v23 feel over-coloured. */
.btn-primary,
.btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-primary:hover { background: #1e40af !important; border-color: #1e40af !important; }
.btn-primary { box-shadow: 0 2px 8px rgba(29, 78, 216, .18); }
.nx-search button { background: #1d4ed8 !important; }
.nx-search button:hover { background: #1e40af !important; }
.brand-mark { background: #1d4ed8 !important; box-shadow: 0 3px 10px rgba(29, 78, 216, .22); }
.nx-badge { background: #dc2626 !important; }
.page-title::after { background: #1d4ed8; }

/* ---------------------------------------------------------------------------
   4a. DASHBOARD — compact chart cards
   --------------------------------------------------------------------------- */
.nx-chart-card { padding: 16px 18px 18px; }
.nx-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.nx-chart-head h3 { font-size: 1rem; }
.nx-chart-switch { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 8px; padding: 3px; }
.nx-chart-switch button {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: 6px;
    font-size: .78rem; font-weight: 600; color: #64748b;
}
.nx-chart-switch button.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.nx-chart-wrap { width: 100%; }
.nx-chart-wrap svg { display: block; width: 100%; height: auto; max-height: 200px; }
.nx-chart-empty { padding: 28px 0; text-align: center; color: #94a3b8; font-size: .88rem; }
.nx-chart-sub { margin: 16px 0 6px; font-size: .84rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .4px; }
.nx-chart-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nx-chart-stat { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px; padding: 9px 11px; }
.nx-chart-stat span { display: block; font-size: .72rem; color: #64748b; margin-bottom: 3px; }
.nx-chart-stat strong { font-size: .95rem; color: #0f172a; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .nx-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-chart-wrap svg { max-height: 170px; }
}

/* Stat cards: compact, not oversized. */
.stat-card { padding: 14px 16px; }
.stat-card .stat-value { font-size: 1.35rem; }
.stat-card .stat-label { font-size: .78rem; }
.stat-card .stat-icon { font-size: 1.3rem; }

/* ---------------------------------------------------------------------------
   4b. CHECKOUT — tidy order summary
   --------------------------------------------------------------------------- */
.checkout-grid { align-items: start; }
.order-summary { position: sticky; top: 16px; padding: 18px; }
.order-summary h3 { font-size: 1rem; padding-bottom: 10px; margin: 0 0 12px; border-bottom: 1px solid #eef2f7; }
.order-summary .table { font-size: .86rem; margin-bottom: 12px; }
.order-summary .table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .3px; color: #94a3b8; font-weight: 700; }
.order-summary .table td { padding: 7px 6px; vertical-align: top; }
.summary-lines { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.summary-lines .flex-between { align-items: baseline; }
.summary-lines span:last-child, .summary-lines strong { font-variant-numeric: tabular-nums; }
.summary-hr { border: 0; border-top: 1px solid #eef2f7; margin: 12px 0; }
.total-row { font-size: 1.05rem; padding-top: 4px; }
.total-row strong { font-size: 1.25rem; color: #0f172a; }
/* Keep the Total figure flush with the prices above it. The larger font made
   it look inset, so pin the right edge and use tabular figures. */
.total-row { display: flex; justify-content: space-between; align-items: baseline; }
.total-row > strong:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.nx-co-secure { font-size: .78rem; color: #64748b; text-align: center; margin: 10px 0 0; }

@media (max-width: 900px) {
    /* On a phone the summary must come FIRST, so the buyer sees the total
       before filling the form — not after scrolling past it. */
    .checkout-grid { display: flex; flex-direction: column; }
    .checkout-grid > div:last-child { order: -1; }
    .order-summary { position: static; }
}

/* ---------------------------------------------------------------------------
   4c. FLOATING CONTACT BUTTONS — chat + WhatsApp + Messenger
   --------------------------------------------------------------------------- */
.nx-fab { position: fixed; right: 18px; bottom: 22px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; }
/* The floating contact buttons sit over the page by design, but on a wide
   screen they must not cover the order summary's totals. Reserve a gutter on
   the summary column so the numbers always stay clear of the buttons. */
@media (min-width: 901px) {
    .order-summary { margin-right: 4px; }
    .checkout-grid > div:last-child { padding-right: 62px; }
}
.nx-fab-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
    transition: transform .16s ease, box-shadow .16s ease;
}
.nx-fab-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 7px 20px rgba(15, 23, 42, .28); }
.nx-fab-btn svg { width: 24px; height: 24px; fill: currentColor; }
.nx-fab-btn.is-wa  { background: #25D366; }
.nx-fab-btn.is-msg { background: #0084FF; }
.nx-chat-fab {
    position: fixed; right: 18px; bottom: 22px; z-index: 9999;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: #1d4ed8; color: #fff; font-size: 1.3rem;
    box-shadow: 0 5px 16px rgba(29, 78, 216, .32);
    transition: transform .16s ease;
}
.nx-chat-fab:hover { transform: scale(1.06); }
@media (max-width: 480px) {
    .nx-fab { right: 14px; }
    .nx-fab-btn { width: 42px; height: 42px; }
    .nx-fab-btn svg { width: 22px; height: 22px; }
    .nx-chat-fab { right: 14px; width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------------------
   4d. LANDING PAGES — public /lp/{slug}
   --------------------------------------------------------------------------- */
.lp-page { max-width: 1000px; margin: 0 auto; padding: 22px 16px 40px; }
.lp-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 22px;
}
.lp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.lp-hero-inner { position: relative; z-index: 1; padding: 44px 26px; max-width: 720px; }
.lp-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; }
.lp-sub { color: #e2e8f0; font-size: 1.02rem; line-height: 1.6; margin: 0 0 22px; }
.lp-hero-plain { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.lp-cta { box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.lp-body { font-size: .98rem; line-height: 1.75; color: #334155; }
.lp-body h2 { font-size: 1.25rem; margin: 18px 0 10px; }
.lp-body h3 { font-size: 1.08rem; margin: 16px 0 8px; }
.lp-body p { margin: 0 0 12px; }
.lp-body ul, .lp-body ol { margin: 0 0 12px; padding-left: 22px; }
.lp-body img { max-width: 100%; height: auto; border-radius: 10px; }
.lp-foot-cta { text-align: center; margin-top: 26px; }

/* v26: PDP Wishlist / Compare buttons are RED (owner request). */
.btn-wish, .btn-compare { color: #dc2626 !important; border-color: #dc2626 !important; }
.btn-wish:hover, .btn-compare:hover { background: #dc2626 !important; color: #fff !important; }
@media (max-width: 640px) {
    .lp-hero { min-height: 240px; border-radius: 12px; }
    .lp-hero-inner { padding: 30px 18px; }
}

/* ==================================================================
   v28 — FLASH TOAST (fixed position, always visible)

   The flash message used to sit at the top of the page as a plain
   .alert block. After a POST the browser restores the previous scroll
   position, so the message was rendered but never SEEN — the reported
   "save korle kono message ashe na, reload dile dekhay save hoye geche".
   Pinning it to the viewport fixes that for every form in the app.
   ================================================================== */
.nx-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.nx-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    font-size: .92rem;
    line-height: 1.45;
    color: #0f172a;
    animation: nxToastIn .22s ease-out;
}
.nx-toast--success { border-left-color: #10b981; background: #f0fdf4; color: #065f46; }
.nx-toast--error   { border-left-color: #dc2626; background: #fef2f2; color: #991b1b; }
.nx-toast--info    { border-left-color: #1d4ed8; background: #eff6ff; color: #1e3a8a; }
.nx-toast__icon {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: #fff;
    background: #64748b;
}
.nx-toast--success .nx-toast__icon { background: #10b981; }
.nx-toast--error   .nx-toast__icon { background: #dc2626; }
.nx-toast--info    .nx-toast__icon { background: #1d4ed8; }
.nx-toast__msg { flex: 1 1 auto; }
.nx-toast__close {
    flex: 0 0 auto;
    background: none; border: 0; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: inherit; opacity: .55;
    padding: 0 2px;
}
.nx-toast__close:hover { opacity: 1; }
.nx-toast--out { opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s; }
@keyframes nxToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .nx-toast-stack { top: 10px; right: 10px; left: 10px; max-width: none; }
}

/* v28 — a submit button that is mid-flight shows it, so a slow POST never
   looks like "nothing happened". */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nxSpin .6s linear infinite;
}
@keyframes nxSpin { to { transform: rotate(360deg); } }

/* ==================================================================
   v28 — mobile cart: keep the floating contact button off the summary.

   Placed at the END of the file on purpose: `.cart-summary` is also a
   `.card`, and the later `.card { padding: 18px }` rule (same
   specificity) was overriding the gutter declared earlier. Declaring it
   last wins the cascade without resorting to !important.
   ================================================================== */
@media (max-width: 900px) {
    .cart-summary.card { padding-right: 62px; }
}
@media (max-width: 560px) {
    .cart-summary.card { padding: 16px; padding-right: 62px; }
}