/* ==========================================================================
   KAVRX — DESIGN SYSTEM v2
   Palette:  obsidian/charcoal ground, warm gold (not neon), ivory text.
   Type:     Big Shoulders Display (condensed, industrial) for headlines —
             Inter for body — JetBrains Mono for prices/labels/SKUs.
   Signature: the "hallmark seal" — a circular assay-mark badge on every
             product, playing on the brand literally being gold-plated
             streetwear (real gold gets hallmarked; so does this).
   Mobile-first: base rules are phone, @media (min-width) adds desktop.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
    --obsidian:#0b0a08;
    --charcoal:#161310;
    --charcoal-2:#1e1a15;
    --panel:rgba(255,255,255,.035);
    --line:rgba(205,164,62,.18);
    --line-strong:rgba(205,164,62,.4);
    --gold:#cda43e;
    --gold-bright:#f0cf70;
    --gold-deep:#8a6c22;
    --ivory:#f4ead9;
    --smoke:#9a917f;
    --radius:14px;
    --max:1500px;
    --display:'Big Shoulders Display', sans-serif;
    --body:'Inter', system-ui, -apple-system, sans-serif;
    --mono:'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    background:var(--obsidian);
    color:var(--ivory);
    font-family:var(--body);
    overflow-x:hidden;
    background-image:
        radial-gradient(circle at 10% 0%, rgba(205,164,62,.09), transparent 42%),
        radial-gradient(circle at 90% 25%, rgba(205,164,62,.05), transparent 45%);
}
img, svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--obsidian); }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* -------------------- utility classes used by JS templates -------------------- */
.text-gold-gradient{
    background:linear-gradient(115deg,#fff 10%, var(--gold-bright) 45%, var(--gold-deep) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.glass-card{ background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(20px); }
.gold-border{ border:1px solid var(--line); }
.gold-glow{ box-shadow:0 25px 60px rgba(205,164,62,.14); }
.bg-radial-gold{ background:radial-gradient(circle at top, rgba(205,164,62,.10), transparent 55%); }
.animate-marquee{ display:flex; gap:3rem; animation:marquee 22s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* -------------------- Buttons (foil-sweep signature) -------------------- */
.btn-primary, .btn-outline{
    position:relative;
    display:inline-block;
    text-align:center;
    padding:14px 26px;
    border-radius:2px;
    font-family:var(--body);
    font-weight:700;
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:transform .25s, box-shadow .25s;
    overflow:hidden;
}
.btn-primary{ background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#000; border:1px solid var(--gold); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(205,164,62,.5); }
.btn-outline{ background:transparent; color:var(--gold-bright); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--gold); background:rgba(205,164,62,.07); }
.btn-primary::after, .btn-outline::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}
.btn-primary:hover::after, .btn-outline:hover::after{ left:130%; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
nav{
    position:relative; display:flex; align-items:center; justify-content:space-between;
    padding:16px 5vw; z-index:50;
}
.logo-link{ display:flex; align-items:center; gap:10px; }
.logo{ width:34px; height:34px; object-fit:contain; border-radius:50%; }
.logo-text{
    font-family:var(--display); font-weight:800; font-size:1.5rem;
    letter-spacing:.04em; line-height:1;
}
.nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:60; }
.nav-toggle span{ width:24px; height:2px; background:var(--gold); transition:.3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

nav ul{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:rgba(11,10,8,.98); border-left:1px solid var(--line);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:40px; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.65,0,.35,1);
}
nav ul.open{ transform:translateX(0); }
nav ul li a{ font-size:.95rem; letter-spacing:.1em; font-weight:600; color:var(--smoke); }
nav ul li a.active, nav ul li a:hover{ color:var(--gold-bright); }

.nav-cart-btn{
    position:relative; background:none; border:1px solid var(--line);
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.nav-cart-btn svg{ width:17px; height:17px; stroke:var(--gold); fill:none; }
#cart-count{
    position:absolute; top:-6px; right:-6px; background:var(--gold); color:#000;
    font-family:var(--mono); font-size:.62rem; font-weight:700;
    width:17px; height:17px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
@media (min-width:900px){
    .nav-toggle{ display:none; }
    nav ul{
        position:static; height:auto; width:auto; flex-direction:row; align-items:center;
        background:none; border:none; padding:0; gap:34px; transform:none;
    }
    nav ul li a{ font-size:.78rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
header#hero{ position:relative; }
.overlay{ background:linear-gradient(180deg, rgba(11,10,8,.15), rgba(11,10,8,.92) 92%); }
.hero-container{
    display:flex; flex-direction:column-reverse; gap:34px;
    padding:20px 5vw 56px; max-width:var(--max); margin:0 auto;
}
.tagline{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:14px; }
.tagline .line{ width:30px; height:1px; background:var(--gold); }
.tag-text{ font-family:var(--mono); font-size:.68rem; letter-spacing:.32em; color:var(--gold); text-transform:uppercase; }

.hero-text{ text-align:center; }
.hero-text h1{
    font-family:var(--display); font-weight:800; font-stretch:condensed;
    font-size:clamp(2.6rem, 12vw, 6rem); line-height:.92; letter-spacing:.005em;
    text-transform:uppercase;
}
.hero-text p{
    margin-top:18px; color:var(--smoke); font-size:.95rem; line-height:1.75;
    max-width:460px; margin-left:auto; margin-right:auto; font-family:var(--body);
}
.hero-btns{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.hero-features{
    display:flex; flex-direction:column; gap:9px; align-items:center;
    margin-top:28px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--smoke);
}

.hero-image-wrapper{ position:relative; }
.glow-effect{ position:absolute; inset:-15%; background:radial-gradient(circle, rgba(205,164,62,.2), transparent 65%); z-index:0; }
.hero-img{
    position:relative; z-index:1; width:100%; max-height:56vh; object-fit:cover;
    border-radius:var(--radius); border:1px solid var(--line);
}
.scroll-indicator{ display:none; }

@media (min-width:900px){
    .hero-container{ flex-direction:row; align-items:center; min-height:82vh; padding:0 5vw; gap:60px; }
    .hero-text, .tagline, .hero-features{ text-align:left; justify-content:flex-start; }
    .hero-text p{ margin-left:0; }
    .hero-btns{ flex-direction:row; }
    .hero-btns a{ min-width:180px; }
    .hero-features{ flex-direction:row; gap:26px; }
    .hero-img{ max-height:72vh; }
    .scroll-indicator{
        display:block; position:absolute; bottom:26px; left:5vw;
        width:1px; height:50px; background:var(--line); overflow:hidden;
    }
    .scroll-indicator span{ display:block; width:100%; height:14px; background:var(--gold); animation:scrolldown 1.8s ease-in-out infinite; }
    @keyframes scrolldown{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(120px); } }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-bar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#000; padding:13px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:2.5rem; white-space:nowrap; animation:marquee 20s linear infinite; }
.marquee-track span{ font-family:var(--display); font-weight:700; letter-spacing:.08em; color:var(--gold); font-size:.9rem; text-transform:uppercase; }
@media (min-width:768px){ .marquee-track span{ font-size:1.15rem; } }

/* ==========================================================================
   FEATURED / PRODUCT GRID
   ========================================================================== */
.featured, .shop-section{ padding:60px 5vw; }
.section-title{
    display:flex; align-items:center; gap:14px; justify-content:center;
    font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; color:var(--gold);
    margin-bottom:36px; text-transform:uppercase;
}
.section-title span{ width:30px; height:1px; background:var(--gold); }

.products-grid, #featured-products{ display:grid; grid-template-columns:1fr; gap:24px; max-width:var(--max); margin:0 auto; }
@media (min-width:560px){ .products-grid, #featured-products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .products-grid, #featured-products{ grid-template-columns:repeat(3,1fr); gap:30px; } }

.product-card{
    position:relative; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden; transition:.4s;
}
.product-card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 20px 50px rgba(205,164,62,.14); }
.product-image{ position:relative; overflow:hidden; height:280px; }
.product-image img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.product-card:hover .product-image img{ transform:scale(1.06); }

/* the hallmark seal — signature element */
.hallmark{
    position:absolute; top:14px; right:14px; width:52px; height:52px;
    border-radius:50%; z-index:2;
}
.hallmark svg{ width:100%; height:100%; }

.product-info{ padding:20px; }
.product-category{ font-family:var(--mono); color:var(--gold); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:10px; }
.product-title{ font-family:var(--display); font-weight:700; font-size:1.4rem; line-height:1.15; margin-bottom:8px; letter-spacing:.01em; }
.product-description{ color:#a39a89; font-size:.86rem; line-height:1.6; margin-bottom:16px; }
.product-price{ font-family:var(--mono); color:var(--gold-bright); font-size:1.3rem; font-weight:700; margin-bottom:18px; }
.product-actions{ display:flex; flex-direction:column; gap:10px; }
@media (min-width:480px){ .product-actions{ flex-direction:row; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ display:flex; flex-direction:column; gap:28px; padding:70px 5vw; max-width:var(--max); margin:0 auto; }
.about-left h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem, 8vw, 3.2rem); line-height:1.05; text-transform:uppercase; }
.about-right p{ color:var(--smoke); line-height:1.9; font-size:.95rem; }
@media (min-width:900px){ .about{ flex-direction:row; align-items:center; gap:60px; } }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{ padding:70px 5vw; text-align:center; }
.newsletter-content{ max-width:560px; margin:0 auto; }
.newsletter-content h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,7vw,2.4rem); margin-bottom:14px; text-transform:uppercase; }
.newsletter-content p{ color:var(--smoke); margin-bottom:28px; font-size:.92rem; }
.newsletter-form{ display:flex; flex-direction:column; gap:12px; }
.newsletter-form input{ padding:14px 18px; border-radius:2px; border:1px solid var(--line); background:var(--panel); color:var(--ivory); }
.newsletter-form button{ padding:14px; border-radius:2px; border:none; background:var(--gold); color:#000; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
@media (min-width:560px){
    .newsletter-form{ flex-direction:row; }
    .newsletter-form input{ flex:1; }
    .newsletter-form button{ padding:14px 30px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:50px 5vw 40px; text-align:center; border-top:1px solid var(--line); }
.footer-logo{ display:flex; align-items:center; gap:8px; }
.footer-links, .footer-social{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; font-size:.8rem; color:var(--smoke); }
.copyright{ font-family:var(--mono); font-size:.7rem; color:#544d40; }
@media (min-width:900px){ footer{ flex-direction:row; justify-content:space-between; text-align:left; } }

/* ==========================================================================
   PAGE HEADER (shop/cart/checkout/login/register)
   ========================================================================== */
main{ width:100%; min-height:100vh; padding:110px 5vw 60px; }
.page-title{
    text-align:center; font-family:var(--display); font-weight:800; letter-spacing:.01em;
    font-size:clamp(2.2rem, 9vw, 4rem); margin-bottom:14px; text-transform:uppercase;
    background:linear-gradient(115deg,#fff 10%, var(--gold) 90%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-subtitle{ text-align:center; color:var(--smoke); font-size:1rem; margin-bottom:50px; }

/* ==========================================================================
   CART PAGE
   ========================================================================== */
.cart-layout{ display:flex; flex-direction:column; gap:30px; max-width:var(--max); margin:0 auto; }
.cart-list{ display:flex; flex-direction:column; gap:16px; }
.cart-row{ display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.cart-row img{ width:72px; height:72px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.cart-row-info{ flex:1; min-width:0; }
.cart-row-info h4{ font-family:var(--display); font-weight:700; font-size:1.1rem; margin-bottom:4px; }
.cart-row-info p{ color:var(--smoke); font-size:.82rem; }
.cart-row-qty{ display:flex; align-items:center; gap:10px; }
.cart-row-qty button{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--gold); }
.cart-row-price{ font-family:var(--mono); color:var(--gold-bright); font-weight:600; white-space:nowrap; }
.cart-row-remove{ color:#c26a6a; font-size:.75rem; background:none; border:none; text-decoration:underline; }

.cart-summary{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.cart-summary-row{ display:flex; justify-content:space-between; margin-bottom:14px; color:var(--smoke); font-size:.9rem; }
.cart-summary-total{ display:flex; justify-content:space-between; font-size:1.3rem; font-weight:700; margin:18px 0; color:var(--ivory); font-family:var(--display); }
.cart-summary-total span:last-child{ color:var(--gold-bright); }

@media (min-width:900px){
    .cart-layout{ flex-direction:row; align-items:flex-start; }
    .cart-list{ flex:2; }
    .cart-summary{ flex:1; position:sticky; top:110px; }
}

/* ==========================================================================
   CHECKOUT / LOGIN / REGISTER — forms
   ========================================================================== */
.form-card{ max-width:480px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:30px 22px; }
.form-card.wide{ max-width:900px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea{
    width:100%; padding:13px 16px; border-radius:6px; border:1px solid var(--line);
    background:rgba(255,255,255,.02); color:var(--ivory); font-size:.95rem;
}
.form-group input:focus, .form-group textarea:focus{ outline:1px solid var(--gold); }
.form-row{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:600px){ .form-row.two{ flex-direction:row; } .form-row.two .form-group{ flex:1; } }
.form-submit{
    width:100%; padding:15px; border-radius:2px; border:none; background:var(--gold);
    color:#000; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:10px;
    position:relative; overflow:hidden;
}
.form-footnote{ text-align:center; margin-top:20px; font-size:.85rem; color:var(--smoke); }
.form-footnote a{ color:var(--gold-bright); font-weight:600; }

.checkout-grid{ display:flex; flex-direction:column; gap:30px; max-width:var(--max); margin:0 auto; }
@media (min-width:900px){
    .checkout-grid{ flex-direction:row; align-items:flex-start; }
    .checkout-grid .form-card{ flex:2; margin:0; }
    .checkout-grid .cart-summary{ flex:1; position:sticky; top:110px; }
}

/* ==========================================================================
   TOASTS
   ========================================================================== */
#toast-container{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; z-index:999; width:min(90vw, 340px); }

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
#cart-drawer{ position:fixed; inset:0; z-index:200; display:none; }
#cart-drawer.flex{ display:flex; }
.cart-drawer-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.cart-drawer-panel{
    position:relative; margin-left:auto; width:min(92vw, 400px); height:100%;
    background:var(--charcoal); border-left:1px solid var(--line);
    display:flex; flex-direction:column; padding:24px; overflow-y:auto;
}

html, body{ max-width:100%; overflow-x:hidden; }