/*
Theme Name: Vitrapept
Theme URI: https://vitrapept.com
Description: Child theme of Twenty Twenty-Five for Vitrapept. Design system ported from the original Shopify storefront - IBM Plex type, petrol/sky palette, 11px control radius.
Author: Innovation With Pixels
Template: twentytwentyfive
Version: 1.3.0
Text Domain: vitrapept
*/

/* ===============================================================
   1. Tokens - values taken from the source storefront
   =============================================================== */
:root {
	--petrol:    #0B4F6C;
	--petrol-d:  #08405A;
	--sky:       #38BDF8;
	--ink:       #0B2A3A;
	--text:      #0F172A;
	--muted:     #5B6B7F;
	--mist:      #F3F7FB;
	--surface:   #FFFFFF;
	--ok:        #16A34A;
	--border:    #E2E8F0;
	--shadow:    rgba(15, 40, 60, .1);
	--sky-soft:  rgba(56, 189, 248, .14);
	--radius:    14px;
	--hdr-bg:    #292D30;

	--vp-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--vp-font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===============================================================
   2. Base
   =============================================================== */
body {
	font-family: var(--vp-font-sans);
	color: var(--text);
	line-height: 1.55;
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }

.vp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vp-section { padding: 72px 0; }
.vp-section--tint { background: var(--mist); }
.vp-mono { font-family: var(--vp-font-mono); }

.vp-lede { color: var(--muted); max-width: 560px; margin-top: 10px; }

.vp-eyebrow {
	font-family: var(--vp-font-mono);
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--petrol);
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 12px;
}
.vp-eyebrow .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ok); box-shadow: 0 0 0 4px rgb(22 163 74 / .16);
}
.vp-eyebrow--ondark { color: var(--sky); }

