/*
Theme Name:   MAKHANZA
Theme URI:    https://makhanza.co.in
Description:  MAKHANZA brand theme for WooCommerce — Forest Green & Gold over a warm cream spine. Ported 1:1 from the original makhanza.co.in design system (Playfair Display + DM Sans). Child of Storefront.
Author:       RASI Lifestyle
Author URI:   https://makhanza.co.in
Template:     storefront
Version: 3.2.0
Text Domain:  makhanza
*/

/* ============================================================
   Design tokens are loaded separately via functions.php
   (assets/css/tokens.css) so they cascade before everything.
   This file consumes those tokens only — no raw hex values.
   ============================================================ */

/* ---------- Base ---------- */
body,
.site {
  background: var(--surface-page);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}

h1, .entry-title { font-size: var(--fs-section); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-h3); }

p { max-width: var(--measure); }

a { color: var(--color-forest); }
a:hover { color: var(--color-gold-dark); }

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: var(--lh-snug);
  color: var(--color-forest);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* ---------- Answer-first callout (AEO blocks from the blog) ---------- */
.mkz-answer {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: 0 0 var(--space-2xl);
  color: var(--text-strong);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  max-width: none;
}
.mkz-answer strong {
  color: var(--color-forest);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  display: block;
  margin-bottom: var(--space-sm);
}

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-gold-soft);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.site-header .site-title a,
.site-branding .site-title a {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-forest);
  letter-spacing: var(--ls-nav);
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  letter-spacing: var(--ls-nav);
  transition: color var(--dur) var(--ease);
}
.main-navigation ul.menu > li > a:hover { color: var(--color-gold-dark); }

/* ---------- Buttons ---------- */
button,
input[type="button"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-forest);
  color: var(--gold-100);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-cta);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  transition: background var(--dur) var(--ease), transform var(--dur-lift) var(--ease-out);
}
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--color-forest-deep);
  color: var(--gold-100);
  transform: translateY(-2px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--color-gold);
  color: var(--forest-900);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--color-gold-dark);
  color: var(--white);
}

/* Outline variant */
.mkz-btn-outline {
  background: transparent;
  color: var(--color-forest);
  border: var(--border-width-2) solid var(--color-forest);
}
.mkz-btn-outline:hover {
  background: var(--color-forest);
  color: var(--gold-100);
}

/* ---------- Eyebrow label ---------- */
.mkz-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-dark);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ---------- Product cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-lift) var(--ease-out),
              box-shadow var(--dur-lift) var(--ease-out);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.woocommerce ul.products li.product img {
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--fs-h3);
  color: var(--text-heading);
  padding-bottom: var(--space-sm);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-forest);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  text-decoration: none;
  color: var(--color-forest);
}

/* Sale flash */
.woocommerce span.onsale {
  background: var(--color-gold);
  color: var(--forest-900);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-nav);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  min-height: auto;
  min-width: auto;
  line-height: 1.8;
}

/* ---------- Single product ---------- */
.woocommerce div.product .product_title {
  font-size: var(--fs-section);
  margin-bottom: var(--space-md);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-body);
  font-weight: var(--fw-light);
}
.woocommerce div.product div.images img {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-image);
}

/* Nutrition / attribute table */
.woocommerce table.shop_attributes,
.woocommerce table.shop_table {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.woocommerce table.shop_attributes th {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--color-forest);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.woocommerce table.shop_attributes td { color: var(--text-strong); }

/* HSN / GST line on the product page */
.mkz-hsn {
  display: inline-block;
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-nav);
  color: var(--text-muted);
  background: var(--accent-tag);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
}

/* ---------- Stock states ---------- */
.woocommerce div.product .stock { color: var(--color-forest-mid); font-weight: var(--fw-semibold); }
.woocommerce div.product .stock.out-of-stock { color: var(--brown-warm); }

