:root {
  --octo-orange: #2563EB;
  --octo-blue: #0647c9;
  --octo-white: #ffffff;
}

/* Whole website */
html,
body {
  background: var(--octo-white) !important;
  color: var(--octo-blue) !important;
}

/* Main text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
small,
li,
strong {
  color: var(--octo-blue) !important;
}

/* Links */
a {
  color: var(--octo-blue) !important;
  font-weight: 800;
}

a:hover {
  color: var(--octo-orange) !important;
}

/* Header / navbar */
.site-header,
header,
.nav-container,
.main-nav {
  background: var(--octo-white) !important;
  color: var(--octo-blue) !important;
}

.site-header {
  border-bottom: 3px solid var(--octo-orange) !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08) !important;
}

.main-nav a,
.nav-links a,
.nav-actions a {
  color: var(--octo-blue) !important;
}

.main-nav a:hover,
.nav-links a:hover,
.nav-actions a:hover {
  color: var(--octo-orange) !important;
}

/* Logo sizing */
.brand-logo {
  max-height: 54px;
}

/* Orange buttons */
button,
.button,
.btn,
.nav-btn,
.nav-dashboard-button,
.nav-marketplace-button,
input[type="submit"],
a[role="button"],
.buy-btn,
.marketplace-btn {
  background: var(--octo-orange) !important;
  color: var(--octo-white) !important;
  border: 2px solid var(--octo-orange) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22) !important;
}

button:hover,
.button:hover,
.btn:hover,
.nav-btn:hover,
.nav-dashboard-button:hover,
.nav-marketplace-button:hover,
input[type="submit"]:hover,
a[role="button"]:hover,
.buy-btn:hover,
.marketplace-btn:hover {
  background: var(--octo-blue) !important;
  border-color: var(--octo-blue) !important;
  color: var(--octo-white) !important;
}

/* Secondary buttons still white, with orange border */
.button.secondary,
.nav-btn-secondary {
  background: var(--octo-white) !important;
  color: var(--octo-blue) !important;
  border: 2px solid var(--octo-orange) !important;
}

/* Cards, boxes, dashboards */
article,
.card,
.panel,
.dashboard-card,
.stat-card,
.pricing-card,
.page-card,
.form-card,
.login-card,
.product-card,
.mini-card {
  background: var(--octo-white) !important;
  color: var(--octo-blue) !important;
  border: 2px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(6, 71, 201, 0.08) !important;
}

/* Inputs */
input,
textarea,
select {
  background: var(--octo-white) !important;
  color: var(--octo-blue) !important;
  border: 2px solid rgba(37, 99, 235, 0.25) !important;
  border-radius: 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--octo-orange) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

/* Marketplace/product cards */
.product-grid,
.product-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.product-card,
.mini-card {
  text-decoration: none;
  display: block;
  padding: 1rem;
}

.product-card:hover,
.mini-card:hover {
  transform: translateY(-5px);
  border-color: var(--octo-orange) !important;
}

.product-card img,
.mini-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--octo-white);
  border-radius: 16px;
}

.price,
.product-price,
.product-card strong,
.mini-card strong {
  color: var(--octo-orange) !important;
  font-weight: 900 !important;
}

/* Footer */
.site-footer {
  background: var(--octo-white) !important;
  border-top: 3px solid var(--octo-orange) !important;
  color: var(--octo-blue) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .product-grid,
  .product-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .product-grid,
  .product-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   OCTORANK POP THEME — ORANGE / BLUE / WHITE
   ============================================================ */

:root {
  --octo-orange: #2563EB !important;
  --octo-orange-hot: #3B82F6 !important;
  --octo-blue: #172B63 !important;
  --octo-blue-deep: #062b8f !important;
  --octo-white: #ffffff !important;

  --brand-bg: #ffffff !important;
  --brand-card: #ffffff !important;
  --brand-text: #172B63 !important;
  --brand-muted: #063bba !important;
  --brand-blue: #172B63 !important;
  --brand-navy: #172B63 !important;
  --brand-border: rgba(37, 99, 235, 0.35) !important;

  --theme-bg: #ffffff !important;
  --theme-surface: #ffffff !important;
  --theme-surface-strong: #ffffff !important;
  --theme-text: #172B63 !important;
  --theme-text-muted: #063bba !important;
  --theme-heading: #172B63 !important;
  --theme-accent: #2563EB !important;
  --theme-accent-strong: #2563EB !important;
  --theme-border: rgba(37, 99, 235, 0.35) !important;

  --dashboard-sidebar-bg: #172B63 !important;
  --dashboard-panel-bg: #ffffff !important;
  --dashboard-panel-muted: #EFF6FF !important;
  --dashboard-panel-border: rgba(37, 99, 235, 0.35) !important;
  --dashboard-text: #172B63 !important;
  --dashboard-muted: #063bba !important;
  --dashboard-accent: #2563EB !important;
}

html,
body {
  background: #ffffff !important;
  color: #172B63 !important;
}

h1, h2, h3, h4, h5, h6,
p, li, label, small, span, strong, td, th {
  color: #172B63 !important;
}

a {
  color: #172B63 !important;
  font-weight: 900 !important;
}

a:hover {
  color: #2563EB !important;
}

.site-header,
header.site-header,
.nav-container,
.main-nav,
.nav-links,
.nav-actions {
  background: #ffffff !important;
  color: #172B63 !important;
}

.site-header {
  border-bottom: 4px solid #2563EB !important;
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.24) !important;
}

