/* Optika Vista — design tokens ported 1:1 from the Claude Design source (Optika Vista.dc.html) */
:root{
  --ink: oklch(22% 0.015 255);
  --muted: oklch(46% 0.02 255);
  --bg: oklch(97% 0.008 70);
  --border: oklch(89% 0.008 70);
  --border-light: oklch(93% 0.006 70);
  --accent: oklch(58% 0.13 230);
  --accent-bg: oklch(93% 0.03 230);
  --accent-bg-soft: oklch(95% 0.03 230);
  --warm: oklch(58% 0.13 45);
  --warm-bg: oklch(93% 0.03 45);
  --warm-ink: oklch(20% 0.02 45);
  --footer-bg: oklch(22% 0.015 255);
  --footer-text: oklch(85% 0.01 255);
  --footer-border: oklch(32% 0.01 255);
  --footer-muted: oklch(60% 0.01 255);
  --legal-text: oklch(30% 0.015 255);
  --stripe-a: oklch(93% 0.01 230);
  --font-display: 'Space Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Public Sans', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);min-height:100vh;line-height:1.5;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
img{max-width:100%;display:block;}
input,textarea,select{font-family:var(--font-body);}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* Cookie banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);color:#fff;padding:16px 24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.cookie-banner p{max-width:640px;font-size:14px;line-height:1.5;margin:0;}
.cookie-banner a{color:oklch(70% 0.1 45);text-decoration:underline;}
.cookie-banner button{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--border);}
.site-header .wrap{padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.logo{cursor:pointer;font-family:var(--font-display);font-size:22px;font-weight:700;display:flex;align-items:baseline;gap:4px;}
.logo span.accent{color:var(--accent);}
.main-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;font-weight:500;}
.main-nav a{cursor:pointer;color:var(--ink);}
.main-nav a.active{color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:14px;}
.cart-btn{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--font-body);}
.cart-badge{background:var(--warm);color:#fff;border-radius:50%;min-width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cart-badge[hidden]{display:none;}

/* Buttons */
.btn{display:inline-block;border:none;padding:14px 24px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-body);text-align:center;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--border);}
.btn-cta{background:var(--warm);color:var(--warm-ink);}
.btn-block{width:100%;}
.btn-small{padding:9px;font-size:13px;border-radius:6px;background:var(--ink);color:#fff;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* Hero */
.hero{max-width:var(--wrap);margin:0 auto;padding:72px 24px 56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;align-items:center;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;color:var(--accent);margin-bottom:14px;}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 18px;}
.hero p.lead{font-size:17px;line-height:1.6;color:var(--muted);max-width:480px;margin:0 0 28px;}
.hero-media, .media-frame{aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--border);}
.hero-media img, .media-frame img{width:100%;height:100%;object-fit:cover;}

/* Strip / stats */
.stat-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat-strip .wrap{padding:28px 24px;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;font-size:14px;font-weight:600;color:var(--muted);}

/* Sections */
.section{max-width:var(--wrap);margin:0 auto;padding:64px 24px;}
.section-alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section h2{font-size:30px;margin:0 0 8px;}
.section-lead{color:var(--muted);margin:0 0 32px;font-size:15px;}
.section-head-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;flex-wrap:wrap;gap:10px;}
.link-more{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent);}

/* Card grids */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.grid-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;font-size:14px;line-height:1.6;color:var(--muted);}

.feature-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;}
.feature-icon{width:40px;height:40px;border-radius:8px;margin-bottom:14px;}
.feature-icon.blue{background:var(--accent-bg);}
.feature-icon.warm{background:var(--warm-bg);}
.feature-card h3{font-size:17px;margin:0 0 8px;}
.feature-card p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 12px;}
.feature-card a{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent);}

/* Product cards */
.product-card{border:1px solid var(--border);border-radius:12px;padding:18px;background:var(--bg);display:flex;flex-direction:column;}
.product-card.on-white{background:#fff;}
.product-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;margin-bottom:12px;background:var(--stripe-a);}
.product-thumb img{width:100%;height:100%;object-fit:cover;}
.product-card h4{font-size:14px;margin:0 0 4px;}
.product-card p.desc{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 10px;flex:1;}
.product-price{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:10px;}
.product-card.on-white h4{font-size:15px;}
.product-card.on-white .product-price{font-size:16px;}

/* Testimonials */
.testimonial{background:var(--bg);border-radius:12px;padding:22px;font-size:14px;line-height:1.6;}
.testimonial-author{margin-top:12px;font-weight:600;color:var(--muted);font-size:13px;}

/* Blog */
.blog-card{cursor:pointer;border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;}
.blog-card.has-image{padding:0;overflow:hidden;}
.blog-card .blog-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--stripe-a);}
.blog-card .blog-thumb img{width:100%;height:100%;object-fit:cover;}
.blog-card .blog-body{padding:20px;}
.blog-card.has-image .blog-body{padding:16px 20px 20px;}
.blog-date{font-size:12px;color:var(--muted);margin-bottom:8px;}
.blog-card h3, .blog-card h4{font-size:16px;margin:0 0 8px;}
.blog-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 12px;}
.read-more{font-size:13px;font-weight:600;color:var(--accent);}

/* CTA band */
.cta-band{background:var(--ink);color:#fff;}
.cta-band .wrap{padding:56px 24px;text-align:center;}
.cta-band h2{font-size:28px;margin:0 0 14px;}
.cta-band p{color:oklch(80% 0.01 255);margin:0 0 24px;font-size:15px;}

/* Page hero (inner pages) */
.page-main{max-width:var(--wrap);margin:0 auto;padding:56px 24px 80px;}
.page-main h1{font-size:34px;margin:0 0 8px;}
.page-main > p.page-lead{color:var(--muted);margin:0 0 28px;font-size:15px;max-width:640px;}

/* Shop */
.category-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;}
.category-tabs button{border:1px solid var(--border);padding:9px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);font-family:var(--font-body);}
.category-tabs button.active{background:var(--accent);color:#fff;}
.grid-shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}

