/* =====================================================================
   TwinnPeak theme (added 26 Oct 2026)
   Shared look for the header, footer, homepage and page restyling.
   Loaded by includes/tp-header.php on every public page.
   ===================================================================== */
:root {
  --tp-ink: #10243e;
  --tp-navy: #1f4e79;
  --tp-navy-900: #10243e;
  --tp-navy-800: #1a3352;
  --tp-blue: #2563eb;
  --tp-blue-dark: #1d4ed8;
  --tp-blue-darker: #1e40af;
  --tp-red: #d63b35;
  --tp-text: #3d4f66;
  --tp-muted: #52627a;
  --tp-line: #dbe3ee;
  --tp-line-strong: #c3d0e1;
  --tp-surface: #f4f7fb;
  --tp-tint: #eaf1fb;
  --tp-white: #ffffff;
  --tp-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tp-font-display: Manrope, Inter, system-ui, sans-serif;
  --tp-radius: 14px;
  --tp-radius-sm: 10px;
  --tp-shadow: 0 1px 2px rgba(16, 36, 62, 0.06), 0 8px 24px -12px rgba(16, 36, 62, 0.18);
}
html.tp-lock, html.tp-lock body { overflow: hidden; }

/* ---------- base ---------- */
body.tp-site {
  font-family: var(--tp-font) !important;
  color: var(--tp-ink);
  background: var(--tp-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.tp-site h1, body.tp-site h2, body.tp-site h3 { font-family: var(--tp-font-display); letter-spacing: -0.01em; }
.tp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.tp-btn, a.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1px solid var(--tp-blue); border-radius: var(--tp-radius-sm);
  background: var(--tp-blue); color: var(--tp-white) !important; font: 700 15px/1 var(--tp-font);
  text-decoration: none !important; cursor: pointer; white-space: nowrap; box-shadow: none; transition: background .15s ease;
}
.tp-btn:hover { background: var(--tp-blue-dark); border-color: var(--tp-blue-dark); color: var(--tp-white); }
.tp-btn-outline, a.tp-btn-outline { background: var(--tp-white); color: var(--tp-ink) !important; border-color: var(--tp-line-strong); }
.tp-btn-outline:hover { background: var(--tp-surface); color: var(--tp-ink); }
.tp-btn-light, a.tp-btn-light { background: var(--tp-white); border-color: var(--tp-white); color: var(--tp-ink) !important; }
.tp-btn-light:hover { background: #e9eff7; border-color: #e9eff7; }
.tp-btn-ghost-light, a.tp-btn-ghost-light { background: transparent; border-color: #5d7a9e; color: var(--tp-white) !important; }
.tp-btn-ghost-light:hover { background: rgba(255,255,255,0.08); }
.tp-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.tp-btn-block { width: 100%; }
.tp-link, a.tp-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tp-ink) !important; font: 600 15px/1 var(--tp-font); text-decoration: none !important; }
.tp-link:hover { color: var(--tp-blue-dark) !important; }

/* ---------- header ---------- */
header.tp-header {
  position: relative; z-index: 900; margin: 0; padding: 0; height: auto; min-height: 0;
  background: var(--tp-white) !important; border: 0; border-bottom: 1px solid var(--tp-line);
  box-shadow: none; color: var(--tp-ink); font-family: var(--tp-font);
}
.tp-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 32px; min-height: 72px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px 28px;
}
.tp-brand { display: flex !important; align-items: center; gap: 12px; text-decoration: none !important; flex: none; }
.tp-brand-mark { width: 52px; height: 30px; display: block; }
.tp-brand-text { display: flex; flex-direction: column; line-height: 1; }
.tp-brand-name { font: 800 21px/1 var(--tp-font-display); letter-spacing: 0.02em; color: var(--tp-navy); }
.tp-brand-name-light { color: var(--tp-white); }
.tp-brand-sub { font: 600 10.5px/1 var(--tp-font); letter-spacing: 0.18em; color: var(--tp-muted); margin-top: 5px; }
.tp-nav { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; margin: 0; padding: 0; background: none; }
.tp-nav a.tp-nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--tp-ink); font: 600 15px/1 var(--tp-font); text-decoration: none; background: none; border: 0;
}
.tp-nav a.tp-nav-link:hover { color: var(--tp-blue-dark); background: var(--tp-surface); }
.tp-nav a.tp-nav-link.is-active { color: var(--tp-blue-dark); box-shadow: inset 0 -2px 0 var(--tp-blue); border-radius: 0; }
.tp-search {
  flex: 1 1 220px; max-width: 340px; display: flex; align-items: center; margin: 0 0 0 auto; padding: 0;
  border: 1px solid var(--tp-line-strong); border-radius: var(--tp-radius-sm); background: var(--tp-white); overflow: hidden;
}
.tp-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto; height: 42px; margin: 0; padding: 0 12px; border: 0 !important;
  background: transparent; box-shadow: none !important; outline: none; font: 400 15px/1 var(--tp-font); color: var(--tp-ink); border-radius: 0;
}
.tp-search:focus-within { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.tp-search button {
  flex: none; width: 44px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--tp-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
.tp-search button:hover { color: var(--tp-blue-dark); background: var(--tp-surface); }
.tp-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.tp-search + .tp-actions { margin-left: 0; }
.tp-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: var(--tp-radius-sm); background: transparent; color: var(--tp-ink) !important;
  cursor: pointer; text-decoration: none !important; box-shadow: none;
}
.tp-icon-btn:hover { background: var(--tp-surface); }
.tp-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--tp-red); color: var(--tp-white); font: 700 11px/18px var(--tp-font); text-align: center;
}
.tp-account { position: relative; }
.tp-account-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 10px 0 6px;
  border: 1px solid var(--tp-line); border-radius: 999px; background: var(--tp-white); color: var(--tp-ink);
  font: 600 14px/1 var(--tp-font); cursor: pointer; box-shadow: none;
}
.tp-account-btn:hover { background: var(--tp-surface); }
.tp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tp-navy); color: var(--tp-white); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--tp-font); }
.tp-account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 950; min-width: 220px; padding: 8px;
  background: var(--tp-white); border: 1px solid var(--tp-line); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow);
}
.tp-account-menu[hidden] { display: none; }
.tp-account-menu a { display: block; padding: 11px 12px; border-radius: 8px; color: var(--tp-ink); font: 500 15px/1.2 var(--tp-font); text-decoration: none; }
.tp-account-menu a:hover { background: var(--tp-surface); color: var(--tp-blue-dark); }
.tp-account-label { display: block; padding: 8px 12px 6px; font: 700 12px/1 var(--tp-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-muted); }
.tp-account-menu .tp-account-logout { border-top: 1px solid var(--tp-line); margin-top: 6px; padding-top: 14px; border-radius: 0 0 8px 8px; }
.tp-menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius-sm); background: var(--tp-white); color: var(--tp-ink); cursor: pointer; box-shadow: none;
}

