/* =====================================================================
   recipe-widget.css  —  Gravitice reusable recipe widget styles
   Place in:  content/themes/<your-theme>/assets/css/recipe-widget.css
   All selectors scoped under .grv-recipe so nothing leaks into the theme.
   ===================================================================== */
.grv-recipe{
  --grv-accent:#c2570f; --grv-dark:#7a1f08; --grv-bg:#fff8ef; --grv-line:#ecdcc4;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--grv-bg); border:1px solid var(--grv-line); border-radius:16px;
  padding:24px; margin:32px 0; color:#3a2a1c; line-height:1.5;
}
.grv-recipe .grv-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; border-bottom:2px solid var(--grv-line); padding-bottom:16px; margin-bottom:20px;}
.grv-recipe .grv-title{margin:0 0 4px; font-size:1.5rem; font-weight:800; color:var(--grv-dark);}
.grv-recipe .grv-desc{margin:0; font-size:.95rem; color:#7a6048;}
.grv-recipe .grv-serv{text-align:center; font-size:.8rem; color:#7a6048;}
.grv-recipe .grv-serv span{display:block; margin-bottom:4px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.grv-recipe .grv-stepper{display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--grv-line); border-radius:999px; padding:6px 14px;}
.grv-recipe .grv-stepper button{width:30px; height:30px; border-radius:50%; border:none; background:var(--grv-accent); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; transition:transform .1s;}
.grv-recipe .grv-stepper button:active{transform:scale(.9);}
.grv-recipe .grv-stepper strong{min-width:24px; font-size:1.2rem; color:var(--grv-dark);}
.grv-recipe .grv-cols{display:grid; grid-template-columns:1fr 1.4fr; gap:28px;}
.grv-recipe h4{margin:0 0 12px; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grv-accent); font-weight:800;}
.grv-recipe .grv-ing ul{list-style:none; margin:0; padding:0;}
.grv-recipe .grv-ing li{padding:7px 0; border-bottom:1px dashed var(--grv-line); font-size:.95rem;}
.grv-recipe .grv-amt{font-weight:700; color:var(--grv-dark);}
.grv-recipe .grv-steps ol{margin:0; padding-left:20px;}
.grv-recipe .grv-steps li{margin-bottom:16px; font-size:.95rem;}
.grv-recipe .grv-steps li strong{color:var(--grv-dark);}
.grv-recipe .grv-steps li p{margin:4px 0 8px;}
.grv-recipe .grv-timer{background:#fff; border:1.5px solid var(--grv-accent); color:var(--grv-accent); border-radius:999px; padding:5px 14px; font-size:.85rem; font-weight:700; cursor:pointer; transition:all .15s;}
.grv-recipe .grv-timer:hover{background:var(--grv-accent); color:#fff;}
.grv-recipe .grv-timer.running{background:var(--grv-dark); border-color:var(--grv-dark); color:#fff;}
.grv-recipe .grv-timer.done{background:#3a7d2c; border-color:#3a7d2c; color:#fff;}
@media (max-width:640px){
  .grv-recipe .grv-cols{grid-template-columns:1fr; gap:20px;}
  .grv-recipe{padding:18px;}
}