/* CubePass - page changes without a reload (assets/js/nav.js): the thin progress bar, the page skeletons (Instagram-like
   shimmer in the shape of the page that is coming) and the shimmer behind images that are still loading. */

:root { --cps-base: rgba(255, 255, 255, .06); --cps-shine: rgba(255, 255, 255, .13); }
:root[data-theme="light"] { --cps-base: #e9edf3; --cps-shine: #f6f8fb; }

/* the old full-screen logo preloader is not used any more */
#preloader { display: none !important; }

/* ------------------------------------------------------------------ progress bar */
.cp-progress { position: fixed; top: 0; right: 0; left: 0; z-index: 99999; height: 3px; pointer-events: none;
               transform-origin: right; transform: scaleX(0); opacity: 0;
               background: linear-gradient(90deg, #22d3ee, #5b6cff, #a855f7); box-shadow: 0 0 10px rgba(91, 108, 255, .6); }
.cp-progress.is-on { opacity: 1; transform: scaleX(.85); transition: transform 6s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
.cp-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .35s ease .15s; }

/* ------------------------------------------------------------------ shimmer */
@keyframes cps-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.cps-b, img.cp-shim {
    background-color: var(--cps-base);
    background-image: linear-gradient(100deg, transparent 20%, var(--cps-shine) 45%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: cps-shine 1.25s ease-in-out infinite;
}
img.cp-shim { color: transparent; }
@media (prefers-reduced-motion: reduce) { .cps-b, img.cp-shim { animation: none; } }

#cp-page[aria-busy="true"] { min-height: 70vh; }
.cps { display: flex; flex-direction: column; gap: 14px; padding: 36px 0 48px; }
.cps-b { display: block; border-radius: 10px; }
.cps-l { height: 12px; width: 100%; border-radius: 6px; }
.cps-h { height: 26px; border-radius: 8px; }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.cps-price { height: 16px; margin-top: 4px; }
.cps-btn { height: 46px; width: 100%; max-width: 280px; border-radius: 14px; }
.cps-box { height: 90px; width: 100%; border-radius: 16px; }
.cps-title { height: 18px; margin-bottom: 16px; }

/* home */
.cps-hero { width: 100%; aspect-ratio: 16 / 6; border-radius: 22px; }
.cps-row-head { margin-top: 10px; }
.cps-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 14px; overflow: hidden; }

/* product cards (home rows, store, wishlist) */
.cps-card { display: flex; flex-direction: column; gap: 9px; padding: 10px; border-radius: 18px; border: 1px solid var(--cps-base); }
.cps-img { width: 100%; aspect-ratio: 1; border-radius: 14px; }
.cps-post .cps-img { aspect-ratio: 16 / 10; }

/* store */
.cps-store { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.cps-side { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 18px; border: 1px solid var(--cps-base); }
.cps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.cps-grid3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* product */
.cps-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.cps-gallery { width: 100%; aspect-ratio: 1; border-radius: 22px; }
.cps-info { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }

/* blog post */
.cps-article { max-width: 820px; margin: 0 auto; width: 100%; }
.cps-cover { width: 100%; aspect-ratio: 16 / 8; border-radius: 20px; margin: 6px 0 10px; }

/* cart */
.cps-cart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cps-line { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid var(--cps-base); margin-bottom: 12px; }
.cps-line > div { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.cps-thumb { flex: 0 0 76px; height: 76px; border-radius: 14px; }
.cps-qty { flex: 0 0 96px; height: 36px; border-radius: 12px; }
.cps-sum { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid var(--cps-base); }

/* account pages */
.cps-narrow { max-width: 820px; margin: 0 auto; width: 100%; }
.cps-profile { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; border: 1px solid var(--cps-base); }
.cps-profile > div { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cps-avatar { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; }
.cps-avatar.sm { flex-basis: 42px; width: 42px; height: 42px; }
.cps-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cps-tile { height: 92px; border-radius: 16px; }

@media (max-width: 991px) {
    .cps-store, .cps-product, .cps-cart { grid-template-columns: minmax(0, 1fr); }
    .cps-side { display: none; }
}
@media (max-width: 576px) {
    .cps { padding-top: 14px; gap: 12px; }
    .cps-hero { aspect-ratio: 16 / 9; border-radius: 16px; }
    .cps-row { grid-auto-columns: 46%; }
    .cps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cps-grid3 { grid-template-columns: minmax(0, 1fr); }
    .cps-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cps-thumb { flex-basis: 60px; height: 60px; }
    .cps-qty { flex-basis: 70px; }
}