/* Subtle, input-aware feedback. Product/navigation state remains native. */
body.jj-neutral-ui.jj-refined-ui {
  --jj-interaction-ease: cubic-bezier(.22,1,.36,1);
}
body.jj-neutral-ui.jj-refined-ui :is(
  .button,.sgc-button,.jj-navigation__sizes a,.jj-navigation__material,
  .jj-navigation__root-link,.jj-navigation__series-title,
  .jj-catalog-filters__option,.jj-catalog-filters__chip,
  .variant-picker__button,.quantity-selector__input button
) {
  transition: scale .24s var(--jj-interaction-ease),background-color .3s ease,
    border-color .3s ease,box-shadow .3s ease;
}
body.jj-neutral-ui.jj-refined-ui [data-jj-pressed] {
  scale: .987;
  transition-duration: .1s;
}
body.jj-neutral-ui.jj-refined-ui :is(
  .jj-navigation__root-link,.jj-navigation__series-title,
  .jj-catalog-filters__option
)[data-jj-pressed] { background-color: rgb(110 122 104 / 7%); }
body.jj-neutral-ui.jj-refined-ui :is(
  .block-product-image__image-wrapper,.block-product-card__image-wrapper
) { transition: scale .24s var(--jj-interaction-ease); }
body.jj-neutral-ui.jj-refined-ui :is(
  .block-product-image__image-wrapper,.block-product-card__image-wrapper
)[data-jj-pressed] { scale: .992; transition-duration: .1s; }

/* Preserve real focus/selected states; no hover prerequisite on touch. */
body.jj-neutral-ui.jj-refined-ui .jj-catalog-filters__option:has(input:checked) {
  background-color: #edf1e9;
  border-color: #a8b59f;
}
body.jj-neutral-ui.jj-refined-ui .jj-catalog-filters__chevron {
  transition: transform .32s var(--jj-interaction-ease);
}
body.jj-neutral-ui.jj-refined-ui .jj-navigation__series-title > span[aria-hidden],
body.jj-neutral-ui.jj-refined-ui .jj-navigation__material > span[aria-hidden] {
  transition: translate .32s var(--jj-interaction-ease);
}

@media (hover:hover) and (pointer:fine) {
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__series-title:hover > span[aria-hidden],
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__material:hover > span[aria-hidden] { translate: 1px -1px; }
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__sizes a:hover { scale: 1.008; }
  body.jj-neutral-ui.jj-refined-ui .button:not([disabled]):not([aria-disabled="true"]):not(.loading):active { scale: .987; transition-duration: .1s; }
}

/* One menu animation per opening. Existing drawer motion is left to the theme. */
@keyframes jj-panel-appear {
  from { opacity: .65; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
body.jj-neutral-ui.jj-refined-ui .header__container .jj-navigation--desktop details[open] > .jj-navigation__panel {
  animation: jj-panel-appear .38s var(--jj-interaction-ease);
}
body.jj-neutral-ui.jj-refined-ui .jj-navigation--mobile details[open] > .jj-navigation__panel,
body.jj-neutral-ui.jj-refined-ui .jj-navigation--mobile details[open] > .jj-navigation__size-group,
body.jj-neutral-ui.jj-refined-ui .jj-catalog-filters__materials[open] > .jj-catalog-filters__options {
  animation: jj-panel-appear .34s var(--jj-interaction-ease);
}

/* A larger touch target; the comparison line itself never moves automatically. */
body.jj-neutral-ui.jj-refined-ui .before-after__cursor--default {
  position: relative;
  width: 44px;
  height: 48px;
  transition: scale .24s var(--jj-interaction-ease),box-shadow .3s ease;
}
body.jj-neutral-ui.jj-refined-ui .before-after__cursor:active .before-after__cursor--default {
  scale: .98;
  transition-duration: .1s;
  box-shadow: 0 0 0 4px rgb(30 36 29 / 8%);
}
body.jj-neutral-ui.jj-refined-ui .before-after__cursor--default::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -6px;
  border: 1px solid #6c7867;
  border-radius: inherit;
  opacity: 0;
}
@keyframes jj-handle-cue {
  0% { opacity: 0; scale: .98; }
  35% { opacity: .24; }
  100% { opacity: 0; scale: 1.14; }
}
body.jj-neutral-ui.jj-refined-ui [data-jj-handle-cue]::after {
  animation: jj-handle-cue 1.25s var(--jj-interaction-ease) 1;
}

/* Only shown when the comparison actually overflows on a touch-sized screen. */
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  padding: 12px 14px;
  margin-block: 12px 0;
  background: rgb(250 251 249 / 97%);
  border: 1px solid #dce1d7;
  border-radius: 10px;
  color: #535e50;
  font-size: 12px;
  line-height: 1.5;
}
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide[hidden] { display: none; }
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide__track {
  position: relative;
  display: block;
  flex: 0 0 88px;
  height: 3px;
  border-radius: 4px;
  background: #dce1d7;
  overflow: hidden;
}
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide__thumb {
  position: absolute;
  inset-block: 0;
  left: var(--jj-scroll-position,0%);
  width: 32%;
  border-radius: inherit;
  background: #53634d;
}
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide__arrow { display: inline-block; margin-inline-end: 6px; }
@keyframes jj-swipe-cue { 0%,100% { translate: 0; } 45% { translate: 3px 0; } }
body.jj-neutral-ui.jj-refined-ui .jj-swipe-guide[data-jj-guide-cue] .jj-swipe-guide__arrow {
  animation: jj-swipe-cue 1.1s var(--jj-interaction-ease) 1;
}
/* Match the existing section entrances to the quieter card rhythm. */
@media (prefers-reduced-motion:no-preference) {
  body.jj-neutral-ui.jj-refined-ui .motion-reveal {
    transition: opacity .7s var(--jj-interaction-ease),transform .7s var(--jj-interaction-ease);
  }
  body.jj-neutral-ui.jj-refined-ui .motion-reveal:not(.is-visible) { transform: translateY(8px); }
}
@media (prefers-reduced-motion:reduce) {
  body.jj-neutral-ui.jj-refined-ui [data-jj-pressed],
  body.jj-neutral-ui.jj-refined-ui .before-after__cursor:active .before-after__cursor--default,
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__sizes a:hover,
  body.jj-neutral-ui.jj-refined-ui .button:active { scale: none !important; }
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__series-title > span[aria-hidden],
  body.jj-neutral-ui.jj-refined-ui .jj-navigation__material > span[aria-hidden] { translate: none !important; }
  body.jj-neutral-ui.jj-refined-ui :is(.jj-navigation__panel,.jj-navigation__size-group,.jj-catalog-filters__options,.jj-swipe-guide__arrow),
  body.jj-neutral-ui.jj-refined-ui [data-jj-handle-cue]::after { animation: none !important; }
  body.jj-neutral-ui.jj-refined-ui :is(.button,.sgc-button,.jj-navigation a,.jj-navigation summary,
    .jj-catalog-filters__option,.jj-catalog-filters__chip,.jj-catalog-filters__chevron,
    .variant-picker__button,.quantity-selector__input button,.before-after__cursor--default,
    .block-product-image__image-wrapper,.block-product-card__image-wrapper) { transition: none !important; }
}