/*
Theme Name: Bio Advanced Peptides WC
Theme URI: https://puretypeptides.com
Author: CyberSecurity Doctors
Author URI: https://cybersecuritydoctors.com
Description: Custom WooCommerce theme for Bio Advanced Peptides — research-grade peptides for qualified laboratory buyers. Light UI with forest green and gold accents, wholesale-ready, COA/RUO aware.
Version: 1.5.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purety-peptides-wc
Tags: woocommerce, e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  --color-primary: #5B764A;
  --color-primary-hover: #6D865A;
  --color-primary-dark: #445A37;
  --color-primary-ink: #5B764A;
  --color-primary-ink-hover: #445A37;
  --color-on-primary: #FFFFFF;
  --color-accent: #A5B670;
  --color-accent-dark: #8FA05E;
  --color-bg: #F9EBD5;
  --color-bg-muted: #F4E4CD;
  --color-text: #1F2933;
  --color-text-muted: #6B7280;
  --color-border: #E4E4E1;

  --font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --container: 1200px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(31, 41, 51, .06);
  --shadow-md: 0 4px 16px rgba(31, 41, 51, .08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary-ink); text-decoration: none; }
a:hover, a:focus { color: var(--color-primary-ink-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); line-height: 1.25; color: var(--color-text); font-weight: 700; }
h1 { font-size: clamp(30px, 4vw, 40px); }
h2 { font-size: clamp(24px, 3vw, 28px); }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.section { padding: var(--space-7) 0; }
.section--muted { background: var(--color-bg-muted); }
.section__head { max-width: 720px; margin: 0 auto var(--space-5); text-align: center; }
.section__head p { color: var(--color-text-muted); margin-bottom: 0; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover, .btn--primary:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  text-decoration: none;
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}
.btn--secondary:hover, .btn--secondary:focus {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
}

.btn--accent { background: var(--color-accent); color: #1F2933; }
.btn--accent:hover, .btn--accent:focus { background: var(--color-accent-dark); color: #1F2933; text-decoration: none; }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.btn--ghost-light:hover, .btn--ghost-light:focus { background: #fff; color: var(--color-primary-ink); text-decoration: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   4. Announcement bar
   ========================================================================== */
.announcement-bar {
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 14px;
}
.announcement-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: 10px var(--space-4);
  text-align: center;
}
.announcement-bar a { color: var(--color-accent); font-weight: 600; text-decoration: underline; }
.announcement-bar a:hover, .announcement-bar a:focus { color: #fff; }
.announcement-bar__sep { opacity: .45; }
.announcement-bar__ruo { opacity: .8; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.site-branding { flex: 0 0 auto; }
.site-branding img { max-height: 52px; width: auto; }
.site-branding .site-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary-ink);
  letter-spacing: -.01em;
}
.site-branding .site-title a { color: inherit; text-decoration: none; }
.site-branding .site-title span { font-family: var(--font-base); font-size: 20px; color: var(--color-text); }

.main-navigation { flex: 1 1 auto; }
.main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-navigation a {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-primary-ink);
  border-bottom-color: var(--color-accent);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 14px;
  font-weight: 600;
}
.site-title a { display: inline-flex; align-items: center; gap: 10px; }
.site-title__mark { flex: 0 0 auto; height: 42px; display: block; }
.site-title__mark img { display: block; width: auto; height: 100%; }

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-bg);
}
.icon-button:hover, .icon-button:focus { border-color: var(--color-primary-ink); color: var(--color-primary); }
.icon-button svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.header-actions .btn { padding: 9px 16px; font-size: 14px; }

