/* ============================================================
   MACRO MARKET — Theme overrides + page components
   Loads AFTER tokens.css and AFTER bw-fitrush's own styles so it
   wins on specificity / cascade order alone (no !important needed
   except for known framework hard-overrides).
   ============================================================ */

/* ---------- Global resets on top of the parent theme ---------- */

/* Parent theme sets body { opacity: 0 } via .bzotech-elementor-layout-shifts
   until its JS removes it, causing a flash of blank content (and breaking
   headless screenshots). Our templates don't need that CLS guard. */
body.bzotech-elementor-layout-shifts { opacity: 1 !important; }

html { scroll-behavior: smooth; }

body,
body.woocommerce,
body.woocommerce-page,
body.page,
body.single,
body.archive,
body.home {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  background: var(--bg2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading family override across the site — unless the page template sets its own. */
body h1, body h2, body h3, body h4,
.entry-title, .widget-title, .section-title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--fg1);
  letter-spacing: calc(var(--track-display) + 2px);
  line-height: var(--lh-heading);
}

/* Primary link tone. */
body a { color: var(--accent-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
body a:hover, body a:focus-visible { color: var(--accent-secondary); }
body a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Buttons across the theme (common selectors used by bw-fitrush / woo / Elementor). */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
  font-family: var(--font-button);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px 22px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  box-shadow: var(--shadow-2);
}
.button:hover, button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wp-block-button__link:hover {
  background: var(--mm-midnight-blue);
  color: var(--mm-warm-sand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}
.button:active, button:active, .wp-block-button__link:active { transform: translateY(0); }

/* Header/footer surfaces — let the parent theme's layout stand but re-tint. */
.header-default,
.site-header,
header.header-wrap,
#header {
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
  border-bottom: 1px solid var(--mm-line-on-dark);
}
.header-default a,
.site-header a,
header.header-wrap a,
#header a,
#header .site-title a {
  color: var(--mm-warm-sand);
}
.header-default a:hover,
.site-header a:hover { color: var(--mm-gold-bright); }

/* WooCommerce product titles & prices — gentle on-brand lift.
   No brand display webfont is installed yet, so --font-display resolves
   to Arial Narrow / system-ui; at --w-bold (700) the product names read
   too thick and cramped. Drop card titles to --w-med (500) for a lighter,
   easier-to-read name. The global `body h2/h3` rule above would otherwise
   force these headings back to 700, so we also re-pin the bw-fitrush card
   markup, not just the WooCommerce default title. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.item-product .product-info .product-title,
.item-product .product-info .product-title a,
.item-grid-product- .product-info .product-title a,
.item-grid-product-style2 .product-info .product-title a,
.item-grid-product-style3 .product-info .product-title a,
.item-grid-product-style4 .product-info .product-title a,
.item-grid-product-style5 .product-info .product-title a,
.item-list-default .product-info .product-title a {
  font-family: var(--font-display);
  font-weight: var(--w-med);
  letter-spacing: calc(var(--track-display) + 2px);
  color: var(--fg1);
}
.woocommerce .price { color: var(--mm-deep-navy); font-family: var(--font-mono); font-weight: var(--w-semi); }

/* ---------- Reusable type mixins ---------- */

.mm-hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-hero);
  text-wrap: balance;
}
.mm-d1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-d1);
  line-height: var(--lh-heading); letter-spacing: var(--track-display); text-wrap: balance; }
.mm-d2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-d2);
  line-height: var(--lh-heading); letter-spacing: var(--track-display); }
.mm-h1 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--t-h1);
  line-height: var(--lh-heading); letter-spacing: var(--track-display); }
.mm-body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); text-wrap: pretty; }
.mm-lede { font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--fg2); }

.mm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: var(--w-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
  display: inline-block;
}
.mm-eyebrow--on-dark { color: var(--fg-on-dark-2); }
.mm-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}

.mm-stamp {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  line-height: 1.5;
}
.mm-stamp--on-dark { color: var(--fg-on-dark-3); }

.mm-section-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--mm-line-strong);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.mm-section-num--on-dark { -webkit-text-stroke-color: var(--mm-line-on-dark); }

/* ---------- Language toggle pill ---------- */

.mm-lang-toggle {
  position: fixed;
  top: 72px; /* clears the WooCommerce store-notice bar (~45px) with breathing room */
  right: 18px;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--mm-warm-sand);
  border: 1px solid rgba(30, 42, 58, 0.22);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 4px rgba(30,42,58,0.18),
    0 8px 24px -6px rgba(30,42,58,0.22);
}
.mm-lang-toggle a {
  color: var(--mm-ink-500);
  padding: 2px 6px;
  border-radius: 2px;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.mm-lang-toggle a:hover { color: var(--mm-deep-navy); }
.mm-lang-toggle a.is-active {
  color: var(--mm-warm-sand);
  background: var(--mm-deep-navy);
}
.mm-lang-toggle .mm-lang-sep { color: var(--mm-ink-300); }

/* ---------- Page shell scaffolding ---------- */

.mm-page { background: var(--bg2); color: var(--fg2); }
.mm-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.mm-container--wide { max-width: 1440px; }
.mm-container--narrow { max-width: 820px; }

.mm-section { padding-block: clamp(72px, 10vw, 144px); position: relative; }
.mm-section + .mm-section { border-top: 1px solid var(--mm-line); }
.mm-section--dark { background: var(--mm-deep-navy); color: var(--fg-on-dark-1); border-top-color: var(--mm-line-on-dark) !important; }
.mm-section--green { background: var(--mm-forest-green); color: var(--fg-on-dark-1); }
.mm-section--sand { background: var(--mm-warm-sand); color: var(--fg1); }
.mm-section--dark + .mm-section { border-top: 0; }

.mm-section__header { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); }
@media (min-width: 900px) {
  .mm-section__header { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--sp-8); }
}

