/* DUNEUS · Header
 * Owns the header presentation end to end. Structure comes from the rebuilt
 * header components, so these are first-class layout rules on DUNEUS classes —
 * not overrides of Soft Theme selectors.
 * ------------------------------------------------------------------------ */
/* ===========================================================================
 * 1 · SHELL
 * Three stacked bands: announcement / utility / main. The main band is the
 * only one that sticks.
 * ======================================================================== */
.dn-header {
  position: relative;
  z-index: 50;
  color: var(--dn-hdr-fg, #fff);
  /* No background: this element is a structural wrapper only. .dn-topbar and
     .dn-header__main paint their own surfaces, so a background here would sit
     opaque behind them and defeat transparent mode. */
}
/* Sticky is opt-in from the merchant setting; #fixed-header keeps the id the
   platform/theme scripts already look for. */
.dn-header__inner {
  max-width: var(--d-max);
  margin-inline: auto;
  padding-inline: var(--d-gutter);
}
@media (min-width: 992px) {
.dn-utility { display: block; }
}
/* ===========================================================================
 * 3 · MAIN BAR
 * Three zones. Logo leads, navigation takes the centre, actions trail.
 * Grid (not flex) so the centre column stays optically centred regardless of
 * how wide the logo or the action cluster get.
 * ======================================================================== */
.dn-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: 76px;
  transition: height var(--d-base) var(--d-ease);
}
@media (max-width: 991.98px) {
.dn-bar { height: 60px; gap: 0.5rem; }
}
.dn-bar__zone { display: flex; align-items: center; min-width: 0; }
.dn-bar__zone--start { justify-content: flex-start; gap: 0.25rem; }
.dn-bar__zone--center { justify-content: center; }
.dn-bar__zone--end { justify-content: flex-end; gap: 0.15rem; }
/* Logo ------------------------------------------------------------------ */
.dn-logo { display: flex; align-items: center; height: 100%; }
.dn-logo img {
  display: block;
  width: auto;
  height: 30px;
  max-height: 100%;
  object-fit: contain;
  transition: height var(--d-base) var(--d-ease);
}
@media (max-width: 991.98px) {
.dn-logo img { height: 24px; }
/* Mobile: logo is optically centred between the two icon clusters. */
}
/* Icon buttons ---------------------------------------------------------- */
.dn-iconbtn {
  all: unset;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--dn-hdr-fg, #fff);
  border-radius: var(--d-radius-ctl);
  transition: color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease);
}
.dn-iconbtn:hover { background: rgba(255, 255, 255, 0.06); }
.dn-iconbtn:focus-visible { outline: 2px solid var(--dn-hdr-accent, #FF5100); outline-offset: -2px; }
.dn-iconbtn [class^='icon-'],
.dn-iconbtn [class*=' icon-'] { font-size: 21px; line-height: 1; }
/* Cart count rides the top-trailing corner of its button. */
.dn-cartcount {
  position: absolute;
  top: 5px;
  inset-inline-end: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dn-hdr-accent, #FF5100);
  color: var(--dn-hdr-fg, #fff);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
}
/* Cart subtotal beside the icon — desktop only, quiet. */
.dn-carttotal {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dn-hdr-muted, rgba(255,255,255,.38));
  margin: 0;
  white-space: nowrap;
}
.dn-carttotal:empty { display: none; }
@media (max-width: 1199.98px) {
.dn-carttotal { display: none; }
}
/* ===========================================================================
 * 4 · NAVIGATION + MEGA MENU
 * The nav sits inside the main bar on desktop. Each top-level item owns a
 * full-bleed panel that drops below the bar.
 * ======================================================================== */
.dn-nav { display: none; }
@media (min-width: 992px) {
.dn-nav {
    display: flex;
    align-items: center;
    gap: var(--dn-nav-gap, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
  }
}
.dn-nav__item { position: static; display: flex; align-items: center; height: 100%; }
.dn-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: 0.9rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--dn-hdr-fg, #fff);
  white-space: nowrap;
}
.dn-nav__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0.9rem;
  inset-inline-end: 0.9rem;
  bottom: 18px;
  height: 2px;
  background: var(--dn-hdr-accent, #FF5100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--d-ease);
}
[dir='rtl'] .dn-nav__link::after { transform-origin: right center; }
.dn-nav__item:hover .dn-nav__link::after,
.dn-nav__item:focus-within .dn-nav__link::after { transform: scaleX(1); }
/* Highlight rail: a campaign or sale entry can be flagged by the merchant's
   own menu label; we colour it rather than adding a fake badge. */
.dn-nav__link--accent { color: var(--dn-hdr-accent, #FF5100); }
/* Mega panel ------------------------------------------------------------ */
.dn-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--d-ink);
  border-top: 1px solid var(--d-line);
  border-bottom: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d-base) var(--d-ease),
              transform var(--d-base) var(--d-ease),
              visibility 0s linear var(--d-base);
  z-index: 40;
}
.dn-nav__item:hover .dn-mega,
.dn-nav__item:focus-within .dn-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.dn-mega__inner {
  max-width: var(--d-max);
  margin-inline: auto;
  padding: 2.5rem var(--d-gutter) 3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}
.dn-mega__col { min-width: 0; }
.dn-mega__head {
  display: block;
  padding-block-end: 0.85rem;
  margin-block-end: 1rem;
  border-bottom: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-micro);
  font-weight: 800;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--dn-hdr-fg, #fff);
}
.dn-mega__list { list-style: none; margin: 0; padding: 0; }
.dn-mega__list li { margin-block-end: 0.15rem; }
.dn-mega__link {
  display: block;
  padding-block: 0.4rem;
  font-size: var(--d-fs-sm);
  color: var(--dn-hdr-muted, rgba(255,255,255,.58));
  transition: color var(--d-fast) var(--d-ease), padding-inline-start var(--d-fast) var(--d-ease);
}
.dn-mega__link:hover { color: var(--dn-hdr-fg, #fff); padding-inline-start: 0.3rem; }
/* Arabic: no case to upper, and tracking damages joined letterforms. */
[dir='rtl'] .dn-nav__link,
[dir='rtl'] .dn-mega__head,
[dir='rtl'] .dn-utility__btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--d-fs-sm);
}
/* ===========================================================================
 * 5 · SEARCH
 * Desktop: an inline field that only draws a rule until focused.
 * Mobile: a full-width sheet under the bar, opened by the icon.
 * ======================================================================== */
