:root {
  --shelby-pink:        #E64980;
  --shelby-pink-dark:   #C2185B;
  --shelby-pink-tint:   #FFF0F5;
  --shelby-pink-soft:   rgba(230, 73, 128, .12);
  --shelby-blue:        #5CB8E4;
  --shelby-ink:         #0F172A;
  --shelby-text:        #1f2937;
  --shelby-muted:       #64748B;
  --shelby-line:        #E6E8EE;
  --shelby-success:     #0F9D58;
  --shelby-danger:      #DC2626;
  --shelby-radius:      12px;
  --shelby-radius-pill: 999px;
  --shelby-shadow-1:    0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --shelby-shadow-2:    0 6px 16px rgba(230,73,128,.22);
}

/* ╔════════════════════════════════════════════════════════════════════
   ║  ADD-TO-CART  →  .shelby-cart-btn
   ╚════════════════════════════════════════════════════════════════════ */
.shelby-cart-btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* color */
  background: var(--shelby-pink);
  color: #fff;
  border: 0;
  /* shape */
  border-radius: var(--shelby-radius);
  /* type */
  font-family: inherit;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1;
  letter-spacing: -.005em;
  /* a11y / control */
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* baseline pill geometry */
  height: 40px;
  padding: 0 16px;
  min-width: 40px;
  box-shadow: var(--shelby-shadow-1);
  transition:
    background-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.shelby-cart-btn:hover {
  background: var(--shelby-pink-dark);
  box-shadow: var(--shelby-shadow-2);
  transform: translateY(-1px);
  color: #fff;
}
.shelby-cart-btn:active   { transform: translateY(0) scale(.97); box-shadow: var(--shelby-shadow-1); }
.shelby-cart-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,73,128,.30);
}
.shelby-cart-btn:disabled {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
  box-shadow: none;
}

/* Icon slot — always identical, sized via parent */
.shelby-cart-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.shelby-cart-btn__icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}
.shelby-cart-btn__label {
  display: inline-block;
  line-height: 1;
}

/* ── Variants ───────────────────────────────────────────────────────── */

/* Icon-only square — used on dense card grids */
.shelby-cart-btn--icon {
  width: 40px;
  padding: 0;
  gap: 0;
}
.shelby-cart-btn--icon .shelby-cart-btn__label { display: none; }

/* Pill — small, with label */
.shelby-cart-btn--pill {
  border-radius: var(--shelby-radius-pill);
  padding: 0 18px;
}

/* Full — large primary CTA on product detail */
.shelby-cart-btn--full {
  height: 52px;
  padding: 0 28px;
  font-size: 1rem;
  border-radius: 14px;
  gap: 10px;
}
.shelby-cart-btn--full .shelby-cart-btn__icon { width: 22px; height: 22px; }
.shelby-cart-btn--full.shelby-cart-btn--block { width: 100%; }

/* Compact (catalog grids, etc.) */
.shelby-cart-btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: .82rem;
  border-radius: 10px;
}
.shelby-cart-btn--sm .shelby-cart-btn__icon { width: 16px; height: 16px; }
.shelby-cart-btn--sm.shelby-cart-btn--icon { width: 36px; padding: 0; }

/* ── Out-of-stock variant (used where in-stock check happens server-side) */
.shelby-cart-btn--oos,
.shelby-cart-btn[disabled].shelby-cart-btn--oos {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  box-shadow: none;
}

/* ── Loading state (set class via JS) */
.shelby-cart-btn.is-loading { cursor: progress; }
.shelby-cart-btn.is-loading .shelby-cart-btn__icon,
.shelby-cart-btn.is-loading .shelby-cart-btn__label { visibility: hidden; }
.shelby-cart-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: shelbySpin .85s linear infinite;
}
@keyframes shelbySpin { to { transform: rotate(360deg); } }

/* ── Success state (set briefly via JS) */
.shelby-cart-btn.is-success {
  background: var(--shelby-success);
  color: #fff;
}
.shelby-cart-btn.is-success:hover { background: var(--shelby-success); }

/* ── Error flash */
.shelby-cart-btn.is-error {
  background: var(--shelby-danger);
  color: #fff;
}


/* ╔════════════════════════════════════════════════════════════════════
   ║  WISHLIST  →  .shelby-wish-btn
   ║  WishlistManager toggles `.active` and `data-in-wishlist="true"`;
   ║  we mirror both for resilience.
   ╚════════════════════════════════════════════════════════════════════ */
.shelby-wish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--shelby-muted);
  border: 1px solid var(--shelby-line);
  border-radius: var(--shelby-radius);
  font-family: inherit;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  height: 40px;
  padding: 0 14px;
  min-width: 40px;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .12s ease,
    box-shadow .18s ease;
  flex-shrink: 0;
}
.shelby-wish-btn:hover {
  border-color: var(--shelby-pink);
  color: var(--shelby-pink-dark);
  background: var(--shelby-pink-tint);
  transform: translateY(-1px);
}
.shelby-wish-btn:active   { transform: translateY(0) scale(.97); }
.shelby-wish-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,73,128,.25);
}

.shelby-wish-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.shelby-wish-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.shelby-wish-btn__label { display: inline-block; line-height: 1; }

