/* =============================================================================
 * shop-motion.css — Motion Phase 1: instant feedback (2026-11-02).
 *
 * Loaded after shop.css, only when config('shop.motion.enabled'). Everything
 * here is presentational and additive: with this file absent the storefront
 * looks exactly as before. Only transform + opacity animate (cheap on low-end
 * Android). Behaviour that toggles these classes: public/js/shop-motion.js.
 *
 * Motion tokens live here (not in shop.css) so turning the flag off removes
 * them too; later phases reuse them.
 * ========================================================================== */

:root {
  --em-dur-fast: 120ms;
  --em-dur-base: 200ms;
  --em-dur-slow: 320ms;
  --em-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --em-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --em-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------------------
 * 1.1 Buttons — press-down + loading state
 * ------------------------------------------------------------------------ */
.em-btn {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              transform var(--em-dur-fast) var(--em-ease-out);
}
.em-btn:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  transform: scale(0.97);
}
.em-qtystepper__btn {
  transition: transform var(--em-dur-fast) var(--em-ease-out);
}
.em-qtystepper__btn:active {
  transform: scale(0.88);
}

@keyframes em-m-spin {
  to { transform: rotate(360deg); }
}
/* Label stays in place (keeps the width); a spinner sits over it. */
.em-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.em-btn.is-loading > * {
  visibility: hidden;
}
.em-btn.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-color: #fff #fff transparent transparent;
  border-radius: 50%;
  animation: em-m-spin 0.7s linear infinite;
}
.em-btn--ghost.is-loading::before {
  border-color: var(--em-primary) var(--em-primary) transparent transparent;
}

/* ---------------------------------------------------------------------------
 * 1.2 Wishlist heart — burst on save, shrink on remove, count bump
 * ------------------------------------------------------------------------ */
.em-wish:not(.em-product__wish) {
  position: relative;
}
.em-wish .fa {
  display: inline-block;
}

@keyframes em-m-heart-in {
  0%   { transform: scale(0.4); }
  50%  { transform: scale(1.35); }
  75%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes em-m-heart-out {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.7); }
  100% { transform: scale(1); }
}
@keyframes em-m-ring {
  0%   { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(1.6); }
}
.em-wish.is-burst .fa {
  animation: em-m-heart-in 0.45s var(--em-ease-out);
}
.em-wish.is-burst::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid #E0245E;
  border-radius: 50%;
  pointer-events: none;
  animation: em-m-ring 0.5s var(--em-ease-out) forwards;
}
.em-wish.is-unburst .fa {
  animation: em-m-heart-out 0.3s var(--em-ease-out);
}

@keyframes em-m-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(0.88); }
  75%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.em-wishlink__count.is-bumped {
  animation: em-m-bump 0.5s ease-out;
}

/* ---------------------------------------------------------------------------
 * 1.3 Cart — changed money flashes, qty rolls, lines leave + reflow
 * ------------------------------------------------------------------------ */
@keyframes em-m-flash {
  0%   { background-color: rgba(238, 194, 0, 0.45); }
  100% { background-color: rgba(238, 194, 0, 0); }
}
.is-changed {
  border-radius: 3px;
  animation: em-m-flash 0.9s ease-out;
}

