/* ==========================================================================
   Avgi Wear 2.0 — bag, checkout, confirmation and account
   Loaded only on those pages (see inc/assets.php).
   ========================================================================== */

.commerce-page {
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(20px, 3vw, 40px) var(--gutter) 0;
}

.commerce-page__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 26px 0 clamp(24px, 3vw, 40px);
}

.commerce-page__title {
	margin: 0;
	font-size: var(--step-4);
	font-weight: 250;
	line-height: 1.2;
}

.commerce-page__meta {
	margin: 0;
	color: var(--muted);
}

.clear {
	display: none;
}

/* Progress steps -------------------------------------------------------- */

.checkout-steps {
	display: flex;
	align-items: center;
	max-width: 660px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.checkout-steps li {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

.checkout-steps li:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-inline: 14px;
	background: var(--line-strong);
}

.checkout-steps li.is-done::after {
	background: var(--plum);
}

.checkout-steps li:last-child {
	flex: none;
}

.checkout-steps__dot {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}

.checkout-steps .is-current {
	color: var(--ink);
	font-weight: 600;
}

.checkout-steps .is-current .checkout-steps__dot {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.checkout-steps .is-done .checkout-steps__dot {
	border-color: var(--plum);
	background: var(--plum);
	color: var(--card);
}

.checkout-steps .is-done .icon {
	width: 15px;
	height: 15px;
}

@media (hover: hover) {
	.checkout-steps a:hover {
		color: var(--ink);
		text-decoration: underline;
	}
}

@media (max-width: 600px) {
	.checkout-steps li:not(.is-current) > span:not(.checkout-steps__dot),
	.checkout-steps li:not(.is-current) > a {
		display: none;
	}

	.checkout-steps li:not(:last-child)::after {
		margin-inline: 8px;
	}
}

/* Bag (cart page) --------------------------------------------------------- */

.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	align-items: start;
	gap: clamp(24px, 4vw, 64px);
}

.cart-items {
	display: grid;
	border-top: 1px solid var(--line);
}

.cart-item {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 20px;
	padding-block: 22px;
	border-bottom: 1px solid var(--line);
}

.cart-item__media a,
.cart-item__media > img {
	display: block;
}

.cart-item__media img {
	width: 100%;
	aspect-ratio: 1; /* Bohemi: square product photos */
	border-radius: var(--radius);
	background: var(--paper-2);
	object-fit: cover;
}

.cart-item__body {
	display: grid;
	align-content: space-between;
	gap: 14px;
	min-width: 0;
}

.cart-item__head {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.cart-item__name > a {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.cart-item__price {
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

.cart-item__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.cart-item__qty .qty-stepper {
	height: 44px;
}

.cart-item__qty .qty-stepper__btn {
	width: 36px;
	height: 36px;
}

.cart-item__subtotal {
	margin-inline-start: auto;
	font-weight: 700;
}

.cart-item__remove a.remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 13px;
}

@media (hover: hover) {
	.cart-item__remove a.remove:hover {
		color: var(--danger);
	}
}

.cart-item__remove .icon {
	width: 16px;
	height: 16px;
}

.backorder_notification {
	margin: 6px 0 0;
	color: var(--warning);
	font-size: 13px;
}

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px;
}

.cart-coupon summary,
.checkout-note summary,
.summary-coupon summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 6px;
	color: var(--ink-2);
	font-size: 14px;
	list-style: none;
	cursor: pointer;
}

.cart-coupon summary::-webkit-details-marker,
.checkout-note summary::-webkit-details-marker,
.summary-coupon summary::-webkit-details-marker {
	display: none;
}

.cart-coupon summary .icon,
.checkout-note summary .icon,
.summary-coupon summary .icon {
	width: 16px;
	height: 16px;
	transition: rotate 0.3s var(--ease);
}

.cart-coupon[open] summary .icon,
.checkout-note[open] summary .icon,
.summary-coupon[open] summary .icon {
	rotate: 45deg;
}

.cart-coupon__field,
.summary-coupon__field {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.cart-coupon__field .input-text,
.summary-coupon__field .input-text {
	min-width: 0;
}

.cart-coupon__field .button,
.summary-coupon__field .button {
	flex: none;
	min-height: 52px;
}

.js .cart-update {
	display: none;
}

.cart-layout__aside {
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

.summary-card {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.summary-card .ship-progress {
	margin-bottom: 18px;
}

.summary-card__title {
	margin: 0 0 12px;
	font-size: var(--step-1);
	font-weight: 600;
}

.totals-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.totals-table th,
.totals-table td {
	padding: 10px 0;
	font-weight: 400;
	text-align: start;
	vertical-align: top;
}

.totals-table td {
	text-align: end;
}

.totals-table th {
	color: var(--ink-2);
}

.totals-table .shipping-totals__head th {
	padding-bottom: 0;
}

.totals-table .shipping-totals__body td {
	padding-top: 8px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
	text-align: start;
}

.totals-table .order-total th,
.totals-table .order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--line-strong);
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
}

.totals-table .order-total .amount,
.review-table .order-total .amount {
	font-size: 21px;
}

.totals-table small,
.review-table small {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 400;
}

.woocommerce-remove-coupon {
	margin-inline-start: 6px;
	color: var(--muted);
	font-size: 12px;
	text-decoration: underline;
}

.shipping-options {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shipping-option {
	position: relative;
}

.shipping-option label {
	display: block;
	margin: 0;
	padding: 12px 14px;
	padding-inline-start: 46px;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.shipping-option input[type="radio"] {
	position: absolute;
	top: 50%;
	inset-inline-start: 15px;
	translate: 0 -50%;
}

.shipping-option input[type="hidden"] + label {
	padding-inline-start: 14px;
	cursor: default;
}

.shipping-option:has(input:checked) label {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.shipping-option .amount {
	font-weight: 700;
}

.woocommerce-shipping-destination,
.woocommerce-shipping-contents {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.shipping-calculator-button {
	display: inline-flex;
	margin-top: 6px;
	font-size: 13px;
	text-decoration: underline;
}

.shipping-calculator-form {
	margin-top: 12px;
}

.wc-proceed-to-checkout {
	margin-top: 18px;
}

.summary-card__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

.summary-card__secure .icon {
	width: 15px;
	height: 15px;
}

.cross-sells,
.cart-suggestions {
	margin-top: clamp(64px, 8vw, 112px);
}

.cart-suggestions .section-title {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.empty-state--bag {
	padding-top: clamp(32px, 6vw, 72px);
}

@media (max-width: 960px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-layout__aside {
		position: static;
	}
}

@media (max-width: 560px) {
	.cart-item {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 14px;
	}

	.cart-item__head {
		flex-direction: column;
		gap: 2px;
	}

	.cart-item__subtotal {
		order: -1;
		width: 100%;
		margin: 0;
	}
}

/* Checkout -------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login {
	max-width: calc(100% - 420px - clamp(24px, 4vw, 72px));
}

.woocommerce-form-login.login,
.woocommerce-ResetPassword,
.checkout_coupon {
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.woocommerce-checkout .woocommerce-form-login {
	margin-bottom: 20px;
}

.checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	align-items: start;
	gap: clamp(24px, 4vw, 72px);
}

.checkout-layout__main {
	grid-row: 1;
	grid-column: 1;
	min-width: 0;
}

.checkout-layout__aside {
	position: sticky;
	top: 88px;
	grid-row: 1;
	grid-column: 2;
}

.checkout-section {
	margin-bottom: 16px;
	padding: clamp(20px, 2.6vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.checkout-section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: var(--step-1);
	font-weight: 600;
}

.checkout-section__index {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font-size: 14px;
	font-weight: 700;
}

.checkout-section__hint {
	margin: 0;
	color: var(--muted);
}

.woocommerce-billing-fields > .checkout-section:last-child,
.checkout-customer .checkout-section {
	margin-bottom: 16px;
}

.field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
}

.field-grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.field-grid > .form-row-first {
	grid-column: 1;
}

.field-grid > .form-row-last {
	grid-column: 2;
}

.is-single-country {
	display: none !important;
}

.woocommerce-account-fields {
	padding-top: 4px;
}

.woocommerce-account-fields .create-account {
	margin-top: 12px;
}

/* The consent ticks above them share the 4px inset, so all the checkboxes line up. */
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-checkout .avgi-consent {
	padding-inline: 4px;
}

.checkout-toggle {
	margin: 4px 0 14px;
	font-size: 15px;
	font-weight: 400;
}

.shipping_address {
	margin-bottom: 16px;
	padding: clamp(20px, 2.6vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.checkout-note {
	margin-bottom: 18px;
}

.checkout-note .woocommerce-additional-fields__field-wrapper {
	margin-top: 10px;
}

.shipping-table {
	width: 100%;
	border-collapse: collapse;
}

.shipping-table th {
	display: none;
}

.shipping-table td {
	padding: 0;
}

.wc_payment_methods {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.wc_payment_method {
	position: relative;
	border: 1px solid var(--line-strong);
	border-radius: 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.wc_payment_method:has(> input:checked) {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.wc_payment_method > input.input-radio {
	position: absolute;
	top: 18px;
	inset-inline-start: 16px;
}

.wc_payment_method > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 15px 16px;
	padding-inline-start: 48px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.wc_payment_method > label img {
	width: auto;
	max-height: 28px;
}

.payment_box {
	padding: 0 16px 16px;
	padding-inline-start: 48px;
	color: var(--ink-2);
	font-size: 14px;
}

.payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout-payment .woocommerce-info {
	margin: 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	font-size: 14px;
}

.woocommerce-privacy-policy-text p {
	color: var(--muted);
	font-size: 13px;
}

.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-link {
	text-decoration: underline;
}

.woocommerce-terms-and-conditions {
	max-height: 240px;
	margin-bottom: 14px;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 12px;
	background: var(--paper-2);
}

.place-order {
	margin: 0;
}

#place_order {
	width: 100%;
	min-height: 58px;
	font-size: 16px;
}

.checkout-summary {
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	background: var(--paper-2);
}

.checkout-summary__toggle {
	display: none;
}

.checkout-summary__title {
	margin: 0 0 12px;
	font-size: var(--step-1);
	font-weight: 600;
}

.review-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.review-table th,
.review-table td {
	padding: 10px 0;
	font-weight: 400;
	text-align: start;
	vertical-align: middle;
}

.review-table .product-thumbnail {
	width: 74px;
	padding-inline-end: 14px;
}

.review-thumb {
	position: relative;
	display: block;
	width: 58px;
}

.review-thumb img {
	display: block;
	width: 58px;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	background: var(--paper-3);
	object-fit: cover;
}

.review-thumb__qty {
	position: absolute;
	top: -8px;
	inset-inline-end: -8px;
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 5px;
	border-radius: 11px;
	background: var(--ink);
	color: var(--paper);
	font-size: 12px;
	font-weight: 700;
}

.review-table .product-name {
	font-weight: 500;
	line-height: 1.6;
}

/* The name gets the room left by the photo and the price (long notes in the price column wrap instead). */
.review-table td.product-name {
	width: 100%;
}

.review-table td.product-total {
	text-align: end;
	white-space: nowrap;
}

.review-table tfoot th {
	color: var(--ink-2);
}

.review-table tfoot td {
	text-align: end;
}

.review-table tfoot tr:first-child > * {
	padding-top: 16px;
	border-top: 1px solid var(--line-strong);
}

.review-table .order-total th,
.review-table .order-total td {
	padding-top: 14px;
	border-top: 1px solid var(--line-strong);
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
}

.summary-coupon {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.summary-coupon__message {
	margin-top: 10px;
	font-size: 13px;
}

.summary-coupon__message:empty {
	display: none;
}

.summary-coupon__message.is-error {
	color: var(--danger);
}

.summary-coupon__message.is-success {
	color: var(--success);
}

.woocommerce-checkout .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

@media (max-width: 960px) {
	.checkout-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.checkout-layout__aside,
	.checkout-layout__main {
		grid-row: auto;
		grid-column: 1;
	}

	.checkout-layout__aside {
		position: static;
	}

	.woocommerce-checkout .woocommerce-form-login-toggle,
	.woocommerce-checkout .woocommerce-form-login {
		max-width: none;
	}

	.checkout-summary {
		padding: 0;
		background: none;
	}

	.checkout-summary__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 16px 18px;
		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--paper-2);
		font-size: 14px;
		cursor: pointer;
	}

	.checkout-summary__toggle > span {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--plum);
		font-weight: 500;
	}

	.checkout-summary__toggle .icon {
		width: 18px;
		height: 18px;
		transition: rotate 0.3s var(--ease);
	}

	.checkout-summary.is-open .checkout-summary__toggle .icon--chevron-down {
		rotate: 180deg;
	}

	.checkout-summary__toggle strong {
		font-size: 16px;
	}

	.js .checkout-summary__body {
		display: none;
	}

	.checkout-summary__body {
		margin-top: 8px;
		padding: 18px;
		border-radius: 14px;
		background: var(--paper-2);
	}

	.js .checkout-summary.is-open .checkout-summary__body {
		display: block;
	}
}

/* Phones: one field per row, except short pairs (names; province + city when there is room). */
@media (max-width: 560px) {
	.field-grid {
		column-gap: 12px;
	}

	.field-grid > .form-row-first:not(.is-pair):not(.is-pair-wide),
	.field-grid > .form-row-last:not(.is-pair):not(.is-pair-wide) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 379px) {
	.field-grid > .is-pair-wide.form-row-first,
	.field-grid > .is-pair-wide.form-row-last {
		grid-column: 1 / -1;
	}
}

/* Order confirmation ------------------------------------------------------ */

.order-complete {
	max-width: 880px;
	margin-inline: auto;
}

.order-complete__head {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: clamp(24px, 4vw, 48px) 0 32px;
	text-align: center;
}

.order-complete__icon {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--success-tint);
	color: var(--success);
}

.order-complete__icon svg {
	width: 54px;
	height: 54px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.order-complete__icon svg circle,
.order-complete__icon svg path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: avgi-draw 0.9s 0.15s var(--ease-out) forwards;
}

.order-complete__icon svg path {
	animation-delay: 0.65s;
}

.order-complete__head--failed .order-complete__icon {
	background: var(--danger-tint);
	color: var(--danger);
}

.order-complete__head--failed .order-complete__icon .icon {
	width: 36px;
	height: 36px;
}

.order-complete__title {
	margin: 0;
	font-size: var(--step-4);
	font-weight: 250;
	line-height: 1.25;
}

.woocommerce-thankyou-order-received,
.order-complete__head .woocommerce-notice {
	max-width: 34em;
	margin: 0;
	color: var(--ink-2);
	font-size: var(--step-1);
}

.order-complete__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 0 0 40px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
	list-style: none;
}

.order-facts li {
	display: grid;
	gap: 2px;
	padding: 16px 18px;
	background: var(--card);
	color: var(--muted);
	font-size: 13px;
}

.order-facts strong {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

[dir="rtl"] .order-facts strong[dir="ltr"] {
	text-align: right;
}

.order-complete__next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 28px;
	margin-top: 44px;
}

.woocommerce-bacs-bank-details {
	margin-bottom: 32px;
}

.wc-bacs-bank-details-heading,
.wc-bacs-bank-details-account-name {
	font-size: var(--step-1);
	font-weight: 600;
}

.wc-bacs-bank-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.wc-bacs-bank-details li {
	display: grid;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--muted);
	font-size: 13px;
}

.wc-bacs-bank-details strong {
	color: var(--ink);
	font-size: 15px;
}

/* Order details (confirmation and account) ------------------------------------ */

.order-details {
	margin-top: 32px;
}

.order-details__title,
.woocommerce-column__title,
.woocommerce-order-downloads__title {
	margin: 0 0 16px;
	font-size: var(--step-1);
	font-weight: 600;
}

.details-table,
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-table--order-downloads {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-lg);
	background: var(--card);
	font-size: 15px;
}

.details-table th,
.details-table td,
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	font-weight: 400;
	text-align: start;
	vertical-align: middle;
}

.details-table td:last-child {
	text-align: end;
	white-space: nowrap;
}

.details-table tfoot th {
	color: var(--muted);
}

.details-table tfoot tr:last-child > * {
	border-bottom: 0;
}

.details-table .order-total-row--order_total > * {
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
}

.line-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.line-item__thumb {
	flex: none;
	width: 56px;
}

.line-item__thumb img {
	display: block;
	width: 56px;
	aspect-ratio: 1; /* Bohemi: square product photos */
	border-radius: 8px;
	background: var(--paper-2);
	object-fit: cover;
}

.line-item__info > a {
	font-weight: 500;
}

/* Isolated from the name: after a Latin size («مشکی، S») the «× ۱» would otherwise join it in
   one left-to-right run and read «۱ × S». */
.line-item .product-quantity {
	margin-inline-start: 4px;
	color: var(--muted);
	font-weight: 400;
	unicode-bidi: isolate;
}

.order-details__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.woocommerce-customer-details {
	margin-top: 32px;
}

.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Addresses printed by extensions or older templates; the theme's own are .address-lines. */
.woocommerce-customer-details address:not(.address-lines) {
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	color: var(--ink-2);
	font-style: normal;
	line-height: 2;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
	margin: 6px 0 0;
	direction: ltr;
}

[dir="rtl"] .woocommerce-customer-details--phone,
[dir="rtl"] .woocommerce-customer-details--email {
	text-align: right;
}

@media (max-width: 640px) {
	.woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked rows on phones: the product gets the full width, its price sits under it. */
	.details-table,
	.details-table tbody,
	.details-table tfoot,
	.details-table tr {
		display: block;
		width: 100%;
	}

	.details-table thead {
		display: none;
	}

	.details-table tbody tr {
		padding: 14px;
		border-bottom: 1px solid var(--line);
	}

	/* .shop_table matches the account pages' table rule, which would otherwise draw cell
	   borders that break each row's line into pieces. */
	.shop_table.details-table tbody td {
		display: block;
		padding: 0;
		border: 0;
	}

	.shop_table.details-table tbody td.product-total {
		margin-top: 8px;
		text-align: end;
	}

	.details-table tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 14px;
		border-bottom: 1px solid var(--line);
	}

	.details-table tfoot tr:last-child {
		border-bottom: 0;
	}

	.shop_table.details-table tfoot th,
	.shop_table.details-table tfoot td {
		padding: 0;
		border: 0;
		white-space: normal;
	}
}

.auth .woocommerce-form-login.login {
	padding: 0;
	border: 0;
	background: none;
}

/* Account ---------------------------------------------------------------- */

/* Wide screens: the menu beside the content. Phones: the dashboard is the menu (a hub) and
   every other page opens with a way back to it (see the small-screen rules below). */
.account-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 4vw, 64px);
}

.account-nav {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.account-nav__profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.account-nav__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--plum);
	color: var(--card);
	font-size: 18px;
	font-weight: 700;
}

