/* ===== Page-specific styles (move to SCSS once approved) ===== */
:root {
    /* existing layout vars */
    --brand-accent:#FFE500;
    --header-h:64px;
    --tabs-h:48px;
    --subnav-h:44px;

    /* theme tokens */
    --mt-accent: var(--brand-accent);
    --mt-bg: #0f0f10;
    --mt-bg-2: #161617;
    --mt-surface: #1e1f21;
    --mt-border: rgba(255,255,255,.08);
    --mt-text: rgba(255,255,255,.92);
    --mt-text-dim: rgba(255,255,255,.65);
    --mt-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);

    --mt-radius: 10px;
    --mt-radius-lg: 20px;
}

/* If you flip to a light theme, these keep contrast solid */
[data-bs-theme="light"] {
    --mt-bg: #fff;
    --mt-bg-2: #f7f7f8;
    --mt-surface: #fff;
    --mt-border: rgba(0,0,0,.12);
    --mt-text: #1b1c1d;
    --mt-text-dim: rgba(0,0,0,.7);
    --mt-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(0,0,0,.04);
}

/* Base look */
body { background: var(--mt-bg); color: var(--mt-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p, .lead { color: var(--mt-text-dim); }
a { color: var(--mt-text); }
a:hover { color: var(--mt-accent); }

.text-brand-accent{ color:var(--brand-accent); }

/* ===== Rajdhani font globally for headings & key UI ===== */
h1, h2, h3, h4, h5, h6, p,
.product-tabs .nav-link,
#subnavList .nav-link,
.btn,
.spec-k,
.spec-v,
.lead,
table,
.model-name,
.model-price,
#intro p,
figcaption,
.text-muted,
.buybar {
    font-family: 'Rajdhani', sans-serif;
}

#features h2 {
    color: #FFE500;
}

/* ===== Primary product tabs under site header ===== */
#productTabsWrap{ 
    top: var(--header-h); 
    background: var(--mt-bg-2) !important;
    border-bottom: 1px solid var(--mt-border) !important;
    backdrop-filter: saturate(120%) blur(6px);
}
#productTabsWrap .product-tabs { margin-bottom: 0 !important; }

.product-tabs .nav-link {
    color: var(--mt-text-dim);
    padding: .5rem .75rem;
    border-radius: 0; /* remove pill shape */
    background: transparent;
    border-bottom: 3px solid transparent; /* base for underline */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    transition: color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.product-tabs .nav-link:hover {
    color: var(--mt-text);
    border-color: rgba(255,255,255,.25);
    background: transparent;
}
.product-tabs .nav-link.active {
    color: var(--mt-accent);
    border-color: var(--mt-accent);
    background: transparent;
    font-weight: 600;
}

/* ===== Secondary sub‑nav (appears after hero) ===== */
.subnav { 
    margin-top: 0 !important; 
    top: calc(var(--header-h) + var(--tabs-h)); 
    background: var(--mt-bg);
    border-bottom: 1px solid var(--mt-border);
    backdrop-filter: saturate(120%) blur(6px);
}
#subnavList{ display:flex; flex-wrap:nowrap !important; overflow:auto; -webkit-overflow-scrolling:touch; }
#subnavList .nav-item{ flex:0 0 auto; }
#subnavList .nav-link{
    color: var(--mt-text-dim);
    background: transparent;
    border-radius: 999px;
    padding: .35rem .75rem;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space:nowrap;
}
#subnavList .nav-link:hover { color: var(--mt-text); background: rgba(255,255,255,.06); }
#subnavList .nav-link.active {
    color: #000;
    background: var(--mt-accent);
    box-shadow: 0 6px 16px rgba(255,229,0,.25);
    font-weight: 700;
}

/* Anchor & table sticky offsets */
.section-anchor{ scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + var(--subnav-h)); }
/* Only allow the .table-responsive overflow on small screens */
@media (min-width: 768px){
    .comparison.table-responsive { overflow-x: visible; }
}
.comparison thead th{
    position: sticky;
    top: calc(var(--header-h) + var(--tabs-h));
    background: var(--mt-bg);
    z-index: 2;
}
.subnav-shown .comparison thead th{
    top: calc(var(--header-h) + var(--tabs-h) + var(--subnav-h));
}

