/* Devir loaders (I-09), ported from design/mock/components/devir-loader.css (da6c2fe). NOT generated: hand-written, tokens only, loaded after every bundle
   on all chrome routes (devir_ported_chrome). One cycle is 1.2 s (6 x 200 ms). Mark colour is currentColor: white on navy, navy on white, never pink.
   Allowed animated properties: transform, opacity, clip-path. Reduced motion: the finished mark, static; skeletons keep their tint, no shimmer.
   The emblem is the traced 6-path mark of the mock (images/devir/loader-emblem.svg), used as a mask so one asset serves every colour. */

/* B. liquid fill rising from the bottom (the owner default): ghost at 16%, body filled by a clip-path inset. */
.dvl-mark { position: relative; display: block; height: var(--p-96); aspect-ratio: 81 / 117; color: inherit; }
.dvl-mark--48 { height: var(--p-48); }
.dvl-mark--24 { height: var(--p-24); }
.dvl-mark::before, .dvl-mark::after, body .loading-mask .loader::before, body .loading-mask .loader::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("../../images/devir/loader-emblem.svg") center / contain no-repeat;
  mask: url("../../images/devir/loader-emblem.svg") center / contain no-repeat;
}
.dvl-mark::before, body .loading-mask .loader::before { opacity: 0.16; }
.dvl-mark::after, body .loading-mask .loader::after { clip-path: inset(100% 0 0 0); animation: dvl-rise calc(var(--p-dur-in) * 6) var(--s-ease) infinite; }
@keyframes dvl-rise {
  0% { clip-path: inset(100% 0 0 0); opacity: 1; }
  75% { clip-path: inset(0 0 0 0); opacity: 1; }
  88% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* Page-level overlay (loaders.js): shown only when a navigation or search takes longer than the delay, so a fast page never flashes it. */
.dv-chrome .dv-loaderov { opacity: 0; transition: opacity var(--p-dur-in) var(--s-ease); }
.dv-chrome .dv-loaderov.is-on { opacity: 1; }
.dv-chrome .dv-loaderov[hidden] { display: none; }
.dv-loaderov__hint { font: var(--t-small); color: var(--s-text-on-dark); opacity: 0.72; }

/* Magento's own loader widget (mage/loader, block loaders, the cart and account spinners) wears the same mark: navy ground, white emblem, no GIF. */
body .loading-mask { background: var(--s-surface-navy); color: var(--s-text-on-dark); }
body .loading-mask .loader { display: block; }
body .loading-mask .loader > img { display: none; }
body .loading-mask .loader > p { display: none; }
body .loading-mask .loader::before, body .loading-mask .loader::after { inset: 50% auto auto 50%; height: var(--p-96); width: calc(var(--p-96) * 81 / 117); translate: -50% -50%; }
body ._block-content-loading > .loading-mask { background: var(--p-white-a24); color: var(--s-text); }

/* E. content-shaped skeletons (they copy the final layout so nothing jumps) and the inline button spinner. */
.dvl-skel { position: relative; display: block; overflow: hidden; background: var(--c-nocover-bg); border-radius: var(--s-radius); }
.dvl-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--p-white-a24) 50%, transparent); transform: translateX(-100%); animation: dvl-shimmer calc(var(--p-dur-in) * 6) linear infinite; }
@keyframes dvl-shimmer { to { transform: translateX(100%); } }
.dvl-sk-row { display: grid; grid-template-columns: var(--c-cover-row) 1fr var(--p-96); gap: var(--s-sp-4); align-items: center; padding-block: var(--s-sp-3); border-block-end: var(--s-rule-w) solid var(--s-rule); }
.dvl-sk-row > :first-child { width: var(--c-cover-row); height: var(--c-cover-row); }
.dvl-sk-lines { display: grid; gap: var(--s-sp-2); min-width: 0; }
.dvl-sk-lines > i { display: block; height: var(--p-12); }
.dvl-sk-lines > i:first-child { width: 60%; height: var(--p-16); }
.dvl-sk-lines > i:last-child { width: 35%; }
.dvl-sk-price { height: var(--p-24); }
.dvl-sk-card { display: grid; gap: var(--s-sp-3); padding: var(--s-sp-3); background: var(--s-surface-tint); border-radius: var(--s-radius); }
.dvl-sk-card .dvl-sk-cover { aspect-ratio: 1; }
.dvl-sk-card .dvl-sk-btn { height: var(--s-control); }
.dvl-sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--p-160), 1fr)); gap: var(--s-sp-4); }

/* A results block that is being replaced by the next page: the real content steps aside, the skeleton takes its place. */
.dv-results.is-loading > :not(.dvl-sk-wrap) { display: none; }
.dvl-sk-wrap { display: block; }

/* Button spinner (E): the plain ring in the text colour while an add-to-cart request runs. */
.dv-btn[aria-busy="true"]::before { content: ""; display: inline-block; flex: none; width: var(--p-16); height: var(--p-16); margin-inline-end: var(--s-sp-2); border: var(--s-rule-w-2) solid currentColor; border-inline-end-color: transparent; border-radius: var(--s-radius-dot); animation: dvl-turn calc(var(--p-dur-in) * 4) linear infinite; }
.dvl-spin { display: inline-block; width: var(--p-16); height: var(--p-16); border: var(--s-rule-w-2) solid currentColor; border-inline-end-color: transparent; border-radius: var(--s-radius-dot); animation: dvl-turn calc(var(--p-dur-in) * 4) linear infinite; }
@keyframes dvl-turn { to { transform: rotate(360deg); } }

/* Header cart count while the customer section loads (mini-cart state): a small ring where the number will be. */
.dv-chrome .dv-header__cart[aria-busy="true"]::after { content: ""; position: absolute; inset-block-start: var(--s-sp-1); inset-inline-end: var(--s-sp-1); width: var(--p-12); height: var(--p-12); border: var(--s-rule-w-2) solid currentColor; border-inline-end-color: transparent; border-radius: var(--s-radius-dot); animation: dvl-turn calc(var(--p-dur-in) * 4) linear infinite; }
/* Cart page: the form dims while a quantity change is submitted. */
.dv-cart-form[aria-busy="true"], form.form-cart[aria-busy="true"] { opacity: 0.56; pointer-events: none; }

/* Reduced motion: the finished mark, static; skeleton tint without shimmer; the spinner becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
  .dvl-mark::after, body .loading-mask .loader::after { animation: none; clip-path: none; }
  .dvl-skel::after { animation: none; display: none; }
  .dv-btn[aria-busy="true"]::before, .dvl-spin, .dv-chrome .dv-header__cart[aria-busy="true"]::after { animation: none; border-inline-end-color: currentColor; }
  .dv-chrome .dv-loaderov { transition: none; }
}
html[data-motion="off"] .dvl-mark::after, html[data-motion="off"] body .loading-mask .loader::after { animation: none; clip-path: none; }
html[data-motion="off"] .dvl-skel::after { animation: none; display: none; }