/* ============================================================
 * ConceptStoreAI — P3 Theme Override (FULL REWRITE)
 * Goal: make every page look like ConceptStoreAI_P3_Designs__standalone_.html
 *   - Surface  #F7F8FA, alt #F1F3F6, paper #FFF
 *   - Ink      #0B0F19, ink-2 #1F2937, muted #6B7280, faint #9CA3AF
 *   - Border   #E6E8EE, soft border #EEF0F4
 *   - Blue     #1F6FEB (primary action / links / accents)
 *   - Orange   #FF6A1F (CTA highlights, prices, urgency)
 *   - Inter + PingFang SC + Hiragino Sans GB + Microsoft YaHei
 *   - Linear / Stripe technical feel — no warm paper, no display serif
 *
 * Loaded LAST. Cascade wins via !important.
 * ============================================================ */

/* ── 1. Tokens (light, default) ───────────────────────────── */
:root {
  --bg:          #F7F8FA;
  --bg-soft:     #F1F3F6;
  --paper:       #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #FAFBFC;
  --surface-3:   #F1F3F6;

  --ink:         #0B0F19;
  --ink2:        #1F2937;
  --muted:       #6B7280;
  --faint:       #9CA3AF;

  --border:      #E6E8EE;
  --border-soft: #EEF0F4;
  --divider:     #F1F3F6;
  --line:        #E6E8EE;

  --accent:      #FF6A1F;     /* orange — prices, CTA highlights */
  --accent-2:    #1F6FEB;     /* blue — primary buttons, links   */
  --blue:        #1F6FEB;
  --blue-deep:   #0E4FB8;
  --blue-soft:   #E6EFFD;
  --blue-softer: #F2F6FE;
  --orange:      #FF6A1F;
  --orange-deep: #E5530A;
  --orange-soft: #FFEDDF;
  --orange-softer:#FFF6EE;
  --green:       #1F6FEB;
  --green-soft:  #E6EFFD;
  --red:         #FF6A1F;
  --red-soft:    #FFEDDF;
  --amber:       #FF6A1F;
  --amber-soft:  #FFEDDF;

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
           'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
           system-ui, sans-serif;
  --serif: var(--sans);
  --mono:  'SF Mono', ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
  --font:  var(--sans);

  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --shadow1: 0 1px 2px rgba(15,20,40,.04), 0 1px 1px rgba(15,20,40,.03);
  --shadow2: 0 4px 16px rgba(15,20,40,.06), 0 1px 3px rgba(15,20,40,.04);
  --shadow3: 0 12px 40px rgba(15,20,40,.10), 0 2px 8px rgba(15,20,40,.05);
}

/* ── 2. Reset body & typography ──────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { font-family: var(--sans); }
code, pre, [class*="mono"] { font-family: var(--mono) !important; }

/* Scrollbar — quiet */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #c7cbd3; }

