body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account {
  --wp--preset--color--base: var(--color-paper);
  --wp--preset--color--contrast: var(--color-ink);
  --wp--preset--font-family--manrope: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: 0;
}

body.woocommerce-checkout a,
body.woocommerce-cart a,
body.woocommerce-account a {
  color: var(--color-forest);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.woocommerce-checkout .wp-block-template-part,
body.woocommerce-cart .wp-block-template-part,
body.woocommerce-account .wp-block-template-part {
  display: none !important;
}

body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-account .wp-site-blocks {
  background: var(--color-cream);
  min-height: 100svh;
  padding: 0;
}

.mn-site-header {
  inset: 0 0 auto;
  padding-top: 1.5rem;
  position: fixed;
  z-index: 50;
}

.mn-site-header__mobile-bg {
  display: none;
}

.mn-site-header__rail {
  margin-inline: auto;
  max-width: var(--mn-shell-wide);
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  position: relative;
  width: 100%;
}

.mn-site-header__capsule {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.46));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 28px 54px -14px rgba(18, 26, 18, 0.36), 0 12px 24px -8px rgba(18, 26, 18, 0.2), 0 2px 5px rgba(18, 26, 18, 0.1), inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -8px 18px -5px rgba(20, 26, 20, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  height: 72px;
  margin-inline: auto;
  max-width: 100%;
  overflow: visible;
  position: relative;
  transform: translateZ(0);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.mn-site-header__capsule::before {
  content: "";
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  border-radius: inherit;
}

.mn-site-header__highlight {
  pointer-events: none;
  position: absolute;
}

.mn-site-header__highlight--top {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.3) 16%, rgba(255, 255, 255, 0) 46%);
  border-radius: 999px;
  inset: 0;
}

.mn-site-header__highlight--line {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95) 22%, rgba(255, 255, 255, 0.95) 78%, transparent);
  height: 1px;
  inset-inline: 2.5rem;
  top: 0;
}

.mn-site-header__highlight--left,
.mn-site-header__highlight--right {
  bottom: 0.375rem;
  top: 0.375rem;
  width: 7rem;
}

.mn-site-header__highlight--left {
  background: radial-gradient(130% 90% at 0% 30%, rgba(255, 255, 255, 0.55), transparent 72%);
  border-radius: 999px 0 0 999px;
  left: 0.25rem;
}

.mn-site-header__highlight--right {
  background: radial-gradient(130% 90% at 100% 30%, rgba(255, 255, 255, 0.5), transparent 72%);
  border-radius: 0 999px 999px 0;
  right: 0.25rem;
}

.mn-site-header__highlight--bottom {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.22), transparent);
  border-radius: 999px;
  bottom: 0;
  height: 40%;
  inset-inline: 3rem;
}

.mn-site-header__row {
  align-items: center;
  display: flex;
  height: 100%;
  padding-inline: 2.25rem;
  position: relative;
  z-index: 2;
}

.mn-site-header__nav {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 2rem;
}

.mn-roll-link,
.mn-footer-roll-link {
  color: var(--color-ink);
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  position: relative;
  text-decoration: none !important;
  vertical-align: top;
}