/* ---------- About page ---------- */

.mm-about-hero {
  position: relative;
  background: var(--mm-deep-navy);
  color: var(--fg-on-dark-1);
  padding-block: clamp(96px, 14vw, 200px);
  overflow: hidden;
  isolation: isolate;
}
.mm-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(46, 124, 137, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 35% at 10% 90%, rgba(111, 75, 168, 0.14), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.mm-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231, 216, 196, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 216, 196, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}
.mm-about-hero__stamp {
  position: absolute;
  top: clamp(20px, 4vw, 40px);
  left: clamp(20px, 4vw, 56px);
  color: var(--fg-on-dark-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mm-about-hero__stamp svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: 0.7; }

.mm-about-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .mm-about-hero__grid { grid-template-columns: 8fr 4fr; align-items: end; gap: var(--sp-8); }
}
.mm-about-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(56px, 9vw, 136px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--fg-on-dark-1);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
.mm-about-hero h1 em {
  font-style: italic;
  color: var(--mm-gold-bright);
  font-weight: var(--w-bold);
}
.mm-about-hero__lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--fg-on-dark-2);
  max-width: 48ch;
}
.mm-about-hero__eyebrow { color: var(--fg-on-dark-2); margin-bottom: var(--sp-5); }

/* Hero reveal animation (transform + opacity only) */
.mm-reveal { opacity: 0; transform: translateY(16px); animation: mm-reveal 700ms var(--ease-out) forwards; }
.mm-reveal--d1 { animation-delay: 60ms; }
.mm-reveal--d2 { animation-delay: 140ms; }
.mm-reveal--d3 { animation-delay: 220ms; }
.mm-reveal--d4 { animation-delay: 300ms; }
@keyframes mm-reveal { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .mm-reveal { opacity: 1; transform: none; animation: none; }
}

/* Two-column "statement" section (mission, vision) */
.mm-statement { position: relative; }
.mm-statement__num {
  position: absolute;
  top: -0.25em;
  right: clamp(0px, 2vw, 24px);
  z-index: 0;
}
.mm-statement__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .mm-statement__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-8); }
}
.mm-statement__head {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}
.mm-statement__body {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--fg2);
  max-width: 56ch;
}
.mm-statement__body p { margin: 0 0 var(--sp-4); }

/* Values cards */
.mm-values { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 760px) { .mm-values { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.mm-value-card {
  position: relative;
  background: rgba(231, 216, 196, 0.04);
  border: 1px solid var(--mm-line-on-dark);
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-1);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  isolation: isolate;
  transition: transform var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard),
              background var(--dur-med) var(--ease-standard);
}
.mm-value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mm-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.mm-value-card:hover { transform: translateY(-4px); border-color: rgba(231, 216, 196, 0.28); background: rgba(231, 216, 196, 0.06); }
.mm-value-card:hover::before { transform: scaleX(1); }

.mm-value-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mm-gold-bright);
  margin-bottom: var(--sp-5);
}
.mm-value-card__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-on-dark-1);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.mm-value-card__body {
  color: var(--fg-on-dark-2);
  line-height: 1.55;
  flex: 1;
}

/* Manifesto */
.mm-manifesto { position: relative; background: var(--mm-warm-sand); color: var(--fg1); overflow: hidden; }
.mm-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(46, 124, 137, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(201, 162, 74, 0.12), transparent 70%);
  pointer-events: none;
}
.mm-manifesto__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .mm-manifesto__grid { grid-template-columns: 3fr 9fr; gap: var(--sp-8); }
}
.mm-manifesto__side .mm-eyebrow { color: var(--mm-deep-navy); opacity: 0.7; }
.mm-manifesto__head {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--mm-deep-navy);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
.mm-manifesto__body p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
  max-width: 64ch;
}
.mm-manifesto__body p:first-of-type {
  font-family: var(--font-display);
  font-weight: 400; /* lead paragraph: regular weight (was --w-bold) */
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mm-deep-navy);
}
.mm-manifesto__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.12em 0 0;
  color: var(--mm-midnight-blue);
}
.mm-manifesto__signoff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-deep-navy);
  opacity: 0.75;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--mm-line-strong);
  display: inline-block;
}

/* CTA band */
.mm-cta-band {
  background: var(--mm-forest-green);
  color: var(--fg-on-dark-1);
  padding-block: clamp(64px, 8vw, 112px);
}
.mm-cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .mm-cta-band__inner { grid-template-columns: 2fr 1fr; gap: var(--sp-8); }
}
.mm-cta-band__head {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark-1);
  margin: 0;
  text-wrap: balance;
}
.mm-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
@media (min-width: 900px) { .mm-cta-band__actions { justify-content: flex-end; } }

.mm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--font-button);
  font-weight: var(--w-bold);
  font-size: 12px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  box-shadow: var(--shadow-on-dark);
}
.mm-btn--primary { background: var(--mm-warm-sand); color: var(--mm-deep-navy); }
.mm-btn--primary:hover { background: var(--mm-gold-bright); color: var(--mm-deep-navy); transform: translateY(-1px); }
.mm-btn--ghost { background: transparent; color: var(--mm-warm-sand); border-color: rgba(231, 216, 196, 0.45); box-shadow: none; }
.mm-btn--ghost:hover { background: rgba(231, 216, 196, 0.1); border-color: var(--mm-warm-sand); color: var(--mm-warm-sand); transform: translateY(-1px); }
/* Navy variant — for use on light/sand surfaces where the sand --primary
   button would have too little contrast (e.g. the Vision section CTA). */
