/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Nov 02 2026 | 13:26:13 */
/* =====================================================================
   PMS Account: GLOBAL CSS
   All styles for Paid Member Subscriptions pages: Log In, Checkout (register),
   Reset Password and the Account page [pms-account].
   Styles are written globally by PMS classes (.pms-form, .pms-field, ...),
   so every PMS page looks the same. Page-specific rules are in section 9.
   This snippet contains NO texts: every text readers see is set in the PHP snippet
   "PMS Account: GLOBAL PHP". Here only the look of those texts is defined.
   Fonts: all texts are Inter; only the page titles ("Account", "Log In" ...)
   are Ivar Display (sections 1 and 10.11).
   Units: rem (1rem = 16px). Site buttons: black background, white text,
   inverted on hover (Elementor global colors e965da6 / accent).

   Contents
   1. Page frame
   2. Forms: fields, labels, hidden fields, Show / Hide password
   3. Buttons
   4. Messages (success / error)
   5. Account: tabs
   6. Account -> Profile
   7. Account -> Subscription
   7b. Account -> Billing
   8. Account -> My Reading List
   9. Page-specific rules
   10. Login page and other service pages
   11. Checkout and Adjust plan: plan card
   ===================================================================== */


/* =====================================================================
   1. PAGE FRAME
   Any page that contains a PMS form or the account tabs
   ===================================================================== */
body main:has(.pms-form, .pms-account-navigation) .page-content {
	width: calc(100% - 32px);
	max-width: 660px;
	margin: 0 auto;
	padding-bottom: 250px; /* space before the footer */
}
body main:has(.pms-form, .pms-account-navigation) .page-header {
	margin: 80px 0;
	padding: 0;
	text-align: center;
}
body main:has(.pms-form, .pms-account-navigation) .page-header .entry-title {
	margin: 0;
	font-family: "Ivar Display", serif;
	font-size: 2.5rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0.02em;
}


/* =====================================================================
   2. FORMS: FIELDS, LABELS, HIDDEN FIELDS, SHOW / HIDE PASSWORD
   ===================================================================== */
body .pms-form .pms-form-fields-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Only fields with a text / e-mail / password input (plan pickers and checkboxes are not touched) */
body .pms-form .pms-field:has(> input[type="text"], > input[type="email"], > input[type="password"]) {
	position: relative; /* anchor for the Show / Hide button */
	margin: 0 0 24px;
	padding: 0;
}
body .pms-form .pms-field:has(> input[type="text"], > input[type="email"], > input[type="password"]) > label {
	display: block;
	margin: 0 0 8px;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #808080;
}

/* Field and its content: grey by default, black when active.
   Border is fixed on all four sides, with no animation, so it never flickers or loses sides. */
body .pms-form .pms-field input[type="text"],
body .pms-form .pms-field input[type="email"],
body .pms-form .pms-field input[type="password"] {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 10px;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	outline: none;
	transition: none !important;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.03em;
	text-align: left;
	color: #808080;
}
body .pms-form .pms-field input[type="text"]:focus,
body .pms-form .pms-field input[type="email"]:focus,
body .pms-form .pms-field input[type="password"]:focus,
body .pms-form .pms-field input[type="text"]:active,
body .pms-form .pms-field input[type="email"]:active,
body .pms-form .pms-field input[type="password"]:active {
	outline: none !important;
	box-shadow: none !important;
	border-top: 1px solid #000 !important;
	border-right: 1px solid #000 !important;
	border-bottom: 1px solid #000 !important;
	border-left: 1px solid #000 !important;
	color: #000;
}

/* Chrome autofill: no blue/yellow fill, same colors as normal fields */
body .pms-form .pms-field input:-webkit-autofill,
body .pms-form .pms-field input:-webkit-autofill:hover,
body .pms-form .pms-field input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #000;
	transition: background-color 9999s ease-in-out 0s !important;
}

/* Hidden fields: Username (generated from the e-mail) and Last Name (one Full Name field is used).
   Safety net: if PMS reports an error on Username, the field is shown, so the error is never invisible. */
body .pms-form .pms-user-login-field:not(.pms-field-error),
body .pms-form .pms-last-name-field {
	display: none !important;
}

/* Show / Hide password button (added by the PMS forms PHP): on the label line, right side */
body .pms-form .pc-pass-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Inter", sans-serif;
	font-size: 10px; /* set by hand, keep */
	font-weight: 400;
	line-height: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	color: #000;
	cursor: pointer;
}


/* =====================================================================
   3. BUTTONS
   All PMS forms + the Log out button: same style as the site buttons
   ===================================================================== */