/* drawer */
.tp-drawer-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(16, 36, 62, 0.5); }
.tp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999; width: min(340px, 88vw); box-sizing: border-box;
  padding: 0 20px 28px; background: var(--tp-white); overflow-y: auto; box-shadow: -8px 0 32px rgba(16, 36, 62, 0.18); font-family: var(--tp-font);
}
.tp-drawer[hidden], .tp-drawer-backdrop[hidden] { display: none; }
.tp-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 72px; border-bottom: 1px solid var(--tp-line); margin-bottom: 16px; }
.tp-drawer-close { width: 44px; height: 44px; border: 0; border-radius: var(--tp-radius-sm); background: transparent; color: var(--tp-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tp-drawer-close:hover { background: var(--tp-surface); }
.tp-drawer-search { display: flex; gap: 8px; margin: 0 0 16px; }
.tp-drawer-search input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--tp-line-strong); border-radius: var(--tp-radius-sm); font: 400 16px/1 var(--tp-font); color: var(--tp-ink); box-sizing: border-box; }
.tp-drawer-search button { height: 46px; padding: 0 16px; border: 0; border-radius: var(--tp-radius-sm); background: var(--tp-blue); color: var(--tp-white); font: 700 15px/1 var(--tp-font); cursor: pointer; }
.tp-drawer-nav { display: flex; flex-direction: column; border-bottom: 1px solid var(--tp-line); padding-bottom: 12px; margin-bottom: 16px; }
.tp-drawer-nav a, .tp-drawer-account a:not(.tp-btn) { display: flex; align-items: center; min-height: 46px; padding: 0 8px; border-radius: 8px; color: var(--tp-ink); font: 600 16px/1 var(--tp-font); text-decoration: none; }
.tp-drawer-nav a:hover, .tp-drawer-account a:not(.tp-btn):hover { background: var(--tp-surface); color: var(--tp-blue-dark); }
.tp-drawer-account { display: flex; flex-direction: column; gap: 8px; }
.tp-drawer-account .tp-drawer-small { justify-content: center; font-size: 15px; font-weight: 500; color: var(--tp-blue-dark); }

