/* =============================================================
   recipe.css — single-recipe template
   ============================================================= */

.sbt-recipe{
  display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:var(--sbt-space-7);
  margin-top:var(--sbt-space-6);
}
@media (max-width: 1000px){ .sbt-recipe{ grid-template-columns:1fr } }

.sbt-recipe__hero{
  margin-bottom:var(--sbt-space-6);
}
.sbt-recipe__hero h1{ font-size:clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height:1.1; margin-bottom:var(--sbt-space-3) }
.sbt-recipe__hero img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--sbt-radius-lg);
  box-shadow:var(--sbt-shadow-2); margin-top:var(--sbt-space-5);
}

.sbt-recipe__meta{ display:flex; gap:var(--sbt-space-3); align-items:center; flex-wrap:wrap; margin:var(--sbt-space-3) 0 }

.sbt-recipe__rail{
  position:sticky; top:88px; align-self:start;
  display:flex; flex-direction:column; gap:var(--sbt-space-3);
  background:#fff; padding:var(--sbt-space-4); border-radius:var(--sbt-radius-md); box-shadow:var(--sbt-shadow-2);
}
.sbt-recipe__rail h4{ margin:0; font-size:.85rem; color:var(--sbt-rustic); text-transform:uppercase; letter-spacing:.08em }
.sbt-recipe__rail a, .sbt-recipe__rail button{
  display:flex; align-items:center; gap:.5em; padding:.55em .8em;
  background:var(--sbt-mist); border-radius:var(--sbt-radius-sm); color:var(--sbt-basil);
  font-weight:500; font-size:.9rem; text-decoration:none; text-align:left; width:100%;
}
.sbt-recipe__rail a:hover, .sbt-recipe__rail button:hover{ background:color-mix(in srgb, var(--sbt-sage) 30%, transparent) }

@media (max-width: 1000px){
  .sbt-recipe__rail{
    position:fixed; bottom:0; left:0; right:0; top:auto; z-index:30;
    flex-direction:row; border-radius:var(--sbt-radius-lg) var(--sbt-radius-lg) 0 0; overflow-x:auto;
    padding:var(--sbt-space-3); box-shadow:0 -8px 24px -10px rgba(20,36,28,.15);
  }
  .sbt-recipe__rail h4{ display:none }
  .sbt-recipe__rail a, .sbt-recipe__rail button{ width:auto; white-space:nowrap }
}

.sbt-recipe__lede{ font-family:var(--sbt-font-editorial); font-size:1.25rem; color:color-mix(in srgb, var(--sbt-ink) 80%, transparent); margin:var(--sbt-space-4) 0 var(--sbt-space-6) }

.sbt-recipe__section{ margin-block:var(--sbt-space-7) }
.sbt-recipe__section h2{ font-family:var(--sbt-font-display); border-bottom:2px solid var(--sbt-spice); padding-bottom:.3em; display:inline-block }

.sbt-ingredients{
  background:#fff; border-radius:var(--sbt-radius-md); padding:var(--sbt-space-5);
  box-shadow:var(--sbt-shadow-1);
}
.sbt-ingredients__controls{ display:flex; gap:var(--sbt-space-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--sbt-space-4); padding-bottom:var(--sbt-space-3); border-bottom:1px solid color-mix(in srgb, var(--sbt-rustic) 12%, transparent) }
.sbt-ingredients__controls label{ font-weight:600; color:var(--sbt-basil) }
.sbt-toggle{ display:inline-flex; background:var(--sbt-mist); border-radius:var(--sbt-radius-pill); padding:3px }
.sbt-toggle button{ padding:.35em .9em; border-radius:var(--sbt-radius-pill); color:var(--sbt-rustic); font-size:.85rem; font-weight:600 }
.sbt-toggle button.is-active{ background:var(--sbt-basil); color:var(--sbt-cream) }
.sbt-stepper{ display:inline-flex; align-items:center; gap:.4em }
.sbt-stepper button{ width:28px; height:28px; border-radius:50%; background:var(--sbt-basil); color:var(--sbt-cream); font-weight:700 }

.sbt-ingredients ul{ list-style:none; padding:0; margin:0; columns:2; column-gap:var(--sbt-space-5) }
.sbt-ingredients li{
  break-inside:avoid; padding:.55em 0; border-bottom:1px dashed color-mix(in srgb, var(--sbt-rustic) 15%, transparent);
  display:flex; gap:.5em;
}
.sbt-ingredients li .sbt-qty{ font-weight:600; color:var(--sbt-basil); min-width:3.5em }
.sbt-ingredients li .sbt-note{ color:var(--sbt-rustic); font-size:.82rem }
@media (max-width: 600px){ .sbt-ingredients ul{ columns:1 } }