@keyframes em-m-roll-up {
  0%   { opacity: 0; transform: translateY(45%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes em-m-roll-down {
  0%   { opacity: 0; transform: translateY(-45%); }
  100% { opacity: 1; transform: translateY(0); }
}
.em-qtystepper__input.is-roll-up   { animation: em-m-roll-up var(--em-dur-base) var(--em-ease-out); }
.em-qtystepper__input.is-roll-down { animation: em-m-roll-down var(--em-dur-base) var(--em-ease-out); }

.em-cartline {
  transition: opacity var(--em-dur-base) ease, transform var(--em-dur-base) var(--em-ease-out);
}
.em-cartline.is-leaving {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}
.em-cartline.is-reflowing {
  transition: transform var(--em-dur-slow) var(--em-ease-out);
}

/* ---------------------------------------------------------------------------
 * 1.4 Toasts — one shared stack (window.emToast)
 * ------------------------------------------------------------------------ */
.em-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: var(--em-z-drawer, 1200);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: 420px;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 767px) {
  /* Clear the mobile tab bar + the iPhone home indicator. */
  .em-toasts {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}
.em-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--em-ink);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(11, 28, 48, 0.22);
  font-size: 0.875rem;
  line-height: 1.4;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--em-dur-base) ease, transform var(--em-dur-slow) var(--em-ease-out);
}
.em-toast.is-open {
  opacity: 1;
  transform: none;
}
.em-toast.is-closing {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: var(--em-dur-base);
  transition-timing-function: var(--em-ease-in);
}
.em-toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--em-primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.em-toast--error .em-toast__icon { background: var(--em-danger); }
.em-toast--info  .em-toast__icon { background: #475569; }
.em-toast__msg {
  flex: 1 1 auto;
  margin: 0;
}
.em-toast__action {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--em-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.em-toast__action:hover, .em-toast__action:focus { text-decoration: underline; color: var(--em-accent); }
.em-toast__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.em-toast__close:hover, .em-toast__close:focus { color: #fff; }

/* ---------------------------------------------------------------------------
 * 1.5 Forms — shake on error, tick when valid
 * ------------------------------------------------------------------------ */
@keyframes em-m-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.is-shaking {
  animation: em-m-shake 0.4s ease-in-out;
}

.em-field--valid .em-input {
  border-color: var(--em-primary);
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23176621' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition: border-color var(--em-dur-base) ease;
}

/* ---------------------------------------------------------------------------
 * Reduced motion: keep every state change, drop the movement.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --em-dur-fast: 1ms;
    --em-dur-base: 1ms;
    --em-dur-slow: 1ms;
  }
  .em-btn:active:not(:disabled),
  .em-qtystepper__btn:active { transform: none; }
  .em-wish.is-burst .fa,
  .em-wish.is-unburst .fa,
  .em-wishlink__count.is-bumped,
  .em-qtystepper__input.is-roll-up,
  .em-qtystepper__input.is-roll-down,
  .is-shaking { animation: none; }
  .em-wish.is-burst::after { display: none; }
  .em-cartline.is-leaving { transform: none; }
  .em-toast, .em-toast.is-closing { transform: none; }
  .em-btn.is-loading::before { animation-duration: 1.6s; }
}

/* =============================================================================
 * Motion Phase 2 — browsing (2026-11-02)
 * ========================================================================== */

/* 2.1 Product cards: picture eases in a touch on hover; press-down on touch. */
.em-product__media {
  overflow: hidden;
}
/* A transformed img paints above earlier positioned siblings — keep the
 * discount / flash / out-of-stock badges on top of the zoom. */
.em-product__media > .em-badge,
.em-product__media > .em-product__oos {
  z-index: 1;
}
.em-product__media img {
  transition: transform var(--em-dur-slow) var(--em-ease-out), opacity 0.35s ease;
}
@media (hover: hover) {
  .em-product:hover .em-product__media img {
    transform: scale(1.04);
  }
}
@media (hover: none) {
  .em-product:active {
    transform: scale(0.985);
    transition-duration: var(--em-dur-fast);
  }
}

/* 2.2 Reveal on scroll — only cards that start below the fold get .em-rv
 * (set by JS), so nothing on screen ever blinks out. */
.em-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.5s var(--em-ease-out) !important;
}
.em-rv.is-revealed {
  opacity: 1;
  transform: none;
}

/* 2.3 PLP: filter / sort / page change — grid dims, a progress bar runs. */
@keyframes em-m-progress {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(0.7); }
  100% { transform: scaleX(0.92); }
}
/* (The top progress bar itself is the shared .em-navbar — Phase 4.) */
.em-plp__grid {
  transition: opacity var(--em-dur-base) ease;
}
.em-plp.is-refreshing .em-plp__grid {
  opacity: 0.45;
  pointer-events: none;
}
@keyframes em-m-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.em-plp__grid.is-arriving {
  animation: em-m-fade-up var(--em-dur-slow) var(--em-ease-out);
}
.em-plp--enhanced .em-plp__filters {
  transition: transform var(--em-dur-slow) var(--em-ease-out);
}

/* 2.4 PDP: the main picture cross-fades on thumb / variant change; changed
 * price and stock lines flash (.is-changed from Phase 1). */
@keyframes em-m-img-in {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}
.em-gallery__main img.is-swapping {
  animation: em-m-img-in 0.25s ease-out;
}
.em-gallery__thumb {
  transition: transform var(--em-dur-fast) var(--em-ease-out), border-color 0.15s ease;
}
.em-gallery__thumb:active {
  transform: scale(0.94);
}

/* 2.5 Menus: drawers slide in (they were display-toggled, so they popped);
 * the mega menu drops in; department panels fade; scrims fade. */
@keyframes em-m-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes em-m-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes em-m-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.em-mobile-menu.is-open {
  animation: em-m-slide-left var(--em-dur-slow) var(--em-ease-out);
}
.em-mega-menu.is-open {
  animation: em-m-drop var(--em-dur-base) var(--em-ease-out);
}
.em-mega-menu__panel:not([hidden]) {
  animation: em-m-fade var(--em-dur-base) ease-out;
}
.em-scrim:not([hidden]) {
  animation: em-m-fade var(--em-dur-base) ease-out;
}

/* 2.6 Urgency: flash meter fills on arrival; the countdown pulses in its
 * final hour; "Only N left" gives two soft beats on arrival. */
@keyframes em-m-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.em-flash__meter-fill {
  display: block;
  transform-origin: left center;
  animation: em-m-fill 0.9s var(--em-ease-out) 0.15s both;
}
@keyframes em-m-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.em-flash__timer.is-urgent {
  color: var(--em-danger);
  animation: em-m-urgent 2s ease-in-out infinite;
}
@keyframes em-m-beat {
  0%, 40%, 100% { transform: scale(1); }
  20%, 60%      { transform: scale(1.08); }
}
.em-buybox__lowstock {
  display: inline-block;
  animation: em-m-beat 1.2s ease-in-out 0.6s 1;
}

@media (prefers-reduced-motion: reduce) {
  .em-product:hover .em-product__media img,
  .em-product:active { transform: none; }
  .em-rv { opacity: 1; transform: none; }
  .em-plp__grid.is-arriving,
  .em-gallery__main img.is-swapping,
  .em-mobile-menu.is-open,
  .em-mega-menu.is-open,
  .em-mega-menu__panel:not([hidden]),
  .em-scrim:not([hidden]),
  .em-flash__meter-fill,
  .em-flash__timer.is-urgent,
  .em-buybox__lowstock { animation: none; }
}

/* =============================================================================
 * Motion Phase 3 — milestones (2026-11-02)
 * ========================================================================== */

/* 3.1 Order confirmation: the icon springs in; a paid order's tick draws
 * itself (SVG swapped in by JS); confetti is a JS canvas. */
@keyframes em-m-spring-in {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.12); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.em-confirm__icon {
  animation: em-m-spring-in 0.6s var(--em-ease-out) both;
}
.em-confirm__icon svg {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
}
.em-tick__circle {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: em-m-draw 0.55s var(--em-ease-out) 0.15s forwards;
}
.em-tick__check {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: em-m-draw 0.35s var(--em-ease-out) 0.6s forwards;
}
@keyframes em-m-draw {
  to { stroke-dashoffset: 0; }
}
.em-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
}

