.menu-join{display:flow-root;padding:0 4% 64px;scroll-margin-top:48px}
.section-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.product-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;list-style:none;padding:0;margin:0;position:relative;top:calc(-1 * var(--burger-overlap));margin-bottom:calc(-1 * var(--burger-overlap))}
.product-card{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 8px 16px;border:0;background:transparent;text-align:center}
.product-visual{display:grid;place-items:center;width:100%;aspect-ratio:1.2;transition:transform .2s ease}.product-visual img{display:block;width:100%;height:100%;object-fit:contain}
.burger-placeholder{display:grid;place-items:center;min-height:150px;width:100%;color:var(--forest);font:italic 16px Georgia,serif;background:radial-gradient(ellipse at center,#e6a32312,transparent 68%)}
.product-name{font:750 25px/1.2 Fraunces,Georgia,serif}.product-price{margin-top:6px;font:650 19px Fraunces,Georgia,serif}
.product-card:hover .product-visual{transform:translateY(-5px)}
.prototype-note{font-size:14px;line-height:1.6;max-width:560px;margin:16px auto 0;text-align:center;color:#476056}
/* Raccord hero/carte : même crème que le header, sous le futur burger. */
.hero::after{content:'';position:absolute;inset:auto 0 0;height:14px;z-index:1;background:linear-gradient(to bottom,rgba(250,240,226,0),var(--cream));pointer-events:none}
@media(max-width:599px){.hero::after{height:10px}}

/* Fiche : scène dominante, volet crème indépendant à deux hauteurs. */
@media(max-width:799px){.menu-join{padding-inline:0}.product-list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:6%;padding-inline:6%;padding-top:var(--burger-overlap);top:calc(-1 * var(--burger-overlap));margin-top:calc(-1 * var(--burger-overlap));margin-bottom:calc(-2 * var(--burger-overlap));padding-bottom:12px}.product-list>li{flex:0 0 82%;scroll-snap-align:start}.product-visual{max-height:310px}.prototype-note{padding:0 24px}}
.product-is-open{overflow:hidden}
.product-dialog{padding:0;border:0;border-radius:10px;background:var(--forest);color:var(--forest);width:min(960px,calc(100% - 48px));max-width:none;max-height:94dvh;overflow:hidden;box-shadow:0 16px 70px #001d1966}
.product-dialog::backdrop{background:#00251ed9;backdrop-filter:blur(5px)}
.product-dialog[open]{display:grid;grid-template-columns:1fr 1fr;height:650px}
.detail-brand{position:absolute;left:20px;top:18px;width:160px;height:auto;z-index:3;filter:brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(400%)}
.product-close{position:absolute;right:20px;top:20px;z-index:4;width:44px;height:44px;padding:0;border:1px solid var(--cream);border-radius:50%;background:#003d3033;color:var(--cream);font:36px/1 Arial,sans-serif}
.detail-visual{position:relative;min-height:0;isolation:isolate;overflow:hidden;background:var(--forest)}
.detail-visual::before{content:'';position:absolute;inset:-8px;background:linear-gradient(#002a2140,#002a2166),url('images/hero-mobile-1086.webp') center 44%/cover;filter:blur(3px);z-index:-1;transition:opacity .24s ease}
.is-expanded .detail-visual::before{opacity:.35}
.detail-art{display:grid;place-items:center;width:100%;height:100%;padding:100px 24px 30px}.detail-art img{width:100%;height:100%;object-fit:contain}.detail-art .burger-placeholder{color:var(--cream);background:none;min-height:0}
.product-sheet{display:flex;flex-direction:column;min-height:0;background:var(--cream);position:relative;z-index:2}
.product-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 24px 10px;text-align:center}
.sheet-grip{display:block;width:90px;min-height:36px;padding:0;margin:0 auto;border:0;background:none;touch-action:none}
.sheet-grip::after{content:'';display:block;width:40px;height:5px;margin:auto;background:var(--forest);border-radius:10px}
#product-title{font:bold 36px/1.12 Georgia,serif;margin:0 0 3px}.detail-price{font:bold 27px/1.15 Georgia,serif;margin:0}
.composition-toggle{display:block;margin:3px auto 0;min-height:44px;padding:8px 0;border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:16px}.composition-toggle[hidden]{display:none}
.product-description{font-size:14px;line-height:1.5;margin:16px 0 18px}.product-allergens{border-block:1px solid #b5894899;text-align:left}.product-allergens summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;min-height:44px;padding:8px 6px;font:bold 17px Georgia,serif}.product-allergens summary::-webkit-details-marker{display:none}.product-allergens summary::after{content:'';width:9px;height:9px;border-right:1.5px solid var(--forest);border-bottom:1.5px solid var(--forest);transform:rotate(45deg);margin-right:4px}.product-allergens[open] summary::after{transform:rotate(225deg)}.product-allergens summary:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}.allergen-status{font-size:14px;line-height:1.5;padding:0 6px 10px;margin:0}
.product-footer{flex:none;padding:16px 20px 24px;background:var(--cream)}
.product-actions{display:flex;gap:14px;align-items:stretch}.quantity-control{display:flex;align-items:center;border:1px solid var(--forest);border-radius:8px}.quantity-control button{width:44px;min-height:48px;background:none;border:0;font-size:24px}.quantity-control button:disabled{opacity:.35;cursor:default}.quantity-control output{min-width:26px;text-align:center;font:bold 21px Georgia,serif}.product-add{flex:1;min-height:50px;padding:10px 8px;border:0;border-radius:8px;background:var(--forest);color:var(--cream);font:bold 20px Georgia,serif;white-space:nowrap}
.product-dialog .section-label{position:absolute}.ingredient-list[hidden]{display:none}
@media(min-width:800px){.product-close{right:calc(50% + 16px)}.product-scroll{padding-top:64px}}
@media(max-width:799px){.product-dialog{position:fixed;inset:0;margin:0;width:100%;max-height:none;border-radius:0}.product-dialog[open]{display:flex;flex-direction:column;height:100dvh;min-height:0}.detail-visual{flex:1;min-height:0}.product-sheet{flex:0 0 236px;border-radius:28px 28px 0 0;margin-top:-22px;transition:flex-basis .24s ease}.is-expanded .product-sheet{flex-basis:320px}.product-scroll{padding:0 22px 8px}.product-footer{padding:14px 20px max(22px,env(safe-area-inset-bottom))}.detail-art{padding:90px 20px 42px}.detail-brand{width:150px}.sheet-grip{min-height:32px}.detail-visual::before{background-position:center 45%}}
@media(max-width:359px){#product-title{font-size:32px}.detail-price{font-size:25px}.product-scroll{padding-inline:18px}.product-footer{padding-inline:16px}.product-actions{gap:12px}.quantity-control button{width:44px}.quantity-control output{min-width:24px}.product-add{font-size:16px}.product-description{font-size:13px}.detail-brand{width:136px}}
@media(max-height:600px) and (max-width:799px){.product-sheet{flex-basis:222px}.is-expanded .product-sheet{flex-basis:290px}.detail-art{padding-top:70px;padding-bottom:24px}.product-footer{padding-block:10px 16px}.product-scroll{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.product-sheet,.detail-visual::before,.product-visual{transition:none}.product-card:hover .product-visual{transform:none}}

/* Carte : haut du pain sur le fondu, sans cadre ni ombre artificielle. */
.product-visual{aspect-ratio:auto;display:block;padding:0 5% 8px}
.product-visual img{display:block;width:100%;height:auto;object-fit:contain}
.product-card{padding-top:0}
@media(max-width:799px){.product-visual{max-height:none;padding-inline:4%}.product-list>li{flex-basis:82%}}

/* Whole-to-layer crossfade masks the different source silhouettes. CSS transitions
   reverse from the current interpolated position, with no animation timers. */
.detail-art{position:absolute;inset:0;padding:0;display:block}
.burger-stage{position:absolute;inset:88px 18px 30px}
.scene-whole{position:absolute!important;left:50%;height:auto!important;max-width:none;transform:translateX(-50%);opacity:1;transition:opacity 220ms ease 320ms;z-index:12}
.scene-layer{position:absolute;left:50%;top:0;height:auto;max-width:none;transform-origin:50% 0;transform:translate(-50%,var(--closed-y,0px)) scale(var(--closed-scale,1));opacity:0;transition:transform 650ms cubic-bezier(.22,.65,.25,1),opacity 180ms ease 360ms;will-change:transform}
.layers-ready.is-expanded .scene-whole{opacity:0;transition-delay:0ms}
.layers-ready.is-expanded .scene-layer{opacity:1;transform:translate(-50%,var(--open-y,0px)) scale(1);transition:transform 650ms cubic-bezier(.22,.65,.25,1),opacity 160ms ease}
.layer-label{position:absolute;display:flex;align-items:center;gap:5px;transform:translateY(-50%);font:14px/1.2 Georgia,serif;color:var(--cream);opacity:0;transition:opacity 140ms ease;pointer-events:none;z-index:20}
.layer-label.on-left{left:0}.layer-label.on-right{right:0}.layer-label span{flex-shrink:1}.layer-label i{height:1px;background:var(--mustard);flex:1;min-width:8px;position:relative}.layer-label i::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--mustard);top:-1.5px;right:0}.layer-label.on-right i::after{left:0;right:auto}
.layers-ready.is-expanded .layer-label{opacity:1;transition-delay:440ms}
.scene-status{position:absolute;bottom:25px;left:20px;right:20px;color:var(--cream);font-size:13px;text-align:center;z-index:30;margin:0}.scene-status:empty{display:none}.product-dialog:not(.is-expanded):not(.layers-failed) .scene-status{display:none}
.burger-stage .scene-layer{height:auto;object-fit:contain}
@media(max-width:599px){.burger-stage{inset:82px 12px 28px}.layer-label{font-size:12px;gap:4px}}
@media(max-width:359px){.layer-label{font-size:11px}}
@media(max-height:600px) and (max-width:799px){.burger-stage{inset:70px 12px 26px}.layer-label{font-size:10px}}
/* Sur les écrans très courts, faire défiler la scène plutôt que miniaturiser les couches. */
@media(max-height:520px) and (max-width:799px){.is-expanded .detail-art{inset:70px 0 22px;width:auto;height:auto;overflow-y:auto;overscroll-behavior:contain}.is-expanded .burger-stage{inset:0 12px auto;height:300px;margin-bottom:20px}.is-expanded .layer-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.scene-whole,.scene-layer,.layer-label,.layers-ready.is-expanded .scene-whole,.layers-ready.is-expanded .scene-layer,.layers-ready.is-expanded .layer-label{transition:none;will-change:auto}}

/* Un premier produit dans l'axe de l'écran ; le suivant pourra apparaître à droite. */
@media(max-width:799px){.product-list{padding-inline:9vw;scroll-padding-inline:9vw}.product-list>li{flex:0 0 82vw}}

/* Huit emplacements : rangées/colonnes renseignées dans les données DOM,
   sans attribution prématurée des groupes du futur mouvement desktop. */
.product-list>li{min-width:0}
.product-visual .burger-placeholder{position:relative;aspect-ratio:1000/942;min-height:0;background:none;font:italic 16px/1.5 Georgia,serif;color:#52695f}
.product-visual .burger-placeholder::before{content:'';position:absolute;inset:50% 0 auto;border-top:1px dashed #b5894859}
.burger-placeholder>span{position:relative;background:var(--cream);padding:0 10px}
.card-navigation{display:none}
.pending-visual{position:absolute;inset:90px 24px 40px;display:grid;place-items:center;color:var(--cream);font:italic 20px Georgia,serif;text-align:center}
.product-availability{font-size:14px;line-height:1.5;margin:16px auto;max-width:290px;color:#52695f}
.product-dialog.is-pending .composition-toggle{display:none}
.product-dialog.is-pending .sheet-grip{visibility:hidden}
.product-add:disabled{opacity:.45;cursor:not-allowed}
.product-dialog.is-pending .quantity-control{opacity:.5}
@media(min-width:800px) and (max-width:1199px){.product-name{font-size:clamp(18px,2.1vw,25px)}.product-price{font-size:17px}}
@media(max-width:799px){
  .product-dialog.is-pending .product-sheet{flex-basis:290px}
  /* Axe centré conservé. Moins de marge dans le visuel donne une amorce plus
     lisible à droite, sans réduire le burger actif. Le padding supérieur
     existant réserve le débordement du pain dans la zone de scroll. */
  .product-list{overscroll-behavior-x:contain;scrollbar-width:none;gap:8px;padding-inline:14vw;scroll-padding-inline:14vw}
  .product-list>li{flex-basis:72vw}
  .product-visual{padding-inline:0}
  .product-list::-webkit-scrollbar{display:none}
  .card-navigation{display:flex;align-items:center;gap:12px;margin:14px 9vw 0}
  .card-navigation button{flex:0 0 44px;width:44px;height:44px;padding:0;border:0;background:none;color:var(--forest);font-size:24px}
  .card-navigation button[aria-disabled="true"]{opacity:.3;cursor:default}
  .card-position{flex:none;font:650 13px Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;white-space:nowrap}
  .card-progress{height:2px;flex:1;background:#b5894840;overflow:hidden}
  .card-progress i{display:block;height:100%;background:var(--mustard);transition:transform .2s ease}
}
@media(prefers-reduced-motion:reduce){.card-progress i{transition:none}}

/* Fiches desktop : le vert profond porte uniquement sur le décor intérieur.
   L'image reste derrière un voile indépendant ; aliments et légendes restent
   à pleine opacité. Le backdrop de la fenêtre et le mobile sont inchangés. */
@media(min-width:800px){
  .product-dialog .detail-visual::before{opacity:1;transition:none}
  .product-dialog .detail-visual::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(9,36,21,.84),rgba(9,36,21,.94) 52%,rgba(7,29,17,.97));
    opacity:0;transition:opacity 650ms cubic-bezier(.22,.65,.25,1);
  }
  .product-dialog.is-expanded .detail-visual::after{opacity:1}
  .product-dialog .detail-art{z-index:1}
}
@media(min-width:800px) and (prefers-reduced-motion:reduce){
  .product-dialog .detail-visual::after{transition:none}
}

/* Même fiche verticale et même volet à deux hauteurs sur desktop et mobile. */
.scene-contact-shadow{display:none}
@media(min-width:800px){
  .product-visual{width:70%;max-width:clamp(170px,13vw,230px);padding:0 0 8px}
  .product-dialog{width:min(480px,calc(100% - 48px));max-height:94dvh}
  .product-dialog[open]{display:flex;flex-direction:column;height:min(880px,94dvh)}
  .detail-visual{flex:1;min-height:0}
  .product-dialog .detail-visual::before{inset:0;background:url('images/fond-table-desktop.webp') center bottom/cover;filter:none}
  .product-sheet{flex:0 0 244px;border-radius:28px 28px 0 0;margin-top:-22px;transition:flex-basis .24s ease}
  .is-expanded .product-sheet{flex-basis:320px}
  .product-scroll{padding:0 22px 8px}
  .sheet-grip{min-height:32px}
  .product-close{right:20px}
  .product-footer{padding:14px 20px 22px}
  .scene-contact-shadow{display:block;position:absolute;left:50%;height:18px;transform:translate(-50%,-50%);z-index:11;pointer-events:none;background:radial-gradient(ellipse,rgba(12,8,4,.65),rgba(12,8,4,.24) 45%,transparent 73%);filter:blur(3px);opacity:1;transition:opacity 220ms ease 320ms}
  .is-expanded .scene-contact-shadow{opacity:0;transition-delay:0ms}
}
@media(min-width:1100px){.menu-join{padding-inline:9%}}
/* Comme sur mobile, la scène reste parcourable si la hauteur manque. */
@media(min-width:800px) and (max-height:720px){
  .product-sheet{flex-basis:222px}.is-expanded .product-sheet{flex-basis:290px}
  .is-expanded .detail-art{inset:78px 0 22px;width:auto;height:auto;overflow-y:auto;overscroll-behavior:contain}
  .is-expanded .burger-stage{inset:0 12px auto;height:300px;margin-bottom:20px}
}
@media(min-width:800px) and (prefers-reduced-motion:reduce){.product-sheet,.scene-contact-shadow{transition:none}}

/* Commandes fixes : seul le texte de composition peut défiler. */
.product-sheet-heading{flex:none;text-align:center;padding:0 22px}
.product-scroll{padding:0 22px 8px}
.product-dialog:not(.is-expanded):not(.is-pending) .product-scroll{display:none}
.sheet-grip{font:600 14px/1.2 Arial,sans-serif;width:120px}
.is-expanded .sheet-grip::after{display:none}
.product-close{border:0;border-radius:0;background:transparent;box-shadow:none}
.product-close:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
.detail-depth{display:none}
@media(max-width:799px){.product-list .product-visual{width:84%}}
@media(min-width:800px){
  .product-dialog{container-type:inline-size;width:min(480px,calc((100dvh - 32px)*.64),calc(100vw - 32px));max-height:calc(100dvh - 32px)}
  .product-dialog[open]{height:min(880px,calc(100dvh - 32px))}
  .product-sheet{flex:0 0 auto;min-height:0}
  .is-expanded .product-sheet{flex:0 0 max(40%,270px)}
  .product-sheet-heading{padding-inline:clamp(14px,4.5cqw,22px)}
  .product-dialog #product-title{font-size:clamp(24px,7.5cqw,36px)}
  .product-dialog .detail-price{font-size:clamp(20px,5.6cqw,27px)}
  .product-dialog .product-description{font-size:clamp(12px,2.9cqw,14px);margin:10px 0 12px}
  .product-dialog .product-allergens summary{font-size:clamp(15px,3.5cqw,17px);min-height:36px}
  .product-dialog .product-add{font-size:clamp(16px,4.1cqw,20px)}
  .product-footer{padding:12px clamp(14px,4cqw,20px) 16px}
  .product-actions{gap:10px}
  .detail-brand{width:clamp(110px,33cqw,160px);left:16px;top:14px}
  .product-close{right:12px;top:12px}
  .product-dialog .detail-art,.product-dialog.is-expanded .detail-art{inset:0;width:100%;height:100%;overflow:hidden}
  .product-dialog .burger-stage,.product-dialog.is-expanded .burger-stage{inset:clamp(64px,17cqw,88px) 12px 26px;height:auto;margin:0}
  .layer-label{font-size:clamp(10px,2.9cqw,14px)}
  /* Copie floutée du décor, fondue avant la table pour garder le plateau net. */
  .detail-depth{display:block;position:absolute;inset:0;z-index:-1;background:url('images/fond-table-desktop.webp') center bottom/cover;filter:blur(7px);mask-image:linear-gradient(#000 0%,#000 60%,transparent 78%);pointer-events:none}
}

/* Desktop seulement : un volet plus discret dans les deux états,
   pour rendre la hauteur disponible au produit et à ses couches. */
@media(min-width:800px){
  .product-dialog.is-expanded .product-sheet{flex-basis:clamp(208px,28%,246px)}
  .product-dialog .product-sheet-heading{padding-inline:16px}
  .product-dialog .sheet-grip{min-height:28px;font-size:13px}
  .product-dialog #product-title{font-size:clamp(23px,5.8cqw,28px);margin-bottom:2px}
  .product-dialog .detail-price{font-size:clamp(18px,4.4cqw,21px)}
  .product-dialog .composition-toggle{min-height:34px;margin:0 auto;padding:6px 0;font-size:14px}
  .product-dialog .product-scroll{padding:0 16px 4px}
  .product-dialog .product-description{font-size:clamp(12px,2.7cqw,13px);line-height:1.4;margin:4px 0}
  .product-dialog .product-allergens summary{min-height:32px;padding:6px;font-size:15px}
  .product-dialog .product-footer{padding:8px 16px 10px}
  .product-dialog .quantity-control button{width:40px;min-height:40px;font-size:21px}
  .product-dialog .quantity-control output{min-width:24px;font-size:18px}
  .product-dialog .product-add{min-height:40px;padding:8px;font-size:16px}
}

/* Retour d'ajout : emplacement permanent, sans déplacement lors du message. */
.product-feedback { min-height: 64px; margin: 6px 0 0; font: 700 13px/1.35 Arial,Helvetica,sans-serif; text-align: center; color: var(--forest); overflow-wrap: anywhere; }
.product-feedback-message { margin: 0; min-height: 2.7em; }
.product-feedback-order:not([hidden]) { display: inline-flex; align-items: center; min-height: 28px; color: var(--forest); font-weight: 750; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.product-feedback-order:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }
.product-add-label { display: inline-block; }
@media (width < 800px) {
  .product-dialog .product-sheet { flex-basis: 300px; }
  .product-dialog.is-expanded .product-sheet { flex-basis: 384px; }
}
@media (width < 800px) and (max-height: 600px) {
  .product-dialog .product-sheet { flex-basis: 286px; }
  .product-dialog.is-expanded .product-sheet { flex-basis: 354px; }
}
@media (min-width: 800px) {
  .product-dialog.is-expanded .product-sheet { flex-basis: clamp(240px, calc(28% + 32px), 278px); }
}
.scene-layer-group { position: absolute; inset: 0; isolation: isolate; z-index: 10; opacity: 0; }
.product-dialog.scene-driven .scene-layer-group .scene-layer { opacity: 1; }
.scene-food { position: absolute; inset: 0; isolation: isolate; z-index: 10; pointer-events: none; }
.scene-food > .scene-layer-group,.scene-food > .scene-whole { mix-blend-mode: plus-lighter; }
/* Une seule horloge remplace les transitions indépendantes et leurs délais. */
.product-dialog.scene-driven .product-sheet,
.product-dialog.scene-driven .scene-whole,
.product-dialog.scene-driven .scene-layer,
.product-dialog.scene-driven .scene-contact-shadow,
.product-dialog.scene-driven .layer-label { transition: none; }
.product-dialog.scene-driven .scene-layer { will-change: auto; }
@media (min-width: 800px) {
  .product-dialog.scene-driven .detail-visual::after { opacity: var(--scene-progress, 0); transition: none; }
}
@media (width < 800px) {
  .product-dialog.scene-driven .detail-visual::before { opacity: calc(1 - var(--scene-progress, 0) * .65); transition: none; }
}

/* Ingrédients : même sérif éditoriale locale sur la fiche et le schéma. */
.product-dialog .product-description, .product-dialog .layer-label {
  font-family: Fraunces, Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-style: normal;
}
.product-dialog .product-description { font-weight: 400; }
.product-dialog .layer-label { font-weight: 500; }

/* Volet ajusté à son contenu : la confirmation ne réserve plus un grand bloc vide. */
.product-dialog .product-sheet, .product-dialog.is-expanded .product-sheet {
  flex: 0 0 auto; max-height: 60%;
}
.product-dialog .product-scroll { flex: 0 1 auto; }
.product-feedback {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 8px; min-height: 46px; margin-top: 4px;
}
.product-feedback-message { min-height: 0; }
.product-feedback-order:not([hidden]) { min-height: 28px; }
.product-dialog .composition-toggle { font-family: Fraunces, Georgia, serif; font-weight: 500; }
.product-dialog.is-expanded .sheet-grip { font: 400 25px/1 Fraunces, Georgia, serif; min-height: 36px; }
@media (min-width: 800px) {
  .product-dialog .product-sheet, .product-dialog.is-expanded .product-sheet { max-height: 50%; }
  .product-feedback { min-height: 28px; }
  .product-dialog.is-expanded .sheet-grip { min-height: 30px; font-size: 23px; }
}
@keyframes product-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes product-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.product-dialog[open]::backdrop { animation: product-backdrop-in 280ms ease-out both; }
.product-dialog.is-closing::backdrop { animation: product-backdrop-out 200ms ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .product-dialog[open]::backdrop, .product-dialog.is-closing::backdrop { animation: none; }
}

@media (width < 800px) {
  .product-dialog .product-description { margin: 8px 0 10px; }
  .product-dialog .product-scroll { padding-bottom: 4px; }
  .product-dialog .product-footer { padding-top: 10px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .product-feedback { min-height: 28px; font-size: 12px; line-height: 1.25; gap: 0 6px; }
  .product-feedback-order:not([hidden]) { min-height: 24px; }
}
@media (max-width: 359px) { .product-feedback { min-height: 40px; } }