/**
 * Peptide Catalog - block library styles.
 *
 * NAMING
 *   Block namespace is `pc-`. Strict BEM: .pc-block, .pc-block__element,
 *   .pc-block--modifier. State classes are `is-*` / `has-*`.
 *
 * SPECIFICITY
 *   Every rule is a single class selector (or a class plus a state class).
 *   No IDs, no tag selectors for layout, no nesting beyond one level. That
 *   means a plain `.pc-card { }` rule in the theme always wins on later order,
 *   so restyling never needs !important.
 *
 * THEMING
 *   Colors, radii and spacing come from the --pc-* custom properties below.
 *   A theme can restyle the whole library by redefining them on :root.
 *   The theme in this repo maps its own --ps-* tokens onto these.
 */

:root {
	/* Veridian Peptides defaults. The theme overrides all of these through
	   ps_token_bridge_css(); they are here so the blocks still look right if
	   the plugin is used on its own. */

	/* Surfaces */
	--pc-bg: #050706;
	--pc-surface: #0d120e;
	--pc-surface-alt: #141b15;

	/* Text */
	--pc-ink: #f6f7f5;
	--pc-ink-soft: #bdbdbc;
	--pc-muted: #8b8d88;

	/* Lines */
	--pc-line: rgba(120, 183, 69, 0.16);
	--pc-line-strong: rgba(120, 183, 69, 0.34);

	/* Brand */
	--pc-accent: #78b745;
	--pc-accent-hover: #9ad861;
	--pc-accent-ink: #050706;
	--pc-accent-soft: rgba(120, 183, 69, 0.14);

	/* Form fields: lighter than the panels they sit on, with an edge that
	   reads on dark backgrounds, so boxes are easy to find and fill in. */
	--pc-field-bg: #1b221c;
	--pc-field-border: rgba(246, 247, 245, 0.3);
	--pc-field-placeholder: #9ba39b;

	/* Status */
	--pc-ok: #78b745;
	--pc-ok-soft: rgba(120, 183, 69, 0.16);
	--pc-warn: #d9a441;
	--pc-warn-soft: rgba(217, 164, 65, 0.16);
	--pc-danger: #e06666;
	--pc-danger-soft: rgba(224, 102, 102, 0.16);
	--pc-sale: #9ad861;

	/* Shape */
	--pc-radius: 10px;
	--pc-radius-sm: 6px;
	--pc-radius-pill: 999px;

	/* Depth */
	--pc-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45);
	--pc-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 18px 44px rgba(0, 0, 0, 0.5);

	/* Rhythm */
	--pc-gap: 24px;
	--pc-gap-sm: 12px;
	--pc-pad: 20px;

	/* Type */
	--pc-font: inherit;
	--pc-font-size: 1rem;
	--pc-font-size-sm: 0.875rem;
	--pc-font-size-xs: 0.75rem;
}


/* =====================================================================
   Product card
   ===================================================================== */

.pc-card {
	display: flex;
	flex-direction: column;
	background: var(--pc-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.pc-card:hover {
	border-color: var(--pc-line-strong);
	box-shadow: var(--pc-shadow-hover);
	transform: translateY(-2px);
}

.pc-card.is-unavailable {
	opacity: 0.72;
}

.pc-card--compact {
	border-radius: var(--pc-radius-sm);
}

.pc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	/* Product photography is shot on white, so it needs a light plate even on
	   a black site - otherwise every cut-out shows its edges. */
	background: #e8eae6;
	overflow: hidden;
}

.pc-card__image {
	max-height: 282px;
    width: auto;
    margin: auto;
	height: 100%;
	/* width: 100%;*/
	object-fit: cover;
	display: block; 
}

.pc-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			45deg,
			var(--pc-surface),
			var(--pc-surface) 10px,
			var(--pc-surface-alt) 10px,
			var(--pc-surface-alt) 20px
		);
}

.pc-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 20px);
}

.pc-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--pc-pad);
	flex: 1 1 auto;
}

.pc-card__eyebrow {
	margin: 0;
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-accent);
}

.pc-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 650;
	color: var(--pc-ink);
}