.header-actions a:not(.btn) { color: var(--color-text); }
.header-actions a:not(.btn):hover { color: var(--color-primary-ink); text-decoration: none; }
.header-actions .btn--primary { color: var(--color-on-primary); }
.header-actions .btn--primary:hover, .header-actions .btn--primary:focus { color: var(--color-on-primary); }
.header-actions .btn--secondary { color: var(--color-primary-ink); }
.header-actions .btn--secondary:hover, .header-actions .btn--secondary:focus { color: var(--color-on-primary); }
.header-actions .cart-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #1F2933;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
/* Full-bleed banner photograph with the copy laid over the left side. The hero
   image is generated with a deliberately calm, uncluttered left third, and a
   left-to-right scrim (.hero__media::after) lifts that area to near-white so
   the headline never fights the vials. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: 660px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(110deg, var(--color-bg-muted) 0%, #EEF3EE 44%, var(--color-bg) 100%);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .93) 38%,
    rgba(255, 255, 255, .48) 66%,
    rgba(255, 255, 255, .10) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  padding: var(--space-7) 0;
}

/* Announcement pill */
.hero-announce {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-4);
  padding: 10px 12px;
  border: 1px solid rgba(217, 164, 58, .55);
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  box-shadow: 0 16px 40px rgba(31, 77, 50, .18);
}
.hero-announce__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #1F2933;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-announce__text { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; }
.hero-announce a {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 58, .8);
  text-underline-offset: 3px;
}
.hero-announce a:hover, .hero-announce a:focus { color: var(--color-accent); }

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px 12px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: rgba(217, 164, 58, .12);
  color: var(--color-primary-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.hero__sub {
  max-width: 54ch;
  margin: var(--space-3) 0 0;
  font-size: 18px;
  color: var(--color-text-muted);
}
.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__link {
  color: var(--color-primary-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 58, .7);
  text-underline-offset: 4px;
}
.hero__link:hover, .hero__link:focus { color: var(--color-accent-dark); }

/* Three small reassurance cards under the hero copy. */
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.proof__item {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
}
.proof strong { display: block; font-size: 14px; color: var(--color-text); }
.proof span { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-muted); }

/* ==========================================================================
   7. Trust strip
   ========================================================================== */
/* Pulled up so the card overlaps the bottom edge of the hero. */
.strip { position: relative; z-index: 2; margin-top: -48px; }
.strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}
.strip__item { padding: 20px; border-right: 1px solid var(--color-border); }
.strip__item:last-child { border-right: 0; }
.strip strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--color-text); }
.strip span { color: var(--color-text-muted); font-size: 14px; }

/* ==========================================================================
   7b. Research category grid
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.category {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 212px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.category:hover, .category:focus {
  transform: translateY(-3px);
  border-color: rgba(217, 164, 58, .65);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.category__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .95), transparent 32%),
    linear-gradient(145deg, rgba(61, 154, 99, .16), rgba(217, 164, 58, .18));
  box-shadow: inset 0 0 0 1px rgba(61, 154, 99, .16), 0 10px 22px rgba(31, 41, 51, .07);
}
.category__icon svg { display: block; width: 40px; height: 40px; overflow: visible; }
.category__icon path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category__icon circle { fill: #fff; stroke: var(--color-primary); stroke-width: 3; }
.category__icon circle:nth-of-type(2n) { fill: var(--color-accent); stroke: var(--color-accent-dark); }
.category__body { display: block; }
.category h3 { margin: var(--space-4) 0 6px; font-size: 20px; line-height: 1.15; }
.category p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.category__link {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-accent-dark);
  font-size: 14px;
  font-weight: 700;
}

.section__cta { text-align: center; margin-top: var(--space-5); margin-bottom: 0; }

/* ==========================================================================
   7c. Quality split panel
   ========================================================================== */
.kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
}
.lab-panel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}
.lab-panel picture { display: block; }
.lab-panel img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.split__body h2 { font-family: var(--font-display); margin-top: 0; }
.split__body > p { color: var(--color-text-muted); }
.split__cta { margin: var(--space-5) 0 0; }

