/* ============================================================
   GOS MOW — Custom Redesign
   Colors : White / Green #2d6a4f / Black #1c1c1c
   Fonts  : Montserrat (heading) + Lora (body)
   Layout : Editorial 2-col hero, horizontal categories,
            4-col products, bold header + top bar, 5-col footer
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Variables ───────────────────────────────────────────── */
:root {
  --primary:       #2d6a4f;
  --primary-dark:  #1b4332;
  --primary-light: #52b788;
  --primary-pale:  #d8f3dc;
  --accent:        #2d6a4f;
  --accent-light:  #40916c;
  --bg:            #f9fafb;
  --bg-green:      #f0faf4;
  --white:         #ffffff;
  --dark:          #1c1c1c;
  --muted:         #6b7280;
  --border:        #e5e7eb;
  --card:          #ffffff;
  --hero-gradient: linear-gradient(135deg,#1b4332 0%,#2d6a4f 60%,#1b4332 100%);
  --radius:        8px;
  --radius-lg:     14px;
  --shadow:        0 2px 12px rgba(44,106,79,.10);
  --shadow-lg:     0 10px 36px rgba(44,106,79,.16);
  --font:          'Montserrat', sans-serif;
  --font-body:     'Lora', Georgia, serif;
  --transition:    .22s ease;
}

/* ── Base Typography ─────────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  background: var(--white) !important;
  color: var(--dark) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
}

/* ── TOP BAR (injected by inject.js) ─────────────────────── */
.top-bar {
  background: var(--primary-dark);
  color: #fff;
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .4px;
  padding: 8px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.top-bar .tb-sep { opacity: .35; }
.top-bar a { color: #95d5b2; text-decoration: none; }
.top-bar a:hover { text-decoration: underline; }
.top-bar strong { font-weight: 700; color: #95d5b2; }

/* ── HEADER ──────────────────────────────────────────────── */
.header {
  background: var(--white) !important;
  border-bottom: 2px solid var(--primary) !important;
  box-shadow: 0 2px 16px rgba(44,106,79,.10) !important;
  color: var(--dark) !important;
}
.header-inner {
  height: 66px !important;
}
.header-logo {
  color: var(--dark) !important;
  font-family: var(--font) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
}
.header-logo span {
  color: var(--dark) !important;
}
.header-logo span span {
  color: var(--primary) !important;
}
.header-nav a {
  font-family: var(--font) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
}
.header-nav a:hover {
  color: var(--primary) !important;
  background: var(--primary-pale) !important;
}
.cart-btn {
  background: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
}
.cart-btn:hover {
  background: var(--primary-dark) !important;
}
.menu-toggle {
  color: var(--dark) !important;
}
/* Mobile nav open state */
.header-nav.open {
  background: var(--white) !important;
  border-top: 2px solid var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
.header-nav.open a {
  color: var(--dark) !important;
  border-radius: 6px !important;
}
.header-nav.open a:hover {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
}

/* ── HERO — Bento grid (giữ cấu trúc gốc, override visual) ── */
.hero-bento {
  background: var(--primary-dark) !important;
  padding: 40px 24px 0 !important;
}
.hb-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}
/*
  Layout "hỗn loạn":
  cols: [1.8fr BIG-IMG] [1fr stat] [1.2fr stat] [1.6fr TEXT]
  row1: [img1 tall    ] [18+     ] [30-Day     ] [text tall ]
  row2: [img1 tall    ] [img2 wide wide         ] [text tall ]
*/
.hb-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1.2fr 1.6fr !important;
  grid-template-rows: 265px 215px !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

/* child 1 — hb-main: text, tall right column */
.hb-grid > div:nth-child(1) {
  grid-column: 4 !important;
  grid-row: 1 / 3 !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* child 2 — hb-img (first): big tall image, left */
.hb-grid > div:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
}
.hb-grid > div:nth-child(2) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .38s ease !important;
}
.hb-grid > div:nth-child(2):hover img { transform: scale(1.05) !important; }

/* child 3 — hb-stat (18+): top center-left */
.hb-grid > div:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 18px 20px !important;
  color: #fff !important;
}

/* child 4 — hb-img (second): wide bottom center */
.hb-grid > div:nth-child(4) {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
}
.hb-grid > div:nth-child(4) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .38s ease !important;
}
.hb-grid > div:nth-child(4):hover img { transform: scale(1.05) !important; }

/* child 5 — hb-stat (30-Day): top center-right */
.hb-grid > div:nth-child(5) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  background: var(--primary) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 18px 20px !important;
  color: #fff !important;
}

