/* Before/After DRAGGER styles */
.ba-dragger { margin: 24px 0; }
.bad-viewport { position: relative; }
.bad-stage {
  position: relative; overflow: hidden; aspect-ratio: 3/2;
  background: var(--ivory-3); user-select: none; cursor: ew-resize; touch-action: none;
}
.bad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.bad-clip { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; overflow: hidden; will-change: width; }
/* before image must render at the FULL stage width so it superposes exactly on the after image */
.bad-clip .bad-before { position: absolute; top: 0; left: 0; height: 100%; width: var(--bad-stage-w, 100%); max-width: none; object-fit: contain; }
.bad-tag {
  position: absolute; bottom: 16px; z-index: 4;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(245,241,234,0.9); border: 1px solid var(--line); color: var(--ink-2);
}
.bad-tag-before { left: 16px; } .bad-tag-after { right: 16px; }
.bad-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ivory);
  transform: translateX(-50%); z-index: 5; cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(26,26,26,0.15);
}
.bad-line { position: absolute; inset: 0; width: 2px; background: var(--ivory); }
.bad-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: 0 2px 10px rgba(26,26,26,0.25); border: 1px solid var(--line);
}
.bad-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(26,26,26,0.045) 11px 12px), linear-gradient(135deg, var(--ivory-3) 0%, var(--ivory-2) 100%);
}
.bad-ph span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.bad-cap { text-align: center; padding: 14px 0 4px; font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--ink-2); }
.bad-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.bad-thumb {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; font-family: var(--f-sans);
}
.bad-thumb.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.bad-note { text-align: center; font-size: 12px; color: var(--ink-3); font-style: italic; padding: 14px 0; font-family: var(--f-serif); }

/* Applicator carousel */
.app-carousel { position: relative; overflow: hidden; margin: 24px 0 8px; border: 1px solid var(--line-soft); background: var(--ivory-2); }
.app-track { display: flex; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.app-slide { flex: 0 0 100%; margin: 0; }
.app-slide img { width: 100%; height: auto; display: block; }
.app-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(245,241,234,0.92); color: var(--ink); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .2s, color .2s; }
.app-nav:hover { background: var(--ink); color: var(--ivory); }
.app-prev { left: 12px; } .app-next { right: 12px; }
.app-dots { display: flex; gap: 8px; justify-content: center; padding: 14px 0; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold-2); background: transparent; cursor: pointer; padding: 0; }
.app-dot.active { background: var(--gold-2); }

/* legacy carousel (kept for safety) */
.ba-carousel { position: relative; overflow: hidden; margin: 24px 0; }
.ba-track { display: flex; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.ba-slide { flex: 0 0 100%; margin: 0; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba-half { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ivory-3); }
.ba-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-single img { width: 100%; height: auto; display: block; }
.ba-tag {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(245,241,234,0.9); border: 1px solid var(--line); color: var(--ink-2);
}
.ba-cap {
  text-align: center; padding: 14px 0 4px;
  font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--ink-2);
}
.ba-ph {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(26,26,26,0.045) 11px 12px), linear-gradient(135deg, var(--ivory-3) 0%, var(--ivory-2) 100%);
  display: flex; align-items: center; justify-content: center;
}
.ba-ph-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.ba-nav {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(245,241,234,0.92); color: var(--ink); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .2s, color .2s;
}
.ba-nav:hover { background: var(--ink); color: var(--ivory); }
.ba-prev { left: 12px; } .ba-next { right: 12px; }
.ba-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.ba-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold-2); background: transparent; cursor: pointer; padding: 0; }
.ba-dot.active { background: var(--gold-2); }
.ba-empty-note { text-align: center; font-size: 12px; color: var(--ink-3); font-style: italic; padding: 14px 0; font-family: var(--f-serif); }
@media (max-width: 640px) { .ba-tag { font-size: 8px; padding: 4px 7px; } }