/*
 * Prototype-only styles.
 *
 * Keep this file small and keep it honest. Anything here that the real site
 * will also need belongs in the THEME's components.css instead, or it gets
 * rebuilt later and this whole arrangement was pointless.
 *
 * What legitimately lives here:
 *   - the "this is a prototype" flag
 *   - layout scaffolding the theme gets from WordPress templates instead
 *     (breadcrumbs, the category sidebar, the brand index)
 */

/* The prototype flag. Loud on purpose: nobody should mistake this for the shop. */
.proto-flag {
  background: var(--faab-espresso);
  color: var(--faab-blush);
  font-size: var(--faab-fs-xs);
  line-height: 1.5;
  padding: var(--faab-space-2) var(--faab-gutter);
  text-align: center;
}
.proto-flag strong {
  color: var(--faab-gold);
  font-weight: 500;
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  margin-right: 0.5em;
}
.proto-flag a { color: var(--faab-blush); text-underline-offset: .25em; }
.proto-flag a:hover { color: var(--faab-white); }

/* Breadcrumbs. WooCommerce supplies these on the real site. */
.proto-crumbs {
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
  padding-block: var(--faab-space-3);
}
.proto-crumbs a { color: var(--faab-text-muted); text-decoration: none; }
.proto-crumbs a:hover { color: var(--faab-accent); }
.proto-crumbs span[aria-hidden] { margin-inline: 0.4em; }

/* Category page: sidebar + content. */
.proto-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) {
  .proto-layout { grid-template-columns: 1fr; }
  .proto-side { display: none; }
}

.proto-side { position: sticky; top: 110px; }

.faab-plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--faab-space-1); }
.faab-plain-list a {
  font-size: var(--faab-fs-sm);
  color: var(--faab-text);
  text-decoration: none;
}
.faab-plain-list a:hover { color: var(--faab-accent); }

/* Brand index on the homepage. */
.proto-brands {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--faab-space-2);
}
.proto-brands a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--faab-space-4);
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  text-decoration: none;
  transition: border-color var(--faab-dur) var(--faab-ease);
}
.proto-brands a:hover { border-color: var(--faab-accent); }
.proto-brands span {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-lg);
  color: var(--faab-text);
}
.proto-brands em {
  font-style: normal;
  font-size: var(--faab-fs-xs);
  color: var(--faab-text-muted);
}

/* The honest empty-state note on a product page with no copy. */
.proto-note {
  margin-top: var(--faab-space-4);
  padding: var(--faab-space-3) var(--faab-space-4);
  border-radius: var(--faab-radius);
  background: color-mix(in srgb, var(--faab-gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--faab-gold) 34%, transparent);
  font-size: var(--faab-fs-sm);
  color: var(--faab-brown);
}
.proto-note strong { color: var(--faab-espresso); font-weight: 500; }

/* Cards link to a single demo product, so make that obvious on hover. */
.faab-card__media img { transition: transform var(--faab-dur) var(--faab-ease); }
.faab-card:hover .faab-card__media img { transform: scale(1.02); }

/* ---------------------------------------------------------------------------
 * Typeface picker.
 *
 * The client approved the direction but not the display serif. Each option
 * shows identical real content so the only variable is the typeface, and each
 * carries a letter so she can reply with one character instead of having to
 * describe what she dislikes.
 * ------------------------------------------------------------------------- */

.sec-intro { max-width: 62ch; margin-bottom: var(--faab-space-6); }
.sec-intro h1 { margin-bottom: var(--faab-space-3); }
.sec-intro p + p { margin-top: var(--faab-space-3); }

.tf-grid { display: grid; gap: var(--faab-space-4); }

.tf {
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius-lg);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

.tf__head {
  display: flex;
  align-items: flex-start;
  gap: var(--faab-space-3);
  padding-bottom: var(--faab-space-4);
  margin-bottom: var(--faab-space-4);
  border-bottom: 1px solid var(--faab-line-soft);
}

.tf__letter {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--faab-espresso);
  color: var(--faab-ivory);
  font-family: var(--faab-font-body);
  font-size: var(--faab-fs-sm);
  font-weight: 500;
}

.tf__label {
  font-family: var(--faab-font-body);
  font-size: var(--faab-fs-base);
  font-weight: 500;
  margin: 0 0 2px;
}
.tf__now {
  font-size: var(--faab-fs-xs);
  font-weight: 400;
  color: var(--faab-text-muted);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  margin-left: .5em;
}
.tf__note { font-size: var(--faab-fs-sm); color: var(--faab-text-muted); margin: 0; }

/* Everything below uses the candidate face, set per card via --tf. */
.tf__logo {
  font-family: var(--tf);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  letter-spacing: -.02em;
  margin-bottom: var(--faab-space-4);
}
.tf__logo span { color: var(--faab-espresso); }
.tf__logo em { font-style: normal; color: var(--faab-clay); }

.tf__h {
  font-family: var(--tf);
  font-size: clamp(1.75rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--faab-espresso);
  margin: 0 0 var(--faab-space-4);
  text-wrap: balance;
}

.tf__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--faab-space-3);
  padding-top: var(--faab-space-4);
  border-top: 1px solid var(--faab-line-soft);
}
.tf__product { font-family: var(--tf); font-size: var(--faab-fs-xl); color: var(--faab-espresso); }
.tf__price {
  font-family: var(--tf);
  font-size: var(--faab-fs-xl);
  color: var(--faab-espresso);
  font-variant-numeric: tabular-nums;
}

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