/*
 * CSO Account Styles
 * My Account, WooCommerce Subscriptions and order confirmation, in the CSO Cape Town brand.
 * Loaded only on those pages, after WooCommerce's own CSS has been removed.
 *
 * Colours and font come from the Elementor global kit (set in the child theme),
 * so changing a global colour in Elementor updates these pages too.
 *
 * Contents
 *  1. Tokens
 *  2. Base and theme resets
 *  3. Account layout and navigation
 *  4. Dashboard
 *  5. Notices
 *  6. Buttons
 *  7. Forms
 *  8. Login and register
 *  9. Tables
 * 10. Status dots
 * 11. Orders and order details
 * 12. Addresses
 * 13. Subscriptions
 * 14. Order confirmation
 * 15. Small screens
 */

/* 1. Tokens ---------------------------------------------------------------- */

body.cso-account {
	--cso-navy: var(--e-global-color-primary, #000f55);
	--cso-blue: var(--e-global-color-secondary, #2350e6);
	--cso-teal: var(--e-global-color-text, #64c8d7);
	--cso-red: var(--e-global-color-accent, #fa1414);
	--cso-red-dark: var(--e-global-color-5c30768, #c20000);
	--cso-ink: var(--e-global-color-7da960a, #282828);
	--cso-muted: #5d6276;
	--cso-line: #e1e4ec;
	--cso-line-strong: #c4c9d6;
	--cso-soft: #f4f6fa;
	--cso-blue-soft: #edf1fd;
	--cso-teal-soft: #e9f7f9;
	--cso-red-soft: #fdefef;
	--cso-amber: #e3a23b;
	--cso-radius: 6px;
	--cso-pill: 30px;
	--cso-font: var(--e-global-typography-text-font-family, "Figtree"), "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cso-focus: 0 0 0 3px rgba(35, 80, 230, 0.2);
	--cso-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--cso-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--cso-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--cso-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--cso-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	--cso-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000f55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* 2. Base and theme resets ------------------------------------------------- */

/* The shortcode sits in an Elementor flex container; make sure it takes the full width. */
.cso-account .elementor-widget:has(> .elementor-widget-container > .woocommerce) {
	width: 100%;
	max-width: 100%;
}

.cso-account .woocommerce {
	width: 100%;
	font-family: var(--cso-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cso-ink);
	-webkit-font-smoothing: antialiased;
}

.cso-account .woocommerce *,
.cso-account .woocommerce *::before,
.cso-account .woocommerce *::after {
	box-sizing: border-box;
}

.cso-account .woocommerce :is(h2, h3, h4) {
	margin: 0 0 16px;
	font-family: var(--cso-font);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--cso-navy);
}

.cso-account .woocommerce h2 { font-size: 24px; }
.cso-account .woocommerce h3 { font-size: 18px; }
.cso-account .woocommerce h4 { font-size: 16px; }

.cso-account .woocommerce p {
	margin: 0 0 16px;
}

.cso-account .woocommerce a {
	color: var(--cso-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.cso-account .woocommerce a:hover {
	color: var(--cso-navy);
}

.cso-account .woocommerce :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--cso-blue);
	outline-offset: 2px;
}

.cso-account .woocommerce mark {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--cso-soft);
	color: var(--cso-navy);
	font-weight: 700;
}

.cso-account .woocommerce small {
	font-size: 13px;
	color: var(--cso-muted);
}

.cso-account .woocommerce .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cso-account .woocommerce .clear {
	display: none;
}

/* Harizma loads Bootstrap's grid, where .col-1 and .col-2 mean 8% and 17% width. Undo that. */
.cso-account .woocommerce :is(.col-1, .col-2, .u-column1, .u-column2) {
	position: static;
	float: none;
	flex: none;
	width: auto;
	max-width: none;
	min-width: 0;
	padding: 0;
}

.cso-account .woocommerce .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	width: 100%;
	margin: 0 0 32px;
}

.cso-account .woocommerce .col2-set::before,
.cso-account .woocommerce .col2-set::after {
	display: none;
}

/* 3. Account layout and navigation ---------------------------------------- */

.cso-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.cso-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation,
.cso-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--cso-radius);
	color: var(--cso-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation a:hover {
	background: var(--cso-soft);
	color: var(--cso-navy);
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.cso-account .woocommerce .woocommerce-MyAccount-navigation a[aria-current="page"] {
	background: var(--cso-navy);
	color: #fff;
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cso-line);
}

.cso-account .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--cso-muted);
	font-weight: 500;
}

.cso-account .woocommerce .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* 4. Dashboard ------------------------------------------------------------- */

.cso-account .woocommerce .cso-dash__head {
	margin: 0 0 28px;
}

.cso-account .woocommerce .cso-dash__title {
	margin: 0 0 6px;
	font-size: clamp(26px, 3vw, 34px);
	letter-spacing: -0.02em;
}

.cso-account .woocommerce .cso-dash__intro {
	margin: 0;
	font-size: 15px;
	color: var(--cso-muted);
}

.cso-account .woocommerce .cso-dash__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.cso-account .woocommerce .cso-dash__item {
	margin: 0;
}

.cso-account .woocommerce .cso-dash__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px 60px 22px 22px;
	border: 1px solid var(--cso-line);
	border-radius: var(--cso-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cso-account .woocommerce .cso-dash__card:hover {
	border-color: var(--cso-blue);
	box-shadow: 0 8px 24px rgba(0, 15, 85, 0.08);
	color: inherit;
}

.cso-account .woocommerce .cso-dash__card-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cso-navy);
}

.cso-account .woocommerce .cso-dash__card-desc {
	font-size: 14px;
	line-height: 1.45;
	color: var(--cso-muted);
}

.cso-account .woocommerce .cso-dash__card-arrow {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	background: var(--cso-blue-soft);
	transition: background-color 0.2s ease;
}

.cso-account .woocommerce .cso-dash__card-arrow::before {
	content: "";
	position: absolute;
	inset: 7px;
	background: var(--cso-blue);
	-webkit-mask: var(--cso-icon-arrow) center / contain no-repeat;
	mask: var(--cso-icon-arrow) center / contain no-repeat;
}

.cso-account .woocommerce .cso-dash__card:hover .cso-dash__card-arrow {
	background: var(--cso-blue);
}

.cso-account .woocommerce .cso-dash__card:hover .cso-dash__card-arrow::before {
	background: #fff;
}

/* 5. Notices --------------------------------------------------------------- */

.cso-account .woocommerce-notices-wrapper:empty {
	display: none;
}

.cso-account .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .wc-block-components-notice-banner) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 0;
	border-left: 4px solid var(--cso-blue);
	border-radius: var(--cso-radius);
	background: var(--cso-blue-soft);
	color: var(--cso-ink);
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}

