/* ============================================================================
   THEME — NEON DARK
   ----------------------------------------------------------------------------
   Site-wide dark theme. Every colour resolves to a CSS variable defined by
   frontend/partials/head.blade.php, which reads them from the `informations`
   row — so changing a swatch in Admin → Style repaints the whole storefront.

   Never hardcode a hex in here. Use var(--theme-*) so the admin stays in
   control. Loads last of the local stylesheets, so it wins over the Axil
   theme (style.min.css / header.css / update.css) without !important spam.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. AXIL THEME VARIABLE REMAP
   style.min.css (the bought Axil theme) drives every one of its components
   from these variables. Remapping them here — this file loads after it — turns
   the whole theme dark in one place instead of overriding hundreds of
   selectors. --color-white is deliberately left alone: it is used for text
   sitting on coloured buttons, where white is still correct.
   ------------------------------------------------------------------------ */
:root {
    --color-lighter: var(--theme-bg-2);
    --color-light: var(--theme-bg-2);
    --color-lightest: var(--theme-text-2);
    --color-heading: var(--theme-text-0);
    --color-body: var(--theme-text-1);
    --color-border-light: var(--theme-panel-border);
    --color-border-dark: var(--theme-panel-border);
    --color-gray: var(--theme-text-2);
    --color-midgray: var(--theme-text-2);
}

/* ---------------------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body {
    background: var(--theme-bg);
    color: var(--theme-text-0);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* The Axil theme paints a lot of surfaces white. Neutralise the common ones
   rather than chasing every component individually. */
.main-wrapper,
.axil-product-area,
.axil-shop-area,
.axil-single-product-area,
.axil-checkout-area,
.axil-dashboard-area,
.axil-cart-area,
section,
.bg-color-white,
.bg-white,
.bg-lighter,
.bg-vista-white { background-color: transparent; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--theme-text-0);
}

p, li, span, td, th, label, dd, dt { color: var(--theme-text-1); }

a { color: inherit; text-decoration: none; transition: color .25s; }
a:hover { color: var(--theme-orange-2); }

img { max-width: 100%; }

::selection { background: var(--theme-orange); color: var(--theme-bg); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--theme-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--theme-orange), var(--theme-red));
    border-radius: 4px;
}

/* Bengali copy gets the Bengali face without losing the theme weight */
.bn, [lang="bn"] { font-family: var(--font-bn); }

/* ---------------------------------------------------------------------------
   2. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.tn-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.tn-section { padding: 76px 0; }
.tn-section--tight { padding: 44px 0; }

.tn-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.tn-eyebrow {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--theme-orange-2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tn-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-orange), transparent);
    display: inline-block;
}

.tn-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.05;
    margin-top: 10px;
    color: var(--theme-text-0);
}

.tn-sub {
    color: var(--theme-text-1);
    margin-top: 10px;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
}

/* Ambient grid + noise, fixed behind everything */
.tn-grid-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
}

/* Keep real content above the ambient layers */
.main-wrapper, header, footer { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------------------ */
.tn-btn {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .03em;
    padding: 13px 26px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, border-color .25s, color .25s;
}

.tn-btn-primary {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red));
    color: #fff;
    box-shadow: 0 8px 30px -8px rgba(255, 60, 30, .55);
}
.tn-btn-primary:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 12px 34px -6px rgba(255, 60, 30, .7);
}

.tn-btn-ghost {
    background: rgba(255, 255, 255, .03);
    color: var(--theme-text-0);
    border-color: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
}
.tn-btn-ghost:hover {
    border-color: var(--theme-blue);
    color: var(--theme-blue);
    box-shadow: 0 0 22px -6px rgba(25, 198, 255, .55);
}

.tn-btn-sm { padding: 9px 16px; font-size: 12.5px; border-radius: 8px; }
.tn-btn svg { width: 16px; height: 16px; }

/* Axil's own buttons, re-skinned in place so untouched pages match */
.axil-btn.btn-bg-primary,
.axil-btn.btn-bg-secondary {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red));
    color: #fff;
    border: none;
}
.axil-btn.btn-bg-primary:hover,
.axil-btn.btn-bg-secondary:hover {
    background: linear-gradient(120deg, var(--theme-orange-2), var(--theme-orange));
    color: #fff;
}
.axil-btn.btn-outline {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--theme-text-0);
}
.axil-btn.btn-outline:hover {
    border-color: var(--theme-orange);
    color: var(--theme-orange-2);
    background: rgba(255, 255, 255, .05);
}

/* ---------------------------------------------------------------------------
   4. PANELS / CARDS
   ------------------------------------------------------------------------ */
.tn-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid var(--theme-panel-border);
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------------------
   5. PRODUCT CARD  (shared by home, listings, related products, recent-view)
   ------------------------------------------------------------------------ */
.tn-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid var(--theme-panel-border);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tn-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 138, 61, .4);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 138, 61, .12);
}

.tn-card-media {
    position: relative;
    aspect-ratio: 1 / 0.92;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .06), transparent 60%),
        var(--theme-bg-2);
    display: grid;
    place-items: center;
    padding: 14px;
    overflow: hidden;
}
.tn-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s ease;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5));
}
.tn-card:hover .tn-card-media img { transform: scale(1.06); }

.tn-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 6px;
    background: linear-gradient(120deg, var(--theme-red), var(--theme-orange));
    color: #fff;
    letter-spacing: .03em;
    line-height: 1;
}
.tn-badge--new { background: linear-gradient(120deg, var(--theme-blue), #2a7fff); }

/* Quick view — revealed on hover (desktop), always visible on touch */
.tn-card-quick {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    text-align: center;
    padding: 9px;
    border-radius: 9px;
    background: rgba(10, 10, 11, .72);
    backdrop-filter: blur(8px);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
    /* The overlay is a fixed dark wash, so its label must stay light even when
       the page palette is a white theme. */
    color: #F4F4F5;
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}
.tn-card:hover .tn-card-quick { opacity: 1; transform: translateY(0); }
/* On touch there is no hover, so the bar used to be pinned visible — but that
   left it sitting on top of every product photo. Tapping the image opens the
   product page anyway, so hide it and give the space back to the picture.
   Matched on width as well as hover: a phone browser in desktop-request mode
   still reports hover support, and the bar is unusable at that size either way. */
@media (hover: none), (max-width: 767px) {
    .tn-card-quick { display: none; }
}

.tn-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tn-card-cat {
    font-size: 10.5px;
    color: var(--theme-text-2);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-family: var(--font-head);
    font-weight: 700;
}

.tn-card-name {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
    font-family: var(--font-body);
    line-height: 1.4;
    color: var(--theme-text-0);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
}
.tn-card-name:hover { color: var(--theme-orange-2); }

.tn-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.tn-price-now {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-gold);
}
.tn-price-was {
    font-size: 12.5px;
    color: var(--theme-text-2);
    text-decoration: line-through;
}
.tn-price-off {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--theme-red);
}

