:root { --ink:#f2f4ed; --muted:#89928d; --line:#29302d; --paper:#0b0e0e; --white:#151a19; --accent:#baff18; --lime:#baff18; --lavender:#202a22; --blue:#18231f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; }
.announcement { background:var(--ink); color:#fff; font-size:12px; letter-spacing:.05em; padding:10px 5vw; text-align:center; }
.site-header { align-items:center; background:rgba(11,14,14,.96); border-bottom:1px solid var(--line); display:flex; gap:42px; justify-content:space-between; padding:15px 5vw; position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.brand { align-items:center; display:flex; font-size:18px; gap:10px; letter-spacing:-.04em; white-space:nowrap; }
.brand strong { font-size:22px; font-weight:700; }
.brand-mark { align-items:center; background:var(--accent); border-radius:8px; color:#0b0e0e; display:inline-flex; font-family:"Space Grotesk"; font-size:11px; font-weight:700; height:30px; justify-content:center; letter-spacing:-.08em; transform:rotate(-7deg); width:34px; }
.main-nav { display:flex; gap:28px; margin-left:auto; }
.main-nav a { color:var(--muted); font-size:14px; padding:7px 0; }
.main-nav a.active, .main-nav a:hover { color:var(--ink); }
.main-nav a.active { border-bottom:2px solid var(--accent); color:var(--ink); }
.cart-button { align-items:center; background:var(--white); border:1px solid var(--line); border-radius:999px; color:var(--ink); display:flex; font-size:13px; gap:9px; padding:9px 12px; }
.cart-button b { align-items:center; background:var(--accent); border-radius:50%; color:#0b0e0e; display:flex; font-size:11px; height:19px; justify-content:center; width:19px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.12em; margin:0 0 16px; text-transform:uppercase; }
h1,h2,h3 { font-family:"Space Grotesk",sans-serif; letter-spacing:-.06em; margin:0; }
.primary-button { align-items:center; background:var(--accent); border:0; border-radius:999px; color:#0b0e0e; display:inline-flex; font-size:13px; font-weight:700; gap:28px; padding:15px 18px 15px 21px; transition:.2s; }
.primary-button:hover { background:var(--accent); transform:translateY(-2px); }
.catalog-layout { border-top:1px solid var(--line); display:grid; gap:38px; grid-template-columns:180px 1fr; padding:38px 5vw 58px; }
.filter-heading { display:flex; flex-direction:column; gap:7px; font-family:"Space Grotesk"; font-size:17px; }
.filter-count { color:var(--muted); font-family:"DM Sans"; font-size:12px; }
.category-list { display:flex; flex-direction:column; gap:2px; margin-top:28px; }
.category-list button { background:none; border:0; border-radius:8px; color:var(--muted); padding:10px 12px; text-align:left; }
.category-list button:hover, .category-list button.active { background:var(--white); color:var(--ink); font-weight:700; }
.category-list button.active { box-shadow:0 0 0 1px var(--accent); }
.filter-note { border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.5; margin-top:42px; padding-top:20px; }
.note-icon { color:var(--accent); font-size:20px; }
.filter-note p { margin:8px 0; }.filter-note a { color:var(--ink); text-decoration:underline; }
.products-section { min-width:0; }.section-topline { align-items:end; display:flex; gap:25px; justify-content:space-between; margin-bottom:30px; }
h2 { font-size:30px; }.search-box { align-items:center; background:var(--white); border:1px solid var(--line); border-radius:8px; display:flex; gap:8px; padding:9px 13px; width:220px; }
.search-box span { color:var(--muted); font-size:21px; line-height:0; }.search-box input { background:none; border:0; min-width:0; outline:0; width:100%; }.search-box input::placeholder { color:#aaa8a2; }
.active-filter { color:var(--muted); font-size:12px; margin:-12px 0 20px; }.active-filter button { background:none; border:0; color:var(--accent); margin-left:7px; }
.product-grid { display:grid; gap:20px 14px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.product-card { min-width:0; }.product-image { align-items:center; aspect-ratio:1/1; background:#151a19 !important; border:1px solid var(--line); border-radius:8px; display:flex; justify-content:center; overflow:hidden; position:relative; }
.product-image::after { border:1px solid rgba(186,255,24,.13); border-radius:50%; content:""; height:67%; position:absolute; width:67%; }.product-image > span:not(.product-tag) { font-size:48px; filter:drop-shadow(0 9px 7px rgba(0,0,0,.35)); position:relative; z-index:1; }.product-image .product-tag { background:var(--accent); border-radius:3px; color:#0b0e0e; font-size:9px; font-weight:700; left:8px; letter-spacing:.1em; line-height:1; padding:5px 6px; position:absolute; text-transform:uppercase; top:8px; z-index:3; }
.product-image.has-photo::after { display:none; }.product-image img { height:100%; object-fit:cover; object-position:center 58%; transform:scale(1.25); width:100%; }
.product-meta { padding:10px 1px; }.product-meta h3 { font-size:14px; letter-spacing:-.03em; line-height:1.15; }.product-meta p { color:var(--muted); font-size:11px; margin:5px 0 0; }.product-specs { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }.product-specs span { background:#202823; border:1px solid #303c32; border-radius:3px; color:#b9c2ba; font-size:9px; padding:3px 5px; }.product-price { align-items:center; display:flex; gap:8px; justify-content:space-between; margin-top:9px; }.product-price strong { font-size:13px; }.old-price { color:#677069; font-size:10px; text-decoration:line-through; }.add-button { align-items:center; background:var(--accent); border:0; border-radius:4px; color:#0b0e0e; display:flex; font-size:20px; height:27px; justify-content:center; line-height:1; transition:.2s; width:27px; }.add-button:hover { background:#d1ff54; transform:translateY(-1px); }
.empty-state { padding:80px 0; text-align:center; }.empty-state span { color:var(--accent); font-size:36px; }.empty-state p { color:var(--muted); }
.info-strip { background:#151a19; color:var(--ink); display:grid; gap:35px; grid-template-columns:repeat(3,1fr); padding:50px 8vw; }.info-strip div { border-left:1px solid #39433d; padding-left:20px; }.info-strip span { color:var(--lime); display:block; font-size:12px; margin-bottom:21px; }.info-strip strong { font-family:"Space Grotesk"; font-size:17px; }.info-strip p { color:#9ba69f; font-size:12px; line-height:1.5; max-width:220px; }
.content-section { border-top:1px solid var(--line); padding:70px 8vw; }.content-heading { max-width:570px; }.content-heading > p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.65; margin:17px 0 0; }.steps-grid { display:grid; gap:15px; grid-template-columns:repeat(3,1fr); margin-top:38px; }.steps-grid article { background:var(--white); border:1px solid var(--line); border-radius:8px; min-height:175px; padding:20px; }.steps-grid article > span { color:var(--accent); font-family:"Space Grotesk"; font-size:13px; }.steps-grid h3 { font-size:18px; margin-top:38px; }.steps-grid p { color:var(--muted); font-size:13px; line-height:1.55; margin-bottom:0; }.faq-section { background:#101513; display:grid; gap:65px; grid-template-columns:.75fr 1.25fr; padding:70px 8vw; }.faq-list { border-top:1px solid var(--line); }.faq-list details { border-bottom:1px solid var(--line); padding:18px 0; }.faq-list summary { cursor:pointer; font-family:"Space Grotesk"; font-size:16px; list-style:none; padding-right:30px; position:relative; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:"+"; font-family:"DM Sans"; font-size:22px; position:absolute; right:0; top:-5px; }.faq-list details[open] summary::after { content:"−"; }.faq-list details p { color:var(--muted); font-size:13px; line-height:1.6; margin:15px 30px 0 0; max-width:580px; }
 footer { align-items:center; display:flex; justify-content:space-between; padding:38px 8vw; }.footer-brand { align-items:center; display:flex; flex-wrap:wrap; gap:10px; max-width:300px; }.footer-brand p { color:var(--muted); flex-basis:100%; font-size:12px; margin:3px 0 0 44px; }.footer-contact { display:flex; flex-direction:column; font-size:13px; gap:7px; text-align:right; }.footer-contact span, .footer-contact small { color:var(--muted); }.footer-contact a, .contact-pending { color:var(--accent); font-weight:700; }
.cart-backdrop { background:rgba(32,32,31,.35); inset:0; position:fixed; z-index:20; }.cart-drawer { background:var(--paper); box-shadow:-12px 0 30px rgba(0,0,0,.12); display:flex; flex-direction:column; height:100dvh; max-width:430px; padding:31px; position:fixed; right:0; top:0; transform:translateX(105%); transition:transform .3s ease; width:100%; z-index:21; }.cart-drawer.open { transform:translateX(0); }.drawer-header { align-items:start; display:flex; justify-content:space-between; }.drawer-header h2 { font-size:39px; }.drawer-header button { background:none; border:0; font-size:32px; line-height:1; }.cart-items { flex:1; overflow:auto; padding-top:30px; }.cart-row { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:12px; padding:14px 0; }.cart-row .mini-art { align-items:center; border-radius:8px; display:flex; font-size:25px; height:58px; justify-content:center; width:58px; }.cart-row-info { flex:1; }.cart-row-info strong { font-family:"Space Grotesk"; font-size:14px; }.cart-row-info span { color:var(--muted); display:block; font-size:12px; margin-top:4px; }.qty { align-items:center; display:flex; gap:9px; }.qty button { background:none; border:1px solid var(--line); border-radius:50%; height:24px; width:24px; }.cart-footer { border-top:1px solid var(--line); padding-top:20px; }.cart-footer > div { align-items:center; display:flex; justify-content:space-between; margin-bottom:20px; }.cart-footer span { color:var(--muted); font-size:13px; }.cart-footer strong { font-family:"Space Grotesk"; font-size:23px; }.cart-footer .primary-button { justify-content:space-between; width:100%; }.cart-footer small { color:var(--muted); display:block; font-size:11px; margin-top:12px; text-align:center; }
@media (max-width:1200px) and (min-width:851px) { .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:850px) { .main-nav { display:none; }.catalog-layout { gap:35px; grid-template-columns:1fr; padding:35px 7vw 50px; }.filters { display:flex; flex-wrap:wrap; justify-content:space-between; }.category-list { flex-direction:row; flex-wrap:wrap; margin-top:18px; width:100%; }.filter-note { display:none; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.info-strip { grid-template-columns:1fr; padding:40px 7vw; }.info-strip div { padding-left:15px; }.content-section { padding:60px 7vw; }.steps-grid, .faq-section { grid-template-columns:1fr; }.faq-section { gap:35px; padding:60px 7vw; } footer { align-items:flex-start; flex-direction:column; gap:25px; padding:35px 7vw; }.footer-contact { text-align:left; } }
@media (max-width:480px) { .site-header { padding:15px 5vw; }.cart-button span:not(.cart-icon) { display:none; }.section-topline { align-items:start; flex-direction:column; }.search-box { width:100%; }.product-grid { gap:20px 12px; }.product-meta h3 { font-size:14px; } }