/* ============================================================
   nupshop — overrides & custom sections
   single source of truth for our injected sections
   ============================================================ */

/* === Section padding system ===
   Each section gets vertical breathing room from top of section
   to first heading and from last content to bottom of section. */
.nupshop-hero,
.proof-feed-section,
.epqv12,
.why-ours-section,
.how-table,
.one-review,
.real-customer-saying,
.earn-money-section,
.expert-guide,
.faq-custom-section,
.ready-transform-section {
  padding-top: var(--nup-section-pad-y);
  padding-bottom: var(--nup-section-pad-y);
}
@media (max-width: 768px) {
  .nupshop-hero,
  .proof-feed-section,
  .epqv12,
  .why-ours-section,
  .how-table,
  .one-review,
  .real-customer-saying,
  .earn-money-section,
  .expert-guide,
  .faq-custom-section,
  .ready-transform-section {
    padding-top: var(--nup-section-pad-y-mobile);
    padding-bottom: var(--nup-section-pad-y-mobile);
  }
}
/* Hero is full-bleed and has its own internal layout */
.nupshop-hero { padding-top: 0; padding-bottom: 0; }

/* === Section background alternation ===
   white → tint → white → tint → … */
.nupshop-hero,
.epqv12,
.how-table,
.faq-custom-section { background-color: var(--nup-bg-white); }

.proof-feed-section,
.why-ours-section,
.one-review,
.real-customer-saying,
.earn-money-section,
.expert-guide { background-color: var(--nup-bg-tint); }
/* earn-money-section: explicitly kill reviews.css linear-gradient shorthand */
.earn-money-section { background-image: none; }

/* Sections with their own background image keep it */
.ready-transform-section { background-color: transparent; }

/* === Heading system === */
.nupshop-hero__title {
  font-family: var(--nup-font);
  font-size: var(--nup-h1-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--nup-navy);
  margin: 0 0 24px;
}
.proof-feed-heading,
.epqv12__title,
.why-ours__title,
.how-table__title,
.real-customer-saying__title,
.expert-guide-content__title,
.faq-custom-section__title,
.earn-money-howto-title-text,
.ready-transform-section__title {
  font-family: var(--nup-font);
  font-size: var(--nup-h2-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--nup-navy);
  margin: 0 0 20px;
}
/* Headings inside wrappers with their own gap control */
.earn-money-howto-title-text,
.ready-transform-section__title { margin-bottom: 0; }
/* White text on dark backgrounds */
.earn-money-howto-title-text,
.ready-transform-section__title { color: var(--nup-bg-white); }

/* Reviews section: h2 aligned with subtitle (which is already centered) */
.real-customer-saying__header { text-align: center; }
.real-customer-saying__subtitle {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--nup-text-muted);
  max-width: 680px;
  margin: 8px auto 0;
}

/* Highlighted span inside headings */
.how-table__title .highlighted-title,
.real-customer-saying__title .highlighted-title,
.expert-guide-content__title .highlighted-title,
.faq-custom-section__title .highlighted-title,
.ready-transform-section__title .highlighted-title { color: inherit; }
.earn-money-howto-title-text .highlighted-title { color: var(--nup-orange); }

@media (max-width: 768px) {
  .nupshop-hero__title { font-size: var(--nup-h1-size-mobile); letter-spacing: -1px; }
  .proof-feed-heading,
  .epqv12__title,
  .why-ours__title,
  .how-table__title,
  .real-customer-saying__title,
  .expert-guide-content__title,
  .faq-custom-section__title,
  .earn-money-howto-title-text,
  .ready-transform-section__title {
    font-size: var(--nup-h2-size-mobile);
    letter-spacing: -0.6px;
  }
}

/* === Erik one-review === */
.one-review-block { max-width: 816px; margin: 0 auto; padding: 0 16px; background: transparent; border-radius: 0; }
.one-review-item-img .pc-image { filter: none; }
.one-review-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--nup-bg-white);
  border-radius: var(--nup-radius-md);
  box-shadow: var(--nup-shadow-md);
  overflow: hidden;
}
.one-review-item-content {
  flex: 1 1 auto;
  padding: 32px 30px 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.one-review-item-content p {
  font-family: var(--nup-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nup-navy);
  margin: 0;
}
.one-review-rating { display: flex; align-items: center; gap: 12px; }
.one-review-rating span { font-size: 14px; color: var(--nup-text-muted); }
.one-review-rating span b { color: var(--nup-navy); font-weight: 700; }
.one-review-rating-mb { display: none; }
.one-review-item-img {
  flex: 0 0 144px;
  position: relative;
  overflow: hidden;
}
.one-review-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.one-review-item-img .mb-image { display: none; }
@media (max-width: 768px) {
  /* Keep row layout, just shrink photo column (matches референс) */
  .one-review-item { flex-direction: row; }
  .one-review-item-content { padding: 18px 12px 18px 16px; }
  .one-review-item-content p { font-size: 14px; line-height: 1.4; }
  .one-review-item-img {
    flex: 0 0 93px;
    min-width: 93px;
    height: auto;
    align-self: stretch;
    order: 2;
  }
  .one-review-item-img .pc-image { display: none; }
  .one-review-item-img .mb-image { display: block; object-fit: contain; }
  .one-review-rating-mb { display: none; }
}

/* === Real customers reviews grid === */
section.real-customer-saying .real-customer-saying-reviews:not(.real-customer-saying__lower .real-customer-saying-reviews) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1240px;
  margin: var(--nup-section-heading-gap) auto 0;
  padding: 0 15px;
}
.real-customer-saying-reviews-item {
  width: 389px;
  min-height: 197px;
}

/* === Real customers shop the range bottom block === */
.real-customer-saying__lower {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.real-customer-saying__lower .real-customer-saying-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--nup-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--nup-text);
}
.real-customer-saying__lower .real-customer-saying-reviews svg {
  width: 96px;
  height: 17px;
  flex-shrink: 0;
  display: block;
}
.real-customer-saying__lower .real-customer-saying-reviews span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.real-customer-saying__lower .real-customer-saying-reviews span,
.real-customer-saying__lower span {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nup-text);
  letter-spacing: 0;
  white-space: normal;
}
.real-customer-saying__lower .real-customer-saying-reviews b,
.real-customer-saying__lower span b {
  font-weight: 700;
  color: var(--nup-navy);
}
.real-customer-saying-btn { display: flex; justify-content: center; }

