/* ==========================================================
   BIOPEPDNA — CUSTOM THEME
   Clean replacement main.css
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  --navy: #0f2a44;
  --navy-soft: #274760;
  --blue: #8fbad4;
  --blue-deep: #6f9eb9;
  --ice: #eef7fc;
  --ice-2: #f7fbfe;
  --white: #ffffff;
  --text: #42586b;
  --muted: #758697;
  --line: rgba(15, 42, 68, 0.10);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --container: 1380px;
}

/* ==========================================================
   RESET / GLOBAL
========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(var(--container), calc(100% - 70px));
  margin-inline: auto;
}

/* ==========================================================
   HEADER
========================================================== */

.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(174, 216, 240, 0.24),
      rgba(174, 216, 240, 0) 40%
    ),
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(250, 253, 255, 0.97) 48%,
      rgba(235, 247, 253, 0.96) 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}

/* TOP HEADER ROW */

.header-container,
.site-header .container.header-container {
  width: min(1480px, calc(100% - 80px));

  min-height: 175px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    300px
    minmax(0, 1fr)
    120px;

  align-items: center;

  gap: 34px;

  padding: 18px 0 14px;
}

/* LOGO */

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 100%;

  min-width: 0;
}

.logo img {
  display: block;

  width: 250px;
  max-width: 100%;

  height: auto;

  max-height: 155px;

  object-fit: contain;
  object-position: left center;

  margin: 0;
}
/* NAVIGATION */

.main-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav ul,
.main-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 2.6vw, 48px);
  flex-wrap: nowrap;
}

.main-nav li {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.main-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 0;

  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;

  color: var(--navy);

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;

  width: 0;
  height: 1px;

  background: var(--blue-deep);
  transform: translateX(-50%);

  transition: width 0.24s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
  color: #31566f;
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
  width: 100%;
}

/* HEADER ICONS */

.header-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-shrink: 0;
}

.header-icon {
  position: relative;

  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  color: var(--navy);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.header-icon:hover {
  opacity: 0.58;
  transform: translateY(-1px);
}

.header-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CART COUNT */

.cart-count {
  position: absolute;
  top: -7px;
  right: -8px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: var(--navy);
  color: #fff;

  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================
   HEADER TRUST STRIP
========================================================== */

.header-trust {
  width: 100%;

  border-top: 1px solid rgba(15, 42, 68, 0.08);
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);

  background: rgba(255, 255, 255, 0.50);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-trust-inner {
  width: min(1480px, calc(100% - 64px));
  min-height: 88px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.trust-feature {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 0 24px;

  min-height: 62px;

  border-right: 1px solid rgba(15, 42, 68, 0.10);
}


.trust-feature:first-child {
  padding-left: 12px;
}


.trust-feature:last-child {
  padding-right: 12px;
  border-right: none;
}


/* ICON CIRCLE */

.trust-feature-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(15, 42, 68, 0.25);

  border-radius: 50%;

  color: var(--navy);

  background: rgba(255, 255, 255, 0.68);
}


/* ICON ITSELF */

.trust-feature-icon svg {
  display: block !important;

  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;
  min-height: 18px !important;

  max-width: 18px !important;
  max-height: 18px !important;

  fill: none !important;

  stroke: currentColor !important;

  stroke-width: 1.4 !important;

  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}


.trust-feature-icon svg * {
  fill: none !important;

  stroke: currentColor !important;

  vector-effect: non-scaling-stroke;
}


/* TEXT AREA */

.trust-feature-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 4px;
}


.trust-feature-copy strong {
  display: block;

  margin: 0;

  color: var(--navy);

  font-family: var(--sans);

  font-size: 10px;
  font-weight: 700;

  line-height: 1.15;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  white-space: nowrap;
}


.trust-feature-copy span {
  display: block;

  margin: 0;

  color: #536c80;

  font-family: var(--sans);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.25;

  white-space: nowrap;
}

/* ==========================================================
   HERO
========================================================== */

.hero {
  position: relative;
  min-height: 700px;
  padding: 58px 0 42px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 74% 38%,
      rgba(157, 207, 237, 0.46) 0%,
      rgba(221, 240, 250, 0.25) 33%,
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 42%,
      #eaf6fc 100%
    );
}

/* DNA BACKGROUND */

.hero::after {
  content: "";
  position: absolute;

  top: -90px;
  right: -115px;

  width: 760px;
  height: 900px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;

  opacity: 0.22;

  pointer-events: none;
  z-index: 1;
}

/* HERO INNER */

.hero-inner {
  position: relative;
  z-index: 2;

  width: min(var(--container), calc(100% - 90px));
  min-height: 590px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  align-items: center;
  gap: clamp(45px, 5vw, 80px);
}

/* HERO COPY */

.hero-copy {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow {
  margin: 0 0 22px;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: var(--navy);
}

.hero-copy h1 {
  margin: 0;

  font-family: var(--serif);
  font-size: clamp(64px, 5.5vw, 88px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;

  color: var(--navy);
}

.hero-copy h1::after {
  content: "";
  display: block;

  width: 48px;
  height: 1px;

  margin-top: 30px;

  background: #7faac4;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin: 28px 0 32px;

  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;

  color: #486176;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-buttons a {
  min-width: 190px;
  min-height: 52px;
  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  border-radius: 2px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.hero-buttons .btn {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}

.hero-buttons .btn-outline {
  background: rgba(255, 255, 255, 0.66);
  color: var(--navy);
  border: 1px solid rgba(15, 42, 68, 0.26);
}

.hero-buttons a:hover {
  transform: translateY(-2px);
}

/* HERO IMAGE */

.hero-image {
  position: relative;
  min-height: 590px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-image::before {
  content: "";
  position: absolute;

  width: 620px;
  height: 620px;

  left: 52%;
  top: 48%;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(192, 226, 246, 0.62) 0%,
      rgba(217, 239, 251, 0.28) 42%,
      rgba(255, 255, 255, 0) 70%
    );

  z-index: 0;
}

.hero-image::after {
  content: "";
  position: absolute;

  width: min(92%, 650px);
  height: 85px;

  left: 50%;
  bottom: 15px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94),
      rgba(190, 225, 244, 0.35)
    );

  border: 1px solid rgba(110, 165, 200, 0.18);

  box-shadow:
    0 30px 45px rgba(46, 89, 117, 0.10),
    inset 0 7px 14px rgba(255, 255, 255, 0.94);

  z-index: 1;
}

.hero-image img {
  position: relative;
  z-index: 3;

  width: min(100%, 680px);
  max-height: 580px;
  margin: 0 auto;

  object-fit: contain;

  filter: drop-shadow(0 32px 30px rgba(38, 74, 98, 0.15));
}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
  padding: 68px 0 0;

  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(182, 220, 241, 0.15),
      rgba(182, 220, 241, 0) 38%
    ),
    linear-gradient(180deg, #fbfdff 0%, #f7fbfe 100%);

  border-top: 1px solid rgba(15, 42, 68, 0.08);
}

.footer-main {
  display: grid;
  grid-template-columns:
    minmax(300px, 1.55fr)
    repeat(4, minmax(120px, 1fr));

  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;

  padding-bottom: 58px;
}

/* FOOTER BRAND */

.footer-brand {
  display: flex;
  align-items: flex-start;
}

.footer-logo-link {
  display: block;
}

.footer-logo {
  width: min(100%, 400px);
  max-width: 400px;
  height: auto;
  margin: 0;
}

/* FOOTER COLUMNS */

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column h3 {
  position: relative;
  margin: 5px 0 24px;
  padding-bottom: 13px;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: var(--navy);
}

.footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 32px;
  height: 1px;

  background: #8caebb;
}

.footer-column a {
  display: inline-flex;
  align-items: center;

  margin-bottom: 14px;

  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;

  color: #40596e;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-column a:hover {
  color: var(--navy);
  transform: translateX(2px);
}

/* SOCIAL LINKS */

.footer-social {
  gap: 0;
}

.social-link {
  gap: 12px;
}

.social-link svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;

  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social .social-link:last-child svg {
  fill: var(--navy);
  stroke: none;
}

/* FOOTER BOTTOM */

.footer-bottom {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-top: 1px solid rgba(13, 43, 70, 0.09);
}

.footer-bottom p {
  margin: 0;

  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;

  color: #8192a3;
}

/* ==========================================================
   STANDARD WORDPRESS PAGES
========================================================== */

.standard-page {
  min-height: 75vh;
  padding: 72px 0 90px;

  background:
    linear-gradient(
      180deg,
      #f7fbfe 0%,
      #ffffff 260px
    );
}

.standard-page-inner {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
}

.standard-page-header {
  margin-bottom: 48px;
  text-align: center;
}

.page-eyebrow {
  margin: 0 0 15px;

  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #7894a8;
}

.standard-page-header h1 {
  margin: 0;

  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;

  color: var(--navy);
}

.page-rule {
  width: 42px;
  height: 1px;
  margin: 25px auto 0;

  background: #8fb3c8;
}

.standard-page-content {
  color: #4b6173;

  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
}

.standard-page-content p {
  margin: 0 0 22px;
}

.standard-page-content h2 {
  margin: 45px 0 17px;

  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;

  color: var(--navy);
}

.standard-page-content h3 {
  margin: 32px 0 12px;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;

  color: var(--navy);
}

.standard-page-content ul,
.standard-page-content ol {
  margin: 0 0 25px 22px;
}

.standard-page-content li {
  margin-bottom: 8px;
}

