/* --- GLNZ Compare: additive motion and responsive enhancement --- */
/* Load AFTER glnz-compare.css. No original rules or files need to be removed.
   The existing JS waits 210ms before closing: keep the exit transition at 200ms. */
.glnz-dialog {
  width: 1100px;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: clamp(12px, 2.5vw, 28px);
  box-sizing: border-box;
  transform: translateY(18px) scale(.97);
  transform-origin: center;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.2,.75,.25,1);
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
}
.glnz-dialog.glnz-visible { transform: translateY(0) scale(1); }
.glnz-dialog::backdrop { animation: glnz-backdrop-enter 200ms ease both; }
.glnz-dialog-heading { min-width: 0; gap: 12px; }
.glnz-dialog-heading h2 { min-width: 0; line-height: 1.6; }
.glnz-close, .glnz-remove { flex-shrink: 0; }
.glnz-dialog.glnz-visible .glnz-dialog-heading {
  animation: glnz-section-enter 360ms 20ms both;
}
.glnz-dialog.glnz-visible .glnz-help {
  animation: glnz-section-enter 380ms 60ms both;
}
.glnz-dialog.glnz-visible .glnz-footer {
  animation: glnz-section-enter 380ms 120ms both;
}
.glnz-dialog.glnz-visible .glnz-empty:not([hidden]) {
  animation: glnz-section-enter 420ms 80ms both;
}
/* Content moves within cells: table geometry remains stable during animation. */
.glnz-visible .glnz-product-heading, .glnz-visible .glnz-product-image {
  animation: glnz-product-enter 440ms both;
}
.glnz-visible th:nth-child(3) .glnz-product-heading,
.glnz-visible td:nth-child(3) .glnz-product-image { animation-delay: 45ms; }
.glnz-visible th:nth-child(4) .glnz-product-heading,
.glnz-visible td:nth-child(4) .glnz-product-image { animation-delay: 90ms; }
.glnz-visible th:nth-child(5) .glnz-product-heading,
.glnz-visible td:nth-child(5) .glnz-product-image { animation-delay: 135ms; }
.glnz-add, .glnz-open, .glnz-close, .glnz-remove, .glnz-clear {
  -webkit-tap-highlight-color: var(--border);
  touch-action: manipulation;
  transition: transform 180ms ease, box-shadow 180ms ease,
    border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.glnz-add { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.glnz-add[aria-pressed="true"] { animation: glnz-selected 320ms ease both; }
.glnz-add:active, .glnz-open:active, .glnz-close:active,
.glnz-remove:active, .glnz-clear:not(:disabled):active { transform: scale(.96); }
.glnz-icon { transition: transform 220ms ease; }
.glnz-product-image { transition: transform 300ms ease; }
.glnz-table td { transition: background-color 180ms ease; }
.glnz-toast:not(:empty) { animation: glnz-toast-enter 260ms ease both; }
.glnz-toast {
  box-sizing: border-box; white-space: normal; overflow-wrap: anywhere;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); line-height: 1.8;
}
.glnz-scroll {
  min-width: 0; width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--white);
}
.glnz-table { table-layout: auto; width: 100%; }
.glnz-table th, .glnz-table td { box-sizing: border-box; min-width: 180px; }
.glnz-table th:first-child {
  position: sticky; right: 0; inset-inline-start: 0; z-index: 1;
  background: var(--white); min-width: 100px; width: 100px;
}
.glnz-product-heading { min-width: 0; }
.glnz-product-image { max-width: 100%; }
.glnz-dialog .glnz-close, .glnz-dialog .glnz-remove, .glnz-dialog .glnz-clear {
  min-width: 44px; min-height: 44px;
}
/* Hover effects only on pointers that actually support hover. */
@media (hover: hover) and (pointer: fine) {
  .glnz-add:hover, .glnz-open:hover, .glnz-clear:not(:disabled):hover {
    transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow);
  }
  .glnz-open:hover .glnz-icon { transform: rotate(-8deg); }
  .glnz-close:hover, .glnz-remove:hover { transform: rotate(8deg); border-color: var(--gold); }
  .glnz-table tbody tr:hover td { background: var(--white); }
}
/* Keyboard navigation remains visible, including TV remotes acting as keyboards. */
.glnz-open:focus-visible, .glnz-add:focus-visible, .glnz-dialog button:focus-visible,
.glnz-scroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 767px) {
  .glnz-dialog { max-width: calc(100% - 16px); border-radius: 16px; padding: 16px; }
  .glnz-table th, .glnz-table td { min-width: 164px; padding: 10px; }
  .glnz-table th:first-child { min-width: 88px; width: 88px; }
  .glnz-product-image { width: 128px; height: 128px; }
  .glnz-help { font-size: .9em; }
}
@media (max-width: 359px) {
  .glnz-dialog { padding: 10px; max-width: calc(100% - 12px); border-radius: 12px; }
  .glnz-dialog-heading { gap: 6px; }
  .glnz-dialog-heading h2 { font-size: 18px; }
  .glnz-table th, .glnz-table td { min-width: 148px; padding: 8px; }
  .glnz-table th:first-child { min-width: 76px; width: 76px; font-size: .85em; }
  .glnz-product-image { width: 112px; height: 112px; }
  .glnz-scroll { margin-block: 12px; }
}
/* Landscape phones and small-height windows must retain vertical scrolling. */
@media (max-height: 500px) {
  .glnz-dialog { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 10px 16px; }
  .glnz-help { margin-block: 8px; }
  .glnz-product-image { width: 96px; height: 96px; }
}
@media (min-width: 1600px) {
  .glnz-dialog { width: 1320px; font-size: 18px; }
  .glnz-table th, .glnz-table td { min-width: 204px; padding: 18px; }
  .glnz-product-image { width: 180px; height: 180px; }
}
@media (min-width: 2400px) {
  .glnz-dialog { width: 1560px; font-size: 20px; }
  .glnz-product-image { width: 220px; height: 220px; }
}
@supports (padding: max(0px)) {
  .glnz-dialog {
    max-width: calc(100% - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
  }
}
@keyframes glnz-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes glnz-section-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glnz-product-enter {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glnz-selected {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.97); }
}
@keyframes glnz-toast-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* All added movement stops when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .glnz-dialog, .glnz-dialog *, .glnz-dialog::backdrop,
  .glnz-add, .glnz-open, .glnz-icon, .glnz-toast {
    animation: none !important; transition: none !important;
  }
  .glnz-dialog, .glnz-dialog.glnz-visible,
  .glnz-add, .glnz-open, .glnz-icon, .glnz-close, .glnz-remove, .glnz-clear {
    transform: none !important;
  }
}