.old-products-page {
  background: #f5efe4;
  color: #17231f;
}

.product-showroom {
  --parahat-green: #0f6e56;
  --parahat-deep: #062f29;
  --parahat-gold: #c98a2c;
  --parahat-ruby: #9b2433;
  --parahat-sky: #6ea9ba;
  --parahat-ink: #17231f;
  --parahat-muted: #5f6c67;
  --warm-base: #f5efe4;
  --warm-panel: #fff8ea;
  --section-inline: clamp(1.25rem, 5vw, 5rem);
  --section-block: clamp(5.5rem, 8vw, 8rem);
  --section-max: 1500px;
  --rail-gutter: 0px;
  --header-safe: 96px;
  --nav-safe: 0px;
  --copy-measure: 38rem;
  position: relative;
  z-index: 0;
  padding-top: var(--header-safe);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.72), rgba(245, 239, 228, 0.94) 42%, rgba(238, 231, 216, 0.88)),
    var(--warm-base);
  color: var(--parahat-ink);
  overflow: clip;
}

.product-showroom,
.product-showroom * {
  box-sizing: border-box;
}

.product-showroom ~ .op-hero,
.product-showroom ~ .op-intro,
.product-showroom ~ .op-products-section,
.product-showroom ~ .op-cta-strip {
  display: none;
}

.op-detail[aria-hidden="true"] {
  display: none;
}

.op-detail.open {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(201, 138, 44, 0.15), transparent 34rem),
    radial-gradient(ellipse at 86% 18%, rgba(110, 169, 186, 0.14), transparent 32rem),
    rgba(245, 239, 228, 0.98);
  color: #17231f;
  overflow: auto;
}

.op-detail-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(15, 110, 86, 0.14);
  background: rgba(255, 250, 238, 0.94);
  backdrop-filter: blur(18px);
}

.op-detail-close {
  min-height: 2.6rem;
  border: 1px solid rgba(15, 110, 86, 0.2);
  border-radius: 999px;
  padding: 0.58rem 0.9rem;
  background: #ffffff;
  color: var(--parahat-green);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.op-detail-brand {
  display: grid;
  gap: 0.1rem;
  text-align: right;
  font-weight: 900;
}

.op-detail-brand small {
  color: rgba(23, 35, 31, 0.58);
  font-size: 0.76rem;
}

.op-detail-body {
  width: min(100%, 1360px);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(18rem, 0.48fr) minmax(0, 0.52fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.op-detail-visual {
  position: relative;
  min-height: clamp(26rem, 48vw, 42rem);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(13, 45, 39, 0.16), transparent 47%),
    linear-gradient(145deg, #fffaf0, #eef5ef);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 34px 90px rgba(42, 58, 53, 0.16);
  overflow: hidden;
}

.op-detail-glow {
  position: absolute;
  inset: 8%;
  opacity: 0.72;
  pointer-events: none;
}

.op-carousel {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  overflow: hidden;
}

.op-carousel-track {
  display: flex;
  transition: transform 260ms ease;
}

.op-carousel-slide {
  flex: 0 0 100%;
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  padding-bottom: 1.6rem;
}

.op-carousel-img-wrap {
  width: 100%;
  min-height: clamp(19rem, 38vw, 32rem);
  display: grid;
  place-items: center;
}

.op-carousel-img {
  display: block;
  width: auto;
  max-width: min(100%, 28rem);
  height: clamp(18rem, 37vw, 31rem);
  object-fit: contain;
  filter: drop-shadow(0 26px 26px rgba(12, 33, 29, 0.2));
}

.op-carousel-img.is-small {
  height: clamp(11rem, 22vw, 19rem);
  max-width: min(70%, 18rem);
}

.op-carousel-label {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(23, 35, 31, 0.75);
  font-size: 0.84rem;
  font-weight: 850;
}

.op-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.55rem;
  height: 2.55rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 110, 86, 0.9);
  color: #fff;
  cursor: pointer;
}

.op-carousel-prev { left: 0.75rem; }
.op-carousel-next { right: 0.75rem; }

.op-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  transform: translateX(-50%);
}

.op-carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 110, 86, 0.25);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}

.op-carousel-dot.active {
  width: 1.7rem;
  background: var(--parahat-green);
  box-shadow: 0 1px 4px rgba(15, 110, 86, 0.45);
}

.op-detail-info {
  display: grid;
  gap: 1rem;
}

.op-detail-eyebrow {
  color: var(--parahat-green);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.op-detail-info h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
}

.op-detail-tagline,
.op-detail-desc {
  color: rgba(23, 35, 31, 0.72);
  font-size: 1.04rem;
  line-height: 1.58;
}

.op-detail-divider {
  height: 1px;
  background: rgba(15, 110, 86, 0.14);
}

.op-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.op-detail-tags span {
  border-radius: 999px;
  padding: 0.44rem 0.68rem;
  background: rgba(15, 110, 86, 0.08);
  color: var(--parahat-green);
  font-size: 0.82rem;
  font-weight: 850;
}

.op-detail-specs {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(15, 110, 86, 0.12);
  padding-top: 1.4rem;
}

.op-detail-specs h3 {
  margin: 0 0 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
}

.op-spec-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 0.65fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(15, 110, 86, 0.08);
}

.op-spec-key {
  color: rgba(23, 35, 31, 0.58);
  font-weight: 850;
}

.op-spec-val {
  min-width: 0;
  color: rgba(23, 35, 31, 0.84);
}

.op-spec-subhead {
  margin-top: 1.2rem;
  color: var(--parahat-green);
  font-weight: 900;
}

.product-showroom h1,
.product-showroom h2,
.product-showroom h3,
.product-showroom p {
  margin: 0;
  letter-spacing: 0;
}

.showroom-category-nav {
  position: fixed;
  top: calc(var(--header-safe) + 1rem);
  right: clamp(1.25rem, 3.2vw, 3.25rem);
  z-index: 9000;
  width: 11.25rem;
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0 0.65rem 1rem;
  border-left: 1px solid rgba(15, 110, 86, 0.2);
  background: linear-gradient(90deg, rgba(245, 239, 228, 0), rgba(245, 239, 228, 0.78));
  backdrop-filter: blur(14px);
}

.showroom-category-nav a {
  position: relative;
  display: block;
  padding: 0.42rem 0 0.42rem 0.85rem;
  color: rgba(23, 35, 31, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.18;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.showroom-category-nav a::before {
  content: "";
  position: absolute;
  top: 0.48rem;
  bottom: 0.48rem;
  left: -1.05rem;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background 160ms ease, transform 160ms ease;
}

.showroom-category-nav a:hover,
.showroom-category-nav a:focus-visible,
.showroom-category-nav a.is-active {
  color: var(--parahat-green);
}

.showroom-category-nav a.is-active::before {
  background: var(--parahat-green);
  box-shadow: 0 0 0 4px rgba(15, 110, 86, 0.1);
}

.showroom-category-nav a:focus-visible {
  outline: 2px solid rgba(15, 110, 86, 0.35);
  outline-offset: 4px;
  border-radius: 6px;
}

.showroom-section {
  position: relative;
  isolation: isolate;
  min-height: clamp(44rem, 82svh, 56rem);
  padding: var(--section-block) var(--section-inline);
  scroll-margin-top: calc(var(--header-safe) + var(--nav-safe) + 1rem);
  background: var(--warm-base);
  overflow: hidden;
}

.showroom-section::before,
.showroom-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.showroom-section::before {
  z-index: 1;
  background-position: center;
  background-size: cover;
}

.showroom-section::after {
  z-index: 2;
}

.showroom-section + .showroom-section {
  border-top: 1px solid rgba(15, 110, 86, 0.12);
}

.showroom-inner {
  position: relative;
  z-index: 5;
  width: min(100%, var(--section-max));
  margin-inline: auto;
  padding-right: var(--rail-gutter);
}

.showroom-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.35rem;
  width: clamp(3.5rem, 7vw, 6.5rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--parahat-green), var(--parahat-gold));
  opacity: 0.82;
}

.showroom-scene-grid,
.showroom-hero-grid {
  display: grid;
  grid-template-columns: minmax(19rem, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.showroom-copy {
  width: min(100%, var(--copy-measure));
  display: grid;
  gap: 1.05rem;
}

.showroom-eyebrow {
  color: var(--parahat-green);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.showroom-copy h1,
.showroom-copy h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: #092d27;
  font-weight: 500;
  line-height: 0.98;
}

.showroom-copy h1 {
  font-size: clamp(4.2rem, 7.6vw, 6.9rem);
  max-width: 9.8ch;
}

.showroom-copy h2 {
  font-size: clamp(3.35rem, 6.4vw, 5.8rem);
  max-width: 11ch;
}

.showroom-copy p:not(.showroom-eyebrow) {
  max-width: 38ch;
  color: rgba(23, 35, 31, 0.72);
  font-size: 1.14rem;
  line-height: 1.58;
}

.showroom-actions,
.showroom-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.6rem;
}

.showroom-button {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.88rem 1.32rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 38%),
    var(--parahat-green);
  color: #ffffff;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(15, 110, 86, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.showroom-button:hover,
.showroom-button:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 20px 38px rgba(15, 110, 86, 0.28);
}

.showroom-button:focus-visible,
.showroom-product:focus-visible,
.showroom-mini-link:focus-visible {
  outline: 3px solid rgba(15, 110, 86, 0.34);
  outline-offset: 5px;
}

.showroom-fact {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(15, 110, 86, 0.24);
  color: rgba(23, 35, 31, 0.7);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.1;
}

.showroom-fact strong {
  color: var(--parahat-green);
  font-size: 2.35rem;
  line-height: 1;
}

.showroom-mini-link {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0;
  background: transparent;
  color: var(--parahat-green);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}

.showroom-product-stage {
  position: relative;
  min-width: 0;
  min-height: clamp(30rem, 52vw, 42rem);
  display: grid;
  align-items: end;
  perspective: 1400px;
}

.showroom-surface {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: clamp(1rem, 4vw, 2.7rem);
  z-index: 3;
  height: clamp(6rem, 14vw, 11rem);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.78), rgba(242, 233, 214, 0.82) 48%, rgba(172, 154, 128, 0.34) 72%, transparent 74%),
    radial-gradient(ellipse at 50% 72%, rgba(19, 32, 28, 0.22), transparent 70%);
  box-shadow: inset 0 18px 26px rgba(255, 255, 255, 0.5), 0 28px 60px rgba(35, 41, 35, 0.14);
  transform: rotateX(58deg);
  transform-origin: 50% 70%;
}

.showroom-product-group {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(0.7rem, 2.2vw, 1.8rem);
}

.showroom-product {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: translate 170ms ease, filter 170ms ease;
}

.showroom-product img {
  display: block;
  width: auto;
  height: var(--pack-height, clamp(22rem, 37vw, 33rem));
  max-width: 100%;
  max-height: min(var(--pack-height, 33rem), 70svh);
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(12, 33, 29, 0.22)) saturate(1.03) contrast(1.02);
  pointer-events: none;
  user-select: none;
}

.showroom-product::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.58rem);
  z-index: 30;
  display: none;
  width: max-content;
  max-width: min(17rem, 82vw);
  padding: 0.58rem 0.72rem;
  border-radius: 7px;
  background: rgba(6, 47, 41, 0.96);
  color: #fffaf0;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  box-shadow: 0 18px 30px rgba(7, 29, 25, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.showroom-product:hover,
.showroom-product:focus-visible,
.showroom-product.is-idle-cue {
  translate: 0 -7px;
  filter: drop-shadow(0 16px 18px rgba(15, 110, 86, 0.16));
}

.showroom-product:hover::after,
.showroom-product:focus-visible::after,
.showroom-product.is-idle-cue::after {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
}

.showroom-product-label {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(15, 110, 86, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.72);
  color: rgba(23, 35, 31, 0.76);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 22px rgba(12, 33, 29, 0.08);
}

.pack-xxl { --pack-height: clamp(25rem, 41vw, 35rem); }
.pack-xl { --pack-height: clamp(22.5rem, 36vw, 31rem); }
.pack-lg { --pack-height: clamp(19.5rem, 31vw, 27rem); }
.pack-md { --pack-height: clamp(15rem, 24vw, 21rem); }
.pack-sm { --pack-height: clamp(11.5rem, 17vw, 16rem); }
.pack-xs { --pack-height: clamp(9rem, 13vw, 12.5rem); }

.pack-wide img {
  width: var(--pack-width, clamp(19rem, 32vw, 31rem));
  height: auto;
  max-height: none;
}

.showroom-hero {
  min-height: calc(100svh - var(--header-safe));
}

.showroom-hero::before {
  background-image:
    linear-gradient(90deg, rgba(255, 252, 240, 0.96) 0 38%, rgba(255, 252, 240, 0.5) 61%, rgba(255, 252, 240, 0.72)),
    url("assets/backgrounds/products/juice-tasting-table-stage.jpg"),
    url("assets/photo-scenes/dairy-misty-pasture.jpg");
  background-position: center, 78% 50%, 44% 54%;
  background-size: cover, 52% auto, cover;
  filter: saturate(0.92) contrast(0.96);
}

.showroom-hero::after {
  background:
    radial-gradient(ellipse at 75% 56%, rgba(255, 255, 255, 0.6), transparent 35%),
    radial-gradient(ellipse at 56% 18%, rgba(201, 138, 44, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(245, 239, 228, 0.16), rgba(245, 239, 228, 0.72));
}

.hero-stage {
  min-height: clamp(31rem, 50vw, 41rem);
}

.hero-products {
  align-items: end;
  justify-content: center;
  gap: clamp(0.4rem, 1.4vw, 1.3rem);
  padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.hero-products .product-josh {
  transform: translateY(-0.5rem);
}

.hero-products .product-yeserje {
  transform: translateY(0.2rem);
}

.hero-products .product-suytli {
  transform: translateY(0.55rem);
}

.hero-products .product-dap {
  transform: translateY(1.1rem);
}

.scene-juices::before {
  background-image:
    linear-gradient(90deg, rgba(255, 248, 232, 0.94) 0 37%, rgba(255, 248, 232, 0.46) 61%, rgba(255, 248, 232, 0.76)),
    url("assets/backgrounds/products/juice-tasting-table-stage.jpg");
  background-position: center, 64% 56%;
  filter: saturate(0.98) contrast(0.97);
}

.scene-juices::after {
  background:
    radial-gradient(ellipse at 74% 24%, rgba(245, 176, 61, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(255, 249, 236, 0.1), rgba(245, 239, 228, 0.82));
}

.juice-stage {
  min-height: clamp(34rem, 54vw, 43rem);
  grid-template-rows: 1fr auto;
}

.juice-large-products {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(8rem, 0.55fr) minmax(14rem, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: end;
}

.juice-fan {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.8rem);
}

.juice-fan .showroom-product:nth-child(1) { transform: translateY(0.8rem) rotate(-3deg); }
.juice-fan .showroom-product:nth-child(2) { transform: translateY(-0.2rem); }
.juice-fan .showroom-product:nth-child(3) { transform: translateY(0.8rem) rotate(3deg); }

.juice-small-products {
  align-self: end;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.2rem);
  padding-bottom: clamp(0.4rem, 2vw, 1.1rem);
}

.juice-small-products .showroom-product:nth-child(2) {
  transform: translateY(-0.4rem);
}

.scene-children::before {
  background-image:
    linear-gradient(90deg, rgba(255, 248, 232, 0.94) 0 34%, rgba(255, 248, 232, 0.42) 58%, rgba(255, 248, 232, 0.62)),
    url("assets/photo-scenes/yeserje-orchard-cow.jpg");
  background-position: center, 58% 56%;
  filter: saturate(0.98) brightness(1.06) contrast(0.96);
}

.scene-children::after {
  background:
    linear-gradient(180deg, rgba(255, 247, 228, 0.1), rgba(234, 224, 199, 0.72)),
    radial-gradient(ellipse at 76% 44%, rgba(255, 255, 255, 0.36), transparent 38%);
}

.split-origin-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.6rem, 2vw, 1.8rem);
  align-items: end;
}

.origin-family {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: grid;
  gap: 0.7rem;
  justify-items: center;
}

.origin-family .showroom-product-group {
  min-height: clamp(23rem, 39vw, 31rem);
  align-items: end;
}

.origin-family-title,
.stage-family-title {
  color: rgba(23, 35, 31, 0.7);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.1;
}

.scene-dairy::before {
  background-image:
    linear-gradient(90deg, rgba(246, 250, 246, 0.95) 0 34%, rgba(246, 250, 246, 0.46) 58%, rgba(246, 250, 246, 0.66)),
    url("assets/photo-scenes/dairy-misty-pasture.jpg");
  background-position: center, 55% 54%;
  filter: saturate(0.92) brightness(1.13) contrast(0.94);
}

.scene-dairy::after {
  background:
    linear-gradient(180deg, rgba(230, 240, 238, 0.22), rgba(248, 246, 238, 0.84)),
    radial-gradient(ellipse at 78% 28%, rgba(173, 213, 229, 0.26), transparent 38%);
}

.dairy-stage {
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  gap: clamp(1rem, 3vw, 2.7rem);
}

.dairy-family {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  align-items: end;
}

.dairy-family-products {
  min-height: clamp(24rem, 40vw, 32rem);
  align-items: end;
}

.dairy-family-suytli .showroom-product:nth-child(2) {
  transform: translateY(0.9rem);
}

.dairy-family-dap .showroom-product:nth-child(1),
.dairy-family-dap .showroom-product:nth-child(3) {
  transform: translateY(1rem);
}

.scene-carbonated {
  color: #fff7e7;
  background: #152624;
}

.scene-carbonated::before {
  background-image:
    linear-gradient(90deg, rgba(12, 28, 27, 0.96) 0 34%, rgba(12, 28, 27, 0.56) 58%, rgba(12, 28, 27, 0.84)),
    url("assets/backgrounds/products/carbonated-ice-cooler-stage.jpg");
  background-position: center, 54% 55%;
  filter: saturate(0.9) brightness(0.72) contrast(1.08);
}

