/**
 * My Account dashboard styles.
 *
 * Tokens mirror the Figma variables from "Purovitalis rebranding 2026"
 * (frames 385:19236-19539); the --pv-* names map 1:1 onto the Figma variable
 * names so they can be lifted into a global token sheet later.
 *
 * Fonts: headings Funnel Sans, body Public Sans. Both the @font-face rules and
 * the --pv-font-* tokens come from the theme's global styles (assets/css/
 * fonts.css and main.css), which this sheet declares as a dependency.
 */

/* The account layout carries its own title; hide the page template's, and
   the blog widget sidebar has no business on account pages. */
.woocommerce-account .entry-header,
.woocommerce-account .site-sidebar {
	display: none;
}

/* The blank theme ships no global box-sizing reset; without it, padding adds
   to percentage widths and pushes the drawer past the viewport edge. */
.pv-account,
.pv-account *,
.pv-subdrawer-overlay,
.pv-subdrawer-overlay *,
.pvc-popup,
.pvc-popup * {
	box-sizing: border-box;
}

.pv-account {
	/* surface */
	--pv-surface-background: #f8f7f3;
	--pv-surface-card: #ffffff;
	--pv-surface-header: #f8f7f3;
	--pv-surface-muted: #efece5;
	--pv-surface-active: #564f78;
	/* border */
	--pv-border-default: #e3ded4;
	/* text */
	--pv-text: #000000;
	--pv-text-inverse: #ffffff;
	--pv-text-primary: #564f78;
	--pv-text-secondary: #ef7e3f;
	--pv-text-danger: #a8364f;
	--pv-neutral-300: #727272;
	--pv-neutral-400: #3d3d3d;
	/* status */
	/* Status colours = tints/shades of the goal palette (brand guide): Renewal green,
	   Energy yellow, Resilience blue, Balance wine, Foundation purple. */
	--pv-status-success-bg: #e7efe7;   /* Renewal #85A887 at 15% */
	--pv-status-success-text: #3f6446;
	--pv-status-warning-bg: #fdf3d3;   /* Energy #FAD168 at 25% */
	--pv-status-warning-text: #7a5a10;
	--pv-status-info-bg: #e6edf4;      /* Resilience #80A6C9 at 15% */
	--pv-status-info-text: #3d5d7c;
	--pv-status-error-bg: #f4e1e5;     /* Balance #A8364F at 12% */
	--pv-status-error-text: #a8364f;
	--pv-status-neutral-bg: #efe9ee;   /* Foundation #824F78 at 12% */
	--pv-status-neutral-text: #564f78;
	/* radius */
	--pv-radius: 8px;
	--pv-radius-full: 99px;
	/* Type comes from main.css :root — one declaration, one place to change. */

	display: flex;
	gap: 24px;
	align-items: flex-start;
	/* Same container as the header and the rebuilt pages: page max + 48px edge. */
	max-width: var(--pv-page-max);
	margin: 0 auto;
	padding: 48px 48px 80px;
	font-family: var(--pv-font-body);
	color: var(--pv-text);
}

/* ---------------------------------------------------------------- sidebar */

.pv-account__sidebar {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.pv-account__greeting {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}

/* WooCommerce's stock layout floats the navigation at 30% width, which crops
   the item backgrounds inside the 300px sidebar. */
.pv-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
}

.pv-account-nav__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pv-account-nav__link {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 16px;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-background);
	font-size: 16px;
	font-weight: 600;
	color: var(--pv-neutral-400);
	text-decoration: none;
}

.pv-account-nav__item.is-active .pv-account-nav__link,
.pv-account-nav__link:hover {
	background: var(--pv-border-default);
	color: var(--pv-text);
}

.pv-account__logout {
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pv-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--pv-border-default);
}
.pv-account__logout:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- content */

.pv-account__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* WooCommerce's stock layout floats the content area at 68% width; inside
   this layout it must fill the column so the card aligns with the header. */
.pv-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.pv-account__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pv-border-default);
}