.check-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.check-list li { display: flex; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.check-list li:last-child { border-bottom: 0; }
.check-list__mark {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(61, 154, 99, .14);
  color: var(--color-primary-ink);
  font-size: 13px;
  font-weight: 700;
}
.check-list b { display: block; margin-bottom: 2px; color: var(--color-text); }
.check-list li > span:last-child { color: var(--color-text-muted); font-size: 15px; }

/* ==========================================================================
   7d. Guidance cards
   ========================================================================== */
.editorial { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.article {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.article small {
  color: var(--color-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article h3 { margin: var(--space-2) 0; font-size: 20px; line-height: 1.2; }
.article p { flex: 1 1 auto; color: var(--color-text-muted); font-size: 15px; }
.article__link { color: var(--color-accent-dark); font-size: 14px; font-weight: 700; }

/* ==========================================================================
   7e. Newsletter band
   ========================================================================== */
.newsletter__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.newsletter__inner h2 { font-family: var(--font-display); margin-top: 0; }
.newsletter__inner > p { color: var(--color-text-muted); }
.newsletter__form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}
.newsletter__form input[type="email"] {
  flex: 1 1 auto;
  max-width: 360px;
  padding: 12px 14px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(61, 154, 99, .28);
}
.newsletter__note { margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-text-muted); }

/* ==========================================================================
   8. Grids & cards
   ========================================================================== */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: 15px; flex: 1 1 auto; }
.card .btn { align-self: flex-start; margin-top: var(--space-3); }
.card__rule { width: 40px; height: 3px; background: var(--color-accent); border-radius: 2px; margin-bottom: var(--space-3); }

/* ==========================================================================
   9. Quality section
   ========================================================================== */
/* The copy and the checklist share the left column; the photograph fills the
   right one. `align-items: stretch` plus `height: 100%` on the image makes the
   photo match the left column's height exactly, so the two sides always end
   level and no dead space opens up beside the shorter one. */
.quality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.quality__content { align-self: start; }
.quality__media {
  display: block;
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
/* The image is taken out of the flow on purpose. The grid row is auto-sized, so
   while the image contributes its own height the row can never be shorter than
   the image -- height: 100% on an in-flow image is circular and resolves to its
   intrinsic height. Absolutely positioning it means the row is sized by the copy
   column alone and the photograph is then cropped to whatever that height is. */
.quality__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.quality__panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.quality__panel ul { list-style: none; padding: 0; margin: 0; }
.quality__panel li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.quality__panel li:last-child { border-bottom: 0; }
.quality__panel li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ==========================================================================
   10. Wholesale band
   ========================================================================== */
.wholesale-band { background: var(--color-primary-dark); color: #fff; padding: var(--space-7) 0; }
.wholesale-band h2 { color: #fff; font-family: var(--font-display); }
.wholesale-band p { color: rgba(255, 255, 255, .85); max-width: 640px; }
.wholesale-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: center; }
.wholesale-band .btn-row { justify-content: flex-end; }

/* ==========================================================================
   11. RUO notice
   ========================================================================== */
.ruo-notice {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(217, 164, 58, .08);
  color: var(--color-primary-ink);
  font-size: 14px;
  font-weight: 600;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer { background: var(--color-bg-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.compliance-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.quality-network {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.quality-network p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 15px; }
.disclaimer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.disclaimer {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.disclaimer p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6; }
.disclaimer--accent { border-color: rgba(217, 164, 58, .55); background: rgba(217, 164, 58, .07); }
.compliance-block h4 { margin: 0; }
.site-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-6); }
.site-footer h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary-ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--color-text); font-size: 15px; }
.site-footer a:hover { color: var(--color-primary-ink); }
.site-footer__about p { color: var(--color-text-muted); font-size: 15px; max-width: 340px; }
.site-footer__brand { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-primary-ink); margin-bottom: var(--space-2); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   13. WooCommerce
   ========================================================================== */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error { border-top-color: var(--color-primary); border-radius: var(--radius-sm); }

.shop-hero { background: var(--color-bg-muted); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.shop-hero h1 { margin-bottom: var(--space-2); font-family: var(--font-display); }
.shop-hero p { color: var(--color-text-muted); margin: 0; max-width: 680px; }

.woocommerce ul.products { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.woocommerce ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
  text-align: left;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.woocommerce ul.products li.product img { border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  padding: 0 !important;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--color-primary-ink) !important;
  font-size: 18px;
  font-weight: 700;
}
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
.product-card__modality {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.woocommerce div.product { padding: var(--space-6) 0; }
.woocommerce div.product .product_title { font-family: var(--font-display); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-primary-ink); font-size: 26px; font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--color-bg); }

.product-specs { margin: var(--space-4) 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.product-specs h3 { margin: 0; padding: 12px var(--space-3); background: var(--color-bg-muted); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary-ink); }
.product-specs table { width: 100%; border-collapse: collapse; }
.product-specs th, .product-specs td { padding: 10px var(--space-3); border-top: 1px solid var(--color-border); font-size: 15px; text-align: left; }
.product-specs th { width: 40%; color: var(--color-text-muted); font-weight: 600; }
.product-coa { margin: var(--space-3) 0 0; }

.woocommerce-breadcrumb { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-4) !important; }

/* Account / wholesale forms */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-form-login,
.wholesale-form-wrap {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius);
  padding: var(--space-5) !important;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 15px;
}

/* My Account pairs Login and Register side by side. The 820px prose cap on
   .entry-content made both cards hug the left edge, so the account screens opt
   out of it and split the container evenly instead. */
.woocommerce-account .entry-content { max-width: none; }
/* WooCommerce ships a clearfix on this wrapper. Its ::before/::after become
   grid items and steal the first cell, which pushed Login into column 2 and
   Register onto a second row -- so they are switched off here. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { content: none; display: none; }
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.woocommerce-account .u-columns.col2-set > .col-1,
.woocommerce-account .u-columns.col2-set > .col-2 {
  width: auto;
  float: none;
  margin: 0;
}
.woocommerce-account .u-columns.col2-set h2 { margin-top: 0; }
.woocommerce-account form.login,
.woocommerce-account form.register { margin: 0; }

.page-hero { background: var(--color-bg-muted); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.entry-content { padding: var(--space-6) 0; max-width: 820px; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid--4, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid, .editorial, .disclaimer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .lab-panel img { min-height: 0; aspect-ratio: 4 / 3; }
  .hero { min-height: 600px; }
  .hero__media img { object-position: 72% center; }
  .hero__media::after {
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 62%, rgba(255,255,255,.72) 100%);
  }
  .header-actions__wholesale { display: none; }
  .quality, .wholesale-band__inner { grid-template-columns: 1fr; }
  /* Stacked, the photo has no sibling column to match, so put it back in the
     flow with an explicit ratio. */
  .quality__media { min-height: 0; }
  .quality__media img { position: static; height: auto; aspect-ratio: 4 / 5; }
  .wholesale-band .btn-row { justify-content: flex-start; }
}