.scene-carbonated::after {
  background:
    radial-gradient(ellipse at 71% 23%, rgba(243, 182, 66, 0.22), transparent 30%),
    radial-gradient(ellipse at 83% 56%, rgba(173, 30, 46, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(7, 21, 21, 0.1), rgba(7, 21, 21, 0.82));
}

.scene-carbonated .showroom-eyebrow,
.scene-carbonated .showroom-copy h2,
.scene-carbonated .showroom-copy p:not(.showroom-eyebrow),
.scene-refreshments .showroom-eyebrow,
.scene-refreshments .showroom-copy h2,
.scene-refreshments .showroom-copy p:not(.showroom-eyebrow),
.scene-vitamin .showroom-eyebrow,
.scene-vitamin .showroom-copy h2,
.scene-vitamin .showroom-copy p:not(.showroom-eyebrow),
.scene-meat .showroom-eyebrow,
.scene-meat .showroom-copy h2,
.scene-meat .showroom-copy p:not(.showroom-eyebrow) {
  color: #fff7e7;
}

.cold-stage .showroom-surface,
.energy-stage .showroom-surface {
  background:
    linear-gradient(180deg, rgba(224, 231, 229, 0.62), rgba(126, 137, 134, 0.32)),
    radial-gradient(ellipse at 50% 68%, rgba(0, 0, 0, 0.34), transparent 70%);
  box-shadow: inset 0 18px 22px rgba(255, 255, 255, 0.16), 0 34px 70px rgba(0, 0, 0, 0.36);
}

.carbonated-products {
  gap: clamp(0.8rem, 2.2vw, 2rem);
}

.ok-flavour-group {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.35rem;
}

.ok-flavour-group .showroom-product:nth-child(1),
.ok-flavour-group .showroom-product:nth-child(3) {
  transform: translateY(0.9rem);
}

.scene-refreshments {
  color: #fff7e7;
  background: #1b2c27;
}

.scene-refreshments::before {
  background-image:
    linear-gradient(90deg, rgba(19, 39, 34, 0.94) 0 35%, rgba(19, 39, 34, 0.36) 59%, rgba(238, 179, 86, 0.18)),
    url("assets/backgrounds/products/iced-tea-patio-stage.jpg");
  background-position: center, 60% 58%;
  filter: saturate(1.02) brightness(0.86) contrast(1.02);
}

.scene-refreshments::after {
  background:
    linear-gradient(180deg, rgba(11, 26, 24, 0.12), rgba(11, 26, 24, 0.72)),
    radial-gradient(ellipse at 74% 28%, rgba(238, 168, 64, 0.26), transparent 32%);
}

.tea-products {
  gap: clamp(1.2rem, 4vw, 3.4rem);
}

.tea-products .showroom-product:nth-child(2) {
  transform: translateY(1.25rem);
}

.scene-vitamin {
  color: #fff7e7;
  background: #101616;
}

.scene-vitamin::before {
  background-image:
    linear-gradient(90deg, rgba(12, 15, 15, 0.98) 0 35%, rgba(12, 15, 15, 0.56) 61%, rgba(12, 15, 15, 0.86)),
    url("assets/backgrounds/products/refrigerated-retail-display-stage.jpg");
  background-position: center, 53% 55%;
  filter: saturate(0.76) brightness(0.56) contrast(1.1) blur(1.2px);
}

.scene-vitamin::after {
  background:
    radial-gradient(ellipse at 68% 42%, rgba(176, 42, 45, 0.28), transparent 31%),
    radial-gradient(ellipse at 84% 36%, rgba(178, 211, 67, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(11, 14, 14, 0.08), rgba(11, 14, 14, 0.78));
}

.energy-products {
  gap: clamp(1rem, 4vw, 4rem);
}

.energy-products .showroom-product:nth-child(1) {
  transform: translateY(-0.35rem);
}

.energy-products .showroom-product:nth-child(2) {
  transform: translateY(0.7rem);
}

.scene-meat {
  color: #fff2d8;
  background: #19100c;
}

.scene-meat::before {
  background-image:
    linear-gradient(90deg, rgba(23, 14, 10, 0.94) 0 36%, rgba(23, 14, 10, 0.48) 61%, rgba(23, 14, 10, 0.76)),
    url("assets/photo-scenes/deli-board.jpg");
  background-position: center, 58% 58%;
  filter: saturate(0.86) brightness(0.7) contrast(1.05);
}

.scene-meat::after {
  background:
    radial-gradient(ellipse at 74% 24%, rgba(236, 164, 78, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(22, 13, 9, 0.12), rgba(22, 13, 9, 0.82));
}

.meat-products {
  gap: clamp(1rem, 4vw, 3rem);
}

.scene-b2b {
  background:
    linear-gradient(115deg, #f7f2e8 0 38%, #e9eee9 70%, #d8e0dc);
}

.scene-b2b::before {
  background:
    radial-gradient(ellipse at 72% 30%, rgba(15, 110, 86, 0.16), transparent 36%),
    repeating-linear-gradient(90deg, rgba(46, 69, 66, 0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(46, 69, 66, 0.05) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(222, 224, 215, 0.28));
}

.production-stage {
  min-height: clamp(32rem, 49vw, 40rem);
  align-items: stretch;
}

.production-system {
  --grape: #4c1740;
  --grape-light: #a24a89;
  --apple: #cf9a3e;
  --apple-light: #e8c66f;
  --tomato: #b32a1e;
  --tomato-light: #e2603f;
  position: relative;
  z-index: 5;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(10.5rem, auto) clamp(7rem, 13vw, 10.5rem) auto;
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

.production-system::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -0.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 69, 66, 0.22) 18%, rgba(46, 69, 66, 0.22) 82%, transparent);
  box-shadow: 0 10px 22px rgba(46, 69, 66, 0.08);
}

.tank-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.4rem);
  align-items: end;
}

.tank {
  position: relative;
  min-height: clamp(11rem, 20vw, 15.5rem);
  border-radius: 42% 42% 10px 10px / 12% 12% 10px 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(178, 189, 188, 0.7) 28%, rgba(242, 246, 244, 0.88) 52%, rgba(124, 141, 139, 0.6)),
    linear-gradient(180deg, #eef3f0, #bcc9c4);
  box-shadow:
    inset 14px 0 22px rgba(255, 255, 255, 0.54),
    inset -24px 0 32px rgba(46, 69, 66, 0.24),
    inset 0 -14px 20px rgba(20, 32, 29, 0.22),
    inset 0 10px 14px rgba(255, 255, 255, 0.3),
    0 12px 18px rgba(35, 48, 45, 0.2),
    0 34px 58px rgba(35, 48, 45, 0.26);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.tank:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 14px 0 22px rgba(255, 255, 255, 0.6),
    inset -24px 0 32px rgba(46, 69, 66, 0.28),
    inset 0 -14px 20px rgba(20, 32, 29, 0.24),
    inset 0 10px 14px rgba(255, 255, 255, 0.34),
    0 16px 22px rgba(35, 48, 45, 0.26),
    0 40px 68px rgba(35, 48, 45, 0.32);
}

.tank:hover .tank-light {
  background: var(--liquid-light, #7c8d8b);
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--liquid-light, #7c8d8b) 65%, transparent);
}

.tank[data-tank="grape"] { --liquid: var(--grape); --liquid-light: var(--grape-light); }
.tank[data-tank="apple"] { --liquid: var(--apple); --liquid-light: var(--apple-light); }
.tank[data-tank="tomato"] { --liquid: var(--tomato); --liquid-light: var(--tomato-light); }

@media (prefers-reduced-motion: no-preference) {
  .showroom-section .showroom-copy,
  .showroom-section .showroom-product-stage {
    animation: showroom-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .showroom-section .showroom-product-stage {
    animation-delay: 120ms;
  }

  .showroom-product img {
    transition: transform 220ms ease, filter 220ms ease;
  }

  .showroom-product:hover img,
  .showroom-product:focus-visible img,
  .showroom-product.is-idle-cue img {
    transform: scale(1.018);
  }

  @keyframes showroom-rise {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.tank::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: -0.8rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8fbfa, #aebebb);
  box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.58);
  z-index: 3;
}

.tank::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2rem;
  width: 2px;
  height: 2rem;
  background: rgba(91, 112, 108, 0.55);
}

.tank-window {
  position: absolute;
  left: 26%;
  right: 26%;
  top: 10%;
  bottom: 8%;
  border-radius: 40%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.tank-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4%;
  background: linear-gradient(180deg, var(--liquid-light, #7c8d8b), var(--liquid, #56655f));
}

.tank-fill::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(1px);
}

.tank-light {
  position: absolute;
  top: -0.3rem;
  right: 20%;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: rgba(120, 140, 136, 0.55);
  z-index: 3;
}

.pipe-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.4rem);
}

.pipe-line {
  --neck: 34%;
  position: relative;
  height: 100%;
}

.pipe-line[data-line="grape"] { --liquid: var(--grape); }
.pipe-line[data-line="apple"] { --liquid: var(--apple); }
.pipe-line[data-line="tomato"] { --liquid: var(--tomato); }

.pipe-line svg {
  position: absolute;
  left: var(--neck);
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 60 / 160;
  transform: translateX(-50%) scaleY(1.4);
  transform-origin: top center;
  overflow: visible;
}

.pipe-path {
  fill: none;
  stroke: rgba(148, 163, 158, 0.6);
  stroke-width: 5;
  stroke-linecap: round;
}

.pipe-core {
  fill: none;
  stroke: var(--liquid, #7c8d8b);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.65;
}

.pipe-pulse {
  fill: var(--liquid, #7c8d8b);
}

.pipe-bubble {
  fill: rgba(255, 255, 255, 0.65);
}

.pump {
  position: absolute;
  left: var(--neck);
  bottom: 16%;
  transform: translate(-50%, 50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7dedb, #8a9d98);
  box-shadow: 0 3px 8px rgba(18, 28, 26, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  z-index: 4;
}

.pump-ring {
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  border: 2px solid rgba(24, 38, 35, 0.55);
  border-top-color: var(--liquid, #2e4542);
}

.valve {
  position: absolute;
  left: var(--neck);
  bottom: 42%;
  transform: translateX(-50%);
  width: 0.9rem;
  height: 0.48rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #cfd8d5, #8a9d98);
  box-shadow: 0 2px 4px rgba(18, 28, 26, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  z-index: 4;
}

.gauge {
  position: absolute;
  left: var(--neck);
  top: 22%;
  transform: translate(calc(-50% + 1.05rem), 0);
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c7d0cd 55%, #8a9d98);
  box-shadow: 0 2px 4px rgba(18, 28, 26, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  z-index: 4;
}

.gauge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 0.32rem;
  background: rgba(24, 38, 35, 0.7);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(-24deg);
}

.sample-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  align-items: start;
  margin-top: clamp(-2.2rem, -3.6vw, -1.4rem);
}

.b2b-sample {
  min-width: 0;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  transition: transform 260ms ease;
}

.b2b-sample:hover,
.b2b-sample:focus-visible {
  transform: translateY(-8px);
}

.b2b-sample:hover img,
.b2b-sample:focus-visible img {
  filter: drop-shadow(0 26px 30px rgba(20, 32, 29, 0.34));
}

.b2b-sample img {
  height: clamp(11rem, 20vw, 17rem);
}

.b2b-sample .showroom-product-label {
  width: min(100%, 17rem);
  min-height: 0;
  padding: 0.35rem 0 0;
  border: 0;
  border-top: 1px solid rgba(46, 69, 66, 0.18);
  border-radius: 0;
  background: transparent;
  white-space: normal;
  line-height: 1.18;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(23, 35, 31, 0.68);
}

@media (prefers-reduced-motion: no-preference) {
  .production-system.is-pumping .tank[data-tank="grape"] .tank-fill {
    animation: tank-fill-grape 1.8s cubic-bezier(0.22, 0.8, 0.32, 1) forwards;
  }

  .production-system.is-pumping .tank[data-tank="apple"] .tank-fill {
    animation: tank-fill-apple 2.6s cubic-bezier(0.4, 0.7, 0.3, 1) forwards;
  }

  .production-system.is-pumping .tank[data-tank="tomato"] .tank-fill {
    animation: tank-fill-tomato 2.3s cubic-bezier(0.3, 0.75, 0.3, 1) forwards;
  }

  .production-system.is-pumping .tank-light {
    animation: tank-light-glow 2.4s ease-in-out infinite;
  }

  .production-system.is-pumping .pipe-line[data-line="grape"] .pump-ring {
    animation: pump-spin 1.3s linear infinite;
  }

  .production-system.is-pumping .pipe-line[data-line="apple"] .pump-ring {
    animation: pump-spin 2.1s linear infinite;
  }

  .production-system.is-pumping .pipe-line[data-line="tomato"] .pump-ring {
    animation: pump-spin 1.8s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tank[data-tank="grape"] .tank-fill { height: 58%; }
  .tank[data-tank="apple"] .tank-fill { height: 64%; }
  .tank[data-tank="tomato"] .tank-fill { height: 52%; }
  .pipe-pulse { display: none; }
  .tank-light { background: #3fae7c; }
}

@keyframes tank-fill-grape {
  from { height: 4%; }
  to { height: 58%; }
}

@keyframes tank-fill-apple {
  from { height: 4%; }
  to { height: 64%; }
}

@keyframes tank-fill-tomato {
  from { height: 4%; }
  to { height: 52%; }
}

@keyframes tank-light-glow {
  0%, 100% { background: rgba(120, 140, 136, 0.55); box-shadow: 0 0 0 rgba(15, 110, 86, 0); }
  50% { background: #3fae7c; box-shadow: 0 0 6px rgba(63, 174, 124, 0.75); }
}

@keyframes pump-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 1180px) {
  .product-showroom {
    --rail-gutter: 9.75rem;
  }
}

@media (max-width: 1179px) {
  .product-showroom {
    --header-safe: 84px;
    --nav-safe: 54px;
    padding-top: var(--header-safe);
  }

  .showroom-category-nav {
    position: sticky;
    top: var(--header-safe);
    width: auto;
    right: auto;
    z-index: 9000;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.62rem var(--section-inline);
    border: 0;
    border-bottom: 1px solid rgba(15, 110, 86, 0.14);
    background: rgba(250, 246, 235, 0.96);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .showroom-category-nav::-webkit-scrollbar {
    display: none;
  }

  .showroom-category-nav a {
    flex: 0 0 auto;
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(15, 110, 86, 0.16);
    border-radius: 999px;
    padding: 0.5rem 0.78rem;
    background: rgba(255, 255, 255, 0.54);
    white-space: nowrap;
  }

  .showroom-category-nav a::before {
    inset: auto 0.8rem 0.18rem;
    width: auto;
    height: 2px;
  }

  .showroom-category-nav a.is-active {
    background: rgba(15, 110, 86, 0.08);
  }

  .showroom-scene-grid,
  .showroom-hero-grid {
    grid-template-columns: 1fr;
  }

  .showroom-copy {
    width: min(100%, 44rem);
  }

  .showroom-copy p:not(.showroom-eyebrow) {
    max-width: 46ch;
  }

  .showroom-product-stage {
    min-height: clamp(27rem, 58vw, 39rem);
  }

  .showroom-section {
    min-height: auto;
  }

  .showroom-section::before {
    background-position: center;
  }
}

@media (max-width: 760px) {
  .product-showroom {
    --nav-safe: 60px;
    --section-inline: clamp(1rem, 5vw, 1.5rem);
    --section-block: clamp(3.5rem, 9vw, 4.8rem);
  }

  .showroom-copy {
    gap: 0.85rem;
  }

  .showroom-copy h1 {
    font-size: clamp(3rem, 14vw, 3.8rem);
    line-height: 1;
  }

  .showroom-copy h2 {
    font-size: clamp(2.5rem, 11vw, 3.15rem);
    line-height: 1;
  }

  .showroom-copy p:not(.showroom-eyebrow) {
    font-size: 1rem;
    line-height: 1.52;
  }

  .showroom-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .showroom-button {
    width: 100%;
  }

  .showroom-fact {
    padding-left: 0;
    border-left: 0;
  }

  .showroom-product-stage {
    min-height: auto;
    padding-top: 1.4rem;
    overflow: visible;
  }

  .op-detail-body {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .op-detail-bar {
    min-height: 4.2rem;
  }

  .op-detail-brand {
    max-width: 50vw;
  }

  .op-detail-visual {
    min-height: 24rem;
  }

  .op-spec-row {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }

  .showroom-surface {
    bottom: 1.1rem;
    height: clamp(4.8rem, 20vw, 7rem);
  }

  .showroom-product-group,
  .juice-fan,
  .ok-flavour-group,
  .tea-products,
  .energy-products,
  .meat-products {
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .hero-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0.45rem;
    min-height: 19rem;
  }

  .hero-products .showroom-product-label {
    display: none;
  }

  .pack-xxl { --pack-height: clamp(17.5rem, 72vw, 22rem); }
  .pack-xl { --pack-height: clamp(15.5rem, 62vw, 19rem); }
  .pack-lg { --pack-height: clamp(13.5rem, 54vw, 17rem); }
  .pack-md { --pack-height: clamp(10.75rem, 42vw, 14rem); }
  .pack-sm { --pack-height: clamp(8.75rem, 33vw, 11rem); }
  .pack-xs { --pack-height: clamp(7.25rem, 27vw, 9.2rem); }

  .juice-large-products,
  .split-origin-stage,
  .dairy-stage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .juice-large-products {
    display: grid;
  }

  .juice-small-products {
    padding-bottom: 0;
  }

  .origin-family .showroom-product-group,
  .dairy-family-products {
    min-height: auto;
  }

  .carbonated-products,
  .tea-products,
  .energy-products,
  .meat-products {
    padding-bottom: 1rem;
  }

  .pack-wide img {
    width: min(82vw, 22rem);
  }

  .scene-juices::before,
  .scene-children::before,
  .scene-dairy::before,
  .scene-carbonated::before,
  .scene-refreshments::before,
  .scene-vitamin::before,
  .scene-meat::before {
    background-position: center, center;
  }

  .sample-row,
  .tank-row,
  .pipe-row {
    grid-template-columns: 1fr;
  }

  .tank-row,
  .pipe-row {
    display: none;
  }

  .sample-row {
    gap: 1rem;
  }

  .b2b-sample {
    grid-template-columns: minmax(5.5rem, 0.34fr) minmax(0, 0.66fr);
    align-items: center;
    justify-items: start;
  }

  .b2b-sample img {
    height: clamp(8rem, 38vw, 11rem);
  }

  .b2b-sample .showroom-product-label {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .showroom-copy h1 {
    font-size: 2.95rem;
  }

  .showroom-copy h2 {
    font-size: 2.45rem;
  }

  .showroom-product-label {
    max-width: 10.5rem;
    white-space: normal;
    line-height: 1.15;
  }

  .hero-products {
    gap: 0.25rem;
  }

  .pack-xxl { --pack-height: 17.5rem; }
  .pack-xl { --pack-height: 15.5rem; }
  .pack-lg { --pack-height: 13.4rem; }
  .pack-md { --pack-height: 10.8rem; }
  .pack-sm { --pack-height: 8.7rem; }
  .pack-xs { --pack-height: 7.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-button,
  .showroom-product,
  .showroom-product::after,
  .showroom-category-nav a,
  .showroom-category-nav a::before {
    transition: none;
  }
}

/* Product universe hero */
.product-universe {
  min-height: 0;
  height: calc(100svh - 96px);
  padding-block: clamp(3.2rem, 6vw, 5.1rem) clamp(2.7rem, 4.5vw, 4.2rem);
  background:
    radial-gradient(ellipse at 14% 21%, rgba(212, 159, 73, 0.1), transparent 31rem),
    radial-gradient(ellipse at 8% 85%, rgba(18, 112, 86, 0.08), transparent 26rem),
    #f4efe2;
  overflow: hidden;
}

.product-universe::before,
.product-universe::after {
  background: none;
}

.product-universe .showroom-inner::before {
  display: none;
}

.universe-grid {
  --section-max: 1780px;
  grid-template-columns: minmax(19rem, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.7rem, 4vw, 4.2rem);
  align-items: center;
  min-height: min(660px, calc(100svh - var(--header-safe) - 8rem));
  padding-right: calc(var(--rail-gutter) + clamp(0rem, 2vw, 1.6rem));
}

.universe-copy {
  position: relative;
  z-index: 6;
  max-width: 31rem;
  gap: clamp(0.8rem, 1.8vw, 1.15rem);
}

.universe-copy::before {
  content: "";
  position: absolute;
  left: clamp(7rem, 13vw, 13rem);
  top: clamp(6.3rem, 12vw, 9.6rem);
  width: clamp(13rem, 23vw, 24rem);
  height: clamp(8rem, 13vw, 12rem);
  border-top: 1px solid rgba(190, 132, 45, 0.38);
  border-radius: 58% 42% 0 0;
  transform: rotate(-14deg);
  pointer-events: none;
}

.universe-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #0f7b61;
  letter-spacing: 0;
}

.universe-eyebrow::before {
  content: "";
  width: 0.46rem;
  height: 0.46rem;
  border: 1px solid #c48b37;
  border-radius: 999px;
  background: #f4efe2;
  box-shadow: 1.1rem 0 0 -0.19rem #c48b37;
}

.universe-eyebrow::after {
  content: "";
  width: clamp(3rem, 7vw, 7rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c48b37, rgba(196, 139, 55, 0));
}

.universe-copy h1 {
  max-width: 7.5ch;
  color: #06342d;
  font-size: clamp(4.2rem, 8.2vw, 8.2rem);
  line-height: 0.94;
}

.universe-copy h1 span {
  display: block;
  color: #8d7b31;
}

.universe-copy p:not(.showroom-eyebrow) {
  max-width: 430px;
  color: rgba(23, 35, 31, 0.68);
  font-size: clamp(1rem, 1.16vw, 1.16rem);
  line-height: 1.56;
}

.universe-actions {
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  margin-top: 0.95rem;
}

.universe-button {
  min-height: 3.45rem;
  border-radius: 15px;
  padding-inline: 1.28rem;
  background: #0e7b61;
  box-shadow: 0 18px 36px rgba(10, 74, 59, 0.18);
}

.universe-button-secondary {
  border-color: rgba(14, 123, 97, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 238, 0.5)),
    rgba(255, 255, 255, 0.68);
  color: #0b604d;
  box-shadow: 0 12px 26px rgba(10, 74, 59, 0.1);
}

.universe-button span {
  margin-left: 0.42rem;
}

.universe-fact {
  gap: 0.9rem;
  border-left: 1px solid rgba(196, 139, 55, 0.62);
  padding-left: 1.1rem;
  color: rgba(23, 35, 31, 0.62);
}

.universe-fact strong {
  color: #0e7b61;
  font-size: clamp(2.45rem, 3.8vw, 3.2rem);
  font-weight: 900;
}

.universe-fact span {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.universe-stage {
  position: relative;
  min-height: clamp(31rem, 43vw, 38rem);
  display: block;
  perspective: none;
  overflow: visible;
}

.universe-shape {
  position: absolute;
  inset: 2% 1% 7% 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(89, 145, 91, 0.8), transparent 31%),
    linear-gradient(128deg, #0a4b3c 0%, #0d6a51 47%, #0b503f 100%);
  clip-path: polygon(15% 13%, 46% 1%, 84% 9%, 98% 30%, 92% 67%, 68% 92%, 28% 96%, 4% 74%, 0 39%);
  border-radius: 38% 62% 42% 58% / 35% 26% 74% 65%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 32px 80px rgba(4, 39, 32, 0.18);
}

.universe-shape::after {
  content: "";
  position: absolute;
  inset: 1.1rem 1.6rem 2.6rem 2.3rem;
  border: 1px solid rgba(202, 148, 59, 0.54);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 48% 52% 44% 56% / 38% 30% 70% 62%;
  transform: rotate(-5deg);
}

.universe-contours {
  position: absolute;
  inset: 7% 4% 15% 8%;
  z-index: 1;
  opacity: 0.14;
  background:
    repeating-radial-gradient(ellipse at 58% 54%, transparent 0 22px, rgba(244, 239, 226, 0.76) 23px 25px, transparent 26px 47px),
    repeating-radial-gradient(ellipse at 24% 34%, transparent 0 34px, rgba(244, 239, 226, 0.42) 35px 36px, transparent 37px 68px);
  clip-path: polygon(16% 12%, 90% 6%, 98% 76%, 64% 96%, 6% 83%, 0 35%);
}

.universe-number {
  position: absolute;
  right: 7%;
  top: 4%;
  z-index: 1;
  color: rgba(244, 239, 226, 0.11);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 17vw, 16rem);
  line-height: 1;
  pointer-events: none;
}

.universe-caption {
  position: absolute;
  right: -0.2rem;
  top: 22%;
  z-index: 6;
  writing-mode: vertical-rl;
  color: rgba(244, 239, 226, 0.67);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.universe-platform {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 10%;
  z-index: 2;
  height: clamp(6.2rem, 9vw, 8.8rem);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 253, 244, 0.96), rgba(247, 240, 224, 0.94) 48%, rgba(210, 189, 150, 0.42) 68%, transparent 70%),
    linear-gradient(90deg, rgba(197, 142, 55, 0.72), rgba(255, 250, 235, 0.18), rgba(197, 142, 55, 0.68));
  box-shadow: 0 24px 38px rgba(3, 37, 31, 0.22), inset 0 11px 18px rgba(255, 255, 255, 0.52);
  transform: rotateX(58deg) rotateZ(-1.8deg);
  transform-origin: 50% 78%;
}

.universe-gold-path {
  position: absolute;
  left: 12%;
  right: 10%;
  bottom: 19.2%;
  z-index: 6;
  height: 7rem;
  border-bottom: 1px solid rgba(202, 148, 59, 0.78);
  border-radius: 0 0 50% 50%;
  transform: rotate(-1deg);
  pointer-events: none;
}

.universe-world {
  position: absolute;
  z-index: 7;
  width: clamp(8rem, 13vw, 13.5rem);
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: 0;
  overflow: visible;
  transition: transform 280ms ease, filter 280ms ease;
}

.universe-world img {
  position: relative;
  z-index: 3;
  height: var(--universe-pack-height);
  max-height: none;
  filter: drop-shadow(0 24px 24px rgba(4, 30, 25, 0.3));
}

.universe-halo {
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 1;
  width: var(--halo-size, 13rem);
  height: var(--halo-size, 13rem);
  border-radius: 999px;
  background: var(--halo-color);
  opacity: 0.46;
  filter: blur(18px);
  transform: translate(-50%, -50%);
  transition: opacity 280ms ease, scale 280ms ease;
}

.universe-world:hover,
.universe-world:focus-visible {
  transform: translateY(-7px);
}

.universe-world:hover .universe-halo,
.universe-world:focus-visible .universe-halo {
  opacity: 0.68;
  scale: 1.04;
}

.universe-josh {
  --universe-pack-height: clamp(22rem, 31vw, 31rem);
  --halo-size: clamp(13rem, 21vw, 22rem);
  --halo-color: rgba(148, 202, 56, 0.72);
  left: 8%;
  bottom: 15%;
}

.universe-yeserje {
  --universe-pack-height: clamp(16rem, 23vw, 23rem);
  --halo-size: clamp(11rem, 17vw, 18rem);
  --halo-color: rgba(224, 201, 91, 0.58);
  left: 34%;
  bottom: 10%;
}

.universe-suytli {
  --universe-pack-height: clamp(16.8rem, 24vw, 24rem);
  --halo-size: clamp(11rem, 18vw, 18.5rem);
  --halo-color: rgba(169, 217, 236, 0.72);
  left: 58%;
  bottom: 12.8%;
}

.universe-dap {
  --universe-pack-height: clamp(10.5rem, 15vw, 14.5rem);
  --halo-size: clamp(8rem, 12vw, 12rem);
  --halo-color: rgba(214, 72, 73, 0.48);
  left: 80%;
  bottom: 10.5%;
}

.universe-marker {
  position: relative;
  z-index: 4;
  min-width: clamp(6.8rem, 8.5vw, 8.9rem);
  max-width: 9.25rem;
  margin-top: 0.45rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.45rem;
  align-items: baseline;
  color: #06342d;
  text-align: left;
  transition: color 260ms ease;
  text-shadow:
    0 1px 0 rgba(255, 250, 238, 0.95),
    0 0 10px rgba(255, 250, 238, 0.88),
    0 0 18px rgba(255, 250, 238, 0.78);
}

.universe-marker::before {
  content: "";
  position: absolute;
  top: -0.82rem;
  left: 0.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid #d0a158;
  border-radius: 999px;
  background: #0d6a51;
  box-shadow: 0 0 0 4px rgba(208, 161, 88, 0.12);
}

.universe-marker small {
  color: #b57d29;
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 900;
}

.universe-marker strong {
  min-width: 0;
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  line-height: 1.1;
}

.universe-marker em {
  grid-column: 2;
  color: rgba(6, 52, 45, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
}

.universe-marker b {
  grid-column: 2;
  margin-top: 0.22rem;
  color: #0e7b61;
  font-size: 0.72rem;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 260ms ease, transform 260ms ease;
}

.universe-world:hover .universe-marker,
.universe-world:focus-visible .universe-marker {
  color: #062f29;
}

.universe-world:hover .universe-marker b,
.universe-world:focus-visible .universe-marker b {
  opacity: 1;
  transform: translateY(0);
}

html[lang="ru"] .universe-copy {
  max-width: 32rem;
}

html[lang="ru"] .universe-copy h1 {
  max-width: 8.4ch;
  font-size: clamp(3.8rem, 5.55vw, 5.55rem);
}

html[lang="ru"] .universe-marker {
  min-width: clamp(6.5rem, 8vw, 8.2rem);
  max-width: 8.35rem;
}

html[lang="ru"] .universe-marker strong {
  font-size: clamp(0.82rem, 0.92vw, 0.96rem);
}

html[lang="ru"] .universe-marker em {
  font-size: 0.64rem;
}

.universe-decor {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.decor-apple,
.decor-slice {
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 42%, #f4efe2 0 18%, transparent 19%),
    radial-gradient(circle at 48% 50%, #d8e986 0 47%, #70a932 48% 68%, transparent 69%);
  box-shadow: inset -6px -5px 0 rgba(29, 99, 47, 0.2);
}

.decor-apple {
  width: 2.8rem;
  height: 2.1rem;
  left: 0.2rem;
  bottom: 5.7rem;
  transform: rotate(-12deg);
}

.decor-slice {
  width: 2.2rem;
  height: 1.65rem;
  right: 0.2rem;
  bottom: 5.6rem;
  opacity: 0.88;
}

.decor-leaf-a {
  width: 2.1rem;
  height: 0.82rem;
  left: 1.6rem;
  bottom: 8.1rem;
  border-radius: 100% 0;
  background: #72a93d;
  transform: rotate(-24deg);
}

.milk-ribbon {
  position: absolute;
  left: 12%;
  top: 36%;
  z-index: 2;
  width: 9rem;
  height: 6rem;
  border-top: 1.15rem solid rgba(250, 253, 249, 0.68);
  border-radius: 52% 48% 0 0;
  transform: rotate(-18deg);
  pointer-events: none;
}

.decor-grass {
  left: 18%;
  bottom: 5.4rem;
  width: 4rem;
  height: 1.5rem;
  background:
    linear-gradient(72deg, transparent 0 45%, #8dbc57 46% 54%, transparent 55%),
    linear-gradient(104deg, transparent 0 42%, #c0d77c 43% 51%, transparent 52%),
    linear-gradient(86deg, transparent 0 46%, #6da64b 47% 55%, transparent 56%);
}

.decor-strawberry-a,
.decor-strawberry-b {
  border-radius: 60% 60% 70% 70%;
  background:
    radial-gradient(circle at 34% 36%, rgba(255,255,255,0.65) 0 4%, transparent 5%),
    radial-gradient(circle at 58% 52%, rgba(255,255,255,0.55) 0 4%, transparent 5%),
    #cf3f45;
}

.decor-strawberry-a {
  width: 1.3rem;
  height: 1.55rem;
  left: 0.2rem;
  bottom: 4.6rem;
  transform: rotate(-15deg);
}

.decor-strawberry-b {
  width: 1rem;
  height: 1.2rem;
  right: 0.5rem;
  bottom: 4.15rem;
  transform: rotate(14deg);
}

.universe-botanical {
  position: absolute;
  z-index: 1;
  width: clamp(12rem, 20vw, 22rem);
  height: clamp(12rem, 20vw, 22rem);
  opacity: 0.09;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 32%, transparent 0 48%, #0a5c49 49% 50%, transparent 51%),
    radial-gradient(ellipse at 58% 50%, transparent 0 47%, #0a5c49 48% 49%, transparent 50%),
    linear-gradient(40deg, transparent 49%, #0a5c49 50% 51%, transparent 52%);
}

.universe-botanical-left {
  left: -5rem;
  bottom: 7%;
  transform: rotate(-24deg);
}

.universe-botanical-right {
  right: -6rem;
  top: 13%;
  transform: rotate(34deg);
}

@media (max-width: 1440px) {
  .universe-grid {
    padding-right: calc(var(--rail-gutter) + 0.4rem);
    gap: 1.7rem;
  }

  .universe-copy h1 {
    font-size: clamp(3.8rem, 7.2vw, 6.4rem);
  }

  .universe-josh { --universe-pack-height: clamp(20rem, 29vw, 27rem); }
  .universe-yeserje { --universe-pack-height: clamp(15rem, 21vw, 21rem); }
  .universe-suytli { --universe-pack-height: clamp(15.8rem, 22vw, 22rem); }
  .universe-dap { --universe-pack-height: clamp(10rem, 14vw, 13rem); }
}

@media (max-width: 1179px) {
  .product-universe {
    height: auto;
    min-height: 0;
  }

  .universe-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-right: 0;
  }

  .universe-copy {
    max-width: 46rem;
  }

  .universe-copy h1 {
    max-width: 11ch;
  }

  .universe-stage {
    min-height: clamp(34rem, 63vw, 42rem);
  }

  .universe-shape {
    inset: 1% 0 5%;
  }
}

@media (max-width: 760px) {
  .product-universe {
    padding-block: 3.1rem 3.2rem;
  }

  .universe-copy h1 {
    font-size: clamp(3.15rem, 15vw, 4.4rem);
    max-width: 8ch;
  }

  .universe-actions {
    flex-direction: row;
    align-items: center;
  }

  .universe-button {
    width: auto;
  }

  .universe-stage {
    min-height: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14.4rem, 72vw);
    align-items: stretch;
    gap: 1rem;
    margin-inline: calc(var(--section-inline) * -1);
    padding: 1.2rem var(--section-inline) 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .universe-stage::-webkit-scrollbar {
    display: none;
  }

  .universe-shape,
  .universe-contours,
  .universe-number,
  .universe-caption,
  .universe-platform,
  .universe-gold-path {
    display: none;
  }

  .universe-world {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    min-height: 25rem;
    display: grid;
    place-items: end center;
    border-radius: 8px;
    padding: 1rem 0.8rem 1.1rem;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.12), transparent 46%),
      linear-gradient(145deg, #0a4b3c, #0f6e56);
    box-shadow: 0 18px 38px rgba(4, 39, 32, 0.18);
    scroll-snap-align: center;
  }

  .universe-world img {
    height: var(--mobile-pack-height);
  }

  .universe-josh { --mobile-pack-height: 18.5rem; }
  .universe-yeserje { --mobile-pack-height: 16.5rem; }
  .universe-suytli { --mobile-pack-height: 17rem; }
  .universe-dap { --mobile-pack-height: 13rem; }

  .universe-halo {
    top: 42%;
    filter: blur(16px);
  }

  .universe-marker {
    width: 100%;
    margin-top: 0.7rem;
    padding-left: 0.4rem;
  }
}

@media (max-width: 420px) {
  .universe-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .universe-button {
    width: 100%;
  }

  .universe-fact {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .universe-world,
  .universe-halo,
  .universe-marker,
  .universe-marker b,
  .universe-button {
    transition: none;
  }
}

/* Orchard exhibition category scene */
.product-showroom {
  --category-rail-width: 13.5rem;
}

.showroom-category-nav {
  counter-reset: category-nav;
  width: var(--category-rail-width);
  padding: 1.05rem 0.95rem 1.05rem 1.2rem;
  border: 1px solid rgba(15, 110, 86, 0.13);
  border-left-color: rgba(15, 110, 86, 0.22);
  border-radius: 8px;
  background: rgba(250, 246, 235, 0.9);
  box-shadow: 0 18px 46px rgba(36, 49, 41, 0.1);
}

.showroom-category-nav::before {
  content: "ÖNÜM TOPARLARY";
  color: rgba(6, 52, 45, 0.56);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="en"] .showroom-category-nav::before { content: "PRODUCT GROUPS"; }
html[lang="ru"] .showroom-category-nav::before { content: "КАТЕГОРИИ"; }

.showroom-category-nav a {
  display: grid;
  grid-template-columns: 1.45rem 1fr;
  gap: 0.35rem;
  padding: 0.52rem 0.52rem 0.52rem 0;
  border-radius: 999px;
  counter-increment: category-nav;
  color: rgba(23, 35, 31, 0.62);
}

.showroom-category-nav a::before {
  content: counter(category-nav, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: rgba(190, 132, 45, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
}

.showroom-category-nav a.is-active {
  background: rgba(15, 110, 86, 0.09);
  color: #06342d;
}

.showroom-category-nav a.is-active::before {
  color: #0e7b61;
  box-shadow: none;
}

.orchard-juices {
  --orchard-cream: #f4efe2;
  --orchard-green: #063f34;
  --orchard-olive: #6f8135;
  --orchard-gold: #c49343;
  --orchard-copy: #23332e;
  height: calc(100svh - 96px);
  min-height: 0;
  padding: clamp(2.2rem, 4.2vw, 4rem) var(--section-inline);
  background:
    radial-gradient(ellipse at 55% 44%, color-mix(in srgb, var(--orchard-halo) 34%, transparent), transparent 31rem),
    radial-gradient(ellipse at 14% 20%, rgba(196, 147, 67, 0.08), transparent 28rem),
    linear-gradient(135deg, rgba(6, 63, 52, 0.035) 0 1px, transparent 1px 22px),
    var(--orchard-cream);
  overflow: hidden;
}

.orchard-juices::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 16% 42%, transparent 0 44%, rgba(6, 63, 52, 0.08) 45% 46%, transparent 47%),
    radial-gradient(ellipse at 88% 18%, transparent 0 43%, rgba(6, 63, 52, 0.08) 44% 45%, transparent 46%);
}

.orchard-juices::after {
  z-index: 2;
  background:
    repeating-radial-gradient(ellipse at 61% 54%, transparent 0 34px, rgba(6, 63, 52, 0.045) 35px 36px, transparent 37px 68px),
    linear-gradient(90deg, rgba(244, 239, 226, 0.96) 0 29%, transparent 47%);
}

.orchard-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1780px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 30%) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.8rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.orchard-grid::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(0.4rem, 3vw, 1.8rem);
  width: clamp(4rem, 9vw, 8.5rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e7b61, var(--orchard-gold));
}

.orchard-copy {
  position: relative;
  z-index: 8;
  max-width: 31rem;
  gap: clamp(0.8rem, 1.35vw, 1rem);
}

.orchard-chapter {
  position: absolute;
  right: 0;
  top: -2.4rem;
  z-index: -1;
  color: rgba(15, 110, 86, 0.055);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 1;
}

.orchard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #0e7b61;
}

.orchard-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--orchard-gold);
  border-radius: 999px;
}

.orchard-eyebrow::after {
  content: "";
  width: clamp(3rem, 6vw, 6rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orchard-gold), transparent);
}

.orchard-copy h2 {
  max-width: 7.5ch;
  color: #06342d;
  font-size: clamp(3.8rem, 6.2vw, 6.6rem);
  line-height: 0.94;
}

.orchard-copy h2 span:first-child {
  color: #06342d;
}

.orchard-copy h2 span:last-child {
  color: #6f8135;
}

.orchard-copy p:not(.showroom-eyebrow) {
  max-width: 430px;
  color: rgba(35, 51, 46, 0.78);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.55;
}

.orchard-branch-line {
  width: min(100%, 28rem);
  height: 2.9rem;
  margin-block: 0.1rem -0.25rem;
  border-top: 1px solid rgba(196, 147, 67, 0.48);
  border-radius: 55% 45% 0 0;
  transform: rotate(-5deg);
}

.orchard-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.18rem;
  border: 1px solid rgba(15, 110, 86, 0.18);
  border-radius: 999px;
  padding: 0.22rem;
  background: rgba(255, 252, 242, 0.72);
}

.orchard-selector button {
  min-height: 2.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.78rem;
  background: transparent;
  color: rgba(35, 51, 46, 0.72);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.orchard-selector button.is-active {
  background: #0e7b61;
  color: #fff8ea;
  box-shadow: 0 10px 22px rgba(15, 110, 86, 0.18);
}

.orchard-link {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.16rem 0;
  background: transparent;
  color: #0e7b61;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.orchard-stage-wrap {
  position: relative;
  min-width: 0;
}

.orchard-stage {
  position: relative;
  min-height: clamp(33rem, 43vw, 40rem);
  display: block;
  overflow: visible;
}

.orchard-leaf-backdrop {
  position: absolute;
  inset: 0 -1% 6% 0;
  z-index: 0;
  border-radius: 46% 54% 50% 50% / 42% 38% 62% 58%;
  clip-path: polygon(11% 21%, 46% 5%, 82% 9%, 98% 35%, 89% 76%, 55% 96%, 15% 85%, 0 49%);
  background:
    radial-gradient(ellipse at 34% 32%, rgba(137, 171, 75, 0.78), transparent 31%),
    linear-gradient(136deg, #0c473a 0%, #0e6b54 53%, #093d33 100%);
  box-shadow: 0 32px 76px rgba(4, 39, 32, 0.16);
}

.orchard-leaf-backdrop::after {
  content: "";
  position: absolute;
  inset: 1.2rem 2rem 2.2rem;
  border: 1px solid rgba(196, 147, 67, 0.54);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 55% 45% 50% 50%;
}

.orchard-field-lines {
  position: absolute;
  inset: 7% 5% 14%;
  z-index: 1;
  opacity: 0.18;
  background:
    repeating-radial-gradient(ellipse at 47% 52%, transparent 0 24px, rgba(244, 239, 226, 0.62) 25px 26px, transparent 27px 48px),
    linear-gradient(32deg, transparent 49%, rgba(244, 239, 226, 0.45) 50%, transparent 51%);
}

.orchard-halo {
  position: absolute;
  left: 31%;
  top: 36%;
  z-index: 2;
  width: clamp(15rem, 25vw, 24rem);
  height: clamp(15rem, 25vw, 24rem);
  border-radius: 999px;
  background: var(--orchard-halo);
  opacity: 0.42;
  filter: blur(28px);
  transition: background-color 300ms ease, opacity 300ms ease, transform 300ms ease;
}

.orchard-platform,
.orchard-lower-shelf {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
}

.orchard-platform {
  left: 9%;
  right: 8%;
  bottom: 18%;
  height: clamp(5.1rem, 8vw, 7.4rem);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 252, 242, 0.96), rgba(238, 225, 196, 0.76) 57%, rgba(196, 147, 67, 0.38) 67%, transparent 69%);
  box-shadow: 0 26px 42px rgba(4, 39, 32, 0.16);
  transform: rotateX(58deg) rotateZ(-1.8deg);
}

.orchard-lower-shelf {
  left: 23%;
  right: 10%;
  bottom: 3%;
  height: clamp(3.7rem, 6vw, 5.8rem);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 252, 242, 0.92), rgba(235, 221, 190, 0.68) 58%, rgba(196, 147, 67, 0.34) 68%, transparent 70%);
  transform: rotateX(58deg) rotateZ(0.8deg);
}

.orchard-seal {
  position: absolute;
  right: 11%;
  bottom: 17%;
  z-index: 4;
  width: 4.7rem;
  height: 4.7rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 147, 67, 0.56);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.78);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.06em;
}

.orchard-apple,
.orchard-slice {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.orchard-apple {
  left: 13%;
  bottom: 19%;
  width: 2.8rem;
  height: 2.4rem;
  border-radius: 48% 52% 55% 45%;
  background: radial-gradient(circle at 35% 34%, #edf7a7, #9dc54f 52%, #4f8e32 100%);
  box-shadow: inset -0.45rem -0.25rem 0 rgba(27, 91, 36, 0.2), 0 8px 18px rgba(4, 39, 32, 0.16);
}

.orchard-slice {
  left: 18.4%;
  bottom: 18.2%;
  width: 2.4rem;
  height: 1.5rem;
  border-radius: 999px 999px 30% 30%;
  background: radial-gradient(circle at 50% 30%, #f8f2d8 0 44%, #b2ca62 45% 66%, transparent 67%);
  transform: rotate(-10deg);
}

.orchard-vertical-caption {
  position: absolute;
  right: -1rem;
  top: 14%;
  z-index: 7;
  writing-mode: vertical-rl;
  color: rgba(6, 52, 45, 0.45);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.orchard-hero-products {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.orchard-pack {
  position: absolute;
  width: max-content;
  transition: transform 280ms ease, filter 280ms ease, opacity 280ms ease;
}

.orchard-pack img,
.orchard-small-pack img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(4, 39, 32, 0.24));
}

.orchard-pack:hover,
.orchard-pack:focus-visible,
.orchard-small-pack:hover,
.orchard-small-pack:focus-visible {
  transform: translateY(-6px);
}

.orchard-pack-hero {
  left: 11%;
  bottom: 18%;
}

.orchard-pack-hero img {
  height: clamp(22rem, 34vw, 32rem);
}

.orchard-pack-ecil img {
  height: clamp(22rem, 34vw, 32rem);
}

.orchard-ecil-a {
  left: 42%;
  bottom: 18%;
}

.orchard-ecil-b {
  left: 57%;
  bottom: 18%;
}

.orchard-ecil-c {
  left: 72%;
  bottom: 18%;
}

.orchard-marker {
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(196, 147, 67, 0.72);
  border-radius: 999px;
  background: rgba(244, 239, 226, 0.88);
  color: #0e7b61;
  font-size: 0.65rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.orchard-info {
  position: absolute;
  left: 3%;
  bottom: 12%;
  z-index: 8;
  width: clamp(8.4rem, 12vw, 11.2rem);
  display: grid;
  gap: 0.08rem;
  border-left: 2px solid var(--orchard-gold);
  padding: 0.55rem 0 0.55rem 0.78rem;
  background: linear-gradient(90deg, rgba(244, 239, 226, 0.9), rgba(244, 239, 226, 0));
  color: #06342d;
  transition: transform 280ms ease, opacity 220ms ease;
}

.orchard-info span,
.orchard-info em {
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  color: #b47b2a;
}

.orchard-info strong {
  font-size: 1rem;
  line-height: 1.15;
}

.orchard-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.1rem 0 0;
  background: transparent;
  color: #0e7b61;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.orchard-small-rail {
  position: absolute;
  left: 24%;
  right: 7%;
  bottom: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
  gap: clamp(0.55rem, 1.4vw, 1rem);
  align-items: end;
}

.orchard-small-pack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.orchard-small-pack img {
  height: clamp(8rem, 13vw, 12rem);
}

.orchard-small-pack span {
  color: rgba(6, 52, 45, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
}

.orchard-juices[data-orchard-family="josh-small"] {
  --orchard-halo: #e2952f;
}

.orchard-juices[data-orchard-family="ecil"] {
  --orchard-halo: #c99a3f;
}

.orchard-juices[data-orchard-family="josh-small"] .orchard-pack-hero,
.orchard-juices[data-orchard-family="josh-small"] .orchard-pack-ecil,
.orchard-juices[data-orchard-family="ecil"] .orchard-small-rail {
  opacity: 0.42;
}

.orchard-juices[data-orchard-family="josh-small"] .orchard-small-rail,
.orchard-juices[data-orchard-family="ecil"] .orchard-pack-ecil,
.orchard-juices[data-orchard-family="josh-large"] .orchard-pack-hero {
  transform: translateY(-10px);
}

@media (max-width: 1440px) {
  .orchard-grid {
    grid-template-columns: minmax(17rem, 29%) minmax(0, 1fr);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.6rem;
  }

  .orchard-copy h2 {
    font-size: clamp(3.2rem, 5.4vw, 5.5rem);
  }

  .orchard-pack-hero img { height: clamp(20rem, 30vw, 27rem); }
  .orchard-pack-ecil img { height: clamp(20rem, 30vw, 27rem); }
  .orchard-small-pack img { height: clamp(7rem, 10.5vw, 9.6rem); }
}

@media (max-width: 1179px) {
  .showroom-category-nav {
    counter-reset: category-nav;
  }

  .showroom-category-nav::before {
    display: none;
  }

  .orchard-juices {
    height: auto;
    min-height: 0;
  }

  .orchard-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.5rem;
  }

  .orchard-copy {
    max-width: 44rem;
  }

  .orchard-stage {
    min-height: clamp(32rem, 64vw, 41rem);
  }
}

@media (max-width: 760px) {
  .orchard-juices {
    padding-block: 3rem;
  }

  .orchard-copy h2 {
    font-size: clamp(2.75rem, 15vw, 4.2rem);
  }

  .orchard-selector {
    width: 100%;
    overflow-x: auto;
  }

  .orchard-stage {
    min-height: 33rem;
    overflow: hidden;
  }

  .orchard-leaf-backdrop {
    inset: 1rem -5rem 6rem -2rem;
  }

  .orchard-pack-hero,
  .orchard-ecil-a,
  .orchard-ecil-b,
  .orchard-ecil-c {
    left: 50%;
    bottom: 32%;
    transform: translateX(-50%);
  }

  .orchard-pack-hero img {
    height: 21rem;
  }

  .orchard-pack-ecil {
    display: none;
  }

  .orchard-info {
    left: 1rem;
    bottom: 24%;
  }

  .orchard-small-rail {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow-x: auto;
    padding: 0 0.5rem 0.4rem;
    scroll-snap-type: x mandatory;
  }

  .orchard-small-pack {
    flex: 0 0 9rem;
    scroll-snap-align: center;
  }

  .orchard-small-pack img {
    height: 8.4rem;
  }

  .orchard-seal,
  .orchard-vertical-caption {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .orchard-halo,
  .orchard-pack,
  .orchard-small-pack,
  .orchard-info {
    transition: none;
  }
}

/* Joş pour story: reversible scroll-scrub, pinned within the juices section */
.orchard-scrub-track {
  position: relative;
}

.orchard-family-layer {
  position: absolute;
  inset: 0;
}

.orchard-pour-stage {
  position: absolute;
  inset: 0 -1% 6% 0;
  z-index: 4;
  clip-path: polygon(11% 21%, 46% 5%, 82% 9%, 98% 35%, 89% 76%, 55% 96%, 15% 85%, 0 49%);
  opacity: 0;
  pointer-events: none;
}

.orchard-pour-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 58% at 50% 44%, transparent 38%, rgba(9, 61, 51, 0.6) 92%);
  mix-blend-mode: multiply;
}

.orchard-pour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  mask-image: radial-gradient(60% 56% at 50% 44%, #000 52%, transparent 94%);
  -webkit-mask-image: radial-gradient(60% 56% at 50% 44%, #000 52%, transparent 94%);
}

@media (prefers-reduced-motion: no-preference) {
  /* overflow: hidden on an ancestor prevents position: sticky from ever
     engaging (the element has no real scroll container to stick against),
     which is why the stage used to drift off-screen instead of staying put. */
  .orchard-juices {
    --scrub-top: 96px;
    height: auto;
    overflow: visible;
  }

  /* phones clear the sticky site header AND the category rail below it */
  @media (max-width: 1179px) {
    .orchard-juices {
      --scrub-top: calc(var(--header-safe, 84px) + var(--nav-safe, 54px));
      --scrub-run: 150vh;
    }
  }

  .orchard-scrub-track {
    height: calc(100svh - var(--scrub-top) + var(--scrub-run, 56vh));
  }

  .orchard-grid {
    position: sticky;
    top: var(--scrub-top);
    height: calc(100svh - var(--scrub-top));
  }

  /* Single master timeline: every layer below reads the same --sp (0..1)
     progress value set once per frame in JS. Ranges are chosen so
     consecutive phases always overlap — there is no point where two
     adjacent layers are both fully transparent.

     0.00–0.30  intentional hold — full composition, untouched
     0.30–0.45  Eçil + small cartons recede, hero Joş stays put
     0.40–0.50  hero/family hands off to the pour stage (quick crossfade)
     0.45–0.85  pour video scrubs with scroll
     0.85–1.00  final frame holds, then the section releases */

  .orchard-copy {
    opacity: clamp(0.55, calc(1 - (var(--sp, 0) - 0.3) * 0.643), 1);
  }

  /* phase 2 — "Joş focus": secondary packs recede, hero stays put */
  .orchard-pack-ecil,
  .orchard-small-rail {
    opacity: clamp(0.14, calc(1 - (var(--sp, 0) - 0.3) / 0.15), 1);
    transition: none;
  }

  /* phase 3 — whole family layer gives way to the pour stage */
  .orchard-family-layer {
    opacity: clamp(0, calc(1 - (var(--sp, 0) - 0.42) / 0.08), 1);
    transform: translateY(calc(max(var(--sp, 0) - 0.3, 0) * -4%)) scale(calc(1 - max(var(--sp, 0) - 0.3, 0) * 0.07));
  }

  .orchard-pour-stage {
    opacity: clamp(0, calc((var(--sp, 0) - 0.4) / 0.1), 1);
    transform: scale(calc(0.96 + var(--sp, 0) * 0.04));
  }

  .orchard-info {
    opacity: clamp(0.4, calc(1 - (var(--sp, 0) - 0.3) * 0.643), 1);
  }
}

/* Phones now run the same scroll-scrubbed timeline as the desktop, so the old
   fire-once fallback (and its 900ms transitions, which lagged a frame behind
   every scroll tick) is gone. Reduced motion is handled below. */

@media (prefers-reduced-motion: reduce) {
  .orchard-pour-stage {
    opacity: 0.9;
  }

  .orchard-family-layer {
    opacity: 0.55;
  }
}

/* Ýeserje orchard-to-table category scene */
.legacy-children-section[hidden] {
  display: none !important;
}

.yeserje-world {
  --yeserje-cream: #f5efdf;
  --yeserje-ink: #07362f;
  --yeserje-green: #0d725d;
  --yeserje-olive: #78883e;
  --yeserje-gold: #c49445;
  --yeserje-milk: #e7f0ec;
  height: calc(100svh - 96px);
  min-height: 43rem;
  padding: clamp(2.2rem, 4vw, 4.2rem) var(--section-inline);
  background:
    radial-gradient(ellipse at 70% 48%, rgba(167, 199, 88, 0.2), transparent 31rem),
    radial-gradient(ellipse at 42% 82%, rgba(196, 148, 69, 0.15), transparent 26rem),
    linear-gradient(135deg, rgba(13, 114, 93, 0.032) 0 1px, transparent 1px 26px),
    var(--yeserje-cream);
  overflow: hidden;
}

.yeserje-world::before {
  z-index: 1;
  opacity: 0.9;
  background:
    linear-gradient(90deg, rgba(245, 239, 223, 0.96) 0 22%, rgba(245, 239, 223, 0.35) 44%, rgba(245, 239, 223, 0.92) 100%),
    url("assets/photo-scenes/yeserje-orchard-cow.jpg");
  background-position: center, 66% 48%;
  background-size: cover, cover;
  clip-path: polygon(57% 11%, 88% 0, 100% 18%, 100% 73%, 83% 92%, 54% 82%, 48% 43%);
  filter: saturate(1.04) brightness(1.05) contrast(0.96);
}

.yeserje-world::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 24% 46%, rgba(245, 239, 223, 0.98) 0 25%, rgba(245, 239, 223, 0.62) 44%, transparent 66%),
    repeating-radial-gradient(ellipse at 63% 58%, transparent 0 40px, rgba(7, 54, 47, 0.04) 41px 42px, transparent 43px 80px);
}

.yeserje-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1780px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 30%) minmax(0, 1fr);
  gap: clamp(1.6rem, 2.8vw, 3.2rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.yeserje-copy {
  position: relative;
  z-index: 8;
  max-width: 33rem;
  gap: clamp(0.82rem, 1.2vw, 1rem);
}

.yeserje-chapter {
  position: absolute;
  right: -0.2rem;
  top: 5.2rem;
  z-index: -1;
  color: rgba(13, 114, 93, 0.055);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.yeserje-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #0c8068;
}

.yeserje-eyebrow span {
  color: var(--yeserje-gold);
  font-weight: 900;
}

.yeserje-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--yeserje-gold);
  border-radius: 999px;
}

.yeserje-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 7vw, 7rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yeserje-gold), transparent);
}

.yeserje-copy h2 {
  color: var(--yeserje-ink);
  font-size: clamp(4rem, 7vw, 7.2rem);
  line-height: 0.94;
}

.yeserje-copy p:not(.showroom-eyebrow) {
  max-width: 29rem;
  color: rgba(35, 51, 46, 0.78);
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.62;
}

.yeserje-support {
  color: rgba(7, 54, 47, 0.66) !important;
  font-size: clamp(0.82rem, 0.95vw, 0.94rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.yeserje-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(13, 114, 93, 0.18);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 252, 242, 0.76);
  box-shadow: 0 16px 34px rgba(7, 54, 47, 0.08);
}

.yeserje-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1rem;
  background: transparent;
  color: rgba(35, 51, 46, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.yeserje-selector button.is-active {
  background: var(--yeserje-green);
  color: #fff8ea;
  box-shadow: 0 12px 24px rgba(13, 114, 93, 0.2);
}

.yeserje-stage-wrap {
  position: relative;
  min-width: 0;
}

.yeserje-stage {
  position: relative;
  min-height: clamp(35rem, 44vw, 42rem);
  overflow: visible;
}

.yeserje-orchard-window,
.yeserje-landscape,
.yeserje-flow,
.yeserje-pedestal,
.yeserje-botanical,
.yeserje-seal,
.yeserje-caption {
  position: absolute;
  pointer-events: none;
}

.yeserje-orchard-window {
  right: 3%;
  top: 2%;
  z-index: 0;
  width: min(42%, 26rem);
  height: 54%;
  border: 1px solid rgba(13, 114, 93, 0.14);
  border-radius: 54% 46% 48% 52% / 44% 54% 46% 56%;
  background:
    linear-gradient(180deg, rgba(245, 239, 223, 0.15), rgba(245, 239, 223, 0.52)),
    url("assets/photo-scenes/yeserje-orchard-cow.jpg") center / cover;
  box-shadow: 0 26px 58px rgba(7, 54, 47, 0.12);
  opacity: 0.78;
}

.yeserje-landscape {
  inset: 7% 0 11% 0;
  z-index: 1;
  clip-path: polygon(12% 27%, 38% 5%, 70% 10%, 96% 32%, 88% 79%, 57% 96%, 18% 86%, 0 52%);
  border-radius: 42% 58% 51% 49% / 38% 42% 58% 62%;
  background:
    radial-gradient(ellipse at 34% 34%, rgba(164, 202, 74, 0.54), transparent 30%),
    radial-gradient(ellipse at 76% 49%, rgba(231, 240, 236, 0.7), transparent 31%),
    linear-gradient(135deg, rgba(12, 106, 86, 0.95), rgba(6, 63, 52, 0.92) 55%, rgba(120, 136, 62, 0.7));
  box-shadow: 0 34px 74px rgba(7, 54, 47, 0.18);
  opacity: 0.98;
}

.yeserje-botanical {
  z-index: 2;
  opacity: 0.2;
  border: 1px solid rgba(255, 248, 232, 0.8);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.yeserje-botanical-apple {
  left: 8%;
  top: 17%;
  width: 38%;
  height: 40%;
  transform: rotate(-17deg);
}

.yeserje-botanical-grain {
  right: 12%;
  top: 21%;
  width: 30%;
  height: 45%;
  transform: rotate(14deg);
}

.yeserje-flow {
  left: 12%;
  right: 8%;
  bottom: 26%;
  z-index: 3;
  height: 9rem;
  border-bottom: 1px solid rgba(196, 148, 69, 0.62);
  border-radius: 50%;
  transform: rotate(-2deg);
}

.yeserje-flow::before,
.yeserje-flow::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid rgba(255, 248, 232, 0.88);
  border-radius: 999px;
  background: var(--yeserje-green);
  box-shadow: 0 0 0 5px rgba(13, 114, 93, 0.12);
}

.yeserje-flow::before { left: 30%; }
.yeserje-flow::after { right: 27%; background: var(--yeserje-gold); }

.yeserje-pedestal {
  left: 8%;
  right: 5%;
  bottom: 6%;
  z-index: 4;
  height: clamp(6rem, 8.4vw, 8rem);
  border-top: 1px solid rgba(196, 148, 69, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 48% 18%, rgba(255, 252, 242, 0.98), rgba(236, 224, 197, 0.78) 58%, rgba(196, 148, 69, 0.36) 67%, transparent 69%);
  box-shadow: 0 28px 46px rgba(7, 54, 47, 0.15);
  transform: rotateX(58deg) rotateZ(-0.8deg);
}

.yeserje-seal {
  right: 6%;
  bottom: 22%;
  z-index: 6;
  width: 4.6rem;
  height: 4.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.74);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.86);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.06em;
}