body .pms-form input[type="submit"],
body a.provence-logout-btn {
	display: block;
	box-sizing: border-box;
	width: 220px;
	margin: 0;
	padding: 10px 0;
	border: 1px solid var(--e-global-color-e965da6);
	border-radius: 0;
	background: var(--e-global-color-e965da6);
	box-shadow: none;
	font-family: "Inter", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--e-global-color-accent);
	cursor: pointer;
}
/* Hover: inversion (same for all site buttons) */
body .pms-form input[type="submit"]:hover,
body a.provence-logout-btn:hover {
	background: var(--e-global-color-accent);
	color: var(--e-global-color-e965da6);
}

/* Service screens with a "Go back" button (turn off auto-renewal, renew, update card, change plan):
   the buttons stand side by side with a gap; on a narrow screen the second one wraps under the first */
body .pms-form:has(input[name="pms_redirect_back"]) input[type="submit"] {
	display: inline-block;
	vertical-align: top;
	margin: 20px 20px 0 0;
}


/* =====================================================================
   4. MESSAGES (SUCCESS / ERROR)
   In the site style instead of the plugin box. On the Subscription tab
   the message is moved under the table (see 7.1).
   ===================================================================== */
body .pms_success-messages-wrapper,
body .pms_error-messages-wrapper {
	margin: 0 0 24px;
	padding: 12px 16px;
	border: 1px solid #e6e6e6;
	background: none;
}
body .pms_success-messages-wrapper p,
body .pms_error-messages-wrapper p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: #1e1e1e;
}
/* Success: light green, colors as in the plugin default */
body .pms_success-messages-wrapper {
	border-color: #89b96b;
	background: #d8e8ce;
}
body .pms_success-messages-wrapper p {
	color: #327306;
}
/* The shouting "SUCCESS!" / "ERROR!" prefix is hidden */
body .pms_success-messages-wrapper .pms-notice-title,
body .pms_error-messages-wrapper .pms-notice-title {
	display: none;
}


/* =====================================================================
   5. ACCOUNT: TABS
   One common line, the active tab underline sits on top of it
   ===================================================================== */
body .pms-account-navigation {
	margin: 0 0 40px;
	border-bottom: 1px solid #e6e6e6;
}
body .pms-account-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body .pms-account-navigation ul li {
	margin: 0;
	padding: 0;
}
body .pms-account-navigation ul li a {
	position: relative;
	display: block;
	padding: 0 0 8px;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
}
body .pms-account-navigation ul li a.pms-account-navigation-link--active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: #000;
}


/* ---------- 5.1 Logout tab hidden ----------
   Readers log out with the Log out button on the Profile tab.
   PMS adds this tab outside the tabs filter, so it is hidden here. */
body .pms-account-navigation li.pms-account-navigation-link--logout {
	display: none !important;
}

/* ---------- 5.2 No extra space after the last tab ----------
   The plugin adds space on the right of the tabs; it is removed,
   so the last tab ends exactly at the end of the line.
   Only the right side: the nav keeps its auto margins (My Reading List tab, 8.0). */
body .pms-account-navigation {
	padding-right: 0 !important;
}
body .pms-account-navigation ul,
body .pms-account-navigation ul li {
	margin-right: 0 !important;
	padding-right: 0 !important;
}


/* =====================================================================
   6. ACCOUNT -> PROFILE (edit profile form)
   Texts (field labels, hint, "Change password" heading) come from the PHP snippet, section 6.1.
   ===================================================================== */

/* ---------- 6.1 Heading above the password block ---------- */
#pms_edit-profile-form .provence-profile-heading {
	margin: 54px 0 22px;
	padding: 0;
	list-style: none;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
}

/* ---------- 6.2 Hint under a label (normal case, not uppercase) ---------- */
#pms_edit-profile-form .provence-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.625rem;
	line-height: 1.3;
	text-transform: none; /* set by hand, keep */
}

/* ---------- 6.3 Log out button: full form width ---------- */
body a.provence-logout-btn {
	width: 100%;
}


/* =====================================================================
   7. ACCOUNT -> SUBSCRIPTION
   The plugin table is shown as rows "LABEL ........ value" with thin dividers
   ===================================================================== */

/* ---------- 7.1 Message (success / error) under the table on this tab ---------- */
body main:has(.pms-account-subscription-details-table) .page-content {
	display: flex;
	flex-direction: column;
}
body main:has(.pms-account-subscription-details-table) .page-content > .pms_success-messages-wrapper,
body main:has(.pms-account-subscription-details-table) .page-content > .pms_error-messages-wrapper {
	order: 1;
	margin: 32px 0 0;
}