/* ---------- Forms / inputs ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--surface-card);
  border: var(--border-width-2) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-strong);
  transition: border-color var(--dur) var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--focus-ring);
  outline: none;
}

/* ---------- Cart / checkout ---------- */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
}
.woocommerce-info,
.woocommerce-message {
  background: var(--accent-soft);
  border-top-color: var(--color-gold);
  color: var(--text-strong);
  border-radius: var(--radius-lg);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--color-gold-dark); }

/* Free-shipping progress note */
.mkz-freeship {
  background: var(--surface-forest);
  color: var(--text-on-forest);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-xl);
}

/* ---------- Blog ---------- */
.entry-content h2 {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  position: relative;
}
.entry-content h3 {
  margin-top: var(--space-2xl);
  color: var(--color-forest-mid);
  font-size: 1.2rem;
}
.entry-content ul { margin-bottom: var(--space-xl); }
.entry-content li { margin-bottom: var(--space-sm); color: var(--text-body); }

.mkz-divider {
  height: 1px;
  background: var(--divider-gradient);
  border: 0;
  margin: var(--space-3xl) 0;
}

/* Category pill */
.mkz-cat {
  display: inline-block;
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--forest-50);
  color: var(--color-forest);
}

/* ---------- Dark forest section ---------- */
.mkz-section-forest {
  background: var(--surface-forest);
  color: var(--text-on-forest);
  padding: var(--section-padding) 0;
}
.mkz-section-forest h2,
.mkz-section-forest h3 { color: var(--gold-100); }
.mkz-section-forest p { color: rgba(255, 255, 255, 0.86); }

.mkz-benefit-card {
  background: rgba(255, 255, 255, 0.04);
  border: var(--border-width) solid var(--border-on-forest);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-footer);
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-2xl);
}
.site-footer a { color: var(--gold-100); }
.site-footer a:hover { color: var(--white); }
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .widget-title { color: var(--gold-100); font-family: var(--font-display); }

/* ---------- WhatsApp order button ---------- */
.mkz-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: #25D366;
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  transition: transform var(--dur-lift) var(--ease-out);
}
.mkz-whatsapp:hover { transform: translateY(-2px); color: var(--white); }

/* ---------- Layout rhythm ---------- */
.site-main { padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); }

@media (max-width: 900px) {
  .mkz-section-forest { padding: var(--section-padding-mobile) 0; }
  .site-main { padding-top: var(--space-2xl); }
}

/* ---------- Accessibility ---------- */
*:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================
   HEADER — logo + wordmark + primary nav
   =========================================================== */
/* Storefront wraps header content in .col-full — the flex row must go there,
   not on .site-header, or the children stack. */
.site-header .col-full {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.site-header .col-full::before,
.site-header .col-full::after { display: none !important; }

/* Storefront's search + handheld toggle get in the way of the brand row. */
.site-header .site-search,
.site-header .storefront-handheld-footer-bar,
.site-header .menu-toggle { display: none !important; }

/* Cart sits at the far right, after the nav. */
.site-header .site-header-cart {
  order: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
.site-header .site-header-cart li { display: inline-block; margin: 0; }

.mkz-branding { margin: 0; padding: 0; float: none; width: auto; flex: 0 0 auto; order: 1; }
.mkz-branding__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
}
.mkz-branding__logo {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-card);
}
.mkz-branding__word {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.6rem;
  letter-spacing: var(--ls-nav);
  color: var(--color-forest);
  line-height: 1;
}
.mkz-branding__link:hover .mkz-branding__word { color: var(--color-gold-dark); }

