/* Hallmark · checked: 2026-10-27 · genre: modern-minimal · built: the project · redesign: polish · brand: anicebb locked · scope: navigation, overlays and control feedback · browser review pending */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R5 V3 · weakest: E, overlay focus and comparison states needed explicit treatment; preserve composition and verify behavior with regression tests */
:root {
  --ux40-ink: var(--hm39-ink);
  --ux40-paper: var(--hm39-paper);
  --ux40-warm: var(--hm39-warm);
  --ux40-blush: var(--hm39-blush);
  --ux40-line: var(--hm39-line);
  --ux40-focus: var(--hm39-focus);
  --ux40-muted: var(--hm39-muted);
  --ux40-sage: var(--hm39-sage);
  --ux40-sage-paper: var(--hm39-sage-paper);
  --ux40-font: inherit;
  --ux40-radius: .75rem;
  --ux40-duration: 160ms;
  --ux40-ease: cubic-bezier(.2, .7, .2, 1);
  --ux40-space-xs: .5rem;
  --ux40-space-sm: .75rem;
  --ux40-space-md: 1rem;
}

html { scrollbar-gutter: stable; }
html, body { overflow-x: clip; }

.nav28-group-trigger, .nav28-support-link, .nav28-item,
.nav28-mobile-support, .nav28-mobile-group summary {
  min-height: 44px;
  font-size: .875rem;
  line-height: 1.4;
  font-family: var(--ux40-font);
  letter-spacing: normal;
  text-transform: none;
}
.nav28-group-trigger, .nav28-support-link { white-space: nowrap; }
.nav28-group-trigger:active, .nav28-item:active { background: var(--ux40-blush); color: var(--ux40-ink); }
.nav28-dropdown { max-inline-size: calc(100% + 12rem); }
.nav28-item[aria-current="page"], .nav28-mobile-support[aria-current="page"] {
  color: var(--ux40-ink);
  background: var(--ux40-blush);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.nav28-item-arrow { display: none; }
.nav28-language-slot .site-language-control select { min-height: 44px; font-size: .875rem; }

[data-toggle-compare][aria-pressed="true"] {
  background: var(--ux40-sage-paper);
  color: var(--ux40-sage);
  border-color: var(--ux40-sage);
}
.v33-product-card-top [data-toggle-compare] { min-height: 44px; font-size: .875rem; }
.product-card { transition: border-color var(--ux40-duration) var(--ux40-ease); }
.product-card:hover { transform: none; box-shadow: none; }
.product-card .product-photo { transition: none; }
.product-card .photo-trigger:hover .product-photo { transform: none; }
.product-card .compare-toggle { min-height: 44px; font-size: .8125rem; }

.modal-panel, .quote-drawer { overscroll-behavior: contain; }
.drawer-body { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.modal-panel, .drawer-body { scrollbar-color: var(--ux40-muted) var(--ux40-paper); }
.modal-heading, .drawer-heading { gap: var(--ux40-space-md); align-items: center; }
.modal-heading .icon-btn, .drawer-heading .icon-btn { flex-shrink: 0; min-height: 44px; min-width: 44px; }
.modal-heading h2, .drawer-heading h2 { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
:is(.modal-panel,.quote-drawer) :is(input,select,textarea) { font-size: 1rem; }
:is(.modal-panel,.quote-drawer) :is(button,input,select,textarea,a,summary):focus-visible,
:is(.nav28-desktop,.nav28-mobile) :is(button,a,summary):focus-visible {
  outline: 3px solid var(--ux40-focus);
  outline-offset: 3px;
  transition: none;
}
:is(.modal-panel,.quote-drawer) :is(button,input,select,textarea):disabled {
  opacity: .55;
  cursor: not-allowed;
}
.modal-backdrop:not(.hidden) > .modal-panel,
.drawer-backdrop:not(.hidden) > .quote-drawer {
  animation: ux40-overlay-enter var(--ux40-duration) var(--ux40-ease);
}
@keyframes ux40-overlay-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .modal-backdrop { padding: var(--ux40-space-sm); }
  .modal-panel { max-height: calc(100dvh - 1.5rem); border-radius: var(--ux40-radius); }
  .quote-drawer { width: 100%; max-height: 100dvh; height: 100dvh; }
  .drawer-heading { padding: var(--ux40-space-md); }
  .drawer-footer { padding-bottom: max(var(--ux40-space-sm), env(safe-area-inset-bottom)); }
  .nav28-mobile-group summary { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop:not(.hidden) > .modal-panel,
  .drawer-backdrop:not(.hidden) > .quote-drawer { animation: none; }
  .product-card { transition: none; }
}