@media (max-width: 782px) {
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; gap: var(--space-4); }
  .section { padding: var(--space-6) 0; }

  /* Narrow screens crop the banner too hard to sit behind the copy, and
     washing it out would hide it. So the hero stacks instead: copy on white,
     then the banner full-bleed underneath at its natural 16:9. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-bg);
  }
  .hero > .container { order: 1; }
  .hero__content { width: 100%; padding: var(--space-6) 0; }
  .hero__media {
    position: static;
    order: 2;
    width: 100%;
  }
  .hero__media img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center center;
  }
  .hero__media::after { content: none; }
  .hero h1 { max-width: none; font-size: clamp(34px, 8vw, 46px); }
  .hero__sub { font-size: 17px; }
  .strip { margin-top: -28px; }
  .strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__item { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .strip__item:nth-child(2n) { border-right: 0; }
  .strip__item:nth-last-child(-n+2) { border-bottom: 0; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__form input[type="email"] { max-width: none; }
  .header-actions__shop { display: none; }

  .menu-toggle { display: inline-block; order: 3; }
  .site-header__inner { flex-wrap: wrap; gap: var(--space-3); }
  .main-navigation { flex-basis: 100%; order: 4; display: none; }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: var(--space-3); }
  .main-navigation li { width: 100%; border-bottom: 1px solid var(--color-border); }
  .main-navigation a { display: block; padding: 12px 0; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .category-grid, .editorial, .disclaimer-grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
  .strip__inner { grid-template-columns: 1fr; }
  .strip__item { border-bottom: 1px solid var(--color-border); }
  .strip__item:last-child { border-bottom: 0; }
  .btn, .woocommerce a.button, .woocommerce button.button { width: 100%; }
  .btn-row { flex-direction: column; }
  .hero-announce { width: 100%; padding: 12px; }
  .hero-announce__text { flex-basis: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .hero__link { text-align: center; }
  /* keep the split panel image a readable landscape band, not a tall column */
  .lab-panel img { aspect-ratio: 3 / 2; }
}

