/* ============================================================
   ONDREA — pages.css
   Page-specific layouts. Built on tokens from base.css.
   ============================================================ */

/* ============================================================
   HOME — Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6) var(--gutter);
  gap: var(--sp-3);
}
.hero__tagline {
  font-family: var(--serif);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.hero__sub {
  color: var(--charcoal-70);
  max-width: 40ch;
  font-size: var(--fs-body);
}
.hero__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
  min-height: 60vh;
}
.hero__media .ph-media__mark { max-width: 200px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { order: -1; aspect-ratio: 4/5; min-height: unset; }
  .hero__copy { padding-block: var(--sp-5); }
}

/* ---- Marquee tagline strip ---- */
.tag-strip {
  border-block: 1px solid var(--stone-line);
  padding-block: var(--sp-3);
  overflow: hidden;
}
.tag-strip__inner {
  display: flex; gap: var(--sp-5); align-items: center;
  white-space: nowrap;
  animation: drift 34s linear infinite;
}
.tag-strip__inner span {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--charcoal-70);
  display: inline-flex; align-items: center; gap: var(--sp-5);
}
.tag-strip__inner span::after { content: "—"; color: var(--charcoal-40); }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tag-strip__inner { animation: none; justify-content: center; }
}

/* ---- Section heading block ---- */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.sec-head__title { font-size: var(--fs-display); font-weight: 300; max-width: 18ch; }
.sec-head p { color: var(--charcoal-70); max-width: 38ch; }

/* ---- Editorial split blocks ---- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream-2);
}
.editorial__media--tall { aspect-ratio: 3/4; }
.editorial__copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.editorial__copy h2 { font-size: var(--fs-display); }
.editorial__copy p { color: var(--charcoal-70); }
@media (max-width: 820px) {
  .editorial { grid-template-columns: 1fr; gap: var(--sp-4); }
  .editorial--reverse .editorial__media { order: -1; }
}

/* ---- Philosophy quote block ---- */
/* A statement band is cloth, not a card. The ground carries the same fine knit
   wale as the product plus a soft centre lift, so it reads as lit fabric rather
   than a flat swatch of paint. Ground treatment is shared with .statement. */
.philosophy {
  background: var(--forest);
  color: var(--cream);
}
.philosophy .wrap-narrow { padding-block: var(--sp-7); text-align: center; }
.philosophy__label { color: var(--cream-70); margin-bottom: var(--sp-3); }

/* Fallback for statement copy that is not two short clauses. `balance` keeps
   the break off a stray word, which is what wrecked this block before. */
.philosophy__quote {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin-inline: auto;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---- Triple image band ---- */
.image-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.image-band__cell {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream-2);
}
@media (max-width: 720px) {
  .image-band { grid-template-columns: 1fr 1fr; }
  .image-band__cell:last-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
}

/* ---- Newsletter feature strip ---- */
.news-feature { background: var(--cream-2); }
.news-feature .wrap-narrow { padding-block: var(--sp-7); text-align: center; }
.news-feature h2 { font-size: var(--fs-display); margin-bottom: var(--sp-2); }
.news-feature p { color: var(--charcoal-70); margin-inline: auto; margin-bottom: var(--sp-4); }
.news-feature .news-form { max-width: 460px; margin-inline: auto; border-color: var(--charcoal); }
.news-feature .news-form input { color: var(--charcoal); }
.news-feature .news-form input::placeholder { color: var(--charcoal-40); }
.news-feature .news-form button { color: var(--charcoal); }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero { padding-block: var(--sp-7) var(--sp-5); }
.page-hero__eyebrow { margin-bottom: var(--sp-2); }
.page-hero h1 { font-size: var(--fs-hero); font-weight: 300; max-width: 16ch; }
.page-hero p { color: var(--charcoal-70); margin-top: var(--sp-3); max-width: 46ch; }

/* ============================================================
   SHOP
   ============================================================ */
.shop-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--stone-line);
  flex-wrap: wrap;
}
/* The chips are links, so the active one carries aria-current, not aria-pressed
   (which belongs to toggle buttons). Both selectors are kept so the styling
   holds whichever the markup uses. */
.filter-chips,
.filter-group { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.filter-chip {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-55);
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.filter-chip[aria-current="true"],
.filter-chip[aria-pressed="true"],
.filter-chip:hover,
.filter-chip:focus-visible { color: var(--charcoal); }
.filter-chip[aria-current="true"]::after,
.filter-chip[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--charcoal);
}
.select-plain {
  background: transparent; border: 0; border-bottom: 1px solid var(--stone-line);
  padding: 0.4rem 1.5rem 0.4rem 0;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-70); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231F1F1D' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}

