/**
 * Deutscher Gesundheitsfachkreis – Redesign v2
 * Агресивні перевизначення прямими значеннями для гарантованої видимості.
 */

/* ========== 1. Перевизначення утилітних класів (Tailwind-подібні) ========== */
.bg-background-surface-primary-inverse { background: #0d3d47 !important; background-image: linear-gradient(165deg, #0d3d47 0%, #0f4c5c 100%) !important; }
.bg-background-surface-secondary-inverse { background: #1a4a54 !important; }
.bg-background-surface-primary { background: #ffffff !important; }
.bg-background-primary { background: #f0f4f5 !important; }
.bg-background-secondary { background: #e8eef0 !important; }
.text-text-primary-inverse { color: #f5f9fa !important; }
.text-text-secondary-inverse { color: rgba(245,249,250,0.88) !important; }
.text-text-primary { color: #1a2d33 !important; }
.text-text-secondary { color: #5a6c73 !important; }

/* ========== 2. Header ========== */
#section-shop-header.ShopHeader,
header.ShopHeader {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(13, 61, 71, 0.08) !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

/* Круглий логотип — фон контейнера зливається з header/footer */
.ShopHeader__LogoImage .AspectRatio,
.ShopHeader__LogoImage,
.ShopFooter__Logo .AspectRatio {
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.ShopHeader__LogoImage img,
.ShopFooter__Logo img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* ========== 3. Article Hero ========== */
.ArticleHeader {
  background: linear-gradient(165deg, #0d3d47 0%, #0f4c5c 50%, #114a58 100%) !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  border-radius: 0 0 20px 20px !important;
}

.ArticleHeader__PreHeadline {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ArticleHeader__Headline.heading-2 {
  color: #f5f9fa !important;
  font-size: clamp(1.5rem, 4.5vw, 2.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

.ArticleHeader__IntroText {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(245,249,250,0.92) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 12px !important;
  padding: 1.125rem 1.375rem !important;
}

.ArticleHeader__IntroText p { margin: 0 !important; }

.ArticleHeader__Author,
.ArticleHeader__Author * {
  color: rgba(245,249,250,0.88) !important;
}

.ArticleHeader__Image {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
}

.ArticleHeader__Image img { border-radius: 16px !important; }

/* ========== 4. Article body ========== */
.ArticleBody,
.ArticleBody .Rte {
  color: #1a2d33 !important;
}

.ArticleBody .Rte p {
  font-size: 1.125rem !important;
  line-height: 1.72 !important;
  color: #1a2d33 !important;
  margin-bottom: 1.25rem !important;
}

.ArticleBody .Rte h2 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #0d3d47 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.02em !important;
}

.ArticleBody .Rte h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #1a2d33 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

.ArticleBody .Rte blockquote {
  margin: 1.5rem 0 !important;
  padding: 1rem 1.25rem !important;
  border-left: 4px solid #0d9488 !important;
  background: #e8eef0 !important;
  border-radius: 0 12px 12px 0 !important;
  color: #5a6c73 !important;
  font-style: italic !important;
}

.ArticleBody .Rte a {
  color: #0d9488 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.ArticleBody .Rte a:hover { color: #0f766e !important; }

/* Grey box / виділення */
.ArticleBody .grey-box,
.ArticleBody .Rte .grey-box {
  background: #e8eef0 !important;
  border: 1px solid #c5d1d6 !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}

/* ========== 5. Кнопки ========== */
a.Button.Button--primary,
button.Button.Button--primary {
  background: #0d9488 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.875rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

a.Button.Button--primary:hover,
button.Button.Button--primary:hover {
  background: #0f766e !important;
  transform: translateY(-1px) !important;
}

.Button--tertiary {
  background: #e8eef0 !important;
  color: #1a2d33 !important;
  border: 1px solid #c5d1d6 !important;
  border-radius: 10px !important;
}

.Button--tertiary:hover {
  background: #d0dce0 !important;
}

/* ========== 6. Collapsible (Transparenz, FAQ) ========== */
.Collapsible--default {
  background: #ffffff !important;
  border: 1px solid #c5d1d6 !important;
  border-radius: 12px !important;
  margin-bottom: 0.5rem !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.Collapsible__Button {
  padding: 1rem 1.25rem !important;
  color: #1a2d33 !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.Collapsible__Button:hover {
  background: #f0f4f5 !important;
}

.Collapsible__Content {
  padding: 0 1.25rem 1.25rem !important;
}

.Collapsible__Content .Rte,
.Collapsible__Content .Rte p {
  font-size: 0.9375rem !important;
  color: #5a6c73 !important;
}

.FAQList .Collapsible__Button h3 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #1a2d33 !important;
  margin: 0 !important;
}

.Collapsible__Button[aria-expanded="true"] .Collapsible__StateIndicator {
  transform: rotate(180deg) !important;
}

/* ========== 7. Зображення в статті ========== */
.Article__BodyImageWrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  margin: 1.5rem 0 !important;
}

.Article__BodyImage { border-radius: 12px !important; }

/* ========== 8. Footer статті та магазину ========== */
.Article__Footer {
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #c5d1d6 !important;
}

.ArticleFooter__Disclaimer,
.ArticleFooter__Disclaimer * {
  font-size: 0.8125rem !important;
  color: #5a6c73 !important;
}

#section-shop-footer.ShopFooter,
footer.ShopFooter {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 2rem 0 !important;
  margin-top: 3rem !important;
}

.ShopFooter__StoreName { color: #1a2d33 !important; font-weight: 600 !important; }
.ShopFooter__Legal .Link { color: #5a6c73 !important; }
.ShopFooter__Legal .Link:hover { color: #0d9488 !important; }

/* ========== 9. Контейнер та тіло сторінки ========== */
body.template-article,
body.blog-area {
  background: #f0f4f5 !important;
}

.PageContainer { background: #f0f4f5 !important; }

.container-narrow {
  max-width: 720px !important;
}

/* ========== 10. Accessibility ========== */
*:focus-visible {
  outline: 2px solid #0d9488 !important;
  outline-offset: 2px !important;
}

/* ========== 11. Responsive ========== */
@media (max-width: 767px) {
  .ArticleHeader {
    border-radius: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .ArticleHeader__Headline.heading-2 { font-size: 1.375rem !important; }
  .ArticleBody .Rte p { font-size: 1rem !important; }
  a.Button.Button--primary,
  button.Button.Button--primary {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
}

@media (min-width: 768px) {
  .ArticleHeader {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
    margin-bottom: 3rem !important;
  }
}