/* ---------- 7.2 Table and rows: label left, value right ---------- */
body table.pms-account-subscription-details-table,
body table.pms-account-subscription-details-table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
}
body table.pms-account-subscription-details-table tbody > tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 14px 0;
	border-bottom: 1px solid #e6e6e6;
	background: none;
}
body table.pms-account-subscription-details-table tbody > tr > td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}
/* Label (left) */
body table.pms-account-subscription-details-table tbody > tr > td:first-child {
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: #808080;
}
/* Value (right) */
body table.pms-account-subscription-details-table tbody > tr > td:last-child {
	margin-left: auto; /* stays on the right even when it wraps to its own line */
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: right;
	color: #1e1e1e;
}

/* ---------- 7.3 Payment method: card icon, number, expiry and Update in one line ---------- */
body table.pms-account-subscription-details-table div.pms-account-subscription-details-table__payment-method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
}
body table.pms-account-subscription-details-table div.pms-account-subscription-details-table__payment-method__wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
/* Plugin margins and line boxes removed, so every item is centered by its real height */
body table.pms-account-subscription-details-table div.pms-account-subscription-details-table__payment-method__wrap > span {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1;
}
body table.pms-account-subscription-details-table .pms-account-subscription-details-table__payment-method__brand svg {
	display: block;
}
body table.pms-account-subscription-details-table a.pms-account-subscription-action-link__update-payment-method {
	display: block;
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	color: #000;
}

/* ---------- 7.4 Actions: one row per action "LABEL ........ [BUTTON]" ----------
   The plugin outputs all actions as links in one "Actions" row. Each link becomes its own row.
   The link text is the button text, and the row label is the span .provence-action-label
   inserted into the link by the PHP snippet (section 6.2). The button background is drawn
   by ::after behind the link text. Each row is one link, so the row itself is not clickable:
   only the button area reacts to clicks and hover. */
body table.pms-account-subscription-details-table tbody > tr.pms-account-subscription-details-table__actions {
	display: block;
	padding: 0;
	border-bottom: 0;
}
body table.pms-account-subscription-details-table tbody > tr.pms-account-subscription-details-table__actions > td:first-child {
	display: none;
}
body table.pms-account-subscription-details-table tbody > tr.pms-account-subscription-details-table__actions > td:last-child {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	text-align: left;
}
/* Row: label column + button column (button min width 125px = 93px text + 2 x 16px padding) */
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link {
	order: 2;
	position: relative;
	z-index: 0; /* own layer, so the button background stays behind the text */
	display: grid;
	grid-template-columns: 1fr minmax(93px, auto);
	grid-template-rows: auto; /* explicit row, so the button background can be placed on its lines */
	align-items: center;
	column-gap: 40px;
	margin: 0;
	padding: 19px 16px 19px 0; /* 9px button padding + 10px row padding; 16px on the right = button side padding */
	border-bottom: 1px solid #e6e6e6;
	font-family: "Inter", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--e-global-color-accent);
	pointer-events: none; /* the row is not clickable, see ::after */
}
/* "Adjust plan" always first */
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link__change {
	order: 1;
}
/* Row label (left) */
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link .provence-action-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	color: #808080;
}
/* Button background: the link text cell plus padding */
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link::after {
	content: "";
	position: absolute;
	grid-area: 1 / 2 / 2 / 3; /* both lines are set: for an absolute item an unset end line means the row edge */
	inset: -9px -16px;
	z-index: -1;
	border: 1px solid var(--e-global-color-e965da6);
	background: var(--e-global-color-e965da6);
	pointer-events: auto; /* clicks on the button open the link */
	cursor: pointer;
}
/* Hover: inversion (same for all site buttons) */
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link:hover {
	color: var(--e-global-color-e965da6);
}
body .pms-account-subscription-details-table__actions a.pms-account-subscription-action-link:hover::after {
	background: var(--e-global-color-accent);
}


/* =====================================================================
   7b. ACCOUNT -> BILLING
   Payment history table in the style of the Subscription tab:
   header = label style (Inter, uppercase, black), cells = value style (Inter, 1.125rem).
   All borders kept, no zebra rows.
   ===================================================================== */
body table#pms-payment-history {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
	background: none;
}

/* Header cells */
body table#pms-payment-history thead th {
	padding: 14px 12px;
	border: 1px solid #e6e6e6;
	background: none !important;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: #000;
}

