/* One sunlit ivory wall gives the open areas texture and diagonal light. */
body { position: relative; isolation: isolate; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(135deg,transparent 29%,#fffce934 34%,#fffde956 37%,transparent 44%,transparent 49%,#fffce92b 53%,transparent 59%),linear-gradient(#fffdf48c,#fffdf48c),url('assets/backgrounds/sunlit-wall.webp');
  background-size: cover;
  background-position: center;
}
.hero.hero-immersive { background: transparent; }
.products { background: transparent; overflow-x: clip; }

/* Six independent ingredient portraits, each emerging from its own field. */
.product-grid { row-gap: 62px; }
.product-card { min-width: 0; }
.product-visual.product-pop-visual {
  position: relative;
  aspect-ratio: 1.02;
  margin-top: 47px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
}
.product-pop-visual {
  --field: #e5eacb;
  --field-line: #bdc9a6;
  --field-radius: 48% 48% 10px 10px / 40% 40% 10px 10px;
  --field-angle: -3deg;
  --cup-angle: -5deg;
  --label-left: 52.2%;
  --label-top: 63%;
  --label-width: 21%;
  --field-photo: url('assets/backgrounds/sunlit-garden.webp');
  --field-position: 45% 50%;
}
.product-pop-backdrop {
  position: absolute;
  inset: 17% 3% 11%;
  overflow: hidden;
  background: var(--field);
  background-image: linear-gradient(#fff9e315,#fff7d315), var(--field-photo);
  background-size: cover;
  background-position: var(--field-position);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  transform: rotate(var(--field-angle));
  z-index: 0;
}
.product-pop-backdrop::after { content: ''; position: absolute; inset: 15px; border: 1px solid var(--field-line); border-radius: inherit; opacity: .65; }
.product-pop-number { position: absolute; left: 9%; top: 20%; font: 700 clamp(90px,12vw,180px)/1 var(--display); color: #fffdf4; opacity: .7; transform: rotate(var(--field-angle)); z-index: 1; }
.product-pop-outline { position: absolute; inset: 12% 6% 18% 0; border: 1px solid var(--field-line); border-radius: 50%; transform: rotate(-17deg); z-index: 1; opacity: .7; }
.product-pop-visual::after { content: ''; position: absolute; bottom: 4%; left: 31%; width: 43%; height: 4%; border-radius: 50%; background: #3a442b; opacity: .13; filter: blur(11px); z-index: 1; }
.product-pop-visual .product-scene {
  position: absolute;
  inset: auto;
  top: -8%;
  left: 50%;
  height: 111%;
  width: auto;
  aspect-ratio: 1122/1402;
  transform: translateX(-50%) rotate(var(--cup-angle));
  transform-origin: 50% 72%;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
  pointer-events: none;
}
.product-pop-visual .product-image { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; filter: drop-shadow(13px 16px 11px #4b512418); }
.product-pop-visual .product-scene .product-logo { left: var(--label-left); top: var(--label-top); width: var(--label-width); height: auto; transform: translate(-50%,-50%); transition: none; }
.product-open:hover .product-pop-visual .product-scene { transform: translateX(-50%) rotate(var(--cup-angle)); }
.product-open:hover .product-pop-visual .product-image { transform: none; }
.product-open:hover .product-pop-visual .product-logo { transform: translate(-50%,-50%); }
.product-open:focus-visible { outline: 2px solid var(--leaf); outline-offset: 10px; border-radius: 8px; }
.product-pop-visual.product-visual--passion { --field: #f1e9b4; --field-line: #d1c47f; --field-radius: 45% 55% 42% 58% / 45% 40% 60% 55%; --field-angle: 5deg; --cup-angle: 4deg; --label-left: 51.5%; --label-top: 62%; --label-width: 18.5%; }
.product-pop-visual.product-visual--lychee { --field: #efe4df; --field-line: #cebeb6; --field-radius: 49% 49% 12px 12px / 43% 43% 12px 12px; --field-angle: 2deg; --cup-angle: -3deg; --label-left: 53%; --label-top: 62%; --label-width: 18.5%; }
.product-pop-visual.product-visual--jasmine { --field: #e1ead7; --field-line: #b3c4a2; --field-radius: 65% 35% 55% 45% / 46% 48% 52% 54%; --field-angle: -5deg; --cup-angle: 5deg; --label-left: 52.5%; --label-top: 62%; --label-width: 18.5%; }
.product-pop-visual.product-visual--berry { --field: #efdedf; --field-line: #cfb7bc; --field-radius: 46% 54% 47% 53% / 40% 42% 58% 60%; --field-angle: 4deg; --cup-angle: -4deg; --label-left: 51.5%; --label-top: 62%; }
.product-pop-visual.product-visual--milk { --field: #eae2d1; --field-line: #c8bca4; --field-radius: 10px 46% 10px 46% / 10px 40% 10px 40%; --field-angle: -3deg; --cup-angle: 4deg; --label-left: 52.8%; --label-top: 63%; }
.product-pop-visual.product-visual--passion { --field-photo: url('assets/backgrounds/sunlit-tea-leaves.webp'); --field-position: 70% 50%; }
.product-pop-visual.product-visual--lychee { --field-photo: url('assets/backgrounds/sunlit-linen.webp'); --field-position: 35% 50%; }
.product-pop-visual.product-visual--jasmine { --field-photo: url('assets/backgrounds/sunlit-tea-leaves.webp'); --field-position: 20% 50%; }
.product-pop-visual.product-visual--berry { --field-position: 85% 50%; }
.product-pop-visual.product-visual--milk { --field-photo: url('assets/backgrounds/sunlit-linen.webp'); --field-position: 75% 50%; }
.product-visual--passion .product-pop-number, .product-visual--jasmine .product-pop-number, .product-visual--milk .product-pop-number { left: auto; right: 9%; }
.product-visual--lychee .product-pop-outline { inset: 16% 0 14% 8%; transform: rotate(14deg); }
.product-visual--berry .product-pop-outline { transform: rotate(20deg); }
.product-info { padding-top: 24px; }
.detail-visual.product-pop-visual { min-height: 590px; max-height: none; aspect-ratio: 1122/1402; overflow: visible; background: transparent; isolation: isolate; }
.detail-visual.product-pop-visual .product-pop-backdrop { inset: 19% 7% 12%; }
.detail-visual.product-pop-visual .product-pop-number { font-size: 125px; top: 23%; }
.detail-visual.product-pop-visual .product-scene { height: 98%; top: 0; transform: translateX(-50%) rotate(var(--cup-angle)); }
.detail-visual.product-pop-visual .product-pop-outline { inset: 17% 5% 17%; }
.detail-copy { position: relative; z-index: 3; }
.product-dialog .dialog-close { z-index: 5; }

/* Contact and policy pages use their own quiet, natural details. */
.address-card-top { min-height: 62px; margin-bottom: 25px; }
.address-location-seal { display: flex; align-items: center; gap: 11px; color: var(--leaf); flex-shrink: 0; transform: rotate(4deg); }
.address-location-seal > svg { width: 37px; height: 45px; }
.address-location-seal > span { font-size: 8px; font-weight: 500; line-height: 1.8; letter-spacing: .12em; }
.cooperate-action-row { gap: 30px; }
.cooperate-sprout { color: var(--leaf); width: 110px; height: 85px; transform: rotate(6deg); }
.cooperate-sprout > svg { width: 100%; height: 100%; }
.privacy-nature-banner { min-height: 105px; padding: 20px 27px; background: #f1f3e7; }
.privacy-nature-banner > .privacy-leaf-mark { width: 60px; height: 75px; color: #6b8054; flex-shrink: 0; }
.privacy-leaf-mark > svg { width: 100%; height: 100%; }

/* Sunlight remains behind the foreground cup and original character. */
.pop-backdrop { background-image: linear-gradient(#f5f5df10,#f5f5df10),url('assets/backgrounds/sunlit-garden.webp'); background-size: cover; background-position: 58% 50%; }
.pop-backdrop::before { opacity: .1; }
.pop-backdrop::after { border-color: #f6f5df8c; }
.pop-backdrop-word { opacity: .48; }
.pop-backdrop-note { color: #fdfbef; text-shadow: 0 1px 4px #3b4b2f; }
.mot-world .mot-world-stage .mot-world-backdrop { background-image: linear-gradient(#f9f4d5a1,#f1eedc9c),url('assets/backgrounds/sunlit-linen.webp'); background-size: cover; background-position: center; }
.visit { background: linear-gradient(120deg,#fffdf40a 32%,#fff5d926 100%); }
.privacy-nature-banner { background: linear-gradient(125deg,#f4f4e6,#fff2ce); }

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not([data-motion=paused]) .product-open:hover .product-pop-visual .product-scene,
  html:not([data-motion=paused]) .product-open:focus-visible .product-pop-visual .product-scene { transform: translate(-50%,-9px) rotate(0deg) scale(1.025); }
}
@media(max-width:1100px) {
  .product-grid { row-gap: 51px; }
  .product-visual.product-pop-visual { margin-top: 39px; }
  .product-pop-number { font-size: 120px; }
  .detail-visual.product-pop-visual { min-height: 560px; }
}
@media(max-width:900px) {
  .product-grid { row-gap: 44px; }
  .product-visual.product-pop-visual { aspect-ratio: .92; margin-top: 34px; }
  .product-pop-number { font-size: 100px; }
  .product-pop-visual .product-scene { height: 107%; top: -6%; }
  .detail-visual.product-pop-visual { min-height: 520px; }
  .address-location-seal > svg { width: 31px; height: 39px; }
  .address-location-seal > span { font-size: 7px; }
}
@media(max-width:600px) {
  .product-grid { row-gap: 34px; }
  .product-visual.product-pop-visual { aspect-ratio: .96; margin-top: 31px; }
  .product-pop-number { font-size: 105px; }
  .product-pop-backdrop { inset: 17% 4% 11%; }
  .product-pop-backdrop::after { inset: 11px; }
  .product-pop-visual .product-scene { height: 110%; top: -7%; }
  .product-info { padding-top: 23px; }
  .detail-visual.product-pop-visual { min-height: 450px; max-height: none; aspect-ratio: .9; }
  .detail-visual.product-pop-visual .product-scene { height: 99%; top: 0; }
  .detail-visual.product-pop-visual .product-pop-number { font-size: 100px; }
  .detail-copy { padding-top: 20px; }
  .address-card-top { min-height: 55px; margin-bottom: 23px; gap: 16px; }
  .address-location-seal { gap: 8px; }
  .address-location-seal > svg { width: 29px; height: 36px; }
  .cooperate-action-row { gap: 25px; flex-wrap: nowrap; }
  .cooperate-sprout { width: 76px; height: 65px; flex-shrink: 0; }
  .privacy-nature-banner { min-height: 100px; padding: 19px; gap: 25px; }
  .privacy-nature-banner > .privacy-leaf-mark { width: 43px; height: 60px; }
}
@media(max-width:360px) {
  .product-pop-number { font-size: 90px; }
  .detail-visual.product-pop-visual { min-height: 400px; }
  .cooperate-action-row { gap: 17px; }
  .cooperate-sprout { width: 63px; }
}

/* V6.2: a compact six-drink menu, with the same sunlit cutout scenes. */
.products {
  --catalog-visual-height: clamp(215px, calc((100svh - 265px) / 2), 330px);
  padding-top: 22px;
  padding-bottom: 20px;
}
.products .section-heading { align-items: center; gap: 32px; }
.products .section-heading > div { flex: 1; min-width: 0; }
.products .section-heading .eyebrow { font-size: 8px; }
.products .section-heading h2 { margin-top: 7px; max-width: none; font-size: clamp(28px, 2.3vw, 34px); line-height: 1.08; }
.products .section-intro { width: 29ch; max-width: 29ch; padding: 0; margin: 0; font-size: 10px; line-height: 1.8; flex-shrink: 0; }
.products .product-toolbar { margin: 12px 0 14px; padding-bottom: 9px; align-items: center; }
.products .product-filters { gap: 6px; }
.products .product-filters button { min-height: 31px; padding: 6px 12px; font-size: 9px; }
.products #product-count { font-size: 9px; }
.products .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 26px; max-width: 1440px; margin-inline: auto; min-height: 0; }
.products .product-visual.product-pop-visual { width: min(100%,380px); height: var(--catalog-visual-height); aspect-ratio: auto; margin: 12px auto 0; }
.products .product-pop-visual .product-scene { height: 112%; top: -8%; }
.products .product-pop-backdrop { inset: 14% 3% 7%; }
.products .product-pop-backdrop::after { inset: 9px; }
.products .product-pop-number { font-size: clamp(48px,5vw,75px); }
.products .product-info { min-height: 47px; padding: 7px 0 6px; gap: 10px; align-items: center; }
.products .product-title-group { min-width: 0; }
.products .product-series { font-size: 7px; line-height: 1.5; letter-spacing: .08em; }
.products .product-info h3 { min-height: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.products .product-arrow { flex-shrink: 0; width: 26px; height: 26px; margin-top: 0; font-size: 17px; }
.products .product-note { margin-top: 14px; font-size: 8px; line-height: 1.6; }
@media(min-width:701px) and (max-width:1100px) {
  .products .product-grid { gap: 15px 18px; }
  .products .section-heading { gap: 22px; }
  .products .section-intro { width: 25ch; max-width: 25ch; }
  .products .product-info h3 { font-size: 14px; }
}
@media(max-width:700px) {
  .products { --catalog-visual-height: clamp(132px,38vw,175px); padding-top: 34px; padding-bottom: 30px; }
  .products .section-heading { display: block; }
  .products .section-heading h2 { font-size: 32px; margin-top: 10px; }
  .products .section-intro { width: auto; max-width: 36ch; margin-top: 13px; font-size: 10px; }
  .products .product-toolbar { margin-top: 18px; margin-bottom: 12px; }
  .products .product-filters button { min-height: 33px; padding: 6px 9px; }
  .products .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .products .product-visual.product-pop-visual { width: 100%; max-width: 230px; margin-top: 12px; }
  .products .product-info { min-height: 54px; gap: 5px; align-items: flex-start; }
  .products .product-info h3 { font-size: 13px; line-height: 1.3; }
  .products .product-series { font-size: 6px; }
  .products .product-arrow { width: 22px; height: 22px; font-size: 14px; margin-top: 7px; }
  .products .product-pop-number { font-size: 54px; }
  .products .product-note { margin-top: 18px; font-size: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .product-pop-visual .product-scene { transition: none; }
}
html[data-motion=paused] .product-pop-visual .product-scene { transition: none; }