/* Quantum Lifestyle — header (sections/main_navbar). Setting-driven colors arrive as
   --ql-header-* custom properties from the section's inline style block. */

.ql-header {
  position: relative;
  z-index: 100;
  color: var(--ql-header-fg);
  font-family: var(--ff-body);
}
/* Sticky: Fluid wraps the header in its own element of the same height, so the
   wrapper (not the header) is what sticks. The announcement scrolls away first. */
*:has(> .ql-header[data-sticky="true"]),
.ql-header-host {
  position: sticky;
  top: calc(var(--ql-header-ann-h, 0px) * -1);
  z-index: 100;
}
.ql-header a { color: inherit; text-decoration: none; }
.ql-header button:hover { opacity: 1; } /* cancel the global button hover fade */
.ql-header svg { display: block; }
.ql-header__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Announcement */
.ql-header__announce {
  background: var(--ql-header-ann-bg);
  color: var(--ql-header-ann-fg);
  text-align: center;
  font-size: var(--fs-small, 14px);
  letter-spacing: 0.01em;
  padding: 9px 16px;
}
.ql-header__announce p, .ql-header__announce a { margin: 0; color: inherit; }
.ql-header__announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bar */
.ql-header__bar {
  position: relative;
  background: var(--ql-header-bg);
  border-bottom: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1));
  transition: box-shadow 0.25s ease;
}
.ql-header.is-scrolled .ql-header__bar { box-shadow: var(--shadow-soft); }
.ql-header__inner {
  max-width: var(--ql-header-max, 1280px);
  margin: 0 auto;
  padding: 0 64px;
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* Brand */
.ql-header__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ql-header-fg); }
.ql-header__mark { width: 42px; height: 42px; flex: 0 0 auto; }
.ql-header__lockup { display: block; width: auto; height: 30px; flex: 0 0 auto; }
.ql-header__wordmark {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ql-header__logo-img { max-height: 40px; width: auto; }

/* Primary nav */
.ql-header__nav { justify-self: center; }
.ql-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.ql-header__item { position: static; }
.ql-header__item.has-panel:not(.is-mega) { position: relative; }
.ql-header__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ql-header-fg);
  font: 500 15px/1 var(--ff-body);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ql-header__link:hover,
.ql-header__item.is-open > .ql-header__link,
.ql-header__link[aria-current="page"] { background: color-mix(in srgb, var(--ql-header-fg) 6%, transparent); }
.ql-header__link:focus-visible,
.ql-header__icon:focus-visible,
.ql-header a:focus-visible,
.ql-header summary:focus-visible { outline: 2px solid var(--clr-secondary); outline-offset: 2px; }
.ql-header__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.ql-header__item.is-open .ql-header__chev { transform: rotate(180deg); }

/* Dropdown panels */
.ql-header__panel {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  background: var(--ql-header-bg);
  color: var(--ql-header-fg);
}
.ql-header__item.has-panel:not(.is-mega) .ql-header__panel {
  min-width: 240px;
  margin-top: 8px;
  border-radius: var(--card-radius, 16px);
  border: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1));
  box-shadow: var(--shadow-soft);
  padding: 10px;
}
.ql-header__item.is-mega .ql-header__panel {
  right: 0;
  border-top: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1));
  box-shadow: 0 24px 40px -24px rgba(28, 47, 86, 0.25);
}
.ql-header__item.is-mega .ql-header__panel-inner {
  max-width: var(--ql-header-max, 1280px);
  margin: 0 auto;
  padding: 32px 64px 40px;
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 48px;
}
.ql-header__item.is-open > .ql-header__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (min-width: 992px) {
  .ql-header__item.has-panel:hover > .ql-header__panel {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .ql-header__item.has-panel:hover .ql-header__chev { transform: rotate(180deg); }
}
.ql-header__sublist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ql-header__sublist a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.3;
  transition: background-color 0.15s ease;
}
.ql-header__sublist a:hover,
.ql-header__sublist a[aria-current="page"] { background: var(--clr-light); }
.ql-header__item.is-mega .ql-header__sublist a { font-size: 17px; padding: 10px 0; border-radius: 0; }
.ql-header__item.is-mega .ql-header__sublist a:hover { background: none; color: var(--clr-secondary); }

/* Featured product cards in the mega panel */
.ql-header__features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); gap: 20px; justify-content: end; }
.ql-header__feature { display: grid; gap: 6px; align-content: start; }
.ql-header__feature-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--card-radius, 16px);
  overflow: hidden;
  background: var(--grad-holo, var(--clr-light));
  margin-bottom: 6px;
}
.ql-header__feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ql-header__feature:hover .ql-header__feature-media img { transform: scale(1.03); }
.ql-header__feature-placeholder { display: block; width: 100%; height: 100%; }
.ql-header__feature-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-secondary); }
.ql-header__feature-title { font-family: var(--ff-heading); font-weight: 500; font-size: 18px; letter-spacing: -0.012em; line-height: 1.25; }
.ql-header__feature-cta { font-size: 14px; color: var(--clr-secondary); }

/* Action icons */
.ql-header__actions { display: flex; align-items: center; gap: 4px; justify-self: end; }
.ql-header__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ql-header-fg);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ql-header__icon:hover { background: color-mix(in srgb, var(--ql-header-fg) 6%, transparent); opacity: 1; }
.ql-header__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ql-header__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font: 600 11px/18px var(--ff-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ql-header__count:empty,
.ql-header__count[data-empty="true"] { display: none; }
.ql-header__burger { display: none; }

/* Search */
.ql-header__search { border-top: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1)); background: var(--ql-header-bg); }
.ql-header__search-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 10px;
}
.ql-header__search-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.14));
  border-radius: var(--input-radius, 12px);
  background: var(--clr-white);
  color: var(--clr-primary);
  font: 400 16px/1 var(--ff-body);
}
.ql-header__search-form input:focus { outline: 2px solid var(--clr-secondary); outline-offset: 1px; }

/* Live search suggestions under the field */
.ql-header__results { max-width: 720px; margin: -4px auto 0; padding: 0 24px 18px; }
.ql-header__results-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ql-header__result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--clr-primary);
  text-decoration: none;
}
.ql-header__result:hover, .ql-header__result:focus-visible { background: var(--clr-light); text-decoration: none; outline: none; }
.ql-header__result img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--clr-light); }
.ql-header__result-title { overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ql-header__result-price { font-size: 14px; color: var(--clr-muted); font-variant-numeric: tabular-nums; }
.ql-header__results-all { display: inline-flex; gap: 6px; margin: 10px 10px 0; color: var(--clr-primary); font-size: 14px; font-weight: 500; }
.ql-header__results-empty { margin: 4px 10px 0; font-size: 14px; color: var(--clr-muted); }
.ql-header__search-submit,
.ql-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height, 48px);
  padding: 0 var(--btn-padding-x, 28px);
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--btn-radius, 999px);
  background: var(--clr-primary);
  color: var(--clr-white);
  font: var(--btn-font-weight, 500) var(--btn-font-size, 15px)/1 var(--ff-body);
  cursor: pointer;
}
.ql-header .ql-header__btn { color: var(--clr-white); }
.ql-header .ql-header__btn--outline { background: transparent; color: var(--clr-primary); }

/* Mobile drawer */
.ql-header__drawer { position: fixed; inset: 0; z-index: 200; }
.ql-header__drawer[hidden] { display: none; }
.ql-header__scrim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.45); }
.ql-header__drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(420px, 88vw);
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  color: var(--clr-primary);
  padding: max(16px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: ql-header-slide-in 0.28s ease;
}
@keyframes ql-header-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.ql-header__drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1)); }
.ql-header__drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.ql-header__drawer-nav > ul > li { border-bottom: 1px solid var(--border-subtle, rgba(28, 47, 86, 0.1)); }
.ql-header__drawer-nav > ul > li > a,
.ql-header__drawer-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.ql-header__drawer-nav summary::-webkit-details-marker { display: none; }
.ql-header__drawer-nav details[open] .ql-header__chev { transform: rotate(180deg); }
.ql-header__drawer-nav details ul { padding: 0 2px 14px; display: grid; gap: 2px; }
.ql-header__drawer-nav details a { display: block; padding: 8px 0; font-size: 16px; color: var(--clr-body); }
.ql-header__drawer-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

/* Tablet & mobile */
@media (max-width: 991px) {
  .ql-header__inner { padding: 0 24px; height: 64px; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .ql-header__nav { display: none; }
  .ql-header__burger { display: inline-grid; justify-self: start; }
  .ql-header__brand { justify-self: center; }
  .ql-header__account { display: none; }
}
@media (max-width: 767px) {
  .ql-header__inner { padding: 0 12px; }
  .ql-header__wordmark { font-size: 17px; }
  .ql-header__mark { width: 36px; height: 36px; }
  .ql-header__bar .ql-header__lockup { width: min(168px, calc(100vw - 210px)); height: auto; }
  .ql-header__announce { font-size: 13px; padding: 8px 12px; }
}
@media (max-width: 340px) {
  .ql-header__bar .ql-header__wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-header__panel, .ql-header__chev, .ql-header__feature-media img { transition: none; }
  .ql-header__drawer-panel { animation: none; }
}