/*
 * Components: header, buttons, product card, PDP pieces.
 *
 * Design notes that are decisions, not taste:
 *
 * - The product card is built for ONE portrait image and no copy, because that
 *   is 140 of 198 and 118 of 198 live products respectively. No hover-swap, no
 *   excerpt. Anything richer is a bonus layer, never load-bearing.
 * - Gold is a highlight only (offers, "nieuw"). It must not become a second
 *   accent or the palette stops feeling warm and starts feeling loud.
 */

/* ---------- Buttons ---------- */

.faab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--faab-space-1);
  padding: 0.85em 1.75em;
  border: 1px solid transparent;
  border-radius: var(--faab-radius-pill);
  background: var(--faab-espresso);
  color: var(--faab-text-invert);
  font: inherit;
  font-size: var(--faab-fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--faab-dur) var(--faab-ease),
              color var(--faab-dur) var(--faab-ease),
              border-color var(--faab-dur) var(--faab-ease);
}
.faab-btn:hover { background: var(--faab-brown); color: var(--faab-text-invert); }

.faab-btn--ghost {
  background: transparent;
  color: var(--faab-text);
  border-color: var(--faab-line);
}
.faab-btn--ghost:hover { background: var(--faab-surface); border-color: var(--faab-accent); color: var(--faab-text); }

.faab-btn--block { width: 100%; }

/* ---------- Header ---------- */

/*
 * The espresso bar from "design C". It is the one dark element on the page and
 * it is what makes the ivory below read as warm rather than washed out.
 */
.faab-topbar {
  background: var(--faab-bg-deep);
  color: var(--faab-text-invert);
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
}
.faab-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faab-space-4);
  min-height: 38px;
}
.faab-topbar a { color: var(--faab-blush); text-decoration: none; }
.faab-topbar a:hover { color: var(--faab-white); }

.faab-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--faab-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--faab-line-soft);
}
/*
 * Header row 1: logo, search, account.
 *
 * Search sits centre-stage, following deloox.nl rather than nakhair.com.au.
 * The reasoning is in docs/benchmarks.md: a salon reordering a product it
 * already stocks is the single most common journey on this site, and 276
 * products is well past the point where browsing beats searching. NAK's site
 * hides search behind an icon because it is a 40-product DTC brand store. This
 * is not that.
 */
.faab-header__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--faab-space-4);
  min-height: 76px;
}

.faab-search { position: relative; display: flex; }
.faab-search input[type="search"] {
  width: 100%;
  padding: 0.75em 3em 0.75em 1.15em;
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius-pill);
  background: var(--faab-surface);
  font: inherit;
  font-size: var(--faab-fs-sm);
  color: var(--faab-text);
  -webkit-appearance: none;
  appearance: none;
}
.faab-search input::placeholder { color: var(--faab-text-muted); }
.faab-search input:focus { outline: 2px solid var(--faab-accent); outline-offset: 1px; border-color: transparent; }
.faab-search button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--faab-espresso); color: var(--faab-ivory);
  cursor: pointer;
}

/* Header row 2: the nav. */
.faab-header__nav {
  display: flex;
  align-items: center;
  gap: var(--faab-space-5);
  padding-bottom: var(--faab-space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.faab-header__nav::-webkit-scrollbar { display: none; }
.faab-header__nav a {
  white-space: nowrap;
  font-size: var(--faab-fs-sm);
  color: var(--faab-text);
  text-decoration: none;
  padding-block: var(--faab-space-1);
  border-bottom: 1.5px solid transparent;
}
.faab-header__nav a:hover,
.faab-header__nav a[aria-current="page"] { color: var(--faab-accent); border-bottom-color: var(--faab-accent); }
.faab-header__nav a.is-brands { font-weight: 500; }

@media (max-width: 720px) {
  .faab-header__row { grid-template-columns: auto auto; row-gap: var(--faab-space-2); }
  .faab-search { grid-column: 1 / -1; order: 3; }
}

/* ---------- Product rail ---------- */

.faab-rail__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-2) var(--faab-space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--faab-space-4);
}
.faab-rail__head h2 { font-size: var(--faab-fs-2xl); margin: 0; }
.faab-rail__all {
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  color: var(--faab-accent);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Facet bar ---------- */

/*
 * Dropdowns above the grid rather than a left rail, so the left column stays
 * free for the category tree. Straight from deloox.nl, which is the client's
 * own reference for filtering.
 */
.faab-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--faab-space-2);
  margin-bottom: var(--faab-space-5);
}
.faab-facet {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faab-space-2);
  padding: 0.7em 1em;
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius);
  background: var(--faab-surface);
  font-size: var(--faab-fs-sm);
  color: var(--faab-text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.faab-facet::after {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--faab-brown);
  border-bottom: 1.5px solid var(--faab-brown);
  transform: translateY(-2px) rotate(45deg);
}
.faab-facet:hover { border-color: var(--faab-accent); }
.faab-facet[data-active] { border-color: var(--faab-accent); background: var(--faab-shell); }
.faab-facet__count {
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
}

