:root {
  --bg: #0c0c0d;
  --bg-alt: #151516;
  --card: #1a1a1c;
  --border: #2a2a2d;
  --text: #f2f1ee;
  --text-dim: #a3a19c;
  --accent: #c9a24b; /* swap for Blacow's exact brand accent if different */
  --accent-dim: #8a7638;
  --starter: #5fa8d3;
  --mid: #c9a24b;
  --pro: #d3625f;
  --radius: 10px;
  --max: 1120px;
}

.logo img {
  height: 34px;
  width: auto;
  display: block;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(12,12,13,0.9);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { font-weight: 800; letter-spacing: 0.04em; font-size: 18px; }
.logo span { color: var(--accent); }
.main-nav { display: flex; gap: 32px; }
.main-nav a { color: var(--text-dim); font-size: 14px; font-weight: 600; transition: color .15s; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.nav-toggle {
  display: none; background: none; border: none; color: var(--text);
  font-size: 22px; cursor: pointer;
}

/* Hero */
.hero { padding: 96px 0 64px; text-align: center; }
.eyebrow {
  color: var(--accent); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px;
}
.hero h1 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 20px; }
.hero-sub {
  color: var(--text-dim); font-size: 18px; max-width: 560px;
  margin: 0 auto 32px;
}
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .15s, opacity .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #0c0c0d; }
.btn-primary:hover { opacity: 0.9; }

/* Strip */
.strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px 0; }
.strip-inner { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; text-align: center; }
.strip-inner strong { display: block; font-size: 26px; color: var(--accent); }
.strip-inner span { display: block; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* Catalog */
.catalog { padding: 88px 0; }
.catalog h2, .about h2, .faq h2 { font-size: clamp(26px, 3.5vw, 36px); margin-bottom: 12px; text-align: center; }
.section-sub { color: var(--text-dim); text-align: center; max-width: 480px; margin: 0 auto 40px; }

.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.tab {
  background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
  padding: 8px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: all .15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.card.hidden { display: none; }
.tier-tag {
  display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; width: fit-content;
}
.tier-starter { background: rgba(95,168,211,0.15); color: var(--starter); }
.tier-mid { background: rgba(201,162,75,0.15); color: var(--mid); }
.tier-pro { background: rgba(211,98,95,0.15); color: var(--pro); }
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: 14px; flex-grow: 1; margin-bottom: 20px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.price { font-weight: 800; font-size: 18px; }
.btn-buy {
  background: transparent; border: 1px solid var(--text); padding: 8px 18px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
}
.btn-buy:hover { background: var(--text); color: var(--bg); }

/* About */
.about { background: var(--bg-alt); padding: 72px 0; }
.about-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.about p { color: var(--text-dim); font-size: 16px; }

/* FAQ */
.faq { padding: 88px 0; }
.faq-item { max-width: 680px; margin: 0 auto 28px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { color: var(--text-dim); font-size: 15px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-inner .logo { display: block; margin-bottom: 6px; }
.footer-inner p { color: var(--text-dim); font-size: 13px; }
.footer-links { display: flex; gap: 24px; font-size: 14px; color: var(--text-dim); }
.footer-links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px 24px; gap: 16px;
  }
}
/* ============================================================
   Append this to the END of your live styles.css.
   This project's local folder never had a copy of styles.css to edit
   directly (it lives only on the server), so these are new rules the
   cart UI needs — they don't touch anything else in your existing file.
   ============================================================ */

.cart-toggle {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  margin-left: 1rem;
  padding: 0.25rem 0.5rem;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 320px;
  max-width: 90vw;
  background: #fff;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow-y: auto;
}

.cart-drawer.hidden {
  display: none;
}

.cart-drawer-inner {
  padding: 1.5rem;
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer-header button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.cart-items-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  gap: 0.5rem;
}

.cart-item span:first-child {
  flex: 1;
}

.cart-remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.cart-total-row {
  margin: 1rem 0;
  font-size: 1.1rem;
}
/* ============================================================
   Append this to the END of your live styles.css, AFTER the
   cart-styles-to-add.css block you already added.
   Fixes: button/cart readability, and styles for the new
   per-card "Explanation" toggle.
   ============================================================ */

/* Add-to-cart button: white background, dark text (was unreadable
   against the dark theme before this) */
.btn-buy {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc;
}

.btn-buy:hover {
  background: #f0f0f0 !important;
}

/* Cart drawer: force black text throughout, regardless of the site's
   dark-theme text color, since the drawer itself has a white background */
.cart-drawer,
.cart-drawer * {
  color: #111 !important;
}

#checkoutBtn {
  color: #111 !important;
}

/* Explanation button + the two-button row it sits in */
.card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-explain {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

.btn-explain:hover {
  opacity: 0.8;
}

/* Explanation text block inside each card */
.card-explanation {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-explanation.hidden {
  display: none;
}

/* ============================================================
   Coupon field, "See Bundles" button, and bundle tiles
   ============================================================ */
.btn-outline {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin-left: 0.75rem;
}
.btn-outline:hover { opacity: 0.8; }
.cart-coupon-row { display: flex; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.coupon-input { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; color: #111; min-width: 0; }
.cart-coupon-row .btn-outline { margin-left: 0; padding: 0.5rem 0.9rem; white-space: nowrap; }
.coupon-message { font-size: 0.85rem; margin: 0 0 0.5rem; }
.coupon-message.hidden { display: none; }
.coupon-message-ok { color: #1a7f37; }
.coupon-message-error { color: #c0392b; }
#cartDiscountRow { display: flex; justify-content: space-between; color: #1a7f37; font-size: 0.95rem; }
#cartDiscountRow[hidden] { display: none; }
.price-strike { text-decoration: line-through; opacity: 0.6; font-weight: normal; margin-right: 0.4rem; font-size: 0.9em; }
.bundle-card h3 { margin-bottom: 0.4rem; }
.bundle-flagship { border: 2px solid currentColor; }
.bundles { background: rgba(127, 127, 127, 0.05); }

/* ============================================================
   Logo sizing fix
   ============================================================ */
.logo img { height: 34px; width: auto; display: block; }

.footer-badges {
  margin-top: 1rem;
}

.footer-badges img {
  max-width: 160px;
  height: auto;
  display: block;
  margin-bottom:20px;
}
/* ============================================================
   Newsletter signup section
   ============================================================ */
.newsletter { padding: 3rem 0; border-top: 1px solid rgba(127, 127, 127, 0.2); }
.newsletter-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.newsletter-inner h2 { margin-bottom: 0.25rem; }
.subscribe-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.subscribe-form input[type="email"] { padding: 0.75rem 0.9rem; border: 1px solid #ccc; border-radius: 4px; color: #111; min-width: 240px; }
.hp-field { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.subscribe-message { width: 100%; font-size: 0.85rem; margin: 0.5rem 0 0; }
.subscribe-message.hidden { display: none; }
.subscribe-message-ok { color: #1a7f37; }
.subscribe-message-error { color: #c0392b; }
@media (max-width: 640px) {
  .newsletter-inner { flex-direction: column; align-items: stretch; }
  .subscribe-form input[type="email"] { min-width: 0; flex: 1; }
}

/* affiliate-styles-to-add.css
   Append these rules to skillbazaar/styles.css — same pattern as the
   cart-styles-to-add*.css files. Only three new components are needed;
   everything else on affiliate.php and affiliate-stats.php reuses the
   existing .card / .grid / .btn / .section-sub classes. */

/* NOTE: .hp-field is NOT defined here. The newsletter form on index.html
   already uses that class, so a rule for it already exists in styles.css —
   redefining it lower down the file would silently override the existing
   behaviour. affiliate.php reuses the same class name deliberately so it
   inherits whatever styles.css already does.

   If it turns out styles.css does NOT define .hp-field, add this, because
   without it the honeypot input is visible to real users:

     .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
*/

/* Application form */
.affiliate-form {
  max-width: 34rem;
}
.affiliate-form label {
  font-weight: 600;
  display: inline-block;
  margin-bottom: .25rem;
}
.affiliate-form input[type="text"],
.affiliate-form input[type="email"],
.affiliate-form input[type="url"],
.affiliate-form textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.affiliate-form textarea {
  resize: vertical;
  min-height: 7rem;
}
.affiliate-form input:focus,
.affiliate-form textarea:focus {
  outline: 2px solid #2f6fed;
  outline-offset: 1px;
  border-color: #2f6fed;
}

/* Earnings table on the affiliate dashboard. Wrapped in its own horizontal
   scroll context so it can't force the whole page sideways on a phone. */
.affiliate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.affiliate-table th,
.affiliate-table td {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(128, 128, 128, .25);
}
.affiliate-table th {
  font-weight: 700;
}
.affiliate-table tbody tr:last-child td {
  border-bottom: none;
}