.account-nav__profile > div {
	min-width: 0;
}

.account-nav__name {
	margin: 0;
	font-weight: 600;
	line-height: 1.5;
}

.account-nav__email {
	margin: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[dir="rtl"] .account-nav__email {
	text-align: right;
}

.account-nav ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--ink-2);
	font-size: 15px;
	transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
	.account-nav a:hover {
		background: var(--paper-2);
		color: var(--ink);
	}
}

.account-nav .is-active a {
	background: var(--ink);
	color: var(--paper);
}

.account-nav .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--danger);
}

.account-nav .icon {
	width: 20px;
	height: 20px;
}

/* Page header: a way back, the title and a line of context (inc/account.php). */
.account-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
}

.account-head__back {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--card);
	color: var(--ink);
	transition: border-color 0.2s, background-color 0.2s;
}

@media (hover: hover) {
	.account-head__back:hover {
		border-color: var(--ink);
	}
}

.account-head__back:active {
	background: var(--paper-2);
}

.account-head__back .icon {
	width: 20px;
	height: 20px;
}

.account-head__text {
	min-width: 0;
}

.account-head__title {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 400;
	line-height: 1.35;
}

.account-head__meta {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 13px;
}

/* The hub ----------------------------------------------------------------- */

.account-hub {
	display: grid;
	gap: 16px;
}

