/* Shared motion polish: keep movement short, soft, and consistent. */
:root {
  --jams-motion-fast: 160ms;
  --jams-motion-standard: 240ms;
  --jams-motion-gentle: 420ms;
  --jams-page-transition-duration: 500ms;
  --jams-motion-ease: cubic-bezier(.2, .75, .25, 1);
  --jams-motion-spring: cubic-bezier(.2, .8, .2, 1);
  --motion-fast: var(--jams-motion-fast);
  --motion-normal: var(--jams-motion-gentle);
  --motion-ease: var(--jams-motion-ease);
}

@keyframes jams-content-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.995); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes jams-nav-enter {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes jams-image-enter {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes jams-pop-in {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); }
  70% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.005); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html.motion-enabled body.motion-page-enter > .navbar {
  animation: jams-nav-enter 420ms var(--jams-motion-spring) both;
}

html.motion-enabled body.motion-page-enter > main {
  animation: jams-content-enter 520ms var(--jams-motion-spring) 40ms both;
}

html.motion-enabled body.motion-page-enter > .editorial-site-footer {
  animation: jams-content-enter 520ms var(--jams-motion-spring) 110ms both;
}

html.motion-enabled .navbar .brand-icon {
  transition: transform var(--jams-motion-gentle) var(--jams-motion-spring), box-shadow var(--jams-motion-standard) ease;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-enabled .navbar .brand-row:hover .brand-icon {
    transform: rotate(-5deg) scale(1.06);
    box-shadow: 0 5px 14px rgb(36 36 36 / 12%);
  }

  html.motion-enabled .nav-links > a:not(.logout):hover {
    transform: translateY(-1px);
  }
}

html.motion-enabled :is(button, a, input, select, textarea, summary) {
  transition-timing-function: var(--jams-motion-ease);
}

html.motion-enabled :is(button:not(:disabled), a, input, select, textarea) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
}

html.motion-enabled :is(button:not(:disabled), .primary-btn, .secondary-btn, .add-to-cart-btn, .checkout-btn, .tool-btn) {
  transition-duration: var(--jams-motion-standard);
}

html.motion-enabled :is(.primary-btn, .secondary-btn, .add-to-cart-btn, .checkout-btn, .danger-btn, .tool-btn):not(:disabled):active {
  transform: scale(.975);
  transition-duration: 100ms;
}

html.motion-enabled :is(.store-product-card, .product-card, .dashboard-card, .tx-stat-card, .order-card, .inventory-item, .cart-item-card, .my-order-card, .analytics-panel, .analytics-kpi, .bulk-product-choice, .studio-panel, .design-card) {
  transition: transform var(--jams-motion-standard) var(--jams-motion-spring), box-shadow var(--jams-motion-standard) ease, border-color var(--jams-motion-standard) ease, background-color var(--jams-motion-standard) ease;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-enabled :is(.store-product-card, .product-card, .dashboard-card[href], .tx-stat-card[href], .order-card, .inventory-item, .cart-item-card, .my-order-card, .bulk-product-choice, .studio-panel, .design-card):hover {
    transform: translateY(-3px);
    box-shadow: var(--depth-raised, 0 14px 30px rgb(20 24 28 / 12%));
  }

  html.motion-enabled :is(.store-product-card, .product-card, .design-card) :is(img, .product-img, .store-product-visual) {
    transition: transform 500ms var(--jams-motion-spring);
  }

  html.motion-enabled :is(.store-product-card, .product-card, .design-card):hover :is(img, .product-img) {
    transform: scale(1.035);
  }
}

html.motion-enabled :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  transition: border-color var(--jams-motion-standard) ease, box-shadow var(--jams-motion-standard) ease, background-color var(--jams-motion-standard) ease;
}

html.motion-enabled :is(input, select, textarea):focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lux-orange, #df642f) 14%, transparent);
}

html.motion-enabled :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #b64b1b) 35%, transparent);
  outline-offset: 2px;
  transition: outline-color var(--jams-motion-fast) ease, box-shadow var(--jams-motion-fast) ease;
}

html.motion-enabled .nav-links > a:not(.logout) {
  position: relative;
  transition: color var(--jams-motion-fast) ease, opacity var(--jams-motion-fast) ease;
}

html.motion-enabled .nav-links > a:not(.logout)::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  content: "";
  transition: transform 240ms var(--jams-motion-ease);
}