.mm-btn--navy { background: var(--mm-deep-navy); color: var(--mm-warm-sand); }
.mm-btn--navy:hover { background: var(--mm-midnight-blue); color: var(--mm-warm-sand); transform: translateY(-1px); }

/* WhatsApp variant — brand-fit. Swaps stock WhatsApp green (#25D366) for Macro
   Market's own forest green with warm-sand text and a gold WA glyph, so it still
   reads as the recognizable WhatsApp action (green button + glyph) while sitting
   in the brand palette and popping off the sand Vision section. Matches the
   sand-on-dark treatment used by --navy/--dark buttons. */
.mm-btn--whatsapp {
  background: var(--mm-forest-green);
  color: var(--mm-warm-sand);
  box-shadow: 0 2px 1px rgba(31,63,54,0.10), 0 10px 22px -8px rgba(31,63,54,0.50);
}
.mm-btn--whatsapp:hover {
  background: #18332C; /* forest-green, deepened ~6% for the hover state */
  color: var(--mm-warm-sand);
  transform: translateY(-1px);
  box-shadow: 0 2px 1px rgba(31,63,54,0.12), 0 14px 28px -8px rgba(31,63,54,0.60);
}
.mm-btn--whatsapp .mm-btn__wa-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; color: var(--mm-gold-bright); }

/* Spacing for an inline CTA placed at the end of a statement body. */
.mm-statement__cta { margin-top: var(--sp-5); }
.mm-btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.mm-btn:hover .mm-btn__arrow { transform: translateX(4px); }

/* ---------- Articles archive ---------- */

.mm-articles-hero {
  position: relative;
  background: var(--mm-deep-navy);
  color: var(--fg-on-dark-1);
  padding-block: clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
.mm-articles-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231,216,196,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,216,196,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
  z-index: -1;
}
.mm-articles-hero__stamp {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: clamp(20px, 4vw, 56px);
  color: var(--fg-on-dark-3);
}
.mm-articles-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark-1);
  margin: var(--sp-5) 0 var(--sp-5);
  max-width: 18ch;
  text-wrap: balance;
}
.mm-articles-hero__lede {
  color: var(--fg-on-dark-2);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 60ch;
}

.mm-articles-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--mm-line);
  margin-bottom: var(--sp-7);
}
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg2);
  background: var(--bg1);
  border: 1px solid var(--mm-line);
  border-radius: var(--r-2);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.mm-chip:hover { color: var(--mm-deep-navy); border-color: var(--mm-line-strong); }
.mm-chip.is-active { background: var(--mm-deep-navy); color: var(--mm-warm-sand); border-color: var(--mm-deep-navy); }

.mm-articles-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .mm-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mm-articles-grid { grid-template-columns: repeat(3, 1fr); } }