.cso-account .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)::before,
.cso-account .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)::after {
	display: none;
}

.cso-account .woocommerce :is(.woocommerce-message:not(.woocommerce-info), .woocommerce-notice--success) {
	border-left-color: var(--cso-teal);
	background: var(--cso-teal-soft);
}

.cso-account .woocommerce :is(.woocommerce-error, .woocommerce-notice--error) {
	border-left-color: var(--cso-red-dark);
	background: var(--cso-red-soft);
}

.cso-account .woocommerce .woocommerce-error {
	display: block;
}

.cso-account .woocommerce .woocommerce-error li {
	margin: 0;
	padding: 2px 0;
}

.cso-account .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-notice) .button {
	order: 2;
	margin-left: auto;
}

.cso-account .woocommerce .wc-block-components-notice-banner > svg {
	display: none;
}

/* 6. Buttons --------------------------------------------------------------- */

.cso-account .woocommerce :is(.button, .woocommerce-Button, button[type="submit"], input[type="submit"]),
.cso-account .wcs-modal .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 14px 28px;
	border: 2px solid var(--cso-blue);
	border-radius: var(--cso-pill);
	background: var(--cso-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--cso-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cso-account .woocommerce :is(.button, .woocommerce-Button, button[type="submit"], input[type="submit"]):hover,
.cso-account .wcs-modal .button:hover {
	border-color: var(--cso-navy);
	background: var(--cso-navy);
	color: #fff;
}

.cso-account .woocommerce :is(.button, button[type="submit"]):disabled,
.cso-account .woocommerce .button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Outline: secondary actions, and every action inside tables so rows stay calm. */
.cso-account .woocommerce :is(table, .woocommerce-pagination) .button,
.cso-account .woocommerce .button.cso-button--outline,
.cso-account .woocommerce .order-again .button {
	border-color: var(--cso-navy);
	background: transparent;
	color: var(--cso-navy);
}

.cso-account .woocommerce :is(table, .woocommerce-pagination) .button:hover,
.cso-account .woocommerce .button.cso-button--outline:hover,
.cso-account .woocommerce .order-again .button:hover {
	border-color: var(--cso-navy);
	background: var(--cso-navy);
	color: #fff;
}

.cso-account .woocommerce table .button {
	min-height: 38px;
	padding: 10px 18px;
	font-size: 12px;
}

/* Pay stays a filled button wherever it appears. */
.cso-account .woocommerce table .button.pay {
	border-color: var(--cso-blue);
	background: var(--cso-blue);
	color: #fff;
}

.cso-account .woocommerce table .button.pay:hover {
	border-color: var(--cso-navy);
	background: var(--cso-navy);
}

/* 7. Forms ----------------------------------------------------------------- */

.cso-account .woocommerce form .form-row {
	margin: 0 0 20px;
	padding: 0;
}

.cso-account .woocommerce form label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cso-navy);
}

