/* Certified Peptides — brand polish on top of theme.json */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }

:root {
  --cp-bg: #fcfcfc;
  --cp-fg: #1a1a1a;
  --cp-muted: #737373;
  --cp-subtle: #f5f5f5;
  --cp-border: #e0e0e0;
  --cp-card: #ffffff;
  --cp-inverted: #0a0a0a;
  --cp-inverted-fg: #fafafa;
}

html, body {
  background: var(--cp-bg);
  color: var(--cp-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { border-color: var(--cp-border); }

/* ---------- Top compliance bar ---------- */

.cp-topbar {
  position: relative;
  z-index: 60;
  background: var(--cp-inverted);
  color: var(--cp-inverted-fg);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  text-align: center;
  line-height: 1.5;
}
.cp-topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.cp-topbar__primary { font-weight: 600; }
.cp-topbar__secondary { opacity: 0.75; font-weight: 400; text-transform: none; letter-spacing: 0.02em; }
.cp-topbar__sep { opacity: 0.4; }
@media (max-width: 768px) {
  .cp-topbar { font-size: 0.6875rem; padding: 0.5rem 1rem; letter-spacing: 0.04em; }
  .cp-topbar__sep { display: none; }
  .cp-topbar__secondary { display: none; }
}

/* Push the sticky header below the topbar */
.cp-header { top: 0; }

/* ---------- Header ---------- */

.wp-site-blocks .cp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 252, 252, 0.95);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cp-border);
}

.cp-logo {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
}
.cp-logo .cp-logo-small {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cp-muted);
  letter-spacing: -0.01em;
  margin-bottom: -2px;
}
.cp-logo .cp-logo-large {
  display: block;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--cp-fg);
  letter-spacing: -0.03em;
}

.cp-header .wp-block-navigation a,
.cp-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--cp-muted);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}
.cp-header .wp-block-navigation a:hover,
.cp-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--cp-fg);
}

.cp-header .wp-block-navigation__container {
  gap: 2.5rem;
}

/* ---------- Buttons (CTA) ---------- */

.cp-btn,
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--cp-fg);
  color: var(--cp-bg);
  border: 1px solid var(--cp-fg);
  border-radius: 0;
  text-decoration: none;
  transition: all 0.15s ease;
}
.cp-btn:hover,
.wp-block-button .wp-block-button__link:hover {
  background: var(--cp-inverted);
  color: var(--cp-inverted-fg);
}
.cp-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--cp-fg);
}
.cp-btn--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--cp-fg);
  color: var(--cp-bg);
}

/* ---------- Section blocks ---------- */

