/* Duck Mark Header Control v2.1.1
   Header only. Original logo is preserved unless overridden in settings.
   Footer/body/content areas are not touched.
   Colors are driven by --dm-header-* custom properties injected from admin settings.
*/

body.dm-header-skin-enabled .site-header,
body.dm-header-skin-enabled .main-header-bar,
body.dm-header-skin-enabled .ast-primary-header-bar,
body.dm-header-skin-enabled .ast-desktop-header-content,
body.dm-header-skin-enabled .ast-mobile-header-wrap,
body.dm-header-skin-enabled .ast-above-header-wrap,
body.dm-header-skin-enabled .ast-below-header-wrap {
  background: var(--dm-header-bg, #050604) !important;
  border-color: var(--dm-header-bg, #050604) !important;
}

body.dm-header-skin-enabled .site-header {
  border-bottom-color: var(--dm-header-bg, #050604) !important;
}

body.dm-header-skin-enabled .ast-primary-header-bar,
body.dm-header-skin-enabled .main-header-bar {
  min-height: 92px;
}

body.dm-header-skin-enabled .site-branding,
body.dm-header-skin-enabled .ast-site-identity {
  padding-top: 8px;
  padding-bottom: 8px;
}

body.dm-header-skin-enabled .site-branding img,
body.dm-header-skin-enabled .custom-logo-link img {
  max-height: 74px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(var(--dm-header-accent-rgb, 179,255,32), 0.22));
}

body.dm-header-skin-enabled .main-header-menu,
body.dm-header-skin-enabled .ast-builder-menu-1 .main-header-menu,
body.dm-header-skin-enabled .dm-header-menu {
  align-items: center;
  gap: 20px;
}

body.dm-header-skin-enabled .site-header a,
body.dm-header-skin-enabled .main-header-menu a,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item > .menu-link {
  color: rgba(var(--dm-header-text-rgb, 255,250,236), 0.90) !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body.dm-header-skin-enabled .main-header-menu > .menu-item > .menu-link,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item > .menu-link {
  position: relative;
  min-height: 42px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action) > .menu-link::after,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item:not(.dm-header-action) > .menu-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--dm-header-accent, #b7ff16);
  box-shadow: 0 0 12px rgba(var(--dm-header-accent-rgb, 183,255,22), .9);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action):hover > .menu-link,
body.dm-header-skin-enabled .main-header-menu > .current-menu-item:not(.dm-header-action) > .menu-link,
body.dm-header-skin-enabled .main-header-menu > .current-menu-ancestor:not(.dm-header-action) > .menu-link {
  color: var(--dm-header-accent, #b7ff16) !important;
  text-shadow: 0 0 14px rgba(var(--dm-header-accent-rgb, 183,255,22), .35);
}

body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action):hover > .menu-link::after,
body.dm-header-skin-enabled .main-header-menu > .current-menu-item:not(.dm-header-action) > .menu-link::after,
body.dm-header-skin-enabled .main-header-menu > .current-menu-ancestor:not(.dm-header-action) > .menu-link::after {
  transform: scaleX(1);
}

/* Right actions appended by plugin */
body.dm-header-skin-enabled .main-header-menu > .dm-header-action-search {
  margin-left: 34px;
}

body.dm-header-skin-enabled .main-header-menu > .dm-header-action > .menu-link {
  color: rgba(var(--dm-header-text-rgb, 255,250,236), 0.86) !important;
}

body.dm-header-skin-enabled .dm-header-icon-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
}

body.dm-header-skin-enabled .dm-header-icon-link svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
}

