/*
Theme Name: Blocksy Child
Theme URI: https://prime-pep.com
Description: Blocksy child theme for Prime Peptide
Author: Ahmed Abdelhamid
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

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

:root {
	/* Brand */
	--pp-navy:        #03285C;
	--pp-navy-dark:   #021D42;
	--pp-gold:        #D5B067;
	--pp-gold-dark:   #B8954F;
	--pp-gold-text:   #8A6829; /* AA-safe gold for TEXT only */

	/* Surfaces */
	--pp-white:       #FDFDFE;
	--pp-cream:       #F8F4ED;
	--pp-cream-deep:  #EFE2CB;
	--pp-border:      #E8E1D4;

	/* Text */
	--pp-text:        #1A2332;
	--pp-text-muted:  #6B7280;

	/* Radius */
	--pp-r-sm:  8px;
	--pp-r:     14px;
	--pp-r-lg:  24px;

	/* Section rhythm */
	--pp-section-y: 96px;
	--pp-gap:       24px;

	/* Shadow */
	--pp-shadow: 0 2px 14px rgba(3, 40, 92, 0.06);
}

@media (max-width: 768px) {
	:root {
		--pp-section-y: 56px;
		--pp-gap:       16px;
	}
}

/* ==========================================================================
   2. SECTION BACKGROUNDS
   ========================================================================== */

.pp-bg-cream { background-color: var(--pp-cream); }
.pp-bg-white { background-color: var(--pp-white); }

.pp-section {
	padding-top:    var(--pp-section-y);
	padding-bottom: var(--pp-section-y);
}

/* ==========================================================================
   3. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Small uppercase label above section titles */
.pp-eyebrow {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--pp-gold-text);
	margin-bottom:  14px;
	display:        block;
}

/* Lab-style micro text, e.g. "7 products - lyophilised" */
.pp-mono {
	font-family:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:      12px;
	letter-spacing: 0.01em;
	color:          var(--pp-text-muted);
}

/* Second line of the hero H1 */
.pp-accent { color: var(--pp-gold-text); }

.pp-muted { color: var(--pp-text-muted); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.pp-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         15px 30px;
	border-radius:   var(--pp-r-sm);
	font-size:       13px;
	font-weight:     600;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	text-decoration: none;
	border:          1px solid transparent;
	transition:      background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Gold button + navy label = 7.0:1 contrast */
.pp-btn--gold {
	background-color: var(--pp-gold);
	color:            var(--pp-navy);
}
.pp-btn--gold:hover {
	background-color: var(--pp-gold-dark);
	color:            var(--pp-navy);
}

/* Navy button replaces the reference black button */
.pp-btn--navy {
	background-color: var(--pp-navy);
	color:            var(--pp-white);
}
.pp-btn--navy:hover {
	background-color: var(--pp-navy-dark);
	color:            var(--pp-white);
}

.pp-btn--ghost {
	background-color: transparent;
	border-color:     var(--pp-navy);
	color:            var(--pp-navy);
}
.pp-btn--ghost:hover {
	background-color: var(--pp-navy);
	color:            var(--pp-white);
}

/* Text link with arrow, e.g. "BROWSE VIALS >" */
.pp-link {
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text);
	text-decoration: none;
}
.pp-link:hover { color: var(--pp-navy); }

/* ==========================================================================
   5. CARDS
   ========================================================================== */

