/* 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;
  }
}

/* StarPizza Site 0.5.62 — compact desktop cards mirror the mobile menu list. */
@media (min-width: 761px) {
  #menu .menu-group .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    grid-auto-rows: auto !important;
    padding: 0 !important;
  }

  #menu .menu-group .products-grid > .product-card {
    display: grid !important;
    grid-template-columns: 148px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 174px !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #menu .menu-group .products-grid > .product-card:hover {
    transform: none !important;
    border-color: #d8d8d8 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.045) !important;
  }

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

  #menu .menu-group .products-grid > .product-card > .product-visual.has-photo > img,
  #menu .menu-group .products-grid > .product-card > .product-visual.has-photo > img.product-photo {
    box-sizing: border-box !important;
    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;
  }

  #menu .menu-group .products-grid > .product-card > .product-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 4px 5px 15px !important;
  }

  #menu .product-content h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    letter-spacing: -.45px !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #menu .menu-group .products-grid > .product-card > .product-content > p {
    display: -webkit-box !important;
    overflow: hidden !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    margin: 7px 0 10px !important;
    color: #6f7377 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

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

  #menu .price-stack.compact strong {font-size: 17px !important}
  #menu .price-stack.compact s {font-size: 12px !important}
  #menu .card-badge {left: 7px !important;top: 7px !important;padding: 5px 7px !important;font-size: 9px !important}

  #menu .product-card .glovo-add-btn,
  #menu .product-card .add-configure,
  #menu .seo-card-order {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 50% !important;
    background: #f2f2f2 !important;
    color: #202124 !important;
    box-shadow: none !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  #menu .glovo-stepper.card {
    min-width: 108px !important;
    padding: 2px !important;
    background: #f2f2f2 !important;
  }
  #menu .glovo-stepper.card button {width: 34px !important;height: 34px !important}
  #menu .glovo-stepper.card b {min-width: 28px !important;font-size: 16px !important}
}

@media (min-width: 761px) and (max-width: 1180px) {
  #menu .menu-group .products-grid {grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
}