/* Position, scale and opacity only; image reveals begin after decode/in view. */
.site-header { background: var(--color-surface-base); backdrop-filter: none; -webkit-backdrop-filter: none; }
:where(button, [role="button"], [role="link"], summary, .product-card, .used-device-card) { transition: transform var(--motion-fast), opacity var(--motion-fast); }
:where(button, [role="button"], [role="link"], summary):active:not(:disabled), .product-card:active, .used-device-card:active { transform: scale(.97); }
button:not(:disabled):active, .product-card:active, .used-device-card:active { transform: scale(.97); }
/* A more deliberate press, without reintroducing hover lift. */
.product-card, .used-device-card, .category-squircle-card, .home-brand-card,
.header-cart-trigger { transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity var(--motion-fast); }
.product-card:active, .used-device-card:active, .category-squircle-card:active,
.home-brand-card:not(:disabled):active, .header-cart-trigger:not(:disabled):active { transform: scale(.95); }
/* Give buttons a gentle hover and return while preserving their press feedback. */
:is(button, [role="button"], .btn-primary-large, .btn-secondary-large,
    .drawer-checkout-btn, .footer-social-btn, .footer-app-badge,
    .footer-pay-chip, .floating-whatsapp-widget, .emi-cta-btn-primary) {
  transition: transform 300ms cubic-bezier(.2,.7,.2,1), opacity var(--motion-fast),
    box-shadow 300ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.motion-added { min-width: 110px; }
.motion-added span { display: inline-block; }
.stepper-count, #pdp-buybar-qty { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
#pdp-cash-price, #pdp-buybar-price { display: inline-block; }
.motion-reveal { opacity: 0; }
.motion-reveal:focus-within { opacity: 1; }
/* Scroll-fold surfaces keep their space; only the visible surface recedes. */
#home-view .motion-home-fold { transform-origin: 50% 0; transition: none; }
#home-view .motion-home-fold-active { will-change: transform, opacity; }
#home-view .motion-home-fold:focus-within { transform: none !important; opacity: 1 !important; }
.motion-image-pending { opacity: 0; }
.motion-loading { position: relative; overflow: hidden; }
.motion-loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, var(--color-surface-subtle) 50%, transparent 80%); transform: translateX(-100%); animation: motion-shimmer 900ms linear infinite; }
@keyframes motion-shimmer { to { transform: translateX(100%); } }
.search-skeleton { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.search-skeleton i { display: block; width: 44px; height: 44px; flex-shrink: 0; background: var(--color-surface-subtle); border-radius: 6px; }
.search-skeleton span { width: 65%; height: 30px; background: var(--color-surface-subtle); border-radius: 4px; }
.qv-image-stage { min-height: 222px; }
.qv-image-stage img { width: 100%; height: 190px; }
.drawer-backdrop, .modal-backdrop, .filter-sheet-scrim, .pdp-sticky-buybar { backdrop-filter: none; -webkit-backdrop-filter: none; }
#emi-calculator-modal { backdrop-filter: none; }
.drawer-backdrop, .modal-backdrop { visibility: hidden; transition: opacity var(--motion-normal), visibility 0s 250ms; }
.drawer-backdrop.active, .modal-backdrop.active { visibility: visible; transition-delay: 0s; }
.cart-drawer-panel, .category-drawer-panel, .catalog-page-layout .filter-sidebar { transition: transform var(--motion-normal); }
.faq-answer { transition: none; }
.pdp-sticky-buybar { background: var(--color-surface-base); transition: transform var(--motion-normal); }
.live-price-dot { animation: none; }
@media (max-width: 960px) {
  .catalog-page-layout .filter-sidebar { visibility: hidden; transition: transform var(--motion-normal), visibility 0s 250ms; }
  body.filter-sheet-open .catalog-page-layout .filter-sidebar { visibility: visible; transition-delay: 0s; }
}

/* Hash routes use the browser's native crossfade. Older browsers use JS fade. */
.site-header { view-transition-name: store-header; }
.mobile-bottom-dock { view-transition-name: store-dock; }
::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-old(root) { animation: motion-out 150ms ease-out both; }
::view-transition-new(root) { animation: motion-in 220ms ease-out both; }
::view-transition-old(store-header), ::view-transition-new(store-header), ::view-transition-old(store-dock), ::view-transition-new(store-dock) { animation: none; }
@keyframes motion-out { to { opacity: 0; } }
@keyframes motion-in { from { opacity: 0; } }

/* Category dropdown: surface first, then a short sequence of content reveals. */
.nav-cat-item { transition: color 160ms ease-out, background-color 160ms ease-out; }
.nav-cat-item[aria-expanded="true"] { color: var(--color-brand-text); background: var(--color-brand-subtle); }
.nav-menu-chevron { flex-shrink: 0; transition: transform 240ms cubic-bezier(.16,1,.3,1); }
.nav-cat-item[aria-expanded="true"] .nav-menu-chevron { transform: rotate(180deg); }
.nav-expanded-menu {
  position: absolute;
  top: 100%;
  left: var(--nav-menu-left, 16px);
  width: var(--nav-menu-width, 232px);
  max-width: calc(100vw - 32px);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 6px 0;
  max-height: calc(100dvh - var(--header-height) - var(--subnav-height) - 24px);
  overflow: visible;
  overscroll-behavior: contain;
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 18px 32px -18px rgba(15, 23, 42, .24);
  transform-origin: 50% 0;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-out, transform 180ms cubic-bezier(.16,1,.3,1), visibility 0s 180ms;
}
.nav-expanded-menu.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease-out, transform 280ms cubic-bezier(.16,1,.3,1), visibility 0s;
}
.nav-menu-step {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 120ms ease-out, transform 150ms cubic-bezier(.16,1,.3,1);
}
.is-open .nav-menu-step {
  opacity: 1;
  transform: none;
  transition: opacity 220ms ease-out, transform 280ms cubic-bezier(.16,1,.3,1);
  transition-delay: calc(35ms + var(--nav-step, 0) * 22ms);
}
.nav-menu-links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--nav-row-count, 1), minmax(42px, auto)); grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.nav-menu-item { position: relative; }
.nav-menu-link { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; padding: 11px 14px; border: 0; color: var(--color-text-primary); font-size: var(--font-size-2xs); line-height: 1.4; }
.nav-menu-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-text-primary) 12%, var(--color-surface-base)) 50%, color-mix(in srgb, var(--color-text-inverse) 70%, var(--color-surface-base)) 50%); }
.nav-menu-item.nav-column-end > .nav-menu-link::after { display: none; }
.nav-menu-link[aria-expanded="true"] { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.nav-submenu { top: var(--nav-submenu-top, 0px); left: var(--nav-submenu-left, 100%); z-index: 3; border-radius: var(--radius-md); transform-origin: 0 0; transform: translateX(-6px); }
.nav-submenu.opens-left { left: auto; right: var(--nav-submenu-right, 100%); }
.nav-submenu .nav-menu-links { max-height: calc(100dvh - var(--header-height) - var(--subnav-height) - 24px); overflow-y: auto; }
.nav-expanded-menu, .nav-menu-links { scrollbar-width: none; }
.nav-expanded-menu::-webkit-scrollbar, .nav-menu-links::-webkit-scrollbar { display: none; }
.nav-submenu .nav-menu-step { opacity: 0; transform: translateY(9px); }
.nav-submenu.is-open .nav-menu-step { opacity: 1; transform: none; }
.nav-menu-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.nav-menu-link > svg { flex-shrink: 0; }
.nav-menu-link:hover, .nav-menu-link:focus-visible { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.nav-expanded-menu a:focus-visible, .nav-cat-item:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.nav-expanded-menu a:focus-visible { outline-offset: -3px; }
#emi-calculator-section, #nav-emi-banks, #emi-faq-list { scroll-margin-top: calc(var(--header-height) + var(--subnav-height) + 24px); }
@media (max-width: 768px) { .nav-expanded-menu { display: none; } }

@media (prefers-reduced-motion: reduce) {
  :is(.header-action-btn, .gallery-thumb-btn, .btn-primary-large, .btn-secondary-large,
      .drawer-checkout-btn, .footer-social-btn, .footer-app-badge, .footer-pay-chip,
      .floating-whatsapp-widget.revealed, .emi-cta-btn-primary):hover,
  #pdp-view .btn-primary-large:hover, #pdp-view .btn-secondary-large:hover,
  .floating-whatsapp-widget.revealed:hover { transform: none; }
  .nav-expanded-menu, .nav-menu-step, .nav-menu-chevron { transition: none !important; transform: none !important; }
  #home-view .motion-home-fold { transform: none !important; opacity: 1 !important; will-change: auto; }
  .motion-reveal { opacity: 1; }
  .motion-image-pending { opacity: 1; }
  .motion-loading::after { animation: none; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  button:not(:disabled):active, [role="button"]:active, [role="link"]:active, summary:active, .product-card:active, .used-device-card:active { transform: none !important; }
}