:root{--orange:#e87820;--cream:#fff8ee;--paper:#f5ecdf;--espresso:#24150d;--yellow:#f7cf45;--thai:"Noto Sans Thai",sans-serif;--serif:"Playfair Display","Noto Sans Thai",Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--espresso);font-family:var(--thai)}button,input{font:inherit}img{display:block;max-width:100%}a{color:inherit}.skip-link,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link:focus{z-index:999;width:auto;height:auto;clip-path:none;top:8px;left:8px;background:#fff;padding:10px}.recipe-header{position:relative;z-index:20;height:78px;display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:30px;padding:0 42px;background:var(--espresso);color:#fff}.recipe-brand{width:188px;align-self:start}.recipe-brand img{width:100%;height:auto}.recipe-header nav{display:flex;justify-content:center;gap:clamp(22px,3.3vw,58px)}.recipe-header nav a{display:grid;text-align:center;text-decoration:none;text-transform:uppercase;font-size:18px;letter-spacing:.08em}.recipe-header nav small{font-size:13.5px;letter-spacing:0;text-transform:none;opacity:.65}.language-dropdown{position:absolute;top:15px;right:42px;width:62px;height:42px}.language-dropdown>button,.language-dropdown>div{width:62px;border:1px solid rgba(255,255,255,.75);border-radius:22px;background:var(--orange);font-size:12px;font-weight:800;letter-spacing:.12em}.language-dropdown>button{position:relative;z-index:2;height:42px;cursor:pointer}.language-dropdown>div{position:absolute;top:0;padding:42px 5px 6px}.language-dropdown>div button{display:block;width:100%;height:30px;border:0;border-radius:14px;background:transparent;color:#fff;cursor:pointer}.language-dropdown [aria-current=true]{display:none}.recipe-hero{padding:clamp(75px,9vw,130px) max(42px,calc((100vw - 1420px)/2));background:radial-gradient(circle at 72% 26%,rgba(247,207,69,.18),transparent 24%),var(--espresso);color:#fff}.recipe-hero>p:first-child{margin:0 0 18px;color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.24em}.recipe-hero h1{margin:0;font-family:var(--serif);font-size:clamp(58px,8vw,122px);font-weight:400;line-height:.9}.recipe-hero h1 em{color:var(--orange);font-weight:400}.recipe-lead{max-width:700px;margin:28px 0 44px;color:rgba(255,255,255,.72);font-size:clamp(16px,1.4vw,21px)}.recipe-tools{display:flex;align-items:center;gap:18px}.recipe-tools label{width:min(620px,100%)}.recipe-tools input{width:100%;border:1px solid rgba(255,255,255,.36);border-radius:999px;padding:15px 24px;background:rgba(255,255,255,.08);color:#fff;outline:none}.recipe-tools input::placeholder{color:rgba(255,255,255,.55)}.recipe-tools input:focus{border-color:var(--yellow)}.recipe-tools p{white-space:nowrap}.category-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.category-filters button{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;background:transparent;color:#fff;cursor:pointer}.category-filters button:hover,.category-filters button[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:#160904}.recipe-library{width:min(1420px,calc(100% - 84px));margin:auto;padding:72px 0 110px}.recipe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.recipe-card{min-width:0;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 16px 45px rgba(83,44,13,.09)}.recipe-card button{display:grid;width:100%;height:100%;border:0;padding:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.recipe-card-image{display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(145deg,#fffdf9,#f2e6d9);overflow:hidden}.recipe-card-image img{width:78%;height:78%;object-fit:contain;transition:transform .35s ease}.recipe-card:hover img{transform:scale(1.05)}.recipe-card-copy{padding:19px 20px 22px}.recipe-card-copy small{display:block;margin-bottom:7px;color:#b54d12;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.recipe-card-copy strong{display:block;font-size:17px;line-height:1.45}.empty-state{text-align:center;padding:70px;font-size:20px}.recipe-dialog{width:min(1040px,calc(100% - 32px));max-height:calc(100svh - 32px);border:0;border-radius:30px;padding:0;background:var(--cream);color:var(--espresso);overflow:auto}.recipe-dialog::backdrop{background:rgba(17,6,2,.78);backdrop-filter:blur(7px)}.dialog-close{position:sticky;z-index:4;top:16px;float:right;margin:16px 16px -64px 0;width:44px;height:44px;border:1px solid rgba(36,21,13,.16);border-radius:50%;background:rgba(255,255,255,.85);font-size:26px;cursor:pointer}.dialog-media{display:grid;place-items:center;min-height:360px;padding:55px;background:#fff}.dialog-media img{max-width:min(430px,80%);max-height:430px;object-fit:contain}.dialog-content{padding:45px clamp(25px,6vw,75px) 70px}.dialog-content>p{color:#b54d12;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.dialog-content h2{margin:10px 0 28px;font-family:var(--serif);font-size:clamp(35px,5vw,62px);font-weight:400;line-height:1.08}.legacy-content{display:grid;gap:12px;max-width:800px}.legacy-content p{margin:0;padding:12px 0;border-bottom:1px solid rgba(36,21,13,.12);white-space:pre-line}.legacy-content .legacy-images{display:flex;flex-wrap:wrap;gap:10px}.legacy-content .legacy-images img{max-width:100%;height:auto;object-fit:contain}.source-button{display:inline-flex;margin-top:34px;border-radius:999px;padding:13px 19px;background:var(--espresso);color:#fff;text-decoration:none}footer{display:grid;grid-template-columns:190px 1fr auto;align-items:end;gap:40px;padding:36px 42px;background:var(--orange);color:#fff}footer img{width:188px}footer p{text-align:center}
@media(max-width:1100px){.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.recipe-header{grid-template-columns:190px 1fr auto;padding-inline:24px}.recipe-header nav{gap:18px}.recipe-header nav a{font-size:14px}.language-dropdown{right:18px}}
@media(max-width:760px),(min-width:761px) and (max-width:1180px) and (orientation:portrait){.recipe-header{height:68px;grid-template-columns:1fr auto;padding:0 18px}.recipe-brand{width:155px}.recipe-header nav{display:none}.language-dropdown{top:12px;right:18px}.recipe-hero{padding:70px 18px 55px}.recipe-tools{align-items:flex-start;flex-direction:column}.recipe-tools p{margin:0}.recipe-library{width:calc(100% - 36px);padding-block:38px 70px}.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.recipe-card{border-radius:18px}.recipe-card-copy{padding:13px}.recipe-card-copy strong{font-size:14px}.dialog-media{min-height:260px;padding:35px}.dialog-content{padding-top:30px}footer{grid-template-columns:1fr;justify-items:center;text-align:center;padding:34px 18px}footer p{margin:0}}
@media(max-width:390px){.recipe-grid{grid-template-columns:1fr}}

/* Compact archive intro: keep a complete first card row inside the opening viewport. */
.recipe-card--catalog .recipe-card-image { background: #f7eddd; }
.recipe-card--catalog .recipe-card-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.recipe-card--catalog:hover img { transform: none; }
.recipe-card--gofresh .recipe-card-image img { width: 125%; height: 125%; max-width: none; }

.recipe-hero {
  padding: clamp(30px, 3.2vw, 48px) max(42px, calc((100vw - 1420px) / 2)) 30px;
}
.recipe-hero > p:first-child { margin-bottom: 10px; font-size: 10px; }
.recipe-hero h1 { font-size: clamp(46px, 5vw, 76px); line-height: .92; }
.recipe-lead {
  max-width: 900px;
  margin: 14px 0 18px;
  font-size: clamp(13px, .9vw, 15px);
}
.category-filters {
  flex-wrap: nowrap;
  gap: 9px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.category-filters::-webkit-scrollbar { display: none; }
.category-filters button { flex: 0 0 auto; padding: 7px 13px; }
.recipe-library { padding-top: 28px; }
.recipe-card-image { aspect-ratio: 4 / 3; }

@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .recipe-hero { padding: 28px 18px 24px; }
  .recipe-tools { gap: 8px; }
  .recipe-library { padding-top: 22px; }
}

/* Archive header tools and horizontally scrollable category menu. */
.recipe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 620px);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(40px, 7vw, 120px);
  align-items: end;
}
.recipe-hero > p:first-child,
.recipe-hero > h1,
.recipe-hero > .recipe-lead { grid-column: 1; }
.recipe-hero > p:first-child { grid-row: 1; }
.recipe-hero > h1 { grid-row: 2; }
.recipe-hero > .recipe-lead {
  grid-row: 3;
  margin-bottom: 0;
  white-space: nowrap;
}
.recipe-tools {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: end;
  justify-content: flex-end;
}
.recipe-tools label { width: min(520px, 100%); }
.category-carousel {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.category-carousel::before,
.category-carousel::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 42px;
  pointer-events: none;
}
.category-carousel::before {
  left: 46px;
  background: linear-gradient(90deg, var(--espresso), transparent);
}
.category-carousel::after {
  right: 46px;
  background: linear-gradient(270deg, var(--espresso), transparent);
}
.category-filters { margin-top: 0; }
.category-filters button,
.category-filters button:hover,
.category-filters button[aria-pressed="true"] {
  background: transparent;
}
.category-filters button[aria-pressed="true"] {
  border-color: var(--orange);
  color: var(--orange);
}
.category-scroll {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  padding: 0 0 3px;
  background: transparent;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.category-scroll:hover:not(:disabled),
.category-scroll:focus-visible { border-color: var(--orange); color: var(--orange); }
.category-scroll:disabled { opacity: .2; cursor: default; }
.recipe-card {
  height: min(350px, calc(100svh - 462px));
  min-height: 285px;
}
.recipe-card button { grid-template-rows: minmax(0, 1fr) auto; }
.recipe-card-image { min-height: 0; aspect-ratio: auto; }
.recipe-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1180px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .recipe-hero { grid-template-columns: minmax(0, 1fr); }
  .recipe-hero > p:first-child,
  .recipe-hero > h1,
  .recipe-hero > .recipe-lead,
  .recipe-tools,
  .category-carousel { grid-column: 1; grid-row: auto; }
  .recipe-tools { margin-top: 16px; justify-content: stretch; }
  .recipe-tools label { width: 100%; }
  .recipe-hero > .recipe-lead { white-space: normal; }
  .category-carousel { margin-top: 14px; grid-template-columns: 34px minmax(0,1fr) 34px; gap: 6px; }
  .category-scroll { width: 34px; height: 34px; }
  .recipe-card { height: min(330px, calc(100svh - 438px)); min-height: 275px; }
}

@media (max-width: 520px) {
  .recipe-card { height: min(330px, calc(100svh - 426px)); min-height: 270px; }
}

/* Open recipe collection: unframed drinks with bilingual names below. */
.recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 32px; }
.recipe-card { height: clamp(285px, calc(100svh - 420px), 420px); min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.recipe-card button { grid-template-rows: minmax(0, 1fr) auto; text-align: center; }
.recipe-card button:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.recipe-card-copy { grid-row: 2; min-height: 62px; padding: 10px 8px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; min-width: 0; }
.recipe-card-copy strong { display: block; width: 100%; overflow: hidden; color: var(--espresso); font-family: var(--serif); font-size: clamp(19px, 1.65vw, 25px); font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
html[data-language="th"] .recipe-card-copy strong { font-family: var(--thai); font-size: clamp(16px, 1.35vw, 21px); }
.recipe-card-copy small { display: block; width: 100%; margin: 4px 0 0; overflow: hidden; color: #66513e; font-size: 8px; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
html[data-language="th"] .recipe-card-copy small { font-size: 9px; letter-spacing: 0; text-transform: none; }
.recipe-card-image, .recipe-card--catalog .recipe-card-image { grid-row: 1; background: transparent; overflow: visible; }
.recipe-card-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(75, 42, 19, .2)); }
.recipe-card--zero-calories .recipe-card-image img { filter: none; }
.recipe-card:hover img { transform: none; }

/* Match the Flavor Muse liquid-glass controls. */
.category-filters button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 20px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, .065);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(18, 4, 0, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.category-filters button:hover,
.category-filters button:focus-visible {
  border-color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 22px rgba(18, 4, 0, .16);
  transform: none;
}
.category-filters button[aria-pressed="true"],
.category-filters button[aria-pressed="true"]:hover,
.category-filters button[aria-pressed="true"]:focus-visible {
  border-color: rgba(255, 209, 139, .8);
  background: #e87820;
  color: #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 22px rgba(18, 4, 0, .16);
}
.category-scroll {
  width: 42px;
  height: 42px;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(18, 4, 0, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.category-scroll:hover:not(:disabled),
.category-scroll:focus-visible {
  border-color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 22px rgba(18, 4, 0, .16);
  transform: none;
}

/* Keep the selected category fully visible between the carousel arrows. */
.category-scroll { position: relative; z-index: 3; flex: 0 0 auto; }
.category-filters {
  min-width: 0;
  padding-inline: 18px;
  scroll-padding-inline: 18px;
}

@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .category-carousel { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 10px; }
  .category-scroll { width: 34px; height: 34px; font-size: 24px; }
  .category-carousel::before,
  .category-carousel::after { width: 18px; }
  .category-carousel::before { left: 44px; }
  .category-carousel::after { right: 44px; }
  .category-filters {
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }
}

/* Use the same compact glass language control as the homepage header. */
.recipe-header .language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 62px;
  height: 42px;
  color: #1f1008;
  text-shadow: none;
}
.recipe-header .language-switch span {
  display: block;
  width: 100%;
  text-align: center;
}
.recipe-header .language-switch:hover,
.recipe-header .language-switch:focus-visible,
.recipe-header .language-switch[aria-expanded="true"] {
  color: var(--yellow);
  text-shadow: 0 0 5px rgba(255,221,105,.54), 0 0 12px rgba(232,120,32,.28);
  transform: none;
}

@media (max-width: 360px) {
  .category-filters button {
    padding-inline: 14px;
    font-size: 14px;
  }
}

/* Keep the Recipes footer typography and alignment consistent with the main page. */
footer {
  min-height: 190px;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  align-items: end;
  padding: 36px 42px 48px;
}
footer img { width: 188px; }
footer p,
footer a {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
footer p { justify-self: center; text-align: center; }
footer a { justify-self: end; text-decoration: none; }
footer a:hover { color: var(--yellow); }

@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .recipe-card { height: min(360px, calc(100svh - 410px)); min-height: 300px; }
  .recipe-card-copy { padding-inline: 0; }
  .recipe-card-copy strong { font-size: 18px; }
  .recipe-card-copy small { font-size: 8px; }
  footer { min-height: 0; grid-template-columns: 1fr; padding: 34px 18px; }
  footer p,
  footer a { justify-self: center; }
}
@media (max-width: 390px) {
  .recipe-grid { grid-template-columns: 1fr; }
}

/* Recipe detail: one canvas and a compact three-column ingredient sheet. */
.recipe-dialog:not([open]) { display: none; }
.recipe-dialog[open] {
  width: min(1520px, calc(100% - 32px));
  max-height: calc(100svh - 48px);
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.28fr);
  align-items: stretch;
  overflow: auto;
  scrollbar-width: none;
  position: fixed;
  inset: 0;
  margin: auto;
  height: min(780px, calc(100svh - 48px));
  transform: none;
  transform-origin: center center;
}
.recipe-dialog[open].is-opening,
.recipe-dialog[open].is-opening::backdrop { animation: recipe-dialog-enter .32s ease both; }
.recipe-dialog[open].is-closing,
.recipe-dialog[open].is-closing::backdrop { animation: recipe-dialog-leave .22s ease both; }
.recipe-dialog[open].is-closing { pointer-events: none; }
@keyframes recipe-dialog-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes recipe-dialog-leave { from { opacity: 1; } to { opacity: 0; } }
.recipe-dialog::-webkit-scrollbar { display: none; }
.dialog-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  margin: 0;
  background: var(--cream);
}
.dialog-media {
  min-height: 0;
  padding: clamp(30px, 4vw, 58px);
  background: var(--cream);
}
.dialog-media img { width: 120%; max-width: 624px; max-height: min(89svh, 780px); }
.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(30px, 3.6vw, 58px);
  background: var(--cream);
}
.dialog-content > p[data-dialog-category] { display: none; }
.dialog-content h2 { margin: 0 0 30px; max-width: 100%; font-size: clamp(32px, 3.6vw, 58px); white-space: normal; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
.legacy-content { width: 100%; max-width: none; gap: 18px; }
.ingredient-table { width: 100%; border-top: 1px solid rgba(36,21,13,.18); }
.ingredient-table-headings,
.ingredient-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 72px; gap: 16px; }
.ingredient-table-headings { display: none; }
.ingredient-table-cell { display: block; min-width: 0; }
.ingredient-table-cell img { width: 100%; height: auto; object-fit: contain; object-position: top left; }
.ingredient-format-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(78px, 120px) minmax(64px, 96px); align-items: start; gap: 16px; padding: 3px 0; font-size: 16px; line-height: 1.45; }
.ingredient-format-row span { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ingredient-format-row span:nth-child(2), .ingredient-format-row span:nth-child(3) { font-variant-numeric: tabular-nums; }
.ingredient-format-row--plain { padding: 16px 0; }
.ingredient-format-row--plain span { white-space: pre-line; }
.recipe-instruction { margin: 20px 0 0; color: var(--espresso); font-size: 16px; line-height: 1.55; }
.recipe-notes { margin: 0; color: rgba(36,21,13,.72); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.source-button { align-self: flex-start; margin-top: 26px; }
@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .recipe-dialog[open] { width: calc(100% - 24px); height: calc(100svh - 24px); max-height: calc(100svh - 24px); grid-template-columns: 1fr; }
  .dialog-close { top: 14px; right: 14px; }
  .dialog-media { min-height: min(42svh, 360px); padding: 36px; }
  .dialog-media img { width: 120%; max-width: 624px; max-height: 46svh; }
  .dialog-content { min-height: auto; padding: 28px 22px 38px; }
  .dialog-content h2 { margin-bottom: 22px; }
  .ingredient-table-headings,
  .ingredient-table-row,
  .ingredient-format-row { grid-template-columns: minmax(0, 1fr) 62px 50px; gap: 8px; }
  .ingredient-format-row { font-size: 14px; grid-template-columns: minmax(0, 1fr) minmax(62px, auto) minmax(50px, auto); }
}
@media (max-width: 520px) {
  .ingredient-format-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 4.5px 0; }
  .ingredient-format-row span:first-child { grid-column: 1 / -1; }
  .ingredient-format-row span:nth-child(2),
  .ingredient-format-row span:nth-child(3) { color: rgba(36,21,13,.72); }
}
@media (prefers-reduced-motion: reduce) {
  .recipe-dialog[open].is-opening, .recipe-dialog[open].is-closing { animation-duration: 1ms; }
}

/* Translucent glass navigation for Recipe Collection and Japanese Tea pages. */
.recipe-header {
  position: sticky;
  top: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.09), transparent 32%),
    rgba(31,16,10,.58);
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 34px rgba(20,7,2,.18);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}
.recipe-collection-page .recipe-header {
  margin-bottom: -78px;
}
.recipe-collection-page .recipe-hero {
  padding-top: calc(clamp(30px, 3.2vw, 48px) + 78px);
}
.recipe-collection-page .recipe-header.is-at-page-top {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .recipe-collection-page .recipe-header { margin-bottom: -68px; }
  .recipe-collection-page .recipe-hero { padding-top: 96px; }
}

/* Rounded convex glass controls inspired by the supplied reference. */
.category-filters button,
.category-scroll,
.recipe-tools input {
  border-color: rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.075) 48%, rgba(255,255,255,.12) 100%),
    rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 7px 10px rgba(5,2,1,.28),
    0 15px 26px rgba(5,2,1,.15);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}
.category-filters button {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 22px;
}
.recipe-tools input { border-radius: 999px; }
.category-scroll { border-radius: 50%; }
.category-filters button:hover,
.category-filters button:focus-visible,
.category-scroll:hover:not(:disabled),
.category-scroll:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.11) 50%, rgba(255,255,255,.15)),
    rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.38),
    0 8px 12px rgba(5,2,1,.30),
    0 16px 28px rgba(5,2,1,.17);
}
.category-filters button[aria-pressed="true"],
.category-filters button[aria-pressed="true"]:hover,
.category-filters button[aria-pressed="true"]:focus-visible {
  border-color: rgba(255,225,185,.84);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.04) 48%, rgba(135,45,0,.12)),
    rgba(232,120,32,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.40),
    0 8px 12px rgba(10,3,0,.28),
    0 16px 28px rgba(10,3,0,.16);
}