.empty-state {
  text-align: center;
  padding-block: var(--sp-8);
  border: 1px dashed var(--stone-line);
  margin-top: var(--sp-5);
}
.empty-state__mark { width: 64px; margin: 0 auto var(--sp-3); opacity: 0.4; }
.empty-state h3 { font-size: var(--fs-h2); font-weight: 300; margin-bottom: var(--sp-2); }
.empty-state p { color: var(--charcoal-55); margin-inline: auto; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: 2px; }
.gallery__main {
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-2);
  cursor: zoom-in;
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 2px; }
.gallery__thumb {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-2);
  opacity: 0.6; transition: opacity var(--dur-fast) var(--ease);
}
.gallery__thumb[aria-current="true"], .gallery__thumb:hover { opacity: 1; }

/* Zoom lens */
.zoom-layer {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(31,31,29,0.92);
  display: none; place-items: center; cursor: zoom-out;
  padding: var(--gutter);
}
.zoom-layer.is-open { display: grid; }
.zoom-layer img { max-width: 92vw; max-height: 92vh; object-fit: contain; }

/* Info column */
.pdp-info { position: sticky; top: calc(var(--header-h) + var(--sp-3)); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 900px) { .pdp-info { position: static; } }
.pdp-info__name { font-size: var(--fs-display); font-weight: 300; }
.pdp-info__price { font-size: var(--fs-h3); color: var(--charcoal-70); font-family: var(--serif); }
.pdp-info__desc { color: var(--charcoal-70); }

.option-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.option-row__head { display: flex; justify-content: space-between; align-items: baseline; }
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-chip {
  min-width: 52px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--stone-line);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.size-chip[aria-pressed="true"] { border-color: var(--charcoal); background: var(--charcoal); color: var(--cream); }
.size-chip:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.color-options { display: flex; gap: 10px; }
.color-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--stone-line);
  position: relative;
}
.color-dot[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid var(--charcoal); border-radius: 50%;
}

.pdp-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.pdp-actions .btn { flex: 1; }
/* Woo wraps the real controls in its own block-level div, so the quantity, the
   Add to Bag button and the wishlist heart stacked instead of sitting on one
   row. Flex the wrapper too, and let the button take the slack. */
.pdp-actions .woocommerce-variation-add-to-cart {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
  width: 100%;
}
.pdp-actions .quantity { flex: 0 0 auto; }
.pdp-actions .quantity .qty {
  width: 4rem; height: 100%;
  padding: 0 0.5rem;
  text-align: center;
  background: transparent;
  border: 1px solid var(--stone-line);
  color: var(--charcoal);
  font-size: var(--fs-small);
}

/* Accordion detail sections */
.accordion { border-top: 1px solid var(--stone-line); margin-top: var(--sp-3); }
.accordion__item { border-bottom: 1px solid var(--stone-line); }
.accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0; text-align: left;
  font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase;
}
.accordion__trigger .plus { position: relative; width: 14px; height: 14px; }
.accordion__trigger .plus::before, .accordion__trigger .plus::after {
  content: ""; position: absolute; background: var(--charcoal); transition: transform var(--dur) var(--ease);
}
.accordion__trigger .plus::before { top: 6px; left: 0; width: 14px; height: 1px; }
.accordion__trigger .plus::after { left: 6px; top: 0; width: 1px; height: 14px; }
.accordion__trigger[aria-expanded="true"] .plus::after { transform: scaleY(0); }
.accordion__panel {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.accordion__panel-inner { padding-bottom: var(--sp-3); color: var(--charcoal-70); }
.accordion__panel-inner ul { display: flex; flex-direction: column; gap: 0.6rem; }
.accordion__panel-inner li { display: flex; gap: 0.6rem; }
.accordion__panel-inner li::before { content: "—"; color: var(--charcoal-40); }

/* Sticky mobile add-to-cart */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--cream); border-top: 1px solid var(--stone-line);
  padding: 0.75rem var(--gutter);
  display: none; align-items: center; gap: var(--sp-2);
  transform: translateY(100%); transition: transform var(--dur) var(--ease);
}
.sticky-buy.is-in { transform: none; }
.sticky-buy__name { font-family: var(--serif); font-size: var(--fs-body); flex: 1; }
.sticky-buy .btn { flex-shrink: 0; }
@media (max-width: 900px) { .sticky-buy { display: flex; } }

