:root {
  --primary: #1a3a5c;
  --accent: #d83227;
  --gold: #c9a84c;
  --light: #f5f7fa;
  --dark: #111827;
  --gray: #6b7280;
  --white: #fff;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--dark); line-height: 1.6; background: var(--white); overflow-x:hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { color: var(--primary); text-decoration: none; }
h1, h2 { font-weight: 700; color: var(--primary); }
h3, h4 { font-weight: 600; color: var(--primary); }

/* Buttons */
.btn { display:inline-block; padding:12px 28px; background:var(--accent); color:var(--white); border:none; border-radius:var(--radius); cursor:pointer; font-size:15px; font-weight:600; transition:all .2s; text-align:center; }
.btn:hover { opacity:.9; transform:translateY(-1px); box-shadow: 0 2px 8px rgba(216,50,39,.3); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline { background:transparent; border:2px solid var(--white); color:var(--white); }
.btn-outline:hover { background:rgba(255,255,255,.1); box-shadow:none; }
.btn-lg { padding:16px 36px; font-size:18px; }
.btn-sm { padding:6px 10px; font-size:12px; white-space:nowrap; }
.btn-dark { background:#212121; }
.btn-dark:hover { box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* Top Bar — red announcement, full width */
.top-bar { background:#c7002d; color:var(--white); padding:10px 0; font-size:13px; position:relative; }
.top-bar .container { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; max-width:100%; }
.top-bar a { color:var(--white); text-decoration:underline; margin:0 4px; }
.top-bar .close-banner { position:absolute; right:20px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--white); cursor:pointer; font-size:18px; opacity:.8; padding:4px 8px; }
.top-bar .close-banner:hover { opacity:1; }
.top-bar.hidden { display:none; }
.header-right { display:flex; align-items:center; gap:12px; }
.lang-btn { background:rgba(255,255,255,.2); color:var(--white); border:1px solid rgba(255,255,255,.3); padding:4px 12px; border-radius:4px; cursor:pointer; font-size:12px; }
.lang-btn:hover { background:rgba(255,255,255,.35); }

/* Header — horizontal top nav, sticky */
header { background:var(--white); border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:1000; }
header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.main-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; max-width:1200px; margin:0 auto; }
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo img { height:30px; }
/* Hamburger — hidden on desktop */
.hamburger { display:none; background:none; border:none; font-size:26px; cursor:pointer; padding:4px 8px; color:var(--dark); line-height:1; }
nav { display:flex; align-items:center; gap:8px; }
nav a { font-weight:500; font-size:14px; color:var(--dark); padding:6px 12px; border-radius:6px; transition:background .15s, color .15s; }
nav a:hover, nav a.active { background:rgba(26,58,92,.06); color:var(--accent); }
nav a.cart-link { font-size:16px; display:flex; align-items:center; gap:4px; }
nav.open { display:flex; }
#cartCount { background:var(--accent); color:var(--white); font-size:11px; padding:1px 6px; border-radius:10px; font-weight:700; min-width:18px; text-align:center; }
body { padding-left:0; }

/* Hero — two-column like steadymeds */
.hero { background:linear-gradient(135deg, rgba(26,58,92,.92) 0%, rgba(13,37,64,.95) 100%), url(images/hero-bg.jpg) center/cover no-repeat; color:var(--white); padding:70px 0; }
.hero .container { display:flex; align-items:center; gap:50px; }
.hero-text { flex:1; }
.hero-text h1 { color:var(--white); font-size:44px; line-height:1.2; margin-bottom:16px; }
.hero-text h1 span { color:var(--gold); font-size:18px; font-weight:400; display:block; margin-top:8px; }
.hero-text p { font-size:16px; color:rgba(255,255,255,.8); margin-bottom:28px; line-height:1.7; max-width:500px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-visual { flex-shrink:0; width:320px; text-align:center; }
.hero-visual svg { width:100%; height:auto; }
/* Differentiators section */
.diff-section { padding:70px 0; background:var(--white); }
.diff-section .container { display:flex; align-items:center; gap:60px; }
.diff-text { flex:1; }
.diff-text h2 { font-size:32px; margin-bottom:8px; }
.diff-text .subtitle { color:var(--accent); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; }
.diff-text ul { list-style:none; }
.diff-text ul li { padding:10px 0 10px 32px; position:relative; font-size:16px; color:#374151; line-height:1.6; }
.diff-text ul li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:18px; }
.diff-visual { flex-shrink:0; width:400px; }
.diff-visual img { width:100%; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.1); }
.trust-bar { background:var(--light); padding:45px 0; border-bottom:1px solid #e5e7eb; }
.trust-bar .container { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.trust-item { text-align:center; padding:16px; }
.trust-icon { font-size:32px; }
.trust-item h4 { margin:8px 0 4px; font-size:16px; }
.trust-item p { color:var(--gray); font-size:13px; }

/* Sections */
.section { padding:60px 0; }
.section-title { text-align:center; font-size:30px; margin-bottom:35px; font-weight:700; }
.bg-light { background:var(--light); }

/* Product Grid — horizontal scroll row */
.product-grid { display:flex; flex-wrap:wrap; gap:16px; }
.product-grid::-webkit-scrollbar { height:6px; }
.product-grid::-webkit-scrollbar-thumb { background:#ddd; border-radius:3px; }
.product-card { flex:0 0 250px; scroll-snap-align:start; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .2s, transform .2s; border:1px solid #eee; position:relative; cursor:pointer; }
.product-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.product-card img { width:100%; height:220px; object-fit:contain; display:block; background:linear-gradient(135deg,#f8f9fb 0%,#eef0f4 50%,#e8eaef 100%); border-bottom:1px solid rgba(0,0,0,.05); }
.product-card .info { padding:16px; }
.product-card h3 { font-size:15px; margin-bottom:4px; line-height:1.3; }
.product-card h3 a { color:var(--dark); }
.product-card h3 a:hover { color:var(--accent); }
.product-card .purity { color:var(--accent); font-weight:600; font-size:13px; margin-bottom:6px; }
.product-card .desc { color:var(--gray); font-size:12px; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; }
.product-card .price { font-size:20px; font-weight:700; color:var(--primary); }
.product-card .spec { font-size:12px; color:var(--gray); margin-bottom:2px; }
.product-card .actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.product-card .actions select { flex:1; min-width:0; padding:7px 6px; border:1px solid #ddd; border-radius:var(--radius); font-size:11px; background:var(--white); }
.product-card .qty { width:38px; padding:7px 4px; border:1px solid #ddd; border-radius:var(--radius); text-align:center; font-size:13px; }
.product-card .actions .btn-sm { width:100%; }

/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.testimonial-card { background:var(--white); padding:28px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eee; }
.testimonial-card .stars { color:#f59e0b; font-size:14px; letter-spacing:2px; margin-bottom:12px; }
.testimonial-card .text { font-size:14px; color:#374151; line-height:1.75; font-style:italic; margin-bottom:14px; }
.testimonial-card .author { font-size:13px; color:var(--gray); font-weight:600; }

/* Category Cards */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.cat-card { background:var(--white); padding:24px; border-radius:var(--radius); text-align:center; box-shadow:var(--shadow); transition:box-shadow .2s, transform .2s; display:block; border:1px solid #eee; }
.cat-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.cat-card img { border-radius:4px; }
.cat-card h3 { margin:8px 0 4px; font-size:16px; }
.cat-card p { color:var(--gray); font-size:13px; }

/* Guarantee */
.guarantee { background:#111; color:var(--white); text-align:center; }
.guarantee-content { max-width:750px; margin:0 auto; }
.guarantee-content h2 { color:var(--white); font-size:32px; margin-bottom:6px; }
.guarantee-content .sub { color:var(--accent); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.guarantee-content p { font-size:16px; margin-bottom:24px; line-height:1.7; color:rgba(255,255,255,.8); }
.rebate-badge { display:inline-block; border:2px solid var(--accent); border-radius:8px; padding:20px 32px; margin-bottom:24px; }
.rebate-label { display:block; font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:4px; }
.rebate-amount { display:block; font-size:26px; font-weight:800; color:var(--accent); }
.rebate-amount small { font-size:14px; font-weight:400; color:rgba(255,255,255,.7); display:block; }

/* Shop Page — sidebar + products */
.shop-layout { display:flex; gap:30px; }
.shop-sidebar { width:200px; flex-shrink:0; position:sticky; top:80px; align-self:flex-start; }
.filter-title { font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gray); margin-bottom:12px; }
.filter-link { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:6px; font-size:14px; color:var(--dark); margin-bottom:2px; transition:background .15s, color .15s; }
.filter-link:hover, .filter-link.active { background:var(--light); color:var(--accent); font-weight:600; }
.cat-count { font-size:11px; color:var(--gray); background:var(--light); padding:1px 6px; border-radius:10px; }
.shop-products { flex:1; min-width:0; }
.shop-search { width:100%; padding:12px 16px; border:2px solid #e5e7eb; border-radius:8px; font-size:15px; margin-bottom:20px; outline:none; transition:border-color .2s; }
.shop-search:focus { border-color:var(--accent); }

/* Cart Table */
.cart-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.cart-table th { text-align:left; padding:12px; background:var(--light); font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gray); }
.cart-table td { padding:12px; border-bottom:1px solid #f0f0f0; }
.cart-remove { color:var(--accent); cursor:pointer; font-weight:700; font-size:18px; }
.cart-remove:hover { opacity:.7; }
.cart-total { text-align:right; font-size:20px; margin:20px 0; }
.cart-empty { text-align:center; padding:50px 20px; }
.cart-empty a.btn { margin-top:15px; }

/* Content Pages */
.content-page { max-width:800px; margin:0 auto; padding:40px 20px; }
.content-page h1 { font-size:30px; margin-bottom:20px; }
.content-page h2 { font-size:22px; margin:30px 0 15px; }
.content-page p, .content-page li { margin-bottom:12px; color:#374151; }

/* WhatsApp Float */
.wa-float { position:fixed; bottom:25px; right:25px; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 4px 16px rgba(37,211,102,.4); z-index:998; transition:transform .2s; }
.wa-float:hover { transform:scale(1.1); }

/* Back to Top */
#backToTop { position:fixed; bottom:90px; right:25px; width:44px; height:44px; background:var(--dark); color:var(--white); border:none; border-radius:50%; font-size:22px; cursor:pointer; z-index:997; display:none; box-shadow:0 2px 8px rgba(0,0,0,.15); transition:opacity .2s; }
#backToTop:hover { opacity:.8; }

/* Mobile Bottom Toolbar */
.mobile-toolbar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--white); border-top:1px solid #e5e7eb; z-index:1000; padding:5px 0; justify-content:space-around; align-items:center; }
.mobile-toolbar a, .mobile-toolbar button { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--gray); font-size:10px; text-decoration:none; background:none; border:none; cursor:pointer; padding:4px 8px; }
.mobile-toolbar a .icon, .mobile-toolbar button .icon { font-size:20px; }
.mobile-toolbar a.active, .mobile-toolbar a:hover { color:var(--accent); }
.mobile-toolbar .cart-dot { position:relative; }
.mobile-toolbar .cart-dot #cartCountMob { position:absolute; top:-4px; right:-6px; background:var(--accent); color:var(--white); font-size:10px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; }

/* Footer — black like steadymeds */
footer { background:#111; color:#ccc; padding:50px 0 0; }
footer a { color:#999; display:block; padding:3px 0; font-size:13px; }
footer a:hover { color:var(--white); }
footer h4 { color:var(--white); margin-bottom:15px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; }
footer p { color:#999; font-size:13px; }
.footer-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-bottom:30px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:15px 0; text-align:center; }
.footer-bottom p { font-size:11px; color:#777; }

/* Toast */
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:var(--dark); color:var(--white); padding:12px 24px; border-radius:var(--radius); z-index:9999; animation:toastIn .3s ease; font-size:14px; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* COA Table */
.coa-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:13px; }
.coa-table th, .coa-table td { padding:10px; border:1px solid #e5e7eb; }
.coa-table th { background:var(--light); font-weight:600; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  /* Hero + diff */
  .hero .container { flex-direction:column; text-align:center; gap:30px; }
  .hero h1 { font-size:28px; }
  .hero h1 span { font-size:16px; }
  .hero-text h1 { font-size:30px; }
  .hero-text p { max-width:100%; }
  .hero-btns { justify-content:center; }
  .hero-visual { width:200px; }
  .diff-section .container { flex-direction:column-reverse; gap:30px; }
  .diff-visual { width:100%; }
  /* Grids */
  .trust-bar .container, .cat-grid, .footer-grid { grid-template-columns:repeat(2, 1fr); }
  /* Product cards — horizontal scroll on mobile */
  .product-grid { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; gap:12px; padding-bottom:8px; }
  .product-card { flex:0 0 200px; scroll-snap-align:start; }
  /* Shop sidebar → horizontal pills */
  .shop-layout { flex-direction:column; }
  .shop-sidebar { position:static; width:100%; display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; }
  .filter-title { display:none; }
  .filter-link { white-space:nowrap; padding:8px 16px; background:var(--light); border-radius:20px; font-size:13px; flex-shrink:0; }
  .filter-link.active { background:var(--primary); color:var(--white); }
  .filter-link.active .cat-count { background:rgba(255,255,255,.2); color:var(--white); }
  .cat-count { display:none; }
  /* Hamburger */
  .hamburger { display:block; }
  .main-header { flex-wrap:wrap; position:relative; }
  nav { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:2px solid #e5e7eb; box-shadow:0 8px 16px rgba(0,0,0,.08); padding:8px 0; z-index:999; gap:0; }
  nav.open { display:flex; }
  nav a { padding:12px 20px; border-radius:0; font-size:15px; border-bottom:1px solid #f5f5f5; }
  nav a.cart-link { justify-content:flex-start; }
  /* Floats */
  .wa-float { bottom:75px; }
  .mobile-toolbar { display:flex; }
  body { padding-bottom:60px; }
}
@media (max-width:480px) {
  .product-card { flex:0 0 170px; }
  .product-card img { height:130px; }
  .product-card .info { padding:10px; }
  .product-card h3 { font-size:13px; }
  .product-card .desc { font-size:11px; -webkit-line-clamp:1; }
  .product-card .price { font-size:16px; }
  .product-card .actions select { font-size:10px; padding:5px 4px; }
  .product-card .qty { width:32px; padding:5px 2px; font-size:11px; }
  .product-card .actions .btn-sm { font-size:10px; padding:5px 6px; }
  .top-bar { font-size:11px; padding:8px 0; }
  .top-bar .container { gap:4px; }
  .hero h1 { font-size:24px; }
  .hero h1 span { font-size:14px; }
  .trust-bar .container, .cat-grid, .footer-grid { grid-template-columns:1fr; }
  .cart-table thead { display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display:block; }
  .cart-table tr { padding:15px; margin-bottom:12px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); }
  .cart-table td { padding:6px 0; border:none; text-align:right; }
  .cart-table td::before { content:attr(data-label); float:left; font-weight:600; color:var(--gray); }
  .cart-table td:last-child { text-align:center; padding-top:10px; }
}