.mn-roll-link__a,
.mn-roll-link__b,
.mn-footer-roll-link__a,
.mn-footer-roll-link__b {
  display: block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.mn-roll-link__b,
.mn-footer-roll-link__b {
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
}

.mn-roll-link:hover,
.mn-roll-link:focus-visible {
  color: var(--color-forest);
}

.mn-roll-link:hover .mn-roll-link__a,
.mn-roll-link:focus-visible .mn-roll-link__a,
.mn-roll-link:hover .mn-roll-link__b,
.mn-roll-link:focus-visible .mn-roll-link__b,
.mn-footer-roll-link:hover .mn-footer-roll-link__a,
.mn-footer-roll-link:focus-visible .mn-footer-roll-link__a,
.mn-footer-roll-link:hover .mn-footer-roll-link__b,
.mn-footer-roll-link:focus-visible .mn-footer-roll-link__b {
  transform: translateY(-100%);
}

.mn-site-header__logo {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

.mn-site-header__logo img {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(7, 26, 16, 0.12));
  height: 36px;
  transition: transform 0.5s ease;
  width: auto;
}

.mn-site-header__logo:hover img,
.mn-site-header__logo:focus-visible img {
  transform: scale(1.03);
}

.mn-site-header__actions {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 0.125rem;
  justify-content: flex-end;
}

.mn-site-header__icon-link {
  align-items: center;
  border-radius: 999px;
  color: var(--color-ink) !important;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
  position: relative;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.mn-site-header__icon-link svg {
  stroke-width: 1.5;
  transition: stroke-width 0.3s ease, transform 0.3s ease;
}

.mn-site-header__icon-link:hover,
.mn-site-header__icon-link:focus-visible {
  color: var(--color-forest) !important;
}

.mn-site-header__icon-link:hover svg,
.mn-site-header__icon-link:focus-visible svg {
  stroke-width: 2.1;
  transform: scale(1.1);
}

.mn-site-header__cart-count {
  align-items: center;
  background: var(--color-forest);
  border-radius: 999px;
  color: var(--color-paper);
  display: flex;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  height: 1.125rem;
  justify-content: center;
  min-width: 1.125rem;
  padding-inline: 0.25rem;
  position: absolute;
  right: 0;
  top: 0;
}

.mn-site-header__menu {
  display: none;
  flex: 1 1 0;
  position: relative;
}

.mn-site-header__menu summary {
  align-items: center;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.2em;
  list-style: none;
  min-height: 44px;
  text-transform: uppercase;
}

.mn-site-header__menu summary::-webkit-details-marker {
  display: none;
}

.mn-site-header__menu-icon {
  display: grid;
  gap: 5px;
  width: 18px;
}

.mn-site-header__menu-icon span {
  background: var(--color-ink);
  border-radius: 999px;
  display: block;
  height: 1px;
}

.mn-site-header__menu-icon span:nth-child(2) {
  width: 11px;
}

.mn-site-header__menu-panel {
  background: rgba(255, 254, 250, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1.5rem;
  box-shadow: 0 22px 50px -18px rgba(18, 26, 18, 0.28);
  display: grid;
  gap: 0.25rem;
  left: 0;
  min-width: min(82vw, 320px);
  padding: 0.8rem;
  position: absolute;
  top: calc(100% + 1rem);
}

.mn-site-header__menu-panel a {
  border-radius: 999px;
  color: var(--color-ink) !important;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  min-height: 44px;
  padding: 0.85rem 1rem;
  text-decoration: none !important;
}

.mn-site-header__menu-panel a:hover,
.mn-site-header__menu-panel a:focus-visible {
  background: rgba(0, 66, 37, 0.08);
  color: var(--color-forest) !important;
}

.mn-site-header__tagline {
  align-items: center;
  color: var(--color-forest);
  display: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  gap: 0.375rem;
  justify-content: center;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.25rem 0.5rem;
  position: relative;
}

.mn-site-header__tagline svg {
  height: 0.875rem;
  width: 0.875rem;
}

.mn-site-header__tagline span:last-child {
  color: rgba(26, 28, 24, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mn-nutra-checkout-nav {
  background: var(--color-cream);
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 0;
}

.mn-nutra-checkout-nav__inner {
  align-items: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--mn-radius-button);
  box-shadow: 0 18px 44px -22px rgba(18, 26, 18, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 auto;
  max-width: var(--mn-shell-wide);
  min-height: 4.5rem;
  padding: 0.75rem clamp(1rem, 2vw, 2.25rem);
}

.mn-nutra-checkout-nav__brand {
  align-items: center;
  display: inline-flex;
  justify-self: start;
  min-height: 2.75rem;
  text-decoration: none;
}

.mn-nutra-checkout-nav__brand img {
  display: block;
  height: 2rem;
  width: auto;
}

.mn-nutra-checkout-nav__links {
  align-items: center;
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
  justify-content: center;
}

.mn-nutra-checkout-nav__links a,
.mn-nutra-checkout-nav__secure {
  align-items: center;
  border-radius: var(--mn-radius-button);
  color: var(--color-ink);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mn-nutra-checkout-nav__links a:hover,
.mn-nutra-checkout-nav__links a:focus-visible {
  color: var(--color-forest);
}

.mn-nutra-checkout-nav__secure {
  color: rgba(26, 28, 24, 0.48);
  justify-self: end;
  position: relative;
  text-transform: uppercase;
}

.mn-nutra-checkout-nav__secure::before {
  border: 1.5px solid currentColor;
  border-radius: 0.25rem;
  content: "";
  height: 0.85rem;
  margin-right: 0.5rem;
  position: relative;
  width: 0.7rem;
}

.mn-nutra-checkout-nav__secure::after {
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  content: "";
  height: 0.42rem;
  left: 1.02rem;
  margin: 0;
  position: absolute;
  top: 0.78rem;
  width: 0.5rem;
}

body.woocommerce-checkout .wp-site-blocks {
  background: var(--color-cream);
  min-height: 100svh;
  padding: 0;
}

body.woocommerce-checkout .wp-block-template-part {
  background: transparent;
  margin: 0;
  padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem) 0;
}

body.woocommerce-checkout .wp-block-template-part > .wp-block-group,
body.woocommerce-checkout .wp-block-template-part .wp-block-group-is-layout-constrained {
  align-items: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--mn-radius-button);
  box-shadow: 0 18px 44px -22px rgba(18, 26, 18, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: clamp(72rem, 86vw, 120rem);
  min-height: 4.5rem;
  padding: 0.85rem clamp(1.25rem, 2vw, 2.25rem);
}

body.woocommerce-checkout .wp-block-site-title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1.1rem + 0.55vw, 2rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

body.woocommerce-checkout .wp-block-site-title a {
  color: var(--color-forest);
  text-decoration: none;
}

body.woocommerce-checkout .wp-block-site-title a::after {
  color: rgba(26, 28, 24, 0.42);
  content: " / Secure Checkout";
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.woocommerce-checkout main.wp-block-group,
body.woocommerce-checkout main {
  margin: 0;
  padding: clamp(9rem, 10vw, 10.5rem) clamp(1.25rem, 4vw, 3.5rem) 4rem;
}

body.woocommerce-cart main,
body.woocommerce-account main {
  padding-top: clamp(9rem, 10vw, 10.5rem);
}

body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce {
  margin-inline: auto;
  max-width: var(--mn-checkout-max);
}

body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.wp-block-post-title {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 1.7rem + 2.2vw, 4.75rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.03;
  margin: 0 0 2rem;
}

body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 0 0 1rem;
}

body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .wc-block-components-notice-banner {
  background: var(--color-paper);
  border: 1px solid rgba(0, 66, 37, 0.16);
  border-radius: var(--mn-radius-panel);
  box-shadow: 0 14px 40px rgba(26, 28, 24, 0.05);
  color: rgba(26, 28, 24, 0.72);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
}

body.woocommerce-checkout .woocommerce-error {
  border-color: rgba(183, 0, 33, 0.2);
  color: #8a0019;
}

body.woocommerce-checkout form.checkout {
  align-items: start;
  display: grid;
  /* column-gap separates the details column from the order summary; row-gap is 0
     so the "Your order" heading + review read as ONE continuous card in col 2. */
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: 0;
  grid-template-columns: minmax(0, 720px) minmax(320px, 420px);
  /* Two rows: heading (min-content) then review fills the rest. #customer_details
     spans BOTH rows in column 1, so its (tall) height can never push the review
     into a row BELOW it — that auto-placement quirk is what dropped "Your order"
     to the very bottom. Keeps Billing details + Your order side-by-side, tops
     aligned, at every width >900px. */
  grid-template-rows: min-content 1fr;
  justify-content: center;
}

body.woocommerce-checkout #customer_details {
  display: grid;
  gap: 1.25rem;
  grid-column: 1;
  grid-row: 1 / 3;
  grid-template-columns: 1fr;
  min-width: 0;
  width: 100%;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading {
  background: var(--color-paper);
  border: 1px solid rgba(26, 28, 24, 0.05);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  float: none !important;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  width: auto !important;
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
  grid-column: 2;
}

body.woocommerce-checkout #order_review_heading {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  grid-row: 1;
  line-height: 1.2;
  padding-bottom: 0.75rem;
}

body.woocommerce-checkout #order_review {
  align-self: start;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  grid-row: 2;
  position: sticky;
  top: 1.5rem;
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #ship-to-different-address {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 1.2rem;
}

body.woocommerce-checkout .form-row {
  margin: 0 0 1rem;
}

body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
  float: none;
  width: 100%;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.woocommerce-checkout .form-row-wide,
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #billing_email_field,
body.woocommerce-checkout #shipping_country_field,
body.woocommerce-checkout #shipping_address_1_field,
body.woocommerce-checkout #shipping_address_2_field {
  grid-column: 1 / -1;
}

body.woocommerce-checkout label {
  color: rgba(26, 28, 24, 0.58);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-body-sm);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 0.45rem;
}

body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single,
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
  background: #ecebe4 !important;
  background-color: #ecebe4 !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  font-weight: 400 !important;
  min-height: 3.05rem !important;
  outline: none !important;
  padding: 0.78rem 1rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 100% !important;
}

