/*
Theme Name: Macro Friendly Food
Theme URI: https://macrofriendlyfood.com
Author: Macro Friendly Food
Author URI: https://macrofriendlyfood.com
Description: Custom blank block theme for Macro Friendly Food. Built for Full Site Editing with WooCommerce.
Version: 1.5.80
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: mff-theme
*/

/* ============================================================
   CUSTOM FONTS
   Files live in /wp-content/themes/mff-theme/fonts/
   ============================================================ */

@font-face {
  font-family: 'Heavitas';
  src: url('fonts/heavitas.woff2') format('woff2'),
       url('fonts/heavitas.woff')  format('woff'),
       url('fonts/Heavitas.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/helvetica-light.woff2') format('woff2'),
       url('fonts/helvetica-light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/helvetica-regular.woff2') format('woff2'),
       url('fonts/helvetica-regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/helvetica-bold.woff2') format('woff2'),
       url('fonts/helvetica-bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS (mirrors theme.json for use in raw CSS)
   ============================================================ */
:root {
  --mff-red:          #F24F48;
  --mff-red-dark:     #C73C36;
  --mff-black:        #1D1D1D;
  --mff-off-white:    #F4F2EF;
  --mff-white:        #FFFFFF;
  --mff-border:       #E2DFDB;
  --mff-border-dark:  #C8C4BE;
  --mff-text:         #1D1D1D;
  --mff-text-muted:   #5F5F5F;
  --mff-text-faint:   #888888;
  --mff-surface:      #FFFFFF;
  --mff-font-display: 'Heavitas', 'Arial Black', sans-serif;
  --mff-font-body:    'EB Garamond', Georgia, serif;
}

/* ============================================================
   GLOBAL RESETS
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--mff-off-white);
  color: var(--mff-text);
  font-family: var(--mff-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--mff-red);
  text-decoration: none;
}

a:hover {
  color: var(--mff-red-dark);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2 {
  font-family: var(--mff-font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--mff-text);
}

h3, h4, h5, h6 {
  font-family: var(--mff-font-body);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--mff-text);
}

p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mff-text-muted);
}

p:last-child {
  margin-bottom: 0;
}

/* Eyebrow label — used above section headings */
.mff-eyebrow {
  display: block;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
  display: inline-block;
  background-color: var(--mff-red);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: center;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--mff-red-dark);
  color: #fff !important;
}

/* Secondary / outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--mff-text) !important;
  border: 1.5px solid var(--mff-border-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--mff-off-white);
}

/* Ghost button — for use on dark backgrounds */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: rgba(255,255,255,0.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Full-width button */
.wp-block-button.is-style-full-width {
  display: block;
}

.wp-block-button.is-style-full-width .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
}

/* ============================================================
   SECTIONS — shared section styles
   ============================================================ */
.mff-section {
  padding: 48px 24px;
}

.mff-section--dark {
  background-color: var(--mff-black);
  color: #fff;
}

.mff-section--dark h1,
.mff-section--dark h2,
.mff-section--dark h3 {
  color: #fff;
}

.mff-section--dark p {
  color: rgba(255,255,255,0.65);
}

.mff-section--white {
  background-color: var(--mff-white);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.wp-block-navigation {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 500;
}

.wp-block-navigation a {
  color: var(--mff-text);
  text-decoration: none;
  transition: color 0.1s ease;
}

.wp-block-navigation a:hover {
  color: var(--mff-red);
}

/* Nav dropdown */
.wp-block-navigation__submenu-container {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 6px;
  min-width: 180px;
}

.wp-block-navigation__submenu-container a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.wp-block-navigation__submenu-container a:hover {
  background: var(--mff-off-white);
  color: var(--mff-red);
}

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--mff-text);
}

/* Mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--mff-white);
  padding: 24px;
}

/* ============================================================
   WOOCOMMERCE — global styles to match new theme
   ============================================================ */

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt {
  background-color: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 10px;
  border: none;
  transition: background-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
  background-color: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Form inputs */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  font-family: var(--mff-font-body);
  font-size: 13px;
  border: 1px solid var(--mff-border);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--mff-text);
  background: var(--mff-white);
  transition: border-color 0.15s ease;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus {
  border-color: var(--mff-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242,79,72,0.1);
}

/* Product titles */
.woocommerce .products .product .woocommerce-loop-product__title,
.woocommerce h1.product_title {
  font-family: var(--mff-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mff-text);
}

/* Prices */
.woocommerce .price,
.woocommerce .amount {
  font-family: var(--mff-font-display);
  font-size: 28px;
  color: var(--mff-text);
  letter-spacing: 0.02em;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--mff-red);
  color: #fff;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  min-width: auto;
  padding: 4px 8px;
  line-height: 1.4;
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--mff-red);
  font-family: var(--mff-font-body);
  font-size: 13px;
}

/* Cart table */
.woocommerce table.shop_table {
  font-family: var(--mff-font-body);
  font-size: 13px;
  border: 1px solid var(--mff-border);
  border-radius: 12px;
  overflow: hidden;
}

/* ============================================================
   HTML BLOCKS — shared styles for custom HTML sections
   These power the stat strip, trust bar, pricing table,
   social proof cards, and addon price cards.
   ============================================================ */

/* Stat strip */
.mff-stat-strip {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: var(--mff-off-white);
  border-bottom: 1px solid var(--mff-border);
  padding: 20px 24px;
}

.mff-stat-item {
  text-align: center;
  flex: 1;
}

.mff-stat-num {
  font-family: var(--mff-font-display);
  font-size: 32px;
  color: var(--mff-text);
  letter-spacing: 0.02em;
  line-height: 1;
}

.mff-stat-num em {
  color: var(--mff-red);
  font-style: normal;
}

.mff-stat-label {
  font-size: 13px;
  color: var(--mff-text-faint);
  margin-top: 4px;
  line-height: 1.3;
}

.mff-stat-divider {
  width: 1px;
  background: var(--mff-border);
  margin: 4px 0;
}

/* Trust bar */
.mff-trust-bar {
  background: var(--mff-white);
  border-bottom: 1px solid var(--mff-border);
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mff-trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--mff-text);
}

.mff-trust-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mff-red);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}

/* Pricing table */
.mff-pricing-card {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-radius: 14px;
  overflow: hidden;
}

.mff-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #F0EDE9;
}

.mff-pricing-row:last-child {
  border-bottom: none;
}

.mff-pricing-row--featured {
  background: #FFF6F6;
}

.mff-pr-name {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-text);
}

.mff-pr-sub {
  font-size: 13px;
  color: var(--mff-text-faint);
  margin-top: 2px;
}

.mff-pr-price {
  font-family: var(--mff-font-display);
  font-size: 24px;
  color: var(--mff-text);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: right;
}

.mff-pr-period {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: var(--mff-text-faint);
  font-weight: 400;
}

.mff-pr-save {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-red);
  margin-top: 2px;
  text-align: right;
}

.mff-best-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  background: var(--mff-red);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mff-pricing-fine {
  font-size: 13px;
  color: var(--mff-text-faint);
  text-align: center;
  margin-top: 10px;
}

/* Social proof cards */
.mff-proof-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mff-proof-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 16px;
}

.mff-proof-stars {
  color: #F5A623;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.mff-proof-quote {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 10px;
  border-left: 3px solid var(--mff-red);
  padding-left: 12px;
}

.mff-proof-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mff-proof-attr {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.mff-proof-tag {
  font-family: var(--mff-font-body);
  font-size: 9px;
  font-weight: 600;
  background: rgba(242,79,72,0.15);
  color: var(--mff-red);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Addon price cards */
.mff-addon-prices {
  display: flex;
  gap: 10px;
}

.mff-addon-price-card {
  flex: 1;
  background: var(--mff-off-white);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--mff-border);
}

.mff-addon-price-card--featured {
  background: #FFF6F6;
  border-color: var(--mff-red);
}

.mff-apc-price {
  font-family: var(--mff-font-display);
  font-size: 26px;
  color: var(--mff-text);
  letter-spacing: 0.02em;
  line-height: 1;
}

.mff-apc-period {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: var(--mff-text-faint);
}

.mff-apc-label {
  font-size: 13px;
  color: var(--mff-text-muted);
  margin-top: 4px;
}

.mff-apc-save {
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-red);
  margin-top: 2px;
}

/* Social proof pill (hero) */
.mff-proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.mff-proof-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mff-red);
  flex-shrink: 0;
}

.mff-proof-pill-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

/* Hero bullet points */
.mff-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mff-hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
}

.mff-hero-points li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mff-red);
  flex-shrink: 0;
}

/* Trial note */
.mff-trial-note {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-top: 10px;
}

.mff-trial-note--light {
  color: var(--mff-text-faint);
}

/* ============================================================
   WOOCOMMERCE — MY ACCOUNT PAGE
   ============================================================ */

/* ============================================================
   MY ACCOUNT — logged in layout
   ============================================================ */

/* Outer container — full width card with border */
.woocommerce-account.logged-in .woocommerce,
body.woocommerce-account .woocommerce {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: flex-start !important;
  padding: 0 !important;
  max-width: 1100px !important;
  margin: 40px auto !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
}

/* Nav column — left sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 220px !important;
  min-width: 220px !important;
  flex-shrink: 0 !important;
  padding: 28px 0 !important;
  border-right: 1px solid var(--mff-border) !important;
  min-height: 500px !important;
  background: var(--mff-white) !important;
}

/* Content column */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 32px 40px !important;
  background: var(--mff-white) !important;
}

/* Content headings — spacing between sections */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  margin-top: 36px !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
}

/* First heading — no extra top margin */
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child,
.woocommerce-account .woocommerce-MyAccount-content > *:first-child h2,
.woocommerce-account .woocommerce-MyAccount-content > *:first-child h3 {
  margin-top: 0 !important;
}

/* Paragraphs in account content */
.woocommerce-account .woocommerce-MyAccount-content p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

/* "No saved methods found" text — spacing above button */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .wc-forward {
  margin-bottom: 16px !important;
  display: block !important;
}

.woocommerce-account .woocommerce-MyAccount-content > p + .button,
.woocommerce-account .woocommerce-MyAccount-content > p + a.button {
  margin-top: 16px !important;
  display: inline-block !important;
}

/* Nav list — exact selectors matching WooCommerce markup */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.woocommerce-MyAccount-navigation ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

/* Remove bullet markers entirely */
.woocommerce-MyAccount-navigation ul li::before,
.woocommerce-MyAccount-navigation ul li::marker {
  display: none !important;
  content: none !important;
}

.woocommerce-MyAccount-navigation-link a {
  display: block !important;
  padding: 9px 14px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  border-radius: 8px !important;
  transition: background 0.1s ease, color 0.1s ease !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.woocommerce-MyAccount-navigation-link a:hover {
  background: var(--mff-off-white) !important;
  color: var(--mff-text) !important;
}

.woocommerce-MyAccount-navigation-link.is-active a {
  background: #FFF0EF !important;
  color: var(--mff-red) !important;
  font-weight: 600 !important;
}

/* Account content typography */
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content table {
  font-family: var(--mff-font-body);
  font-size: 13px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--mff-font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mff-text);
  margin-bottom: 16px;
}

/* Subscription/order tables */
.woocommerce-account table.shop_table {
  width: 100%;
  border: 1px solid var(--mff-border);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: collapse;
}

.woocommerce-account table.shop_table th {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mff-text-faint);
  padding: 12px 16px;
  background: var(--mff-off-white);
  border-bottom: 1px solid var(--mff-border);
  text-align: left;
}

.woocommerce-account table.shop_table td {
  font-size: 13px;
  color: var(--mff-text);
  padding: 12px 16px;
  border-bottom: 1px solid #F0EDE9;
  vertical-align: middle;
}

.woocommerce-account table.shop_table tr:last-child td {
  border-bottom: none;
}

/* Account nav items — compact, matches production */
.woocommerce-MyAccount-navigation-link a {
  display: block !important;
  padding: 7px 10px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mff-text-muted) !important;
  border-radius: 6px !important;
  transition: color 0.1s ease !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
}

.woocommerce-MyAccount-navigation-link a:hover {
  color: var(--mff-text) !important;
  background: transparent !important;
}

.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--mff-red) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Account content headings */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--mff-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--mff-text) !important;
  margin-bottom: 20px !important;
}

/* Tables — cleaner, matches production */
.woocommerce-account table.shop_table {
  width: 100% !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
}

.woocommerce-account table.shop_table th {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--mff-border) !important;
  text-align: left !important;
  background: transparent !important;
}

.woocommerce-account table.shop_table td {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--mff-border) !important;
  vertical-align: middle !important;
}

.woocommerce-account table.shop_table tr:last-child td {
  border-bottom: none !important;
}

.woocommerce-account table.shop_table .button {
  font-size: 13px !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Subscription detail tables — spacing between info table and totals */
.woocommerce-account .woocommerce-MyAccount-content table + h2,
.woocommerce-account .woocommerce-MyAccount-content table + h3,
.woocommerce-account .subscription_details + h2,
.woocommerce-account .woocommerce-table--order-details {
  margin-top: 32px !important;
}

/* Payment methods — space between message and button */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  display: block !important;
  padding: 14px 16px !important;
  background: var(--mff-off-white) !important;
  border-left: 3px solid var(--mff-red) !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  margin-bottom: 20px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
  display: none !important;
}

/* Password show/hide button fix */
.woocommerce-Input__showpassword,
button.woocommerce-Input__showpassword {
  all: unset !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

.woocommerce-Input__showpassword:hover {
  color: var(--mff-text) !important;
  border-color: var(--mff-text-muted) !important;
}

/* Mobile: stack nav above content */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--mff-border) !important;
    padding: 20px 16px !important;
    min-height: unset !important;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .woocommerce-MyAccount-navigation-link a {
    padding: 6px 10px !important;
    font-size: 14px !important;
    background: var(--mff-off-white) !important;
    border-radius: 6px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 24px 16px !important;
  }
}

/* ============================================================
   WOOCOMMERCE — SHOP / PRODUCT ARCHIVE
   ============================================================ */

/* ============================================================
   WOOCOMMERCE BLOCK PRODUCT GRID
   Shop uses wp-block-post-title and wc/product-collection
   blocks — completely different selectors from classic shop.
   ============================================================ */

/* Product card container */
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product,
li.wc-block-product {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease !important;
}

.wc-block-product-template .wc-block-product:hover,
li.wc-block-product:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* Product title — wp-block-post-title inside product cards */
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a,
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a {
  font-family: var(--mff-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  color: var(--mff-text) !important;
  text-decoration: none !important;
  margin: 10px 0 6px !important;
  display: block !important;
}

.wc-block-product .wp-block-post-title a:hover,
li.wc-block-product .wp-block-post-title a:hover {
  color: var(--mff-red) !important;
}

/* Product image — constrain height, no overflow */
.wc-block-product .wc-block-woocommerce-product-image,
.wc-block-product .wp-block-woocommerce-product-image,
li.wc-block-product img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
  overflow: hidden !important;
}

/* Price */
.wc-block-product .price,
.wc-block-product .wc-block-components-product-price,
li.wc-block-product .price {
  font-family: var(--mff-font-display) !important;
  font-size: 22px !important;
  color: var(--mff-text) !important;
  letter-spacing: 0.02em !important;
  display: block !important;
  margin: 6px 0 12px !important;
}

.wc-block-product .price .woocommerce-Price-amount,
li.wc-block-product .woocommerce-Price-amount {
  font-family: var(--mff-font-display) !important;
  font-size: 22px !important;
  color: var(--mff-text) !important;
}

/* Also keep classic shop selectors for any non-block pages */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--mff-text) !important;
  font-family: var(--mff-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
}

.woocommerce ul.products li.product {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  padding: 32px 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px 16px !important;
  }

  .wc-block-product img,
  .woocommerce ul.products li.product a img {
    height: 160px !important;
  }
}

/* ============================================================
   LOGO — left aligned, never centered
   ============================================================ */
.wp-block-site-logo {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
}

.wp-block-site-logo img {
  display: block !important;
  margin: 0 !important;
  height: 36px !important;
  width: auto !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

/* The card itself — centered, no flex on body */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 460px !important;
  width: 100% !important;
  margin: 60px auto !important;
  padding: 40px !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  display: block !important;
  flex: none !important;
}

