/* OneStopChair public UI stability layer.
   Keep shared type, spacing, and responsive behavior in one late-loading file. */

:root {
  --osc-content-max: 1240px;
  --osc-page-gutter: clamp(18px, 4vw, 48px);
  --osc-copy: #5f665f;
  --osc-line: rgba(25, 61, 45, 0.14);
  --osc-soft-radius: 16px;
  --osc-control-radius: 10px;
}

body:not(.admin-shell-page) {
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
}

body:not(.admin-shell-page) :where(button, input, select, textarea) {
  font-family: inherit;
}

body:not(.admin-shell-page) :where(p, li, dd, small) {
  text-wrap: pretty;
}

body:not(.admin-shell-page) :where(h1, h2, h3) {
  text-wrap: balance;
}

body:not(.admin-shell-page) :where(.button, .nav-cta, .product-primary-action) {
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

body:not(.admin-shell-page) :where(.button, .nav-cta, .product-primary-action):active {
  transform: translateY(1px) scale(0.99);
}

/* Calm the largest display sizes so body copy and actions remain in the first view. */
.home-page .hero h1 {
  font-size: clamp(50px, 5.5vw, 72px);
  line-height: 0.94;
}

.buyback-page .buyback-hero-copy h2 {
  font-size: clamp(52px, 5.4vw, 72px);
  line-height: 0.96;
}

.planning-page .planning-hero-content h1 {
  max-width: 10.5ch;
  font-size: clamp(46px, 4.8vw, 62px);
  line-height: 0.98;
}

.contact-page .contact-copy h2 {
  max-width: 10.5ch;
  font-size: clamp(46px, 5vw, 64px);
  line-height: 0.98;
}

.inventory-detail-page .inventory-detail-copy h1 {
  max-width: 11ch;
  font-size: clamp(42px, 4.4vw, 58px);
  line-height: 0.98;
}

.cashback-terms-page .cashback-terms-hero h1 {
  max-width: 13ch;
  font-size: clamp(46px, 5.3vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* Shared surface language: quiet borders, limited rounding, no competing elevation. */
.planning-hero-panel,
.buyback-hero-panel,
.inventory-detail-panel,
.contact-help-card,
.lead-form,
.cashback-rate-card {
  border-radius: var(--osc-soft-radius);
}

.inventory-detail-panel {
  box-shadow: 0 22px 60px rgba(35, 55, 44, 0.08);
}

.contact-page .lead-form,
.contact-page .lead-form :is(h2, h3, p, span, strong, small, em, label, legend, input, select, textarea, button, a),
.inventory-scroll-page #inventory,
.inventory-scroll-page #inventory :is(h1, h2, h3, h4, p, span, strong, small, button, a) {
  font-family: var(--font-sans) !important;
}

.inventory-scroll-page #inventory-title {
  font-family: var(--font-display) !important;
  font-weight: 780 !important;
}

.contact-page .lead-form :is(h2, h3) {
  font-weight: 700 !important;
}

.contact-page .lead-form :is(label > span, legend) {
  font-weight: 650;
}

/* Product pages should read as a buying decision, not as a billboard. */
.inventory-product-section {
  width: min(var(--osc-content-max), calc(100% - (2 * var(--osc-page-gutter))));
}

.inventory-detail-copy > p:not(.eyebrow) {
  max-width: 54ch;
  color: var(--osc-copy);
  font-size: 16px;
  line-height: 1.6;
}

.inventory-detail-list-grid h2 {
  font-size: 17px;
  line-height: 1.25;
}

@media (max-width: 1080px) {
  body:not(.admin-shell-page) .navbar {
    grid-template-columns: minmax(0, 1fr) 42px 48px;
  }

  body:not(.admin-shell-page) .brand-lockup {
    width: min(190px, calc(100vw - 150px));
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  html,
  body:not(.admin-shell-page) {
    max-width: 100%;
    overflow-x: clip;
  }

  body:not(.admin-shell-page) :where(main, section, article, aside, div, form, fieldset) {
    min-width: 0;
  }

  body:not(.admin-shell-page) .navbar {
    gap: 8px;
    padding: 10px 14px;
  }

  body:not(.admin-shell-page) .brand-lockup {
    width: min(174px, calc(100vw - 132px));
  }

  .home-page .hero h1,
  .buyback-page .buyback-hero-copy h2,
  .planning-page .planning-hero-content h1,
  .contact-page .contact-copy h2,
  .inventory-detail-page .inventory-detail-copy h1,
  .cashback-terms-page .cashback-terms-hero h1 {
    max-width: 100%;
    font-size: clamp(36px, 10.5vw, 42px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em;
  }

  .home-page .hero-content,
  .planning-page .planning-hero-content,
  .buyback-page .buyback-hero-copy,
  .contact-page .contact-copy,
  .inventory-detail-page .inventory-detail-copy {
    padding-right: 18px;
    padding-left: 18px;
  }

  .planning-page .planning-hero-panel,
  .buyback-page .buyback-hero-panel,
  .inventory-detail-page .inventory-detail-panel,
  .contact-page .lead-form {
    border-radius: 14px;
  }

  .planning-page .planning-hero-actions,
  .buyback-page .buyback-hero-actions,
  .inventory-detail-page .inventory-detail-actions,
  .home-page .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .planning-page .planning-hero-actions .button,
  .buyback-page .buyback-hero-actions .button,
  .inventory-detail-page .inventory-detail-actions .button,
  .home-page .hero-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 12px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }

  .inventory-product-section {
    width: calc(100% - 36px);
  }

  .inventory-detail-panel {
    padding: 16px;
  }

  .inventory-detail-media {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }

  .inventory-detail-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .cashback-terms-hero-grid > div > p {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .planning-page .planning-hero-actions,
  .buyback-page .buyback-hero-actions,
  .inventory-detail-page .inventory-detail-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-shell-page) :where(.button, .nav-cta, .product-primary-action) {
    transition: none;
  }
}