/* Profile: the account's membership card. */
.account-profile {
	position: relative;
	overflow: hidden;
	padding: 22px 20px 18px;
	border-radius: 24px;
	background: var(--ink);
	color: var(--paper);
	isolation: isolate;
}

.account-profile__motif {
	position: absolute;
	z-index: -1;
	top: -54px;
	inset-inline-end: -54px;
	width: 168px;
	height: 168px;
	color: rgb(245 241 235 / 0.05);
}

.account-profile__top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.account-profile__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--plum-light);
	box-shadow: 0 0 0 4px rgb(245 241 235 / 0.1);
	color: var(--ink);
	font-size: 22px;
	font-weight: 700;
}

.account-profile__who {
	flex: 1;
	min-width: 0;
}

.account-profile__hello {
	margin: 0;
	color: var(--paper);
	font-size: var(--step-2);
	font-weight: 400;
	line-height: 1.3;
}

.account-profile__line {
	margin: 4px 0 0;
	overflow: hidden;
	color: rgb(245 241 235 / 0.62);
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-profile__edit {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgb(245 241 235 / 0.1);
	color: var(--paper);
	transition: background-color 0.2s;
}

.account-profile__edit:active {
	background: rgb(245 241 235 / 0.2);
}

.account-profile__edit .icon {
	width: 19px;
	height: 19px;
}

.account-profile__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgb(245 241 235 / 0.14);
}

.account-profile__stats div {
	display: grid;
	gap: 2px;
}

.account-profile__stats div + div {
	padding-inline-start: 16px;
	border-inline-start: 1px solid rgb(245 241 235 / 0.14);
}

.account-profile__stats dt {
	color: rgb(245 241 235 / 0.6);
	font-size: 12px;
}

.account-profile__stats dd {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
}

.account-profile__since {
	margin: 14px 0 0;
	color: rgb(245 241 235 / 0.5);
	font-size: 12px;
}

/* The order that matters now: under way, or just shipped. */
.account-spot {
	display: grid;
	gap: 10px;
}

.account-spot__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 14px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	box-shadow: 0 14px 32px -26px rgb(40 40 40 / 0.6);
	transition: border-color 0.2s;
}

@media (hover: hover) {
	.account-spot__card:hover {
		border-color: var(--line-strong);
	}
}

.account-spot__icon,
.order-status__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--plum-tint);
	color: var(--plum);
}

:is(.account-spot--success, .order-status--success) :is(.account-spot__icon, .order-status__icon) {
	background: var(--success-tint);
	color: var(--success);
}

:is(.account-spot--warning, .order-status--warning) :is(.account-spot__icon, .order-status__icon) {
	background: var(--warning-tint);
	color: var(--warning);
}

:is(.account-spot--danger, .order-status--danger) :is(.account-spot__icon, .order-status__icon) {
	background: var(--danger-tint);
	color: var(--danger);
}

