/* Pine Peptides — single product redesign
 * ponytail: one stylesheet, full-bleed bands via 100vw trick so the
 * dark/light sections break out of Understrap's .container. */

:root {
	--pp-dark: #14331f;
	--pp-dark-2: #0d2417;
	--pp-darker: #081711;
	--pp-gold: #fec13d;
	--pp-gold-d: #eaa91f;
	--pp-teal: #6fcfd6;
	--pp-green: #2c9646;
	--pp-light: #eaf6ec;
	--pp-line: rgba(255, 255, 255, .12);
}

/* product wrapper is full-width (see child woocommerce.php); bands span 100% */
.pp-product-wrapper { overflow-x: hidden; margin: 0 !important; padding: 0 !important; }
/* kill the theme's default top margin on div.product so the dark hero reaches the navbar (no gap) */
.single-product .pp-product-wrapper .pp-single { margin: 0 !important; padding: 0 !important; }
.pp-product-wrapper .pp-hero { margin-top: 0 !important; }

.pp-hero, .pp-related, .pp-focus {
	position: relative;
	width: 100%;
}
.pp-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---------- HERO (dark) ---------- */
.pp-hero {
	/* flat fill, per Figma node 261:439 - sampled uniform #0F2919 edge to edge */
	background: #0F2919;
	color: #fff;
	/* top padding clears the fixed transparent navbar (.navbar position:fixed) */
	padding: 150px 0 64px;
}
.pp-breadcrumb {
	font-size: 16px;
	line-height: 23px;
	font-family: "Jost", sans-serif;
	color: #478086;
	margin-bottom: 30px;
	font-weight:600;
}
.pp-breadcrumb a {
	color: #478086;
	text-decoration: none;
	font-size: 16px;
	line-height: 23px;
	font-family: "Jost", sans-serif;
	font-weight:400;
}
.pp-breadcrumb a:hover { color: #fff; }
.pp-breadcrumb .pp-sep { margin: 0 8px; opacity: .5; }

/* Two columns, ONE row: gallery left, head + summary stacked in a wrapper on the
   right. The wrapper matters — when the head and summary were separate items in
   a two-row grid, a tall gallery spanning both rows inflated row 1 and pushed a
   big gap between the title and the rating. */
/* 1.2fr for the gallery: at a straight 1fr the square frame came out ~430px and read
   small against a summary column that runs ~180px taller. The extra share pushes the
   frame to ~470px so the two columns finish near enough level. */
.pp-hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	column-gap: 48px;
	row-gap: 0;
	align-items: start;
}
.pp-hero-right { grid-column: 2; grid-row: 1; min-width: 0; }
/* line-height:0 kills the inherited strut on the first line box, so the eyebrow's
   text starts level with the gallery frame's top edge instead of sitting a few
   pixels lower on inherited leading. */
.pp-hero-head { line-height: 0; }

/* Gallery: vertical thumbnails on the left, large image on the right.
   The thumb column stretches to the main image and the thumbs divide that
   height, so the first/last thumb line up with the main image's top/bottom
   edges no matter how many there are. */
/* Figma node 261:439: thumb column 122 / gallery 610 = 20%, 7px column gap,
   8px between thumbs. Kept proportional so it holds at every container width. */
.pp-gallery { display: flex; gap: 7px; align-items: stretch; position: relative; grid-column: 1; grid-row: 1; }
/* The column is an EMPTY 20%-wide box — the strip and arrows inside it are all
   absolutely positioned. That is the whole point: an in-flow strip of square thumbs
   is taller than the frame once there are more than ~4, and its height would grow
   the flex line and drag .pp-main taller with it. With nothing in flow the column
   contributes no height, so the line stays exactly as tall as the square frame and
   the strip scrolls inside it. */
.pp-thumbs-col { flex: 0 0 20%; width: 20%; position: relative; }
.pp-thumbs {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; gap: 8px;
	overflow-y: auto; scroll-behavior: smooth;
	scrollbar-width: none; /* the arrows are the affordance */
}
.pp-thumbs::-webkit-scrollbar { display: none; }
/* Arrows only exist once the strip really overflows — .has-scroll is set by JS.
   They float over the first/last thumb rather than taking their own row, so
   turning them on never changes the column's geometry. */
.pp-tnav {
	display: none; position: absolute; z-index: 2;
	left: 50%; transform: translateX(-50%);
	width: 38px; height: 20px;
	align-items: center; justify-content: center;
	padding: 0; border: 1px solid #1B4332; border-radius: 10px;
	background: rgba(9, 26, 16, .88); color: #fff; font-size: 9px; line-height: 1;
	cursor: pointer; transition: .15s;
}
.pp-tup { top: 4px; }
.pp-tdown { bottom: 4px; }
.pp-thumbs-col.has-scroll .pp-tnav { display: flex; }
.pp-tnav:hover { background: rgba(27, 67, 50, .98); }
.pp-tnav[disabled] { opacity: .3; cursor: default; }
/* One fixed size for every thumb: a quarter of the strip minus its three 8px gaps,
   which is roughly square at this column width. Neither grow nor shrink — growing
   is what stretched two thumbs into tall slabs to fill the column, and the leftover
   space below them is fine. Four fit exactly (no arrows); from the fifth on the
   strip overflows and the JS turns the arrows on. Retune 4 and 24px together. */