.mkz-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-left: auto;
  order: 2;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.mkz-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkz-nav__list a {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.mkz-nav__list a:hover { color: var(--color-gold-dark); }

.mkz-nav__cta {
  background: var(--color-forest);
  color: var(--gold-100);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-cta);
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur-lift) var(--ease-out);
}
.mkz-nav__cta:hover {
  background: var(--color-forest-deep);
  color: var(--gold-100);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .mkz-nav__list { gap: var(--space-lg); }
  .mkz-nav { gap: var(--space-lg); }
}
@media (max-width: 900px) {
  .site-header .col-full { flex-wrap: wrap; justify-content: center; text-align: center; }
  .mkz-nav { margin-left: 0; flex-wrap: wrap; justify-content: center; width: 100%; }
  .mkz-nav__list { flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
  .mkz-branding__logo { width: 44px; height: 44px; }
  .mkz-branding__word { font-size: 1.3rem; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer { padding: 0; background: var(--surface-forest-deep); }
.site-footer .col-full { padding: 0; max-width: none; }

.mkz-footer {
  background: var(--surface-forest-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--space-4xl);
}
.mkz-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}
.mkz-footer h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-100);
  letter-spacing: var(--ls-nav);
  margin: 0 0 var(--space-lg);
}
.mkz-footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-lg);
}
.mkz-footer p {
  font-size: var(--fs-card);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0 0 var(--space-lg);
}
.mkz-footer__note { color: rgba(255, 255, 255, 0.5); font-size: var(--fs-tag); }

.mkz-footer__col ul { list-style: none; margin: 0; padding: 0; }
.mkz-footer__col li { margin-bottom: var(--space-md); font-size: var(--fs-card); }
.mkz-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color var(--dur) var(--ease); }
.mkz-footer a:hover { color: var(--gold-100); }

.mkz-footer__social-title,
.mkz-footer__policies-title { margin-top: var(--space-2xl); }

.mkz-social { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.mkz-social__link {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-on-forest);
  background: rgba(245, 217, 107, 0.06);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur-lift) var(--ease-out);
}
.mkz-social__link:hover { background: rgba(245, 217, 107, 0.18); transform: translateY(-3px); }
.mkz-social__link svg { width: 20px; height: 20px; fill: var(--gold-100); display: block; }

.mkz-footer__bar {
  border-top: var(--border-width) solid var(--border-on-forest);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
}
.mkz-footer__bar p {
  margin: 0;
  font-size: var(--fs-tag);
  color: rgba(255, 255, 255, 0.5);
  max-width: none;
}

@media (max-width: 1024px) {
  .mkz-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}
@media (max-width: 600px) {
  .mkz-footer__grid { grid-template-columns: 1fr; }
  .mkz-footer__bar { justify-content: center; text-align: center; }
}

/* ===========================================================
   POLICY / LEGAL PAGES
   =========================================================== */
.page .entry-content h2 { margin-top: var(--space-3xl); }
.page .entry-content h3 { margin-top: var(--space-2xl); color: var(--color-forest-mid); font-size: 1.15rem; }
.page .entry-content ul { margin-bottom: var(--space-xl); }
.page .entry-content li { margin-bottom: var(--space-sm); }
.mkz-legal-note {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: 0 0 var(--space-2xl);
  font-size: var(--fs-card);
  max-width: none;
}

/* ===========================================================
   SHOP PAGE — hero, filters, product cards
   =========================================================== */
.mkz-shophero {
  background: var(--surface-muted);
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.mkz-shophero .mkz-wrap { max-width: 760px; }
.mkz-shophero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--color-forest);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-lg);
}
.mkz-shophero__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 auto;
}

/* ---- Category pills ---- */
.mkz-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}
.mkz-cats__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-card);
  border: var(--border-width-2) solid var(--border-hairline);
  color: var(--text-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.mkz-cats__pill:hover { border-color: var(--color-gold); color: var(--color-forest); }
.mkz-cats__pill.is-active {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--gold-100);
}
.mkz-cats__count {
  font-size: var(--fs-tag);
  opacity: 0.65;
  font-weight: var(--fw-regular);
}

/* ---- Toolbar ---- */
.mkz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: var(--border-width) solid var(--border-hairline);
  border-bottom: var(--border-width) solid var(--border-hairline);
  margin-bottom: var(--space-2xl);
}
.mkz-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: var(--fs-label);
  color: var(--text-muted);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.mkz-toolbar .woocommerce-ordering { margin: 0; float: none; }
.mkz-toolbar .woocommerce-ordering select {
  border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--border-hairline);
  background: var(--surface-card);
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

/* ---- Product card ---- */
.woocommerce ul.products li.product { position: relative; overflow: hidden; }

