/* Product detail: dialog + page */
dialog.modal{border:0;padding:0;background:transparent;max-width:min(760px,100% - 1rem);width:100%;max-height:calc(100dvh - 1rem);overflow:visible;color:var(--ink)}
dialog.modal::backdrop{background:rgba(27,20,17,.65);backdrop-filter:blur(3px)}
dialog.modal[open]{animation:modal-in .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes modal-in{from{opacity:0;transform:translateY(28px) scale(.97)}}
.modal__panel{position:relative;background:var(--cheese);border-radius:var(--radius-md);max-height:calc(100dvh - 1rem);overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.modal__close{position:absolute;top:.6rem;right:.6rem;z-index:5;width:44px;height:44px;border:0;border-radius:50%;background:var(--oven);color:var(--cheese);font-size:1.5rem;cursor:pointer}
.modal__loading{padding:4rem 1rem;text-align:center;font-weight:700}

.pd{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"art form" "rel rel"}
.pd__art{grid-area:art;position:relative;background:var(--kraft);display:grid;place-items:center;padding:2.5rem 1.5rem;border-radius:var(--radius-md) 0 0 0}
.pd__art .mini-pizza{width:78%;max-width:260px}
.pd__art .dish__tags{top:1rem;left:1rem}
.pd__form{grid-area:form;padding:1.75rem 1.5rem 1.25rem}
.pd__form h2{font-size:clamp(1.7rem,3.5vw,2.3rem);padding-right:2.5rem}
.pd__desc{color:var(--muted)}
.pd__group{border:0;padding:0;margin:0 0 1.1rem}
.pd__group legend{font-weight:800;font-family:var(--font-display);font-size:1.1rem;margin-bottom:.4rem;padding:0}
.opt{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.4rem .8rem;margin-bottom:.4rem;background:#fff;border:2px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--tomato)}
.opt:has(input:checked){border-color:var(--tomato);background:#fff3ee}
.opt:has(input:focus-visible){outline:3px solid var(--ember);outline-offset:2px}
.opt input{width:20px;height:20px;accent-color:var(--tomato);flex:none}
.opt span{flex:1}
.opt b{font-variant-numeric:tabular-nums}

.pd__bar{position:sticky;bottom:0;display:flex;gap:.8rem;align-items:center;background:var(--cheese);padding:.8rem 0 .2rem;border-top:2px solid var(--line);margin-top:.5rem}
.qty{display:inline-flex;align-items:center;border:2px solid var(--oven);border-radius:var(--radius-pill);overflow:hidden}
.qty button{width:44px;height:44px;border:0;background:transparent;font-size:1.4rem;font-weight:700;cursor:pointer}
.qty button:hover{background:rgba(27,20,17,.08)}
.qty output{min-width:2ch;text-align:center;font-weight:800;font-size:1.1rem}
.pd__add{flex:1;justify-content:space-between}
.pd__add b{font-variant-numeric:tabular-nums;background:rgba(0,0,0,.2);padding:.15rem .6rem;border-radius:var(--radius-pill)}
.pd__add b.bump{animation:bump .3s}
.pd__msg{min-height:1.4em;margin:.5rem 0 0;font-weight:700;color:var(--basil)}
.pd__msg.is-error{color:var(--tomato-dark)}

.fav{position:absolute;top:.75rem;right:.75rem;width:48px;height:48px;border:0;border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .15s}
.fav:hover{transform:scale(1.1)}
.fav svg{width:24px;height:24px;fill:none;stroke:var(--tomato);stroke-width:2;transition:fill .2s}
.fav.is-on svg{fill:var(--tomato)}
.fav.pop{animation:bump .35s}

.pd__related{grid-area:rel;padding:1rem 1.5rem 1.5rem;background:var(--kraft-2);border-radius:0 0 var(--radius-md) var(--radius-md)}
.pd__related h3{font-size:1.1rem}
.pd__related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem}
.pd__related a{display:flex;flex-direction:column;padding:.7rem .9rem;background:#fff;border-radius:var(--radius-sm);text-decoration:none;border:2px solid transparent}
.pd__related a:hover{border-color:var(--tomato)}
.pd__related span{color:var(--muted);font-size:.9rem}

.pd-page .pd{background:var(--cheese);border-radius:var(--radius-md);box-shadow:var(--shadow);overflow:hidden}

/* Small toast used by the product form */
.dish__body h3 a{text-decoration:none}
.dish__body h3 a:hover{text-decoration:underline}

@media (max-width:700px){
  .pd{grid-template-columns:1fr;grid-template-areas:"art" "form" "rel"}
  .pd__art{padding:1.5rem;border-radius:var(--radius-md) var(--radius-md) 0 0}
  .pd__art .mini-pizza{width:50%}
}
@media (prefers-reduced-motion:reduce){dialog.modal[open]{animation:none}.pd__add b.bump,.fav.pop{animation:none}}

.pd__photo{width:100%;max-height:300px;object-fit:cover;border-radius:var(--radius-md)}