.sbt-method{ counter-reset:step; padding:0; list-style:none; margin:0 }
.sbt-method li{
  counter-increment:step; position:relative; padding-left:3.5em; margin-bottom:var(--sbt-space-5);
  min-height:2.5em;
}
.sbt-method li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:2.4em; height:2.4em; border-radius:50%; background:var(--sbt-spice); color:var(--sbt-basil);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--sbt-font-display); font-weight:700; font-size:1.05rem;
}
.sbt-method li .sbt-timer{
  display:inline-flex; align-items:center; gap:.4em; margin-top:.4em; padding:.35em .8em;
  background:var(--sbt-basil); color:var(--sbt-cream); border-radius:var(--sbt-radius-pill); font-size:.85rem;
}
.sbt-method li .sbt-timer[data-running="true"]{ background:var(--sbt-spice); color:var(--sbt-basil) }

.sbt-equipment-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sbt-space-3) }
.sbt-equipment-list a{
  display:block; padding:var(--sbt-space-3); background:#fff; border-radius:var(--sbt-radius-sm);
  box-shadow:var(--sbt-shadow-1); text-decoration:none; color:var(--sbt-basil); font-weight:600;
}

.sbt-nutrition{ width:100%; background:#fff; border-radius:var(--sbt-radius-md); box-shadow:var(--sbt-shadow-1); overflow:hidden }
.sbt-nutrition td{ font-variant-numeric:tabular-nums }

.sbt-faq{ display:flex; flex-direction:column; gap:var(--sbt-space-2) }

/* Step done state */
.sbt-method li.is-done{ opacity:.45 }
.sbt-method li.is-done::before{ background:var(--sbt-herb); color:var(--sbt-cream); content:"✓" }
.sbt-method li.is-done > p, .sbt-method li.is-done{ text-decoration:line-through; text-decoration-color:rgba(20,36,28,.3) }
.sbt-method li{ transition: opacity .2s ease }
.sbt-method li:hover{ background:color-mix(in srgb, var(--sbt-sage) 8%, transparent); border-radius:var(--sbt-radius-sm); padding-block:.4em }

/* Cooking mode — full screen, oversized, no chrome */
body.is-cooking-mode .sbt-header,
body.is-cooking-mode .sbt-footer,
body.is-cooking-mode .sbt-disclosure,
body.is-cooking-mode .sbt-recipe__section:not(#ingredients):not(#method),
body.is-cooking-mode .sbt-comments,
body.is-cooking-mode .sbt-recipe__hero img,
body.is-cooking-mode .sbt-consent,
body.is-cooking-mode .sbt-product--mobile-sticky{ display:none !important }
body.is-cooking-mode{ background:var(--sbt-cream); }
body.is-cooking-mode .sbt-recipe{ grid-template-columns:1fr; max-width:900px; margin:0 auto; padding:2rem 1.5rem }
body.is-cooking-mode .sbt-recipe__rail{
  position:fixed; top:1rem; right:1rem; flex-direction:column; padding:.5rem; bottom:auto; left:auto;
  background:rgba(255,247,236,.95); box-shadow:var(--sbt-shadow-2); border-radius:var(--sbt-radius-md); z-index:100;
}
body.is-cooking-mode .sbt-recipe__rail h4{ display:none }
body.is-cooking-mode .sbt-recipe__rail a, body.is-cooking-mode .sbt-recipe__rail button{ width:auto; padding:.5em .8em }
body.is-cooking-mode .sbt-method li{ font-size:1.35rem; line-height:1.5; padding-left:4em; min-height:3em; margin-bottom:1.5rem }
body.is-cooking-mode .sbt-method li::before{ width:3em; height:3em; font-size:1.4rem }
body.is-cooking-mode .sbt-ingredients ul{ columns:2; font-size:1.1rem }
body.is-cooking-mode .sbt-timer{ font-size:1.1rem; padding:.5em 1.2em }
@media (max-width: 700px){ body.is-cooking-mode .sbt-ingredients ul{ columns:1 } body.is-cooking-mode .sbt-method li{ font-size:1.15rem; padding-left:3em } }