/*
  products.css
  Product and collection page styles for HealingTouchShop.com.

  Load this after main.css on product and collection pages.
  This file intentionally keeps products and collections together because the
  product cards, collection pages, and product templates share several layout
  patterns.
*/

/* ----------------------------------------
   Product and collection page wrappers
---------------------------------------- */

.product-page,
.collection-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* ----------------------------------------
   Product hero
---------------------------------------- */

.product-hero {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 2rem;
  align-items: start;
}

.product-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.product-hero__content h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.product-hero__content p span {
  font-size: 0.7rem;
  vertical-align: super;
  color: #4a3f52;
}

.product-tagline {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.product-price {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product-short-description {
  line-height: 1.7;
}

/* ----------------------------------------
   Product sections
---------------------------------------- */

.product-section {
  margin-top: 2.5rem;
}

.product-section h2 {
  margin-bottom: 1rem;
}

.product-section p,
.product-section li {
  line-height: 1.7;
}

/* ----------------------------------------
   Product image farm
---------------------------------------- */

.product-image-farm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.product-image-farm__item {
  background: #fff;
  border: 1px solid #e2ddd7;
  border-radius: 14px;
  overflow: hidden;
}

.product-image-farm__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------
   Product video
---------------------------------------- */

.product-video-section h2 {
  margin-bottom: 1rem;
}

.product-video {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2ddd7;
  border-radius: 16px;
  padding: 1rem;
}

.product-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}

/* ----------------------------------------
   Helpful guide callout on product pages
---------------------------------------- */

.product-guide-link {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fafafa;
}

.product-guide-link__label {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-guide-link p {
  margin: 0;
}

/* ----------------------------------------
   Marketplace links
---------------------------------------- */

.marketplace-links {
  margin-top: 1.5rem;
}

.marketplace-links__label {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: #4a3f52;
}

.marketplace-links__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-marketplace {
  background: #ffffff;
  color: #4a3f52;
  border: 1px solid #d9d1c8;
}

.btn-marketplace:hover {
  background: #f6f1ec;
}

/* ----------------------------------------
   Product grid and cards
---------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.product-card {
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.product-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card img {
  width: 100%;
  height: auto;
  display: block;
}

.product-card__content {
  padding: 1rem;
}

.product-card__content h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.product-card__content p {
  margin: 0;
  line-height: 1.6;
  color: #444;
}

.product-card h3,
.product-card p {
  margin-left: 1em;
  margin-right: 1em;
}

.product-card p a.text-link {
  font-weight: 800;
  font-style: italic;
}

/* ----------------------------------------
   Collection hero and intro
---------------------------------------- */

.collection-hero {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}

.collection-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.collection-hero__content h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.collection-intro {
  line-height: 1.7;
  max-width: 760px;
}

.collection-empty {
  padding: 2rem 0;
}

/* ----------------------------------------
   Collections landing page
---------------------------------------- */

.collections-page {
  min-height: 60vh;
}

.collections-hero {
  padding: 2.5rem 1rem 1.5rem;
  background: linear-gradient(180deg, #faf8f6 0%, #f4ede7 100%);
  border-bottom: 1px solid #e7ddd4;
}

.collections-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.collections-hero__inner h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.15;
  color: #3f3348;
}

.collections-hero__inner p:last-child {
  max-width: 760px;
  margin: 0;
  line-height: 1.75;
  color: #57524e;
}

.collections-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}

/* ----------------------------------------
   Collection cards
---------------------------------------- */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.collection-card {
  border: 1px solid #e2ddd7;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.collection-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.collection-card img {
  width: 100%;
  height: auto;
  display: block;
}

.collection-card__content {
  padding: 1rem;
}

.collection-card__content h3,
.collection-card__content h2 {
  margin: 0 0 0.7rem;
  line-height: 1.3;
}

.collection-card__content p {
  margin: 0;
  line-height: 1.65;
  color: #4e4a47;
}

/* ----------------------------------------
   Collection SEO section
---------------------------------------- */

.collections-seo h2 {
  margin-top: 2em;
  padding-top: 10px;
  color: #4a3f52;
}

.collections-seo p {
  padding-left: 10px;
  color: #38355f;
}

/* ----------------------------------------
   Collection return callout
---------------------------------------- */

.collection-return {
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.collection-return__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(248, 241, 255, 0.95), rgba(240, 250, 255, 0.95));
  border: 1px solid rgba(120, 89, 160, 0.18);
  box-shadow: 0 12px 30px rgba(60, 40, 80, 0.08);
}

.collection-return__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b4da0;
}

.collection-return h2 {
  margin: 0 0 0.75rem;
}

.collection-return p {
  max-width: 680px;
  margin: 0 auto 1.25rem;
}

/* ----------------------------------------
   Product exit links
---------------------------------------- */

