/* FarmToyDeals skin, v2 "De speelgoedkast" (docs/sites/farmtoydeals.md).
   site.css, categories.css and designers.css are Lofvi's components (the
   shared base); this file maps their tokens onto the Schuur kit and gives
   the site its own world: clay-green barn boards, a toy shelf, the gable
   with crossed boards as the section mark, product pictures on a warm
   studio sweep, the scale field and tag-shaped choices. Tokens only, plus
   the few material colours named below. */

/* ── Lofvi token names on the Schuur kit ─────────────────────────────── */
:root {
  --font-editorial: var(--font-display);
  --sage: var(--red);
  --sage-deep: var(--red-deep);
  --dur-slow: 560ms;
  --header-y-end: var(--space-12);
  --text-hero: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --text-h2-lg: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
  --text-title-sm: 1.75rem;
  --text-heading-sm: 1.625rem;
  --text-subtitle: 1.25rem;
  --text-meta: 0.84375rem;
  --text-label: 0.75rem;
  --tracking-wide: 0.02em;

  /* Materials. */
  --board: #1e2b24; /* the cabinet: clay-green barn boards */
  --board-line: rgb(0 0 0 / 22%);
  --board-light: rgb(255 255 255 / 4%);
  --on-board: #f3ede1;
  --on-board-muted: #c9c1ae;
  --plank: #9a7240; /* shelf planks */
  --plank-light: #b98f55;
  --plank-dark: #6f4f29;
  --tag: #f3ede1; /* shop tags */
  /* Product pictures stand on a warm studio sweep. */
  --sweep: radial-gradient(120% 85% at 50% 22%, #fffdf8 0%, #f8efdd 58%, #efdfbf 100%);
  --tile: #f1e2c2;
  --tile-hover: #ead7b0;
  /* The section mark: a gambrel gable with crossed boards (the kit's barn,
     drawn as a line). Used as a mask so it takes the text's red. */
  --gable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M6 30 V19 L12 11 L20 7.5 L28 11 L34 19 V30' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11 L26 3 M28 11 L14 3' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='16' r='2.4'/%3E%3Cpath d='M3 30 H37' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --board: #101713;
    --tile: #26312a;
    --tile-hover: #2f3b33;
    --sweep: radial-gradient(120% 85% at 50% 22%, #f6efe2 0%, #eadcc0 100%);
  }
}

:root[data-theme="dark"] {
  --board: #101713;
  --tile: #26312a;
  --tile-hover: #2f3b33;
  --sweep: radial-gradient(120% 85% at 50% 22%, #f6efe2 0%, #eadcc0 100%);
}

/* ── Type: Fraunces with display craft, Figtree for text ──────────────── */
h1,
h2,
h3,
h4,
.ph__title,
.pdp__title,
.block__title {
  font-weight: var(--fw-semibold);
  font-kerning: normal;
  font-variation-settings: var(--display-settings);
  letter-spacing: -0.02em;
}

/* Optical tracking: the bigger the headline, the tighter (a static cut has
   no opsz axis, so size-specific spacing does its work). */
h1,
.ph__title,
.brand-hero__name,
.dz-head__title {
  letter-spacing: -0.028em;
  line-height: 1.02;
}

.block__title {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  letter-spacing: -0.022em;
}

h3,
h4 {
  letter-spacing: -0.012em;
}

body {
  font-feature-settings: "kern", "liga", "calt";
}

.pdp__lead-amount,
.pdp__price-value,
.offer__amount {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-variant-numeric: var(--numeric);
  letter-spacing: -0.015em;
}

/* ── The section mark: a gable above every section title ─────────────── */
.block__title::before,
.ph__title::before,
.brand-hero__name::before,
.dz-head__title::before {
  content: "";
  display: block;
  width: 34px;
  height: 27px;
  margin-bottom: var(--space-3);
  background: var(--red);
  -webkit-mask: var(--gable) no-repeat left bottom / contain;
  mask: var(--gable) no-repeat left bottom / contain;
}

.block__head {
  align-items: flex-end;
}

/* ── Materials: barn boards and planks ───────────────────────────────── */
.kast,
.band--boards {
  background-color: var(--board);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 138px, var(--board-line) 138px 140px, var(--board-light) 140px 142px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.2%) 0 2px, transparent 2px 9px);
  color: var(--on-board);
}

.band--boards .block__title,
.band--boards .how li,
.band--boards .how li::before {
  color: var(--on-board);
}

.band--boards .block__title::before {
  background: var(--hay);
}

.band--boards .how li {
  border-top-color: rgb(243 237 225 / 25%);
}

.band--boards .how li::before {
  border-color: var(--hay);
  color: var(--hay);
}

/* ── Product pictures on the warm studio sweep ───────────────────────── */
.frame {
  border-radius: var(--radius-lg);
  background: var(--sweep);
}

