/*
 * ProFormance Peptides — Redesign Foundation
 * ---------------------------------------------------------------------------
 * Loaded sitewide from `proformance-customizations.php`. Contains the design
 * tokens + reusable component atoms from the 2026-07-19 Claude handoff.
 *
 * See:
 *   - handoff README: /Users/mtchz/Downloads/design_handoff_proformance_ui/README.md
 *   - handoff sources: design/*.dc.html (`v = { ... }` maps are the source of truth)
 *   - guardrails: .cursor/rules/redesign-guardrails.mdc
 *
 * Naming: everything is prefixed `.ppc-r-*` (r = redesign) so this file cannot
 * collide with the existing `customizations.css` styles that keep the current
 * cart, checkout, age gate, and mobile drawer working.
 * ---------------------------------------------------------------------------
 */

/* ---------------------------- 1. Design tokens ---------------------------- */

:root {
	/* Color — ink / text */
	--ppc-r-ink:            #0e1a2b;   /* primary text, headings */
	--ppc-r-ink-2:          #3d4a57;   /* body secondary / lead */
	--ppc-r-steel:          #5b6b7d;   /* muted, sub-labels, captions */
	--ppc-r-faint:          #93a2b3;   /* placeholders, notes */
	--ppc-r-faint-2:        #9aa8b8;

	/* Color — accent (approved 2026-07-19: #1c46d4, replaces old #0056b3) */
	--ppc-r-accent:         #1c46d4;
	--ppc-r-accent-dark:    #12329e;   /* hover / active */
	--ppc-r-accent-tint:    #eef2fd;   /* selected chips, number-chip bg */
	--ppc-r-accent-border:  #dbe4fb;   /* selected chip border */

	/* Color — surface */
	--ppc-r-line:           #e4e9f0;   /* card borders, dividers */
	--ppc-r-soft:           #f6f8fb;   /* alt sections, inputs, image wells */
	--ppc-r-dark:           #0e1a2b;   /* About band bg */

	/* Color — footer */
	--ppc-r-footer-bg:      #0a1420;
	--ppc-r-footer-text:    #c6d2e0;
	--ppc-r-footer-muted:   #8595a8;
	--ppc-r-footer-head:    #6b7c90;   /* section labels (mono, uppercase) */

	/* Color — purity green (product tag) */
	--ppc-r-purity-bg:      #eafaf1;
	--ppc-r-purity-text:    #1f8a54;

	/* Fonts */
	--ppc-r-font-h:         'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--ppc-r-font-b:         'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
	--ppc-r-font-m:         'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Radius */
	--ppc-r-radius-card:    16px;      /* product / info cards */
	--ppc-r-radius-card-lg: 18px;      /* hero + about image wells */
	--ppc-r-radius-btn:     10px;
	--ppc-r-radius-input:   10px;
	--ppc-r-radius-chip:    8px;       /* number chip, dose chip base */
	--ppc-r-radius-pill:    999px;

	/* Shadow */
	--ppc-r-shadow-card:    0 30px 60px -40px rgba(14, 26, 43, .35);
	--ppc-r-shadow-frame:   0 40px 80px -40px rgba(14, 26, 43, .4);
	--ppc-r-shadow-btn:     0 8px 20px -8px #1c46d4;

	/* Layout (see mobile responsive contract in redesign-guardrails.mdc §3) */
	--ppc-r-container:      1180px;
	--ppc-r-pad-x:          48px;      /* desktop side padding */
	--ppc-r-pad-x-m:        20px;      /* mobile (≤768px) side padding */
	--ppc-r-sec-y:          76px;      /* desktop section vertical padding */
	--ppc-r-sec-y-m:        44px;      /* mobile section vertical padding */
	--ppc-r-gap:            22px;      /* desktop grid gap */
	--ppc-r-gap-m:          12px;      /* mobile grid gap */
}

/* ------------------------- 2. Container + section ------------------------- */

.ppc-r-container {
	max-width: var(--ppc-r-container);
	margin: 0 auto;
	padding-left: var(--ppc-r-pad-x);
	padding-right: var(--ppc-r-pad-x);
}

.ppc-r-section {
	padding-top: var(--ppc-r-sec-y);
	padding-bottom: var(--ppc-r-sec-y);
}

.ppc-r-section--soft   { background: var(--ppc-r-soft); border-top: 1px solid var(--ppc-r-line); border-bottom: 1px solid var(--ppc-r-line); }
.ppc-r-section--dark   { background: var(--ppc-r-dark); color: #fff; }

@media (max-width: 768px) {
	.ppc-r-container { padding-left: var(--ppc-r-pad-x-m); padding-right: var(--ppc-r-pad-x-m); }
	.ppc-r-section   { padding-top: var(--ppc-r-sec-y-m); padding-bottom: var(--ppc-r-sec-y-m); }
}

/* ------------------------------ 3. Typography ---------------------------- */

.ppc-r-h1 {
	font-family: var(--ppc-r-font-h);
	font-weight: 700;
	font-size: 54px;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--ppc-r-ink);
	margin: 0;
}

.ppc-r-h2 {
	font-family: var(--ppc-r-font-h);
	font-weight: 600;
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--ppc-r-ink);
	margin: 0;
}

.ppc-r-h3 {
	font-family: var(--ppc-r-font-h);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ppc-r-ink);
	margin: 0;
}

.ppc-r-lead {
	font-family: var(--ppc-r-font-b);
	font-size: 18px;
	line-height: 1.55;
	color: var(--ppc-r-steel);
	margin: 0;
}

.ppc-r-body {
	font-family: var(--ppc-r-font-b);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ppc-r-ink);
}

.ppc-r-small-muted {
	font-family: var(--ppc-r-font-b);
	font-size: 13px;
	line-height: 1.45;
	color: var(--ppc-r-steel);
}

/* Mono eyebrow / kicker / label — uppercase, tight letter-spacing */
.ppc-r-kicker {
	font-family: var(--ppc-r-font-m);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ppc-r-accent);
	margin: 0 0 14px;
}
.ppc-r-kicker--light { color: #7fa0ff; }

@media (max-width: 768px) {
	.ppc-r-h1   { font-size: 32px; }
	.ppc-r-h2   { font-size: 25px; }
	.ppc-r-h3   { font-size: 16px; }
	.ppc-r-lead { font-size: 16px; }
}

/* On-dark variants (used inside .ppc-r-section--dark) */
.ppc-r-section--dark .ppc-r-h1,
.ppc-r-section--dark .ppc-r-h2,
.ppc-r-section--dark .ppc-r-h3   { color: #fff; }
.ppc-r-section--dark .ppc-r-lead { color: #a9bad0; font-size: 16.5px; line-height: 1.6; }

/* --------------------------- 4. Buttons + links --------------------------- */

.ppc-r-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ppc-r-font-b);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border-radius: var(--ppc-r-radius-btn);
	padding: 14px 26px;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
	white-space: nowrap;
}
.ppc-r-btn:hover,
.ppc-r-btn:focus,
.ppc-r-btn:visited {
	text-decoration: none !important;
}

.ppc-r-btn--primary {
	color: #fff;
	background: var(--ppc-r-accent);
	box-shadow: var(--ppc-r-shadow-btn);
}
.ppc-r-btn--primary:hover,
.ppc-r-btn--primary:focus {
	background: var(--ppc-r-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.ppc-r-btn--ghost {
	color: var(--ppc-r-ink);
	background: transparent;
	border-color: var(--ppc-r-line);
	padding: 13px 22px;
}
.ppc-r-btn--ghost:hover,
.ppc-r-btn--ghost:focus {
	color: var(--ppc-r-accent-dark);
	border-color: var(--ppc-r-accent-border);
	background: var(--ppc-r-accent-tint);
}

.ppc-r-btn--on-accent {
	color: var(--ppc-r-accent);
	background: #fff;
	font-size: 16px;
	padding: 16px 30px;
}
.ppc-r-btn--on-accent:hover,
.ppc-r-btn--on-accent:focus {
	color: var(--ppc-r-accent-dark);
	background: #fff;
	transform: translateY(-1px);
}

/* Inline "Add" style used on product cards */
.ppc-r-btn--sm {
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--ppc-r-radius-chip);
	box-shadow: none;
}

/* Redesigned link default */
.ppc-r-link {
	color: var(--ppc-r-accent);
	text-decoration: none;
	transition: color .15s ease;
}
.ppc-r-link:hover,
.ppc-r-link:focus { color: var(--ppc-r-accent-dark); }

/* ------------------------------- 5. Chips -------------------------------- */

/* Number chip — replaces all feature icons per handoff (01–04) */
.ppc-r-numchip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-family: var(--ppc-r-font-m);
	font-size: 12px;
	font-weight: 500;
	color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint);
	border: 1px solid var(--ppc-r-accent-border);
	border-radius: var(--ppc-r-radius-chip);
}

