/**
 * Deep Perfume — shared components.
 * Section headers, responsive grid, product card. Depends on tokens.css.
 * Loaded sitewide (used by homepage, shop, category pages).
 */

/* ---- section shell ------------------------------------------------------ */
.deep-section{ padding-block:var(--s-9); }
.deep-section__inner{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.deep-section__head{ text-align:center; margin-bottom:var(--s-7); }
.deep-section__title{
  font-family:var(--f-ar); font-weight:700; color:var(--c-plum);
  font-size:var(--fs-h2); line-height:var(--lh-ar-head); margin:0 0 var(--s-3);
  text-wrap:balance;
}
.deep-section__intro{
  font-family:var(--f-ar); font-size:var(--fs-body); line-height:var(--lh-ar-body);
  color:var(--c-ink-muted); max-width:56ch; margin-inline:auto; margin-block:0;
}
.deep-section__head.is-inverted .deep-section__title{ color:var(--c-cream); }
.deep-section__head.is-inverted .deep-section__intro{ color:#E9E0D2; }

/* ---- responsive grid ---------------------------------------------------- */
.deep-grid{ display:grid; gap:var(--s-5); }
.deep-grid--3{ grid-template-columns:repeat(3, 1fr); }
.deep-grid--4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1024px){ .deep-grid--4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){
  .deep-grid--3, .deep-grid--4{ grid-template-columns:repeat(2, 1fr); gap:var(--s-4); }
}

/* ---- product card ------------------------------------------------------- */
.deep-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md);
  overflow:hidden; transition:box-shadow var(--dur-fast), transform var(--dur-fast);
}
.deep-card:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
.deep-card__media{ display:block; aspect-ratio:1/1; background:var(--c-stone); overflow:hidden; }
.deep-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.deep-card__body{ padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); flex:1; }
.deep-card__title{
  font-family:var(--f-ar); font-size:var(--fs-h3); font-weight:500; line-height:var(--lh-ar-head); margin:0;
}
.deep-card__title a{ color:var(--c-ink); text-decoration:none; }
.deep-card__title a:hover{ color:var(--c-plum); }
.deep-card__price{
  font-family:var(--f-ar); font-weight:700; color:var(--c-plum);
  font-size:var(--fs-body); margin-block-start:auto;
}
.deep-card__price del{ opacity:.5; font-weight:400; margin-inline-end:var(--s-2); } /* rarely shown; no sale promo */
.deep-card__price ins{ text-decoration:none; }

/* Style Woo's loop add-to-cart button as our CTA. */
.deep-card__cta .button,
.deep-card__cta a.button{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; padding:var(--s-2) var(--s-4);
  font-family:var(--f-ar); font-size:var(--fs-body); font-weight:700;
  background:var(--c-plum); color:var(--c-cream);
  border:0; border-radius:var(--r-md); cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast);
}
.deep-card__cta .button:hover{ background:var(--c-plum-deep); }
.deep-card__cta .added_to_cart{
  display:inline-block; margin-block-start:var(--s-2);
  font-family:var(--f-ar); font-size:var(--fs-small); color:var(--c-brass-text); text-decoration:underline;
}

/* ---- product badges (§1.4) — used when a product opts in ---------------- */
.deep-badge{
  position:absolute; inset-block-start:var(--s-3); inset-inline-start:var(--s-3); z-index:2;
  font-family:var(--f-ar); font-size:var(--fs-label); font-weight:700;
  padding:2px var(--s-3); border-radius:var(--r-pill);
  background:var(--c-plum); color:var(--c-cream);
}