/* ==========================================================================
   Yantra Source — storefront design system
   Modern / elegant / futuristic: deep-space gradients + glass surfaces on a
   crisp, highly-readable light base (a B2B catalogue lives or dies on
   legibility, so the "futuristic" language is concentrated in the hero,
   header, footer and accents rather than washed across every content page).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Core ink / surfaces */
    --ink: #0b1220;
    --ink-soft: #1e293b;
    --muted: #64748b;
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #f1f3f9;
    --line: #e6e8f0;

    /* Brand gradient trio — indigo → cyan → violet */
    --p1: #4f46e5;
    --p2: #06b6d4;
    --p3: #a855f7;
    --gradient-brand: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%);
    --gradient-violet: linear-gradient(135deg, var(--p3) 0%, var(--p1) 100%);
    --gradient-dark: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(79,70,229,.35), transparent 60%),
                     radial-gradient(ellipse 60% 50% at 85% 15%, rgba(6,182,212,.28), transparent 55%),
                     radial-gradient(ellipse 60% 60% at 60% 100%, rgba(168,85,247,.22), transparent 60%),
                     linear-gradient(160deg, #070b14 0%, #0b1220 45%, #0a1830 100%);

    /* Warm CTA accent — deliberately outside the cool gradient family for contrast */
    --cta: #f59e0b;
    --cta-dark: #b45309;

    /* Legacy aliases kept so every existing view keeps working unchanged */
    --brand-navy: var(--ink);
    --brand-accent: var(--cta);
    --brand-teal: var(--p2);
    --border: var(--line);

    --radius-sm: .6rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 12px 28px rgba(15, 23, 42, .10);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .16);
    --shadow-glow: 0 8px 24px rgba(79, 70, 229, .25);
}

@media (prefers-color-scheme: dark) {
    /* Static marketing/catalogue pages: keep the light, high-contrast base
       regardless of OS theme — this is a real storefront, not a themed app. */
}