/* Desktop/tablet: keep sticky working (you already have this) */
@media (min-width: 768px){
    .comparison.table-responsive { overflow-x: visible; } /* let the viewport handle scrolling */
    .comparison thead th{
        position: sticky;
        top: calc(var(--header-h) + var(--tabs-h));
        background: var(--mt-bg);
        z-index: 2;
    }
    .subnav-shown .comparison thead th{
        top: calc(var(--header-h) + var(--tabs-h) + var(--subnav-h));
    }
}

/* Mobile: disable sticky to avoid iOS overflow bugs */
@media (max-width: 767.98px){
    .comparison thead th{
        position: static !important;
        top: auto !important;
        z-index: auto;
    }
}            

/* ===== Hero ===== */
.hero{
    position: relative; /* safety, in case the Bootstrap utility isn't present */
    min-height: clamp(420px, 62vh, 720px);
    display: grid;
    align-content: end;
    padding: 4rem 0 2rem;
}
.hero-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.05);
    transform: translateY(var(--heroShift,0px));
    will-change: transform;
    z-index: 0; /* image at the bottom of the stack */
}
/* darken layer across the whole hero */
.hero::before{
    content:"";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1; /* above image */
}
/* existing bottom gradient, above the darken layer */
.hero::after{
    content:"";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 45%, transparent);
    z-index: 2;
}
/* only lift the text container, NOT the picture */
.hero .container{
    position: relative;
    z-index: 3; /* above both overlays */
}

/* ===== Sticky CTA card ===== */
.sticky-cta{ 
    position:sticky; 
    top: calc(var(--header-h) + 76px); 
    backdrop-filter: blur(6px); 
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--mt-border); 
    color:#fff;
    border-radius:var(--mt-radius);
    box-shadow: var(--mt-shadow);
}
.sticky-cta .btn.btn-warning { background: var(--mt-accent); border: none; color: #000; }
.sticky-cta .btn.btn-warning:hover { filter: brightness(.95); }
.sticky-cta .btn.btn-outline-light { border-color: rgba(255,255,255,.2); color: var(--mt-text); }
.sticky-cta .btn.btn-outline-light:hover { background: rgba(255,255,255,.12); }

/* Make hero text pop */
.hero .lead{
    color: #fff;                /* override the global dim */
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Ensure hero text/CTA sit over overlays */
.hero .container{ z-index: 4; }   /* one step higher than your ::after=2 */

/* Lighten CTA in hero specifically */
.hero .sticky-cta{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.22);
    backdrop-filter: blur(6px) saturate(130%); /* brighter feel than base */
}

/* On small screens, reduce backdrop muddiness a touch */
@media (max-width: 991.98px){
    .hero .sticky-cta{
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
    }
}            

/* ===== Quick specs strip ===== */
.specs-strip .spec{ 
    display:flex; flex-direction:column; align-items:center; gap:.25rem; 
    padding:.75rem; 
    background: var(--mt-surface); 
    border-radius: var(--mt-radius); 
    border: 1px solid var(--mt-border);
    box-shadow: var(--mt-shadow); 
}
.spec-ic{ font-size:1.5rem; opacity:.9; }
.spec-k{ text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; color: var(--mt-text-dim); }
.spec-v{ font-weight:600; color: var(--mt-text); }

/* ===== Feature blocks (reveal on scroll) ===== */
.img-fluid.rounded-3 { border-radius: var(--mt-radius-lg) !important; }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
h2.h3 { letter-spacing: .06em; }

/* ===== Parallax divider ===== */
.divider-parallax{ 
    position:relative; 
    padding:7rem 0;
    border-top: 1px solid var(--mt-border);
    border-bottom: 1px solid var(--mt-border);
/* background-attachment: fixed;  (optional; ignored on iOS) */
}
.divider-parallax::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.divider-parallax .container{ position:relative; z-index:1; }

/* ===== Comparison table look ===== */
.table { --bs-table-bg: transparent; color: var(--mt-text); }
.table thead th {
    color: #FFE500;
    border-bottom: 1px solid var(--mt-border) !important;
}
.table tbody th, .table tbody td { border-top: 1px solid var(--mt-border); }
.table tr:hover td, .table tr:hover th { background: rgba(255,255,255,.03); }

/* ===== Cards (use cases) ===== */
.card { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-radius); box-shadow: var(--mt-shadow); }
.card .h5 { letter-spacing: .02em; }

