/* PharmaWeb site system (Oct 2026) — one calm, flat layer loaded last.
 * Six colours: brand, ink, muted text, line, surface, page.
 * Functional colours (error / warning / star) are kept only where they carry meaning. */
html:root:not([data-theme="dark"]) {
  --ss-brand: #047857;
  --ss-brand-ink: #03573F;
  --ss-ink: #14231E;
  --ss-muted: #4F5F59;
  --ss-line: #DCE4E0;
  --ss-surface: #FFFFFF;
  --ss-page: #F6F8F7;
  --ss-tint: #EAF4EF; /* brand at ~8%: selected/hover states only */

  --c-bg: var(--ss-page);
  --c-surface: var(--ss-surface);
  --c-surface-2: var(--ss-page);
  --c-surface-3: var(--ss-tint);
  --c-raised: var(--ss-surface);
  --c-border: var(--ss-line);
  --c-border-strong: #C5D1CB;
  --c-text-strong: var(--ss-ink);
  --c-text: var(--ss-ink);
  --c-text-2: var(--ss-muted);
  --c-text-3: var(--ss-muted);
  --c-brand: var(--ss-brand);
  --c-brand-hover: var(--ss-brand-ink);
  --c-brand-subtle: var(--ss-tint);
  --c-brand-text: var(--ss-brand-ink);
  --c-on-brand-subtle: var(--ss-brand-ink);
  /* the purple accent is retired: everything interactive is brand green */
  --c-accent: var(--ss-brand);
  --c-accent-hover: var(--ss-brand-ink);
  --c-accent-subtle: var(--ss-tint);
  --c-on-accent-subtle: var(--ss-brand-ink);
  --c-accent-text: var(--ss-brand-ink);
  --c-hero-from: var(--ss-page);
  --c-hero-to: var(--ss-page);
  --c-orb: transparent;
  --c-hero-glow: none;
  --c-cta-gradient: var(--ss-brand);
  --c-cta-shadow: none;
  --c-search-shadow: none;
  --c-shadow-1: none;
  --c-shadow-2: 0 1px 2px rgba(20, 35, 30, .06);
  --c-card-shadow: none;
  --c-hdr-bg: var(--ss-surface);
  --c-hdr-solid: var(--ss-surface);
  --c-hdr-border: var(--ss-line);

}
:root { --ss-r: 10px; --ss-r-card: 12px; --ss-space: 16px; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme]) {
    --ss-ink: #E6EEEA; --ss-muted: #A7B6B0; --ss-line: #2A3833;
    --ss-surface: #141C19; --ss-page: #0E1412; --ss-tint: #16322A;
    --ss-brand: #34B98A; --ss-brand-ink: #5FD0A5; --c-border-strong: #3A4A44;
  }
}
html:root[data-theme="dark"] {
  --ss-ink: #E6EEEA; --ss-muted: #A7B6B0; --ss-line: #2A3833;
  --ss-surface: #141C19; --ss-page: #0E1412; --ss-tint: #16322A;
  --ss-brand: #34B98A; --ss-brand-ink: #5FD0A5; --c-border-strong: #3A4A44;
}

/* ---------- Typography scale (1.25 ratio) ---------- */
body { color: var(--ss-ink); background: var(--ss-page); font-size: 1rem; line-height: 1.65; }
main h1, .h1, main .display-4, main .display-5 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.25; font-weight: 700; letter-spacing: 0; }
main h2, .h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.3; font-weight: 700; letter-spacing: 0; }
main h3, .h3 { font-size: 1.15rem; line-height: 1.4; font-weight: 600; }
main h4, main h5, .h4, .h5 { font-size: 1rem; line-height: 1.45; font-weight: 600; }
main .lead, main .da-lead { font-size: 1.0625rem; color: var(--ss-muted); font-weight: 400; }
.text-muted, small, .small { color: var(--ss-muted) !important; }
main h1, main h2, main h3 { color: var(--ss-ink); -webkit-text-fill-color: currentColor; background: none; }

/* ---------- No decoration that reads as a template ---------- */
main *, .site-header *, footer * { text-shadow: none !important; }
main [class*="hero"], main [class*="cta"], main [class*="gradient"], main [class*="banner"],
.support-hero, .chat-cta-card, .success-card, .da-hero, .hero-section {
  background-image: none !important;
}
main *, header, .site-header, .navbar, nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.da-orb, [class*="orb"], [class*="glow"], .floating-animation, .pulse-animation,
.chat-cta-card::before, .support-hero::before, .support-card::before { animation: none !important; }
.da-orb { display: none !important; }

/* scroll-reveal content must be visible without scrolling or JS */
.animate-on-scroll, .fade-in-up, .fade-in, .reveal, .reveal-on-scroll, .reveal-stagger > *, .pdp-reveal,
[data-aos], [data-reveal], .animated, .animate__animated {
  opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; visibility: visible !important;
}
@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .form-control, .form-select { transition: background-color .15s, border-color .15s, color .15s; }
}

/* ---------- Flat cards ---------- */
.card, .support-card, .da-card, .pdp-buy-card, .pdp-key-facts, .pdp-about-panel, .pdp-datasheet-section,
.success-card, .info-box, .notice-box, .next-steps-box, .marketplace-info, .ticket-item, .accordion-item,
.da-product-card, .da-hero-vis .hv-card, .blog-card, .article-card, .category-card, .checkout-card, .order-card, .cart-card, .contact-item, .chat-feature {
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-r-card) !important;
  box-shadow: none !important;
}
.card:hover, .support-card:hover, .da-card:hover, .da-product-card:hover, .contact-item:hover, .chat-feature:hover, .ticket-item:hover,
.blog-card:hover, .article-card:hover, .category-card:hover {
  transform: none !important; box-shadow: none !important; border-color: var(--c-border-strong) !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--ss-line) !important; }