/* The Standard We Hold — reusable block */
.standard-block { background: var(--cream-2); }
.standard-block .wrap { padding-block: var(--sp-7); }
.standard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.standard-item h3 { font-size: var(--fs-h3); font-weight: 300; margin-bottom: var(--sp-1); }
.standard-item p { color: var(--charcoal-70); font-size: var(--fs-small); }
.standard-item__num {
  font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--charcoal-40); display: block; margin-bottom: var(--sp-2);
}
@media (max-width: 820px) { .standard-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); } }
@media (max-width: 480px) { .standard-grid { grid-template-columns: 1fr; } }
/* Closing line of "The Standard We Hold" — italic in the source copy. */
.standard-note {
  margin-top: var(--sp-5);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--charcoal-70);
  max-width: 46ch;
}

/* Monogram sign-off closing the About page. */
.about-seal { padding-block: var(--sp-6) var(--sp-8); }

/* ============================================================
   ABOUT
   ============================================================ */
/* ---- About masthead ----
   A print-feature opening: the statement holds the left, an index of the page
   holds the right, and the two columns meet on the headline's baseline. Replaces
   a centred tagline that floated in the gap beside a left-aligned headline. */
.about-masthead {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--sp-6);
  align-items: end;
  padding-block: var(--sp-6) var(--sp-5);
  /* Closes the opening and stands in for the rule that separates the sections
     below it, so the masthead reads as a spread rather than a floating block. */
  border-bottom: 1px solid var(--stone-line);
}
/* The masthead's own bottom padding already spaces the opening; without this the
   first section's sp-8 stacks on top of it and leaves a dead half-screen. */
.about-masthead + .about-section { padding-top: var(--sp-6); }
.about-masthead__eyebrow { margin-bottom: var(--sp-3); }
.about-masthead h1 {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.005em;
  max-width: 14ch;
}
/* Italic marks this as a quiet restatement under the headline, matching the
   signoff treatment used further down the page. */
.about-masthead__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--charcoal-70);
  margin-top: var(--sp-3);
}

.about-index__label { color: var(--charcoal-55); margin-bottom: var(--sp-2); }
.about-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stone-line);
}
.about-index__list li { border-bottom: 1px solid var(--stone-line); }
/* The masthead's own rule closes the list — a second hairline just above it was
   two lines doing one job. */
.about-index__list li:last-child { border-bottom: 0; }
.about-index__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: 0.8rem;
  font-family: var(--serif);
  font-size: var(--fs-body);
  color: var(--charcoal-70);
  transition: color var(--dur-fast) var(--ease);
}
.about-index__list a:hover,
.about-index__list a:focus-visible { color: var(--charcoal); }
.about-index__arrow {
  color: var(--charcoal-40);
  font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.about-index__list a:hover .about-index__arrow,
.about-index__list a:focus-visible .about-index__arrow {
  color: var(--charcoal-70);
  transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
  .about-index__arrow { transition: color var(--dur-fast) var(--ease); }
  .about-index__list a:hover .about-index__arrow { transform: none; }
}

@media (max-width: 900px) {
  .about-masthead {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-5);
    padding-block: var(--sp-6) var(--sp-5);
  }
  .about-masthead h1 { max-width: 18ch; }
}

/* Clear the fixed header when the index jumps to a section. */
#founders-note, #our-story, #mission, #vision, #standard {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.about-section { padding-block: var(--sp-8); }
.about-section + .about-section { border-top: 1px solid var(--stone-line-soft); }
.about-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-6);
  align-items: start;
}
.about-block--reverse .about-block__media { order: 2; }
.about-block__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-2); }
.about-block__eyebrow { margin-bottom: var(--sp-3); }
.about-block__body h2 { font-size: var(--fs-display); margin-bottom: var(--sp-4); }
.about-block__body p { color: var(--charcoal-70); margin-bottom: var(--sp-3); max-width: 60ch; }
.about-block__signoff { font-family: var(--serif); font-style: italic; color: var(--charcoal); margin-top: var(--sp-3); }
@media (max-width: 820px) {
  .about-block { grid-template-columns: 1fr; gap: var(--sp-4); }
  .about-block--reverse .about-block__media { order: -1; }
}

/* Mission / Vision centered statements */
.statement { text-align: center; padding-block: var(--sp-7); }
.statement--forest { background: var(--forest); color: var(--cream); }
.statement--ink { background: var(--ink-navy); color: var(--cream); }
.statement__label { margin-bottom: var(--sp-3); }
.statement--forest .statement__label, .statement--ink .statement__label { color: var(--cream-70); }
/* Longer statements (the Vision) need a smaller face and a wider measure than
   the Mission — at full display size a 79-character sentence sets in four
   cramped lines and breaks across "More / legacy". */