.cp-section {
  padding: 5rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.cp-section--narrow {
  max-width: 768px;
}
.cp-section--full {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.cp-section--inverted {
  background: var(--cp-inverted);
  color: var(--cp-inverted-fg);
}
.cp-section--inverted .cp-eyebrow,
.cp-section--inverted .cp-stat-label { color: rgba(250, 250, 250, 0.6); }
.cp-section--inverted h2 { color: var(--cp-inverted-fg); }
.cp-section--inverted .cp-stat-num { color: var(--cp-inverted-fg); }

.cp-section__head { text-align: center; margin-bottom: 3rem; }
.cp-section__head h2 { margin: 0.5rem 0 0; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ---------- Quality / 2-col ---------- */

.cp-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .cp-twocol { grid-template-columns: 1fr 1fr; gap: 6rem; }
}
.cp-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
.cp-features h3 { font-size: 0.875rem; margin: 0 0 0.5rem; }
.cp-features p { font-size: 0.875rem; color: var(--cp-muted); margin: 0; line-height: 1.6; }
.cp-twocol__image {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-image: url('images/lab-testing.jpg');
}

/* ---------- Testimonials ---------- */

.cp-testimonials {
  background: var(--cp-subtle);
  padding: 5rem 1.5rem;
}
.cp-testimonials__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.cp-testimonials .cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.cp-testimonial {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.cp-testimonial blockquote {
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  color: var(--cp-muted);
  line-height: 1.6;
  font-style: normal;
  flex: 1;
}
.cp-testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cp-testimonial__avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--cp-fg);
  color: var(--cp-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
}
.cp-testimonial__meta strong { display: block; font-size: 0.8125rem; font-weight: 500; }
.cp-testimonial__meta small { display: block; font-size: 0.75rem; color: var(--cp-muted); }

/* ---------- Mission stats ---------- */

.cp-mission {
  text-align: center;
}
.cp-mission p { color: rgba(250, 250, 250, 0.8); max-width: 42rem; margin: 1.5rem auto 0; line-height: 1.6; }
.cp-mission .cp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
@media (min-width: 768px) { .cp-mission .cp-grid { grid-template-columns: repeat(4, 1fr); } }
.cp-mission .cp-stat-num { font-size: 2.25rem; }
.cp-mission .cp-stat-label { color: rgba(250, 250, 250, 0.6); margin-top: 0.5rem; }

/* ---------- FAQ ---------- */

.cp-faq details {
  border-bottom: 1px solid var(--cp-border);
  padding: 0;
}
.cp-faq details summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 0;
  font-weight: 500;
  font-size: 1rem;
  color: var(--cp-fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cp-faq details summary::-webkit-details-marker { display: none; }
.cp-faq details summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}
.cp-faq details[open] summary::after { content: "−"; }
.cp-faq details > p,
.cp-faq details > div {
  padding: 0 0 1.5rem;
  color: var(--cp-muted);
  line-height: 1.6;
}

/* ---------- Products grid (woocommerce) ---------- */

/* Kill WC's clearfix pseudos that occupy grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* Force CSS grid 3-col layout — works for both shortcode wrapper (.woocommerce) and shop archive (body.woocommerce). */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"],
body.woocommerce ul.products,
body.woocommerce ul.products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-auto-flow: row !important;
}
/* Tablet: 2 columns. Specificity must match the base rule's [class*="columns-"]
   selector, otherwise the 3-col rule wins even inside the media query. */
@media (max-width: 1023px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"],
  body.woocommerce ul.products,
  body.woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone: single column, compact horizontal card (image left, details right,
   full-width Add to Cart below). */
@media (max-width: 782px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"],
  body.woocommerce ul.products,
  body.woocommerce ul.products[class*="columns-"] {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  .woocommerce ul.products li.product,
  body.woocommerce ul.products li.product {
    padding: 0.875rem !important;
  }
  /* image + title + price live inside the first product link → lay it out
     as a 2-column grid: image spans the left column, text stacks on the right */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: grid !important;
    grid-template-columns: 104px 1fr;
    column-gap: 1rem;
    align-items: center;
    text-decoration: none;
  }
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 104px !important;
    height: auto !important;
    margin: 0 !important;
    align-self: center;
  }
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link > h2,
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link > .woocommerce-loop-product__title,
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link > .price,
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link > span {
    grid-column: 2 !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0 0 0.25rem !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
  .woocommerce ul.products li.product .price {
    text-align: left !important;
    font-size: 1rem !important;
    display: block;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart,
  .woocommerce ul.products li.product .cp-oos-cart {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin-top: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    display: block !important;
  }
}

.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
body.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li,
.wc-block-product-template > li {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  padding: 1.5rem !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  text-align: left;
  list-style: none;
  position: relative;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--cp-fg);
  padding: 1rem 0 0.25rem !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  color: var(--cp-fg) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
}
.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del {
  color: var(--cp-muted) !important;
  /* No opacity: it multiplied --cp-muted (#5C6470) down to 3.13:1 on white — an
     AA fail on the struck-out original price, which is real content. The token
     alone is 5.98:1 on white / 5.22:1 on bone; the strikethrough + weight
     already de-emphasise it. */
  font-weight: 400 !important;
  margin-right: 0.5rem;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
body.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  background: var(--cp-fg) !important;
  color: var(--cp-bg) !important;
  border-radius: 0 !important;
  border: 1px solid var(--cp-fg) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  padding: 0.625rem 1.25rem !important;
  letter-spacing: 0.01em;
  margin-top: 0.75rem !important;
}

/* Out-of-stock trickster Add-to-cart button */
.cp-oos-cart {
  position: relative;
  transition: background 0.18s ease, color 0.18s ease, letter-spacing 0.18s ease;
}
.cp-oos-cart.cp-oos-flashing {
  background: #6b6b6b !important;
  border-color: #6b6b6b !important;
  color: #ffffff !important;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.cp-oos-single {
  margin-top: 1.25rem;
}
.cp-oos-single .cp-oos-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 0.875rem 1.75rem !important;
  background: var(--cp-fg) !important;
  color: var(--cp-bg) !important;
  border: 1px solid var(--cp-fg) !important;
  border-radius: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 500;
  cursor: pointer;
}
.cp-oos-single__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--cp-muted);
}
.cp-oos-single__note a { color: var(--cp-fg); text-decoration: underline; text-underline-offset: 3px; }