.pc-card__link {
	color: inherit;
	text-decoration: none;
}

.pc-card__link:hover {
	color: var(--pc-accent);
}

.pc-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-card__spec {
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	color: var(--pc-ink-soft);
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	padding: 3px 8px;
}

.pc-card__blurb {
	margin: 0;
	font-size: var(--pc-font-size-sm);
	line-height: 1.55;
	color: var(--pc-muted);
}

.pc-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-gap-sm);
	padding: var(--pc-pad);
	padding-top: 0;
	margin-top: auto;
}

/* =====================================================================
   Badges
   ===================================================================== */

.pc-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-ink);
	color: #fff;
	line-height: 1.2;
}

.pc-badge--sale {
	background: var(--pc-sale);
	color: var(--pc-accent-ink);
}

.pc-badge--featured {
	background: var(--pc-accent);
	color: var(--pc-accent-ink);
}

.pc-badge--outofstock {
	background: var(--pc-muted);
}

.pc-badge--preorder {
	background: var(--pc-warn);
}

.pc-badge--lowstock {
	background: var(--pc-warn);
}

/* =====================================================================
   Price
   ===================================================================== */

.pc-price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 700;
	color: var(--pc-ink);
	white-space: nowrap;
}

.pc-price__amount {
	font-size: 1.125rem;
}

.pc-price__original {
	font-size: var(--pc-font-size-sm);
	font-weight: 500;
	color: var(--pc-muted);
	text-decoration: line-through;
}

.pc-price__prefix {
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc-muted);
}

.pc-price__request {
	font-size: var(--pc-font-size-sm);
	font-weight: 600;
	color: var(--pc-muted);
}

.pc-price--on-sale .pc-price__amount {
	color: var(--pc-sale);
}

/* =====================================================================
   Availability
   ===================================================================== */

.pc-stock {
	display: inline-block;
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-surface);
	color: var(--pc-muted);
}

.pc-stock--instock {
	background: var(--pc-ok-soft);
	color: var(--pc-ok);
}

.pc-stock--lowstock,
.pc-stock--preorder {
	background: var(--pc-warn-soft);
	color: var(--pc-warn);
}

.pc-stock--outofstock {
	background: var(--pc-danger-soft);
	color: var(--pc-danger);
}

/* =====================================================================
   Buy / request button
   ===================================================================== */

.pc-buy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.pc-buy__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--pc-accent);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent);
	color: var(--pc-accent-ink);
	font-size: var(--pc-font-size-sm);
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pc-buy__button:hover {
	background: var(--pc-accent-hover);
	border-color: var(--pc-accent-hover);
	color: var(--pc-accent-ink);
}

.pc-buy__button--disabled {
	background: var(--pc-surface-alt);
	border-color: var(--pc-line);
	color: var(--pc-muted);
	cursor: not-allowed;
}

.pc-buy__button--disabled:hover {
	background: var(--pc-surface-alt);
	border-color: var(--pc-line);
	color: var(--pc-muted);
}

.pc-buy__note {
	font-size: var(--pc-font-size-xs);
	line-height: 1.5;
	color: var(--pc-muted);
}

/* =====================================================================
   Specification table
   ===================================================================== */

.pc-specs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 var(--pc-gap);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	overflow: hidden;
}

.pc-specs__row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	border-bottom: 1px solid var(--pc-line);
}

.pc-specs__row:last-child {
	border-bottom: 0;
}

.pc-specs__label {
	margin: 0;
	padding: 10px 14px;
	background: var(--pc-surface);
	font-size: var(--pc-font-size-sm);
	font-weight: 650;
	color: var(--pc-ink);
}

.pc-specs__value {
	margin: 0;
	padding: 10px 14px;
	font-size: var(--pc-font-size-sm);
	color: var(--pc-ink-soft);
}

/* =====================================================================
   Variants
   ===================================================================== */

.pc-variants {
	margin: 0 0 var(--pc-gap);
}

.pc-variants__title {
	margin: 0 0 10px;
	font-size: var(--pc-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-variants__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.pc-variants__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-gap-sm);
	padding: 10px 14px;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
}

