/* ============================================================
   VALENA — content pages, blog, FAQ, contacts, B2B landing
   ============================================================ */

.v-post-hero {
  margin: 0;
  border-radius: var(--v-radius);
  overflow: hidden;
}
.v-post-hero img { width: 100%; height: auto; object-fit: cover; }

/* ------------------------------------------------------- post cards --- */
.v-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: var(--v-shadow-card);
}
.v-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.v-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.v-post-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.v-post-card__date { font-size: var(--v-caption); color: var(--v-black-50); }
.v-post-card__title {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 500;
  font-size: var(--v-h4);
  line-height: 1.3;
}
.v-post-card .v-btn-text { margin-top: auto; }

/* ------------------------------------------------------------- FAQ ---- */
.v-faq {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
}

/* -------------------------------------------------------- contacts ---- */
.v-contact-grid {
  display: grid;
  /* 150px is what puts two cards side by side on a 375px phone, as drawn.
     auto-fit still collapses to five across on the desktop row. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--v-grid-gap);
}

/* The band runs up under the breadcrumb, so the two read as one header. */
.v-contact-head { padding-block: clamp(24px, 3vw, 48px); }
.v-contact-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  /* A hairline, not a drop shadow: these sit on the blush band, where a shadow
     would read as five floating tiles instead of one row of facts. */
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
}
/* Icon rides with the label rather than sitting in a tile above it. */
.v-contact-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--v-body) / 1.5 var(--v-font-text);
}
.v-contact-card__value {
  font-size: var(--v-body);
  line-height: 1.5;
}
.v-contact-card__link { text-decoration: underline; text-underline-offset: 4px; }
.v-contact-card__ig {
  align-self: stretch;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 400;
}

.v-contact-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v-stack-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  /* The form carries four fields and a textarea; the map column only needs
     enough width to stay legible, so the split leans to the form. */
  .v-contact-columns { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
}

.v-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
}
/* Full width on a phone — a 217px button floated right is a small target. */
.v-form__actions .v-btn { width: 100%; }

@media (min-width: 640px) {
  .v-form__actions .v-btn { width: auto; }
}

/* Off-screen without display:none, so a bot's autofill still trips it. */
.v-honeypot {
  position: absolute;
  left: -9999px;
}

/* Map and the pickup note share one panel, as in the design. */
.v-contact-pickup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
}
.v-contact-pickup__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-contact-pickup__body p { margin: 0; }

.v-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
}

@media (min-width: 768px) {
  .v-form { padding: 32px; }
}

/* Map is only fetched after the visitor asks for it — no third-party
   requests, and no cookie banner problem, on first load. */
.v-map {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--v-radius);
  overflow: hidden;
  background: var(--v-blush);
}
.v-map iframe { width: 100%; height: 100%; border: 0; }
.v-map__btn { min-height: 44px; padding: 0 16px; }
.v-map--placeholder { background: var(--v-blush); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-map__pin { display: flex; color: var(--v-pink); }
.v-map__consent p { margin: 0; font-size: var(--v-body); color: var(--v-text); }
.v-map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  font-size: var(--v-small);
  color: var(--v-black-70);
}

/* ============================================================
   B2B — "For salons and nail technicians"
   The page is a landing page, not a content page: every block below is
   sized to be read standing up, between two clients.
   ============================================================ */

/*
 * The only pink field on the page, and it stops where the content starts —
 * the gradient hands over to the page colour so the first white card below it
 * has an edge to sit on.
 */
.v-b2b-hero {
  background: linear-gradient(180deg, var(--v-blush) 0%, var(--v-page) 100%);
  padding-block: clamp(28px, 4vw, 56px) var(--v-section-y);
}
.v-b2b-hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 1024px) {
  /* The figures panel needs about a third; the headline needs the rest to
     break across two lines rather than four. */
  .v-b2b-hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    align-items: center;
  }
}

.v-b2b-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 660px;
}
.v-b2b-hero__content h1 { margin: 0; }
.v-b2b-hero__lead {
  margin: 0;
  font-size: var(--v-lead);
  line-height: 1.5;
  color: var(--v-text-70);
}

.v-b2b-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
/* One thumb-width target per row on a phone; side by side as soon as they fit. */
.v-b2b-hero__actions .v-btn { flex: 1 1 100%; }

@media (min-width: 560px) {
  .v-b2b-hero__actions .v-btn { flex: 0 0 auto; }
}

/*
 * Flex, not a grid: there are three pills and the text column is only wide
 * enough for two grid tracks of any usable minimum, which would strand the
 * third on its own row. Flexed, the three share the row and only wrap when the
 * column genuinely cannot hold them.
 */
.v-b2b-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.v-b2b-hero__trust .v-trust-card { flex: 1 1 190px; }