:is(.account-spot--muted, .order-status--muted) :is(.account-spot__icon, .order-status__icon) {
	background: var(--paper-2);
	color: var(--muted);
}

.account-spot__icon .icon,
.order-status__icon .icon {
	width: 23px;
	height: 23px;
}

.account-spot__text {
	display: grid;
	min-width: 0;
}

.account-spot__eyebrow {
	color: var(--muted);
	font-size: 12px;
}

.account-spot__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.6;
}

.account-spot__meta {
	color: var(--muted);
	font-size: 12.5px;
}

.account-spot__chevron {
	width: 18px;
	height: 18px;
	color: var(--muted);
}

.account-spot__steps,
.order-card__steps {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.account-spot__steps {
	margin-top: 16px;
}

.account-spot__steps i,
.order-card__steps i {
	height: 4px;
	border-radius: 2px;
	background: var(--paper-3);
}

.account-spot__steps i.is-done,
.order-card__steps i.is-done {
	background: var(--plum);
}

.account-spot--success .account-spot__steps i.is-done {
	background: var(--success);
}

.account-spot--warning .account-spot__steps i.is-done,
.order-card--active:has(.status-badge--warning) .order-card__steps i.is-done {
	background: var(--warning);
}

.account-spot__card > .order-thumbs {
	grid-column: 1 / -1;
	margin-top: 14px;
}

/* Pay and cancel for an order that waits for payment. */
.order-pay-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.order-pay-actions .button {
	min-height: 48px;
	padding-inline: 18px;
	white-space: nowrap;
}

.order-pay-actions .button .icon {
	width: 19px;
	height: 19px;
}

/* Account pages, help and logout as one list: the account menu on phones. */
.account-menu {
	display: grid;
	gap: 12px;
}

.account-menu__group {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	list-style: none;
}

.account-menu__group li {
	position: relative;
}

/* Hairlines between rows start after the icons, as in the phone's own settings. */
.account-menu__group li + li::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 68px 0;
	height: 1px;
	background: var(--line);
}

.account-menu__row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 66px;
	padding: 12px 16px;
	color: var(--ink);
	transition: background-color 0.2s;
}

.account-menu__row:active {
	background: var(--paper-2);
}

@media (hover: hover) {
	.account-menu__row:hover {
		background: var(--paper-2);
	}
}

.account-menu__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--ink);
}

.account-menu__icon .icon {
	width: 20px;
	height: 20px;
}

.account-menu__text {
	display: grid;
	flex: 1;
	gap: 1px;
	min-width: 0;
}

.account-menu__label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}

.account-menu__hint {
	overflow: hidden;
	color: var(--muted);
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-menu__count {
	flex: none;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--plum-tint);
	color: var(--plum);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
}

.account-menu__chevron {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--muted);
}

.account-menu__heading {
	margin: 8px 6px -4px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.account-menu__row--leave {
	min-height: 58px;
	color: var(--danger);
}

.account-menu__row--leave .account-menu__icon {
	background: var(--danger-tint);
	color: var(--danger);
}

/* Recent orders, as short rows. */
.account-recent__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px 0 12px;
}

.account-recent__head h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.order-rows {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	list-style: none;
}

.order-rows li + li {
	border-top: 1px solid var(--line);
}

.order-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	color: var(--ink);
	transition: background-color 0.2s;
}

.order-row:active {
	background: var(--paper-2);
}

@media (hover: hover) {
	.order-row:hover {
		background: var(--paper-2);
	}
}

.order-row .order-thumbs__item:nth-child(n + 2) {
	display: none;
}

.order-row__main {
	display: grid;
	flex: 1;
	min-width: 0;
}

.order-row__number {
	font-size: 14.5px;
	font-weight: 600;
}

.order-row__meta {
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-row__end {
	display: grid;
	flex: none;
	justify-items: end;
	gap: 4px;
}

.order-row__total {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* No order yet. */
.account-empty {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 32px 20px;
	border: 1px dashed var(--line-strong);
	border-radius: 22px;
	text-align: center;
}

.account-empty__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--plum-tint);
	color: var(--plum);
}

.account-empty h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.account-empty p {
	max-width: 30em;
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 14px;
}

/* «سفارش #۲۹ | ۱ کالا»: parts of a short line split by a hairline. A middle dot would read
   as the Persian zero (۰) between two numbers. */
.line-parts > bdi + bdi::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin-inline: 8px;
	vertical-align: -0.08em;
	background: currentColor;
	opacity: 0.4;
}

/* Product photos of an order, overlapping. */
.order-thumbs {
	display: flex;
	flex: none;
}

.order-thumbs__item {
	display: grid;
	place-items: center;
	width: 44px;
	aspect-ratio: 1; /* Bohemi: square product photos */
	overflow: hidden;
	border-radius: 10px;
	background: var(--paper-2);
	box-shadow: 0 0 0 2px var(--card);
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
}

.order-thumbs__item + .order-thumbs__item {
	margin-inline-start: -10px;
}

.order-thumbs__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Order list ---------------------------------------------------------------- */

.order-filter {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.order-filter::-webkit-scrollbar {
	display: none;
}

.order-filter[hidden] {
	display: none;
}

.order-filter__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-2);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.order-filter__chip span {
	color: var(--muted);
	font-size: 12px;
}

.order-filter__chip[aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.order-filter__chip[aria-pressed="true"] span {
	color: rgb(245 241 235 / 0.7);
}

.order-cards {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-cards > li[hidden] {
	display: none;
}

.order-card {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
	transition: border-color 0.2s;
}

@media (hover: hover) {
	.order-card:hover {
		border-color: var(--line-strong);
	}
}

.order-card:active {
	background: color-mix(in srgb, var(--card), var(--paper-2));
}

.order-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.order-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.order-card__number {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.5;
}

.order-card__date {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.order-card__body {
	display: flex;
	align-items: center;
	gap: 14px;
}

.order-card__body .order-thumbs__item {
	width: 48px;
}

.order-card__sum {
	display: grid;
	flex: 1;
	justify-items: end;
	margin: 0;
}

.order-card__count {
	color: var(--muted);
	font-size: 12.5px;
}

.order-card__total {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.order-card__chevron {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--muted);
}

/* Closed orders step back. */
.order-card--closed .order-thumbs {
	opacity: 0.55;
	filter: grayscale(1);
}

.order-card--closed .order-card__total {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.order-card__actions {
	position: relative;
	z-index: 2;
}

.order-card__extra {
	padding: 8px 16px 0;
	color: var(--muted);
	font-size: 13px;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
	white-space: nowrap;
}

.status-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.status-badge--success {
	background: var(--success-tint);
	color: var(--success);
}

.status-badge--progress {
	background: var(--plum-tint);
	color: var(--plum);
}

.status-badge--warning {
	background: var(--warning-tint);
	color: var(--warning);
}

.status-badge--danger {
	background: var(--danger-tint);
	color: var(--danger);
}

.account-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.order-progress {
	display: flex;
	margin: 0 0 28px;
	padding: 22px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	list-style: none;
}

.order-progress li {
	position: relative;
	display: grid;
	flex: 1;
	justify-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}

.order-progress li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 7px;
	inset-inline-start: 50%;
	width: 100%;
	height: 2px;
	background: var(--line);
}

.order-progress li.is-done:has(+ li.is-done)::before {
	background: var(--plum);
}

.order-progress__dot {
	position: relative;
	z-index: 1;
	width: 16px;
	height: 16px;
	border: 2px solid var(--line-strong);
	border-radius: 50%;
	background: var(--card);
}

.order-progress .is-done .order-progress__dot {
	border-color: var(--plum);
	background: var(--plum);
}

.order-progress [aria-current="step"] {
	color: var(--ink);
	font-weight: 600;
}

/* Order page ----------------------------------------------------------------- */

.order-section-title,
.order-view .order-details__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}

/* The order's state: headline, steps, parcel and payment (inc/account.php). */
.order-status {
	display: grid;
	gap: 18px;
	margin-bottom: 28px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
	box-shadow: 0 14px 32px -26px rgb(40 40 40 / 0.6);
}

.order-status__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.order-status__text {
	min-width: 0;
}

.order-status__label {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.order-status__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}

.order-status .order-progress {
	margin: 0;
	padding: 6px 0 2px;
	border: 0;
	background: none;
}

.order-status .tracking-card {
	margin: 0;
	padding: 14px;
	border: 0;
	border-radius: 18px;
	background: var(--paper);
}

.order-status .tracking-card__code {
	background: var(--card);
}

.order-status .tracking-card__title {
	display: none;
}

/* The store's updates, as a timeline. */
.order-updates {
	margin-bottom: 28px;
}

.order-updates .notes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-updates .note {
	position: relative;
	padding: 0 0 18px;
	padding-inline-start: 26px;
	border-radius: 0;
	background: none;
}

.order-updates .note + .note {
	margin-top: 0;
}

.order-updates .note::before {
	content: "";
	position: absolute;
	top: 7px;
	inset-inline-start: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--plum);
	box-shadow: 0 0 0 4px var(--plum-tint);
}

.order-updates .note:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 2px;
	inset-inline-start: 8px;
	width: 1px;
	background: var(--line-strong);
}