/* ---------- footer ---------- */
footer.tp-footer { margin: 0; padding: 0; background: var(--tp-navy-900) !important; color: #c4d3e8; font-family: var(--tp-font); border: 0; }
.tp-footer-inner { max-width: 1280px; margin: 0 auto; padding: 64px 32px 32px; box-sizing: border-box; }
.tp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.tp-footer-about p { margin: 16px 0 0; font: 400 15px/1.6 var(--tp-font); color: #c4d3e8; max-width: 320px; }
.tp-footer nav { display: flex; flex-direction: column; gap: 2px; background: none; padding: 0; }
.tp-footer h2 { margin: 0 0 10px; font: 700 13px/1 var(--tp-font) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-white); }
.tp-footer a { display: inline-block; padding: 6px 0; color: #c4d3e8; font: 400 15px/1.4 var(--tp-font); text-decoration: none; }
.tp-footer a:hover { color: var(--tp-white); text-decoration: underline; }
.tp-footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid #2c4566; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 14px/1.4 var(--tp-font); }
.tp-footer-legal { display: flex; gap: 20px; }
.tp-footer-legal a { padding: 0; font-size: 14px; }

/* ---------- responsive header ---------- */
@media (max-width: 1180px) {
  .tp-header .tp-search { display: none; }
  .tp-actions { margin-left: auto !important; }
}
@media (max-width: 960px) {
  .tp-nav { display: none; }
  .tp-menu-btn { display: inline-flex; }
  .tp-account-name { display: none; }
}
@media (max-width: 600px) {
  .tp-header-inner { padding: 10px 16px; min-height: 64px; }
  .tp-hide-sm { display: none !important; }
  .tp-brand-sub { display: none; }
  .tp-brand-mark { width: 44px; height: 26px; }
  .tp-brand-name { font-size: 19px; }
  .tp-account { display: none; }
  .tp-footer-inner { padding: 48px 20px 28px; }
}


/* ---------- layout helpers ---------- */
.tp-wrap { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.tp-eyebrow { margin: 0 0 16px; font: 700 13px/1.2 var(--tp-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-navy); }
.tp-section { padding-top: 88px; padding-bottom: 88px; }
.tp-section-tight { padding-top: 56px; padding-bottom: 56px; }
.tp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.tp-section-head h2, .tp-h2 { margin: 0; font: 800 34px/1.15 var(--tp-font-display) !important; letter-spacing: -0.02em; color: var(--tp-ink); }
.tp-section-head p { margin: 8px 0 0; font: 400 16px/1.5 var(--tp-font); color: var(--tp-muted); }
.tp-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 15px/1 var(--tp-font); color: var(--tp-blue-dark); text-decoration: none; }
.tp-more:hover { text-decoration: underline; }

/* ---------- homepage ---------- */
.tp-home-hero { background: var(--tp-surface); border-bottom: 1px solid var(--tp-line); }
.tp-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.tp-hero-grid > * { min-width: 0; }
.tp-home-hero h1 { margin: 0; font: 800 clamp(38px, 4.6vw, 60px)/1.06 var(--tp-font-display) !important; letter-spacing: -0.025em; color: var(--tp-ink); }
.tp-hero-lead { margin: 24px 0 0; max-width: 560px; font: 400 19px/1.55 var(--tp-font); color: var(--tp-text); }
.tp-hero-search { margin: 36px 0 0; max-width: 620px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--tp-white); border: 1px solid var(--tp-line-strong); border-radius: var(--tp-radius); box-shadow: 0 1px 2px rgba(16,36,62,0.06); }
.tp-hero-search:focus-within { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.tp-hero-search input { flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 14px; border: 0 !important; background: transparent; box-shadow: none !important; outline: none; font: 400 16px/1 var(--tp-font); color: var(--tp-ink); }
.tp-hero-search button { height: 52px; padding: 0 26px; border: 0; border-radius: var(--tp-radius-sm); background: var(--tp-blue); color: var(--tp-white); font: 700 16px/1 var(--tp-font); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tp-hero-search button:hover { background: var(--tp-blue-dark); }
.tp-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-chips span { font: 400 14px/1 var(--tp-font); color: var(--tp-muted); margin-right: 4px; }
.tp-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--tp-line-strong); background: var(--tp-white); color: var(--tp-navy); font: 500 14px/1 var(--tp-font); text-decoration: none; }
.tp-chip:hover { border-color: var(--tp-blue); color: var(--tp-blue-dark); }
.tp-feature { background: var(--tp-white); border: 1px solid var(--tp-line); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(16,36,62,0.35); }
.tp-feature-media { position: relative; height: 320px; background: var(--tp-white); border-bottom: 1px solid var(--tp-line); display: flex; align-items: center; justify-content: center; }
.tp-feature-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; }
.tp-tag { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tp-navy-900); color: var(--tp-white); font: 700 12px/1 var(--tp-font); letter-spacing: 0.06em; text-transform: uppercase; }
.tp-feature-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.tp-feature-body h2 { margin: 0; font: 800 22px/1.3 var(--tp-font-display) !important; color: var(--tp-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-feature-body h2 a { color: inherit; text-decoration: none; }
.tp-cat-label { margin: 0; font: 600 13px/1.3 var(--tp-font); color: var(--tp-navy); }
.tp-sold-by { margin: 0; font: 400 15px/1.4 var(--tp-font); color: var(--tp-muted); }
.tp-sold-by a { color: inherit; }
.tp-price-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tp-price { font: 800 30px/1 var(--tp-font-display); color: var(--tp-ink); }
.tp-stats { border-bottom: 1px solid var(--tp-line); }
.tp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.tp-stat-num { margin: 0; font: 800 36px/1.1 var(--tp-font-display); color: var(--tp-ink); }
.tp-stat-label { margin: 4px 0 0; font: 400 15px/1.4 var(--tp-font); color: var(--tp-muted); }
.tp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tp-cat { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--tp-line); border-radius: 16px; background: var(--tp-white); color: var(--tp-ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.tp-cat:hover { border-color: var(--tp-blue); box-shadow: var(--tp-shadow); }
.tp-cat-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--tp-tint); color: var(--tp-navy); display: flex; align-items: center; justify-content: center; }
.tp-cat-name { display: block; font: 700 17px/1.3 var(--tp-font); }
.tp-cat-count { display: block; margin-top: 4px; font: 400 14px/1.3 var(--tp-font); color: var(--tp-muted); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tp-card { display: flex; flex-direction: column; border: 1px solid var(--tp-line); border-radius: 16px; overflow: hidden; background: var(--tp-white); transition: border-color .15s ease, box-shadow .15s ease; }
.tp-card:hover { border-color: var(--tp-line-strong); box-shadow: var(--tp-shadow); }
.tp-card-media { display: block; height: 210px; background: var(--tp-white); border-bottom: 1px solid var(--tp-line); }
.tp-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; display: block; }
.tp-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tp-card-title { margin: 0; font: 700 16px/1.4 var(--tp-font) !important; color: var(--tp-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-card-title a { color: inherit; text-decoration: none; }
.tp-card-title a:hover { color: var(--tp-blue-dark); }
.tp-card-vendor { margin: 0; font: 400 14px/1.4 var(--tp-font); color: var(--tp-muted); }
.tp-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-card-price { font: 800 21px/1 var(--tp-font-display); color: var(--tp-ink); }
.tp-card-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 700 14px/1 var(--tp-font); color: var(--tp-blue-dark); text-decoration: none; }
.tp-sell { background: var(--tp-navy-900); color: var(--tp-white); }
.tp-sell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.tp-sell-grid > * { min-width: 0; }
.tp-sell .tp-eyebrow { color: #9fb8d8; }
.tp-sell h2 { margin: 0; font: 800 clamp(32px, 3.4vw, 44px)/1.1 var(--tp-font-display) !important; letter-spacing: -0.02em; color: var(--tp-white); }
.tp-sell p.tp-sell-lead { margin: 20px 0 0; max-width: 520px; font: 400 18px/1.6 var(--tp-font); color: #d2deee; }
.tp-sell-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.tp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.tp-steps li { display: flex; gap: 20px; padding: 22px 24px; border-radius: 16px; background: var(--tp-navy-800); }
.tp-step-num { font: 800 22px/1.2 var(--tp-font-display); color: #8fb0dc; }
.tp-step-title { display: block; font: 700 18px/1.3 var(--tp-font); color: var(--tp-white); }
.tp-step-text { display: block; margin-top: 4px; font: 400 15px/1.5 var(--tp-font); color: #c4d3e8; }
.tp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.tp-trust-item { display: flex; flex-direction: column; gap: 12px; }
.tp-trust-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--tp-tint); color: var(--tp-navy); display: flex; align-items: center; justify-content: center; }
.tp-trust-item h3 { margin: 0; font: 700 18px/1.3 var(--tp-font) !important; color: var(--tp-ink); }
.tp-trust-item p { margin: 0; font: 400 15px/1.6 var(--tp-font); color: var(--tp-muted); }
.tp-vendors { border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); padding: 28px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.tp-vendors-label { font: 700 13px/1 var(--tp-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-muted); }
.tp-vendors a { font: 700 18px/1.3 var(--tp-font-display); color: var(--tp-text); text-decoration: none; padding: 8px 0; }
.tp-vendors a:hover { color: var(--tp-blue-dark); }
.tp-news-band { background: var(--tp-surface); }
.tp-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tp-news-card { display: flex; flex-direction: column; border-radius: 16px; background: var(--tp-white); border: 1px solid var(--tp-line); overflow: hidden; text-decoration: none; color: var(--tp-ink); }
.tp-news-card:hover { border-color: var(--tp-line-strong); box-shadow: var(--tp-shadow); }
.tp-news-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.tp-news-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tp-news-source { font: 600 13px/1 var(--tp-font); color: var(--tp-muted); }
.tp-news-title { font: 700 18px/1.4 var(--tp-font); color: var(--tp-ink); }
.tp-news-more { margin-top: auto; font: 700 14px/1 var(--tp-font); color: var(--tp-blue-dark); }
.tp-empty { padding: 40px; border: 1px dashed var(--tp-line-strong); border-radius: 16px; text-align: center; color: var(--tp-muted); font: 400 16px/1.5 var(--tp-font); }
@media (max-width: 600px) {
  .tp-wrap { padding-left: 20px; padding-right: 20px; }
  .tp-section { padding-top: 64px; padding-bottom: 64px; }
  .tp-hero-grid { padding-top: 48px; padding-bottom: 56px; gap: 40px; }
  .tp-feature-media { height: 240px; }
  .tp-section-head h2, .tp-h2 { font-size: 28px !important; }
  .tp-sell-grid { padding-top: 64px; padding-bottom: 64px; }
}


/* =====================================================================
   Existing page content, restyled to match (applies on body.tp-site)
   ===================================================================== */
body.tp-site .btn, body.tp-site a.btn, body.tp-site button.btn {
  border-radius: var(--tp-radius-sm); font-family: var(--tp-font); font-weight: 700; box-shadow: none; transform: none; letter-spacing: 0;
}
body.tp-site .btn-primary, body.tp-site a.btn-primary, body.tp-site button.btn-primary {
  background: var(--tp-blue) !important; background-image: none !important; border: 1px solid var(--tp-blue) !important; color: var(--tp-white) !important;
}
body.tp-site .btn-primary:hover { background: var(--tp-blue-dark) !important; border-color: var(--tp-blue-dark) !important; }
body.tp-site .btn-secondary, body.tp-site a.btn-secondary {
  background: var(--tp-white) !important; background-image: none !important; border: 1px solid var(--tp-line-strong) !important; color: var(--tp-ink) !important;
}
body.tp-site .btn-secondary:hover { background: var(--tp-surface) !important; }

/* page heroes: one calm style everywhere */
body.tp-site .about-hero, body.tp-site .contact-hero, body.tp-site .news-header, body.tp-site .benefits-hero, body.tp-site .legal-hero, body.tp-site .page-hero, body.tp-site .categories-hero {
  background: var(--tp-surface) !important; background-image: none !important; color: var(--tp-ink) !important;
  border-bottom: 1px solid var(--tp-line); padding: 64px 0 56px !important; margin: 0 !important; text-align: center;
}
body.tp-site .about-hero h1, body.tp-site .contact-hero h1, body.tp-site .news-header h1, body.tp-site .benefits-hero h1, body.tp-site .legal-hero h1, body.tp-site .page-hero h1, body.tp-site .categories-hero h1 {
  color: var(--tp-ink) !important; font: 800 clamp(32px, 4vw, 46px)/1.12 var(--tp-font-display) !important; letter-spacing: -0.02em; text-shadow: none !important; margin: 0 0 14px !important;
}
body.tp-site .about-hero p, body.tp-site .contact-hero p, body.tp-site .news-header p, body.tp-site .benefits-hero p, body.tp-site .legal-hero p, body.tp-site .page-hero p, body.tp-site .categories-hero p {
  color: var(--tp-muted) !important; font: 400 18px/1.6 var(--tp-font) !important; text-shadow: none !important; opacity: 1 !important; max-width: 680px; margin-left: auto !important; margin-right: auto !important;
}
body.tp-site .location-badge, body.tp-site .hero-badge {
  background: var(--tp-white) !important; color: var(--tp-navy) !important; border: 1px solid var(--tp-line-strong) !important; box-shadow: none !important; backdrop-filter: none !important;
}

/* product listing pages */
body.tp-site .featured-products { background: var(--tp-white) !important; background-image: none !important; padding: 0 0 88px !important; }
body.tp-site .featured-products .section-header { background: var(--tp-surface); border-bottom: 1px solid var(--tp-line); margin: 0 calc(50% - 50vw) 28px !important; padding: 56px calc(50vw - 50%) 44px !important; text-align: center; }
body.tp-site .featured-products .section-header h2 { color: var(--tp-ink) !important; text-shadow: none !important; font: 800 clamp(30px, 3.6vw, 42px)/1.15 var(--tp-font-display) !important; letter-spacing: -0.02em; margin: 0 0 10px; }
body.tp-site .featured-products .section-header p { color: var(--tp-muted) !important; text-shadow: none !important; font: 400 17px/1.5 var(--tp-font) !important; margin: 0; }
body.tp-site .sorting-bar { background: var(--tp-white) !important; border: 1px solid var(--tp-line); box-shadow: none !important; border-radius: var(--tp-radius) !important; color: var(--tp-text); }
body.tp-site .sorting-bar select, body.tp-site #sortSelect { border: 1px solid var(--tp-line-strong); border-radius: 8px; min-height: 40px; padding: 0 10px; font-family: var(--tp-font); color: var(--tp-ink); background: var(--tp-white); }
body.tp-site .product-grid { gap: 20px !important; }
body.tp-site .product-card {
  background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-radius: 16px !important; box-shadow: none !important; transform: none !important;
  display: flex; flex-direction: column; overflow: hidden;
}
body.tp-site .product-card:hover { border-color: var(--tp-line-strong) !important; box-shadow: var(--tp-shadow) !important; transform: none !important; }
body.tp-site .product-card > a:first-child img, body.tp-site .product-card img:first-child {
  background: var(--tp-white) !important; border-radius: 0 !important; border-bottom: 1px solid var(--tp-line); height: 210px !important; width: 100%; object-fit: contain !important; padding: 12px !important; box-sizing: border-box;
}
body.tp-site .product-card .product-info { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px !important; }
body.tp-site .product-card h3, body.tp-site .product-card h3 a { color: var(--tp-ink) !important; font: 700 16px/1.4 var(--tp-font) !important; margin: 4px 0 0 !important; }
body.tp-site .product-card h3 a:hover { color: var(--tp-blue-dark) !important; }
body.tp-site .product-card .model, body.tp-site .product-card .manufacturer { color: var(--tp-muted) !important; font: 400 13px/1.4 var(--tp-font) !important; margin: 0 !important; }
body.tp-site .product-card .model:empty, body.tp-site .product-card .manufacturer:empty { display: none; }
body.tp-site .product-card .price { color: var(--tp-ink) !important; font: 800 22px/1.2 var(--tp-font-display) !important; margin: auto 0 10px !important; padding-top: 8px; }
body.tp-site .product-card .btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px !important; font-size: 15px !important; }
body.tp-site .shop-badge {
  display: inline-flex !important; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--tp-tint) !important; color: var(--tp-navy) !important; border: 0 !important; border-radius: 999px !important; padding: 5px 10px !important; font: 600 12px/1.3 var(--tp-font) !important; text-decoration: none !important;
}

/* generic content cards on standard pages */
body.tp-site .container h1, body.tp-site .container h2 { text-shadow: none; }


/* product detail */
body.tp-page-product-detail .product-detail-wrapper { background: var(--tp-surface) !important; background-image: none !important; }
body.tp-page-product-detail .breadcrumb, body.tp-page-product-detail .breadcrumb span { color: var(--tp-muted) !important; text-shadow: none !important; }
body.tp-page-product-detail .breadcrumb a { color: var(--tp-blue-dark) !important; text-shadow: none !important; }
body.tp-page-product-detail h1 { color: var(--tp-ink) !important; font-family: var(--tp-font-display) !important; }
body.tp-site .vendor-section, body.tp-site .contact-vendor-card {
  background: var(--tp-white) !important; background-image: none !important; border: 1px solid var(--tp-line) !important; box-shadow: none !important; border-radius: var(--tp-radius) !important;
}
body.tp-site .price-card { background: var(--tp-surface) !important; background-image: none !important; border: 1px solid var(--tp-line) !important; box-shadow: none !important; border-radius: var(--tp-radius) !important; }
body.tp-site .price-card, body.tp-site .price-card * { text-shadow: none !important; }
body.tp-site .price-card .price, body.tp-site .price-card [class*="price-value"], body.tp-site .price-card .amount { color: var(--tp-ink) !important; }
body.tp-site .contact-btn-message, body.tp-site .btn-add-cart, body.tp-site .submit-btn {
  background: var(--tp-blue) !important; background-image: none !important; border: 1px solid var(--tp-blue) !important; color: var(--tp-white) !important; box-shadow: none !important; border-radius: var(--tp-radius-sm) !important; transform: none !important;
}
body.tp-site .contact-btn-message:hover, body.tp-site .btn-add-cart:hover, body.tp-site .submit-btn:hover { background: var(--tp-blue-dark) !important; }
body.tp-site .contact-btn-email {
  background: var(--tp-white) !important; background-image: none !important; border: 1px solid var(--tp-line-strong) !important; color: var(--tp-ink) !important; box-shadow: none !important; border-radius: var(--tp-radius-sm) !important; transform: none !important;
}
body.tp-site .contact-btn-email:hover { background: var(--tp-surface) !important; }

/* shop pages */
body.tp-page-shop .shop-info-section { background: var(--tp-surface) !important; background-image: none !important; border-bottom: 1px solid var(--tp-line); }
body.tp-site .verified-badge { background: #ecfdf5 !important; background-image: none !important; border: 1px solid #a7f3d0 !important; box-shadow: none !important; }

/* about */
body.tp-page-about .free-section { background: var(--tp-navy-900) !important; background-image: none !important; color: var(--tp-white) !important; }
body.tp-page-about .free-section h2, body.tp-page-about .free-section h3 { color: var(--tp-white) !important; text-shadow: none !important; }
body.tp-page-about .free-section p, body.tp-page-about .free-section li { color: #d2deee !important; }
body.tp-page-about .comparison-header { background: var(--tp-navy-900) !important; background-image: none !important; }
body.tp-page-about .stats-section { background: var(--tp-white) !important; background-image: none !important; color: var(--tp-ink) !important; border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); }
body.tp-page-about .stats-section *, body.tp-page-about .stats-section h2, body.tp-page-about .stats-section h3 { color: var(--tp-ink) !important; text-shadow: none !important; }
body.tp-page-about .stats-section p { color: var(--tp-muted) !important; }
body.tp-page-about .cta-section { background: var(--tp-surface) !important; background-image: none !important; border-top: 1px solid var(--tp-line); }
body.tp-page-about [style*="#dbeafe"], body.tp-page-about [style*="dbeafe 0%"] { background: var(--tp-surface) !important; background-image: none !important; }
body.tp-site .ai-badge, body.tp-site .feature-badge { background: var(--tp-tint) !important; color: var(--tp-navy) !important; border: 0 !important; }

/* vendor benefits */
body.tp-page-vendor-benefits .highlight-section { background: var(--tp-surface) !important; background-image: none !important; border: 1px solid var(--tp-line); box-shadow: none !important; }
body.tp-page-vendor-benefits .cta-section { background: var(--tp-navy-900) !important; background-image: none !important; color: var(--tp-white) !important; }
body.tp-page-vendor-benefits .cta-section h2, body.tp-page-vendor-benefits .cta-section p { color: var(--tp-white) !important; text-shadow: none !important; }

/* news */
body.tp-page-news .news-image { background: var(--tp-surface) !important; background-image: none !important; }
body.tp-page-news .back-home { color: var(--tp-blue-dark) !important; }


/* standalone sign in, register and password pages */
html:has(body.tp-site) { background: var(--tp-navy-900); }
body.tp-auth { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: var(--tp-surface) !important; background-image: none !important; align-items: normal !important; justify-content: normal !important; }
.tp-auth-main { min-height: calc(100vh - 73px); box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 56px 16px 72px; }
.tp-auth-main > * { min-width: 0; }
body.tp-auth .login-container, body.tp-auth .register-container, body.tp-auth .tp-auth-main > .container {
  background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-radius: 20px !important; box-shadow: 0 30px 60px -30px rgba(16,36,62,0.25) !important; animation: none !important;
}
body.tp-auth .login-container h1, body.tp-auth .register-container h1, body.tp-auth .tp-auth-main > .container h1, body.tp-auth .login-container h2, body.tp-auth .tp-auth-main > .container h2 { color: var(--tp-ink) !important; font-family: var(--tp-font-display) !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
body.tp-auth input[type="text"], body.tp-auth input[type="email"], body.tp-auth input[type="password"], body.tp-auth input[type="tel"], body.tp-auth textarea, body.tp-auth select {
  border: 1px solid var(--tp-line-strong) !important; border-radius: var(--tp-radius-sm) !important; font-family: var(--tp-font) !important; color: var(--tp-ink); background: var(--tp-white);
}
body.tp-auth input:focus, body.tp-auth textarea:focus, body.tp-auth select:focus { border-color: var(--tp-blue) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; outline: none; }
body.tp-auth button[type="submit"], body.tp-auth .btn-login, body.tp-auth .btn-register, body.tp-auth .btn-submit, body.tp-auth .submit-btn {
  background: var(--tp-blue) !important; background-image: none !important; border: 1px solid var(--tp-blue) !important; color: var(--tp-white) !important; border-radius: var(--tp-radius-sm) !important; box-shadow: none !important; transform: none !important; font-family: var(--tp-font) !important; font-weight: 700 !important;
}
body.tp-auth button[type="submit"]:hover, body.tp-auth .btn-login:hover, body.tp-auth .btn-register:hover { background: var(--tp-blue-dark) !important; }
body.tp-auth a { color: var(--tp-blue-dark); }
body.tp-page-browse-categories .page-header { background: var(--tp-surface) !important; background-image: none !important; color: var(--tp-ink) !important; border-bottom: 1px solid var(--tp-line); box-shadow: none !important; }
body.tp-page-browse-categories .page-header h1 { color: var(--tp-ink) !important; font: 800 clamp(32px, 4vw, 46px)/1.12 var(--tp-font-display) !important; text-shadow: none !important; }
body.tp-page-browse-categories .page-header p { color: var(--tp-muted) !important; text-shadow: none !important; opacity: 1 !important; }
@media (max-width: 600px) { .tp-auth-main { padding: 32px 12px 48px; align-items: flex-start; } }

body.tp-auth .login-container > .logo, body.tp-auth .register-container > .logo-container, body.tp-auth .register-container > .logo { display: none !important; }

body.tp-page-vendor-register .benefits { background: var(--tp-surface) !important; background-image: none !important; border: 1px solid var(--tp-line) !important; box-shadow: none !important; }
body.tp-page-vendor-register .benefits h3 { color: var(--tp-ink) !important; }