.tn-stock {
    font-size: 11px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4ADE80;
    font-family: var(--font-head);
    font-weight: 600;
}
.tn-stock i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.tn-stock.is-out { color: var(--theme-red); }

.tn-card-stars { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.tn-card-stars svg { width: 12px; height: 12px; color: var(--theme-gold); flex-shrink: 0; }
.tn-card-stars span { font-size: 11.5px; color: var(--theme-text-2); margin-left: 3px; }

.tn-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.tn-card-actions .tn-btn { flex: 1; padding: 10px 8px; font-size: 12.5px; }

.tn-btn-cart {
    background: rgba(255, 255, 255, .05);
    /* Theme-aware 1px border so the "Add" button is clearly outlined on both
       the light and dark palettes (the old faint white border vanished on
       light themes). */
    border: 1px solid var(--theme-panel-border);
    color: var(--theme-text-0);
}
.tn-btn-cart:hover { border-color: var(--theme-orange); color: var(--theme-orange-2); }
.tn-btn-cart:disabled { opacity: .4; cursor: not-allowed; }
.tn-btn-cart:disabled:hover { border-color: var(--theme-panel-border); color: var(--theme-text-0); }

/* Out-of-stock treatment driven by the existing data-is-out attribute */
.tn-card[data-is-out="1"] .tn-card-media img { filter: grayscale(1); opacity: .5; }
.tn-card[data-is-out="1"] .tn-price-now { color: var(--theme-text-2); }

/* ---------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------ */
.tn-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 0 40px;
    overflow: hidden;
}

/* Atmosphere: concentric rings + sweeping light beams behind the hero */
.tn-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tn-hero-bg .grad {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 78% 18%, rgba(255, 90, 31, .16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 15% 85%, rgba(25, 198, 255, .10), transparent 60%);
}
.tn-hero-bg .zone { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 90, 31, .18); }
.tn-hero-bg .zone.z1 { width: 1100px; height: 1100px; top: -420px; right: -320px; animation: tn-pulse 7s ease-in-out infinite; }
.tn-hero-bg .zone.z2 { width: 780px; height: 780px; top: -260px; right: -150px; border-color: rgba(25, 198, 255, .14); animation: tn-pulse 7s ease-in-out infinite 1s; }
.tn-hero-bg .zone.z3 { width: 420px; height: 420px; top: -30px; right: 60px; border-color: rgba(245, 185, 63, .22); border-style: dashed; animation: tn-spin-slow 40s linear infinite; }
@keyframes tn-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes tn-spin-slow { to { transform: rotate(360deg); } }

.tn-hero-bg .beam {
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 138, 61, .5), transparent);
    filter: blur(1px);
    animation: tn-sweep 6s ease-in-out infinite;
}
.tn-hero-bg .beam.b1 { left: 22%; animation-delay: .2s; }
.tn-hero-bg .beam.b2 { left: 68%; animation-delay: 1.4s; background: linear-gradient(180deg, transparent, rgba(25, 198, 255, .45), transparent); }
@keyframes tn-sweep { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.tn-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.tn-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 8px;
    border-radius: 100px;
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    font-family: var(--font-head);
    color: var(--theme-gold);
    margin-bottom: 20px;
}
.tn-hero-tag i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-red);
    box-shadow: 0 0 10px var(--theme-red);
    animation: tn-blink 1.4s infinite;
    display: inline-block;
}
@keyframes tn-blink { 50% { opacity: .3; } }

.tn-hero h1 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--theme-text-0);
}
.tn-hero h1 .hl {
    background: linear-gradient(100deg, var(--theme-orange) 10%, var(--theme-gold) 55%, var(--theme-orange-2) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tn-hero .lead {
    color: var(--theme-text-1);
    font-size: 16px;
    line-height: 1.7;
    margin-top: 20px;
    max-width: 520px;
}
.tn-hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* HUD product frame */
.tn-hero-visual { position: relative; height: 520px; }
.tn-hud-frame {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--theme-panel-border);
    backdrop-filter: blur(10px);
}
.tn-hud-frame .device-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 40%, rgba(255, 90, 31, .25), transparent 55%);
}

.tn-float-chip {
    position: absolute;
    padding: 11px 15px;
    border-radius: 12px;
    background: rgba(15, 15, 17, .78);
    backdrop-filter: blur(14px);
    border: 1px solid var(--theme-panel-border);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    animation: tn-floaty 4s ease-in-out infinite;
}
.tn-float-chip b { display: block; font-size: 13px; font-family: var(--font-head); color: var(--theme-text-0); }
.tn-float-chip span { font-size: 10.5px; color: var(--theme-text-2); }
.tn-float-chip.c1 { top: 8%; left: -6%; animation-delay: 0s; }
.tn-float-chip.c2 { bottom: 16%; right: -5%; animation-delay: 1s; }
.tn-float-chip.c3 { bottom: 5%; left: 4%; animation-delay: 2s; }
@keyframes tn-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.tn-chip-dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.tn-chip-dot.gold   { background: rgba(245, 185, 63, .16); color: var(--theme-gold); }
.tn-chip-dot.blue   { background: rgba(25, 198, 255, .16); color: var(--theme-blue); }
.tn-chip-dot.orange { background: rgba(255, 90, 31, .16);  color: var(--theme-orange); }
.tn-chip-dot svg { width: 16px; height: 16px; }

