.grillz-gallery-thumbnails,
img[src*="/grillz-20261104/"] {
  background: transparent;
}

img[src*="/grillz-20261104/"] {
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.grillz-gallery-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.grillz-gallery-thumbnails button {
  width: 4rem;
  height: 4rem;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 0.625rem;
  background: transparent;
  cursor: pointer;
}

.grillz-gallery-thumbnails button[aria-pressed="true"] {
  border-color: currentColor;
}

.grillz-gallery-thumbnails button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.grillz-gallery-thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  transform: none;
}

/* Keep the catalogue cutouts on each shop's existing surface. */
#product-modal :has(> #pm-img[src*="/grillz-20261104/"]) {
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  background: transparent;
}

#product-modal :has(> #pm-img[src*="/grillz-20261104/"]) > div:first-child,
#customizer-modal #cust-img[src*="/grillz-20261104/"] + div {
  display: none;
}

#product-modal #pm-img[src*="/grillz-20261104/"],
#customizer-modal #cust-img[src*="/grillz-20261104/"] {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(7rem, 26dvh, 15rem);
  max-height: none;
  object-fit: contain;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
  transform: none;
  background: transparent;
}

#product-modal :has(> #pm-img[src*="/grillz-20261104/"]) > .grillz-gallery-thumbnails,
#customizer-modal > .grillz-gallery-thumbnails {
  flex: 0 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0.375rem 0 0;
}

#customizer-modal :has(> #cust-img[src*="/grillz-20261104/"]) {
  flex: 0 0 auto;
  height: auto;
  background: transparent;
}

#customizer-modal #cust-img[src*="/grillz-20261104/"] {
  height: clamp(7rem, 22dvh, 12rem);
  padding-top: 0.5rem;
}

#customizer-modal > .grillz-gallery-thumbnails + div {
  margin-top: 0;
  padding-top: 0.625rem;
}

#product-modal .grillz-gallery-thumbnails button,
#customizer-modal > .grillz-gallery-thumbnails button {
  width: 3rem;
  height: 3rem;
  background: transparent;
}

#product-modal .grillz-gallery-thumbnails button:focus-visible,
#customizer-modal > .grillz-gallery-thumbnails button:focus-visible {
  outline: 2px solid var(--primary, currentColor);
  outline-offset: 2px;
}

/* Preview cards stay as single entry points to the actual product gallery. */
[onclick^="openProductModal("] :has(> img[src*="/grillz-20261104/"]),
[onclick^="openCustomizer("]:has(> img[src*="/grillz-20261104/"]) {
  background: transparent;
}

[onclick^="openProductModal("] img[src*="/grillz-20261104/"],
[onclick^="openCustomizer("] > img[src*="/grillz-20261104/"] {
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: none;
  background: transparent;
}

[onclick^="openCustomizer("]:not(.marquee-item) > img[src*="/grillz-20261104/"] + div {
  display: none;
}

@media (min-width: 768px) {
  #product-modal #pm-img[src*="/grillz-20261104/"] {
    height: min(52dvh, 29rem);
  }

  #product-modal .grillz-gallery-thumbnails button {
    width: 3.5rem;
    height: 3.5rem;
  }
}
/* Preserve the site's surface behind the transparent catalogue art. */
[onclick^="openProduct("] img[src*="/grillz-20261104/"],
[data-grillz-media-stage] > img[data-grillz-main] {
  background: transparent;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  /* Existing Tailwind group-hover utilities otherwise recrop the cutout. */
  transform: none !important;
  scale: none !important;
  transition-property: none;
}

[onclick^="openProduct("] :is(.standard-card, .img-zoom-hover, .aspect-square):has(> img[src*="/grillz-20261104/"]) {
  background-color: transparent;
}

[data-grillz-media-stage] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  aspect-ratio: 1;
}

:has(> [data-grillz-media-stage="19jewelz"]),
:has(> [data-grillz-media-stage="zino"]) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:has(> [data-grillz-media-stage="zino"]) {
  align-self: start;
}

[data-grillz-media-stage] + [data-grillz-gallery] {
  justify-content: center;
  align-self: start;
  margin-top: 0.75rem;
}

[data-grillz-media-stage] + [data-grillz-gallery] button {
  background: transparent;
}

[data-grillz-media-stage] + [data-grillz-gallery] button[aria-pressed="true"] {
  border-color: var(--theme-primary, currentColor);
}

/* Frostbite and Perf9s place the form next to the media stage. Keep the
   separately mounted controls under the image instead of as a third column. */
:has(> [data-grillz-media-stage="frostbite"] + [data-grillz-gallery]),
:has(> [data-grillz-media-stage="perf9s"] + [data-grillz-gallery]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: 2rem;
  row-gap: 0;
}

:is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]),
:is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]) + [data-grillz-gallery] + * {
  width: 100%;
  min-width: 0;
}

:is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]) + [data-grillz-gallery] + * {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  :has(> [data-grillz-media-stage="frostbite"] + [data-grillz-gallery]),
  :has(> [data-grillz-media-stage="perf9s"] + [data-grillz-gallery]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: max-content minmax(0, 1fr);
  }

  :is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]) {
    grid-area: 1 / 1;
  }

  :is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]) + [data-grillz-gallery] {
    grid-area: 2 / 1;
  }

  :is([data-grillz-media-stage="frostbite"], [data-grillz-media-stage="perf9s"]) + [data-grillz-gallery] + * {
    grid-area: 1 / 2 / span 2;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  :has(> [data-grillz-media-stage="frostbite"] + [data-grillz-gallery]),
  :has(> [data-grillz-media-stage="perf9s"] + [data-grillz-gallery]) {
    column-gap: 4rem;
  }
}
/* Athena: the transparent render sits directly on the product hero. */
.product-detail .product-detail-media:has(> img[data-grillz-main]) {
  min-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-detail .product-detail-media > img[data-grillz-main] {
  width: min(100%, 560px);
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  object-fit: contain;
  filter: none;
}

.product-detail-media > .grillz-gallery-thumbnails {
  justify-content: center;
  margin-block: 0.5rem 0;
}

.product-detail-media > .grillz-gallery-thumbnails button {
  border-color: var(--line);
  background: transparent;
  color: var(--gold);
}

.product-detail-media > .grillz-gallery-thumbnails button[aria-pressed="true"] {
  border-color: currentColor;
}

/* Northern Ice: inherit the surrounding off-white surface and retain the
   square artwork across both the listing and the product view. */
.product-page-grid .product-gallery:has(> img[data-grillz-main]) {
  align-self: start;
  min-height: 0;
  background: transparent;
}

.product-page-grid .product-gallery > img[data-grillz-main] {
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-page-grid .product-gallery > .grillz-gallery-thumbnails {
  position: static;
  margin: 0 0 0.75rem;
  padding: 0;
}

.product-page-grid .product-gallery > .grillz-gallery-thumbnails button {
  border-color: #c7c7c1;
  background: transparent;
  color: #111;
}

.product-page-grid .product-gallery > .grillz-gallery-thumbnails button[aria-pressed="true"] {
  border-color: currentColor;
}

.product-image:has(> img[src*="/grillz-20261104/"]) {
  background: transparent;
}

.product-image > img[src*="/grillz-20261104/"] {
  object-fit: contain;
  filter: none;
}