/* -------------------------------------------------------------------------
   Wholesale quote request form
   ---------------------------------------------------------------------- */

.ptp-quote-form {
	max-width: 640px;
	margin: 2rem 0 0;
}

.ptp-quote-field {
	margin: 0 0 1.25rem;
}

.ptp-quote-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-text);
	margin-bottom: 0.375rem;
}

.ptp-quote-field input[type="text"],
.ptp-quote-field input[type="email"],
.ptp-quote-field input[type="tel"],
.ptp-quote-field textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	font: inherit;
	font-size: 1rem;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ptp-quote-field input:focus,
.ptp-quote-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(61, 154, 99, 0.28);
}

.ptp-quote-field textarea {
	resize: vertical;
	min-height: 6rem;
}

.ptp-req {
	color: var(--color-accent-dark);
	margin-left: 0.125rem;
}

.ptp-quote-field--agree label {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
}

.ptp-quote-field--agree input[type="checkbox"] {
	margin-top: 0.1875rem;
	flex-shrink: 0;
}

/* Honeypot: hidden from humans without display:none, which some bots detect. */
.ptp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ptp-quote-errors {
	background: #FDF3F3;
	border-left: 4px solid #B3261E;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	border-radius: 4px;
}

.ptp-quote-errors p {
	margin: 0 0 0.5rem;
	color: #7F1D17;
}

.ptp-quote-errors ul {
	margin: 0;
	padding-left: 1.25rem;
	color: #7F1D17;
	font-size: 0.9375rem;
}

.ptp-quote-success {
	margin-bottom: 1.5rem;
}

.ptp-quote-success p:last-child {
	margin-bottom: 0;
}

.product-quote-link {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}

.product-quote-link a {
	color: var(--color-primary-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.product-quote-link a:hover,
.product-quote-link a:focus {
	color: var(--color-accent-dark);
}

@media (max-width: 600px) {
	.ptp-quote-form {
		margin-top: 1.5rem;
	}
}

.site-footer__brand { margin: 0 0 var(--space-3); }
.site-footer__brand img { display: block; width: 228px; max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   Research-use access notice (age gate)
   ---------------------------------------------------------------------- */

/* Lock the page behind the dialog while it is open. */
html.ptp-age-gate-open,
html.ptp-age-gate-open body { overflow: hidden; }

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.age-gate[hidden] { display: none; }

.age-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 56, 36, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.age-gate__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: 0 30px 80px rgba(22, 56, 36, .32);
}
.age-gate__panel h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--color-primary-ink);
}
.age-gate__panel p { color: var(--color-text-muted); font-size: 15px; }
.age-gate__panel p:last-of-type { margin-bottom: 0; }

.age-gate__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(217, 164, 58, .55);
  border-radius: var(--radius);
  background: rgba(217, 164, 58, .08);
  cursor: pointer;
}
.age-gate__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.age-gate__check span { font-size: 15px; font-weight: 600; color: var(--color-text); }

.age-gate__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.age-gate__actions .btn { cursor: pointer; }
.age-gate__actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.age-gate__actions .btn[disabled]:hover { background: var(--color-primary); }

@media (max-width: 600px) {
  .age-gate { padding: var(--space-3); align-items: start; }
  .age-gate__panel { padding: var(--space-4); }
  .age-gate__actions { flex-direction: column; }
  .age-gate__actions .btn { width: 100%; }
}