.mkz-card__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-muted);
  margin-bottom: var(--space-lg);
}
.mkz-card__media img {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.woocommerce ul.products li.product:hover .mkz-card__media img { transform: scale(1.06); }

.mkz-card__flag {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  background: var(--color-gold);
  color: var(--forest-900);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.mkz-card__flag--out {
  background: var(--forest-900);
  color: var(--gold-100);
  left: var(--space-md);
  right: auto;
}
.mkz-card__flag--low {
  top: auto;
  bottom: var(--space-md);
  left: var(--space-md);
  right: auto;
  background: var(--surface-card);
  color: var(--brown-warm);
  border: var(--border-width) solid var(--border-hairline);
}

.mkz-card__quickadd {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--gold-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(26, 74, 46, 0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur-lift) var(--ease-out), background var(--dur) var(--ease);
}
.woocommerce ul.products li.product:hover .mkz-card__quickadd,
.mkz-card__quickadd:focus-visible { opacity: 1; transform: translateY(0); }
.mkz-card__quickadd:hover { background: var(--color-gold); color: var(--forest-900); }
.mkz-card__quickadd.added { background: var(--color-gold); color: var(--forest-900); }
.mkz-card__quickadd.loading { opacity: 1; transform: none; }

/* Touch devices have no hover — always show it. */
@media (hover: none) {
  .mkz-card__quickadd { opacity: 1; transform: none; }
}

.mkz-card__meta {
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
  max-width: none;
}

.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

@media (max-width: 900px) {
  .mkz-shophero { padding: var(--space-3xl) 0 var(--space-2xl); }
  .mkz-toolbar { justify-content: center; }
}

/* Storefront re-inserts its own sale flash inside the card body; our
   percentage badge on the image replaces it, so hide the duplicate. */
.woocommerce ul.products li.product span.onsale { display: none !important; }

/* ---------- Live purchase toast ---------- */
.mkz-toast {
  position: fixed;
  left: var(--space-xl);
  bottom: var(--space-xl);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 340px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-lift) var(--ease-out), transform var(--dur-lift) var(--ease-out);
}
.mkz-toast.is-in { opacity: 1; transform: none; }
.mkz-toast__img { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; flex: 0 0 auto; }
.mkz-toast__body { min-width: 0; }
.mkz-toast p { margin: 0; max-width: none; }
.mkz-toast__who { font-size: var(--fs-tag); color: var(--text-muted); }
.mkz-toast__what {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: var(--fw-bold);
  color: var(--color-forest);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mkz-toast__ago { font-size: var(--fs-tag); color: var(--text-muted); margin-top: 2px; }
.mkz-toast__close {
  background: none; border: none; padding: 0;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--text-muted); align-self: flex-start;
}
.mkz-toast__close:hover { color: var(--text-strong); background: none; transform: none; }

@media (max-width: 600px) {
  .mkz-toast { left: var(--space-md); right: var(--space-md); max-width: none; bottom: var(--space-md); }
}

/* ============================================================
   v1.9.0 — QA fixes
   1. Product grid                (front page cards were full-width)
   2. Header cart                 (icon was 16px and unstyled)
   3. Footer contrast             (Storefront customizer forced #333)
   ============================================================ */

/* ---------- 1 · Product grid -------------------------------
   Storefront lays the loop out with percentage floats scoped to
   `.woocommerce ul.products`. The custom front page renders the loop
   outside a WooCommerce query, so the body never receives that class
   and every card stretched to 100% (966px tall media boxes).
   A CSS grid removes the dependency on the float scaffolding
   entirely, so the loop behaves identically wherever it appears.   */
.woocommerce ul.products,
.woocommerce-page ul.products,
.mkz-home ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xl);
  margin: 0 0 var(--space-2xl);
  padding: 0;
  list-style: none;
}

/* Storefront's clearfix pseudo-elements become phantom grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.mkz-home ul.products::before,
.mkz-home ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.mkz-home ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Push the price / button pair to the bottom so cards align. */
.woocommerce ul.products li.product .mkz-card__media { flex: 0 0 auto; }