/*
 * A facet we cannot populate yet. Haartype, Effect and "Vrij van" need product
 * data the catalogue holds in no form at all (docs/benchmarks.md). Showing them
 * disabled is deliberate: it makes the gap visible in the prototype instead of
 * quietly dropping three of the client's eight reference facets.
 */
.faab-facet[disabled] { opacity: .45; cursor: not-allowed; }
.faab-facet[disabled]:hover { border-color: var(--faab-line); }

.faab-facets__note {
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
  margin-top: calc(var(--faab-space-4) * -1 + 2px);
  margin-bottom: var(--faab-space-5);
}

/* ---------- Dagaanbieding ---------- */

/*
 * The daily offer, after deloox.nl. The countdown is the part that makes it
 * work, so it needs an end-time field in ACF, not just a product reference.
 */
.faab-deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--faab-space-4);
  align-items: center;
  padding: var(--faab-space-4);
  border-radius: var(--faab-radius-lg);
  background: var(--faab-clay);
  color: var(--faab-ivory);
}
@media (max-width: 620px) { .faab-deal { grid-template-columns: 1fr; } }

.faab-deal__media {
  aspect-ratio: 1;
  border-radius: var(--faab-radius);
  background: var(--faab-white);
  display: grid;
  place-items: center;
  padding: var(--faab-space-3);
}
.faab-deal__media img { max-height: 100%; width: auto; object-fit: contain; }
.faab-deal h2 { color: var(--faab-ivory); font-size: var(--faab-fs-2xl); margin-bottom: var(--faab-space-2); }
.faab-deal__name { font-size: var(--faab-fs-sm); line-height: 1.45; margin-bottom: var(--faab-space-3); }
.faab-deal__name b { font-weight: 500; }

.faab-countdown { display: flex; gap: var(--faab-space-1); margin-bottom: var(--faab-space-3); }
.faab-countdown__unit {
  min-width: 58px;
  padding: var(--faab-space-1) var(--faab-space-2);
  border-radius: var(--faab-radius-sm);
  background: var(--faab-white);
  color: var(--faab-espresso);
  text-align: center;
}
.faab-countdown__n {
  display: block;
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.faab-countdown__l { font-size: 10px; color: var(--faab-text-muted); letter-spacing: .04em; }

.faab-deal .faab-price { color: var(--faab-ivory); font-size: var(--faab-fs-3xl); }
.faab-deal .faab-price small { color: color-mix(in srgb, var(--faab-ivory) 75%, transparent); }
.faab-deal .faab-price del { color: color-mix(in srgb, var(--faab-ivory) 60%, transparent); }

/* ---------- Size chip on cards ---------- */

/*
 * From deloox.nl. The catalogue is full of 375ml / 150ml / 60ml variants whose
 * names differ only in the number, so the chip disambiguates them in a grid.
 */
.faab-chip {
  align-self: flex-start;
  padding: 0.2em 0.6em;
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius-sm);
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
  font-variant-numeric: tabular-nums;
}

.faab-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--faab-space-4);
  min-height: 76px;
}

/*
 * Two-tone serif wordmark. "faab" in espresso, "brands" in clay. Kept as live
 * text rather than an image so it stays crisp and readable to screen readers;
 * swap for the real logo file once the client sends the vector.
 */
