body.product-page {
  background: #fff8ef;
  color: #24150d;
}

body.product-page[data-product="kawami"] {
  background: #eef9e8;
}

.product-page .site-header {
  position: sticky;
  background: rgba(232,120,32,.98);
}

.product-page .language-dropdown {
  justify-self: end;
}

.product-detail-hero {
  --accent: #ed7d27;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(260px, 500px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  width: min(1780px, calc(100% - 120px));
  margin: 0 auto;
  padding: clamp(72px, 7vw, 104px) 0 clamp(84px, 8vw, 122px);
}

.product-back-link {
  position: absolute;
  top: 92px;
  left: max(60px, calc((100vw - 1780px) / 2));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: #7b6255;
  font-family: var(--thai);
  font-size: 15px;
}

.product-detail-copy .eyebrow {
  margin: 0;
  justify-self: end;
  align-self: center;
  grid-column: 2;
  grid-row: 1;
  color: var(--accent);
  white-space: nowrap;
  font-size: clamp(16px, 1.5vw, 29px);
}

.product-detail-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 5vw, 100px);
  align-items: start;
}

.product-detail-copy h1 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  line-height: .82;
}

.product-detail-copy h1 img {
  display: none;
}

.product-detail-copy h1 span:last-child {
  display: block;
  font-family: var(--thai);
  font-size: clamp(42px, 4.8vw, 78px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px;
}

body.product-page[data-product="kawami"] .product-detail-copy h1 span:last-child,
body.product-page[data-product="zero"] .product-detail-copy h1 span:last-child {
  width: max-content;
  white-space: pre;
}

body.product-page[data-product="kawami"] .product-detail-copy {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(28px, 3vw, 56px);
}

body.product-page[data-product="kawami"] .product-detail-copy .eyebrow {
  justify-self: start;
  font-size: clamp(14px, .95vw, 20px);
}
body.product-page[data-product="kawami"] .product-detail-copy h1 {
  justify-self: start;
  width: 100%;
}
body.product-page[data-product="kawami"] .product-detail-copy h1 img {
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Align the visible logo, compensating for its 31px inset in a 513px canvas. */
body.product-page[data-product="kawami"] .product-detail-copy [data-product-th] > img {
  translate: -6.043% 0;
}

.product-detail-copy p {
  grid-column: 1 / -1;
  max-width: 940px;
  margin: 0;
  font-family: var(--thai);
  font-size: clamp(18px, 1.35vw, 25px);
  line-height: 1.75;
  color: #77665c;
}

.product-info-panel p {
  margin: 0 0 28px;
  font-family: var(--thai);
  font-size: 18px;
  line-height: 1.75;
  color: #77665c;
}

.product-detail-visual {
  order: -1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border-right: 4px solid #24150d;
}

.product-detail-visual::before {
  content: none;
}

.product-detail-visual img {
  position: relative;
  z-index: 1;
  width: min(58%, 320px);
  max-height: 430px;
  object-fit: contain;
  --hero-float-x: 2px;
  --hero-float-y: -12px;
  --hero-float-start-tilt: -.18deg;
  --hero-float-tilt: .28deg;
  filter: drop-shadow(0 7px 7px rgba(56,22,6,.055));
  animation: product-zero-gravity 7.4s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform;
}

.product-hero-stack {
  position: relative;
  width: min(92%, 440px);
  height: clamp(310px, 32vw, 440px);
}

.product-hero-item {
  position: absolute;
  min-width: 0;
  min-height: 0;
  bottom: 0;
  width: 50%;
  height: 92%;
  margin: 0;
  display: grid;
  place-items: end center;
  transform-origin: center bottom;
}

.product-detail-visual .product-hero-item img {
  position: static;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 6px 6px rgba(56,22,6,.05));
  transform: scale(var(--package-scale, 1));
  transform-origin: center bottom;
}

.product-hero-item.is-tea-can { --package-scale: .72; }
.product-hero-item.is-small-bottle { --package-scale: .82; }
.product-hero-item.is-mini-bottle { --package-scale: .5; }

.product-hero-item-1 {
  z-index: 1;
  left: 5%;
  transform: translateY(2%) rotate(-4deg) scale(.82);
}

.product-detail-visual .product-hero-item-1 img {
  --hero-float-x: -3px;
  --hero-float-y: -10px;
  --hero-float-start-tilt: -.28deg;
  --hero-float-tilt: .38deg;
  animation-duration: 6.8s;
  animation-delay: -2.1s;
}

.product-hero-item-2 {
  z-index: 4;
  left: 25%;
  transform: translateY(-1%) scale(1.14);
}

.product-detail-visual .product-hero-item-2 img {
  --hero-float-x: 2px;
  --hero-float-y: -15px;
  --hero-float-start-tilt: .18deg;
  --hero-float-tilt: -.26deg;
  filter: drop-shadow(0 7px 7px rgba(56,22,6,.065));
  animation-duration: 7.9s;
  animation-delay: -4.6s;
}

.product-hero-item-3 {
  z-index: 2;
  right: 5%;
  transform: translateY(2%) rotate(4deg) scale(.82);
}

.product-detail-visual .product-hero-item-3 img {
  --hero-float-x: 3px;
  --hero-float-y: -11px;
  --hero-float-start-tilt: .3deg;
  --hero-float-tilt: -.4deg;
  animation-duration: 7.2s;
  animation-delay: -1.2s;
}

@keyframes product-zero-gravity {
  0%, 100% {
    transform: translate3d(0, 2px, 0) rotate(var(--hero-float-start-tilt)) scale(var(--package-scale, 1));
  }
  50% {
    transform: translate3d(var(--hero-float-x), var(--hero-float-y), 0) rotate(var(--hero-float-tilt)) scale(var(--package-scale, 1));
  }
}

.product-detail-section {
  width: min(1780px, calc(100% - 80px));
  margin: 0 auto;
  padding: 0 0 110px;
}

.product-info-grid {
  display: block;
  border: 0;
}

.product-info-panel {
  display: none;
}

.product-info-panel h2,
.product-list-panel h2,
.product-related h2 {
  margin: 0 0 24px;
  font-size: clamp(34px, 4vw, 72px);
  line-height: .95;
}

.product-info-panel ul,
.product-list-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-info-panel li,
.product-list-panel li {
  font-family: var(--thai);
  font-size: 18px;
  color: #5f5149;
}

.product-info-panel li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(36,21,13,.12);
}

