/* ==========================================================================
   WBS Peptide — base
   Tokens live in tokens.css. Component sheets load after this one.
   ========================================================================== */

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

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

body.wbs-body {
	margin: 0;
	background: var(--wbs-cream);
	color: var(--wbs-ink);
	font-family: var(--wbs-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--wbs-blue); text-decoration: none; }
a:hover { color: var(--wbs-teal-deep); }

/* Base heading face is Playfair, matching the source's `h1,h2,…{Playfair}`
   rule. Components that the source overrides back to Inter set
   --wbs-font-heading themselves — see the note in tokens.css. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wbs-font-display);
	color: var(--wbs-ink);
	line-height: 1.18;
	margin: 0 0 .5em;
	font-weight: 600;
}
h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(19px, 2vw, 23px); }

p { margin: 0 0 1em; }

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

.wbs-skip {
	position: absolute; left: -9999px;
	background: var(--wbs-ink); color: #fff;
	padding: 10px 16px; z-index: 1200;
}
.wbs-skip:focus { left: 12px; top: 12px; }

/* --- layout ------------------------------------------------------------ */
.wbs-container {
	width: min(100% - (var(--wbs-gutter) * 2), var(--wbs-container));
	margin-inline: auto;
}

.wbs-main { display: block; min-height: 40vh; }

/* --- promo bar ---------------------------------------------------------- */
.wbs-promo {
	background: var(--wbs-ink);
	color: var(--wbs-cream);
	font-size: 14px;
}
.wbs-promo__inner {
	display: flex; flex-wrap: wrap; gap: 12px;
	align-items: center; justify-content: center;
	padding: 10px 0;
	text-align: center;
}
.wbs-promo__cta {
	color: var(--wbs-cream);
	border-bottom: 1px solid currentColor;
	white-space: nowrap;
}

/* --- header ------------------------------------------------------------- */
.wbs-header { padding: 14px 0; background: var(--wbs-cream); }

.wbs-header__pill {
	display: flex; align-items: center; gap: 20px;
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius-pill);
	padding: 10px 18px;
	box-shadow: var(--wbs-shadow-sm);
}

.wbs-brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.wbs-brand__emblem img { border-radius: 50%; display: block; }
.wbs-brand__copy { display: flex; flex-direction: column; line-height: 1.15; }
.wbs-brand__name { font-family: var(--wbs-font-display); font-size: 18px; }
.wbs-brand__tag {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wbs-muted);
}

.wbs-nav { margin-inline: auto; }
.wbs-nav__list {
	display: flex; align-items: center; gap: 22px;
	list-style: none; margin: 0; padding: 0;
}
.wbs-nav__item { position: relative; }
.wbs-nav__link {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; cursor: pointer;
	font: 600 14px/1.2 var(--wbs-font-body);
	color: var(--wbs-ink); padding: 8px 2px;
}
.wbs-nav__link:hover { color: var(--wbs-teal-deep); }
.wbs-nav__caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.wbs-nav__panel {
	position: absolute; top: calc(100% + 10px); left: 50%;
	transform: translateX(-50%);
	min-width: 300px; z-index: 60;
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius);
	box-shadow: var(--wbs-shadow-lg);
	padding: 10px;
}
.wbs-nav__sublist { list-style: none; margin: 0; padding: 0; }
.wbs-nav__sublink {
	display: block; padding: 10px 12px; border-radius: 8px; color: var(--wbs-ink);
}
.wbs-nav__sublink:hover { background: var(--wbs-mist); }
.wbs-nav__subname { display: block; font-weight: 600; font-size: 14px; }
.wbs-nav__subblurb { display: block; font-size: 12px; color: var(--wbs-muted); }

.wbs-header__actions { display: flex; align-items: center; gap: 6px; }
.wbs-iconbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 0; background: none; cursor: pointer; border-radius: 50%;
	color: var(--wbs-ink);
}
.wbs-iconbtn:hover { background: var(--wbs-mist); }
.wbs-cart-count {
	position: absolute; top: 2px; right: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: var(--wbs-radius-pill);
	background: var(--wbs-rust); color: #fff;
	font-size: 11px; line-height: 17px; text-align: center;
}
.wbs-menu-toggle { display: none; }

.wbs-searchbar { padding: 12px 0; }

.wbs-mobile-menu {
	border-top: 1px solid var(--wbs-sage-cool);
	background: var(--wbs-white);
}
.wbs-mobile-menu__list { list-style: none; margin: 0; padding: 8px 0; }
.wbs-mobile-menu__list a { display: block; padding: 12px var(--wbs-gutter); color: var(--wbs-ink); }