body.woocommerce-checkout textarea.input-text {
  min-height: 6rem;
}

body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea.input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus {
  background: #f7f6ef !important;
  background-color: #f7f6ef !important;
  border-color: rgba(0, 66, 37, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.12) !important;
}

/* =========================================================================
   US-only premium address fields (billing + shipping, mobile + web).
   ========================================================================= */

/* Hide the redundant country picker. The store sells only to the US (the
   country <select> has a single option), so the State dropdown is the real
   location selector. The hidden select still posts billing_country=US /
   shipping_country=US, so WooCommerce shipping + tax are unaffected. */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field {
  display: none !important;
}

/* Phone verification (MOCK), laid out INLINE beside the phone input. The input
   wrapper becomes a flex row: [ phone input ][ Send code / ✓ Verified ]. The
   6-digit code panel + status sit just under the field. */
body.woocommerce-checkout .mn-phonewrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
body.woocommerce-checkout .mn-phonewrap input.input-text {
  flex: 1 1 11rem;
  min-width: 0;
  width: auto !important;   /* base rule forces 100%; let it share the row */
}
body.woocommerce-checkout .mn-otp__send {
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.55rem 1.2rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
body.woocommerce-checkout .mn-phonewrap .mn-otp__send { align-self: stretch; flex: 0 0 auto; }
body.woocommerce-checkout .mn-otp__send {
  background: transparent;
  border: 1px solid rgba(0, 66, 37, 0.4);
  color: var(--color-forest);
}
body.woocommerce-checkout .mn-otp__send:hover:not(:disabled) { background: rgba(0, 66, 37, 0.06); }
body.woocommerce-checkout .mn-otp__send:disabled { cursor: not-allowed; opacity: 0.45; }
body.woocommerce-checkout .mn-otp__send[hidden] { display: none !important; }
body.woocommerce-checkout .mn-otp__badge {
  align-items: center;
  align-self: center;
  background: rgba(0, 66, 37, 0.1);
  border-radius: 999px;
  color: var(--color-forest);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  gap: 0.35rem;
  letter-spacing: 0.01em;
  padding: 0.45rem 0.95rem;
  white-space: nowrap;
}
body.woocommerce-checkout .mn-otp__badge[hidden] { display: none !important; }
body.woocommerce-checkout .mn-otp__badge::before { content: "✓"; font-weight: 700; }
/* subtle green confirm on the phone field itself once verified */
body.woocommerce-checkout .mn-verified .woocommerce-input-wrapper input.input-text {
  border-color: rgba(0, 66, 37, 0.45) !important;
}
body.woocommerce-checkout .mn-otp { margin-top: 0.55rem; }
body.woocommerce-checkout .mn-otp__panel {
  animation: mn-otp-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* The explicit display below outranks the UA [hidden] rule, so re-assert it —
   otherwise the code panel shows on load and never hides after verifying. */
body.woocommerce-checkout .mn-otp__panel[hidden] { display: none !important; }
@keyframes mn-otp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Refined 6-cell code input (replaces the old single oversized box). */
body.woocommerce-checkout .mn-otp__cells {
  display: flex;
  gap: 0.45rem;
}
body.woocommerce-checkout .mn-otp__cell {
  -moz-appearance: textfield;
  background: #ecebe4;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  color: var(--color-ink);
  flex: 0 0 auto;
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 600;
  height: 3rem;
  line-height: 1;
  padding: 0;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  width: 2.6rem;
}
body.woocommerce-checkout .mn-otp__cell::placeholder { color: rgba(26, 28, 24, 0.28); font-weight: 500; }
body.woocommerce-checkout .mn-otp__cell:focus {
  background: #f7f6ef;
  border-color: rgba(0, 66, 37, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.12);
  outline: none;
}
body.woocommerce-checkout .mn-otp__cells.is-err { animation: mn-otp-shake 0.32s ease; }
body.woocommerce-checkout .mn-otp__cells.is-err .mn-otp__cell { border-color: rgba(183, 0, 33, 0.55); }
@keyframes mn-otp-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout .mn-otp__panel,
  body.woocommerce-checkout .mn-otp__cells.is-err { animation: none; }
}
body.woocommerce-checkout .mn-otp__status {
  color: rgba(26, 28, 24, 0.55);
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  margin-top: 0.4rem;
}
body.woocommerce-checkout .mn-otp__status:empty { margin-top: 0; }
body.woocommerce-checkout .mn-otp__status.is-err { color: #b70021; }
body.woocommerce-checkout .mn-otp__status.is-ok { color: var(--color-forest); }

/* Email "@" inline error (set by JS on the email field's row). */
body.woocommerce-checkout .mn-invalid input.input-text {
  background: rgba(183, 0, 33, 0.04) !important;
  border-color: rgba(183, 0, 33, 0.55) !important;
}
body.woocommerce-checkout .mn-invalid::after {
  color: #b70021;
  content: "Please enter a valid email address (must include @).";
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  margin-top: 0.35rem;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border-collapse: collapse;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  margin: 0;
  width: 100%;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0.9rem 0;
  text-align: left;
  vertical-align: top;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child {
  text-align: right;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  color: rgba(26, 28, 24, 0.44);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

body.woocommerce-checkout .variation {
  color: rgba(26, 28, 24, 0.55);
  display: block;
  font-size: var(--text-meta);
  margin: 0.35rem 0 0;
}

body.woocommerce-checkout .variation dt,
body.woocommerce-checkout .variation dd,
body.woocommerce-checkout .variation p {
  display: inline;
  margin: 0;
}

body.woocommerce-checkout .mn-nutra-checkout-notice {
  background: #faf9f4;
  border: 1px solid rgba(0, 66, 37, 0.12);
  border-radius: 1rem;
  color: rgba(26, 28, 24, 0.66);
  font-size: var(--text-meta);
  line-height: 1.55;
  margin: 1.1rem 0;
  padding: 1rem;
}

body.woocommerce-checkout .mn-nutra-checkout-notice p {
  margin: 0;
}

body.woocommerce-checkout .mn-nutra-checkout-notice p + p {
  margin-top: 0.55rem;
}

body.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin: 1rem 0 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout .wc_payment_method,
body.woocommerce-checkout .payment_method_stripe,
body.woocommerce-checkout .payment_method_woocommerce_payments {
  background: #faf9f4;
  border: 1px solid rgba(26, 28, 24, 0.08);
  border-radius: 1rem;
  color: rgba(26, 28, 24, 0.72);
  font-size: var(--text-body-sm);
  margin: 0.75rem 0;
  padding: 1rem;
}

body.woocommerce-checkout .wc-stripe-elements-field,
body.woocommerce-checkout .wc-stripe-iban-element-field,
body.woocommerce-checkout .StripeElement,
body.woocommerce-checkout iframe[name^="__privateStripeFrame"] {
  border-radius: 0.75rem !important;
}

body.woocommerce-checkout .form-row.place-order {
  margin: 1rem 0 0;
}

body.woocommerce-checkout #place_order,
body.woocommerce-checkout button.button,
body.woocommerce-checkout .button.alt,
body.woocommerce-checkout .wp-element-button,
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  align-items: center;
  background: var(--color-forest) !important;
  background-color: var(--color-forest) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--mn-radius-button) !important;
  box-shadow: var(--mn-shadow-button) !important;
  color: var(--color-paper) !important;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.08em;
  line-height: 1;
  min-height: 3.45rem;
  padding: 1rem 1.65rem !important;
  text-transform: uppercase;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button.button:hover,
body.woocommerce-checkout .button.alt:hover,
body.woocommerce-checkout .wp-element-button:hover,
body.woocommerce-checkout .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: var(--color-forest-700) !important;
  background-color: var(--color-forest-700) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 66, 37, 0.6) !important;
  transform: translateY(-1px);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #mn_nutra_age_us_policy_consent_field {
  color: rgba(26, 28, 24, 0.58);
  font-size: var(--text-meta);
  line-height: 1.55;
}

body.woocommerce-checkout #mn_nutra_age_us_policy_consent_field label {
  display: flex;
  font-family: var(--font-body);
  font-style: normal;
  gap: 0.65rem;
  line-height: 1.55;
}

