/* =========================================================================
   MMangoes — Luxury Editorial redesign layer  (v1, 2026-05-29)
   Cream + warm ink + mango-gold · Fraunces display + Inter body
   Loaded AFTER base.css + lumin-theme.css so :root + component overrides win.
   Mobile-first; fluid type via clamp(); single-column friendly.
   ========================================================================= */

/* ---- Brand tokens ---- */
:root {
  --mm-cream:   #F8F2E8;
  --mm-cream-2: #F1E7D5;
  --mm-panel:   #EFE5D3;
  --mm-ink:     #211C16;
  --mm-ink-dk:  #1A1611;
  --mm-gold:    #C9962E;
  --mm-gold-lt: #E7C98A;
  --mm-olive:   #2E3A24;
  --mm-line:    rgba(33,28,22,.16);

  /* Override theme font families everywhere (cascades through all components) */
  --font-heading-family: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif !important;
  --font-body-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-button-family: "Inter", -apple-system, sans-serif !important;
  --font-menu-family: "Inter", -apple-system, sans-serif !important;
}

/* ---- Base typography ---- */
body {
  font-family: var(--font-body-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .005em;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5,
.banner__heading, .rich-text__heading, .title, .card__heading,
.product__title, .collection__title, .section-heading {
  font-family: var(--font-heading-family);
  font-optical-sizing: auto;
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

/* Fluid editorial display sizes (mobile -> desktop) */
.h0, h1.h0, .banner--large .banner__heading,
.video-banner__heading, .video-banner .banner__heading {
  font-size: clamp(2.6rem, 7.5vw, 6.0rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
.h1, h1 { font-size: clamp(2.0rem, 4.6vw, 3.6rem); }
.h2, h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }

/* ---- Eyebrow / caption: gold uppercase letterspaced ---- */
.rich-text__text.caption-with-letter-spacing,
.caption-with-letter-spacing,
.multirow__inner .caption-with-letter-spacing,
.banner__text.caption-with-letter-spacing {
  color: var(--mm-gold);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-body-family);
}

/* ---- Buttons: editorial pill ---- */
.button, .shopify-payment-button__button--unbranded,
button.button, .button--primary, .button--secondary {
  font-family: var(--font-button-family) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 600;
  padding: 1.05rem 2.4rem;
  border-radius: 48px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.button:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(33,28,22,.16);
}
/* Secondary = ink outline that fills gold on hover */
.button--secondary,
.button.button--secondary {
  background: transparent !important;
  border: 1px solid var(--mm-ink) !important;
  color: var(--mm-ink) !important;
}
.button--secondary:hover {
  background: var(--mm-ink) !important;
  color: var(--mm-cream) !important;
}

/* ---- Thin editorial rules under section headings ---- */
.rich-text__heading::after,
.collection__title.title-wrapper--no-top-margin .title::after { content: none; }

/* gold hairline accent under centered rich-text headings */
.rich-text--center .rich-text__heading,
.center .rich-text__heading { position: relative; }

/* ---- Links: gold underline reveal ---- */
.rich-text__text a, .article-card a, main a.link,
.product__description a {
  color: var(--mm-ink);
  text-underline-offset: .25em;
  text-decoration-color: var(--mm-gold);
}

/* ---- Cards: clean editorial ---- */
.card-wrapper .card, .card--card {
  border: 1px solid var(--mm-line);
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-wrapper:hover .card--card {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(33,28,22,.10);
}
.card__heading, .card__heading a {
  font-family: var(--font-heading-family);
  font-weight: 520;
  letter-spacing: -0.01em;
}
/* Price in gold-ink, slightly larger */
.price__regular .price-item,
.price .price-item--regular {
  color: var(--mm-ink);
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---- Hero / image+video banner: editorial scrim + framing ---- */
.video-banner__media::after,
.banner__media-half::after { content: none; }
/* transparent text box + cream text on ANY hero/banner image */
.video-banner .banner__box,
.banner .banner__box,
.banner__content .banner__box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 46rem;
}
.video-banner .banner__content,
.video-banner__content,
.banner__content .banner__box .banner__heading,
.banner__content .banner__box .banner__text,
.banner__content .banner__box {
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
  color: #fff;
}
.banner__content .banner__box .banner__heading { color: #fff !important; }
.banner__content .banner__box .banner__text { color: rgba(255,255,255,.94) !important; }
/* subtle dark gradient scrim so cream serif reads on photo/video.
   NOTE: do NOT set position on .banner__media — the theme relies on its own
   absolute fill; the scrim's inset:0 anchors to that absolute box fine. */
.video-banner__media::before,
.banner--large .banner__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,11,.22) 0%, rgba(20,16,11,.06) 42%, rgba(20,16,11,.52) 100%);
  z-index: 1; pointer-events: none;
}

/* ---- Collection / page banner headings: legible over imagery ---- */
.collection-hero__title, .main-collection-banner .title,
.section-header .title { font-weight: 520; }

/* ---- Featured-collection "subtitle" description: tame on mobile ---- */
.collection__description.subtitle,
.featured-collection .title-wrapper .subtitle {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  line-height: 1.45;
  max-width: 44rem;
  margin-inline: auto;
}
@media screen and (max-width: 749px) {
  .collection__description.subtitle,
  .featured-collection .title-wrapper .subtitle { font-size: 1rem; }
}

/* ---- Multirow variety spotlights: editorial spacing ---- */
.multirow__text .multirow__title { font-weight: 500; }
.multirow__inner { gap: clamp(1.5rem, 4vw, 4rem); }

/* ---- Multicolumn (trust): airy ---- */
.multicolumn-card { background: transparent; }
.multicolumn-card__info .title { font-weight: 520; }

/* ---- Reviews -> elegant quote-only testimonials (hide flyer images) ----
   Scoped to the reviews section by its stable template key suffix. */
[id*="__multicolumn_reviews"] .multicolumn-card__image-wrapper,
[id*="__multicolumn_reviews"] .multicolumn-card .media { display: none !important; }
[id*="__multicolumn_reviews"] .multicolumn-card {
  background: var(--mm-panel);
  border: 1px solid var(--mm-line);
  border-radius: 2px;
  padding: 2.2rem 1.8rem;
  height: 100%;
}
[id*="__multicolumn_reviews"] .multicolumn-card__info { padding: 0; }
[id*="__multicolumn_reviews"] .multicolumn-card__info .title {
  font-family: var(--font-body-family);
  font-size: .95rem;
  letter-spacing: .02em;
  margin-bottom: .6rem;
}
[id*="__multicolumn_reviews"] .multicolumn-card__info .rte {
  font-family: var(--font-heading-family);
  font-size: 1.18rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--mm-ink);
}
[id*="__multicolumn_reviews"] .multicolumn-card__info .rte em {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-body-family);
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-gold);
}