@media (max-width: 991px) {
	.wbs-nav { display: none; }
	.wbs-menu-toggle { display: inline-flex; }
	.wbs-header__pill { border-radius: var(--wbs-radius-lg); }
}

/* --- buttons ------------------------------------------------------------ */
/* Measured from the source's .btn-primary: radius 12 (NOT a pill), 17.2/25.8
   weight 700, padding 8/16, cream text on teal with a matching border. */
.wbs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--wbs-teal); border-radius: 12px;
	background: var(--wbs-teal); color: var(--wbs-cream);
	font-family: var(--wbs-font-body);
	font-size: 17.2px; font-weight: 700; line-height: 1.5;
	cursor: pointer; text-align: center;
}
.wbs-btn:hover { background: var(--wbs-teal-deep); border-color: var(--wbs-teal-deep); color: var(--wbs-cream); }
.wbs-btn--ghost {
	background: transparent; color: var(--wbs-ink);
	border-color: var(--wbs-sage-cool);
}
.wbs-btn--ghost:hover { background: var(--wbs-mist); color: var(--wbs-ink); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wbs-cyan);
	outline-offset: 2px;
}

/* --- footer -------------------------------------------------------------- */
.wbs-footer { background: var(--wbs-mist); margin-top: 64px; padding-top: 40px; }

.wbs-signals {
	display: grid; gap: 14px; list-style: none; margin: 0 0 36px; padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.wbs-signal {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius);
	padding: 14px 16px;
}
.wbs-signal__key {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; padding: 6px 8px;
	border-radius: 8px; background: var(--wbs-mist);
	font: 600 12px/1 var(--wbs-font-body); letter-spacing: .04em;
	color: var(--wbs-ink);
}
.wbs-signal__title { display: block; font-size: 15px; }
.wbs-signal__note { display: block; font-size: 13px; color: var(--wbs-muted); }

.wbs-footer__main {
	display: grid; gap: 32px; padding-bottom: 36px;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
}
@media (max-width: 900px) { .wbs-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wbs-footer__main { grid-template-columns: 1fr; } }

.wbs-footer__name { font-family: var(--wbs-font-display); font-size: 20px; display: block; }
.wbs-footer__tag {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wbs-muted); display: block; margin-bottom: 12px;
}
.wbs-footer__intro { font-size: 14px; color: var(--wbs-muted); max-width: 42ch; }
.wbs-footer__heading { font-size: 15px; font-family: var(--wbs-font-body); font-weight: 700; }
.wbs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wbs-footer__col li { margin-bottom: 8px; }
.wbs-footer__col a, .wbs-footer__contact a { color: var(--wbs-ink); font-size: 14px; }
.wbs-footer__col a:hover, .wbs-footer__contact a:hover { color: var(--wbs-teal-deep); }
.wbs-footer__deskcopy { font-size: 14px; color: var(--wbs-muted); }
.wbs-footer__reviews {
	display: inline-block; margin-bottom: 12px;
	font-weight: 600; border-bottom: 1px solid currentColor;
}
.wbs-footer__contact { list-style: none; margin: 0; padding: 0; }
.wbs-footer__contact li { margin-bottom: 6px; }

.wbs-footer__bottom {
	border-top: 1px solid var(--wbs-sage-cool);
	padding: 18px 0; font-size: 13px; color: var(--wbs-muted);
}
.wbs-footer__entity, .wbs-footer__ruo { margin: 0; }

/* --- support launcher ----------------------------------------------------- */
.wbs-support { position: fixed; right: 18px; bottom: 18px; z-index: 900; }
.wbs-support__launcher {
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 10px 16px; cursor: pointer;
	border: 1px solid var(--wbs-sage-cool); border-radius: var(--wbs-radius);
	background: var(--wbs-white); box-shadow: var(--wbs-shadow);
	font-family: var(--wbs-font-body); color: var(--wbs-ink);
}
.wbs-support__label { font-weight: 600; font-size: 14px; }
.wbs-support__sub { font-size: 12px; color: var(--wbs-muted); }
.wbs-support__panel {
	position: absolute; right: 0; bottom: calc(100% + 10px);
	width: 280px; padding: 16px;
	background: var(--wbs-white); border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius); box-shadow: var(--wbs-shadow-lg);
}