.tn-scroll-cue {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-2);
    font-size: 10px;
    letter-spacing: .2em;
    font-family: var(--font-head);
    text-transform: uppercase;
}
.tn-scroll-cue .line {
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--theme-orange), transparent);
    animation: tn-scrolldown 1.8s infinite;
}
@keyframes tn-scrolldown {
    0%   { opacity: 0; transform: scaleY(.3); transform-origin: top; }
    50%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(.3); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
    .tn-hero-bg .zone, .tn-hero-bg .beam, .tn-float-chip,
    .tn-hero-tag i, .tn-scroll-cue .line { animation: none; }
}

/* HUD corner accents on the main slider frame */
.tn-hud-corner { position: absolute; width: 24px; height: 24px; z-index: 3; pointer-events: none; }
.tn-hud-corner.tl { top: 12px; left: 12px; border-top: 2px solid var(--theme-orange); border-left: 2px solid var(--theme-orange); }
.tn-hud-corner.tr { top: 12px; right: 12px; border-top: 2px solid var(--theme-blue); border-right: 2px solid var(--theme-blue); }
.tn-hud-corner.bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--theme-blue); border-left: 2px solid var(--theme-blue); }
.tn-hud-corner.br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--theme-orange); border-right: 2px solid var(--theme-orange); }

/* Stat strip under the hero */
.tn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.tn-stat {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-border);
}
.tn-stat b {
    font-family: var(--font-display);
    font-size: 20px;
    display: block;
    color: var(--theme-gold);
    line-height: 1.2;
}
.tn-stat span {
    font-size: 11px;
    color: var(--theme-text-2);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: var(--font-head);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   7. MARQUEE STRIPS
   ------------------------------------------------------------------------ */
.tn-marquee {
    border-top: 1px solid var(--theme-panel-border);
    border-bottom: 1px solid var(--theme-panel-border);
    padding: 16px 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .015);
}
.tn-marquee--rounded { border-radius: 14px; border: 1px solid var(--theme-panel-border); }

.tn-marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: tn-marquee 26s linear infinite;
}
.tn-marquee--fast .tn-marquee-track { animation-duration: 20s; }

.tn-marquee-track span {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 13px;
    color: var(--theme-text-2);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tn-marquee-track span i {
    width: 5px;
    height: 5px;
    background: var(--theme-orange);
    border-radius: 1px;
    transform: rotate(45deg);
    display: inline-block;
}
@keyframes tn-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .tn-marquee-track { animation: none; }
}

/* ---------------------------------------------------------------------------
   8. FLASH SALE
   ------------------------------------------------------------------------ */
.tn-flash {
    position: relative;
    border-radius: 22px;
    padding: 32px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 47, 78, .14), rgba(255, 90, 31, .08) 45%, transparent 70%),
        var(--theme-bg-1);
    border: 1px solid rgba(255, 90, 31, .25);
}
.tn-flash::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 26px);
    pointer-events: none;
}

.tn-flash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-bottom: 26px;
}
.tn-flash-top h3 {
    font-size: clamp(22px, 3vw, 30px);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-text-0);
}
.tn-flash-top h3 svg { width: 24px; height: 24px; color: var(--theme-red); }
.tn-flash-top p { color: var(--theme-text-1); font-size: 14px; margin-top: 6px; }

.tn-timer { display: flex; gap: 10px; }
.tn-timer .t {
    width: 62px;
    padding: 10px 0;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .09);
}
.tn-timer .t b {
    font-family: var(--font-display);
    font-size: 21px;
    display: block;
    color: var(--theme-gold);
    line-height: 1.1;
}
.tn-timer .t span {
    font-size: 9px;
    color: var(--theme-text-2);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   9. CATEGORY GRID
   ------------------------------------------------------------------------ */
.tn-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.tn-cat-card {
    padding: 18px 14px;
    border-radius: 16px;
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    transition: transform .3s, border-color .3s;
    position: relative;
    overflow: hidden;
}
.tn-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(circle at 30% 20%, rgba(255, 90, 31, .16), transparent 60%);
}
.tn-cat-card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, .35); }
.tn-cat-card:hover::before { opacity: 1; }

.tn-cat-thumb {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--theme-bg-2);
    border: 1px solid var(--theme-panel-border);
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.tn-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tn-cat-card h4 {
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-body);
    position: relative;
    z-index: 1;
    color: var(--theme-text-0);
    margin: 0;
    line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   10. COLLECTION PANELS
   Gradient cards with line-art, not photographs — matches the mockup.
   ------------------------------------------------------------------------ */
.tn-collection-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.tn-collection {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    border: 1px solid var(--theme-panel-border);
    transition: transform .35s ease, border-color .35s ease;
}
.tn-collection:hover { transform: translateY(-4px); }

.tn-collection.is-gold {
    background:
        linear-gradient(135deg, rgba(245, 185, 63, .16), rgba(11, 11, 11, .2)),
        linear-gradient(160deg, var(--theme-bg-2), var(--theme-bg));
    color: var(--theme-gold);
}
.tn-collection.is-gold:hover { border-color: rgba(245, 185, 63, .4); }

.tn-collection.is-blue {
    background:
        linear-gradient(135deg, rgba(25, 198, 255, .16), rgba(11, 11, 11, .2)),
        linear-gradient(160deg, var(--theme-bg-2), var(--theme-bg));
    color: var(--theme-blue);
}
.tn-collection.is-blue:hover { border-color: rgba(25, 198, 255, .4); }

.tn-collection-shape {
    position: absolute;
    right: -40px;
    top: -40px;
    width: 250px;
    height: 250px;
    opacity: .5;
    pointer-events: none;
}
.tn-collection-shape svg { width: 100%; height: 100%; }

.tn-collection-content { position: relative; z-index: 2; }
.tn-collection-tag {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .15em;
    font-size: 11.5px;
    text-transform: uppercase;
    color: currentColor;
}
.tn-collection h3 { font-size: 25px; margin-top: 8px; color: var(--theme-text-0); }
.tn-collection p { color: var(--theme-text-1); font-size: 13.5px; margin-top: 8px; max-width: 300px; }

