/* Herbadrug UI 1.0 — DiXi only. Compatible with the agreed category HTML. */
:where(.hd-dixi, .hd-dixi-story) {
  --hd-navy: #011e41; --hd-accent: #011e41; --hd-on-accent: #fff;
  --hd-cream: #f5f4f0; --hd-line: #dfe3e6; --hd-text: #18212a;
  --hd-muted: #6a737c; --hd-green: #123c20;
  color: var(--hd-text); margin: 0;
}
:where(.hd-dixi, .hd-dixi-story) h2 { font-family: Georgia, 'Times New Roman', serif; color: var(--hd-navy); letter-spacing: -.035em; }
:where(.hd-dixi, .hd-dixi-story) .hd-eyebrow { color: var(--hd-navy); }
.hd-dixi .hd-dixi-hero { display: grid; grid-template-columns: minmax(0,40fr) minmax(0,60fr); width: 100%; background: var(--hd-cream); }
.hd-dixi .hd-dixi-hero__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; min-height: 390px; padding: clamp(34px,4vw,62px) clamp(28px,4vw,58px); }
.hd-dixi .hd-dixi-logo { width: 135px !important; height: auto !important; object-fit: contain; margin: 0 0 20px !important; }
.hd-dixi .hd-dixi-hero h2 { margin: 0 0 18px; font-size: clamp(36px,4.1vw,66px); line-height: .97; font-weight: 700; }
.hd-dixi .hd-dixi-hero p { max-width: 430px; margin: 0 0 26px; font-size: 15px; line-height: 1.55; }
/* Natural image ratio: never crop or stretch the source JPG. */
.hd-dixi .hd-dixi-hero__image { display: flex; align-items: center; justify-content: center; min-width: 0; background: #f4f2ee; }
.hd-dixi .hd-dixi-hero__image img { position: static !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; margin: 0 !important; }
.hd-dixi .hd-section-heading h2 { margin: 0; font-size: clamp(27px,2.3vw,36px); line-height: 1.05; }
.hd-dixi .hd-section-heading p { margin: 8px 0 0; color: var(--hd-muted); font-size: 13px; line-height: 1.4; }
.hd-dixi .hd-needs-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.hd-dixi .hd-need-card { position: relative !important; isolation: isolate; display: block !important; width: 100%; min-width: 0; min-height: 360px; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #17351f; color: #fff !important; }
.hd-dixi .hd-need-card img { position: absolute !important; inset: 0; z-index: -2; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; transition: transform .55s ease; }
.hd-dixi .hd-need-card:hover img { transform: scale(1.035); }
/* Pseudo-element also covers HTML versions without a shade span. */
.hd-dixi .hd-need-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,transparent 20%,rgba(2,18,11,.04) 42%,rgba(2,18,11,.28) 65%,rgba(2,18,11,.88)); }
.hd-dixi .hd-need-card::after { content: none !important; }
.hd-dixi :is(.hd-need-shade,.hd-need-card__overlay) { display: none !important; }
.hd-dixi .hd-need-card__content { position: absolute !important; left: 24px !important; right: 24px !important; bottom: 22px !important; z-index: 1; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #fff !important; pointer-events: none; }
.hd-dixi :is(.hd-need-title,.hd-need-card__content > strong) { display: block; margin: 0 0 8px !important; color: #fff !important; font-family: Georgia,'Times New Roman',serif; font-size: 20px; line-height: 1.1; font-weight: 700; }
.hd-dixi :is(.hd-need-desc,.hd-need-card__content > span:not([class])) { display: block; margin: 0; color: #fff !important; font-size: 15px; line-height: 1.25; font-weight: 600; }
.hd-dixi :is(.hd-need-cta,.hd-need-card__content > small) { display: block; margin: 17px 0 0 !important; color: #fff !important; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; }
.hd-dixi .hd-need-card:focus-visible { outline-color: var(--hd-navy); }
.hd-dixi .hd-shop-type { padding-top: 8px; }
.hd-dixi .hd-shop-type__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--hd-line); }
.hd-dixi .hd-type-link { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 112px; padding: 22px 17px; border-right: 1px solid var(--hd-line); color: var(--hd-navy); }
.hd-dixi .hd-type-link:last-child { border-right: 0; }
.hd-dixi .hd-type-link:hover { background: #f6f7f7; }
.hd-dixi .hd-type-number { align-self: flex-start; font: 700 17px Georgia,serif; }
.hd-dixi .hd-type-copy { display: flex; flex-direction: column; min-width: 0; }
.hd-dixi .hd-type-copy strong { font: 700 15px/1.1 Georgia,serif; }
.hd-dixi .hd-type-copy small { margin-top: 7px; color: var(--hd-muted); font-size: 10px; line-height: 1.2; }
.hd-dixi .hd-type-arrow { font-size: 19px; }
.hd-dixi .hd-nettle { display: grid; grid-template-columns: minmax(0,44fr) minmax(0,56fr); min-height: 350px; margin-top: 4px; background: var(--hd-green); }
.hd-dixi .hd-nettle__content { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px,4vw,62px); color: #fff; }
.hd-dixi .hd-nettle__image { grid-column: 2; grid-row: 1; min-width: 0; }
.hd-dixi .hd-nettle__image img { width: 100%; height: 100%; min-height: 350px; object-fit: cover; }
.hd-dixi .hd-nettle h2 { margin: 4px 0 12px; color: #fff; font-size: clamp(44px,5vw,72px); line-height: .95; }
.hd-dixi .hd-nettle p { margin: 10px 0 26px; font-size: 15px; line-height: 1.35; font-weight: 700; }
.hd-dixi .hd-eyebrow--light { color: rgba(255,255,255,.8); }
.hd-dixi-story { margin-top: 64px; margin-bottom: 30px; }
.hd-dixi-story .hd-story-main { display: grid; grid-template-columns: minmax(0,44fr) minmax(0,56fr); background: var(--hd-cream); }
.hd-dixi-story .hd-story-image img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }
.hd-dixi-story .hd-story-copy { min-width: 0; padding: clamp(30px,4vw,62px); }
.hd-dixi-story .hd-story-logo { width: 110px; height: auto; margin-bottom: 20px; }
.hd-dixi-story .hd-story-copy h2 { margin: 5px 0 16px; font-size: clamp(30px,3vw,46px); line-height: 1.05; }
.hd-dixi-story .hd-story-copy > p { max-width: 610px; line-height: 1.65; }
.hd-dixi-story .hd-story-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--hd-line); }
.hd-dixi-story .hd-story-benefit :is(b,strong) { display: block; margin-bottom: 7px; color: var(--hd-navy); font-size: 12px; line-height: 1.3; }
.hd-dixi-story .hd-story-benefit span { display: block; color: var(--hd-muted); font-size: 12px; line-height: 1.5; }
.hd-dixi-story .hd-faq { padding: 50px 0 20px; }
.hd-dixi-story .hd-faq h2 { margin: 0 0 22px; font-size: 28px; }
.hd-dixi-story .hd-faq details p { max-width: 720px; margin: 0; padding: 0 0 22px; color: var(--hd-muted); line-height: 1.65; }
@media (max-width: 991px) {
  .hd-dixi .hd-dixi-hero__content { padding: 30px 24px; }
  .hd-dixi :is(.hd-needs-grid,.hd-shop-type__grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hd-dixi .hd-type-link:nth-child(2) { border-right: 0; }
  .hd-dixi .hd-type-link:nth-child(-n+2) { border-bottom: 1px solid var(--hd-line); }
  .hd-dixi-story .hd-story-benefits { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 767px) {
  .hd-dixi .hd-dixi-hero { display: flex; flex-direction: column; }
  .hd-dixi .hd-dixi-hero__content { min-height: 0; padding: 30px 22px; }
  .hd-dixi .hd-dixi-logo { width: 105px !important; }
  .hd-dixi .hd-dixi-hero h2 { font-size: clamp(32px,8vw,40px); }
  .hd-dixi .hd-dixi-hero p { font-size: 14px; }
  .hd-dixi .hd-needs-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .hd-dixi .hd-need-card { flex: 0 0 76%; min-height: 330px; scroll-snap-align: start; }
  .hd-dixi .hd-need-card__content { left: 20px !important; right: 20px !important; bottom: 20px !important; }
  .hd-dixi .hd-shop-type__grid { display: block; border-bottom: 0; }
  .hd-dixi .hd-type-link { min-height: 78px; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--hd-line); }
  .hd-dixi .hd-nettle { display: flex; flex-direction: column; }
  .hd-dixi .hd-nettle__content { order: 0; padding: 32px 22px; }
  .hd-dixi .hd-nettle__image { order: 1; }
  .hd-dixi .hd-nettle__image img { height: auto; min-height: 0; }
  .hd-dixi-story { margin-top: 40px; }
  .hd-dixi-story .hd-story-main { display: flex; flex-direction: column; }
  .hd-dixi-story .hd-story-image img { height: auto; min-height: 0; }
  .hd-dixi-story .hd-story-copy { padding: 32px 22px; }
  .hd-dixi-story .hd-faq { padding: 38px 22px 10px; }
}
.hd-dixi .hd-products-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; padding: 50px 0 24px; }
.hd-dixi .hd-products-head h2 { margin: 0; font-size: clamp(27px,2.3vw,36px); }
.hd-dixi .hd-products-head span { color: var(--hd-muted); font-size: 12px; }
.hd-dixi-story .hd-dixi-logo { width: 110px !important; height: auto !important; margin-bottom: 20px; }
@media (max-width: 767px) { .hd-dixi .hd-products-head { padding: 38px 20px 24px; } }