.pv-account__title {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.pv-account__help {
	font-size: 12px;
	color: var(--pv-text-primary);
	text-decoration: none;
}

/* ---------------------------------------------------------------- shared */

.pv-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 14px;
	border: 0;
	border-radius: var(--pv-radius-full);
	font-family: var(--pv-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.pv-badge--success { background: var(--pv-status-success-bg); color: var(--pv-status-success-text); }
.pv-badge--warning { background: var(--pv-status-warning-bg); color: var(--pv-status-warning-text); }
.pv-badge--info    { background: var(--pv-status-info-bg); color: var(--pv-status-info-text); }
.pv-badge--error   { background: var(--pv-status-error-bg); color: var(--pv-status-error-text); }
.pv-badge--neutral { background: var(--pv-status-neutral-bg); color: var(--pv-status-neutral-text); }

.pv-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 23px;
	margin-bottom: 30px;
}

.pv-filter .pv-badge {
	cursor: pointer;
	opacity: 0.55;
}

.pv-filter .pv-badge.is-active,
.pv-filter .pv-badge:hover {
	opacity: 1;
}

.pv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: var(--pv-radius-full);
	font-family: var(--pv-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.pv-btn--primary {
	background: var(--pv-text);
	border: 1px solid var(--pv-text);
	color: var(--pv-text-inverse);
}

.pv-btn--outline {
	background: transparent;
	border: 1px solid var(--pv-text);
	color: var(--pv-text);
}

.pv-link-btn {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pv-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--pv-text-secondary);
	text-decoration: underline;
	cursor: pointer;
}

.pv-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 0;
	background: none;
	padding: 0;
	font-family: var(--pv-font-body);
	font-size: 14px;
	color: var(--pv-text);
	text-decoration: none;
	cursor: pointer;
}

.pv-cta__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pv-text);
}

.pv-cta__arrow::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: -2px;
	border-top: 2px solid var(--pv-text-inverse);
	border-right: 2px solid var(--pv-text-inverse);
	transform: rotate(45deg);
}

.pv-inline-notice {
	padding: 12px 20px;
	margin-bottom: 24px;
	border-radius: var(--pv-radius);
	background: var(--pv-status-info-bg);
	color: var(--pv-status-info-text);
	font-size: 14px;
}

.pv-inline-notice.is-error {
	background: var(--pv-status-error-bg);
	color: var(--pv-status-error-text);
}

/* ---------------------------------------------------------------- cards */

.pv-card-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pv-card {
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
	overflow: hidden;
}

.pv-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 6px 20px;
	background: var(--pv-surface-header);
}

.pv-card__meta {
	display: flex;
	gap: 24px;
	font-size: 14px;
	color: var(--pv-text-primary);
}

.pv-card__body {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 20px;
}

.pv-card__products {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pv-card__total {
	font-size: 20px;
	white-space: nowrap;
}

.pv-product {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pv-product__image img,
.pv-item__image img,
.pv-subdrawer__image img {
	display: block;
	object-fit: contain;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-header);
}

.pv-product__image img {
	width: 64px;
	height: 64px;
}

.pv-product__name {
	margin: 0 0 4px;
	font-family: var(--pv-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.pv-product__byline {
	margin: 0;
	font-size: 14px;
	color: var(--pv-neutral-300);
}

.pv-product__byline--success { color: var(--pv-status-success-text); }
.pv-product__byline--warning { color: var(--pv-status-warning-text); }
.pv-product__byline--info    { color: var(--pv-status-info-text); }
.pv-product__byline--error   { color: var(--pv-status-error-text); }

.pv-empty {
	font-size: 16px;
}

/* --------------------------------------------------- subscription details */

.pv-subscription__items {
	display: flex;
	flex-direction: column;
}

.pv-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
}

.pv-item__image img {
	width: 90px;
	height: 90px;
}

.pv-item__details {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pv-item__name {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.pv-item__specs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pv-type-badge {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--pv-surface-active);
	color: var(--pv-text-inverse);
	font-size: 10px;
	font-weight: 600;
}

.pv-type-badge--once {
	background: var(--pv-text-secondary);
}

.pv-item__frequency {
	font-size: 12px;
	color: var(--pv-neutral-300);
}

.pv-item__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
}

.pv-stepper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--pv-surface-muted);
	font-size: 12px;
	font-weight: 700;
}

.pv-stepper__btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--pv-neutral-300);
	cursor: pointer;
}

.pv-stepper__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.pv-item__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 16px;
	white-space: nowrap;
}

.pv-card__footer {
	padding: 16px 20px;
	border-top: 1px solid var(--pv-border-default);
}

.pv-info-table {
	width: 100%;
	margin: 8px 0;
	border-collapse: collapse;
	/* Fixed layout so the table can never push the card wider than its
	   container on narrow screens. */
	table-layout: fixed;
}

.pv-info-table td {
	padding: 12px 0;
	border: 0;
	font-size: 14px;
}

