/*
 * PlugPier storefront styles.
 */

:root {
	--pp-ink: #1c2a35;
	--pp-ink-soft: #33475a;
	--pp-teal: #2f8f83;
	--pp-teal-dark: #24756b;
	--pp-sand: #f7f4ef;
	--pp-white: #ffffff;
	--pp-muted: #616e7a;
	--pp-line: #e3ddd3;

	--pp-serif: "Playfair Display", Georgia, serif;
	--pp-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

	--pp-sidebar-w: 280px;
	--pp-shadow: 0 20px 45px -25px rgba(28, 42, 53, 0.35);
	--pp-tr: 0.22s ease;

	/* Live height of the fixed .pp-notice bar; JS keeps this accurate on
	   load/resize. Defaults to 38px so JS-disabled visitors (or a single-line
	   bar) still clear the fixed bar instead of being overlapped. The
	   padding-top rules that consume it are gated behind `.pp-notice ~ …`,
	   so this default only takes effect when a notice actually renders. */
	--pp-notice-h: 38px;
}

* , *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--pp-sans);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--pp-ink-soft);
	background: var(--pp-sand);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--pp-serif);
	color: var(--pp-ink);
	line-height: 1.2;
	margin: 0 0 0.55em;
}

html { scroll-behavior: smooth; }

/* --pp-teal (#2f8f83) is a 3.91:1 accent — below WCAG AA 4.5:1 for body text.
   Text-level links use the darker --pp-teal-dark (5.48:1 on white, 5.00:1 on
   sand); --pp-teal is retained for non-text fills (buttons/badges/icons). */
a { color: var(--pp-teal-dark); text-decoration: none; transition: color var(--pp-tr); }
a:hover { color: var(--pp-ink); }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 999; background: var(--pp-ink); color: #fff; padding: 8px 14px; clip-path: none; width: auto; height: auto; overflow: visible; margin: 0; }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--pp-teal); outline-offset: 2px; }

.pp-container { max-width: 1150px; margin-inline: auto; padding-inline: 34px; }
.pp-container--narrow { max-width: 820px; }

.pp-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--pp-teal-dark);
	margin-bottom: 12px;
}

.pp-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* ---------- Buttons ---------- */

.pp-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--pp-ink);
	color: #fff;
	font-family: var(--pp-sans);
	font-size: 13.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 30px;
	border: 1px solid var(--pp-ink);
	border-radius: 3px;
	cursor: pointer;
	transition: background var(--pp-tr), border-color var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}

.pp-button:hover { background: var(--pp-teal); border-color: var(--pp-teal); color: #fff; transform: translateY(-2px); }
.pp-button--ghost { background: transparent; color: var(--pp-ink); }
.pp-button--light { background: #fff; border-color: #fff; color: var(--pp-ink); }
.pp-button--light:hover { background: var(--pp-sand); border-color: var(--pp-sand); color: var(--pp-ink); }

/* ---------- Notice bar ---------- */

.pp-notice {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	background: var(--pp-teal-dark);
	color: #fff;
	text-align: center;
	font-size: 13.5px;
	letter-spacing: 0.06em;
	padding: 8px 16px;
}

.pp-notice ~ .pp-sidebar { padding-top: var(--pp-notice-h); }
.pp-notice ~ .pp-main { padding-top: var(--pp-notice-h); }

/* ---------- Sidebar ---------- */

.pp-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--pp-sidebar-w);
	background: var(--pp-white);
	border-right: 1px solid var(--pp-line);
	z-index: 50;
	overflow-y: auto;
}

.pp-sidebar__inner {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 44px 30px 30px;
}

.pp-brand { text-align: center; margin-bottom: 40px; }

.pp-brand__mark { display: inline-block; width: 58px; color: var(--pp-ink); margin-bottom: 10px; }
.pp-brand__mark:hover { color: var(--pp-teal); }

.pp-brand__name {
	display: block;
	font-family: var(--pp-serif);
	font-weight: 600;
	font-size: 30px;
	color: var(--pp-ink);
	letter-spacing: 0.02em;
}

.pp-brand__tagline {
	display: block;
	margin-top: 6px;
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-nav ul { list-style: none; margin: 0; padding: 0; }

.pp-nav a {
	display: block;
	padding: 12px 4px;
	border-bottom: 1px solid var(--pp-line);
	color: var(--pp-ink-soft);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pp-nav li:first-child a { border-top: 1px solid var(--pp-line); }
.pp-nav a:hover,
.pp-nav .current-menu-item > a { color: var(--pp-teal-dark); }

.pp-nav ul ul { padding-left: 14px; }
.pp-nav ul ul a { text-transform: none; letter-spacing: 0.04em; font-size: 14.5px; }

.pp-sidebar__foot { margin-top: auto; text-align: center; padding-top: 34px; }

.pp-social { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; padding: 0; }
.pp-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid var(--pp-line); border-radius: 50%;
	color: var(--pp-ink-soft);
	transition: border-color var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}
.pp-social a:hover { color: var(--pp-teal); border-color: var(--pp-teal); transform: translateY(-2px); }

.pp-copyright { font-size: 12.5px; color: var(--pp-muted); margin: 0; }

.pp-sidebar-toggle { display: none; }

/* ---------- Main column ---------- */

.pp-main { margin-left: var(--pp-sidebar-w); min-height: 100vh; }

/* ---------- Hero ---------- */

.pp-hero { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }

.pp-hero__img, .pp-hero__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-hero__placeholder { background: linear-gradient(135deg, #26414d, #2f8f83); }

.pp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,42,53,.62), rgba(28,42,53,.45)); }