.product-info-panel li:last-child {
  border-bottom: 0;
}

.product-list-panel {
  padding: 0;
}

.product-size-groups {
  display: grid;
  gap: 34px;
}

.product-size-group h3 {
  margin: 0 0 16px;
  font-family: var(--thai);
  font-size: clamp(24px, 2vw, 36px);
  font-weight: 800;
  color: #24150d;
}

.syrup-product-groups {
  display: block;
}

.syrup-category-tabs {
  display: flex;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 4px 16px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.syrup-category-tabs::-webkit-scrollbar { display: none; }

.product-category-navigator { margin: 0 0 clamp(22px, 2.6vw, 34px); }
.product-category-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 4px;
}
.product-category-navigator.is-scrollable:not(.is-at-start) .syrup-category-tabs {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 100%);
}
.product-category-navigator.is-scrollable:not(.is-at-end) .syrup-category-tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
}
.product-category-navigator.is-scrollable:not(.is-at-start):not(.is-at-end) .syrup-category-tabs {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
.product-category-scroll {
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0 0 3px;
  background: transparent;
  color: #ef9d6f;
  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.product-category-scroll:hover:not(:disabled),
.product-category-scroll:focus-visible { color: #e76518; }
.product-category-scroll:disabled { opacity: .28; cursor: default; }
.product-category-progress {
  display: none;
  position: relative;
  height: 5px;
  margin: 8px 30px 0;
  border-radius: 999px;
  background: rgba(231, 101, 24, .12);
  overflow: hidden;
}
.product-category-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(231, 101, 24, .58);
  transition: width .18s ease, transform .18s ease;
}
.product-category-navigator:not(.is-scrollable) .product-category-progress,
.product-category-navigator:not(.is-scrollable) .product-category-scroll { visibility: hidden; }

.syrup-category-tab {
  flex: 0 0 auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(231, 101, 24, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  box-shadow: none;
  scroll-snap-align: start;
  font-family: var(--thai);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #6b3211;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.syrup-category-tab:hover {
  border-color: #e76518;
  transform: translateY(-2px);
}

.syrup-category-tab:focus-visible {
  outline: 3px solid rgba(231, 101, 24, .28);
  outline-offset: 2px;
}

.syrup-category-tab[aria-selected="true"] {
  border-color: #e76518;
  background: #e76518;
  color: #fff;
}

.syrup-category-tab small {
  min-width: 24px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(107, 50, 17, .1);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: inherit;
}

.syrup-category-tab[aria-selected="true"] small {
  background: rgba(255, 255, 255, .2);
}

.syrup-category-section {
  padding-top: 0;
  border-top: 0;
  animation: syrup-panel-enter .28s ease both;
}

.syrup-category-section[hidden] {
  display: none;
}

@keyframes syrup-panel-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-size-group .syrup-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  color: #e76518;
}

.syrup-category-heading small,
.syrup-volume-badge {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(231, 101, 24, .36);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9c4917;
}

.syrup-volume-subgroup {
  margin-top: clamp(24px, 2.6vw, 38px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(231, 101, 24, .2);
}

.syrup-volume-heading {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.product-city-subgroup {
  margin-top: 22px;
}

.product-city-subgroup:first-of-type {
  margin-top: 0;
}

.product-city-subgroup h4 {
  margin: 0 0 14px;
  font-family: var(--thai);
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 800;
  color: #7d6d64;
}

.product-list-panel ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.product-list-panel li {
  min-height: 220px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.62);
  text-align: center;
}

.product-list-panel li img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(56,22,6,.18));
}

.product-list-panel li span {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #24150d;
}

.product-list-panel li.is-275ml-bottle img {
  transform: scale(.5);
  transform-origin: center;
}

.product-list-panel li.is-350ml-bottle img {
  transform: scale(.72);
  transform-origin: center;
}

.product-list-panel li.is-powder-can img {
  transform: scale(.5);
  transform-origin: center;
}

.product-list-panel .product-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
}

