/* ==========================================================================
   ITSC product visual — one presentation for every product (markup: product_visual() in app/lib/product_image.php).
   The ESET artwork is shown unchanged; only the frame is standard: same 4:3 canvas, background, padding, centring,
   maximum product size (74% of the canvas), radius, floor shadow — for every product and every size.
   Loaded by the public site and the admin (preview), so both show exactly the same thing.
   ========================================================================== */
.pv {
  --pv-radius: 16px;
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--pv-radius); border: 1px solid #E3E8EE; overflow: hidden; isolation: isolate; container-type: inline-size;
  background: radial-gradient(135% 105% at 50% 40%, #FFFFFF 58%, #EEF2F6 100%);
}
/* uniform floor shadow under every product */
.pv::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 54%; height: 7%; transform: translateX(-50%); z-index: 0;
  background: radial-gradient(closest-side, rgba(14, 27, 42, .13), rgba(14, 27, 42, 0)); pointer-events: none; }
/* the artwork: centred, proportional, never cropped or stretched, same maximum size for all */
/* A fixed 74% box inside the frame + object-fit (not max-height: 74%): Safari/iOS does not resolve a percentage
   max-height against a height that comes from aspect-ratio, so the artwork rendered at full size and was cropped. */
.pv__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: block; width: 74%; height: 74%; max-width: none; max-height: none; margin: auto; object-fit: contain; object-position: center; }
.pv__img--cutout { filter: drop-shadow(0 10px 14px rgba(14, 27, 42, .12)); }

/* no official artwork: flat branded ESET tile (teal of the official ESET line) + "ESET" + product name — never a package */
.pv--empty::after { display: none; }
.pv__ph { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 84%; text-align: center; }
.pv__tile { display: flex; align-items: center; justify-content: center; width: clamp(44px, 36cqw, 180px); aspect-ratio: 1; border-radius: 24%;
  background: linear-gradient(150deg, #1FA8AB 0%, #0C8A91 48%, #09646F 100%); color: #FFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -12px rgba(9, 100, 111, .55); }
.pv__tile svg { width: 42%; height: auto; }
.pv__brand { margin-top: clamp(6px, 4.6cqw, 22px); font-size: clamp(9px, 3.3cqw, 15px); font-weight: 700; letter-spacing: .32em; padding-left: .32em; color: #0A6F79; }
.pv__name { margin-top: clamp(2px, .9cqw, 6px); font-family: inherit; font-weight: 650; font-size: clamp(13px, 6.4cqw, 32px); line-height: 1.12; letter-spacing: -.01em; color: #0E1B2A; }
.pv__meta { display: none; }

/* sizes change only the frame (width / radius), never the composition */
.pv--hero, .pv--product, .pv--biz { --pv-radius: 24px; }
.pv--compare { --pv-radius: 12px; }
.pv--thumb { --pv-radius: 10px; width: 64px; flex-shrink: 0; }
.pv--thumb .pv__name, .pv--thumb .pv__brand { display: none; }
.pv--thumb .pv__tile { width: 34px; }
.pv--thumb .pv__mark { width: 26px; height: 26px; border: 0; }
.pv--thumb::after { bottom: 7%; }
@media (max-width: 640px) { .pv--hero, .pv--product, .pv--biz { --pv-radius: 20px; } .pv--thumb { width: 48px; } }