/**
 * MerchFuse v1.16.2.3 — cart drawer + WooCommerce Checkout Blocks responsive repair.
 * Final authority loaded after the optimized route bundle.
 */

/* --------------------------------------------------------------------------
 * SIDE CART BUTTONS
 * Keep labels visible in every pointer/touch state. Historical generic button
 * hover rules could leave a white text fill on the light cart drawer.
 * -------------------------------------------------------------------------- */
html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button,
html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button:visited {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--mf-ink) !important;
  border-radius: 999px !important;
  background: var(--mf-paper-card) !important;
  color: var(--mf-ink) !important;
  -webkit-text-fill-color: var(--mf-ink) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button:not(.checkout):is(:hover, :focus, :focus-visible, :active) {
  border-color: var(--mf-ink) !important;
  background: var(--mf-paper-card-3) !important;
  color: var(--mf-ink) !important;
  -webkit-text-fill-color: var(--mf-ink) !important;
}

html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button.checkout,
html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button.checkout:visited {
  border-color: var(--mf-ink) !important;
  background: var(--mf-ink) !important;
  color: var(--mf-paper-canvas) !important;
  -webkit-text-fill-color: var(--mf-paper-canvas) !important;
}

html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button.checkout:is(:hover, :focus, :focus-visible, :active) {
  border-color: var(--mf-action-bg, #d92b22) !important;
  background: var(--mf-action-bg, #d92b22) !important;
  color: var(--mf-action-ink, #fff) !important;
  -webkit-text-fill-color: var(--mf-action-ink, #fff) !important;
}

@media (hover: none), (pointer: coarse) {
  html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button:not(.checkout):hover {
    background: var(--mf-paper-card) !important;
    color: var(--mf-ink) !important;
    -webkit-text-fill-color: var(--mf-ink) !important;
  }
  html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button.checkout:hover {
    background: var(--mf-ink) !important;
    color: var(--mf-paper-canvas) !important;
    -webkit-text-fill-color: var(--mf-paper-canvas) !important;
  }
}

@media (max-width: 420px) {
  html[data-mf-theme] body.mf-site .mf-cart-drawer__body,
  html[data-mf-theme] body.mf-site .mf-cart-drawer__head,
  html[data-mf-theme] body.mf-site .mf-cart-drawer__support {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons {
    gap: 8px !important;
  }
  html[data-mf-theme] body.mf-site .mf-cart-drawer .woocommerce-mini-cart__buttons > a.button {
    min-height: 48px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
 * CHECKOUT BLOCK WIDTH + GRID
 * WooCommerce Blocks uses .wc-block-components-sidebar-layout as the actual
 * main/sidebar wrapper. The previous theme rule targeted only the outer
 * .wc-block-checkout node, leaving the real columns under Woo defaults.
 * -------------------------------------------------------------------------- */
html[data-mf-theme] body.mf-site.mf-is-checkout .mf-container-narrow.mf-page,
html[data-mf-theme] body.mf-site.mf-is-checkout .entry-content,
html[data-mf-theme] body.mf-site.mf-is-checkout .wp-block-woocommerce-checkout,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout {
  width: min(calc(100% - 48px), 1240px) !important;
  max-width: 1240px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .mf-container-narrow.mf-page {
  width: min(calc(100% - 48px), 1380px) !important;
  max-width: 1380px !important;
}

/*
 * The optimized legacy bundle also turns the OUTER .wc-block-checkout node
 * into a two-column grid. Current WooCommerce Blocks already owns its columns
 * inside .wc-block-components-sidebar-layout. Leaving both grids active makes
 * the inner form collapse into a sliver at intermediate window widths.
 */
html[data-mf-theme] body.mf-site.mf-is-checkout .wp-block-woocommerce-checkout > .wc-block-checkout,
html[data-mf-theme] body.mf-site.mf-is-checkout .entry-content > .wc-block-checkout {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  align-items: initial !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-intro,
html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-assurance {
  width: min(calc(100% - 48px), 1240px) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.38fr) minmax(360px, 0.72fr) !important;
  align-items: start !important;
  gap: clamp(26px, 3vw, 42px) !important;
  box-sizing: border-box !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-main.wc-block-checkout__main,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-main.wc-block-checkout__main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 0 !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: calc(var(--mf-header-height, 82px) + 18px) !important;
  padding: 0 !important;
}

/* Prevent inherited content widths from squeezing individual checkout cards. */
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout__main > *,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__container,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__content,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-address-form,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-radio-control,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-radio-control__option {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Headings should wrap only between words, never in the middle of words. */
html[data-mf-theme] body.mf-site.mf-is-checkout :is(
  .wc-block-components-express-payment__title,
  .wc-block-components-checkout-step__title,
  .wc-block-components-title,
  .wc-block-components-checkout-order-summary__title-text
) {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__heading,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__heading-content,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__title {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Remove stray bullets/markers inherited from generic content-list styling. */
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout :is(ul, ol) {
  list-style: none !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout :is(li)::marker {
  content: "" !important;
  font-size: 0 !important;
}

/* Form controls and PayPal/card iframes may never exceed their card. */
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout :is(
  input,
  select,
  textarea,
  button,
  iframe,
  .wc-block-components-text-input,
  .wc-block-components-combobox,
  .wc-block-components-address-form__address_1,
  .wc-block-components-address-form__address_2
) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment__event-buttons {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment__event-buttons > li,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment__event-buttons :is(div, iframe) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep order-summary rows fluid rather than forcing product text into slivers. */
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-order-summary-item {
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
}

html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-order-summary-item__description,
html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-order-summary-item__description * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
 * Compact desktop / split-window / tablet:
 * Stack before WooCommerce's main column can become narrower than a usable
 * checkout form. 1280px also covers common half-window layouts on 4K/1440p
 * desktops while full desktop keeps the two-column composition.
 */
@media (max-width: 1280px) {
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-intro {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 18px !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout :is(
    .wc-block-components-main.wc-block-checkout__main,
    .wc-block-components-sidebar.wc-block-checkout__sidebar
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout .wc-block-components-main.wc-block-checkout__main {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* Mobile: edge-safe spacing, readable headings and one-column fields/buttons. */
@media (max-width: 640px) {
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-container-narrow.mf-page,
  html[data-mf-theme] body.mf-site.mf-is-checkout .entry-content,
  html[data-mf-theme] body.mf-site.mf-is-checkout .wp-block-woocommerce-checkout,
  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-checkout,
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-intro,
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-assurance {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout #mf-checkout-block-title {
    max-width: 11ch !important;
    font-size: clamp(38px, 12vw, 52px) !important;
    line-height: 0.98 !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps li,
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps a {
    min-width: 0 !important;
    justify-content: flex-start !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment,
  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step {
    padding: 20px 16px !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment__title {
    font-size: clamp(25px, 8vw, 32px) !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-checkout-step__title,
  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-title {
    font-size: clamp(25px, 8vw, 32px) !important;
    line-height: 1.05 !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-express-payment__event-buttons {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-order-summary-item {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html[data-mf-theme] body.mf-site.mf-is-checkout .wc-block-components-order-summary-item__total-price {
    grid-column: 2 !important;
    justify-self: start !important;
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps li,
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps a {
    gap: 3px !important;
    font-size: 9px !important;
  }
  html[data-mf-theme] body.mf-site.mf-is-checkout .mf-checkout-block-steps span {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }
}