.pp-hero__content { position: relative; text-align: center; color: #fff; max-width: 760px; padding: 90px 30px; }
.pp-hero__content .pp-eyebrow { color: #a8e0d6; }
.pp-hero__title { color: #fff; font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; margin-bottom: 18px; text-shadow: 0 1px 12px rgba(15,25,32,.35); }
.pp-hero__sub { font-size: 18px; color: rgba(255,255,255,.88); margin: 0 auto 34px; max-width: 560px; text-shadow: 0 1px 12px rgba(15,25,32,.35); }

/* ---------- Sections ---------- */

.pp-section-head { text-align: center; margin-bottom: 46px; }
.pp-section-head h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0; }

.pp-features { padding: 90px 0 70px; }

.pp-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.pp-feature {
	position: relative;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 4px;
	padding: 34px 28px;
	text-align: center;
	transition: transform var(--pp-tr);
}
/* Hover shadow lives on a pseudo-element and animates opacity only
   (compositor-friendly; box-shadow transitions cause repaint jank). */
.pp-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: var(--pp-shadow);
	opacity: 0;
	transition: opacity 0.22s ease;
	pointer-events: none;
}
.pp-feature:hover { transform: translateY(-4px); }
.pp-feature:hover::after { opacity: 1; }

.pp-feature__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 50%;
	background: rgba(47, 143, 131, 0.12); color: var(--pp-teal);
	font-size: 24px; margin-bottom: 18px;
}
.pp-feature h3 { font-size: 19px; margin-bottom: 8px; }
.pp-feature p { font-size: 15px; color: var(--pp-muted); margin: 0; }

.pp-featured { padding: 30px 0 80px; }
.pp-featured__more { text-align: center; margin-top: 40px; }

.pp-cta { background: var(--pp-ink); color: #dbe4ea; padding: 80px 0; }
.pp-cta__inner { text-align: center; max-width: 720px; }
.pp-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.pp-cta p { margin: 0 auto 30px; }

/* ---------- Pages / entries ---------- */

.pp-page { padding: 70px 0 90px; }

.pp-entry__title { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 26px; }
.pp-entry__content { max-width: 100%; }
.pp-entry__content h2 { margin-top: 1.6em; }
.pp-entry__content h3 { margin-top: 1.4em; }
.pp-entry__content h4 { margin-top: 1.2em; }
.pp-entry__content a { border-bottom: 1px solid currentColor; }
.pp-entry__content ul, .pp-entry__content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.pp-entry__content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--pp-teal);
	color: var(--pp-muted);
}
.pp-entry__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--pp-sand);
	border: 1px solid var(--pp-line);
	border-radius: 3px;
	padding: 0.1em 0.4em;
}

/* Content-area form fields — scoped to Contact Form 7 (their only intended
   target). Left unscoped, `.pp-entry__content input[type=text]` leaked onto the
   block cart/checkout coupon inputs (which also render inside .pp-entry__content
   but never inside .wpcf7), overriding Woo's 16px font and reintroducing iOS
   focus-zoom. .wpcf7 keeps the styling on CF7 while freeing the block inputs. */
.pp-entry__content .wpcf7 input[type="text"],
.pp-entry__content .wpcf7 input[type="email"],
.pp-entry__content .wpcf7 input[type="url"],
.pp-entry__content .wpcf7 input[type="tel"],
.pp-entry__content .wpcf7 textarea,
.pp-entry__content .wpcf7 select {
	width: 100%;
	border: 1px solid var(--pp-line);
	border-radius: 3px;
	padding: 12px 14px;
	font-family: var(--pp-sans);
	font-size: 15px;
	color: var(--pp-ink);
	background: #fff;
}
.pp-entry__content .wpcf7 textarea { min-height: 160px; }
.pp-entry__content .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	background: var(--pp-ink);
	color: #fff;
	font-family: var(--pp-sans);
	font-size: 13.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 30px;
	border: 1px solid var(--pp-ink);
	border-radius: 3px;
	cursor: pointer;
	transition: background var(--pp-tr), border-color var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}
.pp-entry__content .wpcf7-submit:hover { background: var(--pp-teal); border-color: var(--pp-teal); transform: translateY(-2px); }

/* Pagination (index / search) */
.pp-page .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}
.pp-page .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 3px;
	color: var(--pp-ink-soft);
}
.pp-page .pagination a.page-numbers:hover { color: var(--pp-teal-dark); border-color: var(--pp-teal); }
.pp-page .pagination .page-numbers.current {
	background: var(--pp-ink);
	color: #fff;
	border-color: var(--pp-ink);
}

.pp-none { text-align: center; padding: 60px 0; }
.pp-404 { font-size: clamp(80px, 12vw, 140px); line-height: 1; color: var(--pp-teal); margin-bottom: 0; }
.pp-none .pp-searchform { margin: 26px auto; }
.pp-none .pp-button { margin-top: 12px; }

/* ---------- Search form ---------- */