/* ── Active state — brand pink heart (overrides WishlistManager's inline red) */
.shelby-wish-btn.active,
.shelby-wish-btn[data-in-wishlist="true"] {
  color: var(--shelby-pink);
  background: var(--shelby-pink-tint);
  border-color: var(--shelby-pink);
}
.shelby-wish-btn.active .shelby-wish-btn__icon svg,
.shelby-wish-btn.active .shelby-wish-btn__icon svg path,
.shelby-wish-btn[data-in-wishlist="true"] .shelby-wish-btn__icon svg,
.shelby-wish-btn[data-in-wishlist="true"] .shelby-wish-btn__icon svg path {
  fill: var(--shelby-pink) !important;   /* override inline style from WishlistManager */
  stroke: var(--shelby-pink) !important;
}
.shelby-wish-btn.active .shelby-wish-btn__icon svg,
.shelby-wish-btn[data-in-wishlist="true"] .shelby-wish-btn__icon svg {
  animation: shelbyHeartBeat .42s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes shelbyHeartBeat {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* ── Variants ───────────────────────────────────────────────────────── */

/* Corner — floats top-end on product cards */
.shelby-wish-btn--corner {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  z-index: 3;
  box-shadow: var(--shelby-shadow-1);
}
.shelby-wish-btn--corner .shelby-wish-btn__label { display: none; }
.shelby-wish-btn--corner .shelby-wish-btn__icon  { width: 16px; height: 16px; }

/* Icon-only, but inline in card actions (sits next to cart btn) */
.shelby-wish-btn--icon {
  width: 40px;
  padding: 0;
  gap: 0;
}
.shelby-wish-btn--icon .shelby-wish-btn__label { display: none; }

/* Inline with label — product detail */
.shelby-wish-btn--inline {
  padding: 0 18px;
  border-radius: var(--shelby-radius-pill);
}

/* Full — large on product detail */
.shelby-wish-btn--full {
  height: 52px;
  padding: 0 22px;
  font-size: .95rem;
  border-radius: 14px;
  gap: 10px;
}
.shelby-wish-btn--full .shelby-wish-btn__icon { width: 22px; height: 22px; }
.shelby-wish-btn--full.shelby-wish-btn--block { width: 100%; }

/* Small */
.shelby-wish-btn--sm {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  font-size: .82rem;
  border-radius: 10px;
}
.shelby-wish-btn--sm.shelby-wish-btn--icon { width: 36px; padding: 0; }
.shelby-wish-btn--sm .shelby-wish-btn__icon { width: 16px; height: 16px; }

/* Loading state (rare on wishlist, but supported) */
.shelby-wish-btn.is-loading { cursor: progress; }
.shelby-wish-btn.is-loading .shelby-wish-btn__icon { opacity: .35; }

/* Disable hover lift when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shelby-cart-btn, .shelby-wish-btn,
  .shelby-cart-btn:hover, .shelby-wish-btn:hover { transform: none; }
  .shelby-wish-btn.active .shelby-wish-btn__icon svg { animation: none; }
}

/* RTL fine-tune for the corner button on very small screens */
@media (max-width: 380px) {
  .shelby-wish-btn--corner { inset-inline-end: 6px; top: 6px; width: 32px; height: 32px; }
  .shelby-wish-btn--corner .shelby-wish-btn__icon { width: 14px; height: 14px; }
}

/* ╔════════════════════════════════════════════════════════════════════
   ║  QUANTITY STEPPER  →  .shelby-stepper
   ║  Replaces an add-to-cart button once the product is in the cart.
   ║  Built + toggled by the ShelbyStepper JS module (see <script> below).
   ╚════════════════════════════════════════════════════════════════════ */
.shelby-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 40px;
  padding: 0 6px;
  border-radius: var(--shelby-radius);
  border: 1.5px solid var(--shelby-pink);
  background: var(--shelby-pink-tint);
  direction: ltr;                 /* −  count  +  — same orientation as the cart page */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shelby-shadow-1);
  vertical-align: middle;
  min-width: 108px;
  box-sizing: border-box;
  /* Sit ABOVE any "stretched link" card overlay (e.g. .home-strip-card__title
     a::after on the home best-seller / new-arrival strips, z-index:1). Without
     this the overlay link intercepts +/−/remove taps and navigates to the
     product page instead of updating quantity in place. Mirrors the z-index the
     buy button it replaces already carries. */
  position: relative;
  z-index: 2;
}
.shelby-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--shelby-pink-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.shelby-stepper__btn:hover  { background: var(--shelby-pink); color: #fff; }
.shelby-stepper__btn:active { transform: scale(.9); }
.shelby-stepper__btn svg    { width: 15px; height: 15px; }
.shelby-stepper__btn.is-remove        { color: var(--shelby-danger); }
.shelby-stepper__btn.is-remove:hover  { background: var(--shelby-danger); color: #fff; }
.shelby-stepper__count {
  min-width: 30px;
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  color: var(--shelby-ink);
  font-variant-numeric: tabular-nums;
}
.shelby-stepper.is-busy {
  pointer-events: none;
  opacity: .6;
}

/* Size variants — mirror the button they replace */
.shelby-stepper--sm { height: 36px; min-width: 98px; }
.shelby-stepper--sm .shelby-stepper__btn { width: 26px; height: 26px; font-size: 16px; }
.shelby-stepper--full {
  height: 52px;
  width: 100%;
  border-radius: 14px;
}
.shelby-stepper--full .shelby-stepper__btn { width: 38px; height: 38px; font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  .shelby-stepper__btn:active { transform: none; }
}