body.dm-header-skin-enabled .dm-header-icon-link:hover {
  color: var(--dm-header-accent, #b7ff16) !important;
  text-shadow: 0 0 12px rgba(var(--dm-header-accent-rgb, 183,255,22), .45);
}

body.dm-header-skin-enabled .dm-header-action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.dm-header-skin-enabled .dm-header-action-cart .dm-header-icon-link {
  position: relative;
}

body.dm-header-skin-enabled .dm-header-cart-count {
  position: absolute;
  right: -1px;
  top: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dm-header-accent, #b7ff16);
  color: var(--dm-header-bg, #050604);
  font-size: 11px;
  font-weight: 900;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 10px rgba(var(--dm-header-accent-rgb, 183,255,22), .75);
}

body.dm-header-skin-enabled .main-header-menu > .dm-header-action-cta {
  margin-left: 12px;
}

body.dm-header-skin-enabled .dm-header-cta-link {
  min-height: 44px !important;
  padding: 0 28px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--dm-header-cta-1, #c9ff31) 0%, var(--dm-header-cta-2, #96e800) 100%);
  color: var(--dm-header-cta-text, #071006) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 18px rgba(var(--dm-header-accent-rgb, 183,255,22), .34);
}

body.dm-header-skin-enabled .dm-header-cta-link:hover {
  color: var(--dm-header-cta-text, #071006) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 0 24px rgba(var(--dm-header-accent-rgb, 183,255,22), .52);
}

/* Astra built-in icons, if still present */
body.dm-header-skin-enabled .ast-icon svg,
body.dm-header-skin-enabled .astra-icon svg,
body.dm-header-skin-enabled .ast-site-header-cart .ast-woo-header-cart-info-wrap,
body.dm-header-skin-enabled .ast-site-header-cart a,
body.dm-header-skin-enabled .ast-header-account-wrap a,
body.dm-header-skin-enabled .ast-header-search a {
  color: rgba(var(--dm-header-text-rgb, 255,250,236), 0.86) !important;
  fill: rgba(var(--dm-header-text-rgb, 255,250,236), 0.86) !important;
}

body.dm-header-skin-enabled .ast-site-header-cart a:hover,
body.dm-header-skin-enabled .ast-header-account-wrap a:hover,
body.dm-header-skin-enabled .ast-header-search a:hover {
  color: var(--dm-header-accent, #b7ff16) !important;
}

/* Mobile */
body.dm-header-skin-enabled .ast-header-break-point .main-header-bar,
body.dm-header-skin-enabled .ast-header-break-point .ast-primary-header-bar {
  min-height: 72px;
}

body.dm-header-skin-enabled .ast-header-break-point .site-branding img,
body.dm-header-skin-enabled .ast-header-break-point .custom-logo-link img {
  max-height: 52px;
}

body.dm-header-skin-enabled .ast-header-break-point .main-header-menu,
body.dm-header-skin-enabled .ast-mobile-popup-drawer,
body.dm-header-skin-enabled .ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background: var(--dm-header-bg, #050604) !important;
}

body.dm-header-skin-enabled .ast-header-break-point .main-header-menu > .menu-item > .menu-link,
body.dm-header-skin-enabled .ast-mobile-popup-drawer .menu-link {
  color: rgba(var(--dm-header-text-rgb, 255,250,236), 0.9) !important;
  border-color: rgba(var(--dm-header-accent-rgb, 183,255,22), 0.13) !important;
}

body.dm-header-skin-enabled .ast-menu-toggle,
body.dm-header-skin-enabled .menu-toggle,
body.dm-header-skin-enabled .ast-mobile-menu-trigger-minimal {
  color: var(--dm-header-accent, #b7ff16) !important;
}

@media (max-width: 1160px) {
  body.dm-header-skin-enabled .main-header-menu,
  body.dm-header-skin-enabled .ast-builder-menu-1 .main-header-menu,
  body.dm-header-skin-enabled .dm-header-menu {
    gap: 12px;
  }

  body.dm-header-skin-enabled .dm-header-cta-link {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 921px) {
  body.dm-header-skin-enabled .main-header-menu > .dm-header-action-search {
    margin-left: 0;
  }

  body.dm-header-skin-enabled .dm-header-action-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  body.dm-header-skin-enabled .dm-header-icon-link {
    justify-content: flex-start;
  }

  body.dm-header-skin-enabled .dm-header-cta-link {
    display: inline-flex !important;
    width: auto;
    margin: 12px 16px;
  }
}

/* Duck Mark Header Control v2.1.1 — existing dm-header-* selectors intentionally preserved. */
:root {
  --dm-header-bg: var(--cl-color-bg, #050604);
  --dm-header-accent: var(--cl-color-primary, #a7ff16);
  --dm-header-accent-rgb: 167, 255, 22;
  --dm-header-text-rgb: 247, 247, 239;
  --dm-header-cta-1: var(--cl-color-primary, #a7ff16);
  --dm-header-cta-2: var(--cl-color-primary-dark, #74d915);
  --dm-header-cta-text: #071006;
}

/*
 * duck-mark-fruitera-home's own header skin paints `body #masthead` directly
 * (an ID selector, un-gated by any toggle in that plugin) — higher
 * specificity than a bare `.site-header` class, so it silently wins over
 * this rule on any site running both plugins. #masthead is added to every
 * selector below purely to match that specificity; Header Control remains
 * the only place these values are configured.
 */
body.dm-header-skin-enabled .site-header,
body.dm-header-skin-enabled #masthead,
body.dm-header-skin-enabled .main-header-bar,
body.dm-header-skin-enabled .ast-primary-header-bar,
body.dm-header-skin-enabled .ast-desktop-header-content,
body.dm-header-skin-enabled .ast-mobile-header-wrap,
body.dm-header-skin-enabled .ast-above-header-wrap,
body.dm-header-skin-enabled .ast-below-header-wrap {
  background: var(--dm-header-bg, var(--cl-color-bg, #050604)) !important;
  border-color: var(--dm-header-border, var(--cl-line, rgba(167,255,22,.24))) !important;
  font-family: var(--dm-header-font-family, var(--cl-font-body, "Noto Sans JP", Inter, sans-serif));
}

/*
 * Exactly one translucent paint layer over the hero (GREEN BADGER 홈페이지
 * 구현 지시서, 2026-08-21). Astra nests .main-header-bar and
 * .ast-primary-header-bar INSIDE .site-header; painting the same
 * color-mix(...,transparent) on all three compounds the alpha on every
 * nested repaint (each pass mixes N% opaque over whatever the previous
 * pass already composited), so two or three layers read as far darker/
 * more opaque than the configured value — the exact failure this rule
 * exists to prevent. Only the outermost wrapper paints; inner wrappers
 * are forced transparent so the one blur/opacity pass shows through untouched.
 */
body.dm-header-transparent-enabled .site-header,
body.dm-header-transparent-enabled #masthead {
  background: color-mix(in srgb, var(--dm-header-bg, #050604) calc(var(--dm-header-bg-opacity, .9) * 100%), transparent) !important;
  -webkit-backdrop-filter: blur(var(--dm-header-blur, 14px)) saturate(115%);
  backdrop-filter: blur(var(--dm-header-blur, 14px)) saturate(115%);
}

body.dm-header-transparent-enabled .main-header-bar,
body.dm-header-transparent-enabled .ast-primary-header-bar,
body.dm-header-transparent-enabled .ast-above-header-wrap,
body.dm-header-transparent-enabled .ast-below-header-wrap {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports not (background: color-mix(in srgb, #000 90%, transparent)) {
  body.dm-header-transparent-enabled .site-header,
  body.dm-header-transparent-enabled #masthead {
    background: var(--dm-header-bg, #050604) !important;
  }
}

/*
 * Hero overlap: the header stays in normal flow (so "sticky" keeps working)
 * but reserves no visual space of its own — the very next section is pulled
 * up underneath it by its own height, so the hero starts at the true top of
 * the viewport, and the header stays pinned at the top on scroll after it.
 * Generic: targets "whatever section comes first", not a Green Badger
 * literal — any pack whose first section is a hero gets the same overlap.
 */
body.dm-header-hero-overlap-enabled .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
body.dm-header-hero-overlap-enabled.dm-header-sticky-enabled .site-header {
  position: sticky;
}
body.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
  margin-top: calc(-1 * var(--dm-header-height, 92px));
}
@media (max-width: 600px) {
  body.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
    margin-top: calc(-1 * var(--dm-header-height-mobile, 72px));
  }
}

body.dm-header-border-enabled .site-header,
body.dm-header-border-enabled .main-header-bar,
body.dm-header-border-enabled .ast-primary-header-bar {
  border-bottom: 1px solid var(--dm-header-border, var(--cl-line, rgba(167,255,22,.24))) !important;
}

body.dm-header-shadow-enabled .site-header {
  box-shadow: 0 14px 34px rgba(0,0,0,var(--dm-header-shadow-alpha,.34));
}

body.dm-header-sticky-enabled .site-header {
  position: sticky !important;
  top: var(--dm-header-sticky-offset, 0px);
  z-index: 9990;
}

body.admin-bar.dm-header-sticky-enabled .site-header {
  top: calc(var(--dm-header-sticky-offset, 0px) + 32px);
}

body.dm-header-skin-enabled .ast-primary-header-bar,
body.dm-header-skin-enabled .main-header-bar {
  min-height: var(--dm-header-height, 92px) !important;
}

body.dm-header-skin-enabled .site-header .ast-container,
body.dm-header-skin-enabled .site-header .site-primary-header-wrap,
body.dm-header-skin-enabled .site-header .ast-builder-grid-row-container-inner {
  width: 100%;
  max-width: var(--dm-header-max-width, 1240px) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dm-header-padding-x, 24px) !important;
  padding-right: var(--dm-header-padding-x, 24px) !important;
}

body.dm-header-skin-enabled .site-branding img,
body.dm-header-skin-enabled .custom-logo-link img {
  max-height: var(--dm-header-logo-height, 74px) !important;
}

body.dm-header-skin-enabled .main-header-menu,
body.dm-header-skin-enabled .ast-builder-menu-1 .main-header-menu,
body.dm-header-skin-enabled .dm-header-menu {
  gap: var(--dm-header-menu-gap, 20px) !important;
}

body.dm-header-skin-enabled .site-header a,
body.dm-header-skin-enabled .main-header-menu a,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item > .menu-link {
  color: var(--dm-header-text, var(--cl-color-text, #f7f7ef)) !important;
  font-family: var(--dm-header-font-family, var(--cl-font-body, "Noto Sans JP", Inter, sans-serif));
  font-size: var(--dm-header-menu-font-size, 14px) !important;
  font-weight: var(--dm-header-menu-font-weight, 800) !important;
  letter-spacing: var(--dm-header-menu-letter-spacing, .045em) !important;
  text-transform: var(--dm-header-menu-transform, uppercase) !important;
}

body.dm-header-skin-enabled .main-header-menu > .menu-item > .menu-link,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item > .menu-link {
  padding-left: var(--dm-header-menu-item-padding, 10px) !important;
  padding-right: var(--dm-header-menu-item-padding, 10px) !important;
}

body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action) > .menu-link::after,
body.dm-header-skin-enabled .ast-builder-menu-1 .menu-item:not(.dm-header-action) > .menu-link::after {
  left: var(--dm-header-menu-item-padding, 10px);
  right: var(--dm-header-menu-item-padding, 10px);
  height: var(--dm-header-underline-height, 3px);
  background: var(--dm-header-accent, var(--cl-color-primary, #a7ff16));
}

body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action):hover > .menu-link,
body.dm-header-skin-enabled .main-header-menu > .current-menu-item:not(.dm-header-action) > .menu-link,
body.dm-header-skin-enabled .main-header-menu > .current-menu-ancestor:not(.dm-header-action) > .menu-link {
  color: var(--dm-header-accent, var(--cl-color-primary, #a7ff16)) !important;
}

body.dm-header-skin-enabled .dm-header-icon-link svg {
  width: var(--dm-header-icon-size, 30px);
  height: var(--dm-header-icon-size, 30px);
}

body.dm-header-skin-enabled .dm-header-cart-count {
  background: var(--dm-header-accent, var(--cl-color-primary, #a7ff16));
  color: var(--dm-header-bg, var(--cl-color-bg, #050604));
}

body.dm-header-skin-enabled .dm-header-cta-link {
  min-height: var(--dm-header-cta-height, 44px) !important;
  padding-left: var(--dm-header-cta-padding-x, 28px) !important;
  padding-right: var(--dm-header-cta-padding-x, 28px) !important;
  border-radius: var(--dm-header-cta-radius, 999px) !important;
  background: linear-gradient(180deg, var(--dm-header-cta-1, #c9ff31), var(--dm-header-cta-2, #96e800));
  color: var(--dm-header-cta-text, #071006) !important;
}

body.dm-header-skin-enabled .main-header-menu .sub-menu,
body.dm-header-skin-enabled .ast-builder-menu-1 .sub-menu {
  min-width: var(--dm-header-submenu-width, 220px) !important;
  border-radius: var(--dm-header-submenu-radius, 10px) !important;
  border: 1px solid var(--dm-header-border, var(--cl-line, rgba(167,255,22,.24))) !important;
  background: var(--dm-header-submenu-bg, #0b0d08) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  overflow: hidden;
}

body.dm-header-skin-enabled .main-header-menu .sub-menu .menu-link,
body.dm-header-skin-enabled .ast-builder-menu-1 .sub-menu .menu-link {
  color: var(--dm-header-submenu-text, #fffaec) !important;
  text-transform: none !important;
}

body.dm-header-labels-desktop .dm-header-action-label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: nowrap !important;
}

.dm-header-search-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 9999;
  width: min(420px, calc(100vw - 30px));
  padding: 12px;
  border: 1px solid var(--dm-header-border, var(--cl-line, rgba(167,255,22,.24)));
  border-radius: var(--dm-header-submenu-radius, 10px);
  background: var(--dm-header-submenu-bg, #0b0d08);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

.dm-header-search-panel[hidden] { display: none !important; }
.dm-header-search-panel form { display: flex; gap: 8px; }
.dm-header-search-panel input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--dm-header-border, var(--cl-line, rgba(167,255,22,.24)));
  border-radius: 7px;
  background: color-mix(in srgb, var(--dm-header-bg, #050604) 80%, #fff 5%);
  color: var(--dm-header-text, #f7f7ef);
}
.dm-header-search-panel button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  background: var(--dm-header-accent, #a7ff16);
  color: var(--dm-header-bg, #050604);
  font-weight: 900;
  cursor: pointer;
}

.dm-header-announcement {
  position: relative;
  z-index: 9991;
  min-height: var(--dm-header-announcement-height, 36px);
  background: var(--dm-header-announcement-bg, var(--cl-color-primary, #a7ff16));
  color: var(--dm-header-announcement-text, #071006);
  font-family: var(--dm-header-font-family, var(--cl-font-body, "Noto Sans JP", Inter, sans-serif));
  font-size: var(--dm-header-announcement-font-size, 12px);
  font-weight: 800;
}
.dm-header-announcement__inner {
  /* Keep the text clear of the close button when it wraps. */
  padding-inline-end: calc(40px + var(--dm-header-gutter, clamp(16px, 3vw, 36px)));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100% - 32px, var(--dm-header-max-width, 1240px));
  min-height: var(--dm-header-announcement-height, 36px);
  margin: 0 auto;
  padding: 4px 42px;
  text-align: center;
}
.dm-header-announcement a {
  color: currentColor !important;
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dm-header-announcement button {
  position: absolute;
  /* Sit on the same gutter the header uses, not hard against the edge. */
  right: var(--dm-header-gutter, clamp(16px, 3vw, 36px));
  top: 50%;
  /* v3.7.4: top:50% alone anchors the top edge at the midpoint. The translate is
     what actually centres it, at any bar height and any font size. */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A 40x40 pointer target without changing the bar height. */
  width: 40px;
  height: 40px;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  line-height: 1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dm-header-announcement.is-dismissed { display: none !important; }
.dm-header-announcement__text--mobile { display: none; }
@media (max-width: 1024px) {
  .dm-header-announcement__text--desktop { display: none; }
  .dm-header-announcement__text--mobile { display: inline; white-space: nowrap; }
  /* Tighter gutters on mobile; right side still clears the absolutely-positioned close button. */
  .dm-header-announcement[data-dm-announcement] .dm-header-announcement__inner { padding: 4px 44px 4px 10px; gap: 6px; letter-spacing: 0.04em; }
}
@media (max-width: 380px) {
  /* Narrowest phones: one step down so the copy clears the close button. */
  .dm-header-announcement[data-dm-announcement] { font-size: min(11px, var(--dm-header-announcement-font-size, 12px)); }
}

@media (max-width: 1160px) {
  body.dm-header-skin-enabled .main-header-menu,
  body.dm-header-skin-enabled .ast-builder-menu-1 .main-header-menu,
  body.dm-header-skin-enabled .dm-header-menu {
    gap: var(--dm-header-menu-gap-tablet, 12px) !important;
  }
}

@media (max-width: 921px) {
  body.dm-header-skin-enabled .ast-header-break-point .main-header-bar,
  body.dm-header-skin-enabled .ast-header-break-point .ast-primary-header-bar,
  body.dm-header-skin-enabled .main-header-bar,
  body.dm-header-skin-enabled .ast-primary-header-bar {
    min-height: var(--dm-header-height-mobile, 72px) !important;
  }
  body.dm-header-skin-enabled .site-header .ast-container,
  body.dm-header-skin-enabled .site-header .site-primary-header-wrap,
  body.dm-header-skin-enabled .site-header .ast-builder-grid-row-container-inner {
    padding-left: var(--dm-header-padding-x-mobile, 16px) !important;
    padding-right: var(--dm-header-padding-x-mobile, 16px) !important;
  }
  body.dm-header-skin-enabled .ast-header-break-point .site-branding img,
  body.dm-header-skin-enabled .ast-header-break-point .custom-logo-link img,
  body.dm-header-skin-enabled .site-branding img,
  body.dm-header-skin-enabled .custom-logo-link img {
    max-height: var(--dm-header-logo-height-mobile, 52px) !important;
  }
  body.dm-header-skin-enabled .ast-header-break-point .main-header-menu,
  body.dm-header-skin-enabled .ast-mobile-popup-drawer,
  body.dm-header-skin-enabled .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    background: var(--dm-header-bg-mobile, var(--dm-header-bg, #050604)) !important;
  }
  body.dm-header-labels-mobile-hidden .dm-header-action-label { display: none !important; }
  body.dm-header-cta-mobile-hidden .dm-header-action-cta { display: none !important; }
  body.dm-header-announcement-mobile-hidden .dm-header-announcement { display: none !important; }
  .dm-header-search-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 84px;
    width: auto;
  }
}

@media (max-width: 782px) {
  body.admin-bar.dm-header-sticky-enabled .site-header {
    top: calc(var(--dm-header-sticky-offset, 0px) + 46px);
  }
}

/* Admin UI */
.cl-header-admin { max-width: 1280px; }
.cl-header-admin__hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:22px 0 18px; }
.cl-header-admin__hero h1 { margin:0 0 6px; font-size:30px; }
.cl-header-admin__hero p { margin:0; color:#50575e; }
.cl-header-admin__actions { display:flex; flex-wrap:wrap; gap:8px; }
.cl-header-admin-card { margin:16px 0; padding:20px; border:1px solid #dcdcde; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cl-header-admin-card h2 { margin:0 0 14px; }
.cl-header-admin-card h3 { margin:24px 0 12px; }
.cl-header-admin-card__head { margin-bottom:15px; }
.cl-header-admin-card__head h2 { margin-bottom:5px; }
.cl-header-admin-card__head p { margin:0; color:#646970; }
.cl-header-preset-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.cl-header-preset-card { padding:15px; border:1px solid #dcdcde; border-radius:10px; background:#f9f9f9; }
.cl-header-preset-card h3 { margin:10px 0 4px; }
.cl-header-preset-card p { min-height:38px; margin:0 0 12px; color:#646970; }
.cl-header-preset-card__swatches { display:grid; grid-template-columns:repeat(4,1fr); height:30px; overflow:hidden; border-radius:7px; }
.cl-header-preset-card__swatches i { display:block; }
.cl-header-preset-status { display:none; margin-left:8px; color:#008a20; font-weight:700; }
.cl-header-admin-tabs { position:sticky; top:32px; z-index:50; display:flex; gap:4px; overflow-x:auto; margin:18px 0 0; padding:8px; border:1px solid #dcdcde; border-radius:10px; background:#fff; }
.cl-header-admin-tabs button { flex:0 0 auto; padding:9px 15px; border:0; border-radius:7px; background:transparent; color:#1d2327; font-weight:700; cursor:pointer; }
.cl-header-admin-tabs button.is-active { background:#2271b1; color:#fff; }
.cl-header-tab-panel { display:none; }
.cl-header-tab-panel.is-active { display:block; }
.cl-header-setting-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 18px; margin:14px 0; }
.cl-header-setting-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cl-header-setting-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cl-header-field { display:grid; gap:7px; min-width:0; }
.cl-header-field > span:first-child, .cl-header-media-field > label { color:#1d2327; font-weight:700; }
.cl-header-field input[type=text], .cl-header-field input[type=url], .cl-header-field input[type=number], .cl-header-field select, .cl-header-media-field input { width:100%; max-width:none; min-height:38px; }
.cl-header-field--color > span:last-child { display:flex; align-items:center; gap:8px; }
.cl-header-field--color input { width:58px; height:38px; padding:2px; }
.cl-header-number-wrap { display:flex; align-items:center; gap:7px; }
.cl-header-number-wrap em { color:#646970; font-style:normal; }
.cl-header-toggle { display:flex; align-items:center; gap:8px; min-height:38px; font-weight:700; }
.cl-header-media-field { min-width:0; }
.cl-header-media-field input { margin:7px 0; }
.cl-header-media-field img { display:block; max-width:260px; max-height:100px; margin-top:9px; border:1px solid #dcdcde; border-radius:7px; object-fit:contain; }
.cl-header-menu-builder { display:grid; gap:8px; }
.cl-header-menu-builder > div { display:grid; grid-template-columns:180px minmax(0,1fr); gap:8px; }
.cl-header-live-preview { overflow:hidden; border:1px solid #dcdcde; border-radius:10px; background:var(--preview-bg,#050604); color:var(--preview-text,#fffaec); }
.cl-header-live-preview__announcement { display:flex; align-items:center; justify-content:center; min-height:34px; padding:4px 15px; background:var(--preview-ann-bg,#b7ff16); color:var(--preview-ann-text,#071006); font-size:12px; font-weight:800; }
.cl-header-live-preview__bar { display:flex; align-items:center; gap:22px; min-height:var(--preview-height,82px); padding:12px 22px; }
.cl-header-live-preview__bar > strong { font-size:20px; }
.cl-header-live-preview nav { display:flex; gap:var(--preview-gap,20px); margin-right:auto; }
.cl-header-live-preview nav span { font-size:13px; font-weight:800; letter-spacing:.04em; }
.cl-header-live-preview__bar > div { display:flex; align-items:center; gap:10px; }
.cl-header-live-preview button { min-height:38px; padding:0 18px; border:0; border-radius:var(--preview-radius,999px); background:linear-gradient(180deg,var(--preview-cta1,#c9ff31),var(--preview-cta2,#96e800)); color:var(--preview-cta-text,#071006); font-weight:900; }
.cl-header-compat-box { margin-top:18px; padding:14px; border-left:4px solid #2271b1; background:#f0f6fc; }
.cl-header-savebar { position:sticky; bottom:0; z-index:60; display:flex; align-items:center; gap:14px; margin-top:18px; padding:13px 16px; border:1px solid #dcdcde; border-radius:10px; background:rgba(255,255,255,.96); box-shadow:0 -8px 26px rgba(0,0,0,.08); }
.cl-header-savebar span { color:#646970; }
@media (max-width: 900px) { .cl-header-setting-grid--2,.cl-header-setting-grid--3 { grid-template-columns:1fr; } .cl-header-admin__hero { flex-direction:column; } .cl-header-menu-builder > div { grid-template-columns:1fr; } .cl-header-live-preview nav { display:none; } }

body.dm-header-skin-enabled .main-header-menu > .dm-header-action-search { margin-left: 0; }
body.dm-header-skin-enabled .main-header-menu > .menu-item:not(.dm-header-action) + .dm-header-action { margin-left: 34px; }
.dm-header-search-panel input { background: var(--dm-header-bg, #050604); }
@supports (background: color-mix(in srgb, #000 80%, #fff 5%)) {
  .dm-header-search-panel input { background: color-mix(in srgb, var(--dm-header-bg, #050604) 80%, #fff 5%); }
}

/* ==================================================================
 * v3.7.5 — desktop header row
 *
 * v3.7.4 forced .main-header-bar .ast-container into a flex row. Astra already
 * lays that container out itself, and overriding it made the brand and the first
 * menu item overlap. That override is removed.
 *
 * What is left is the minimum that lets a long menu share the row instead of
 * pushing the brand onto its own line: the flex children are allowed to shrink.
 * Astra's own alignment is otherwise untouched, and the mobile header is not
 * covered by this rule at all.
 * ================================================================== */

/* The merchant name must stay readable when Astra shares the mobile logo row. */
body.dm-header-skin-enabled .site-title,
body.dm-header-skin-enabled .site-title a {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
body.dm-header-skin-enabled .site-branding {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 921px) {
  body.dm-header-skin-enabled .ast-site-title-wrap { min-width: 0; }
  body.dm-header-skin-enabled .site-title a {
    display: block;
    max-width: min(42vw, 18rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 922px) {
  body.dm-site-shell-enabled .ast-main-header-bar-alignment,
  body.dm-site-shell-enabled .main-header-bar-navigation,
  body.dm-site-shell-enabled .site-branding {
    min-width: 0;
  }

  /* The brand must never be squeezed to the point of wrapping mid word. */
  body.dm-site-shell-enabled .site-branding {
    flex-shrink: 0;
  }
  body.dm-site-shell-enabled .site-title,
  body.dm-site-shell-enabled .site-title a {
    white-space: nowrap;
  }

  /* A long menu wraps its own items rather than displacing the brand. */
  body.dm-site-shell-enabled ul.main-header-menu,
  body.dm-site-shell-enabled ul.ast-nav-menu {
    min-width: 0;
  }
}

/* Sticky offset accounts for the admin bar without styling it. */
body.dm-site-shell-enabled .ast-sticky-active,
body.dm-site-shell-enabled .dm-header--sticky {
  top: calc(var(--dm-admin-bar-offset, 0px) + var(--dm-header-sticky-offset, 0px));
}

/* ─── overlap contract ───────────────────────────────────────────────
 *
 * `dm-header-hero-overlap-enabled` is a body-level (sitewide) Detail
 * toggle, but the compensation it pairs with — the negative margin on
 * `.entry-content.clear > .dm-page-assembly:first-child` above — can only
 * ever match the composed home. Every other surface kept an absolutely
 * positioned header, which is out of flow, with nothing reserving its
 * height: Shop drew ALL PRODUCTS at 109px under a header spanning 32-138,
 * Account drew WELCOME BACK at 121px, Checkout its back link at 120px.
 *
 * Reserving a height per surface would need a header height this
 * stylesheet cannot know — measured live it is 106px at 1440 but 65px at
 * 820, because Astra rebuilds the bar at its own breakpoints. So instead
 * the header is returned to normal flow wherever there is no hero to
 * overlay. In flow it occupies exactly its own height at every width, so
 * nothing has to be computed and no surface needs a rule of its own.
 *
 * :where() holds the specificity at [0,1,2] — equal to the absolute rule
 * above, so source order decides it, and still under the [0,2,2] sticky
 * rule, which stays authoritative: a sticky header is already in flow.
 * A browser without :has() drops this rule and keeps today's behaviour.
 */
body.dm-header-hero-overlap-enabled:where(:not(:has(.entry-content.clear > .dm-page-assembly:first-child))) .site-header {
  /* Stay in flow while retaining ownership of the header scrim and scroll panel.
   * Static positioning makes their absolute inset resolve against the full page. */
  position: relative;
}

/* ─── header menu spacing ────────────────────────────────────────────
 *
 * Astra's `ol, ul { margin-bottom: 1.5em }` (main.min.css) is body
 * typography, but it also lands on the header's own menu list. Measured:
 * the menu is 80px tall and that paragraph spacing added 24px, making
 * .ast-primary-header-bar 104px — overshooting the `min-height:
 * var(--dm-header-height)` set earlier in this file and leaving the
 * variable describing 96px while the header rendered 106px. The home
 * overlap then pulled up 96px against a 106px header.
 *
 * Scoped to the header's menu only; page content keeps Astra's spacing.
 */
body.dm-header-skin-enabled .site-header .main-header-menu,
body.dm-header-skin-enabled .site-header .ast-nav-menu,
body.dm-header-skin-enabled #masthead .main-header-menu,
body.dm-header-skin-enabled #masthead .ast-nav-menu {
  margin-bottom: 0;
}

/* GB chrome fit: preserve renderer identity and the existing positioning contract. */
@media (min-width:922px) {
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-builder-grid-row { grid-template-columns:auto minmax(0,1fr); column-gap:24px; align-items:center; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .site-branding { display:flex; align-items:center; gap:12px; padding-block:8px; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .site-logo-img { padding:0; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .custom-logo-link img { width:auto; max-width:140px; height:auto; max-height:64px !important; object-fit:contain; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-site-title-wrap { min-width:0; max-width:180px; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .site-title a { display:block; overflow:hidden; text-overflow:ellipsis; font-size:12px !important; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-builder-layout-element { margin-inline:0; padding-inline:0; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-main-header-bar-alignment { margin-left:0; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu { flex-wrap:nowrap; align-items:center; gap:12px !important; margin:0; padding:0; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu > .menu-item { flex:0 0 auto; height:auto; min-height:44px; margin:0; align-items:center; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu > .menu-item > .menu-link { display:inline-flex; align-items:center; min-height:44px; height:auto; line-height:1.35; padding:8px 6px !important; font-size:12px !important; white-space:nowrap; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu > .dm-header-action .menu-link { justify-content:center; min-width:40px; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu .dm-header-cta-link { min-height:44px !important; padding:10px 16px !important; margin:0; clip-path:none; transform:none; }
}
/* Keep Green Badger chrome on one readable row until Astra switches to its mobile header. */
@media (min-width:922px) and (max-width:1199px) {
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-builder-grid-row { grid-template-columns:auto minmax(0,1fr); column-gap:14px; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .site-header-section { min-width:0; justify-content:flex-start; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .site-header-primary-section-right { justify-content:flex-end; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .custom-logo-link img { max-width:72px; max-height:56px !important; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .ast-site-title-wrap,
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .dm-header-action-label { display:none !important; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu { justify-content:flex-end; gap:6px !important; padding-bottom:0; }
 body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-inline:5px !important; }
}
/* Astra places ast-header-break-point on BODY. Style its native dropdown
 * without changing the native open/closed behavior. */
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content,
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .main-header-menu { background:var(--dm-header-bg-mobile,var(--dm-header-bg,#0b0b0a)) !important; color:var(--dm-header-text,#f4f1e8); }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content { max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain; border-bottom:1px solid var(--dm-header-border,rgba(184,154,91,.35)); }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .ast-builder-menu-mobile,
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .ast-main-header-bar-alignment { width:100%; margin:0; padding:0; }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .main-header-menu { display:flex; flex-direction:column; align-items:stretch; gap:0 !important; width:100%; margin:0; padding:12px 24px; }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .main-header-menu > .menu-item { width:100%; margin:0; min-height:44px; height:auto; }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .menu-link { display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:44px; height:auto; padding:10px 12px !important; line-height:1.5; color:var(--dm-header-text,#f4f1e8) !important; }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .ast-mobile-header-content .dm-header-cta-link { width:fit-content; margin:8px 0; min-height:44px !important; color:var(--dm-header-cta-text,#0b0b0a) !important; clip-path:none; }
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .menu-toggle,
body.dm-pack-green-badger.dm-header-skin-enabled.ast-header-break-point #masthead .menu-toggle svg { color:var(--dm-header-accent,#b89a5b) !important; fill:currentColor !important; }
body.dm-pack-green-badger #masthead a:focus-visible,
body.dm-pack-green-badger #masthead button:focus-visible { outline:2px solid var(--dm-header-accent,#b89a5b); outline-offset:3px; }
body.dm-pack-green-badger.ast-header-break-point #masthead .ast-mobile-header-content .menu-link:focus-visible {
  background:color-mix(in srgb, var(--dm-header-accent,#b89a5b) 16%, transparent);
}

/* GB desktop readability: keep the existing header row and touch targets. */
@media (min-width:1200px) {
  body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .custom-logo-link img {
    width:80px;
    height:80px;
    max-height:80px !important;
    object-fit:contain;
  }
  body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu {
    gap:16px !important;
  }
  body.dm-pack-green-badger.dm-header-skin-enabled #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    font-size:14px !important;
  }
}

/* A verified Pack wordmark already supplies the accessible site identity. */
body.dm-header-pack-logo .site-branding .site-title { display: none; }

/* Astra assigns its own fill directly to the mobile trigger SVG. */
body.dm-header-skin-enabled #masthead .menu-toggle svg { fill: currentColor !important; }

/* The mobile navigation is a vertical touch list, independent of desktop flex rows. */
body.dm-header-skin-enabled.ast-header-break-point:not(.dm-pack-green-badger) #masthead .ast-mobile-header-content,
body.dm-header-skin-enabled.ast-header-break-point:not(.dm-pack-green-badger) #masthead .ast-mobile-header-content .main-navigation {
  background: var(--dm-header-bg-mobile, var(--dm-header-bg));
}
body.dm-header-skin-enabled.ast-header-break-point:not(.dm-pack-green-badger) #masthead .ast-mobile-header-content .main-header-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  margin: 0 !important;
  padding: 12px 16px;
  background: var(--dm-header-bg-mobile, var(--dm-header-bg));
}
body.dm-header-skin-enabled.ast-header-break-point:not(.dm-pack-green-badger) #masthead .ast-mobile-header-content .main-header-menu > li {
  width: 100%;
  margin: 0;
}
body.dm-header-skin-enabled.ast-header-break-point:not(.dm-pack-green-badger) #masthead .ast-mobile-header-content .main-header-menu > li > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px !important;
  color: var(--dm-header-text) !important;
  line-height: 1.5;
}