:root{--accent:#3b739f;--blue:#3b739f;--blue-light:#4f8bb9;--soft:#e3e7f3;--page:#fff;--tile:#f3f4f7;--ink:#16181a;--muted:#6b7075;--line:#e7e8eb;--white:#fff;--sans:"Plus Jakarta Sans", system-ui, sans-serif;--gutter:clamp(16px, 5vw, 72px);--container:1240px;--radius:14px;color:var(--ink);font:16px/1.5 var(--sans)}*{box-sizing:border-box}body{background:var(--page);margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;font-weight:700;line-height:1.15}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600;display:block}.btn{background:var(--white);color:var(--ink);border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-size:14px;font-weight:600;transition:background .2s,color .2s,gap .2s;display:inline-flex}.btn:hover{gap:12px}.btn.solid{background:var(--accent);color:var(--white)}.btn.solid:hover{background:var(--ink)}.btn.outline{border:1px solid var(--ink)}.btn.outline:hover{background:var(--ink);color:var(--white)}.btn.center{width:fit-content;margin:40px auto 0;display:flex}.section{width:min(var(--container), 100% - 2 * var(--gutter));margin:0 auto;padding:48px 0}.section.narrow{max-width:900px}.section h2{font-size:clamp(26px,3vw,32px)}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.page-title{text-align:center;margin-bottom:24px;font-size:36px}.empty{text-align:center;color:var(--muted);margin:48px 0}.header{z-index:10;height:64px;padding:0 max(var(--gutter), (100% - var(--container)) / 2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffeb;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid;position:sticky;top:0}.header-nav{color:var(--muted);gap:24px;font-size:14px;display:flex}.header-nav a{white-space:nowrap;transition:color .2s}.header-nav a:hover,.header-nav a[data-status=active]{color:var(--ink)}.shop-menu{align-items:center;gap:2px;display:flex;position:relative}.shop-toggle{color:var(--muted);padding:2px;display:flex}.shop-dropdown{z-index:11;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:180px;color:var(--ink);margin-top:10px;padding:8px;display:grid;position:absolute;top:100%;left:-16px;box-shadow:0 12px 32px #0000001a}.shop-dropdown:before{content:"";height:12px;position:absolute;inset:-12px 0 auto}.shop-dropdown a{border-radius:8px;padding:8px 12px}.shop-dropdown a:hover{background:var(--tile)}.header-icons{justify-content:flex-end;gap:10px;display:flex}.round-btn{border:1px solid var(--line);background:var(--white);border-radius:50%;place-items:center;width:38px;height:38px;font-size:17px;transition:border-color .2s;display:grid;position:relative}.round-btn:hover{border-color:var(--ink)}.logo{letter-spacing:-.02em;white-space:nowrap;align-items:center;gap:8px;font-size:20px;font-weight:800;display:flex}.logo-mark{color:var(--blue);font-size:22px}.cart-count{background:var(--accent);min-width:18px;color:var(--white);text-align:center;border-radius:9px;padding:0 4px;font-size:11px;font-weight:600;line-height:18px;position:absolute;top:-5px;right:-5px}.footer{background:var(--blue);color:#ffffffd1;margin-top:48px}.footer-inner,.footer-bottom{width:min(var(--container), 100% - 2 * var(--gutter));margin:0 auto;display:block}.footer-inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px 0 40px;display:grid}.footer .logo,.footer .logo-mark,.footer h4{color:var(--white)}.footer-brand p{max-width:300px;margin:16px 0 0;font-size:14px}.footer-col{align-content:start;gap:10px;font-size:14px;display:grid}.footer h4{margin-bottom:6px;font-size:15px}.footer-col a:hover{color:var(--white)}.footer-bottom{border-top:1px solid #fff3;padding:20px 0 28px;font-size:13px}@media (width<=640px){.nav-extra{display:none}.footer-inner{grid-template-columns:1fr 1fr 1fr}.footer-brand{grid-column:1/-1}}@media (width<=480px){.header{gap:8px}.header-nav{gap:14px;font-size:13px}.logo{gap:5px;font-size:16px}.logo-mark{font-size:17px}.header-icons{gap:6px}.round-btn{width:34px;height:34px;font-size:15px}}.hero{background:linear-gradient(180deg, var(--blue), var(--blue-light));min-height:max(560px,min(100vh - 64px,840px));color:var(--white);text-align:center;place-items:center;display:grid;position:relative;overflow:hidden}.hero-collage{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(7,1fr);gap:12px;padding:24px;display:grid;position:absolute;inset:0}.collage-tile{min-width:0;min-height:0}.collage-tile img{object-fit:contain;filter:drop-shadow(0 6px 10px #00000040);width:100%;height:100%}.hero:after{content:"";background:linear-gradient(#18344e8c,#18344ec7);position:absolute;inset:0}.hero-copy{z-index:1;padding:0 var(--gutter);position:relative}.hero-copy h1{letter-spacing:-.035em;margin-bottom:20px;font-size:clamp(42px,6vw,80px);font-weight:700;line-height:1.05}.hero-copy p{opacity:.9;max-width:460px;margin:0 auto 28px;font-size:17px}@media (width<=760px){.hero{min-height:600px}.hero-collage{grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}}.categories{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.category-tile{aspect-ratio:4/3;border-radius:var(--radius);background:var(--tile);display:block;position:relative;overflow:hidden}.category-tile img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;padding:10% 10% 18%;transition:scale .4s}.category-tile:hover img{scale:1.06}.category-label{background:var(--white);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;position:absolute;bottom:12px;left:12px;box-shadow:0 2px 8px #0000000f}.banner{background:var(--blue);color:var(--white);border-radius:20px;grid-template-columns:1.1fr 1fr;display:grid;overflow:hidden}.banner-copy{align-self:center;padding:clamp(32px,5vw,64px)}.banner .eyebrow{color:var(--soft);margin-bottom:14px}.section .banner h2{margin-bottom:16px;font-size:clamp(28px,3.2vw,42px)}.banner p{opacity:.85;max-width:460px;margin:0 0 28px}.banner-media{background:var(--soft);min-height:360px;position:relative}.banner-media img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;padding:7%;position:absolute;inset:0}.features{background:var(--soft);border-radius:20px;grid-template-columns:repeat(4,1fr);gap:20px;padding:24px;display:grid}.feature{align-items:center;gap:14px;display:flex}.feature-icon{background:var(--white);width:44px;height:44px;color:var(--blue);border-radius:12px;flex:none;place-items:center;font-size:20px;display:grid}.feature h4{margin-bottom:2px;font-size:15px}.feature p{color:var(--muted);margin:0;font-size:13px}@media (width<=900px){.categories,.features{grid-template-columns:repeat(2,1fr)}}@media (width<=760px){.banner{grid-template-columns:1fr}.banner-media{min-height:240px}}@media (width<=480px){.categories{gap:12px}.features{grid-template-columns:1fr}}.tabs{background:var(--tile);scrollbar-width:none;border-radius:999px;gap:2px;width:fit-content;max-width:100%;padding:4px;display:flex;overflow-x:auto}.tab{color:var(--muted);border-radius:999px;flex:none;padding:8px 16px;font-size:13px;font-weight:500;transition:background .2s,color .2s}.tab:hover{color:var(--ink)}.tab.active{background:var(--blue);color:var(--white)}.grid{grid-template-columns:repeat(4,1fr);gap:32px 20px;display:grid}.tile{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);display:block;position:relative;overflow:hidden}.tile img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;transition:scale .4s}.card .tile{aspect-ratio:1;margin-bottom:12px;transition:border-color .2s}.card .tile a{height:100%;padding:12%;display:block}.card:hover .tile{border-color:#cfd3d8}.card:hover .tile img{scale:1.05}.quick-add{background:var(--blue);color:var(--white);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:13px;font-weight:600;transition:background .2s,opacity .2s,translate .2s;display:flex;position:absolute;bottom:10px;left:10px;right:10px}.quick-add:hover{background:var(--ink)}@media (hover:hover){.quick-add{opacity:0;translate:0 8px}.card:hover .quick-add,.quick-add:focus-visible{opacity:1;translate:0}}.card-category{color:var(--muted);font-size:12px;display:block}.card-name{margin:2px 0 4px;font-size:15px;font-weight:600;line-height:1.35;display:block}.card-name:hover{color:var(--blue)}.price{font-size:16px;font-weight:700}.search{border:1px solid var(--line);max-width:420px;color:var(--muted);border-radius:999px;align-items:center;gap:10px;margin:0 auto 24px;padding:10px 16px;display:flex}.search input{min-width:0;font:inherit;color:var(--ink);background:0 0;border:0;outline:0;flex:1}.search:focus-within{border-color:var(--accent)}.centered{margin:0 auto 32px}@media (width<=900px){.grid{grid-template-columns:repeat(3,1fr)}}@media (width<=620px){.grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}.quick-add{border-radius:50%;width:38px;height:38px;padding:0;left:auto}.quick-add span{display:none}}.shop{grid-template-columns:240px minmax(0,1fr);align-items:start;gap:40px;display:grid}.shop-sidebar{position:sticky;top:88px}.shop-sidebar h3{margin-bottom:12px;font-size:15px}.shop-cats{gap:2px;display:grid}.shop-cat{color:var(--muted);border-radius:10px;justify-content:space-between;gap:12px;padding:9px 12px;font-size:14px;transition:background .2s,color .2s;display:flex}.shop-cat:hover{background:var(--tile);color:var(--ink)}.shop-cat.active{background:var(--blue);color:var(--white);font-weight:600}.shop-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.shop-head h1{font-size:clamp(26px,3vw,32px)}.shop-count{color:var(--muted);margin:6px 0 0;font-size:14px}.shop-tools{flex-wrap:wrap;gap:10px;display:flex}.shop-tools .search{background:var(--tile);border-color:#0000;width:220px;margin:0;padding:9px 16px}.shop .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.sort{border:1px solid var(--line);background:var(--white);font:inherit;color:var(--ink);cursor:pointer;border-radius:999px;padding:9px 14px;font-size:14px}@media (width<=860px){.shop{grid-template-columns:minmax(0,1fr);gap:24px}.shop-sidebar{position:static}.shop-sidebar h3{display:none}.shop-cats{scrollbar-width:none;gap:8px;display:flex;overflow-x:auto}.shop-cat{border:1px solid var(--line);border-radius:999px;flex:none;gap:8px}.shop-cat.active{border-color:var(--blue)}.shop-tools,.shop-tools .search{width:100%}.shop-tools .search{flex:1;width:auto;min-width:0}.shop .grid{grid-template-columns:repeat(2,1fr)}}.page-banner{padding:clamp(48px, 7vw, 88px) var(--gutter);background:var(--blue);color:var(--white);text-align:center}.page-banner .eyebrow{color:var(--soft);margin-bottom:14px}.page-banner h1{letter-spacing:-.03em;max-width:760px;margin:0 auto;font-size:clamp(32px,4.6vw,56px)}.page-banner p{opacity:.85;max-width:480px;margin:16px auto 0}.about{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,80px);padding-top:72px;display:grid}.about-copy h2{margin-bottom:18px}.about-copy p{color:var(--muted);margin:0 0 16px}.about-copy .btn{margin-top:12px}.about-media{grid-template-columns:1fr 1fr;gap:16px;display:grid}.about-photo{aspect-ratio:3/4;border-radius:var(--radius);background:var(--tile);overflow:hidden}.about-photo.offset{margin-top:48px}.about-photo img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;padding:12%}.values{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.value-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px}.value-card svg{color:var(--blue);font-size:22px}.value-card h3{margin:18px 0 8px;font-size:18px}.value-card p{color:var(--muted);margin:0;font-size:14px}.contact{grid-template-columns:1fr 1.4fr;align-items:start;gap:24px;padding-top:56px;display:grid}.contact-details{gap:12px;display:grid}.contact-item{border-radius:var(--radius);background:var(--tile);align-items:center;gap:14px;padding:16px;display:flex}.contact-icon{background:var(--white);width:40px;height:40px;color:var(--blue);border-radius:10px;flex:none;place-items:center;display:grid}.contact-item small{color:var(--muted);font-size:12px;display:block}.contact-item strong{font-size:15px}.contact-form{border:1px solid var(--line);border-radius:20px;gap:14px;padding:28px;display:grid}.contact-form h3{font-size:18px}.form-row{grid-template-columns:1fr 1fr;gap:14px;display:grid}.contact-form label{gap:6px;font-size:13px;font-weight:500;display:grid}.contact-form input,.contact-form textarea{background:var(--tile);width:100%;font:inherit;color:var(--ink);resize:vertical;border:1px solid #0000;border-radius:10px;outline:0;padding:11px 14px;font-size:14px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue);background:var(--white)}.contact-form .btn{justify-content:center;margin-top:4px}@media (width<=860px){.about,.contact,.values{grid-template-columns:1fr}}@media (width<=480px){.form-row{grid-template-columns:1fr}.contact-form{padding:20px}}.detail{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin-bottom:72px;display:grid}.detail-tile{aspect-ratio:1;padding:10%}.thumbs{gap:8px;margin-top:8px;display:flex}.thumbs button{width:80px;height:80px;padding:8px}.detail-info h1{margin:10px 0 14px;font-size:clamp(28px,3.4vw,40px)}.detail-price{margin:0 0 28px;font-size:22px}.detail-actions{flex-wrap:wrap;gap:12px;display:flex}.stepper{border:1px solid var(--line);align-items:center;display:inline-flex}.stepper button{place-items:center;width:40px;height:44px;display:grid}.stepper button:disabled{opacity:.3;cursor:default}.stepper span{text-align:center;min-width:28px}.line{border-bottom:1px solid var(--line);grid-template-columns:80px 1fr auto 80px auto;align-items:center;gap:16px;padding:16px 0;display:grid}.line-tile{width:80px;height:80px;padding:8px}.line-total{text-align:right}.icon-btn{color:var(--muted);padding:8px;display:flex}.icon-btn:hover{color:var(--ink)}.summary{justify-content:space-between;padding:24px 0;font-size:18px;display:flex}@media (width<=760px){.detail{grid-template-columns:1fr}}@media (width<=560px){.line{grid-template-columns:64px 1fr auto;gap:10px 12px}.line-tile{width:64px;height:64px}.line .stepper{grid-column:2}.line-total{grid-area:1/3}.icon-btn{grid-column:3;justify-self:end}}