/* Login heading — above the form fields */
.woocommerce-form-login > h2,
.woocommerce-account:not(.logged-in) h2 {
  font-family: var(--mff-font-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin: 0 0 28px !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

/* Form rows */
.woocommerce-form-login .woocommerce-form-row {
  margin-bottom: 16px !important;
  display: block !important;
  width: 100% !important;
}

.woocommerce-form-login label {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"] {
  width: 100% !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  border: 1.5px solid var(--mff-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--mff-text) !important;
  background: var(--mff-off-white) !important;
  transition: border-color 0.15s ease !important;
  box-sizing: border-box !important;
  display: block !important;
}

.woocommerce-form-login input:focus {
  border-color: var(--mff-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(242,79,72,0.1) !important;
  background: var(--mff-white) !important;
}

/* Show password button — inline beside field */
.woocommerce-Input__showpassword,
button.woocommerce-Input__showpassword,
.woocommerce-form-login .woocommerce-Input__showpassword {
  all: unset !important;
  display: inline-block !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  line-height: 1.4 !important;
  margin-top: 6px !important;
  vertical-align: middle !important;
}

.woocommerce-Input__showpassword:hover {
  color: var(--mff-text) !important;
  border-color: var(--mff-text-muted) !important;
}

/* Remember me row */
.woocommerce-form-login .woocommerce-form__input-checkbox {
  margin-right: 6px !important;
}

/* Login button — full width */
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-login button[type="submit"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 20px !important;
  padding: 14px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* Lost password link */
.woocommerce-LostPassword,
.woocommerce-form-login .lost_password {
  text-align: center !important;
  margin-top: 16px !important;
  display: block !important;
}

.woocommerce-LostPassword a,
.woocommerce-form-login .lost_password a {
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  text-decoration: underline !important;
}

.woocommerce-LostPassword a:hover,
.woocommerce-form-login .lost_password a:hover {
  color: var(--mff-red) !important;
}

/* ============================================================
   PRODUCT IMAGES — natural height, no cropping
   ============================================================ */

/* Block-based product grid image wrapper */
.wc-block-product .wc-block-woocommerce-product-image,
.wc-block-product figure,
li.wc-block-product figure {
  overflow: hidden !important;
  border-radius: 10px !important;
  margin: 0 0 12px !important;
  display: block !important;
  width: 100% !important;
  background: var(--mff-off-white) !important;
}

/* Images — show full image, no cropping */
.wc-block-product figure img,
li.wc-block-product figure img,
.wc-block-product img.attachment-woocommerce_thumbnail,
li.wc-block-product img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}

/* Larger product cards — fewer per row */
.wc-block-product-template,
.wp-block-woocommerce-product-template {
  gap: 24px !important;
}

li.wc-block-product {
  padding: 20px !important;
}
.mff-app-badge {
  display: inline-block;
  transition: opacity 0.15s ease;
}

.mff-app-badge:hover {
  opacity: 0.85;
}

.mff-app-badge img {
  height: 44px;
  width: auto;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.mff-text-center { text-align: center; }
.mff-text-red    { color: var(--mff-red); }
.mff-text-white  { color: #fff; }
.mff-text-muted  { color: var(--mff-text-faint); }

.mff-bg-dark     { background-color: var(--mff-black); }
.mff-bg-white    { background-color: var(--mff-white); }
.mff-bg-offwhite { background-color: var(--mff-off-white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .mff-stat-num { font-size: 26px; }
  .mff-section  { padding: 32px 16px; }

  .wp-block-navigation:not(.has-background)
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

@media (min-width: 768px) {
  .mff-trust-bar {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .mff-proof-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ============================================================
   FIX 1: PAYMENT METHODS — block notice + button spacing
   ============================================================ */

.wc-block-components-notice-banner,
.wc-block-components-notice-banner__content {
  display: block !important;
  margin-bottom: 20px !important;
  padding: 14px 16px !important;
  background: var(--mff-off-white) !important;
  border-left: 3px solid var(--mff-red) !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
}

/* Ensure button after notice has top space */
.wc-block-components-notice-banner + a.button,
.wc-block-components-notice-banner ~ a.button,
.woocommerce-MyAccount-content a.button {
  margin-top: 16px !important;
  display: inline-block !important;
}

/* ============================================================
   FIX 2: PRODUCT IMAGES — taller cards, full image visible
   ============================================================ */

/* Let images determine card height naturally */
li.wc-block-product figure img,
.wc-block-product figure img,
.wc-block-product img.attachment-woocommerce_thumbnail,
li.wc-block-product img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: auto !important;
  min-height: 240px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px !important;
  background: var(--mff-off-white) !important;
}

/* Pagination — brand colors and spacing */
.wc-block-pagination,
.woocommerce-pagination,
nav.woocommerce-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 32px 0 16px !important;
  width: 100% !important;
}

.wc-block-pagination ul,
.woocommerce-pagination ul {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  align-items: center !important;
}

.wc-block-pagination-page,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.wc-block-pagination-page:hover,
.woocommerce-pagination ul li a:hover {
  color: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
  background: #FFF0EF !important;
}

.wc-block-pagination-page--active,
.woocommerce-pagination ul li span.current {
  background: var(--mff-red) !important;
  color: #fff !important;
  border-color: var(--mff-red) !important;
}

/* ============================================================
   FIX 3: SHOW PASSWORD BUTTON — proper styling everywhere
   ============================================================ */

/* Target the actual button WordPress/WooCommerce renders */
button.woocommerce-Input__showpassword,
.woocommerce-Input__showpassword,
.woocommerce form .show-password-input,
.woocommerce-form .show-password-input {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
  width: auto !important;
  height: auto !important;
  min-width: 60px !important;
  white-space: nowrap !important;
}

button.woocommerce-Input__showpassword:hover,
.woocommerce-Input__showpassword:hover,
.show-password-input:hover {
  color: var(--mff-text) !important;
  border-color: var(--mff-border-dark) !important;
  background: var(--mff-off-white) !important;
}

/* Make password field wrapper position relative for button placement */
.woocommerce-form-row,
.form-row {
  position: relative !important;
}

/* Password field + show button layout */
.woocommerce-form-row.woocommerce-form-row--wide input[type="password"],
.form-row input[type="password"] {
  padding-right: 80px !important;
}

/* ============================================================
   FIX 4: SITE MESSAGES — brand colors
   ============================================================ */

/* Success messages */
.woocommerce-message,
.wc-block-components-notice-banner.is-success,
.woocommerce-message.woocommerce-message--success {
  background: #F0FBF4 !important;
  border-left: 3px solid #3B6D11 !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mff-text) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.woocommerce-message::before {
  content: '✓' !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #3B6D11 !important;
  flex-shrink: 0 !important;
}

/* Error messages */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  background: #FFF0EF !important;
  border-left: 3px solid var(--mff-red) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mff-text) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
  list-style: none !important;
}

.woocommerce-error li::before {
  display: none !important;
}

/* Info / notice messages */
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
  background: #EFF6FF !important;
  border-left: 3px solid #185FA5 !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mff-text) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
}

.woocommerce-info::before {
  display: none !important;
}

/* Coupon applied / order confirmed — block notice variant */
.wc-block-components-notice-banner {
  border-left: 3px solid #3B6D11 !important;
  background: #F0FBF4 !important;
  color: var(--mff-text) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   FIX 5: CHECKBOXES — brand red accent color
   ============================================================ */

/* Style checkboxes with brand red */
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"],
.wc-block-checkout input[type="checkbox"],
input[type="checkbox"] {
  accent-color: var(--mff-red) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* Radio buttons too */
.woocommerce input[type="radio"],
.woocommerce-page input[type="radio"],
input[type="radio"] {
  accent-color: var(--mff-red) !important;
  cursor: pointer !important;
}

/* ============================================================
   PRODUCT IMAGE — override WooCommerce inline style="object-fit:cover"
   The inline style requires a more specific selector to beat it
   ============================================================ */

/* Target the exact wrapper class WooCommerce uses */
.wc-block-components-product-image--aspect-ratio-auto {
  aspect-ratio: unset !important;
  height: auto !important;
  overflow: visible !important;
}

.wc-block-components-product-image--aspect-ratio-auto a {
  display: block !important;
}

/* Override the inline object-fit:cover with higher specificity */
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img,
.wc-block-components-product-image img[style*="object-fit"] {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  display: block !important;
}

/* ============================================================
   PAGINATION — fix colors and spacing
   ============================================================ */

/* Reset all pagination link colors — override the global red link color */
.wc-block-pagination a,
.wc-block-pagination span,
.wc-block-pagination button,
nav.woocommerce-pagination a,
nav.woocommerce-pagination span {
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
}

.wc-block-pagination a:hover,
nav.woocommerce-pagination a:hover {
  color: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
}

/* Active page */
.wc-block-pagination-page--active,
nav.woocommerce-pagination span.current {
  color: #fff !important;
  background: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
}

/* Space between last number and "Next Page" */
.wc-block-pagination ul li:last-child,
.wc-block-pagination ul li:nth-last-child(2) {
  margin-left: 4px !important;
}

/* "Next Page" text — not a number, needs distinction */
.wc-block-pagination ul li a[aria-label*="next"],
.wc-block-pagination ul li a[rel="next"],
nav.woocommerce-pagination .next {
  padding: 0 14px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   SHOW PASSWORD BUTTON — force correct display after all:unset
   ============================================================ */

button.woocommerce-Input__showpassword,
.woocommerce-Input__showpassword,
.woocommerce form .show-password-input,
.woocommerce-form .show-password-input {
  all: unset !important;
  /* Force these after unset */
  display: block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
  width: fit-content !important;
  min-width: 80px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

button.woocommerce-Input__showpassword:hover,
.woocommerce-Input__showpassword:hover,
.show-password-input:hover {
  color: var(--mff-text) !important;
  border-color: var(--mff-border-dark) !important;
  background: var(--mff-off-white) !important;
}

/* ============================================================
   FIX 1: PRODUCT BOX — fixed 430px height, image fills it
   ============================================================ */

li.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
}

li.wc-block-product .wc-block-components-product-image,
li.wc-block-product .wc-block-grid__product-image {
  height: 280px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  background: var(--mff-off-white) !important;
}

li.wc-block-product .wc-block-components-product-image a,
li.wc-block-product .wc-block-grid__product-image a {
  display: block !important;
  height: 100% !important;
}

li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img,
li.wc-block-product img[style*="object-fit"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* ============================================================
   FIX 2: PAGINATION — remove all red link inheritance
   Uses attribute and structural selectors to beat specificity
   ============================================================ */

/* Kill the global link color on all pagination elements */
.wc-block-pagination *,
.wc-block-pagination *:link,
.wc-block-pagination *:visited,
nav.woocommerce-pagination *,
nav.woocommerce-pagination *:link {
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
}

.wc-block-pagination {
  display: flex !important;
  justify-content: center !important;
  padding: 32px 0 24px !important;
  width: 100% !important;
}

.wc-block-pagination ul {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.wc-block-pagination ul li {
  list-style: none !important;
  margin: 0 !important;
}

.wc-block-pagination ul li a,
.wc-block-pagination ul li button,
.wc-block-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.wc-block-pagination ul li a:hover,
.wc-block-pagination ul li button:hover {
  color: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
  background: #FFF0EF !important;
}

.wc-block-pagination-page--active {
  color: #fff !important;
  background: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
}

.wc-block-pagination-page--active * {
  color: #fff !important;
}

/* ============================================================
   FIX 3: SHOW PASSWORD — inline beside field, not below it
   ============================================================ */

/* Wrap the password field + button together */
.woocommerce-form-row input[type="password"],
.form-row input[type="password"],
#password,
#password_1,
#password_2 {
  display: block !important;
  width: 100% !important;
}

/* Button sits inline on same line as field via absolute position */
.woocommerce-form-row {
  position: relative !important;
}

button.woocommerce-Input__showpassword,
.woocommerce-Input__showpassword,
.woocommerce form .show-password-input,
.woocommerce-form .show-password-input {
  all: unset !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  background: none !important;
  border: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  text-decoration: underline !important;
  text-decoration-color: var(--mff-border) !important;
}

button.woocommerce-Input__showpassword:hover,
.woocommerce-Input__showpassword:hover {
  color: var(--mff-text) !important;
  text-decoration-color: var(--mff-text-muted) !important;
}

/* Pad the right of password input so text isn't hidden under button */
input[type="password"].woocommerce-Input {
  padding-right: 60px !important;
}

/* ============================================================
   FIX 4: SAVE CHANGES BUTTON — margin above it
   ============================================================ */

.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-edit-account .woocommerce-Button,
p.woocommerce-FormRow--wide.form-row-wide + p > button,
.woocommerce-form-row + fieldset + p button {
  margin-top: 28px !important;
  display: inline-block !important;
}

/* ============================================================
   FIX 5: NOTIFICATIONS — clean, no gray text boxes
   Remove inner content background, use border color matching bg
   ============================================================ */

/* Reset all WooCommerce block notice styles */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  border: 1px solid !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

/* Remove the inner content gray box */
.wc-block-components-notice-banner__content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Success */
.wc-block-components-notice-banner.is-success {
  background: #F0FBF4 !important;
  border-color: #6BBF8A !important;
  color: #1A5C32 !important;
}

.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content {
  color: #1A5C32 !important;
}

/* Error */
.wc-block-components-notice-banner.is-error {
  background: #FFF0EF !important;
  border-color: #F24F48 !important;
  color: #7A1F1C !important;
}

.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
  color: #7A1F1C !important;
}

/* Info */
.wc-block-components-notice-banner.is-info {
  background: #EFF6FF !important;
  border-color: #6AA3D9 !important;
  color: #1A4A7A !important;
}

.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content {
  color: #1A4A7A !important;
}

/* Default/no modifier */
.wc-block-components-notice-banner:not(.is-success):not(.is-error):not(.is-info) {
  background: #F0FBF4 !important;
  border-color: #6BBF8A !important;
  color: #1A5C32 !important;
}

/* Icon color matching */
.wc-block-components-notice-banner.is-success svg,
.wc-block-components-notice-banner:not(.is-error):not(.is-info) svg {
  color: #3B6D11 !important;
  fill: #3B6D11 !important;
}

.wc-block-components-notice-banner.is-error svg {
  color: var(--mff-red) !important;
  fill: var(--mff-red) !important;
}

.wc-block-components-notice-banner.is-info svg {
  color: #185FA5 !important;
  fill: #185FA5 !important;
}

/* Classic WooCommerce notices */
.woocommerce-message {
  background: #F0FBF4 !important;
  border-top: none !important;
  border-left: 3px solid #6BBF8A !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  color: #1A5C32 !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

.woocommerce-error {
  background: #FFF0EF !important;
  border-top: none !important;
  border-left: 3px solid var(--mff-red) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  color: #7A1F1C !important;
  font-size: 14px !important;
  list-style: none !important;
  margin-bottom: 20px !important;
}

.woocommerce-info {
  background: #EFF6FF !important;
  border-top: none !important;
  border-left: 3px solid #6AA3D9 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  color: #1A4A7A !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

/* Remove the ::before icon WooCommerce adds */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error li::before {
  display: none !important;
}

/* ============================================================
   PAGINATION — exact classes from actual rendered HTML
   ============================================================ */

/* Container */
.wp-block-query-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 32px 0 24px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* All page number links */
a.page-numbers,
span.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

a.page-numbers:hover {
  color: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
  background: #FFF0EF !important;
}

/* Active / current page */
span.page-numbers.current,
a.page-numbers.current {
  color: #fff !important;
  background: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
}

/* Next Page / Prev Page links */
a.wp-block-query-pagination-next,
a.wp-block-query-pagination-previous {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  text-decoration: none !important;
  margin-left: 4px !important;
  transition: all 0.15s ease !important;
}

a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:hover {
  color: var(--mff-red) !important;
  border-color: var(--mff-red) !important;
  background: #FFF0EF !important;
}

/* ============================================================
   PRODUCT BOX — 500x500 fixed image area
   ============================================================ */

li.wc-block-product .wc-block-components-product-image,
li.wc-block-product .wc-block-grid__product-image {
  height: 300px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  background: var(--mff-off-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

li.wc-block-product .wc-block-components-product-image a,
li.wc-block-product .wc-block-grid__product-image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img,
li.wc-block-product img[style*="object-fit"],
li.wc-block-product img.attachment-woocommerce_thumbnail {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================================
   SHOW PASSWORD — visible text link, absolutely positioned
   Replaces previous broken versions
   ============================================================ */

.woocommerce-form-row,
.form-row {
  position: relative !important;
}

/* Password inputs — make room for the show button */
.woocommerce-form-row input[type="password"],
.form-row input[type="password"] {
  padding-right: 64px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* The show/hide button itself */
button.woocommerce-Input__showpassword {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(0) !important;
  bottom: auto !important;
  /* Reset everything first */
  all: unset !important;
  position: absolute !important;
  right: 12px !important;
  top: calc(50% + 2px) !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: var(--mff-border) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

button.woocommerce-Input__showpassword:hover {
  color: var(--mff-text) !important;
  text-decoration-color: var(--mff-text-muted) !important;
}

/* Account details page password fields inside fieldset */
fieldset .form-row input[type="password"],
fieldset .woocommerce-form-row input[type="password"] {
  padding-right: 64px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

fieldset .form-row,
fieldset .woocommerce-form-row {
  position: relative !important;
}

/* ============================================================
   SHOW PASSWORD BUTTON — correct selector: .show-password-input
   Wrapped in span.password-input, not directly in form-row
   ============================================================ */

/* Password input wrapper */
span.password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* Password input inside the span */
span.password-input input[type="password"] {
  width: 100% !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* The actual button */
button.show-password-input {
  all: unset !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  white-space: nowrap !important;
}

/* Add "Show" text via pseudo-element since the button has no text content */
button.show-password-input::after {
  content: 'Show' !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: var(--mff-border) !important;
}

button.show-password-input.display-password::after {
  content: 'Hide' !important;
}

button.show-password-input:hover::after {
  color: var(--mff-text) !important;
  text-decoration-color: var(--mff-text-muted) !important;
}

/* ============================================================
   CART PAGE — layout, padding, and order summary box
   ============================================================ */

/* Strip the default entry-content padding on cart page only —
   WooCommerce cart block handles its own layout.
   Checkout keeps its padding via the rule below. */
.woocommerce-cart .entry-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Checkout entry-content — keep horizontal padding */
.woocommerce-checkout .entry-content {
  padding: 0 40px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Cart block — reduced horizontal padding so content is closer to screen edges */
.woocommerce-cart .wp-block-woocommerce-cart,
.wc-block-cart {
  padding: 0 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Cart page heading — match horizontal padding of cart block */
.woocommerce-cart h1,
.wc-block-cart h1 {
  font-family: var(--mff-font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin: 32px 0 24px !important;
  padding-left: 20px !important;
}

/* Order summary sidebar box — border + shadow matching production */
.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-cart__sidebar {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
  margin-bottom: 40px !important;
}

/* Express payment buttons (Apple Pay, Google Pay, Link) — add horizontal padding */
.wc-block-components-express-payment,
.wc-block-components-express-payment__event-buttons {
  padding: 0 16px !important;
}

.wc-block-components-express-payment__event-buttons button,
.wc-block-components-express-payment__event-buttons .component-button {
  border-radius: 8px !important;
}

/* Cart totals heading */
.wc-block-cart__totals-title,
h2.wc-block-cart__totals-title {
  font-family: var(--mff-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mff-text-muted) !important;
  padding: 20px 24px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

/* Totals rows — subtotal, shipping, total */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 24px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  border-bottom: 1px solid #F0EDE9 !important;
}

.wc-block-components-totals-item:last-child {
  border-bottom: none !important;
}

.wc-block-components-totals-item__label {
  color: var(--mff-text-muted) !important;
  font-size: 14px !important;
}

.wc-block-components-totals-item__value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  text-align: right !important;
}

/* Estimated total row — larger */
.wc-block-components-totals-footer-item {
  padding: 16px 24px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
}

/* Add coupons accordion */
.wc-block-components-panel__button {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  padding: 14px 24px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #F0EDE9 !important;
}

/* Proceed to checkout button */
.wc-block-cart__submit-container {
  padding: 16px 24px !important;
  background: transparent !important;
}

.wc-block-cart__submit-button,
a.wc-block-cart__submit-button {
  display: block !important;
  width: 100% !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}

.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Cart items table */
.wc-block-cart-items {
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
}

.wc-block-cart-items__header {
  background: var(--mff-off-white) !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

.wc-block-cart-items__header span {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mff-text-faint) !important;
}

/* Individual cart item rows */
.wc-block-cart-item {
  padding: 16px 20px !important;
  border-bottom: 1px solid #F0EDE9 !important;
}

.wc-block-cart-item:last-child {
  border-bottom: none !important;
}

/* Product name in cart */
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

/* Remove item link */
.wc-block-cart-item__remove-link {
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  text-decoration: underline !important;
}

/* Coupon chip */
.wc-block-components-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--mff-off-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mff-text) !important;
}

/* BOGO / choose an option panel */
.wc-block-components-order-summary.components-panel {
  background: var(--mff-off-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 10px !important;
  margin: 12px 24px !important;
  overflow: hidden !important;
}

.components-panel__header h2 {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
}

.components-radio-control__label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: var(--mff-text) !important;
}

/* ============================================================
   STAR RATINGS — fix "SSSSS" rendering as text
   The ::before pseudo renders stars; text inside must be hidden
   ============================================================ */

.wc-block-components-product-rating-stars__stars,
.wc-block-grid__product-rating .wc-block-components-product-rating-stars__stars {
  display: block !important;
  position: relative !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: transparent !important;
  letter-spacing: 2px !important;
  width: 88px !important;
  height: 16px !important;
}

/* Background stars (empty) */
.wc-block-components-product-rating-stars__stars::before {
  content: 'SSSSS' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  font-family: 'WooCommerce' !important;
  color: #D3D3D3 !important;
  letter-spacing: 2px !important;
}

/* Foreground stars (filled) — width set by inline style */
.wc-block-components-product-rating-stars__stars span {
  display: block !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

.wc-block-components-product-rating-stars__stars span::before {
  content: 'SSSSS' !important;
  font-family: 'WooCommerce' !important;
  font-size: 16px !important;
  color: #F5A623 !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Also hide the "Rated X out of 5" text — it's for screen readers only */
.wc-block-components-product-rating-stars__stars span strong,
.wc-block-components-product-rating-stars__stars span .rating {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* You may be interested in — cross sells section */
.wc-block-cart__cross-sells-products,
.wp-block-cart-cross-sells-products-block {
  margin-top: 32px !important;
}

.wc-block-cart__cross-sells-title,
h2.wc-block-cart__cross-sells-title {
  font-family: var(--mff-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin-bottom: 20px !important;
}

@media (max-width: 768px) {
  .woocommerce-cart .wp-block-woocommerce-cart,
  .wc-block-cart {
    padding: 0 16px !important;
  }
}

/* ============================================================
   CART + CHECKOUT SUMMARY BOX — shared styles
   ============================================================ */

.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar {
  background: var(--mff-off-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}

/* Summary title row — "CART TOTALS" / "Order summary" */
.wc-block-cart__totals-title,
h2.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mff-text-muted) !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--mff-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Checkout summary title price */
.wc-block-components-checkout-order-summary__title-price {
  font-family: var(--mff-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
}

/* Order summary items (checkout sidebar) */
.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

.wc-block-components-order-summary-item:last-child {
  border-bottom: none !important;
}

.wc-block-components-order-summary-item__image {
  flex-shrink: 0 !important;
  position: relative !important;
}

.wc-block-components-order-summary-item__image img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  border: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
}

.wc-block-components-order-summary-item__quantity {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wc-block-components-order-summary-item__quantity .screen-reader-text {
  display: none !important;
}

.wc-block-components-product-name {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  margin: 0 0 4px !important;
}

.wc-block-components-order-summary-item__individual-prices {
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
}

.wc-block-components-order-summary-item__total-price {
  margin-left: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

/* Totals rows — all summary rows */
.wc-block-components-totals-wrapper {
  padding: 0 !important;
}

.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 20px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--mff-border) !important;
  background: transparent !important;
}

.wc-block-components-totals-item:last-child {
  border-bottom: none !important;
}

.wc-block-components-totals-item__label {
  color: var(--mff-text-muted) !important;
  font-size: 13px !important;
}

.wc-block-components-totals-item__value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  text-align: right !important;
}

/* Estimated/Order total row — larger */
.wc-block-components-totals-footer-item {
  padding: 16px 20px !important;
  border-top: 1px solid var(--mff-border) !important;
  border-bottom: none !important;
  background: transparent !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
}

/* Add coupons row */
.wc-block-components-totals-coupon {
  border-bottom: 1px solid var(--mff-border) !important;
}

.wc-block-components-panel__button {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 20px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: var(--mff-text-muted) !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* Proceed to checkout / place order button */
.wc-block-cart__submit-container,
.wc-block-checkout__actions {
  padding: 16px 20px !important;
}

.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: block !important;
  width: 100% !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  box-sizing: border-box !important;
}

.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* BOGO choose an option panel inside summary */
.wc-block-components-order-summary.components-panel,
.wc-block-components-discounts-meta .components-panel {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 8px !important;
  margin: 8px 20px !important;
  overflow: hidden !important;
}

/* Smart Coupons sets font-size: 0.875em on order summary items, shrinking
   all text in the checkout sidebar. Override to restore correct sizing. */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
  font-size: 1em !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata {
  font-size: 13px !important;
}

.components-panel__header {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

.components-panel__header h2 {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.components-panel__body-toggle {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.components-radio-control__option {
  padding: 8px 14px !important;
  border-bottom: 1px solid #F0EDE9 !important;
}

.components-radio-control__option:last-child {
  border-bottom: none !important;
}

.components-radio-control__label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: var(--mff-text) !important;
}

@media (max-width: 768px) {
  .woocommerce-cart .entry-content,
  .wc-block-cart,
  .wp-block-woocommerce-checkout {
    padding: 0 16px !important;
  }
}

/* ============================================================
   CART SUMMARY — fix uneven divider lines
   Remove left border that's causing the offset look
   ============================================================ */

.wc-block-components-totals-wrapper {
  border-left: none !important;
  border-right: none !important;
  padding: 0 !important;
}

.wc-block-components-totals-wrapper .wc-block-components-totals-item,
.wc-block-components-totals-wrapper .wc-block-components-panel {
  border-left: none !important;
  border-right: none !important;
  margin-left: 0 !important;
}

/* Remove any left-side border/padding from the order summary content area */
.wc-block-components-checkout-order-summary__content,
.wc-block-components-order-summary__content {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ensure all divider lines span full width of box */
.wc-block-components-totals-item {
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   CHECKOUT — remove the left vertical border artifact
   ============================================================ */

.wc-block-checkout__sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar {
  border-left: none !important;
}

/* The checkout order summary inner wrapper sometimes adds a border */
.wp-block-woocommerce-checkout-order-summary-block {
  border-left: none !important;
  padding-left: 0 !important;
}

.wc-block-components-checkout-order-summary__content {
  border: none !important;
}

/* Order summary items — full width dividers */
.wc-block-components-order-summary-item {
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   STAR RATINGS — load WooCommerce icon font properly
   The 'S' renders as a star only when WooCommerce font is loaded
   Use Unicode star characters as fallback
   ============================================================ */

/* Hide the literal text content */
.wc-block-components-product-rating-stars__stars {
  display: inline-block !important;
  position: relative !important;
  font-size: 0 !important;
  color: transparent !important;
  width: 90px !important;
  height: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Empty star track using Unicode stars */
.wc-block-components-product-rating-stars__stars::before {
  content: '★★★★★' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  color: #D3D3D3 !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;
}

/* Filled star overlay — width controlled by inline style */
.wc-block-components-product-rating-stars__stars span {
  display: block !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  white-space: nowrap !important;
}

.wc-block-components-product-rating-stars__stars span::before {
  content: '★★★★★' !important;
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  color: #F5A623 !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Hide the screen reader text inside the span */
.wc-block-components-product-rating-stars__stars span strong,
.wc-block-components-product-rating-stars__stars span > *:not(::before) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* ============================================================
   PLACE ORDER BUTTON — checkout actions area
   ============================================================ */

/* Actions row — flex layout with return link + button */
.wc-block-checkout__actions_row,
.wc-block-checkout__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  padding: 24px 0 !important;
  border-top: 1px solid var(--mff-border) !important;
  margin-top: 16px !important;
}

/* Return to cart link */
.wc-block-checkout__return-to-cart-link,
a.wc-block-checkout__return-to-cart-link {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.wc-block-checkout__return-to-cart-link:hover {
  color: var(--mff-text) !important;
}

/* Place Order button — fixed width, properly centered text */
.wc-block-components-checkout-place-order-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 320px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 15px 32px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Terms and conditions text above button */
.wc-block-checkout__terms {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  margin-bottom: 16px !important;
}

/* ============================================================
   CART + CHECKOUT SUMMARY — fix inherited root padding
   WordPress block layout applies padding-left via
   useRootPaddingAwareAlignments in theme.json which bleeds
   into the sidebar. Zero it out on the sidebar and all
   children, then re-apply our own consistent padding.
   ============================================================ */

/* Kill the inherited root padding on the sidebar itself */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.wc-block-components-sidebar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  --wp--style--root--padding-left: 0 !important;
  --wp--style--root--padding-right: 0 !important;
}

/* Kill it on every direct child wrapper */
.wc-block-cart__sidebar > *,
.wc-block-checkout__sidebar > *,
.wc-block-components-sidebar > *,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kill it on all totals wrappers inside the sidebar */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Now re-apply clean consistent padding on each row */
.wc-block-cart__sidebar .wc-block-components-totals-item,
.wc-block-checkout__sidebar .wc-block-components-totals-item,
.wc-block-cart__sidebar .wc-block-components-panel__button,
.wc-block-checkout__sidebar .wc-block-components-panel__button,
.wc-block-cart__sidebar .wc-block-components-order-summary-item,
.wc-block-checkout__sidebar .wc-block-components-order-summary-item,
.wc-block-cart__sidebar .wc-block-cart__totals-title,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Also zero out the checkout order summary content wrapper */
.wc-block-components-checkout-order-summary__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* And the inner order summary list */
.wc-block-components-order-summary__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   MOBILE FIXES — account nav + checkout layout
   ============================================================ */

@media (max-width: 768px) {

  /* Account nav — single column list on mobile, not pills */
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .woocommerce-MyAccount-navigation-link a {
    padding: 10px 16px !important;
    font-size: 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--mff-border) !important;
  }

  .woocommerce-MyAccount-navigation-link:last-child a {
    border-bottom: none !important;
  }

  .woocommerce-MyAccount-navigation-link.is-active a {
    background: #FFF0EF !important;
    color: var(--mff-red) !important;
  }

  /* Account nav container — full width, no min-height */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    min-width: 100% !important;
    min-height: unset !important;
    border-right: none !important;
    border-bottom: 1px solid var(--mff-border) !important;
    padding: 0 !important;
  }

  /* Account layout — stack vertically */
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 24px 16px !important;
    width: 100% !important;
  }

  /* Checkout — fix the overlapping two-column layout */
  /* WooCommerce block checkout uses CSS grid on desktop,
     needs to collapse to single column on mobile */
  .wp-block-woocommerce-checkout,
  .wc-block-checkout {
    display: block !important;
    padding: 0 16px !important;
  }

  /* The inner checkout grid */
  .wc-block-checkout__main,
  .wp-block-woocommerce-checkout-fields-block {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  /* Order summary sidebar — full width below the form */
  .wc-block-checkout__sidebar,
  .wc-block-components-sidebar.wc-block-checkout__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-top: 32px !important;
  }

  /* Stop the sidebar being sticky on mobile */
  .wc-block-components-sidebar.is-sticky {
    position: static !important;
    top: auto !important;
  }

  /* Checkout form fields — full width on mobile */
  .wc-block-components-address-form,
  .wc-block-components-form {
    width: 100% !important;
  }

  .wc-block-components-text-input,
  .wc-block-components-select {
    width: 100% !important;
  }

  /* Payment options — prevent overflow */
  .wc-block-components-payment-methods,
  .wc-block-components-payment-method-label {
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Stripe/payment iframe — constrain width */
  .wc-block-components-payment-methods iframe,
  .wc-block-components-payment-methods .StripeElement {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Checkout actions — stack on mobile */
  .wc-block-checkout__actions_row,
  .wc-block-checkout__actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .wc-block-checkout__return-to-cart-link {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Cart page — stack on mobile */
  .wc-block-cart,
  .wp-block-woocommerce-cart {
    padding: 0 16px !important;
  }

  .wc-block-cart__sidebar,
  .wc-block-components-sidebar.wc-block-cart__sidebar {
    width: 100% !important;
    margin-top: 24px !important;
  }

  /* Cart items — reduce padding */
  .wc-block-cart-item {
    padding: 12px 16px !important;
  }

  /* Login card — full width on small screens */
  .woocommerce-account:not(.logged-in) .woocommerce {
    margin: 24px auto !important;
    padding: 24px 20px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 16px !important;
  }

  .wc-block-components-totals-item {
    padding: 10px 16px !important;
  }

  .wc-block-cart__sidebar .wc-block-components-totals-item,
  .wc-block-checkout__sidebar .wc-block-components-totals-item {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   CHECKOUT MOBILE — hide duplicate order summary
   WooCommerce renders the summary twice: once inline in the
   form flow (mobile version) and once in the sidebar (desktop).
   On mobile we hide the sidebar and show only the inline one.
   ============================================================ */

@media (max-width: 768px) {

  /* Hide the sidebar order summary on mobile */
  .wc-block-checkout__sidebar,
  .wc-block-components-sidebar.wc-block-checkout__sidebar,
  .wp-block-woocommerce-checkout-totals-block {
    display: none !important;
  }

  /* Show the inline order summary that lives in the main form */
  .wp-block-woocommerce-checkout-order-summary-block {
    display: block !important;
  }

  /* Make the main checkout column full width since sidebar is gone */
  .wc-block-checkout__main,
  .wp-block-woocommerce-checkout-fields-block,
  .wc-block-checkout__form {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* Inline order summary styling — matches sidebar style */
  .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--mff-off-white) !important;
    border: 1px solid var(--mff-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 0 28px !important;
  }
}



/* ============================================================
   CHECKOUT MOBILE — summary above form using negative margin
   trick since blocks may not be direct flex siblings.
   Instead: hide the inline summary where it is, show the
   sidebar summary at the top but only its content, not the
   sticky wrapper.
   ============================================================ */

@media (max-width: 768px) {

  /* Re-show the sidebar but not as a sidebar — as a top block */
  .wc-block-checkout__sidebar,
  .wc-block-components-sidebar.wc-block-checkout__sidebar,
  .wp-block-woocommerce-checkout-totals-block {
    display: block !important;
    width: 100% !important;
    position: static !important;
    order: -10 !important;
    margin-bottom: 24px !important;
  }

  /* Make the whole checkout a flex column so order works */
  .wc-block-checkout__inner-container,
  .wp-block-woocommerce-checkout > .wp-block-group,
  .wp-block-woocommerce-checkout > div {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Push the fields block after the sidebar */
  .wc-block-checkout__main,
  .wp-block-woocommerce-checkout-fields-block {
    order: 0 !important;
  }

  /* Now hide the INLINE summary inside the fields block
     since we're showing the sidebar one at the top */
  .wp-block-woocommerce-checkout-fields-block
  .wp-block-woocommerce-checkout-order-summary-block {
    display: none !important;
  }
}


/* ============================================================
   BOGO PANEL — fix arrow overlapping text
   ============================================================ */

/* Button layout — flex with arrow on the right */
.components-panel__body-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: var(--mff-text-muted) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

/* Move the arrow span to the end */
.components-panel__body-toggle > span:first-child {
  order: 2 !important;
  flex-shrink: 0 !important;
}

/* Arrow SVG sizing */
.components-panel__arrow {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--mff-text-faint) !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   HEADER — urgency bar + navigation
   ============================================================ */

.mff-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

/* Urgency bar */
.mff-urgency-bar {
  background: var(--mff-red) !important;
  width: 100% !important;
}

/* FSE constrained layout applies max-width directly to the <p>; center it with auto margins */
.mff-urgency-bar p {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.mff-urgency-bar a {
  color: #fff !important;
  opacity: 0.88 !important;
  text-underline-offset: 2px !important;
}

.mff-urgency-bar a:hover {
  opacity: 1 !important;
}

/* Nav bar */
.mff-nav-bar {
  background: var(--mff-off-white) !important;
  border-bottom: 1px solid var(--mff-border) !important;
  width: 100% !important;
}

.mff-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 40px !important;
  gap: 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Logo */
.mff-logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
}

/* Nav links */
.mff-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
  justify-content: center !important;
}

.mff-nav-links .wp-block-navigation-item__content,
.mff-nav-links a {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text) !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  white-space: nowrap !important;
}

.mff-nav-links .wp-block-navigation-item__content:hover,
.mff-nav-links a:hover {
  color: var(--mff-red) !important;
  background: rgba(242,79,72,0.06) !important;
}

/* Dropdown submenu */
.mff-nav-links .wp-block-navigation__submenu-container {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  padding: 6px !important;
  min-width: 200px !important;
  top: calc(100% + 8px) !important;
}

.mff-nav-links .wp-block-navigation__submenu-container a {
  display: block !important;
  padding: 9px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--mff-text) !important;
}

.mff-nav-links .wp-block-navigation__submenu-container a:hover {
  background: var(--mff-off-white) !important;
  color: var(--mff-red) !important;
}

/* Right side actions */
.mff-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Log in link */
.mff-nav-login .wp-block-navigation-item__content,
a.mff-nav-login {
  font-family: var(--wp--preset--font-family--poppins) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  text-decoration: none !important;
  border: 1px solid var(--mff-border-dark) !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  background: var(--mff-white) !important;
  transition: border-color 0.15s ease !important;
  white-space: nowrap !important;
}

.mff-nav-login .wp-block-navigation-item__content:hover,
a.mff-nav-login:hover {
  border-color: var(--mff-text) !important;
  background: var(--mff-white) !important;
}

/* Free trial CTA button */
.mff-nav-cta .wp-block-button__link {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
}

.mff-nav-cta .wp-block-button__link:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Mini cart icon */
.mff-nav-cart .wc-block-mini-cart__button {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--mff-text) !important;
  position: relative !important;
}

.mff-nav-cart .wc-block-mini-cart__quantity-badge {
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  min-width: unset !important;
  height: unset !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  position: relative !important;
  line-height: 0 !important;
}

/* Account icon */
.mff-nav-account {
  color: var(--mff-text) !important;
}

/* Mobile nav — hamburger */
@media (max-width: 1024px) {
  .mff-nav-inner {
    padding: 12px 20px !important;
  }
}

@media (max-width: 768px) {
  .mff-nav-inner {
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  .mff-logo img {
    height: 28px !important;
  }

  /* Hide desktop nav links on mobile — hamburger takes over.
     Scoped to exclude the open overlay so links render inside the menu. */
  .mff-nav-links .wp-block-navigation__container:not(.wp-block-navigation__responsive-container-content .wp-block-navigation__container) {
    display: none !important;
  }

  /* Restore links display inside open overlay */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Keep actions visible */
  .mff-nav-actions {
    gap: 6px !important;
  }

  /* Hide log in on mobile — in hamburger menu */
  .mff-nav-login {
    display: none !important;
  }

  /* Urgency bar text smaller on mobile */
  .mff-urgency-bar p {
    font-size: 13px !important;
  }

  /* Mobile overlay menu */
  .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--mff-white) !important;
    padding: 24px 20px !important;
    min-height: 100dvh !important;
    min-height: 100vh !important; /* fallback for older browsers */
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--mff-border) !important;
    color: var(--mff-text) !important;
  }

  /* Hamburger button — force visible, overrides WP Interactivity API display:none */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    color: var(--mff-text) !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   HEADER NAV — fix link spacing and layout
   ============================================================ */

/* Force gap between nav items */
.mff-nav-links .wp-block-navigation__container,
.mff-nav-links > ul,
.mff-nav-links .wp-block-navigation-item {
  display: flex !important;
  align-items: center !important;
}

.mff-nav-links .wp-block-navigation__container {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each nav item needs explicit padding for spacing */
.mff-nav-links .wp-block-navigation-item {
  margin: 0 !important;
  padding: 0 !important;
}

.mff-nav-links .wp-block-navigation-item__content {
  display: block !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.mff-nav-links .wp-block-navigation-item__content:hover {
  color: var(--mff-red) !important;
  background: rgba(242,79,72,0.06) !important;
}

/* Fix the inner nav container layout */
.mff-nav-inner > .wp-block-navigation {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Log in — style as outlined button not a nav link */
.mff-nav-login.wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation-item.mff-nav-login .wp-block-navigation-item__content {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  border: 1px solid var(--mff-border-dark) !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  background: var(--mff-white) !important;
}

.mff-nav-login.wp-block-navigation-item .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.mff-nav-login .wp-block-navigation-item__content:hover {
  border-color: var(--mff-text) !important;
  background: var(--mff-white) !important;
  color: var(--mff-text) !important;
}

/* Mini cart button */
.mff-nav-cart .wc-block-mini-cart__button {
  display: flex !important;
  align-items: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--mff-text) !important;
}

.mff-nav-cart .wc-block-mini-cart__badge {
  background: var(--mff-red) !important;
  color: #fff !important;
}

/* ============================================================
   NAV — fix centering and spacing
   ============================================================ */

/* The navigation block adds items-justified-center which
   causes extra margin. Override with flex gap instead. */
.wp-block-navigation.mff-nav-links,
ul.wp-block-navigation__container.mff-nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each nav item — no extra margin, padding handled by link */
.mff-nav-links .wp-block-navigation-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Nav link padding — this creates the visual spacing */
.mff-nav-links .wp-block-navigation-item__content {
  padding: 6px 14px !important;
  white-space: nowrap !important;
  display: block !important;
}

/* ============================================================
   MINI CART — fix badge dot and drawer
   ============================================================ */

/* Remove the stray dot below the cart icon */
.wc-block-mini-cart__button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--mff-text) !important;
  line-height: 1 !important;
}

/* The quantity badge — positioned over the icon */
.wc-block-mini-cart__quantity-badge {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.wc-block-mini-cart__icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Badge number — top right of icon */
.wc-block-mini-cart__badge {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

/* Mini cart drawer overlay */
.wc-block-mini-cart__drawer {
  z-index: 9999 !important;
}

.wc-block-mini-cart__drawer .components-modal__screen-overlay {
  z-index: 9998 !important;
}

/* Drawer panel */
.wc-block-mini-cart__drawer .components-modal__frame {
  background: var(--mff-white) !important;
  border-radius: 0 !important;
  width: 380px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  margin: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
}

/* ============================================================
   NAV — hide WordPress auto-injected account icon
   WordPress injects a customer account icon automatically
   in the mobile overlay nav. We handle login ourselves.
   ============================================================ */

/* Hide the auto-injected account icon in all nav contexts */
.wp-block-navigation .wc-block-customer-account,
.wp-block-navigation .wp-block-woocommerce-customer-account,
.wp-block-navigation__responsive-container .wc-block-customer-account,
.wp-block-navigation-item .wc-block-customer-account__account-icon,
.mff-nav-links .wc-block-customer-account {
  display: none !important;
}

/* Also hide via the SVG class specifically */
svg.wc-block-customer-account__account-icon {
  display: none !important;
}

/* Hide the parent li if it contains the account icon */
.wp-block-navigation-item:has(svg.wc-block-customer-account__account-icon) {
  display: none !important;
}

/* ============================================================
   NAV — show Log in on mobile too
   ============================================================ */

@media (max-width: 768px) {
  /* Show the login link on mobile */
  .mff-nav-login {
    display: flex !important;
  }

  .mff-nav-login .wp-block-navigation-item__content {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mff-text) !important;
    border: 1px solid var(--mff-border-dark) !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    background: var(--mff-white) !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   MINI CART — fix black dot, style icon dark/transparent
   ============================================================ */

/* Remove any pseudo-element dots */
.wc-block-mini-cart__button::after,
.wc-block-mini-cart__button::before,
.wc-block-mini-cart__quantity-badge::after,
.wc-block-mini-cart__quantity-badge::before {
  display: none !important;
  content: none !important;
}

/* Button — transparent background, dark icon */
.wc-block-mini-cart__button {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  color: var(--mff-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  line-height: 0 !important;
}

.wc-block-mini-cart__button:hover {
  color: var(--mff-text) !important;
  opacity: 0.7 !important;
}

/* Cart SVG icon — dark grey */
.wc-block-mini-cart__icon {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: #3A3939 !important;
  fill: #3A3939 !important;
}

/* Quantity badge wrapper */
.wc-block-mini-cart__quantity-badge {
  display: inline-flex !important;
  position: relative !important;
  line-height: 0 !important;
}

/* Badge number — red pill top right */
.wc-block-mini-cart__badge {
  position: absolute !important;
  top: -5px !important;
  right: -8px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

/* Empty badge — hide when 0 items */
.wc-block-mini-cart__badge[hidden] {
  display: none !important;
}

/* ============================================================
   MINI CART DRAWER — fix z-index and positioning
   Drawer is position:fixed, left:0, width:390px
   It slides in from the left side.
   Our sticky header z-index:1000 was covering it.
   ============================================================ */

/* Overlay — sits above everything including sticky header */
.wc-block-components-drawer__screen-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0,0,0,0.5) !important;
}

/* Drawer panel — left side slide-in */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 390px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: var(--mff-white) !important;
  z-index: 100000 !important;
  overflow-y: auto !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Drawer content wrapper */
.wc-block-components-drawer__content {
  height: 100% !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.wc-block-mini-cart__template-part {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Close button */
.wc-block-components-drawer__close-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 16px 16px 8px !important;
  flex-shrink: 0 !important;
}

.wc-block-components-drawer__close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  color: var(--mff-text) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wc-block-components-drawer__close:hover {
  background: var(--mff-off-white) !important;
}

/* Cart title */
.wc-block-mini-cart__title {
  font-family: var(--mff-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  padding: 0 20px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--mff-border) !important;
  flex-shrink: 0 !important;
}

/* Cart items area — scrollable */
.wc-block-mini-cart__items {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Cart item rows */
.wc-block-mini-cart__products-table .wc-block-cart-items__row {
  display: flex !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #F0EDE9 !important;
  align-items: flex-start !important;
}

/* Product image in drawer */
.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  border: 1px solid var(--mff-border) !important;
}

/* Product name in drawer */
.wc-block-mini-cart__products-table .wc-block-components-product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  text-decoration: none !important;
}

/* Footer — subtotal + buttons */
.wc-block-mini-cart__footer {
  flex-shrink: 0 !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
}

.wc-block-mini-cart__footer-subtotal {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.wc-block-mini-cart__footer-actions {
  display: flex !important;
  gap: 10px !important;
}

/* View cart button — outline */
.wc-block-mini-cart__footer-cart {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1.5px solid var(--mff-border-dark) !important;
  color: var(--mff-text) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wc-block-mini-cart__footer-cart:hover {
  border-color: var(--mff-text) !important;
  color: var(--mff-text) !important;
}

/* Go to checkout button — red */
.wc-block-mini-cart__footer-checkout {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease !important;
}

.wc-block-mini-cart__footer-checkout:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Raise header z-index above drawer overlay
   but keep it sticky — drawer opens on top */
.mff-site-header {
  z-index: 999 !important;
}

/* ============================================================
   MINI CART — move drawer to right side + fix icon styling
   ============================================================ */

/* Move drawer to right side */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer {
  left: auto !important;
  right: 0 !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15) !important;
}

/* Fix the cart icon — remove red background, remove dot */
.wc-block-mini-cart,
.mff-nav-cart,
.wc-block-mini-cart__button-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important; /* kills any text/dot rendered by font */
}

/* The button itself */
.wc-block-mini-cart__button {
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  cursor: pointer !important;
  color: #3A3939 !important;
}

/* Kill any pseudo-element dots aggressively */
.wc-block-mini-cart *::before,
.wc-block-mini-cart *::after,
.wc-block-mini-cart__button::before,
.wc-block-mini-cart__button::after,
.wc-block-mini-cart__button-wrapper::before,
.wc-block-mini-cart__button-wrapper::after {
  display: none !important;
  content: none !important;
}

/* The SVG cart icon */
.wc-block-mini-cart__icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: #3A3939 !important;
  fill: currentColor !important;
  font-size: 0 !important;
}

/* Badge wrapper — no background, just position context */
.wc-block-mini-cart__quantity-badge {
  background: transparent !important;
  display: inline-flex !important;
  position: relative !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* The count badge — red pill */
.wc-block-mini-cart__badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  left: auto !important;
  bottom: auto !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

/* ============================================================
   LOGO — prevent squishing on smaller screens
   ============================================================ */

.mff-logo,
.wp-block-site-logo.mff-logo {
  flex-shrink: 0 !important;
}

.mff-logo img,
.wp-block-site-logo.mff-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .mff-logo img,
  .wp-block-site-logo.mff-logo img {
    height: 28px !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .mff-logo img,
  .wp-block-site-logo.mff-logo img {
    height: 24px !important;
  }
}

/* ============================================================
   MINI CART — replace SVG icon with cleaner version
   Hides the default WooCommerce cart SVG and injects a
   cleaner minimal cart icon via ::before pseudo-element
   ============================================================ */

/* Hide the default WooCommerce cart SVG */
.wc-block-mini-cart__icon {
  display: none !important;
}

/* Inject clean cart icon using inline SVG as background */
.wc-block-mini-cart__quantity-badge::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233A3939' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   MINI CART ICON — nuclear reset of all backgrounds
   Then inject traditional cart SVG
   ============================================================ */

/* Kill every possible background on the mini cart wrapper */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart.mff-nav-cart,
div.wc-block-mini-cart {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.wc-block-mini-cart__button,
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 0 !important;
}

.wc-block-mini-cart__quantity-badge {
  background: transparent !important;
  background-color: transparent !important;
  display: inline-flex !important;
  position: relative !important;
  line-height: 0 !important;
}

/* Hide default SVG */
.wc-block-mini-cart__icon {
  display: none !important;
}

/* Traditional cart icon via ::before */
.wc-block-mini-cart__quantity-badge::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233A3939' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  flex-shrink: 0 !important;
}

/* Badge count */
.wc-block-mini-cart__badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  left: auto !important;
  bottom: auto !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* ============================================================
   MINI CART DRAWER — fix footer cutoff + product description
   ============================================================ */

/* Drawer needs to be a proper flex column with footer pinned */
.wc-block-mini-cart__drawer.wc-block-components-drawer {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.wc-block-components-drawer__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  height: 100% !important;
}

.wc-block-mini-cart__template-part {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* Filled cart block — flex column, scrollable items */
.wp-block-woocommerce-filled-mini-cart-contents-block {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Items area — scrollable */
.wc-block-mini-cart__items {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Footer — always visible at bottom */
.wc-block-mini-cart__footer {
  flex-shrink: 0 !important;
  padding: 16px 20px 24px !important;
  border-top: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  position: sticky !important;
  bottom: 0 !important;
}

/* ============================================================
   MINI CART — hide duplicate product image + short description
   ============================================================ */

/* Hide the second/duplicate image (the hidden one WC renders) */
.wc-block-cart-item__image img[hidden],
.wc-block-cart-item__image a[hidden] {
  display: none !important;
}

/* Hide the product short description in the mini cart drawer */
.wc-block-mini-cart__products-table
.wc-block-components-product-metadata__description {
  display: none !important;
}

/* Hide short description in mini cart specifically */
.wc-block-mini-cart__items .wc-block-components-product-metadata__description,
.wc-block-mini-cart__items .wc-block-cart-item__wrap
.wc-block-components-product-metadata p {
  display: none !important;
}

/* ============================================================
   CUSTOMER ACCOUNT BLOCK — hide completely
   It's rendering invisibly but still taking up space and
   registering hover. Target the block directly.
   ============================================================ */

.wp-block-woocommerce-customer-account,
div[data-block-name="woocommerce/customer-account"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* ============================================================
   NAV SHIFT ON HOVER — fix Log in button border causing reflow
   Use box-shadow instead of border so layout doesn't shift
   ============================================================ */

.mff-nav-login.wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation-item.mff-nav-login .wp-block-navigation-item__content {
  border: 1px solid transparent !important;
  box-shadow: 0 0 0 1px var(--mff-border-dark) !important;
  transition: box-shadow 0.15s ease !important;
}

.mff-nav-login.wp-block-navigation-item .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.mff-nav-login .wp-block-navigation-item__content:hover {
  border: 1px solid transparent !important;
  box-shadow: 0 0 0 1px var(--mff-text) !important;
}

/* Also fix on mobile */
.mff-nav-login .wp-block-navigation-item__content {
  border: 1px solid transparent !important;
  box-shadow: 0 0 0 1px var(--mff-border-dark) !important;
}

/* ============================================================
   MINI CART — kill black dot (list-style bullet)
   ============================================================ */

/* If mini cart is inside a li, kill the bullet */
li.wp-block-woocommerce-mini-cart,
li > .wc-block-mini-cart,
.wp-block-navigation-item .wc-block-mini-cart {
  list-style: none !important;
  list-style-type: none !important;
}

li.wp-block-woocommerce-mini-cart::before,
li.wp-block-woocommerce-mini-cart::marker {
  display: none !important;
  content: none !important;
}

/* Also kill any stray ::after on the nav actions group */
.mff-nav-actions > *::after,
.mff-nav-actions > *::before {
  content: none !important;
  display: none !important;
}

/* ============================================================
   MINI CART DRAWER — footer padding off screen bottom
   ============================================================ */

.wc-block-mini-cart__footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   FOOTER — ensure it always shows at bottom of page
   ============================================================ */

/* Site needs min-height so footer is pushed down on short pages */
.wp-site-blocks,
#page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Main content takes all available space */
.wp-site-blocks > main,
.wp-site-blocks > [role="main"],
#page > main,
#main {
  flex: 1 !important;
}

/* Footer — always at bottom */
.wp-site-blocks > footer,
#page > footer,
footer.wp-block-template-part {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Also target our stub footer specifically */
.wp-block-group[tagname="footer"],
footer.wp-block-group {
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   NAV — kill ALL list markers in navigation globally
   The ::marker pseudo-element on <li> items is causing the
   black dot. Must target every possible nav list context.
   ============================================================ */

/* Kill markers on every li in any navigation block */
.wp-block-navigation li,
.wp-block-navigation ul li,
.wp-block-navigation__container li,
.wp-block-navigation__responsive-container li,
.wp-block-navigation__responsive-container-content li,
.mff-nav-links li,
.mff-nav-actions li,
.mff-nav-inner li,
.mff-site-header li {
  list-style: none !important;
  list-style-type: none !important;
}

.wp-block-navigation li::marker,
.wp-block-navigation ul li::marker,
.wp-block-navigation__container li::marker,
.wp-block-navigation__responsive-container li::marker,
.wp-block-navigation__responsive-container-content li::marker,
.mff-nav-links li::marker,
.mff-nav-actions li::marker,
.mff-nav-inner li::marker,
.mff-site-header li::marker {
  content: none !important;
  display: none !important;
}

/* Also kill on the ul containers */
.wp-block-navigation ul,
.wp-block-navigation__container,
.mff-nav-links ul,
.mff-nav-actions ul,
.mff-nav-inner ul,
.mff-site-header ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   NAV SHIFT — prevent layout reflow when hovering cart area
   The shift is caused by the mini cart li changing width or
   the scrollbar appearing on body when drawer opens.
   ============================================================ */

/* Prevent scrollbar from shifting page layout when drawer opens */
html {
  scrollbar-gutter: stable !important;
}

/* Prevent the nav actions area from changing size */
.mff-nav-actions {
  min-width: fit-content !important;
  white-space: nowrap !important;
}

/* Stabilize the mini cart li specifically */
.wp-block-navigation-item:has(.wc-block-mini-cart),
li:has(.wc-block-mini-cart) {
  list-style: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.wp-block-navigation-item:has(.wc-block-mini-cart)::marker,
li:has(.wc-block-mini-cart)::marker {
  content: none !important;
  display: none !important;
}

/* ============================================================
   NAV SHIFT — prevent body scroll lock from shifting layout
   WooCommerce mini cart JS adds overflow:hidden to body on
   hover which removes the scrollbar and shifts content.
   Fix: always reserve scrollbar gutter space.
   ============================================================ */

html,
html.wp-block-navigation-prevent-scroll {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

/* Prevent WooCommerce from hiding overflow on body on hover */
body.wc-block-mini-cart--open,
body:has(.wc-block-components-drawer__screen-overlay) {
  overflow-y: scroll !important;
  padding-right: 0 !important;
}

/* ============================================================
   FOOTER — fix it loading below viewport
   Remove the flex column approach that was pushing footer down
   ============================================================ */

/* Reset the aggressive flex approach that broke the footer */
.wp-site-blocks,
#page {
  display: block !important;
  min-height: unset !important;
  flex-direction: unset !important;
}

.wp-site-blocks > main,
#page > main,
#main {
  flex: unset !important;
}

/* Simpler sticky footer approach */
body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body > .wp-site-blocks,
body > #page {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

body > .wp-site-blocks > *:not(header):not(footer),
body > #page > *:not(header):not(footer) {
  flex: 1 !important;
}

/* ============================================================
   MINI CART DRAWER — fix footer buttons bottom padding
   ============================================================ */

.wc-block-mini-cart__footer {
  padding: 16px 20px 28px !important;
  border-top: 1px solid var(--mff-border) !important;
  background: var(--mff-white) !important;
  flex-shrink: 0 !important;
}

.wc-block-mini-cart__footer-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* Ensure buttons don't stretch to edge */
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-checkout {
  flex: 1 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   NAV SHIFT — root fix
   The nav links has flex:1 which causes it to resize when
   the mini cart changes state. Fix by using CSS grid on the
   nav inner so all three columns are fixed independently.
   ============================================================ */

.mff-nav-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 14px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Logo — left column, fixed size */
.mff-nav-inner > .wp-block-site-logo,
.mff-nav-inner > .mff-logo {
  grid-column: 1 !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

/* Nav links — center column, takes remaining space but centered */
.mff-nav-inner > .wp-block-navigation,
.mff-nav-inner > .mff-nav-links {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Nav actions — right column, fixed size, never grows */
.mff-nav-inner > .wp-block-group.mff-nav-actions {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {
  /* 3-column grid: logo | hamburger | cart+CTA — all on one row */
  .mff-nav-inner {
    grid-template-columns: auto 44px auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }

  /* Keep the nav block visible so the hamburger button inside it renders,
     but hide the links list — hamburger lives outside __container */
  .mff-nav-inner > .wp-block-navigation {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
  }

  .mff-nav-inner > .wp-block-navigation .wp-block-navigation__container:not(.wp-block-navigation__responsive-container-content .wp-block-navigation__container) {
    display: none !important;
  }

  /* Actions pinned to column 3, row 1 */
  .mff-nav-inner > .wp-block-group.mff-nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin-left: auto !important;
  }
}

/* ============================================================
   MINI CART OVERLAY — hide when drawer is closed
   WooCommerce adds --is-hidden class when overlay is closed
   and --with-slide-in when it's opening.
   ============================================================ */

/* Hide the overlay when WooCommerce marks it as hidden */
.wc-block-components-drawer__screen-overlay--is-hidden {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* Also hide the drawer itself when aria-hidden=true */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.wc-block-mini-cart__drawer[aria-hidden="false"] {
  visibility: visible !important;
  display: flex !important;
}

/* ============================================================
   MINI CART DRAWER — fix initial load width causing nav shift
   On first page load, the drawer renders at 390px wide with
   position:fixed before WooCommerce initializes it. This
   causes a layout shift on hover because the browser is
   accounting for it. Force width:0 when drawer is closed.
   ============================================================ */

/* Drawer when aria-hidden=true (closed state) */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Drawer when open */
.wc-block-mini-cart__drawer[aria-hidden="false"] {
  width: 390px !important;
  max-width: 90vw !important;
  overflow-y: auto !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============================================================
   NAV SHIFT — GPU compositor layer fix
   Promotes header elements to their own compositor layers
   which prevents subpixel rendering shifts on HiDPI displays
   when nearby elements change state.
   ============================================================ */

.mff-site-header {
  /* isolation:isolate creates a stacking context without creating a containing block,
     so position:fixed children (overlay menu) still escape to the viewport.
     will-change:transform and translateZ(0) were removed because they trap
     position:fixed descendants inside the header (58px instead of full-screen). */
  isolation: isolate !important;
}

.mff-nav-inner {
  will-change: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

.mff-nav-actions {
  will-change: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Isolate the mini cart from affecting surrounding layout */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart {
  contain: layout style !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Prevent the nav container from repainting on mini cart state change */
.mff-nav-bar {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: auto !important;
}

/* ============================================================
   MINI CART BUTTON — fix 4px width shift on hover
   The button padding changes from 6px to 4px on hover
   causing a 4px layout shift. Lock it to 6px always.
   ============================================================ */

.wc-block-mini-cart__button,
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus,
.wc-block-mini-cart__button:active {
  padding: 6px !important;
  width: 36px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.mff-site-footer {
  background: #1D1D1D !important;
  color: rgba(255,255,255,0.75) !important;
  width: 100% !important;
}

/* Main footer section */
.mff-footer-main {
  background: #1D1D1D !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.mff-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1.2fr !important;
  gap: 48px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Brand column */
.mff-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.mff-footer-logo img {
  height: 32px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

.mff-footer-tagline {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
}

/* Social icons */
.mff-footer-social {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.mff-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.mff-social-link:hover {
  background: var(--mff-red) !important;
  color: #fff !important;
}

/* Nav columns */
.mff-footer-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mff-footer-heading {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 0 4px !important;
}

/* Footer nav links */
.mff-footer-nav .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mff-footer-nav .wp-block-navigation-item__content {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
  display: block !important;
}

.mff-footer-nav .wp-block-navigation-item__content:hover {
  color: #fff !important;
}

/* CTA column */
.mff-footer-cta-text {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
}

.mff-footer-btn .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
}

.mff-footer-btn .wp-block-button__link:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Bottom bar */
.mff-footer-bottom {
  background: rgba(0,0,0,0.25) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.mff-footer-bottom-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.mff-footer-copyright {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.35) !important;
  margin: 0 !important;
}

/* Legal links */
.mff-footer-legal {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}

.mff-footer-legal .wp-block-navigation-item__content {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.35) !important;
  text-decoration: none !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

.mff-footer-legal .wp-block-navigation-item__content:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* Footer mobile */
@media (max-width: 768px) {
  .mff-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .mff-footer-main {
    padding: 40px 20px 36px !important;
  }

  .mff-footer-bottom {
    padding: 16px 20px !important;
  }

  .mff-footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ============================================================
   FOOTER — top padding fix
   ============================================================ */

.mff-footer-main {
  padding-top: 64px !important;
}

/* ============================================================
   CART + CHECKOUT — wider containers on mobile
   ============================================================ */

@media (max-width: 768px) {

  /* Cart page — remove side padding constraints */
  .wc-block-cart,
  .wp-block-woocommerce-cart,
  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Checkout page — same */
  .wc-block-checkout,
  .wp-block-woocommerce-checkout,
  .wc-block-checkout__main,
  .wc-block-checkout__form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* The inner content containers */
  .wc-block-cart-items,
  .wc-block-components-totals-wrapper,
  .wp-block-woocommerce-cart-order-summary-block,
  .wp-block-woocommerce-checkout-order-summary-block {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 8px !important;
  }

  /* Page content wrapper — remove horizontal padding on mobile */
  .wp-block-woocommerce-cart.alignwide,
  .wp-block-woocommerce-checkout.alignwide {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   CART — "Proceed to checkout" sticky button
   Remove shadow/gradient above it, stop at footer
   ============================================================ */

/* Remove the gradient shadow above the sticky button */
.wc-block-cart__submit-container,
.wc-block-cart__submit-container::before,
.wp-block-woocommerce-proceed-to-checkout-block::before,
.wc-block-components-checkout-place-order-button-container::before {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* The sticky proceed to checkout button wrapper */
.wc-block-cart__submit-container,
.wp-block-woocommerce-proceed-to-checkout-block {
  position: sticky !important;
  bottom: 0 !important;
  background: var(--mff-off-white) !important;
  padding: 16px !important;
  border-top: 1px solid var(--mff-border) !important;
  z-index: 100 !important;
  /* Stop at footer by using margin-bottom to push footer up */
  box-shadow: none !important;
}

/* Ensure the proceed to checkout button doesn't overlap footer */
.wp-block-woocommerce-cart {
  display: flex !important;
  flex-direction: column !important;
}

/* On mobile, ensure footer pushes the sticky button up naturally */
@media (max-width: 768px) {
  .wc-block-cart__submit-container,
  .wp-block-woocommerce-proceed-to-checkout-block {
    /* Use margin instead of sticky when near footer */
    margin-bottom: 0 !important;
  }

  /* Remove any gradient that appears above the sticky button */
  .wc-block-cart__submit-container::before,
  .wp-block-woocommerce-proceed-to-checkout-block::before {
    display: none !important;
  }
}

/* ============================================================
   CART — sticky button correct class + shadow fix
   ============================================================ */

/* Remove the gradient shadow above sticky button */
.wc-block-cart__submit-container--sticky::before {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Sticky container styling */
.wc-block-cart__submit-container--sticky {
  position: sticky !important;
  bottom: 0 !important;
  background: var(--mff-off-white) !important;
  border-top: 1px solid var(--mff-border) !important;
  padding: 16px !important;
  z-index: 100 !important;
  box-shadow: none !important;
}

/* ============================================================
   CART + CHECKOUT — fix narrow container on mobile
   The 40px padding is coming from the block's own inline
   padding. We need to reduce it on mobile.
   ============================================================ */

@media (max-width: 768px) {
  /* Target the actual cart block with padding */
  .wp-block-woocommerce-cart {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .wp-block-woocommerce-checkout {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Also target any constrained layout wrappers */
  .wp-block-woocommerce-cart > .wp-block-group,
  .wp-block-woocommerce-cart > div[class*="is-layout"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Cart items container */
  .wc-block-cart__main,
  .wp-block-woocommerce-cart-line-items-block,
  .wp-block-woocommerce-cart-cross-sells-block,
  .wp-block-woocommerce-cart-order-summary-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   FOOTER — bottom padding symmetry
   ============================================================ */

.mff-footer-main {
  padding-bottom: 64px !important;
}

/* ============================================================
   HOMEPAGE — Global section defaults
   ============================================================ */

.mff-homepage section,
.mff-homepage .wp-block-group {
  box-sizing: border-box !important;
}

.mff-red { color: var(--mff-red) !important; }

.mff-eyebrow {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin: 0 0 12px !important;
}

.mff-section-header {
  text-align: center !important;
  max-width: 620px !important;
  margin: 0 auto 56px !important;
}

.mff-section-title {
  font-family: var(--mff-font-display) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mff-text) !important;
  margin: 0 !important;
}

.mff-btn-primary .wp-block-button__link,
a.mff-pricing-btn {
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
  border: none !important;
}

.mff-btn-primary .wp-block-button__link:hover,
a.mff-pricing-btn:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

.mff-btn-large .wp-block-button__link {
  font-size: 16px !important;
  padding: 17px 36px !important;
}

/* ============================================================
   HERO
   ============================================================ */

.mff-hero {
  background: var(--mff-off-white) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.mff-hero-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 88vh !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  gap: 0 !important;
  align-items: center !important;
}

/* Hero copy */
.mff-hero-copy {
  padding: 80px 64px 80px 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  justify-content: center !important;
}

.mff-hero-eyebrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin: 0 !important;
}

.mff-hero-headline {
  font-family: var(--mff-font-display) !important;
  font-size: clamp(36px, 4.5vw, 62px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 !important;
}

.mff-hero-subhead {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  max-width: 480px !important;
  margin: 0 !important;
}

.mff-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.mff-hero-note {
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  margin: 0 !important;
}

.mff-hero-proof {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 8px !important;
}

.mff-stars {
  color: #F5A623 !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}

.mff-hero-proof-text {
  font-size: 13px !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

/* Hero image */
.mff-hero-image-wrap {
  position: relative !important;
  height: 100% !important;
  min-height: 88vh !important;
  overflow: hidden !important;
}

.mff-hero-image {
  margin: 0 !important;
  height: 100% !important;
}

.mff-hero-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Floating recipe card */
.mff-hero-card {
  position: absolute !important;
  bottom: 40px !important;
  left: -24px !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  min-width: 220px !important;
}

.mff-hero-card-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin-bottom: 4px !important;
}

.mff-hero-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin-bottom: 10px !important;
}

.mff-hero-card-macros {
  display: flex !important;
  gap: 12px !important;
}

.mff-hero-card-macros span {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
}

.mff-hero-card-macros em {
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--mff-text-faint) !important;
  font-size: 13px !important;
  display: block !important;
}

/* ============================================================
   STATS BAR
   ============================================================ */

.mff-stats-bar {
  background: var(--mff-text) !important;
  padding: 32px 40px !important;
}

.mff-stats-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.mff-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 32px !important;
}

.mff-stat-number {
  font-family: var(--mff-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.mff-stat-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.mff-stat-divider {
  width: 1px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.12) !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   GALLERY STRIP — auto-scrolling
   ============================================================ */

.mff-gallery-strip {
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mff-gallery-track {
  display: flex !important;
  gap: 12px !important;
  animation: mff-gallery-scroll 50s linear infinite !important;
  width: max-content !important;
}

@keyframes mff-gallery-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mff-gallery-strip:hover .mff-gallery-track {
  animation-play-state: paused !important;
}

.mff-gallery-item {
  flex-shrink: 0 !important;
  width: 260px !important;
  height: 220px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.mff-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.mff-gallery-item:hover img {
  transform: scale(1.04) !important;
}

/* ============================================================
   FEATURES
   ============================================================ */

.mff-features {
  padding: 96px 40px !important;
  background: var(--mff-off-white) !important;
}

.mff-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

.mff-feature-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  border: 1px solid var(--mff-border) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.mff-feature-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

.mff-feature-icon {
  width: 44px !important;
  height: 44px !important;
  background: #FFF0EF !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mff-red) !important;
  margin-bottom: 16px !important;
}

.mff-feature-title {
  font-family: var(--mff-font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin: 0 0 8px !important;
}

.mff-feature-desc {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

/* ============================================================
   APP SECTION
   ============================================================ */

.mff-app-section {
  padding: 96px 40px !important;
  background: #fff !important;
}

.mff-app-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.mff-app-mockup-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mff-app-mockup img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.mff-app-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.mff-app-copy .mff-section-title {
  text-align: left !important;
}

.mff-app-desc {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

.mff-app-checklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mff-app-checklist li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  line-height: 1.5 !important;
}

.mff-app-checklist li::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--mff-red) !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px !important;
}

/* ============================================================
   REVIEWS
   ============================================================ */

.mff-reviews {
  padding: 96px 40px !important;
  background: var(--mff-off-white) !important;
}

.mff-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

.mff-review-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  border: 1px solid var(--mff-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mff-review-featured {
  border-color: var(--mff-border) !important;
  box-shadow: none !important;
}

.mff-review-stars {
  color: #F5A623 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
}

.mff-review-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--mff-text) !important;
  font-style: italic !important;
  margin: 0 !important;
  flex: 1 !important;
}

.mff-review-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mff-review-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mff-review-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

.mff-review-tag {
  font-size: 13px !important;
  color: var(--mff-text-faint) !important;
  margin-top: 2px !important;
}

/* ============================================================
   PRICING
   ============================================================ */

.mff-pricing {
  padding: 96px 40px !important;
  background: #fff !important;
}

.mff-pricing-subtitle {
  font-size: 15px !important;
  color: var(--mff-text-muted) !important;
  margin: 12px 0 0 !important;
}

.mff-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  align-items: center !important;
}

.mff-pricing-card {
  background: var(--mff-off-white) !important;
  border-radius: 20px !important;
  padding: 44px 28px 36px !important;
  border: 2px solid transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  text-align: center !important;
  overflow: visible !important;
}

.mff-pricing-featured {
  background: var(--mff-text) !important;
  border-color: var(--mff-text) !important;
  transform: scale(1.04) !important;
  z-index: 1 !important;
}

.mff-pricing-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

/* Subtle variant for secondary badges (Most Popular) — doesn't compete with Best Value */
.mff-pricing-badge-subtle {
  position: absolute !important;
  top: -13px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--mff-off-white) !important;
  color: var(--mff-text-muted) !important;
  border: 1px solid var(--mff-border) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

.mff-pricing-period {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mff-text-muted) !important;
}

.mff-pricing-featured .mff-pricing-period {
  color: rgba(255,255,255,0.6) !important;
}

.mff-pricing-price {
  font-family: var(--mff-font-display) !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--mff-text) !important;
  line-height: 1 !important;
}

.mff-pricing-featured .mff-pricing-price {
  color: #fff !important;
}

.mff-pricing-price span {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--mff-text-faint) !important;
}

.mff-pricing-featured .mff-pricing-price span {
  color: rgba(255,255,255,0.5) !important;
}

.mff-pricing-desc {
  font-size: 13px !important;
  color: var(--mff-text-muted) !important;
  line-height: 1.6 !important;
}

.mff-pricing-featured .mff-pricing-desc {
  color: rgba(255,255,255,0.65) !important;
}

a.mff-pricing-btn-outline {
  display: block !important;
  text-align: center !important;
  padding: 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--mff-border-dark) !important;
  color: var(--mff-text) !important;
  background: transparent !important;
  transition: border-color 0.15s ease !important;
}

a.mff-pricing-btn-outline:hover {
  border-color: var(--mff-text) !important;
}

a.mff-pricing-btn {
  display: block !important;
  text-align: center !important;
  padding: 13px !important;
  border-radius: 10px !important;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.mff-final-cta {
  padding: 96px 40px !important;
  background: var(--mff-off-white) !important;
  text-align: center !important;
}

.mff-cta-headline {
  font-family: var(--mff-font-display) !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mff-text) !important;
  margin: 0 0 16px !important;
}

.mff-cta-sub {
  font-size: 16px !important;
  color: var(--mff-text-muted) !important;
  max-width: 480px !important;
  margin: 0 auto 36px !important;
  line-height: 1.6 !important;
}

.mff-cta-note {
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  margin: 16px 0 0 !important;
}

/* ============================================================
   HOMEPAGE MOBILE
   ============================================================ */

@media (max-width: 1024px) {
  .mff-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mff-app-inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    text-align: center !important;
  }

  .mff-app-copy .mff-section-title {
    text-align: center !important;
  }

  .mff-app-checklist {
    text-align: left !important;
  }

  .mff-app-mockup-wrap {
    order: -1 !important;
  }

  .mff-app-mockup img {
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  .mff-hero-inner {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }

  .mff-hero-copy {
    padding: 48px 20px 36px !important;
    gap: 18px !important;
  }

  .mff-hero-image-wrap {
    min-height: 320px !important;
    height: 320px !important;
  }

  .mff-hero-card {
    left: 16px !important;
    bottom: 20px !important;
  }

  .mff-stats-inner {
    gap: 24px 0 !important;
  }

  .mff-stat {
    padding: 0 24px !important;
  }

  .mff-stat-divider {
    display: none !important;
  }

  .mff-stats-bar {
    padding: 28px 20px !important;
  }

  .mff-features {
    padding: 60px 20px !important;
  }

  .mff-features-grid {
    grid-template-columns: 1fr !important;
  }

  .mff-app-section {
    padding: 60px 20px !important;
  }

  .mff-reviews {
    padding: 60px 20px !important;
  }

  .mff-reviews-grid {
    grid-template-columns: 1fr !important;
  }

  .mff-review-featured {
    order: -1 !important;
  }

  .mff-pricing {
    padding: 60px 20px !important;
  }

  .mff-pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
  }

  .mff-pricing-featured {
    transform: none !important;
    order: -1 !important;
  }

  .mff-final-cta {
    padding: 60px 20px !important;
  }

  .mff-gallery-item {
    width: 200px !important;
    height: 170px !important;
  }
}

/* ============================================================
   HOMEPAGE FIXES
   ============================================================ */

/* Pricing grid — give room for the scaled featured card badge */
.mff-pricing {
  padding-top: 112px !important; /* extra space for the badge */
}

.mff-pricing-grid {
  overflow: visible !important;
  padding-top: 20px !important; /* space for Best Value badge */
}

/* Featured card — ensure badge isn't clipped */
.mff-pricing-featured {
  overflow: visible !important;
}

/* Pricing section header — reduce bottom margin so it connects better */
.mff-pricing .mff-section-header {
  margin-bottom: 48px !important;
}

/* ============================================================
   HOMEPAGE FIXES — hero card overflow + nav/footer CTA text
   ============================================================ */

/* Hero image wrap — allow card to overflow bottom edge */
.mff-hero-image-wrap {
  overflow: visible !important;
}

/* Hero card — ensure it's fully visible */
.mff-hero-card {
  z-index: 10 !important;
  bottom: 32px !important;
}

/* The hero section itself needs overflow visible for the card */
.mff-hero {
  overflow: visible !important;
}

/* But clip the image itself, not the whole section */
.mff-hero-image {
  overflow: hidden !important;
}

.mff-hero-image img {
  border-radius: 0 !important;
}

/* Nav CTA — update label in CSS just in case WP caches old text */
.mff-nav-cta .wp-block-button__link {
  /* text handled in HTML */
}

/* ============================================================
   HOMEPAGE — fix final CTA section text centering
   ============================================================ */

.mff-final-cta,
.mff-final-cta .wp-block-group {
  text-align: center !important;
  align-items: center !important;
}

.mff-final-cta .wp-block-buttons {
  justify-content: center !important;
  display: flex !important;
}

.mff-final-cta p,
.mff-final-cta h2 {
  text-align: center !important;
  width: 100% !important;
}

.mff-cta-note {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* ============================================================
   APP SECTION — three device mockup stack
   Laptop behind, tablet overlapping bottom right,
   mobile overlapping bottom left in front
   ============================================================ */

.mff-device-stack {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  /* Height determined by laptop image aspect ratio */
  padding-bottom: 20px !important;
}

.mff-device-laptop {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 16px 48px rgba(0,0,0,0.15)) !important;
}

.mff-device-tablet {
  position: absolute !important;
  width: 42% !important;
  height: auto !important;
  bottom: -10px !important;
  right: -24px !important;
  z-index: 2 !important;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.18)) !important;
}

.mff-device-mobile {
  position: absolute !important;
  width: 22% !important;
  height: auto !important;
  bottom: -20px !important;
  left: 12px !important;
  z-index: 3 !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2)) !important;
}

/* On mobile — just show laptop full width, hide others */
@media (max-width: 768px) {
  .mff-device-stack {
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }

  .mff-device-tablet,
  .mff-device-mobile {
    display: none !important;
  }

  .mff-device-laptop {
    max-width: 400px !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   APP SECTION — single pre-composed devices mockup
   Image has a black background — remove it and let it
   sit naturally with some padding
   ============================================================ */

.mff-app-mockup img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  /* The mockup image has a black bg — mix-blend-mode makes
     it transparent so it floats on the section background */
  mix-blend-mode: multiply !important;
  border-radius: 12px !important;
}

/* Override the multiply blend if section bg is dark */
.mff-app-section .mff-app-mockup img {
  mix-blend-mode: normal !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}

/* ============================================================
   APP SECTION — remove white card box, size image properly
   ============================================================ */

/* Remove the white card background from the mockup wrap */
.mff-app-mockup-wrap,
.mff-app-mockup-wrap.wp-block-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Size the mockup image to fill the column */
.mff-app-mockup {
  margin: 0 !important;
  width: 100% !important;
}

.mff-app-mockup img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   FINAL CTA — fix off-center text alignment
   The section has padding-left:40px but the content width
   is 1200px starting at left:40px, making it appear left-shifted.
   Use symmetric padding and auto margins to truly center.
   ============================================================ */

.mff-final-cta {
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* Constrain and center all direct children */
.mff-final-cta > * {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Headline — wider max-width */
.mff-cta-headline {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Subtext */
.mff-cta-sub {
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Button wrapper */
.mff-final-cta .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 700px !important;
}

/* Note text */
.mff-cta-note {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: block !important;
}

@media (max-width: 768px) {
  .mff-final-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   MFF APP PAGE (/mff-app-recipes/)
   ============================================================ */

/* ---- Hero ---- */
.mff-ap-hero {
  background: var(--mff-off-white) !important;
  padding: 80px 40px 72px !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

.mff-ap-hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.mff-ap-hero .mff-eyebrow {
  margin-bottom: 16px !important;
}

.mff-ap-hero-headline {
  font-family: var(--mff-font-display) !important;
  font-size: clamp(36px, 5vw, 58px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--mff-text) !important;
  margin: 0 0 20px !important;
  text-transform: uppercase !important;
}

.mff-ap-hero-subhead {
  font-family: var(--mff-font-body) !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  max-width: 600px !important;
  margin: 0 auto 32px !important;
}

.mff-ap-hero-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.mff-ap-hero-note {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--mff-text-faint) !important;
  margin: 0 0 40px !important;
}

.mff-ap-hero-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--mff-border) !important;
  /* Break out of the 760px hero-content constraint */
  width: calc(100% + 80px) !important;
  margin-left: -40px !important;
  margin-right: -40px !important;
}

.mff-ap-hero-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.mff-ap-hero-stat strong {
  font-family: var(--mff-font-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  line-height: 1.1 !important;
  display: block !important;
}

.mff-ap-hero-stat span {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--mff-text-muted) !important;
  margin-top: 4px !important;
  display: block !important;
}

.mff-ap-hero-stat-divider {
  width: 1px !important;
  height: 36px !important;
  background: var(--mff-border) !important;
}

/* ---- Shared button styles for app page ---- */
.mff-btn-primary {
  display: inline-block !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  transition: background 0.2s ease !important;
}

.mff-btn-primary:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

.mff-btn-ghost {
  display: inline-block !important;
  background: transparent !important;
  color: var(--mff-text) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--mff-border-dark) !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

.mff-btn-ghost:hover {
  border-color: var(--mff-text) !important;
  color: var(--mff-text) !important;
}

.mff-btn-outline-dark {
  display: inline-block !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  transition: border-color 0.2s ease !important;
}

.mff-btn-outline-dark:hover {
  border-color: rgba(255,255,255,0.8) !important;
  color: #fff !important;
}

/* ---- How it works ---- */
.mff-ap-how {
  padding: 80px 40px !important;
  background: #fff !important;
}

.mff-ap-steps {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  max-width: 960px !important;
  margin: 48px auto 0 !important;
}

.mff-ap-step {
  flex: 1 !important;
  padding: 32px !important;
  background: var(--mff-off-white) !important;
  border-radius: 16px !important;
  border: 1px solid var(--mff-border) !important;
}

.mff-ap-step-number {
  font-family: var(--mff-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--mff-red) !important;
  margin-bottom: 12px !important;
}

.mff-ap-step-icon {
  width: 44px !important;
  height: 44px !important;
  background: #fff !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mff-red) !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--mff-border) !important;
}

.mff-ap-step-title {
  font-family: var(--mff-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
}

.mff-ap-step-desc {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

.mff-ap-step-arrow {
  flex: 0 0 auto !important;
  font-size: 20px !important;
  color: var(--mff-border-dark) !important;
  padding: 0 16px !important;
  align-self: center !important;
}

/* ---- Features grid ---- */
.mff-ap-features {
  padding: 80px 40px !important;
  background: var(--mff-off-white) !important;
}

.mff-ap-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  max-width: 1040px !important;
  margin: 48px auto 0 !important;
}

.mff-ap-feature-item {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 28px !important;
  border: 1px solid var(--mff-border) !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  transition: box-shadow 0.2s ease !important;
}

.mff-ap-feature-item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

.mff-ap-feature-icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: #FFF0EF !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mff-red) !important;
}

.mff-ap-feature-body h4 {
  font-family: var(--mff-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 0 8px !important;
}

.mff-ap-feature-body p {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

/* ---- App mockup section ---- */
.mff-ap-mockup-section {
  padding: 80px 40px !important;
  background: #fff !important;
}

.mff-ap-mockup-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.mff-ap-mockup-copy .mff-eyebrow {
  margin-bottom: 12px !important;
}

.mff-ap-mockup-desc {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  margin: 16px 0 24px !important;
}

.mff-ap-mockup-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ---- Before/After results ---- */
.mff-ap-results {
  padding: 80px 40px !important;
  background: var(--mff-off-white) !important;
}

.mff-ap-results-sub {
  font-family: var(--mff-font-body) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--mff-text-muted) !important;
  margin-top: 8px !important;
}

.mff-ap-before-after {
  margin-top: 48px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

.mff-ap-ba-card {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--mff-border) !important;
}

.mff-ap-ba-card img {
  width: 100% !important;
  height: 480px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.mff-ap-ba-quote {
  padding: 20px 24px !important;
}

.mff-ap-ba-quote p {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--mff-text) !important;
  margin: 0 0 10px !important;
}

.mff-ap-ba-quote cite {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--mff-text-muted) !important;
}

/* ---- Reviews (app page variant — 2-col at wide) ---- */
.mff-ap-reviews {
  padding: 80px 40px !important;
  background: #fff !important;
}

.mff-ap-reviews-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: 48px !important;
}

/* ---- Daily Lift upsell ---- */
.mff-ap-dl-upsell {
  background: var(--mff-black) !important;
  padding: 0 !important;
}

.mff-ap-dl-inner {
  padding: 80px 40px !important;
}

.mff-ap-dl-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.mff-eyebrow-light {
  color: rgba(255,255,255,0.5) !important;
}

.mff-ap-dl-title {
  color: #fff !important;
  margin-bottom: 16px !important;
}

.mff-ap-dl-desc {
  font-family: var(--mff-font-body) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 0 28px !important;
}

.mff-ap-dl-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mff-ap-dl-checklist li {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.75) !important;
  padding-left: 24px !important;
  position: relative !important;
}

.mff-ap-dl-checklist li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--mff-red) !important;
  font-weight: 700 !important;
}

.mff-ap-dl-options {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.mff-ap-dl-option {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  min-width: 180px !important;
}

.mff-ap-dl-option-primary {
  border-color: var(--mff-red) !important;
  background: rgba(242,79,72,0.08) !important;
  position: relative !important;
}

.mff-ap-dl-option-label {
  font-family: var(--mff-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin-bottom: 6px !important;
}

.mff-ap-dl-option-name {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.mff-ap-dl-option-price {
  font-family: var(--mff-font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 16px !important;
}

.mff-ap-dl-option-price span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.5) !important;
}

.mff-ap-dl-note {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 !important;
}

.mff-ap-dl-note a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: underline !important;
}

/* Badge / combo visual */
.mff-ap-dl-badge {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  text-align: center !important;
}

.mff-ap-dl-badge-top {
  font-family: var(--mff-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin-bottom: 20px !important;
}

.mff-ap-dl-badge-combo {
  font-family: var(--mff-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

.mff-ap-dl-badge-combo span {
  font-size: 26px !important;
  color: var(--mff-red) !important;
  display: block !important;
  line-height: 1 !important;
  margin: 10px 0 !important;
}

.mff-ap-dl-badge-price {
  font-family: var(--mff-font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 20px 0 8px !important;
}

.mff-ap-dl-badge-sub {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ---- Pricing Daily Lift expandable add-on panel ---- */
.mff-pricing-dl-add {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.mff-pricing-dl-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  background: none !important;
  border: 1.5px dashed var(--mff-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-secondary) !important;
  padding: 10px 14px !important;
  text-align: center !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}

.mff-pricing-dl-toggle:hover {
  border-color: var(--mff-red) !important;
  color: var(--mff-red) !important;
  background: rgba(242,79,72,0.04) !important;
}

.mff-pricing-dl-toggle-icon {
  font-size: 15px !important;
  color: var(--mff-red) !important;
  line-height: 1 !important;
  transition: transform 0.2s !important;
  flex-shrink: 0 !important;
}

.mff-pricing-dl-toggle.is-open .mff-pricing-dl-toggle-icon {
  transform: rotate(45deg) !important;
}

.mff-pricing-dl-toggle.is-open {
  border-style: solid !important;
  border-color: rgba(242,79,72,0.35) !important;
  color: var(--mff-text) !important;
}

.mff-pricing-dl-panel {
  display: none !important;
  margin-top: 14px !important;
  text-align: left !important;
}

.mff-pricing-dl-panel.is-open {
  display: block !important;
}

.mff-pricing-dl-panel-label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--mff-text-faint) !important;
  margin-bottom: 8px !important;
}

.mff-pricing-dl-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mff-pricing-dl-option-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--mff-border) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.mff-pricing-dl-option-row:hover {
  border-color: var(--mff-red) !important;
  background: rgba(242,79,72,0.04) !important;
}

.mff-pricing-dl-option-row input[type="radio"] {
  accent-color: var(--mff-red) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.mff-pricing-dl-option-name {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mff-text) !important;
  flex: 1 !important;
}

.mff-pricing-dl-option-price {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--mff-text-faint) !important;
}

.mff-pricing-dl-add-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px !important;
  background: var(--mff-text) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}

.mff-pricing-dl-add-btn:hover {
  background: var(--mff-red) !important;
  color: #fff !important;
}

/* Featured card overrides */
.mff-pricing-featured .mff-pricing-dl-add {
  border-top-color: rgba(255,255,255,0.2) !important;
}

.mff-pricing-featured .mff-pricing-dl-toggle {
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.8) !important;
}

.mff-pricing-featured .mff-pricing-dl-toggle:hover {
  border-color: #fff !important;
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}

.mff-pricing-featured .mff-pricing-dl-toggle.is-open {
  border-style: solid !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

.mff-pricing-featured .mff-pricing-dl-option-row {
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.05) !important;
}

.mff-pricing-featured .mff-pricing-dl-option-row:hover {
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.1) !important;
}

.mff-pricing-featured .mff-pricing-dl-option-name {
  color: #fff !important;
}

.mff-pricing-featured .mff-pricing-dl-option-price {
  color: rgba(255,255,255,0.5) !important;
}

.mff-pricing-featured .mff-pricing-dl-panel-label {
  color: rgba(255,255,255,0.4) !important;
}

.mff-pricing-featured .mff-pricing-dl-add-btn {
  background: rgba(255,255,255,0.15) !important;
}

.mff-pricing-featured .mff-pricing-dl-add-btn:hover {
  background: var(--mff-red) !important;
}

/* ---- FAQ ---- */
.mff-ap-faq {
  padding: 80px 40px !important;
  background: var(--mff-off-white) !important;
}

.mff-ap-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 1040px !important;
  margin: 48px auto 0 !important;
}

.mff-ap-faq-item {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  border: 1px solid var(--mff-border) !important;
}

.mff-ap-faq-q {
  font-family: var(--mff-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
}

.mff-ap-faq-a {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

/* ---- App page pricing variant ---- */
.mff-ap-pricing {
  padding: 80px 40px !important;
  background: #fff !important;
}

/* ============================================================
   MFF APP PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .mff-ap-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mff-ap-dl-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .mff-ap-dl-visual {
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .mff-ap-hero {
    padding: 56px 20px 48px !important;
  }

  .mff-ap-hero-headline {
    font-size: clamp(30px, 8vw, 44px) !important;
  }

  .mff-ap-hero-stats {
    gap: 16px 0 !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mff-ap-hero-stat {
    padding: 0 16px !important;
  }

  .mff-ap-hero-stat-divider {
    display: none !important;
  }

  .mff-ap-how,
  .mff-ap-features,
  .mff-ap-mockup-section,
  .mff-ap-results,
  .mff-ap-reviews,
  .mff-ap-faq,
  .mff-ap-pricing {
    padding: 60px 20px !important;
  }

  .mff-ap-dl-inner {
    padding: 60px 20px !important;
  }

  .mff-ap-steps {
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }

  .mff-ap-step-arrow {
    transform: rotate(90deg) !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .mff-ap-features-grid {
    grid-template-columns: 1fr !important;
    margin-top: 32px !important;
  }

  .mff-ap-mockup-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .mff-ap-reviews-grid {
    grid-template-columns: 1fr !important;
  }

  .mff-ap-before-after {
    grid-template-columns: 1fr !important;
  }

  .mff-ap-faq-grid {
    grid-template-columns: 1fr !important;
    margin-top: 32px !important;
  }

  .mff-ap-dl-options {
    flex-direction: column !important;
  }

  .mff-ap-dl-option {
    min-width: unset !important;
  }

  .mff-ap-hero-actions {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ---- Founder Story ---- */
.mff-ap-founders {
  background: var(--mff-black) !important;
  padding: 0 !important;
}

.mff-ap-founders-inner {
  padding: 80px 40px !important;
}

.mff-ap-founders-content {
  display: grid !important;
  grid-template-columns: 1fr 480px !important;
  gap: 72px !important;
  align-items: start !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.mff-ap-founders .mff-eyebrow {
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 16px !important;
}

.mff-ap-founders-title {
  color: #fff !important;
  margin-bottom: 28px !important;
}

.mff-ap-founders-text {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 0 16px !important;
}

.mff-ap-founders-text strong {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
}

.mff-ap-founders-sig {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.4) !important;
  font-style: italic !important;
}

.mff-ap-founders-photos {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.mff-ap-founder-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
}

.mff-ap-founder-card img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.mff-ap-founder-caption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
}

.mff-ap-founder-caption strong {
  font-family: var(--mff-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
}

.mff-ap-founder-caption span {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.4) !important;
}

@media (max-width: 1024px) {
  .mff-ap-founders-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .mff-ap-founders-photos {
    flex-direction: row !important;
  }

  .mff-ap-founder-card {
    flex: 1 !important;
  }
}

@media (max-width: 768px) {
  .mff-ap-founders-inner {
    padding: 60px 20px !important;
  }

  .mff-ap-founders-photos {
    flex-direction: column !important;
  }

  .mff-ap-founder-card img {
    height: 320px !important;
  }
}

/* ---- Mid-page pricing CTA ---- */
.mff-ap-mid-cta {
  background: var(--mff-black) !important;
  padding: 0 !important;
}

.mff-ap-mid-cta-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 36px 40px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.mff-ap-mid-cta-headline {
  font-family: var(--mff-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}

.mff-ap-mid-cta-sub {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 !important;
}

.mff-ap-mid-cta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-shrink: 0 !important;
}

.mff-ap-mid-cta-actions .mff-btn-primary {
  min-width: 200px !important;
  text-align: center !important;
  padding: 16px 32px !important;
}

.mff-ap-mid-cta-link {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.mff-ap-mid-cta-link:hover {
  color: rgba(255,255,255,0.85) !important;
}

@media (max-width: 768px) {
  .mff-ap-mid-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 20px !important;
    gap: 20px !important;
  }

  .mff-ap-mid-cta-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .mff-ap-mid-cta-actions .mff-btn-primary {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ---- Klaviyo reviews wrapper on MFF App page ---- */
.mff-klaviyo-reviews-wrap {
  margin-top: 48px !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid var(--mff-border) !important;
  overflow: hidden !important;
  padding: 8px 0 !important;
}

/* Ensure Klaviyo's internal elements use our body font */
.mff-klaviyo-reviews-wrap *,
#klaviyo-reviews-all * {
  font-family: var(--mff-font-body), Arial, sans-serif !important;
}

/* Klaviyo summary header — match our section styling */
#klaviyo-reviews-all .kl_reviews__summary__header {
  font-family: var(--mff-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
}

/* Klaviyo star colors — match our gold */
#klaviyo-reviews-all .kl_reviews__star_filled,
#klaviyo-reviews-all .kl_reviews__star_half {
  color: #F5A623 !important;
  fill: #F5A623 !important;
}

/* Klaviyo "Write a review" button — match our red style */
#klaviyo-reviews-all .kl_reviews__write_review_button,
#klaviyo-reviews-all button[class*="write_review"] {
  background: var(--mff-red) !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
}

#klaviyo-reviews-all .kl_reviews__write_review_button:hover {
  background: var(--mff-red-dark) !important;
}

@media (max-width: 768px) {
  .mff-klaviyo-reviews-wrap {
    margin-top: 32px !important;
    border-radius: 12px !important;
  }
}

/* ============================================================
   MFF APP PAGE — Hero split layout with food mosaic
   ============================================================ */

.mff-ap-hero-split {
  display: grid !important;
  grid-template-columns: 1fr 460px !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.mff-ap-hero-copy-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.mff-ap-hero-copy-col .mff-ap-hero-headline {
  text-align: left !important;
}

.mff-ap-hero-copy-col .mff-ap-hero-subhead {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mff-ap-hero-copy-col .mff-ap-hero-actions {
  justify-content: flex-start !important;
}

.mff-ap-hero-copy-col .mff-ap-hero-stats {
  justify-content: flex-start !important;
  padding-top: 24px !important;
}

/* Food photo mosaic — 2×2 grid */
.mff-ap-hero-mosaic {
  flex-shrink: 0 !important;
}

.mff-ap-hero-mosaic-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 10px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.mff-ap-hero-mosaic-grid img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.mff-ap-hero-mosaic-grid img:hover {
  transform: scale(1.04) !important;
}

/* Round outer corners only */
.mff-ap-hero-mosaic-grid img:first-child { border-radius: 16px 0 0 0 !important; }
.mff-ap-hero-mosaic-grid img:nth-child(2) { border-radius: 0 16px 0 0 !important; }
.mff-ap-hero-mosaic-grid img:nth-child(3) { border-radius: 0 0 0 16px !important; }
.mff-ap-hero-mosaic-grid img:last-child { border-radius: 0 0 16px 0 !important; }

@media (max-width: 1024px) {
  .mff-ap-hero-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .mff-ap-hero-copy-col .mff-ap-hero-headline,
  .mff-ap-hero-copy-col .mff-ap-hero-subhead {
    text-align: center !important;
  }

  .mff-ap-hero-copy-col .mff-ap-hero-actions,
  .mff-ap-hero-copy-col .mff-ap-hero-stats {
    justify-content: center !important;
  }

  .mff-ap-hero-mosaic {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  .mff-ap-hero-mosaic-grid img {
    height: 160px !important;
  }
}

/* ============================================================
   MFF APP PAGE — Recipe cards with reviews
   ============================================================ */

.mff-ap-recipes {
  padding: 80px 40px !important;
  background: #fff !important;
}

.mff-ap-recipe-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.mff-ap-recipe-card {
  background: var(--mff-off-white) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--mff-border) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.mff-ap-recipe-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.09) !important;
  transform: translateY(-2px) !important;
}

.mff-ap-recipe-img {
  overflow: hidden !important;
}

.mff-ap-recipe-img img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.mff-ap-recipe-card:hover .mff-ap-recipe-img img {
  transform: scale(1.04) !important;
}

.mff-ap-recipe-body {
  padding: 20px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.mff-ap-recipe-stars {
  color: #F5A623 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}

.mff-ap-recipe-name {
  font-family: var(--mff-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--mff-text) !important;
  margin: 0 0 10px !important;
  line-height: 1.2 !important;
}

.mff-ap-recipe-review {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

.mff-ap-recipe-attr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.mff-ap-recipe-author {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

.mff-ap-recipe-date {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--mff-text-faint) !important;
}

@media (max-width: 1024px) {
  .mff-ap-recipe-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .mff-ap-recipes {
    padding: 60px 20px !important;
  }

  .mff-ap-recipe-cards {
    grid-template-columns: 1fr !important;
    margin-top: 32px !important;
  }

  .mff-ap-recipe-img img {
    height: 200px !important;
  }
}

/* ============================================================
   MFF APP PAGE — Food photo strip
   Edge-to-edge auto-scrolling gallery below the hero.
   280px tall, recipe name overlays, seamless loop.
   ============================================================ */

.mff-ap-gallery-strip {
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.mff-ap-strip-track-wrapper {
  width: 100%;
  overflow: hidden;
}

.mff-ap-strip-track {
  display: flex !important;
  gap: 0 !important;
  width: max-content !important;
  animation: mff-ap-strip-scroll 48s linear infinite !important;
}

@keyframes mff-ap-strip-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mff-ap-strip-track:hover {
  animation-play-state: paused !important;
}

.mff-ap-strip-item {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 320px !important;
  height: 280px !important;
  overflow: hidden !important;
}

.mff-ap-strip-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.mff-ap-strip-track:hover .mff-ap-strip-item img {
  transform: scale(1.03) !important;
}

.mff-ap-strip-label {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 28px 16px 14px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 100%) !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: #fff !important;
  line-height: 1.3 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .mff-ap-strip-item {
    width: 220px !important;
    height: 220px !important;
  }
}

/* ============================================================
   MFF APP PAGE — Bottom pricing section
   Slightly different top spacing to distinguish from the
   early pricing section visually.
   ============================================================ */

.mff-ap-pricing-bottom {
  border-top: 1px solid var(--mff-border) !important;
}

/* ============================================================
   DAILY LIFT UPSELL — Bundle cards (replaces Learn More boxes)
   Three cards: Women's Gym, Women's At-Home, Men's Gym
   Each shows DL track + MFF App plan radio buttons + add-to-cart
   ============================================================ */

/* ============================================================
   DAILY LIFT UPSELL — Bundle cards
   Layout: 3-across on desktop, 2-across at 900px, 1 column mobile
   ============================================================ */

.mff-dl-bundle-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.mff-dl-bundle-card-mens {
  grid-column: auto !important;
}

.mff-dl-bundle-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

.mff-dl-bundle-card-primary {
  border-color: var(--mff-red) !important;
  background: rgba(242,79,72,0.07) !important;
}

.mff-dl-bundle-card-label {
  font-family: var(--mff-font-display) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mff-red) !important;
  margin-bottom: 8px !important;
}

.mff-dl-bundle-track {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.mff-dl-bundle-track-name {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.mff-dl-bundle-track-price {
  font-family: var(--mff-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.mff-dl-bundle-track-price span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.45) !important;
}

.mff-dl-bundle-label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 8px !important;
}

.mff-dl-bundle-plans {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
  flex: 1 !important;
}

.mff-dl-bundle-plan {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.mff-dl-bundle-plan:hover {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.05) !important;
}

.mff-dl-bundle-plan input[type="radio"] {
  accent-color: var(--mff-red) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.mff-dl-bundle-plan-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex: 1 !important;
}

.mff-dl-bundle-plan-name {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.85) !important;
}

.mff-dl-bundle-plan-price {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.6) !important;
}

.mff-dl-bundle-btn {
  display: block !important;
  width: 100% !important;
  padding: 11px !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
  margin-bottom: 6px !important;
}

.mff-dl-bundle-btn:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

.mff-dl-bundle-note {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.3) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ============================================================
   PRICING CARD BUNDLE PANEL — Simple price + checkout note
   ============================================================ */

.mff-pricing-dl-option-price {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mff-text-muted) !important;
  margin-left: auto !important;
}

.mff-pricing-featured .mff-pricing-dl-option-price {
  color: rgba(255,255,255,0.6) !important;
}

.mff-pricing-dl-checkout-note {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--mff-text-faint) !important;
  text-align: center !important;
  margin: 6px 0 0 !important;
}

.mff-pricing-featured .mff-pricing-dl-checkout-note {
  color: rgba(255,255,255,0.35) !important;
}

/* DL upsell section responsive */
@media (max-width: 900px) {
  .mff-dl-bundle-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  .mff-dl-bundle-card-mens {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 600px) {
  .mff-dl-bundle-cards {
    grid-template-columns: 1fr !important;
  }
  .mff-dl-bundle-card-mens {
    grid-column: 1 !important;
  }
  .mff-dl-bundle-card {
    padding: 16px 18px !important;
  }
}

/* ============================================================
   DAILY LIFT PAGE — v1.5.30
   All new styles prefixed .mff-dl- (page-level)
   ============================================================ */

/* ---- Hero ---- */
.mff-dl-hero {
  background: var(--mff-black);
  color: var(--mff-white);
  padding: 80px 24px 0;
  overflow: hidden;
}

.mff-dl-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dl-hero-content {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 0;                  /* no gap — photo bleeds to edge */
  align-items: stretch;    /* both columns full height */
  min-height: 680px;
}

.mff-dl-hero-headline {
  font-family: var(--mff-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--mff-white);
  line-height: 1.1;
  margin: 12px 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.mff-dl-hero-copy {
  padding-bottom: 80px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mff-dl-hero-subhead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 520px;
}

.mff-dl-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.mff-btn-ghost-light {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--mff-white);
  border-radius: 8px;
  font-size: 0.95rem;
  text-decoration: none;
  font-family: var(--mff-font-body);
  transition: border-color 0.18s, background 0.18s;
}

.mff-btn-ghost-light:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  color: var(--mff-white);
}

.mff-dl-hero-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 36px;
}

.mff-dl-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  gap: 0;
  row-gap: 10px;
}

.mff-dl-hero-stat {
  font-size: 0.82rem;
  font-family: var(--mff-font-body);
  padding: 0 16px;
  white-space: nowrap;
  line-height: 1.2;
}

.mff-dl-hero-stat:first-child {
  padding-left: 0;
}

.mff-dl-hero-stat strong {
  font-family: var(--mff-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mff-white);
}

.mff-dl-hero-stat-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.mff-dl-hero-mockup {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Single Elyse photo fills the right column top-to-bottom */
.mff-dl-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient fades photo into the dark hero bg on the left edge */
.mff-dl-hero-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--mff-black) 0%, transparent 35%);
  z-index: 1;
  pointer-events: none;
}

/* ---- Sticky Scroll Feature Section ---- */

/*
 * IMPLEMENTATION: position:fixed driven by JS scroll events.
 * CSS sticky is unreliable inside WordPress's flex-column main wrapper.
 * Instead the phone frame is fixed to the viewport while the section
 * is in view, then released (position:absolute, bottom-anchored) when
 * the section scrolls out. The panels are normal block-flow content.
 */

.mff-dl-sticky-section {
  background: var(--mff-black);
  position: relative;
  padding-bottom: 80px;  /* keeps phone + dots clear of the next section */
}

.mff-dl-ss-outer {
  display: flex;
  align-items: stretch;  /* both columns fill the full height of the outer */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}

/* ---- Left: phone column - layout spacer, must be position:relative for is-bottom phase ---- */
.mff-dl-ss-phone-col {
  width: 50%;
  flex-shrink: 0;
  position: relative;   /* anchor for is-bottom absolute positioning */
}

/* The actual phone wrap — JS toggles between position:fixed and position:absolute */
.mff-dl-ss-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;          /* fill the phone-col so width never jumps on state switch */
  /* default: in-flow */
}

/* Mobile phone images inside panels - hidden on desktop, shown in mobile slider */
.mff-dl-ss-mobile-phone {
  display: none;
}

.mff-dl-ss-mobile-counter {
  display: none;
}

/* When section is in viewport: phone is fixed */
/* left + width set precisely by JS to match phone-col */
.mff-dl-ss-phone-wrap.is-fixed {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* When section has scrolled past: anchor phone in phone-col using top, not bottom,
   so the JS can place it exactly where fixed left it - no snap on transition */
.mff-dl-ss-phone-wrap.is-bottom {
  position: absolute;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 1;
}

.mff-dl-ss-phone-frame {
  position: relative;
  width: 240px;
  height: 500px;
  border-radius: 38px;
  overflow: hidden;
  border: 6px solid #2a2a2a;
  background: #000;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}

.mff-dl-ss-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease;
  opacity: 1;
}

.mff-dl-ss-screen-hidden {
  opacity: 0;
}

/* Progress dots */
.mff-dl-ss-dots {
  display: flex;
  gap: 10px;
}

.mff-dl-ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.mff-dl-ss-dot-active {
  background: var(--mff-red);
  transform: scale(1.4);
}

/* ---- Right: scrolling panels ---- */
.mff-dl-ss-panels-col {
  width: 50%;
  padding: 0 0 0 48px;
}

.mff-dl-ss-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 40px 80px 0;
}

.mff-dl-ss-panel-inner {
  max-width: 440px;
}

.mff-dl-ss-panel .mff-eyebrow {
  color: var(--mff-red);
  margin-bottom: 16px;
}

.mff-dl-ss-headline {
  font-family: var(--mff-font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--mff-white);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.mff-dl-ss-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0 0 28px;
}

.mff-dl-ss-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mff-dl-ss-list li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}

.mff-dl-ss-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--mff-red);
  font-weight: 700;
}

/* ---- Mobile: vertical stacked panels ---- */
@media (max-width: 860px) {

  .mff-dl-ss-outer {
    flex-direction: column;
    padding: 0;
  }

  /* Phone col hidden — each panel has its own phone image */
  .mff-dl-ss-phone-col {
    display: none;
  }

  /* Disable all JS positioning on mobile */
  .mff-dl-ss-phone-wrap,
  .mff-dl-ss-phone-wrap.is-fixed,
  .mff-dl-ss-phone-wrap.is-bottom {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
  }

  /* Panels col: normal vertical block flow */
  .mff-dl-ss-panels-col {
    width: 100%;
    padding: 0;
    display: block;
  }

  /* Each panel stacks vertically */
  .mff-dl-ss-panel {
    min-height: auto;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .mff-dl-ss-panel:first-child {
    border-top: none;
  }

  .mff-dl-ss-panel-inner {
    width: 100%;
    padding: 24px 28px 48px;
    max-width: 100%;
  }

  /* Phone image at top of each panel */
  .mff-dl-ss-mobile-phone {
    display: flex;
    justify-content: center;
    padding: 40px 24px 16px;
    width: 100%;
    background: transparent;
  }

  .mff-dl-ss-mobile-phone img {
    width: 220px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: block;
  }

  /* Counter and dots hidden — not needed for vertical layout */
  .mff-dl-ss-mobile-counter {
    display: none;
  }

  .mff-dl-ss-dots {
    display: none;
  }
}

/* ---- DL Track Cards / Pricing ---- */
.mff-dl-pricing {
  padding: 80px 24px;
  background: var(--mff-white);
}

.mff-dl-pricing-repeat {
  background: var(--mff-off-white);
  border-top: 1px solid var(--mff-border);
}

.mff-dl-track-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  margin-top: 40px;
}

.mff-dl-track-card {
  background: var(--mff-white);
  border: 1.5px solid var(--mff-border);
  border-radius: 16px;
  padding: 32px 28px 28px;
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s;
}

.mff-dl-track-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.mff-dl-track-featured {
  border-color: var(--mff-red);
  box-shadow: 0 4px 20px rgba(242,79,72,0.12);
}

.mff-dl-track-icon {
  color: var(--mff-red);
  margin-bottom: 16px;
}

.mff-dl-track-name {
  font-family: var(--mff-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mff-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.mff-dl-track-price {
  font-family: var(--mff-font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--mff-black);
  line-height: 1;
  margin-bottom: 14px;
}

.mff-dl-track-price span {
  font-size: 1rem;
  font-family: var(--mff-font-body);
  font-weight: 300;
  color: var(--mff-text-muted);
}

.mff-dl-track-desc {
  font-size: 0.9rem;
  color: var(--mff-text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

.mff-dl-track-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mff-dl-track-features li {
  font-size: 0.88rem;
  color: var(--mff-text);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}

.mff-dl-track-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--mff-red);
  font-weight: 700;
  font-size: 0.85rem;
}

.mff-dl-track-bundle-add {
  margin-top: 16px;
  border-top: 1px solid var(--mff-border);
  padding-top: 14px;
}

/* ---- How It Works (reuses .mff-ap-steps) ---- */
.mff-dl-how {
  padding: 80px 24px;
  background: var(--mff-off-white);
}

/* ---- Features Grid ---- */
.mff-dl-features {
  padding: 80px 24px;
  background: var(--mff-white);
}

.mff-dl-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.mff-dl-feature-card {
  background: var(--mff-off-white);
  border-radius: 12px;
  padding: 28px 24px;
  transition: box-shadow 0.18s;
}

.mff-dl-feature-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.mff-dl-feature-icon {
  color: var(--mff-red);
  margin-bottom: 14px;
}

.mff-dl-feature-title {
  font-family: var(--mff-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mff-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.mff-dl-feature-desc {
  font-size: 0.88rem;
  color: var(--mff-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---- Workout Video Section ---- */
.mff-dl-video-section {
  background: var(--mff-black);
  padding: 80px 0;
}

.mff-dl-video-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.mff-dl-video-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mff-dl-video-title {
  color: var(--mff-white) !important;
}

.mff-dl-video-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  margin: 16px 0 24px;
}

.mff-dl-video-section .mff-ap-dl-checklist li {
  color: rgba(255,255,255,0.8);
}

.mff-dl-video-section .mff-ap-dl-checklist li::before {
  color: var(--mff-red);
}

.mff-dl-video-cta {
  margin-top: 28px;
  display: inline-flex;
}

.mff-dl-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mff-dl-video-item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: #111;
}

.mff-dl-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- MFF App Upsell (on DL page) ---- */
.mff-dl-mff-upsell {
  background: var(--mff-off-white);
  padding: 80px 0;
  border-top: 1px solid var(--mff-border);
}

.mff-dl-mff-upsell-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.mff-dl-mff-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mff-dl-mff-title {
  margin-bottom: 16px;
}

.mff-dl-mff-desc {
  font-size: 1rem;
  color: var(--mff-text-muted);
  line-height: 1.65;
  margin-bottom: 24px;
}

/* Override white checklist color — this section is on off-white bg */
.mff-dl-mff-upsell .mff-ap-dl-checklist li {
  color: var(--mff-text) !important;
}

.mff-dl-mff-upsell .mff-ap-dl-checklist li::before {
  color: var(--mff-red) !important;
}

.mff-dl-mff-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.mff-dl-mff-mockup {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 0 auto;
}

/* ---- DL page responsive ---- */
@media (max-width: 900px) {
  .mff-dl-hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }

  .mff-dl-hero-mockup {
    height: 320px;
  }

  .mff-dl-hero-photo-fade {
    background: linear-gradient(to bottom, var(--mff-black) 0%, transparent 30%);
  }

  .mff-dl-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mff-dl-video-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mff-dl-mff-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mff-dl-mff-mockup {
    max-width: 320px;
  }

  .mff-dl-track-card {
    min-width: 280px;
  }
}

@media (max-width: 600px) {
  .mff-dl-hero {
    padding: 60px 20px 48px;
  }

  .mff-dl-hero-headline {
    font-size: 1.8rem;
  }

  .mff-dl-hero-stat {
    padding: 0 14px;
  }

  .mff-dl-features-grid {
    grid-template-columns: 1fr;
  }

  .mff-dl-video-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mff-dl-track-card {
    min-width: 100%;
    max-width: 100%;
  }

  .mff-dl-track-grid {
    flex-direction: column;
  }

  .mff-dl-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================================
   DREAMI PAGE — dreami-page.html
   v1.5.42
   ============================================================ */

/* ── Eyebrow light variant (dark backgrounds) ── */
.mff-eyebrow-light {
  color: rgba(255,255,255,0.7) !important;
}

/* ── Ghost button light variant (dark backgrounds) ── */
.mff-btn-ghost-light {
  display: inline-block !important;
  padding: 13px 22px !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s !important;
  white-space: nowrap !important;
  background: transparent !important;
}
.mff-btn-ghost-light:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* ============================================================
   HERO
   ============================================================ */
.mff-dr-hero {
  background: var(--mff-black);
  padding: 0 40px;
  overflow: hidden;
}

.mff-dr-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
}

.mff-dr-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 0; /* tight padding so bags fill more of the viewport */
}

.mff-dr-hero-headline {
  font-family: var(--mff-font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

.mff-dr-hero-subhead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 480px;
}

.mff-dr-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mff-dr-hero-note {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.mff-dr-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.mff-dr-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  gap: 2px;
}

.mff-dr-hero-stat strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.mff-dr-hero-stat span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mff-dr-hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  margin: 0 24px 0 0;
  flex-shrink: 0;
}

/* Hero mockup — single combined image, fills right column */
.mff-dr-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mff-dr-hero-mockup {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* ============================================================
   FLAVOR CARDS
   ============================================================ */
.mff-dr-flavors {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-dr-flavors-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-flavors-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-dr-flavors-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-flavor-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.mff-dr-flavor-card {
  background: #fff;
  border: 1px solid var(--mff-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mff-dr-flavor-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

/* ── Slider ── */
.mff-dr-slider {
  position: relative !important;
  overflow: hidden !important;
  background: var(--mff-off-white);
  height: 320px;
  flex-shrink: 0;
  /* Force block context so children don't escape */
  display: block !important;
  width: 100% !important;
}

.mff-dr-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
  /* Width = 100% × number of slides — JS sets transform */
  width: 100% !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.mff-dr-slide {
  /* Each slide exactly fills the visible slider window */
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Bag slides: transparent bg, image fills height */
.mff-dr-slide-bag img {
  height: 88%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15));
  display: block;
}

/* SFP slide: white bg */
.mff-dr-slide-sfp {
  background: #fff !important;
  padding: 20px !important;
}
.mff-dr-slide-sfp img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Lifestyle slides: full cover crop */
.mff-dr-slide-lifestyle {
  padding: 0 !important;
}
.mff-dr-slide-lifestyle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrows — anchored to slider container */
.mff-dr-slider-prev,
.mff-dr-slider-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--mff-black) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  transition: background 0.15s !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mff-dr-slider-prev { left: 10px !important; }
.mff-dr-slider-next { right: 10px !important; }
.mff-dr-slider-prev:hover,
.mff-dr-slider-next:hover {
  background: #fff !important;
}

/* Dots */
.mff-dr-slider-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 20 !important;
}

.mff-dr-slider-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.25) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
  display: block !important;
}
.mff-dr-slider-dot-active {
  background: var(--mff-red) !important;
  transform: scale(1.25) !important;
}

/* Card body */
.mff-dr-flavor-card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.mff-dr-flavor-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mff-dr-flavor-name {
  font-family: var(--mff-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-flavor-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mff-red);
  white-space: nowrap;
}

.mff-dr-flavor-macros {
  display: flex;
  padding: 12px 0;
  border-top: 1px solid var(--mff-border);
  border-bottom: 1px solid var(--mff-border);
}

.mff-dr-flavor-macro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mff-dr-flavor-macro:not(:last-child) {
  border-right: 1px solid var(--mff-border);
}

.mff-dr-flavor-macro strong {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mff-black);
  line-height: 1.1;
}

.mff-dr-flavor-macro span {
  font-size: 13px;
  color: var(--mff-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mff-dr-flavor-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-dr-atc-btn {
  display: block;
  text-align: center;
  margin-top: auto;
}

/* Quantity selector */
.mff-dr-qty-row {
  display: flex;
  align-items: center;
}

.mff-dr-qty-selector {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--mff-border);
  border-radius: 10px;
  overflow: hidden;
  height: 42px;
}

.mff-dr-qty-btn {
  width: 42px;
  height: 42px;
  background: var(--mff-off-white);
  border: none;
  font-size: 18px;
  color: var(--mff-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.mff-dr-qty-btn:hover:not(:disabled) {
  background: var(--mff-border);
}

.mff-dr-qty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.mff-dr-qty-input {
  width: 44px;
  height: 42px;
  border: none;
  border-left: 1.5px solid var(--mff-border);
  border-right: 1.5px solid var(--mff-border);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--mff-black);
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}

.mff-dr-qty-input::-webkit-outer-spin-button,
.mff-dr-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   PROBLEM / AGITATION
   ============================================================ */
.mff-dr-problem {
  background: #fff;
  padding: 80px 40px;
}

.mff-dr-problem-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-problem-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mff-dr-problem-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0;
}

.mff-dr-problem-copy p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-dr-problem-copy p strong {
  color: var(--mff-black);
}

.mff-dr-problem-image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.mff-dr-problem-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   KEY BENEFITS
   ============================================================ */
.mff-dr-benefits {
  background: var(--mff-black);
  padding: 80px 40px;
}

.mff-dr-benefits-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-benefits-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-dr-benefits-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.mff-dr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.mff-dr-benefit-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mff-dr-benefit-icon {
  width: 52px;
  height: 52px;
  background: rgba(242,79,72,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mff-red);
}

.mff-dr-benefit-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.mff-dr-benefit-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.mff-dr-benefits-cta {
  text-align: center;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.mff-dr-hiw {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-dr-hiw-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mff-dr-hiw-header {
  text-align: center;
}

.mff-dr-hiw-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-hiw-steps {
  display: flex;
  align-items: flex-start;
}

.mff-dr-hiw-step {
  flex: 1;
  background: #fff;
  border: 1px solid var(--mff-border);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.mff-dr-hiw-step-num {
  width: 52px;
  height: 52px;
  background: var(--mff-red);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.mff-dr-hiw-step-title {
  font-family: var(--mff-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-hiw-step-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-dr-hiw-connector {
  font-size: 1.8rem;
  color: var(--mff-red);
  padding: 0 16px;
  align-self: center;
  flex-shrink: 0;
  margin-top: -20px;
}

.mff-dr-hiw-bonus {
  background: rgba(242,79,72,0.06);
  border: 1px solid rgba(242,79,72,0.2);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
}

.mff-dr-hiw-bonus-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 8px;
}

.mff-dr-hiw-bonus p:last-child {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.mff-dr-hiw-image {
  border-radius: 20px;
  overflow: hidden;
  max-height: 480px;
}

.mff-dr-hiw-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   NUTRITION DEEP-DIVE
   ============================================================ */
.mff-dr-nutrition {
  background: #fff;
  padding: 80px 40px;
}

.mff-dr-nutrition-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-nutrition-image {
  border-radius: 20px;
  overflow: hidden;
}

.mff-dr-nutrition-image img {
  width: 100%;
  height: auto;
  display: block;
}

.mff-dr-nutrition-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mff-dr-nutrition-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0;
}

.mff-dr-nutrition-pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mff-dr-nutrition-pillar {
  padding-left: 20px;
  border-left: 3px solid var(--mff-red);
}

.mff-dr-nutrition-pillar h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 6px;
}

.mff-dr-nutrition-pillar p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.mff-dr-reviews {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-dr-reviews-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-reviews-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-dr-reviews-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mff-dr-review-card {
  background: #fff;
  border: 1px solid var(--mff-border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* All review cards uniform — wide card class removed */

.mff-dr-review-stars {
  color: #F5A623;
  font-size: 15px;
  letter-spacing: 2px;
}

.mff-dr-review-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  margin: 0;
  font-style: italic;
  flex: 1;
}

.mff-dr-review-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-black);
  margin: 0;
}

.mff-dr-review-verified {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2a7d4f;
  background: rgba(42,125,79,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.mff-dr-compare {
  background: var(--mff-black);
  padding: 80px 40px;
}

.mff-dr-compare-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-compare-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-dr-compare-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}

.mff-dr-compare-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.6;
}

.mff-dr-compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.mff-dr-compare-col {
  border-radius: 16px;
  overflow: hidden;
}

.mff-dr-compare-col-dreami {
  background: rgba(242,79,72,0.1);
  border: 2px solid var(--mff-red);
}

.mff-dr-compare-col-other {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.mff-dr-compare-col-header {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mff-dr-compare-col-dreami .mff-dr-compare-col-header {
  border-bottom-color: rgba(242,79,72,0.3);
}

.mff-dr-compare-col-header img {
  width: 100px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.mff-dr-compare-col-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: center;
}

.mff-dr-compare-list {
  list-style: none;
  padding: 24px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mff-dr-compare-list li {
  font-size: 14px;
  line-height: 1.4;
  padding-left: 28px;
  position: relative;
}

.mff-dr-compare-win { color: #fff; }
.mff-dr-compare-win::before {
  content: '✅';
  position: absolute;
  left: 0;
  font-size: 14px;
}

.mff-dr-compare-lose { color: rgba(255,255,255,0.5); }
.mff-dr-compare-lose::before {
  content: '⛔';
  position: absolute;
  left: 0;
  font-size: 14px;
}

.mff-dr-compare-cta {
  text-align: center;
}

/* ============================================================
   LIFESTYLE CLOSER
   ============================================================ */
.mff-dr-closer {
  position: relative;
  overflow: hidden;
}

.mff-dr-closer-wrap {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.mff-dr-closer-bg {
  position: absolute;
  inset: 0;
}

.mff-dr-closer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mff-dr-closer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 50%, rgba(0,0,0,0.35) 100%);
}

.mff-dr-closer-content {
  position: relative;
  z-index: 2;
  padding: 80px 40px;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mff-dr-closer-headline {
  font-family: var(--mff-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin: 0;
}

.mff-dr-closer-sub {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ============================================================
   MFF APP UPSELL
   ============================================================ */
.mff-dr-upsell {
  background: var(--mff-off-white);
  padding: 72px 40px;
  border-top: 1px solid var(--mff-border);
}

.mff-dr-upsell-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-dr-upsell-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mff-dr-upsell-headline {
  font-family: var(--mff-font-display);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0;
}

.mff-dr-upsell-copy p:not(.mff-eyebrow) {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-dr-upsell-actions { margin-top: 8px; }

.mff-dr-upsell-badge-inner {
  background: var(--mff-black);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  min-width: 200px;
}

.mff-dr-upsell-badge-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin: 0 0 6px;
}

.mff-dr-upsell-badge-price {
  font-size: 2rem;
  font-weight: 300;
  color: #fff;
  margin: 0 0 6px;
}

.mff-dr-upsell-badge-price strong { font-weight: 800; }
.mff-dr-upsell-badge-price span { font-size: 1rem; color: rgba(255,255,255,0.6); }

.mff-dr-upsell-badge-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE — tablet (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .mff-dr-hero {
    padding: 0 24px;
  }

  .mff-dr-hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }

  .mff-dr-hero-copy {
    padding: 40px 0 24px;
  }

  .mff-dr-hero-image {
    order: 1;
  }

  .mff-dr-hero-headline { font-size: 2.2rem; }

  .mff-dr-flavor-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  .mff-dr-problem-content,
  .mff-dr-nutrition-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mff-dr-problem-image {
    aspect-ratio: 16/9;
    order: -1;
  }

  .mff-dr-benefits-grid { grid-template-columns: 1fr 1fr; }

  .mff-dr-hiw-steps {
    flex-direction: column;
    gap: 16px;
  }

  .mff-dr-hiw-connector {
    transform: rotate(90deg);
    align-self: center;
    padding: 0;
    margin: 0;
  }

  .mff-dr-review-cards { grid-template-columns: 1fr 1fr; }

  .mff-dr-compare-table {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto 48px;
  }

  .mff-dr-upsell-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mff-dr-upsell-badge-inner { min-width: 0; }

  .mff-dr-closer-content { max-width: 100%; }
  .mff-dr-closer-overlay { background: rgba(0,0,0,0.65); }

  .mff-dr-flavors,
  .mff-dr-problem,
  .mff-dr-benefits,
  .mff-dr-hiw,
  .mff-dr-nutrition,
  .mff-dr-reviews,
  .mff-dr-compare,
  .mff-dr-upsell {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   RESPONSIVE — mobile (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .mff-dr-hero-headline { font-size: 1.9rem; }

  .mff-dr-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .mff-dr-hero-stat-divider { display: none; }

  .mff-dr-hero-stat {
    padding: 0;
    min-width: calc(50% - 8px);
  }

  .mff-dr-hero-stats { gap: 14px; }

  .mff-dr-slider { height: 280px; }

  .mff-dr-benefits-grid { grid-template-columns: 1fr; }

  .mff-dr-review-cards { grid-template-columns: 1fr; }

  .mff-dr-closer-headline { font-size: 1.7rem; }
  .mff-dr-closer-content { padding: 60px 24px; }
}

/* ============================================================
   WPI PAGE — Whey Protein Isolate (/wpi-van-choc/)
   Prefix: .mff-wpi-
   Mirrors .mff-dr- (Dreami) structural patterns
   ============================================================ */


/* ── Hero ─────────────────────────────────────────────────────── */

.mff-wpi-hero {
  background: var(--mff-black);
  padding: 0 40px;
  overflow: hidden;
}

.mff-wpi-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
}

.mff-wpi-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 0;
}

.mff-wpi-hero-headline {
  font-family: var(--mff-font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

.mff-wpi-hero-subhead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 480px;
}

.mff-wpi-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mff-wpi-hero-note {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.mff-wpi-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  gap: 0;
}

.mff-wpi-hero-stat {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding: 0 16px;
}

.mff-wpi-hero-stat:first-child {
  padding-left: 0;
}

.mff-wpi-hero-stat strong {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
}

.mff-wpi-hero-stat-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.mff-wpi-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mff-wpi-hero-mockup {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ── Flavor Cards ─────────────────────────────────────────────── */

.mff-wpi-flavors {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-wpi-flavors-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-flavors-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-wpi-flavors-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-wpi-flavor-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.mff-wpi-flavor-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--mff-border);
  display: flex;
  flex-direction: column;
}


/* ── Slider (inside flavor cards) ─────────────────────────────── */

.mff-wpi-slider {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
  background: var(--mff-off-white);
}

.mff-wpi-slider-track {
  display: flex !important;
  transition: transform 0.35s ease;
  height: 100%;
}

.mff-wpi-slide {
  flex: 0 0 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mff-wpi-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mff-wpi-slide-bag {
  padding: 32px;
}

.mff-wpi-slide-sfp {
  padding: 16px;
}

.mff-wpi-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--mff-black);
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s;
  line-height: 1;
}

.mff-wpi-slider-arrow:hover { background: #fff; }
.mff-wpi-slider-prev { left: 10px; }
.mff-wpi-slider-next { right: 10px; }

.mff-wpi-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.mff-wpi-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.mff-wpi-slider-dot.active { background: var(--mff-red); }


/* ── Flavor Card Info ─────────────────────────────────────────── */

.mff-wpi-flavor-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.mff-wpi-flavor-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mff-wpi-flavor-name {
  font-family: var(--mff-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-wpi-flavor-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mff-red);
}

.mff-wpi-flavor-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: center;
  padding: 12px 0;
  border-top: 1px solid var(--mff-border);
  border-bottom: 1px solid var(--mff-border);
}

.mff-wpi-flavor-macro {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mff-wpi-flavor-macro:not(:last-child) {
  border-right: 1px solid var(--mff-border);
}

.mff-wpi-flavor-macro strong {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mff-black);
  line-height: 1.1;
}

.mff-wpi-flavor-macro span {
  font-size: 13px;
  color: var(--mff-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mff-wpi-flavor-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-wpi-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.mff-wpi-qty-selector {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--mff-border);
  border-radius: 10px;
  overflow: hidden;
  height: 42px;
}

.mff-wpi-qty-btn {
  width: 42px;
  height: 42px;
  background: var(--mff-off-white);
  border: none;
  font-size: 18px;
  color: var(--mff-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

.mff-wpi-qty-btn:hover:not(:disabled) { background: var(--mff-border); }
.mff-wpi-qty-btn:disabled { color: var(--mff-text-faint); cursor: not-allowed; }

.mff-wpi-qty-input {
  width: 40px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--mff-border);
  border-right: 1.5px solid var(--mff-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--mff-black);
  background: #fff;
  height: 100%;
  -moz-appearance: textfield;
  appearance: textfield;
}

.mff-wpi-qty-input::-webkit-inner-spin-button,
.mff-wpi-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mff-wpi-atc-btn {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}


/* ── Problem / Agitation ──────────────────────────────────────── */

.mff-wpi-problem {
  background: #fff;
  padding: 80px 40px;
}

.mff-wpi-problem-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-problem-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0 0 16px;
}

.mff-wpi-problem-copy p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  margin: 0 0 16px;
}

.mff-wpi-problem-image {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mff-wpi-problem-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Benefits — dark bg ───────────────────────────────────────── */

.mff-wpi-benefits {
  background: var(--mff-black);
  padding: 80px 40px;
}

.mff-wpi-benefits-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-benefits-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-wpi-benefits-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.mff-wpi-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mff-wpi-benefit-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
}

.mff-wpi-benefit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  filter: brightness(0) invert(1) opacity(0.9);
}

.mff-wpi-benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mff-wpi-benefit-title {
  font-family: var(--mff-font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.mff-wpi-benefit-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.mff-wpi-benefits-subhead {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  margin: 8px 0 0;
  font-style: italic;
}

.mff-wpi-benefits-cta {
  text-align: center;
  margin-top: 40px;
}

.mff-wpi-benefits-value-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 20px 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.mff-wpi-benefits-value-label {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.mff-wpi-benefits-value-label strong {
  color: #fff;
  font-weight: 700;
}

.mff-wpi-compare-price-highlight {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mff-wpi-compare-price-highlight strong {
  color: #fff;
}


/* ── How It Works ─────────────────────────────────────────────── */

.mff-wpi-hiw {
  background: #fff;
  padding: 80px 40px;
}

.mff-wpi-hiw-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-hiw-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-wpi-hiw-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-wpi-hiw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 40px;
}

.mff-wpi-hiw-step {
  flex: 1;
  text-align: center;
  padding: 32px 24px;
  background: var(--mff-off-white);
  border-radius: 12px;
}

.mff-wpi-hiw-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mff-red);
  color: #fff;
  font-family: var(--mff-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.mff-wpi-hiw-step-title {
  font-family: var(--mff-font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0 0 10px;
}

.mff-wpi-hiw-step-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-wpi-hiw-step-desc a {
  color: var(--mff-red);
  text-decoration: none;
}

.mff-wpi-hiw-connector {
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: 32px;
  font-size: 24px;
  color: var(--mff-text-faint);
  flex-shrink: 0;
}

.mff-wpi-hiw-bonus {
  background: var(--mff-off-white);
  border-left: 4px solid var(--mff-red);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 40px;
}

.mff-wpi-hiw-bonus-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-wpi-hiw-cta {
  text-align: center;
}


/* ── Nutrition Deep-Dive — SFP tabs + 3 pillars ───────────────── */

.mff-wpi-nutrition {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-wpi-nutrition-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-nutrition-image {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--mff-border);
}

/* SFP tab switcher */
.mff-wpi-sfp-tab-btns {
  display: flex;
  border-bottom: 1.5px solid var(--mff-border);
}

.mff-wpi-sfp-tab-btn {
  flex: 1;
  padding: 14px 20px;
  background: none;
  border: none;
  font-family: var(--mff-font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mff-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}

.mff-wpi-sfp-tab-btn.active {
  color: var(--mff-red);
  border-bottom-color: var(--mff-red);
}

.mff-wpi-sfp-panels {
  padding: 24px;
}

.mff-wpi-sfp-panel {
  display: none;
}

.mff-wpi-sfp-panel.active {
  display: block;
}

.mff-wpi-sfp-panel img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.mff-wpi-nutrition-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0 0 24px;
}

.mff-wpi-nutrition-pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mff-wpi-nutrition-pillar {
  padding-left: 20px;
  border-left: 3px solid var(--mff-red);
}

.mff-wpi-nutrition-pillar h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 6px;
}

.mff-wpi-nutrition-pillar p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}


/* ── Reviews ──────────────────────────────────────────────────── */

.mff-wpi-reviews {
  background: #fff;
  padding: 80px 40px;
}

.mff-wpi-reviews-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-reviews-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-wpi-reviews-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-wpi-review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mff-wpi-review-card {
  background: var(--mff-off-white);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mff-wpi-review-stars {
  color: var(--mff-red);
  font-size: 16px;
  letter-spacing: 2px;
}

.mff-wpi-review-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mff-black);
  margin: 0;
  flex: 1;
}

.mff-wpi-review-author {
  font-size: 13px;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-wpi-review-verified {
  font-size: 13px;
  color: var(--mff-red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}


/* ── Comparison Table — dark bg ───────────────────────────────── */

.mff-wpi-compare {
  background: var(--mff-black);
  padding: 80px 40px;
}

.mff-wpi-compare-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-compare-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-wpi-compare-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}

.mff-wpi-compare-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
}

.mff-wpi-compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.mff-wpi-compare-col {
  border-radius: 12px;
  padding: 32px;
}

.mff-wpi-compare-win {
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--mff-red);
}

.mff-wpi-compare-lose {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
}

.mff-wpi-compare-col-title {
  font-family: var(--mff-font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}

.mff-wpi-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mff-wpi-compare-item {
  font-size: 14px;
  line-height: 1.5;
  padding-left: 28px;
  position: relative;
}

.mff-wpi-compare-good {
  color: rgba(255,255,255,0.85);
}

.mff-wpi-compare-good::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: 700;
}

.mff-wpi-compare-bad {
  color: rgba(255,255,255,0.45);
}

.mff-wpi-compare-bad::before {
  content: "\2717";
  position: absolute;
  left: 0;
  color: var(--mff-red);
  font-weight: 700;
}

.mff-wpi-compare-cta {
  text-align: center;
}


/* ── Lifestyle Closer ─────────────────────────────────────────── */

.mff-wpi-closer {
  position: relative;
  overflow: hidden;
}

.mff-wpi-closer-wrap {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mff-wpi-closer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mff-wpi-closer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mff-wpi-closer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(29,29,29,0.7), rgba(29,29,29,0.88));
}

.mff-wpi-closer-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  padding: 80px 40px;
}

.mff-wpi-closer-headline {
  font-family: var(--mff-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
}

.mff-wpi-closer-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0 0 24px;
}


/* ── MFF App Upsell ───────────────────────────────────────────── */

.mff-wpi-upsell {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-wpi-upsell-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mff-wpi-upsell-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  line-height: 1.1;
  margin: 0 0 12px;
}

.mff-wpi-upsell-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  margin: 0 0 20px;
}

.mff-wpi-upsell-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.mff-wpi-upsell-feature {
  font-size: 14px;
  color: var(--mff-black);
  font-weight: 600;
}

.mff-wpi-upsell-badge { flex-shrink: 0; }

.mff-wpi-upsell-badge-inner {
  background: #fff;
  border: 2px solid var(--mff-red);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  min-width: 200px;
}

.mff-wpi-upsell-badge-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mff-wpi-upsell-badge-from {
  font-size: 14px;
  color: var(--mff-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mff-wpi-upsell-badge-amount {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--mff-red);
}

.mff-wpi-upsell-badge-period {
  font-size: 14px;
  color: var(--mff-text-muted);
}


/* ── WPI Responsive (max-width: 900px) ───────────────────────── */

@media (max-width: 900px) {
  .mff-wpi-hero { padding: 0 24px; }
  .mff-wpi-hero-content { grid-template-columns: 1fr; gap: 0; min-height: auto; }
  .mff-wpi-hero-copy { padding: 40px 0 24px; }
  .mff-wpi-hero-image { order: 1; }
  .mff-wpi-hero-headline { font-size: 2.2rem; }

  .mff-wpi-flavor-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  .mff-wpi-problem-content,
  .mff-wpi-nutrition-content { grid-template-columns: 1fr; gap: 40px; }
  .mff-wpi-problem-image { order: -1; }

  .mff-wpi-benefits-grid { grid-template-columns: 1fr 1fr; }

  .mff-wpi-hiw-steps { flex-direction: column; gap: 16px; }
  .mff-wpi-hiw-connector { transform: rotate(90deg); align-self: center; padding: 0; margin: 0; }

  .mff-wpi-review-cards { grid-template-columns: 1fr 1fr; }

  .mff-wpi-compare-table { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto 48px; }

  .mff-wpi-upsell-content { grid-template-columns: 1fr; gap: 32px; }
  .mff-wpi-upsell-badge-inner { max-width: 200px; }
}


/* ── WPI Responsive (max-width: 600px) ───────────────────────── */

@media (max-width: 600px) {
  .mff-wpi-hero { padding: 0 16px; }
  .mff-wpi-hero-headline { font-size: 1.8rem; }
  .mff-wpi-hero-stats { gap: 8px; }
  .mff-wpi-hero-stat { padding: 0 10px; font-size: 14px; }
  .mff-wpi-hero-stat strong { font-size: 13px; }

  .mff-wpi-flavors,
  .mff-wpi-problem,
  .mff-wpi-benefits,
  .mff-wpi-hiw,
  .mff-wpi-nutrition,
  .mff-wpi-reviews,
  .mff-wpi-compare,
  .mff-wpi-upsell { padding: 60px 16px; }

  .mff-wpi-benefits-grid { grid-template-columns: 1fr; }

  .mff-wpi-benefits-value-bar { flex-direction: column; text-align: center; }

  .mff-wpi-review-cards { grid-template-columns: 1fr; }

  .mff-wpi-closer-wrap { min-height: 400px; }
  .mff-wpi-closer-headline { font-size: 1.6rem; }
  .mff-wpi-closer-content { padding: 60px 24px; }

  .mff-wpi-qty-row { flex-direction: column; }
  .mff-wpi-atc-btn { width: 100%; }
}

/* Mid-CTA sub text red variant — used on Daily Lift page */
.mff-dl-cta-sub-red {
  color: var(--mff-red) !important;
}


/* ============================================================
   CONTACT PAGE
   Template: contact-page.html
   ============================================================ */

/* ---- Hero ---- */
.mff-contact-hero {
  background: var(--mff-black);
  padding: 80px 24px 72px;
  text-align: center;
}
.mff-contact-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.mff-contact-hero .mff-eyebrow-light {
  color: var(--mff-red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.mff-contact-hero-headline {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.mff-contact-hero-subhead {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Body layout ---- */
.mff-contact-body {
  background: var(--mff-off-white);
  padding: 64px 24px 96px;
}
.mff-contact-body > .wp-block-group {
  max-width: 1200px;
  margin: 0 auto;
}
.mff-contact-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Form column ---- */
.mff-contact-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--mff-border);
}
.mff-contact-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mff-contact-section-intro {
  font-size: 14px;
  color: var(--mff-text-muted);
  margin: 0 0 28px;
  line-height: 1.6;
}

/* ---- Info column ---- */
.mff-contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mff-contact-info-card,
.mff-contact-faq-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid var(--mff-border);
}
.mff-contact-info-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mff-border);
  letter-spacing: -0.01em;
}

/* Info rows */
.mff-contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mff-border);
}
.mff-contact-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mff-contact-info-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--mff-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mff-red);
}
.mff-contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mff-contact-info-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mff-text-muted);
}
.mff-contact-info-value {
  font-size: 14px;
  color: var(--mff-black);
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
}
a.mff-contact-info-value:hover {
  color: var(--mff-red);
}

/* Social links */
.mff-contact-social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mff-contact-social-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-red);
  text-decoration: none;
}
.mff-contact-social-link:hover {
  color: var(--mff-red-dark);
  text-decoration: underline;
}

/* FAQ */
.mff-contact-faq-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--mff-border);
}
.mff-contact-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mff-contact-faq-q {
  font-size: 14px;
  font-weight: 700;
  color: var(--mff-black);
  margin: 0 0 4px;
  line-height: 1.4;
}
.mff-contact-faq-a {
  font-size: 13px;
  color: var(--mff-text-muted);
  margin: 0;
  line-height: 1.6;
}
.mff-contact-faq-a a {
  color: var(--mff-red);
  text-decoration: none;
}
.mff-contact-faq-a a:hover {
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .mff-contact-layout {
    grid-template-columns: 1fr;
  }
  .mff-contact-info-col {
    order: -1;
  }
  .mff-contact-body {
    padding: 48px 16px 72px;
  }
  .mff-contact-form-card {
    padding: 28px 20px;
  }
  .mff-contact-info-card,
  .mff-contact-faq-card {
    padding: 24px 20px;
  }
  .mff-contact-hero {
    padding: 60px 20px 56px;
  }
}
/* ============================================================
   SHOP PAGE — /shop/
   Template: shop-page.html
   CSS prefix: .mff-shop-
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */

.mff-shop-hero {
  background: var(--mff-black);
  padding: 72px 24px 64px;
  text-align: center;
}

.mff-shop-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}

.mff-shop-hero-eyebrow {
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 14px;
}

.mff-shop-hero-headline {
  font-family: var(--mff-font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  color: var(--mff-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
}

.mff-shop-hero-subhead {
  font-family: var(--mff-font-body);
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0;
}

/* ── Trust Bar ──────────────────────────────────────────────── */

.mff-shop-trust-bar {
  background: var(--mff-off-white);
  border-bottom: 1px solid var(--mff-border);
  padding: 14px 24px;
}

.mff-shop-trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.mff-shop-trust-item {
  font-family: var(--mff-font-body);
  font-size: 15px;
  color: var(--mff-text-muted);
  padding: 4px 24px;
  white-space: nowrap;
}

.mff-shop-trust-divider {
  width: 1px;
  height: 18px;
  background: var(--mff-border-dark);
  flex-shrink: 0;
}

/* ── Section Shell ──────────────────────────────────────────── */

.mff-shop-section {
  padding: 80px 24px;
  background: var(--mff-white);
}

.mff-shop-section--dark {
  background: var(--mff-black);
}

.mff-shop-section--gift {
  background: var(--mff-off-white);
}

.mff-shop-section--notify {
  background: #FFF5F5;
  border-top: 1px solid #FAD7D5;
  border-bottom: 1px solid #FAD7D5;
}

.mff-shop-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Section Header ─────────────────────────────────────────── */

.mff-shop-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.mff-shop-eyebrow {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 10px;
}

.mff-shop-eyebrow--light {
  color: var(--mff-red) !important;
}

.mff-shop-section-title {
  font-family: var(--mff-font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--mff-text);
  margin: 0 0 14px;
}

.mff-shop-section-title--light {
  color: var(--mff-white) !important;
}

.mff-shop-section-desc {
  font-family: var(--mff-font-body);
  font-size: 16px;
  color: var(--mff-text-muted);
  line-height: 1.65;
  margin: 0;
}

.mff-shop-section-desc--light {
  color: rgba(255,255,255,0.65) !important;
}

/* ── Supplement Product Grid ────────────────────────────────── */

.mff-shop-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Product Card ───────────────────────────────────────────── */

.mff-shop-product-card {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.mff-shop-product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.mff-shop-product-card--soon {
  opacity: 0.85;
}

.mff-shop-product-card--soon:hover {
  transform: none;
  box-shadow: none;
}

.mff-shop-coming-soon-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--mff-black);
  color: var(--mff-white);
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  z-index: 2;
}

.mff-shop-product-card-img-wrap {
  display: block;
  background: var(--mff-off-white);
  height: 260px;
  overflow: hidden;
  text-decoration: none;
}

.mff-shop-product-card-img-wrap--soon {
  cursor: default;
}

.mff-shop-product-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.mff-shop-product-card:not(.mff-shop-product-card--soon):hover .mff-shop-product-card-img {
  transform: scale(1.04);
}

.mff-shop-soon-placeholder {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mff-off-white);
  gap: 12px;
}

.mff-shop-soon-icon {
  font-size: 64px;
  line-height: 1;
}

.mff-shop-soon-label {
  font-family: var(--mff-font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-shop-product-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mff-shop-product-card-cat {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 6px;
}

.mff-shop-product-card-title {
  font-family: var(--mff-font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mff-text);
  margin: 0 0 10px;
  line-height: 1.1;
}

.mff-shop-product-card-desc {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: var(--mff-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

.mff-shop-macro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.mff-shop-macro-pill {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-text);
  background: var(--mff-off-white);
  border: 1px solid var(--mff-border);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

.mff-shop-macro-pill--muted {
  color: var(--mff-text-faint);
}

.mff-shop-product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--mff-border);
  padding-top: 18px;
}

.mff-shop-product-price {
  font-family: var(--mff-font-display);
  font-size: 22px;
  color: var(--mff-text);
  letter-spacing: 0.02em;
}

.mff-shop-product-price--muted {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: var(--mff-text-faint);
  font-weight: 400;
  letter-spacing: 0;
}

.mff-shop-product-price-unit {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--mff-text-muted);
  letter-spacing: 0;
}

.mff-shop-card-btn {
  display: inline-block;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-white);
  background: var(--mff-red);
  border: 1.5px solid var(--mff-red);
  border-radius: 8px;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.mff-shop-card-btn:hover {
  background: var(--mff-red-dark);
  border-color: var(--mff-red-dark);
  color: var(--mff-white);
}

.mff-shop-card-btn--ghost {
  background: transparent;
  color: var(--mff-text-muted);
  border-color: var(--mff-border-dark);
}

.mff-shop-card-btn--ghost:hover {
  background: var(--mff-off-white);
  color: var(--mff-text);
  border-color: var(--mff-text-muted);
}

/* ── Digital Subscriptions ──────────────────────────────────── */

.mff-shop-digital-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}

.mff-shop-digital-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}

.mff-shop-digital-eyebrow {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 10px;
}

.mff-shop-digital-title {
  font-family: var(--mff-font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mff-white);
  margin: 0 0 12px;
  line-height: 1.1;
}

.mff-shop-digital-desc {
  font-family: var(--mff-font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
  margin: 0 0 20px;
}

.mff-shop-digital-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.mff-shop-digital-features li {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  padding-left: 20px;
  position: relative;
}

.mff-shop-digital-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--mff-red);
  font-weight: 700;
}

.mff-shop-digital-pricing {
  margin-bottom: 24px;
}

.mff-shop-digital-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.mff-shop-digital-price {
  font-family: var(--mff-font-display);
  font-size: 38px;
  color: var(--mff-white);
  letter-spacing: 0.02em;
}

.mff-shop-digital-period {
  font-family: var(--mff-font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.45);
}

.mff-shop-digital-price-alt {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  margin: 0;
}

.mff-shop-digital-btn {
  display: block;
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mff-white);
  background: var(--mff-red);
  border-radius: 8px;
  padding: 13px 20px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.mff-shop-digital-btn:hover {
  background: var(--mff-red-dark);
  color: var(--mff-white);
}

.mff-shop-bundle-note {
  max-width: 900px;
  margin: 28px auto 0;
  background: rgba(242,79,72,0.10);
  border: 1px solid rgba(242,79,72,0.22);
  border-radius: 12px;
  padding: 16px 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mff-shop-bundle-note-icon {
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

.mff-shop-bundle-note p {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin: 0;
  line-height: 1.55;
}

.mff-shop-bundle-note strong {
  color: var(--mff-white);
}

/* ── Gift Certificates ──────────────────────────────────────── */

.mff-shop-gift-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mff-shop-gift-copy .mff-shop-eyebrow {
  margin-bottom: 12px;
}

.mff-shop-gift-title {
  font-family: var(--mff-font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--mff-text);
  margin: 0 0 16px;
}

.mff-shop-gift-desc {
  font-family: var(--mff-font-body);
  font-size: 16px;
  color: var(--mff-text-muted);
  line-height: 1.65;
  margin: 0 0 22px;
}

.mff-shop-gift-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mff-shop-gift-benefits li {
  font-family: var(--mff-font-body);
  font-size: 15px;
  color: var(--mff-text);
}

.mff-shop-gift-btn {
  display: inline-block;
  font-family: var(--mff-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--mff-white);
  background: var(--mff-red);
  border-radius: 8px;
  padding: 14px 26px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mff-shop-gift-btn:hover {
  background: var(--mff-red-dark);
  color: var(--mff-white);
}

.mff-shop-gift-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mff-shop-gift-card-mockup {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1.586 / 1;
  background: linear-gradient(135deg, #1D1D1D 0%, #2a2a2a 60%, #1a1a1a 100%);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.10);
  overflow: hidden;
  position: relative;
}

.mff-shop-gift-card-mockup::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 65%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(242,79,72,0.22) 0%, transparent 70%);
  pointer-events: none;
}

.mff-shop-gift-card-inner {
  position: relative;
  z-index: 1;
  padding: 30px 32px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mff-shop-gift-card-logo {
  font-family: var(--mff-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mff-white);
}

.mff-shop-gift-card-mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mff-shop-gift-card-label {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.mff-shop-gift-card-amount {
  font-family: var(--mff-font-display);
  font-size: 38px;
  color: var(--mff-white);
  margin: 0;
  letter-spacing: 0.04em;
}

.mff-shop-gift-card-tagline {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  margin: 0;
  font-style: italic;
}

/* ── Waitlist ───────────────────────────────────────────────── */

.mff-shop-notify-wrap {
  text-align: center;
  max-width: 560px;
}

.mff-shop-notify-icon {
  font-size: 52px;
  display: block;
  margin-bottom: 16px;
}

.mff-shop-notify-title {
  font-family: var(--mff-font-display);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mff-text);
  margin: 0 0 14px;
}

.mff-shop-notify-desc {
  font-family: var(--mff-font-body);
  font-size: 16px;
  color: var(--mff-text-muted);
  line-height: 1.65;
  margin: 0 0 28px;
}

.mff-shop-notify-form {
  background: var(--mff-white);
  border: 2px dashed var(--mff-border-dark);
  border-radius: 12px;
  padding: 32px 24px;
}

.mff-shop-notify-placeholder {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: var(--mff-text-faint);
  margin: 0;
  text-align: center;
}

/* ── Final CTA ──────────────────────────────────────────────── */

.mff-shop-final-cta {
  background: var(--mff-red);
  padding: 72px 24px;
}

.mff-shop-final-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.mff-shop-final-cta-title {
  font-family: var(--mff-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mff-white);
  margin: 0 0 14px;
  line-height: 1.1;
}

.mff-shop-final-cta-desc {
  font-family: var(--mff-font-body);
  font-size: 17px;
  color: rgba(255,255,255,0.80);
  line-height: 1.6;
  margin: 0 0 32px;
}

.mff-shop-final-cta-btn {
  display: inline-block;
  font-family: var(--mff-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--mff-red);
  background: var(--mff-white);
  border-radius: 8px;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mff-shop-final-cta-btn:hover {
  background: var(--mff-off-white);
  color: var(--mff-red);
}

/* ── Responsive: tablet (max-width: 960px) ──────────────────── */

@media (max-width: 960px) {
  .mff-shop-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mff-shop-gift-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mff-shop-gift-visual {
    order: -1;
  }

  .mff-shop-gift-card-mockup {
    max-width: 300px;
  }
}

/* ── Responsive: mobile (max-width: 680px) ──────────────────── */

@media (max-width: 680px) {
  .mff-shop-hero {
    padding: 52px 20px 44px;
  }

  .mff-shop-section {
    padding: 56px 20px;
  }

  .mff-shop-product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mff-shop-digital-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mff-shop-digital-card {
    padding: 28px 24px;
  }

  .mff-shop-trust-divider {
    display: none;
  }

  .mff-shop-trust-item {
    padding: 4px 12px;
    font-size: 14px;
  }

  .mff-shop-product-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mff-shop-card-btn {
    width: 100%;
    text-align: center;
  }

  .mff-shop-bundle-note {
    margin-top: 20px;
  }

  .mff-shop-final-cta {
    padding: 52px 20px;
  }
}

/* ── Shop page additions ── */

/* Gift certificate real image */
.mff-shop-gift-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  background: transparent;
}

/* Mug cake card: photo needs cover, not contain */
.mff-shop-product-card--soon .mff-shop-product-card-img {
  object-fit: cover;
  padding: 0;
}

/* Shop page — padding below supplement product grid */
.mff-shop-product-grid {
  margin-bottom: 24px !important;
}

/* Gift card image — PNG has its own drop shadow; no extra styles needed */

/* Shop page — padding below gift certificate CTA button */
.mff-shop-gift-btn {
  margin-bottom: 40px !important;
}

/* ── Shop page — Pre-sale countdown ─────────────────────────── */

.mff-shop-countdown-eyebrow {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 10px;
}

.mff-shop-countdown-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 32px;
}

.mff-shop-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-radius: 14px;
  padding: 18px 22px;
  min-width: 80px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mff-shop-countdown-num {
  font-family: var(--mff-font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--mff-text);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mff-shop-countdown-label {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mff-text-muted);
}

.mff-shop-countdown-sep {
  font-family: var(--mff-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--mff-text-muted);
  align-self: flex-start;
  padding-top: 14px;
  line-height: 1;
}

.mff-shop-countdown-live {
  text-align: center;
  margin: 28px 0;
}

.mff-shop-countdown-live p {
  font-family: var(--mff-font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0;
}

@media (max-width: 600px) {
  .mff-shop-countdown-unit {
    min-width: 60px;
    padding: 14px 14px;
  }

  .mff-shop-countdown-num {
    font-size: 30px;
  }

  .mff-shop-countdown-sep {
    font-size: 22px;
    padding-top: 10px;
  }

  .mff-shop-countdown-wrap {
    gap: 8px;
  }
}

/* ============================================================
   GIFT CERTIFICATE PAGE (.mff-gc-)
   Template: gift-certificate-page.html
   Assigned to: /product/gift-certificate/
   ============================================================ */

/* ── Hero — dark bg, split layout ───────────────────────────── */

.mff-gc-hero {
  background: var(--mff-black);
  padding: 0 40px;
  overflow: hidden;
}

.mff-gc-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
}

.mff-gc-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 60px 0;
}

.mff-gc-hero-headline {
  font-family: var(--mff-font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

.mff-gc-hero-subhead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 480px;
}

.mff-gc-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mff-gc-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.mff-gc-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  gap: 2px;
}

.mff-gc-hero-stat strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.mff-gc-hero-stat span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mff-gc-hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  margin: 0 24px 0 0;
  flex-shrink: 0;
}

.mff-gc-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.mff-gc-hero-mockup {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  background: transparent;
}


/* ── Form Section — WooCommerce Smart Coupons embed ─────────── */

.mff-gc-form-section {
  background: var(--mff-white);
  padding: 80px 40px;
}

.mff-gc-form-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.mff-gc-form-header {
  text-align: center;
  margin-bottom: 40px;
}

.mff-gc-form-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0 0 12px;
}

.mff-gc-form-subhead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* WooCommerce product form embed — hide everything except the
   amount input and Add to Cart button */
.mff-gc-form-embed .product {
  max-width: 100%;
}

/* Hide default WooCommerce elements we don't need */
.mff-gc-form-embed .woocommerce-breadcrumb,
.mff-gc-form-embed .product_title,
.mff-gc-form-embed .woocommerce-product-details__short-description,
.mff-gc-form-embed .product_meta,
.mff-gc-form-embed .woocommerce-tabs,
.mff-gc-form-embed .woocommerce-product-gallery,
.mff-gc-form-embed .related.products,
.mff-gc-form-embed .up-sells,
.mff-gc-form-embed .woocommerce-Reviews {
  display: none !important;
}

/* Style the Smart Coupons amount input */
.mff-gc-form-embed .cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background: var(--mff-off-white);
  border: 1px solid var(--mff-border);
  border-radius: 16px;
}

.mff-gc-form-embed .cart label {
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mff-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mff-gc-form-embed .cart input[type="text"],
.mff-gc-form-embed .cart input[type="number"],
.mff-gc-form-embed .cart .input-text {
  font-family: var(--mff-font-body);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: var(--mff-text);
  background: var(--mff-white);
  border: 2px solid var(--mff-border);
  border-radius: 12px;
  padding: 16px 24px;
  width: 200px;
  max-width: 100%;
  transition: border-color 0.15s ease;
}

.mff-gc-form-embed .cart input[type="text"]:focus,
.mff-gc-form-embed .cart input[type="number"]:focus,
.mff-gc-form-embed .cart .input-text:focus {
  outline: none;
  border-color: var(--mff-red);
}

/* Style the Add to Cart button inside the embed */
.mff-gc-form-embed .cart .single_add_to_cart_button {
  display: inline-block;
  background: var(--mff-red);
  color: #fff;
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mff-gc-form-embed .cart .single_add_to_cart_button:hover {
  background: var(--mff-red-dark);
}

/* Hide the quantity input (Smart Coupons handles its own) */
.mff-gc-form-embed .cart .quantity {
  display: none !important;
}

/* Notes below form */
.mff-gc-form-notes {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  justify-content: center;
}

.mff-gc-form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  max-width: 280px;
}

.mff-gc-form-note-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}

.mff-gc-form-note p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-gc-form-note strong {
  color: var(--mff-text);
}


/* ── How It Works — 3 steps ─────────────────────────────────── */

.mff-gc-how {
  background: var(--mff-off-white);
  padding: 80px 40px;
}

.mff-gc-how-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mff-gc-how-header {
  text-align: center;
}

.mff-gc-how-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-gc-how-steps {
  display: flex;
  align-items: flex-start;
}

.mff-gc-how-step {
  flex: 1;
  background: #fff;
  border: 1px solid var(--mff-border);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.mff-gc-how-step-num {
  width: 52px;
  height: 52px;
  background: var(--mff-red);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.mff-gc-how-step-title {
  font-family: var(--mff-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
}

.mff-gc-how-step-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-gc-how-connector {
  font-size: 1.8rem;
  color: var(--mff-red);
  padding: 0 16px;
  align-self: center;
  flex-shrink: 0;
  margin-top: -20px;
}


/* ── What They Can Get — product showcase grid ──────────────── */

.mff-gc-products {
  background: var(--mff-white);
  padding: 80px 40px;
}

.mff-gc-products-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-gc-products-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-gc-products-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0 0 12px;
}

.mff-gc-products-subhead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mff-text-muted);
  margin: 0;
}

.mff-gc-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mff-gc-product-card {
  background: var(--mff-off-white);
  border: 1px solid var(--mff-border);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mff-gc-product-card:hover {
  border-color: var(--mff-red);
  box-shadow: 0 8px 24px rgba(242,79,72,0.08);
}

.mff-gc-product-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}

.mff-gc-product-name {
  font-family: var(--mff-font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mff-black);
  margin: 0;
  line-height: 1.2;
}

.mff-gc-product-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mff-text-muted);
  margin: 0;
  flex: 1;
}

.mff-gc-product-price {
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--mff-red);
  margin-top: 4px;
}


/* ── Benefits — dark bg, 4-card grid ────────────────────────── */

.mff-gc-benefits {
  background: var(--mff-black);
  padding: 80px 40px;
}

.mff-gc-benefits-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.mff-gc-benefits-header {
  text-align: center;
  margin-bottom: 48px;
}

.mff-gc-benefits-headline {
  font-family: var(--mff-font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.mff-gc-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mff-gc-benefit-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mff-gc-benefit-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}

.mff-gc-benefit-title {
  font-family: var(--mff-font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.mff-gc-benefit-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}


/* ── Final CTA — red bg ─────────────────────────────────────── */

.mff-gc-final-cta {
  background: var(--mff-red);
  padding: 72px 40px;
}

.mff-gc-final-cta-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.mff-gc-final-cta-headline {
  font-family: var(--mff-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}

.mff-gc-final-cta-subhead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
}

.mff-gc-final-cta .mff-btn-primary {
  background: #fff !important;
  color: var(--mff-red) !important;
}

.mff-gc-final-cta .mff-btn-primary:hover {
  background: var(--mff-off-white) !important;
  color: var(--mff-red-dark) !important;
}


/* ── Gift Certificate Page — Responsive ─────────────────────── */

@media (max-width: 960px) {
  .mff-gc-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
  }

  .mff-gc-hero-copy {
    align-items: center;
    padding: 48px 0 0;
  }

  .mff-gc-hero-subhead {
    margin-left: auto;
    margin-right: auto;
  }

  .mff-gc-hero-actions {
    justify-content: center;
  }

  .mff-gc-hero-stats {
    justify-content: center;
  }

  .mff-gc-hero-stat {
    align-items: center;
  }

  .mff-gc-hero-image {
    padding: 0 0 40px;
  }

  .mff-gc-hero-mockup {
    max-width: 340px;
  }

  .mff-gc-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mff-gc-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mff-gc-hero {
    padding: 0 20px;
  }

  .mff-gc-hero-headline {
    font-size: 2.2rem;
  }

  .mff-gc-how,
  .mff-gc-form-section,
  .mff-gc-products,
  .mff-gc-benefits,
  .mff-gc-final-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mff-gc-how-steps {
    flex-direction: column;
    gap: 16px;
  }

  .mff-gc-how-connector {
    transform: rotate(90deg);
    align-self: center;
    margin: 0;
    padding: 0;
  }

  .mff-gc-form-notes {
    flex-direction: column;
    align-items: center;
  }

  .mff-gc-form-note {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .mff-gc-hero-headline {
    font-size: 1.8rem;
  }

  .mff-gc-hero-stats {
    gap: 8px;
  }

  .mff-gc-hero-stat {
    padding: 0 12px 0 0;
  }

  .mff-gc-hero-stat strong {
    font-size: 1.1rem;
  }

  .mff-gc-hero-stat-divider {
    margin: 0 12px 0 0;
    height: 28px;
  }

  .mff-gc-products-grid {
    grid-template-columns: 1fr;
  }

  .mff-gc-benefits-grid {
    grid-template-columns: 1fr;
  }

  .mff-gc-form-embed .cart input[type="text"],
  .mff-gc-form-embed .cart input[type="number"],
  .mff-gc-form-embed .cart .input-text {
    font-size: 22px;
    padding: 14px 20px;
    width: 160px;
  }

  .mff-gc-final-cta {
    padding: 52px 20px;
  }

  .mff-gc-final-cta-headline {
    font-size: 1.6rem;
  }
}


/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT PAGE (.mff-sp-)
   Template: single-product.html
   Auto-applied to all /product/* pages without a specific
   template override (e.g. Dreami, WPI use their own).
   
   Covers: default product pages, subscription switching,
   gift certificates (fallback), and any future products.
   
   Scoped under .single-product body class (added by WC)
   and/or .mff-sp-page wrapper from the template.
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────────── */

.mff-sp-page {
  background: var(--mff-white);
}

.mff-sp-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 60px;
}

/* ── Breadcrumbs ────────────────────────────────────────────── */

.mff-sp-page .woocommerce-breadcrumb,
.mff-sp-page .wc-block-breadcrumbs {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  padding: 20px 0 !important;
  margin: 0 !important;
}

.mff-sp-page .woocommerce-breadcrumb a {
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.mff-sp-page .woocommerce-breadcrumb a:hover {
  color: var(--mff-red) !important;
}

/* ── Two-column layout ──────────────────────────────────────── */

.mff-sp-page .mff-sp-columns {
  gap: 48px !important;
  align-items: flex-start !important;
  margin-top: 8px !important;
  margin-bottom: 48px !important;
}


/* ── Product gallery (left column) ──────────────────────────── */

.mff-sp-page .woocommerce-product-gallery {
  background: var(--mff-off-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 24px !important;
}

.mff-sp-page .woocommerce-product-gallery__image img,
.mff-sp-page .wp-block-woocommerce-product-image-gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  display: block !important;
}

/* Gallery zoom trigger icon */
.mff-sp-page .woocommerce-product-gallery__trigger {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
}

/* Gallery thumbnails */
.mff-sp-page .flex-control-thumbs {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

.mff-sp-page .flex-control-thumbs li {
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
}

.mff-sp-page .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mff-sp-page .flex-control-thumbs li:hover {
  border-color: var(--mff-text-muted) !important;
}

.mff-sp-page .flex-control-thumbs li .flex-active {
  border-color: var(--mff-red) !important;
}


/* ── Product title ──────────────────────────────────────────── */

.mff-sp-page .wp-block-post-title {
  font-family: var(--mff-font-display) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  color: var(--mff-text) !important;
  margin: 0 0 12px !important;
}


/* ── Star rating ────────────────────────────────────────────── */

.mff-sp-page .wc-block-components-product-rating {
  margin-bottom: 12px !important;
}

.mff-sp-page .wc-block-components-product-rating__stars {
  color: #F5A623 !important;
  font-size: 16px !important;
}

.mff-sp-page .wc-block-components-product-rating__reviews_count a,
.mff-sp-page .woocommerce-review-link {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
  margin-left: 4px !important;
}

.mff-sp-page .wc-block-components-product-rating__reviews_count a:hover,
.mff-sp-page .woocommerce-review-link:hover {
  color: var(--mff-red) !important;
}


/* ── Price ───────────────────────────────────────────────────── */

.mff-sp-page .wc-block-components-product-price,
.mff-sp-page .wp-block-woocommerce-product-price {
  margin-bottom: 16px !important;
}

.mff-sp-page .woocommerce-Price-amount {
  font-family: var(--mff-font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  letter-spacing: 0.01em !important;
}

.mff-sp-page .wc-block-components-product-price .from {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mff-text-muted) !important;
  margin-right: 4px !important;
}

.mff-sp-page .subscription-details {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mff-text-muted) !important;
}

/* Sale price — crossed-out original */
.mff-sp-page del .woocommerce-Price-amount {
  font-size: 22px !important;
  color: var(--mff-text-faint) !important;
  text-decoration: line-through !important;
}

.mff-sp-page ins .woocommerce-Price-amount {
  color: var(--mff-red) !important;
}


/* ── Short description / excerpt ────────────────────────────── */

.mff-sp-page .wp-block-post-excerpt,
.mff-sp-page .woocommerce-product-details__short-description {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  margin-bottom: 24px !important;
}

.mff-sp-page .wp-block-post-excerpt__excerpt {
  margin: 0 !important;
}


/* ── Memberships discount notices ───────────────────────────── */

.mff-sp-page .wc-memberships-member-discount-message {
  background: #FFF8F0 !important;
  border: 1px solid #F5D5A0 !important;
  border-left: 3px solid #E8A838 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  color: #7A5D28 !important;
  margin-bottom: 16px !important;
}

.mff-sp-page .wc-memberships-member-discount-message::before {
  display: none !important;
}


/* ── Variations table (subscription billing period, etc.) ──── */

.mff-sp-page form.cart {
  margin-bottom: 24px !important;
}

.mff-sp-page table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
}

.mff-sp-page table.variations td {
  padding: 8px 0 !important;
  border: none !important;
  vertical-align: middle !important;
}

.mff-sp-page table.variations td.label label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--mff-text) !important;
}

.mff-sp-page table.variations td.value select {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  background: var(--mff-white) !important;
  border: 1.5px solid var(--mff-border) !important;
  border-radius: 10px !important;
  padding: 12px 40px 12px 16px !important;
  width: 100% !important;
  max-width: 320px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235F5F5F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

.mff-sp-page table.variations td.value select:focus {
  outline: none !important;
  border-color: var(--mff-red) !important;
}

/* Clear / reset link for variation selection */
.mff-sp-page .reset_variations {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  margin-left: 8px !important;
}

.mff-sp-page .reset_variations:hover {
  color: var(--mff-red) !important;
}

/* Variation description (shown after selecting a variation) */
.mff-sp-page .woocommerce-variation-description p {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 0 12px !important;
}

/* Variation price (updates when user picks a billing period) */
.mff-sp-page .woocommerce-variation-price .price {
  font-family: var(--mff-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--mff-text) !important;
  margin-bottom: 12px !important;
}


/* ── Quantity input ──────────────────────────────────────────── */

.mff-sp-page .quantity {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 12px !important;
}

.mff-sp-page .quantity .qty {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--mff-text) !important;
  background: var(--mff-white) !important;
  border: 1.5px solid var(--mff-border) !important;
  border-radius: 10px !important;
  width: 64px !important;
  padding: 12px 8px !important;
  transition: border-color 0.15s ease !important;
}

.mff-sp-page .quantity .qty:focus {
  outline: none !important;
  border-color: var(--mff-red) !important;
}


/* ── Add to Cart / Switch Subscription button ───────────────── */

.mff-sp-page .single_add_to_cart_button,
.mff-sp-page button.single_add_to_cart_button {
  display: inline-block !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  line-height: 1 !important;
}

.mff-sp-page .single_add_to_cart_button:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}

/* Disabled state (no variation selected yet) */
.mff-sp-page .single_add_to_cart_button.disabled,
.mff-sp-page .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}


/* ── Smart Coupons gift certificate fields (inside form.cart) ── */

.mff-sp-page .gift-certificates {
  margin-top: 16px !important;
}

.mff-sp-page .gift-certificates label {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.mff-sp-page .gift-certificates input[type="text"],
.mff-sp-page .gift-certificates input[type="email"],
.mff-sp-page .gift-certificates textarea {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  background: var(--mff-white) !important;
  border: 1.5px solid var(--mff-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  max-width: 400px !important;
  transition: border-color 0.15s ease !important;
}

.mff-sp-page .gift-certificates input:focus,
.mff-sp-page .gift-certificates textarea:focus {
  outline: none !important;
  border-color: var(--mff-red) !important;
}


/* ── Product meta (SKU, Category) ───────────────────────────── */

.mff-sp-page .product_meta,
.mff-sp-page .wc-block-components-product-sku {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.mff-sp-page .product_meta a,
.mff-sp-page .wc-block-components-product-sku a {
  color: var(--mff-red) !important;
  text-decoration: none !important;
}

.mff-sp-page .product_meta a:hover,
.mff-sp-page .wc-block-components-product-sku a:hover {
  text-decoration: underline !important;
}

.mff-sp-page .wp-block-post-terms__prefix {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}


/* ── Tabs: Description, Additional Info, Reviews ────────────── */

.mff-sp-page .woocommerce-tabs,
.mff-sp-page .wp-block-woocommerce-product-details {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Tab navigation */
.mff-sp-page .wc-tabs,
.mff-sp-page ul.tabs {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  border-bottom: 1px solid var(--mff-border) !important;
  gap: 0 !important;
}

.mff-sp-page .wc-tabs li,
.mff-sp-page ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.mff-sp-page .wc-tabs li a,
.mff-sp-page ul.tabs li a {
  display: block !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: var(--mff-text-muted) !important;
  text-decoration: none !important;
  padding: 14px 24px !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  background: none !important;
}

.mff-sp-page .wc-tabs li a:hover,
.mff-sp-page ul.tabs li a:hover {
  color: var(--mff-text) !important;
}

.mff-sp-page .wc-tabs li.active a,
.mff-sp-page ul.tabs li.active a {
  color: var(--mff-text) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--mff-red) !important;
}

/* Tab panels */
.mff-sp-page .woocommerce-Tabs-panel {
  padding: 0 !important;
  margin: 0 !important;
}

.mff-sp-page .woocommerce-Tabs-panel h2 {
  font-family: var(--mff-font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 0 16px !important;
}

.mff-sp-page .woocommerce-Tabs-panel p {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
}

/* Additional information table */
.mff-sp-page .woocommerce-Tabs-panel table.shop_attributes,
.mff-sp-page .woocommerce-product-attributes {
  width: 100% !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border-collapse: collapse !important;
}

.mff-sp-page .woocommerce-product-attributes th {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--mff-text-faint) !important;
  background: var(--mff-off-white) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--mff-border) !important;
  width: 30% !important;
}

.mff-sp-page .woocommerce-product-attributes td {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #F0EDE9 !important;
}


/* ── Reviews ────────────────────────────────────────────────── */

.mff-sp-page .woocommerce-Reviews {
  margin-top: 0 !important;
}

.mff-sp-page .woocommerce-Reviews h2 {
  font-family: var(--mff-font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mff-text) !important;
  margin: 0 0 24px !important;
}

/* Review list */
.mff-sp-page ol.commentlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mff-sp-page ol.commentlist li.review {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--mff-border) !important;
  margin: 0 !important;
}

.mff-sp-page ol.commentlist li.review:last-child {
  border-bottom: none !important;
}

/* Review avatar */
.mff-sp-page ol.commentlist .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  float: left !important;
  margin-right: 14px !important;
}

/* Review meta (name + date) */
.mff-sp-page .woocommerce-review__author {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}

.mff-sp-page .woocommerce-review__dash {
  display: none !important;
}

.mff-sp-page .woocommerce-review__published-date {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Review stars — use CSS stars like the rest of the theme */
.mff-sp-page .comment-text .star-rating,
.mff-sp-page .woocommerce-review .star-rating {
  color: #F5A623 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

/* Review body text */
.mff-sp-page .comment-text .description p {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

/* Verified owner badge */
.mff-sp-page .woocommerce-review__verified {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #3A9B5B !important;
  background: #E9F7EE !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
}


/* ── Review form ────────────────────────────────────────────── */

.mff-sp-page #review_form_wrapper {
  margin-top: 32px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.mff-sp-page #reply-title {
  font-family: var(--mff-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mff-text) !important;
  margin: 0 0 16px !important;
}

.mff-sp-page .comment-form label {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--mff-text) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.mff-sp-page .comment-form textarea,
.mff-sp-page .comment-form input[type="text"],
.mff-sp-page .comment-form input[type="email"] {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  background: var(--mff-white) !important;
  border: 1.5px solid var(--mff-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  max-width: 480px !important;
  transition: border-color 0.15s ease !important;
}

.mff-sp-page .comment-form textarea:focus,
.mff-sp-page .comment-form input:focus {
  outline: none !important;
  border-color: var(--mff-red) !important;
}

.mff-sp-page .comment-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.mff-sp-page .comment-form .form-submit input[type="submit"] {
  display: inline-block !important;
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.mff-sp-page .comment-form .form-submit input[type="submit"]:hover {
  background: var(--mff-red-dark) !important;
}

/* Star rating selector in review form */
.mff-sp-page .comment-form-rating .stars {
  margin-bottom: 12px !important;
}

.mff-sp-page .comment-form-rating .stars a {
  color: var(--mff-border) !important;
  text-decoration: none !important;
  font-size: 20px !important;
}

.mff-sp-page .comment-form-rating .stars a:hover,
.mff-sp-page .comment-form-rating .stars a.active {
  color: #F5A623 !important;
}

/* "You must be logged in" message */
.mff-sp-page .woocommerce-verification-required {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
  background: var(--mff-off-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  text-align: center !important;
  margin-top: 24px !important;
}

.mff-sp-page .woocommerce-verification-required a {
  color: var(--mff-red) !important;
  font-weight: 600 !important;
}


/* ── WooCommerce notices (success, info, error) on product ─── */

.mff-sp-page .woocommerce-message {
  background: #E9F7EE !important;
  border-left: 3px solid #3A9B5B !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: #1D4A2C !important;
  margin-bottom: 20px !important;
}

.mff-sp-page .woocommerce-message::before {
  display: none !important;
}

.mff-sp-page .woocommerce-error {
  background: #FEF0F0 !important;
  border-left: 3px solid #D94040 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: #7A1F1F !important;
  list-style: none !important;
  margin-bottom: 20px !important;
}

.mff-sp-page .woocommerce-error::before {
  display: none !important;
}


/* ── Subscription switching specific ────────────────────────── */

/* When accessed via My Account > Subscriptions > Switch,
   WC Subscriptions replaces the "Add to Cart" text with
   "Switch Subscription". Same button selector — just ensure
   the button is prominent enough and the variation table
   makes it clear what they're switching to. */

.mff-sp-page .woocommerce-info {
  background: #EFF6FF !important;
  border-top: none !important;
  border-left: 3px solid #6AA3D9 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  color: #1A4A7A !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

.mff-sp-page .woocommerce-info::before {
  display: none !important;
}

.mff-sp-page .woocommerce-info a {
  color: #1A4A7A !important;
  font-weight: 600 !important;
}


/* ── Single Product — Responsive ────────────────────────────── */

@media (max-width: 768px) {
  .mff-sp-content {
    padding: 0 20px 40px !important;
  }

  .mff-sp-page .mff-sp-columns {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mff-sp-page .wp-block-post-title {
    font-size: 1.6rem !important;
  }

  .mff-sp-page .woocommerce-Price-amount {
    font-size: 26px !important;
  }

  .mff-sp-page table.variations td.value select {
    max-width: 100% !important;
  }

  .mff-sp-page .single_add_to_cart_button {
    width: 100% !important;
    text-align: center !important;
  }

  .mff-sp-page .quantity {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  .mff-sp-page .quantity .qty {
    width: 100% !important;
  }

  /* Stack quantity + button vertically */
  .mff-sp-page .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mff-sp-page .wc-tabs li a,
  .mff-sp-page ul.tabs li a {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Reviews: smaller avatars on mobile */
  .mff-sp-page ol.commentlist .avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 480px) {
  .mff-sp-page .wc-tabs,
  .mff-sp-page ul.tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .mff-sp-page .wc-tabs li,
  .mff-sp-page ul.tabs li {
    flex-shrink: 0 !important;
  }
}


/* ============================================================
   WOOCOMMERCE — ORDER CONFIRMATION PAGE (.mff-oc-)
   Template: order-confirmation.html
   Auto-applied to the /checkout/order-received/ endpoint.
   
   Styles the WC block-based order confirmation: status heading,
   summary row, order details table, downloads, addresses,
   additional info, create-account prompt, and WC Subscriptions
   related subscriptions table.
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────────── */

.mff-oc-page {
  background: var(--mff-off-white);
}

.mff-oc-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 40px 60px;
}


/* ── Status heading — "Order received" ──────────────────────── */

.mff-oc-page .wc-block-order-confirmation-status {
  text-align: center !important;
  margin-bottom: 8px !important;
}

.mff-oc-page .wc-block-order-confirmation-status h1,
.mff-oc-page .wc-block-order-confirmation-status p[class*="font-size"] {
  font-family: var(--mff-font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: var(--mff-text) !important;
  margin: 0 !important;
}

/* Subtitle — "Thank you. Your order has been received." */
.mff-oc-page .wc-block-order-confirmation-status + .wc-block-order-confirmation-status-description,
.mff-oc-page .wc-block-order-confirmation-status-description {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.mff-oc-page .wc-block-order-confirmation-status-description p {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  color: var(--mff-text-muted) !important;
  margin: 0 !important;
}

.mff-oc-page .wc-block-order-confirmation-status-description a {
  color: var(--mff-red) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.mff-oc-page .wc-block-order-confirmation-status-description a:hover {
  text-decoration: underline !important;
}


/* ── Summary row — order number, date, total, email, payment ── */

.mff-oc-page .wc-block-order-confirmation-summary {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  padding: 24px 32px !important;
  margin-bottom: 32px !important;
}

.mff-oc-page .wc-block-order-confirmation-summary-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: space-between !important;
}

.mff-oc-page .wc-block-order-confirmation-summary-list li {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mff-oc-page .wc-block-order-confirmation-summary-list-item__key {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--mff-text-faint) !important;
}

.mff-oc-page .wc-block-order-confirmation-summary-list-item__value {
  font-family: var(--mff-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mff-text) !important;
}


/* ── Section headings (Order details, Downloads, etc.) ──────── */

.mff-oc-page .wp-block-heading {
  font-family: var(--mff-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 0 16px !important;
}


/* ── Order details table — line items + totals ──────────────── */

/* OUTER wrapper gets the card treatment */
.mff-oc-page .wc-block-order-confirmation-totals-wrapper {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  margin-bottom: 32px !important;
}

/* INNER .wc-block-order-confirmation-totals — strip all card styles
   to prevent the nested box-inside-box look */
.mff-oc-page .wc-block-order-confirmation-totals {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* The WC table itself — remove its own default border */
.mff-oc-page .wc-block-order-confirmation-totals__table {
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

/* Column widths — give the total column breathing room */
.mff-oc-page .wc-block-order-confirmation-totals__product {
  width: auto !important;
}

.mff-oc-page .wc-block-order-confirmation-totals__total {
  width: 120px !important;
  text-align: right !important;
}

.mff-oc-page .wc-block-order-confirmation-totals__label {
  width: auto !important;
}

/* Table header cells */
.mff-oc-page .wc-block-order-confirmation-totals-wrapper th,
.mff-oc-page .wc-block-order-confirmation-totals th {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--mff-text-faint) !important;
  padding: 10px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--mff-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Right-align total header */
.mff-oc-page th.wc-block-order-confirmation-totals__total {
  text-align: right !important;
}

/* Table data cells — proper padding so text isn't pressed against edges */
.mff-oc-page .wc-block-order-confirmation-totals-wrapper td,
.mff-oc-page .wc-block-order-confirmation-totals td {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  padding: 16px !important;
  border-bottom: 1px solid #F0EDE9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: top !important;
}

/* Total column cells — right-align the prices */
.mff-oc-page td.wc-block-order-confirmation-totals__total {
  text-align: right !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  font-weight: 600 !important;
}

/* Product description text — prevent it from blowing out */
.mff-oc-page td.wc-block-order-confirmation-totals__product {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Product description note (the "Thanks for purchasing..." message) */
.mff-oc-page td.wc-block-order-confirmation-totals__product div,
.mff-oc-page td.wc-block-order-confirmation-totals__product .wc-item-meta {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--mff-text-muted) !important;
  margin-top: 8px !important;
}

/* Tfoot rows (Tax, Total) */
.mff-oc-page .wc-block-order-confirmation-totals__table tfoot th,
.mff-oc-page .wc-block-order-confirmation-totals__table tfoot td {
  border-bottom: 1px solid #F0EDE9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Last row (Total) — bold and larger */
.mff-oc-page .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.mff-oc-page .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding-top: 16px !important;
}

/* Product link */
.mff-oc-page .wc-block-order-confirmation-totals__table a {
  color: var(--mff-red) !important;
  text-decoration: none !important;
}

.mff-oc-page .wc-block-order-confirmation-totals__table a:hover {
  text-decoration: underline !important;
}

/* Related Subscriptions heading inside the totals wrapper */
.mff-oc-page .wc-block-order-confirmation-totals header {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--mff-border) !important;
}

/* Order Again button — give it some breathing room */
.mff-oc-page p.order-again {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--mff-border) !important;
}

.mff-oc-page .wc-block-order-confirmation-totals a,
.mff-oc-page .wc-block-order-confirmation-totals-wrapper a {
  color: var(--mff-red) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.mff-oc-page .wc-block-order-confirmation-totals a:hover,
.mff-oc-page .wc-block-order-confirmation-totals-wrapper a:hover {
  text-decoration: underline !important;
}


/* ── Downloads table ────────────────────────────────────────── */

/* Outer wrapper gets card treatment */
.mff-oc-page .wc-block-order-confirmation-downloads-wrapper {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  margin-bottom: 32px !important;
}

/* Inner div — strip card styles (same pattern as totals) */
.mff-oc-page .wc-block-order-confirmation-downloads {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.mff-oc-page .wc-block-order-confirmation-downloads table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.mff-oc-page .wc-block-order-confirmation-downloads th {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--mff-text-faint) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--mff-border) !important;
}

.mff-oc-page .wc-block-order-confirmation-downloads td {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  padding: 12px !important;
  border-bottom: 1px solid #F0EDE9 !important;
}

.mff-oc-page .wc-block-order-confirmation-downloads a {
  color: var(--mff-red) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}


/* ── Addresses — shipping + billing columns ─────────────────── */

.mff-oc-page .mff-oc-addresses {
  gap: 24px !important;
  margin-bottom: 32px !important;
}

/* When only one address exists (e.g., digital product = billing only),
   the empty column still renders. Hide it so the visible address
   takes full width instead of being squished into half. */
.mff-oc-page .mff-oc-addresses .wp-block-column:empty {
  display: none !important;
}

/* If a column has no visible children (wrapper exists but address
   block is conditionally hidden by WC), collapse it too */
.mff-oc-page .mff-oc-addresses .wp-block-column:not(:has(*:not(:empty))) {
  display: none !important;
}

/* Address headings — left-align, not centered */
.mff-oc-page .mff-oc-addresses .wp-block-heading {
  text-align: left !important;
}

.mff-oc-page .wc-block-order-confirmation-shipping-address,
.mff-oc-page .wc-block-order-confirmation-billing-address {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
}

.mff-oc-page .wc-block-order-confirmation-shipping-address address,
.mff-oc-page .wc-block-order-confirmation-billing-address address {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  color: var(--mff-text) !important;
}


/* ── Additional information ─────────────────────────────────── */

.mff-oc-page .wc-block-order-confirmation-additional-information {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-style: italic !important;
  color: var(--mff-text-muted) !important;
  margin-bottom: 32px !important;
}


/* ── Create account prompt ──────────────────────────────────── */

.mff-oc-page .wc-block-order-confirmation-create-account,
.mff-oc-page [class*="order-confirmation-create-account"] {
  background: var(--mff-white) !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin-bottom: 32px !important;
}

.mff-oc-page .wc-block-order-confirmation-create-account h2,
.mff-oc-page [class*="order-confirmation-create-account"] h2 {
  font-family: var(--mff-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mff-text) !important;
  margin: 0 0 12px !important;
}

.mff-oc-page .wc-block-order-confirmation-create-account ul,
.mff-oc-page [class*="order-confirmation-create-account"] ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mff-oc-page .wc-block-order-confirmation-create-account li,
.mff-oc-page [class*="order-confirmation-create-account"] li {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-muted) !important;
}

.mff-oc-page .wc-block-order-confirmation-create-account li::before {
  content: '✓ ' !important;
  color: var(--mff-red) !important;
  font-weight: 700 !important;
}

/* Create account button */
.mff-oc-page [class*="order-confirmation-create-account"] .wp-element-button,
.mff-oc-page [class*="order-confirmation-create-account"] button {
  background: var(--mff-red) !important;
  color: #fff !important;
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.mff-oc-page [class*="order-confirmation-create-account"] .wp-element-button:hover,
.mff-oc-page [class*="order-confirmation-create-account"] button:hover {
  background: var(--mff-red-dark) !important;
}

/* Helper text below button */
.mff-oc-page [class*="order-confirmation-create-account"] p {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text-faint) !important;
  margin-top: 12px !important;
}

.mff-oc-page [class*="order-confirmation-create-account"] p a {
  color: var(--mff-red) !important;
  text-decoration: none !important;
}


/* ── WooCommerce notices on confirmation page ───────────────── */

.mff-oc-page .woocommerce-message {
  background: #E9F7EE !important;
  border-left: 3px solid #3A9B5B !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: #1D4A2C !important;
  margin-bottom: 20px !important;
}

.mff-oc-page .woocommerce-message::before,
.mff-oc-page .woocommerce-info::before {
  display: none !important;
}

.mff-oc-page .woocommerce-info {
  background: #EFF6FF !important;
  border-left: 3px solid #6AA3D9 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  color: #1A4A7A !important;
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}


/* ── Order Confirmation — Responsive ────────────────────────── */

@media (max-width: 768px) {
  .mff-oc-content {
    padding: 24px 20px 40px !important;
  }

  .mff-oc-page .wc-block-order-confirmation-status h1,
  .mff-oc-page .wc-block-order-confirmation-status p[class*="font-size"] {
    font-size: 1.6rem !important;
  }

  .mff-oc-page .wc-block-order-confirmation-summary {
    padding: 20px !important;
  }

  .mff-oc-page .wc-block-order-confirmation-summary-list {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .mff-oc-page .mff-oc-addresses {
    flex-direction: column !important;
  }

  .mff-oc-page .wc-block-order-confirmation-totals-wrapper,
  .mff-oc-page .wc-block-order-confirmation-downloads-wrapper {
    padding: 20px !important;
  }

  .mff-oc-page [class*="order-confirmation-create-account"] {
    padding: 24px 20px !important;
  }
}


/* ── BUTTON TEXT FIX — nuclear override ─────────────────────── */
/* WC and WC Subscriptions buttons inside the order confirmation
   page lose their text color. Force white text on all red buttons
   and ensure text is visible (not font-size:0, not overflow:hidden). */

.mff-oc-page .button,
.mff-oc-page a.button,
.mff-oc-page button.button,
.mff-oc-page .wp-element-button,
.mff-oc-page .woocommerce-button,
.mff-oc-page input[type="submit"],
.mff-oc-page .shop_table .button,
.mff-oc-page .wcs-switch-link {
  color: #fff !important;
  font-size: 14px !important;
  font-family: var(--mff-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: var(--mff-red) !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  text-indent: 0 !important;
  min-width: auto !important;
  transition: background 0.15s ease !important;
}

.mff-oc-page .button:hover,
.mff-oc-page a.button:hover,
.mff-oc-page button.button:hover,
.mff-oc-page .wp-element-button:hover,
.mff-oc-page .woocommerce-button:hover,
.mff-oc-page .shop_table .button:hover,
.mff-oc-page .wcs-switch-link:hover {
  background: var(--mff-red-dark) !important;
  color: #fff !important;
}


/* ── Related Subscriptions — WC Subscriptions table ─────────── */

.mff-oc-page .shop_table.order_details,
.mff-oc-page .shop_table.my_account_subscriptions {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid var(--mff-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.mff-oc-page .shop_table th {
  font-family: var(--mff-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--mff-text-faint) !important;
  padding: 10px 14px !important;
  background: var(--mff-off-white) !important;
  border-bottom: 1px solid var(--mff-border) !important;
  text-align: left !important;
}

.mff-oc-page .shop_table td {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  color: var(--mff-text) !important;
  padding: 14px !important;
  border-bottom: 1px solid #F0EDE9 !important;
  vertical-align: middle !important;
}

.mff-oc-page .shop_table tr:last-child td {
  border-bottom: none !important;
}

.mff-oc-page .shop_table a:not(.button) {
  color: var(--mff-red) !important;
  text-decoration: none !important;
}

.mff-oc-page .shop_table a:not(.button):hover {
  text-decoration: underline !important;
}

/* Related Subscriptions heading */
.mff-oc-page h2.woocommerce-order-details__title,
.mff-oc-page h2.wc-block-order-confirmation-totals-title {
  font-family: var(--mff-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mff-text) !important;
  margin: 0 0 16px !important;
}

/* "View the status of your subscription in your account" link */
.mff-oc-page p:has(> a[href*="my-account"]) {
  font-family: var(--mff-font-body) !important;
  font-size: 14px !important;
  font-style: italic !important;
  color: var(--mff-text-muted) !important;
  text-align: center !important;
  margin-top: 8px !important;
}

.mff-oc-page p > a[href*="my-account"] {
  color: var(--mff-red) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.mff-oc-page p > a[href*="my-account"]:hover {
  text-decoration: underline !important;
}


/* ============================================================
   BLOG — ARCHIVE (category.html / archive.html)
   Scoped to .mff-blog-archive
   ============================================================ */

/* Page wrapper */
.mff-blog-archive {
  background-color: var(--mff-off-white);
}

/* ── Hero ── */
.mff-blog-hero {
  background-color: var(--mff-black);
  padding: 72px 24px 64px;
  text-align: center;
}

.mff-blog-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.mff-blog-hero-eyebrow {
  display: inline-block;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin: 0 0 12px;
}

.mff-blog-hero h1 {
  font-family: var(--mff-font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.mff-blog-hero-sub {
  font-family: var(--mff-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* ── Post grid ── */
.mff-blog-grid-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.mff-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── Post card ── */
.mff-blog-card {
  background: var(--mff-white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mff-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mff-blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  transform: translateY(-3px);
}

.mff-blog-card-img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--mff-border);
}

.mff-blog-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mff-blog-card:hover .mff-blog-card-img-wrap img {
  transform: scale(1.04);
}

.mff-blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mff-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mff-blog-card-cat {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mff-red);
}

.mff-blog-card-date {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: var(--mff-text-faint);
}

.mff-blog-card-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mff-border-dark);
  flex-shrink: 0;
}

.mff-blog-card h2 {
  font-family: var(--mff-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mff-text);
  margin: 0 0 10px;
}

.mff-blog-card h2 a {
  color: inherit;
  text-decoration: none;
}

.mff-blog-card h2 a:hover {
  color: var(--mff-red);
}

.mff-blog-card-excerpt {
  font-family: var(--mff-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mff-text-muted);
  margin: 0 0 20px;
  flex: 1;
}

.mff-blog-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mff-red);
  text-decoration: none;
  margin-top: auto;
}

.mff-blog-card-read-more:hover {
  color: var(--mff-red-dark);
  text-decoration: none;
}

.mff-blog-card-read-more::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.2s ease;
}

.mff-blog-card:hover .mff-blog-card-read-more::after {
  transform: translateX(3px);
}

/* ── Featured card (first post, full-width) ── */
.mff-blog-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 0;
}

.mff-blog-card--featured .mff-blog-card-img-wrap {
  width: 52%;
  flex-shrink: 0;
  aspect-ratio: auto;
  min-height: 340px;
}

.mff-blog-card--featured .mff-blog-card-body {
  padding: 40px 40px 36px;
  justify-content: center;
}

.mff-blog-card--featured h2 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.mff-blog-card--featured .mff-blog-card-excerpt {
  font-size: 15px;
  margin-bottom: 24px;
}

/* ── WordPress native pagination ── */
.mff-blog-pagination {
  margin-top: 48px;
  text-align: center;
}

.mff-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mff-text);
  text-decoration: none;
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  margin: 0 3px;
  transition: all 0.15s ease;
}

.mff-blog-pagination .page-numbers:hover,
.mff-blog-pagination .page-numbers.current {
  background: var(--mff-red);
  border-color: var(--mff-red);
  color: #fff;
}

.mff-blog-pagination .page-numbers.dots {
  background: transparent;
  border: none;
  cursor: default;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mff-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mff-blog-card--featured {
    flex-direction: column;
  }

  .mff-blog-card--featured .mff-blog-card-img-wrap {
    width: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 9;
  }

  .mff-blog-card--featured .mff-blog-card-body {
    padding: 28px;
  }

  .mff-blog-card--featured h2 {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .mff-blog-hero {
    padding: 48px 20px 40px;
  }

  .mff-blog-grid-section {
    padding: 40px 16px 64px;
  }

  .mff-blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mff-blog-card--featured {
    grid-column: auto;
  }
}


/* ============================================================
   BLOG — SINGLE POST (single.html)
   Scoped to .mff-blog-single
   ============================================================ */

.mff-blog-single {
  background-color: var(--mff-off-white);
}

/* ── Post hero ── */
.mff-blog-post-hero {
  background-color: var(--mff-black);
  padding: 64px 24px 56px;
  text-align: center;
}

.mff-blog-post-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.mff-blog-post-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.mff-blog-post-cat {
  font-family: var(--mff-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mff-red);
}

.mff-blog-post-date {
  font-family: var(--mff-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

.mff-blog-post-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.mff-blog-post-hero h1 {
  font-family: var(--mff-font-display);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.mff-blog-post-hero-sub {
  font-family: var(--mff-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 640px;
  margin: 0 auto;
}

/* ── Featured image ── */
.mff-blog-post-thumb {
  max-width: 900px;
  margin: -32px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.mff-blog-post-thumb img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  display: block;
}

/* ── Post body layout ── */
.mff-blog-post-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 64px;
  align-items: start;
}

/* ── Post content column ── */
.mff-blog-post-content {
  min-width: 0;
}

/* WordPress post content typography */
.mff-blog-post-content .wp-block-post-content h2,
.mff-blog-post-content .entry-content h2 {
  font-family: var(--mff-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--mff-text);
  line-height: 1.15;
  margin: 40px 0 14px;
}

.mff-blog-post-content .wp-block-post-content h3,
.mff-blog-post-content .entry-content h3 {
  font-family: var(--mff-font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--mff-text);
  line-height: 1.3;
  margin: 30px 0 10px;
}

.mff-blog-post-content .wp-block-post-content p,
.mff-blog-post-content .entry-content p {
  font-family: var(--mff-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--mff-text-muted);
  margin: 0 0 20px;
}

.mff-blog-post-content .wp-block-post-content ul,
.mff-blog-post-content .wp-block-post-content ol,
.mff-blog-post-content .entry-content ul,
.mff-blog-post-content .entry-content ol {
  font-family: var(--mff-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mff-text-muted);
  padding-left: 24px;
  margin: 0 0 20px;
}

.mff-blog-post-content .wp-block-post-content li,
.mff-blog-post-content .entry-content li {
  margin-bottom: 6px;
}

.mff-blog-post-content .wp-block-post-content a,
.mff-blog-post-content .entry-content a {
  color: var(--mff-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mff-blog-post-content .wp-block-post-content a:hover,
.mff-blog-post-content .entry-content a:hover {
  color: var(--mff-red-dark);
}

/* Block images in post */
.mff-blog-post-content .wp-block-image {
  margin: 32px 0;
}

.mff-blog-post-content .wp-block-image img {
  border-radius: 10px;
  width: 100%;
}

.mff-blog-post-content .wp-block-image figcaption {
  font-size: 14px;
  color: var(--mff-text-faint);
  text-align: center;
  margin-top: 8px;
}

/* Pullquote / blockquote */
.mff-blog-post-content blockquote,
.mff-blog-post-content .wp-block-quote {
  border-left: 4px solid var(--mff-red);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--mff-white);
  border-radius: 0 10px 10px 0;
}

.mff-blog-post-content blockquote p,
.mff-blog-post-content .wp-block-quote p {
  font-size: 18px;
  font-style: italic;
  color: var(--mff-text);
  margin: 0;
}

/* ── Sidebar ── */
.mff-blog-post-sidebar {
  position: sticky;
  top: 96px;
}

.mff-blog-sidebar-cta {
  background: var(--mff-white);
  border-radius: 16px;
  border: 1px solid var(--mff-border);
  padding: 28px 24px;
  text-align: center;
}

.mff-blog-sidebar-cta img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 16px;
}

.mff-blog-sidebar-cta-title {
  font-family: var(--mff-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--mff-text);
  line-height: 1.2;
  margin: 0 0 8px;
}

.mff-blog-sidebar-cta-text {
  font-family: var(--mff-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mff-text-muted);
  margin: 0 0 16px;
}

.mff-blog-sidebar-cta-btn {
  display: block;
  background: var(--mff-red);
  color: #fff;
  font-family: var(--mff-font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mff-blog-sidebar-cta-btn:hover {
  background: var(--mff-red-dark);
  color: #fff;
  text-decoration: none;
}

/* Trust bullets in sidebar */
.mff-blog-sidebar-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  text-align: left;
}

.mff-blog-sidebar-bullets li {
  font-family: var(--mff-font-body);
  font-size: 14px;
  color: var(--mff-text-muted);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.mff-blog-sidebar-bullets li::before {
  content: '\2713';
  color: var(--mff-red);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Post footer / related posts ── */
.mff-blog-related {
  background: var(--mff-white);
  border-top: 1px solid var(--mff-border);
  padding: 64px 24px;
}

.mff-blog-related-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.mff-blog-related-heading {
  font-family: var(--mff-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--mff-text);
  margin: 0 0 32px;
  text-align: center;
}

.mff-blog-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Responsive — single post ── */
@media (max-width: 860px) {
  .mff-blog-post-body {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 20px 64px;
  }

  .mff-blog-post-sidebar {
    position: static;
    max-width: 480px;
  }

  .mff-blog-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mff-blog-post-hero {
    padding: 48px 20px 40px;
  }

  .mff-blog-post-thumb {
    padding: 0 16px;
    margin-top: -20px;
  }

  .mff-blog-post-content .wp-block-post-content p,
  .mff-blog-post-content .entry-content p {
    font-size: 15px;
  }

  .mff-blog-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DAILY LIFT ACTIVATION PAGE  (.mff-dla-page)
   Template: daily-lift-activation.html
   URL: /daily-lift-activation/

   Strategy: wp:post-content renders the existing WP page blocks
   (which contain the Trainerize shortcode button). CSS visually
   restructures the flat <p> / .wp-block-buttons output into
   numbered step cards without touching WP page content.

   Page content order (stable):
     p[1]  — "Thanks for purchasing…"           → intro / hidden
     p[2]  — "If you haven't set-up…"           → step 1 label
     .wp-block-buttons[1] → #ccom-trainerize…   → step 1 button
     p[3]  — "Download the Lift app…"           → step 2 label
     .wp-block-buttons[2] — iOS + Android       → step 2 buttons
     p[4]  — "Your workouts will start…"        → step 3 / note
     p[5]  — "We hope you're as excited…"       → sign-off
   ============================================================ */

/* ── Page wrapper ── */
.mff-dla-page {
  background-color: var(--mff-off-white);
}

/* ── Hero band ── */
.mff-dla-hero {
  padding: 64px 24px 56px;
  text-align: center;
}

.mff-dla-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.mff-dla-eyebrow {
  display: inline-block;
  font-family: var(--mff-font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mff-red);
  margin-bottom: 14px;
}

.mff-dla-hero-headline {
  font-family: var(--mff-font-display);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--mff-white);
  line-height: 1.1;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.mff-dla-hero-sub {
  font-family: var(--mff-font-body);
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0;
}

/* ── Content outer wrapper ── */
.mff-dla-content-outer {
  padding: 56px 0 80px !important;
}

/* ── Post content base reset ── */
.mff-dla-page .wp-block-post-content,
.mff-dla-page .entry-content {
  padding: 0 24px;
  font-family: var(--mff-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mff-text-muted);
}

/* ────────────────────────────────────────────
   STEP 1 CARD
   Wraps: p[2] "If you haven't..." label
        + .wp-block-buttons[1] Trainerize button

   We use a generated counter + ::before pseudo
   on the Trainerize wrapper to show the number.
   The card background is drawn with box-shadow
   on the Trainerize button wrapper (which is the
   last element of step 1 that we can hook).

   Simpler approach: target the #ccom-trainerize
   wrapper and its immediately preceding sibling
   via CSS :has() — supported in all modern browsers.
   ────────────────────────────────────────────── */

/* Card shell — applied to the Trainerize button wrapper div.
   width: 100% + box-sizing so it fills the full card width as a flex child. */
.mff-dla-page .wp-block-post-content #ccom-trainerize-userGetSetupLink,
.mff-dla-page .entry-content #ccom-trainerize-userGetSetupLink {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-radius: 0 0 12px 12px;
  padding: 16px 32px 28px 72px;
  margin: 0 0 20px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Inner button div stays auto-width, not flex-stretched */
.mff-dla-page #ccom-trainerize-userGetSetupLink .wp-block-button {
  width: auto;
  display: inline-block;
}

.mff-dla-page #ccom-trainerize-userGetSetupLink .wp-block-button__link {
  width: auto !important;
  display: inline-block !important;
}

/* The paragraph immediately before the Trainerize button wrapper
   acts as the card top — rounded top corners + step label.
   Note: nested :has() unsupported — use descendant selector inside :has() */
.mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink),
.mff-dla-page .entry-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink) {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 28px 32px 12px 72px;
  margin: 0;
  position: relative;
  font-family: var(--mff-font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mff-black);
}

.mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)::before,
.mff-dla-page .entry-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)::before {
  content: "1";
  position: absolute;
  left: 20px;
  top: 26px;
  width: 36px;
  height: 36px;
  background: var(--mff-red);
  border-radius: 50%;
  display: block;
  font-family: var(--mff-font-display);
  font-size: 14px;
  color: var(--mff-white);
  line-height: 36px;
  text-align: center;
}

/* ── Trainerize button inherits theme button styles ── */
.mff-dla-page #ccom-trainerize-userGetSetupLink .wp-block-button__link {
  background-color: var(--mff-red) !important;
  color: var(--mff-white) !important;
  font-family: var(--mff-font-display) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.mff-dla-page #ccom-trainerize-userGetSetupLink .wp-block-button__link:hover {
  background-color: var(--mff-red-dark) !important;
}

/* ────────────────────────────────────────────
   STEP 2 CARD
   Wraps: p[3] "Download the Lift app..."
        + .wp-block-buttons[2] iOS + Android

   Target: the .wp-block-buttons that does NOT
   contain #ccom-trainerize-userGetSetupLink
   (i.e., the second .wp-block-buttons)
   ────────────────────────────────────────────── */

/* Card bottom — button group */
.mff-dla-page .wp-block-post-content .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)),
.mff-dla-page .entry-content .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 4px 32px 28px 72px;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Card top — preceding paragraph (the one NOT before the Trainerize group) */
.mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)),
.mff-dla-page .entry-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)) {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 28px 32px 8px 72px;
  margin: 0;
  font-family: var(--mff-font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mff-black);
  position: relative;
}

.mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink))::before,
.mff-dla-page .entry-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink))::before {
  content: "2";
  position: absolute;
  left: 20px;
  top: 26px;
  width: 36px;
  height: 36px;
  background: var(--mff-red);
  border-radius: 50%;
  display: block;
  font-family: var(--mff-font-display);
  font-size: 14px;
  color: var(--mff-white);
  line-height: 36px;
  text-align: center;
}

/* ── App store badge buttons — replace text with official badge images ── */

/* Shared reset for both badge links */
.mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) .wp-block-button__link {
  display: block !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 160px !important;
  height: 53px !important;
  font-size: 0 !important;          /* hide button text */
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  transition: opacity 0.2s ease !important;
  box-shadow: none !important;
}

.mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) .wp-block-button__link:hover {
  opacity: 0.82 !important;
  background-color: transparent !important;
}

/* App Store badge — first button */
.mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) .wp-block-button:first-child .wp-block-button__link {
  background-image: url('/wp-content/uploads/2025/08/appstore-1.png') !important;
}

/* Google Play badge — second button */
.mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) .wp-block-button:last-child .wp-block-button__link {
  background-image: url('/wp-content/uploads/2025/08/googleplay.png') !important;
}

/* ────────────────────────────────────────────
   STEP 3 — "Your workouts will start on Monday..."
   This paragraph is both the step card AND the
   info note — style it as a note card with a
   red left accent and a "3" counter.
   ────────────────────────────────────────────── */

/* Target: 4th paragraph (index 3, after 2 button groups = p:nth-of-type(4)) */
.mff-dla-page .wp-block-post-content > p:nth-of-type(4),
.mff-dla-page .entry-content > p:nth-of-type(4) {
  background: var(--mff-white);
  border: 1px solid var(--mff-border);
  border-left: 4px solid var(--mff-red);
  border-radius: 8px;
  padding: 24px 28px 24px 72px;
  margin: 0 0 20px;
  position: relative;
  color: var(--mff-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.mff-dla-page .wp-block-post-content > p:nth-of-type(4)::before,
.mff-dla-page .entry-content > p:nth-of-type(4)::before {
  content: "3";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 36px;
  height: 36px;
  background: var(--mff-red);
  border-radius: 50%;
  font-family: var(--mff-font-display);
  font-size: 14px;
  color: var(--mff-white);
  line-height: 36px;
  text-align: center;
}

.mff-dla-page .wp-block-post-content > p:nth-of-type(4) a,
.mff-dla-page .entry-content > p:nth-of-type(4) a {
  color: var(--mff-red);
  text-decoration: none;
}

.mff-dla-page .wp-block-post-content > p:nth-of-type(4) a:hover,
.mff-dla-page .entry-content > p:nth-of-type(4) a:hover {
  text-decoration: underline;
}

/* ────────────────────────────────────────────
   SIGN-OFF — last paragraph
   ────────────────────────────────────────────── */

.mff-dla-page .wp-block-post-content > p:last-of-type,
.mff-dla-page .entry-content > p:last-of-type {
  border-top: 1px solid var(--mff-border);
  padding-top: 28px;
  margin-top: 12px;
  color: var(--mff-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ────────────────────────────────────────────
   HIDE intro paragraph (p[1] "Thanks for purchasing...")
   — redundant with hero band copy
   ────────────────────────────────────────────── */

.mff-dla-page .wp-block-post-content > p:first-of-type,
.mff-dla-page .entry-content > p:first-of-type {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .mff-dla-hero {
    padding: 48px 20px 44px;
  }

  .mff-dla-content-outer {
    padding: 40px 0 64px !important;
  }

  .mff-dla-page .wp-block-post-content,
  .mff-dla-page .entry-content {
    padding: 0 16px;
  }

  /* Step top halves */
  .mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink),
  .mff-dla-page .wp-block-post-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)),
  .mff-dla-page .entry-content p:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink),
  .mff-dla-page .entry-content p:has(+ .wp-block-buttons):not(:has(+ .wp-block-buttons #ccom-trainerize-userGetSetupLink)) {
    padding: 24px 20px 8px 64px;
  }

  /* Step bottom halves */
  .mff-dla-page #ccom-trainerize-userGetSetupLink,
  .mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Step 3 / note */
  .mff-dla-page .wp-block-post-content > p:nth-of-type(4),
  .mff-dla-page .entry-content > p:nth-of-type(4) {
    padding: 20px 20px 20px 64px;
  }

  /* App store badges stack vertically on mobile */
  .mff-dla-page .wp-block-buttons:not(:has(#ccom-trainerize-userGetSetupLink)) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   NAV — increase desktop link font size for readability
   ============================================================ */

.mff-nav-links .wp-block-navigation-item__content,
.mff-nav-links a {
  font-size: 15px !important;
}

/* ============================================================
   NAV — bump font-weight to 600
   ============================================================ */

.mff-nav-links .wp-block-navigation-item__content,
.mff-nav-links a {
  font-weight: 600 !important;
}