/* Happee — light editorial refresh */

:root {
  --hp-ink: #1a1625;
  --hp-ink-muted: #5c5670;
  --hp-bg-page: #f0edf5;
  --hp-bg-paper: #ffffff;
  --hp-accent: #6d28d9;
  --hp-accent-dark: #5b21b6;
  --hp-accent-soft: #ede9fe;
  --hp-coral: #db2777;
  --hp-coral-soft: #fce7f3;
  --hp-border: #e4e0ec;
  --hp-font-sans: "Outfit", system-ui, sans-serif;
  --hp-font-display: "Lora", "Georgia", serif;
  --hp-radius: 16px;
  --hp-radius-sm: 10px;
  --hp-shadow: 0 12px 40px rgba(26, 22, 37, 0.08);
}

/* --- Base --- */
body {
  background: var(--hp-bg-page) !important;
  color: var(--hp-ink);
  line-height: 1.65;
}

p,
.content ul li,
.search,
.post-date,
.subtitle,
.docInfoDoors__form input,
.docInfoDoors__form label {
  font-family: var(--hp-font-sans) !important;
  color: var(--hp-ink) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

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

/* --- Typography --- */
.menu-ul li a,
.categories ul li {
  font-family: var(--hp-font-sans) !important;
}

.menu-ul li a {
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: var(--hp-ink-muted) !important;
  font-size: 14px !important;
}

header .top .logo,
.current-category,
.title,
.content h1,
.content h2,
.content h3,
.subtitle,
h1 {
  font-family: var(--hp-font-display) !important;
}

.title,
.content h1 {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  line-height: 1.25 !important;
  color: var(--hp-ink) !important;
}

.content h1,
h1 {
  border-left: 4px solid var(--hp-accent) !important;
  padding-left: 18px !important;
  margin-top: 28px !important;
}

.content h2:not(.title),
.content h3 {
  font-weight: 600 !important;
}

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

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

.current-category {
  color: var(--hp-coral) !important;
  letter-spacing: 0.1em;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.post-date {
  color: var(--hp-ink-muted) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* --- Shell & layout --- */
.wrapper {
  max-width: min(980px, 100%);
  padding: 0 16px 40px;
}

.content {
  background: var(--hp-bg-paper) !important;
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  border: 1px solid var(--hp-border);
  padding: 32px 36px 40px !important;
}

@media screen and (max-width: 680px) {
  .content {
    padding: 22px 18px 28px !important;
    border-radius: 12px;
  }
}

/* --- Advertorial strip --- */
.advertorial-badge {
  display: block;
  text-align: center;
  font-family: var(--hp-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-ink-muted) !important;
  padding: 14px 0 6px;
  margin: 0;
}

/* --- Article header block --- */
.article-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hp-border);
}

.article-lead {
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: var(--hp-ink-muted) !important;
  margin: 18px 0 0 !important;
  font-weight: 400 !important;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.article-meta .post-date {
  margin: 0 !important;
}

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

header .top {
  background: linear-gradient(
    135deg,
    #3b0764 0%,
    var(--hp-accent-dark) 50%,
    #7c3aed 100%
  ) !important;
  min-height: 88px !important;
}

header .top .logo {
  font-weight: 600 !important;
  font-size: 32px !important;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.menu {
  background: var(--hp-bg-paper);
  border-bottom: 1px solid var(--hp-border);
  overflow-x: auto;
}

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

/* --- Categories --- */
.categories {
  margin-top: 4px;
}

.categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categories ul li {
  background: var(--hp-accent-soft) !important;
  color: var(--hp-accent-dark) !important;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-size: 11px !important;
  padding: 6px 14px !important;
  margin: 0 !important;
}

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

.post-date::before,
.post-date::after {
  display: none !important;
}

/* --- Images --- */
.content .image {
  border-top: none !important;
  margin: 28px 0;
  border-radius: var(--hp-radius-sm);
  overflow: hidden;
}

.content .image img {
  border-radius: var(--hp-radius-sm);
}

.image--description {
  border-left: 3px solid var(--hp-coral) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 12px 0 12px 16px !important;
  margin-top: 12px !important;
  color: var(--hp-ink-muted) !important;
  font-size: 15px !important;
  background: transparent !important;
}

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

/* --- Pull quote & highlights --- */
.pull-quote,
.knifeContentBB__text {
  font-family: var(--hp-font-display) !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  color: var(--hp-accent-dark) !important;
  text-align: center;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
  background: var(--hp-accent-soft) !important;
  border-radius: var(--hp-radius-sm) !important;
  border: none !important;
}

.highlight-banner {
  color: var(--hp-accent-dark) !important;
  text-align: center;
  font-family: var(--hp-font-display) !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  padding: 20px;
  margin: 24px 0 !important;
  background: var(--hp-coral-soft);
  border-radius: var(--hp-radius-sm);
  border-left: none !important;
}

/* --- Doc block card --- */
.doc-block {
  display: grid !important;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px !important;
  margin: 28px 0 !important;
  background: var(--hp-accent-soft);
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-border);
  overflow: hidden;
}

.doc-block .doc-photo {
  float: none !important;
  margin: 0 !important;
  max-width: 120px !important;
}

.doc-block .doc-photo img {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 560px) {
  .doc-block {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .doc-block .doc-photo {
    justify-self: center;
    max-width: 100px;
  }
}

.content hr {
  border: none;
  height: 1px;
  background: var(--hp-border);
  margin: 32px 0;
}

/* --- Ingredients --- */
.ingredients--img--wrapper::after {
  background: var(--hp-accent-soft) !important;
  border-color: var(--hp-accent) !important;
}

.ingredients--item {
  background: var(--hp-accent-soft) !important;
  border-color: var(--hp-accent) !important;
  border-radius: var(--hp-radius-sm) !important;
}

.ingredients--item p,
.ingredients--item p.ingredients--item--title {
  color: var(--hp-accent-dark) !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(--hp-accent) !important;
  }
}

/* --- Buttons --- */
.button {
  background: linear-gradient(180deg, #a78bfa 0%, var(--hp-accent) 100%) !important;
  filter: none !important;
  color: #fff !important;
  font-family: var(--hp-font-sans) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.btn {
  background: linear-gradient(180deg, var(--hp-coral), #be185d) !important;
  border-radius: 999px !important;
  font-family: var(--hp-font-sans) !important;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border: none !important;
}

.btn:hover {
  background: linear-gradient(180deg, #f472b6, var(--hp-coral)) !important;
  color: #fff !important;
}

.danger-text {
  color: var(--hp-coral) !important;
}

/* --- Counter --- */
.ofCounterSecond__counterWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  width: fit-content;
  margin: 16px auto;
  background: var(--hp-coral) !important;
  border-radius: 999px !important;
  font-family: var(--hp-font-sans) !important;
  font-size: 18px !important;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

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

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

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

.docInfoDoors__formSubTitle {
  color: var(--hp-ink-muted) !important;
}

.door__form {
  border-color: var(--hp-accent) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
  background: var(--hp-bg-paper) !important;
}

.door__ttl {
  font-family: var(--hp-font-display) !important;
  color: var(--hp-ink) !important;
}

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

/* --- Comments section --- */
h1.comm {
  border-left: none !important;
  padding-left: 0 !important;
  text-align: center;
  font-size: 28px !important;
  margin-bottom: 24px !important;
}

.comment {
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-border) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  background: #faf9fc;
}

.comment .ava {
  border-radius: 50%;
}

/* --- Social --- */
.social {
  border-color: var(--hp-border) !important;
  border-radius: var(--hp-radius-sm);
  padding: 16px !important;
}

/* --- Footer --- */
footer {
  background: var(--hp-bg-page) !important;
  border-top-color: var(--hp-border) !important;
}

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

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

.note {
  background: #fffbeb !important;
  color: var(--hp-ink-muted) !important;
  border-radius: var(--hp-radius-sm);
  padding: 16px 20px !important;
  border-left: 4px solid #f59e0b !important;
}

.stock-update {
  background: var(--hp-accent-soft) !important;
  border-color: var(--hp-border) !important;
  border-radius: var(--hp-radius-sm) !important;
}

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

@media screen and (max-width: 680px) {
  .current-category {
    display: block !important;
  }
}

/* --- Survey box --- */
.ctContent.image--description {
  background: var(--hp-accent-soft) !important;
  border-radius: var(--hp-radius-sm) !important;
  padding: 20px 24px !important;
  border: 1px solid var(--hp-border) !important;
}