/* Keep complete branded packaging visible independently of translated page copy. */
.cafe-hero { aspect-ratio: 3 / 1; background: #1b1008; }
.cafe-hero img { object-fit: contain; }
.product-card.product-packaging {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f5ead6 0%, #eee0c5 54%, #3c2112 66%, #1f1208 100%);
}
.product-packaging img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 340px;
  padding: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}
.product-packaging .product-shade { display: none; }
.product-packaging .product-content {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 22px 24px 24px;
  margin-top: auto;
}
.card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.card-media img { height: auto; object-fit: contain; }
.line-media.product-pack-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #f5ead6;
}
.line-media.product-pack-media img { height: auto; object-fit: contain; }
.visual {
  display: flex;
  flex-direction: column;
  height: auto;
  background: #f5ead6;
}
.visual img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.visual::after { display: none; }
.vcopy { width: 100%; padding: 16px 14px 18px; }
.pres img { width: 100%; height: 90px; object-fit: contain; }
.cane-hero > picture, .section-hero > picture { display: contents; }
.cane-hero > picture > img, .section-hero > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  background: #f5ead6;
}
@media (max-width: 920px) {
  .cane-hero, .section-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cane-hero > picture, .section-hero > picture { display: block; order: 2; }
  .cane-hero > picture > img, .section-hero > picture > img {
    position: static;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    background: #f5ead6;
  }
  .cane-hero::after, .section-hero::after { display: none; }
  .cane-hero .hero-copy, .product-section .section-copy { order: 1; padding-bottom: 28px; }
}
@media (max-width: 560px) {
  .nav-shell { gap: 10px; }
  .nav-actions { gap: 6px; }
  .cafe-hero { aspect-ratio: auto; }
  .product-packaging img { height: 330px; }
  .product-packaging .product-content { padding: 20px 22px 24px; }
}