/*
 * Four figures instead of a hero photograph. A salon has already seen the
 * bottles in the catalogue; what it has not seen is the terms, and those are
 * the only thing that decides whether it switches supplier.
 *
 * The 1px grid gap is the hairline between the cells — one background behind
 * four white tiles, so the rules never double up at the corners.
 */
.v-figures {
  display: grid;
  /* Always 2x2 or 1x4 — never a row of three with one figure stranded. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--v-radius-lg);
  background: var(--v-blush-mid);
  box-shadow: var(--v-shadow-card);
  overflow: hidden;
}
@media (min-width: 900px) {
  .v-figures--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.v-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2.2vw, 26px);
  background: var(--v-surface);
}
/*
 * Set in the near-black, not the brand pink: at 2.5:1 on white the pink fails
 * even the 3:1 large-text floor, and a number nobody can read is not a number.
 * The pink shows up under it instead, where it is decoration and not text.
 */
.v-figure__value {
  font: 600 clamp(26px, 3.2vw, 38px) / 1.1 var(--v-font-display);
  color: var(--v-text);
}
.v-figure__label {
  font-size: var(--v-small);
  line-height: 1.4;
  color: var(--v-black-60);
}
.v-figure__value::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 10px;
  border-radius: var(--v-radius-pill);
  background: var(--v-pink);
}

/* ---------------------------------------------------------- benefits -- */
.v-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--v-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  /* Six cards: fixed at three across so the last row is full. auto-fit lands
     on four at 1280 and leaves two orphans under a row of four. Four cards
     (the About page) are left to auto-fit, which puts them in one row. */
  .v-feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.v-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-line);
}
.v-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--v-radius);
  background: var(--v-blush);
  color: var(--v-ink);
}
.v-feature h3 {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 500;
  font-size: var(--v-h4);
  line-height: 1.3;
}
.v-feature p {
  margin: 0;
  color: var(--v-text-70);
}

/* ------------------------------------------------------------- steps -- */
.v-b2b-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--v-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: v-step;
}
/* White on the blush band — the reverse of the old card, which was blush on
   white and disappeared once the section behind it gained a tint. */
.v-b2b-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
}
.v-b2b-step::before {
  counter-increment: v-step;
  content: counter(v-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v-ink);
  color: var(--v-on-ink);
  font-weight: 600;
  font-size: var(--v-small);
}
.v-b2b-step h3 {
  margin: 0;
  font-family: var(--v-font-text);
  font-weight: 600;
  font-size: var(--v-body);
}
.v-b2b-step p {
  margin: 0;
  color: var(--v-text-70);
}

/* ------------------------------------------------------------ brands -- */
.v-b2b-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--v-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-b2b-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 148px;
  padding: 24px;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
  text-align: center;
  transition: box-shadow var(--v-ease);
}
.v-b2b-brand:hover { box-shadow: inset 0 0 0 1px var(--v-pink), var(--v-shadow-card); }
/* Logos arrive in whatever aspect the brand supplies; contain them rather than
   letting the square crop decide where the wordmark gets cut. */
.v-b2b-brand__logo {
  width: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}
.v-b2b-brand__name {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: var(--v-h4);
  line-height: 1.2;
  color: var(--v-text);
}
.v-b2b-brand__count {
  font-size: var(--v-small);
  color: var(--v-black-60);
}

/* ------------------------------------------------- wholesale request -- */
.v-b2b-apply {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v-stack-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .v-b2b-apply {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
  }
}

/*
 * This form is the point of the page, so it carries the only drop shadow on
 * it and a pink edge along the top. That reads as emphasis at any scroll
 * position, which a coloured band behind the section does not — by the time
 * a reader reaches it the band is the whole screen and stops being a signal.
 */
.v-b2b-form {
  gap: 24px;
  border-top: 3px solid var(--v-pink);
  box-shadow: var(--v-shadow-card);
}
.v-b2b-form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v-b2b-form__head h2 { margin: 0; }
.v-b2b-form__head p {
  margin: 0;
  color: var(--v-text-70);
}

.v-b2b-aside {
  display: flex;
  flex-direction: column;
  gap: var(--v-grid-gap);
}
.v-info-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
}
.v-info-panel p { margin: 0; color: var(--v-text-70); }
.v-info-panel .v-facts { margin: 0; }
/* Tighter split than the product table: these labels are two words and the
   values are whole sentences. */
.v-info-panel .v-facts th { width: 42%; }
.v-info-panel--accent {
  align-items: flex-start;
  background: var(--v-blush);
  box-shadow: none;
}
.v-info-panel--accent .v-btn { align-self: stretch; }

/* ---------------------------------------------------------- closing --- */
.v-cta-band__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 900px) {
  .v-cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 4vw, 56px);
  }
}