/* Overlay chung cho hb-img */
.hb-img-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent) !important;
  font-family: var(--font) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
/* Stat numbers/labels */
.hb-stat-num {
  font-family: var(--font) !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #95d5b2 !important;
  line-height: 1 !important;
}
.hb-stat-label {
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.65) !important;
  margin-top: 4px !important;
}
.hb-eyebrow {
  font-family: var(--font) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  margin-bottom: 18px !important;
}
.hb-main h1 {
  font-family: var(--font) !important;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  color: var(--dark) !important;
  margin-bottom: 22px !important;
}
.hb-main h1 span { color: var(--primary) !important; }
.hb-sub {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  margin-bottom: 36px !important;
  max-width: 380px !important;
}
.hb-ctas { gap: 14px !important; }

/* Buttons */
.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: .86rem !important;
  letter-spacing: .5px !important;
  padding: 14px 28px !important;
  transition: var(--transition) !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: .86rem !important;
  padding: 14px 28px !important;
  transition: var(--transition) !important;
}
.btn-outline:hover {
  background: var(--primary-pale) !important;
}

/* Features bar (spans full width, row 2) */
.hb-features {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  background: var(--primary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hb-feat {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 0 !important;
  padding: 20px 28px !important;
  gap: 14px !important;
}
.hb-feat:last-child { border-right: none !important; }
.hb-feat-icon { font-size: 1.4rem !important; }
.hb-feat div strong {
  font-family: var(--font) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.hb-feat div span {
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.72) !important;
}

/* ── SECTION HEADERS ─────────────────────────────────────── */
.section { background: var(--white) !important; }
.section:nth-child(even) { background: var(--bg) !important; }
.section-header h2 {
  font-family: var(--font) !important;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.6px !important;
  color: var(--dark) !important;
}
.section-header p {
  font-family: var(--font-body) !important;
  color: var(--muted) !important;
}

/* ── CATEGORIES — horizontal scroll ─────────────────────── */
.cat-bento {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 16px !important;
  padding-bottom: 10px !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--primary) var(--border) !important;
  -ms-overflow-style: none !important;
}
.cat-bento::-webkit-scrollbar { height: 5px; }
.cat-bento::-webkit-scrollbar-track { background: var(--border); border-radius: 3px; }
.cat-bento::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

.cat-bento-card {
  flex: 0 0 210px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  border-radius: 14px !important;
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  grid-column: unset !important;
  grid-row: unset !important;
}
.cat-bento-card.span2 {
  flex: 0 0 320px !important;
}
.cat-bento-card:hover {
  border-color: var(--primary) !important;
  background: var(--bg-green) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.cat-bento-bg-icon {
  font-size: 2.4rem !important;
  opacity: .18 !important;
}
.cat-bento-card:hover .cat-bento-bg-icon {
  opacity: .35 !important;
}
.cat-bento-content h3 {
  font-family: var(--font) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: var(--dark) !important;
}
.cat-bento-content p {
  font-family: var(--font-body) !important;
  font-size: .76rem !important;
  color: var(--muted) !important;
}
.cat-bento-cta {
  font-family: var(--font) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: .5px !important;
}

/* ── PRODUCTS — 4-col grid ───────────────────────────────── */
.prod-bento {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
}
.prod-bento-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: auto !important;
}
.prod-bento-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--primary-light) !important;
}
.prod-bento-card.pb-big {
  grid-column: span 2 !important;
  grid-row: auto !important;
}
.prod-bento-img {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
  flex: unset !important;
  min-height: unset !important;
}
.prod-bento-card.pb-big .prod-bento-img {
  aspect-ratio: 16/9 !important;
}
.prod-bento-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
}
.prod-bento-card:hover .prod-bento-img img {
  transform: scale(1.06) !important;
}
.product-badge {
  font-family: var(--font) !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
}
.product-badge.accent {
  background: var(--primary) !important;
  color: #fff !important;
}
.prod-bento-info { padding: 14px 16px 18px !important; }
.prod-bento-card:not(.pb-big) .prod-bento-info { padding: 12px 14px 16px !important; }
.prod-bento-info .category-label {
  font-family: var(--font) !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  margin-bottom: 4px !important;
}
.prod-bento-info h3 {
  font-family: var(--font) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin-bottom: 4px !important;
}
.prod-bento-info .price {
  font-family: var(--font) !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}

