/* ==========================================================================
   CIAB My Account
   ========================================================================== */

.woocommerce-account main .woocommerce {
	max-width: var( --wp--style--global--wide-size );
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 20%;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 78%;
}

@media ( max-width: 768px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		display: none;
	}

	.woocommerce-account .is-layout-constrained .woocommerce-MyAccount-content {
		width: 100%;
	}
}

/* Custom properties ------------------------------------------------------ */

.woocommerce-account {
	--myaccount--cell-padding-y: 1.1rem;
	--myaccount--cell-padding-x: 1rem;
	--myaccount--color-hover: color-mix(
		in srgb,
		currentColor 10%,
		transparent
	);
	--myaccount--border-color: color-mix(
		in srgb,
		currentColor 20%,
		transparent
	);
	--myaccount--border: 1px solid var( --myaccount--border-color );
	--myaccount--dot-size: 4px;
	--myaccount--mosaic-gap: 4px;
	--myaccount--image-size: 55px;
}

/* Table — override core shop_table styles -------------------------------- */

.ciab-myaccount-view table.shop_table {
	border-radius: 0;
	border-collapse: collapse;
	border: var( --myaccount--border );
	width: 100%;
	font-size: 1em;
}

.ciab-myaccount-view table.shop_table th,
.ciab-myaccount-view table.shop_table td {
	padding: var( --myaccount--cell-padding-y )
		var( --myaccount--cell-padding-x );
	vertical-align: middle;
	border-bottom: var( --myaccount--border );
}

.ciab-myaccount-view table.shop_table tfoot td {
	font-weight: normal;
}

.ciab-myaccount-view table.shop_table th:last-child,
.ciab-myaccount-view table.shop_table td:last-child {
	text-align: right;
}

.woocommerce-page .ciab-myaccount-view form .form-row label {
	margin-bottom: 0;
}

/* Navigation ------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border-left: var( --myaccount--border );
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	margin: 0 0 0.5rem var( --wp--preset--spacing--20 );
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
	border-left: 2px solid currentColor;
	margin-left: -1px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	margin-left: calc( var( --wp--preset--spacing--20 ) - 1px );
}

/* Page Layout */

.ciab-myaccount-breadcrumb {
	display: inline-block;
	margin-bottom: var( --wp--preset--spacing--20 );
}

.ciab-myaccount-heading,
.ciab-myaccount-view form > h2 {
	margin: 0;
	margin-bottom: var( --wp--preset--spacing--30 );
}

.ciab-myaccount-heading + p {
	margin-top: 0;
}

.ciab-myaccount-heading:has( + p ) {
	margin-bottom: 0;
}

.ciab-myaccount-empty-state-cta {
	display: inline-block;
	margin-top: var( --wp--preset--spacing--20 );
}

/* Action menu ------------------------------------------------------------ */

.ciab-myaccount-action-menu-wrapper--desktop {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ciab-myaccount-action-menu-wrapper--mobile {
	display: none;
}

.ciab-myaccount-action-menu-wrapper .button.view {
	white-space: nowrap;
}

.ciab-myaccount-action-menu {
	position: relative;
	padding-inline-start: 0.5rem;
}

.ciab-myaccount-action-menu__trigger {
	--trigger-size: calc( 0.8 * var( --myaccount--image-size ) );
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --trigger-size );
	height: var( --trigger-size );
	border-radius: var( --trigger-size );
}

.ciab-myaccount-action-menu__trigger:hover,
.ciab-myaccount-action-menu__trigger:focus {
	background-color: var( --myaccount--color-hover );
}

.ciab-myaccount-action-menu__dots {
	position: relative;
}

.ciab-myaccount-action-menu__dots,
.ciab-myaccount-action-menu__dots::before,
.ciab-myaccount-action-menu__dots::after {
	width: var( --myaccount--dot-size );
	height: var( --myaccount--dot-size );
	background-color: currentColor;
}

.ciab-myaccount-action-menu__dots::before,
.ciab-myaccount-action-menu__dots::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
}

.ciab-myaccount-action-menu__dots::before {
	top: -7px;
}

.ciab-myaccount-action-menu__dots::after {
	top: 7px;
}

