/*
 * woocommerce.css: WooCommerce's pages (the plans' checkout, its confirmation, the client account)
 * in the design's language. Loaded on those pages only, after WooCommerce's own CSS.
 *
 * The design has no checkout; these are its pieces: the free-audit card and its fields (the design
 * system's Input and Select), the plans' mist panel holding white cards, the grainy primary button.
 *
 * WooCommerce's selectors run up to five classes and an ID (.woocommerce-page form .form-row
 * .select2-container …, .woocommerce #payment #place_order). The store templates' <main> is
 * #ozp-store, so the rules below win on specificity, without !important.
 */

/* 1. WooCommerce on the theme's header and footer -------------------------------------------- */

/* woocommerce-layout.css: .woocommerce-page img { height: auto } outweighs the logos' classes, and
   the logo came out at its file size (872 px wide). */
.woocommerce-page .ozp-header img {
	height: 20px;
}

.woocommerce-page .ozp-footer img {
	height: 25px;
}

/* 2. The page -------------------------------------------------------------------------------- */

/* The generic templates' spacing (port.css section 3). */
.site-main--store {
	padding-block: clamp(56px, 7vw, 88px) clamp(64px, 8vw, 96px);
}

/* WooCommerce: .woocommerce-checkout .wp-block-post-title and main .woocommerce { max-width: 1000px }. */
#ozp-store .entry-title {
	max-width: 820px;
}

#ozp-store .entry-content--store,
#ozp-store .woocommerce {
	max-width: none;
	margin-inline: 0;
}

/* Notices (returning customer, errors, the temporary password): a quiet panel with the icon in
   the brand's ink, not WooCommerce's blue and red. wc-blocks keeps the padding (16px !important). */
#ozp-store .wc-block-components-notice-banner {
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 24px;
	background: var(--surface-panel);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	color: var(--fg-2);
	font: 300 15px/1.45 var(--font-body);
}

#ozp-store .wc-block-components-notice-banner > svg {
	background-color: var(--fg-1);
	fill: var(--surface-card);
}

#ozp-store .wc-block-components-notice-banner.is-error {
	border-color: rgba(92, 26, 42, .25);
	color: var(--oz-deep-burgundy);
}

#ozp-store .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--oz-deep-burgundy);
}

#ozp-store .wc-block-components-notice-banner__content {
	align-self: center;
}

#ozp-store .wc-block-components-notice-banner__content :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

#ozp-store .wc-block-components-notice-banner__content a:not(.button) {
	color: var(--fg-link);
}

/* 3. Fields: the free-audit form's Input and Select ------------------------------------------- */

#ozp-store .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* WooCommerce's clearfix pseudo-elements would be flex items (two more gaps). */
#ozp-store .form-row::before,
#ozp-store .form-row::after {
	display: none;
}

#ozp-store .form-row > label:not(.checkbox, .woocommerce-form__label-for-checkbox) {
	margin: 0;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fg-2);
}

#ozp-store .form-row label:is(.checkbox, .woocommerce-form__label-for-checkbox) {
	display: block;
	margin: 0;
	font: 300 15px/1.45 var(--font-body);
	color: var(--fg-2);
}

#ozp-store .form-row label:is(.checkbox, .woocommerce-form__label-for-checkbox) input {
	margin: 0 8px 0 0;
	vertical-align: -2px;
	accent-color: var(--oz-deep-blue);
}

#ozp-store .form-row label :is(.required, .optional) {
	visibility: visible;
	border: 0;
	font-weight: inherit;
	text-decoration: none;
	color: var(--fg-3);
}

#ozp-store .woocommerce-input-wrapper {
	display: block;
}

#ozp-store .form-row :is(input.input-text, textarea, select) {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
	font: var(--type-body);
	color: var(--fg-1);
	background: var(--surface-card);
	padding: 12px 14px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	outline: none;
	box-shadow: var(--shadow-xs);
	transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

#ozp-store .form-row :is(input.input-text, textarea, select):focus {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
}

#ozp-store .form-row input.input-text::placeholder {
	color: var(--fg-3);
}

#ozp-store .form-row.woocommerce-invalid :is(input.input-text, select),
#ozp-store .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--oz-deep-burgundy);
}

#ozp-store .form-row.woocommerce-invalid > label {
	color: var(--oz-deep-burgundy);
}