/* Finer glass edge with a fixed-position gold spark on hover. */
.category-filters button,
.category-scroll,
.recipe-tools input {
  border-width: .5px;
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.24),
    inset 0 -.5px 0 rgba(255,255,255,.24),
    0 7px 10px rgba(5,2,1,.28),
    0 15px 26px rgba(5,2,1,.15);
}
.category-filters button {
  position: relative;
  isolation: isolate;
}
.category-filters button::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("assets/spark-mark-gold.webp") center / contain no-repeat;
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 9px;
  color: #ffe58a;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(.35) rotate(-25deg);
  filter: drop-shadow(0 0 4px rgba(255,211,71,.9));
}
.category-filters button:hover,
.category-filters button:focus-visible,
.category-filters button[aria-pressed="true"]:hover,
.category-filters button[aria-pressed="true"]:focus-visible,
.category-scroll:hover:not(:disabled),
.category-scroll:focus-visible {
  color: #f7cf45;
  text-shadow: 0 0 5px rgba(255,221,105,.54), 0 0 12px rgba(232,120,32,.28);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.30),
    inset 0 -.5px 0 rgba(255,255,255,.30),
    0 8px 12px rgba(5,2,1,.30),
    0 16px 28px rgba(5,2,1,.17);
}
.category-filters button:hover::after,
.category-filters button:focus-visible::after {
  opacity: 1;
  animation: category-gold-spark 1.15s ease-in-out infinite;
}
@keyframes category-gold-spark {
  0%, 100% { opacity: .4; transform: scale(.55) rotate(-25deg); }
  48% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .category-filters button:hover::after,
  .category-filters button:focus-visible::after { animation: none; transform: scale(1); }
}