.mm-article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border: 1px solid var(--mm-line);
  border-radius: var(--r-1);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
  box-shadow: var(--shadow-1);
}
.mm-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--mm-line-strong);
  box-shadow: var(--shadow-3);
}
.mm-article-card__media {
  aspect-ratio: 16/10;
  background: var(--mm-deep-navy);
  position: relative;
  overflow: hidden;
}
.mm-article-card__media img,
.mm-article-card__media .mm-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-xslow) var(--ease-out);
}
.mm-article-card:hover .mm-article-card__media img,
.mm-article-card:hover .mm-article-card__media .mm-placeholder { transform: scale(1.03); }
.mm-article-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,42,58,0.1) 0%, rgba(30,42,58,0.0) 45%, rgba(30,42,58,0.35) 100%);
  pointer-events: none;
}
.mm-placeholder {
  background:
    linear-gradient(135deg, rgba(46, 124, 137, 0.35), rgba(30, 42, 58, 0.0) 60%),
    linear-gradient(0deg, var(--mm-forest-green), var(--mm-deep-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-dark-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mm-article-card__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.mm-article-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}
.mm-article-card__cat {
  display: inline-block;
  padding: 3px 8px;
  background: var(--mm-forest-green);
  color: var(--mm-warm-sand);
  border-radius: 2px;
  font-weight: var(--w-bold);
}
.mm-article-card__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.mm-article-card__excerpt { color: var(--fg2); font-size: 15px; line-height: 1.55; flex: 1; }
.mm-article-card__cta {
  margin-top: var(--sp-5);
  font-family: var(--font-button);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--mm-deep-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mm-article-card__cta::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.mm-article-card:hover .mm-article-card__cta::after { transform: translateX(4px); }
.mm-article-card a { color: inherit; }
.mm-article-card a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Featured (first) article spans two columns on wide screens */
.mm-articles-grid .mm-article-card--featured {
  grid-column: span 1;
}
@media (min-width: 1080px) {
  .mm-articles-grid .mm-article-card--featured {
    grid-column: span 2;
    grid-row: span 1;
    display: grid;
    grid-template-columns: 6fr 6fr;
  }
  .mm-articles-grid .mm-article-card--featured .mm-article-card__media { aspect-ratio: auto; height: 100%; }
  .mm-articles-grid .mm-article-card--featured .mm-article-card__title { font-size: clamp(28px, 2.4vw, 36px); }
  .mm-articles-grid .mm-article-card--featured .mm-article-card__body { padding: var(--sp-7); }
}

/* Articles empty state */
.mm-articles-empty {
  padding: var(--sp-9) 0;
  text-align: center;
  color: var(--fg3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Single article ---------- */

.mm-article {
  background: var(--bg2);
  padding-block: clamp(56px, 7vw, 104px);
}
.mm-article__head {
  max-width: 920px;
  margin: 0 auto var(--sp-7);
  padding-inline: clamp(20px, 4vw, 56px);
}
.mm-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: var(--sp-5);
}
.mm-article__cat {
  display: inline-block;
  padding: 4px 10px;
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
  border-radius: 2px;
  font-weight: var(--w-bold);
}
.mm-article__title {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
.mm-article__lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--fg2); max-width: 60ch; }

.mm-article__cover {
  max-width: 1240px;
  margin: 0 auto var(--sp-7);
  padding-inline: clamp(20px, 4vw, 56px);
}
.mm-article__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-1);
}
.mm-article__body {
  max-width: 680px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 24px);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg2);
}
.mm-article__body p { margin: 0 0 1.2em; }
.mm-article__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 3.6em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.12em 0 0;
  color: var(--mm-midnight-blue);
}
.mm-article__body h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 2em 0 0.6em;
}
.mm-article__body h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  color: var(--fg1);
  margin: 1.8em 0 0.5em;
}
.mm-article__body blockquote {
  margin: 1.4em 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--mm-gold);
  background: var(--mm-off-white);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--mm-deep-navy);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.mm-article__body a { color: var(--mm-midnight-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mm-article__body a:hover { color: var(--mm-muted-teal); }
.mm-article__body ul, .mm-article__body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.mm-article__body li { margin-bottom: 0.5em; }
.mm-article__body img { max-width: 100%; height: auto; border-radius: var(--r-1); margin: 1.4em 0; }

.mm-article__footer {
  max-width: 680px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6) clamp(20px, 4vw, 24px) 0;
  border-top: 1px solid var(--mm-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.mm-article__back {
  font-family: var(--font-button);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--mm-deep-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mm-article__back::before { content: "←"; transition: transform var(--dur-fast) var(--ease-out); }
.mm-article__back:hover::before { transform: translateX(-4px); }

/* ---------- Responsive tweaks ---------- */

@media (max-width: 640px) {
  .mm-lang-toggle { top: 10px; right: 10px; font-size: 10px; padding: 5px 8px; }
  .mm-about-hero { padding-block: 96px 72px; }
  .mm-value-card { min-height: unset; }
}

/* ============================================================
   HEADER (mm-header) — navy sticky bar with utility strip,
   wordmark, primary nav, and cart/account icons.
   Replaces the empty bzotech header shell.
   ============================================================ */

/* Hide the parent theme's empty header shell (`#header.header-page`) since
   we render our own <header id="mm-header"> via the load-view filter. */
#header.header-page { display: none !important; }

.mm-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--mm-deep-navy);
  color: var(--fg-on-dark-1);
  border-bottom: 1px solid var(--mm-line-on-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
  font-family: var(--font-body);
}

.mm-header__strip {
  background: #17202D;
  border-bottom: 1px solid rgba(231,216,196,0.06);
}
.mm-header__strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 8px;
  gap: 16px;
}
.mm-header__stamp { font-size: 10px; letter-spacing: 0.14em; }
.mm-header__tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold-bright);
}
@media (max-width: 720px) { .mm-header__strip { display: none; } }

.mm-header__bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-block: 14px;
}
@media (max-width: 980px) {
  .mm-header__bar-inner { grid-template-columns: auto 1fr auto; gap: 12px; }
}

.mm-header__brand { display: inline-flex; align-items: center; height: 48px; flex: 0 0 auto; }
/* The logo must win over WooCommerce / WC Blocks CSS which loads after ours
   on shop pages and would otherwise let the image render at natural width.
   The horizontal lion lockup ships with its own dark plate, so we drop the
   sand chip and let it read as a self-contained badge on the navy bar. */
.mm-header .mm-header__brand img.mm-header__logo,
.mm-header__logo {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 260px !important;
  min-width: 0 !important;
  display: block !important;
  object-fit: contain;
  background: transparent;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
}

/* Primary nav list */
.mm-header__nav { min-width: 0; }
@media (max-width: 980px) { .mm-header__nav { display: none; } }

.mm-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  justify-content: center;
}
.mm-nav > li { position: relative; }
.mm-nav > li > a,
.mm-nav > li > span {
  display: inline-block;
  padding: 10px 0;
  color: var(--fg-on-dark-1);
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-standard);
  position: relative;
}
.mm-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--mm-gold);
  transition: right var(--dur-med) var(--ease-out);
}
.mm-nav > li > a:hover,
.mm-nav > li.current-menu-item > a,
.mm-nav > li.current_page_item > a { color: var(--mm-gold-bright); }
.mm-nav > li > a:hover::after,
.mm-nav > li.current-menu-item > a::after,
.mm-nav > li.current_page_item > a::after { right: 0; }

