/* Header */
.site-header {
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(17, 24, 39, 0.05);
    box-shadow: 0 4px 18px rgba(17, 24, 39, 0.035);
}
.header-container { display:flex; justify-content:space-between; align-items:center; height:96px; }
.brand .logo-link { display:flex; align-items:center; }
.brand-logo { width:172px; height:auto; max-height:62px; object-fit:contain; display:block; }
.desktop-nav .nav-links { display:flex; gap:2.5rem; }
.nav-links a { font-weight:600; font-size:.95rem; position:relative; padding-bottom:.25rem; }
.nav-links a:hover,.nav-links a.active { color:var(--color-primary); }
.nav-links a.active::after { content:''; position:absolute; bottom:-8px; left:0; width:100%; height:3px; background:var(--color-primary); border-radius:2px; }
.header-actions { display:flex; align-items:center; gap:1.5rem; }
.cart-icon { position:relative; display:flex; align-items:center; }
.cart-badge { position:absolute; top:-8px; right:-8px; background:var(--color-primary); color:#fff; font-size:.7rem; font-weight:700; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.mobile-menu-toggle { display:none; width:30px; height:24px; position:relative; }

/* Hero */
.hero { padding:2rem 0 2.25rem; background:linear-gradient(to right,#fff 50%,#f9fafb 50%); }
.hero-container {
    display:grid;
    grid-template-columns:4fr 6fr;
    grid-template-areas:
        "intro image"
        "support image"
        "actions image"
        "reviews image";
    column-gap:3rem;
    align-items:center;
}
.hero-intro { grid-area:intro; align-self:end; }
.hero-support { grid-area:support; }
.hero-actions { grid-area:actions; }
.reviews-row { grid-area:reviews; }
.hero-image-area { grid-area:image; }
.eyebrow { color:var(--color-primary); font-family:var(--font-family); font-weight:800; font-size:.95rem; letter-spacing:.065em; display:block; margin-bottom:.6rem; text-transform:uppercase; }
.hero-title { font-size:4rem; font-weight:800; line-height:1.08; margin-bottom:1.4rem; letter-spacing:-1px; }
.title-line { display:block; white-space:nowrap; }
.title-shirt { color:var(--color-primary); }
.hero-subtitle { font-size:1.1rem; color:var(--color-text-light); margin-bottom:2rem; line-height:1.6; }
.trust-icons { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; margin-bottom:2.1rem; }
.trust-item { display:flex; align-items:center; gap:1rem; }
.icon-holder { width:48px; height:48px; background:#fff; border:1px solid var(--color-border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--color-text-main); flex:0 0 48px; }
.trust-item span { font-size:.9rem; font-weight:600; line-height:1.3; }
.hero-actions { display:flex; gap:1rem; margin-bottom:2rem; }
.hero-primary-cta { border-radius:9px; box-shadow:0 9px 20px rgba(230,48,32,.18); font-weight:700; }
.hero-primary-cta:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(230,48,32,.24); }
.hero-secondary-cta { border-radius:9px; font-weight:700; }
.reviews-row { display:flex; align-items:center; gap:1rem; }
.stars { display:flex; gap:2px; }
.review-text { font-size:.9rem; color:var(--color-text-light); }
.review-text strong { color:var(--color-text-main); }
.hero-image-area { position:relative; width:100%; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.hero-image-placeholder { width:100%; height:100%; background:var(--color-bg-gray); border-radius:12px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; position:relative; }
.hero-image-placeholder::before,.hero-image-placeholder::after { content:''; position:absolute; top:0; bottom:0; width:15%; z-index:2; pointer-events:none; }
.hero-image-placeholder::before { left:0; background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,0)); }
.hero-image-placeholder::after { right:0; background:linear-gradient(to left,rgba(255,255,255,.9),rgba(255,255,255,0)); }
.hero-image { width:100%; height:100%; object-fit:cover; object-position:center center; }
.slider-btn { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--color-text-main); box-shadow:0 4px 10px rgba(0,0,0,.1); z-index:10; }
.slider-btn.prev-btn { left:-24px; }
.slider-btn.next-btn { right:-24px; }

/* Colors */
.colors-section { padding:2rem 2rem 4rem; background:#fff; text-align:center; }
.section-header { margin-bottom:3rem; }
.section-header h2 { font-size:2rem; font-weight:800; margin-bottom:.5rem; }
.section-header p { color:var(--color-text-light); font-size:1.1rem; }
.carousel-wrapper { position:relative; display:flex; align-items:center; margin-bottom:2.5rem; }
.color-carousel { display:flex; gap:.75rem; overflow-x:auto; scroll-behavior:smooth; padding:1rem 5px; -ms-overflow-style:none; scrollbar-width:none; width:100%; }
.color-carousel::-webkit-scrollbar { display:none; }
.carousel-nav-btn { flex-shrink:0; width:48px; height:48px; background:#fff; border:1px solid var(--color-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-text-main); z-index:10; transition:all .2s; }
.carousel-nav-btn:hover { background:var(--color-bg-light); box-shadow:0 4px 6px rgba(0,0,0,.05); }
.carousel-nav-btn.prev { margin-right:1rem; }
.carousel-nav-btn.next { margin-left:1rem; }
.color-card { width:110px; flex:0 0 110px; border:1px solid var(--color-border); border-radius:10px; overflow:hidden; background:#fff; transition:transform .2s,box-shadow .2s; cursor:pointer; }
.color-card:hover { transform:translateY(-5px); box-shadow:0 8px 12px rgba(0,0,0,.05); }
.color-card.active { border-color:#000; box-shadow:0 8px 16px rgba(0,0,0,.1); }
.card-image-area { height:130px; background:var(--color-bg-gray); position:relative; }
.card-image-area img { width:100%; height:100%; object-fit:cover; object-position:center; }
.card-info { padding:.5rem; text-align:center; }
.color-name { font-weight:700; font-size:.75rem; text-transform:uppercase; margin-bottom:.15rem; }
.color-hex,.color-sku { font-size:.7rem; color:var(--color-text-light); margin-bottom:.15rem; }
.color-sku { margin-bottom:.5rem; }
.color-specs { font-size:.7rem; color:var(--color-text-main); line-height:1.3; padding-top:.5rem; border-top:1px solid var(--color-border); }
.carousel-dots { display:flex; justify-content:center; gap:.5rem; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--color-border); cursor:pointer; transition:background-color .2s; }
.dot.active { background:var(--color-primary); }

/* Feature strip */
.feature-strip { background:var(--color-bg-gray); padding:3rem 0; margin-top:2rem; margin-bottom:4rem; border-radius:20px; max-width:var(--max-width); margin-left:auto; margin-right:auto; width:calc(100% - 4rem); }
.feature-container { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding:0; }
.feature-block { display:flex; flex-direction:column; align-items:center; text-align:center; }
.feature-icon-wrapper { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.feature-text h3 { font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.feature-text p { font-size:.85rem; color:var(--color-text-light); }

/* Mobile overlay */
.mobile-nav-overlay { position:fixed; top:96px; left:0; width:100%; height:calc(100vh - 96px); background:#fff; z-index:99; transform:translateX(100%); transition:transform .3s ease-in-out; padding:2rem; display:flex; flex-direction:column; }
.mobile-nav-overlay.active { transform:translateX(0); }
.mobile-nav-links { display:flex; flex-direction:column; gap:1.5rem; }
.mobile-nav-links a { font-size:1.25rem; font-weight:600; }
.mobile-nav-links a.active { color:var(--color-primary); }