/*
 * ToyCheckout Preview visual override layer.
 *
 * This in-image file keeps local development and a future production image
 * self-contained. On Preview, Nginx serves the separately managed file at
 * the same URL so low-risk CSS-only visual refinements can be released
 * without a Docker rebuild.
 *
 * Rules added here must be consolidated into the application stylesheet
 * before a production release.
 */

/* 2026-09-01: About page “Start exploring” matches the 18px About Us label. */
.band-orange.section-compact .eyebrow { font-size: 18px; }

/* 2026-09-01: hide only the duplicate Cart-hero checkout CTA. */
body:has(.cart-hero-eyebrow) .band-soft-gray.hero .row-actions > a.btn-rent[href="/checkout"] { display: none; }

/* 2026-09-01: ensure Cart +/- quantity controls stay readable on color blocks. */
.cart-group-buy .qty-step button,
.cart-group-rent .qty-step button,
.cart-group-buy .qty-step span,
.cart-group-rent .qty-step span { color: var(--text-body-strong); }
.cart-group-buy .qty-step button,
.cart-group-rent .qty-step button { font-family: system-ui, sans-serif; font-size: 22px; font-weight: 800; line-height: 1; }

/* 2026-09-03: Buy journey imagery uses the approved Rent-card crop positions. */
.how-path-section.how-buy-path .flip-card:nth-child(1) .flip-card-image img { object-position: center 70%; }
.how-path-section.how-buy-path .flip-card:nth-child(2) .flip-card-image img { object-position: center 42%; }
.how-path-section.how-buy-path .flip-card:nth-child(3) .flip-card-image img { object-position: center 40%; }
.how-path-section.how-buy-path .flip-card:nth-child(4) .flip-card-image img { object-position: center 50%; }

/* 2026-09-03: submitted applications stay in review on this page.  The
   checkout CTA is not shown until membership payment has been confirmed. */
body:has(.membership-application-status) .membership-hero-action { display: none; }
body:has(.membership-payment-pending-status) .membership-hero-action { display: none; }
.membership-application-status {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.membership-application-status p {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

/* 2026-09-03: on desktop the Membership intro and comparison card use the
   approved 3:7 visual split.  The existing narrow-screen rule still stacks
   them vertically. */
@media (min-width: 1001px) {
  .membership-hero-simple { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
}

/* 2026-09-06: Contact support cards keep their content/layout, but do not
   show the decorative outer panel frame. The selector is scoped to the
   contact mail link so no other split-grid panels are changed. */
body:has(a[href="mailto:info@toycheckout.ca"]) .split-grid > .panel {
  border: 0;
}

/* 2026-09-06: Policies list keeps each paper card, but removes only the
   surrounding left-column panel frame. */
body:has(.policy-card.paper-note-card) .policy-grid > .panel:first-child {
  border: 0;
}

/* 2026-09-06: keep the Featured Toys eyebrow aligned with the desktop
   How It Works eyebrow size; mobile keeps its existing compact size. */
@media (min-width: 761px) {
  .home-featured-eyebrow { font-size: 18px; }
}

/* 2026-09-06: mobile How It Works rental rules heading matches the 18px
   path heading above it; other mobile eyebrows remain unchanged. */
@media (max-width: 760px) {
  .how-rules-callout .eyebrow { font-size: 18px; }
}

/* 2026-09-06: Customer login uses the concise Account eyebrow at the same
   size as the other section subtitles. */
body:has(.account-auth-layout) .account-auth-layout > .stack-tight > .eyebrow {
  font-size: 0;
}
body:has(.account-auth-layout) .account-auth-layout > .stack-tight > .eyebrow::after {
  content: "Account";
  font-size: 18px;
}

/* 2026-09-08: compact Facebook/Amazon floating card on desktop and mobile.
   Scaling the complete dock keeps its typography, buttons, links, and colors
   proportional while reducing the visual footprint to about one quarter. */
.external-links-dock {
  transform: scale(0.5);
  transform-origin: bottom right;
}