/* ── 3. Top announcement bar (was orange marquee) ────────── */
.announce {
  background: var(--ink) !important;
  color: rgba(255,255,255,.85) !important;
  border-bottom: none !important;
  padding: 7px 0 !important;
}
.marquee {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── 4. Sticky nav ───────────────────────────────────────── */
.nav {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav-inner {
  max-width: 1400px !important;
  padding: 14px 32px !important;
}
.logo { gap: 8px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.logo-mark { color: var(--accent-2) !important; font-size: 18px !important; }
.dot { color: var(--accent) !important; }
.logo-text { color: var(--ink) !important; }

.nav-links { gap: 22px !important; font-size: 13.5px !important; }
.nav-links a { color: var(--ink2) !important; font-weight: 500 !important; padding: 6px 0 !important; }
.nav-links a:hover { color: var(--accent-2) !important; }
.nav-links a[aria-current="page"], .nav-links a.active { color: var(--ink) !important; font-weight: 600 !important; }

.nav-actions { gap: 6px !important; }
.icon-btn {
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  color: var(--ink2) !important;
  background: transparent !important;
  font-size: 16px !important;
}
.icon-btn:hover { background: var(--bg-soft) !important; color: var(--ink) !important; }

.theme-toggle {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 6px 10px !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--ink2) !important;
  font-size: 12px !important; font-weight: 500 !important;
}
.theme-toggle:hover { border-color: var(--accent-2) !important; color: var(--accent-2) !important; }
.theme-icon { font-size: 12px !important; }

.lang-btn { gap: 4px !important; }
.lang-code { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; }
.lang-menu {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow3) !important;
  padding: 4px !important;
}
.lang-menu a, .lang-menu button {
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  color: var(--ink2) !important;
}
.lang-menu a:hover, .lang-menu button:hover { background: var(--bg-soft) !important; }

.cart-btn {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  padding: 7px 14px !important;
  letter-spacing: -0.01em !important;
}
.cart-btn:hover { background: #1a1f30 !important; transform: none !important; }
.cart-count {
  background: var(--accent) !important;
  width: 18px !important; height: 18px !important;
  border-radius: 9px !important;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
}

/* Account dropdown */
.account-menu {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow3) !important;
}
.account-head { border-bottom: 1px solid var(--border-soft) !important; }
.account-name { font-weight: 600 !important; font-size: 13px !important; color: var(--ink) !important; }
.account-sub { font-size: 11.5px !important; color: var(--muted) !important; }
.account-cta {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.account-cta:hover { background: var(--accent-2) !important; }
.account-link { font-size: 12.5px !important; color: var(--ink2) !important; }
.account-link:hover { background: var(--bg-soft) !important; }
.account-divider { background: var(--border-soft) !important; }
.account-avatar {
  background: var(--accent-2) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ── 5. Hero — full re-style (was warm beige + serif) ──── */
.hero {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 56px 32px 48px !important;
  background: var(--bg) !important;
}
.hero-grid {
  grid-template-columns: 1.2fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
}

.kicker {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent-2) !important;
  margin-bottom: 22px !important;
  display: flex !important; align-items: center; gap: 10px;
}
.kicker::before {
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--accent-2) !important;
}

.hero-title {
  font-family: var(--sans) !important;
  font-size: clamp(44px, 7vw, 80px) !important;
  line-height: 0.98 !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
}
.hero-title em {
  font-style: normal !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.hero-sub {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  max-width: 480px !important;
  margin: 28px 0 !important;
}

.hero-cta { gap: 12px !important; margin-bottom: 36px !important; }

.hero-stats {
  gap: 40px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--border) !important;
}
.hero-stats strong {
  font-family: var(--sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}
.hero-stats span {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-top: 2px;
}

/* Editor's pick card — flatten & ground (was rotated) */
.hero-card, .hero-right .hero-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow2) !important;
  padding: 20px !important;
  transform: none !important;
}
.hero-card:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow3) !important; }
.hero-card-tag {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  padding: 4px 9px !important;
}
.hero-card-art {
  background: linear-gradient(135deg, var(--blue-softer), var(--blue-soft)) !important;
  border-radius: var(--radius-lg) !important;
  margin: 16px 0 !important;
}
.hero-card-name { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }
.hero-card-price {
  font-family: var(--sans) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* ── 6. Picks grid (mosaic on right side of hero) ──────── */
.picks-grid { gap: 12px !important; }
.picks-grid .pick-card,
.picks-grid > a, .picks-grid > div {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow1) !important;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease !important;
}
.picks-grid .pick-card:hover {
  box-shadow: var(--shadow2) !important;
  transform: translateY(-2px) !important;
}
.picks-grid .pick-tag {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
}
.picks-grid .pick-name { font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; }
.picks-grid .pick-price {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
}

/* ── 7. Buttons — Linear/Stripe pill style ─────────────── */
.btn {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  border: 1px solid transparent !important;
  transition: all .12s ease !important;
}
.btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.btn-primary:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  color: #fff !important;
  transform: none !important;
}
.btn-ghost {
  background: var(--paper) !important;
  color: var(--ink2) !important;
  border-color: var(--border) !important;
}
.btn-ghost:hover {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* ── 8. Categories pill rail (now nested inside .products) ───────────── */
.products > .cats {
  background: transparent !important;
  border: none !important;
  margin: 8px 0 16px !important;
  padding: 0 !important;
}
.products > .cats .cats-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.products > .cats .cats-inner::-webkit-scrollbar { display: none; }
.cat-pill {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink2) !important;
  letter-spacing: -0.01em !important;
  transition: all .12s ease !important;
}
.cat-pill:hover { background: var(--bg-soft) !important; }
.cat-pill.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