.cso-account .woocommerce form :is(.required, abbr.required) {
	color: var(--cso-red-dark);
	border: 0;
	text-decoration: none;
	visibility: visible;
}

.cso-account .woocommerce :where(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea) {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--cso-line-strong);
	border-radius: var(--cso-radius);
	background-color: #fff;
	box-shadow: none;
	color: var(--cso-ink);
	font-family: var(--cso-font);
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cso-account .woocommerce :where(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea):hover {
	border-color: var(--cso-muted);
}

.cso-account .woocommerce :where(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea):focus {
	border-color: var(--cso-blue);
	box-shadow: var(--cso-focus);
	outline: none;
}

.cso-account .woocommerce select:not([multiple]) {
	padding-right: 44px;
	background-image: var(--cso-icon-chevron);
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 18px;
	cursor: pointer;
}

.cso-account .woocommerce textarea {
	min-height: 120px;
	resize: vertical;
}

.cso-account .woocommerce ::placeholder {
	color: #8a8fa1;
	opacity: 1;
}

.cso-account .woocommerce .woocommerce-invalid :is(input.input-text, select, textarea) {
	border-color: var(--cso-red-dark);
}

.cso-account .woocommerce :is(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--cso-blue);
	vertical-align: middle;
	cursor: pointer;
}

.cso-account .woocommerce form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--cso-ink);
	font-weight: 500;
	cursor: pointer;
}

.cso-account .woocommerce form .form-row :is(span em, .description) {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
	color: var(--cso-muted);
}

.cso-account .woocommerce fieldset {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 8px 0 24px;
	padding: 24px 24px 4px;
	border: 1px solid var(--cso-line);
	border-radius: var(--cso-radius);
}

.cso-account .woocommerce legend {
	width: auto;
	margin: 0;
	padding: 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cso-navy);
}

/* Two-column fields: account details and address forms. */
.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > * {
	grid-column: 1 / -1;
}

.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-first {
	grid-column: 1;
}

.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-last {
	grid-column: 2;
}

.cso-account .woocommerce .woocommerce-address-fields > p:last-child,
.cso-account .woocommerce .woocommerce-EditAccountForm > p:last-of-type {
	margin: 8px 0 0;
}

/* Show/hide password button, added by WooCommerce's script. */
.cso-account .woocommerce .password-input {
	position: relative;
	display: block;
}

.cso-account .woocommerce .password-input input {
	padding-right: 56px;
}

.cso-account .woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cso-muted);
	cursor: pointer;
	transform: translateY(-50%);
}

.cso-account .woocommerce .show-password-input::before {
	content: "";
	position: absolute;
	inset: 9px;
	background: currentColor;
	-webkit-mask: var(--cso-icon-eye) center / contain no-repeat;
	mask: var(--cso-icon-eye) center / contain no-repeat;
}

.cso-account .woocommerce .show-password-input.display-password::before {
	-webkit-mask-image: var(--cso-icon-eye-off);
	mask-image: var(--cso-icon-eye-off);
}

.cso-account .woocommerce .show-password-input:hover {
	background: var(--cso-soft);
	color: var(--cso-navy);
}

/* Password strength meter. */
.cso-account .woocommerce .woocommerce-password-strength {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: var(--cso-radius);
	background: var(--cso-soft);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.cso-account .woocommerce .woocommerce-password-strength:is(.short, .bad) {
	background: var(--cso-red-soft);
	color: var(--cso-red-dark);
}

.cso-account .woocommerce .woocommerce-password-strength.good {
	background: #fdf4e4;
	color: #7a4f00;
}

.cso-account .woocommerce .woocommerce-password-strength.strong {
	background: var(--cso-teal-soft);
	color: var(--cso-navy);
}

.cso-account .woocommerce .woocommerce-password-hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--cso-muted);
}

