/*
 * Mankomb Theme — Front-end & Editor Stylesheet
 * assets/css/theme.css
 *
 * Sections:
 *   1.  Motion variables
 *   2.  Base reset
 *   3.  Button variants
 *   4.  Sticky header + nav + cart
 *   5.  Brand color bar
 *   6.  Card & eyebrow utilities
 *   7.  Footer (3-col, social icons, copyright)
 *   8.  Blog archive (grid, cards, pagination)
 *   9.  Single post body typography
 *  10.  Investor updates list
 *  11.  WPForms base + scoped (ID 25 / ID 54)
 *  12.  WooCommerce replacement styles
 *  13.  Chewie product page
 *  14.  Responsive — mobile breakpoints (360 / 390 / 430 / 768 / 1024 / 1280px)
 */


/* ──────────────────────────────────────────────────────────
   1. MOTION
   ────────────────────────────────────────────────────────── */
:root {
  --mk-ease:     cubic-bezier(0.2, 0, 0, 1);
  --mk-t-hover:  120ms;
  --mk-t-enter:  200ms;
  --mk-t-layout: 400ms;
}


/* ──────────────────────────────────────────────────────────
   2. BASE RESET
   ────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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


/* ──────────────────────────────────────────────────────────
   3. BUTTON BASE + VARIANTS
   ────────────────────────────────────────────────────────── */
.wp-block-button .wp-block-button__link,
.wp-block-button__link {
  border-radius: var(--wp--custom--radius--sm, 4px);
  transition:
    opacity          var(--mk-t-hover) var(--mk-ease),
    background-color var(--mk-t-hover) var(--mk-ease),
    color            var(--mk-t-hover) var(--mk-ease),
    border-color     var(--mk-t-hover) var(--mk-ease),
    transform        var(--mk-t-hover) var(--mk-ease);
}
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

/* primary */
.wp-block-button.is-style-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--mk-black);
  color:            var(--wp--preset--color--mk-white);
  border:           2px solid var(--wp--preset--color--mk-black);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover  { opacity: 0.88; }
.wp-block-button.is-style-primary .wp-block-button__link:active { transform: translateY(1px); }

/* secondary */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: transparent;
  color:            var(--wp--preset--color--mk-black);
  border:           2px solid var(--wp--preset--color--mk-black);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--mk-black);
  color:            var(--wp--preset--color--mk-white);
  opacity:          1;
}
.wp-block-button.is-style-secondary .wp-block-button__link:active { transform: translateY(1px); }