/* Body cells (all rows the same: no grey / white alternation, no hover color) */
body table#pms-payment-history tbody tr,
body table#pms-payment-history tbody tr:nth-child(odd),
body table#pms-payment-history tbody tr:nth-child(even),
body table#pms-payment-history tbody tr:hover {
	background: none !important;
}
body table#pms-payment-history tbody td {
	padding: 14px 12px;
	border: 1px solid #e6e6e6;
	background: none !important;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: left;
	color: #1e1e1e;
}





/* =====================================================================
   8. ACCOUNT -> MY READING LIST
   Favorites plugin list as a card grid: 4 / 2 / 1 per row
   ===================================================================== */

/* ---------- 8.0 Page width: 1420px (header width 1440px minus 10px on each side) only on this tab.
   The page title and the tab menu stay centered, the menu stays 660px wide. ---------- */
body main.site-main:has(.provence-saved-articles) {
	max-width: none; /* the theme limits main to 1140px */
	width: 100%;
}
body main.site-main:has(.provence-saved-articles) .page-header,
body main.site-main:has(.provence-saved-articles) .page-content {
	width: min(1420px, calc(100% - 32px));
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
}
body main.site-main:has(.provence-saved-articles) .page-header {
	text-align: center;
}
body main.site-main:has(.provence-saved-articles) .page-header .entry-title {
	max-width: none; /* the theme limits the title to 1140px */
	width: 100%;
	text-align: center;
}
body main.site-main:has(.provence-saved-articles) .pms-account-navigation {
	max-width: 660px;
	margin: 0 auto 40px;
}

.provence-saved-articles .favorites-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start; /* cards are not stretched to the tallest one */
	gap: 40px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.provence-saved-articles .favorites-list > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start; /* image and title stay at the top, no extra space between them */
	gap: 12px;
	margin: 0;
	padding: 0 !important; /* overrides the default list item padding */
	border: 0 !important;  /* removes the line above the image */
}
.provence-saved-articles .favorites-list > li > * {
	margin: 0 !important;  /* removes paragraph spacing around title and button */
	padding: 0 !important;
}

/* ---------- 8.1 Image and title: full width, one under another ---------- */
.provence-saved-articles .favorites-list > li > :first-child,
.provence-saved-articles .favorites-list > li > :nth-child(2) {
	flex: 0 0 100%;
}
.provence-saved-articles .favorites-list > li img {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
}

/* ---------- 8.2 Title: max 2 lines, no underline, top aligned ---------- */
.provence-saved-articles .favorites-list > li > :nth-child(2),
.provence-saved-articles .favorites-list > li > :nth-child(2) a {
	position: static;
	line-height: 1.15;
}
.provence-saved-articles .favorites-list a {
	font-family: "Inter", sans-serif;
	font-size: 1.375rem;
	color: inherit;
	text-decoration: none;
	text-transform: none;
}
.provence-saved-articles .favorites-list a:hover {
	text-decoration: none;
}
.provence-saved-articles .favorites-list > li > :nth-child(2) a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
/* Makes the image clickable: the title link is stretched over the image area */
.provence-saved-articles .favorites-list > li > :nth-child(2) a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
}

/* ---------- 8.3 Bookmark button: top right corner of the image, above the image link (set by hand, keep) ---------- */
.provence-saved-articles .favorites-list > li > :last-child {
	position: absolute;
	top: 18px;
	right: 6px;
	z-index: 2;
	line-height: 0;
	background-color: white;
	border-radius: 50px;
}
.provence-saved-articles .favorites-list > li > :last-child,
.provence-saved-articles .favorites-list > li > :last-child * {
	cursor: pointer;
}

/* ---------- 8.4 Tablet: 2 per row, mobile: 1 per row ---------- */
@media (max-width: 1024px) {
	.provence-saved-articles .favorites-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.provence-saved-articles .favorites-list {
		grid-template-columns: 1fr;
	}
}


/* ---------- 8.5 Empty list: "You have no saved articles yet." ----------
   Same look as the empty Subscription and Billing tabs (10.1): Inter, centered.
   The message sits inside the card grid, so it spans all columns.
   No extra space above it: same distance from the tabs as on the Subscription tab. */
.provence-saved-articles .favorites-list:has(> .no-favorites) {
	margin-top: 0;
}
.provence-saved-articles .favorites-list > .no-favorites {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #1e1e1e;
	text-align: center;
}




/* =====================================================================
   9. PAGE-SPECIFIC RULES
   ===================================================================== */

/* Account page (ID 20781): the gift plan (ID 20881) is hidden in the Change plan form */
body.page-id-20781 .pms-subscription-plan:has(input[value="20881"]) {
	display: none !important;
}




/* =====================================================================
   10. LOGIN PAGE AND OTHER SERVICE PAGES
   ===================================================================== */

