/*
 * WooCommerce - brand layer.
 *
 * Loaded only on shop, cart, checkout and account pages (see
 * inc/woocommerce-theme.php), after global.css, so every token is available
 * and equal-specificity rules win on order.
 *
 * The approach is the same one inc/bootstrap.php uses for Bootstrap: both
 * WooCommerce systems expose CSS custom properties, so the brand is applied by
 * remapping those names rather than by restating WooCommerce's rules. Nothing
 * here copies a WooCommerce declaration, so a plugin update cannot leave a
 * stale duplicate behind.
 *
 * Two systems are covered:
 *   1. Cart / Checkout blocks   - `.wc-block-*`
 *   2. Classic PHP templates    - `.woocommerce`, product + account pages
 *
 * My Account is the one screen that needs layout as well as skin - it arrives
 * as a shortcode inside an ordinary page, so it gets neither the shop wrapper
 * nor a block layout. Section 5 supplies it, against the shell in
 * woocommerce/myaccount/. Section 6 does the same for the thank-you,
 * order-pay and order-detail screens.
 *
 * No hex values, font families or px type sizes: tokens.css only.
 */

/* =========================================================================
   1. Cart and Checkout blocks
   =========================================================================
   WooCommerce Blocks reads a small set of `--wp--preset--*` and
   `--wc-block-*` properties for its own typography and colour. Setting them
   on the block roots restyles the whole checkout - fields, panels, totals and
   notices - without a single component-level override.
   ------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-blue: var(--color-accent);
	--wc-green: var(--color-accent);
	--wc-red: #b3261e;
	--wc-primary: var(--color-primary);
	--wc-primary-text: var(--color-on-primary);
	--wc-highlight: var(--color-accent);
	--wc-content-bg: var(--color-bg);
	--wc-surface: var(--color-bg);
	--wc-secondary: var(--color-surface);
	--wc-secondary-text: var(--color-text);
	--wc-separator-color: var(--color-border-subtle);

	font-family: var(--font-body);
	font-size: var(--fs-p2);
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* Headings inside checkout follow the brand scale, not WooCommerce's. */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2 {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	letter-spacing: var(--ls-h3);
}

.wc-block-components-title {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
	color: var(--color-text-muted);
	font-size: var(--fs-p3);
}

/* --- Fields -------------------------------------------------------------
   Matched to Bootstrap's .form-control as restyled in global.css, so a
   checkout field and a contact-form field are the same control. */

.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-textarea,
.wc-blocks-components-select__container {
	font-family: var(--font-body);
	font-size: var(--fs-p2);
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-md);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
	outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading-content,
.wc-blocks-components-select__label {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* --- Buttons ------------------------------------------------------------
   "Place Order" and its siblings take the primary button treatment defined
   in global.css: brand navy, accent-blue hover, the brand radius. */

.wc-block-components-button:not(.is-link) {
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	border-radius: var(--tp-radius-btn);
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-on-primary);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
}

.wc-block-components-button:not(.is-link):active {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.wc-block-components-button.is-link {
	color: var(--color-link);
}

.wc-block-components-button.is-link:hover {
	color: var(--color-link-hover);
}

/* Checkout's own "Place order" is a full-width variant of the above. */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	font-size: var(--fs-p2);
	padding: 0.95rem 2rem;
}

/* --- Order summary panel ------------------------------------------------ */

/*
 * The boxed treatment belongs to the summary container alone. Applying it to
 * every panel in the sidebar would box each disclosure inside it too, so
 * "Add coupons" and "Details" would read as text inputs rather than as rows
 * to open - see section 4, which draws them.
 */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar > .wc-block-components-order-summary {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
}

.wc-block-components-totals-item__label {
	color: var(--color-text-muted);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.wc-block-components-order-summary-item__title,
.wc-block-components-product-name {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	text-decoration: none;
}

/* --- Payment method list ------------------------------------------------ */

.wc-block-components-radio-control__option {
	border-radius: var(--tp-radius-md);
}

.wc-block-components-radio-control__option:hover {
	background-color: var(--color-tint);
}

/*
 * ...but not in the payment method list, which needs its own treatment.
 *
 * WooCommerce builds each method as an accordion option: a label row, an
 * expanding description, a 1px container border drawn as an `:after` overlay,
 * and - when selected - a ring drawn as an `inset` box-shadow on the option.
 * Three things made that read badly against the brand:
 *
 *   - the tint above sat on the label *inside* the option, and a child's
 *     background always paints over its parent's inset shadow, so the tint
 *     covered the ring and squared off across the rounded corners;
 *   - the ring is `currentColor`, which inherits the near-black body text;
 *   - the description is indented 16px while the label clears the radio at
 *     48px, so the two columns of text did not line up.
 *
 * Painting the tint on the option itself solves the first: on a single element
 * the inset shadow paints above the background, so the ring stays crisp and
 * the fill is clipped to the same rounded rect the border describes.
 */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	border-radius: 0;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__option:hover {
	background-color: transparent;
}

/* The card radius, not WooCommerce's 4px - overlay and option agree. */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border-radius: var(--tp-radius-md);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background-color: var(--color-tint);
}

/* The selected ring in the brand accent rather than inherited body text. */
.wc-block-checkout__payment-method
.wc-block-components-radio-control--highlight-checked
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

/*
 * Keep the accent ring above the container border.
 *
 * The radio control draws its own 1px border as an absolutely positioned
 * `:after` overlay. WooCommerce drops that overlay's top and bottom edge when
 * the first or last option is selected, but never its left and right - and
 * because the overlay is positioned it paints after the options, so those two
 * grey lines sat on top of the accent ring and the card read as a blue top
 * with grey sides. The option is already `position: relative`, so lifting it
 * one step is enough for the ring to win on all four edges.
 */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	z-index: 1;
}

/*
 * The description belongs to the label, so it starts on the label's text
 * column - 48px, the room WooCommerce leaves for the radio. It is given no
 * background of its own: a child background paints over the parent's inset
 * ring, which is what cut the accent outline off halfway down the card.
 */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
	padding: 0 16px 16px 48px;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
}

.wc-block-components-radio-control__label {
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

/* --- Notices ------------------------------------------------------------ */

.wc-block-components-notice-banner {
	border-radius: var(--tp-radius-md);
	font-size: var(--fs-p3);
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--color-accent);
	background-color: var(--color-tint);
	color: var(--color-text);
}

/*
 * Standing in for the checkout that cannot be completed: when no gateway is
 * available WooCommerce prints this notice, and it should still look like the
 * site rather than a plugin default.
 */
.wc-block-checkout__no-payment-methods-placeholder,
.wc-block-checkout__payment-method .wc-block-components-notice-banner.is-error {
	border-radius: var(--tp-radius-md);
}

/* =========================================================================
   2. Classic templates - product page, shop, account
   =========================================================================
   The product and account pages still come from WooCommerce's PHP templates,
   whose `.button` is not a Bootstrap `.btn`. Rather than duplicate the button
   rules, the brand values are set once here against WooCommerce's own class.
   ------------------------------------------------------------------------- */

.tp-woocommerce .woocommerce-breadcrumb {
	font-size: var(--fs-p2);
	color: var(--color-text-muted);
	margin-bottom: var(--tp-space-lg);
}

.tp-woocommerce .woocommerce-breadcrumb a {
	color: var(--color-text-muted);
}

.tp-woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--color-link);
}

.tp-woocommerce .product_title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	color: var(--color-heading);
}

/*
 * The plan price on a product page. Scoped to the product, not to every
 * amount in the scope: the order tables on the account and checkout-endpoint
 * screens carry the same class, and a 24px figure in a table row would read
 * as a heading.
 */