/* ---------------------------------------------------------------------------
   11. REVIEWS
   ------------------------------------------------------------------------ */
.tn-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tn-review-card {
    padding: 24px;
    border-radius: 18px;
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-border);
    transition: transform .3s, border-color .3s;
}
.tn-review-card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, .3); }

.tn-review-head { display: flex; align-items: center; gap: 12px; }
.tn-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--theme-bg);
    background: linear-gradient(135deg, var(--theme-orange-2), var(--theme-red));
    flex-shrink: 0;
    overflow: hidden;
    font-size: 15px;
}
.tn-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tn-review-head b { font-size: 14.5px; display: block; color: var(--theme-text-0); }
.tn-review-head span { font-size: 11.5px; color: var(--theme-text-2); }
.tn-review-card p { font-size: 14px; color: var(--theme-text-1); margin-top: 16px; line-height: 1.7; }

.tn-stars { display: flex; gap: 3px; margin-top: 14px; }
.tn-stars svg { width: 13px; height: 13px; color: var(--theme-gold); }

/* ---------------------------------------------------------------------------
   12. NEWSLETTER
   ------------------------------------------------------------------------ */
.tn-newsletter {
    border-radius: 22px;
    padding: 48px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 90, 31, .12), rgba(25, 198, 255, .08));
    border: 1px solid var(--theme-panel-border);
}
.tn-newsletter h3 { font-size: clamp(21px, 3vw, 28px); color: var(--theme-text-0); }
.tn-newsletter p {
    color: var(--theme-text-1);
    margin: 10px auto 0;
    max-width: 480px;
    font-size: 14.5px;
}
.tn-news-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 24px auto 0;
}
.tn-news-form input {
    flex: 1;
    padding: 13px 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--theme-panel-border);
    color: var(--theme-text-0);
    font-size: 14px;
}
.tn-news-form input::placeholder { color: var(--theme-text-2); }
.tn-news-form input:focus { outline: none; border-color: var(--theme-orange); }

/* ---------------------------------------------------------------------------
   13. FAQ
   ------------------------------------------------------------------------ */
.tn-faq-item { border-bottom: 1px solid var(--theme-panel-border); padding: 20px 0; }
.tn-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 20px;
}
.tn-faq-q h4 {
    font-size: 15.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--theme-text-0);
    margin: 0;
}
.tn-faq-q .plus {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform .3s, border-color .3s;
    color: var(--theme-text-0);
}
.tn-faq-item.open .tn-faq-q .plus { transform: rotate(45deg); border-color: var(--theme-orange); }
.tn-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.tn-faq-item.open .tn-faq-a { max-height: 320px; }
.tn-faq-a p { color: var(--theme-text-1); font-size: 14px; padding-top: 12px; line-height: 1.7; }

/* ---------------------------------------------------------------------------
   14. HEADER  (re-skin of the existing markup — structure untouched)
   ------------------------------------------------------------------------ */
.header-top-bar,
.topbar-notice {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red));
    color: #fff;
}

/* NOTE: .desk-nav is deliberately absent here. That <ul> lays its category
   items out with flex-wrap, so its box is far taller than the visible menu bar
   (measured 1212x470 at desktop width) — giving it a background painted a large
   dark panel straight over the hero. The bar it sits in, .strides-menu-row,
   already carries the background. */
/* Scoped to the site header only. A bare `header` selector also matched
   in-page <header> elements (e.g. a checkout card's title bar), painting them
   dark while their text followed the light page palette. */
body > header,
.axil-header,
.header-wrapper,
.strides-menu-row,
.mobile-header {
    background: rgba(11, 11, 11, .92);
    border-color: var(--bar-line);
    color: var(--bar-text);
}
.desk-nav { background: transparent; }

body > header a,
.desk-nav a,
.mobile-header a { color: var(--bar-text-2); }
body > header a:hover,
.desk-nav a:hover { color: var(--theme-orange-2); }

/* Search field */
body > header input[type="text"],
body > header input[type="search"],
.header-search input {
    background: var(--bar-surface-2);
    border: 1px solid var(--bar-line);
    color: var(--bar-text);
}
body > header input::placeholder { color: var(--bar-text-3); }
body > header input:focus { border-color: var(--theme-orange); outline: none; }

/* Cart / wishlist counters */
.cart-count,
.wishlist-count {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red));
    color: #fff;
}

/* ---------------------------------------------------------------------------
   HEADER / FOOTER BAR TOKENS
   The header keeps its dark bar on every page, so its text must NOT follow the
   page palette — on a white product/checkout page --theme-text-* turns dark and
   the menu disappears into the bar. These stay light on purpose.
   ------------------------------------------------------------------------ */
:root{
    --bar-text:   #F4F4F5;
    --bar-text-2: #B7B8BD;
    --bar-text-3: #77787E;
    --bar-line:   rgba(255,255,255,.14);
    --bar-panel:  rgba(255,255,255,.045);
    --bar-surface:   #12141A;   /* dropdown / offcanvas panels on the dark bar */
    --bar-surface-2: #1B1F27;   /* their hover rows and search field */
}

/* ---------------------------------------------------------------------------
   HEADER — single row, matching the design mock
   ------------------------------------------------------------------------ */
.desktop-header-wrap {
    border-bottom: 1px solid var(--bar-line);
    background: rgba(11, 11, 11, .88);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 999;
}

.tnh-row {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.tnh-brand { display: flex; align-items: center; flex-shrink: 0; }
.tnh-brand img { max-height: 44px; width: auto; }

/* --- Primary nav --- */
.tnh-nav { display: flex; align-items: center; gap: 2px; }
.tnh-nav > a,
.tnh-drop-toggle {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .02em;
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--bar-text-2);
    position: relative;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .25s;
}
.tnh-nav > a:hover,
.tnh-nav > a.active,
.tnh-drop:hover .tnh-drop-toggle { color: var(--bar-text); }

.tnh-nav > a::after,
.tnh-drop-toggle::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 3px;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-orange), var(--theme-gold));
    opacity: 0;
    transition: opacity .25s;
}
.tnh-nav > a:hover::after,
.tnh-nav > a.active::after,
.tnh-drop:hover .tnh-drop-toggle::after { opacity: 1; }

