/* Theme 3 — VaporDNA style (measured from vapordna.com: Poppins, #292929 text, red #B10F0F customer bar,
   soft grey-blue #EDEEF4 toolbar, white header with logo + inline nav, black-outline buttons, light footer) */
html[data-theme="3"] {
  --bg: #fff; --surface: #fff; --surface-2: #edeef4; --text: #292929; --muted: #6a6c78; --heading: #111; --border: #dfe1ea;
  --accent: #b10f0f; --accent-hover: #8c0a0a; --accent-contrast: #fff; --link: #b10f0f;
  --warn-bg: #fff; --warn-text: #111; --warn-border: #edeef4;
  --promo-bg: #edeef4; --promo-text: #292929; --info-bg: #b10f0f; --info-text: #fff; --info-link: #fff;
  --header-bg: #fff; --header-text: #111; --nav-bg: #fff; --nav-text: #292929; --nav-hover: #b10f0f; --nav-border: #edeef4;
  --search-bg: #edeef4;
  --footer-bg: #edeef4; --footer-text: #111; --footer-muted: #4d4f5a; --footer-news-bg: #111;
  --font-body: "Poppins", sans-serif; --font-head: "Poppins", sans-serif;
  --fs-body: 15px; --head-weight: 600; --head-transform: none; --nav-transform: none; --nav-weight: 500; --nav-size: 14px;
  --radius: 6px; --radius-lg: 10px; --btn-radius: 999px; --shadow: 0 2px 10px rgba(20, 22, 40, .06);
  --hero-1: linear-gradient(90deg, #0b0b0f 0%, #1c1d26 55%, #3a3c4d 100%);
  --hero-2: linear-gradient(90deg, #1a0404 0%, #4e0808 55%, #b10f0f 100%);
  --hero-3: linear-gradient(90deg, #0d0f1d 0%, #262b52 55%, #4a55a8 100%);
}
html[data-theme="3"] .bar-warning { font-size: 13px; }
html[data-theme="3"] .bar-info { font-weight: 500; font-size: 12px; letter-spacing: 0; }
html[data-theme="3"] .bar-promo { font-size: 13px; font-weight: 600; }
html[data-theme="3"] .bar-promo a { color: #b10f0f; }
html[data-theme="3"] .logo-mark { border-radius: 50%; background: conic-gradient(#b10f0f 0 25%, #111 0 50%, #b10f0f 0 75%, #111 0); box-shadow: none; }
html[data-theme="3"] .logo-text { font-weight: 300; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="3"] .cart-count { background: #edeef4; color: #111; }
@media (min-width: 1024px) {
  /* Single header row: logo · nav · icons, search opens as a popup */
  html[data-theme="3"] .hdr { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav icons"; padding-top: 0; padding-bottom: 0; }
  html[data-theme="3"] .hdr-search { display: none; }
  html[data-theme="3"] .js-open-search { display: inline-grid; }
  html[data-theme="3"] .hdr-nav { margin: 0; padding: 0; border: 0; background: none; }
  html[data-theme="3"] .nav-list { justify-content: center; gap: 2px; }
  html[data-theme="3"] .nav-link { padding: 26px 10px; font-size: 14px; }
}
html[data-theme="3"] .btn-primary { background: #111; color: #fff; }
html[data-theme="3"] .btn-primary:hover { background: #b10f0f; }
html[data-theme="3"] .btn-outline { border-color: #111; color: #111; }
html[data-theme="3"] .hero-slide { min-height: clamp(320px, 45vw, 560px); }
html[data-theme="3"] .hero-h { font-weight: 600; font-size: clamp(32px, 6vw, 68px); }
html[data-theme="3"] .hero-slide .btn-primary { background: transparent; border-color: #fff; color: #fff; }
html[data-theme="3"] .hero-slide .btn-primary:hover { background: #fff; color: #111; }
html[data-theme="3"] .hero-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
html[data-theme="3"] .home-h1 { font-weight: 500; }
html[data-theme="3"] .sec-head { border-bottom: 0; }
html[data-theme="3"] .sec-title { font-size: clamp(22px, 2.6vw, 30px); }
html[data-theme="3"] .p-card { border: 0; background: #f7f8fb; }
html[data-theme="3"] .p-card .ph-img { background: #fff; }
html[data-theme="3"] .cat-tile .ph-img { border-radius: 12px; }
html[data-theme="3"] .cats-sec { background: #edeef4; }
html[data-theme="3"] .seo-sec { background: #111; color: #d7d8e0; }
html[data-theme="3"] .seo-sec .sec-title { color: #fff; }
html[data-theme="3"] .seo-sec a { color: #fff; }
html[data-theme="3"] .faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 0 12px; }
html[data-theme="3"] .faq { border: 0; }
html[data-theme="3"] .f-news-h { color: #fff; }
html[data-theme="3"] .f-newsletter .f-news-form input { background: #fff; color: #111; }
html[data-theme="3"] .f-newsletter .btn-primary { background: #b10f0f; }
html[data-theme="3"] .secure-badge { border-color: #b8bac7; }
html[data-theme="3"] .chat-btn { background: #111; }
html[data-theme="3"] .age-panel { border-top: 0; border-radius: 4px; }
html[data-theme="3"] .age-icon { background: #111; }
html[data-theme="3"] .age-brand { color: #111; }