.woocommerce ul.products.columns-3,
.mkz-home ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-2,
.mkz-home ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-1,
.mkz-home ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .mkz-home ul.products,
  .woocommerce ul.products.columns-3,
  .mkz-home ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .mkz-home ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .mkz-home ul.products.columns-3,
  .mkz-home ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}
@media (max-width: 460px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .mkz-home ul.products,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .mkz-home ul.products.columns-2,
  .mkz-home ul.products.columns-3,
  .mkz-home ul.products.columns-4 { grid-template-columns: minmax(0, 1fr); }
}

/* The media box is square by design; belt-and-braces cap so a stray
   full-width parent can never produce a 966px tall tile again. */
.mkz-card__media { max-height: 420px; }
.mkz-card__media img { max-height: 420px; }

/* ---------- 2 · Header cart --------------------------------
   Storefront renders the cart as bare text plus a 16px icon-font
   glyph. Rebuilt as a proper pill button with a masked SVG cart,
   so it scales with the brand rather than the icon font.          */
.site-header .site-header-cart { position: relative; }

.site-header .site-header-cart a.cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 15px;
  border: 2px solid var(--color-forest);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-forest) !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur-lift) var(--ease-out);
}
.site-header .site-header-cart a.cart-contents:hover,
.site-header .site-header-cart a.cart-contents:focus-visible {
  background: var(--color-forest);
  color: var(--gold-100) !important;
  transform: translateY(-2px);
}

/* Masked SVG: the glyph takes its colour from `background-color`,
   so it follows the button's hover state automatically. */
.site-header .site-header-cart a.cart-contents::before {
  content: "" !important;
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: var(--mkz-cart-icon) center / contain no-repeat;
  mask: var(--mkz-cart-icon) center / contain no-repeat;
  font-size: 0 !important;
}
.site-header .site-header-cart a.cart-contents::after { content: none !important; }

:root {
  --mkz-cart-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.5'/%3E%3Ccircle cx='17.5' cy='20' r='1.5'/%3E%3Cpath d='M2 3h2.4l2.6 12.1a1.9 1.9 0 0 0 1.9 1.5h8.6a1.9 1.9 0 0 0 1.9-1.5L21 7.2H5.4'/%3E%3C/svg%3E");
}

.site-header .site-header-cart a.cart-contents .amount { font-weight: var(--fw-bold); }
.site-header .site-header-cart a.cart-contents .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--forest-900);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .site-header .site-header-cart a.cart-contents { padding: 10px 12px; }
  .site-header .site-header-cart a.cart-contents .amount { display: none; }
}

/* ---------- 3 · Footer contrast ----------------------------
   Storefront prints customizer CSS as
   `.site-footer a:not(.button):not(.components-button){color:#333}`
   — specificity 0,3,1, which outranked `.mkz-footer a` (0,1,1) and
   painted every footer link near-black on forest green.            */