.yeserje-caption {
  right: 10%;
  bottom: 16%;
  z-index: 6;
  color: rgba(255, 248, 232, 0.7);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.yeserje-products {
  position: absolute;
  inset: 0;
  z-index: 7;
}

.yeserje-pack {
  position: absolute;
  width: max-content;
  transition: transform 280ms ease, opacity 240ms ease, filter 280ms ease;
}

.yeserje-pack img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(7, 54, 47, 0.25));
}

.yeserje-pack span {
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(196, 148, 69, 0.72);
  border-radius: 999px;
  background: rgba(255, 252, 242, 0.9);
  color: var(--yeserje-green);
  font-size: 0.66rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.yeserje-pack:hover,
.yeserje-pack:focus-visible {
  transform: translateY(-7px);
}

.yeserje-puree-hero {
  left: 15%;
  bottom: 16%;
  z-index: 5;
}

.yeserje-puree-hero img {
  height: clamp(22rem, 32vw, 31rem);
}

.yeserje-puree-a {
  left: 34%;
  bottom: 13%;
}

.yeserje-puree-a img {
  height: clamp(10.5rem, 16vw, 15rem);
}

.yeserje-puree-b {
  left: 44%;
  bottom: 15%;
}

.yeserje-puree-b img {
  height: clamp(17.2rem, 24vw, 23rem);
}

.yeserje-porridge-a {
  left: 61%;
  bottom: 15%;
  transform: rotate(-3deg);
}

.yeserje-porridge-b {
  left: 73%;
  bottom: 18%;
  transform: rotate(2deg);
}

.yeserje-porridge-c {
  left: 84%;
  bottom: 15%;
  transform: rotate(4deg);
}

.yeserje-porridge img {
  height: clamp(15.5rem, 22vw, 20.5rem);
}

.yeserje-info {
  position: absolute;
  left: 4%;
  bottom: 10%;
  z-index: 8;
  width: clamp(11rem, 15vw, 14.5rem);
  display: grid;
  gap: 0.12rem;
  border-left: 2px solid var(--yeserje-gold);
  padding: 0.62rem 0 0.62rem 0.85rem;
  background: linear-gradient(90deg, rgba(255, 252, 242, 0.92), rgba(255, 252, 242, 0));
  color: var(--yeserje-ink);
  transition: transform 280ms ease, opacity 220ms ease;
}

.yeserje-info span,
.yeserje-info em {
  color: #b47b2a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.yeserje-info strong {
  font-size: 1.03rem;
  line-height: 1.14;
}

.yeserje-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--yeserje-green);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.yeserje-world[data-yeserje-active="porridge"] {
  --yeserje-green: #0c6659;
  --yeserje-milk: #dcebe9;
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-landscape {
  background:
    radial-gradient(ellipse at 32% 40%, rgba(164, 202, 74, 0.34), transparent 28%),
    radial-gradient(ellipse at 74% 45%, rgba(230, 241, 239, 0.95), transparent 35%),
    linear-gradient(135deg, rgba(13, 96, 82, 0.9), rgba(98, 120, 71, 0.78) 62%, rgba(231, 240, 236, 0.78));
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-puree {
  opacity: 0.5;
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-puree-hero {
  transform: translate(-3%, 3%) scale(0.84);
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-puree-b {
  transform: translate(-5%, 1%) scale(0.88);
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-a {
  left: 50%;
  bottom: 14%;
  transform: rotate(-5deg) scale(1.12);
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-b {
  left: 64%;
  bottom: 17%;
  transform: rotate(0deg) scale(1.22);
}

.yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-c {
  left: 79%;
  bottom: 14%;
  transform: rotate(5deg) scale(1.12);
}

@media (max-width: 1440px) {
  .yeserje-grid {
    grid-template-columns: minmax(17rem, 29%) minmax(0, 1fr);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.5rem;
  }

  .yeserje-copy h2 {
    font-size: clamp(3.4rem, 5.8vw, 5.8rem);
  }

  .yeserje-puree-hero img { height: clamp(19rem, 29vw, 27rem); }
  .yeserje-puree-b img { height: clamp(15rem, 22vw, 19rem); }
  .yeserje-porridge img { height: clamp(13.5rem, 19vw, 17rem); }
}

@media (max-width: 1179px) {
  .yeserje-world {
    height: auto;
    min-height: 0;
  }

  .yeserje-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.5rem;
  }

  .yeserje-copy {
    max-width: 44rem;
  }

  .yeserje-stage {
    min-height: clamp(34rem, 64vw, 43rem);
  }

  .yeserje-world::before {
    clip-path: polygon(40% 5%, 100% 0, 100% 76%, 74% 96%, 39% 80%, 31% 36%);
  }
}

@media (max-width: 760px) {
  .yeserje-world {
    padding-block: 3rem;
  }

  .yeserje-copy h2 {
    font-size: clamp(3rem, 18vw, 4.7rem);
  }

  .yeserje-selector {
    width: 100%;
    overflow-x: auto;
  }

  .yeserje-stage {
    min-height: 37rem;
    overflow: hidden;
  }

  .yeserje-landscape {
    inset: 2rem -5rem 8.2rem -2rem;
  }

  .yeserje-orchard-window,
  .yeserje-seal,
  .yeserje-caption {
    display: none;
  }

  .yeserje-pedestal {
    left: -1rem;
    right: -1rem;
    bottom: 9.5rem;
  }

  .yeserje-puree-hero,
  .yeserje-puree-a,
  .yeserje-puree-b,
  .yeserje-porridge-a,
  .yeserje-porridge-b,
  .yeserje-porridge-c,
  .yeserje-world[data-yeserje-active="porridge"] .yeserje-puree-hero,
  .yeserje-world[data-yeserje-active="porridge"] .yeserje-puree-b,
  .yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-a,
  .yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-b,
  .yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-c {
    transform: none;
  }

  .yeserje-puree-hero,
  .yeserje-world[data-yeserje-active="puree"] .yeserje-puree-hero {
    left: 50%;
    bottom: 32%;
    transform: translateX(-50%);
  }

  .yeserje-puree-hero img {
    height: 21.5rem;
  }

  .yeserje-world[data-yeserje-active="porridge"] .yeserje-porridge-b {
    left: 50%;
    bottom: 32%;
    transform: translateX(-50%) scale(1.04);
    opacity: 1;
  }

  .yeserje-world[data-yeserje-active="porridge"] .yeserje-puree-hero,
  .yeserje-world[data-yeserje-active="puree"] .yeserje-porridge-b {
    opacity: 0;
    pointer-events: none;
  }

  .yeserje-puree-a,
  .yeserje-puree-b,
  .yeserje-porridge-a,
  .yeserje-porridge-c {
    bottom: 2.6rem;
    opacity: 0.72;
  }

  .yeserje-puree-a { left: 2%; }
  .yeserje-puree-b { left: 26%; }
  .yeserje-porridge-a { left: 50%; }
  .yeserje-porridge-c { left: 74%; }

  .yeserje-puree-a img,
  .yeserje-puree-b img,
  .yeserje-porridge-a img,
  .yeserje-porridge-c img {
    height: 8.5rem;
  }

  .yeserje-info {
    left: 1rem;
    bottom: 13rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yeserje-pack,
  .yeserje-info {
    transition: none;
  }
}

/* Premium dairy campaign scene */
.product-showroom {
  --category-rail-width: 10.75rem;
}

.showroom-category-nav {
  padding: 0.82rem 0.66rem 0.82rem 0.78rem;
  border-color: rgba(15, 110, 86, 0.12);
  border-radius: 8px;
  background: rgba(250, 247, 237, 0.76);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(28, 42, 36, 0.08);
}

.showroom-category-nav::before {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.showroom-category-nav a {
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.28rem;
  padding: 0.46rem 0.34rem 0.46rem 0;
  font-size: 0.78rem;
  line-height: 1.18;
}

.showroom-category-nav a::before {
  font-size: 0.6rem;
}

.showroom-category-nav a.is-active {
  background: rgba(15, 110, 86, 0.11);
}

.legacy-dairy-section[hidden] {
  display: none !important;
}

.dairy-world {
  --dairy-cream: #f4f0e5;
  --dairy-ink: #082f2c;
  --dairy-green: #0d6f61;
  --dairy-blue: #8eb8c6;
  --dairy-gold: #c2944c;
  height: calc(100svh - 96px);
  min-height: 44rem;
  padding: clamp(2.1rem, 4vw, 4rem) var(--section-inline);
  background:
    radial-gradient(ellipse at 64% 48%, rgba(142, 184, 198, 0.2), transparent 31rem),
    radial-gradient(ellipse at 37% 80%, rgba(194, 148, 76, 0.15), transparent 24rem),
    linear-gradient(135deg, rgba(13, 111, 97, 0.035) 0 1px, transparent 1px 28px),
    var(--dairy-cream);
  overflow: hidden;
}

.dairy-world::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(244, 240, 229, 0.96) 0 22%, rgba(244, 240, 229, 0.44) 43%, rgba(244, 240, 229, 0.76) 100%),
    linear-gradient(180deg, rgba(6, 45, 39, 0.2), rgba(255, 255, 255, 0.15)),
    url("assets/photo-scenes/dairy-misty-pasture.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, 57% 47%;
  filter: saturate(1.02) contrast(1.02) brightness(1.02);
  clip-path: polygon(42% 0, 100% 0, 100% 78%, 87% 100%, 42% 89%, 31% 42%);
}

.dairy-world::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 24% 44%, rgba(244, 240, 229, 0.96), rgba(244, 240, 229, 0.7) 44%, transparent 68%),
    repeating-radial-gradient(ellipse at 60% 56%, transparent 0 42px, rgba(8, 47, 44, 0.038) 43px 44px, transparent 45px 84px);
}

.dairy-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1800px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 28%) minmax(0, 1fr);
  gap: clamp(1.4rem, 2.6vw, 3rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.6vw, 2.8rem));
}

.dairy-copy {
  position: relative;
  z-index: 8;
  max-width: 31rem;
  gap: clamp(0.76rem, 1.1vw, 0.95rem);
}

.dairy-chapter {
  position: absolute;
  right: 0;
  top: 4.8rem;
  z-index: -1;
  color: rgba(13, 111, 97, 0.055);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.dairy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--dairy-green);
}