/* The country select (selectWoo) as the design's Select: one field's height, its 7 px caret. */
#ozp-store .select2-container .select2-selection--single {
	box-sizing: border-box;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

#ozp-store .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 12px 38px 12px 14px;
	font: var(--type-body);
	color: var(--fg-1);
}

#ozp-store .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 14px;
	width: 7px;
	height: 7px;
	background: none;
	border-right: 1.5px solid var(--fg-1);
	border-bottom: 1.5px solid var(--fg-1);
	transform: translateY(-70%) rotate(45deg);
}

#ozp-store .select2-container .select2-selection--single .select2-selection__arrow b {
	display: none;
}

#ozp-store :is(.select2-container--focus, .select2-container--open) .select2-selection--single {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
}

/* selectWoo's list is appended to the body, outside #ozp-store. */
.woocommerce-page .select2-dropdown {
	border-color: var(--border-hairline);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(9, 11, 13, .08);
	font: var(--type-body);
	color: var(--fg-1);
	overflow: hidden;
}

.woocommerce-page .select2-container--default .select2-results__option--highlighted:is([aria-selected], [data-selected]) {
	background: var(--oz-deep-blue);
	color: var(--oz-purest-white);
}

.woocommerce-page .select2-search--dropdown .select2-search__field {
	padding: 8px 10px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	font: var(--type-body);
}

/* 4. The checkout: the details card on the left, the order and the payment on the right -------- */

#ozp-store form.checkout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#ozp-store form.checkout > #order_review_heading {
	margin: 16px 0 0;
}

@media (min-width: 960px) {
	#ozp-store form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
		grid-template-areas: "notices notices" "details heading" "details review";
		grid-template-rows: auto auto 1fr;
		gap: 0 clamp(32px, 4vw, 64px);
		align-items: start;
	}

	#ozp-store form.checkout > .woocommerce-NoticeGroup {
		grid-area: notices;
	}

	#ozp-store form.checkout > #customer_details {
		grid-area: details;
	}

	#ozp-store form.checkout > #order_review_heading {
		grid-area: heading;
		margin: 0 0 24px;
	}

	#ozp-store form.checkout > #order_review {
		grid-area: review;
	}
}

#ozp-store .col2-set > :is(.col-1, .col-2) {
	float: none;
	width: auto;
}

/* The shipping and order-notes column: no fields for a plan. */
#ozp-store #customer_details > .col-2:not(:has(input, select, textarea)) {
	display: none;
}

/* The details card: the free-audit card. */
#ozp-store .woocommerce-billing-fields {
	background: var(--surface-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
}

#ozp-store :is(.woocommerce-billing-fields > h3, #order_review_heading),
#ozp-store :is(.woocommerce-order-details__title, .woocommerce-column__title),
#ozp-store :is(.woocommerce-order-details, .woocommerce-MyAccount-content) > header h2,
#ozp-store .woocommerce-MyAccount-content :is(h2, h3),
#ozp-store form.login h2 {
	margin: 0 0 24px;
	font: 300 32px/1.1 var(--font-heading);
	letter-spacing: -.02em;
	color: var(--fg-1);
}

#ozp-store :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

#ozp-store :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > * {
	grid-column: 1 / -1;
}

#ozp-store :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) {
	grid-column: auto;
}

/* The order: the plans' mist panel, its white cards inside. */
#ozp-store #order_review {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 16px);
	padding: clamp(12px, 1.4vw, 16px);
	background: var(--surface-panel);
	border-radius: var(--radius-xl);
}

#ozp-store table.shop_table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--border-soft);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-xs);
	font: 300 15px/1.4 var(--font-body);
	color: var(--fg-1);
}

#ozp-store table.shop_table :is(th, td) {
	padding: 14px 20px;
	border: 0;
	border-top: 1px solid var(--border-hairline);
	background: none;
	font: inherit;
	text-align: left;
	vertical-align: top;
}

#ozp-store table.shop_table > :first-child > tr:first-child > * {
	border-top: 0;
}

#ozp-store table.shop_table :is(thead th, tr.recurring-totals th) {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fg-3);
}

#ozp-store table.shop_table tr.recurring-totals th {
	padding-top: 20px;
}

#ozp-store table.shop_table tfoot th,
#ozp-store .woocommerce-checkout-review-order-table :is(.order-total, .recurring-total) td {
	font-weight: 600;
}