.standard-page-content a {
  color: #416f8b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   BASIC WOOCOMMERCE PAGE SPACING
========================================================== */

.woocommerce-page main,
body.woocommerce main {
  width: min(var(--container), calc(100% - 70px));
  margin: 0 auto;
  padding: 64px 0 90px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  color: var(--text);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--navy);
  color: #fff;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================
   RESPONSIVE — MEDIUM DESKTOP
========================================================== */

@media (max-width: 1250px) {
.header-container {
  width: min(1480px, calc(100% - 80px));

  min-height: 155px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    270px
    minmax(0, 1fr)
    120px;

  align-items: center;

  gap: 34px;

  padding: 12px 0;
}
  .logo img {
    width: 185px;
  }

  .main-nav ul,
  .main-nav .menu {
    gap: 22px;
  }

  .main-nav a {
    font-size: 10px;
    letter-spacing: 0.07em;
  }

  .header-icons {
    gap: 16px;
  }

  .header-trust-inner {
    width: min(100% - 40px, 1400px);
  }

  .trust-feature {
    padding-inline: 16px;
  }

  .hero-inner {
    width: min(var(--container), calc(100% - 60px));
    grid-template-columns: 45% 55%;
    gap: 35px;
  }

  .hero-copy h1 {
    font-size: clamp(55px, 6vw, 72px);
  }

  .hero-image img {
    max-width: 560px;
  }

  .hero::after {
    width: 650px;
    right: -150px;
  }
}

/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {
  .header-container,
  .site-header .container.header-container {
    width: calc(100% - 32px);
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
  }

  .logo img {
    width: 170px;
    max-height: 100px;
  }

  .main-nav {
    display: none;
  }

  .header-trust-inner {
    width: calc(100% - 32px);
    grid-template-columns: 1fr 1fr;
    padding: 10px 0;
  }

  .trust-feature {
    min-height: 66px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 42, 68, 0.08);
  }

  .trust-feature:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .trust-feature:first-child {
    padding-left: 14px;
  }

  .trust-feature:last-child {
    padding-right: 14px;
  }

  .hero {
    min-height: auto;
    padding: 54px 0 30px;
  }

  .hero-inner {
    width: calc(100% - 40px);
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }

  .hero-copy {
    align-items: center;
  }

  .hero-copy h1 {
    font-size: clamp(50px, 10vw, 68px);
    line-height: 0.94;
  }

  .hero-copy h1::after {
    margin-inline: auto;
  }

  .hero-copy > p:not(.eyebrow) {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image {
    min-height: 430px;
  }

  .hero-image img {
    max-width: 470px;
    max-height: 430px;
  }

  .hero::after {
    top: 42%;
    right: -180px;
    width: 550px;
    opacity: 0.14;
  }

  .footer-main {
    grid-template-columns: 1.4fr repeat(2, 1fr);
    gap: 40px;
  }

  .footer-brand {
    grid-row: span 2;
  }

  .footer-logo {
    max-width: 320px;
  }
}

/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 700px) {
  .container {
    width: calc(100% - 36px);
  }

  .site-header {
    background: rgba(255, 255, 255, 0.98);
  }

  .header-icons {
    gap: 14px;
  }

  .header-icon,
  .header-icon svg {
    width: 20px;
    height: 20px;
  }

  .header-trust-inner {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
  }

  .trust-feature {
    border-bottom: 1px solid rgba(15, 42, 68, 0.08);
  }

  .trust-feature:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(15, 42, 68, 0.08);
  }

  .trust-feature:last-child {
    border-bottom: 0;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .hero-buttons {
    width: 100%;
  }

  .hero-buttons a {
    width: min(100%, 310px);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
    padding-bottom: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: center;
  }

  .footer-logo {
    width: 280px;
    margin: 0 auto;
  }

  .footer-column h3 {
    margin-bottom: 19px;
  }

  .footer-column a {
    font-size: 12px;
    margin-bottom: 11px;
  }

  .standard-page {
    padding: 58px 0 68px;
  }

  .standard-page-header {
    margin-bottom: 35px;
  }

  .standard-page-content {
    font-size: 14px;
  }

  .woocommerce-page main,
  body.woocommerce main {
    width: calc(100% - 36px);
    padding: 48px 0 68px;
  }
}

/* ==========================================================
   RESPONSIVE — SMALL MOBILE
========================================================== */

@media (max-width: 480px) {
  .logo img {
    width: 150px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-column {
    align-items: center;
    text-align: center;
  }

  .footer-column h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-bottom {
    min-height: 66px;
  }
}
/* ==========================================================
   BIOPEPDNA SHOP PAGE
========================================================== */

.bio-shop {
  background: #fff;
}


/* SHOP HERO */

.shop-hero {
  position: relative;
  overflow: hidden;

  min-height: 210px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(168, 215, 241, 0.34),
      rgba(168, 215, 241, 0) 42%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #f9fcfe 45%,
      #eaf6fc 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


/* FAINT DNA DETAIL */

.shop-hero::after {
  content: "";

  position: absolute;

  right: -70px;
  top: -180px;

  width: 520px;
  height: 620px;

  background-image:
    url("../images/hero-dna.png");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.shop-hero-inner {
  position: relative;
  z-index: 2;

  width: min(var(--container), calc(100% - 70px));

  margin: 0 auto;
}


.shop-eyebrow {
  margin: 0 0 12px;

  font-family: var(--sans);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: #6d8ea4;
}


.shop-hero h1 {
  margin: 0;

  font-family: var(--serif);

font-size: clamp(58px, 6vw, 84px);
line-height: 0.96;
letter-spacing: -0.03em;

  color: var(--navy);
}


.shop-intro {
  margin: 16px 0 0;

  font-size: 15px;

  color: #536a7d;
}
/* ==========================================================
   SHOP PRODUCT GRID
========================================================== */

/* RESULTS + SORTING ROW */

.woocommerce .woocommerce-result-count {
  margin: 0 0 24px;

  color: #536a7d;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering select {
  min-width: 190px;

  padding: 10px 38px 10px 14px;

  border: 1px solid rgba(15, 42, 68, 0.18);
  border-radius: 2px;

  background: #fff;

  color: var(--navy);

  font-family: var(--sans);
  font-size: 12px;
}


/* PRODUCT GRID */

.woocommerce ul.products {
  display: grid !important;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin: 0 !important;
}


/* PRODUCT CARD */

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;

  position: relative;

  display: flex;
  flex-direction: column;

  padding: 12px 12px 15px;

  border: 1px solid rgba(15, 42, 68, 0.10);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);

  border-color: rgba(15, 42, 68, 0.18);

  box-shadow:
    0 18px 35px rgba(42, 73, 96, 0.08);
}


/* IMAGE AREA */

.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 225px !important;

  margin: 0 0 18px !important;

  object-fit: contain;

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f7fbfe 100%
    );

  padding: 12px;
}


/* PRODUCT TITLE */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px !important;
  padding: 0 !important;

  color: var(--navy);

  font-family: var(--sans);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.25;

  text-align: center;
}


/* PRICE */

.woocommerce ul.products li.product .price {
  margin: 0 0 16px !important;

  color: var(--navy-soft) !important;

  font-family: var(--sans);
  font-size: 13px !important;
  font-weight: 600;

  text-align: center;
}


/* BUTTON */

.woocommerce ul.products li.product .button {
  width: 100%;

  margin-top: auto !important;

  padding: 13px 16px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--navy) !important;

  color: #fff !important;

  border: 1px solid var(--navy);
  border-radius: 2px;

  font-family: var(--sans);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
  background: #183d5d !important;

  transform: translateY(-1px);
}


/* SALE BADGE */

.woocommerce span.onsale {
  top: 12px !important;
  left: 12px !important;

  min-width: auto !important;
  min-height: auto !important;

  padding: 6px 9px !important;

  border-radius: 2px !important;

  background: #dceef8 !important;

  color: var(--navy) !important;

  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* PAGINATION */

.woocommerce nav.woocommerce-pagination {
  margin-top: 44px;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;

  margin: 0 3px !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 36px;

  padding: 10px 12px !important;

  border: 1px solid rgba(15, 42, 68, 0.14);

  background: #fff !important;

  color: var(--navy) !important;

  font-size: 11px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--navy) !important;

  color: #fff !important;

  border-color: var(--navy);
}


/* ==========================================================
   SHOP RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 800px) {

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

  .woocommerce ul.products li.product a img {
    height: 245px !important;
  }

}


@media (max-width: 520px) {

  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }

  .woocommerce .woocommerce-ordering {
    float: none;
  }

  .woocommerce .woocommerce-ordering select {
    width: 100%;
  }

}
/* ==========================================================
   SHOP — TRUE CENTERED LAYOUT
========================================================== */

/* Keep page itself full width */
body.post-type-archive-product main {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 0 90px !important;

  overflow: visible !important;
}


/* BREADCRUMB */

body.post-type-archive-product .woocommerce-breadcrumb {
  float: none !important;

  width: min(1380px, calc(100% - 80px)) !important;

  margin:
    55px auto
    18px !important;

  padding: 0 !important;
}


/* RESULTS COUNT */

body.post-type-archive-product .woocommerce-result-count {
  float: none !important;

  width: min(1380px, calc(100% - 80px)) !important;

  margin:
    0 auto
    0 !important;

  padding: 0 !important;
}


/* SORTING ROW */

body.post-type-archive-product .woocommerce-ordering {
  float: none !important;

  width: min(1380px, calc(100% - 80px)) !important;

  margin:
    -34px auto
    35px !important;

  padding: 0 !important;

  display: flex !important;
  justify-content: flex-end !important;
}


/* PRODUCT GRID */

body.post-type-archive-product ul.products {
  width: min(1380px, calc(100% - 80px)) !important;
  max-width: 1380px !important;

  margin:
    0 auto !important;

  padding: 0 !important;

  display: grid !important;

grid-template-columns:
  repeat(4, minmax(0, 1fr)) !important;

gap: 18px !important;

  float: none !important;
  clear: both !important;

  position: relative !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;
}


/* PRODUCT CARDS */

body.post-type-archive-product ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  float: none !important;
  clear: none !important;

  left: auto !important;
  right: auto !important;

  box-sizing: border-box !important;
}


/* PAGINATION */

body.post-type-archive-product nav.woocommerce-pagination {
  width: min(1380px, calc(100% - 80px));

  margin:
    48px auto
    0 !important;
}


/* TABLET */

