
:root{--red:#ee3131;--text:#333;--muted:#777;--line:#eee;--bg:#e9e9e9;--orange:#eda56f;--footer:#f4f4f4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text);font-size:16px;line-height:1.55}.site{max-width:1170px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 2px 10px rgba(0,0,0,.18)}.topbar{height:46px;background:var(--red);display:flex;align-items:center;justify-content:flex-end;padding:0 16px}
.search{margin-left:auto;width:270px;background:rgba(255,255,255,.18);height:34px;display:flex;align-items:center;color:#fff;font-size:18px;font-weight:700;padding:0 10px}
.search button{border:0;background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;margin-right:8px;padding:0}
.search input{border:0;outline:0;background:transparent;color:#fff;font-size:18px;width:100%;height:100%;font-weight:700}
.search input::placeholder{color:#fff;opacity:1}.header{display:flex;justify-content:space-between;align-items:center;padding:28px 16px 24px 16px}.brand img{display:block;max-width:160px;height:auto}.tagline{margin-top:2px;color:var(--red);font-weight:700;font-size:18px}.nav{display:flex;gap:0;align-items:center}.nav a{color:#777;text-decoration:none;font-size:18px;padding:18px 28px;border-left:1px solid #eee}.nav a:last-child{border-right:1px solid #eee}.nav a:hover,.nav a.active{color:var(--red)}.hero{border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;min-height:360px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-slide{width:100%;height:360px;background-position:center;background-size:cover;opacity:.95;transition:opacity .35s ease}.hero-text{position:absolute;left:55px;top:78px}.hero h1{margin:0;color:white;font-size:44px;line-height:1.05;text-shadow:0 2px 7px rgba(0,0,0,.28)}.hero p{display:inline-block;margin:8px 0 0;background:rgba(255,255,255,.58);padding:7px 12px;color:white;font-weight:700;font-size:23px;text-shadow:0 1px 5px rgba(0,0,0,.25)}.dots{text-align:center;padding:12px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#777;margin:0 6px}.dot.active{background:#111}.main{padding:34px 16px 46px}.page-title{font-size:46px;font-weight:300;line-height:1.2;margin:0 0 24px;border-bottom:1px solid #eee;padding-bottom:20px}.lead{font-size:20px;color:#555;max-width:840px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}.card{border:1px solid #eee;background:#fff;text-align:center;display:flex;flex-direction:column;min-height:330px}.card-img{height:250px;display:flex;align-items:center;justify-content:center;padding:12px}.card-img img{max-width:100%;max-height:230px;object-fit:contain}.card h3{font-size:20px;margin:0 10px 26px;color:#4a4a4a}.more{margin-top:auto;background:#c9c6c6;color:#fff;text-transform:uppercase;text-decoration:none;font-weight:700;padding:11px 10px;display:block;font-size:18px}.card:hover .more{background:var(--orange)}.category{margin-top:38px}.category h2{font-size:34px;font-weight:300;margin:0 0 4px}.category p{color:#777;margin:0 0 16px}.category-nav{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 8px}.category-nav a{border:1px solid #eee;color:#777;text-decoration:none;padding:9px 14px;background:#fafafa}.category-nav a:hover{color:#fff;background:var(--red);border-color:var(--red)}.about-content{max-width:920px;font-size:18px}.about-content p{margin:0 0 18px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.feature{background:#fafafa;border:1px solid #eee;padding:20px}.feature h3{margin:0 0 8px;color:#444}.footer{background:var(--footer);padding:45px 16px;display:flex;justify-content:space-between;color:#9a9a9a}.footer a{color:#555;text-decoration:none;margin-left:20px}.footer a:hover{color:var(--red)}.notice{padding:16px;background:#fff9ef;border:1px solid #f0c982;margin-top:24px;color:#805000}@media(max-width:900px){.header{display:block}.nav{margin-top:20px;overflow:auto}.nav a{padding:12px 16px}.grid{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:1fr}.page-title{font-size:38px}.hero-text{position:absolute;left:55px;top:78px}.hero h1{font-size:34px}}@media(max-width:520px){.site{margin:0}.topbar{height:46px;background:var(--red);display:flex;align-items:center;justify-content:flex-end;padding:0 16px}.search{margin-left:auto;width:270px;background:rgba(255,255,255,.18);height:34px;display:flex;align-items:center;color:#fff;font-size:18px;font-weight:700;padding:0 10px}.grid{grid-template-columns:1fr}.header{padding:20px 16px}.nav{display:block}.nav a{display:block;border:0;border-top:1px solid #eee}.hero,.hero-slide{width:100%;height:360px;background-position:center;background-size:cover;opacity:.95;transition:opacity .35s ease}.hero h1{font-size:28px}.hero p{font-size:18px}.footer{display:block}.footer nav{margin-top:15px}.footer a{margin:0 14px 0 0}}

.hero-slide{width:100%;height:360px;background-position:center;background-size:cover;opacity:.95;transition:opacity .35s ease}
.product-detail{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:start}
.product-photo{border:1px solid #eee;min-height:420px;display:flex;align-items:center;justify-content:center;padding:22px;background:#fff}
.product-photo img{max-width:100%;max-height:390px;object-fit:contain}
.product-info h1{font-size:44px;font-weight:300;margin:0 0 12px;border-bottom:1px solid #eee;padding-bottom:18px}
.product-info p{font-size:18px;color:#555}
.back-link{display:inline-block;margin-top:18px;color:var(--red);text-decoration:none}
.search-note{font-size:18px;color:#777;margin-top:10px}
.card.hidden{display:none}
@media(max-width:900px){.product-detail{grid-template-columns:1fr}.product-photo{min-height:300px}.search{margin-left:auto;width:270px;background:rgba(255,255,255,.18);height:34px;display:flex;align-items:center;color:#fff;font-size:18px;font-weight:700;padding:0 10px}}

.product-description{font-size:18px;color:#444}
.product-description p{margin:0 0 14px}
.product-description ul{margin:14px 0 18px 24px;padding:0}
.product-description li{margin:4px 0}
.product-meta{border-top:1px solid #eee;margin-top:24px;padding-top:18px;color:#777;font-size:15px}

.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:start}
.contact-card{background:#fafafa;border:1px solid #eee;padding:22px}
.contact-form{border:1px solid #eee;background:#fff;padding:22px}
.contact-form label{display:block;font-weight:700;margin:0 0 12px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #ddd;padding:12px 14px;font:inherit;margin-top:6px;background:#fff}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form button{border:0;background:var(--red);color:#fff;font-weight:700;text-transform:uppercase;padding:13px 24px;cursor:pointer;font-size:16px}
.contact-form button:hover{background:#d82020}
.form-small{font-size:14px;color:#777;font-weight:400!important}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

.product-description a{color:var(--red);text-decoration:none}.product-description a:hover{text-decoration:underline}

.about-hero{height:330px;background-image:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08)),url('../img/about_background.jpg');background-size:cover;background-position:center;margin:-34px -16px 36px;display:flex;align-items:center}
.about-hero-inner{padding:0 55px}
.about-hero h1{margin:0;color:#fff;font-size:52px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.product-description h3{font-size:24px;margin:24px 0 12px}
.product-description ol{margin:14px 0 18px 28px;padding:0}
.product-description ol li{margin:5px 0}
@media(max-width:700px){.about-hero{height:230px}.about-hero-inner{padding:0 24px}.about-hero h1{font-size:38px}}