.dairy-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--dairy-gold);
  border-radius: 999px;
}

.dairy-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dairy-gold), transparent);
}

.dairy-copy h2 {
  max-width: 8.5ch;
  color: var(--dairy-ink);
  font-size: clamp(3.4rem, 5.6vw, 6rem);
  line-height: 0.95;
}

.dairy-copy h2 span {
  color: #6f8135;
}

.dairy-copy p:not(.showroom-eyebrow) {
  max-width: 28rem;
  color: rgba(35, 51, 46, 0.78);
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.58;
}

.dairy-support {
  color: rgba(8, 47, 44, 0.66) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.dairy-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(13, 111, 97, 0.18);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 252, 244, 0.76);
  box-shadow: 0 16px 34px rgba(8, 47, 44, 0.08);
}

.dairy-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1rem;
  background: transparent;
  color: rgba(35, 51, 46, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.dairy-selector button.is-active {
  background: var(--dairy-green);
  color: #fff8ea;
  box-shadow: 0 12px 24px rgba(13, 111, 97, 0.2);
}

.dairy-stage-wrap {
  position: relative;
  min-width: 0;
}

.dairy-stage {
  position: relative;
  min-height: clamp(35rem, 44vw, 42rem);
  display: block;
  overflow: visible;
}

.dairy-photo,
.dairy-atmosphere,
.dairy-horizon,
.dairy-ribbon,
.dairy-platform,
.dairy-caption {
  position: absolute;
  pointer-events: none;
}

.dairy-photo {
  inset: 1% 0 25% 24%;
  z-index: 0;
  border: 1px solid rgba(13, 111, 97, 0.14);
  border-radius: 46% 54% 48% 52% / 38% 44% 56% 62%;
  clip-path: polygon(9% 18%, 52% 2%, 96% 13%, 100% 67%, 76% 98%, 23% 89%, 0 48%);
  background:
    linear-gradient(90deg, rgba(244, 240, 229, 0.12), rgba(244, 240, 229, 0.54)),
    url("assets/photo-scenes/dairy-misty-pasture.jpg") 58% 46% / cover;
  box-shadow: 0 30px 70px rgba(8, 47, 44, 0.14);
}

.dairy-atmosphere {
  inset: 16% 7% 18% 4%;
  z-index: 1;
  clip-path: polygon(6% 28%, 38% 3%, 76% 10%, 100% 36%, 90% 78%, 56% 98%, 14% 86%, 0 52%);
  background:
    radial-gradient(ellipse at 32% 34%, rgba(142, 184, 198, 0.58), transparent 28%),
    radial-gradient(ellipse at 68% 48%, rgba(255, 255, 255, 0.72), transparent 33%),
    linear-gradient(135deg, rgba(9, 87, 77, 0.92), rgba(11, 68, 60, 0.82) 58%, rgba(104, 136, 95, 0.7));
  box-shadow: 0 34px 74px rgba(8, 47, 44, 0.17);
}

.dairy-horizon {
  left: 7%;
  right: 6%;
  bottom: 25%;
  z-index: 2;
  height: 5rem;
  border-bottom: 1px solid rgba(255, 248, 232, 0.52);
  border-radius: 50%;
  opacity: 0.58;
}

.dairy-ribbon {
  left: 13%;
  right: 7%;
  bottom: 19%;
  z-index: 3;
  height: 7rem;
  border-bottom: 1px solid rgba(194, 148, 76, 0.62);
  border-radius: 50%;
  transform: rotate(-2deg);
}

.dairy-ribbon::before,
.dairy-ribbon::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid rgba(255, 248, 232, 0.88);
  border-radius: 999px;
  background: var(--dairy-green);
  box-shadow: 0 0 0 5px rgba(13, 111, 97, 0.12);
}