.tnh-tag {
    font-size: 9px;
    background: var(--theme-red);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: 2px;
    font-family: var(--font-body);
    font-weight: 700;
}

.tnh-drop-toggle svg { width: 13px; height: 13px; }

/* Categories dropdown */
.tnh-drop { position: relative; }
.tnh-drop-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 232px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bar-surface);
    border: 1px solid var(--bar-line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .85);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1000;
}
.tnh-drop:hover .tnh-drop-menu,
.tnh-drop:focus-within .tnh-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tnh-drop-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--bar-text-2);
    white-space: nowrap;
}
.tnh-drop-menu a:hover { background: var(--bar-surface-2); color: var(--theme-orange-2); }

/* --- Right cluster --- */
.tnh-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tnh-search { position: relative; display: flex; align-items: center; }
.tnh-search svg {
    position: absolute;
    left: 12px;
    width: 15px; height: 15px;
    color: var(--bar-text-3);
    pointer-events: none;
}
.tnh-search input {
    width: 180px;
    background: var(--bar-surface-2);
    border: 1px solid var(--bar-line);
    border-radius: 10px;
    padding: 9px 12px 9px 34px;
    color: var(--bar-text);
    font-size: 13.5px;
    transition: width .3s, border-color .3s, box-shadow .3s;
}
.tnh-search input::placeholder { color: var(--bar-text-3); }
.tnh-search input:focus {
    outline: none;
    width: 240px;
    border-color: var(--theme-orange);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
}

.tnh-icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--bar-line);
    background: var(--bar-panel);
    color: var(--bar-text-2);
    position: relative;
    transition: color .25s, border-color .25s, box-shadow .25s;
    flex-shrink: 0;
}
.tnh-icon svg { width: 18px; height: 18px; }
.tnh-icon:hover {
    color: var(--bar-text);
    border-color: rgba(255, 90, 31, .4);
    box-shadow: 0 0 0 1px rgba(255, 90, 31, .15), 0 0 18px rgba(255, 90, 31, .18);
}
.tnh-icon .cart-count {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    line-height: 1;
}

.tnh-account {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 6px;
    border-radius: 10px;
    border: 1px solid var(--bar-line);
    background: var(--bar-panel);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    color: var(--bar-text);
    white-space: nowrap;
    transition: border-color .25s, box-shadow .25s;
}
.tnh-account:hover {
    color: var(--bar-text);
    border-color: rgba(255, 90, 31, .4);
    box-shadow: 0 0 18px -4px rgba(255, 90, 31, .35);
}
.tnh-account span { color: var(--bar-text); }

.tnh-avatar {
    width: 27px; height: 27px;
    border-radius: 50%;
    background: conic-gradient(var(--theme-orange), var(--theme-gold), var(--theme-blue), var(--theme-orange));
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.tnh-avatar i {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bar-surface);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    color: var(--bar-text);
}

/* Below this width the mobile header takes over */
@media (max-width: 1200px) {
    .tnh-nav > a, .tnh-drop-toggle { padding: 9px 9px; font-size: 13.5px; }
    .tnh-search input { width: 140px; }
}

/* Search: pill field with a gradient submit, focus ring in the accent colour */
.desk-sbox {
    background: var(--theme-bg-2) !important;
    border: 1px solid var(--bar-line) !important;
    border-radius: 100px !important;
    transition: border-color .25s, box-shadow .25s;
}
.desk-sbox:focus-within {
    border-color: var(--theme-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
}
.desk-sbox input {
    background: transparent !important;
    color: var(--bar-text) !important;
    font-family: var(--font-body);
}
.desk-sbox input::placeholder { color: var(--bar-text-3) !important; }
.desk-sbox i { color: var(--bar-text-3); }
.desk-sbox .sbtn {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red)) !important;
    color: #fff !important;
    border: none !important;
}

/* The helpline / track / account / cart pills */
.desk-pico {
    background: var(--bar-panel);
    border: 1px solid var(--bar-line);
    border-radius: 12px;
    color: var(--bar-text-2);
    transition: border-color .25s, box-shadow .25s, color .25s, transform .25s;
}
.desk-pico:hover {
    color: var(--bar-text);
    border-color: rgba(255, 90, 31, .4);
    box-shadow: 0 0 0 1px rgba(255, 90, 31, .15), 0 0 18px rgba(255, 90, 31, .18);
    transform: translateY(-1px);
}
.desk-pico .pico-ico { color: var(--theme-orange-2); }
.desk-pico .pico-txt small { color: var(--bar-text-3); letter-spacing: .08em; text-transform: uppercase; }
.desk-pico .pico-txt strong { color: var(--bar-text); font-family: var(--font-head); }

/* Category bar: Rajdhani labels with the mockup's gradient underline */
.desk-nav > li > a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .02em;
    color: var(--bar-text-2) !important;
    position: relative;
    transition: color .25s;
}
.desk-nav > li:hover > a,
.desk-nav > li > a:hover { color: var(--bar-text) !important; }
.desk-nav > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-orange), var(--theme-gold));
    opacity: 0;
    transition: opacity .25s;
}
.desk-nav > li:hover > a::after { opacity: 1; }

.desk-sub {
    background: var(--bar-surface) !important;
    border: 1px solid var(--bar-line) !important;
    border-radius: 12px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .8);
}
.desk-sub a { color: var(--bar-text-2) !important; font-size: 13.5px; }
.desk-sub a:hover { color: var(--theme-orange-2) !important; background: var(--bar-surface-2); }

/* Mobile header + offcanvas */
.mob-sbox {
    background: var(--bar-surface-2) !important;
    border: 1px solid var(--bar-line) !important;
    border-radius: 100px !important;
}
.mob-sbox input { background: transparent !important; color: var(--bar-text) !important; }
.mob-sbox input::placeholder { color: var(--bar-text-3) !important; }
.mob-btn, .mob-cart { color: var(--bar-text); }
.pmm-cat-item, .pmm-uinfo strong { color: var(--bar-text); }