.product-list-panel .product-detail-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(230px, 320px));
}

.product-list-panel .product-detail-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(230px, 1fr));
}

.product-list-panel .product-detail-grid[data-count="4"] {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.product-list-panel .product-detail-card {
  min-height: 340px;
  display: grid;
  grid-template-rows: 170px auto auto auto auto;
  align-items: center;
  justify-items: center;
  border-radius: 18px;
  padding: 24px 20px 22px;
  background: rgba(255,255,255,.62);
  text-align: center;
}

.product-list-panel .product-detail-card img {
  width: 100%;
  height: 100%;
  max-width: 210px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(56,22,6,.18));
}

.coffee-tea-groups .product-detail-card img {
  align-self: end;
  transform-origin: center bottom;
}

.coffee-tea-groups .product-detail-card.is-200g-package img {
  scale: .8;
  translate: 0 -20px;
}

/* Product cards are informational (not links), so keep artwork still on hover. */
.product-list-panel .product-detail-card:hover img {
  transform: none;
}

.product-list-panel .product-detail-rule {
  width: 100%;
  height: 1px;
  margin: 18px 0 14px;
  background: rgba(36,21,13,.14);
}

.product-list-panel .product-detail-card strong,
.product-list-panel .product-detail-card em,
.product-list-panel .product-detail-card small {
  display: block;
  font-family: var(--thai);
  line-height: 1.3;
}

.product-list-panel .product-detail-card strong {
  max-width: 95%;
  font-size: 18px;
  font-weight: 700;
  color: #24150d;
}