/* The plan's name in the cards' display face; one of each, so no "× 1". */
#ozp-store table.shop_table td.product-name {
	font: 400 24px/1.1 var(--font-special);
	letter-spacing: -.02em;
}

#ozp-store table.shop_table .product-quantity {
	display: none;
}

#ozp-store .woocommerce-checkout-review-order-table .order-total .amount {
	font: 400 26px/1 var(--font-heading);
	letter-spacing: -.01em;
}

#ozp-store table.shop_table :is(.first-payment-date, small) {
	display: block;
	margin-top: 4px;
	font: 300 13px/1.4 var(--font-body);
	color: var(--fg-3);
}

@media (min-width: 960px) {
	#ozp-store .woocommerce-checkout-review-order-table tfoot th {
		white-space: nowrap;
	}
}

/* The payment card: the method, its description, then the button (PayPal's, or the grainy primary). */
#ozp-store #payment {
	padding: 20px;
	background: var(--surface-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

#ozp-store #payment ul.payment_methods {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	list-style: none;
}

#ozp-store #payment ul.payment_methods::before,
#ozp-store #payment ul.payment_methods::after {
	display: none;
}

#ozp-store #payment ul.payment_methods li {
	margin: 0;
	padding: 0;
	font: 600 15px/1.4 var(--font-body);
	color: var(--fg-1);
}

#ozp-store #payment ul.payment_methods li + li {
	margin-top: 12px;
}

#ozp-store #payment ul.payment_methods li input {
	margin: 0 8px 0 0;
	accent-color: var(--oz-deep-blue);
}

#ozp-store #payment ul.payment_methods li img {
	max-height: 24px;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

#ozp-store #payment div.payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--surface-panel);
	border-radius: var(--radius-sm);
	color: var(--fg-2);
	font: 300 14px/1.45 var(--font-body);
}

#ozp-store #payment div.payment_box::before {
	display: none;
}

#ozp-store #payment div.payment_box p {
	margin: 0;
}

#ozp-store #payment .form-row.place-order {
	gap: 16px;
	margin: 0;
	padding: 0;
}

#ozp-store .woocommerce-terms-and-conditions-wrapper p {
	margin: 0;
	font: 300 13px/1.4 var(--font-body);
	color: var(--fg-3);
}

/* The grainy primary button (head.css: .ozp-btn--grain .ozp-btn--lg .ozp-btn--full). */
#ozp-store #payment #place_order {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 100%;
	margin: 0;
	padding: 16px 28px;
	font: 600 16px/1 var(--font-body);
	letter-spacing: .02em;
	text-transform: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--grain-texture) 0 0 / 140px repeat border-box, linear-gradient(110deg, #082231 0%, #082231 34%, #12344d 56%, #2b5069 78%, #3a6188 100%) 0% 50% / 300% 100% no-repeat border-box, #082231;
	background-blend-mode: overlay, normal;
	color: var(--oz-purest-white);
	cursor: pointer;
	transition: background-position 700ms cubic-bezier(.16, 1, .3, 1), transform 120ms cubic-bezier(.2, 0, 0, 1);
}

#ozp-store #payment #place_order:is(:hover, :active) {
	background-position: 0 0, 100% 50%;
}

#ozp-store #payment #place_order:active {
	transform: scale(.98);
}

#ozp-store #payment #place_order:focus-visible {
	outline: none;
	box-shadow: var(--cta-focus-ring);
}

/* 5. Buttons elsewhere: forms' submit buttons get the primary, tables the small secondary ------ */

#ozp-store :is(.woocommerce-Button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, form [type="submit"]:not(#place_order)) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	margin: 0;
	padding: 16px 28px;
	font: 600 16px/1 var(--font-body);
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--cta-primary-bg);
	border-radius: var(--radius-sm);
	background: var(--cta-primary-bg);
	color: var(--cta-primary-fg);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

#ozp-store :is(.woocommerce-Button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, form [type="submit"]:not(#place_order)):hover {
	background: var(--cta-primary-bg-hover);
	border-color: var(--cta-primary-bg-hover);
	color: var(--cta-primary-fg);
}

