:root { --navy:#17324a; --teal:#1695a8; --light:#f5f8fa; --text:#263746; --border:#dce5e9; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--text); background:#fff; }
a { color:inherit; text-decoration:none; }
.container { width:min(1120px,92%); margin:auto; }
header { border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:10; }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-brand { font-weight:800; letter-spacing:.5px; color:var(--navy); }
.nav-links { display:flex; gap:28px; font-size:15px; }
.nav-links a:hover { color:var(--teal); }
.hero { padding:70px 0 75px; background:linear-gradient(180deg,#fff 0%,#f6fafb 100%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:55px; }
.logo { width:100%; max-width:560px; display:block; margin:auto; }
h1 { font-size:clamp(38px,5vw,62px); line-height:1.02; margin:0 0 22px; color:var(--navy); letter-spacing:-1.5px; }
h1 span { color:var(--teal); }
.hero p { font-size:20px; line-height:1.6; margin:0 0 30px; max-width:590px; }
.buttons { display:flex; gap:14px; flex-wrap:wrap; }
.btn { display:inline-block; padding:14px 22px; border-radius:5px; font-weight:700; border:2px solid var(--navy); }
.btn-primary { background:var(--navy); color:white; }
.btn-primary:hover { background:var(--teal); border-color:var(--teal); }
.btn-secondary { color:var(--navy); background:white; }
section { padding:70px 0; }
.section-title { text-align:center; margin-bottom:42px; }
.section-title h2 { font-size:34px; color:var(--navy); margin:0 0 10px; }
.section-title p { margin:0; font-size:17px; color:#63727d; }
.categories { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { border:1px solid var(--border); border-radius:10px; padding:28px 22px; text-align:center; background:#fff; transition:.2s; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(23,50,74,.08); }
.icon { font-size:38px; margin-bottom:15px; }
.card h3 { margin:0 0 8px; color:var(--navy); font-size:20px; }
.card p { margin:0; line-height:1.5; color:#667781; font-size:14px; }
.section-title h1 { font-size:42px; color:var(--navy); margin:0 0 10px; letter-spacing:-1px; }
.shop-categories { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:42px; }
.shop-products { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.split { background:var(--light); }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.split h2 { color:var(--navy); font-size:36px; margin-top:0; }
.split p { font-size:17px; line-height:1.7; }
.features { display:grid; gap:15px; }
.feature { background:#fff; border:1px solid var(--border); padding:18px 20px; border-radius:7px; }
.feature strong { color:var(--navy); display:block; margin-bottom:5px; }
.cta { text-align:center; background:var(--navy); color:white; }
.cta h2 { font-size:36px; margin:0 0 12px; }
.cta p { font-size:17px; margin:0 auto 25px; max-width:650px; color:#dce7ec; }
.cta .btn { border-color:white; background:white; color:var(--navy); }
footer { padding:28px 0; text-align:center; color:#74838c; font-size:14px; border-top:1px solid var(--border); }
@media(max-width:800px) { .hero-grid,.split-grid { grid-template-columns:1fr; } .hero { padding-top:45px; } .categories { grid-template-columns:repeat(2,1fr); } .shop-categories { grid-template-columns:repeat(2,1fr); } .shop-products { grid-template-columns:repeat(2,1fr); } .nav-links { display:none; } }
@media(max-width:500px) { .categories,.shop-categories,.shop-products { grid-template-columns:1fr; } h1 { font-size:40px; } .section-title h1 { font-size:34px; } section { padding:52px 0; } }

/* ---------- About page ---------- */
.about-hero { padding:0; }
.about-hero img { width:100%; height:460px; object-fit:cover; display:block; }
.intro-grid { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.portrait { margin:0; }
.portrait img { width:100%; border-radius:10px; display:block; border:1px solid var(--border); }
.portrait figcaption { margin-top:12px; font-size:14px; color:#74838c; text-align:center; }
.intro-copy p { font-size:17px; line-height:1.75; margin:0 0 20px; }
.intro-copy .lede-text { font-size:21px; line-height:1.6; color:var(--navy); font-weight:700; }
.contact-email a { color:var(--teal); font-weight:700; font-size:17px; }
.contact-form { display:grid; gap:4px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:26px; }
.contact-form label { font-size:14px; font-weight:700; color:var(--navy); margin-top:12px; }
.contact-form input, .contact-form textarea { font-family:inherit; font-size:15px; padding:11px; border:1px solid var(--border); border-radius:5px; width:100%; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--teal); outline-offset:1px; }
.contact-form .btn { margin-top:20px; cursor:pointer; }
.contact-form .hp { position:absolute; left:-9999px; }
.form-note { padding:14px 16px; border-radius:6px; margin-bottom:18px; font-size:15px; }
.form-note.ok { background:#e6f4f6; color:#0f5f6b; border:1px solid #9fd3dc; }
.form-note.err { background:#fdecec; color:#8a2323; border:1px solid #f0b4b4; }
@media(max-width:800px) {
  .intro-grid { grid-template-columns:1fr; gap:32px; }
  .portrait { max-width:300px; margin:0 auto; }
  .about-hero img { height:260px; }
}
footer a { color:var(--teal); }
footer a:hover { text-decoration:underline; }

/* ---------- Product cards ---------- */
.product-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.product-gallery { background:var(--light); }
.product-main { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in; }
.product-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:6px; background:var(--light); }
.thumb { padding:0; border:2px solid transparent; border-radius:5px; background:#fff; cursor:pointer; overflow:hidden; line-height:0; }
.thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.thumb.is-active { border-color:var(--teal); }
.thumb:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
.product-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.product-body h3 { margin:0 0 8px; color:var(--navy); font-size:19px; }
.product-body p { margin:0 0 14px; font-size:14px; line-height:1.55; color:#667781; }
.product-specs { list-style:none; margin:0 0 16px; padding:0; font-size:13px; color:#74838c; }
.product-specs li { padding:4px 0; border-bottom:1px solid var(--border); }
.product-price { font-size:24px; font-weight:700; color:var(--navy) !important; margin:0 0 16px !important; }
.product-card .btn { margin-top:auto; text-align:center; cursor:pointer; }
.empty-note { grid-column:1/-1; text-align:center; color:#74838c; padding:40px 0; }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; background:rgba(23,50,74,.92); display:none; align-items:center; justify-content:center; z-index:9999; padding:40px; cursor:zoom-out; }
.lightbox.is-open { display:flex; }
.lightbox img { max-width:100%; max-height:100%; border-radius:6px; }
.lightbox-close { position:absolute; top:18px; right:24px; background:none; border:0; color:#fff; font-size:38px; line-height:1; cursor:pointer; }
.cart-btn { background:var(--navy); color:#fff; border:0; border-radius:5px; padding:9px 16px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; }
.cart-btn:hover { background:var(--teal); }

.nav-brand a { display:block; }
.nav-brand img { height:150px; width:auto; display:block; }
.nav-brand a:hover { opacity:.8; }