:root {
      --green: #245f2f;
      --green-dark: #143f1e;
      --brand-lime: #8cc63f;
      --brand-lime-dark: #75ad30;
      --lime: #8cc63f;
      --lime-soft: #eef8dd;
      --paper: #ffffff;
      --bg: #eef4e8;
      --line: #d8e4d1;
      --text: #17331f;
      --muted: #60705d;
      --warn: #9a6518;
      --shadow: 0 22px 54px rgba(23, 51, 31, .13);
    }
  
/* Readability refresh 2.1.2: calmer palette, clearer cards, less eye strain. */
:root {
  --green: #2f6b3a;
  --green-dark: #173d22;
  --brand-lime: #7fb53d;
  --brand-lime-dark: #638f2f;
  --lime: #7fb53d;
  --lime-soft: #f3f8eb;
  --paper: #ffffff;
  --bg: #f5f7f1;
  --line: #dde7d8;
  --text: #1c2a20;
  --muted: #647064;
  --shadow: 0 14px 34px rgba(28, 42, 32, .08);
}

body {
  background:
    linear-gradient(180deg, #fafbf7 0%, #f4f7ef 46%, #eef3e8 100%) !important;
}

body::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .68)),
    repeating-linear-gradient(112deg, rgba(47, 107, 58, .018) 0 1px, transparent 1px 72px) !important;
}

body::after {
  opacity: .025 !important;
}

.demo {
  border-color: rgba(47, 107, 58, .08) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 18px 42px rgba(28, 42, 32, .08) !important;
  backdrop-filter: none !important;
}

.hero {
  border-color: #e1e9dc !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(28, 42, 32, .07) !important;
}

.hero::after {
  background: rgba(127, 181, 61, .11) !important;
}

.hero h1,
.page h2,
.summary h2,
.process-head h2,
.hero-side h2,
.material strong,
.test-card strong,
.summary-sample-head strong {
  color: #173d22 !important;
}

.hero p,
.hero-side p,
.process-head p,
.material span,
.test-card span,
.test-card em,
.summary-sample small,
.status,
.sample-note,
.field-help {
  color: #5f6b60 !important;
}

.hero-side,
.step-coach,
.tips-panel,
.service-panel {
  border-color: #e0ead9 !important;
  background: #fbfcf8 !important;
  box-shadow: 0 10px 24px rgba(28, 42, 32, .055) !important;
}

.hero-side-icon,
.material::before {
  box-shadow: 0 8px 18px rgba(47, 107, 58, .12) !important;
}

.process-strip,
.page,
.summary,
.summary-sample,
.summary-stats div,
.totals,
.sample-card,
.test-card,
.material,
.goal-card,
.pack-card,
.addon-card,
.service-card,
.field-card,
.method-card {
  border-color: #e1e9dc !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(28, 42, 32, .045) !important;
}

.process-card {
  border-color: #e1e9dc !important;
  background: #fbfcf8 !important;
  box-shadow: none !important;
}

.process-card:hover,
.tab:hover,
.material:hover,
.sample-card:hover,
.test-card:hover,
.goal-card:hover,
.pack-card:hover,
.addon-card:hover,
.service-card:hover,
.field-card:hover,
.method-card:hover {
  border-color: rgba(127, 181, 61, .55) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(47, 107, 58, .08) !important;
  transform: translateY(-1px) !important;
}

.tab {
  border-color: #e1e9dc !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(28, 42, 32, .04) !important;
}

.tab.is-active,
.material.is-active,
.test-card.is-selected,
.goal-card.is-active,
.pack-card.is-selected,
.addon-card.is-selected,
.method-card.is-active {
  border-color: #6ea03a !important;
  background: #f8fbf4 !important;
  box-shadow: 0 0 0 2px rgba(127, 181, 61, .18), 0 10px 22px rgba(47, 107, 58, .06) !important;
}

.tab span,
.material.is-active::after,
.step-coach b,
.summary-sample-price,
.test-card .reason,
.badge,
.pill,
.tag {
  background: #eef6e6 !important;
  color: #2f6b3a !important;
}

.tab.is-done span,
.material::before,
.btn-primary,
.btn-add-sample,
.btn-primary:hover:not(:disabled),
.btn-add-sample:hover:not(:disabled) {
  background: #7fb53d !important;
  border-color: #7fb53d !important;
  color: #ffffff !important;
}

.hero-badge,
.hero-points span,
.btn-quiet {
  border-color: #dce8d5 !important;
  background: #f8fbf4 !important;
  color: #2f6b3a !important;
  box-shadow: none !important;
}

.btn {
  border-color: #dce8d5 !important;
  background: #ffffff !important;
  color: #24482b !important;
  box-shadow: none !important;
}

.btn:hover:not(:disabled),
.btn:focus-visible {
  border-color: rgba(127, 181, 61, .65) !important;
  background: #f8fbf4 !important;
  filter: none !important;
}

.btn-primary,
.btn-add-sample {
  color: #ffffff !important;
}

.btn-primary:hover:not(:disabled),
.btn-add-sample:hover:not(:disabled) {
  background: #72a438 !important;
  border-color: #72a438 !important;
}

.btn-danger {
  background: #fff8f1 !important;
  border-color: rgba(193, 113, 42, .28) !important;
  color: #8a5319 !important;
}

input,
select,
textarea {
  border-color: #dce8d5 !important;
  background: #ffffff !important;
  color: #1c2a20 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7fb53d !important;
  box-shadow: 0 0 0 3px rgba(127, 181, 61, .16) !important;
  outline: none !important;
}

.test-card .price,
.summary-stats strong,
.totals strong,
.summary-sample li b {
  color: #173d22 !important;
}

.test-card .conflict-reason,
.summary-sample.has-warning,
.cart-toast.is-error {
  background: #fff8f1 !important;
}

.cart-toast {
  border-color: #dce8d5 !important;
  box-shadow: 0 12px 30px rgba(28, 42, 32, .16) !important;
}