.dn-search { position: relative; width: 100%; max-width: 420px; }
.dn-search__field {
  width: 100%;
  height: 42px;
  padding-inline: 2rem 0.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  border-radius: 0;
  color: var(--dn-hdr-fg, #fff);
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-sm);
  transition: border-color var(--d-fast) var(--d-ease);
}
.dn-search__field::placeholder { color: var(--dn-hdr-muted, rgba(255,255,255,.38)); }
.dn-search__field:focus {
  outline: none;
  border-bottom-color: var(--dn-hdr-accent, #FF5100);
  background: transparent;
  color: var(--dn-hdr-fg, #fff);
}
.dn-search__icon {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dn-hdr-muted, rgba(255,255,255,.38));
  font-size: 18px;
  pointer-events: none;
}
/* Autocomplete panel */
.dn-search .autocomplete-items {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 1px);
  background: var(--d-ink);
  border: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  max-height: 60vh;
  overflow-y: auto;
  z-index: 60;
}
.dn-search .autocomplete-items > div {
  padding: 0.8rem 1rem;
  font-size: var(--d-fs-sm);
  color: var(--dn-hdr-muted, rgba(255,255,255,.58));
  border-bottom: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  cursor: pointer;
}
.dn-search .autocomplete-items > div:hover { background: var(--d-surface-2); color: var(--dn-hdr-fg, #fff); }
/* Mobile search sheet */
.dn-search-sheet {
  display: block;
  overflow: hidden;
  max-height: 0;
  border-bottom: 0 solid var(--d-line);
  transition: max-height var(--d-base) var(--d-ease);
}
.dn-search-sheet.is-open {
  max-height: 96px;
  border-bottom-width: 1px;
}
.dn-search-sheet__inner {
  max-width: var(--d-max);
  margin-inline: auto;
  padding: 0.85rem var(--d-gutter);
}
/* The search sheet is the search UI on every breakpoint (there is no separate
   desktop search field in these header layouts), so it must open on desktop too
   — it was previously hidden ≥992px, which left desktop search dead. */
@media (min-width: 992px) {
  .dn-search-sheet.is-open { max-height: 104px; }
}
/* ===========================================================================
 * 6 · MOBILE DRAWER
 * The platform's SlideMenu owns open/close and submenu paging; this restyles
 * its surface without touching that structure.
 * ======================================================================== */
/* ===========================================================================
 * 7 · ANNOUNCEMENT BAR
 * Ticker mechanics (.announcement-ticker / .ticker-wrap / #ticker-item-template)
 * belong to the platform component and are untouched — only the skin changes.
 * ======================================================================== */
.dn-announce,
body .announcement-bar {
  background: var(--dn-hdr-accent, #FF5100);
  color: var(--dn-hdr-fg, #fff);
}
body .announcement-bar .announcement-text,
.dn-announce .announcement-text {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: inherit;
}
[dir='rtl'] body .announcement-bar .announcement-text {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--d-fs-sm);
}
body .announcement-bar .ticker-item { gap: 0.5rem; }
body .announcement-bar a { color: inherit; }
body .announcement-bar a:hover { color: inherit; text-decoration: underline; }
/* Store/payment-session messages sit under the announcement, muted. */
body .availability-bar,
body .payment-session-bar {
  background: var(--d-surface);
  border-bottom: 1px solid var(--dn-hdr-border, rgba(255,255,255,.14));
  color: var(--dn-hdr-fg, #fff);
  font-size: var(--d-fs-sm);
  padding-block: 0.6rem;
}
/* ===========================================================================
 * 8 · REDUCED MOTION
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
.dn-bar,
  .dn-logo img,
  .dn-mega,
  .dn-nav__link::after,
  .dn-search-sheet { transition: none !important; }
}
.duneus-lang-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  background: #0a0a0a; color: #fff;
  transform: translateY(100%); transition: transform .3s ease;
  border-radius: 16px 16px 0 0; padding: 1.5rem 0 2rem;
}
.duneus-lang-sheet.open { transform: translateY(0); }
.duneus-lang-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 0;
}
.duneus-lang-sheet-head h3 { font-size: 1.1rem; text-transform: uppercase; font-weight: 900; }
.duneus-lang-sheet-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.duneus-lang-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; font-size: 1rem; color: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.duneus-lang-option.is-selected { background: #fff; color: #000; font-weight: 700; }
.duneus-lang-check { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.duneus-lang-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 109;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.duneus-lang-sheet-overlay.open { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) {
.duneus-lang-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(420px, 90vw);
    transform: translate(-50%, -50%) scale(.94); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    border-radius: 8px; padding: 1.5rem 0 1rem;
  }
.duneus-lang-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
}
.dn-announce-wrap, .duneus-announce-wrap {
  position: relative;
  background: var(--duneus-announce-bg, #FF5100); color: var(--duneus-announce-text, #000);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 2.5rem;
  overflow: hidden;
}
.dn-announce-track, .duneus-announce-track { position: relative; }
.dn-announce-slide, .duneus-announce-slide {
  display: none; align-items: center; justify-content: var(--announce-align, center); gap: .6rem; width: 100%;
  animation: duneus-announce-fade .4s ease;
}
.dn-announce-cta, .duneus-announce-cta { display: inline-flex; align-items: center; gap: .3rem; color: inherit; font-weight: 900; white-space: nowrap; }
.dn-announce-cta, .duneus-announce-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
[dir="rtl"] .dn-announce-cta, .duneus-announce-cta svg { transform: scaleX(-1); }
.dn-announce-slide, .duneus-announce-slide.is-active { display: flex; }
.dn-announce-icon, .duneus-announce-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.dn-announce-text, .duneus-announce-text a, a.dn-announce-text, .duneus-announce-text { color: inherit; }
.dn-announce-countdown, .duneus-announce-countdown { font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: 0; }
.dn-announce-code, .duneus-announce-code {
  background: rgba(0,0,0,.15); padding: .1rem .5rem; border-radius: 2px; font-weight: 900; letter-spacing: .04em;
}
.dn-announce-copy, .duneus-announce-copy {
  background: rgba(0,0,0,.85); color: #fff; border: none; padding: .15rem .6rem;
  font-size: .85em; font-weight: 700; letter-spacing: .02em; border-radius: 2px; cursor: pointer; text-transform: none;
}
.dn-announce-arrow, .duneus-announce-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; color: inherit; font-size: 1.3rem; line-height: 1; padding: 0 .4rem; cursor: pointer;
}
.dn-announce-prev, .duneus-announce-prev { inset-inline-start: .5rem; }
.dn-announce-next, .duneus-announce-next { inset-inline-end: .5rem; }
.dn-announce-close, .duneus-announce-close {
  position: absolute; top: 50%; inset-inline-end: .6rem; transform: translateY(-50%);
  background: none; color: inherit; opacity: .7;
}
.dn-announce-close, .duneus-announce-close:hover { opacity: 1; }
.dn-announce-close, .duneus-announce-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Removed: ported rules that hid the logo (unconditional opacity:0 +
   position:absolute on .dn-logo-full, height:auto overriding the sized logo)
   and that replaced the .dn-bar grid with a flex row.
   The layout module + the corrections block below own these. */
.dn-logo span { color: var(--duneus-accent, #FF5100); }
.dn-nav { display: flex; align-items: center; line-height: 1; gap: var(--dn-nav-gap, 24px); }
.dn-nav a { position: relative; padding-block: .25rem; unicode-bidi: plaintext; }
.dn-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
}
.dn-iconbtn svg,
.dn-mobilenav-toggle svg {
  width: var(--duneus-icon-size, 19px); height: var(--duneus-icon-size, 19px);
  stroke: currentColor; fill: none; stroke-width: var(--duneus-icon-thickness, 1.5);
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
.dn-iconbtn:hover svg { stroke: var(--duneus-accent, #FF5100); }
.dn-iconbtn:hover svg.duneus-icon-fill { fill: var(--duneus-accent, #FF5100); stroke: var(--duneus-accent, #FF5100); }
.dn-cartcount {
  position: absolute; top: -8px; inset-inline-end: -10px;
  background: var(--duneus-accent, #FF5100); color: #000;
  font-size: .6rem; font-weight: 900; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dn-mobilenav-toggle { display: none; }
.dn-hamburger { position: relative; width: 24px; height: 24px; }
.dn-hamburger--morph { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dn-hamburger-line { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.dn-hamburger--morph.is-active .dn-hamburger-line--1 { transform: translateY(4px) rotate(45deg); }
.dn-hamburger--morph.is-active .dn-hamburger-line--2 { transform: translateY(-4px) rotate(-45deg); }
.dn-nav--start { justify-content: flex-start; }
.dn-nav--center { justify-content: center; flex: 1; }
.dn-nav--end { justify-content: flex-end; flex: 1; }
.dn-nav--underline a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--duneus-accent, #FF5100); transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
[dir="rtl"] .dn-nav--underline a::after { transform-origin: left; }
.dn-nav--underline a:hover::after { transform: scaleX(1); }
.dn-nav a { position: relative; padding-block: .25rem; unicode-bidi: plaintext; }
.dn-mobilenav {
  position: fixed; top: 0; height: 100%; z-index: 101;
  transform: translateX(105%); transition: transform .3s ease;
  display: flex; flex-direction: column; padding: 2rem 1.5rem;
  overflow-y: auto;
}
.dn-mobilenav--drawer { width: min(340px, 88vw); }
.dn-mobilenav--fullscreen { width: 100%; }
.dn-mobilenav--start { inset-inline-start: 0; }
.dn-mobilenav--end { inset-inline-end: 0; }
[dir="ltr"] .dn-mobilenav--start { transform: translateX(-105%); }
.dn-mobilenav.open { transform: translateX(0) !important; }
.dn-mobilenav-close { align-self: flex-end; margin-bottom: 2rem; color: inherit; }
.dn-mobilenav-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.dn-mobilenav-links { display: flex; flex-direction: column; gap: 1.4rem; text-transform: uppercase; font-weight: 700; }
.dn-mobilenav-utility { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: .8rem; font-size: .85rem; opacity: .7; }
.dn-mobilenav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,var(--overlay-opacity, .6)); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.dn-mobilenav-overlay.open { opacity: 1; pointer-events: auto; }
.dn-mobilenav-sublink { font-size: .75em; opacity: .7; text-transform: none; font-weight: 500; margin-inline-start: 1rem; }
.dn-mobilenav-socials { display: flex; gap: 1rem; margin-top: 1.5rem; font-size: .8rem; text-transform: uppercase; opacity: .7; }
.dn-nav__item { position: relative; }
.dn-mega {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: .5rem;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); min-width: 180px;
  display: flex; flex-direction: column; padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s ease; z-index: 60;
}
.dn-mega--mega { min-width: 320px; flex-direction: row; flex-wrap: wrap; padding: 1rem; gap: .5rem 1.5rem; }
.dn-nav__item:hover .dn-mega, .dn-nav__item:focus-within .dn-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dn-mega a { padding: .5rem 1.2rem; font-size: .8rem; text-transform: none; letter-spacing: normal; }
.dn-mega a:hover { color: var(--duneus-accent, #FF5100); }
.dn-nav__item.has-dropdown > a::after { content: '▾'; margin-inline-start: .3rem; font-size: .7em; }
.dn-bar--center-split { display: flex; align-items: center; }
.dn-bar--center-split .dn-nav { flex: 1; }
.dn-bar--center-split .dn-nav:first-of-type { justify-content: flex-end; }
.dn-bar--center-split .dn-nav:last-of-type { justify-content: flex-start; }
.dn-bar--center-split .dn-bar__zone--end { margin-inline-start: 1.5rem; }
.dn-bar--stacked-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .85rem; padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.dn-bar--stacked-nav {
  display: flex; justify-content: center;
  padding-block: .6rem; padding-inline: clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.dn-bar--stacked-nav .dn-nav { justify-content: center; }
.dn-bar--minimal {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(1.25rem, 5vw, 4rem); min-height: var(--duneus-header-height, 76px);
}
.dn-header__main--minimal .dn-mobilenav-toggle { display: flex !important; }
@media (max-width: 860px) {
.dn-nav { display: none; }
.dn-mobilenav-toggle { display: block; }
.dn-bar { justify-content: space-between; }
.dn-mobilenav-toggle { order: 3; margin-inline-start: .4rem; }
}
.duneus-preloader-logo-pulse .dn-logo { font-size: calc(var(--preloader-size, 56px) * .5); }
.duneus-lang-option--region {
  width: 100%; background: none; border: 0; cursor: pointer;
  border-top: 1px solid var(--duneus-muted, rgba(255,255,255,0.15));
  color: inherit; font: inherit; text-align: start;
}
/* Transparent header sits over the hero until scrolled past the threshold. */
/* Logo crossfade: icon while transparent, full wordmark once scrolled. */
.dn-logo { position: relative; display: inline-flex; align-items: center; }
/* Logo alignment (reference branding_logo_alignment) */
.dn-logo--center { margin-inline: auto; }
.dn-logo--end { margin-inline-start: auto; }
/* --- center-split: nav | logo | icons --- */
@media (min-width: 992px) {
.dn-bar--center-split { grid-template-columns: 1fr auto 1fr; }
.dn-bar--center-split .dn-bar__zone--start { justify-content: flex-start; }
}
/* --- stacked: logo row over full-width nav row --- */
.dn-bar--stacked-top { grid-template-columns: auto 1fr auto; }
.dn-bar--stacked-nav {
  display: none;
  height: auto;
  padding-block: 0.35rem 0.75rem;
  border-top: 1px solid var(--d-line-soft);
}
@media (min-width: 992px) {
.dn-bar--stacked-nav { display: flex; justify-content: center; }
.dn-header--stacked .dn-bar__zone--center .dn-nav-wrapper { display: none !important; }
}
/* --- minimal: logo + icons only, nav always in the drawer --- */
.dn-header--minimal .dn-nav-wrapper { display: none !important; }
.dn-header--minimal .dn-hamburger { display: inline-flex !important; }
/* Nav alignment (reference navbar_alignment) */
.dn-nav--start { justify-content: flex-start; }
.dn-nav--center { justify-content: center; }
.dn-nav--end { justify-content: flex-end; }
/* Underline animation is opt-in per the reference toggle. */
.dn-nav:not(.dn-nav--underline) .dn-nav__link::after { display: none; }
/* Icon buttons honour the reference size/thickness custom properties. */
.dn-iconbtn .dn-icon {
  width: var(--duneus-icon-size, 19px);
  height: var(--duneus-icon-size, 19px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--duneus-icon-thickness, 1.5);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dn-iconbtn .dn-icon.duneus-icon-fill { fill: currentColor; stroke: none; }
.dn-cartwrap { position: relative; display: inline-flex; }
/* Hamburger morph variant */
.dn-hamburger--morph { flex-direction: column; gap: 5px; }
.dn-hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--d-fast) var(--d-ease);
}
/* Mobile: hide desktop-only logo variants cleanly */
@media (max-width: 991.98px) {
.dn-bar--stacked-nav { display: none; }
}
/* ===========================================================================
 * HEADER — REFERENCE STRUCTURE
 * Row 1  .dn-topbar   black bar: announcement (start) + region (end)
 * Row 2  .dn-header__main  transparent over hero: logo · nav · search |
 *                          utility links · auth · wishlist · cart
 * Both rows share one container so their content edges align.
 * ======================================================================== */
/* --- Shared container --- */
.dn-topbar__inner,
.dn-header__inner {
  width: 100%;
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--d-gutter);
}
/* ===========================================================================
 * ROW 1 — TOP BAR
 * ======================================================================== */
/* DELIBERATE: the announcement/region band keeps its configured background
   even in transparent mode — the reference header shows a solid band above a
   transparent nav. It is the only painted surface in the header while
   body.dn-transparent:not(.dn-scrolled). Set its colour to `transparent` in
   Colors -> Announcement Bar Colors if a fully see-through header is wanted. */
.dn-topbar {
  background: var(--duneus-announce-bg, #000);
  color: var(--duneus-announce-text, #fff);
  position: relative;
  z-index: 60;
}
.dn-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 38px;
}
.dn-topbar__start { flex: 1 1 auto; min-width: 0; }
.dn-topbar__end { flex: 0 0 auto; }
/* The announcement component keeps its markup but sheds its own bar chrome —
   the top bar owns the background and the container. */
.dn-topbar .duneus-announce-wrap,
.dn-topbar .dn-announce-wrap,
.dn-topbar .announcement-bar {
  background: transparent !important;   /* top bar owns the surface */
  color: inherit;
  padding: 0;
  overflow: visible;
  max-width: none;
  margin: 0;
}
.dn-topbar .duneus-announce-wrap > .duneus-announce-track,
.dn-topbar .dn-announce-wrap > .dn-announce-track {
  max-width: none;
  margin: 0;
  padding-block: 0.55rem;
  padding-inline: 0;
  min-height: 0;
}
.dn-topbar .duneus-announce-slide,
.dn-topbar .dn-announce-slide {
  justify-content: var(--announce-align, flex-start);          /* reference aligns to the start */
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  text-align: start;
  line-height: 1.5;
}
/* Arrows/close are absolute in the ported CSS; keep them inside the row. */
  /* Arrows are laid out beside the message further down. */
.dn-topbar .duneus-announce-close,
.dn-topbar .dn-announce-close { inset-inline-end: 0; }
/* Top-bar typography: small, wide-tracked caps. */
.dn-topbar,
.dn-topbar .duneus-announce-text,
.dn-topbar .duneus-announce-cta,
.dn-topbar__btn {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
[dir='rtl'] .dn-topbar,
[dir='rtl'] .dn-topbar__btn { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
/* Region controls (ENGLISH ▾  SAUDI ARABIA ▾) */
.dn-topbar__region { display: flex; align-items: center; gap: 1.5rem; }
.dn-topbar__btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  unicode-bidi: plaintext;
  transition: color 0.16s ease;
}
.dn-topbar__btn:hover,
.dn-topbar__btn:focus-visible { color: var(--dn-hdr-accent, #FF5100); }
.dn-topbar__caret {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 991.98px) {
.dn-topbar__inner { min-height: 34px; }
.dn-topbar .duneus-announce-slide,
  .dn-topbar .dn-announce-slide { justify-content: var(--announce-align-m, center); gap: 0.3rem 0.75rem; }
.dn-topbar,
  .dn-topbar .duneus-announce-text { font-size: 0.625rem; letter-spacing: 0.08em; }
}
/* ===========================================================================
 * ROW 2 — MAIN BAR
 * Transparent over the hero, no divider. Solid black once scrolled or on any
 * page where the transparent option is off.
 * ======================================================================== */
/* --- Layout: logo → nav → search, all hugging the start edge --- */
@media (min-width: 992px) {
.dn-bar {
    grid-template-columns: auto 1fr auto;
    column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
    height: 66px;
  }
.dn-bar__zone--start { gap: 0; }
.dn-bar__zone--center {
    justify-content: flex-start;
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
  }
.dn-bar__zone--end { gap: 0.25rem; }
.dn-bar--center-split .dn-bar__zone--center,
  .dn-bar--stacked-top .dn-bar__zone--center,
  .dn-bar--minimal .dn-bar__zone--center { justify-content: center; }
/* Nav sits tight to the logo, items evenly spaced. */
/* gap comes from Navigation -> Item spacing (inline on the <ul>). */
/* size / weight / spacing come from the Navigation settings (inline on the
     <ul>), so nothing is hard-coded here. */
.dn-nav__link { padding-inline: 0; }
.dn-nav__link::after { inset-inline: 0; bottom: 20px; }
.dn-searchbtn { margin-inline-start: 0.5rem; }
}
/* Highlighted nav item (SALE) */
.dn-nav__link--accent,
.dn-nav__link--accent:hover { color: var(--dn-hdr-accent, #FF5100); }
/* --- Right cluster text links --- */
.dn-bar__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-inline-end: 0.75rem;
}
.dn-barlink {
  all: unset;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  transition: color 0.16s ease;
}
.dn-barlink:hover,
.dn-barlink:focus-visible { color: var(--dn-hdr-accent, #FF5100); }
[dir='rtl'] .dn-barlink { letter-spacing: 0; text-transform: none; }
/* Icons sit flush; no hover plate in the reference. */
.dn-iconbtn { width: 38px; height: 38px; }
.dn-iconbtn:hover { background: transparent; color: var(--dn-hdr-accent, #FF5100); }
/* Cart count as a small solid dot on the bag. */
.dn-cartcount {
  top: 2px;
  inset-inline-end: 0;
  min-width: 16px;
  height: 16px;
  font-size: 0.5625rem;
}
/* Sticky: the whole header travels (top bar + main bar), matching the
   reference where the announcement scrolls away and the bar pins. */
.dn-header { position: relative; z-index: 100; }
/* Logo sizing — single source of truth (the ported height:auto is gone). */
.dn-logo { position: relative; display: inline-flex; align-items: center; height: 100%; }
.dn-logo img { display: block; width: auto; height: 30px; max-height: 100%; object-fit: contain; }
@media (max-width: 991.98px) {
.dn-logo img { height: 24px; }
}
/* Crossfade only applies when BOTH an icon and a full logo exist. */
/* ===========================================================================
 * MOBILE DRAWER — merchant settings
 * SlideMenu owns the DOM and the open/close behaviour; these only style it.
 * ======================================================================== */
body .dn-drawer {
  background: var(--dn-drawer-bg, #000) !important;
  color: var(--dn-drawer-text, #fff);
}
body .dn-drawer a,
body .dn-drawer .slide-menu-ul-li > a { color: var(--dn-drawer-text, #fff) !important; }
body .dn-drawer .slide-menu-ul-li > a,
body .dn-drawer a.menu-link { font-size: var(--dn-drawer-size, 15px); }
body .dn-drawer ul { background: transparent !important; }
/* Drawer side. SlideMenu also takes a position option at init; this keeps the
   visual side consistent when the setting and the library disagree. */
body .dn-drawer--end { inset-inline-start: auto; inset-inline-end: 0; }
body #sidenav-overlay { background: rgba(0, 0, 0, var(--dn-drawer-overlay, 0.6)); }
/* Hamburger button size (Mobile Menu -> Button size) */
/* ===========================================================================
 * TOP BAR — close button + control chrome
 * The close button was absolutely positioned inside the announcement wrapper,
 * which put it in the middle of the bar (just before the region controls) with
 * a visible button box. It now sits flush at the trailing edge of the whole
 * top bar, borderless, matching the region controls.
 * ======================================================================== */
.dn-topbar__inner { position: relative; }
.dn-topbar .duneus-announce-close,
.dn-topbar .dn-announce-close {
  position: static;
  transform: none;
  order: 99;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-inline-start: 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.16s ease;
}
.dn-topbar .duneus-announce-close:hover { opacity: 1; }
.dn-topbar .duneus-announce-close svg,
.dn-topbar .dn-announce-close svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
/* Arrows: same treatment — flat, no box, tucked beside the text. */
/* Region controls keep no underline/box either. */
.dn-topbar__btn,
.dn-topbar__btn:focus { border: 0; box-shadow: none; text-decoration: none; }
/* Top-bar end cluster holds region controls + the close button. */
.dn-topbar__end { display: flex; align-items: center; gap: 0; }
.dn-topbar__regionwrap { display: flex; align-items: center; }
/* .app becomes the positioning context. */
/* Scrolled past the threshold: the wrapper pins and the bar turns solid. */
/* ===========================================================================
 * HEADER STATE — SINGLE AUTHORITATIVE IMPLEMENTATION
 * ---------------------------------------------------------------------------
 * Three orthogonal states, all expressed as ONE class each on <body>:
 *
 *   body.dn-transparent   header overlays the first section, no background
 *   body.dn-sticky        header pins to the top of the viewport
 *   body.dn-scrolled      viewport scrolled past the threshold
 *
 * dn-transparent and dn-sticky are written by layout.jinja (server-side, from
 * the merchant settings). dn-scrolled is written by duneus-header.js. Nothing
 * else anywhere may toggle transparency, stickiness or the scrolled state.
 *
 * Page structure this relies on (layout.jinja):
 *   .app  >  .header  (wrapper, a flex item)  >  header.dn-header > .dn-header__main
 * ======================================================================== */
/* ---- Base: opaque bar, in normal flow ---- */
.dn-header__main {
  background-color: var(--dn-hdr-bg, #000);
  color: var(--dn-hdr-fg, #fff);
  transition: background-color 0.35s ease, color 0.35s ease;
}
/* ---- Sticky (works with or without transparency) ---- */
/* The WRAPPER sticks, not the inner bar. A sticky child only stays put within
   its parent's box, and `.header` is only as tall as the bar itself — so the
   inner element unstuck the moment the wrapper scrolled away, which is why the
   header never pinned on desktop. */
body.dn-sticky .app > .header {
  position: sticky;
  top: 0;
  z-index: 90;
}
body.dn-sticky .dn-header__main { position: relative; }
/* ---- Transparent: the wrapper leaves the flex flow and overlays ----
   The WRAPPER is what must move: it is a flex item, so it would otherwise
   always reserve its own row and nothing could sit beneath it. */
body.dn-transparent .app { position: relative; }
body.dn-transparent .app > .header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 100;
}
body.dn-transparent .dn-header__main {
  position: static;
  background-color: transparent;
  color: var(--dn-hdr-fg-transparent, #fff);
  border-bottom-color: transparent;
}
/* ---- Scrolled past the threshold: bar pins and gains its background.
   Only the bar pins, so the announcement row scrolls away with the page. ---- */
body.dn-transparent.dn-scrolled .dn-header__main {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background-color: var(--dn-hdr-bg-scrolled, #000);
  color: var(--dn-hdr-fg-scrolled, #fff);
}
/* Non-transparent headers simply darken slightly once scrolled. */
body.dn-scrolled:not(.dn-transparent) .dn-header__main {
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.9);
}
/* ---- Bar shrink on scroll (shared by both modes) ---- */
body.dn-scrolled .dn-bar { height: 60px; }
body.dn-scrolled .dn-logo img { height: 26px; }
/* ---- Logo crossfade: icon while transparent, wordmark once scrolled ---- */
@media (prefers-reduced-motion: reduce) {
.dn-header__main,
  .dn-bar,
  .dn-logo img { transition: none; }
}
/* ===========================================================================
 * HEADER COLOUR STATES
 * One token drives every text/icon colour in the header, so a state change
 * flips the whole bar at once. Sourced from the header's OWN settings
 * (General -> Header Colors), never from the page-level Colors group.
 * ======================================================================== */
/* Default: bar paints its own background, children inherit the text colour. */
.dn-header { color: var(--dn-hdr-fg, #fff); }
.dn-header__main { color: var(--dn-hdr-fg, #fff); }
/* Transparent, before scrolling: over the hero. */
body.dn-transparent .dn-header__main { color: var(--dn-hdr-fg-transparent, #fff); }
/* Scrolled: bar takes its scrolled background and text colour. Every child
   inherits, so nav links, icons, the cart count border and the logo all flip. */
body.dn-transparent.dn-scrolled .dn-header__main {
  background-color: var(--dn-hdr-bg-scrolled, #fff);
  color: var(--dn-hdr-fg-scrolled, #000);
}
/* Children must not re-declare a colour, or they would not follow the state. */
body.dn-transparent .dn-header__main .dn-nav__link,
body.dn-transparent .dn-header__main .dn-barlink,
body.dn-transparent .dn-header__main .dn-iconbtn,
body.dn-transparent .dn-header__main .dn-logo,
body.dn-transparent .dn-header__main .dn-carttotal,
body.dn-transparent .dn-header__main .dn-search__field,
body.dn-transparent .dn-header__main .dn-search__icon { color: inherit; }
/* SVG icons follow the text colour. */
.dn-header__main .dn-icon { stroke: currentColor; }
.dn-header__main .dn-icon.duneus-icon-fill { fill: currentColor; stroke: none; }
/* Hover stays on the accent in both states. */
.dn-header__main .dn-nav__link:hover,
.dn-header__main .dn-barlink:hover,
.dn-header__main .dn-iconbtn:hover { color: var(--dn-hdr-accent, #FF5100); }
/* Scrolled state: dividers and the search underline follow the dark text. */
body.dn-transparent.dn-scrolled .dn-header__main .dn-search__field {
  border-bottom-color: currentColor;
  opacity: 0.9;
}
body.dn-transparent.dn-scrolled .dn-header__main .dn-search__field::placeholder {
  color: currentColor;
  opacity: 0.55;
}
/* Cart count keeps the accent chip in both states. */
.dn-header__main .dn-cartcount {
  background: var(--dn-hdr-accent, #FF5100);
  color: #fff;
}
/* Mega panel is a surface of its own — it follows the scrolled bar colours. */
body.dn-transparent.dn-scrolled .dn-mega {
  background: var(--dn-hdr-bg-scrolled, #fff);
  color: var(--dn-hdr-fg-scrolled, #000);
}
body.dn-transparent.dn-scrolled .dn-mega .dn-mega__head,
body.dn-transparent.dn-scrolled .dn-mega .dn-mega__link { color: inherit; }
/* ===========================================================================
 * NAV COLOUR — repairing the inheritance chain broken by Soft Theme
 * ---------------------------------------------------------------------------
 * main.css sets:
 *   .menu-header-theme-text-for-primary-bg { color: <soft theme var> }  on the <ul>
 *   ul.main-nav > li > a { color: inherit }              (0,1,3)
 *   ul.main-nav > li:hover > a { color:#333 !important }
 *   ul.main-nav > li:hover { background:#f9f9f9 }
 *   ul.main-nav > li > div.sub-menu-block { background:#f9f9f9; color:#333 }  (0,1,3)
 *
 * Because the <a> inherits, the colour was resolving from the <ul> — which
 * carries its own Soft Theme colour — instead of from the header bar. The list
 * and item must inherit too, or the chain never reaches .dn-header__main.
 * Specificities below are written to clear (0,1,3); !important is used only
 * where Soft Theme itself uses it.
 * ======================================================================== */
/* Repair the chain: ul and li inherit from the bar. */
.dn-header__main .dn-nav,
.dn-header__main .dn-nav__item { color: inherit; }
/* The link keeps inheriting, in every state. */
.dn-header__main .dn-nav__item > .dn-nav__link { color: inherit; }
/* Soft Theme forces #333 on hover with !important — match it. */
.dn-header__main ul.main-nav > li:hover > a,
.dn-header__main .dn-nav__item:hover > .dn-nav__link {
  color: var(--dn-hdr-accent, #FF5100) !important;
}
/* And its light hover plate. */
.dn-header__main ul.main-nav > li:hover,
.dn-header__main .dn-nav__item:hover { background-color: transparent; }
/* Highlighted item (SALE) stays on the accent regardless of state. */
.dn-header__main .dn-nav__link--accent { color: var(--dn-hdr-accent, #FF5100); }
/* Mega panel: Soft Theme paints it #f9f9f9 at (0,1,3) — clear that. */
.dn-header__main ul.main-nav > li > div.sub-menu-block,
.dn-header__main .dn-nav__item > .dn-mega {
  background-color: var(--dn-hdr-bg, #000);
  color: var(--dn-hdr-fg, #fff);
}
.dn-header__main ul.main-nav > li:hover > div.sub-menu-block {
  background-color: var(--dn-hdr-bg, #000);
}
.dn-header__main .dn-mega__head,
.dn-header__main .dn-mega__link,
.dn-header__main ul.main-nav > li ul.sub-menu-lists > li > a { color: inherit; }
.dn-header__main .dn-mega__link { opacity: 0.72; }
.dn-header__main .dn-mega__link:hover { opacity: 1; color: var(--dn-hdr-accent, #FF5100); }
/* Scrolled state: the panel follows the light bar. */
body.dn-transparent.dn-scrolled .dn-header__main ul.main-nav > li > div.sub-menu-block,
body.dn-transparent.dn-scrolled .dn-header__main .dn-nav__item > .dn-mega {
  background-color: var(--dn-hdr-bg-scrolled, #fff);
  color: var(--dn-hdr-fg-scrolled, #000);
}
/* ===========================================================================
 * MOBILE HEADER — reference arrangement
 *   row 1  announcement          (text start, CTA end)
 *   row 2  region                (language start, country end)
 *   row 3  logo start | search · cart · hamburger end
 * ======================================================================== */
@media (max-width: 991.98px) {
/* Top bar stacks into two full-width rows. */
.dn-topbar__inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-inline: var(--d-gutter);
  }
/* Single row on mobile: announcement text, then the close button. The
     language/country controls moved into the hamburger drawer. */
.dn-topbar__inner { flex-wrap: nowrap; }
.dn-topbar__start { flex: 1 1 auto; min-width: 0; min-height: 34px; display: flex; align-items: center; }
.dn-topbar__end {
    flex: 0 0 auto;
    border-top: 0;
    display: flex;
    align-items: center;
  }
/* Announcement row keeps its text at the start and the CTA at the end. */
.dn-topbar .duneus-announce-slide,
  .dn-topbar .dn-announce-slide {
    justify-content: var(--announce-align-m, center);
    text-align: start;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
/* Main bar: logo leads, icon cluster trails. */
.dn-bar { grid-template-columns: auto 1fr auto; }
.dn-bar__zone--start { justify-content: flex-start; }
.dn-bar__zone--center { display: none; }
/* nav lives in the drawer */
.dn-bar__zone--end { justify-content: flex-end; gap: 0.15rem; }
.dn-bar__zone--start .dn-logo { justify-content: flex-start; margin-inline: 0; }
/* Hamburger is the last control in the cluster. */
.dn-hamburger { order: 99; }
}
/* ===========================================================================
 * LOGO SWAP — survives the bar changing colour, on every breakpoint
 * Two stacked layers; only one is visible at a time.
 *   .dn-logo__dark   light logo, for a dark or transparent bar
 *   .dn-logo__light  dark logo,  for a light bar (scrolled state)
 * ======================================================================== */
.dn-logo--swap { position: relative; display: inline-flex; align-items: center; }
.dn-logo--swap img {
  display: block;
  width: auto;
  height: 30px;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.28s ease, height 0.24s ease;
}
/* The light layer stacks on top of the dark one and fades in. */
.dn-logo--swap .dn-logo__light {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
/* Default and transparent states show the dark-bar logo. */
.dn-logo--swap .dn-logo__dark { opacity: 1; }
/* Light bar (scrolled while transparent) swaps to the dark logo. */
body.dn-transparent.dn-scrolled .dn-logo--swap .dn-logo__dark { opacity: 0; }
body.dn-transparent.dn-scrolled .dn-logo--swap .dn-logo__light { opacity: 1; }
/* If no light variant was uploaded the same file is reused, so keep the
   original visible rather than cross-fading an identical image. */
body.dn-transparent.dn-scrolled .dn-logo--swap .dn-logo__light.is-fallback { opacity: 1; }
body.dn-transparent.dn-scrolled .dn-logo--swap .dn-logo__dark:has(+ .is-fallback) { opacity: 0; }
body.dn-scrolled .dn-logo--swap img { height: 26px; }

/* ===========================================================================
 * PRODUCT PAGE — DARK TRANSPARENT HEADER
 * On the product page the transparent header sits over a light product image,
 * so the whole bar flips to black for legibility: text, nav links, icons, the
 * cart total and the logo all go dark. Only the pre-scroll transparent state
 * is touched — once scrolled, the header already takes its solid colours.
 * Scoped to the product template via [data-template], so nothing else changes.
 * ======================================================================== */
body[data-template='product_details'].dn-transparent:not(.dn-scrolled) .dn-header__main {
  color: #000;
}
body[data-template='product_details'].dn-transparent:not(.dn-scrolled) .dn-header__main .dn-search__field::placeholder {
  color: rgba(0, 0, 0, 0.45);
}
/* Force the logo dark whichever variant is showing, so stores with only a
   single (light) logo still get a legible black mark here. */
body[data-template='product_details'].dn-transparent:not(.dn-scrolled) .dn-logo--swap img {
  filter: brightness(0);
}
@media (max-width: 991.98px) {
.dn-logo--swap img { height: 24px; }
body.dn-scrolled .dn-logo--swap img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.dn-logo--swap img { transition: none; }
}
/* ===========================================================================
 * HAMBURGER — part of the icon cluster, not a separate control
 * It is a .dn-iconbtn like the others: same box, same colour inheritance,
 * same hover. It had its own inline colour and its own size, which is why it
 * sat apart and stayed white while the rest of the bar changed.
 * ======================================================================== */
.dn-hamburger {
  width: 38px;
  height: 38px;
  color: inherit;              /* follows the bar, like every other icon */
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dn-hamburger .dn-icon {
  width: var(--duneus-icon-size, 19px);
  height: var(--duneus-icon-size, 19px);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--duneus-icon-thickness, 1.5);
}
.dn-hamburger .dn-icon.duneus-icon-fill { fill: currentColor; stroke: none; }
.dn-hamburger .dn-hamburger-line { background: currentColor; width: 18px; }
.dn-hamburger:hover { color: var(--dn-hdr-accent, #FF5100); background: transparent; }
/* ===========================================================================
 * NAV SPACING & TYPE — merchant settings must actually win
 * ---------------------------------------------------------------------------
 * main.css sets `ul.main-nav > li > a { padding: 10px 22px }` at (0,1,3),
 * adding 44px between every pair of items regardless of the Item-spacing
 * setting. The vertical padding is kept (it gives the links their hit area);
 * only the horizontal padding is cleared so the gap setting is what separates
 * them. Font size/weight/tracking are inherited from the <ul>, where the
 * Navigation settings are written inline.
 * ======================================================================== */
.dn-header__main ul.main-nav > li > a,
.dn-header__main .dn-nav__item > .dn-nav__link {
  padding-inline: 0;
  padding-block: 10px;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* The underline tracks the text, not the old padded box. */
.dn-header__main .dn-nav__link::after {
  inset-inline: 0;
  bottom: 2px;
  height: var(--dn-nav-underline, 2px);
}
/* ===========================================================================
 * MOBILE DRAWER — reference layout
 * SlideMenu owns the DOM and the open/close/paging behaviour; only the surface
 * is restyled here. Full screen is just a width change, so it needs no library
 * replacement.
 *   row 1   brand mark  |  close
 *   body    menu items, wide vertical rhythm, chevron trailing, no dividers
 *   footer  utility links with leading icons
 * ======================================================================== */
body .dn-drawer {
  background: var(--dn-drawer-bg, #fff) !important;
  color: var(--dn-drawer-text, #000);
  border: 0;
  max-width: none;
}
/* Full-screen variant (default). Side-drawer variant keeps a panel width. */
body .dn-drawer--fullscreen { width: 100vw !important; }
body .dn-drawer--drawer { width: min(88vw, 400px) !important; }
body .dn-drawer ul { background: transparent !important; margin: 0; padding: 0; }
body .dn-drawer li { list-style: none; }
/* ---- Header row ---- */
body .dn-drawer .dn-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--d-gutter);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
body .dn-drawer .dn-drawer__logo img { display: block; height: 26px; width: auto; }
body .dn-drawer .dn-drawer__logo .dn-wordmark { font-size: 1.1rem; font-weight: 900; }
body .dn-drawer .dn-drawer__close {
  all: unset;
  cursor: pointer;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
body .dn-drawer .dn-drawer__close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
/* ---- Menu items: airy rhythm, no dividers, chevron trailing ---- */
body .dn-drawer .slide-menu-ul-li > a,
body .dn-drawer a.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem var(--d-gutter);
  border-bottom: 0;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--dn-drawer-size, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dn-drawer-text, #000) !important;
}
[dir='rtl'] body .dn-drawer .slide-menu-ul-li > a { text-transform: none; letter-spacing: 0; }
body .dn-drawer .slide-menu-ul-li > a:active { background: rgba(0, 0, 0, 0.04); }
/* Chevron inherits the text colour instead of the old light-on-dark arrow. */
body .dn-drawer .slide-menu-arrow { color: currentColor; opacity: 0.55; font-size: 1.1rem; }
/* Highlighted entry (SALE) keeps the accent, as in the reference. */
body .dn-drawer .slide-menu-ul-li > a[title='SALE'],
body .dn-drawer .slide-menu-ul-li.all-categories > a { color: var(--dn-hdr-accent, #FF5100) !important; }
/* ---- Footer utility block, pushed to the bottom ---- */
body .dn-drawer .dn-drawer__util > a,
body .dn-drawer .slide-menu-static {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
body .dn-drawer .dn-drawer__util > a {
  font-size: calc(var(--dn-drawer-size, 16px) - 2px);
  font-weight: 500;
  opacity: 0.85;
}
body .dn-drawer .slide-menu-static { padding: 1rem var(--d-gutter); background: transparent; }
body .dn-drawer .slide-menu-static .account-lang-currency { background: transparent; padding: 0; }
body .dn-drawer .slide-menu-static .btn { background: transparent !important; color: inherit !important; border: 0; padding: 0.5rem 0; }
/* Overlay */
body #sidenav-overlay { background: rgba(0, 0, 0, var(--dn-drawer-overlay, 0.6)); }
/* ===========================================================================
 * NAV IS A FLEX ROW — specificity fix
 * main.css declares `ul.main-nav { display: block }` at (0,1,1), which beats a
 * bare `.dn-nav` at (0,1,0). The list therefore stayed a block box, so `gap`
 * had nothing to apply to and the only separation was the whitespace between
 * inline-block items — which is why the Item-spacing setting did nothing.
 * These selectors clear (0,1,1) and (0,1,3).
 * ======================================================================== */
@media (min-width: 992px) {
.dn-header__main ul.main-nav.dn-nav {
    display: flex;
    align-items: center;
    gap: var(--dn-nav-gap, 24px);
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* Items must be flex children, not inline-block, or gap is ignored. */
.dn-header__main ul.main-nav.dn-nav > li,
  .dn-header__main ul.main-nav.dn-nav > li.top-level-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
  }
}
/* Below the desktop breakpoint the nav lives in the drawer. */
@media (max-width: 991.98px) {
.dn-header__main ul.main-nav.dn-nav { display: none; }
}
/* Text alignment follows the flex justification so short single-line messages
   read correctly whichever alignment is chosen. */
.dn-topbar .duneus-announce-slide,
.dn-topbar .dn-announce-slide { text-align: inherit; }
.dn-topbar__start { text-align: start; }
/* ===========================================================================
 * ANNOUNCEMENT ALIGNMENT — give justify-content something to work with
 * .dn-topbar__start is full width, but the wrapper and track inside it are
 * flex/block boxes that shrink to their content. justify-content on the slide
 * then had no free space, so the alignment setting appeared to do nothing —
 * the text simply sat wherever the content box started.
 * Every box in the chain must span the row before alignment is meaningful.
 * ======================================================================== */
.dn-topbar__start { display: flex; width: 100%; min-width: 0; }
.dn-topbar .duneus-announce-wrap,
.dn-topbar .dn-announce-wrap {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.dn-topbar .duneus-announce-wrap > .duneus-announce-track,
.dn-topbar .dn-announce-wrap > .dn-announce-track {
  width: 100%;
  min-width: 0;
}
.dn-topbar .duneus-announce-slide,
.dn-topbar .dn-announce-slide { width: 100%; min-width: 0; }
/* ===========================================================================
 * DRAWER — language / country controls
 * These live in the hamburger drawer on mobile (the top bar shows them on
 * desktop only). Soft Theme styles them for a dark bar, so they are restyled
 * for the light drawer surface here.
 * ======================================================================== */
body .dn-drawer .slide-menu-static .account-lang-currency,
body .dn-drawer .slide-menu-static .language-currency {
  background: transparent !important;
  padding: 0;
}
body .dn-drawer .slide-menu-static .container { padding-inline: 0; max-width: none; }
body .dn-drawer .language-currency-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding-block: 0.85rem;
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
body .dn-drawer .language-currency-menu .c-btn,
body .dn-drawer .language-currency-menu .currency-btn,
body .dn-drawer .language-currency-menu button {
  all: unset;
  cursor: pointer;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: calc(var(--dn-drawer-size, 15px) - 2px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dn-drawer-text, #000) !important;
  unicode-bidi: plaintext;
}
[dir='rtl'] body .dn-drawer .language-currency-menu button { letter-spacing: 0; text-transform: none; }
/* Account button in the drawer footer follows the drawer palette. */
body .dn-drawer .slide-menu-static .account-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.85rem;
  width: 100%;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--dn-drawer-size, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dn-drawer-text, #000) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
[dir='rtl'] body .dn-drawer .slide-menu-static .account-btn { letter-spacing: 0; text-transform: none; }
/* ===========================================================================
 * SOFT THEME STICKY COMPENSATION
 * main.js adds `.app-content-padded` to the content wrapper whenever its own
 * sticky header engages, and main.css gives that class a hardcoded
 * `padding-top: 130px` sized for Soft Theme's header — not ours.
 *
 * Two problems it caused:
 *   1. In transparent mode the hero is supposed to sit UNDER the header, so
 *      any compensation at all pushes it down and leaves a blank band.
 *   2. Even in solid mode, 130px rarely matches this header's real height.
 *
 * The header's true height is published as --dn-header-h by duneus-header.js,
 * so the compensation is derived from it instead of assumed.
 * ======================================================================== */
body.dn-transparent .app-content-padded {
  padding-top: 0 !important;
}

body:not(.dn-transparent) .app-content-padded {
  padding-top: var(--dn-header-h, 0px) !important;
}

/* ===========================================================================
 * .app HEIGHT — the blank band above the first section
 * main.css gives `.app { min-height: 100% }`. That is written for a full-page
 * flex column where `.main` is a child and grows to fill. On this store the
 * rendered DOM puts `.main` and `.footer` OUTSIDE `.app`, so `.app` ends up
 * holding the header alone while still reserving a full viewport of height —
 * which is exactly the empty band that appeared between the header and the
 * hero. It is present whether or not the transparent header is on, because
 * min-height has nothing to do with the transparent logic.
 *
 * The rule below targets only the broken shape: an `.app` that does not
 * contain the main content has no reason to reserve any height. When the DOM
 * nests correctly, `:has(.main)` matches and the original behaviour stands.
 * Kept in its own rule so a browser without :has() ignores just this line.
 * ======================================================================== */
.app:not(:has(.main)) {
  min-height: 0;
  height: auto;
}

/* The header wrapper must never stretch either — it is a flex item, so in a
   column flex container it would otherwise absorb the leftover space. */
.app > .header {
  flex: 0 0 auto;
  min-height: 0;
}

/* ===========================================================================
 * ANNOUNCEMENT ARROWS — one each side of the message
 * Two faults put them underneath: the positioning rules targeted
 * `.dn-announce-prev`, but the markup renders `.duneus-announce-prev`; and a
 * topbar rule reset them to `position: static`, dropping them out of the row.
 *
 * They now flank the slide inside the announcement row itself, so they sit
 * level with the text rather than floating over the whole bar.
 * ======================================================================== */
.dn-topbar .duneus-announce-wrap,
.dn-topbar .dn-announce-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dn-topbar .duneus-announce-arrow,
.dn-topbar .dn-announce-arrow {
  position: static;
  transform: none;
  order: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.dn-topbar .duneus-announce-arrow:hover,
.dn-topbar .dn-announce-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
}

/* Flanking: previous before the slides, next after them. The buttons are
   rendered last in the markup, so order puts them where they belong. */
.dn-topbar .duneus-announce-prev,
.dn-topbar .dn-announce-prev { order: -1; }
.dn-topbar .duneus-announce-next,
.dn-topbar .dn-announce-next { order: 1; }

/* The slide track sits between them and takes the remaining width. */
.dn-topbar .duneus-announce-wrap > .duneus-announce-slide,
.dn-topbar .duneus-announce-wrap > .dn-announce-slide { order: 0; }

[dir='rtl'] .dn-topbar .duneus-announce-arrow { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .dn-topbar .duneus-announce-arrow { transition: none; }
}

/* ===========================================================================
 * MOBILE DRAWER — "Minimal Luxe" (Option A, v6.6.7)
 * Footer (payment link · login · region) pinned to the bottom so there is no
 * empty black void; airy items with hairline dividers; a trailing chevron on
 * items that have a sub-menu; login as an outline button; region as two pills.
 * All Zid hooks (menu loop, login handler, region dialog) are untouched.
 * ======================================================================== */
body .dn-drawer > ul {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Hairline dividers between top-level items (white-alpha for the dark drawer). */
body .dn-drawer .slide-menu-ul-li > a,
body .dn-drawer a.menu-link {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 0 !important;
}
body .dn-drawer .dn-drawer__head + .slide-menu-ul-li > a { border-top: 0 !important; }
body .dn-drawer .slide-menu-ul-li > a:active { background: rgba(255, 255, 255, 0.05); }

/* Trailing chevron only on items that open a sub-menu. */
body .dn-drawer > ul > .slide-menu-ul-li:has(> ul) > a::after {
  content: '\203A';
  margin-inline-start: auto;
  opacity: 0.45;
  font-size: 1.25rem;
  line-height: 1;
}
[dir='rtl'] body .dn-drawer > ul > .slide-menu-ul-li:has(> ul) > a::after { content: '\2039'; }

/* ---- Footer group: pushed to the bottom as one block ---- */
body .dn-drawer > ul > .dn-drawer__util { margin-top: auto; }
body .dn-drawer .dn-drawer__util > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body .dn-drawer .slide-menu-static {
  padding: 1.1rem var(--d-gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Stack: login button on top, region pills beneath. */
body .dn-drawer .slide-menu-static .container {
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
body .dn-drawer .slide-menu-static .account-area { width: 100%; }

/* Login → full-width outline button. */
body .dn-drawer .slide-menu-static .account-btn {
  justify-content: center !important;
  width: 100% !important;
  height: 50px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  background: transparent !important;
  letter-spacing: 0.1em;
}
body .dn-drawer .slide-menu-static .account-btn:active { background: rgba(255, 255, 255, 0.06) !important; }

/* Region → clean borderless text controls (country · language). All the stray
   Soft-Theme frames/boxes around them are removed; only a subtle divider
   separates the two sides. */
body .dn-drawer .slide-menu-static .account-lang-currency,
body .dn-drawer .slide-menu-static .language-currency,
body .dn-drawer .language-currency-menu,
body .dn-drawer .language-currency-menu .currency-button-area,
body .dn-drawer .language-currency-menu .language-button-area,
body .dn-drawer .slide-menu-static .upper-bar,
body .dn-drawer .slide-menu-static .container {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body .dn-drawer .language-currency-menu {
  gap: 10px;
  padding-block: 0;
  margin-top: 4px;
}
body .dn-drawer .language-currency-menu .currency-button-area,
body .dn-drawer .language-currency-menu .language-button-area { flex: 1; display: flex; }
body .dn-drawer .language-currency-menu .currency-button-area { justify-content: flex-start; }
body .dn-drawer .language-currency-menu .language-button-area { justify-content: flex-end; }
body .dn-drawer .language-currency-menu .vertical-line-menu { display: none; }
body .dn-drawer .language-currency-menu .c-btn,
body .dn-drawer .language-currency-menu .currency-btn,
body .dn-drawer .language-currency-menu button {
  width: auto !important;
  height: auto !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.85;
}

/* ===========================================================================
 * MOBILE DRAWER · guaranteed dark panel + white text  (v6.9.3)
 * ---------------------------------------------------------------------------
 * Two things fought the drawer's legibility: Soft Theme's own colour classes
 * (menu-header-theme-text-for-primary-bg) paint links with the store's
 * auto-contrast colour, and a saved `hamburger_text_color` value could itself
 * be dark — so even a token-based fix rendered black-on-black.
 * The DUNEUS drawer is a dark "Minimal Luxe" panel by design, so we stop
 * depending on the saved token and force the panel dark with white text
 * explicitly. This is immune to both the Soft Theme cascade and a bad saved
 * colour. (To theme the drawer differently later, change these two values.) */
body #sliding-menu.dn-drawer {
  --dn-drawer-bg: #0A0A0A !important;
  --dn-drawer-text: #FFFFFF !important;
  background: #0A0A0A !important;
}
body #sliding-menu.dn-drawer,
body #sliding-menu.dn-drawer > ul,
body .dn-drawer.menu-header-theme-bg-primary,
body .dn-drawer .theme-text-for-primary-bg,
body .dn-drawer .menu-header-theme-text-for-primary-bg,
body .dn-drawer a,
body .dn-drawer a.menu-link,
body .dn-drawer .slide-menu-ul-li > a,
body .dn-drawer .slide-menu-ul-li a .clickable-span,
body .dn-drawer .slide-menu-ul-li a span,
body .dn-drawer .dn-drawer__util > a,
body .dn-drawer .dn-drawer__util > a span,
body .dn-drawer .slide-menu-arrow,
body .dn-drawer .slide-menu-static,
body .dn-drawer .slide-menu-static .btn,
body .dn-drawer .slide-menu-static .btn span,
body .dn-drawer .slide-menu-static .account-btn,
body .dn-drawer .slide-menu-static .account-btn span {
  color: #FFFFFF !important;
}
/* "All categories" keeps the brand accent; everything else is white. */
body .dn-drawer .slide-menu-ul-li.all-categories > a,
body .dn-drawer .slide-menu-ul-li.all-categories > a span {
  color: var(--dn-hdr-accent, #FF5100) !important;
}

/* ===========================================================================
 * LOGO COLOUR POLICY · white only on the homepage hero  (v6.9.5)
 * ---------------------------------------------------------------------------
 * Requirement: the logo is WHITE only on the homepage (over its dark hero,
 * before scrolling). On every other page — and on the homepage once the bar
 * turns solid on scroll — the logo is BLACK. Header icons already follow the
 * bar colour (currentColor SVGs); the logo is an image, so it is driven here.
 * A store that uploads a real dark logo (branding_logo_light) shows that as the
 * black mark; a store with only a light logo gets it darkened via brightness(0).
 * The one exception is a category that has its own dark hero image behind the
 * header (.dn-has-cat-hero) — there the white logo is correct over the photo.
 * ======================================================================== */

/* 1) BULLETPROOF: on every non-home page — and the homepage once scrolled — the
      logo image is darkened to black directly, whichever swap layer is visible.
      This does not depend on the opacity state machine, so it can't be defeated
      by it. The only place left untouched is the homepage at the top, over its
      dark hero, where the white logo is correct. */
body:not([data-template='home']) .dn-logo--swap img,
body[data-template='home'].dn-scrolled .dn-logo--swap img {
  filter: brightness(0) !important;
}

/* Icons/text dark too, for any non-home page whose header is transparent over a
   light page (e.g. a product page in transparent mode) before it scrolls. */
body.dn-transparent:not(.dn-scrolled):not([data-template='home']):not(.dn-has-cat-hero) .dn-header__main { color: #000; }
body.dn-transparent:not(.dn-scrolled):not([data-template='home']):not(.dn-has-cat-hero) .dn-header__main .dn-search__field::placeholder { color: rgba(0, 0, 0, 0.45); }

/* ===========================================================================
 * LISTING PAGES · clean white solid header  (v6.9.5)
 * ---------------------------------------------------------------------------
 * layout.jinja now forces a SOLID header on category / all-products / search
 * pages that have no hero image (nothing dark sits behind the bar, so a
 * transparent header there only left an empty band + a white-on-white logo).
 * The base solid-header colour can be dark (merchant setting / #000 default),
 * which would hide the now-black logo — so pin these forced-solid bars to a
 * clean white plate with dark content. Pages with a hero stay transparent and
 * are untouched; the homepage is excluded entirely.
 * ======================================================================== */
body:not([data-template='home']):not(.dn-transparent):not(.dn-has-cat-hero) .dn-header__main {
  background-color: #FFFFFF !important;
  color: #111111 !important;
  border-bottom: 1px solid #ECECEC;
}
body:not([data-template='home']):not(.dn-transparent):not(.dn-has-cat-hero) .dn-header__main .dn-iconbtn,
body:not([data-template='home']):not(.dn-transparent):not(.dn-has-cat-hero) .dn-header__main .dn-barlink,
body:not([data-template='home']):not(.dn-transparent):not(.dn-has-cat-hero) .dn-header__main .dn-nav__link,
body:not([data-template='home']):not(.dn-transparent):not(.dn-has-cat-hero) .dn-header__main .dn-carttotal {
  color: #111111 !important;
}