/* ---------- 10.1 Account tabs: empty states ----------
   Subscription tab without a subscription: the message above the Subscribe button
   (the button is added by the PHP snippet, section 7).
   Billing tab without payments: "No payments found".
   Same text style as the values in the Subscription and Billing tables. */
body p:has(+ a.provence-subscribe-btn),
body p.pms-no-payments {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #1e1e1e;
	text-align: center;
}

/* ---------- 10.2 Subscribe button on the Subscription tab ----------
   Same look as the site buttons (section 3), repeated here so this section is self-contained */
body a.provence-subscribe-btn {
	display: block;
	box-sizing: border-box;
	width: 220px;
	margin: 24px auto 0;
	padding: 10px 0;
	border: 1px solid var(--e-global-color-e965da6);
	border-radius: 0;
	background: var(--e-global-color-e965da6);
	box-shadow: none;
	font-family: "Inter", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--e-global-color-accent);
	cursor: pointer;
}
/* Hover: inversion (same for all site buttons) */
body a.provence-subscribe-btn:hover {
	background: var(--e-global-color-accent);
	color: var(--e-global-color-e965da6);
}




/* ---------- 10.3 Log In form: layout ----------
   Log In page and the Account page for guests (same PMS form #pms_login).
   Values from the Figma frame "account - log in".
   Order: "Don't have an account yet?" line, Google button, Email, Password,
   "Forgot your password?", Log In button. Nextend puts the Google button
   at the end of the form with its own script, so it is moved up with "order". */
body main:has(#pms_login) .page-header {
	margin-bottom: 16px; /* title -> "Don't have an account yet?" */
}
body form#pms_login {
	display: flex;
	flex-direction: column;
	margin: 0;
}
body form#pms_login > p {
	margin: 0;
}
body form#pms_login > .provence-login-register {
	order: -2;
}
body form#pms_login > #nsl-custom-login-form-1 {
	order: -1;
}
/* Plugin leftovers: the paragraph holding the Nextend styles and an empty paragraph
   (the styles inside still work when the paragraph is hidden) */
body form#pms_login > p.login-extra,
body form#pms_login > p:empty {
	display: none;
}

/* ---------- 10.4 "Don't have an account yet? Choose a plan" and "Forgot your password?" ---------- */
body form#pms_login > p.provence-login-register,
body form#pms_login > p.provence-login-lost {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
body form#pms_login > p.provence-login-register {
	margin: 0 0 34px;
	text-align: center;
}
body form#pms_login > p.provence-login-lost {
	margin: 0 0 20px;
}
body form#pms_login > p.provence-login-register a,
body form#pms_login > p.provence-login-lost a,
body form#pms_login > p.provence-login-register a:hover,
body form#pms_login > p.provence-login-lost a:hover {
	color: #000;
	text-decoration: underline;
}
body form#pms_login > p.provence-login-register a {
	margin-left: 8px; /* 12px gap in the design together with the space */
}

/* ---------- 10.5 Google button (Nextend Social Login) ---------- */
body form#pms_login #nsl-custom-login-form-1 {
	margin: 0 0 44px;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-container {
	margin: 0;
	padding: 0;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-container-buttons {
	display: block;
	padding: 0;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-container-buttons a {
	display: block;
	width: 100%;
	margin: 0;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px #808080; /* frame drawn inside, so the size does not change */
}
body form#pms_login #nsl-custom-login-form-1 .nsl-button:hover {
	box-shadow: inset 0 0 0 1px #000;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-button-svg-container {
	padding: 0;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-button-label-container {
	flex: 0 0 auto;
	margin: 0 0 0 12px;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
body form#pms_login #nsl-custom-login-form-1 .nsl-button-label-container b {
	font-weight: 700;
}

/* ---------- 10.6 Email and Password: same look as the Profile fields (section 2) ---------- */
body form#pms_login > p.login-username {
	margin: 0 0 26px;
}
body form#pms_login > p.login-password {
	position: relative; /* anchor for the Show / Hide button (section 2) */
	margin: 0 0 48px;
}
body form#pms_login > p.login-username > label,
body form#pms_login > p.login-password > label {
	display: block;
	margin: 0 0 8px;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #808080;
}
body form#pms_login > p.login-username > input,
body form#pms_login > p.login-password > input {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 10px;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	outline: none;
	transition: none !important;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.03em;
	text-align: left;
	color: #808080;
}
body form#pms_login > p.login-username > input:focus,
body form#pms_login > p.login-password > input:focus {
	outline: none !important;
	box-shadow: none !important;
	border: 1px solid #000 !important;
	color: #000;
}
body form#pms_login > p > input::placeholder {
	color: #808080;
	opacity: 1; /* Firefox makes placeholders paler by default */
}
/* Chrome autofill: no blue/yellow fill */
body form#pms_login input:-webkit-autofill,
body form#pms_login input:-webkit-autofill:hover,
body form#pms_login input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #000;
	transition: background-color 9999s ease-in-out 0s !important;
}

