/* ==========================================================================
   v98-additions.css
   ── Menu animation flash fix (CSS layer)
   ── Focus ring removal on gate wrapper
   ── Eye socket border sharpness
   ========================================================================== */

/*
 * MENU ANIMATION FLASH FIX (CSS guard)
 * menu.js now adds 'open' and 'cb-animating' in the same rAF tick,
 * but as a CSS safety net: when a panel has just .open and nothing else
 * (the 1-frame window before rAF fires) keep items at opacity:0 so there
 * is no visible flash even if a slow browser delays the rAF.
 */
.cb-offcanvas li,
.cb-offcanvas p {
  opacity: 0;
}

/* Only restore opacity:1 when open AND neither animation class is pending
   This rule fires after the stagger animation is fully done (cb-animating removed) */
.cb-offcanvas.open:not(.cb-animating):not(.cb-fast-fade) li,
.cb-offcanvas.open:not(.cb-animating):not(.cb-fast-fade) p {
  opacity: 1;
}

/* h5 headings are always visible — they don't participate in stagger */
.cb-offcanvas h5 {
  opacity: 1 !important;
}

/* ── FOCUS RING REMOVAL ────────────────────────────────────────────── */
/* Kill browser blue box on gate wrapper click */
.cb-star-wrapper,
.cb-star-wrapper:focus,
.cb-star-wrapper:focus-visible,
.cb-star-wrapper:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ── SVG SOCKET BORDER SHARPNESS ───────────────────────────────────── */
#cb-star-gate .cb-star-wrapper svg {
  shape-rendering: geometricPrecision;
}
#cb-star-gate .cb-star-wrapper svg polygon {
  shape-rendering: geometricPrecision;
}

/* ── SWIPE ZONES ───────────────────────────────────────────────────── */
.cb-swipe-left-zone,
.cb-swipe-right-zone {
  position: fixed;
  top: 0; bottom: 0;
  width: 20px;
  z-index: calc(var(--cb-z-header, 20000) - 10);
  pointer-events: auto;
  /* Touch hit area with visual affordance on dev; invisible in prod */
}
.cb-swipe-left-zone  { left: 0; }
.cb-swipe-right-zone { right: 0; }

/* ── PRODUCT BADGES ─────────────────────────────────────────────────── */
.cb-hprod-out-of-stock,
.cb-hprod-new-badge {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: .40rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 0;
  line-height: 1;
  pointer-events: none;
}
.cb-hprod-new-badge {
  top: .5rem; left: .5rem;
  background: var(--cb-hamburger-pink, #ff4fa3);
  color: #fff;
}
.cb-hprod-out-of-stock {
  top: .5rem; right: .5rem;
  background: rgba(0,0,0,.7);
  color: #fff;
}

/* ── TOAST NOTIFICATION ─────────────────────────────────────────────── */
.cb-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 99999;
  font-family: 'JetBrains Mono', monospace;
  font-size: .54rem; font-weight: 600; letter-spacing: .06em;
  background: var(--cb-right-bg-color, #111);
  color: var(--cb-right-link-color, #fff);
  padding: .65rem 1.2rem;
  border-radius: 0;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
}
.cb-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cb-toast--success { border-left: 3px solid #27ae60; }
.cb-toast--error   { border-left: 3px solid #e74c3c; }
.cb-toast--info    { border-left: 3px solid var(--cb-hamburger-pink, #ff4fa3); }

/* ── NOW PLAYING DOT ────────────────────────────────────────────────── */
.cb-now-playing-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--cb-hamburger-pink, #ff4fa3);
  border-radius: 50%; margin-right: .3rem;
  animation: cb-now-pulse 1.4s ease-in-out infinite; vertical-align: middle;
}
@keyframes cb-now-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

/* ── SIZE GUIDE IMPROVEMENTS ────────────────────────────────────────── */
.cb-size-chart-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: .50rem;
  color: var(--cb-color-body, #888);
  margin: .8rem 0 0;
  border-left: 2px solid var(--cb-hamburger-pink, #ff4fa3);
  padding-left: .6rem;
}

/* ── SKELETON LOADING ───────────────────────────────────────────────── */
.cb-skeleton {
  background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: cb-shimmer 1.5s ease-in-out infinite;
}
@keyframes cb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width:600px){
  .cb-toast { left:1rem; right:1rem; transform:translateY(6px); white-space:normal; }
  .cb-toast.visible { transform:translateY(0); }
}