/* Dropdown surfaces */
.dropdown-menu,
.cart-dropdown,
.offcanvas,
.offcanvas-body {
    background: var(--bar-surface);
    border: 1px solid var(--bar-line);
    color: var(--bar-text);
}
.dropdown-item { color: var(--bar-text-2); }
.dropdown-item:hover { background: var(--theme-bg-2); color: var(--theme-orange-2); }

/* ---------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------ */
footer,
.footer-modern {
    /* Uses its own --footer-bg* tokens rather than --theme-bg: the footer bar
       stays dark on every page, so a white product/checkout page can't turn it
       white and hide its light text. */
    background: linear-gradient(180deg, var(--footer-bg1), var(--footer-bg2));
    border-top: 1px solid var(--bar-line);
}
footer h5, footer h4 { color: var(--bar-text); font-family: var(--font-head); }
footer a { color: var(--bar-text-3); }
footer a:hover { color: var(--theme-orange-2); }

/* ---- Footer, styled to the mockup ---- */
.footer-main-area { padding-top: 60px; padding-bottom: 20px; }

.footer-logo-wrap img { max-height: 48px; width: auto; }
.footer-modern .brand-strong { color: var(--bar-text); font-family: var(--font-head); }
.footer-modern .sc-tagline,
.footer-modern .footer-copy-text {
    color: var(--bar-text-3);
    font-size: 13.5px;
    line-height: 1.7;
}

/* Column headings: uppercase + tracked, like the mockup's <h5> */
.footer-col-title {
    font-family: var(--font-head) !important;
    font-size: 13px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bar-text) !important;
}
.footer-col-title::before,
.footer-col-title::after { background: linear-gradient(90deg, var(--theme-orange), var(--theme-gold)) !important; }

.footer-link-list a,
.footer-contact-list li {
    color: var(--bar-text-3) !important;
    font-size: 13.5px;
}
.footer-link-list a:hover { color: var(--theme-orange-2) !important; }
.footer-contact-list i { color: var(--theme-orange-2); }

/* Social icons: rounded squares that glow in the accent on hover */
.footer-social-icon {
    background: var(--bar-panel) !important;
    border: 1px solid var(--bar-line) !important;
    border-radius: 9px !important;
    color: var(--bar-text-2) !important;
    transition: color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.footer-social-icon:hover {
    background: var(--bar-panel) !important;
    color: #fff !important;
    border-color: var(--theme-orange) !important;
    box-shadow: 0 0 16px -4px rgba(255, 90, 31, .6);
    transform: translateY(-2px);
}
.footer-social-title { color: var(--bar-text); font-family: var(--font-head); }

.footer-wa-cta {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red)) !important;
    color: #fff !important;
    border: none !important;
}

.footer-copy-row {
    border-top: 1px solid var(--bar-line);
    background: rgba(0, 0, 0, .25);
}
.footer-copy-text { font-size: 12.5px !important; }

/* Payment method chips (replaced the white SSL image block) */
.footer-pay-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.footer-pay-chip {
    padding: 6px 11px;
    border-radius: 7px;
    background: var(--bar-panel);
    border: 1px solid var(--bar-line);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--bar-text-2) !important;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   16. FLOATING ACTION BUTTONS  (re-skin of .premium-float-stack)
   ------------------------------------------------------------------------ */
.premium-fab {
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
}

/* Brand colours per the design mock. These override .premium-fab's
   --scroller-gradient default, so each button is recognisable at a glance. */
