/* One uncropped 2:3 manufacturer-photo frame in every catalog/card context.
   [class] preserves route-rule specificity before JS sets data-route.
   Keep this after the older route-specific compact-card overrides. */
html body #fincan-store.store-shell[class] .product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
}
html body #fincan-store.store-shell[class] article.product-card.moka-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__visual {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f8f6f2 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__top {
  position: absolute !important;
  inset: 6px 6px auto !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 !important;
  pointer-events: none;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__top > * {
  pointer-events: auto;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__photo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f8f6f2 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__photo .product-open,
html body #fincan-store.store-shell[class] .moka-card .moka-card__photo :is(img, svg.cup-cutout, picture) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 11px 10px 12px !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__title {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  height: 2.5em !important;
  min-height: 2.5em !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__title .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.5em !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__meta {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-height: 1.4em !important;
  max-height: 1.4em !important;
  margin: 5px 0 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__bottom {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__money-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 24px !important;
  height: 24px !important;
  gap: 6px !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__price,
html body #fincan-store.store-shell[class] .moka-card .moka-card__price b {
  font-size: 17px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__money-row .product-rating {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  transform: none !important;
  padding: 0 !important;
  flex: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
html body #fincan-store.store-shell[class] .moka-card .product-rating__count {
  font-size: 10px !important;
  line-height: 1 !important;
}
html body #fincan-store .product-rating--empty .product-rating__stars {
  color: #958e84 !important;
  filter: none !important;
}
html body #fincan-store .product-rating--empty .product-rating__stars svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__cta {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
html body #fincan-store.store-shell[class] .moka-card .moka-card__cta button {
  width: 100% !important;
  min-height: 42px !important;
}
html body #fincan-store .popular-track {
  align-items: stretch !important;
}
@media (min-width: 760px) {
  html body #fincan-store.store-shell[class] .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (min-width: 1100px) {
  html body #fincan-store.store-shell[class] .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* v2: card cover follows the shown image's real intrinsic ratio (--cover-ratio set by
   product-card-view), so the picture spans the full card width like the badge strip,
   with no letterbox gutters and no cropping. Badge sits under the photo, not over it.
   Doubled [class] outranks the compact catalog 120px overrides in conversion-mobile.css. */
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__visual{aspect-ratio:auto!important;height:auto!important;background:#f8f6f2!important}
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__photo{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;margin:0!important}
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__photo>.product-open{flex:none!important;width:100%!important;height:auto!important;aspect-ratio:var(--cover-ratio,1 / 1)!important;max-height:none!important}
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__photo>.product-open :is(img,svg.cup-cutout,picture){width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__photo>.cover-badge-strip{position:relative!important;inset:auto!important;flex:none!important;width:100%!important;min-height:var(--cover-badge-h,24px);height:auto!important;padding-block:4px!important;border-radius:0!important}
html body #fincan-store.store-shell[class][class] .moka-card .moka-card__top{position:absolute!important;inset:6px 6px auto!important}

/* Width-first mobile gallery. Its active photo's ratio is in the initial HTML
   and follows the existing swipe selection; viewport-height caps cause gutters. */
@media (max-width:767px){
  html body #fincan-store.store-shell[class][data-route=product] .detail-main-image{height:auto!important;aspect-ratio:auto!important;max-height:none!important;padding:0!important}
  html body #fincan-store.store-shell[class][data-route=product] .gallery-track{width:100%!important;height:auto!important;aspect-ratio:var(--gallery-ratio,1 / 1)!important;max-height:none!important;min-height:0!important;margin:0!important;border-radius:0!important;align-items:stretch!important}
  html body #fincan-store.store-shell[class][data-route=product] .gallery-slide{height:100%!important;max-height:none!important;min-height:0!important;padding:0!important;background:#f8f6f2}
  html body #fincan-store.store-shell[class][data-route=product] .gallery-slide>:is(img,svg){position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;transform:none!important;margin:0!important}
}