.tp-woocommerce div.product .woocommerce-Price-amount,
.tp-woocommerce div.product p.price {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}

.tp-woocommerce .woocommerce-product-details__short-description {
	font-size: var(--fs-p1);
	color: var(--color-text-muted);
	max-width: var(--measure);
}

/* The feature list stored as the product description. */
.tp-woocommerce .woocommerce-Tabs-panel--description ul,
.tp-woocommerce .woocommerce-product-details__short-description ul {
	list-style: none;
	padding-left: 0;
}

.tp-woocommerce .woocommerce-Tabs-panel--description li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--tp-space-sm);
}

.tp-woocommerce .woocommerce-Tabs-panel--description li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}

/* Buttons in classic markup.
 *
 * WooCommerce qualifies its own button selectors with the element
 * (`.woocommerce a.button`, `button.button`, `input.button`), which outranks a
 * bare class at equal class count - so those forms are listed here too, or the
 * submit on an account form keeps WooCommerce grey. */
.tp-woocommerce .button,
.tp-woocommerce a.button,
.tp-woocommerce button.button,
.tp-woocommerce input.button,
.woocommerce-message .button,
.woocommerce-info .button {
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	border-radius: var(--tp-radius-btn);
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-on-primary);
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.tp-woocommerce .button:hover,
.tp-woocommerce a.button:hover,
.tp-woocommerce button.button:hover,
.tp-woocommerce input.button:hover,
.tp-woocommerce .button:focus-visible,
.tp-woocommerce button.button:focus-visible,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
}

/* Store notices and messages.
 *
 * Laid out as a flex row so the action WooCommerce floats to the right wraps
 * under the text instead of over it once the notice is narrower than the two
 * of them together. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tp-space-sm) var(--tp-space-md);
	border-top-color: var(--color-accent);
	background-color: var(--color-surface);
	border-radius: var(--tp-radius-md);
	font-size: var(--fs-p3);
	color: var(--color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-accent);
}

/* The clearfix WooCommerce draws after a notice would be a flex item here. */
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	display: none;
}

/* WooCommerce puts the action before the message in the markup and floats it
   back to the right. `order` is what keeps it after the sentence it acts on
   once the two no longer share a line. */
.tp-woocommerce .woocommerce-message .button,
.tp-woocommerce .woocommerce-info .button,
.tp-woocommerce .woocommerce-error .button {
	float: none;
	order: 1;
	margin-left: auto;
}

/* Tabs on the product page. */
.tp-woocommerce .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
}

.tp-woocommerce .woocommerce-tabs ul.tabs a {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
}

/* Related products are noise on a three-plan store. */
.tp-woocommerce .related.products,
.tp-woocommerce .up-sells {
	display: none;
}

/* =========================================================================
   3. Subscriptions
   =========================================================================
   WooCommerce Subscriptions adds a recurring-price suffix ("/ month"), a
   renewal summary at checkout and a Subscriptions table in My Account. None
   of it is styled by the two sections above, because none of it existed when
   they were written - and all of it is customer-facing.
   ------------------------------------------------------------------------- */

/*
 * The recurring suffix on a price. Quieter than the amount it follows, so
 * "$5 / month" reads as one price rather than two competing figures.
 */
.tp-woocommerce .subscription-details,
.wc-block-components-product-price .subscription-details {
	font-family: var(--font-body);
	font-size: var(--fs-p3);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* The sign-up / renewal summary under the order total at checkout. */
.wc-block-components-totals-item__description {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* "Next payment" and other recurring dates read as data, not as body copy. */
.tp-woocommerce .first-payment-date {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* =========================================================================
   4. Order summary
   =========================================================================
   The checkout's right-hand panel: the line item, the coupon disclosure, the
   totals, and the recurring summary Subscriptions adds beneath them.

   Two things drive the treatment here. The plans carry no product image, so
   the summary's image slot renders as an empty grey square - and every panel
   in this column is a disclosure, which WooCommerce draws as a full-width
   bordered box that reads like a text input rather than something to open.
   ------------------------------------------------------------------------- */

/*
 * No product images exist in this store - the plans are virtual, and the cart
 * reports an empty `images` array - so the slot is dropped rather than shown
 * as an empty placeholder. The quantity badge lives inside it, which is no
 * loss: every plan is `sold_individually`, so the count is always 1.
 *
 * Delete this rule if the shop ever sells something with a photograph.
 */
.wc-block-components-order-summary-item__image {
	display: none;
}

.wc-block-components-order-summary-item {
	gap: 0;
	padding-block: var(--tp-space-md);
}

/* The line item's own text column, now that it spans the full width. */
.wc-block-components-order-summary-item__description {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--fs-p2);
	line-height: var(--lh-tight);
}

/*
 * The recurring line ("$9.00 every month") sits directly under the name and
 * is the more important of the two figures - it is what recurs - so it keeps
 * the brand navy while the right-hand column carries the amount due today.
 */
.wc-block-components-order-summary-item__individual-prices {
	font-size: var(--fs-p3);
	color: var(--color-text);
}

.wc-block-components-order-summary-item__total-price {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	white-space: nowrap;
}

/* --- Disclosures: "Add coupons" and "Details" ---------------------------
   WooCommerce renders these as a bordered block that looks like an input
   waiting to be typed into. They are buttons, so they are drawn as a quiet
   full-width row: a rule above to separate them, brand type, and the chevron
   pushed out to the right margin. */

.wc-block-components-panel__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--tp-space-sm);
	margin: 0;
	padding-block: var(--tp-space-md);
	border: 0;
	background: none;
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.wc-block-components-panel__button:hover {
	color: var(--color-accent);
}

.wc-block-components-panel__button:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--tp-radius-sm);
}

/* The chevron: last in the row, and it follows the label's colour. */
.wc-block-components-panel__button-icon {
	flex-shrink: 0;
	margin-left: auto;
	fill: currentColor;
	transition: transform 0.15s ease-in-out;
}

.wc-block-components-panel__content {
	padding-block: 0 var(--tp-space-md);
	margin: 0;
}

/* --- The coupon form, once the disclosure is open ----------------------- */

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: var(--tp-space-sm);
	align-items: flex-start;
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	margin: 0;
}

.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	border-radius: var(--tp-radius-btn);
	font-size: var(--fs-p3);
}

/* --- Totals rows -------------------------------------------------------- */

.wc-block-components-totals-wrapper {
	padding-block: var(--tp-space-md);
}

/*
 * WooCommerce draws a rule above every totals group, including the first one
 * under the line item, which doubles up with the item's own separator.
 */
.wc-block-components-totals-wrapper::after {
	border-color: var(--color-border-subtle);
}

/* "Total due today" - the one figure the buyer is agreeing to right now. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
}

/* --- The recurring summary Subscriptions appends ------------------------ */

