.product-visual { position: relative; }
.product-zoom-trigger {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: #fff; color: #24251f; border: 1px solid #dcd9d0; border-radius: 50%;
  box-shadow: 0 2px 8px #1719160d;
}
.product-zoom-trigger:hover { background: #f1ede4; border-color: #9b8156; }
.product-zoom-trigger svg { width: 21px; height: 21px; }
.detail-image, .watch-media { position: relative; }
.detail-image > .product-zoom-trigger, .watch-media > .product-zoom-trigger { right: auto; left: 14px; top: 14px; }

.image-zoom-dialog {
  width: min(1180px, calc(100vw - 48px)); height: min(900px, 92dvh);
  max-width: calc(100vw - 48px); max-height: 92dvh; margin: auto;
  background: #fff; color: #24251f; overflow: hidden; border-radius: 4px;
}
.image-zoom-dialog[open] { display: flex; flex-direction: column; }
.image-zoom-dialog::backdrop { background: #10110ee0; backdrop-filter: blur(5px); }
.zoom-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 24px; border-bottom: 1px solid #ece9e2; flex-shrink: 0;
}
.zoom-header > div { min-width: 0; }
.zoom-header .eyebrow { font-size: 9px; letter-spacing: 2px; margin: 0 0 6px; color: #836b43; }
.zoom-header h2 { margin: 0; font: 400 21px/1.25 Georgia, serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zoom-header .icon-button { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #dedbd3; border-radius: 50%; }
.zoom-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; touch-action: none; user-select: none; }
.zoom-stage:focus-visible { outline: 2px solid #9b8156; outline-offset: -4px; }
.zoom-stage.is-zoomed { cursor: grab; }
.zoom-stage.is-zoomed.is-dragging { cursor: grabbing; }
.zoom-image { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; object-fit: contain; transform-origin: center; pointer-events: none; user-select: none; }
.zoom-status { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 24px; text-align: center; font-size: 14px; color: #66665d; }
.zoom-footer { padding: 13px 24px 16px; border-top: 1px solid #ece9e2; flex-shrink: 0; background: #faf9f6; }
.zoom-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.zoom-controls button { height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #dcd9d0; border-radius: 3px; background: #fff; padding: 0 12px; }
.zoom-controls button:hover:enabled { background: #f1ede4; border-color: #9b8156; }
.zoom-controls button:disabled { opacity: .4; cursor: default; }
.zoom-controls [data-zoom-action="reset"] { margin-left: 10px; font-size: 12px; }
.zoom-level { min-width: 42px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.zoom-hint { margin: 10px 0 0; text-align: center; font-size: 11px; line-height: 1.5; color: #68695f; }

.whatsapp-float {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 24px; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px;
  padding: 12px 20px 12px 15px; border-radius: 999px; background: #146d48; color: #fff;
  text-decoration: none; font-size: 13px; font-weight: 500;
  border: 1px solid #ffffff40; box-shadow: 0 4px 18px #102b242b;
}
.whatsapp-float svg { width: 29px; height: 29px; fill: currentColor; stroke: none; }
.whatsapp-float:hover { background: #105b3b; }
.whatsapp-float:focus-visible { outline-color: #146d48; outline-offset: 4px; }
body:has(dialog[open]) .whatsapp-float,
body:has(.analytics-consent:not([hidden])) .whatsapp-float { visibility: hidden; }

@media (max-width: 740px) {
  .product-zoom-trigger { top: 8px; right: 8px; }
  .image-zoom-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .zoom-header { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; gap: 12px; }
  .zoom-header h2 { font-size: 19px; }
  .zoom-footer { padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .zoom-hint { font-size: 11px; }
  .whatsapp-float { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; padding: 0; }
  .whatsapp-float span { display: none; }
  .has-cart .whatsapp-float { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}