/* ==========================================================================
   MUNZELY DESIGN SYSTEM
   Loaded by mu-plugin munzely-design.php. Source: ~/contexts/munzely/site/munzely-design.css

   Munzely's identity is warm, painterly, old-master — cream paper, gold leaf,
   dark oil. That stays. What was broken was execution, not identity:
     - subheads rendered SMALLER than body copy (hierarchy inversion)
     - emoji standing in for icons
     - colour slabs butting straight into each other with no transition
     - one spacing value used for everything, so nothing grouped
   ========================================================================== */

:root{
  /* ink */
  --mz-ink:#171310;
  --mz-ink-2:#453c33;          /* body copy — softer than headings */
  --mz-ink-3:#6f6355;          /* meta, captions */

  /* paper */
  --mz-cream:#FBF7EF;          /* page */
  --mz-cream-2:#F5EFE3;        /* alternating band — was a heavy tan */
  --mz-white:#FFFDF9;          /* cards */

  /* gold — the accent, used sparingly */
  --mz-gold:#B8862B;           /* text-safe gold (4.6:1 on cream) */
  --mz-gold-2:#E0B84B;         /* button gradient top */
  --mz-gold-3:#C6972F;         /* button gradient bottom */

  --mz-line:#E8DFCD;           /* hairline */
  --mz-line-2:#F0E9DC;         /* faintest hairline */

  /* type scale — 1.25 major third, anchored at 17px body */
  --mz-t-xs:0.78rem;
  --mz-t-sm:0.92rem;
  --mz-t-base:1.0625rem;       /* 17px */
  --mz-t-md:1.28rem;
  --mz-t-lg:1.6rem;
  --mz-t-xl:2.05rem;
  --mz-t-2xl:2.6rem;
  --mz-t-3xl:3.3rem;

  /* spacing scale — sections get real air, groups stay tight */
  --mz-s-1:0.5rem;
  --mz-s-2:1rem;
  --mz-s-3:1.5rem;
  --mz-s-4:2.25rem;
  --mz-s-5:3.5rem;
  --mz-s-6:5rem;
  --mz-s-7:7rem;

  --mz-radius:14px;
  --mz-radius-lg:20px;
  --mz-shadow:0 1px 2px rgba(23,19,16,.04), 0 8px 28px rgba(23,19,16,.06);
  --mz-shadow-lg:0 2px 4px rgba(23,19,16,.05), 0 18px 48px rgba(23,19,16,.10);
  --mz-maxw:1140px;
}

/* --------------------------------------------------------------- baseline --- */
body,.wp-site-blocks{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--mz-t-base);
  line-height:1.7;
  color:var(--mz-ink-2);
  background:var(--mz-cream);
  -webkit-font-smoothing:antialiased;
}
body p{ max-width:68ch; }
.has-text-align-center p, p.has-text-align-center{ margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------- headings ---
   Playfair at 800 was brutish. Display serifs carry authority at 500-600 with
   a little negative tracking; the weight was doing the work restraint should. */
h1,h2,h3,h4,h5,.wp-block-heading{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  color:var(--mz-ink);
  font-weight:600 !important;
  letter-spacing:-0.015em;
  line-height:1.18;
  text-wrap:balance;
}
h1,.wp-block-cover h1{ font-size:clamp(2.3rem,4.6vw,var(--mz-t-3xl)); font-weight:600 !important; }
h2{ font-size:clamp(1.85rem,3.2vw,var(--mz-t-2xl)); margin-block:0 var(--mz-s-2); }
h3{ font-size:var(--mz-t-md); line-height:1.3; }   /* was 19px — SMALLER than body */
h4{ font-size:var(--mz-t-base); }

/* section eyebrow */
.mz-eyebrow{
  font-family:'Inter',sans-serif !important;
  font-size:var(--mz-t-xs);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mz-gold);
  margin:0 0 var(--mz-s-1);
}
.mz-lede{
  font-size:var(--mz-t-md);
  line-height:1.6;
  color:var(--mz-ink-3);
  max-width:56ch;
  margin-inline:auto;
}