.v-cta-band__text h2 { margin: 0 0 12px; }
.v-cta-band__text p {
  margin: 0;
  max-width: 62ch;
  color: var(--v-on-ink-80);
}
.v-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.v-cta-band__actions .v-btn { flex: 1 1 auto; }


/* ============================================================
   About — the story page
   ============================================================ */

/*
 * Solid, not a gradient like the other two heroes. Theirs fade down into the
 * page colour because a white section follows them; this one is followed by
 * the figures strip, which is blush — so a gradient would fade the tint out
 * and the next section would switch it straight back on, drawing a line across
 * the page. Left flat, the crumbs, the hero and the figures read as one tinted
 * masthead and the tint ends once, where the story begins.
 */
.v-about-hero {
  background: var(--v-blush);
  padding-block: clamp(28px, 4vw, 56px) var(--v-section-y);
}
.v-about-hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

@media (min-width: 1024px) {
  /* Photo-forward, the opposite weighting to the B2B hero: this page is being
     read to decide whether to trust a person, not to compare delivery terms. */
  .v-about-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* No photo uploaded yet — the text keeps its reading measure instead of
     stretching to 1440px and breaking the headline across four lines. */
  .v-about-hero__inner--plain { grid-template-columns: minmax(0, 800px); }
}

.v-about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 660px;
}
.v-about-hero__content h1 { margin: 0; }
.v-about-hero__lead {
  margin: 0;
  font-size: var(--v-lead);
  line-height: 1.55;
  color: var(--v-text-70);
}
.v-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.v-about-hero__actions .v-btn { flex: 1 1 100%; }

@media (min-width: 560px) {
  .v-about-hero__actions .v-btn { flex: 0 0 auto; }
}

.v-about-hero__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 560px;
}
.v-about-hero__media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(180px, 28vw, 360px);
  padding: clamp(20px, 4vw, 48px);
}
.v-about-hero__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}
.v-about-hero__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--v-radius-lg);
  box-shadow: var(--v-shadow-card);
}
/* The same pink halo the home hero puts behind its cut-out, offset so it reads
   as light falling past the photo rather than as a border around it. */
.v-about-hero__glow {
  position: absolute;
  z-index: 0;
  right: -6%;
  bottom: -8%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--v-blush-mid);
  filter: blur(28px);
  opacity: 0.75;
}

/* Real stock photography — one tall shelf view and two brand details. */
.v-about-gallery-section {
  padding-top: clamp(28px, 4vw, 56px);
}
.v-about-gallery {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}
.v-about-gallery__item {
  min-height: 220px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--v-radius-lg);
  background: var(--v-blush);
  box-shadow: var(--v-shadow-card);
}
.v-about-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 760px) {
  .v-about-gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: repeat(2, clamp(190px, 20vw, 280px));
  }
  .v-about-gallery__item:first-child { grid-row: 1 / span 2; }
}

/* -------------------------------------------------------------- story -- */
.v-about-story {
  display: flex;
  flex-direction: column;
}
.v-about-chapter {
  display: grid;
  gap: 12px 40px;
  padding-block: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--v-line);
}
.v-about-chapter:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  /* Title column fixed rather than fluid: the numbers have to line up down the
     left edge for the three chapters to read as one sequence. */
  .v-about-chapter { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

.v-about-chapter__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v-about-chapter__num {
  font: 600 var(--v-small) / 1 var(--v-font-mono);
  letter-spacing: 0.08em;
  color: var(--v-pink);
}
.v-about-chapter h3 {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 500;
  font-size: var(--v-h4);
  line-height: 1.3;
}
.v-about-chapter p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--v-lead);
  line-height: 1.6;
  color: var(--v-text-70);
}

/* -------------------------------------------------------------- quote -- */
.v-about-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.v-about-quote__mark {
  width: 40px;
  height: auto;
  color: var(--v-pink);
  opacity: 0.5;
}
.v-about-quote blockquote { margin: 0; }
.v-about-quote blockquote p {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--v-text);
}
.v-about-quote figcaption {
  font-size: var(--v-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v-black-60);
}

/* ------------------------------------------------------- who we are ---- */
.v-about-who {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v-grid-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .v-about-who { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.v-about-person {
  gap: clamp(20px, 2.5vw, 28px);
}

@media (min-width: 560px) {
  /* Portrait beside the text once there is room; above it on a phone, where a
     square photo in a column would leave the copy 140px wide. */
  .v-about-person { flex-direction: row; align-items: flex-start; }
}

.v-about-person__photo {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
}
.v-about-person__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-about-person__name {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
  font-weight: 600;
  color: var(--v-text);
}
.v-about-person__name span {
  font-weight: 400;
  font-size: var(--v-small);
  color: var(--v-black-60);
}
.v-about-person__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 4px;
}


/* ============================================================
   Brands hub
   ============================================================ */

.v-brands-hero {
  background: linear-gradient(180deg, var(--v-blush) 0%, var(--v-page) 100%);
  padding-block: clamp(28px, 4vw, 56px) var(--v-section-y);
}
.v-brands-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 820px;
}
.v-brands-hero__inner h1 { margin: 0; }
.v-brands-hero__lead {
  margin: 0;
  font-size: var(--v-lead);
  line-height: 1.55;
  color: var(--v-text-70);
}

