/* essentials.css — Essentials upsell, cards, free-kit banner & checkout reminder.
 *
 * CSS class contract (Track A owns these names; Track C markup + pay.html
 * consume them verbatim):
 *   .tgp-ess-upsell                      upsell wrapper (PDP)
 *   .tgp-ess-upsell__head / __sub        heading + subheading
 *   .tgp-ess-upsell__grid                1 col mobile / 2 tablet / 3 desktop
 *   .tgp-ess-card                        product card
 *   .tgp-ess-card__media                 image holder (lazy <img>)
 *   .tgp-ess-card__title / __meta        name + spec line
 *   .tgp-ess-card__price                 price
 *   .tgp-ess-card__cta                   action button / link
 *   .tgp-ess-card--free                  free-kit info variant
 *   .tgp-ess-card__status                "Included automatically" status pill
 *   .tgp-ess-card--soldout               unavailable state (cta disabled)
 *   .tgp-ess-kitbanner                   cart/checkout free-kit banner
 *   .tgp-ess-reminder                    checkout reminder block
 *   .tgp-ess-reminder__title / __text / __actions
 *
 * Premium dark theme, brass/gold accents, WCAG AA, reduced-motion safe,
 * no horizontal overflow, touch-friendly. Brass tones are sourced from the
 * existing project gold palette (#e7c178 / #e3b341 / rgba(214,169,76,…)).
 */

/* -- Scoped brass tokens (harmonised with the existing gold accents) -- */
.tgp-ess-upsell,
.tgp-ess-kitbanner,
.tgp-ess-reminder {
  --tgp-brass: #e7c178;
  --tgp-brass-strong: #e3b341;
  --tgp-brass-soft: rgba(214, 169, 76, 0.12);
  --tgp-brass-tint: rgba(214, 169, 76, 0.06);
  --tgp-brass-border: rgba(214, 169, 76, 0.30);
  --tgp-ess-radius: var(--radius-lg, 16px);
  --tgp-ess-gap: var(--space-4, 16px);
}

html[data-theme="light"] .tgp-ess-upsell,
html[data-theme="light"] .tgp-ess-kitbanner,
html[data-theme="light"] .tgp-ess-reminder {
  /* Darker brass for AA contrast on the cream page background. */
  --tgp-brass: #8a6310;
  --tgp-brass-strong: #a07515;
  --tgp-brass-soft: rgba(160, 117, 21, 0.10);
  --tgp-brass-tint: rgba(160, 117, 21, 0.05);
  --tgp-brass-border: rgba(160, 117, 21, 0.28);
}

/* ============================================================= */
/* PDP upsell                                                    */
/* ============================================================= */
.tgp-ess-upsell {
  display: block;
  margin: var(--space-7, 48px) 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tgp-ess-radius);
  background:
    linear-gradient(180deg, var(--tgp-brass-tint), transparent 60%),
    var(--color-surface, #111114);
  max-width: 100%;
  overflow: hidden; /* contain any rounding / bleed; no horizontal scroll */
}

.tgp-ess-upsell__head {
  margin: 0 0 var(--space-2, 8px);
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
  font-size: var(--text-2xl, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text, #fff);
}

.tgp-ess-upsell__sub {
  margin: 0 0 var(--space-5, 24px);
  max-width: 64ch;
  font-size: var(--text-base, 15px);
  line-height: 1.6;
  color: var(--color-text-muted, #a8a8af);
}

.tgp-ess-upsell__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tgp-ess-gap);
}

@media (min-width: 600px) {
  .tgp-ess-upsell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .tgp-ess-upsell__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================= */
/* Cards                                                         */
/* ============================================================= */
.tgp-ess-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow shrink inside grid track; prevents overflow */
  padding: var(--space-4, 16px);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-raised, #17171b);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) {
  .tgp-ess-card:hover {
    border-color: var(--tgp-brass-border);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

.tgp-ess-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3, 12px);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-elevated, #0b0b0d);
  overflow: hidden;
}

.tgp-ess-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.tgp-ess-card__title {
  margin: 0 0 4px;
  font-size: var(--text-base, 15px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text, #fff);
}

.tgp-ess-card__meta {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--text-sm, 13px);
  line-height: 1.5;
  color: var(--color-text-muted, #a8a8af);
}

.tgp-ess-card__price {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--text-lg, 17px);
  font-weight: 700;
  color: var(--tgp-brass);
  letter-spacing: 0.01em;
}

/* Push the CTA to the bottom so cards of unequal text length align. */
.tgp-ess-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  min-height: 44px; /* touch target */
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-accent, #e01b1b);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.tgp-ess-card__cta:hover {
  background: var(--color-accent-hover, #ff3030);
}

.tgp-ess-card__cta:focus-visible {
  outline: 2px solid var(--tgp-brass-strong);
  outline-offset: 2px;
}