/* Blue chip — larger, on-dark variant used in About band rows (44×44) */
.ppc-r-bluechip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-family: var(--ppc-r-font-m);
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	background: var(--ppc-r-accent);
	border-radius: 10px;
}

/* Category tag — small mono uppercase steel label */
.ppc-r-cat-tag {
	font-family: var(--ppc-r-font-m);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ppc-r-steel);
}

/* Dose chip — used on product cards + product-single dose selector */
.ppc-r-dose-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--ppc-r-font-m);
	font-size: 11px;
	color: var(--ppc-r-ink);
	background: #f2f5f9;
	border-radius: 6px;
	padding: 3px 8px;
}
.ppc-r-dose-chip.is-selected {
	color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint);
	border: 1px solid var(--ppc-r-accent-border);
	padding: 2px 7px; /* keep total size stable with the border */
}

/* Purity green tag */
.ppc-r-purity-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--ppc-r-font-m);
	font-size: 11px;
	color: var(--ppc-r-purity-text);
	background: var(--ppc-r-purity-bg);
	border-radius: 6px;
	padding: 3px 8px;
}

/* Announcement-marquee diamond separator */
.ppc-r-diamond {
	display: inline-block;
	color: var(--ppc-r-accent);
	margin-right: 14px;
	font-size: 1em;
}

/* -------------------------------- 6. Card -------------------------------- */

.ppc-r-card {
	background: #fff;
	border: 1px solid var(--ppc-r-line);
	border-radius: var(--ppc-r-radius-card);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ppc-r-card:hover { box-shadow: var(--ppc-r-shadow-card); }

/* ---------------------------- 7. Utility grid ---------------------------- */

.ppc-r-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ppc-r-gap); }
.ppc-r-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ppc-r-gap); }
.ppc-r-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ppc-r-gap); }

@media (max-width: 768px) {
	.ppc-r-grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--ppc-r-gap-m); }
	.ppc-r-grid-3 { grid-template-columns: 1fr; gap: var(--ppc-r-gap-m); }
	.ppc-r-grid-2 { grid-template-columns: 1fr; gap: var(--ppc-r-gap-m); }
}

/* ----------- 8. Base body font (opt-in via body class .ppc-r) ----------- */

/*
 * The body font swap is opt-in: we add `class="ppc-r"` to the <body> via the
 * plugin so we can flip it on/off during rollout without touching the theme.
 * Elementor headings inside Elementor widgets still take theme styles unless
 * they use the .ppc-r-h1/.ppc-r-h2 utility classes.
 */
body.ppc-r {
	font-family: var(--ppc-r-font-b);
	color: var(--ppc-r-ink);
}

/* ===================================================================
   10. HOMEPAGE SECTIONS (Phase 2)
   All markup comes from includes/template-home.php.
   =================================================================== */

/* Base wrapper */
.ppc-r-home { font-family: var(--ppc-r-font-b); color: var(--ppc-r-ink); }

/* ---- Hero ---- */
.ppc-r-hero { padding-top: 76px; padding-bottom: 76px; }
.ppc-r-hero__row {
	display: flex; align-items: center; gap: 56px;
}
.ppc-r-hero__text { flex: 1 1 54%; min-width: 0; }
.ppc-r-hero__visual {
	position: relative; flex: 1 1 46%; align-self: stretch;
	min-height: 460px; background: var(--ppc-r-soft);
	border: 1px solid var(--ppc-r-line); border-radius: 18px;
	overflow: hidden; display: flex; align-items: stretch; justify-content: stretch;
}
.ppc-r-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.ppc-r-hero__badge {
	position: absolute; top: 16px; left: 16px;
	font-family: var(--ppc-r-font-m); font-size: 11px; color: var(--ppc-r-accent);
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 999px; padding: 6px 12px;
}
.ppc-r-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ppc-r-hero__stats {
	display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap;
}
.ppc-r-hero__stat-num {
	font-family: var(--ppc-r-font-h); font-weight: 700;
	font-size: 30px; color: var(--ppc-r-accent); line-height: 1;
}
.ppc-r-hero__stat-lbl { font-size: 12.5px; color: var(--ppc-r-steel); margin-top: 4px; }
.ppc-r-hero__stat-div { width: 1px; height: 34px; background: var(--ppc-r-line); }

@media (max-width: 768px) {
	.ppc-r-hero { padding-top: 44px; padding-bottom: 44px; }
	.ppc-r-hero__row { flex-direction: column; gap: 30px; }
	.ppc-r-hero__text { order: 2; }
	.ppc-r-hero__visual { order: 1; min-height: 240px; width: 100%; }
	.ppc-r-hero__stats { gap: 16px; }
	.ppc-r-hero__stat-num { font-size: 24px; }
}

/* ---- Trust Strip ---- */
.ppc-r-trust { padding: 30px 0; }
.ppc-r-trust__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.ppc-r-trust__item { display: flex; align-items: flex-start; gap: 12px; }
.ppc-r-trust__title {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 15px; margin-bottom: 3px;
}
@media (max-width: 768px) {
	.ppc-r-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ppc-r-trust { padding: 28px 0; }
}

/* ---- Featured Products ---- */
.ppc-r-featured__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin-bottom: 34px;
}
.ppc-r-featured__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 768px) {
	.ppc-r-featured__head { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
	.ppc-r-featured__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Product card */
.ppc-r-prodcard__img-wrap {
	/* Square image well — the universal product-card standard. A square
	   well matches the square (300x300) product photos exactly, so images
	   fill it edge-to-edge with no side gaps and no cropping. White bg so
	   the photos' baked-in white blends seamlessly; landscape bundle art
	   letterboxes cleanly on white instead of leaving grey slivers. */
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1; width: 100%; background: #fff;
	border-bottom: 1px solid var(--ppc-r-line); overflow: hidden;
	position: relative; padding: 14px;
}
.ppc-r-prodcard__img {
	width: 100%; height: 100%;
	object-fit: contain; object-position: center;
}
.ppc-r-prodcard__ph {
	font-family: var(--ppc-r-font-m); font-size: 12px; color: var(--ppc-r-faint);
	text-align: center; padding: 10px;
}
.ppc-r-prodcard__body { padding: 16px; }
.ppc-r-prodcard__name {
	display: block; font-family: var(--ppc-r-font-h); font-weight: 600;
	font-size: 17px; color: var(--ppc-r-ink); margin: 7px 0 9px;
	/* !important because the homepage renders inside Astra's .entry-content
	   (injected via the_content), where the theme forces link underlines with
	   higher specificity. Shop/product pages use a full template_include so
	   they're unaffected — this just harmonizes the homepage cards. */
	text-decoration: none !important; line-height: 1.3;
}
.ppc-r-prodcard__name:hover,
.ppc-r-prodcard__name:focus { color: var(--ppc-r-accent); text-decoration: none !important; }
.ppc-r-prodcard__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ppc-r-prodcard__price {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 19px;
	color: var(--ppc-r-ink);
}
.ppc-r-prodcard__price .woocommerce-Price-amount,
.ppc-r-prodcard__price ins { text-decoration: none; }
.ppc-r-prodcard__price del { display: none; }
@media (max-width: 768px) {
	/* aspect-ratio keeps the well square at every width — no fixed height needed */
	.ppc-r-prodcard__body { padding: 12px; }
	.ppc-r-prodcard__name { font-size: 15px; }
	.ppc-r-prodcard__price { font-size: 16px; }
}

/* ---- About Band ---- */
.ppc-r-about-band__row {
	display: flex; align-items: stretch; gap: 56px;
}
.ppc-r-about-band__img {
	flex: 1 1 47%; border-radius: 18px; display: block;
	max-width: 47%; height: auto;
}
.ppc-r-about-band__info { flex: 1 1 53%; min-width: 0; }
.ppc-r-about-band__rows {
	display: flex; flex-direction: column; gap: 16px; margin-top: 28px;
}
.ppc-r-about-band__row-item { display: flex; gap: 14px; align-items: flex-start; }
.ppc-r-about-band__row-title {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 18px;
	color: #fff; margin-bottom: 3px;
}
.ppc-r-about-band__row-desc { font-size: 14px; color: #a9bad0; line-height: 1.5; }

@media (max-width: 768px) {
	.ppc-r-about-band__row { flex-direction: column; gap: 26px; }
	.ppc-r-about-band__img { max-width: 100%; }
	.ppc-r-about-band__rows { gap: 12px; margin-top: 22px; }
}

/* ---- Quality Assurance / Pipeline ---- */
.ppc-r-pipeline__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ppc-r-pipeline__card {
	border: 1px solid var(--ppc-r-line); border-radius: 14px; padding: 24px; background: #fff;
}
.ppc-r-pipeline__num {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 34px;
	color: var(--ppc-r-accent-border); display: block; line-height: 1; margin-bottom: 14px;
}
.ppc-r-pipeline__title {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 16px; margin-bottom: 8px;
}
@media (max-width: 768px) {
	.ppc-r-pipeline__grid { grid-template-columns: 1fr; gap: 12px; }
	.ppc-r-pipeline__card { padding: 18px; }
}

/* ---- Why ProFormance ---- */
.ppc-r-why__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ppc-r-why__card { padding: 22px; border: 1px solid var(--ppc-r-line); }
.ppc-r-why__card:hover { box-shadow: none; }
.ppc-r-why__title {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 16px; margin: 12px 0 8px;
}
@media (max-width: 768px) {
	.ppc-r-why__grid { grid-template-columns: 1fr; gap: 12px; }
	.ppc-r-why__card { padding: 18px; }
}

/* ---- Certificates CTA Band ---- */
.ppc-r-cta-band__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	background: var(--ppc-r-accent); border-radius: 20px; padding: 46px 48px;
}
@media (max-width: 768px) {
	.ppc-r-cta-band__inner {
		flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 24px;
	}
}

/* 9a. Header row border + vertical rhythm */
.elementor-location-header {
	border-bottom: 1px solid var(--ppc-r-line) !important;
}

/* 9b. Desktop nav items: IBM Plex Sans 14.5/500, ink color, 22px gap */
@media (min-width: 1025px) {
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
		gap: 22px !important;
	}
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
		font-family: var(--ppc-r-font-b) !important;
		font-size: 14.5px !important;
		font-weight: 500 !important;
		color: var(--ppc-r-ink) !important;
		padding: 0 !important;
		letter-spacing: 0 !important;
		transition: color .15s ease !important;
	}
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus {
		color: var(--ppc-r-accent-dark) !important;
	}
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.elementor-item-active {
		color: var(--ppc-r-accent) !important;
	}
}

