/* 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.
 * ================================================================== */

@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));
}