/* accent (mk-red) */
.wp-block-button.is-style-accent .wp-block-button__link {
  background-color: var(--wp--preset--color--mk-red);
  color:            var(--wp--preset--color--mk-white);
  border:           2px solid var(--wp--preset--color--mk-red);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover  { opacity: 0.88; }
.wp-block-button.is-style-accent .wp-block-button__link:active { transform: translateY(1px); }

/* ghost */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: transparent;
  border:           2px solid transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover  { opacity: 0.7; }
.wp-block-button.is-style-ghost .wp-block-button__link:active { transform: translateY(1px); }

/* inverse */
.wp-block-button.is-style-inverse .wp-block-button__link {
  background-color: var(--wp--preset--color--mk-white);
  color:            var(--wp--preset--color--mk-black);
  border:           2px solid var(--wp--preset--color--mk-white);
}
.wp-block-button.is-style-inverse .wp-block-button__link:hover  { opacity: 0.88; }
.wp-block-button.is-style-inverse .wp-block-button__link:active { transform: translateY(1px); }


/* ──────────────────────────────────────────────────────────
   4. STICKY HEADER + NAV + CART
   ────────────────────────────────────────────────────────── */
.mk-header {
  z-index:                 100;
  background-color:        rgba(255,255,255,0.92) !important;
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mk-header__inner {
  height:     68px;
  min-height: 68px;
}
.mk-nav-wordmark img {
  height:  28px;
  width:   auto;
  display: block;
}
.mk-nav-links .wp-block-navigation-item__content {
  color:           var(--wp--preset--color--mk-slate, #2C3E50) !important;
  font-family:     var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif) !important;
  font-weight:     700 !important;
  font-size:       13px !important;
  text-transform:  uppercase !important;
  letter-spacing:  0.07em !important;
  text-decoration: none !important;
  padding-bottom:  3px;
  border-bottom:   2px solid transparent;
  transition:
    color        var(--mk-t-hover) var(--mk-ease),
    border-color var(--mk-t-hover) var(--mk-ease);
}
.mk-nav-links .wp-block-navigation-item__content:hover,
.mk-nav-links .current-menu-item .wp-block-navigation-item__content {
  color:        var(--wp--preset--color--mk-red, #C44536) !important;
  border-color: var(--wp--preset--color--mk-red, #C44536) !important;
}
.mk-nav-links.wp-block-navigation > ul,
.mk-nav-links.wp-block-navigation .wp-block-navigation__container {
  gap: 28px;
}
.mk-nav-cart {
  color:           var(--wp--preset--color--mk-slate, #2C3E50);
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
  transition:      color var(--mk-t-hover) var(--mk-ease);
}
.mk-nav-cart:hover { color: var(--wp--preset--color--mk-red, #C44536); }


/* ──────────────────────────────────────────────────────────
   5. BRAND COLOR BAR
   ────────────────────────────────────────────────────────── */
.mk-color-bar { display: flex; overflow: hidden; }
.mk-color-bar > * { flex: 1 1 0%; }


/* ──────────────────────────────────────────────────────────
   6. CARD + EYEBROW UTILITIES
   ────────────────────────────────────────────────────────── */
.mk-card {
  background-color: var(--wp--preset--color--mk-white);
  border:           1px solid var(--wp--preset--color--mk-grey-100);
  border-radius:    0;
  padding:          var(--wp--preset--spacing--sp-5, 24px);
}
.mk-card--inverse {
  background-color: var(--wp--preset--color--mk-black);
  border-color:     var(--wp--preset--color--mk-black);
  color:            var(--wp--preset--color--mk-white);
}
.mk-eyebrow {
  font-family:    var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-weight:    700;
  font-size:      13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--wp--preset--color--mk-red);
  line-height:    1.4;
}


/* ──────────────────────────────────────────────────────────
   7. FOOTER
   ────────────────────────────────────────────────────────── */
.mk-footer-wordmark img { height: 28px; width: auto; display: block; }

.mk-footer-col-label {
  font-family:    var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif) !important;
  font-weight:    700 !important;
  font-size:      13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color:          var(--wp--preset--color--mk-grey-cool, #8B9BAB) !important;
}
.mk-footer-section-label {
  font-family:    var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif) !important;
  font-weight:    700 !important;
  font-size:      13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color:          var(--wp--preset--color--mk-red, #C44536) !important;
}
.mk-social-links {
  display:     flex;
  gap:         20px;
  align-items: center;
  flex-wrap:   wrap;
}
.mk-social-link {
  color:           var(--wp--preset--color--mk-grey-cool, #8B9BAB);
  display:         flex;
  align-items:     center;
  text-decoration: none;
  transition:      color var(--mk-t-hover) var(--mk-ease);
}
.mk-social-link:hover { color: var(--wp--preset--color--mk-white, #ffffff); }
.mk-footer-bottom {
  border-top:  1px solid rgba(255,255,255,0.1);
  margin-top:  var(--wp--preset--spacing--sp-7, 48px);
  padding-top: var(--wp--preset--spacing--sp-5, 24px);
}
.mk-footer-newsletter #wpforms-54 {
  background-color: transparent !important;
  padding:          0 !important;
  max-width:        360px;
}


/* ──────────────────────────────────────────────────────────
   8. BLOG ARCHIVE
   ────────────────────────────────────────────────────────── */
.mk-blog-grid.wp-block-post-template { gap: 56px 48px !important; }

.mk-blog-card .wp-block-post-featured-image,
.mk-blog-card .wp-block-post-featured-image a { display: block; height: 280px; overflow: hidden; }
.mk-blog-card .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--mk-t-enter) var(--mk-ease);
}
.mk-blog-card:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.mk-blog-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.mk-blog-card .wp-block-post-title a:hover { color: var(--wp--preset--color--mk-red); }
.mk-blog-card .wp-block-post-author__name {
  font-size: 14px; font-weight: 500;
  font-family: var(--wp--preset--font-family--roboto-condensed);
  color: var(--wp--preset--color--mk-grey-mid);
}
.mk-pagination.wp-block-query-pagination { justify-content: center; font-family: var(--wp--preset--font-family--roboto-condensed); gap: 4px; }
.mk-pagination .wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px; font-size: 14px;
  color: var(--wp--preset--color--mk-grey-mid); text-decoration: none;
  transition: color var(--mk-t-hover) var(--mk-ease);
}
.mk-pagination .wp-block-query-pagination-numbers .page-numbers:hover { color: var(--wp--preset--color--mk-black); }
.mk-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  font-weight: 700; color: var(--wp--preset--color--mk-black);
  border-bottom: 2px solid var(--wp--preset--color--mk-black);
}
.mk-pagination .wp-block-query-pagination-previous-arrow,
.mk-pagination .wp-block-query-pagination-next-arrow {
  font-size: 14px; color: var(--wp--preset--color--mk-grey-mid);
  text-decoration: none; padding: 0 8px;
}


/* ──────────────────────────────────────────────────────────
   9. SINGLE POST BODY
   ────────────────────────────────────────────────────────── */
.mk-post-body .wp-block-post-content p {
  font-family: var(--wp--preset--font-family--roboto-condensed);
  font-size: 17px; line-height: 1.7;
  color: var(--wp--preset--color--mk-grey-mid); max-width: 68ch;
}
.mk-post-body .wp-block-post-content h2 {
  font-family: var(--wp--preset--font-family--montserrat); font-weight: 900;
  font-size: var(--wp--preset--font-size--display-md); letter-spacing: -0.02em;
  color: var(--wp--preset--color--mk-black);
  margin-top: var(--wp--preset--spacing--sp-7, 48px); margin-bottom: var(--wp--preset--spacing--sp-4, 16px);
}
.mk-post-body .wp-block-post-content h3 {
  font-family: var(--wp--preset--font-family--montserrat); font-weight: 900;
  font-size: var(--wp--preset--font-size--body-xl); letter-spacing: -0.01em;
  color: var(--wp--preset--color--mk-black);
  margin-top: var(--wp--preset--spacing--sp-6, 32px);
}
.mk-post-body .wp-block-post-content a {
  color: var(--wp--preset--color--mk-red); text-decoration: underline; text-underline-offset: 3px;
}
.mk-post-body .wp-block-post-content blockquote,
.mk-post-body .wp-block-post-content .wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--mk-red);
  padding-left: var(--wp--preset--spacing--sp-5, 24px);
  margin-left: 0; color: var(--wp--preset--color--mk-grey-secondary); font-style: italic;
}
.mk-post-body .wp-block-post-content ul,
.mk-post-body .wp-block-post-content ol {
  font-family: var(--wp--preset--font-family--roboto-condensed);
  font-size: 17px; line-height: 1.7;
  color: var(--wp--preset--color--mk-grey-mid); padding-left: 1.5em;
}
.mk-post-body .wp-block-post-content figcaption {
  font-size: 13px; color: var(--wp--preset--color--mk-grey-tertiary);
  text-align: center; margin-top: 8px;
}
.mk-post-body .wp-block-post-content hr {
  border: none; border-top: 1px solid var(--wp--preset--color--mk-grey-100);
  margin: var(--wp--preset--spacing--sp-7, 48px) 0;
}


/* ──────────────────────────────────────────────────────────
   10. INVESTOR UPDATES LIST
   ────────────────────────────────────────────────────────── */
.mk-updates-year {
  font-family: var(--wp--preset--font-family--roboto-condensed);
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--wp--preset--color--mk-grey-tertiary);
  margin-top: var(--wp--preset--spacing--sp-7, 48px) !important; margin-bottom: 8px !important;
}
.mk-updates-list { display: flex; flex-direction: column; }
.mk-update-item {
  display: flex; align-items: center; padding: 14px 0;
  font-family: var(--wp--preset--font-family--roboto-condensed);
  font-size: 15px; line-height: 1.4;
  color: var(--wp--preset--color--mk-black); text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--mk-grey-100);
  transition: color var(--mk-t-hover) var(--mk-ease);
}
.mk-update-item:hover { color: var(--wp--preset--color--mk-red); }


