/* Natural Pick — light visual refresh (palette + typography). Content unchanged in HTML. */

:root {
  --np-ink: #1c1917;
  --np-ink-muted: #57534e;
  --np-bg-page: #f4f3f0;
  --np-bg-paper: #fffcf9;
  --np-accent: #0f766e;
  --np-accent-dark: #115e59;
  --np-accent-soft: #ccfbf1;
  --np-rose: #9d174d;
  --np-sage: #134e4a;
  --np-sage-bg: #ecfdf5;
  --np-border: #e7e5e4;
  --np-font-sans: "Source Sans 3", "Inter", system-ui, sans-serif;
  --np-font-display: "Fraunces", "Georgia", serif;
  --np-radius: 14px;
  --np-shadow: 0 8px 30px rgba(28, 25, 23, 0.07);
}

/* --- Typography --- */
body {
  background: var(--np-bg-page) !important;
  color: var(--np-ink);
}

p,
.content ul li,
.search,
.post-date,
.subtitle,
.docInfoDoors__form input,
.docInfoDoors__form label {
  font-family: var(--np-font-sans) !important;
  color: var(--np-ink) !important;
}

.content ul li {
  color: var(--np-ink-muted) !important;
}

/* Nav + chips: clean sans */
.menu-ul li a,
.categories ul li {
  font-family: var(--np-font-sans) !important;
}

.menu-ul li a {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--np-ink-muted) !important;
}

.post-date {
  font-family: var(--np-font-sans) !important;
}

/* Display serif for article headlines */
header .top .logo,
.current-category,
.title,
.content h1,
.content h2,
.content h3,
.subtitle,
h1 {
  font-family: var(--np-font-display) !important;
}

.title,
.content h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--np-ink) !important;
}

.content h1,
h1 {
  border-left-color: var(--np-accent) !important;
}

.content h2,
.content h3 {
  font-weight: 600 !important;
}

.content h2:not(.title) {
  color: var(--np-accent) !important;
}

.content h3 {
  color: var(--np-ink) !important;
}

.current-category {
  color: var(--np-accent) !important;
  letter-spacing: 0.04em;
}

.post-date {
  color: var(--np-ink-muted) !important;
  font-weight: 400 !important;
}

/* --- Shell --- */
.wrapper {
  max-width: min(1120px, 100%);
}

.content {
  background: var(--np-bg-paper) !important;
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  border: 1px solid var(--np-border);
}

/* --- Header --- */
header {
  background: transparent !important;
  border-radius: var(--np-radius) var(--np-radius) 0 0;
  overflow: hidden;
  box-shadow: var(--np-shadow);
}

header .top {
  background: linear-gradient(
    125deg,
    var(--np-accent-dark) 0%,
    var(--np-accent) 45%,
    #14b8a6 100%
  ) !important;
  min-height: 100px !important;
}

header .top .logo {
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.menu {
  background: var(--np-bg-paper);
  border-bottom: 1px solid var(--np-border);
}

.menu-ul li::after {
  border-right-color: var(--np-border) !important;
  background: transparent !important;
}

/* --- Categories & meta --- */
.categories ul li {
  background: #d6d3d1 !important;
  color: var(--np-ink) !important;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

.categories ul li.current {
  background: var(--np-accent) !important;
  color: #fff !important;
}

.post-date::before,
.post-date::after {
  border-color: var(--np-border) !important;
}

/* --- Content accents (was #f72210 / red) --- */
.content .image {
  border-top-color: var(--np-accent) !important;
}

.image--description {
  border-color: var(--np-accent) !important;
  color: var(--np-ink-muted) !important;
}

.image-with-description span {
  background: linear-gradient(
    90deg,
    var(--np-accent-dark),
    var(--np-accent)
  ) !important;
  color: #fff !important;
}

.button {
  background: linear-gradient(
    180deg,
    #5eead4 0%,
    var(--np-accent) 65%
  ) !important;
  filter: none !important;
  color: #fff !important;
  font-family: var(--np-font-sans) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.btn {
  background: linear-gradient(
    180deg,
    #2dd4bf,
    var(--np-accent-dark)
  ) !important;
  border-radius: 10px !important;
  font-family: var(--np-font-sans) !important;
  letter-spacing: 0.06em;
}

.btn:hover {
  background: linear-gradient(
    180deg,
    #5eead4,
    var(--np-accent)
  ) !important;
  color: #fff !important;
}

.danger-text {
  color: var(--np-rose) !important;
}

/* --- Roulette / wheel area --- */
.spin-wrapper {
  border-radius: var(--np-radius);
  border-color: var(--np-accent) !important;
}

.spin-wrapper .ruletka-p,
.docInfoDoors__formSubTitle {
  font-family: var(--np-font-sans) !important;
}

.docInfoDoors__formTitle--red {
  color: var(--np-accent-dark) !important;
}

.docInfoDoors__formSubTitle {
  color: var(--np-sage) !important;
}

/* --- Ingredients (was #1d7200) --- */
.ingredients--img--wrapper::after {
  background: var(--np-sage-bg) !important;
  border-color: var(--np-sage) !important;
}

.ingredients--item {
  background: var(--np-sage-bg) !important;
  border-color: var(--np-sage) !important;
}

.ingredients--item p,
.ingredients--item p.ingredients--item--title {
  color: var(--np-sage) !important;
}

@media screen and (max-width: 680px) {
  .ingredients--wrapper--items > .ingredients--item:nth-child(3)::after,
  .ingredients--wrapper--items > .ingredients--item:nth-child(4)::after,
  .ingredients--wrapper--items > .ingredients--item::after {
    background-color: var(--np-sage) !important;
  }
}

/* --- Infographic labels --- */
.infograf .flex-disc p {
  color: var(--np-accent-dark) !important;
}

/* --- Inline heading color (content text unchanged) --- */
h2[style*="color: red"] {
  color: var(--np-accent) !important;
}

/* --- Social --- */
.social {
  border-color: var(--np-border) !important;
}

/* --- Advertorial strip --- */
body > p:first-of-type {
  font-family: var(--np-font-sans) !important;
  color: var(--np-ink-muted) !important;
  letter-spacing: 0.12em;
  font-size: 13px !important;
  text-transform: uppercase;
}

/* --- Footer (inline styles still present; soften) --- */
footer {
  background: var(--np-bg-page) !important;
  border-top-color: var(--np-border) !important;
}

footer a[href] {
  color: var(--np-accent) !important;
}

.claim-now {
  color: var(--np-accent) !important;
  font-family: var(--np-font-display) !important;
}

.note {
  background: #fffbeb !important;
  color: var(--np-ink-muted) !important;
}

.stock-update {
  background: var(--np-sage-bg) !important;
  border-color: var(--np-border) !important;
}

.stock-update span {
  color: var(--np-accent) !important;
}