/*
 * SB Tech Labs storefront base styles.
 * Tokens carried verbatim from sbtechlabs.blog. Shared components (header,
 * footer, buttons, course card) live here. Page styles live in each block css.
 */
:root {
  --color-primary: #1e40af;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e3a8a;
  --color-accent: #0891b2;
  --color-accent-light: #06b6d4;
  --color-white: #fff;
  --color-bg-light: #f0f9ff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-success: #10b981;
  --color-error: #ef4444;
  --font-family-heading: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --font-family-body: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-loose: 1.8;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --container-width: 1200px;
  --nav-height: 80px;
  --store-accent: #1e40af; /* set per store by the shell */
}

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

body { font-family: var(--font-family-body); font-size: 16px; line-height: var(--line-height-normal); color: var(--color-gray-900); background: var(--color-white); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

h1, h2, h3, h4 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-primary); }
h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 20px; } h4 { font-size: 18px; }
p { color: var(--color-gray-600); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-normal); }
a:hover { color: var(--color-primary-light); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-48); width: 100%; }
.section { padding: var(--space-64) 0; }

.button { display: inline-block; padding: var(--space-16) var(--space-32); background: var(--color-primary); color: #fff; border-radius: var(--radius-lg); font-weight: var(--font-weight-semibold); font-size: 16px; border: none; cursor: pointer; transition: all var(--transition-normal); text-align: center; }
.button:hover { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.button.block { width: 100%; }
.button.secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.button.secondary:hover { background: var(--color-bg-light); color: var(--color-primary); transform: none; box-shadow: none; }

.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: rgb(255 255 255 / 92%); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-gray-200); }
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; align-items: center; gap: var(--space-12); font-weight: var(--font-weight-bold); color: var(--color-primary); font-size: 18px; }
.brand .mark { width: 34px; height: 34px; border-radius: var(--radius-base); background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: grid; place-items: center; color: #fff; font-size: 15px; }
.brand .store { font-weight: var(--font-weight-medium); color: var(--color-gray-400); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border-left: 1px solid var(--color-gray-300); padding-left: var(--space-12); }
.nav-links { display: flex; align-items: center; gap: var(--space-32); }
.nav-links a { color: var(--color-gray-700); font-weight: var(--font-weight-medium); }
.nav-links a:hover { color: var(--color-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--space-24); }
.acct-link { color: var(--color-gray-700); font-weight: 500; }
.icon-btn { position: relative; color: var(--color-gray-700); display: grid; place-items: center; }
.cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--store-accent); color: #fff; font-size: 11px; font-weight: var(--font-weight-bold); display: grid; place-items: center; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.course-card { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: all var(--transition-normal); display: flex; flex-direction: column; }
.course-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); color: inherit; }
.course-card .cc-cover { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: grid; place-items: center; color: #fff; font-weight: var(--font-weight-bold); text-align: center; padding: var(--space-16); font-size: 17px; position: relative; }
.course-card .cc-cover .fmt { position: absolute; top: var(--space-12); right: var(--space-12); font-size: 11px; font-weight: var(--font-weight-semibold); background: rgb(255 255 255 / 22%); padding: 2px 8px; border-radius: var(--radius-full); }
.course-card .cc-body { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); flex: 1; }
.course-card .cc-badge { font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--store-accent); text-transform: uppercase; letter-spacing: .04em; }
.course-card h4 { color: var(--color-gray-900); }
.course-card .cc-desc { font-size: 14px; color: var(--color-gray-500); }
.course-card .cc-meta { font-size: 12px; color: var(--color-gray-400); }
.course-card .cc-foot { margin-top: auto; padding-top: var(--space-16); display: flex; align-items: center; justify-content: space-between; }
.course-card .cc-price { font-weight: var(--font-weight-bold); color: var(--color-primary); }
.course-card .cc-price .from { font-weight: var(--font-weight-normal); color: var(--color-gray-400); font-size: 12px; }
.course-card .cc-price .was { color: var(--color-gray-400); text-decoration: line-through; font-weight: var(--font-weight-normal); font-size: 13px; margin-left: 4px; }
.course-card .cc-view { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--color-gray-500); padding: var(--space-48); }

.footer { background: linear-gradient(115deg, var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; padding: var(--space-48) 0; }
.footer .brand { color: #fff; font-size: 22px; }
.footer .brand .mark { background: rgb(255 255 255 / 22%); }
.footer .tagline { color: rgb(255 255 255 / 85%); max-width: 36ch; margin-top: var(--space-16); }
.footer .divider { height: 1px; background: rgb(255 255 255 / 20%); margin: var(--space-32) 0; }
.footer .fbottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-12); font-size: 14px; color: rgb(255 255 255 / 78%); }

/* shared page header used by cart and account */
.page-head { margin: var(--space-48) 0 var(--space-32); }
.page-head p { color: var(--color-gray-500); margin-top: var(--space-4); }

@media (width <= 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } }
@media (width <= 768px) {
  :root { --space-48: 24px; --space-64: 32px; }
  .container { padding: 0 var(--space-16); }
  h1 { font-size: 30px; }
  .grid-3 { grid-template-columns: 1fr; }
}

/* card: labels, rating, active offer badge */
.course-card .cc-cover .cc-offer { position: absolute; top: var(--space-12); left: var(--space-12); font-size: 11px; font-weight: var(--font-weight-bold); background: #fff; color: var(--store-accent); padding: 2px 8px; border-radius: var(--radius-full); }
.cc-labels { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 10px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-gray-100); color: var(--color-gray-600); }
.chip-bestseller { background: #fef3c7; color: #92400e; }
.chip-new { background: #dbeafe; color: #1e40af; }
.chip-featured { background: #ede9fe; color: #5b21b6; }
.chip-popular { background: #dcfce7; color: #166534; }
.cc-rating { color: #b45309; font-size: 13px; font-weight: var(--font-weight-semibold); }
.cc-rating span { color: var(--color-gray-400); font-weight: var(--font-weight-normal); margin-left: 4px; }