/*
Theme Name: Peptide Storefront Bold
Theme URI: https://example.com/
Description: A bright, high-contrast skin for Peptide Storefront. White pages, charcoal ink, teal accents, heavy uppercase type, and product cards with a solid outline, a hard offset shadow and a sticker badge. Everything else - templates, Customizer, SEO, cart and age gate - comes from the parent theme, which must be installed.
Template: peptide-storefront
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptide-storefront-bold
*/

/* ==========================================================================
   HOW THIS SHEET WORKS
   --------------------------------------------------------------------------
   The parent's style.css loads first (functions.php). This file then:
     1. Re-points the parent's --ps-* tokens at a light palette. Most of the
        parent restyles itself from those alone.
     2. Overrides the few places the parent hard-codes its black ground, and
        adds the bold treatments: outlines, offset shadows, uppercase type.
   Component rules are scoped under body.psb so they outrank the parent's and
   the plugin's single-class rules regardless of load order.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Brand */
	--psb-ink: #2d3134;
	--psb-ink-2: #1f2326;
	--psb-teal: #0e9c88;
	--psb-teal-d: #0a7e6e;
	--psb-gold: #f4c24c;
	--psb-red: #d64545;
	--psb-mint: #f2f5f3;
	--psb-mint-2: #e3efe9;
	--psb-muted: #6a7173;

	--psb-border: 2px solid var(--psb-ink);
	--psb-shadow: 4px 4px 0 var(--psb-ink);
	--psb-shadow-lift: 7px 7px 0 var(--psb-ink);
	--psb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Parent tokens, re-pointed */
	--ps-bg: #ffffff;
	--ps-surface: var(--psb-mint);
	--ps-surface-alt: var(--psb-mint-2);
	--ps-inverse: var(--psb-ink);

	--ps-ink: var(--psb-ink);
	--ps-ink-soft: #454b4e;
	--ps-muted: var(--psb-muted);
	--ps-on-inverse: #ffffff;

	--ps-line: rgba(45, 49, 52, 0.14);
	--ps-line-strong: rgba(45, 49, 52, 0.4);

	--ps-accent-ink: #ffffff;
	--ps-accent-deep: var(--psb-teal-d);
	--ps-accent-dark: #07594e;

	--ps-ok: var(--psb-teal);
	--ps-warn: #b7791f;
	--ps-danger: var(--psb-red);

	--ps-radius: 14px;
	--ps-radius-sm: 10px;
	--ps-radius-lg: 18px;

	--ps-shadow-sm: 0 1px 2px rgba(45, 49, 52, 0.08);
	--ps-shadow: var(--psb-shadow);
	--ps-shadow-lg: var(--psb-shadow-lift);
	--ps-glow: none;

	--ps-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ps-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--ps-chrome: none;

	/* Panels (hero, CTA, age gate): a light mint plate with an ink edge */
	--ps-panel-a: rgba(14, 156, 136, 0.10);
	--ps-panel-b: rgba(255, 255, 255, 0);
	--ps-panel-angle: 135deg;
	--ps-panel-radius: 18px;
	--ps-panel-base: var(--psb-mint);
	--ps-panel-ink: var(--psb-ink);
	--ps-panel-ink-soft: #454b4e;
	--ps-panel-value: #ffffff;
	--ps-panel-value-ink: var(--psb-ink);
	--ps-panel-chip: rgba(45, 49, 52, 0.06);
	--ps-panel-line: rgba(45, 49, 52, 0.16);
	--ps-panel-edge: var(--psb-ink);
}

/* ==========================================================================
   2. BASE & TYPE
   ========================================================================== */

body.psb {
	background: #ffffff;
	color: var(--psb-ink);
	font-family: var(--ps-font);
	-webkit-font-smoothing: antialiased;
}

.psb h1,
.psb h2,
.psb h3,
.psb .ps-archive__title,
.psb .ps-section__title {
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--psb-ink);
}

.psb a {
	color: var(--psb-teal-d);
}