/* ===== Focus states (a11y) ===== */
:where(a, button, .nav-link, .btn):focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255,229,0,.25);
}

/* Hide Tabs */
body.hide-tabs #productTabsWrap {
    display: none;
}

/* Reusable figure caption overlay */
.mt-figure{ position: relative; margin:0; }
.mt-figure img{ display:block; width:100%; height:auto; border-radius: var(--mt-radius-lg); }
.mt-figure figcaption{
    position:absolute; left:.5rem; bottom:.5rem;
    padding:.3rem .55rem; font-size:.8rem; line-height:1;
    color: var(--mt-text);
    background: rgba(20,20,20,.55);
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    backdrop-filter: blur(6px) saturate(120%);
}
@media (prefers-contrast: more){
    .mt-figure figcaption{ background: var(--mt-accent); }
}

/* Model strip: fluid, no boxes */
.model-strip { background: var(--mt-bg); }

.model-strip-list{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    align-items: end;
    padding-block: .25rem;
}

@media (min-width: 768px){
    /* On tablet/desktop, wrap into a responsive grid and kill horizontal scroll */
    .model-strip-list{
        grid-auto-flow: dense;
        grid-auto-columns: unset;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        overflow: visible;
    }
}

.model-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.model-img{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;     /* consistent tile */
    object-fit: contain;      /* respect transparent cutouts */
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
    transition: transform .2s ease, filter .2s ease;
}

.model-link:hover .model-img{
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.55));
}

.model-name{
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mt-text);
    text-transform: uppercase;
    font-size: .9rem;
    opacity: .95;
}

.model-price{
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-accent);
    text-transform: uppercase;
    font-size: 1.25rem;
}

/* Optional: slightly larger tiles on big desktop */
@media (min-width: 1200px){
    .model-strip-list{ gap: 1.25rem; }
    .model-name{ font-size: 1rem; }
}

/* Mobile buy bar */
.buybar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--mt-bg-2) 70%, #000 30%);
    border-top: 1px solid var(--mt-border);
    padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
    z-index: 1040;
    backdrop-filter: saturate(120%) blur(8px);
}