.pp-card {
	background-color: var(--pp-white);
	border:           1px solid var(--pp-border);
	border-radius:    var(--pp-r);
	box-shadow:       var(--pp-shadow);
	overflow:         hidden;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

/* Rounded panel inset from the viewport edges, as in the reference */
.pp-hero {
	background-image: linear-gradient(120deg, var(--pp-cream) 0%, var(--pp-cream-deep) 100%);
	border-radius:    var(--pp-r-lg);
	margin:           0 24px;
	overflow:         hidden;
}

@media (max-width: 768px) {
	.pp-hero {
		margin:        0 12px;
		border-radius: var(--pp-r);
	}
}

/* ==========================================================================
   7. ACCESSIBILITY GUARDS
   ========================================================================== */

/* Never let raw gold be used as text on a light surface (1.9:1). */
.pp-bg-cream .pp-eyebrow,
.pp-bg-white .pp-eyebrow,
.pp-bg-cream .pp-link,
.pp-bg-white .pp-link {
	color: var(--pp-gold-text);
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline:        2px solid var(--pp-navy);
	outline-offset: 2px;
}

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

/* Legal disclaimer strip above the copyright line */
.pp-disclaimer {
	font-size:     11px;
	line-height:   1.7;
	color:         var(--pp-text-muted);
	padding:       18px 0;
	border-top:    1px solid var(--pp-border);
	margin-top:    24px;
}

.pp-disclaimer strong {
	color:       var(--pp-text);
	font-weight: 700;
}

/* Copyright row: left and right aligned on desktop, stacked on mobile */
.pp-copyright {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             12px;
	font-size:       11px;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	color:           var(--pp-text-muted);
}

@media (max-width: 600px) {
	.pp-copyright {
		flex-direction: column;
		align-items:    flex-start;
	}
}

/* Newsletter row */
.pp-newsletter-title {
	font-size:     18px;
	font-weight:   700;
	color:         var(--pp-text);
	margin-bottom: 4px;
}

.pp-newsletter-sub {
	font-size: 13px;
	color:     var(--pp-text-muted);
}

/* Email input inside the footer form */
.pp-newsletter input[type="email"] {
	width:            100%;
	padding:          13px 16px;
	border:           1px solid var(--pp-border);
	border-radius:    var(--pp-r-sm);
	background-color: var(--pp-white);
	font-size:        14px;
}

.pp-newsletter input[type="email"]:focus {
	outline:      2px solid var(--pp-navy);
	outline-offset: 1px;
}

/* Column headings in the footer widget areas */
.pp-foot-heading {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--pp-gold-text);
	margin-bottom:  14px;
}
/* ==========================================================================
   9. HOMEPAGE - HERO   (corrected against reference screenshot)
   ========================================================================== */

:root {
	--pp-hero-inset: 40px;   /* distance from viewport edge - tune if needed */
}

.pp-hero {
	margin:        24px var(--pp-hero-inset) 0;
	border-radius: var(--pp-r);
	padding:       0;
}

.pp-hero .pp-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"copy    media"
		"actions media"
		"trust   media";
	column-gap:    40px;
	row-gap:       22px;
	align-items:   start;
	align-content: center;
	min-height:    540px;
	max-width:     1240px;
	width:         100%;
	margin:        0 auto;
	padding:       72px 56px;
}

.pp-hero .pp-hero__copy    { grid-area: copy; }
.pp-hero .pp-hero__actions { grid-area: actions; }
.pp-hero .pp-hero__trust   { grid-area: trust; }
.pp-hero .pp-hero__media   { grid-area: media; align-self: center; }

.pp-hero__title {
	font-size:      58px;
	font-weight:    700;
	line-height:    1.08;
	letter-spacing: -0.02em;
	color:          var(--pp-navy);
	margin:         0 0 16px;
}

.pp-hero__sub {
	font-size:   16px;
	line-height: 1.65;
	color:       var(--pp-text-muted);
	max-width:   40ch;
	margin:      0;
}

/* --- Buttons: gold solid first, navy solid second (matches reference) --- */
.pp-btn-row {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
}

/* --- Trust strip: icons, no divider line --- */
.pp-trust-row {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px 26px;
}

.pp-trust-item {
	display:     inline-flex;
	align-items: center;
	gap:         7px;
	font-size:   12px;
	line-height: 1.4;
	color:       var(--pp-text-muted);
}

.pp-trust-item svg {
	width:       14px;
	height:      14px;
	flex-shrink: 0;
	color:       var(--pp-gold-text);
}

/* --- Media: transparent product PNG, no card, no CSS rotation --- */
.pp-hero__media {
	justify-items: end;
}

.pp-hero__media img {
	display:     block;
	width:       100%;
	max-width:   520px;
	height:      auto;
	margin-left: auto;
}

@media (max-width: 1024px) {
	.pp-hero .pp-hero__inner {
		padding:    56px 32px;
		column-gap: 28px;
		min-height: 0;
	}
	.pp-hero__title { font-size: 44px; }
}

@media (max-width: 768px) {
	:root { --pp-hero-inset: 12px; }

	.pp-hero { margin-top: 12px; }

	.pp-hero .pp-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"media"
			"actions"
			"trust";
		padding: 40px 20px;
		row-gap: 24px;
	}

	.pp-hero__title { font-size: 34px; }
	.pp-hero__sub   { font-size: 15px; max-width: none; }

	.pp-btn-row          { width: 100%; }
	.pp-btn-row .pp-btn  { width: 100%; }
	.pp-hero__media img  { max-width: 340px; margin: 0 auto; }
}
/* ==========================================================================
   9b. HERO REFINEMENTS
   ========================================================================== */