/* 3.2 Tracking timeline: reached dots pop in order, the line fills between
 * them, the current step breathes. */
@keyframes em-m-pop {
  0%   { transform: scale(0.5); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes em-m-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes em-m-ring-loop {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.7); }
}
.em-track__step--done .em-track__dot,
.em-track__step--current .em-track__dot {
  animation: em-m-pop 0.4s var(--em-ease-out) both;
}
.em-track__step--done + .em-track__step::before,
.em-track__step--current + .em-track__step::before {
  transform-origin: left center;
  animation: em-m-line 0.35s ease-out both;
}
.em-track__step:nth-child(2) .em-track__dot, .em-track__step:nth-child(2)::before { animation-delay: 0.18s; }
.em-track__step:nth-child(3) .em-track__dot, .em-track__step:nth-child(3)::before { animation-delay: 0.36s; }
.em-track__step:nth-child(4) .em-track__dot, .em-track__step:nth-child(4)::before { animation-delay: 0.54s; }
.em-track__step:nth-child(5) .em-track__dot, .em-track__step:nth-child(5)::before { animation-delay: 0.72s; }
.em-track__step:nth-child(6) .em-track__dot, .em-track__step:nth-child(6)::before { animation-delay: 0.9s; }
.em-track__step:nth-child(7) .em-track__dot, .em-track__step:nth-child(7)::before { animation-delay: 1.08s; }
.em-track__step--current .em-track__dot::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--em-primary);
  border-radius: 50%;
  pointer-events: none;
  animation: em-m-ring-loop 1.8s ease-out 1.2s infinite;
}

