/* ============================================================================
   store.css — NarneTech.shop storefront theme layer
   Loaded by Areas/Store _Layout after Bootstrap. Per-tenant colors arrive via
   --nt-primary / --nt-secondary custom properties set inline in the layout.
   Sections: base · header · buttons · product cards · sections · hero ·
   category tiles · gallery · filters · cart drawer · toasts · skeletons ·
   reveal animations · floating widgets · themes (a–f) · reduced motion
   ========================================================================= */

/* ---------- base ---------- */
:root {
    /* Brand palette. These defaults match the previous hard-coded look, so a store that hasn't set colours is
       unchanged; the storefront layout overrides them per-tenant from StoreSettings. All four are owner-editable
       (Theme Store → Store colours): primary/secondary = accents, dark = text/headings, light = page background. */
    --nt-primary: #0d6efd;
    --nt-secondary: #6c757d;
    --nt-dark: #212529;
    --nt-light: #ffffff;
    --nt-primary-rgb: 13, 110, 253;
    --nt-radius: .75rem;
    --nt-shadow-sm: 0 2px 8px rgba(17, 24, 39, .06);
    --nt-shadow-md: 0 8px 24px rgba(17, 24, 39, .10);
    --nt-shadow-lg: 0 16px 40px rgba(17, 24, 39, .16);
}
body { background-color: var(--nt-light) !important; color: var(--nt-dark); }

/* The owner's brand palette governs storefront accents — Bootstrap's built-in semantic colours (e.g. the green
   .text-success / .bg-success on icons and badges) must not override the chosen colours, or a store that picked
   grey/black still shows stray green. Map them onto the brand primary across the storefront (store.css only loads
   on the storefront, so panels/checkout semantics are untouched). */