.vp-head { margin-bottom: 34px; }
.vp-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.vp-head > .vp-lede { margin-top: 10px; }
.vp-head--split { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.vp-head--center { text-align: center; }
.vp-head--center .vp-lede { margin-inline: auto; }

.vp-ico { width: 20px; height: 20px; flex-shrink: 0; }

/* ===============================================================
   3. Buttons
   =============================================================== */
.vp-btn {
	font-family: inherit; font-size: 15px; font-weight: 600;
	border-radius: 11px; padding: 12px 22px;
	border: 1.5px solid transparent; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	line-height: 1; text-decoration: none;
	transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.vp-btn:active { transform: translateY(1px); }
.vp-btn--primary { background: var(--petrol); color: #fff; box-shadow: 0 8px 20px var(--shadow); }
.vp-btn--primary:hover { background: var(--petrol-d); color: #fff; box-shadow: 0 12px 28px var(--shadow); }
.vp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.vp-btn--ghost:hover { border-color: var(--petrol); }
.vp-btn--light { background: #fff; color: var(--petrol); }
.vp-btn--dark { background: var(--petrol); color: #fff; }
.vp-btn--ondark { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .3); }
.vp-btn--ondark:hover { background: rgb(255 255 255 / .2); color: #fff; }
.vp-btn .amount, .vp-btn bdi { color: inherit; font-family: var(--vp-font-mono); font-weight: 600; }

/* ===============================================================
   4. Announcement bar
   =============================================================== */
.vp-announce { background: var(--petrol); color: rgb(255 255 255 / .82); font-size: 12.5px; }
.vp-announce__row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 9px 24px; }
.vp-announce__row span { display: inline-flex; align-items: center; gap: 7px; }
.vp-announce .vp-ico { width: 14px; height: 14px; color: var(--sky); }

/* ===============================================================
   5. Header
   =============================================================== */
.vp-nav {
	position: relative; z-index: 60;
	background: var(--petrol);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid rgb(255 255 255 / .1);
}
.vp-nav .vp-wrap { display: flex; align-items: center; gap: 30px; height: 72px; }
/* Every child sits on one centred line - no baseline drift between the mark,
   the wordmark, the links and the icon buttons. */
.vp-nav .vp-wrap > * { display: flex; align-items: center; }
.vp-nav .brand { gap: 11px; flex-shrink: 0; text-decoration: none; }
.vp-nav .brand .name { font-weight: 600; letter-spacing: .13em; font-size: 18px; color: var(--ink); line-height: 1; }
.vp-mark { width: 34px; height: 34px; flex-shrink: 0; display: block; }

.vp-nav .nav-links { display: flex; gap: 26px; margin-left: 6px; }
.vp-nav .nav-links a {
	display: inline-flex; align-items: center; line-height: 1;
	color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s;
}
.vp-nav .nav-links a:hover, .vp-nav .nav-links a.on { color: var(--ink); }

.vp-nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.vp-nav .icon-btn {
	width: 42px; height: 42px; border-radius: 11px;
	display: grid; place-items: center;
	color: var(--muted); background: transparent; border: none; cursor: pointer;
	position: relative; transition: .2s; text-decoration: none;
}
.vp-nav .icon-btn:hover { color: var(--ink); background: var(--mist); }
.vp-nav .icon-btn { overflow: visible; }
/* Search: a visible field in the header, not just an icon. It is a button
   that opens the search modal, which holds the real input and live results. */
.vp-nav .search-bar {
	display: inline-flex; align-items: center; gap: 9px;
	width: 220px; height: 40px; padding: 0 14px;
	background: var(--mist); border: 1px solid var(--border); border-radius: 10px;
	color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: text;
	transition: border-color .15s, background .15s;
}
.vp-nav .search-bar:hover { border-color: var(--petrol); background: #fff; }
.vp-nav .search-bar svg { flex-shrink: 0; }
.vp-nav .search-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vp-nav .search-row { display: none; padding: 0 16px 12px; }
.vp-nav .search-row .search-bar { width: 100%; height: 44px; }
.vp-nav .cart-count {
	/* corner of the button, nudged just outside so it never covers the glyph */
	position: absolute; top: -2px; right: -3px;
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
	background: var(--petrol); color: #fff;
	font-size: 9.5px; font-weight: 600; font-family: var(--vp-font-mono); line-height: 1;
	display: grid; place-items: center;
	pointer-events: none;
}
.vp-nav .cart-count.is-empty { display: none; }
.vp-nav .nav-right .vp-btn--primary { padding: 10px 18px; font-size: 14px; }
.vp-nav .burger { display: none; }

.vp-nav .mobile-menu { display: none; border-top: 1px solid rgb(255 255 255 / .12); background: var(--petrol); }
.vp-nav--float .mobile-menu { background: var(--hdr-bg); }
.vp-nav .mobile-menu.open { display: block; }
.vp-nav .mobile-menu a { display: block; padding: 14px 24px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--border); text-decoration: none; }
.vp-nav .mobile-menu .vp-btn--primary { margin: 16px 24px; width: calc(100% - 48px); }

@media (max-width: 940px) {
	.vp-nav .nav-links,
	.vp-nav .nav-right .vp-btn--primary,
	.vp-nav .nav-right .search-bar { display: none; }
	.vp-nav .search-row { display: block; }
	.vp-nav .burger { display: grid; }
}

/* The block canvas spaces its top-level children apart, which shows up as a white
   band between the header part and <main>. The header ends at its own border, so
   the hero should begin immediately after it. */
/* The sticky lives here, not on .vp-nav: a sticky box only sticks while its parent
   is in view, and .vp-nav's parent is only as tall as the nav itself. */
.wp-site-blocks > header.wp-block-template-part {
	margin-block: 0;
	position: sticky; top: 0; z-index: 60;
}
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > header.wp-block-template-part > p { margin: 0; }
.wp-site-blocks > header.wp-block-template-part > p:empty { display: none; }

/* ===============================================================
   6. Hero
   =============================================================== */
.vp-hero { background: linear-gradient(180deg, var(--mist), #fff); overflow: hidden; }
.vp-hero .vp-wrap {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: 50px; align-items: center; padding: 60px 24px 70px;
}
.vp-hero h1 {
	font-size: clamp(36px, 5vw, 58px); font-weight: 600;
	line-height: 1.04; letter-spacing: -.03em; color: var(--ink);
	margin: 22px 0 18px;
}
.vp-hero h1 em {
	font-style: normal; color: var(--petrol);
	text-decoration: underline; text-decoration-color: var(--sky);
	text-decoration-thickness: .09em; text-underline-offset: .14em;
}
.vp-hero .sub { font-size: 18px; color: var(--muted); max-width: 500px; margin: 0 0 28px; }
.vp-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.vp-hero .chips { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.vp-hero .chip {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--vp-font-mono); font-size: 12.5px; font-weight: 500;
	padding: 8px 13px; border-radius: 9px;
	border: 1px solid var(--border); background: #fff; color: var(--text);
}
.vp-hero .chip svg { color: var(--ok); width: 13px; height: 13px; flex-shrink: 0; }

.vp-hero .visual { position: relative; height: 460px; display: grid; place-items: center; }
.vp-hero .vial { width: 200px; filter: drop-shadow(0 24px 40px var(--shadow)); }
/* A cutout with a real alpha edge, not a square product shot - drop-shadow
   hugs the bottle instead of silhouetting a white rectangle. */
.vp-hero .vial--photo {
	height: 380px !important; width: auto !important; max-width: none;
	object-fit: contain; filter: drop-shadow(0 24px 40px var(--shadow)) !important;
}

.vp-hero .coa {
	position: absolute; left: -6px; bottom: 34px; width: 230px;
	background: #fff; border: 1px solid var(--border);
	border-radius: 16px; padding: 17px; box-shadow: 0 22px 50px var(--shadow);
}
.vp-hero .coa .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vp-hero .coa .t { font-family: var(--vp-font-mono); font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.vp-hero .coa .v { font-size: 11px; font-weight: 600; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.vp-hero .coa .v i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.vp-hero .coa .num {
	font-family: var(--vp-font-mono); font-size: 38px; font-weight: 600;
	letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.vp-hero .coa .num small { font-size: 11px; color: var(--muted); font-weight: 400; font-family: var(--vp-font-sans); }
.vp-hero .coa .bar { height: 5px; border-radius: 3px; background: var(--mist); overflow: hidden; margin: 11px 0 13px; }
.vp-hero .coa .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--petrol), var(--sky)); }
.vp-hero .coa .row {
	display: flex; justify-content: space-between;
	font-family: var(--vp-font-mono); font-size: 11px;
	padding: 4px 0; border-top: 1px solid var(--border);
}
.vp-hero .coa .row .k { color: var(--muted); }
.vp-hero .coa .row .val { color: var(--ink); font-weight: 500; }

.vp-hero .seal {
	position: absolute; right: 2px; top: 20px;
	width: 76px; height: 76px; border-radius: 50%;
	background: #fff; border: 1px solid var(--border);
	box-shadow: 0 12px 28px var(--shadow);
	display: grid; place-items: center; text-align: center;
}
.vp-hero .seal .big { font-size: 16px; font-weight: 600; color: var(--ink); font-family: var(--vp-font-mono); line-height: 1; }
.vp-hero .seal .small { font-size: 7px; letter-spacing: .14em; color: var(--muted); margin-top: 3px; font-weight: 600; }

/* ===============================================================
   7. Trust strip
   =============================================================== */
.vp-trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--mist); }
.vp-trust .vp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 24px; }
.vp-trust .t { display: flex; align-items: center; gap: 12px; }
.vp-trust .t svg { color: var(--petrol); flex-shrink: 0; }
.vp-trust .t b { display: block; font-size: 14px; color: var(--ink); }
.vp-trust .t span { font-size: 12.5px; color: var(--muted); }

/* ===============================================================
   8. Category list - numbered rows
   =============================================================== */
.vp-section--grad { background: linear-gradient(180deg, #F3F7FB 0%, #ffffff 100%); }

.vp-clist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.vp-clist li { border-top: 1px solid var(--border); }
.vp-clist a {
	display: flex; align-items: center; gap: 18px;
	padding: 20px 18px;
	text-decoration: none; color: inherit;
	border-radius: 12px;
	transition: background-color .2s ease, color .2s ease;
}

.vp-clist__ico {
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
	display: grid; place-items: center;
	background: #fff; border: 1px solid var(--border); color: var(--petrol);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.vp-clist__ico .vp-ico { width: 21px; height: 21px; }

.vp-clist__text { flex: 1; min-width: 0; }
.vp-clist__name { display: block; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.vp-clist__desc { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 64ch; }

.vp-clist__n {
	flex-shrink: 0; font-family: var(--vp-font-mono);
	font-size: 17px; font-weight: 500; color: var(--ink);
}
.vp-clist__arrow {
	flex-shrink: 0; display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	color: var(--petrol);
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.vp-clist__arrow .vp-ico { width: 19px; height: 19px; }

/* whole row inverts on hover, or it would be dark text on petrol */
.vp-clist a:hover { background: var(--petrol); }
.vp-clist a:hover .vp-clist__name,
.vp-clist a:hover .vp-clist__n { color: #fff; }
.vp-clist a:hover .vp-clist__desc { color: rgb(255 255 255 / .78); }
.vp-clist a:hover .vp-clist__ico { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .28); color: #fff; }
.vp-clist a:hover .vp-clist__arrow { background: rgb(255 255 255 / .16); color: #fff; transform: translateX(4px); }

@media (max-width: 640px) {
	.vp-clist a { gap: 14px; padding: 16px 12px; }
	.vp-clist__ico { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
	.vp-clist__name { font-size: 17px; }
	.vp-clist__n { display: none; }
}

/* ===============================================================
   9. Product cards
   =============================================================== */
.vp-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vp-card {
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; transition: .2s; display: flex; flex-direction: column;
}
.vp-card:hover { box-shadow: 0 16px 36px var(--shadow); transform: translateY(-3px); }
.vp-card__media { position: relative; aspect-ratio: 1 / 1; background: #ffffff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.vp-card__media > a { display: contents; }
/* The vial shots do not share one aspect ratio - most are 0.667, a few 0.800 - so
   sizing by max-height let each settle at its own height. Filling the square and
   containing inside it gives every card an identical image box. */
.vp-card__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}
.vp-card__badge {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	font-family: var(--vp-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .05em;
	color: var(--ok); background: #fff; border: 1px solid var(--border);
	border-radius: 20px; padding: 5px 10px; display: flex; align-items: center; gap: 5px;
}
.vp-card__mg {
	position: absolute; bottom: 12px; right: 12px; z-index: 1;
	font-family: var(--vp-font-mono); font-size: 12px; font-weight: 600;
	color: #fff; background: #0B4F6C; border-radius: 8px; padding: 5px 10px;
}
.vp-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vp-card__name { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.vp-card__name:hover { color: var(--petrol); }
.vp-card__price { font-family: var(--vp-font-mono); font-weight: 600; color: var(--petrol); font-size: 16px; }
.vp-card__price .amount, .vp-card__price bdi { color: var(--petrol); }
.vp-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.vp-card__add {
	flex: 1; font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: center;
	color: #fff; background: var(--petrol); border: none; border-radius: 10px;
	padding: 10px; cursor: pointer; transition: .2s; text-decoration: none;
}
.vp-card__add:hover { background: var(--petrol-d); color: #fff; }
.vp-card .added_to_cart,
.vp-card__foot .added_to_cart { display: none !important; }

/* WooCommerce's own ajax_add_to_cart script toggles this class for the
   duration of the request - style it instead of leaving the click looking
   like nothing happened. */
.vp-card__add.loading { position: relative; color: transparent !important; pointer-events: none; }
.vp-card__add.loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px;
	margin: -8px 0 0 -8px; border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff;
	border-radius: 50%; animation: vp-spin .6s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-stars { display: flex; gap: 2px; color: #f5b301; font-size: 14px; }

/* ===============================================================
   10. Feature grid
   =============================================================== */
.vp-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vp-feature { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; background: #fff; }
.vp-feature__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--mist); color: var(--petrol); margin-bottom: 14px; }
.vp-feature h3 { font-size: 16px; margin-bottom: 8px; }
.vp-feature p { color: var(--muted); font-size: 14px; margin: 0; }

/* ===============================================================
   11. Featured blend
   =============================================================== */
.vp-featured { background: var(--petrol); color: #fff; }
.vp-featured h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
.vp-featured p { color: rgb(255 255 255 / .78); }
.vp-featured__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: center; }
.vp-featured__media {
	border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1;
	background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14);
	display: grid; place-items: center;
}
.vp-featured__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.vp-featured__parts { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vp-featured__parts li {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16);
	border-radius: 9px; padding: 8px 13px;
	font-family: var(--vp-font-mono); font-size: 12.5px; color: rgb(255 255 255 / .9);
}
.vp-featured__parts .vp-ico { width: 14px; height: 14px; color: var(--sky); }
.vp-featured__note { margin-top: 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .7); }

/* ===============================================================
   12. Certificates band
   =============================================================== */
.vp-band { background: var(--petrol); color: #fff; }
.vp-band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.vp-band p { color: rgb(255 255 255 / .8); }
.vp-band__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.vp-band__panel { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); border-radius: 18px; padding: 6px 22px; }
.vp-band__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
.vp-band__row:last-child { border-bottom: 0; }
.vp-band__row span:first-child { color: rgb(255 255 255 / .66); font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.vp-band__row span:last-child { font-weight: 600; font-size: 14px; }

/* ===============================================================
   13. Reviews
   =============================================================== */
.vp-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vp-rev { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.vp-rev blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); quotes: none; }
.vp-rev blockquote::before { content: "\201C"; }
.vp-rev blockquote::after { content: "\201D"; }
.vp-rev figcaption { margin-top: auto; display: flex; flex-direction: column; }
.vp-rev figcaption strong { font-size: 14px; color: var(--ink); }
.vp-rev figcaption span { color: var(--muted); font-size: 12.5px; }

/* ===============================================================
   14. Blog teasers
   =============================================================== */
.vp-blog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vp-post {
	display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
	border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px;
	background: #fff; transition: .2s;
}
.vp-post:hover { box-shadow: 0 16px 36px var(--shadow); transform: translateY(-3px); }
.vp-post__tag { align-self: flex-start; font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); background: var(--mist); border-radius: 20px; padding: 5px 10px; }
.vp-post h3 { font-size: 19px; line-height: 1.25; }
.vp-post p { color: var(--muted); font-size: 14px; margin: 0; }
.vp-post__more { color: var(--petrol); font-weight: 600; font-size: 13.5px; margin-top: auto; }

/* ===============================================================
   15. FAQ - intro column + rounded question cards
   =============================================================== */
.vp-faq {
	display: grid; grid-template-columns: .85fr 1.15fr;
	gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1200px;
}
.vp-faq__intro .vp-eyebrow { margin-bottom: 18px; }
.vp-faq__intro h2 {
	font-size: clamp(32px, 4.6vw, 52px); font-weight: 700;
	line-height: 1.06; letter-spacing: -.03em; color: var(--ink); margin-bottom: 20px;
}
.vp-faq__intro h2 em { font-style: normal; color: var(--petrol); }
.vp-faq__intro p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; max-width: 42ch; }
.vp-faq__intro a { color: var(--petrol); font-weight: 600; }

.vp-qa details {
	background: var(--mist); border: 0; border-radius: 14px;
	margin-bottom: 12px; overflow: hidden;
	transition: background-color .2s ease;
}
.vp-qa details:last-child { margin-bottom: 0; }
.vp-qa details[open] { background: #eef3f9; }
.vp-qa summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 20px 20px 20px 26px;
	font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.vp-qa summary::-webkit-details-marker { display: none; }
.vp-qa__chev {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	background: #fff; color: var(--petrol);
	display: grid; place-items: center;
	transition: transform .25s ease;
}
.vp-qa details[open] .vp-qa__chev { transform: rotate(180deg); }
.vp-qa .ans { padding: 0 26px 22px; }
.vp-qa .ans p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }

@media (max-width: 900px) {
	.vp-faq { grid-template-columns: 1fr; gap: 28px; }
	.vp-faq__intro p { max-width: none; }
}

/* ===============================================================
   16. Newsletter
   =============================================================== */
.vp-news { background: var(--petrol); color: #fff; padding: 52px 0; }
.vp-news h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
.vp-news p { color: rgb(255 255 255 / .72); margin: 0; font-size: 14px; }
.vp-news__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.vp-news__form { display: flex; gap: 10px; flex-wrap: wrap; }
.vp-news__form input[type="email"] {
	flex: 1 1 15rem; min-width: 0;
	background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .24);
	border-radius: 11px; padding: 12px 16px; color: #fff; font-size: 14.5px;
	font-family: var(--vp-font-sans);
}
.vp-news__form input::placeholder { color: rgb(255 255 255 / .5); }
.vp-news__form input:focus { outline: 2px solid var(--sky); outline-offset: 1px; }

/* ===============================================================
   17. Stats
   =============================================================== */
.vp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vp-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; text-align: center; background: #fff; }
.vp-stat b { display: block; font-size: clamp(24px, 3vw, 34px); font-family: var(--vp-font-mono); font-weight: 600; color: var(--petrol); line-height: 1.1; }
.vp-stat span { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------
   About intro - heading left, copy right, figures on a divided row
   beneath, to the supplied reference layout.
   ---------------------------------------------------------------- */
.vp-intro { background: var(--mist); }
.vp-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}
.vp-intro__head .vp-eyebrow { margin-bottom: 14px; }
.vp-intro__head h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.14; max-width: 14ch; }
.vp-intro__copy p { color: var(--muted); margin: 0 0 18px; }
.vp-intro__copy p:last-child { margin-bottom: 0; }
.vp-intro__cta { margin-top: clamp(22px, 3vw, 32px); }

/* The figures now sit in a petrol box rather than under a rule, so the dividers and
   type invert for the dark ground. */
.vp-intro .vp-stats {
	gap: 0;
	margin-top: clamp(38px, 5vw, 66px);
	background: var(--petrol);
	border-radius: 18px;
	padding: clamp(28px, 3vw, 40px) clamp(12px, 2vw, 24px);
}
.vp-intro .vp-stat {
	/* The shortcode prints the figure before the label; column-reverse puts the label
	   on top as the reference has it without reordering the markup. */
	display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
	background: none; border: 0; border-radius: 0;
	border-left: 1px solid rgb(255 255 255 / .18);
	padding: 2px 16px; text-align: center;
}
.vp-intro .vp-stat:first-child { border-left: 0; }
.vp-intro .vp-stat b { font-size: clamp(26px, 3vw, 40px); color: #fff; line-height: 1.05; }
.vp-intro .vp-stat span { font-size: 13px; color: rgb(255 255 255 / .68); }

/* ---------------------------------------------------------------
   How it's made - intro column left, 2x2 cards right, the first
   card carrying the accent, to the supplied reference layout.
   ---------------------------------------------------------------- */
.vp-made { background: #fff; }
.vp-made__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
	gap: clamp(28px, 5vw, 76px);
	align-items: start;
}
.vp-made__intro { align-self: center; }
.vp-made__intro .vp-eyebrow { margin-bottom: 14px; }
.vp-made__intro h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; max-width: 15ch; }
.vp-made__lede { color: var(--muted); font-size: 15px; margin: 16px 0 0; max-width: 42ch; }
.vp-made__cta { margin-top: 26px; border-radius: 999px; }

.vp-made__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vp-made__card { background: var(--mist); border: 1px solid var(--border); border-radius: 16px; padding: clamp(18px, 2vw, 24px); }
.vp-made__card h3 { font-size: 17px; margin: 0 0 8px; }
.vp-made__card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }
/* A tinted tile makes the glyph read at a glance; the tight margin under it is what
   takes the height out of the card. */
.vp-made__ic {
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--sky-soft); color: var(--petrol);
	margin-bottom: 16px;
}
.vp-made__ic .vp-ico { width: 24px; height: 24px; }

/* first card takes the accent, so everything inside it inverts */
.vp-made__card--lead { background: var(--petrol); border-color: var(--petrol); }
.vp-made__card--lead h3 { color: #fff; }
.vp-made__card--lead p { color: rgb(255 255 255 / .72); }
.vp-made__card--lead .vp-made__ic { background: rgb(255 255 255 / .14); color: #fff; }

@media (max-width: 900px) { .vp-made__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vp-made__cards { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   What we stand for - eyebrow and heading stacked over three
   columns, each led by a dotted rule, to the supplied reference.
   ---------------------------------------------------------------- */
.vp-stand { background: var(--petrol); color: #fff; }
.vp-stand__eyebrow { color: rgb(255 255 255 / .55); }
.vp-stand__title {
	color: #fff;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.12;
	max-width: 16ch;
	margin: 0 0 clamp(44px, 6vw, 78px);
}
.vp-stand__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); }
.vp-stand__item h3 { color: #fff; font-size: 17px; margin: 0 0 10px; }
.vp-stand__item p { color: rgb(255 255 255 / .68); font-size: 14px; line-height: 1.65; margin: 0; }

/* A solid lead dot followed by a dotted rule: the dot is ::before, the rule is a
   repeating radial-gradient on ::after so no extra markup is needed. */
.vp-stand__dots { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }
.vp-stand__dots::before {
	content: ""; flex-shrink: 0;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--sky);
}
.vp-stand__dots::after {
	content: ""; flex: 1; height: 5px;
	background-image: radial-gradient(circle, rgb(255 255 255 / .3) 2.4px, transparent 2.5px);
	background-size: 14px 5px; background-repeat: repeat-x;
}
.vp-stand__item:nth-child(2) .vp-stand__dots::before { background: #5EEAD4; }
.vp-stand__item:nth-child(3) .vp-stand__dots::before { background: #FCD34D; }

@media (max-width: 860px) {
	.vp-stand__grid { grid-template-columns: 1fr; gap: 30px; }
	.vp-stand__title { max-width: none; }
}
/* Phones only - tablets keep the stacked columns left aligned. The dotted connector
   only made sense running between columns, so stacked it gives way to a centred dot. */
@media (max-width: 760px) {
	.vp-stand { text-align: center; }
	.vp-stand__title { margin-inline: auto; }
	.vp-stand__eyebrow { justify-content: center; }
	.vp-stand__dots { justify-content: center; margin-bottom: 16px; }
	.vp-stand__dots::after { display: none; }
}

/* ---------------------------------------------------------------
   About closing CTA - a light band. Not .vp-band: that class is the
   homepage's photographic petrol block and is shared, so recolouring
   it would change the front page too.
   ---------------------------------------------------------------- */
.vp-cta { background: var(--mist); }

/* ---------------------------------------------------------------
   Legal pages (privacy, terms, refund). Their own templates put the
   content inside .vp-wrap so it lines up with the header container,
   instead of the parent theme's 780px contentSize. The prose is raw
   HTML from the migrated policy, so it is styled here rather than by
   block supports.
   ---------------------------------------------------------------- */
.vp-legal .wp-block-post-title {
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	margin: 0 0 8px;
}
.vp-legal .wp-block-post-content { color: var(--text); }
.vp-legal h2 {
	font-size: clamp(20px, 2.2vw, 26px);
	margin: clamp(30px, 3.5vw, 44px) 0 12px;
}
.vp-legal h3 { font-size: 17px; margin: 26px 0 10px; }
.vp-legal p { margin: 0 0 14px; line-height: 1.75; }
.vp-legal ul, .vp-legal ol { margin: 0 0 18px; padding-left: 22px; }
.vp-legal li { margin-bottom: 8px; line-height: 1.7; }
.vp-legal strong { color: var(--ink); font-weight: 600; }
.vp-legal a { color: var(--petrol); text-decoration: underline; }
.vp-legal a:hover { color: var(--petrol-d, #0a4257); }

/* ---------------------------------------------------------------
   Reconstitution steps - numbered nodes joined by a dotted rule,
   in a petrol box, to the supplied reference.
   ---------------------------------------------------------------- */
.vp-steps {
	background: var(--petrol); color: #fff;
	border-radius: 20px;
	padding: clamp(30px, 4vw, 54px) clamp(20px, 3vw, 40px);
	text-align: center;
}
.vp-steps__eyebrow { color: rgb(255 255 255 / .6); justify-content: center; }
.vp-steps__title { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 clamp(34px, 4vw, 52px); }

.vp-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.vp-steps__item { position: relative; padding: 0 18px; }
.vp-steps__n {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 46px; height: 46px; border-radius: 50%;
	margin: 0 auto 18px;
	background: #fff; color: var(--petrol);
	font-family: var(--vp-font-mono); font-size: 16px; font-weight: 700;
}
/* The connector is drawn on each item after the first and reaches back to the previous
   node: from that circle's right edge to this one's left edge, at the circles' centre
   line. Anchoring it per-item means it never spans a wrapped row. */
.vp-steps__item + .vp-steps__item::before {
	content: "";
	position: absolute; top: 22px;
	left: calc(-50% + 30px); right: calc(50% + 30px);
	height: 2px;
	background-image: radial-gradient(circle, rgb(255 255 255 / .45) 1.4px, transparent 1.5px);
	background-size: 9px 2px; background-repeat: repeat-x;
}
.vp-steps__item h3 { color: #fff; font-size: 15.5px; margin: 0 0 8px; }
.vp-steps__item p { color: rgb(255 255 255 / .68); font-size: 13.5px; line-height: 1.65; margin: 0; }

@media (max-width: 820px) {
	.vp-steps__list { grid-template-columns: 1fr; gap: 30px; }
	/* stacked, so there is no horizontal run for the dotted rule */
	.vp-steps__item + .vp-steps__item::before { display: none; }
}
.vp-cta__inner { text-align: center; }
.vp-cta__lede { margin-inline: auto; }
.vp-cta__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ===============================================================
   18. WooCommerce archives + single
   =============================================================== */
ul.wc-block-product-template, .woocommerce ul.products, ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr);
	gap: 20px; margin: 0; padding: 0; list-style: none;
}
ul.products::before, ul.products::after { content: none !important; }
li.wc-block-product, ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 8px;
	transition: .2s;
}
li.wc-block-product:hover, ul.products li.product:hover { box-shadow: 0 16px 36px var(--shadow); transform: translateY(-3px); }
/* WooCommerce's product-image block hard-codes object-fit:cover inline, which crops
   the portrait vials. Contain them instead so the whole vial stays visible. */
li.wc-block-product img, ul.products li.product img {
	border-radius: 10px;
	background: #ffffff;
	object-fit: contain !important;
}
li.wc-block-product .wc-block-components-product-image,
li.wc-block-product .wp-block-woocommerce-product-image { margin-bottom: 4px; }
li.wc-block-product h2, li.wc-block-product h3,
ul.products li.product .woocommerce-loop-product__title { font-size: 16px !important; font-weight: 600; margin: 0 !important; padding: 0 !important; }
li.wc-block-product h2 a, li.wc-block-product h3 a { color: var(--ink); text-decoration: none; }
li.wc-block-product h2 a:hover, li.wc-block-product h3 a:hover { color: var(--petrol); }
li.wc-block-product .wc-block-components-product-price, ul.products li.product .price {
	font-family: var(--vp-font-mono); font-weight: 600; color: var(--petrol) !important; font-size: 16px;
}
li.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; }
li.wc-block-product .wc-block-components-product-button__button, ul.products li.product .button {
	display: inline-flex; justify-content: center; width: 100%; margin-top: auto;
	background: var(--petrol); color: #fff; border: 0; border-radius: 10px;
	padding: 10px; font-weight: 600; font-size: 13.5px;
}
li.wc-block-product .wc-block-components-product-button__button:hover, ul.products li.product .button:hover { background: var(--petrol-d); color: #fff; }

.woocommerce div.product .product_title { font-size: clamp(28px, 3.6vw, 40px); }
.woocommerce div.product p.price { font-family: var(--vp-font-mono); font-weight: 600; color: var(--petrol); font-size: 24px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); }
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--petrol); color: #fff; border-radius: 11px; padding: 13px 24px; font-weight: 600;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--petrol-d); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--petrol); }

.vp-notice {
	border: 1px solid var(--border); border-left: 3px solid var(--petrol);
	background: var(--mist); border-radius: 10px;
	padding: 14px 16px; font-size: 13.5px; color: var(--muted); margin: 20px 0;
}
.vp-notice strong { color: var(--ink); }

/* ===============================================================
   19. Footer
   =============================================================== */
.has-brand-deep-background-color a, .vp-ft a { color: #fff; text-decoration: none; }
.has-brand-deep-background-color a:hover { color: var(--sky); text-decoration: underline; }
.has-brand-deep-background-color h3, .has-brand-deep-background-color h4 { color: #fff; }
.has-brand-deep-background-color p { color: rgb(255 255 255 / .74); }

/* ===============================================================
   20. Responsive
   =============================================================== */
@media (max-width: 1080px) {
	.vp-features, .vp-prods, .vp-stats,
	ul.products, .woocommerce ul.products, ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
	.vp-trust .vp-wrap { grid-template-columns: repeat(2, 1fr); }
	.vp-revs { grid-template-columns: 1fr; }
	/* .vp-stats above is forced to two columns, so the left rules fall on a new edge */
	.vp-intro .vp-stat { padding-block: 18px; }
	.vp-intro .vp-stat:nth-child(odd) { border-left: 0; }
	.vp-intro .vp-stat:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / .18); }
}
@media (max-width: 900px) {
	.vp-hero .vp-wrap, .vp-band__inner, .vp-featured__inner, .vp-news__inner { grid-template-columns: 1fr; }
	.vp-hero .visual { height: 400px; }
	.vp-blog { grid-template-columns: 1fr; }
	.vp-announce__row { gap: 14px; font-size: 11.5px; }
	.vp-intro__grid { grid-template-columns: 1fr; }

	/* Both intro blocks hold their CTA inside the text column, so on one column the
	   button lands between the heading and the content. display:contents dissolves the
	   wrapper into the grid so its children can be ordered individually, letting the
	   button drop below the copy (About) and below the cards (How it's made).
	   Stacking and order only - alignment stays left here, and centres at 760px. */
	.vp-intro__head { display: contents; }
	.vp-intro__head .vp-eyebrow { order: 1; justify-self: start; }
	.vp-intro__head h2 { order: 2; max-width: none; }
	.vp-intro__copy { order: 3; }
	.vp-intro__cta { order: 4; justify-self: start; margin-top: 4px; }

	.vp-made__grid { grid-template-columns: 1fr; }
	.vp-made__intro { display: contents; }
	.vp-made__intro .vp-eyebrow { order: 1; justify-self: start; }
	.vp-made__intro h2 { order: 2; max-width: none; }
	.vp-made__lede { order: 3; }
	.vp-made__cards { order: 4; }
	.vp-made__cta { order: 5; justify-self: start; }
}

/* Phones only. Tablets keep the stacked single-column layout from 900px but stay
   left aligned; centring starts here. */
@media (max-width: 760px) {
	.vp-intro__grid { text-align: center; }
	.vp-intro__head .vp-eyebrow { justify-self: center; }
	.vp-intro__cta { justify-self: center; }

	.vp-made__grid { text-align: center; }
	.vp-made__intro .vp-eyebrow { justify-self: center; }
	.vp-made__lede { margin-inline: auto; }
	.vp-made__cta { justify-self: center; }
	.vp-made__card { text-align: center; }
	.vp-made__ic { margin-inline: auto; }
}
@media (max-width: 560px) {
	.vp-features, .vp-stats { grid-template-columns: 1fr !important; }
	/* Products stay two-up on a phone. One per row wastes the width and turns the
	   archive into a very long scroll. */
	.vp-prods, .vp-prods--3,
	ul.products, .woocommerce ul.products, ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
	/* at half width the price and the button no longer fit side by side */
	.vp-card__foot { flex-direction: column; align-items: stretch; gap: 8px; }
	.vp-card__body { padding: 12px 12px 14px; gap: 6px; }
	.vp-card__name { font-size: 14.5px; }
	.vp-card__price { font-size: 14.5px; }
	.vp-trust .vp-wrap { grid-template-columns: 1fr; }
	.vp-hero .coa { left: 50%; transform: translateX(-50%); bottom: 0; }
	.vp-announce__row span:nth-child(3) { display: none; }
	.vp-intro .vp-stat { border-left: 0; border-top: 1px solid rgb(255 255 255 / .18); padding-block: 20px; }
	.vp-intro .vp-stat:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.vp-card:hover, .vp-post:hover { transform: none; }
	.vp-clist__arrow { transition: none; }
}

/* ===============================================================
   21. Reconstitution calculator
   =============================================================== */
.vp-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.vp-calc__inputs h2 { font-size: 20px; margin-bottom: 20px; }
.vp-field { display: block; margin-bottom: 20px; }
.vp-field__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.vp-field__label em { font-style: normal; font-weight: 400; color: var(--muted); }
.vp-field__control { display: flex; gap: 8px; }
.vp-field__control input {
	flex: 1; min-width: 0; font-family: var(--vp-font-mono); font-size: 16px;
	padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px;
	background: #fff; color: var(--ink);
}
.vp-field__control input:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol); }
.vp-field__control select {
	flex: 0 0 88px; box-sizing: border-box;
	font-family: var(--vp-font-mono); font-size: 15px; padding: 12px 14px;
	border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer;
}
.vp-field__unit {
	display: grid; place-items: center; min-width: 56px;
	font-family: var(--vp-font-mono); font-size: 15px; color: var(--muted);
	border: 1px solid var(--border); border-radius: 11px; background: var(--mist);
}
.vp-calc__note { font-size: 13px; color: var(--muted); margin: 0; }

.vp-calc__out { background: var(--mist); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px; }
.vp-calc__big { display: flex; align-items: baseline; gap: 8px; font-family: var(--vp-font-mono); }
.vp-calc__big span { font-size: clamp(40px, 6vw, 56px); font-weight: 600; color: var(--petrol); line-height: 1; letter-spacing: -.03em; }
.vp-calc__big small { font-size: 15px; color: var(--muted); }
.vp-calc__cap { font-size: 13.5px; color: var(--muted); margin: 10px 0 18px; }
.vp-calc__rows .row {
	display: flex; justify-content: space-between; gap: 16px;
	font-family: var(--vp-font-mono); font-size: 13px;
	padding: 10px 0; border-top: 1px solid var(--border);
}
.vp-calc__rows .k { color: var(--muted); }
.vp-calc__rows .val { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
	.vp-calc { grid-template-columns: 1fr; }
	/* Heading and the standing note centre on a phone; the field labels stay left so
	   each one still reads as attached to the input beneath it. */
	.vp-calc__inputs h2 { text-align: center; }
	.vp-calc__note { text-align: center; }
	/* the result figure is a flex row, so it centres with justify-content, not text-align */
	.vp-calc__big { justify-content: center; }
	.vp-calc__cap { text-align: center; }
}

/* ===============================================================
   22. Shop / category archive
   =============================================================== */
.vp-shop { padding: 48px 0 80px; }
.vp-shop__head { margin-bottom: 26px; }
.vp-shop__head h1 { font-size: clamp(30px, 4vw, 42px); }
.vp-shop__desc { color: var(--muted); max-width: 60ch; margin-top: 10px; }
.vp-shop__desc p { margin: 0; }

.vp-shop__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
	padding: 14px 0; margin-bottom: 32px;
}
.vp-shop__count { font-family: var(--vp-font-mono); font-size: 13px; color: var(--muted); }
.vp-shop__sort select {
	font-family: var(--vp-font-sans); font-size: 14px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 11px;
	padding: 10px 36px 10px 16px; cursor: pointer; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.vp-shop__sort select:focus { outline: 2px solid var(--sky); outline-offset: 1px; }

.vp-shop__body { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }

/* Filters */
.vp-filters { position: sticky; top: 96px; }
.vp-filter { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.vp-filter h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }

.vp-check { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.vp-check input { width: 17px; height: 17px; accent-color: var(--petrol); cursor: pointer; margin: 0; }
.vp-check span { color: var(--ink); flex: 1; }
.vp-check em { font-style: normal; font-family: var(--vp-font-mono); font-size: 12px; color: var(--muted); }
.vp-check.is-empty { opacity: .5; cursor: default; }
.vp-check.is-empty input { cursor: default; }

.vp-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vp-price-range label { display: block; }
.vp-price-range__k {
	display: block; font-family: var(--vp-font-mono); font-size: 10px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.vp-price-range__f {
	display: flex; align-items: center; gap: 4px;
	border: 1px solid var(--border); border-radius: 10px; background: var(--mist);
	padding: 0 10px;
}
.vp-price-range__f:focus-within { border-color: var(--petrol); background: #fff; }
.vp-price-range__f i { font-style: normal; color: var(--muted); font-size: 13px; }
.vp-price-range__f input {
	width: 100%; min-width: 0; border: 0; background: transparent; outline: none;
	font-family: var(--vp-font-mono); font-size: 14px; color: var(--ink); padding: 10px 0;
}
.vp-price-range__f input::-webkit-outer-spin-button,
.vp-price-range__f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vp-filter__apply {
	margin-top: 12px; width: 100%; cursor: pointer;
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--petrol); background: #fff;
	border: 1px solid var(--border); border-radius: 10px; padding: 9px;
	transition: .2s;
}
.vp-filter__apply:hover { border-color: var(--petrol); background: var(--mist); }

.vp-filter__clear { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.vp-filter__clear:hover { color: var(--petrol); }
.vp-filter__clear.is-off { color: var(--muted); opacity: .55; }

/* Grid */
.vp-prods--3 { grid-template-columns: repeat(3, 1fr); }

/* Pagination */
.vp-pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
.vp-pager .page-numbers {
	min-width: 42px; height: 42px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border); border-radius: 11px;
	font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
	transition: .2s;
}
.vp-pager .page-numbers:hover { border-color: var(--petrol); color: var(--petrol); }
.vp-pager .page-numbers.current { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.vp-pager .page-numbers.dots { border-color: transparent; }

.vp-empty { text-align: center; padding: 60px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--mist); }
.vp-empty h2 { font-size: 20px; margin-bottom: 8px; }
.vp-empty p { color: var(--muted); margin: 0 0 18px; }

@media (max-width: 1080px) { .vp-prods--3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 900px) {
	.vp-shop__body { grid-template-columns: 1fr; gap: 28px; }
	.vp-filters { position: static; }
	.vp-filter { padding-bottom: 18px; margin-bottom: 18px; }
}
@media (max-width: 560px) { .vp-prods--3 { grid-template-columns: repeat(2, 1fr) !important; } }

/* ===============================================================
   23. Footer
   =============================================================== */
.vp-ft { background: var(--ink); color: #cfe0ec; padding-top: 60px; }
.vp-ft .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 40px 24px 44px; }
.vp-ft .brand { display: flex; align-items: center; gap: 11px; }
.vp-ft .brand .vp-mark { display: block; }
/* The mark is drawn in petrol for light grounds, so on the petrol footer its hexagon
   outline and centre node render invisibly against the background - only the three sky
   nodes survive. Invert it exactly as the dark header does. */
.vp-ft .vp-mark path { fill: rgb(255 255 255 / .08); stroke: #fff; }
.vp-ft .vp-mark g line { stroke: #fff; }
.vp-ft .vp-mark circle:last-of-type { fill: #fff; }
.vp-ft .brand { text-decoration: none; }
.vp-ft .name { color: #fff; font-weight: 600; letter-spacing: .13em; font-size: 18px; line-height: 1; }
.vp-ft .blurb { font-size: 13.5px; margin: 16px 0 18px; max-width: 280px; line-height: 1.6; }
.vp-ft h4 {
	color: #fff; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
	margin-bottom: 16px; font-family: var(--vp-font-mono); font-weight: 600;
}
.vp-ft ul { list-style: none; margin: 0; padding: 0; }
.vp-ft li { margin-bottom: 11px; }
.vp-ft a { color: inherit; text-decoration: none; font-size: 14px; transition: .2s; }
.vp-ft a:hover { color: #fff; }
/* Entries with no destination yet - present, but not clickable. */
.vp-ft .vp-ft__todo { font-size: 14px; color: #7c90a2; cursor: default; }

.vp-ft .social { display: flex; gap: 10px; margin-top: 6px; }
.vp-ft .social a {
	width: 38px; height: 38px; border-radius: 10px;
	border: 1px solid rgb(255 255 255 / .14);
	display: grid; place-items: center;
}
.vp-ft .social a:hover { background: rgb(255 255 255 / .08); color: #fff; }

.vp-ft .pay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.vp-ft .pay span {
	font-family: var(--vp-font-mono); font-size: 10px;
	border: 1px solid rgb(255 255 255 / .16); border-radius: 6px;
	padding: 5px 8px; color: #8fa6b8;
}

/* The research-use disclaimer used to sit last in the footer, at 11.5px in the same
   muted grey as the copyright line. It is the page's most consequential statement,
   so it now leads the footer in its own box, brighter and larger than the legal row. */
.vp-ft__notice {
	display: flex; align-items: flex-start; gap: 14px;
	margin: 0 0 6px;
	padding: 16px 20px;
	background: rgb(255 255 255 / .07);
	border: 1px solid rgb(255 255 255 / .18);
	border-left: 3px solid var(--sky);
	border-radius: 12px;
}
.vp-ft__notice-ic { flex-shrink: 0; color: var(--sky); line-height: 0; margin-top: 1px; }
.vp-ft__notice p { margin: 0; font-size: 13px; line-height: 1.65; color: #d7e5f0; }
.vp-ft__notice strong { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
	/* the rest of the footer centres at this width, so the notice follows rather than
	   sitting left-aligned beside a centred column block */
	.vp-ft__notice {
		flex-direction: column; align-items: center; text-align: center;
		gap: 10px; padding: 15px 16px;
		/* the sky accent moves to the top edge once the box is centred; a left rule reads
		   as lopsided against centred content. Desktop keeps its left accent. */
		border-left: 1px solid rgb(255 255 255 / .18);
		border-top: 3px solid var(--sky);
	}
}

.vp-ft .legal {
	border-top: 1px solid rgb(255 255 255 / .1);
	padding: 22px 0; font-size: 11.5px; color: #7c90a2; line-height: 1.6;
}
.vp-ft .legal p { margin: 0; }
.vp-ft .legal strong { color: #b9c7d4; font-weight: 600; }
.vp-ft .legal .row2 { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-ft .legal a, .vp-ft .legal .vp-ft__todo { color: #8fa6b8; font-size: 11.5px; }
.vp-ft .legal a:hover { color: #fff; }
.vp-ft .legal .links { display: inline-flex; align-items: center; gap: 7px; }
.vp-ft .legal .links i { font-style: normal; opacity: .5; }

@media (max-width: 820px) { .vp-ft .top { grid-template-columns: 1fr 1fr; gap: 28px; } }
/* Tablet: the brand block, Shop and Company sit in three parallel columns, with the
   policies row spanning the full width beneath them. */
@media (max-width: 820px) {
	.vp-ft .top { grid-template-columns: 1.25fr 1fr 1fr; gap: 24px 18px; }
	.vp-ft .top > div:last-child { grid-column: 1 / -1; }
	/* the policies row closes the column block, so it gets a light rule above it */
	.vp-ft .top > div:last-child {
		border-top: 1px solid rgb(255 255 255 / .14);
		padding-top: 22px;
	}
	/* policies read as one wrapped line instead of a stacked column */
	.vp-ft .top > div:last-child ul {
		display: flex; flex-wrap: wrap; gap: 4px 18px;
	}
}
@media (max-width: 520px) {
	/* three columns will not fit a phone: the brand block takes the full width and
	   Shop and Company pair up beneath it */
	.vp-ft .top { grid-template-columns: 1fr 1fr; }
	.vp-ft .top > div:first-child { grid-column: 1 / -1; }
	/* the copyright row repeats Privacy / Terms, which the Policies column already
	   carries - drop the duplicate on a phone */
	.vp-ft .legal .links { display: none; }
}

/* ===============================================================
   24. WooCommerce plugin-templated pages
   These render from WooCommerce's own block templates, whose <main> carries no
   vertical padding - content otherwise starts flush under the sticky header.
   =============================================================== */
.woocommerce-cart .wp-site-blocks main,
.woocommerce-checkout .wp-site-blocks main,
.woocommerce-account .wp-site-blocks main {
	padding-block: 40px 80px;
}
/* Product detail sits between the sticky header and the footer, so it gets a
   deliberate 100px on both sides rather than the shared cart/account spacing. */
/* WooCommerce nests <main> inside its own wrapper div, so a direct-child
   selector never matches here. */
/* Was 100px top and bottom to space WooCommerce's own single-product
   layout. The PDP replaced that layout and starts with a full-bleed
   breadcrumb band, so the padding only showed as a gap under the header. */
.single-product .wp-site-blocks main {
	padding-block: 0;
}

.single-product .woocommerce-breadcrumb { margin-bottom: 28px; color: var(--muted); font-size: 13.5px; }
.single-product .woocommerce-breadcrumb a,
.wc-block-breadcrumbs a { color: var(--muted); text-decoration: none; }
.single-product .woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover { color: var(--petrol); text-decoration: underline; }

/* The frame belongs on the slide, not the <img>. The vial shots are portrait on a
   square-ish slot, so bordering the image traced the photo instead of drawing a
   consistent box - same treatment as the archive card's media area. */
.single-product div.product .woocommerce-product-gallery__image {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 0;
	border-radius: 0;
}
.single-product div.product .woocommerce-tabs { margin-top: 48px; }
.single-product .related.products, .single-product .up-sells { margin-top: 56px; }

/* ===============================================================
   25. COA - single certificate page  (ported from the source)
   =============================================================== */
.vp-coapage { padding: 44px 0 72px; background: linear-gradient(180deg, var(--mist), #fff); min-height: 60vh; }
.vp-coapage__wrap { max-width: 800px; }
.vp-coapage__head { text-align: center; margin-bottom: 30px; }
.vp-coapage__head .vp-mark { margin: 0 auto 14px; }
.vp-coapage__head .vp-eyebrow { justify-content: center; }
.vp-coapage__name { font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; margin: 12px 0 8px; }
.vp-coapage__strength { color: var(--petrol); }
.vp-coapage__sub { color: var(--muted); font-size: 15px; margin: 0; }

.vp-coapage__card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 14px 40px var(--shadow); padding: 8px 24px; margin-bottom: 26px; }
.vp-coapage__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--border); }
.vp-coapage__row:first-child { border-top: none; }
.vp-coapage__k { font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vp-coapage__v { font-size: 15px; font-weight: 500; color: var(--ink); text-align: right; }
.vp-coapage__v--ok { color: var(--ok); font-weight: 600; }
.vp-coapage__row--assays { align-items: flex-start; }
.vp-coapage__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vp-coapage__chip { font-size: 11px; background: var(--mist); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; color: var(--muted); }

.vp-coapage__cert { margin-bottom: 26px; }
.vp-coapage__pdfbtn { display: block; width: fit-content; margin: 14px auto 0; }
.vp-coapage__imglink { display: block; position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; padding: 18px 18px 0; box-sizing: border-box; }
.vp-coapage__imglink img { width: 100%; height: auto; display: block; }
.vp-coapage__zoom { position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgb(11 79 108 / .82); color: #fff; font-size: 11px; padding: 7px 11px; border-radius: 20px; backdrop-filter: blur(4px); }

/* A real PDF report, shown in place rather than linked out - same card, an
   iframe instead of an image, with the zoom pill dropped below it since
   there is no image to float it over. */
.vp-coapage__pdf {
	width: 100%; aspect-ratio: 1 / 1.4142; max-height: 82vh;
	border: 1px solid var(--border); border-radius: 14px;
	background: #fff; display: block;
}
.vp-coapage__cert--pdf .vp-coapage__zoom {
	position: static; margin-top: 10px;
	background: var(--mist); color: var(--petrol);
}

.vp-coapage__pending { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 44px 30px; margin-bottom: 26px; }
.vp-coapage__pending-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--sky-soft); color: var(--petrol); display: grid; place-items: center; margin: 0 auto 16px; }
.vp-coapage__pending h2 { font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.vp-coapage__pending p { color: var(--muted); font-size: 14.5px; max-width: 460px; margin: 0 auto 22px; }
.vp-coapage__pending-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.vp-coapage__foot { text-align: center; }
.vp-coapage__ruo { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; margin-bottom: 12px; }
.vp-coapage__footlinks { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 13.5px; }
.vp-coapage__footlinks a { color: var(--petrol); text-decoration: none; font-weight: 500; }
.vp-coapage__footlinks a:hover { text-decoration: underline; }

/* ===============================================================
   26. COA - certificates index
   =============================================================== */
/* The stats moved inside the video banner, so they are styled for a dark ground here
   and the standalone .vp-coa__hero band is gone. The test cards then straddle the
   banner's bottom edge: -70px is about half a card, and z-index lifts them over it. */
.vp-coa__stats { display: flex; gap: 36px; margin-top: 22px; flex-wrap: wrap; }
.vp-coa__big { font-family: var(--vp-font-mono); font-size: 30px; font-weight: 600; color: #fff; }
.vp-coa__lbl-stat { font-size: 12.5px; color: rgb(255 255 255 / .66); }

.vp-coa__tests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -70px; position: relative; z-index: 2; }
.vp-coa__tcard { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 12px 30px var(--shadow); }
.vp-coa__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--sky-soft); color: var(--petrol); display: grid; place-items: center; margin-bottom: 12px; }
.vp-coa__tcard b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.vp-coa__tcard span { font-size: 12.5px; color: var(--muted); }

.vp-coa__panel { margin-top: 44px; padding-bottom: 72px; }
.vp-coa__searchbar { display: flex; gap: 12px; margin: 14px 0 20px; flex-wrap: wrap; align-items: center; }
.vp-coa__field { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: var(--mist); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 15px; }
.vp-coa__field input { border: none; background: none; flex: 1; font-family: inherit; font-size: 15px; color: var(--ink); }
.vp-coa__field input:focus { outline: none; }
.vp-coa__field svg { color: var(--muted); flex-shrink: 0; }
.vp-coa__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-coa__pill { font-family: var(--vp-font-mono); font-size: 12.5px; font-weight: 500; padding: 8px 13px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; }
.vp-coa__pill.on { background: var(--petrol); color: #fff; border-color: var(--petrol); }

.vp-coa__table { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; }
.vp-coa__crow { display: grid; grid-template-columns: 1.5fr 1.1fr 1.3fr 1.5fr .8fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
/* The filter script sets row.hidden, but an author-stylesheet `display: grid` beats
   the UA sheet's `[hidden] { display: none }`, so the rows stayed visible and search
   and the pills looked dead. This rule is what actually hides them. */
.vp-coa__crow[hidden] { display: none; }
.vp-coa__crow:target { box-shadow: inset 0 0 0 2px var(--sky); }
.vp-coa__crow--head { background: var(--mist); font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.vp-coa__crow:last-of-type { border-bottom: none; }
.vp-coa__prod { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); font-size: 15px; }
.vp-coa__th { width: 44px; height: 44px; border-radius: 9px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
/* The vial art sits on a 1000x1000 canvas with wide white margins, so fitting it
   whole leaves a speck in the middle of the box. Scaling past the frame crops the
   margin instead of the subject - the vial spans ~10-89% of the canvas height. */
.vp-coa__th img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.25); }
.vp-coa__mono { font-family: var(--vp-font-mono); font-size: 13px; color: var(--ink); }
.vp-coa__pure { font-family: var(--vp-font-mono); font-weight: 600; color: var(--ok); font-size: 12.5px; }
.vp-coa__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.vp-coa__tags span { font-family: var(--vp-font-mono); font-size: 10px; background: var(--mist); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; color: var(--muted); }
.vp-coa__view { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.vp-coa__lbl { display: none; }
.vp-coa__empty { color: var(--muted); text-align: center; padding: 30px; }

.vp-coa__verify { background: var(--mist); border: 1px solid var(--border); border-radius: 18px; padding: 34px; margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.vp-coa__verify h2 { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin: 10px 0 8px; }
.vp-coa__verify p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 56ch; }
.vp-coa__qr { width: 96px; height: 96px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; }

@media (max-width: 1000px) { .vp-coa__tests { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
	.vp-coa__crow--head { display: none; }
	.vp-coa__crow { grid-template-columns: 1fr; gap: 8px; }
	.vp-coa__lbl { display: inline; font-family: var(--vp-font-mono); font-size: 10px; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
	.vp-coa__view { justify-self: start; }
	/* stacked, so the copy and the QR tile centre rather than sitting hard left */
	.vp-coa__verify { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	/* stacked, the QR tile leads rather than trailing the copy */
	.vp-coa__qr { order: -1; }
	.vp-coa__verify p { margin-inline: auto; }
}
@media (max-width: 560px) {
	.vp-coa__tests { grid-template-columns: 1fr; margin-top: -48px; }
	/* one card per row, so the icon tile and copy centre instead of stacking hard left */
	.vp-coa__tcard { text-align: center; }
	.vp-coa__ic { margin-inline: auto; }
}

/* ===============================================================
   27. Age gate
   COA pages are exempt - a scanned label must never meet this.
   =============================================================== */
.vp-age {
	position: fixed; inset: 0; z-index: 9999;
	background: rgb(11 79 108 / .92); backdrop-filter: blur(6px);
	display: grid; place-items: center; padding: 20px;
}
.vp-age[hidden] { display: none; }
html.vp-age-open, html.vp-age-open body { overflow: hidden; }
.vp-age__box {
	background: #fff; border-radius: 20px; padding: 40px 34px;
	max-width: 460px; width: 100%; text-align: center;
	box-shadow: 0 30px 80px rgb(0 0 0 / .35);
}
.vp-age__box .vp-mark { margin: 0 auto 14px; }
.vp-age__box .vp-eyebrow { justify-content: center; }
.vp-age__box h2 { font-size: 26px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.vp-age__box > p { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; }
.vp-age__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* .vp-age__box > p above is more specific than a bare .vp-age__note, so the
   note has to match it or its margin never applies. */
.vp-age__box > p.vp-age__note { font-size: 11.5px; color: var(--muted); margin: 30px 0 0; }



/* ===============================================================
   29. Homepage - floating pill header + video banner
   Built to a supplied reference; the rest of the site keeps the
   ported Shopify design.
   =============================================================== */
:root {
	--gx-ink:  #12243c;
	--gx-pale: #dfeaf7;
	--gx-deep: #16305a;
}

/* --- floating pill header --- */
.vp-nav--float { background: transparent; border-bottom: 0; backdrop-filter: none; }
/* The template part stays sticky; making it transparent and pulling <main> up by the
   pill's height lets the banner sit behind the floating header. */
.vp-banner .wp-site-blocks > header.wp-block-template-part { background: transparent; }
.vp-banner .wp-site-blocks > main { margin-top: -96px; }
.vp-nav--float .vp-wrap {
	transition: background-color .28s ease, border-radius .28s ease, margin-top .28s ease, box-shadow .28s ease, padding .28s ease;
	height: auto; margin-top: clamp(14px, 2vw, 22px);
	background: var(--hdr-bg); border-radius: 999px;
	padding: 9px 10px 9px 22px;
	box-shadow: 0 12px 32px rgb(0 0 0 / .3);
	gap: 18px;
}
.vp-nav--float .brand .name { font-size: 17px; letter-spacing: .02em; color: var(--gx-ink); }
.vp-nav--float .vp-mark { width: 26px; height: 26px; }
.vp-nav--float .nav-links { margin: 0 auto; gap: 22px; }
.vp-nav--float .nav-links a { font-size: 13.5px; color: #55677f; font-weight: 500; }
.vp-nav--float .nav-links a:hover { color: var(--gx-ink); }
.vp-nav--float .nav-right { gap: 10px; margin-left: 0; }

.vp-nav--float .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: #eef3f9; color: var(--gx-ink); }
.vp-nav--float .icon-btn svg { width: 16px; height: 16px; }
.vp-nav--float .icon-btn:hover { background: var(--gx-pale); }
.vp-nav--float .search-b { display: none; }

.vp-btn--pill { background: var(--gx-deep); color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; font-size: 13.5px; font-weight: 500; gap: 12px; }
.vp-btn--pill:hover { background: #0f2444; color: #fff; }
.vp-btn__arrow { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--gx-deep); display: grid; place-items: center; flex-shrink: 0; }

/* --- video banner --- */
.vp-gx {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: clamp(560px, 56vw, 760px);
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(130px, 14vw, 170px) 0 clamp(74px, 9vw, 110px);
	background: var(--petrol);
}

/* About, Contact and the Research listing reuse the hero's video treatment at a
   fixed 400px. The top padding clears the floating header (which <main>'s -96px
   pulls the banner under); the title steps down from the homepage's display size. */
.vp-gx.vp-gx--page {
	min-height: 400px;
	height: 400px;
	padding: 96px 0 70px;
	justify-content: flex-end;
	border-radius: 0 0 24px 24px;
}
/* A banner carrying an extra block cannot hold the fixed 400px: the stats add ~75px,
   and the cards below are pulled 70px up over the banner, so the copy needs to end
   clear of them. Floors at 400px so it still matches the text-only banners. */
.vp-gx.vp-gx--page.vp-gx--extra {
	height: auto;
	min-height: 400px;
	padding-bottom: 104px;
}
.vp-gx--page .vp-coa__stats { gap: 36px; }
/* Must out-specify `.vp-gx__title` and its two media-query overrides, all of which
   come later in the file - a bare `.vp-gx__title--page` ties on specificity and loses
   on source order, so the page heading rendered at the homepage display size. */
.vp-gx--page .vp-gx__title { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; margin-bottom: 12px; }
.vp-gx--page .vp-gx__sub { max-width: 560px; margin-top: 12px; }
.vp-gx__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.vp-gx__poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; z-index: 0;
}
.vp-gx__vid {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block; pointer-events: none;
}
/* The footage is dark, so this keeps white type readable without hiding it. */
.vp-gx__bg::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(100deg, rgb(6 12 20 / .82) 0%, rgb(6 12 20 / .58) 42%, rgb(6 12 20 / .3) 72%, rgb(6 12 20 / .45) 100%),
		linear-gradient(180deg, rgb(6 12 20 / .45), transparent 26%, rgb(6 12 20 / .55));
}

.vp-gx__inner {
	position: relative; z-index: 2;
	max-width: 1200px; margin: 0 auto; width: 100%;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.vp-gx__title {
	color: #fff; font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
	font-size: clamp(46px, 8.4vw, 104px);
	margin: 0 0 clamp(18px, 3vw, 30px);
	text-shadow: 0 2px 34px rgb(0 0 0 / .45);
}
.vp-gx__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(18px, 3vw, 26px); }

.vp-gx__sub { color: rgb(255 255 255 / .9); font-size: 14.5px; line-height: 1.6; max-width: 430px; margin: 0; }
.vp-gx__more {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 170px; padding: 13px 26px; border-radius: 999px;
	border: 1.5px solid rgb(255 255 255 / .6); color: #fff;
	font-size: 14px; font-weight: 500; text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.vp-gx__more:hover { background: rgb(255 255 255 / .18); border-color: #fff; color: #fff; }

/* footer strip inside the banner */
.vp-gx__foot { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vw, 34px); z-index: 2; }
.vp-gx__footrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-gx__pin {
	display: inline-flex; align-items: center; gap: 9px;
	background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .26);
	backdrop-filter: blur(8px); border-radius: 999px;
	padding: 9px 18px; color: #fff; font-size: 12.5px;
}
.vp-gx__pin svg { flex-shrink: 0; opacity: .9; }
.vp-gx__social { display: inline-flex; gap: 9px; }
.vp-gx__social a {
	width: 34px; height: 34px; border-radius: 50%;
	background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .26);
	display: grid; place-items: center; color: #fff;
	transition: background-color .2s ease;
}
.vp-gx__social a:hover { background: rgb(255 255 255 / .3); color: #fff; }

@media (max-width: 940px) {
	/* Below the 1200px container the pill spans the full viewport, so it needs its own
	   inset - .vp-wrap only centres, it does not gutter the pill. */
	.vp-nav--float .vp-wrap { padding: 9px 10px 9px 16px; margin-inline: 20px; }
	/* both header variants: the pill has no room once the nav links collapse, and on the
	   plain header it pushed the burger off the edge entirely */
	.vp-nav .vp-btn--pill { display: none; }
	/* .nav-links is hidden here, and it was the auto margin doing the pushing */
	.vp-nav--float .nav-right { margin-left: auto; }
}
@media (max-width: 760px) {
	/* Centre the banner and let the bottom strip flow after the copy instead of
	   sitting absolutely over it - there is no spare height on a phone. */
	.vp-gx {
		min-height: 0;
		/* <main> is pulled up 96px so the banner sits behind the floating header;
		   that offset is added on top of the 100px so the visible gap is 100px. */
		padding: calc(96px + 100px) 20px 100px;
		justify-content: flex-start;
	}
	.vp-gx__inner,
	.vp-gx__foot .vp-gx__inner { padding-inline: 0; }
	.vp-gx__inner { text-align: center; }
	.vp-gx__title { margin-bottom: 16px; }
	/* the page banner sits at 300px on a phone, so the display size steps down */
	.vp-gx--page .vp-gx__title { font-size: clamp(24px, 7vw, 32px); }
	.vp-gx__sub { margin-inline: auto; max-width: 38ch; }
	.vp-gx__actions { justify-content: center; margin-top: 22px; }
	.vp-gx__more { min-width: 0; width: 100%; max-width: 300px; }

	.vp-gx__foot { position: static; margin-top: 30px; }
	.vp-gx__footrow { flex-direction: column; align-items: center; gap: 14px; }
	.vp-gx__pin {
		font-size: 11.5px; padding: 9px 16px; line-height: 1.4;
		text-align: center; max-width: 100%;
	}
	/* Phones floor at 300px but may grow: .vp-gx clips its overflow, and a wrapped
	   heading plus standfirst can exceed a fixed height. Top padding still clears the
	   96px the header is pulled up by. */
	.vp-gx.vp-gx--page {
		height: auto; min-height: 300px;
		padding: calc(96px + 16px) 20px 34px;
		border-radius: 0 0 18px 18px;
	}
	/* three across on one line: no wrap, equal columns and a figure that scales with
	   the viewport, since 30px x3 cannot fit a phone. */
	.vp-gx--page .vp-coa__stats { flex-wrap: nowrap; justify-content: center; gap: 10px; }
	.vp-gx--page .vp-coa__stat { flex: 1 1 0; min-width: 0; }
	.vp-gx--page .vp-coa__big { font-size: clamp(17px, 5.4vw, 26px); }
	.vp-gx--page .vp-coa__lbl-stat { font-size: 10.5px; line-height: 1.35; }
	.vp-gx__social { justify-content: center; }
}

@media (max-width: 600px) {
	/* the pill runs out of room once the nav links and CTA are gone */
	.vp-nav--float .vp-wrap { padding: 7px 7px 7px 13px; gap: 8px; }
	.vp-nav .brand { gap: 8px; }
	.vp-nav .brand .name { font-size: 14.5px; letter-spacing: .09em; }
	.vp-nav .vp-mark, .vp-nav--float .vp-mark { width: 24px; height: 24px; }
	.vp-nav .nav-right { gap: 6px; }
	.vp-nav--float .icon-btn { width: 32px; height: 32px; border-radius: 9px; }
	.vp-nav--float .icon-btn svg { width: 15px; height: 15px; }
	.vp-nav .cart-count { min-width: 15px; height: 15px; font-size: 9px; top: -1px; right: -2px; }
	.vp-gx__title { font-size: clamp(38px, 12vw, 52px); }
}

/* Autoplaying background video is decoration; drop it if motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
	.vp-gx__vid { display: none; }
}

/* ===============================================================
   30. Dark header
   The header surface is #292D30 everywhere - site bar, homepage pill and
   mobile dropdown. Everything inside was drawn for a white background, so
   it is inverted here rather than left dark-on-dark.
   =============================================================== */
/* --- brand --- */
.vp-nav .brand .name,
.vp-nav--float .brand .name { color: #fff; }
.vp-nav .vp-mark path { fill: rgb(255 255 255 / .08); stroke: #fff; }
.vp-nav .vp-mark g line { stroke: #fff; }
/* the centre node is the last circle in the mark */
.vp-nav .vp-mark circle:last-of-type { fill: #fff; }

/* --- nav links --- */
.vp-nav .nav-links a,
.vp-nav--float .nav-links a { color: rgb(255 255 255 / .68); }
.vp-nav .nav-links a:hover,
.vp-nav .nav-links a.on,
.vp-nav--float .nav-links a:hover { color: #fff; }

/* --- icon buttons --- */
.vp-nav .icon-btn,
.vp-nav--float .icon-btn { color: rgb(255 255 255 / .75); background: rgb(255 255 255 / .08); }
.vp-nav .icon-btn:hover,
.vp-nav--float .icon-btn:hover { color: #fff; background: rgb(255 255 255 / .18); }
.vp-nav .cart-count { background: var(--petrol); color: #fff; }

/* --- buttons --- */
.vp-nav .vp-btn--primary { background: var(--sky); color: #06202c; }
.vp-nav .vp-btn--primary:hover { background: #7fd2fb; color: #06202c; }
.vp-btn--pill { background: #fff; color: var(--hdr-bg); }
.vp-btn--pill:hover { background: #e8edf2; color: var(--hdr-bg); }
.vp-btn__arrow { background: var(--hdr-bg); color: #fff; }
.vp-btn--signin { color: #fff; border-color: rgb(255 255 255 / .32); }
.vp-btn--signin:hover { background: #fff; color: var(--hdr-bg); border-color: #fff; }

/* --- mobile dropdown --- */
.vp-nav .mobile-menu a { color: #fff; border-bottom: 1px solid rgb(255 255 255 / .1); }
.vp-nav .mobile-menu a:hover { background: rgb(255 255 255 / .06); }

/* ===============================================================
   31. Buttons on dark surfaces
   Brand petrol #0B4F6C fills every button that sits on a dark background:
   the header, the video banner, and the ink-coloured sections.
   Exception: .vp-band is itself #0B4F6C, so its buttons keep the
   translucent-white treatment or they would disappear into the panel.
   =============================================================== */
.vp-nav .vp-btn--primary,
.vp-btn--signin,
.vp-btn--ondark {
	background: var(--petrol);
	color: #fff;
	border-color: var(--petrol);
}
.vp-nav .vp-btn--primary:hover,
.vp-btn--signin:hover,
.vp-btn--ondark:hover {
	background: var(--petrol-d);
	color: #fff;
	border-color: var(--petrol-d);
}

/* the round arrow inside the header pill inverts against the petrol fill */
.vp-btn__arrow { background: #fff; color: var(--petrol); }

/* .vp-band is petrol already - keep its buttons readable */
.vp-band .vp-btn--ondark {
	background: rgb(255 255 255 / .14);
	border-color: rgb(255 255 255 / .34);
	color: #fff;
}
.vp-band .vp-btn--ondark:hover {
	background: #fff;
	border-color: #fff;
	color: var(--petrol);
}

/* ===============================================================
   32. Homepage section flow
   Each section carries its own padding, so the block canvas gap between
   them only shows up as a white band under the banner.
   =============================================================== */
.home .entry-content > * + *,
.home .wp-block-post-content > * + * { margin-block-start: 0; }
.home .entry-content, .home .wp-block-post-content { margin-block-start: 0; }

/* ===============================================================
   33. Outlined buttons on dark
   The banner pair and the header pill are transparent with a white
   border, so the artwork behind them stays visible.
   =============================================================== */
.vp-gx__more,
.vp-btn--pill {
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
}
.vp-gx__more:hover,
.vp-btn--pill:hover {
	background: rgb(255 255 255 / .16);
	border-color: #fff;
	color: #fff;
}
/* solid disc keeps the arrow legible against the transparent fill */
.vp-btn__arrow { background: #fff; color: var(--hdr-bg); }

/* ===============================================================
   34. Inner-page header
   The bar is #0B4F6C on every page except the homepage, whose floating
   pill stays #292D30. The mobile "Shop now" button is petrol from the
   dark-button rule, so it inverts here or it would vanish into the bar.
   =============================================================== */
.vp-nav:not(.vp-nav--float) .vp-btn--primary {
	background: #fff;
	color: var(--petrol);
	border-color: #fff;
}
.vp-nav:not(.vp-nav--float) .vp-btn--primary:hover {
	background: #e8edf2;
	color: var(--petrol);
	border-color: #e8edf2;
}

/* ===============================================================
   35. Header on scroll (homepage)
   At rest the header is a floating pill over the banner. Once the page moves
   it becomes a full-width bar: the colour moves off .vp-wrap - which is capped
   at 1200px - and onto .vp-nav--float, which spans the viewport. .vp-wrap then
   drops the pill's radius, shadow and top margin and returns to the site's
   normal 24px gutter, so the bar is full-bleed but its contents stay aligned
   with the rest of the page.
   =============================================================== */
.vp-nav--float { transition: background-color .28s ease, box-shadow .28s ease; }
.vp-nav--float.is-scrolled { background: var(--petrol); box-shadow: 0 6px 20px rgb(0 0 0 / .22); }
.vp-nav--float.is-scrolled .vp-wrap {
	background: transparent;
	margin-top: 0;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	padding: 9px 24px;
}
.vp-nav--float.is-scrolled .mobile-menu { background: var(--petrol); }

/* ===============================================================
   36. Numbers band (homepage)
   Same figures as About, on the dark ink band: borderless cards,
   white mono figures, muted blue-grey labels.
   =============================================================== */
.vp-numbers { background: var(--petrol); }
.vp-numbers .vp-stat {
	background: transparent;
	border: 0;
	padding: 8px 12px;
}
.vp-numbers .vp-stat b {
	color: #fff;
	font-size: clamp(34px, 4.4vw, 52px);
	letter-spacing: -.02em;
}
.vp-numbers .vp-stat span {
	color: rgb(255 255 255 / .72);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11.5px;
	line-height: 1.5;
	display: block;
	margin-top: 8px;
}

@media (max-width: 860px) {
	.vp-numbers .vp-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* ===============================================================
   37. Why researchers choose Vitrapept - expanding numbered panels
   =============================================================== */
.vp-proc { display: flex; align-items: stretch; gap: 0; margin-top: 8px; }
.vp-proc__item {
	flex: 0 0 auto; width: clamp(96px, 12vw, 160px);
	display: flex; align-items: flex-start; gap: 22px;
	background: none; border: 0; border-top: 1px solid var(--border);
	padding: 22px 12px 26px 0; margin: 0; cursor: pointer; text-align: left;
	font: inherit; color: inherit; overflow: hidden;
	transition: flex-basis .38s ease, width .38s ease, border-color .25s ease;
}
.vp-proc__item.is-open {
	flex: 1 1 auto; width: auto;
	border-top-color: var(--petrol);
}
.vp-proc__n {
	flex-shrink: 0; line-height: .82;
	font-size: clamp(64px, 9vw, 132px); font-weight: 700; letter-spacing: -.05em;
	color: #dfe5ea;
	transition: color .28s ease;
}
.vp-proc__item.is-open .vp-proc__n { color: var(--ink); }
.vp-proc__item:hover .vp-proc__n { color: #c8d3dc; }
.vp-proc__item.is-open:hover .vp-proc__n { color: var(--ink); }

.vp-proc__body {
	flex: 0 0 auto; width: 40ch; padding-top: 12px;
	opacity: 0; visibility: hidden;
	transition: opacity .3s ease .06s, visibility .3s;
}
.vp-proc__item.is-open .vp-proc__body { opacity: 1; visibility: visible; }
.vp-proc__title { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.vp-proc__desc { display: block; color: var(--muted); font-size: 14px; line-height: 1.65; }

.vp-proc__cta { margin-top: 10px; }

@media (max-width: 860px) {
	/* Stacked list: there is no room for a horizontal reveal, so every panel shows
	   its copy at once and the open/closed distinction is dropped entirely. */
	.vp-proc { flex-direction: column; }
	.vp-proc__item,
	.vp-proc__item.is-open {
		width: 100%; flex: 0 0 auto;
		padding: 18px 0 20px; gap: 18px; align-items: flex-start;
		cursor: default; border-top-color: var(--border);
	}
	.vp-proc__n,
	.vp-proc__item.is-open .vp-proc__n,
	.vp-proc__item:hover .vp-proc__n { font-size: 52px; color: var(--ink); }
	.vp-proc__body,
	.vp-proc__item.is-open .vp-proc__body {
		width: auto; flex: 1 1 auto; padding-top: 4px;
		opacity: 1; visibility: visible;
	}
	.vp-proc__title { font-size: 17px; }
}

/* ===============================================================
   38. Newsletter CTA on light
   =============================================================== */
.vp-news { background: #F3F7FB; color: var(--ink); }
.vp-news h2 { color: var(--ink); }
.vp-news p { color: var(--muted); }
.vp-news .vp-eyebrow, .vp-news .vp-eyebrow--ondark { color: var(--petrol); }
.vp-news__form input[type="email"] {
	background: #fff;
	border: 1px solid var(--border);
	color: var(--ink);
}
.vp-news__form input[type="email"]::placeholder { color: var(--faint, #8794a5); }
.vp-news__form input[type="email"]:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol); }

/* The block canvas spaces top-level children apart, which shows as a white band
   between the last section and the footer. */
.wp-site-blocks > main { margin-block-end: 0; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-site-blocks > main > .entry-content > *:last-child,
.wp-site-blocks > main > .wp-block-post-content > *:last-child { margin-block-end: 0; }

/* ===============================================================
   39. FAQ summary focus
   The card clips overflow, so the browser's default focus ring gets cut
   and only its bottom edge shows - which reads as a stray dark line.
   =============================================================== */
.vp-qa summary:focus { outline: none; }
.vp-qa summary:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: -3px;
	border-radius: 14px;
}

/* ===============================================================
   40. Certificates band - image behind a petrol overlay
   Relative URL so it survives the move from the temp host to
   vitrapept.com without a search-replace.
   =============================================================== */
.vp-band {
	position: relative;
	background-color: var(--petrol);
	background-image: url("../../uploads/2026/09/matrixyl-6-scaled-e1640873843758-1920x700-1.webp");
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	overflow: hidden;
}
/* dark on the left so the copy stays readable, easing off to the right
   so the photograph shows through behind the spec panel */
.vp-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgb(11 79 108 / .97) 0%,
		rgb(11 79 108 / .94) 30%,
		rgb(11 79 108 / .82) 55%,
		rgb(11 79 108 / .58) 100%
	);
	pointer-events: none;
}
.vp-band > * { position: relative; z-index: 1; }

@media (max-width: 860px) {
	/* stacked: the copy sits over the middle of the image, so even it out */
	.vp-band::before {
		background: linear-gradient(180deg, rgb(11 79 108 / .95), rgb(11 79 108 / .88));
	}
}

/* ===============================================================
   41. Blog cards - archive and homepage row
   =============================================================== */
.vp-mainblog { padding: 48px 0 80px; }
.vp-mainblog__head { margin-bottom: 34px; }
.vp-mainblog__head h1 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.vp-mainblog__head p { color: var(--muted); margin-top: 10px; max-width: 560px; }

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

.vp-bcard {
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.vp-bcard:hover { box-shadow: 0 14px 30px var(--shadow); transform: translateY(-2px); border-color: var(--petrol); }
.vp-bcard__ph {
	aspect-ratio: 16 / 9; overflow: hidden;
	background: linear-gradient(160deg, #e7f0f8, #d6e4ef);
	display: grid; place-items: center; color: var(--petrol);
}
.vp-bcard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-bcard__ph .vp-ico { width: 34px; height: 34px; opacity: .7; }

.vp-bcard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.vp-bcard__tag {
	font-family: var(--vp-font-mono); font-size: 11px; letter-spacing: .06em;
	color: var(--petrol); text-transform: uppercase;
}
.vp-bcard__title { display: block; font-size: 18px; font-weight: 600; color: var(--ink); margin: 8px 0; line-height: 1.3; }
.vp-bcard:hover .vp-bcard__title { color: var(--petrol); }
.vp-bcard__excerpt { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.vp-bcard__meta {
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
	display: flex; align-items: center; gap: 8px;
	font-family: var(--vp-font-mono); font-size: 11.5px; color: var(--muted);
}
.vp-bcard__meta > span:first-child { margin-top: 16px; margin-top: 0; }
.vp-bcard__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.vp-mainblog__empty { color: var(--muted); text-align: center; padding: 40px 0; }

@media (max-width: 1000px) { .vp-mainblog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.vp-mainblog__grid,
	.vp-mainblog__grid--2 { grid-template-columns: 1fr; }
}

/* ===============================================================
   42. Contact page
   =============================================================== */
/* The .vp-ct__top band and the old hand-rolled form are gone: the page banner carries
   the heading now, and the form is Contact Form 7. What is left is the two-card
   layout - white form card, dark details card - from the supplied reference. */
.vp-ct__grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(24px, 3vw, 34px); align-items: stretch; }

.vp-ct__form {
	/* position anchors the CF7 spinner, which is lifted out of the submit row */
	position: relative;
	background: #fff; border: 1px solid var(--border); border-radius: 20px;
	padding: clamp(24px, 3vw, 40px);
}
.vp-ct__form h2 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; margin: 0 0 10px; }
.vp-ct__lede { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 26px; max-width: 52ch; }

/* ---- Contact Form 7 fields ---- */
.vp-cf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.vp-cf__f--full { grid-column: 1 / -1; }
.vp-cf__f label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.vp-ct__form input[type="text"],
.vp-ct__form input[type="email"],
.vp-ct__form input[type="tel"],
.vp-ct__form textarea {
	/* No global border-box reset in this theme, so width:100% plus padding and border
	   overflowed the column. Visible once the grid drops to one column on a phone. */
	box-sizing: border-box;
	width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 12px;
	padding: 13px 15px;
}
.vp-ct__form textarea { resize: vertical; min-height: 132px; }
.vp-ct__form input::placeholder, .vp-ct__form textarea::placeholder { color: #9aa8b6; }
.vp-ct__form input:focus, .vp-ct__form textarea:focus { outline: none; border-color: var(--petrol); }
/* Grid rather than flex: CF7 injects its spinner into this row on init, and in a flex
   row that took width to the button's right. Here a third child wraps to a new line
   and the button stays pinned to the grid edge - the same edge the fields end on. */
.vp-cf__submit { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 22px; }
.vp-cf__submit > input[type="submit"] { justify-self: end; margin: 0; }
.vp-cf__note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 48ch; }
.vp-ct__form input[type="submit"] {
	font-family: inherit; font-size: 15px; font-weight: 600;
	background: var(--petrol); color: #fff; border: 0; border-radius: 999px;
	padding: 14px 30px; cursor: pointer; transition: background .2s;
}
.vp-ct__form input[type="submit"]:hover { background: var(--petrol-d, #0a4257); }
/* CF7 prints its own validation and response text; align it with the theme */
.vp-ct__form .wpcf7-not-valid-tip { color: #b91c1c; font-size: 12.5px; margin-top: 6px; }
.vp-ct__form .wpcf7-response-output {
	margin: 20px 0 0; padding: 13px 16px; border-radius: 10px;
	border: 1px solid var(--border); font-size: 14px;
}
/* CF7 adds its spinner after the submit button on init. Left in the flex row it
   takes width to the button's right and stops the button sitting flush with the
   field edges above, so it is lifted out of flow. */
.vp-ct__form .wpcf7-spinner { position: absolute; right: 0; top: calc(100% + 10px); margin: 0; }
/* ---- details card ---- */
/* Column-flex so that, once the card is stretched to match the form, the free space
   falls above "Connect with us" rather than below it. */
.vp-ct__info {
	display: flex; flex-direction: column;
	background: var(--petrol); color: #fff; border-radius: 20px;
	padding: clamp(24px, 3vw, 34px);
}
.vp-ct__infotitle { color: #fff; font-size: clamp(19px, 2.1vw, 23px); font-weight: 700; line-height: 1.35; margin: 0 0 24px; max-width: 20ch; }
.vp-ct__rows { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vp-ct__row {
	display: flex; align-items: center; gap: 14px;
	background: rgb(255 255 255 / .09); border-radius: 12px; padding: 14px 16px;
}
.vp-ct__ico {
	display: grid; place-items: center; flex-shrink: 0;
	width: 38px; height: 38px; border-radius: 10px;
	background: rgb(255 255 255 / .12); color: #fff;
}
.vp-ct__rowtext { min-width: 0; }
.vp-ct__rows b { display: block; font-size: 13.5px; color: #fff; margin-bottom: 2px; }
.vp-ct__rows a, .vp-ct__rows .vp-ct__rowtext span { color: rgb(255 255 255 / .74); font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere; }
.vp-ct__rows a:hover { color: #fff; }

.vp-ct__connect { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .18); }
.vp-ct__connect b { display: block; font-size: 14px; color: #fff; margin-bottom: 14px; }
.vp-ct__social { display: flex; gap: 10px; }
.vp-ct__social a {
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: rgb(255 255 255 / .12); color: #fff; transition: background .2s;
}
.vp-ct__social a:hover { background: rgb(255 255 255 / .24); }

@media (max-width: 900px) {
	.vp-ct__grid { grid-template-columns: 1fr; }
	.vp-cf__grid { grid-template-columns: 1fr; }
	.vp-cf__submit { grid-template-columns: 1fr; gap: 16px; }
	/* 4. note reads first, then the button - so no order flip, just DOM order */
	.vp-cf__submit > input[type="submit"] { justify-self: stretch; }
	.vp-ct__form input[type="submit"] { width: 100%; }
	.vp-cf__note { text-align: center; max-width: none; }

	/* the form card heading and lede centre too */
	.vp-ct__form h2 { text-align: center; }
	.vp-ct__lede { text-align: center; margin-inline: auto; }

	/* 5. the details card centres on a phone */
	.vp-ct__infotitle { text-align: center; max-width: none; margin-inline: auto; }
	.vp-ct__connect { text-align: center; }
	.vp-ct__social { justify-content: center; }
}
/* ===============================================================
   43. Mobile alignment
   On a phone every section heading, its eyebrow and its description
   centre; the trust points stack; the numbers band gains dividers;
   and the footer centres with the copyright line moved last.
   =============================================================== */
@media (max-width: 760px) {

	/* --- section headings, eyebrows and descriptions --- */
	.vp-head,
	.vp-mainblog__head,
	.vp-shop__head,
	.vp-faq__intro,
	.vp-band__inner,
	.vp-news__inner,
	.vp-featured__inner { text-align: center; }

	.vp-head--split { flex-direction: column; align-items: center; }
	.vp-head .vp-lede,
	.vp-lede,
	.vp-mainblog__head p,
	.vp-faq__intro p,
	.vp-band__inner p,
	.vp-news p,
	.vp-ct__lede { margin-inline: auto; }

	.vp-eyebrow { justify-content: center; }
	.vp-proc__cta,
	.vp-band__inner p:last-child { display: flex; justify-content: center; }

	/* --- trust strip --- */
	.vp-trust .vp-wrap { gap: 26px; }
	.vp-trust .t { flex-direction: column; align-items: center; text-align: center; gap: 10px; }

	/* --- numbers band: dividers between the figures --- */
	.vp-numbers .vp-stats { grid-template-columns: 1fr; gap: 0; }
	.vp-numbers .vp-stat {
		padding: 22px 0;
		border-bottom: 1px solid rgb(255 255 255 / .2);
	}
	.vp-numbers .vp-stat:last-child { border-bottom: 0; }

	/* --- newsletter --- */
	.vp-news__form { justify-content: center; }

	/* --- footer --- */
	.vp-ft .top { text-align: center; }
	/* the policies row is flex, so it needs its own centring */
	.vp-ft .top > div:last-child ul { justify-content: center; }
	.vp-ft .brand,
	.vp-ft .social,
	.vp-ft .pay { justify-content: center; }
	.vp-ft .blurb { margin-inline: auto; }
	.vp-ft .legal { text-align: center; }
	/* markup order is copyright then links; reversing puts the copyright last */
	.vp-ft .legal .row2 { flex-direction: column-reverse; align-items: center; gap: 12px; }
	.vp-ft .legal .links { justify-content: center; }
}

/* ===============================================================
   44. Mobile menu open state
   The dropdown is a sibling of the header bar, not a child of it, so left in
   flow it spanned the viewport and pushed the page down. Both variants take it
   out of flow as the same inset rounded panel, so the shop and WooCommerce
   headers behave and look exactly like the one on the homepage.
   =============================================================== */
@media (max-width: 940px) {
	.vp-nav .mobile-menu {
		position: absolute;
		top: calc(100% + 8px);
		left: 20px;
		right: 20px;
		border-top: 0;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 18px 40px rgb(0 0 0 / .38);
	}
	.vp-nav .mobile-menu a { padding: 14px 20px; }
}
.vp-nav .mobile-menu a:last-child { border-bottom: 0; }

/* ===============================================================
   45. Product reviews
   The review form is WooCommerce's own comment form and the theme
   had no rules for it at all, so it rendered with browser default
   inputs. Styled to match the contact form: one card, labelled
   fields, the star select turned into a real star row.
   =============================================================== */
#reviews { margin-top: 8px; }
#reviews .woocommerce-noreviews {
	margin: 0 0 20px; padding: 14px 18px;
	background: var(--mist); border: 1px solid var(--border); border-radius: 12px;
	color: var(--muted); font-size: 14.5px;
}

#review_form_wrapper {
	background: #fff; border: 1px solid var(--border); border-radius: 18px;
	padding: clamp(20px, 3vw, 32px);
}
#reviews .comment-reply-title {
	display: block; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700;
	color: var(--ink); line-height: 1.3; margin: 0 0 6px;
}
#reviews .comment-notes { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
#reviews .required { color: #b91c1c; }

#reviews .comment-form { display: grid; gap: 16px; }
#reviews .comment-form > p { margin: 0; }
#reviews .comment-form label {
	display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}

/* Name and email share a row on anything wider than a phone. */
@media (min-width: 700px) {
	#reviews .comment-form { grid-template-columns: 1fr 1fr; }
	#reviews .comment-form-comment,
	#reviews .comment-form-rating,
	#reviews .comment-form-cookies-consent,
	#reviews .form-submit { grid-column: 1 / -1; }
}

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	box-sizing: border-box; width: 100%;
	font-family: inherit; font-size: 14.5px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 12px;
	padding: 13px 15px;
}
#reviews .comment-form textarea { min-height: 130px; resize: vertical; }
#reviews .comment-form input::placeholder,
#reviews .comment-form textarea::placeholder { color: #9aa8b6; }
#reviews .comment-form input:focus,
#reviews .comment-form textarea:focus { outline: none; border-color: var(--petrol); }

/* WooCommerce swaps the rating <select> for a star row when its JS runs; both are
   styled so the field never falls back to a bare dropdown. */
#reviews .comment-form-rating select {
	box-sizing: border-box; width: 100%; max-width: 260px;
	font-family: inherit; font-size: 14.5px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 12px;
	padding: 12px 15px;
}
#reviews p.stars { display: inline-flex; gap: 6px; margin: 0; }
#reviews p.stars a {
	position: relative; width: 26px; height: 26px;
	text-indent: -9999px; overflow: hidden;
	text-decoration: none;
}
#reviews p.stars a::before {
	content: "\2605";
	position: absolute; inset: 0;
	text-indent: 0; font-size: 24px; line-height: 26px; text-align: center;
	color: var(--border); transition: color .15s ease;
}
/* Hovering the row golds every star, then the ones after the cursor revert. CSS has no
   preceding-sibling selector, so this is the standard way round it. */
#reviews p.stars:hover a::before { color: #f5b301; }
#reviews p.stars a:hover ~ a::before { color: var(--border); }
/* A chosen rating: gold up to and including .active, grey after it. */
#reviews p.stars.selected a::before { color: #f5b301; }
#reviews p.stars.selected a.active ~ a::before { color: var(--border); }

#reviews .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
#reviews .comment-form-cookies-consent input { margin-top: 3px; flex-shrink: 0; }
#reviews .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--muted); font-size: 13.5px; }

#reviews .form-submit { margin: 4px 0 0; }
#reviews .form-submit input[type="submit"] {
	font-family: inherit; font-size: 15px; font-weight: 600;
	background: var(--petrol); color: #fff; border: 0; border-radius: 999px;
	padding: 14px 32px; cursor: pointer; transition: background .2s;
}
#reviews .form-submit input[type="submit"]:hover { background: var(--petrol-d); }

/* Existing reviews */
#reviews .commentlist { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
#reviews .commentlist .comment_container {
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--mist); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
}
#reviews .commentlist img.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
#reviews .comment-text { flex: 1; min-width: 0; }
#reviews .comment-text .meta { font-size: 13.5px; color: var(--ink); margin: 0 0 6px; }
#reviews .comment-text p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ===============================================================
   46. Header product search
   The icon linked to an empty ?s= query, so it landed on a results
   page listing everything with no field to type in. It now toggles
   this panel, which sits under the bar like the mobile dropdown.
   =============================================================== */
/* The panel hangs off the icon itself, so the wrapper is the positioning context.
   Anchored to the icon's left edge and opening rightwards, with a viewport guard so
   it can never run off the screen edge. */
.vp-search-wrap { position: relative; display: inline-flex; }
.vp-search {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 5;
	flex-direction: column;
	width: 420px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgb(0 0 0 / .28);
}
.vp-search.open { display: flex; }
.vp-search__row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; }
.vp-search__ic { display: grid; place-items: center; color: var(--muted); flex-shrink: 0; line-height: 0; }
.vp-search__input {
	flex: 1; min-width: 0;
	font-family: inherit; font-size: 15px; color: var(--ink);
	background: none; border: 0; padding: 10px 0;
}
.vp-search__input::placeholder { color: #9aa8b6; }
.vp-search__input:focus { outline: none; }
.vp-search__go {
	flex-shrink: 0;
	font-family: inherit; font-size: 14px; font-weight: 600;
	color: #fff; background: var(--petrol); border: 0; border-radius: 999px;
	padding: 11px 22px; cursor: pointer; transition: background .2s;
}
.vp-search__go:hover { background: var(--petrol-d); }


/* ---- live search results ---- */
.vp-search__results {
	display: block;
	border-top: 1px solid var(--border);
	max-height: 340px;
	overflow-y: auto;
}
.vp-search__results[hidden] { display: none; }
.vp-search__hit {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}
.vp-search__hit:last-child { border-bottom: 0; }
.vp-search__hit:hover { background: var(--mist); }
.vp-search__hit img {
	width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
	background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.vp-search__hitname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.vp-search__hitprice { flex-shrink: 0; font-family: var(--vp-font-mono); font-size: 13.5px; font-weight: 600; color: var(--petrol); }
.vp-search__empty { display: block; padding: 16px 14px; font-size: 13.5px; color: var(--muted); }

/* ---- newsletter form (Contact Form 7) ---- */
.vp-news__form .wpcf7 { width: 100%; }
.vp-news__form .wpcf7-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vp-news__field { flex: 1; min-width: 220px; }
.vp-news__form input[type="email"] {
	box-sizing: border-box; width: 100%;
	font-family: inherit; font-size: 15px;
	padding: 14px 16px; border-radius: 12px;
}
.vp-news__form input[type="submit"] {
	flex-shrink: 0;
	font-family: inherit; font-size: 15px; font-weight: 600;
	color: #fff; background: var(--petrol); border: 0; border-radius: 12px;
	padding: 14px 28px; cursor: pointer; transition: background .2s;
}
.vp-news__form input[type="submit"]:hover { background: var(--petrol-d); }
.vp-news__form .wpcf7-not-valid-tip { flex-basis: 100%; font-size: 12.5px; color: #b91c1c; margin-top: 4px; }
.vp-news__form .wpcf7-response-output {
	flex-basis: 100%; margin: 6px 0 0; padding: 10px 14px;
	border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px;
}
.vp-news__form .wpcf7-spinner { flex-shrink: 0; }

/* ===============================================================
   47. Focus ring
   The browser default is a black-and-white double outline, which on
   the dark header reads as a hard white box around the link. Same
   affordance, brand colours. Keyboard focus only, so a mouse click
   never draws it, and :where() keeps specificity at zero.
   =============================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The icon sits near the right edge on a narrow screen, so a panel anchored to its
   left edge runs off the page. Anchor it to the icon's right edge instead, opening
   leftward, and cap the width to the viewport. */
@media (max-width: 940px) {
	.vp-search {
		left: auto;
		right: 0;
		width: min(340px, calc(100vw - 32px));
	}
}

/* Related products is the last block before the footer, so it carries less
   than a full section's padding of its own; the 80px below <main> supplies
   the gap above the footer. */
.vp-related { padding-bottom: 30px; }
.single-product .wp-site-blocks > main { margin-bottom: 0; padding-bottom: 80px; }

/* Tablet: the banner's bottom strip has room for the location pin or the social row,
   not both, so the icons drop and the pin keeps the width to itself. The phone layout
   at 760px and below stacks them deliberately and is left alone. */
@media (min-width: 761px) and (max-width: 1024px) {
	.vp-gx__social { display: none; }
	.vp-gx__footrow { justify-content: flex-start; }
}

/* ---- product gallery thumbnails ----
   Flexslider builds these client-side, so the theme had no rules for them: they sat
   flush under the main image at their natural sizes, one portrait and one landscape.
   Framed to match the main slide, on a fixed grid, with real space above. */
.single-product div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.single-product div.product .flex-control-thumbs li { margin: 0; list-style: none; }
.single-product div.product .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
	opacity: .65;
	transition: opacity .2s, border-color .2s;
}
.single-product div.product .flex-control-thumbs img:hover,
.single-product div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--petrol);
}
/* clear the gallery from whatever follows it */
.single-product div.product .woocommerce-product-gallery { margin-bottom: 28px; }

/* ===============================================================
   48. Single article
   Posts had no template in this theme, so they fell through to the
   parent's single.html and rendered at its 780px contentSize with
   none of the site's styling. Own template, own container, plus a
   related-reading rail on the right.
   =============================================================== */
.vp-post { padding-top: 100px; }
.vp-post__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.vp-post__main { min-width: 0; }
.vp-post__main .wp-block-post-title {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	margin: 0 0 14px;
}
.vp-post__main .wp-block-post-featured-image { margin: 0 0 26px; }
.vp-post__main .wp-block-post-featured-image img {
	width: 100%; height: auto; display: block;
	border: 1px solid var(--border); border-radius: var(--radius);
}
.vp-post__main p { line-height: 1.75; margin: 0 0 16px; }
.vp-post__main h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 32px 0 12px; }
.vp-post__main h3 { font-size: 18px; margin: 24px 0 10px; }
.vp-post__main ul, .vp-post__main ol { margin: 0 0 18px; padding-left: 22px; }
.vp-post__main li { margin-bottom: 8px; line-height: 1.7; }
.vp-post__main a { color: var(--petrol); }

/* ---- related rail ---- */
.vp-post__aside { position: sticky; top: 96px; }
.vp-post__widget {
	background: var(--mist);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 20px;
}
.vp-post__widgettitle { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.vp-post__related { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.vp-post__related a { display: flex; gap: 11px; align-items: flex-start; text-decoration: none; }
.vp-post__relthumb { flex-shrink: 0; }
.vp-post__relthumb img {
	width: 52px; height: 52px; object-fit: cover; display: block;
	border-radius: 9px; border: 1px solid var(--border); background: #fff;
}
.vp-post__reltext { min-width: 0; }
.vp-post__reltitle {
	display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.vp-post__related a:hover .vp-post__reltitle { color: var(--petrol); }
.vp-post__relmeta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
/* No global border-box in this theme, so width:100% plus padding and border spilled
   past the widget. */
.vp-post__all { box-sizing: border-box; width: 100%; justify-content: center; font-size: 13.5px; padding: 10px 16px; }

@media (max-width: 900px) {
	/* the rail drops below the article and stops sticking */
	.vp-post__grid { grid-template-columns: 1fr; }
	.vp-post__aside { position: static; }
}

/* ---- article byline + divider ---- */
.vp-post__meta {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-size: 13.5px; color: var(--muted);
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
}
.vp-post__metadot {
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--border); flex-shrink: 0;
}

/* ---- tables inside article content ----
   Post content is raw HTML, so a <table> arrived with browser defaults: centred
   headings, no rules, columns sized by content. */
.vp-post__main table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: 14.5px;
}
.vp-post__main table th,
.vp-post__main table td {
	text-align: left;
	vertical-align: top;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
}
.vp-post__main table thead th {
	background: var(--mist);
	color: var(--ink);
	font-weight: 600;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.vp-post__main table tbody tr:last-child td { border-bottom: 0; }
.vp-post__main table td { color: var(--muted); line-height: 1.6; }
.vp-post__main table td strong { color: var(--ink); font-weight: 600; }
/* a wide table scrolls inside its own box rather than stretching the article */
.vp-post__main figure.wp-block-table,
.vp-post__main .wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin: 0 0 22px;
}
.vp-post__main .wp-block-table table { margin: 0; }

/* ===============================================================
   49. Home v1.1 - the Shopify homepage layout
   A parallel page that shows the ported Shopify homepage as it was,
   so it can be compared against the live homepage without changing
   it. The header rules here now apply site-wide; the rest is scoped
   to .vp-home11 and affects no other page. Two things this layout needs that the rest of the site does
   not: the calculator promo card, which has no equivalent anywhere
   else, and Shopify's translucent white header, which section 5 and
   section 34 replaced with a petrol bar site-wide.
   =============================================================== */

/* -- header: back to the translucent white bar -------------------
   The rest of the header already assumes a light bar - the brand is
   --ink, the links are --muted, the icon hover is --mist - so only
   the background and the two petrol-bar inversions need undoing. */
.vp-nav {
	background: rgb(255 255 255 / .92);
	border-bottom: 1px solid var(--border);
}
.vp-nav:not(.vp-nav--float) .vp-btn--primary {
	background: var(--petrol); color: #fff; border-color: var(--petrol);
}
.vp-nav:not(.vp-nav--float) .vp-btn--primary:hover {
	background: #08405A; color: #fff; border-color: #08405A;
}
.vp-nav .mobile-menu { background: #fff; border-top: 1px solid var(--border); }
.vp-nav .mobile-menu a { color: var(--ink); border-bottom: 1px solid var(--border); }

/* -- calculator promo -------------------------------------------- */
.vp-calcpromo {
	display: grid; grid-template-columns: 1.2fr .8fr;
	gap: 46px; align-items: center;
	padding: 46px 48px; border-radius: 22px;
	background: linear-gradient(120deg, var(--petrol), #0D6389);
	color: #fff;
}
.vp-calcpromo h2 { color: #fff; margin: 12px 0 14px; }
.vp-calcpromo p { color: rgb(255 255 255 / .78); margin: 0 0 26px; max-width: 460px; }
.vp-calcpromo__copy .vp-btn--light:hover { background: #e8edf2; color: var(--petrol); }

.vp-calcpromo__panel {
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .2);
	border-radius: 16px; padding: 20px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vp-calcpromo__field {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; padding: 13px 15px; margin-bottom: 11px;
	border-radius: 11px;
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .14);
}
.vp-calcpromo__field .k { font-size: 13px; color: rgb(255 255 255 / .72); }
.vp-calcpromo__field .v {
	font-family: var(--vp-font-mono); font-size: 14px;
	font-weight: 600; color: #fff; white-space: nowrap;
}
.vp-calcpromo__result {
	margin-top: 16px; padding: 14px; border-radius: 11px;
	background: #fff; color: var(--petrol); text-align: center;
	font-family: var(--vp-font-mono); font-size: 14.5px; font-weight: 600;
}

@media (max-width: 900px) {
	.vp-calcpromo { grid-template-columns: 1fr; gap: 30px; padding: 34px 26px; }
	.vp-calcpromo p { max-width: none; }
}

/* -- newsletter: back to Shopify's petrol band, centred -----------
   Section 38 repainted the band light. That stands for the live
   homepage; this restores the original for the comparison page. */
.vp-news--center { background: var(--petrol); color: #fff; text-align: center; }
.vp-news--center h2 { color: #fff; }
.vp-news--center p { color: rgb(255 255 255 / .72); margin: 0 0 24px; }
.vp-news--center .vp-news__form,
.vp-news--center .vp-news__form .wpcf7-form { justify-content: center; }
.vp-news--center .vp-news__field { flex: 0 1 340px; }
/* The field is deliberately not restyled. The storefront keeps a solid white
   input on the petrol band, and that is what section 38 already gives it.
   Section 13 translucent field belongs to the band as the theme paints it. */
.vp-news--center .vp-news__form input[type="submit"] { background: #fff; color: var(--petrol); }
.vp-news--center .vp-news__form input[type="submit"]:hover { background: #E8EDF2; }
.vp-news--center .vp-news__form .wpcf7-response-output {
	border-color: rgb(255 255 255 / .3); text-align: center;
}
.vp-news--center .vp-news__fine {
	margin: 16px 0 0; font-size: 12.5px; color: rgb(255 255 255 / .55);
}

/* Shopify's COA band uses a solid white button; section 35 made it
   translucent site-wide. Page-scoped so the live homepage keeps its own. */
.vp-home11 .vp-band .vp-btn--ondark {
	background: #fff; border-color: #fff; color: var(--petrol);
}
.vp-home11 .vp-band .vp-btn--ondark:hover {
	background: #E8EDF2; border-color: #E8EDF2; color: var(--petrol);
}

/* -- category cards ----------------------------------------------
   Four to a row, photo on top, name and subtitle on a tinted band.
   The theme has no card grid for categories - section 12 renders
   them as a numbered list - so this is new rather than a variant. */
.vp-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vp-cats .cat {
	display: block; overflow: hidden; text-decoration: none;
	border: 1px solid var(--border); border-radius: 14px;
	background: #fff; transition: transform .2s, box-shadow .2s;
}
.vp-cats .cat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--shadow); }

.vp-cats .cimg { aspect-ratio: 1 / 1.08; background: var(--mist); overflow: hidden; }
.vp-cats .cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-cats .cimg--icon {
	display: grid; place-items: center;
	background: linear-gradient(150deg, #DCEAF6, #EFF5FA);
}
.vp-cats .ic {
	width: 44px; height: 44px; border-radius: 12px;
	display: grid; place-items: center;
	background: rgb(255 255 255 / .7); color: var(--petrol);
}

.vp-cats .cbody { padding: 15px 17px 17px; background: var(--mist); }
.vp-cats .cbody b {
	display: block; font-size: 15px; font-weight: 600;
	color: var(--ink); margin-bottom: 4px;
}
.vp-cats .cbody span { display: block; font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
	.vp-cats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* -- product cards: the storefront treatment ----------------------
   Scoped to the grid, not the page, so the shop archive and related
   products keep the card they already use. The photo sits inset on a
   tinted tile, and the button takes the full width under the price. */
.vp-prods--v11 .vp-card__media {
	aspect-ratio: 1 / 1.08;
	padding: 16px 26px;
	border-bottom: 0;
	background: linear-gradient(150deg, #DCEAF6 0%, #EDF4FA 48%, #DFEDF7 100%);
}
/* The vial shots are on white; multiply lets the tinted tile show through
   instead of a white square framing each photo. */
.vp-prods--v11 .vp-card__media img { mix-blend-mode: multiply; }
.vp-prods--v11 .vp-card__body { gap: 9px; }
.vp-prods--v11 .vp-card__foot { display: block; padding-top: 4px; }
.vp-prods--v11 .vp-card__add {
	display: block; width: 100%; padding: 12px 10px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.vp-prods--v11 .vp-card__media { padding: 12px 18px; }
}

/* -- certificates band -------------------------------------------
   Flat ink, no photograph behind it, and the purity figure set large
   the way the storefront does. Its own class, so section 40's image
   and petrol overlay stay with the live homepage's .vp-band. */
.vp-coaband { background: var(--ink); color: #fff; padding: 72px 0; }
.vp-coaband .vp-wrap {
	display: grid; grid-template-columns: 1.1fr .9fr;
	gap: 56px; align-items: center;
}
.vp-coaband h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 14px; }
.vp-coaband p { color: rgb(255 255 255 / .74); margin: 0 0 26px; max-width: 46ch; }

.vp-coaband .mini {
	border: 1px solid rgb(255 255 255 / .14); border-radius: 14px;
	background: rgb(255 255 255 / .04); padding: 6px 24px;
}
.vp-coaband .rowb {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 15px 0;
	border-bottom: 1px solid rgb(255 255 255 / .12);
}
.vp-coaband .rowb:last-child { border-bottom: 0; }
.vp-coaband .k {
	font-family: var(--vp-font-mono); font-size: 12px;
	color: rgb(255 255 255 / .6);
}
.vp-coaband .val { font-family: var(--vp-font-mono); font-size: 13px; font-weight: 600; color: #fff; }
.vp-coaband .big {
	font-family: var(--vp-font-mono); font-size: 44px; font-weight: 700;
	line-height: 1; letter-spacing: -.02em; color: #fff;
}
.vp-coaband .big span { font-size: 15px; font-weight: 600; }

/* -- featured blend ----------------------------------------------
   One light card on a white section: drawn vial left, detail right. */
.vp-blend .box {
	display: grid; grid-template-columns: .9fr 1.1fr;
	border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.vp-blend .media {
	display: grid; place-items: center; padding: 26px 24px;
	background: linear-gradient(160deg, #DEEAF4 0%, #EFF4F9 60%, #E6EFF7 100%);
}
.vp-blend .media .vial { width: min(340px, 82%); }
.vp-blend .media .vial--photo { height: 300px; width: auto; max-width: 82%; object-fit: contain; filter: drop-shadow(0 20px 34px var(--shadow)); }
.vp-blend .inner {
	background: #F5F8FB; padding: 32px 54px;
	display: flex; flex-direction: column; justify-content: center;
}
.vp-blend .tag {
	align-self: flex-start;
	font-family: var(--vp-font-mono); font-size: 11px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--petrol);
	background: #E1EDF7; border-radius: 999px; padding: 7px 15px;
}
.vp-blend h2 { font-size: clamp(28px, 3.4vw, 38px); color: var(--ink); margin: 18px 0 12px; }
.vp-blend p { color: var(--muted); margin: 0 0 22px; max-width: 52ch; }
.vp-blend .comp { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.vp-blend .comp span {
	font-family: var(--vp-font-mono); font-size: 12.5px; color: var(--ink);
	background: #fff; border: 1px solid var(--border);
	border-radius: 9px; padding: 8px 13px;
}
.vp-blend .row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.vp-blend .note { font-family: var(--vp-font-mono); font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) {
	.vp-coaband .vp-wrap { grid-template-columns: 1fr; gap: 34px; }
	.vp-blend .box { grid-template-columns: 1fr; }
	.vp-blend .inner { padding: 34px 26px; }
}

/* -- FAQ: storefront cards and marker -----------------------------
   White cards with a hairline rather than the theme's tinted fill,
   and a plus that rotates into a cross rather than the circled
   chevron. The chevron was a deliberate site-wide choice, so it is
   left alone everywhere else. */
.vp-qa--v11 { max-width: 760px; margin-inline: auto; }
.vp-qa--v11 details,
.vp-qa--v11 details[open] {
	background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.vp-qa--v11 summary { padding: 18px 22px; font-size: 15px; }
.vp-qa--v11 .pl {
	flex-shrink: 0; font-family: var(--vp-font-mono);
	font-size: 20px; line-height: 1; color: var(--petrol);
	transition: transform .2s ease;
}
.vp-qa--v11 details[open] .pl { transform: rotate(45deg); }
.vp-qa--v11 .ans { padding: 0 22px 20px; }

/* Contact Form 7 injects a spinner after the submit button from JavaScript, so
   it is not in the server HTML. Its own CSS is visibility:hidden with a 24px
   box and 24px side margins, which is invisible but still occupies 72px in the
   flex row - enough to push the centred controls about 41px off centre. Taking
   it out of flow while idle centres the row on the controls people can see; it
   comes back beside the button during submission, which is when it means
   something. */
.vp-news--center .vp-news__form .wpcf7-spinner { display: none; }
.vp-news--center .vp-news__form form.submitting .wpcf7-spinner {
	display: inline-block; margin: 0 0 0 10px;
}

/* The storefront announcement runs as plain mono text with only the opening
   phrase bolded - no icons - so the bold needs to lift out of the 82% white. */
.vp-announce__msg b { color: #fff; font-weight: 600; }

/* -- white header: undo section 30 ---------------------------------
   Section 30 inverts everything inside .vp-nav to white, because the
   header surface is dark site-wide. Painting the surface white again
   for this page is only half the job - without these, the brand, the
   links and the icons stay white on white and vanish. Mirrors section
   30 rule for rule, back to the values section 5 starts from. */
.vp-nav .brand .name { color: var(--ink); }
.vp-nav .vp-mark path { fill: var(--petrol); stroke: var(--petrol); }
.vp-nav .vp-mark g line { stroke: var(--petrol); }
.vp-nav .vp-mark circle:last-of-type { fill: var(--petrol); }

.vp-nav .nav-links a { color: var(--muted); }
.vp-nav .nav-links a:hover,
.vp-nav .nav-links a.on { color: var(--ink); }

.vp-nav .icon-btn { color: var(--muted); background: transparent; }
.vp-nav .icon-btn:hover { color: var(--ink); background: var(--mist); }

.vp-nav .mobile-menu a { color: var(--ink); border-bottom: 1px solid var(--border); }
.vp-nav .mobile-menu a:hover { background: var(--mist); }

/* -- certificates hero --------------------------------------------
   A dark ink band carrying the standfirst and the three figures, with
   the white test cards straddling its bottom edge. Section 27 swapped
   it for the video banner; this puts it back. The figures were already
   drawn for a dark ground, so they are left alone. */
.vp-coa__hero { background: var(--ink); padding: 56px 0 58px; position: relative; }
.vp-coa__hero .vp-eyebrow { color: var(--sky); }
.vp-coa__hero h1 {
	font-size: clamp(30px, 4vw, 44px); font-weight: 600;
	letter-spacing: -.02em; color: #fff; margin: 14px 0 16px;
}
.vp-coa__hero p { color: rgb(255 255 255 / .74); font-size: 16px; max-width: 62ch; margin: 0; }

/* the pull is a quarter of a card; section 26 sets -70px, which was cut
   for the 400px video banner rather than this band. */
.vp-coa__hero + .vp-wrap .vp-coa__tests { margin-top: -38px; }

/* -- calculator page ----------------------------------------------
   A light centred hero with the two calculator panels straddling its
   bottom edge, the way the certificates cards straddle theirs. The
   result panel is petrol with white figures; section 16 had it on
   mist, which was the page banner's doing. */
.vp-chero {
	background: linear-gradient(180deg, var(--mist), #fff);
	padding: 60px 0 96px; text-align: center;
}
.vp-chero h1 {
	font-size: clamp(30px, 4.2vw, 46px); font-weight: 600;
	letter-spacing: -.02em; color: var(--ink); margin: 14px 0 16px;
}
.vp-chero p { color: var(--muted); font-size: 16px; max-width: 60ch; margin: 0 auto; }

.vp-section--calc { padding-top: 0; }
.vp-section--calc .vp-calc { margin-top: -68px; position: relative; z-index: 2; }

.vp-calc__inputs {
	background: #fff; border: 1px solid var(--border); border-radius: 16px;
	padding: 30px 30px 32px; box-shadow: 0 16px 40px var(--shadow);
}
.vp-calc__inputs h2 {
	font-family: var(--vp-font-mono); font-size: 12px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
	margin: 0 0 22px;
}

/* result panel: petrol, figures in white */
.vp-calc__out {
	background: linear-gradient(150deg, var(--petrol), #0A3E56);
	border: 0; border-radius: 16px; padding: 30px;
	box-shadow: 0 16px 40px var(--shadow);
}
.vp-calc__big span { color: #fff; }
.vp-calc__big small { color: rgb(255 255 255 / .72); }
.vp-calc__cap { color: rgb(255 255 255 / .8); margin: 12px 0 22px; }
.vp-calc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vp-calc__cell {
	background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18);
	border-radius: 12px; padding: 14px 16px;
}
.vp-calc__cell .k {
	font-family: var(--vp-font-mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: rgb(255 255 255 / .6); margin-bottom: 7px;
}
.vp-calc__cell .v {
	font-family: var(--vp-font-mono); font-size: 19px; font-weight: 600; color: #fff;
}
.vp-calc__out .vp-calc__note {
	color: rgb(255 255 255 / .58); font-size: 12px; line-height: 1.6; margin: 20px 0 0;
}

@media (max-width: 860px) {
	.vp-chero { padding-bottom: 76px; }
	.vp-section--calc .vp-calc { margin-top: -52px; }
	.vp-calc__grid { grid-template-columns: 1fr; }
}

/* -- calculator page: steps, tips and sign-off ---------------------
   The steps were rebuilt as a petrol box from a supplied reference;
   the storefront uses light cards on white with a petrol number chip.
   The tips are the inverse - one dark panel, not two light cards. */
.vp-steps2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vp-steps2__card {
	background: var(--mist); border: 1px solid var(--border);
	border-radius: 14px; padding: 24px 24px 26px;
}
.vp-steps2__card .n {
	width: 34px; height: 34px; border-radius: 10px;
	background: var(--petrol); color: #fff;
	font-family: var(--vp-font-mono); font-size: 14px; font-weight: 600;
	display: grid; place-items: center; margin-bottom: 18px;
}
.vp-steps2__card b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.vp-steps2__card p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }

.vp-tips {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px;
	background: var(--ink); border-radius: 18px; padding: 40px 44px;
}
.vp-tips h3 { font-size: 16px; color: #fff; margin: 0 0 18px; }
.vp-tips ul { margin: 0; padding: 0; list-style: none; }
.vp-tips li {
	position: relative; padding-left: 26px; margin-bottom: 14px;
	color: rgb(255 255 255 / .76); font-size: 13.5px; line-height: 1.65;
}
.vp-tips li:last-child { margin-bottom: 0; }
.vp-tips li::before {
	content: ""; position: absolute; left: 0; top: 3px;
	width: 12px; height: 12px; border-radius: 3px;
	border: 1.5px solid var(--sky);
}

/* sign-off: a full-width petrol band, not a tinted section */
.vp-calccta { background: var(--petrol); color: #fff; padding: 72px 0; text-align: center; }
.vp-calccta h2 { color: #fff; margin: 0 0 10px; }
.vp-calccta p { color: rgb(255 255 255 / .78); margin: 0 0 26px; }

@media (max-width: 860px) {
	.vp-steps2 { grid-template-columns: 1fr; gap: 14px; }
	.vp-tips { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; }
}


/* -- contact page --------------------------------------------------
   Light centred hero, then a white form card beside a dark panel of
   other contact routes, then the quick-answers accordion. Replaces
   the .vp-ct layout, which sat under the video banner. */
.vp-phero,
.vp-contact__hero {
	background: linear-gradient(180deg, var(--mist), #fff);
	padding: 60px 0 54px; text-align: center;
	border-bottom: 1px solid var(--border);
}
.vp-phero h1,
.vp-contact__hero h1 {
	font-size: clamp(30px, 4.2vw, 46px); font-weight: 600;
	letter-spacing: -.02em; color: var(--ink); margin: 14px 0 16px;
}
.vp-phero p,
.vp-contact__hero p { color: var(--muted); font-size: 16px; max-width: 56ch; margin: 0 auto; }

.vp-contact__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: stretch; }
.vp-contact__card {
	background: #fff; border: 1px solid var(--border);
	border-radius: 16px; padding: 34px 36px 36px;
}
.vp-contact__card h2 { font-size: 26px; color: var(--ink); margin: 0 0 26px; }

/* the routes panel */
.vp-contact__card--info { background: var(--ink); border-color: var(--ink); padding: 30px 32px; }
.vp-contact__card--info h3 { font-size: 17px; color: #fff; margin: 0 0 8px; }
.vp-contact__block {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / .12);
}
.vp-contact__block:last-child { border-bottom: 0; padding-bottom: 0; }
.vp-contact__ic {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
	display: grid; place-items: center;
	background: rgb(56 189 248 / .14); color: var(--sky);
}
.vp-contact__block b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 3px; }
.vp-contact__block a, .vp-contact__block span { color: rgb(255 255 255 / .72); font-size: 13.5px; text-decoration: none; }
.vp-contact__block a:hover { color: #fff; text-decoration: underline; }

/* CF7 inside the form card */
.vp-contact__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vp-contact__field { margin-bottom: 18px; }
.vp-contact__field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.vp-contact__card input[type="text"],
.vp-contact__card input[type="email"],
.vp-contact__card select,
.vp-contact__card textarea {
	box-sizing: border-box; width: 100%;
	font-family: inherit; font-size: 15px; color: var(--ink);
	background: var(--mist); border: 1px solid var(--border);
	border-radius: 10px; padding: 12px 14px;
}
.vp-contact__card textarea { min-height: 130px; resize: vertical; }
.vp-contact__card input:focus, .vp-contact__card select:focus, .vp-contact__card textarea:focus {
	outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol);
}
.vp-contact__card input[type="submit"] {
	width: 100%; font-family: inherit; font-size: 15px; font-weight: 600;
	color: #fff; background: var(--petrol); border: 0; border-radius: 10px;
	padding: 14px; cursor: pointer; transition: background .2s;
}
.vp-contact__card input[type="submit"]:hover { background: var(--petrol-d); }
.vp-contact__note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.6; }
.vp-contact__card .wpcf7-spinner { display: none; }
.vp-contact__card form.submitting .wpcf7-spinner { display: inline-block; }

@media (max-width: 900px) {
	.vp-contact__grid { grid-template-columns: 1fr; }
	.vp-contact__two { grid-template-columns: 1fr; gap: 0; }
	.vp-contact__card { padding: 26px 22px 28px; }
}

/* Both cards share the row height, so the routes panel gets taller than
   its content needs. Letting the four rows share the surplus keeps the
   dividers evenly spaced instead of leaving a gap under the last one. */
.vp-contact__card--info { display: flex; flex-direction: column; }
.vp-contact__card--info h3 { flex: 0 0 auto; }
.vp-contact__block { flex: 1 1 auto; align-items: center; }

/* -- search modal --------------------------------------------------
   Replaces the inline panel that used to drop under the header icon.
   Printed in wp_footer, so none of this markup passes through the
   header's wpautop. */
.vp-smodal { position: fixed; inset: 0; z-index: 200; display: grid; justify-items: center; }
/* display:grid above outranks the browser's [hidden] rule, so the modal would
   sit open on every page load without this. */
.vp-smodal[hidden] { display: none; }
.vp-smodal__backdrop {
	position: absolute; inset: 0;
	background: rgb(11 42 58 / .45);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.vp-smodal__panel {
	position: relative; z-index: 1;
	width: min(760px, calc(100vw - 32px)); margin-top: 6vh;
	max-height: 84vh; display: flex; flex-direction: column;
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 30px 70px rgb(11 42 58 / .35);
}
body.vp-smodal-open { overflow: hidden; }

.vp-smodal__bar {
	display: flex; align-items: center; gap: 12px;
	padding: 18px 20px; border-bottom: 1px solid var(--border);
	color: var(--muted); flex-shrink: 0;
}
.vp-smodal__bar input {
	flex: 1; min-width: 0; border: 0; background: none;
	font-family: inherit; font-size: 17px; color: var(--ink); padding: 4px 0;
}
.vp-smodal__bar input:focus { outline: none; }
.vp-smodal__bar input::placeholder { color: #9aa8b6; }
.vp-smodal__x {
	flex-shrink: 0; border: 0; background: none; cursor: pointer;
	color: var(--muted); display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 8px;
}
.vp-smodal__x:hover { background: var(--mist); color: var(--ink); }

.vp-smodal__body { overflow-y: auto; padding: 22px 24px 26px; }
.vp-smodal__group + .vp-smodal__group { margin-top: 26px; }
.vp-smodal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.vp-smodal__head h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.vp-smodal__clear {
	border: 0; background: none; cursor: pointer; padding: 0;
	font-family: inherit; font-size: 13.5px; color: var(--muted);
}
.vp-smodal__clear:hover { color: var(--petrol); text-decoration: underline; }
.vp-smodal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vp-smodal__empty { color: var(--muted); font-size: 14px; margin: 4px 0 0; }

.vp-scard { display: block; text-decoration: none; }
/* same trap as the modal: display:block outranks the UA [hidden] rule, so the
   filter set the attribute and nothing disappeared. */
.vp-scard[hidden] { display: none; }
.vp-scard__ph {
	display: block; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: 10px; background: var(--mist); margin-bottom: 10px;
}
.vp-scard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-scard__name { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.4; margin-bottom: 4px; }
.vp-scard:hover .vp-scard__name { color: var(--petrol); }
.vp-scard__price { display: block; font-family: var(--vp-font-mono); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vp-scard__price .amount, .vp-scard__price bdi { color: inherit; }

@media (max-width: 760px) {
	.vp-smodal__panel { margin-top: 0; max-height: 100vh; border-radius: 0; width: 100vw; }
	.vp-smodal__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -- product detail page ------------------------------------------
   Replaces WooCommerce's default single-product layout and its tab
   strip with the storefront layout: breadcrumb, gallery with a COA
   badge, buy box carrying the assurances and certificate summary,
   five accordions, a specs table, a compact certificate band, and a
   sticky add-to-cart bar. */
.vp-pdp-sec .crumb { border-bottom: 1px solid var(--border); background: var(--mist); }
.vp-pdp-sec .crumb .vp-wrap { padding-block: 13px; font-size: 13px; color: var(--muted); }
.vp-pdp-sec .crumb a { color: var(--muted); text-decoration: none; }
.vp-pdp-sec .crumb a:hover { color: var(--petrol); }
.vp-pdp-sec .crumb .sep { margin: 0 8px; color: #b8c4d0; }

.vp-pdp-sec .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 44px 0 60px; }
.vp-pdp-sec .gallery { align-self: start; position: sticky; top: 96px; }

.vp-pdp-sec .g-main {
	position: relative; border: 1px solid var(--border); border-radius: 16px;
	overflow: hidden; background: #fff; aspect-ratio: 1 / 1;
}
.vp-pdp-sec .g-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-pdp-sec .verify {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--vp-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
	color: var(--ok); background: #fff; border: 1px solid var(--border);
	border-radius: 20px; padding: 6px 11px;
}
.vp-pdp-sec .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vp-pdp-sec .thumb {
	width: 78px; height: 78px; padding: 0; cursor: pointer; overflow: hidden;
	border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.vp-pdp-sec .thumb.active { border-color: var(--petrol); box-shadow: 0 0 0 1px var(--petrol); }
.vp-pdp-sec .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.vp-pdp-sec .pinfo h1 { font-size: clamp(26px, 3.2vw, 36px); color: var(--ink); margin: 12px 0 14px; letter-spacing: -.02em; }
.vp-pdp-sec .rating { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.vp-pdp-sec .lead p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; }

.vp-pdp-sec .vp-features { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; }
.vp-pdp-sec .vp-features li {
	display: flex; align-items: center; gap: 12px;
	font-size: 13.5px; color: var(--ink);
	padding: 6px 0;
}
.vp-pdp-sec .vp-features li:first-child { padding-top: 0; }
.vp-pdp-sec .vp-features svg {
	flex-shrink: 0; color: var(--petrol);
	width: 26px; height: 26px; padding: 6px; box-sizing: border-box;
	background: var(--sky-soft); border-radius: 50%;
}

.vp-pdp-sec .bundle-box {
	background: var(--mist); border: 1px solid var(--border); border-radius: 12px;
	padding: 14px 16px; margin-bottom: 18px;
}
.vp-pdp-sec .bundle-box__head {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 11px;
}
.vp-pdp-sec .bundle-box__head svg { color: var(--petrol); flex-shrink: 0; }
.vp-pdp-sec .bundle-box__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vp-pdp-sec .bundle-box__table th {
	text-align: left; font-weight: 600; color: var(--muted);
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
	padding: 0 8px 7px; border-bottom: 1px solid var(--border);
}
.vp-pdp-sec .bundle-box__table td {
	padding: 8px; color: var(--ink); border-bottom: 1px solid var(--border);
	font-family: var(--vp-font-mono);
}
.vp-pdp-sec .bundle-box__table tr:last-child td { border-bottom: 0; }
.vp-pdp-sec .bundle-box__table tr.is-current td {
	background: #fff; position: relative;
}
.vp-pdp-sec .bundle-box__table tr.is-current td:first-child { border-radius: 8px 0 0 8px; }
.vp-pdp-sec .bundle-box__table tr.is-current td:last-child { border-radius: 0 8px 8px 0; }
.vp-pdp-sec .bundle-box__table tr.is-current td:first-child::before {
	content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px;
	background: var(--petrol); border-radius: 3px 0 0 3px;
}
.vp-pdp-sec .bundle-box__table tr.is-current td { font-weight: 600; color: var(--ink); }
.vp-pdp-sec .bundle-box__table th:not(:first-child), .vp-pdp-sec .bundle-box__table td:not(:first-child) { text-align: left; }
.vp-pdp-sec .bundle-box__table td:last-child { color: var(--petrol); }
.vp-pdp-sec .bundle-box__table .amount, .vp-pdp-sec .bundle-box__table bdi { color: inherit; }
.vp-pdp-sec .bundle-box__note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }

.vp-pdp-sec .price-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.vp-pdp-sec .price { font-family: var(--vp-font-mono); font-size: 27px; font-weight: 600; color: var(--ink); }
.vp-pdp-sec .price .amount, .vp-pdp-sec .price bdi { color: inherit; }
.vp-pdp-sec .instock { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ok); }
.vp-pdp-sec .instock i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.vp-pdp-sec .instock.out { color: var(--muted); }
.vp-pdp-sec .instock.out i { background: var(--muted); }

.vp-pdp-sec .scarcity {
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 500; color: #B45309;
	background: #FEF3C7; border: 1px solid #FDE68A;
	border-radius: 8px; padding: 8px 12px; margin: 0 0 18px;
}
.vp-pdp-sec .scarcity svg { flex-shrink: 0; }
.vp-pdp-sec .scarcity--ok { color: var(--petrol); background: var(--mist); border-color: var(--border); }

.vp-pdp-sec .opt { margin-bottom: 20px; }
.vp-pdp-sec .opt-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.vp-pdp-sec .variant {
	display: inline-block; font-family: var(--vp-font-mono); font-size: 13.5px;
	border: 1.5px solid var(--petrol); border-radius: 10px; padding: 9px 16px; color: var(--petrol);
}

.vp-pdp-sec .buy-row { display: flex; gap: 12px; margin-bottom: 20px; }
.vp-pdp-sec .qty {
	display: flex; align-items: center; flex-shrink: 0;
	border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
}
.vp-pdp-sec .qty button {
	width: 40px; height: 46px; border: 0; background: #fff; cursor: pointer;
	font-size: 17px; color: var(--muted);
}
.vp-pdp-sec .qty button:hover { background: var(--mist); color: var(--ink); }
.vp-pdp-sec .qty input[type="hidden"] { display: none; }
.vp-pdp-sec .qty input[type="number"] {
	width: 44px; height: 46px; border: 0; text-align: center; box-sizing: border-box;
	font-family: var(--vp-font-mono); font-size: 15px; color: var(--ink); background: #fff;
	-moz-appearance: textfield;
}
.vp-pdp-sec .qty input[type="number"]::-webkit-outer-spin-button,
.vp-pdp-sec .qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-pdp-sec .buy-row .vp-btn { flex: 1; justify-content: center; padding: 14px; font-size: 15px; }

.vp-pdp-sec .assure { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.vp-pdp-sec .assure .a { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.vp-pdp-sec .assure svg { color: var(--petrol); flex-shrink: 0; }

.vp-pdp-sec .coa-quick {
	display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
	background: var(--mist); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.vp-pdp-sec .coa-quick .qr { flex-shrink: 0; color: var(--petrol); display: grid; place-items: center; }
.vp-pdp-sec .coa-quick b { display: block; font-size: 13.5px; color: var(--ink); }
.vp-pdp-sec .coa-quick span { font-family: var(--vp-font-mono); font-size: 11.5px; color: var(--muted); }
.vp-pdp-sec .coa-quick > div:nth-of-type(2) { flex: 1; min-width: 0; }
.vp-pdp-sec .coa-quick a { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--petrol); text-decoration: none; }
.vp-pdp-sec .coa-quick a:hover { text-decoration: underline; }

.vp-pdp-sec .pdp-acc { max-width: none; }
.vp-pdp-sec .pdp-acc .ans ul { margin: 0; padding-left: 20px; }
.vp-pdp-sec .pdp-acc .ans li { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 6px; }
.vp-pdp-sec .pdp-acc .ans a { color: var(--petrol); font-weight: 500; }

.vp-specs { background: var(--mist); padding: 62px 0; }
.vp-specs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vp-specs__row {
	background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
}
.vp-specs__row .k {
	display: block; font-family: var(--vp-font-mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.vp-specs__row .v { display: block; font-family: var(--vp-font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }

/* -- product page: trust band, between specs and the certificate band -- */
.vp-pdp-trust { background: #fff; padding: 56px 0; }
.vp-pdp-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vp-pdp-trust .t { text-align: center; }
.vp-pdp-trust .t svg { color: var(--petrol); margin-bottom: 14px; }
.vp-pdp-trust .t b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.vp-pdp-trust .t span { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.vp-pdp-trust__note { text-align: center; font-size: 13px; color: var(--muted); margin: 36px 0 0; }
.vp-pdp-trust__note a { color: var(--petrol); }

@media (max-width: 700px) {
	.vp-pdp-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

.vp-coaband--compact { padding: 56px 0; }
.vp-coaband--compact h2 { font-size: clamp(22px, 2.8vw, 30px); }
.vp-coaband--compact p { margin-bottom: 22px; }

.sticky-buy {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: rgb(255 255 255 / .97); border-top: 1px solid var(--border);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 -8px 24px rgb(11 42 58 / .08);
}
.sticky-buy[hidden] { display: none; }
.sticky-buy .vp-wrap { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.sticky-buy .nm { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.sticky-buy .pr { margin-left: auto; font-family: var(--vp-font-mono); font-weight: 600; color: var(--ink); }
.sticky-buy .pr .amount, .sticky-buy .pr bdi { color: inherit; }

@media (max-width: 900px) {
	.vp-pdp-sec .pdp { grid-template-columns: 1fr; gap: 30px; padding-top: 28px; }
	.vp-pdp-sec .gallery { position: static; }
	.vp-specs__grid { grid-template-columns: repeat(2, 1fr); }
	.sticky-buy .nm { display: none; }
}

/* -- product detail: corrections against the storefront screenshots
   The breadcrumb band, the spec card spacing and the variant chip were
   my own reading rather than a port. These match what the reference
   actually shows. */

/* breadcrumb sits on white, not on a tinted band */
.vp-pdp-sec .crumb .vp-wrap { padding-block: 16px; }

/* the selected size reads as a filled chip, the rest stay plain outlines */
.vp-pdp-sec .variants { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-pdp-sec .variant {
	background: #fff; border-color: var(--border); color: var(--muted);
	padding: 12px 20px; border-radius: 9px; font-weight: 600;
	cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.vp-pdp-sec button.variant:hover:not(.active):not(:disabled) {
	border-color: var(--petrol); color: var(--petrol);
}
.vp-pdp-sec .variant.active {
	background: #E8F2FA; border-color: var(--petrol); color: var(--petrol);
	box-shadow: inset 0 0 0 1px var(--petrol);
}
.vp-pdp-sec .variant:disabled {
	cursor: not-allowed; opacity: .45; text-decoration: line-through;
}

/* spec cards are considerably roomier than I had them: more padding,
   a bigger gap under the label, and a larger value */
.vp-specs__grid { gap: 20px; }
.vp-specs__row { padding: 26px 24px; border-radius: 10px; box-shadow: 0 1px 2px rgb(15 40 60 / .04); }
.vp-specs__row .k { font-size: 11px; letter-spacing: .13em; margin-bottom: 26px; }
.vp-specs__row .v { font-size: 17px; }

/* -- product detail: matched to the storefront screenshots --------- */

/* breadcrumb sits on the tinted band after all */
.vp-pdp-sec .crumb { background: var(--mist); border-bottom: 1px solid var(--border); }

/* the gallery panel is a soft blue field, not a white card */
.vp-pdp-sec .g-main {
	border: 0; border-radius: 16px;
	background: linear-gradient(160deg, #E7F0F8, #F4F8FC);
}
.vp-pdp-sec .g-main img { padding: 26px; box-sizing: border-box; }
.vp-pdp-sec .verify { color: var(--ok); border: 0; box-shadow: 0 2px 8px rgb(15 40 60 / .1); }

/* Buy it now sits under the add-to-cart row, full width, in ink */
.vp-pdp-sec .vp-buynow {
	display: block; width: 100%; text-align: center;
	background: var(--ink); color: #fff; border-color: var(--ink);
	padding: 15px; font-size: 15px; border-radius: 11px;
}
.vp-pdp-sec .vp-buynow:hover { background: #06202c; color: #fff; border-color: #06202c; }
.vp-pdp-sec form.buy { margin-bottom: 0; }

/* assurances: three centred columns with the icon above the label,
   fenced by hairlines top and bottom */
.vp-pdp-sec .assure {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
	margin: 26px 0; padding: 22px 0;
	border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.vp-pdp-sec .assure .a {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	text-align: center; font-size: 13px; color: var(--muted);
}
.vp-pdp-sec .assure svg { width: 20px; height: 20px; }

/* the certificate card carries the QR in its own white tile */
.vp-pdp-sec .coa-quick { padding: 18px; border-radius: 12px; margin-bottom: 26px; }
.vp-pdp-sec .coa-quick .qr {
	width: 56px; height: 56px; border-radius: 10px;
	background: #fff; border: 1px solid var(--border);
}
.vp-pdp-sec .coa-quick .qr svg { width: 28px; height: 28px; }
.vp-pdp-sec .coa-quick b { font-size: 15px; margin-bottom: 3px; }
.vp-pdp-sec .coa-quick span { font-size: 13px; font-family: var(--vp-font-sans); }
.vp-pdp-sec .coa-quick a { font-size: 14px; }

/* the accordion block is fenced from the card above it */
.vp-pdp-sec .pdp-acc { border-top: 1px solid var(--border); padding-top: 8px; }
.vp-pdp-sec .pdp-acc details { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0; }
.vp-pdp-sec .pdp-acc summary { padding: 20px 2px; font-size: 16px; }
.vp-pdp-sec .pdp-acc .ans { padding: 0 2px 20px; }

/* -- side cart -----------------------------------------------------
   Slides in from the right over a dimmed page. Printed in wp_footer,
   so none of it goes through the header's autop. */
.vp-cd { position: fixed; inset: 0; z-index: 210; }
.vp-cd[hidden] { display: none; }
.vp-cd__backdrop {
	position: absolute; inset: 0;
	background: rgb(11 42 58 / .4);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.vp-cd__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(420px, 100vw);
	background: #fff; display: flex; flex-direction: column;
	box-shadow: -12px 0 40px rgb(11 42 58 / .18);
}
body.vp-cd-open { overflow: hidden; }
.vp-cd.is-busy .vp-cd__body { opacity: .55; pointer-events: none; }

.vp-cd__head {
	display: flex; align-items: center; gap: 12px;
	padding: 22px 24px 18px; flex-shrink: 0;
}
.vp-cd__head h2 {
	display: flex; align-items: center; gap: 10px;
	font-size: 25px; color: var(--ink); margin: 0;
}
.vp-cd__count {
	display: grid; place-items: center; min-width: 24px; height: 24px;
	padding: 0 7px; border-radius: 999px; background: var(--mist);
	font-family: var(--vp-font-mono); font-size: 12px; font-weight: 600; color: var(--muted);
}
.vp-cd__x {
	margin-left: auto; flex-shrink: 0; width: 34px; height: 34px;
	border: 0; border-radius: 50%; background: var(--mist); color: var(--muted);
	display: grid; place-items: center; cursor: pointer;
}
.vp-cd__x:hover { background: #e4ecf3; color: var(--ink); }

.vp-cd__body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.vp-cd__items { padding: 0 24px; }

.vp-cd__item { display: flex; gap: 14px; padding: 14px 0; }
.vp-cd__ph {
	flex-shrink: 0; width: 62px; height: 62px; overflow: hidden;
	border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.vp-cd__ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-cd__info { flex: 1; min-width: 0; }
.vp-cd__name { display: block; font-size: 15px; color: var(--petrol); text-decoration: none; }
.vp-cd__name:hover { text-decoration: underline; }
.vp-cd__var, .vp-cd__unit { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.vp-cd__line { flex-shrink: 0; font-size: 14.5px; color: var(--ink); }
.vp-cd__line .amount, .vp-cd__line bdi { color: inherit; }
.vp-cd__unit .amount, .vp-cd__unit bdi { color: inherit; }
.vp-cd__unit del, .vp-cd__line del { color: var(--muted); opacity: .75; }
.vp-cd__line del { display: block; font-size: 12.5px; text-align: right; }
.vp-cd__save {
	display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 20px;
	font-size: 12px; font-weight: 600; color: var(--ok);
	background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.vp-cd__save .amount, .vp-cd__save bdi { color: inherit; }
.vp-cd__subrow--save, .vp-cd__subrow--save span { color: var(--ok); font-weight: 600; }

.vp-cd__qtyrow { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.vp-cd__qty {
	display: flex; align-items: center;
	border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
}
.vp-cd__qty button {
	width: 32px; height: 34px; border: 0; background: #fff; cursor: pointer;
	color: var(--muted); font-size: 15px;
}
.vp-cd__qty button:hover { background: var(--mist); color: var(--ink); }
.vp-cd__qty span {
	min-width: 30px; text-align: center;
	font-family: var(--vp-font-mono); font-size: 14px; color: var(--ink);
}
.vp-cd__rm {
	border: 0; background: none; cursor: pointer; color: var(--muted);
	display: grid; place-items: center; padding: 4px;
}
.vp-cd__rm:hover { color: #b91c1c; }

.vp-cd__foot { margin-top: auto; padding: 0 24px 24px; }
.vp-cd__disc { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vp-cd__disc summary {
	list-style: none; cursor: pointer; display: flex; align-items: center;
	justify-content: space-between; padding: 16px 0;
	font-size: 14px; font-weight: 600; color: var(--ink);
}
.vp-cd__disc summary::-webkit-details-marker { display: none; }
.vp-cd__disc .pl { font-family: var(--vp-font-mono); font-size: 17px; color: var(--muted); transition: transform .2s; }
.vp-cd__disc[open] .pl { transform: rotate(45deg); }
.vp-cd__discbody { display: flex; gap: 8px; padding-bottom: 16px; }
.vp-cd__discbody input {
	flex: 1; min-width: 0; box-sizing: border-box;
	font-family: inherit; font-size: 14px; color: var(--ink);
	background: var(--mist); border: 1px solid var(--border);
	border-radius: 9px; padding: 10px 12px;
}
.vp-cd__discbody .vp-btn { flex-shrink: 0; padding: 10px 16px; font-size: 13.5px; }

.vp-cd__subrow {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 6px 0; font-size: 13.5px; color: var(--muted);
}
.vp-cd__subrow .amount, .vp-cd__subrow bdi { color: inherit; }
.vp-cd__shipfree { color: var(--ok); font-weight: 600; }

.vp-cd__total {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 10px 0 6px; margin-top: 4px; border-top: 1px solid var(--border);
	font-size: 16px; font-weight: 600; color: var(--ink);
}
.vp-cd__total .amount, .vp-cd__total bdi { color: inherit; }
.vp-cd__note { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.vp-cd__checkout { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 15px; font-size: 15px; }

.vp-cd__empty { padding: 60px 24px; text-align: center; }
.vp-cd__empty p { color: var(--muted); margin: 0 0 20px; }

/* -- cart drawer: free shipping progress bar ---------------------- */
.vp-cd__ship { padding: 16px 24px 4px; }
.vp-cd__shipmsg { margin: 0 0 9px; font-size: 13px; color: var(--muted); }
.vp-cd__shipmsg strong { color: var(--ink); font-weight: 600; }
.vp-cd__shipmsg--done { display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; }
.vp-cd__shipmsg--done svg { flex-shrink: 0; }
.vp-cd__shiptrack { height: 5px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.vp-cd__shipfill { display: block; height: 100%; background: linear-gradient(90deg, var(--petrol), var(--sky)); transition: width .3s ease; }

/* -- cart drawer: frequently-bought-together upsells --------------- */
.vp-cd__upsell { padding: 4px 24px 8px; border-top: 1px solid var(--border); }
.vp-cd__upsell h3 {
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); margin: 16px 0 12px;
}
.vp-cd__upitem { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.vp-cd__upph {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px;
	background: var(--mist); border: 1px solid var(--border); overflow: hidden;
	display: grid; place-items: center;
}
.vp-cd__upph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-cd__upinfo { flex: 1; min-width: 0; }
.vp-cd__upname { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.vp-cd__upname:hover { text-decoration: underline; }
.vp-cd__upprice { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vp-cd__upadd { flex-shrink: 0; padding: 7px 14px; font-size: 12.5px; }

/* -- cart drawer: payment method icons ------------------------------ */
.vp-cd__pay {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;
}
.vp-cd__paytag {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 6px;
	border: 1px solid transparent; overflow: hidden; white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height: 1;
}
.vp-cd__paytag svg { display: block; flex-shrink: 0; }
/* Chip tones. Each mark carries its own brand colour, so chips stay white
   apart from Amex and Klarna, whose logos are knockouts on a brand fill. */
.vp-cd__paytag--plain  { background: #fff; border-color: #e2e2e2; color: #111; }
.vp-cd__paytag--amex   { background: #006FCF; border-color: #006FCF; color: #fff; }
.vp-cd__paytag--klarna { background: #FFB3C7; border-color: #FFB3C7; color: #0B051D; }

.vp-pay__ideal { display: inline-flex; align-items: baseline; font-size: 9px; font-weight: 800; padding: 2px; color: #CC0066; background: #fff; border: 1px solid #e8ccd9; border-radius: 2px; }
.vp-pay__ideal i { font-style: normal; font-weight: 700; color: #0B0B0B; }
.vp-pay__bar { width: 1px; height: 14px; background: #d8d8d8; }
.vp-pay__wero { font-size: 11px; font-weight: 800; letter-spacing: -.02em; color: #2B1A54; }
.vp-pay__wero em { font-style: normal; color: #E5007D; }
.vp-pay__visa { font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: .02em; color: #1434CB; }
.vp-pay__amex { font-size: 10px; font-weight: 900; line-height: .95; text-align: center; letter-spacing: .02em; color: #fff; }
.vp-pay__klarna { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: #0B051D; }
.vp-pay__apple-t { font-size: 14px; font-weight: 600; color: #000; }
.vp-cd__paytag--plain svg[viewBox="0 0 24 28"] { color: #000; }
.vp-pay__gpay { font-size: 14px; font-weight: 500; color: #5F6368; }


/* -- checkout: the storefront layout --------------------------------
   A mist header carrying only the logo and a bag, then two columns
   split by a hairline: the form on white at the left, the order
   summary on mist at the right. Class names are WooCommerce Blocks
   own, taken from its checkout.css rather than guessed - the block
   checkout hydrates client-side, so they never appear in the served
   HTML. */

/* -- header: logo and bag only -- */
.woocommerce-checkout .vp-announce,
.woocommerce-checkout .vp-nav .nav-links,
.woocommerce-checkout .vp-nav .search-bar,
.woocommerce-checkout .vp-nav .search-row,
.woocommerce-checkout .vp-nav .burger,
.woocommerce-checkout .vp-nav .nav-right .vp-btn,
.woocommerce-checkout .vp-nav .nav-right > a[aria-label="Account"] { display: none; }
.woocommerce-checkout .vp-nav { background: var(--mist); border-bottom: 1px solid var(--border); }
.woocommerce-checkout .vp-nav .vp-wrap { height: 92px; }
.woocommerce-checkout .vp-nav .nav-right { margin-left: auto; }
/* the storefront's checkout wordmark carries the descriptor beneath it */
.woocommerce-checkout .vp-nav .brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.woocommerce-checkout .vp-nav .brand .name::after {
	content: "Research peptides"; display: block;
	font-family: var(--vp-font-mono); font-size: 8.5px; font-weight: 500;
	letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
	margin-top: 4px;
}

/* -- shell: full-bleed two columns -- */
.woocommerce-checkout:not(.woocommerce-order-received) .wp-site-blocks main { padding: 0; max-width: none; }
.woocommerce-checkout:not(.woocommerce-order-received) .wp-block-post-title { display: none; }
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: none; margin: 0; padding: 0;
}
.wc-block-checkout__main {
	background: #fff; border-right: 1px solid var(--border);
	padding: 44px 24px 80px;
}
.wc-block-checkout__main > * { max-width: 564px; margin-inline: auto; }
.wc-block-checkout__sidebar {
	background: var(--mist); padding: 44px 24px 80px;
	border: 0 !important; box-shadow: none !important;
	position: static !important; top: auto !important;
}
.wc-block-checkout__sidebar > * {
	max-width: 460px; margin-inline: auto;
	border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}

/* -- express payment + the OR rule -- */
.wc-block-components-express-payment__title-container { justify-content: center; }
.wc-block-components-express-payment__title,
.wc-block-components-checkout-step__title { color: var(--ink); font-family: var(--vp-font-sans); }
.wc-block-components-express-payment-continue-rule { color: var(--muted); font-size: 13px; }

/* -- steps -- */
.wc-block-checkout__form .wc-block-components-checkout-step { border: 0; padding: 0 0 30px; }
.wc-block-components-checkout-step__heading { margin-bottom: 14px; }
.wc-block-components-checkout-step__title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.wc-block-components-checkout-step__description { color: var(--muted); font-size: 13.5px; }

/* -- fields -- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-textarea {
	box-sizing: border-box; font-family: inherit; font-size: 15px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 9px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea:focus {
	outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol);
}
.wc-block-components-text-input label,
.wc-block-components-combobox label { color: var(--muted); }

/* -- shipping-method placeholder panel -- */
.wc-block-components-shipping-rates-control__no-results-notice,
.wc-block-components-notice-banner.is-info {
	background: var(--mist); border: 1px solid var(--border); border-radius: 10px;
	color: var(--muted); text-align: center;
}

/* -- payment method rows and billing radios -- */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border: 1px solid var(--border) !important; border-radius: 10px; background: #fff;
	box-shadow: none !important; outline: none !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--petrol) !important; background: #E8F2FA;
}

/* -- pay now: ink, full width -- */
.wc-block-components-checkout-place-order-button {
	width: 100%; background: var(--ink); border: 0; border-radius: 10px;
	font-family: inherit; font-size: 15.5px; font-weight: 600; color: #fff; padding: 17px;
}
.wc-block-components-checkout-place-order-button:hover { background: #06202c; }

/* -- order summary sits on the mist, no card of its own -- */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary { background: none; border: 0; padding: 0; }
.wc-block-components-order-summary-item__image img {
	border-radius: 8px; border: 1px solid var(--border); background: #fff;
}
/* The corner badge is clipped by its own container regardless of size or
   color, so the real quantity is shown as text instead (.vp-os-qty, added by
   inc/cart.php's vitrapept_checkout_qty_script). */
.wc-block-components-order-summary-item__quantity { display: none !important; }
/* The short product description under the name is noise in a checkout
   summary - the name and price already say what's in the order. */
.wc-block-components-product-metadata__description { display: none !important; }
.wc-block-components-product-name { color: var(--ink); }
.vp-os-qty { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.wc-block-components-totals-item__label { color: var(--muted); font-size: 14.5px; }
.wc-block-components-totals-item__value { font-family: var(--vp-font-mono); color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--ink); font-size: 17px; font-weight: 600; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 21px; font-weight: 600; }

/* discount field and Apply sit on one rounded row */
.wc-block-components-totals-coupon__form { gap: 0; }
.wc-block-components-totals-coupon__input input {
	background: #fff; border: 1px solid var(--border);
	border-radius: 9px 0 0 9px; font-size: 14.5px;
}
.wc-block-components-totals-coupon__button {
	border-radius: 0 9px 9px 0; background: #fff;
	border: 1px solid var(--border); border-left: 0; color: var(--muted);
}
.wc-block-components-totals-coupon__button:hover { color: var(--ink); background: var(--mist); }

@media (max-width: 900px) {
	.wc-block-checkout__main { border-right: 0; border-bottom: 1px solid var(--border); padding: 28px 20px 40px; }
	.wc-block-checkout__sidebar { padding: 28px 20px 56px; }
	.woocommerce-checkout .vp-nav .vp-wrap { height: 76px; }
}

/* The storefront ends its checkout with a privacy link under the form
   rather than the site footer, so this sits to the form column width. */
.vp-cofoot {
	max-width: 564px; margin: 0 auto; padding: 0 24px 60px;
	border-top: 1px solid var(--border); padding-top: 22px;
}
.vp-cofoot a { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .vp-cofoot { padding-inline: 20px; } }

/* -- sign in --------------------------------------------------------
   The storefront strips this page to a centred logo, a narrow column
   and a privacy link. Scoped to .vp-signin, which is only set when the
   account page is viewed logged out - the dashboard keeps the site
   chrome. */

/* chrome: logo only, centred, and no footer */
body.vp-signin .vp-announce,
body.vp-signin .vp-nav .nav-links,
body.vp-signin .vp-nav .nav-right,
body.vp-signin .vp-ft { display: none; }
body.vp-signin .vp-nav { background: #fff; border-bottom: 0; }
body.vp-signin .vp-nav .vp-wrap { justify-content: center; height: 104px; }
body.vp-signin .vp-nav .brand { flex-direction: column; gap: 4px; }
body.vp-signin .vp-nav .brand .name::after {
	content: "Research peptides"; display: block; text-align: center;
	font-family: var(--vp-font-mono); font-size: 8.5px; font-weight: 500;
	letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
	margin-top: 4px;
}

/* the column */
body.vp-signin .wp-site-blocks main { padding-block: 60px 40px; }
body.vp-signin .wp-block-post-title { display: none; }
body.vp-signin .woocommerce { max-width: 470px; margin-inline: auto; }
body.vp-signin .woocommerce form.login {
	border: 0; padding: 0; margin: 0; border-radius: 0;
}
body.vp-signin h2 {
	font-size: 30px; font-weight: 600; letter-spacing: -.02em;
	color: var(--ink); margin: 0 0 6px;
}
.vp-signin__sub { color: var(--muted); font-size: 15px; margin: 0 0 26px; }

/* fields */
body.vp-signin .woocommerce-form-row { margin-bottom: 16px; padding: 0; }
body.vp-signin .woocommerce-form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
body.vp-signin .woocommerce-form-row .input-text {
	box-sizing: border-box; width: 100%;
	font-family: inherit; font-size: 15px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 10px;
	padding: 14px 15px;
}
body.vp-signin .woocommerce-form-row .input-text:focus {
	outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol);
}
body.vp-signin .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); margin: 4px 0 20px; }
body.vp-signin .woocommerce-form-login__rememberme input { margin: 0; }

/* submit */
body.vp-signin .woocommerce-form-login__submit,
body.vp-signin button[name="login"] {
	width: 100%; display: block; float: none;
	background: var(--ink); color: #fff; border: 0; border-radius: 10px;
	font-family: inherit; font-size: 15.5px; font-weight: 600; padding: 16px;
	cursor: pointer; transition: background .2s;
}
body.vp-signin .woocommerce-form-login__submit:hover { background: #06202c; }
body.vp-signin .lost_password { margin: 18px 0 0; font-size: 13.5px; text-align: center; }
body.vp-signin .lost_password a { color: var(--muted); }
body.vp-signin .lost_password a:hover { color: var(--petrol); }

/* privacy link, well below the form as on the storefront */
.vp-signin__foot { text-align: center; margin: 90px 0 40px; }
.vp-signin__foot a { font-size: 13.5px; color: var(--muted); }

@media (max-width: 600px) {
	body.vp-signin .wp-site-blocks main { padding-block: 34px 24px; }
	body.vp-signin .woocommerce { padding-inline: 20px; }
	.vp-signin__foot { margin-top: 56px; }
}

/* -- account dashboard ----------------------------------------------
   WooCommerce ships this unstyled, so it was the one page still in the
   plugin's default look. Account navigation down the left, content in
   a card at the right, in the theme's own language. */
.woocommerce-account:not(.vp-signin) .wp-site-blocks main { padding-block: 40px 80px; }
.woocommerce-account:not(.vp-signin) .wp-block-post-title {
	max-width: 1200px; margin-inline: auto; padding-inline: 24px;
	font-size: clamp(26px, 3.2vw, 36px); color: var(--ink);
	letter-spacing: -.02em; margin: 0 0 30px;
}

.woocommerce-account:not(.vp-signin) .woocommerce {
	display: grid; grid-template-columns: 230px 1fr; gap: 34px; align-items: start;
	max-width: 1200px; margin-inline: auto; padding-inline: 24px;
}

/* navigation */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link a {
	display: block; padding: 12px 15px; border-radius: 10px;
	font-size: 14.5px; color: var(--muted); text-decoration: none;
	transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--mist); color: var(--ink); }
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--mist); color: var(--ink); font-weight: 600;
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }

/* content */
.woocommerce-MyAccount-content {
	background: #fff; border: 1px solid var(--border);
	border-radius: 14px; padding: 30px 32px;
}
.woocommerce-MyAccount-content > p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.woocommerce-MyAccount-content a { color: var(--petrol); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content legend { font-size: 19px; color: var(--ink); margin: 0 0 18px; }

/* order table */
.woocommerce-orders-table, .shop_table {
	width: 100%; border-collapse: collapse; font-size: 14px;
}
.woocommerce-orders-table th, .shop_table th {
	text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border);
	font-family: var(--vp-font-mono); font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.woocommerce-orders-table td, .shop_table td {
	padding: 14px 10px; border-bottom: 1px solid var(--border); color: var(--ink);
}
.woocommerce-orders-table .amount, .shop_table .amount { font-family: var(--vp-font-mono); }

/* forms inside the account */
.woocommerce-account .woocommerce-Address { margin-bottom: 22px; }
.woocommerce-account .woocommerce-Address-title h3 { font-size: 16px; color: var(--ink); }
.woocommerce-account:not(.vp-signin) form .input-text,
.woocommerce-account form select {
	box-sizing: border-box; width: 100%;
	font-family: inherit; font-size: 15px; color: var(--ink);
	background: #fff; border: 1px solid var(--border); border-radius: 10px;
	padding: 13px 14px;
}
.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus {
	outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--petrol);
}
.woocommerce-account:not(.vp-signin) form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.woocommerce-account:not(.vp-signin) .button,
.woocommerce-account:not(.vp-signin) button[type="submit"] {
	background: var(--petrol); color: #fff; border: 0; border-radius: 10px;
	font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 13px 24px; cursor: pointer;
}
.woocommerce-account:not(.vp-signin) .button:hover,
.woocommerce-account:not(.vp-signin) button[type="submit"]:hover { background: var(--petrol-d); }

@media (max-width: 820px) {
	.woocommerce-account:not(.vp-signin) .woocommerce { grid-template-columns: 1fr; gap: 22px; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.woocommerce-MyAccount-content { padding: 22px 20px; }
}

/* -- mobile alignment, continued ------------------------------------
   Section 43 centres the headings and eyebrows of the sections that
   existed when it was written. The storefront sections built since -
   the hero, the certificates band, the why-us cards, the calculator
   promo and the featured blend - centre on a phone the same way.
   Same 760px breakpoint. */
@media (max-width: 760px) {

	/* hero: eyebrow, headline, standfirst, buttons and chips */
	.vp-hero .vp-wrap > div:first-child { text-align: center; }
	.vp-hero .sub { margin-inline: auto; }
	.vp-hero .cta-row,
	.vp-hero .chips { justify-content: center; }

	/* certificates band - the spec panel keeps its own row layout */
	.vp-coaband .vp-wrap > div:first-child { text-align: center; }
	.vp-coaband p { margin-inline: auto; }

	/* why researchers choose Vitrapept */
	.vp-feature { text-align: center; }
	.vp-feature__ico { margin-inline: auto; }

	/* calculator promo */
	.vp-calcpromo__copy { text-align: center; }
	.vp-calcpromo p { margin-inline: auto; }

	/* featured blend */
	.vp-blend .inner { text-align: center; align-items: center; }
	.vp-blend .tag { align-self: center; }
	.vp-blend p { margin-inline: auto; }
	.vp-blend .comp,
	.vp-blend .row { justify-content: center; }
}

/* WooCommerce marks both fields required with a red asterisk; the
   storefront shows none, and both are required regardless. */
body.vp-signin .woocommerce form.login .required { display: none; }
body.vp-signin .woocommerce form.login label { font-weight: 600; }


/* -- 404 ------------------------------------------------------------
   The theme had no 404 template, so a bad URL fell through to
   index.html and served the blog archive under a 404 status. */
.vp-404 {
	background: linear-gradient(180deg, var(--mist), #fff);
	padding: 100px 24px 96px; text-align: center;
}
.vp-404 .vp-wrap { max-width: 620px; }
.vp-404 h1 {
	font-size: clamp(34px, 5.4vw, 56px); font-weight: 600;
	letter-spacing: -.025em; color: var(--ink); margin: 14px 0 16px;
}
.vp-404 p { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 30px; }
.vp-404__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vp-404__links {
	display: flex; gap: 10px 28px; justify-content: center; flex-wrap: wrap;
	margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border);
}
.vp-404__links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.vp-404__links a:hover { color: var(--petrol); text-decoration: underline; }

/* -- thank you ------------------------------------------------------
   WooCommerce renders the order confirmation as blocks, so these are
   its wc-block-order-confirmation-* class names rather than the
   classic woocommerce-order-* ones. The page carries the checkout body
   class without being the checkout form, which is why the two-column
   shell is excluded from it above. */
.woocommerce-order-received .wp-site-blocks main { padding: 56px 24px 90px; }
.woocommerce-order-received .wp-site-blocks main > * { max-width: 680px; margin-inline: auto; }

.wc-block-order-confirmation-status h1 {
	font-size: clamp(28px, 3.6vw, 40px); font-weight: 600;
	letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px;
}
.wc-block-order-confirmation-status p { color: var(--muted); font-size: 16px; margin: 0 0 34px; }

.wc-block-order-confirmation-summary-list {
	list-style: none; margin: 0 0 38px; padding: 4px 22px;
	background: var(--mist); border: 1px solid var(--border); border-radius: 12px;
}
.wc-block-order-confirmation-summary-list-item {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border);
}
.wc-block-order-confirmation-summary-list-item:last-child { border-bottom: 0; }
.wc-block-order-confirmation-summary-list-item__key { color: var(--muted); font-size: 14px; }
.wc-block-order-confirmation-summary-list-item__value {
	font-family: var(--vp-font-mono); font-size: 14px; font-weight: 600; color: var(--ink);
}

.wc-block-order-confirmation-totals__table {
	width: 100%; border-collapse: collapse; font-size: 14.5px;
	background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.wc-block-order-confirmation-totals__table th {
	text-align: left; padding: 13px 18px; background: var(--mist);
	border-bottom: 1px solid var(--border);
	font-family: var(--vp-font-mono); font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.wc-block-order-confirmation-totals__table td {
	padding: 15px 18px; border-bottom: 1px solid var(--border); color: var(--ink);
}
.wc-block-order-confirmation-totals__table tfoot th,
.wc-block-order-confirmation-totals__table tfoot td { font-weight: 600; }
.wc-block-order-confirmation-totals__table tr:last-child th,
.wc-block-order-confirmation-totals__table tr:last-child td { border-bottom: 0; }
.wc-block-order-confirmation-totals__product a { color: var(--petrol); text-decoration: none; }
.wc-block-order-confirmation-totals .amount,
.wc-block-order-confirmation-totals bdi { font-family: var(--vp-font-mono); color: inherit; }

.wc-block-order-confirmation-totals-wrapper,
.wc-block-order-confirmation-address-wrapper { margin-bottom: 38px; }
.wc-block-order-confirmation-totals-wrapper h2,
.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-billing-wrapper h2 {
	font-size: 19px; color: var(--ink); margin: 0 0 16px;
}
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address {
	font-style: normal; color: var(--muted); font-size: 14.5px; line-height: 1.75;
	background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
}

@media (max-width: 640px) {
	.vp-404 { padding: 60px 20px 56px; }
	.vp-404__links { gap: 8px 18px; margin-top: 32px; padding-top: 22px; }
	.woocommerce-order-received .wp-site-blocks main { padding: 32px 20px 60px; }
}

/* -- thank you (standalone /thank-you/) ------------------------------
   Separate from WooCommerce's order-received screen; a centred
   confirmation that also works without an order behind it. */
.vp-thanks {
	background: linear-gradient(180deg, var(--mist), #fff);
	padding: 90px 24px 96px; text-align: center;
}
.vp-thanks .vp-wrap { max-width: 620px; }
.vp-thanks__mark {
	width: 66px; height: 66px; border-radius: 50%;
	display: grid; place-items: center; margin: 0 auto 22px;
	background: #fff; color: var(--ok);
	box-shadow: 0 10px 30px var(--shadow);
}
.vp-thanks h1 {
	font-size: clamp(32px, 4.8vw, 48px); font-weight: 600;
	letter-spacing: -.025em; color: var(--ink); margin: 14px 0 16px;
}
.vp-thanks > .vp-wrap > p { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 30px; }
.vp-thanks strong { color: var(--ink); font-family: var(--vp-font-mono); }
.vp-thanks__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vp-thanks__note { margin-top: 44px; font-size: 13.5px; color: var(--muted); }
.vp-thanks__note a { color: var(--petrol); }

@media (max-width: 640px) { .vp-thanks { padding: 56px 20px 60px; } }