.wcs-recurring-totals-panel {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.wcs-recurring-totals-panel__title {
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.wcs-recurring-totals-panel__details-total {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

/*
 * "Starting: October 14, 2026" - the date the first renewal falls on. Set
 * apart from the amount above it, because it answers a different question.
 */
.wcs-recurring-totals__subscription-length {
	display: block;
	margin-top: 0.15rem;
	color: var(--color-text-muted);
}

/*
 * The recurring block's own "Details" disclosure sits last in the panel, so
 * it needs the gap the panel's padding would otherwise leave it without.
 */
.wcs-recurring-totals-panel .wc-block-components-panel__button {
	padding-bottom: 0;
}

/*
 * Inset for the panel itself. WooCommerce spaces the rows vertically but
 * leaves them against the left and right edges, which is what pushes the
 * "Details" row up against the border in the corner.
 */
.wp-block-woocommerce-checkout-order-summary-block {
	padding-inline: var(--tp-space-lg);
	padding-block: var(--tp-space-sm) var(--tp-space-md);
}

.wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-title {
	padding-block: var(--tp-space-md) 0;
}

/* The summary is a sidebar card; on one column it needs room beneath it. */
@media (max-width: 48rem) {
	.wc-block-checkout__sidebar {
		margin-bottom: var(--tp-space-xl);
	}
}

/* =========================================================================
   5. My Account
   =========================================================================
   The account screens are classic WooCommerce markup arriving as a shortcode
   inside an ordinary page, so they get neither the shop wrapper nor the block
   editor's layout. inc/woocommerce-theme.php puts `.tp-woocommerce` on the
   body so sections 2 and 3 above reach them, and the shell they sit in comes
   from the two template overrides in woocommerce/myaccount/.

   What this section adds is the layout WooCommerce leaves to a pair of
   percentage floats, and the brand skin for the tables, forms and navigation
   the endpoints are built from. Nothing here is scoped to a single endpoint:
   Dashboard, Orders, Subscriptions, Downloads, Addresses and Account details
   are all the same three ingredients.
   ------------------------------------------------------------------------- */

/* --- The page it sits on ------------------------------------------------
   page.php holds every child of `.tp-content-flow` to a 48rem reading
   measure. That is right for prose and wrong for a two-column dashboard.

   The measure it is widened to is Bootstrap's `.container`, because that is
   what the header card and every section on the site sit on - anything else
   and the account page starts at a different left edge from the menu above
   it. The class cannot simply be added to the markup, which comes from a
   shortcode, so its steps are mirrored here; the 1.5rem gutter the flow
   already applies is Bootstrap's own, so the two line up exactly. */

.woocommerce-account .tp-content-flow > .woocommerce {
	max-width: 100%;
	/* Bootstrap's container gutter is half `--bs-gutter-x`; the flow applies a
	   whole one, which would offset the page 12px in from the header card. */
	padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

@media (min-width: 576px) {
	.woocommerce-account .tp-content-flow > .woocommerce { max-width: 540px; }
}

@media (min-width: 768px) {
	.woocommerce-account .tp-content-flow > .woocommerce { max-width: 720px; }
}

@media (min-width: 992px) {
	.woocommerce-account .tp-content-flow > .woocommerce { max-width: 960px; }
}

@media (min-width: 1200px) {
	.woocommerce-account .tp-content-flow > .woocommerce { max-width: 1140px; }
}

@media (min-width: 1400px) {
	.woocommerce-account .tp-content-flow > .woocommerce { max-width: 1320px; }
}

/* --- Layout ------------------------------------------------------------- */

.tp-account {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tp-space-lg);
	align-items: start;
}

/* lg, where the header menu opens out too, so the page changes shape once. */
@media (min-width: 62rem) {
	.tp-account {
		/* Fluid, so the content column keeps its width at the narrow end of
		   the range: a fixed 17rem sidebar leaves the orders table wrapping
		   every cell at 992px. The 15rem floor is what an icon, its gap and
		   "My Subscription" need on one line. */
		grid-template-columns: clamp(15rem, 20%, 17rem) minmax(0, 1fr);
		gap: var(--tp-space-xl);
	}

	/*
	 * The sidebar is shorter than most endpoints; following the reader down
	 * keeps the section links reachable without a scroll back to the top.
	 */
	.tp-account__sidebar {
		position: sticky;
		top: calc(var(--tp-space-lg) + var(--wp-admin--admin-bar--height, 0px));
	}
}

/*
 * WooCommerce floats the two columns at 30% / 68%. The grid above places
 * them, so the floats are undone rather than fought with - left in, they
 * would take the content column out of flow and collapse the card around it.
 */
.woocommerce-account .tp-account .woocommerce-MyAccount-navigation,
.woocommerce-account .tp-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* --- The two cards ------------------------------------------------------ */

.tp-account__sidebar,
.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--color-white);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
}

.tp-account__sidebar {
	padding: var(--tp-space-md);
}

.woocommerce-account .woocommerce-MyAccount-content {
	padding: var(--tp-space-lg);
	font-size: var(--fs-p2);
	color: var(--color-text);
}

@media (min-width: 62rem) {
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: var(--tp-space-xl);
	}
}

/* Endpoint templates end on a table, a form or a notice, each of which
   carries its own bottom margin into the card's padding. */
.woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* --- Signed-in identity ------------------------------------------------- */

.tp-account__identity {
	display: flex;
	align-items: center;
	gap: var(--tp-space-sm);
	padding: var(--tp-space-sm) var(--tp-space-sm) var(--tp-space-md);
	margin-bottom: var(--tp-space-sm);
	border-bottom: 1px solid var(--color-border-subtle);
}

.tp-account__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--tp-radius-pill);
	background-color: var(--color-tint);
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-accent-hover);
}

/* min-width:0, or the email's ellipsis never triggers inside the flex row. */
.tp-account__identity-text {
	min-width: 0;
}

.tp-account__name {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-heading);
}

.tp-account__email {
	display: block;
	overflow: hidden;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Navigation ---------------------------------------------------------
   One list, two shapes. Below lg it is a wrapping row of pills above the
   content - wrapping rather than scrolling, so nothing is hidden off the
   right edge of a phone. From lg it is the sidebar's stacked menu. */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tp-space-xs);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

@media (min-width: 62rem) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.125rem;
	}
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.625rem 0.875rem;
	border-radius: var(--tp-radius-btn);
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background-color: var(--color-light);
	color: var(--color-primary);
}

.woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--color-tint);
	font-weight: var(--fw-semibold);
	color: var(--color-accent-hover);
}

/*
 * Icons, from lg up, where the menu is a column with room for them; the row
 * of pills below lg stays text only, so it wraps onto fewer lines on a phone.
 *
 * Drawn as masks over `currentColor`, so an icon takes its link's colour in
 * every state with no second set of rules, and keyed by WooCommerce's
 * per-endpoint class so the navigation template stays WooCommerce's. An
 * endpoint with no icon here - one a plugin adds - keeps an empty slot of the
 * same width, so its label still lines up with the rest.
 */
