/*
 * Field Guide styles — namespaced fg-*, token-driven.
 * Tokens only here; components reference var(--fg-*) so a brand pass later
 * means editing this block, not the rules.
 */
.fg-wrap {
  --fg-accent: #b33329;        /* FPD brick red (theme) */
  --fg-link: #0068b3;          /* theme blue */
  --fg-text: #222;
  --fg-muted: #6b6b6b;
  --fg-surface: #fff;
  --fg-surface-alt: #f5f4f2;
  --fg-border: #ddd8d2;
  --fg-radius: 8px;
  --fg-shadow: 0 1px 3px rgba(0, 0, 0, .08);

  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  color: var(--fg-text);
  line-height: 1.5;
}

.fg-wrap h1 {
  color: var(--fg-accent);
  margin: .3em 0 .5em;
}
.fg-wrap h2 {
  font-size: 1.15rem;
  margin: 1.4em 0 .5em;
  border-bottom: 2px solid var(--fg-accent);
  padding-bottom: .2em;
}
.fg-wrap a { color: var(--fg-link); }

.fg-breadcrumbs {
  font-size: .85rem;
  color: var(--fg-muted);
  margin: 0 0 .5em;
}

.fg-description { color: var(--fg-muted); max-width: 70ch; }

/* ---------- home nav ---------- */
.fg-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.fg-nav-card {
  background: var(--fg-surface);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow);
  padding: 14px 16px;
}
.fg-nav-card h2 { margin: 0 0 .5em; border: none; padding: 0; }
.fg-nav-card ul { margin: 0; padding: 0 0 0 1.1em; }
.fg-nav-card li { margin: .15em 0; }

/* ---------- entry grids (section/discipline/related) ---------- */
.fg-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin: 1em 0;
}
.fg-entry-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--fg-surface);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow);
  padding: 10px;
  text-decoration: none;
  color: var(--fg-text);
  transition: box-shadow .12s ease;
}
.fg-entry-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.fg-entry-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--fg-surface-alt);
  border-radius: calc(var(--fg-radius) - 3px);
}
.fg-entry-name { font-weight: 600; color: var(--fg-link); }
.fg-entry-sizes { font-size: .78rem; color: var(--fg-muted); }

/* ---------- sub-discipline chips ---------- */
.fg-children {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: .8em 0 1.2em;
}
.fg-children a {
  display: inline-block;
  background: var(--fg-surface-alt);
  border: 1px solid var(--fg-border);
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  font-size: .9rem;
}
.fg-children a:hover { background: var(--fg-accent); color: #fff; border-color: var(--fg-accent); }

/* ---------- product page ---------- */
.fg-product-layout {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 700px) {
  .fg-product-layout { grid-template-columns: 1fr; }
}
.fg-product-media img {
  width: 100%;
  background: var(--fg-surface-alt);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  margin-bottom: 12px;
}
.fg-features { padding-left: 1.2em; }
.fg-features li { margin: .25em 0; }
.fg-sizes { font-weight: 600; }
.fg-size-overrides { padding-left: 1.2em; font-size: .9rem; color: var(--fg-muted); }
.fg-nails, .fg-disciplines, .fg-editorial { padding-left: 1.2em; }

.fg-skus {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
}
.fg-skus th, .fg-skus td {
  border: 1px solid var(--fg-border);
  padding: 6px 10px;
  text-align: left;
}
.fg-skus thead th { background: var(--fg-surface-alt); }

/* ---------- editorial video embeds ---------- */
.fg-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 1em 0;
}
.fg-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--fg-radius);
}
.fg-video-title { display: block; font-size: .85rem; margin-top: 4px; color: var(--fg-muted); }
.fg-more { font-weight: 600; }