.pp-hero .pp-hero__inner {
	grid-template-columns: 1.12fr 0.88fr;
	column-gap: 44px;
	max-width:  1320px;
}

.pp-hero__title { font-size: 52px; }

.pp-trust-row  { gap: 8px 20px; }
.pp-trust-item { font-size: 11px; }


/* ==========================================================================
   10. SHARED LAYOUT + HEADINGS
   ========================================================================== */

/* Content wrapper - matches the hero inner width so every section aligns */
.pp-wrap {
	max-width: 1320px;
	width:     100%;
	margin:    0 auto;
	padding:   0 56px;
}

/* Inset rounded band, same treatment as the hero */
.pp-band {
	margin:        0 var(--pp-hero-inset);
	border-radius: var(--pp-r);
	overflow:      hidden;
}

.pp-h2 {
	font-size:      38px;
	font-weight:    600;
	line-height:    1.2;
	letter-spacing: -0.015em;
	color:          var(--pp-navy);
	margin:         0 0 14px;
}

.pp-h3 {
	font-size:      20px;
	font-weight:    600;
	line-height:    1.35;
	letter-spacing: -0.01em;
	color:          var(--pp-navy);
	margin:         0 0 8px;
}

.pp-lead {
	font-size:   15px;
	line-height: 1.7;
	color:       var(--pp-text-muted);
	max-width:   46ch;
	margin:      0;
}

/* Section header: title block left, optional link right */
.pp-sec-head {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	gap:             24px;
	flex-wrap:       wrap;
	margin-bottom:   36px;
}

.pp-sec-head--center {
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	margin-bottom:  44px;
}

.pp-sec-head--center .pp-h2 { margin-bottom: 0; }

@media (max-width: 768px) {
	.pp-wrap     { padding: 0 20px; }
	.pp-h2       { font-size: 26px; }
	.pp-h3       { font-size: 18px; }
	.pp-sec-head { margin-bottom: 26px; }
}

/* ==========================================================================
   11. FORMAT CARDS
   ========================================================================== */

.pp-format__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--pp-gap);
}

.pp-format__card {
	display:               grid;
	grid-template-columns: 42% 1fr;
	align-items:           center;
}

.pp-format__media {
	background-color: var(--pp-cream);
	height:           100%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          18px;
}

.pp-format__media img {
	display:   block;
	width:     100%;
	max-width: 150px;
	height:    auto;
}

.pp-format__body {
	padding: 22px 22px 22px 18px;
}

.pp-format__body .pp-mono {
	display: block;
	margin:  0 0 10px;
}

.pp-card__text {
	font-size:   14px;
	line-height: 1.65;
	color:       var(--pp-text-muted);
	margin:      0 0 14px;
}

@media (max-width: 980px) {
	.pp-format__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. FEATURE CARDS
   ========================================================================== */

.pp-feature__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--pp-gap);
	max-width:             1080px;
	margin:                0 auto;
}

.pp-feature__card { padding: 24px; }

.pp-feature__icon {
	width:            40px;
	height:           40px;
	border-radius:    var(--pp-r-sm);
	background-color: var(--pp-cream);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	margin-bottom:    16px;
	color:            var(--pp-gold-text);
}

.pp-feature__card p {
	font-size:   13px;
	line-height: 1.7;
	color:       var(--pp-text-muted);
	margin:      0;
}

@media (max-width: 900px) {
	.pp-feature__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. GOAL CARDS
   ========================================================================== */

.pp-goal__grid {
	display:               grid;
	grid-template-columns: repeat(5, 1fr);
	gap:                   14px;
}

.pp-goal__card {
	display:         block;
	text-decoration: none;
	transition:      border-color .2s ease;
}

.pp-goal__card:hover { border-color: var(--pp-gold); }

.pp-goal__media {
	display:      block;
	aspect-ratio: 4 / 3;
	overflow:     hidden;
}

.pp-goal__media img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.pp-goal__label {
	display:     block;
	padding:     12px 14px;
	font-size:   13px;
	font-weight: 500;
	color:       var(--pp-navy);
	border-top:  1px solid var(--pp-border);
}

@media (max-width: 900px) {
	.pp-goal__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   14. PRODUCT CARDS
   ========================================================================== */

.pp-prod__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--pp-gap);
}