.ciab-myaccount-action-menu__dropdown {
	display: none;
	flex-direction: column;
	position: absolute;
	right: 0;
	top: 97%;
	background: var( --wp--preset--color--base, #fff );
	border: var( --myaccount--border );
	min-width: 105px; /* Arbitrary vlaue from designs */
	z-index: 100;
}

.ciab-myaccount-action-menu__trigger[aria-expanded="true"]
	+ .ciab-myaccount-action-menu__dropdown {
	display: flex;
}

/* Strong selector to beat default WooCommerce anchor styles */
.woocommerce-account .ciab-myaccount-action-menu__item {
	padding: 0.5rem 1rem;
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
}

.ciab-myaccount-action-menu__item:hover {
	background-color: var( --myaccount--color-hover );
}

/* Badge ------------------------------------------------------------------ */

.ciab-myaccount-status-badge,
.ciab-myaccount-view mark.order-status {
	background: #f7f7f7;
	padding: 0.25em 0.5em;
	font-size: 0.85em;
}

/* Payment method actions ------------------------------------------------- */

.ciab-myaccount-view .payment-method-actions {
	vertical-align: middle;
	text-align: right;
}

.ciab-myaccount-view .payment-method-actions a,
.ciab-myaccount-view .payment-method-actions .ciab-myaccount-action-menu {
	vertical-align: middle;
	display: inline-block;
}

/* Add payment method form ------------------------------------------------ */

.ciab-myaccount-view #payment #place_order {
	float: none;
}

/* Account details — password fieldset ------------------------------------ */

.ciab-myaccount-view .ciab-myaccount-password-fieldset {
	display: flex;
	flex-wrap: wrap;
	column-gap: var( --myaccount--cell-padding-x );
	border: var( --myaccount--border );
	margin-inline: 0;
}

.ciab-myaccount-view .ciab-myaccount-password-fieldset .form-row {
	flex: 1 1 0;
	min-width: 0;
}

.ciab-myaccount-view .ciab-myaccount-password-fieldset legend {
	float: left;
	width: 100%;
	font-weight: bold;
}

.ciab-myaccount-view .ciab-myaccount-fieldset-help {
	flex-basis: 100%;
	margin: 0;
}

.woocommerce .ciab-myaccount-view form .form-row {
	padding: 0;
}

.woocommerce .ciab-myaccount-view form .form-row-first,
.woocommerce .ciab-myaccount-view form .form-row-last {
	width: 49%;
}

/* Address card ----------------------------------------------------------- */

.ciab-myaccount-address-card {
	position: relative;
}

.woocommerce .ciab-myaccount-address-card address {
	padding-right: var( --wp--preset--spacing--50 );
	border: var( --myaccount--border );
	border-radius: 0;
}

.ciab-myaccount-address-card__edit {
	position: absolute;

	/* Align the position with core padding */
	top: 6px;
	right: 12px;
}

/* Edit address form ------------------------------------------------------ */

/* Hide it from CSS rather than overwriting the whole template to prevent rendering */
.ciab-myaccount-view .woocommerce-address-fields h2:empty {
	display: none;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media ( max-width: 768px ) {
	/* Table-to-card transformation for responsive tables */
	.ciab-myaccount-view table.shop_table_responsive thead {
		display: none;
	}

	.ciab-myaccount-view table.shop_table_responsive {
		border: none;
	}

	.ciab-myaccount-view table.shop_table_responsive tr {
		display: block;
		border: var( --myaccount--border );
		padding: var( --myaccount--cell-padding-x );
		margin-bottom: var( --wp--preset--spacing--20 );
	}

	/* Remove WC responsive zebra striping */
	.woocommerce
		.ciab-myaccount-view
		table.shop_table_responsive
		tr:nth-child( 2n )
		td {
		background: none;
	}

	/* Each cell becomes a stacked block — !important to beat WC responsive */
	.ciab-myaccount-view table.shop_table_responsive tr td,
	.ciab-myaccount-view table.shop_table_responsive tr th {
		display: block !important;
		padding: 0 !important;
		border: none !important;
		text-align: left !important;
		margin-bottom: 0.5rem;
	}

	.ciab-myaccount-view table.shop_table_responsive tr td:last-child {
		margin-bottom: 0;
	}

	/* Override WC responsive inline labels — reset float and width */
	.ciab-myaccount-view table.shop_table_responsive tr td::before {
		float: none !important;
		width: auto !important;
		display: inline !important;
	}

	/* Toggle desktop/mobile action menus */
	.ciab-myaccount-action-menu-wrapper--desktop {
		display: none;
	}

	.ciab-myaccount-action-menu-wrapper--mobile {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.ciab-myaccount-action-menu-wrapper--mobile .button {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}

	/* Payment methods: keep actions inline */
	.ciab-myaccount-view .payment-method-actions {
		white-space: nowrap;
	}

	/* Full-width buttons on mobile */
	.ciab-myaccount-view > a.button {
		display: block;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}

	/* Form rows: stack on mobile */
	.woocommerce .ciab-myaccount-view form .form-row-first,
	.woocommerce .ciab-myaccount-view form .form-row-last {
		width: 100%;
		float: none;
	}

	/* Password fieldset: stack inputs */
	.ciab-myaccount-view .ciab-myaccount-password-fieldset .form-row {
		flex: 1 1 100%;
	}
}