#ozp-store table.shop_table :is(.button, .woocommerce-button) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 8px 0 0;
	padding: 8px 14px;
	font: 600 13px/1 var(--font-body);
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--cta-secondary-bg);
	border-radius: var(--radius-sm);
	background: var(--cta-secondary-bg);
	color: var(--cta-secondary-fg);
	transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

#ozp-store table.shop_table :is(.button, .woocommerce-button):hover {
	background: var(--cta-secondary-bg-hover);
	border-color: var(--cta-secondary-bg-hover);
	color: var(--cta-secondary-fg);
}

#ozp-store :is(.woocommerce-Button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, form [type="submit"]:not(#place_order), table.shop_table .button, table.shop_table .woocommerce-button):active {
	transform: scale(.98);
}

#ozp-store :is(.woocommerce-Button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, form [type="submit"]:not(#place_order), table.shop_table .button, table.shop_table .woocommerce-button):focus-visible {
	outline: none;
	box-shadow: var(--cta-focus-ring);
}

/* 6. The confirmation (order received) --------------------------------------------------------- */

#ozp-store .woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 880px;
}

#ozp-store .woocommerce-order > p {
	margin: 0;
}

#ozp-store .woocommerce-order > section {
	margin-top: 16px;
}

#ozp-store .woocommerce-thankyou-order-received {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: 300 clamp(18px, 2vw, 20px)/1.45 var(--font-body);
	color: var(--fg-1);
}

#ozp-store ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--border-hairline);
	list-style: none;
}

#ozp-store ul.order_details::before,
#ozp-store ul.order_details::after {
	display: none;
}

#ozp-store ul.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fg-3);
}

#ozp-store ul.order_details li strong {
	display: block;
	margin-top: 6px;
	font: 300 16px/1.4 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-1);
}

/* Woo Subscriptions' tables after the order's ("Related subscriptions", "Related orders"). */
#ozp-store :is(.woocommerce-order-details, .woocommerce-MyAccount-content) > header {
	margin-top: 48px;
}

#ozp-store .woocommerce-customer-details address {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-xs);
	font: 300 15px/1.5 var(--font-body);
	color: var(--fg-2);
}

#ozp-store .woocommerce-customer-details address p {
	margin: 12px 0 0;
}

/* 7. The client account ------------------------------------------------------------------------ */

#ozp-store :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
}

#ozp-store .woocommerce-MyAccount-navigation {
	margin: 0 0 40px;
}

#ozp-store .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--border-hairline);
	list-style: none;
}

#ozp-store .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

#ozp-store .woocommerce-MyAccount-navigation a {
	font: 600 14px/1.4 var(--font-body);
	color: var(--fg-2);
	text-decoration: none;
}

#ozp-store .woocommerce-MyAccount-navigation a:hover,
#ozp-store .woocommerce-MyAccount-navigation .is-active a {
	color: var(--fg-1);
}

#ozp-store .woocommerce-MyAccount-navigation .is-active a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

#ozp-store .woocommerce-MyAccount-content {
	max-width: 880px;
}

#ozp-store .woocommerce-MyAccount-content > :is(h2, h3, header, section) {
	margin-top: 48px;
}

#ozp-store .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

#ozp-store .woocommerce-MyAccount-content > p {
	margin: 0 0 1em;
}

#ozp-store .woocommerce-MyAccount-content form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The address form: its fields, Woo Subscriptions' checkbox, the button. */
#ozp-store .woocommerce-address-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#ozp-store .woocommerce-address-fields > p {
	margin: 0;
}

#ozp-store .woocommerce-MyAccount-content fieldset {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 8px 0 0;
	padding: 20px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
}

#ozp-store .woocommerce-MyAccount-content legend {
	padding: 0 6px;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fg-2);
}

#ozp-store .woocommerce-MyAccount-content .clear {
	display: none;
}

/* Logged out: the login and lost-password forms, as the free-audit card. */
#ozp-store :is(form.login, form.lost_reset_password, form.woocommerce-ResetPassword) {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
	margin: 0 0 24px;
	padding: clamp(24px, 3vw, 40px);
	background: var(--surface-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	text-align: left;
}

#ozp-store :is(form.login, form.lost_reset_password, form.woocommerce-ResetPassword) p {
	margin: 0;
}

#ozp-store :is(form.login, form.lost_reset_password, form.woocommerce-ResetPassword) .form-row:has(.woocommerce-form-login__submit) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}