@media (max-width: 1000px) {

  body.post-type-archive-product ul.products {
    width: calc(100% - 48px) !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* MOBILE */

@media (max-width: 650px) {

  body.post-type-archive-product .woocommerce-breadcrumb,
  body.post-type-archive-product .woocommerce-result-count,
  body.post-type-archive-product .woocommerce-ordering,
  body.post-type-archive-product ul.products {
    width: calc(100% - 30px) !important;
  }

  body.post-type-archive-product .woocommerce-ordering {
    margin-top: 20px !important;
    justify-content: stretch !important;
  }

  body.post-type-archive-product .woocommerce-ordering select {
    width: 100% !important;
  }

  body.post-type-archive-product ul.products {
    grid-template-columns: 1fr !important;
  }

}
/* ==========================================================
   SHOP — TIGHTEN TOP SPACING
========================================================== */

/* Breadcrumb */
body.post-type-archive-product .woocommerce-breadcrumb {
  margin-top: 42px !important;
  margin-bottom: 10px !important;
}


/* Results count */
body.post-type-archive-product .woocommerce-result-count {
  margin-bottom: 0 !important;
}


/* Sorting dropdown */
body.post-type-archive-product .woocommerce-ordering {
  margin-top: -28px !important;
  margin-bottom: 14px !important;
}


/* Pull product cards upward */
body.post-type-archive-product ul.products {
  margin-top: 18px !important;
}
/* ==========================================================
   SHOP — COMPACT CATALOG HEADER
========================================================== */

body.post-type-archive-product .woocommerce-breadcrumb {
  margin-top: 28px !important;
  margin-bottom: 6px !important;
}

body.post-type-archive-product .woocommerce-result-count {
  margin-bottom: 0 !important;
}

body.post-type-archive-product .woocommerce-ordering {
  margin-top: -38px !important;
  margin-bottom: 8px !important;
}

body.post-type-archive-product ul.products {
  margin-top: 8px !important;
}


/* ==========================================================
   SHOP — CLEANER VERSION
   Hide redundant breadcrumb
========================================================== */

body.post-type-archive-product .woocommerce-breadcrumb {
  display: none !important;
}

body.post-type-archive-product .woocommerce-result-count {
  margin-top: 28px !important;
}
/* ==========================================================
   SHOP — PRODUCT CARD POLISH
========================================================== */

body.post-type-archive-product ul.products li.product {
  border: 1px solid rgba(15, 42, 68, 0.10) !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    ) !important;

  box-shadow: none;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

body.post-type-archive-product ul.products li.product:hover {
  transform: translateY(-4px);

  border-color: rgba(15, 42, 68, 0.18) !important;

  box-shadow:
    0 18px 38px rgba(31, 67, 92, 0.09);
}


/* PRODUCT IMAGE AREA */

body.post-type-archive-product ul.products li.product a img {
  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f6fbfe 100%
    ) !important;

  transition: transform .25s ease;
}

body.post-type-archive-product ul.products li.product:hover a img {
  transform: scale(1.025);
}


/* PRODUCT TITLE */

body.post-type-archive-product
ul.products
li.product
.woocommerce-loop-product__title {

  color: var(--navy) !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  letter-spacing: .01em;

  margin-top: 4px !important;
}


/* PRICE */

body.post-type-archive-product ul.products li.product .price {
  color: #45677e !important;

  font-size: 13px !important;
  font-weight: 600 !important;
}


/* BUTTON */

body.post-type-archive-product ul.products li.product .button {
  min-height: 43px;

  border-radius: 2px !important;

  background: var(--navy) !important;

  letter-spacing: .085em !important;

  transition:
    background .2s ease,
    transform .2s ease;
}

body.post-type-archive-product ul.products li.product .button:hover {
  background: #173d5d !important;

  transform: translateY(-1px);
}
/* ==========================================================
   SHOP — STRONGER PREMIUM HOVER
========================================================== */

body.post-type-archive-product ul.products li.product:hover {
  transform: translateY(-7px);

  border-color: rgba(111, 158, 185, 0.28) !important;

  box-shadow:
    0 22px 45px rgba(28, 62, 87, 0.12),
    0 0 0 1px rgba(143, 186, 212, 0.05);
}

body.post-type-archive-product ul.products li.product:hover a img {
  transform: scale(1.04);
}

body.post-type-archive-product ul.products li.product:hover .button {
  background: #173d5d !important;
  transform: translateY(-1px);
}
/* Keep product image zoom contained + polished */
body.post-type-archive-product ul.products li.product a:first-child {
  overflow: hidden;
}

body.post-type-archive-product ul.products li.product img {
  transition: transform 0.35s ease;
}

/* Smoother card movement */
body.post-type-archive-product ul.products li.product {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
/* ==========================================================
   BIOPEPDNA — ABOUT PAGE
========================================================== */

.about-page {
  overflow: hidden;
  background: #fff;
}


/* ==========================================================
   ABOUT HERO
========================================================== */

.about-hero {
  position: relative;

  padding: 72px 0 64px;

  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(175, 216, 239, 0.28),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


/* DNA */

.about-hero::after {
  content: "";

  position: absolute;

  top: -160px;
  right: -80px;

  width: 530px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.about-hero-inner {
  position: relative;
  z-index: 2;

  width: min(780px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.about-eyebrow {
  margin: 0 0 15px;

  color: #789aae;

  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.20em;

  text-transform: uppercase;
}


.about-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(60px, 6vw, 88px);
  font-weight: 500;

  line-height: 0.95;
  letter-spacing: -0.03em;
}


.about-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 28px auto 24px;

  background: #89b3ca;
}


.about-lead {
  max-width: 700px;

  margin: 0 auto;

  color: #48647a;

  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
}


/* ==========================================================
   PILLARS
========================================================== */

.about-pillars {
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);

  background: rgba(250, 253, 255, 0.72);
}


.about-pillars-inner {
  width: min(1180px, calc(100% - 70px));

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


.about-pillar {
  position: relative;

  padding: 38px 55px 36px;

  text-align: center;
}


.about-pillar:not(:last-child) {
  border-right: 1px solid rgba(15, 42, 68, 0.10);
}


.about-pillar-icon {
  width: 66px;
  height: 66px;

  margin: 0 auto 17px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(111, 158, 185, 0.45);
  border-radius: 50%;

  color: var(--navy);

  background: rgba(255, 255, 255, 0.78);
}


.about-pillar-icon svg {
  width: 30px;
  height: 30px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.about-pillar h2 {
  margin: 0 0 9px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
}


.about-pillar p {
  max-width: 260px;

  margin: 0 auto;

  color: #506a7e;

  font-size: 13px;
  line-height: 1.65;
}


/* ==========================================================
   DETAIL CARDS
========================================================== */

.about-details {
  padding: 34px 0;

  background: #fff;
}


.about-details-inner {
  width: min(1180px, calc(100% - 70px));

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;
}


.about-detail-card {
  min-height: 270px;

  padding: 30px 32px;

  display: grid;
  grid-template-columns: 92px 1fr;

  gap: 23px;

  border: 1px solid rgba(15, 42, 68, 0.11);

  border-radius: 3px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  box-shadow:
    0 13px 32px rgba(34, 68, 91, 0.045);
}


.about-detail-icon {
  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #17476a;

  background:
    radial-gradient(
      circle,
      #edf7fc,
      #f7fbfe
    );
}


.about-detail-icon svg {
  width: 40px;
  height: 40px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.about-detail-copy h2 {
  margin: 1px 0 10px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
}


.about-card-rule {
  display: block;

  width: 38px;
  height: 1px;

  margin-bottom: 19px;

  background: #7da9c2;
}


.about-detail-copy p {
  margin: 0 0 14px;

  color: #455f73;

  font-size: 13px;
  line-height: 1.72;
}


.about-detail-copy .about-disclaimer {
  margin-top: 17px;

  color: #6294b3;

  font-weight: 600;
  font-style: italic;
}


/* ==========================================================
   CLOSING
========================================================== */

.about-closing {
  padding: 24px 0;

  background:
    linear-gradient(
      90deg,
      #f6fbfe 0%,
      #eaf6fc 50%,
      #f6fbfe 100%
    );

  border-top: 1px solid rgba(15, 42, 68, 0.06);
}


.about-closing-inner {
  width: min(720px, calc(100% - 40px));

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 24px;
}


.about-closing-icon {
  width: 66px;
  height: 66px;

  flex: 0 0 66px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #245675;

  background: rgba(191, 224, 242, 0.50);
}


.about-closing-icon svg {
  width: 31px;
  height: 31px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.about-closing h2 {
  margin: 0 0 5px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;

  letter-spacing: 0.08em;
}


.about-closing p {
  margin: 0;

  color: #395a70;

  font-size: 13px;
}


/* ==========================================================
   ABOUT RESPONSIVE
========================================================== */

@media (max-width: 900px) {

  .about-pillars-inner {
    grid-template-columns: 1fr;
  }

  .about-pillar:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 42, 68, 0.10);
  }

  .about-details-inner {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .about-hero {
    padding: 55px 0 50px;
  }

  .about-lead {
    font-size: 14px;
  }

  .about-pillars-inner,
  .about-details-inner {
    width: calc(100% - 30px);
  }

  .about-detail-card {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .about-detail-icon {
    margin: 0 auto;
  }

  .about-card-rule {
    margin-left: auto;
    margin-right: auto;
  }

  .about-closing-inner {
    flex-direction: column;

    text-align: center;
  }

}
/* ==========================================================
   ABOUT PAGE — TIGHTER VERTICAL RHYTHM
========================================================== */

/* HERO: slightly less vertical space */
.about-hero {
  padding-top: 54px !important;
  padding-bottom: 42px !important;
}

.about-title-rule {
  margin-top: 22px !important;
  margin-bottom: 18px !important;
}

.about-lead {
  line-height: 1.65 !important;
}


/* PILLARS: reduce height */
.about-pillar {
  padding-top: 26px !important;
  padding-bottom: 24px !important;
}

.about-pillar-icon {
  width: 58px !important;
  height: 58px !important;

  margin-bottom: 12px !important;
}

.about-pillar-icon svg {
  width: 26px !important;
  height: 26px !important;
}

.about-pillar h2 {
  margin-bottom: 6px !important;
}

.about-pillar p {
  line-height: 1.5 !important;
}


/* DETAILS: pull closer to pillars */
.about-details {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}


/* Slightly shorter cards */
.about-detail-card {
  min-height: 235px !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}


/* Closing statement closer to cards */
.about-closing {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
/* ==========================================================
   BIOPEPDNA — TRACK ORDER PAGE
========================================================== */

.track-page {
  background: #ffffff;
}


/* ==========================================================
   TRACK HERO
========================================================== */

.track-page-hero {
  position: relative;
  padding: 54px 0 46px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.track-page-hero::after {
  content: "";

  position: absolute;
  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;
  pointer-events: none;
}


.track-page-hero-inner {
  position: relative;
  z-index: 2;

  width: min(820px, calc(100% - 50px));
  margin: 0 auto;

  text-align: center;
}


.track-page-eyebrow {
  margin: 0 0 15px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;

  text-transform: uppercase;
}


.track-page-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.track-page-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 20px;

  background: #89b3ca;
}


.track-page-lead {
  max-width: 760px;
  margin: 0 auto;

  color: #4e6b81;

  font-size: 16px;
  line-height: 1.7;
}


/* ==========================================================
   TRACK CARD
========================================================== */

.track-page-content {
  position: relative;
  z-index: 5;

  margin-top: -32px;

  padding: 0 0 70px;

  background: transparent;
}

.track-page-card {
  width: min(980px, calc(100% - 60px));
  margin: 0 auto;

  padding: 38px 46px 34px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  border: 1px solid rgba(15, 42, 68, 0.11);
  border-radius: 3px;

  box-shadow:
    0 16px 42px rgba(34, 68, 91, 0.06);
}


.track-page-card-heading {
  margin-bottom: 28px;
  text-align: center;
}


.track-card-eyebrow {
  margin: 0 0 8px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.track-page-card-heading h2 {
  margin: 0 0 8px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}


.track-page-card-heading p:last-child {
  margin: 0;

  color: #60788c;

  font-size: 13px;
  line-height: 1.6;
}


/* ==========================================================
   WOOCOMMERCE TRACKING FORM
========================================================== */

.track-page-card .woocommerce-form-track-order {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px 24px;
}


.track-page-card
.woocommerce-form-track-order
> p:first-child {
  grid-column: 1 / -1;

  margin: 0 0 4px;

  color: #60788c;

  font-size: 13px;
  line-height: 1.65;
}


.track-page-card
.woocommerce-form-track-order
.form-row {
  width: 100% !important;

  float: none !important;

  margin: 0 !important;
}


.track-page-card
.woocommerce-form-track-order
label {
  display: block;

  margin-bottom: 9px;

  color: var(--navy);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}


.track-page-card
.woocommerce-form-track-order
input.input-text {
  width: 100%;
  min-height: 54px;

  padding: 0 17px;

  color: var(--navy);

  background: #f8fbfd;

  border: 1px solid #d3e1e8;
  border-radius: 2px;

  box-shadow: none;
}


.track-page-card
.woocommerce-form-track-order
input.input-text:focus {
  background: #ffffff;

  border-color: #83b6cf;

  outline: none;
}


/* TRACK BUTTON ROW */

.track-page-card
.woocommerce-form-track-order
p.form-row:has(button.button) {
  grid-column: 1 / -1;
  width: 100% !important;

  display: flex;
  justify-content: center;

  margin-top: 4px !important;
}


.track-page-card
.woocommerce-form-track-order
button.button {
  width: auto;

  min-width: 165px;
  min-height: 48px;

  padding: 0 32px;
  margin: 0 auto;

  background: var(--navy);
  color: #ffffff;

  border: 0;
  border-radius: 3px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.track-page-card
.woocommerce-form-track-order
button.button:hover {
  background: #173d5d;

  transform: translateY(-1px);

  box-shadow:
    0 6px 16px rgba(15, 42, 68, 0.14);
}
/* ==========================================================
   BOTTOM NOTE
========================================================== */

.track-page-note {
  margin: 24px 0 0;

  padding-top: 20px;

  border-top: 1px solid rgba(15, 42, 68, 0.08);

  color: #7890a1;

  font-size: 12px;
  font-style: italic;

  text-align: center;
}


/* ==========================================================
   TRACK PAGE — RESPONSIVE
========================================================== */

@media (max-width: 700px) {

  .track-page-hero {
    padding: 54px 0 112px;
  }

  .track-page-lead {
    font-size: 14px;
  }

  .track-page-card {
    width: calc(100% - 30px);
    padding: 30px 22px;
  }

  .track-page-card
  .woocommerce-form-track-order {
    grid-template-columns: 1fr;
  }

}
/* ==========================================================
   BIOPEPDNA — FAQ PAGE
========================================================== */

.faq-page {
  background: #ffffff;
}


/* ==========================================================
   FAQ HERO
========================================================== */

.faq-hero {
  position: relative;
  overflow: hidden;

  padding: 56px 0 48px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.faq-hero::after {
  content: "";

  position: absolute;

  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.faq-hero-inner {
  position: relative;
  z-index: 2;

  width: min(820px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.faq-eyebrow,
.faq-section-eyebrow {
  margin: 0 0 14px;

  color: #789aae;

  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.faq-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.faq-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 20px;

  background: #89b3ca;
}


.faq-lead {
  max-width: 760px;

  margin: 0 auto;

  color: #4e6b81;

  font-size: 16px;
  line-height: 1.7;
}


/* ==========================================================
   REFUND + RETURN POLICY
========================================================== */

.faq-policy-section {
  padding: 36px 0 24px;
}


.faq-policy-card {
  width: min(1180px, calc(100% - 70px));

  margin: 0 auto;

  padding: 34px 38px;

  background:
    linear-gradient(
      135deg,
      #143957 0%,
      #1e4c6d 100%
    );

  color: #ffffff;

  border-radius: 4px;

  box-shadow:
    0 16px 40px rgba(24, 57, 82, 0.10);
}


.faq-policy-heading {
  margin-bottom: 22px;
}


.faq-policy-heading .faq-section-eyebrow {
  color: #a9cadd;
}


.faq-policy-heading h2 {
  margin: 0;

  color: #ffffff;

  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
}


.faq-policy-copy {
  columns: 2;
  column-gap: 42px;
}


.faq-policy-copy p {
  break-inside: avoid;

  margin: 0 0 18px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 13px;
  line-height: 1.72;
}


.faq-policy-copy a {
  color: #c7e5f5;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   FAQ LIST
========================================================== */

.faq-list-section {
  padding: 34px 0 36px;
}


.faq-list-inner {
  width: min(980px, calc(100% - 60px));

  margin: 0 auto;
}


.faq-list-heading {
  margin-bottom: 22px;

  text-align: center;
}


.faq-list-heading h2 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
}


.faq-accordion {
  display: grid;

  gap: 12px;
}


.faq-item {
  border: 1px solid rgba(15, 42, 68, 0.11);

  border-radius: 3px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  box-shadow:
    0 8px 22px rgba(34, 68, 91, 0.04);

  overflow: hidden;
}


.faq-item summary {
  position: relative;

  cursor: pointer;

  list-style: none;

  padding: 18px 52px 18px 20px;

  color: var(--navy);

  font-size: 14px;
  font-weight: 600;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


.faq-item summary::after {
  content: "+";

  position: absolute;

  right: 20px;
  top: 50%;

  transform: translateY(-50%);

  color: #6f9eb9;

  font-size: 22px;
  font-weight: 400;
}


.faq-item[open] summary::after {
  content: "−";
}


.faq-answer {
  padding: 0 20px 18px;
}


.faq-answer p {
  margin: 0;

  color: #587086;

  font-size: 13px;
  line-height: 1.7;
}


/* ==========================================================
   FAQ CONTACT
========================================================== */

.faq-contact {
  padding: 26px 0 34px;

  background:
    linear-gradient(
      90deg,
      #f6fbfe 0%,
      #eaf6fc 50%,
      #f6fbfe 100%
    );

  border-top: 1px solid rgba(15, 42, 68, 0.06);
}


.faq-contact-inner {
  width: min(720px, calc(100% - 40px));

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;

  text-align: left;
}


.faq-contact-icon {
  width: 62px;
  height: 62px;

  flex: 0 0 62px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #245675;

  background: rgba(191, 224, 242, 0.50);
}


.faq-contact-icon svg {
  width: 28px;
  height: 28px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.faq-contact-copy h2 {
  margin: 0 0 5px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
}


.faq-contact-copy p {
  margin: 0;

  color: #4b677c;

  font-size: 13px;
}


.faq-contact-copy a {
  color: #315f7d;

  font-weight: 600;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   FAQ RESPONSIVE
========================================================== */

@media (max-width: 800px) {

  .faq-policy-copy {
    columns: 1;
  }

}


@media (max-width: 650px) {

  .faq-hero {
    padding: 46px 0 40px;
  }

  .faq-lead {
    font-size: 14px;
  }

  .faq-policy-card,
  .faq-list-inner {
    width: calc(100% - 30px);
  }

  .faq-policy-card {
    padding: 28px 22px;
  }

  .faq-contact-inner {
    flex-direction: column;

    text-align: center;
  }

}/* ==========================================================
   BIOPEPDNA — MY ACCOUNT PAGE
========================================================== */

.account-page {
  width: 100%;
  background: #ffffff;
}


/* ==========================================================
   REMOVE DEFAULT PAGE WRAPPER SPACING
========================================================== */

body.woocommerce-account .standard-page,
body.woocommerce-account .standard-page-inner,
body.woocommerce-account .standard-page-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   ACCOUNT HERO
========================================================== */

.account-hero {
  position: relative;
  width: 100%;

  overflow: hidden;

  padding: 48px 0 42px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.account-hero::after {
  content: "";

  position: absolute;

  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.account-hero-inner {
  position: relative;
  z-index: 2;

  width: min(820px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.account-eyebrow {
  margin: 0 0 14px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.account-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.account-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 0;

  background: #89b3ca;
}


/* ==========================================================
   ACCOUNT CONTENT
========================================================== */

.account-content {
  padding: 38px 0 68px;
}


.account-shell {
  width: min(1180px, calc(100% - 70px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    220px minmax(0, 1fr);

  gap: 44px;

  align-items: start;
}


/* ==========================================================
   ACCOUNT SIDEBAR
========================================================== */

.account-sidebar {
  background: transparent;

  border: 0;
  border-radius: 0;

  box-shadow: none;

  overflow: visible;
}


.account-sidebar
.woocommerce-MyAccount-navigation {
  width: 100%;

  float: none;
}


.account-sidebar
.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;

  list-style: none;

  border-top: 1px solid rgba(15, 42, 68, 0.08);
}


.account-sidebar
.woocommerce-MyAccount-navigation li {
  margin: 0;

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.account-sidebar
.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.account-sidebar
.woocommerce-MyAccount-navigation a {
  display: block;

  padding: 15px 14px;

  color: #4b677c;

  background: transparent;

  font-size: 14px;
  font-weight: 500;

  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}


.account-sidebar
.woocommerce-MyAccount-navigation a:hover {
  color: var(--navy);

  background: #f5fafc;

  padding-left: 18px;
}


.account-sidebar
.woocommerce-MyAccount-navigation
.is-active a {
  color: var(--navy);

  background:
    linear-gradient(
      90deg,
      #eaf6fc 0%,
      #f7fbfd 100%
    );

  border-left: 3px solid #76abc7;

  font-weight: 600;
}


/* ==========================================================
   ACCOUNT MAIN CONTENT
========================================================== */

.account-main {
  min-height: 0;

  padding: 8px 0 0;

  background: transparent;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}


.account-main
.woocommerce-MyAccount-content {
  width: 100%;

  float: none;
}


.account-main p {
  max-width: 780px;

  margin-top: 0;

  color: #4e6b81;

  font-size: 15px;
  line-height: 1.8;
}


.account-main p + p {
  margin-top: 18px;
}


.account-main strong {
  color: var(--navy);
}


.account-main a {
  color: #315f7d;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   ACCOUNT HEADINGS
========================================================== */

.account-main h2,
.account-main h3 {
  color: var(--navy);

  font-family: var(--serif);
  font-weight: 500;
}


/* ==========================================================
   ACCOUNT TABLES
========================================================== */

.account-main table {
  width: 100%;

  border-collapse: collapse;

  background: #ffffff;
}


.account-main table th,
.account-main table td {
  padding: 14px 12px;

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);

  text-align: left;
}


/* ==========================================================
   ACCOUNT BUTTONS
========================================================== */

.account-main
.woocommerce-button,
.account-main
.button {
  padding: 12px 20px !important;

  background: var(--navy) !important;
  color: #ffffff !important;

  border: 0 !important;
  border-radius: 3px !important;

  text-decoration: none !important;

  font-size: 11px !important;
  font-weight: 700 !important;

  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}


/* ==========================================================
   ACCOUNT FORMS
========================================================== */

.account-main input.input-text,
.account-main input[type="text"],
.account-main input[type="email"],
.account-main input[type="password"] {
  width: 100%;

  min-height: 48px;

  padding: 0 14px;

  background: #f8fbfd;

  border: 1px solid #d3e1e8;
  border-radius: 2px;

  box-shadow: none;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 850px) {

  .account-shell {
    grid-template-columns: 1fr;

    gap: 28px;
  }

}


@media (max-width: 650px) {

  .account-hero {
    padding: 42px 0 38px;
  }

  .account-shell {
    width: calc(100% - 30px);
  }

}
/* ==========================================================
   BIOPEPDNA — CONTACT PAGE
========================================================== */

.contact-page {
  background: #ffffff;
}


/* ==========================================================
   CONTACT HERO
========================================================== */

.contact-hero {
  position: relative;
  overflow: hidden;

  padding: 58px 0 54px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.contact-hero::after {
  content: "";

  position: absolute;

  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.contact-hero-inner {
  position: relative;
  z-index: 2;

  width: min(850px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.contact-eyebrow {
  margin: 0 0 15px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.20em;
  text-transform: uppercase;
}


.contact-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.contact-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 20px;

  background: #89b3ca;
}


.contact-hero-copy {
  max-width: 700px;

  margin: 0 auto;

  color: #4e6b81;

  font-size: 16px;
  line-height: 1.7;
}


/* ==========================================================
   CONTACT CONTENT
========================================================== */

.contact-content {
  padding: 52px 0 76px;
}


.contact-card {
  width: min(760px, calc(100% - 50px));

  margin: 0 auto;

  padding: 50px 58px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  border: 1px solid rgba(15, 42, 68, 0.11);
  border-radius: 3px;

  box-shadow:
    0 16px 42px rgba(34, 68, 91, 0.06);
}


.contact-card-eyebrow {
  margin: 0 0 10px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.contact-card h2 {
  margin: 0 0 16px;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;

  line-height: 1.1;
}


.contact-card-copy {
  max-width: 610px;

  margin: 0 auto 32px;

  color: #60788c;

  font-size: 14px;
  line-height: 1.75;
}


/* ==========================================================
   EMAIL
========================================================== */

.contact-email-block {
  margin: 0 auto 28px;

  padding: 25px 20px;

  border-top: 1px solid rgba(15, 42, 68, 0.08);
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.contact-email-label {
  display: block;

  margin-bottom: 8px;

  color: #789aae;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.18em;
}


.contact-email {
  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;

  text-decoration: none;

  transition: color 0.2s ease;
}


.contact-email:hover {
  color: #5f94b2;
}


/* ==========================================================
   EMAIL BUTTON
========================================================== */

.contact-email-button {
  display: inline-flex;

  min-width: 220px;
  min-height: 52px;

  align-items: center;
  justify-content: center;

  padding: 0 28px;

  background: var(--navy);

  color: #ffffff;

  border-radius: 2px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.contact-email-button:hover {
  background: #173d5d;

  color: #ffffff;

  transform: translateY(-1px);
}


/* ==========================================================
   CONTACT NOTE
========================================================== */

.contact-note {
  margin-top: 34px;

  padding-top: 22px;

  border-top: 1px solid rgba(15, 42, 68, 0.08);
}


.contact-note p {
  max-width: 590px;

  margin: 0 auto;

  color: #7890a1;

  font-size: 12px;
  line-height: 1.7;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

  .contact-hero {
    padding: 46px 0 42px;
  }

  .contact-hero-copy {
    font-size: 14px;
  }

  .contact-content {
    padding: 34px 0 55px;
  }

  .contact-card {
    width: calc(100% - 30px);

    padding: 38px 24px;
  }

  .contact-card h2 {
    font-size: 32px;
  }

  .contact-email-button {
    width: 100%;
  }

}
/* ==========================================================
   BIOPEPDNA — PRIVACY POLICY
========================================================== */

.privacy-page {
  background: #ffffff;
}


/* HERO */

.privacy-hero {
  position: relative;
  overflow: hidden;

  padding: 58px 0 62px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.privacy-hero::after {
  content: "";

  position: absolute;

  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.privacy-hero-inner {
  position: relative;
  z-index: 2;

  width: min(850px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.privacy-eyebrow {
  margin: 0 0 14px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.19em;
  text-transform: uppercase;
}


.privacy-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.privacy-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 20px;

  background: #89b3ca;
}


.privacy-lead {
  max-width: 730px;

  margin: 0 auto;

  color: #4e6b81;

  font-size: 15px;
  line-height: 1.75;
}


.privacy-updated {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-top: 24px;

  color: #617d91;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.13em;
}


.privacy-updated-icon {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;
}


.privacy-updated-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: #6ea5c3;

  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   POLICY SHELL
========================================================== */

.privacy-content {
  padding: 0 0 78px;

  background:
    linear-gradient(
      180deg,
      #f8fbfd 0%,
      #ffffff 180px
    );
}


.privacy-shell {
  width: min(1220px, calc(100% - 70px));

  margin: -34px auto 0;

  position: relative;
  z-index: 4;

  display: grid;

  grid-template-columns:
    245px minmax(0, 1fr);

  background: #ffffff;

  border: 1px solid rgba(15, 42, 68, 0.10);
  border-radius: 3px;

  box-shadow:
    0 18px 45px rgba(34, 68, 91, 0.07);
}


/* ==========================================================
   SIDE NAV
========================================================== */

.privacy-sidebar {
  padding: 34px 26px;

  border-right:
    1px solid rgba(15, 42, 68, 0.08);

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #ffffff 100%
    );
}


.privacy-nav {
  position: sticky;
  top: 30px;

  display: grid;

  gap: 2px;
}


.privacy-nav a {
  display: grid;

  grid-template-columns: 28px 1fr;

  gap: 7px;

  padding: 10px 4px;

  color: #536d81;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.privacy-nav a span {
  color: #78aeca;

  font-size: 9px;
}


.privacy-nav a:hover {
  color: var(--navy);

  transform: translateX(2px);
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.privacy-main {
  padding: 42px 46px 48px;
}


.privacy-section {
  scroll-margin-top: 30px;

  padding: 0 0 34px;
  margin: 0 0 34px;

  border-bottom:
    1px solid rgba(15, 42, 68, 0.08);
}


.privacy-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;

  border-bottom: 0;
}


.privacy-section-heading {
  display: flex;
  align-items: baseline;

  gap: 12px;

  margin-bottom: 18px;
}


.privacy-section-number {
  color: #76abc7;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.08em;
}


.privacy-section h2 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;

  line-height: 1.1;
}


.privacy-section p {
  margin: 0 0 16px;

  color: #536f84;

  font-size: 14px;
  line-height: 1.8;
}


.privacy-section strong {
  color: var(--navy);
}


/* ==========================================================
   LISTS
========================================================== */

.privacy-list {
  margin: 8px 0 20px;

  padding-left: 20px;
}


.privacy-list li {
  margin-bottom: 8px;

  color: #536f84;

  font-size: 14px;
  line-height: 1.6;
}


.privacy-list li::marker {
  color: #79b4d3;
}


.privacy-list-columns {
  columns: 2;

  column-gap: 46px;
}


.privacy-list-columns li {
  break-inside: avoid;
}


/* ==========================================================
   NOTES
========================================================== */

.privacy-note {
  margin-top: 18px !important;

  padding: 13px 15px;

  color: #607b8f !important;

  background: #f4f9fc;

  border-left: 2px solid #8bbbd2;

  font-style: italic;
}


/* ==========================================================
   CONTACT CARD
========================================================== */

.privacy-contact-card {
  margin-top: 24px;

  padding: 20px 22px;

  display: flex;
  align-items: center;

  gap: 18px;

  background:
    linear-gradient(
      90deg,
      #f6fbfe 0%,
      #eef8fd 100%
    );

  border: 1px solid rgba(15, 42, 68, 0.09);

  border-radius: 3px;
}


.privacy-contact-icon {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #dff1fb;

  color: #315f7d;
}


.privacy-contact-icon svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.privacy-contact-card strong {
  display: block;

  margin-bottom: 4px;
}


.privacy-contact-card p {
  margin: 0;
}


.privacy-contact-card a {
  color: #315f7d;

  font-weight: 600;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

  .privacy-shell {
    grid-template-columns: 1fr;
  }

  .privacy-sidebar {
    border-right: 0;

    border-bottom:
      1px solid rgba(15, 42, 68, 0.08);
  }

  .privacy-nav {
    position: static;

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

}


@media (max-width: 700px) {

  .privacy-hero {
    padding: 46px 0 52px;
  }

  .privacy-shell {
    width: calc(100% - 30px);

    margin-top: -22px;
  }

  .privacy-sidebar {
    padding: 24px 20px;
  }

  .privacy-nav {
    grid-template-columns: 1fr;
  }

  .privacy-main {
    padding: 30px 22px 36px;
  }

  .privacy-list-columns {
    columns: 1;
  }

  .privacy-contact-card {
    align-items: flex-start;
  }

}
/* ==========================================================
   BIOPEPDNA — SEARCH PAGE
========================================================== */

.search-page {
  background: #ffffff;
}


/* HERO */

.search-hero {
  position: relative;
  overflow: hidden;

  padding: 52px 0 46px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(175, 216, 239, 0.30),
      rgba(175, 216, 239, 0) 38%
    ),
    linear-gradient(
      105deg,
      #ffffff 0%,
      #fbfdff 48%,
      #eef8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}


.search-hero::after {
  content: "";

  position: absolute;

  top: -150px;
  right: -70px;

  width: 520px;
  height: 650px;

  background-image: url("../images/hero-dna.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.12;

  pointer-events: none;
}


.search-hero-inner {
  position: relative;
  z-index: 2;

  width: min(820px, calc(100% - 50px));

  margin: 0 auto;

  text-align: center;
}


.search-eyebrow,
.search-results-eyebrow {
  margin: 0 0 12px;

  color: #789aae;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.search-hero h1 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 500;

  line-height: 0.96;
  letter-spacing: -0.03em;
}


.search-title-rule {
  display: block;

  width: 46px;
  height: 1px;

  margin: 26px auto 20px;

  background: #89b3ca;
}


.search-lead {
  margin: 0;

  color: #4e6b81;

  font-size: 15px;
}


/* CONTENT */

.search-content {
  padding: 42px 0 72px;
}


.search-shell {
  width: min(1180px, calc(100% - 70px));

  margin: 0 auto;
}


/* SEARCH FORM */

.bio-search-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 160px;

  gap: 12px;

  max-width: 820px;

  margin: 0 auto 44px;
}


.bio-search-form input {
  min-height: 54px;

  padding: 0 18px;

  background: #f8fbfd;

  border: 1px solid #d3e1e8;
  border-radius: 2px;

  color: var(--navy);

  font-size: 14px;
}


.bio-search-form button {
  border: 0;
  border-radius: 2px;

  background: var(--navy);

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.13em;
}


/* RESULTS HEADING */

.search-results-heading {
  margin-bottom: 26px;

  text-align: center;
}


.search-results-heading h2,
.search-empty h2 {
  margin: 0;

  color: var(--navy);

  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
}


/* RESULT GRID */

.search-results-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;
}


.search-result-card {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  border: 1px solid rgba(15, 42, 68, 0.10);
  border-radius: 3px;

  overflow: hidden;

  box-shadow:
    0 10px 28px rgba(34, 68, 91, 0.05);
}


.search-result-image {
  display: block;

  background: #f8fbfd;
}


.search-result-image img {
  width: 100%;
  height: 260px;

  display: block;

  object-fit: contain;
}


.search-result-copy {
  padding: 22px;
}


.search-result-type {
  margin: 0 0 8px !important;

  color: #789aae !important;

  font-size: 9px !important;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.search-result-copy h3 {
  margin: 0 0 12px;

  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
}


.search-result-copy h3 a {
  color: var(--navy);

  text-decoration: none;
}


.search-result-copy p {
  color: #60788c;

  font-size: 13px;
  line-height: 1.65;
}


.search-result-link {
  display: inline-block;

  margin-top: 8px;

  color: #315f7d;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.11em;

  text-decoration: none;
}


/* EMPTY */

.search-empty {
  padding: 54px 20px;

  text-align: center;

  border: 1px solid rgba(15, 42, 68, 0.09);

  background: #fbfdff;
}


.search-empty p:last-child {
  color: #60788c;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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

}


@media (max-width: 650px) {

  .search-shell {
    width: calc(100% - 30px);
  }

  .bio-search-form {
    grid-template-columns: 1fr;
  }

  .search-results-grid {
    grid-template-columns: 1fr;
  }

}
/* ==========================================================
   BIOPEPDNA — HEADER + SHIPPING TICKER POLISH
   White moving promo bar + pale-blue biotech/cell header
========================================================== */

/* ==========================================================
   WHITE SHIPPING TICKER
========================================================== */

.shipping-ticker {
  position: relative;
  z-index: 1100;

  width: 100%;
  overflow: hidden;

  background: #ffffff;
  color: var(--navy);

  border-top: 1px solid rgba(15, 47, 75, 0.08);
  border-bottom: 1px solid rgba(15, 47, 75, 0.12);
}

.shipping-ticker-track {
  display: flex;
  width: max-content;

  animation: bioTicker 27s linear infinite;
  will-change: transform;
}

.shipping-ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  gap: 25px;
  padding: 11px 32px;

  white-space: nowrap;
}

.shipping-ticker span {
  color: #123653;

  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shipping-ticker .ticker-mark {
  color: #78a9c5;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.82;
}

.shipping-ticker .ticker-detail {
  color: #49677e;
  font-weight: 600;
}

.shipping-ticker .ticker-icon,
.shipping-ticker .ticker-shield,
.shipping-ticker .ticker-truck {
  color: #456c88;
  font-size: 16px;
  letter-spacing: 0;
}

@keyframes bioTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.shipping-ticker:hover .shipping-ticker-track {
  animation-play-state: paused;
}

/* ==========================================================
   LIGHT BLUE BIOTECH HEADER
========================================================== */

.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 28%,
      rgba(176, 220, 244, 0.46) 0%,
      rgba(218, 239, 250, 0.24) 27%,
      rgba(255, 255, 255, 0) 49%
    ),
    radial-gradient(
      circle at 68% 86%,
      rgba(203, 233, 248, 0.24) 0%,
      rgba(255, 255, 255, 0) 34%
    ),
    linear-gradient(
      102deg,
      #ffffff 0%,
      #fbfdff 42%,
      #edf8fd 100%
    );

  border-bottom: 1px solid rgba(15, 42, 68, 0.09);

  box-shadow:
    0 8px 26px rgba(34, 68, 91, 0.025);
}

/* ==========================================================
   FADED CELL / MOLECULE FIELD — PURE CSS
========================================================== */

.site-header::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: -86px;
  right: -34px;

  width: 690px;
  height: 450px;

  opacity: 0.22;

  background-image:
    radial-gradient(circle at 8% 30%, rgba(91, 157, 192, 0.40) 0 4px, transparent 5px),
    radial-gradient(circle at 17% 14%, rgba(91, 157, 192, 0.26) 0 9px, transparent 10px),
    radial-gradient(circle at 25% 46%, rgba(91, 157, 192, 0.34) 0 6px, transparent 7px),
    radial-gradient(circle at 37% 25%, rgba(91, 157, 192, 0.25) 0 12px, transparent 13px),
    radial-gradient(circle at 47% 55%, rgba(91, 157, 192, 0.35) 0 7px, transparent 8px),
    radial-gradient(circle at 58% 18%, rgba(91, 157, 192, 0.28) 0 8px, transparent 9px),
    radial-gradient(circle at 67% 43%, rgba(91, 157, 192, 0.31) 0 13px, transparent 14px),
    radial-gradient(circle at 78% 23%, rgba(91, 157, 192, 0.24) 0 6px, transparent 7px),
    radial-gradient(circle at 89% 47%, rgba(91, 157, 192, 0.30) 0 10px, transparent 11px),
    radial-gradient(circle at 96% 18%, rgba(91, 157, 192, 0.24) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 76%, rgba(91, 157, 192, 0.24) 0 7px, transparent 8px),
    radial-gradient(circle at 32% 87%, rgba(91, 157, 192, 0.30) 0 11px, transparent 12px),
    radial-gradient(circle at 54% 82%, rgba(91, 157, 192, 0.23) 0 6px, transparent 7px),
    radial-gradient(circle at 73% 78%, rgba(91, 157, 192, 0.29) 0 9px, transparent 10px),
    radial-gradient(circle at 91% 84%, rgba(91, 157, 192, 0.23) 0 7px, transparent 8px);

  pointer-events: none;
}

/* Fine connecting strokes layered behind the navigation */
.site-header::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -20px;
  right: -15px;

  width: 665px;
  height: 360px;

  opacity: 0.10;

  background:
    linear-gradient(28deg, transparent 0 25%, #6aa7c7 25.3% 25.6%, transparent 25.9% 100%),
    linear-gradient(-22deg, transparent 0 38%, #6aa7c7 38.3% 38.6%, transparent 38.9% 100%),
    linear-gradient(48deg, transparent 0 53%, #6aa7c7 53.3% 53.6%, transparent 53.9% 100%),
    linear-gradient(-46deg, transparent 0 67%, #6aa7c7 67.3% 67.6%, transparent 67.9% 100%),
    linear-gradient(17deg, transparent 0 78%, #6aa7c7 78.3% 78.6%, transparent 78.9% 100%);

  transform: rotate(-4deg);
  pointer-events: none;
}

/* Keep the real header content above the decorative layers */
.header-container,
.site-header .container.header-container,
.header-trust {
  position: relative;
  z-index: 2;
}

/* ==========================================================
   NAVIGATION MICRO-INTERACTIONS
========================================================== */

.main-nav a {
  transition:
    color 0.20s ease,
    transform 0.20s ease,
    opacity 0.20s ease;
}

.main-nav a:hover {
  color: #477894;
  transform: translateY(-1px);
}

.main-nav a::after {
  background: #6fa9c7;
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav a[aria-current="page"]::after {
  width: 100%;
}

/* ==========================================================
   HEADER ICON MICRO-INTERACTIONS
========================================================== */

.header-icon,
.header-icon svg {
  transition:
    transform 0.20s ease,
    color 0.20s ease,
    stroke 0.20s ease,
    opacity 0.20s ease;
}

.header-icon:hover {
  color: #557f99;
  opacity: 0.78;
  transform: translateY(-2px);
}

/* ==========================================================
   TRUST STRIP — KEEP CLEAN + GLASSY
========================================================== */

.header-trust {
  background: rgba(255, 255, 255, 0.70);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ==========================================================
   RESPONSIVE HEADER + TICKER
========================================================== */

@media (max-width: 900px) {
  .site-header::before {
    width: 470px;
    height: 330px;

    right: -150px;
    top: -42px;

    opacity: 0.15;
  }

  .site-header::after {
    width: 430px;
    height: 270px;

    right: -130px;
    top: 0;

    opacity: 0.065;
  }
}

@media (max-width: 700px) {
  .shipping-ticker-group {
    gap: 18px;
    padding: 10px 20px;
  }

  .shipping-ticker span {
    font-size: 9px;
    letter-spacing: 0.10em;
  }

  .shipping-ticker-track {
    animation-duration: 22s;
  }

  .site-header {
    background:
      radial-gradient(
        circle at 94% 22%,
        rgba(176, 220, 244, 0.34),
        rgba(255, 255, 255, 0) 40%
      ),
      linear-gradient(
        100deg,
        #ffffff 0%,
        #f9fcfe 60%,
        #edf8fd 100%
      );
  }

  .site-header::before {
    width: 330px;
    height: 260px;

    right: -150px;
    top: -32px;

    opacity: 0.12;
  }

  .site-header::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shipping-ticker-track {
    animation: none;
  }

  .main-nav a,
  .header-icon,
  .header-icon svg {
    transition: none;
  }
}
/* ==========================================================
   FORCE HEADER — ICY BLUE + FADED CELL NETWORK
   KEEP THIS AT THE VERY BOTTOM OF MAIN.CSS
========================================================== */

.site-header {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 88% 32%,
      rgba(142, 205, 239, 0.42) 0%,
      rgba(190, 226, 246, 0.30) 24%,
      rgba(226, 243, 252, 0.16) 45%,
      transparent 66%
    ),
    linear-gradient(
      100deg,
      #fafdff 0%,
      #f4faff 38%,
      #e7f5fc 100%
    ) !important;

  border-bottom: 1px solid rgba(80, 139, 174, 0.16) !important;
}
/* ==========================================================
   BIOPEPDNA — CLEAN SCIENTIFIC HEADER
   Light blue gradient + subtle molecular detail
========================================================== */


/* ==========================================================
   HEADER BASE
========================================================== */

.site-header {
  position: relative !important;
  z-index: 20 !important;

  overflow: visible !important;

  background:
    linear-gradient(
      100deg,
      #fbfdff 0%,
      #f5fbff 42%,
      #e5f5fc 100%
    ) !important;

  border-bottom: 1px solid rgba(15, 47, 75, 0.09) !important;
}


/* ==========================================================
   ACTUAL LOGO + NAVIGATION ROW
========================================================== */

.header-container,
.site-header .container.header-container {
  position: relative !important;

  /* IMPORTANT — prevents cart from being chopped off */
  overflow: visible !important;

  background:
    radial-gradient(
      circle at 89% 42%,
      rgba(163, 216, 243, 0.38) 0%,
      rgba(201, 232, 248, 0.22) 30%,
      transparent 62%
    ),
    linear-gradient(
      100deg,
      #fbfdff 0%,
      #f6fbfe 40%,
      #e5f5fc 100%
    ) !important;
}


/* ==========================================================
   SUBTLE MOLECULAR / CHEMISTRY PATTERN
   Concentrated on right side only
========================================================== */

.header-container::before,
.site-header .container.header-container::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  right: 30px !important;

  width: 560px !important;
  height: 100% !important;

  z-index: 0 !important;

  opacity: 0.55 !important;

  pointer-events: none !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='260' viewBox='0 0 600 260'%3E%3Cg fill='none' stroke='%237eb9d8' stroke-width='1.2' opacity='.28'%3E%3Cpath d='M80 112 L112 93 L144 112 L144 149 L112 168 L80 149 Z'/%3E%3Cpath d='M144 112 L176 93 L208 112 L208 149 L176 168 L144 149'/%3E%3Cpath d='M208 112 L240 93 L272 112 L272 149 L240 168 L208 149'/%3E%3Cpath d='M272 112 L304 93 L336 112 L336 149 L304 168 L272 149'/%3E%3Cpath d='M336 112 L368 93 L400 112 L400 149 L368 168 L336 149'/%3E%3Cpath d='M400 112 L432 93 L464 112 L464 149 L432 168 L400 149'/%3E%3Cpath d='M112 93 L112 62 M176 93 L176 58 M240 93 L240 67 M304 93 L304 55 M368 93 L368 65 M432 93 L432 58'/%3E%3C/g%3E%3Cg fill='%237eb9d8' opacity='.32'%3E%3Ccircle cx='112' cy='93' r='3'/%3E%3Ccircle cx='144' cy='112' r='2.5'/%3E%3Ccircle cx='176' cy='93' r='3'/%3E%3Ccircle cx='208' cy='112' r='2.5'/%3E%3Ccircle cx='240' cy='93' r='3'/%3E%3Ccircle cx='272' cy='112' r='2.5'/%3E%3Ccircle cx='304' cy='93' r='3'/%3E%3Ccircle cx='336' cy='112' r='2.5'/%3E%3Ccircle cx='368' cy='93' r='3'/%3E%3Ccircle cx='400' cy='112' r='2.5'/%3E%3Ccircle cx='432' cy='93' r='3'/%3E%3Ccircle cx='464' cy='112' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.30) 15%,
      black 45%,
      black 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.30) 15%,
      black 45%,
      black 100%
    );
}


/* ==========================================================
   SOFT SCIENTIFIC DOTS
   Adds depth without giant "cell bubbles"
========================================================== */

.header-container::after,
.site-header .container.header-container::after {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  right: 0 !important;

  width: 520px !important;
  height: 100% !important;

  z-index: 0 !important;

  pointer-events: none !important;

  opacity: 0.42 !important;

  background:
    radial-gradient(
      circle at 20% 24%,
      rgba(91, 159, 196, 0.30) 0 3px,
      transparent 4px
    ),

    radial-gradient(
      circle at 37% 62%,
      rgba(91, 159, 196, 0.24) 0 4px,
      transparent 5px
    ),

    radial-gradient(
      circle at 54% 30%,
      rgba(91, 159, 196, 0.26) 0 3px,
      transparent 4px
    ),

    radial-gradient(
      circle at 69% 70%,
      rgba(91, 159, 196, 0.22) 0 4px,
      transparent 5px
    ),

    radial-gradient(
      circle at 84% 37%,
      rgba(91, 159, 196, 0.25) 0 3px,
      transparent 4px
    );
}


/* ==========================================================
   KEEP HEADER CONTENT ABOVE BACKGROUND
========================================================== */

.site-header .header-container > *,
.header-container .logo,
.header-container .main-nav,
.header-container .header-icons {
  position: relative !important;
  z-index: 5 !important;
}


/* ==========================================================
   CART / HEADER ICON PROTECTION
========================================================== */

.header-icons {
  position: relative !important;

  z-index: 10 !important;

  overflow: visible !important;

  padding-right: 18px !important;
}

.header-icons a,
.header-icons svg,
.header-icons .cart-count {
  position: relative;
  z-index: 11;
}


/* ==========================================================
   TRUST STRIP
========================================================== */

.site-header .header-trust {
  position: relative !important;
  z-index: 10 !important;

  background: rgba(255, 255, 255, 0.92) !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

  .header-container::before,
  .site-header .container.header-container::before {
    width: 440px !important;
    right: 0 !important;

    opacity: 0.40 !important;
  }

  .header-container::after,
  .site-header .container.header-container::after {
    width: 400px !important;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

  .site-header {
    background:
      linear-gradient(
        100deg,
        #fbfdff 0%,
        #e8f6fd 100%
      ) !important;
  }


  .header-container,
  .site-header .container.header-container {
    overflow: visible !important;

    background:
      linear-gradient(
        100deg,
        #fbfdff 0%,
        #e8f6fd 100%
      ) !important;
  }


  /* Hide detailed chemistry graphic on small screens */
  .header-container::before,
  .site-header .container.header-container::before {
    display: none !important;
  }


  /* Keep just a few faint dots */
  .header-container::after,
  .site-header .container.header-container::after {
    width: 220px !important;

    opacity: 0.25 !important;
  }


  .header-icons {
    padding-right: 8px !important;
  }

}
/* ==========================================================
   BIOPEPDNA — FINAL FULL-WIDTH SCIENCE HEADER
========================================================== */


/* FULL WIDTH HEADER AREA */

.site-header {
  position: relative !important;
  z-index: 20 !important;

  overflow: visible !important;

  width: 100% !important;

  background:
    linear-gradient(
      100deg,
      #fbfdff 0%,
      #f2faff 36%,
      #dff2fc 100%
    ) !important;

  border-bottom: 1px solid rgba(15, 42, 68, 0.09) !important;
}


/* ==========================================================
   FULL-WIDTH MOLECULAR ARTWORK
========================================================== */

.site-header::before {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 175px !important;

  pointer-events: none !important;

  opacity: 1 !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='240' viewBox='0 0 1500 240'%3E%3Cg fill='none' stroke='%2371afd1' stroke-width='1.3' opacity='.38'%3E%3Cpath d='M710 95 L750 72 L790 95 L790 141 L750 164 L710 141 Z'/%3E%3Cpath d='M790 95 L830 72 L870 95 L870 141 L830 164 L790 141 Z'/%3E%3Cpath d='M870 95 L910 72 L950 95 L950 141 L910 164 L870 141 Z'/%3E%3Cpath d='M950 95 L990 72 L1030 95 L1030 141 L990 164 L950 141 Z'/%3E%3Cpath d='M1030 95 L1070 72 L1110 95 L1110 141 L1070 164 L1030 141 Z'/%3E%3Cpath d='M1110 95 L1150 72 L1190 95 L1190 141 L1150 164 L1110 141 Z'/%3E%3Cpath d='M1190 95 L1230 72 L1270 95 L1270 141 L1230 164 L1190 141 Z'/%3E%3Cpath d='M1270 95 L1310 72 L1350 95 L1350 141 L1310 164 L1270 141 Z'/%3E%3Cpath d='M750 72 L750 38 M830 72 L830 32 M910 72 L910 42 M990 72 L990 34 M1070 72 L1070 40 M1150 72 L1150 30 M1230 72 L1230 40 M1310 72 L1310 34'/%3E%3C/g%3E%3Cg fill='%2371afd1' opacity='.48'%3E%3Ccircle cx='750' cy='72' r='3.5'/%3E%3Ccircle cx='790' cy='95' r='3'/%3E%3Ccircle cx='830' cy='72' r='3.5'/%3E%3Ccircle cx='870' cy='95' r='3'/%3E%3Ccircle cx='910' cy='72' r='3.5'/%3E%3Ccircle cx='950' cy='95' r='3'/%3E%3Ccircle cx='990' cy='72' r='3.5'/%3E%3Ccircle cx='1030' cy='95' r='3'/%3E%3Ccircle cx='1070' cy='72' r='3.5'/%3E%3Ccircle cx='1110' cy='95' r='3'/%3E%3Ccircle cx='1150' cy='72' r='3.5'/%3E%3Ccircle cx='1190' cy='95' r='3'/%3E%3Ccircle cx='1230' cy='72' r='3.5'/%3E%3Ccircle cx='1270' cy='95' r='3'/%3E%3Ccircle cx='1310' cy='72' r='3.5'/%3E%3Ccircle cx='1350' cy='95' r='3'/%3E%3Ccircle cx='1010' cy='200' r='5'/%3E%3Ccircle cx='1165' cy='192' r='4'/%3E%3Ccircle cx='1400' cy='180' r='5'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
}


/* extra blue glow on far right */

.site-header::after {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;

  top: 0 !important;
  right: 0 !important;

  width: 55% !important;
  height: 175px !important;

  background:
    radial-gradient(
      circle at 85% 40%,
      rgba(122, 197, 236, 0.28),
      transparent 58%
    ) !important;

  pointer-events: none !important;
}


/* ==========================================================
   REMOVE CONTAINER-BOUND BACKGROUND
========================================================== */

.header-container,
.site-header .container.header-container {
  position: relative !important;

  z-index: 3 !important;

  overflow: visible !important;

  background: transparent !important;
}


/* HEADER CONTENT ABOVE GRAPHIC */

.header-container .logo,
.header-container .main-nav,
.header-container .header-icons {
  position: relative !important;
  z-index: 5 !important;
}


/* ==========================================================
   CART — NEVER CLIP
========================================================== */

.header-icons {
  overflow: visible !important;

  padding-right: 18px !important;
}

.header-icon {
  overflow: visible !important;
}

.cart-count {
  z-index: 20 !important;
}


/* ==========================================================
   TRUST STRIP REMAINS CLEAN WHITE
========================================================== */

.site-header .header-trust {
  position: relative !important;
  z-index: 10 !important;

  background: rgba(255, 255, 255, 0.96) !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

  .site-header::before {
    height: 112px !important;

    background-size: auto 150px !important;
    background-position: 65% center !important;

    opacity: 0.72 !important;
  }


  .site-header::after {
    height: 112px !important;
  }

}
/* ==========================================================
   BIOPEPDNA — COMPACT PREMIUM HEADER
   Larger vertical logo + tighter nav + no dead space
========================================================== */


/* FULL HEADER BACKGROUND */

.site-header {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;

  background:
    linear-gradient(
      100deg,
      #fbfdff 0%,
      #f7fbfe 46%,
      #edf8fd 100%
    ) !important;

  border-bottom: 1px solid rgba(15, 42, 68, 0.08) !important;
}


/* ==========================================================
   MAIN HEADER ROW
========================================================== */

.header-container,
.site-header .container.header-container {
  width: min(1540px, calc(100% - 70px)) !important;

  min-height: 210px !important;

  margin: 0 auto !important;

  display: grid !important;

  /* THIS IS THE IMPORTANT PART:
     logo gets enough room but nav starts immediately after it */
  grid-template-columns:
    330px
    minmax(0, 1fr)
    145px !important;

  align-items: center !important;

  gap: 26px !important;

  position: relative !important;
  overflow: visible !important;

  background: transparent !important;
}


/* ==========================================================
   LOGO
========================================================== */

.header-container .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
}


.header-container .logo img {
  width: 300px !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: 190px !important;

  object-fit: contain !important;
  object-position: left center !important;
}


/* ==========================================================
   NAVIGATION
========================================================== */

.main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 58px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.main-nav a {
  position: relative !important;

  color: #102f4b !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}


.main-nav a:hover {
  color: #4f7e9b !important;

  transform: translateY(-1px);
}


.main-nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -12px;

  width: 0;
  height: 1px;

  background: #6da7c6;

  transform: translateX(-50%);

  transition: width 0.25s ease;
}


.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after,
.main-nav .current-menu-item a::after {
  width: 100%;
}


/* ==========================================================
   RIGHT-SIDE ICONS
========================================================== */

.header-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 26px !important;

  padding-right: 8px !important;

  overflow: visible !important;
}


.header-icon,
.header-icon svg {
  width: 26px !important;
  height: 26px !important;
}


.header-icon {
  position: relative !important;

  overflow: visible !important;
}


.header-icon svg {
  stroke: #102f4b !important;

  transition:
    transform 0.2s ease,
    stroke 0.2s ease !important;
}


.header-icon:hover svg {
  stroke: #5c8eab !important;

  transform: translateY(-2px);
}


/* CART COUNT */

.cart-count {
  position: absolute !important;

  top: -10px !important;
  right: -12px !important;

  min-width: 22px !important;
  height: 22px !important;

  padding: 0 6px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #102f4b !important;

  color: #ffffff !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  z-index: 20 !important;
}


/* ==========================================================
   SUBTLE MOLECULAR DETAIL
========================================================== */

.site-header::before {
  content: "" !important;

  position: absolute !important;

  top: 15px !important;
  right: 85px !important;

  width: 540px !important;
  height: 175px !important;

  pointer-events: none !important;

  opacity: 0.55 !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='180' viewBox='0 0 560 180'%3E%3Cg fill='none' stroke='%2378b5d5' stroke-width='1.2' opacity='.30'%3E%3Cpath d='M70 80 L105 60 L140 80 L140 120 L105 140 L70 120 Z'/%3E%3Cpath d='M140 80 L175 60 L210 80 L210 120 L175 140 L140 120'/%3E%3Cpath d='M210 80 L245 60 L280 80 L280 120 L245 140 L210 120'/%3E%3Cpath d='M280 80 L315 60 L350 80 L350 120 L315 140 L280 120'/%3E%3Cpath d='M350 80 L385 60 L420 80 L420 120 L385 140 L350 120'/%3E%3Cpath d='M420 80 L455 60 L490 80 L490 120 L455 140 L420 120'/%3E%3Cpath d='M105 60 L105 34 M175 60 L175 28 M245 60 L245 38 M315 60 L315 30 M385 60 L385 36 M455 60 L455 28'/%3E%3C/g%3E%3Cg fill='%2378b5d5' opacity='.34'%3E%3Ccircle cx='105' cy='60' r='3'/%3E%3Ccircle cx='140' cy='80' r='2.5'/%3E%3Ccircle cx='175' cy='60' r='3'/%3E%3Ccircle cx='210' cy='80' r='2.5'/%3E%3Ccircle cx='245' cy='60' r='3'/%3E%3Ccircle cx='280' cy='80' r='2.5'/%3E%3Ccircle cx='315' cy='60' r='3'/%3E%3Ccircle cx='350' cy='80' r='2.5'/%3E%3Ccircle cx='385' cy='60' r='3'/%3E%3Ccircle cx='420' cy='80' r='2.5'/%3E%3Ccircle cx='455' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;

  z-index: 0 !important;
}


/* KEEP REAL HEADER CONTENT ABOVE PATTERN */

.header-container,
.header-container .logo,
.header-container .main-nav,
.header-container .header-icons {
  position: relative !important;
  z-index: 5 !important;
}


/* ==========================================================
   TRUST STRIP
========================================================== */

.header-trust {
  position: relative !important;
  z-index: 10 !important;

  background: rgba(255, 255, 255, 0.96) !important;
}


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1300px) {

  .header-container,
  .site-header .container.header-container {
    width: min(1240px, calc(100% - 50px)) !important;

    grid-template-columns:
      275px
      minmax(0, 1fr)
      125px !important;

    gap: 20px !important;
  }


  .header-container .logo img {
    width: 255px !important;
  }


  .main-nav {
    gap: 36px !important;
  }


  .main-nav a {
    font-size: 12px !important;
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

  .header-container,
  .site-header .container.header-container {
    min-height: 150px !important;

    grid-template-columns:
      220px
      minmax(0, 1fr)
      110px !important;

    gap: 16px !important;
  }


  .header-container .logo img {
    width: 205px !important;
    max-height: 135px !important;
  }


  .main-nav {
    gap: 24px !important;
  }


  .main-nav a {
    font-size: 10px !important;
  }


  .site-header::before {
    width: 390px !important;

    opacity: 0.35 !important;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 800px) {

  .header-container,
  .site-header .container.header-container {
    width: calc(100% - 28px) !important;

    min-height: 110px !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
  }


  .header-container .logo img {
    width: 165px !important;
    max-height: 100px !important;
  }


  .main-nav {
    display: none !important;
  }


  .header-icons {
    gap: 18px !important;
  }


  .header-icon,
  .header-icon svg {
    width: 22px !important;
    height: 22px !important;
  }


  .site-header::before {
    display: none !important;
  }

}
/* ==========================================================
   HOMEPAGE — TRUST STRIP BELOW HERO
========================================================== */

.home-trust-strip {
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;

  background: #ffffff !important;

  border-top: 1px solid rgba(15, 42, 68, 0.08);
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}
/* ==========================================================
   BIOPEPDNA — ENHANCED HOMEPAGE TRUST STRIP
========================================================== */

.home-trust-strip {
    width: 100% !important;
    margin: 0 !important;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 100%
    ) !important;

    border-top: 1px solid rgba(15, 47, 75, 0.10) !important;
    border-bottom: 1px solid rgba(15, 47, 75, 0.10) !important;
}


/* FOUR-COLUMN LAYOUT */

.home-trust-strip .header-trust-inner {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* INDIVIDUAL FEATURE */

.home-trust-strip .trust-feature {
    min-height: 155px !important;

    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    padding: 30px 36px !important;

    border-right: 1px solid rgba(15, 47, 75, 0.11) !important;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease !important;
}

.home-trust-strip .trust-feature:last-child {
    border-right: none !important;
}


/* SUBTLE PREMIUM HOVER */

.home-trust-strip .trust-feature:hover {
    background: rgba(221, 241, 251, 0.32) !important;
}


/* ICON CIRCLE */

.home-trust-strip .trust-feature-icon {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1.5px solid rgba(15, 47, 75, 0.25) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.72) !important;
}


/* ICON ITSELF */

.home-trust-strip .trust-feature-icon svg {
    width: 25px !important;
    height: 25px !important;

    fill: none !important;
    stroke: #0f2f4b !important;
    stroke-width: 1.45 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* TEXT AREA */

.home-trust-strip .trust-feature-copy {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;
}


/* MAIN HEADING */

.home-trust-strip .trust-feature-copy strong {
    color: #102f4b !important;

    font-size: 15px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}


/* SUBTEXT */

.home-trust-strip .trust-feature-copy span {
    color: #58748c !important;

    font-size: 14px !important;
    line-height: 1.4 !important;

    font-weight: 400 !important;

    letter-spacing: 0.01em !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .home-trust-strip .header-trust-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-trust-strip .trust-feature {
        min-height: 130px !important;
        padding: 25px 28px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .home-trust-strip .header-trust-inner {
        grid-template-columns: 1fr 1fr !important;
    }

    .home-trust-strip .trust-feature {
        min-height: 125px !important;

        gap: 13px !important;

        padding: 20px 16px !important;
    }

    .home-trust-strip .trust-feature-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .home-trust-strip .trust-feature-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .home-trust-strip .trust-feature-copy strong {
        font-size: 12px !important;
        letter-spacing: 0.055em !important;
    }

    .home-trust-strip .trust-feature-copy span {
        font-size: 11px !important;
    }

}


/* ==========================================================
   BIOPEPDNA — FINAL SHOP GRID FIX
   WooCommerce adds clearfix pseudo-elements to ul.products.
   When ul.products is CSS Grid, those pseudo-elements can
   occupy grid cells and create the blank first slot.
========================================================== */

body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.post-type-archive-product ul.products.columns-4::before,
body.post-type-archive-product ul.products.columns-4::after {
    content: none !important;
    display: none !important;
}

/* Desktop: exactly 4 products across */
body.post-type-archive-product ul.products,
body.post-type-archive-product ul.products.columns-4 {
    width: min(1380px, calc(100% - 80px)) !important;
    max-width: 1380px !important;

    margin: 8px auto 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 18px !important;

    float: none !important;
    clear: both !important;
}

/* Products occupy only real grid cells */
body.post-type-archive-product ul.products > li.product,
body.post-type-archive-product ul.products.columns-4 > li.product {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    float: none !important;
    clear: none !important;

    grid-column: auto !important;
    grid-row: auto !important;

    left: auto !important;
    right: auto !important;
}

/* Neutralize WooCommerce's legacy first / last row classes */
body.post-type-archive-product ul.products > li.product.first,
body.post-type-archive-product ul.products > li.product.last {
    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;
    clear: none !important;
}


/* ==========================================================
   SHOP GRID — RESPONSIVE
========================================================== */

@media (max-width: 1000px) {

    body.post-type-archive-product ul.products,
    body.post-type-archive-product ul.products.columns-4 {
        width: calc(100% - 48px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 650px) {

    body.post-type-archive-product ul.products,
    body.post-type-archive-product ul.products.columns-4 {
        width: calc(100% - 30px) !important;
        grid-template-columns: 1fr !important;
    }

}


/* ==========================================================
   PRODUCT CARD BUTTON TEXT
========================================================== */

body.post-type-archive-product ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button:link,
body.post-type-archive-product ul.products li.product .button:visited,
body.post-type-archive-product ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product .button:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* ==========================================================
   SHOP — IMAGE + RESULT/SORTING FIX
========================================================== */

/* Give the result count + sorting bar its own row */
body.post-type-archive-product .woocommerce-result-count {
    float: left !important;
    position: relative !important;
    z-index: 5 !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    line-height: 46px !important;
}

body.post-type-archive-product .woocommerce-ordering {
    float: right !important;
    position: relative !important;
    z-index: 5 !important;
    margin: 0 0 28px !important;
}

/* Force product grid BELOW count/sorting */
body.post-type-archive-product ul.products,
body.post-type-archive-product ul.products.columns-4 {
    clear: both !important;
    margin-top: 0 !important;
}


/* ==========================================================
   PRODUCT IMAGES — SHOW FULL IMAGE, NO CROPPING
========================================================== */

body.post-type-archive-product ul.products li.product a img {
    width: 100% !important;

    /* IMPORTANT: stop forcing a fixed image height */
    height: auto !important;

    /* Keep all products visually consistent */
    aspect-ratio: 1 / 1 !important;

    /* Show the ENTIRE uploaded image */
    object-fit: contain !important;

    /* Center vial inside image area */
    object-position: center center !important;

    display: block !important;

    padding: 12px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    background: linear-gradient(
        180deg,
        #fbfdff 0%,
        #f6fbfe 100%
    ) !important;
}
/* ==========================================================
   SHOP TOP ROW — CLEAN RESULTS + SORTING POSITION
========================================================== */

body.post-type-archive-product .woocommerce-result-count {
    float: none !important;

    width: min(1380px, calc(100% - 80px)) !important;

    margin: 24px auto 0 !important;
    padding: 0 !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    line-height: 42px !important;
}


body.post-type-archive-product .woocommerce-ordering {
    float: none !important;

    width: min(1380px, calc(100% - 80px)) !important;

    margin: -42px auto 20px !important;
    padding: 0 !important;

    display: flex !important;
    justify-content: flex-end !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
}


/* Product grid starts immediately below top controls */

body.post-type-archive-product ul.products,
body.post-type-archive-product ul.products.columns-4 {
    clear: both !important;
    margin-top: 0 !important;
}