/* 3.3 Referral milestones: earned rungs pop in turn. (Count-up is JS.) */
.em-refer__rung.is-earned .em-refer__rung-mark {
  display: inline-flex;
  animation: em-m-pop 0.45s var(--em-ease-spring) both;
}
.em-refer__rung:nth-child(2) .em-refer__rung-mark { animation-delay: 0.12s; }
.em-refer__rung:nth-child(3) .em-refer__rung-mark { animation-delay: 0.24s; }
.em-refer__rung:nth-child(4) .em-refer__rung-mark { animation-delay: 0.36s; }
.em-refer__rung:nth-child(5) .em-refer__rung-mark { animation-delay: 0.48s; }

/* 3.4 Group buy: the progress bar fills on arrival; a filled group's badge pops. */
.em-gbprogress__bar {
  transform-origin: left center;
  animation: em-m-fill 0.9s var(--em-ease-out) 0.15s both;
}
.em-gbstate__badge.is-celebrating {
  display: inline-flex;
  animation: em-m-pop 0.5s var(--em-ease-spring) both;
}

/* 3.5 Checkout reward/discount just applied: its row slides in, total flashes. */
@keyframes em-m-row-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.em-summary__row.is-new {
  animation: em-m-row-in 0.4s var(--em-ease-out) both, em-m-flash 1.2s ease-out 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .em-confirm__icon,
  .em-track__step--done .em-track__dot,
  .em-track__step--current .em-track__dot,
  .em-track__step--done + .em-track__step::before,
  .em-track__step--current + .em-track__step::before,
  .em-refer__rung.is-earned .em-refer__rung-mark,
  .em-gbprogress__bar,
  .em-gbstate__badge.is-celebrating,
  .em-summary__row.is-new { animation: none; }
  .em-track__step--current .em-track__dot::after { display: none; }
  .em-tick__circle, .em-tick__check { animation: none; stroke-dashoffset: 0; }
}

/* =============================================================================
 * Motion Phase 4 — the "alive" layer (2026-11-02)
 * ========================================================================== */

/* 4.1 Navigation progress bar: any page change (link, form, filter) runs a
 * thin bar along the top so the site never looks frozen on a slow network.
 * The short delay keeps it invisible on fast loads. */