/* Buttons */
.buybar .btn.btn-warning{ background: var(--mt-accent); border: none; color:#000; }
.buybar .btn.btn-outline-light{ border-color: rgba(255,255,255,.25); color: var(--mt-text); }
.buybar .btn.btn-outline-light:hover{ background: rgba(255,255,255,.12); }
.buybar-title{ color: var(--mt-text); opacity: .92; }

/* Make room for the bar when it’s visible */
body.has-buybar{ padding-bottom: calc(var(--buybar-h,56px) + env(safe-area-inset-bottom)); }

/* Desktop: hide bar, show hero CTA (handled by d-lg-block) */
@media (min-width: 992px){
    .buybar{ display: none; }
}

/* Mobile tweaks */
@media (max-width: 991.98px){
    :root{ --header-h:56px; }
    .sticky-cta{ top: calc(var(--header-h) + 16px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto !important; }
    .reveal { transition:none; transform:none; opacity:1; }
    .product-tabs .nav-link, #subnavList .nav-link, #gallery img { transition:none; }
}

/* Lightbox sits above buybar/nav */
.glightbox-container{ z-index: 2000; }

/* Video play overlay on gallery tiles */
.mt-figure .glightbox.is-video::after{
    content:"\f144"; /* FA play-circle (fallback if FA isn't loaded: still reserve space) */
    font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free",Arial, sans-serif;
    font-weight:900;
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-size:2.5rem;
    color: rgba(255,255,255,.9);
    text-shadow:0 8px 24px rgba(0,0,0,.45);
    opacity:.0; transition:opacity .2s ease;
    pointer-events:none;
}
.mt-figure:hover .glightbox.is-video::after{ opacity:.9; }

/* Optional: subtle zoom on hover for all tiles */
.mt-figure .glightbox img{
    transition: transform .2s ease, filter .2s ease;
}
.mt-figure .glightbox:hover img{
    transform: translateY(-2px);
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

/* ===== Gallery layout ===== */
.mt-gallery{
    display:grid;
    gap: .75rem;
    grid-template-columns: 1fr; /* mobile: stacked */
}

@media (min-width: 576px){
    .mt-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* small/tablet */
}

@media (min-width: 992px){
    .mt-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* desktop: 3-across */
}

.mt-tile{
    text-decoration:none;
    color: inherit;
    display:block;
    border-radius: var(--mt-radius-lg);
    overflow:hidden;
    border: 1px solid var(--mt-border);
    background: var(--mt-surface);
    box-shadow: var(--mt-shadow);
    position: relative;
}

.mt-tile-img{
    width:100%;
    aspect-ratio: 4 / 3;     /* consistent tile shape */
    object-fit: cover;
    display:block;
    transform: translateZ(0);
    transition: transform .2s ease, filter .2s ease;
}

/* caption overlay keeps your existing mt-figure style, just ensure it sits above overlays */
.mt-tile .mt-figure{ position:relative; }
.mt-tile .mt-figure figcaption{ z-index: 3; }

/* hover / press */
.mt-tile:hover .mt-tile-img{
    transform: scale(1.02);
    filter: contrast(1.03) saturate(1.02);
}

/* Video overlay tint + play icon */
.mt-tile.is-video::before{
    content:"";
    position:absolute; inset:0;
    background: rgba(0,0,0,.25);
    z-index: 1;
}

/* Hidden items for load more */
.mt-tile[hidden]{ display:none !important; }

/* ===== GLightbox theming to match MT dark ===== */
.glightbox-container{
    --glb-bg: rgba(10,10,10,.92);
    --glb-surface: rgba(34,34,34,1);
    --glb-border: rgba(255,255,255,.10);
    --glb-text: rgba(255,255,255,.92);
    --glb-dim: rgba(255,255,255,.65);
    --glb-accent: var(--mt-accent);
}

/* Backdrop */
.glightbox-container .goverlay{
    background: var(--glb-bg) !important;
}

/* The “caption box” */
.glightbox-container .gdesc-inner{
    background: var(--glb-surface) !important;
    border: 1px solid var(--glb-border) !important;
    color: var(--glb-text) !important;
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    padding: .75rem 1rem !important;
}

/* Title + description text */
.glightbox-container .gslide-title{
    color: var(--glb-text) !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700 !important;
    letter-spacing: .02em;
    margin: 0 0 .15rem 0 !important;
}

.glightbox-container .gslide-desc{
    color: var(--glb-dim) !important;
    margin: 0 !important;
}

/* Close / next / prev buttons */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--glb-border) !important;
    border-radius: 999px !important;
    backdrop-filter: blur(10px) saturate(120%);
}

.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover{
    border-color: rgba(255,255,255,.18) !important;
}

/* Icons inside the buttons */
.glightbox-container .gclose svg,
.glightbox-container .gnext svg,
.glightbox-container .gprev svg{
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}

/* ===== Tile shimmer skeleton ===== */
.mt-tile{
    position: relative;
}

@keyframes mt-shimmer{
    to { transform: translateX(100%); }
}

/* Keep shimmer layers behind content, without breaking absolute captions */
.mt-tile .mt-figure{
    position: relative;
    z-index: 2;
}

.mt-tile .mt-figure figcaption{
    z-index: 3; /* sits above video tint too */
    /* do NOT set position here */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .mt-tile.is-loading::after{ animation: none; }
}

.mt-tile{
    opacity: 1;
    transform: none;
    transition: opacity .25s ease, transform .25s ease;
}
.mt-tile.is-revealing{
    opacity: 0;
    transform: translateY(10px);
}

/* Motion tile video should behave like your images */
.mt-tile-video{
    width: 100%;
    aspect-ratio: 4 / 3;     /* matches .mt-tile-img */
    object-fit: cover;
    display: block;
}

/* Don’t tint motion tiles like videos */
.mt-tile.is-motion::before{
    content: none !important;
}

/* Optional: prevent hover treating it like a link */
.mt-tile.is-motion{
    cursor: default;
}

/* ===== Gallery type badge ===== */
.mt-tile::marker{ content:none; }

.mt-tile::after{
    position: absolute;
    top: .5rem;
    right: .5rem;

    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;

    font-family: "Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free",Arial,sans-serif;
    font-weight: 900;
    font-size: .9rem;

    color: rgba(255,255,255,.9);
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;

    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);

    opacity: .65;
    pointer-events: none;
    z-index: 4;

    transition: opacity .2s ease, transform .2s ease;
}