/* ==========================================================================
   WooCommerce corrections.
   Every one of these is a documented case where Woo's own CSS produces a
   visibly wrong page that still passes structural checks (STANDARDS,
   lilipeptide Wave 2). Kept in the SITEWIDE sheet on purpose: the shared
   product card also renders on the PDP related row and in cart cross-sells,
   and /cart/ loads base.css but not the shop sheet.
   ========================================================================== */

/* 1. ul.products::before is a float clearfix. Inside a grid it becomes a real
      GRID ITEM and eats cell 1, shifting every card. Card COUNT stays correct,
      so no count-based test catches it. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* 2. Woo's button skin computes at (0,2,1) via :where() and repaints our CTA
      grey on every page whose body carries .woocommerce. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--wbs-teal);
	color: #fff;
	border-radius: var(--wbs-radius-pill);
	font-family: var(--wbs-font-body);
	font-weight: 600;
	padding: 12px 22px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--wbs-teal-deep);
	color: #fff;
}

/* 3. A float is ignored inside grid but the percentage is NOT, so Woo's
      `div.summary{float:right;width:48%}` squeezes the PDP column, and
      `.woocommerce-MyAccount-navigation{width:30%}` collapses the account
      sidebar to ~78px. */
.woocommerce div.product div.summary { float: none; width: auto; }
.woocommerce .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce .woocommerce-MyAccount-content { float: none; width: auto; }

/* 4. Woo's base input rule uses a :not() chain at (0,4,1) — higher than
      anything we'd naturally write downstream, so fix the value HERE. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 11px 13px;
	border: 1px solid var(--wbs-sage-cool);
	border-radius: 10px;
	font-family: var(--wbs-font-body);
	font-size: 15px;
	background: var(--wbs-white);
	color: var(--wbs-ink);
}

/* ==========================================================================
   Shared product card.

   ⚠ SITEWIDE on purpose, not in shop.css: this same card renders on the PDP
   related row and in cart cross-sells, and /cart/ loads base.css but never the
   shop sheet. Putting it in shop.css is how the card silently repaints as Woo's
   grey default on those surfaces.

   Every value MEASURED from the source's .factory-catalog-card at 1440px
   (tools/probe-card.js), not read out of app.css.
   ========================================================================== */

.woocommerce ul.products li.product.wbs-pcard { text-align: center; }

.wbs-pcard__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	background: var(--wbs-cream);
	border: 1px solid rgba(16, 42, 58, .12);
	border-radius: 18px;
	box-shadow: 0 14px 28px rgba(16, 42, 58, .07);
	overflow: hidden;
}

.wbs-pcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 16px;
	border-radius: 28px;
	overflow: hidden;
	background: transparent;
}
.wbs-pcard__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Three source products have no artwork at all (SOURCE-DEFECTS.md #2). */
.wbs-pcard__noimg {
	font-family: var(--wbs-font-display);
	font-size: 26px;
	letter-spacing: .06em;
	color: var(--wbs-sage-cool);
}

.wbs-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 6px;
	margin-top: auto;
}

.wbs-pcard__name {
	display: block;
	min-height: 30px;
	margin: 0;
	font-family: var(--wbs-font-heading);
	font-size: .98rem;
	font-weight: 900;
	line-height: 1.25;
	color: var(--wbs-ink-deep);
	text-align: center;
}
.wbs-pcard__name:hover { color: var(--wbs-teal-deep); }

.wbs-pcard__meta { display: flex; justify-content: center; }
.wbs-pcard__kit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 21px;
	padding: 2px 8px;
	border: 1px solid rgba(73, 132, 133, .25);
	border-radius: 8px;
	background: rgba(73, 132, 133, .10);
	font-family: var(--wbs-font-heading);
	font-size: .62rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #2e5354;
}

/* Woo renders the price through .price, and its own
   `.woocommerce div.product p.price` / `ul.products li.product .price` rules
   are high-specificity — set the value here rather than downstream. */
.woocommerce ul.products li.product .wbs-pcard__price,
.woocommerce ul.products li.product .wbs-pcard__price .price,
.wbs-pcard__price .amount {
	margin: 0;
	font-family: var(--wbs-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--wbs-rust);
	text-align: center;
}
.wbs-pcard__price del { opacity: .55; font-weight: 600; }
.wbs-pcard__price ins { text-decoration: none; }


/* ==========================================================================
   COA / testing-record card.

   ⚠ SITEWIDE, not in home.css. This component renders on the homepage
   documentation section AND on the /testing/ library page, and the library page
   does not load home.css — so keeping it there rendered the library as an
   unstyled bullet list with full-size report scans. Same class of mistake as
   putting the product card in shop.css.
   ========================================================================== */
