/* A solid corner label keeps the full percentage readable on small photos. */
.discount-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--discount-text,var(--on-primary));font-weight:700;text-align:center;white-space:nowrap;line-height:1.2;box-shadow:0 1px 4px rgb(0 0 0 / .18)}
.discount-badge>.discount-badge-label{display:block;padding:0;font-size:inherit;font-weight:700;line-height:1.2;letter-spacing:0;color:inherit;white-space:nowrap;overflow-wrap:normal}

/* The wrapper follows the visible photo, not the taller surrounding card. */
.product-picture{container-type:inline-size;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.12}
.product-image{position:relative;max-width:100%;line-height:0}
.product-image picture{display:block}
.product-image img{width:auto;height:auto;max-width:100%;max-height:112cqw}
/* Fit both dimensions using the decoded photo ratio, including small uploads. */
.product-image.is-sized{width:min(100cqw,calc(112cqw * var(--photo-ratio)))}
.product-image.is-sized img{width:100%;height:auto;max-height:none}
.product-image-empty{width:100%;height:100%}
.product-image-empty .image-placeholder{line-height:1.5}
.gallery-photo{position:relative}
.gallery-photo img{aspect-ratio:auto;max-height:none}

/* Anchor to the actual photo; the right edge stays flush with its corner. */
.product-badges{position:absolute;inset:0;container:product-photo / size;pointer-events:none}
.product-badges>.discount-badge{position:absolute;inset:.5rem 0 auto auto;max-width:100%;padding:.4rem .65rem;font-size:.875rem;color:var(--discount-text,var(--on-primary));border-radius:2px 0 0 2px}
.gallery-photo>.product-badges>.discount-badge{font-size:1rem;padding:.5rem .8rem;top:.75rem}
.product-badges>.availability{display:inline-block;position:absolute;inset:.4rem auto auto .4rem;z-index:1;font-size:.8125rem;font-weight:700;line-height:1.4;padding:.3rem .65rem;white-space:nowrap;box-shadow:0 2px 7px rgb(0 0 0 / .1)}
.product-pricing{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .55em}
.product-price-current{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.25em .65em;max-width:100%}
.product-price-current .availability-text{font-weight:400;line-height:1.4;white-space:nowrap}
.availability-text.unavailable,.availability-text.unavailable strong{font-weight:700}
.price-unavailable{font-weight:700;text-decoration-thickness:1px}
.price-original{color:var(--muted);font-weight:400;font-size:.85em;text-decoration-thickness:1px;white-space:nowrap}
.price-final{white-space:nowrap}
.detail-pricing{display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;margin-bottom:1.5rem}
.detail-pricing .detail-price{margin:0}
.detail-availability{margin-bottom:1.5rem}

.bag-item-image{container-type:inline-size}
.bag-item-photo{position:relative;max-width:100%;line-height:0}
.bag-item-photo img{width:auto;height:auto;max-width:100%;max-height:115cqw}
.bag-item-photo--placeholder{width:100%;height:115cqw;display:grid;place-items:center}
.bag-item-photo--placeholder>.bag-item-placeholder{line-height:1.4}
.bag-item-photo>.product-badges>.discount-badge{top:.2rem;font-size:.75rem;padding:.3rem .35rem}
.bag-item-price.product-pricing{align-items:center;gap:.4rem .6rem}
.bag-price-unit{font-size:.8em;color:var(--muted);white-space:nowrap}

@media(max-width:600px){
  .product-badges>.discount-badge{font-size:.8125rem;padding:.35rem .5rem}
  .gallery-photo>.product-badges>.discount-badge{font-size:.9375rem;padding:.45rem .7rem;top:.6rem}
  .product-badges>.availability{inset:.3rem auto auto .3rem}
  .product-badges>.availability{font-size:.6875rem;padding:.25rem .4rem}
  .detail-pricing{gap:.6rem}
  .product-info .product-pricing{column-gap:.4em}
  .product-pricing .price-original{font-size:.8em}
  .product-info .product-price-current{column-gap:.5rem}
  .product-info .product-price-current .availability-text{font-size:.75rem}
}
/* Stack the two labels when a small photo cannot comfortably fit both. */
@container product-photo (max-width:10.5rem){
  .product-badges:has(>.availability)>.discount-badge{top:2.25rem}
  .product-image>.product-badges:has(>.availability)>.discount-badge{top:2.5rem}
}
/* Short, wide catalog photos have room side by side, but not for two rows. */
@container product-photo (max-width:10.5rem) and (max-height:4.5rem){
  .product-image>.product-badges:has(>.availability)>.discount-badge{top:.35rem}
}