@media (min-width: 62rem) {
	.woocommerce-MyAccount-navigation a {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.woocommerce-MyAccount-navigation a::before {
		content: "";
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		/* Transparent unless the item names an icon: an unmasked box would
		   paint a solid square. */
		background-color: var(--tp-nav-icon-paint, transparent);
		-webkit-mask: var(--tp-nav-icon, none) center / contain no-repeat;
		mask: var(--tp-nav-icon, none) center / contain no-repeat;
	}

	.woocommerce-MyAccount-navigation-link--dashboard,
	.woocommerce-MyAccount-navigation-link--orders,
	.woocommerce-MyAccount-navigation-link--subscriptions,
	.woocommerce-MyAccount-navigation-link--edit-address,
	.woocommerce-MyAccount-navigation-link--payment-methods,
	.woocommerce-MyAccount-navigation-link--edit-account,
	.woocommerce-MyAccount-navigation-link--customer-logout {
		--tp-nav-icon-paint: currentColor;
	}

	.woocommerce-MyAccount-navigation-link--dashboard {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7V20a1 1 0 0 1-1 1H15v-6H9v6H4.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--orders {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3h6v2.5H9zM9 11h6M9 15h6'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--subscriptions {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4M4 13a8 8 0 0 0 14.3 4.9L20 16M20 20v-4h-4'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--edit-address {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--payment-methods {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--edit-account {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		--tp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
	}
}

/* Log out is not a section of the account; from lg it is set below a rule. */
@media (min-width: 62rem) {
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: var(--tp-space-sm);
		padding-top: var(--tp-space-sm);
		border-top: 1px solid var(--color-border-subtle);
	}
}

/* --- Headings inside the content column --------------------------------- */

/* The order-pay heading in section 6 is the same object on another screen. */
.tp-account__title,
.tp-order-pay__title {
	margin: 0 0 var(--tp-space-md);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-heading);
}

/* Endpoint templates emit a bare <h2> (Addresses, Edit address, the order
   detail sections). Those are subheads under the title, not page titles. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	color: var(--color-heading);
}

.woocommerce-MyAccount-content h2:not(:first-child),
.woocommerce-MyAccount-content h3:not(:first-child) {
	margin-top: var(--tp-space-lg);
}

.tp-account__lede {
	margin-bottom: var(--tp-space-lg);
	color: var(--color-text-muted);
}

.tp-account__lede strong {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

/* --- Dashboard ----------------------------------------------------------
   The dashboard is not an endpoint and is not one card: my-account.php marks
   its column `.is-dashboard`, which drops the content card so the panels in
   woocommerce/myaccount/plan.php can be cards of their own, and the welcome
   line sits under the title as its subtitle.

   Layout is by container query, not viewport, because the column's width
   depends on the sidebar beside it as much as on the screen: the current
   plan and billing panels sit side by side once the column can hold both,
   and the current plan splits into summary | actions once it alone can. */

.woocommerce-account .tp-account__main.is-dashboard .woocommerce-MyAccount-content {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.tp-account__main.is-dashboard .tp-account__title {
	margin-bottom: var(--tp-space-xs);
}

.tp-account__main.is-dashboard .tp-account__lede {
	margin-bottom: var(--tp-space-lg);
}

.tp-dashboard {
	display: grid;
	gap: var(--tp-space-lg);
	container: tp-dashboard / inline-size;
}

.tp-dashboard__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tp-space-lg);
	align-items: stretch;
}

@container tp-dashboard (min-width: 60rem) {
	.tp-dashboard__top.has-billing {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	}
}

/* Panels: the same white card the endpoints sit in. */
.tp-panel {
	min-width: 0;
	padding: var(--tp-space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
}

/* Qualified by the content column, to outrank its bare h2/h3 rules and the
   `:not(:first-child)` margin they carry. */
.woocommerce-MyAccount-content .tp-dashboard .tp-panel__title {
	display: flex;
	align-items: center;
	gap: var(--tp-space-sm);
	margin: 0 0 var(--tp-space-lg);
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
}

.woocommerce-MyAccount-content .tp-dashboard .tp-panel__subtitle {
	margin: 0 0 var(--tp-space-md);
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-semibold);
}

.tp-panel__note {
	margin: 0 0 var(--tp-space-md);
	color: var(--color-text-muted);
}

.tp-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Buttons: WooCommerce's brand `.button` from section 2, full width here so
   a column of them reads as one set of choices; plus an outline variant for
   the secondary action. */
.tp-woocommerce .tp-dashboard a.button.tp-button {
	display: block;
	text-align: center;
}

.tp-woocommerce .tp-dashboard a.button.tp-button--outline {
	background-color: var(--color-white);
	border-color: var(--color-border);
	color: var(--color-primary);
}

.tp-woocommerce .tp-dashboard a.button.tp-button--outline:hover,
.tp-woocommerce .tp-dashboard a.button.tp-button--outline:focus-visible {
	background-color: var(--color-surface);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.tp-link {
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-link);
	text-decoration: none;
}

.tp-link:hover,
.tp-link:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.tp-link--arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: var(--tp-space-xs);
	transition: transform 0.15s ease-in-out;
}

.tp-link--arrow:hover::after,
.tp-link--arrow:focus-visible::after {
	transform: translateX(0.125rem);
}

/* Price: figure and period on one baseline, as on a pricing card. */
.tp-plan-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem;
	margin: 0;
	line-height: 1.1;
}

.tp-plan-price__amount {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-h3);
	color: var(--color-heading);
}

.tp-plan-price__suffix {
	font-size: var(--fs-p3);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

.tp-plan-price--lg .tp-plan-price__suffix {
	font-size: var(--fs-p2);
}

/* --- Current plan -------------------------------------------------------- */

.tp-current-plan {
	container: tp-current-plan / inline-size;
}

.tp-current-plan__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tp-space-lg);
}

/* Actions under the summary, below a rule, until there is room beside it. */
.tp-current-plan__manage {
	padding-top: var(--tp-space-lg);
	border-top: 1px solid var(--color-border-subtle);
}

@container tp-current-plan (min-width: 36rem) {
	.tp-current-plan__body {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 0;
	}

	.tp-current-plan__summary {
		padding-right: var(--tp-space-lg);
	}

	.tp-current-plan__manage {
		padding: 0 0 0 var(--tp-space-lg);
		border-top: 0;
		border-left: 1px solid var(--color-border-subtle);
	}
}

.tp-current-plan__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tp-space-xs) var(--tp-space-sm);
	margin-bottom: var(--tp-space-xs);
}

.tp-current-plan__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-h3);
	color: var(--color-heading);
}

.tp-current-plan__text {
	margin: var(--tp-space-xs) 0 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.tp-current-plan__renewal {
	display: flex;
	align-items: flex-start;
	gap: var(--tp-space-sm);
	margin-top: var(--tp-space-lg);
	padding-top: var(--tp-space-lg);
	border-top: 1px solid var(--color-border-subtle);
	color: var(--color-heading);
}

.tp-current-plan__renewal p {
	margin: 0;
}

.tp-current-plan__renewal-date {
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.tp-current-plan__renewal-note {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.tp-current-plan__actions {
	display: grid;
	gap: var(--tp-space-sm);
}

.tp-current-plan__top {
	margin: 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* Status pill. Green only for a plan that is live; every other state - on
   hold, pending cancellation - is neutral, so green keeps meaning "fine". */
.tp-status {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border-radius: var(--tp-radius-pill);
	background-color: var(--color-surface);
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	color: var(--color-text-muted);
}

.tp-status::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: currentColor;
}

.tp-status.is-active,
.tp-status.is-completed,
.tp-status.is-processing {
	background-color: var(--color-success-tint);
	color: var(--color-success);
}

/* --- Auto-renewal -------------------------------------------------------
   The switch is WooCommerce Subscriptions' own markup, driven by its own
   script, but its stylesheet is only loaded on View Subscription - so the
   switch is drawn here, from the same class names. The script colours the
   track with the link colour when it is on; the rule below sets the same
   thing, so there is no flash before it runs. It ships `--hidden`, and the
   script reveals it: without the script there is nothing to operate. */

.tp-auto-renew {
	margin-top: var(--tp-space-lg);
	padding-top: var(--tp-space-lg);
	border-top: 1px solid var(--color-border-subtle);
}

.tp-auto-renew__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tp-space-sm);
}

.woocommerce-MyAccount-content .tp-dashboard .tp-auto-renew__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
}

.tp-auto-renew__state {
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.tp-auto-renew__note {
	margin: var(--tp-space-xs) 0 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.tp-dashboard .subscription-auto-renew-toggle {
	display: inline-flex;
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.tp-dashboard .subscription-auto-renew-toggle--hidden {
	display: none;
}

/* Unavailable rather than working: Subscriptions' staging mode, see plan.php. */
.tp-dashboard .subscription-auto-renew-toggle:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.tp-dashboard .subscription-auto-renew-toggle--disabled {
	cursor: progress;
	opacity: 0.6;
}

.tp-dashboard .subscription-auto-renew-toggle:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--tp-radius-pill);
}

.tp-dashboard .subscription-auto-renew-toggle__i {
	position: relative;
	display: block;
	width: 2.75rem;
	height: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--tp-radius-pill);
	background-color: var(--color-border);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.tp-dashboard .subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i {
	background-color: var(--color-link);
	border-color: var(--color-link);
}

.tp-dashboard .subscription-auto-renew-toggle__i::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background-color: var(--color-white);
	transform: translateY(-50%);
	transition: transform 0.15s ease-in-out;
}