.pp-searchform { display: flex; max-width: 440px; background: #fff; border: 1px solid var(--pp-line); border-radius: 3px; overflow: hidden; }
.pp-searchform__field { flex: 1; border: none; padding: 12px 16px; font-family: var(--pp-sans); font-size: 15px; }
.pp-searchform__field:focus { outline: none; }
.pp-searchform:focus-within { outline: 2px solid var(--pp-teal); outline-offset: 2px; }
.pp-searchform__submit { border: none; background: var(--pp-ink); color: #fff; padding: 0 18px; cursor: pointer; }
.pp-searchform__submit:hover { background: var(--pp-teal); }

/* ---------- Search results ---------- */
/* search.php emits <p class="pp-search-count">; this hook must match that
   exact class (an earlier `.pp-search-results__count` never matched anything). */
.pp-search-count { color: var(--pp-muted); margin-bottom: 30px; }

.pp-search-result { padding-block: 26px; border-bottom: 1px solid var(--pp-line); }
.pp-search-result:last-child { border-bottom: none; }

.pp-search-result__title { font-family: var(--pp-serif); font-size: 22px; margin: 0 0 6px; }
.pp-search-result__title a { color: var(--pp-ink); }
.pp-search-result__title a:hover { color: var(--pp-teal-dark); }

.pp-search-result__meta {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: 10px;
}

/* ---------- WooCommerce: catalog cards ---------- */

/* Bare `ul.products` (0,1,1) lost to Woo's `.woocommerce ul.products` (0,2,1)
   on the front page (reversed nesting: .pp-container > .woocommerce > ul), so
   Woo's `margin:0 0 1em` leaked ~16px under the grid. `.woocommerce ul.products`
   ties Woo and wins on load order. Media-query twins below match this shape. */
.woocommerce .pp-container ul.products,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before, ul.products::after { display: none !important; }

ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform var(--pp-tr);
}

/* Hover shadow on a pseudo-element, opacity-only transition (no box-shadow
   transitions anywhere — they force expensive repaints while scrolling).
   Note: no overflow:hidden on the card so the shadow isn't clipped;
   the image clips itself via border-radius below. */
ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: var(--pp-shadow);
	opacity: 0;
	transition: opacity 0.22s ease;
	pointer-events: none;
}

ul.products li.product:hover { transform: translateY(-5px); }
ul.products li.product:hover::after { opacity: 1; }

/* browser-frame strip above the preview */
ul.products li.product a.woocommerce-LoopProduct-link { display: block; }

ul.products li.product img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	margin: 0 !important;
	border-bottom: 1px solid var(--pp-line);
	border-radius: 4px 4px 0 0; /* clip top corners to match the card radius */
}

.pp-prod-card__meta { padding: 22px 24px 4px; }
.pp-prod-card__title { font-size: 20px; margin: 0 0 6px; }
.pp-prod-card__sub {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 13.5px;
	color: var(--pp-muted);
	line-height: 1.55;
	min-height: calc(1.55em * 2);
}

ul.products li.product .price {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--pp-ink);
	color: #fff !important;
	font-size: 13.5px !important;
	padding: 5px 12px;
	border-radius: 20px;
	z-index: 2;
}

ul.products li.product .price ins { background: none; }

.pp-badge--free {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--pp-teal);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	z-index: 2;
}

ul.products li.product .button {
	/* margin !important is load-bearing: Woo's `.woocommerce ul.products
	   li.product .button {margin-top:1em}` (0,4,3) out-specifies ours (0,2,2).
	   border/border-radius/font-size/padding do NOT need it — their only Woo
	   competitor is `.woocommerce a.button` (0,2,1), below ours. */
	margin: 14px 24px 24px !important;
	margin-top: auto !important;
	background: transparent !important;
	border: 1px solid var(--pp-ink);
	color: var(--pp-ink) !important;
	border-radius: 3px;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 12px 20px;
	text-align: center;
	transition: background var(--pp-tr), color var(--pp-tr);
	/* Centre the label and guarantee the 44px minimum touch target; padding
	   alone resolved to 39px at this font-size. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

ul.products li.product .button:hover { background: var(--pp-ink) !important; color: #fff !important; }

/* Small "Live Preview" mini-link under a card's Add-to-cart button. The button
   carries margin-top:auto, so it and this link sit at the card's foot; every
   card gains the same link, so equal grid heights are preserved. The -6px top
   pulls it toward the button; align-self:center keeps it a compact centred link.
   `.pp-card-preview:hover` (0,2,0) beats `a:hover` (0,1,1) for the colour. */
.pp-card-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	gap: 6px;
	min-height: 24px;
	margin: -6px 24px 20px;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-muted);
}
.pp-card-preview:hover { color: var(--pp-teal-dark); }

/* AJAX "View cart" link Woo appends under a card's Add-to-cart button; style it
   as a small uppercase mini-link instead of a bare teal text link. */
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce div.product a.added_to_cart {
	display: inline-block;
	margin: 0 24px 20px;
	padding-top: 0;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-teal-dark);
	border-bottom: 1px solid currentColor;
}

.woocommerce-result-count, .woocommerce-ordering { font-size: 13.5px; color: var(--pp-muted); margin-bottom: 26px !important; }

/* The sort-by <select> is otherwise a raw native OS dropdown (Woo only sets
   vertical-align on it — its nice form-select styling is scoped to .form-row,
   which the ordering select is not inside). Match Woo's own selector shape at
   (0,3,1) and win on load order. */
.woocommerce .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--pp-sans);
	font-size: 13.5px;
	color: var(--pp-ink);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c2a35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	border: 1px solid var(--pp-line);
	border-radius: 3px;
	padding: 10px 40px 10px 14px;
	line-height: 1.4;
	cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--pp-teal);
	outline-offset: 2px;
}

/* breadcrumb trail — prefixed with .woocommerce to reach (0,2,0)/(0,2,1) and
   beat Woo's `.woocommerce:where(...) .woocommerce-breadcrumb` (.92em/#767676)
   and its `margin:0 0 1em`, all of which out-specified the bare selector. */
.woocommerce .woocommerce-breadcrumb {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: 26px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--pp-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pp-teal-dark); }

/* page title on shop archive */
.woocommerce-products-header { text-align: center; margin: 0 0 44px; }
.woocommerce-products-header__title { font-size: clamp(30px, 3.6vw, 44px); }

/* ---------- WooCommerce: single product ---------- */

div.product { display: block; }

.pp-product-top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 50px;
	align-items: start;
}

div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.woocommerce-product-gallery { position: relative; }

/* Single-product sale flash: match the theme badge language, anchored to the
   gallery (its positioning context is the .pp-product-top grid cell). */
