:root {
    --color-main: #024434;
    --color-main-dark: #013429;
    --color-main-soft: #e9f4f1;
    --color-text: #17312b;
    --color-muted: #61756f;
    --color-bg: #ffffff;
    --color-soft: #f7fbfa;
    --color-border: #d9e8e3;
    --shadow-soft: 0 20px 60px rgba(2, 68, 52, 0.08);
    --radius-lg: 24px;
    --radius-md: 18px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--color-text); background: var(--color-bg); }
.site-header { background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.shop-brand, .nav-link { color: var(--color-main); font-weight: 700; }
.nav-link:hover { color: var(--color-main-dark); }
.section-block { scroll-margin-top: 90px; }
.hero-section { background: linear-gradient(180deg, #fff 0%, #f6fbf9 100%); }
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 800; line-height: 1.1; margin: 16px 0; }
.hero-copy p, .section-head p, .product-body p, .contact-row span { color: var(--color-muted); }
.hero-badge { display:inline-block; background: var(--color-main-soft); color: var(--color-main); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; }
.hero-slider, .product-card, .review-card, .contact-card, .custom-modal .modal-content, .empty-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); }
.slider-img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-lg); }
.bg-soft { background: var(--color-soft); }
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 8px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.product-card { overflow:hidden; display:flex; flex-direction:column; }
.product-img { width:100%; height:220px; object-fit:cover; background:#eef5f3; }
.product-body { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3 { font-size:1.1rem; margin:0; font-weight:700; }
.price-line { display:flex; align-items:center; gap:10px; margin-top:auto; flex-wrap:wrap; }
.price-line strong { font-size:1.25rem; color:var(--color-main); }
.old-price { text-decoration:line-through; color:#a0a9a6; }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.review-grid-modal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.review-card { padding:20px; }
.review-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.review-top span { color:#e0a100; font-weight:700; }
.review-img { width:100%; height:180px; object-fit:cover; border-radius:16px; margin-top:10px; }
.contact-card { padding:22px; }
.contact-row { display:flex; flex-direction:column; gap:5px; padding:14px 0; border-bottom:1px solid var(--color-border); }
.contact-row:last-child { border-bottom:none; }
.map-box iframe { width:100%; min-height:320px; border:0; border-radius:var(--radius-lg); }
.btn-main { background: var(--color-main); border-color: var(--color-main); color:#fff; }
.btn-main:hover { background: var(--color-main-dark); border-color: var(--color-main-dark); color:#fff; }
.btn-outline-main { border:1px solid var(--color-main); color:var(--color-main); background:#fff; }
.btn-outline-main:hover { background:var(--color-main); color:#fff; }
.form-control, .form-select, textarea.form-control { min-height:50px; border-radius:14px; border-color:var(--color-border); }
textarea.form-control { min-height:120px; }
.form-control:focus, .form-select:focus { border-color:var(--color-main); box-shadow:0 0 0 .2rem rgba(2,68,52,.1); }
.offcanvas { border-left:1px solid var(--color-border); }
.cart-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px; border:1px solid var(--color-border); border-radius:16px; }
.empty-box { display:flex; align-items:center; justify-content:center; color:var(--color-muted); min-height:120px; text-align:center; }
@media (max-width: 1199.98px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) {
    .slider-img { height: 260px; }
    .product-grid, .review-grid, .review-grid-modal { grid-template-columns:1fr; }
}