.tp-dashboard .subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i::before {
	transform: translate(1.25rem, -50%);
}

/* --- Billing & payment --------------------------------------------------- */

.tp-billing {
	display: flex;
	flex-direction: column;
}

.tp-billing__method {
	display: flex;
	align-items: center;
	gap: var(--tp-space-md);
	min-width: 0;
}

/* The card brand as text in a card-shaped chip, or a card icon when there
   is no saved card to name - no brand artwork is shipped. */
.tp-billing__brand {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	min-width: 3.5rem;
	height: 2.5rem;
	padding: 0 var(--tp-space-sm);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-md);
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}

.tp-billing__method-text {
	min-width: 0;
}

.tp-billing__method-name {
	display: block;
	font-weight: var(--fw-medium);
	color: var(--color-heading);
	overflow-wrap: anywhere;
}

.tp-billing__method-detail {
	display: block;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.tp-billing__update {
	margin-top: var(--tp-space-lg);
	padding-top: var(--tp-space-md);
	border-top: 1px solid var(--color-border-subtle);
}

/* --- Available plans ------------------------------------------------------ */

/* Title left, Monthly / Yearly switch right; the switch drops under the
   title once the two no longer share a line. */
.tp-available-plans__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tp-space-sm) var(--tp-space-md);
	margin-bottom: var(--tp-space-lg);
}

.woocommerce-MyAccount-content .tp-dashboard .tp-available-plans__head .tp-panel__title {
	margin: 0;
}

/*
 * The switch is the Pricing Plans block's, from the block's own stylesheet,
 * which tp_account_plan_enqueue_scripts() loads here. At homepage scale it is
 * a 66px bar of 24px labels - a section's centrepiece, not a panel control -
 * so it is set here at the scale that sheet already uses on a phone, and
 * everything else about it (colours, knob travel, badge, focus ring, reduced
 * motion) is left to the block.
 *
 * The block's sheet prints ahead of this one, so these win at equal
 * specificity; the `.tp-available-plans` qualifier is what beats its
 * `.tp-pricing .tp-pricing__billing` margin.
 */
.tp-available-plans .tp-pricing__billing {
	margin: 0;
}

.tp-available-plans .tp-pricing__billing-inner {
	flex-wrap: wrap;
	gap: var(--tp-space-sm) 0.75rem;
	padding: var(--tp-space-xs) var(--tp-space-xs) var(--tp-space-xs) 0.875rem;
	border-radius: var(--tp-radius-btn);
}

.tp-available-plans .tp-pricing__billing-label {
	font-size: var(--fs-p3);
}

.tp-available-plans .tp-pricing__switch {
	width: 3rem;
	height: 1.625rem;
}

.tp-available-plans .tp-pricing__switch-knob {
	inset-block-start: 0.1875rem;
	inset-inline-start: 0.1875rem;
	width: 1.25rem;
	height: 1.25rem;
}

.tp-available-plans .tp-pricing__switch[aria-checked="true"] .tp-pricing__switch-knob {
	transform: translateX(1.375rem);
}

.tp-available-plans .tp-pricing__save {
	padding: 0.25rem 0.5rem;
	font-size: var(--fs-p3);
	border-radius: var(--tp-radius-md);
}

/* "billed yearly" under a yearly price quoted per month. Always in the
   layout, empty on Monthly, so switching never changes a card's height. */
.tp-plan-price__note {
	min-height: calc(1em * var(--lh-body));
	margin: var(--tp-space-xs) 0 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.tp-plan-grid {
	display: grid;
	/* min(), so a card never asks for more than a phone is wide. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--tp-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Also a `.tp-pricing__card`, for the block's script: its wash and shadow are
   the homepage card's, not this one's, so they are cleared here. */
.tp-plan-option {
	display: flex;
	flex-direction: column;
	gap: var(--tp-space-sm);
	min-width: 0;
	padding: var(--tp-space-lg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-card);
	background-color: var(--color-white);
	background-image: none;
	box-shadow: none;
}

.tp-plan-option.is-current {
	border-color: var(--color-accent);
	background-color: var(--color-tint);
}

.tp-plan-option__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tp-space-xs) var(--tp-space-sm);
}

.woocommerce-MyAccount-content .tp-dashboard .tp-plan-option__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
}

.tp-plan-option__badge {
	flex: 0 0 auto;
	padding: 0.125rem 0.5rem;
	border-radius: var(--tp-radius-md);
	background-color: var(--color-tint-line);
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--color-accent-hover);
}

.tp-plan-option__summary {
	margin: 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* The feature ticks are the product page's device from section 2. */
.tp-plan-option__features {
	display: grid;
	gap: var(--tp-space-xs);
	margin: var(--tp-space-xs) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-p3);
	color: var(--color-text);
}

.tp-plan-option__features li {
	position: relative;
	padding-left: 1.75rem;
}

.tp-plan-option__features li::before,
.tp-plan-option__state.is-current::before {
	content: "";
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.tp-plan-option__features li::before {
	position: absolute;
	left: 0.125rem;
	top: 0.4em;
	color: var(--color-heading);
}

/* `auto` pins the button to the foot, so buttons line up across a row. */
.tp-plan-option__foot {
	margin-top: auto;
	padding-top: var(--tp-space-md);
}

/* The current and included plans have nothing to click: a quiet slab the
   size of the button beside them, not a disabled button. */
.tp-plan-option__state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tp-space-sm);
	padding: 0.75rem 1.5rem;
	border-radius: var(--tp-radius-btn);
	background-color: var(--color-surface);
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-align: center;
	color: var(--color-text-muted);
}

.tp-plan-option__state.is-current {
	background-color: var(--color-tint-line);
	color: var(--color-accent-hover);
}

.tp-plan-option__state.is-current::before {
	margin-top: -0.2em;
}

/* --- Toasts --------------------------------------------------------------
   assets/js/account.js reports every account action it performs without a
   reload here: a stack fixed to the top-right corner, below the admin bar
   when there is one. A toast is a white card with a coloured edge and a
   matching mark - a spinner while working, then a tick, an "i" or a "!" -
   so the state reads before the words do. On a phone the stack spans the
   screen inside the usual gutter instead of hanging off one side. */

.tp-toasts {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tp-space-md));
	right: var(--tp-space-md);
	z-index: 1090;
	display: flex;
	flex-direction: column;
	gap: var(--tp-space-sm);
	width: min(24rem, calc(100vw - 2 * var(--tp-space-md)));
	pointer-events: none;
}

.tp-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem 2.75rem 0.875rem var(--tp-space-md);
	border: 1px solid var(--color-border-subtle);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--tp-radius-md);
	background-color: var(--color-white);
	box-shadow: var(--tp-shadow-md);
	color: var(--color-text);
	pointer-events: auto;
	animation: tp-toast-in 0.2s ease-out;
}

