/* ==========================================================================
   Fuller Living — Shop
   Emotional objective: "These tools were created for people like me."
   Offers resources without ever feeling like e-commerce.
   ========================================================================== */

.shop-main > section { position: relative; width: 100%; }
.shop-product--app { background-color: var(--color-bg-alt); }
.shop-faq { background-color: var(--color-bg-alt); }

/* ---------------------------------------------------------------- HERO ---- */
.shop-hero { background-color: var(--color-bg); }
.shop-hero .home-section-head { margin-bottom: 0; }

/* ------------------------------------------------------ PRODUCT ROWS ------ */
.shop-product__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.shop-product__figure { margin: 0; }
.shop-product__figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-lg);
  background-color: var(--fl-sage-tint);
}

.shop-product__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-sm);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.shop-product__badge--paid { background-color: var(--fl-teal-tint); color: var(--fl-teal-deep); }
.shop-product__badge--free { background-color: var(--fl-sage-tint); color: var(--fl-sage-strong); }

.shop-product__body h2 { margin-bottom: var(--space-md); }
.shop-product__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.shop-product__desc--em {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-heading);
}

/* Bulleted benefits with a soft sage marker */
.shop-product__list {
  list-style: none;
  max-width: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}
.shop-product__list li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: var(--space-2xs);
  color: var(--color-text);
}
.shop-product__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--radius-pill);
  background-color: var(--fl-sage);
}

/* App feature list — each item leads with a bold name */
.shop-product__features {
  list-style: none;
  max-width: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}
.shop-product__features li {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--fl-sage-tint);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}
.shop-product__feature-name {
  display: block;
  margin-bottom: var(--space-3xs);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.shop-product__actions { margin-bottom: var(--space-md); }
.shop-product__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  max-width: var(--measure);
}

/* -------------------------------------------------- FUTURE PRODUCTS ------- */
.shop-future__card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  text-align: center;
  border-radius: var(--radius-container);
  border: 1px dashed var(--color-border-strong);
  background-color: var(--color-surface);
}
.shop-future__card h2 { margin-bottom: var(--space-sm); }
.shop-future__card p {
  max-width: 44ch;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------- FAQ -------- */
.shop-faq__list {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.shop-faq__item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.shop-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  color: var(--color-heading);
}
.shop-faq__summary::-webkit-details-marker { display: none; }
.shop-faq__summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}
.shop-faq__chevron {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-text-muted);
  transition: transform var(--duration-base) var(--ease-out);
}
.shop-faq__item[open] .shop-faq__chevron { transform: rotate(180deg); }
.shop-faq__answer {
  padding: 0 var(--space-lg) var(--space-lg);
}
.shop-faq__answer p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------- RESPONSIVE ---- */
@media (min-width: 768px) {
  .shop-product__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .shop-product--reverse .shop-product__figure { order: 2; }
}