/* ==========================================================================
   SOPHOLIAGE — SHARED CART COMPONENT
   Depends on theme.css. Scoped under .sc- (Shared Cart) prefix.
   Used on BOTH the calendar and storefront pages — this is the one cart
   for classes AND products together.
   ========================================================================== */

.sc-fab {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: none;
  border-radius: 999px;
  padding: 0.8em 1.3em;
  background: var(--color-accent-strong);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.sc-fab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--color-mauve);
  color: var(--color-cream);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.sc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 42, 34, 0.5);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease-standard);
}
.sc-overlay.is-open { opacity: 1; pointer-events: auto; }

.sc-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-med) var(--ease-standard);
}
.sc-overlay.is-open .sc-drawer { transform: translateX(0); }

.sc-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sc-drawer__close {
  background: none; border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 0.2em 0.4em;
}
.sc-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.sc-drawer__footer { padding: var(--space-4); border-top: 1px solid var(--color-border); }

.sc-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-6) var(--space-2); }

.sc-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sc-item:last-child { border-bottom: none; margin-bottom: 0; }
.sc-item__badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-strong);
  display: block;
  margin-bottom: 0.2em;
}
.sc-item__name { font-weight: 600; font-size: var(--fs-sm); }
.sc-item__meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 0.4em; }
.sc-item__row { display: flex; justify-content: space-between; align-items: center; }

.sc-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.sc-qty-stepper button {
  width: 1.8rem; height: 1.8rem;
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-sm); color: var(--color-accent-strong);
}
.sc-qty-stepper span { min-width: 1.6rem; text-align: center; font-size: var(--fs-sm); }

.sc-item__remove {
  background: none; border: none;
  color: var(--color-danger);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.sc-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.sc-subtotal-row--minor {
  /* Label on the left, amount on the right, always with a gap between them. */
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-bottom: 0.3em;
}

.sc-banner {
  border-radius: var(--radius-sm);
  padding: 0.6em 0.9em;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.sc-banner--info { background: var(--color-bg-raised); color: var(--color-accent-strong); }
.sc-banner--error { background: rgba(160,90,78,0.12); color: var(--color-danger); display: none; }
.sc-banner--error.is-visible { display: block; }

.sc-fulfillment-toggle { display: flex; gap: 0.6em; margin-bottom: var(--space-3); }
.sc-fulfillment-option {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.sc-fulfillment-option.is-selected { border-color: var(--color-accent-strong); background: var(--color-bg-raised); }
.sc-fulfillment-option input { display: none; }
.sc-fulfillment-option__title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.2em; }
.sc-fulfillment-option__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }

.sc-pickup-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  margin-bottom: var(--space-3);
}

.sc-card-element-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85em;
  background: var(--color-bg);
}
.sc-card-mock {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  text-align: center;
}

.sc-toast {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--color-accent-strong);
  color: var(--color-cream);
  border: none;
  font-family: var(--font-body);
  padding: 0.7em 1.4em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-med) var(--ease-standard);
}
.sc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Apple Pay button (product-only carts). Uses Apple's own button styling,
   which Safari renders natively; the button only exists when Apple Pay works. */
.sc-applepay-btn {
  -webkit-appearance: -apple-pay-button;
  appearance: -apple-pay-button;
  -apple-pay-button-type: buy;
  -apple-pay-button-style: black;
  display: block;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: var(--space-2);
}
/* All three wallet buttons match Google Pay's fixed size: full width, 40px
   tall. Google's corner is a fixed 4px; Apple's is set to match. */
.sc-googlepay-wrap { height: 40px; margin-bottom: var(--space-2); }
.sc-cashapp-wrap { min-height: 40px; margin-bottom: var(--space-2); }
.sc-wallet-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  margin: 0 0 var(--space-3);
}
.sc-wallet-or {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-4);
}