/* ---------- 10.7 Log In button: site button (section 3), full width ---------- */
body form#pms_login > p.login-submit {
	margin: 0;
}
body form#pms_login input[type="submit"] {
	width: 100%;
}







/* ---------- 10.8 Reset Password form (step 1: e-mail) ----------
   Texts come from the PHP snippet, section 9. The field look is in section 2. */
body main:has(#pms_recover_password_form) .page-header {
	margin-bottom: 16px; /* title -> intro text, as on the Log In page */
}
body #pms_recover_password_form p.provence-reset-intro {
	margin: 0 0 44px;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem; /* Billing text is 1.125rem, here a bit larger */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: center;
	color: #1e1e1e;
}
body #pms_recover_password_form input[type="submit"] {
	width: 100%; /* full width, as on the Log In page */
}

/* ---------- 10.9 Placeholders in all PMS form fields: same grey as the field text ---------- */
body .pms-form .pms-field input::placeholder {
	color: #808080;
	opacity: 1; /* Firefox makes placeholders paler by default */
}





/* ---------- 10.10 Field errors (all PMS forms): small red text under the field, no box ----------
   Same size and font as the success / error messages (section 4), only red */
body .pms-form .pms_field-errors-wrapper {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
}
body .pms-form .pms_field-errors-wrapper p {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: #c62828;
}

/* ---------- 10.11 PMS pages that show only a message (no form, no account tabs) ----------
   E.g. Reset Password after sending the e-mail: "Please check your email ...".
   Same frame and title as the other PMS pages (section 1), 20px from the title
   to the message, message text centered. */
body main:has(.pms_success-messages-wrapper, .pms_error-messages-wrapper):not(:has(.pms-form, .pms-account-navigation)) .page-content {
	width: calc(100% - 32px);
	max-width: 660px;
	margin: 0 auto;
	padding-bottom: 250px; /* space before the footer */
}
body main:has(.pms_success-messages-wrapper, .pms_error-messages-wrapper):not(:has(.pms-form, .pms-account-navigation)) .page-header {
	margin: 80px 0 20px;
	padding: 0;
	text-align: center;
}
body main:has(.pms_success-messages-wrapper, .pms_error-messages-wrapper):not(:has(.pms-form, .pms-account-navigation)) .page-header .entry-title {
	margin: 0;
	font-family: "Ivar Display", serif;
	font-size: 2.5rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
body main:has(.pms_success-messages-wrapper, .pms_error-messages-wrapper):not(:has(.pms-form, .pms-account-navigation)) .page-content > div p {
	text-align: center;
}


/* ---------- 10.12 Reset Password form (step 2: new password, opened from the e-mail link) ----------
   Same look as step 1 (10.8). The field look is in section 2. */
body main:has(#pms_new_password_form) .page-header {
	margin-bottom: 16px; /* title -> intro text, as in step 1 */
}
body #pms_new_password_form > p {
	margin: 0 0 40px;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: center;
	color: #1e1e1e;
}
body #pms_new_password_form input[type="submit"] {
	width: 100%; /* full width, as on the Log In page */
}




/* ---------- 10.13 Log In errors (empty / wrong email or password) ----------
   Texts come from the PHP snippet, section 10; the PHP (10.2) also moves the error
   into the form, right after the "Don't have an account yet?" line.
   Same look as the field errors (10.10): small red text, no box. */
body .page-content p.pms-login-error,
body form#pms_login > p.pms-login-error {
	padding: 0;
	border: 0;
	background: none;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: #c62828;
}
body form#pms_login > p.pms-login-error {
	order: -1; /* same as the Google button; the error comes first in the HTML, so it stands above it */
	margin: 0 0 20px;
	text-align: center;
}
/* "Don't have an account yet?" line: less space below when the error follows it */
body form#pms_login > p.provence-login-register:has(+ p.pms-login-error) {
	margin-bottom: 20px;
}