/* ── BRAND / ABOUT SECTION ───────────────────────────────── */
.brand-section {
  background: var(--primary-dark) !important;
}
.brand-text .eyebrow {
  font-family: var(--font) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #95d5b2 !important;
}
.brand-text h2 {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.brand-text p:not(.eyebrow) {
  font-family: var(--font-body) !important;
  color: rgba(255,255,255,.80) !important;
  line-height: 1.85 !important;
}
.brand-stat-box {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  transition: background var(--transition) !important;
}
.brand-stat-box:hover { background: rgba(255,255,255,.12) !important; }
.brand-stat-box .num {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  color: #95d5b2 !important;
}
.brand-stat-box .label {
  font-family: var(--font-body) !important;
  color: rgba(255,255,255,.65) !important;
}

/* ── REVIEWS ─────────────────────────────────────────────── */
.review-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition) !important;
}
.review-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--primary-light) !important;
  transform: translateY(-3px) !important;
}
.review-stars { color: #f59e0b !important; }
.review-quote {
  font-family: var(--font-body) !important;
  font-style: italic !important;
  color: var(--dark) !important;
  line-height: 1.75 !important;
}
.review-author strong { font-family: var(--font) !important; font-weight: 700 !important; }
.review-author span { font-family: var(--font-body) !important; }
.review-product {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
}

/* ── NEWSLETTER ──────────────────────────────────────────── */
.newsletter {
  background: var(--bg-green) !important;
  border-top: 3px solid var(--primary) !important;
}
.newsletter h2 {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
}
.newsletter p {
  font-family: var(--font-body) !important;
  color: var(--muted) !important;
}
.newsletter-form input {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  color: var(--dark) !important;
}
.newsletter-form input:focus { border-color: var(--primary) !important; outline: none !important; }
.newsletter-form button {
  background: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
}
.newsletter-form button:hover { background: var(--primary-dark) !important; }
.newsletter-privacy a { color: var(--primary) !important; font-weight: 600 !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  background: #0d1f15 !important;
}
.footer-brand p {
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  opacity: .72 !important;
  line-height: 1.75 !important;
}
.footer-col h4 {
  font-family: var(--font) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #95d5b2 !important;
  margin-bottom: 14px !important;
}
.footer-col a {
  font-family: var(--font-body) !important;
  font-size: .87rem !important;
  opacity: .72 !important;
  display: block !important;
  margin-bottom: 8px !important;
  transition: color var(--transition), opacity var(--transition) !important;
}
.footer-col a:hover {
  opacity: 1 !important;
  color: #95d5b2 !important;
}
.footer-divider {
  border-color: rgba(255,255,255,.08) !important;
}
.footer-bottom {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
}
.footer-bottom a {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
}

/* Trust badges (injected by inject.js) */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 20px 0 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 28px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  letter-spacing: .3px;
}
.trust-badge-icon { font-size: 1.05rem; flex-shrink: 0; }

/* Footer 5th column (injected by inject.js) */
.footer-col-contact {
  min-width: 160px;
}
.footer-col-contact h4 {
  font-family: var(--font) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #95d5b2 !important;
  margin-bottom: 14px !important;
}
.footer-col-contact p {
  font-family: var(--font-body);
  font-size: .84rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 8px;
}
.footer-col-contact a {
  color: #95d5b2 !important;
  font-family: var(--font-body) !important;
  font-size: .84rem !important;
  transition: opacity var(--transition) !important;
}
.footer-col-contact a:hover { opacity: .8 !important; }