/* Half-strength hairline edges. */
.category-filters button,
.category-scroll,
.recipe-tools input {
  border-width: .25px;
  border-color: rgba(255,255,255,.21);
  box-shadow:
    inset 0 .25px 0 rgba(255,255,255,.12),
    inset 0 -.25px 0 rgba(255,255,255,.12),
    0 7px 10px rgba(5,2,1,.28),
    0 15px 26px rgba(5,2,1,.15);
}
.category-filters button:hover,
.category-filters button:focus-visible,
.category-scroll:hover:not(:disabled),
.category-scroll:focus-visible {
  border-color: rgba(255,255,255,.325);
  box-shadow:
    inset 0 .25px 0 rgba(255,255,255,.15),
    inset 0 -.25px 0 rgba(255,255,255,.15),
    0 8px 12px rgba(5,2,1,.30),
    0 16px 28px rgba(5,2,1,.17);
}
.category-filters button[aria-pressed="true"],
.category-filters button[aria-pressed="true"]:hover,
.category-filters button[aria-pressed="true"]:focus-visible {
  border-color: rgba(255,225,185,.42);
}

/* Keep the search field anchored while recipe counts and languages change. */
.recipe-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.recipe-tools label {
  width: 100%;
  min-width: 0;
}
.recipe-tools p {
  width: 96px;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* The collection keeps search and filters without showing the recipe total. */
.recipe-tools {
  grid-template-columns: minmax(0, 1fr);
}
.recipe-tools > p {
  display: none;
}

@media (max-width: 1180px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .recipe-tools {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .recipe-tools p {
    width: auto;
    text-align: left;
  }
}

/* Mobile recipe detail: show the whole drink and retain item / amount / unit columns. */
@media (max-width: 520px) {
  .dialog-media {
    min-height: 0;
    padding: 42px 56px 24px;
    overflow: visible;
  }

  .dialog-media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 44svh;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .ingredient-format-row {
    grid-template-columns: minmax(0, 1fr) 58px 46px;
    gap: 8px;
    align-items: start;
    padding: 4.5px 0;
  }

  .ingredient-format-row span:first-child {
    grid-column: auto;
  }

  .ingredient-format-row span:nth-child(2),
  .ingredient-format-row span:nth-child(3) {
    color: rgba(36,21,13,.72);
    text-align: left;
    white-space: nowrap;
  }
}