/**
 * Pixelated Orange - Custom Checkout: My Account styling.
 * Loaded only on My Account pages when "Enable My Account styling" is on.
 * Uses the same --oc-* variables as the checkout (set from the Styling tab
 * by PO_Checkout_Public::oc_colors()), so both look the same.
 *
 * Everything is scoped to body.po-oc-my-account.
 *
 * Sections:
 *   1. Base text & headings
 *   2. Navigation
 *   3. Form layout
 *   4. Fields & floating labels
 *   5. Selects (country / state)
 *   6. Checkboxes & password toggle
 *   7. Buttons
 *   8. Tables (orders, downloads, order details)
 *   9. Addresses
 *  10. Mobile
 */

/* ==========================================================================
   1. Base text & headings
   ========================================================================== */
/* Same as the checkout: keeps a collapsed top margin from pushing <body>
   down, which put the address form's country/state dropdowns out of place. */
body.po-oc-my-account::before{
	content: "";
	display: table;
}
.po-oc-my-account .woocommerce{
	color: var(--oc-body-text-color, #2b2b2b);
}
.po-oc-my-account .woocommerce h2,
.po-oc-my-account .woocommerce h3,
.po-oc-my-account .woocommerce legend{
	color: var(--oc-heading-color, #000000);
}

/* Page title - same heading style as the checkout. */
.po-oc-my-account .entry-header h1,
.po-oc-my-account .woocommerce-MyAccount-content > .entry-title,
.po-oc-my-account .woocommerce-EditAccountForm fieldset legend,
.po-oc-my-account .woocommerce-order-details__title,
.po-oc-my-account .woocommerce-column__title{
	font-family: var(--oc-heading-font-family, inherit);
	font-size: var(--oc-heading-font-size, 18px);
	font-weight: var(--oc-heading-font-weight, 700);
	text-transform: var(--oc-heading-text-transform, uppercase);
	color: var(--oc-heading-color, #000000);
}

/* ==========================================================================
   2. Navigation
   ========================================================================== */
.po-oc-my-account .woocommerce-MyAccount-navigation{
	/* Same box as the checkout's .information-review-box. */
	background-color: var(--oc-field-background, #fff);
	padding: 0 var(--oc-global-small-spacing, 10px);
	border: 1px solid var(--oc-field-background, #fff);
	border-radius: 6px;
	color: var(--oc-field-text-color, #333333);
	box-sizing: border-box;
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul{
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul li{
	margin: 0;
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul li a{
	display: block;
	padding: var(--oc-global-small-spacing, 10px) 0;
	color: var(--oc-steps-color, #2b2b2b);
	text-decoration: none;
	border-bottom: 1px solid var(--oc-field-border-color, #d5d5d5);
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul li:last-child a{
	border-bottom: none;
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul li a:hover,
.po-oc-my-account .woocommerce-MyAccount-navigation ul li.is-active a,
.po-oc-my-account .woocommerce-MyAccount-navigation ul li.current-menu-item a{
	color: var(--oc-steps-active-color, #2b2b2b);
}
.po-oc-my-account .woocommerce-MyAccount-navigation ul li.is-active a,
.po-oc-my-account .woocommerce-MyAccount-navigation ul li.current-menu-item a{
	font-weight: 700;
}

/* ==========================================================================
   3. Form layout
   ========================================================================== */
.po-oc-my-account form.woocommerce-form-login,
.po-oc-my-account form.woocommerce-form-register,
.po-oc-my-account form.woocommerce-ResetPassword,
.po-oc-my-account .woocommerce-EditAccountForm,
.po-oc-my-account .woocommerce-address-fields__field-wrapper{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account form.woocommerce-form-login > *,
.po-oc-my-account form.woocommerce-form-register > *,
.po-oc-my-account form.woocommerce-ResetPassword > *,
.po-oc-my-account .woocommerce-EditAccountForm > *,
.po-oc-my-account .woocommerce-address-fields__field-wrapper > *{
	grid-column: 1 / -1;
	margin: 0;
}
.po-oc-my-account .woocommerce form .form-row{
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.po-oc-my-account .woocommerce form .form-row-first,
.po-oc-my-account .woocommerce form .form-row-last{
	grid-column: span 3 / span 3;
}
.po-oc-my-account #billing_city_field,
.po-oc-my-account #billing_state_field,
.po-oc-my-account #billing_postcode_field,
.po-oc-my-account #shipping_city_field,
.po-oc-my-account #shipping_state_field,
.po-oc-my-account #shipping_postcode_field{
	grid-column: span 2 / span 2;
}
.po-oc-my-account .woocommerce-EditAccountForm fieldset{
	display: grid;
	gap: var(--oc-global-small-spacing, 10px);
	padding: 0;
	margin: 0;
	border: none;
}
.po-oc-my-account .woocommerce-EditAccountForm fieldset legend{
	padding: 0;
	margin-bottom: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account .woocommerce-EditAccountForm em{
	display: block;
	margin-top: var(--oc-global-small-spacing, 10px);
	font-size: 1em;
}
.po-oc-my-account .woocommerce-address-fields > p:last-child{
	margin-top: var(--oc-global-spacing, 20px);
}

/* ==========================================================================
   4. Fields & floating labels
   ========================================================================== */
.po-oc-my-account .woocommerce form .form-row{
	position: relative;
}
.po-oc-my-account .woocommerce form .form-row:has(input.input-text, select, textarea) > label{
	position: absolute;
	top: 0;
	left: 0;
	margin: .25em 0 0;
	padding: 0 1.16em;
	line-height: 2;
	color: var(--oc-field-label-color--when-filled, #737373);
	font-size: var(--oc-field-label-font-size, 12px);
	font-weight: var(--oc-field-label-font-weight, 400);
	text-transform: var(--oc-field-label-text-transform, none);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: all .2s ease-out;
}
.po-oc-my-account .woocommerce form .form-row.form-field--is-filled:has(input.input-text, select, textarea) > label{
	opacity: 1;
}
.po-oc-my-account .woocommerce form .form-row input.input-text,
.po-oc-my-account .woocommerce form .form-row textarea,
.po-oc-my-account .woocommerce form .form-row select{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 12px;
	background: var(--oc-field-background, #fff);
	color: var(--oc-field-text-color, #333333);
	font-size: var(--oc-field-text-font-size, 16px);
	font-weight: var(--oc-field-text-font-weight, 400);
	line-height: 19px;
	border: 1px solid var(--oc-field-border-color, #d5d5d5);
	border-radius: var(--oc-field-border-radius, 6px);
	box-shadow: none;
	transition: all .2s ease-out;
}
.po-oc-my-account .woocommerce form .form-row.form-field--is-filled input.input-text,
.po-oc-my-account .woocommerce form .form-row.form-field--is-filled select{
	padding: 24px 12px 6px;
}
.po-oc-my-account .woocommerce form .form-row.form-field--is-filled textarea{
	padding-top: 28px;
}
.po-oc-my-account .woocommerce form .form-row input.input-text::placeholder,
.po-oc-my-account .woocommerce form .form-row textarea::placeholder{
	color: var(--oc-field-label-color-when-empty, #737373);
	text-transform: none;
	opacity: 1;
}
.po-oc-my-account .woocommerce form .form-row input.input-text:focus,
.po-oc-my-account .woocommerce form .form-row textarea:focus,
.po-oc-my-account .woocommerce form .form-row select:focus{
	outline: none;
	border-color: var(--oc-field-focus-border-color, #000000);
}
.po-oc-my-account .woocommerce form .form-row.woocommerce-invalid input.input-text,
.po-oc-my-account .woocommerce form .form-row.woocommerce-invalid select,
.po-oc-my-account .woocommerce form .form-row.woocommerce-invalid .select2-selection{
	border-color: var(--oc-field-error-border-color, #a00);
}
.po-oc-my-account .woocommerce form .form-row .woocommerce-input-wrapper{
	display: block;
}

/* ==========================================================================
   5. Selects (country / state)
   ========================================================================== */
.po-oc-my-account .woocommerce form .form-row select{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737373' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
}
.po-oc-my-account .woocommerce form .form-row .select2-container{
	width: 100% !important;
}
.po-oc-my-account .woocommerce form .form-row .select2-container--default .select2-selection--single{
	height: auto;
	padding: 15px 12px;
	background-color: var(--oc-field-background, #fff);
	border: 1px solid var(--oc-field-border-color, #d5d5d5);
	border-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce form .form-row.form-field--is-filled .select2-container--default .select2-selection--single{
	padding: 24px 12px 6px;
}
.po-oc-my-account .woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered{
	padding: 0;
	line-height: 19px;
	color: var(--oc-field-text-color, #333333);
	font-size: var(--oc-field-text-font-size, 16px);
	font-weight: var(--oc-field-text-font-weight, 400);
}
.po-oc-my-account .woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}
.po-oc-my-account .woocommerce form .form-row .select2-container--focus .select2-selection--single,
.po-oc-my-account .woocommerce form .form-row .select2-container--open .select2-selection--single{
	border-color: var(--oc-field-focus-border-color, #000000);
}
.po-oc-my-account .select2-dropdown{
	background-color: var(--oc-field-background, #fff);
	color: var(--oc-field-text-color, #333333);
	border-color: var(--oc-field-border-color, #d5d5d5);
}

/* ==========================================================================
   6. Checkboxes & password toggle
   ========================================================================== */
.po-oc-my-account .woocommerce form .woocommerce-form__label-for-checkbox{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 var(--oc-global-small-spacing, 10px) 0 0;
}
.po-oc-my-account .woocommerce form .password-input{
	position: relative;
	display: block;
}
.po-oc-my-account .woocommerce form .password-input input.input-text{
	padding-right: 44px;
}
.po-oc-my-account .woocommerce form .show-password-input{
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	color: var(--oc-field-text-color, #333333);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */
.po-oc-my-account .woocommerce button.button,
.po-oc-my-account .woocommerce a.button,
.po-oc-my-account .woocommerce input.button,
.po-oc-my-account .woocommerce button[type="submit"],
.po-oc-my-account .woocommerce-Address-title a.edit{
	display: inline-block;
	padding: 10px 30px;
	background-color: var(--oc-btn-background-color, #2b2b2b);
	color: var(--oc-btn-text-color, #fff);
	font-family: var(--oc-btn-font-family, inherit);
	font-size: var(--oc-btn-font-size, 14px);
	font-weight: var(--oc-btn-font-weight, 400);
	text-transform: var(--oc-btn-text-transform, none);
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid var(--oc-btn-background-color, #2b2b2b);
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease-out;
}
.po-oc-my-account .woocommerce button.button:hover,
.po-oc-my-account .woocommerce a.button:hover,
.po-oc-my-account .woocommerce input.button:hover,
.po-oc-my-account .woocommerce button[type="submit"]:hover,
.po-oc-my-account .woocommerce-Address-title a.edit:hover{
	background-color: var(--oc-btn-hover-background-color, #000000);
	border-color: var(--oc-btn-hover-background-color, #000000);
	color: var(--oc-btn-hover-text-color, #fff);
}
.po-oc-my-account .woocommerce .show-password-input:hover{
	background: none;
}
.po-oc-my-account .woocommerce table .button{
	padding: 6px 14px;
	margin: 2px 4px 2px 0;
}

/* ==========================================================================
   8. Tables (orders, downloads, order details)
   ========================================================================== */
.po-oc-my-account .woocommerce table.shop_table{
	width: 100%;
	border: 1px solid var(--oc-field-border-color, #d5d5d5);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--oc-field-border-radius, 6px);
	background: var(--oc-field-background, #fff);
}
.po-oc-my-account .woocommerce table.shop_table th,
.po-oc-my-account .woocommerce table.shop_table td{
	padding: var(--oc-global-small-spacing, 10px);
	border: none;
	border-top: 1px solid var(--oc-field-border-color, #d5d5d5);
	text-align: left;
	vertical-align: middle;
}
/* No column headings - the first row takes the top edge instead. */
.po-oc-my-account .woocommerce table.shop_table thead{
	display: none;
}
.po-oc-my-account .woocommerce table.shop_table tbody tr:first-child th,
.po-oc-my-account .woocommerce table.shop_table tbody tr:first-child td{
	border-top: none;
}
/* Plain links only - buttons keep their own button text colour. */
.po-oc-my-account .woocommerce table.shop_table a:not(.button){
	color: inherit;
}

/* ==========================================================================
   9. Addresses
   ========================================================================== */
.po-oc-my-account .woocommerce-Addresses .woocommerce-Address{
	padding: var(--oc-global-spacing, 20px);
	background: var(--oc-field-background, #fff);
	border-radius: var(--oc-field-border-radius, 6px);
	box-sizing: border-box;
}
.po-oc-my-account .woocommerce-Addresses .woocommerce-Address:not(:last-child){
	margin-bottom: var(--oc-global-spacing, 20px);
}
.po-oc-my-account .woocommerce-Addresses .woocommerce-Address::before,
.po-oc-my-account .woocommerce-Addresses .woocommerce-Address::after{
	display: none;
}
.po-oc-my-account .woocommerce-Address-title{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.po-oc-my-account .woocommerce-Address-title::before,
.po-oc-my-account .woocommerce-Address-title::after,
.woocommerce-account .woocommerce .woocommerce-Address-title::before,
.woocommerce-account .woocommerce .woocommerce-Address-title::after{
	content: none !important;
	display: none !important;
}
.po-oc-my-account .woocommerce-Address-title h2,
.po-oc-my-account .woocommerce-Address-title h3{
	margin: 0;
	font-family: var(--oc-heading-font-family, inherit);
	font-size: var(--oc-heading-font-size, 18px);
	font-weight: var(--oc-heading-font-weight, 700);
	text-transform: var(--oc-heading-text-transform, uppercase);
	color: var(--oc-heading-color, #000000);
}
/* The edit-address form's own heading is emptied (it's in the page title
   instead), so hide the empty tag. */
.po-oc-my-account .woocommerce-MyAccount-content form > h2:empty{
	display: none;
}
.po-oc-my-account .woocommerce-Address address{
	margin-top: var(--oc-global-small-spacing, 10px);
	font-style: normal;
}

/* ==========================================================================
   10. Mobile
   ========================================================================== */
@media (max-width: 767px){
	.po-oc-my-account .woocommerce form .form-row-first,
	.po-oc-my-account .woocommerce form .form-row-last,
	.po-oc-my-account #billing_city_field,
	.po-oc-my-account #billing_state_field,
	.po-oc-my-account #billing_postcode_field,
	.po-oc-my-account #shipping_city_field,
	.po-oc-my-account #shipping_state_field,
	.po-oc-my-account #shipping_postcode_field{
		grid-column: 1 / -1;
	}
}

/* Account details: space above and below the email address field. */
.po-oc-my-account .woocommerce-EditAccountForm #account_email_field{
	margin-top: var(--oc-global-spacing, 20px);
	margin-bottom: var(--oc-global-spacing, 20px);
}

/* Account details: display name hint, and the password fieldset. */
.po-oc-my-account #account_display_name_description{
	display: block;
	margin-bottom: var(--oc-global-spacing, 20px);
}
.po-oc-my-account .woocommerce-EditAccountForm fieldset{
	margin-top: var(--oc-global-spacing, 20px);
	margin-bottom: var(--oc-global-spacing, 20px);
}

/* Orders list: actions on the right. */
.po-oc-my-account .woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions{
	text-align: right;
}

/* Gap between a notice's text and its button. */
.po-oc-my-account .woocommerce-info a{
	margin-left: 20px;
}

/* Single order: product image beside the name, quantity and meta. */
.po-oc-my-account .po-oc-order-item{
	display: flex;
	padding-top: var(--oc-global-small-spacing, 10px);
	padding-bottom: var(--oc-global-small-spacing, 10px);
	align-items: center;
	gap: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account .po-oc-order-item-image{
	flex: 0 0 100px;
	width: 100px;
}
.po-oc-my-account .po-oc-order-item-image img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.po-oc-my-account .po-oc-order-item-details{
	flex: 1;
	min-width: 0;
}

/* Single order table: the products (tbody) are the box; the totals
   (tfoot) sit under it on the page background. Borders and background go
   on the tbody cells, as a tbody can't take a border-radius itself. */
.po-oc-my-account .woocommerce table.shop_table.woocommerce-table--order-details{
	background: none;
	border: none;
	border-radius: 0;
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody td,
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody th{
	background: var(--oc-field-background, #fff);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:first-child > *{
	border-top: 1px solid var(--oc-field-border-color, #d5d5d5);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:last-child > *{
	border-bottom: 1px solid var(--oc-field-border-color, #d5d5d5);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr > :first-child{
	border-left: 1px solid var(--oc-field-border-color, #d5d5d5);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr > :last-child{
	border-right: 1px solid var(--oc-field-border-color, #d5d5d5);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:first-child > :first-child{
	border-top-left-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:first-child > :last-child{
	border-top-right-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:last-child > :first-child{
	border-bottom-left-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tbody tr:last-child > :last-child{
	border-bottom-right-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot th,
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot td{
	padding: var(--oc-global-small-spacing, 10px) 0 0;
}
/* No line directly under the products box. */
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot tr:first-child > *{
	border-top: none;
}

/* Single order: billing / shipping addresses side by side, each in the
   same box as the checkout's .information-review-box. */
.po-oc-my-account .woocommerce-columns--addresses{
	display: flex;
	gap: var(--oc-global-spacing, 20px);
}
.po-oc-my-account .woocommerce-columns--addresses::before,
.po-oc-my-account .woocommerce-columns--addresses::after{
	display: none;
}
.po-oc-my-account .woocommerce-columns--addresses .woocommerce-column--billing-address,
.po-oc-my-account .woocommerce-columns--addresses .woocommerce-column--shipping-address{
	flex: 1;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	font-size: var(--oc-info-summary-box-font-size);
	background-color: var(--oc-field-background, #fff);
	padding: var(--oc-global-small-spacing, 10px);
	border: 1px solid var(--oc-field-background, #fff);
	border-radius: 6px;
	color: var(--oc-field-text-color, #333333);
	box-sizing: border-box;
}
.po-oc-my-account .woocommerce-columns--addresses address{
	margin-bottom: 0;
	border: none;
	padding: 0;
}
@media (max-width: 767px){
	.po-oc-my-account .woocommerce-columns--addresses{
		flex-direction: column;
	}
}

/* Side padding inside the account area. */
.po-oc-my-account.woocommerce-account .woocommerce{
	padding-left: var(--oc-global-spacing, 20px);
	padding-right: var(--oc-global-spacing, 20px);
	padding-bottom: var(--oc-global-spacing, 20px);
}

/* Single order totals: no row lines, label normal, value bold on the right. */
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot tr,
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot th,
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot td{
	border: none;
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot th,
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot td{
	text-transform: var(--oc-heading-text-transform, uppercase);
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot th{
	font-weight: normal;
}
.po-oc-my-account .woocommerce table.woocommerce-table--order-details tfoot td{
	font-weight: 700;
	text-align: right;
}

.po-oc-my-account address{
	line-height: 1.2rem;
}

body:not(.po-oc-notices).po-oc-my-account .woocommerce-error,
body:not(.po-oc-notices).po-oc-my-account .woocommerce-info,
body:not(.po-oc-notices).po-oc-my-account .woocommerce-message{
	border-top: none !important;
}

/* Account menu links use the button text transform (custom menu too). */
.po-oc-my-account .woocommerce-MyAccount-navigation-link a,
.po-oc-my-account .po-oc-custom-account-menu li a{
	text-transform: var(--oc-btn-text-transform, none);
}

/* Single order table: same text size as the checkout's order summary
   (#order_review / #order_details use the product name font size). */
.po-oc-my-account .woocommerce-order-details{
	font-size: var(--oc-product-name-font-size);
}

/* WooCommerce shrinks the orders table to 0.85em - keep it at the body size. */
.po-oc-my-account .woocommerce table.my_account_orders{
	font-size: 1em;
}

/* Global body font size (Styling > General) for the account pages. */
body.po-oc-my-account .woocommerce{
	font-size: var(--oc-type-body-size, 14px);
	font-weight: var(--oc-type-body-weight, 400);
	text-transform: var(--oc-type-body-transform, none);
}
/* Small text: account help text. */
.po-oc-my-account .woocommerce-EditAccountForm em{
	font-size: var(--oc-type-small-size, 12px);
}

/* Order item line totals in bold. */
.po-oc-my-account .woocommerce-table__product-total .amount{
	font-weight: 700;
}

/* Product titles (Styling > Product): size, weight and style. */
.shop_table.woocommerce-checkout-review-order-table .product-name-inner,
.po-oc-product-title,
.po-oc-product-title a{
	font-size: var(--oc-product-title-font-size, 1em);
	font-weight: var(--oc-product-title-font-weight, 400);
	text-transform: var(--oc-product-title-text-transform, none);
}

/* ==========================================================================
   Wishlist (Pixelated Orange Wishlist) - matches the single order product
   box: each item its own bordered box, with a 100px image beside the
   product title, in the same product title styles.
   ========================================================================== */
.po-oc-my-account .woocommerce .po-wl-list{
	gap: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account .woocommerce .po-wl-item{
	padding: var(--oc-global-small-spacing, 10px);
	gap: var(--oc-global-small-spacing, 10px);
	background: var(--oc-field-background, #fff);
	border: 1px solid var(--oc-field-border-color, #d5d5d5);
	border-radius: var(--oc-field-border-radius, 6px);
}
.po-oc-my-account .woocommerce .po-wl-item-left{
	gap: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account .woocommerce .po-wl-item-image{
	flex: 0 0 100px;
	width: 100px;
}
.po-oc-my-account .woocommerce .po-wl-item-image img{
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.po-oc-my-account .woocommerce .po-wl-item-details{
	gap: calc(var(--oc-global-small-spacing, 10px) / 2);
}
.po-oc-my-account .woocommerce .po-wl-item-title{
	color: inherit;
	text-decoration: none;
	font-size: var(--oc-product-title-font-size, 1em);
	font-weight: var(--oc-product-title-font-weight, 400);
	text-transform: var(--oc-product-title-text-transform, none);
}
.po-oc-my-account .woocommerce .po-wl-item-price{
	font-weight: 700;
}
.po-oc-my-account .woocommerce .po-wl-remove{
	font-size: var(--oc-type-small-size, 12px);
}
.po-oc-my-account .woocommerce .po-wl-item-right .button{
	padding: 6px 14px;
}

/* Share link: field + button styling. */
.po-oc-my-account .woocommerce .po-wl-share{
	margin-top: var(--oc-global-spacing, 20px);
	gap: var(--oc-global-small-spacing, 10px);
}
.po-oc-my-account .woocommerce .po-wl-share-url{
	box-sizing: border-box;
	padding: var(--oc-global-small-spacing, 10px) 12px;
	background: var(--oc-field-background, #fff);
	color: var(--oc-field-text-color, #333333);
	font-size: 1em;
	border: 1px solid var(--oc-field-border-color, #d5d5d5);
	border-radius: var(--oc-field-border-radius, 6px);
	box-shadow: none;
}
.po-oc-my-account .woocommerce .po-wl-share-url:focus{
	outline: none;
	border-color: var(--oc-field-focus-border-color, #000000);
}
.po-oc-my-account .woocommerce .po-wl-copy-url{
	padding: 6px 14px;
	background-color: var(--oc-btn-background-color, #2b2b2b);
	color: var(--oc-btn-text-color, #fff);
	font-family: var(--oc-btn-font-family, inherit);
	font-size: var(--oc-btn-font-size, 14px);
	font-weight: var(--oc-btn-font-weight, 400);
	text-transform: var(--oc-btn-text-transform, none);
	line-height: 1.4;
	border: 1px solid var(--oc-btn-background-color, #2b2b2b);
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease-out;
}
.po-oc-my-account .woocommerce .po-wl-copy-url:hover{
	background-color: var(--oc-btn-hover-background-color, #000000);
	border-color: var(--oc-btn-hover-background-color, #000000);
	color: var(--oc-btn-hover-text-color, #fff);
}

@media (max-width: 767px){
	.po-oc-my-account .woocommerce .po-wl-item{
		flex-wrap: wrap;
	}
}