/* 9c. Dropdown caret: accent blue */
.elementor-location-header .elementor-nav-menu--main .sub-arrow,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow {
	color: var(--ppc-r-accent) !important;
	font-size: 11px !important;
}

/* 9d. Cart widget: pill style per design */
.elementor-location-header .elementor-menu-cart__toggle-button,
.elementor-location-header .elementor-button--checkout {
	font-family: var(--ppc-r-font-m) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--ppc-r-ink) !important;
	border: 1px solid var(--ppc-r-line) !important;
	border-radius: 999px !important;
	padding: 9px 16px !important;
	background: transparent !important;
	box-shadow: none !important;
	white-space: nowrap !important;
	transition: border-color .15s ease, color .15s ease !important;
}
.elementor-location-header .elementor-menu-cart__toggle-button:hover {
	border-color: var(--ppc-r-accent-border) !important;
	color: var(--ppc-r-accent) !important;
}

/* 9e. Mobile drawer accent updates */
@media (max-width: 1024px) {
	.ppc-drawer__title { color: var(--ppc-r-accent) !important; }
	.ppc-drawer__cart { background: var(--ppc-r-accent) !important; }
	.ppc-drawer__cart:hover { background: var(--ppc-r-accent-dark) !important; }
	.ppc-drawer__menu a:hover,
	.ppc-drawer__menu a:focus,
	.ppc-drawer__menu li.current-menu-item > a,
	.ppc-drawer__menu li.current-menu-ancestor > a {
		background: var(--ppc-r-accent) !important;
	}
}

/* ===================================================================
   11. FOOTER (Phase 1c) — pure CSS restyle of the existing Elementor
   footer template (post #76). No Elementor data is touched: all URLs,
   social icons, and widget order stay exactly as configured in Elementor.
   Only visual tokens (bg, fonts, colors, spacing) are overridden.
   =================================================================== */

/* 11a. Outer footer bg + top border */
.elementor-location-footer > .elementor > .elementor-section:first-of-type,
.elementor-location-footer .elementor-element[data-id="a6b88a4"] {
	background-color: var(--ppc-r-footer-bg) !important;
}
.elementor-location-footer,
.elementor-location-footer .elementor-widget-wrap {
	font-family: var(--ppc-r-font-b);
	color: var(--ppc-r-footer-text);
}

/* 11b. Brand column — force wordmark to white, restyle blurb */
.elementor-location-footer .elementor-widget-image img {
	filter: brightness(0) invert(1);
}
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
	font-family: var(--ppc-r-font-b) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--ppc-r-footer-muted) !important;
	font-weight: 400 !important;
}

/* 11c. Column headings ("Quick Links", "Customer Service", "Contact Us")
       → 11px mono, uppercase, muted, letter-spaced. Kills the bright blue
       Poppins 20/600 that was there before. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
	font-family: var(--ppc-r-font-m) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--ppc-r-footer-head) !important;
	margin-bottom: 14px !important;
	line-height: 1.4 !important;
}

/* 11d. Link/icon-list items — same style for Quick Links, Customer Service,
       and Contact (email/phone). Icons are dimmed so text reads first. */
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item {
	margin-bottom: 10px !important;
}
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item a,
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item span,
.elementor-location-footer .elementor-icon-list-text {
	font-family: var(--ppc-r-font-b) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--ppc-r-footer-text) !important;
	line-height: 1.5 !important;
	transition: color .15s ease !important;
}
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item a:hover,
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item a:hover .elementor-icon-list-text {
	color: #fff !important;
}
.elementor-location-footer .elementor-icon-list-icon,
.elementor-location-footer .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg {
	color: var(--ppc-r-footer-muted) !important;
	fill: var(--ppc-r-footer-muted) !important;
}

/* 11e. Social icons — small, muted, brighten on hover */
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon {
	background: transparent !important;
	color: var(--ppc-r-footer-muted) !important;
	transition: color .15s ease !important;
	padding: 0 !important;
	margin: 0 12px 0 0 !important;
}
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon:hover {
	color: #fff !important;
}
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon i,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon svg {
	font-size: 16px !important;
}

/* 11f. Bottom disclaimer bar (rendered by ppc_render_footer_bar in the
       main plugin PHP file — sits directly after the Elementor footer). */
.ppc-r-footbar {
	background: var(--ppc-r-footer-bg);
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--ppc-r-footer-head);
	font-family: var(--ppc-r-font-m);
	font-size: 11.5px;
	padding: 20px 0;
}
.ppc-r-footbar__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
@media (max-width: 768px) {
	.ppc-r-footbar__inner {
		flex-direction: column;
		padding: 0 20px;
		text-align: center;
	}
}

/* ===================================================================
   12. SHOP ARCHIVE (Phase 3)
   Styles for template-shop.php — page head, sidebar filters, product
   grid (3-col desktop / 2-col mobile), product cards, pagination pills,
   and the mobile category chip row.
   =================================================================== */

/* 12a. Shop wrapper + page head */
.ppc-r-shop {
	font-family: var(--ppc-r-font-b); color: var(--ppc-r-ink);
	/* Astra's .ast-container is display:flex; without flex:1 the block shrinks
	   to content (1180px) and left-aligns instead of centering. Force full width. */
	flex: 1 1 100%; width: 100%; min-width: 0;
}