.dairy-ribbon::before { left: 28%; }
.dairy-ribbon::after { right: 23%; background: var(--dairy-blue); }

.dairy-platform {
  left: 7%;
  right: 5%;
  bottom: 5%;
  z-index: 4;
  height: clamp(6rem, 8.4vw, 8rem);
  border-top: 1px solid rgba(194, 148, 76, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 48% 18%, rgba(255, 252, 244, 0.98), rgba(227, 229, 210, 0.78) 58%, rgba(194, 148, 76, 0.32) 67%, transparent 69%);
  box-shadow: 0 28px 46px rgba(8, 47, 44, 0.16);
  transform: rotateX(58deg) rotateZ(-0.6deg);
}

.dairy-caption {
  right: 7%;
  bottom: 17%;
  z-index: 7;
  color: rgba(255, 248, 232, 0.72);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.dairy-products {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.dairy-pack {
  position: absolute;
  width: max-content;
  transition: transform 280ms ease, opacity 240ms ease, filter 280ms ease;
}

.dairy-pack img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 24px rgba(8, 47, 44, 0.25));
}

.dairy-pack:hover,
.dairy-pack:focus-visible {
  transform: translateY(-7px);
}

.dairy-world .showroom-product:hover::after,
.dairy-world .showroom-product:focus-visible::after,
.dairy-world .showroom-product.is-idle-cue::after {
  display: none;
}

.dairy-suytli-hero {
  left: 14%;
  bottom: 13%;
}

.dairy-suytli-fat {
  left: 30%;
  bottom: 13%;
}

.dairy-suytli-shake {
  left: 46%;
  bottom: 13%;
}

.dairy-suytli-hero img,
.dairy-suytli-fat img {
  height: clamp(21rem, 29vw, 28rem);
}

.dairy-suytli-small {
  left: 61%;
  bottom: 12%;
}

.dairy-suytli-shake img,
.dairy-suytli-small img {
  height: clamp(12rem, 17vw, 16rem);
}

.dairy-dap-hero {
  left: 71%;
  bottom: 13%;
}

.dairy-dap-strawberry {
  left: 83%;
  bottom: 11%;
}

.dairy-dap-peach {
  left: 91%;
  bottom: 13%;
}

.dairy-dap-hero img,
.dairy-dap-strawberry img,
.dairy-dap-peach img {
  height: clamp(13rem, 18vw, 15rem);
}

.dairy-info {
  position: absolute;
  left: 4%;
  bottom: 9%;
  z-index: 9;
  width: clamp(12rem, 16vw, 15rem);
  display: grid;
  gap: 0.12rem;
  border-left: 2px solid var(--dairy-gold);
  padding: 0.62rem 0 0.62rem 0.85rem;
  background: linear-gradient(90deg, rgba(255, 252, 244, 0.92), rgba(255, 252, 244, 0));
  color: var(--dairy-ink);
  transition: transform 280ms ease, opacity 220ms ease;
}

.dairy-info span,
.dairy-info em {
  color: #b47b2a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.dairy-info strong {
  font-size: 1.03rem;
  line-height: 1.14;
}

.dairy-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--dairy-green);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.dairy-world[data-dairy-active="dap"] {
  --dairy-green: #0b615b;
  --dairy-blue: #c7e0e7;
}

.dairy-world[data-dairy-active="dap"] .dairy-atmosphere {
  background:
    radial-gradient(ellipse at 35% 36%, rgba(142, 184, 198, 0.34), transparent 28%),
    radial-gradient(ellipse at 72% 45%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(135deg, rgba(9, 87, 77, 0.84), rgba(75, 119, 105, 0.78) 58%, rgba(191, 208, 198, 0.74));
}

.dairy-world[data-dairy-active="dap"] .dairy-pack-suytli {
  opacity: 0.5;
}

.dairy-world[data-dairy-active="dap"] .dairy-suytli-hero {
  transform: translate(-3%, 4%) scale(0.8);
}

.dairy-world[data-dairy-active="dap"] .dairy-suytli-shake {
  transform: translate(-8%, 2%) scale(0.82);
}

.dairy-world[data-dairy-active="dap"] .dairy-dap-hero {
  left: 49%;
  bottom: 12%;
}

.dairy-world[data-dairy-active="dap"] .dairy-dap-hero img {
  height: clamp(23rem, 33vw, 31rem);
}

.dairy-world[data-dairy-active="dap"] .dairy-dap-strawberry {
  left: 68%;
  bottom: 12%;
}

.dairy-world[data-dairy-active="dap"] .dairy-dap-peach {
  left: 78%;
  bottom: 15%;
}

.dairy-world[data-dairy-active="dap"] .dairy-dap-strawberry img,
.dairy-world[data-dairy-active="dap"] .dairy-dap-peach img {
  height: clamp(13rem, 18vw, 17rem);
}

@media (max-width: 1440px) {
  .dairy-grid {
    grid-template-columns: minmax(17rem, 28%) minmax(0, 1fr);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.35rem;
  }

  .dairy-copy h2 {
    font-size: clamp(3.1rem, 5.2vw, 5.4rem);
  }

  .dairy-suytli-hero img,
  .dairy-suytli-fat img { height: clamp(18.5rem, 25vw, 24.5rem); }
  .dairy-suytli-shake img { height: clamp(11rem, 15vw, 14rem); }
  .dairy-dap-hero img,
  .dairy-dap-strawberry img,
  .dairy-dap-peach img { height: clamp(11rem, 15vw, 14rem); }
}

@media (max-width: 1179px) {
  .dairy-world {
    height: auto;
    min-height: 0;
  }

  .dairy-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.5rem;
  }

  .dairy-copy {
    max-width: 44rem;
  }

  .dairy-stage {
    min-height: clamp(34rem, 65vw, 43rem);
  }

  .dairy-world::before {
    clip-path: polygon(33% 0, 100% 0, 100% 82%, 74% 100%, 36% 86%, 24% 40%);
  }
}

@media (max-width: 760px) {
  .product-showroom {
    --category-rail-width: 100%;
  }

  .showroom-category-nav {
    padding: 0.45rem var(--section-inline);
    scroll-padding-inline: var(--section-inline);
  }

  .showroom-category-nav a {
    grid-template-columns: auto;
    padding: 0.48rem 0.7rem;
  }

  .showroom-category-nav a::before,
  .showroom-category-nav::before {
    display: none;
  }

  .dairy-world {
    padding-block: 3rem;
  }

  .dairy-copy h2 {
    max-width: 9ch;
    font-size: clamp(2.7rem, 14vw, 4.1rem);
  }

  .dairy-selector {
    width: 100%;
    overflow-x: auto;
  }

  .dairy-selector button {
    flex: 1 0 auto;
  }

  .dairy-stage {
    min-height: 39rem;
    overflow: hidden;
  }

  .dairy-photo {
    inset: 0 -3rem 18rem 2rem;
  }

  .dairy-atmosphere {
    inset: 7rem -4rem 9rem -2rem;
  }

  .dairy-platform {
    left: -1rem;
    right: -1rem;
    bottom: 10rem;
  }

  .dairy-caption {
    display: none;
  }

  .dairy-suytli-hero {
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
  }

  .dairy-suytli-hero img {
    height: 22rem;
  }

  .dairy-world[data-dairy-active="dap"] .dairy-dap-hero {
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
  }

  .dairy-world[data-dairy-active="dap"] .dairy-dap-hero img {
    height: 22rem;
  }

  .dairy-world[data-dairy-active="dap"] .dairy-suytli-hero,
  .dairy-world[data-dairy-active="suytli"] .dairy-dap-hero {
    opacity: 0;
    pointer-events: none;
  }

  .dairy-suytli-fat,
  .dairy-suytli-shake,
  .dairy-suytli-small,
  .dairy-dap-strawberry,
  .dairy-dap-peach {
    bottom: 1.2rem;
    opacity: 0.74;
    transform: none !important;
  }

  .dairy-suytli-fat { left: 1%; }
  .dairy-suytli-shake { left: 21%; }
  .dairy-suytli-small { left: 41%; }
  .dairy-dap-strawberry { left: 61%; }
  .dairy-dap-peach { left: 80%; }

  .dairy-suytli-fat img,
  .dairy-suytli-shake img,
  .dairy-suytli-small img,
  .dairy-dap-strawberry img,
  .dairy-dap-peach img {
    height: 8rem;
  }

  .dairy-info {
    left: 1rem;
    bottom: 10.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dairy-pack,
  .dairy-info {
    transition: none;
  }
}

.carbo-world {
  --carbo-ink: #f4efe2;
  --carbo-green: #0d6f61;
  --carbo-gold: #d8a23e;
  --carbo-accent: #d8a23e;
  --carbo-accent-soft: rgba(216, 162, 62, 0.3);
  height: calc(100svh - 96px);
  min-height: 44rem;
  padding: clamp(2.1rem, 4vw, 4rem) var(--section-inline);
  color: var(--carbo-ink);
  background:
    radial-gradient(ellipse at 32% 40%, rgba(19, 122, 108, 0.34), transparent 34rem),
    radial-gradient(ellipse at 20% 74%, var(--carbo-accent-soft), transparent 26rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 30px),
    linear-gradient(135deg, #0e2b26 0%, #0b1f1b 46%, #0a1613 100%);
  overflow: hidden;
  transition: --carbo-accent-soft 300ms ease;
}

.carbo-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1800px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 32%);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.carbo-stage-wrap {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.carbo-stage {
  position: relative;
  width: 100%;
  min-height: clamp(34rem, 44vw, 42rem);
}

.carbo-bubble,
.carbo-rings,
.carbo-sweep,
.carbo-condensation,
.carbo-fizz,
.carbo-platform,
.carbo-trajectory,
.carbo-marker {
  position: absolute;
  pointer-events: none;
}

.carbo-bubble {
  left: 7%;
  bottom: 13%;
  z-index: 0;
  width: clamp(26rem, 40vw, 40rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.1), transparent 46%),
    radial-gradient(circle at 62% 68%, var(--carbo-accent-soft), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(19, 122, 108, 0.3), rgba(10, 22, 19, 0) 68%);
  transition: background 320ms ease;
}

.carbo-rings {
  left: 5%;
  bottom: 7%;
  z-index: 0;
  width: clamp(30rem, 46vw, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.7;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(255, 255, 255, 0.045) 38px 39px, transparent 39px 76px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%);
  mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%);
}