/* Sale badge — black bg, white text, sharp corners */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product span.onsale,
body.woocommerce span.onsale,
body.woocommerce ul.products li.product .onsale,
.wc-block-grid__product-onsale,
.wc-block-components-product-sale-badge {
  background: var(--cp-fg) !important;
  background-color: var(--cp-fg) !important;
  color: var(--cp-bg) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.3125rem 0.625rem !important;
  min-height: auto !important;
  min-width: auto !important;
  height: auto !important;
  width: auto !important;
  line-height: 1 !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  left: auto !important;
  margin: 0 !important;
  position: absolute !important;
}

/* ---------- WooCommerce quantity chooser ----------
   The "invisible number". It was NEVER a colour bug: the digit computed to
   rgb(0,0,0) black on white the whole time. Nothing in this theme styled .qty,
   so the input kept Chrome's UA font (13px Arial) and UA border (2px inset)
   while two WooCommerce rules sized its box against two different references:
     woocommerce.css      .woocommerce .quantity .qty { width: 3.631em }
                            -> em resolves off the input's 13px UA font = 47.2px
     legacy-template.css  ...div.quantity .input-text { padding: .9rem 1.1rem }
                            -> rem resolves off the 16px ROOT = 17.6px per side
   `box-sizing: border-box` (line 3 of this file) then subtracts that padding
   from the width instead of adding to it:
     47.2 - 35.2 padding - 4 border = 8px of content box.
   8px cannot show a digit, so the control rendered as an empty box and 2-digit
   quantities clipped outright. The em/rem mismatch is the crux — a width sized
   off a 13px font colliding with padding sized off a 16px root.
   Fix: own the geometry explicitly rather than inherit that fight.
   Specificity is deliberate: legacy-template.css's padding rule is (0,5,3) — its
   :where() adds nothing — so a lower-specificity rule loses at ANY load order.
   Tokens carry literal fallbacks because functions.php also loads this file via
   add_editor_style(), where cp-shop.css's :root tokens are not present. */
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart div.quantity input.qty.input-text,
.woocommerce-cart table.cart td.product-quantity div.quantity input.qty.input-text {
  box-sizing: border-box;
  width: 5.5rem;
  min-height: 48px;              /* comfortable touch target on mobile */
  margin: 0;
  padding: 0 0.5rem;             /* leaves ~70px of content box, not 8px */
  font-family: var(--cp-font, inherit);
  font-size: 1rem;               /* >=16px so iOS Safari does not zoom on focus */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink, #17202B);                    /* on white = 16.43:1, AA + AAA */
  -webkit-text-fill-color: var(--ink, #17202B);  /* iOS ignores `color` in some states */
  background-color: var(--white, #FFFFFF);
  border: 1px solid var(--stone, #C9C7C0);       /* stone as a BORDER, never as text */
  border-radius: 10px;
  opacity: 1;
  /* `appearance` is intentionally NOT set: the native spin buttons are the only
     +/- stepper this markup has, so hiding them would remove the control. */
}

.woocommerce .quantity input.qty:focus,
.woocommerce div.product form.cart div.quantity input.qty.input-text:focus,
.woocommerce-cart table.cart td.product-quantity div.quantity input.qty.input-text:focus {
  border-color: var(--ink, #17202B);
  outline: 2px solid var(--ink, #17202B);
  outline-offset: 2px;
}

/* woocommerce.css floats this wrapper; keep it inline with the Add-to-cart CTA. */
.woocommerce div.product form.cart div.quantity {
  float: none;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 10px 0 0;
}

/* ---------- Footer ---------- */

.cp-footer {
  border-top: 1px solid var(--cp-border);
  background: var(--cp-bg);
  padding: 4rem 1.5rem 2rem;
}
.cp-footer__inner { max-width: 1280px; margin: 0 auto; }
.cp-footer .cp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) { .cp-footer .cp-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }
.cp-footer h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cp-fg);
  margin: 0 0 1rem;
}
.cp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.cp-footer a {
  font-size: 0.875rem;
  color: var(--cp-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cp-footer a:hover { color: var(--cp-fg); }
.cp-footer__divider { border-top: 1px solid var(--cp-border); margin-top: 3rem; padding-top: 2rem; }
.cp-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--cp-muted);
}
@media (min-width: 768px) {
  .cp-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.cp-footer__brand { font-weight: 600; color: var(--cp-fg); letter-spacing: 0.05em; font-size: 0.9375rem; }

/* Footer contact + payments row */
.cp-footer__contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .cp-footer__contact { grid-template-columns: 1fr 1fr; }
}
.cp-footer__company {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--cp-muted);
  line-height: 1.7;
}
.cp-footer__company strong { color: var(--cp-fg); display: block; margin-bottom: 0.25rem; font-weight: 600; }
.cp-footer__company a { color: var(--cp-muted); text-decoration: none; transition: color 0.15s ease; }
.cp-footer__company a:hover { color: var(--cp-fg); }
/* No opacity here: it would multiply the inherited alpha from
   .cp-footer--dark .cp-footer__company (rgba(255,255,255,.55)), giving .44
   effective = 4.24:1 on --ink, an AA fail. font-size alone sets the hierarchy. */
.cp-footer__hours { display: block; margin-top: 0.5rem; font-size: 0.8125rem; }

.cp-footer__payments h4 { margin-bottom: 0.75rem; }
@media (min-width: 768px) {
  .cp-footer__payments { text-align: right; }
  .cp-payments { justify-content: flex-end; }
}
.cp-footer .cp-payments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.cp-footer .cp-payments li {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 2.125rem;
  flex-shrink: 0;
  margin: 0;
}
.cp-footer .cp-payments img {
  display: block;
  width: 70%;
  height: auto;
  max-height: 70%;
  object-fit: contain;
}

/* Disclaimer */
.cp-footer__disclaimer {
  font-size: 0.8125rem;
  color: var(--cp-muted);
  line-height: 1.6;
  max-width: 64rem;
  margin: 0;
}
.cp-footer__disclaimer strong { color: var(--cp-fg); font-weight: 600; }

/* ---------- Knowledge / page polish ---------- */

.cp-page {
  max-width: 768px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}
.cp-page h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 2rem;
}
.cp-page h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem;
}
.cp-page h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}
.cp-page p, .cp-page li { color: var(--cp-muted); line-height: 1.7; }
.cp-page strong { color: var(--cp-fg); }
.cp-page a { color: var(--cp-fg); text-decoration: underline; text-underline-offset: 3px; }
.cp-page ul, .cp-page ol { padding-left: 1.5rem; }
.cp-page table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.cp-page th, .cp-page td { padding: 0.75rem 1rem; border: 1px solid var(--cp-border); text-align: left; }
.cp-page th { font-weight: 600; background: var(--cp-subtle); }

