/* CASA PIZZA — PHASE 25 HOTFIX31
   Dark-image consistency and slideshow stage recovery.
   - Keeps every light/dark photo in one locked geometry box.
   - Uses the prepared dark asset everywhere a dark counterpart exists.
   - Removes white image substrates from dark mode.
   - Enlarges slideshow artwork responsively without moving navigation controls. */

/* ---------- shared locked light/dark image stage ---------- */
.product-theme-image-stack,
.product-theme-image-stack.has-dark-product-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.product-theme-image-stack > img.product-theme-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
  transition: opacity 320ms ease !important;
}

.product-theme-image-stack > img.product-theme-image--dark {
  opacity: 0;
}

:root[data-theme="dark"] .product-theme-image-stack.has-dark-product-image > img.product-theme-image--light,
:root[data-theme="dark"] .has-dark-product-image .product-theme-image-stack > img.product-theme-image--light {
  opacity: 0 !important;
}

:root[data-theme="dark"] .product-theme-image-stack.has-dark-product-image > img.product-theme-image--dark,
:root[data-theme="dark"] .has-dark-product-image .product-theme-image-stack > img.product-theme-image--dark {
  opacity: 1 !important;
}

/* The source dark assets already contain a pure-black external background.
   Match the surrounding media stage to it so no white rectangle remains. */
:root[data-theme="dark"] .product-card.has-dark-product-image .product-media,
:root[data-theme="dark"] .category-photo-wrap.has-dark-product-image,
:root[data-theme="dark"] .pairing-media.has-dark-product-image,
:root[data-theme="dark"] .quick-view-media.has-dark-product-image,
:root[data-theme="dark"] .product-visual-frame.has-dark-product-image,
:root[data-theme="dark"] .home-static-hero__image-frame.has-dark-product-image,
:root[data-theme="dark"] .home-about__image.has-dark-product-image,
:root[data-theme="dark"] .cart-item-image:has(.product-theme-image-stack.has-dark-product-image) {
  background: #000000 !important;
}

/* Keep light mode exactly on its white studio surface. */
:root[data-theme="light"] .category-photo-wrap.has-dark-product-image,
:root[data-theme="light"] .pairing-media.has-dark-product-image,
:root[data-theme="light"] .quick-view-media.has-dark-product-image,
:root[data-theme="light"] .product-visual-frame.has-dark-product-image,
:root[data-theme="light"] .home-static-hero__image-frame.has-dark-product-image,
:root[data-theme="light"] .home-about__image.has-dark-product-image,
:root[data-theme="light"] .cart-item-image:has(.product-theme-image-stack.has-dark-product-image) {
  background: #ffffff !important;
}

/* Higher-specificity locks for places whose older CSS targeted raw <img> tags. */
body[data-page="home"] .home-category-grid .category-photo-wrap .product-theme-image-stack,
body[data-page="home"] .home-category-grid .category-photo-wrap .product-theme-image-stack > img.product-theme-image,
body[data-page="home"] .home-about__image .product-theme-image-stack,
body[data-page="home"] .home-about__image .product-theme-image-stack > img.product-theme-image,
body[data-page="home"] .home-static-hero__image-frame .product-theme-image-stack,
body[data-page="home"] .home-static-hero__image-frame .product-theme-image-stack > img.product-theme-image,
body[data-page="cart"] .pairing-media .product-theme-image-stack,
body[data-page="cart"] .pairing-media .product-theme-image-stack > img.product-theme-image,
.quick-view-media .product-theme-image-stack,
.quick-view-media .product-theme-image-stack > img.product-theme-image,
.product-visual-frame .product-theme-image-stack,
.product-visual-frame .product-theme-image-stack > img.product-theme-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Hero keeps the same circular crop in both themes. */
body[data-page="home"] .home-static-hero__image-frame .product-theme-image-stack {
  border-radius: 50% !important;
}
body[data-page="home"] .home-static-hero__image-frame .product-theme-image-stack > img.product-theme-image {
  border-radius: 50% !important;
  object-fit: cover !important;
}
:root[data-theme="dark"] body[data-page="home"] .home-static-hero__image-frame.has-dark-product-image {
  border-color: rgba(255,255,255,.16) !important;
}