/* The parent's metallic fill is for a black page; here it is solid ink. */
.psb .ps-chrome,
.psb .ps-hero__heading {
	background-image: none;
	color: var(--psb-ink);
	-webkit-text-fill-color: currentColor;
	filter: none;
}

.psb ::selection {
	background: var(--psb-gold);
	color: var(--psb-ink);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.psb .ps-button {
	border-radius: 999px;
	border: var(--psb-border);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: transform 0.15s var(--psb-ease), box-shadow 0.15s var(--psb-ease),
		background-color 0.2s ease, color 0.2s ease;
}

.psb .ps-button--primary {
	background: var(--psb-ink);
	border-color: var(--psb-ink);
	color: #ffffff;
	box-shadow: 3px 3px 0 var(--psb-teal);
}

.psb .ps-button--primary:hover {
	background: var(--psb-teal);
	border-color: var(--psb-ink);
	color: #ffffff;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--psb-ink);
}

.psb .ps-button--ghost,
.psb .ps-button--quiet {
	background: #ffffff;
	border-color: var(--psb-ink);
	color: var(--psb-ink);
}

.psb .ps-button--ghost:hover,
.psb .ps-button--quiet:hover {
	background: var(--psb-gold);
	color: var(--psb-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--psb-shadow);
}

/* ==========================================================================
   4. ANNOUNCEMENT, HEADER, NAV
   ========================================================================== */

.psb .ps-announcement {
	background: var(--psb-ink);
	color: #ffffff;
	font-family: var(--ps-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.psb .ps-announce-spacer {
	background-color: var(--psb-ink);
}

.psb .ps-header {
	background: #ffffff;
	border-bottom: var(--psb-border);
}

.psb .ps-brand {
	background-color: transparent !important;
	backdrop-filter: none;
}

.psb .ps-brand__image {
	height: clamp(96px, 13vw, 170px);
	filter: none;
}

.psb .ps-brand__link:hover .ps-brand__image {
	filter: none;
}

.psb .ps-brand__name {
	font-weight: 900;
	letter-spacing: -0.02em;
}

.psb .ps-nav__list {
	backdrop-filter: none;
}

.psb .ps-nav__link {
	border-radius: 999px;
	color: var(--psb-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.psb .ps-nav__link:hover,
.psb .ps-nav__item.current_page_item .ps-nav__link,
.psb .ps-nav__item.current-menu-item .ps-nav__link {
	background: var(--psb-mint-2);
	color: var(--psb-ink);
}

.psb .ps-quicklinks__product {
	color: var(--psb-teal-d);
	font-family: var(--ps-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.psb .ps-nav__list .sub-menu {
	background: #ffffff;
	border: var(--psb-border);
	border-radius: var(--ps-radius-sm);
	box-shadow: var(--psb-shadow);
}

/* Compact bar shown after scrolling, and the mobile menu panel. */
.psb .ps-minibar {
	background-color: rgba(255, 255, 255, 0.94);
	border-bottom: var(--psb-border);
	box-shadow: none;
	backdrop-filter: blur(8px);
}

.psb.ps-body--minibar .ps-nav,
.psb .ps-nav.is-open {
	background: #ffffff;
}

.psb.ps-body--minibar .ps-nav.is-open,
.psb .ps-nav.is-open {
	border-bottom: var(--psb-border);
	box-shadow: 0 10px 0 rgba(45, 49, 52, 0.06);
}

@media (max-width: 900px) {
	.psb .ps-nav {
		background: #ffffff;
	}
}

.psb .ps-header__toggle-bar {
	background: var(--psb-ink);
}

/* ==========================================================================
   5. HERO, TRUST BAR, SECTIONS, CTA
   ========================================================================== */

.psb .ps-hero {
	background:
		radial-gradient(80% 90% at 85% 10%, rgba(14, 156, 136, 0.14) 0%, rgba(14, 156, 136, 0) 60%),
		radial-gradient(60% 70% at 5% 100%, rgba(244, 194, 76, 0.16) 0%, rgba(244, 194, 76, 0) 60%),
		var(--psb-mint);
	border-bottom: var(--psb-border);
}

.psb .ps-hero__inner {
	width: 100%;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) var(--ps-gutter);
	border-radius: 0;
	background: none;
	color: var(--psb-ink);
}

.psb .ps-hero__content {
	max-width: 760px;
}

.psb .ps-hero__eyebrow {
	display: inline-block;
	padding: 6px 10px;
	border: var(--psb-border);
	border-radius: 6px;
	background: var(--psb-gold);
	color: var(--psb-ink);
	font-family: var(--ps-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	box-shadow: 2px 2px 0 var(--psb-ink);
	transform: rotate(-2deg);
}

.psb .ps-hero__heading {
	font-size: clamp(2.4rem, 6.2vw, 4.6rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.psb .ps-hero__text {
	max-width: 58ch;
	color: #454b4e;
	font-size: 1.125rem;
}

.psb .ps-hero__image {
	border: var(--psb-border);
	box-shadow: var(--psb-shadow-lift);
}

.psb .ps-trust {
	background: var(--psb-ink);
	border-bottom: none;
}

.psb .ps-trust__mark {
	background: var(--psb-teal);
	border-color: #ffffff;
	box-shadow: none;
}

.psb .ps-trust__text {
	color: #ffffff;
	font-family: var(--ps-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.psb .ps-section--categories {
	background: var(--psb-mint);
	border-top: var(--psb-border);
	border-bottom: var(--psb-border);
}

.psb .ps-cta {
	border: var(--psb-border);
	background: var(--psb-gold);
	color: var(--psb-ink);
	box-shadow: var(--psb-shadow-lift);
}

.psb .ps-cta__heading {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.psb .ps-cta__text {
	color: var(--psb-ink);
}

.psb .ps-panel {
	border: var(--psb-border);
	box-shadow: var(--psb-shadow-lift);
}

/* ==========================================================================
   6. PRODUCT CARDS
   --------------------------------------------------------------------------
   The headline change. A white card with an ink outline and a hard offset
   shadow, lifting further on hover; a mint radial plate behind the vial; a
   heavy uppercase name; a gold sticker for badges; a full-width ink pill.
   ========================================================================== */

.psb .pc-card {
	--pc-card-bg: #ffffff;
	--pc-card-bg-alt: var(--psb-mint);
	--pc-card-ink: var(--psb-ink);
	--pc-card-ink-soft: #454b4e;
	--pc-card-muted: var(--psb-muted);
	--pc-card-accent: var(--psb-teal-d);
	--pc-card-line: rgba(45, 49, 52, 0.14);

	position: relative;
	overflow: hidden;
	background: #ffffff;
	border: var(--psb-border);
	border-radius: 16px;
	box-shadow: var(--psb-shadow);
	transition: transform 0.18s var(--psb-ease), box-shadow 0.18s var(--psb-ease);
}

.psb .pc-card:hover,
.psb .pc-card:focus-within {
	border-color: var(--psb-ink);
	transform: translate(-3px, -3px);
	box-shadow: var(--psb-shadow-lift);
}

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

.psb .pc-card__media {
	background: radial-gradient(85% 75% at 50% 40%, #ffffff 0%, #eef5f1 62%, #ddebe4 100%);
	border-bottom: var(--psb-border);
}

.psb .pc-card__image {
	transition: transform 0.35s var(--psb-ease);
}

.psb .pc-card:hover .pc-card__image {
	transform: scale(1.05) rotate(-1deg);
}

.psb .pc-card__badges {
	top: 10px;
	left: 10px;
}

.psb .pc-badge {
	border: 1.5px solid var(--psb-ink);
	border-radius: 6px;
	background: var(--psb-gold);
	color: var(--psb-ink);
	font-family: var(--ps-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 2px 2px 0 var(--psb-ink);
	transform: rotate(-2deg);
}

.psb .pc-badge--sale {
	background: var(--psb-red);
	color: #ffffff;
}

.psb .pc-badge--featured {
	background: var(--psb-teal);
	color: #ffffff;
}

.psb .pc-badge--outofstock {
	background: #ffffff;
	color: var(--psb-red);
}

.psb .pc-card__body {
	gap: 8px;
	padding: 16px 16px 18px;
	background-color: #0e9c8840;
	margin: 10px;
	border-radius: 9px;
}

.psb .pc-card__eyebrow {
	color: var(--psb-teal-d);
	font-family: var(--ps-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.psb .pc-card__title {
	margin: 0;
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.psb .pc-card__link,
.psb .pc-card__link:hover {
	color: var(--psb-ink);
	text-decoration: none;
}

.psb .pc-card__blurb {
	color: #454b4e;
	font-size: 13px;
}

.psb .pc-card__spec {
	border: 1.5px solid var(--psb-ink);
	border-radius: 999px;
	background: var(--psb-mint);
	color: var(--psb-ink);
	font-family: var(--ps-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.psb .pc-card__footer {
	gap: 10px;
	border-top: none;
}

.psb .pc-card__footer .pc-price__amount,
.psb .pc-price__amount {
	color: var(--psb-ink);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.psb .pc-price__original {
	color: var(--psb-muted);
}

.psb .pc-card__footer .pc-price--on-sale .pc-price__amount,
.psb .pc-price--on-sale .pc-price__amount {
	color: var(--psb-red);
}

.psb .pc-buy__button,
.psb .pc-card__footer .pc-buy__button--view {
	border: var(--psb-border);
	border-radius: 999px;
	background: var(--psb-ink);
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: transform 0.15s var(--psb-ease), box-shadow 0.15s var(--psb-ease), background-color 0.2s ease;
}

.psb .pc-buy__button:hover,
.psb .pc-card__footer .pc-buy__button--view:hover {
	background: var(--psb-teal);
	border-color: var(--psb-ink);
	color: #ffffff;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--psb-ink);
}

.psb .pc-card__footer .pc-buy__button--view {
	width: 100%;
	justify-content: center;
}

/* More Info: the quieter of the two card buttons. */
.psb .pc-buy__button--info {
	background: #ffffff;
	color: var(--psb-ink);
}

/* Card buttons: Buy is green, More Info is yellow, and the two swap colours
   on hover. */
.psb .pc-buy--card .pc-buy__button--buy {
	background: var(--psb-teal);
	border-color: var(--psb-ink);
	color: #ffffff;
}

.psb .pc-buy--card .pc-buy__button--info {
	background: var(--psb-gold);
	border-color: var(--psb-ink);
	color: var(--psb-ink);
}

.psb .pc-buy--card .pc-buy__button--buy:hover,
.psb .pc-buy--card .pc-buy__button--buy:focus-visible {
	background: var(--psb-gold);
	border-color: var(--psb-ink);
	color: var(--psb-ink);
}

.psb .pc-buy--card .pc-buy__button--info:hover,
.psb .pc-buy--card .pc-buy__button--info:focus-visible {
	background: var(--psb-teal);
	border-color: var(--psb-ink);
	color: #ffffff;
}

/* Quick-buy popup */
.psb .pc-quickbuy__backdrop {
	background: rgba(45, 49, 52, 0.55);
	backdrop-filter: blur(3px);
}

.psb .pc-quickbuy__panel {
	border: var(--psb-border);
	border-radius: 18px;
	background: #ffffff;
	color: var(--psb-ink);
	box-shadow: 8px 8px 0 var(--psb-ink);
}

.psb .pc-quickbuy__media {
	border: var(--psb-border);
	background: radial-gradient(85% 75% at 50% 40%, #ffffff 0%, #eef5f1 62%, #ddebe4 100%);
}

.psb .pc-quickbuy__title {
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.psb .pc-quickbuy .pc-addtocart__label {
	color: var(--psb-muted);
	font-family: var(--ps-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
}

.psb .pc-qty {
	border: var(--psb-border);
	border-radius: 999px;
}

.psb .pc-qty__step:hover {
	background: var(--psb-gold);
	color: var(--psb-ink);
}

.psb .pc-qty .pc-addtocart__qty {
	border: 0;
	border-radius: 0;
	font-weight: 800;
}

.psb .pc-quickbuy__more {
	color: var(--psb-teal-d);
	font-weight: 600;
}

/* The added-to-cart confirmation, in the same style. */
.psb .pc-added__backdrop {
	background: rgba(45, 49, 52, 0.55);
}

.psb .pc-added__panel {
	border: var(--psb-border);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 8px 8px 0 var(--psb-ink);
}

.psb .pc-added__title {
	color: var(--psb-teal-d);
	font-weight: 900;
	text-transform: uppercase;
}

.psb .pc-buy__button--disabled,
.psb .pc-buy__button--disabled:hover {
	background: #ffffff;
	color: var(--psb-muted);
	transform: none;
	box-shadow: none;
}

.psb .pc-card .pc-stock--instock {
	color: var(--psb-teal-d);
}

.psb .pc-card .pc-stock--outofstock {
	color: var(--psb-red);
}

@media (prefers-reduced-motion: reduce) {
	.psb .pc-card,
	.psb .pc-card:hover,
	.psb .pc-card__image,
	.psb .pc-card:hover .pc-card__image,
	.psb .ps-button:hover,
	.psb .pc-buy__button:hover {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   7. ARCHIVE & PRODUCT PAGE
   ========================================================================== */

.psb .ps-archive__header {
	background: var(--psb-mint);
	border-bottom: var(--psb-border);
}

.psb .ps-archive__eyebrow {
	color: var(--psb-teal-d);
	font-family: var(--ps-font-mono);
	letter-spacing: 0.1em;
}

.psb .ps-archive__title {
	font-size: clamp(2rem, 5vw, 3.4rem);
}

.psb .ps-product__details {
	border: var(--psb-border);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: var(--psb-shadow);
}

.psb .ps-product__details .pc-specs__row {
	border-color: rgba(45, 49, 52, 0.14);
}

.psb .ps-product__details .pc-specs__label {
	font-family: var(--ps-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--psb-muted);
}

.psb .ps-product__details .pc-specs__value {
	color: var(--psb-ink);
	font-weight: 700;
}

/* Inputs across the site: cart, checkout, search, inquiry */
.psb input[type="text"],
.psb input[type="email"],
.psb input[type="tel"],
.psb input[type="number"],
.psb input[type="search"],
.psb select,
.psb textarea {
	background: #ffffff;
	border: var(--psb-border);
	border-radius: 10px;
	color: var(--psb-ink);
}

.psb input:focus,
.psb select:focus,
.psb textarea:focus {
	outline: 3px solid rgba(14, 156, 136, 0.35);
	outline-offset: 1px;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.psb .ps-footer {
	background: var(--psb-ink);
	color: #d9dddb;
	border-top: var(--psb-border);
}

.psb .ps-footer a,
.psb .ps-footer__menu a,
.psb .ps-footer__legal-menu a,
.psb .ps-footer__contact-link {
	color: #ffffff;
}

.psb .ps-footer__menu a:hover,
.psb .ps-footer__legal-menu a:hover,
.psb .ps-footer__contact-link:hover {
	color: var(--psb-gold);
}

.psb .ps-footer__widget-title {
	color: #ffffff;
	font-family: var(--ps-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.psb .ps-footer__about,
.psb .ps-footer__disclaimer,
.psb .ps-footer__copyright,
.psb .ps-footer__payments-label,
.psb .ps-brand__tagline {
	color: #b8bebb;
}

.psb .ps-footer__social-link {
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

.psb .ps-footer__social-link:hover {
	background: var(--psb-gold);
	border-color: var(--psb-gold);
	color: var(--psb-ink);
}

.psb .ps-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.14);
}