/* === Earn money 180-day guarantee === */
.earn-money { display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.earn-money-howto {
  margin-top: var(--nup-section-heading-gap);
  width: 100%;
  max-width: 1232px;
  border-radius: var(--nup-radius-md);
  background-color: var(--nup-bg-white);
  display: flex;
  align-items: stretch;
  padding-right: 40px;
  box-shadow: var(--nup-shadow-md);
  overflow: hidden;
}
.earn-money-howto-title {
  background-color: var(--nup-primary);
  color: var(--nup-bg-white);
  padding: 30px 54px 30px 32px;
  display: flex;
  align-items: center;
  width: 388px;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50%, calc(100% - 50px) 100%, 0 100%);
}
.earn-money-howto-title-text { line-height: 0.95; text-align: start; }
.earn-money-howto-title-text .highlighted-title { display: block; }
.earn-money-howto-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
}
.earn-money-howto-content-upper {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}
.earn-money-howto-content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 260px;
  padding: 10px 16px;
}
.earn-money-howto-content-item-number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--nup-primary);
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.earn-money-howto-content-item-number span {
  font-family: var(--nup-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--nup-bg-white);
}
.earn-money-howto-content-item h4 {
  font-family: var(--nup-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  text-align: center;
  color: var(--nup-navy);
  text-transform: uppercase;
  margin: 0;
}
.earn-money-howto-content-item p {
  font-family: var(--nup-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--nup-text);
  margin: 0;
}
.earn-money-howto-content-lower {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.earn-money-howto-content-lower span {
  font-family: var(--nup-font);
  font-size: 12px;
  color: var(--nup-text-light);
}
@media (max-width: 1100px) {
  .earn-money-howto {
    flex-direction: column;
    max-width: 360px;
    padding: 0 0 24px;
  }
  .earn-money-howto-title {
    width: 100%;
    padding: 30px 16px 50px;
    justify-content: center;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
  }
  .earn-money-howto-title-text { text-align: center; }
  .earn-money-howto-title-text .highlighted-title { display: inline; }
  .earn-money-howto-content-upper { flex-direction: column; align-items: center; gap: 18px; }
}

/* === Baseem expert guide === */
.expert-guide-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 16px;
}
.expert-guide-media {
  flex: 0 0 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expert-guide-media img { max-width: 100%; height: auto; }
.expert-guide-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.expert-guide-content__title { line-height: 1.1; }
.expert-guide-content .text {
  font-family: var(--nup-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nup-navy);
  margin: 0;
  max-width: 640px;
}
/* reveal block — 1:1 port of референс */
.expert-guide-results__content-img {
  margin-top: 50px;
  position: relative;
  width: 100%;
  aspect-ratio: 2679 / 1342;
  max-width: 608px;
  border-radius: 10px;
  background-color: #161d33;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.expert-guide-results__content-img::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: inherit;
  filter: blur(10px);
  transition: opacity 1s;
  z-index: 1;
}
.expert-guide-results__content-img.revealed::before { opacity: 0; }
.expert-guide-results__btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  transition: opacity 1s;
}
.expert-guide-results__content-img.revealed .expert-guide-results__btn {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 1s, transform 1s;
}
.expert-guide-results__reveal {
  font-family: var(--nup-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--nup-navy);
  text-align: center;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.expert-guide-results__reveal:hover {
  background-color: var(--nup-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.25);
}
.expert-guide-results__btn span {
  font-family: var(--nup-font);
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.expert-guide-results__btn b { font-weight: 700; }
@media (max-width: 1200px) {
  .expert-guide-results__content-img { width: 100%; height: auto; margin-top: 20px; }
}
.expert-guide-media-mb { display: none; }
@media (max-width: 900px) {
  .expert-guide-container { flex-direction: column; gap: 24px; }
  .expert-guide-media { flex: 0 0 auto; }
  .expert-guide-content { align-items: center; }
  .expert-guide-content .text { text-align: center; }
}

/* === FAQ section === */
.faq-custom-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--nup-section-heading-gap);
}
.faq-custom-section__subtitle {
  font-family: var(--nup-font);
  font-size: 17px;
  font-weight: 400;
  color: var(--nup-text-muted);
  margin: 0;
}
.faq-custom-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}
.faq-custom-section__item {
  width: 100%;
  background: var(--nup-bg-white);
  border: 1px solid var(--nup-border);
  border-radius: var(--nup-radius-lg);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: var(--nup-shadow-sm);
  overflow: hidden;
}
.faq-custom-section__item:hover {
  border-color: rgba(23, 126, 201, 0.35);
  box-shadow: var(--nup-shadow-md);
}
.faq-custom-section__item:has(.faq-custom-section-answer.open) {
  border-color: var(--nup-primary);
  box-shadow: var(--nup-shadow-lg);
}
.faq-custom-section-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  gap: 16px;
}
.faq-custom-section-question h4 {
  font-family: var(--nup-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--nup-navy);
  text-transform: none;
  letter-spacing: -0.2px;
  line-height: 1.4;
  flex: 1;
  margin: 0;
}
.faq-custom-section-question svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--nup-primary);
  transition: transform .3s ease;
}
.faq-custom-section-question.open svg { transform: rotate(180deg); }
.faq-custom-section-answer {
  padding: 0 28px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
}
.faq-custom-section-answer.open {
  max-height: 1500px;
  opacity: 1;
  padding: 0 28px 24px;
}
.faq-custom-section-answer p {
  font-family: var(--nup-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--nup-text-muted);
  margin: 0 0 10px;
}
.faq-custom-section-answer p:last-child { margin-bottom: 0; }
.faq-custom-section-answer p strong { color: var(--nup-navy); font-weight: 700; }

.faq-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: var(--nup-bg-white);
  font-size: 12px;
  font-weight: 800;
  margin-right: 4px;
  vertical-align: -4px;
}

@media (max-width: 768px) {
  .faq-custom-section-question { padding: 18px 20px; }
  .faq-custom-section-question h4 { font-size: 15px; }
  .faq-custom-section-answer { padding: 0 20px; }
  .faq-custom-section-answer.open { padding: 0 20px 20px; }
}