body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"] {
  accent-color: var(--color-forest);
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 0 0.75rem;
}

body.woocommerce-checkout .wp-block-template-part + main::before {
  color: rgba(26, 28, 24, 0.45);
  content: "Secure payment is completed through checkout.mnnutra.com";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  margin: 0 auto 1rem;
  max-width: var(--mn-checkout-max);
  text-transform: uppercase;
}

.mn-nutra-checkout-footer {
  background: var(--color-forest-900);
  color: var(--color-paper);
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3.5rem) 2rem;
}

.mn-nutra-checkout-footer__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr) minmax(220px, 0.75fr);
  margin-inline: auto;
  max-width: var(--mn-shell-wide);
}

.mn-nutra-checkout-footer__brand img {
  display: block;
  height: 1.85rem;
  width: auto;
}

.mn-nutra-checkout-footer p {
  color: rgba(255, 254, 250, 0.58);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  margin: 0;
  max-width: 34rem;
}

.mn-nutra-checkout-footer__brand p {
  margin-top: 1.25rem;
}

.mn-nutra-checkout-footer__support h2 {
  color: var(--color-paper);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.mn-nutra-checkout-footer__support p + p {
  margin-top: 0.6rem;
}

.mn-nutra-checkout-footer a {
  color: rgba(255, 254, 250, 0.72) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mn-nutra-checkout-footer a:hover,
.mn-nutra-checkout-footer a:focus-visible {
  color: var(--color-paper) !important;
}

.mn-nutra-checkout-footer__links {
  align-content: start;
  display: grid;
  gap: 0.85rem;
}

.mn-nutra-checkout-footer__links a {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  min-height: 2rem;
}

.mn-nutra-checkout-footer__legal {
  margin: clamp(2rem, 4vw, 3rem) auto 0 !important;
  max-width: 64rem !important;
  text-align: center;
}

.mn-site-footer {
  background: #103c23;
  color: white;
}

.mn-site-footer__inner {
  margin-inline: auto;
  max-width: var(--mn-shell-wide);
  padding: 4rem 2rem;
  width: 100%;
}

.mn-site-footer__grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
}

.mn-site-footer__brand img {
  display: block;
  height: 1.75rem;
  width: auto;
}

.mn-site-footer__brand > p {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 1.5rem 0 0;
  max-width: 20rem;
}

.mn-site-footer h3 {
  color: white;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
}

.mn-site-footer h3.is-underlined {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.mn-site-footer__brand > h3 {
  font-style: italic;
  margin-top: 2.25rem;
}

.mn-site-footer__help {
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.875rem;
  gap: 0.75rem;
  line-height: 1.65;
  margin-top: 1rem;
}

.mn-site-footer__help p {
  margin: 0;
}

.mn-site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.mn-footer-roll-link {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}

.mn-footer-roll-link:hover,
.mn-footer-roll-link:focus-visible {
  color: white !important;
}

.mn-site-footer__stack {
  margin-top: 2.5rem;
}

.mn-site-footer__mobile-cols {
  display: none;
}

.mn-site-footer__policy-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
  margin-top: 1.25rem;
}

.mn-site-footer__policy-grid ul {
  margin-top: 0;
}

.mn-site-footer__bottom {
  margin-top: 4rem;
  text-align: center;
}

.mn-site-footer__bottom p {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 48rem;
}

.mn-site-footer__bottom p + p {
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

@media (max-width: 1023px) {
  .mn-site-footer__inner {
    padding: 4rem 2rem;
  }

  .mn-site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 1.5rem;
  }

  .mn-site-footer__brand,
  .mn-site-footer__policies {
    grid-column: 1 / -1;
  }

  .mn-site-footer__desktop-col {
    display: none;
  }

  .mn-site-footer__mobile-cols {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  .mn-site-footer__policies h3 {
    text-align: center;
  }

  .mn-site-footer__policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  body.woocommerce-checkout main.wp-block-group,
  body.woocommerce-checkout main {
    padding-top: 8.75rem;
  }

  .mn-nutra-checkout-nav__inner {
    grid-template-columns: auto 1fr auto;
  }

  .mn-nutra-checkout-nav__links {
    display: none;
  }

  .mn-nutra-checkout-footer__inner {
    grid-template-columns: 1fr;
  }

  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    /* Undo the desktop two-row span so the three cards flow stacked again. */
    grid-template-rows: auto;
    row-gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout #order_review {
    grid-column: auto;
    grid-row: auto;
  }

  body.woocommerce-checkout #order_review {
    position: static;
  }
}