/* 8. Login and register ---------------------------------------------------- */

.cso-account .woocommerce #customer_login {
	max-width: 960px;
}

.cso-account .woocommerce #customer_login > :is(.col-1, .col-2),
.cso-account .woocommerce > .woocommerce-form-login,
.cso-account .woocommerce > .woocommerce-ResetPassword {
	padding: 32px;
	border: 1px solid var(--cso-line);
	border-radius: var(--cso-radius);
	background: #fff;
}

.cso-account .woocommerce > .woocommerce-form-login,
.cso-account .woocommerce > .woocommerce-ResetPassword {
	max-width: 480px;
	margin: 0 0 32px;
}

.cso-account .woocommerce #customer_login h2,
.cso-account .woocommerce > h2 {
	font-size: 26px;
}

.cso-account .woocommerce form.login > p.form-row:not(.form-row-wide) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}

.cso-account .woocommerce .woocommerce-LostPassword {
	margin: 0;
	font-size: 14px;
}

.cso-account .woocommerce .woocommerce-ResetPassword > p:first-child {
	color: var(--cso-muted);
}

/* 9. Tables ---------------------------------------------------------------- */

.cso-account .woocommerce table:is(.shop_table, .woocommerce-table, .woocommerce-orders-table, .subscription_details, .woocommerce-MyAccount-paymentMethods) {
	width: 100%;
	margin: 0 0 32px;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.5;
}

.cso-account .woocommerce :where(table.shop_table, table.woocommerce-table, table.woocommerce-orders-table, table.subscription_details, table.woocommerce-MyAccount-paymentMethods) :where(th, td) {
	padding: 16px 12px;
	border: 0;
	border-bottom: 1px solid var(--cso-line);
	background: transparent;
	color: var(--cso-ink);
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.cso-account .woocommerce :where(table.shop_table, table.woocommerce-table, table.woocommerce-orders-table, table.woocommerce-MyAccount-paymentMethods):not(.subscription_details) :where(th, td):first-child {
	padding-left: 0;
}

.cso-account .woocommerce :where(table.shop_table, table.woocommerce-table, table.woocommerce-orders-table, table.woocommerce-MyAccount-paymentMethods):not(.subscription_details) :where(th, td):last-child {
	padding-right: 0;
}

.cso-account .woocommerce table thead th {
	padding-top: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cso-navy);
	color: var(--cso-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.cso-account .woocommerce table tbody th {
	font-weight: 700;
	color: var(--cso-navy);
}

.cso-account .woocommerce table a:not(.button) {
	font-weight: 600;
}

/* Order and subscription numbers. */
.cso-account .woocommerce table :is(.woocommerce-orders-table__cell-order-number, .woocommerce-orders-table__cell-subscription-id) a {
	color: var(--cso-navy);
	font-weight: 700;
	text-decoration: none;
}

.cso-account .woocommerce table :is(.woocommerce-orders-table__cell-order-number, .woocommerce-orders-table__cell-subscription-id) a:hover {
	color: var(--cso-blue);
	text-decoration: underline;
}

.cso-account .woocommerce :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-orders-table__cell-subscription-actions, .download-file, .payment-method-actions) {
	text-align: right;
	white-space: nowrap;
}

.cso-account .woocommerce table thead th:is(.woocommerce-orders-table__header-order-actions, .order-actions) {
	text-align: right;
}

.cso-account .woocommerce td :is(.button + .button, .button ~ .button) {
	margin-left: 8px;
}

.cso-account .woocommerce .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: -8px 0 32px;
}

.cso-account .woocommerce .woocommerce-pagination .woocommerce-button--next {
	margin-left: auto;
}

/* 10. Status dots ---------------------------------------------------------- */

.cso-account .woocommerce .woocommerce-orders-table__row {
	--cso-dot: var(--cso-line-strong);
}

.cso-account .woocommerce .woocommerce-orders-table__row:is([class*="--status-completed"], [class*="--status-active"]) {
	--cso-dot: var(--cso-teal);
}

.cso-account .woocommerce .woocommerce-orders-table__row[class*="--status-processing"] {
	--cso-dot: var(--cso-blue);
}

