/* ═══════════════════════════════════════════════
   StrazX — Shared Stylesheet
   ═══════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
:root,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --fh: 'Outfit', sans-serif;
    --fb: 'DM Sans', sans-serif;
    --trans: 0.3s ease;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-pill: 100px;
}

:root[data-theme="dark"] {
    --bg: #121212; --bg2: #1e1e1e; --bg3: #2a2a2a;
    --text: #e8e8e8; --sub: #b0b0b0; --muted: #7a7a7a;
    --border: rgba(255,255,255,0.1); --border-faint: rgba(255,255,255,0.05);
    --shadow: rgba(0,0,0,0.4);
    --logo-fill: #ffffff; --accent: #3CF4E8; --accent2: #1E90FF;
    --card-bg: #2a2a2a; --card-bg-hover: #333333;
    --sq: #F1641E; --sq-glow: rgba(241,100,30,0.35);
    --sec-dark-bg: #121212; --sec-dark-txt: #e8e8e8;
    --sec-light-bg: #121212; --sec-light-txt: #e8e8e8;
    --sec-neutral-bg: #1e1e1e; --sec-neutral-txt: #e8e8e8;
    --sec-border: rgba(255,255,255,0.05);
    --card-surface: #2a2a2a; --card-brd: rgba(255,255,255,0.08);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.4);
    --spotlight-bg: #2a2a2a; --spotlight-brd: rgba(255,255,255,0.08);
    --input-bg: #2a2a2a; --input-border: rgba(255,255,255,0.15);
    --btn-text: #121212;
}

:root[data-theme="light"] {
    --bg: #f5f2ee; --bg2: #ffffff; --bg3: #ebe8e3;
    --text: #1a1a1a; --sub: #555550; --muted: #555550;
    --border: rgba(26,26,26,0.1); --border-faint: rgba(26,26,26,0.05);
    --shadow: rgba(0,0,0,0.08);
    --logo-fill: #1a1a1a; --accent: #1E90FF; --accent2: #0055cc;
    --card-bg: #ffffff; --card-bg-hover: #fafafa;
    --sq: #D04F14; --sq-glow: rgba(208,79,20,0.2);
    --sec-dark-bg: #1a1a1a; --sec-dark-txt: #ffffff;
    --sec-light-bg: #ffffff; --sec-light-txt: #1a1a1a;
    --sec-neutral-bg: #ebe8e3; --sec-neutral-txt: #1a1a1a;
    --sec-border: rgba(0,0,0,0.05);
    --card-surface: #ffffff; --card-brd: rgba(0,0,0,0.08);
    --card-shadow: 0 2px 16px rgba(0,0,0,0.08);
    --spotlight-bg: #ffffff; --spotlight-brd: rgba(0,0,0,0.08);
    --input-bg: #ebe8e3; --input-border: rgba(26,26,26,0.15);
    --btn-text: #ffffff;
}

body {
    font-family: var(--fb); background: var(--bg); color: var(--text);
    min-height: 100vh; display: flex; flex-direction: column;
    transition: background var(--trans), color var(--trans); overflow-x: hidden;
}

.hex-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 2L58 17V47L30 62L2 47V17Z' stroke='%231E90FF' stroke-opacity='0.12' fill='none'/%3E%3C/svg%3E");
}

/* ── NAV ── */
nav {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 2rem; transition: background var(--trans);
}
[data-theme="light"] nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo svg { height: 62px; width: auto; filter: drop-shadow(0 2px 8px var(--shadow)); }
.logo-main-text { fill: var(--logo-fill); transition: fill var(--trans); }
.logo-slogan { fill: var(--sub); transition: fill var(--trans); }
#xGrad-stop-1 { stop-color: var(--logo-fill); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { font-family: var(--fh); font-size: 0.78rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--sub); text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
.hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg2); cursor: pointer; padding: 9px; flex-shrink: 0;
}
.hamburger span { display: block; height: 1.5px; background: var(--text); border-radius: 2px; }
.mobile-nav {
    display: none; position: fixed; inset: 0; z-index: 150;
    background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link { font-size: 1.1rem; }
.mobile-nav-close {
    position: absolute; top: 1.2rem; right: 1.2rem;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* ── CART BUTTON ── */
.cart-nav-btn {
    position: relative; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg2); color: var(--text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: border-color 0.2s, color 0.2s;
}
.cart-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; border-radius: 100px; padding: 0 4px;
    background: var(--accent); color: var(--bg);
    font-family: var(--fh); font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.cart-badge[hidden] { display: none; }

/* ── CART DRAWER ── */
.cart-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s, visibility 0.28s;
}
.cart-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.cart-drawer {
    position: fixed; top: 0; right: 0; z-index: 301;
    width: 380px; max-width: 100vw; height: 100dvh;
    background: var(--bg2); border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.22);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-faint); flex-shrink: 0;
}
.cart-header h2 { font-family: var(--fh); font-size: 0.95rem; font-weight: 700; }
.cart-close {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1; transition: border-color 0.15s;
}
.cart-close:hover { border-color: var(--accent); }
.cart-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem; }
.cart-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 0.75rem; padding-bottom: 3rem;
}
.cart-empty-icon { opacity: 0.35; }
.cart-empty p { font-family: var(--fh); font-size: 0.78rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.cart-item { padding: 0.9rem 0; border-bottom: 1px solid var(--border-faint); }
.cart-item:last-child { border-bottom: none; }
.cart-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.cart-item-name { font-family: var(--fh); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.cart-item-note { font-size: 0.7rem; color: var(--muted); margin-top: 0.18rem; font-style: italic; }
.cart-item-price { font-family: var(--fh); font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.cart-footer { border-top: 1px solid var(--border); padding: 1rem 1.25rem 1.25rem; flex-shrink: 0; }
.cart-footer[hidden] { display: none; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; }
.cart-subtotal-label { font-size: 0.82rem; color: var(--sub); font-family: var(--fh); font-weight: 500; }
.cart-subtotal-amt { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; }
.cart-checkout-btn {
    width: 100%; padding: 0.85rem; border: none; border-radius: 12px;
    background: var(--sq); color: #fff; font-family: var(--fh); font-size: 0.8rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;
    box-shadow: 0 4px 20px var(--sq-glow); transition: opacity 0.2s;
    text-decoration: none; display: block; text-align: center;
}
.cart-checkout-btn:hover { opacity: 0.9; }
.cart-checkout-note { font-size: 0.68rem; color: var(--muted); text-align: center; margin-top: 0.6rem; line-height: 1.55; }

/* ── MAIN ── */
main { position: relative; z-index: 2; flex: 1; }

/* ── FOOTER ── */
footer {
    position: relative; z-index: 2;
    background: var(--bg2); padding: 1.1rem; border-top: 1px solid var(--border); text-align: center;
}
.foot-copy { font-family: var(--fh); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.foot-copy a, .foot-link { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.foot-copy a:hover, .foot-link:hover { color: var(--accent); }

/* ── BREADCRUMB ── */
.breadcrumb { font-family: var(--fh); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 1.25rem 2rem 0; text-align: center; }
.breadcrumb a { color: var(--sub); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { margin: 0 0.4rem; }
.breadcrumb-current { color: var(--text); }

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
    nav { padding: 0.65rem 1rem; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-logo svg { height: 48px; }
}