/* ---------------------------------------------------------------- sections ---
   The old page stacked full-bleed colour blocks with zero transition, so a tan
   band hit a pure-black band hit white. Alternating bands now differ by a few
   percent of warmth and are separated by a hairline, not a cliff. */
.mz-section{ padding-block:var(--mz-s-6); }
.mz-section--tight{ padding-block:var(--mz-s-5); }
.mz-section--alt{ background:var(--mz-cream-2); border-block:1px solid var(--mz-line); }
.mz-section--ink{ background:var(--mz-ink); color:#EFE7DA; }
.mz-section--ink h2,.mz-section--ink h3{ color:#FFFDF9; }
.mz-section--ink .mz-lede{ color:#CFC3B2; }

/* a soft paper edge so a dark band doesn't guillotine the page */
.mz-section--ink{
  background-image:linear-gradient(180deg,rgba(251,247,239,.10),transparent 120px),
                   linear-gradient(0deg,rgba(251,247,239,.06),transparent 90px);
}
.mz-head{ text-align:center; max-width:62ch; margin:0 auto var(--mz-s-4); }
.mz-head h2{ margin-bottom:var(--mz-s-2); }

/* ----------------------------------------------------------------- buttons ---
   A store cannot whisper at the buy button — keep it solid and gold. But the
   old 18px glow made it look like a 2011 web app. */
.wp-block-button__link,.wc-block-components-button,.button,
button.single_add_to_cart_button,.added_to_cart,.mz-btn{
  background:linear-gradient(180deg,var(--mz-gold-2),var(--mz-gold-3)) !important;
  color:#1E1608 !important;
  border:1px solid rgba(120,88,20,.28) !important;
  border-radius:999px !important;
  font-family:'Inter',sans-serif !important;
  font-weight:650 !important;
  letter-spacing:.005em;
  box-shadow:0 1px 1px rgba(255,255,255,.5) inset, 0 6px 16px rgba(160,120,30,.22);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.wp-block-button__link:hover,.button:hover,button.single_add_to_cart_button:hover,.mz-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 1px 1px rgba(255,255,255,.5) inset, 0 10px 22px rgba(160,120,30,.28) !important;
}
.mz-btn{
  display:inline-block; padding:15px 34px; font-size:var(--mz-t-base);
  text-decoration:none; cursor:pointer;
}
.mz-btn--ghost{
  background:transparent !important; color:var(--mz-ink) !important;
  border:1px solid var(--mz-line) !important; box-shadow:none !important;
}
.mz-btn--ghost:hover{ border-color:var(--mz-gold) !important; }
.mz-cta-note{
  display:block; margin-top:var(--mz-s-2);
  font-size:var(--mz-t-sm); color:var(--mz-ink-3);
}

/* ------------------------------------------------------------------- trust --- */
.mz-trust{
  list-style:none; margin:0 auto; padding:0; max-width:var(--mz-maxw);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--mz-s-3) var(--mz-s-4);
}
.mz-trust__item{ display:flex; gap:.75rem; align-items:flex-start; }
.mz-trust__icon{ width:22px; height:22px; flex:none; color:var(--mz-gold); margin-top:2px; }
.mz-trust__body{ display:flex; flex-direction:column; gap:2px; }
.mz-trust__body strong{ font-size:var(--mz-t-sm); font-weight:600; color:var(--mz-ink); letter-spacing:-.005em; }
.mz-trust__body span{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); line-height:1.5; }

/* ------------------------------------------------------------------- steps --- */
.mz-steps{
  list-style:none; margin:0 auto; padding:0; max-width:var(--mz-maxw);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--mz-s-4);
  counter-reset:mz;
}
.mz-steps__item{ position:relative; padding-top:var(--mz-s-1); }
.mz-steps__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  background:var(--mz-white); border:1px solid var(--mz-line);
  font-family:'Playfair Display',serif; font-size:var(--mz-t-base); color:var(--mz-gold);
  margin-bottom:var(--mz-s-2);
}
.mz-steps__title{ margin:0 0 .35rem; font-size:var(--mz-t-md); }
.mz-steps__body{ margin:0; font-size:var(--mz-t-sm); color:var(--mz-ink-3); }