@media (max-width: 767px) {
  .mn-site-header {
    background: var(--color-cream);
    padding-top: 1.5rem;
  }

  .mn-site-header__mobile-bg {
    background: var(--color-cream);
    display: block;
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  .mn-site-header__rail {
    padding-inline: 1.25rem;
  }

  .mn-site-header__capsule {
    height: 52px;
    box-shadow: 0 10px 24px -12px rgba(18, 26, 18, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }

  .mn-site-header__row {
    padding-inline: 1rem;
  }

  .mn-site-header__nav {
    display: none;
  }

  .mn-site-header__menu {
    display: block;
  }

  .mn-site-header__logo img {
    height: 26px;
  }

  .mn-site-header__actions {
    gap: 0;
  }

  .mn-site-header__icon-link {
    min-height: 40px;
    min-width: 40px;
    padding: 0.45rem;
  }

  .mn-site-header__tagline {
    display: flex;
  }
}

@media (max-width: 640px) {
  .mn-nutra-checkout-nav {
    padding: 1rem 1rem 0;
  }

  .mn-nutra-checkout-nav__inner {
    min-height: 3.75rem;
    padding: 0.55rem 0.9rem;
  }

  .mn-nutra-checkout-nav__brand img {
    height: 1.65rem;
  }

  .mn-nutra-checkout-nav__secure {
    font-size: 0;
    min-width: 2.75rem;
    padding-inline: 0.75rem;
  }

  .mn-nutra-checkout-nav__secure::before {
    margin-right: 0;
  }

  .mn-nutra-checkout-nav__secure::after {
    left: 1.02rem;
    top: 0.78rem;
  }

  body.woocommerce-checkout main.wp-block-group,
  body.woocommerce-checkout main {
    padding-inline: 1rem;
    padding-top: 8.25rem;
  }

  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout #order_review_heading {
    border-radius: 1.35rem;
    padding: 1.25rem;
  }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .mn-site-footer__inner {
    padding: 4rem 2rem;
  }

  .mn-site-footer__grid,
  .mn-site-footer__mobile-cols,
  .mn-site-footer__policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mn-site-footer h3 {
    font-size: 1.5rem;
  }

  .mn-footer-roll-link {
    font-size: 0.9375rem;
  }
}

/* =========================================================================
   MN Nutra — MOBILE-ONLY premium checkout (<=767px). Appended LAST so equal-
   specificity rules win by source order. NOTHING here is emitted >=768px, so
   desktop/tablet render byte-for-byte unchanged. Three moves: tighten vertical
   rhythm, lift Total + Place order above the legal fine print, and dock the
   real place-order row (button + its sibling consent) as a frosted sticky bar.
   No DOM is moved/proxied — WooCommerce's submit + AJAX re-render are untouched
   (the rules auto-re-match after #order_review is replaced on updated_checkout).
   ========================================================================= */

/* Single source of truth so the sticky bar's negative margins can never drift
   from the card padding. Defined globally but ONLY consumed inside the <=767px
   block below, so it has zero effect on desktop/tablet. */
body.woocommerce-checkout {
  --mn-mcard-pad-x: 1.15rem;
  --mn-mcard-pad-y: 1.1rem;
}

@media (max-width: 767px) {

  /* (1) Vertical rhythm — stop the "stretched desktop" feel. */
  body.woocommerce-checkout #customer_details { gap: 0.85rem; }

  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout #order_review {
    padding: var(--mn-mcard-pad-y) var(--mn-mcard-pad-x);
    border-radius: 1.35rem;
  }

  body.woocommerce-checkout #order_review_heading {
    font-size: 1.2rem;
    padding: 1.1rem 1.15rem 0.6rem;
  }

  body.woocommerce-checkout .woocommerce-billing-fields h3,
  body.woocommerce-checkout .woocommerce-shipping-fields h3,
  body.woocommerce-checkout #ship-to-different-address {
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
  }

  body.woocommerce-checkout .form-row { margin-bottom: 0.7rem; }
  body.woocommerce-checkout label     { margin-bottom: 0.3rem; }

  /* Base rule is `min-height:3.05rem !important` — must use !important to win.
     2.85rem (~45.6px) stays above the 44px accessible tap-target floor. */
  body.woocommerce-checkout input.input-text,
  body.woocommerce-checkout textarea.input-text,
  body.woocommerce-checkout select {
    min-height: 2.85rem !important;
    padding: 0.62rem 0.85rem !important;
  }

  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 0.7rem 0;
  }

  /* (2) Reorder inside the order-review card: totals -> pay -> fine print.
     All three are DIRECT siblings of #order_review, so flex `order` is valid. */
  body.woocommerce-checkout #order_review { display: flex; flex-direction: column; }
  body.woocommerce-checkout #order_review > .woocommerce-checkout-review-order-table { order: 1; }
  body.woocommerce-checkout #order_review > #payment { order: 2; }
  body.woocommerce-checkout #order_review > .mn-nutra-checkout-notice { order: 3; margin-top: 1rem; }

  /* (3) Frosted sticky place-order row. The REAL #place_order AND its sibling
     consent checkbox both live inside .form-row.place-order, so they ride along
     together — WooCommerce's submit wiring stays 100% untouched. The negative
     margins reuse the SAME vars as the card padding so the bar spans edge-to-edge. */
  body.woocommerce-checkout .form-row.place-order {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 1rem calc(-1 * var(--mn-mcard-pad-x)) calc(-1 * var(--mn-mcard-pad-y)) !important;
    padding: 0.85rem var(--mn-mcard-pad-x) calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 246, 239, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(26, 28, 24, 0.08);
    box-shadow: 0 -8px 24px -12px rgba(26, 28, 24, 0.18);
  }
  body.woocommerce-checkout .form-row.place-order #place_order { margin-top: 0.65rem; }

  /* (3b) Express-gateway bow-out: if a gateway adds has-custom-place-order-button
     (which ships #place_order{display:none!important}), don't dock a row holding
     a hidden button — revert to static. */
  body.woocommerce-checkout form.has-custom-place-order-button .form-row.place-order {
    position: static;
    margin: 1rem 0 0 !important;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
  }

  /* (4) Top "Order total" pill — inserted by the mobile-gated JS (read-only
     mirror). Inert until present; safe to keep even if the JS is absent. */
  body.woocommerce-checkout .mn-msum-pill {
    align-items: center;
    background: var(--color-paper, #f7f6ef);
    border: 1px solid rgba(26, 28, 24, 0.06);
    border-radius: 1.35rem;
    box-shadow: var(--mn-shadow-card, 0 1px 2px rgba(26, 28, 24, 0.06));
    display: flex;
    font-family: var(--font-display, system-ui);
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding: 0.9rem 1.15rem;
  }
  body.woocommerce-checkout .mn-msum-pill__label {
    color: var(--color-forest, #1f4d2e);
    font-size: 0.9rem;
    font-weight: 600;
  }
  body.woocommerce-checkout .mn-msum-pill__total {
    color: var(--color-ink, #1a1c18);
    font-size: 1.1rem;
    font-weight: 700;
  }
}

/* Graceful fallback where backdrop-filter is unsupported (older Android WebView). */
@media (max-width: 767px) {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.woocommerce-checkout .form-row.place-order { background: #f7f6ef; }
  }
}

/* =========================================================================
   CART PAGE — premium, built from scratch to match the storefront + checkout
   design language (paper cards, forest green, serif headings, soft shadows).

   Layout: the classic shortcode cart renders <form.woocommerce-cart-form> and
   <.cart-collaterals> as VERTICAL siblings inside .woocommerce. We turn
   .woocommerce into a 2-column grid — line items (left) + a sticky order
   summary (right) — mirroring the checkout's details/summary split. The grid
   is gated with :has(form.woocommerce-cart-form) so the EMPTY-cart state is
   left untouched. The injected site header is position:fixed, so it is out of
   flow and never participates in the grid. Collapses to one column ≤900px and
   to compact item cards ≤600px. Scoped entirely to body.woocommerce-cart.
   ========================================================================= */

/* ---- page frame + title (aligns the H1 with the content columns) -------- */
body.woocommerce-cart main {
  padding: clamp(9rem, 10vw, 10.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem);
}
body.woocommerce-cart h1.wp-block-post-title,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .wc-block-store-notices {
  margin-inline: auto;
  max-width: var(--mn-checkout-max);
  width: 100%;
}
body.woocommerce-cart h1.wp-block-post-title {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 1.7rem + 2.2vw, 4.75rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.03;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
/* stray empty trailing paragraph the block template leaves after the cart */
body.woocommerce-cart .entry-content + p:empty,
body.woocommerce-cart .wp-block-post-content > p:empty { display: none; }

/* ---- store notices (top success/error banners) -------------------------- */
body.woocommerce-cart .wc-block-store-notices { margin-bottom: 1.25rem; }
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
  background: var(--color-paper);
  border: 1px solid rgba(0, 66, 37, 0.16);
  border-radius: var(--mn-radius-panel);
  box-shadow: 0 14px 40px rgba(26, 28, 24, 0.05);
  color: rgba(26, 28, 24, 0.74);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wc-block-components-notice-banner.is-error {
  border-color: rgba(183, 0, 33, 0.22);
  color: #8a0019;
}
body.woocommerce-cart .wc-block-components-notice-banner a.button,
body.woocommerce-cart .wc-block-components-notice-banner .wc-forward {
  background: transparent !important;
  border: 1px solid var(--color-forest) !important;
  border-radius: var(--mn-radius-button) !important;
  box-shadow: none !important;
  color: var(--color-forest) !important;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  padding: 0.4rem 1.1rem !important;
}

/* ---- the two-column grid (only when the cart has items) ----------------- */
body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) {
  align-items: start;
  column-gap: clamp(1.5rem, 2.6vw, 2.75rem);
  display: grid;
  grid-template-areas:
    "notices notices"
    "items   summary";
  grid-template-columns: minmax(0, 1fr) clamp(19.5rem, 30%, 24rem);
  row-gap: 0;
}
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: notices; }
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-cart form.woocommerce-cart-form { grid-area: items; min-width: 0; margin: 0; }
body.woocommerce-cart .cart-collaterals { grid-area: summary; float: none; margin: 0; width: 100%; }
body.woocommerce-cart .cart-collaterals::after { content: none; }

/* ---- line items: break the <table> out into a list of paper cards ------- */
body.woocommerce-cart table.shop_table.cart {
  background: transparent;
  border: 0;
  border-collapse: collapse;
  display: block;
  margin: 0;
  width: 100%;
}
body.woocommerce-cart table.shop_table.cart thead { display: none; }
body.woocommerce-cart table.shop_table.cart tbody {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
body.woocommerce-cart table.shop_table.cart td,
body.woocommerce-cart table.shop_table.cart th { border: 0; }
body.woocommerce-cart table.shop_table.cart td::before { content: none !important; }

body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
  align-items: start;
  background: var(--color-paper);
  border: 1px solid rgba(26, 28, 24, 0.05);
  border-radius: var(--mn-radius-panel);
  box-shadow: 0 12px 36px rgba(26, 28, 24, 0.05);
  column-gap: clamp(0.9rem, 1.6vw, 1.4rem);
  display: grid;
  grid-template-areas:
    "thumb name  total"
    "thumb price total"
    "thumb qty   total";
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  padding: clamp(0.95rem, 1.5vw, 1.35rem);
  position: relative;
}

/* Alignment overrides: WooCommerce's .shop_table_responsive forces tds to
   text-align:right !important (and hides the thumbnail) below 768px — defeat
   that with the full table→row→cell chain so the card reads left-to-right at
   every width. (A bare body.woocommerce-cart td …!important loses the
   specificity race to core, hence the long selector.) */
body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td { text-align: left !important; }
body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal { text-align: right !important; }

body.woocommerce-cart td.product-thumbnail {
  grid-area: thumb;
  align-self: center;
  display: block !important;
  margin: 0;
  padding: 0;
  width: auto;
}
body.woocommerce-cart td.product-thumbnail a { display: block; }
body.woocommerce-cart td.product-thumbnail img {
  background: var(--color-cream);
  border: 1px solid rgba(26, 28, 24, 0.05);
  border-radius: 1rem;
  display: block !important;
  height: clamp(74px, 7vw, 96px) !important;
  max-width: none !important;
  object-fit: contain;
  padding: 7px;
  width: clamp(74px, 7vw, 96px) !important;
}

body.woocommerce-cart td.product-name {
  grid-area: name;
  margin: 0;
  min-width: 0;
  padding: 0;
}
body.woocommerce-cart td.product-name > a {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
}
body.woocommerce-cart td.product-name > a:hover { color: var(--color-forest); }
body.woocommerce-cart dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  margin: 0.35rem 0 0;
}
body.woocommerce-cart dl.variation dt {
  color: rgba(26, 28, 24, 0.5);
  font-size: var(--text-meta);
  font-weight: 500;
  margin: 0;
}
body.woocommerce-cart dl.variation dd { color: rgba(26, 28, 24, 0.5); font-size: var(--text-meta); margin: 0; }
body.woocommerce-cart dl.variation dd p { margin: 0; }

