/* ==========================================================================
   MF Choices LLC — pixel-faithful clone of mfchoicesllc.com (Webador original)
   Vanilla CSS, no build step. Tokens verified against the saved site CSS.
   --------------------------------------------------------------------------
   Brand tokens (from saved style.css):
     purple/accent  #d2b0e7   hovers #c79ce1 / #bc89db / #b175d5
     pink (error)   #eba5a2
     dark nav/foot  #333333 / #404040    grey text #6a6a6a / #a3a3a3
     shaded strip   #ececec
     font           "Source Sans Pro", sans-serif   headings normal case
     heading scale  1.25992105 (×2 per 3 steps)  · base p = 15px
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --purple:        #d2b0e7;
  --purple-hover:  #c79ce1;
  --purple-deep:   #bc89db;
  --pink:          #eba5a2;
  --ink:           #404040;   /* headings on light strips */
  --body:          #5f5f5f;   /* paragraph text on light strips */
  --grey:          #a3a3a3;
  --dark:          #333333;   /* header / footer */
  --dark-tint:     #404040;
  --shaded:        #ececec;   /* shaded strips */
  --shaded-text:   #6a6a6a;
  --line:          #e2e2e2;

  --maxw: 1200px;
  --strip-pad: clamp(48px, 7vw, 80px);

  --fs-p:    15px;
  --fs-h70:  22px;   /* heading-70  (H3 / location)        */
  --fs-h85:  24px;   /* heading-85  (card titles)          */
  --fs-h100: 30px;   /* heading-100 (section H2)           */
  --fs-h130: clamp(34px, 4.4vw, 40px); /* heading-130 hero */

  --radius: 3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-p);
  line-height: 1.5;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--purple-deep); text-decoration: none; }
a:hover { color: var(--purple-hover); }
h1, h2, h3 { color: var(--ink); line-height: 1.25; font-weight: 700; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.heading-130 { font-size: var(--fs-h130); }
.heading-100 { font-size: var(--fs-h100); }
.heading-85  { font-size: var(--fs-h85); }
.heading-70  { font-size: var(--fs-h70); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--purple);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 13px 26px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--purple-hover); color: #fff; }
.btn:active { transform: translateY(1px); }

/* ---------- Layout primitives ---------- */
.strip { padding: var(--strip-pad) 24px; }
.strip__inner { max-width: var(--maxw); margin: 0 auto; }
.strip--wide .strip__inner { max-width: 1320px; }
.strip--shaded { background: var(--shaded); color: var(--shaded-text); }
.strip--shaded h2, .strip--shaded h3 { color: var(--shaded-text); }

.cols { display: flex; flex-wrap: wrap; gap: 32px; }
.cols > * { min-width: 0; }
.cols--5050 > * { flex: 1 1 calc(50% - 16px); }

/* Square / ratio media wrappers (mirrors Webador padding-top trick) */
.media { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); background: #f3f3f3; }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--1-1   { padding-top: 100%; }
.media--4-3   { padding-top: 75%; }
.media--banner { padding-top: 40%; }