.pv-info-table td:first-child {
	color: var(--pv-text-primary);
}

.pv-info-table td:last-child {
	text-align: right;
	font-weight: 600;
}

.pv-info-table .pv-link-btn {
	margin-left: 12px;
}

.pv-panels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 8px;
}

.pv-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-muted);
	font-size: 14px;
}

.pv-panel[hidden] {
	display: none;
}

.pv-panel label {
	font-weight: 600;
}

.pv-panel__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pv-panel__hint {
	font-size: 12px;
	color: var(--pv-neutral-300);
}

.pv-panel__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}

.pv-panel input,
.pv-panel select {
	padding: 8px 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	font-family: var(--pv-font-body);
	font-size: 14px;
	background: var(--pv-surface-card);
	min-width: 0;
}

/* The coupon field rendered into the info table by purovitalis-core. */
.pv-info-table form {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pv-info-table input[type="text"] {
	padding: 8px 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	font-family: var(--pv-font-body);
	font-size: 14px;
	font-weight: 400;
	background: var(--pv-surface-card);
	/* Global form styles set 100% widths; the coupon field stays compact. */
	width: auto;
	max-width: 170px;
	min-width: 0;
}

.pv-info-table button.button {
	padding: 9px 20px;
	border: 1px solid var(--pv-text);
	border-radius: var(--pv-radius-full);
	background: transparent;
	color: var(--pv-text);
	font-family: var(--pv-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.pv-totals-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	margin: 24px 0;
	border-radius: 4px;
	background: var(--pv-surface-header);
	font-size: 14px;
}

.pv-calculation {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 32px;
	font-size: 14px;
}

.pv-calculation__row {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: 320px;
}

.pv-calculation__row--total {
	padding-top: 14px;
	border-top: 1px dashed var(--pv-border-default);
	font-weight: 700;
}

.pv-payment-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	border-top: 1px solid var(--pv-border-default);
	font-size: 14px;
}

.pv-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	padding: 8px 0 32px;
	border-bottom: 1px solid var(--pv-border-default);
}

.pv-addresses {
	display: flex;
	gap: 40px;
	padding: 32px 0 8px;
}

.pv-addresses__column {
	flex: 1 1 0;
	min-width: 0;
}

.pv-addresses__column h4 {
	margin: 0 0 12px;
	font-family: var(--pv-font-body);
	font-size: 16px;
	font-weight: 700;
}

.pv-addresses__column address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pv-neutral-400);
}

/* ---------------------------------------------------------------- coupons */

.pv-coupons {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pv-coupon-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(210px, 1fr) );
	gap: 16px;
}

.pv-coupon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 16px 16px;
	border: 2px dashed var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
	text-align: center;
	overflow: visible;
}

.pv-coupon--inactive {
	opacity: 0.6;
}