.cso-account .woocommerce .woocommerce-orders-table__row:is([class*="--status-on-hold"], [class*="--status-pending"]:not([class*="--status-pending-cancel"])) {
	--cso-dot: var(--cso-amber);
}

.cso-account .woocommerce .woocommerce-orders-table__row:is([class*="--status-failed"], [class*="--status-pending-cancel"]) {
	--cso-dot: var(--cso-red-dark);
}

.cso-account .woocommerce .woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

.cso-account .woocommerce .woocommerce-orders-table__cell-order-status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 0 0;
	border-radius: 50%;
	background: var(--cso-dot);
	vertical-align: 1px;
}

/* 11. Orders and order details -------------------------------------------- */

.cso-account .woocommerce :is(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-order-downloads) {
	margin: 0 0 40px;
}

.cso-account .woocommerce :is(.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-order-downloads__title, .woocommerce-MyAccount-content header:not([class]) > h2, .woocommerce-MyAccount-content > h2, .woocommerce-order header:not([class]) > h2) {
	font-size: 20px;
}

/* "Order #123 was placed on ... and is currently ..." */
.cso-account .woocommerce .woocommerce-MyAccount-content > p:has(> mark.order-status) {
	font-size: 17px;
	line-height: 1.9;
}

.cso-account .woocommerce mark.order-status {
	background: var(--cso-blue-soft);
	color: var(--cso-blue);
}

.cso-account .woocommerce .product-name > a {
	color: var(--cso-navy);
	text-decoration: none;
}

.cso-account .woocommerce .product-name > a:hover {
	color: var(--cso-blue);
	text-decoration: underline;
}

.cso-account .woocommerce .product-quantity {
	margin-left: 4px;
	color: var(--cso-muted);
	font-weight: 500;
}

.cso-account .woocommerce .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--cso-muted);
}

.cso-account .woocommerce .wc-item-meta li {
	margin: 0;
}

.cso-account .woocommerce .wc-item-meta :is(p, li > strong) {
	display: inline;
	margin: 0;
}

.cso-account .woocommerce .wc-item-meta-label {
	font-weight: 600;
}

.cso-account .woocommerce table:is(.order_details, .woocommerce-table--order-details) :is(.product-total, tfoot td) {
	text-align: right;
}

.cso-account .woocommerce table:is(.order_details, .woocommerce-table--order-details) tfoot th {
	color: var(--cso-muted);
	font-weight: 500;
}

.cso-account .woocommerce table:is(.order_details, .woocommerce-table--order-details) tfoot td {
	color: var(--cso-navy);
	font-weight: 600;
}

.cso-account .woocommerce table:is(.order_details, .woocommerce-table--order-details) tfoot tr:last-child :is(th, td) {
	border-bottom: 0;
}

.cso-account .woocommerce :is(.includes_tax, .tax_label, .woocommerce-Price-taxLabel) {
	color: var(--cso-muted);
	font-size: 13px;
	font-weight: 400;
}

.cso-account .woocommerce del {
	color: var(--cso-muted);
}

.cso-account .woocommerce ins {
	text-decoration: none;
}

.cso-account .woocommerce .product-purchase-note td {
	padding-top: 0;
	color: var(--cso-muted);
	font-size: 14px;
}

/* Order notes on the view order page. */
.cso-account .woocommerce .woocommerce-OrderUpdates {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.cso-account .woocommerce .woocommerce-OrderUpdate {
	margin: 0 0 12px;
	padding: 16px 20px;
	border-left: 3px solid var(--cso-teal);
	border-radius: var(--cso-radius);
	background: var(--cso-soft);
}

.cso-account .woocommerce .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cso-muted);
}

.cso-account .woocommerce .woocommerce-OrderUpdate-description p:last-child {
	margin: 0;
}

/* 12. Addresses ------------------------------------------------------------ */

.cso-account .woocommerce address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--cso-ink);
}

.cso-account .woocommerce address p {
	margin: 8px 0 0;
}

/* Address cards: My Account addresses and the customer details under an order. */
.cso-account .woocommerce .woocommerce-Address,
.cso-account .woocommerce .woocommerce-customer-details .woocommerce-column,
.cso-account .woocommerce .woocommerce-customer-details > address {
	padding: 24px;
	border: 1px solid var(--cso-line);
	border-radius: var(--cso-radius);
	background: #fff;
}

