/* CozyKK — KK-only logo override, 2026-09-28.
   Visual-only patch: header/footer logo. No checkout/cart/analytics behavior touched. */

/* Current storefront templates */
.brand,
.brand--invert {
  position: relative;
  width: 76px;
  min-width: 76px !important;
  height: 66px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: visible;
}
.brand > span,
.brand > b,
.brand > small,
.brand--invert > span,
.brand--invert > b,
.brand--invert > small {
  display: none !important;
}
.brand::before,
.brand--invert::before {
  content: "";
  display: block;
  width: 68px;
  height: 62px;
  background: url('/brand/kk-monogram-gold.png?v=20260928') center / contain no-repeat;
  flex: 0 0 auto;
}

/* Older/alternate storefront templates still present on some routes */
.kk-logo {
  position: relative;
  width: 76px;
  min-width: 76px;
  height: 66px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  letter-spacing: 0 !important;
  overflow: visible;
}
.kk-logo > b,
.kk-logo > small {
  display: none !important;
}
.kk-logo::before {
  content: "";
  display: block;
  width: 68px;
  height: 62px;
  background: url('/brand/kk-monogram-gold.png?v=20260928') center / contain no-repeat;
  flex: 0 0 auto;
}

/* Footer: give the monogram a little more air. */
footer .brand,
.store-footer .kk-logo,
.footer-logo {
  width: 92px;
  min-width: 92px !important;
  height: 84px;
}
footer .brand::before,
.store-footer .kk-logo::before,
.footer-logo::before {
  width: 86px;
  height: 78px;
}

/* Mobile: keep the mark premium but compact inside the existing header height. */
@media (max-width: 900px) {
  .header .brand {
    width: 62px;
    min-width: 62px !important;
    height: 58px;
    justify-self: center;
  }
  .header .brand::before {
    width: 58px;
    height: 54px;
  }
}

@media (max-width: 600px) {
  .store-header-main .kk-logo {
    width: 58px;
    min-width: 58px;
    height: 56px;
  }
  .store-header-main .kk-logo::before {
    width: 56px;
    height: 52px;
  }
}