:root { --brand: #1f4e8c; --brand-2: #e8542f; }
body { font-family: "Heebo", system-ui, sans-serif; background: #f6f7f9; color: #1d2733; }
.site-header { background: #fff; position: sticky; top: 0; z-index: 1020; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--brand); font-weight: 700; font-size: 1.3rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--brand); color: #fff; }
.cat-nav .nav-link { color: #374151; padding: .25rem .6rem; font-size: .95rem; }
.cat-nav .nav-link:hover { color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: #163a69; border-color: #163a69; }
.product-card { background: #fff; border: 1px solid #e5e7eb; border-radius: .8rem; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s; }
.product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.product-card .thumb { aspect-ratio: 1; display: grid; place-items: center; background: #fff; padding: 1rem; }
.product-card .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card .body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card .name { font-weight: 500; color: #1d2733; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.price { font-size: 1.35rem; font-weight: 700; color: var(--brand-2); }
.price small { font-size: .8rem; color: #6b7280; font-weight: 400; }
.badge-stock { background: #e6f6ec; color: #137333; font-weight: 500; }
.spec-table th { width: 32%; color: #4b5563; font-weight: 500; background: #f9fafb; }
.gallery-main { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: .8rem; padding: 1rem; }
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: .4rem; padding: .2rem; cursor: pointer; background: #fff; }
.gallery-thumbs img.active { border-color: var(--brand); }
.site-footer { background: #fff; border-top: 1px solid #e5e7eb; color: #4b5563; }
.hero { background: linear-gradient(120deg, var(--brand), #2d6bb9); color: #fff; border-radius: 1rem; padding: 2.5rem 2rem; }
.bo-diff td { vertical-align: top; }
.bo-diff .val { white-space: pre-wrap; }
.spec-group th { background: #e9eef5; color: var(--brand); font-weight: 700; font-size: 1.02rem; }