body.woocommerce-cart td.product-price {
  grid-area: price;
  align-self: start;
  color: rgba(26, 28, 24, 0.55);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  margin: 0.3rem 0 0;
  padding: 0;
}
body.woocommerce-cart td.product-price::after {
  color: rgba(26, 28, 24, 0.4);
  content: " each";
  font-size: var(--text-meta);
}

body.woocommerce-cart td.product-quantity {
  grid-area: qty;
  align-self: end;
  margin: 0.6rem 0 0;
  padding: 0;
}
body.woocommerce-cart td.product-quantity .quantity { display: inline-flex; margin: 0; }
body.woocommerce-cart td.product-quantity input.qty {
  -moz-appearance: textfield;
  appearance: textfield;
  background: #ecebe4;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  height: 2.6rem;
  padding: 0 0.5rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 4.6rem;
}
body.woocommerce-cart td.product-quantity input.qty:focus {
  background: #f7f6ef;
  border-color: rgba(0, 66, 37, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.12);
  outline: none;
}
body.woocommerce-cart td.product-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- stepper (JS upgrades .quantity → .mn-qty and injects the buttons; the
   native field is kept for WooCommerce's own update logic, just restyled) */
body.woocommerce-cart .quantity.mn-qty {
  align-items: center;
  background: #ecebe4;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  display: inline-flex;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.woocommerce-cart .quantity.mn-qty:focus-within {
  background: #f7f6ef;
  border-color: rgba(0, 66, 37, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.12);
}
body.woocommerce-cart .mn-qty__btn {
  background: transparent;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.15rem;
  height: 2.6rem;
  line-height: 1;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  width: 2.3rem;
}
body.woocommerce-cart .mn-qty__btn:hover:not(:disabled) {
  background: rgba(0, 66, 37, 0.1);
  color: var(--color-forest);
}
body.woocommerce-cart .mn-qty__btn:disabled { cursor: default; opacity: 0.3; }
body.woocommerce-cart .quantity.mn-qty input.qty {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 2.6rem;
  padding: 0 !important;
  text-align: center;
  width: 2.4rem !important;
}
body.woocommerce-cart .quantity.mn-qty input.qty:focus {
  background: transparent !important;
  box-shadow: none !important;
}

body.woocommerce-cart td.product-subtotal {
  grid-area: total;
  align-self: center;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 600;
  justify-self: end;
  margin: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-cart td.product-remove {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  width: auto;
}
body.woocommerce-cart td.product-remove a.remove {
  align-items: center;
  background: transparent;
  border-radius: 999px;
  color: rgba(26, 28, 24, 0.4) !important;
  display: inline-flex;
  font-size: 1.15rem;
  height: 1.9rem;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
  width: 1.9rem;
}
body.woocommerce-cart td.product-remove a.remove:hover {
  background: rgba(183, 0, 33, 0.08);
  color: #b70021 !important;
}

/* ---- "Update cart" row -------------------------------------------------- */
body.woocommerce-cart table.shop_table.cart tbody > tr:not(.woocommerce-cart-form__cart-item) { display: block; }
body.woocommerce-cart td.actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0.4rem 0.25rem 0;
}
body.woocommerce-cart td.actions .coupon { display: none; } /* coupons disabled on this store */
body.woocommerce-cart button[name="update_cart"] {
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--mn-radius-button);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  margin: 0;
  padding: 0.6rem 1.45rem;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  width: auto;
}
body.woocommerce-cart button[name="update_cart"]:disabled { cursor: default; opacity: 0.4; }
body.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
  border-color: var(--color-forest);
  color: var(--color-forest);
}