#premiumScrollTop {
    background: linear-gradient(135deg, var(--theme-orange), var(--theme-red)) !important;
    color: #fff !important;
    border: none;
}
.premium-fab-msg {
    background: linear-gradient(135deg, #00c6ff, #7b2ff7) !important;
    color: #fff !important;
}
.premium-fab-wa {
    background: #25D366 !important;
    color: #fff !important;
}
.premium-fab-cart {
    background: linear-gradient(135deg, var(--theme-orange), var(--theme-red)) !important;
    color: #fff !important;
}
.premium-fab-msg::before { background: linear-gradient(135deg, #00c6ff, #7b2ff7); }
.premium-fab-wa::before  { background: #25D366; }
.premium-fab-cart::before,
#premiumScrollTop::before { background: linear-gradient(135deg, var(--theme-orange), var(--theme-red)); }

/* Cart badge sits on the FAB the same way it does in the header */
.premium-fab-cart .cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font-body);
    display: grid;
    place-items: center;
    line-height: 1;
    /* The badge sits on a coloured FAB, not on the page, so it must not follow
       the page palette — on a white page --theme-bg turned the badge white and
       swallowed the number. */
    background: #0B0B0B;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,.35);
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   17. FORMS / MODALS on inner pages
   ------------------------------------------------------------------------ */
.modal-content {
    background: var(--theme-bg-1);
    color: var(--theme-text-0);
    border: 1px solid var(--theme-panel-border);
}
.modal-header, .modal-footer { border-color: var(--theme-panel-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

.form-control, .form-select, textarea, select,
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="password"] {
    background: var(--theme-bg-2);
    border: 1px solid var(--theme-panel-border);
    color: var(--theme-text-0);
}
.form-control:focus, .form-select:focus, textarea:focus {
    background: var(--theme-bg-2);
    border-color: var(--theme-orange);
    color: var(--theme-text-0);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .15);
}
.form-control::placeholder, textarea::placeholder { color: var(--theme-text-2); }

.table, .table td, .table th { color: var(--theme-text-1); border-color: var(--theme-panel-border); }
.card { background: var(--theme-bg-1); border-color: var(--theme-panel-border); }

/* ---------------------------------------------------------------------------
   17b. BOOTSTRAP UTILITY COMPATIBILITY
   Blades across the site use Bootstrap utilities that hardcode a light theme
   (.text-dark on a dark page is invisible, .bg-white punches a white hole).
   Remap them instead of editing every template.
   ------------------------------------------------------------------------ */
.text-dark, .text-black, .text-body { color: var(--theme-text-0) !important; }
.text-muted, .text-secondary { color: var(--theme-text-2) !important; }

.bg-white, .bg-light, .bg-body, .bg-vista-white, .bg-color-white {
    background-color: var(--theme-bg-1) !important;
}

.card, .card-body, .card-header, .card-footer, .list-group-item, .accordion-item {
    background-color: var(--theme-bg-1);
    color: var(--theme-text-1);
    border-color: var(--theme-panel-border);
}
.card-header, .card-footer { border-color: var(--theme-panel-border); }

.table, .table > :not(caption) > * > * {
    color: var(--theme-text-1);
    background-color: transparent;
    border-color: var(--theme-panel-border);
}
.table thead th, .table th {
    color: var(--theme-text-0);
    background-color: var(--theme-bg-2);
    border-color: var(--theme-panel-border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, .02);
    color: var(--theme-text-1);
}

.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--theme-panel-border) !important;
}

.input-group-text {
    background-color: var(--theme-bg-2);
    border-color: var(--theme-panel-border);
    color: var(--theme-text-1);
}

/* The Axil theme paints .form-group label white, which shows as a bright bar
   behind every field label on dark. Labels never need their own surface. */
.form-group label, form label { background: transparent; }

/* Axil panels with hardcoded (non-variable) light fills */
.axil-order-summery,
.axil-checkout-billing,
.axil-dashboard-warp,
.axil-shop-sidebar,
.cart-summery-title,
.axil-product-table thead {
    background: var(--theme-bg-1);
    color: var(--theme-text-1);
}
.axil-order-summery .title,
.axil-order-summery h1, .axil-order-summery h2,
.axil-order-summery h3, .axil-order-summery h4 { color: var(--theme-text-0); }

/* The summary table hardcodes Axil's #292930 heading colour instead of using
   its own variable. Specificity is matched to style.min.css's
   `.axil-order-summery .summery-table tbody td` (0,2,2) so this wins on order. */
.axil-order-summery .summery-table tbody td,
.axil-order-summery .summery-table tbody th,
.axil-order-summery .summery-table thead td,
.axil-order-summery .summery-table thead th { color: var(--theme-text-1); }

.axil-order-summery .summery-table .order-total td,
.axil-order-summery .summery-table .order-total th { color: var(--theme-gold); }

/* Shipping-option labels also hardcode #292930 at (0,3,1). */
.axil-order-summery .summery-table .order-shipping .input-group label,
.axil-order-summery .summery-table .order-shipping label { color: var(--theme-text-1); }

/* Cart line-item product links inherit a black cell colour otherwise. */
.axil-product-table td.product-title a,
.axil-product-table td a { color: var(--theme-text-0); }
.axil-product-table td.product-title a:hover,
.axil-product-table td a:hover { color: var(--theme-orange-2); }

/* ---------------------------------------------------------------------------
   17c. CART SIDEBAR
   The slide-out drawer ships as a white panel, which left the (now light)
   product titles invisible. Darken the whole drawer instead of re-colouring
   its text back to black.
   ------------------------------------------------------------------------ */
#cart-dropdown,
#cart_section,
.cart-dropdown,
.cart-content-wrap,
.cart-header,
.cart-body,
.cart-footer {
    background: var(--theme-bg-1) !important;
    color: var(--theme-text-1);
}
.cart-header, .cart-footer { border-color: var(--theme-panel-border) !important; }
.cart-header .header-title { color: var(--theme-text-0); }

.cart-item { border-color: var(--theme-panel-border) !important; }
.cart-item .item-title,
.cart-item .item-title a { color: var(--theme-text-0) !important; }
.cart-item .item-title a:hover { color: var(--theme-orange-2) !important; }
.cart-item .item-price { color: var(--theme-gold) !important; }

/* Product thumbnails keep a light well so photos on white cut-outs still read */
.cart-item .item-img { background: var(--theme-bg-2); border-radius: 10px; }

.cart-item .pro-qty,
.cart-item .item-quantity { border-color: var(--theme-panel-border) !important; }
.cart-item .qtybtn {
    background: var(--theme-bg-2) !important;
    color: var(--theme-text-0) !important;
    border-color: var(--theme-panel-border) !important;
}
.cart-item .quantity-input {
    background: var(--theme-bg-2) !important;
    color: var(--theme-text-0) !important;
    border-color: var(--theme-panel-border) !important;
}
.cart-item .close-btn {
    background: var(--theme-bg-2) !important;
    color: var(--theme-text-1) !important;
}
.cart-item .close-btn:hover { color: var(--theme-red) !important; }

.cart-close, .sidebar-close { color: var(--theme-text-0); }
.cart-checkout-btn {
    background: linear-gradient(120deg, var(--theme-orange), var(--theme-red)) !important;
    color: #fff !important;
}

/* Radio/checkbox controls need a visible frame on dark */
.form-check-input {
    background-color: var(--theme-bg-2);
    border-color: var(--theme-panel-border);
}
.form-check-input:checked {
    background-color: var(--theme-orange);
    border-color: var(--theme-orange);
}

.alert { border-color: var(--theme-panel-border); }
.badge.bg-light { color: var(--theme-bg) !important; }

/* Keep the payment-logo strip light — those logos are drawn for white. */
.premium-payment-box { background: #ffffff !important; }

/* ---------------------------------------------------------------------------
   18. REVEAL ON SCROLL
   ------------------------------------------------------------------------ */
/* Content is visible by default. Only JS may hide it (by adding .is-hidden),
   so a script error, a blocked file, or a stalled IntersectionObserver can
   never leave the page as a black void. */
.tn-reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.tn-reveal.is-hidden { opacity: 0; transform: translateY(24px); }
.tn-reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .tn-reveal,
    .tn-reveal.is-hidden { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   19. PRODUCT GRID WRAPPER
   ------------------------------------------------------------------------ */
.tn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tn-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ---------------------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .tn-cat-grid { grid-template-columns: repeat(4, 1fr); }
    .tn-grid--6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1080px) {
    .tn-hero-grid { grid-template-columns: 1fr; }
    .tn-hero-visual { height: 400px; margin-top: 18px; }
    .tn-float-chip.c1 { left: 0; }
    .tn-float-chip.c2 { right: 0; }
}

@media (max-width: 992px) {
    .tn-section { padding: 56px 0; }
    .tn-grid, .tn-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .tn-review-grid { grid-template-columns: 1fr; }
    .tn-collection-split { grid-template-columns: 1fr; }
    .tn-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .tn-container { padding: 0 14px; }
    .tn-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .tn-grid, .tn-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tn-flash { padding: 20px 16px; border-radius: 16px; }
    .tn-flash-top { align-items: flex-start; }
    .tn-newsletter { padding: 34px 18px; }
    .tn-news-form { flex-direction: column; }
    .tn-section { padding: 42px 0; }
    .tn-section-head { margin-bottom: 24px; }
}

@media (max-width: 767px) {
    .tn-hero { padding: 28px 0 20px; }
    .tn-hero-visual { height: 300px; }
    .tn-collection { min-height: 250px; padding: 24px; }
    .tn-float-chip { padding: 8px 11px; }
    .tn-float-chip b { font-size: 11.5px; }
    .tn-float-chip span { font-size: 9.5px; }
    .tn-scroll-cue { display: none; }
}

@media (max-width: 480px) {
    .tn-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .tn-timer .t { width: 54px; }
    .tn-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tn-stat { padding: 12px 14px; }
    .tn-hero-actions .tn-btn { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   MOBILE FIXES
   ------------------------------------------------------------------------ */

/* Two cards per row leaves each button about 57px wide, which wrapped
   "Buy Now" onto a second line and doubled the height of the pair. Keep the
   two side by side on one row: drop the icon, tighten the padding and let the
   label shrink, which is enough to fit both even on a 320px screen. */
@media (max-width: 767px) {
    .tn-card-actions { gap: 6px; flex-wrap: nowrap; }
    .tn-card-actions .tn-btn {
        padding: 9px 4px;
        font-size: 11px;
        white-space: nowrap;
        letter-spacing: 0;
        min-width: 0;
        gap: 0;
    }
    .tn-card-actions .tn-btn svg { display: none; }
}

/* At 320px the card body's 14px side padding left only 44px per button and
   "Buy Now" was clipped. Reclaim the padding rather than stacking them. */
@media (max-width: 360px) {
    .tn-card-body { padding: 12px 9px 13px; }
    .tn-card-actions { gap: 5px; }
    .tn-card-actions .tn-btn { padding: 9px 2px; font-size: 10.5px; }
}

/* The category strip scrolls sideways but was hard-clipped at the edge, so it
   read as broken text rather than "there is more this way". Fade it out. */
@media (max-width: 767px) {
    .mob-chips {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        scrollbar-width: none;
    }
    .mob-chips::-webkit-scrollbar { display: none; }
}

/* Mobile bottom nav clearance — the fixed #footerNav would otherwise cover
   the end of the page on small screens. */
@media (max-width: 767px) {
    body { padding-bottom: 62px; }
}

/* ---------------------------------------------------------------------------
   MOBILE COMPACTION (owner request — cut excess scrolling on phones)
   This is intentionally the LAST 767px block in the file, so its rules win
   over the earlier responsive rules for the same selectors (equal specificity,
   later source wins). Everything here is phone-only; desktop is untouched.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

    /* 1. Hero stat strip → a single row of four instead of a 2x2 block. */
    .tn-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 16px;
    }
    .tn-stat { padding: 10px 6px; border-radius: 11px; text-align: center; }
    .tn-stat b { font-size: 15px; }
    .tn-stat span { font-size: 8.5px; letter-spacing: .02em; }

    /* 2. Drop the decorative phone-mockup hero visual on phones — it added
          ~300px of pure scrolling with no real content. */
    .tn-hero-visual { display: none; }

    /* 3. Product cards: compact with a square image, so two rows (= 4 products)
          fit within one phone screen. Applies to every product grid, including
          Flash Sale and Best Sellers. */
    .tn-grid, .tn-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tn-card-media { aspect-ratio: 1 / 1; padding: 8px; }
    .tn-card-body { padding: 9px 9px 10px; }
    .tn-card-cat { font-size: 9px; letter-spacing: .08em; }
    .tn-card-name {
        font-size: 12px;
        margin-top: 3px;
        min-height: 0;
        -webkit-line-clamp: 1;
        line-height: 1.25;
    }
    .tn-card-stars { margin-top: 5px; }
    .tn-card-actions { margin-top: 8px; padding-top: 8px; }

    /* 4. Popular categories → one horizontal, swipeable row. */
    .tn-cat-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    .tn-cat-grid::-webkit-scrollbar { display: none; }
    .tn-cat-card {
        flex: 0 0 auto;
        width: 92px;
        padding: 12px 8px;
        gap: 8px;
        scroll-snap-align: start;
    }
    .tn-cat-thumb { width: 52px; height: 52px; }
    .tn-cat-card h4 { font-size: 11.5px; }

    /* 5. Collection panels → much shorter, tighter. */
    .tn-collection-split { gap: 12px; }
    .tn-collection { min-height: 128px; padding: 16px; border-radius: 16px; }
    .tn-collection-shape { width: 150px; height: 150px; right: -30px; top: -30px; }
    .tn-collection h3 { font-size: 18px; margin-top: 4px; }
    .tn-collection p { font-size: 12px; margin-top: 4px; }
    .tn-collection .tn-btn { margin-top: 10px !important; }

    /* 6. Reviews → one horizontal, swipeable row of compact cards; the
          message is trimmed to three lines. */
    .tn-review-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tn-review-grid::-webkit-scrollbar { display: none; }
    .tn-review-card {
        flex: 0 0 82%;
        padding: 16px;
        scroll-snap-align: start;
    }
    .tn-review-card p {
        font-size: 13px;
        margin-top: 10px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 7. FAQ → tighter rows and smaller type. */
    .tn-faq-item { padding: 13px 0; }
    .tn-faq-q h4 { font-size: 13.5px; }
    .tn-faq-a p { font-size: 13px; line-height: 1.55; padding-top: 8px; }

    /* Trim the vertical rhythm between sections on phones. */
    .tn-section { padding: 30px 0; }
    .tn-section.tn-section--tight { padding: 20px 0; }
    .tn-section-head { margin-bottom: 16px; }
}