.pc-variants__item.is-unavailable {
	opacity: 0.6;
}

.pc-variants__label {
	font-size: var(--pc-font-size-sm);
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-variants__price {
	font-size: var(--pc-font-size-sm);
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-variants__status {
	font-size: var(--pc-font-size-xs);
	color: var(--pc-danger);
}

/* =====================================================================
   COA link
   ===================================================================== */

.pc-coa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
	color: var(--pc-ink);
	font-size: var(--pc-font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.pc-coa:hover {
	border-color: var(--pc-accent);
	color: var(--pc-accent);
}

/* =====================================================================
   Product Details block (front end)
   ===================================================================== */

.pc-product-fields {
	margin: 0 0 var(--pc-gap);
}

.pc-product-fields__title {
	margin: 0 0 12px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pc-ink);
}

/* =====================================================================
   Product CTA block
   ===================================================================== */

.pc-product-buy {
	display: flex;
	align-items: center;
	gap: var(--pc-gap);
	flex-wrap: wrap;
	padding: var(--pc-pad);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	margin: var(--pc-gap) 0;
}

.pc-product-buy--stack {
	flex-direction: column;
	align-items: flex-start;
}

.pc-product-buy__price {
	font-size: 1.25rem;
}

.pc-product-buy__action {
	margin-left: auto;
}

.pc-product-buy--stack .pc-product-buy__action {
	margin-left: 0;
}

/* =====================================================================
   Product grid block
   ===================================================================== */

.pc-product-grid {
	margin: var(--pc-gap) 0;
}

.pc-product-grid__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-gap-sm);
	flex-wrap: wrap;
	margin-bottom: var(--pc-gap);
}

.pc-product-grid__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-product-grid__view-all {
	font-size: var(--pc-font-size-sm);
	font-weight: 600;
	/* The light grey used on the cards, so section links read as one family. */
	color: #e8eae6;
	text-decoration: none;
}

.pc-product-grid__view-all:hover {
	color: var(--pc-accent);
	text-decoration: underline;
}

.pc-product-grid__list {
	display: grid;
	gap: var(--pc-gap);
	grid-template-columns: repeat(var(--pc-cols, 4), minmax(0, 1fr));
}

.pc-product-grid--cols-1 .pc-product-grid__list { --pc-cols: 1; }
.pc-product-grid--cols-2 .pc-product-grid__list { --pc-cols: 2; }
.pc-product-grid--cols-3 .pc-product-grid__list { --pc-cols: 3; }
.pc-product-grid--cols-4 .pc-product-grid__list { --pc-cols: 4; }
.pc-product-grid--cols-5 .pc-product-grid__list { --pc-cols: 5; }
.pc-product-grid--cols-6 .pc-product-grid__list { --pc-cols: 6; }

.pc-product-grid__empty {
	margin: 0;
	padding: var(--pc-pad);
	border: 1px dashed var(--pc-line-strong);
	border-radius: var(--pc-radius);
	text-align: center;
	color: var(--pc-muted);
}

/* =====================================================================
   Category grid block
   ===================================================================== */

.pc-category-grid {
	margin: var(--pc-gap) 0;
}

.pc-category-grid__header {
	margin-bottom: var(--pc-gap);
}

.pc-category-grid__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-category-grid__list {
	display: grid;
	gap: var(--pc-gap);
	grid-template-columns: repeat(var(--pc-cols, 3), minmax(0, 1fr));
}

.pc-category-grid--cols-1 .pc-category-grid__list { --pc-cols: 1; }
.pc-category-grid--cols-2 .pc-category-grid__list { --pc-cols: 2; }
.pc-category-grid--cols-3 .pc-category-grid__list { --pc-cols: 3; }
.pc-category-grid--cols-4 .pc-category-grid__list { --pc-cols: 4; }
.pc-category-grid--cols-5 .pc-category-grid__list { --pc-cols: 5; }
.pc-category-grid--cols-6 .pc-category-grid__list { --pc-cols: 6; }

.pc-category-grid__empty {
	margin: 0;
	color: var(--pc-muted);
}