.frame img {
  mix-blend-mode: normal;
}

.frame--art {
  background: var(--tile);
}

.gallery__thumb,
.gallery__thumb img,
.opt,
.chip,
.search-browse__chip {
  border-radius: var(--radius-sm);
}

/* Cards: brand and article number read first, then the model, then the
   price in barn red. */
.card__link {
  gap: var(--space-3);
}

.card__brand {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.card__name {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
}

.card__detail {
  font-variant-numeric: var(--numeric);
}

.card__price {
  color: var(--red);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: var(--numeric);
}

/* ── Buttons, fields: the kit's rounded geometry ─────────────────────── */
.button {
  border-color: var(--red);
  border-radius: var(--radius);
  background: var(--red);
  color: var(--on-red);
  font-weight: var(--fw-semibold);
}

.button:hover {
  border-color: var(--red-deep);
  background: var(--red-deep);
}

.button--quiet {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover {
  border-color: var(--ink);
  background: transparent;
}

.button--hay {
  min-height: 52px;
  border-color: var(--hay);
  background: var(--hay);
  color: var(--on-hay);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 16%);
}

.button--hay:hover {
  border-color: #f3cd74;
  background: #f3cd74;
}

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

/* ── Header: the drawn lock-up, one quiet row ────────────────────────── */
.wordmark,
.ftr__wordmark {
  align-items: center;
}

.brand-lockup {
  display: block;
  width: auto;
  height: var(--logo-header-h-sm);
  min-width: var(--logo-min-w);
}

@media (min-width: 900px) {
  .wordmark .brand-lockup {
    height: var(--logo-header-h);
  }
}

.ftr__wordmark .brand-lockup {
  height: var(--logo-header-h-sm);
}

.hdr-row1 {
  align-items: center;
}

.hdr-search {
  margin-top: 0;
}

.hdr-cats {
  column-gap: var(--space-6);
}

/* Category names are longer than Lofvi's: the row gives way earlier, last
   hand-picked category first (all stay in the Products menu). */
@media (max-width: 1400px) {
  .hdr-cat:nth-child(n + 7):not(.hdr-cat--end):not(.hdr-cat--end ~ .hdr-cat) {
    display: none;
  }
}

@media (max-width: 1200px) {
  .hdr-cat:nth-child(n + 6):not(.hdr-cat--end):not(.hdr-cat--end ~ .hdr-cat) {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hdr-cat:nth-child(n + 5):not(.hdr-cat--end):not(.hdr-cat--end ~ .hdr-cat) {
    display: none;
  }
}

/* The home page has its own big search in the cabinet: one is enough. */
body:has(.kast) .hdr-search {
  display: none;
}

body:has(.kast) .hdr-actions {
  margin-left: auto;
}

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

.sample-data__inner {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.sample-data__label {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 2px var(--space-3) 2px var(--space-2);
  border-radius: var(--radius-badge);
  background: var(--hay);
  color: var(--on-hay);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}

.kast .sample-data {
  margin: 0 0 var(--space-5);
}

/* In the cabinet's text column the notice takes the column's width. */
.kast .sample-data .container {
  max-width: none;
  padding: 0;
}

.kast .sample-data__inner {
  color: var(--on-board-muted);
}

/* ── Home: the cabinet ───────────────────────────────────────────────── */
.kast__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-12) var(--space-16);
  align-items: center;
  padding-block: var(--space-10) var(--space-12);
}

.kast__title {
  margin-bottom: var(--space-6);
  color: var(--on-board);
  font-size: clamp(2.375rem, 1.2rem + 2.9vw, 4rem);
  overflow-wrap: normal;
  text-wrap: balance;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.kast__title em {
  color: var(--hay);
  font-style: normal;
}

.kast__search {
  display: flex;
  align-items: center;
  max-width: 36rem;
  height: 60px;
  margin-bottom: var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-input);
  box-shadow: 0 16px 32px -20px rgb(0 0 0 / 70%);
}

.kast__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-5);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--text-body-lg);
}

.kast__search input:focus {
  outline: none;
}

.kast__search:focus-within {
  outline: 3px solid var(--hay);
  outline-offset: 2px;
}

.kast__search button {
  display: grid;
  place-items: center;
  width: 60px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

/* The gift finder: age and budget as big shop tags. */
.finder {
  display: grid;
  gap: var(--space-4);
}

.finder__label {
  margin-bottom: var(--space-3);
  color: var(--on-board-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

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

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--space-5) 0 calc(var(--space-5) + 10px);
  border-radius: var(--radius-badge);
  background: var(--tag);
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 14%), 0 6px 14px -10px rgb(0 0 0 / 60%);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* The punched hole of a shop tag. */
.tag::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgb(30 43 36 / 45%);
}

.tag:hover {
  transform: translateY(-2px);
}