/* ── POLICY PAGES ────────────────────────────────────────── */
.policy-page {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 48px 56px !important;
  max-width: 860px !important;
  margin: 40px auto !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.05) !important;
}
.policy-page h1 {
  font-family: var(--font) !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
  margin-bottom: 6px !important;
}
.policy-date {
  font-family: var(--font) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  color: var(--muted) !important;
  margin-bottom: 28px !important;
  display: block !important;
}
.policy-page h2 {
  font-family: var(--font) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  padding-left: 12px !important;
  border-left: 3px solid var(--primary) !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
}
.policy-page p,
.policy-page li {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  line-height: 1.82 !important;
  color: #374151 !important;
}
.policy-page a {
  color: var(--primary) !important;
  font-weight: 600 !important;
}
.policy-page a:hover { text-decoration: underline !important; }
.policy-table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.policy-table th {
  background: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .5px !important;
  padding: 11px 16px !important;
  text-align: left !important;
}
.policy-table td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
.policy-table tr:last-child td { border-bottom: none !important; }
.policy-table tr:hover td { background: var(--bg-green) !important; }

/* ── ABOUT PAGE ──────────────────────────────────────────── */
.about-hero {
  background: var(--primary-dark) !important;
  padding: 80px 24px !important;
  text-align: center !important;
}
.about-hero h1 {
  font-family: var(--font) !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
}
.about-hero p {
  font-family: var(--font-body) !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 1.05rem !important;
}
.about-body {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 56px 24px !important;
}
.about-body h2 {
  font-family: var(--font) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
  margin-top: 40px !important;
  margin-bottom: 14px !important;
}
.about-body p {
  font-family: var(--font-body) !important;
  font-size: .97rem !important;
  line-height: 1.85 !important;
  color: #374151 !important;
}
.value-card {
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  transition: all var(--transition) !important;
}
.value-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
  background: var(--bg-green) !important;
}
.value-card h3 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}
.value-card p {
  font-family: var(--font-body) !important;
  color: var(--muted) !important;
}

/* ── CONTACT PAGE ────────────────────────────────────────── */
.contact-page h1 {
  font-family: var(--font) !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
}
.contact-form h2,
.contact-info h2 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}
.contact-detail strong {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
}
.contact-detail p {
  font-family: var(--font-body) !important;
  color: var(--muted) !important;
}
.btn-continue {
  background: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 13px 28px !important;
  transition: background var(--transition) !important;
}
.btn-continue:hover { background: var(--primary-dark) !important; }

/* ── FAQ PAGE ────────────────────────────────────────────── */
.faq-page h1 {
  font-family: var(--font) !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
}
.faq-page > p {
  font-family: var(--font-body) !important;
}
.faq-question {
  font-family: var(--font) !important;
  font-size: .93rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  transition: color var(--transition) !important;
}
.faq-question:hover { color: var(--primary) !important; }
.faq-arrow { color: var(--primary) !important; }
.faq-answer p {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
}

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.product-detail h1 {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  color: var(--dark) !important;
}
.product-price {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}

/* ── CART & CHECKOUT ─────────────────────────────────────── */
.cart-page h1,
.checkout-page h1,
.checkout-section h2 {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  color: var(--dark) !important;
}
.order-summary h2,
.cart-item-name {
  font-family: var(--font) !important;
  font-weight: 700 !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .prod-bento {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .hb-editorial {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .hb-editorial-img {
    flex: none !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
  }
  .hb-editorial-text {
    flex: none !important;
    width: 100% !important;
    padding: 40px 28px !important;
    border-left: none !important;
    border-top: 4px solid var(--primary) !important;
  }
  .hb-features {
    grid-template-columns: 1fr 1fr !important;
  }
  .hb-feat { border-right: 1px solid rgba(255,255,255,.15) !important; }
  .hb-feat:nth-child(2n) { border-right: none !important; }
  .prod-bento {
    grid-template-columns: 1fr 1fr !important;
  }
  .prod-bento-card.pb-big {
    grid-column: span 2 !important;
  }
}
@media (max-width: 640px) {
  .top-bar { font-size: .7rem !important; gap: 12px !important; padding: 7px 16px !important; }
  .policy-page { padding: 24px 18px !important; margin: 16px 10px !important; }
  .hb-features { grid-template-columns: 1fr !important; }
  .hb-feat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .hb-feat:last-child { border-bottom: none !important; }
  .prod-bento { grid-template-columns: 1fr 1fr !important; }
  .trust-badges { gap: 14px !important; }
}