/* ---------- homepage about-image composition ----------
   The previous tall main frame forced a 4:3 food photo into a portrait box.
   Use one wide main frame plus two equal secondary frames instead. */
@media (min-width: 821px) {
  body[data-page="home"] .home-about__media {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    align-content: start !important;
  }
  body[data-page="home"] .home-about__image--main {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  body[data-page="home"] .home-about__image:not(.home-about__image--main) {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ---------- menu slideshow ----------
   Navigation-control geometry is intentionally untouched. */
body[data-page="menu"] .menu-slideshow__link {
  display: grid !important;
  place-items: center !important;
}

body[data-page="menu"] .menu-slideshow__link picture {
  display: grid !important;
  place-items: center !important;
  padding:
    clamp(16px, 2.2vh, 30px)
    clamp(64px, 6vw, 112px)
    clamp(58px, 6.5vh, 74px) !important;
  box-sizing: border-box !important;
}

/* A fixed responsive image box makes every slide occupy the same visual stage.
   object-fit: contain preserves every source image's native proportions. */
body[data-page="menu"] .menu-slideshow__image {
  display: block !important;
  width: min(74vw, 1000px) !important;
  height: min(72svh, 720px) !important;
  max-width: calc(100% - 8px) !important;
  max-height: calc(100% - 8px) !important;
  margin: auto !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Make all dark slideshow layers one uninterrupted black stage. */
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow__viewport,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow__track,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow__slide,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow__link,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow__link picture,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow-theme-stack,
:root[data-theme="dark"] body[data-page="menu"] .menu-slideshow-theme-picture {
  background: #000000 !important;
}

/* Light mode remains a single clean white stage instead of nested rectangles. */
:root[data-theme="light"] body[data-page="menu"] .menu-slideshow__slide,
:root[data-theme="light"] body[data-page="menu"] .menu-slideshow__link,
:root[data-theme="light"] body[data-page="menu"] .menu-slideshow__link picture,
:root[data-theme="light"] body[data-page="menu"] .menu-slideshow-theme-stack,
:root[data-theme="light"] body[data-page="menu"] .menu-slideshow-theme-picture {
  background: #ffffff !important;
}

@media (max-width: 820px) {
  body[data-page="menu"] .menu-slideshow__link picture {
    padding: 18px 18px 58px !important;
  }
  body[data-page="menu"] .menu-slideshow__image {
    width: 88vw !important;
    height: min(64svh, 620px) !important;
    max-width: 100% !important;
    max-height: calc(100% - 4px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-theme-image-stack > img.product-theme-image {
    transition: none !important;
  }
}

/* HOTFIX89: hero products selected by Manager are optically centered automatically. */
body[data-page="home"] .home-static-hero__image-frame .product-theme-image-stack > img.product-theme-image[data-hero-auto-centered="1"],
body[data-page="home"] .home-static-hero__image-frame > img[data-hero-auto-centered="1"] {
  object-fit: contain !important;
  object-position: center center !important;
  transform: translate(var(--hero-auto-x, 0%), var(--hero-auto-y, 0%)) scale(1.035) !important;
  transform-origin: center center !important;
}


/* LTS33 image-performance: one active theme source + responsive variants. */
.product-theme-image-stack > img.product-theme-image--adaptive,
.combo-theme-image-stack > img.combo-theme-image--adaptive,
.combo-theme-picture-stack .combo-theme-picture--adaptive,
.menu-slideshow-theme-stack .menu-slideshow-theme-picture--adaptive { opacity: 1 !important; }
.product-theme-image--adaptive.is-theme-swapping,
.combo-theme-image--adaptive.is-theme-swapping,
.combo-theme-picture--adaptive img.is-theme-swapping,
.menu-slideshow-theme-picture--adaptive img.is-theme-swapping { opacity: 0 !important; }