.product-list-panel .product-detail-card em {
  margin-top: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #5f5149;
}

.product-list-panel .product-detail-card small {
  margin-top: 7px;
  font-size: 15px;
  color: #5f5149;
}

.kawami-product-groups {
  gap: clamp(22px, 2.6vw, 38px);
}

.kawami-matcha-showcase {
  margin-inline: calc((min(1780px, calc(100vw - 80px)) - 100vw) / 2);
  padding: clamp(28px, 3.2vw, 48px) max(40px, calc((100vw - 1780px) / 2 + 40px)) clamp(32px, 3.8vw, 54px);
  background: #eef9e8;
}

.kawami-matcha-showcase > h3 {
  width: min(1780px, calc(100% - 0px));
  margin: 0 auto 16px;
  font-family: var(--thai);
  font-size: clamp(24px, 2vw, 36px);
  font-weight: 800;
  color: #24150d;
}

.product-list-panel .kawami-city-section {
  margin-top: clamp(18px, 2.4vw, 32px);
}

.product-list-panel .kawami-city-section:first-of-type {
  margin-top: 0;
}

.product-list-panel .kawami-city-heading {
  width: fit-content;
  min-width: min(300px, 80vw);
  margin: 0 auto 16px;
  padding: 12px 34px;
  background: #cfdfc0;
  font-family: var(--thai);
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: #081209;
}

.product-list-panel .kawami-matcha-grid {
  display: grid;
  align-items: stretch;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-list-panel .kawami-matcha-grid[data-count="1"] {
  grid-template-columns: minmax(260px, 360px);
}

.product-list-panel .kawami-matcha-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(260px, 360px));
}

.product-list-panel .kawami-matcha-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.product-list-panel .kawami-matcha-grid[data-count="4"] {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.product-list-panel .kawami-matcha-card {
  min-height: 330px;
  display: grid;
  grid-template-rows: 190px auto auto auto auto;
  align-items: center;
  justify-items: center;
  padding: 20px 20px 20px;
  background: rgba(255,255,255,.72);
  border-radius: 18px;
  text-align: center;
}

.product-list-panel .kawami-matcha-card img {
  width: 100%;
  height: 100%;
  max-width: 230px;
  align-self: end;
  object-fit: contain;
  filter: drop-shadow(0 20px 18px rgba(20,45,20,.16));
  transform-origin: center bottom;
}

.product-list-panel .kawami-matcha-card.is-pouch img {
  max-width: 190px;
  max-height: 100%;
}

.product-list-panel .kawami-matcha-card.is-can img {
  max-width: 71px;
  max-height: 34%;
  translate: 0 -22px;
}

.product-list-panel .kawami-matcha-card:hover img {
  transform: translateY(-4px) scale(1.04);
}

.product-list-panel .kawami-matcha-rule {
  width: 100%;
  height: 1px;
  margin: 14px 0 12px;
  background: rgba(60, 99, 55, .22);
}

.product-list-panel .kawami-matcha-card strong,
.product-list-panel .kawami-matcha-card em,
.product-list-panel .kawami-matcha-card small {
  display: block;
  font-family: var(--thai);
  line-height: 1.35;
}

.product-list-panel .kawami-matcha-card strong {
  max-width: 95%;
  font-size: 18px;
  font-weight: 700;
  color: #061108;
}

.product-list-panel .kawami-matcha-card em {
  margin-top: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #34633f;
}

.product-list-panel .kawami-matcha-card small {
  margin-top: 8px;
  font-size: 15px;
  color: #34633f;
}

.product-related {
  width: min(1780px, calc(100% - 80px));
  margin: 0 auto;
  padding-bottom: 110px;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 0;
}

.product-related-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 22px;
  border-right: 1px solid rgba(36,21,13,.16);
  color: inherit;
  transition: color .22s;
  text-decoration: none;
}

.product-related-card:last-child {
  border-right: 0;
}

.product-related-card:hover {
  background: transparent;
  color: #24150d;
}

.product-related-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  transition: transform .28s ease;
  transform-origin: center;
}