.page-exit-links {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.back-link {
  display: inline-block;
  margin: 0 0 12px;
  text-decoration: none;
  font-weight: 600;
}

.back-link:hover {
  text-decoration: underline;
}

.sep {
  color: #8a8178;
}

/* ----------------------------------------
   Responsive
---------------------------------------- */

@media (max-width: 900px) {
  .product-hero,
  .collection-hero,
  .product-grid,
  .collection-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .product-image-farm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* added with schema product details */
.product-details {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.product-details dt {
    font-weight: 700;
}

.product-details dd {
    margin: 0;
}

@media (max-width: 640px) {
    .product-details {
        grid-template-columns: 1fr;
    }

    .product-details dd {
        margin-bottom: 0.75rem;
    }
}

p.msrp-adjustment {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.75rem;
    margin-left: 4em;
    font-style: italic;
}

/* faqs */
.product-faqs__list {
    display: grid;
    gap: 1rem;
}

.product-faqs__item {
    padding: 1rem;
    border: 1px solid rgba(80, 60, 100, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
}

.product-faqs__item h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.product-faqs__item p {
    margin: 0;
}

/* other product-ideas */
.related-products-section {
    margin-top: 2rem;
}

.related-products-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.related-product-mini-card {
    border: 1px solid rgba(80, 60, 100, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-product-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(60, 40, 80, 0.10);
    background: rgba(223, 209, 209, 0.65);
}

.related-product-mini-card a {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.related-product-mini-card img {
    width: 100px;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    border-radius: 10px;
}

.related-product-mini-card h3 {
    margin: 0 0 0.3rem;
    font-size: 0.98rem;
    line-height: 1.25;
}

.related-product-mini-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #5d5365;
}

@media (max-width: 800px) {
    .related-products-mini-grid {
        grid-template-columns: 1fr;
    }
}

#affy{

  margin-left: 2em;
  padding: 10px;
  background: rgba(230, 215, 215, 0.65);
}

.btn-paypal {
    background: #ffffff;
    color: #4b2f5f;
    border: 2px solid #6f3fa0;
}

.btn-paypal:hover,
.btn-paypal:focus {
    background: #f5eefb;
    color: #5c3288;
    border-color: #5c3288;
}

/* ----------------------------------------
   Book hub enhancements
---------------------------------------- */

.book-hub-eyebrow,
.product-card__label,
.book-finder-card__label,
.book-excerpt-callout__label {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b4da0;
}

.book-author-hub,
.book-spotlight,
.book-finder {
  margin: 2rem 0;
}

.book-author-hub {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid rgba(120, 89, 160, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,241,255,0.92));
  box-shadow: 0 12px 30px rgba(60, 40, 80, 0.06);
}

.book-author-hub__image img,
.book-spotlight__image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.book-author-hub__content h2,
.book-spotlight h2,
.book-finder h2,
.book-reader-fit h2 {
  margin: 0 0 0.75rem;
  color: #4a3f52;
  line-height: 1.2;
}

.book-author-hub__content p,
.book-spotlight p,
.book-finder p,
.book-reader-fit li,
.book-excerpt-callout p {
  line-height: 1.7;
}

.book-spotlight {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: 18px;
  background: #f1ece7;
  border: 1px solid #e1d8d0;
}

.book-spotlight__content .btn {
  margin-top: 0.4rem;
}

.book-spotlight__image {
  max-width: 280px;
  justify-self: center;
}

.book-finder {
  padding: 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2ddd7;
}

.book-finder__intro {
  max-width: 780px;
  margin-bottom: 1.25rem;
}

.book-finder__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.book-finder-card {
  padding: 1rem;
  border: 1px solid rgba(120, 89, 160, 0.16);
  border-radius: 14px;
  background: rgba(248, 241, 255, 0.55);
}

.book-finder-card h3 {
  margin: 0 0 0.65rem;
  line-height: 1.3;
  color: #3f3348;
}

.book-finder-card p:not(.book-finder-card__label) {
  margin: 0 0 0.85rem;
}

.book-finder-card a {
  font-weight: 800;
  color: #6f3fa0;
  text-decoration: none;
}

.book-finder-card a:hover,
.book-finder-card a:focus {
  text-decoration: underline;
}

.product-card__label {
  margin-bottom: 0.45rem !important;
  color: #7b4da0 !important;
}

.product-card__cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 800;
  color: #6f3fa0;
}

.product-format-note {
  display: inline-block;
  margin: 0.25rem 0 1rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: #f5eefb;
  color: #5c3288;
  font-size: 0.92rem;
  font-weight: 700;
}

.book-reader-fit {
  padding: 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 241, 255, 0.95), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(120, 89, 160, 0.18);
}

.book-reader-fit ul {
  margin-bottom: 0;
}

.book-excerpt-callout {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-left: 5px solid #7b4da0;
  border-radius: 14px;
  background: #f5eefb;
}

.book-excerpt-callout h3 {
  margin-top: 0;
}

@media (max-width: 900px) {
  .book-author-hub,
  .book-spotlight,
  .book-finder__grid {
    grid-template-columns: 1fr;
  }

  .book-spotlight__image {
    max-width: 220px;
  }
}

/* Book support / soft next-step note */
.book-support-note {
    border: 1px solid rgba(108, 79, 137, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, #fffaf3 0%, #f7f0ff 100%);
    box-shadow: 0 16px 34px rgba(58, 42, 78, 0.08);
    padding: 2rem 1rem;
}

.book-support-note__inner {
    max-width: 780px;
    margin: 0 auto;
}

.book-support-note__eyebrow {
    margin: 0 0 0.35rem;
    color: #7b5a99;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.book-support-note h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.book-support-note p {
    margin-bottom: 1rem;
}

.book-support-note__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.1rem;
}

.book-support-note__actions .btn {
    margin: 0;
}

.book-support-note .btn-marketplace {
    text-decoration: none;
}

@media (max-width: 640px) {
    .book-support-note__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .book-support-note__actions .btn,
    .book-support-note__actions .btn-marketplace {
        width: 100%;
        text-align: center;
    }
}