.carbo-sweep {
  inset: -12% -6%;
  z-index: 1;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.045) 54%, transparent 68%);
  transform: skewX(-8deg);
}

.carbo-condensation {
  inset: 0;
  z-index: 1;
  opacity: 0.85;
  background:
    radial-gradient(circle at 5% 22%, rgba(255, 255, 255, 0.11) 0 2px, transparent 3px),
    radial-gradient(circle at 3% 46%, rgba(255, 255, 255, 0.08) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 8% 68%, rgba(255, 255, 255, 0.09) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 28%, rgba(255, 255, 255, 0.09) 0 2px, transparent 3px),
    radial-gradient(circle at 93% 56%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 98% 78%, rgba(255, 255, 255, 0.09) 0 2px, transparent 3px);
}

.carbo-fizz {
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 60%, transparent 72%);
  animation: carbo-float 7s ease-in-out infinite;
}

.carbo-fizz-a { left: 41%; bottom: 60%; width: 2.6rem; height: 2.6rem; opacity: 0.5; animation-delay: 0s; }
.carbo-fizz-b { left: 23%; bottom: 44%; width: 1.4rem; height: 1.4rem; opacity: 0.6; animation-delay: 1.6s; animation-duration: 5.5s; }
.carbo-fizz-c { right: -1.6rem; bottom: 30%; width: 4.2rem; height: 4.2rem; opacity: 0.38; animation-delay: 0.8s; animation-duration: 8.5s; }

@keyframes carbo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

.carbo-platform {
  left: 4%;
  right: 8%;
  bottom: 6%;
  z-index: 3;
  height: clamp(5rem, 8vw, 7.5rem);
  border-radius: 50%;
  border-top: 1px solid rgba(210, 240, 232, 0.4);
  background: radial-gradient(ellipse at 50% 20%, rgba(210, 240, 232, 0.26), rgba(19, 122, 108, 0.14) 52%, rgba(10, 22, 19, 0) 70%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: rotateX(60deg);
}

.carbo-platform::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--carbo-accent-soft);
}

.carbo-platform::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -1.1rem;
  height: 100%;
  border-radius: 50%;
  border-bottom: 1px solid rgba(210, 240, 232, 0.16);
  opacity: 0.6;
}

.carbo-trajectory {
  left: 6%;
  right: 4%;
  bottom: 12%;
  z-index: 4;
  width: 88%;
  height: 52%;
}

.carbo-trajectory path {
  stroke: var(--carbo-accent);
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
  transition: stroke 320ms ease;
}

.carbo-marker {
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  color: rgba(244, 239, 226, 0.74);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.carbo-marker::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border: 1px solid var(--carbo-accent);
  border-radius: 999px;
}

.carbo-marker-1 { left: 8%; bottom: 46%; }
.carbo-marker-2 { left: 33%; bottom: 46%; }
.carbo-marker-3 { left: 60%; bottom: 42%; }

.carbo-products {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.carbo-pack {
  position: absolute;
  width: max-content;
  transition: transform 300ms ease, translate 300ms ease, opacity 280ms ease, filter 300ms ease;
}

.carbo-pack img {
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.55)) saturate(1.04) contrast(1.03);
  transition: filter 300ms ease;
}

.carbo-pack::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  z-index: -1;
  width: 68%;
  height: 1.05rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(3px);
}

.carbo-pack-ozi { --pack-height: clamp(26rem, 37vw, 35rem); left: 4%; bottom: 12%; z-index: 8; }
.carbo-pack-tap { --pack-height: clamp(18.5rem, 26vw, 24rem); left: 26%; bottom: 12%; z-index: 6; }
.carbo-pack-ok { --pack-height: clamp(16rem, 23vw, 21rem); z-index: 7; }
.carbo-ok-a { left: 46%; bottom: 9%; }
.carbo-ok-b { left: 60%; bottom: 15%; }
.carbo-ok-c { left: 74%; bottom: 9%; }

.carbo-world[data-carbo-active="ozi"] { --carbo-accent: #d8a23e; --carbo-accent-soft: rgba(216, 162, 62, 0.3); }
.carbo-world[data-carbo-active="tap"] { --carbo-accent: #c0504a; --carbo-accent-soft: rgba(178, 58, 58, 0.3); }
.carbo-world[data-carbo-active="ok"] { --carbo-accent: #e6c34a; --carbo-accent-soft: rgba(230, 195, 74, 0.3); }

.carbo-world[data-carbo-active="ozi"] .carbo-pack-tap,
.carbo-world[data-carbo-active="ozi"] .carbo-pack-ok,
.carbo-world[data-carbo-active="tap"] .carbo-pack-ozi,
.carbo-world[data-carbo-active="tap"] .carbo-pack-ok,
.carbo-world[data-carbo-active="ok"] .carbo-pack-ozi,
.carbo-world[data-carbo-active="ok"] .carbo-pack-tap {
  opacity: 0.5;
  filter: saturate(0.72) brightness(0.82);
}

.carbo-world[data-carbo-active="ozi"] .carbo-pack-ozi,
.carbo-world[data-carbo-active="tap"] .carbo-pack-tap,
.carbo-world[data-carbo-active="ok"] .carbo-pack-ok {
  transform: scale(1.04);
  z-index: 10;
}

.carbo-copy {
  position: relative;
  z-index: 6;
  max-width: 30rem;
  gap: clamp(0.76rem, 1.1vw, 0.95rem);
}

.carbo-chapter {
  position: absolute;
  right: 0;
  top: 3rem;
  z-index: -1;
  color: rgba(255, 255, 255, 0.05);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.carbo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--carbo-gold);
}

.carbo-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--carbo-gold);
  border-radius: 999px;
}

.carbo-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--carbo-gold), transparent);
}

.carbo-copy h2 {
  max-width: 13ch;
  color: var(--carbo-ink);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  line-height: 1.02;
}

.carbo-b-ozi { color: #e7b45a; }
.carbo-b-tap { color: #e08a7a; }
.carbo-b-ok { color: #ecd06a; }

.carbo-copy p:not(.showroom-eyebrow) {
  max-width: 26rem;
  color: rgba(244, 239, 226, 0.82);
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.6;
}

.carbo-support {
  color: rgba(244, 239, 226, 0.6) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.carbo-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.carbo-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1rem;
  background: transparent;
  color: rgba(244, 239, 226, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.carbo-selector button.is-active {
  background: var(--carbo-accent);
  color: #0a1613;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.carbo-info {
  position: relative;
  width: clamp(13rem, 18vw, 17rem);
  display: grid;
  gap: 0.14rem;
  border-left: 2px solid var(--carbo-accent);
  padding: 0.5rem 0 0.5rem 0.85rem;
  color: var(--carbo-ink);
  transition: border-color 300ms ease;
}

.carbo-info span,
.carbo-info em {
  color: var(--carbo-gold);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.carbo-info strong {
  font-size: 1.1rem;
  line-height: 1.15;
}

.carbo-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--carbo-gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1440px) {
  .carbo-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 32%);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.4rem;
  }

  .carbo-copy h2 { font-size: clamp(2.4rem, 3.6vw, 3.8rem); }
  .carbo-pack-ozi { --pack-height: clamp(23rem, 33vw, 31rem); }
  .carbo-pack-ok { --pack-height: clamp(14.5rem, 21vw, 19rem); }
}

@media (max-width: 1179px) {
  .carbo-world {
    height: auto;
    min-height: 0;
  }

  .carbo-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.6rem;
  }

  .carbo-copy { max-width: 44rem; }

  .carbo-stage { min-height: clamp(32rem, 60vw, 40rem); }
}

@media (max-width: 760px) {
  .carbo-world { padding-block: 3rem; }

  .carbo-grid { display: flex; flex-direction: column; }

  .carbo-copy { order: 0; }
  .carbo-stage-wrap { order: 1; }

  .carbo-copy h2 { max-width: 14ch; font-size: clamp(2.3rem, 11vw, 3.4rem); }

  .carbo-selector { width: 100%; overflow-x: auto; }
  .carbo-selector button { flex: 1 0 auto; }

  .carbo-stage { min-height: 0; }

  .carbo-bubble,
  .carbo-rings,
  .carbo-sweep,
  .carbo-trajectory,
  .carbo-marker,
  .carbo-fizz { display: none; }

  .carbo-platform {
    left: -1rem;
    right: -1rem;
    bottom: 0.5rem;
  }

  .carbo-products {
    position: static;
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    overflow-x: auto;
    padding-bottom: 1.4rem;
    scroll-snap-type: x mandatory;
  }

  .carbo-pack {
    position: static;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .carbo-pack-ozi { --pack-height: 20rem; }
  .carbo-pack-tap { --pack-height: 15rem; }
  .carbo-pack-ok { --pack-height: 15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .carbo-pack,
  .carbo-info,
  .carbo-bubble,
  .carbo-selector button {
    transition: none;
  }

  .carbo-fizz { animation: none; }
}

.tea-world {
  --tea-ink: #f4efe2;
  --tea-amber: #d59234;
  --tea-citrus: #e6c34a;
  --tea-green: #0d6f61;
  --tea-gold: #d8a23e;
  --tea-accent: #d59234;
  height: calc(100svh - 96px);
  min-height: 44rem;
  padding: clamp(2.1rem, 4vw, 4rem) var(--section-inline);
  color: var(--tea-ink);
  background:
    radial-gradient(ellipse at 26% 46%, rgba(168, 100, 42, 0.34), transparent 32rem),
    radial-gradient(ellipse at 56% 72%, rgba(214, 181, 74, 0.16), transparent 24rem),
    radial-gradient(ellipse at 82% 20%, rgba(13, 111, 97, 0.2), transparent 34rem),
    linear-gradient(135deg, #241812 0%, #14241f 52%, #0d1a16 100%);
  overflow: hidden;
}

.tea-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1800px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 32%);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.tea-stage-wrap {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.tea-stage {
  position: relative;
  width: 100%;
  min-height: clamp(34rem, 44vw, 42rem);
}

.tea-photo,
.tea-amber,
.tea-citrus,
.tea-leaf,
.tea-condensation,
.tea-ice,
.tea-curl,
.tea-platform,
.tea-flow,
.tea-seal,
.tea-caption,
.tea-marker {
  position: absolute;
  pointer-events: none;
}

.tea-photo {
  inset: 5% 32% 20% 5%;
  z-index: 0;
  border: 1px solid rgba(216, 162, 62, 0.2);
  border-radius: 48% 52% 46% 54% / 40% 44% 56% 60%;
  clip-path: polygon(10% 16%, 54% 3%, 96% 14%, 100% 64%, 74% 98%, 22% 90%, 0 46%);
  background:
    linear-gradient(180deg, rgba(20, 18, 12, 0.34), rgba(16, 24, 20, 0.52)),
    url("assets/photo-scenes/iced-tea-table.jpg") 50% 42% / cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  filter: saturate(1.02) contrast(1.02);
  opacity: 0.9;
}

.tea-amber {
  left: 6%;
  bottom: 12%;
  z-index: 1;
  width: clamp(20rem, 30vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(214, 146, 52, 0.55), rgba(160, 95, 40, 0.18) 46%, transparent 68%);
  filter: blur(2px);
  transition: opacity 320ms ease;
}

.tea-citrus {
  left: 44%;
  bottom: 14%;
  z-index: 1;
  width: clamp(16rem, 24vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(230, 195, 74, 0.5), rgba(214, 181, 74, 0.14) 48%, transparent 68%);
  filter: blur(2px);
  transition: opacity 320ms ease;
}

.tea-leaf {
  z-index: 2;
  width: 3.4rem;
  height: 1.5rem;
  border: 1px solid rgba(216, 162, 62, 0.42);
  border-radius: 0 100% 0 100%;
  transition: opacity 320ms ease;
}

.tea-leaf::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 50%;
  width: 80%;
  height: 1px;
  background: rgba(216, 162, 62, 0.5);
  transform: translateY(-50%);
}

.tea-leaf-a { left: 4%; bottom: 52%; transform: rotate(-26deg); }
.tea-leaf-b { left: 13%; bottom: 61%; transform: rotate(16deg); opacity: 0.7; }

.tea-condensation {
  inset: 0;
  z-index: 1;
  opacity: 0.8;
  background:
    radial-gradient(circle at 4% 24%, rgba(255, 255, 255, 0.1) 0 2px, transparent 3px),
    radial-gradient(circle at 3% 50%, rgba(255, 255, 255, 0.08) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 8% 70%, rgba(255, 255, 255, 0.09) 0 2px, transparent 3px),
    radial-gradient(circle at 95% 30%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 60%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 97% 80%, rgba(255, 255, 255, 0.09) 0 2px, transparent 3px);
}

.tea-ice {
  z-index: 6;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(200, 230, 225, 0.1) 55%, rgba(255, 255, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.4), 0 6px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 320ms ease;
}

.tea-ice-a { left: 11%; bottom: 9%; width: 2.6rem; height: 2.2rem; transform: rotate(-8deg); }
.tea-ice-b { left: 17%; bottom: 7%; width: 2.1rem; height: 1.9rem; transform: rotate(12deg); opacity: 0.9; }
.tea-ice-c { left: 8%; bottom: 6%; width: 1.8rem; height: 1.6rem; transform: rotate(6deg); opacity: 0.85; }

.tea-curl {
  left: 66%;
  bottom: 8%;
  z-index: 6;
  width: 4rem;
  height: 2.2rem;
  border: 0.5rem solid transparent;
  border-top-color: var(--tea-citrus);
  border-radius: 50%;
  transform: rotate(28deg);
  opacity: 0.85;
  transition: opacity 320ms ease;
}

.tea-platform {
  left: 2%;
  right: 6%;
  bottom: 6%;
  z-index: 3;
  height: clamp(5rem, 8vw, 7.5rem);
  border-radius: 50%;
  border-top: 1px solid rgba(216, 162, 62, 0.42);
  background: radial-gradient(ellipse at 46% 20%, rgba(232, 210, 150, 0.24), rgba(160, 95, 40, 0.12) 52%, rgba(13, 26, 22, 0) 70%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: rotateX(60deg) rotateZ(-1deg);
}

.tea-platform::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -1.1rem;
  height: 100%;
  border-radius: 50%;
  border-bottom: 1px solid rgba(216, 162, 62, 0.18);
  opacity: 0.6;
}

.tea-flow {
  left: 5%;
  right: 4%;
  bottom: 14%;
  z-index: 4;
  width: 90%;
  height: 54%;
}

.tea-flow path {
  stroke: var(--tea-amber);
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
  transition: stroke 320ms ease;
}

.tea-seal {
  right: 5%;
  top: 7%;
  z-index: 9;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(216, 162, 62, 0.5);
  color: rgba(244, 239, 226, 0.78);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.tea-seal b {
  display: block;
  color: var(--tea-gold);
  font-size: 0.56rem;
}

.tea-seal::before {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  border: 1px dashed rgba(216, 162, 62, 0.3);
}

.tea-caption {
  left: 5%;
  bottom: 4%;
  z-index: 7;
  color: rgba(244, 239, 226, 0.64);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.tea-marker {
  z-index: 9;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgba(244, 239, 226, 0.82);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tea-marker b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9rem;
  color: var(--tea-gold);
}

.tea-marker-1 { left: 7%; bottom: 42%; }
.tea-marker-2 { left: 52%; bottom: 33%; }

.tea-products {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.tea-pack {
  position: absolute;
  width: max-content;
  transition: transform 300ms ease, translate 300ms ease, opacity 280ms ease, filter 300ms ease;
}

.tea-pack img {
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.55)) saturate(1.04) contrast(1.03);
  transition: filter 300ms ease;
}

.tea-pack::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  z-index: -1;
  width: 66%;
  height: 1.05rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(3px);
}

.tea-pack-han { --pack-height: clamp(26rem, 37vw, 35rem); left: 12%; bottom: 11%; z-index: 8; }
.tea-pack-330 { --pack-height: clamp(22rem, 31vw, 29rem); left: 46%; bottom: 10%; z-index: 7; }

.tea-world[data-tea-active="han"] { --tea-accent: #d59234; }
.tea-world[data-tea-active="s330"] { --tea-accent: #e6c34a; }

.tea-world[data-tea-active="han"] .tea-pack-330,
.tea-world[data-tea-active="s330"] .tea-pack-han {
  opacity: 0.55;
  filter: saturate(0.75) brightness(0.85);
}

.tea-world[data-tea-active="han"] .tea-pack-han,
.tea-world[data-tea-active="s330"] .tea-pack-330 {
  transform: scale(1.04);
  z-index: 10;
}

.tea-world[data-tea-active="s330"] .tea-amber,
.tea-world[data-tea-active="s330"] .tea-leaf,
.tea-world[data-tea-active="s330"] .tea-ice {
  opacity: 0.45;
}

.tea-world[data-tea-active="han"] .tea-citrus,
.tea-world[data-tea-active="han"] .tea-curl {
  opacity: 0.5;
}

.tea-copy {
  position: relative;
  z-index: 6;
  max-width: 30rem;
  gap: clamp(0.76rem, 1.1vw, 0.95rem);
}

.tea-chapter {
  position: absolute;
  right: 0;
  top: 2.4rem;
  z-index: -1;
  color: rgba(255, 255, 255, 0.05);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.tea-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--tea-gold);
}

.tea-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--tea-gold);
  border-radius: 999px;
}

.tea-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tea-gold), transparent);
}

.tea-copy h2 {
  max-width: 10ch;
  color: var(--tea-ink);
  font-size: clamp(2.8rem, 4.4vw, 4.6rem);
  line-height: 1.02;
}