div.product span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	background: var(--pp-teal);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	min-height: auto;
	line-height: 1.6;
}
div.product .woocommerce-product-gallery img { border: 1px solid var(--pp-line); border-radius: 4px; }

/* Main gallery image */
.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Zoom / lightbox trigger: clean circle, top-right of the gallery */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 9;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--pp-line);
	border-radius: 50%;
	box-shadow: none;
}

div.product .summary {
	width: 100% !important;
	float: none !important;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 5px;
	padding: 34px;
	position: sticky;
	top: calc(var(--pp-notice-h) + 22px);
}

div.product .product_title { font-size: 32px; margin-bottom: 6px; }

/* `.woocommerce div.product .summary p.price` (0,4,2) beats Woo's
   `.woocommerce:where(...) div.product p.price {font-size:1.25em}` (0,3,2),
   which was shrinking the price to ~20.6px against the 32px title. */
.woocommerce div.product .summary p.price { font-size: 28px; color: var(--pp-teal) !important; font-family: var(--pp-serif); margin-bottom: 16px; display: block; }

div.product .summary .cart { margin: 22px 0; }

/* Neutralise two leaked Woo margins (both `margin-bottom:2em`) that broke the
   card's internal rhythm: the summary's own 2em (stacked layout) and form.cart's
   2em below the CTA. `.woocommerce div.product div.summary` (0,3,2) ties Woo;
   `.woocommerce div.product .summary form.cart` (0,4,2) beats Woo's (0,3,2). */
.woocommerce div.product div.summary { margin-bottom: 0; }
.woocommerce div.product .summary form.cart { margin-bottom: 22px; }

/* Add-to-cart row: qty + button on one line (qty is hidden server-side for
   sold-individually products; this is the styled fallback). The Live Preview
   link is injected inside this form (woocommerce_after_add_to_cart_button) and
   must sit full-width on its OWN line beneath the CTA, so the row is allowed to
   wrap and the vertical gap is zeroed — the preview button carries its own
   margin-top instead, keeping a single 12px spacing source. Column gap for the
   qty + CTA stays 12px. */
div.product form.cart { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: stretch; }
/* Woo's clearfix `form.cart::before/::after {content:" ";display:table}` (0,3,3)
   become phantom flex items in our flex row, adding a 12px gap on each side of
   the CTA. `content:none` (matching Woo's selector shape) removes them. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; }
div.product form.cart .quantity { margin: 0; }
/* Products are sold individually, so the quantity wrapper only holds a hidden
   fallback input; collapse it so the CTA aligns with the title/price above. */
div.product form.cart .quantity:has(input.qty[type="hidden"]) { display: none; }
div.product form.cart .button { flex: 1; }
input.qty {
	width: 64px;
	border: 1px solid var(--pp-line);
	border-radius: 3px;
	text-align: center;
	font-family: var(--pp-sans);
	font-size: 15px;
	color: var(--pp-ink);
	background: #fff;
}

div.product .summary .button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	/* border-radius/font-size/padding !important removed: our (0,3,1) already
	   beats Woo's `a.button`/`a.button.alt` base (0,2,1). background/color keep
	   it to win over Woo's `.alt {background-color:#7f54b3}` cleanly. */
	background: var(--pp-ink) !important;
	color: #fff !important;
	border-radius: 3px;
	font-size: 13.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 15px 32px;
	width: 100%;
	text-align: center;
	transition: background var(--pp-tr), border-color var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}

div.product .summary .button:hover { background: var(--pp-teal) !important; transform: translateY(-2px); }

/* Live Preview: full-width ghost CTA directly under Add to Cart, injected inside
   form.cart. flex-basis:100% forces it onto its own wrapped line; margin-top
   supplies the 12px gap (form.cart row-gap is 0). It is NOT a `.button`, so the
   Woo/summary button rules above never touch it. Hover flips to the ink fill —
   `.pp-preview-btn:hover` (0,2,0) ties `.pp-button:hover` and wins on order,
   overriding only colour (the -2px lift from `.pp-button:hover` is preserved). */
.pp-preview-btn {
	flex: 0 0 100%;
	width: 100%;
	justify-content: center;
	min-height: 44px;
	margin-top: 12px;
}
.pp-preview-btn:hover {
	background: var(--pp-ink);
	border-color: var(--pp-ink);
	color: #fff;
}

div.product .woocommerce-tabs { margin-top: 60px; }
div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 24px !important; display: flex; gap: 6px; }
div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
/* Woo declares no `display` on these li pseudos (only border/position), so
   `display:none` wins without !important — it's the only display declaration. */
div.product .woocommerce-tabs ul.tabs li::before,
div.product .woocommerce-tabs ul.tabs li::after { display: none; }
div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 1px solid var(--pp-line) !important;
	border-radius: 3px !important;
	margin: 0 !important;
}
div.product .woocommerce-tabs ul.tabs li.active { background: var(--pp-ink) !important; }
div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
/* MUST-FIX (ground truth #1): prefix with .woocommerce so our (0,4,1) ties
   Woo's `.woocommerce div.product .woocommerce-tabs .panel {padding:0}` and
   wins on load order — restoring inner padding so text never touches the edge. */
.woocommerce div.product .woocommerce-tabs .panel { background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 4px; padding: 30px 34px; }

/* Panel heading duplicates the tab label ("Description") — hide it. */
.woocommerce-Tabs-panel > h2:first-of-type { display: none; }

/* The panel is now full page width, so raw text runs an unreadable line
   length. Keep the box full-bleed but cap the *measure* of its text children
   to a comfortable ~80 characters. max-width can't push content past the
   panel's own width, so this can never introduce a horizontal scrollbar; list
   padding lives on the ul/ol themselves, so markers stay indented. */
div.product .woocommerce-Tabs-panel > * { max-width: 80ch; }