/* =====================================================================
   11. CHECKOUT AND ADJUST PLAN: PLAN CARD
   The plan block of the PMS forms looks like the plan cards on the
   Subscribe page. Values are copied from the Custom CSS of the plan widget
   on the Subscribe page: change both together.
   Texts ("$50/year", "Save 40%") come from the PHP snippet, section 11.
   Three PMS forms get the same plan cards:
   - #pms_register-form: Checkout, guest (account fields + plan + payment);
   - #pms_new_subscription-form: Checkout, logged in without a subscription
     (e.g. after Google sign-in): plan + payment only;
   - #pms-change-subscription-form: Account -> Subscription -> Adjust
     ("Change Monthly to:" + plans + payment), see also 11.10.
   Card = .pms-subscription-plan.
   - One plan (link from Subscribe, single_plan=yes): there is no radio in the
     markup, so a checked radio is drawn by CSS and the card has a black border.
   - Several plans (Checkout without a plan, Adjust): real radios,
     cards one under another, the selected one has a black border.
   ===================================================================== */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-field-subscriptions {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

/* ---------- 11.1 Card ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan {
	position: relative; /* anchor for the badge */
	margin: 0 0 1rem;
	padding: 1.25rem 1rem;
	border: 1px solid #e5e5e5;
	color: #000;
	transition: border-color 0.2s ease;
}
/* Selected card: the only plan, or the checked radio */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan:has(> input[type="hidden"][name="subscription_plans"]),
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan:has(input:checked) {
	border-color: #000;
}

/* ---------- 11.2 Grid: radio column + text column ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan > label {
	display: grid;
	grid-template-columns: 1.125rem 1fr;
	column-gap: 0.625rem;
	row-gap: 0.25rem;
	align-items: center;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan:has(> input[type="hidden"][name="subscription_plans"]) > label {
	cursor: default; /* nothing to choose */
}

/* ---------- 11.3 Radio: real one (several plans) and a drawn one (one plan) ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan > label > input[type="radio"] {
	grid-column: 1;
	grid-row: 1;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: #000;
	cursor: pointer;
}
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan > label:not(:has(input[type="radio"]))::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	box-sizing: border-box;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid #000;
	border-radius: 50%;
	background: #000;
	box-shadow: inset 0 0 0 3px #fff; /* white ring around the black dot */
}

/* ---------- 11.4 Plan name: Inter 20px / 150% / 3% ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-name {
	grid-column: 2;
	grid-row: 1;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #000;
}

/* ---------- 11.5 Price: Inter 16px / 150% / 3% ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-price {
	grid-column: 2;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #000;
}
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-price span {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
/* Trial / sign-up fee: only if PMS fills them */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan > label > span:empty {
	display: none;
}
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-trial,
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-sign-up-fee {
	grid-column: 2;
}

/* ---------- 11.6 Description: Inter 13px / 100%, under the price, aligned with the name ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-subscription-plan-description {
	margin: 1rem 0 0; /* 0.25rem row gap + 0.75rem, as on the Subscribe page */
	padding: 0 0 0 1.75rem; /* radio 1.125rem + gap 0.625rem */
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	color: #000;
}

/* ---------- 11.7 "Save 40%" badge: Inter 14px / 100% / 0 ---------- */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .provence-plan-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	padding: 0.4375rem 0.75rem;
	background: #000;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
}

/* ---------- 11.8 Subscribe button: full width, as on the Log In page ----------
   Checkout forms only. The two forms mark the button differently;
   the discount "Apply" button is not touched. The Adjust form keeps its
   two buttons side by side (section 3). */
body #pms_register-form input.pms-form-submit,
body #pms_new_subscription-form input[name="pms_new_subscription"] {
	width: 100%;
}


/* ---------- 11.9 Stripe payment block: full form width ----------
   Stripe sizes its iframe by the container (width: calc(100% + 8px)),
   so the PMS wrappers around it are let out to the full form width.
   The fields inside the iframe stay as Stripe draws them. */
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) .pms-paygates-holder,
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) #pms-stripe-connect,
body :is(#pms_register-form, #pms_new_subscription-form, #pms-change-subscription-form) #pms-stripe-payment-elements {
	width: auto;
	max-width: none;
}


/* ---------- 11.10 Adjust plan: "Change Monthly to:" and spacing ----------
   Same look as the intro text on the Reset Password page (10.8):
   16px from the title, Inter 1.25rem centered, 44px to the first card.
   The plan name is not bold. */
body main:has(#pms-change-subscription-form) .page-header {
	margin-bottom: 16px;
}
body #pms-change-subscription-form .pms-upgrade__message {
	margin: 0 0 44px;
	padding: 0;
}
body #pms-change-subscription-form .pms-upgrade__message p {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: center;
	color: #1e1e1e;
}
body #pms-change-subscription-form .pms-upgrade__message strong {
	font-weight: inherit;
}
/* Space between the last card and "Payment Details", as on the Checkout (1rem card + 1.5rem) */
body #pms-change-subscription-form .pms-upgrade__group {
	margin: 0 0 1.5rem;
}