.faab-logo {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  justify-self: center;
}
.faab-logo__a { color: var(--faab-espresso); }
.faab-logo__b { color: var(--faab-clay); }

.faab-nav { display: flex; gap: var(--faab-space-4); align-items: center; }
.faab-nav--end { justify-content: flex-end; }
.faab-nav a {
  color: var(--faab-text);
  text-decoration: none;
  font-size: var(--faab-fs-sm);
  padding-block: var(--faab-space-1);
  border-bottom: 1px solid transparent;
}
.faab-nav a:hover { color: var(--faab-accent); border-bottom-color: var(--faab-accent); }

@media (max-width: 860px) {
  .faab-header__inner { grid-template-columns: auto 1fr auto; }
  .faab-nav--start { display: none; }
  .faab-logo { justify-self: start; }
}

/* ---------- Hero ---------- */

.faab-hero {
  background: linear-gradient(180deg, var(--faab-shell) 0%, var(--faab-bg) 100%);
  padding-block: clamp(3rem, 8vw, 6rem);
}
.faab-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.faab-hero__title { margin-bottom: var(--faab-space-4); }
.faab-hero__lead {
  font-size: var(--faab-fs-lg);
  color: var(--faab-brown);
  max-width: 46ch;
  margin-bottom: var(--faab-space-5);
}
.faab-hero__actions { display: flex; flex-wrap: wrap; gap: var(--faab-space-2); }
.faab-hero__media {
  border-radius: var(--faab-radius-lg);
  overflow: hidden;
  box-shadow: var(--faab-shadow-lift);
  aspect-ratio: 4 / 3;
  background: var(--faab-nude);
}
@media (max-width: 860px) {
  .faab-hero__inner { grid-template-columns: 1fr; }
}

/* ---------- Product card ---------- */

.faab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--faab-space-4);
}

.faab-card {
  display: flex;
  flex-direction: column;
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  overflow: hidden;
  transition: transform var(--faab-dur) var(--faab-ease),
              box-shadow var(--faab-dur) var(--faab-ease),
              border-color var(--faab-dur) var(--faab-ease);
}
.faab-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--faab-shadow-soft);
  border-color: var(--faab-line);
}

/*
 * 4:5 portrait. Bottles are tall; a square crop wastes width and a hover-swap
 * needs a second image that 140 of 198 products do not have.
 */
.faab-card__media {
  aspect-ratio: 4 / 5;
  background: var(--faab-surface-muted);
  overflow: hidden;
}
.faab-card__media img { width: 100%; height: 100%; object-fit: cover; }

.faab-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--faab-space-1);
  padding: var(--faab-space-3) var(--faab-space-3) var(--faab-space-4);
  flex: 1;
}

.faab-card__brand {
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  color: var(--faab-text-muted);
}

.faab-card__title {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-lg);
  line-height: 1.25;
  margin: 0;
}
.faab-card__title a { color: var(--faab-text); text-decoration: none; }
.faab-card__title a:hover { color: var(--faab-accent); }

.faab-card__foot {
  margin-top: auto;
  padding-top: var(--faab-space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--faab-space-2);
}

/* ---------- Price ---------- */

.faab-price {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  color: var(--faab-espresso);
  line-height: 1.1;
}
.faab-price del { color: var(--faab-text-muted); font-size: 0.7em; margin-right: 0.35em; }
.faab-price ins { text-decoration: none; }

.faab-price__suffix {
  display: block;
  font-family: var(--faab-font-body);
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
  letter-spacing: 0;
  margin-top: 2px;
}

/*
 * B2B tier badge. Shown only to logged-in customers whose tier resolves to a
 * discount, so a guest never sees a price they cannot get.
 */
