@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root { --navy:#10234d; --blue:#2563eb; --cyan:#18c5d8; --yellow:#ffd54a; --coral:#ff7465; --paper:#f7f9ff; --ink:#18233e; --line:#dce5f5; --muted:#65708a; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }
.topline { background:var(--navy); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.04em; }
.topline .shell { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; }
.header { position:sticky; z-index:10; top:0; background:rgba(247,249,255,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.nav { min-height:76px; display:flex; align-items:center; gap:2rem; }
.brand { font:800 clamp(1.7rem,3vw,2.1rem)/1 'Outfit',sans-serif; letter-spacing:-.09em; color:var(--navy); }
.brand i { color:var(--coral); font-style:normal; }
.navlinks { display:flex; gap:1.3rem; margin-left:1rem; font-size:.9rem; font-weight:700; color:#43506c; }
.navlinks a:hover,.navlinks a.active { color:var(--blue); }
.navactions { display:flex; align-items:center; gap:.7rem; margin-left:auto; }
.iconbtn { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--navy); font-size:1.15rem; cursor:pointer; }
.bag { position:relative; background:var(--navy); color:#fff; border-color:var(--navy); }
.bag b { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; display:grid; place-items:center; border-radius:999px; background:var(--coral); color:#fff; font-size:.66rem; }
.menu { display:none; }
.mobilemenu { display:none; border-top:1px solid var(--line); padding:0 20px 14px; background:#fff; }
.mobilemenu.open { display:grid; gap:.8rem; }
.mobilemenu a { font-weight:700; color:#42506b; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; color:var(--blue); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.eyebrow:before { content:''; width:26px; height:3px; border-radius:99px; background:var(--coral); }
h1,h2,h3 { font-family:'Outfit',sans-serif; color:var(--navy); margin:0; letter-spacing:-.04em; }
h1 { font-size:clamp(2.8rem,6vw,5.5rem); line-height:.96; }
h2 { font-size:clamp(2rem,4vw,3.35rem); line-height:1; }
h3 { font-size:1.2rem; }
p { line-height:1.6; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:0 1.2rem; border:0; border-radius:13px; font-weight:800; cursor:pointer; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(16,35,77,.16); }
.primary { background:var(--blue); color:#fff; }
.yellow { background:var(--yellow); color:var(--navy); }
.outline { border:1px solid var(--line); background:#fff; color:var(--navy); }
.section { padding:84px 0; }
.sectionhead { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:30px; }
.sectionhead > a { color:var(--blue); font-weight:800; }
.hero { overflow:hidden; position:relative; background:linear-gradient(125deg,#e4f9ff 0%,#e9edff 52%,#fff6c9 100%); }
.hero .shell { min-height:590px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:3rem; }
.hero p { max-width:530px; font-size:1.06rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.badge { display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .7rem; border-radius:999px; background:#fff; box-shadow:0 8px 18px rgba(17,38,85,.08); color:var(--navy); font-size:.78rem; font-weight:800; }
.hero-visual { position:relative; min-height:470px; }
.hero-blob { position:absolute; width:82%; aspect-ratio:1; top:5%; right:0; border-radius:50% 42% 54% 44%; background:var(--cyan); transform:rotate(15deg); }
.hero-photo { position:absolute; width:66%; height:74%; right:13%; top:12%; object-fit:cover; border:10px solid #fff; border-radius:32px; box-shadow:22px 25px 0 var(--yellow); }
.floatcard { position:absolute; left:0; bottom:8%; max-width:205px; padding:1rem; border-radius:18px; background:#fff; box-shadow:0 16px 35px rgba(16,35,77,.17); }
.floatcard b { display:block; font-family:'Outfit'; font-size:1.1rem; color:var(--navy); }
.floatcard span { color:var(--coral); font-weight:800; font-size:.84rem; }
.strip { overflow:hidden; background:var(--navy); color:#fff; }
.stripin { display:flex; white-space:nowrap; justify-content:center; gap:2.5rem; padding:.9rem 1rem; font-weight:800; font-size:.85rem; }
.stripin span:before { content:'✦'; margin-right:2.5rem; color:var(--yellow); }
.categories { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.category { position:relative; min-height:195px; overflow:hidden; display:flex; align-items:end; padding:1.4rem; border-radius:22px; color:#fff; background:var(--navy); }
.category img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.58; transition:.35s transform; }
.category:hover img { transform:scale(1.06); }
.category span { position:relative; font:700 1.55rem/1 'Outfit'; }
.category span:after { content:' →'; color:var(--yellow); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product { display:flex; flex-direction:column; padding:12px; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.2s transform,.2s box-shadow; }
.product:hover { transform:translateY(-4px); box-shadow:0 18px 28px rgba(16,35,77,.1); }
.product-image { display:grid; place-items:center; aspect-ratio:1/1; overflow:hidden; border-radius:12px; background:#eff5ff; }
.product-image img { width:100%; height:100%; object-fit:cover; }
.product-placeholder { width:100%; height:100%; display:grid; place-items:center; align-content:center; gap:.45rem; background:linear-gradient(135deg,#e2fbfc,#e9edff 58%,#fff4bd); color:var(--navy); text-align:center; }
.product-placeholder b { display:grid; place-items:center; width:60px; height:60px; border-radius:18px; background:var(--yellow); font:2.1rem/1 'Outfit'; box-shadow:6px 6px 0 var(--coral); }
.product-placeholder small { font-size:.72rem; font-weight:800; letter-spacing:.08em; line-height:1.4; }
.catalog-note { margin:1.15rem 0 0; padding-top:1rem; border-top:1px solid var(--line); font-size:.76rem; }
.product-taxonomy { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:12px; }.tag,.brand-tag { width:max-content; padding:.27rem .5rem; border-radius:6px; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.tag { background:#e2fbfc; color:#007a91; }.brand-tag { background:#eef0ff; color:#354bb0; }
.product h3 { margin-top:.6rem; font-size:1.02rem; }
.product-subcategory { margin:.3rem 0 0; color:#6b7690; font-size:.76rem; font-weight:700; }
.price { display:flex; align-items:baseline; gap:.45rem; margin-top:auto; padding-top:.8rem; font-weight:800; color:var(--navy); }
.price strong { font:700 1.25rem 'Outfit'; }.price del { color:#98a3b9; font-size:.78rem; }
.product .button { margin-top:.8rem; min-height:40px; font-size:.82rem; }
.promo { display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border-radius:26px; background:var(--coral); color:#fff; }
.promo-copy { padding:clamp(2rem,5vw,4rem); }.promo h2 { color:#fff; max-width:12ch; }.promo p { color:#fff; max-width:42ch; }.promo-image { min-height:320px; background:url('https://images.unsplash.com/photo-1496181133206-80ce9b88a853?auto=format&fit=crop&w=1000&q=85') center/cover; }
.footer { padding:58px 0 28px; background:var(--navy); color:#fff; }.footer .brand,.footer h3 { color:#fff; }.footergrid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:2rem; }.footer p,.footer a { color:#b7c6e7; }.footer a { display:block; margin-top:.6rem; font-size:.9rem; }.footer a:hover { color:var(--yellow); }.subfooter { margin-top:45px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); color:#b7c6e7; font-size:.75rem; }
.pagehero { padding:66px 0 42px; background:linear-gradient(120deg,#e9edff,#e2fbfc); }.pagehero p { max-width:590px; }.crumb { margin-bottom:1rem; color:var(--blue); font-size:.82rem; font-weight:800; }
.catalog { display:grid; grid-template-columns:230px 1fr; gap:32px; }.filters { align-self:start; padding:1.2rem; border:1px solid var(--line); border-radius:16px; background:#fff; }.filters h3 { margin-bottom:1rem; }.filter { padding:1rem 0; border-top:1px solid var(--line); }.filter label { display:flex; justify-content:space-between; gap:.6rem; margin:.5rem 0; font-size:.86rem; color:#52607a; }.filter small { color:#95a0b5; }.filter input { accent-color:var(--blue); }.search input { width:100%; min-height:42px; padding:0 .7rem; border:1px solid var(--line); border-radius:9px; background:#fbfcff; font:inherit; }.clear-filters { width:100%; padding:.55rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--blue); font:700 .78rem 'Outfit'; cursor:pointer; }.active-filters { display:flex; flex-wrap:wrap; gap:.5rem; min-height:0; margin:-.2rem 0 1.15rem; }.filter-chip { padding:.35rem .55rem; border:0; border-radius:999px; background:#eef0ff; color:#354bb0; font:700 .72rem 'Outfit'; cursor:pointer; }.empty-catalog { grid-column:1/-1; padding:3rem 1rem; border:1px dashed var(--line); border-radius:16px; text-align:center; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.catalog .product-grid { grid-template-columns:repeat(3,1fr); }
.detail { display:grid; grid-template-columns:1fr .95fr; gap:60px; padding:65px 0 85px; }.detail-image { overflow:hidden; border-radius:24px; background:#e9effe; aspect-ratio:1; }.detail-image img { height:100%; width:100%; object-fit:cover; }.detail .price strong { font-size:2.1rem; }.bullets { padding:0; list-style:none; }.bullets li { margin:.65rem 0; color:#52607a; }.bullets li:before { content:'✓'; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:.6rem; border-radius:50%; background:#e2fbfc; color:#00889b; font-weight:900; }.quantity { display:flex; align-items:center; gap:.5rem; margin:1.6rem 0; }.quantity button { height:38px; width:38px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--navy); font-size:1.2rem; }.quantity output { width:28px; text-align:center; font-weight:800; }
.twocol { display:grid; grid-template-columns:1.25fr .75fr; gap:34px; padding:55px 0 85px; }.card { padding:1.35rem; border:1px solid var(--line); border-radius:18px; background:#fff; }.cartitem { display:grid; grid-template-columns:94px 1fr auto; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }.cartitem img { width:94px; aspect-ratio:1; border-radius:12px; object-fit:cover; }.cartitem p { margin:.2rem 0; font-size:.86rem; }.summary { position:sticky; top:96px; }.summary h2 { font-size:1.7rem; }.sumrow { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; color:#52607a; }.total { margin-top:.7rem; padding-top:1rem; border-top:1px solid var(--line); font:700 1.35rem 'Outfit'; color:var(--navy); }.wide { width:100%; margin-top:1rem; }.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field { display:grid; gap:.4rem; margin:.8rem 0; font-size:.83rem; font-weight:700; color:#52607a; }.field input { height:46px; padding:0 .8rem; border:1px solid var(--line); border-radius:10px; font:inherit; }.span2 { grid-column:span 2; }.steps { display:flex; gap:.5rem; margin-bottom:1.5rem; }.step { padding:.42rem .65rem; border-radius:999px; background:#eef2fb; color:#6b7690; font-size:.76rem; font-weight:800; }.step.active { background:var(--blue); color:#fff; }.success { margin:68px auto 85px; max-width:750px; padding:clamp(2rem,7vw,5rem); border-radius:28px; text-align:center; background:#fff; border:1px solid var(--line); }.successmark { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 1.4rem; border-radius:50%; background:#dffafb; color:#00889b; font-size:2.3rem; }.orderbox { display:flex; justify-content:space-between; gap:1rem; padding:1rem; margin:1.6rem 0; border-radius:12px; background:#f0f4ff; text-align:left; }.orderbox b { color:var(--navy); }
@media(max-width:850px){ .nav { min-height:67px; gap:.9rem; }.navlinks { display:none; }.menu { display:grid; }.topline .shell { justify-content:center; }.topline .shell span:last-child { display:none; }.hero .shell,.promo,.detail,.twocol { grid-template-columns:1fr; }.hero .shell { padding:52px 0; }.hero-visual { min-height:360px; max-width:500px; width:100%; margin:auto; }.categories { grid-template-columns:1fr; }.product-grid,.catalog .product-grid { grid-template-columns:repeat(2,1fr); }.catalog { grid-template-columns:1fr; }.filters { display:block; }.footergrid { grid-template-columns:1fr 1fr; }.footergrid > div:first-child { grid-column:span 2; }.summary { position:static; }.promo-image { min-height:220px; } }
@media(max-width:480px){ .shell { width:min(100% - 28px,1160px); }.header .shell { width:min(100% - 20px,1160px); }.navactions { gap:.35rem; }.iconbtn { height:36px; width:36px; }.brand { font-size:1.75rem; }.hero-visual { min-height:300px; }.hero-photo { border-width:6px; border-radius:20px; }.floatcard { left:0; bottom:2%; font-size:.8rem; }.product-grid,.catalog .product-grid { gap:10px; }.product { padding:8px; border-radius:14px; }.product h3 { font-size:.88rem; }.product .button { padding:0 .45rem; font-size:.72rem; }.section { padding:56px 0; }.sectionhead { align-items:start; flex-direction:column; }.footergrid { gap:1.25rem; }.cartitem { grid-template-columns:68px 1fr; }.cartitem img { width:68px; }.cartitem > strong { grid-column:2; }.formgrid { grid-template-columns:1fr; }.span2 { grid-column:auto; }.orderbox { flex-direction:column; } }