/* ---------- 11.11 Adjust plan: "Change Subscription" and "Go back" buttons ----------
   Both buttons together take the full form width: two equal columns
   with a 20px gap (instead of two 220px buttons, section 3).
   Everything else in the form spans both columns.
   On a phone the buttons stand one under another. */
body form#pms-change-subscription-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
}
body form#pms-change-subscription-form > :not(input[type="submit"]) {
	grid-column: 1 / -1;
}
body form#pms-change-subscription-form > input[type="submit"] {
	width: 100%;
	margin: 20px 0 0;
}
@media (max-width: 767px) {
	body form#pms-change-subscription-form {
		grid-template-columns: 1fr;
	}
}





/* ---------- 11.12 Discount / promo code (Checkout, Redeem Gift) ----------
   PMS shows this block only while at least one discount code is active.
   Label = form field labels (section 2). Field + Apply button in one row
   on the full form width, the field look comes from section 2, the button
   look from section 3 (only sizes are set here, so the hover still works).
   Messages ("Discount successfully applied...", errors) under the row.
   Texts (label, placeholder) will come from the PHP snippet. */

/* Space under the plan card: 1rem card margin + 1.75rem = 44px */
body #pms-subscription-plans-discount {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.25rem;
	align-items: stretch;
	margin: 1.75rem 0 0;
	padding: 0;
}

/* Label: same as EMAIL, FULL NAME (section 2), on its own line */
body #pms-subscription-plans-discount > label {
	grid-column: 1 / -1;
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #808080;
}

/* Field: stretches to the button, 52px high like the other fields */
body #pms-subscription-plans-discount #pms_subscription_plans_discount_code {
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 3.25rem;
	margin: 0;
	float: none;
}

/* Apply button: same height as the field, width by its text (45px side padding, as Elementor buttons) */
body #pms-subscription-plans-discount #pms-apply-discount {
	width: auto;
	height: 3.25rem;
	margin: 0;
	padding: 0 2.8125rem;
	float: none;
}

/* Messages under the row: small text, as the field errors (10.10) */
body #pms-subscription-plans-discount-messages-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
}
body #pms-subscription-plans-discount-messages,
body #pms-subscription-plans-discount-messages-loading {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: #1e1e1e;
}
body #pms-subscription-plans-discount-messages-loading {
	color: #808080;
}
body #pms-subscription-plans-discount-messages.pms-discount-success {
	color: #327306; /* same green as the success messages (section 4) */
}
body #pms-subscription-plans-discount-messages.pms-discount-error {
	color: #c62828; /* same red as the field errors (10.10) */
}

/* Space between the promo code block and "Payment Details": 44px */
body :is(#pms_register-form, #pms_new_subscription-form) .pms-field-subscriptions:has(#pms-subscription-plans-discount) {
	margin-bottom: 2.75rem;
}







/* =====================================================================
   12. PROFILE: LOCKED E-MAIL AND FULL NAME, PENCIL TO EDIT
   The PHP snippet (section 12) makes these fields readonly and adds
   a pencil button after each one; a click on the pencil unlocks the field.
   Locked field: does not react to clicks (no black border, no text cursor),
   so it does not look broken. Unlocked field: normal look (section 2).
   ===================================================================== */

/* Space on the right for the pencil (locked and unlocked) */
body #pms_edit-profile-form .pms-field input[data-provence-lock] {
	padding-right: 44px;
}

/* Locked: no reaction to clicks or focus */
body #pms_edit-profile-form .pms-field input[data-provence-lock][readonly] {
	pointer-events: none;
	cursor: default;
}
body #pms_edit-profile-form .pms-field input[data-provence-lock][readonly]:focus,
body #pms_edit-profile-form .pms-field input[data-provence-lock][readonly]:active {
	border: 1px solid #e6e6e6 !important;
	color: #808080 !important;
}

/* Pencil: inside the field, right side, vertically centered.
   Field top = label 14px + 8px gap; field height 52px -> center at 48px. */
body #pms_edit-profile-form .provence-edit-toggle,
body #pms_edit-profile-form .provence-edit-toggle:hover,
body #pms_edit-profile-form .provence-edit-toggle:focus {
	position: absolute;
	top: 48px;
	right: 12px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	outline: none;
	color: #808080;
	cursor: pointer;
}
body #pms_edit-profile-form .provence-edit-toggle:hover {
	color: #000;
}
body #pms_edit-profile-form .provence-edit-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* After unlocking the pencil is no longer needed */
body #pms_edit-profile-form .provence-edit-toggle.is-active {
	display: none;
}