.pc-cat-card {
	position: relative;
	display: block;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	overflow: hidden;
	text-decoration: none;
	background: var(--pc-bg);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pc-cat-card:hover {
	box-shadow: var(--pc-shadow-hover);
	transform: translateY(-2px);
}

.pc-cat-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--pc-surface);
	overflow: hidden;
}

.pc-cat-card__image {
	width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: auto;
}

.pc-cat-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pc-surface), var(--pc-surface-alt));
}

.pc-cat-card__body {
	display: block;
	padding: 16px var(--pc-pad);
	border-top: 3px solid var(--pc-cat-accent, var(--pc-accent));
}

.pc-cat-card__title {
	display: block;
	font-size: 1rem;
	font-weight: 650;
	color: var(--pc-ink);
}

.pc-cat-card__count {
	display: block;
	margin-top: 2px;
	font-size: var(--pc-font-size-xs);
	color: var(--pc-muted);
}

/* =====================================================================
   Price table block
   ===================================================================== */

.pc-price-table {
	margin: var(--pc-gap) 0;
}

.pc-price-table__header {
	margin-bottom: var(--pc-gap-sm);
}

.pc-price-table__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-price-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
}

.pc-price-table__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pc-font-size-sm);
}

.pc-price-table__head {
	background: var(--pc-surface);
}

.pc-price-table__cell {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--pc-line);
	white-space: nowrap;
}

.pc-price-table__cell--name {
	white-space: normal;
	min-width: 200px;
}

.pc-price-table__cell--price {
	text-align: right;
	font-weight: 700;
}

.pc-price-table__cell--group {
	background: var(--pc-surface-alt);
	font-size: var(--pc-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-price-table__row:last-child .pc-price-table__cell {
	border-bottom: 0;
}

.pc-price-table__link {
	color: var(--pc-ink);
	font-weight: 600;
	text-decoration: none;
}

.pc-price-table__link:hover {
	color: var(--pc-accent);
	text-decoration: underline;
}

.pc-price-table__empty {
	margin: 0;
	color: var(--pc-muted);
}

/* =====================================================================
   Product browser block
   ===================================================================== */

.pc-browser {
	margin: var(--pc-gap) 0;
}

.pc-browser__header {
	margin-bottom: var(--pc-gap-sm);
}

.pc-browser__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-browser__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--pc-gap-sm);
	padding: 16px;
	margin-bottom: var(--pc-gap);
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
}

.pc-browser__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 150px;
}

.pc-browser__field--search {
	flex: 1 1 220px;
}

.pc-browser__field--stock,
.pc-browser__field--reset {
	justify-content: flex-end;
}

.pc-browser__label {
	font-size: var(--pc-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-browser__input,
.pc-browser__select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
	color: var(--pc-ink);
	font-size: var(--pc-font-size-sm);
	line-height: 1.3;
}

.pc-browser__input:focus,
.pc-browser__select:focus {
	outline: 2px solid var(--pc-accent);
	outline-offset: 1px;
	border-color: var(--pc-accent);
}

.pc-browser__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--pc-font-size-sm);
	color: var(--pc-ink);
	cursor: pointer;
	padding-bottom: 9px;
}

.pc-browser__reset {
	padding: 9px 14px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
	color: var(--pc-ink);
	font-size: var(--pc-font-size-sm);
	font-weight: 600;
	cursor: pointer;
}

.pc-browser__reset:hover {
	border-color: var(--pc-accent);
	color: var(--pc-accent);
}

.pc-browser__status {
	margin: 0 0 var(--pc-gap-sm);
	font-size: var(--pc-font-size-sm);
	color: var(--pc-muted);
}

.pc-browser__results {
	display: grid;
	gap: var(--pc-gap);
	grid-template-columns: repeat(var(--pc-cols, 4), minmax(0, 1fr));
	transition: opacity 0.15s ease;
}

