/* Original Eliballi product photography, consistently framed without retouching. */
.product-picture,
.product-main-image,
.quick-view-image,
.menu-item-photo {
  background: #f6f3ef;
  aspect-ratio: 1;
}

.product-picture img,
.menu-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
  transition: none;
}

.product-card:hover .product-picture img,
.menu-item-photo:hover img {
  transform: none;
}

.product-main-image img,
.quick-view-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

/* The image remains the full touch target; its affordance stays compact. */
.product-main-image > .zoom-hint {
  left: auto;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fffffff0;
  color: var(--ink);
  border: 1px solid #ffffffb3;
  box-shadow: 0 2px 12px #28252912;
  pointer-events: none;
}

.product-main-image > .zoom-hint .icon {
  width: 18px;
  height: 18px;
}

.quick-view-image {
  max-height: min(70dvh, 520px);
}

.search-item img,
.summary-item img {
  object-fit: cover;
  object-position: center;
}

.compare-table th img,
.compare-table td img {
  object-fit: contain;
  object-position: center;
  background: #f6f3ef;
}

.image-lightbox img {
  object-fit: contain;
  object-position: center;
  filter: none;
}

/* Slightly larger homepage names, with enough room to keep their existing wraps. */
#home-shop .product-card h3 {
  font-size: 17.5px;
  font-weight: 550;
}

/* Product enquiries and sharing remain on the same row. */
.product-contact-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}

.product-contact-actions .product-whatsapp {
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.product-contact-actions .product-whatsapp span {
  min-width: 0;
}

.product-contact-actions .product-share {
  min-height: 44px;
  padding: 0;
  gap: 7px;
  font-size: 14px;
  white-space: nowrap;
}

.product-facts {
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
}

.product-facts dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.product-facts dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.product-facts dt {
  color: var(--muted);
}

.product-facts dd {
  margin: 0;
  text-align: right;
}

.product-facts p {
  margin-top: 14px;
  color: var(--muted);
}

.product-detail-contact {
  margin: 0 0 20px;
  min-height: 36px;
}

@media (max-width: 760px) {
  .product-info .product-description,
  .product-info details > p,
  .product-facts {
    font-size: 13px;
    line-height: 1.8;
  }

  .product-contact-actions {
    gap: 10px;
    margin-bottom: 18px;
  }

  .product-contact-actions .product-whatsapp,
  .product-contact-actions .product-share {
    font-size: 13px;
  }
}

#home-shop .product-card :is(h3, .product-category, .product-detail) {
  margin-inline: 10px;
}

@media (max-width: 760px) {
  #home-shop .product-grid {
    column-gap: 10px;
  }

  #home-shop .product-card h3 {
    font-size: 14px;
  }

  #home-shop .product-card :is(h3, .product-category, .product-detail) {
    margin-inline: 7px;
  }
}

/* Shared empty-photo state for the approved menu. */
.product-picture.is-placeholder, .product-main-image.is-placeholder, .quick-view-image.is-placeholder { background: #f6f3ef; }
.product-picture.is-placeholder img, .product-main-image.is-placeholder img, .quick-view-image.is-placeholder img { object-fit: contain; }
.product-main-image.is-placeholder, .quick-view-image.is-placeholder { cursor: default; border: 0; overflow: hidden; }
.deposit-note { margin: 7px 0 0; color: #6a5651; font-size: 12px; line-height: 1.5; }
.product-info > .deposit-note { margin: -4px 0 15px; font-size: 14px; }
.menu-item-info .deposit-note { margin: 4px 0; font-size: 11px; }
.summary-item .deposit-note { font-size: 11px; }
.catalog-toolbar .tabs, .menu-tabs { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.catalog-toolbar .tab, .menu-tabs button { flex: 0 0 auto; white-space: nowrap; }

/* A single category row, with visible controls for touch and desktop. */
.catalog-toolbar > .category-scroll { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; width: 100%; min-width: 0; }
.category-scroll .tabs { position: relative; display: flex; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; width: auto; padding: 3px; scroll-padding-inline: 3px; scrollbar-width: none; }
.category-scroll .tabs::-webkit-scrollbar { display: none; }
.category-scroll-arrow { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #e4ded6; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background .18s ease, opacity .18s ease; }
.category-scroll-arrow .icon { width: 18px; height: 18px; }
.category-scroll-arrow:hover:not(:disabled) { background: #f5f1eb; }
.category-scroll-arrow:disabled { opacity: .28; cursor: default; }
.category-scroll-arrow[hidden] { display: none; }
.category-scroll :is(button):focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 760px) {
  .catalog-toolbar > .category-scroll { gap: 5px; }
  .category-scroll-arrow { flex-basis: 36px; width: 36px; height: 40px; }
}