/* Crème v3.3 — one baking size only, no clutter for other recipes. */
.cook-cookie-size {border:1px solid #e3cbb4;border-radius:14px;background:#faf3e9;padding:12px 14px;margin:12px 0;min-width:0}
.cook-cookie-size legend {font:700 16px var(--font-ui);color:#5b3c31;padding:0 5px}
.cook-cookie-size p {margin:0 0 10px;color:#735b4e;font-size:13px}
.cook-cookie-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cook-cookie-options button {background:#fffaf5;color:#58392d;border:1px solid #d6b7a1;border-radius:11px;display:grid;gap:4px;justify-items:center;align-content:center;padding:12px 6px;min-height:70px;font:700 13px var(--font-ui);cursor:pointer}
.cook-cookie-options button small {font-size:11px;color:#8c6154}
.cook-cookie-options button:hover,.cook-cookie-options button:focus-visible {background:#f6e4d8;border-color:#986851;outline-offset:2px}
.cook-focus-nav button:disabled {opacity:.52;cursor:not-allowed}
@media(max-width:390px){.cook-cookie-options{gap:5px}.cook-cookie-options button{font-size:12px;padding:10px 4px}}

/* Illustration crops are responsive: large art on mobile, text is provided outside the image. */
.step-responsive-picture{display:block;width:100%;height:100%;overflow:hidden}
.step-responsive-picture img{display:block;width:100%;height:100%;object-fit:cover}

.cookie-recipe-note {padding:10px 12px;background:#f8eee1;border-left:3px solid #aa715e;border-radius:6px;line-height:1.55;color:#644735;margin:12px 0;}
.step-media-stage .step-responsive-picture source {max-width:100%;}
/* Full-photo cooking pages need unobstructed instructions on narrow screens.
   Navigation remains after the checkpoint instead of floating over sentence text. */
@media (max-width:640px) {
  .cook-focus .cook-nav {
    position:static !important;
    bottom:auto !important;
    z-index:auto !important;
    margin-top:14px;
  }
}