.order-updates .meta {
	margin: 0 0 2px;
	color: var(--muted);
	font-size: 12px;
}

.order-updates .description p {
	margin: 0;
	line-height: 1.9;
}

.order-view .order-details {
	margin-top: 0;
}

.order-view .order-details__actions {
	margin-top: 14px;
}

.order-view .order-again {
	margin: 14px 0 0;
}

.order-view .order-again .button {
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
}

@media (max-width: 900px) {
	.order-view .order-again .button,
	.order-view .order-details__actions .button {
		width: 100%;
	}
}

.order-view__help {
	margin-top: 28px;
}

/* Pay for an order: the order card above the payment options. */
.pay-order {
	margin: 0 0 24px;
}

/* Delivery and billing addresses of an order: short cards. */
.customer-details {
	margin-top: 28px;
}

.customer-details__cards {
	display: grid;
	gap: 10px;
}

.customer-details__card {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--card);
}

.customer-details__title {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.customer-details__email {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.address-lines {
	display: grid;
	gap: 1px;
	color: var(--ink-2);
	font-style: normal;
	line-height: 1.85;
}

.address-lines__name {
	color: var(--ink);
	font-weight: 600;
}

.address-lines__place {
	color: var(--muted);
	font-size: 14px;
}

.address-lines__contact {
	font-size: 14px;
}

/* Saved addresses ------------------------------------------------------------- */

.address-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.address-card {
	padding: 16px 18px 18px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
}

.address-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.address-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--ink);
}

.address-card__icon .icon {
	width: 20px;
	height: 20px;
}

.address-card__head h2 {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.address-card__edit {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 500;
	transition: background-color 0.2s;
}

.address-card__edit:active {
	background: var(--paper-3);
}

@media (hover: hover) {
	.address-card__edit:hover {
		background: var(--paper-3);
	}
}

.address-card__edit .icon {
	width: 16px;
	height: 16px;
}

.address-card--empty {
	border-style: dashed;
	background: transparent;
}

.address-card__empty {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.9;
}

.address-card__add .icon {
	width: 17px;
	height: 17px;
}

.woocommerce-MyAccount-content > form,
.woocommerce-address-fields {
	max-width: 680px;
}

.woocommerce-MyAccount-content > form > h2,
.woocommerce-MyAccount-content form > h2 {
	margin-bottom: 20px;
	font-size: var(--step-2);
	font-weight: 400;
}

.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
}

.woocommerce-address-fields__field-wrapper > *,
.woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce-address-fields__field-wrapper > .form-row-first,
.woocommerce-EditAccountForm > .form-row-first {
	grid-column: 1;
}

.woocommerce-address-fields__field-wrapper > .form-row-last,
.woocommerce-EditAccountForm > .form-row-last {
	grid-column: 2;
}

.woocommerce-EditAccountForm fieldset {
	margin: 10px 0 20px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.woocommerce-EditAccountForm legend {
	padding-inline: 8px;
	font-weight: 600;
}

#account_display_name_description {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
}

#account_display_name_description em {
	font-style: normal;
}

.woocommerce-ResetPassword {
	max-width: 520px;
	margin-inline: auto;
}

.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last {
	width: 100%;
}

/* The strength meter appears when the field loses focus — often on the same tap as
   the submit button. Its space is reserved so the button never moves under the finger. */
.form-row:has(> .password-input #reg_password),
.form-row:has(> .password-input #password_1),
.form-row:has(> .password-input #account_password),
.form-row:has(#reg_password),
.form-row:has(#account_password) {
	position: relative;
	padding-bottom: 38px;
}

.woocommerce-password-strength {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin: 0;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.7;
}

.woocommerce-password-strength:empty {
	display: none;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
	background: var(--danger-tint);
	color: var(--danger);
}

.woocommerce-password-strength.good {
	background: var(--warning-tint);
	color: var(--warning);
}

.woocommerce-password-strength.strong {
	background: var(--success-tint);
	color: var(--success);
}

.woocommerce-password-hint {
	display: block;
	margin-top: -26px;
	margin-bottom: 18px;
	padding-top: 32px;
	color: var(--muted);
	font-size: 12px;
}

/* Login and registration ------------------------------------------------------ */

.auth {
	display: grid;
	max-width: 520px;
	margin: 0 auto;
}

.auth--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1040px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
}

.auth:not(.auth--split) .auth__panel {
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
}

.auth__panel {
	padding: clamp(24px, 4vw, 52px);
}

.auth__panel--register {
	background: var(--paper-2);
}

.auth__title {
	margin: 0 0 22px;
	font-size: var(--step-3);
	font-weight: 300;
}

.auth__lead {
	margin: -12px 0 22px;
	color: var(--muted);
}

.auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.auth__row .lost_password {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	text-decoration: underline;
}

.auth__note {
	color: var(--muted);
	font-size: 14px;
}

.auth__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	padding: 6px;
	background: var(--paper-2);
}

.auth__tabs[hidden] {
	display: none;
}

.auth__tabs button {
	height: 46px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--muted);
	font-weight: 500;
	cursor: pointer;
}

.auth__tabs button[aria-selected="true"] {
	background: var(--card);
	box-shadow: 0 1px 3px rgb(40 40 40 / 0.1);
	color: var(--ink);
}

@media (max-width: 760px) {
	.auth--split {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 20px;
	}

	.auth--split.has-tabs .auth__panel--register {
		background: var(--card);
	}

	.auth--split.has-tabs .auth__panel > .eyebrow,
	.auth--split.has-tabs .auth__title {
		display: none;
	}

	.auth--split.has-tabs .auth__lead {
		margin-top: 0;
	}

	.auth--split.has-tabs[data-active="login"] [data-auth-panel="register"],
	.auth--split.has-tabs[data-active="register"] [data-auth-panel="login"] {
		display: none;
	}
}

/* Account forms: fields on cards, a full-width save button -------------------------- */

.account-form,
.woocommerce-MyAccount-content > form.account-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	max-width: 680px;
}

.account-form > * {
	grid-column: 1 / -1;
}

.account-form__card {
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--card);
}

.account-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

.account-form__grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.account-form__grid > .form-row-first {
	grid-column: 1;
}

.account-form__grid > .form-row-last {
	grid-column: 2;
}

.account-form__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.account-form__card .form-row:last-child {
	margin-bottom: 0;
}