.main-nav a,
.nav-links a,
.nav-actions a {
  color: #172B63 !important;
  font-weight: 950 !important;
}

button,
.button,
.btn,
.primary-btn,
.nav-btn,
.nav-dashboard-button,
.nav-marketplace-button,
.marketplace-btn,
.buy-btn,
.market-primary-btn,
input[type="submit"],
button[type="submit"],
a[role="button"] {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #ffffff !important;
  border: 2px solid #2563EB !important;
  border-radius: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.36) !important;
  text-decoration: none !important;
}

button:hover,
.button:hover,
.btn:hover,
.primary-btn:hover,
.nav-btn:hover,
.nav-dashboard-button:hover,
.nav-marketplace-button:hover,
.marketplace-btn:hover,
.buy-btn:hover,
.market-primary-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a[role="button"]:hover {
  background: linear-gradient(135deg, #172B63, #062b8f) !important;
  border-color: #172B63 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.button.secondary,
.nav-btn-secondary,
.nav-logout,
.market-secondary-btn,
.copy-url-btn,
.outline-btn {
  background: #ffffff !important;
  color: #172B63 !important;
  border: 2px solid #2563EB !important;
  border-radius: 16px !important;
  font-weight: 950 !important;
}

article,
.card,
.panel,
.dashboard-card,
.dashboard-stat-card,
.dashboard-highlight-card,
.dashboard-table-card,
.dashboard-summary-card,
.dashboard-activity-card,
.dashboard-panel,
.pricing-card,
.page-card,
.form-card,
.login-card,
.product-card,
.mini-card,
.best-sellers,
.trust-strip,
.source-card,
.source-hero-card,
.source-steps,
.source-disclosure,
.editor-section-card,
.create-step-card,
.advanced-options-card,
.marketplace-coming-card {
  background: #ffffff !important;
  color: #172B63 !important;
  border: 2px solid rgba(37, 99, 235, 0.35) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 70px rgba(0, 71, 255, 0.18) !important;
}

.hero,
.home-hero,
.market-hero,
.source-hero,
.dashboard-theme .hero,
.company-dashboard-header {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.28), transparent 35%),
    radial-gradient(circle at bottom left, rgba(0, 71, 255, 0.20), transparent 38%),
    #ffffff !important;
  border: 2px solid rgba(37, 99, 235, 0.32) !important;
  border-radius: 32px !important;
}

.dashboard-sidebar,
.dashboard-sidebar-inner {
  background: linear-gradient(180deg, #172B63, #062b8f) !important;
  color: #ffffff !important;
}

.dashboard-sidebar *,
.dashboard-sidebar-inner * {
  color: #ffffff !important;
}

.dashboard-nav-link:hover,
.dashboard-nav-link.active,
.dashboard-mobile-link:hover,
.dashboard-mobile-link.active {
  background: #2563EB !important;
  border-color: #3B82F6 !important;
  color: #ffffff !important;
}

.marketplace-coming-btn {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #ffffff !important;
}

.marketplace-coming-kicker,
.source-badge,
.product-path-badge,
.create-step-eyebrow,
.dashboard-topbar-eyebrow {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #2563EB !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
  font-weight: 950 !important;
}

.product-card:hover,
.mini-card:hover {
  transform: translateY(-7px) scale(1.015);
  border-color: #2563EB !important;
  box-shadow: 0 30px 76px rgba(0, 71, 255, 0.22) !important;
}

.product-card strong,
.mini-card strong,
.price,
.product-price,
.dashboard-stat-value {
  color: #2563EB !important;
  font-weight: 950 !important;
}

input,
textarea,
select {
  background: #ffffff !important;
  color: #172B63 !important;
  border: 2px solid rgba(37, 99, 235, 0.42) !important;
  border-radius: 16px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}

.site-footer {
  background: #ffffff !important;
  border-top: 4px solid #2563EB !important;
  color: #172B63 !important;
}