/* Product detail */
.product-detail {
  display: grid;
  /* minmax(0,1fr) keeps the single mobile column from sizing to a child's
     max-content (e.g. a long unbroken word), which would push the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .product-detail {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
  }
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.product-info h1 {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xl);
}

.product-info .price {
  font-size: var(--text-xl);
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}

.product-info .description {
  white-space: pre-wrap;
  /* Keep intentional line breaks, but let a long unbroken token (a pasted URL)
     wrap instead of widening the column and forcing sideways page scroll. */
  overflow-wrap: anywhere;
  color: var(--color-text);
  line-height: 1.65;
}

.product-info .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Mobile: the add-to-love-list bar floats fixed above the bottom nav */
.love-cta {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  z-index: var(--z-nav);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-bg);
  border-top: var(--border-thin);
  padding: var(--space-3) var(--space-4);
}

.love-cta .btn {
  flex: 1;
  min-height: 3.25rem;
}

/* Keep the end of the page readable above the fixed bar */
.product-detail {
  padding-bottom: 6.5rem;
}

/* A confirmation toast would otherwise land on top of the fixed add-to-list
   bar the shopper just tapped — lift it clear of the bar on phones. */
@media (max-width: 47.99rem) {
  body:has(.love-cta) .toast-region {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 5.75rem);
  }
}

/* Desktop: no bars to stack — instead the whole buy box (title, price, CTA)
   sticks below the header while the photos scroll. */
@media (min-width: 48rem) {
  .love-cta {
    position: static;
    border-top: none;
    padding: 0;
    background: transparent;
  }

  .product-detail {
    padding-bottom: 0;
  }

  .product-info {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

/* Love list page */
.lovelist-share {
  display: grid;
  /* Single mobile column must not size to the item rows' max-content (a long
     product name is clipped by .row-title, but the grid would otherwise still
     size the track to its full width and overflow the viewport). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .lovelist-share {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: var(--space-8);
  }
}

.share-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* Content gate: minimal password screen */
.gate-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.gate-card {
  width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: var(--border-thin);
  padding: var(--space-8);
  background: var(--color-surface);
}

.gate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gate-mark {
  width: 3rem;
  height: 3rem;
}

.gate-title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.gate-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.lang-choice-title {
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
}

.lang-choice-btn {
  min-height: 3rem;
  font-size: var(--text-md);
  text-transform: none;
  letter-spacing: 0;
}

/* "Continue where you left off" prompt for a shared list */
.continue-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-thin);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-5);
  background: var(--color-surface);
}

.continue-title {
  font-weight: 800;
  font-size: var(--text-lg);
}

.continue-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}