/* Default = image */
.mt-tile::after{
    content: "\f03e"; /* fa-image */
}

/* Video */
.mt-tile.is-video::after{
    content: "\f008"; /* fa-film */
}

/* Motion loop */
.mt-tile.is-motion::after{
    content: "\e190"; /* fa-gif */
}

/* Interaction polish */
.mt-tile:hover::after{
    opacity: .95;
    transform: scale(1.05);
}

/* =========================
VIDEO: tint on tile, play icon on figure
========================= */
.mt-tile.is-video::before{
    content:"";
    position:absolute; inset:0;
    background: rgba(0,0,0,.25);
    z-index: 1;
}

/* Center play icon (does NOT consume .mt-tile::after anymore) */
.mt-tile.is-video .mt-figure::after{
    content:"\f144"; /* fa-play-circle */
    font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free",Arial,sans-serif;
    font-weight:900;

    position:absolute; inset:0;
    display:grid; place-items:center;

    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: rgba(255,255,255,.92);
    text-shadow: 0 12px 28px rgba(0,0,0,.55);

    z-index: 2;
    pointer-events:none;
    opacity: .95;
}


/* =========================
SHIMMER: move it to the figure so tile::after stays free for the badge
========================= */
.mt-tile.is-loading .mt-figure::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: rgba(255,255,255,.06);
    z-index: 0;
}

.mt-tile.is-loading .mt-figure::after{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );
    transform: translateX(-100%);
    animation: mt-shimmer 1.1s infinite;
}

/* Make sure your real media sits above shimmer */
.mt-tile .mt-figure > img,
.mt-tile .mt-figure > video{
    position: relative;
    z-index: 2;
}

.mt-tile .mt-figure figcaption{
    z-index: 3;
}


/* =========================
MOTION tiles: no tint, no big play icon
(but DO allow the badge)
========================= */
.mt-tile.is-motion::before{ content:none !important; } /* prevents tint if inherited */
.mt-tile.is-motion .mt-figure::after{ content:none !important; } /* kills the play icon */

/* Optional: keep cursor default */
.mt-tile.is-motion{ cursor: default; }

/* ===== Gallery filter toggles ===== */
.mt-filters{
    white-space: nowrap;
}

.mt-filter{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.9);

    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);

    transition: transform .15s ease, opacity .15s ease, border-color .15s ease, background .15s ease;
    opacity: .75;
}

.mt-filter:hover{
    opacity: .95;
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.3);
}

.mt-filter.active{
    opacity: 1;
    background: color-mix(in srgb, var(--mt-accent) 65%, #000 35%);
    border-color: rgba(255,229,0,.55);
    color: #000;
}

.mt-filter i{
    font-size: .95rem;
    line-height: 1;
}