/*
 * Mackie Messer current-site fixes.
 * Scope: active Twenty Twenty-Four storefront, page content created by this plugin,
 * mobile header/footer/cookie corrections.
 */

:root {
  --mkm-ink: #171411;
  --mkm-muted: #68615a;
  --mkm-line: #e7e1db;
  --mkm-paper: #fffdf9;
  --mkm-panel: #f6f8f6;
  --mkm-accent: #84242f;
  --mkm-accent-2: #1e615c;
  --mkm-shadow: 0 18px 55px rgba(23, 20, 17, 0.09);
}

body .wp-block-template-part:not(.preview-opacity),
body footer.wp-block-template-part {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body header.wp-block-template-part,
body .wp-block-template-part.preview-opacity {
  width: 100%;
}

body:not(.home) header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(23, 20, 17, 0.08);
  box-shadow: 0 10px 35px rgba(23, 20, 17, 0.05);
  backdrop-filter: saturate(160%) blur(12px);
}

body header.wp-block-template-part > .wp-block-group,
body .wp-block-template-part.preview-opacity > .wp-block-group {
  min-height: 0 !important;
  padding: 18px clamp(18px, 3vw, 40px) !important;
  gap: clamp(14px, 3vw, 34px) !important;
}

body header.wp-block-template-part .wp-block-spacer,
body .wp-block-template-part.preview-opacity .wp-block-spacer {
  display: none !important;
}

body header.wp-block-template-part .custom-logo,
body .wp-block-template-part.preview-opacity .custom-logo {
  width: clamp(132px, 17vw, 230px) !important;
  max-width: 100% !important;
  max-height: 86px !important;
  object-fit: contain !important;
}

body header.wp-block-template-part .wp-block-navigation,
body .wp-block-template-part.preview-opacity .wp-block-navigation {
  gap: clamp(12px, 2vw, 26px) !important;
}

body header.wp-block-template-part a,
body .wp-block-template-part.preview-opacity a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

body footer.wp-block-template-part {
  background: #ffffff !important;
  border-top: 1px solid var(--mkm-line);
}

body footer.wp-block-template-part > .wp-block-group {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

body footer.wp-block-template-part .custom-logo {
  width: 170px !important;
  max-height: 95px !important;
  object-fit: contain !important;
}

body footer.wp-block-template-part .wp-block-search__inside-wrapper {
  border: 1px solid var(--mkm-line);
}

body footer.wp-block-template-part .wp-block-search__input {
  min-height: 44px;
}

.mkm-page {
  color: var(--mkm-ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--mkm-paper) 100%);
  margin-block-start: 0 !important;
  padding: clamp(34px, 5vw, 72px) clamp(18px, 4vw, 56px);
}

.mkm-page > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.mkm-hero {
  text-align: center;
  padding: clamp(28px, 6vw, 76px) 0 clamp(24px, 4vw, 52px);
}

.mkm-logo-mark {
  margin: 0 auto 12px !important;
}

.mkm-logo-mark img {
  width: clamp(145px, 23vw, 285px);
  max-height: 180px;
  object-fit: contain;
}

.mkm-hero-title {
  font-size: clamp(2.6rem, 7vw, 6.8rem) !important;
  line-height: 0.94 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.mkm-hero-copy {
  max-width: 760px;
  margin: 18px auto 0 !important;
  color: var(--mkm-muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.mkm-actions {
  margin-top: 26px !important;
}

.mkm-page .wp-block-button__link {
  border-radius: 6px !important;
  padding: 0.88rem 1.12rem !important;
  font-weight: 650;
}

.mkm-button-primary .wp-block-button__link,
.mkm-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--mkm-ink) !important;
  color: #ffffff !important;
}

.mkm-button-secondary .wp-block-button__link,
.mkm-page .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--mkm-ink) !important;
  border: 1px solid currentColor !important;
}

.mkm-feature-grid,
.mkm-process-grid,
.mkm-story-grid {
  gap: clamp(18px, 3vw, 34px) !important;
  margin-top: clamp(28px, 4vw, 52px) !important;
}

.mkm-feature-grid > .wp-block-column,
.mkm-process-grid > .wp-block-column,
.mkm-side-note {
  background: #ffffff;
  border: 1px solid var(--mkm-line);
  border-radius: 8px;
  box-shadow: var(--mkm-shadow);
  padding: clamp(20px, 3vw, 32px);
}

.mkm-process-grid > .wp-block-column:nth-child(2) {
  background: var(--mkm-panel);
}

.mkm-process-grid > .wp-block-column:nth-child(3) {
  border-color: rgba(30, 97, 92, 0.22);
}