/* Submenus (dropdowns) */
.mm-nav li .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 220px;
  padding: 10px 0;
  background: var(--mm-deep-navy);
  border: 1px solid var(--mm-line-on-dark);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-on-dark);
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.mm-nav li:hover > .sub-menu,
.mm-nav li:focus-within > .sub-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-nav .sub-menu a {
  display: block;
  padding: 8px 18px;
  color: var(--fg-on-dark-2);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.mm-nav .sub-menu a:hover { color: var(--mm-gold-bright); background: rgba(231,216,196,0.05); }

/* Soporte — branded accent: the gold lion mark sits before the label. */
.mm-nav > li.mm-nav__support > a,
.mm-header__mobile .mm-nav > li.mm-nav__support > a { display: inline-flex; align-items: center; gap: 8px; }
.mm-nav > li.mm-nav__support > a::before {
  content: "";
  width: 18px;
  height: 16px;
  flex: 0 0 auto;
  background: url("../img/lion-mark.png") center / contain no-repeat;
}

/* Actions cluster */
.mm-header__actions { display: inline-flex; align-items: center; gap: 4px; }
.mm-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-2);
  color: var(--fg-on-dark-1);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  position: relative;
}
.mm-header__icon:hover { background: rgba(231,216,196,0.08); color: var(--mm-gold-bright); }
.mm-header__cart-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mm-gold);
  color: var(--mm-deep-navy);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Badge is always in the DOM (so WC can swap it as a cart fragment); hide it
   when the cart is empty. */
.mm-header__cart-count.is-empty { display: none; }
.mm-header__burger {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--mm-line-on-dark);
  border-radius: var(--r-2);
  padding: 0;
  color: var(--fg-on-dark-1);
  box-shadow: none;
  cursor: pointer;
}
.mm-header__burger span { display: block; width: 16px; height: 1.5px; background: currentColor; margin: 3px auto; transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
@media (max-width: 980px) { .mm-header__burger { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; } }

/* Mobile drawer */
.mm-header__mobile {
  background: #121C27;
  border-top: 1px solid var(--mm-line-on-dark);
  padding-block: 12px 20px;
}
.mm-header__mobile .mm-nav {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.mm-header__mobile .mm-nav > li > a {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(231,216,196,0.08);
}
.mm-header__mobile .mm-nav > li > a::after { display: none; }
.mm-header__mobile .sub-menu {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 0 8px 16px;
}
body.mm-menu-open { overflow: hidden; }

/* Push the fixed language toggle below the sticky header */
.mm-header + .mm-page .mm-lang-toggle,
.mm-lang-toggle { top: 120px; }

/* ============================================================
   FOOTER (mm-footer) — deep navy, 5-column grid with brand,
   nav, learn, contact, newsletter.
   ============================================================ */

/* Hide parent theme's empty footer shell. */
#footer.footer-page { display: none !important; }

.mm-footer {
  background: var(--mm-deep-navy);
  color: var(--fg-on-dark-2);
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--mm-line-on-dark);
}
.mm-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(46,124,137,0.14), transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 100%, rgba(111,75,168,0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.mm-footer a { color: var(--fg-on-dark-2); transition: color var(--dur-fast) var(--ease-standard); }
.mm-footer a:hover { color: var(--mm-gold-bright); }

.mm-footer__main { padding-block: clamp(56px, 7vw, 96px); }

.mm-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 760px) { .mm-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); } }
@media (min-width: 1180px) { .mm-footer__grid { grid-template-columns: 2.4fr 1fr 1fr 1fr 1.6fr; gap: var(--sp-7); } }

.mm-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.mm-footer__logo { display: inline-block; border-radius: var(--r-2); align-self: flex-start; margin-top: var(--sp-3); }
/* Same specificity/!important treatment as the header logo — WC Blocks CSS
   loads after and would otherwise blow the image up to container width.
   Horizontal lockup carries its own dark plate; no sand chip needed. */
.mm-footer .mm-footer__logo img,
.mm-footer__logo img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 300px !important;
  min-width: 0 !important;
  display: block !important;
  object-fit: contain;
  border-radius: var(--r-2);
}
.mm-footer__blurb {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-on-dark-2);
  margin: 0;
}
.mm-footer__social { display: flex; gap: 10px; margin-top: var(--sp-3); }
.mm-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--mm-line-on-dark);
  border-radius: var(--r-2);
  color: var(--fg-on-dark-2);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.mm-footer__social-link:hover { color: var(--mm-gold-bright); border-color: rgba(231,216,196,0.4); transform: translateY(-1px); }

.mm-footer__col .mm-eyebrow { margin-bottom: var(--sp-4); }
.mm-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-footer__col a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-on-dark-1);
}
.mm-footer__col a:hover { color: var(--mm-gold-bright); }

.mm-footer__col--wide { max-width: 380px; }
.mm-footer__letter { font-size: 14px; line-height: 1.55; margin: 0 0 var(--sp-4); color: var(--fg-on-dark-2); }
.mm-footer__form { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-footer__form input[type="email"] {
  flex: 1 1 180px;
  padding: 12px 14px;
  background: rgba(231,216,196,0.04);
  border: 1px solid var(--mm-line-on-dark);
  border-radius: var(--r-2);
  color: var(--fg-on-dark-1);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.mm-footer__form input[type="email"]::placeholder { color: var(--fg-on-dark-3); }
.mm-footer__form input[type="email"]:focus { outline: none; border-color: var(--mm-gold); background: rgba(231,216,196,0.06); }
.mm-footer__submit {
  background: var(--mm-warm-sand);
  color: var(--mm-deep-navy);
  border: 0;
  padding: 12px 16px;
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  border-radius: var(--r-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  box-shadow: none;
}
.mm-footer__submit:hover { background: var(--mm-gold-bright); color: var(--mm-deep-navy); transform: translateY(-1px); }

.mm-footer__base {
  border-top: 1px solid var(--mm-line-on-dark);
  padding-block: var(--sp-5);
  background: #161F2B;
}
.mm-footer__base-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.mm-footer__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-on-dark-3);
}
.mm-footer__copy-sep { margin-inline: 8px; opacity: 0.4; }
.mm-footer__legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; }
.mm-footer__legal a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
}
.mm-footer__legal a:hover { color: var(--mm-gold-bright); }