.ppc-r-shop__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; padding: 40px 0 22px; border-bottom: 1px solid var(--ppc-r-line);
}
.ppc-r-shop__head-right { display: flex; align-items: center; gap: 16px; }
.ppc-r-shop__count {
	font-family: var(--ppc-r-font-m); font-size: 12.5px; color: var(--ppc-r-steel);
}
.ppc-r-shop__sort { display: flex; align-items: center; gap: 6px; }
.ppc-r-shop__sort-label {
	font-family: var(--ppc-r-font-m); font-size: 12.5px; color: var(--ppc-r-ink);
}
.ppc-r-shop__sort-select {
	font-family: var(--ppc-r-font-m); font-size: 12.5px; color: var(--ppc-r-ink);
	border: 1px solid var(--ppc-r-line); border-radius: 8px; padding: 9px 14px;
	background: #fff; cursor: pointer; appearance: none;
	-webkit-appearance: none; -moz-appearance: none;
	padding-right: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6b7d'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

@media (max-width: 768px) {
	.ppc-r-shop__head { padding: 26px 0 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
	.ppc-r-shop__sort { display: none; }
}

/* 12b. Mobile category chips (hidden on desktop) */
.ppc-r-shop__chips {
	display: none; gap: 8px; overflow-x: auto; padding: 16px 0 4px;
	-webkit-overflow-scrolling: touch;
}
.ppc-r-shop__chips::-webkit-scrollbar { height: 0; }
.ppc-r-shop__chip {
	flex: none; font-family: var(--ppc-r-font-b); font-size: 13px; font-weight: 500;
	padding: 9px 15px; border-radius: 999px; white-space: nowrap;
	border: 1px solid var(--ppc-r-line); background: #fff; color: var(--ppc-r-ink);
	text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ppc-r-shop__chip:hover { border-color: var(--ppc-r-accent); color: var(--ppc-r-accent); }
.ppc-r-shop__chip--active {
	border-color: var(--ppc-r-accent); background: var(--ppc-r-accent); color: #fff;
}
@media (max-width: 768px) {
	.ppc-r-shop__chips { display: flex; }
}

/* 12c. Body layout: sidebar + grid */
.ppc-r-shop__body { display: flex; gap: 40px; padding: 28px 0 64px; }
.ppc-r-shop__sidebar { flex: none; width: 236px; }
.ppc-r-shop__grid-wrap { flex: 1; min-width: 0; }

@media (max-width: 768px) {
	.ppc-r-shop__body { padding: 18px 0 40px; gap: 0; }
	.ppc-r-shop__sidebar { display: none; }
}

/* 12d. Sidebar filter groups */
.ppc-r-shop__filter-group {
	padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--ppc-r-line);
}
.ppc-r-shop__filter-group:last-child { border-bottom: none; margin-bottom: 0; }
.ppc-r-shop__filter-head {
	font-family: var(--ppc-r-font-m); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ppc-r-steel); margin-bottom: 12px;
}
.ppc-r-shop__filter-btn {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	text-align: left; font-family: var(--ppc-r-font-b); font-size: 14px; font-weight: 400;
	color: var(--ppc-r-ink); background: none; border: none; border-radius: 8px;
	padding: 9px 12px; cursor: pointer; text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.ppc-r-shop__filter-btn:hover { background: var(--ppc-r-soft); }
.ppc-r-shop__filter-btn--active {
	font-weight: 600; color: var(--ppc-r-accent); background: var(--ppc-r-accent-tint);
}
.ppc-r-shop__filter-count {
	font-family: var(--ppc-r-font-m); font-size: 11px; color: var(--ppc-r-faint-2);
}

/* Checkbox-style rows (Price / Purity) */
.ppc-r-shop__check-row {
	display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ppc-r-ink);
	padding: 7px 0; cursor: pointer; text-decoration: none;
}
.ppc-r-shop__checkbox {
	width: 17px; height: 17px; border: 1.5px solid #c7d0da; border-radius: 5px;
	flex: none; position: relative;
}
.ppc-r-shop__checkbox--checked {
	background: var(--ppc-r-accent); border-color: var(--ppc-r-accent);
}
.ppc-r-shop__checkbox--checked::after {
	content: ''; position: absolute; left: 4px; top: 1px;
	width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ppc-r-shop__check-row--active { font-weight: 500; }

/* 12e. Product grid */
.ppc-r-shop__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 768px) {
	.ppc-r-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 12f. Card extras (category chip, meta row, add button, OOS badge) */
.ppc-r-shop__cat-chip {
	font-family: var(--ppc-r-font-m); font-size: 10px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ppc-r-steel);
}
.ppc-r-shop__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ppc-r-shop__add-btn {
	font-family: var(--ppc-r-font-b);
	font-weight: 600; font-size: 13px; color: #fff; background: var(--ppc-r-accent);
	border-radius: 8px; padding: 8px 16px; text-decoration: none; display: inline-block;
	line-height: 1.2; white-space: nowrap;
	transition: background .15s ease;
}
.ppc-r-shop__add-btn:hover { background: var(--ppc-r-accent-dark); color: #fff; }
.ppc-r-shop__add-btn--disabled {
	background: var(--ppc-r-line); color: var(--ppc-r-steel); cursor: not-allowed;
}
.ppc-r-shop__add-btn--disabled:hover { background: var(--ppc-r-line); color: var(--ppc-r-steel); }

/* WooCommerce add-to-cart fallback (kept in case a Woo template variant reintroduces
   the default loop button). Currently the template always renders .ppc-r-shop__add-btn. */
.ppc-r-shop__grid .button.add_to_cart_button,
.ppc-r-shop__grid .button.product_type_simple {
	font-family: var(--ppc-r-font-b) !important; font-weight: 600 !important;
	font-size: 13px !important; color: #fff !important;
	background: var(--ppc-r-accent) !important; border: none !important;
	border-radius: 8px !important; padding: 8px 16px !important;
	text-decoration: none !important; line-height: 1.2 !important;
	transition: background .15s ease !important;
}
.ppc-r-shop__grid .button.add_to_cart_button:hover,
.ppc-r-shop__grid .button.product_type_simple:hover {
	background: var(--ppc-r-accent-dark) !important;
}

/* Out-of-stock card */
.ppc-r-shop__card--oos { opacity: .7; }
.ppc-r-shop__card--oos .ppc-r-prodcard__img-wrap { position: relative; }
.ppc-r-shop__oos-badge {
	position: absolute; top: 10px; right: 10px;
	font-family: var(--ppc-r-font-m); font-size: 10px; font-weight: 500;
	background: #fee2e2; color: #b91c1c; border-radius: 6px; padding: 4px 8px;
}

/* 12g. Pagination pills */
.ppc-r-shop__pager {
	display: flex; gap: 8px; justify-content: center; margin-top: 44px;
}
.ppc-r-shop__pager a,
.ppc-r-shop__pager span {
	font-family: var(--ppc-r-font-m); font-size: 13px; color: var(--ppc-r-ink);
	border: 1px solid var(--ppc-r-line); border-radius: 8px; padding: 9px 15px;
	text-decoration: none; transition: background .12s ease, color .12s ease;
}
.ppc-r-shop__pager a:hover {
	border-color: var(--ppc-r-accent); color: var(--ppc-r-accent);
}
.ppc-r-shop__pager .current,
.ppc-r-shop__pager span.current {
	color: #fff; background: var(--ppc-r-accent); border-color: var(--ppc-r-accent);
}
@media (max-width: 768px) {
	.ppc-r-shop__pager { margin-top: 28px; }
}

/* 12h. Empty state */
.ppc-r-shop__empty {
	text-align: center; padding: 80px 20px;
	font-size: 16px; color: var(--ppc-r-steel);
}
.ppc-r-shop__empty .ppc-r-btn { margin-top: 20px; }

/* ===================================================================
   13. SINGLE PRODUCT (Phase 4)
   Styles for template-single-product.php per ProductPage.dc.html.
   Two-column main (gallery 46% + info 54%), tabbed content, related
   products grid, disclaimer band. Also flex-full-width fix so the
   product container centers inside Astra's flex .ast-container.
   =================================================================== */

.ppc-r-product {
	font-family: var(--ppc-r-font-b); color: var(--ppc-r-ink);
	flex: 1 1 100%; width: 100%; min-width: 0;
}

/* 13a. Breadcrumbs */
.ppc-r-crumb {
	font-family: var(--ppc-r-font-m); font-size: 12px; color: var(--ppc-r-steel);
	padding: 28px 0 6px;
}
.ppc-r-crumb__link { color: var(--ppc-r-steel); text-decoration: none; }
.ppc-r-crumb__link:hover { color: var(--ppc-r-accent); }
.ppc-r-crumb__sep { margin: 0 6px; color: var(--ppc-r-faint-2); }
.ppc-r-crumb__current { color: var(--ppc-r-ink); }
@media (max-width: 768px) {
	.ppc-r-crumb { padding: 20px 0 4px; font-size: 11.5px; }
}

/* 13b. Main two-column layout */
.ppc-r-product__main {
	display: flex; gap: 52px; padding: 26px 0 56px;
}
@media (max-width: 900px) {
	.ppc-r-product__main { flex-direction: column; gap: 26px; padding: 18px 0 34px; }
}

/* 13c. Gallery */
.ppc-r-product__gallery { flex: 1 1 46%; min-width: 0; }
.ppc-r-product__mainimg {
	/* Square white well — same standard as the shop product cards, so the
	   vial fills the frame instead of floating in a fixed-height box with
	   grey side bars. */
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 18px; aspect-ratio: 1 / 1; width: 100%; display: flex;
	align-items: center; justify-content: center; padding: 24px;
	overflow: hidden;
}
.ppc-r-product__mainimg img {
	width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.ppc-r-product__thumbs {
	display: flex; gap: 12px; margin-top: 12px;
}
.ppc-r-product__thumb {
	flex: 1; height: 92px; background: #fff;
	border: 1px solid var(--ppc-r-line); border-radius: 12px;
	display: flex; align-items: center; justify-content: center; padding: 8px;
	cursor: pointer; transition: border-color .15s ease;
}
.ppc-r-product__thumb:hover,
.ppc-r-product__thumb.is-active { border-color: var(--ppc-r-accent); }
.ppc-r-product__thumb img {
	max-width: 100%; max-height: 100%; object-fit: contain;
}
@media (max-width: 900px) {
	.ppc-r-product__mainimg { height: 320px; padding: 18px; }
	.ppc-r-product__thumb { height: 76px; }
}

/* 13d. Info column */
.ppc-r-product__info { flex: 1 1 54%; min-width: 0; }
.ppc-r-product__cat-chip {
	font-family: var(--ppc-r-font-m); font-size: 11px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ppc-r-accent);
}
.ppc-r-product__h1 {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 44px;
	letter-spacing: -.02em; margin: 8px 0 14px; line-height: 1.1;
	color: var(--ppc-r-ink);
}
@media (max-width: 768px) {
	.ppc-r-product__h1 { font-size: 32px; }
}
.ppc-r-product__meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px; margin-bottom: 20px;
}
.ppc-r-product__coa-link {
	font-family: var(--ppc-r-font-m); font-size: 12px; color: var(--ppc-r-accent);
	text-decoration: none;
}
.ppc-r-product__coa-link:hover { text-decoration: underline; }

/* 13e. Price */
.ppc-r-product__price-row {
	display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px;
}
.ppc-r-product__price {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 36px;
	color: var(--ppc-r-ink);
}
.ppc-r-product__price .woocommerce-Price-amount { font-family: inherit; font-weight: inherit; font-size: inherit; }
.ppc-r-product__price del { display: none; }
.ppc-r-product__price ins { text-decoration: none; }
.ppc-r-product__price-note { font-size: 13px; color: var(--ppc-r-steel); }
@media (max-width: 768px) {
	.ppc-r-product__price { font-size: 30px; }
}

/* 13f. Dose selector */
.ppc-r-product__form { margin: 0; }
.ppc-r-product__opt { margin-bottom: 22px; }
.ppc-r-product__opt-label {
	font-family: var(--ppc-r-font-m); font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ppc-r-steel); margin-bottom: 10px;
}
.ppc-r-product__doserow { display: flex; flex-wrap: wrap; gap: 10px; }
.ppc-r-product__dose {
	font-family: var(--ppc-r-font-m); font-size: 13px; font-weight: 500;
	padding: 10px 16px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--ppc-r-line); background: #fff; color: var(--ppc-r-ink);
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ppc-r-product__dose:hover { border-color: var(--ppc-r-accent); }
.ppc-r-product__dose.is-active {
	border-color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint);
	color: var(--ppc-r-accent);
}