.site-footer,
.site-footer .col-full,
.site-footer .mkz-footer {
  background-color: var(--forest-900) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
.site-footer { padding-top: 0; padding-bottom: 0; }
.site-footer .mkz-footer a:not(.button):not(.components-button) {
  color: rgba(255, 255, 255, 0.86) !important;
}
.site-footer .mkz-footer a:not(.button):not(.components-button):hover,
.site-footer .mkz-footer a:not(.button):not(.components-button):focus-visible {
  color: var(--gold-100) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .mkz-footer h1,
.site-footer .mkz-footer h2,
.site-footer .mkz-footer h3,
.site-footer .mkz-footer h4,
.site-footer .mkz-footer h5,
.site-footer .mkz-footer h6,
.site-footer .mkz-footer .widget .widget-title,
.site-footer .mkz-footer .widget .widgettitle {
  color: var(--gold-100) !important;
}
.site-footer .mkz-footer p,
.site-footer .mkz-footer li,
.site-footer .mkz-footer span { color: inherit; }
.site-footer .mkz-footer .mkz-footer__note,
.site-footer .mkz-footer .mkz-footer__bar p { color: rgba(255, 255, 255, 0.62) !important; }

/* Focus ring has to be visible on the dark ground too. */
.site-footer .mkz-footer a:focus-visible,
.mkz-social__link:focus-visible {
  outline: 2px solid var(--gold-100);
  outline-offset: 3px;
}

/* ---------- 4 · Blog archive page -------------------------- */
.mkz-blog { padding: var(--space-3xl) 0 var(--space-4xl, 96px); }
.mkz-blog__head { text-align: center; margin-bottom: var(--space-3xl); }
.mkz-blog__head h1 { margin: 0 0 var(--space-md); }
.mkz-blog__head p { margin: 0 auto; max-width: 60ch; color: var(--text-muted); }
.mkz-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
}
@media (max-width: 1000px) { .mkz-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mkz-blog__grid { grid-template-columns: minmax(0, 1fr); } }

.mkz-post {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
}
.mkz-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.mkz-post__media { background: var(--surface-muted); aspect-ratio: 16 / 9; overflow: hidden; }
.mkz-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkz-post__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.mkz-post__cat {
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-gold-dark);
  font-weight: var(--fw-semibold);
}
.mkz-post__title { font-size: var(--fs-h3); margin: 0; line-height: var(--lh-snug); }
.mkz-post__title a { color: var(--text-heading); text-decoration: none; }
.mkz-post__title a:hover { color: var(--color-gold-dark); }
.mkz-post__excerpt { color: var(--text-muted); font-size: var(--fs-card); margin: 0; }
.mkz-post__meta { margin-top: auto; font-size: var(--fs-tag); color: var(--text-muted); }

.mkz-blog__nav { margin-top: var(--space-3xl); display: flex; justify-content: center; }
.mkz-blog__nav .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-hairline);
  margin: 0 4px; text-decoration: none; color: var(--color-forest);
}
.mkz-blog__nav .page-numbers.current { background: var(--color-forest); color: var(--gold-100); border-color: var(--color-forest); }

/* ---------- 5 · On-forest contrast --------------------------
   Any brand element that sits on a forest ground needs its light
   variant regardless of stylesheet order — these are stated here,
   in the last sheet, so they cannot be lost to a load-order race. */
