/* Cucina Mamma — interaction finish, 16 October 2026. No new visual framework. */
:root{--cm-ease:cubic-bezier(.22,.72,.24,1);--cm-fast:160ms;--cm-medium:280ms}
html{scrollbar-gutter:stable}
/* Only real modal dialogs should lock the page; the inline storybook stays scrollable. */
body:has(dialog[open]:not(.ebook-inline)){overflow:hidden}
:where(button,a,input,select,textarea,summary){touch-action:manipulation}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--tomato);outline-offset:4px}
footer :focus-visible,.red :focus-visible{outline-color:var(--paper)}
:where(.btn,.shop-add,.pickup-add,.pickup-open,.pickup-next,.menu-toggle,.shop-actions button,.filter,.shop-filter button,.shop-heart,.shop-close,.pickup-close,.mobile-bottom button,.pizza-viewer button,.route-option){transition:background-color var(--cm-fast),color var(--cm-fast),border-color var(--cm-fast),box-shadow var(--cm-fast),transform var(--cm-fast) var(--cm-ease)}
:where(.btn,.shop-add,.pickup-add,.pickup-open,.pickup-next,.menu-toggle,.shop-actions button,.filter,.shop-filter button,.shop-heart,.mobile-bottom button):active:not(:disabled){transform:translateY(1px) scale(.985)}
:where(button,[role=button]):disabled{cursor:not-allowed;opacity:.42;transform:none;filter:none}
:where(.shop-add,.pickup-open,.pickup-next,.pickup-add){min-height:44px}
:where(.shop-quantity button,.pickup-quantity button,.shop-close,.pickup-close){min-width:44px;min-height:44px;flex-shrink:0}
.shop-quantity .shop-remove{width:auto;min-width:44px;border:0;border-radius:0;margin-left:0}
:where(.search,.shop-search):focus-within{border-color:var(--tomato)}
.search:focus-within{box-shadow:0 2px 0 var(--tomato)}
:where(input,select,textarea){accent-color:var(--tomato)}
:where(.shop-search input,.pickup-modal input):focus-visible{outline-offset:2px}
:where(.shop-actions [data-cart-count],.shop-actions [data-favorites-count],.pickup-quantity span,.shop-quantity span){font-variant-numeric:tabular-nums}
:where(.shop-actions [data-cart-count],.shop-actions [data-favorites-count]).count-changed{animation:cm-count .3s var(--cm-ease)}
@keyframes cm-count{50%{transform:translateY(-3px);opacity:.5}}
.shop-heart svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
.shop-heart[aria-pressed=true] svg{fill:currentColor}
.shop-detail .shop-heart{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.shop-heart.is-feedback{animation:cm-heart .32s var(--cm-ease)}
@keyframes cm-heart{50%{transform:scale(1.12)}}
.shop-grid{align-items:stretch}
.shop-card{border-radius:4px;box-shadow:none}
.shop-card-body{gap:0}
.shop-card .shop-photo{overflow:hidden}
.shop-photo img{transition:transform .5s var(--cm-ease)}
.shop-title{min-height:44px}
.shop-photo-placeholder{aspect-ratio:1;min-height:0;height:auto;font-size:12px;line-height:1.6;color:#705647}
.shop-detail-placeholder{min-height:240px;aspect-ratio:1}
.shop-cart-row>.shop-photo-placeholder{min-height:0;padding:4px;font-size:9px;aspect-ratio:1}
.shop-quantity{flex-wrap:wrap;gap:6px}
.shop-quantity span{min-width:20px;text-align:center}
.shop-notice{line-height:1.65}
.shop-cart-section{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:16px}
.shop-cart-section h3{font:750 17px/1.35 var(--body);text-transform:none;letter-spacing:0;margin-bottom:6px}
.shop-cart-section .shop-add{display:inline-flex;align-items:center;margin-top:10px;padding-inline:16px}
.shop-cart-section p{font-size:13px;color:var(--muted)}
.cm-empty{padding:clamp(20px,4vw,40px) 0;max-width:46ch}
.cm-empty h3{font-size:clamp(30px,5vw,42px);color:var(--tomato);margin-bottom:16px;line-height:1}
.cm-empty p{margin-bottom:12px;line-height:1.65}
.cm-empty .shop-add{display:inline-flex;align-items:center;min-height:44px;padding-inline:18px}
/* Every carousel has real, comfortably sized controls, including the lifestyle rail. */
:where(.story-carousel,.scene-gallery-track){overscroll-behavior-x:contain;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none;outline-offset:5px}
:where(.story-carousel,.scene-gallery-track)::-webkit-scrollbar{display:none}
:where(.story-carousel,.scene-gallery-track).is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.carousel-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 0 4px;min-height:64px}
.carousel-controls[hidden]{display:none!important}
.carousel-controls>button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--tomato);transition:background .18s,color .18s,transform .18s}
.carousel-controls>button svg{width:22px;height:22px}
.carousel-controls>button:active:not(:disabled){transform:scale(.94)}
.carousel-position{font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--tomato);white-space:nowrap}
.carousel-controls .carousel-dots{width:auto!important;flex:1;justify-content:flex-start!important;gap:0;margin:0;padding:0}
.carousel-controls .carousel-dots button{position:relative;display:grid!important;place-items:center;width:32px!important;height:44px!important;min-width:32px!important;min-height:44px!important;background:transparent!important;border-radius:0!important}
.carousel-controls .carousel-dots button::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#b9a697;transition:transform .22s var(--cm-ease),background .22s}
.carousel-controls .carousel-dots button[aria-current=true]::before{background:var(--tomato);transform:scale(1.5)}
/* Native dialogs keep their built-in focus containment and Escape handling. */
dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog){opacity:0;transform:translateY(14px) scale(.99);transition:opacity .2s var(--cm-ease),transform .28s var(--cm-ease),display .28s allow-discrete,overlay .28s allow-discrete}
dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)[open]{opacity:1;transform:none;animation:none}
dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)::backdrop{background:rgb(42 24 17 / .56);backdrop-filter:none;opacity:0;transition:opacity .24s,display .28s allow-discrete,overlay .28s allow-discrete}
dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)[open]::backdrop{opacity:1}
@starting-style{
 dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)[open]{opacity:0;transform:translateY(14px) scale(.99)}
 dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)[open]::backdrop{opacity:0}
}
.shop-modal-top,.pickup-head{gap:16px}
.pickup-modal{padding:clamp(18px,4vw,28px)}
.pickup-head{position:sticky;top:-1px;background:var(--paper);z-index:2;padding-block:8px 12px}
.pickup-content h3{font-size:clamp(28px,4vw,38px);line-height:1.05;margin-bottom:12px}
.pickup-content{min-width:0}
.pickup-content.cm-step-enter{animation:cm-step .22s var(--cm-ease)}
@keyframes cm-step{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
.pickup-content .pickup-alert:not(:empty){border-left:2px solid var(--tomato);padding:8px 12px;margin-top:16px}
.pickup-modes button,.pickup-slots button{transition:background .18s,color .18s,border-color .18s}
.pickup-steps{margin-block:12px 24px}
.pickup-step-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.shop-live{bottom:24px;border-radius:4px;animation:cm-step .2s var(--cm-ease)}
.pickup-toast{border-radius:4px}
:where(.btn,.shop-add,.pickup-add,.pickup-next).is-feedback{box-shadow:0 0 0 3px rgb(129 60 50 / .16)}
@media(hover:hover) and (pointer:fine){
 :where(.shop-add,.pickup-add,.pickup-open,.pickup-next):hover:not(:disabled){background:var(--tomato-dark);filter:none;transform:translateY(-2px)}
 .shop-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgb(81 46 30 / .07)}
 .shop-photo:hover img{transform:scale(1.035)}
 .carousel-controls>button:hover:not(:disabled){background:var(--tomato);border-color:var(--tomato);color:var(--paper)}
 .shop-heart:hover{border-color:var(--tomato)}
 .nav>a:not(.nav-call):hover{color:var(--tomato)}
}
@media(hover:none){.btn:hover,.text-link:hover,.shop-card:hover,.nav-call:hover{transform:none}.shop-card:hover{box-shadow:none}}
@media(max-width:760px){
 .header .nav{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .2s var(--cm-ease),transform .26s var(--cm-ease),visibility .26s;background:var(--paper);box-shadow:0 18px 30px rgb(81 46 30 / .08)}
 .header .nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
 .header .nav>a{transition:color .18s,transform .28s var(--cm-ease);transform:translateY(6px)}
 .header .nav.is-open>a{transform:none}
 .header .nav.is-open>a:nth-child(2){transition-delay:20ms}.header .nav.is-open>a:nth-child(3){transition-delay:40ms}.header .nav.is-open>a:nth-child(4){transition-delay:60ms}
 .mobile-bottom{padding-bottom:calc(8px + env(safe-area-inset-bottom));}
 body{padding-bottom:env(safe-area-inset-bottom)}
 .shop-live{bottom:calc(82px + env(safe-area-inset-bottom));width:max-content;text-align:center}
 .pickup-toast{bottom:calc(82px + env(safe-area-inset-bottom))}
 .carousel-controls{padding-inline:var(--space);gap:12px}
 .editorial-gallery .carousel-controls{padding-inline:0}
 .shop-modal{max-height:calc(100dvh - 24px);border-radius:10px}
 .shop-modal-top h2{font-size:24px}
 .shop-detail h3{font-size:34px}
 .shop-cart-row{grid-template-columns:48px minmax(0,1fr) auto}
 .shop-cart-row>strong{font-size:12px}
 .pickup-line{grid-template-columns:44px minmax(0,1fr);gap:10px}
 .pickup-line img{width:44px;height:44px}
 .pickup-line .pickup-quantity{grid-column:2;justify-self:start}
 .pickup-actions{flex-wrap:wrap;align-items:center;gap:16px}
 .pickup-actions .pickup-next{flex:1;min-width:180px}
 .pickup-modal dl{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
 .pickup-modal dd{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 :where(.story-carousel,.scene-gallery-track){scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 dialog:is(.shop-modal,.pickup-modal,.pizza-viewer,.route-dialog)[open],.header .nav.is-open{transform:none}
 .shop-photo:hover img,.shop-card:hover,.btn:hover,.text-link:hover{transform:none}
}

.shop-cart-heading{font:750 17px/1.35 var(--body);text-transform:none;letter-spacing:0;margin:14px 0 4px}
/* Use the compact navigation before desktop links become cramped. */
@media(min-width:761px) and (max-width:1100px){
 .header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;min-height:100px}
 .header .brand{grid-column:1;grid-row:1}
 .header .menu-toggle{display:inline-flex;grid-column:3;grid-row:1}
 .header .shop-actions{grid-column:2;grid-row:1;justify-self:end;width:auto;margin:0}
 .header .nav{display:flex;position:absolute;inset:100% 0 auto;background:var(--paper);padding:24px var(--space) 32px;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 100px);overflow-y:auto;border-bottom:1px solid var(--line);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .2s var(--cm-ease),transform .26s var(--cm-ease),visibility .26s;box-shadow:0 18px 30px rgb(81 46 30 / .08)}
 .header .nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
 .header .nav>a{font:750 32px/1.15 var(--display);padding:12px 0;border-bottom:1px solid var(--line)}
 .header .nav .nav-call{font:700 14px/1.4 var(--body);padding:16px;margin:18px 0 0;text-align:center}
}
@media(prefers-reduced-motion:reduce){.header .nav{transition:none}}
/* Preserve the shared text gutter on the full-width ordering introduction. */
section.pickup-intro.wrap{padding-inline:var(--space)}

@media(max-width:1100px){.header .nav.is-open{max-height:calc(100dvh - var(--cm-header-end,180px));overflow-y:auto;overscroll-behavior-y:contain}}

.menu-item img{object-fit:contain;background:#f5ecdf;border-radius:14px;padding:3px}.menu-item .menu-photo-placeholder{display:grid;place-items:center;min-height:92px;font-size:10px;text-align:center;background:#eee3d4;border:1px dashed #b99a8c;border-radius:12px;color:#74554c;padding:8px}