/* A restrained motion layer: fast feedback, soft depth, and accessible exits. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body.cart-drawer-open, body.proof-viewer-open { overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.portal-app-loading { opacity: 0; visibility: hidden; pointer-events: none; }
.portal-app-ready { opacity: 1; visibility: visible; transition: opacity 260ms ease; }

/* Branded first-load experience. It remains in the DOM while the session is identified. */
.portal-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; padding: 1.5rem; color: #f7fbff; background: radial-gradient(circle at 25% 15%, #1c506d 0, transparent 38%), linear-gradient(145deg, #071c2c, #0b2b45 56%, #102f47); opacity: 1; visibility: visible; transition: opacity 420ms cubic-bezier(.4, 0, 1, 1); }
.portal-loader[hidden] { display: none; }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) { background: radial-gradient(circle at 22% 18%, #6e2527 0, transparent 40%), linear-gradient(145deg, #130d0e, #231719 58%, #30191c); }
/* The initial tenant state is intentionally invisible.  The app resolves the
   session before revealing a branded loader, so customers never see a
   generic "Connecting" screen (or the wrong company's logo) flash first. */
.portal-loader[data-brand="pending"] { opacity: 0; visibility: hidden; pointer-events: none; background: radial-gradient(circle at 22% 18%, #33404a 0, transparent 40%), linear-gradient(145deg, #101419, #182027 58%, #222b33); }
.portal-loader.is-leaving { opacity: 0; pointer-events: none; }
.portal-loader-glow { position: absolute; width: min(70vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #65c4f024 0, #65c4f00a 36%, transparent 68%); filter: blur(12px); animation: loader-breathe 2.4s ease-in-out infinite alternate; }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) .portal-loader-glow { background: radial-gradient(circle, #ee3d4430 0, #ee3d440a 38%, transparent 70%); }
.portal-loader[data-brand="pending"] .portal-loader-glow { background: radial-gradient(circle, #ffffff1e 0, #ffffff06 38%, transparent 70%); }
.portal-loader-card { position: relative; display: grid; justify-items: center; width: min(360px, 100%); padding: 2.2rem 2rem 1.8rem; border: 1px solid #ffffff24; border-radius: 28px; background: linear-gradient(150deg, #ffffff18, #ffffff08); box-shadow: 0 32px 90px #0007, inset 0 1px #ffffff2b; backdrop-filter: blur(22px); animation: loader-card-in 600ms cubic-bezier(.22, 1, .36, 1) both; }
.portal-loader-mark { position: relative; display: grid; place-items: center; width: 172px; height: 172px; margin-bottom: 1.35rem; }
.portal-loader-mark::before { content: ""; position: absolute; inset: 21px; border-radius: 30px; background: #fff; box-shadow: 0 18px 50px #0005, inset 0 0 0 1px #0b2b4514; transform: rotate(45deg); }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) .portal-loader-mark::before { inset: 39px; border-radius: 25px; }
.portal-loader[data-brand="pending"] .portal-loader-mark::before { inset: 44px; border-radius: 50%; background: #ffffff0b; box-shadow: 0 18px 50px #0004, inset 0 0 0 1px #ffffff18; }
.portal-loader-mark img { position: relative; z-index: 2; display: block; width: 142px; max-height: 98px; object-fit: contain; }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) .portal-loader-mark img { width: 62px; height: 62px; }
.portal-loader[data-brand="pending"] .portal-loader-mark img { display: none; }
.portal-loader-orbit { position: absolute; inset: 1px; border: 1px solid #ffffff2e; border-top-color: #70cdf7; border-radius: 50%; animation: loader-orbit 2.2s linear infinite; }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) .portal-loader-orbit { border-top-color: #ff5259; }
.portal-loader[data-brand="pending"] .portal-loader-orbit { border-top-color: #ffffff; }
.portal-loader-orbit-secondary { inset: 12px; border-style: dashed; border-top-color: #ffffffa3; animation-direction: reverse; animation-duration: 3.4s; opacity: .65; }
.portal-loader-copy { display: grid; gap: .42rem; text-align: center; }
.portal-loader-copy strong { font-size: 1.04rem; letter-spacing: -.01em; }
.portal-loader-copy span { color: #c8dbe6; font-size: .78rem; }
.portal-loader-progress { width: 100%; height: 3px; margin-top: 1.45rem; overflow: hidden; border-radius: 999px; background: #ffffff18; }
.portal-loader-progress span { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #70cdf7, #fff, transparent); animation: loader-progress 1.35s cubic-bezier(.65, 0, .35, 1) infinite; }
.portal-loader:is([data-brand="verizon"], [data-brand="checkout"], [data-brand="submission"]) .portal-loader-progress span { background: linear-gradient(90deg, transparent, #ff3f46, #fff, transparent); }
.portal-loader[data-brand="pending"] .portal-loader-progress span { background: linear-gradient(90deg, transparent, #ffffff, #dfe8ee, transparent); }

.drawer-backdrop { background: transparent; overflow: hidden; isolation: isolate; z-index: 110; }
.drawer-scrim { position: absolute; inset: 0; background: #0815269c; backdrop-filter: blur(4px); }
.drawer { position: relative; z-index: 1; overscroll-behavior: contain; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.drawer-backdrop.is-closing { pointer-events: none; }
.toast { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 16px) scale(.98); transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s 260ms; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }

@media (prefers-reduced-motion: no-preference) {
  :where(.primary, .secondary, .options-button, .cart-button, .icon-btn, .nav button, .admin-tabs button, .back-link, .customize-link, .qty button, .card-stepper button, .detail-stepper button, .add, .view-order, .ghost, .proof-side-tabs button, .expand-proof, .portal-card) {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), filter 180ms ease, opacity 180ms ease;
  }
  .field :is(input, textarea, select) { transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease, transform 180ms ease; }
  .field :is(input, textarea, select):focus { transform: translateY(-1px); }
  :is(.primary, .secondary, .options-button, .cart-button, .icon-btn, .qty button, .detail-stepper button, .add, .view-order):active:not(:disabled) { transform: scale(.965); }

  /* Each route enters once. Autosaves and quantity changes never replay this sequence. */
  .page-motion-enter > :is(.hero, .admin-home-hero, .products-page-head, .orders-head, .order-detail-head, .checkout-page > .back-link, .back-link, .catalog-notice, .catalog-head, .admin-tabs) { animation: premium-rise-in 440ms cubic-bezier(.22, 1, .36, 1) both; }
  .page-motion-enter > :is(.panel, .product-detail, .order-detail-grid, .checkout-layout, .portal-grid, .admin-overview-grid, .product-admin-workspace, .settings-layout, .members-layout, .location-admin-layout, .profile-layout) { animation: premium-rise-in 520ms 70ms cubic-bezier(.22, 1, .36, 1) both; }
  .page-motion-enter .product-grid > *, .page-motion-enter .portal-grid > *, .page-motion-enter .admin-stat-grid > *, .page-motion-enter .workspace-stat-grid > *, .page-motion-enter .saved-address-list > *, .page-motion-enter .store-location-list > *, .page-motion-enter .member-group-list > * { animation: premium-card-in 520ms cubic-bezier(.22, 1, .36, 1) both; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(1) { animation-delay: 90ms; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(2) { animation-delay: 130ms; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(3) { animation-delay: 170ms; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(4) { animation-delay: 210ms; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(5) { animation-delay: 250ms; }
  .page-motion-enter :is(.product-grid, .portal-grid, .admin-stat-grid, .workspace-stat-grid, .saved-address-list, .store-location-list, .member-group-list) > :nth-child(n+6) { animation-delay: 290ms; }

  .login-card { animation: premium-rise-in 480ms 80ms cubic-bezier(.22, 1, .36, 1) both; }
  .login-message { animation: premium-rise-in 560ms cubic-bezier(.22, 1, .36, 1) both; }
  .login-art::after { animation: ambient-drift 12s ease-in-out infinite alternate; }
  .proof-viewer-dialog[open] { animation: premium-dialog-in 320ms cubic-bezier(.22, 1, .36, 1); }
  .proof-viewer-dialog[open]::backdrop { animation: premium-backdrop-in 220ms ease; }
  .address-suggestions:not([hidden]) { animation: premium-rise-in 180ms ease-out; transform-origin: top; }
  .cart-add-prompt { animation: premium-card-in 320ms cubic-bezier(.22, 1, .36, 1) both; }
  .verizon-demo-banner { animation: premium-banner-in 440ms cubic-bezier(.22, 1, .36, 1) both; }
  .save-indicator[data-status="saving"] { animation: saving-pulse 1.2s ease-in-out infinite alternate; }

  .product-art.has-image img, .admin-preview-art.has-image img, .portal-logo img { transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease; }
  .product, .panel, .saved-address-card, .store-location-card, .portal-card { transition: border-color 260ms ease, box-shadow 360ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1); }
  .nav button { position: relative; overflow: hidden; }
  .nav button::after { content: ""; position: absolute; left: .45rem; top: 25%; width: 3px; height: 50%; border-radius: 99px; background: currentColor; opacity: 0; transform: scaleY(.2); transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1); }
  .nav button.active::after { opacity: .8; transform: scaleY(1); }

  button.is-loading, [role="button"].is-loading { cursor: wait; }
  button.is-loading::after, [role="button"].is-loading::after { content: ""; display: inline-block; width: .78em; height: .78em; margin-left: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.08em; animation: button-loader-spin .7s linear infinite; }

  @media (hover: hover) and (pointer: fine) {
    :is(.primary, .secondary, .options-button, .cart-button, .view-order):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, currentColor 14%, transparent); }
    :is(.add, .icon-btn):hover:not(:disabled) { transform: translateY(-2px) scale(1.045); }
    .product:hover, .product:focus-within { transform: translateY(-6px); border-color: color-mix(in srgb, var(--portal-accent) 48%, var(--line)); box-shadow: 0 20px 50px color-mix(in srgb, var(--portal-dark) 14%, transparent); }
    .product:hover .product-art.has-image img, .product:focus-within .product-art.has-image img { transform: scale(1.025); }
    .portal-card:hover, .saved-address-card:hover, .store-location-card:hover { transform: translateY(-3px); box-shadow: 0 16px 42px #102b4018; }
    .panel:focus-within { border-color: color-mix(in srgb, var(--portal-accent) 35%, var(--line)); }
  }
}

@keyframes loader-card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-breathe { from { transform: scale(.9); opacity: .55; } to { transform: scale(1.08); opacity: 1; } }
@keyframes loader-progress { from { transform: translateX(-110%); } to { transform: translateX(245%); } }
@keyframes button-loader-spin { to { transform: rotate(360deg); } }
@keyframes premium-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes premium-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes premium-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes premium-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes premium-banner-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes ambient-drift { from { transform: translate3d(-1.5%, 1.5%, 0) scale(.98); } to { transform: translate3d(2%, -1%, 0) scale(1.03); } }
@keyframes saving-pulse { from { opacity: .58; } to { opacity: 1; } }

@media (hover: none) { .product:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product:hover { transform: none; }
  .portal-loader-orbit { display: none; }
  .portal-loader-progress span { width: 100%; transform: none; }
}