/* ---- Free-kit info variant ---- */
.tgp-ess-card--free {
  border-color: var(--tgp-brass-border);
  background:
    linear-gradient(180deg, var(--tgp-brass-soft), transparent 55%),
    var(--color-surface-raised, #17171b);
}

.tgp-ess-card--free .tgp-ess-card__price {
  color: var(--tgp-brass-strong);
}

.tgp-ess-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--tgp-brass-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--tgp-brass-soft);
  color: var(--tgp-brass);
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* ---- Unavailable state ---- */
.tgp-ess-card--soldout {
  opacity: 0.85;
}

.tgp-ess-card--soldout .tgp-ess-card__media,
.tgp-ess-card--soldout .tgp-ess-card__price {
  filter: grayscale(0.4);
  opacity: 0.7;
}

.tgp-ess-card--soldout .tgp-ess-card__cta,
.tgp-ess-card__cta:disabled,
.tgp-ess-card__cta[disabled],
.tgp-ess-card__cta[aria-disabled="true"] {
  background: var(--color-surface, #111114);
  border-color: var(--color-border-strong, rgba(255, 255, 255, 0.16));
  color: var(--color-text-muted, #a8a8af);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================= */
/* Cart / checkout free-kit banner                              */
/* ============================================================= */
.tgp-ess-kitbanner {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin: var(--space-3, 12px) 0;
  padding: 12px 14px;
  border: 1px solid var(--tgp-brass-border);
  border-radius: var(--radius-md, 10px);
  background:
    linear-gradient(180deg, var(--tgp-brass-soft), transparent),
    var(--color-surface-raised, #17171b);
  max-width: 100%;
}

.tgp-ess-kitbanner__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 6px);
  background: var(--tgp-brass-soft);
  color: var(--tgp-brass);
}

.tgp-ess-kitbanner__icon svg { display: block; }

.tgp-ess-kitbanner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tgp-ess-kitbanner__title {
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tgp-brass);
}

.tgp-ess-kitbanner__detail {
  font-size: var(--text-xs, 12px);
  line-height: 1.4;
  color: var(--color-text-soft, #e0e0e3);
}

.tgp-ess-kitbanner--soldout {
  border-color: var(--color-border-strong, rgba(255, 255, 255, 0.16));
  background: var(--color-surface, #111114);
}

.tgp-ess-kitbanner--soldout .tgp-ess-kitbanner__detail {
  color: var(--color-text-muted, #a8a8af);
}

/* ============================================================= */
/* Checkout reminder                                            */
/* ============================================================= */
.tgp-ess-reminder {
  margin: var(--space-4, 16px) 0;
  padding: clamp(14px, 2.4vw, 20px);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 10px);
  background:
    linear-gradient(180deg, var(--tgp-brass-tint), transparent 60%),
    var(--color-surface, #111114);
  max-width: 100%;
}

.tgp-ess-reminder__title {
  margin: 0 0 4px;
  font-size: var(--text-base, 15px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #fff);
}

.tgp-ess-reminder__text {
  margin: 0 0 var(--space-3, 12px);
  max-width: 60ch;
  font-size: var(--text-sm, 13px);
  line-height: 1.55;
  color: var(--color-text-muted, #a8a8af);
}

.tgp-ess-reminder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.tgp-ess-reminder__actions .tgp-ess-card__cta,
.tgp-ess-reminder__actions a,
.tgp-ess-reminder__actions button {
  flex: 1 1 auto;
  min-width: 0;
}

/* Compact "already added" reminder variant. */
.tgp-ess-reminder--done {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 10px 14px;
}

.tgp-ess-reminder--done .tgp-ess-reminder__title {
  margin: 0;
  font-size: var(--text-sm, 13px);
  color: var(--tgp-brass);
}

.tgp-ess-reminder--done .tgp-ess-reminder__text,
.tgp-ess-reminder--done .tgp-ess-reminder__actions {
  display: none;
}

/* ============================================================= */
/* Motion safety                                                */
/* ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .tgp-ess-card,
  .tgp-ess-card__cta {
    transition: none;
  }
  .tgp-ess-card:hover {
    transform: none;
  }
}


/* -- Auto-cyclende product-foto-galerij in kaarten (Essentials: los/pakje/doos) -- */
.tgp-card-gallery { position: absolute; inset: 0; width: 100%; height: 100%; }
.tgp-card-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.tgp-card-gallery__img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tgp-card-gallery[data-count="3"] .tgp-card-gallery__img { animation: tgpCardGal3 7.2s infinite both; }
  .tgp-card-gallery[data-count="3"] .tgp-card-gallery__img:nth-child(1) { animation-delay: 0s; }
  .tgp-card-gallery[data-count="3"] .tgp-card-gallery__img:nth-child(2) { animation-delay: 2.4s; }
  .tgp-card-gallery[data-count="3"] .tgp-card-gallery__img:nth-child(3) { animation-delay: 4.8s; }
  .tgp-card-gallery[data-count="2"] .tgp-card-gallery__img { animation: tgpCardGal2 6s infinite both; }
  .tgp-card-gallery[data-count="2"] .tgp-card-gallery__img:nth-child(2) { animation-delay: 3s; }
  @keyframes tgpCardGal3 { 0% { opacity: 1; } 28% { opacity: 1; } 36% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes tgpCardGal2 { 0% { opacity: 1; } 42% { opacity: 1; } 52% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } }
}