/* ============================================================
   SHIPPING POLICY PAGE (mm-policy)
   ============================================================ */
.mm-policy-steps { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }
.mm-policy-step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.mm-policy-step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mm-gold-bright);
  padding-top: 3px;
}
.mm-policy-step__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0 0 4px;
}
.mm-policy-step__body { color: var(--fg2); font-size: 15px; line-height: 1.55; margin: 0; }

.mm-policy-couriers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mm-policy-couriers li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-deep-navy);
  background: rgba(30, 42, 58, 0.06);
  border: 1px solid var(--mm-line-strong);
  border-radius: var(--r-2);
  padding: 9px 14px;
}

.mm-policy-table { border: 1px solid var(--mm-line); border-radius: var(--r-1); overflow: hidden; }
.mm-policy-table__head,
.mm-policy-table__row { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr; gap: 12px; padding: 16px 20px; }
.mm-policy-table__head {
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mm-policy-table__row { border-top: 1px solid var(--mm-line); background: var(--bg1); font-size: 15px; color: var(--fg1); }
.mm-policy-table__row span:first-child { font-weight: 600; }
.mm-policy-table__row span:last-child { font-family: var(--font-mono); color: var(--mm-deep-navy); }
@media (max-width: 640px) {
  .mm-policy-table__head { display: none; }
  .mm-policy-table__row { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
  .mm-policy-table__row span::before {
    content: attr(data-label) " — ";
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg3);
  }
}

/* ============================================================
   SUPPORT PAGE (mm-support)
   ============================================================ */
.mm-support-channels { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 680px)  { .mm-support-channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mm-support-channels { grid-template-columns: repeat(4, 1fr); } }

.mm-support-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-5);
  background: var(--bg1);
  border: 1px solid var(--mm-line);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
  color: var(--fg1);
}
a.mm-support-card:hover { transform: translateY(-3px); border-color: var(--mm-line-strong); box-shadow: var(--shadow-3); }
.mm-support-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
  margin-bottom: var(--sp-3);
}
.mm-support-card--wa .mm-support-card__icon { background: #25D366; color: #0B3D23; }
.mm-support-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
}
.mm-support-card__value { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 17px; color: var(--fg1); }
.mm-support-card__desc { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.mm-support-card__cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--font-button);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--mm-deep-navy);
  font-weight: var(--w-bold);
}
.mm-support-card--static { box-shadow: none; background: transparent; border-style: dashed; }

.mm-support-forms { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 920px) { .mm-support-forms { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.mm-support-form {
  background: var(--bg1);
  border: 1px solid var(--mm-line);
  border-radius: var(--r-1);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-1);
}
.mm-support-form--ticket { border-top: 3px solid var(--mm-gold); }
.mm-support-form__head {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 12px 0 8px;
}
.mm-support-form__note { color: var(--fg2); font-size: 15px; line-height: 1.55; margin: 0 0 var(--sp-5); }
.mm-support-form__fallback { color: var(--fg2); font-size: 15px; }
.mm-support-form__ship {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-button);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--mm-midnight-blue);
}

/* Contact Form 7 fields inside the support forms */
.mm-support-form .wpcf7-form-control-wrap { display: block; }
.mm-support-form label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); margin: 0 0 6px; }
.mm-support-form p { margin: 0 0 var(--sp-4); }
.mm-support-form input[type="text"],
.mm-support-form input[type="email"],
.mm-support-form input[type="tel"],
.mm-support-form select,
.mm-support-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--mm-line-strong);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg1);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mm-support-form textarea { min-height: 130px; resize: vertical; }
.mm-support-form input:focus,
.mm-support-form select:focus,
.mm-support-form textarea:focus { outline: none; border-color: var(--mm-deep-navy); box-shadow: 0 0 0 3px rgba(30,42,58,0.10); }
.mm-support-form .wpcf7-submit {
  width: 100%;
  margin-top: 4px;
  background: var(--mm-deep-navy);
  color: var(--mm-warm-sand);
}
.mm-support-form .wpcf7-submit:hover { background: var(--mm-midnight-blue); }
.mm-support-form--ticket .wpcf7-submit { background: var(--mm-forest-green); }
.mm-support-form .wpcf7-response-output { border-radius: var(--r-2); font-size: 14px; margin: var(--sp-3) 0 0; }

/* Floating WhatsApp chat widget */
.mm-wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 18px;
  background: #25D366;
  color: #0B3D23;
  border-radius: 999px;
  box-shadow: 0 10px 28px -8px rgba(11,61,35,0.55), 0 2px 6px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mm-wa-fab:hover { transform: translateY(-2px); color: #0B3D23; box-shadow: 0 16px 36px -10px rgba(11,61,35,0.6); }
.mm-wa-fab svg { flex: 0 0 auto; }
.mm-wa-fab__label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: max-width var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard), margin var(--dur-med) var(--ease-standard);
}
.mm-wa-fab:hover .mm-wa-fab__label { max-width: 180px; opacity: 1; margin-left: 10px; }
@media (max-width: 640px) { .mm-wa-fab { height: 54px; padding: 0 15px; } }