/* ---- order summary card (sticky) ---------------------------------------- */
body.woocommerce-cart .cart_totals {
  background: var(--color-paper);
  border: 1px solid rgba(26, 28, 24, 0.05);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  float: none !important;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  position: sticky;
  top: 1.5rem;
  width: 100% !important;
}
body.woocommerce-cart .cart_totals h2 {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem;
}
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals tbody { display: block; width: 100%; }
body.woocommerce-cart .cart_totals table { border: 0; border-collapse: collapse; margin: 0; }
body.woocommerce-cart .cart_totals tr {
  align-items: baseline;
  border-bottom: 1px solid rgba(26, 28, 24, 0.07);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
}
body.woocommerce-cart .cart_totals th {
  color: rgba(26, 28, 24, 0.6);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.woocommerce-cart .cart_totals td { margin: 0; padding: 0; text-align: right; }
body.woocommerce-cart .cart_totals td::before { content: none !important; }
body.woocommerce-cart .cart_totals .amount {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
}
/* shipping row: label on its own line, body wraps below */
body.woocommerce-cart .cart_totals tr.shipping {
  align-items: stretch;
  flex-direction: column;
  gap: 0.4rem;
}
body.woocommerce-cart .cart_totals tr.shipping td {
  color: rgba(26, 28, 24, 0.58);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  text-align: left;
}
body.woocommerce-cart .shipping-calculator-button {
  color: var(--color-forest);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
}
body.woocommerce-cart .shipping-calculator-form { margin-top: 0.6rem; }
body.woocommerce-cart .shipping-calculator-form .input-text,
body.woocommerce-cart .shipping-calculator-form select {
  background: #ecebe4 !important;
  border: 1px solid transparent !important;
  border-radius: 0.65rem !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  margin-bottom: 0.5rem;
  min-height: 2.8rem !important;
  padding: 0.55rem 0.85rem !important;
  width: 100% !important;
}
body.woocommerce-cart .shipping-calculator-form .input-text:focus,
body.woocommerce-cart .shipping-calculator-form select:focus {
  background: #f7f6ef !important;
  border-color: rgba(0, 66, 37, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.12) !important;
  outline: none !important;
}
body.woocommerce-cart .shipping-calculator-form button {
  background: var(--color-forest);
  border: 0;
  border-radius: var(--mn-radius-button);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 600;
  padding: 0.55rem 1.3rem;
}
/* total row: emphasized */
body.woocommerce-cart .cart_totals tr.order-total {
  border-bottom: 0;
  margin-top: 0.3rem;
  padding-top: 1rem;
}
body.woocommerce-cart .cart_totals tr.order-total th {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
}
body.woocommerce-cart .cart_totals tr.order-total .amount {
  color: var(--color-forest);
  font-size: 1.45rem;
}

/* ---- proceed-to-checkout button (was an unstyled black block) ----------- */
body.woocommerce-cart .wc-proceed-to-checkout { margin: 1.3rem 0 0; padding: 0; }
body.woocommerce-cart a.checkout-button {
  align-items: center;
  background: var(--color-forest) !important;
  border: 0 !important;
  border-radius: var(--mn-radius-button) !important;
  box-shadow: var(--mn-shadow-button);
  color: #fff !important;
  display: flex;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  justify-content: center;
  margin: 0;
  min-height: 3.4rem;
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}
body.woocommerce-cart a.checkout-button:hover {
  background: var(--color-forest-700) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 66, 37, 0.6);
  transform: translateY(-1px);
}
body.woocommerce-cart .wc-proceed-to-checkout::after {
  color: rgba(26, 28, 24, 0.45);
  content: "Secure checkout · taxes & shipping calculated next";
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  margin-top: 0.8rem;
  text-align: center;
}