.pp-thumb {
	flex: 0 0 calc((100% - 24px) / 4);
	padding: 0; border: 1px solid #1B4332;
	border-radius: 8px; overflow: hidden;
	background: rgba(255, 255, 255, .04); cursor: pointer; line-height: 0; transition: .15s;
}
/* cover, not contain — contain letterboxed each thumb, which read as gaps. */
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0; }
.pp-thumb:hover { border-color: rgba(27, 67, 50, .5); }
.pp-thumb.is-active { border-color: rgba(27, 67, 50, .5); }
/* Track holding every image. Desktop: only .is-active is rendered (thumb swap).
   Mobile: it becomes a scroll-snap carousel (see responsive block). */
.pp-main {
	position: relative;
	flex: 1 1 auto; min-width: 0;
	display: flex;
	background: rgba(255, 255, 255, .02); padding: 0;
	/* Slides are absolutely positioned, so the box needs its own size. Fixed square,
	   NOT the lead photo's ratio: following the photo gave landscape shots a short,
	   undersized frame and portrait shots a skyscraper. A square is the same generous
	   box on every product, and it is definite at first paint, so nothing shifts. */
	aspect-ratio: 1 / 1; height: auto;
	border: 1px solid #1B4332;
	border-radius: 8px;
	overflow: hidden;
}
/* Slides are stacked and cross-faded, NOT display:none — a hidden slide is never
   fetched, which is why the first click on each thumb showed a blank/late image.
   Stacking also fixes the height jump between images of different ratios. */
.pp-slide {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease;
}
.pp-slide.is-active { opacity: 1; pointer-events: auto; }
/* `cover` against a frame that JS has already sized to this product's own images:
   the crop is only the small delta between slides, so no bands and no jump.
   !important beats the theme's global `img { height: auto }`. */
.pp-single .pp-slide .pp-main-img {
	width: 100% !important; height: 100% !important;
	max-width: 100% !important; max-height: 100% !important;
	object-fit: cover; display: block; border-radius: 0;
}
/* ---- "Fit whole image in gallery" ----
   Swaps fill-and-crop for show-everything, in both the main frame and the
   thumbnails. Portrait photos get this automatically (content-single-product.php);
   the checkbox only forces it onto a landscape shot.
   Percentage padding, not px, so the inset scales with the frame at every width. */
.pp-gallery.pp-fit .pp-slide { padding: 7%; }
/* auto + max, NOT 100% — the base rule pins the img to the full frame height, and
   `contain` will happily blow a photo past its own pixel count to honour that.
   That upscale is what read as blur. Here the photo paints at its natural size and
   only ever shrinks, so it is pixel-exact or better, never stretched. */
.pp-gallery.pp-fit .pp-slide .pp-main-img {
	width: auto !important; height: auto !important;
	max-width: 100% !important; max-height: 100% !important;
	object-fit: contain; margin: auto;
}
.pp-gallery.pp-fit .pp-thumb img { object-fit: contain; padding: 6px; }

/* ---- Video slides (Product > Gallery display > Gallery videos) ----
   contain, not cover: a video is framed footage, and cropping it to a square box
   would cut the vial out of shots that were composed to include it. */
.pp-slide[data-video] { background: #000; }
.pp-single .pp-slide video.pp-main-video {
	width: 100%; height: 100%; max-width: 100%; max-height: 100%;
	object-fit: contain; display: block; background: #000; border-radius: 0;
}
/* the fit padding is for stills — a video already letterboxes itself */
.pp-gallery.pp-fit .pp-slide[data-video] { padding: 0; }

/* Video thumbnail: same frame as an image thumb, plus a play badge so it reads as
   playable before anything is clicked. */
.pp-thumb.is-video { position: relative; }
.pp-thumb.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pp-thumb.is-video::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 0; height: 0; margin: -7px 0 0 -4px;
	border-style: solid; border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
	pointer-events: none;
}
.pp-thumb.is-video::before {
	content: ""; position: absolute; inset: 0;
	background: rgba(0, 0, 0, .25); pointer-events: none;
}

/* carousel chrome — mobile only */
.pp-gnav, .pp-gdots { display: none; }

/* ---------- LIGHTBOX (built by JS on first click) ---------- */
.pp-main { cursor: zoom-in; }
.pp-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	display: none; align-items: center; justify-content: center;
	background: rgba(4, 14, 9, .92);
	padding: 40px 72px;
}
.pp-lightbox.is-open { display: flex; animation: ppTabIn .2s ease both; }
.pp-lb-img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain; border-radius: 10px; display: block;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.pp-lb-close, .pp-lb-nav {
	position: absolute; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .08); border: 1px solid var(--pp-line);
	color: #fff; cursor: pointer; border-radius: 50%; padding: 0; transition: .15s;
}
.pp-lb-close:hover, .pp-lb-nav:hover { background: var(--pp-gold); color: #14331f; border-color: var(--pp-gold); }
.pp-lb-close { top: 24px; right: 24px; width: 42px; height: 42px; font-size: 28px; line-height: 1; }
.pp-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 20px; }
.pp-lb-prev { left: 18px; }
.pp-lb-next { right: 18px; }
@media (max-width: 575px) {
	.pp-lightbox { padding: 64px 16px; }
	.pp-lb-nav { width: 38px; height: 38px; }
	.pp-lb-prev { left: 8px; }
	.pp-lb-next { right: 8px; }
}