/* === Ready transform section === */
.ready-transform-section {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 540px;
  background-image:
    linear-gradient(0deg, rgba(66, 65, 65, 0.24), rgba(66, 65, 65, 0.44)),
    linear-gradient(180deg, rgba(66, 65, 65, 0) 0%, rgba(66, 65, 65, 0.65) 44.76%),
    url('extras/ready-transform.webp');
  background-size: cover;
  background-position: center 30%;
  background-blend-mode: multiply;
}
.ready-transform-section-container {
  width: 100%;
  max-width: var(--nup-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ready-transform-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ready-transform-section__subtitle {
  font-family: var(--nup-font);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: var(--nup-bg-white);
  margin: 0;
  max-width: 720px;
}
.ready-transform-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}
.ready-transform-section__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ready-transform-section__points-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ready-transform-section__points-item span {
  font-family: var(--nup-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--nup-bg-white);
}
.ready-transform-section-btn { display: flex; justify-content: center; }
.ready-transform-section-reviews {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ready-transform-section-reviews span {
  font-family: var(--nup-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--nup-bg-white);
}
.ready-transform-section-reviews b { font-weight: 700; }
@media (max-width: 768px) {
  .ready-transform-section__points-item span { font-size: 14px; }
}

/* === CTA block: contact (left) + limited-time discount card (right) === */
.nup-cta2 {
  max-width: var(--nup-container-max);
  margin: 56px auto;
  padding: 0 16px;
  font-family: var(--nup-font);
}
.nup-cta2__inner {
  display: flex;
  gap: 32px;
  align-items: stretch;
}
.nup-cta2__left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nup-cta2__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nup-primary);
  margin-bottom: 12px;
}
.nup-cta2__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--nup-navy);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.nup-cta2__text {
  font-size: 16px;
  color: var(--nup-text-muted, #5b6577);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 380px;
}
.nup-cta2__write {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--nup-primary);
  color: #fff;
  font-family: var(--nup-font);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.nup-cta2__write:hover { background: var(--nup-primary-dark); transform: translateY(-1px); }
.nup-cta2__write svg { width: 20px; height: 20px; flex-shrink: 0; }

.nup-cta2__card {
  flex: 1.15 1 0;
  background: #fff;
  border: 1px solid var(--nup-border, #e3e7ee);
  border-radius: 18px;
  padding: 34px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(12, 31, 74, 0.06);
}
.nup-cta2__badge {
  display: inline-flex;
  background: #e6f7ec;
  color: #1a9e4b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.nup-cta2__offer {
  font-size: 30px;
  font-weight: 800;
  color: var(--nup-navy);
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.15;
}
.nup-cta2__offer span { color: var(--nup-primary); }
.nup-cta2__offer-text {
  font-size: 15px;
  color: var(--nup-text-muted, #5b6577);
  margin: 0 0 22px;
  line-height: 1.55;
}
.nup-cta2__offer-text b { color: var(--nup-navy); font-weight: 800; }
.nup-cta2__timer {
  font-weight: 800;
  color: var(--nup-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nup-cta2__claim {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #2ea36a 0%, #1c8c57 55%, #116b41 100%);
  color: #fff;
  font-family: var(--nup-font);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22), 0 10px 24px rgba(12,80,48,0.4);
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.nup-cta2__claim::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  border-radius: 999px 999px 40px 40px / 999px 999px 16px 16px;
  pointer-events: none;
}
.nup-cta2__claim:hover {
  background: linear-gradient(180deg, #34b074 0%, #21965f 55%, #147a4a 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(0,0,0,0.22), 0 13px 30px rgba(12,80,48,0.45);
}
.nup-cta2__claim svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 860px) {
  .nup-cta2 { margin: 36px auto; }
  .nup-cta2__inner { flex-direction: column; gap: 22px; }
  .nup-cta2__left { text-align: center; align-items: center; }
  .nup-cta2__text { max-width: none; }
  .nup-cta2__write { align-self: center; }
  .nup-cta2__title { font-size: 30px; }
  .nup-cta2__card { padding: 28px 20px; }
  .nup-cta2__offer { font-size: 24px; }
}

/* === Star rating color unification === */
.real-customer-saying-reviews-item-rating svg path,
.real-customer-saying__lower svg path,
.proof-card-rating svg path,
.one-review svg path,
.one-review-rating svg path,
.one-review-rating-mb svg path,
.proof-card-stars svg path,
.ready-transform-section-reviews svg path { fill: var(--nup-orange); }

/* === Custom footer === */
.nupshop-footer {
  background: var(--nup-bg-footer);
  color: var(--nup-text);
  padding: 64px 0 0;
  margin-top: 64px;
  border-top: 1px solid var(--nup-border);
}
.nupshop-footer__inner {
  max-width: var(--nup-container-max);
  margin: 0 auto;
  padding: 0 16px 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.nupshop-footer__col {
  display: flex;
  flex-direction: column;
}
.nupshop-footer__col--brand .nupshop-footer__logo {
  display: inline-flex;
  margin-bottom: 16px;
}
.nupshop-footer__col--brand .nupshop-footer__logo img { height: 80px; width: auto; }
.nupshop-footer__tagline {
  margin: 0;
  color: var(--nup-text-muted);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.5;
}
.nupshop-footer__title {
  font-family: var(--nup-font);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
  color: var(--nup-navy);
}
.nupshop-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nupshop-footer__list a {
  color: var(--nup-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease;
}
.nupshop-footer__list a:hover { color: var(--nup-primary); }
.nupshop-footer__bottom {
  background: rgba(12, 31, 74, 0.04);
  padding: 20px 0;
  border-top: 1px solid var(--nup-border);
}
.nupshop-footer__bottom-inner {
  max-width: var(--nup-container-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--nup-text-light);
  font-size: 13px;
  font-family: var(--nup-font);
}
.nupshop-footer__bottom-inner p { margin: 0; }
@media (max-width: 900px) {
  .nupshop-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .nupshop-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .nupshop-footer__bottom-inner { flex-direction: column; text-align: center; }
}




/* === WHY table row alignment (clean version) ===
   All 3 columns same height 529, same padding, 6 items each
   with flex: 1 1 0 to force equal row heights across columns. */
@media (min-width: 901px) {
  .how-table__content {
    align-items: center;
  }
  .how-table-labels {
    display: flex;
    flex-direction: column;
    height: 529px;
    padding: 40px 10px 40px 0;
    box-sizing: border-box;
  }
  .how-table-labels h4 {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }
  .how-table-nup-info {
    display: flex;
    flex-direction: column;
    height: 529px;
    padding: 40px 30px;
    box-sizing: border-box;
  }
  .how-table-nup-item {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
  .how-table-other {
    display: flex;
    flex-direction: column;
    height: 497px;
    padding: 24px 20px 24px 70px;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  .how-table-other-item {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    margin-left: 35px;
  }
  /* Label font adjusted for Russian (Inter wider than Barlow) */
  .how-table-labels h4 {
    font-size: 21px;
    letter-spacing: -0.6px;
    line-height: 1.15;
  }
  .how-table-other p {
    font-size: 15px;
    letter-spacing: -.2px;
  }
}
/* Fix ДРУГИЕ ТОВАРЫ floating label */
.how-table-other-title {
  white-space: nowrap;
  font-family: var(--nup-font);
  left: 50%;
  font-weight: 700;
  letter-spacing: 0.5px;
}
@media (max-width: 900px) {
  .how-table-other-title { font-size: 11px; }
}



/* WHY table: align yellow card with labels/other — take image out of flow */
@media (min-width: 901px) {
  .how-table-nup {
    position: relative;
    height: 529px;
    justify-content: flex-start;
  }
  .how-table-nup-img {
    position: absolute;
    top: -113px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    z-index: 2;
  }
}

/* WHY table: leave room for absolute image sticking above yellow card */
@media (min-width: 901px) {
  .how-table__header { margin-bottom: 100px; }
}



/* === Responsive audit fixes (2026-04-10) === */

/* Mobile overflow: diag-reviews container had fixed 389px item forcing 419px width at 360vw.
   Constrain everything to the viewport on narrow screens. */
@media (max-width: 520px) {
  .real-customer-saying-container.page-width {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .real-customer-saying-reviews-item {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 140px;
  }
  .earn-money-howto {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .earn-money-howto-title {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Belt-and-braces: section cannot horizontally scroll the page */
  #diag-reviews,
  #diag-earn {
    overflow-x: clip;
  }
}

/* Inter-only enforcement: override any lingering Barlow Condensed references
   (reviews.css, countdown.css, whystack.css, inline SVG in quiz). */
.earn-money-howto-content-item h4,
.countdown__label,
.countdown__digit,
.countdown .countdown-title,
.how-table__header h3 {
  font-family: Inter, sans-serif !important;
}

/* Inter-only enforcement for Bagisto default header (keeps icon fonts via :not exclusions) */
header p,
header a:not([class*="icon"]),
header button:not([class*="icon"]),
header li,
header h1,
header h2,
header h3,
header h4,
header span:not([class*="icon"]) {
  font-family: Inter, sans-serif !important;
}

/* Bagisto #app sets Poppins; force Inter inheritance for entire app shell */
#app {
  font-family: Inter, sans-serif !important;
}

/* Stack table (diag-stack): mobile responsive v6 — exact mirror of референс mobile layout
   82px labels (2-3 line wrap) / 106px yellow / 152px other with -65 negative margin / visible top icon */
@media (max-width: 900px) {
  .how-table__inner {
    padding-left: 12px;
    padding-right: 12px;
  }
  .how-table__content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .how-table-labels {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 100px !important;
    min-width: 100px !important;
    height: 357px !important;
    padding: 10px 5px 10px 0 !important;
    grid-template-columns: none !important;
  }
  .how-table-labels h4 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    text-align: right !important;
    margin: 0 !important;
    display: block !important;
    padding: 0 !important;
    border-bottom: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    font-weight: 700 !important;
  }
  .how-table-nup {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    z-index: 1;
  }
  .how-table-nup-img {
    display: block !important;
    position: static !important;
    height: 71px !important;
    width: 32px !important;
    margin: 0 auto -17px !important;
    transform: none !important;
    z-index: 2;
  }
  .how-table-nup-img img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  .how-table-nup-info {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 106px !important;
    min-width: 106px !important;
    height: 357px !important;
    padding: 25px 15px !important;
    background: #F9C42E !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }
  .how-table-nup-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(66,65,65,0.3) !important;
    background: transparent !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 auto !important;
  }
  .how-table-nup-item:last-child {
    border-bottom: none !important;
  }
  .how-table-other {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: 152px !important;
    min-width: 152px !important;
    height: 341px !important;
    padding: 0 20px 10px 70px !important;
    margin: 0 0 8px -65px !important;
    background: transparent;
    border: 1.5px solid rgba(66,65,65,0.35) !important;
    border-radius: 5px !important;
    z-index: 0;
  }
  .how-table-other-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(66,65,65,0.2) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  .how-table-other-item:last-child {
    border-bottom: none !important;
  }
  .how-table-other-title {
    font-size: 12px !important;
    top: -25px !important;
    left: 65% !important;
    white-space: nowrap !important;
    display: block !important;
  }
  /* Hide text paragraphs, show only icons */
  .how-table-nup-item p,
  .how-table-other-item p {
    display: none !important;
  }
  .how-table-nup-item svg,
  .how-table-other-item svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
}


/* === Bundle thumbnail tooltip (proof section) === */
/* Hide the always-visible list — content is now shown only on hover/click */
.bundle-list-v2 {
  display: none !important;
}

/* Make icon row interactive container */
.bundle-thumbnails {
  position: relative;
  z-index: 10;
}
.bundle-thumbnails-img {
  position: relative;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bundle-thumbnails-img:hover,
.bundle-thumbnails-img.is-active {
  transform: translateY(-2px);
}
.bundle-thumbnails-img.is-active {
  border-color: var(--nup-primary, #177ec9);
  box-shadow: 0 0 0 2px var(--nup-primary, #177ec9);
}

/* Tooltip popup — positioned absolutely above/below icon */
.bundle-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 280px;
  background: #fff;
  border: 1px solid rgba(12, 31, 74, 0.08);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 36px rgba(12, 31, 74, 0.18), 0 2px 8px rgba(12, 31, 74, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 100;
}
.bundle-thumbnails-img:hover .bundle-tooltip,
.bundle-thumbnails-img.is-active .bundle-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Arrow pointing down to icon */
.bundle-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 2px rgba(12, 31, 74, 0.1));
}

.bundle-tooltip__media {
  width: 100%;
  height: 140px;
  background: #ffffff;
  border: 1.5px solid rgba(23, 126, 201, 0.22);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(23, 126, 201, 0.10), 0 1px 3px rgba(12, 31, 74, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  padding: 14px;
}
.bundle-tooltip__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bundle-tooltip__title {
  font-family: var(--nup-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--nup-navy, #0c1f4a);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 6px;
  line-height: 1.2;
}
.bundle-tooltip__price {
  display: inline-block;
  background: var(--nup-orange, #fbbf24);
  color: var(--nup-navy, #0c1f4a);
  font-family: var(--nup-font, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.bundle-tooltip__desc {
  font-family: var(--nup-font, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--nup-text-muted, #64748b);
  margin: 0;
}

/* Mobile: tooltip below icon (avoid going off screen) */
@media (max-width: 768px) {
  .bundle-tooltip {
    bottom: auto;
    top: calc(100% + 12px);
    width: 240px;
  }
  .bundle-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
  }
}

/* === Bundle tooltip portal styles (replaces .bundle-thumbnails-img:hover variant) === */
#bundle-tooltip-portal {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}
#bundle-tooltip-portal .bundle-tooltip {
  position: relative;
  width: 280px;
  background: #fff;
  border: 1px solid rgba(12, 31, 74, 0.1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(12, 31, 74, 0.2);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: auto;
}
#bundle-tooltip-portal .bundle-tooltip.is-visible {
  opacity: 1;
}
/* Arrow pointing DOWN (tooltip above thumb) */
#bundle-tooltip-portal .bundle-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 2px rgba(12, 31, 74, 0.1));
}
/* Arrow flipped UP when tooltip below thumb */
#bundle-tooltip-portal .bundle-tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

#bundle-tooltip-portal .bundle-tooltip__media {
  width: 100%;
  height: 140px;
  background: #ffffff;
  border: 1.5px solid rgba(23, 126, 201, 0.22);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(23, 126, 201, 0.10), 0 1px 3px rgba(12, 31, 74, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  padding: 14px;
}
#bundle-tooltip-portal .bundle-tooltip__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#bundle-tooltip-portal .bundle-tooltip__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0c1f4a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 6px;
  line-height: 1.2;
}
#bundle-tooltip-portal .bundle-tooltip__price {
  display: inline-block;
  background: #fbbf24;
  color: #0c1f4a;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
#bundle-tooltip-portal .bundle-tooltip__desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
  margin: 0;
}

/* Override old absolute-positioned tooltip rules — portal version uses static positioning */
#bundle-tooltip-portal .bundle-tooltip {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  visibility: visible !important;
}
#bundle-tooltip-portal .bundle-tooltip.is-visible {
  opacity: 1 !important;
}

/* Center proof card CTA + top spacing */
.proof-card-product-lower {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proof-card-product-lower .proof-card-cta {
  margin-top: 28px;
  align-self: center;
}

/* Center proof card CTA — fix: parent is .proof-card-product (not -lower) */
.proof-card-product { align-items: center; }
.proof-card-product .proof-card-cta { margin-top: 28px; align-self: center; }

/* Force top spacing on proof CTA */
.proof-card-product > .proof-card-cta { margin-top: 32px !important; }

/* Product name above pricing block */
.proof-card-product-name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0c1f4a;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin: 0 0 14px;
  text-align: right;
}

/* Tooltip price badge — switch from orange to brand blue */
#bundle-tooltip-portal .bundle-tooltip__price {
  background: #177ec9 !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .proof-card-product-name { font-size: 18px; text-align: center; }
}

/* Multi-line product name */
.proof-card-product-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.proof-card-product-name__sub {
  display: inline;
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
}
.proof-card-product-name__line2 {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #475569;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .proof-card-product-name { align-items: center; }
}

/* Premium badge backdrop for product name */
.proof-card-product-name__badge {
  display: inline-block;
  background: linear-gradient(135deg, #0c1f4a 0%, #1265a1 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(12, 31, 74, 0.18);
}
.proof-card-product-name {
  align-items: flex-end;
  gap: 8px;
}
@media (max-width: 768px) {
  .proof-card-product-name__badge { font-size: 16px; padding: 7px 14px; }
}

/* Keep product name line2 on a single row */
.proof-card-product-name__line2 {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .proof-card-product-name__line2 { white-space: normal; }
}

.proof-card-product-name__badge { white-space: nowrap; }

/* === Earn-money guarantee variant (180 дней уверенности) === */
.earn-money-howto.earn-money-howto--guarantee {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 40px;
  max-width: 900px;
  gap: 14px;
}
.earn-money-howto--guarantee .earn-money-guarantee__icon {
  width: 56px;
  height: 56px;
  color: var(--nup-primary);
  margin-bottom: 4px;
}
.earn-money-howto--guarantee .earn-money-guarantee__eyebrow {
  font-family: var(--nup-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nup-primary);
}
.earn-money-howto--guarantee .earn-money-howto-title-text {
  color: var(--nup-navy);
  text-align: center;
  line-height: 1.08;
  margin: 0;
  max-width: 760px;
}
.earn-money-howto--guarantee .earn-money-guarantee__text {
  font-family: var(--nup-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--nup-text);
  max-width: 720px;
  margin: 4px 0 0;
}
@media (max-width: 768px) {
  .earn-money-howto.earn-money-howto--guarantee {
    padding: 36px 20px;
    max-width: 480px;
  }
  .earn-money-howto--guarantee .earn-money-guarantee__text { font-size: 15px; }
}

/* Fix: earn-money guarantee variant — snap mobile width + no clipping */
.earn-money-howto.earn-money-howto--guarantee {
  overflow: visible;
  height: auto;
}
@media (max-width: 1100px) {
  .earn-money-howto.earn-money-howto--guarantee {
    max-width: 560px;
    padding: 36px 24px;
  }
}
@media (max-width: 600px) {
  .earn-money-howto.earn-money-howto--guarantee {
    max-width: 92%;
    padding: 32px 18px;
  }
  .earn-money-howto--guarantee .earn-money-guarantee__text { font-size: 15px; line-height: 1.5; }
}

/* === Hide prices on main page (price-hide-2026) === */
.proof-card-price-summary,
.proof-card-price-row,
.proof-card-price-value,
.proof-card-price-label,
.proof-card-price-badge,
.price__badge-sale,
.proof-card-product-price { display: none !important; }

/* === proof feed footnote === */
.proof-feed-footnote {
  font-family: var(--nup-font);
  font-size: 13px;
  font-style: italic;
  color: var(--nup-text-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* === proof feed: single-line H2 on desktop === */
.proof-feed-header { max-width: 1100px; }
@media (min-width: 769px) {
  .proof-feed-heading { white-space: nowrap; }
}

/* === proof footnote chip background === */
.proof-feed-footnote {
  display: inline-block;
  background: rgba(23, 126, 201, 0.08);
  color: var(--nup-primary);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  margin: 14px auto 0;
}

/* === earn-money trust grid (safety badges) === */
.earn-money-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  width: 100%;
  max-width: 820px;
  margin: 28px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(23, 126, 201, 0.18);
}
.earn-money-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.earn-money-trust__item svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--nup-primary);
  margin-top: 2px;
}
.earn-money-trust__item strong {
  display: block;
  font-family: var(--nup-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--nup-navy);
  line-height: 1.3;
  margin-bottom: 3px;
}
.earn-money-trust__item span {
  font-family: var(--nup-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--nup-text);
}
@media (max-width: 700px) {
  .earn-money-trust { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; margin-top: 22px; }
}

/* video carousel header */
.nupshop-video-header { text-align: center; background: #fff; max-width: none; margin: 48px 0 0; padding: 36px 16px 28px; }
.nupshop-video-header > * { max-width: 900px; margin-left: auto; margin-right: auto; }

/* === Guarantee block v3 (3 sub-blocks + strip) === */
.earn-money-guard__header {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 24px;
  padding: 0 16px;
}
.earn-money-guard__subtitle {
  font-family: var(--nup-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--nup-text);
  max-width: 760px;
  margin: 8px auto 0;
}
/* override variant override from earlier — remove guarantee styling */
.earn-money-howto.earn-money-howto--guarantee { display: none !important; }

.earn-money-howto-content-item .earn-money-howto-content-item-number svg {
  width: 22px;
  height: 22px;
}

.earn-money-guard__strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 12px;
  max-width: 1232px;
  margin: 18px auto 0;
  padding: 12px 16px;
  font-family: var(--nup-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--nup-text);
  background: rgba(23, 126, 201, 0.06);
  border-radius: 999px;
}
.earn-money-guard__strip span:nth-child(odd) { color: var(--nup-navy); }
.earn-money-guard__strip span:nth-child(even) { color: var(--nup-primary); opacity: 0.7; }

@media (max-width: 700px) {
  .earn-money-guard__strip { font-size: 12px; gap: 0 8px; }
  .earn-money-guard__strip span:nth-child(even) { display: none; }
  .earn-money-guard__strip { gap: 4px 12px; flex-direction: column; padding: 14px 16px; }
}

/* === Guarantee block v3 fixes === */
.earn-money-guard__title {
  font-family: var(--nup-font);
  font-size: var(--nup-h2-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--nup-navy);
  margin: 0 0 8px;
}
@media (max-width: 768px) {
  .earn-money-guard__title { font-size: var(--nup-h2-size-mobile); }
}
.earn-money-howto-title { width: 360px !important; padding: 28px 70px 28px 32px !important; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%) !important; }
.earn-money-howto-title .earn-money-howto-title-text {
  font-size: 19px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--nup-bg-white);
  text-align: start;
  white-space: normal;
  word-wrap: break-word;
}
.earn-money-howto-content-item h4 { font-size: 14px !important; line-height: 1.2 !important; }
.earn-money-howto-content-item p { font-size: 13px !important; line-height: 1.45 !important; }
@media (max-width: 1100px) {
  .earn-money-howto-title { width: 100% !important; padding: 24px 16px 40px !important; }
}

/* Override 64px highlighted-title from reviews.css inside earn-money plate */
.earn-money-howto-title .earn-money-howto-title-text .highlighted-title {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* countdown sub-note */
.nup-countdown-bar__note {
  text-align: center;
  font-family: var(--nup-font);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
  padding: 0 16px;
}

/* === why-ours: align cards same height + title min-height === */
.why-ours__content { align-items: stretch !important; }
.why-ours__content-item {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  max-width: 320px;
}
.why-ours__content-item-upper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}
.why-ours__content-item-upper img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
.why-ours__content-item-lower {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 0;
}
.why-ours__content-item-lower h4 {
  min-height: 2.6em;
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 768px) {
  .why-ours__content-item { max-width: 100%; }
  .why-ours__content-item-lower h4 { min-height: 0; }
}

/* Tankiro signature line */
.expert-guide-content__signature { margin-top: 8px !important; font-style: italic; }
.expert-guide-content__signature a { color: var(--nup-primary); text-decoration: none; font-style: normal; font-weight: 600; margin-left: 8px; }
.expert-guide-content__signature a:hover { text-decoration: underline; }

/* clients block (erik + video) heading */
.nupshop-clients-header { text-align: center; max-width: 920px; margin: 56px auto 28px; padding: 0 16px; }
.nupshop-clients-cta { display: flex; justify-content: center; background: #fff; margin: 0 0 48px; padding: 32px 16px 40px; }
.nupshop-clients-cta .nupshop-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 40px; }

/* footer support line */
.nupshop-footer__support { font-size: 12px !important; color: rgba(255,255,255,0.7); margin-top: 8px !important; line-height: 1.45; }

/* Baseem: align image and content to top of section */
.expert-guide-container { align-items: flex-start !important; padding-top: 24px; }

/* Center "Другие рекомендации" cards */
.epqv12__recommend-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px !important;
  grid-template-columns: none !important;
}
.epqv12__recommend-row .epqv12__recommend-card {
  flex: 0 1 320px;
  max-width: 360px;
}

/* === Stack: fix other-title centering + nup-img positioning === */
.how-table-other-title { left: calc(50% + 25px) !important; transform: translateX(-50%) !important; right: auto !important; width: max-content; }
@media (max-width: 1100px) {
  .how-table-other-title { left: calc(50% + 25px) !important; transform: translateX(-50%) !important; right: auto !important; width: max-content; }
}
/* наш logo image: less deep, sits above yellow column */
.how-table__content img { margin-bottom: 0 !important; }
.how-table-nup-img { margin-bottom: 4px !important; transform: none; }

/* Image: large badge hanging from above the yellow column. It sits in the
   header gap and dips ~30 px into the top of the card, never overlapping
   the first bullet row (yellow column has 40 px padding-top by default).
   Math: image bottom = card_top + (top + height) = card_top - 170 + 200 = +30 */
@media (min-width: 901px) {
  .how-table-nup { position: relative !important; height: 529px !important; }
  .how-table-nup-img {
    position: absolute !important;
    top: -170px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 2;
  }
  .how-table-nup-img img {
    height: 200px !important;
    width: 80px !important;
    margin: 0 !important;
    display: block;
  }
}

/* Header gap sized to fit the 200 px badge with ~15 px clearance above it. */
@media (min-width: 901px) {
  .how-table__header { margin-bottom: 185px !important; padding-top: 0 !important; }
}

/* "Other" column: draw the border with a ::after pseudo-element so the
   visible box hugs the bullet rows tightly (small gap above first row,
   small gap below last row). The container itself keeps full height 529
   so rows still align with the yellow column. */
@media (min-width: 901px) {
  .how-table-other {
    border: none !important;
    background: transparent !important;
  }
  .how-table-other::after {
    content: '';
    position: absolute;
    top: 28px;         /* ~12 px above first row (row1 starts at padding-top 40) */
    bottom: 30px;      /* ~10 px below last row (~37 px of free space at bottom) */
    left: 0;
    right: 0;
    border: 1.5px solid rgba(66, 65, 65, 0.35);
    border-radius: 5px;
    pointer-events: none;
    z-index: -1;
  }
}

/* Yellow column: keep original 40 px padding-top so first bullet doesn't
   collide with the image badge above. (No row-height / column-height
   overrides — table is the same as before, only the image moved.) */
@media (min-width: 901px) {
  .how-table-nup-info { padding-top: 40px !important; }
  /* Match the yellow column's row geometry exactly on the "other" column so
     horizontal dividers align row-by-row. We pin each row height with
     flex-basis (no grow) instead of letting flex:1 distribute container
     height — that was producing different per-row heights between the two
     columns (yellow column has padding-top:40, other had no padding,
     different container heights → different distributions). */
  .how-table-other {
    /* Parent .how-table__content has align-items:end. Yellow card and
       labels both have margin-bottom:0, but "other" had margin-bottom:16
       (legacy) → its bottom edge was 16 px higher → its top edge too.
       Zero out the margin so it bottom-aligns with the yellow card. */
    height: 529px !important;
    padding-top: 40px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    justify-content: normal !important;
  }
  .how-table-other-item {
    flex: 0 0 79px !important;
    height: 79px !important;
    padding: 22px 0 !important;
    box-sizing: border-box !important;
  }
  /* h3 title is the actual first child of .how-table-other, so we use
     :first-of-type and :last-of-type to address the bullet items. */
  .how-table-other-item:first-of-type {
    flex: 0 0 57px !important;
    height: 57px !important;
    padding-top: 0 !important;
    padding-bottom: 22px !important;
  }
  .how-table-other-item:last-of-type {
    flex: 0 0 78px !important;
    height: 78px !important;
  }
}


/* nupshop: empty bundle placeholder thumbnails */
.bundle-thumbnails-img--placeholder {
  background: #f3f4f7 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #b8bcc4;
  font-weight: 700;
  font-size: 18px;
}
.bundle-thumbnails-img--placeholder:hover {
  background: #e9ebf0 !important;
  cursor: default;
}
.bundle-thumbnails-img__placeholder {
  font-size: 18px;
  color: #b8bcc4;
  pointer-events: none;
}
.product-bundle-empty {
  margin: 14px 0 0;
  font-size: 13px;
  color: #777;
  text-align: center;
  line-height: 1.5;
}


/* nupshop: empty product image placeholder */
.proof-card-product-image-wrap__empty {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #f3f4f7 0%, #e1e3e8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-bundle-img__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #f3f4f7;
  border-radius: 8px;
  color: #b8bcc4;
  font-weight: 700;
  font-size: 22px;
}


/* nupshop: hide compare/cart/user icons in shop header (right nav group) */
header .mt-1\.5.flex.gap-x-8 {
  display: none !important;
}
/* Safety: also hide icons individually in case layout shifts */
header .icon-compare,
header .icon-cart,
header .icon-users,
header v-mini-cart {
  display: none !important;
}


/* nupshop: hide login/register section in mobile drawer */
.shop-drawer__content > div.p-4.border-b.border-zinc-200:has(.icon-double-arrow),
.shop-drawer__content > div:first-child:has(a[href*="customer/session/create"]) {
  display: none !important;
}


/* nupshop: mobile drawer nav */
.nupshop-nav-mobile {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.nupshop-nav-mobile__link {
  display: block;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #0c1f4a;
  text-decoration: none;
  border-bottom: 1px solid #f1f3f6;
  transition: background 0.15s;
}
.nupshop-nav-mobile__link:hover,
.nupshop-nav-mobile__link:active {
  background: #f6f8fb;
  color: #177ec9;
}


/* nupshop: lift stack section header closer to top */
@media (min-width: 901px) {
  .how-table { padding-top: 24px !important; }
}

/* nupshop: temporary placeholder for video testimonials
   While we do not have real review videos, an image placeholder is
   shown in each slide. Mute/play controls are meaningless on an image,
   so hide them; size the image like the original <video>. */
.nupshop-video-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
[class*="slider-slide-template--29202968740172"] [class*="slider-controls-template--29202968740172"] {
  display: none !important;
}

/* nupshop: product link inside the realcust review card byline */
.real-customer-saying__product-link {
  color: var(--nup-primary, #177ec9);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.real-customer-saying__product-link:hover {
  color: var(--nup-navy, #0c1f4a);
  text-decoration: underline;
}

/* nupshop: footer "Полезные ссылки" — multi-line entries, no underline */
.nupshop-footer__list--guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nupshop-footer__list--guides li { margin: 0; }
.nupshop-footer__list--guides a {
  display: block;
  color: var(--nup-text-muted, #8a91a5);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transition: color .15s ease;
}
.nupshop-footer__list--guides a:hover {
  color: var(--nup-primary, #177ec9);
}

/* === Advantages / trust badges band — used before FAQ on home, catalog
   and product pages. Lives in extras.css so it is available site-wide. === */
.adv-section {
  background: #f6f8fb;
  padding: 56px 0;
  margin-bottom: 0;
}
.adv-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 60px;
  max-width: 1020px;   /* 3 cards per row → 3 + 3 layout */
  margin: 0 auto;
}
.adv-item {
  width: 280px;
  text-align: center;
}
.adv-item__icon {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.adv-item__icon img {
  height: 56px;
  width: auto;
  display: block;
}
.adv-item__title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--nup-navy, #0c1f4a);
  margin: 0 0 8px;
  line-height: 1.3;
}
.adv-item__text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #6b7280;
  margin: 0;
}
@media (max-width: 980px) {
  .adv-grid { gap: 36px 40px; }
  .adv-item { width: 260px; }
}
@media (max-width: 600px) {
  .adv-section { padding: 40px 0; }
  .adv-grid { gap: 32px; }
  .adv-item { width: 100%; max-width: 320px; }
}

/* nupshop: expert-guide sticky image */
@media (min-width: 1201px) {
  .expert-guide-media {
    position: sticky;
    top: 24px;
    align-self: flex-start;
  }
}

/* nupshop: glossy blue buttons */
.nupshop-hero__cta,
.nupshop-btn,
.nup-cta2__write,
.ext-card__cta,
.np-pdp__cta,
.np-score__cta,
.np-modal__cta,
.np-rev-form__submit,
.nup-cf-submit,
.rp-story__bundle-cta,
.epqv12__btn--primary,
.epqv12__length-btn,
.ready-transform-section-btn button,
.why-ours__lower-btn button,
.why-ours__lower button,
.real-customer-saying-btn button,
.proof-card-cta,
.proof-feed-more-link,
.proof-comparison-reveal,
.epqv12__proof-comparison-reveal,
.primary-button,
.np-cmp__cta,
.np-q2__cta,
.np-q2__rbtn {
  position: relative;
  overflow: hidden;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: linear-gradient(180deg, #2f93dd 0%, #177ec9 55%, #0e5f9c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.20), 0 10px 24px rgba(14,95,156,0.40) !important;
  border: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.nupshop-hero__cta::before,
.nupshop-btn::before,
.nup-cta2__write::before,
.ext-card__cta::before,
.np-pdp__cta::before,
.np-score__cta::before,
.np-modal__cta::before,
.np-rev-form__submit::before,
.nup-cf-submit::before,
.rp-story__bundle-cta::before,
.epqv12__btn--primary::before,
.epqv12__length-btn::before,
.ready-transform-section-btn button::before,
.why-ours__lower-btn button::before,
.why-ours__lower button::before,
.real-customer-saying-btn button::before,
.proof-card-cta::before,
.proof-feed-more-link::before,
.proof-comparison-reveal::before,
.epqv12__proof-comparison-reveal::before,
.primary-button::before,
.np-cmp__cta::before,
.np-q2__cta::before,
.np-q2__rbtn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0));
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.nupshop-hero__cta:hover,
.nupshop-btn:hover,
.nup-cta2__write:hover,
.ext-card__cta:hover,
.np-pdp__cta:hover,
.np-score__cta:hover,
.np-modal__cta:hover,
.np-rev-form__submit:hover,
.nup-cf-submit:hover,
.rp-story__bundle-cta:hover,
.epqv12__btn--primary:hover,
.epqv12__length-btn:hover,
.ready-transform-section-btn button:hover,
.why-ours__lower-btn button:hover,
.why-ours__lower button:hover,
.real-customer-saying-btn button:hover,
.proof-card-cta:hover,
.proof-feed-more-link:hover,
.proof-comparison-reveal:hover,
.epqv12__proof-comparison-reveal:hover,
.primary-button:hover,
.np-cmp__cta:hover,
.np-q2__cta:hover,
.np-q2__rbtn:hover {
  background: linear-gradient(180deg, #3aa0e7 0%, #1c8bd6 55%, #1066a8 100%) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20), 0 13px 30px rgba(14,95,156,0.50) !important;
}
.nupshop-hero__cta:disabled,
.nupshop-btn:disabled,
.nup-cta2__write:disabled,
.ext-card__cta:disabled,
.np-pdp__cta:disabled,
.np-score__cta:disabled,
.np-modal__cta:disabled,
.np-rev-form__submit:disabled,
.nup-cf-submit:disabled,
.rp-story__bundle-cta:disabled,
.epqv12__btn--primary:disabled,
.epqv12__length-btn:disabled,
.ready-transform-section-btn button:disabled,
.why-ours__lower-btn button:disabled,
.why-ours__lower button:disabled,
.real-customer-saying-btn button:disabled,
.proof-card-cta:disabled,
.proof-feed-more-link:disabled,
.proof-comparison-reveal:disabled,
.epqv12__proof-comparison-reveal:disabled,
.primary-button:disabled,
.np-cmp__cta:disabled,
.np-q2__cta:disabled,
.np-q2__rbtn:disabled {
  background: #99a3b3 !important;
  box-shadow: none !important;
  transform: none !important;
}
.nupshop-hero__cta:disabled::before,
.nupshop-btn:disabled::before,
.nup-cta2__write:disabled::before,
.ext-card__cta:disabled::before,
.np-pdp__cta:disabled::before,
.np-score__cta:disabled::before,
.np-modal__cta:disabled::before,
.np-rev-form__submit:disabled::before,
.nup-cf-submit:disabled::before,
.rp-story__bundle-cta:disabled::before,
.epqv12__btn--primary:disabled::before,
.epqv12__length-btn:disabled::before,
.ready-transform-section-btn button:disabled::before,
.why-ours__lower-btn button:disabled::before,
.why-ours__lower button:disabled::before,
.real-customer-saying-btn button:disabled::before,
.proof-card-cta:disabled::before,
.proof-feed-more-link:disabled::before,
.proof-comparison-reveal:disabled::before,
.epqv12__proof-comparison-reveal:disabled::before,
.primary-button:disabled::before,
.np-cmp__cta:disabled::before,
.np-q2__cta:disabled::before,
.np-q2__rbtn:disabled::before { display: none; }

/* nupshop: 18+ скрытие фото в блоке отзыва (Не наши слова) */
.one-review-item-img { position: relative; background: #dfe5ec; overflow: hidden; }
.one-review-item-img:not(.is-revealed) .pc-image,
.one-review-item-img:not(.is-revealed) .mb-image { filter: blur(18px); transform: scale(1.05); }
.one-review-item-img.is-revealed .pc-image,
.one-review-item-img.is-revealed .mb-image { filter: none; transform: none; }
.one-review-item-img .orv-cover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 10px; }
.one-review-item-img.is-revealed .orv-cover { display: none; }
.orv-reveal { display: inline-flex; align-items: center; gap: 8px; background: #16181d; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.32); transition: background .15s ease, transform .15s ease; }
.orv-reveal:hover { background: #000; transform: translateY(-1px); }
.orv-reveal b { display: inline-grid; place-items: center; background: #fff; color: #16181d; font-size: 9.5px; font-weight: 900; padding: 2px 6px; border-radius: 5px; letter-spacing: .02em; }

/* skip-link: спрятан с первой отрисовки (app.css грузится через rel=preload и применяется позже,
   иначе ссылка "Skip to main content" мелькает слева от лого при загрузке).
   :focus-показ из темы выше по специфичности — доступность с клавиатуры сохраняется. */
.skip-to-main-content-link { position: absolute; left: -9999px; top: 0; opacity: 0; }

/* Шапка — Vue-компонент <v-header-switcher>: до монтирования он показывает серые
   shimmer-заглушки (логотип/меню/поиск), которые мелькают миллисекунду при загрузке.
   Прячем их (контейнер держит высоту min-h-[78px] — сдвига нет). Скоуп только к шапке,
   чтобы не трогать скелетоны в других местах. :defined-шапку Vue рисует как обычно. */
v-header-switcher .shimmer { visibility: hidden; }

/* шапка: полноширинный разделитель под шапкой.
   Был баг: border-b висел на внутреннем контейнере ~1340px по центру,
   поэтому линия обрывалась, не доходя до краёв (зазоры ~290px слева/справа).
   Убираем обрезанный бордер и ставим линию на сам <header> — на всю ширину. */
header.shadow-gray { border-bottom: 1px solid #e5e7eb; }
header .min-h-\[78px\] { border-bottom: 0; }

/* TRUST STRIP на главной */
.np-strip { background: rgb(246, 244, 238); padding: 72px 0; margin: 72px 0; font-family: Inter, sans-serif; }
.np-strip__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); }
.np-strip__item { position: relative; display: flex; align-items: center; gap: 20px; padding: 4px 32px 4px 28px; font-size: 19px; font-weight: 500; color: #1d2733; line-height: 1.3; letter-spacing: -0.1px; }
.np-strip__item:first-child { padding-left: 0; }
.np-strip__item + .np-strip__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 52px; background: rgba(29, 39, 51, 0.14); }
.np-strip__ic { flex: 0 0 auto; width: 24px; height: 24px; color: #1d2733; }
.np-strip__ic svg { width: 100%; height: 100%; display: block; stroke-width: 1.6; }
@media (max-width: 1100px) { .np-strip { padding: 52px 0; } .np-strip__item { font-size: 16.5px; gap: 14px; padding: 4px 20px 4px 18px; } }
@media (max-width: 900px) { .np-strip__inner { grid-template-columns: 1fr 1fr; gap: 26px 0; } .np-strip__item:nth-child(odd) { padding-left: 0; } .np-strip__item:nth-child(3)::before { display: none; } }
@media (max-width: 520px) { .np-strip { padding: 40px 0; margin: 56px 0; } .np-strip__inner { grid-template-columns: 1fr; gap: 20px; } .np-strip__item { padding: 0; font-size: 16px; } .np-strip__item::before { display: none !important; } }
/* заголовок видеоотзывов переехал на белый фон к карточкам */
.np-vid-head { text-align: center; max-width: 900px; margin: 0 auto; padding: 28px 16px 8px; }


/* ===== Footer evergreen flip-clock (countdown.blade.php) ===== */
.nup-cta2__timerwrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:6px 0 24px;}
.nup-cta2__timerlabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a93a5;}
.nup-flip{direction:ltr;padding:0;margin:0;list-style:none;box-sizing:border-box;--flip-bg-color:#2d3748;--flip-text-color:#fff;--flip-dots-color:#2d3748;display:flex;justify-content:center;flex-direction:row-reverse;gap:0;}
.nup-flip *{padding:0;margin:0;list-style:none;box-sizing:border-box;}
.nup-flip *::before,.nup-flip *::after{box-sizing:border-box;}
.nup-flip [class|="flip-item"]{display:flex;flex-direction:row-reverse;gap:2px;}
.nup-flip [class|="flip-item"]::before{content:":";font-size:32px;font-weight:700;color:var(--flip-dots-color);display:flex;align-items:center;height:46px;margin:0 7px;}
.nup-flip [class|="flip-item"]:first-child::before{content:none;}
.nup-flip [class|="flip-item"] .flip-digit{width:32px;height:46px;position:relative;margin:0 1px;}
.nup-flip [class|="flip-item"] .flip-digit>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;perspective:240px;}
.nup-flip [class|="flip-item"] .flip-digit>span::after,.nup-flip [class|="flip-item"] .flip-digit>span::before{content:attr(data-digit);position:absolute;left:0;width:100%;height:50%;font-size:32px;font-weight:bolder;text-align:center;color:var(--flip-text-color);background-color:var(--flip-bg-color);overflow:hidden;transform-style:preserve-3d;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.nup-flip [class|="flip-item"] .flip-digit>span::before{top:0;line-height:48px;border-radius:8px 8px 0 0;border-bottom:1px solid #1c2531;transform-origin:bottom;}
.nup-flip [class|="flip-item"] .flip-digit>span::after{bottom:0;line-height:2px;border-radius:0 0 8px 8px;border-top:1px solid #1c2531;transform-origin:top;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-next{z-index:0;animation:nfAfterZ .9s linear forwards;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-next::before{animation:nfAfterUpSh .9s linear forwards;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-next::after{animation:nfAfterFlip .9s linear forwards,nfAfterDownSh .9s linear forwards;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-current{z-index:1;animation:nfCurZ .9s linear forwards;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-current::before{animation:nfCurFlip .9s linear forwards,nfCurUpSh .9s linear forwards;}
.nup-flip [class|="flip-item"] .flip-digit.flipping .flip-digit-current::after{animation:nfCurDownSh .9s linear forwards;}
@keyframes nfAfterZ{0%{z-index:0}100%{z-index:1}}
@keyframes nfCurZ{0%{z-index:1}100%{z-index:0}}
@keyframes nfAfterFlip{0%{transform:rotateX(180deg)}100%{transform:rotateX(0)}}
@keyframes nfAfterUpSh{0%{box-shadow:inset 0 -100px 20px -10px #000}100%{box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}
@keyframes nfAfterDownSh{0%{box-shadow:inset 0 100px 20px -10px #000}100%{box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}
@keyframes nfCurFlip{0%{transform:rotateX(0)}100%{transform:rotateX(-180deg)}}
@keyframes nfCurUpSh{0%{box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{box-shadow:inset 0 -50px 25px -10px #000}100%{box-shadow:inset 0 -100px 25px -10px #000}}
@keyframes nfCurDownSh{0%{box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{box-shadow:inset 0 50px 25px -10px #000}100%{box-shadow:inset 0 100px 25px -10px #000}}
@media (max-width:860px){.nup-flip [class|="flip-item"] .flip-digit{width:28px;height:40px;}.nup-flip [class|="flip-item"] .flip-digit>span::after,.nup-flip [class|="flip-item"] .flip-digit>span::before{font-size:28px;}.nup-flip [class|="flip-item"] .flip-digit>span::before{line-height:42px;}.nup-flip [class|="flip-item"]::before{font-size:28px;height:40px;margin:0 5px;}}
@media (prefers-reduced-motion:reduce){.nup-flip .flip-digit.flipping .flip-digit-current::before,.nup-flip .flip-digit.flipping .flip-digit-next::after{animation:none;}}