.cso-account .woocommerce .woocommerce-customer-details .col2-set {
	margin: 0;
}

.cso-account .woocommerce .woocommerce-customer-details > address {
	max-width: 480px;
}

.cso-account .woocommerce .woocommerce-column__title {
	margin-bottom: 12px;
}

.cso-account .woocommerce .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 12px;
}

.cso-account .woocommerce .woocommerce-Address-title :is(h2, h3) {
	margin: 0;
	font-size: 18px;
}

.cso-account .woocommerce .woocommerce-Address-title .edit,
.cso-account .woocommerce .woocommerce-Address-copy a {
	font-size: 14px;
	font-weight: 600;
}

.cso-account .woocommerce .woocommerce-Address-copy {
	margin: 0 0 12px;
}

.cso-account .woocommerce .woocommerce-Addresses {
	margin-top: 8px;
}

/* 13. Subscriptions -------------------------------------------------------- */

/* Subscription summary: status, dates, contract term, notice period, payment, actions. */
.cso-account .woocommerce table.subscription_details {
	margin: 0 0 40px;
	padding: 4px 24px;
	border: 1px solid var(--cso-line);
	border-collapse: separate;
	border-radius: var(--cso-radius);
	background: #fff;
}

.cso-account .woocommerce table.subscription_details td {
	padding: 14px 0;
}

.cso-account .woocommerce table.subscription_details td:first-child {
	width: 38%;
	padding-right: 16px;
	color: var(--cso-muted);
	font-size: 14px;
	font-weight: 500;
}

.cso-account .woocommerce table.subscription_details td + td {
	color: var(--cso-navy);
	font-weight: 600;
}

.cso-account .woocommerce table.subscription_details tr:last-child td {
	border-bottom: 0;
}

.cso-account .woocommerce table.subscription_details .subscription-payment-method {
	font-weight: 600;
}

/* Action buttons in the summary. */
.cso-account .woocommerce table.subscription_details td .button {
	width: auto;
	max-width: none;
	margin: 4px 8px 4px 0;
}

.cso-account .woocommerce table.subscription_details td .button + .button {
	margin-left: 0;
}

/* Positive actions are filled. */
.cso-account .woocommerce table.subscription_details .button:is(.reactivate, .resubscribe, .pay, .subscription_renewal_early) {
	border-color: var(--cso-blue);
	background: var(--cso-blue);
	color: #fff;
}

.cso-account .woocommerce table.subscription_details .button:is(.reactivate, .resubscribe, .pay, .subscription_renewal_early):hover {
	border-color: var(--cso-navy);
	background: var(--cso-navy);
}

/* Cancelling (including "Give notice to cancel" from the notice-period plugin) is outlined in red. */
.cso-account .woocommerce table.subscription_details .button:is(.cancel, .snp-give-notice) {
	border-color: var(--cso-red-dark);
	background: transparent;
	color: var(--cso-red-dark);
}

.cso-account .woocommerce table.subscription_details .button:is(.cancel, .snp-give-notice):hover {
	border-color: var(--cso-red-dark);
	background: var(--cso-red-dark);
	color: #fff;
}

/* Auto-renew switch. */
.cso-account .woocommerce .wcs-auto-renew-toggle {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cso-account .woocommerce .subscription-auto-renew-toggle {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.cso-account .woocommerce .subscription-auto-renew-toggle--hidden {
	display: none;
}

.cso-account .woocommerce .subscription-auto-renew-toggle__i {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 26px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--cso-blue);
	text-indent: -9999px;
	transition: background-color 0.2s ease;
}

.cso-account .woocommerce .subscription-auto-renew-toggle__i::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 21px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 15, 85, 0.25);
	transition: left 0.2s ease;
}

.cso-account .woocommerce .subscription-auto-renew-toggle--off .subscription-auto-renew-toggle__i {
	background: var(--cso-line-strong);
}

.cso-account .woocommerce .subscription-auto-renew-toggle--off .subscription-auto-renew-toggle__i::before {
	left: 3px;
}

.cso-account .woocommerce .subscription-auto-renew-toggle--loading {
	opacity: 0.5;
	pointer-events: none;
}

.cso-account .woocommerce .subscription-auto-renew-toggle--disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cso-account .woocommerce .subscription-auto-renew-toggle-disabled-note {
	display: block;
	font-weight: 400;
}

