/* Scoped header styling. Values can be changed in the WordPress Customizer. */
body.cm-site { margin: 0; }
.cm-header {
  --cm-background: #000;
  --cm-height: 90px;
  --cm-container-width: 1160px;
  --cm-padding: 24px;
  --cm-logo-width: 180px;
  --cm-account-size: 25px;
  --cm-cart-size: 30px;
  --cm-icon-gap: 20px;
  --cm-logo-gap: 8px;
  --cm-account-target: max(44px, var(--cm-account-size));
  --cm-cart-target: max(44px, var(--cm-cart-size));
  /* Artwork spacing yields to non-overlapping 44px touch targets. */
  --cm-target-gap: max(0px, calc(var(--cm-icon-gap) - (var(--cm-account-target) - var(--cm-account-size)) / 2 - (var(--cm-cart-target) - var(--cm-cart-size)) / 2));
  --cm-actions-width: calc(var(--cm-account-target) + var(--cm-cart-target) + var(--cm-target-gap));
  width: 100%;
  color: #fff;
  background: var(--cm-background);
}
.cm-header *, .cm-header *::before, .cm-header *::after { box-sizing: border-box; }
.cm-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - var(--cm-padding) * 2);
  max-width: var(--cm-container-width);
  height: var(--cm-height);
  margin-inline: auto;
}
.cm-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(0px, min(var(--cm-logo-width), calc(100% - (var(--cm-actions-width) + var(--cm-logo-gap)) * 2)));
  height: calc(var(--cm-height) - 16px);
}
.cm-header__logo .custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cm-header__logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cm-header__actions { display: flex; align-items: center; gap: var(--cm-target-gap); flex: 0 0 auto; }
.cm-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .22);
}
.cm-header__action--account { width: var(--cm-account-target); height: var(--cm-account-target); }
.cm-header__action--cart { width: var(--cm-cart-target); height: var(--cm-cart-target); }
.cm-header__action:visited, .cm-header__action:hover { color: #fff; }
.cm-header__action:focus-visible, .cm-header__logo .custom-logo-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cm-header__action:active { background: rgba(255, 255, 255, .15); }
.cm-header__icon { position: relative; display: block; pointer-events: none; }
.cm-header__action--account .cm-header__icon { width: var(--cm-account-size); height: var(--cm-account-size); }
.cm-header__action--cart .cm-header__icon { width: var(--cm-cart-size); height: var(--cm-cart-size); }
.cm-header__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cm-header__art img, .cm-header__art svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm-header__art--hover { opacity: 0; }
.cm-header__action:focus-visible .cm-header__icon--has-hover .cm-header__art--normal { opacity: 0; }
.cm-header__action:focus-visible .cm-header__icon--has-hover .cm-header__art--hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cm-header__action:hover .cm-header__icon--has-hover .cm-header__art--normal { opacity: 0; }
  .cm-header__action:hover .cm-header__icon--has-hover .cm-header__art--hover { opacity: 1; }
}
@media (max-width: 767px) {
  .cm-header {
    --cm-height: 60px;
    --cm-padding: 16px;
    --cm-logo-width: 110px;
    --cm-account-size: 19px;
    --cm-cart-size: 24px;
    --cm-icon-gap: 12px;
  }
}
.cm-skip-link { position: absolute; top: 0; left: 16px; padding: 10px 16px; transform: translateY(-200%); background: #fff; color: #000; z-index: 100000; }
.cm-skip-link:focus { transform: translateY(0); outline: 2px solid #000; outline-offset: 2px; }

/* Counter overlays only: existing icon geometry and hit areas stay unchanged. */
.cm-header__action--cart { position: relative; }
.cm-header__cart-status { pointer-events: none; }
.cm-header__cart-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cm-header__counter {
  --cm-counter-safe-x: min(var(--cm-counter-x, 8px), calc(var(--cm-padding) - 2px));
  --cm-counter-max-width: max(16px, calc(var(--cm-cart-target) + var(--cm-counter-safe-x) + var(--cm-target-gap) + (var(--cm-account-target) - var(--cm-account-size)) / 2 - 2px));
  --cm-counter-actual-size: min(var(--cm-counter-size, 32px), var(--cm-counter-max-width), calc(var(--cm-height) - 4px));
  position: absolute;
  top: clamp(calc((var(--cm-height) - var(--cm-cart-target)) / -2), var(--cm-counter-y, -8px), calc((var(--cm-height) + var(--cm-cart-target)) / 2 - var(--cm-counter-actual-size)));
  right: calc(-1 * var(--cm-counter-safe-x));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cm-counter-actual-size);
  max-width: var(--cm-counter-max-width);
  height: var(--cm-counter-actual-size);
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--cm-counter-background, #86BC00);
  color: var(--cm-counter-color, #fff);
  font-family: system-ui, sans-serif;
  font-size: min(var(--cm-counter-font, 20px), calc(var(--cm-counter-actual-size) - 6px), calc((var(--cm-counter-max-width) - 8px) / (var(--cm-count-digits, 1) * .7)));
  font-weight: var(--cm-counter-weight, 600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
}
.cm-header__counter[hidden] { display: none; }

/* Keep the overflowing badge part of the Cart link's hover/click target. */
.cm-header__counter { pointer-events: auto; transition: background-color 120ms ease; }
.cm-header__action--cart:focus-visible .cm-header__counter { background-color: var(--cm-counter-hover-background, #E50068); }
@media (hover: hover) and (pointer: fine) {
  .cm-header__action--cart:hover .cm-header__counter { background-color: var(--cm-counter-hover-background, #E50068); }
}
@media (prefers-reduced-motion: reduce) {
  .cm-header__counter { transition: none; }
}