/* Component: ProductGallery ------------------------------------------------ */
@layer components {
  .tp-gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--tp-color-paper-well);
    border: 1px solid var(--tp-color-line-well);
    overflow: hidden;
  }

  .tp-gallery__view {
    position: absolute;
    inset: 0;
  }

  /* The ratio is carried by the image itself rather than by a percentage
     height: WooCommerce's own unlayered `img { height: auto }` rules outrank
     a layered percentage, which left square photographs letterboxed in the
     well. Cropped by object-fit, never distorted. */
  .tp-gallery__img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }

  .tp-gallery__no {
    position: absolute;
    left: 0;
    top: 0;
    padding: 8px 12px;
    background: var(--tp-color-badge-bg);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-nav-header);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
    z-index: 1;
  }

  .tp-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
  }

  .tp-gallery__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--tp-color-paper-well);
    border: 1px solid var(--tp-color-line-well);
    overflow: hidden;
    padding: 0;
    transition: border-color var(--tp-dur-fast) ease;
  }

  .tp-gallery__thumb:hover {
    border-color: var(--tp-color-brass-light);
  }

  .tp-gallery__thumb.is-current {
    border-color: var(--tp-color-brass);
  }

  .tp-gallery__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }
}