/* Anchor chips. Interactive, unlike the chips in the compare table, so they
   get the hover the plain component does not carry. */
.v-brands-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.v-brands-jump .v-chip {
  transition: color var(--v-ease), box-shadow var(--v-ease);
}
.v-brands-jump .v-chip:hover {
  color: var(--v-pink);
  box-shadow: inset 0 0 0 1px var(--v-pink);
}

/* ---------------------------------------------------------- compare ---- */
/*
 * Four columns do not fit a 375px screen and never will, so the table scrolls
 * inside its own box. The alternative — collapsing rows into stacked cards —
 * throws away the column alignment, which is the entire reason someone reads
 * a comparison in the first place.
 */
.v-compare {
  overflow-x: auto;
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
  scrollbar-width: thin;
}
.v-compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--v-body);
}
.v-compare__table th,
.v-compare__table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--v-line);
}
.v-compare__table thead th {
  font-weight: 600;
  font-size: var(--v-small);
  letter-spacing: 0.02em;
  color: var(--v-black-60);
  white-space: nowrap;
  background: var(--v-blush);
  border-bottom-color: var(--v-blush-mid);
}
.v-compare__table tbody tr:last-child th,
.v-compare__table tbody tr:last-child td { border-bottom: 0; }
.v-compare__table tbody th {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: var(--v-h4);
  white-space: nowrap;
}
.v-compare__table tbody th a { text-decoration: none; }
.v-compare__table tbody th a:hover { color: var(--v-pink); }
.v-compare__count {
  display: block;
  margin-top: 4px;
  font-family: var(--v-font-text);
  font-weight: 400;
  font-size: var(--v-small);
  color: var(--v-black-60);
}
.v-compare__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v-compare__cats .v-chip:hover { color: var(--v-pink); }
.v-compare__price {
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------ brand blocks --- */
.v-brand-block {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}

@media (min-width: 900px) {
  .v-brand-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* Every second brand mirrors, so a page of three does not read as a list of
     identical rows. Only the placement flips — the reading order does not. */
  .v-brand-block--flip .v-brand-block__media { order: 2; }
}

.v-brand-block__media {
  border-radius: var(--v-radius-lg);
  overflow: hidden;
  box-shadow: var(--v-shadow-card);
}
.v-brand-block__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.v-brand-block__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.v-brand-block__body h2 { margin: 0; }

.v-brand-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  font-size: var(--v-small);
  color: var(--v-black-65);
}
.v-brand-block__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v-brand-block__meta .v-icon { color: var(--v-pink); }

.v-brand-block__intro {
  margin: 0;
  max-width: 60ch;
  font-size: var(--v-lead);
  line-height: 1.6;
  color: var(--v-text-70);
}

.v-brand-block__why {
  display: grid;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .v-brand-block__why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.v-brand-block__why li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--v-small);
  line-height: 1.45;
}
.v-brand-block__why .v-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--v-pink);
}

.v-brand-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  margin-top: 4px;
}


/* ============================================================
   404
   ============================================================ */
.v-404 {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 7vw, 96px);
}

.v-404__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Phone reads left-aligned; the centred composition needs width to hold. */
  align-items: flex-start;
  gap: 24px;
}

.v-404__art {
  width: min(100%, 620px);
  height: auto;
  color: var(--v-pink);
}

.v-404__title { margin: 0; }
.v-404__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--v-lead);
  line-height: 1.5;
  color: var(--v-text-70);
}

.v-404__search { width: 100%; max-width: 660px; }

/* Softer than the header's: this field is an invitation, not a utility. */
.v-404__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 660px;
}
.v-404__actions .v-btn { width: 100%; }

/* Hairlines bleeding off two corners; decorative, so they sit out of the flow. */
.v-404__arc {
  display: none;
  position: absolute;
  width: clamp(240px, 32vw, 460px);
  height: auto;
  color: var(--v-pink-50);
  pointer-events: none;
}
.v-404__arc--start { top: -12%; left: -6%; }
.v-404__arc--end { right: -6%; bottom: -12%; }

@media (min-width: 768px) {
  .v-404__inner {
    align-items: center;
    text-align: center;
  }
  .v-404__actions {
    /* Catalogue leads the markup and the phone; on a wide row the design puts
       it on the right, where the eye finishes. */
    flex-direction: row-reverse;
    justify-content: center;
    width: auto;
  }
  .v-404__actions .v-btn { width: auto; }
  .v-404__arc { display: block; }
}