.pv-coupon__amount {
	font-family: var(--pv-font-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

/* A reward names the product instead of an amount. The name is longer than
   "€6,00 off" and the card can be 210px wide, so it steps down a size. */
.pv-coupon__amount--product {
	font-size: 18px;
	text-wrap: balance;
}

/* A discount coupon that also ships a product says so under the code. */
.pv-coupon__gift {
	font-size: 12px;
	color: var(--pv-text-secondary);
}

.pv-coupon__code {
	padding: 5px 14px;
	border: 0;
	border-radius: var(--pv-radius-full);
	background: var(--pv-text);
	color: var(--pv-text-inverse);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.pv-coupon__code--muted {
	background: var(--pv-surface-muted);
	color: var(--pv-neutral-300);
	cursor: default;
}

.pv-coupon__hint {
	font-size: 11px;
	color: var(--pv-text-secondary);
}

.pv-coupon__expiry {
	font-size: 12px;
	color: var(--pv-neutral-300);
}

/* ------------------------------------------------------------ overview */

.pv-overview {
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
}

/* ------------------------------------------------------ WooCommerce notices
   Session notices (order-again confirmations, coupon messages, form errors)
   printed inside the account shell. */

.pv-account__body .woocommerce-message,
.pv-account__body .woocommerce-info,
.pv-account__body .woocommerce-error,
.pv-account__body .woocommerce-error li {
	list-style: none;
	margin: 0 0 12px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-muted);
	color: var(--pv-text);
	font-size: 14px;
}

/* Notices with an action (WooCommerce's "confirm your email" prompt): text left, button right, never overflowing. */
.pv-account__body .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 14px 20px;
	line-height: 1.45;
}
.pv-account__body .woocommerce-info a.button {
	order: 2;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--pv-color-black);
	color: var(--pv-color-white);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.pv-account__body .woocommerce-info a.button:hover { background: var(--pv-color-primary); }

.pv-account__body .woocommerce-message {
	background: var(--pv-status-success-bg);
	color: var(--pv-status-success-text);
}

.pv-account__body .woocommerce-error,
.pv-account__body .woocommerce-error li {
	background: var(--pv-status-error-bg);
	color: var(--pv-status-error-text);
}

.pv-account__body .woocommerce-error li {
	margin: 0;
	padding: 0;
	background: none;
}

/* ------------------------------------------------- add payment method page */

.pv-account__body .wc_payment_methods,
.pv-account__body ul.payment_methods {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pv-account__body .wc_payment_methods li,
.pv-account__body ul.payment_methods li {
	padding: 16px 20px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
}

.pv-account__body .wc_payment_methods label,
.pv-account__body ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.pv-account__body .wc_payment_methods img,
.pv-account__body ul.payment_methods img {
	max-height: 24px;
	width: auto;
}

.pv-account__body .payment_box {
	margin-top: 12px;
	font-size: 14px;
	color: var(--pv-neutral-400);
}

.pv-account__body #add_payment_method .form-row,
.pv-account__body .payment_box .form-row {
	margin-bottom: 12px;
}

/* ------------------------------------------------ generic WooCommerce forms
   Styles the stock WC templates rendered inside the account shell —
   edit-address, payment methods, login/lost-password — so those pages match
   without overriding every template. */

.pv-account__body .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}

.pv-account__body .form-row label {
	font-size: 13px;
	font-weight: 600;
}

.pv-account__body .form-row .input-text,
.pv-account__body .form-row select,
.pv-account__body .form-row textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	font-family: var(--pv-font-body);
	font-size: 14px;
	background: var(--pv-surface-card);
}

.pv-account__body .select2-container .select2-selection--single {
	height: auto;
	padding: 9px 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
}

.pv-account__body .select2-container .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
}

.pv-account__body .select2-container .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

.pv-account__body .woocommerce-address-fields h3,
.pv-account__body .woocommerce-PaymentMethods + h3 {
	font-family: var(--pv-font-heading);
	font-size: 20px;
	font-weight: 700;
}

/* Stock WC buttons become pills. */
.pv-account__body button.button:not(.pv-btn),
.pv-account__body a.button:not(.pv-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 1px solid var(--pv-text);
	border-radius: var(--pv-radius-full);
	background: var(--pv-text);
	color: var(--pv-text-inverse);
	font-family: var(--pv-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* Saved payment methods table. */
.pv-account__body .woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 24px;
}

.pv-account__body .woocommerce-MyAccount-paymentMethods th,
.pv-account__body .woocommerce-MyAccount-paymentMethods td {
	padding: 12px 16px;
	font-size: 14px;
	text-align: left;
	border: 0;
	border-top: 1px solid var(--pv-border-default);
}

.pv-account__body .woocommerce-MyAccount-paymentMethods thead th {
	background: var(--pv-surface-header);
	color: var(--pv-neutral-300);
	font-weight: 600;
	border-top: 0;
}

/* WooCommerce's small-screen table CSS prints "data-title:" labels before
   each cell; the actions cell has no title, leaving a bare colon. */
.pv-account__body .woocommerce-MyAccount-paymentMethods td[data-title=""]::before,
.pv-account__body .woocommerce-MyAccount-paymentMethods td.payment-method-actions::before {
	display: none !important;
	content: none !important;
}

/* ---------------------------------------------------------------- overview */

.pv-overview {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.pv-overview__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	/* Cards size to their own content — a tall neighbour must not stretch
	   the other card into empty space. */
	align-items: start;
}

.pv-overview-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
}

.pv-overview-card__title {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
}

.pv-overview-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 14px;
	color: var(--pv-neutral-400);
}

.pv-overview-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 8px;
}

.pv-overview__heading {
	margin: 40px 0 16px;
	font-family: var(--pv-font-heading);
	font-size: 20px;
	font-weight: 700;
}

.pv-overview__heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 40px 0 16px;
}

.pv-overview__heading-row .pv-overview__heading {
	margin: 0;
}

.pv-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --------------------------------------------------------- account details */

.pv-account-details {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) );
	gap: 24px;
	align-items: start;
}

.pv-detail-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
}