@media (max-width: 640px) {
  .demo {
    background: #f8faf5 !important;
  }

  .mobile-progress,
  .demo:not([data-step="summary"]) .summary,
  .demo[data-step="summary"] .summary {
    box-shadow: 0 12px 28px rgba(28, 42, 32, .10) !important;
  }

  .summary,
  .page,
  .hero,
  .process-strip {
    background: #ffffff !important;
  }
}
    * { box-sizing: border-box; }

    body {
      position: relative;
      margin: 0;
      background:
        radial-gradient(circle at 12% 8%, rgba(140, 198, 63, .18), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(36, 95, 47, .10), transparent 28%),
        linear-gradient(180deg, #fbfff7 0%, #f1f6eb 42%, #e9f1e2 100%);
      background-attachment: fixed;
      color: var(--text);
      font-family: "Maven Pro", Maven Pro, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .42)),
        repeating-linear-gradient(112deg, rgba(36, 95, 47, .035) 0 1px, transparent 1px 54px);
    }

    body::after {
      content: "";
      position: fixed;
      right: -34px;
      top: 92px;
      z-index: -1;
      width: 260px;
      height: 260px;
      pointer-events: none;
      background: url("bio-leaves.png") center / contain no-repeat;
      opacity: .045;
      transform: rotate(-12deg);
    }

    button, input, select {
      font: inherit;
    }

    .demo {
      position: relative;
      width: min(1240px, calc(100% - 28px));
      margin: 24px auto;
      padding: 16px;
      border: 1px solid rgba(36, 95, 47, .08);
      border-radius: 32px;
      background: rgba(255, 255, 255, .54);
      box-shadow: 0 28px 70px rgba(23, 51, 31, .10);
      backdrop-filter: blur(3px);
    }

    .hero {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 26px;
      align-items: stretch;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(242, 248, 217, .9) 58%, rgba(255, 255, 255, .96)),
        var(--paper);
      box-shadow: var(--shadow);
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -78px;
      bottom: -120px;
      width: 320px;
      height: 320px;
      border-radius: 999px;
      background: rgba(140, 198, 63, .22);
      pointer-events: none;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: center;
      min-height: 270px;
    }

    .hero-topline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
    }

    .brand-logo {
      display: block;
      width: min(188px, 58vw);
      height: auto;
    }

    .hero-badge {
      width: max-content;
      padding: 7px 10px;
      border: 1px solid rgba(36, 95, 47, .14);
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(23, 51, 31, .05);
    }

    .hero h1 {
      max-width: 700px;
      margin: 0 0 12px;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 650px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .hero-points span {
      padding: 8px 10px;
      border: 1px solid rgba(36, 95, 47, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .hero-side {
      position: relative;
      min-height: 250px;
      display: grid;
      align-content: center;
      gap: 14px;
      overflow: hidden;
      border: 1px solid rgba(36, 95, 47, .12);
      border-radius: 22px;
      padding: 22px;
      background:
        linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(238, 248, 221, .84)),
        radial-gradient(circle at 82% 18%, rgba(140, 198, 63, .26), transparent 28%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 36px rgba(23, 51, 31, .06);
    }

    .hero-side-icon {
      width: 70px;
      height: 70px;
      object-fit: cover;
      padding: 0;
      border-radius: 18px;
      background: transparent;
      box-shadow: 0 14px 24px rgba(117, 173, 48, .24);
    }

    .hero-side h2 {
      margin: 0;
      color: var(--green-dark);
      font-size: 26px;
      line-height: 1.1;
    }

    .hero-side p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .hero-side-list {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }

    .hero-side-list span {
      position: relative;
      padding-left: 18px;
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .hero-side-list span::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--brand-lime);
    }

    .process-strip {
      margin: 16px 0;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(23, 51, 31, .055);
      animation: fadeUp .36s ease both;
    }

    .process-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: end;
      margin-bottom: 14px;
    }

    .process-head h2 {
      margin: 0;
      color: var(--green-dark);
      font-size: 22px;
    }

    .process-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .process-card {
      display: grid;
      gap: 10px;
      min-height: 176px;
      padding: 14px;
      border: 1px solid rgba(36, 95, 47, .1);
      border-radius: 16px;
      background: #fbfff3;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .process-card:hover {
      transform: translateY(-3px);
      border-color: var(--brand-lime);
      box-shadow: 0 14px 28px rgba(117, 173, 48, .14);
    }

    .asset-icon {
      width: 52px;
      height: 52px;
      object-fit: contain;
      padding: 0;
      border-radius: 14px;
      background: transparent;
    }

    .process-card strong,
    .process-card span {
      display: block;
    }

    .process-card strong {
      color: var(--green-dark);
      font-size: 15px;
      line-height: 1.18;
    }

    .process-card span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 16px 0;
    }

    .tab {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 4px 10px;
      align-items: center;
      min-height: 74px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(23, 51, 31, .045);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .tab:hover {
      transform: translateY(-2px);
      border-color: var(--brand-lime);
      background: #fbfff3;
      box-shadow: 0 14px 28px rgba(117, 173, 48, .14);
    }

    .tab span {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: var(--lime-soft);
      color: var(--green-dark);
      font-weight: 900;
    }

    .tab b { font-size: 15px; }
    .tab small { color: var(--muted); }

    .tab.is-active {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .28), 0 14px 28px rgba(23, 51, 31, .07);
    }

    .tab.is-done span {
      background: var(--brand-lime);
      color: #fff;
    }

    .step-coach {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      margin: 0 0 18px;
      padding: 14px 16px;
      border: 1px solid rgba(117, 173, 48, .28);
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(238, 248, 221, .86));
      box-shadow: 0 14px 30px rgba(23, 51, 31, .05);
    }

    .step-coach strong,
    .step-coach span {
      display: block;
    }

    .step-coach strong {
      color: var(--green-dark);
      font-size: 16px;
    }

    .step-coach span {
      margin-top: 3px;
      color: var(--muted);
      line-height: 1.4;
    }

    .step-coach b {
      width: max-content;
      padding: 8px 11px;
      border-radius: 999px;
      background: var(--brand-lime);
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
    }

    .mobile-progress {
      display: none;
    }

    .cart-toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      z-index: 80;
      width: min(520px, calc(100vw - 28px));
      transform: translateX(-50%);
      padding: 13px 15px;
      border: 1px solid rgba(36, 95, 47, .16);
      border-radius: 16px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 18px 42px rgba(23, 51, 31, .22);
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.4;
    }

    .cart-toast.is-error {
      border-color: rgba(193, 113, 42, .32);
      color: var(--warn);
      background: #fff8ef;
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: start;
    }

    .page, .summary {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .page {
      padding: 20px;
    }

    .page[hidden] { display: none; }

    .page:not([hidden]) {
      animation: pageIn .32s ease both;
    }

    .page-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .page-head h2 {
      margin: 0 0 6px;
      font-size: 25px;
    }

    .page-head p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .process-guide {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .guide-step {
      min-height: 86px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .72);
    }

    .guide-step b,
    .guide-step span {
      display: block;
    }

    .guide-step b {
      color: var(--green-dark);
      font-size: 14px;
    }

    .guide-step span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .material, .sample-card, .test-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      cursor: pointer;
      text-align: left;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .material:hover, .sample-card:hover, .test-card:hover {
      transform: translateY(-3px);
      border-color: var(--brand-lime);
      box-shadow: 0 14px 28px rgba(117, 173, 48, .14);
    }

    .material-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .material {
      position: relative;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 104px;
      padding: 14px 46px 14px 14px;
      animation: fadeUp .28s ease both;
    }

    .material::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 12px;
      width: 62px;
      height: 62px;
      border-radius: 18px;
      background: linear-gradient(145deg, var(--brand-lime), #79b633);
      box-shadow: 0 12px 22px rgba(117, 173, 48, .26);
      opacity: 1;
      transition: opacity .18s ease, transform .18s ease;
    }

    .material-icon {
      position: relative;
      z-index: 1;
      width: 58px;
      height: 58px;
      border-radius: 16px;
      padding: 10px;
      background: transparent;
      object-fit: contain;
      filter: brightness(0) invert(1);
      box-shadow: none;
      transition: transform .18s ease, filter .18s ease;
    }

    .material-copy {
      position: relative;
      z-index: 1;
      min-width: 0;
      align-self: center;
    }

    .material:nth-child(2) { animation-delay: .03s; }
    .material:nth-child(3) { animation-delay: .06s; }
    .material:nth-child(4) { animation-delay: .09s; }
    .material:nth-child(5) { animation-delay: .12s; }
    .material:nth-child(6) { animation-delay: .15s; }
    .material:nth-child(7) { animation-delay: .18s; }

    .material.is-active {
      border-color: var(--green);
      background: linear-gradient(180deg, var(--lime-soft), #fff);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .22);
    }

    .material:hover::before,
    .material.is-active::before {
      opacity: 1;
      transform: scale(1.03);
    }

    .material:hover .material-icon,
    .material.is-active .material-icon {
      transform: translateY(-1px);
      filter: brightness(0) invert(1) drop-shadow(0 2px 1px rgba(23, 51, 31, .12));
    }

    .material.is-active::after {
      content: "wybrane";
      position: absolute;
      right: 10px;
      top: 10px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .material strong, .material span {
      display: block;
    }

    .material strong {
      line-height: 1.15;
    }

    .material span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.32;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .selected-material {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid rgba(36, 95, 47, .18);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(242, 248, 217, .82), rgba(255, 255, 255, .9));
    }

    .selected-material strong,
    .selected-material span {
      display: block;
    }

    .selected-material strong {
      font-size: 16px;
      color: var(--green-dark);
    }

    .selected-material span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
    }

    .selected-material small {
      width: max-content;
      padding: 6px 9px;
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .sample-list {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .addons {
      display: grid;
      gap: 12px;
      margin-top: 20px;
      padding: 16px;
      border: 1px solid rgba(117, 173, 48, .26);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(238, 248, 221, .82), rgba(255, 255, 255, .96)),
        radial-gradient(circle at 92% 0%, rgba(140, 198, 63, .16), transparent 28%);
    }

    .addons h3 {
      margin: 0;
      font-size: 18px;
    }

    .addons p {
      margin: 4px 0 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .addon-stack {
      display: grid;
      gap: 12px;
    }

    .service-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .service-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .service-intro small {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(23, 51, 31, .05);
    }

    .service-card {
      position: relative;
      min-height: 104px;
      padding: 14px;
      border: 1px solid rgba(36, 95, 47, .14);
      border-radius: 16px;
      background: #fff;
      color: var(--text);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(23, 51, 31, .04);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .service-card:hover {
      transform: translateY(-2px);
      border-color: var(--brand-lime);
      box-shadow: 0 14px 26px rgba(117, 173, 48, .14);
    }

    .service-card b,
    .service-card span {
      display: block;
    }

    .service-card b {
      color: var(--green-dark);
      font-size: 15px;
    }

    .service-card span {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .service-card.is-recommended,
    .service-card.is-active {
      border-color: var(--brand-lime);
      background: linear-gradient(180deg, var(--lime-soft), #fff);
    }

    .service-card.is-active {
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .24), 0 14px 26px rgba(117, 173, 48, .12);
    }

    .service-card.is-active::after {
      content: "wybrane";
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 7px;
      border-radius: 999px;
      background: var(--brand-lime);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .service-note {
      margin: 12px 0 0;
      padding: 11px 12px;
      border: 1px solid rgba(36, 95, 47, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .72);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .final-check {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .final-check div {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
    }

    .final-check strong,
    .final-check span {
      display: block;
    }

    .final-check strong {
      color: var(--green-dark);
      font-size: 14px;
    }

    .final-check span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .addon-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .addon-material-group {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .82);
    }

    .addon-material-group header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .addon-material-group header strong {
      color: var(--green-dark);
      font-size: 15px;
    }

    .addon-material-group header span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .addon-hint {
      margin: -2px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .addon {
      min-height: 96px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .addon:hover {
      transform: translateY(-2px);
      border-color: var(--lime);
      box-shadow: 0 12px 26px rgba(23, 51, 31, .07);
    }

    .addon.is-selected {
      border-color: var(--green);
      background: linear-gradient(180deg, var(--lime-soft), #fff);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .24);
    }

    .addon.is-disabled {
      cursor: not-allowed;
      opacity: .58;
      transform: none;
      box-shadow: none;
    }

    .addon strong,
    .addon span,
    .addon small {
      display: block;
    }

    .addon span {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
    }

    .addon small {
      margin-top: 9px;
      color: var(--green-dark);
      font-weight: 900;
    }

    .sample-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 14px;
    }

    .sample-card.is-active {
      border-color: var(--green);
      background: linear-gradient(90deg, var(--lime-soft), #fff);
    }

    .sample-card.has-warning {
      border-color: rgba(193, 113, 42, .42);
      background: linear-gradient(90deg, #fff8ef, #fff);
    }

    .sample-card strong, .sample-card span {
      display: block;
      min-width: 0;
    }

    .sample-card span {
      color: var(--muted);
      font-size: 13px;
    }

    .sample-card strong,
    .sample-card span span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sample-card span span {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .sample-switcher {
      display: none;
      gap: 8px;
      margin: -2px 0 14px;
      max-width: 100%;
    }

    .sample-switcher.has-items {
      display: flex;
      overflow-x: auto;
      padding-bottom: 5px;
      scroll-snap-type: x proximity;
    }

    .sample-switcher .sample-card {
      flex: 0 0 min(260px, 78vw);
      min-height: 58px;
      padding: 10px 12px;
      scroll-snap-align: start;
      min-width: 0;
    }

    .sample-switcher .sample-card b {
      align-self: center;
      white-space: nowrap;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 44px;
      border: 1px solid rgba(36, 95, 47, .13);
      border-radius: 15px;
      padding: 0 15px;
      background: #fff;
      color: var(--text);
      cursor: pointer;
      font-weight: 500;
      transition: background-color .3s ease, border-color .3s ease, color .3s ease, filter .3s ease;
    }

    .btn::after {
      display: none;
    }

    .btn:hover:not(:disabled) {
      border-color: var(--brand-lime);
    }

    .btn:hover:not(:disabled)::after,
    .btn:focus-visible::after {
      display: none;
    }

    .btn:active:not(:disabled) {
      filter: none;
    }

    .btn-primary {
      border-color: #8bc34a;
      background: #8bc34a;
      color: #fff;
      box-shadow: none;
    }

    .btn-primary:hover:not(:disabled) {
      background: #8bc34a;
      border-color: #8bc34a;
    }

    .btn-danger {
      border-color: rgba(193, 113, 42, .28);
      color: #8b4a17;
      background: #fff8ef;
    }

    .btn-danger:hover:not(:disabled) {
      border-color: rgba(193, 113, 42, .5);
      box-shadow: 0 12px 24px rgba(193, 113, 42, .1);
    }

    .btn-quiet {
      border-color: rgba(36, 95, 47, .14);
      background: var(--lime-soft);
      color: var(--green-dark);
    }

    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-icon img {
      width: 17px;
      height: 17px;
      filter: invert(1);
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: .52;
    }

    .sample-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) 130px;
      gap: 10px;
      margin-bottom: 16px;
    }

    .active-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid rgba(36, 95, 47, .16);
      border-radius: 16px;
      background: #fff;
    }

    .active-summary strong,
    .active-summary span {
      display: block;
    }

    .active-summary strong {
      color: var(--green-dark);
      font-size: 16px;
    }

    .active-summary span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 13px;
    }

    .active-summary b {
      min-width: 88px;
      padding: 9px 10px;
      border-radius: 12px;
      background: var(--lime-soft);
      color: var(--green-dark);
      font-size: 13px;
      text-align: center;
    }

    .selected-tests-panel {
      display: grid;
      gap: 10px;
      margin: -2px 0 16px;
      padding: 14px;
      border: 1px solid rgba(36, 95, 47, .14);
      border-radius: 16px;
      background: rgba(255, 255, 255, .78);
    }

    .selected-tests-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .selected-tests-head strong {
      color: var(--green-dark);
      font-size: 15px;
    }

    .selected-tests-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .selected-tests-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .selected-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      min-height: 34px;
      padding: 6px 8px 6px 10px;
      border: 1px solid rgba(117, 173, 48, .32);
      border-radius: 999px;
      background: var(--lime-soft);
      color: var(--green-dark);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .selected-pill small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .selected-pill i {
      display: grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-style: normal;
      line-height: 1;
    }

    .quick-add {
      display: grid;
      gap: 8px;
      padding-top: 6px;
      border-top: 1px solid rgba(36, 95, 47, .10);
    }

    .quick-add strong {
      color: var(--green-dark);
      font-size: 13px;
    }

    .quick-add p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .quick-add-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .quick-add-list button {
      border: 1px solid rgba(117, 173, 48, .30);
      border-radius: 999px;
      padding: 7px 10px;
      background: #fff;
      color: var(--green-dark);
      font-family: inherit;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .quick-add-list button:hover {
      transform: translateY(-1px);
      border-color: var(--green);
      background: rgba(238, 248, 221, .78);
    }

    .test-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-bottom: 14px;
      padding: 12px;
      border: 1px solid rgba(36, 95, 47, .12);
      border-radius: 16px;
      background: #fff;
    }

    .filter-buttons {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-button {
      min-height: 38px;
      padding: 0 12px;
      border: 1px solid rgba(36, 95, 47, .13);
      border-radius: 999px;
      background: #fff;
      color: var(--text);
      font-family: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .filter-button.is-active {
      border-color: var(--brand-lime);
      background: var(--lime-soft);
      color: var(--green-dark);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .18);
    }

    .advisor {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
      padding: 16px;
      border: 1px solid rgba(117, 173, 48, .28);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(238, 248, 221, .92), rgba(255, 255, 255, .96)),
        radial-gradient(circle at 94% 0%, rgba(140, 198, 63, .18), transparent 28%);
    }

    .advisor-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .advisor-head h3 {
      margin: 0 0 5px;
      color: var(--green-dark);
      font-size: 20px;
    }

    .advisor-head p {
      margin: 0;
      color: var(--muted);
      line-height: 1.4;
    }

    .advisor-badge {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: #fff;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(23, 51, 31, .06);
    }

    .goal-grid, .pack-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .goal-card, .pack-card {
      border: 1px solid rgba(36, 95, 47, .14);
      border-radius: 15px;
      background: #fff;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .goal-card {
      min-height: 92px;
      padding: 13px;
    }

    .goal-card:hover, .pack-card:hover {
      transform: translateY(-2px);
      border-color: var(--brand-lime);
      box-shadow: 0 12px 24px rgba(117, 173, 48, .14);
    }

    .goal-card.is-active {
      border-color: var(--green);
      background: linear-gradient(180deg, var(--lime-soft), #fff);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .22);
    }

    .goal-card strong, .goal-card span, .pack-card strong, .pack-card span, .pack-card small {
      display: block;
    }

    .goal-card span, .pack-card span {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .pack-card {
      position: relative;
      min-height: 142px;
      padding: 14px 14px 44px;
    }

    .pack-card small {
      margin-top: 8px;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .pack-card b {
      position: absolute;
      right: 12px;
      bottom: 12px;
      color: var(--green-dark);
      font-size: 13px;
    }

    .advisor-note {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .field {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .field span {
      color: var(--green-dark);
    }

    .btn-add-sample {
      border-color: #8bc34a;
      background: #8bc34a;
      color: #fff;
      box-shadow: none;
    }

    .btn-add-sample:hover:not(:disabled) {
      border-color: #8bc34a;
      background: #8bc34a;
    }

    .btn-add-sample::before {
      content: "+";
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      place-items: center;
      width: 18px;
      height: 18px;
      margin-right: 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .22);
      color: #fff;
      font-weight: 900;
      line-height: 18px;
    }

    .field small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .field input, .field select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px 10px;
      background: #fff;
      color: var(--text);
    }

    .method-switch {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .method {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      text-align: left;
      cursor: pointer;
    }

    .method.is-active {
      border-color: var(--green);
      background: var(--lime-soft);
    }

    .method strong, .method span, .method small {
      display: block;
    }

    .method span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
    }

    .method small {
      margin-top: 8px;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .test-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .test-card {
      position: relative;
      min-height: 126px;
      padding: 14px 14px 52px;
    }

    .test-card:hover,
    .test-card:focus-visible {
      z-index: 8;
    }

    .test-card.is-selected {
      border-color: var(--green);
      background: linear-gradient(180deg, var(--lime-soft), #fff);
      box-shadow: 0 0 0 3px rgba(189, 219, 74, .24);
      animation: selectPop .22s ease both;
    }

    .test-card.is-disabled {
      cursor: not-allowed;
      opacity: .52;
      transform: none;
    }

    .test-card strong, .test-card em, .test-card span {
      display: block;
      overflow-wrap: anywhere;
    }

    .test-card em {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
    }

    .test-card span {
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .test-card .price {
      position: absolute;
      left: 14px;
      bottom: 14px;
      color: var(--green-dark);
      font-size: 16px;
      font-weight: 900;
    }

    .test-card .reason {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      margin-top: 8px;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(140, 198, 63, .14);
      color: var(--green-dark);
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .test-card .conflict-reason {
      width: 100%;
      margin: 10px 0 34px;
      border-radius: 10px;
      background: #fff3df;
      color: var(--warn);
      text-transform: none;
    }

    .test-info {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: calc(100% - 6px);
      z-index: 6;
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid rgba(36, 95, 47, .16);
      border-radius: 14px;
      background: #fff;
      color: var(--text);
      box-shadow: 0 18px 38px rgba(23, 51, 31, .18);
      max-height: min(62vh, 390px);
      overflow: auto;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(.98);
      transition: opacity .16s ease, transform .16s ease;
    }

    .test-info::after {
      content: "";
      position: absolute;
      left: 20px;
      bottom: -7px;
      width: 14px;
      height: 14px;
      border-right: 1px solid rgba(36, 95, 47, .16);
      border-bottom: 1px solid rgba(36, 95, 47, .16);
      background: #fff;
      transform: rotate(45deg);
    }

    .test-card:hover .test-info,
    .test-card:focus-visible .test-info {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .test-info strong,
    .test-info span,
    .test-info small {
      display: block;
    }

    .test-info strong {
      color: var(--green-dark);
      font-size: 13px;
    }

    .test-info span {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
    }

    .test-info span b {
      color: var(--green-dark);
      font-weight: 900;
    }

    .test-info small {
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 850;
    }

    .grain-card {
      min-height: 164px;
      padding-bottom: 58px;
    }

    .grain-card .grain-params {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }

    .grain-card .grain-params i {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(140, 198, 63, .13);
      color: var(--green-dark);
      font-size: 11px;
      font-style: normal;
      font-weight: 850;
    }

    .grain-card .reason {
      color: var(--green-dark);
    }

    .summary {
      position: sticky;
      top: 16px;
      display: grid;
      gap: 12px;
      padding: 18px;
    }

    .summary h2 {
      margin: 0;
      font-size: 22px;
    }

    .summary-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .summary-stats div, .totals {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .summary-stats strong {
      display: block;
      color: var(--green-dark);
      font-size: 24px;
    }

    .summary-stats span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .summary-list {
      display: grid;
      gap: 10px;
      max-height: 360px;
      overflow: auto;
      padding-right: 4px;
    }

    .summary-sample {
      display: grid;
      gap: 8px;
      padding: 12px 12px 11px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      animation: fadeUp .24s ease both;
    }

    .summary-sample-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .summary-sample-head strong,
    .summary-sample-head small {
      display: block;
    }

    .summary-sample-head strong {
      color: var(--green-dark);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .summary-sample-price {
      padding: 6px 8px;
      border-radius: 999px;
      background: var(--lime-soft);
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .summary-sample.has-warning {
      border-color: rgba(193, 113, 42, .38);
      background: #fff8ef;
    }

    .summary-sample .warning {
      color: var(--warn);
      font-size: 12px;
      font-weight: 800;
    }

    .summary-sample small {
      color: var(--muted);
    }

    .summary-sample ul {
      display: grid;
      gap: 5px;
      margin: 0;
      padding: 0;
      color: var(--muted);
      font-size: 13px;
      list-style: none;
    }

    .summary-sample li {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding-top: 5px;
      border-top: 1px solid rgba(36, 95, 47, .08);
    }

    .summary-sample li span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .summary-sample li b {
      color: var(--green-dark);
      font-weight: 900;
      white-space: nowrap;
    }

    .totals {
      display: grid;
      gap: 9px;
      order: -1;
    }

    .totals div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .totals strong {
      color: var(--green-dark);
      font-size: 20px;
    }

    .status {
      min-height: 20px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pageIn {
      from { opacity: 0; transform: translateY(10px) scale(.992); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes selectPop {
      0% { transform: scale(.985); }
      100% { transform: scale(1); }
    }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

    .page, .summary, .hero, .tabs {
      animation: fadeUp .36s ease both;
    }

    @media (max-width: 980px) {
      .hero, .layout, .sample-toolbar, .process-guide, .selected-material, .active-summary, .step-coach, .test-tools {
        grid-template-columns: 1fr;
      }

      .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .material-grid, .method-switch, .test-grid, .addon-grid, .service-flow, .final-check {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .goal-grid, .pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .summary {
        position: static;
      }
    }

    @media (max-width: 640px) {
      .cart-toast {
        bottom: calc(126px + env(safe-area-inset-bottom, 0px));
      }

      .demo[data-step="summary"] .cart-toast {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
      }

      body {
        padding: 10px;
        background:
          linear-gradient(180deg, #fbfff7 0%, #f3f7ee 48%, #edf4e7 100%);
        background-attachment: scroll;
      }

      body::before {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .52));
      }

      body::after {
        display: none;
      }

      .demo {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
      }

      .tabs, .material-grid, .method-switch, .test-grid, .addon-grid, .process-guide, .goal-grid, .pack-grid, .service-flow, .final-check {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 14px;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(23, 51, 31, .07);
      }

      .hero::after {
        width: 180px;
        height: 180px;
        right: -70px;
        bottom: -80px;
      }

      .hero-copy {
        min-height: auto;
      }

      .hero h1 {
        font-size: 26px;
        line-height: 1.08;
      }

      .hero p {
        font-size: 14px;
        line-height: 1.45;
      }

      .hero-topline {
        margin-bottom: 16px;
      }

      .hero-side {
        display: none;
      }

      .hero-side-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
      }

      .process-strip {
        padding: 12px;
        border-radius: 18px;
        margin-top: 12px;
      }

      .process-grid {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
      }

      .process-card {
        flex: 0 0 225px;
        min-height: auto;
        scroll-snap-align: start;
      }

      .tabs {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 2px 2px 10px;
        margin: 12px -2px;
        scroll-snap-type: x proximity;
      }

      .tab {
        min-height: 68px;
        scroll-snap-align: start;
      }

      .step-coach {
        padding: 13px;
      }

      .step-coach b {
        width: fit-content;
      }

      .mobile-progress {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin: -4px 0 14px;
        padding: 12px;
        border: 1px solid rgba(117, 173, 48, .28);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 26px rgba(23, 51, 31, .07);
      }

      .mobile-progress strong,
      .mobile-progress span {
        display: block;
      }

      .mobile-progress strong {
        color: var(--green-dark);
        font-size: 17px;
      }

      .mobile-progress span {
        margin-top: 2px;
        color: var(--muted);
        font-size: 12px;
      }

      .mobile-progress .btn {
        width: auto;
        min-width: 122px;
        padding-inline: 12px;
      }

      .page, .summary {
        border-radius: 18px;
      }

      .page {
        padding: 14px;
      }

      .page-head {
        margin-bottom: 12px;
      }

      .page-head h2 {
        font-size: 22px;
      }

      .page-head p {
        font-size: 13px;
      }

      .material {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 9px;
        padding: 11px;
        min-height: 86px;
      }

      .material-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        padding: 9px;
      }

      .material::before {
        width: 54px;
        height: 54px;
        border-radius: 16px;
      }

      .material.is-active::after {
        position: static;
        display: inline-block;
        margin-top: 10px;
      }

      .actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .btn {
        width: 100%;
        min-height: 48px;
      }

      .field input,
      .field select {
        min-height: 48px;
        font-size: 16px;
      }

      .test-tools {
        padding: 10px;
      }

      .advisor {
        padding: 12px;
        border-radius: 16px;
      }

      .advisor-head {
        display: grid;
        gap: 8px;
      }

      .advisor-badge {
        width: fit-content;
      }

      .goal-card,
      .pack-card,
      .method,
      .addon,
      .service-card {
        min-height: auto;
      }

      .filter-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .filter-button {
        padding: 0 8px;
        font-size: 12px;
        white-space: nowrap;
      }

      .selected-pill {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
      }

      .sample-list {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
      }

      .sample-list .sample-card {
        grid-template-columns: minmax(0, 1fr);
        flex: 0 0 min(282px, 82vw);
        min-width: 0;
        scroll-snap-align: start;
      }

      .sample-list .sample-card b {
        justify-self: start;
      }

      .test-card {
        min-height: auto;
        padding: 13px 13px 62px;
      }

      .test-card .reason {
        left: 13px;
        right: 13px;
        bottom: 34px;
        max-width: none;
        text-align: left;
      }

      .test-card .price {
        left: 13px;
        bottom: 12px;
      }

      .test-info {
        position: static;
        margin-top: 10px;
        padding: 10px;
        border-radius: 12px;
        background: rgba(238, 248, 221, .62);
        box-shadow: none;
        max-height: none;
        overflow: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }

      .test-info::after {
        display: none;
      }

      .summary {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(146px, auto);
        gap: 10px;
        align-items: center;
        padding: 10px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 40px rgba(23, 51, 31, .2);
      }

      .summary .btn-icon {
        min-height: 42px;
        margin: 0;
      }

      .summary h2,
      .summary-list,
      .summary .status {
        display: none;
      }

      .summary-stats {
        display: flex;
        gap: 6px;
        margin: 0;
        grid-column: 1 / 2;
      }

      .summary-stats div {
        min-width: 0;
        flex: 1;
        padding: 7px 8px;
        border-radius: 12px;
      }

      .summary-stats strong {
        font-size: 17px;
      }

      .summary-stats span {
        font-size: 10px;
      }

      .totals {
        grid-column: 1 / 2;
        grid-row: 2;
        margin: -2px 0 0;
        padding: 0;
        border: 0;
        background: transparent;
      }

      .totals div {
        display: none;
      }

      .totals div:last-child {
        display: flex;
        align-items: center;
        min-height: 28px;
      }

      .totals strong {
        font-size: 18px;
      }

      .summary .btn-icon {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
      }
    }

    @media (max-width: 640px) {
      .demo {
        padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
      }

      .demo[data-step="summary"] {
        padding-bottom: 18px;
      }

      .tabs {
        grid-template-columns: 1fr;
        overflow: visible;
        padding: 0;
        margin: 12px 0;
      }

      .tab {
        min-height: 58px;
        grid-template-columns: 30px 1fr;
        padding: 11px 12px;
        border-radius: 14px;
      }

      .tab span {
        width: 30px;
        height: 30px;
      }

      .process-strip {
        display: none;
      }

      .hero-points {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 14px;
      }

      .hero-points span {
        border-radius: 12px;
      }

      .layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .summary {
        position: fixed;
        top: auto;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(118px, 38%);
        gap: 8px;
        align-items: center;
        width: auto;
        max-width: calc(100vw - 20px);
        padding: 9px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 40px rgba(23, 51, 31, .2);
        box-sizing: border-box;
      }

      .summary h2,
      .summary-list,
      .summary .status {
        display: none;
      }

      .summary-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1 / 2;
        align-self: center;
        gap: 6px;
        min-width: 0;
        margin: 0;
      }

      .summary-stats div {
        min-width: 0;
        padding: 7px 6px;
        border-radius: 12px;
      }

      .summary-stats strong {
        overflow: hidden;
        font-size: 16px;
        line-height: 1.1;
        text-overflow: ellipsis;
      }

      .summary-stats span {
        font-size: 10px;
      }

      .totals {
        grid-column: 1 / 2;
        grid-row: 2;
        display: grid;
        align-self: center;
        gap: 0;
        min-width: 0;
        margin: -2px 0 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .totals div {
        display: none;
      }

      .totals div:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 24px;
        min-width: 0;
      }

      .totals div:last-child span {
        font-size: 11px;
        white-space: nowrap;
      }

      .totals strong {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-size: 16px;
        line-height: 1.1;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .summary .btn-icon {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        display: inline-flex;
        width: 100%;
        min-width: 0;
        min-height: 70px;
        height: auto;
        align-self: stretch;
        margin: 0;
        padding: 8px;
        gap: 6px;
        line-height: 1.1;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
      }

      .summary .btn-icon img {
        flex: 0 0 auto;
      }

      .demo[data-step="summary"] .summary {
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        padding: 14px;
        border-radius: 18px;
        background: var(--paper);
        backdrop-filter: none;
        box-shadow: var(--shadow);
      }

      .demo[data-step="summary"] .summary h2 {
        display: block;
        margin: 0 0 12px;
        font-size: 20px;
      }

      .demo[data-step="summary"] .summary-list,
      .demo[data-step="summary"] .summary-stats,
      .demo[data-step="summary"] .summary .status {
        display: grid;
      }

      .demo[data-step="summary"] .summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
      }

      .demo[data-step="summary"] .summary-stats div {
        padding: 10px;
        border-radius: 13px;
      }

      .demo[data-step="summary"] .summary-stats strong {
        font-size: 22px;
      }

      .demo[data-step="summary"] .summary-stats span {
        font-size: 11px;
      }

      .demo[data-step="summary"] .summary-list {
        max-height: none;
        overflow: visible;
        margin-bottom: 12px;
        padding-right: 0;
      }

      .demo[data-step="summary"] .totals {
        display: grid;
        gap: 8px;
        grid-column: auto;
        grid-row: auto;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        order: -1;
      }

      .demo[data-step="summary"] .totals div,
      .demo[data-step="summary"] .totals div:last-child {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        min-height: auto;
      }

      .demo[data-step="summary"] .totals div:last-child span {
        font-size: inherit;
      }

      .demo[data-step="summary"] .totals strong {
        overflow: visible;
        font-size: 20px;
        text-overflow: clip;
      }

      .demo[data-step="summary"] .summary .btn-icon {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0 15px;
        white-space: normal;
      }

      .demo[data-step="summary"] .summary .status {
        display: block;
      }

      .summary-sample-head {
        grid-template-columns: 1fr;
      }

      .summary-sample-price {
        width: fit-content;
      }

      .summary-sample li {
        grid-template-columns: 1fr;
      }

      .summary-sample li b {
        justify-self: start;
      }
    }

    @media (max-width: 520px) {
      .material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .material {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        justify-items: start;
        min-height: 142px;
        padding: 12px;
      }

      .material-icon {
        width: 56px;
        height: 56px;
        padding: 10px;
      }

      .material::before {
        left: 10px;
        top: 10px;
        width: 60px;
        height: 60px;
      }

      .material strong {
        font-size: 14px;
      }

      .material span {
        -webkit-line-clamp: 2;
        font-size: 11px;
      }

      .material.is-active::after {
        position: absolute;
        right: 8px;
        top: 8px;
        margin-top: 0;
        font-size: 9px;
      }

      .sample-toolbar {
        gap: 8px;
      }

      .sample-switcher .sample-card {
        grid-template-columns: 1fr;
        flex-basis: min(210px, 72vw);
        gap: 5px;
        padding: 9px 10px;
      }

      .sample-switcher .sample-card strong {
        white-space: nowrap;
      }

      .sample-switcher .sample-card span span {
        -webkit-line-clamp: 1;
        font-size: 11px;
      }

      .sample-switcher .sample-card b {
        justify-self: start;
        font-size: 12px;
      }

      .active-summary {
        grid-template-columns: 1fr;
      }

      .active-summary b {
        width: fit-content;
      }

      .demo:not([data-step="summary"]) .summary-list,
      .demo:not([data-step="summary"]) .summary h2 {
        display: none;
      }

      .demo:not([data-step="summary"]) .summary {
        padding: 12px;
      }

      .demo:not([data-step="summary"]) .summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 8px;
      }

      .demo:not([data-step="summary"]) .totals {
        margin-bottom: 10px;
      }

      .test-grid,
      .pack-grid,
      .goal-grid,
      .addon-grid {
        gap: 8px;
      }

      .test-card {
        border-radius: 14px;
      }

      .test-info {
        position: static;
        display: grid;
        max-height: none;
        margin: 9px 0 44px;
        padding: 10px;
        border-radius: 12px;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: 0 10px 22px rgba(23, 51, 31, .08);
      }

      .test-info::after {
        display: none;
      }

      .test-info span:nth-of-type(2),
      .test-info small {
        display: none;
      }

      .test-info strong,
      .test-info span,
      .test-info small {
        font-size: 11px;
        line-height: 1.32;
      }
    }

    @media (max-width: 640px) {
      .demo[data-has-tests="false"]:not([data-step="summary"]) {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      }

      .demo[data-has-tests="false"]:not([data-step="summary"]) .summary {
        display: none !important;
      }

      .demo:not([data-step="summary"]) .summary {
        position: fixed !important;
        top: auto !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(112px, 38%) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 132px !important;
        overflow: hidden !important;
        padding: 8px !important;
      }

      .demo:not([data-step="summary"]) .summary h2,
      .demo:not([data-step="summary"]) .summary-list,
      .demo:not([data-step="summary"]) .summary .status {
        display: none !important;
      }

      .demo:not([data-step="summary"]) .summary-stats {
        display: grid !important;
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin: 0 !important;
      }

      .demo:not([data-step="summary"]) .summary-stats div {
        min-width: 0 !important;
        padding: 7px 6px !important;
      }

      .demo:not([data-step="summary"]) .summary-stats strong {
        overflow: hidden !important;
        font-size: 16px !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .demo:not([data-step="summary"]) .summary-stats span {
        font-size: 10px !important;
        line-height: 1.1 !important;
      }

      .demo:not([data-step="summary"]) .totals {
        display: grid !important;
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
      }

      .demo:not([data-step="summary"]) .totals div {
        display: none !important;
      }

      .demo:not([data-step="summary"]) .totals div:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 22px !important;
      }

      .demo:not([data-step="summary"]) .totals div:last-child span {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        line-height: 1 !important;
      }

      .demo:not([data-step="summary"]) .totals strong {
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 16px !important;
        line-height: 1.05 !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .demo:not([data-step="summary"]) .summary .btn-icon {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;
        max-height: 94px !important;
        height: auto !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 7px !important;
        gap: 5px !important;
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1.12 !important;
      }

      .demo[data-step="summary"] .summary {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
      }
    }

/* Final visual calm layer. Keep this at the end so mobile overrides stay readable. */
body {
  background: linear-gradient(180deg, #fafbf7 0%, #f4f7ef 48%, #eef3e8 100%) !important;
  color: #1c2a20 !important;
}

.demo,
.hero,
.page,
.summary,
.process-strip,
.material,
.sample-card,
.test-card,
.goal-card,
.pack-card,
.addon-card,
.service-card,
.method-card,
.summary-sample,
.summary-stats div,
.totals {
  border-color: #e1e9dc !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(28, 42, 32, .045) !important;
}

.hero-side,
.step-coach,
.process-card {
  border-color: #e1e9dc !important;
  background: #fbfcf8 !important;
  box-shadow: 0 8px 20px rgba(28, 42, 32, .045) !important;
}

.tab.is-active,
.material.is-active,
.test-card.is-selected,
.goal-card.is-active,
.pack-card.is-selected,
.addon-card.is-selected,
.method-card.is-active {
  border-color: #6ea03a !important;
  background: #f8fbf4 !important;
  box-shadow: 0 0 0 2px rgba(127, 181, 61, .18), 0 8px 18px rgba(47, 107, 58, .055) !important;
}

.btn-primary,
.btn-add-sample,
.tab.is-done span {
  background: #7fb53d !important;
  border-color: #7fb53d !important;
  color: #ffffff !important;
}

.btn-primary:hover:not(:disabled),
.btn-add-sample:hover:not(:disabled) {
  background: #72a438 !important;
  border-color: #72a438 !important;
}

.summary-sample-price,
.test-card .reason,
.hero-badge,
.hero-points span,
.btn-quiet {
  background: #f3f8eb !important;
  border-color: #dce8d5 !important;
  color: #2f6b3a !important;
}

.hero h1,
.hero-side h2,
.process-head h2,
.page h2,
.summary h2,
.material strong,
.test-card strong,
.summary-stats strong,
.totals strong {
  color: #173d22 !important;
}

.hero p,
.hero-side p,
.process-head p,
.material span,
.test-card span,
.test-card em,
.summary-sample small,
.status {
  color: #5f6b60 !important;
}

@media (max-width: 640px) {
  .demo,
  .hero,
  .page,
  .summary,
  .process-strip,
  .mobile-progress {
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(28, 42, 32, .075) !important;
  }

  body {
    background: #f6f8f2 !important;
  }
}

/* Contrast polish 2.1.5. Stronger text without changing layout. */
:root {
  --text: #111812 !important;
  --muted: #343d35 !important;
  --green: #2f6f28 !important;
  --green-dark: #182016 !important;
  --brand-lime: #7dbb35 !important;
  --brand-lime-dark: #5f9625 !important;
}

body {
  background: linear-gradient(180deg, #fbfcf8 0%, #f4f7ef 44%, #eef4e8 100%) !important;
  color: #111812 !important;
}

.demo,
.hero,
.page,
.summary,
.process-strip,
.mobile-progress {
  color: #111812 !important;
}

.hero,
.page,
.summary,
.process-strip,
.material,
.sample-card,
.test-card,
.goal-card,
.pack-card,
.addon-card,
.service-card,
.method-card,
.summary-sample,
.summary-stats div,
.totals,
.active-summary,
.selected-material,
.step-coach,
.test-tools {
  border-color: #d8e2d1 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(17, 24, 18, .06) !important;
}

.hero-side,
.process-card,
.recommendation-box,
.info-box {
  border-color: #dbe5d4 !important;
  background: #fbfcf8 !important;
}

.hero h1,
.hero-side h2,
.process-head h2,
.page h2,
.summary h2,
.material strong,
.material b,
.test-card strong,
.test-card b,
.goal-card strong,
.pack-card strong,
.addon-card strong,
.service-card strong,
.method-card strong,
.summary-stats strong,
.totals strong,
.active-summary strong,
.active-summary b,
.sample-card strong,
.sample-card b,
label,
legend {
  color: #111812 !important;
}

.hero p,
.hero-side p,
.process-head p,
.page p,
.material span,
.test-card span,
.test-card em,
.goal-card span,
.pack-card span,
.addon-card span,
.service-card span,
.method-card span,
.summary-sample small,
.summary-stats span,
.active-summary span,
.sample-card span,
.status,
.sample-note,
.hint,
.muted {
  color: #343d35 !important;
}

.summary-sample-price,
.test-card .reason,
.hero-badge,
.hero-points span,
.btn-quiet,
.pill,
.badge {
  background: #f2f8ec !important;
  border-color: #cfe0c5 !important;
  color: #182016 !important;
}

.tab.is-active,
.material.is-active,
.test-card.is-selected,
.goal-card.is-active,
.pack-card.is-selected,
.addon-card.is-selected,
.method-card.is-active,
.sample-card.is-active {
  border-color: #5f9625 !important;
  background: #f6fbf1 !important;
  box-shadow: 0 0 0 2px rgba(125, 187, 53, .22), 0 10px 22px rgba(47, 111, 40, .08) !important;
}

input,
select,
textarea,
.search-input {
  color: #111812 !important;
  border-color: #cfd9c8 !important;
  background: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
  color: #596359 !important;
}

.btn-primary,
.btn-add-sample,
.summary .btn-icon,
.tab.is-done span {
  background: #7dbb35 !important;
  border-color: #7dbb35 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(95, 150, 37, .22) !important;
}

.btn-primary:hover:not(:disabled),
.btn-add-sample:hover:not(:disabled),
.summary .btn-icon:hover:not(:disabled) {
  background: #6ea72f !important;
  border-color: #6ea72f !important;
}

.btn-secondary,
.btn-outline,
.btn-ghost {
  color: #111812 !important;
  border-color: #cfd9c8 !important;
  background: #ffffff !important;
}

@media (max-width: 640px) {
  body {
    background: #f5f8f0 !important;
    color: #111812 !important;
  }

  .demo,
  .hero,
  .page,
  .summary,
  .process-strip,
  .mobile-progress {
    border-color: #d7e1d0 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(17, 24, 18, .075) !important;
  }
}