.related.products {
	margin-top: 70px;
	padding-top: 50px;
	border-top: 1px solid var(--pp-line);
}
.related.products > h2 { text-align: center; font-size: 28px; margin-bottom: 30px; }

/* Woo notices — theme card treatment. We tie Woo's base notice rule (0,1,0)
   and win on load order, so no !important is needed for background/border.
   MUST-FIX (ground truth #2): restore the 3.5em left gutter so Woo's absolutely
   positioned ::before checkmark (left:1.5em, ~1em wide) never overlaps the text.
   Woo already sets position:relative on these, so the icon anchors correctly. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-top-width: 3px;
	border-radius: 4px;
	padding: 14px 18px 14px 3.5em;
	margin-bottom: 20px;
}

/* Semantic accents so success / info / error stay visually distinct (must-fix).
   These are WooCommerce's own status hues, not new brand colors; Woo declares
   them non-!important at (0,1,0)/(0,1,1), so our later rules win the tie. */
.woocommerce-message { border-top-color: var(--pp-teal); }
.woocommerce-info    { border-top-color: #1e85be; }
.woocommerce-error   { border-top-color: #c0392b; }
.woocommerce-message::before { color: var(--pp-teal); }
.woocommerce-info::before    { color: #1e85be; }
.woocommerce-error::before   { color: #c0392b; }

/* MUST-FIX (ground truth #3): Woo focuses the notice (tabindex=-1) after every
   add-to-cart. Suppress the programmatic/mouse ring but KEEP a real keyboard
   ring via :focus-visible (handled by the global a/button/input rule + this
   deliberately narrow :not(:focus-visible) reset). */
.woocommerce-message:focus:not(:focus-visible),
.woocommerce-info:focus:not(:focus-visible),
.woocommerce-error:focus:not(:focus-visible) { outline: none; }

/* MUST-FIX (ground truth #4): notice action buttons ("View cart" etc.) must
   match .pp-button, across success/info/error. Our (0,2,1) ties Woo's a.button
   base; font/spacing/padding win on order, background/color/radius keep
   !important to beat Woo's grey pill (background-color:#e9e6ed). */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--pp-ink) !important;
	color: #fff !important;
	border: 1px solid var(--pp-ink);
	border-radius: 3px !important;
	font-family: var(--pp-sans);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 12px 24px;
	min-height: 44px;
	box-sizing: border-box;
	transition: background var(--pp-tr), border-color var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
	background: var(--pp-teal) !important;
	border-color: var(--pp-teal);
	color: #fff !important;
	transform: translateY(-2px);
}

/* Cart / checkout tables inherit cleanly; light touches */
.woocommerce table.shop_table { border: 1px solid var(--pp-line); border-radius: 4px; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 12px 14px; }
.woocommerce table.shop_table img { width: 64px; }

/* Cart totals box */
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 5px;
	padding: 24px;
}

/* ---------- WooCommerce BLOCK cart & checkout ---------- */

/* The block cart/checkout render their interactive UI only after JS
   hydration; the class names below are stable WooCommerce block API classes.
   Everything here is scoped under .woocommerce-cart / .woocommerce-checkout so
   it can never leak into other block contexts, and we touch ONLY the primary
   CTA buttons and the totals/summary card — not inputs, radios, coupon or
   shipping panels. The base `.wc-block-components-button…contained` selector
   is shared with the notice-banner dismiss button, so that variant is
   explicitly excluded. Specificity (body class + multiple wc-block classes)
   is high enough to win over any theme.json `.wp-element-button` coloring. */
/* Only the two primary CTAs. The former broad `.contained` catch-all also
   matched the coupon "Apply" button (which is `wc-block-components-button
   wp-element-button contained`), giving a secondary control the full dark
   primary treatment. The specific selectors already out-specify Woo's button
   base, so the catch-all is removed rather than patched with more :not(). */
.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button {
	background: var(--pp-ink);
	color: #fff;
	border: 0;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13.5px;
	padding: 15px 32px;
	transition: background var(--pp-tr), color var(--pp-tr), transform var(--pp-tr);
}

.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:hover {
	background: var(--pp-teal);
	color: #fff;
	transform: translateY(-2px);
}

/* Woo paints its blue focus ring (box-shadow …#0675c4) on these block CTAs
   while every other control shows teal. Adding .wp-element-button reaches
   (0,5,0) > Woo's (0,4,1); Woo's shadow is non-!important so it is overridden. */
.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button.wp-element-button:focus,
.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button.wp-element-button:focus-visible,
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button.wp-element-button:focus,
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button.wp-element-button:focus-visible {
	outline: 2px solid var(--pp-teal);
	outline-offset: 2px;
	box-shadow: none;
}

/* Order-summary / cart-totals sidebar container: theme card treatment.
   Horizontal padding is 8px (not 24px) because Woo indents the inner totals /
   coupon / item panels by 16px; 8px + 16px = the intended 24px inset, while the
   non-panel "Proceed to checkout" container gains room so its label doesn't
   squeeze in the narrow sidebar. Top/bottom stay 24px. */
.woocommerce-cart .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block,
.woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block {
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 5px;
	padding: 24px 8px;
}

/* Shared disabled treatment so every primary button reads the same when
   inactive (CF7 submit during AJAX, block Place-order until fields validate). */
.pp-button:disabled, .pp-button[disabled], .pp-button[aria-disabled="true"],
.pp-entry__content .wpcf7-submit:disabled,
.pp-searchform__submit:disabled,
div.product .summary .button:disabled,
.woocommerce-cart .wc-block-cart__submit-button[aria-disabled="true"],
.woocommerce-checkout .wc-block-components-checkout-place-order-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

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

@media (max-width: 1080px) {
	.pp-features__grid { grid-template-columns: repeat(2, 1fr); }
	.woocommerce .pp-container ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.pp-product-top { grid-template-columns: 1fr; gap: 34px; }
	div.product .summary { position: static; }
}

@media (max-width: 820px) {
	.pp-sidebar { transform: translateX(-100%); transition: transform var(--pp-tr); width: min(320px, 86vw); }
	.pp-sidebar.is-open { transform: translateX(0); box-shadow: var(--pp-shadow); }
	.pp-main { margin-left: 0; }

	.pp-sidebar-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 14px; left: 14px;
		z-index: 70;
		width: 46px; height: 46px;
		background: var(--pp-white);
		border: 1px solid var(--pp-line);
		border-radius: 50%;
		color: var(--pp-ink);
		cursor: pointer;
		font-size: 20px;
		box-shadow: var(--pp-shadow);
	}
	.pp-sidebar-toggle:hover { color: var(--pp-teal); border-color: var(--pp-teal); }

	/* `.pp-notice ~ .pp-main` padding-top is already declared unconditionally
	   above (line ~119); no width-specific override needed here. */
	.pp-notice ~ .pp-sidebar-toggle { top: calc(var(--pp-notice-h) + 14px); }

	.pp-features__grid { grid-template-columns: 1fr; }
	.pp-container { padding-inline: 22px; }
}

