/**
 * Thơm — page compositions.
 * Shop (All Butters), Our Story, Contact, plus shared bands.
 */

/* ============================= SHARED ============================= */
.eyebrow {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow--gold { color: var(--c-gold-deep); }

/* Ink pill button — used for the primary CTA on gold and cream bands. */
.btn--ink {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}
.btn--ink:hover { background-color: var(--c-gold-deep); border-color: var(--c-gold-deep); color: var(--c-cream); }

.btn--gold {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-text-on-brand);
}
.btn--gold:hover { background-color: var(--c-gold-light); border-color: var(--c-gold-light); }

/* ============================= BANDS ============================= */
.band {
  padding-block: var(--sp-16);
  text-align: center;
}
.band--gold { background-color: var(--c-gold); }
.band--gold .band__title,
.band--gold .band__text { color: var(--c-ink); }

.band__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.band__text {
  max-width: 48ch;
  margin: 0 auto var(--sp-8);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* ============================= PROOF BAND (dark) ============================= */
.proof {
  padding-block: var(--sp-16);
  background-color: var(--c-ink);
  color: var(--c-text-on-dark);
}
.proof__grid {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .proof__item + .proof__item {
    padding-inline-start: var(--sp-8);
    border-inline-start: var(--border-width) solid var(--c-border-inverse);
  }
}
.proof__item { margin: 0; }
.proof__value {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-text-on-dark);
}
.proof__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-light);
}
.proof__text {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  opacity: 0.75;
}

/* ============================= SHOP ============================= */
.shop__head {
  padding-block: var(--sp-8) var(--sp-16);
  text-align: center;
}
.shop__head .eyebrow { margin-bottom: var(--sp-3); }
.shop__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.shop__intro {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-muted);
}

.shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.shop__toolbar .woocommerce-result-count {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-small);
  color: var(--c-muted);
}

/* Filter pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.filter-pills li { margin: 0; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-width) solid var(--c-border-subtle);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-small);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.filter-pill:hover { border-color: var(--c-ink); color: var(--c-ink); }
.filter-pill.is-active {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}

/* ============================= STORY ============================= */
.story-hero { position: relative; }

.story-hero--image .story-hero__media {
  aspect-ratio: 1082 / 420;
  min-height: 260px;
  overflow: hidden;
  background-color: var(--c-card);
}
.story-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.story-hero--image .story-hero__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block: var(--sp-12);
  /* Scrim so the overlaid title stays readable on any photo. */
  background: var(--scrim-bottom);
}
.story-hero--image .story-hero__title { color: var(--c-cream); }
.story-hero--image .eyebrow--gold { color: var(--c-gold-light); }

.story-hero__body { padding-block: var(--sp-16) var(--sp-8); }
.story-hero__title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.story-body__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 900px) {
  .story-body__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); }
}
.story-body__title {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.story-body__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background-color: var(--c-card);
  overflow: hidden;
}
.story-body__media img { width: 100%; height: 100%; object-fit: cover; }

.story-cta { text-align: center; }
.story-cta__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.story-cta__text {
  margin: 0 auto var(--sp-8);
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-muted);
}

/* ============================= CONTACT ============================= */
.contact__head { padding-block: var(--sp-8) var(--sp-12); }
.contact__title {
  margin: 0 0 var(--sp-6);
  max-width: 16ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.contact__intro {
  max-width: 56ch;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-muted);
}

.contact__layout {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
  padding-bottom: var(--sp-24);
}
@media (min-width: 900px) {
  .contact__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-24);
  }
}

/* The mobile frame puts the details above the form. */
.contact__aside { order: -1; display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .contact__aside { order: 0; gap: var(--sp-8); }
}

@media (min-width: 480px) {
  .contact__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

.contact__form .field__label,
.contact-detail__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form select,
.contact__form textarea {
  background-color: var(--c-card);
  border-color: transparent;
  border-radius: var(--radius-md);
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  background-color: var(--c-surface);
  border-color: var(--c-gold);
}
.contact__form textarea { min-height: 160px; }
.contact__form .btn { margin-top: var(--sp-2); }

.contact-detail__value {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-ink);
}
.contact-detail__value a { color: var(--c-ink); text-decoration: none; }
.contact-detail__value a:hover { color: var(--c-gold-deep); text-decoration: underline; }
.contact-detail__value--links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ============================= PROSE ============================= */
.prose {
  max-width: var(--container-text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}
.prose--tight { max-width: none; }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h2 { margin-block-start: var(--sp-12); font-size: var(--fs-h3); }
.prose h3 { margin-block-start: var(--sp-8); font-size: var(--fs-h4); }
.prose img { border-radius: var(--radius-lg); }
.prose ul, .prose ol { padding-inline-start: var(--sp-6); }

/* ============================= EMPTY STATE ============================= */
.empty-state {
  padding-block: var(--sp-24);
  text-align: center;
}
.empty-state__title { margin-bottom: var(--sp-4); }
.empty-state__text {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  color: var(--c-text-muted);
}

/* ============================= HERO (home) ============================= */
.hero {
  position: relative;
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-24));
  background-color: var(--c-bg-alt);
  overflow: hidden;
}
.hero__layout {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
@media (min-width: 900px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hero__title {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.hero__text {
  max-width: 52ch;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-muted);
}
/* Hero composition: a soft gold disc, the jar on top, and a glass spec card
   overlapping its lower-left — exactly as drawn in the Figma frame. */
.hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-8) var(--sp-12);
}

.hero__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 96%);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background-color: var(--c-hero-blob);
  opacity: 0.15;
  pointer-events: none;
}

.hero__stage {
  position: relative;
  width: min(238px, 62%);
}

.hero__shot {
  aspect-ratio: 238 / 396;
  border-radius: 12px;
  overflow: hidden;
}
.hero__shot img,
.hero__shot .is-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__card {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--sp-8));
  width: 215px;
  max-width: 128%;
  min-width: 180px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-lg);
  background-color: var(--c-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.hero__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  color: var(--c-ink);
  white-space: nowrap;
}

.hero__card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
}
.hero__card-stats li {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
}
/* The middle dots between stats are separators, not content. */
.hero__card-stats li + li::before {
  content: "·";
  margin-inline-end: var(--sp-3);
  color: var(--c-muted);
}

@media (max-width: 899px) {
  .hero__stage { width: min(200px, 55%); }
  .hero__card  { max-width: 150%; }
}

/* ============================= HOME PRODUCTS ============================= */
.home-products__head {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
@media (min-width: 900px) {
  .home-products__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}
.home-products__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.home-products__intro {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-muted);
}

/* ============================= FAQ ============================= */
.faq-item { border-bottom: var(--border-width) solid var(--c-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--c-gold-deep);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding-bottom: var(--sp-4); color: var(--c-muted); }

/* ============================= HOME — HERO EXTRAS ============================= */
.hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background-color: var(--c-ink);
  color: var(--c-cream);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.hero__title-accent { display: block; color: var(--c-gold); }

/* Jar switcher row */
.jar-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-4);
  margin: var(--sp-12) 0 0;
  padding: 0 0 var(--sp-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
@media (min-width: 900px) {
  .jar-row { flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-8); overflow: visible; }
}
.jar-row__item { margin: 0; flex: 0 0 auto; }

.jar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 88px;
  text-decoration: none;
  color: var(--c-muted);
}
.jar__media {
  display: grid;
  place-items: center;
  width: 70px;
  height: 90px;
}
.jar__media img { max-height: 90px; width: auto; object-fit: contain; }
.jar__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
}
.jar:hover { color: var(--c-ink); }
.jar:hover .jar__media img { transform: translateY(-3px); }
.jar__media img { transition: transform var(--dur-base) var(--ease-out); }

/* ============================= HOME — ABOUT (dark) ============================= */
.about {
  padding-block: var(--sp-24);
  background-color: var(--c-ink);
  color: var(--c-text-on-dark);
}
.eyebrow--on-dark { color: var(--c-gold-light); }

.about__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
}

.about__title {
  margin: 0 0 var(--sp-6);
  color: var(--c-text-on-dark);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.about__title-accent { display: block; color: var(--c-gold-light); }

.about__body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  opacity: 0.85;
}

.about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding: 0;
  list-style: none;
}
.about__stats li { margin: 0; }
.about__stat-value {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-text-on-dark);
}
.about__stat-label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-light);
}

.about__media { position: relative; }
.about__media > img,
.about__media > .is-placeholder {
  width: 100%;
  aspect-ratio: 413 / 540;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--c-surface-inverse);
}

/* Gold quote card overlapping the photo, as drawn. */
.quote-card {
  /* An <img> is a replaced element and paints in a later phase than a
     static block's background, so the photo would cover this card's gold
     fill while its text still painted on top. Positioning the card lifts
     the whole box above the image. */
  position: relative;
  z-index: var(--z-base);
  margin: calc(-1 * var(--sp-16)) 0 0;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background-color: var(--c-gold);
  color: var(--c-ink);
}
@media (min-width: 900px) {
  .quote-card {
    position: absolute;
    left: calc(-1 * var(--sp-6));
    bottom: var(--sp-8);
    width: min(320px, 90%);
    margin: 0;
  }
}
.quote-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--c-ink);
}
.quote-card figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.75;
}

/* ============================= HOME — MANIFESTO ============================= */
.manifesto {
  padding-block: var(--sp-8);
  background-color: var(--c-gold);
  overflow: hidden;
}
.manifesto__track {
  display: flex;
  width: max-content;
  animation: thom-marquee 38s linear infinite;
}
.manifesto__item {
  padding-inline-end: var(--sp-16);
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
@keyframes thom-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto__track { animation: none; }
  .manifesto { text-align: center; }
}

/* ============================= HOME — INSTAGRAM ============================= */
.instagram { padding-block: var(--sp-24) 0; }
.instagram__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}
.instagram__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .instagram__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.instagram__grid li { margin: 0; }
.instagram__grid img,
.instagram__grid .is-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--c-card);
}

/* ============================= GENERIC PAGE HEADER ============================= */
.page-hero {
  padding-block: var(--sp-16) var(--sp-12);
  background-color: var(--c-bg-alt);
  text-align: center;
}
.page-hero__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.page-hero__intro {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-muted);
}

/* ============================= HEADER CTA ============================= */
.site-header__cta { flex-shrink: 0; }
@media (max-width: 599px) {
  .site-header__cta { display: none; }
}

/* ============================= QUOTE BAND — shared by Our Story and product pages ============================= */
.p-quote {
  padding-block: var(--sp-16);
  background-color: var(--c-gold);
  text-align: center;
}
.p-quote__text {
  max-width: 40ch;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-variation);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--c-ink);
}
.p-quote__author {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.7;
}



/* A feed plugin renders its own grid; give it the same full-bleed footprint
   as the manual one and stop it overflowing on small screens. */
.instagram__feed { margin-top: var(--sp-12); }
.instagram__feed img { display: block; width: 100%; height: auto; }
.instagram__feed > * { max-width: 100%; }