/* Shared responsive corrections for the original, self-contained website. */
:root {
  --viewport-background: #f08e0c;
  --screen-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
@supports (height: 100dvh) {
  :root { --screen-height: 100dvh; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { background: var(--viewport-background); min-height: var(--screen-height); }
.hero, .menu { height: var(--screen-height); }
.p-sticky { height: var(--screen-height); }
.p-hero { height: calc(var(--screen-height) * 1.6); }
.pg-hero { min-height: var(--screen-height); }
.pg, .product, .menu { scroll-padding-top: calc(100px + var(--safe-top)); }
.top, .m-top { top: var(--safe-top); }
.lang { left: max(28px, var(--safe-left)); }
.menu-btn, .m-close { right: max(28px, var(--safe-right)); }
.circle-btn, .m-lang button { width: 44px; height: 44px; flex-shrink: 0; }
.menu-btn, .m-close { min-height: 44px; }
.menu-btn .dot, .m-close i { width: 44px; height: 44px; flex-shrink: 0; }
.p-back, .p-size button, .pg-chips button { min-height: 44px; }
.p-back { bottom: calc(22px + var(--safe-bottom)); }
.p-sticky > .p-size { bottom: calc(22px + var(--safe-bottom)); }
.privacy, .counter { bottom: calc(22px + var(--safe-bottom)); }
.caption { bottom: calc(20px + var(--safe-bottom)); }
.pg-w, .p-info { max-width: min(1500px, calc(100% - 48px)); }
.pg-w > *, .pg-two > *, .pg-dist > *, .pg-info > *, .pg-form > *, .pg-foot-row > * { min-width: 0; }
.pg-h, .pg-title, .pg-lede, .pg-p, .pg-prod b, .pg-mom b, .pg-d h3,
.pg-btn, .p-info-h, .p-title, .p-card span { overflow-wrap: anywhere; }
.pg-btn { height: auto; min-height: 52px; padding-block: 14px; line-height: 1.35; max-width: 100%; }
.pg-info b, .pg-d dd, .pg-foot-row { overflow-wrap: anywhere; }
.pg-f input, .pg-f textarea { font-size: 20px; scroll-margin-block: 110px 80px; }
.pg-prod img, .pg-mom img, .p-card img { object-fit: contain; max-width: 100%; }
.pg-prod, .pg-mom, .p-card { min-width: 0; }
.pg-fan { max-width: 100%; }
.pg-prod em { min-height: 24px; }
.pg-foot { padding-bottom: calc(40px + var(--safe-bottom)); }
.p-end { padding-bottom: calc(120px + var(--safe-bottom)); }
.pg-foot-row nav a, .privacy { min-height: 44px; display: inline-flex; align-items: center; }
.privacy { bottom: calc(8px + var(--safe-bottom)); }
:is(button, a[role="button"], input, textarea):focus-visible {
  outline: 2px solid var(--cream-3); outline-offset: 4px;
}
/* Keep the product title within its frame even for the longest flavour name. */
.p-title .w { max-width: 100%; }
@media (max-width: 1100px) {
  .p-nut2 { table-layout: fixed; }
  .p-nut2 th:first-child { width: 38%; }
  .p-nut2 th:nth-child(2) { width: 27%; }
  .p-nut2 td, .p-nut2 th { white-space: normal !important; overflow-wrap: anywhere; }
  .p-nut2 td:nth-child(n+2), .p-nut2 th:nth-child(n+2) { padding-left: 12px; }
  .p-nut2 .vw { display: block; }
  .p-nut2 .vw .gh { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-prod .ph { height: min(320px, calc(var(--screen-height) * .36)); }
  .pg-moms { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .pg-two { gap: 32px; }
  .pg-dist { gap: 32px; }
  .pg-d h3 { font-size: 64px; }
}
/* A flowing menu stays usable in short landscape windows and with text zoom. */
@media (max-width: 900px), (max-height: 600px) {
  .menu { overflow-y: auto; overscroll-behavior: contain; padding: calc(100px + var(--safe-top)) 6% calc(24px + var(--safe-bottom)); }
  .m-list { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; }
  .m-list a { min-height: 52px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
  .m-list .roll { font-size: 32px; }
  .m-list .roll > span { white-space: normal; }
  .m-list .roll > span > span { white-space: pre; }
  .m-arr { display: none; }
  .m-stage { position: relative; right: auto; top: auto; bottom: auto; margin: 24px auto; width: 100%; height: min(240px, calc(var(--screen-height) * .27)); transform: none; opacity: .7; }
  .m-stage .mb { max-width: 70%; object-fit: contain; }
  .m-disc, .m-cap { display: none; }
  .m-foot { position: relative; left: auto; right: auto; bottom: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
  .m-foot > div { min-width: 0; overflow-wrap: anywhere; }
  .m-foot .m-lang { display: none; }
}
@media (max-width: 760px) {
  .lang { left: max(12px, var(--safe-left)); top: 12px; gap: 4px; }
  .menu-btn, .m-close { right: max(12px, var(--safe-right)); top: 12px; }
  .menu-btn .pill, .m-close span { display: none; }
  .logo, .m-logo { padding: 8px 12px; }
  .logo img, .m-logo img { width: min(150px, 38vw); height: auto; }
  .pg-w, .p-info { width: calc(100% - 40px); max-width: none; }
  .pg-hero { padding: calc(100px + var(--safe-top)) 0 76px; }
  .pg-title { font-size: 44px; }
  .pg-d h3 { font-size: 52px; }
  .pg-h, .pg-quote .pg-h, .pg-cta .pg-h { font-size: 36px; }
  .pg-lede { font-size: 16px; margin-top: 24px; }
  .pg-sec { padding: 64px 0; }
  .pg-fan { width: 100%; height: min(260px, 62vw); margin-top: 32px; }
  .pg-moms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; overflow: visible; margin-top: 48px; }
  .pg-mom img { height: 200px; }
  .pg-mom:last-child { grid-column: 1 / -1; }
  .pg-grid { gap: 40px 16px; }
  .pg-prod .ph { height: 240px; }
  .pg-prod b { font-size: 22px; line-height: 1.15; }
  .pg-prod small { font-size: 10px; line-height: 1.6; letter-spacing: .08em; }
  .pg-btns { gap: 12px; margin-top: 28px; }
  .pg-d dl { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .pg-foot .tag { font-size: 44px; }
  .pg-foot-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
  .pg-foot-copy { line-height: 1.5; }
  .p-title { font-size: 48px; }
  .p-info-h, .p-others h3 { font-size: 40px; }
  .p-info { padding-block: 64px; gap: 36px; }
  .p-nut2 td:first-child, .p-nut2 td:last-child { font-size: 17px; line-height: 1.35; }
  .p-nut2 td:nth-child(2) { font-size: 13px; line-height: 1.4; }
  .p-nut2 th { font-size: 10px; letter-spacing: .06em; }
  .p-nut2 td { padding-block: 14px; }
  .p-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
  .p-card { width: 100%; }
  .p-card img { height: 190px; }
  .p-card span { font-size: 16px; }
  .p-back { left: max(12px, var(--safe-left)); bottom: calc(12px + var(--safe-bottom)); padding-inline: 12px; font-size: 10px; letter-spacing: .08em; }
  .p-sticky > .p-size { right: max(12px, var(--safe-right)); bottom: calc(12px + var(--safe-bottom)); }
  .p-sticky > .p-size button { padding-inline: 12px; }
  .p-desc { bottom: calc(116px + var(--safe-bottom)); width: calc(100% - 48px); font-size: 15px; }
  .caption { bottom: calc(58px + var(--safe-bottom)); width: calc(100% - 32px); }
  .flavor { font-size: 22px; }
  .prompt { line-height: 1.4; letter-spacing: .16em; }
  .privacy { left: max(12px, var(--safe-left)); font-size: 11px; }
  .counter { right: max(12px, var(--safe-right)); bottom: calc(22px + var(--safe-bottom)); }
}
@media (max-width: 360px) {
  .logo, .m-logo { left: calc(50% + 16px); }
  .logo img, .m-logo img { width: 112px; }
  .logo, .m-logo { padding: 8px; }
  .pg-w, .p-info { width: calc(100% - 32px); }
  .pg-title { font-size: 36px; }
  .pg-h, .pg-quote .pg-h, .pg-cta .pg-h { font-size: 32px; }
  .pg-prod .ph { height: 210px; }
  .pg-prod b { font-size: 20px; }
  .m-list .roll { font-size: 28px; }
  .m-foot { grid-template-columns: minmax(0, 1fr); }
  .p-title { font-size: 40px; }
  .p-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-size.seg button { min-width: 100px; padding-inline: 16px; }
  .p-nut2 td:nth-child(n+2), .p-nut2 th:nth-child(n+2) { padding-left: 6px; }
  .p-nut2 td:first-child, .p-nut2 td:last-child { font-size: 16px; }
}
@media (max-height: 600px) and (min-width: 600px) {
  .logo img, .m-logo img { height: 30px; width: auto; }
  .logo, .m-logo { padding: 8px 14px; }
  .lang, .menu-btn, .m-close { top: 10px; }
  .m-list .roll { font-size: 32px; }
  .m-stage { height: 160px; }
  .pg-hero { padding-block: 100px 70px; }
  .p-head { top: 43%; }
  .p-title { font-size: 48px; }
  .p-note { display: none; }
  .p-desc { bottom: 74px; font-size: 14px; }
  .p-sticky > .p-size { flex-direction: row; }
  .p-sticky > .p-size span { display: none; }
  .caption { bottom: calc(48px + var(--safe-bottom)); }
}
@media (hover: none) {
  .cursor-label { display: none; }
  .pg-prod em { opacity: .85; transform: none; }
  .m-list:hover a:not(:hover) { opacity: 1; }
  .pg-prod:hover img, .p-card:hover img, .pg-mom:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}/* iPhone Safari: let the live background run down under Safari's bottom bar,
   while buttons stay above it. Only when the site is the main page. */
@supports (height: 100lvh) {
  @media (hover: none) and (pointer: coarse) {
    :root { --under-bar: calc(100lvh - 100dvh); }
    html, body { height: 100lvh; }
    .hero { height: 100lvh; bottom: auto; }
    .privacy, .counter, .p-back, .p-sticky > .p-size { bottom: calc(22px + var(--safe-bottom) + var(--under-bar)); }
    .privacy { bottom: calc(8px + var(--safe-bottom) + var(--under-bar)); }
    .caption { bottom: calc(20px + var(--safe-bottom) + var(--under-bar)); }
  }
}