/* Skincare US Route — reuses the AU storefront grid, type ramp, and color
   tokens. Only US-specific overrides live here; everything else is inherited
   from skincare.css. */
@import url('/css/skincare.css');

/* Buy-on-Amazon CTA — keep the sage palette but tighten padding because
   "Buy on Amazon" is a longer label than AU's "Shop Now →" */
.product-link {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* Mobile single-column confirmation matches AU's @media (max-width: 768px)
   rule already defined in skincare.css. */

/* ============================================
   FTC COMPLIANCE — affiliate disclosures (#ad)
   US-only scope language (US ONLY badge, region line)
   Reuses existing sage / coral / mono tokens from skincare.css. No new
   fonts, no new colors, no redesign.
   ============================================ */

/* Card-level #ad disclosure — sits between .product-meta and the CTA so it is
   in the same visual group as the price / purchase path (FTC "clear,
   conspicuous, adjacent to the price/CTA"). */
.product-disclosure {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  background: var(--coral-dim);
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  margin: 0.75rem 0;
}

/* Card-level "Ships from" origin badge — sage-palette info pill, sits next
   to .stock-badge so the reader sees stock + origin together before reading
   the #ad disclosure (which is a separate coral pill). Mono / uppercase
   / sage-dim background reuse existing tokens. */
.shipsfrom-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  background: var(--sage-dim);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-left: 0.4rem;
  margin-bottom: 0.75rem;
  vertical-align: middle;
}

/* Site-level disclosure above-the-fold in the hero (sage callout under the
   pill row, above the hero CTA) so it reads on first scroll-stop. */
.sk-hero-disclosure {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--fg-secondary);
  background: var(--sage-dim);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 2rem;
  max-width: 50ch;
  line-height: 1.55;
}
.sk-hero-disclosure strong {
  color: var(--fg);
  font-weight: 600;
}

/* US ONLY mark — small sage pill next to the brand in the persistent nav,
   making the US-only scope visible everywhere the nav is visible. */
.sk-nav-region {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  margin-left: 0.5rem;
  font-weight: 500;
}

/* Footer disclosure block — wraps the existing .sk-footer-disclaimer with the
   required #ad lead-line, the editorial-research caveat, the US region line,
   and links to /privacy. The right-column width and alignment mirror the
   original .sk-footer-disclaimer so the flex layout in .sk-footer still
   resolves to brand-left / disclosure-right at desktop. */
.sk-footer-disclosure {
  max-width: 60ch;
  text-align: right;
  font-size: 0.75rem;
  color: var(--fg-muted);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sk-footer-disclosure .sk-footer-disclaimer {
  max-width: none;
  text-align: right;
}
.sk-footer-disclosure-lead {
  font-size: 0.78rem;
  color: var(--fg-secondary);
}
.sk-footer-disclosure-lead strong {
  color: var(--coral);
  font-family: var(--mono);
  font-weight: 600;
  margin-right: 0.2rem;
}
.sk-footer-region {
  font-size: 0.72rem;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}
.sk-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 0.72rem;
  justify-content: flex-end;
}
.sk-footer-links a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sk-footer-links a:hover {
  color: #6a8e6e;
}

@media (max-width: 768px) {
  .sk-footer-disclosure { text-align: center; max-width: 100%; }
  .sk-footer-disclosure .sk-footer-disclaimer { text-align: center; }
  .sk-footer-links { justify-content: center; }
}

/* ============================================
   FTC + privacy compliance band — sits between
   hero and the first product card so the cookie
   disclosure, US-only scope and privacy note are
   visible above the fold. Reuses sage / coral /
   mono tokens already defined in skincare.css.
   ============================================ */

.sk-disclosure {
  background: var(--sage-dim);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}