.pc-browser__results--cols-1 { --pc-cols: 1; }
.pc-browser__results--cols-2 { --pc-cols: 2; }
.pc-browser__results--cols-3 { --pc-cols: 3; }
.pc-browser__results--cols-4 { --pc-cols: 4; }
.pc-browser__results--cols-5 { --pc-cols: 5; }
.pc-browser__results--cols-6 { --pc-cols: 6; }

.pc-browser.is-loading .pc-browser__results {
	opacity: 0.45;
	pointer-events: none;
}

.pc-browser__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--pc-pad);
	border: 1px dashed var(--pc-line-strong);
	border-radius: var(--pc-radius);
	text-align: center;
	color: var(--pc-muted);
}

.pc-browser__more {
	margin-top: var(--pc-gap);
	text-align: center;
}

.pc-browser__more-button {
	padding: 11px 26px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
	color: var(--pc-ink);
	font-size: var(--pc-font-size-sm);
	font-weight: 650;
	cursor: pointer;
}

.pc-browser__more-button:hover {
	border-color: var(--pc-accent);
	color: var(--pc-accent);
}

/* =====================================================================
   Request form
   ===================================================================== */

.pc-inquiry-block {
	margin: var(--pc-gap) 0;
}

.pc-inquiry-block__intro {
	margin: 0 0 var(--pc-gap);
	color: var(--pc-muted);
	line-height: 1.65;
}

.pc-inquiry-block__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--pc-gap-sm);
}

.pc-inquiry-block__payments-label {
	font-size: var(--pc-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-inquiry-block__payment {
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	padding: 4px 10px;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-surface);
	color: var(--pc-ink-soft);
}

.pc-inquiry {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-gap-sm) var(--pc-gap);
	padding: var(--pc-pad);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-bg);
}

.pc-inquiry__title {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-inquiry__row {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pc-inquiry__row--half {
	grid-column: span 1;
}

.pc-inquiry__row--consent,
.pc-inquiry__row--actions {
	grid-column: 1 / -1;
}

.pc-inquiry__label {
	font-size: var(--pc-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-inquiry__required {
	color: var(--pc-danger);
}

.pc-inquiry__input,
.pc-inquiry__select,
.pc-inquiry__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg);
	color: var(--pc-ink);
	font-family: inherit;
	font-size: var(--pc-font-size-sm);
	line-height: 1.4;
}

.pc-inquiry__input:focus,
.pc-inquiry__select:focus,
.pc-inquiry__textarea:focus {
	outline: 2px solid var(--pc-accent);
	outline-offset: 1px;
	border-color: var(--pc-accent);
}

.pc-inquiry__textarea {
	resize: vertical;
	min-height: 110px;
}

.pc-inquiry__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--pc-font-size-sm);
	line-height: 1.55;
	color: var(--pc-ink-soft);
	cursor: pointer;
}

.pc-inquiry__submit {
	padding: 12px 28px;
	border: 1px solid var(--pc-accent);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent);
	color: var(--pc-accent-ink);
	font-size: var(--pc-font-size);
	font-weight: 650;
	cursor: pointer;
}

.pc-inquiry__submit:hover {
	background: var(--pc-accent-hover);
	border-color: var(--pc-accent-hover);
}

.pc-inquiry__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =====================================================================
   Notices
   ===================================================================== */

.pc-notice {
	margin: 0 0 var(--pc-gap-sm);
	padding: 14px 16px;
	border-radius: var(--pc-radius-sm);
	border-left: 4px solid var(--pc-accent);
	background: var(--pc-accent-soft);
	color: var(--pc-ink);
	font-size: var(--pc-font-size-sm);
	line-height: 1.55;
}

.pc-notice--success {
	border-left-color: var(--pc-ok);
	background: var(--pc-ok-soft);
	color: var(--pc-ok);
}

.pc-notice--error {
	border-left-color: var(--pc-danger);
	background: var(--pc-danger-soft);
	color: var(--pc-danger);
}

/* =====================================================================
   Refund & shipping policy page ([peptide_policy])
   ---------------------------------------------------------------------
   Headings and lists carry a second class on purpose. The theme's page
   content rules (.ps-content h2, .ps-content ul) are a class plus a tag,
   which would otherwise set their size, margins and indent here.
   ===================================================================== */