.tp-toast.is-leaving {
	opacity: 0;
	transform: translateX(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The mark: a circle in the state's colour, carrying a glyph or a spinner. */
.tp-toast::before {
	content: "";
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.0625rem;
	border-radius: 50%;
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.tp-toast.is-success {
	border-left-color: var(--color-success);
}

.tp-toast.is-success::before {
	content: "\2713";
	background-color: var(--color-success-tint);
	color: var(--color-success);
}

.tp-toast.is-info {
	border-left-color: var(--color-accent);
}

.tp-toast.is-info::before {
	content: "i";
	background-color: var(--color-tint);
	color: var(--color-accent-hover);
}

.tp-toast.is-error {
	border-left-color: var(--color-danger);
}

.tp-toast.is-error::before {
	content: "!";
	background-color: var(--color-danger-tint);
	color: var(--color-danger);
}

.tp-toast.is-loading {
	border-left-color: var(--color-accent);
}

.tp-toast.is-loading::before {
	box-sizing: border-box;
	border: 2px solid var(--color-tint-line);
	border-top-color: var(--color-accent);
	animation: tp-spin 0.7s linear infinite;
}

.tp-toast__message {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-p3);
	line-height: var(--lh-body);
	overflow-wrap: anywhere;
}

.tp-toast__close {
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--tp-radius-sm);
	background: none;
	font-size: var(--fs-p1);
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}

.tp-toast__close:hover,
.tp-toast__close:focus-visible {
	background-color: var(--color-surface);
	color: var(--color-heading);
}

.tp-toast__close:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 1px;
}

@media (max-width: 36rem) {
	.tp-toasts {
		left: var(--tp-space-md);
		width: auto;
	}
}

@keyframes tp-toast-in {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}
}

@keyframes tp-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-toast,
	.tp-toast.is-leaving {
		animation: none;
		transition: none;
	}

	/* A still ring still says "working"; a spinning one is not needed. */
	.tp-toast.is-loading::before {
		animation: none;
	}
}

/* --- Processing and invalid states --------------------------------------
   While an account action runs (assets/js/account.js), the button that
   started it shows a spinner and what it is doing in place of its label -
   held at its own size by the script, so nothing around it moves - and it
   and its form's fields are disabled. The auto-renewal switch has no label
   to replace, so its knob becomes the spinner instead. A field an error was
   about gets a red border, from WooCommerce's own `woocommerce-invalid` row
   class, until it is edited. */

.tp-woocommerce .button.is-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tp-space-sm);
	white-space: nowrap;
}

/* The full-width buttons stay full width. */
.tp-woocommerce .tp-dashboard a.button.tp-button.is-loading,
.woocommerce-account .woocommerce-form-login__submit.is-loading,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"].is-loading {
	display: flex;
}

/* In the button's own text colour, so it reads on the filled button and the outline one alike. */
.tp-button-spinner {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tp-spin 0.7s linear infinite;
}

.tp-dashboard .subscription-auto-renew-toggle.is-loading .subscription-auto-renew-toggle__i::before {
	background-color: transparent;
	border: 2px solid var(--color-white);
	border-right-color: transparent;
	animation: tp-spin-knob 0.7s linear infinite;
}

/* The knob is centred with a translate, which the spin has to keep. */
@keyframes tp-spin-knob {
	from {
		transform: translateY(-50%) rotate(0deg);
	}
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

.tp-dashboard .subscription-auto-renew-toggle--on.is-loading .subscription-auto-renew-toggle__i::before {
	animation-name: tp-spin-knob-on;
}

@keyframes tp-spin-knob-on {
	from {
		transform: translate(1.25rem, -50%) rotate(0deg);
	}
	to {
		transform: translate(1.25rem, -50%) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-button-spinner,
	.tp-dashboard .subscription-auto-renew-toggle.is-loading .subscription-auto-renew-toggle__i::before {
		animation: none;
	}
}

/* A control whose action is in flight: it cannot be pressed again. */
.tp-woocommerce .is-busy,
.tp-woocommerce a.button.is-busy {
	cursor: progress;
	opacity: 0.65;
	pointer-events: none;
}

/*
 * A disabled or busy button keeps its colour and its label, only fainter.
 * WooCommerce's own `button.button:disabled[disabled]` repaints it grey with
 * body-coloured text - a blank bar that no longer says what it is - so this
 * is qualified to out-rank that.
 */
.tp-woocommerce .woocommerce button.button:disabled[disabled],
.tp-woocommerce .woocommerce button.button.is-busy {
	padding: 0.75rem 1.5rem;
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	cursor: progress;
	opacity: 0.7;
}

.tp-woocommerce .woocommerce .input-text:disabled,
.tp-woocommerce .woocommerce select:disabled,
.tp-woocommerce .woocommerce input[type="checkbox"]:disabled {
	background-color: var(--color-surface);
	cursor: progress;
	opacity: 0.7;
}

.tp-woocommerce .woocommerce .form-row.woocommerce-invalid .input-text,
.tp-woocommerce .woocommerce .form-row.woocommerce-invalid select,
.tp-woocommerce .woocommerce .form-row.woocommerce-invalid .select2-selection,
.tp-woocommerce .woocommerce .input-text[aria-invalid="true"] {
	border-color: var(--color-danger);
}

.tp-woocommerce .woocommerce .form-row.woocommerce-invalid .input-text:focus,
.tp-woocommerce .woocommerce .input-text[aria-invalid="true"]:focus {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--color-danger-tint);
}

/* WooCommerce colours the label red too; the border says it, the label stays readable. */
.tp-woocommerce .woocommerce .form-row.woocommerce-invalid label {
	color: var(--color-text);
}

/* --- Order tables -------------------------------------------------------
   Orders, Subscriptions, Downloads, the order and subscription detail
   tables, and the same tables again on the thank-you and order-pay screens
   in section 6 - hence the `.tp-woocommerce` scope rather than an account
   one. inc/woocommerce-theme.php puts that class on exactly the screens
   built from these templates.

   WooCommerce draws them as a bordered, rounded box with a rule around every
   cell. Inside a card that is a box in a box, so the frame is dropped and the
   rows are separated by a single rule. Below 768px WooCommerce's own
   small-screen sheet stacks each row onto its `data-title` labels; that
   behaviour is left alone and inherits the type set here. */

.tp-woocommerce .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--tp-space-lg);
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--fs-p2);
}

.tp-woocommerce .woocommerce table.shop_table:last-child {
	margin-bottom: 0;
}

.tp-woocommerce .woocommerce table.shop_table th,
.tp-woocommerce .woocommerce table.shop_table td {
	padding: var(--tp-space-md) var(--tp-space-sm);
	border: 0;
	border-bottom: 1px solid var(--color-border-subtle);
	text-align: left;
	vertical-align: middle;
}

