/* =========================================================================
   cards.css — the product card, wherever it is shown.

   ProductCard lives in Sections2.jsx and is used by the homepage grid and by
   /shop and the three category pages. This file exists because the bottle
   sizing used to live in index.html's inline <style>, so the shop pages —
   which do not load it — rendered the bottle at its natural size and let the
   card's overflow crop it. One definition, every surface.
   ========================================================================= */

/* The bottle is sized here rather than inline so <picture> can supply a WebP,
   and it is centred absolutely rather than sized with percentages: the card
   takes its height from aspect-ratio, and a percentage height against an
   aspect-ratio box falls back to auto — which renders the 800px PNG at full
   size and lets overflow cut it off. This is the same fix product.css applies
   to .pd-shot img, for the same reason. */
.hws-prodcard .hws-bottle {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 70%; height: 84%; max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
}