/* ==========================================================================
   products.css — Homemade Meals page, Food Bowls page, product detail.
   Homemade = warm calabash + layered photos; Food Bowls = sage + an overhead
   bowl "stage" with a glass notice timer.
   ========================================================================== */
.sk-meals-hero {
  background: radial-gradient(700px 500px at 100% 0%, rgba(255, 255, 255, .5), transparent 60%), var(--sk-calabash);
}
.sk-meals-hero h1, .sk-bowls-hero h1 { color: var(--sk-forest); max-width: 15ch; }
.sk-meals-hero__blob { width: 420px; height: 420px; left: -120px; bottom: -160px; }

.sk-bowls-hero {
  background: radial-gradient(800px 600px at 100% 20%, #D3E6C8, transparent 60%), var(--sk-okra-soft);
}
.sk-bowls-hero .sk-arc { color: var(--sk-green); opacity: .25; right: -12%; top: -10%; width: 55%; }

/* Food Bowl stage: round overhead bowl + a smaller photo + glass timer */
.sk-bowl-stage { position: relative; padding: 2% 8% 8% 0; width: min(100%, calc(var(--sk-screen) - 4rem)); margin-left: auto; }
.sk-bowl-stage__main {
  aspect-ratio: 1; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .75);
  box-shadow: 0 40px 80px -30px rgba(3, 50, 26, .55);
}
.sk-bowl-stage__side {
  position: absolute; right: 0; top: 6%; width: 34%; aspect-ratio: 4 / 5;
  border-radius: var(--sk-radius-lg); border: 6px solid var(--sk-okra-soft); box-shadow: var(--sk-shadow-photo);
}
.sk-bowl-stage__timer {
  position: absolute; left: 4%; bottom: 2%; z-index: 2;
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem .85rem .85rem; border-radius: var(--sk-radius-pill);
  font-size: var(--sk-text-xs); font-weight: 600; line-height: 1.35; color: var(--sk-ink-2);
}
.sk-bowl-stage__hours {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--sk-gold); color: var(--sk-forest); font-family: var(--sk-font-display); font-size: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.sk-menu-grid .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* Food Bowl planner: shows the earliest time you can order for */
.sk-planner { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.sk-planner__clock {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--sk-gold); color: var(--sk-forest); font-family: var(--sk-font-display); line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -14px rgba(232, 169, 58, .8);
}
.sk-planner__clock span { display: block; font-size: 1.9rem; }
.sk-planner__clock small { font-family: var(--sk-font-body); font-weight: 700; font-size: .72rem; }
.sk-planner h2 { font-size: 1.6rem; margin: 0 0 .35rem; }
.sk-planner p { margin: 0; color: var(--sk-ink-2); }
.sk-planner time { font-weight: 700; color: var(--sk-ink); }

/* ---------- Product detail ---------- */
.sk-detail { padding-top: calc(var(--sk-nav-h) + 1.5rem); }
.sk-detail__media { position: relative; border-radius: var(--sk-radius-xl); overflow: hidden; background: var(--sk-calabash-soft); aspect-ratio: 1; max-height: calc(var(--sk-screen) - 7.5rem); /* room for breadcrumb + padding */ box-shadow: var(--sk-shadow-photo); }
.sk-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.sk-detail__media img.is-illustration { object-fit: contain; padding: 10%; }
.sk-detail__badges { position: absolute; left: 1.25rem; top: 1.25rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.sk-detail__panel { position: sticky; top: calc(var(--sk-nav-h) + 1.5rem); }
.sk-detail__price { font-family: var(--sk-font-display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); color: var(--sk-green); }
.sk-detail__form { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.sk-detail__form .sk-btn { flex: 1; min-width: 200px; }
.sk-detail__facts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.sk-detail__facts li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--sk-text-sm); color: var(--sk-ink-2); }
.sk-detail__facts i { color: var(--sk-green); font-size: 1.1rem; }