/* Shared checkout + booking payment-widget styles. Replaces the inline
   style attributes that Phase 3-4 put directly into ERB views. */

.payment-wrap {
  padding: 40px 0 120px;
  max-width: 720px;
}

.payment-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
}

.payment-card__eyebrow {
  margin-bottom: 10px;
}

.payment-card__summary {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  margin: 20px 0 24px;
}

.payment-test-banner {
  position: static;
  transform: none;
  margin-bottom: 20px;
  background: var(--accent);
  color: var(--bg);
}

.payment-fake-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.payment-mount {
  min-height: 320px;
}

.payment-secure {
  margin-top: 24px;
}

.payment-fallback-link {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

/* ---- Checkout form page ---- */

.checkout-form-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Defined here (not mobile.css) because payment.css loads last — a media query
   in an earlier sheet would lose to the base rule above on equal specificity. */
@media (max-width: 900px) {
  .checkout-form-grid { grid-template-columns: 1fr; }
}

.checkout-summary {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky;
  top: 100px;
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: italic;
}

.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
}

.checkout-step-title {
  font-style: italic;
  margin: 0 0 20px;
}

.checkout-step-title--spaced { margin: 40px 0 20px; }

/* ---- Thank-you pages ---- */

.thank-wrap {
  padding: 120px 0 160px;
  max-width: 640px;
  text-align: center;
}

.thank-title {
  font-size: clamp(3rem, 7vw, 6rem);
  font-style: italic;
  line-height: 1;
}

.thank-lede {
  margin: 32px auto 40px;
  max-width: 48ch;
}

.receipt-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: left;
  margin: 40px 0;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: italic;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
}

/* ---- Product detail page ---- */

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start; /* image top-aligns with the title, not floating centred */
}
@media (max-width: 900px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
}

.product-detail-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
}

.product-badge-low {
  left: auto !important;
  right: 14px !important;
  background: var(--accent) !important;
  color: var(--bg) !important;
}

.product-badge-soldout {
  left: auto !important;
  right: 14px !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* ---- Product gallery ---- */

.product-gallery__hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.product-gallery__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-1), border-color var(--dur-1);
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--ink);
}

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

.product-detail-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-style: italic;
}

.product-detail-price {
  font-size: var(--step-2);
  margin: 24px 0;
}

.product-detail-body {
  color: var(--ink-soft);
  max-width: 48ch;
  line-height: 1.6;
}

.product-detail-actions {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.product-add-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.product-qty {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-qty__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.product-qty__select {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

/* A sold-out CTA is a non-interactive span styled as a button — don't imply a click. */
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}