/* ── 9. Products section ───────────────────────────────── */
.products {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 40px 32px 24px !important;
}
.products-header { padding-bottom: 16px !important; }
.products-header h2 {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}
.count, .products-header .count {
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-left: 8px;
}
.sort {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  padding: 7px 12px !important;
  color: var(--ink2) !important;
}
.sort:focus { border-color: var(--accent-2) !important; outline: none; box-shadow: 0 0 0 3px rgba(31,111,235,.12) !important; }

.grid { gap: 16px !important; }

/* Product cards (general) */
.card, .product-card, .category-card, .feat-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow1) !important;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease !important;
}
.card:hover, .product-card:hover, .category-card:hover {
  box-shadow: var(--shadow2) !important;
  transform: translateY(-1px) !important;
}
.card .product-name, .product-card .name {
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important;
}
.card .product-cat, .product-card .sub {
  font-size: 11.5px !important; color: var(--muted) !important;
}

/* Prices — keep ink primary; only "sale" shows orange */
.price, .product-price, [class*="price"]:not(.price-old):not(.compare-price) {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}
.price-old, .compare-price, [class*="compare"], [class*="-strike"] {
  color: var(--faint) !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}
.price-sale, .sale-price, [class*="sale-price"] { color: var(--accent) !important; }

/* ── 10. Featured band (Apply to sell) ─────────────────── */
/* In light mode the band sits on a light page card; in dark mode it gets the
   ink gradient via tech-theme. Override styles.css's hardcoded dark .band-inner. */