html.motion-enabled .nav-links > a:not(.logout):is(:hover, :focus-visible, .active)::after {
  transform: scaleX(1);
}

html.motion-enabled body.motion-page-enter .nav-links > a {
  animation: jams-content-enter 360ms var(--jams-motion-spring) both;
}

html.motion-enabled body.motion-page-enter .nav-links > a:nth-child(2) { animation-delay: 35ms; }
html.motion-enabled body.motion-page-enter .nav-links > a:nth-child(3) { animation-delay: 70ms; }
html.motion-enabled body.motion-page-enter .nav-links > a:nth-child(4) { animation-delay: 105ms; }
html.motion-enabled body.motion-page-enter .nav-links > a:nth-child(5) { animation-delay: 140ms; }
html.motion-enabled body.motion-page-enter .nav-links > a:nth-child(n+6) { animation-delay: 175ms; }

html.motion-enabled :is(.store-product-card, .dashboard-card[href], .tx-stat-card[href], .bulk-product-choice, .inventory-item a, .order-card a) {
  transition: transform var(--jams-motion-standard) var(--jams-motion-ease), box-shadow var(--jams-motion-standard) var(--jams-motion-ease), border-color var(--jams-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-enabled body.editorial-ui.storefront-page .store-product-card:hover,
  html.motion-enabled body.editorial-ui.admin-dashboard .dashboard-card[href]:hover,
  html.motion-enabled body.editorial-ui .tx-stat-card[href]:hover,
  html.motion-enabled .bulk-product-choice:hover {
    transform: translateY(-3px);
    box-shadow: var(--depth-raised, 0 10px 24px rgb(20 24 28 / 10%));
  }

  html.motion-enabled .store-product-visual img {
    transition: transform 420ms var(--jams-motion-ease);
  }

  html.motion-enabled .store-product-visual:hover img {
    transform: scale(1.035);
  }

  html.motion-enabled :is(.primary-btn, .secondary-btn, .add-to-cart-btn, .checkout-btn, .danger-btn):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

html.motion-enabled :is(.order-tabs, [role="tablist"], .customer-order-view-switch, .customer-order-kind-switch) button {
  transition: color var(--jams-motion-fast) ease, background-color var(--jams-motion-fast) ease, border-color var(--jams-motion-fast) ease, box-shadow var(--jams-motion-fast) ease, transform var(--jams-motion-fast) ease;
}

html.motion-enabled :is(.order-tabs, [role="tablist"], .customer-order-view-switch, .customer-order-kind-switch) button:active {
  transform: scale(.97);
}

html.motion-enabled .month-bar-fill,
html.motion-enabled .breakdown-fill,
html.motion-enabled .top-product-track > div {
  transition: width 520ms var(--jams-motion-ease), height 520ms var(--jams-motion-ease), background-color var(--jams-motion-standard) ease;
}

html.motion-enabled :is(.help-center-question, details) > summary {
  transition: color var(--jams-motion-fast) ease, background-color var(--jams-motion-fast) ease;
}

html.motion-enabled details[open] > :not(summary) {
  animation: jams-content-enter 300ms var(--jams-motion-spring) both;
  transform-origin: top center;
}

html.motion-enabled :is(.modal:not(.hidden), .help-modal:not(.hidden), .system-help-modal:not(.hidden), [role="dialog"][aria-modal="true"]:not([hidden])) {
  animation: jams-page-enter 180ms ease-out both;
}

html.motion-enabled :is(.modal:not(.hidden), .help-modal:not(.hidden), .system-help-modal:not(.hidden), [role="dialog"][aria-modal="true"]:not([hidden])) :is(.modal-content, .system-help-card, [role="document"]) {
  animation: jams-pop-in 360ms var(--jams-motion-spring) both;
  transform-origin: center top;
}

html.motion-enabled :is(.dropdown-menu:not(.hidden), .dropdown-content:not(.hidden), [role="menu"]:not([hidden])) {
  animation: jams-content-enter 220ms var(--jams-motion-spring) both;
  transform-origin: top center;
}

html.motion-enabled body.mobile-menu-open .navbar .nav-links,
html.motion-enabled .image-history-panel:not([hidden]) {
  animation: jams-content-enter 260ms var(--jams-motion-spring) both;
  transform-origin: top center;
}

html.motion-enabled :is(.toast.show, .toast.visible, .notification-toast.show, .toast-message.show, [role="status"].is-visible) {
  animation: jams-pop-in 360ms var(--jams-motion-spring) both;
}

html.motion-enabled :is(.store-product-visual img, .product-card img, .cart-product-image img):not(.motion-image-pending) {
  transition: opacity var(--jams-motion-gentle) ease, transform var(--jams-motion-gentle) var(--jams-motion-spring);
}

html.motion-enabled .motion-image-ready {
  animation: jams-image-enter 520ms var(--jams-motion-spring) both;
}

html.motion-enabled :is(.store-product-card, .product-card, .order-card, .inventory-item, .tx-record, .activity-log-row, .customer-list-row, .conversation-card):focus-within {
  outline: 2px solid color-mix(in srgb, var(--lux-orange, #df642f) 38%, transparent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled body.motion-page-enter > :is(.navbar, main, .editorial-site-footer),
  html.motion-enabled body.motion-page-enter .nav-links > a,
  html.motion-enabled .motion-image-ready {
    animation: none !important;
  }

  html.motion-enabled :is(.store-product-card, .dashboard-card[href], .tx-stat-card[href], .bulk-product-choice, .inventory-item a, .order-card a) {
    transform: none !important;
  }
}

/* The Customize theme and Create controls stay fixed in place in every state. */
body.editorial-ui.studio-page :is(#jamsThemeToggle, #btnUpload, #btnAddText, #btnImageHistory) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  will-change: auto !important;
  transition-property: color, background-color, border-color, box-shadow, opacity !important;
}

body.editorial-ui.studio-page :is(#jamsThemeToggle, #btnUpload, #btnAddText, #btnImageHistory):is(
  :hover, :active, :focus, :focus-visible
) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  animation: none !important;
}

/* Keep interactive buttons still on hover and press throughout the site. */
html :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .add-to-cart-btn,
  .checkout-btn,
  .tool-btn,
  .side-tab,
  .mode-btn,
  .mini-btn,
  .icon-btn,
  .store-button,
  .store-view-button,
  .auth-primary-button,
  .login-main-btn,
  .settings-save-button,
  .settings-inline-action,
  .help-center-send-button,
  .agent-retry-button,
  .agent-file-download,
  .nav-links a,
  .admin-nav-links a
) {
  animation: none !important;
  transition: none !important;
}

html :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .add-to-cart-btn,
  .checkout-btn,
  .tool-btn,
  .side-tab,
  .mode-btn,
  .mini-btn,
  .icon-btn,
  .store-button,
  .store-view-button,
  .auth-primary-button,
  .login-main-btn,
  .settings-save-button,
  .settings-inline-action,
  .help-center-send-button,
  .agent-retry-button,
  .agent-file-download,
  .nav-links a,
  .admin-nav-links a
):is(:hover, :active) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

html :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .add-to-cart-btn,
  .checkout-btn,
  .tool-btn,
  .side-tab,
  .mode-btn,
  .mini-btn,
  .icon-btn,
  .store-button,
  .store-view-button,
  .auth-primary-button,
  .login-main-btn,
  .settings-save-button,
  .settings-inline-action,
  .help-center-send-button,
  .agent-retry-button,
  .agent-file-download,
  .nav-links a,
  .admin-nav-links a
) :where(*),
html :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .add-to-cart-btn,
  .checkout-btn,
  .tool-btn,
  .side-tab,
  .mode-btn,
  .mini-btn,
  .icon-btn,
  .store-button,
  .store-view-button,
  .auth-primary-button,
  .login-main-btn,
  .settings-save-button,
  .settings-inline-action,
  .help-center-send-button,
  .agent-retry-button,
  .agent-file-download,
  .nav-links a,
  .admin-nav-links a
)::before,
html :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .add-to-cart-btn,
  .checkout-btn,
  .tool-btn,
  .side-tab,
  .mode-btn,
  .mini-btn,
  .icon-btn,
  .store-button,
  .store-view-button,
  .auth-primary-button,
  .login-main-btn,
  .settings-save-button,
  .settings-inline-action,
  .help-center-send-button,
  .agent-retry-button,
  .agent-file-download,
  .nav-links a,
  .admin-nav-links a
)::after {
  animation: none !important;
  transition: none !important;
}

/* Include tab controls and button-style links used across the storefront. */
html :is([role="tab"], a[class*="button"]) {
  animation: none !important;
  transition: none !important;
}

html :is([role="tab"], a[class*="button"]):is(:hover, :active) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

html :is([role="tab"], a[class*="button"]) :where(*),
html :is([role="tab"], a[class*="button"])::before,
html :is([role="tab"], a[class*="button"])::after {
  animation: none !important;
  transition: none !important;
}

html input[type="file"]::file-selector-button,
html input[type="file"]::-webkit-file-upload-button {
  animation: none !important;
  transition: none !important;
}

html input[type="file"]::file-selector-button:hover,
html input[type="file"]::-webkit-file-upload-button:hover {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

/* The bulk design card should fade in without sliding over its add-design control. */
html.motion-enabled body.editorial-ui .bulk-design-section .bulk-design-entry.motion-reveal {
  transform: scale(.985);
}

html.motion-enabled body.editorial-ui .bulk-design-section .bulk-design-entry.motion-reveal.motion-visible {
  transform: scale(1);
}

body.editorial-ui .bulk-design-section #bulkAddDesignButton {
  position: relative;
  z-index: 2;
  min-height: 44px;
  margin-top: 4px;
  cursor: pointer;
}

/* Keep dashboard KPI cards inside their rounded grid while they appear. */
html.motion-enabled body.editorial-ui.admin-dashboard .analytics-kpi.motion-reveal {
  transform: scale(.985);
}

