/* ============================================================
   site.css — page furniture
   ------------------------------------------------------------
   WHAT THIS DOES
   The parts that make a page a page: header, nav, hero, product
   grid, footer, and the two-column product detail layout.
   These are use-once-per-page pieces, not reusable atoms.

   WHAT BREAKS HERE
   - .split collapses to one column below 900px. That's correct —
     don't "fix" it.
   - .product-grid uses auto-fill so it reflows from 1 to 3
     columns on its own. Don't add column media queries.
   - The sticky-free header is deliberate. A sticky header eats
     screen height on a small phone.

   TRY CHANGING
   The 220px in .product-grid to 260px and watch the cards
   become two-up on a tablet.
   ============================================================ */

/* --- Header --- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-4);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.nav a {
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* --- Split layout (hero, story strips) --- */
.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); }
}
/* Section headings inside a split (story pages, delivery columns) */
.split h2 { font-size: var(--text-2xl); }
.split h3 { font-size: var(--text-xl); }

.hero { padding-block: var(--space-12) var(--space-16); }
.hero__title { font-size: var(--text-4xl); max-width: 16ch; }
.hero__text {
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: var(--text-lg);
  color: var(--ink-muted);
}
.hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- Imagery blocks (real photos replace these) --- */
.frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--photo-1), var(--photo-2));
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--photo-ink);
}
/* Drop real photos in here later — they'll fill the frame, not distort. */
.frame img,
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Product grid --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
}
.product-grid .card { max-width: none; }

/* --- Call to action band --- */
.cta-band {
  background: var(--leaf);
  color: #fff;
  padding-block: var(--space-12);
}
.cta-band h2 { font-size: var(--text-2xl); color: #fff; }
.cta-band p {
  margin-top: var(--space-2);
  max-width: 55ch;
  color: rgba(255, 255, 255, 0.78);
}
.cta-band__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cta-band .btn--ghost:hover { border-color: #fff; }

/* --- Product detail --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.product { display: grid; gap: var(--space-8); padding-bottom: var(--space-16); }
@media (min-width: 900px) {
  .product { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.gallery__thumb {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--photo-1), var(--photo-2));
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--photo-ink);
}
.gallery__thumb[aria-current="true"] { border-color: var(--ink); }

.product__title { font-size: var(--text-3xl); }
.product__meta { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); }
.product__price { margin-top: var(--space-6); }
.product__price .price__xcd { font-size: var(--text-xl); }
.product__desc { margin-top: var(--space-6); color: var(--ink-muted); }
.product__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.heat { display: inline-flex; align-items: center; gap: var(--space-2); }
.heat__dots { display: inline-flex; gap: var(--space-1); }
.heat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.heat__dot--on { background: var(--heat); }
.heat__label { font-size: var(--text-sm); color: var(--ink-muted); }

.spec-list { margin: 0; display: grid; gap: var(--space-4); }
.spec-list > div { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.spec-list dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-list dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.use-list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* --- Small phones: stack the action buttons full width --- */
@media (max-width: 479px) {
  .hero__actions .btn,
  .product__actions .btn,
  .cta-band__actions .btn { flex: 1 1 100%; }
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-12);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-grid h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-note {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}