.tp-woocommerce .woocommerce table.shop_table thead th {
	padding-block: var(--tp-space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* A row header - the order number cell - is data, not a heading. */
.tp-woocommerce .woocommerce table.shop_table tbody th {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
}

.tp-woocommerce .woocommerce table.shop_table tbody tr:last-child th,
.tp-woocommerce .woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* The headless two-column tables - subscription details, order totals - put
   the label in the first cell instead. */
.tp-woocommerce .woocommerce table.subscription_details td:first-child,
.tp-woocommerce .woocommerce table.shop_table tfoot th {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.tp-woocommerce .woocommerce table.shop_table a:not(.button) {
	color: var(--color-link);
	text-decoration: none;
}

.tp-woocommerce .woocommerce table.shop_table a:not(.button):hover,
.tp-woocommerce .woocommerce table.shop_table a:not(.button):focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/*
 * Status.
 *
 * WooCommerce prints the status name as bare text in the cell - there is no
 * element inside it to make a pill of, and pilling the cell itself would box
 * the whole column. The row carries the status as a class, so the label is
 * coloured and weighted instead: readable at a glance, and it survives the
 * small-screen stacking unchanged.
 */
.tp-woocommerce .woocommerce td.order-status,
.tp-woocommerce .woocommerce td.subscription-status {
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
}

.tp-woocommerce .woocommerce .woocommerce-orders-table__row--status-active td.order-status,
.tp-woocommerce .woocommerce .woocommerce-orders-table__row--status-active td.subscription-status,
.tp-woocommerce .woocommerce .woocommerce-orders-table__row--status-completed td.order-status,
.tp-woocommerce .woocommerce .woocommerce-orders-table__row--status-processing td.order-status {
	color: var(--color-accent-hover);
}

/* Dates are supporting detail next to the figures beside them. */
.tp-woocommerce .woocommerce td.subscription-next-payment small,
.tp-woocommerce .woocommerce td.order-date {
	color: var(--color-text-muted);
}

/* A table action is secondary to the row it sits in. The margin is on every
   button rather than between them, so a row of three that wraps keeps its
   spacing on the second line - `display: flex` on a `td` would cost the cell
   its place in the table's column model. */
.tp-woocommerce .woocommerce td .button,
.tp-woocommerce .woocommerce td .woocommerce-button {
	display: inline-block;
	margin: 0 var(--tp-space-xs) var(--tp-space-xs) 0;
	padding: 0.4rem 0.9rem;
	font-size: var(--fs-p3);
	white-space: nowrap;
}

/* --- Forms: Account details, Edit address, Login ------------------------
   WooCommerce lays its form rows out with 47% floats and clearing divs. A
   two-column grid does the same job, collapses to one column on a phone, and
   keeps the gap even - the floats leave the last row hanging when the count
   is odd. */

.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tp-space-md) var(--tp-space-lg);
	align-items: start;
}

/* Everything spans both columns unless WooCommerce paired it. */
.woocommerce-MyAccount-content form.edit-account > *,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > *,
.woocommerce-account .woocommerce-form-login > *,
.woocommerce-account .woocommerce-form-register > *,
.woocommerce-account .woocommerce-ResetPassword > * {
	grid-column: 1 / -1;
	margin: 0;
}

/* Child selectors, to outrank the span-both rule above at equal specificity. */
.woocommerce-MyAccount-content form.edit-account > .form-row-first,
.woocommerce-MyAccount-content form.edit-account > .form-row-last,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last,
.woocommerce-account .woocommerce-form > .form-row-first,
.woocommerce-account .woocommerce-form > .form-row-last {
	grid-column: span 1;
}

@media (max-width: 36rem) {
	.woocommerce-MyAccount-content form.edit-account,
	.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register,
	.woocommerce-account .woocommerce-ResetPassword {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The float widths and clearing divs the grid replaces. */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-account .woocommerce-form .form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.woocommerce-MyAccount-content form .clear,
.woocommerce-account .woocommerce-form .clear,
.woocommerce-account .woocommerce-ResetPassword .clear {
	display: none;
}

.woocommerce-MyAccount-content form label,
.woocommerce-account .woocommerce-form label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-account .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: var(--tp-space-xs);
	font-size: var(--fs-p2);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.woocommerce-MyAccount-content form .required,
.woocommerce-account .woocommerce-form .required,
.woocommerce-account .woocommerce-ResetPassword .required {
	color: var(--color-accent);
	text-decoration: none;
}

/*
 * The control. Matched to Bootstrap's `.form-control` as restyled in
 * global.css and to the checkout field in section 1, so a field is the same
 * field wherever it appears on the site.
 */
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-form .input-text,
.woocommerce-account .woocommerce-form select,
.woocommerce-account .woocommerce-ResetPassword .input-text {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-family: var(--font-body);
	font-size: var(--fs-p2);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-md);
}

.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-account .woocommerce-form .input-text:focus,
.woocommerce-account .woocommerce-form select:focus,
.woocommerce-account .woocommerce-ResetPassword .input-text:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
	outline: none;
}

/* select2 stands in for the country and state selects on Addresses. */
.woocommerce-MyAccount-content .select2-container .select2-selection--single {
	height: auto;
	padding: 0.25rem;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-md);
}

.woocommerce-MyAccount-content .select2-container--focus .select2-selection--single {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Password change is a group within the form, not a boxed aside. */
.woocommerce-MyAccount-content form fieldset {
	padding: var(--tp-space-lg) 0 0;
	margin: var(--tp-space-sm) 0 0;
	border: 0;
	border-top: 1px solid var(--color-border-subtle);
}

/*
 * A legend is out of flow by default, which in a grid child leaves the
 * fieldset's first row sitting under it. Floating it puts it back in the
 * column and lets the margin below it hold.
 */
.woocommerce-MyAccount-content form legend {
	float: left;
	width: 100%;
	margin-bottom: var(--tp-space-md);
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.woocommerce-MyAccount-content form fieldset .form-row + .form-row {
	margin-top: var(--tp-space-md);
}

/* The hint under "Display name", and the password strength read-out. */
.woocommerce-MyAccount-content form span em,
.woocommerce-MyAccount-content .woocommerce-password-hint,
.woocommerce-MyAccount-content .woocommerce-password-strength {
	display: block;
	margin-top: var(--tp-space-xs);
	font-size: var(--fs-p3);
	font-style: normal;
	color: var(--color-text-muted);
}

/* --- Addresses ---------------------------------------------------------- */

.tp-woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--tp-space-lg);
}

/*
 * WooCommerce lays a column pair out as 48% floats around a clearfix, at
 * `.woocommerce .col2-set .col-1` - three classes. The grid places them, so
 * both are undone, and the selectors have to match that weight to do it.
 * This covers the login screen too, which is the same markup.
 */
.tp-woocommerce .col2-set::before,
.tp-woocommerce .col2-set::after {
	display: none;
}

.tp-woocommerce .col2-set > .col-1,
.tp-woocommerce .col2-set > .col-2,
.tp-woocommerce .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
}

.tp-woocommerce .woocommerce-Addresses .woocommerce-Address {
	padding: var(--tp-space-lg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-card);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tp-space-xs) var(--tp-space-sm);
	margin-bottom: var(--tp-space-sm);
}

/* The title keeps its line; it is the Edit link that drops below when the
   card is too narrow for both. */
.woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	flex: 1 0 auto;
	margin: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	flex-shrink: 0;
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
}

.woocommerce-MyAccount-content address {
	margin: 0;
	font-size: var(--fs-p2);
	font-style: normal;
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Pagination --------------------------------------------------------- */

.woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: var(--tp-space-sm);
	justify-content: flex-end;
	margin-top: var(--tp-space-lg);
}

/* --- Signed out: the login form -----------------------------------------
   Its own centred card rather than the two-column shell, which has nothing
   to put in a sidebar until someone is signed in.

   `form.` is what makes the card land: WooCommerce sets the border, padding
   and `margin: 2em 0` at `.woocommerce form.login`, and a bare class loses
   to it - which is what leaves the card hard against the left edge. */

/* WooCommerce prints the screen title as a bare <h2> above the form. */
.woocommerce-account .woocommerce > h2 {
	margin: 0 0 var(--tp-space-lg);
	/* font-size: var(--fs-h3); */
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-heading);
	text-align: center;
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-ResetPassword,
.woocommerce-account #customer_login {
	max-width: 30rem;
	margin-inline: auto;
	padding: var(--tp-space-xl);
	background-color: var(--color-white);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
}

/* Remember me and any other checkbox in these forms. */
.woocommerce-account .woocommerce-form input[type="checkbox"],
.woocommerce-MyAccount-content input[type="checkbox"] {
	accent-color: var(--color-accent);
}

/* With registration enabled WooCommerce puts the two forms side by side, and
   the heading above them reads as a column title rather than a page one. */
