/* =========================================
   BUNDLE CAROUSEL — "Complete the bundle"
   Split out of components.css on purpose. Clarity inlines stylesheet text into the
   session payload and truncates past a size cap; at 47KB the tail of components.css
   was being dropped, so these rules (which sat at 88–98% of the file) never reached
   session replay and the rail looked unstyled there. Real visitors were unaffected —
   this keeps the diagnostic tool honest. Keep this file small.
========================================= */
.bundle-carousel {
  display: none;   /* CSS owns the default; JS sets inline display and always wins */
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.bc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
}

.bc-head i {
  font-size: 0.95rem;
  opacity: 0.7;
}

/* Head links to the bundle collection. inline-flex centres the arrow against the
   label (a bare → glyph sits low on the baseline and looked off). The LABEL is
   underlined — not the arrow — so it clearly reads as a link without a blue colour. */
a.bc-head-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.bc-head-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bc-head-arrow {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
}

/* Horizontal rail. Cards are a fixed width so the next one always peeks in —
   a rail that ends flush reads as a finished grid and never gets scrolled. */
.bc-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.bc-rail::-webkit-scrollbar { display: none; }

.bc-card {
  flex: 0 0 118px;
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
}

.bc-card-img {
  position: relative;
  width: 118px;
  height: 152px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.bc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same affordance as the product grid's quick-add, at rail scale. */
.bc-add {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: var(--shadow-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.bc-add:hover { transform: scale(1.08); }

.bc-add.is-added {
  background: var(--text-color);
  color: var(--bg-color);
}

.bc-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.bc-card-title {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-color);
  /* Two lines max — a third pushes the rail height around as titles vary. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bc-card-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color);
}

/* The inherited size, shown so the customer knows what a tap will add. */
.bc-size {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border: 1px solid var(--border-color);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* In the drawer the rail sits inside the scrolling item list, so it needs its
   own horizontal padding instead of the panel's. */
.cart-drawer .bundle-carousel {
  margin: 0 20px 4px;
  padding-top: 14px;
}

/* SSR marks bundle products with data-bundle="1" (functions/product/[slug].js).
   Hold the rail's height from first paint so the client-side render drops into a
   slot that already exists instead of pushing the page down. A faint skeleton row
   keeps the reserved space from reading as a rendering gap. */
.bundle-carousel[data-bundle="1"] {
  display: block;
  min-height: 232px;
}

.bundle-carousel[data-bundle="1"]:empty::after {
  content: '';
  display: block;
  height: 196px;
  margin-top: 28px;
  background:
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) left top / 118px 152px no-repeat,
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) 128px top / 118px 152px no-repeat;
  opacity: 0.6;
}

/* Add confirmation. The drawer stays shut on a rail add, so the toast and the badge
   bump are the only things telling the customer it worked. */
/* display:none until a message arrives, so it reserves ZERO space when empty — the
   old min-height left a permanent gap under the rail. display can't transition, but a
   confirmation toast appearing instantly is fine; the fade is a nicety, not needed. */
.bc-toast {
  display: none;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bc-toast.is-on {
  display: block;
}

.cart-count-badge.is-bumped {
  animation: cart-badge-bump 0.45s ease;
}

@keyframes cart-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-count-badge.is-bumped { animation: none; }
  .bc-toast { transition: none; }
}

/* Scroll affordance for the bundle rail. A horizontal list gives no hint that more
   cards exist off-screen; the nudging chevron does, and pressing it scrolls. */
.bc-rail-wrap {
  position: relative;
}

.bc-scroll-hint {
  position: absolute;
  right: 0;
  /* Sits against the card image, not the title block below it. */
  top: 76px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: var(--shadow-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 2;
  animation: bc-nudge 1.6s ease-in-out infinite;
  transition: opacity 0.25s ease;
}

.bc-scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes bc-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .bc-scroll-hint { animation: none; }
}