/* =====================================================================
   GepX — Public Stylesheet
   Tailwind CDN supplies utilities; this file owns brand & components.
   ===================================================================== */

/* ---------- Theme tokens ---------- */
:root {
    --black: #0A0A0A;
    --white: #FFFFFF;
    --red: #E11D2E;
    --red-soft: rgba(225, 29, 46, .08);
    --red-border: rgba(225, 29, 46, .15);

    /* light theme (default) */
    --bg: #FFFFFF;
    --bg-soft: #F5F5F5;
    --bg-elevated: #FFFFFF;
    --bg-card: rgba(255, 255, 255, .65);
    --border: rgba(10, 10, 10, .08);
    --border-strong: rgba(10, 10, 10, .14);
    --text: #0A0A0A;
    --text-muted: #5A5A5A;
    --text-subtle: #888;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow: 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .15);
    --glass-blur: 14px;
    --header-bg: rgba(255, 255, 255, .8);
    --hero-overlay: rgba(255, 255, 255, .7);
}

[data-theme="dark"] {
    --bg: #0F0F0F;
    --bg-soft: #161616;
    --bg-elevated: #1A1A1A;
    --bg-card: rgba(255, 255, 255, .04);
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .15);
    --text: #F5F5F5;
    --text-muted: rgba(255, 255, 255, .7);
    --text-subtle: rgba(255, 255, 255, .5);
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .6);
    --header-bg: rgba(15, 15, 15, .8);
    --hero-overlay: rgba(15, 15, 15, .55);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Scoped theme transition ----------
   Only animates while the user is actively toggling. Avoids the "every-hover-fades-in"
   anti-pattern that aggressive global transitions cause. ~300ms matches the JS timeout. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color .25s ease,
                color .25s ease,
                border-color .25s ease,
                fill .25s ease,
                stroke .25s ease,
                box-shadow .25s ease !important;
    transition-delay: 0 !important;
}

/* Native form-control rendering tracks the theme — fixes scrollbar + autofill colors */
input, textarea, select, button { color-scheme: inherit; }
::selection { background: rgba(225, 29, 46, .25); color: var(--text); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--red); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 .5em;
    color: var(--text);
    line-height: 1.15;
}
h1 { font-size: clamp(40px, 6.5vw, 84px); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: clamp(22px, 2.5vw, 32px); }
h4 { font-size: clamp(18px, 1.6vw, 22px); }

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.text-red { color: var(--red); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
@media (max-width: 768px) { .section { padding: 56px 0; } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px;
    border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
    line-height: 1; white-space: nowrap; text-decoration: none;
    font-family: inherit;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: #c11825; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(225, 29, 46, .25); }
.btn-dark { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-dark:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-ghost { background: transparent; color: var(--text); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- Form controls ---------- */
.input, .textarea, .select {
    width: 100%; padding: 13px 16px; border-radius: 12px;
    background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border); font: inherit; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .textarea:focus, .select:focus {
    border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft);
}
.input.error { border-color: var(--red); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field { margin-bottom: 18px; }

/* ---------- Glass card ---------- */
.glass {
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border); border-radius: 20px;
}

.card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--red-border); }

/* ---------- Tilt card (3D micro-interaction) ---------- */
.tilt { perspective: 1000px; }
.tilt > * { transition: transform .4s cubic-bezier(.2, .9, .25, 1); transform-style: preserve-3d; }
.tilt:hover > * { transform: rotateY(-3deg) rotateX(2deg) translateZ(8px); }

/* ---------- Mesh gradient backgrounds ---------- */
.mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.mesh::before, .mesh::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
    animation: mesh-drift 14s ease-in-out infinite alternate;
}
.mesh::before {
    width: 60vmax; height: 60vmax; top: -20%; left: -10%;
    background: radial-gradient(circle, rgba(225, 29, 46, .35), transparent 60%);
}
.mesh::after {
    width: 50vmax; height: 50vmax; bottom: -20%; right: -10%;
    background: radial-gradient(circle, rgba(120, 50, 200, .25), transparent 60%);
    animation-delay: -7s;
}
[data-theme="dark"] .mesh::before { opacity: .35; }
[data-theme="dark"] .mesh::after { opacity: .3; }
@keyframes mesh-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.1); }
}

/* =====================================================================
   HEADER · TOP BAR · SEARCH · ACTIONS · MEGA MENU (Pass-1 redesign)
   ===================================================================== */