/* summary */
.pp-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-family: "Oxanium", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 15px;
  letter-spacing: 0.15em;
  color: #FEC13D;
}
.pp-title {
	margin: 0 0 14px;
	font-family: "Parkinsans", sans-serif !important;
	font-style: normal;
	font-weight: 600;
	font-size: 42px;
	line-height: 45px;
	color: #FFFFFF;
}
.pp-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pp-rating .star-rating { color: var(--pp-gold); }
.pp-review-count { font-family: "Jost", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px; color: #fff; }
.pp-price {
	font-size: 36px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
	line-height: 45px;
	font-family: "Parkinsans", sans-serif !important;
}
.price {
	font-size: 36px !important;
	font-family: "Parkinsans", sans-serif !important;
}
.pp-price bdi {
	color: #fff;
	font-family: "Parkinsans", sans-serif !important;
}
.pp-price del { opacity: .5; font-weight: 400; font-size: 22px; margin-right: 8px; }
.pp-short-desc { color: #fff; line-height: 24px; margin-bottom: 18px; max-width: 46ch; }

.pp-verify { display: flex; gap: 22px; list-style: none; padding: 0; margin: 0 0 24px; }
.pp-verify li {
	position: relative;
	color: #478086;
	font-size: 18px;
	line-height: 24px;
	font-family: "Jost", sans-serif;
}
.pp-verify li + li::before {
	content: "";
	position: absolute;
	left: -13px;
	opacity: .5;
	width: 5px;
	height: 5px;
	background-color: #478086;
	border-radius: 100%;
	top: 10px;
}

.pp-dose { display: flex; align-items: center; gap: 34px; margin-bottom: 26px; flex-wrap: wrap; }
.pp-dose-label {
	font-size: 18px;
	color: #478086;
	margin: 0;
	line-height: 24px;
	font-family: "Jost", sans-serif;
}
.pp-dose-pills { display: flex; gap: 12px; }
.pp-pill {
	min-width: 62px;
	padding: 4px 10px;
	border-radius: 6px;
	cursor: pointer;
	background: transparent;
	color: #fff;
	border: 1px solid var(--pp-line);
	font-weight: 400;
	transition: .15s;
	white-space: nowrap;
	font-family: "Jost", sans-serif;
}
.pp-pill:hover { border-color: var(--pp-gold); }
.pp-pill.is-active { border-color: var(--pp-gold); color: #fff; }

/* add to cart (WC form): row 1 = stepper + stock, row 2 = full gold button.
 * Grid placement is robust regardless of the theme's DOM order. */
.pp-single .pp-summary form.cart:not(.variations_form) {
	display: grid !important;
	grid-template-columns: auto auto 1fr;
	gap: 20px 18px; align-items: center; justify-items: start;
	max-width: 460px; margin: 0 0 30px;
}
/* min-width = the finished stepper (70 + 85 + 70 + 2px borders). The ± buttons are
   injected by JS after first paint, so without this the box grew from 87px to 227px
   and dragged the stock badge across with it — a real layout shift. Reserving the
   final width up front means the buttons appear in space already held; justify-center
   keeps the lone input sitting where it will end up. */
.pp-single .pp-summary form.cart:not(.variations_form) .quantity {
	grid-column: 1; grid-row: 1;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 227px;
	border: 1px solid var(--pp-line);
	border-radius: 8px; overflow: hidden; float: none; margin: 0;
}
/* stock badge sits beside the stepper */
.pp-single .pp-summary form.cart:not(.variations_form) .pp-stock-badge {
	grid-column: 2; grid-row: 1;
	font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; margin: 0;
}
.pp-stock-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; }
/* Reserve ~90px so the badge doesn't shove the layout when JS injects it after first paint. */
.pp-stock-badge { min-width: 90px; }
.pp-stock-badge.is-in { color: #00E53D; }
.pp-stock-badge.is-in::before { background: #00E53D; }
.pp-stock-badge.is-out { color: #e57373; }
.pp-stock-badge.is-out::before { background: #e57373; }
/* the add-to-cart button is a DIRECT child of the form (± stepper buttons live inside .quantity).
 * Drops to its own full row below the stepper, gold, beating theme styling. */
.pp-single .pp-summary form.cart:not(.variations_form) > button,
.pp-single .pp-summary form.cart:not(.variations_form) > input[type="submit"],
.pp-single .pp-summary form.cart:not(.variations_form) > .single_add_to_cart_button {
	grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: start;
	width: 100%; max-width: 320px;
	background: var(--pp-gold) !important; color: #23331d !important; font-weight: 700 !important;
	letter-spacing: .04em; text-transform: uppercase; border: 0 !important; border-radius: 8px !important;
	padding: 15px 34px !important; cursor: pointer; transition: .15s; box-shadow: none !important;
}
.pp-single .pp-summary form.cart:not(.variations_form) > button:hover,
.pp-single .pp-summary form.cart:not(.variations_form) > .single_add_to_cart_button:hover { background: var(--pp-gold-d) !important; }
/* hide WooCommerce's default "50 in stock" count */
.pp-summary .stock { display: none !important; }

/* ---- Variable products: hide WC dropdown chrome, reuse the pill + gold-button layout ---- */
.pp-single .pp-summary .variations,
.pp-single .pp-summary .reset_variations,
.pp-single .pp-summary .single_variation .price,
.pp-single .pp-summary .woocommerce-variation-price,
.pp-single .pp-summary .woocommerce-variation-availability { display: none !important; }

/* force the whole variation form into a single stacked column (overrides WC/theme floats) */
.pp-single .pp-summary .variations_form {
	display: flex !important; flex-direction: column; align-items: flex-start; width: 100%; gap: 6px;
}
.pp-single .pp-summary .variations_form .pp-dose { width: 100%; float: none !important; }
.pp-single .pp-summary .single_variation_wrap { display: block; width: 100%; clear: both; float: none !important; }
.pp-single .pp-summary .single_variation { margin: 0; }

/* buy row: stepper + stock on row 1, full gold button on row 2 */
.pp-single .pp-summary .woocommerce-variation-add-to-cart {
	display: flex !important; flex-wrap: wrap; align-items: center; gap: 36px 18px;
	width: 100%; max-width: 460px; margin: 0; opacity: 1 !important;
}
/* same reserved stepper width as the simple-product form above */
.pp-single .pp-summary .woocommerce-variation-add-to-cart .quantity {
	order: 1; display: inline-flex; align-items: center; justify-content: center;
	min-width: 227px;
	border: 1px solid #B7E4C7;
	border-radius: 8px; overflow: hidden; float: none; margin: 0;
}
.pp-single .pp-summary .woocommerce-variation-add-to-cart .pp-stock-badge {
	order: 2;
	margin: 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	font-family: "Jost", sans-serif;
}
.pp-single .pp-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	max-width: 215px;
	background: var(--pp-gold) !important;
	color: #000 !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 34px !important;
	cursor: pointer;
	transition: .15s;
	box-shadow: none !important;
	font-family: "Jost", sans-serif;
	font-size: 18px;
	line-height: 36px;
}
.pp-single .pp-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover { background: var(--pp-gold-d) !important; }
.pp-summary form.cart .quantity input.qty {
	width: 85px;
	text-align: center;
	background: transparent;
	color: #fff;
	font-size: 20px;
	line-height:36px;
	-moz-appearance: textfield;
	padding: 5px 4px;
	border-left: 1px solid var(--pp-line);
	border-right: 1px solid var(--pp-line);
	border-bottom:0;
	border-top:0;
	border-radius: 0;
}
.pp-summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.pp-summary form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-qtybtn {
	width: 70px; height: 40px; border: 0; background: transparent; color: #fff;
	font-size: 26px; cursor: pointer; line-height: 1;
}
.pp-summary form.cart button.single_add_to_cart_button {
	background: var(--pp-gold); color: #23331d; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; border: 0; border-radius: 8px; padding: 14px 34px; cursor: pointer;
	transition: .15s;
}
.pp-summary form.cart button.single_add_to_cart_button:hover { background: var(--pp-gold-d); }
.pp-stock { color: var(--pp-green); font-weight: 600; }
.pp-summary .stock.in-stock { color: var(--pp-green); font-weight: 600; }

/* USP row — full width, below the gallery + summary grid (no divider line) */
.pp-usps {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
	/* 22 + 8 + WooCommerce's own 2em form margin = ~62px below Add to cart, per Figma */
	padding-top: 8px; margin-top: 22px;
	/* keep the USP row above the tabs glow, which overlaps it from below */
	position: relative; z-index: 1;
}
.pp-usp { display: flex; gap: 12px; align-items: flex-start; }
.pp-usp svg { flex: 0 0 34px; width: 34px; height: 34px; color: var(--pp-gold); }
.pp-usp .pp-usp-icon {
	flex: 0 0 34px;
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-top: 10px;
}
.pp-usp strong {
	display: block;
	font-size: 20px;
	margin-bottom: 0;
	line-height: 36px;
	font-family: "Parkinsans", sans-serif !important;
	letter-spacing: 0.05em;
}
.pp-usp span {
	color: #fff;
	font-family: "Jost", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
}

/* ---------- TABS ---------- */
/* Flat list of button/panel pairs. Desktop: order pulls every button into row 1
   and every panel below it (a tab strip). Mobile: order is dropped, so each
   button stays above its own panel — an accordion, same markup. */
.pp-tabs {
	position: relative;
	margin-top: 139px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
/* Glow band between the USP row and the tabs.
   Figma node 259:88 "Rectangle 1": 713x279 at x363/y-140 on a 1440 frame,
   fill #1B4332, layer blur 150, radius 400. Figma's 1216px content column
   maps to our 1160px one, so every measurement is scaled by 1160/1216 = 0.954.

   The blob is centred on the boundary between the hero frame and the tabs
   frame, and Figma CLIPS it there - so only its lower half is visible and it
   has a hard top edge. That edge is the effect; without it the blur is too
   diffuse to read. clip-path reproduces it (it applies after the filter);
   the negative insets stop the other three sides from clipping the blur. */
.pp-tabs::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -223px;
	transform: translateX(-50%);
	width: 58.6%;
	height: 266px;
	background: #1B4332;
	border-radius: 382px;
	filter: blur(143px);
	clip-path: inset(133px -400px -400px -400px);
	pointer-events: none;
	z-index: 0;
}
.pp-tab-btn, .pp-tab-panel { position: relative; z-index: 1; }
.pp-tab-btn {
	order: 1;
	background: 0;
	border: 0;
	color: #fff;
	/* Between 992px (where the accordion ends) and ~1200px the five labels no
	   longer fit at 20px/32px, and flex-wrap dropped the last tab onto its own
	   line — a stray "Reviews (25)" under the strip. Type and gaps now scale
	   with the viewport so the row stays one line the whole way down, and each
	   label is nowrap so a tab can never break mid-word. */
	font-size: clamp(16px, 1.55vw, 20px);
	font-weight: 600;
	padding: 0 2px 14px;
	margin: 0 clamp(16px, 2.2vw, 32px) 0 0;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	line-height: 26px;
	font-family: "Parkinsans", sans-serif !important;
	transition: color .3s ease, border-color .3s ease, opacity .3s ease;
	opacity: .72;
}
.pp-tab-btn:first-of-type { margin-left: clamp(0px, 2.1vw, 30px); }
.pp-tab-btn:last-of-type { margin-right: 0; }
.pp-tab-btn:hover { opacity: 1; border-color: rgba(212, 175, 55, .45); }
.pp-tab-btn.is-active { color: #fff; border-color: var(--pp-gold); opacity: 1; }
.pp-tab-panel {
	order: 2;
	width: 100%;
	display: none;
	color: #cfe0d4;
	line-height: 1.7;
	border: 1px solid #478086;
	border-radius: 15px;
	padding: 30px;
	background: rgba(30, 30, 30, 0.3);
}
.pp-tab-panel.is-active { display: block; animation: ppTabIn .38s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes ppTabIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
/* ponytail: fade+rise only; container height snaps. Add JS height animation only if the jump bothers. */
@media (prefers-reduced-motion: reduce) {
	.pp-tab-panel.is-active { animation: none; }
	.pp-tab-btn { transition: none; }
}
.pp-tab-panel p { margin-bottom: 14px; }
.pp-detail-list { list-style: none; padding: 0; margin: 0; }
.pp-detail-list li { padding: 8px 0; border-bottom: 1px solid var(--pp-line); }
.pp-detail-list strong { color: #fff; margin-right: 6px; }

/* ===== Reviews tab =====
 * WooCommerce's stock reviews markup dropped onto a dark panel. Woo's own CSS assumes
 * a white background, so everything below is a recolour - no re-layout, no custom
 * review markup. !important beats woocommerce.css, whose selectors carry two IDs.
 * ponytail: scoped to the panel, so none of it leaks into cart/checkout/account. */
.pp-tab-panel[data-panel="reviews"] .woocommerce-Reviews-title,
.pp-tab-panel[data-panel="reviews"] #reply-title {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	display: block;
	margin: 0 0 18px;
	font-family: "Parkinsans", sans-serif;
}
.pp-tab-panel[data-panel="reviews"] ol.commentlist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 28px !important;
}
.pp-tab-panel[data-panel="reviews"] ol.commentlist li { margin: 0 0 14px !important; }
.pp-tab-panel[data-panel="reviews"] .comment_container { display: flex; gap: 14px; align-items: flex-start; }
.pp-tab-panel[data-panel="reviews"] img.avatar {
	width: 44px !important;
	height: 44px;
	border-radius: 50%;
	float: none !important;
	position: static !important;
	padding: 0 !important;
	border: 1px solid var(--pp-line) !important;
	background: transparent !important;
}
.pp-tab-panel[data-panel="reviews"] .comment-text {
	flex: 1;
	margin: 0 !important;
	padding: 16px 18px !important;
	border: 1px solid var(--pp-line) !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
}
.pp-tab-panel[data-panel="reviews"] .star-rating { color: var(--pp-gold); }
/* Star picker in the form: Woo colours the <a>, the glyph inherits it. Dim until
   hovered or picked, so the current choice is obvious on a dark panel. */
.pp-tab-panel[data-panel="reviews"] p.stars a { color: rgba(255, 255, 255, .35); }
.pp-tab-panel[data-panel="reviews"] p.stars:hover a,
.pp-tab-panel[data-panel="reviews"] p.stars.selected a { color: var(--pp-gold); }
.pp-tab-panel[data-panel="reviews"] .comment-text .meta { color: #9fb8a7; font-size: 14px; margin: 6px 0 10px; }
.pp-tab-panel[data-panel="reviews"] .woocommerce-review__author { color: #fff; }
.pp-tab-panel[data-panel="reviews"] .description p:last-child { margin-bottom: 0; }

/* Review form */
.pp-tab-panel[data-panel="reviews"] #review_form_wrapper {
	border-top: 1px solid var(--pp-line);
	padding-top: 24px;
	max-width: 100%;
	margin: 24px auto 0;
}
.pp-tab-panel[data-panel="reviews"] .comment-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
}
.pp-tab-panel[data-panel="reviews"] .comment-form > * {
	margin: 0;
}
.pp-tab-panel[data-panel="reviews"] .comment-form label { display: block; color: #fff; margin-bottom: 6px; }
.pp-tab-panel[data-panel="reviews"] .comment-form input[type="text"],
.pp-tab-panel[data-panel="reviews"] .comment-form input[type="email"],
.pp-tab-panel[data-panel="reviews"] .comment-form textarea {
	width: 100%;
	background: rgba(0, 0, 0, .25);
	color: #fff;
	border: 1px solid var(--pp-line);
	border-radius: 10px;
	padding: 12px 14px;
}
.pp-tab-panel[data-panel="reviews"] .comment-form input:focus,
.pp-tab-panel[data-panel="reviews"] .comment-form textarea:focus { outline: none; border-color: var(--pp-gold); }

/* Name + Email side by side */
.pp-tab-panel[data-panel="reviews"] .comment-form-author,
.pp-tab-panel[data-panel="reviews"] .comment-form-email {
	flex: 1 1 calc(50% - 10px);
}

/* Rating, textarea, submit and cookies span full width */
.pp-tab-panel[data-panel="reviews"] .comment-form-rating,
.pp-tab-panel[data-panel="reviews"] .comment-form-comment,
.pp-tab-panel[data-panel="reviews"] .form-submit,
.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent {
	flex: 0 0 100%;
}

/* Move checkbox below the submit button */
.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent {
	order: 10;
}

.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent label { display: inline; margin-left: 8px; }
/* Submit matches the gold add-to-cart button. Understrap prints this control with
   Bootstrap's `btn btn-secondary`, so the selector covers input/button and both
   classes and uses !important — .btn's own custom-property background otherwise
   repaints it grey. */
.pp-tab-panel[data-panel="reviews"] #respond input[type="submit"],
.pp-tab-panel[data-panel="reviews"] #respond button[type="submit"],
.pp-tab-panel[data-panel="reviews"] .form-submit input[type="submit"],
.pp-tab-panel[data-panel="reviews"] .form-submit button[type="submit"] {
	background: var(--pp-gold) !important;
	color: #23331d !important;
	font-family: "Jost", sans-serif;
	font-size: 18px;
	line-height: 36px;
	font-weight: 600 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 34px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: .15s;
}
.pp-tab-panel[data-panel="reviews"] #respond input[type="submit"]:hover,
.pp-tab-panel[data-panel="reviews"] #respond button[type="submit"]:hover,
.pp-tab-panel[data-panel="reviews"] .form-submit input[type="submit"]:hover,
.pp-tab-panel[data-panel="reviews"] .form-submit button[type="submit"]:hover {
	background: var(--pp-gold-d) !important;
	color: #23331d !important;
}
.pp-tab-panel[data-panel="reviews"] #respond input[type="submit"]:focus-visible,
.pp-tab-panel[data-panel="reviews"] #respond button[type="submit"]:focus-visible {
	outline: 2px solid var(--pp-gold); outline-offset: 2px;
}

/* ---------- RELATED (light) ---------- */
.pp-related {
	background-color: #d8efdd;
	color: #14331f;
	padding: 100px 0;
	background-image: url(../src/r-pbg.webp);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.pp-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.pp-related-head h2 {
	font-size: 36px;
	margin: 0;
	line-height: 45px;
	font-weight: 600;
	color: #000;
}
.pp-viewall {
	border: 1px solid #14331f;
	border-radius: 6px;
	padding: 8px 22px;
	color: #14331f;
	text-decoration: none;
	font-size: 18px;
	line-height: 36px;
	text-transform: uppercase;
	font-weight: 600;
	transition: .15s;
	letter-spacing: 0.05em;
	font-family: "Jost", sans-serif;
}
.pp-viewall:hover { background: #14331f; color: #fff; }
/* theme sets ul.products to display:flex; keep that and make a true 4-up row */
.pp-related .products { justify-content: flex-start !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; }
.pp-related .products::before, .pp-related .products::after { display: none !important; content: none !important; }

/* self-contained related card styling (mirrors the shop cards; deterministic on this page) */
.pp-related ul.products li.product {
	width: calc(25% - 18px) !important; margin: 0 !important; float: none !important; clear: none !important;
	background: #bfe6c2 !important; border-radius: 14px !important;
	padding: 26px 16px 24px !important; text-align: center;
	display: flex !important; flex-direction: column;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
@media (max-width: 991px) { .pp-related ul.products li.product { width: calc(50% - 12px) !important; } }
@media (max-width: 575px) { .pp-related ul.products li.product { width: 100% !important; } }
.pp-related ul.products li.product a img {
	width: auto !important; max-width: 100% !important; height: 220px !important;
	object-fit: contain; margin: 0 auto 16px !important; display: block; box-shadow: none;
}
.pp-related ul.products li.product .woocommerce-loop-product__title {
	font-size: 20px !important; font-weight: 600; color: #14331f !important;
	padding: 0 !important; margin-bottom: .5rem !important; line-height: 26px;
}
.pp-related ul.products li.product .pn-product-excerpt {
	font-size: 15px; line-height: 22px; color: #2f5138; margin-bottom: 16px;
}
.pp-related ul.products li.product .pn-product-excerpt p { margin: 0; }
.pp-related ul.products li.product .pn-product-foot {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.pp-related ul.products li.product .price {
	font-size: 36px !important; font-weight: 600; color: #0F2919 !important; margin: 0 !important; line-height: 45px;
}
.pp-related ul.products li.product .price del { font-size: 17px; opacity: .6; margin-right: 6px; }
.pp-related ul.products li.product .price ins { text-decoration: none; }
.pp-related ul.products li.product .button,
.pp-related ul.products li.product .add_to_cart_button {
	display: inline-flex !important; align-items: center; gap: 8px;
	background: #C6A662 !important; color: #14331f !important;
	font-size: 15px !important; font-weight: 600; padding: 7px 16px !important;
	border-radius: 6px !important; border: 0 !important; margin: 0 !important;
}
.pp-related ul.products li.product .button:hover { background: #d3a557 !important; opacity: .85; }
.pp-related ul.products li.product .pn-cart-icon {
	width: 18px !important; height: 18px !important; margin: 0 !important; box-shadow: none !important;
}

/* ---------- FOCUS (dark) ---------- */
.pp-focus { background: var(--pp-darker); color: #fff; padding: 72px 0; }
.pp-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pp-focus-art {
	min-height: 380px; border-radius: 999px;
	background: radial-gradient(closest-side, rgba(46,150,70,.35), transparent 70%),
	            radial-gradient(closest-side at 30% 40%, rgba(24,162,182,.30), transparent 60%);
}
.pp-focus-copy h2 { font-size: 34px; margin: 0 0 18px; }
.pp-focus-copy p { color: #b9cdbf; line-height: 1.7; margin-bottom: 22px; max-width: 52ch; }
.pp-focus-list { list-style: none; padding: 0; margin: 0 0 28px; }
.pp-focus-list li { position: relative; padding-left: 30px; margin-bottom: 14px; font-weight: 600; }
.pp-focus-list li::before {
	content: "✓"; position: absolute; left: 0; top: -1px; color: var(--pp-gold);
	background: rgba(254,193,61,.14); width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center; font-size: 12px;
}
.pp-btn-outline {
	display: inline-block; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
	padding: 13px 28px; color: #fff; text-decoration: none; font-size: 13px;
	letter-spacing: .1em; text-transform: uppercase; font-weight: 600; transition: .15s;
}
.pp-btn-outline:hover { background: var(--pp-gold); color: #23331d; border-color: var(--pp-gold); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.pp-container { padding: 0 24px; }
	/* clears the fixed navbar without leaving a dead band above the breadcrumb */
	.pp-hero { padding: 124px 0 56px; }
	.pp-breadcrumb { font-size: 14px; line-height: 20px; margin-bottom: 18px; }
	.pp-breadcrumb a { font-size: 14px; line-height: 20px; }

	/* single column. display:contents dissolves the right-hand wrapper so the head,
	   gallery and summary become siblings again and `order` can interleave them:
	   title → gallery → summary. */
	.pp-hero-grid, .pp-focus-grid { grid-template-columns: 1fr; row-gap: 24px; column-gap: 0; }
	.pp-hero-right { display: contents; }
	.pp-hero-head, .pp-gallery, .pp-summary { grid-column: 1; grid-row: auto; }
	.pp-hero-head { order: 1; margin-bottom: -6px; }
	.pp-gallery { order: 2; }
	.pp-summary { order: 3; }
	.pp-title { font-size: 30px; line-height: 38px; }

	/* gallery becomes a single-image carousel: thumbs out, arrows + dots in */
	.pp-thumbs-col { display: none; }
	.pp-gallery { flex-direction: column; gap: 14px; }
	.pp-main {
		/* height follows the image ratio (JS sets it) instead of a fixed 340px — that
		   fixed box was wider than it was tall on tablets and cropped the vial. */
		width: 100%; height: auto; max-height: 78vh;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pp-main::-webkit-scrollbar { display: none; }
	/* back to real in-flow slides for the scroll-snap track */
	.pp-slide {
		position: relative; inset: auto; opacity: 1; pointer-events: auto;
		flex: 0 0 100%; min-width: 100%;
		display: flex; align-items: stretch; scroll-snap-align: center; height: 100%; padding: 0;
	}
	/* No override here — slides inherit the base `cover`, so every slide fills the
	   frame edge to edge even when its ratio differs from the lead image's.
	   Products ticked "Fit whole image in gallery" still win with `contain`. */

	.pp-gnav {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 0; bottom: 24px; width: 38px;
		padding: 0; border: 0; border-radius: 8px;
		background: transparent; color: #fff; font-size: 20px; line-height: 1;
		cursor: pointer; z-index: 2;
	}
	.pp-gprev { left: 4px; }
	.pp-gnext { right: 4px; }
	.pp-gnav::before {
		content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
		background: rgba(15, 41, 25, .72); border: 1px solid #1B4332; z-index: -1;
	}
	.pp-gdots { display: flex; justify-content: center; gap: 8px; }
	.pp-gdot {
		width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
		border: 1px solid rgba(255, 255, 255, .45); background: transparent; transition: .15s;
	}
	.pp-gdot.is-active { background: var(--pp-gold); border-color: var(--pp-gold); }

	/* summary blocks stay left-aligned and full width */
	.pp-short-desc { max-width: none; }
	/* one line, always: shrink type instead of wrapping (a wrapped item orphans its • bullet) */
	.pp-verify { flex-wrap: nowrap; gap: 18px; }
	.pp-verify li { font-size: 16px; white-space: nowrap; }
	.pp-verify li + li::before { left: -11px; top: 9px; }
	.pp-price { font-size: 30px; line-height: 38px; }
	.pp-single .pp-summary form.cart:not(.variations_form),
	.pp-single .pp-summary .woocommerce-variation-add-to-cart { max-width: 100%; gap: 18px; }
	.pp-single .pp-summary form.cart:not(.variations_form) > button,
	.pp-single .pp-summary form.cart:not(.variations_form) > .single_add_to_cart_button,
	.pp-single .pp-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button { max-width: 100%; }
	.pp-dose { gap: 14px 20px; }

	.pp-usps { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px; }
	.pp-related .products { grid-template-columns: repeat(2, 1fr); }
	.pp-related { padding: 64px 0; }
	.pp-related-head h2 { font-size: 28px; line-height: 36px; }
	.pp-focus { padding: 56px 0; }
	.pp-focus-art { min-height: 240px; }

	/* ---- tabs become an accordion: drop `order`, each button owns the panel under it ---- */
	.pp-tabs { display: block; margin-top: 72px; }
	.pp-usps { padding-bottom: 16px; }
	.pp-tab-btn {
		order: 0;
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		width: 100%; margin: 0 0 10px; padding: 14px 18px;
		text-align: left; font-size: 17px; line-height: 24px; opacity: 1;
		border: 1px solid #478086; border-radius: 12px;
		background: rgba(30, 30, 30, .3);
	}
	.pp-tab-btn:first-of-type { margin-left: 0; }
	.pp-tab-btn::after {
		content: "+"; font-size: 22px; line-height: 1; color: var(--pp-gold); flex: 0 0 auto;
		transition: transform .25s ease;
	}
	.pp-tab-btn.is-active { border-color: var(--pp-gold); }
	.pp-tab-btn.is-active::after { content: "\2212"; }
	.pp-tab-panel {
		order: 0;
		border: 0; background: transparent; border-radius: 0;
		/* 19px, not 18: the button is padded 18px inside a 1px border, so its
		   label starts 19px from the card edge. Matching that puts the panel
		   text on the same vertical line instead of one notch to the left. */
		padding: 14px 19px 0;
		margin: -2px 0 10px;
	}
	/* The last paragraph's own 14px margin stacked on top of the panel's bottom
	   padding and margin — roughly 40px of dead space before the next header.
	   The panel's margin alone sets that gap now. */
	.pp-tab-panel > *:last-child { margin-bottom: 0; }
}
@media (max-width: 575px) {
	.pp-container { padding: 0 16px; }
	.pp-hero { padding: 118px 0 44px; }
	.pp-title { font-size: 26px; line-height: 33px; }
	.pp-verify { gap: 14px; }
	.pp-verify li { font-size: 14px; line-height: 20px; }
	.pp-verify li + li::before { left: -9px; top: 8px; }
	.pp-usps, .pp-related .products { grid-template-columns: 1fr; }
	.pp-usp { align-items: center; }
	.pp-related-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.pp-related { padding: 48px 0; }
	.pp-tab-btn { font-size: 16px; padding: 13px 15px; }
	/* Same alignment rule as the tablet accordion: button padding 15px + 1px border. */
	.pp-tab-panel { padding: 14px 16px 0; }
	.pp-tabs { margin-top: 100px; }
	/* same construction, scaled down; clip still lands 64px above the tabs */
	.pp-tabs::before {
		top: -160px; width: 86%; height: 190px; filter: blur(100px);
		clip-path: inset(96px -300px -300px -300px);
	}
	/* Review form: stack name/email on mobile */
	.pp-tab-panel[data-panel="reviews"] #review_form_wrapper { max-width: 100%; }
	.pp-tab-panel[data-panel="reviews"] .comment-form-author,
	.pp-tab-panel[data-panel="reviews"] .comment-form-email { flex: 0 0 100%; }
	.pp-tab-panel[data-panel="reviews"] .comment-form { gap: 12px 0; }
	.pp-tab-panel[data-panel="reviews"] .comment-form input[type="text"],
	.pp-tab-panel[data-panel="reviews"] .comment-form input[type="email"],
	.pp-tab-panel[data-panel="reviews"] .comment-form textarea {
		padding: 10px 12px; font-size: 14px;
	}
	.pp-tab-panel[data-panel="reviews"] .comment-form label { font-size: 14px; margin-bottom: 4px; }
	.pp-tab-panel[data-panel="reviews"] .comment-form p.stars { font-size: 12px; }
	.pp-tab-panel[data-panel="reviews"] .comment-form p.stars a { font-size: 18px; }
	.pp-tab-panel[data-panel="reviews"] #respond input[type="submit"],
	.pp-tab-panel[data-panel="reviews"] #respond button[type="submit"],
	.pp-tab-panel[data-panel="reviews"] .form-submit input[type="submit"],
	.pp-tab-panel[data-panel="reviews"] .form-submit button[type="submit"] {
		width: 100%; text-align: center; font-size: 16px; line-height: 40px;
	}
	.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent {
		display: flex; align-items: center; gap: 8px;
	}
	.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent label {
		margin: 0; font-size: 13px;
	}
	#review_form { max-width: 100% !important; }
}
/* ---- tablet: review form tweaks ---- */
@media (min-width: 576px) and (max-width: 991px) {
	.pp-tab-panel[data-panel="reviews"] #review_form_wrapper { max-width: 100%; }
	.pp-tab-panel[data-panel="reviews"] .comment-form { gap: 14px 18px; }
	.pp-tab-panel[data-panel="reviews"] .comment-form-author,
	.pp-tab-panel[data-panel="reviews"] .comment-form-email { flex: 1 1 calc(50% - 9px); }
	.pp-tab-panel[data-panel="reviews"] .comment-form-cookies-consent {
		display: flex; align-items: center; gap: 8px;
	}
}