/* A single-column grid rather than a flex column: its minmax(0, 1fr) track
   stops a wide child (cards, a long email address) from stretching the whole
   page past the viewport on phones. */
.pc-policy {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--pc-gap) * 1.25);
	color: var(--pc-ink-soft);
	overflow-wrap: break-word;
}

.pc-policy__header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 72ch;
}

.pc-policy__eyebrow {
	margin: 0;
	font-size: var(--pc-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-accent);
}

.pc-policy__intro {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--pc-ink-soft);
}

.pc-policy__effective {
	margin: 0;
	font-size: var(--pc-font-size-sm);
	color: var(--pc-muted);
}

.pc-policy__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--pc-gap-sm);
}

.pc-policy__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--pc-pad);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}

.pc-policy__stat-value {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--pc-accent);
}

.pc-policy__stat-label {
	font-size: var(--pc-font-size-sm);
	line-height: 1.45;
	color: var(--pc-ink-soft);
}

.pc-policy__section {
	display: flex;
	flex-direction: column;
	gap: var(--pc-gap-sm);
	padding: var(--pc-pad) calc(var(--pc-pad) * 1.2);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-bg);
}

.pc-policy .pc-policy__heading {
	display: flex;
	align-items: center;
	gap: var(--pc-gap-sm);
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-ink);
}

.pc-policy__number {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-accent-soft);
	color: var(--pc-accent);
	font-size: var(--pc-font-size-sm);
	font-weight: 800;
}

.pc-policy__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 46px;
}

.pc-policy__disputes-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pc-policy__text {
	margin: 0;
	line-height: 1.65;
}

.pc-policy .pc-policy__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-policy__item {
	position: relative;
	padding-left: 18px;
	line-height: 1.65;
}

.pc-policy__item::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pc-accent);
}

.pc-policy__lead {
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-policy__link {
	color: var(--pc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.pc-policy__link:hover {
	color: var(--pc-accent-hover);
}

.pc-policy__help {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pc-gap-sm);
	padding: calc(var(--pc-pad) * 1.6) var(--pc-pad);
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	text-align: center;
}

.pc-policy .pc-policy__help-title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-policy__help-text {
	max-width: 52ch;
	margin: 0;
	line-height: 1.6;
}

.pc-policy__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 12px 26px;
	border: 1px solid var(--pc-accent);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent);
	color: var(--pc-accent-ink);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pc-policy__button:hover {
	border-color: var(--pc-accent-hover);
	background: var(--pc-accent-hover);
	color: var(--pc-accent-ink);
}

.pc-policy__disputes {
	display: flex;
	flex-direction: column;
	gap: var(--pc-gap-sm);
	padding: var(--pc-pad) calc(var(--pc-pad) * 1.2);
	border: 1px solid var(--pc-line);
	border-left: 3px solid var(--pc-accent);
	border-radius: var(--pc-radius-sm);
	/* Surface, not accent-soft: the theme maps accent-soft to a pale tint for
	   its light panels, which left light text unreadable here. */
	background: var(--pc-surface);
}

.pc-policy .pc-policy__badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-gap-sm);
	margin: 0;
	padding: var(--pc-gap) 0 0;
	border-top: 1px solid var(--pc-line);
	list-style: none;
}

.pc-policy__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: var(--pc-pad) var(--pc-gap-sm);
	text-align: center;
}

.pc-policy__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
	border: 1px solid var(--pc-line-strong);
	border-radius: var(--pc-radius-pill);
	color: var(--pc-accent);
}

.pc-policy__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.pc-policy__badge-title {
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-policy__badge-text {
	font-size: var(--pc-font-size-sm);
	line-height: 1.45;
	color: var(--pc-muted);
}

@media (max-width: 900px) {
	.pc-policy .pc-policy__badges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.pc-policy__body {
		padding-left: 0;
	}

	.pc-policy__stat-value {
		font-size: 1.6rem;
	}

	.pc-policy .pc-policy__badges {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Disclaimer block
   ===================================================================== */

.pc-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--pc-gap-sm);
	margin: var(--pc-gap) 0;
}

.pc-disclaimer__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pc-warn);
	color: #fff;
	font-size: var(--pc-font-size-xs);
	font-weight: 800;
	line-height: 1;
}