/* ---------- Top announcement bar ---------- */
.gx-topbar {
    background: var(--text); color: var(--bg);
    font-size: 12px; font-weight: 500;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .gx-topbar { background: #000; }
.gx-topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 38px; gap: 24px;
}
.gx-topbar__msg { display: flex; align-items: center; gap: 8px; opacity: .9; line-height: 1; }
.gx-topbar__msg strong { color: #fff; font-weight: 600; }
.gx-topbar__link svg { vertical-align: middle; margin-right: 4px; flex-shrink: 0; }
.gx-topbar__link { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.gx-topbar__pulse {
    display: inline-block; width: 7px; height: 7px; background: var(--red);
    border-radius: 999px; animation: pulse 1.6s infinite;
    box-shadow: 0 0 0 3px rgba(225, 29, 46, .25);
}
.gx-topbar__links { display: flex; align-items: center; gap: 10px; opacity: .85; }
.gx-topbar__link { color: rgba(255, 255, 255, .85); font-size: 12px; text-decoration: none; }
.gx-topbar__link:hover { color: #fff; }
.gx-topbar__sep { color: rgba(255, 255, 255, .25); font-size: 11px; }
@media (max-width: 768px) {
    .gx-topbar__msg { font-size: 11px; }
    .gx-topbar__links { display: none; }
}

/* ---------- Main header (logo · search · actions) ---------- */
.gx-header {
    position: sticky; top: 0; z-index: 60;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.gx-header__inner {
    display: flex; align-items: center; gap: 28px;
    height: 84px;
}
.gx-logo {
    font-family: 'Space Grotesk'; font-weight: 800; font-size: 32px;
    letter-spacing: -.025em; line-height: 1;
    color: var(--text); display: inline-flex; align-items: center;
    flex-shrink: 0;
}
.gx-logo .x { color: var(--red); }

/* Search bar */
.gx-search {
    flex: 1; max-width: 640px; position: relative;
    display: flex; align-items: stretch;
    border: 2px solid var(--border-strong); border-radius: 999px;
    background: var(--bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gx-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.gx-search input {
    flex: 1; padding: 14px 22px; font-size: 14px; font-family: inherit;
    border: 0; background: transparent; outline: none; color: var(--text);
    border-radius: 999px;
}
.gx-search input::placeholder { color: var(--text-subtle); }
.gx-search button {
    background: var(--text); color: var(--bg); border: 0;
    width: 50px; padding: 0 18px;
    border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    margin: 4px; transition: background .15s ease;
}
.gx-search button:hover { background: var(--red); color: #fff; }
@media (max-width: 1024px) { .gx-search { display: none; } }

/* Actions cluster */
.gx-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.gx-action {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    color: var(--text-muted); text-decoration: none;
    transition: all .15s ease; position: relative;
    border: 1px solid transparent;
}
.gx-action:hover {
    background: var(--bg-soft); color: var(--text); border-color: var(--border);
}
.gx-action svg { color: var(--text); flex-shrink: 0; }
.gx-action__text {
    display: flex; flex-direction: column; line-height: 1.15; text-align: left;
}
.gx-action__top { font-size: 11px; color: var(--text-subtle); font-weight: 500; }
.gx-action__bottom { font-size: 13px; color: var(--text); font-weight: 600; }
@media (max-width: 768px) { .gx-action__text { display: none; } .gx-action { padding: 10px; } }

/* Cart with badge */
.gx-action--cart { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }
.gx-action--cart:hover { background: var(--red); color: #fff; border-color: var(--red); }
.gx-action--cart:hover svg, .gx-action--cart:hover .gx-action__top, .gx-action--cart:hover .gx-action__bottom { color: #fff; }
.gx-action--cart svg { color: var(--red); }
.gx-action--cart .gx-action__bottom { color: var(--red); font-family: 'JetBrains Mono'; }
.gx-cart-icon { position: relative; display: inline-flex; }
.gx-cart-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono'; border: 2px solid var(--bg-elevated);
}
.gx-action--cart:hover .gx-cart-badge { background: #fff; color: var(--red); border-color: var(--red); }

/* Hamburger (mobile only) */
.icon-btn {
    width: 42px; height: 42px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; color: var(--text-muted);
    background: transparent; border: none; cursor: pointer; position: relative;
    transition: all .15s ease;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--text); }

/* ---------- Main nav row (with rich mega menus) ---------- */
.gx-mainnav {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 84px; z-index: 50;
}
[data-theme="dark"] .gx-mainnav { background: var(--bg-soft); }
.gx-mainnav__inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; gap: 24px;
}
.gx-mainnav__list {
    display: flex; align-items: center; gap: 4px;
    list-style: none; padding: 0; margin: 0;
}
.gx-mainnav__list > li { position: static; }
.gx-mainnav__list > li > a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 16px 16px; font-size: 13.5px; font-weight: 600;
    color: var(--text); text-transform: uppercase; letter-spacing: .8px;
    text-decoration: none; transition: color .15s ease;
    position: relative;
}
.gx-mainnav__list > li > a::after {
    content: ''; position: absolute; bottom: 0; left: 16px; right: 16px;
    height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
}
.gx-mainnav__list > li > a:hover,
.gx-mainnav__list > li.is-active > a,
.gx-mainnav__list > li:hover > a { color: var(--red); }
.gx-mainnav__list > li > a:hover::after,
.gx-mainnav__list > li.is-active > a::after,
.gx-mainnav__list > li:hover > a::after { transform: scaleX(1); }
.gx-mainnav__list > li > a .caret { font-size: 9px; color: var(--text-subtle); margin-left: 2px; }
.gx-mainnav__cta {
    background: var(--red-soft); color: var(--red) !important;
    border-radius: 999px; margin: 0 4px; padding: 8px 16px !important;
}
.gx-mainnav__cta::after { display: none !important; }
.gx-mainnav__pill {
    display: inline-block; background: var(--red); color: #fff;
    font-size: 9px; padding: 2px 7px; border-radius: 999px;
    font-family: 'JetBrains Mono'; margin-left: 4px;
}
.gx-mainnav__right { display: flex; align-items: center; gap: 6px; }
.gx-mainnav__deal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--text); background: var(--bg-soft);
    border: 1px solid var(--border); transition: all .15s ease;
}
.gx-mainnav__deal:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.gx-mainnav__deal svg { color: var(--red); }
.gx-mainnav__deal:hover svg { color: var(--bg); }

@media (max-width: 1024px) {
    .gx-mainnav { display: none; }
}

/* ---------- Mega menu panels ---------- */
.has-mega .gx-mega {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-elevated); border-top: 1px solid var(--border);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .15);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-4px);
    transition: all .2s ease; z-index: 70;
}
.has-mega:hover .gx-mega,
.has-mega:focus-within .gx-mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.gx-mega__inner {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 36px; padding: 32px 24px;
}
.gx-mega__col h6 {
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.gx-mega__col ul { list-style: none; padding: 0; margin: 0; }
.gx-mega__col li { margin-bottom: 8px; }
.gx-mega__col a {
    display: block; padding: 4px 0; font-size: 14px; color: var(--text);
    text-decoration: none; transition: color .15s ease, padding-left .15s ease;
}
.gx-mega__col a:hover { color: var(--red); padding-left: 6px; }

.gx-mega__featured { display: flex; align-items: stretch; }
.gx-mega__banner {
    position: relative; flex: 1; border-radius: 14px; overflow: hidden;
    background: var(--bg-soft); display: block; min-height: 220px;
    transition: transform .25s ease;
}
.gx-mega__banner:hover { transform: translateY(-2px); }
.gx-mega__banner img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.gx-mega__banner:hover img { transform: scale(1.06); }
.gx-mega__banner-text {
    position: absolute; inset: auto 0 0 0; padding: 18px;
    background: linear-gradient(to top, rgba(10, 10, 10, .92) 0%, transparent 100%);
    color: #fff;
}
.gx-mega__banner-text strong {
    display: block; font-family: 'Space Grotesk'; font-weight: 700;
    font-size: 18px; line-height: 1.25; margin-top: 4px;
}
.gx-mega__banner-text span { color: var(--red); font-weight: 600; }

/* Full-screen mega panels (Pass-7) */
.has-mega--full .gx-mega { left: 0; right: 0; }
.has-mega--full .gx-mega__inner { display: block; padding: 30px 24px 36px; }

/* Mega head copy (used by all 4 mega menus) */
.gx-mega-products-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 22px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.gx-mega-products-head h4 {
    margin: 0; font-family: 'Space Grotesk'; font-weight: 700;
    font-size: 18px; letter-spacing: -.01em;
}
.gx-mega-products-head p {
    margin: 0; font-size: 13px; color: var(--text-muted);
}

/* Products mega: image + name tiles */
.gx-mega-products-grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}
@media (max-width: 1280px) { .gx-mega-products-grid { grid-template-columns: repeat(5, 1fr); } }
.gx-mega-product {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 8px; border-radius: 12px;
    text-decoration: none; transition: all .2s ease;
    background: transparent; border: 1px solid transparent;
}
.gx-mega-product:hover {
    background: var(--bg-soft); border-color: var(--border-strong);
    transform: translateY(-2px);
}
.gx-mega-product__img {
    width: 92px; height: 92px; border-radius: 12px;
    background-size: cover; background-position: center;
    border: 1px solid var(--border);
    display: block;
}
.gx-mega-product__name {
    font-size: 12px; font-weight: 600; color: var(--text);
    text-align: center; line-height: 1.3;
    text-transform: none; letter-spacing: 0;
}
.gx-mega-product--more .gx-mega-product__name { color: var(--red); }

/* Print-methods mega (image + body tiles) */
.gx-mega-print-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .gx-mega-print-grid { grid-template-columns: repeat(2, 1fr); } }
.gx-mega-print {
    display: flex; gap: 14px; padding: 12px; border-radius: 12px;
    border: 1px solid var(--border); text-decoration: none;
    background: var(--bg); transition: all .2s ease;
    align-items: center;
}
.gx-mega-print:hover { border-color: var(--red); transform: translateY(-2px); }
.gx-mega-print__img {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px;
    background-size: cover; background-position: center;
    background-color: var(--bg-soft);
}
.gx-mega-print__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gx-mega-print__no {
    font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 700;
    color: var(--red); letter-spacing: 1px;
}
.gx-mega-print__body strong {
    font-size: 14px; font-weight: 700; color: var(--text);
    text-transform: none; letter-spacing: 0;
}
.gx-mega-print__body em {
    font-size: 12px; color: var(--text-muted); font-style: normal;
    line-height: 1.4;
}

/* Navigate / Contact mega: icon-tile cards */
.gx-mega-nav-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) { .gx-mega-nav-grid { grid-template-columns: repeat(2, 1fr); } }
.gx-mega-nav-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 18px 16px; border-radius: 14px;
    border: 1px solid var(--border); text-decoration: none;
    background: var(--bg); transition: all .2s ease;
}
.gx-mega-nav-tile:hover {
    border-color: var(--red); transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 29, 46, .08);
}
.gx-mega-nav-tile__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--red-soft); color: var(--red); margin-bottom: 6px;
}
.gx-mega-nav-tile strong {
    font-size: 14.5px; font-weight: 700; color: var(--text);
    text-transform: none; letter-spacing: 0;
}
.gx-mega-nav-tile em {
    font-size: 12.5px; color: var(--text-muted); font-style: normal;
    line-height: 1.45;
}
.gx-mega-nav-tile--accent { background: linear-gradient(135deg, var(--red), #b8121f); }
.gx-mega-nav-tile--accent strong, .gx-mega-nav-tile--accent em { color: #fff; }
.gx-mega-nav-tile--accent em { opacity: .85; }
.gx-mega-nav-tile--accent .gx-mega-nav-tile__icon { background: rgba(255,255,255,.18); color: #fff; }

/* Make nav-list <a> tags accept icons inline */
.gx-mainnav__list > li > a > svg { color: var(--text-subtle); margin-right: 2px; }
.gx-mainnav__list > li > a:hover svg, .gx-mainnav__list > li.is-active > a svg { color: var(--red); }
.gx-mainnav__cta svg { color: var(--red) !important; }

/* (legacy print-tile rule kept below for any old refs) */
.gx-mega__inner--prints {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.gx-print-tile {
    display: block; padding: 22px 18px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg); text-decoration: none;
    transition: all .2s ease; color: var(--text);
}
.gx-print-tile:hover {
    border-color: var(--red); transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(225, 29, 46, .1);
}
.gx-print-tile__no {
    font-family: 'JetBrains Mono'; font-weight: 700; font-size: 12px;
    color: var(--red); margin-bottom: 12px;
    letter-spacing: 1.5px;
}
.gx-print-tile h6 {
    margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text);
}
.gx-print-tile p {
    margin: 0 0 12px; font-size: 12px; color: var(--text-muted);
    line-height: 1.5;
}
.gx-print-tile__price {
    display: inline-block; font-size: 11px; padding: 4px 10px;
    background: var(--red-soft); color: var(--red); border-radius: 999px;
    font-weight: 700; letter-spacing: .5px;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 80px 0 100px; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    backdrop-filter: blur(10px); margin-bottom: 28px; color: var(--text-muted);
}
.hero__eyebrow .pulse {
    width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hero h1 { max-width: 14ch; }
.hero h1 .accent { color: var(--red); }
.hero p.lead { max-width: 60ch; font-size: clamp(16px, 1.6vw, 20px); color: var(--text-muted); margin: 24px 0 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 80px; }
.hero__stat { text-align: left; padding: 20px 0; border-top: 1px solid var(--border); }
.hero__stat .num { font-family: 'JetBrains Mono'; font-size: 32px; font-weight: 700; color: var(--text); }
.hero__stat .lbl { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 768px) {
    .hero__stats { grid-template-columns: repeat(2, 1fr); margin-top: 56px; }
    .hero__stat .num { font-size: 24px; }
}

/* ---------- Section header ---------- */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head .eyebrow {
    display: inline-block; padding: 6px 14px; background: var(--red-soft); color: var(--red);
    border: 1px solid var(--red-border); border-radius: 999px; font-size: 12px;
    font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px;
}
.section-head p { color: var(--text-muted); font-size: 17px; }

/* ---------- Product card (legacy, kept for back-compat) ---------- */
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px;
}
.product-card { display: block; text-decoration: none; color: inherit; }
.product-card .img-wrap {
    aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--bg-soft);
    border: 1px solid var(--border); margin-bottom: 14px; position: relative;
}
.product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .img-wrap img { transform: scale(1.05); }
.product-card .badge {
    position: absolute; top: 12px; left: 12px; padding: 5px 10px; background: var(--text); color: var(--bg);
    border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .5px;
}
.product-card .badge.bestseller { background: var(--red); color: #fff; }
.product-card .name { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.product-card .meta { display: flex; justify-content: space-between; align-items: baseline; }
.product-card .price { font-family: 'JetBrains Mono'; font-weight: 700; color: var(--text); }
.product-card .price small { color: var(--text-subtle); font-weight: 400; }
.product-card .from { font-size: 11px; color: var(--text-subtle); margin-bottom: 4px; }

/* =====================================================================
   PAGE HERO — Universal background-image hero (Pass-7)
   ===================================================================== */
.page-hero {
    position: relative; min-height: 360px;
    background-size: cover; background-position: center;
    color: #fff; padding: 64px 0;
    display: flex; align-items: center;
}
.page-hero__overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.4) 100%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 800px; }
.page-hero__breadcrumb {
    font-size: 12px; color: rgba(255, 255, 255, .75);
    margin-bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap;
    letter-spacing: .5px; text-transform: uppercase; font-weight: 500;
}
.page-hero__breadcrumb a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.page-hero__breadcrumb a:hover { color: #fff; }
.page-hero__breadcrumb .sep { opacity: .5; }
.page-hero__eyebrow {
    display: inline-block; padding: 6px 14px;
    background: rgba(225, 29, 46, .92); color: #fff;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 18px;
}
.page-hero__title {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05;
    letter-spacing: -.025em; margin: 0 0 16px; color: #fff;
}
.page-hero__title .accent { color: var(--red); }
.page-hero__subtitle {
    color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.6;
    max-width: 60ch; margin: 0;
}

/* =====================================================================
   COURIER PARTNERS — sliding marquee above footer (item 11)
   ===================================================================== */
.courier-band {
    padding: 36px 0 32px; background: var(--bg-elevated);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.courier-band__head { text-align: center; margin-bottom: 22px; }
.courier-band__head h3 {
    font-size: 14px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0 0 4px;
}
.courier-band__head p { font-size: 13px; color: var(--text-subtle); margin: 0; }
.courier-band__track-wrap {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.courier-band__track {
    display: flex; gap: 40px; align-items: center;
    width: max-content;
    animation: courier-marquee 38s linear infinite;
}
.courier-pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 22px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 999px;
    flex-shrink: 0;
}
.courier-pill__logo {
    width: 32px; height: 32px; border-radius: 999px;
    color: #fff; font-family: 'Space Grotesk'; font-weight: 800;
    font-size: 11px; letter-spacing: -.5px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.courier-pill__name {
    font-family: 'Space Grotesk'; font-weight: 700;
    font-size: 14px; color: var(--text); white-space: nowrap;
}
@keyframes courier-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =====================================================================
   GENERIC INFO PAGE — Pass-7
   ===================================================================== */
.info-page { padding: 64px 0 80px; }
.info-section { padding: 64px 0; }
.info-section--alt { background: var(--bg-soft); }
.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}
.info-card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden;
    transition: all .25s ease; text-decoration: none; color: inherit;
    display: block;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--red-border); }
.info-card__media {
    aspect-ratio: 16/10; background: var(--bg-soft);
    background-size: cover; background-position: center;
}
.info-card__body { padding: 22px 24px 26px; }
.info-card__step {
    display: inline-block; font-family: 'JetBrains Mono'; font-size: 11px;
    font-weight: 700; letter-spacing: 1.5px; color: var(--red);
    margin-bottom: 8px;
}
.info-card__body h3 {
    font-size: 20px; line-height: 1.2; margin: 0 0 8px;
}
.info-card__body p {
    color: var(--text-muted); font-size: 14px; line-height: 1.65;
    margin: 0;
}

/* Manufacturing process step strip (Bewakoof-style numbered) */
.process-strip {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px;
    margin: 32px 0 0;
}
@media (max-width: 1024px) { .process-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .process-strip { grid-template-columns: repeat(2, 1fr); } }
.process-step {
    text-align: center; position: relative;
    padding: 14px 8px;
}
.process-step__circle {
    width: 88px; height: 88px; border-radius: 999px;
    background-size: cover; background-position: center;
    border: 3px solid var(--bg-elevated); box-shadow: 0 0 0 1px var(--border);
    margin: 0 auto 12px;
    transition: all .25s ease;
}
.process-step:hover .process-step__circle { box-shadow: 0 0 0 2px var(--red), 0 8px 18px rgba(225,29,46,.15); transform: scale(1.05); }
.process-step__no {
    font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 700;
    color: var(--red); letter-spacing: 1.5px; display: block; margin-bottom: 4px;
}
.process-step__name {
    font-family: 'Space Grotesk'; font-weight: 700;
    font-size: 13px; color: var(--text); text-transform: uppercase;
    letter-spacing: .5px;
}

/* =====================================================================
   DASHBOARD POLISH — Pass-6 (modern sidebar + gradient KPI cards)
   ===================================================================== */
.dash-shell { padding-top: 24px; gap: 28px; }

/* Sidebar polish */
.dash-side {
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.dash-side .me {
    padding: 14px 6px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.dash-side .avatar {
    width: 40px; height: 40px; font-size: 14px;
    background: linear-gradient(135deg, var(--red) 0%, #ff6b3d 100%);
    box-shadow: 0 6px 14px rgba(225, 29, 46, .25);
}
.dash-side .name { font-weight: 700; }
.dash-nav a {
    padding: 10px 12px; font-size: 13.5px; font-weight: 500;
    border-radius: 10px;
}
.dash-nav a.active {
    background: linear-gradient(135deg, var(--text), #1f1f1f);
    color: var(--bg); font-weight: 600;
    box-shadow: 0 6px 14px rgba(10, 10, 10, .18);
}
.dash-nav a.active svg { color: var(--bg); }

/* Gradient stat cards */
.stat {
    border-radius: 18px; padding: 22px 24px;
    border: 1px solid var(--border);
    transition: all .25s ease;
    overflow: hidden; position: relative;
}
.stat::after {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 140px; height: 140px; border-radius: 999px;
    background: radial-gradient(circle, rgba(225,29,46,.08), transparent 60%);
    pointer-events: none;
}
.stat:hover { transform: translateY(-3px); border-color: var(--red-border); box-shadow: 0 12px 24px rgba(0, 0, 0, .06); }
.stat .label {
    font-size: 11px; letter-spacing: 1.6px; font-weight: 700;
    text-transform: uppercase; color: var(--text-subtle);
}
.stat .num {
    font-family: 'JetBrains Mono'; font-weight: 800;
    font-size: 32px; line-height: 1.1; color: var(--text);
    margin: 10px 0 6px;
}
.stat .delta { font-size: 12px; color: var(--text-muted); }

/* Premium "accent" stat card — full red gradient */
.stat.accent {
    background: linear-gradient(135deg, #0A0A0A 0%, #1c0507 50%, #2b0a0e 100%);
    color: #fff; border: 0;
    box-shadow: 0 18px 36px -16px rgba(225, 29, 46, .3);
}
.stat.accent::after {
    background: radial-gradient(circle, rgba(225,29,46,.4), transparent 60%);
    width: 220px; height: 220px; right: -80px; top: -80px;
}
.stat.accent .label { color: rgba(255, 255, 255, .65); }
.stat.accent .num { color: #fff; }
.stat.accent .delta { color: rgba(255, 255, 255, .55); }

/* Cards in dashboards */
.dash-content > .head h1 { font-family: 'Space Grotesk'; font-weight: 800; letter-spacing: -.02em; }
.dash-content .card { transition: box-shadow .2s ease, transform .25s ease; }
.dash-content .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .04); }

/* Tables polish */
.dash-content table thead th {
    border-bottom: 1px solid var(--border);
}
.dash-content table tbody tr {
    transition: background .15s ease;
}
.dash-content table tbody tr:hover {
    background: var(--bg-soft);
}

/* Order rows: stronger hover */
.order-row {
    border-radius: 14px;
    transition: all .25s ease;
}
.order-row:hover {
    border-color: var(--red);
    transform: translateX(2px);
    box-shadow: -2px 0 0 0 var(--red), 0 8px 18px rgba(0, 0, 0, .06);
}

/* =====================================================================
   AUTH SPLIT LAYOUT — Pass-5 (login / signup / forgot / reset)
   ===================================================================== */
.auth-shell {
    min-height: calc(100vh - 84px - 39px);
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--bg);
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-brand {
    position: relative;
    background: linear-gradient(135deg, #0A0A0A 0%, #1f1f1f 50%, #2b0a0e 100%);
    color: #fff; padding: 64px 56px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 600px;
}
.auth-brand::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(at 20% 30%, rgba(225, 29, 46, .25) 0, transparent 50%),
        radial-gradient(at 80% 70%, rgba(225, 29, 46, .15) 0, transparent 50%);
    pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand__logo {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: 32px; letter-spacing: -.025em; color: #fff;
    text-decoration: none; display: inline-block;
}
.auth-brand__logo .x { color: var(--red); }
.auth-brand__main h2 {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
    letter-spacing: -.02em; color: #fff;
    margin: 0 0 18px; max-width: 16ch;
}
.auth-brand__main p {
    color: rgba(255, 255, 255, .75); font-size: 16px;
    line-height: 1.65; max-width: 36ch; margin: 0 0 32px;
}
.auth-brand__perks {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.auth-brand__perks li {
    display: flex; gap: 12px; font-size: 14px;
    color: rgba(255, 255, 255, .85);
}
.auth-brand__perks li svg {
    flex-shrink: 0; color: var(--red);
    background: rgba(225, 29, 46, .15); border-radius: 999px;
    width: 28px; height: 28px; padding: 6px;
}
.auth-brand__footer {
    font-size: 12px; color: rgba(255, 255, 255, .5);
    border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px;
}
.auth-brand__footer strong { color: #fff; }

.auth-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
    background: var(--bg);
}
.auth-form-card {
    width: 100%; max-width: 460px;
    padding: 8px;
}
.auth-form-card h2 {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: 28px; letter-spacing: -.015em; margin: 0 0 8px;
}
.auth-form-card .auth-eyebrow {
    font-family: 'JetBrains Mono'; font-size: 11px;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--red); font-weight: 700;
    margin-bottom: 14px; display: block;
}
.auth-form-card > p { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; line-height: 1.6; }
.auth-form-card .field { margin-bottom: 16px; }
.auth-form-card .field input.input {
    padding: 14px 18px; font-size: 15px;
}
.auth-form-card .btn-block {
    padding: 16px; font-size: 15px; margin-top: 6px;
}
.auth-otp-input {
    font-family: 'JetBrains Mono' !important;
    text-align: center; letter-spacing: 8px;
    font-size: 24px !important; padding: 18px !important;
    font-weight: 700;
}
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0; font-size: 12px; color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: 1.5px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-foot { font-size: 12px; color: var(--text-subtle); text-align: center; margin-top: 22px; line-height: 1.65; }
.auth-foot a { color: var(--red); }

/* =====================================================================
   HERO BANNER — Pass-4 (Bewakoof-style 2-column hero)
   ===================================================================== */
.hero-banner { padding: 28px 0 8px; }
.hero-banner__grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 18px;
    min-height: 460px;
}
@media (max-width: 900px) {
    .hero-banner__grid { grid-template-columns: 1fr; min-height: auto; }
}
.hero-banner__main, .hero-banner__sub {
    position: relative; border-radius: 22px; overflow: hidden;
    background-size: cover; background-position: center;
    color: #fff; text-decoration: none; display: block;
    transition: transform .35s ease;
}
.hero-banner__main { min-height: 460px; }
.hero-banner__main:hover, .hero-banner__sub:hover { transform: translateY(-2px); }

.hero-banner__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .28) 60%, transparent 100%);
}
.hero-banner__copy {
    position: relative; z-index: 2; padding: 56px 56px 56px;
    max-width: 620px;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 768px) { .hero-banner__copy { padding: 36px 28px; } }

.hero-banner__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 22px;
    width: fit-content;
}
.hero-banner__eyebrow .pulse {
    width: 7px; height: 7px; border-radius: 999px; background: var(--red);
    box-shadow: 0 0 0 3px rgba(225, 29, 46, .35);
}
.hero-banner__main h1 {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.05;
    letter-spacing: -.025em; margin: 0 0 18px;
    color: #fff;
}
.hero-banner__main h1 .accent { color: var(--red); }
.hero-banner__main p {
    color: rgba(255, 255, 255, .85); font-size: 17px;
    line-height: 1.55; max-width: 50ch; margin: 0 0 32px;
}
.hero-banner__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Stacked side banners */
.hero-banner__side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.hero-banner__sub { min-height: 220px; }
.hero-banner__sub--solid {
    background: linear-gradient(135deg, var(--red), #b8121f);
}
.hero-banner__sub-copy {
    position: relative; z-index: 2;
    padding: 28px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.hero-banner__sub-copy span {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255, 255, 255, .85); font-weight: 700;
}
.hero-banner__sub-copy h3 {
    font-family: 'Space Grotesk'; font-weight: 800; color: #fff;
    font-size: 30px; line-height: 1.1; letter-spacing: -.02em;
    margin: 4px 0 12px;
}
.hero-banner__sub-copy h3 strong { color: var(--red); }
.hero-banner__sub--solid h3 strong { color: #fff; }
.hero-banner__shop-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: #fff !important; font-size: 14px; font-weight: 600;
    border-bottom: 2px solid rgba(255, 255, 255, .35);
    padding-bottom: 4px; width: fit-content;
    transition: border-color .15s ease;
    text-transform: none !important; letter-spacing: 0 !important;
}
.hero-banner__sub:hover .hero-banner__shop-link { border-color: #fff; }

/* Hero stats strip */
.hero-stats-strip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    margin: 24px 0 0;
    padding: 22px 28px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 16px;
}
.hero-stats-strip > div {
    text-align: center;
    border-right: 1px solid var(--border); padding: 0 14px;
    font-size: 13px; color: var(--text-muted);
}
.hero-stats-strip > div:last-child { border-right: 0; }
.hero-stats-strip strong {
    display: block; font-family: 'JetBrains Mono'; font-weight: 700;
    font-size: 22px; color: var(--text); margin-bottom: 4px;
}
@media (max-width: 768px) {
    .hero-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .hero-stats-strip > div { border-right: 0; padding: 10px; }
}

/* =====================================================================
   CATEGORY CIRCLES BAND — Pass-4 (Bewakoof-style horizontal scroll)
   ===================================================================== */
.cat-circle-band { padding: 56px 0 28px; }
.cat-circle-band__head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 24px;
}
.cat-circle-band__head h2 {
    font-size: clamp(22px, 2.6vw, 30px); margin: 0;
}
.cat-circle-band__viewall {
    color: var(--red); font-weight: 600; font-size: 14px; text-decoration: none;
}
.cat-circle-band__viewall:hover { text-decoration: underline; }
.cat-circle-band__row {
    display: flex; gap: 28px; padding: 8px 0 8px;
    overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.cat-circle-band__row::-webkit-scrollbar { height: 6px; }
.cat-circle-band__row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.cat-circle {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    text-decoration: none; gap: 12px; min-width: 110px;
    transition: transform .25s ease;
}
.cat-circle:hover { transform: translateY(-2px); }
.cat-circle__img {
    width: 110px; height: 110px; border-radius: 999px;
    background-size: cover; background-position: center;
    border: 3px solid var(--bg-elevated); box-shadow: 0 0 0 1px var(--border);
    transition: box-shadow .25s ease, transform .25s ease;
}
.cat-circle:hover .cat-circle__img {
    box-shadow: 0 0 0 2px var(--red), 0 12px 28px rgba(225, 29, 46, .15);
    transform: scale(1.04);
}
.cat-circle__label {
    font-size: 13px; font-weight: 600; color: var(--text);
    text-align: center; line-height: 1.2;
}

/* =====================================================================
   PROMO STRIP — Three-up benefit row
   ===================================================================== */
.promo-strip {
    background: var(--text); color: var(--bg);
    padding: 22px 0;
}
[data-theme="dark"] .promo-strip { background: #000; }
.promo-strip__inner {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: center;
}
@media (max-width: 768px) { .promo-strip__inner { grid-template-columns: 1fr; gap: 14px; } }
.promo-strip__pill {
    display: flex; align-items: center; gap: 14px;
    color: rgba(255, 255, 255, .85); font-size: 13px;
    border-left: 3px solid var(--red); padding-left: 16px;
}
.promo-strip__pill strong {
    color: #fff; font-family: 'Space Grotesk'; font-weight: 800;
    font-size: 16px; letter-spacing: -.01em;
}
.promo-strip__pill code {
    background: rgba(255, 255, 255, .15); padding: 2px 6px;
    border-radius: 4px; color: #fff; font-family: 'JetBrains Mono';
}

/* =====================================================================
   PDP — Product detail page (Pass-3 redesign with vertical-thumb gallery)
   ===================================================================== */
.pdp-layout {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px;
    align-items: flex-start;
}
@media (max-width: 1024px) { .pdp-layout { grid-template-columns: 1fr; gap: 32px; } }

/* Gallery */
.pdp-gallery {
    display: grid; grid-template-columns: 84px 1fr; gap: 14px;
    position: sticky; top: 156px;
}

.pdp-gallery__thumbs {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 600px; overflow-y: auto; padding-right: 4px;
}
.pdp-thumb {
    width: 84px; height: 84px; border-radius: 12px;
    border: 2px solid var(--border); padding: 0;
    overflow: hidden; cursor: pointer; background: var(--bg-soft);
    flex-shrink: 0; transition: all .2s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { border-color: var(--text); }
.pdp-thumb.is-active { border-color: var(--red); }

/* Mobile: stack — big image on top, horizontal thumb strip below */
@media (max-width: 900px) {
    .pdp-gallery {
        display: flex; flex-direction: column;
        gap: 12px; position: static;
    }
    .pdp-gallery__main {
        order: 1; aspect-ratio: 1/1; width: 100%;
    }
    .pdp-gallery__thumbs {
        order: 2;
        flex-direction: row; max-height: none;
        overflow-x: auto; overflow-y: hidden;
        padding-right: 0; padding-bottom: 4px;
        gap: 8px; scrollbar-width: thin;
    }
    .pdp-thumb { width: 68px; height: 68px; }
}

.pdp-gallery__main {
    aspect-ratio: 1/1; border-radius: 18px;
    background: var(--bg-soft); border: 1px solid var(--border);
    overflow: hidden; position: relative;
    cursor: zoom-in;
}
.pdp-gallery__main img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.pdp-gallery__main:hover img { transform: scale(1.04); }
.pdp-gallery__tag {
    position: absolute; top: 16px; padding: 6px 14px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase; z-index: 2;
}
.pdp-gallery__tag--hot { left: 16px; background: var(--text); color: var(--bg); }
.pdp-gallery__tag--sale { right: 16px; background: var(--red); color: #fff; }
.pdp-zoom-btn {
    position: absolute; bottom: 16px; right: 16px;
    width: 42px; height: 42px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--text);
    border: 0; cursor: pointer; backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
}
.pdp-zoom-btn:hover { background: var(--text); color: var(--bg); }

/* Info side */
.pdp-info { padding-top: 8px; }
.pdp-brand-link {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--red);
    text-decoration: none;
}
.pdp-brand-link:hover { text-decoration: underline; }
.pdp-title {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15;
    letter-spacing: -.02em; margin: 0 0 12px;
}
.pdp-rating {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 18px; font-size: 13px;
}
.pdp-stars { color: #f59e0b; font-size: 16px; letter-spacing: 1px; }
.pdp-rating__count { color: var(--text-muted); font-weight: 500; }
.pdp-rating__sep { color: var(--text-subtle); }
.pdp-rating__sold { color: var(--text-subtle); font-size: 12px; }
.pdp-short {
    color: var(--text-muted); font-size: 16px; line-height: 1.65;
    margin-bottom: 24px;
}

/* Zoom modal lightbox (toggled by JS) */
.pdp-lightbox {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .9);
    z-index: 200; display: none; align-items: center; justify-content: center;
    padding: 32px; cursor: zoom-out;
}
.pdp-lightbox.open { display: flex; animation: fade-in .2s ease; }
.pdp-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   GX-CARD — Polished product card (Pass-2 redesign)
   Used via product_card_html() helper.
   ===================================================================== */
.gx-card {
    position: relative; display: flex; flex-direction: column;
    transition: transform .3s ease;
}
.gx-card:hover { transform: translateY(-2px); }

/* Media wrap */
.gx-card__media {
    display: block; aspect-ratio: 4/5;
    border-radius: 16px; overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    position: relative;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.gx-card:hover .gx-card__media {
    border-color: var(--red-border);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .12);
}
.gx-card__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .6s ease, opacity .35s ease;
}
.gx-card__img--hover { opacity: 0; transform: scale(1.04); }
.gx-card:hover .gx-card__img--main { opacity: 0; transform: scale(1.04); }
.gx-card:hover .gx-card__img--hover { opacity: 1; transform: scale(1); }
/* If no hover image: zoom the main image instead */
.gx-card .gx-card__img--main:only-of-type { opacity: 1; }
.gx-card:hover .gx-card__img--main:only-of-type { opacity: 1; transform: scale(1.06); }

/* Badges (top-left stack) */
.gx-card__badges {
    position: absolute; top: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2; pointer-events: none;
}
.gx-card__badge {
    padding: 5px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; line-height: 1;
}
.gx-card__badge--sale { background: var(--red); color: #fff; }
.gx-card__badge--hot { background: var(--text); color: var(--bg); }
.gx-card__badge--new { background: #22c55e; color: #fff; }

/* Wishlist button (top-right) */
.gx-card__wish {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: var(--text);
    border: 0; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(-4px);
    transition: all .25s ease; backdrop-filter: blur(6px);
}
.gx-card:hover .gx-card__wish { opacity: 1; transform: translateY(0); }
.gx-card__wish:hover { background: var(--red); color: #fff; }
.gx-card__wish.is-active { opacity: 1; background: var(--red); color: #fff; }
.gx-card__wish.is-active svg { fill: currentColor; }

/* Bottom slide-up action bar */
.gx-card__actions {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px; z-index: 2;
    transform: translateY(100%); transition: transform .3s ease;
}
.gx-card:hover .gx-card__actions { transform: translateY(0); }
.gx-card__add {
    width: 100%; padding: 12px 16px; border: 0; border-radius: 999px;
    background: var(--text); color: var(--bg);
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s ease;
    font-family: inherit;
}
.gx-card__add:hover { background: var(--red); color: #fff; }
.gx-card__add[disabled] { opacity: .6; cursor: wait; }

/* Body (below media) */
.gx-card__body { padding: 14px 4px 0; }
.gx-card__name {
    display: block; font-weight: 600; font-size: 14px;
    color: var(--text); text-decoration: none; line-height: 1.4;
    margin-bottom: 8px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-height: 2.8em;
    transition: color .15s ease;
}
.gx-card__name:hover { color: var(--red); }

/* Color swatches row */
.gx-card__swatches {
    display: flex; gap: 6px; margin-bottom: 10px;
    min-height: 16px; /* reserve space so price row doesn't shift */
}
.gx-card__swatch {
    width: 14px; height: 14px; border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    transition: transform .15s ease;
    cursor: pointer;
}
.gx-card__swatch:hover { transform: scale(1.25); }
[data-theme="dark"] .gx-card__swatch { border-color: rgba(255, 255, 255, .25); }

/* Price row */
.gx-card__price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gx-card__price { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gx-card__price-from { font-size: 11px; color: var(--text-subtle); font-weight: 500; }
.gx-card__price strong {
    font-family: 'JetBrains Mono'; font-weight: 700; font-size: 16px; color: var(--text);
}
.gx-card__price-old { font-size: 12px; color: var(--text-subtle); text-decoration: line-through; }
.gx-card__moq {
    font-family: 'JetBrains Mono'; font-size: 10px;
    color: var(--text-subtle); letter-spacing: .5px;
    padding: 3px 8px; border-radius: 999px; background: var(--bg-soft);
}

/* ---------- Category tile ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.cat-tile {
    aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; position: relative;
    background: var(--bg-soft); border: 1px solid var(--border); display: block;
}
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile__label {
    position: absolute; inset: auto 0 0 0; padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
    color: #fff;
}
.cat-tile__label .name { font-family: 'Space Grotesk'; font-weight: 700; font-size: 18px; }
.cat-tile__label .arrow {
    margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    opacity: .8; transition: gap .25s;
}
.cat-tile:hover .cat-tile__label .arrow { gap: 12px; opacity: 1; }

/* ---------- Why-us / printing tiles ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.feat-card {
    background: var(--bg-card); backdrop-filter: blur(8px); border: 1px solid var(--border);
    border-radius: 18px; padding: 28px;
    transition: transform .3s ease, border-color .3s ease;
}
.feat-card:hover { transform: translateY(-4px); border-color: var(--red-border); }
.feat-card .icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(225, 29, 46, .15), rgba(225, 29, 46, .05));
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
    color: var(--red);
}
.feat-card h4 { margin-bottom: 8px; }
.feat-card p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---------- Marquee ---------- */
.marquee {
    overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex; gap: 56px; animation: marquee 40s linear infinite; width: max-content;
    align-items: center;
}
@keyframes marquee {
    0% { transform: translateX(0); } 100% { transform: translateX(-50%); }
}
.marquee__item { font-family: 'Space Grotesk'; font-weight: 600; font-size: 22px; color: var(--text-muted); white-space: nowrap; }
.marquee__item .dot { display: inline-block; width: 6px; height: 6px; background: var(--red); border-radius: 50%; vertical-align: 4px; margin: 0 18px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 32px; border-radius: 18px; border: 1px solid var(--border); position: relative; background: var(--bg-elevated); }
.step .num { position: absolute; top: -16px; left: 28px; width: 48px; height: 48px; border-radius: 999px; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono'; font-weight: 700; font-size: 20px; }
.step h4 { margin: 16px 0 8px; }
.step p { color: var(--text-muted); margin: 0; font-size: 14px; }

/* ---------- Testimonials ---------- */
.t-card {
    padding: 28px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-elevated);
    height: 100%; display: flex; flex-direction: column; gap: 16px;
}
.t-card .quote { font-size: 15px; line-height: 1.65; color: var(--text); flex: 1; }
.t-card .who { display: flex; align-items: center; gap: 12px; }
.t-card .avatar {
    width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, var(--red), #ff6b3d);
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px;
    font-family: 'Space Grotesk';
}
.t-card .meta { font-size: 13px; }
.t-card .meta strong { display: block; color: var(--text); }
.t-card .meta span { color: var(--text-subtle); }

/* ---------- Newsletter band ---------- */
.newsletter {
    background: var(--text); color: var(--bg); border-radius: 24px;
    padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    position: relative; overflow: hidden;
}
.newsletter::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 80% 30%, rgba(225, 29, 46, .35), transparent 50%);
}
.newsletter h2 { color: var(--bg); position: relative; z-index: 1; }
.newsletter p { color: rgba(255, 255, 255, .7); margin: 12px 0 0; position: relative; z-index: 1; }
.newsletter form { position: relative; z-index: 1; display: flex; gap: 8px; }
.newsletter form input {
    flex: 1; padding: 16px 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
    background: rgba(255, 255, 255, .07); color: #fff; font: inherit; outline: none;
}
.newsletter form input::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter form button { white-space: nowrap; }
@media (max-width: 768px) {
    .newsletter { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; }
    .newsletter form { flex-direction: column; }
}

/* ---------- Footer ---------- */
.gx-footer {
    background: var(--bg-soft); border-top: 1px solid var(--border); padding: 64px 0 28px; margin-top: 80px;
}
.gx-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 56px; margin-bottom: 48px;
}
@media (max-width: 900px) { .gx-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .gx-footer__grid { grid-template-columns: 1fr; } }
.gx-footer h5 { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.gx-footer ul { list-style: none; padding: 0; margin: 0; }
.gx-footer ul li { margin-bottom: 10px; }
.gx-footer ul a { color: var(--text); font-size: 14px; }
.gx-footer ul a:hover { color: var(--red); }
.gx-footer__bottom {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 24px;
    border-top: 1px solid var(--border); font-size: 13px; color: var(--text-subtle);
    align-items: center;
}
.gx-footer__bottom .right { display: flex; align-items: center; gap: 16px; }
.gx-footer__bottom--centered {
    flex-direction: column; justify-content: center; text-align: center; gap: 14px;
}
.gx-footer__bottom--centered .gx-footer__copy { color: var(--text-muted); }
.theme-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; transition: all .2s ease; color: var(--text-muted); font-size: 12px; font-weight: 500;
}
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-toggle .moon { display: inline; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- WhatsApp + Chatbot floating ---------- */
.float-wa {
    position: fixed; bottom: 24px; left: 24px; width: 56px; height: 56px; border-radius: 999px;
    background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 24px rgba(37, 211, 102, .35); z-index: 90; transition: transform .2s ease;
}
.float-wa:hover { transform: scale(1.08); color: #fff; }
.chatbot-fab {
    position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 999px;
    background: linear-gradient(135deg, #E11D2E 0%, #b8121f 100%); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(225,29,46,.4), 0 4px 12px rgba(0,0,0,.15);
    z-index: 90; cursor: pointer; border: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.chatbot-fab:hover { transform: scale(1.06); box-shadow: 0 16px 36px rgba(225,29,46,.5), 0 6px 18px rgba(0,0,0,.2); }
.chatbot-fab svg { color: #fff; }
.chatbot-fab__pulse {
    position: absolute; inset: 0; border-radius: 999px;
    border: 2px solid var(--red);
    animation: chatbot-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes chatbot-pulse {
    0%   { transform: scale(1); opacity: .85; }
    100% { transform: scale(1.5); opacity: 0; }
}
.chatbot-fab__hint {
    position: absolute; right: calc(100% + 12px);
    background: var(--text); color: var(--bg);
    padding: 8px 14px; border-radius: 12px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    opacity: 0; transform: translateX(8px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.chatbot-fab__hint::after {
    content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: var(--text);
}
.chatbot-fab:not(.is-open) .chatbot-fab__hint {
    opacity: 1; transform: translateX(0);
    /* show only after a delay so the page can settle */
    animation: hint-bounce 4s ease-in-out 2.5s 1 backwards;
}
@keyframes hint-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}
@media (max-width: 540px) { .chatbot-fab__hint { display: none; } }

/* Typing indicator dots */
.chatbot-typing { display: inline-flex !important; align-items: center; gap: 4px; padding: 14px 16px !important; }
.chatbot-typing__dot {
    width: 7px; height: 7px; border-radius: 999px; background: var(--text-muted);
    animation: chatbot-dot 1.2s ease-in-out infinite;
}
.chatbot-typing__dot:nth-child(2) { animation-delay: .2s; }
.chatbot-typing__dot:nth-child(3) { animation-delay: .4s; }
@keyframes chatbot-dot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Scroll-to-top FAB (item 25d) — sits ABOVE the chatbot */
.scroll-top-fab {
    position: fixed; bottom: 96px; right: 24px;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--text); color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; z-index: 90;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
}
.scroll-top-fab.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-fab:hover { background: var(--red); }
@media (max-width: 540px) { .scroll-top-fab { bottom: 90px; } }
.chatbot-window {
    position: fixed; bottom: 96px; right: 24px; width: 360px; max-height: 540px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; z-index: 90;
}
.chatbot-window.open { display: flex; animation: pop-in .25s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.chatbot-window header {
    padding: 18px 20px; background: var(--text); color: var(--bg);
    display: flex; align-items: center; gap: 12px;
}
.chatbot-window header .av { width: 36px; height: 36px; border-radius: 999px; background: var(--red); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.chatbot-window header strong { display: block; font-size: 14px; }
.chatbot-window header span { font-size: 12px; opacity: .7; }
.chatbot-window header .close { margin-left: auto; background: transparent; border: 0; color: var(--bg); cursor: pointer; opacity: .7; }
.chatbot-window .body { padding: 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; max-height: 340px; }
.chatbot-msg { padding: 10px 14px; border-radius: 14px; max-width: 85%; font-size: 14px; line-height: 1.45; }
.chatbot-msg.bot { background: var(--bg-soft); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.chatbot-msg.me  { background: var(--red); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chatbot-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.chatbot-quick button {
    padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft);
    font: inherit; font-size: 12px; color: var(--text); cursor: pointer; transition: all .15s;
}
.chatbot-quick button:hover { background: var(--red); color: #fff; border-color: var(--red); }
.chatbot-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.chatbot-form input { flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); font: inherit; outline: none; color: var(--text); }
.chatbot-form button { width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--red); color: #fff; cursor: pointer; }

/* ---------- Cart drawer (overlay) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 95; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
    position: fixed; top: 0; right: 0; width: min(440px, 100vw); height: 100vh;
    background: var(--bg-elevated); border-left: 1px solid var(--border); transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2, .9, .25, 1); z-index: 96; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer header { padding: 22px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.drawer header h3 { margin: 0; font-size: 18px; }
.drawer .body { padding: 20px 24px; flex: 1; overflow-y: auto; }
.drawer footer { padding: 20px 24px; border-top: 1px solid var(--border); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; top: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
    pointer-events: auto; min-width: 240px; max-width: 360px;
    padding: 14px 18px; border-radius: 14px; background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 14px;
    animation: toast-in .25s ease;
}
.toast.success { border-left: 3px solid #22c55e; }
.toast.error { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid #3b82f6; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: var(--text-subtle); margin: 24px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-subtle); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { opacity: .4; }

/* ---------- Small utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.divider { height: 1px; background: var(--border); margin: 32px 0; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); font-size: 12px; color: var(--text-muted); }

/* ---------- Hamburger / mobile nav ---------- */
.gx-hamburger { display: none; }
@media (max-width: 1024px) {
    .gx-nav, .gx-search-input { display: none; }
    .gx-hamburger { display: inline-flex; }
}
.mobile-drawer { transform: translateX(-100%); }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--border); }
.mobile-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-list a { display: block; padding: 14px 16px; border-radius: 12px; font-weight: 500; color: var(--text); }
.mobile-nav-list a:hover { background: var(--bg-soft); }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); font-family: 'JetBrains Mono'; font-size: 13px; color: var(--text-muted);
}
.pagination a:hover { color: var(--red); border-color: var(--red); }
.pagination .active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- AOS micro override (fade) ---------- */
[data-aos="fade-up"] { transform: translateY(30px); opacity: 0; transition: all .8s cubic-bezier(.2,.7,.25,1); }
[data-aos="fade-up"].aos-animate { transform: translateY(0); opacity: 1; }

/* ---------- Print ---------- */
@media print {
    .gx-header, .gx-footer, .float-wa, .chatbot-fab, .chatbot-window { display: none !important; }
}

/* =====================================================================
   DASHBOARD — shared (customer / manager / admin)
   ===================================================================== */
.dash-shell {
    max-width: 1440px; margin: 0 auto; padding: 32px 24px 64px;
    display: grid; grid-template-columns: 240px 1fr; gap: 32px;
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .dash-shell { grid-template-columns: 1fr; padding: 16px; }
}

.dash-side {
    position: sticky; top: 96px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm);
}
@media (max-width: 1024px) { .dash-side { position: static; } }

.dash-side .me {
    display: flex; align-items: center; gap: 12px; padding: 8px 6px 18px;
    border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.dash-side .avatar {
    width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, var(--red), #ff6b3d);
    color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; font-family: 'Space Grotesk';
}
.dash-side .avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-side .name { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--text); }
.dash-side .email { font-size: 11px; color: var(--text-subtle); margin-top: 2px; word-break: break-all; }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
    color: var(--text-muted); font-size: 14px; font-weight: 500; transition: all .15s ease;
}
.dash-nav a:hover { background: var(--bg-soft); color: var(--text); }
.dash-nav a.active { background: var(--text); color: var(--bg); font-weight: 600; }
.dash-nav a.active svg { color: var(--bg); }
.dash-nav a svg { color: var(--text-subtle); flex-shrink: 0; }
.dash-nav a:hover svg { color: var(--text); }
.dash-nav .divider { height: 1px; background: var(--border); margin: 10px 4px; }
.dash-nav .danger { color: var(--red); }
.dash-nav .danger:hover { background: var(--red-soft); color: var(--red); }
.dash-nav .danger:hover svg { color: var(--red); }

.dash-content > .head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.dash-content > .head h1 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.dash-content > .head .sub { font-size: 14px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 16px; padding: 22px; transition: all .25s ease; position: relative; overflow: hidden;
    min-width: 0;
}
.stat:hover { transform: translateY(-2px); border-color: var(--red-border); }
.stat .label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.stat .num {
    font-family: 'JetBrains Mono'; font-weight: 700;
    font-size: clamp(20px, 4.2vw, 32px);
    color: var(--text); margin: 8px 0 4px; line-height: 1.1;
    overflow-wrap: anywhere; word-break: break-word;
}
.stat .delta { font-size: 12px; color: var(--text-subtle); }
.stat.accent { background: linear-gradient(135deg, var(--text), #1a1a1a); border: 0; color: #fff; }
.stat.accent .label, .stat.accent .delta { color: rgba(255,255,255,.6); }
.stat.accent .num { color: #fff; }
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat { padding: 16px 14px; }
    .stat .num { font-size: clamp(18px, 5.5vw, 24px); }
}
@media (max-width: 380px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* Dashboard chart cards — guarantee horizontal containment */
.dash-content .card canvas { max-width: 100%; height: auto !important; }
.dash-content .card { min-width: 0; overflow: hidden; }
.dash-content table { max-width: 100%; }
.dash-content > * { min-width: 0; }
.dash-content .row-2,
.dash-content .row-3,
.dash-content [style*="grid-template-columns"] { min-width: 0; }
@media (max-width: 900px) {
    /* Force any 2-col / 3-col grids in admin home onto single-column on mobile */
    .dash-content .row-2,
    .dash-content [class*="row-2"],
    .dash-content [style*="grid-template-columns:1.4fr 1fr"],
    .dash-content [style*="grid-template-columns:1.5fr 1fr"],
    .dash-content [style*="grid-template-columns: 1.4fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Status badges ---------- */
.badge-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    font-family: 'Inter';
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-pending        { background: rgba(245, 158, 11, .12);  color: #b45309; }
.badge-confirmed      { background: rgba(59, 130, 246, .12);  color: #1d4ed8; }
.badge-in_production  { background: rgba(168, 85, 247, .12);  color: #7e22ce; }
.badge-ready_to_ship  { background: rgba(20, 184, 166, .12);  color: #0e7490; }
.badge-shipped        { background: rgba(99, 102, 241, .12);  color: #4338ca; }
.badge-delivered      { background: rgba(34, 197, 94, .14);   color: #15803d; }
.badge-cancelled      { background: rgba(225, 29, 46, .12);   color: #b91c1c; }
.badge-refunded       { background: rgba(100, 116, 139, .12); color: #475569; }
[data-theme="dark"] .badge-pending       { color: #fbbf24; }
[data-theme="dark"] .badge-confirmed     { color: #60a5fa; }
[data-theme="dark"] .badge-in_production { color: #c084fc; }
[data-theme="dark"] .badge-ready_to_ship { color: #2dd4bf; }
[data-theme="dark"] .badge-shipped       { color: #818cf8; }
[data-theme="dark"] .badge-delivered     { color: #4ade80; }
[data-theme="dark"] .badge-cancelled     { color: #fb7185; }
[data-theme="dark"] .badge-refunded      { color: #94a3b8; }

/* ---------- Order list rows ---------- */
.order-row {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px 22px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated);
    margin-bottom: 12px; transition: all .2s ease;
}
.order-row:hover { border-color: var(--red-border); transform: translateY(-1px); box-shadow: var(--shadow); }
.order-row a.order-link { color: var(--text); }
.order-row .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-subtle); margin-top: 4px; }
.order-row .meta .font-mono { color: var(--text-muted); }

/* ---------- Order detail timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none; }
.timeline li {
    display: flex; gap: 14px; padding: 14px 0; position: relative;
}
.timeline li::before {
    content: ''; position: absolute; left: 12px; top: 28px; bottom: 0; width: 2px; background: var(--border);
}
.timeline li:last-child::before { display: none; }
.timeline .dot {
    width: 26px; height: 26px; border-radius: 999px; background: var(--bg-soft); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; font-size: 11px;
}
.timeline li.active .dot { background: var(--red); border-color: var(--red); color: #fff; }
.timeline li.done   .dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.timeline .body strong { display: block; font-size: 14px; color: var(--text); }
.timeline .body span   { font-size: 12px; color: var(--text-subtle); }

/* ---------- Empty states ---------- */
.empty {
    text-align: center; padding: 64px 28px; border: 1px dashed var(--border);
    border-radius: 18px; background: var(--bg-soft);
}
.empty svg { color: var(--text-subtle); margin-bottom: 18px; }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--text-muted); margin-bottom: 18px; max-width: 32em; margin-left: auto; margin-right: auto; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; }
.tabs a {
    padding: 12px 18px; border-bottom: 2px solid transparent; color: var(--text-muted);
    font-weight: 500; font-size: 14px; transition: all .15s ease; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); border-bottom-color: var(--red); font-weight: 600; }

/* ---------- Form rows ---------- */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

/* ---------- Address cards ---------- */
.addr-card {
    border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
    background: var(--bg-elevated); margin-bottom: 12px; position: relative;
    transition: border-color .2s;
}
.addr-card.is-default { border-color: var(--red); background: var(--red-soft); }
.addr-card .label-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--bg-soft); color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase;
}
.addr-card.is-default .label-tag { background: var(--red); color: #fff; }
.addr-card .actions { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- Mobile hamburger for sidebar ---------- */
.dash-mobile-toggle {
    display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    background: var(--bg-elevated); border: 1px solid var(--border); cursor: pointer;
    font: inherit; font-weight: 600; font-size: 13px; color: var(--text);
}
@media (max-width: 1024px) {
    .dash-mobile-toggle { display: none; } /* legacy — replaced by .dash-hamburger in standalone layout */
    .dash-side {
        display: block;
        position: fixed;
        top: 0; left: -290px; bottom: 0;
        width: 280px;
        z-index: 999;
        border-radius: 0;
        overflow-y: auto;
        transition: left .3s ease;
        box-shadow: 0 24px 60px -10px rgba(0,0,0,.35);
        max-height: 100vh;
        padding-top: 80px;
    }
    .dash-side.show { left: 0; }
    body.dash-side-open::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 998;
    }
}

/* ---------- /others page (News, Alliance, Awards) ---------- */
.others-nav { padding: 22px 0; background: var(--bg-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.others-nav__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.others-nav__chip {
    display: inline-block; padding: 9px 18px; border-radius: 99px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
    transition: all .2s;
}
.others-nav__chip:hover { background: var(--red); color: #fff; border-color: var(--red); }
.others-section { padding: 64px 0; }
.others-section:nth-child(odd) { background: var(--bg); }
.others-section:nth-child(even) { background: var(--bg-soft); }
.others-news__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; margin-top: 36px; }
.others-news__card {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .25s, border-color .25s;
}
.others-news__card:hover { transform: translateY(-3px); border-color: var(--red); }
.others-news__card--lead { grid-row: span 2; }
.others-news__media { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.others-news__card--lead .others-news__media { aspect-ratio: 16/9; }
.others-news__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.others-news__date { font-size: 11px; color: var(--red); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.others-news__body h3 { font-size: 18px; font-weight: 700; margin: 8px 0 4px; line-height: 1.35; }
.others-news__body em { font-style: normal; font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 10px; }
.others-news__excerpt { color: var(--text-muted); font-size: 13.5px; line-height: 1.7; flex: 1; }
.others-news__excerpt p { margin: 0 0 10px; }
.others-news__link { color: var(--red); font-weight: 600; font-size: 13px; text-decoration: none; margin-top: 10px; }

.others-partners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.others-partners__card {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px;
    padding: 24px; display: flex; gap: 16px; align-items: flex-start;
}
.others-partners__logo {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--bg-soft); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.others-partners__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.others-partners__logo span { font-weight: 800; color: var(--text-muted); font-size: 14px; }
.others-partners__card strong { display: block; font-size: 15px; color: var(--text); }
.others-partners__card em { font-style: normal; font-size: 11px; color: var(--red); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: block; margin: 2px 0 8px; }
.others-partners__card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0; }

.others-awards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.others-awards__card {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1.2fr;
}
.others-awards__media {
    aspect-ratio: 1/1; background-size: cover; background-position: center;
    position: relative;
}
.others-awards__year {
    position: absolute; top: 14px; left: 14px;
    background: var(--text); color: var(--bg); padding: 6px 12px; border-radius: 99px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
}
.others-awards__body { padding: 22px; }
.others-awards__body h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.others-awards__body em { font-style: normal; font-size: 12px; color: var(--red); display: block; margin-bottom: 10px; font-weight: 600; }
.others-awards__body p { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; margin: 0; }

@media (max-width: 1024px) {
    .others-news__grid { grid-template-columns: 1fr 1fr; }
    .others-news__card--lead { grid-column: span 2; grid-row: span 1; }
    .others-partners__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .others-news__grid { grid-template-columns: 1fr; }
    .others-news__card--lead { grid-column: span 1; }
    .others-partners__grid { grid-template-columns: 1fr; }
    .others-awards__grid { grid-template-columns: 1fr; }
    .others-awards__card { grid-template-columns: 1fr; }
    .others-awards__media { aspect-ratio: 16/9; }
}

/* ---------- About-page certifications marquee ---------- */
.about-certs { padding: 56px 0 36px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-certs__marquee { overflow: hidden; padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.about-certs__track {
    display: inline-flex; gap: 22px;
    animation: gx-cert-slide 60s linear infinite;
    will-change: transform;
}
.about-certs__track:hover { animation-play-state: paused; }
@keyframes gx-cert-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.about-certs__chip {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 22px; border-radius: 14px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    min-width: 280px; flex-shrink: 0;
}
.about-certs__chip img { height: 36px; width: auto; max-width: 80px; object-fit: contain; flex-shrink: 0; }
.about-certs__mono {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--red), #b8121f); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.about-certs__chip strong { display: block; font-size: 14px; color: var(--text); }
.about-certs__chip em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
@media (max-width: 640px) { .about-certs__chip { min-width: 240px; padding: 12px 16px; } }

/* ---------- Customer feedback star rating ---------- */
.feedback-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.feedback-stars input { display: none; }
.feedback-stars label {
    font-size: 30px; cursor: pointer; color: #d1d5db; line-height: 1;
    transition: color .15s;
}
.feedback-stars input:checked ~ label,
.feedback-stars label:hover,
.feedback-stars label:hover ~ label { color: #f59e0b; }

/* ---------- PDP add-to-cart inline error highlight ---------- */
.field.field-error label { color: var(--red); }
.field.field-error { position: relative; padding: 10px; margin: 8px -10px 16px; border-radius: 12px; background: rgba(225,29,46,.06); border: 1px solid rgba(225,29,46,.25); }
.field.field-error .field-error-msg {
    display: block !important;
    color: var(--red); font-size: 13px; font-weight: 600; margin-top: 8px;
    padding: 6px 10px; background: var(--red); color: #fff; border-radius: 8px; display: inline-block !important;
}

/* ---------- Footer widget 1: contact list with icons + bold values ---------- */
.gx-footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-subtle); }
.gx-footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.gx-footer-contact svg { flex-shrink: 0; color: var(--red); margin-top: 2px; }
.gx-footer-contact a { color: var(--text); text-decoration: none; word-break: break-word; }
.gx-footer-contact a:hover { color: var(--red); }
.gx-footer-contact strong { color: var(--text); font-weight: 700; }

/* ---------- Cookie / consent floating banner ---------- */
.gx-consent {
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 1100;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.35);
    padding: 18px 22px;
    display: none;
    grid-template-columns: 1fr auto; gap: 18px; align-items: center;
    max-width: 1100px; margin: 0 auto;
    animation: gx-fade-up .35s ease;
}
.gx-consent.is-visible { display: grid; }
.gx-consent__copy { font-size: 13.5px; color: var(--text); line-height: 1.65; }
.gx-consent__copy strong { color: var(--text); font-weight: 700; }
.gx-consent__copy a { color: var(--red); }
.gx-consent__btns { display: flex; gap: 8px; flex-shrink: 0; }
.gx-consent__btns .btn { white-space: nowrap; }
@media (max-width: 720px) {
    .gx-consent { grid-template-columns: 1fr; padding: 16px 18px; bottom: 12px; left: 8px; right: 8px; }
    .gx-consent__btns { flex-wrap: wrap; }
    .gx-consent__btns .btn { flex: 1 1 auto; min-width: 130px; }
}

/* ---------- Dashboard standalone layout (no public header) ---------- */
.dash-body--standalone { background: var(--bg); }
.dash-topbar {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.dash-topbar__inner {
    max-width: 1440px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 24px;
    height: 68px;
}
.dash-hamburger {
    display: none;
    width: 48px; height: 48px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    border-radius: 12px; cursor: pointer;
    color: var(--text);
    align-items: center; justify-content: center;
    transition: all .15s ease;
    flex-shrink: 0;
}
.dash-hamburger:hover { background: var(--bg-soft); border-color: var(--text); }
.dash-hamburger:active { transform: scale(.95); }

.dash-topbar__brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    height: 44px;
    flex-shrink: 0;
}
.dash-topbar__brand img { height: 100%; max-height: 44px; width: auto; display: block; }
.dash-topbar__role {
    display: inline-block; padding: 4px 10px;
    background: var(--red); color: #fff;
    font-size: 10px; letter-spacing: 1.4px; font-weight: 700;
    border-radius: 99px; text-transform: uppercase;
    line-height: 1;
}

.dash-topbar__actions {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.dash-topbar__visit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-size: 13px;
    white-space: nowrap;
}
.dash-topbar__theme,
.dash-topbar__logout {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--bg-elevated);
    border-radius: 999px; cursor: pointer; color: var(--text-muted);
    text-decoration: none;
    transition: all .15s ease;
}
.dash-topbar__theme:hover,
.dash-topbar__logout:hover { background: var(--bg-soft); color: var(--text); border-color: var(--text); }
.dash-topbar__logout:hover { color: var(--red); border-color: var(--red); }
.dash-topbar__theme .moon { display: inline; }
.dash-topbar__theme .sun { display: none; }
[data-theme="dark"] .dash-topbar__theme .moon { display: none; }
[data-theme="dark"] .dash-topbar__theme .sun { display: inline; }

.dash-shell--standalone {
    max-width: 1440px; margin: 0 auto;
    padding: 28px 24px 80px;
    display: grid; grid-template-columns: 240px 1fr; gap: 28px;
    align-items: flex-start;
}

.dash-footer {
    padding: 22px 24px; border-top: 1px solid var(--border);
    background: var(--bg-soft);
    text-align: center; font-size: 12px; color: var(--text-muted);
}

/* Hide stale public header / public footer / floating CTAs / courier band on dashboard */
.dash-body--standalone .gx-topbar,
.dash-body--standalone .gx-header,
.dash-body--standalone .gx-mainnav,
.dash-body--standalone .gx-footer,
.dash-body--standalone .courier-band,
.dash-body--standalone .float-wa,
.dash-body--standalone .chatbot-fab,
.dash-body--standalone .chatbot-window,
.dash-body--standalone .scroll-top-fab { display: none !important; }

/* Mobile: bigger tap targets, drawer hamburger, hide visit-text label */
@media (max-width: 1024px) {
    .dash-shell--standalone { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
    .dash-hamburger { display: inline-flex; }
    .dash-topbar__visit span { display: none; }
    .dash-topbar__visit { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 999px; }
    .dash-topbar__inner { padding: 10px 16px; gap: 10px; height: 64px; }
    .dash-topbar__brand img { max-height: 36px; }
    .dash-topbar__role { display: none; }
}
@media (max-width: 480px) {
    .dash-topbar__brand { gap: 6px; }
    .dash-topbar__brand img { max-height: 32px; }
    .dash-topbar__inner { padding: 8px 14px; gap: 8px; height: 60px; }
}

/* ---------- Dashboard polish: head + cards ---------- */
.dash-content .head {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border);
}
.dash-content .head h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; letter-spacing: -.5px; margin: 0; }
.dash-content .head .sub { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.dash-content .empty {
    text-align: center; padding: 56px 24px;
    background: var(--bg-elevated); border: 1px dashed var(--border); border-radius: 18px;
}
.dash-content .empty h3 { font-size: 18px; margin: 14px 0 8px; }
.dash-content .empty p { color: var(--text-muted); font-size: 14px; max-width: 40ch; margin: 0 auto 18px; }

/* ---------- Modal (admin CRUD modals) ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal__bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.modal__card { position: relative; background: var(--bg-elevated); border-radius: 18px; box-shadow: 0 20px 60px -10px rgba(0,0,0,.4); width: 100%; max-height: 92vh; overflow-y: auto; }
@media (max-width: 640px) { .modal__card { max-width: 100%; } }

/* ---------- Previous Work page ---------- */
.prevwork-kpi { padding: 28px 0; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.prevwork-kpi__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.prevwork-kpi__row > div { padding: 12px 8px; border-right: 1px solid var(--border); }
.prevwork-kpi__row > div:last-child { border-right: 0; }
.prevwork-kpi__row strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1; }
.prevwork-kpi__row em { display: block; font-style: normal; color: var(--text-muted); font-size: 12.5px; margin-top: 6px; letter-spacing: .5px; }

.prevwork-feature { padding: 56px 0; background: var(--bg); }
.prevwork-feature__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.prevwork-feature__visual {
    position: relative; aspect-ratio: 4/3; border-radius: 24px;
    background-size: cover; background-position: center;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
}
.prevwork-feature__badge { position: absolute; top: 22px; left: 22px; background: var(--red); color: #fff; padding: 8px 16px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.prevwork-feature__eyebrow { font-size: 11px; letter-spacing: 2.5px; color: var(--red); font-weight: 700; text-transform: uppercase; display: inline-block; margin-bottom: 14px; }
.prevwork-feature__copy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 18px; letter-spacing: -1px; }
.prevwork-feature__body { color: var(--text-muted); font-size: 15px; line-height: 1.85; margin-bottom: 26px; }
.prevwork-feature__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid var(--border); }
.prevwork-feature__stats strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 22px; line-height: 1; }
.prevwork-feature__stats em { font-style: normal; font-size: 12px; color: var(--text-muted); }

.prevwork-grid-sec { padding: 64px 0; background: var(--bg-soft); }
.prevwork-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.prevwork-card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .25s, border-color .25s;
}
.prevwork-card:hover { transform: translateY(-4px); border-color: var(--red); }
.prevwork-card__media { position: relative; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.prevwork-card__media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%); }
.prevwork-card__tag {
    position: absolute; bottom: 14px; left: 14px; z-index: 2;
    background: rgba(255,255,255,.95); padding: 6px 12px; border-radius: 99px;
    font-size: 11px; font-weight: 600; color: var(--text);
}
.prevwork-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.prevwork-card__body h3 { font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.prevwork-card__excerpt { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }

.prevwork-clients { padding: 56px 0; background: var(--bg); border-top: 1px solid var(--border); }
.prevwork-clients__head { text-align: center; color: var(--text-muted); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 22px; }
.prevwork-clients__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.prevwork-clients__chip {
    padding: 10px 18px; border: 1.5px solid var(--border);
    border-radius: 99px; font-size: 13px; font-weight: 600;
    color: var(--text); background: var(--bg-soft);
}

@media (max-width: 1024px) {
    .prevwork-feature__grid { grid-template-columns: 1fr; }
    .prevwork-grid { grid-template-columns: 1fr 1fr; }
    .prevwork-kpi__row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .prevwork-kpi__row > div { border-right: 0; }
}
@media (max-width: 640px) {
    .prevwork-grid { grid-template-columns: 1fr; }
}

/* ---------- Branding page ---------- */
.branding-intro { padding: 56px 0; background: var(--bg); }
.branding-intro__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.branding-intro__eyebrow { display: inline-block; font-size: 11px; letter-spacing: 2.5px; color: var(--red); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.branding-intro__copy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 16px; letter-spacing: -1px; }
.branding-intro__copy p { color: var(--text-muted); font-size: 15.5px; line-height: 1.85; margin-bottom: 14px; }
.branding-intro__copy strong { color: var(--text); }
.branding-intro__list { color: var(--text-muted); font-size: 14.5px; line-height: 1.85; margin: 18px 0 0 22px; }
.branding-intro__list li { margin-bottom: 8px; }
.branding-intro__visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); }

.branding-options { padding: 64px 0; background: var(--bg-soft); }
.branding-options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.branding-options__card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 20px; overflow: hidden;
    transition: transform .25s, border-color .25s;
}
.branding-options__card:hover { transform: translateY(-3px); border-color: var(--red); }
.branding-options__media { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.branding-options__body { padding: 24px; }
.branding-options__no { font-family: 'JetBrains Mono', monospace; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.branding-options__body h3 { font-size: 18px; font-weight: 700; margin: 6px 0 4px; }
.branding-options__body em { font-style: normal; font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 10px; letter-spacing: .5px; }
.branding-options__excerpt { color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }

.branding-process { padding: 56px 0; background: var(--bg); }
.branding-process__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.branding-process__row > div { padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.branding-process__row span { font-family: 'JetBrains Mono', monospace; color: var(--red); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.branding-process__row h4 { margin: 8px 0 8px; font-size: 16px; font-weight: 700; }
.branding-process__row p { color: var(--text-muted); font-size: 13px; line-height: 1.65; margin: 0; }

.branding-cta { padding: 64px 24px; background: linear-gradient(135deg, #0A0A0A 0%, #1c0507 60%, #2b0a0e 100%); color: #fff; text-align: center; }
.branding-cta h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 14px; }
.branding-cta p { color: rgba(255,255,255,.78); max-width: 60ch; margin: 0 auto 28px; }
.branding-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.branding-cta__btns .btn-primary { color: #fff; }

@media (max-width: 1024px) {
    .branding-intro__grid { grid-template-columns: 1fr; gap: 32px; }
    .branding-options__grid { grid-template-columns: 1fr 1fr; }
    .branding-process__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .branding-options__grid { grid-template-columns: 1fr; }
    .branding-process__row { grid-template-columns: 1fr; }
}

/* ---------- Fabrics page (per-fabric alternating sections) ---------- */
.fabrics-chips { padding: 22px 0; background: var(--bg-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); }
.fabrics-chips__row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; }
.fabrics-chips__chip {
    display: inline-block; padding: 8px 16px; border-radius: 99px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--text);
    text-decoration: none; white-space: nowrap; transition: all .2s;
}
.fabrics-chips__chip:hover { background: var(--red); color: #fff; border-color: var(--red); }

.fabric-block { padding: 64px 0; border-bottom: 1px solid var(--border); }
.fabric-block:nth-child(even) { background: var(--bg-soft); }
.fabric-block__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fabric-block--reverse .fabric-block__grid { direction: rtl; }
.fabric-block--reverse .fabric-block__grid > * { direction: ltr; }
.fabric-block__media { position: relative; }
.fabric-block__img {
    width: 100%; aspect-ratio: 4/5; border-radius: 22px;
    background-size: cover; background-position: center;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
}
.fabric-block__badge {
    position: absolute; top: 18px; left: 18px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
    padding: 12px 16px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
}
.fabric-block__badge span { display: block; font-size: 10px; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 2px; font-weight: 700; }
.fabric-block__badge strong { color: var(--text); font-size: 14px; }
.fabric-block__eyebrow { display: inline-block; font-size: 11px; letter-spacing: 2.5px; color: var(--red); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.fabric-block__copy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 38px); letter-spacing: -1px; margin: 0 0 18px; }
.fabric-block__body { color: var(--text-muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.fabric-block__body p { margin-bottom: 14px; }
.fabric-block__body strong { color: var(--text); }
.fabric-block__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.fabrics-trust { padding: 64px 0; background: var(--text); color: var(--bg); }
.fabrics-trust__head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.fabrics-trust__head .eyebrow { display:inline-block; color: var(--red); margin-bottom: 14px; }
.fabrics-trust__head h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 36px); }
.fabrics-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fabrics-trust__grid > div { padding: 26px; background: rgba(255,255,255,.04); border-radius: 18px; border: 1px solid rgba(255,255,255,.1); }
.fabrics-trust__grid strong { display: inline-block; color: var(--red); font-family: 'JetBrains Mono', monospace; font-size: 14px; margin-bottom: 10px; }
.fabrics-trust__grid h4 { color: #fff; margin: 0 0 8px; font-size: 18px; }
.fabrics-trust__grid p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; margin: 0; }

@media (max-width: 1024px) {
    .fabric-block__grid { grid-template-columns: 1fr; gap: 32px; }
    .fabric-block--reverse .fabric-block__grid { direction: ltr; }
    .fabrics-trust__grid { grid-template-columns: 1fr; }
}

/* ---------- About page (modern + classy) ---------- */
.about-intro { padding: 56px 0 32px; background: var(--bg); }
.about-intro__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.about-intro__copy {}
.about-intro__eyebrow { display:inline-block; font-size:11px; letter-spacing:3px; color:var(--text-muted); margin-bottom:16px; }
.about-intro__headline { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -1.5px; margin: 0 0 22px; }
.about-intro__copy-body { color: var(--text-muted); font-size: 16px; line-height: 1.85; margin-bottom: 28px; }
.about-intro__copy-body p { margin-bottom: 16px; }
.about-intro__copy-body h3 { font-size: 20px; color: var(--text); margin: 28px 0 10px; font-weight: 700; }
.about-intro__copy-body ul { margin: 14px 0 18px 22px; }
.about-intro__copy-body li { margin-bottom: 8px; }
.about-intro__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.about-intro__visual { position: relative; }
.about-intro__main-img { width: 100%; aspect-ratio: 4/5; border-radius: 24px; background-size: cover; background-position: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); }
.about-intro__chip {
    position: absolute; bottom: -28px; left: -28px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px;
    padding: 18px 22px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.15);
}
.about-intro__chip span { display:block; font-size: 10px; letter-spacing: 2px; color: var(--text-muted); margin-bottom:4px; }
.about-intro__chip strong { font-family: 'Space Grotesk', sans-serif; font-size: 26px; display:block; line-height:1; color: var(--red); }
.about-intro__chip em { font-style: normal; font-size: 12px; color: var(--text-muted); }

.about-stats { padding: 32px 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-stats__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; text-align: center; }
.about-stats__row > div { padding: 14px 8px; border-right: 1px solid var(--border); }
.about-stats__row > div:last-child { border-right: 0; }
.about-stats__row strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--text); line-height: 1; }
.about-stats__row em { display: block; font-style: normal; color: var(--text-muted); font-size: 13px; margin-top: 6px; }

.about-values { padding: 64px 0 40px; }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.about-values__card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 18px; padding: 24px;
    transition: border-color .25s, transform .25s;
}
.about-values__card:hover { border-color: var(--red); transform: translateY(-3px); }
.about-values__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--red); font-weight: 700; letter-spacing: 1px; }
.about-values__card h4 { font-size: 18px; margin: 8px 0 10px; font-weight: 700; }
.about-values__card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.7; margin: 0; }

.about-factory { padding: 56px 0 40px; background: var(--bg-soft); }
.about-factory__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 14px; margin-top: 28px; }
.about-factory__tile { position: relative; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; }
.about-factory__tile::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.05) 50%, rgba(0,0,0,.78) 100%); }
.about-factory__tile--lg { grid-row: span 2; }
.about-factory__tile-cap { position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2; }
.about-factory__tile-cap span { display: inline-block; background: var(--red); color: #fff; font-size: 10px; letter-spacing: 1.5px; padding: 4px 8px; border-radius: 99px; font-weight: 700; }
.about-factory__tile-cap strong { display: block; color: #fff; font-size: 15px; margin-top: 8px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }

.about-parent { padding: 56px 0; background: var(--bg); }
.about-parent__card {
    background: linear-gradient(135deg, #0A0A0A 0%, #1a1a1a 100%);
    color: #fff; border-radius: 24px; padding: 44px clamp(24px, 4vw, 56px);
    display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 36px; align-items: center;
}
.about-parent__brand h3 { font-family: 'Space Grotesk', sans-serif; }
.about-parent__card p { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.8; margin: 0; }
.about-parent__links { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
.about-parent__links a { color: var(--red); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.about-parent__links a:hover { text-decoration: underline; }

.about-cta { background: var(--text); color: var(--bg); text-align: center; padding: 64px 24px; }
.about-cta h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.about-cta p { color: rgba(255,255,255,.75); max-width: 60ch; margin: 0 auto 28px; }
.about-cta .btn-primary { color: #fff; }

@media (max-width: 1024px) {
    .about-intro__grid { grid-template-columns: 1fr; gap: 32px; }
    .about-intro__chip { left: 18px; bottom: 18px; }
    .about-values__grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats__row { grid-template-columns: repeat(3, 1fr); }
    .about-stats__row > div:nth-child(3) { border-right: 0; }
    .about-factory__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
    .about-factory__tile--lg { grid-row: span 1; grid-column: span 2; }
    .about-parent__card { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
    .about-values__grid { grid-template-columns: 1fr; }
    .about-stats__row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .about-stats__row > div { border-right: 0; padding: 10px; }
    .about-factory__grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); }
    .about-factory__tile--lg { grid-column: 1; }
}

/* ---------- FAQ page + Contact-page FAQ section ---------- */
.faq-page { padding: 56px 0; background: var(--bg); }
.faq-page__grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: flex-start; }
.faq-page__nav { position: sticky; top: 96px; padding: 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px; }
.faq-page__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.faq-page__nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 10px;
    color: var(--text-muted); font-size: 13.5px; font-weight: 500; text-decoration: none;
    transition: all .15s ease;
}
.faq-page__nav a:hover { background: var(--bg-soft); color: var(--text); }
.faq-page__nav a span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-subtle); }
.faq-page__nav-cta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.faq-page__nav-cta strong { display: block; font-size: 14px; margin-bottom: 6px; }
.faq-page__nav-cta p { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.55; }
.faq-page__nav-cta .btn { display: block; width: 100%; margin-bottom: 6px; }

.faq-page__list { display: flex; flex-direction: column; gap: 36px; }
.faq-page__group h2 {
    font-family: 'Space Grotesk', sans-serif; font-weight: 800;
    font-size: 22px; letter-spacing: -.5px; margin: 0 0 14px;
    padding-bottom: 12px; border-bottom: 2px solid var(--red);
    display: inline-block; color: var(--text);
}
.faq-page__item {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s;
}
.faq-page__item[open] { border-color: var(--red); }
.faq-page__item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 18px 22px; cursor: pointer;
    list-style: none; font-weight: 600; font-size: 15px; color: var(--text);
    user-select: none;
}
.faq-page__item summary::-webkit-details-marker { display: none; }
.faq-page__item summary:hover { background: var(--bg-soft); }
.faq-page__item .chev { color: var(--text-muted); transition: transform .25s; flex-shrink: 0; }
.faq-page__item[open] .chev { transform: rotate(180deg); color: var(--red); }
.faq-page__answer {
    padding: 0 22px 22px; color: var(--text-muted); font-size: 14.5px; line-height: 1.75;
}
.faq-page__answer p { margin: 0 0 12px; }
.faq-page__answer ul, .faq-page__answer ol { margin: 8px 0 12px 22px; }
.faq-page__answer a { color: var(--red); }
.faq-page__answer strong { color: var(--text); }

/* Contact-page embedded FAQ */
.contact-faq { padding: 64px 0 72px; background: var(--bg-soft); border-top: 1px solid var(--border); }
.contact-faq__list { max-width: 820px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1024px) {
    .faq-page__grid { grid-template-columns: 1fr; gap: 22px; }
    .faq-page__nav { position: static; }
    .faq-page__nav ul { flex-direction: row; flex-wrap: wrap; }
    .faq-page__nav a { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }
    .faq-page__nav-cta { display: none; }
}

/* ---------- Form submit UX (loading button + success card) ---------- */
.btn.is-loading { opacity: .85; cursor: wait; }
.btn__spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%;
    animation: gx-spin .7s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}
@keyframes gx-spin { to { transform: rotate(360deg); } }
.btn-outline .btn__spinner, .btn-ghost .btn__spinner { border-color: rgba(0,0,0,.15); border-top-color: var(--text); }

.form-success-card {
    background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.02));
    border: 1px solid rgba(34,197,94,.25);
    border-radius: 18px;
    padding: 36px 32px;
    text-align: center;
    color: var(--text);
    animation: gx-fade-up .5s ease;
}
.form-success-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #22c55e; color: #fff;
    font-size: 28px; font-weight: 800;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px -10px rgba(34,197,94,.6);
}
.form-success-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px; font-weight: 800;
    margin: 0 0 10px;
    color: var(--text);
}
.form-success-card p { color: var(--text-muted); font-size: 15px; line-height: 1.7; max-width: 50ch; margin: 0 auto 8px; }
.form-success-card__hint { color: var(--text-subtle); font-size: 12.5px; margin-top: 14px; }
@keyframes gx-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Courier pill image variant ---------- */
.courier-pill__logo--img { padding: 4px; overflow: hidden; }
.courier-pill__logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Header logo (image variant + light/dark swap) ---------- */
.gx-logo--img { display: inline-flex; align-items: center; height: 44px; line-height: 0; }
.gx-logo--img img { height: 100%; width: auto; max-height: 44px; display: block; }
.gx-logo__txt { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -1px; color: var(--text); }
.gx-logo__txt .x { color: var(--red); }
/* Light/dark logo swap — needs !important to beat .gx-logo--img img { display: block } */
img.gx-logo__dark { display: none !important; }
img.gx-logo__light { display: block !important; }
[data-theme="dark"] img.gx-logo__light { display: none !important; }
[data-theme="dark"] img.gx-logo__dark  { display: block !important; }
@media (max-width: 640px) { .gx-logo--img { height: 36px; } .gx-logo--img img { max-height: 36px; } }

/* Logo upload cards in admin settings */
.logo-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logo-upload-card {
    border: 1px solid var(--border); border-radius: 14px; padding: 16px;
    background: var(--bg-elevated);
}
.logo-upload-card__head { margin-bottom: 12px; }
.logo-upload-card__head strong { display: block; font-size: 14px; }
.logo-upload-card__head span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.logo-upload-card__preview {
    aspect-ratio: 16/9; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; overflow: hidden; padding: 16px;
}
.logo-upload-card__preview--light { background: #fff; border: 1px solid var(--border); }
.logo-upload-card__preview--dark  { background: #0A0A0A; }
.logo-upload-card__preview--mark  { background: var(--bg-soft); border: 1px solid var(--border); }
.logo-upload-card__preview img { max-width: 80%; max-height: 100%; width: auto; height: auto; display: block; }
.logo-upload-card__empty { font-size: 12px; color: var(--text-subtle); }
@media (max-width: 900px) { .logo-upload-grid { grid-template-columns: 1fr; } }

/* ---------- Featured Categories grid (WoodMart-style 1+4) ---------- */
.featured-cats { padding: 56px 0 36px; background: var(--bg); }
.featured-cats__head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.featured-cats__head .eyebrow { display: inline-block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.featured-cats__head h2 { font-size: clamp(28px, 4vw, 40px); font-family: 'Space Grotesk', sans-serif; font-weight: 800; letter-spacing: -1px; margin: 0 0 12px; }
.featured-cats__head p { color: var(--text-muted); font-size: 14px; }
.featured-cats__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 320px 320px;
    gap: 14px;
}
.featured-cats__tile {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    display: block;
    transition: transform .35s ease;
}
.featured-cats__tile:hover { transform: translateY(-4px); }
.featured-cats__tile--lg { grid-column: 1; grid-row: 1 / span 2; }
.featured-cats__tile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.6) 88%, rgba(255,255,255,.92) 100%);
    transition: background .25s;
}
.featured-cats__tile:hover .featured-cats__tile-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.04) 50%, rgba(0,0,0,.4) 100%);
}
.featured-cats__tile-caption {
    position: absolute; bottom: 22px; left: 26px; right: 26px;
    z-index: 2;
}
.featured-cats__tile-caption h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 800;
    margin: 0 0 4px; letter-spacing: 2px;
    color: #0A0A0A;
    transition: color .25s;
}
.featured-cats__tile:hover .featured-cats__tile-caption h3 { color: #fff; }
.featured-cats__tile-caption span {
    font-size: 12px; color: var(--text-muted); display: inline-block;
    transition: color .25s;
}
.featured-cats__tile:hover .featured-cats__tile-caption span { color: rgba(255,255,255,.85); }
.featured-cats__tile--lg .featured-cats__tile-caption h3 { font-size: 30px; letter-spacing: 4px; }
@media (max-width: 1024px) {
    .featured-cats__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 240px 240px; }
    .featured-cats__tile--lg { grid-column: 1 / span 2; grid-row: 1; }
}
@media (max-width: 640px) {
    .featured-cats__grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
    .featured-cats__tile--lg { grid-column: 1; grid-row: 1; }
    .featured-cats__tile-caption h3 { font-size: 20px; }
    .featured-cats__tile--lg .featured-cats__tile-caption h3 { font-size: 26px; }
}

/* ---------- Home: studio / floor gallery ---------- */
.home-floor__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 220px;
    gap: 14px;
    margin-top: 36px;
}
.home-floor__tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: transform .35s ease;
}
.home-floor__tile:hover { transform: translateY(-4px); }
.home-floor__tile--lg { grid-column: span 2; grid-row: span 2; }
.home-floor__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.78) 100%);
}
.home-floor__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    z-index: 2;
}
.home-floor__caption span {
    display: inline-block; font-size: 10px; letter-spacing: 2px; font-weight: 700;
    text-transform: uppercase; color: rgba(255,255,255,.85);
    margin-bottom: 6px;
    background: rgba(225,29,46,.92); padding: 4px 10px; border-radius: 99px;
}
.home-floor__caption h4 {
    margin: 0; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.home-floor__tile--lg .home-floor__caption h4 { font-size: 22px; max-width: 360px; }

@media (max-width: 1024px) {
    .home-floor__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 200px 200px; }
    .home-floor__tile--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
    .home-floor__grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); }
    .home-floor__tile--lg { grid-column: span 1; }
    .home-floor__caption h4 { font-size: 16px; }
    .home-floor__tile--lg .home-floor__caption h4 { font-size: 18px; }
}