.woocommerce-account:has(#customer_login) .woocommerce > h2 {
	text-align: left;
}

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--tp-space-xl);
	max-width: var(--tp-container-max);
}

.woocommerce-account #customer_login > div {
	float: none;
	width: auto;
}

.woocommerce-account #customer_login form.woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	max-width: none;
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--tp-space-md);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-heading);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--tp-space-xs);
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
	width: 100%;
}

/* The lost-password form opens on a sentence of instructions, and the
   confirmation after it is one: supporting copy, at the card's small size. */
.woocommerce-account .woocommerce-ResetPassword > p:not(.form-row),
.woocommerce-account .woocommerce > p:not([class]) {
	font-size: var(--fs-p2);
	color: var(--color-text-muted);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 0;
	font-size: var(--fs-p3);
}

/* =========================================================================
   6. Order pay, thank you, and the order detail
   =========================================================================
   Three screens printed as classic templates onto the block Checkout page,
   so they get neither the checkout block's layout nor the account shell:

     order-pay       the payment form for an order already placed
     order-received  the thank-you page
     view-order      the same detail sections again, inside the account card

   The tables on all three are already drawn by section 5 - they are the same
   `.shop_table` markup, under the same `.tp-woocommerce` scope. What is left
   is the furniture around them.
   ------------------------------------------------------------------------- */

/*
 * A measure of their own. 48rem is the reading column page.php gives every
 * child of `.tp-content-flow`, which is narrow for a five-column order table
 * and wide for a payment form, so each is set to what it holds.
 */
.woocommerce-order-received .tp-content-flow > .woocommerce {
	max-width: 52rem;
}

.woocommerce-order-pay .tp-content-flow > .woocommerce {
	max-width: 36rem;
}

/* --- Thank you ---------------------------------------------------------- */

/*
 * The confirmation line. The gateway supplies the wording, so this is the one
 * piece of the page whose text the theme does not control - it is given a
 * panel and a tick rather than a heading, which would put a sentence where a
 * title belongs.
 */
.woocommerce-order .woocommerce-thankyou-order-received {
	display: flex;
	align-items: flex-start;
	gap: var(--tp-space-md);
	margin-bottom: var(--tp-space-lg);
	padding: var(--tp-space-lg);
	background-color: var(--color-tint);
	border-radius: var(--tp-radius-lg);
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-medium);
	line-height: 1.35;
	color: var(--color-primary);
}

/* The tick, drawn from two borders - the device section 2 uses for the plan
   feature list, so the page ships no icon of its own. */
.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "";
	flex-shrink: 0;
	width: 0.85rem;
	height: 0.45rem;
	margin-top: 0.4em;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}

/*
 * The order overview - number, date, email, total, payment method. A row of
 * label-over-value pairs rather than WooCommerce's dashed-rule strip of
 * floats, so the five facts can be read across in one pass. They wrap to as
 * many rows as the width allows, and to one column on a phone.
 *
 * The selectors carry `ul.order_details` because that is the weight
 * WooCommerce's own float rules are written at.
 */
.woocommerce-order ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--tp-space-md) var(--tp-space-lg);
	margin: 0 0 var(--tp-space-xl);
	padding: var(--tp-space-lg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
	list-style: none;
}

/* The clearfix WooCommerce draws around the list would be two blank cells. */
.woocommerce-order ul.order_details::before,
.woocommerce-order ul.order_details::after {
	display: none;
}

.woocommerce-order ul.order_details li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--fs-p3);
	line-height: var(--lh-tight);
	color: var(--color-text-muted);
	text-transform: none;
}

.woocommerce-order ul.order_details li strong {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-heading);
	text-transform: none;
	overflow-wrap: break-word;
}
/* The gateway's follow-up lines - "Your subscription will be activated when
   payment clears." - sit between the overview and the detail table. */
.woocommerce-order > p {
	color: var(--color-text-muted);
}

/* --- Order and customer detail -----------------------------------------
   Shared by the thank-you page and the account's View order screen, so the
   selectors name the sections rather than either page. */

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-bottom: var(--tp-space-xl);
}

.woocommerce-order-details:last-child,
.woocommerce-customer-details:last-child {
	margin-bottom: 0;
}

.tp-woocommerce .woocommerce-order-details__title,
.tp-woocommerce .woocommerce-column__title,
.tp-woocommerce .woocommerce-order-details > header h2,
.tp-woocommerce .woocommerce-customer-details h2 {
	margin: 0 0 var(--tp-space-md);
	font-family: var(--font-heading);
	font-size: var(--fs-p1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	color: var(--color-heading);
}

/* "Related subscriptions" follows the order table inside the same section. */
.tp-woocommerce .woocommerce-order-details > header {
	margin-top: var(--tp-space-xl);
}

.tp-woocommerce .woocommerce-customer-details address {
	margin: 0;
	padding: var(--tp-space-lg);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-card);
	font-size: var(--fs-p2);
	font-style: normal;
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Order pay ----------------------------------------------------------
   One card holding what is being paid for and how, because that is the whole
   page. */

.woocommerce-order-pay form#order_review {
	padding: var(--tp-space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-lg);
}

@media (min-width: 48rem) {
	.woocommerce-order-pay form#order_review {
		padding: var(--tp-space-xl);
	}
}

.woocommerce-order-pay form#order_review > table.shop_table {
	margin-bottom: var(--tp-space-lg);
}

/* --- The payment method list --------------------------------------------
   WooCommerce scopes this whole block by `#payment`, so the brand version has
   to as well - no class selector can reach it. Drawn to read like the method
   list the block checkout shows in section 1: a row per gateway, with the
   gateway's own blurb beneath the one selected. */

.woocommerce-order-pay #payment {
	padding: 0;
	background: none;
	border-radius: 0;
}

.woocommerce-order-pay #payment ul.payment_methods {
	margin: 0 0 var(--tp-space-lg);
	padding: 0;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--tp-radius-md);
	list-style: none;
	overflow: hidden;
}

.woocommerce-order-pay #payment ul.payment_methods > li {
	margin: 0;
	padding: var(--tp-space-md);
	border-bottom: 1px solid var(--color-border-subtle);
	line-height: var(--lh-tight);
}

.woocommerce-order-pay #payment ul.payment_methods > li:last-child {
	border-bottom: 0;
}

.woocommerce-order-pay #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--tp-space-sm);
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-p2);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	cursor: pointer;
}

.woocommerce-order-pay #payment ul.payment_methods li img {
	max-height: 1.5rem;
	width: auto;
	margin: 0;
}

.woocommerce-order-pay #payment ul.payment_methods li input {
	accent-color: var(--color-accent);
	margin: 0 var(--tp-space-sm) 0 0;
}

/* The gateway's own blurb, shown once its method is selected. WooCommerce
   gives it a lilac panel and a speech-bubble arrow; here it is just the
   supporting line it reads as. */
.woocommerce-order-pay #payment div.payment_box {
	margin: var(--tp-space-sm) 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.woocommerce-order-pay #payment div.payment_box::before {
	display: none;
}

.woocommerce-order-pay #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-order-pay #payment div.form-row {
	padding: 0;
}
/* --- Terms and the pay button ------------------------------------------- */

.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper,
.woocommerce-order-pay .woocommerce-privacy-policy-text {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

.woocommerce-order-pay .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: var(--tp-space-md);
}

/* The one action on the page, so it takes the full width of the card. */
.tp-woocommerce #place_order {
	display: block;
	width: 100%;
	padding: 0.95rem 2rem;
	font-size: var(--fs-p2);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.tp-woocommerce #place_order:hover,
.tp-woocommerce #place_order:focus {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}
.wc-block-components-order-summary-item__image {
    display: none !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description{
	padding: unset !important;
}