.tag[aria-pressed="true"] {
  background: var(--hay);
  color: var(--on-hay);
}

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

/* The toy shelf. */
.kast__shelves {
  display: grid;
  gap: var(--space-12);
}

.shelf {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--space-4);
  min-height: 200px;
  margin: 0;
  padding: 0 var(--space-4);
  border-bottom: 16px solid var(--plank);
  border-image: linear-gradient(var(--plank-light), var(--plank) 40%, var(--plank-dark)) 1;
  box-shadow: 0 22px 18px -16px rgb(0 0 0 / 55%);
  list-style: none;
}

.shelf__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
}

.shelf__toy {
  position: relative;
  display: block;
  text-decoration: none;
}

.shelf__toy img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -6%;
  transition: transform var(--dur) var(--ease-out);
}

.shelf__toy:hover img {
  transform: translateY(-6px);
}

/* A small tag hangs from the plank under each toy: its brand. */
.shelf__tag {
  position: absolute;
  left: 50%;
  bottom: -40px;
  padding: 2px var(--space-3);
  border-radius: 3px;
  background: var(--tag);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transform: translateX(-50%) rotate(-2deg);
}

.shelf__toy:focus-visible {
  outline: 2px solid var(--hay);
  outline-offset: 4px;
}

@media (max-width: 899px) {
  .kast__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-8) var(--space-12);
  }

  .kast__title {
    max-width: none;
    margin-bottom: var(--space-6);
  }

  .kast__search {
    margin-bottom: var(--space-6);
  }

  .shelf {
    min-height: 120px;
  }

  /* One shelf on phones: the second holds three toys that stay in view. */
  .kast__shelves .shelf:first-child {
    display: none;
  }

  .tag {
    min-height: 46px;
    font-size: var(--text-ui);
  }
}

/* ── Home: the scale field (the signature) ───────────────────────────── */
.veld .block__head {
  margin-bottom: var(--space-6);
}

.veld__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.veld__scroll::-webkit-scrollbar {
  display: none;
}

.veld__scene {
  position: relative;
  min-width: 880px;
  max-width: 1600px;
  margin-inline: auto;
  aspect-ratio: 1600 / 620;
  background: var(--paper-soft) center / cover no-repeat;
}

.veld__scales {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.veld__scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: clamp(16px, 3vw, 44px);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.veld__scale:hover {
  background: rgb(255 253 248 / 28%);
}

.veld__scale:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}

.veld__ratio {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
  font-weight: var(--fw-semibold);
  font-variant-numeric: var(--numeric);
  letter-spacing: -0.03em;
  line-height: 1;
}

.veld__note {
  max-width: 16ch;
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ── Home: tractor brands and toy brands ─────────────────────────────── */
.makes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.make {
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-card);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.make:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Toy brands as enamel signs on the shed wall. */
.signs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sign {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 6.5rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--board);
  box-shadow: inset 0 0 0 4px var(--board), inset 0 0 0 5px rgb(243 237 225 / 22%);
  color: var(--on-board);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.sign:hover {
  transform: translateY(-2px);
}

.sign__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.012em;
}

.sign__count {
  color: var(--hay);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

/* ── Listings: a light board band behind the page head ───────────────── */
.ph {
  border-image: repeating-linear-gradient(90deg, var(--paper-soft) 0 138px, #ebdfc8 138px 140px) fill 0 // 0 100vw;
  padding-bottom: var(--space-8);
}

.ph + .children,
.ph + .container {
  margin-top: var(--space-8);
}

/* Jump links (a brand's vehicle types) as small tags. */
.jump a {
  border-radius: var(--radius-sm);
  background: var(--paper-card);
}

/* ── Product page ────────────────────────────────────────────────────── */
.gallery__frame,
.pdp__media .frame {
  background: var(--sweep);
}

.pdp__article {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.pdp__article li {
  position: relative;
  padding: 3px var(--space-3) 3px calc(var(--space-3) + 8px);
  border-radius: var(--radius-badge);
  background: var(--paper-2);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: var(--numeric);
}

.pdp__article li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--paper);
}

.pdp__article li:first-child {
  background: var(--hay);
  color: var(--on-hay);
  font-weight: var(--fw-semibold);
}

.pdp__designer {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
}

.pdp__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.pdp__lead-amount {
  color: var(--red);
}

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

/* ── Tractor-brand pages without a portrait ──────────────────────────── */
/* designers.css loads after this file on those pages: one class more. */
.dz-mono.dz-mono {
  border-radius: var(--radius-lg);
  background: var(--sweep);
}

.dz-mono__tractor {
  position: absolute;
  inset: auto 6% 6% 6%;
  width: 88%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tag,
  .make,
  .sign,
  .shelf__toy img,
  .veld__scale {
    transition: none;
  }
}