/* ---------------------------------------------------------------- carousel --- */
.mz-carousel{ position:relative; }
.mz-carousel__track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 22px; margin-inline:calc(var(--mz-s-2) * -1);
  padding-inline:var(--mz-s-2);
  scrollbar-width:thin; scrollbar-color:var(--mz-line) transparent;
}
.mz-carousel__track::-webkit-scrollbar{ height:6px; }
.mz-carousel__track::-webkit-scrollbar-thumb{ background:var(--mz-line); border-radius:99px; }
.mz-style{
  flex:0 0 clamp(200px,22vw,250px); scroll-snap-align:start;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.mz-style__frame{
  display:block; border-radius:var(--mz-radius); overflow:hidden;
  background:var(--mz-white); border:1px solid var(--mz-line);
  box-shadow:var(--mz-shadow); transition:transform .2s ease,box-shadow .2s ease;
}
.mz-style__frame img{ display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.mz-style:hover .mz-style__frame{ transform:translateY(-3px); box-shadow:var(--mz-shadow-lg); }
.mz-style__name{
  font-family:'Playfair Display',serif; font-size:var(--mz-t-base); color:var(--mz-ink);
  margin-top:.7rem;
}
.mz-style__blurb{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); line-height:1.45; }
.mz-carousel__nav{
  position:absolute; top:calc(50% - 40px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  background:var(--mz-white) !important; color:var(--mz-ink) !important;
  border:1px solid var(--mz-line) !important;
  box-shadow:var(--mz-shadow) !important;
  display:grid; place-items:center; padding:0 !important;
}
.mz-carousel__nav svg{ width:20px; height:20px; }
.mz-carousel__nav--prev{ left:-14px; }
.mz-carousel__nav--next{ right:-14px; }
.mz-carousel.is-start .mz-carousel__nav--prev,
.mz-carousel.is-end .mz-carousel__nav--next{ opacity:0; pointer-events:none; }
@media (max-width:781px){ .mz-carousel__nav{ display:none; } }

/* ------------------------------------------------------------------- range --- */
.mz-range{
  max-width:var(--mz-maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--mz-s-3);
}
.mz-range__item{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--mz-white); border:1px solid var(--mz-line); border-radius:var(--mz-radius);
  padding:14px 14px 16px; box-shadow:var(--mz-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mz-range__item:hover{ transform:translateY(-3px); box-shadow:var(--mz-shadow-lg); border-color:#DFD2B8; }
.mz-range__shot{ display:block; border-radius:10px; overflow:hidden; background:#fff; }
.mz-range__shot img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.mz-range__name{ font-family:'Playfair Display',serif; font-size:var(--mz-t-base); color:var(--mz-ink); margin-top:.7rem; }
.mz-range__note{ font-size:var(--mz-t-xs); color:var(--mz-ink-3); line-height:1.45; margin-top:2px; }
.mz-range__price{ margin-top:.5rem; font-size:var(--mz-t-sm); font-weight:600; color:var(--mz-gold); }
.mz-range__price .woocommerce-Price-amount{ font-weight:600; }

/* --------------------------------------------------------------------- faq --- */
.mz-faq{ max-width:780px; margin-inline:auto; }
.mz-faq details{
  border-bottom:1px solid var(--mz-line); padding:var(--mz-s-3) 0;
}
.mz-faq details[open]{ background:linear-gradient(180deg,rgba(255,253,249,.7),transparent); }
.mz-faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;
  font-family:'Playfair Display',serif; font-size:var(--mz-t-md); color:var(--mz-ink);
}
.mz-faq summary::-webkit-details-marker{ display:none; }
.mz-faq summary::after{
  content:'+'; font-family:'Inter',sans-serif; color:var(--mz-gold); font-size:1.4rem;
  line-height:1; flex:none; transition:transform .2s ease;
}
.mz-faq details[open] summary::after{ transform:rotate(45deg); }
.mz-faq p{ margin:.7rem 0 0; font-size:var(--mz-t-sm); color:var(--mz-ink-3); max-width:none; }

/* --------------------------------------------------------------- SEO links ---
   These were three stacked pill-clouds mid-page — a tag dump rendered as UI.
   They still matter for internal linking, so they live on quietly at the end. */
.mz-links{ max-width:var(--mz-maxw); margin-inline:auto; }
.mz-links__group + .mz-links__group{ margin-top:var(--mz-s-3); }
.mz-links__label{
  font-size:var(--mz-t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mz-ink-3); margin:0 0 .6rem;
}
.mz-links__list{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.mz-links__list a{
  font-size:var(--mz-t-sm); color:var(--mz-ink-3); text-decoration:none;
  padding:5px 12px; border:1px solid var(--mz-line); border-radius:999px; background:var(--mz-white);
  transition:color .15s ease,border-color .15s ease;
}
.mz-links__list a:hover{ color:var(--mz-ink); border-color:var(--mz-gold); }

/* ------------------------------------------------------------------ header ---
   NOTE: backdrop-filter must NOT live on the header itself. Like transform, it
   makes the element a containing block for position:fixed descendants — which
   traps WordPress's mobile menu overlay inside the header, so the menu opened
   as a thin strip at the top of the screen instead of covering it. Putting the
   blur on a pseudo-element keeps the effect without capturing the overlay. */
.wp-block-template-part header,header.wp-block-group{
  background:rgba(251,247,239,.94);
  border-bottom:1px solid var(--mz-line-2);
  position:sticky; top:0; z-index:40;
}
.wp-block-template-part header::before,header.wp-block-group::before{
  content:''; position:absolute; inset:0; z-index:-1;
  backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  pointer-events:none;
}

/* the overlay itself: full-screen, above the sticky header */
.wp-block-navigation__responsive-container.is-menu-open{
  background:var(--mz-cream) !important;
  padding:var(--mz-s-4) var(--mz-s-3) !important;
  z-index:100;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:var(--mz-s-4);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:flex-start !important; gap:.35rem !important; width:100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:500;
  color:var(--mz-ink) !important; padding-block:.5rem;
  border:0 !important; outline:0 !important;   /* current item was drawing a black box */
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content{
  color:var(--mz-gold) !important;
}
/* keep a real focus ring for keyboard users */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{
  outline:2px solid var(--mz-gold) !important; outline-offset:3px;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{ color:var(--mz-ink) !important; }
.wp-block-site-title a{
  font-family:'Playfair Display',serif !important; font-weight:600 !important;
  font-size:1.35rem; letter-spacing:.01em; color:var(--mz-ink) !important; text-decoration:none;
}
.wp-block-navigation a{
  font-family:'Inter',sans-serif; font-size:var(--mz-t-sm); font-weight:500;
  color:var(--mz-ink-2) !important; text-decoration:none;
}
.wp-block-navigation a:hover{ color:var(--mz-ink) !important; }
.wp-block-navigation .current-menu-item a{ color:var(--mz-ink) !important; }

/* ------------------------------------------------------------------ footer --- */
footer.wp-block-template-part,.wp-block-template-part footer{
  background:var(--mz-cream-2); border-top:1px solid var(--mz-line); color:var(--mz-ink-2);
}
footer .wp-block-site-title a,footer h2,footer h3{ color:var(--mz-ink) !important; }
footer a{ color:var(--mz-ink-3); text-decoration:none; }
footer a:hover{ color:var(--mz-ink); }

/* ------------------------------------------------------------------- woo ---- */
.woocommerce ul.products li.product,.wc-block-grid__product{
  background:var(--mz-white); border:1px solid var(--mz-line); border-radius:var(--mz-radius);
  padding:14px; box-shadow:var(--mz-shadow);
}
.woocommerce div.product p.price,.woocommerce ul.products li.product .price{
  color:var(--mz-gold) !important; font-weight:650;
}

/* the old rule painted EVERY column as a card, which is why unrelated blocks
   all looked like boxes; cards are opt-in now */
.wp-block-column{ background:none; border:0; box-shadow:none; padding:0; border-radius:0; }
.mz-cards .wp-block-column{
  background:var(--mz-white); border:1px solid var(--mz-line); border-radius:var(--mz-radius);
  padding:26px 22px; box-shadow:var(--mz-shadow);
}
.wp-block-column h3{ color:var(--mz-ink); margin-top:0; }

/* ----------------------------------------------------------------- mobile --- */
@media (max-width:781px){
  :root{ --mz-s-6:3.25rem; --mz-s-5:2.5rem; }
  body,.wp-site-blocks{ font-size:1rem; }
  .mz-section{ padding-block:var(--mz-s-5); }
  .mz-trust{ gap:var(--mz-s-3); }
  .mz-range{ grid-template-columns:repeat(2,1fr); gap:var(--mz-s-2); }
  .mz-style{ flex-basis:63vw; }
}

/* --------------------------------------------------------- layout widths ---
   TT25 constrains block children to contentSize (645px). That is right for a
   paragraph and wrong for a six-up product grid — it was squeezing three
   columns into ~110px each and breaking headings onto four lines. Sections opt
   into the wider measure; running text keeps its own narrow max-width. */
.mz-section.is-layout-constrained > *,
.mz-section .wp-block-columns{ max-width:var(--mz-maxw) !important; }
.mz-section .mz-head{ max-width:62ch !important; }
.mz-section .mz-faq{ max-width:780px !important; }
.mz-section .wp-block-buttons{ max-width:none !important; }

/* six-up on desktop, three at tablet, two on phones — never an orphan row */
@media (min-width:1000px){ .mz-range{ grid-template-columns:repeat(6,1fr); } }
@media (min-width:600px) and (max-width:999px){ .mz-range{ grid-template-columns:repeat(3,1fr); } }

/* hero */
.mz-hero .wp-block-cover__inner-container{ max-width:760px; }
.mz-hero__lede{ font-size:var(--mz-t-md); line-height:1.6; color:#EDE4D6 !important; max-width:58ch; margin-inline:auto; }
.mz-hero__note{ font-size:var(--mz-t-sm); color:#C6B9A5 !important; margin-top:var(--mz-s-2); }
.mz-hero h1{ color:#FFFDF9 !important; text-shadow:0 2px 30px rgba(0,0,0,.45); margin-bottom:var(--mz-s-2); }
.mz-hero .wp-block-buttons{ margin-top:var(--mz-s-3); }

/* card columns need room to breathe once they are actually wide */
.mz-cards .wp-block-columns{ gap:var(--mz-s-3); }

/* ------------------------------------------------------- mobile type tune ---
   A 1.28rem lede is a nice measure on a 1140px column and a wall of text on a
   390px screen — six lines before the reader learns anything. */
@media (max-width:781px){
  .mz-lede,.mz-hero__lede{ font-size:1.02rem; line-height:1.55; }
  .mz-hero h1{ font-size:2.05rem; }
  .mz-hero .wp-block-cover__inner-container{ padding-inline:var(--mz-s-2); }
  h2{ font-size:1.6rem; }
  h3{ font-size:1.1rem; }
  .mz-head{ margin-bottom:var(--mz-s-3); }
  .mz-steps{ gap:var(--mz-s-3); }
  .mz-steps__num{ width:30px; height:30px; margin-bottom:.6rem; }
  .mz-faq summary{ font-size:1.05rem; }
  .mz-range__note{ font-size:.72rem; }
}

/* ---------------------------------------------------------------- footer ---
   Was a black slab with centred micro-text and a second copy of the SEO tag
   dump. Now: cream, hairline top, three readable columns. */
footer .wp-block-group{ gap:var(--mz-s-3); }
footer .wp-block-site-title a{ font-size:1.2rem; }
footer p{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); max-width:52ch; }
.mz-foot{ max-width:var(--mz-maxw); margin-inline:auto; padding-block:var(--mz-s-5) var(--mz-s-3); }
.mz-foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--mz-s-4);
  align-items:start;
}
.mz-foot__brand p{ margin:.5rem 0 0; }
.mz-foot h3{
  font-family:'Inter',sans-serif !important; font-size:var(--mz-t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mz-ink-3); margin:0 0 .7rem;
}
.mz-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.mz-foot a{ font-size:var(--mz-t-sm); color:var(--mz-ink-2); text-decoration:none; }
.mz-foot a:hover{ color:var(--mz-gold); }
.mz-foot__base{
  border-top:1px solid var(--mz-line); margin-top:var(--mz-s-4); padding-top:var(--mz-s-2);
  display:flex; justify-content:space-between; gap:var(--mz-s-2); flex-wrap:wrap;
  font-size:var(--mz-t-xs); color:var(--mz-ink-3);
}
@media (max-width:781px){
  .mz-foot__grid{ grid-template-columns:1fr 1fr; gap:var(--mz-s-3); }
  .mz-foot__brand{ grid-column:1 / -1; }
}

.mz-footer{ background:var(--mz-cream-2); border-top:1px solid var(--mz-line); }
.mz-foot__logo{
  font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--mz-ink) !important;
  text-decoration:none;
}

/* ------------------------------------------------------------ shop grid ---
   The catalogue mixes a 2:3 dark canvas render with square white-background
   garment mockups. Left alone they sit at different sizes on the cream page and
   read as six unrelated images. A uniform white card with a fixed square image
   well normalises them. */
.woocommerce ul.products{ gap:var(--mz-s-3); }
.woocommerce ul.products li.product{
  background:var(--mz-white); border:1px solid var(--mz-line); border-radius:var(--mz-radius);
  padding:16px 16px 20px; box-shadow:var(--mz-shadow); text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  margin-bottom:0 !important;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-3px); box-shadow:var(--mz-shadow-lg); border-color:#DFD2B8;
}
.woocommerce ul.products li.product a img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border-radius:10px; margin:0 0 var(--mz-s-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Playfair Display',serif; font-size:var(--mz-t-base) !important;
  color:var(--mz-ink); padding:0; margin:0 0 .25rem;
}
.woocommerce ul.products li.product .price{
  display:block; font-size:var(--mz-t-sm); margin-bottom:var(--mz-s-2);
}
.woocommerce ul.products li.product .button{ font-size:var(--mz-t-sm); padding:11px 22px; }
.woocommerce span.onsale{
  background:var(--mz-ink) !important; color:#FFFDF9 !important;
  font-family:'Inter',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; border-radius:999px; padding:6px 14px; min-height:0; line-height:1;
  top:22px; left:auto; right:22px; box-shadow:none;
}

/* product page */
.woocommerce div.product .woocommerce-product-gallery img{ border-radius:var(--mz-radius); }
.woocommerce div.product .product_title{ margin-bottom:.4rem; }
.woocommerce div.product p.price{ font-size:var(--mz-t-lg) !important; margin-bottom:var(--mz-s-2); }
.woocommerce div.product form.cart{ margin-top:var(--mz-s-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:'Inter',sans-serif; font-size:var(--mz-t-sm); font-weight:600;
}
.woocommerce .woocommerce-breadcrumb{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); }
.woocommerce .woocommerce-breadcrumb a{ color:var(--mz-ink-3); }

/* The shop uses the BLOCK product template (li.wc-block-product), not the
   classic ul.products markup — the classic selectors above never matched. */
.wc-block-product-template{ gap:var(--mz-s-3) !important; }
li.wc-block-product{
  background:var(--mz-white); border:1px solid var(--mz-line); border-radius:var(--mz-radius);
  padding:16px 16px 20px; box-shadow:var(--mz-shadow); text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
li.wc-block-product:hover{
  transform:translateY(-3px); box-shadow:var(--mz-shadow-lg); border-color:#DFD2B8;
}
li.wc-block-product .wc-block-components-product-image img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff;
  border-radius:10px; margin-bottom:var(--mz-s-2);
}
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-title{
  font-family:'Playfair Display',serif !important; font-size:var(--mz-t-base) !important;
  font-weight:600 !important; line-height:1.3; margin:0 0 .3rem !important;
}
li.wc-block-product .wp-block-post-title a{ color:var(--mz-ink); text-decoration:none; }
li.wc-block-product .wc-block-components-product-price{
  display:block; font-size:var(--mz-t-sm) !important; color:var(--mz-gold) !important;
  font-weight:600; margin-bottom:var(--mz-s-2) !important;
}
li.wc-block-product .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button a{
  font-size:var(--mz-t-sm) !important; padding:11px 22px !important;
}
.wc-block-components-product-badge.wc-block-components-sale-badge{
  background:var(--mz-ink) !important; color:#FFFDF9 !important; border:0 !important;
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; border-radius:999px; padding:6px 13px;
}
.wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-catalog-sorting{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); }

/* Woo's block grid sizes columns from the item's intrinsic width. The cards
   above are content-box by default, so the padding I added inflated that
   minimum and collapsed a 3-up grid to 2-up. */
li.wc-block-product{ box-sizing:border-box; }
@media (min-width:1000px){ .wc-block-product-template{ grid-template-columns:repeat(3,1fr) !important; } }
@media (min-width:600px) and (max-width:999px){ .wc-block-product-template{ grid-template-columns:repeat(2,1fr) !important; } }

/* ============================================================== THE JOURNAL ===
   The blog index was rendering wp:post-content inside the query loop, so every
   post's FULL body stacked on the index — 34,800px tall for ten posts. It now
   uses excerpts in a card grid, which is what the stock TT25 pattern should
   have done. */

.mz-journal-head .mz-journal-tools{
  display:flex; gap:var(--mz-s-3); align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:var(--mz-s-3);
}
/* the category list was rendering as a bare bulleted <ul> floating off to the
   left of the column — the single biggest "unfinished" tell on the page */
.mz-cats ul,.wp-block-categories-list{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; justify-content:center;
}
.mz-cats li{ margin:0 !important; }
.mz-cats a{
  font-size:var(--mz-t-sm); color:var(--mz-ink-3); text-decoration:none;
  padding:6px 14px; border:1px solid var(--mz-line); border-radius:999px;
  background:var(--mz-white); display:inline-block; text-transform:capitalize;
  transition:color .15s ease,border-color .15s ease;
}
.mz-cats a:hover{ color:var(--mz-ink); border-color:var(--mz-gold); }
.mz-search .wp-block-search__inside-wrapper{
  border:1px solid var(--mz-line) !important; background:var(--mz-white);
  border-radius:999px; overflow:hidden; padding:3px 3px 3px 6px; max-width:330px;
}
.mz-search .wp-block-search__input{
  border:0 !important; background:transparent; font-size:var(--mz-t-sm); padding:8px 12px;
}
.mz-search .wp-block-search__button{ font-size:var(--mz-t-sm) !important; padding:9px 20px !important; }

/* --- card grid --- */
.mz-journal__grid{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:var(--mz-s-4) var(--mz-s-3);
  list-style:none; margin:0; padding:0; max-width:var(--mz-maxw); margin-inline:auto;
}
.mz-journal__grid > li{ margin:0; }
.mz-card{ display:flex; flex-direction:column; height:100%; }
.mz-card__img{ margin:0 0 var(--mz-s-2) !important; }
.mz-card__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--mz-radius); border:1px solid var(--mz-line);
  box-shadow:var(--mz-shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.mz-card:hover .mz-card__img img{ transform:translateY(-3px); box-shadow:var(--mz-shadow-lg); }
.mz-card__date{
  font-size:var(--mz-t-xs) !important; color:var(--mz-ink-3) !important;
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 .35rem !important;
}
.mz-card__title{ margin:0 0 .5rem !important; font-size:var(--mz-t-md) !important; line-height:1.28; }
.mz-card__title a{ color:var(--mz-ink); text-decoration:none; }
.mz-card__title a:hover{ color:var(--mz-gold); }
.mz-card__excerpt{ margin:0 !important; }
.mz-card__excerpt p{ font-size:var(--mz-t-sm); color:var(--mz-ink-3); line-height:1.6; margin:0; }
.mz-card__excerpt .wp-block-post-excerpt__more-text{ margin-top:.5rem; }
.mz-card__excerpt a{ font-size:var(--mz-t-sm); color:var(--mz-gold); font-weight:600; text-decoration:none; }

/* --- pagination --- */
.mz-pagination{ margin-top:var(--mz-s-5); }
.mz-pagination .wp-block-query-pagination{ gap:.4rem; }
.mz-pagination a,.mz-pagination .page-numbers{
  font-size:var(--mz-t-sm); color:var(--mz-ink-2); text-decoration:none;
  padding:8px 14px; border:1px solid var(--mz-line); border-radius:999px;
  background:var(--mz-white);
}
.mz-pagination .page-numbers.current{
  background:var(--mz-ink); color:#FFFDF9; border-color:var(--mz-ink);
}

/* ------------------------------------------------------------- article ---- */
.mz-article{ padding-top:var(--mz-s-5); }
.mz-article__head{ max-width:760px !important; margin-inline:auto; text-align:center; }
.mz-article__cat{ display:block; margin-bottom:var(--mz-s-1) !important; }
.mz-article__cat a{ color:var(--mz-gold) !important; text-decoration:none; }
.mz-article__title{ margin:0 0 .6rem !important; font-size:clamp(2rem,3.6vw,2.9rem) !important; }
.mz-article__date{
  color:var(--mz-ink-3) !important; font-size:var(--mz-t-sm) !important;
  margin:0 0 var(--mz-s-4) !important;
}
.mz-article__hero{ margin:0 0 var(--mz-s-5) !important; }
.mz-article__hero img{
  width:100%; border-radius:var(--mz-radius-lg); border:1px solid var(--mz-line);
  box-shadow:var(--mz-shadow-lg);
}

/* long-form reading measure — 17px at 68ch is a wall; articles get a size bump */
.mz-article__body{ max-width:100% !important; }
.mz-article__body > *{
  max-width:720px !important; margin-inline:auto !important;
}
.mz-article__body > .alignwide,.mz-article__body > .alignfull{ max-width:var(--mz-maxw) !important; }
.mz-article__body p{
  font-size:1.14rem; line-height:1.78; color:var(--mz-ink-2); margin-block:0 1.25em;
}
.mz-article__body h2{ font-size:1.85rem !important; margin-block:2.2rem .7rem !important; }
.mz-article__body h3{ font-size:1.34rem !important; margin-block:1.8rem .5rem !important; }
.mz-article__body ul,.mz-article__body ol{ font-size:1.08rem; line-height:1.75; color:var(--mz-ink-2); }
.mz-article__body li{ margin-bottom:.5rem; }
.mz-article__body img{ border-radius:var(--mz-radius); }
.mz-article__body figure{ margin-block:2rem; }
.mz-article__body a{ color:var(--mz-gold); text-underline-offset:3px; }
.mz-article__body blockquote{
  border-left:2px solid var(--mz-gold); padding-left:1.25rem; margin-block:2rem;
  font-family:'Playfair Display',serif; font-size:1.3rem; line-height:1.5; color:var(--mz-ink);
}
.mz-article__cta{ margin-top:var(--mz-s-6); }

@media (max-width:999px){
  .mz-journal__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:781px){
  .mz-journal__grid{ grid-template-columns:1fr; gap:var(--mz-s-4); }
  .mz-article__body p{ font-size:1.06rem; }
  .mz-article__body h2{ font-size:1.5rem !important; }
  .mz-journal-head .mz-journal-tools{ gap:var(--mz-s-2); }
}

/* The article head is alignfull (so the hero can breathe) but WP's alignfull
   margins fought the auto-centring, leaving the title/hero sitting left of the
   body column. Pin both to the same 720px measure so the article reads as one
   column. */
.mz-article__head{
  max-width:720px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-inline:var(--mz-s-2);
}
.mz-article__hero img{ width:100%; }

/* the search submit was inheriting the theme's black button, not our gold */
.wp-block-search__button{
  background:linear-gradient(180deg,var(--mz-gold-2),var(--mz-gold-3)) !important;
  color:#1E1608 !important; border:1px solid rgba(120,88,20,.28) !important;
  border-radius:999px !important; font-weight:650 !important;
}