@keyframes em-m-nav {
  0%   { transform: scaleX(0); }
  10%  { transform: scaleX(0.3); }
  30%  { transform: scaleX(0.55); }
  60%  { transform: scaleX(0.75); }
  100% { transform: scaleX(0.94); }
}
.em-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: 3px;
  background: linear-gradient(90deg, var(--em-primary), #0CB968);
  box-shadow: 0 0 6px rgba(12, 185, 104, 0.6);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.em-navbar.is-loading {
  opacity: 1;
  transition: opacity 0.1s linear 0.12s;
  animation: em-m-nav 7s cubic-bezier(0.1, 0.7, 0.2, 1) 0.12s forwards;
}

/* 4.2 Recent Deliveries strip advances on its own (JS); a hint of motion
 * on the cards as they arrive. */
.em-dtw__row .em-dtw__card {
  transition: transform var(--em-dur-slow) var(--em-ease-out);
}
@media (hover: hover) {
  .em-dtw__row .em-dtw__card:hover { transform: translateY(-3px); }
}

/* 4.3 Empty states: the icon settles in and floats; the words and the call to
 * action follow it up. */
@keyframes em-m-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes em-m-search {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}
/* .em-empty__icon is an inline span: transforms need a box. */
.em-empty__icon {
  display: inline-block;
}
.em-cartpage__empty > .fa,
.em-empty__icon,
.em-plp__empty-icon {
  animation: em-m-spring-in 0.6s var(--em-ease-out) both,
             em-m-float 3.2s ease-in-out 0.8s infinite;
}
.em-plp__empty-icon {
  animation: em-m-spring-in 0.6s var(--em-ease-out) both,
             em-m-search 2.4s ease-in-out 0.8s 2;
}
.em-cartpage__empty > :not(.fa),
.em-empty > :not(.em-empty__icon),
.em-plp__empty > :not(.em-plp__empty-icon) {
  animation: em-m-fade-up 0.45s var(--em-ease-out) both;
}
.em-cartpage__empty > :nth-child(2), .em-empty > :nth-child(2), .em-plp__empty > :nth-child(2) { animation-delay: 0.15s; }
.em-cartpage__empty > :nth-child(3), .em-empty > :nth-child(3), .em-plp__empty > :nth-child(3) { animation-delay: 0.25s; }
.em-cartpage__empty > :nth-child(4), .em-empty > :nth-child(4), .em-plp__empty > :nth-child(4) { animation-delay: 0.35s; }
.em-cartpage__empty > :nth-child(n+5), .em-empty > :nth-child(n+5), .em-plp__empty > :nth-child(n+5) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .em-navbar.is-loading { animation: none; transform: scaleX(0.6); }
  .em-dtw__row .em-dtw__card:hover { transform: none; }
  .em-cartpage__empty > *, .em-empty > *, .em-plp__empty > *,
  .em-empty__icon, .em-plp__empty-icon { animation: none; }
}

/* 4.4 Hamburger → X. JS swaps the fa-bars glyph on the menu buttons for three
 * bars; the morph keys off aria-expanded, which shop-shell.js (mobile drawer)
 * and shop-megamenu.js (departments) already keep in sync. */
.em-burger {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em; /* same box as the fa-bars glyph it replaces */
  vertical-align: -0.125em;
}
.em-tabbar__item > .em-burger {
  font-size: 1.125rem; /* matches .em-tabbar__item i */
}
.em-burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--em-dur-slow) var(--em-ease-out),
              opacity var(--em-dur-base) ease, top var(--em-dur-base) var(--em-ease-out);
}
.em-burger__bar:nth-child(1) { top: calc(18% - 1px); }
.em-burger__bar:nth-child(2) { top: calc(50% - 1px); }
.em-burger__bar:nth-child(3) { top: calc(82% - 1px); }
[aria-expanded="true"] > .em-burger .em-burger__bar:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
[aria-expanded="true"] > .em-burger .em-burger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
[aria-expanded="true"] > .em-burger .em-burger__bar:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .em-burger__bar { transition: none; }
}

/* 2.1b Card second photo: shop-motion.js adds .em-product__hover inside the
 * media frame on first hover (mouse devices only) and .has-hover once it has
 * loaded; it then cross-fades over the main photo while hovered. */
.em-product__media img.em-product__hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* under the badges (z-index 1, Phase 2) */
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .em-product.has-hover:hover .em-product__hover {
    opacity: 1;
  }
}