.band {
  background: transparent !important;
  border: none !important;
  padding: 36px 32px 0 !important;
  margin: 36px 0 16px !important;
}
.band-inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow1, 0 1px 2px rgba(15,20,40,0.04));
}
.band-text { flex: 1; }
.band-kicker {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-2, #1F6FEB) !important;
  margin-bottom: 12px;
}
.band-text h3 {
  font-family: var(--sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.band-text h3 em {
  font-style: normal !important;
  color: var(--accent) !important;
}
.band-text p {
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-top: 12px !important;
  max-width: 560px;
  line-height: 1.55;
}
.band .btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.band .btn-primary:hover { background: #1a1e2c !important; color: #fff !important; }

/* Dark mode keeps the original dark gradient feel (handled by tech-theme.css) */
[data-theme="dark"] .band-inner {
  background: linear-gradient(135deg, #14182A, #0B0F19) !important;
  background-image: radial-gradient(circle at 80% 20%, rgba(255,106,31,0.18) 0%, transparent 50%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
[data-theme="dark"] .band-text h3 { color: #fff !important; }
[data-theme="dark"] .band-text p  { color: rgba(255,255,255,0.65) !important; }
[data-theme="dark"] .band .btn-primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ── 11. Tags / badges ─────────────────────────────────── */
.tag, .badge, [class*="badge"], [class*="-tag"] {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  display: inline-flex; align-items: center; gap: 4px;
}
.tag-primary, .badge-primary { background: var(--blue-soft) !important; color: var(--blue-deep) !important; }
.tag-accent,  .badge-accent  { background: var(--orange-soft) !important; color: var(--orange-deep) !important; }
.badge-blue   { background: var(--blue-soft) !important; color: var(--blue-deep) !important; }
.badge-green  { background: var(--green-soft) !important; color: #0F7B5B !important; }
.badge-amber  { background: var(--amber-soft) !important; color: #A05A00 !important; }
.badge-red    { background: var(--red-soft) !important; color: #A01F1F !important; }
.badge-gray   { background: var(--bg-soft) !important; color: var(--ink2) !important; }
.badge-violet { background: var(--blue-soft) !important; color: var(--blue-deep) !important; }
.badge-dark   { background: var(--ink) !important; color: #fff !important; }

/* ── 12. Forms ─────────────────────────────────────────── */
input, textarea, select {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  transition: border-color .12s, box-shadow .12s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31,111,235,.12) !important;
}
label { font-size: 12.5px !important; color: var(--ink2) !important; font-weight: 500 !important; }

input[type="submit"], button[type="submit"] {
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }

/* ── 13. Drawer (cart) ─────────────────────────────────── */
.drawer {
  background: var(--paper) !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -4px 0 32px rgba(15,20,40,.10) !important;
}
.drawer-head {
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 18px 22px !important;
}
.drawer-head h3 {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.drawer-foot { border-top: 1px solid var(--border-soft) !important; }
.total {
  font-size: 13px !important;
  color: var(--muted) !important;
  display: flex; justify-content: space-between; align-items: baseline;
}
.total strong {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
}
#checkoutBtn, .checkout-btn {
  background: var(--accent-2) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: 1px solid var(--accent-2) !important;
  font-weight: 600 !important;
  padding: 12px !important;
  font-size: 14px !important;
}
#checkoutBtn:hover, .checkout-btn:hover { background: var(--blue-deep) !important; border-color: var(--blue-deep) !important; }

/* ── 14. Modals ───────────────────────────────────────── */
.account-modal, #accountModal, .checkout-modal, .modal {
  z-index: 100;
}
.account-modal-panel, .checkout-panel, .modal-box {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow3) !important;
}
.account-modal-head, .checkout-head {
  border-bottom: 1px solid var(--border-soft) !important;
}
.account-modal-head h2, .checkout-title {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.search-close {
  background: transparent !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  width: 32px; height: 32px;
}
.search-close:hover { background: var(--bg-soft) !important; color: var(--ink) !important; }

.overlay { background: rgba(11,15,25,.45) !important; backdrop-filter: blur(4px); }

/* Step indicators (checkout) */
.checkout-steps .step {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.checkout-steps .step.active { color: var(--ink) !important; font-weight: 600 !important; }
.checkout-steps .step span {
  background: var(--bg-soft) !important;
  color: var(--ink2) !important;
  border-radius: 999px !important;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  margin-right: 8px;
}
.checkout-steps .step.active span { background: var(--ink) !important; color: #fff !important; }
.step-line { background: var(--border) !important; }

.pay-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
}

/* ── 15. Search overlay ───────────────────────────────── */
.search-overlay { background: rgba(11,15,25,.55) !important; backdrop-filter: blur(8px); }
.search-panel {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow3) !important;
}
.search-input-row { border-bottom: 1px solid var(--border-soft) !important; }
.search-input-row input {
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  padding: 18px 12px !important;
}
.search-input-row input:focus { box-shadow: none !important; }
.search-icon { color: var(--muted) !important; font-size: 18px !important; }
.search-hint { font-size: 12px !important; color: var(--muted) !important; }
.search-hint em { color: var(--accent-2) !important; font-style: normal !important; font-weight: 600 !important; }

/* ── 16. Login / auth box ──────────────────────────────── */
.login-box, .auth-card, [class*="login-box"], [class*="auth-box"] {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow3) !important;
}
.login-title, .auth-title {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}
.login-sub, .auth-sub { font-size: 12.5px !important; color: var(--muted) !important; }

/* ── 17. Toast ─────────────────────────────────────────── */
.toast, .notification {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow3) !important;
  font-size: 13px !important;
  font-family: var(--sans) !important;
}

/* ── 18. Footer ─────────────────────────────────────────── */
/* Light mode: light page background continues into footer with a soft top border.
   Dark mode: keep the ink-on-dark feel (handled in [data-theme="dark"] block). */
footer.foot, footer, .footer {
  background: var(--bg) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
  padding: 48px 0 28px !important;
}
.foot-inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex; gap: 64px;
  align-items: flex-start;
}
.foot-brand .logo, .foot-brand .logo-text { color: var(--ink) !important; }
.foot-brand p { font-size: 12.5px !important; line-height: 1.6 !important; margin-top: 14px; max-width: 320px; color: var(--muted) !important; }
.foot-brand em { color: var(--accent) !important; }
.foot-cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-cols h5 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink2, #1F2937) !important;
  margin-bottom: 14px !important;
}
footer a, .footer a {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  display: block !important;
  padding: 4px 0 !important;
}
footer a:hover, .footer a:hover { color: var(--ink) !important; }

/* Dark-mode footer (overrides above + tech-theme.css) */
[data-theme="dark"] footer.foot,
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
  background: #050811 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
}
[data-theme="dark"] .foot-brand .logo,
[data-theme="dark"] .foot-brand .logo-text { color: #fff !important; }
[data-theme="dark"] .foot-brand p { color: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] .foot-cols h5 { color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] footer a,
[data-theme="dark"] .footer a { color: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] footer a:hover,
[data-theme="dark"] .footer a:hover { color: #fff !important; }

/* ── 19. Generic active/link colors ─────────────────────── */
a:hover { color: var(--accent-2) !important; }
.active, [class*="-active"], [aria-selected="true"] { color: var(--accent-2); }

/* ── 20. Kill the .hero-card rotate the original CSS uses ─ */
.hero-card { transform: none !important; }

/* ── 21. PDP & list page polish ─────────────────────────── */
.pdp-wrap, #pdp { background: var(--bg) !important; }
.pdp-title, .pdp h1 {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}

/* ── 22. Dark mode — re-map to clean tech-dark ─────────── */
[data-theme="dark"] {
  --bg:          #0B0F19 !important;
  --bg-soft:     #131726 !important;
  --paper:       #131726 !important;
  --surface:     #131726 !important;
  --surface-2:   #1A1F32 !important;
  --surface-3:   #232840 !important;
  --ink:         #E8ECF5 !important;
  --ink2:        #C7CCD9 !important;
  --muted:       #8B93A8 !important;
  --faint:       #5E6680 !important;
  --border:      rgba(255,255,255,0.10) !important;
  --border-soft: rgba(255,255,255,0.06) !important;
  --line:        rgba(255,255,255,0.10) !important;
  --divider:     rgba(255,255,255,0.06) !important;
  --accent:      #FF7A33 !important;
  --accent-2:    #4B8FFF !important;
  --blue:        #4B8FFF !important;
  --blue-deep:   #6BA3FF !important;
  --blue-soft:   rgba(75,143,255,.18) !important;
  --blue-softer: rgba(75,143,255,.10) !important;
  --orange:      #FF7A33 !important;
  --orange-deep: #FF9460 !important;
  --orange-soft: rgba(255,122,51,.18) !important;
}
[data-theme="dark"] body, [data-theme="dark"] html {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .nav {
  background: rgba(11,15,25,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"] .announce { background: #050811 !important; color: rgba(255,255,255,.7) !important; }

[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .picks-grid > a,
[data-theme="dark"] .picks-grid > div,
[data-theme="dark"] .picks-grid .pick-card,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .drawer,
[data-theme="dark"] .login-box,
[data-theme="dark"] .account-menu,
[data-theme="dark"] .account-modal-panel,
[data-theme="dark"] .checkout-panel,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .lang-menu {
  background: var(--paper) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .cat-pill:hover { background: var(--surface-2) !important; }
[data-theme="dark"] .theme-toggle { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--ink2) !important; }

[data-theme="dark"] .btn-primary {
  background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--accent-2) !important; color: #fff !important; border-color: var(--accent-2) !important;
}
[data-theme="dark"] .btn-ghost {
  background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .cart-btn { background: var(--accent-2) !important; }

[data-theme="dark"] .hero-card-art { background: linear-gradient(135deg, rgba(75,143,255,.20), rgba(75,143,255,.08)) !important; }

/* End */

/* ── 23. Editor's picks tile-art — match standalone HTML look ── */
.picks-grid .pick-art {
  background: linear-gradient(135deg, var(--blue-softer) 0%, var(--blue-soft) 100%) !important;
  border-radius: var(--radius-lg) !important;
  position: relative; overflow: hidden;
}
.picks-grid .pick-art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(31,111,235,.12) 0%, transparent 55%);
  pointer-events: none;
}
.picks-grid .pick-art svg, .picks-grid .pick-art img { position: relative; z-index: 1; }
.picks-grid .pick-card {
  padding: 14px !important;
  border-radius: var(--radius-lg) !important;
}
.picks-grid .pick-big {
  padding: 18px !important;
  border-radius: var(--radius-xl) !important;
}
.picks-grid .pick-name {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--ink) !important;
}
.picks-grid .pick-big .pick-name { font-size: 14.5px !important; }
.picks-grid .pick-price {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}
.picks-grid .pick-big .pick-price { font-size: 20px !important; }
.picks-grid .pick-tag {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
}
.picks-grid .pick-card { position: relative; }

[data-theme="dark"] .picks-grid .pick-art {
  background: linear-gradient(135deg, rgba(75,143,255,.16) 0%, rgba(75,143,255,.06) 100%) !important;
}
[data-theme="dark"] .picks-grid .pick-art::after {
  background: radial-gradient(circle at 30% 30%, rgba(75,143,255,.20) 0%, transparent 55%);
}

/* ── 24. Generic product visual / SVG art panels ───────── */
.product-visual, .product-art, .pdp-art, [class*="-art"] {
  background: linear-gradient(135deg, var(--blue-softer) 0%, var(--blue-soft) 100%) !important;
}
[data-theme="dark"] .product-visual,
[data-theme="dark"] .product-art,
[data-theme="dark"] .pdp-art,
[data-theme="dark"] [class*="-art"] {
  background: linear-gradient(135deg, rgba(75,143,255,.18) 0%, rgba(75,143,255,.06) 100%) !important;
}

/* ── 25. Field labels & helper text ────────────────────── */
.checkout-form label,
.acct-form label,
.field label {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink2) !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.checkbox-row {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 12.5px !important; color: var(--ink2) !important;
}
.field-row { display: flex; gap: 12px; }
.field-row > * { flex: 1; }

/* ── 26. Done state ─────────────────────────────────── */
.done-mark {
  width: 64px !important; height: 64px !important;
  border-radius: 32px !important;
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  font-size: 32px !important; font-weight: 700;
  margin: 0 auto 18px !important;
}
.done-sub { color: var(--muted) !important; font-size: 13.5px !important; line-height: 1.55; text-align: center; }
.done-order {
  background: var(--bg-soft) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  text-align: center;
  margin-top: 16px;
}

/* ════════════════════════════════════════════════════════════
   §22  New homepage sections (per ConceptStoreAI_P3 reference)
   ════════════════════════════════════════════════════════════ */

/* Generic section title (shared by flash/brands/live) */
.section-title {
  max-width: 1400px; margin: 0 auto; padding: 36px 32px 16px;
  display: flex; align-items: flex-end; gap: 16px;
}
.section-title h2 {
  font-family: var(--sans) !important;
  font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: -0.4px !important; color: var(--ink) !important;
  margin: 0 !important;
}
.section-title p {
  font-size: 12.5px !important; color: var(--muted) !important;
  margin: 4px 0 0 !important;
}
.section-title > div:first-child { flex: 1; }
.section-link {
  font-size: 12.5px !important; color: var(--accent-2, #1F6FEB) !important;
  font-weight: 500 !important; text-decoration: none !important;
  white-space: nowrap;
}
.section-link:hover { color: var(--accent-2, #1F6FEB) !important; opacity: 0.85; }

/* ── Service strip ─────────────────────────────────────── */
.service-strip {
  background: var(--paper) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: -1px;
}
.service-strip-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 16px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.svc-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink2, #1F2937);
  font-weight: 500;
}
.svc-icon {
  font-size: 16px; color: var(--accent-2, #1F6FEB);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
[data-theme="dark"] .service-strip { background: var(--surface-2) !important; }
[data-theme="dark"] .svc-item { color: var(--ink) !important; }
@media (max-width: 900px) {
  .service-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── Flash deals ───────────────────────────────────────── */
.flash-deals { padding: 0; margin-top: 8px; }
.flash-timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  font-family: var(--mono);
}
.flash-timer strong {
  color: var(--accent) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.flash-grid {
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.flash-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.flash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,20,40,0.07);
  border-color: var(--accent-2, #1F6FEB) !important;
}
.flash-img {
  position: relative;
  aspect-ratio: 1.15 / 1;
  background: linear-gradient(135deg, #E6EFFD 0%, #F2F6FE 100%);
}
.flash-img[data-seed="1"] { background: linear-gradient(135deg, #FFEDDF, #FFF6EE); }
.flash-img[data-seed="2"] { background: linear-gradient(135deg, #E6EFFD, #FAFBFC); }
.flash-img[data-seed="3"] { background: linear-gradient(135deg, #FFEDDF, #FAFBFC); }
.flash-img[data-seed="4"] { background: linear-gradient(135deg, #E6EFFD, #FFF6EE); }
.flash-img::before {
  content: ''; position: absolute; inset: 22% 28%;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(31,111,235,0.25);
  box-shadow: 0 8px 24px rgba(15,20,40,0.08);
}
.flash-img::after {
  content: ''; position: absolute; left: 50%; top: 44%; width: 22%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1F6FEB 0%, #0E4FB8 60%, #062970 100%);
  box-shadow: 0 6px 14px rgba(31,111,235,0.35);
}
.flash-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  z-index: 2;
}
.flash-tag-red { background: var(--accent, #FF6A1F); color: #fff; }
.flash-tag-blue { background: var(--accent-2, #1F6FEB); color: #fff; }
.flash-body { padding: 12px 14px 14px; }
.flash-body h4 {
  font-size: 13px !important; font-weight: 600 !important;
  margin: 0 !important; color: var(--ink) !important;
  letter-spacing: -0.1px;
}
.flash-sub {
  font-size: 10.5px; color: var(--muted);
  margin-top: 2px;
}
.flash-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 8px;
}
.flash-price-now {
  font-size: 20px; font-weight: 700;
  color: var(--accent, #FF6A1F);
  font-variant-numeric: tabular-nums;
}
.flash-price-orig {
  font-size: 11px; color: var(--faint, #9CA3AF);
  text-decoration: line-through;
}
.flash-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 10.5px; color: var(--muted);
}
.flash-meta .star {
  color: var(--accent, #FF6A1F);
  display: inline-flex; align-items: center; gap: 2px;
}
.flash-meta .star em {
  font-style: normal; color: var(--muted);
}
.flash-progress {
  height: 4px; background: var(--bg-soft, #F1F3F6);
  border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.flash-progress-bar {
  height: 100%; background: var(--accent, #FF6A1F);
  border-radius: 2px;
  transition: width .3s ease;
}
[data-theme="dark"] .flash-card { background: var(--surface-2, #14182A) !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .flash-img { background: linear-gradient(135deg, rgba(31,111,235,0.18), rgba(255,106,31,0.10)) !important; }
[data-theme="dark"] .flash-progress { background: rgba(255,255,255,0.08); }

@media (max-width: 1100px) { .flash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .flash-grid { grid-template-columns: 1fr; } }

/* ── Featured brands ───────────────────────────────────── */
.brands { padding: 0; }
.brands-grid {
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.brand-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: block !important;
}
.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,20,40,0.07);
  border-color: var(--accent-2, #1F6FEB) !important;
}
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 12px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
  letter-spacing: -0.4px;
}
.brand-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink) !important;
  margin-top: 10px;
}
.brand-tag {
  font-size: 10.5px; color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
[data-theme="dark"] .brand-card { background: var(--surface-2) !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .brand-name { color: var(--ink) !important; }

@media (max-width: 1100px) { .brands-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .brands-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Live shopping ──────────────────────────────────── */
.live-now { padding: 0; }
.live-grid {
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.live-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.live-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,20,40,0.07);
}
.live-stage {
  position: relative;
  aspect-ratio: 1.2 / 1;
  background: linear-gradient(135deg, #1F2937 0%, #0B0F19 100%);
}
.live-card[data-seed="0"] .live-stage { background: linear-gradient(135deg, #1F6FEB 0%, #0B0F19 100%); }
.live-card[data-seed="1"] .live-stage { background: linear-gradient(135deg, #FF6A1F 0%, #0B0F19 100%); }
.live-card[data-seed="2"] .live-stage { background: linear-gradient(135deg, #1F6FEB 0%, #0E4FB8 100%); }
.live-card[data-seed="4"] .live-stage { background: linear-gradient(135deg, #1F6FEB 0%, #0B0F19 100%); }
.live-pill {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--accent, #FF6A1F);
  color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px;
  z-index: 2;
}
.live-pill .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.4s ease infinite;
}
@keyframes live-pulse { 50% { opacity: 0.4; } }
.live-views {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10.5px; border-radius: 999px;
  z-index: 2;
}
.live-overlay {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  padding: 8px 10px;
  background: rgba(11,15,25,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.live-overlay-text { flex: 1; min-width: 0; }
.live-product {
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-tinylabel { font-size: 9.5px; opacity: 0.7; }
.live-price {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-host {
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.live-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.live-host-text { flex: 1; min-width: 0; }
.live-topic {
  font-size: 12px; font-weight: 600;
  color: var(--ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-handle {
  font-size: 10.5px; color: var(--muted);
  margin-top: 1px;
}
[data-theme="dark"] .live-card { background: var(--surface-2) !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .live-topic { color: var(--ink) !important; }

@media (max-width: 1100px) { .live-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .live-grid { grid-template-columns: 1fr; } }

/* Section spacing tweaks */
.flash-deals + .products { margin-top: 16px; }
.products + .brands     { margin-top: 16px; }
.brands + .live-now     { margin-top: 16px; }
.live-now + .band       { margin-top: 16px; }

/* Responsive section title */
@media (max-width: 600px) {
  .section-title { padding: 28px 16px 12px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .section-title h2 { font-size: 18px !important; }
  .flash-grid, .brands-grid, .live-grid, .service-strip-inner { padding: 0 16px; }
}

/* ── Top nav: App link (plain text, accent-colored) ──── */
.nav-links a.nav-app-link,
.nav-links a.nav-app-link span,
.nav-app-link {
  color: var(--accent, #FF6A1F) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity .12s ease;
}

/* Section anchor offset — accounts for sticky nav */
section[id] { scroll-margin-top: 80px; }

.nav-links a.nav-app-link:hover,
.nav-app-link:hover {
  opacity: 0.78;
  text-decoration: none !important;
  color: var(--accent, #FF6A1F) !important;
}
[data-theme="dark"] .nav-links a.nav-app-link,
[data-theme="dark"] .nav-app-link {
  color: var(--accent, #FF6A1F) !important;
}
[data-theme="dark"] .nav-links a.nav-app-link:hover,
[data-theme="dark"] .nav-app-link:hover {
  opacity: 0.78;
  color: var(--accent, #FF6A1F) !important;
}

/* ── Announce bar: APK link in marquee ─────────────────── */
.announce .marquee a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 3px;
}
.announce .marquee a:hover {
  text-decoration-color: var(--accent, #FF6A1F);
  color: var(--accent, #FF6A1F) !important;
}

/* Responsive: 4-col footer collapses on narrow */
@media (max-width: 900px) {
  .foot-cols { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .foot-cols { grid-template-columns: 1fr !important; }
  .nav-app-link { display: none; }  /* hide on mobile, marquee+footer cover it */
}

/* ════════════════════════════════════════════════════════════
   §  Get-the-app link (single line, sits above footer)
   ════════════════════════════════════════════════════════════ */
.get-app {
  max-width: 1400px;
  margin: 0 auto 28px;
  padding: 0 32px;
}
.get-app-link {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent, #FF6A1F) !important;
  text-decoration: none !important;
  padding: 4px 0;
  letter-spacing: -0.005em;
  transition: opacity .15s ease;
}
.get-app-link:hover {
  opacity: 0.78;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Dark-mode parity */
[data-theme="dark"] .get-app-link {
  color: var(--accent, #FF6A1F) !important;
}

/* Mobile */
@media (max-width: 520px) {
  .get-app { padding: 0 16px; }
  .get-app-link { font-size: 13px; }
}

/* ── Compliance panel — dark theme overrides ──
   Keeps warnings legible against the deep background while staying within
   the existing accent palette. */
[data-theme="dark"] .compliance-warning{background:rgba(255,91,31,0.1);border-color:rgba(255,91,31,0.4)}
[data-theme="dark"] .compliance-warning-recall{background:rgba(220,38,38,0.1);border-color:rgba(220,38,38,0.4)}
[data-theme="dark"] .compliance-warning-bio{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.18)}
[data-theme="dark"] .compliance-warning-icon{background:#1a1a1a}
[data-theme="dark"] .compliance-fcc{background:#1a1a1a;border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .compliance-section{background:#1a1a1a;border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .compliance-section-head:hover{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .compliance-section-body{border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .comp-row{border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .compliance-empty{background:#1a1a1a;border-color:rgba(255,255,255,0.15)}
[data-theme="dark"] .compliance-empty-icon{background:#0a0a0a}