* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; color: #1a1a2e; background: #fff; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
input, select, textarea, button { font-family: inherit; outline: none; }
:root { --primary: #16a34a; --primary-dark: #15803d; --primary-light: #bbf7d0; --secondary: #0d1b2a; --accent: #f59e0b; --dark: #0a0f1a; --gray-100: #f8fafc; --gray-200: #e2e8f0; --gray-400: #94a3b8; --gray-600: #475569; --gray-800: #1e293b; --white: #fff; --red: #ef4444; --shadow: 0 4px 20px rgba(0,0,0,0.08); --shadow-lg: 0 10px 40px rgba(0,0,0,0.15); --radius: 12px; --radius-sm: 6px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.topbar { background: var(--dark); color: var(--gray-400); font-size: .78rem; padding: 8px 0; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.topbar-left, .topbar-right { display: flex; gap: 20px; align-items: center; }
.topbar-left span, .topbar-right a { display: flex; align-items: center; gap: 6px; }
.topbar-right a { color: var(--gray-400); transition: color .2s; }
.topbar-right a:hover { color: var(--primary); }
.topbar-left i, .topbar-right i { color: var(--primary); }
.main-header { background: var(--secondary); padding: 16px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 20px rgba(0,0,0,.3); }
.header-inner { display: flex; align-items: center; gap: 24px; }
.logo a { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 44px; height: 44px; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; }
.logo-main { font-family: Oswald, sans-serif; font-size: 1.3rem; color: #fff; letter-spacing: 1px; line-height: 1; }
.logo-sub { font-size: .65rem; color: var(--primary); letter-spacing: 2px; text-transform: uppercase; }
.header-search { flex: 1; max-width: 480px; }
.header-search form { display: flex; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; }
.header-search input { flex: 1; background: none; border: none; padding: 10px 16px; color: #fff; font-size: .9rem; }
.header-search input::placeholder { color: rgba(255,255,255,.4); }
.header-search button { background: var(--primary); border: none; padding: 10px 18px; color: #fff; cursor: pointer; transition: background .2s; }
.header-search button:hover { background: var(--primary-dark); }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cart-btn { display: flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; transition: all .2s; }
.cart-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.cart-badge { background: var(--accent); color: #000; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.cart-total { font-size: .9rem; }
.mobile-menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 1.1rem; }
.main-nav { background: var(--dark); border-top: 2px solid var(--primary); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; }
.nav-links > li { position: relative; }
.nav-links a { display: flex; align-items: center; gap: 6px; padding: 14px 18px; color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 500; transition: all .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.has-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--secondary); min-width: 220px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border-top: 2px solid var(--primary); z-index: 100; padding: 8px 0; }
.dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: .875rem; }
.dropdown-menu a:hover { background: rgba(22,163,74,.1); color: var(--primary); }
.nav-trust { display: flex; gap: 20px; }
.nav-trust span { color: var(--gray-400); font-size: .78rem; display: flex; align-items: center; gap: 5px; }
.nav-trust i { color: var(--primary); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; border: 2px solid transparent; transition: all .2s; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(22,163,74,.3); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--primary); border-color: #fff; }
.btn-white:hover { background: var(--primary-light); }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-sm { padding: 7px 16px; font-size: .82rem; }
.btn-full { width: 100%; justify-content: center; }
.mt-10 { margin-top: 10px; }

.hero { min-height: 560px; position: relative; overflow: hidden; }
.hero-slide { min-height: 560px; display: flex; align-items: center; }
.hero-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 60px 0; width: 100%; }
.hero-text { flex: 1; max-width: 600px; }
.hero-badge { display: inline-block; background: rgba(22,163,74,.15); border: 1px solid var(--primary); color: var(--primary); padding: 6px 16px; border-radius: 50px; font-size: .82rem; font-weight: 600; margin-bottom: 20px; }
.hero-text h1 { font-family: Oswald, sans-serif; font-size: 2.8rem; color: #fff; line-height: 1.15; margin-bottom: 16px; }
.hero-text h1 .highlight { color: var(--primary); }
.hero-text p { color: rgba(255,255,255,.75); font-size: 1.05rem; margin-bottom: 28px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 32px; }
.hero-stats .stat { text-align: center; }
.hero-stats .stat span { display: block; font-size: 1.8rem; font-weight: 800; color: var(--primary); font-family: Oswald, sans-serif; }
.hero-stats .stat small { color: rgba(255,255,255,.6); font-size: .78rem; }
.hero-image { flex-shrink: 0; }
.hero-product-card { background: rgba(255,255,255,.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 28px; text-align: center; min-width: 220px; }
.hero-product-icon { font-size: 3rem; color: var(--primary); margin-bottom: 12px; }
.hero-product-card h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.hero-product-card .stars { color: var(--accent); margin-bottom: 8px; }
.hero-product-card p { color: rgba(255,255,255,.7); font-size: .9rem; margin-bottom: 16px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floating { animation: float 4s ease-in-out infinite; }
.trust-bar { background: var(--primary); padding: 12px 0; }
.trust-bar-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 12px; }
.trust-bar .trust-item { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .82rem; font-weight: 500; }
.section { padding: 70px 0; }
.bg-light { background: var(--gray-100); }
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag { display: inline-block; background: var(--primary-light); color: var(--primary-dark); padding: 4px 14px; border-radius: 50px; font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.section-header h2 { font-family: Oswald, sans-serif; font-size: 2.2rem; color: var(--secondary); margin-bottom: 10px; }
.divider { width: 60px; height: 3px; background: var(--primary); margin: 10px auto; border-radius: 2px; }
.section-header p { color: var(--gray-600); max-width: 550px; margin: 10px auto 0; }
.section-cta { text-align: center; margin-top: 40px; }
.categories-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
.category-card { background: var(--gray-100); border-radius: var(--radius); padding: 28px 20px; text-align: center; transition: all .3s; border: 2px solid transparent; position: relative; overflow: hidden; cursor: pointer; display: block; }
.category-card:hover { border-color: var(--primary); background: #fff; transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.category-icon { font-size: 2.5rem; margin-bottom: 14px; display: block; }
.category-info h3 { font-size: .95rem; font-weight: 700; color: var(--secondary); margin-bottom: 4px; }
.category-info p { font-size: .78rem; color: var(--gray-400); margin-bottom: 10px; }
.category-link { color: var(--primary); font-size: .82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; }
.products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.products-grid.three-col { grid-template-columns: repeat(3,1fr); }
.products-grid.four-col { grid-template-columns: repeat(4,1fr); }
.product-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all .3s; position: relative; border: 1px solid var(--gray-200); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; }
.product-badge.badge-red { background: var(--red); }
.product-image { position: relative; background: var(--gray-100); height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-img-placeholder i { font-size: 4rem; color: var(--primary); opacity: .3; transition: all .3s; }
.product-card:hover .product-img-placeholder i { opacity: .6; transform: scale(1.1); }
.product-actions { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(10px); transition: all .3s; }
.product-card:hover .product-actions { opacity: 1; transform: translateX(0); }
.action-btn { width: 36px; height: 36px; background: #fff; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.1); color: var(--gray-600); transition: all .2s; font-size: .85rem; }
.action-btn:hover { background: var(--primary); color: #fff; }
.product-info { padding: 18px; }
.product-cat { font-size: .72rem; color: var(--primary); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.product-info h3 { font-size: .95rem; font-weight: 700; color: var(--secondary); margin: 6px 0 8px; line-height: 1.4; }
.product-info h3 a:hover { color: var(--primary); }
.product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stars { color: var(--accent); font-size: .85rem; }
.product-rating span { font-size: .75rem; color: var(--gray-400); }
.product-price { margin-bottom: 14px; }
.product-price .price { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.product-price .price-range { font-size: .9rem; color: var(--gray-400); }
.promo-banner { padding: 0; }
.promo-inner { display: grid; grid-template-columns: 1fr 1fr; }
.promo-card { padding: 50px 40px; display: flex; align-items: center; gap: 24px; }
.promo-green { background: linear-gradient(135deg,#0d3d2e,#16a34a); }
.promo-dark { background: linear-gradient(135deg,#0a1628,#1e3a5f); }
.promo-icon { font-size: 3.5rem; color: rgba(255,255,255,.3); flex-shrink: 0; }
.promo-text h3 { font-family: Oswald, sans-serif; font-size: 1.5rem; color: #fff; margin-bottom: 8px; }
.promo-text p { color: rgba(255,255,255,.75); font-size: .9rem; margin-bottom: 16px; }
.why-us { background: var(--secondary); }
.why-us .section-header h2 { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.why-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 30px 24px; text-align: center; transition: all .3s; }
.why-card:hover { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.3); transform: translateY(-4px); }
.why-icon { width: 60px; height: 60px; background: rgba(22,163,74,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.4rem; color: var(--primary); }
.why-card h3 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.why-card p { color: rgba(255,255,255,.55); font-size: .875rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial-card { background: var(--gray-100); border-radius: var(--radius); padding: 28px; border: 1px solid var(--gray-200); }
.testimonial-stars { color: var(--accent); font-size: 1.1rem; margin-bottom: 12px; }
.testimonial-card p { color: var(--gray-600); font-size: .9rem; line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.testimonial-author strong { display: block; font-size: .9rem; }
.testimonial-author small { color: var(--gray-400); font-size: .78rem; }

.page-header { background: linear-gradient(135deg,var(--dark) 0%,var(--secondary) 100%); padding: 40px 0; border-bottom: 3px solid var(--primary); }
.page-header h1 { font-family: Oswald, sans-serif; font-size: 2rem; color: #fff; margin-bottom: 8px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.5); }
.breadcrumb a { color: rgba(255,255,255,.5); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size: .65rem; }
.breadcrumb span { color: var(--primary); }
.shop-layout { padding: 40px 0; }
.shop-inner { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.shop-sidebar { position: sticky; top: 90px; }
.sidebar-widget { background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 24px; margin-bottom: 20px; }
.sidebar-widget h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--secondary); padding-bottom: 10px; border-bottom: 2px solid var(--gray-200); }
.sidebar-cats li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: .875rem; color: var(--gray-600); transition: color .2s; }
.sidebar-cats li a:hover,.sidebar-cats li a.active { color: var(--primary); font-weight: 600; }
.sidebar-cats li a span { background: var(--gray-100); color: var(--gray-400); font-size: .72rem; padding: 2px 8px; border-radius: 50px; }
.sidebar-cats li a.active span { background: var(--primary-light); color: var(--primary-dark); }
.sidebar-search { display: flex; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.sidebar-search input { flex: 1; border: none; padding: 9px 12px; font-size: .875rem; }
.sidebar-search button { background: var(--primary); border: none; padding: 9px 14px; color: #fff; cursor: pointer; }
.sidebar-promo { background: linear-gradient(135deg,#0d3d2e,#16a34a) !important; border: none !important; color: #fff; }
.sidebar-promo h3 { color: #fff !important; border-bottom-color: rgba(255,255,255,.2) !important; }
.promo-mini { text-align: center; }
.promo-mini-icon { font-size: 2.5rem; margin-bottom: 10px; }
.promo-mini p { font-size: .875rem; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.results-count { color: var(--gray-600); font-size: .875rem; }
.sort-bar { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.sort-bar select { border: 1px solid var(--gray-200); border-radius: 6px; padding: 6px 12px; font-size: .875rem; cursor: pointer; }
.no-products { text-align: center; padding: 60px 20px; color: var(--gray-400); }
.no-products i { font-size: 3rem; margin-bottom: 16px; }
.no-products h3 { font-size: 1.3rem; color: var(--gray-600); margin-bottom: 8px; }
.product-detail { padding: 40px 0; }
.product-detail-grid { display: grid; grid-template-columns: 420px 1fr; gap: 48px; margin-bottom: 48px; }
.product-main-img { background: var(--gray-100); border-radius: var(--radius); height: 360px; display: flex; align-items: center; justify-content: center; position: relative; border: 2px solid var(--gray-200); }
.product-main-img i { font-size: 7rem; color: var(--primary); opacity: .35; }
.product-badge-lg { position: absolute; top: 16px; left: 16px; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: 50px; font-size: .8rem; font-weight: 700; }
.product-trust-mini { display: flex; gap: 12px; margin-top: 14px; justify-content: center; }
.product-trust-mini span { font-size: .75rem; color: var(--gray-400); display: flex; align-items: center; gap: 4px; }
.product-trust-mini i { color: var(--primary); }
.product-cat-label { font-size: .75rem; color: var(--primary); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.product-detail-info h1 { font-size: 1.7rem; font-weight: 800; color: var(--secondary); margin: 8px 0 14px; line-height: 1.3; }
.product-rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stars-lg { color: var(--accent); font-size: 1.2rem; }
.product-rating-row span { font-size: .875rem; color: var(--gray-600); }
.in-stock { color: var(--primary); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.product-price-lg { font-size: 2rem; font-weight: 900; color: var(--primary); margin-bottom: 16px; }
.product-price-lg span { font-size: 1.3rem; color: var(--gray-400); }
.product-desc { color: var(--gray-600); font-size: .9rem; line-height: 1.7; margin-bottom: 24px; }
.add-to-cart-form { margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-option { border: 2px solid var(--gray-200); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all .2s; }
.size-option input { display: none; }
.size-option:hover,.size-option.selected { border-color: var(--primary); background: rgba(22,163,74,.05); }
.size-label { font-size: .85rem; font-weight: 600; display: block; }
.size-price { font-size: .8rem; color: var(--primary); }
.qty-group { display: flex; align-items: center; gap: 16px; }
.qty-group label { margin-bottom: 0; white-space: nowrap; }
.qty-control { display: flex; align-items: center; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.qty-btn { background: var(--gray-100); border: none; padding: 8px 14px; cursor: pointer; font-size: 1rem; color: var(--gray-600); transition: background .2s; }
.qty-btn:hover { background: var(--primary); color: #fff; }
.qty-control input { border: none; width: 55px; text-align: center; font-size: .95rem; font-weight: 600; padding: 8px 0; }
.product-features { background: var(--gray-100); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 16px; }
.product-features h4 { font-size: .9rem; font-weight: 700; margin-bottom: 10px; }
.product-features ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.product-features li { font-size: .82rem; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.product-features li i { color: var(--primary); }
.product-meta p { font-size: .82rem; color: var(--gray-600); margin-bottom: 4px; }
.product-meta a { color: var(--primary); }
.product-tabs { margin-bottom: 48px; }
.tabs-nav { display: flex; border-bottom: 2px solid var(--gray-200); margin-bottom: 24px; }
.tab-btn { background: none; border: none; padding: 12px 24px; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--gray-400); transition: all .2s; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn.active,.tab-btn:hover { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; padding: 24px 0; }
.tab-content.active { display: block; }
.tab-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.tab-content h4 { font-size: .95rem; font-weight: 700; margin: 16px 0 8px; }
.tab-content p,.tab-content li { font-size: .9rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 6px; }
.tab-content ul { padding-left: 20px; list-style: disc; }
.reviews-summary { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
.score-num { font-size: 3rem; font-weight: 900; color: var(--secondary); }
.related-products { margin-top: 40px; }
.cart-page { padding: 40px 0; }
.empty-cart { text-align: center; padding: 80px 20px; }
.empty-cart i { font-size: 4rem; color: var(--gray-200); margin-bottom: 20px; }
.empty-cart h2 { color: var(--gray-600); margin-bottom: 10px; }
.empty-cart p { color: var(--gray-400); margin-bottom: 24px; }
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 12px 16px; font-size: .82rem; font-weight: 700; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); text-transform: uppercase; letter-spacing: .5px; }
.cart-table td { padding: 16px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; font-size: .9rem; }
.cart-product { display: flex; align-items: center; gap: 12px; }
.cart-product-icon { width: 50px; height: 50px; background: var(--gray-100); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; }
.cart-product a { font-weight: 600; color: var(--secondary); }
.cart-product a:hover { color: var(--primary); }
.qty-control-sm { display: flex; align-items: center; border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; width: fit-content; }
.qty-control-sm button { background: var(--gray-100); border: none; padding: 5px 10px; cursor: pointer; color: var(--gray-600); transition: background .2s; }
.qty-control-sm button:hover { background: var(--primary); color: #fff; }
.qty-control-sm input { width: 40px; text-align: center; border: none; padding: 5px 0; font-size: .875rem; font-weight: 600; }
.remove-btn { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 1rem; padding: 4px 8px; transition: color .2s; }
.remove-btn:hover { color: var(--red); }
.cart-summary { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px; position: sticky; top: 90px; }
.cart-summary h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--gray-200); }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .9rem; color: var(--gray-600); }
.total-row { padding: 16px 0 0; margin-top: 8px; border-top: 2px solid var(--gray-200); font-size: 1.05rem; color: var(--secondary); }
.summary-notice { font-size: .78rem; padding: 8px 12px; border-radius: 6px; margin: 8px 0; display: flex; align-items: center; gap: 6px; background: rgba(245,158,11,.1); color: #b45309; }
.summary-notice.free-ship { background: rgba(22,163,74,.1); color: var(--primary); }
.secure-badges { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.secure-badges span { font-size: .72rem; color: var(--gray-400); display: flex; align-items: center; gap: 4px; }
.qty-update-form { display: inline-block; }

.checkout-page { padding: 40px 0; }
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.checkout-fields { display: flex; flex-direction: column; gap: 28px; }
.checkout-section { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px; }
.checkout-section h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--gray-200); display: flex; align-items: center; gap: 8px; }
.checkout-section h3 i { color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .82rem; font-weight: 600; color: var(--gray-800); }
.form-group input,.form-group select,.form-group textarea { border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-size: .9rem; transition: border-color .2s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.form-group textarea { resize: vertical; min-height: 100px; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-option { border: 2px solid var(--gray-200); border-radius: 8px; padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .2s; }
.payment-option.selected { border-color: var(--primary); background: rgba(22,163,74,.05); }
.payment-option input { display: none; }
.payment-icon { font-size: 1.3rem; color: var(--primary); flex-shrink: 0; }
.payment-info strong { font-size: .82rem; display: block; }
.payment-info small { font-size: .72rem; color: var(--gray-400); }
.checkout-summary { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px; position: sticky; top: 90px; }
.checkout-summary h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gray-200); display: flex; align-items: center; gap: 8px; }
.order-items { margin-bottom: 16px; }
.order-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.order-item-info strong { font-size: .875rem; display: block; }
.order-item-info small { color: var(--gray-400); font-size: .78rem; }
.order-item span { font-size: .875rem; font-weight: 600; color: var(--primary); }
.order-totals { margin-bottom: 16px; }
.success-page { padding: 80px 0; display: flex; justify-content: center; }
.success-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 48px; text-align: center; max-width: 520px; width: 100%; }
.success-icon { font-size: 4rem; color: var(--primary); margin-bottom: 20px; }
.success-card h1 { font-size: 1.6rem; color: var(--secondary); margin-bottom: 12px; }
.success-card p { color: var(--gray-600); margin-bottom: 24px; }
.success-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; background: var(--gray-100); border-radius: 8px; padding: 16px; }
.info-item { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--gray-600); }
.info-item i { color: var(--primary); width: 16px; }
.success-btns { display: flex; gap: 12px; justify-content: center; }
.page-content { padding: 60px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; margin-bottom: 48px; }
.about-text h2 { font-family: Oswald, sans-serif; font-size: 1.8rem; color: var(--secondary); margin: 10px 0 18px; }
.about-text p { color: var(--gray-600); font-size: .9rem; line-height: 1.8; margin-bottom: 16px; }
.about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.value-item { display: flex; align-items: flex-start; gap: 12px; }
.value-item i { color: var(--primary); font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
.value-item strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.value-item p { font-size: .78rem; color: var(--gray-400); margin: 0; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card { background: var(--gray-100); border-radius: var(--radius); padding: 24px; text-align: center; }
.stat-num { display: block; font-size: 2.5rem; font-weight: 900; color: var(--primary); font-family: Oswald, sans-serif; }
.stat-label { font-size: .82rem; color: var(--gray-600); }
.about-mission { background: linear-gradient(135deg,#0d3d2e,#16a34a); border-radius: var(--radius); padding: 40px; color: #fff; }
.about-mission h2 { font-family: Oswald, sans-serif; font-size: 1.6rem; margin-bottom: 12px; }
.about-mission p { opacity: .85; line-height: 1.8; }
.contact-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; }
.contact-info h2 { font-family: Oswald, sans-serif; font-size: 1.7rem; color: var(--secondary); margin-bottom: 12px; }
.contact-info > p { color: var(--gray-600); margin-bottom: 24px; }
.contact-methods { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.contact-method { display: flex; align-items: flex-start; gap: 14px; }
.contact-method i { width: 40px; height: 40px; background: rgba(22,163,74,.1); color: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.contact-method strong { display: block; font-size: .875rem; margin-bottom: 2px; }
.contact-method p { font-size: .82rem; color: var(--gray-600); margin: 0; }
.contact-hours { background: var(--gray-100); border-radius: 8px; padding: 16px; }
.contact-hours h4 { font-size: .875rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.contact-hours i { color: var(--primary); }
.contact-hours p { font-size: .82rem; color: var(--gray-600); }
.contact-form-wrap { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 32px; }
.alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.alert-success { background: rgba(22,163,74,.1); color: var(--primary); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.blog-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; transition: all .3s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-image { height: 200px; background: var(--gray-100); position: relative; display: flex; align-items: center; justify-content: center; }
.blog-img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.blog-img-placeholder i { font-size: 4rem; color: var(--primary); opacity: .2; }
.blog-img-placeholder.large i { font-size: 6rem; }
.blog-cat { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; }
.blog-info { padding: 20px; }
.blog-meta { display: flex; gap: 14px; margin-bottom: 10px; }
.blog-meta span { font-size: .75rem; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.blog-info h3 { font-size: .95rem; font-weight: 700; color: var(--secondary); margin-bottom: 8px; line-height: 1.4; }
.blog-info h3 a:hover { color: var(--primary); }
.blog-info p { font-size: .82rem; color: var(--gray-600); margin-bottom: 14px; line-height: 1.6; }
.read-more { color: var(--primary); font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.blog-post-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.post-meta { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.post-meta span { font-size: .78rem; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.post-image-large { height: 280px; background: var(--gray-100); border-radius: var(--radius); margin-bottom: 24px; display: flex; align-items: center; justify-content: center; }
.post-content { font-size: .9rem; color: var(--gray-600); line-height: 1.8; }
.post-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--secondary); margin: 20px 0 10px; }
.post-content p { margin-bottom: 14px; }
.post-content ul { padding-left: 20px; list-style: disc; margin-bottom: 14px; }
.post-content a { color: var(--primary); }
.blog-sidebar h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.blog-sidebar .sidebar-post { padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.blog-sidebar .sidebar-post a { font-size: .85rem; font-weight: 600; color: var(--secondary); display: block; margin-bottom: 3px; }
.blog-sidebar .sidebar-post a:hover { color: var(--primary); }
.blog-sidebar .sidebar-post small { font-size: .72rem; color: var(--gray-400); }
.sidebar-cta { background: linear-gradient(135deg,#0d3d2e,#16a34a); border-radius: 8px; padding: 20px; margin-top: 16px; color: #fff; }
.sidebar-cta h4 { font-size: .9rem; margin-bottom: 8px; }
.sidebar-cta p { font-size: .78rem; opacity: .85; margin-bottom: 14px; }
.reviews-header { display: flex; align-items: center; gap: 40px; background: var(--gray-100); border-radius: var(--radius); padding: 28px; margin-bottom: 36px; }
.overall-rating { text-align: center; flex-shrink: 0; }
.rating-big { font-size: 4rem; font-weight: 900; color: var(--secondary); display: block; line-height: 1; }
.stars-xl { color: var(--accent); font-size: 1.5rem; }
.overall-rating p { font-size: .82rem; color: var(--gray-600); margin-top: 4px; }
.rating-bars { flex: 1; }
.rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .82rem; }
.bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.rating-bar-row span:last-child { width: 30px; text-align: right; color: var(--gray-400); }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-bottom: 48px; }
.review-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 24px; }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reviewer-avatar { width: 40px; height: 40px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.reviewer-info strong { font-size: .875rem; display: block; }
.reviewer-info small { color: var(--gray-400); font-size: .75rem; }
.review-stars { margin-left: auto; color: var(--accent); font-size: 1rem; }
.review-product { font-size: .75rem; color: var(--gray-400); margin-bottom: 10px; }
.review-product em { color: var(--primary); font-style: normal; font-weight: 600; }
.review-text { font-size: .875rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 10px; }
.review-date { font-size: .72rem; color: var(--gray-400); }
.leave-review { text-align: center; background: var(--gray-100); border-radius: var(--radius); padding: 40px; }
.leave-review h3 { font-size: 1.3rem; margin-bottom: 10px; }
.leave-review p { color: var(--gray-600); margin-bottom: 20px; }
.faq-container { max-width: 780px; margin: 0 auto 40px; }
.faq-item { border: 1px solid var(--gray-200); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: #fff; border: none; padding: 18px 20px; font-size: .95rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--secondary); transition: background .2s; }
.faq-q:hover { background: var(--gray-100); }
.faq-item.open .faq-q { background: rgba(22,163,74,.05); color: var(--primary); }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-q i { transition: transform .3s; color: var(--gray-400); }
.faq-a { display: none; padding: 0 20px 18px; font-size: .875rem; color: var(--gray-600); line-height: 1.7; }
.faq-item.open .faq-a { display: block; }
.faq-cta { text-align: center; max-width: 780px; margin: 0 auto; color: var(--gray-600); }
.faq-cta a { color: var(--primary); font-weight: 600; }
.error-page { padding: 80px 0; display: flex; justify-content: center; }
.error-card { text-align: center; }
.error-code { font-size: 8rem; font-weight: 900; color: var(--gray-200); line-height: 1; font-family: Oswald, sans-serif; }
.error-card h2 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 10px; }
.error-card p { color: var(--gray-600); margin-bottom: 28px; }
.error-btns { display: flex; gap: 14px; justify-content: center; }
.main-footer { background: var(--dark); }
.footer-top { padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,.45); font-size: .82rem; line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,.06); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: .9rem; transition: all .2s; }
.footer-social a:hover { background: var(--primary); color: #fff; }
.footer-col h4 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: rgba(255,255,255,.45); font-size: .82rem; display: flex; align-items: center; gap: 8px; transition: color .2s; }
.footer-col ul li a:hover { color: var(--primary); }
.footer-col ul li a i { font-size: .65rem; color: var(--primary); }
.contact-list li { color: rgba(255,255,255,.45); font-size: .82rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.contact-list li i { color: var(--primary); width: 14px; }
.footer-newsletter h4 { color: #fff; font-size: .875rem; margin: 20px 0 10px; }
.newsletter-form { display: flex; }
.newsletter-form input { flex: 1; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); border-radius: 6px 0 0 6px; padding: 8px 12px; color: #fff; font-size: .82rem; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-form button { background: var(--primary); border: none; padding: 8px 14px; color: #fff; cursor: pointer; border-radius: 0 6px 6px 0; font-size: .8rem; font-weight: 600; }
.footer-trust { background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); padding: 20px 0; }
.footer-trust-inner { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 12px; }
.footer-trust .trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.45); font-size: .78rem; }
.footer-trust i { color: var(--primary); }
.footer-payments { background: rgba(255,255,255,.02); padding: 16px 0; border-top: 1px solid rgba(255,255,255,.06); }
.footer-payments-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.footer-payments > .container > span { color: rgba(255,255,255,.45); font-size: .78rem; }
.payment-badge { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); padding: 4px 12px; border-radius: 5px; font-size: .78rem; display: flex; align-items: center; gap: 6px; }
.payment-badge i { color: var(--primary); }
.footer-bottom { background: rgba(0,0,0,.3); padding: 16px 0; text-align: center; }
.footer-bottom-inner p { color: rgba(255,255,255,.35); font-size: .78rem; margin-bottom: 4px; }
.disclaimer { color: rgba(255,255,255,.25) !important; font-size: .7rem !important; }
@media (max-width:1100px) { .categories-grid{grid-template-columns:repeat(3,1fr)} .products-grid{grid-template-columns:repeat(2,1fr)} .products-grid.four-col{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:900px) { .hero-content{flex-direction:column;text-align:center} .hero-text h1{font-size:2rem} .hero-image{order:-1} .hero-btns{justify-content:center} .hero-stats{justify-content:center} .shop-inner{grid-template-columns:1fr} .shop-sidebar{position:static} .product-detail-grid{grid-template-columns:1fr} .checkout-grid{grid-template-columns:1fr} .cart-grid{grid-template-columns:1fr} .testimonials-grid{grid-template-columns:1fr} .about-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .blog-grid{grid-template-columns:1fr 1fr} .blog-post-layout{grid-template-columns:1fr} .reviews-grid{grid-template-columns:1fr 1fr} .why-grid{grid-template-columns:1fr 1fr} .promo-inner{grid-template-columns:1fr} .nav-trust{display:none} }
@media (max-width:640px) { .topbar-inner{flex-direction:column;gap:4px} .header-inner{flex-wrap:wrap} .header-search{order:3;width:100%;max-width:100%} .nav-links{display:none;flex-direction:column;width:100%} .nav-links.open{display:flex} .main-nav .nav-inner{flex-direction:column;align-items:flex-start;padding:0} .nav-links > li{width:100%} .nav-links a{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.05)} .dropdown-menu{position:static;box-shadow:none} .mobile-menu-btn{display:flex} .hero-text h1{font-size:1.6rem} .categories-grid{grid-template-columns:1fr 1fr} .products-grid{grid-template-columns:1fr 1fr} .products-grid.three-col{grid-template-columns:1fr} .blog-grid{grid-template-columns:1fr} .reviews-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .cart-table{display:block;overflow-x:auto} .form-row{grid-template-columns:1fr} .payment-methods{grid-template-columns:1fr} .section{padding:48px 0} }

.product-img-placeholder .prod-name { font-size: .7rem; color: rgba(255,255,255,.5); text-align: center; padding: 0 12px; line-height: 1.3; }
.product-image.cat-liquid { background: linear-gradient(135deg,#0d2a1a 0%,#1a5c32 100%); }
.product-image.cat-paper { background: linear-gradient(135deg,#1a1a0d 0%,#3d3d1a 100%); }
.product-image.cat-powder { background: linear-gradient(135deg,#0d1a2a 0%,#1a2d4f 100%); }
.product-image.cat-herb { background: linear-gradient(135deg,#0d2a0d 0%,#1a4a1a 100%); }
.product-image.cat-acc { background: linear-gradient(135deg,#1a0d2a 0%,#3d1a5c 100%); }
.product-main-img { background: linear-gradient(135deg,#0d2a1a 0%,#1a4a2e 100%); border-radius: var(--radius); height: 360px; display: flex; align-items: center; justify-content: center; position: relative; border: 2px solid rgba(22,163,74,.3); }
.product-main-img i { font-size: 7rem; color: var(--primary); opacity: .5; filter: drop-shadow(0 0 24px rgba(22,163,74,.6)); }
.blog-img-placeholder { background: linear-gradient(135deg,#0d2a1a 0%,#1a4a2e 100%); }
.blog-img-placeholder i { color: var(--primary); opacity: .5; }
.post-image-large { background: linear-gradient(135deg,#0d2a1a 0%,#1a4a2e 100%) !important; }

.product-image img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s; }
.product-card:hover .product-image img { transform: scale(1.05); }
.product-main-img img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }