/* Herbadrug UI 1.0 — shared components. Load before brand styles.
   Add .hd-brand to future brand roots; JS adds it to existing DiXi HTML. */
:where(.hd-brand, .hd-dixi, .hd-dixi-story),
:where(.hd-brand, .hd-dixi, .hd-dixi-story) * { box-sizing: border-box; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) { width: 100%; min-width: 0; font-family: inherit; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) img { display: block; max-width: 100%; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) a { text-decoration: none; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 46px; padding: 12px 20px; background: var(--hd-accent, #222);
  color: var(--hd-on-accent, #fff); font-size: 11px; line-height: 1.3;
  font-weight: 700; letter-spacing: .04em; transition: opacity .2s, transform .2s;
}
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-button:hover { opacity: .88; transform: translateY(-1px); }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-button span { font-size: 15px; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-button--light { background: #fff; color: var(--hd-accent, #222); }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-eyebrow { display: block; margin: 0 0 12px; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .12em; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-section { width: 100%; padding: 50px 0; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 24px; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq details { border-top: 1px solid var(--hd-line, #ddd); }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq details:last-child { border-bottom: 1px solid var(--hd-line, #ddd); }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq summary { position: relative; cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 600; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq summary::-webkit-details-marker { display: none; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 22px; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-faq details[open] summary::after { content: '−'; }
:where(.hd-brand, .hd-dixi, .hd-dixi-story) :is(a, summary):focus-visible { outline: 3px solid var(--hd-accent, #222); outline-offset: 4px; }
body.hd-category-page .hd-native-hidden { display: none !important; }
body.hd-category-page .hd-visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}
body.hd-category-page #hd-products { scroll-margin-top: var(--hd-scroll-offset, 100px); }
body.hd-category-page .hd-products-anchor { display: block; height: 0; min-height: 0; margin: 0; padding: 0; position: static; }
@media (max-width: 767px) {
  :where(.hd-brand, .hd-dixi, .hd-dixi-story) .hd-section { padding: 38px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.hd-brand, .hd-dixi, .hd-dixi-story) *, :where(.hd-brand, .hd-dixi, .hd-dixi-story) *::after { transition: none !important; animation: none !important; }
}