/* Age + research-use gate — styled 1:1 with penguinpeptides.com.
   Brand exception: this modal uses the teal/red color set required for
   Google compliance review parity. All other UI stays monochrome. */
.cp-age-gate-locked { overflow: hidden; }
.cp-age-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cp-age-gate[hidden] { display: none !important; }
.cp-age-gate.is-open { opacity: 1; }
.cp-age-gate.is-leaving { opacity: 0; }
.cp-age-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cp-age-gate__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.55);
  transform: translateY(10px);
  transition: transform 0.25s ease;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.cp-age-gate.is-open .cp-age-gate__panel { transform: translateY(0); }

.cp-age-gate__head {
  background: var(--cardinal-red);
  padding: 1.5rem 2rem;
}
.cp-age-gate__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1.2;
  text-transform: uppercase;
}

.cp-age-gate__form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(94vh - 80px);
  overflow-y: auto;
}
.cp-age-gate__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #444;
}

.cp-age-gate__check {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
  cursor: pointer;
  padding: 1rem 1.25rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cp-age-gate__check:hover { border-color: #b0b0b0; }
.cp-age-gate__check:has(input:checked) {
  border-color: var(--cardinal-red);
  background: rgba(44, 138, 169, 0.04);
}
.cp-age-gate__check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--cardinal-red);
  cursor: pointer;
}
.cp-age-gate__check a {
  color: var(--cardinal-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-age-gate__remember {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  font-size: 0.9375rem;
  color: #333;
  cursor: pointer;
  padding: 0.25rem 0 0.5rem;
}
.cp-age-gate__remember input {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--cardinal-red);
  cursor: pointer;
}

.cp-age-gate__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ececec;
}
.cp-age-gate__exit {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: transparent; border: 1px solid var(--stone); color: var(--ink);
  border: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.cp-age-gate__exit:hover { background: var(--bone-deep); color: var(--ink); }
.cp-age-gate__enter {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  background: #cccccc;
  color: #ffffff;
  border: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: not-allowed;
  transition: background 0.15s ease, color 0.15s ease;
}
.cp-age-gate__enter:not(:disabled) {
  background: var(--cardinal-red);
  color: #ffffff;
  cursor: pointer;
}
.cp-age-gate__enter:not(:disabled):hover { background: var(--cardinal-red-deep); }

@media (max-width: 540px) {
  .cp-age-gate__head { padding: 1.125rem 1.5rem; }
  .cp-age-gate__title { font-size: 1.0625rem; }
  .cp-age-gate__form { padding: 1.5rem 1.25rem; gap: 1rem; }
  .cp-age-gate__intro { font-size: 0.9375rem; }
  .cp-age-gate__check { padding: 0.875rem 1rem; font-size: 0.875rem; }
  .cp-age-gate__actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
  .cp-age-gate__exit, .cp-age-gate__enter { text-align: center; width: 100%; padding: 0.875rem; }
}

/* COA lightbox */
.cp-coa-no-scroll { overflow: hidden; }
.cp-coa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cp-coa-lightbox[hidden] { display: none !important; }
.cp-coa-lightbox.is-open { opacity: 1; }
.cp-coa-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cp-coa-lightbox__panel {
  position: relative;
  margin: auto;
  width: min(960px, 100%);
  max-width: 100%;
  height: min(90vh, 1080px);
  max-height: 100%;
  background: var(--cp-bg);
  border: 1px solid var(--cp-border);
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform 0.2s ease;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.45);
}
.cp-coa-lightbox.is-open .cp-coa-lightbox__panel { transform: translateY(0); }