.text-success { color: var(--nt-primary) !important; }
.btn-success { background-color: var(--nt-primary) !important; border-color: var(--nt-primary) !important; color: #fff !important; }
.bg-success { background-color: var(--nt-primary) !important; }
.link-success { color: var(--nt-primary) !important; }

/* ---------- mobile-first overflow safety (applies to every theme) ----------
   The storefront is mobile-first: no page may ever scroll sideways. `overflow-x:
   clip` stops any stray-wide element from forcing a horizontal drag, while (unlike
   `overflow: hidden`) NOT creating a scroll container — so the sticky header and
   any inner `overflow-x:auto` scrollers (brand strip, responsive tables, account
   nav) keep working. Media is capped to its container so no image/embed can bleed
   past the viewport. */
html, body { overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* Owner-authored rich text (product description, reviews, CMS pages, footer info)
   is arbitrary HTML — long unbroken tokens (URLs/SKUs), oversized images and wide
   tables all break a phone layout. Force everything to stay inside its box. */
.nt-richtext { overflow-wrap: anywhere; word-break: break-word; }
.nt-richtext :is(img, video, iframe) { max-width: 100%; height: auto; }
.nt-richtext :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }

.text-brand { color: var(--nt-primary); }
.bg-brand { background: var(--nt-primary); color: #fff; }
.bg-brand-soft { background: color-mix(in srgb, var(--nt-primary) 10%, #fff); }

/* ---------- header ---------- */
.nt-announce {
    background: linear-gradient(90deg, var(--nt-primary), color-mix(in srgb, var(--nt-primary) 70%, #000));
    color: #fff;
    letter-spacing: .02em;
}
.nt-header {
    border-bottom: 1px solid #eee;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s ease;
}
.nt-header.is-stuck { box-shadow: var(--nt-shadow-md); }
/* Brand name: let it shrink inside the flex header, and on phones scale down + wrap to
   ~2 lines so a long store name shows fully instead of being clipped (never overflows). */
.nt-header .navbar-brand { min-width: 0; }
.nt-brand-name { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .nt-header .navbar-brand { white-space: normal; }
    .nt-brand-name {
        font-size: clamp(.95rem, 4.2vw, 1.25rem);
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.nt-search .form-control {
    border-radius: 999px;
    padding-left: 2.5rem;
    background: #f4f5f7;
    border-color: transparent;
    transition: background .15s ease, box-shadow .15s ease;
}
.nt-search .form-control:focus {
    background: #fff;
    border-color: var(--nt-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nt-primary) 18%, transparent);
}
.nt-search { position: relative; }
.nt-search .nt-search-icon {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: #98a2b3; pointer-events: none;
}
.nt-iconbtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #344054; background: transparent; border: 0;
    font-size: 1.25rem;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nt-iconbtn:hover { background: #f2f4f7; color: var(--nt-primary); transform: translateY(-1px); }
.nt-badge-count {
    position: absolute; top: 2px; right: 0;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px;
    background: var(--nt-primary); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
    transform: scale(1);
    transition: transform .15s ease;
}
.nt-badge-count.nt-badge-pop { animation: nt-pop .35s ease; }
@keyframes nt-pop { 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.nt-navlink { color: #333; font-weight: 500; text-decoration: none; }
.nt-navlink:hover { color: var(--nt-primary); }

/* ---------- buttons ---------- */
.btn-brand {
    background: var(--nt-primary); color: #fff; border: 1px solid var(--nt-primary);
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-brand:hover, .btn-brand:focus {
    filter: brightness(.92); color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--nt-primary) 35%, transparent);
}
.btn-brand:active { transform: scale(.98); }
.btn-outline-brand {
    color: var(--nt-primary); border: 1px solid var(--nt-primary); background: transparent;
    transition: all .15s ease;
}
.btn-outline-brand:hover { background: var(--nt-primary); color: #fff; }

/* ---------- product cards ---------- */
.product-card {
    border: 1px solid #eef0f3;
    border-radius: var(--nt-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nt-shadow-md);
    border-color: transparent;
}
.product-card .nt-card-media { position: relative; overflow: hidden; }
.product-card .nt-card-media img { transition: transform .35s ease; }
.product-card:hover .nt-card-media img { transform: scale(1.06); }
.nt-card-actions {
    position: absolute; top: .5rem; right: .5rem;
    display: flex; flex-direction: column; gap: .4rem;
    opacity: 0; transform: translateX(6px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 3;
}
.product-card:hover .nt-card-actions, .nt-card-actions:focus-within { opacity: 1; transform: translateX(0); }
@media (hover: none) { .nt-card-actions { opacity: 1; transform: none; } }
.nt-card-actions .nt-actbtn {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 0; color: #344054;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--nt-shadow-sm);
    transition: color .15s ease, transform .15s ease, background .15s ease;
}
.nt-card-actions .nt-actbtn:hover { color: var(--nt-primary); transform: scale(1.1); }
.nt-actbtn.is-wished, .nt-wishbtn.is-wished { color: #e0245e !important; }
.nt-quickadd {
    position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 3;
}
.product-card:hover .nt-quickadd { opacity: 1; transform: translateY(0); }
@media (hover: none) { .nt-quickadd { display: none; } }
.nt-rating { color: #f5a623; font-size: .85rem; letter-spacing: 1px; }
.nt-rating .muted-star { color: #d8dbe0; }
.nt-badge-discount {
    position: absolute; top: .5rem; left: .5rem; z-index: 3;
    background: #e03131; color: #fff; font-weight: 700;
    border-radius: .35rem; padding: .2rem .45rem; font-size: .72rem;
}
.nt-badge-new {
    position: absolute; top: 2.2rem; left: .5rem; z-index: 3;
    background: #0ca678; color: #fff; font-weight: 700;
    border-radius: .35rem; padding: .2rem .45rem; font-size: .72rem;
}

/* ---------- sections ---------- */
.nt-section { margin: 3rem 0; }
.nt-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; }
.nt-section-title { font-weight: 700; position: relative; padding-bottom: .45rem; margin: 0; }
.nt-section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 48px; height: 3px; border-radius: 3px;
    background: var(--nt-primary);
}
.nt-usp { background: #f8f9fb; border-radius: var(--nt-radius); }
.nt-usp .nt-usp-item { display: flex; align-items: center; gap: .75rem; padding: 1rem; }
.nt-usp i { font-size: 1.6rem; color: var(--nt-primary); }

/* ---------- hero / banners ---------- */
.nt-hero { border-radius: var(--nt-radius); overflow: hidden; box-shadow: var(--nt-shadow-md); }
.nt-hero .carousel-item { position: relative; }
.nt-hero .carousel-item img { width: 100%; object-fit: cover; max-height: 460px; }
.nt-hero .nt-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.nt-hero .carousel-caption {
    text-align: left; left: 6%; right: auto; bottom: auto; top: 50%;
    transform: translateY(-50%); max-width: 480px;
}
.nt-hero .carousel-caption h2 { font-weight: 800; font-size: clamp(1.3rem, 3.5vw, 2.6rem); text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.nt-hero .carousel-caption p { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.nt-hero .carousel-item.active .carousel-caption > * { animation: nt-caption .6s ease both; }
.nt-hero .carousel-item.active .carousel-caption > *:nth-child(2) { animation-delay: .12s; }
.nt-hero .carousel-item.active .carousel-caption > *:nth-child(3) { animation-delay: .24s; }
@keyframes nt-caption { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- category tiles ---------- */
.nt-cat-tile {
    display: block; text-align: center; text-decoration: none; color: #212529;
    padding: 1.25rem .5rem; border-radius: var(--nt-radius);
    border: 1px solid #eef0f3; background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nt-cat-tile:hover { transform: translateY(-4px); box-shadow: var(--nt-shadow-md); border-color: transparent; color: var(--nt-primary); }
.nt-cat-tile .nt-cat-icon {
    width: 64px; height: 64px; margin: 0 auto .6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nt-primary) 10%, #fff);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--nt-primary);
    overflow: hidden;
    transition: transform .18s ease;
}
.nt-cat-tile:hover .nt-cat-icon { transform: scale(1.08); }
.nt-cat-tile .nt-cat-icon img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- brands (home strip · /brands tiles · brand header) ---------- */
/* Logo chips: a clean light surface so any brand logo reads well on every theme.
   Logos sit slightly desaturated and colourise + lift on hover for a premium feel. */
.nt-brand-logo,
.nt-brand-chip {
    /* !important beats the inline Bootstrap .bg-light utility so logos always sit on a clean chip. */
    background: #fff !important;
    border: 1px solid #eef0f3;
    border-radius: var(--nt-radius);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nt-brand-logo img,
.nt-brand-chip img {
    filter: grayscale(35%);
    transition: filter .2s ease, transform .2s ease;
}
.nt-brand-logo:hover {
    transform: translateY(-3px);
    box-shadow: var(--nt-shadow-md);
    border-color: var(--nt-primary);
}
.nt-brand-logo:hover img,
.nt-brand-card:hover .nt-brand-chip img {
    filter: grayscale(0);
    transform: scale(1.05);
}
.nt-brand-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.nt-brand-card:hover { transform: translateY(-4px); box-shadow: var(--nt-shadow-md); border-color: transparent; }
.nt-brand-card:hover .nt-brand-chip { border-color: var(--nt-primary); }

/* Home strip scrolls horizontally on small screens instead of wrapping tall. */
@media (max-width: 575.98px) {
    .nt-brand-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nt-brand-strip .nt-brand-logo { flex: 0 0 auto; }
}

/* ---------- product gallery ---------- */
.nt-gallery-main {
    border: 1px solid #eef0f3; border-radius: var(--nt-radius);
    overflow: hidden; background: #fff; cursor: zoom-in;
}
.nt-gallery-main img { transition: transform .25s ease; transform-origin: center; }
.nt-gallery-thumb {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: .5rem; border: 2px solid transparent; cursor: pointer; background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}
.nt-gallery-thumb:hover { transform: translateY(-2px); }
.nt-gallery-thumb.active { border-color: var(--nt-primary); }
.nt-variant-btn {
    border: 1.5px solid #d0d5dd; background: #fff; color: #344054;
    border-radius: .5rem; padding: .4rem .85rem; font-size: .9rem; font-weight: 500;
    transition: all .15s ease;
}
.nt-variant-btn:hover:not(:disabled) { border-color: var(--nt-primary); color: var(--nt-primary); }
.nt-variant-btn.active { border-color: var(--nt-primary); background: color-mix(in srgb, var(--nt-primary) 8%, #fff); color: var(--nt-primary); font-weight: 600; }
.nt-variant-btn:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.nt-variant-swatch { display: inline-flex; align-items: center; gap: .4rem; }
.nt-swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px #fff; flex: 0 0 auto; }
.nt-qty { display: inline-flex; align-items: stretch; border: 1px solid #d0d5dd; border-radius: .5rem; overflow: hidden; }
.nt-qty button { width: 38px; border: 0; background: #f8f9fb; font-size: 1.1rem; line-height: 1; transition: background .15s; }
.nt-qty button:hover { background: #eef0f3; }
.nt-qty input { width: 52px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.nt-qty input::-webkit-outer-spin-button, .nt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- filters ---------- */
.nt-filter-card { border: 1px solid #eef0f3; border-radius: var(--nt-radius); }
.nt-filter-chips .nt-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: color-mix(in srgb, var(--nt-primary) 10%, #fff);
    color: var(--nt-primary); font-size: .8rem; font-weight: 600;
    border-radius: 999px; padding: .25rem .7rem; border: 0;
}
.nt-filter-chips .nt-chip:hover { background: color-mix(in srgb, var(--nt-primary) 18%, #fff); }
#nt-grid.nt-loading { opacity: .45; pointer-events: none; filter: saturate(.6); transition: opacity .15s; }

/* ---------- cart drawer ---------- */
.nt-drawer { --bs-offcanvas-width: 400px; }
.nt-drawer .offcanvas-header { border-bottom: 1px solid #eef0f3; }
.nt-drawer-line { display: flex; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid #f2f4f7; }
.nt-drawer-line img { width: 64px; height: 64px; object-fit: cover; border-radius: .5rem; background: #f4f5f7; }
.nt-freeship { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.nt-freeship > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nt-primary), #0ca678); transition: width .4s ease; }

/* ---------- toasts ---------- */
.nt-toasts { position: fixed; bottom: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: 92vw; }
.nt-toast {
    display: flex; align-items: center; gap: .6rem;
    background: #101828; color: #fff;
    border-radius: .6rem; padding: .7rem 1rem;
    box-shadow: var(--nt-shadow-lg);
    animation: nt-toast-in .25s ease both;
    font-size: .92rem; max-width: 360px;
}
.nt-toast.success i { color: #12b76a; }
.nt-toast.error i { color: #f97066; }
.nt-toast.info i { color: #53b1fd; }
.nt-toast.out { animation: nt-toast-out .25s ease both; }
@keyframes nt-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nt-toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ---------- skeletons ---------- */
.nt-skel { position: relative; overflow: hidden; background: #eef0f3; border-radius: .5rem; }
.nt-skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: nt-shimmer 1.2s infinite;
}
@keyframes nt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- progressive image load ---------- */
/* Below-the-fold storefront images fade in over a shimmer skeleton, so the light, fast text paints first
   and the pictures stream in smoothly. Applied ONLY to lazy images — never the eager/LCP image, whose
   paint must not be delayed by an opacity fade (CLAUDE.md §8). store.js adds .is-loaded once each image
   decodes; the shimmer reuses the nt-shimmer sweep above. Fully progressive: with JS/CSS off the image
   still shows normally. */
.nt-imgbox { position: relative; background: #eef0f3; }
.nt-imgbox::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: nt-shimmer 1.2s infinite;
}
.nt-imgbox.is-loaded { background: transparent; }
.nt-imgbox.is-loaded::after { content: none; }
/* Keep the product-card hover-zoom transition alongside the fade. */
.nt-imgbox img.nt-img { opacity: 0; transition: opacity .45s ease, transform .35s ease; }
.nt-imgbox.is-loaded img.nt-img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .nt-imgbox img.nt-img { opacity: 1; transition: none; }
    .nt-imgbox::after { animation: none; }
}

/* ---------- reveal on scroll ---------- */
.nt-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.nt-reveal.in { opacity: 1; transform: none; }

/* ---------- floating widgets ---------- */
.nt-whatsapp {
    position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 1080;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25d366; color: #fff; font-size: 1.7rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
    transition: transform .15s ease;
}
.nt-whatsapp:hover { transform: scale(1.08); color: #fff; }
.nt-backtop {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1080;
    width: 44px; height: 44px; border-radius: 50%;
    background: #101828; color: #fff; border: 0; font-size: 1.1rem;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: var(--nt-shadow-md);
}
.nt-backtop.show { opacity: .85; pointer-events: auto; transform: none; }
.nt-backtop:hover { opacity: 1; }
/* keep back-to-top clear of the toast stack */
.nt-toasts { bottom: 4.5rem; }

/* ---------- quick view modal ---------- */
#ntQuickView .modal-content { border: 0; border-radius: var(--nt-radius); overflow: hidden; }
#ntQuickView .btn-close { position: absolute; top: .8rem; right: .8rem; z-index: 5; background-color: #fff; border-radius: 50%; padding: .55rem; opacity: .9; }

/* ---------- utilities ---------- */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- footer ---------- */
.nt-social {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e6e8ec; color: #344054; font-size: 1.05rem;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.nt-social:hover { transform: translateY(-2px); background: var(--nt-primary); color: #fff; border-color: var(--nt-primary); }
.nt-footer-info :is(p, ul, ol) { margin-bottom: .5rem; }
.nt-footer-info :last-child { margin-bottom: 0; }
.nt-footer-info img { max-width: 100%; height: auto; }
.nt-footer-cols { column-gap: 1.5rem; }
.nt-footer-cols li { break-inside: avoid; }

/* "Powered by NarneTech.shop" attribution logo (SaaS branding, not tenant brand) */
.nt-powered { transition: opacity .15s ease; }
.nt-powered:hover { opacity: .85; }
.nt-powered-logo {
    height: 24px; width: auto; display: block;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(1, 41, 112, .12);
}

/* ---------- breadcrumbs ---------- */
.nt-breadcrumb { font-size: .85rem; }
.nt-breadcrumb a { color: #667085; text-decoration: none; }
.nt-breadcrumb a:hover { color: var(--nt-primary); }

/* ---------- mobile nav offcanvas ---------- */
/* The NavbarTree component renders a horizontal dropdown nav; inside the
   offcanvas we flatten it into a vertical, always-expanded tree. */
.nt-mobilenav .nav { flex-direction: column; padding: .5rem 0; }
.nt-mobilenav .nav-link { padding: .6rem 1rem; font-weight: 600; color: #212529; }
.nt-mobilenav .dropdown-toggle::after { display: none; }
.nt-mobilenav .dropdown-menu {
    display: block; position: static !important; transform: none !important;
    border: 0; box-shadow: none; padding: 0 0 .25rem 1.25rem; margin: 0;
}
.nt-mobilenav .dropdown-item { padding: .4rem 1rem; color: #495057; }
.nt-mobilenav .dropdown-divider { display: none; }

/* --- Mobile menu readability guard (must survive EVERY theme) --------------------
   A theme colours .nt-navlink / .text-brand for its HEADER — often white/light on a
   dark or coloured header. Those rules are frequently written GLOBALLY: classic
   `body.theme-x .nt-navlink` or Liquid `body.nt-themed .nt-navlink` (both specificity
   0,2,1). Because this offcanvas is a separate white panel, that light colour bleeds
   in and the links become invisible (white-on-white — the praveenmobile bug). Pin
   readable colours here with 3-class specificity (0,3,0) so they always win inside the
   menu, regardless of the active theme. A theme that DELIBERATELY darkens the offcanvas
   (only theme-aurora does) re-overrides these for its own dark panel below. */
.nt-mobilenav .offcanvas-body .nt-navlink,
.nt-mobilenav .offcanvas-body .nav-link { color: #212529; }
.nt-mobilenav .offcanvas-body .nt-navlink:hover { color: var(--nt-primary); }
.nt-mobilenav .offcanvas-body .dropdown-item { color: #495057; }
.nt-mobilenav .offcanvas-header .text-brand { color: var(--nt-primary); }

/* =========================================================================
   Storefront themes (CLAUDE.md §5.5, §7.5). Per-tenant --nt-primary /
   --nt-secondary still apply on top of each theme.
   theme-a — Classic: default look above, no overrides needed.
   ========================================================================= */

/* theme-b — Modern: sticky darker header, rounded shadowed cards, pill buttons. */
body.theme-b { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; }
body.theme-b h1, body.theme-b h2, body.theme-b h3, body.theme-b .navbar-brand {
    font-family: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.02em;
}
body.theme-b .nt-header { background: #14181f; border-bottom: none; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
body.theme-b .nt-header .text-brand,
body.theme-b .nt-header .navbar-brand { color: #fff !important; }
body.theme-b .nt-header .nav,
body.theme-b .nt-header .border-top { border-color: rgba(255,255,255,.12) !important; }
body.theme-b .nt-header .nt-iconbtn { color: #d7dbe2; }
body.theme-b .nt-header .nt-iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
body.theme-b .nt-search .form-control { background: rgba(255,255,255,.12); color: #fff; }
body.theme-b .nt-search .form-control::placeholder { color: #98a2b3; }
body.theme-b .nt-search .form-control:focus { background: rgba(255,255,255,.18); }
body.theme-b .nt-navlink { color: #d7dbe2; }
body.theme-b .nt-navlink:hover { color: #fff; }
body.theme-b .btn-brand, body.theme-b .btn { border-radius: 999px; }
body.theme-b .card, body.theme-b .product-card {
    border: none; border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(20,24,31,.10);
    overflow: hidden;
}
body.theme-b .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(20,24,31,.18); }

/* theme-c — Minimal: bordered flat cards, uppercase spaced nav, serif headings. */
body.theme-c h1, body.theme-c h2, body.theme-c h3, body.theme-c .navbar-brand {
    font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-weight: 600;
}
body.theme-c .nt-header { border-bottom: 2px solid #111; }
body.theme-c .nt-navlink { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: #111; }
body.theme-c .btn-brand, body.theme-c .btn { border-radius: 0; }
body.theme-c .card, body.theme-c .product-card { border: 1px solid #111 !important; border-radius: 0 !important; box-shadow: none !important; }
body.theme-c .product-card:hover { background: #fafafa; transform: none; }
body.theme-c .nt-cat-tile, body.theme-c .nt-gallery-main { border: 1px solid #111; border-radius: 0; }
body.theme-c .nt-search .form-control { border-radius: 0; }

/* theme-d — Vivid: brand-colored header, bold rounded cards, pill buttons. */
body.theme-d .nt-header { background: var(--nt-primary); border-bottom: none; }
body.theme-d .nt-header .text-brand,
body.theme-d .nt-header .navbar-brand,
body.theme-d .nt-header .nt-navlink { color: #fff !important; }
body.theme-d .nt-header .nt-navlink:hover { color: rgba(255,255,255,.78) !important; }
body.theme-d .nt-header .nav,
body.theme-d .nt-header .border-top { border-color: rgba(255,255,255,.18) !important; }
body.theme-d .nt-header .btn-brand { background: #fff; color: var(--nt-primary); }
body.theme-d .nt-header .nt-iconbtn { color: #fff; }
body.theme-d .nt-header .nt-iconbtn:hover { background: rgba(255,255,255,.15); color: #fff; }
body.theme-d .nt-header .nt-badge-count { background: #fff; color: var(--nt-primary); }
body.theme-d .nt-search .form-control { background: rgba(255,255,255,.2); color: #fff; }
body.theme-d .nt-search .form-control::placeholder { color: rgba(255,255,255,.75); }
body.theme-d h1, body.theme-d h2, body.theme-d h3 { font-weight: 800; letter-spacing: -.01em; }
body.theme-d .btn-brand, body.theme-d .btn { border-radius: 999px; font-weight: 600; }
body.theme-d .card, body.theme-d .product-card {
    border: none; border-radius: 1.1rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.10); overflow: hidden;
}
body.theme-d .product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.16); }

/* theme-e — Editorial: elegant serif, airy spacing, hairline cards. */
body.theme-e { font-family: Georgia, "Times New Roman", "Noto Serif", serif; }
body.theme-e h1, body.theme-e h2, body.theme-e h3, body.theme-e .navbar-brand {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600; letter-spacing: .01em;
}
body.theme-e .nt-header { border-bottom: 1px solid #e6e0d6; background: #fcfbf8; }
body.theme-e .nt-navlink { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #4a4640; }
body.theme-e .btn-brand, body.theme-e .btn { border-radius: .2rem; }
body.theme-e .card, body.theme-e .product-card { border: 1px solid #e6e0d6 !important; border-radius: .35rem; box-shadow: none; }
body.theme-e .product-card:hover { border-color: var(--nt-primary) !important; transform: none; box-shadow: var(--nt-shadow-sm); }

/* theme-f — Soft: pastel surfaces, extra-round cards, gentle shadows. */
body.theme-f { background: #f7f8fc; }
body.theme-f .nt-header { background: #fff; border-bottom: none; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
body.theme-f .form-control { border-radius: 999px; }
body.theme-f .btn-brand, body.theme-f .btn { border-radius: 999px; }
body.theme-f .card, body.theme-f .product-card {
    border: none !important; border-radius: 1.25rem;
    box-shadow: 0 6px 18px rgba(80,90,130,.10);
}
body.theme-f .product-card:hover { transform: translateY(-4px); }
body.theme-f .nt-cat-tile { border: none; box-shadow: 0 4px 14px rgba(80,90,130,.08); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .nt-reveal { opacity: 1; transform: none; }
}