/* Theme cards stay two-up on tablets; a single full-width card per row reads
   as a broken layout rather than a catalogue. */
@media (max-width: 600px) {
	.woocommerce .pp-container ul.products,
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Product gallery: static grid + lightbox (no slider/zoom) ---------- */

div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	/* !important kept: flexslider (when active) writes inline transform/width on
	   this wrapper, which only !important can override. Harmless when disabled. */
	transform: none !important;
	width: auto !important;
}

/* Count-aware fallbacks: the 3-col grid + full-width first image only composes
   cleanly for 1 or 4 images. With 2 the lone secondary would sit at 1/3 width;
   with 3 one column would be empty; with 5 the fourth secondary orphans onto a
   row of its own. :has() raises specificity above the base. */
div.product .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image:nth-child(2):last-child) {
	grid-template-columns: 1fr;
}
div.product .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image:nth-child(3):last-child),
div.product .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image:nth-child(5):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block;
	cursor: zoom-in;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border: 1px solid var(--pp-line);
	border-radius: 4px;
	transition: opacity var(--pp-tr);
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a:hover img {
	opacity: 0.9;
}

/* Order summary (checkout sidebar): the product short description is dumped
   into a narrow column and wraps to one word per line. Names, quantity and
   price carry the meaning; hide the description there only. */
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-product-metadata__description {
	display: none;
}

/* ===================================================================
   Premium content (v1.3.0)
   Homepage sections, rich product pages, documentation.
   Hover effects animate opacity/transform only — never box-shadow,
   width/height or inset — so scrolling stays on the compositor.
   =================================================================== */

.pp-button--ghost-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.pp-button--ghost-light:hover { background: #fff; border-color: #fff; color: var(--pp-ink); }

.pp-section-head--left { text-align: left; margin-bottom: 30px; }
.pp-section-head__sub { max-width: 620px; margin: 12px auto 0; color: var(--pp-muted); }
.pp-section-head--left .pp-section-head__sub { margin-inline: 0; }

.pp-textlink {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--pp-teal-dark);
}
.pp-textlink .pp-icon { width: 18px; height: 18px; transition: transform var(--pp-tr); }
.pp-textlink:hover .pp-icon { transform: translateX(4px); }

/* ---------- Hero actions ---------- */

.pp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Trust bar ---------- */

.pp-trustbar { background: var(--pp-ink); color: rgba(255,255,255,.9); }
.pp-trustbar ul {
	list-style: none; margin: 0; padding: 22px 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.pp-trustbar li { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.pp-trustbar .pp-icon { width: 20px; height: 20px; flex: none; color: #7fd4c6; }

/* ---------- How it works / numbered steps ---------- */

.pp-how { padding: 20px 0 80px; }

.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
.pp-steps--three { grid-template-columns: repeat(3, 1fr); }

.pp-step {
	position: relative;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 4px;
	padding: 32px 28px 28px;
}
.pp-step__num {
	display: block;
	font-family: var(--pp-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--pp-line);
	margin-bottom: 14px;
}
.pp-step h3 { font-size: 21px; margin-bottom: 8px; }
.pp-step p { margin: 0; color: var(--pp-muted); font-size: 15.5px; }

/* ---------- Checklist ---------- */

.pp-checklist { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 13px; }
.pp-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.pp-checklist .pp-icon { width: 19px; height: 19px; flex: none; margin-top: 4px; color: var(--pp-teal); }

/* ---------- Inside every theme ---------- */

.pp-inside { background: var(--pp-white); border-block: 1px solid var(--pp-line); padding: 84px 0; }
.pp-inside__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.pp-inside__media { position: relative; }
.pp-inside__img, .pp-inside__placeholder { border-radius: 5px; width: 100%; }
.pp-inside__placeholder { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #dfe9e6, #f4efe7); }
.pp-inside__body h2 { font-size: clamp(26px, 3vw, 36px); }
.pp-inside__body > p { color: var(--pp-muted); margin-bottom: 26px; }

/* ---------- FAQ (shared: homepage + product) ---------- */

.pp-faq { display: grid; gap: 12px; }

.pp-faq__item {
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 4px;
}
.pp-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	cursor: pointer;
	list-style: none;
	padding: 19px 22px;
	font-family: var(--pp-serif);
	font-size: 18px;
	color: var(--pp-ink);
	transition: color var(--pp-tr);
}
.pp-faq__item summary::-webkit-details-marker { display: none; }
.pp-faq__item summary:hover { color: var(--pp-teal-dark); }
.pp-faq__item summary:focus-visible { outline: 2px solid var(--pp-teal); outline-offset: -2px; }

/* Plus → minus, drawn with two bars so nothing reflows on toggle. */
.pp-faq__mark { position: relative; width: 16px; height: 16px; flex: none; }
.pp-faq__mark::before,
.pp-faq__mark::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 1.5px; background: var(--pp-teal-dark);
	transform: translateY(-50%);
	transition: transform var(--pp-tr), opacity var(--pp-tr);
}
.pp-faq__mark::after { transform: translateY(-50%) rotate(90deg); }
.pp-faq__item[open] .pp-faq__mark::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.pp-faq__answer { padding: 0 22px 20px; }
.pp-faq__answer p { margin: 0; color: var(--pp-muted); font-size: 15.5px; }

.pp-home-faq { padding: 84px 0; }

/* ---------- All themes strip ---------- */

.pp-allthemes { padding: 84px 0; background: var(--pp-sand); border-top: 1px solid var(--pp-line); }

.pp-allthemes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.pp-minicard {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 4px;
	overflow: hidden;
	transition: transform var(--pp-tr);
}
/* Shadow lives on a pseudo-element and fades in — transitioning box-shadow
   itself forces a repaint of the whole card on every scroll frame. */
.pp-minicard::after {
	content: ""; position: absolute; inset: 0; border-radius: 4px;
	box-shadow: var(--pp-shadow);
	opacity: 0; transition: opacity var(--pp-tr);
	pointer-events: none;
}
.pp-minicard:hover { transform: translateY(-3px); }
.pp-minicard:hover::after { opacity: 1; }

.pp-minicard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pp-sand); }
.pp-minicard__img { width: 100%; height: 100%; object-fit: cover; }
.pp-minicard__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e6ece9, #f6f1e9); }