/* 13g. Buy row */
.ppc-r-product__buy { display: flex; gap: 12px; margin-bottom: 24px; }
.ppc-r-product__qty {
	display: flex; align-items: center; border: 1px solid var(--ppc-r-line);
	border-radius: 10px; overflow: hidden; flex: none;
}
.ppc-r-product__qty-btn {
	width: 44px; height: 52px; background: var(--ppc-r-soft); border: none;
	font-size: 20px; color: var(--ppc-r-ink); cursor: pointer; padding: 0;
	font-family: var(--ppc-r-font-b);
}
.ppc-r-product__qty-btn:hover { background: #e4ecf5; }
/* Higher-specificity + !important so Astra/WooCommerce's default
   input[type=number] border (which otherwise draws a rectangle inside
   the stepper) is fully suppressed. */
.ppc-r-product__qty input.ppc-r-product__qty-num {
	width: 52px; text-align: center; font-family: var(--ppc-r-font-m);
	font-size: 15px; height: 52px; background: #fff; color: var(--ppc-r-ink);
	border: none !important; border-radius: 0 !important;
	box-shadow: none !important; outline: none !important;
	padding: 0 !important; margin: 0 !important;
	-moz-appearance: textfield;
}
.ppc-r-product__qty input.ppc-r-product__qty-num:focus {
	border: none !important; box-shadow: none !important; outline: none !important;
}
.ppc-r-product__qty-num::-webkit-outer-spin-button,
.ppc-r-product__qty-num::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.ppc-r-product__addbtn {
	flex: 1; font-family: var(--ppc-r-font-b); font-weight: 600; font-size: 15px;
	color: #fff; background: var(--ppc-r-accent); border: none;
	border-radius: 10px; padding: 0 20px; cursor: pointer; height: 52px;
	box-shadow: 0 8px 20px -8px var(--ppc-r-accent);
	transition: background .15s ease;
}
.ppc-r-product__addbtn:hover:not(:disabled) { background: var(--ppc-r-accent-dark); color: #fff; }
.ppc-r-product__addbtn:disabled {
	background: var(--ppc-r-line); color: var(--ppc-r-steel); cursor: not-allowed;
	box-shadow: none;
}

/* 13h. Assurances checklist */
.ppc-r-product__assure {
	display: flex; flex-direction: column; gap: 9px;
	border-top: 1px solid var(--ppc-r-line); padding-top: 20px;
	list-style: none; margin: 0;
}
.ppc-r-product__assure-row {
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; color: var(--ppc-r-steel);
}
.ppc-r-product__check {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ppc-r-purity-bg); color: var(--ppc-r-purity-text);
	font-size: 12px; display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}

/* 13i. Description block (single content section — replaced 4-tab widget) */
.ppc-r-product__descblock {
	border: 1px solid var(--ppc-r-line); border-radius: 16px;
	padding: 30px 26px; margin-bottom: 64px;
}
.ppc-r-product__desctitle {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 17px;
	color: var(--ppc-r-ink); margin-bottom: 14px;
	padding-bottom: 14px; border-bottom: 1px solid var(--ppc-r-line);
}
.ppc-r-product__para {
	font-size: 15px; line-height: 1.65; color: #3d4a57;
	margin: 0 0 14px; max-width: 720px;
}
.ppc-r-product__para p { margin: 0 0 14px; }
.ppc-r-product__para p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	.ppc-r-product__descblock { margin-bottom: 40px; padding: 22px 18px; }
}

/* 13m. Related products */
.ppc-r-product__related { margin-bottom: 60px; }
.ppc-r-product__relgrid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 768px) {
	.ppc-r-product__relgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ppc-r-product__related { margin-bottom: 40px; }
}

/* 13n. Disclaimer band (below related, above footer) */
.ppc-r-product__discband {
	background: var(--ppc-r-soft); border-top: 1px solid var(--ppc-r-line);
	font-size: 12.5px; line-height: 1.6; color: var(--ppc-r-steel);
	padding: 20px 24px; margin: 0 -48px 0; border-radius: 0;
}
.ppc-r-product__discband strong { color: var(--ppc-r-ink); font-weight: 600; }
@media (max-width: 768px) {
	.ppc-r-product__discband { margin: 0 -20px; padding: 18px 20px; }
}

/* 13o. WooCommerce notices — style to match design */
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-message,
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-info,
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-error {
	font-family: var(--ppc-r-font-b); font-size: 14px;
	border-radius: 10px; margin: 20px 0;
	border-left: 4px solid var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint);
	color: var(--ppc-r-ink);
	padding: 14px 18px;
}
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #dc2626; background: #fef2f2; color: #991b1b;
}
/* WooCommerce injects a checkmark icon via ::before positioned at the left
   edge. Our tighter padding leaves no room for it, so it lands on top of the
   message text. The design's notice is text + button only, so hide it. */
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-message::before,
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-info::before,
.ppc-r-product .woocommerce-notices-wrapper .woocommerce-error::before {
	display: none !important;
}
.ppc-r-product .woocommerce-notices-wrapper .button {
	font-family: var(--ppc-r-font-b) !important;
	background: var(--ppc-r-accent) !important; color: #fff !important;
	border-radius: 8px !important; padding: 8px 16px !important;
	font-size: 13px !important; font-weight: 600 !important;
}

