:root{--navy:#1f3f7a;--red:#e3182d;--teal:#1b7fa8;--bg:#f6f8fc;--ink:#1c2433;--mut:#6b7689;--line:#e3e8f1}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.topbar{background:var(--navy);color:#fff;text-align:center;font-size:13px;padding:6px 10px}
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hrow{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.search{flex:1;display:flex;max-width:620px}.search input{flex:1;border:2px solid var(--navy);border-right:0;border-radius:8px 0 0 8px;padding:10px 14px;font-size:15px}
.search button{background:var(--navy);color:#fff;border:0;border-radius:0 8px 8px 0;padding:0 20px;cursor:pointer}
.cartlink{margin-left:auto;font-weight:600}.count{background:var(--red);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px}
.nav{background:var(--navy)}.nav .wrap{display:flex;gap:4px;overflow-x:auto;white-space:nowrap}.nav a{color:#fff;padding:10px 14px;font-size:14px}.nav a:hover{background:rgba(255,255,255,.12)}
.hero{background:linear-gradient(120deg,var(--navy),var(--teal));color:#fff;border-radius:16px;margin:20px 0;padding:56px 40px}.hero h1{font-size:38px;margin:0 0 8px}.hero p{margin:0 0 20px;opacity:.9}
.btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:8px;padding:12px 26px;font-weight:600;cursor:pointer;font-size:15px}.btn:hover{filter:brightness(1.08)}
.sec{margin:32px 0 14px;font-size:22px;color:var(--navy)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.cats a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;font-size:14px;font-weight:600}.cats img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;transition:box-shadow .15s}.card:hover{box-shadow:0 6px 20px rgba(31,63,122,.12)}
.card-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.card-img img{max-height:100%;object-fit:contain}
.badge{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px}
.card h3{font-size:14px;font-weight:500;margin:10px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.price b{color:var(--navy);font-size:16px}.price s{color:var(--mut);font-size:13px;margin-left:6px}.price.big b{font-size:28px}
.bar{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.bar h1{font-size:24px;margin:0}.bar small{color:var(--mut);font-weight:400}.bar select{padding:8px;border:1px solid var(--line);border-radius:8px}
.pager{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}.pager a{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px}.pager a.on{background:var(--navy);color:#fff}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.gal #main{width:100%;max-height:560px;object-fit:contain}.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.thumbs img{width:68px;height:68px;object-fit:contain;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.info h1{font-size:26px;margin:0 0 10px}.stock.in{color:#14833b}.stock.out{color:var(--red)}.buy{display:flex;gap:10px;margin-top:16px}.buy input{width:72px;padding:10px;border:1px solid var(--line);border-radius:8px}
.desc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}.desc img{max-width:100%}
.cart{width:100%;border-collapse:collapse;background:#fff}.cart th,.cart td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.cart input{width:64px;padding:6px}.total{text-align:right;font-size:18px}.muted{color:var(--mut)}
.footer{margin-top:48px;background:var(--navy);color:#fff;padding:24px 0;text-align:center;font-size:14px}
@media(max-width:760px){.hrow{flex-wrap:wrap;gap:10px}.search{order:3;flex-basis:100%;max-width:none}.pdp{grid-template-columns:1fr}.hero{padding:32px 20px}.hero h1{font-size:26px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.footer{text-align:left;padding:32px 0 0}.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}.footer h4{margin:0 0 10px}.footer a{display:block;color:#dbe4f5;font-size:14px;margin:4px 0}.footer p{font-size:14px;margin:4px 0;color:#dbe4f5}.flogo{background:#fff;border-radius:8px;padding:4px}.copy{text-align:center;border-top:1px solid rgba(255,255,255,.15);margin-top:24px;padding:14px 16px;font-size:13px}
.box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin:20px 0}.page h1,.box h1{margin-top:0}.page p{max-width:80ch}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.co{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}.co-main,.co-sum{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.co h2{font-size:18px;color:var(--navy);margin-top:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fields label{display:flex;flex-direction:column;font-size:13px;font-weight:600;gap:4px}.fields .full,.full{grid-column:1/-1}.fields input,.fields select,.fields textarea{padding:10px;border:1px solid #cdd5e4;border-radius:8px;font:inherit}
.pm{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;cursor:pointer;flex-wrap:wrap}.pm span{color:var(--mut);font-size:13px;flex-basis:100%;margin-left:26px}
.sl{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.sl.tot{font-size:18px;color:var(--navy)}.co-sum .btn{width:100%;margin-top:14px}
.alert{background:#fdecee;color:#9d1020;border:1px solid #f4b6bd;border-radius:10px;padding:12px;margin:12px 0}.ok{background:#e8f7ee;color:#14633a;border:1px solid #b5e3c8;border-radius:10px;padding:12px}.hp{position:absolute;left:-9999px}
@media(max-width:760px){.co,.two,.fgrid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}}