* { box-sizing: border-box; }
body {
    background: var(--bg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .section-title, .btn-quote, .sidebar-brand {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}
a { text-decoration: none; transition: color .15s ease; }
::selection { background: var(--p1); color: #fff; }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 1030; box-shadow: var(--shadow-sm); }
.site-header .top-strip {
    background: var(--ink); color: #b9c2d6; font-size: .78rem; padding: .5rem 0;
    position: relative; overflow: hidden;
}
.site-header .top-strip::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gradient-brand); opacity: .8;
}
.site-header .top-strip .contact-links { display: flex; align-items: center; gap: 1.4rem; }
.site-header .top-strip .contact-links span { display: inline-flex; align-items: center; gap: .4rem; }
.site-header .top-strip .contact-links i { color: var(--p2); }
.site-header .top-strip a { color: #b9c2d6; }
.site-header .top-strip a:hover { color: #fff; }
.site-header .top-strip .social-links { display: flex; gap: .5rem; }
.site-header .top-strip .social-links a {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: background .15s, color .15s;
}
.site-header .top-strip .social-links a:hover { background: var(--gradient-brand); color: #fff; }
@media (max-width: 767px) {
    .site-header .top-strip .container { flex-direction: column; gap: .4rem; }
    .site-header .top-strip .contact-links { justify-content: center; flex-wrap: wrap; row-gap: .3rem; }
    .site-header .top-strip .social-links { justify-content: center; width: 100%; }
}

.footer-social { display: flex; gap: .7rem; margin-top: 1rem; }
.footer-social a {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; background: rgba(255,255,255,.08); color: #b9c2d6; font-size: .95rem;
    transition: background .15s, color .15s;
}
.footer-social a:hover { background: var(--gradient-brand); color: #fff; }
.brand-logo img { max-height: 44px; }
.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a { position: relative; color: var(--ink); font-weight: 600; font-size: .92rem; padding: .3rem 0; }
.main-nav a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: var(--gradient-brand); border-radius: 2px; transition: width .2s ease;
}
.main-nav a:hover { color: var(--p1); }
.main-nav a:hover::after { width: 100%; }
/* The top-level sliding underline is only for Home/Products/.../Categories —
   links inside the Categories flyout get their own hover style below instead. */
.main-nav .dropdown-menu a::after { content: none; }

/* Categories flyout — click-to-open, Bootstrap's own dropdown JS (toggles the
   .show class on .dropdown-menu); only the styling below is custom. */
.main-nav .dropdown { position: relative; }
.main-nav .dropdown-toggle::after { display: none; } /* hide Bootstrap's default caret — we use a real <i class="bi"> icon instead */
.main-nav .dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.main-nav .dropdown-toggle .bi-chevron-down { font-size: .65rem; transition: transform .18s ease; }
.main-nav .dropdown-toggle.show .bi-chevron-down { transform: rotate(180deg); }
.main-nav .dropdown-menu {
    position: absolute; top: 100%; left: 50%; margin-top: .85rem; min-width: 220px;
    padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    background: #fff; transform: translateX(-50%); z-index: 1040;
}
.main-nav .dropdown-menu .dropdown-item {
    display: block; padding: .55rem .75rem; border-radius: .6rem; font-weight: 600;
    font-size: .88rem; color: var(--ink); transition: background .15s, color .15s;
}
.main-nav .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown-menu .dropdown-item:focus { background: var(--surface-2); color: var(--p1); }

/* Mega menu — same click-to-open trigger as a simple dropdown (Bootstrap's
   own data-bs-toggle="dropdown"; nothing here changes when it opens), but a
   much wider multi-column panel instead of .dropdown-menu's plain <ul>.
   Columns come from each sub-item's admin-assigned "column heading"
   (Settings -> Menu Management); an optional promo tile sits on the right.
   Columns wrap (short trailing columns drop under the first one) rather
   than being forced into a single row — the confirmed preferred look. */
.main-nav .mega-menu {
    /* display intentionally left to Bootstrap's own .dropdown-menu (none) /
       .show (block) rule — only align-items/gap/etc. are set here, so the
       panel stays hidden until it actually gets the .show class instead of
       always rendering on screen. */
    align-items: stretch; gap: 2rem; padding: 1.75rem 2rem; border-radius: var(--radius-lg);
    width: max-content; max-width: min(960px, 92vw); left: 0; transform: none;
    overflow: hidden; /* clips the banner tile to the panel's own rounded-corner box — it was bursting past the edge */
}
.main-nav .mega-menu.show { display: flex; }
.mega-menu-columns { display: flex; flex-wrap: wrap; gap: 2.5rem; align-content: flex-start; }
.mega-menu-col { min-width: 160px; }
.mega-menu-heading {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mega-menu-link {
    display: block; padding: .4rem 0; font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap;
    transition: color .15s, transform .15s;
}
.mega-menu-link:hover { color: var(--p1); transform: translateX(2px); }
.mega-menu-banner {
    flex-shrink: 0; width: 190px; border-radius: var(--radius-sm); overflow: hidden; position: relative;
    display: block; align-self: stretch;
}
.mega-menu-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-menu-banner span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem; font-weight: 700; font-size: .82rem;
    color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent 70%);
}

.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-actions a {
    color: var(--ink); font-size: 1.05rem; width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s;
}
.header-actions a:hover { background: #fff; color: var(--p1); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-quote {
    background: var(--gradient-brand); color: #fff !important; padding: .6rem 1.3rem; border-radius: 999px;
    font-weight: 600; font-size: .88rem !important; border: none; cursor: pointer;
    box-shadow: var(--shadow-glow); transition: transform .15s ease, box-shadow .15s ease; margin-left: .4rem;
}
.btn-quote:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,.35); color: #fff !important; }

/* Logo / search / actions row — a 3-column grid (not flex) so the search box
   sits truly centered in the row regardless of the logo and actions blocks
   being different widths, rather than just centered in the leftover space
   after them (which visibly skewed it toward the logo). */
.header-row { display: grid; grid-template-columns: 1fr minmax(0, 538px) 1fr; align-items: center; gap: 1.5rem; }
.header-row .header-actions { justify-self: end; }
@media (max-width: 767px) {
    .header-row { grid-template-columns: auto 1fr auto; }
}

/* ---- Search ---- */
.search-box { position: relative; width: 100%; max-width: 538px; justify-self: center; }
.search-box::before {
    content: '\f52a'; font-family: 'bootstrap-icons'; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .95rem; pointer-events: none; z-index: 1;
}
.search-box input {
    border-radius: 999px; padding: .6rem 1.2rem .6rem 2.6rem; border: 1.5px solid var(--line); width: 100%;
    background: var(--surface-2); transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-box input:focus { outline: none; border-color: var(--p1); background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
.search-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    max-height: 420px; overflow-y: auto; z-index: 1050; display: none;
}
.search-suggest.show { display: block; }
.search-suggest .suggest-group-label { font-size: .7rem; text-transform: uppercase; color: #94a3b8; padding: .6rem 1rem 0; letter-spacing: .06em; font-weight: 600; }
.search-suggest a.suggest-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; color: var(--ink-soft); border-radius: .5rem; margin: 0 .4rem; }
.search-suggest a.suggest-item:hover { background: var(--surface-2); color: var(--p1); }
.search-suggest a.suggest-item img { width: 32px; height: 32px; object-fit: cover; border-radius: .4rem; background: var(--surface-2); }

/* ---- Hero: deep-space gradient + grid mesh, the "futuristic" centerpiece ----
   Structure: a rotating slider (badge/heading/subtitle/CTA, one "slide" built
   from Settings when Homepage Builder has no banners, several when it does)
   sits on top; the search bar, quick category links and stats row live
   OUTSIDE the slider so they never rotate away — only the message above them
   changes. */
.hero {
    position: relative; background: var(--gradient-dark); color: #fff; overflow: hidden; isolation: isolate;
}
.hero::before {
    /* faint technical grid overlay */
    content: ''; position: absolute; inset: 0; z-index: 0; opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 90%);
}
.hero::after {
    /* soft floating glow orb */
    content: ''; position: absolute; z-index: 0; width: 520px; height: 520px; right: -160px; top: -180px;
    background: radial-gradient(circle, rgba(6,182,212,.35), transparent 70%);
    border-radius: 50%; filter: blur(10px); animation: heroFloat 10s ease-in-out infinite;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }
.hero .container { position: relative; z-index: 1; padding-top: 4.5rem; padding-bottom: 3.5rem; }
/* Bottom-of-page CTA banner reuses .hero's dark gradient + grid/glow decoration
   but is its own standalone block (not the homepage's main slider section),
   so it needs plain symmetric padding instead of inheriting .hero .container's
   slider-specific top/bottom values — those stacked on top of the inline
   padding already on this element and made the bottom look cramped relative
   to the top. */
.cta-banner .container { position: relative; z-index: 1; padding: 0; }

/* Two-part layout: slider (left, wider) + sponsored product cards (right). */
.hero-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2.5rem; align-items: start; }
.hero-grid--no-promo { grid-template-columns: 1fr; }
.hero-main { min-width: 0; }

/* Each slide: a square image on the left, text on the right — no prev/next
   arrows, navigated only by the dots below (plus auto-advance). */
.hero-slide-row { display: flex; align-items: center; gap: 2rem; }
.hero-slide-image {
    flex-shrink: 0; width: 200px; height: 200px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid rgba(255,255,255,.14); background: #fff;
}
.hero-slide-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide-text { min-width: 0; }
.hero-slide-text p, .hero-slide-text h1 { max-width: none; }

.hero-slider .carousel-item { padding-bottom: 1.5rem; }
.hero-indicators { position: static; margin: .5rem 0 0 !important; gap: .5rem; justify-content: flex-start; }
/* Bootstrap's own .carousel-indicators [data-bs-target] rule (30px-wide bars
   with a transparent 10px border, for hit-area padding) outranks a plain
   ".hero-indicators button" selector on specificity, so it wins the
   shape-defining properties unless matched at the same specificity here —
   hence targeting [data-bs-target] instead of the element type. */
.hero-indicators [data-bs-target] {
    width: 9px; height: 9px; border-radius: 50%; opacity: 1; background: rgba(255,255,255,.25);
    border: 1.5px solid rgba(255,255,255,.35); box-sizing: border-box; text-indent: -9999px; overflow: hidden;
    transition: background .2s ease, border-color .2s ease, width .25s ease;
}
.hero-indicators [data-bs-target].active {
    width: 22px; border-radius: 999px; background: #67e8f9; border-color: #67e8f9;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: .9rem;
    background: var(--gradient-brand); padding: .65rem 1.4rem; border-radius: 999px; box-shadow: var(--shadow-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hero-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,.4); }

.hero .eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; font-size: .76rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #c7d2fe; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    padding: .4rem .9rem .4rem .7rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.hero .eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #67e8f9; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(103,232,249,.6); animation: eyebrowPulse 2s ease-out infinite;
}
@keyframes eyebrowPulse {
    0% { box-shadow: 0 0 0 0 rgba(103,232,249,.5); }
    70% { box-shadow: 0 0 0 7px rgba(103,232,249,0); }
    100% { box-shadow: 0 0 0 0 rgba(103,232,249,0); }
}
@media (prefers-reduced-motion: reduce) { .hero .eyebrow-dot { animation: none; } }
.hero h1 {
    font-weight: 700; font-size: 2.9rem; line-height: 1.14; letter-spacing: -.015em; margin-bottom: 1.1rem; max-width: 700px;
}
.hero h1 .accent-text {
    background: linear-gradient(135deg, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: #cbd5e1; max-width: 600px; font-size: 1.05rem; line-height: 1.6; }

/* Sponsored product cards, right column of the hero grid. */
.hero-promo { display: flex; flex-direction: column; gap: 1rem; }
.hero-promo-card {
    position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
    backdrop-filter: blur(10px); transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-promo-card:hover { background: rgba(255,255,255,.11); border-color: rgba(103,232,249,.4); transform: translateY(-2px); }
.hero-promo-tag {
    position: absolute; top: -.5rem; left: 1rem; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #0f172a; background: #67e8f9; padding: .2rem .55rem; border-radius: 999px;
}
.hero-promo-image {
    flex-shrink: 0; width: 68px; height: 68px; border-radius: .7rem; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-promo-image img { width: 100%; height: 100%; object-fit: contain; }
.hero-promo-image i { font-size: 1.4rem; color: #cbd5e1; }
.hero-promo-body { min-width: 0; flex: 1; }
.hero-promo-brand { font-size: .7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.hero-promo-name {
    font-size: .92rem; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: .3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-promo-price { font-size: .82rem; font-weight: 700; color: #67e8f9; }
.hero-promo-arrow { color: #94a3b8; font-size: 1rem; flex-shrink: 0; transition: transform .18s ease, color .18s ease; }
.hero-promo-card:hover .hero-promo-arrow { color: #67e8f9; transform: translateX(3px); }

@media (max-width: 991px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-promo { flex-direction: row; flex-wrap: wrap; }
    .hero-promo-card { flex: 1 1 260px; }
}
@media (max-width: 575px) {
    .hero-promo { flex-direction: column; }
    .hero-promo-card { flex-basis: auto; }
}
@media (max-width: 767px) {
    .hero-slide-row { flex-direction: column; align-items: flex-start; }
    .hero-slide-image { width: 100%; height: 200px; }
}

/* ---- Section headings ---- */
.section-title {
    font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 1.3rem;
    display: flex; justify-content: space-between; align-items: center; letter-spacing: -.01em;
}
.section-title a { font-size: .84rem; font-weight: 600; color: var(--p1); }
.section-title a:hover { color: var(--p3); }

/* ---- Homepage category slider (Admin → Homepage Builder → Category Slider) ---- */
.category-slide-row {
    display: flex; align-items: stretch; gap: 2rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.category-slide-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-slide-image { flex-shrink: 0; width: 260px; height: 200px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.category-slide-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-slide-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.category-slide-text h3 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.category-slide-text p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 520px; }
.category-slide-cta { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--p1); transition: color .15s ease; }
.category-slide-row:hover .category-slide-cta { color: var(--p3); }
.category-slider-indicators { position: static; margin: .9rem 0 0 !important; gap: .5rem; justify-content: center; }
.category-slider-indicators [data-bs-target] {
    width: 9px; height: 9px; border-radius: 50%; opacity: 1; background: var(--line);
    border: 1.5px solid var(--line); box-sizing: border-box; text-indent: -9999px; overflow: hidden;
    transition: background .2s ease, border-color .2s ease, width .25s ease;
}
.category-slider-indicators [data-bs-target].active { width: 22px; border-radius: 999px; background: var(--gradient-brand); border-color: transparent; }
@media (max-width: 767px) {
    .category-slide-row { flex-direction: column; padding: 1.25rem; }
    .category-slide-image { width: 100%; height: 180px; }
}

/* ---- Category tiles ---- */
.category-tile {
    position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem 1rem; text-align: center; height: 100%;
    background: var(--surface); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.category-tile::before {
    content: ''; position: absolute; inset: 0; opacity: 0; background: var(--gradient-brand); transition: opacity .2s ease; z-index: 0;
}
.category-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.category-tile:hover::before { opacity: .04; }
.category-tile .icon {
    position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; color: #fff; font-size: 1.5rem;
    box-shadow: var(--shadow-glow); overflow: hidden; transition: transform .2s ease;
}
.category-tile:hover .icon { transform: scale(1.08); }
.category-tile .icon img { width: 100%; height: 100%; object-fit: cover; }
.category-tile .name { position: relative; z-index: 1; color: var(--ink); font-weight: 700; font-size: .92rem; }
.category-tile .count { position: relative; z-index: 1; color: var(--muted); font-size: .78rem; margin-top: .2rem; }

/* ---- All Categories page: a top-level tile + a flowing list of its sub-categories beside it ---- */
.category-group { border-bottom: 1px solid var(--line); padding-bottom: 2.5rem; }
.category-group:last-child { border-bottom: none; padding-bottom: 0; }
.category-subgrid { display: flex; flex-wrap: wrap; gap: .7rem; align-content: flex-start; height: 100%; align-items: center; }
.category-sublink {
    display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .88rem;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.category-sublink:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: translateY(-2px); }
.category-sublink small { color: var(--muted); font-weight: 600; }
.category-sublink:hover small { color: rgba(255,255,255,.85); }

/* ---- Product card ---- */
.product-card {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%;
    display: flex; flex-direction: column; background: var(--surface); position: relative;
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card .thumb { aspect-ratio: 4/3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .thumb img { transform: scale(1.06); }
.product-card .body { padding: .95rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-card .brand { font-size: .7rem; text-transform: uppercase; color: #94a3b8; letter-spacing: .05em; font-weight: 600; }
.product-card .name { font-weight: 700; color: var(--ink); font-size: .95rem; margin: .2rem 0 .35rem; line-height: 1.35; }
.product-card .name a { color: inherit; }
.product-card .desc { font-size: .82rem; color: var(--muted); flex: 1; }
.product-card .price { font-weight: 700; color: var(--ink); margin-top: .6rem; font-family: "Space Grotesk", sans-serif; }
.product-card .card-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.product-card .card-actions .btn-view-details {
    font-size: .82rem; font-weight: 600; padding: .5rem .8rem; border-radius: 999px; border: none;
    background: var(--gradient-brand); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.product-card .card-actions .btn-view-details:hover {
    color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,.4);
}
.product-card .card-actions .btn-icon {
    width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0; border: 1.5px solid var(--line); color: var(--ink-soft); background: #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.product-card .card-actions .btn-icon:hover { background: var(--gradient-brand); border-color: transparent; color: #fff; transform: translateY(-2px); }
.product-card .card-actions .btn-icon.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.product-card .badge-featured {
    position: absolute; top: .7rem; left: .7rem; background: var(--gradient-violet); color: #fff; font-size: .66rem;
    font-weight: 600; padding: .25rem .6rem; border-radius: 999px; z-index: 2; letter-spacing: .02em;
}
.product-card .wishlist-toggle {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
    background: rgba(255,255,255,.85); backdrop-filter: blur(6px); color: #94a3b8;
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.product-card .wishlist-toggle:hover { color: #e11d48; transform: scale(1.08); }
.product-card .wishlist-toggle.active { color: #e11d48; border-color: #fecdd3; }

/* ---- Compare bar ---- */
.compare-bar {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1040;
    background: var(--ink); color: #fff; border-radius: 999px; padding: .65rem 1.3rem;
    display: flex; align-items: center; gap: .8rem; box-shadow: var(--shadow-lg); font-size: .88rem;
    border: 1px solid rgba(255,255,255,.1);
}

/* ---- Product page action bar ---- */
.product-action-bar .btn-quote-primary {
    border: none; border-radius: 999px; padding: .6rem 1.3rem; font-weight: 600; color: #fff;
    background: var(--gradient-brand); box-shadow: 0 4px 14px rgba(79,70,229,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.product-action-bar .btn-quote-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,.4); }
.product-action-bar .btn-quote-secondary {
    border: 1.5px solid var(--line); border-radius: 999px; padding: .6rem 1.2rem; font-weight: 600; color: var(--ink-soft);
    background: #fff; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.product-action-bar .btn-quote-secondary:hover { background: var(--surface-2); border-color: var(--p1); color: var(--ink); transform: translateY(-2px); }
.product-action-bar .btn-quote-secondary.active {
    background: var(--gradient-brand); border-color: transparent; color: #fff;
}
.product-action-bar .btn-quote-secondary i { color: inherit; }

/* ---- Product page action bar: pinned to the bottom of the screen on mobile ---- */
@media (max-width: 767px) {
    .product-action-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        margin: 0 !important; gap: .4rem !important; flex-wrap: nowrap !important;
        background: #fff; border-top: 1px solid var(--line); padding: .55rem .6rem;
        box-shadow: 0 -6px 18px rgba(15,23,42,.08); overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .product-action-bar .btn {
        flex: 0 0 auto; white-space: nowrap; padding: .5rem .55rem; font-size: .74rem;
    }
    .product-action-bar .btn i { margin-right: .15rem; }
    /* Room at the bottom of the page so the fixed bar never covers content. */
    body:has(.product-action-bar) { padding-bottom: 64px; }
    /* Keep the floating compare-bar pill above the action bar instead of overlapping it. */
    body:has(.product-action-bar) .compare-bar { bottom: calc(20px + 60px); }
}

/* ---- Brand strip ---- */
.brand-tile {
    border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; text-align: center; height: 100%;
    display: flex; align-items: center; justify-content: center; background: var(--surface); transition: box-shadow .2s, border-color .2s;
}
.brand-tile:hover { box-shadow: var(--shadow-sm); border-color: transparent; }
.brand-tile img { max-height: 40px; max-width: 100%; }
.brand-page-logo {
    display: block; max-height: 64px; max-width: 220px; object-fit: contain;
    padding: .5rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.brand-tile .name-only { font-weight: 700; color: var(--ink); }

/* ---- Catalog layout ---- */
.catalog-sidebar { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.catalog-sidebar .form-check { font-size: .88rem; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: .6rem; }

/* ---- Catalog filter groups (collapsible sections) ---- */
.filter-group { border-bottom: 1px solid var(--surface-2); }
.filter-group:last-child { border-bottom: none; }
.filter-group-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; padding: .9rem 0 .7rem; text-align: left;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
    position: relative;
}
.filter-group-toggle::after {
    content: ''; position: absolute; left: 0; bottom: .55rem; width: 28px; height: 2px; background: var(--gradient-brand);
}
.filter-group:first-child .filter-group-toggle { padding-top: 0; }
.filter-group-toggle i { transition: transform .2s ease; color: var(--muted); font-size: .8rem; }
.filter-group-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.filter-group-body { padding-bottom: 1rem; }

/* ---- Mobile floating filter button + offcanvas ---- */
.btn-filter-float {
    position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 1040;
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border: none;
    border-radius: 999px; background: var(--gradient-brand); color: #fff; font-weight: 600; font-size: .9rem;
    box-shadow: var(--shadow-lg);
}
.btn-filter-float-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 .35rem; border-radius: 999px; background: #fff; color: var(--p1); font-size: .72rem; font-weight: 700;
}
.catalog-filter-offcanvas { --bs-offcanvas-width: min(340px, 88vw); }
@media (max-width: 991.98px) {
    .catalog-filter-offcanvas .catalog-sidebar { border: none; box-shadow: none; padding: 0; }
}
.btn-filter-apply {
    width: 100%; margin-top: 1rem; padding: .75rem; border: none; border-radius: 999px;
    background: var(--gradient-brand); color: #fff; font-weight: 600;
}
.breadcrumb-bar { background: var(--surface-2); padding: .7rem 0; font-size: .82rem; border-bottom: 1px solid var(--line); }
.breadcrumb-bar a { color: var(--muted); font-weight: 500; }
.breadcrumb-bar a:hover { color: var(--p1); }
.breadcrumb-bar .active { color: var(--ink); font-weight: 600; }

/* ---- Product detail ---- */
.pdp-gallery-main {
    border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1/1; display: flex; align-items: center;
    justify-content: center; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.pdp-gallery-main img, .pdp-gallery-main video { width: 100%; height: 100%; object-fit: contain; }
.pdp-gallery-main iframe { width: 100%; height: 100%; border: 0; }
.pdp-thumb { width: 64px; height: 64px; border: 2px solid var(--line); border-radius: .6rem; object-fit: cover; cursor: pointer; transition: border-color .15s; }
.pdp-thumb.active, .pdp-thumb:hover { border-color: var(--p1); }
.pdp-thumb-video { position: relative; overflow: hidden; }
.pdp-thumb-video img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb-video i {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; background: rgba(15,23,42,.35); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.spec-table { border-radius: var(--radius); overflow: hidden; }
.spec-table th { width: 40%; background: var(--surface-2); font-weight: 600; color: var(--ink); }
.pdp-tabs { border-bottom-color: var(--line); }
.pdp-tabs .nav-link { color: var(--muted); font-weight: 600; border: none; }
.pdp-tabs .nav-link.active { color: var(--p1); border: none; border-bottom: 2px solid; border-image: var(--gradient-brand) 1; background: transparent; }

/* ---- Footer ---- */
.site-footer { position: relative; background: var(--gradient-dark); color: #b9c2d6; padding: 3.5rem 0 1.5rem; margin-top: 4rem; overflow: hidden; }
.site-footer::before {
    content: ''; position: absolute; inset: 0; opacity: .25; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 85%);
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer h4 { color: #fff; font-size: .92rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: .01em; }
.site-footer a { color: #94a3b8; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-note { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.2rem; padding-top: 1.2rem; color: #94a3b8; }
.site-footer .bottom-bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 1.2rem; padding-top: 1.2rem; font-size: .82rem; color: #64748b; }

@media (max-width: 991px) {
    .main-nav { display: none; }
    .hero h1 { font-size: 2rem; }
}

/* ---- Mobile nav (offcanvas) + compact header row ---- */
.header-actions button[data-bs-toggle="offcanvas"] {
    background: none; border: none; color: var(--ink); font-size: 1.2rem; width: 40px; height: 40px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.header-actions button[data-bs-toggle="offcanvas"]:hover { background: var(--surface-2); }
#mobileNav { width: 300px; }
#mobileNav .mobile-nav-link { display: block; padding: .65rem 0; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--surface-2); }
#mobileNav .mobile-nav-link:hover { color: var(--p1); }
@media (max-width: 400px) {
    .header-actions { gap: .1rem; }
}

/* ---- Rich text (blog/page CMS content) ---- */
.article-content { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.article-content h1 { font-size: 1.75rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; font-family: "Space Grotesk", sans-serif; }
.article-content h2 { font-size: 1.45rem; font-weight: 700; color: var(--ink); margin: 1.4rem 0 .7rem; font-family: "Space Grotesk", sans-serif; }
.article-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 1.15rem 0 .5rem; }
.article-content h1:first-child, .article-content h2:first-child, .article-content h3:first-child { margin-top: 0; }
.article-content p { margin-bottom: .75rem; }
.article-content ul, .article-content ol { margin-bottom: .75rem; padding-left: 1.5rem; }
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1rem 0; }
.article-content a { color: var(--p1); text-decoration: underline; }

/* ---- Buttons: give Bootstrap's warning (used for CTA buttons) the same
   accent color — dark text stays, same as Bootstrap's own default, because
   white-on-amber fails contrast (~2.4:1, well under WCAG AA's 4.5:1). ---- */
.btn-warning { background: var(--cta); border-color: var(--cta); color: var(--ink); }
.btn-warning:hover { background: var(--cta-dark); border-color: var(--cta-dark); color: #fff; }