/* ===================================================================
   14. ABOUT PAGE (Phase 5) — merged About + Contact per AboutPage.dc.html
   Client's real copy + designed layout. Includes a contact form that
   posts back to itself and emails via the Resend SMTP relay.
   =================================================================== */

.ppc-r-about {
	font-family: var(--ppc-r-font-b); color: var(--ppc-r-ink);
	flex: 1 1 100%; width: 100%; min-width: 0;
}

/* 14a. Intro block (2-col) */
.ppc-r-about__intro {
	display: flex; align-items: stretch; gap: 56px;
	padding: 22px 0 64px;
}
.ppc-r-about__introtext { flex: 1 1 55%; min-width: 0; }
.ppc-r-about__introimg {
	flex: 1 1 45%; min-height: 380px; border-radius: 18px;
	overflow: hidden; display: flex;
	background: var(--ppc-r-soft); border: 1px solid var(--ppc-r-line);
}
.ppc-r-about__introimg img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
	.ppc-r-about__intro { flex-direction: column; gap: 26px; padding: 14px 0 40px; }
	.ppc-r-about__introimg { min-height: 240px; order: -1; }
}

.ppc-r-about__h1 {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 48px;
	letter-spacing: -.02em; line-height: 1.05; margin: 0 0 18px;
	color: var(--ppc-r-ink);
}
.ppc-r-about__lead {
	font-size: 18px; line-height: 1.55; color: #3d4a57; margin: 0 0 16px;
}
.ppc-r-about__para {
	font-size: 15px; line-height: 1.65; color: var(--ppc-r-steel);
	margin: 0 0 16px; max-width: 640px;
}
.ppc-r-about__para strong { color: var(--ppc-r-ink); font-weight: 600; }
@media (max-width: 768px) {
	.ppc-r-about__h1 { font-size: 32px; }
	.ppc-r-about__lead { font-size: 16px; }
}

/* 14b. Stat row */
.ppc-r-about__statrow {
	display: flex; align-items: center; gap: 26px;
	margin-top: 22px; flex-wrap: wrap;
}
.ppc-r-about__statnum {
	font-family: var(--ppc-r-font-h); font-weight: 700; font-size: 30px;
	color: var(--ppc-r-accent); line-height: 1;
}
.ppc-r-about__statlbl { font-size: 12.5px; color: var(--ppc-r-steel); margin-top: 4px; }
.ppc-r-about__statdiv { width: 1px; height: 34px; background: var(--ppc-r-line); }
@media (max-width: 768px) {
	.ppc-r-about__statrow { gap: 16px; }
	.ppc-r-about__statnum { font-size: 24px; }
	.ppc-r-about__statdiv { display: none; }
}

/* 14c. Values / Standards section */
.ppc-r-about__valsection {
	background: var(--ppc-r-soft);
	border-top: 1px solid var(--ppc-r-line);
	border-bottom: 1px solid var(--ppc-r-line);
	padding: 64px 0; margin: 0;
}
.ppc-r-about__sechead { margin-bottom: 32px; }
.ppc-r-about__valgrid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ppc-r-about__valcard {
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 14px; padding: 22px;
}
.ppc-r-about__numchip {
	display: inline-flex; font-family: var(--ppc-r-font-m); font-size: 12px;
	font-weight: 500; color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint); border: 1px solid var(--ppc-r-accent-border);
	border-radius: 8px; width: 34px; height: 34px;
	align-items: center; justify-content: center; margin-bottom: 12px;
}
.ppc-r-about__valtitle {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 16px;
	margin-bottom: 8px; color: var(--ppc-r-ink);
}
.ppc-r-about__valdesc {
	font-size: 13.5px; color: var(--ppc-r-steel); line-height: 1.55;
}
@media (max-width: 900px) {
	.ppc-r-about__valsection { padding: 40px 0; }
	.ppc-r-about__valgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ppc-r-about__sechead { margin-bottom: 22px; }
}
@media (max-width: 560px) {
	.ppc-r-about__valgrid { grid-template-columns: 1fr; }
}

/* 14d. Contact section (2-col: info + form) */
.ppc-r-about__contactwrap {
	display: flex; gap: 52px; padding: 68px 0;
}
.ppc-r-about__contactinfo { flex: 1 1 46%; min-width: 0; }
.ppc-r-about__infolist {
	display: flex; flex-direction: column; gap: 2px; margin-top: 24px;
}
.ppc-r-about__inforow {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 14px 0; border-bottom: 1px solid var(--ppc-r-line);
}
.ppc-r-about__infolbl {
	font-family: var(--ppc-r-font-m); font-size: 12px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ppc-r-steel);
}
.ppc-r-about__infoval {
	font-size: 14.5px; font-weight: 500; text-align: right; color: var(--ppc-r-ink);
}
@media (max-width: 900px) {
	.ppc-r-about__contactwrap { flex-direction: column; gap: 28px; padding: 40px 0; }
}

/* 14e. Form card */
.ppc-r-about__formcard {
	flex: 1 1 54%; min-width: 0;
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 18px; padding: 32px;
	box-shadow: 0 30px 60px -40px rgba(14, 26, 43, .35);
}
.ppc-r-about__formtitle {
	font-family: var(--ppc-r-font-h); font-weight: 600; font-size: 20px;
	margin-bottom: 20px; color: var(--ppc-r-ink);
}
.ppc-r-about__field2 { display: flex; gap: 16px; }
.ppc-r-about__field {
	flex: 1; display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px;
}
.ppc-r-about__flabel {
	font-family: var(--ppc-r-font-m); font-size: 11px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ppc-r-steel);
}
.ppc-r-about__input,
.ppc-r-about__textarea {
	font-family: var(--ppc-r-font-b);
	border: 1px solid var(--ppc-r-line); border-radius: 10px;
	padding: 12px 14px; font-size: 14.5px; color: var(--ppc-r-ink);
	outline: none; width: 100%; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ppc-r-about__input:focus,
.ppc-r-about__textarea:focus {
	border-color: var(--ppc-r-accent);
	box-shadow: 0 0 0 3px var(--ppc-r-accent-tint);
}
.ppc-r-about__input::placeholder,
.ppc-r-about__textarea::placeholder { color: var(--ppc-r-faint); }
.ppc-r-about__textarea { min-height: 120px; resize: vertical; }
.ppc-r-about__sendbtn {
	width: 100%; font-family: var(--ppc-r-font-b);
	font-weight: 600; font-size: 15px; color: #fff;
	background: var(--ppc-r-accent); border: none;
	border-radius: 10px; padding: 15px; cursor: pointer;
	box-shadow: 0 8px 20px -8px var(--ppc-r-accent);
	transition: background .15s ease;
}
.ppc-r-about__sendbtn:hover { background: var(--ppc-r-accent-dark); color: #fff; }
.ppc-r-about__consent {
	font-size: 12px; color: var(--ppc-r-steel);
	margin: 14px 0 0; text-align: center;
}
@media (max-width: 700px) {
	.ppc-r-about__field2 { flex-direction: column; gap: 0; }
	.ppc-r-about__formcard { padding: 22px; }
}

/* 14f. Flash messages */
.ppc-r-about__flash {
	padding: 12px 16px; border-radius: 10px;
	font-size: 14px; margin-bottom: 18px;
	border: 1px solid transparent;
}
.ppc-r-about__flash--ok {
	background: var(--ppc-r-purity-bg); color: var(--ppc-r-purity-text);
	border-color: rgba(31, 138, 84, .3);
}
.ppc-r-about__flash--err {
	background: #fef2f2; color: #991b1b;
	border-color: rgba(220, 38, 38, .3);
}

/* ===================================================================
   15. SUBSCRIPTIONS COMING-SOON PAGE (Phase 6)
   Standalone coming-soon state with email-notify form. Reuses form
   atoms from section 14 (ppc-r-about__input, ppc-r-about__sendbtn).
   =================================================================== */

.ppc-r-comingsoon {
	flex: 1 1 100%; width: 100%; min-width: 0;
	font-family: var(--ppc-r-font-b); color: var(--ppc-r-ink);
}

.ppc-r-comingsoon__wrap {
	display: flex; justify-content: center;
	padding: 24px 0 80px;
}
@media (max-width: 900px) {
	.ppc-r-comingsoon__wrap { padding: 14px 0 48px; }
}

.ppc-r-comingsoon__card {
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 22px; padding: 48px;
	max-width: 720px; width: 100%;
	box-shadow: 0 30px 60px -40px rgba(14, 26, 43, .35);
	text-align: center;
}
@media (max-width: 700px) {
	.ppc-r-comingsoon__card { padding: 28px 22px; border-radius: 16px; }
}

.ppc-r-comingsoon__badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--ppc-r-font-m); font-size: 11.5px; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint); border: 1px solid var(--ppc-r-accent-border);
	border-radius: 999px; padding: 6px 14px;
	margin-bottom: 24px;
}
.ppc-r-comingsoon__pulse {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--ppc-r-accent);
	box-shadow: 0 0 0 0 rgba(28, 70, 212, .5);
	animation: ppc-r-pulse 1.8s ease-out infinite;
}
@keyframes ppc-r-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(28, 70, 212, .45); }
	70%  { box-shadow: 0 0 0 12px rgba(28, 70, 212, 0); }
	100% { box-shadow: 0 0 0 0 rgba(28, 70, 212, 0); }
}