.wbs-coagrid {
	display: grid; gap: 14px; list-style: none; margin: 0 0 18px; padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Measured: the source's record card has NO padding of its own and a
   #d8ded8 rule. */
.wbs-coa__link {
	display: block; height: 100%; padding: 0; color: var(--wbs-ink);
	background: var(--wbs-white);
	border: 1px solid #d8ded8;
	border-radius: var(--wbs-radius);
	overflow: hidden;
}
.wbs-coa__badge, .wbs-coa__title, .wbs-coa__task, .wbs-coa__added { margin-inline: 14px; }
.wbs-coa__badge { margin-top: 14px; }
.wbs-coa__added { margin-bottom: 14px; }
.wbs-coa__link:hover { border-color: var(--wbs-teal); color: var(--wbs-ink); }
.wbs-coa__badge {
	display: inline-block; margin-bottom: 8px; padding: 3px 8px;
	border-radius: 6px; background: var(--wbs-mist);
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.wbs-coa__shot img { border-radius: 8px; display: block; margin-bottom: 8px; }
.wbs-coa__title { display: block; font-size: 15px; }
.wbs-coa__task { display: block; font-size: 13px; color: var(--wbs-blue); font-weight: 600; }
.wbs-coa__added { display: block; font-size: 12.5px; color: var(--wbs-muted); }

/* ==========================================================================
   Cart drawer. Sitewide: it can open from any page.
   ========================================================================== */

.wbs-drawer { position: fixed; inset: 0; z-index: 1100; }
.wbs-drawer[hidden] { display: none !important; }

.wbs-drawer__scrim {
	position: absolute; inset: 0;
	background: rgba(7, 24, 36, .45);
}
.wbs-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(420px, 92vw);
	display: flex; flex-direction: column;
	background: var(--wbs-cream);
	box-shadow: -18px 0 44px rgba(16, 42, 58, .18);
	overflow-y: auto;
}
.wbs-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wbs-sage-cool);
}
.wbs-drawer__title {
	margin: 0;
	font-family: var(--wbs-font-heading);
	font-size: 1.1rem; font-weight: 800; color: var(--wbs-ink-deep);
}
.wbs-drawer__close {
	border: 0; background: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--wbs-muted);
}
.wbs-drawer__content { padding: 20px; }
.wbs-drawer__empty { color: var(--wbs-muted); }

.wbs-drawer__items { list-style: none; margin: 0 0 18px; padding: 0; }
.wbs-drawer__item {
	display: grid; gap: 12px; align-items: start;
	grid-template-columns: 62px minmax(0, 1fr) 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wbs-line-soft);
}
.wbs-drawer__thumb img { display: block; width: 62px; height: auto; border-radius: 8px; }
.wbs-drawer__name { display: block; font-size: 14px; font-weight: 700; color: var(--wbs-ink); }
.wbs-drawer__variant { display: block; font-size: 12.5px; color: var(--wbs-muted); }
.wbs-drawer__qty { display: block; font-size: 13px; color: var(--wbs-rust); font-weight: 600; }
.wbs-drawer__remove {
	justify-self: end; font-size: 20px; line-height: 1;
	color: var(--wbs-muted); text-decoration: none;
}
.wbs-drawer__remove:hover { color: var(--wbs-rust); }

.wbs-drawer__totals {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 12px 0; border-top: 2px solid var(--wbs-ink);
	font-size: 15px;
}
.wbs-drawer__totals strong { font-family: var(--wbs-font-heading); font-size: 18px; }
.wbs-drawer__actions { display: grid; gap: 10px; margin-top: 14px; }

/* Support launcher panel — email only (no WhatsApp), decision 2026-09-08. */
.wbs-support__intro { margin: 0 0 12px; font-size: 13.5px; color: var(--wbs-muted); }
.wbs-support__mail {
	display: block; text-align: center; margin-bottom: 10px;
	padding: 10px 16px; border-radius: 12px;
	background: var(--wbs-teal); color: var(--wbs-cream);
	font-weight: 700; font-size: 14px;
}
.wbs-support__mail:hover { background: var(--wbs-teal-deep); color: var(--wbs-cream); }
.wbs-support__direct {
	display: block; text-align: center; font-size: 13.5px;
	color: var(--wbs-blue); word-break: break-all;
}
.wbs-support__note {
	margin: 12px 0 0; padding-top: 10px;
	border-top: 1px solid var(--wbs-line-soft);
	font-size: 12.5px; color: var(--wbs-muted);
}