/* ==========================================================================
   HEADER (dark sticky)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  color: #fff;
}
.site-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__logo { width: auto; height: 58px; border-radius: 4px; }
.brand__title { font-size: 22px; font-weight: 700; color: var(--purple); line-height: 1.1; }

.mainnav { margin-left: auto; }
.mainnav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0; padding: 0;
  justify-content: flex-end;
}
.mainnav__list a {
  color: #e8e8e8;
  font-size: 14px;
  padding: 6px 2px;
  display: inline-block;
  transition: color .15s ease;
}
.mainnav__list a:hover,
.mainnav__list a.is-active { color: var(--purple); }
.mainnav__icon { font-size: 0; }
.mainnav__icon svg { width: 22px; height: 22px; fill: #e8e8e8; vertical-align: middle; transition: fill .15s ease; }
.mainnav__icon:hover svg { fill: var(--purple); }

/* Burger (mobile) */
.burger {
  display: none;
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  width: 42px; height: 42px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.burger span { display: block; height: 2px; width: 24px; background: #fff; transition: transform .25s ease, opacity .25s ease; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — hidden with display:none per project rule */
.drawer {
  display: none;
  background: var(--dark-tint);
  border-top: 1px solid rgba(255,255,255,.08);
}
.drawer.is-open { display: block; }
.drawer a {
  display: block;
  color: #ececec;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 15px;
}
.drawer a:hover { color: var(--purple); background: rgba(255,255,255,.04); }

/* ==========================================================================
   HERO strip (background photo + dark overlay)
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(90px, 14vw, 170px) 24px;
  background: var(--dark);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.hero__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.hero h1, .hero h2 { color: #fff; }
.hero p { color: rgba(255,255,255,.92); font-size: 17px; margin: 18px auto 28px; max-width: 680px; }

/* ==========================================================================
   CATEGORY CARDS (home strip 3)
   ========================================================================== */
.lead { max-width: 66%; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; }
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 28px; }
.cards4 .card, .cards3 .card, .cards2 .card { display: flex; flex-direction: column; }
.cards4 .card h2, .cards3 .card h2, .cards2 .card h2 { margin-top: 18px; }
.cards4 .card p, .cards3 .card p, .cards2 .card p { font-size: 14.5px; flex: 1; }
.cards4 .card .btn, .cards3 .card .btn, .cards2 .card .btn { align-self: flex-start; margin-top: 14px; }

/* Split-image strip (committed) */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.split__media { position: relative; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__content { padding: var(--strip-pad) clamp(32px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; }

/* ==========================================================================
   STAY UPDATED
   ========================================================================== */
.center { text-align: center; }
.center .lead { max-width: 66%; margin: 0 auto 24px; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.quote { text-align: center; padding: 8px; }
.quote__mark { width: 46px; height: 46px; margin: 0 auto 16px; }
.quote__mark svg { width: 100%; height: 100%; fill: var(--purple); }
.quote p { font-style: italic; }
.quote__name { font-style: normal; font-weight: 700; color: var(--shaded-text); margin-top: 12px; }

/* ==========================================================================
   CONTACT (form + map)
   ========================================================================== */
.contact { display: grid; grid-template-columns: 45% 50%; gap: 5%; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(210,176,231,.3); }

.map { width: 100%; min-height: 300px; border: 0; border-radius: var(--radius); margin-bottom: 22px; }

.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); border-radius: var(--radius);
  transition: background .18s ease;
}
.social a:hover { background: var(--purple-hover); }
.social svg { width: 20px; height: 20px; fill: #fff; }

/* ==========================================================================
   CATEGORY PAGES — banner hero, intro split strips, catalog grid
   ========================================================================== */
/* Banner hero (category pages) — store-shelf "mf choices" banner + overlay */
.hero--banner { padding: clamp(70px, 11vw, 130px) 24px; }
.hero--banner .hero__bg { object-position: center; }
.hero--banner::after { background: rgba(0,0,0,.5); }

/* Intro split strips (image one side, text other; alternating) */
.intro-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.intro-split__media { position: relative; overflow: hidden; min-height: 320px; }
.intro-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-split__content { padding: var(--strip-pad) clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.intro-split--right .intro-split__media { order: 2; }   /* image on the right */

/* Catalog gallery */
.catalog-head { max-width: 760px; margin: 0 auto 8px; text-align: center; }
.catalog-head .lead { max-width: 100%; }

.catalog-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 30px; }
.catalog-pills a {
  font-size: 13.5px; font-weight: 600;
  color: var(--shaded-text);
  padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 999px;
  background: #fff; transition: all .15s ease;
}
.catalog-pills a:hover { border-color: var(--purple); color: var(--purple-deep); }
.catalog-pills a.pill--active { background: var(--purple); border-color: var(--purple); color: #fff; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}
/* Gift sets page: cap the grid at 5 columns (above the mobile breakpoint, so
   the existing 600px 2-column rule still governs small screens) */
@media (min-width: 601px) {
  body[data-category="gift-sets"] .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 80px) / 5)), 1fr));
  }
}
#catalogGrid .card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
#catalogGrid .card__media { position: relative; padding-top: 100%; background: #f4f4f4; overflow: hidden; }
#catalogGrid .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
#catalogGrid .card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
#catalogGrid .card__name { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); text-transform: capitalize; }
#catalogGrid .card__cta { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--purple-deep); }

#catalogStatus { text-align: center; padding: 24px; color: var(--shaded-text); }

@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .intro-split { grid-template-columns: 1fr; }
  .intro-split--right .intro-split__media { order: 0; }
  .intro-split__media { min-height: 240px; }
}

/* ==========================================================================
   FOOTER (dark)
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: #cfcfcf;
  padding: 28px 24px;
}
.site-footer__inner { max-width: 1320px; margin: 0 auto; font-size: 14px; }

/* ==========================================================================
   MOBILE BOTTOM BAR
   ========================================================================== */
.mobilebar { display: none; }
.mobilebar__spacer { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .mainnav { display: none; }
  .burger  { display: flex; }

  .cards4 { grid-template-columns: repeat(2, 1fr); }
  .cards3 { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; gap: 24px; }
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 300px; }
  .contact { grid-template-columns: 1fr; gap: 0; }
  .lead, .center .lead { max-width: 100%; }

  /* Mobile bottom bar */
  .mobilebar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--purple);
  }
  .mobilebar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px; color: #fff; font-size: 11px;
  }
  .mobilebar a:hover { color: #fff; background: var(--purple-hover); }
  .mobilebar svg { width: 20px; height: 20px; fill: #fff; }
  .mobilebar__spacer { display: block; height: 62px; }
}

@media (max-width: 560px) {
  .strip { padding: var(--strip-pad) 18px; }
  .cards4, .cards3, .cards2 { grid-template-columns: 1fr; }
  .cols { gap: 24px; }
  .cols--5050 > * { flex: 1 1 100%; }
  .brand__title { font-size: 19px; }
  .brand__logo { height: 48px; }
}

/* ==========================================================================
   MOTION — desktop only + reduced-motion respected (per project rule)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
  .media > img { transition: transform .5s ease; }
  .cards4 .card:hover .media > img,
  .cards3 .card:hover .media > img,
  .cards2 .card:hover .media > img { transform: scale(1.04); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(210,176,231,.45); }
  #catalogGrid .card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
  #catalogGrid .card:hover img { transform: scale(1.05); }
}