/* ---- Header: refined editorial nav ---- */
.header__heading-logo { max-width: 200px; }
.header__menu-item span,
.header__menu-item {
  font-family: var(--font-body-family);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
  font-weight: 500;
}
.header { border-bottom: 1px solid var(--mm-line); }

/* ---- Section rhythm: generous editorial whitespace ---- */
.section { --mm-rhythm: clamp(2.4rem, 6vw, 5rem); }

/* =========================================================================
   MOBILE-FIRST polish (<=749px)
   ========================================================================= */
@media screen and (max-width: 749px) {
  .button, button.button {
    padding: .95rem 1.9rem;
    font-size: .72rem;
    width: auto;
  }
  /* hero readable + tall enough on phones */
  .video-banner, .banner--mobile-bottom .banner__content {
    min-height: 78vh;
  }
  .video-banner__heading, .video-banner .banner__heading {
    font-size: clamp(2.3rem, 11vw, 3.4rem);
    line-height: 1.02;
  }
  /* comfortable single-column reading width + padding */
  .rich-text__text, .multicolumn-card__info { padding-inline: .25rem; }
  .multirow__inner { text-align: center; }
  .multirow__item .multirow__text { padding: 1.4rem 1.1rem 2rem; }
  /* tap targets */
  .header__menu-item, .list-menu__item--link { padding-block: .65rem; }
  /* tighten card grids gutters */
  .product-grid, .grid { gap: .9rem; }
  /* keep eyebrow legible */
  .caption-with-letter-spacing { letter-spacing: .18em; }
}

/* tablet */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .video-banner__heading { font-size: clamp(3rem, 7vw, 4.4rem); }
}

/* ---- Footer: warm ink editorial ---- */
.footer .footer-block__heading {
  font-family: var(--font-body-family);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  color: var(--mm-gold-lt);
}

/* ---- Selection + focus accents ---- */
::selection { background: var(--mm-gold); color: var(--mm-ink); }
:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }