/* ==========================================================================
   CHRISTINE VENUST — PERCEIVED PERFORMANCE
   ==========================================================================
   Three things, all about how fast the site *feels* rather than how fast it is:

   1. SKELETONS. Product images are lazy-loaded, so a card's picture arrives
      some time after its text. Instead of an empty well that suddenly fills,
      the well shows a soft shimmer in the shape of the image and the picture
      fades in over it. The layout never shifts, because the <img> already
      carries width/height from the manifest.

   2. NO BLOCKING CURTAIN. The old full-screen #preloader waited for
      window.load — i.e. for every image on the page — and had a 2.8s
      fallback, so visitors watched a dark screen for nearly three seconds
      before seeing anything at all. It now dismisses as soon as the HTML is
      parsed; the skeletons cover the rest.

   3. NAVIGATION PROGRESS. Clicking a product used to do nothing visible until
      the next page painted. A top progress bar starts on click, which is the
      cue every large site uses to make navigation read as instantaneous.
   ========================================================================== */

/* ── 1. Image skeletons ──────────────────────────────────────────────────── */

.cv-skeleton,
.product-card__img-wrap:not(.cv-img-done)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, .035) 28%,
        rgba(0, 0, 0, .07)  46%,
        rgba(0, 0, 0, .035) 64%
    );
    background-size: 240% 100%;
    animation: cv-shimmer 1.35s ease-in-out infinite;
    pointer-events: none;
}

.product-card__img-wrap.cv-img-done::before { content: none; }

@keyframes cv-shimmer {
    0%   { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}

/* The picture itself fades up over its own skeleton. */
img.product-card__img,
img.cv-fade {
    opacity: 0;
    transition: opacity .45s ease, transform .6s ease;
}
img.product-card__img.cv-loaded,
img.cv-fade.cv-loaded { opacity: 1; }

/* Keep the image above the shimmer while it fades in. */
.product-card__img-wrap > img { position: relative; z-index: 1; }

/* An image that fails to load must not leave a shimmer running forever. */
.product-card__img-wrap.cv-img-failed::before { content: none; }

/* ── 2. Text skeletons, for the brand/name/price lines ───────────────────── */

.cv-sk-line {
    display: block;
    height: .7em;
    border-radius: 4px;
    background: rgba(0, 0, 0, .06);
    animation: cv-shimmer 1.35s ease-in-out infinite;
    background-image: linear-gradient(
        100deg,
        rgba(0, 0, 0, .04) 28%,
        rgba(0, 0, 0, .08) 46%,
        rgba(0, 0, 0, .04) 64%
    );
    background-size: 240% 100%;
}
.cv-sk-line + .cv-sk-line { margin-top: .55em; }
.cv-sk-line.w-60 { width: 60%; margin-inline: auto; }
.cv-sk-line.w-90 { width: 90%; margin-inline: auto; }
.cv-sk-line.w-40 { width: 40%; margin-inline: auto; }

/* ── 3. Navigation progress bar ──────────────────────────────────────────── */

#cv-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    z-index: 99999;
    background: linear-gradient(90deg, var(--c-gold, #C4A96B), var(--c-mocha, #7A5144));
    box-shadow: 0 0 8px rgba(196, 169, 107, .6);
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .3s ease;
}
#cv-progress.cv-on  { opacity: 1; }
#cv-progress.cv-done { width: 100% !important; opacity: 0; transition: width .15s ease, opacity .4s ease .1s; }

/* ── 4. Tame the legacy full-screen preloader ────────────────────────────── */
/* Kept in the markup so nothing else breaks, but it no longer blocks paint. */
#preloader { transition: opacity .35s ease, visibility .35s ease; }

/* ── Respect reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cv-skeleton,
    .product-card__img-wrap:not(.cv-img-done)::before,
    .cv-sk-line { animation: none; }
    img.product-card__img, img.cv-fade { transition: none; opacity: 1; }
}

/* ── Header menu with four collections ─────────────────────────────────────
   "Double Based Oil" joined the menu (For Him · For Her · Unisex · Double Based
   Oil). Keep every label on one line, and tighten the spacing on narrower
   desktops (992–1199px) so the left menu never reaches the centred logo.
   Loaded after each page's own <style>, so these win without !important. */
.desktop-nav a { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199px) {
    .header .desktop-nav { gap: 1.5rem; }
    .header .desktop-nav a { letter-spacing: .08em; }
}

/* ── Crossed-out Sale Price on the card image ───────────────────────────────
   Any product with a Sale Price above 0 shows that amount struck through on
   its image, on every listing page (never on the product page). Top-right,
   because top-left holds the badges and the bottom holds the hover buttons
   (which are always visible on touch screens). Sits under "Out of Stock". */
.card-was {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    padding: 4px 11px; border-radius: 100px;
    background: rgba(250, 248, 245, .96); color: #5E534D;
    border: 1px solid #E8E0D8;
    font-size: .74rem; font-weight: 500; letter-spacing: .02em; line-height: 1.4;
    text-decoration: line-through; text-decoration-thickness: 1px;
    box-shadow: 0 2px 10px rgba(26, 21, 18, .08);
    pointer-events: none;
}
.out-of-stock .card-was { top: 46px; }
/* Narrow cards (phones, small tablets): the image tags — collection badge,
   "Out of Stock", crossed-out price — would run into each other side by side,
   so stack them in one column on the left, each below whichever tags exist
   above it. A container query, so it follows the card width, not the screen. */
.product-card__img-wrap { container-type: inline-size; }
@container (max-width: 250px) {
    .product-card__img-wrap .product-badges { top: 10px; left: 10px; gap: 4px; }
    .product-card__img-wrap .badge,
    .product-card__img-wrap .out-badge { padding: 3px 8px; font-size: .56rem; letter-spacing: .08em; }
    .product-card__img-wrap .out-badge { top: 10px; left: 10px; right: auto; }
    .product-card__img-wrap .card-was  { top: 10px; left: 10px; right: auto; padding: 2px 8px; font-size: .64rem; }
    .product-card__img-wrap:has(.product-badges) .out-badge,
    .product-card__img-wrap:has(.product-badges) .card-was,
    .product-card__img-wrap:has(.out-badge) .card-was { top: 36px; }
    .product-card__img-wrap:has(.product-badges):has(.out-badge) .card-was { top: 62px; }
}