.tea-b-han { color: #e7b45a; }
.tea-b-330 { color: #ecd06a; }

.tea-copy p:not(.showroom-eyebrow) {
  max-width: 26rem;
  color: rgba(244, 239, 226, 0.82);
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.6;
}

.tea-support {
  color: rgba(244, 239, 226, 0.6) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.tea-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.tea-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1.05rem;
  background: transparent;
  color: rgba(244, 239, 226, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.tea-selector button.is-active {
  background: var(--tea-accent);
  color: #1a1108;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.tea-info {
  position: relative;
  width: clamp(13rem, 18vw, 17rem);
  display: grid;
  gap: 0.14rem;
  border-left: 2px solid var(--tea-accent);
  padding: 0.5rem 0 0.5rem 0.85rem;
  color: var(--tea-ink);
  transition: border-color 300ms ease;
}

.tea-info span,
.tea-info em {
  color: var(--tea-gold);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.tea-info strong {
  font-size: 1.1rem;
  line-height: 1.15;
}

.tea-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--tea-gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1440px) {
  .tea-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 32%);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.4rem;
  }

  .tea-copy h2 { font-size: clamp(2.5rem, 4vw, 4.1rem); }
  .tea-pack-han { --pack-height: clamp(23rem, 33vw, 31rem); }
  .tea-pack-330 { --pack-height: clamp(19.5rem, 28vw, 26rem); }
}

@media (max-width: 1179px) {
  .tea-world {
    height: auto;
    min-height: 0;
  }

  .tea-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.6rem;
  }

  .tea-copy { max-width: 44rem; }

  .tea-stage { min-height: clamp(32rem, 60vw, 40rem); }
}

@media (max-width: 760px) {
  .tea-world { padding-block: 3rem; }

  .tea-grid { display: flex; flex-direction: column; }

  .tea-copy { order: 0; }
  .tea-stage-wrap { order: 1; }

  .tea-copy h2 { max-width: 14ch; font-size: clamp(2.4rem, 12vw, 3.6rem); }

  .tea-selector { width: 100%; overflow-x: auto; }
  .tea-selector button { flex: 1 0 auto; }

  .tea-stage { min-height: 0; }

  .tea-photo,
  .tea-amber,
  .tea-citrus,
  .tea-leaf,
  .tea-flow,
  .tea-seal,
  .tea-marker,
  .tea-curl { display: none; }

  .tea-platform {
    left: -1rem;
    right: -1rem;
    bottom: 0.5rem;
  }

  .tea-products {
    position: static;
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 1.4rem;
    scroll-snap-type: x mandatory;
  }

  .tea-pack {
    position: static;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .tea-ice { display: none; }

  .tea-pack-han { --pack-height: 22rem; }
  .tea-pack-330 { --pack-height: 19rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tea-pack,
  .tea-info,
  .tea-amber,
  .tea-citrus,
  .tea-leaf,
  .tea-ice,
  .tea-curl,
  .tea-selector button {
    transition: none;
  }
}

.energy-world {
  --e-ink: #f4f7f2;
  --e-zor: #ff5a1f;
  --e-zor-soft: rgba(255, 90, 31, 0.34);
  --e-seljuk: #a6e22e;
  --e-seljuk-soft: rgba(166, 226, 46, 0.3);
  --e-gold: #d8a23e;
  --e-accent: var(--e-zor);
  height: calc(100svh - 96px);
  min-height: 44rem;
  padding: clamp(2.1rem, 4vw, 4rem) var(--section-inline);
  color: var(--e-ink);
  background:
    radial-gradient(ellipse at 58% 42%, rgba(255, 90, 31, 0.14), transparent 30rem),
    radial-gradient(ellipse at 82% 62%, rgba(166, 226, 46, 0.1), transparent 26rem),
    linear-gradient(135deg, #10161a 0%, #0d1512 50%, #0a1210 100%);
  overflow: hidden;
}

.energy-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1800px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(17rem, 30%) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.energy-stage-wrap {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.energy-stage {
  position: relative;
  width: 100%;
  min-height: clamp(34rem, 44vw, 42rem);
}

.energy-floor,
.energy-haze,
.energy-field,
.energy-streaks,
.energy-bolts,
.energy-ring,
.energy-platform,
.energy-seam,
.energy-particle,
.energy-marker {
  position: absolute;
  pointer-events: none;
}

.energy-floor {
  left: -12%;
  right: -12%;
  bottom: 0;
  height: 46%;
  z-index: 0;
  background:
    linear-gradient(rgba(130, 170, 158, 0.11) 1px, transparent 1px) 0 0 / 100% 2.2rem,
    linear-gradient(90deg, rgba(130, 170, 158, 0.11) 1px, transparent 1px) 0 0 / 2.2rem 100%;
  transform: perspective(340px) rotateX(64deg);
  transform-origin: bottom center;
  -webkit-mask: linear-gradient(180deg, transparent, #000 42%);
  mask: linear-gradient(180deg, transparent, #000 42%);
  opacity: 0.7;
}

.energy-haze {
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 48% 46%, rgba(180, 210, 200, 0.1), transparent 60%);
}

.energy-field {
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(6px);
  transition: opacity 320ms ease;
}

.energy-field-zor {
  left: 6%;
  bottom: 12%;
  width: clamp(20rem, 32vw, 32rem);
  background: radial-gradient(circle at 50% 45%, var(--e-zor-soft), transparent 62%);
}

.energy-field-seljuk {
  left: 44%;
  bottom: 18%;
  width: clamp(16rem, 26vw, 26rem);
  background: radial-gradient(circle at 50% 45%, var(--e-seljuk-soft), transparent 62%);
}

.energy-streaks {
  inset: -10%;
  z-index: 2;
  background: repeating-linear-gradient(58deg, transparent 0 26px, rgba(255, 255, 255, 0.035) 26px 27px, transparent 27px 60px);
  -webkit-mask: radial-gradient(ellipse at 46% 50%, #000 30%, transparent 74%);
  mask: radial-gradient(ellipse at 46% 50%, #000 30%, transparent 74%);
}

.energy-bolts {
  left: 4%;
  right: 4%;
  top: 6%;
  bottom: 12%;
  width: 92%;
  height: 82%;
  z-index: 3;
}

.energy-bolts .bolt {
  stroke-width: 1.6;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 3px currentColor);
}

.bolt-a,
.bolt-c { stroke: var(--e-zor); color: var(--e-zor); }
.bolt-b { stroke: var(--e-seljuk); color: var(--e-seljuk); }

.energy-ring {
  z-index: 4;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotateX(70deg);
  transition: opacity 320ms ease, transform 320ms ease;
  opacity: 0.8;
}

.energy-ring-zor {
  left: 10%;
  bottom: 8%;
  width: clamp(13rem, 20vw, 20rem);
  border: 2px solid var(--e-zor);
  box-shadow: 0 0 24px var(--e-zor-soft), inset 0 0 20px var(--e-zor-soft);
}

.energy-ring-seljuk {
  left: 46%;
  bottom: 14%;
  width: clamp(11rem, 17vw, 17rem);
  border: 2px solid var(--e-seljuk);
  box-shadow: 0 0 24px var(--e-seljuk-soft), inset 0 0 20px var(--e-seljuk-soft);
}

.energy-platform {
  left: 2%;
  right: 6%;
  bottom: 5%;
  z-index: 3;
  height: clamp(4.5rem, 7vw, 6.8rem);
  border-radius: 50%;
  border-top: 1px solid rgba(180, 210, 200, 0.28);
  background: radial-gradient(ellipse at 50% 24%, rgba(60, 80, 78, 0.5), rgba(20, 30, 28, 0.2) 60%, transparent 74%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: rotateX(62deg);
}

.energy-seam {
  left: 22%;
  right: 22%;
  bottom: 9%;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--e-zor) 28%, #ffffff 50%, var(--e-seljuk) 72%, transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  opacity: 0.8;
}

.energy-particle {
  z-index: 5;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  opacity: 0.5;
}

.ep1 { left: 24%; bottom: 40%; }
.ep2 { left: 40%; bottom: 56%; background: var(--e-zor); box-shadow: 0 0 6px var(--e-zor); }
.ep3 { left: 58%; bottom: 48%; background: var(--e-seljuk); box-shadow: 0 0 6px var(--e-seljuk); }
.ep4 { left: 70%; bottom: 62%; }

.energy-marker {
  z-index: 9;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgba(244, 247, 242, 0.82);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.energy-marker b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9rem;
}

.energy-marker-1 { left: 8%; bottom: 40%; }
.energy-marker-1 b { color: var(--e-zor); }
.energy-marker-2 { left: 52%; bottom: 52%; }
.energy-marker-2 b { color: var(--e-seljuk); }

.energy-products {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.energy-pack {
  position: absolute;
  width: max-content;
  transition: transform 300ms ease, translate 300ms ease, opacity 280ms ease, filter 300ms ease;
}

.energy-pack img {
  transition: filter 300ms ease;
}

.energy-pack::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  z-index: -1;
  width: 66%;
  height: 1rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(3px);
}

.energy-pack-zor {
  --pack-height: clamp(24rem, 34vw, 32rem);
  left: 12%;
  bottom: 10%;
  z-index: 8;
}

.energy-pack-zor img {
  filter: drop-shadow(0 0 22px var(--e-zor-soft)) drop-shadow(0 24px 26px rgba(0, 0, 0, 0.6)) saturate(1.05) contrast(1.03);
}

.energy-pack-seljuk {
  --pack-height: clamp(18rem, 26vw, 23rem);
  left: 52%;
  bottom: 18%;
  z-index: 7;
}

.energy-pack-seljuk img {
  filter: drop-shadow(0 0 20px var(--e-seljuk-soft)) drop-shadow(0 22px 24px rgba(0, 0, 0, 0.6)) saturate(1.05) contrast(1.03);
}

.energy-pack:hover img,
.energy-pack:focus-visible img {
  filter: drop-shadow(0 0 30px currentColor) drop-shadow(0 26px 28px rgba(0, 0, 0, 0.62)) saturate(1.08) contrast(1.05);
}

.energy-pack-zor:hover img,
.energy-pack-zor:focus-visible img { color: var(--e-zor); }
.energy-pack-seljuk:hover img,
.energy-pack-seljuk:focus-visible img { color: var(--e-seljuk); }

.energy-world .showroom-product:hover::after,
.energy-world .showroom-product:focus-visible::after,
.energy-world .showroom-product.is-idle-cue::after {
  display: none;
}

.energy-hint {
  position: absolute;
  left: calc(100% + 0.7rem);
  top: 40%;
  z-index: 11;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--e-accent);
  background: rgba(9, 16, 14, 0.88);
  color: var(--e-ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}

.energy-pack-zor .energy-hint { border-color: var(--e-zor); box-shadow: 0 0 16px var(--e-zor-soft); }
.energy-pack-seljuk .energy-hint { border-color: var(--e-seljuk); box-shadow: 0 0 16px var(--e-seljuk-soft); }

.energy-pack:hover .energy-hint,
.energy-pack:focus-visible .energy-hint {
  opacity: 1;
  transform: translateX(0);
}

.energy-stage:has(.energy-pack-zor:hover) .bolt-a,
.energy-stage:has(.energy-pack-zor:hover) .bolt-c,
.energy-stage:has(.energy-pack-zor:focus-visible) .bolt-a,
.energy-stage:has(.energy-pack-zor:focus-visible) .bolt-c,
.energy-stage:has(.energy-pack-seljuk:hover) .bolt-b,
.energy-stage:has(.energy-pack-seljuk:focus-visible) .bolt-b {
  animation: energy-strike 620ms ease-out;
}

@keyframes energy-strike {
  0% { opacity: 0; }
  12% { opacity: 1; }
  26% { opacity: 0.25; }
  44% { opacity: 0.95; }
  64% { opacity: 0.4; }
  100% { opacity: 0; }
}

.energy-platform::before,
.energy-platform::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  border: 1px solid rgba(210, 235, 225, 0.28);
  opacity: 0;
  pointer-events: none;
}

.energy-world.is-inview .energy-platform::before { animation: energy-shock 4.8s ease-out infinite; }
.energy-world.is-inview .energy-platform::after { animation: energy-shock 4.8s ease-out 2.4s infinite; }

@keyframes energy-shock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

.energy-floor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14%;
  height: 14%;
  background: linear-gradient(180deg, transparent, rgba(150, 220, 190, 0.22), transparent);
  opacity: 0;
  pointer-events: none;
}

.energy-world.is-inview .energy-floor::after { animation: energy-scan 6.5s linear infinite; }

@keyframes energy-scan {
  0% { top: -14%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.energy-selector button:not(.is-active):hover,
.energy-selector button:not(.is-active):focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--e-ink);
}

.energy-world.is-inview .energy-selector button.is-active {
  animation: energy-btn-glow 3.2s ease-in-out infinite;
}

@keyframes energy-btn-glow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--e-accent) 40%, transparent); }
  50% { box-shadow: 0 0 26px color-mix(in srgb, var(--e-accent) 72%, transparent); }
}

.energy-stage:has(.energy-pack-zor:hover) .energy-field-zor,
.energy-stage:has(.energy-pack-zor:focus-visible) .energy-field-zor,
.energy-stage:has(.energy-pack-seljuk:hover) .energy-field-seljuk,
.energy-stage:has(.energy-pack-seljuk:focus-visible) .energy-field-seljuk {
  opacity: 1;
  filter: blur(6px) brightness(1.35);
}

.energy-haze { transform: translate3d(calc(var(--px, 0) * 0.6px), calc(var(--py, 0) * 0.6px), 0); }
.energy-streaks { transform: translate3d(calc(var(--px, 0) * 1.3px), calc(var(--py, 0) * 1.3px), 0); }
.energy-bolts { transform: translate3d(calc(var(--px, 0) * 1.6px), calc(var(--py, 0) * 1.6px), 0); }
.energy-field-zor { transform: translate3d(calc(var(--px, 0) * 0.9px), calc(var(--py, 0) * 0.9px), 0); }
.energy-field-seljuk { transform: translate3d(calc(var(--px, 0) * 1.1px), calc(var(--py, 0) * 1.1px), 0); }

.energy-haze,
.energy-streaks,
.energy-bolts,
.energy-field {
  transition: transform 220ms ease, opacity 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .energy-world.is-inview .energy-platform::before,
  .energy-world.is-inview .energy-platform::after,
  .energy-world.is-inview .energy-floor::after,
  .energy-world.is-inview .energy-selector button.is-active {
    animation: none;
  }
}

.energy-world[data-energy-active="zor"] { --e-accent: var(--e-zor); }
.energy-world[data-energy-active="seljuk"] { --e-accent: var(--e-seljuk); }

.energy-world[data-energy-active="zor"] .energy-pack-seljuk,
.energy-world[data-energy-active="seljuk"] .energy-pack-zor {
  opacity: 0.55;
  filter: saturate(0.7) brightness(0.82);
}

.energy-world[data-energy-active="zor"] .energy-pack-zor,
.energy-world[data-energy-active="seljuk"] .energy-pack-seljuk {
  transform: scale(1.04);
  z-index: 10;
}

.energy-world[data-energy-active="seljuk"] .energy-field-zor,
.energy-world[data-energy-active="seljuk"] .energy-ring-zor {
  opacity: 0.35;
}

.energy-world[data-energy-active="zor"] .energy-field-seljuk,
.energy-world[data-energy-active="zor"] .energy-ring-seljuk {
  opacity: 0.35;
}

.energy-world[data-energy-active="zor"] .energy-ring-zor { transform: rotateX(70deg) scale(1.06); opacity: 1; }
.energy-world[data-energy-active="seljuk"] .energy-ring-seljuk { transform: rotateX(70deg) scale(1.06); opacity: 1; }

.energy-stage:has(.energy-pack-zor:hover) .energy-ring-zor,
.energy-stage:has(.energy-pack-zor:focus-visible) .energy-ring-zor { transform: rotateX(70deg) scale(1.12); }
.energy-stage:has(.energy-pack-seljuk:hover) .energy-ring-seljuk,
.energy-stage:has(.energy-pack-seljuk:focus-visible) .energy-ring-seljuk { transform: rotateX(70deg) scale(1.12); }

.energy-copy {
  position: relative;
  z-index: 6;
  max-width: 30rem;
  gap: clamp(0.76rem, 1.1vw, 0.95rem);
}

.energy-chapter {
  position: absolute;
  left: -0.4rem;
  top: 2.6rem;
  z-index: -1;
  color: rgba(255, 255, 255, 0.055);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.energy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--e-gold);
}

.energy-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--e-zor);
  box-shadow: 0 0 8px var(--e-zor);
}

.energy-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--e-zor), var(--e-seljuk));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.energy-copy h2 {
  max-width: 11ch;
  color: var(--e-ink);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1.03;
}