.account-form__password {
	padding: 0;
}

.account-form__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	list-style: none;
	cursor: pointer;
}

.account-form__summary::-webkit-details-marker {
	display: none;
}

.account-form__summary-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--paper-2);
}

.account-form__summary-icon .icon {
	width: 19px;
	height: 19px;
}

.account-form__summary-text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.account-form__summary .account-form__title {
	margin: 0;
}

.account-form__hint {
	color: var(--muted);
	font-size: 12.5px;
}

.account-form__summary-chevron {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--muted);
	transition: rotate 0.3s var(--ease);
}

.account-form__password[open] .account-form__summary-chevron {
	rotate: 180deg;
}

.account-form__password-fields {
	padding: 4px 18px 18px;
}

.account-form__actions {
	margin: 4px 0 0;
}

.account-form__actions .button {
	min-height: 52px;
}

/* Login and registration: a welcome above the form, tracking for guests below. */
.auth-hero {
	display: grid;
	justify-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 8px auto 24px;
	text-align: center;
}

.auth-hero__mark {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 19px;
	background: var(--ink);
	color: var(--plum-light);
}

.auth-hero__mark .icon {
	width: 27px;
	height: 27px;
}

.auth-hero__title {
	margin: 4px 0 0;
	font-size: var(--step-3);
	font-weight: 300;
	line-height: 1.3;
}

.auth-hero__perks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	color: var(--ink-2);
	font-size: 13px;
	list-style: none;
}

.auth-hero__perks li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.auth-hero__perks .icon {
	width: 16px;
	height: 16px;
	color: var(--plum);
}

.auth-guest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	max-width: 520px;
	margin: 18px auto 0;
	padding: 14px 16px;
	border: 1px dashed var(--line-strong);
	border-radius: 18px;
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}

.auth-guest .icon {
	width: 19px;
	height: 19px;
	color: var(--plum);
}

.auth-guest a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Sign-in with a code (plugins/avgi-commerce): number, then code -------------------------- */

.auth--otp {
	max-width: 460px;
}

.auth--otp .auth__panel {
	padding: 26px 22px 24px;
}

.otp__step[hidden] {
	display: none;
}

.otp__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}

.otp__lead {
	margin: 0 0 20px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.9;
}

.otp__terms {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.9;
	text-align: center;
}

.otp__terms a {
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.otp__field input {
	font-size: 18px;
	text-align: center;
}

.otp__code {
	font-size: 26px !important;
	font-weight: 600;
	letter-spacing: 0.4em;
}

.otp__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.8;
	cursor: pointer;
}

.otp__consent input {
	flex: none;
	margin-top: 4px;
}

/* A field only bots fill in. */
.otp__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.otp__error,
.phone-change .otp__error {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--danger-tint);
	color: var(--danger);
	font-size: 13.5px;
	line-height: 1.8;
}

.otp__error[hidden] {
	display: none;
}

.otp__submit {
	min-height: 52px;
}

.otp__edit {
	min-height: 32px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--plum);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.otp__resend {
	margin: 12px 0 0;
	text-align: center;
}

.otp__resend-button {
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.otp__resend-button:disabled {
	color: var(--muted);
	font-weight: 400;
	text-decoration: none;
	cursor: default;
}

/* The account's mobile, with a way to change it. */
.account-form__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
}

.phone-change__current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
}

.phone-change__number {
	font-weight: 600;
}

.phone-change__form {
	margin-top: 12px;
}

.phone-change__form[hidden],
.phone-change [hidden] {
	display: none;
}

.phone-change__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.account-form__phone {
	margin-bottom: 18px;
}

/* New accounts: a nudge to add a name. */
.account-welcome {
	max-width: 680px;
	margin: 0 0 16px;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--plum-tint);
	color: var(--plum);
}

.account-welcome p {
	margin: 0;
	line-height: 1.9;
}

.account-welcome__title {
	font-weight: 700;
}

.account-complete {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px dashed var(--plum);
	border-radius: 20px;
	background: var(--plum-tint);
	color: var(--plum);
}

.account-complete__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--card);
}

.account-complete__icon .icon {
	width: 20px;
	height: 20px;
}

.account-complete__text {
	display: grid;
	flex: 1;
	font-size: 13px;
}

.account-complete__text strong {
	font-size: 15px;
}

.account-complete__chevron {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Checkout: returning customers can sign in first; marketing messages are opt-in. */
.checkout-signin {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px dashed var(--line-strong);
	border-radius: 16px;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

.checkout-signin a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.avgi-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.8;
	cursor: pointer;
}

.avgi-consent input {
	flex: none;
	margin-top: 4px;
}

/* City picker (assets/js/city-picker.js): the city field opens a searchable list -------- */

.city-picker__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
	clip-path: inset(50%);
}

.has-city-picker .woocommerce-input-wrapper {
	position: relative;
}

.city-picker__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	padding-inline-end: 14px;
	border: 1px solid var(--line-field);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.city-picker__toggle .icon {
	flex: none;
	width: 18px;
	height: 18px;
}

.city-picker__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.city-picker__toggle.is-placeholder .city-picker__value {
	color: var(--muted);
}

.city-picker__toggle:focus-visible,
.city-picker__toggle[aria-expanded="true"] {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 4px rgb(107 74 52 / 0.14);
}

.form-row.woocommerce-invalid .city-picker__toggle {
	border-color: var(--danger);
}

/* Phones: a full-height sheet sized to what the keyboard leaves visible. */
.city-picker {
	position: fixed;
	inset: var(--picker-top, 0) 0 auto;
	width: 100%;
	height: 100vh;
	height: var(--picker-height, 100dvh);
	margin: 0;
	background: var(--paper);
	translate: 0 100%;
	transition: translate 0.45s var(--ease-out), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}

.city-picker[open] {
	display: flex;
	flex-direction: column;
	translate: 0 0;
}

@starting-style {
	.city-picker[open] {
		translate: 0 100%;
	}
}

.city-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: max(8px, env(safe-area-inset-top)) 8px;
	padding-inline: 20px 8px;
	border-bottom: 1px solid var(--line);
}

.city-picker__title {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.5;
}

.city-picker__context {
	display: block;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
}

.city-picker__search {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	margin: 14px 16px 4px;
	padding-inline: 14px;
	border: 1px solid var(--line-field);
	border-radius: 12px;
	background: var(--card);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.city-picker__search:focus-within {
	border-color: var(--ink);
	box-shadow: 0 0 0 4px rgb(107 74 52 / 0.14);
}

.city-picker__search .icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--muted);
}

