/* BURGER TOWN / r11: a burger comic, with real text and the native dialog. */
#product-dialog{
  --comic-ink:#202421;--comic-red:#c83227;--comic-yellow:#ffda3e;
  width:min(1080px,calc(100% - 48px));max-width:none;max-height:calc(100svh - 48px);
  padding:0;border:4px solid var(--comic-ink);border-radius:6px;
  color:var(--comic-ink);background:#fff9e8;overflow:hidden;
  box-shadow:9px 9px 0 var(--comic-ink),0 24px 100px #1119;
}
#product-dialog[open]{display:flex;flex-direction:column;animation:comic-dialog-pop .3s cubic-bezier(.16,1,.3,1)}
#product-dialog::backdrop{background:#172325ad;backdrop-filter:blur(5px)}
#product-dialog .comic-masthead{
  flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:66px;padding:10px 84px 10px 25px;border-bottom:4px solid var(--comic-ink);
  color:#fff9e8;background:var(--comic-red);
}
#product-dialog .comic-masthead p{font:900 italic 24px/1.05 "Arial Black",Arial,sans-serif;letter-spacing:-.05em;text-shadow:2px 2px 0 var(--comic-ink)}
#product-dialog .comic-masthead p span{display:inline-block;color:var(--comic-yellow);margin-left:7px}
#product-dialog .comic-issue{font-size:11px;letter-spacing:.12em;font-weight:900;white-space:nowrap}
#product-dialog .dialog-close{
  position:absolute;top:9px;right:14px;width:43px;height:43px;display:grid;place-items:center;
  padding:0;border:3px solid var(--comic-ink);border-radius:50%;background:var(--comic-yellow);
  color:var(--comic-ink);font:900 32px/1 Arial,sans-serif;box-shadow:3px 3px 0 var(--comic-ink);transition:transform .15s;
}
#product-dialog .dialog-close:hover{transform:rotate(8deg)}
#product-dialog .dialog-close:focus-visible{outline:3px solid #fff9e8;outline-offset:3px}
#product-dialog .comic-dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:46% 54%}
#product-dialog .product-dialog-art{
  position:relative;isolation:isolate;min-height:620px;border-right:4px solid var(--comic-ink);overflow:hidden;
  background-color:var(--scene,#ffda3e);
  background-image:repeating-conic-gradient(from -12deg at 50% 51%,#fff9e844 0deg 12deg,transparent 12deg 26deg);
}
#product-dialog .product-dialog-art:before{
  content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;transform:none;
  background-image:radial-gradient(var(--comic-ink) 1px,transparent 1.5px);background-size:9px 9px;opacity:.14;pointer-events:none;
}
#product-dialog .comic-burst{position:absolute;width:104%;max-width:none;left:-2%;top:50%;transform:translateY(-46%) rotate(-7deg);fill:var(--comic-yellow);stroke:var(--comic-ink);stroke-width:3.5;filter:drop-shadow(6px 7px 0 #202421);pointer-events:none}
#product-dialog .product-dialog-art img{
  position:absolute;z-index:2;left:-6%;top:50%;width:112%;max-width:none;max-height:none;height:auto;margin:0;
  transform:translateY(-42%) rotate(-12deg);filter:drop-shadow(4px 6px 0 #202421) drop-shadow(0 14px 10px #20242133);
}
#product-dialog[open] .product-dialog-art img{animation:comic-burger-pop .45s cubic-bezier(.22,1.2,.5,1) both}
#product-dialog .script-label{
  position:absolute;z-index:3;top:34px;right:20px;left:auto;bottom:auto;padding:12px 27px 14px;
  border:3px solid var(--comic-ink);border-radius:50%;background:#fffdf3;
  color:var(--comic-ink);font:900 italic 36px/.85 "Arial Black",Arial,sans-serif;letter-spacing:-.06em;
  transform:rotate(9deg);text-align:center;box-shadow:4px 5px 0 var(--comic-ink);pointer-events:none;
}
#product-dialog .script-label:after{content:"";position:absolute;bottom:-18px;left:32px;width:22px;height:26px;background:#fffdf3;border-right:3px solid var(--comic-ink);border-bottom:3px solid var(--comic-ink);transform:skew(-24deg) rotate(25deg);clip-path:polygon(0 0,100% 0,100% 100%);z-index:-1}
#product-dialog .comic-grill-stamp{position:absolute;left:19px;top:25px;font:900 17px/1.1 "Arial Black",Arial,sans-serif;letter-spacing:-.035em;border:3px solid var(--comic-ink);padding:8px 10px;transform:rotate(-8deg);background:var(--comic-yellow);box-shadow:3px 3px 0 var(--comic-ink);pointer-events:none}
#product-dialog .dialog-number{left:19px;bottom:19px;width:59px;height:59px;display:grid;place-items:center;border:3px solid var(--comic-ink);background:var(--comic-red);color:#fff9e8;font:900 italic 33px/1 "Arial Black",Arial,sans-serif;box-shadow:4px 4px 0 var(--comic-ink);transform:rotate(-6deg)}
#product-dialog .comic-art-caption{position:absolute;bottom:29px;right:18px;max-width:65%;font:900 italic 18px/1.1 "Arial Black",Arial,sans-serif;letter-spacing:-.04em;transform:rotate(-4deg);padding:8px 12px;background:#fff9e8;border:3px solid var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink);pointer-events:none}
#product-dialog .product-dialog-copy{padding:28px 31px 31px;background:#fff9e8;min-width:0}
#product-dialog .product-dialog-copy .eyebrow{font-size:11px;font-weight:900;letter-spacing:.15em;line-height:1.4;color:var(--comic-red)}
#product-dialog .product-dialog-copy h2{margin:8px 0 10px;font:900 italic clamp(45px,5.2vw,70px)/.95 "Arial Black",Arial,sans-serif;letter-spacing:-.065em;text-transform:uppercase;color:var(--comic-red);-webkit-text-stroke:1px var(--comic-ink);text-shadow:3px 3px 0 var(--comic-ink);overflow-wrap:anywhere}
#product-dialog #dialog-jp{display:table;padding:3px 10px;border:2px solid var(--comic-ink);background:var(--comic-yellow);font-size:18px;line-height:1.5;font-weight:800;transform:rotate(-2deg)}
#product-dialog .product-dialog-copy h3{position:relative;display:table;max-width:100%;margin:24px 0 18px;padding:10px 15px;border:3px solid var(--comic-ink);border-radius:8px;background:#fff;box-shadow:4px 4px 0 var(--comic-ink);font-size:25px;line-height:1.4;letter-spacing:-.045em;transform:rotate(-1deg)}
#product-dialog .product-dialog-copy h3:after{content:"";position:absolute;left:24px;bottom:-10px;width:15px;height:15px;background:#fff;border-right:3px solid var(--comic-ink);border-bottom:3px solid var(--comic-ink);transform:rotate(45deg)}
#product-dialog #dialog-description{font-size:18px;line-height:1.85;letter-spacing:.01em;overflow-wrap:anywhere}
#product-dialog .ingredient-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#product-dialog .ingredient-tags span{max-width:100%;border:2px solid var(--comic-ink);border-radius:0;padding:3px 9px;background:#d6e9df;box-shadow:2px 2px 0 var(--comic-ink);font-size:16px;line-height:1.5;font-weight:700;overflow-wrap:anywhere}
#product-dialog .ingredient-tags span:nth-child(2){background:#ffda3e;transform:rotate(2deg)}
#product-dialog .ingredient-tags span:nth-child(3){background:#f5b0a1;transform:rotate(-2deg)}
#product-dialog .product-dialog-copy dl{margin:21px 0 0;padding:13px 15px;border:3px solid var(--comic-ink);background:#fff0b1;box-shadow:4px 4px 0 var(--comic-ink);font-size:16px;line-height:1.7}
#product-dialog .product-dialog-copy dt{font-size:18px;font-weight:900}
#product-dialog .product-dialog-copy dd{margin:4px 0 0;font-size:16px;line-height:1.7}
#product-dialog .line-link{align-items:center;gap:8px;margin-top:22px;padding:10px 12px 10px 16px;border:3px solid var(--comic-ink);background:var(--comic-red);color:#fff9e8;font-size:18px;font-weight:900;line-height:1.4;box-shadow:4px 4px 0 var(--comic-ink);transition:transform .15s,box-shadow .15s}
#product-dialog .line-link span{flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--comic-ink);background:var(--comic-yellow);color:var(--comic-ink);font-size:29px;line-height:1}
#product-dialog .line-link:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--comic-ink)}
#product-dialog .line-link:focus-visible{outline:3px solid var(--comic-ink);outline-offset:5px}
@keyframes comic-dialog-pop{from{opacity:0;transform:translateY(16px) scale(.97) rotate(-.6deg)}to{opacity:1;transform:none}}
@keyframes comic-burger-pop{from{opacity:0;transform:translateY(-35%) rotate(-18deg) scale(.85)}to{opacity:1;transform:translateY(-42%) rotate(-12deg)}}
@media(min-width:761px) and (max-height:740px){
  #product-dialog{max-height:calc(100svh - 36px)}
  #product-dialog .product-dialog-art{position:sticky;top:0;min-height:0;height:calc(100svh - 110px);align-self:start}
  #product-dialog .script-label{font-size:30px;top:30px}
  #product-dialog .product-dialog-copy{padding-top:23px}
}
@media(max-width:760px){
  #product-dialog{width:calc(100% - 30px);max-height:calc(100svh - 30px);border-width:3px;box-shadow:6px 6px 0 var(--comic-ink),0 20px 80px #1118}
  #product-dialog .comic-masthead{min-height:61px;padding:10px 62px 10px 14px;border-bottom-width:3px}
  #product-dialog .comic-masthead p{font-size:18px;line-height:1.05;letter-spacing:-.04em}
  #product-dialog .comic-masthead p span{margin-left:0;display:block}
  #product-dialog .comic-issue{display:none}
  #product-dialog .dialog-close{width:40px;height:40px;top:8px;right:10px;font-size:30px}
  #product-dialog .comic-dialog-body{grid-template-columns:minmax(0,1fr)}
  #product-dialog .product-dialog-art{height:310px;min-height:310px;max-height:none;border-right:0;border-bottom:3px solid var(--comic-ink)}
  #product-dialog .comic-burst{width:88%;left:6%;transform:translateY(-44%) rotate(-7deg)}
  #product-dialog .product-dialog-art img{width:94%;left:3%;max-height:none;top:49%;transform:translateY(-42%) rotate(-12deg)}
  #product-dialog .script-label{top:15px;right:13px;font-size:25px;padding:10px 17px 12px}
  #product-dialog .comic-grill-stamp{top:17px;left:15px;font-size:13px;padding:6px 8px}
  #product-dialog .dialog-number{left:14px;bottom:15px;width:42px;height:42px;font-size:25px}
  #product-dialog .comic-art-caption{font-size:13px;bottom:16px;right:13px;padding:7px 9px;max-width:75%}
  #product-dialog .product-dialog-copy{padding:22px 20px 26px}
  #product-dialog .product-dialog-copy h2{font-size:clamp(40px,11.7vw,67px);letter-spacing:-.065em;margin:9px 0 13px}
  #product-dialog #dialog-jp{font-size:16px}
  #product-dialog .product-dialog-copy h3{font-size:23px;margin-top:22px;padding:9px 11px}
  #product-dialog #dialog-description{font-size:18px;line-height:1.8}
  #product-dialog .product-dialog-copy dl{padding:12px}
  #product-dialog .line-link{padding-left:12px;font-size:18px}
}
@media(max-width:360px){
  #product-dialog .product-dialog-art{height:270px;min-height:270px}
  #product-dialog .product-dialog-copy{padding-right:15px;padding-left:15px}
  #product-dialog .product-dialog-copy h3{font-size:21px}
  #product-dialog .line-link{font-size:16px;gap:6px}
  #product-dialog .line-link span{width:33px;height:33px}
}
@media(prefers-reduced-motion:reduce){#product-dialog[open],#product-dialog[open] .product-dialog-art img{animation:none}#product-dialog .line-link,#product-dialog .dialog-close{transition:none}}
#product-dialog .product-dialog-copy h3{text-wrap:balance}

#product-dialog .comic-lead-phrase{display:inline-block;max-width:100%}