.energy-b-zor { color: #ff7a45; }
.energy-b-seljuk { color: #b6e64a; }

.energy-amp {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 22px var(--e-zor), 0 0 32px var(--e-seljuk);
}

.energy-copy p:not(.showroom-eyebrow) {
  max-width: 26rem;
  color: rgba(244, 247, 242, 0.82);
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.6;
}

.energy-support {
  color: rgba(244, 247, 242, 0.6) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.energy-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.energy-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1.15rem;
  background: transparent;
  color: rgba(244, 247, 242, 0.72);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.energy-selector button.is-active {
  background: var(--e-accent);
  color: #0a1210;
  box-shadow: 0 0 18px color-mix(in srgb, var(--e-accent) 50%, transparent);
}

.energy-info {
  position: relative;
  width: clamp(13rem, 18vw, 17rem);
  display: grid;
  gap: 0.14rem;
  border-left: 2px solid var(--e-accent);
  padding: 0.5rem 0 0.5rem 0.85rem;
  color: var(--e-ink);
  transition: border-color 300ms ease;
}

.energy-info span,
.energy-info em {
  color: var(--e-gold);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.energy-info strong {
  font-size: 1.1rem;
  line-height: 1.15;
}

.energy-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--e-gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.energy-world.is-inview .energy-products {
  animation: energy-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.energy-world.is-inview .energy-copy {
  animation: energy-fade 620ms ease both;
}

.energy-world.is-inview .energy-streaks {
  animation: energy-drift 20s linear infinite;
}

.energy-world.is-inview .energy-ring {
  animation: energy-ring-pulse 4.6s ease-in-out infinite;
}

.energy-world.is-inview .energy-ring-seljuk { animation-delay: -2.2s; }

.energy-world.is-inview .energy-particle {
  animation: energy-float 7s ease-in-out infinite;
}

.energy-world.is-inview .ep2 { animation-delay: -1.6s; animation-duration: 8.5s; }
.energy-world.is-inview .ep3 { animation-delay: -3.4s; animation-duration: 6.4s; }
.energy-world.is-inview .ep4 { animation-delay: -0.8s; animation-duration: 9s; }

.energy-world.is-inview .bolt-a { animation: energy-arc 7s ease-in-out infinite; }
.energy-world.is-inview .bolt-b { animation: energy-arc 8.5s ease-in-out 2s infinite; }
.energy-world.is-inview .bolt-c { animation: energy-arc 9.5s ease-in-out 4.5s infinite; }

@keyframes energy-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes energy-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes energy-drift {
  from { background-position: 0 0; }
  to { background-position: 0 120px; }
}

@keyframes energy-ring-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes energy-float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-14px); opacity: 0.75; }
}

@keyframes energy-arc {
  0%, 88%, 100% { opacity: 0; }
  90%, 95% { opacity: 0.85; }
}

@media (max-width: 1440px) {
  .energy-grid {
    grid-template-columns: minmax(16rem, 30%) minmax(0, 1fr);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.4rem;
  }

  .energy-copy h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
  .energy-pack-zor { --pack-height: clamp(22rem, 32vw, 29rem); }
  .energy-pack-seljuk { --pack-height: clamp(16.5rem, 24vw, 21rem); }
}

@media (max-width: 1179px) {
  .energy-world {
    height: auto;
    min-height: 0;
  }

  .energy-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.6rem;
  }

  .energy-copy { max-width: 44rem; }

  .energy-stage { min-height: clamp(32rem, 60vw, 40rem); }
}

@media (max-width: 760px) {
  .energy-world { padding-block: 3rem; }

  .energy-grid { display: flex; flex-direction: column; }

  .energy-copy { order: 0; }
  .energy-stage-wrap { order: 1; }

  .energy-copy h2 { max-width: 14ch; font-size: clamp(2.4rem, 12vw, 3.6rem); }

  .energy-selector { width: 100%; overflow-x: auto; }
  .energy-selector button { flex: 1 0 auto; }

  .energy-stage { min-height: 0; }

  .energy-bolts,
  .energy-streaks,
  .energy-floor,
  .energy-particle,
  .energy-marker { display: none; }

  .energy-platform {
    left: -1rem;
    right: -1rem;
    bottom: 0.5rem;
  }

  .energy-products {
    position: static;
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 1.4rem;
    scroll-snap-type: x mandatory;
  }

  .energy-pack {
    position: static;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .energy-pack-zor { --pack-height: 22rem; }
  .energy-pack-seljuk { --pack-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  .energy-world.is-inview .energy-products,
  .energy-world.is-inview .energy-copy,
  .energy-world.is-inview .energy-streaks,
  .energy-world.is-inview .energy-ring,
  .energy-world.is-inview .energy-particle,
  .energy-world.is-inview .bolt-a,
  .energy-world.is-inview .bolt-b,
  .energy-world.is-inview .bolt-c {
    animation: none;
  }

  .energy-pack,
  .energy-info,
  .energy-field,
  .energy-ring,
  .energy-selector button {
    transition: none;
  }
}

.deli-world {
  --deli-ink: #f2ead9;
  --deli-gold: #c69a5a;
  --deli-red: #c05a3a;
  --deli-brown: #a0824f;
  --deli-accent: #c05a3a;
  height: calc(100svh - 96px);
  min-height: 44rem;
  padding: clamp(2.1rem, 4vw, 4rem) var(--section-inline);
  color: var(--deli-ink);
  background:
    radial-gradient(ellipse at 22% 16%, rgba(232, 205, 150, 0.12), transparent 34rem),
    radial-gradient(ellipse at 68% 82%, rgba(120, 80, 45, 0.2), transparent 40rem),
    linear-gradient(135deg, #2a211a 0%, #211913 52%, #19120d 100%);
  overflow: hidden;
}

.deli-grid {
  position: relative;
  z-index: 5;
  width: min(100%, 1800px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 32%);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
  padding-right: calc(var(--category-rail-width) + clamp(2rem, 2.8vw, 3rem));
}

.deli-stage-wrap {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.deli-stage {
  position: relative;
  width: 100%;
  min-height: clamp(34rem, 44vw, 42rem);
}

.deli-light,
.deli-slab,
.deli-paper,
.deli-paper-fold,
.deli-rule,
.deli-engraving,
.deli-pepper,
.deli-herb,
.deli-seal,
.deli-caption,
.deli-marker {
  position: absolute;
  pointer-events: none;
}

.deli-light {
  inset: -20%;
  z-index: 2;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, 0.1) 50%, transparent 62%);
  transform: translateX(-10%);
}

.deli-slab {
  left: 1%;
  right: 3%;
  bottom: 7%;
  height: 27%;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(180deg, #372a20, #1b140e);
  box-shadow: 0 40px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(210, 190, 150, 0.12);
  transform: perspective(700px) rotateX(7deg);
  transform-origin: bottom center;
}

.deli-paper {
  left: 6%;
  right: 12%;
  bottom: 11%;
  height: 33%;
  z-index: 2;
  border-radius: 3px;
  transform: rotate(-2.2deg);
  background:
    repeating-linear-gradient(92deg, rgba(120, 96, 60, 0.05) 0 3px, transparent 3px 7px),
    radial-gradient(ellipse at 48% 38%, rgba(240, 228, 200, 0.96), rgba(206, 186, 146, 0.94) 62%, rgba(158, 136, 98, 0.94));
  border: 1px solid rgba(198, 154, 90, 0.28);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.42), inset 0 0 30px rgba(120, 90, 55, 0.24);
}

.deli-paper-fold {
  left: 6%;
  bottom: 40%;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  transform: rotate(-2.2deg);
  background: linear-gradient(135deg, rgba(158, 136, 98, 0.95), rgba(220, 205, 170, 0.95));
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.deli-rule {
  left: 11%;
  width: 30%;
  bottom: 22%;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 154, 90, 0.7) 20%, rgba(198, 154, 90, 0.7) 80%, transparent);
}

.deli-rule::before,
.deli-rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 1px;
  height: 5px;
  background: rgba(198, 154, 90, 0.7);
}

.deli-rule::before { left: 22%; }
.deli-rule::after { right: 22%; }

.deli-engraving {
  left: 4%;
  top: 7%;
  width: 13%;
  height: 34%;
  z-index: 3;
  opacity: 0.5;
}

.deli-engraving path {
  stroke: rgba(198, 154, 90, 0.65);
  stroke-width: 1.2;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

.deli-world.is-inview .deli-engraving path {
  animation: deli-draw 1.3s ease forwards;
}

.deli-world.is-inview .deli-engraving .deli-wheat-ear {
  animation-delay: 0.35s;
}

@keyframes deli-draw {
  to { stroke-dashoffset: 0; }
}

.deli-pepper {
  z-index: 7;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6f5941, #241a12 72%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.dp1 { left: 15%; bottom: 12%; }
.dp2 { left: 19%; bottom: 10%; width: 0.42rem; height: 0.42rem; }
.dp3 { left: 60%; bottom: 12.5%; }
.dp4 { left: 64%; bottom: 10.5%; width: 0.4rem; height: 0.4rem; }

.deli-herb {
  left: 22%;
  bottom: 13%;
  z-index: 7;
  width: 0.14rem;
  height: 3.4rem;
  background: linear-gradient(rgba(140, 160, 100, 0.6), rgba(120, 140, 84, 0.3));
  transform: rotate(20deg);
  transform-origin: bottom center;
}

.deli-herb::before,
.deli-herb::after {
  content: "";
  position: absolute;
  width: 1.15rem;
  height: 0.5rem;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(90deg, rgba(126, 150, 92, 0.6), rgba(126, 150, 92, 0.14));
}

.deli-herb::before { top: 14%; left: 60%; transform: rotate(-32deg); }
.deli-herb::after { top: 42%; left: -80%; transform: rotate(148deg); }

.deli-seal {
  right: 5%;
  top: 7%;
  z-index: 8;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(198, 154, 90, 0.5);
  color: rgba(242, 234, 217, 0.78);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.deli-seal b {
  display: block;
  color: var(--deli-gold);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.deli-seal::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border-radius: 50%;
  border: 1px dashed rgba(198, 154, 90, 0.3);
}

.deli-caption {
  left: 6%;
  bottom: 4%;
  z-index: 7;
  color: rgba(242, 234, 217, 0.6);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.deli-marker {
  z-index: 9;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgba(242, 234, 217, 0.82);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.deli-marker b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9rem;
  color: var(--deli-gold);
}

.deli-marker-1 { left: 5%; bottom: 33%; }
.deli-marker-2 { left: 57%; bottom: 45%; }

.deli-products {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.deli-pack {
  position: absolute;
  width: max-content;
  transition: transform 300ms ease, translate 300ms ease, opacity 280ms ease, filter 300ms ease;
}

.deli-pack img {
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5)) saturate(1.03) contrast(1.02);
  transition: filter 300ms ease;
}

.deli-pack::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  z-index: -1;
  width: 74%;
  height: 1.1rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(3px);
}

.deli-pack-köşüli {
  --pack-height: clamp(21rem, 29vw, 28rem);
  left: 34%;
  bottom: 15%;
  z-index: 6;
}

.deli-pack-han {
  --pack-height: clamp(13rem, 19vw, 17rem);
  left: 3%;
  bottom: 12%;
  z-index: 8;
}

.deli-world[data-deli-active="han"] { --deli-accent: var(--deli-red); }
.deli-world[data-deli-active="köşüli"] { --deli-accent: var(--deli-brown); }

.deli-world[data-deli-active="han"] .deli-pack-köşüli,
.deli-world[data-deli-active="köşüli"] .deli-pack-han {
  opacity: 0.68;
  filter: saturate(0.9) brightness(0.88);
}

.deli-world[data-deli-active="han"] .deli-pack-han,
.deli-world[data-deli-active="köşüli"] .deli-pack-köşüli {
  transform: scale(1.04);
  z-index: 10;
}

.deli-world .showroom-product:hover::after,
.deli-world .showroom-product:focus-visible::after,
.deli-world .showroom-product.is-idle-cue::after {
  display: none;
}

.deli-pack:hover img,
.deli-pack:focus-visible img {
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.58)) saturate(1.06) contrast(1.04);
}

.deli-copy {
  position: relative;
  z-index: 6;
  max-width: 30rem;
  gap: clamp(0.76rem, 1.1vw, 0.95rem);
}

.deli-chapter {
  position: absolute;
  right: 0;
  top: 2.6rem;
  z-index: -1;
  color: rgba(255, 255, 255, 0.05);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(8rem, 13vw, 14rem);
  line-height: 0.8;
}

.deli-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--deli-gold);
}

.deli-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--deli-gold);
  border-radius: 999px;
}

.deli-eyebrow::after {
  content: "";
  width: clamp(3.2rem, 6vw, 6.4rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--deli-gold), transparent);
}

.deli-copy h2 {
  max-width: 12ch;
  color: var(--deli-ink);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  line-height: 1.04;
}

.deli-b-han { color: #db7a54; }
.deli-b-köşüli { color: #d8b070; }

.deli-amp {
  color: var(--deli-gold);
  font-style: italic;
  font-weight: 500;
}

.deli-copy p:not(.showroom-eyebrow) {
  max-width: 26rem;
  color: rgba(242, 234, 217, 0.82);
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.6;
}

.deli-support {
  color: rgba(242, 234, 217, 0.6) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.deli-selector {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  border: 1px solid rgba(210, 190, 150, 0.2);
  border-radius: 999px;
  padding: 0.25rem;
  background: rgba(255, 250, 240, 0.05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.deli-selector button {
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  padding: 0.56rem 1.1rem;
  background: transparent;
  color: rgba(242, 234, 217, 0.74);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.deli-selector button.is-active {
  background: var(--deli-accent);
  color: #fdf6ea;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.deli-info {
  position: relative;
  width: clamp(13rem, 19vw, 18rem);
  display: grid;
  gap: 0.14rem;
  border-left: 2px solid var(--deli-accent);
  padding: 0.5rem 0 0.5rem 0.85rem;
  color: var(--deli-ink);
  transition: border-color 300ms ease;
}

.deli-info span,
.deli-info em {
  color: var(--deli-gold);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.deli-info strong {
  font-size: 1.08rem;
  line-height: 1.16;
}

.deli-info button {
  width: fit-content;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.12rem 0 0;
  background: transparent;
  color: var(--deli-gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.deli-world.is-inview .deli-products { animation: energy-rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.deli-world.is-inview .deli-copy { animation: energy-fade 640ms ease both; }
.deli-world.is-inview .deli-light { animation: deli-sweep 9s ease-in-out infinite; }

@keyframes deli-sweep {
  0%, 100% { transform: translateX(-12%); }
  50% { transform: translateX(12%); }
}

@media (max-width: 1440px) {
  .deli-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 32%);
    padding-right: calc(var(--category-rail-width) + 1.7rem);
    gap: 1.4rem;
  }

  .deli-copy h2 { font-size: clamp(2.4rem, 3.6vw, 3.8rem); }
  .deli-pack-köşüli { --pack-height: clamp(19rem, 27vw, 25rem); }
  .deli-pack-han { --pack-height: clamp(12rem, 18vw, 15.5rem); }
}

@media (max-width: 1179px) {
  .deli-world {
    height: auto;
    min-height: 0;
  }

  .deli-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 1.6rem;
  }

  .deli-copy { max-width: 44rem; }

  .deli-stage { min-height: clamp(32rem, 60vw, 40rem); }
}

@media (max-width: 760px) {
  .deli-world { padding-block: 3rem; height: auto; min-height: 0; }

  /* align-items:center is inherited from the desktop grid; in a column flex
     container it sizes children to their content, which blew the counter out
     to 716px on a 390px screen. */
  .deli-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding-right: 0;
  }

  .deli-copy { order: 0; }
  .deli-stage-wrap { order: 1; height: auto; width: 100%; }

  .deli-copy h2 { max-width: 14ch; font-size: clamp(2.3rem, 11vw, 3.4rem); }

  .deli-selector { width: 100%; overflow-x: auto; }
  .deli-selector button { flex: 1 0 auto; }

  .deli-stage { min-height: 0; }

  .deli-engraving,
  .deli-rule,
  .deli-herb,
  .deli-seal,
  .deli-marker,
  .deli-caption,
  .deli-pepper { display: none; }

  .deli-slab { left: -1rem; right: -1rem; bottom: 2rem; }
  .deli-paper { left: 0; right: 0; bottom: 3rem; }

  .deli-products {
    position: static;
    display: flex;
    gap: 1.2rem;
    align-items: flex-end;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 1.4rem;
    scroll-snap-type: x mandatory;
  }

  .deli-pack {
    position: static;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .deli-pack-köşüli { --pack-height: 19rem; }
  .deli-pack-han { --pack-height: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deli-world.is-inview .deli-products,
  .deli-world.is-inview .deli-copy,
  .deli-world.is-inview .deli-light,
  .deli-world.is-inview .deli-engraving path {
    animation: none;
  }

  .deli-world.is-inview .deli-engraving path { stroke-dashoffset: 0; }

  .deli-pack,
  .deli-info,
  .deli-selector button {
    transition: none;
  }
}

/* ---- Meat section: restrained charcuterie decoration layer ---- */

.deli-world {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(118deg, rgba(255, 214, 156, 0.07) 0%, rgba(255, 214, 156, 0.02) 34%, transparent 60%),
    radial-gradient(ellipse at 22% 16%, rgba(232, 205, 150, 0.12), transparent 34rem),
    radial-gradient(ellipse at 68% 82%, rgba(120, 80, 45, 0.2), transparent 40rem),
    linear-gradient(135deg, #2a211a 0%, #211913 52%, #19120d 100%);
}

/* faint engraved botanical drifting in the empty upper-left / centre */
.deli-world::before {
  content: "";
  position: absolute;
  left: 4%;
  top: 4%;
  width: min(46%, 40rem);
  height: 78%;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23c69a5a' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M40 380 C 150 320 240 210 350 60'/%3E%3C/g%3E%3Cg fill='%23c69a5a'%3E%3Cellipse cx='120' cy='300' rx='36' ry='13' transform='rotate(-40 120 300)'/%3E%3Cellipse cx='165' cy='252' rx='34' ry='12' transform='rotate(-46 165 252)'/%3E%3Cellipse cx='208' cy='205' rx='32' ry='12' transform='rotate(-50 208 205)'/%3E%3Cellipse cx='250' cy='158' rx='30' ry='11' transform='rotate(-54 250 158)'/%3E%3Cellipse cx='150' cy='332' rx='30' ry='12' transform='rotate(32 150 332)'/%3E%3Cellipse cx='196' cy='286' rx='30' ry='11' transform='rotate(28 196 286)'/%3E%3Cellipse cx='240' cy='240' rx='28' ry='11' transform='rotate(24 240 240)'/%3E%3Cellipse cx='288' cy='120' rx='26' ry='10' transform='rotate(-58 288 120)'/%3E%3C/g%3E%3C/svg%3E") left top / contain no-repeat;
  opacity: 0.06;
  filter: blur(0.4px);
  transform-origin: 30% 40%;
  pointer-events: none;
}

/* warm diagonal wash already in background; ::after darkens the outer corners to frame */
.deli-world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 46% 44%, transparent 52%, rgba(9, 6, 4, 0.42) 100%);
  pointer-events: none;
}

/* refined rosemary engraving replaces the wheat */
.deli-engraving {
  left: 5%;
  top: 6%;
  width: 9%;
  height: 40%;
  opacity: 0.42;
}

.deli-world.is-inview .deli-engraving .deli-sprig-needles {
  animation-delay: 0.4s;
}

/* faint curved line guiding the eye toward the products */
.deli-stage::before {
  content: "";
  position: absolute;
  left: -34%;
  top: -46%;
  width: 118%;
  height: 150%;
  z-index: 0;
  border: 1px solid rgba(198, 154, 90, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

/* dark natural linen entering from the left edge, fading under the parchment */
.deli-stage::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 5%;
  width: 27%;
  height: 8.5rem;
  z-index: 1;
  border-radius: 4px;
  background:
    repeating-linear-gradient(46deg, rgba(44, 35, 26, 0.96) 0 3px, rgba(29, 23, 16, 0.96) 3px 6px),
    repeating-linear-gradient(136deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 5px);
  transform: rotate(-8deg);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  -webkit-mask: linear-gradient(88deg, #000 55%, transparent);
  mask: linear-gradient(88deg, #000 55%, transparent);
  pointer-events: none;
}

/* tactile parchment + stone: add a faint grain over the flat gradients */
.deli-paper {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.07'/%3E%3C/svg%3E"),
    repeating-linear-gradient(92deg, rgba(120, 96, 60, 0.05) 0 3px, transparent 3px 7px),
    radial-gradient(ellipse at 48% 38%, rgba(240, 228, 200, 0.96), rgba(206, 186, 146, 0.94) 62%, rgba(158, 136, 98, 0.94));
}

/* faint pool of warm light on the parchment */
.deli-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 42% 38%, rgba(255, 226, 172, 0.2), transparent 58%);
  pointer-events: none;
}

.deli-slab {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #372a20, #1b140e);
}

/* a small spice cluster near the foreground (one peppercorn grown into a group) */
.dp3 {
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    0.55rem 0.16rem 0 -0.06rem #5a4632,
    -0.42rem 0.34rem 0 -0.12rem #4a3a2a,
    0.2rem 0.5rem 0 -0.16rem #6f5941,
    0.85rem 0.44rem 0 -0.18rem #4a3a2a;
}

/* warmer, softer contact shadows so packs feel physically placed */
.deli-pack::before {
  width: 82%;
  height: 1.5rem;
  bottom: -0.55rem;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 74%);
  filter: blur(5px);
}

/* directional light: warm highlight on Han Şöhlat, golden edge on Köşüli */
.deli-pack-han img {
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 -2px 16px rgba(224, 122, 78, 0.3)) saturate(1.05) contrast(1.03);
}

.deli-pack-köşüli img {
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(214, 176, 112, 0.32)) saturate(1.04) contrast(1.02);
}

.deli-pack-han:hover img,
.deli-pack-han:focus-visible img {
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.58)) drop-shadow(0 -2px 22px rgba(224, 122, 78, 0.42)) saturate(1.07) contrast(1.04);
}

.deli-pack-köşüli:hover img,
.deli-pack-köşüli:focus-visible img {
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 22px rgba(214, 176, 112, 0.44)) saturate(1.06) contrast(1.03);
}

/* motion: barely-there botanical drift + parchment settling on entry */
.deli-world.is-inview::before {
  animation: deli-botanical-drift 22s ease-in-out infinite;
}

.deli-world.is-inview .deli-paper {
  animation: deli-paper-in 820ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes deli-botanical-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.06; }
  50% { transform: translate(1.4%, 1.1%) rotate(0.7deg); opacity: 0.075; }
}

@keyframes deli-paper-in {
  from { opacity: 0; transform: rotate(-3.6deg) translateY(12px); }
  to { opacity: 1; transform: rotate(-2.2deg) translateY(0); }
}

@media (max-width: 760px) {
  .deli-world::before,
  .deli-stage::before,
  .deli-stage::after { display: none; }

}

@media (prefers-reduced-motion: reduce) {
  .deli-world.is-inview::before,
  .deli-world.is-inview .deli-paper {
    animation: none;
  }
}

@media (max-width: 760px) {
  [class$="-info"] button,
  .orchard-link,
  .orchard-selector button,
  .showroom-category-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  [class$="-info"] button {
    padding-block: 10px;
  }

  /* Centring a flex row that is wider than its box pushes the first item to a
     negative offset that scrolling can never reach. "safe" keeps the centring
     while it fits and falls back to start alignment once it overflows. */
  .deli-products,
  .carbo-products,
  .tea-products,
  .energy-products {
    justify-content: safe center;
  }

  /* Same story one level up: these grids become column flex on mobile, so the
     inherited align-items:center sizes each row to its content instead of to
     the screen. Stretch them and nothing can grow past the viewport. */
  .deli-grid,
  .carbo-grid,
  .tea-grid,
  .energy-grid,
  .dairy-grid,
  .yeserje-grid {
    align-items: stretch;
    padding-right: 0;
  }

  .deli-stage-wrap,
  .carbo-stage-wrap,
  .tea-stage-wrap,
  .energy-stage-wrap,
  .dairy-stage-wrap,
  .yeserje-stage-wrap {
    width: 100%;
    min-width: 0;
  }

  /* no scene stage may exceed the screen */
  .deli-stage,
  .carbo-stage,
  .tea-stage,
  .energy-stage,
  .dairy-stage,
  .yeserje-stage {
    max-width: 100%;
  }

  .orchard-pour-stage {
    display: none;
  }

  .orchard-scrub-track {
    height: auto;
  }

  .orchard-grid {
    position: static;
    height: auto;
  }

  .orchard-copy,
  .orchard-family-layer,
  .orchard-info,
  .orchard-pack-ecil,
  .orchard-small-rail {
    opacity: 1;
  }

  .orchard-family-layer {
    transform: none;
  }

  .orchard-selector,
  .yeserje-selector,
  .dairy-selector,
  .carbo-selector,
  .tea-selector,
  .energy-selector,
  .deli-selector {
    max-width: calc(100% - 5.25rem);
  }

  .op-carousel-dot {
    position: relative;
  }

  .op-carousel-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}