.product-related-card:hover img {
  transform: scale(1.5);
}

.product-related-card strong,
.product-related-card small {
  display: block;
  text-decoration: none;
}

.product-related-card strong {
  font-size: 18px;
}

.product-related-card small {
  margin-top: 5px;
  font-family: var(--thai);
  color: #7d6d64;
}

.product-related-card:hover strong,
.product-related-card:hover small {
  text-decoration: none;
}

@media (max-width: 1500px) {
  body.product-page[data-product="kawami"] .product-detail-copy {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  body.product-page[data-product="kawami"] .product-detail-copy .eyebrow,
  body.product-page[data-product="kawami"] .product-detail-copy h1,
  body.product-page[data-product="kawami"] .product-detail-copy p {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

@media (max-width: 1180px) {
  .product-detail-hero,
  .product-info-grid {
    grid-template-columns: 1fr;
  }

  .product-back-link {
    position: static;
    margin-bottom: 26px;
  }

  .product-detail-visual {
    order: 0;
    min-height: 300px;
    border-right: 0;
    border-bottom: 4px solid #24150d;
    padding-bottom: 34px;
    overflow: hidden;
  }

  .product-detail-copy {
    grid-template-columns: 1fr;
  }

  .product-detail-copy .eyebrow,
  .product-detail-copy h1,
  .product-detail-copy p {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .product-info-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(36,21,13,.16);
  }

  .product-list-panel ul,
  .product-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px), (min-width: 721px) and (max-width: 1180px) and (orientation: portrait) {
  .product-page .site-header {
    grid-template-columns: 1fr auto;
  }

  .product-page .desktop-language-switch {
    position: static;
    display: block;
    transform: none;
  }

  .product-detail-hero,
  .product-detail-section,
  .product-related {
    width: calc(100% - 32px);
  }

  .product-detail-hero {
    padding: 20px 0 28px;
    gap: 20px;
  }

  .product-detail-visual {
    min-height: 0;
    padding: 24px 0 36px;
  }

  .product-hero-stack {
    width: min(96%, 420px);
    height: clamp(220px, 64vw, 340px);
  }

  .product-list-panel ul,
  .product-related-grid {
    grid-template-columns: 1fr;
  }

  .product-size-group .syrup-category-heading {
    align-items: center;
    gap: 12px;
  }

  .syrup-category-heading small,
  .syrup-volume-badge {
    font-size: 11px;
  }

  .syrup-category-tabs {
    margin-inline: -2px;
  }

  .syrup-category-tab {
    min-height: 42px;
    padding: 9px 13px;
    font-size: 14px;
  }

  .product-list-panel .syrup-category-section ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-list-panel .syrup-category-section li {
    min-height: 190px;
    padding: 12px 10px;
  }

  .product-list-panel .syrup-category-section li img {
    height: 132px;
  }

  .product-list-panel .syrup-category-section li span {
    font-size: 15px;
  }

  .product-related-card {
    border-right: 0;
    border-bottom: 0;
  }

  .product-related-card:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-visual img,
  .product-detail-visual .product-hero-item img {
    animation: none;
    transform: scale(var(--package-scale, 1));
  }

  .syrup-category-tab,
  .syrup-category-section {
    animation: none;
    transition: none;
  }
}

/* Portrait layouts: keep Coffee & Tea and KAWAMI cards in pairs and let the
   page continue scrolling vertically, matching the other product sections. */
@media (max-width: 1180px) and (orientation: portrait) {
  .product-list-panel .coffee-tea-groups .product-detail-grid,
  .product-list-panel .kawami-product-groups .kawami-matcha-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-list-panel .coffee-tea-groups .product-detail-card,
  .product-list-panel .kawami-product-groups .kawami-matcha-card {
    min-height: 260px;
    grid-template-rows: 132px auto auto auto auto;
    padding: 14px 10px 16px;
  }

  .product-list-panel .coffee-tea-groups .product-detail-card img,
  .product-list-panel .kawami-product-groups .kawami-matcha-card img {
    max-width: 150px;
  }

  .product-list-panel .kawami-product-groups .kawami-matcha-card.is-pouch img {
    max-width: 130px;
  }

  .product-list-panel .kawami-product-groups .kawami-matcha-card.is-can img {
    max-width: 58px;
  }

  .product-list-panel .coffee-tea-groups .product-detail-card strong,
  .product-list-panel .kawami-product-groups .kawami-matcha-card strong {
    font-size: 15px;
  }

  .product-list-panel .coffee-tea-groups .product-detail-card em,
  .product-list-panel .coffee-tea-groups .product-detail-card small,
  .product-list-panel .kawami-product-groups .kawami-matcha-card em,
  .product-list-panel .kawami-product-groups .kawami-matcha-card small {
    font-size: 13px;
  }
}

/* Konjac sizes are separated so the package proportions read accurately. */
.topping-volume-group { margin: 0 0 28px; }
.topping-volume-group h4 {
  margin: 0 0 12px;
  color: #8f4b18;
  font-family: var(--thai);
  font-size: 18px;
  font-weight: 700;
}
.topping-volume-group ul { margin-top: 0; }
.topping-volume-2kg li img { transform: scale(1.14); transform-origin: center bottom; }
.topping-volume-800g li img { transform: scale(.9); transform-origin: center bottom; }

/* Shared product silhouette: artwork rises above the rounded card surface. */
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-can,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-pouch {
  align-self: stretch;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-rows: 200px auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  justify-items: center;
  text-align: center;
  padding: 0 12px 14px;
}
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > strong,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > em,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > small {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: center;
}
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > img {
  align-self: center;
  justify-self: center;
}
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > img,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > strong,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > em,
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card > small {
  grid-column: 1;
  justify-self: center;
}
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-pouch img {
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: 190px;
  margin-bottom: 8px;
  object-fit: contain;
}
.product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-can img {
  height: 71px;
  max-height: none;
  width: 100%;
  max-width: 71px;
  margin-bottom: 8px;
  translate: none;
  object-fit: contain;
}
@media (max-width: 1180px) and (orientation: portrait) {
  .product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-can,
  .product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-pouch {
    grid-template-rows: 150px auto auto auto;
  }
  .product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-pouch img {
    max-width: 130px;
    max-height: 140px;
  }
  .product-page .product-list-panel .kawami-product-groups .kawami-matcha-card.is-can img {
    height: 58px;
    max-width: 58px;
  }
}
.product-page[data-product="powder"] .product-list-panel li:not(.is-powder-can) {
  align-self: start;
}
.product-page[data-product="powder"] .product-list-panel li:not(.is-powder-can) img {
  height: clamp(180px, 18vw, 250px);
  object-position: center bottom;
  margin-bottom: 8px;
}
.product-page .product-list-panel ul {
  row-gap: 32px;
}
.product-page .product-list-panel li {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 18px 24px;
  background: transparent;
  border-radius: 28px;
}
.product-page .product-list-panel li::before {
  content: '';
  position: absolute;
  inset: 32px 0 0;
  z-index: -1;
  border-radius: inherit;
  background: #fffcf9;
  pointer-events: none;
}
.product-page .product-list-panel li img {
  flex: none;
  align-self: center;
  width: 100%;
  max-width: 100%;
  height: clamp(240px, 25vw, 350px);
  object-fit: contain;
  margin: 0 0 12px;
  filter: none;
}
.product-page .product-list-panel .product-detail-rule,
.product-page .product-list-panel .kawami-matcha-rule {
  display: none;
}
.product-page .product-list-panel li strong,
.product-page .product-list-panel li > span {
  margin-top: 0;
}
@media (max-width: 1180px) and (orientation: portrait) {
  .product-page .product-list-panel li {
    padding: 0 10px 18px;
    border-radius: 24px;
  }
  .product-page .product-list-panel li img {
    height: clamp(190px, 38vw, 340px);
  }
  .product-page .product-list-panel li::before {
    top: 24px;
  }
}