.mkm-page h2,
.mkm-page h3 {
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

.mkm-page p {
  line-height: 1.62;
}

.mkm-band {
  margin-top: clamp(34px, 5vw, 70px) !important;
  padding: clamp(24px, 4vw, 44px);
  border-top: 1px solid var(--mkm-line);
  border-bottom: 1px solid var(--mkm-line);
  background: rgba(255, 255, 255, 0.66);
  text-align: center;
}

.mkm-band > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--mkm-muted);
}

.mkm-band .woocommerce ul.products {
  margin-top: 28px;
}

@media (max-width: 781px) {
  body .wp-block-template-part.preview-opacity {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(23, 20, 17, 0.08);
    box-shadow: 0 10px 35px rgba(23, 20, 17, 0.06);
    backdrop-filter: saturate(160%) blur(12px);
  }

  body.header-revealed {
    padding-top: 0 !important;
  }

  body header.wp-block-template-part > .wp-block-group,
  body .wp-block-template-part.preview-opacity > .wp-block-group {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center !important;
    min-height: 78px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  body header.wp-block-template-part .wp-block-site-logo,
  body .wp-block-template-part.preview-opacity .wp-block-site-logo {
    justify-self: center;
  }

  body header.wp-block-template-part .custom-logo,
  body .wp-block-template-part.preview-opacity .custom-logo {
    width: min(42vw, 156px) !important;
    max-height: 58px !important;
  }

  body header.wp-block-template-part .wp-block-navigation__responsive-container-open,
  body .wp-block-template-part.preview-opacity .wp-block-navigation__responsive-container-open {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body header.wp-block-template-part .wp-block-group.is-content-justification-right,
  body .wp-block-template-part.preview-opacity .wp-block-group.is-content-justification-right {
    gap: 8px !important;
    justify-self: end;
  }

  body footer.wp-block-template-part > .wp-block-group {
    padding: 18px 16px !important;
  }

  body footer.wp-block-template-part .wp-block-columns {
    display: block !important;
  }

  body footer.wp-block-template-part .wp-block-column {
    flex-basis: auto !important;
    margin-bottom: 10px;
  }

  body footer.wp-block-template-part .wp-block-column[style*="flex-basis:10%"] {
    display: none !important;
  }

  body footer.wp-block-template-part .custom-logo {
    width: 108px !important;
    max-height: 58px !important;
  }

  body footer.wp-block-template-part .wp-block-navigation__container {
    gap: 0.22rem !important;
  }

  body footer.wp-block-template-part .has-text-align-right {
    text-align: left !important;
    font-size: 0.95rem !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body footer.wp-block-template-part .wp-block-search {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body footer.wp-block-template-part .wp-block-search__inside-wrapper {
    max-width: 100% !important;
  }

  body footer.wp-block-template-part .wp-block-search__input {
    min-height: 40px;
  }

  body footer.wp-block-template-part .wp-block-search__button {
    min-width: 42px;
    padding: 8px !important;
  }

  body .cmplz-cookiebanner {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100% - 20px) !important;
    max-height: min(56vh, 390px) !important;
    border-radius: 8px !important;
    overflow: auto !important;
    padding: 14px !important;
  }

  body .cmplz-cookiebanner .cmplz-message,
  body .cmplz-cookiebanner .cmplz-categories {
    max-height: 138px !important;
    overflow: auto !important;
  }

  body .cmplz-cookiebanner .cmplz-title {
    margin-bottom: 6px !important;
  }

  body .cmplz-cookiebanner .cmplz-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body .cmplz-soft-cookiewall {
    background: rgba(23, 20, 17, 0.28) !important;
  }

  .mkm-page {
    padding: 30px 16px;
  }

  .mkm-hero {
    padding-top: 28px;
  }

  .mkm-hero-title {
    font-size: clamp(2.35rem, 15vw, 4.2rem) !important;
  }

  .mkm-feature-grid,
  .mkm-process-grid,
  .mkm-story-grid {
    display: block !important;
  }

  .mkm-feature-grid > .wp-block-column,
  .mkm-process-grid > .wp-block-column,
  .mkm-story-grid > .wp-block-column {
    margin-bottom: 16px;
  }

  .mkm-band {
    padding: 24px 16px;
  }

  .mkm-band .woocommerce ul.products,
  .mkm-band ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .mkm-band .woocommerce ul.products li.product,
  .mkm-band ul.products li.product {
    width: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  body header.wp-block-template-part > .wp-block-group,
  body .wp-block-template-part.preview-opacity > .wp-block-group {
    min-height: 70px !important;
  }

  body header.wp-block-template-part .wc-block-mini-cart__button,
  body .wp-block-template-part.preview-opacity .wc-block-mini-cart__button {
    padding: 6px !important;
  }

  .mkm-page .wp-block-buttons {
    width: 100%;
  }

  .mkm-page .wp-block-button,
  .mkm-page .wp-block-button__link {
    width: 100%;
  }
}