.pc-disclaimer__body {
	flex: 1 1 auto;
}

.pc-disclaimer__heading {
	margin: 0 0 4px;
	font-size: var(--pc-font-size-sm);
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-disclaimer__text {
	margin: 0;
	font-size: var(--pc-font-size-sm);
	line-height: 1.6;
	color: var(--pc-ink-soft);
}

/* Same feature-panel treatment as the hero. The tokens are bridged from the
   theme (see ps_token_bridge_css), with fallbacks so the block still looks
   right if the plugin is used with another theme. */
.pc-disclaimer--panel {
	padding: 16px var(--pc-pad);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-panel-radius, var(--pc-radius));
	background-color: var(--pc-panel-base, transparent);
	background-image: linear-gradient(
		var(--pc-panel-angle, 50deg),
		var(--pc-panel-a, rgba(15, 111, 214, 0.5)) 0%,
		var(--pc-panel-b, rgba(255, 255, 255, 0.25)) 100%
	);
	color: var(--pc-panel-ink, var(--pc-ink));
}

.pc-disclaimer--panel .pc-disclaimer__heading {
	color: var(--pc-panel-ink, var(--pc-ink));
}

.pc-disclaimer--panel .pc-disclaimer__text {
	color: var(--pc-panel-ink-soft, var(--pc-ink-soft));
}

/* The warning dot reads as clutter on the gradient; the heading already says
   what this is. */