html.motion-enabled body.editorial-ui.admin-dashboard .analytics-kpi.motion-reveal.motion-visible {
  transform: scale(1);
}

html.motion-enabled body.editorial-ui.admin-dashboard .analytics-panel.motion-reveal {
  transform: scale(.985);
}

html.motion-enabled body.editorial-ui.admin-dashboard .analytics-panel.motion-reveal.motion-visible {
  transform: scale(1);
}

/* Site-wide cinematic transitions, scroll reveals, and active-tab feedback. */
@keyframes jams-page-curtain-open {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -102%, 0); }
}

@keyframes jams-page-curtain-close {
  from { transform: translate3d(0, 102%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes jams-tab-select {
  0% { opacity: .55; transform: scale(.94); }
  70% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

html.motion-enabled::after {
  position: fixed;
  z-index: 2147483001;
  inset: 0 0 auto;
  height: 4px;
  transform: scaleX(var(--jams-scroll-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, #d65c2c, #e8ad7d 58%, #f2d8ba);
  box-shadow: 0 0 16px rgb(214 92 44 / 46%);
  content: "";
  pointer-events: none;
  transition: transform 100ms linear;
}

html.motion-enabled body::before {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate3d(0, -102%, 0);
  background:
    radial-gradient(circle at 74% 24%, rgb(220 151 103 / 70%), transparent 28%),
    linear-gradient(132deg, #191b20 0%, #312a25 60%, #8d6247 100%);
  color: rgb(255 250 244 / 94%);
  content: "JAMS / APPAREL";
  font: 600 clamp(1rem, 2vw, 1.5rem)/1 var(--font-sans, Inter, sans-serif);
  letter-spacing: .24em;
  opacity: 1;
  pointer-events: none;
  visibility: hidden;
}

html.motion-enabled body.motion-page-enter::before {
  transform: translate3d(0, 0, 0);
  animation: jams-page-curtain-open var(--jams-page-transition-duration) cubic-bezier(.76, 0, .24, 1) both;
  visibility: visible;
}

html.motion-enabled body.motion-page-exit::before {
  transform: translate3d(0, 102%, 0);
  animation: jams-page-curtain-close var(--jams-page-transition-duration) cubic-bezier(.72, 0, .28, 1) both;
  visibility: visible;
}

html.motion-enabled .motion-reveal {
  filter: blur(8px);
  transform: translate3d(0, 28px, 0) scale(.985);
  transition:
    opacity 720ms var(--jams-motion-spring),
    transform 720ms var(--jams-motion-spring),
    filter 640ms ease;
  will-change: opacity, transform, filter;
}

html.motion-enabled .motion-reveal.motion-visible {
  filter: blur(0);
  will-change: auto;
}

html.motion-enabled :is(
  [role="tab"][aria-selected="true"],
  .side-tab.active,
  .mode-btn.active,
  .order-tabs button.active,
  .inventory-tabs button.active,
  .customer-order-view-switch button.active,
  .customer-order-kind-switch button.active
) {
  animation: jams-tab-select 320ms var(--jams-motion-spring) both;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-enabled body.editorial-ui :is(
    .primary-btn,
    .secondary-btn,
    .add-to-cart-btn,
    .checkout-btn,
    .danger-btn,
    .store-button,
    .store-view-button,
    .tool-btn
  ):not(:disabled):hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 10px 24px -14px rgb(35 29 22 / 48%);
  }

  /* Customize tools stay in place; other buttons keep the site's hover motion. */
  html.motion-enabled body.editorial-ui.studio-page .studio-tools .tool-btn:not(:disabled):hover {
    transform: none;
  }

  html.motion-enabled body.editorial-ui :is(
    .dashboard-card[href],
    .tx-stat-card[href],
    .order-card,
    .inventory-item,
    .my-order-card,
    .analytics-panel,
    .analytics-kpi,
    .bulk-product-choice,
    .help-center-question
  ):hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: var(--depth-raised, 0 18px 36px rgb(20 24 28 / 14%));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled::after {
    box-shadow: none;
    transition: none;
  }

  html.motion-enabled body::before,
  html.motion-enabled body.motion-page-enter::before,
  html.motion-enabled body.motion-page-exit::before {
    display: none !important;
    animation: none !important;
  }

  html.motion-enabled .motion-reveal,
  html.motion-enabled .motion-reveal.motion-visible {
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.motion-enabled :is(
    [role="tab"][aria-selected="true"],
    .side-tab.active,
    .mode-btn.active,
    .order-tabs button.active,
    .inventory-tabs button.active,
    .customer-order-view-switch button.active,
    .customer-order-kind-switch button.active
  ) {
    animation: none !important;
  }
}

/* Keep the dashboard's grouped KPI dividers clipped to the shared card. */
html.motion-enabled body.editorial-ui.admin-dashboard main.container :is(.dashboard-summary-grid, .dashboard-pipeline-grid) {
  overflow: hidden;
}

html.motion-enabled body.editorial-ui.admin-dashboard main.container :is(.dashboard-summary-grid, .dashboard-pipeline-grid) > .dashboard-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Editorial hero copy reveals in a calm stagger after the hero enters view. */
html.motion-enabled body.storefront-page .store-hero-copy.motion-reveal > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 560ms var(--jams-motion-spring), transform 560ms var(--jams-motion-spring);
}

html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > :nth-child(2) { transition-delay: 70ms; }
html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > :nth-child(3) { transition-delay: 135ms; }
html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > :nth-child(4) { transition-delay: 200ms; }
html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > :nth-child(5) { transition-delay: 245ms; }

/* Warm cursor-follow light and restrained tilt add depth to product photography. */
@media (hover: hover) and (pointer: fine) {
  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight {
    transform-style: preserve-3d;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight:hover {
    transform: translateY(-3px) perspective(900px) rotateX(var(--motion-tilt-x, 0deg)) rotateY(var(--motion-tilt-y, 0deg));
    will-change: transform;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight .store-product-visual {
    position: relative;
    overflow: hidden;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight .store-product-visual::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--motion-spot-x, 50%) var(--motion-spot-y, 50%), rgb(229 173 131 / 22%), transparent 72%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
    mix-blend-mode: screen;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-pointer-active .store-product-visual::after {
    opacity: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled body.storefront-page .store-hero-copy.motion-reveal > *,
  html.motion-enabled body.storefront-page .store-hero-copy.motion-visible > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight {
    transform: none !important;
    will-change: auto;
  }

  html.motion-enabled body.storefront-page .store-product-card.motion-spotlight .store-product-visual::after {
    display: none;
  }
}

/* Customize's panels and tool cards stay anchored; hover can still change color/shadow. */
body.editorial-ui.studio-page .studio-top-actions :is(#btnTutorial, [data-save-design]) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  will-change: auto !important;
  transition-property: color, background-color, border-color, box-shadow !important;
}

body.editorial-ui.studio-page .studio-grid > .studio-panel:is(:hover, :active, :focus-within),
body.editorial-ui.studio-page .studio-tools .tool-btn:is(:hover, :active, :focus, :focus-visible),
body.editorial-ui.studio-page :is(.side-tab, .mode-btn, .ai-chip):is(:hover, :active, :focus, :focus-visible),
body.editorial-ui.studio-page .studio-top-actions :is(#btnTutorial, [data-save-design]):is(:hover, :active, :focus, :focus-visible) {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  animation: none !important;
}