/* Product panels alignment v1 — load after fanshops-v15-product-v3.css. */
@media (min-width: 992px) {
  html.fs-v15-preview body.type-product.fs-v3-product-unified
  #product-detail-form > .product-top.fs-v3-two-column {
    align-items: stretch !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  #product-detail-form > .product-top.fs-v3-two-column > :is(.p-image-wrapper, .p-info-wrapper) {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* The gallery follows the natural height of the product information.
     Any difference is absorbed by the neutral image area, not by empty
     white space below the thumbnails. */
  html.fs-v15-preview body.type-product.fs-v3-product-unified
  #product-detail-form > .product-top.fs-v3-two-column > .p-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-image-wrapper > .p-image {
    flex: 1 1 380px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 380px !important;
    max-height: none !important;
    background: #f4f4f0 !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-image-wrapper > .p-image .p-main-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    max-height: none !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-image-wrapper > .p-thumbnails-wrapper {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  /* Remove the oversized final gap while keeping every optional product
     block in its natural document flow. */
  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-info-wrapper > .social-buttons-wrapper {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }

  /* Keep both desktop columns aligned in their closed state, but do not
     stretch the gallery whenever the customer opens the size picker. */
  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-info-wrapper .fs-compact-variants {
    position: relative !important;
    z-index: 80 !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-info-wrapper .fs-compact-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(360px, calc(100vh - 180px)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform-origin: top center;
    border: 1px solid #d9ddd7 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(24, 25, 22, 0.2) !important;
  }

  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-info-wrapper .fs-compact-variants.is-open .fs-compact-panel {
    animation: fs-product-picker-in 180ms ease-out both;
  }
}

@keyframes fs-product-picker-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fs-v15-preview body.type-product.fs-v3-product-unified
  .p-info-wrapper .fs-compact-variants.is-open .fs-compact-panel {
    animation: none !important;
  }
}