/* ──────────────────────────────────────────────────────────
   11. WPFORMS — base + scoped per form
   ────────────────────────────────────────────────────────── */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select {
  font-family:   var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:     var(--wp--preset--font-size--body-md, 16px);
  color:         var(--wp--preset--color--mk-grey-mid, #3F4651);
  border:        1px solid var(--wp--preset--color--mk-grey-300, #CCCCCC);
  border-radius: var(--wp--custom--radius--sm, 4px);
  box-shadow:    var(--wp--custom--elevation--1, 0 1px 2px rgba(0,0,0,0.06));
  padding:       10px 14px;
  transition:    border-color var(--mk-t-hover) var(--mk-ease);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline: none;
  border-color: var(--wp--preset--color--mk-grey-mid, #3F4651);
  box-shadow: var(--wp--custom--elevation--2, 0 2px 8px rgba(0,0,0,0.08));
}

/* ── Chewie Waitlist (ID 25) ── */
#wpforms-25 {
  max-width: 540px; margin-left: auto; margin-right: auto;
  background-color: var(--wp--preset--color--mk-cream-light, #FAF8F4);
  padding: var(--wp--preset--spacing--sp-6, 32px);
}
#wpforms-25 .wpforms-submit-container .wpforms-submit {
  background-color: var(--wp--preset--color--mk-red, #C44536) !important;
  border:           2px solid var(--wp--preset--color--mk-red, #C44536) !important;
  color:            #ffffff !important;
  font-family:      var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif) !important;
  font-weight:      700 !important; font-size: 15px !important;
  text-transform:   uppercase !important; letter-spacing: 0.08em !important;
  border-radius:    var(--wp--custom--radius--sm, 4px) !important;
  padding:          12px 28px !important;
  transition:       opacity var(--mk-t-hover) var(--mk-ease) !important;
}
#wpforms-25 .wpforms-submit-container .wpforms-submit:hover  { opacity: 0.88 !important; }
#wpforms-25 .wpforms-submit-container .wpforms-submit:active { transform: translateY(1px) !important; }

/* ── Newsletter Signup (ID 54) ── */
#wpforms-54 {
  background-color: var(--wp--preset--color--mk-slate, #2C3E50);
  padding: var(--wp--preset--spacing--sp-6, 32px);
}
#wpforms-54 .wpforms-field-container { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-end; }
#wpforms-54 .wpforms-field { flex: 1 1 auto; margin-bottom: 0 !important; }
#wpforms-54 .wpforms-submit-container { flex: 0 0 auto; }
#wpforms-54 .wpforms-field label { display: none !important; }
#wpforms-54 input[type="email"] {
  background-color: transparent !important; border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important; border-radius: var(--wp--custom--radius--sm, 4px) !important;
  box-shadow: none !important; width: 100%;
}
#wpforms-54 input[type="email"]::placeholder { color: rgba(255,255,255,0.5) !important; }
#wpforms-54 input[type="email"]:focus { border-color: rgba(255,255,255,0.7) !important; box-shadow: none !important; }
#wpforms-54 .wpforms-submit-container .wpforms-submit {
  background-color: #ffffff !important; border: 2px solid #ffffff !important;
  color: #000000 !important;
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif) !important;
  font-weight: 700 !important; font-size: 15px !important;
  border-radius: var(--wp--custom--radius--sm, 4px) !important;
  padding: 10px 24px !important; white-space: nowrap;
  transition: opacity var(--mk-t-hover) var(--mk-ease) !important;
}
#wpforms-54 .wpforms-submit-container .wpforms-submit:hover { opacity: 0.88 !important; }
.mk-footer-newsletter #wpforms-54 { background-color: transparent !important; padding: 0 !important; max-width: 360px; }