.mkz-section-forest .mkz-eyebrow,
.mkz-eyebrow--onforest,
.mkz-video .mkz-eyebrow {
  background: rgba(245, 217, 107, 0.14);
  color: var(--gold-100);
}
.mkz-section-forest .mkz-fineprint,
.mkz-video .mkz-fineprint { color: rgba(255, 255, 255, 0.6); }
.mkz-section-forest li,
.mkz-section-forest .mkz-contact__list li { color: rgba(255, 255, 255, 0.86); }
.mkz-section-forest a:not(.button):not(.mkz-whatsapp) { color: var(--gold-100); }
.mkz-section-forest a:not(.button):not(.mkz-whatsapp):hover { color: var(--white, #fff); }
.mkz-video .mkz-vid-card__cat { color: var(--gold-100); }

/* ---------- 6 · Header mini-cart --------------------------
   Storefront renders a hover mini-cart inside .site-header-cart.
   Our pill button replaces it, but the widget stayed in the flow
   and bled a 90px product thumbnail into the left gutter. */
.site-header .site-header-cart .widget_shopping_cart,
.site-header .site-header-cart li:nth-child(2) { display: none !important; }

/* Storefront + our section padding stack up to a ~130px void under
   the breadcrumb on inner pages. Trim it to one rhythm step. */
.woocommerce-breadcrumb { margin-bottom: var(--space-xl) !important; }
.site-content { padding-top: var(--space-lg); }
.mkz-blog { padding-top: var(--space-2xl); }

/* Storefront's prev/next product pagination parks a 90px thumbnail
   just off the viewport edge and it peeks into the left gutter as a
   stray white box. The breadcrumb already covers this navigation. */
.storefront-product-pagination { display: none !important; }

/* ============================================================
   v2.1.1 — mobile header
   A 390px screen was giving the header 300px of height: logo,
   two wrapped rows of links, the CTA and the cart, all before
   any content. Below 900px the links collapse behind a toggle.
   ============================================================ */

.mkz-nav__toggle {
  display: none;
  align-items: center;
  gap: 9px;
  order: 2;
  margin-left: auto;
  padding: 10px 16px;
  background: transparent;
  border: 2px solid var(--color-forest);
  border-radius: var(--radius-pill);
  color: var(--color-forest);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  cursor: pointer;
}
.mkz-nav__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.mkz-nav__bars i {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.mkz-nav__toggle.is-open { background: var(--color-forest); color: var(--gold-100); }
.mkz-nav__toggle.is-open .mkz-nav__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mkz-nav__toggle.is-open .mkz-nav__bars i:nth-child(2) { opacity: 0; }
.mkz-nav__toggle.is-open .mkz-nav__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header .col-full { flex-wrap: wrap; gap: var(--space-md); }

  .mkz-branding { order: 1; }
  .mkz-nav__toggle { display: inline-flex; }
  .site-header .site-header-cart { order: 3; margin-left: var(--space-sm); }

  .mkz-nav {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: var(--border-width) solid var(--border-gold-soft);
  }
  .mkz-nav.is-open { display: flex; }

  .mkz-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .mkz-nav__list li { width: 100%; }
  .mkz-nav__list a {
    display: block;
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: var(--border-width) solid var(--border-hairline);
  }
  .mkz-nav__cta { text-align: center; margin-top: var(--space-sm); }

  /* 48px display type on a 372px viewport breaks mid-word. */
  .mkz-hero__copy h1 { font-size: clamp(34px, 9vw, 44px); }
}

@media (max-width: 480px) {
  .mkz-nav__toggle-text { display: none; }
  .mkz-nav__toggle { padding: 11px 13px; }
  .site-header .col-full { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .mkz-branding__logo { width: 44px; height: 44px; }
}

/* ============================================================
   v2.2.0 — container width
   The layout was capped at 1200px (Storefront's own .col-full is
   1170px), which left ~350px of empty cream down each side of a
   1900px laptop screen and made the site read as a narrow column
   floating in a page. Widened to 1500px, and the ticker now runs
   edge to edge so it reads as a band rather than a stray bar.
   ============================================================ */

:root { --content-max: 1500px; }

.site .col-full,
.site-header .col-full,
.storefront-breadcrumb .col-full,
.site-content .col-full { max-width: var(--content-max); }

body { overflow-x: hidden; }

.mkz-ticker {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* On very wide screens, stop the hero copy from stretching to an
   unreadable measure just because the container grew. */
@media (min-width: 1500px) {
  .mkz-hero__copy p { max-width: 54ch; }
}

/* GST invoice link on the order-received page and My Account. */
.mkz-invoice-link { margin-top: var(--space-xl); }
.mkz-invoice-link .button { display: inline-block; }

/* -------------------------------------------------------------------------
 * Front page: close the gap under the header.
 *
 * Storefront puts a 4.24em bottom margin on .site-header, which is right for
 * an inner page with a title below it. On the front page the announcement
 * ticker is designed to sit flush against the header, so that margin renders
 * as a 68px stripe of dead cream between the header and the green band —
 * the first thing anyone sees, and it reads as a rendering fault.
 * ---------------------------------------------------------------------- */

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header,
.home .site-header {
	margin-bottom: 0;
}

.home .site-content {
	padding-top: 0;
}

/* -------------------------------------------------------------------------
 * Brand character band.
 *
 * The mascot carries the brand better than another paragraph does, so it
 * gets a quiet cream band of its own between the carousel and the product
 * grid. The soft grey drop shadow baked into the artwork disappears against
 * cream, which is why this band is not forest green.
 * ---------------------------------------------------------------------- */

.mkz-mascot {
	background: linear-gradient(180deg, #f7f3e8 0%, #efe8d6 100%);
	padding: 56px 0;
	overflow: hidden;
}

.mkz-mascot__inner {
	display: flex;
	align-items: center;
	gap: 44px;
	justify-content: center;
}

.mkz-mascot__char {
	width: 210px;
	height: auto;
	flex: 0 0 auto;
	filter: drop-shadow( 0 12px 22px rgba( 29, 59, 42, .18 ) );
}

.mkz-mascot__say {
	max-width: 560px;
}

.mkz-mascot__quote {
	margin: 10px 0 12px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp( 20px, 2.4vw, 29px );
	line-height: 1.38;
	color: var( --forest, #1d3b2a );
}

.mkz-mascot__sig {
	margin: 0;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a7a4e;
}

@media ( max-width: 782px ) {
	.mkz-mascot__inner { flex-direction: column; text-align: center; gap: 20px; }
	.mkz-mascot__char  { width: 148px; }
}

/* -------------------------------------------------------------------------
 * Shop hero with the range photograph behind it.
 *
 * The photograph sits to the right and a forest gradient covers the left,
 * so the headline keeps a solid background to sit on at every width rather
 * than fighting the busy tabletop for contrast.
 * ---------------------------------------------------------------------- */

.mkz-shophero--photo {
	position: relative;
	overflow: hidden;
	background: #1d3b2a url( assets/img/mkz-range.jpg ) right center / cover no-repeat;
	padding: 78px 0 72px;
}

.mkz-shophero--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba( 29, 59, 42, .95 ) 0%,
		rgba( 29, 59, 42, .90 ) 38%,
		rgba( 29, 59, 42, .55 ) 68%,
		rgba( 29, 59, 42, .30 ) 100%
	);
}

.mkz-shophero--photo .mkz-wrap {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.mkz-shophero--photo .mkz-eyebrow {
	color: #c8a35a;
	background: rgba( 255, 255, 255, .08 );
}

.mkz-shophero--photo .mkz-shophero__title,
.mkz-shophero--photo .mkz-shophero__lead {
	color: #f7f3e8;
}

@media ( max-width: 782px ) {
	.mkz-shophero--photo { padding: 54px 0 50px; }
	.mkz-shophero--photo::before {
		background: linear-gradient( 180deg, rgba( 29, 59, 42, .93 ) 0%, rgba( 29, 59, 42, .80 ) 100% );
	}
}

/* Nutrition artwork under the figures. */
.mkz-nutrition__art {
	margin: 34px auto 0;
	max-width: 560px;
}

.mkz-nutrition__art img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
	box-shadow: 0 16px 40px rgba( 29, 59, 42, .14 );
}

/* Shop page film. */
.mkz-shopfilm {
	padding: 40px 0 8px;
}

/*
 * This section is injected into the WooCommerce archive, where .mkz-wrap
 * sits inside a flex parent and collapses to zero width. Give it its own
 * sizing rather than depending on the homepage wrapper behaving the same
 * way in a different template.
 */
.mkz-shopfilm .mkz-wrap {
	display: block;
	width: 100%;
	max-width: 940px;
	margin-inline: auto;
	padding-inline: 20px;
	flex: 1 1 100%;
}

.mkz-shopfilm__frame {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #1d3b2a;
	box-shadow: 0 18px 44px rgba( 29, 59, 42, .18 );
}

.mkz-shopfilm__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mkz-shopfilm__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: none;
	display: block;
}

.mkz-shopfilm__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mkz-shopfilm__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba( 200, 163, 90, .95 );
	color: #1d3b2a;
	font-size: 26px;
	line-height: 74px;
	text-align: center;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, .3 );
	transition: transform .15s ease;
}

.mkz-shopfilm__play:hover .mkz-shopfilm__icon {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.mkz-shopfilm__cap {
	text-align: center;
	margin: 12px 0 0;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b7168;
}

/* Logo: scale by height and keep the artwork's own proportions, so a wide
   or square logo both sit correctly instead of being squashed to a box. */
.mkz-branding__logo {
	height: 52px;
	width: auto;
	max-width: 132px;
	object-fit: contain;
	display: block;
}

@media ( max-width: 782px ) {
	.mkz-branding__logo { height: 42px; max-width: 104px; }
}