.pp-prod__media { padding: 20px 20px 8px; }

.pp-prod__media img {
	display:      block;
	width:        100%;
	height:       auto;
	aspect-ratio: 1 / 1;
	object-fit:   contain;
}

.pp-prod__body { padding: 0 16px 16px; }

.pp-prod__cat {
	display:        block;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--pp-gold-text);
	margin-bottom:  6px;
}

.pp-prod__title {
	font-size:      15px;
	font-weight:    600;
	text-transform: uppercase;
	color:          var(--pp-navy);
	margin:         0 0 6px;
}

.pp-prod__price {
	font-size:   15px;
	font-weight: 700;
	color:       var(--pp-gold-text);
	margin:      0 0 12px;
}

.pp-prod__opts {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 14px;
}

.pp-pill {
	font-size:        10px;
	font-weight:      600;
	padding:          5px 10px;
	border-radius:    999px;
	border:           1px solid var(--pp-border);
	background-color: var(--pp-white);
	color:            var(--pp-text-muted);
}

.pp-pill--on {
	background-color: var(--pp-navy);
	border-color:     var(--pp-navy);
	color:            var(--pp-white);
}

.pp-prod__cart {
	width:     100%;
	padding:   12px 14px;
	font-size: 11px;
}

@media (max-width: 900px) {
	.pp-prod__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   15. NEWSLETTER BAND
   ========================================================================== */

.pp-news-band { padding: 44px 0; }

.pp-news {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             24px;
	flex-wrap:       wrap;
}

.pp-news__form {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.pp-news__form input[type="email"] {
	width:     320px;
	max-width: 100%;
}

@media (max-width: 700px) {
	.pp-news__form        { width: 100%; }
	.pp-news__form input[type="email"] { width: 100%; }
}

/* ==========================================================================
   16. SECTION RHYTHM FIX
   ========================================================================== */

/* Elementor wraps every widget in a div - make sure sections stay full width */
.elementor-widget-html { width: 100%; }



/* ==========================================================================
   17. DYNAMIC BLOCKS - WOOCOMMERCE OUTPUT + 2-CARD FORMAT GRID
   ========================================================================== */

/* --- Choose Your Format: two cards instead of three --- */

.pp-format__grid--2 { grid-template-columns: repeat(2, 1fr); }

.pp-format__grid--2 .pp-format__card { grid-template-columns: 34% 1fr; }

.pp-format__grid--2 .pp-format__media img { max-width: 170px; }

@media (max-width: 980px) {
	.pp-format__grid--2 { grid-template-columns: 1fr; }
}

/* --- Product cards rendered by WooCommerce --- */

.pp-prod__media {
	display: block;
}

.pp-prod__media img {
	margin: 0 auto;
}

.pp-prod__title a {
	color:           inherit;
	text-decoration: none;
}

.pp-prod__title a:hover {
	color: var(--pp-gold-text);
}

/* WooCommerce wraps prices in <span class="woocommerce-Price-amount"> */
.pp-prod__price .woocommerce-Price-amount,
.pp-prod__price bdi {
	color: inherit;
}

/* Strikethrough original price on sale items */
.pp-prod__price del {
	color:       var(--pp-text-muted);
	font-weight: 400;
	margin-right: 6px;
}

.pp-prod__price ins {
	text-decoration: none;
}

/* "View cart" link WooCommerce appends after an AJAX add-to-cart */
.pp-prod__body .added_to_cart {
	display:         block;
	margin-top:      8px;
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text);
	text-decoration: none;
}

.pp-prod__body .added_to_cart:hover {
	color: var(--pp-navy);
}

/* Loading state on the AJAX button */
.pp-prod__cart.loading {
	opacity: 0.6;
}

/* ==========================================================================
   18. FORMAT SECTION - TWO FULL CARDS
   ========================================================================== */

/* Force two equal columns regardless of rule order */
.pp-format__grid.pp-format__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

/* Bigger internal proportions so each card reads full, not empty */
.pp-format__grid--2 .pp-format__card {
	grid-template-columns: 40% 1fr;
	min-height: 280px;
}

.pp-format__grid--2 .pp-format__media {
	padding: 28px;
}

.pp-format__grid--2 .pp-format__media img {
	width:      auto;
	max-width:  100%;
	max-height: 210px;
	object-fit: contain;
}

.pp-format__grid--2 .pp-format__body {
	padding: 32px 34px 32px 28px;
}

.pp-format__grid--2 .pp-h3      { font-size: 24px; }
.pp-format__grid--2 .pp-card__text { font-size: 15px; max-width: 44ch; }

@media (max-width: 980px) {
	.pp-format__grid.pp-format__grid--2 { grid-template-columns: 1fr; }
	.pp-format__grid--2 .pp-format__card { min-height: 0; }
	.pp-format__grid--2 .pp-format__media img { max-height: 160px; }
}
/* ==========================================================================
   19. FULL-WIDTH LAYOUT
   ========================================================================== */

:root {
	--pp-gutter: 64px;   /* distance from viewport edge to content */
}

/* Fluid width instead of a 1320px cap */
section .pp-wrap {
	max-width: none;
	padding:   0 var(--pp-gutter);
}

/* Inside an inset band, subtract the band's own margin so every
   section starts at exactly the same x position */
.pp-band .pp-wrap,
.pp-hero .pp-hero__inner {
	max-width:     none;
	padding-left:  calc(var(--pp-gutter) - var(--pp-hero-inset));
	padding-right: calc(var(--pp-gutter) - var(--pp-hero-inset));
}

/* Narrower image column now that the cards are much wider */
.pp-format__grid--2 .pp-format__card {
	grid-template-columns: 32% 1fr;
}

@media (max-width: 768px) {
	:root { --pp-gutter: 20px; }
}

/* ==========================================================================
   18. SINGLE PRODUCT TEMPLATE (PDP)
   All colours fall back to the brand palette if a token is missing.
   ========================================================================== */

.single-product .pp-pdp__eyebrow,
.single-product .pp-pdp__title,
.single-product .pp-pdp__excerpt,
.single-product .pp-pdp__wyg,
.single-product .pp-pdp__back {
	font-family: var(--pp-font-body, "Montserrat", sans-serif);
}

/* --- 18.1  Gallery ------------------------------------------------------- */

.single-product .woocommerce-product-gallery {
	background:     var(--pp-white, #FDFDFE);
	border:         1px solid var(--pp-line, #E7E1D4);
	border-radius:  14px;
	padding:        30px;
}

.single-product .woocommerce-product-gallery img {
	mix-blend-mode: multiply; /* kills the white box on non-transparent PNGs */
}

.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

/* --- 18.2  Eyebrow + title ---------------------------------------------- */

.single-product .pp-pdp__eyebrow {
	margin:          0 0 14px;
	font-size:       11px;
	font-weight:     700;
	line-height:     1.4;
	letter-spacing:  0.16em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text, #B4914B);
}

.single-product .pp-pdp__title {
	margin:          0 0 18px;
	font-size:       38px;
	font-weight:     700;
	line-height:     1.15;
	letter-spacing:  -0.01em;
	color:           var(--pp-navy, #03285C);
}

.single-product .pp-pdp__title-strength {
	color: var(--pp-gold, #D5B067);
}

/* --- 18.3  Short description + View more -------------------------------- */

.single-product .pp-pdp__excerpt {
	margin-bottom: 22px;
}

.single-product .pp-pdp__excerpt-text {
	display:              -webkit-box;
	-webkit-line-clamp:   3;
	line-clamp:           3;
	-webkit-box-orient:   vertical;
	overflow:             hidden;
	font-size:            15px;
	line-height:          1.75;
	color:                var(--pp-text-muted, #5C6779);
}

.single-product .pp-pdp__excerpt.is-open .pp-pdp__excerpt-text {
	display:            block;
	-webkit-line-clamp: unset;
	line-clamp:         unset;
	overflow:           visible;
}

.single-product .pp-pdp__excerpt-text p {
	margin: 0 0 10px;
}

.single-product .pp-pdp__excerpt-text p:last-child {
	margin-bottom: 0;
}

.single-product .pp-pdp__excerpt-toggle {
	margin:          6px 0 0;
	padding:         0;
	background:      none;
	border:          0;
	font-size:       14px;
	font-weight:     600;
	color:           var(--pp-gold-text, #B4914B);
	cursor:          pointer;
}

.single-product .pp-pdp__excerpt-toggle:hover {
	color: var(--pp-navy, #03285C);
}

/* --- 18.4  Variation swatches ------------------------------------------- */

.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations td {
	display: block;
	width:   100%;
	border:  0;
	padding: 0;
	margin:  0;
}

.single-product .variations .label,
.single-product .variations th {
	display: none;
}

.single-product .reset_variations {
	display: none !important;
}

/* Keep the native select in the DOM but out of sight. */
.single-product .pp-swatches-select {
	position: absolute;
	width:    1px;
	height:   1px;
	overflow: hidden;
	clip:     rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.single-product .pp-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin:    0 0 22px;
}

.single-product .pp-swatch {
	padding:         7px 16px;
	border:          1px solid var(--pp-gold, #D5B067);
	border-radius:   999px;
	background:      transparent;
	font-family:     inherit;
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  0.03em;
	color:           var(--pp-gold-text, #B4914B);
	cursor:          pointer;
	transition:      background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.single-product .pp-swatch:hover {
	background: var(--pp-cream, #FAF6EC);
}

.single-product .pp-swatch.is-active {
	background:   var(--pp-navy, #03285C);
	border-color: var(--pp-navy, #03285C);
	color:        var(--pp-white, #FDFDFE);
}

.single-product .pp-swatch.is-disabled {
	opacity:        0.35;
	cursor:         not-allowed;
	text-decoration: line-through;
}

.single-product .pp-swatch:focus-visible {
	outline:        2px solid var(--pp-navy, #03285C);
	outline-offset: 2px;
}

/* --- 18.5  What you get -------------------------------------------------- */

.single-product .pp-pdp__wyg {
	margin:         0 0 26px;
	padding:        20px 22px;
	background:     var(--pp-cream, #FAF6EC);
	border-radius:  12px;
}

.single-product .pp-pdp__wyg-label {
	margin:          0 0 12px;
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  0.14em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text, #B4914B);
}

.single-product .pp-pdp__wyg-list {
	margin:     0;
	padding:    0;
	list-style: none;
}

.single-product .pp-pdp__wyg-list li {
	position:     relative;
	padding-left: 18px;
	margin:       0 0 9px;
	font-size:    14px;
	line-height:  1.6;
	color:        var(--pp-navy, #03285C);
}

.single-product .pp-pdp__wyg-list li:last-child {
	margin-bottom: 0;
}

.single-product .pp-pdp__wyg-list li::before {
	content:       "";
	position:      absolute;
	left:          0;
	top:           8px;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--pp-gold, #D5B067);
}

/* --- 18.6  Price --------------------------------------------------------- */

.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price .amount {
	font-size:   30px;
	font-weight: 700;
	color:       var(--pp-navy, #03285C);
}

.single-product .woocommerce-variation-price {
	margin: 0 0 18px;
}

.single-product .woocommerce-variation-availability {
	font-size: 13px;
	color:     var(--pp-text-muted, #5C6779);
}

/* --- 18.7  Quantity + buttons -------------------------------------------- */

.single-product .woocommerce-variation-add-to-cart {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   12px;
	align-items:           stretch;
}

.single-product .woocommerce-variation-add-to-cart input[type="hidden"] {
	display: none;
}

.single-product .woocommerce-variation-add-to-cart .quantity {
	grid-column:   1 / -1;
	width:         max-content;
	border:        1px solid var(--pp-line, #E7E1D4);
	border-radius: 8px;
	overflow:      hidden;
}

.single-product .woocommerce-variation-add-to-cart .quantity input {
	border:     0;
	background: transparent;
	text-align: center;
}

.single-product .single_add_to_cart_button,
.single-product .pp-pdp__buy-now {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             9px;
	width:           100%;
	min-height:      52px;
	padding:         0 18px;
	border:          0;
	border-radius:   8px;
	font-family:     inherit;
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	cursor:          pointer;
	transition:      opacity 0.15s ease;
}

.single-product .single_add_to_cart_button {
	background: var(--pp-navy, #03285C);
	color:      var(--pp-white, #FDFDFE);
}

.single-product .single_add_to_cart_button::before {
	content:             "";
	width:               17px;
	height:              17px;
	flex:                0 0 17px;
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     contain;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFDFE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}

.single-product .pp-pdp__buy-now {
	background: var(--pp-gold, #D5B067);
	color:      var(--pp-navy, #03285C);
}

.single-product .single_add_to_cart_button:hover,
.single-product .pp-pdp__buy-now:hover {
	opacity: 0.88;
}

/* --- 18.8  Back link ----------------------------------------------------- */

.single-product .pp-pdp__back {
	display:         inline-block;
	margin-top:      18px;
	font-size:       14px;
	font-weight:     600;
	color:           var(--pp-gold-text, #B4914B);
	text-decoration: none;
}

.single-product .pp-pdp__back::before {
	content:      "\2190";
	margin-right: 6px;
}

.single-product .pp-pdp__back:hover {
	color: var(--pp-navy, #03285C);
}

/* --- 18.9  Under the columns: purity bar + add-on ------------------------ */

.single-product .pp-pdp__under {
	max-width: 720px;
	margin:    0 0 12px;
}

.single-product .pp-pdp__purity {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         14px 18px;
	background:      var(--pp-cream, #FAF6EC);
	border-radius:   10px;
}

.single-product .pp-pdp__purity-label {
	display:         block;
	font-size:       10px;
	font-weight:     700;
	letter-spacing:  0.16em;
	text-transform:  uppercase;
	color:           var(--pp-text-muted, #5C6779);
}

.single-product .pp-pdp__purity-value {
	display:     block;
	font-size:   16px;
	font-weight: 700;
	color:       var(--pp-navy, #03285C);
}

.single-product .pp-pdp__verify {
	flex:            0 0 auto;
	padding:         8px 16px;
	border:          1px solid var(--pp-gold, #D5B067);
	border-radius:   999px;
	background:      var(--pp-white, #FDFDFE);
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text, #B4914B);
	text-decoration: none;
}

.single-product .pp-pdp__verify:hover {
	background: var(--pp-gold, #D5B067);
	color:      var(--pp-navy, #03285C);
}

.single-product .pp-pdp__addon {
	display:       grid;
	grid-template-columns: 54px 1fr auto auto;
	align-items:   center;
	gap:           16px;
	padding:       14px 18px;
	background:    var(--pp-white, #FDFDFE);
	border:        1px solid var(--pp-line, #E7E1D4);
	border-radius: 10px;
}

.single-product .pp-pdp__addon-media img {
	display:       block;
	width:         54px;
	height:        auto;
	border-radius: 6px;
}

.single-product .pp-pdp__addon-title {
	display:     block;
	font-size:   14px;
	font-weight: 600;
	color:       var(--pp-navy, #03285C);
}

.single-product .pp-pdp__addon-sub {
	display:   block;
	margin-top: 3px;
	font-size: 12px;
	color:     var(--pp-text-muted, #5C6779);
}

.single-product .pp-pdp__addon-price {
	font-size:   15px;
	font-weight: 700;
	color:       var(--pp-navy, #03285C);
	white-space: nowrap;
}

.single-product .pp-pdp__addon-btn {
	padding:         9px 18px;
	border:          1px solid var(--pp-gold, #D5B067);
	border-radius:   999px;
	background:      transparent;
	font-family:     inherit;
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--pp-gold-text, #B4914B);
	cursor:          pointer;
}

.single-product .pp-pdp__addon-btn:hover {
	background: var(--pp-gold, #D5B067);
	color:      var(--pp-navy, #03285C);
}

.single-product .pp-pdp__addon-btn.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.single-product .pp-pdp__addon-btn.is-added {
	background:     var(--pp-gold, #D5B067);
	color:          var(--pp-navy, #03285C);
	pointer-events: none;
}

/* --- 18.10  Breadcrumbs -------------------------------------------------- */

.single-product .ct-breadcrumbs {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--pp-text-muted, #5C6779);
}

/* --- 18.11  Responsive --------------------------------------------------- */

@media (max-width: 767px) {

	.single-product .pp-pdp__title {
		font-size: 28px;
	}

	.single-product .woocommerce-product-gallery {
		padding: 18px;
	}

	.single-product .woocommerce-variation-add-to-cart {
		grid-template-columns: 1fr;
	}

	.single-product .woocommerce-variation-add-to-cart .quantity {
		width: 100%;
	}

	.single-product .pp-pdp__addon {
		grid-template-columns: 46px 1fr;
		row-gap:               12px;
	}

	.single-product .pp-pdp__addon-price,
	.single-product .pp-pdp__addon-btn {
		grid-column: 2 / -1;
		justify-self: start;
	}

	.single-product .pp-pdp__purity {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {

	.single-product .pp-swatch,
	.single-product .single_add_to_cart_button,
	.single-product .pp-pdp__buy-now {
		transition: none;
	}
}

/* ==========================================================================
   18.12  BLOCKSY OVERRIDES (PDP only)

   Blocksy Companion prints its dynamic CSS after the child stylesheet, so
   rules with equal specificity lose. Everything here is scoped to
   body.single-product and only touches properties Blocksy is winning.
   ========================================================================== */

/* --- Quantity + buttons row ---------------------------------------------- */

body.single-product .woocommerce-variation-add-to-cart {
	display:               grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap:                   12px !important;
	align-items:           stretch !important;
}

body.single-product .woocommerce-variation-add-to-cart .quantity {
	grid-column:   1 / -1 !important;
	width:         max-content !important;
	min-width:     132px;
	margin:        0 !important;
	border:        1px solid var(--pp-line, #E7E1D4) !important;
	border-radius: 8px !important;
	background:    var(--pp-white, #FDFDFE) !important;
	overflow:      hidden;
}

body.single-product .woocommerce-variation-add-to-cart .quantity input,
body.single-product .woocommerce-variation-add-to-cart .quantity button {
	border:     0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color:      var(--pp-navy, #03285C) !important;
}

body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product .woocommerce-variation-add-to-cart .pp-pdp__buy-now {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             9px;
	width:           100% !important;
	min-height:      52px !important;
	margin:          0 !important;
	padding:         0 18px !important;
	border:          0 !important;
	border-radius:   8px !important;
	font-size:       12px !important;
	font-weight:     700 !important;
	letter-spacing:  0.12em !important;
	text-transform:  uppercase !important;
	box-shadow:      none !important;
	transform:       none !important;
}

body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	background-color: var(--pp-navy, #192a3d) !important;
	color:            var(--pp-white, #FDFDFE) !important;
}

body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
	background-color: var(--pp-navy, #03285C) !important;
	opacity:          0.88;
}

/* Waiting for a variation to be picked. */
body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed {
	background-color: var(--pp-navy, #03285C) !important;
	color:            var(--pp-white, #FDFDFE) !important;
	opacity:          0.35 !important;
}

body.single-product .woocommerce-variation-add-to-cart .pp-pdp__buy-now {
	background-color: var(--pp-gold, #D5B067) !important;
	color:            var(--pp-navy, #03285C) !important;
}

body.single-product .woocommerce-variation-add-to-cart .pp-pdp__buy-now:hover {
	background-color: var(--pp-gold, #D5B067) !important;
	opacity:          0.88;
}

/* --- Price --------------------------------------------------------------- */

body.single-product .woocommerce-variation-price .price,
body.single-product .woocommerce-variation-price .price .amount,
body.single-product .woocommerce-variation-price .price bdi {
	font-size:   30px !important;
	font-weight: 700 !important;
	color:       var(--pp-navy, #03285C) !important;
}

/* --- Breadcrumbs --------------------------------------------------------- */

body.single-product .ct-breadcrumbs,
body.single-product .ct-breadcrumbs span {
	color: var(--pp-text-muted, #5C6779) !important;
}

body.single-product .ct-breadcrumbs a {
	color:           var(--pp-text-muted, #5C6779) !important;
	text-decoration: none !important;
}

body.single-product .ct-breadcrumbs a:hover {
	color: var(--pp-gold-text, #B4914B) !important;
}

/* --- Title --------------------------------------------------------------- */

body.single-product .pp-pdp__title {
	font-size:   clamp(28px, 2.6vw, 38px) !important;
	line-height: 1.15 !important;
	color:       var(--pp-navy, #03285C) !important;
}

body.single-product .pp-pdp__title-strength {
	color: var(--pp-gold, #D5B067) !important;
}

/* --- Swatches ------------------------------------------------------------ */

body.single-product .pp-swatch {
	min-height:    0 !important;
	padding:       7px 16px !important;
	border-radius: 999px !important;
	box-shadow:    none !important;
	text-transform: none !important;
}

body.single-product .pp-swatch.is-active {
	background-color: var(--pp-navy, #03285C) !important;
	border-color:     var(--pp-navy, #03285C) !important;
	color:            var(--pp-white, #FDFDFE) !important;
}

/* --- Latin digits in the quantity field even on an RTL locale ------------ */

body.single-product .quantity input[type="number"] {
	font-feature-settings: normal;
	direction:             ltr !important;
	text-align:            center !important;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {

	body.single-product .woocommerce-variation-add-to-cart {
		grid-template-columns: 1fr !important;
	}

	body.single-product .woocommerce-variation-add-to-cart .quantity {
		width: 100% !important;
	}
}