/* ==========================================================================
   Meet Our Companions — Products Section
   ========================================================================== */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.ht-library-products {
  background-color: #23211B;
  padding-block:    clamp(4.5rem, 9vw, 7rem);
  position:         relative;
  overflow:         hidden;
}

/* Faint botanical watermark */
.ht-library-products::before {
  content:             '';
  position:            absolute;
  inset:               0;
  background-image:    url('../images/container-bg.jpeg');
  background-size:     560px auto;
  background-repeat:   repeat;
  opacity:             .035;
  pointer-events:      none;
}

/* Founding Collection card + Coming Soon panel, reused from the shop page —
   neutralise the standalone-section bg/padding since it's nested in here already */
.ht-library-products .ht-library-founding {
  background:    none;
  padding-block: 0;
}

/* Warm radial centre glow */
.ht-library-products::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  pointer-events: none;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.ht-library-products__header {
  text-align:    center;
  margin-bottom: clamp(3rem, 5vw, 2rem);
  position:      relative;
  z-index:       1;
}

.ht-library-products__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          rgba(255, 220, 190, .8);
  background:     rgba(183, 83, 61, .18);
  border:         1px solid rgba(183, 83, 61, .38);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin-bottom:  1.2rem;
}
.ht-library-products__eyebrow::before,
.ht-library-products__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-products__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.9rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  line-height:    1.18;
  margin:         0 0 .85rem;
}

.ht-library-products__subtitle {
  font-size:     clamp(.95rem, 1vw + .55rem, 1.1rem);
  line-height:   1.8;
  color:         rgba(255, 230, 200, .65);
  max-width:     720px;
  margin-inline: auto;
  margin-top:    1rem;
}

/* Divider */
.ht-library-products__header .ht-library-why__divider-line {
  background: linear-gradient(to right, var(--primary-light), transparent);
}
.ht-library-products__header .ht-library-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}
.ht-library-products__header .ht-library-why__divider-icon {
  color:   var(--primary);
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ht-library-products__grid {
    grid-template-columns: 1fr;
    max-width:             480px;
    margin-inline:         auto;
  }
  .ht-library-products { padding-block: 2.75rem; }
}

@media (max-width: 640px) {
  .ht-library-product {
    flex-direction: column;
  }
  .ht-library-product__image-wrap {
    width:        100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  .ht-library-product__body { padding: 1.25rem; gap: 1rem; }
  .ht-library-product__name { font-size: 1.2rem; }
  .ht-library-product__price,
  .ht-library-product .price { font-size: 1.5rem; }
  .ht-library-product__ctas  { flex-direction: column; gap: .6rem; }
  .ht-library-product__ctas .ht-library-btn { width: 100%; justify-content: center; }
  .ht-library-product__image-wrap { aspect-ratio: 4 / 3; }
}