.pv-detail-card h3 {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 20px;
	font-weight: 700;
}

.pv-detail-card address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pv-neutral-400);
}

.pv-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.pv-form label {
	font-size: 13px;
	font-weight: 600;
	margin-top: 6px;
}

.pv-form input[type="text"],
.pv-form select,
.pv-form input[type="email"],
.pv-form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	font-family: var(--pv-font-body);
	font-size: 14px;
	background: var(--pv-surface-card);
}

.pv-form .pv-btn {
	margin-top: 12px;
}

.pv-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.pv-form__checkbox input {
	margin-top: 2px;
}

.pv-form__note {
	margin: 0;
	font-size: 12px;
	color: var(--pv-neutral-300);
}

.pv-placeholder-card {
	padding: 32px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
}

.pv-placeholder-card h3 {
	margin: 0 0 12px;
	font-family: var(--pv-font-heading);
	font-size: 22px;
	font-weight: 700;
}

.pv-placeholder-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pv-neutral-400);
	max-width: 48ch;
}

/* --------------------------------------------- updates + order history */

.pv-section {
	padding: 24px 0 8px;
	border-top: 1px solid var(--pv-border-default);
	margin-top: 24px;
}

.pv-section h4 {
	margin: 0 0 16px;
	font-family: var(--pv-font-body);
	font-size: 16px;
	font-weight: 700;
}

.pv-updates {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pv-updates__item {
	display: flex;
	gap: 16px;
	font-size: 14px;
}

.pv-updates__date {
	flex: 0 0 92px;
	color: var(--pv-neutral-300);
}

.pv-updates__text {
	color: var(--pv-neutral-400);
}

.pv-table {
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	overflow: hidden;
}

.pv-table__head,
.pv-table__row {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1.2fr 1fr 60px;
	gap: 8px;
	align-items: center;
	padding: 12px 16px;
	font-size: 14px;
}

.pv-table__head {
	background: var(--pv-surface-header);
	color: var(--pv-neutral-300);
	font-weight: 600;
}

.pv-table__row {
	border-top: 1px solid var(--pv-border-default);
}

.pv-table__row .pv-badge {
	font-size: 12px;
	padding: 3px 10px;
}

.pv-table__action {
	text-align: right;
}

/* ---------------------------------------------------------------- drawer */

.pv-subdrawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.3);
}

.pv-subdrawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	background: var(--pv-surface-card);
	overflow-y: auto;
}

.pv-subdrawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pv-subdrawer__header h3 {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 18px;
	font-weight: 700;
}

.pv-subdrawer__close {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--pv-text);
}

.pv-subdrawer__search {
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-muted);
	font-family: var(--pv-font-body);
	font-size: 14px;
}

.pv-subdrawer__once {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.pv-subdrawer__list {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.pv-subdrawer__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pv-border-default);
}

.pv-subdrawer__image img {
	width: 48px;
	height: 48px;
}

.pv-subdrawer__details {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 16px;
}

.pv-subdrawer__price {
	font-size: 14px;
	color: var(--pv-text-secondary);
}

/* Two drawer modes: subscription additions show plan prices; next-delivery-only
   shows one-time prices (and also the products that have no plan at all).
   Plan-less products are hidden in subscription mode here in CSS as well as in
   the script, so they can never be offered somewhere the API would refuse. */
.pv-subdrawer-overlay:not(.is-once-mode) .pv-subdrawer__row--once-only {
	display: none;
}

.pv-subdrawer__price--once {
	display: none;
}

.pv-subdrawer-overlay.is-once-mode .pv-subdrawer__price--once {
	display: block;
}

.pv-subdrawer-overlay.is-once-mode .pv-subdrawer__price--sub {
	display: none;
}

.pv-subdrawer__footer {
	font-size: 14px;
	color: var(--pv-text-primary);
}

.pv-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
}

/* ------------------------------------------------------------- responsive */