.pp-minicard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.pp-minicard__title { font-size: 21px; margin: 0 0 6px; }
.pp-minicard__title a { color: var(--pp-ink); }
.pp-minicard__title a:hover { color: var(--pp-teal-dark); }
.pp-minicard__sub { margin: 0 0 16px; font-size: 14.5px; color: var(--pp-muted); }

.pp-minicard__foot {
	margin-top: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding-top: 14px; border-top: 1px solid var(--pp-line);
}
.pp-minicard__price { font-size: 17px; color: var(--pp-ink); }
.pp-minicard__price .amount { font-weight: 500; }
.pp-minicard__links { display: flex; gap: 14px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }

/* The free badge is absolute inside product cards; inside a minicard footer it
   must sit in the flow next to the links. */
.pp-minicard .pp-badge--free { position: static; }

/* ---------- Newsletter band ---------- */

.pp-news { background: var(--pp-ink); color: #fff; padding: 70px 0; }
.pp-news__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 44px; align-items: center; }
.pp-news__copy .pp-eyebrow { color: #7fd4c6; }
.pp-news__copy h2 { color: #fff; }
.pp-news__copy p { margin: 0; color: rgba(255,255,255,.75); }
.pp-news__form { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-news__form input[type="email"] {
	flex: 1 1 220px;
	min-height: 48px;
	padding: 12px 16px;
	font-family: var(--pp-sans); font-size: 15px;
	color: var(--pp-ink);
	background: #fff;
	border: 1px solid #fff; border-radius: 3px;
}
.pp-news__form .pp-button { min-height: 48px; }

/* ===================================================================
   Single product: rich sections below the description tab
   =================================================================== */

/* Trust list inside the sticky summary card. */
.pp-trust { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--pp-line); display: grid; gap: 10px; }
.pp-trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--pp-muted); }
.pp-trust .pp-icon { width: 18px; height: 18px; flex: none; color: var(--pp-teal); }

.pp-psec { padding: 56px 0 0; }
.pp-psec:first-of-type { padding-top: 64px; }

.pp-psec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp-psec__grid .pp-feature { text-align: left; padding: 28px 26px; }
.pp-psec__grid .pp-feature h3 { font-size: 20px; }
.pp-psec__grid .pp-feature p { color: var(--pp-muted); font-size: 15px; margin: 0; }

.pp-psec__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pp-psec__note { margin: 26px 0 0; }

.pp-specs { width: 100%; border-collapse: collapse; }
.pp-specs th, .pp-specs td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--pp-line); font-size: 15px; font-weight: 400; vertical-align: top; }
.pp-specs th { color: var(--pp-muted); width: 45%; }
.pp-specs td { color: var(--pp-ink); }
.pp-specs tr:last-child th, .pp-specs tr:last-child td { border-bottom: 0; }

.pp-changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pp-changelog li {
	display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px;
	background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 4px;
	padding: 20px 24px;
}
.pp-changelog__meta { display: flex; flex-direction: column; gap: 3px; }
.pp-changelog__ver { font-family: var(--pp-serif); font-size: 20px; color: var(--pp-ink); }
.pp-changelog__date { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-changelog p { margin: 0; color: var(--pp-muted); font-size: 15.5px; }

.pp-buyband { margin-top: 64px; background: var(--pp-ink); color: #fff; border-radius: 5px; }
.pp-buyband__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
	padding: 44px 48px;
}
.pp-buyband h2 { color: #fff; margin-bottom: 6px; font-size: clamp(23px, 2.4vw, 30px); }
.pp-buyband p { margin: 0; color: rgba(255,255,255,.75); }
.pp-buyband__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.pp-buyband .pp-icon { width: 19px; height: 19px; }

/* ===================================================================
   Documentation
   =================================================================== */

.pp-docs__intro { margin-bottom: 44px; }

.pp-docs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pp-doccard {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 4px;
	overflow: hidden;
	color: inherit;
	transition: transform var(--pp-tr);
}
.pp-doccard::after {
	content: ""; position: absolute; inset: 0; border-radius: 4px;
	box-shadow: var(--pp-shadow); opacity: 0; transition: opacity var(--pp-tr); pointer-events: none;
}
.pp-doccard:hover { transform: translateY(-3px); color: inherit; }
.pp-doccard:hover::after { opacity: 1; }

.pp-doccard__swatch { display: block; height: 6px; }
.pp-doccard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 22px; }
.pp-doccard__title { font-family: var(--pp-serif); font-size: 23px; color: var(--pp-ink); margin-bottom: 6px; }
.pp-doccard__sub { font-size: 14.5px; color: var(--pp-muted); margin-bottom: 20px; }
.pp-doccard__more {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pp-teal-dark);
}
.pp-doccard__more .pp-icon { width: 17px; height: 17px; transition: transform var(--pp-tr); }
.pp-doccard:hover .pp-doccard__more .pp-icon { transform: translateX(4px); }