/* ============================================================
   HOMEPAGE PRODUCT SLIDERS — uniform card sizing & alignment.
   Scoped to .elbzotech-wrapper-slider-product so it covers BOTH the
   tabbed "Recien Llegados / Los mejores / Ofertas" carousel and the
   "Ultimos Productos" slider, without touching shop/category grids.
   ============================================================ */
.elbzotech-wrapper-slider-product .swiper-slide { height: auto; }
/* No card border — image, title, price and rating are centered as one unit. */
.elbzotech-wrapper-slider-product .item-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* Thumbnail: fixed square, light rounded panel; image always contained + centered
   so every card's image occupies the same box regardless of source dimensions. */
.elbzotech-wrapper-slider-product .item-product .product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 0;
  background: #f5f5f5;
  border-radius: var(--r-1);
  overflow: hidden;
}
.elbzotech-wrapper-slider-product .product-thumb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px;
  box-sizing: border-box;
}
.elbzotech-wrapper-slider-product .product-thumb-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Info: centered column that grows so all cards stay equal height.
   (3-class selector beats the theme's `.item-grid-product- .item-product
   .product-info { padding:15px 0 0 0 }`, which was pinning content flush-left.) */
.elbzotech-wrapper-slider-product .item-product .product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  padding: 16px 12px 0;
  gap: 6px;
  text-align: center;
}
/* Category tags: one tidy centered line. */
.elbzotech-wrapper-slider-product .product-info .product-category-single-top {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin: 0;
}
.elbzotech-wrapper-slider-product .product-info .product-category-single-top a { color: inherit; }
/* Title: clamp to 2 lines with a fixed height so titles + prices line up. */
.elbzotech-wrapper-slider-product .product-info .product-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: 15px;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.elbzotech-wrapper-slider-product .product-info .product-title a { color: var(--fg1); }
/* Price + rating centered and pinned toward the bottom so they align across the row. */
.elbzotech-wrapper-slider-product .product-info > .flex-wrapper {
  margin-top: auto;
  justify-content: center;
  width: 100%;
}
.elbzotech-wrapper-slider-product .product-price,
.elbzotech-wrapper-slider-product .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--mm-deep-navy);
}
.elbzotech-wrapper-slider-product .product-info .wrap-rating {
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
/* Hide the stray duplicate compare link rendered at the bottom of each card. */
.elbzotech-wrapper-slider-product .item-product > a.compare-link { display: none; }
/* On-brand "Nuevo" badge chip. */
.elbzotech-wrapper-slider-product .product-label { z-index: 3; }
.elbzotech-wrapper-slider-product .product-label .new {
  display: inline-block;
  background: var(--mm-forest-green);
  color: var(--mm-warm-sand);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}

/* ============================================================
   ULTIMOS ARTICULOS — uniform article image sizes.
   The two banner images have very different native ratios
   (3024x4032 portrait vs 1000x1000 square); crop both to one box.
   ============================================================ */
.elementor-element-7ba093a3 .elbzotech-banner-info-global-thumb,
.elementor-element-12444cfb .elbzotech-banner-info-global-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-1);
}
.elementor-element-7ba093a3 .elbzotech-banner-info-global-thumb .adv-thumb-link,
.elementor-element-12444cfb .elbzotech-banner-info-global-thumb .adv-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}
.elementor-element-7ba093a3 .elbzotech-banner-info-global-thumb img,
.elementor-element-12444cfb .elbzotech-banner-info-global-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* ============================================================
   MACRO MARKET — Alianzas page (allies grid)
   ============================================================ */
.mm-allies {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 700px)  { .mm-allies { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mm-allies { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
.mm-ally {
  background: #fff;
  border: 1px solid var(--mm-line, rgba(30,42,58,0.12));
  border-radius: var(--r-3, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mm-ally:hover { transform: translateY(-3px); border-color: var(--mm-line-strong, rgba(30,42,58,0.28)); box-shadow: var(--shadow-3, 0 12px 24px rgba(0,0,0,0.06)); }
.mm-ally__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mm-ally__logo {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-warm-sand, #E7D8C4);
  padding: 18px;
}
.mm-ally__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mm-ally__placeholder { opacity: 0.45; }
.mm-ally__meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.mm-ally__name { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 15px; color: var(--fg1); letter-spacing: 0.02em; }
.mm-ally__type { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg3); }

/* ============================================================
   MACRO MARKET — Patrocinios page (4-step process + form)
   ============================================================ */
.mm-process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 700px)  { .mm-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mm-process { grid-template-columns: repeat(4, 1fr); } }
.mm-process__step {
  background: #fff;
  border: 1px solid var(--mm-line, rgba(30,42,58,0.12));
  border-radius: var(--r-3, 12px);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}
.mm-process__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold, #C9A565);
  font-weight: 700;
}
.mm-process__body h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 20px;
  color: var(--fg1);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.mm-process__body p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* Contacto + Patrocinios — native HTML form styling */
.mm-contacto-form,
.mm-patro-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.mm-contacto-form label,
.mm-patro-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
}
.mm-contacto-form input,
.mm-contacto-form textarea,
.mm-patro-form input,
.mm-patro-form select,
.mm-patro-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg1);
  background: #fff;
  border: 1px solid var(--mm-line, rgba(30,42,58,0.18));
  border-radius: var(--r-2, 8px);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mm-contacto-form input:focus,
.mm-contacto-form textarea:focus,
.mm-patro-form input:focus,
.mm-patro-form select:focus,
.mm-patro-form textarea:focus {
  outline: none;
  border-color: var(--accent-primary, #2F588C);
  box-shadow: 0 0 0 3px rgba(47, 88, 140, 0.15);
}
.mm-contacto-form textarea,
.mm-patro-form textarea { min-height: 110px; resize: vertical; }
.mm-patro-form__check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
}
.mm-patro-form__check input { width: auto; }
.mm-contacto-form button,
.mm-patro-form button { align-self: flex-start; margin-top: var(--sp-3); }

/* ============================================================
   Alianzas page — visibility / on-brand pass (2026-06-09)
   ============================================================ */

/* The .mm-value-card "compromisos" cards are designed for a DARK section
   (on-dark sand/white text + near-transparent fill). On Alianzas they sit in a
   LIGHT section, so the text was nearly invisible. Recolor them for light here
   (scoped to .mm-alianzas so the homepage's dark value cards are untouched). */
.mm-alianzas .mm-value-card,
.mm-patrocinios .mm-value-card {
  background: #fff;
  border-color: var(--mm-line, rgba(30,42,58,0.12));
}
.mm-alianzas .mm-value-card:hover,
.mm-patrocinios .mm-value-card:hover {
  background: #fff;
  border-color: var(--mm-line-strong, rgba(30,42,58,0.28));
}
.mm-alianzas .mm-value-card__num,
.mm-patrocinios .mm-value-card__num   { color: var(--mm-gold, #C9A24A); }
.mm-alianzas .mm-value-card__title,
.mm-patrocinios .mm-value-card__title { color: var(--fg1, #1E2A3A); }
.mm-alianzas .mm-value-card__body,
.mm-patrocinios .mm-value-card__body  { color: var(--fg2, #4A5568); }

/* The brand CTA buttons (.mm-cta / --primary / --ghost) used in the CTA band
   were never defined — they rendered as plain links. Define them. The CTA band
   sits on the forest-green background, so primary = warm-sand fill / navy text,
   ghost = sand outline. */
.mm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-display, 'Unbounded', sans-serif);
  font-weight: var(--w-bold, 700);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-med, .15s) var(--ease-standard, ease),
              background var(--dur-med, .15s) var(--ease-standard, ease),
              color var(--dur-med, .15s) var(--ease-standard, ease),
              border-color var(--dur-med, .15s) var(--ease-standard, ease);
}
.mm-cta:hover { transform: translateY(-1px); }
/* Defaults (light backgrounds, e.g. the Patrocinios application form). */
.mm-cta--primary {
  background: var(--mm-deep-navy, #1E2A3A);
  color: #fff;
  border-color: var(--mm-deep-navy, #1E2A3A);
}
.mm-cta--primary:hover { background: var(--mm-midnight, #2F588C); border-color: var(--mm-midnight, #2F588C); }
.mm-cta--ghost {
  background: transparent;
  color: var(--mm-deep-navy, #1E2A3A);
  border-color: var(--mm-line-strong, rgba(30,42,58,0.28));
}
.mm-cta--ghost:hover { background: rgba(30,42,58,0.05); }
/* On the forest-green CTA band, flip to warm-sand so they pop on the dark bg. */
.mm-cta-band .mm-cta--primary {
  background: var(--mm-warm-sand, #E7D8C4);
  color: var(--mm-deep-navy, #1E2A3A);
  border-color: var(--mm-warm-sand, #E7D8C4);
}
.mm-cta-band .mm-cta--primary:hover { background: #fff; border-color: #fff; }
.mm-cta-band .mm-cta--ghost {
  background: transparent;
  color: var(--mm-warm-sand, #E7D8C4);
  border-color: rgba(231, 216, 196, 0.5);
}
.mm-cta-band .mm-cta--ghost:hover {
  background: rgba(231, 216, 196, 0.12);
  border-color: var(--mm-warm-sand, #E7D8C4);
  color: #fff;
}

/* ============================================================
   MACRO MARKET — Newsletter (homepage Elementor html widget)
   ============================================================ */

/* The newsletter container (#3d61902f) inherits the orange fitrush stock
   background (bgr-section-2-scaled.webp). Lay a brand forest-green overlay
   over it so the band reads on-brand green instead of orange. The ::before
   sits above the element's own background image but below the in-flow
   content (negative z-index inside an isolated stacking context), so the
   heading + form stay fully legible. */
.elementor-element-3d61902f {
  position: relative;
  isolation: isolate;
}
.elementor-element-3d61902f::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mm-forest-green, #1F3F36);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

.mm-home-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.mm-home-newsletter__row {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.mm-home-newsletter input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mm-deep-navy, #1E2A3A);
  background: #fff;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--r-2, 8px);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mm-home-newsletter input[type="email"]::placeholder { color: var(--mm-ink-300, #9AA1AB); }
.mm-home-newsletter input[type="email"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--mm-gold, #C9A565);
  box-shadow: 0 0 0 3px rgba(201,162,74,0.30);
}
.mm-home-newsletter__submit {
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-deep-navy, #1E2A3A);
  background: var(--mm-gold, #C9A565);
  border: 0;
  border-radius: var(--r-2, 8px);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.mm-home-newsletter__submit:hover:not(:disabled) { background: #DBB97A; transform: translateY(-1px); }
.mm-home-newsletter__submit:disabled { opacity: 0.6; cursor: wait; }
.mm-subscribe-form__status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(231,216,196,0.85);
  margin: 0;
  min-height: 1em;
}
.mm-subscribe-form--done .mm-home-newsletter__submit { background: #6EC07A; color: #0B3D23; }