@media (max-width: 768px) {
  .cp-coa-lightbox { padding: 0; }
  .cp-coa-lightbox__panel {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border: 0;
  }
}
@media (min-width: 769px) {
  .cp-coa-lightbox { padding: 2rem; }
}

.cp-coa-lightbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cp-border);
  flex-shrink: 0;
}
.cp-coa-lightbox__titles { min-width: 0; flex: 1; }
.cp-coa-lightbox__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cp-fg);
  letter-spacing: -0.01em;
}
.cp-coa-lightbox__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--cp-muted);
  line-height: 1.45;
  word-break: break-word;
}
.cp-coa-lightbox__product { font-weight: 500; color: var(--cp-fg); margin-right: 0.375rem; }
.cp-coa-lightbox__updated { white-space: nowrap; }

.cp-coa-lightbox__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}
.cp-coa-lightbox__open {
  font-size: 0.8125rem;
  color: var(--cp-muted);
  text-decoration: none;
  border: 1px solid var(--cp-border);
  padding: 0.5rem 0.875rem;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.cp-coa-lightbox__open:hover { color: var(--cp-fg); border-color: var(--cp-fg); }
@media (max-width: 480px) {
  .cp-coa-lightbox__open { display: none; }
}
.cp-coa-lightbox__close {
  background: transparent;
  border: 1px solid var(--cp-border);
  color: var(--cp-fg);
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.cp-coa-lightbox__close:hover { background: var(--cp-fg); color: var(--cp-bg); }
.cp-coa-lightbox__close:focus-visible { outline: 2px solid var(--cp-fg); outline-offset: 2px; }

.cp-coa-lightbox__body {
  flex: 1;
  min-height: 0;
  background: var(--cp-subtle);
  position: relative;
}
.cp-coa-lightbox__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: block;
}

/* COA download button (single product page) */
.cp-coa-meta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cp-border);
}
.cp-coa-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  background: var(--cp-fg);
  color: var(--cp-bg) !important;
  border: 1px solid var(--cp-fg);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.cp-coa-button:hover {
  background: var(--cp-inverted);
  color: var(--cp-inverted-fg) !important;
  text-decoration: none !important;
}
.cp-coa-button svg { display: block; flex-shrink: 0; }
.cp-coa-meta__note {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  color: var(--cp-muted);
  letter-spacing: 0.02em;
}