/* ──────────────────────────────────────────────────────────
   12. WOOCOMMERCE — replacement styles
   ────────────────────────────────────────────────────────── */
.woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight: 700; font-size: var(--wp--preset--font-size--display-md, 2rem);
  color: var(--wp--preset--color--mk-black, #000); line-height: 1.1;
}
.woocommerce-Price-currencySymbol { font-size: 0.65em; vertical-align: super; margin-right: 2px; }
.price del { opacity: 0.45; font-size: 0.72em; font-weight: 400; text-decoration: line-through; margin-right: 8px; }
.price ins { text-decoration: none; font-weight: 700; }
.woocommerce-product-details__stock-status, p.stock, .stock {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
}
.stock.out-of-stock { color: var(--wp--preset--color--mk-red, #C44536); }
.stock.in-stock     { color: var(--wp--preset--color--mk-green, #678760); }
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-block-woocommerce-product-image-gallery img {
  width: 100%; height: auto; display: block; object-fit: cover;
}
.woocommerce-product-details__short-description,
.wp-block-woocommerce-product-short-description {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size: 17px; line-height: 1.65;
  color: var(--wp--preset--color--mk-grey-secondary, #555E6C); max-width: 52ch;
}
.product_title, .wp-block-woocommerce-product-details .product_title {
  font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight: 900; letter-spacing: -0.02em; line-height: 0.95;
  color: var(--wp--preset--color--mk-black, #000);
}
.woocommerce-message, .woocommerce-info, .woocommerce-error, ul.woocommerce-error {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size: 15px; padding: 14px 16px;
  border-left: 3px solid var(--wp--preset--color--mk-red, #C44536);
  background: var(--wp--preset--color--mk-cream-light, #FAF8F4);
  list-style: none; margin: 0 0 24px;
}
.woocommerce-info    { border-left-color: var(--wp--preset--color--mk-blue, #197278); }
.woocommerce-message { border-left-color: var(--wp--preset--color--mk-green, #678760); }
ul.products, .wc-block-grid__products {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px; list-style: none; padding: 0; margin: 0;
}
.woocommerce-loop-product__link { text-decoration: none; color: inherit; display: block; }
.woocommerce-loop-product__title, .wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight: 700; font-size: 18px; line-height: 1.2;
  color: var(--wp--preset--color--mk-black, #000); margin-top: 12px;
  transition: color var(--mk-t-hover) var(--mk-ease);
}
.woocommerce-loop-product__link:hover .woocommerce-loop-product__title { color: var(--wp--preset--color--mk-red, #C44536); }
.woocommerce-breadcrumb {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size: 13px; color: var(--wp--preset--color--mk-grey-tertiary, #9CA3AF);
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--mk-grey-secondary, #555E6C); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--mk-red, #C44536); }
.woocommerce-tabs .reviews_tab, #reviews { display: none !important; }


/* ──────────────────────────────────────────────────────────
   13. CHEWIE PRODUCT PAGE
   ────────────────────────────────────────────────────────── */

/* Price block (non-WC context, custom layout page) */
.mk-price-block .price {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  flex-wrap:   wrap;
  line-height: 1.2;
  margin:      0;
}
.mk-price-block del {
  font-family:     var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:       16px;
  font-weight:     400;
  color:           var(--wp--preset--color--mk-grey-tertiary, #9CA3AF);
  text-decoration: line-through;
  opacity:         1;
}
.mk-price-block ins {
  text-decoration: none;
}

/* Spec strip */
.mk-spec-strip {
  display:          flex;
  gap:              24px;
  flex-wrap:        wrap;
  background-color: var(--wp--preset--color--mk-cream-light, #FAF8F4);
  padding:          16px 18px;
  margin-top:       var(--wp--preset--spacing--sp-5, 24px);
}
.mk-spec-strip__item {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
  flex:           1 1 auto;
}
.mk-spec-strip__value {
  font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight: 900;
  font-size:   22px;
  color:       var(--wp--preset--color--mk-slate, #2C3E50);
  line-height: 1.1;
}
.mk-spec-strip__label {
  font-family:    var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-weight:    700;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--wp--preset--color--mk-grey-tertiary, #9CA3AF);
  line-height:    1.4;
}

/* Feature rows (Section 2) */
.mk-feature-list {
  display:        flex;
  flex-direction: column;
}
.mk-feature-row {
  display:     flex;
  gap:         16px;
  align-items: flex-start;
  padding:     20px 0;
  border-top:  1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0);
}
.mk-feature-row__icon {
  width:       32px;
  height:      32px;
  flex-shrink: 0;
  margin-top:  2px;
  object-fit:  contain;
}
.mk-feature-row__title {
  font-family:  var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight:  700;
  font-size:    16px;
  color:        var(--wp--preset--color--mk-slate, #2C3E50);
  margin:       0 0 4px;
  line-height:  1.3;
}
.mk-feature-row__desc {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:   14px;
  line-height: 1.55;
  color:       var(--wp--preset--color--mk-grey-secondary, #555E6C);
  margin:      0;
}

/* How It Works (Section 3) */
.mk-how-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:            2px solid var(--wp--preset--color--mk-slate, #2C3E50);
  margin-top:            var(--wp--preset--spacing--sp-7, 48px);
}
.mk-how-step           { padding: 32px 24px; }
.mk-how-step:first-child { padding-left: 0; }
.mk-how-step:last-child  { padding-right: 0; }
.mk-how-step:not(:last-child) {
  border-right: 1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0);
}
.mk-how-step__num {
  display:      block;
  font-family:  var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight:  900;
  font-size:    40px;
  color:        var(--wp--preset--color--mk-red, #C44536);
  line-height:  1;
  margin-bottom: 16px;
}
.mk-how-step__title {
  font-family:  var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight:  700;
  font-size:    16px;
  color:        var(--wp--preset--color--mk-slate, #2C3E50);
  margin:       0 0 8px;
  line-height:  1.3;
}
.mk-how-step__desc {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:   14px;
  line-height: 1.55;
  color:       var(--wp--preset--color--mk-grey-secondary, #555E6C);
  margin:      0;
}

/* Mankomb Experience cards (Section 4) */
.mk-experience-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
  margin-top:            var(--wp--preset--spacing--sp-7, 48px);
}
.mk-experience-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}
.mk-experience-card__icon {
  width:           40px;
  height:          40px;
  margin-bottom:   20px;
  color:           var(--wp--preset--color--mk-grey-cool, #8B9BAB);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.mk-experience-card__icon svg { width: 40px; height: 40px; }
.mk-experience-card__title {
  font-family:  var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
  font-weight:  700;
  font-size:    17px;
  color:        #ffffff;
  margin:       0 0 8px;
  line-height:  1.3;
}
.mk-experience-card__desc {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:   14px;
  line-height: 1.6;
  color:       var(--wp--preset--color--mk-grey-cool, #8B9BAB);
  max-width:   30ch;
  margin:      0 auto;
}

/* Specifications table (Section 5) */
.mk-specs-table { width: 100%; }
.mk-specs-row {
  display:     flex;
  align-items: baseline;
  border-top:  1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0);
  padding:     14px 0;
  gap:         24px;
}
.mk-specs-label {
  font-family:  var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-weight:  700;
  font-size:    14px;
  color:        var(--wp--preset--color--mk-slate, #2C3E50);
  flex:         0 0 220px;
  line-height:  1.5;
}
.mk-specs-value {
  font-family: var(--wp--preset--font-family--roboto-condensed, 'Roboto Condensed', sans-serif);
  font-size:   14px;
  line-height: 1.5;
  color:       var(--wp--preset--color--mk-grey-secondary, #555E6C);
  flex:        1 1 auto;
}


/* ──────────────────────────────────────────────────────────
   14. RESPONSIVE — mobile breakpoints
   Strategy:
   • Section padding: inline styles use 72px H / 96px or 56px V — override with !important
   • Nav: overlayMenu:"mobile" (in header.html) + hamburger button CSS here
   • Footer columns: force-stack inside <footer> tag only (color bar stays horizontal)
   • Named-class grids collapse: mk-how-grid, mk-experience-grid, mk-blog-grid, WC loop
   • Chewie hero 2-col: force-stack via is-not-stacked-on-mobile override scoped to .page-id-72
   ────────────────────────────────────────────────────────── */

/* ── Prevent horizontal overflow globally ── */
html, body { overflow-x: hidden; }
.wp-site-blocks { overflow-x: hidden; }


/* ══════════════════════════════════════════
   ≤1280px  — constrain inner max-widths
   ══════════════════════════════════════════ */
@media (max-width: 1280px) {
  .wp-site-blocks > .wp-block-group,
  .wp-site-blocks > .wp-block-cover {
    padding-left:  clamp(24px, 5vw, 72px) !important;
    padding-right: clamp(24px, 5vw, 72px) !important;
  }
  .mk-header__inner {
    padding-left:  clamp(16px, 3.5vw, 48px) !important;
    padding-right: clamp(16px, 3.5vw, 48px) !important;
  }
}


/* ══════════════════════════════════════════
   ≤1024px  — tablet landscape
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Section horizontal padding */
  .wp-site-blocks > .wp-block-group,
  .wp-site-blocks > .wp-block-cover {
    padding-left:  40px !important;
    padding-right: 40px !important;
  }
  /* Inner max-width constrained groups (hero inner, section inner) */
  .wp-site-blocks > .wp-block-cover .wp-block-group,
  .wp-site-blocks > .wp-block-group > .wp-block-group[style*="max-width"] {
    padding-left:  40px !important;
    padding-right: 40px !important;
  }
  .mk-header__inner {
    padding-left:  24px !important;
    padding-right: 24px !important;
  }
  /* Blog grid: 2 col on tablet */
  .mk-blog-grid.wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* WC product loop: 2 col */
  ul.products, .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* How-It-Works: 2×2 */
  .mk-how-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mk-how-step:nth-child(2) { border-right: none !important; }
  .mk-how-step:nth-child(3) { border-right: 1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0) !important; border-top: 1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0) !important; }
  .mk-how-step:nth-child(4) { border-top: 1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0) !important; }
}


/* ══════════════════════════════════════════
   ≤768px  — tablet portrait / large mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header ── */
  .mk-header__inner {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }

  /* ── Navigation hamburger (wp:navigation with overlayMenu:"mobile") ── */
  /* WP renders a hamburger button with class .wp-block-navigation__responsive-container-open */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--wp--preset--color--mk-slate, #2C3E50);
  }
  /* Mobile menu overlay panel */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(12px);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--mk-slate, #2C3E50) !important;
    padding: 12px 0;
  }

  /* ── Section padding overrides ── */
  /* Sections directly in site-blocks (e.g. slate bg, white bg, cream bg) */
  .wp-site-blocks > .wp-block-group {
    padding-top:    48px !important;
    padding-bottom: 48px !important;
    padding-left:   20px !important;
    padding-right:  20px !important;
  }
  /* Full-width cover sections (home hero, mid-page covers) */
  .wp-site-blocks > .wp-block-cover.alignfull {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }
  /* Hero inner constrained group */
  .wp-site-blocks > .wp-block-cover .wp-block-group,
  .wp-site-blocks > .wp-block-cover .wp-block-group[style*="max-width:760px"],
  .wp-site-blocks > .wp-block-cover .wp-block-group[style*="max-width: 760px"] {
    padding-top:    64px !important;
    padding-bottom: 64px !important;
    padding-left:   20px !important;
    padding-right:  20px !important;
    max-width: 100% !important;
  }

  /* ── Footer: force column stacking ── */
  footer .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap !important;
  }
  footer .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    min-width:  100% !important;
    width:      100% !important;
  }
  footer .wp-block-group[style*="max-width:1280px"],
  footer .wp-block-group[style*="max-width: 1280px"] {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }

  /* ── WC + Blog grids: single column ── */
  ul.products, .wc-block-grid__products {
    grid-template-columns: 1fr !important;
    gap: 32px 0 !important;
  }
  .mk-blog-grid.wp-block-post-template {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── How-It-Works: single column ── */
  .mk-how-grid {
    grid-template-columns: 1fr !important;
  }
  .mk-how-step,
  .mk-how-step:first-child,
  .mk-how-step:last-child {
    padding: 24px 0 !important;
    border-right: none !important;
    border-top: 1px solid var(--wp--preset--color--mk-grey-100, #E8EBF0) !important;
  }

  /* ── Experience cards: single column ── */
  .mk-experience-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Chewie hero: stack 2 columns (page-id-72) ── */
  .page-id-72 .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap !important;
  }
  .page-id-72 .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    min-width:  100% !important;
  }

  /* ── Specs table: wrap label/value ── */
  .mk-specs-row { flex-wrap: wrap; gap: 4px; }
  .mk-specs-label {
    flex: 0 0 100% !important;
    width: 100%;
  }
  .mk-specs-value { flex: 0 0 100%; }

  /* ── Spec strip: tighter on mobile ── */
  .mk-spec-strip {
    gap: 12px;
    padding: 14px 12px;
  }
  .mk-spec-strip__value { font-size: 18px; }

  /* ── WPForms newsletter: stack field + button ── */
  #wpforms-54 .wpforms-field-container {
    flex-wrap: wrap !important;
  }
  #wpforms-54 .wpforms-submit-container {
    flex: 0 0 100%;
    width: 100%;
  }
  #wpforms-54 .wpforms-submit-container .wpforms-submit {
    width: 100% !important;
  }

  /* ── CTA buttons: stack ── */
  .wp-block-buttons.is-layout-flex:not(.is-vertical) {
    flex-wrap: wrap !important;
  }
  .wp-block-buttons.is-layout-flex .wp-block-button {
    width: auto;
  }

  /* ── Heading scale ── */
  .wp-site-blocks h1,
  .wp-block-heading.has-display-2xl-font-size,
  .wp-block-heading.has-display-xl-font-size {
    font-size: clamp(2.4rem, 9vw, 4rem) !important;
    letter-spacing: -0.02em;
  }
  .wp-site-blocks h2 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }

  /* ── Investor updates ── */
  .mk-update-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ══════════════════════════════════════════
   ≤430px  — large phone (iPhone 14 Pro Max)
   ══════════════════════════════════════════ */
@media (max-width: 430px) {
  /* Section vertical padding: tighter */
  .wp-site-blocks > .wp-block-group {
    padding-top:    36px !important;
    padding-bottom: 36px !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
  }
  .wp-site-blocks > .wp-block-cover .wp-block-group {
    padding-top:    48px !important;
    padding-bottom: 48px !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
  }
  .mk-header__inner {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
  footer .wp-block-group[style*="max-width:1280px"],
  footer .wp-block-group[style*="max-width: 1280px"] {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
  /* Chewie specs */
  .mk-specs-label { font-size: 13px; }
  /* Blog card image */
  .mk-blog-card .wp-block-post-featured-image,
  .mk-blog-card .wp-block-post-featured-image a { height: 200px; }
  /* Stats row (homepage dark section): wrap to 2×2 */
  .wp-site-blocks > .wp-block-group.has-mk-slate-background-color .wp-block-columns,
  .wp-site-blocks > .wp-block-group.has-mk-slate-background-color .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap !important;
  }
  .wp-site-blocks > .wp-block-group.has-mk-slate-background-color .wp-block-columns > .wp-block-column {
    flex-basis: 46% !important;
    min-width:  46% !important;
  }
}


/* ══════════════════════════════════════════
   ≤390px  — iPhone 14 Pro / standard mobile
   ══════════════════════════════════════════ */
@media (max-width: 390px) {
  .wp-site-blocks > .wp-block-group,
  .wp-site-blocks > .wp-block-cover .wp-block-group {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }
  /* Spec strip: single column */
  .mk-spec-strip {
    flex-direction: column;
    gap: 10px;
  }
  .mk-spec-strip__item { flex-direction: row; align-items: baseline; gap: 8px; }
  .mk-spec-strip__value { font-size: 17px; }
  /* Feature rows: tighter */
  .mk-feature-row { gap: 12px; padding: 16px 0; }
  .mk-feature-row__icon { width: 26px; height: 26px; }
}


/* ══════════════════════════════════════════
   ≤360px  — small Android phones
   ══════════════════════════════════════════ */
@media (max-width: 360px) {
  /* Max out compression: everything at 14px gutter */
  .wp-site-blocks > .wp-block-group,
  .wp-site-blocks > .wp-block-cover .wp-block-group {
    padding-left:  14px !important;
    padding-right: 14px !important;
  }
  .mk-header__inner {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
  /* Heading scale: even tighter */
  .wp-site-blocks h1,
  .wp-block-heading.has-display-2xl-font-size,
  .wp-block-heading.has-display-xl-font-size {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}


/* ===== consolidated theme-patch (mu-plugin retired) ===== */
/* ============================================================
   Mankomb theme patch v2 — appended via mu-plugin loader.
   Targets the actual DOM the FSE block theme renders, not the
   .mk-announce / .mk-color-bar > span ideal markup.
   ============================================================ */

/* ---- Fix #1: Announcement bar at #2C3E50 → #0E1116 ------------- */
/* The announcement bar is the first wp-block-group child of the
   header template-part. Inline background-color #2C3E50 is hardcoded
   in the template; force-override here. */
header.wp-block-template-part > div.wp-block-group:first-child,
.wp-site-blocks > header > .wp-block-group:first-child,
header.wp-block-template-part > .wp-block-group.alignfull:first-child {
  background-color: #0E1116 !important;
}
header.wp-block-template-part > div.wp-block-group:first-child p,
header.wp-block-template-part > .wp-block-group.alignfull:first-child .wp-block-paragraph {
  color: #FFFFFF !important;
  font-family: var(--wp--preset--font-family--roboto-condensed) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* ---- Fix #2: Brand color bar — wp-block-columns rendering ------ */
/* The .mk-color-bar uses wp-block-columns markup. The colored stripes
   are wp-block-column children. Style the columns by position. */
.mk-color-bar {
  display: flex !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}
.mk-color-bar > .wp-block-column,
.mk-color-bar > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: inherit !important;
}
header.wp-block-template-part .mk-color-bar {
  height: 6px !important;
}
header.wp-block-template-part .mk-color-bar > .wp-block-column:nth-child(1),
header.wp-block-template-part .mk-color-bar > div:nth-child(1) { background: #197278 !important; }
header.wp-block-template-part .mk-color-bar > .wp-block-column:nth-child(2),
header.wp-block-template-part .mk-color-bar > div:nth-child(2) { background: #678760 !important; }
header.wp-block-template-part .mk-color-bar > .wp-block-column:nth-child(3),
header.wp-block-template-part .mk-color-bar > div:nth-child(3) { background: #FCC15D !important; }
header.wp-block-template-part .mk-color-bar > .wp-block-column:nth-child(4),
header.wp-block-template-part .mk-color-bar > div:nth-child(4) { background: #FB9B27 !important; }
header.wp-block-template-part .mk-color-bar > .wp-block-column:nth-child(5),
header.wp-block-template-part .mk-color-bar > div:nth-child(5) { background: #C44536 !important; }

footer .mk-color-bar { height: 4px !important; }
footer .mk-color-bar > .wp-block-column:nth-child(1),
footer .mk-color-bar > div:nth-child(1) { background: #197278 !important; }
footer .mk-color-bar > .wp-block-column:nth-child(2),
footer .mk-color-bar > div:nth-child(2) { background: #678760 !important; }
footer .mk-color-bar > .wp-block-column:nth-child(3),
footer .mk-color-bar > div:nth-child(3) { background: #FCC15D !important; }
footer .mk-color-bar > .wp-block-column:nth-child(4),
footer .mk-color-bar > div:nth-child(4) { background: #FB9B27 !important; }
footer .mk-color-bar > .wp-block-column:nth-child(5),
footer .mk-color-bar > div:nth-child(5) { background: #C44536 !important; }

/* ---- Fix #3: Header sticky + spacing --------------------------- */
/* The header template-part is the parent .mk-header-wrapper or the
   wp-block-template-part header element itself. */
header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
}
body.admin-bar header.wp-block-template-part { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { top: 46px !important; }
}

/* The nav row (.mk-header inside template-part). */
.mk-header {
  background-color: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--wp--preset--color--mk-grey-100) !important;
}
.mk-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  min-height: 64px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 72px) !important;
}
.mk-nav-wordmark img {
  height: 28px !important;
  width: auto !important;
  max-width: 160px !important;
  display: block !important;
}

/* ---- Fix #4: Nav typography ------------------------------------ */
.mk-nav-links {
  margin-left: auto !important;
}
.mk-nav-links .wp-block-navigation-item__content,
.mk-nav-links a {
  font-family: var(--wp--preset--font-family--roboto-condensed) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #0E1116 !important;
  padding: 6px 0 !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
}
.mk-nav-links .wp-block-navigation-item__content:hover,
.mk-nav-links .current-menu-item .wp-block-navigation-item__content {
  color: #C44536 !important;
  border-bottom-color: #C44536 !important;
}
.mk-nav-cart {
  flex: 0 0 auto;
  color: #0E1116 !important;
}
.mk-nav-cart:hover { color: #C44536 !important; }

/* ---- Fix #5: Footer slate / black correction ------------------- */
/* mk-footer-newsletter and any element using #2C3E50 → #0E1116 */
[style*="background-color:#2C3E50"],
[style*="background-color: #2C3E50"],
[style*="background:#2C3E50"],
[style*="background: #2C3E50"] {
  background-color: #0E1116 !important;
}

/* ---- Fix #6: Force #2C3E50 inline color refs to #0E1116 -------- */
[style*="color:#2C3E50"],
[style*="color: #2C3E50"] {
  color: #0E1116 !important;
}

/* Token-bound elements that should use #0E1116 */
.has-mk-slate-background-color,
.has-mk-slate-background-color.has-background {
  background-color: #0E1116 !important;
}
.has-mk-slate-color,
.has-mk-slate-color.has-text-color {
  color: #0E1116 !important;
}

/* ---- Fix #7: Hero overlay strengthens dark gradient ------------ */
/* So text remains readable over the lifestyle photo */
.wp-block-cover .wp-block-cover__background {
  background-color: rgba(0,0,0,0.45) !important;
}

/* ---- Fix #8: Chewie page (page-id-72) fonts -------------------- */
.page-id-72 h1,
.page-id-72 .wp-block-post-title,
.page-id-72 .wp-block-heading,
.single-product .product_title {
  font-family: var(--wp--preset--font-family--montserrat) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
}
.page-id-72 p,
.page-id-72 .wp-block-paragraph,
.single-product p {
  font-family: var(--wp--preset--font-family--roboto-condensed) !important;
}

/* ---- Fix #9: Mobile responsiveness -------------------------------- */
@media (max-width: 768px) {
  header.wp-block-template-part > div.wp-block-group:first-child p {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }
  .mk-header__inner {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
  }
  .mk-nav-wordmark img { height: 24px !important; }
}
@media (max-width: 430px) {
  .mk-header__inner { padding: 0 14px !important; }
  header.wp-block-template-part > div.wp-block-group:first-child {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ---- Fix #10: Footer column label color ----------------------- */
.mk-footer-col-label,
.wp-block-heading.mk-footer-col-label {
  font-family: var(--wp--preset--font-family--roboto-condensed) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--wp--preset--color--mk-grey-nav, #777E8A) !important;
  margin: 0 0 var(--wp--preset--spacing--sp-4) !important;
}