.sk-disclosure-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--fg-secondary);
  line-height: 1.55;
}
.sk-disclosure-track,
.sk-disclosure-region,
.sk-disclosure-privacynote {
  background: rgba(255, 255, 255, 0.5);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.sk-disclosure-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-start;
}
.sk-disclosure-track .pill {
  flex-shrink: 0;
  align-self: center;
}
.sk-disclosure-track p { margin: 0; flex: 1 1 320px; }
.sk-disclosure-region { font-size: 0.82rem; }
.sk-disclosure-privacynote { font-size: 0.82rem; }
.sk-disclosure-privacynote a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sk-disclosure-privacynote a:hover { color: #6a8e6e; }

@media (max-width: 768px) {
  .sk-disclosure { padding: 1rem 1rem; }
  .sk-disclosure-inner { gap: 0.6rem; }
  .sk-disclosure-track { flex-direction: column; gap: 0.4rem; }
  .sk-disclosure-track .pill { align-self: flex-start; }
}

/* ============================================
   SEO landing page — /skincare-us/<slug>
   Reuses existing tokens (serif / sans / mono /
   sage / coral / border / radius) defined in
   skincare.css. No new fonts, no new colors.
   ============================================ */

.sk-seo-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.sk-seo-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}
.sk-seo-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
}
.sk-seo-h1 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.sk-seo-intro {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--fg-secondary);
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 60ch;
}
.sk-seo-intro:last-child { margin-bottom: 0; }

.sk-seo-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}
.sk-seo-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  max-width: 760px;
}
.sk-seo-section:last-of-type { border-bottom: none; }
.sk-seo-section h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
}
.sk-seo-body p {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--fg);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.sk-seo-body p:last-child { margin-bottom: 0; }

.sk-seo-products {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.sk-seo-seealso {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--sage-dim);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.sk-seo-seealso a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sk-seo-seealso a:hover { color: #6a8e6e; }

.sk-seo-cta {
  margin-top: 2.5rem;
  padding: 1.5rem 1.5rem;
  background: var(--sage-dim);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  max-width: 760px;
}
.sk-seo-cta a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sk-seo-cta a:hover { color: #6a8e6e; }

@media (max-width: 768px) {
  .sk-seo-hero-inner { padding: 3rem 1.25rem 2.25rem; }
  .sk-seo-wrap { padding: 2.5rem 1.25rem 4rem; }
  .sk-seo-seealso { padding: 1rem 1.25rem; font-size: 0.74rem; }
  .sk-seo-cta { padding: 1.25rem 1.25rem; }
}

/* ============================================
   Founder dashboard — /dashboard/affiliate
   Tiles / table / empty state. Reuses the same
   sage / coral / mono / serif / sans tokens and
   radius values already loaded from skincare.css
   so the dashboard inherits the storefront look
   without introducing a new visual language.
   ============================================ */

.sk-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.sk-dashboard-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.sk-dashboard-sub {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  max-width: 70ch;
  margin-top: 0.75rem;
}
.sk-dashboard-sub code {
  font-family: var(--mono);
  background: var(--sage-dim);
  color: var(--sage);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.sk-dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.sk-dashboard-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sk-dashboard-tile-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.sk-dashboard-tile-value {
  font-family: var(--serif);
  font-size: 2.25rem;
  color: var(--fg);
  line-height: 1;
}
.sk-dashboard-tile-meta {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--fg-muted);
}

.sk-dashboard-empty {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--fg-secondary);
  background: var(--sage-dim);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
  line-height: 1.55;
}

.sk-dashboard-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.sk-dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.88rem;
}
.sk-dashboard-table th,
.sk-dashboard-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.sk-dashboard-table th {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  background: var(--sage-dim);
}
.sk-dashboard-table tr:last-child td { border-bottom: none; }
.sk-dashboard-brand {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.sk-dashboard-name {
  font-family: var(--sans);
  color: var(--fg);
  margin-top: 0.25rem;
}
.sk-dashboard-count {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--coral);
}
.sk-dashboard-last {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--fg-secondary);
}
.sk-dashboard-url a {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sk-dashboard-footnote {
  margin-top: 2rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.sk-dashboard-footnote code {
  font-family: var(--mono);
  background: var(--sage-dim);
  color: var(--sage);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .sk-dashboard-tiles { grid-template-columns: 1fr; }
  .sk-dashboard { padding: 2rem 1.25rem 3.5rem; }
}