/* Michelle's Mini-Loaves — component styles. Values come from tokens.css. */

/* Button */
.ml-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border-radius:var(--radius-md);border:2px solid transparent;font-family:var(--font-body);font-size:16px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;box-sizing:border-box;transition:background-color .12s ease,filter .12s ease}
.ml-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ml-btn--primary{background:var(--butter);color:var(--on-butter);border-color:var(--butter)}
.ml-btn--primary:hover{filter:brightness(.94)}
.ml-btn--secondary{background:transparent;color:var(--blueberry);border-color:var(--blueberry)}
.ml-btn--secondary:hover{background:var(--lavender)}
.ml-btn--link{background:transparent;border-color:transparent;color:var(--blueberry);padding:0 var(--space-1);min-height:44px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.ml-btn--lg{min-height:56px;padding:0 var(--space-8);font-size:18px}
.ml-btn[disabled],.ml-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.ml-btn svg{width:20px;height:20px;flex:none}

/* Badge */
.ml-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:6px var(--space-3);border-radius:var(--radius-pill);border:1px solid transparent;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.ml-badge--featured{background:var(--butter);color:var(--on-butter)}
.ml-badge--open{background:var(--sage);color:var(--on-sage)}
.ml-badge--closed{background:var(--parchment);color:var(--crumb);border-color:var(--kraft)}
.ml-badge--soldout{background:var(--cranberry);color:var(--on-cranberry)}

/* Input */
.ml-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-body);color:var(--crust);max-width:420px}
.ml-field__label{font-size:16px;font-weight:700;line-height:1.55}
.ml-input{box-sizing:border-box;width:100%;min-height:48px;padding:0 var(--space-4);border:2px solid var(--crumb);border-radius:var(--radius-md);background:var(--flour);color:var(--crust);font-family:var(--font-body);font-size:16px;line-height:1.4}
.ml-input::placeholder{color:var(--crumb);opacity:1}
.ml-input:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--crust)}
.ml-input--number{font-family:var(--font-mono);letter-spacing:.04em}
.ml-field__hint{font-size:14px;line-height:1.45;color:var(--crumb)}
.ml-field__error{font-size:14px;line-height:1.45;color:var(--cranberry);font-weight:500;min-height:1.45em}
.ml-field--error .ml-input{border-color:var(--cranberry)}

/* Stepper */
.ml-stepper{display:inline-flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-body);color:var(--crust)}
.ml-stepper__label{font-size:16px;font-weight:700;line-height:1.55}
.ml-stepper__row{display:inline-flex;align-items:stretch;border:2px solid var(--crumb);border-radius:var(--radius-md);background:var(--flour);overflow:hidden}
.ml-stepper__row:focus-within{border-color:var(--crust)}
.ml-stepper__btn{width:48px;min-height:48px;border:0;background:transparent;color:var(--crust);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ml-stepper__btn:hover{background:var(--parchment)}
.ml-stepper__btn:focus-visible{outline:3px solid var(--focus);outline-offset:-5px;border-radius:var(--radius-sm)}
.ml-stepper__btn[disabled]{opacity:.35;cursor:not-allowed;background:transparent}
.ml-stepper__btn svg{width:20px;height:20px}
.ml-stepper__value{width:64px;border:0;border-left:1px solid var(--kraft);border-right:1px solid var(--kraft);text-align:center;font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--crust);background:transparent;-moz-appearance:textfield}
.ml-stepper__value::-webkit-outer-spin-button,.ml-stepper__value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ml-stepper__value:focus{outline:none}
.ml-stepper__hint{font-size:14px;line-height:1.45;color:var(--crumb)}

/* FlavorCard */
.ml-card{display:grid;grid-template-columns:1fr;max-width:760px;border:2px solid var(--crust);border-radius:var(--radius-lg);background:var(--parchment);overflow:hidden;font-family:var(--font-body);color:var(--crust)}
@media (min-width:640px){.ml-card{grid-template-columns:5fr 7fr}}
.ml-card__media{position:relative;background:var(--peach);min-height:240px;display:flex;align-items:center;justify-content:center;color:var(--on-peach);font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ml-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ml-card__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);min-width:0}
.ml-card__badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ml-card__title{margin:0;font-family:var(--font-display);font-size:32px;line-height:1.2;font-weight:700;text-wrap:balance}
.ml-card__desc{margin:0;font-size:16px;line-height:1.55}
.ml-card__ingredients{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ml-card__ingredients li{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;line-height:1.3;padding:5px 11px;background:var(--lavender);border-radius:var(--radius-pill);color:var(--crust)}
.ml-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:auto;padding-top:var(--space-2)}
.ml-card__price{font-family:var(--font-mono);font-size:22px;font-weight:700;line-height:1.2;display:flex;align-items:baseline;gap:var(--space-2)}
.ml-card__price small{font-size:13px;font-weight:400;color:var(--crumb);letter-spacing:.08em;text-transform:uppercase}
.ml-card__note{font-size:14px;line-height:1.45;color:var(--crumb);margin:0}