.city-picker__search input[type="search"],
.city-picker__search input[type="search"]:focus {
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.city-picker__search input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.city-picker__hint {
	margin: 10px 20px 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8;
}

.city-picker__list {
	flex: 1;
	min-height: 0;
	margin: 6px 0 0;
	padding: 4px 8px calc(16px + env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.city-picker__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.city-picker__option.is-active {
	background: var(--paper-2);
}

@media (hover: hover) {
	.city-picker__option:hover {
		background: var(--paper-2);
	}
}

.city-picker__option:active {
	background: var(--paper-3);
}

.city-picker__name {
	flex: 1;
	min-width: 0;
}

.city-picker__province {
	color: var(--muted);
	font-size: 13px;
}

.city-picker__option[aria-selected="true"] {
	font-weight: 600;
}

.city-picker__option .icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--plum);
}

.city-picker__option.is-typed {
	color: var(--plum);
}

/* Wider screens: a centred panel. */
@media (min-width: 720px) {
	.city-picker {
		inset: 0;
		width: min(440px, calc(100% - 32px));
		height: min(600px, calc(100dvh - 64px));
		margin: auto;
		overflow: hidden;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow);
		opacity: 0;
		translate: 0 12px;
		transition: translate 0.3s var(--ease-out), opacity 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
	}

	.city-picker[open] {
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		.city-picker[open] {
			opacity: 0;
			translate: 0 12px;
		}
	}

	.city-picker__head {
		padding-block: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.city-picker {
		transition: none;
	}
}

/* Delivery options: a carrier's own note, and the one line explaining پس‌کرایه. */
.shipping-option__note {
	display: block;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.7;
}

.shipping-options__note {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.8;
}

/* Wide screens: the hub's profile and current order side by side; the sidebar carries the
   account pages and logout, so the hub keeps only help. */
@media (min-width: 901px) {
	.account-hub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.account-hub > * {
		grid-column: 1 / -1;
	}

	.account-hub > .account-profile,
	.account-hub > .account-spot {
		grid-column: auto;
	}

	.account-hub:not(:has(> .account-spot)) > .account-profile {
		grid-column: 1 / -1;
	}

	.account-menu__group--pages,
	.account-menu__group--leave {
		display: none;
	}
}

/* Account: small screens ------------------------------------------------------ */

@media (max-width: 900px) {
	.account-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* The hub is the menu; inner pages go back to it. */
	.account-nav {
		display: none;
	}

	.commerce-page__inner--account {
		padding-top: 4px;
	}

	.order-filter {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
	}

	.address-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.woocommerce-address-fields__field-wrapper,
	.account-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-address-fields__field-wrapper > .form-row-first,
	.woocommerce-address-fields__field-wrapper > .form-row-last,
	.account-form__grid > .form-row-first,
	.account-form__grid > .form-row-last {
		grid-column: 1;
	}

	.account-head__title {
		font-size: 22px;
	}

	.account-profile__hello {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.order-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.order-facts li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* DigiPay instalments (inc/digipay.php) --------------------------------- */

.totals-table .bnpl-row td {
	padding: 4px 0 0;
	color: var(--muted);
	font-size: 13px;
	text-align: end;
}

.totals-table .bnpl-row .bnpl__money {
	color: var(--ink);
	font-weight: 600;
}

.bnpl__money {
	white-space: nowrap;
}

.bnpl__currency {
	font-size: 0.85em;
}

/* With a single gateway WooCommerce hides the radio; drop the space kept for it. */
.wc_payment_methods > .wc_payment_method:only-child > label,
.wc_payment_methods > .wc_payment_method:only-child > .payment_box {
	padding-inline-start: 16px;
}

.payment-bnpl > label,
.payment-cash > label {
	justify-content: flex-start;
	gap: 12px;
}

.payment-bnpl > label img,
.payment-cash > label img {
	order: -1;
	width: 36px;
	height: 36px;
	max-height: none;
	border-radius: 10px;
}

/* Zibal uses a horizontal wordmark, with its original proportions. */
.payment-cash > label img {
	width: 72px;
	height: auto;
	max-height: 36px;
	object-fit: contain;
	border-radius: 0;
	flex: 0 0 auto;
}

.bnpl-plan {
	display: grid;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--paper-2);
}

.bnpl-plan__head {
	margin: 0;
	color: var(--ink);
	font-size: 15px;
}

.bnpl-plan__head .bnpl__money {
	font-weight: 700;
}

.bnpl-plan__parts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnpl-plan__parts li {
	padding-top: 8px;
	border-top: 3px solid var(--line-strong);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.bnpl-plan__parts li:first-child {
	border-color: var(--plum);
	color: var(--ink);
}

.bnpl-plan__note {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.9;
}

/* Hand-off page before DigiPay (woocommerce/checkout/order-receipt.php). */
.pay-handoff {
	display: grid;
	justify-items: center;
	gap: 14px;
	max-width: 540px;
	margin: 12px auto 0;
	padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 40px);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
	text-align: center;
}

.pay-handoff__title {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 400;
	line-height: 1.4;
}

.pay-handoff__text {
	max-width: 34em;
	margin: 0;
	color: var(--ink-2);
	line-height: 1.9;
}

.pay-handoff__spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--line);
	border-top-color: var(--plum);
	border-radius: 50%;
	animation: avgi-spin 0.9s linear infinite;
}

.pay-handoff__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--danger-tint);
	color: var(--danger);
}

.pay-handoff__icon .icon {
	width: 26px;
	height: 26px;
}

.pay-handoff__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
}

.pay-handoff .order-facts {
	width: 100%;
}

.pay-handoff .bnpl__logos img {
	width: 56px;
	height: 56px;
	border-radius: 16px;
}

.bnpl-plan__details {
	margin: 0;
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.9;
}

.pay-handoff .support-line {
	margin-top: 4px;
}

/* Checkout: pay bar on phones (inc/checkout.php) -------------------------- */

.pay-bar {
	display: none;
}

@media (max-width: 900px) {
	.pay-bar {
		position: fixed;
		z-index: 45;
		inset-inline: 12px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		max-width: 520px;
		margin-inline: auto;
		padding: 8px;
		padding-inline-start: 18px;
		border-radius: 22px;
		background: rgb(40 40 40 / 0.97);
		box-shadow: 0 0 0 1px rgb(245 241 235 / 0.12), 0 18px 40px -14px rgb(40 40 40 / 0.5);
		color: var(--paper);
		opacity: 0;
		translate: 0 calc(100% + 28px);
		transition: translate 0.45s var(--ease-out), opacity 0.3s var(--ease);
	}

	.pay-bar.is-visible {
		opacity: 1;
		translate: 0 0;
	}

	body.is-typing .pay-bar {
		opacity: 0;
		translate: 0 calc(100% + 28px);
	}
}

.pay-bar__total {
	display: grid;
	min-width: 0;
	margin: 0;
	color: rgb(245 241 235 / 0.65);
	font-size: 12px;
	line-height: 1.5;
}

.pay-bar__total strong {
	color: var(--paper);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.pay-bar__total small {
	display: none;
}

.pay-bar__button {
	flex: none;
	min-height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: 16px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.pay-bar__button:active {
	scale: 0.97;
}

/* Order tracking (inc/tracking.php) ----------------------------------------- */

.track {
	max-width: 620px;
	min-width: 0;
	margin-inline: auto;
}

.track__form,
.track__result {
	display: grid;
	gap: 6px;
	min-width: 0;
	padding: clamp(22px, 5vw, 36px);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
}

.track__intro {
	margin: 0 0 10px;
	color: var(--ink-2);
	line-height: 1.9;
}

.track__error {
	margin: 0 0 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--danger-tint);
	color: var(--danger);
	font-size: 14px;
}

.track__form .form-row {
	margin: 0 0 10px;
}

.track__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
}

.track__form .input-text {
	width: 100%;
	text-align: right;
}

.track__submit {
	justify-self: stretch;
	gap: 8px;
	margin-top: 6px;
}

.track__submit .icon {
	width: 18px;
	height: 18px;
}

.track__account {
	margin: 12px 0 0;
	text-align: center;
	font-size: 14px;
}

.track__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.track__label {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 600;
}