/* ---------- Buttons: one primary, one secondary ---------- */
.btn, .da-btn, .pdp-btn-add-to-cart, .btn-checkout, .chat-open-btn, button.btn-primary {
  border-radius: var(--ss-r) !important;
  min-height: 44px; padding: .55rem 1.1rem; font-weight: 600; font-size: .975rem;
  box-shadow: none !important; background-image: none !important; transform: none !important;
  letter-spacing: 0; text-transform: none;
}
.btn::before, .btn::after, .btn-primary::before { display: none !important; }
.btn-primary, .btn-success, .da-btn-primary, .pdp-btn-add-to-cart, .btn-checkout, .chat-open-btn {
  background-color: var(--ss-brand) !important; border: 1px solid var(--ss-brand) !important; color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .da-btn-primary:hover, .pdp-btn-add-to-cart:hover, .btn-checkout:hover, .chat-open-btn:hover {
  background-color: var(--ss-brand-ink) !important; border-color: var(--ss-brand-ink) !important; color: #fff !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-info, .btn-outline, .btn-light, .btn-outline-light, .btn-secondary, .da-btn-secondary {
  background-color: var(--ss-surface) !important; border: 1px solid var(--c-border-strong) !important; color: var(--ss-ink) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline:hover, .btn-light:hover, .btn-outline-light:hover, .btn-secondary:hover, .da-btn-secondary:hover {
  background-color: var(--ss-tint) !important; border-color: var(--ss-brand) !important; color: var(--ss-brand-ink) !important;
}
.btn:focus-visible, a:focus-visible, button:focus-visible, .form-control:focus, .form-select:focus {
  outline: 2px solid var(--ss-brand) !important; outline-offset: 2px; box-shadow: none !important;
}

/* ---------- Forms ---------- */
main .form-control, main .form-select, main input[type="text"], main input[type="email"], main input[type="tel"],
main input[type="number"], main input[type="password"], main textarea, main select {
  border: 1px solid var(--c-border-strong) !important; border-radius: var(--ss-r) !important;
  background: var(--ss-surface) !important; color: var(--ss-ink); box-shadow: none !important;
  min-height: 44px; font-size: 1rem;
}
main textarea { min-height: 120px; }
main .form-label, main label { font-weight: 600; font-size: .9375rem; color: var(--ss-ink); }
main .invalid-feedback { color: #B42318; }

/* ---------- Icon tiles become plain inline icons ---------- */
.contact-icon, .chat-feature-icon, .support-icon-pill, [class*="icon-tile"], [class*="feature-icon"] {
  background: none !important; box-shadow: none !important; color: var(--ss-brand) !important;
}
.chat-feature-icon .fa-3x, main .fa-3x { font-size: 1.5rem !important; }

/* ---------- Header & footer ---------- */
.site-header, header.da-header, .da-header, .navbar {
  background: var(--ss-surface) !important; border-bottom: 1px solid var(--ss-line) !important; box-shadow: none !important;
}
footer, .site-footer, .da-footer { background: var(--ss-surface) !important; border-top: 1px solid var(--ss-line); color: var(--ss-muted); }
footer a, .site-footer a, .da-footer a { color: var(--ss-ink); }
footer a:hover, .site-footer a:hover, .da-footer a:hover { color: var(--ss-brand-ink); text-decoration: underline; }
footer h2, footer h3, footer h4, footer h5, footer h6 { font-size: .9375rem !important; font-weight: 700; color: var(--ss-ink) !important; }

/* ---------- Chips: quiet, one style ---------- */
.da-filter-chip, .pdp-chip, .badge, .chip, [class*="-chip"] {
  background: var(--ss-page) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important;
  box-shadow: none !important; background-image: none !important; font-weight: 500; border-radius: 999px;
}
.badge.bg-danger, .badge.text-bg-danger { background: #FDECEA !important; color: #B42318 !important; }

/* ---------- Sections & spacing rhythm ---------- */
.da-section, .pdp-how-section, .pdp-faq-section { padding-block: clamp(16px, 3vw, 32px); }

/* ---------- Mobile ---------- */
@media (max-width: 576px) {
  main .container, main .container-fluid { padding-inline: var(--ss-space); }
  main h1, main .display-4 { font-size: 1.5rem; }
  .btn, .da-btn { width: auto; }
  .support-hero, .hero-section { padding-block: 24px !important; }
  footer .row > * { margin-bottom: 16px; }
}

/* ---------- /drugs/: category card grid ---------- */
.da-landing-groups { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; columns: auto !important; }
.da-group-card { display: flex; flex-direction: column; gap: 6px; padding: 16px !important; margin: 0 !important; break-inside: avoid;
  background: var(--ss-surface) !important; border: 1px solid var(--ss-line) !important; border-radius: var(--ss-r-card) !important; box-shadow: none !important; }
.da-group-card h2 { font-size: 1.1rem !important; margin: 0; }
.da-group-card h2 a { color: var(--ss-ink); text-decoration: none; }
.da-group-card h2 a:hover { color: var(--ss-brand-ink); }
.da-group-en { margin: 0; color: var(--ss-muted); font-size: .85rem; }
.da-group-desc { margin: 0; color: var(--ss-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.da-group-count { margin: 0; font-weight: 600; font-size: .9rem; color: var(--ss-ink); }
.da-group-more summary { cursor: pointer; color: var(--ss-brand-ink); font-size: .9rem; }
.da-group-more .da-group-samples { margin-top: 8px; max-height: 260px; overflow: auto; }
.da-group-card .da-group-cta { margin-top: auto; align-self: flex-start; }