.statement__text {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.2;
  max-width: 34ch; margin-inline: auto;
  text-wrap: balance;
}

/* ---- Statement bands: shared cloth ground ---- */
.philosophy, .statement { position: relative; isolation: isolate; overflow: hidden; }
.philosophy::before, .statement::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(118% 88% at 50% 36%, rgba(239, 230, 211, 0.075), transparent 68%),
    repeating-linear-gradient(90deg,
      rgba(239, 230, 211, 0.038) 0 1px,
      transparent 1px 7px);
}

/* ---- The Mission, set as the antithesis it is ----
   A refusal that recedes, then the commitment the eye lands on. The words are
   untouched (brief §4) — only their weight in the eye differs. */
.statement-pair { margin-inline: auto; }
.statement-pair__refuse,
.statement-pair__choose {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  margin-inline: auto;
  text-wrap: balance;
}
/* The step between the two is deliberately gentle — about three-quarters. Any
   more and the first clause stops reading as half of the sentence and starts
   looking like a caption sitting above a pull-quote. */
.statement-pair__refuse {
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: 0.012em;
  color: var(--cream-70);
  max-width: 26ch;
}
.statement-pair__choose {
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin-top: 0.2em;
  max-width: 26ch;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.contact-channels { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-channel { border-bottom: 1px solid var(--stone-line); padding-bottom: var(--sp-3); }
.contact-channel h3 { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal-55); margin-bottom: 0.6rem; font-weight: 400; }
.contact-channel a, .contact-channel p { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 300; color: var(--charcoal); }
.contact-channel a:hover { color: var(--forest); }

/* Forms */
.form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--sp-3); }
.form-field label { font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-55); }
.form-field input, .form-field textarea, .form-field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--stone-line);
  padding: 0.7rem 0; font-size: var(--fs-body); color: var(--charcoal);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-bottom-color: var(--charcoal); }
.form-field textarea { resize: vertical; min-height: 120px; }

/* ============================================================
   CART
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; gap: var(--sp-4); } }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--stone-line); align-items: center; }
.cart-line__media { aspect-ratio: 4/5; background: var(--cream-2); position: relative; overflow: hidden; }
.cart-line__name { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 300; }
.cart-line__meta { color: var(--charcoal-55); font-size: var(--fs-small); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--stone-line); }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; }
.qty span { min-width: 34px; text-align: center; font-size: var(--fs-small); }
.cart-summary { background: var(--cream-2); padding: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
.cart-summary h3 { font-size: var(--fs-h2); font-weight: 300; margin-bottom: var(--sp-3); }
.summary-row { display: flex; justify-content: space-between; padding-block: 0.6rem; font-size: var(--fs-small); color: var(--charcoal-70); }
.summary-row--total { border-top: 1px solid var(--stone-line); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: var(--fs-body); color: var(--charcoal); }
.trust-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); color: var(--charcoal-55); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; }

/* ============================================================
   404 / SEARCH / WISHLIST
   ============================================================ */
.center-page {
  min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center; text-align: center;
  padding-block: var(--sp-7);
}
.center-page__inner { max-width: 46ch; }
.center-page h1 { font-size: var(--fs-hero); font-weight: 300; }
.center-page p { color: var(--charcoal-70); margin-block: var(--sp-3); margin-inline: auto; }

.search-field { display: flex; border-bottom: 1px solid var(--charcoal); max-width: 640px; margin-inline: auto; }
.search-field input { flex: 1; background: transparent; border: 0; padding: 1rem 0; font-family: var(--serif); font-size: var(--fs-h2); font-weight: 300; }
.search-field input:focus { outline: none; }
.search-field button { padding: 0 0.5rem; }
.search-suggest { margin-top: var(--sp-5); }
.search-suggest .label { color: var(--charcoal-55); margin-bottom: var(--sp-2); display: block; }
.search-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.search-tag { border: 1px solid var(--stone-line); padding: 0.5rem 1.1rem; font-size: var(--fs-small); transition: border-color var(--dur-fast) var(--ease); }
.search-tag:hover { border-color: var(--charcoal); }

/* ---- Contact form + CAPTCHA slot ---- */
.contact-form { max-width: 520px; }
.captcha-slot {
  border: 1px dashed var(--stone-line);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  text-align: center;
}
.captcha-slot__label {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-40);
}