/* ToySetFox skin over the Lofvi base (site.css). The page structure, the
   rhythm and the flow stay the base's; this file sets the kit's type and
   geometry (Bricolage Grotesque headings, round cards, pill controls) and
   adds the site's own parts: the set number, the tag-shaped price and deal
   labels, the set-number finder, the gift finder and the sample notice.
   Tokens only (tokens.css + platform-tokens.css). */

/* ── Type: Bricolage for display, bold and a little tight ─────────── */
h1,
h2,
h3,
h4 {
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-snug);
}

.open__title,
.ph__title,
.pdp__title,
.brand-hero__name {
  letter-spacing: var(--tracking-display);
}

.block__title {
  font-weight: var(--fw-display);
}

/* Card and list names stay in the body face (the base's choice). */
.card__name {
  font-weight: var(--fw-semibold);
}

::selection {
  background: var(--fox-tint);
}

:focus-visible {
  outline-color: var(--focus);
}

/* ── Geometry: the tag's rounded back ─────────────────────────────── */
.button,
.hdr-search,
.sort__select,
.facets__toggle,
.chip,
.setfind__input {
  border-radius: var(--radius-pill);
}

.hdr-search input {
  padding-left: var(--space-5);
}

.hdr-search button {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.frame,
.gallery__frame,
.gallery__thumb,
.tile__type,
.brand-tile__mosaic,
.brand-mosaic__item .frame {
  border-radius: var(--radius);
}

.frame--art {
  border-radius: var(--radius);
}

/* Product illustrations sit on white cards on the paper page. */
.card .frame,
.pdp .frame,
.brand-mosaic .frame {
  background: var(--paper-card);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.wordmark,
.ftr__wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand-lockup {
  display: block;
  width: auto;
  height: 30px;
}

@media (min-width: 900px) {
  .brand-lockup {
    height: 34px;
  }
}

.ftr__wordmark .brand-lockup {
  height: 30px;
}

/* ── The set number ───────────────────────────────────────────────── */
/* The manufacturer's article number, as it is printed on the box: a small
   ink outline with tabular figures. */
.setno {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.setno--lg {
  padding: 0 0.3em;
  border-width: 2px;
  border-color: var(--ink);
  border-radius: 0.18em;
  font-size: 0.62em;
  line-height: 1.3;
  vertical-align: 0.18em;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 22px;
}

.card__brand {
  font-weight: var(--fw-medium);
}

/* ── Price and deal labels (docs/brands/toysetfox/final/deal-label.css) ── */
/* The recommended price in a quiet oat tag; its label beside it. */
.price-tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.price-tag__label {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.tsf-deal--quiet {
  --deal-ring: var(--line-strong);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

.card__price {
  margin-top: var(--space-2);
}

.open__caption .price-tag {
  margin-top: var(--space-2);
}

.pdp__lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 0;
}

.pdp__lead-tags:empty {
  display: none;
}

.offer__drop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Sample notice ────────────────────────────────────────────────── */
.sample-data {
  padding-top: var(--space-3);
}

.sample-data__inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--fox-tint);
  color: var(--text-body);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.sample-data__label {
  color: var(--ember);
  font-weight: var(--fw-semibold);
}

.hero + .sample-data,
.sample-data + .hero .open {
  padding-top: var(--space-6);
}

/* The home notice sits on the hero band. */
main > .sample-data:first-child {
  position: relative;
}

/* ── Home: the set-number finder ──────────────────────────────────── */
.hero {
  background: var(--paper-soft);
}

.open__stats::before {
  background: var(--fox);
}

.setfind {
  display: grid;
  gap: var(--space-2);
  max-width: 30rem;
  margin-top: var(--space-2);
}

.setfind__label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.setfind__row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-card);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.setfind__row:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--fox-tint);
}

.setfind__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.setfind__input:focus {
  outline: none;
}

.setfind__input::placeholder {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.setfind__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.setfind__go {
  flex: none;
}

.setfind__hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* The lead set: its white card floats on the hero band. */
.open__figure .frame {
  background: var(--paper-card);
  border-radius: var(--radius-lg);
}

/* ── Home: the gift finder ────────────────────────────────────────── */
.gifts__panel {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
}

@media (min-width: 900px) {
  .gifts__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: var(--space-12);
  }

  .gifts__ages {
    grid-column: 2;
  }
}

@media (max-width: 480px) {
  .gifts__panel {
    padding: var(--space-6) var(--space-5);
  }
}

.gifts__text {
  display: grid;
  gap: var(--space-3);
}

.gifts__lede {
  max-width: 28rem;
  color: var(--text-body);
}

.gifts__budgets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: 0;
  list-style: none;
}

.gift-tag {
  display: inline-block;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.tsf-deal--budget {
  font-size: var(--text-h4);
}

@media (max-width: 480px) {
  .tsf-deal--budget {
    font-size: var(--text-body-lg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .gift-tag:hover {
    transform: translateX(-3px) rotate(-2deg);
  }
}

.gifts__ages {
  display: grid;
  gap: var(--space-3);
}

.gifts__h {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-card);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.chip-link:hover {
  border-color: var(--ink);
}

/* ── Product page ─────────────────────────────────────────────────── */
.setfacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.setfacts li {
  display: inline-flex;
  gap: var(--space-1);
}

.setfacts__label {
  color: var(--text-muted);
}

.setfacts__value {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ── Motion off on request ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gift-tag,
  .setfind__row {
    transition: none;
  }

  .gift-tag:hover {
    transform: none;
  }
}

/* Prices in the display face at its price weight (kit: 800, tabular). */
.pdp__lead-amount,
.offer__amount,
.pdp__price-value {
  font-family: var(--font-display);
  font-weight: var(--fw-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* The hero column may never grow past the phone screen (the finder's
   input and button would otherwise set its minimum width). */
.open {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.open__text,
.setfind,
.setfind__row {
  min-width: 0;
}

.setfind__input {
  width: 100%;
}

/* The sample description is a plain paragraph, not a second lede. */
.pdp__description {
  max-width: var(--measure);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* On an oat band the quiet tag turns white, so it keeps its shape. */
.hero .tsf-deal--quiet,
.gifts .tsf-deal--quiet {
  background: var(--paper-card);
}

/* Illustrations are drawn to the edge of their box: a little more air on
   the large product frame than a photo needs. */
.pdp .frame img {
  --frame-pad: 16%;
}

.shops-slot {
  border-radius: var(--radius);
}

/* Quick links and filter chips share the pill of every control. */
.jump a,
.search-browse__chip,
.chips__clear {
  border-radius: var(--radius-pill);
}

.tile--art .frame--art,
.subcats .frame {
  border-radius: var(--radius);
}