/* Contact form */
.cp-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--cp-border);
  background: var(--cp-card);
}
.cp-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--cp-fg);
  font-weight: 500;
}
.cp-contact-form input,
.cp-contact-form select,
.cp-contact-form textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--cp-border);
  border-radius: 0;
  background: var(--cp-bg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cp-fg);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.cp-contact-form input:focus,
.cp-contact-form select:focus,
.cp-contact-form textarea:focus {
  outline: none;
  border-color: var(--cp-fg);
}
.cp-contact-form textarea { resize: vertical; min-height: 7rem; }
.cp-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .cp-form-row { grid-template-columns: 1fr 1fr; }
}
.cp-contact-form .cp-btn {
  align-self: flex-start;
  background: var(--cp-fg);
  color: var(--cp-bg);
  border: 1px solid var(--cp-fg);
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cp-contact-form .cp-btn:hover { background: var(--cp-inverted); color: var(--cp-inverted-fg); }
.cp-form-note {
  font-size: 0.8125rem;
  color: var(--cp-muted);
  margin: 0.5rem 0 0;
}
.cp-form-note a { color: var(--cp-fg); text-decoration: underline; text-underline-offset: 3px; }

/* WooCommerce shop page polish */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--cp-muted); font-size: 0.875rem; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 0 !important;
  border: 1px solid var(--cp-border) !important;
}

/* Coming Soon banner — hide once you go live; remove this rule once disabled in WC */
.woocommerce-coming-soon-banner { font-family: inherit !important; }