/* Related orders and subscriptions headers. */
.cso-account .woocommerce .woocommerce-MyAccount-content header:not([class]),
.cso-account .woocommerce .woocommerce-order header:not([class]) {
	margin: 8px 0 0;
}

/* Early renewal modal (layout kept from Subscriptions, restyled). */
.cso-account .wcs-modal .content-wrapper {
	padding: 32px;
	border-radius: var(--cso-radius);
	font-family: var(--cso-font);
	color: var(--cso-ink);
}

.cso-account .wcs-modal .modal-header > h2 {
	margin: 0 0 16px;
	color: var(--cso-navy);
	font-family: var(--cso-font);
	font-size: 22px;
	font-weight: 700;
}

.cso-account .wcs_early_renew_modal_totals_table {
	height: 80%;
	margin-bottom: 1em;
	overflow: auto;
}

.cso-account .wcs_early_renew_modal_note {
	position: sticky;
	bottom: 0;
	width: 0;
	min-width: 100%;
}

.cso-account #early_renewal_modal_submit {
	width: 100%;
}

/* 14. Order confirmation --------------------------------------------------- */

.cso-account .woocommerce .cso-order {
	max-width: 880px;
	margin: 0 auto;
}

.cso-account .woocommerce .cso-order__head {
	margin: 0 0 32px;
	padding: 0 0 32px;
	border-bottom: 1px solid var(--cso-line);
}

.cso-account .woocommerce .cso-order__icon {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 0 20px;
	border-radius: 50%;
	background: var(--cso-blue);
}

.cso-account .woocommerce .cso-order__icon::before {
	content: "";
	position: absolute;
	inset: 15px;
	background: #fff;
	-webkit-mask: var(--cso-icon-check) center / contain no-repeat;
	mask: var(--cso-icon-check) center / contain no-repeat;
}

.cso-account .woocommerce .cso-order__head--failed .cso-order__icon {
	background: var(--cso-red-dark);
}

.cso-account .woocommerce .cso-order__head--failed .cso-order__icon::before {
	inset: 17px;
	-webkit-mask-image: var(--cso-icon-cross);
	mask-image: var(--cso-icon-cross);
}

.cso-account .woocommerce .cso-order__title {
	margin: 0 0 10px;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.cso-account .woocommerce .cso-order__lead {
	max-width: 60ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--cso-ink);
}

.cso-account .woocommerce .cso-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

/* Key facts as tiles: our overview, the default overview, and bank transfer details. */
.cso-account .woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.cso-account .woocommerce ul.order_details::before,
.cso-account .woocommerce ul.order_details::after {
	display: none;
}