.pc-disclaimer--panel .pc-disclaimer__icon {
	background: var(--pc-panel-ink, var(--pc-ink));
	color: var(--pc-panel-base, #fff);
	opacity: 0.85;
}

.pc-disclaimer--banner {
	justify-content: center;
	padding: 10px 20px;
	background: var(--pc-ink);
	border-radius: 0;
	margin: 0;
}

.pc-disclaimer--banner .pc-disclaimer__text {
	color: #fff;
	font-size: var(--pc-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
}

.pc-disclaimer--fine-print .pc-disclaimer__text {
	font-size: var(--pc-font-size-xs);
	color: var(--pc-muted);
}

.pc-disclaimer--fine-print .pc-disclaimer__icon {
	display: none;
}

/* =====================================================================
   Responsive
   ===================================================================== */

/*
 * These deliberately mirror the two-class shape of the --cols- modifiers above
 * (.pc-product-grid .pc-product-grid__list matches the same specificity as
 * .pc-product-grid--cols-4 .pc-product-grid__list) so they win on source order.
 * No !important anywhere, which keeps theme overrides simple.
 */

@media (max-width: 1024px) {
	.pc-product-grid--cols-5 .pc-product-grid__list,
	.pc-product-grid--cols-6 .pc-product-grid__list {
		--pc-cols: 3;
	}

	.pc-browser__results--cols-5,
	.pc-browser__results--cols-6 {
		--pc-cols: 3;
	}
}

@media (max-width: 782px) {
	.pc-product-grid .pc-product-grid__list {
		--pc-cols: 2;
	}

	.pc-category-grid .pc-category-grid__list {
		--pc-cols: 2;
	}

	.pc-browser__results {
		--pc-cols: 2;
	}

	.pc-browser__field {
		flex: 1 1 100%;
	}

	.pc-product-buy__action {
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.pc-product-grid .pc-product-grid__list {
		--pc-cols: 1;
	}

	.pc-category-grid .pc-category-grid__list {
		--pc-cols: 1;
	}

	.pc-browser__results {
		--pc-cols: 1;
	}

	.pc-inquiry {
		grid-template-columns: 1fr;
	}

	.pc-inquiry__row--half {
		grid-column: 1 / -1;
	}

	.pc-card__footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =====================================================================
   Light card variant
   ---------------------------------------------------------------------
   The card interior is inverted against the dark site: a light grey panel
   with dark text. It matches the image plate above it, so the whole card
   reads as one continuous light object rather than a photo stuck onto a
   dark box.

   Colours are card-scoped tokens, so this does not disturb anything else
   on the page. Note the accent: the bright brand green measures 2.00:1 on
   this background, so links and the eyebrow use the deep green instead.
   ===================================================================== */

.pc-card {
	--pc-card-bg: #e8eae6;
	--pc-card-bg-alt: #dcdfd9;
	--pc-card-ink: #0b1a2b;
	--pc-card-ink-soft: #2b3a2b;
	--pc-card-muted: #556054;
	--pc-card-accent: #2f6114;
	--pc-card-line: rgba(11, 26, 11, 0.14);

	background: var(--pc-card-bg);
	border-color: var(--pc-card-line);
}

.pc-card:hover {
	border-color: rgba(47, 97, 20, 0.45);
}

.pc-card__body {
	background: var(--pc-card-bg);
}

.pc-card__title {
	color: var(--pc-card-ink);
}

.pc-card__link {
	color: var(--pc-card-ink);
}

.pc-card__link:hover {
	color: var(--pc-card-accent);
}

.pc-card__eyebrow {
	color: var(--pc-card-accent);
}

.pc-card__blurb {
	color: var(--pc-card-muted);
}

.pc-card__spec {
	background: var(--pc-card-bg-alt);
	border-color: var(--pc-card-line);
	color: var(--pc-card-ink-soft);
}

.pc-card__footer {
	background: var(--pc-card-bg);
}

/* Price is the loudest thing on the card, so it takes the darkest ink. */
.pc-card__footer .pc-price {
	color: var(--pc-card-ink);
}

.pc-card__footer .pc-price__amount {
	color: var(--pc-card-ink);
}

.pc-card__footer .pc-price__original,
.pc-card__footer .pc-price__prefix,
.pc-card__footer .pc-price__request {
	color: var(--pc-card-muted);
}

.pc-card__footer .pc-price--on-sale .pc-price__amount {
	color: #b3430c;
}

/* The View button becomes an outline on the light panel; a solid green fill
   competed with the price for attention. */
.pc-card__footer .pc-buy__button--view {
	background: transparent;
	border-color: var(--pc-card-accent);
	color: var(--pc-card-accent);
}

.pc-card__footer .pc-buy__button--view:hover {
	background: var(--pc-card-accent);
	color: #f2f5f0;
}

/* Availability chips, retoned for the light panel. */
.pc-card .pc-stock--instock {
	background: rgba(47, 97, 20, 0.14);
	color: #245010;
}

.pc-card .pc-stock--lowstock,
.pc-card .pc-stock--preorder {
	background: rgba(146, 94, 12, 0.14);
	color: #7a4e08;
}

.pc-card .pc-stock--outofstock {
	background: rgba(150, 30, 30, 0.12);
	color: #8f2020;
}

/* =====================================================================
   Light category card
   ---------------------------------------------------------------------
   Same treatment as the product card, so the two grids read as one system.
   The accent bar along the top of the body stays the brand green: it is a
   fill, not text, so the 4.5:1 text rule does not apply to it.
   ===================================================================== */

.pc-cat-card {
	--pc-card-bg: #e8eae6;
	--pc-card-bg-alt: #dcdfd9;
	--pc-card-ink: #0b1a2b;
	--pc-card-muted: #556054;
	--pc-card-accent: #2f6114;
	--pc-card-line: rgba(11, 26, 11, 0.14);

	background: var(--pc-card-bg);
	border-color: var(--pc-card-line);
}

.pc-cat-card:hover {
	border-color: rgba(47, 97, 20, 0.45);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.34);
}

.pc-cat-card__media {
	background: var(--pc-card-bg-alt);
}

.pc-cat-card__body {
	background: var(--pc-card-bg);
	border-top-color: var(--pc-cat-accent, var(--pc-accent));
}

.pc-cat-card__title {
	color: var(--pc-card-ink);
}

.pc-cat-card__count {
	color: var(--pc-card-muted);
}

.pc-cat-card:hover .pc-cat-card__title {
	color: var(--pc-card-accent);
}