:root{--navy:#071d55;--navy2:#0b2f76;--blue:#1699e8;--gold:#d8a313;--text:#0b1d4d;--muted:#52647e;--line:#dbe8f4;--green:#178351;--red:#b23a43;--shadow:0 8px 24px rgba(8,32,79,.075)}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:#ecf3fb}body{margin:0;background:#ecf3fb;font-family:Arial,Helvetica,sans-serif;color:var(--text);font-size:16px}button,input{font:inherit}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1f99e7;outline-offset:3px}
.app{max-width:980px;min-height:100vh;margin:auto;background:white;box-shadow:0 0 55px rgba(10,33,80,.06)}
.hero{color:#fff;padding:25px 20px 27px;background:linear-gradient(130deg,#06194d,#0a317c 65%,#08225d);position:relative;overflow:hidden}.hero::after{content:"";position:absolute;border:14px solid rgba(216,163,19,.53);width:260px;height:260px;border-radius:50%;top:-150px;right:-90px}.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}.hero-text{min-width:0}.hero .eyebrow{font-weight:700;letter-spacing:.16em;font-size:.69rem;color:#e9c667;margin-bottom:7px}.hero h1{font-size:clamp(28px,6vw,40px);font-family:Georgia,serif;letter-spacing:-.8px;line-height:1.02;margin:0}.hero h1 span{color:#f4c33b}.hero p{font-size:clamp(15px,2vw,18px);margin:9px 0 0;color:#e7eefb}.logo{object-fit:cover;border-radius:50%;background:white;border:2px solid #d7aa2c;width:100px;height:100px;flex:none}
.searchwrap{position:sticky;top:0;z-index:5;padding:12px 17px;background:rgba(255,255,255,.98);box-shadow:0 3px 13px rgba(10,36,85,.07)}.searchbox{display:flex;gap:10px;align-items:center;color:#50657a;border:1px solid #ccddeb;border-radius:16px;padding:0 12px;background:white;min-height:49px}.searchbox input{border:0;outline:0;width:100%;height:47px;font-size:16px;background:transparent;color:var(--text)}.searchbox:focus-within{border-color:#1699e8;box-shadow:0 0 0 3px rgba(22,153,232,.12)}
.main{padding:16px 18px 35px;min-height:60vh}.intro{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:15px}.intro h2{font-family:Georgia,serif;font-size:clamp(25px,5vw,33px);margin:4px 0 4px;line-height:1.18}.intro p{color:var(--muted);font-size:14px;margin:5px 0}.count{color:var(--navy2);font-weight:800;font-size:.82rem;white-space:nowrap;margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tile{min-width:0;text-align:left;position:relative;background:linear-gradient(142deg,#fff,#f2f8ff);border:1px solid var(--line);padding:14px;border-radius:19px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}.tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,32,79,.11)}.tile-name{font-size:clamp(15px,2.3vw,23px);overflow-wrap:anywhere;font-weight:800;line-height:1.16;margin:8px 0 7px}.tile-small{color:var(--muted);font-size:13px}.tile-image{height:130px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border-radius:10px;background:#fff}.tile-image>img{width:100%;height:100%;object-fit:contain}.tile-image.stack{gap:0}.tile-image.stack>img{height:100%;width:33%;object-fit:contain}.tile-image img:only-child{max-width:100%}.chev{font-size:22px;float:right;color:#168bcf;font-weight:bold}
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px}.crumb{background:transparent;color:var(--navy2);font-weight:700;padding:5px 0;border:0;text-decoration:underline;text-underline-offset:3px}.back{background:transparent;border:0;color:#0b80c2;padding:4px 0 12px;font-weight:800;text-align:left}.brand-heading{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#eff8ff,#fff);border:1px solid var(--line);padding:10px;border-radius:16px;margin-bottom:16px}.brand-heading img{width:90px;height:86px;object-fit:contain;background:white;border-radius:9px}.brand-heading h2{font-family:Georgia,serif;margin:0;font-size:28px}.brand-heading p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:7px;margin:8px 0 16px;scrollbar-width:thin}.tab{flex:none;border:1px solid #cddfee;border-radius:999px;background:white;color:var(--navy2);padding:9px 13px;font-weight:700;font-size:13px}.tab.active{background:var(--navy2);color:white;border-color:var(--navy2)}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product{min-width:0;border:1px solid var(--line);border-radius:19px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.product-photo{height:clamp(175px,25vw,245px);background:linear-gradient(180deg,#f5fbff,#fff);padding:9px;display:flex;align-items:center;justify-content:center}.product-photo img{max-width:100%;max-height:100%;height:100%;width:100%;object-fit:contain}.pbody{padding:12px;flex:1;display:flex;flex-direction:column}.brandline{color:#477094;font-size:12px;font-weight:800;margin-bottom:5px}.pname{font-weight:800;font-size:clamp(13px,2vw,17px);line-height:1.3;overflow-wrap:anywhere;min-height:38px}.price{font-weight:900;font-size:clamp(19px,3.3vw,26px);color:var(--navy2);padding-top:9px;margin-top:auto}.status{display:inline-flex;align-self:start;align-items:center;gap:4px;font-size:12px;font-weight:800;color:#187c4f;background:#ebf8f1;padding:5px 8px;border-radius:8px;margin:9px 0 11px}.status.out{color:#a33139;background:#fff1f1}.order{display:block;border:0;background:#188f54;color:white;padding:11px 7px;border-radius:12px;text-align:center;font-size:13px;font-weight:800;text-decoration:none}.order.disabled{background:#e5e8ed;color:#657083;cursor:not-allowed}
.empty{border:1px dashed #b5cddd;padding:20px;border-radius:16px;color:var(--muted);text-align:center}.footer{padding:18px;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.footer a{display:block;font-weight:bold;color:var(--navy2);margin-top:8px}.loading{padding:30px;color:var(--muted);text-align:center}
@media(min-width:730px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.main{padding:22px 24px 40px}.hero{padding:28px 27px}.tile-image{height:170px}}
@media(max-width:390px){.hero{padding:20px 15px}.hero h1{font-size:29px}.logo{width:80px;height:80px}.main{padding:13px 10px 30px}.searchwrap{padding:10px}.products,.cards{gap:9px}.pbody{padding:9px}.product-photo{height:177px}.tile{padding:10px}.tile-image{height:104px}.tile-name{font-size:14px}.order{font-size:12px}.price{font-size:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}