.faab-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.7em;
  border-radius: var(--faab-radius-pill);
  background: color-mix(in srgb, var(--faab-gold) 22%, transparent);
  color: var(--faab-brown);
  font-size: var(--faab-fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.faab-badge {
  position: absolute;
  top: var(--faab-space-2);
  left: var(--faab-space-2);
  padding: 0.3em 0.75em;
  border-radius: var(--faab-radius-pill);
  background: var(--faab-espresso);
  color: var(--faab-ivory);
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
}

/* ---------- PDP ---------- */

.faab-pdp {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: var(--faab-space-6);
}
@media (max-width: 900px) {
  .faab-pdp { grid-template-columns: 1fr; }
}

.faab-pdp__media {
  border-radius: var(--faab-radius-lg);
  overflow: hidden;
  background: var(--faab-surface-muted);
  aspect-ratio: 4 / 5;
  position: relative;
}

/*
 * Single-image state. Instead of a one-slide carousel with dead arrows, the
 * image sits on a warm ground with generous padding so it reads as deliberate.
 */
.faab-pdp__media--single { padding: clamp(1.5rem, 5vw, 3.5rem); }
.faab-pdp__media--single img { width: 100%; height: 100%; object-fit: contain; }

.faab-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--faab-space-2);
  margin-top: var(--faab-space-2);
}
.faab-pdp__thumb {
  aspect-ratio: 1;
  border-radius: var(--faab-radius-sm);
  overflow: hidden;
  background: var(--faab-surface-muted);
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}
.faab-pdp__thumb[aria-current="true"] { border-color: var(--faab-accent); }

.faab-pdp__title { margin-bottom: var(--faab-space-2); }

.faab-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-3);
  color: var(--faab-text-muted);
  font-size: var(--faab-fs-sm);
  margin-bottom: var(--faab-space-4);
}

.faab-pdp__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-2);
  align-items: center;
  padding: var(--faab-space-4);
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  margin-block: var(--faab-space-4);
}

.faab-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius-pill);
  overflow: hidden;
}
.faab-qty button {
  border: 0; background: transparent; cursor: pointer;
  width: 40px; height: 44px; font-size: var(--faab-fs-lg); color: var(--faab-text);
}
.faab-qty input {
  width: 46px; height: 44px; border: 0; background: transparent;
  text-align: center; font: inherit; color: var(--faab-text);
  -moz-appearance: textfield;
}
.faab-qty input::-webkit-outer-spin-button,
.faab-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/*
 * Content accordion. Rendered only when there is something to put in it.
 * See faab2_product_has_copy(): 118 of 198 live products have no copy, and an
 * empty tab strip looks broken rather than minimal.
 */
.faab-acc { border-top: 1px solid var(--faab-line-soft); }
.faab-acc__item { border-bottom: 1px solid var(--faab-line-soft); }
.faab-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faab-space-3);
  padding: var(--faab-space-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--faab-fs-base);
  color: var(--faab-text);
  text-align: left;
}
.faab-acc__btn::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--faab-accent);
  border-bottom: 1.5px solid var(--faab-accent);
  transform: rotate(45deg);
  transition: transform var(--faab-dur) var(--faab-ease);
  flex: none;
}
.faab-acc__btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faab-acc__panel { padding-bottom: var(--faab-space-4); color: var(--faab-brown); }

/*
 * The honest empty state. When a product has no copy we say what we do know
 * rather than printing a lorem-ipsum-shaped void.
 */
.faab-pdp__spec {
  border-top: 1px solid var(--faab-line-soft);
  padding-top: var(--faab-space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--faab-space-2) var(--faab-space-4);
  font-size: var(--faab-fs-sm);
}
.faab-pdp__spec dt { color: var(--faab-text-muted); }
.faab-pdp__spec dd { margin: 0; }

/* ---------- Footer ---------- */

.faab-footer {
  background: var(--faab-bg-deep);
  color: var(--faab-blush);
  padding-block: var(--faab-space-7) var(--faab-space-5);
  margin-top: var(--faab-space-8);
}
.faab-footer a { color: var(--faab-blush); text-decoration: none; }
.faab-footer a:hover { color: var(--faab-white); }
.faab-footer h2, .faab-footer h3 { color: var(--faab-ivory); }
.faab-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--faab-space-5);
}
.faab-footer__bottom {
  margin-top: var(--faab-space-6);
  padding-top: var(--faab-space-4);
  border-top: 1px solid color-mix(in srgb, var(--faab-blush) 20%, transparent);
  font-size: var(--faab-fs-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-3);
  justify-content: space-between;
}