.track__date {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.track__result .order-progress {
	margin: 18px 0 10px;
}

.track__pending {
	margin: 4px 0 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

.track__items {
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.track__items li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.track__thumb {
	flex: none;
	width: 52px;
	height: 65px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--paper-2);
}

.track__name {
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
}

.track__qty {
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
}

.track__total {
	display: flex;
	justify-content: space-between;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-weight: 600;
}

.track__updates {
	margin-top: 16px;
}

.track__updates h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.track__updates ol {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.track__updates li {
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--paper-2);
	font-size: 14px;
}

.track__updates time {
	display: block;
	color: var(--muted);
	font-size: 12px;
}

.track__updates p {
	margin: 4px 0 0;
}

.track__actions {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.tracking-card {
	display: grid;
	gap: 12px;
	min-width: 0;
	margin: 16px 0;
	padding: 16px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 16px;
	background: var(--card);
}

.tracking-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.tracking-card__title .icon {
	width: 22px;
	height: 22px;
	color: var(--plum);
}

.tracking-card__facts {
	display: grid;
	gap: 8px;
	margin: 0;
}

.tracking-card__facts > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tracking-card__facts dt {
	color: var(--muted);
	font-size: 13.5px;
}

.tracking-card__facts dd {
	margin: 0;
	font-weight: 500;
}

/* Iran Post codes are 24 digits: the code gets its own line and may wrap. */
.tracking-card__facts > div:has(.tracking-card__code) {
	display: grid;
	gap: 6px;
}

.tracking-card__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--paper-2);
}

.tracking-card__code bdi {
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

.tracking-card__copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: none;
	color: var(--ink-2);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.tracking-card__copy .icon {
	width: 15px;
	height: 15px;
}

.tracking-card__link {
	justify-self: start;
	gap: 6px;
	white-space: nowrap;
}

/* Buttons inside page content keep their own look (no content-link underline). */
.track .button {
	text-decoration: none;
}

.tracking-card__link .icon {
	width: 15px;
	height: 15px;
}

/* Thank-you page: how to follow the order. */
.track-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px 14px;
	margin: 22px 0 6px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--paper-2);
}

.track-cta__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--card);
	color: var(--plum);
}

.track-cta__icon .icon {
	width: 22px;
	height: 22px;
}

.track-cta__text {
	margin: 0;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

.track-cta .button {
	grid-column: 1 / -1;
	justify-self: stretch;
}

@media (min-width: 640px) {
	.track-cta {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.track-cta .button {
		grid-column: auto;
	}
}

/* Field hints (WooCommerce "description"), e.g. the postcode format. */
.form-row .description {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.7;
}

/* Checkout: the eNamad seal beside the pay button (inc/checkout.php). */
.checkout-trust {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
}

.checkout-trust .trust-seals a {
	width: 76px;
	height: 76px;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgb(40 40 40 / 0.35);
}

.checkout-trust__text {
	margin: 0;
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.9;
}


/* Checkout with sign-in by code: the mobile and code first (woocommerce/checkout/form-checkout.php). */
.checkout-gate {
	display: grid;
	gap: 12px;
	max-width: 520px;
	margin: 8px auto 40px;
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--card);
}

.checkout-gate__title {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 400;
}

.checkout-gate__text {
	margin: 0 0 4px;
	color: var(--ink-2);
	font-size: 14.5px;
}

/* The gate already says what to do: the sign-in form's own heading and lead are not repeated. */
.checkout-gate [data-otp-step="phone"] :is(.otp__title, .otp__lead) {
	display: none;
}

/* Customer club (Avgi Commerce): account page, checkout points, earn row, birthday ----------- */

.club {
	display: grid;
	gap: 18px;
}

.club h3 {
	margin: 0 0 12px;
	font-size: var(--step-1);
	font-weight: 600;
}

.club-card {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: 6px;
	width: 100%;
	max-width: 440px;
	min-height: 210px;
	padding: 22px 22px 20px;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(135deg, #3d2a24, #8a5d45 70%, #b07e5d);
	box-shadow: 0 22px 44px -26px rgb(40 40 40 / 0.7);
	color: #fbf6f0;
	isolation: isolate;
}

.club-card--silver {
	background: linear-gradient(135deg, #3c4046, #6f757c 60%, #a9afb6);
}

.club-card--gold {
	background: linear-gradient(135deg, #4a3608, #94701f 60%, #cfa84a);
}

.club-card__motif {
	position: absolute;
	z-index: -1;
	top: -48px;
	inset-inline-end: -48px;
	width: 180px;
	height: 180px;
	color: rgb(255 255 255 / 0.08);
}

.club-card p {
	margin: 0;
}

.club-card__brand {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

.club-card__brand span span {
	color: var(--plum-light);
}

.club-card__tier {
	font-size: 13px;
	opacity: 0.85;
}

.club-card__points {
	margin-top: 14px;
	font-size: 15px;
}

.club-card__points strong {
	display: inline-block;
	margin-inline-end: 4px;
	font-size: clamp(2.2rem, 1.8rem + 2vw, 2.9rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.club-card__value {
	font-size: 13px;
	opacity: 0.85;
}

.club-progress,
.club-ways,
.club-invite,
.club-history {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.club-progress p {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

.club-progress__track {
	display: block;
	height: 8px;
	margin: 10px 0 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--paper-2);
}

.club-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--plum);
}

.club-progress .club-progress__note {
	color: var(--muted);
	font-size: 12px;
}

.club-ways ul,
.club-history ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-ways li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.8;
}

.club-ways li .icon {
	flex: none;
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	padding: 9px;
	border-radius: 12px;
	background: var(--plum-tint);
	color: var(--plum);
}

.club-ways a {
	color: var(--plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.club-ways__note {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.9;
}

.club-invite p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.9;
}

.club-invite__link {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.club-invite__link input {
	flex: 1 1 220px;
	min-width: 0;
	/* A link to copy: Latin digits (the store font draws Persian ones). */
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
}

/* Below 16px, iPhone zooms the whole page in when the field is tapped to select the link. */
@media (pointer: coarse) {
	.club-invite__link input {
		font-size: 16px;
	}
}

.club-invite__link .button {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.club-invite__link .button .icon {
	width: 18px;
	height: 18px;
}

.club-invite .club-invite__count {
	margin: 12px 0 0;
	color: var(--success);
	font-size: 13px;
}

.club-history li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.club-history li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.club-history__what {
	font-size: 14px;
}

.club-history__when {
	grid-row: 2;
	color: var(--muted);
	font-size: 12px;
}

.club-history__points {
	grid-row: 1 / span 2;
	grid-column: 2;
	color: var(--success);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.club-history__points.is-minus {
	color: var(--muted);
}

.club-history__empty {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

/* Checkout: «استفاده از امتیاز» above the payment methods. */
.club-redeem {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 14px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--plum-light);
	border-radius: 18px;
	background: var(--plum-tint);
}

.club-redeem.is-applied {
	border-color: rgb(47 93 80 / 0.3);
	background: var(--success-tint);
}

.club-redeem__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--card);
	color: var(--plum);
}

.club-redeem.is-applied .club-redeem__icon {
	color: var(--success);
}

.club-redeem__icon .icon {
	width: 20px;
	height: 20px;
}

.club-redeem__text {
	margin: 0;
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.8;
}

.club-redeem__text strong {
	display: block;
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 700;
}

.club-redeem__text span {
	display: block;
}

.club-redeem__button {
	grid-column: 1 / -1;
	width: 100%;
}

@media (min-width: 560px) {
	.club-redeem {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.club-redeem__button {
		grid-column: auto;
		width: auto;
	}
}

/* Bag and checkout totals: what the order earns, as a note across the table. */
:is(.totals-table, .review-table) .club-earn td {
	padding: 14px 0 0;
	border: 0;
	text-align: start;
}

.club-earn__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* Fills the row without widening the table's columns (the product name keeps its room). */
	width: 0;
	min-width: 100%;
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--plum-tint);
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.8;
}

.club-earn__note .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--plum);
}

.club-earn__note strong {
	color: var(--plum);
	font-weight: 700;
}

.club-earn__note small {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 400;
}

/* Account details: the birthday. */
.woocommerce-EditAccountForm .club-birthday {
	grid-column: 1 / -1;
}

.club-birthday__note {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13px;
}

.club-birthday__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.club-birthday__fields .form-row {
	width: auto;
	margin: 0;
}

.club-birthday__saved {
	margin: 0;
	font-weight: 600;
}

.club-birthday__saved span {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 400;
}