/* ---- empty-cart state (grid is NOT applied here) ------------------------ */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message {
  color: rgba(26, 28, 24, 0.7);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
}
body.woocommerce-cart .return-to-shop { margin-top: 1.5rem; }
body.woocommerce-cart .return-to-shop a.button {
  background: var(--color-forest) !important;
  border-radius: var(--mn-radius-button) !important;
  box-shadow: var(--mn-shadow-button);
  color: #fff !important;
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.85rem 1.8rem !important;
  text-decoration: none;
}

/* empty-cart suggestions (PHP injects .mn-cart-suggest via woocommerce_cart_is_empty) */
body.woocommerce-cart .mn-cart-suggest { margin-top: 2.25rem; max-width: 40rem; }
body.woocommerce-cart .mn-cart-suggest__title {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem;
}
body.woocommerce-cart .mn-cart-suggest__grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.woocommerce-cart .mn-cart-suggest__item {
  align-items: center;
  background: var(--color-paper);
  border: 1px solid rgba(26, 28, 24, 0.05);
  border-radius: var(--mn-radius-panel);
  box-shadow: 0 12px 36px rgba(26, 28, 24, 0.05);
  color: var(--color-ink) !important;
  display: flex;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  text-decoration: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.woocommerce-cart .mn-cart-suggest__item:hover {
  border-color: rgba(0, 66, 37, 0.3);
  box-shadow: 0 16px 40px rgba(26, 28, 24, 0.08);
  transform: translateY(-2px);
}
body.woocommerce-cart .mn-cart-suggest__arrow {
  color: var(--color-forest);
  font-size: 1.1rem;
}
@media (max-width: 600px) {
  body.woocommerce-cart .mn-cart-suggest__grid { grid-template-columns: 1fr; }
}

/* =========================== CART — tablet / mobile ====================== */
@media (max-width: 900px) {
  /* one column: items then summary, summary no longer sticky */
  body.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) {
    grid-template-areas:
      "notices"
      "items"
      "summary";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  body.woocommerce-cart .cart_totals { position: static; top: auto; }
  /* keep the stacked items + summary the SAME width and centered so the
     single-column layout stays symmetric (no wide-card / narrow-summary drift) */
  body.woocommerce-cart form.woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals {
    margin-inline: auto;
    max-width: 38rem;
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* compact item card: thumb + stacked name/price, qty & line total on a row */
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    column-gap: 0.85rem;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty   total";
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0.15rem;
  }
  body.woocommerce-cart td.product-thumbnail img { height: 64px !important; width: 64px !important; }
  body.woocommerce-cart td.product-quantity { align-self: center; margin-top: 0.7rem; }
  body.woocommerce-cart td.product-subtotal { align-self: center; margin-top: 0.7rem; }
  body.woocommerce-cart td.product-remove { right: 0.6rem; top: 0.6rem; }
}