@media ( max-width: 900px ) {
	.pv-account {
		flex-direction: column;
		/* Stacked: the cross axis is horizontal, so stretch instead of
		   flex-start or the columns size to their content width. */
		align-items: stretch;
		padding: 24px 16px;
	}

	.pv-account__content {
		width: 100%;
	}

	.pv-account__sidebar {
		flex-basis: auto;
		width: 100%;
		gap: 24px;
	}

	.pv-account__greeting {
		font-size: 28px;
	}

	/* Filter pills scroll horizontally like the nav instead of wrapping. */
	.pv-filter {
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-left: -16px;
		margin-right: -16px;
		padding: 0 16px;
	}

	.pv-filter::-webkit-scrollbar {
		display: none;
	}

	.pv-filter .pv-badge {
		flex: 0 0 auto;
	}

	/* Card footer: total left, View-order CTA right, one aligned row. */
	.pv-card__body {
		align-items: center;
		row-gap: 12px;
	}

	.pv-card__products {
		flex-basis: 100%;
	}

	.pv-card__total {
		margin-right: auto;
		font-size: 18px;
		font-weight: 600;
	}

	/* The nav becomes one horizontal scroller instead of a tall list; an
	   arrow signals there is more off-screen (hidden by JS at the end). */
	.pv-account-nav {
		position: relative;
		margin: 0 -16px;
	}

	.pv-account-nav__list {
		flex-direction: row;
		width: auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 40px 0 16px;
	}

	.pv-account-nav__list::-webkit-scrollbar {
		display: none;
	}

	.pv-account-nav::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
	}

	.pv-account-nav__arrow {
		position: absolute;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--pv-text);
		pointer-events: none;
	}

	.pv-account-nav__arrow::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-left: -2px;
		border-top: 2px solid var(--pv-text-inverse);
		border-right: 2px solid var(--pv-text-inverse);
		transform: rotate(45deg);
	}

	.pv-account-nav.is-scrolled-end::after,
	.pv-account-nav.is-scrolled-end .pv-account-nav__arrow {
		display: none;
	}

	.pv-account-nav__link {
		height: 40px;
		white-space: nowrap;
		font-size: 14px;
	}

	.pv-account__logout {
		margin-top: 0;
	}

	.pv-card__body {
		flex-wrap: wrap;
	}

	/* Compact item rows: small image beside the name, price on its own line.
	   Multi-product subscriptions are common — mobile must not become a
	   scroll marathon. */
	.pv-item {
		flex-wrap: wrap;
		row-gap: 12px;
		padding: 14px 16px;
	}

	.pv-item__image img {
		width: 56px;
		height: 56px;
	}

	.pv-item__details {
		flex: 1 1 0;
		gap: 8px;
	}

	.pv-item__name {
		font-size: 16px;
		line-height: 1.2;
	}

	/* The price sits on its own line, aligned with the text column. */
	.pv-item__price {
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
		width: 100%;
		padding-left: 72px; /* image (56px) + gap (16px) */
		font-size: 15px;
	}

	/* List cards: same compaction. */
	.pv-product__image img {
		width: 48px;
		height: 48px;
	}

	.pv-product__name {
		font-size: 16px;
		line-height: 1.2;
		margin: 0;
	}

	/* Order history collapses to essentials on small screens. */
	.pv-table__head,
	.pv-table__row {
		grid-template-columns: 1fr 1.4fr 1fr 50px;
	}

	.pv-table__head span:nth-child(3),
	.pv-table__row > span:nth-child(3) {
		display: none;
	}

	.pv-updates__item {
		flex-direction: column;
		gap: 2px;
	}

	.pv-overview__top {
		grid-template-columns: 1fr;
	}

	.pv-account-details {
		grid-template-columns: 1fr;
	}

	.pv-card__products {
		gap: 12px;
	}

	/* The drawer must never exceed the viewport. */
	.pv-subdrawer {
		width: 100%;
		left: 0;
	}

	/* The info table stacks each row: label on top, value below it. */
	.pv-info-table td {
		display: block;
		width: 100%;
		padding: 0;
	}

	.pv-info-table tr {
		display: block;
		padding: 12px 0;
	}

	.pv-info-table td:first-child {
		padding-bottom: 4px;
	}

	.pv-info-table td:last-child {
		text-align: left;
	}

	.pv-info-table .pv-link-btn {
		margin-left: 8px;
	}

	.pv-info-table form {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.pv-info-table input[type="text"] {
		flex: 1 1 auto;
		max-width: none;
	}

	.pv-panel {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.pv-panel__controls {
		justify-content: space-between;
	}

	.pv-panel__controls input,
	.pv-panel__controls select {
		flex: 1 1 auto;
	}

	.pv-panel .pv-btn {
		white-space: nowrap;
	}

	.pv-actions {
		justify-content: stretch;
	}

	.pv-actions .pv-btn {
		flex: 1 1 40%;
		white-space: nowrap;
	}

	.pv-addresses {
		flex-direction: column;
		gap: 24px;
	}
}