.pp-docs__help { margin-top: 60px; background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 5px; }
.pp-docs__help-inner { padding: 44px; text-align: center; }
.pp-docs__help-inner p { max-width: 560px; margin: 0 auto 26px; color: var(--pp-muted); }

/* --- One theme's guide --- */

.pp-breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 22px; }
.pp-breadcrumb span[aria-hidden] { color: var(--pp-line); }

.pp-doc__header { display: flex; gap: 30px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 46px; }
.pp-doc__header .pp-entry__title { margin: 0; }
.pp-doc__sub { margin: 10px 0 0; color: var(--pp-muted); }
.pp-doc__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pp-doc__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }

/* The TOC is sticky against .pp-doc__layout — its own grid container — so it
   tracks the body column for the column's full height, not the row's. */
.pp-doc__toc { position: sticky; top: 32px; }
.pp-doc__toc-title { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pp-muted); margin: 0 0 14px; }
.pp-doc__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 9px; }
.pp-doc__toc li { counter-increment: toc; }
.pp-doc__toc a { display: flex; gap: 10px; font-size: 14.5px; color: var(--pp-ink-soft); }
.pp-doc__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--pp-line); flex: none; }
.pp-doc__toc a:hover { color: var(--pp-teal-dark); }

.pp-doc__intro { margin-bottom: 20px; }
.pp-doc__chapter { scroll-margin-top: 90px; padding-bottom: 42px; margin-bottom: 42px; border-bottom: 1px solid var(--pp-line); }
.pp-doc__chapter:last-child { border-bottom: 0; }
.pp-doc__chapter h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(23px, 2.4vw, 30px); }
.pp-doc__chapter-num { font-size: 15px; color: var(--pp-line); letter-spacing: 0.1em; }
.pp-doc__chapter h3 { font-size: 19px; margin-top: 26px; }
.pp-doc__chapter code { background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 3px; padding: 1px 6px; font-size: 0.88em; }
.pp-doc__chapter ol, .pp-doc__chapter ul { padding-left: 20px; display: grid; gap: 9px; }

.pp-doc-note {
	background: var(--pp-white);
	border-left: 3px solid var(--pp-teal);
	border-radius: 0 4px 4px 0;
	padding: 16px 20px;
	font-size: 15px;
	color: var(--pp-muted);
}

.pp-doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; }
.pp-doc-table th, .pp-doc-table td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--pp-line); font-size: 15px; font-weight: 400; }
.pp-doc-table th { width: 33%; color: var(--pp-ink); padding-right: 24px; }
.pp-doc-table td { color: var(--pp-muted); }

.pp-doc-changelog dt { font-family: var(--pp-serif); font-size: 19px; color: var(--pp-ink); margin-top: 16px; }
.pp-doc-changelog dt span { font-family: var(--pp-sans); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-muted); margin-left: 10px; }
.pp-doc-changelog dd { margin: 4px 0 0; color: var(--pp-muted); }

.pp-doc__footer-cta { background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 5px; padding: 36px 40px; }
.pp-doc__footer-cta h2 { display: block; }
.pp-doc__footer-cta p { color: var(--pp-muted); }

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

@media (max-width: 1024px) {
	.pp-trustbar ul { grid-template-columns: repeat(2, 1fr); }
	.pp-steps, .pp-steps--three, .pp-psec__grid, .pp-allthemes__grid, .pp-docs__grid { grid-template-columns: repeat(2, 1fr); }
	.pp-inside__inner, .pp-psec__cols, .pp-news__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.pp-buyband__inner { grid-template-columns: minmax(0, 1fr); }
	.pp-doc__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.pp-doc__toc { position: static; background: var(--pp-white); border: 1px solid var(--pp-line); border-radius: 4px; padding: 20px 22px; }
	.pp-doc__toc ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.pp-trustbar ul { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
	.pp-steps, .pp-steps--three, .pp-psec__grid, .pp-allthemes__grid, .pp-docs__grid { grid-template-columns: minmax(0, 1fr); }
	.pp-changelog li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.pp-changelog__meta { flex-direction: row; align-items: baseline; gap: 12px; }
	.pp-buyband__inner { padding: 34px 26px; }
	.pp-docs__help-inner { padding: 32px 24px; }
	.pp-doc__toc ol { grid-template-columns: minmax(0, 1fr); }
	.pp-doc__footer-cta { padding: 28px 24px; }
	.pp-hero__actions { flex-direction: column; align-items: stretch; }
	.pp-hero__actions .pp-button { justify-content: center; }
	.pp-minicard__foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-minicard, .pp-doccard, .pp-textlink .pp-icon, .pp-doccard__more .pp-icon, .pp-faq__mark::before, .pp-faq__mark::after { transition: none; }
	.pp-minicard:hover, .pp-doccard:hover { transform: none; }
}