/* StarPizza Site 0.5.16 — isolated product-card layout.
   This file is loaded after app.css under a unique URL so proxy/browser caches
   cannot keep the conflicting 0.5.14/0.5.15 card rules. */

/* Desktop and tablet: one stable media viewport for every source aspect ratio. */
@media (min-width: 761px) {
  .menu-group .products-grid {
    align-items: stretch !important;
    grid-auto-rows: 1fr;
  }

  .menu-group .products-grid > .product-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 455px !important;
    overflow: hidden !important;
  }

  .menu-group .products-grid > .product-card > .product-visual,
  .menu-group .products-grid > .product-card > .product-visual.has-photo {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  .menu-group .products-grid > .product-card > .product-visual.has-photo > img,
  .menu-group .products-grid > .product-card > .product-visual.has-photo > img.product-photo {
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 12px !important;
    display: block !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  .menu-group .products-grid > .product-card > .product-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .menu-group .products-grid > .product-card > .product-content > p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
  }

  .menu-group .products-grid > .product-card > .product-content > .product-bottom {
    margin-top: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .menu-group .products-grid > .product-card {
    min-height: 415px !important;
  }

  .menu-group .products-grid > .product-card > .product-visual,
  .menu-group .products-grid > .product-card > .product-visual.has-photo {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    flex-basis: 205px !important;
  }
}

/* Mobile keeps the compact list card, but also displays the whole photograph. */
@media (max-width: 760px) {
  .menu-group .products-grid > .product-card {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .menu-group .products-grid > .product-card > .product-visual,
  .menu-group .products-grid > .product-card > .product-visual.has-photo {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    flex: 0 0 112px !important;
    aspect-ratio: auto !important;
    padding: 5px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #fff !important;
  }

  .menu-group .products-grid > .product-card > .product-visual.has-photo > img,
  .menu-group .products-grid > .product-card > .product-visual.has-photo > img.product-photo {
    position: absolute !important;
    inset: 5px !important;
    display: block !important;
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .menu-group .products-grid > .product-card {
    grid-template-columns: 102px minmax(0, 1fr) !important;
  }

  .menu-group .products-grid > .product-card > .product-visual,
  .menu-group .products-grid > .product-card > .product-visual.has-photo {
    width: 102px !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    flex-basis: 102px !important;
  }
}