/* =============================================================================
   Eternal Thread — Components
   Buttons, inputs, cards, scripture scroller, swatches, tags
   ============================================================================= */

/* ── Buttons ── */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-16) var(--space-32);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.et-btn:hover  { opacity: 0.85; transform: translateY(-1px); }
.et-btn:active { opacity: 1;    transform: translateY(0); }

.et-btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
}

.et-btn--secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.et-btn--text {
  background: transparent;
  color: var(--on-surface);
  padding-inline: 0;
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-size: var(--text-body-sm);
  font-weight: 500;
}
.et-btn--text:hover { opacity: 0.65; transform: none; }

/* Arrow suffix — used on CTA buttons */
.et-btn--arrow::after {
  content: '→';
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0;
  transition: transform var(--transition-fast);
}
.et-btn--arrow:hover::after { transform: translateX(3px); }

/* ── Input fields ── */
.et-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.et-field label {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.et-field input,
.et-field textarea,
.et-field select {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--on-surface);
  background: var(--surface-container-highest);
  border: none;
  border-bottom: 1px solid rgba(26, 28, 26, 0.20);
  border-radius: 0;
  padding: var(--space-12) var(--space-16);
  width: 100%;
  transition: border-color var(--transition-base), background var(--transition-base);
  outline: none;
  appearance: none;
}
.et-field input:focus,
.et-field textarea:focus,
.et-field select:focus {
  border-bottom-color: var(--secondary);
  background: var(--surface-container-lowest);
}
.et-field input::placeholder,
.et-field textarea::placeholder { color: var(--outline-variant); }

/* ── Card ── */
.et-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* elevation via surface layering, no border, no hard shadow */
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.et-card:hover {
  box-shadow: 0 4px 40px rgba(26, 28, 26, 0.10);
  transform: translateY(-2px);
}
.et-card__media { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.et-card__body  { padding: var(--space-16) var(--space-24) var(--space-24); }
.et-card__label {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--space-4);
}
.et-card__title {
  font-family: var(--font-display);
  font-size: var(--text-title-lg);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
}
.et-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--on-surface);
}

/* ── Colour swatch row ── */
.et-swatches {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  flex-wrap: wrap;
}
.et-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(26,28,26,0.12);
}
.et-swatch:hover,
.et-swatch.is-active { transform: scale(1.15); }
.et-swatch.is-active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--on-surface);
}

/* ── Scripture scroller ── */
.et-scripture {
  overflow: hidden;
  padding-block: var(--space-48);
  background: var(--surface-container);
}
.et-scripture__track {
  display: flex;
  gap: var(--space-96);
  width: max-content;
  animation: et-scroll 30s linear infinite;
  will-change: transform; /* promote to own compositor layer */
}
.et-scripture__track:hover { animation-play-state: paused; }
.et-scripture__item,
.et-scripture__track span {
  font-family: var(--font-editorial);
  font-size: var(--text-title-lg);
  font-style: italic;
  color: var(--tertiary);
  white-space: nowrap;
}
.et-scripture__item::before,
.et-scripture__track span::before { content: '✦ '; font-style: normal; font-size: 0.6em; vertical-align: middle; }

@keyframes et-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Trust strip ── */
.et-trust {
  display: flex;
  gap: var(--space-32);
  flex-wrap: wrap;
}
.et-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.et-trust__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Product grid ── */
.et-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* Product card */
.et-product-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.et-product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;          /* Square — consistent for all image types */
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* Show full image — no cropping */
  object-position: center;
  padding: 6px;                 /* Tiny breathing room so nothing clips */
  transition: transform var(--transition-slow);
}
.et-product-card:hover .et-product-card__image img { transform: scale(1.04); }
.et-product-card__badge {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
}
.et-product-card__info { padding: 0 var(--space-4); }
.et-product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
}
.et-product-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

/* ── Badge / tag ── */
.et-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px var(--space-8);
  border-radius: 2px;
  background: #fff;
  color: var(--primary);
  line-height: 1.6;
}

.et-badge--secondary {
  background: var(--secondary);
  color: #fff;
}

.et-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* ── Accordion (FAQ) ── */
.et-accordion { list-style: none; margin: 0; padding: 0; }
.et-accordion__item { border-bottom: none; background: var(--surface-container-lowest); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.et-accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-24);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  font-weight: 600;
  color: var(--primary);
  text-align: left;
  gap: var(--space-16);
}
.et-accordion__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.et-accordion__item.is-open .et-accordion__icon { transform: rotate(180deg); }
.et-accordion__body {
  display: none;
  padding: 0 var(--space-24) var(--space-24);
  font-family: var(--font-editorial);
  font-size: var(--text-body-md);
  color: var(--on-surface-variant);
  line-height: 1.7;
}
.et-accordion__item.is-open .et-accordion__body { display: block; }

/* ── Pull quote ── */
.et-pullquote {
  font-family: var(--font-editorial);
  font-size: var(--text-headline-sm);
  font-style: italic;
  color: var(--on-surface);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
  padding: var(--space-64) 0;
  position: relative;
}
.et-pullquote::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--tertiary);
  opacity: 0.3;
  position: absolute;
  top: var(--space-16);
  left: -var(--space-16);
  pointer-events: none;
}
.et-pullquote cite {
  display: block;
  margin-top: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}