.ppc-r-comingsoon__h1 {
	font-family: var(--ppc-r-font-h); font-weight: 700;
	font-size: 40px; letter-spacing: -.02em; line-height: 1.1;
	margin: 0 0 16px; color: var(--ppc-r-ink);
}
@media (max-width: 700px) {
	.ppc-r-comingsoon__h1 { font-size: 28px; }
}
.ppc-r-comingsoon__lead {
	font-size: 16.5px; line-height: 1.6; color: var(--ppc-r-ink-2);
	margin: 0 auto 28px; max-width: 560px;
}

.ppc-r-comingsoon__perks {
	list-style: none; padding: 0; margin: 0 0 32px;
	display: grid; gap: 14px;
	text-align: left;
}
.ppc-r-comingsoon__perks > li {
	display: flex; align-items: flex-start; gap: 14px;
	background: var(--ppc-r-soft); border: 1px solid var(--ppc-r-line);
	border-radius: 12px; padding: 14px 16px;
}
.ppc-r-comingsoon__perkicon {
	flex: 0 0 auto; width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--ppc-r-font-m); font-size: 18px; font-weight: 500;
	color: var(--ppc-r-accent);
	background: #fff; border: 1px solid var(--ppc-r-accent-border);
	border-radius: 10px;
}
.ppc-r-comingsoon__perktitle {
	font-family: var(--ppc-r-font-h); font-weight: 600;
	font-size: 14.5px; color: var(--ppc-r-ink); margin-bottom: 2px;
}
.ppc-r-comingsoon__perkdesc {
	font-size: 13.5px; color: var(--ppc-r-steel); line-height: 1.5;
}

.ppc-r-comingsoon__form {
	background: linear-gradient(180deg, var(--ppc-r-soft) 0%, #fff 100%);
	border: 1px solid var(--ppc-r-line);
	border-radius: 14px; padding: 22px;
	margin: 0 0 28px;
	text-align: left;
}
.ppc-r-comingsoon__formtitle {
	font-family: var(--ppc-r-font-h); font-weight: 600;
	font-size: 15px; color: var(--ppc-r-ink);
	margin-bottom: 14px; text-align: center;
}
.ppc-r-comingsoon__inputrow {
	display: flex; gap: 10px;
}
.ppc-r-comingsoon__inputrow .ppc-r-about__input {
	flex: 1 1 auto; min-width: 0;
}
.ppc-r-comingsoon__submit {
	width: auto !important; padding: 12px 22px !important;
	white-space: nowrap; flex: 0 0 auto;
}
.ppc-r-comingsoon__note {
	font-size: 12px; color: var(--ppc-r-steel);
	margin: 12px 0 0; text-align: center;
}
@media (max-width: 560px) {
	.ppc-r-comingsoon__inputrow { flex-direction: column; }
	.ppc-r-comingsoon__submit { width: 100% !important; }
}

.ppc-r-comingsoon__actions {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
	margin-top: 8px;
}
@media (max-width: 560px) {
	.ppc-r-comingsoon__actions .ppc-r-btn { width: 100%; }
}

/* ===================================================================
   16. FLASH SALE PAGE (Phase 7) — reuses shop card atoms + sale accents
   =================================================================== */

.ppc-r-sale .ppc-r-shop__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin-bottom: 28px;
}
.ppc-r-sale {
	/* Breathing room between the sale grid and the dark footer.
	   Especially important because the sale page has no sidebar or
	   pagination, so the last row would otherwise touch the footer. */
	padding-bottom: 72px;
}
@media (max-width: 900px) {
	.ppc-r-sale { padding-bottom: 48px; }
}
.ppc-r-sale__lead {
	font-size: 15.5px; line-height: 1.6; color: var(--ppc-r-steel);
	margin: 12px 0 0; max-width: 720px;
}
.ppc-r-sale__grid-wrap {
	/* No sidebar on the sale page — grid fills the container. */
	width: 100%; flex: 1 1 100%;
}
.ppc-r-sale__grid-wrap .ppc-r-shop__grid {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.ppc-r-sale__grid-wrap .ppc-r-shop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ppc-r-sale__grid-wrap .ppc-r-shop__grid { grid-template-columns: 1fr; }
}

/* Sale corner badge on the product image */
.ppc-r-sale__badge {
	position: absolute; top: 12px; left: 12px;
	display: inline-flex; align-items: baseline; gap: 3px;
	font-family: var(--ppc-r-font-m); font-size: 11.5px; font-weight: 500;
	letter-spacing: .04em;
	color: #fff; background: var(--ppc-r-accent);
	border-radius: 999px; padding: 5px 11px;
	box-shadow: 0 6px 14px -6px rgba(28, 70, 212, .55);
	z-index: 2;
}
.ppc-r-sale__badge .amount,
.ppc-r-sale__badge .woocommerce-Price-amount {
	font-family: var(--ppc-r-font-m); color: #fff;
	font-weight: 600; font-size: 12px;
}

/* Save % chip in the meta row (replaces the dose chip for bundles) */
.ppc-r-sale__pct-chip {
	display: inline-flex; align-items: center;
	font-family: var(--ppc-r-font-m); font-size: 11.5px; font-weight: 500;
	color: var(--ppc-r-accent);
	background: var(--ppc-r-accent-tint); border: 1px solid var(--ppc-r-accent-border);
	border-radius: 999px; padding: 3px 10px;
	letter-spacing: .02em;
}