.cso-account .woocommerce ul.order_details li {
	flex: 1 1 auto;
	min-width: 140px;
	float: none;
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--cso-radius);
	background: var(--cso-soft);
	color: var(--cso-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cso-account .woocommerce ul.order_details li strong {
	display: block;
	margin-top: 6px;
	color: var(--cso-navy);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

.cso-account .woocommerce .cso-overview__label {
	display: block;
}

/* Bank transfer (EFT) details. */
.cso-account .woocommerce .woocommerce-bacs-bank-details {
	margin: 0 0 40px;
}

.cso-account .woocommerce .woocommerce-bacs-bank-details ul.order_details {
	margin-bottom: 16px;
}

.cso-account .woocommerce .wc-bacs-bank-details-account-name {
	margin: 0 0 12px;
	font-size: 16px;
}

/* Gateway instructions and the Subscriptions thank-you message print as plain paragraphs. */
.cso-account .woocommerce .cso-order > p:not([class]) {
	margin: 0;
	padding: 6px 0 6px 16px;
	border-left: 3px solid var(--cso-blue);
	font-size: 16px;
}

.cso-account .woocommerce .cso-order > p:not([class]) + :not(p) {
	margin-top: 40px;
}

/* Order received page with no order to show. */
.cso-account .woocommerce > .woocommerce-notice--success:only-child {
	max-width: 880px;
	margin-inline: auto;
}

/* 15. Small screens -------------------------------------------------------- */

@media (max-width: 900px) {

	.cso-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Navigation becomes a row of scrollable pills. */
	.cso-account .woocommerce .woocommerce-MyAccount-navigation {
		margin: 0 -16px;
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: 8px;
		padding: 0 16px 4px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation li {
		flex: none;
		scroll-snap-align: start;
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation a {
		padding: 10px 18px;
		border: 1px solid var(--cso-line);
		border-radius: var(--cso-pill);
		font-size: 14px;
		white-space: nowrap;
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
	.cso-account .woocommerce .woocommerce-MyAccount-navigation a[aria-current="page"] {
		border-color: var(--cso-navy);
	}

	.cso-account .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

@media (max-width: 768px) {

	/* Order and subscription lists become cards. */
	.cso-account .woocommerce table.shop_table_responsive thead {
		display: none;
	}

	.cso-account .woocommerce table.shop_table_responsive,
	.cso-account .woocommerce table.shop_table_responsive tbody {
		display: block;
	}

	.cso-account .woocommerce table.shop_table_responsive tbody tr {
		display: block;
		margin: 0 0 12px;
		padding: 4px 18px;
		border: 1px solid var(--cso-line);
		border-radius: var(--cso-radius);
		background: #fff;
	}

	.cso-account .woocommerce table.shop_table_responsive tbody :is(td, th) {
		display: block;
		padding: 12px 0;
		text-align: right;
		white-space: normal;
	}

	.cso-account .woocommerce table.shop_table_responsive tbody tr > :last-child {
		border-bottom: 0;
	}

	.cso-account .woocommerce table.shop_table_responsive tbody [data-title]::before,
	.cso-account .woocommerce table.shop_table_responsive tbody .woocommerce-orders-table__cell-order-status[data-title]::after {
		content: attr(data-title);
		float: left;
		margin: 0 16px 0 0;
		color: var(--cso-muted);
		font-size: 12px;
		font-weight: 700;
		line-height: 22px;
		letter-spacing: 1px;
		text-align: left;
		text-transform: uppercase;
	}

	/* Status: the dot stays in front of the value, so the label moves to ::after (it still floats left). */
	.cso-account .woocommerce table.shop_table_responsive tbody .woocommerce-orders-table__cell-order-status[data-title]::before {
		content: "";
		float: none;
		display: inline-block;
		width: 8px;
		height: 8px;
		margin: 0 8px 0 0;
		border-radius: 50%;
		background: var(--cso-dot);
		vertical-align: 1px;
	}

	.cso-account .woocommerce table.shop_table_responsive :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-orders-table__cell-subscription-actions) {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.cso-account .woocommerce table.shop_table_responsive :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-orders-table__cell-subscription-actions)[data-title]::before {
		display: none;
	}

	.cso-account .woocommerce table.shop_table_responsive :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-orders-table__cell-subscription-actions) .button {
		flex: 1 1 auto;
		margin: 0;
	}

	/* Subscription summary: label above value. */
	.cso-account .woocommerce table.subscription_details,
	.cso-account .woocommerce table.subscription_details tbody {
		display: block;
	}

	.cso-account .woocommerce table.subscription_details {
		padding: 4px 18px;
	}

	.cso-account .woocommerce table.subscription_details tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--cso-line);
	}

	.cso-account .woocommerce table.subscription_details tr:last-child {
		border-bottom: 0;
	}

	.cso-account .woocommerce table.subscription_details td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.cso-account .woocommerce table.subscription_details td:first-child {
		width: auto;
		margin: 0 0 4px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.cso-account .woocommerce table.subscription_details td .button {
		width: 100%;
		margin: 8px 0 0;
	}

	/* Forms go to one column. */
	.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) {
		grid-template-columns: minmax(0, 1fr);
	}

	.cso-account .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) {
		grid-column: 1 / -1;
	}

	.cso-account .woocommerce fieldset {
		padding: 20px 16px 4px;
	}

	.cso-account .woocommerce #customer_login > :is(.col-1, .col-2),
	.cso-account .woocommerce > .woocommerce-form-login,
	.cso-account .woocommerce > .woocommerce-ResetPassword {
		padding: 24px 20px;
	}

	.cso-account .woocommerce form.login .woocommerce-form-login__submit {
		width: 100%;
	}

	/* Order details: tighter. */
	.cso-account .woocommerce table:is(.order_details, .woocommerce-table--order-details) :is(th, td) {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.cso-account .woocommerce .cso-order__head {
		margin-bottom: 24px;
		padding-bottom: 24px;
	}

	.cso-account .woocommerce .cso-order__lead {
		font-size: 17px;
	}

	.cso-account .woocommerce ul.order_details {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cso-account .woocommerce *,
	.cso-account .woocommerce *::before {
		transition: none !important;
	}
}