/* ============================================================================
   FragranceBox skeleton loading system — light luxury design language.
   Warm-gray shimmer tuned to the off-white brand surface (#fbfbfa).
   Themeable via CSS variables; reduced-motion safe; zero layout shift.
   Loaded site-wide via nav.php. Pairs with /skeleton.js + includes/skeleton.php.
   ========================================================================== */

:root {
  --sk-base:      #e9e9e5;                 /* warm light-gray block on off-white  */
  --sk-mid:       #efefec;                 /* soft mid tone                       */
  --sk-sheen:     rgba(255, 255, 255, .62);/* moving highlight                    */
  --sk-border:    rgba(0, 0, 0, .045);
  --sk-radius-sm: 8px;
  --sk-radius-md: 14px;
  --sk-radius-lg: 22px;
  --sk-shimmer-duration: 1.8s;
}

/* ── Core primitive ───────────────────────────────────────────────────────
   A single low-contrast block with a slow horizontal sheen. Uses an animated
   background-position sweep (works on any element, including <img>). */
.fb-sk {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius-md);
  background-color: var(--sk-base);
  background-image: linear-gradient(100deg, transparent 18%, var(--sk-sheen) 50%, transparent 82%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: fb-sk-shimmer var(--sk-shimmer-duration) linear infinite;
  /* never interactive / never reads as content */
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
}

@keyframes fb-sk-shimmer {
  0%   { background-position: 170% 0; }
  100% { background-position: -70% 0; }
}

/* ── Variants ─────────────────────────────────────────────────────────── */
.fb-sk--text   { height: .72em; border-radius: var(--sk-radius-sm); margin: .34em 0; }
.fb-sk--text:last-child { margin-bottom: 0; }
.fb-sk--title  { height: 1.5em; border-radius: var(--sk-radius-sm); margin: .2em 0 .5em; }
.fb-sk--eyebrow{ height: .6em;  width: 5.5rem; border-radius: 999px; margin: 0 0 .6rem; }
.fb-sk--btn    { height: 44px;  border-radius: 999px; }
.fb-sk--chip   { height: 30px;  width: 84px; border-radius: 999px; display: inline-block; }
.fb-sk--circle { border-radius: 50%; }
.fb-sk--image  { border-radius: var(--sk-radius-lg); width: 100%; aspect-ratio: 1 / 1; }
.fb-sk--pill   { border-radius: 999px; }

/* Width helpers used by SkeletonText line variation (deterministic) */
.fb-sk--w90 { width: 90%; } .fb-sk--w80 { width: 80%; } .fb-sk--w70 { width: 70%; }
.fb-sk--w60 { width: 60%; } .fb-sk--w50 { width: 50%; } .fb-sk--w40 { width: 40%; }
.fb-sk--w100{ width: 100%; }

/* ── Region wrapper: marks an async area + fades to real content ────────── */
.fb-sk-region { position: relative; }
.fb-sk-region[aria-busy="true"] .fb-sk-real { opacity: 0; }
.fb-sk-real   { transition: opacity .45s ease; }
.fb-sk-fade-in{ animation: fb-sk-fadein .5s ease both; }
@keyframes fb-sk-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ── Image placeholder ────────────────────────────────────────────────────
   Applied by skeleton.js to lazy/content <img>s. The element's own background
   shows the shimmer until the bitmap paints; on load the bitmap covers it and
   gently fades in. No wrapper → no DOM change → no layout shift. */
img.fb-img-pending {
  background-color: var(--sk-base);
  background-image: linear-gradient(100deg, transparent 18%, var(--sk-sheen) 50%, transparent 82%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: fb-sk-shimmer var(--sk-shimmer-duration) linear infinite;
}
img.fb-img-ready { animation: fb-img-fade .55s ease both; }
@keyframes fb-img-fade { from { opacity: .25; } to { opacity: 1; } }
img.fb-img-error {
  background-color: var(--sk-mid);
  background-image:
    linear-gradient(135deg, transparent 47%, var(--sk-border) 47%, var(--sk-border) 53%, transparent 53%),
    linear-gradient(45deg,  transparent 47%, var(--sk-border) 47%, var(--sk-border) 53%, transparent 53%);
  background-size: 26px 26px;
  background-repeat: repeat;
  animation: none;
}

/* ── Composite: product card skeleton (matches collection-grid card) ─────── */
.fb-sk-card {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  padding: 0;
  background: var(--sk-bg-surface, #fff);
  overflow: hidden;
}
.fb-sk-card .fb-sk--image { border-radius: 0; aspect-ratio: 4 / 5; }
.fb-sk-card__body { padding: 1rem 1.05rem 1.15rem; }
.fb-sk-card__notes { display: flex; gap: .4rem; margin: .7rem 0 .9rem; }

/* ── Composite: product grid (responsive, mirrors the live grid) ────────── */
.fb-sk-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .fb-sk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .fb-sk-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
@media (max-width: 420px)  { .fb-sk-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Composite: order-success confirmation skeleton ─────────────────────── */
.fb-sk-success { text-align: center; }
.fb-sk-success .fb-sk--circle { width: 56px; height: 56px; margin: 0 auto .9rem; }
.fb-sk-success__title { width: 62%; height: 1.7em; margin: .4rem auto .7rem; border-radius: var(--sk-radius-sm); }
.fb-sk-success__lead  { margin: 0 auto 1.6rem; max-width: 30rem; }
.fb-sk-success__rows  { max-width: 30rem; margin: 0 auto 1.4rem; text-align: left; }
.fb-sk-success__row   { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sk-border); }
.fb-sk-success__cta   { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.fb-sk-success__cta .fb-sk--btn { width: 190px; max-width: 46%; }

/* ── Composite: cart rows / checkout summary ────────────────────────────── */
.fb-sk-cart__row { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--sk-border); }
.fb-sk-cart__row .fb-sk--image { width: 46px; height: 46px; aspect-ratio: auto; border-radius: 10px; flex: 0 0 auto; }
.fb-sk-cart__row .fb-sk-cart__lines { flex: 1 1 auto; }
.fb-sk-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; }

/* ── Cart drawer subtle sync shimmer (non-destructive) ──────────────────── */
.fb-cartdock-drawer.is-syncing .fb-cartdock-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background-image: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
  background-color: var(--sk-base);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: fb-sk-bar 1.1s linear infinite; z-index: 5; pointer-events: none;
}
@keyframes fb-sk-bar { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

/* ── Reduced motion: static, low-contrast blocks (no shimmer, no fade) ──── */
@media (prefers-reduced-motion: reduce) {
  .fb-sk,
  img.fb-img-pending,
  img.fb-img-ready,
  .fb-cartdock-drawer.is-syncing .fb-cartdock-panel::before {
    animation: none !important;
    background-image: none !important;
  }
  img.fb-img-ready { opacity: 1 !important; }
  .fb-sk-fade-in { animation: none !important; }
}