/**
 * PrintBere theme overrides on top of Dawn.
 *
 * Loaded via layout/theme.liquid after Dawn's base CSS so we can
 * surgically override what we need without forking every section's
 * stylesheet. The color scheme values are already set via Dawn's settings
 * (config/settings_data.json) — this file is for typography, spacing,
 * micro-interactions, and component polish that goes beyond the
 * scheme system.
 */

/* ── Tokens (mirror of mockups/style.css) ──────────────────────── */
:root {
  --pb-orange: #F37520;
  --pb-orange-dark: #C45A0F;
  --pb-orange-soft: #FFEDDD;
  --pb-black: #1A1A1A;
  --pb-ink: #2C2A26;
  --pb-cream: #FAF6F0;
  --pb-cream-2: #F2EBDF;
  --pb-line: #DBD2C2;
  --pb-muted: #6B6258;
  --pb-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --pb-shadow-md: 0 4px 14px rgba(26, 26, 26, 0.08);
}

/* ── Typography polish ─────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── PrintBere "eyebrow" pill — small caps label above headlines ── */
.pb-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--pb-orange-dark);
  background: var(--pb-orange-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ── Italic-orange accent inside display headlines ─────────────── */
.pb-accent {
  color: var(--pb-orange);
  font-style: italic;
}

/* ── Brand mark (header logo with bear) ────────────────────────── */
.pb-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--pb-black);
}
.pb-brand .pb-dot { color: var(--pb-orange); }
.pb-brand:hover { text-decoration: none; }

/* CSS-drawn bear silhouette. Replace .pb-bear with an <svg> when the
   real mascot artwork is ready. Sizes via modifier class. */
.pb-bear {
  width: 36px;
  height: 36px;
  background: var(--pb-black);
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  position: relative;
  flex-shrink: 0;
}
.pb-bear::before,
.pb-bear::after {
  content: '';
  position: absolute;
  background: inherit;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: -6px;
}
.pb-bear::before { left: 1px; }
.pb-bear::after { right: 1px; }
.pb-bear .pb-snout {
  position: absolute;
  background: var(--pb-orange);
  width: 16px;
  height: 12px;
  border-radius: 50%;
  bottom: 6px;
  left: 10px;
}
.pb-bear--lg { width: 120px; height: 120px; }
.pb-bear--lg::before,
.pb-bear--lg::after { width: 46px; height: 46px; top: -20px; }
.pb-bear--lg .pb-snout { width: 52px; height: 38px; bottom: 22px; left: 34px; }
.pb-bear--invert { background: var(--pb-orange); }
.pb-bear--invert .pb-snout { background: var(--pb-cream); }

/* ── Hero (matches mocks/home.html) ─────────────────────────────── */
.pb-hero {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(243, 117, 32, 0.15), transparent 50%),
    var(--pb-cream);
}
.pb-hero__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0 32px;
}
.pb-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  margin-bottom: 24px;
  color: var(--pb-black);
}
.pb-hero p {
  font-size: 18px;
  max-width: 48ch;
  color: var(--pb-ink);
}
.pb-hero__cta {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.pb-hero__mascot {
  background: var(--pb-black);
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.pb-hero__mascot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(243, 117, 32, 0.3), transparent 60%);
}
.pb-hero__mascot .pb-bear { z-index: 1; }
@media (max-width: 900px) {
  .pb-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .pb-hero__mascot { max-width: 320px; margin: 0 auto; }
}

/* ── Trust bar (dark stripe of value props) ────────────────────── */
.pb-trust {
  background: var(--pb-black);
  color: var(--pb-cream);
  padding: 16px 0;
}
.pb-trust__inner {
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.pb-trust__item { display: flex; gap: 10px; align-items: center; }
.pb-trust__dot {
  width: 6px;
  height: 6px;
  background: var(--pb-orange);
  border-radius: 50%;
}

/* ── Buttons — keep pill shape (set via theme settings) but
       add Print Bere primary/orange via modifier class. ─────────── */
.button.pb-btn-orange {
  background: var(--pb-orange);
  color: #fff;
  border-color: var(--pb-orange);
}
.button.pb-btn-orange:hover {
  background: var(--pb-orange-dark);
  border-color: var(--pb-orange-dark);
}

/* ── "How it works" 3-step section ─────────────────────────────── */
.pb-how {
  background: var(--pb-cream-2);
  padding: 80px 0;
}
.pb-how__inner {
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0 32px;
}
.pb-how__head { text-align: center; margin-bottom: 48px; }
.pb-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 740px) {
  .pb-how__steps { grid-template-columns: 1fr; gap: 32px; }
}
.pb-how__step { text-align: center; padding: 24px 16px; }
.pb-how__num {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--pb-orange);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(243, 117, 32, 0.35);
}
.pb-how__step h3 { font-size: 18px; margin-bottom: 8px; color: var(--pb-black); }
.pb-how__step p { font-size: 14px; color: var(--pb-muted); margin: 0 auto; max-width: 28ch; }

/* ── Category cards (Pick your blank) ──────────────────────────── */
.pb-cats {
  padding: 80px 0;
}
.pb-cats__inner {
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0 32px;
}
.pb-cats__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.pb-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .pb-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
.pb-cat {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end start;
  padding: 24px;
  text-decoration: none;
  color: var(--pb-black);
  transition: transform 200ms ease;
}
.pb-cat:hover { transform: translateY(-4px); text-decoration: none; }
.pb-cat__label {
  font-size: 22px;
  font-weight: 800;
  background: var(--pb-cream);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--pb-shadow-sm);
  color: var(--pb-black);
}
.pb-cat--tee { background: linear-gradient(135deg, #f5a76e 0%, #e8773f 100%); }
.pb-cat--hood { background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%); }
.pb-cat--crew { background: linear-gradient(135deg, #8a9d6a 0%, #5b6e3f 100%); }
.pb-cat--youth { background: linear-gradient(135deg, #ffd3a8 0%, #ffa867 100%); }
.pb-cat--hood .pb-cat__label,
.pb-cat--crew .pb-cat__label { background: rgba(0,0,0,0.4); color: #fff; box-shadow: none; }

/* ── Design CTA — black section with mock uploader preview ─────── */
.pb-design-cta {
  background: var(--pb-black);
  color: var(--pb-cream);
  padding: 80px 0;
}
.pb-design-cta__inner {
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .pb-design-cta__inner { grid-template-columns: 1fr; }
}
.pb-design-cta h2 { color: #fff; font-size: clamp(32px, 5vw, 48px); }
.pb-design-cta p { opacity: 0.85; max-width: 50ch; }
.pb-design-cta .pb-eyebrow { background: rgba(243, 117, 32, 0.2); color: var(--pb-orange); }
.pb-design-cta__preview {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  color: var(--pb-ink);
}
.pb-design-cta__preview-thumb {
  background: repeating-conic-gradient(#f6f6f7 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin-bottom: 12px;
}
.pb-design-cta__preview-ok {
  background: #E9F6EC;
  color: #0A6929;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Footer polish — Dawn footer w/ orange-bear accent in brand ─ */
.footer .pb-brand { color: #fff; }
.footer .pb-brand .pb-dot { color: var(--pb-orange); }
.footer .pb-bear { background: var(--pb-orange); }
.footer .pb-bear .pb-snout { background: var(--pb-cream); }

/* ── Section heading helpers used inside custom sections ───────── */
.pb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.pb-section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); }
.pb-section-head .pb-eyebrow { margin-bottom: 6px; }