/* Split price: strikethrough regular + bold sale */
.ppc-r-shop__card--onsale .ppc-r-prodcard__price {
	display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ppc-r-sale__reg {
	color: var(--ppc-r-faint); text-decoration: line-through;
	font-family: var(--ppc-r-font-m); font-weight: 400;
	font-size: 13px;
}
.ppc-r-sale__reg .amount,
.ppc-r-sale__reg .woocommerce-Price-amount {
	color: var(--ppc-r-faint); font-weight: 400;
}
.ppc-r-sale__now {
	color: var(--ppc-r-ink); text-decoration: none;
	background: transparent; font-weight: 700;
}
.ppc-r-sale__now .amount,
.ppc-r-sale__now .woocommerce-Price-amount {
	color: var(--ppc-r-ink); font-weight: 700;
}

/* Empty state (no sale items) */
.ppc-r-shop__empty {
	background: #fff; border: 1px solid var(--ppc-r-line);
	border-radius: 14px; padding: 48px 24px;
	text-align: center;
}
.ppc-r-shop__empty p {
	font-size: 15px; color: var(--ppc-r-steel);
	margin: 0 0 18px;
}

/* ===================================================================
   17. HEADER FLATTENING + CART PILL + DRAWER (Phase 8)
   Non-destructive overrides on the existing Elementor header + Astra
   cart drawer. Keeps all dropdown / mobile drawer behavior intact.
   Design reference: AboutPage.dc.html v.header / v.cart.
   =================================================================== */

/* 17-pre. Kill all shadows on the header stack — the design uses a
   single 1px bottom border and nothing else. */
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-full,
.elementor-location-header .elementor-element,
.elementor-location-header .elementor-widget,
header.main-header,
header.site-header,
.marquee-container,
.ppc-r-marquee {
	box-shadow: none !important;
	filter: none !important;
}
/* Give the header a single hairline bottom border (design spec) */
.elementor-location-header {
	border-bottom: 1px solid var(--ppc-r-line);
}

/* 17a. Nav — use redesign body font instead of the default system stack */
.elementor-location-header .elementor-nav-menu,
.elementor-location-header .elementor-nav-menu .menu-link {
	font-family: var(--ppc-r-font-b) !important;
}
.elementor-location-header .elementor-nav-menu .menu-link {
	font-weight: 500 !important;
	font-size: 15px !important;
	color: var(--ppc-r-ink) !important;
	letter-spacing: 0 !important;
}
.elementor-location-header .elementor-nav-menu .menu-link:hover,
.elementor-location-header .elementor-nav-menu .current-menu-item > .menu-link,
.elementor-location-header .elementor-nav-menu .menu-link.elementor-item-active {
	color: var(--ppc-r-accent) !important;
}
/* Dropdown caret uses accent color per design */
.elementor-location-header .elementor-nav-menu .sub-arrow,
.elementor-location-header .elementor-nav-menu .menu-link .sub-arrow {
	color: var(--ppc-r-accent) !important;
	font-size: 11px !important;
}

/* 17b. Cart pill — matches design exactly:
   IBM Plex Mono 12.5px / 500 / #0e1a2b, 1px #e4e9f0 border, 999px radius,
   9px 16px padding, NO icon, NO qty bubble (design has no state variation).
   State is communicated by the price updating live via Elementor's
   built-in wc_fragments_refresh (which already runs on cart change). */
.elementor-location-header .elementor-widget-woocommerce-menu-cart {
	width: auto !important;
	flex: 0 0 auto !important;
	max-width: none !important;
	/* Half of design's 48px header padding — Elementor's flex layout
	   only translates half of margin-right into a left shift here. */
	margin-right: 48px !important;
}
.elementor-location-header .elementor-menu-cart__toggle_wrapper {
	display: inline-block !important;
}
#elementor-menu-cart__toggle_button.elementor-menu-cart__toggle_button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	width: auto !important; height: auto !important;
	padding: 9px 16px !important;
	border: 1px solid var(--ppc-r-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--ppc-r-ink) !important;
	font-family: var(--ppc-r-font-m) !important;
	font-size: 12.5px !important; font-weight: 500 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	transition: border-color .15s ease, color .15s ease !important;
}
#elementor-menu-cart__toggle_button.elementor-menu-cart__toggle_button:hover {
	border-color: var(--ppc-r-ink) !important;
	color: var(--ppc-r-ink) !important;
}
#elementor-menu-cart__toggle_button .elementor-button-text {
	display: inline-flex !important;
	align-items: center !important;
	color: inherit !important;
	font-family: var(--ppc-r-font-m) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}
#elementor-menu-cart__toggle_button .elementor-button-text::before {
	content: 'Cart · ';
	color: inherit;
	font-family: var(--ppc-r-font-m);
	font-weight: 500;
	white-space: pre;
}
#elementor-menu-cart__toggle_button .elementor-button-text .woocommerce-Price-amount,
#elementor-menu-cart__toggle_button .elementor-button-text .woocommerce-Price-amount * {
	color: inherit !important;
	font-family: var(--ppc-r-font-m) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}
/* Hide the icon + qty bubble entirely — design has neither. */
#elementor-menu-cart__toggle_button .elementor-button-icon,
#elementor-menu-cart__toggle_button .elementor-button-icon svg,
#elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	display: none !important;
}

@media (max-width: 767px) {
	/* Elementor's mobile hamburger widget (position: static) sits at
	   x≈336–380 on a 390-wide viewport and is drawn on top of the cart
	   pill regardless of margin-right (the cart's flex parent is already
	   flush to the viewport edge, so margins don't move it). Use a pure
	   visual translate to shift the pill LEFT of the hamburger. */
	.elementor-location-header .elementor-widget-woocommerce-menu-cart {
		margin-right: 0 !important;
		transform: translateX(-56px);
	}
	#elementor-menu-cart__toggle_button.elementor-menu-cart__toggle_button {
		padding: 7px 12px !important;
	}
	#elementor-menu-cart__toggle_button.elementor-menu-cart__toggle_button,
	#elementor-menu-cart__toggle_button .elementor-button-text,
	#elementor-menu-cart__toggle_button .elementor-button-text .woocommerce-Price-amount,
	#elementor-menu-cart__toggle_button .elementor-button-text .woocommerce-Price-amount * {
		font-size: 11px !important;
	}
}

/* 17c. Mini-cart drawer buttons.
   Elementor's cart widget renders its OWN button classes (not the
   standard WooCommerce ones), inside `.elementor-menu-cart__footer-buttons`:
     • `.elementor-button--view-cart`   → default primary (dark gray fill)
     • `.elementor-button--checkout`    → ghost / outline
   We flip that: View cart = ghost, Checkout = filled accent — matches the
   design's CTA hierarchy (checkout is the primary action). Also targets
   the WooCommerce/Astra fallback selectors so this works if the widget
   config ever changes. */
body .elementor-menu-cart__footer-buttons,
body .woocommerce-mini-cart__buttons {
	display: flex !important;
	gap: 10px !important;
	padding: 14px 0 4px !important;
	margin: 0 !important;
	flex-direction: row !important;
}
/* Base (ghost) — applies to both buttons; the checkout rule below overrides */
body .elementor-menu-cart__footer-buttons a.elementor-button,
body .elementor-menu-cart__footer-buttons .elementor-button,
body .elementor-menu-cart__container .woocommerce-mini-cart__buttons .button,
body .astra-cart-drawer .woocommerce-mini-cart__buttons .button {
	flex: 1 1 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--ppc-r-font-b) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 13px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--ppc-r-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--ppc-r-ink) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	min-width: 0 !important;
	max-width: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}
body .elementor-menu-cart__footer-buttons a.elementor-button:hover,
body .elementor-menu-cart__container .woocommerce-mini-cart__buttons .button:hover,
body .astra-cart-drawer .woocommerce-mini-cart__buttons .button:hover {
	border-color: var(--ppc-r-ink) !important;
	background: var(--ppc-r-soft) !important;
	color: var(--ppc-r-ink) !important;
}
/* Checkout = filled primary accent. Extra .elementor-button-- class chain
   for double-specificity so this always wins over the ghost rule above. */
body .elementor-menu-cart__footer-buttons a.elementor-button.elementor-button--checkout,
body .elementor-menu-cart__footer-buttons .elementor-button.elementor-button--checkout,
body .elementor-menu-cart__container .woocommerce-mini-cart__buttons a.checkout,
body .astra-cart-drawer .woocommerce-mini-cart__buttons a.checkout {
	background: var(--ppc-r-accent) !important;
	border-color: var(--ppc-r-accent) !important;
	color: #fff !important;
	box-shadow: 0 8px 20px -10px var(--ppc-r-accent) !important;
}
body .elementor-menu-cart__footer-buttons a.elementor-button.elementor-button--checkout:hover,
body .elementor-menu-cart__container .woocommerce-mini-cart__buttons a.checkout:hover,
body .astra-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover {
	background: var(--ppc-r-accent-dark) !important;
	border-color: var(--ppc-r-accent-dark) !important;
	color: #fff !important;
}
/* Elementor wraps button text/icon in inner spans — inherit color from button */
body .elementor-menu-cart__footer-buttons .elementor-button * {
	color: inherit !important;
	background: transparent !important;
	font-family: inherit !important;
}
/* Subtotal + item styling inside the drawer for consistency */
body .elementor-menu-cart__container .woocommerce-mini-cart__total,
body .elementor-menu-cart__container .woocommerce-mini-cart__total strong,
body .astra-cart-drawer .woocommerce-mini-cart__total,
body .astra-cart-drawer .woocommerce-mini-cart__total strong {
	font-family: var(--ppc-r-font-h) !important;
	font-weight: 700 !important;
	color: var(--ppc-r-ink) !important;
}
body .elementor-menu-cart__container .woocommerce-mini-cart__total .amount,
body .elementor-menu-cart__container .woocommerce-mini-cart__total .amount *,
body .astra-cart-drawer .woocommerce-mini-cart__total .amount,
body .astra-cart-drawer .woocommerce-mini-cart__total .amount * {
	color: var(--ppc-r-ink) !important;
	font-family: var(--ppc-r-font-h) !important;
}
body .elementor-menu-cart__container .woocommerce-mini-cart-item a,
body .astra-cart-drawer .woocommerce-mini-cart-item a {
	color: var(--ppc-r-accent) !important;
	font-family: var(--ppc-r-font-b) !important;
	font-weight: 600 !important;
}