/* Services */
.service-card{border:1px solid var(--border);border-radius:12px;padding:22px;background:#fff;}
.service-card h3{font-size:16px;margin:0 0 8px;}
.service-card p{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 10px;}
.service-price{font-weight:700;color:var(--accent);}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:56px;}
.step-num{font-family:var(--font-display);font-size:22px;color:var(--accent);margin-bottom:6px;}
.step-label{font-size:14px;font-weight:600;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:760px;}
.faq-item{border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;}
.faq-q{cursor:pointer;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;background:none;border:none;width:100%;text-align:left;font-family:var(--font-body);color:var(--ink);}
.faq-a{padding:0 18px 16px;font-size:13px;color:var(--muted);line-height:1.6;display:none;}
.faq-item.open .faq-a{display:block;}

/* About */
.about-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:36px;align-items:center;margin-bottom:56px;}
.about-hero p{font-size:15px;line-height:1.7;color:var(--muted);margin:0;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:56px;}
.team-card{border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;}
.team-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:14px;background:var(--accent-bg);}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-card h4{font-size:15px;margin:0 0 2px;}
.team-role{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:8px;}
.team-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:0;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:36px;}
.info-card{border:1px solid var(--border);border-radius:12px;padding:24px;background:#fff;margin-bottom:20px;font-size:14px;line-height:1.7;}
.info-card h3{font-size:16px;margin:0 0 12px;}
.hours-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-light);}
.hours-row:last-child{border-bottom:none;}
.map-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-top:20px;background:var(--stripe-a);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;}
.contact-form-card{border:1px solid var(--border);border-radius:12px;padding:28px;background:#fff;}
.form-field{padding:11px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px;width:100%;}
.form-stack{display:flex;flex-direction:column;gap:14px;}
.form-note{font-size:12px;color:var(--muted);margin:0;}
.form-success{padding:20px;background:var(--accent-bg-soft);border-radius:10px;font-size:14px;}

/* Legal */
.legal-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;}
.legal-nav{display:flex;flex-direction:column;gap:6px;}
.legal-nav a{text-align:left;background:#fff;color:var(--ink);border:1px solid var(--border);padding:12px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.legal-nav a.active{background:var(--accent);color:#fff;}
.legal-content{border:1px solid var(--border);border-radius:12px;padding:28px;background:#fff;}
.legal-content h2{font-size:22px;margin:0 0 20px;}
.legal-content p{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--legal-text);}
.legal-content p:last-child{margin-bottom:0;}

/* Blog post */
.post-main{max-width:760px;margin:0 auto;padding:56px 24px 80px;}
.post-back{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent);}
.post-date{font-size:12px;color:var(--muted);margin:20px 0 8px;}
.post-title{font-size:30px;margin:0 0 24px;}
.post-image{aspect-ratio:16/8;border-radius:12px;overflow:hidden;margin-bottom:28px;background:var(--stripe-a);}
.post-image img{width:100%;height:100%;object-fit:cover;}
.post-body{font-size:15px;line-height:1.75;color:oklch(30% 0.015 255);display:flex;flex-direction:column;gap:16px;}
.post-body p{margin:0;}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-text);}
.footer-grid{max-width:var(--wrap);margin:0 auto;padding:48px 24px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;}
.footer-brand{font-family:var(--font-display);font-size:19px;font-weight:700;color:#fff;margin-bottom:12px;}
.footer-grid p{font-size:13px;line-height:1.6;margin:0;}
.footer-col-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;}
.footer-links{display:flex;flex-direction:column;gap:8px;font-size:13px;}
.footer-links a{cursor:pointer;}
.footer-links a:hover{color:#fff;}
.footer-bottom{max-width:var(--wrap);margin:0 auto;padding:16px 24px;border-top:1px solid var(--footer-border);font-size:12px;color:var(--footer-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* Cart drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:150;display:none;}
.cart-overlay.open{display:block;}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(380px,100%);background:#fff;z-index:151;box-shadow:-8px 0 30px rgba(0,0,0,0.15);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.cart-drawer-head h3{font-size:17px;}
.cart-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);}
.cart-lines{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px;}
.cart-empty{font-size:14px;color:var(--muted);text-align:center;margin-top:40px;}
.cart-line{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--border-light);padding-bottom:12px;}
.cart-line-thumb{width:52px;height:52px;border-radius:6px;background:var(--accent-bg);flex-shrink:0;overflow:hidden;}
.cart-line-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-line-info{flex:1;}
.cart-line-name{font-size:13px;font-weight:600;margin-bottom:4px;}
.cart-line-price{font-size:12px;color:var(--muted);}
.qty-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.qty-btn{width:22px;height:22px;border:1px solid var(--border);background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;}
.cart-line-total{font-size:13px;font-weight:700;}
.cart-drawer-foot{padding:20px 22px;border-top:1px solid var(--border);}
.cart-total-row{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:14px;}

/* Order page */
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;}
.order-summary{border:1px solid var(--border);border-radius:12px;padding:24px;background:#fff;}
.order-line{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid var(--border-light);}
.order-total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;padding-top:14px;}

@media (max-width: 760px){
  .hero, .about-hero, .contact-grid, .order-grid{grid-template-columns:1fr;}
  .legal-layout{grid-template-columns:1fr;}
  .legal-nav{flex-direction:row;flex-wrap:wrap;}
  .hero h1{font-size:32px;}
  .section h2{font-size:24px;}
}