/* ===== Page loading animation + sync notice (shared by every page) ===== */
:root{
  --pl-bg:#f7f4ef; --pl-brown:#8b5a32; --pl-gold:#d8ab73; --pl-text:#6f4728;
}
#page-loader{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--pl-bg);
  background:radial-gradient(circle at 30% 20%, #fff, var(--pl-bg) 60%);
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility .35s ease;
}
#page-loader.pl-hide{ opacity:0; visibility:hidden; pointer-events:none; }
#page-loader.pl-overlay{ background:rgba(247,244,239,.82); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

#page-loader .pl-brand{
  font:600 clamp(1.1rem,4.5vw,1.5rem)/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.32em; color:var(--pl-text); text-transform:uppercase;
  animation:pl-fade 1.6s ease-in-out infinite;
}
#page-loader .pl-brand i{ font-style:normal; color:var(--pl-gold); margin:0 .35em; }

#page-loader .pl-ring{
  position:relative; width:64px; height:64px;
}
#page-loader .pl-ring::before,
#page-loader .pl-ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:4px solid transparent;
}
#page-loader .pl-ring::before{
  border-top-color:var(--pl-brown); border-right-color:var(--pl-brown);
  animation:pl-spin 1s cubic-bezier(.55,.15,.45,.85) infinite;
}
#page-loader .pl-ring::after{
  inset:10px; border-bottom-color:var(--pl-gold); border-left-color:var(--pl-gold);
  animation:pl-spin 1.4s linear infinite reverse;
}
#page-loader .pl-dots{ display:flex; gap:7px; height:8px; }
#page-loader .pl-dots span{
  width:8px; height:8px; border-radius:50%; background:var(--pl-gold);
  animation:pl-bounce 1.1s ease-in-out infinite;
}
#page-loader .pl-dots span:nth-child(2){ animation-delay:.15s; }
#page-loader .pl-dots span:nth-child(3){ animation-delay:.3s; }

@keyframes pl-spin{ to{ transform:rotate(360deg); } }
@keyframes pl-bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-7px); opacity:1; } }
@keyframes pl-fade{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* thin progress bar for background requests (add to cart, saving, etc.) */
#pl-bar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:2147483001;
  background:linear-gradient(90deg,var(--pl-gold),var(--pl-brown));
  box-shadow:0 0 8px rgba(139,90,50,.5);
  opacity:0; transition:width .3s ease, opacity .3s ease;
  pointer-events:none;
}
#pl-bar.on{ opacity:1; }

/* spinner inside a clicked submit button */
.pl-btn-busy{ position:relative; pointer-events:none; opacity:.85; }
.pl-btn-busy::after{
  content:""; display:inline-block; width:.9em; height:.9em; margin-left:.55em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  vertical-align:-.12em; animation:pl-spin .7s linear infinite;
}

/* "changed on another device" notice */
#sync-notice{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,24px);
  z-index:2147482000; max-width:min(92vw,460px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  background:#2b2118; color:#fff; padding:12px 16px; border-radius:14px;
  font:500 .9rem/1.35 Inter,system-ui,sans-serif;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transition:all .3s ease;
}
#sync-notice.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
#sync-notice button{
  border:0; cursor:pointer; padding:7px 14px; border-radius:999px;
  background:var(--pl-gold); color:#2b2118; font:700 .85rem Inter,system-ui,sans-serif;
}

@media (prefers-reduced-motion:reduce){
  #page-loader .pl-ring::before,#page-loader .pl-ring::after,
  #page-loader .pl-dots span,#page-loader .pl-brand{ animation-duration:3s; }
}

@media print{ #page-loader,#pl-bar,#sync-notice,.nav-toggle{ display:none !important; } }